## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
UI / design-system consistency (accessibility).
## What is the current behavior?
Keyboard focus rings are inconsistent across Studio and `packages/ui`:
- Custom Button uses thick `outline` with per-variant colours (brand /
grey / destructive / warning)
- Form controls use muted grey rings (`ring-background-control`)
- Tabs / NavMenu / Radio use soft brand `ring-ring`
- Studio `.inset-focus` uses dark green `outline-brand-600`
Related: [DEPR-354](https://linear.app/supabase/issue/DEPR-354).
## What is the new behavior?
One shared focus recipe, exposed as Tailwind `@utility` classes in
`packages/config/css/utilities.css`:
| Utility | Use when |
| --- | --- |
| `focus-ring` | Buttons, inputs, most controls (offset ring) |
| `focus-inset` | Dense/flush surfaces such as interactive table rows
(renamed from `inset-focus`) |
```txt
# focus-ring
outline-hidden
focus-visible:ring-2
focus-visible:ring-ring
focus-visible:ring-offset-2
focus-visible:ring-offset-background
```
Applied on Button, shadcn form controls, Menu/NavMenu, Command palette
trigger, Studio table rows, and related call sites. Documented in the
design-system accessibility docs. Variants do not change focus ring
colour.
When the ring must appear on a different element than the focused one
(e.g. Menu + ProductMenu `Link` via `group-focus-visible`, or InputGroup
via `:has()`), keep an explicit ring stack. The utilities bake in
`:focus-visible` on the same element.
## Additional context
**Out of scope**
- Full `packages/ui` / Studio / www sweep
- Legacy Studio form-group green box-shadow cleanup
- ESLint rule for bare `outline-none`
## Test plan
Prefer Safari (“hard mode” for `tabIndex`). Expect one soft brand ring
everywhere: not grey, not solid green outline.
### Design system
- [ ]
[Accessibility](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/accessibility):
recipe docs match what you see
- [ ]
[Button](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/button):
Tab primary / default / danger; same ring colour
- [ ] [Table → Row-level
navigation](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/table#row-level-navigation):
Tab an interactive row; inset outline (`focus-inset`) sits inside the
row
### Studio
- [ ] **Org home → table view** (`/organizations/_` or org projects):
switch to the table layout, Tab onto a project row; inset outline sits
inside the row (list/card view uses CardButton, not `focus-inset`)
- [ ] **Project sidebar** (Database, Auth, Storage, …): Tab the main
product nav links; ring follows the focused item (not the nested section
menus like Tables / Roles)
- [ ] **Storage → Files**: Tab a bucket row; same inset outline as org
table rows
- [ ] **Project Settings → General** (or Compute and Disk): Tab through
inputs, checkboxes, switches, selects; same offset ring, no ring on
mouse click
- [ ] **Header ⌘K** (desktop width): Tab to the search control after
Feedback; same soft brand `focus-ring` (was a thicker
`ring-border-strong` before)
- [ ] **Table Editor or SQL Editor tabs**: focus a tab, Tab to × if
active; close shows a ring
- [ ] **Light + dark**: ring stays visible against both backgrounds
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Problem
Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.
## Solution
- Cleanup those exports
- Update imports when necessary
No functional changes. If it builds, it's fine
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## TL;DR
fixes a few storage shortcut edge cases
## ref:
- closes https://github.com/supabase/supabase/issues/45977
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* The storage bucket creation shortcut now respects user permissions and
will only be available when allowed.
* Storage file deletion shortcut now requires appropriate write
permission before it can be used on selections.
* Refresh shortcut in the storage explorer is always available
regardless of selection state.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45978)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Adds keyboard shortcuts to the Storage section, mirroring the
conventions already established for Auth Users and Database pages:
- **Storage navigation chords** (`S, F` / `S, A` / `S, V` / `S, 3`)
active only inside `StorageLayout`.
- **Files (bucket list) page** shortcuts for search, create, refresh,
reset filters, reset sort.
- **Storage Explorer** shortcuts for upload, new folder, view toggle,
refresh, search, multi-select download/move/delete, and an Escape
ladder.
- `ShortcutTooltip` wired into the relevant buttons so users can
discover keybinds on hover.
- Reload spinner is now driven by a shared store flag, so it shows
whether you click the button or fire the shortcut.
## Test plan
### Storage navigation chords
Active anywhere under `/project/<ref>/storage/*`.
| Keybind | Action |
|---------|--------|
| `S` then `F` | Go to Files |
| `S` then `A` | Go to Analytics buckets (platform + feature-flagged) |
| `S` then `V` | Go to Vector buckets (platform + feature-flagged) |
| `S` then `3` | Go to S3 settings (platform only) |
### Files (bucket list) page
At `/project/<ref>/storage/files`.
| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search buckets") | Selects existing text |
| `Shift+N` | Create new bucket | Opens the create-bucket modal |
| `F` then `C` | Reset filters | Clears the search string |
| `Shift+R` | Refresh buckets | Refetches the bucket list |
| `S` then `C` | Reset bucket sort | Only fires when sort ≠ default
(Created at) |
### Storage Explorer (inside a bucket)
At `/project/<ref>/storage/files/buckets/<bucketId>`.
| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search files") | Opens the search input if
hidden, then focuses |
| `Shift+R` | Refresh | Refetches all opened folders; spinner reflects
state |
| `I` then `F` | Upload files | Disabled w/o ` STORAGE_WRITE ` or at
bucket root with no folder |
| `I` then `N` | Create folder | Same permission gates as Upload |
| `V` then `C` | View as columns | |
| `V` then `L` | View as list | |
| `Shift+D` | Download selected | Only fires when ≥1 item selected;
single vs many handled |
| `Shift+M` | Move selected | Only fires when ≥1 item selected AND `
STORAGE_WRITE ` granted |
| `Mod+Backspace` | Delete selected | Only fires when ≥1 item selected
(` Mod ` = ⌘ on macOS / ` Ctrl ` on Win/Linux) |
| `Escape` | Clear selection | If ≥1 item selected |
| `Escape` | Close file preview | If no selection and preview pane open
|
| `Escape` | Close search | If no selection, no preview, and search is
open |
### Tips while testing
- [x] Chords (two-key sequences): press the first key, release, then
press the second key within ~1s
- [x] Hover any wired button (search, Refresh, Upload, Create folder,
View, Download, Move, Delete, the bucket Create button, sidebar items)
to see the keybind in a tooltip
- [x] Most actions also appear under "Shortcuts" in `Cmd+P`
- [x] Chords starting with a plain letter (` S, F ` / ` I, F ` / ` V, C
` / ` F, C ` / ` S, C `) won't fire while typing in an input — click out
first
- [x] `Escape` does fire from inside the search field (closes the
search)
- [x] `Cmd+/` opens the full shortcuts reference
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Keyboard shortcuts added across Storage: buckets (refresh, clear sort,
create, search), explorer (upload, create folder, refresh, download,
move, delete, clear search), and navigation shortcuts for
Files/Analytics/Vectors/S3.
* **UI**
* Shortcut keytips/tooltips added to relevant buttons and menu items for
discoverability.
* **Documentation/Tests**
* Shortcut reference sheet labels updated and covered by a new test.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45837)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Refactor
## What is the current behavior?
Storage explorer preferences (`view`, `sortBy`, `sortByOrder`,
`sortBucket`) are managed inline within the Valtio proxy state in
`storage-explorer.tsx`, which reads/writes localStorage directly.
## What is the new behavior?
Preferences are extracted into a dedicated `useStoragePreference` hook
backed by `useLocalStorage`. A companion `getStoragePreference` function
allows the Valtio state to read sort options imperatively for API calls
without holding preference data itself. Consumers import the hook
directly instead of reading preferences from the snapshot.
## Additional context
No behavioral or visual changes — localStorage key and data shape are
unchanged.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Storage view and sorting preferences now persist per project and drive
the explorer UI.
* Changing view or sort preferences refreshes folder contents and clears
the open file preview.
* **Chores**
* Centralized preference handling for consistent behavior across the
storage explorer.
* **Tests**
* Updated tests to exercise the new preference-backed behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Updates the tooltip copy for `public` pills in Storage. More accurate
description.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified the tooltip text for "Public" buckets across the storage
interface so the same explanatory message appears consistently on bucket
listings, badges, and bucket pages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* fix(studio): use paginated buckets query for useSelectedBucket
Part of the effort to migrate all buckets list queries to the paginated
version. This migrates the useSelectedBucket hook, which is used on the
bucket details page to fetch the bucket info.
* fix(studio): flash of stale content when switching buckets
There's a flash of stale content when switching between buckets in the
File Explorer. This happens since the change to useSelectedBucket,
because when the bucket changes, the new data is no longer available
immediately. It must be awaited, and meanwhile `columns` in global
storage state is stale. This commit adds a check for whether the state
is stale by checking the current ID against the stored ID.
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* updated middle click, ctrl click to open new tab
* updated PR review
* updated to create a wrapper for handling navigation
* updated file spelling
* updated to add edge functions button
* updated navigation for command space and enter
* added inset focus class
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit 2a07df64b5.
* Revert the rss.xml file to master.
The bucket list endpoint now accepts pagination options. Adapting the
storage buckets table UI to paginate in pages of 100 buckets at a time,
with infinite loading/scrolling.
* Midway
* Hook up create/delete table, and update all iceberg RQs with mgmt API routes
* Add insert data CTA, update create table logic for decimal and fixed types
* Clean up
* Nit
* Fix test
* added ability to download files from storage api directly
* updated to rechange size
* updated test methods
* updated test suite
* updated tests
* updated to remove loops
* removed AI slop
* Updated to use single API key in mem
* Fix the memoization of the getOrRefreshTempApiKey function.
* updated imports
* updated imports
* updated to use import meta
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Handle landing on a bucket id that doesnt exist in project
* Standardize re routing behaviour for files bucket
* refactor
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* First pass of deprecating old storage UI components
* Clean up local-storage flag for new storage UI
* Add coming soon UI for analytics and vector buckets pages
* Set up warning states for analytics buckets
* fix spelling and margin
* Smol fix
* nit
* Surface wrappers upgrade check in UI instead of toast
* Nit clean up
* update tests
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
* refactor(infinite list): use @tanstack/react-virtual for virtualization
Swapping virtualization libraries from `react-window` to
`@tanstack/react-virtual`.
Motivation: we need a completely headless library for maximum
flexibility. `react-window` injects extra DOM elements which makes it
hard to customize styling and placement on elements that are very picky
about their DOM structure, like tables.
* refactor(table editor menu): use new infinite list
* refactor(notifications): use new infinite list
* cleanup(infinite list): remove old infinite list
* refactor(storage menu): use new infinite list & remove react-window deps
* fix(storage ui v2): virtualize files buckets table
* refactor(virtualized table): make virtualized table a general ui component
Make virtualized table a general UI component and refactor FilesBuckets
to use VirtualizedTable.
* Fix header bg color, add sort to files buckets, sort bucket list
* Smol fix
* nit
* fix(storage buckets list): keep unvirtualized if user has <= 50 buckets
* Break up FilesBuckets into smaller components
* Nit
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Danny White
