- Remove the 'Restoring is non-destructive' admonition from the
bottom of the Versions tab
- Refactor getMockObjectVersions to accept the bucket's current
cap and expiryDays and adapt its output so version-list labels
are always consistent with the policy:
* Never returns a version older than the retention window
(no 'Past Nd limit' surprises when the user set fewer days)
* Never returns more noncurrent versions than the cap
(no '#3 of 2' when the user tightened the cap)
- Anchor all version timestamps to the real clock via
daysAgoFromNow so the mock stays fresh regardless of when the
prototype is opened, instead of drifting away from the fixed
BASE_DATE
- Wire useObjectVersionsQuery to look up the bucket's protection
and pass it into the mock on every fetch, so policy edits from
the bucket modal reflect in the panel next time it opens
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Show expiration policy context directly in the Versions tab:
- Cap badge and retention badge in the header section
- Combined mode indicator (both/either) when both policies are set
- At-cap and nearing-cap warnings
- Per-version VersionExpiryIndicator showing days remaining and
cap position (#N of M) with warning colors based on combined
and/or policy logic
- Pre-computed noncurrent indices for efficient lookup
- Versioning-suspended admonition banner
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Call trigger() after each field.onChange so zod validation runs
immediately as the user types, surfacing errors via FormMessage
- Simplify the S3 cap error message to 'Cannot exceed 100 versions'
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Add S3_MAX_NONCURRENT_VERSIONS constant (100) and enforce it in
superRefineBucketProtection independently of plan limits
- Remove HTML min attributes from both inputs so only Supabase inline
errors (FormMessage via FormItemLayout) appear — no browser tooltips
- Plan-specific bounds still enforced as before; the S3 cap is checked
first with a distinct error message
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- 'both' mode: show a second example where one condition isn't met,
making it clear the version is kept because both must be exceeded
- 'either' mode: show two examples — one where only the version cap
is exceeded, one where only the age limit is exceeded — to
illustrate that either condition alone triggers deletion
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Days only: show a version at days+1 (deleted) vs days-1 (kept)
- Versions only: show versions+1 total, oldest one gets deleted
- Both conditions: show versions+1 at days+1, explain the and/or logic
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Change InputGroupText suffix from 'max' to 'versions' on the retained
noncurrent versions input
- Show 'See how this works' explainer when either expiration field has a
value, not only when both are set
- Add context-specific explainer text for days-only, versions-only, and
both-conditions cases
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Replace custom raw <input> elements with FormItemLayout + InputGroup +
FormInputGroupInput + InputGroupAddon pattern from the design system
- Use layout='flex-row-reverse' for label-left, input-right alignment
- Both version_expiry_days and max_noncurrent_versions default to empty
(no prefill on toggle)
- Add warning Admonition when no expiration policy is configured to
alert about ongoing storage costs
- Remove unused useFormState import and prefill logic
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Replace the standard form-field layout with the design-handoff UI:
- Sentence builder paragraph that adapts to which fields are filled
(both empty → 'retained indefinitely', one filled → describes that
condition, both filled → sentence with inline toggle)
- Inline [both | either] pill toggle embedded in the sentence text
when both conditions are set (maps to ExpirationMode 'and' / 'or')
- Compact number inputs with suffix labels ('days' / 'max'),
right-aligned text, and em-dash placeholder
- Collapsible 'See how this works' section with a dynamic example
that uses the actual input values and updates on toggle
- Both fields are now optional — empty means 'no limit' for that
condition. Validation only checks min/max when a value is provided.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Replace bg-border-stronger (oklch with alpha) with solid hsl values:
- Light mode: hsl(0 0% 80%) — neutral mid-gray
- Dark mode: hsl(0 0% 30%) — neutral mid-gray
This prevents the accentuated color at the intersection where
the vertical and horizontal lines overlap.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Lift expandedVersionIds state to DeletedFilesContext (shared between
DeletedFilesList and FileExplorerHeader)
- Move 'Expand all' / 'Collapse all' buttons from the table header into
the FileExplorerHeader top bar with outline button variant
- Change tree-connector line color from bg-foreground-muted to
bg-border-stronger for a subtler appearance
- Increase gap between horizontal tree branch and version title text
(pl-[22px] → pl-[36px], w-[11px] → w-[8px])
- Apply same tree line changes to standalone Trash page (TrashList)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Tree connector lines use bg-foreground-muted instead of bg-border for
better visibility
- Horizontal branch shortened from w-[15px] to w-[11px], creating a 4px
gap between the line end and the version text (text still aligns with
parent name)
- Replaced the icon-only expand/collapse toggle in the table header with
two separate text buttons: 'Expand all' and 'Collapse all', separated
by a dot divider
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Replace CornerDownRight icon with CSS tree-connector lines for nested
version rows. Each version draws:
- A vertical line from the top border to the junction point (center)
- A horizontal branch from the junction to the version text
- For non-last versions, the vertical line continues to the bottom
border, connecting seamlessly with the next row
- For the last version, the vertical line stops at the junction (└ shape)
Lines are positioned at left-[23px] to align with the parent row's
chevron center (16px cell padding + 7px icon center). Version text
starts at pl-[22px] to align with the parent row's name text.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Version rows are now selectable via checkboxes for batch multi-selection,
using composite keys (objectId::versionId) in the shared selection state
- Clicking a version row opens the preview panel with version-specific
metadata (version ID, action, created date, size) and a 'no preview
available' placeholder
- Aligned CornerDownRight icon with parent row chevron and version text
with parent name text (both use gap-x-2 and size-14 icons)
- Added expand/collapse all toggle button in the table header top right
(ChevronsUpDown / ChevronsDownUp icons)
- Restore and delete actions on version rows now perform real client-side
effects: version-level mock store mutations + query cache invalidation
- Removed the Expires column from both DeletedFilesList and TrashList
- Extended DeletedFilesContext with selectedDeletedVersion state
- Added version-level mutation functions to protection-mocks.ts
- Added useTrashVersionRestoreMutation and useTrashVersionDeleteMutation
hooks to bucket-trash-query.ts
- Updated Trash page (standalone) with version-level mutation wiring
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- PreviewPane: add Info hint below Delete button when versioning is
active, explaining that deleting soft-deletes the object and all
versions and they can be restored from the deleted versions view
- VersionHistory: add Get URL (Copy) icon button on every version row
alongside existing Download/Restore/Delete actions
- DeletedFilesList & TrashList: implement collapsible nested grouping
for noncurrent versions under parent objects with ChevronRight/Down
expand toggle, version count badge, and per-version Restore/Delete
actions on hover
- protection-mocks: expand mock data from 8 to 12 trash objects with
richer version histories (up to 6 noncurrent versions per object)
to properly showcase the nested deleted versions UI
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Task A: Add ExpirationMode (and/or) toggle between retention-days and
max-versions fields in bucket settings. 'and' = single S3 lifecycle policy
(both conditions must be met), 'or' = two independent rules (either triggers).
Wired into form schema, create/edit bucket modals, and mock store.
Task B: Move 'Show deleted versions' toggle from breadcrumb bar into the
file explorer table header, right of the search input. Switch is on the left
of the label text.
Task C: Add noncurrent version rows beneath each deleted object in TrashList.
Nested rows have left indentation with a CornerDownRight icon and lighter
background. Added DeletedObjectVersion interface and mock data to
protection-mocks.ts. Updated all user-facing terminology from 'files' to
'versions' across Trash, TrashList, TrashSelectionBar, DeletedFilesList,
DeletedFilesHeaderSelection, DeletedFilePreviewPane, and bucket page tabs.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Reverted the timeline row's Restore action back to its icon-only
text-variant button — the ask to make Restore a default-variant
button was about the "Back to latest" action in the version
preview banner, not the per-row action in the Versions tab
- The version preview banner's action is now labeled Restore, styled
as a default-variant button, and actually restores the previewed
version as current (instead of just clearing the preview)
- Versioning can no longer be turned fully "off" on a bucket that's
ever had it enabled — it moves to a new suspended state instead,
matching how bucket versioning actually behaves. Suspending only
stops new noncurrent versions from being created; nothing already
retained is deleted, so the destructive typed-confirmation flow for
disabling versioning is gone
- Added `hasVersioningHistory` (enabled OR suspended) alongside the
existing `isBucketVersioned` (enabled only) and repointed every
surface that manages or warns about retained version/trash data to
the former, since a suspended bucket can still be sitting on plenty
of it
- Bucket list "Versioning" column, plan-downgrade admonition, and the
Versions tab now all reflect the three states (Enabled / Suspended /
never enabled)
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Versions tab in file preview now only shows when the current bucket
has object versioning enabled, instead of the global feature flag
- Renamed the current-version badge from Latest to Current
- Previewing-version banner now puts the version date on its own line
- Restore action is now a labeled default-variant button instead of
an icon-only text button
- Hover-underline moved from the timeline dot to the version date, and
the currently-previewed version is now highlighted by coloring its
date text and dot to match the brand color
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Usage breakdown & chart:
- Split "Object versions" into "Noncurrent versions" and "Soft-deleted files"
in the Storage Size breakdown, in the mock data model, and in the chart's
stacked bars.
- Wire the mock retention series into the Storage Size chart itself so the
daily bars actually visualize the live / noncurrent / soft-deleted split,
not just the inline breakdown.
Edge cases:
- Tightening retention (fewer days or fewer versions than the bucket already
has) shows an inline admonition in the edit modal explaining that some
retained data will be permanently expired on save.
- EmptyBucketModal: when the bucket is versioned, the destructive banner
copy and an extra warning admonition call out that emptying also purges
every noncurrent version and soft-deleted file.
- DeleteBucketModal: appends a note that all versions and soft-deleted files
will be lost, when the bucket is versioned.
- Plan downgrade auto-disable-and-purge: on the buckets list, an effect
detects when the org plan no longer supports versioning and invokes a new
purgeVersioningOnPlanDowngrade() helper that flips every enabled bucket in
the mock store back to disabled and clears the shared trash store, then
shows a warning admonition listing the affected buckets.
- Public bucket + versioning: inline admonition in the modal explains that
public buckets expose every version by default and points to an RLS-based
mitigation (filter storage.objects by an isCurrent metadata flag).
Version cap indicator:
- In VersionHistory, show a `{count} / {cap} noncurrent` badge when a cap is
configured, with contextual copy at ≥80% and at cap explaining that older
versions auto-expire on the next overwrite.
Copy:
- Reword "Noncurrent version retention" and "Max noncurrent versions"
descriptions to be concise/factual instead of using "this many" phrasing.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Disabling object versioning on a bucket that already has it enabled now
requires typing the bucket name in a destructive TextConfirmModal,
warning that every noncurrent version and soft-deleted file will be
permanently deleted once saved. New buckets (never had versioning) skip
this since there's nothing to lose. An inline Admonition also reflects
the staged, not-yet-saved change in the form.
- Resume a (snapshot-free, adapted for this branch's object-level-only
scope) version of the org Usage page's Storage Size breakdown: a
Live objects vs Object versions split, a "retained recovery data"
warning, and a per-bucket breakdown of retained bytes. Backed by a new
mock retention-usage query (data/storage/protection/storage-retention-usage-query.ts),
rendered via the Storage Size category's additionalInfo slot in
/org/[slug]/usage.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Prefill "Noncurrent version retention" and "Max noncurrent versions"
with the plan's default values when the Object versioning switch is
turned on (only if the fields are still empty), so users can save
immediately instead of starting from a blank input.
- In the deleted files view, render the preview panel as an absolutely
positioned overlay over the rows instead of a flex sibling that
shrinks the table. Rows keep their full width and stay horizontally
scrollable underneath the panel.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Show an "Enabled" badge instead of "object-level" text under the
buckets list "Versioning" column, since only object-level versioning
exists in this scope.
- Tighten vertical padding on deleted files table rows (px-4 py-2
instead of the default p-4).
- Only show the "Show deleted files" toggle for buckets with versioning
enabled; move the Switch to the right of its label.
- Move isShowingDeleted from local useState to a nuqs query param
(?deletedFiles=true) so the deleted files view is linkable/bookmarkable.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Fix "Cannot read properties of undefined (reading 'content')" crash:
the snapshot-removal pass dropped the required `tooltip` prop from two
ButtonTooltip calls (TrashList's per-row delete, Trash's "Delete all
permanently"). Swap both to plain Button since no dynamic tooltip is
needed there.
- Rework DeletedFilesList (the "Show deleted files" switch view, now
the default buckets page) from stacked card rows into a proper single-line
Table matching the Files/Deleted files tab's TrashList row styling and
column headers (Object, Original location, Deleted, Size, Expires).
- Add per-row Restore/Delete permanently actions that only reveal on row
hover, alongside the existing multiselect checkbox and click-to-preview
behavior.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Snapshots aren't implemented in this branch yet, so drop the
heldBySnapshot field from TrashObject/ObjectVersion mocks and all
related UI: disabled states, tooltips, badges, and copy across the
deleted files list/preview, version history, and bulk trash actions.
Delete-all/permanent-delete mutations now act on every selected/listed
item unconditionally.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Bucket versioning: create/edit bucket modals now write to an in-memory
mock store (setMockBucketProtection) on save, so the buckets list
"Versioning" column reflects the change immediately. Resets on page
refresh since it's plain module state (no real API yet).
- Deleted files: restore/permanent-delete mutations now actually mutate
the trash mock store instead of no-op delaying, so the deleted files
list updates after restoring or hard-deleting items.
- Added 5 more dummy trash entries (8 total) with varied held/expiry
states.
- Changed all "Delete permanently"/"Delete all permanently" trigger
buttons to the `danger` Button variant.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Reduce per-item bottom padding from pb-8 to pb-4
- Remove the hover/selected background on each version row entirely;
instead underline the timeline dot on hover to signal interactivity
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Move min/max/required validation for version_expiry_days and
max_noncurrent_versions into a shared superRefine (BucketDataProtectionFields.schema.ts),
called from each modal's own superRefine, instead of imperative
validateVersioningFields() + form.setError() calls in onSubmit. Errors
now surface the same way as the rest of the form (FormItemLayout/FormMessage),
matching Studio's established form-error convention.
- Switch the fields to the '' empty-sentinel + z.coerce.number() union
pattern (per the react-hook-form skill) instead of z.string().optional(),
keeping inputs fully controlled without special-casing undefined.
- Build each modal's schema dynamically via useMemo(() => schema(planLimits), ...)
since the versioning bounds depend on the async-loaded org plan.
- Replace destructured useFormContext().watch() with useWatch({ control, name })
in BucketDataProtectionFields, avoiding the ratcheted no-use-watch lint warning.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Move versioning fields (retention days, max noncurrent versions) from
local useState into the parent form via react-hook-form + zod, fixing
the bug where clearing an input forced it back to "0" and blocked
typing a fresh single digit
- Show a validation error on submit if versioning is enabled but a
field is left empty
- Gate object versioning by org billing plan: disable the toggle and
show an upgrade prompt on the Free plan (which also doesn't support
lifecycle policy management); enforce plan-specific min/max ranges
for retention days and max versions on Pro/Team/Enterprise
- Add getVersioningPlanLimits() + validateVersioningFields() helpers
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Shows "object-level" for buckets with versioning enabled, "-" otherwise,
based on the existing isBucketVersioned() mock helper. Snapshots-level
versioning will be added in a future iteration.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Deleted files batch actions:
- Move Restore/Delete permanently buttons into the StorageExplorer header
row (same position as the normal file selection bar)
- Show "X items selected" text on the far left, actions on the far right
- Update select-all row to show "Select/Unselect all X files" label
Bucket versioning fields:
- Use FormItemLayout with flex-row-reverse layout for retention and max
versions fields (label left, input right)
- Use InputGroup with InputGroupAddon for unit suffixes ("days", "versions")
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Reduce vertical gap between detail fields from space-y-6 to space-y-3
- Make Restore/Delete permanently actions sticky at the bottom with a
border-t separator, only the preview + details area scrolls
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Move "Show deleted files" toggle from StorageExplorer header to
page-level breadcrumbs as a Switch control, left of Policies button
- Add checkbox multiselect for deleted files with bulk Restore/Delete
permanently actions and shift-click range selection
- Keep search input visible when showing deleted files, with contextual
placeholder text
- Add file preview thumbnail to deleted file preview pane
- Change "Delete permanently" button to default variant (matching Restore)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Add an alternative bucket view at /storage/files/bucketsV2/[bucketId]
that replaces the separate Files/Deleted files tabs with a unified
StorageExplorer. A "Deleted files" toggle button in the header's
actions bar (left of Navigate) switches between live files and
soft-deleted items inline.
When showing deleted files:
- The file listing is replaced with a DeletedFilesList showing all
soft-deleted objects with name, size, deletion time, and origin
- Clicking a deleted item opens a dedicated DeletedFilePreviewPane
with Original location, Deleted at, Deleted by, Size, Expires,
and Restore / Delete permanently actions
- Upload, search, view options, and folder creation are hidden
The existing bucket page is unchanged (wrapped in DeletedFilesProvider
with enabled=false). The bucketsV2 route is navigable only via URL.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Scoped-down storage protection prototype with three features:
- Bucket-level versioning policy (retention days, max versions) in create/edit modals
- Object version history in the file preview pane with restore/delete actions
- Per-bucket deleted files (trash) view with bulk selection, restore, and permanent delete
All data is mock-backed behind the STORAGE_PROTECTION_ENABLED feature flag.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
## What kind of change does this PR introduce?
Bug fix stacked on #48478.
## What is the current behavior?
Storage Explorer renders the custom closed-folder icon at `1.5` but
leaves the Lucide open-folder icon at its default `2`. The duplicated
file-picker implementation also uses a different set of stroke-width
overrides.
## What is the new behavior?
A shared `StorageRowIcon` renders loading, open and closed folder,
image, audio, video and generic file icons at `1.5` across Storage
Explorer, row editing and the bucket file picker.
Test by comparing open and closed folders and file-type rows in Storage
Explorer and the bucket file picker.
| Before | After |
| --- | --- |
| <img width="524" height="336" alt="CleanShot 2026-08-03 at 18 38
06@2x"
src="https://github.com/user-attachments/assets/15eb8b9f-69fc-4eee-8428-d7ec26dce8dc"
/> | <img width="522" height="328" alt="CleanShot 2026-08-03 at 18 39
20@2x"
src="https://github.com/user-attachments/assets/17b7dddd-8d36-421c-8356-c9c1bd7456e8"
/> |
| _Thicker image and file icon compared to folder icon_ | _Every icon
has the same stroke thickness_ |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Standardized file, folder, media, and loading icons across storage
views.
* Improved visual consistency with unified icon sizing, styling, and
stroke width.
* **Tests**
* Added coverage for loading, folder, media, and generic file icon
states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Bug fix. Resolves DEPR-539.
## What is the current behavior?
When a focused child unmounts, Radix can move focus to the Sheet wrapper
and break the expected tab order. Several callsites suppress the
wrapper's tabindex individually.
## What is the new behavior?
Sheet still focuses its first interactive child when opened, but the
wrapper itself is no longer focusable by default. Callers can opt in
with an explicit `tabIndex` when needed.
## Additional context
### Testing
Compare this Studio experience on both this branch and `master`:
1. Open any project with an Edge Function.
2. Go to **Edge Functions**, open the function, then click **Test**.
3. Under **Headers**, click **Add Headers**. Click the first header key
input, then Tab slowly through the header inputs and remove buttons.
On `master`, focus can jump to the whole Sheet. On this branch, focus
stays on the controls in order.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved keyboard focus behavior across sheets and panels.
* Sheets now focus the first available interactive element when opened,
without adding unnecessary focus targets.
* Preserved support for programmatic focus and prevented focus from
unexpectedly moving to the sheet when focused content is removed.
* Updated authentication, integrations, connection, logging, storage,
and other sheet interfaces consistently.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Accessibility / UX fix
([DEPR-630](https://linear.app/supabase/issue/DEPR-630)).
## What is the current behavior?
In Storage **As columns** view, keyboard select is unclear: the checkbox
stays hidden until hover, so Tab/Space selection is hard to see. The row
actions (three dots) menu also shows a browser default blue outline on
Tab.
## What is the new behavior?
Same icon/checkbox swap as list/hover, but also on keyboard focus:
- Checkbox replaces the icon on hover, `:focus-within`, and when
selected (no layout shift)
- Checkbox becomes visible when focused via keyboard (without needing
hover)
- Row gets an inset outline while the checkbox is focused
- Folders have no checkbox (non-focusable spacer only)
- Row actions trigger uses `focus-ring` instead of the browser blue
outline
| Before | After |
| --- | --- |
| <img width="1046" height="362" alt="CleanShot 2026-07-31 at 14 37
47@2x"
src="https://github.com/user-attachments/assets/9b827627-17e6-49a6-87a3-1253b4cef1da"
/> | <img width="1046" height="390" alt="CleanShot 2026-07-31 at 14 37
13@2x"
src="https://github.com/user-attachments/assets/2fd2b426-a8e2-4fda-b1ba-4df728b7b2f1"
/> |
| _Checkbox focussed but not visually shown_ | _Checkbox focussed and
visually shown_ |
## To test
1. Open the **Studio preview** for this PR.
2. Go to **Storage → Files** → open a bucket with several files.
3. Set view to **As columns**.
4. Tab until a **file** checkbox is focused.
**Expect:**
- Icon is replaced by the checkbox (same slot; neighbouring row icons
should not look shifted)
- Checkbox visible without hovering
- Row shows an inset outline
5. Press **Space** to select. Checkbox stays in the icon slot; selection
background applies.
6. Hover another file. Same icon to checkbox swap as before.
7. Tab to the three-dot actions control on a row. Expect the shared
focus ring (not a blue browser outline); the menu icon should become
visible.
8. Folders: no checkbox in the tab order; click icon/name still opens
the folder.
9. Smoke **As list**. Same swap behaviour.
## Additional context
From Kemal's DEPR-621 review.
## 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?
Chore / build (ESLint config upgrade + lint cleanup).
## What is the current behavior?
`eslint-plugin-react-hooks` v5 (pulled in transitively by
`eslint-config-next` v15) doesn't recognize stable `useEffectEvent`, so
every effect that calls an effect-event handler needs an `eslint-disable
react-hooks/exhaustive-deps` to silence a false positive. There are 30
such dead disables across Studio.
## What is the new behavior?
Bumps `eslint-config-next` to v16, which pulls in
`eslint-plugin-react-hooks` v7 whose `exhaustive-deps` understands
`useEffectEvent`, and removes the 30 now-dead disable directives (and
their orphaned explanatory comments).
Supporting changes:
- **Flat-config migration**: v16 is a native flat-config array (v15 was
eslintrc), so `eslint-config-supabase` now spreads it directly instead
of bridging through `FlatCompat`.
- **React Compiler rules off**: v16 enables react-hooks v7's
`recommended`, which layers the React Compiler lint rules on top of the
two classic rules. These are switched off (derived dynamically from what
next enables) to keep this change scoped to the `exhaustive-deps`
improvement.
- **Plugin-registration fallout** (v16 scopes plugin registration to a
file glob rather than registering globally like FlatCompat did): stop
re-registering `@typescript-eslint` (shared) and `jsx-a11y` (studio);
scope our react / react-hooks / jsx-a11y rule overrides (studio, www) to
v16's plugin glob so they don't error on files outside it (e.g. `.cjs`).
- **Lint surface preserved**: v16's glob newly includes `.mts`/`.cts`
(v15 didn't lint them), which surfaced pre-existing errors in tooling
scripts. The shared config keeps the prior surface by leaving
`.mts`/`.cts` unlinted; linting them is left as a separate change.
- **Ratchet**: rebaselines `@tanstack/query/exhaustive-deps` 9 → 89. v15
forced next's `@babel/eslint-parser` onto `.ts` files, hiding these
deps; v16 parses `.ts` with `@typescript-eslint/parser` and correctly
surfaces the intentional `connectionString`-excluded-from-`queryKey`
pattern. Worth a follow-up to review whether any are real
cache-correctness bugs.
- Drops three now-dead devDeps from `eslint-config-supabase`:
`@eslint/eslintrc`, `@eslint/js`, `@typescript-eslint/eslint-plugin`.
Verified locally: `turbo run lint` → 7/7 packages pass with 0 errors;
Studio `lint:ratchet` passes; Prettier clean on changed files; typecheck
unaffected.
## Additional context
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Refined linting configuration and removed outdated lint suppressions
across Studio.
* Updated Next.js linting support and refreshed related development
configuration.
* Expanded lint baseline coverage for query-related code.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Replaces all usage of `form.watch()` to use `useWatch` instead + follows
the "name what you watch" convention as specified in the react-hook-form
skills.
There's also a small refactor in `SmtpForm.tsx` which removes the
unnecessary use of a `useState` to track if SMTP is enabled or not
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Updated many Studio forms to watch specific fields more precisely,
improving live UI updates for previews, warnings, conditional sections,
and validation messages.
* Enhanced responsiveness across settings, authentication, billing,
storage, integrations, and support flows while keeping save/update
behavior the same.
* **Refined Experiences**
* Improved the analytics table creation flow with tighter, enum-based
column type validation and structured, type-specific column options.
* **Preserved Behavior**
* Maintained existing permission checks, submission flows, and
account-management workflows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
This is the final step in merging compute and disk with infrastructure
to become a single place to manage everything. This moves everything
we've done in compute and disk over to infrastructure along with
redirects.
- Makes Infrastructure canonical for the completed compute and disk
configuration and usage charts.
- Moves Service Versions to General Project Settings.
- Removes the legacy Infrastructure activity implementation and
constants.
- Updates settings navigation, shortcuts, banners, billing links,
warning CTAs, usage pages, support suggestions, and other internal entry
points.
- Adds the permanent `/settings/compute-and-disk` redirect, removes its
Next and TanStack routes, regenerates the route tree, and updates the
migration checklist.
- Preserves query parameters and legacy metric anchors, including
`#cpu`.
## Stack
1. #48368
2. #48369
3. #48370 (this PR)
## How to test
1. Check out `chore/infra-compute-3-cutover`.
2. Test the Next implementation with `pnpm dev:studio`, then stop it and
test TanStack with `STUDIO_FRAMEWORK=tanstack pnpm dev:studio`.
3. In each implementation, open
`/project/<ref>/settings/infrastructure`. Confirm the page contains the
usage charts and the Scaling, Compute, Disk, and Advanced configuration
sections.
4. Open `/project/<ref>/settings/general`. Confirm Service Versions
appears there with its existing name, content, and styling, and no
longer appears on Infrastructure.
5. Open `/project/<ref>/settings/compute-and-disk?upgrade=micro#disk`.
Confirm it permanently redirects to
`/project/<ref>/settings/infrastructure?upgrade=micro#disk`, preserving
the query string and hash.
6. Confirm the settings menu exposes Infrastructure and no longer
exposes Compute and Disk. Repeat with platform and self-hosted settings.
7. Follow representative entry points from billing usage, resource
warning CTAs, upgrade banners, shortcuts, and support suggestions.
Confirm they land on Infrastructure and preserve any query parameters or
metric anchors such as `#cpu`.
8. Smoke-test compute and disk updates from Infrastructure, including
validation, the sticky review footer, and warning/critical chart states.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Consolidated compute and disk management under the **Infrastructure**
project settings page.
* Added a **Service versions** section to **General** project settings.
* **Bug Fixes**
* Updated links and upgrade CTAs across the product to route to the
correct **Infrastructure** or **Service versions** destinations.
* Added permanent redirects from legacy **Compute and Disk** to
**Infrastructure**, preserving query/hash.
* Improved resource warning upgrade routing for compute scenarios.
* **Tests**
* Expanded automated coverage for **Infrastructure**, **Service
versions**, redirects, and warning-link routing.
* **Chores**
* Updated ESLint rule baseline configuration for the studio app.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.
`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.
**Changed:**
- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory
**Removed:**
- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)
## To test
- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
* Removed the legacy Admonition import entry point.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.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?
Remove the region limitation on vector buckets
## What is the current behavior?
Currently vector buckets are limited to a subset of Supabase regions
## What is the new behavior?
All supabase regions now have access to vector buckets
## Additional context
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Vector buckets are now available based solely on platform enablement,
without region-based restrictions.
* **Bug Fixes**
* Removed the region limitation message and related region availability
checks from the Storage Vectors page.
* Updated vector bucket upgrade behavior to reflect platform
availability more consistently.
* **Tests**
* Updated coverage to reflect the simplified platform-based availability
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Adds initial-copy scoping to Pipelines in Studio. Users can copy all
existing rows, skip all initial copies, copy only selected publication
tables, or skip selected table copies. All publication tables continue
streaming new changes regardless of the initial-copy policy.
The policy now round-trips through create, edit, validation, and the
generated Management API contract. Initial-copy estimates and
table-restart confirmations use the same scope. Edit requests also
preserve redacted credentials and pipeline settings that Studio does not
own.
This completes the Studio layer of the [ETL API
change](https://github.com/supabase/etl/pull/897) and [Management API
change](https://github.com/supabase/platform/pull/35479).
## Screenshots
### Selector
<img width="1153" height="465" alt="image"
src="https://github.com/user-attachments/assets/bf615e82-ee61-4222-979d-a8695a957e82"
/>
### Select certain tables only
<img width="1153" height="465" alt="image"
src="https://github.com/user-attachments/assets/28adaa24-f239-4d1d-8fb8-fdb1988320cd"
/>
### Confirm copy costs
As the final step before the pipeline is created:
<img width="597" height="619" alt="image"
src="https://github.com/user-attachments/assets/a660bd87-bfb8-41c5-8099-4cdbdef943bf"
/>
### Policy-aware initial-copy estimate
#### Copy no table is selected
<img width="407" height="464" alt="image"
src="https://github.com/user-attachments/assets/99d859ec-2ec3-452a-ab69-11924a8db260"
/>
#### Some tables are selected
<img width="407" height="464" alt="image"
src="https://github.com/user-attachments/assets/e68aedf4-66bc-4372-98ef-0dd7fecef324"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added configurable “initial table copy” policies (copy/skip all and
copy/skip selected) during replication setup, including table-picker
behavior, pruning of stale selections, and updated restart/cost
estimates.
- **Bug Fixes**
- Improved restart flows to consistently use `schema.table` identity and
simplified “errored tables” targeting to match error-state tables.
- Reduced unnecessary loading by gating publication/table fetches to
when panels are visible; improved validation/toast handling when
publication tables are unavailable.
- **Tests**
- Added/expanded coverage for destination form submission, table-copy
selection, restart/cost dialogs, and copy-estimate summarization.
- **Style**
- Refreshed warning/label text for clearer configuration and
confirmation messaging.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Victor Farazdagi <simple.square@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
Accessibility cleanup (DEPR-628).
## What is the current behavior?
Leftover call sites still use ad-hoc focus recipes
(`ring-foreground-muted`, `outline-brand`, Dialog/Sheet `focus:` rings,
etc.) instead of the shared utilities from #41575.
## What is the new behavior?
Converts those leftovers across `packages/ui`, Studio, www, docs, and
design-system to `focus-ring`, preferring `focus-visible`. Keeps
documented exceptions (`group-focus-visible`, InputGroup `:has()`).
## To test
Tab through controls (keyboard only). Expect a consistent offset ring on
`:focus-visible`, not a green/brand/custom stack, and no ring animation.
### www (marketing)
Preview:
https://zone-www-dot-com-git-danny-depr-628-focus-ring-fbccf9-supabase.vercel.app
- Global nav on `/`: Product, Developers, Solutions dropdowns; logo;
hamburger + mobile menu
- `/features`: view toggles and feature cards
- `/company`: card links
- `/changelog`: timeline / entry links
- `/partners/catalog`: grid/list toggle and partner cards
- `/pricing`: compute section expand control
- Product / Modules / Solutions sticky navs on product pages (e.g.
`/database`, `/storage`)
- `/state-of-startups`: TwoOptionToggle if present
### docs
Preview:
https://docs-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Any guide page: top nav dropdowns and items
- Narrow viewport: hamburger, then mobile menu links + close
- Guide with PromptPanel / tabs: tab to prompt actions and tab list
### studio (dashboard)
Preview:
https://studio-staging-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Project home: Connect section tiles; drag-handle focus on sortable
sections
- Integrations marketplace (`/project/<ref>/integrations`): featured
cards, list/grid toggle, list rows
- Auth (`/project/<ref>/auth/oauth-apps`,
`/project/<ref>/auth/providers`): open create/edit sheet, tab to close
(X)
- Database policies (`/project/<ref>/database/policies`): open policy
editor sheet, tab to close
- Storage policies (`/project/<ref>/storage/files/policies`): bucket
section links; policy modal close
- Query performance (`/project/<ref>/observability/query-performance`):
info icon buttons on metrics
- Replication pipeline detail (if available): slot lag / status info
icons
- Support (`/support/new`): attachment add/remove controls
- Table editor: spreadsheet import preview checkboxes; row text/JSON
editor TwoOptionToggle
- Any Dialog/Sheet/toast close (X): ring on keyboard focus only, not
mouse click
### design-system
Preview:
https://design-system-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Colour palette swatches (keyboard focus)
- Form patterns sidepanel example: avatar / focusable control in the
example
## Additional context
- Linear: [DEPR-628](https://linear.app/supabase/issue/DEPR-628)
- Follow-ups: form-group CSS (DEPR-629), Storage columns selection
(DEPR-630), ESLint rule (DEPR-632)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility & Usability**
* Standardized keyboard focus indicators across navigation, dialogs,
forms, buttons, toggles, links, and tooltips using a consolidated focus
style.
* Improved toggle controls to use proper button semantics (instead of
clickable text), including `aria-pressed`/disabled handling and better
keyboard navigation.
* **Visual Updates**
* Harmonized hover/focus ring visuals across the design system, Studio,
documentation, and marketing pages while preserving existing layout and
interaction behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Accessibility / lint hardening (Safari keyboard focus).
## What is the current behavior?
`supabase/require-explicit-tabindex` is `'warn'`. Studio’s ratchet was
at 0 but the rule was still ratcheted; www / docs / design-system still
had raw `<button>` / `role="button"` call sites without an explicit
`tabIndex`.
[DEPR-627](https://linear.app/supabase/issue/DEPR-627) · follow-up to
#47984 / #48040
## What is the new behavior?
- Shared config: `'supabase/require-explicit-tabindex': 'error'`
- Swept www / docs / design-system (+ Studio test fixtures the ratchet
skipped)
- Removed the rule from the Studio ratchet + baselines
## To test
Prefer **Safari**. This PR only adds explicit `tabIndex` to raw
`<button>` / `role="button"` call sites — not links, and not controls
that already go through `Button` from `ui`.
### Marketing (`www`) ([staging
link](https://zone-www-dot-com-git-danny-depr-627-promote-req-7ae43c-supabase.vercel.app/))
- [x] Homepage frameworks / dashboard feature tabs — Tab through each
tab button
- [x] Product pages (e.g. `/auth`, `/database`) — section tab switchers
- [x] Narrow viewport — open the hamburger; Tab through menu buttons
- [x] `/partners/catalog` — filter / view controls
- [x] Blog view toggle (list ↔ grid)
### Docs ([staging
link](https://docs-git-danny-depr-627-promote-require-explici-25e46d-supabase.vercel.app/))
- [x] **Desktop (≥ lg):** top-right **⋯ menu** (hamburger icon) — opens
a dropdown that includes Theme. Not a separate theme button.
- [x] **Mobile (< lg):** top-right **hamburger** opens the sheet; close
(X) is the raw button we tagged. Theme inside the sheet uses
`ThemeToggle` / `DropdownMenuTrigger` from `ui` (already supposed to set
`tabIndex`).
- [x] **Code blocks** — copy / language controls
- [x] **Is this helpful?** — X / check are `Button` from `ui` (should
already Tab). After voting **while signed in**, the follow-up “What went
well?” / “How can we improve?” text button is the raw one we tagged.
- [x] **AI Tools → Copy as Markdown** (right rail on a guide) — this is
the only GuidesSidebar control this PR changed. “On this page” TOC items
are **links**, not covered by this lint.
- [x] **Reference docs** (e.g. JS client reference) — section headers
that expand/collapse in the left nav (`Collapsible.Trigger`)
- [x] **Troubleshooting index** — type in the search field, then Tab to
the **clear (X)** control
### Dashboard (`studio`)
No production UI changes in this PR (tests + lint config only). Quick
Safari smoke that prior tabindex work still holds:
- [x] Project sidebar — Tab through primary nav links
- [x] Settings → General — Tab through inputs / buttons
- [x] Storage → Files — Tab a bucket row / file actions
## 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
## What kind of change does this PR introduce?
A11y cleanup follow-up to #47984 /
[DEPR-626](https://linear.app/supabase/issue/DEPR-626).
## What is the current behavior?
Studio had 82 ratcheted `supabase/require-explicit-tabindex` violations
(raw `<button>` / `role="button"` without explicit `tabIndex`).
## What is the new behavior?
- Explicit `tabIndex={0}` (or disabled → `-1`) on those Studio call
sites across nav, `components/ui`, Database, Storage, and the remainder
- Ratchet baseline cleared (**82 → 0**) and the rule **removed from the
Studio ratchet** (debt is gone; ratchet is temporary)
- Rule remains a shared **`warn`** for now — promoting to `error` (and
sweeping www/docs/design-system) is a follow-up
- Also fixed the learn/ui-library call sites that surfaced while
experimenting with error promotion
- Small follow-ups where making controls focusable exposed gaps:
accessible names, disabled/focus consistency, focus-ring polish on
To-test surfaces, home section `KeyboardSensor`, and an E2E locator
tightened after `aria-label="Remove column"`
Prefer migrating to `Button` from `ui` in future touch-ups; this PR
takes the minimal path so Studio debt can stay at zero.
## Additional context
Batches landed together so baseline conflicts stayed simple while
chipping away:
- Hotspots / nav (FirstLevelNav, Marketplace, AttachmentUpload, Column,
Tabs, …)
- `components/ui` shared
- Database + Storage
- Remainder
**Out of scope / intentional deferrals**
- Promoting `supabase/require-explicit-tabindex` to a lint **error**
(follow-up after www/docs/design-system sweeps)
- Tabs/Radio roving, tooltips, context menus, in-menu items
- Full keyboard-accessible tab-close UX (close stays hover +
`tabIndex={-1}`; context menu still closes tabs)
- Data API docs links (`/project/<ref>/api` redirect)
**Reviewer notes**
- Rule only flags raw `<button>` / `role="button"` without a `tabIndex`
prop. `Button` from `ui` already bakes this in
- `tabIndex={-1}` is intentional for disabled controls, in-menu /
roving-focus children, and hover-only tab close
- For dnd-kit grips, put `tabIndex` **after** `{...attributes}` so it
isn’t overwritten (TS2783)
### To test
Use **Safari** with macOS Keyboard navigation **off** (System Settings →
Keyboard). Chrome once for a sanity pass. For each surface below: Tab
until the control is focused, then activate with Enter/Space where
relevant.
1. **API Docs side panel** (Table Editor → open a table → **API docs**)
- Floating API Docs panel — **not** `/project/<ref>/api` (that redirects
to Data API docs; language ToggleGroup uses arrow keys; links are out of
scope)
- Left nav buttons — Tab through several and activate one; active
highlight / navigation still works
2. **Integrations → Marketplace**
- Enable **Integrations layout** feature preview first (avatar menu →
Feature previews)
- `/org/<slug>/integrations` or project integrations marketplace
- “Clear all”, grid/list toggles — Tab + activate
3. **Table Editor → create a table → Columns**
- Drag handles only appear while **creating** (not when editing an
existing table)
- Tab to grip / remove (X) / sensitive-data eye if shown
4. **Project Home** — section drag handles
- Tab to a grip (visible focus ring)
- Optional: Space to pick up, arrows to move, Space/Esc to drop
(KeyboardSensor added)
- Mouse dnd still works
5. **Storage → Policies** — expand/collapse bucket list chevron
(design-system focus ring, no stuck grey open bg)
6. **Support form** (Help → Support) — attachment remove (×) and
add-attachment control when visible
Disabled controls should be **skipped** by Tab.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility Improvements**
* Improved keyboard navigation throughout Studio by explicitly managing
focus (`tabIndex`) across many interactive controls (menus, tabs,
tables, charts, dialogs, navigation, and form actions).
* Disabled or non-interactive controls are now removed from the tab
order (or made unfocusable), while available actions remain reachable.
* Ensured `type="button"` on relevant controls to prevent unintended
submissions, and refined keyboard focus behavior for various toggles and
copy/remove actions.
* **Chores**
* Updated the ESLint rule baseline configuration to match the new focus
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Audited all proxy()/useSnapshot() usage against the v1→v2 migration
guide; no breaking changes apply (no reused proxy() inputs, no
promise-valued state, all consumers already client components).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated the Valtio dependency to a newer version for improved
compatibility.
* **Bug Fixes**
* Improved AI assistant persistence in IndexedDB so chat sessions
reliably save (while keeping only the most recent 20 messages per chat).
* Hardened tabs restoration from storage to fall back to fresh defaults
when data is missing, invalid, or fails validation.
* **Refactor**
* Switched multiple studio panels to use fresh initial-state factories
for initialization and reset reliability.
* Updated advisor state so the derived notification filter count is no
longer exposed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Claude