## 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 -->
## 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 -->
* 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>
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.
Anthony Lio