## Problem
The tooltip comment we have about removing the `aria-describedby`
attribute to avoid screen readers reading the same text twice is wrong.
## Solution
Make it clear why we do that so that future devs don't remove it.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility**
* Clarified accessibility guidance for tooltips and screen-reader labels
across code blocks, database controls, function editors, hooks, and
table actions.
* **Documentation**
* Updated internal comments to more clearly explain why duplicate
tooltip text is avoided for screen readers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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?
Add telemetry for `PromptPanel` to help us understand how people
interact with our AI prompts better.
Relates to DOCS-1393
Dashboard(restricted access): [Docs: AI prompt
affordances](https://eu.posthog.com/project/34344/dashboard/957235)
## What is the current behavior?
The docs homepage cover renders a setup panel with "AI Prompt" and "CLI"
tabs, and guides render `AiPrompt` blocks. Both are built on the shared
`PromptPanel`, whose copy button called `copyToClipboard` and nothing
else. Copying was therefore unmeasured, while the neighbouring
affordances (`ask_ai_clicked`, `agent_setup_clicked`,
`copy_as_markdown_clicked`) are already instrumented.
## What is the new behavior?
`PromptPanel` takes an optional `telemetry` prop. When it is set, the
panel sends a new docs-owned event after a **successful** clipboard
write, so instrumentation lives in the shared component instead of a
forked homepage copy button.
New event in `packages/common/telemetry-constants.ts`:
| | |
| --- | --- |
| `action` | `docs_ai_prompt_copied` |
| `source` | `homepage` \| `guide` \| `agent_setup` |
| `tab` | `prompt` \| `cli` (omitted for panes outside that set) |
| `promptId` | prompt id, when the panel comes from an `AiPrompt` block
|
Wired consumers: `HomePageCover` (`homepage`), `AiPrompt` (`guide` by
default, plus `promptId`), and `AgentSetup` (`agent_setup`). No prompt
body text and no PII is sent.
Studio's existing `ai_prompt_copied` event is deliberately left alone:
it has a different owner and surface, and merging the two would blend
unrelated funnels.
### Proof it works
```
$ pnpm run test:local:unwatch features/ui/PromptPanel.telemetry.test.ts
RUN v5.0.0 /apps/docs
Test Files 1 passed (1)
Tests 4 passed (4)
Duration 775ms
```
## Additional context
Test plan, run against a local docs server with a stub telemetry
endpoint so the request bodies could be read directly:
| Case | Observed payload |
| --- | --- |
| Homepage, AI Prompt tab | `{"source":"homepage","tab":"prompt"}` |
| Homepage, CLI tab | `{"source":"homepage","tab":"cli"}` |
| Next.js quickstart `AiPrompt` |
`{"source":"guide","tab":"prompt","promptId":"nextjs"}` |
| `automate-with-agents/health` `AgentSetup` |
`{"source":"agent_setup","tab":"prompt","promptId":"monitoring-agent-health"}`
|
| Clipboard write rejected | no request sent, error toast shown, button
does not flip to "copied" |
The failure case was re-checked with a control click on the same page
after restoring a working clipboard, which did send the event, so the
negative result is not just a missed handler.
Also run: `turbo typecheck --filter=docs --filter=common` (passes),
Prettier check on the touched files (passes), and ESLint on the touched
docs files (no new findings; the one warning on `HomePageCover` is the
pre-existing default export).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Successful prompt copies are now tracked across the homepage,
documentation guides, and agent setup experiences.
* Copy activity records the prompt’s source, selected format, and
associated prompt when available, providing more complete usage
insights.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Nik Richers <nik@validmind.ai>
## What kind of change does this PR introduce?
docs ui polish for the prompt panel on the docs homepage and in the
quickstarts
## What is the current behavior?
agent prompt renders as one run on paragraph steps read as "1. ... 2.
... 3. ..." inline making it hard to read
## What is the new behavior?
- sets prompt bodies as markdown for easier readability
- adds long prompts collapse
- removes panel tab icons
- uses panel code block ui
- makes active tab has an underline on first paint
`home`
| state | preview |
| -------|------|
| before | <img width="709" height="344" alt="image"
src="https://github.com/user-attachments/assets/ba3a0948-efff-4144-8eba-9065e1f140d9"
/> |
| after | <img width="709" height="344" alt="image"
src="https://github.com/user-attachments/assets/e63e71e9-86d2-4d9a-ac2d-925e197d69f9"
/> |
`quickstart`
| state | preview |
| -------|------|
| before | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/96faf012-a9f1-4ee9-8a98-3ec6de24d2de"
/> |
| after | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/7a41a259-e181-4a32-949f-de095d8bb66c"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Prompts now support Markdown formatting, inline code chips, expandable
content, and improved hover-reveal behavior.
* Code-copy controls support customizable labels and clearer
screen-reader announcements.
* Prompt tabs and panels have updated styling, spacing, and
active-content handling.
* **UI Improvements**
* Setup and agent prompts now use consistent Markdown-rendered
presentation.
* Prompt headings now display “Agent Prompt.”
* Home page setup code blocks use a more compact layout.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
bug fix alternative to #50492
## What is the current behavior?
[#50239](https://github.com/supabase/supabase/pull/50239) introduced
repeated shiki grammar registration. duplicate injection rules
accumulate between code blocks, slowing later tutorials enough to hit
the 60-second build timeout
## What is the new behavior?
- reuses one highlighter with all languages loaded once
- restores previous highlighting approach + startup cost while keeping
the page-size savings
replay | before #50239 | after #50239 | this pr
-- | -- | -- | --
cold, including initialization | 2.99 s | 6.96 s | 2.94 s
warm | 0.37 s | 5.90 s | 0.36 s
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Enhancements
* Code blocks now preload syntax highlighting for all supported bundled
languages, including SQL, Markdown, and TypeScript.
* Highlighting uses a shared configuration and theme for consistent
rendering across code blocks.
* Concurrent code block renders share a single highlighter
initialization.
* Language handling and syntax-highlighted output are more consistent
across supported, unsupported, aliased, and plain-text code blocks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
## What kind of change does this PR introduce?
follow-up to #50235 to reduce reference page payloads and cold rendering
overhead
## What is the current behavior?
reference pages ship a large rsc payload inside the html _ most of it is
duplication rather than content along with shiki that writes ~30
character css variable name for every syntax token making the page heavy
in some cases
## What is the new behavior?
- moves repeated styles into shared css and uses compact, namespaced
token classes
- renders details icons inside the client trigger
- follows shiki’s guidance to [reuse one
highlighter](https://shiki.style/guide/best-performance#cache-the-highlighter-instance)
and [load languages on
demand](https://shiki.style/guide/best-performance#use-shorthands)
`page size`
page | before | after | change
-- | -- | -- | --
javascript | 10.61 mb | 8.28 mb | -21.9%
dart | 4.59 mb | 4.13 mb | -10.1%
python | 4.38 mb | 3.73 mb | -14.9%
swift | 2.87 mb | 2.56 mb | -10.9%
server | 1.59 mb | 1.35 mb | -15.2%
kotlin | 3.42 mb | 3.17 mb | -7.2%
`cold initialization`
language | before | after | reduction
-- | -- | -- | --
bash | 2,180 ms | 23 ms | 98.95%
javascript | 2,245 ms | 38 ms | 98.29%
## Additional context
measured on a local production build which uses the checked in generated
content _ production has larger sdk data, so absolute sizes there will
be higher
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added reusable expand/collapse controls for API reference details,
with updated icons, labels, and styling.
* Improved code block rendering with class-based syntax highlighting,
wrapped-code support, responsive layouts, and lazy language loading.
* **Style**
* Added theme-aware syntax-token colors, line-number styling, and
configurable code-block shadows.
* Consolidated expandable reference panel and item styling.
* **Tests**
* Added coverage for syntax highlighting, code block rendering, language
support, token stability, and reference details.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
nitpick ui bug fix in docs of the collapsible details component +
commentary
## What is the current behavior?
1. data / response / notes collapsibles on reference pages grow taller
when you expand them + also get double padding: the panel pads the
content, and the code block pads itself again inside it
2. commentary that follows a snippet in the example column renders
unstyled, since that column has no prose context. it comes out larger
than the description column and inline code stays as plain text
## What is the new behavior?
├ adds `CodeBlock` a `compact` variant that get appropriate styling when
used within collapsible
| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/8b70e1c6-9e0e-4371-a2b2-eb4a3d580247"
/> |
| after | <video
src="https://github.com/user-attachments/assets/1e5cdd46-ce7d-4d2d-ac6a-6da680df37e5"
/> |
├ wraps example column in prose so trailing commentary matches the
description font size + inline code styling
| state | preview |
| -------|------|
| before | <img width="1142" height="404" alt="image"
src="https://github.com/user-attachments/assets/8d0f1ac0-087d-47f7-b35d-b8798d589fdb"
/> |
| after | <img width="1142" height="404" alt="image"
src="https://github.com/user-attachments/assets/b9ba4202-a8dd-407d-b535-f34d83f5b24b"
/> |
## Test
- visits `/docs/reference/javascript/using-filters-gt`
- visits `/docs/reference/server/middleware-withsupabaseadminclient`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Documentation code blocks can now be displayed in a compact format
without borders or extra spacing.
- Reference documentation supports customizing code block presentation.
- **Style**
- Improved formatting for example content, including prose wrapping,
spacing, and code block margins.
- Refined collapsible documentation sections with clearer spacing, hover
and focus states, and open/close animations.
- Code-only collapsible content now uses a more compact layout, while
text content receives consistent typography and padding.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
bug fix + some ui polish on the docs code block
## What is the current behavior?
line numbers scroll away with the code _ so you lose your place in any
block wide enough to scroll _ the gutter is also see-through so scrolled
code renders interleaved with the numbers
## What is the new behavior?
- makes gutter sticky and stays pinned while the code scrolls (no
rubber)
- fixes gutter, row hover, and button backgrounds as opaque so nothing
bleeds through
- adds gutter right edge fades vs bg
- adds right padding so line endings clear the buttons
- adds press feedback on the shared in-house `Button` gated behind
`motion-safe`
| state | preview |
| -------|------|
| before | <img width="566" height="263" alt="image"
src="https://github.com/user-attachments/assets/81778815-1f15-4ea5-a647-ed48418210e8"
/> |
| after | <img width="566" height="259" alt="image"
src="https://github.com/user-attachments/assets/b7d770c5-4156-491f-93c8-b0d900b7dc85"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **UI Improvements**
* Refined code block controls with consistent styling, active states,
animated icons, and automatic copy-status reset.
* Improved code block line-number presentation with hover effects,
sticky gutters, spacing, shadows, and smoother horizontal scrolling.
* Added smoother button transitions and a subtle pressed-state
animation.
* Respect reduced-motion preferences by disabling icon animations when
requested.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes DOCS-1283
https://github.com/user-attachments/assets/6e55a27f-6f73-453b-b98f-e91d3c14a9e4
## Problem
Three defects in the docs code block:
- The scroll container has no `tabindex`. On `/guides/database/tables`,
18 blocks, none focusable, 2 overflowing at 1280px. Tab skips the scroll
region, so a keyboard-only user cannot scroll code that runs off the
edge.
- The container has `role="group"` with no accessible name, so it
announces as bare "group".
- The line-number gutter has no `aria-hidden`, so digits are read inline
with the code. A block linearizes as `1import { createClient } from
'@supabase/supabase-js'23const supabase = ...`, with lines 2 and 3
collapsing into "23".
Four more surfaced while testing the fix:
- The wrap and copy buttons were absolutely positioned inside the
element that scrolls, so `right-2` measured against the scrollable
content box. Scrolling dragged them out of the corner into the middle of
the code. This one predates the PR.
- The buttons preceded the code in the DOM, so a screen reader read two
actions before naming what they act on.
- `focus-within` only fired for the buttons, so focusing the block left
the controls invisible.
- Both buttons set an `aria-label` identical to their tooltip text, and
Radix points `aria-describedby` at the tooltip on focus, producing "Copy
code, button, Copy code".
## Solution
Keyboard:
- Split the scroll region out of the positioning container, so the
controls stay pinned.
- Give the scroll region a `tabIndex` and a focus ring.
- Reveal the controls on `group-focus-within`.
Screen reader:
- Name the region `<language>, <n> lines`. Code content stays readable;
the summary goes in the name so the group can be skipped or stepped
into.
- Map fence aliases to spoken names, so `ts` announces as TypeScript.
Only the ambiguous ones; `bash`, `python`, `kotlin`, `dart`, `swift`
already read fine.
- `aria-hidden` the gutter. The numbers are already `select-none`, and
copy takes its content from the source string rather than the DOM, so
copy behavior is unchanged.
- Order the controls after the code.
- Announce the word wrap toggle through a live region, matching the copy
button.
- Opt both buttons out of Radix's generated description.
Also moved the `data-wrapped` side effect out of the `setIsWrapped`
updater, since React calls updaters twice under StrictMode.
## Manual testing
1. Open `/docs/guides/database/tables`.
2. Run `document.querySelectorAll('.code-scroll[tabindex="0"]').length`
in the console. Expect `18`.
3. Run `[...document.querySelectorAll('.code-scroll')].map(b =>
b.getAttribute('aria-label'))`. Expect entries like `SQL, 11 lines` and
`bash, 2 lines`, plus one bare `2 lines` for the fence with no language.
4. Tab to a code block. Expect a visible focus ring, and the wrap and
copy buttons to appear.
5. Press ArrowRight on the block under "Basic data loading", which
overflows. Expect it to scroll, and the buttons to stay in the top-right
corner.
6. Press Enter on the wrap button. Expect the code to wrap and a screen
reader to announce "Word wrap enabled".
7. With VoiceOver on, focus a code block. Expect "SQL, 11 lines, code
block", then the code read without line numbers interleaved. Focus each
button and expect its name once, not twice.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Accessibility**
- Improved code block labels for screen readers, including programming
language and line count.
- Added announcements when word wrap is enabled or disabled.
- Enhanced keyboard focus behavior for code block controls.
- **Usability**
- Kept code block controls visible while scrolling through code.
- Improved wrapped-code overflow handling.
- Removed redundant tooltip descriptions for copy and word-wrap
controls.
<!-- 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
## Problem
Keyboard navigation on docs tabs is confusing:
- tab panels can be focused but without any indication that they are
- code example buttons can be focused with keyboard but stay invisible
- copy code button has no label and do not notify screen reader users
about its status
## Solution
- Make tab panels non focusable
- Ensure buttons are visible when focused
- Add a label to the copy code buttons
- Add a live region for the copy code status
## How to test
1. Go to
https://docs-git-gildasgarcia-docs-1156-cannot-keyboard-140a35-supabase.vercel.app/docs/guides/local-development/cli/getting-started
2. Go to a tab list with _Tab_ key
3. Verify you can choose the tab value with Arrow keys and select it
with space
4. Tab again and verify you now have focused the code example first
button and it is visible
5. Tab again and the copy code button should be focused and visible
If you enable Voice over, clicking the copy code button should announce
that the code has been copied
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
* **Bug Fixes**
* Improved code block copy feedback so the “copied” state resets more
reliably after interaction.
* **Accessibility Improvements**
* Code block controls now appear on keyboard focus (not just hover) and
include an assistive live announcement when copying succeeds.
* Enhanced code block semantics with clearer ARIA labeling.
* Prevented tab panels from being reachable through normal tab
navigation to reduce unintended focus stops.
<!-- 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>
* feat(code-block): add word wrap functionality and controls to code blocks
* feat(code-block): enhance layout of code block with improved line number display and structure
* fix h-full issue
* fix Prettier issue
---------
Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
* Consolidate copy to clipboard
* Fix
* Fix some extra clipboard events.
* Fix the tests. Fix a small issue with the copy button.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
strictNullChecks was off for docs, which lets errors slip through and
leads to incorrect required/optional typing on Zod-inferred types. This
PR enables strictNullChecks and fixes all the existing violations.
Gildas Garcia