## What kind of change does this PR introduce?
Refactor. Follow-up to #49871.
## What is the current behavior?
Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.
## What is the new behavior?
**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.
This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.
## To test
On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).
-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
* Refined brand color fallback behavior for bright fills and borders.
* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
`FormItemLayout` does not correctly binds inputs descriptions and
validation messages to their inputs. This is because the input ids are
generated and not correctly propagated to the `FormMessage` and
`FormDescription` components. Besides, we still pass `name` or `id`
directly to the inputs or `FormItemLayout` in some places.
## Solution
- Fix `FormItemLayout` to correctly binds inputs descriptions and
validation messages to their inputs
- Fix incorrect usages
- Fix Design System documentation
## How to test
The issue is visible in production:
- Open https://supabase.com/design-system/docs/ui-patterns/forms
- Open the devtool and check the labels `for`, the description `id` and
the input `id` or `aria-describedby` attributes. You'll see they often
don't match
Do the same on staging:
- Open
https://design-system-git-fix-a11y-form-input-descriptions-supabase.vercel.app/design-system/docs/ui-patterns/forms
- Open the devtool and check the labels `for`, the description `id` and
the input `id` or `aria-describedby` attributes. They now match
Dashboard fixes:
-
https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/tokens:
_Expires in_ select button is now correctly linked to its label
-
https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/me:
the switches are now correctly linked to their label
- In Database/Indexes: the select buttons when creating an index are now
correctly linked to their label
- All other changes are the same things
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>
Hides the "Multigres" term from user-facing surfaces — it's the tech
powering High Availability projects, but "High Availability" is the only
term users should see for now (per Slack discussion with Saxon/Ivan).
**Changed:**
- High Availability badge hover card (project overview) no longer says
"Driven by Multigres"
- Project creation HA toggle description drops the Multigres name +
multigres.com link, keeps the informational copy
- All schema dropdowns now hide the `multigres` schema on HA projects,
by wiring in the previously-unused `filterSchemasForHighAvailability`
helper:
- `SchemaSelector` (shared — Table Editor, Functions, Indexes, Triggers,
Schema Visualizer, etc.)
- `ExposedSchemaSelector` (API settings → exposed schemas)
- `EnableExtensionModal`, `CreateIndexSidePanel`, `ForeignKeySelector`,
`WrapperTableEditor`, Integrations install sheet `AdvancedSettings`
- SQL editor schema autocomplete (`useAddDefinitions`)
- Schema list computations in the touched components are now memoized
(incl. stabilizing `SchemaSelector`'s `excludedSchemas` default so the
memo actually holds)
**Added:**
- Unit tests for `filterSchemasForHighAvailability` /
`resolveHighAvailability`
- MSW component test for `SchemaSelector` asserting `multigres` is
hidden on HA projects and still shown on non-HA projects
The filter is HA-gated on purpose: a self-hosted/non-HA user with their
own schema named `multigres` still sees it. The flag-gated Multigres
option in Logs is intentionally untouched — that exposure is kept for
the Multigres team's debugging (separate track).
## To test
- On an HA project (`high_availability: true`): hover the High
Availability badge on project overview — no "Multigres" mention; open
schema dropdowns in Table Editor / Database pages / SQL editor
autocomplete — no `multigres` schema
- Project creation with HA entitlement: toggle description has no
Multigres wording/link
- On a non-HA project: schema dropdowns behave as before
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Made schema dropdowns and related selectors high-availability aware
across extensions, indexes, integrations, SQL editing, API exposed
schemas, and relationship editors.
* Updated project high-availability UI text and badge hover description
to remove outdated branding and clarify horizontally scalable Postgres
architecture.
* **Tests**
* Added coverage to ensure the schema “multigres” option is hidden/shown
correctly based on high availability, and validated high-availability
value handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## 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
## Context
Part of efforts to consolidate all the code editors that we have in the
repository
`CodeEditor` will serve as the base monaco editor file that all UIs
should consume from
It's aimed to be generic and just stores the common logic that will be
generally used where-ever we need a code editor (editor options, base
editor set up on mount, etc)
The idea is that `CodeEditor` holds just 3 default actions (run queyr,
format document and placeholder fill)
If any editor needs specific behaviours (e.g SQL Editor), they can
declare them in the `onMount` prop of `CodeEditor` which gives some
flexibility
## Changes involved
- Use `CodeEditor` component for SQL Editor's `MonacoEditor`
- Shifted Cmd K behaviour into `CodeEditor` since that's probably needed
everywhere that we render that UI
- Deprecate `MonacoEditor` from the table editor's `grid` folder
- All files that were using that component to use `CodeEditor` component
instead
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Migrated the studio’s code editing UI (including JSON, text, and
payload viewers) to a unified CodeEditor experience.
* **New Features**
* Added plaintext language support for read-only/truncated views.
* **Behavior Changes**
* Improved editor startup by setting cursor position consistently and
deferring autofocus.
* Streamlined editor context-menu actions to the core set (run query,
format, placeholder fill).
* Updated SQL editor wiring for more consistent command/menu and
selection handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## 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?
Refactored the Database Create Index side panel to align with the
recommended Studio form patterns.
## What is the current behavior?
The side panel was using a legacy layout that did not follow the common
Studio form patterns.
It's also not a real form.
## What is the new behavior?
The Create Index side panel in the Database section is now consistent
with the Studio form patterns.
It's now a real form using `react-hook-form`
## Additional context
Before:
<img width="668" height="855" alt="image"
src="https://github.com/user-attachments/assets/d15ee63c-8d03-4780-8945-1792f0493133"
/>
After:
<img width="606" height="856" alt="image"
src="https://github.com/user-attachments/assets/78e0269c-e79c-42d1-a2c2-9465c0b0c46a"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **UI Improvements**
* Reworked index-creation panel into a validated, form-driven workflow
with clearer field interactions, multi-column selector, live read-only
SQL preview, and updated submit/cancel behavior.
* Footer actions: Cancel resets the form and closes the panel; Create
triggers form submission and reflects loading state.
* **Tests**
* Updated end-to-end flow to click "Select a table" (replacing "Choose a
table") during index creation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Command` components
## Solution
- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?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 `_Shadcn_` suffix isn't needed anymore on `Select` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We have multiple Popover components
## Solution
- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
- Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.
* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard
* Forgot to add ui changes lol
* Clean uop
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit 2a07df64b5.
* Revert the rss.xml file to master.
* Update Supabase docs URLs to use env variable
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for documentation links
This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for all documentation links
This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* replace more instances
* ci: Autofix updates from GitHub workflow
* remaining instances
* fix duplicate useRouter
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* init
* hovercard
* adds button to install index advisor
* hover card now now insert indexes
* update
* moved hook
* align alert dialog to design syste,
* Update index-advisor.utils.ts
* shows all index statements now
* Update query-performance.tsx
* Some refactors
* Clean up
* Fix
* One last nit refactor
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Add restrictions for orioledb technical preview
* Add callouts to pgvector and postgis if orioledb
* Restrict restore to new project for orioledb
* Scaffold client side validation for preventing org upgrade if org has oriole db present
* Hook up proper logic for oriole
* Fix
* Remove console log
* Fix type
* Disable version selector if only one version is available
* chore: oriole badges
* UI updates based on requests
* Update copy
* Fix
* Dont open assistant if opt is selected
* Fix
* Fix
* Update badge
* Add feature flag for orioleDB
* Feature flag oriole check in plan update
---------
Co-authored-by: Paul Cioanca <paul.cioanca@supabase.io>
* Fix key prop in CreateIndexSidePanel
* Fix validation when creating FK in column side panel editor - array vs non array type not triggering validation
* Fix validation for saving FK of different type, save array type properly
* Init AiAssistantPanel
* Temp
* Temp
* iterating on assistant ux
* More spiking
* Tweaking...
* Moar tweaking..
* Even more tweaking
* Tweek
* More tweaks
* Final tweaking...
* TWEAK
* Spelling
* Fix
* Assistant error handling and small bug fix in context for message
* Add feature flag
* Fix
* Address all feedback
* Minor
* Update the design of the sonner toasts. Add the close button by default.
* Migrate studio and www apps to use the SonnerToaster.
* Migrate all toasts from studio.
* Migrate all leftover toasts in studio.
* Add a new toast component with progress. Use it in studio.
* Migrate the design-system app.
* Refactor the consent toast to use sonner.
* Switch docs to use the new sonner toasts.
* Remove toast examples from the design-system app.
* Remove all toast-related components and old code.
* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.
* Fix the width of the toast progress.
* Use text-foreground-lighter instead of muted for ToastProgress text
* Rename ToastProgress to SonnerProgress.
* Shorten the text in sonner progress.
* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.
* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).
* Fix the playwright tests.
* Refactor imports to use ui instead of @ui.
* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.
* Remove react-hot-toast lib.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* 🐛 fix: wrap column around quotes for creating index sql command
* Fix the package.lock.
---------
Co-authored-by: Girish Savlesha <girish.savlesh@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* chore: deprecate old files. add new one with first story
* init multi select
* docs
* Update multi-select.mdx
* deprecation notices
* Delete MultiSelect.stories.tsx
* Add comboboxes to the index side panel dropdowns
* Add loading state for create index panel select a table field
* Add placehholder for columns field in create index side panel
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
Danny White
