@master/internal-site 0.1.2 → 0.1.3

package/src/styles/docs-shell/prose.css

@@ -15,25 +15,26 @@
   /* A surface hangs by up to 2rem but always leaves a 1rem gutter to the window. */
   @media (width >= 52rem) { .ui-prose.ui-docs-article { --prose-bleed: min(2rem, var(--docs-gutter) - 1rem); } }
 
-  :is(.ui-tray, .ui-code, .ui-table, .ui-params, .ui-prompt, .ui-tree, figure, img, video, iframe, picture, p:has(> img:only-child, > video:only-child, > picture:only-child, > a:only-child > img:only-child)):is(
-    .ui-prose > :is(div, section, site-island):not([class]) > *,
-    .ui-prose > :is(div, section, site-island):not([class]) > :is(div, site-island):not([class]) > *
+  :is(.ui-tray, .ui-code, .ui-table, .document-comparison, .ui-params, .ui-prompt, .ui-tree, figure, img, video, iframe, picture, p:has(> img:only-child, > video:only-child, > picture:only-child, > a:only-child > img:only-child)):is(
+    .ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *,
+    .ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *
   ),
   :is(figure, img, video, iframe, picture, p:has(> img:only-child, > video:only-child, > picture:only-child, > a:only-child > img:only-child)):is(.ui-prose > *) {
     margin-inline: calc(var(--prose-bleed) * -1);
   }
   /* A component that wraps its surface in an unclassed element keeps the article's line of air around it, as a direct
      child would (the margins collapse through the wrapper). */
-  :is(.ui-tray, .ui-code, .ui-table, .ui-params, .ui-prompt, .ui-tree):is(
-    .ui-prose > :is(div, section, site-island):not([class]) > *,
-    .ui-prose > :is(div, section, site-island):not([class]) > :is(div, site-island):not([class]) > *
+  :is(.ui-tray, .ui-code, .ui-table, .document-comparison, .ui-params, .ui-prompt, .ui-tree):is(
+    .ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *,
+    .ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *
   ) { margin-block: var(--line); }
   /* Document steps reach the hanging edge on the end side, so their code ends where every other surface ends. */
   .ui-docs-article > .ui-steps[data-variant="document"] { margin-right: calc(var(--prose-bleed) * -1); }
   /* A result shown after a step (a preview) hangs on both sides like any surface; the rail runs on into it. */
   .ui-docs-article > .ui-steps[data-variant="document"] > :not(li) { margin: 0 0 0 calc(var(--prose-bleed) * -1); }
-  :is(img, video, iframe):is(.ui-prose > *, .ui-prose > :is(div, section, site-island):not([class]) > *) { width: calc(100% + var(--prose-bleed) * 2); max-width: none; }
-  /* A table its author wrapped in a scroll region bleeds as the region. */
+  :is(img, video, iframe):is(.ui-prose > *, .ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *) { width: calc(100% + var(--prose-bleed) * 2); max-width: none; }
+  /* A table its author wrapped in a scroll region bleeds only as the region.
+     Region wrappers are excluded from the transparent-wrapper rules above. */
   .ui-prose > [role="region"]:has(> :is(.ui-table, table)) { margin: var(--ui-space-xl) calc(var(--prose-bleed) * -1); }
   .ui-prose > [role="region"][tabindex]:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
 
@@ -51,13 +52,21 @@
   /* In-page links move focus to their heading; its ring stands clear of the text. */
   .ui-prose > :is(h2, h3):focus-visible { @apply --ui-focus-ring; outline-offset: .25rem; border-radius: var(--ui-radius-xs); }
   /* A single token (`data-token`, set by the inline code renderer) moves to the next line whole. */
-  .ui-prose > :is(p, ul, ol) code[data-token] { display: inline-block; max-width: 100%; line-height: 1.5; vertical-align: baseline; }
+  .ui-prose > :is(p, ul, ol) code[data-token],
+  .ui-prose > details:not([class]) > :is(p, ul, ol) code[data-token] { display: inline-block; max-width: 100%; line-height: 1.5; vertical-align: baseline; }
   /* A run of inline code that wraps keeps its chip on both lines instead of an open cut. */
   .ui-inline-code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
   .ui-prose > :is(p, ul, ol) del { text-decoration-color: var(--ui-status-danger); }
   .ui-prose > details:not([class]) { max-width: var(--measure); margin-block: var(--ui-space-xl); border-block: 1px solid var(--ui-line-hair); }
   .ui-prose > details:not([class]) > summary { padding: var(--ui-space-sm) 0; color: var(--ui-text-strong); font-weight: var(--ui-weight-strong); font-size: var(--ui-text-small); cursor: pointer; }
   .ui-prose > details:not([class]) > summary:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
+  /* Authored disclosures are part of the reading flow. Their contents need the same rhythm as the article,
+     with space above the closing rule; component disclosures keep their own body and frame contracts. */
+  .ui-prose > details:not([class])[open] { padding-bottom: calc(var(--line) * .75); }
+  .ui-prose > details:not([class]) > :is(p, ul, ol, blockquote) { margin-block: calc(var(--line) * .75); overflow-wrap: anywhere; text-wrap: pretty; }
+  .ui-prose > details:not([class]) > :where(.ui-table, .ui-code, .ui-tray, .ui-params, .ui-prompt, .ui-tree, figure) { margin-block: var(--line); }
+  .ui-prose > details:not([class]) > summary + * { margin-top: var(--ui-space-sm); }
+  .ui-prose > details:not([class]) > :last-child { margin-bottom: 0; }
 
   /* Han text keeps the body's double leading; its headings keep their natural spacing. */
   .ui-prose:lang(zh) { text-autospace: normal; }

package/src/styles/docs-shell/steps.css

@@ -1,39 +1,2 @@
-/*
- * Document steps (`StepSection`) on `ui-steps` (styles/system/data.css): a step's content holds an authored heading,
- * its text and, in a row step, the code beside it once the column has room.
- */
-@layer components {
-  .ui-steps[data-variant="document"] { container-type: inline-size; margin-block: var(--ui-space-xl) var(--line, var(--ui-space-xl)); }
-  .ui-steps-content, .ui-steps-text, .ui-steps-source { min-width: 0; }
-  .ui-steps-content { display: grid; align-content: start; gap: var(--ui-space-md); }
-  .ui-steps-content[data-columns] { gap: var(--ui-space-md) var(--ui-space-xl); }
-  .ui-steps-content :is(h2, h3, h4) {
-    position: static; width: auto; margin: .125rem 0 var(--ui-space-2xs);
-    color: var(--ui-text-strong); font-size: var(--ui-text-base); font-weight: var(--ui-weight-medium); line-height: 1.5rem; letter-spacing: -.006em;
-  }
-  .ui-steps-content :is(h2, h3, h4) > .ui-anchor { display: none; }
-  .ui-steps-content > :is(h2, h3, h4), .ui-steps-text > :is(h2, h3, h4) { margin-bottom: calc(var(--ui-space-md) * -1 + var(--ui-space-2xs)); }
-  .ui-steps-content :is(h2, h3, h4) + p { margin-top: 0; }
-  .ui-steps-content :is(p, li) { font-size: var(--ui-text-small); line-height: var(--ui-leading-small); }
-  .ui-steps-content :is(p, ul, ol) { margin-block: 0; }
-  .ui-steps-text { display: grid; align-content: start; gap: var(--ui-space-md); }
-  /* Several files under one step part by a small gap, never contour against contour. */
-  .ui-steps-source { display: grid; align-content: start; gap: var(--ui-space-sm); }
-  /* A note inside a step is part of its text: the icon leads a muted paragraph, without a frame of its own in the narrow column. */
-  .ui-steps-content .ui-callout { padding: 0; background: none; box-shadow: none; color: var(--ui-text-muted); }
-  /* Only reset panels placed by the step grid; nested trays own their internal spacing. */
-  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, .ui-tray) { margin: 0; }
-  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, p):first-child { margin-top: 0; }
-  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, p):last-child { margin-bottom: 0; }
-
-  @container (width < 20rem) {
-    .ui-steps[data-variant="document"] > li { grid-template-columns: minmax(0, 1fr); }
-    .ui-steps[data-variant="document"] > li::before, .ui-steps[data-variant="document"] > li::after { display: none; }
-  }
-
-  /* A row step reads beside its code once the list has room for both (46rem): the text on two fifths, the code on three.
-     Narrower, the code stacks under its text at full width rather than scrolling in a sliver. */
-  @container (min-width: 46rem) {
-    .ui-steps-content[data-columns] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
-  }
-}
+/* Compatibility entry; the component owns base and adaptation together. */
+@import '../system/steps.css';

package/src/styles/document-comparison.css

@@ -1,7 +1,10 @@
 /* A two-column reading comparison inside the shared table: fixed columns, long syntax wraps. */
 @layer components {
   .document-comparison table { table-layout: fixed; }
-  .document-comparison :is(th, td) { white-space: normal; overflow-wrap: anywhere; }
+  .document-comparison :is(th, td),
+  .document-comparison .ui-table :is(th, td) { white-space: normal; overflow-wrap: anywhere; }
   .document-comparison :is(th, td):first-child { width: 40%; }
-  .document-comparison code { white-space: normal; }
+  /* Reading comparisons also override the lookup table's intact first-column tokens. */
+  .document-comparison code,
+  .document-comparison .ui-table :is(td:first-child, tbody th) code { white-space: normal; overflow-wrap: anywhere; }
 }

package/src/styles/documentation-illustration.css

@@ -3,12 +3,9 @@
   .document-illustration { overflow: hidden; border-radius: var(--ui-radius-xl); }
   .document-illustration img { display: block; width: 100%; height: auto; margin: 0; }
   .document-illustration img[data-scheme="dark"] { display: none; }
-  .ui-tray[data-illustration-expandable] .ui-tray-title { flex: 1; }
-  .document-illustration-expand { flex: none; }
-  .document-illustration-expand[data-scheme="dark"] { display: none; }
   /* A quiet caption-level entry, independent of the demo's generated-code panel. */
   .ui-tray > .ui-disclosure[data-variant="text-description"] { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
-  .ui-tray > .ui-disclosure[data-variant="text-description"] > summary { width: fit-content; max-width: calc(100% - 2 * var(--ui-space-sm)); min-height: 2rem; margin-inline: var(--ui-space-sm); padding: 0; gap: var(--ui-space-2xs); color: var(--ui-text-muted); font-size: var(--ui-text-label); font-weight: var(--ui-weight-regular); }
+  .ui-tray > .ui-disclosure[data-variant="text-description"] > summary { width: fit-content; max-width: calc(100% - 2 * var(--ui-space-md)); min-height: 2rem; margin-inline: var(--ui-space-md); padding: 0; gap: var(--ui-space-2xs); color: var(--ui-text-muted); font-size: var(--ui-text-label); font-weight: var(--ui-weight-regular); }
   .ui-tray > .ui-disclosure[data-variant="text-description"] > summary::before { width: 12px; height: 12px; }
   .ui-tray > .ui-disclosure[data-variant="text-description"] > summary:hover { color: var(--ui-text-strong); }
   .ui-tray > .ui-disclosure[data-variant="text-description"] > .ui-disclosure-body { margin-inline: 0; padding-top: var(--ui-space-xs); }
@@ -18,17 +15,12 @@
   .ui-tray-caption strong { color: var(--ui-text-body); font-weight: var(--ui-weight-strong); }
   .dark .document-illustration img[data-scheme="light"] { display: none; }
   .dark .document-illustration img[data-scheme="dark"] { display: block; }
-  .dark .document-illustration-expand[data-scheme="light"] { display: none; }
-  .dark .document-illustration-expand[data-scheme="dark"] { display: inline-flex; }
   @media screen and (prefers-color-scheme: dark) {
     :root:not(.light, .dark) .document-illustration img[data-scheme="light"] { display: none; }
     :root:not(.light, .dark) .document-illustration img[data-scheme="dark"] { display: block; }
-    :root:not(.light, .dark) .document-illustration-expand[data-scheme="light"] { display: none; }
-    :root:not(.light, .dark) .document-illustration-expand[data-scheme="dark"] { display: inline-flex; }
   }
   @media print {
     .document-illustration img[data-scheme="light"] { display: block !important; }
     .document-illustration img[data-scheme="dark"] { display: none !important; }
-    .document-illustration-expand { display: none !important; }
   }
 }

package/src/styles/documentation-index.css

@@ -27,7 +27,8 @@
   .documentation-index-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--ui-space-md); margin-top: var(--ui-space-3xl); box-shadow: inset 0 -1px 0 var(--ui-line-divider); }
   .documentation-index-toolbar > p { color: var(--ui-text-muted); @apply --ui-eyebrow-type; }
   .documentation-index-toolbar > p > .documentation-index-count { letter-spacing: .02em; }
-  .documentation-index-toolbar > .ui-segmented { box-shadow: none; }
+  .documentation-index-toolbar > .ui-segmented,
+  .documentation-index-toolbar > .ui-segmented[data-variant="underline"] { box-shadow: none; }
 
   /* Section: a ruled spread. Below 44rem the head sits over its entries. */
   .documentation-index-section { display: grid; gap: var(--ui-space-lg); padding-block: var(--ui-space-xl) var(--ui-space-2xl); }

package/src/styles/documents.css

@@ -1,4 +1,2 @@
-/* Surfaces, code and prose: pages that render documents, examples or source. One local stylesheet emits its theme variables once. */
-@import './system/surfaces.css';
-@import './system/code.css';
-@import './system/prose.css';
+/* Reading defaults only. Document components deliver their own native rules. */
+@import './system/reading.css';

package/src/styles/interface.css

@@ -1,3 +1,5 @@
-/* Controls and shell: every page in the site shell renders them. One local stylesheet emits its theme variables once. */
-@import './system/controls.css';
-@import './system/shell.css';
+/* Shared actions. Document navigation and feature controls belong to their components. */
+@import './system/buttons.css';
+@import './system/button-feedback.css';
+@import './system/kbd.css';
+@import './system/tooltip.css';

package/src/styles/system/DESIGN.md

@@ -8,21 +8,30 @@ The site's interface vocabulary. Light mode is moonstone (a clean zinc pearl), d
 | --- | --- | --- |
 | `mixins.css` | `--ui-sheet-face`, `--ui-focus-ring`, `--ui-label-type`, `--ui-eyebrow-type`: shared declarations the component files expand with `@apply` | foundation (Master CSS definitions) |
 | `tokens.css` | `--ui-*` roles: surfaces, lines, text, light, elevation, radius, rhythm, motion, tones, status, code | foundation |
-| `surfaces.css` | `ui-sheet`, `ui-well`, `ui-tray`, `ui-stage`, `ui-compare`, `ui-browser`, `ui-scroll`, `ui-expand` | documents |
-| `controls.css` | `ui-button`, `ui-segmented`, `ui-field`, `ui-input`, `ui-select`, `ui-range`, `ui-check`, `ui-switch`, `ui-copy`, `ui-kbd`, `ui-tooltip`, `ui-menu` | interface |
-| `code.css` | `ui-code`, `ui-tabs`, `ui-inline-code`, `ui-disclosure`, `ui-prompt`, `ui-tree` | documents |
-| `prose.css` | `ui-callout`, `ui-hint` and the article flow helpers | documents |
-| `shell.css` | `ui-header`, `ui-sidebar`, `ui-nav-group`, `ui-nav-link`, `ui-toc`, `ui-pagehead`, `ui-pager`, `ui-dialog`, `ui-results` | interface |
-| `specimens.css` | `ui-item`, `ui-badge`, `ui-label`, `ui-legend`, `ui-measure`, `ui-leader`, `ui-axes`, `ui-swatch`, `ui-palette`, `ui-spacing`, `ui-player` | imported by the components that use it |
-| `data.css` | `ui-table`, `ui-metrics`/`ui-metric`, `ui-bar`, `ui-source`, `ui-params`, `ui-steps`, `ui-index`, `ui-logos`, `ui-chart`, `ui-waterfall` | imported by the components that use it |
+| `reading.css` | Article flow helpers | documents |
+| `buttons.css`, `button-feedback.css`, `kbd.css`, `tooltip.css` | Common shell controls | interface |
+| `header-core.css`, `sidebar.css`, `toc.css`, `pagehead.css`, `pager.css`, `dialog.css` | Navigation and search | owning component |
+| `segmented.css`, `fields.css`, `range.css`, `checks.css`, `copy.css`, `menu.css` | Feature controls, including all interaction states | owning component |
+| `code-panel.css`, `code-tabs.css`, `inline-code.css`, `disclosure.css`, `prompt.css`, `tree.css` | Document features | owning component |
+| `table.css`, `parameters.css`, `steps.css`, `index.css`, `metrics.css`, `chart.css`, `waterfall.css` | Data presentation | owning component |
+| `sheet.css`, `tray.css`, `stage.css`, `compare.css`, `browser.css`, `scroll.css`, `expand.css` | Surfaces and demos | owning component |
+| `specimens.css` | Specimen parts | owning component |
+| `controls.css`, `code.css`, `data.css`, `surfaces.css`, `shell.css`, `prose.css` | Compatibility aggregates importing the same leaves | explicit consumers only |
 
-Pages load the system in ordered asset boundaries (`site/routes.ts`), each one stylesheet:
+Pages load foundation → interface → documents → component styles in that order:
 
-- **foundation**: `styles/globals.css`, the only Master CSS entry (`@import '@master/css'`). Every entry joins one project graph, so a second entry delivers the union of both; keep component files out of it.
-- **interface**: `styles/interface.css`, every page in the site shell.
-- **documents**: `styles/documents.css`, unless a page exports `documentStyles = false` because it renders no surfaces, code or prose (the Blog index, 404, the homepage icon handoff).
+- **Foundation**: `styles/globals.css`, the only complete Master CSS entry (`@import '@master/css'`). Keep feature components out of its project-wide graph. Definitions and baseline rules belong here.
+- **Interface**: common controls on every page in the site shell. Navigation, search and document rails import their styles themselves.
+- **Documents**: article reading flow only. `documentStyles` remains a boolean; export `false` for pages without article typography, including the Master homepage. This no longer implicitly supplies code, tree, table or demo styles.
+- **Component**: import the narrowest explicit `styles/system/*` subpath from its owner. Header, TOC, steps and code leaves contain their base rules followed by their former docs-shell overrides; the old adapter paths are compatibility imports. Preserve that effective declaration order. `DocArticle` and `BlogArticle` own prose layout. Bare `/examples` sections load foundation plus component dependencies. Owners that render `ui-button`, `ui-kbd` or `ui-tooltip` explicitly import the same small `interface.css` base-control module as the route boundary, so bare controls have their complete appearance and states without duplicated entry sources.
 
-Interface and documents are local stylesheets: each emits the theme variables it uses once, so add a component file to an existing boundary stylesheet rather than as another import. Bare sections (`/examples`) load the foundation and import only the system files their page renders.
+MDX imports only the Markdown mappings and built-in JSX components used by its transformed AST. The legacy `markdownComponents` export remains available to explicit consumers. Do not restore its blanket style side effects or substitute a runtime registry. Nested MDX keeps its own static imports.
+
+The shared Astro build integration flattens only unconditional same-directory compiler fragments, preserving order and repeated occurrences. Entries with unresolved imports stay intact. It combines adjacent plain stylesheet links only when their complete route usage is identical; foundation, interface and documents remain separate. Original assets remain available for JS references. This changes delivery, never progressive rendering, runtime or hydration.
+
+Use native classes for roles, tokens for shared semantic values, mixins for repeated declarations, and utilities for local decisions. Keep global native pruning disabled. Explicit opt-in currently covers `menu`, `logos`, `scroll` and `checks`; their finite native classes are present in shared sources. Product homepage rules opt in in the product repository, with full literal class maps for dynamic states. Other files retain native rules until their states and dependency closure can be proven. A package must opt in at its own source. Coverage alone cannot justify removing a rule.
+
+Product semantic highlighting belongs to the product article/reference/home owners. Shared homepage hero/action/footer sources stay here; product editor/lint/agent sections stay with the product site. Changes must pass full route budgets and packed-consumer checks; never trade a lower source file count for unrelated CSS delivery.
 
 The approved visual specification is the published "Master CSS Site Design System：Moonstone" artifact.
 
@@ -36,6 +45,16 @@ The approved visual specification is the published "Master CSS Site Design Syste
 6. **Small concentric radii.** 3 / 4 / 6 / 8 / 10 / 14 with a 4px tray inset: tray 14 → stage, code, table and sheet 10; menu 8 → item 4; segmented track 6 + its padding → thumb 6. Nothing rounder except pills and dots.
 7. **Light regular type.** English text runs at 350 (`:root:lang(en)` lowers `--ui-weight-regular`), Han text at 400. Headings are regular (400): size and ink carry the steps. Medium (460) marks a current entry, a control label or a small title; strong (500) is for `<strong>` and short emphasis only. Captions inside components (table heads, tray titles, metric names) are small sans in sentence case. Captions *over a group or a page* — sidebar groups, footer columns, the page kicker, "On this page", the pager's Previous/Next — are eyebrows (`--ui-eyebrow-type`): 11px sans capitals at medium weight, boldly tracked .14em, 16px line; Han text keeps 12px and .1em. A blog post's kicker (category · date) and its closing caption are eyebrows too. Never mono.
 8. **Two widths on one edge.** A documentation article starts every block on one edge. Running text — paragraphs, lists, headings, callouts, rules, disclosures — keeps the reading measure (`--docs-text`, 41rem; the 18px lead runs to 1.125× it). Steps, page tabs, the pager and framed surfaces take the wide column (`--docs-wide`, the measure plus the 252px contents rail). Framed surfaces (code, trays, previews, tables, chart figures, media) hang past both edges by the prose bleed (up to 2rem from 52rem, always leaving a 1rem gutter to the window) and keep their own padding: nothing inside a hanging surface is set back to the text's edge; document steps hang on the end side only, so a step's code ends where every surface ends. Index rows are links, not frames: they keep the column's edges. Where the rail shows (80rem up), a page with contents gives the rail the wide column's room; the article and rail centre together, so every page starts on the same x. Gutters: 20px, 40px from 52rem, then 40→80px beside the sidebar.
+
+   Table placement belongs to the outer surface: a direct `.ui-table`, a
+   `.document-comparison`, or an authored scroll region. A comparison carries the
+   same responsive bleed and vertical rhythm as an ordinary table; its inner
+   `.ui-table` must not bleed again. Transparent Astro wrappers (`astro-island` /
+   `astro-slot`) preserve these edges. Tables inside figures or trays keep their
+   enclosing frame. Validate both table edges against the prose column in
+   `site/tests/document-tables.e2e.mjs`; an overflow-only audit cannot detect a
+   table that is too narrow.
+
 9. **One reading rhythm.** Body 16/32 (line-height 2, `--line`), Han text too; paragraphs part by ¾ line, wide blocks by 1 line, h2 opens on 2 lines and closes on ½ — a section after the first opens on one hairline (`--ui-line-hair`) across the measure, ⅞ line above its heading, none under the page head or after a disclosure that already closes on a hairline — h3 on 1½ and ⅜, h4 on 1¼ and ¼; list items by ¼. Type scale: title 38/44 −.028em · h2 26/35 −.022em · h3 20/28 −.014em · h4 16/24 · lead 18/1.75 · small 14/1.8 · caption 13/1.65 · label 12. The documentation and the blog share it: a post's text is the documentation's measure and prose.
 10. **Converged shadows.** Every layer doubles offset and blur and pulls its spread in by half the offset. No single large blur.
 11. **Purposeful previews.** The stage's contents share the system's visual language, not just its outer frame. Controls that operate a preview use system components; self-contained teaching samples express the same restraint through public preset styles. Departures in color, size or material need a teaching purpose. Optional preview actions start absent: Theme is for a lesson about color schemes, resizing for a demonstrated viewport or container change, and replay for a motion sequence. Ordinary previews inherit the site theme. Source tabs, copying and Generated CSS remain useful inspection tools.
@@ -44,12 +63,13 @@ The approved visual specification is the published "Master CSS Site Design Syste
 
 The shell follows the original documentation layout, refined:
 
-- **Header** 60px, 32px gutters. Search leads the end group as a quiet hairline pill (glass + ⌘K, 30px tall, 11px / 13px insets — the round end takes a little more), 8px before the community icons; a plain glass in a full target on a phone; the homepage's wide header leaves it out. Section links are plain words (body ink, current one in strong ink at medium weight), no pill. The version is plain text with a chevron. End icons are 18px glyphs in 36px targets that only change ink on hover.
+- **Header** 60px, 32px gutters. Community and language actions share square 36px desktop / 44px compact targets, centred 18px Tabler icons at 1.5 stroke, and an 8px gap. Desktop search retains its 30px hairline pill, 16px glass and visible ⌘K; compact search uses the same 44px target and 18px icon as its neighbours; the homepage's wide header leaves it out. Section links are plain words (body ink, current one in strong ink at medium weight), no pill. The version is plain text with a chevron. Version chevrons retain their original muted 12px size; external-link indicators remain small raised 10px marks. Text links/version controls share the target height with content-sized widths. Controls only change ink on hover. The separator has 4px margins plus the 8px control gap on each side.
 - **Sidebar** 276px with a 32px start gutter aligned with the logo; it starts with its first group, whose caption stands level with the page kicker and the contents caption (y = header + 56px). Group captions are muted eyebrows; entries are 14px muted on one hairline guide, 32px rows; the current entry inks a short 2px bar on the guide and takes medium weight.
 - **Contents rail** (252px) is a ruler: h2 entries have 24px ticks and h3 entries have 12px ticks with their right ends aligned before the text; titles share a second edge without indentation. The current entry takes strong ink and medium weight without changing its tick length. 13px entries in 34px rows (44px touch targets); "On this page" is a muted eyebrow on the title edge, level with the page kicker. Long lists fold inactive subsections without adding icons; following the section opens them.
 - **Page head** a muted eyebrow kicker, a regular-weight title (fluid 30–38px), an 18px lead (a second lead line, such as a layout's subtitle, at reading size), then 48px of space — no rule — before the reading starts.
 - **Page tabs** between sibling documents (`Tabs`, `ui-segmented[data-variant="underline"]`) are words on one hairline, the current one underlined in ink — the original's tabs, not a raised segmented thumb.
-- **Search trigger** (`ui-search-trigger`, in the phone menu and on the 404) is a quiet row over one hairline with a flat `⌘K` hint; results in the dialog take a chip wash, never a raised frame.
+- **Compact menu** below 64rem is a full-height modal: Tabler’s two-line menu at 18px / 1.5 stroke becomes a small close glyph in a 44px target, brand stays centred, search sits opposite. Primary links use fluid 36–56px medium-weight type and generous space; chapters belong to the section indexes. Community icons and native preferences sit beneath the navigation, at the bottom when space permits. External community icons carry the same raised 10px marker as header actions, anchored 11px right / 9px above the icon centre. The surface enters over 320ms, links follow at 40ms intervals, and closing takes 180ms; reduced motion removes transitions.
+- **Search trigger** (`ui-search-trigger`, on the 404) is a quiet row over one hairline with a flat `⌘K` hint; results in the dialog take a chip wash, never a raised frame. The desktop dialog footer teaches “Search anytime” with ⌘ + K keycaps on Apple devices or Ctrl + K elsewhere.
 - **Pager** is one hairline over two links, 80px below the article: an eyebrow (Previous / Next) over a 16px title with a muted arrow; ink on hover, no boxes.
 - **Steps** hang on one hairline rail from flat 28px numbered rings (canvas face, strong contour, sans tabular figures) and take the wide column. A step title is 16px medium; its text is 14/1.8. A row step puts its text on two fifths and its code on three once the list is 46rem wide (narrower, the code stacks under its text). A preview after the steps hangs like any surface and the rail runs into it.
 - **Footer** in the documentation takes the article's wide column from the text's edge; elsewhere it is 72rem. Groups keep 11rem columns from the start (`auto-fill`), so a wide footer leaves the rest to the canvas. Link groups (Docs, Resources, Community, Legal — the license and the trademark policy) under strong-ink eyebrows, 14px links on a 32px pitch. One quiet base row under a hairline, every word 12px tracked .04em: the notice at the start, the theme and language preferences at the end, each an icon and its value with no "Theme:" or "Language:" label (the selects keep those names for assistive technology). No search field — the header carries search.

package/src/styles/system/browser.css

@@ -0,0 +1,21 @@
+/* browser: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-browser { position: relative; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-stage); box-shadow: 0 1px 0 var(--ui-lip); }
+  .ui-browser::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ui-line-contour); pointer-events: none; }
+  .ui-browser-bar { display: flex; align-items: center; gap: var(--ui-space-sm); height: 2rem; padding: 0 var(--ui-space-sm); background: var(--ui-surface-tray); }
+  .ui-browser-dots { display: flex; gap: 6px; }
+  .ui-browser-dots > i { width: 9px; height: 9px; border-radius: 50%; background: var(--ui-line-divider); }
+  .ui-browser-body { position: relative; min-height: 12rem; }
+  .ui-browser-body:has(> .ui-browser-viewport) { min-height: 0; overflow-x: auto; scrollbar-width: thin; }
+  .ui-browser-viewport { position: relative; max-width: none; margin-inline: auto; }
+  .ui-browser-viewport > iframe { display: block; width: 100%; border: 0; background: transparent; }
+  .ui-browser-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs) var(--ui-space-sm); padding: var(--ui-space-sm) var(--ui-space-sm) var(--ui-space-xs); }
+  .ui-browser-tools > .ui-segmented > :is(button, a) { min-height: 1.625rem; }
+  .ui-browser-range { display: flex; flex: 1 1 14rem; align-items: center; gap: var(--ui-space-sm); min-width: 0; }
+  .ui-browser-range > .ui-range { flex: 1 1 6rem; min-width: 0; max-width: 12rem; }
+  .ui-browser-range > label { color: var(--ui-text-muted); @apply --ui-label-type; }
+  .ui-browser-tools > output, .ui-browser-range > output { flex: 1 1 100%; color: var(--ui-text-muted); font: var(--ui-weight-regular) .6875rem/1.5 var(--font-family-mono); overflow-wrap: anywhere; }
+  .ui-browser-range > .ui-browser-size { flex: none; font: var(--ui-weight-regular) .75rem/1.5 var(--font-family-sans); font-variant-numeric: tabular-nums; }
+  .ui-resize { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 1rem; cursor: ew-resize; touch-action: none; }
+  .ui-resize::before { content: ""; width: 4px; height: 2.5rem; border-radius: var(--ui-radius-pill); background: var(--ui-line-strong); }
+}

package/src/styles/system/button-feedback.css

@@ -0,0 +1,13 @@
+/* button-feedback: owned component styles; shared definitions come from the foundation. */
+@layer components {
+
+  @media (pointer: coarse) {
+    .ui-button { min-height: 2.75rem; }
+  }
+  .ui-button[data-result] > svg:first-of-type { display: none; }
+  .ui-button:not([data-result]) > .ui-result-icon { display: none; }
+  .ui-button[data-result="success"] { color: var(--ui-status-success); }
+  .ui-button[data-result="error"] { color: var(--ui-status-danger); }
+  .ui-button[data-result="error"] > svg:first-of-type { display: block; }
+  .ui-button[data-result="error"] > .ui-result-icon { display: none; }
+}

package/src/styles/system/callout.css

@@ -0,0 +1,14 @@
+/* callout: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-callout code { padding: .125em .375em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: color-mix(in oklab, var(--ui-text-strong) 60%, var(--ui-text-body)); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .84em/1 var(--font-family-mono); overflow-wrap: anywhere; }
+  .ui-callout { --tone: var(--ui-tone-neutral); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ui-space-sm); padding: .875rem var(--ui-space-md); border-radius: var(--ui-radius-lg);
+    background: color-mix(in oklab, var(--tone) 2.5%, var(--ui-surface-canvas)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 12%, var(--ui-line-contour)); color: var(--ui-text-body); font-size: var(--ui-text-small); line-height: var(--ui-leading-small); }
+  .ui-callout > svg { width: 1rem; height: 1rem; margin-top: .21875rem; color: color-mix(in oklab, var(--tone) 80%, var(--ui-text-strong)); }
+  .ui-callout > div { min-width: 0; overflow-wrap: anywhere; }
+  .ui-callout > div > :first-child { margin-top: 0; } .ui-callout > div > :last-child { margin-bottom: 0; }
+  .ui-callout b { color: var(--ui-text-strong); font-weight: var(--ui-weight-strong); }
+  .ui-callout[data-tone="info"] { --tone: var(--ui-status-info); }
+  .ui-callout[data-tone="success"], .ui-callout[data-tone="do"] { --tone: var(--ui-status-success); }
+  .ui-callout[data-tone="warning"] { --tone: var(--ui-status-warning); }
+  .ui-callout[data-tone="danger"], .ui-callout[data-tone="dont"] { --tone: var(--ui-status-danger); }
+}

package/src/styles/system/chart.css

@@ -0,0 +1,18 @@
+/* chart: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-chart { display: grid; gap: var(--ui-space-md); padding: var(--ui-space-lg); border-radius: var(--ui-radius-xl); @apply --ui-sheet-face; box-shadow: var(--ui-elevation-rise-1); }
+  .ui-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-xs) var(--ui-space-md); }
+  .ui-chart-head b { color: var(--ui-text-strong); font-size: var(--ui-text-small); font-weight: var(--ui-weight-strong); }
+  .ui-chart-head small { display: block; color: var(--ui-text-muted); font: var(--ui-weight-regular) var(--ui-text-caption)/1.5 var(--font-family-sans); font-variant-numeric: tabular-nums; }
+  .ui-chart-row { display: grid; grid-template-columns: minmax(6.5rem, 12rem) minmax(0, 1fr) minmax(4.5rem, auto); align-items: center; gap: var(--ui-space-xs) var(--ui-space-sm); font-size: .8125rem; }
+  .ui-chart-row > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--ui-space-xs); min-width: 0; color: var(--ui-text-strong); overflow-wrap: anywhere; }
+  .ui-chart-row > span:first-child > small { flex-basis: 100%; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1.4 var(--font-family-sans); font-variant-numeric: tabular-nums; }
+  .ui-chart-row > output { color: var(--ui-text-body); font: var(--ui-weight-regular) .8125rem/1 var(--font-family-sans); text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
+  .ui-chart-row > .ui-legend { grid-column: 2 / -1; gap: 2px var(--ui-space-md); font-size: .75rem; }
+  .ui-chart-row > .ui-legend b { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
+  @media (width < 35rem) {
+    .ui-chart-row { grid-template-columns: minmax(0, 1fr) auto; }
+    .ui-chart-row > .ui-bar { grid-column: 1 / -1; grid-row: 2; }
+    .ui-chart-row > .ui-legend { grid-column: 1 / -1; }
+  }
+}

package/src/styles/system/checks.css

@@ -0,0 +1,18 @@
+@prune native;
+/* checks: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-xs); color: var(--ui-text-strong); font-size: var(--ui-text-small); cursor: pointer; }
+  .ui-check > input:not(.ui-switch) { appearance: none; display: grid; place-items: center; flex: none; width: 1.125rem; height: 1.125rem; margin: 0; border-radius: var(--ui-radius-sm); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); cursor: pointer; transition: background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick); }
+  .ui-check > input:not(.ui-switch):not(:checked) { box-shadow: var(--ui-elevation-sink), inset 0 0 0 1px var(--ui-line-divider); }
+  .ui-check > input:not(.ui-switch)::after { content: ""; width: 10px; height: 10px; opacity: 0; background: var(--ui-text-inverse); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+  .ui-check > input:not(.ui-switch):checked { background: var(--ui-surface-ink); box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .16), oklch(100% 0 none)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .5)); }
+  .ui-check > input:not(.ui-switch):checked::after { opacity: 1; }
+  .ui-check > input[type="radio"] { border-radius: 50%; }
+  .ui-check > input[type="radio"]::after { width: 6px; height: 6px; border-radius: 50%; mask: none; }
+  .ui-check > input:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  .ui-switch { position: relative; appearance: none; flex: none; width: 2.25rem; height: 1.375rem; margin: 0; border-radius: var(--ui-radius-pill); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); cursor: pointer; transition: background-color var(--ui-duration-base) var(--ui-ease); }
+  .ui-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)); box-shadow: 0 0 0 1px var(--ui-line-contour), 0 1px 1px var(--ui-shade-1), 0 2px 3px -1px var(--ui-shade-2); transition: translate var(--ui-duration-base) var(--ui-ease); }
+  .ui-switch:checked { background: var(--ui-surface-ink); box-shadow: inset 0 1px 2px oklch(0% 0 none / .3); }
+  .ui-switch:checked::before { translate: .875rem 0; background: light-dark(linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)), linear-gradient(180deg, oklch(26% .0024 265), oklch(20% .002 265))); }
+  .ui-switch:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+}

package/src/styles/system/code-panel.css

@@ -0,0 +1,82 @@
+/* code-panel: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-code { position: relative; min-width: 0; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-code); color: var(--ui-code-text); box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip); }
+  .ui-code { --code-corner: calc(var(--ui-space-md) + var(--ui-text-code) * var(--ui-leading-code) / 2 - 1rem); }
+  .ui-code-bar { display: flex; align-items: center; gap: var(--ui-space-xs); min-height: calc(var(--code-corner) + 2rem); padding: var(--code-corner) var(--code-corner) 0 var(--ui-space-md); }
+  .ui-code-bar > .ui-tabs { flex: 1; min-width: 0; margin-left: calc(var(--code-corner) - var(--ui-space-md)); }
+  .ui-code-file { display: inline-flex; align-items: center; gap: var(--ui-space-xs); flex: 1; min-width: 0; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); }
+  .ui-code-file svg { flex: none; width: 14px; height: 14px; }
+  .ui-code pre { margin: 0; padding: var(--ui-space-md) 0; overflow-x: auto; font: var(--ui-weight-regular) var(--ui-text-code)/var(--ui-leading-code) var(--font-family-mono); tab-size: 2; scrollbar-width: thin; }
+  .ui-code pre:focus-visible { @apply --ui-focus-ring; outline-offset: -4px; border-radius: var(--ui-radius-md); }
+  .ui-code:has(> .ui-code-bar) pre { padding-top: var(--ui-space-2xs); }
+  .ui-code-line { display: block; padding: 0 var(--ui-space-lg) 0 calc(var(--ui-space-md) + var(--code-diff-gutter, 0px)); }
+  .ui-code-line { min-height: 1lh; }
+  .ui-code[data-numbers] { counter-reset: line; }
+  .ui-code[data-numbers] .ui-code-line::before { counter-increment: line; content: counter(line); display: inline-block; width: 1.75rem; margin-right: var(--ui-space-sm); color: var(--ui-text-disabled); text-align: right; user-select: none; }
+  .ui-code-line[data-mark="active"] { background: var(--ui-code-active); box-shadow: inset 2px 0 0 var(--ui-line-mark); }
+  .ui-code-line[data-mark="added"] { background: var(--ui-code-added); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ui-status-success) 70%, transparent); }
+  .ui-code-line[data-mark="removed"] { background: var(--ui-code-removed); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ui-status-danger) 70%, transparent); }
+  .ui-code pre:has(.ui-code-line:is([data-mark="added"], [data-mark="removed"])) { --code-diff-gutter: calc(1ch + var(--ui-space-sm)); }
+  .ui-code-line:is([data-mark="added"], [data-mark="removed"]) { position: relative; min-width: min-content; }
+  .ui-code-line[data-mark="added"]::after, .ui-code-line[data-mark="removed"]::after { position: absolute; top: 0; left: var(--ui-space-md); width: 1ch; text-indent: 0; text-align: center; color: var(--ui-text-disabled); user-select: none; }
+  .ui-code-line[data-mark="added"]::after { content: "+"; }
+  .ui-code-line[data-mark="removed"]::after { content: "−"; }
+  .ui-code-line mark { padding: 1px 2px; border-radius: 3px; background: light-dark(oklch(22% .002 265 / .08), oklch(100% 0 none / .1)); color: inherit; box-shadow: inset 0 -1px 0 var(--ui-line-mark); }
+  .ui-code .t { color: var(--ui-code-function); } .ui-code .a { color: var(--ui-code-property); } .ui-code .s { color: var(--ui-code-string); }
+  .ui-code .p { color: var(--ui-code-punctuation); } .ui-code .k { color: var(--ui-code-keyword); } .ui-code .c { color: var(--ui-code-comment); font-style: italic; } .ui-code .n { color: var(--ui-code-number); }
+  .ui-code > .ui-disclosure { border-top: 1px solid var(--ui-line-hair); }
+  .ui-code > .ui-disclosure > summary { padding-inline: var(--ui-space-md); }
+  .ui-code > .ui-disclosure > pre { padding-top: 0; }
+}
+
+
+/*
+ * Code panels (`ui-code`, styles/system/code.css) as the site renders them: Shiki lines are `ui-code-line` parts, the
+ * copy action sits in the bar or, without one, in the corner, and tab panels all show on paper and without scripts.
+ */
+@layer components {
+  /* The file's name keeps its width; a long result wraps in the room left beside the copy button. */
+  .ui-code-bar > .ui-code-file { flex: 1 0 auto; }
+  .ui-code-bar > .ui-copy { flex: 0 1 auto; min-width: 0; margin-left: auto; }
+  /* Without a bar the copy takes the panel's corner (`--code-corner`, code.css). A long line scrolls under it: the panel's own face fades in behind the button and runs to the edge, so code never runs through it. */
+  .ui-code > .ui-copy { position: absolute; z-index: 1; top: var(--code-corner); right: var(--code-corner); padding-left: var(--ui-space-sm); border-radius: var(--ui-radius-md); background: linear-gradient(90deg, transparent, var(--ui-surface-code) var(--ui-space-sm));
+    /* The face runs on to the panel's contour (1px short of the edge), so a scrolled line never shows again past the button. */
+    box-shadow: calc(var(--code-corner) - 1px) 0 0 var(--ui-surface-code); }
+  .ui-code:has(> .ui-copy) .ui-code-line { padding-right: 3rem; }
+  /* A shell command is read whole: it wraps under a hanging indent instead of hiding its flags behind the copy button. */
+  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre, .ui-code[data-lang="sh"] > pre, .ui-code[data-lang="shell"] > pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre .ui-code-line, .ui-code:is([data-lang="sh"], [data-lang="shell"]) > pre .ui-code-line { padding-left: calc(var(--ui-space-md) + var(--code-diff-gutter, 0px) + 2ch); text-indent: -2ch; }
+  /* Flags wrap whole: a token never breaks at its own hyphen, so `--yes` cannot split into `-` and `-yes`. */
+  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre .ui-code-line > span, .ui-code:is([data-lang="sh"], [data-lang="shell"]) > pre .ui-code-line > span { display: inline-block; text-indent: 0; }
+  /* Plain text, such as a prompt for an agent, is prose set in mono: it wraps at the panel like prose. */
+  :is(.ui-code, [role="tabpanel"])[data-lang="text"] > pre { white-space: pre-wrap; overflow-wrap: break-word; }
+
+  /* A Generated CSS disclosure right after its source closes the same panel: one frame, the output under a hairline,
+     as in a demo tray. Alone (after a table or a paragraph) it stays a quiet disclosure. */
+  .ui-prose > .ui-code:has(+ .ui-disclosure[data-generated]) { margin-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: inset 1px 0 0 var(--ui-line-contour), inset -1px 0 0 var(--ui-line-contour), inset 0 1px 0 var(--ui-line-contour); }
+  .ui-prose > .ui-code + .ui-disclosure[data-generated] {
+    max-width: none; margin-top: 0; margin-inline: calc(var(--bleed) * -1); padding-inline: var(--ui-space-md);
+    border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl); background: var(--ui-surface-code);
+    box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip);
+  }
+  .ui-prose > .ui-code + .ui-disclosure[data-generated] > summary { margin-inline: calc(var(--ui-space-md) * -1); padding-inline: var(--ui-space-md); box-shadow: inset 0 1px 0 var(--ui-line-hair); }
+  .ui-prose > .ui-code + .ui-disclosure[data-generated] > .ui-code { margin-inline: calc(var(--ui-space-md) * -1); border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl); background: transparent; box-shadow: inset 0 1px 0 var(--ui-line-hair); }
+
+  /* @WARN and @ERROR marks: a wavy underline in the status tone instead of a wash. */
+  .ui-code-line mark[data-tone] { padding: 0; background: none; box-shadow: none; text-decoration: underline wavy 1px; text-underline-offset: 3px; }
+  .ui-code-line mark[data-tone="warning"] { text-decoration-color: var(--ui-status-warning); }
+  .ui-code-line mark[data-tone="danger"] { text-decoration-color: var(--ui-status-danger); }
+  /* [!code focus] blurs the other lines until the pointer reaches the code. */
+  .ui-code pre.has-focused .ui-code-line { transition: filter var(--ui-duration-base) var(--ui-ease); }
+  .ui-code pre.has-focused:not(:hover, :focus-visible) .ui-code-line:not(.focus) { filter: blur(3px); }
+  .ui-code ::selection { background: color-mix(in oklab, var(--ui-code-function) 22%, transparent); }
+  @media print {
+    .ui-code { break-inside: avoid; }
+    /* Paper cannot scroll: keep complete commands and long source lines readable. */
+    .ui-code pre { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
+    .ui-code pre.has-focused .ui-code-line { filter: none; }
+  }
+  @media (prefers-reduced-motion: reduce) { .ui-code pre.has-focused .ui-code-line { transition: none; } }
+  @media (forced-colors: active) { .ui-code { border: 1px solid CanvasText; } }
+
+}

package/src/styles/system/code-tabs.css

@@ -0,0 +1,40 @@
+/* code-tabs: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  .ui-tabs::-webkit-scrollbar { display: none; }
+  .ui-tabs > [role="tab"] {
+    appearance: none; display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 2rem; padding: 0 .625rem; border: 0; border-radius: var(--ui-radius-md);
+    background: transparent; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); cursor: pointer; transition: color var(--ui-duration-quick), background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
+  }
+  .ui-tabs > [role="tab"] svg { width: 14px; height: 14px; }
+  .ui-tabs > [role="tab"]:hover { color: var(--ui-text-strong); }
+  .ui-tabs > [role="tab"][aria-selected="true"] { background: var(--ui-surface-chip); color: var(--ui-text-strong); box-shadow: inset 0 0 0 1px var(--ui-line-hair); }
+  .ui-tabs > [role="tab"]:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
+}
+
+
+/*
+ * Code panels (`ui-code`, styles/system/code.css) as the site renders them: Shiki lines are `ui-code-line` parts, the
+ * copy action sits in the bar or, without one, in the corner, and tab panels all show on paper and without scripts.
+ */
+@layer components {
+  /* The file's name keeps its width; a long result wraps in the room left beside the copy button. */
+  /* Without a bar the copy takes the panel's corner (`--code-corner`, code.css). A long line scrolls under it: the panel's own face fades in behind the button and runs to the edge, so code never runs through it. */
+  /* A shell command is read whole: it wraps under a hanging indent instead of hiding its flags behind the copy button. */
+  /* Flags wrap whole: a token never breaks at its own hyphen, so `--yes` cannot split into `-` and `-yes`. */
+  /* Plain text, such as a prompt for an agent, is prose set in mono: it wraps at the panel like prose. */
+
+  /* A Generated CSS disclosure right after its source closes the same panel: one frame, the output under a hairline,
+     as in a demo tray. Alone (after a table or a paragraph) it stays a quiet disclosure. */
+
+  /* @WARN and @ERROR marks: a wavy underline in the status tone instead of a wash. */
+  /* [!code focus] blurs the other lines until the pointer reaches the code. */
+
+  [data-code-tabs] > [role="tabpanel"] > .ui-code-file { display: none; }
+  @media (scripting: none), print {
+    [data-code-tabs] > .ui-code-bar { display: none; }
+    [data-code-tabs] > [role="tabpanel"][hidden] { display: block; }
+    [data-code-tabs] > [role="tabpanel"] > .ui-code-file { display: flex; padding: var(--ui-space-sm) var(--ui-space-md) 0; }
+  }
+
+}