@master/internal-site 0.2.5 → 0.2.7

package/src/styles/system/tokens.css

@@ -1,13 +1,4 @@
-/*
- * Moonstone / Obsidian — site tokens.
- * One light source above and slightly left. Every surface is a step on one ladder:
- *   canvas (page) → tray (recessed holder) → stage (lit well inside a tray) → sheet (raised face) → float (overlay)
- *   well (sunken field) sits below its surroundings.
- * Neutrals are the preset's zinc (hue 265, chroma under .003): light mode is a clean pearl, dark mode a zinc-95
- * obsidian whose surfaces step apart and keep a legible contour. Lines and shadows carry no hue of their own.
- * Tokens are namespaced --ui-* and are not utility tokens: content keeps teaching the preset vocabulary.
- * The interface is monochrome. Hues are reserved for teaching specimens and status; brand gold for the homepage and brand moments.
- */
+/* Site composition roles. Common materials alias @master/ui; reading, teaching scenes and brand artwork stay site-owned. No independent UI theme values live here. */
 @layer theme {
 :root, :host {
 
@@ -26,16 +17,16 @@
   --ui-text-eyebrow: .6875rem;  --ui-tracking-eyebrow: .14em;
   --ui-text-code: .8125rem;     --ui-leading-code: 1.7;
   /* English runs a step lighter than the regular cut, as the original site did; Han text keeps 400. */
-  --ui-weight-regular: 400; --ui-weight-medium: 460; --ui-weight-strong: 500; --ui-weight-heading: 400;
+  --ui-weight-regular: 400; --ui-weight-medium: var(--font-weight-control); --ui-weight-strong: 500; --ui-weight-heading: 400;
 
   /* Shape: small radii that nest by a 4px inset (outer = inner + inset) */
   --ui-inset: 4px;
-  --ui-radius-xs: 3px;    /* inline code, kbd */
-  --ui-radius-sm: 4px;    /* badges, chips, tooltips, tabs inside a bar */
-  --ui-radius-md: 6px;    /* controls, inputs, nav entries */
-  --ui-radius-lg: 8px;    /* small cards, menus, callouts, pager */
-  --ui-radius-xl: 10px;   /* stage, sheet, code window, table */
-  --ui-radius-2xl: 14px;  /* tray, dialog */
+  --ui-radius-xs: var(--radius-chip);    /* inline code, kbd */
+  --ui-radius-sm: var(--radius-control-sm);    /* badges, chips, tooltips, tabs inside a bar */
+  --ui-radius-md: var(--radius-control);    /* controls, inputs, nav entries */
+  --ui-radius-lg: var(--radius-control-lg);    /* small cards, menus, callouts, pager */
+  --ui-radius-xl: var(--radius-surface);   /* stage, sheet, code window, table */
+  --ui-radius-2xl: calc(var(--radius-surface) + var(--ui-inset));  /* tray, dialog */
   --ui-radius-pill: 999px;
 
   /* Rhythm */
@@ -43,9 +34,9 @@
   --ui-space-lg: 1.5rem; --ui-space-xl: 2rem; --ui-space-2xl: 3rem; --ui-space-3xl: 4rem;
 
   /* Motion: one easing family; interaction is quick, explanation calm */
-  --ui-ease: cubic-bezier(.22, 1, .36, 1);
+  --ui-ease: var(--easing-glide);
   --ui-ease-inout: cubic-bezier(.65, 0, .35, 1);
-  --ui-duration-press: 60ms; --ui-duration-quick: 160ms; --ui-duration-base: 280ms; --ui-duration-slow: 640ms;
+  --ui-duration-press: var(--duration-press); --ui-duration-quick: var(--duration-quick); --ui-duration-base: var(--duration-base); --ui-duration-slow: 640ms;
 }
 :root:lang(en) { --ui-weight-regular: 350; }
 /* Han text has no capitals: an eyebrow keeps a readable size and opens its characters a little less. */
@@ -53,57 +44,51 @@
 
 :root, :host, .light, .dark {
   /* Surfaces */
-  --ui-surface-canvas:   light-dark(oklch(98.6% .0008 265), oklch(19.4% .0019 265));
-  --ui-surface-tray:     light-dark(oklch(96% .0012 265),   oklch(17.4% .0018 265));
-  --ui-surface-stage:    light-dark(oklch(98.9% .0006 265), oklch(20.4% .002 265));
-  --ui-surface-sheet:    light-dark(oklch(100% 0 none),     oklch(24.2% .0022 265));
-  --ui-surface-sheet-lo: light-dark(oklch(99.3% .0005 265), oklch(22.8% .0021 265));
-  --ui-surface-well:     light-dark(oklch(96.6% .0011 265), oklch(16.4% .0017 265));
-  --ui-surface-well-hover: light-dark(oklch(95.8% .0012 265), oklch(15.4% .0016 265));
-  --ui-surface-float:    light-dark(oklch(100% 0 none),     oklch(26.4% .0024 265));
-  --ui-surface-chip:     light-dark(oklch(96.5% .0011 265), oklch(100% 0 none / .07));
-  --ui-surface-code:     light-dark(oklch(99.6% .0004 265), oklch(21.2% .002 265));
-  --ui-surface-ink:      light-dark(oklch(22% .0022 265),   oklch(95% .0012 265));
-  --ui-surface-scrim:    light-dark(oklch(18% 0 none / .16), oklch(0% 0 none / .55));
+  --ui-surface-canvas: var(--color-surface-base);
+  --ui-surface-tray: var(--color-surface-tray);
+  --ui-surface-stage: var(--color-surface-raised-low);
+  --ui-surface-sheet: var(--color-surface-raised);
+  --ui-surface-sheet-lo: var(--color-surface-raised-low);
+  --ui-surface-well: var(--color-surface-inset);
+  --ui-surface-well-hover: var(--color-surface-inset-hover);
+  --ui-surface-float: var(--color-surface-floating);
+  --ui-surface-chip: var(--color-surface-chip);
+  --ui-surface-code: var(--color-surface-raised-low);
+  --ui-surface-ink: var(--color-surface-inverse);
+  --ui-surface-scrim: var(--color-surface-scrim);
 
   /* Lines: neutral ink in light mode, white in dark mode, where each step is a little firmer so edges stay legible */
-  --ui-line-hair:    light-dark(oklch(22% .002 265 / .065), oklch(100% 0 none / .075));
-  --ui-line-contour: light-dark(oklch(22% .002 265 / .095), oklch(100% 0 none / .11));
-  --ui-line-divider: light-dark(oklch(22% .002 265 / .12),  oklch(100% 0 none / .13));
-  --ui-line-strong:  light-dark(oklch(22% .002 265 / .2),   oklch(100% 0 none / .22));
-  --ui-line-mark:    light-dark(oklch(22% .002 265 / .3),   oklch(100% 0 none / .32));
+  --ui-line-hair: var(--color-line-hair);
+  --ui-line-contour: var(--color-line-contour);
+  --ui-line-divider: var(--color-line-divider);
+  --ui-line-strong: var(--color-line-strong);
+  --ui-line-mark: var(--color-line-mark);
 
   /* Text: a soft ink, never pure black or white */
-  --ui-text-strong:   light-dark(oklch(21% .0022 265),  oklch(95% .0012 265));
-  --ui-text-body:     light-dark(oklch(39.8% .0028 265), oklch(80% .0025 265));
-  --ui-text-muted:    light-dark(oklch(48.6% .003 265),  oklch(68.6% .0028 265));
-  --ui-text-disabled: light-dark(oklch(68.6% .0028 265), oklch(48.6% .003 265));
-  --ui-text-inverse:  light-dark(oklch(98.6% .0008 265), oklch(19.4% .0019 265));
-  --ui-focus: light-dark(oklch(24.6% .0022 265), oklch(93.2% .0015 265));
+  --ui-text-strong: var(--color-text-strong);
+  --ui-text-body: var(--color-text-body);
+  --ui-text-muted: var(--color-text-muted);
+  --ui-text-disabled: var(--color-text-disabled);
+  --ui-text-inverse: var(--color-text-inverse);
+  --ui-focus: var(--color-focus);
 
   /* Light */
-  --ui-highlight: light-dark(oklch(100% 0 none / .95), oklch(100% 0 none / .07));
-  --ui-lip:       light-dark(oklch(100% 0 none / .9),  oklch(100% 0 none / .04));
-  --ui-shade-1: light-dark(oklch(18% 0 none / .07),  oklch(0% 0 none / .55));
-  --ui-shade-2: light-dark(oklch(18% 0 none / .05),  oklch(0% 0 none / .4));
-  --ui-shade-3: light-dark(oklch(18% 0 none / .04),  oklch(0% 0 none / .34));
-  --ui-shade-4: light-dark(oklch(18% 0 none / .035), oklch(0% 0 none / .3));
-  --ui-shade-5: light-dark(oklch(18% 0 none / .03),  oklch(0% 0 none / .28));
+  --ui-highlight: var(--color-highlight);
+  --ui-lip: var(--color-lip);
+  --ui-shade-1: var(--color-shade-1);
+  --ui-shade-2: var(--color-shade-2);
+  --ui-shade-3: var(--color-shade-3);
+  --ui-shade-4: var(--color-shade-4);
+  --ui-shade-5: var(--color-shade-5);
 
   /* Elevation: sink < flat < rise-1 < rise-1h < rise-2 < rise-3 < overlay. Offset and blur double; spread pulls in by half. */
-  --ui-elevation-sink: inset 0 1px 2px light-dark(oklch(18% 0 none / .05), oklch(0% 0 none / .45)), inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip);
-  --ui-elevation-flat: 0 0 0 1px var(--ui-line-contour);
-  --ui-elevation-rise-1: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
-    0 1px 1px -.5px var(--ui-shade-1), 0 2px 2px -1px var(--ui-shade-2), 0 4px 4px -2px var(--ui-shade-3);
-  --ui-elevation-rise-1h: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-strong),
-    0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3), 0 10px 10px -5px var(--ui-shade-4);
-  --ui-elevation-rise-2: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
-    0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3),
-    0 12px 12px -6px var(--ui-shade-4), 0 24px 24px -12px var(--ui-shade-5);
-  --ui-elevation-rise-3: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
-    0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3),
-    0 12px 12px -6px var(--ui-shade-4), 0 24px 24px -12px var(--ui-shade-4), 0 48px 48px -24px var(--ui-shade-5);
-  --ui-elevation-overlay: var(--ui-elevation-rise-3), 0 64px 96px -32px light-dark(oklch(18% 0 none / .08), oklch(0% 0 none / .5));
+  --ui-elevation-sink: var(--shadow-pressed);
+  --ui-elevation-flat: var(--shadow-flat);
+  --ui-elevation-rise-1: var(--shadow-raised);
+  --ui-elevation-rise-1h: var(--shadow-raised-hover);
+  --ui-elevation-rise-2: var(--shadow-lifted);
+  --ui-elevation-rise-3: var(--shadow-floating);
+  --ui-elevation-overlay: var(--shadow-overlay);
 
   /* Stage lighting */
   --ui-stage-light: radial-gradient(110% 80% at 18% -14%, light-dark(oklch(100% 0 none / .9), oklch(100% 0 none / .04)), transparent 60%),
@@ -119,7 +104,7 @@
   --ui-tone-red:     light-dark(oklch(54% .17 25),  oklch(74% .14 22));
 
   /* Status — callouts, diffs, results */
-  --ui-status-info: var(--ui-tone-blue); --ui-status-success: var(--ui-tone-green); --ui-status-warning: var(--ui-tone-amber); --ui-status-danger: var(--ui-tone-red);
+  --ui-status-info: var(--color-info); --ui-status-success: var(--color-success); --ui-status-warning: var(--color-warning); --ui-status-danger: var(--color-danger);
 
   /* Brand gold — homepage and brand moments only */
   --ui-gold-face: linear-gradient(180deg, oklch(92.4% .085 88) 0%, oklch(86.5% .128 82) 46%, oklch(79% .142 75) 100%);

package/src/styles/system/tooltip.css

@@ -1,6 +1,4 @@
-/* tooltip: owned component styles; shared definitions come from the foundation. */
+@import '@master/ui/components/tooltip.css';
 @layer components {
-  .ui-tooltip { position: absolute; z-index: 60; padding: .3125rem .5rem; border-radius: var(--ui-radius-sm); background: var(--ui-surface-ink); color: var(--ui-text-inverse); box-shadow: 0 1px 2px var(--ui-shade-1), 0 4px 10px -4px var(--ui-shade-2); font: var(--ui-weight-regular) .71875rem/1.2 var(--font-family-sans); white-space: nowrap; pointer-events: none; }
-  .ui-tooltip[data-side="bottom"]::before { content: ""; position: absolute; bottom: 100%; left: 50%; translate: -50% 0; border: 4px solid transparent; border-bottom-color: var(--ui-surface-ink); }
-  .ui-tooltip > .ui-kbd { height: 1.125rem; min-width: 1.125rem; margin-left: 6px; background: color-mix(in oklab, var(--ui-text-inverse) 14%, transparent); color: var(--ui-text-inverse); box-shadow: none; }
+  .ui-tooltip { position: absolute; z-index: 60; position-area: none; inset: auto; margin: 0; scale: none; pointer-events: none; }
 }

package/src/styles/system/tray-layout.css

@@ -0,0 +1,20 @@
+/* tray: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-tray { margin: 0; }
+  .ui-tray-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-xs) var(--ui-space-md); min-height: 2.75rem; padding: var(--ui-space-sm) var(--ui-space-md); }
+  .ui-tray-title { min-width: 0; margin: 0; color: var(--ui-text-strong); font-size: .8125rem; font-weight: var(--ui-weight-medium); line-height: 1.4; letter-spacing: 0; }
+  .ui-tray-description { margin: 2px 0 0; color: var(--ui-text-muted); font-size: .75rem; line-height: 1.5; }
+  .ui-tray-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs); }
+  .ui-tray-head > :is(.btn, .ui-tray-tools) { margin-block: calc(-1 * var(--ui-space-sm)); }
+  .ui-tray-caption { margin: 0; padding: var(--ui-space-sm) var(--ui-space-md); color: var(--ui-text-muted); font-size: .78125rem; line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; }
+  .ui-tray-caption code { color: var(--ui-text-body); }
+  .ui-tray > * + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) { margin-top: var(--ui-inset); }
+  .ui-tray > .ui-tray-head + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) { margin-top: 0; }
+  .ui-tray > .ui-callout { margin-top: var(--ui-inset); border-radius: var(--ui-radius-xl); }
+  .ui-tray > .ui-disclosure > summary { padding-inline: var(--ui-space-sm); }
+  .ui-tray .ui-stage { box-shadow: none; }
+  .ui-tray:has(> .ui-browser:only-child) { padding: 0; border-radius: var(--ui-radius-xl); background: none; box-shadow: none; }
+  .ui-tray .ui-browser[data-variant="plain"]::after { content: none; }
+  .ui-tray > .ui-browser[data-variant="plain"]:only-child::after { content: ""; }
+  .ui-tray > :has(> .ui-browser-tools:last-child) + .ui-tray-caption, .ui-tray > .ui-browser-tools + .ui-tray-caption { padding-top: 0; }
+}

package/src/styles/system/tray.css

@@ -1,20 +1,2 @@
-/* tray: owned component styles; shared definitions come from the foundation. */
-@layer components {
-  .ui-tray { position: relative; min-width: 0; margin: 0; padding: var(--ui-inset); border-radius: var(--ui-radius-2xl); background: var(--ui-surface-tray); color: var(--ui-text-body); box-shadow: inset 0 0 0 1px var(--ui-line-hair), 0 1px 0 var(--ui-lip); }
-  .ui-tray-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-xs) var(--ui-space-md); min-height: 2.75rem; padding: var(--ui-space-sm) var(--ui-space-md); }
-  .ui-tray-title { min-width: 0; margin: 0; color: var(--ui-text-strong); font-size: .8125rem; font-weight: var(--ui-weight-medium); line-height: 1.4; letter-spacing: 0; }
-  .ui-tray-description { margin: 2px 0 0; color: var(--ui-text-muted); font-size: .75rem; line-height: 1.5; }
-  .ui-tray-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs); }
-  .ui-tray-head > :is(.ui-button, .ui-tray-tools) { margin-block: calc(-1 * var(--ui-space-sm)); }
-  .ui-tray-caption { margin: 0; padding: var(--ui-space-sm) var(--ui-space-md); color: var(--ui-text-muted); font-size: .78125rem; line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; }
-  .ui-tray-caption code { color: var(--ui-text-body); }
-  .ui-tray > * + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) { margin-top: var(--ui-inset); }
-  .ui-tray > .ui-tray-head + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) { margin-top: 0; }
-  .ui-tray > .ui-callout { margin-top: var(--ui-inset); border-radius: var(--ui-radius-xl); }
-  .ui-tray > .ui-disclosure > summary { padding-inline: var(--ui-space-sm); }
-  .ui-tray .ui-stage { box-shadow: none; }
-  .ui-tray:has(> .ui-browser:only-child) { padding: 0; border-radius: var(--ui-radius-xl); background: none; box-shadow: none; }
-  .ui-tray .ui-browser[data-variant="plain"]::after { content: none; }
-  .ui-tray > .ui-browser[data-variant="plain"]:only-child::after { content: ""; }
-  .ui-tray > :has(> .ui-browser-tools:last-child) + .ui-tray-caption, .ui-tray > .ui-browser-tools + .ui-tray-caption { padding-top: 0; }
-}
+@import '@master/ui/components/surface.css';
+@import './tray-layout.css';

package/src/styles/system/tray.ts

@@ -0,0 +1,3 @@
+// Module imports share canonical UI styles across site compositions.
+import '@master/ui/components/surface.css'
+import './tray-layout.css'

package/src/demo/DemoScrollArea.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import '@master/internal-site/styles/system/scroll.css'
-
-  import '@master/internal-site/styles/system/specimens.css'
-  import type { Snippet } from 'svelte'
-  import type { HTMLAttributes } from 'svelte/elements'
-  import { styleText, type DemoStyle } from '@master/internal-site/demo/style.ts'
-
-  /** A local, keyboard-reachable scroll region. Name it with aria-label. */
-  let { class: className, tabindex = 0, style, children, ...props }: Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
-    style?: DemoStyle
-    children?: Snippet
-  } = $props()
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div {...props} {tabindex} class={['ui-scroll', className]} style={styleText(style)}>{@render children?.()}</div>

package/src/examples/scene.css

@@ -1,3 +0,0 @@
-/* The view transition scenes render system sheets and controls; bare examples load them without the site shell. */
-@import '@master/internal-site/styles/system/surfaces.css';
-@import '@master/internal-site/styles/system/controls.css';

package/src/styles/system/DESIGN.md

@@ -1,128 +0,0 @@
-# Site design system: Moonstone / Obsidian
-
-The site's interface vocabulary. Light mode is moonstone (a clean zinc pearl), dark mode is obsidian (zinc-95 glass). The character is restrained and soft: light regular type, hairline contours, small radii, ink rather than blue. The homepage may compose its own layouts but uses these tokens.
-
-## Files
-
-| File | Scope | Loaded |
-| --- | --- | --- |
-| `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 |
-| `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 foundation → interface → documents → component styles in that order:
-
-- **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.
-
-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 the pre-rendered Master CSS of a page.
-
-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.
-
-## Rules
-
-1. **Monochrome interface.** Chrome uses ink and pearl only. Hue appears in teaching specimens (`--ui-tone-*`, always named by a legend or label) and status (`--ui-status-*`). Brand gold (`data-variant="gold"`) belongs to the homepage and the brand page, one gold focus per view.
-2. **Zinc neutrals.** Every neutral is the preset's zinc: hue 265 at chroma .0005–.003. Lines and shadows carry no hue of their own (`oklch(22% .002 265 / α)` and `oklch(18% 0 none / α)` in light mode, white and black alphas in dark mode). No blue sheen.
-3. **One material ladder.** canvas → tray → stage → sheet → float; a well sits below its surroundings. Never invent a surface color. Light: canvas 98.6 · tray 96 · stage 98.9 · sheet 100 · well 96.6 · code 99.6. Dark: canvas 19.4 (zinc-95) · tray 17.4 · stage 20.4 · sheet 24.2 · float 26.4 · well 16.4 · code 21.2.
-4. **Legible dark edges.** Dark lines are firmer than light ones so surfaces never blur into each other: hair .075 · contour .11 · divider .13 · strong .22 · mark .32 (white alpha); light: .065 · .095 · .12 · .2 · .3.
-5. **Elevation order.** sink < flat < rise-1 < rise-1h < rise-2 < rise-3 < overlay. Hover lifts 0.5px to rise-1h; press sinks to the well. Do not express state by changing hue.
-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.
-
-## Shell
-
-The shell follows the original documentation layout, refined:
-
-- **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.
-- **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.
-
-## Markup
-
-| Layer | Convention |
-| --- | --- |
-| Root | One class per component, prefixed `ui-` |
-| Part | `ui-<component>-<part>`, used only inside that component |
-| Variant | Fixed vocabulary on data attributes: `data-variant`, `data-size`, `data-tone`, `data-elevation`, `data-background`, `data-padding`, `data-density`, `data-shape` |
-| State | Native pseudo-classes and ARIA: `aria-pressed`, `aria-selected`, `aria-current`, `aria-checked`, `[open]`, `:checked`, `:disabled`. `data-state` only to show a static state in documentation; `data-result` for an action's outcome |
-| Tokens | `--ui-*` roles; never raw palette steps in component CSS |
-| Utilities | Master CSS classes compose layout inside content and specimens. They do not paint components, and shell components do not carry long utility lists |
-| React | Components map one-to-one to classes; props only become data attributes |
-
-Content and example markup keep teaching the preset vocabulary (`bg-surface-raised`, `shadow-lg`, …); `--ui-*` tokens are deliberately not utility tokens.
-
-## Decisions and rejected directions
-
-- **Owner direction (2026-11-01 refinement, second pass):** the layout had regressed against a mature documentation site: mixed measures (41rem prose, full-width rules and pager, code bleeding 32px past both edges), a cramped footer, missing tracking, captions competing with entries. Continue the system and refine; captions may be uppercase with proper tracking.
-- Decided (round 1): one 46rem column with no bleed; the page head's closing hairline and the installation layout's italic subtitle removed (the subtitle is now the page head's second lead line); tracked sans eyebrows for group and page captions; borderless pager; footer regrouped into three columns with the search field removed.
-- Rejected (round 1): keeping a 41rem text measure inside a wider column for code and examples — two right edges was the regression the owner saw. A 48rem column (Tailwind's) — at 16px light text it runs past 95 characters a line; 46rem keeps about 88.
-- Rejected (round 1): centring a contents-less page in the full main area — the column jumped sideways between the Installation tabs and the next document.
-- **Owner correction (round 2):** some components bled past the text on purpose — Installation suits the original wider layout, and the messiness came from squeezing steps, previews and code into the reading column. Search moves from the sidebar to the header's end, low-key.
-- Decided (round 2): the two-width grid above, restoring the pre-Moonstone structure (text at 41rem, steps and surfaces wide, previews and code hanging 32px) with every edge aligned; the Installation content back to its original order; search as a header pill; index cards as free-standing hairline sheets (the tray showed empty grey cells under a short last row); rules an author sets before a section heading render as space; list markers in sans (filled disc, tabular figures); code in table cells as a fill without a hairline.
-- Rejected (round 2): one 44–46rem column for everything (round 1) — it cramped steps beside their code and made previews small; the owner preferred the original's breadth. A 42rem text measure inside a 46rem column (critique) — two right edges a few pixels apart read as misalignment; the measure and the wide column now differ by a whole rail.
-- Rejected (round 2): a search field in the sidebar's head — it pushed every group down and duplicated the header's job.
-- Decided (round 3): the corner copy button sits on the first code line's centre and the panel's face fades in behind it, so a long line scrolls under it without running through the glass; a copy group's instruction reads as a sans caption, not as a right-aligned mono status; the 404 search field is 20rem; chart labels and figure notes take the hang.
-- Rule (round 2): a rounded control's inner space is measured, not eyeballed — ink to edge on both sides; a pill's round end gets 1–2px more than its flat-feeling side.
-- **Owner direction (round 4, documentation and blog together):** a surface that hangs wide on purpose must not pull its contents back; the blog's frame opens wider while its text keeps the measure; bolder eyebrow tracking; a 12px tracked footer base row with the license and trademark links merged into the groups; body text at line-height 2 for air; fewer lines inside the browser chrome; a tray and its stage are already two layers, so nothing inside them may form a third.
-- Decided (round 4): `--hang` removed — code lines, file names, table cells, tray heads and captions, chart padding and figure captions keep their own insets; the blog post shares the documentation's 41rem measure inside a frame with 5rem of room on each side (from 64rem); code, examples, media and the next read hang the documentation's 2rem past the text, short of the frame, and the post's header steps out to that same edge with a smaller (28–44px) title that never runs past it and an italic description; the post's close mirrors the header — an eyebrow, the next read as an open title with an italic description, marked on hover by the index's artboard corners, then the way back under one hairline — instead of a raised card; its contents ruler drops the rail's inset so titles keep their room; the browser is one contour drawn over the window, a tray-tone toolbar and a plain address field, and a tray holding only a browser lends it its place without a frame; inside a tray the stage, the source code and its generated-CSS disclosure are told apart by tone, not rings, so the tray's ring is the example's one edge and a framed subject on the stage is the only line within (this reverses round 2's choice to keep the stage contour: the owner judged the third nested line the bigger problem); `DemoAsset` turns the stage itself light or dark instead of placing a sheet on it; a rule before a legacy anchor and its section heading is space only, as before a heading.
-- Rejected (round 4): a toolbar hairline and a sunken address well in the browser chrome — with the tray ring and the window contour they made four nested lines around one example.
-- **Owner direction (round 5, previews):** previews stay brief. No browser chrome unless the viewport is the lesson (`DemoViewport` shows it only when `responsive`; every other preview is `ui-browser[data-variant="plain"]`, a stage parted from the tray by tone), and never an address in it — the tray head names the document and the live width reads beside the range. No Theme toggle unless the example is about color schemes. Selected code tabs take the chip wash with an inset hairline: the tab row scrolls and clips outer shadows, and a raised sheet face is the code panel's own tone.
-- Decided (round 5): every code panel shares one corner (`--code-corner`, ≈11px): the copy action is centred on the first row (the bar, or the first code line) and set in from the end by the same distance; without a bar the code sits in 16px above and below. File names and a prompt's title start on the code's 16px edge; a tab chip is as tall as the copy button (32px) and sits the corner's distance from the start and the top, mirroring the copy action (owner: equal left and top).
-- **Owner direction (round 5, code titles):** a code bar appears only when it carries information — tabs that switch sources, a real file path, or a before/after pair's labels. No language or tool titles (`HTML`, `CSS`, `TypeScript`, `Source`, `Generated CSS`, `Terminal`, `prompt`); the project's CSS is "CSS", never the old "Configuration".
-
-- Decided (round 6, overviews): the Guide and Reference overviews (`DocumentationIndex`) read as a book's contents instead of a card grid. The section cards repeated the catalog below them, and a wall of raised sheets with uneven empty cells was the boxed look the shell had already left behind. Now: a numbered directory of sections on hairlines (the row's line inks under the pointer, like the contents ruler) closed by the cross-link on its own row; the view switch is the underline tabs on the toolbar's hairline under an eyebrow; each section a ruled spread whose number, name, summary and group shortcuts stay sticky beside its entries from 44rem; described entries as ruled rows (title over summary, an arrow stepping in); bare links in columns with the hanging wash; the A–Z view as a book's index with letters in columns. Section icons removed — the numbers order the sections.
-- Rejected (round 6): keeping the icon cards and only flattening them — the duplication between the section cards and the sections remained the problem.
-- **Owner direction (2026-11-01 polish):** return the sidebar, contents rail and header to the original documentation's layout; light regular type; finer spacing and rhythm; smaller radii; zinc rather than cool neutrals; clearer dark edges; restrained and soft overall. This overrides the approved spec's 4/6/10/14/18/24 radii, 520/560/600 weights, hue-255 pearl and mono uppercase labels.
-- Rejected: semibold (600) headings and 560 labels — too heavy against the 350 reading text, the "template" look the owner disliked.
-- Rejected: mono uppercase tracked eyebrows for group captions, table heads and kickers — read as an AI-made signature; captions are small sans now.
-- Rejected: the raised-sheet pill for the current sidebar entry and the sunken well for the current header link — the original ink bar and ink word are quieter.
-- Rejected: hue 255 pearl with a .012-chroma ink for lines and .022-chroma shadows — the visible blue cast made the interface cold.
-- Rejected: a darker obsidian canvas (17.4%) with .085 contours — surfaces and edges blurred together; the zinc-95 canvas with firmer lines separates them without raising the noise.
-- Rejected (round 2): a shorter 48px phone header — the blog and homepage offsets are built on the 60px header, and the gain was small.
-- Rejected (round 2): removing the tray's inner stage contour to avoid "card in card" — the tray is the system's example frame and the stage edge is what separates specimen from caption; instead the dark tray was lifted to 17.4% so it no longer reads as a hole.
-- Rejected (round 2): unframed tables as in the original — the framed sheet keeps sticky heads and horizontal scroll legible; its radius and contour are now small and quiet.
-- Rejected (round 3): a dark stage darker than the canvas (18.4% under a .12 black falloff) — specimens sat in a hole. The dark ladder now mirrors light: tray 17.4 < canvas 19.4 < stage 20.4, with a .08 falloff.
-- **Owner direction (2026-11-01, legacy sweep):** redesign the documentation UI and previews still left from the old site. Decided: the integration and migration logo grids (old `IconButtons`, a hairline table whose short last row left empty grey cells) become free-standing tiles — `ui-logos` for marks with names, `ui-index` with icons for described guides; related views (`Segments`) use `ui-segmented`; a clamped long table is `ui-expand` (canvas fade, one small `ui-button`); an example's usage line (`(resize)`, `(click)`, …) is a muted `ui-hint` led by its gesture, not a heavy paragraph; a setup step's result (`DemoHelloWorld`) is a plain stage without window dots; Theme toggles and responsive chrome removed from examples that are not about color schemes or viewports; the Layout example paints its chart with filled bars on one axis, underline section words and regular-weight figures.
-- **Owner direction (2026-11-01, section rules):** a very quiet divider before each article h2. Decided: the faintest line role across the reading measure (never the wide column), set closer to the heading than to the text before it so it reads as the section's opening; the page's first section, a heading after a disclosure (which closes on its own hairline) and the blog's contents disclosure while it shows keep space only. The documentation and the blog share it through `ui-prose`.
-- **Owner direction (2026-11-01, page-by-page polish, in the system's style):** a full review of every documentation page. Decided: a shell command or a plain-text prompt wraps (commands under a hanging indent, flags kept whole) instead of hiding behind the copy button, and the copy face runs to the panel's contour; every code line keeps one line of height; consecutive code panels part by a small gap; a Generated CSS disclosure right after its source closes the same panel; table values may wrap while the first column's names stay whole (paths break after a slash), numbers never wrap, and a column head's code is plain mono; row steps go two-column only from 46rem; a callout inside a step is an unframed note; callouts keep their tone mostly in the icon (2.5% wash, 12% contour); the stage's floor is 10rem so a single row never floats in an empty well; a demo about a container has no browser chrome and names its range "Container", and the range, its caption and its reading stay one group on phones; captions and readings inside specimens, chart subtitles, chart values and legends are small sans with tabular figures, never mono; demo headings are medium, not semibold; benchmark series start with hues that never read as a status; the integration mark beside a page title is 3.5rem; the footer sets its groups two by two on phones; the canvas paints the document itself; the Design System catalog is a ruled contents list like the Guide and Reference overviews.
-- Open (2026-11-01): the Design System handbook still has its own shell (46rem measure, its own page-head offsets); the delivery illustrations are bitmaps whose labels fall to ~6px at 390px; the color palette has no step ruler; the blog's newest-post gold tick conflicts with rule 1 unless recorded as an exception.
-- **Owner direction (2026-11-01, example controls):** the width presets, range and Fit looked odd inside the stage. Decided: a preview's controls belong to the example, not to the document it shows — they form one row on the tray itself, between the stage and the source, with no surface of their own: 12px to the stage, to the source and to a caption's first line, 16px in from both tray edges like the head's title, every control 32px tall, the live width a sans reading with tabular figures; a setup step's result (`DemoHelloWorld`) and the source that renders it share one tray, the stage over the code.
-
-- **Owner direction (2026-11-02, installation):** steps use open, tabular `01`, `02`, `03` labels without a circular badge; the shared `ui-steps` owns this across Guide and Design System. Installation links form a grouped directory with small marks, left-aligned names and quiet group rules, replacing the logo tiles. Step spacing resets apply only to panels placed by the step grid; nested trays retain their 4px stage-to-source inset and the joined source/generated-output panel.

package/src/styles/system/menu.css

@@ -1,14 +0,0 @@
-@prune native;
-/* menu: owned component styles; shared definitions come from the foundation. */
-@layer components {
-  .ui-menu { display: grid; gap: 1px; min-width: 12rem; margin: 0; padding: var(--ui-inset); border-radius: var(--ui-radius-lg); background: var(--ui-surface-float); box-shadow: var(--ui-elevation-rise-3); list-style: none; }
-  .ui-menu-label { padding: .375rem .625rem .25rem; color: var(--ui-text-muted); @apply --ui-label-type; }
-  .ui-menu-item { appearance: none; display: flex; align-items: center; gap: var(--ui-space-xs); width: 100%; min-height: 2rem; padding: 0 .625rem; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-text-body); font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans); text-align: start; text-decoration: none; cursor: pointer; }
-  .ui-menu-item > svg { flex: none; width: 15px; height: 15px; color: var(--ui-text-muted); }
-  .ui-menu-item > small { margin-left: auto; color: var(--ui-text-muted); font: var(--ui-weight-regular) .6875rem/1 var(--font-family-mono); }
-  .ui-menu-item:is(:hover, [data-highlighted]) { color: var(--ui-text-strong); background: light-dark(oklch(22% .002 265 / .05), oklch(100% 0 none / .06)); }
-  .ui-menu-item[aria-checked="true"] { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
-  .ui-menu-item[aria-checked="true"]::after { content: ""; width: 14px; height: 14px; margin-left: auto; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
-  .ui-menu-item:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
-  .ui-menu-separator { height: 1px; margin: var(--ui-space-3xs) .375rem; background: var(--ui-line-hair); }
-}

package/src/styles/system/scroll.css

@@ -1,6 +0,0 @@
-@prune native;
-/* scroll: owned component styles; shared definitions come from the foundation. */
-@layer components {
-  .ui-scroll { overflow: auto; overscroll-behavior: contain; max-height: 16rem; border-radius: var(--ui-radius-lg); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); }
-  .ui-scroll:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
-}