Upgrades Vitest from 4.1.4 to 5.0.0 across the monorepo, fixes the
handful of things v5 turned into hard errors, and drops the
`vi.clearAllMocks()` boilerplate that v5's `clearMocks` default makes
redundant.
**Changed:**
- `vitest`, `@vitest/ui`, `@vitest/coverage-v8` 4.1.4 → 5.0.0 (catalog)
- `vi.mock` calls that lived inside `beforeAll`/`beforeEach`/test bodies
moved to module scope (v5 throws on nested calls). Affects the Studio
and docs setup files and four Studio tests.
- `detectBrowser` test restores `navigator` via `vi.unstubAllGlobals()`
instead of assigning `global.navigator`, which now reaches jsdom's
getter-only property.
- `RowEditor.utils.test.ts` restores its `JSON.stringify` spy. It used
to leak a throwing mock for the rest of the file, which v5's coverage
provider now trips over. A later test in the same file had been
asserting the leak's side effect (valid JSON reported as invalid) and
now asserts the correct behavior.
- `@testing-library/jest-dom` 6.6 → 7.0.1. Its vitest type augmentation
resolves through a peer now, so it lands on each package's own `vitest`
instead of whichever copy pnpm hoisted. Fixes `toBeInTheDocument` type
errors in dev-tools after the reshuffle.
- `@testing-library/react` 16.0.0 → 16.3.3 for the React 19 peer range.
- `vite: catalog:` added to dev-tools, www, and common. Without it they
resolved a newer vite than the catalog pin, which forked a second vitest
instance in the lockfile. There's now one.
- ai-commands custom matcher types use v5's `Matchers<R, T>` form.
- 110 test files: `vi.clearAllMocks()` removed from
`beforeEach`/`afterEach` hooks, along with hooks that only did that and
the imports they left unused. Calls that also reset/restore mocks are
untouched. Second commit, mechanical.
**Added:**
- `.vitest/` to the root gitignore (v5 writes JSON/JUnit/HTML reporter
output there)
**Removed:**
- `vite-tsconfig-paths` catalog entry and deps. Vitest 5 resolves
tsconfig paths itself.
Release-age note: this sat in draft with a temporary
`minimumReleaseAgeExclude` entry for `vitest` and `@vitest/*` while
5.0.0 was inside the workspace's 3-day `minimumReleaseAge` window. That
window has closed, so the exclusion is gone and nothing bypasses the
release-age gate.
**Perf** (local, medians of 3 runs, same machine):
| Suite | v4.1.4 | v5.0.0 |
|---|---|---|
| studio | 144.1s | 141.7s (-2%) |
| studio `--coverage` | 156.9s | 146.4s (-7%) |
| ui-patterns | 6.27s | 5.07s (-19%) |
| ui `--coverage` | 3.35s | 2.14s (-36%) |
| www | 0.89s | 0.47s (-47%) |
Studio is dominated by jsdom environment setup per file, which v5
doesn't change. `vitest doctor` recommends keeping the current pool
config: the vm pools and `isolate: false` all break tests.
## To test
- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for vitest.
- CI: Studio unit tests, ui, ui-patterns, www, docs, and typecheck/lint
should all be green. The lint ratchet was checked locally: warning
counts on touched Studio files are identical to master.
- `pnpm test:studio` locally passes with coverage (588 files, 6240
tests).
- Open a Studio test that uses `toBeInTheDocument` in your editor and
confirm no type errors on jest-dom matchers, in Studio and in
`packages/dev-tools`.
- Known pre-existing failures unrelated to this PR: one dev-tools test
(`getEventCountBadge` capped pill) fails on master too.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Tests
- Improved test coverage for JSON validation and mobile navigation
behavior.
- Updated test setup, cleanup, environment configuration, and matcher
support across application and shared package suites.
- Removed obsolete coverage for alternate MCP transport selection.
## Chores
- Streamlined TypeScript path resolution and Vitest reporter output
handling.
- Updated testing libraries and Vitest tooling across documentation,
Studio, website, and shared packages.
- Added Vitest reporter output to ignored files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Migrates the repo off `clsx` + `tailwind-merge` to
[shadcn-ui/cn](https://github.com/shadcn-ui/cn). Every app and package
already gets `cn` from `packages/ui`, so the swap happens in that one
helper and flows through to Studio, docs, www, and the rest.
**Changed:**
- `packages/ui` `cn` helper now uses `createCn` from `cn/config`,
keeping the custom `card`/`content` spacing scale so `p-card` still
overrides `p-4`. It has an explicit signature and re-exports
`ClassValue`.
- The four www Launch Week files that imported the `ClassValue` type
from `clsx` now import it from `ui`.
- `blocks/vue` local `lib/utils.ts` re-exports `cn` from the package.
- Comments/README that referenced tailwind-merge.
**Removed:**
- Direct `clsx` and `tailwind-merge` deps from `ui`, `ui-patterns`,
`www`, and `blocks/vue`. `ui-patterns` and `www` declared them without
importing.
**Added:**
- `packages/ui/src/lib/utils/cn.test.ts` covering clsx-style joining,
conflict resolution, the custom spacing scale, and variant handling.
Not migrated: the standalone apps under `examples/`. They're outside the
workspace and mostly on Tailwind v3, which `cn` doesn't support.
Lockfile note: after merging master, the lockfile diff is only the
intended swap (`clsx` and `tailwind-merge` out, `cn@0.2.5` in).
`tailwind-merge` stays in the lockfile as a transitive dep of a
third-party package.
Release-age note: this sat in draft with a temporary
`minimumReleaseAgeExclude` entry for `cn` while `cn` was inside the
workspace's 3-day `minimumReleaseAge` window. That window has closed, so
the exclusion is gone and nothing bypasses the release-age gate.
## To test
- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for `cn`.
- `pnpm --filter ui test` – new `cn.test.ts` passes, including
`cn('p-4', 'p-card')` → `p-card`.
- Typecheck passes for studio, ui, ui-patterns, vue-blocks. www
typecheck panics under tsgo on master already (pre-existing, unrelated);
it passes with the JS `tsc` binary.
- Spot-check Studio locally: class overrides still win in the usual
places (e.g. `CodeEditor` height, `Button` variants with a custom
`className`).
https://claude.ai/code/session_01MkAt16tsPRDTm9oB5Jr8Ub
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Standardized Tailwind class merging across shared UI utilities while
preserving conditional classes, custom spacing classes, and variant
behavior.
* Updated related components and examples to use the standardized
class-merging utility.
* **Tests**
* Added coverage for conditional class handling, conflicting utility
resolution, custom spacing classes, and variant separation.
* **Documentation**
* Updated usage guidance to reflect the standardized Tailwind
class-merging approach.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## What kind of change does this PR introduce?
Shared UI pattern and Studio UX improvement.
## What is the current behavior?
Async selectors use bespoke loading and error layouts. Some replace the
entire field while fetching, and opening a selector does not
consistently refresh its options.
## What is the new behavior?
Adds shared loading, error, and empty states for Select, command, and
MultiSelector lists, including a persistent polite live region and
reduced-motion support. Analytics Bucket and DuckLake selectors keep
their controls in place, retain populated options during background
refreshes, and refresh when reopened.
## To test
Open the [Replication
preview](https://studio-staging-git-dnywh-featasync-selection-feedback-supabase.vercel.app/dashboard/project/_/database/replication?destinationType=Analytics%20Bucket).
The destination sheet should already be open on **Analytics Bucket**.
You do not need to create a bucket, configure a destination, or start a
pipeline. Open **Select a bucket**, then review these outcomes:
1. **The trigger stays put.** Opening the picker must not replace the
form field with a full-width loading placeholder.
2. **Loading belongs inside the menu.** While options are fetched, the
open menu shows a compact skeleton list.
3. **No resources has a clear explanation.** If the project has no
Analytics Buckets, the menu says **No buckets available**. It still
offers **Create a new bucket** beneath that message.
4. **Existing options do not disappear on refresh.** If the project does
have buckets, close and reopen the picker. Its current options remain
visible while the refresh happens in the background, rather than
flashing back to skeletons.
5. **The pattern is consistent.** If convenient, select a bucket and
open the namespace or access-key picker. The same in-menu loading,
empty, and error treatment applies there too.
The deterministic request-error and reduced-motion cases are covered by
focused unit tests because the deploy preview cannot reliably force
those states.
## What kind of change does this PR introduce?
Feature. Promotes Supabase Select 2026 across www and the Dashboard.
## What is the current behavior?
There is no active Select promotion on www or in the Dashboard.
## What is the new behavior?
- Adds a dismissible Select 2026 banner above the www navigation.
- Adds a low-priority Banner Stack card across hosted Studio project
pages.
- Shares a lightweight pixel lockup and CSS-only motion across both
surfaces, with light, dark, and reduced-motion treatments.
- Opens the application page in a new tab and automatically expires both
placements after October 2 in San Francisco.
## To test
- Open `/database` on the www preview. Confirm the banner is legible in
light and dark mode, the complete message remains visible at a phone
width, and the CTA opens `select.supabase.com` in a new tab.
- Dismiss the www banner, then refresh the page. Confirm it stays
dismissed.
- Open any `/project/{ref}` route in the Dashboard preview. Confirm the
Select card appears in the bottom-right Banner Stack behind
higher-priority notices.
- Dismiss the Dashboard card, navigate to another project page, and
confirm it stays dismissed.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a time-limited Select 2026 promotional banner across the website
and Studio.
* Added responsive themed artwork, animated visuals, campaign messaging,
and an external “Apply to attend” CTA.
* Banner dismissal preferences are saved and respected across visits.
* Promotion automatically disappears after the campaign ends.
* **Accessibility**
* Improved announcement dismissal controls with semantic buttons and
accessible labels.
* Added reduced-motion support for promotional artwork.
* **Bug Fixes**
* Improved product-card loading effects to prevent hydration
inconsistencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Bug fix / docs UI polish.
## What is the current behavior?
- Many docs `GlassPanel`s use `background={false}`, so hover only tweaks
the border and reads as having no hover state
- Compact icon+label grids still use `IconPanel`, which has a broken
`-z-10` hover fill and overlaps with the newer `IconLink` pattern
- Description card grids jump to 3-up too early on medium widths
## What is the new behavior?
**GlassPanel**
- Removes the `background` prop; cards always use the filled surface
with stronger border hover
- Tightens icon→description gap (`gap-6` → `gap-3`)
- Decorative icons/logos use empty `alt` so screen readers don’t hear
the title twice
**Icon tiles**
- Retires `IconPanel` from docs and deletes it from `ui-patterns`
- Uses `IconLink` / `IconLinkList` for compact navigation tiles (auth
providers, social login, etc.)
- Adds `IconLinkButton` for SMS provider pickers (same chrome, opens a
dialog)
- Adds focus styles, list labelling, and dialog-trigger ARIA where
needed
**Layout / content**
- Migrate-to-Supabase description cards on resources use `GlassPanel`
(not slim icon tiles)
- Grid spans use `md:… xl:…` so cards stay 2-up until ~1280px
- Fixes migrate links to `/guides/platform/migrating-to-supabase/…` and
SSR quickstarts to `creating-a-client` with framework query params
- Moves the Extensions list `key` onto the outer `Link`
| Before | After |
| --- | --- |
| <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/1677bf65-d3a3-4202-8c70-e758f7c3bcce"
/> | <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/51760f0f-62b6-4010-9841-de26039f37b4"
/> |
## Additional context
Homepage compact sections already use `IconLinkList` from #48317; this
PR finishes that pattern for remaining docs `IconPanel` callsites and
cleans up GlassPanel hover.
`www/customers` only drops the removed `background` prop; those cards
already use the filled surface via `logo`.
## Test plan
- [ ] `/guides/getting-started`: GlassPanels show filled surface and
clearer border hover
- [ ] `/guides/resources`: migrate cards are GlassPanels with working
`/platform/…` links; 2-up until xl
- [ ] `/guides/auth/social-login` and auth providers partial: IconLink
tiles hover/focus correctly
- [ ] `/guides/auth/phone-login`: SMS provider buttons open dialogs;
keyboard focus works
- [ ] Docs homepage: migrate / self-host IconLinkLists unchanged in
behaviour
- [ ] `/guides/auth/server-side`: Next.js / SvelteKit cards resolve on
docs preview
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improved Layouts**
* Made “GlassPanel” card grids more responsive and consistent; refined
card and success badge spacing for a cleaner presentation.
* **Updated Documentation**
* Refreshed multiple guide and resource pages (including quickstarts and
migration content) with standardized card layouts and updated link
destinations.
* **Component Updates**
* Standardized “GlassPanel” styling (background toggle removed) and
simplified icon-based panels; added an `IconLinkButton` for action
tiles; updated authentication provider grids to use the shared tile UI.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated Next.js, PostCSS, and tar package versions.
* Added the required TypeScript native tooling where needed.
* Refined package configuration and dependency ordering across the
project.
* Removed an unused empty dependency configuration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature / a11y polish
## What is the current behavior?
Studio and Docs each had their own skip-to-content link (different
styling and behaviour). www and design-system had none.
## What is the new behavior?
Shared `SkipToContent` in `ui-patterns`, adopted by Studio, Docs, www,
and design-system. Documented as a fragment with a short note under
Accessibility → Jumping ahead.
Tab once to reveal the button (top-left), Enter to jump to a
content-only `<main>`.
| After |
| --- |
| <img width="836" height="324" alt="CleanShot 2026-07-24 at 14 08
47@2x"
src="https://github.com/user-attachments/assets/6df29452-e53a-4eca-8f64-946f2b9f605d"
/> |
## To test
Shared steps for every app: enable Tab key navigation if needed, load
the preview, press **Tab** once — skip button should slide in top-left.
Press **Enter** — focus jumps to main content (no blue ring on
`<main>`). Press **Tab** again — first interactive control in the page
body, not the sidebar/nav. Hover the skip button — solid fill, clear
hover state, no chrome showing through.
- **Studio** —
[preview](https://studio-staging-git-dnywh-featskip-to-content-supabase.vercel.app)
→ sign in → any project page
- **Docs** —
[preview](https://docs-git-dnywh-featskip-to-content-supabase.vercel.app)
→ any docs page with sidebar
- **www** —
[preview](https://zone-www-dot-com-git-dnywh-featskip-to-content-supabase.vercel.app)
→ homepage or any marketing page with the default nav
- **Design system** —
[preview](https://design-system-git-dnywh-featskip-to-content-supabase.vercel.app)
→ any docs page (confirm Tab from content does **not** walk the
sidebar), plus [Skip to Content
fragment](https://design-system-git-dnywh-featskip-to-content-supabase.vercel.app/docs/fragments/skip-to-content)
## Additional context
Follow-up to #47694 / #48303 (Studio) and #47515 (Docs).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added a reusable “Skip to content” accessibility link across key
layouts and pages.
- Updated main landmarks to support keyboard focus and skip-link
navigation (`id="main"`).
- **Accessibility**
- Skip links now follow consistent landmark-target conventions and
remain hidden until focused.
- Improved documentation for skip links/jump shortcuts in persistent
chrome layouts.
- **Documentation**
- Added a dedicated Skip to Content fragment, navigation entry, and
expanded accessibility guidance.
- Updated button description wording in component docs.
- **Tests**
- Added component tests for SkipToContent.
- **Chores**
- Exposed SkipToContent via additional public package entry points.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
Closes FE-3914
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## Problem
On screenreader, I found that the Admonition was not behaving as it
should:
- There was no way on screenreader to tell what type of note I was
seeing
- I could not tell when a note began or ended.
- The screenreader also read aloud an 'image' icon without knowing what
it was.
- Notes with titles were an `h5`, breaking header hierarchy structures.
## Solution
This PR does several things to resolve the issue:
- Adds `aria-hidden` to all icons. Instead of duplicating code, I
refactored the icons into a Base Icon and moved Admonitions into its own
folder.
- ~Adds a text label for each of the notes. For example, "**Note:**".
This is a standard practice in other documentation. If there is a title,
it is added there. Otherwise, it's added to the description.~ Change
reverted from design feedback.
- ~Adds `role='note'` and `aria-label` to the Admonition. While
`<aside>` is recommended semantic HTML, the base UI element does not
allow for that change.~ This will be done in a follow-up for docs only.
- Refactors Admonition into a folder with files so that it is more
readable
- Removes `h5` by default with a new prop to declare a header
Additionally adjusts the icon so that it aligns with text better.
## Testing
1. Open documentation preview
2. Navigate to any guide and see its admonition. Compare to live. You
can also see the Design System:
https://design-system-git-a11y-docs-admonition-supabase.vercel.app/design-system/docs/fragments/admonition
3. See the icon position is in line with the text.
4. See the text label.
5. Use a screenreader like Voiceover on the admonition. Hear that it is
clearly defined.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Added the Admonition UI pattern with support for `type`, `layout`,
`title`/`description`, optional actions, and configurable icons.
- Expanded Admonition’s public export surface with dedicated subpath
entry points and icon/type exports.
- **Bug Fixes**
- Standardized Admonition import path casing across related components.
- **Documentation**
- Updated design system examples to use `type="warning"` instead of
`variant="warning"`.
- **Tests**
- Added/updated the Admonition test coverage and removed the legacy test
file.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Co-authored-by: Danny White <3104761+dnywh@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?
Chore / dependency tooling update.
## What is the current behavior?
The repo is pinned to pnpm 10.24.0. Closes
https://linear.app/supabase/issue/FE-3673/migrate-the-repo-to-use-pnpm-v11.
## What is the new behavior?
The repo is pinned to pnpm 11.13.1, pnpm v11 workspace settings are
migrated to `allowBuilds`, and the Studio Dockerfile installs pnpm
11.13.1.
## Additional context
Validated with `CI=true mise exec node@22 -- pnpm install
--frozen-lockfile`, `mise exec node@22 -- pnpm run typecheck`, and `mise
exec node@22 -- pnpm run lint`; full Prettier check still fails on
existing generated docs/router files outside this migration.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated tooling requirements (pnpm **11.13.1**, Node **>=22.13**) and
aligned container build tooling accordingly.
* Adjusted package manager behavior (scoped registry override, update
notifications disabled) and workspace build/engine validation settings.
* **Maintenance**
* Updated `clean` scripts across apps/packages to remove only
build/cache artifacts (no longer delete installed dependencies).
* Reduced Turbo `clean` task output to **errors-only** for cleaner logs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Upgrades the monorepo to TypeScript 7.0.2, released 2026-07-08. `tsc` is
now the native Go compiler
([announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/))
— full turbo typecheck drops from ~56s to ~19s locally.
TS 7.0 ships **without a programmatic API** (it lands in 7.1), so this
uses Microsoft's recommended side-by-side setup: the `typescript` name
resolves to `@typescript/typescript6` (the 6.0 API republished) for API
consumers — typescript-eslint and Next.js build typechecking — while
`@typescript/native` (the real `typescript@7.0.2`) owns the `tsc` bin
that typecheck scripts run. Exactly one version of each is in the
lockfile; nothing imports the native package as a library. When 7.1 +
tool support lands we can collapse back to a single `typescript` dep in
the catalog.
**Changed:**
- `pnpm-workspace.yaml`: catalog aliases for `typescript` /
`@typescript/native`
- 17 package.json files: `@typescript/native` added beside each
`typescript` dep so every package's `tsc` is the native binary
- `apps/studio/tsconfig.json`: exclude `dist/` (gitignored build output)
from typechecking
**Fixed** (real type errors TS 6 under-reported):
- `packages/ui-patterns` CodeBlock: `borderLeft: null` → `undefined`
(`CSSProperties` doesn't accept null)
- `apps/www` CodeBlock: removed a JSX `@ts-ignore` comment that tsgo
doesn't honor and fixed what it masked (untyped `.js` theme objects,
possibly-undefined highlighter children)
⚠️ **Merge timing:** the new packages are inside pnpm's 3-day
`minimumReleaseAge` window until ~July 11. Installs from the committed
lockfile are unaffected (resolution is skipped), but anything that
forces a re-resolution before then will fail — hold off merging until
the window passes.
Note for editors: the compat package has no `lib/tsserver.js`, so VS
Code's "Use Workspace Version" won't work — use the bundled TS or the
TypeScript Native Preview extension.
## To test
- `pnpm install && pnpm typecheck` — all 15 tasks green, and
`./node_modules/.bin/tsc --version` prints 7.0.2
- `pnpm lint --filter=studio` — typescript-eslint still parses (resolves
the 6.0 API)
- `pnpm build --filter=design-system` (or any Next app) — Next's
tsconfig validation and build typecheck still work
- CodeBlock rendering on www (syntax highlighting, line highlights
with/without border) — the two fixes are behavior-neutral but worth an
eyeball
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements / New Features**
* Enhanced TypeScript tooling support across the workspace for smoother
development builds and checks.
* **Bug Fixes**
* Code blocks render more reliably when content is empty or missing.
* Highlighted code line styling applies more consistently.
* **Maintenance**
* Studio TypeScript builds now avoid including generated output (such as
`dist`) during compilation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Problem
Now that `docs` is the only place where we use the deprecated `ui/Tabs`,
we can move this component and the related HOC from `ui-patterns` in
`docs`
## Solution
- Move `ui/Tabs`, `ui-patterns/ComplexTabs/withQueryParams` and
`ui-patterns/ComplexTabs/withSticky` to `docs`
- Refactor `ui-patterns/ComplexTabs/withQueryParams` and
`ui-patterns/ComplexTabs/withSticky` HOCs as hooks to make them easier
to understand
- Refactor `Tabs` accordingly
No visual nor functional changes.
## How to test
On
https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords
(Tabs are driven by URL and the flow tabs should have sticky headers
even though there's a CSS bug already reported)
- check that by default, the first tab in each tabs is active
- change the tabs in different groups and validate it works
- refresh the page and check that previously selected tabs are active
(URL based selection)
- In a new tab, visit
https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords
again and check that previously selected tabs are active (LocalStorage
based selection)
Do the same on
https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/database/database-advisors
(This one is driven by URL but does not have sticky tab headers)
Do the same on
https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/deployment/terraform/reference
(this one is not driven by URL nor has sticky tab headers)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Docs tabs now persist and restore the active tab via URL query
parameters.
* Added optional “sticky” tab behavior that keeps the active panel in
view.
* Enhanced keyboard interaction for selecting tabs.
* **Bug Fixes**
* Improved active-tab initialization and synchronization when the URL
query changes.
* **Chores**
* Refreshed the tabs UI implementation and styling to improve
consistency and remove deprecated tab exports from shared UI packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
- We still use/maintain the legacy theming even though we moved to
Shadcn
- We have two themes list with similar code
## Solution
- Migrate some components to `cva` and `cn` instead of `styleHandler`
- Remove redundant `themes` in favor of `singleThemes`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized theme selection across the app so theme menus
consistently offer the same light/dark/system options, including
dropdowns, navigation menus, and command menus.
* **Refactor**
* Refreshed styling for multiple shared UI components (menus, tabs, side
panels, loading indicators, icons, and modal dialogs) to improve
consistency while preserving visual behavior.
* **Chores**
* Improved the UI patterns CI “validate exports” check for clearer
failure output when exports change unexpectedly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Renders the MCP config component as markdown for static markdown builds.
Currently we have no special case for `<McpConfigPanel />`, so it gets
stripped out during markdown rendering. This adds a static markdown
version of this component that renders all agents/tools consecutively.
Adds a new `McpConfigPanel.md.tsx` component that reuses data structures
used by `McpConfigPanel.tsx` but renders as markdown instead of React.
Instead of building the markdown via string concatenation, we use
[supabase-community/mdast-jsx](https://github.com/supabase-community/mdast-jsx)
which allows you to author markdown using JSX (providing type safety,
better DX, maintainability). E.g.
```jsx
<code lang="json" value='{ "key": "value" }' />
```
produces:
````md
```json
{ "key": "value" }
```
````
## Preview
https://docs-git-feat-mcp-config-markdown-supabase.vercel.app/docs/guides/ai-tools/mcp.md
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Added a docs-only MCP configuration panel with client-specific setup
steps, deep links, and generated configuration snippets.
- Enhanced guide generation to render richer, component-produced
markdown content.
- **Bug Fixes**
- Improved MCP config serialization and display for consistent
JSON/YAML/TOML output.
- **Refactor**
- Centralized MCP client metadata, instruction content, and config
build/serialization logic for reuse.
- **Chores**
- Expanded package exports for MCP URL builder assets and utilities;
improved runtime code-block language validation and updated PNG asset
typing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>
Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
## Problem
- We have unused CSS from previous design system (`.sbui-*` classes)
- We use Tailwind `@apply` when we could set the tailwind classes on the
components directly
## Solution
- Delete all `.sbui-*` classes as we don't use them anymore
- Move classes directly on components when that make sense
## Notes
I did not migrate all `sbgrid` classes as they are applied in multiple
components
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated grid editors, placeholders, headers, and dropdowns for cleaner
spacing, truncation, and alignment.
* Improved layout consistency across text, number, time, JSON, and
foreign-key cells.
* Adjusted search and impersonation inputs for better fit and padding.
* **Chores**
* Simplified and removed outdated styling overrides across the Studio
and web app.
* Reduced unused UI package surface by removing an unused input icon
container export.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Standardized Monaco Editor package versions across the workspace using
the shared dependency catalog.
* **Bug Fixes**
* Improved Monaco initialization by configuring asset loading only on
the client and serving Monaco assets from a single base-path URL
(removing platform-specific switching).
* Streamlined Monaco stylesheet injection in Studio’s document
rendering.
* **New Features**
* Added/updated Monaco language support in Studio, including GraphQL,
SQL, and PostgreSQL, with refreshed HTML, JSON, and CSS editor modes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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
**Stack 1/6** of the TanStack Start migration (#46424), split into
reviewable, independently-mergeable PRs.
> [!IMPORTANT]
> **Next stays the default and only active framework after this PR.**
This wires up the Vite/TanStack-Start build pipeline behind the
`STUDIO_FRAMEWORK` flag, but there are no TanStack routes yet — so the
TanStack build isn't functional or tested until later PRs in the stack.
Nothing about the Next build, dev, or deploy changes behaviourally here.
## What's in this PR
- **Dispatch:** `dev`/`build`/`start` now go through
`scripts/dispatch.js`, which runs the Next variant unless
`STUDIO_FRAMEWORK=tanstack`. The original commands are preserved as
`dev:next`/`build:next`/`start:next`.
- **Build pipeline:** `vite.config.ts`, `serve.js`, `smoke-server.mjs`,
vite/tanstack deps, `turbo.jsonc`.
- **`tsconfig.json`:** `jsx: react-jsx`, `moduleResolution: Bundler`,
`target: ES2022`. Because `include` is `**/*.ts(x)`, this re-typechecks
the whole app, so the companion adaptations below land with it.
- **Shared adaptations (companions to the tsconfig change):**
`BufferSource` casts, `packages/ui` unused-`React` import removals, etc.
- **Routing/middleware plumbing:** `next.config.ts` +
`redirects.shared.ts` (redirect rules now shared with `vercel.ts`),
`proxy.ts`/`start.ts` middleware + `hosted-api-allowlist.ts`.
## Verification
Run locally off `master`: frozen install ✓, `studio` typecheck ✓, **Next
build ✓** (compiles + generates all routes), lint ratchet ✓ ("some rules
improved"), prettier ✓.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a hosted API endpoint allowlist to return 404 for non-supported
`/api/*` routes.
* Introduced a TanStack route-migration checklist and expanded TanStack
Start routing support.
* **Improvements**
* Enhanced deployment refresh/detection by tightening cookie handling
for “latest deployment” updates.
* Centralized redirect/maintenance-mode rules for consistent platform vs
self-hosted behavior.
* Improved production serving with a dedicated static + proxy server and
a post-build smoke test.
* **Dependencies**
* Updated TanStack-related packages and React Table/query tooling
versions.
* **Documentation / Chores**
* Updated formatting and tooling config; added shared build environment
parsing utilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Problem
The date picker pattern we currently have:
- requires developers add classes and props themselves to get the
expected result. This is cumbersome and prone to error.
- does not visually convey the field invalid state like inputs do
<img width="702" height="256" alt="image"
src="https://github.com/user-attachments/assets/cacd6414-6789-42e3-8d06-88e44fd9fe0a"
/>
## Solution
Introduce a new `DatePicker` _UI pattern_ that wraps the `Popover` and
`Button` components to ease the most common scenarios while still
allowing full customization
<img width="699" height="250" alt="image"
src="https://github.com/user-attachments/assets/e80f842c-28b2-4a4f-b316-c2005e771912"
/>
## Component usage
Note how we manually pass the `isInvalid` prop to the
`<DatePickerButton>` to avoid relying on `react-hook-form` contexts
which would make the date picker unusable outside RHF forms.
Alternative would be to also have a `<DatePickerInput>` that could be
used instead of `<DatePickerButton>` when inside an RHF form.
```tsx
<FormField
control={form.control}
name="expiryDate"
render={({ field, fieldState }) => (
<FormItemLayout
layout="horizontal"
label="Date Picker"
description="Date selection with calendar popover"
>
<FormControl className="col-span-6">
<DatePicker>
<DatePickerTrigger asChild>
<DatePickerButton isInvalid={fieldState.invalid}>
{field.value ? format(field.value, 'PPP') : 'Pick a date'}
</DatePickerButton>
</DatePickerTrigger>
<DatePickerContent>
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
initialFocus
/>
</DatePickerContent>
</DatePicker>
</FormControl>
</FormItemLayout>
)}
/>
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Adjusts layout / page patterns including design system documentation and
page components.
<img width="937" height="643" alt="image"
src="https://github.com/user-attachments/assets/5f7864a3-04ae-4ccf-b2b8-d9fe5e29554e"
/>
**To test**
- Ensure all existing page types in Studio are un-effected. They
shouldn't be since existing components aren't touched.
- Run design-system and have a read through layout and page header
documentation. Make sure you understand when and where to use the
various combinations of page components and their variants.
**Next**
Once we are happy with these patterns we can gradually start to update
Studio pages that make use of breadcrumbs and/or sub navigation.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added PageBreadcrumbs and PageNav page chrome
* Several new interactive layout examples (Auth Emails, Edge Functions,
Full‑Width, Logs) and demo pages
* **Documentation**
* New docs for PageBreadcrumbs and PageNav
* Reworked layout guidance and patterns; updated fragment/example docs
and usage notes
* **Improvements**
* Component preview now supports explicit padding control
* Simplified page header demo and updated previews
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46126?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `ui-patterns/CommandMenu` exposes internal components that have the
same names as the base shadcn components they wrap. This create
confusion about which one to use and forces us to expose the base ones
with the `_Shadcn_` suffix.
## Solution
Rename those internal components to have `CommandMenu` in their names to
make it clearer they are meant to be used with `CommandMenu`. We will
then rename the shadcn base ones to remove the suffix.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Refactor
* Standardized Command Menu component naming across the design system
for improved consistency and clarity. Updated component names:
`CommandInput` → `CommandMenuInput`, `CommandList` → `CommandMenuList`,
`CommandItem` → `CommandMenuItem`, `CommandEmpty` → `CommandMenuEmpty`,
and `CommandGroup` → `CommandMenuGroup`. Updated public API exports,
internal subpath references, all examples within the registry, and
implementations across documentation, studio, and application
interfaces.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45996)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Docs update and design-system component taxonomy cleanup
## What is the current behavior?
The design-system docs conflate low-level shadcn primitives with
product-level alert patterns. Collapsible documentation previews the
alert-specific wrapper, and the alert/collapsible relationship is
unclear
## What is the new behavior?
- Documents Alert and Collapsible as low-level atom components
- Moves the alert-styled expandable wrapper into
`ui-patterns/expandable-alert` as `ExpandableAlert`
- Documents Expandable Alert as a Fragment Component next to Admonition
- Updates the Session Timeout modal to import `ExpandableAlert` from
`ui-patterns/expandable-alert`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* `CollapsibleAlert` component is now available for alert-styled
expandable content.
* **Documentation**
* Updated component documentation to clarify when to use `Alert`,
`Collapsible`, `Admonition`, and `CollapsibleAlert`.
* Added comprehensive documentation for `CollapsibleAlert` with usage
examples and variant options.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45863)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
This PR fixes a bug where a user might choose `classic-dark` as a theme
in `studio` but then `docs` and `marketing` apps will look weird.
To test:
- Change the localStorage value of `theme` to `classic-dark`
- Open `www` and `docs` apps, they should look ok
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a new "classic-dark" theme option for enhanced visual
customization.
* **Improvements**
* Unified and simplified theme handling across apps for more consistent
behavior.
* Improved system-theme detection and smoother transitions when
switching themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
The format of some Tailwind classes changed from `px-[--card-padding-x]`
to `px-(--card-padding-x)`. Because `tailwind-merge` is on a older
version (pre Tailwind v4), it doesn't deduplicate the class when it
encounters
```
px-(--card-padding-x) p-0
```
With the new version, it should result in `p-0`.
By bumping `tailwind-merge` and other `cn` related deps, the `cn` util
function is aware of the new class format.
Before:
<img width="819" height="357" alt="Screenshot 2026-04-30 at 15 27 39"
src="https://github.com/user-attachments/assets/6d16497a-86a6-4a31-bc7c-eab17bb17ab3"
/>
After:
<img width="837" height="389" alt="Screenshot 2026-04-30 at 15 28 04"
src="https://github.com/user-attachments/assets/2b53d7fe-2a61-493a-9aa0-abb34007738f"
/>
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>
## Problem
In order to update to react 19, we need to update several dependencies
## Solution
- migrate to the `radix` umbrella package to ease upgrade
- update some dependencies
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Consolidated Radix UI usage to a single unified package across apps
and packages, updated package manifests and workspace catalog entries.
No user-facing behavior, visuals, or public APIs changed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `react-markdown`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Upgraded react-markdown to 10.1.0 (and remark-gfm to 4.0.0) across
projects for improved Markdown support.
* **Style**
* Adjusted Markdown rendering so typography and spacing are applied via
surrounding containers, improving consistent styling across docs and UI.
* **New Content**
* Added a new RSS feed item for a recent blog post.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `react-hook-form`
## How to test
Play with some forms, especially those that use arrays of values
(database/enumerated types for instance) and the highly dynamic ones
(auth providers for instance)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
* **Chores**
* Bumped the form-handling library version across apps and packages for
improved compatibility and stability.
* **Refactor**
* Improved component form typings and generics in the studio to increase
type safety and reduce potential runtime issues.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Upgrade vite and vitest to their latest major versions across the
monorepo, along with related packages.
**Changed:**
- `vite` catalog: `^7.3.2` → `^8.0.8` (Rolldown replaces esbuild/Rollup)
- `vitest` catalog: `^3.2.0` → `^4.1.4`
- `@vitejs/plugin-react`: `^4.3.4` → `^6.0.1`
- `@vitest/coverage-v8`: `^3.2.0` → `^4.1.4`
- `@vitest/ui`: `^3.2.0` → `^4.1.4`
- `vite-tsconfig-paths`: `^4.3.2` / `^5.1.4` → `^6.1.1`
**Pinned to vite 7:**
- `apps/lite-studio` — `@react-router/dev` hasn't declared vite 8
support yet
- `blocks/vue` — Nuxt plugins (`vite-plugin-inspect`, `vite-dev-rpc`,
`vite-hot-client`, `vite-plugin-vue-tracer`) haven't declared vite 8
support yet
**Test fixes for vitest 4 breaking changes:**
- **`apps/studio/lib/api/snippets.utils.test.ts`** — Replaced
`vi.mock('fs/promises')` automock with an explicit factory. Vitest 4's
automocking doesn't create mock functions for getter-based exports on
Node built-ins, so `mockedFS.access.mockResolvedValue` etc. were
`undefined`.
- **`apps/studio/lib/api/self-hosted/functions/index.test.ts`** —
Changed `mockReturnValue` to `mockImplementation(function() { ... })`
for a constructor mock. Vitest 4 no longer allows `mockReturnValue` when
the mock is called with `new`.
- **`apps/studio/tests/pages/api/mcp/index.test.ts`** — Changed arrow
function to regular `function` in `mockImplementation` for
`StreamableHTTPServerTransport`. Arrow functions can't be constructors,
and vitest 4 now enforces this.
- **`packages/ui-patterns/vitest.setup.ts`** — Changed `ResizeObserver`
mock from arrow function to regular `function` for the same constructor
enforcement reason. This was crashing Radix popover rendering in jsdom.
## To test
- `pnpm test:studio` — all 226 test files should pass
- `pnpm --filter ui-patterns vitest run` — all 183 tests should pass
- `pnpm --filter www test -- --run` — all 19 tests should pass
- `pnpm --filter ui vitest run` — all tests should pass
- `pnpm --filter dev-tools vitest run` — all tests should pass
- `pnpm --filter ai-commands vitest run` — all tests should pass
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Standardized and updated development tooling versions and version
sources for consistent installs across the repo (Vite, Vitest,
vite-tsconfig-paths and related plugins/catalog entries).
* **Tests**
* Improved test mocks and typings (updated mock
factories/implementations and tightened spy/type assertions) to increase
test reliability and compatibility with updated tooling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `framer-motion`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated animation library dependencies to the latest compatible
versions across applications and packages to ensure consistent
performance and stability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Design system and validation consistency update.
## What is the current behaviour?
`KeyValueFieldArray` already renders per-cell form messages, but each
consumer still decides its own validation rules. At the moment, some
consumers allow partially filled rows to submit silently, while Log
Drains now treats them as inline validation errors.
## What is the new behaviour?
This PR standardises the recommended partial-row behaviour for the
current `KeyValueFieldArray` consumers by introducing a shared
validation helper and using it from each form schema.
- adds `getKeyValueFieldArrayValidationIssues` alongside
`KeyValueFieldArray`
- keeps `KeyValueFieldArray` presentation-only and leaves validation in
consumer schemas
- shows inline errors when one side of a key/value row is filled and the
other is empty
- keeps fully empty rows as draft rows
- keeps duplicate-key validation in Log Drains, where it already applies
- updates the design-system docs and examples to describe the validation
pattern explicitly
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added reusable key/value validation utilities and public export; forms
now trim header/key/value inputs, show inline errors for partially
filled rows, and remove fully empty draft rows on submit.
* **Documentation**
* Clarified the field-array is rendering-only and added guidance for
placing validation in form schemas and handling draft rows.
* **Tests**
* Added unit and integration tests covering validation rules, duplicate
keys, trimming, draft-row stripping, and payload behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Chore that resolves DEPR-394.
## What is the current behavior?
This stack is consolidating RHF field-array patterns in smaller
reviewable steps.
After the key/value work lands, repeated single-value inputs are still
implemented separately across auth and SSO forms, and the design-system
docs only document the key/value pattern.
## What is the new behavior?
- adds a shared `SingleValueFieldArray` component in `ui-patterns`
- migrates repeated single-value inputs in:
- Redirect URL allow-list modal
- OAuth app redirect URIs
- SSO domains
- SSO attribute mapping
- documents the single-value pattern in the design system with:
- a dedicated fragment page
- updated forms guidance
- updated form pattern demos
- adds focused redirect URL modal coverage
## Additional context
This is PR 3 of a 3-PR stack for DEPR-394.
Base PR: #44058
## What kind of change does this PR introduce?
Component update.
## What is the current behaviour?
TanStack tables in the repo are split between the shared `TableHeadSort`
primitive and the older Studio-local `DataTableColumnHeader` helper,
which makes the sorting UI and integration path inconsistent.
If you were to just use `DataTableColumnHeader` in `ui-patterns/Table`,
you’d get a very different visual result to the `TableHeadSort` UI you
see in most other tables.
## What is the new behaviour?
Adds a shared `TanStackTableHeadSort` adapter in `ui-patterns/Table`,
backed by the existing `TableHeadSort` primitive, and switches the
webhook table plus the design-system TanStack demo to that canonical
path. `DataTableColumnHeader` stays as a deprecated wrapper for now,
Studio gets a lint guard to block new imports of it, and the table docs
now point TanStack tables at the shared adapter explicitly.
## To test
Check out column sorting on the Platform Webhook endpoint deliveries
table.
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
## What kind of change does this PR introduce?
Chore that references DEPR-394.
## What is the current behavior?
Key/value editors for headers are implemented separately in multiple
places.
## What is the new behavior?
DEPR-394 is consolidating repeated RHF field-array UIs across Studio and
the design system.
- adds a shared `KeyValueFieldArray` component in `ui-patterns`
- adds a shared `httpHeaderAddActions` helper for preset header rows
- migrates the key/value header editors in:
- Platform Webhooks
- Cron Jobs HTTP headers
- Database Webhooks HTTP headers
- documents the key/value pattern in the design system with:
- a dedicated fragment page
- updated forms guidance
- updated form pattern demos
| Preview |
| --- |
| <img width="1102" height="420" alt="CleanShot 2026-03-23 at 12 22
18@2x"
src="https://github.com/user-attachments/assets/f8d23ff9-7063-462f-8074-b400561f77e9"
/> |
## Additional context
This is PR 1 of a 3-PR stack for DEPR-394.
When the dashboard hits a DB connection timeout, users currently see a
raw error message with no
path forward. This PR adds an inline troubleshooting system that detects
known error types and
surfaces contextual next steps — restart the DB, read the docs, or debug
with AI.
## Changes
- New ErrorDisplay component (packages/ui-patterns) — styled error card
with a title, monospace error
block, optional troubleshooting slot, and a "Contact support" link that
always renders. Accepts
typed supportFormParams to pre-fill the support form.
- Error classification in handleError (data/fetchers.ts) — on every API
error, the message is tested
against ERROR_PATTERNS. If matched, handleError throws a typed subclass
(ConnectionTimeoutError
extends ResponseError) instead of a plain ResponseError. Stack traces
now show the exact error
class. All existing instanceof ResponseError checks continue to work.
- ErrorMatcher component — reads errorType from the thrown class
instance, does an O(1) lookup into
ERROR_MAPPINGS, and renders the matching troubleshooting accordion as
children of ErrorDisplay.
Falls back to plain ErrorDisplay for unclassified errors.
- Connection timeout mapping — first error type wired up, with three
troubleshooting steps: restart
the database, link to the docs, and "Debug with AI" (opens the AI
assistant sidebar with a
pre-filled prompt).
- Telemetry — three new typed events track when the troubleshooter is
shown, when accordion steps are
toggled, and which CTAs are clicked.
## Adding a new error type
1. Add a class to types/api-errors.ts
2. Add { pattern, ErrorClass } to data/error-patterns.ts
3. Create a troubleshooting component in errorMappings/
4. Add an entry to error-mappings.tsx
This is part two of a [PR
breakdown](https://github.com/supabase/supabase/pull/42276) that
introduces our connect schema and how content is retrieved. This focuses
on the Framework tab to start.
Fields are generated and content is rendered using a connect.schema
file. This schema file defines modes, fields and steps. Each mode has a
set of fields. Each field can be dependent on another field. The steps
generated are then based off the values of the modes and fields. Each
step can also render varying content dynamically using a template
{{framework}}/{{frameworkVariant}}/{{library}} which just replaces those
values with what's in state (fields selected).
[Part one needs to be merged
first.](https://github.com/supabase/supabase/pull/42367)
The next stage will add back all other tabs and content.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* New Connect Sheet UI to guide app-to-project connections with dynamic
configuration and copyable connection parameters.
* Multi-framework & mobile support with ready-to-use code examples,
install commands, and step-by-step setup for 20+ frameworks.
* Multiple PostgreSQL connection methods (direct, transaction, session)
with safe/masked connection previews.
* Copy-prompt that aggregates step content and code for easy sharing.
* **UI**
* Multi-file code viewer with tabbed code blocks and added syntax
support (Swift, TOML, HTML).
* **Tests**
* Comprehensive unit tests for resolver and state logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Waiting for new case sutides to be approved
* WIP case studies
* Added Koodos
* Added avatars
* Added mcp-use blog post
* two new case studies signed off, one new blog post
* ci: Autofix updates from GitHub workflow
* Fixed stats and added eXp Realty
* Cleaned up formatting
* 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.
* feat: remove unused chart files
* chore: regenerate registry
* fix: logs bar chart positioning
* feat: add charts page to ui patterns
* chore: alphabetise ui patterns nav
* feat: base composable chart components
* chore: prettier for charts.mdx
* chore: slowly putting example together
* feat: add chart header components
* feat: add chart content wrapper
* feat: add recharts to source
* feat: add empty state handling
* feat: add loading state for content area as well
* feat: starting on actual recharts pieces
* feat: add basic api to documentation
* feat: add disabled state too
* feat: couple of basic chart types
* chore: tidy up for now
* feat: modify eslint rules for our demo files
* fix: recharts logo colour on light mode
* feat: absorb metric card into chart
* feat: align prop for chart header
* feat: refactor chart content
* feat: example with table
* chore: format for prettier
* fix: pkg lock merge conflict
* fix: small bits from danny
* feat: add link in ui pattern intro to charts
* chore: remove charts link from atoms
* chore: update metric padding to saxon suggestion
* feat: table footer overrides by default
* feat: update api props in table
* chore: formating
* update configs for different clients
* add codex and minor fixes
* sort clients by popularity
* add onCopy handle to other mcp clients
* remove optional operator for onCopy
* fix system theme
* fix rebase
* fix mdx
Alaister Young
