shelving 1.237.0 → 1.239.0

package/ui/dialog/Modal.md

@@ -24,7 +24,7 @@ import { Modal } from "shelving/ui";
 | Variable | Styles | Default |
 |---|---|---|
 | `--modal-width` | Box width | `var(--width-narrow)` |
-| `--modal-border` | Border shorthand | `var(--stroke-normal)` solid, 50% of `--tint-50` |
+| `--modal-border` | Border shorthand | `var(--stroke-normal)` solid, 50% of [`--tint-50`](/ui/TINT_CLASS) |
 | `--modal-radius` | Corner radius | `var(--radius-normal)` (16px) |
 | `--modal-color-bg` | Surface fill | `var(--tint-100)` |
 | `--modal-padding` | Inner padding | `var(--space-normal)` (16px) |
@@ -32,7 +32,7 @@ import { Modal } from "shelving/ui";
 | `--modal-transition` | Transition | `all var(--duration-fast)` (150ms) |
 | `--modal-shadow` | Drop shadow | `var(--shadow-normal)` |
 
-**Global tokens it reads** — move these to retheme broadly: the tint ladder `--tint-00` / `--tint-50` / `--tint-100`, plus `--width-narrow`, `--space-normal`, `--radius-normal`, `--stroke-normal`, `--shadow-normal`, and `--duration-fast`.
+**Global tokens it reads** — move these to retheme broadly: the tint ladder [`--tint-00`](/ui/TINT_CLASS) / [`--tint-50`](/ui/TINT_CLASS) / [`--tint-100`](/ui/TINT_CLASS), plus [`--width-narrow`](/ui/getWidthClass), [`--space-normal`](/ui/getSpaceClass), [`--radius-normal`](/ui/getRadiusClass), [`--stroke-normal`](/ui/getStrokeClass), [`--shadow-normal`](/ui/getShadowClass), and [`--duration-fast`](/ui/getDurationClass).
 
 ## See also
 

package/ui/dialog/Modal.module.css

@@ -1,4 +1,11 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Duration.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Shadow.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Width.module.css";
 
 @layer components {
 	.modal {

package/ui/docs/DocumentationHomePage.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { TreeElementProps } from "../../util/tree.js";
+/**
+ * Page renderer for the documentation site's home page — a bold coloured hero panel over the module listing.
+ * - The whole page sits in a single `color="red"` `<Block>`, so the hero panel, prose, and child cards all pick up the red tint.
+ * - The hero is a full-padding `<Panel>` with the package name centred as a large `<Title>`.
+ * - Below the hero it renders any absorbed prose content, then the root's children (the modules) as a stack of cards.
+ *
+ * @kind component
+ * @param props The root tree element props (`title`, `name`, `description`, `content`, `children`).
+ * @returns A `<Page>` with a coloured hero panel followed by the module listing.
+ * @example <DocumentationHomePage {...root.props} />
+ * @see https://dhoulb.github.io/shelving/ui/docs/DocumentationHomePage/DocumentationHomePage
+ */
+export declare function DocumentationHomePage({ title, name, description, content, children }: TreeElementProps): ReactNode;

package/ui/docs/DocumentationHomePage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Block } from "../block/Block.js";
+import { Panel } from "../block/Panel.js";
+import { Prose } from "../block/Prose.js";
+import { Section } from "../block/Section.js";
+import { Title } from "../block/Title.js";
+import { Markup } from "../misc/Markup.js";
+import { Page } from "../page/Page.js";
+import { TreeCards } from "../tree/TreeCards.js";
+/**
+ * Page renderer for the documentation site's home page — a bold coloured hero panel over the module listing.
+ * - The whole page sits in a single `color="red"` `<Block>`, so the hero panel, prose, and child cards all pick up the red tint.
+ * - The hero is a full-padding `<Panel>` with the package name centred as a large `<Title>`.
+ * - Below the hero it renders any absorbed prose content, then the root's children (the modules) as a stack of cards.
+ *
+ * @kind component
+ * @param props The root tree element props (`title`, `name`, `description`, `content`, `children`).
+ * @returns A `<Page>` with a coloured hero panel followed by the module listing.
+ * @example <DocumentationHomePage {...root.props} />
+ * @see https://dhoulb.github.io/shelving/ui/docs/DocumentationHomePage/DocumentationHomePage
+ */
+export function DocumentationHomePage({ title, name, description, content, children }) {
+    return (_jsx(Page, { title: title ?? name, description: description, children: _jsxs(Block, { color: "red", children: [_jsx(Panel, { padding: "xxlarge", children: _jsx(Title, { center: true, size: "xxlarge", children: title ?? name }) }), content && (_jsx(Section, { wide: true, children: _jsx(Prose, { children: _jsx(Markup, { children: content }) }) })), _jsx(Section, { wide: true, children: _jsx(TreeCards, { children: children }) })] }) }));
+}

package/ui/docs/DocumentationHomePage.md

@@ -0,0 +1,42 @@
+# DocumentationHomePage
+
+The landing page for a documentation site — a bold coloured hero panel with the package name, sitting above the listing of every module. Swap it in for the root element via [`TreeRouterMapping`](/ui/TreeRouter) so the home route (`/`) renders this instead of the generic [`TreePage`](/ui/TreePage).
+
+**Things to know:**
+
+- The whole page sits inside one `color="red"` [`Block`](/ui/Block), so the hero [`Panel`](/ui/Panel), prose, and child [`DocumentationCard`](/ui/DocumentationCard)s all inherit the red tint and re-derive together.
+- The hero is a `padding="xxlarge"` [`Panel`](/ui/Panel) with the package name centred as a large [`Title`](/ui/Title) (`center`, `size="xxlarge"`).
+- Below the hero it renders any absorbed README prose, then the root's children (the modules) as a stack of cards via [`TreeCards`](/ui/TreeCards).
+- It consumes the same [`TreeElementProps`](/util/tree) as [`TreePage`](/ui/TreePage), so it's a drop-in replacement for the `tree-element` renderer.
+
+## Usage
+
+Wire it in as the renderer for the root `tree-element` so the home route uses it:
+
+```tsx
+import { DocumentationHomePage, TreeApp, TreeRouterMapping } from "shelving/ui";
+
+<TreeRouterMapping mapping={{ "tree-element": DocumentationHomePage }}>
+  <TreeApp tree={tree} />
+</TreeRouterMapping>
+```
+
+Or render a single page manually by spreading the root element's props:
+
+```tsx
+import { DocumentationHomePage } from "shelving/ui";
+
+<DocumentationHomePage {...root.props} />
+```
+
+## Styling
+
+`DocumentationHomePage` has no own CSS hooks — it composes [`Page`](/ui/Page), [`Block`](/ui/Block), [`Panel`](/ui/Panel), [`Title`](/ui/Title), [`Section`](/ui/Section), and [`TreeCards`](/ui/TreeCards), which carry their own themeable surfaces. Retheme through those, or change the hero colour via the `color=` on the wrapping `Block`.
+
+## See also
+
+- [`TreePage`](/ui/TreePage) — the generic `tree-element` renderer this replaces for the home route.
+- [`DocumentationPage`](/ui/DocumentationPage) — the per-symbol detail page that uses the same coloured-panel hero pattern.
+- [`Panel`](/ui/Panel) — the full-width hero band, here with `padding="xxlarge"`.
+- [`TreeCards`](/ui/TreeCards) — the module card listing rendered below the hero.
+- [`TreeApp`](/ui/TreeApp) — wires renderers into a complete site.

package/ui/docs/DocumentationHomePage.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, test } from "bun:test";
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { DocumentationElement } from "../../util/tree.js";
+import { MetaContext } from "../misc/MetaContext.js";
+import { createMeta } from "../util/meta.js";
+import { DocumentationHomePage } from "./DocumentationHomePage.js";
+
+/** Make a minimal `kind: "module"` child element. */
+function mod(name: string): DocumentationElement {
+	return { type: "tree-documentation", key: name, props: { name, kind: "module" } };
+}
+
+/** Render inside a `MetaContext` — the child cards read the current URL from it. */
+function render(node: ReactNode, url = "./"): string {
+	return renderToStaticMarkup(<MetaContext value={createMeta({ root: "http://x.com/", url })}>{node}</MetaContext>);
+}
+
+describe("DocumentationHomePage", () => {
+	test("renders the title as a hero and lists the modules", () => {
+		const html = render(
+			<DocumentationHomePage name="shelving" title="shelving">
+				{[mod("util"), mod("schema")]}
+			</DocumentationHomePage>,
+		);
+		expect(html).toContain("shelving");
+		expect(html).toContain("util");
+		expect(html).toContain("schema");
+	});
+
+	test("falls back to `name` when no `title` is set", () => {
+		const html = render(<DocumentationHomePage name="shelving">{[mod("util")]}</DocumentationHomePage>);
+		expect(html).toContain("shelving");
+	});
+});

package/ui/docs/DocumentationHomePage.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import type { TreeElementProps } from "../../util/tree.js";
+import { Block } from "../block/Block.js";
+import { Panel } from "../block/Panel.js";
+import { Prose } from "../block/Prose.js";
+import { Section } from "../block/Section.js";
+import { Title } from "../block/Title.js";
+import { Markup } from "../misc/Markup.js";
+import { Page } from "../page/Page.js";
+import { TreeCards } from "../tree/TreeCards.js";
+
+/**
+ * Page renderer for the documentation site's home page — a bold coloured hero panel over the module listing.
+ * - The whole page sits in a single `color="red"` `<Block>`, so the hero panel, prose, and child cards all pick up the red tint.
+ * - The hero is a full-padding `<Panel>` with the package name centred as a large `<Title>`.
+ * - Below the hero it renders any absorbed prose content, then the root's children (the modules) as a stack of cards.
+ *
+ * @kind component
+ * @param props The root tree element props (`title`, `name`, `description`, `content`, `children`).
+ * @returns A `<Page>` with a coloured hero panel followed by the module listing.
+ * @example <DocumentationHomePage {...root.props} />
+ * @see https://dhoulb.github.io/shelving/ui/docs/DocumentationHomePage/DocumentationHomePage
+ */
+export function DocumentationHomePage({ title, name, description, content, children }: TreeElementProps): ReactNode {
+	return (
+		<Page title={title ?? name} description={description}>
+			<Block color="red">
+				<Panel padding="xxlarge">
+					<Title center size="xxlarge">
+						{title ?? name}
+					</Title>
+				</Panel>
+				{content && (
+					<Section wide>
+						<Prose>
+							<Markup>{content}</Markup>
+						</Prose>
+					</Section>
+				)}
+				<Section wide>
+					<TreeCards>{children}</TreeCards>
+				</Section>
+			</Block>
+		</Page>
+	);
+}

package/ui/docs/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./DocumentationButtons.js";
 export * from "./DocumentationCard.js";
+export * from "./DocumentationHomePage.js";
 export * from "./DocumentationKind.js";
 export * from "./DocumentationPage.js";
 export * from "./DocumentationSignatures.js";

package/ui/docs/index.js

@@ -1,5 +1,6 @@
 export * from "./DocumentationButtons.js";
 export * from "./DocumentationCard.js";
+export * from "./DocumentationHomePage.js";
 export * from "./DocumentationKind.js";
 export * from "./DocumentationPage.js";
 export * from "./DocumentationSignatures.js";

package/ui/docs/index.ts

@@ -1,5 +1,6 @@
 export * from "./DocumentationButtons.js";
 export * from "./DocumentationCard.js";
+export * from "./DocumentationHomePage.js";
 export * from "./DocumentationKind.js";
 export * from "./DocumentationPage.js";
 export * from "./DocumentationSignatures.js";

package/ui/form/Button.md

@@ -72,7 +72,7 @@ import { getButtonClass } from "shelving/ui";
 | `--button-strong-border` | Border when `strong` | `var(--button-stroke) solid transparent` |
 | `--button-strong-hover-background` | Hover fill when `strong` | `var(--tint-55)` |
 
-**Global tokens it reads:** the tint ladder `--tint-50` / `--tint-80` / `--tint-90` / `--tint-95` / `--tint-100` / `--tint-55`, plus `--space-small`, `--space-xxsmall`, `--radius-xsmall`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, `--font-body`, `--weight-strong`, `--size-normal`, `--leading`, and `--duration-fast`.
+**Global tokens it reads:** the tint ladder [`--tint-50`](/ui/TINT_CLASS) / [`--tint-80`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS) / [`--tint-95`](/ui/TINT_CLASS) / [`--tint-100`](/ui/TINT_CLASS) / [`--tint-55`](/ui/TINT_CLASS), plus [`--space-small`](/ui/getSpaceClass), [`--space-xxsmall`](/ui/getSpaceClass), [`--radius-xsmall`](/ui/getRadiusClass), [`--stroke-normal`](/ui/getStrokeClass), [`--stroke-focus`](/ui/getStrokeClass), [`--color-focus`](/ui/getColorClass), [`--font-body`](/ui/getFontClass), [`--weight-strong`](/ui/getWeightClass), [`--size-normal`](/ui/getSizeClass), [`--leading`](/ui/getSizeClass), and [`--duration-fast`](/ui/getDurationClass).
 
 ```css
 /* Theme: pill-shaped buttons. */

package/ui/form/Button.module.css

@@ -1,4 +1,13 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Font.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.button {

package/ui/form/Field.md

@@ -50,7 +50,7 @@ import { Field, TextInput } from "shelving/ui";
 | `--field-message-weight` | Message font weight | `var(--weight-strong)` |
 | `--field-color-message` | Message colour | `var(--color-red)` |
 
-**Global tokens it reads:** the tint ladder `--tint-00`, plus `--space-paragraph`, `--space-xsmall`, `--size-normal`, `--weight-strong`, `--weight-normal`, `--shade-dark`, and `--color-red`.
+**Global tokens it reads:** the tint ladder [`--tint-00`](/ui/TINT_CLASS), plus [`--space-paragraph`](/ui/getSpaceClass), [`--space-xsmall`](/ui/getSpaceClass), [`--size-normal`](/ui/getSizeClass), [`--weight-strong`](/ui/getWeightClass), [`--weight-normal`](/ui/getWeightClass), `--shade-dark`, and [`--color-red`](/ui/getColorClass).
 
 ## See also
 

package/ui/form/Field.module.css

@@ -1,4 +1,9 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.field {

package/ui/form/Form.md

@@ -105,7 +105,7 @@ When an `onSubmit` callback returns a non-empty `ReactNode`, `Form` dispatches i
 |---|---|---|
 | `--form-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 
-**Global tokens it reads:** `--space-paragraph`.
+**Global tokens it reads:** [`--space-paragraph`](/ui/getSpaceClass).
 
 ## See also
 

package/ui/form/Form.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
 
 @layer components {
 	.form {

package/ui/form/Input.module.css

@@ -1,5 +1,13 @@
-@import "../style/base.css";
-@import "../style/Shades.module.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Font.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.input {

package/ui/form/Popover.module.css

@@ -1,4 +1,9 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Radius.module.css";
+@import "../style/Shadow.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
 
 @layer components {
 	.wrap {

package/ui/form/Progress.module.css

@@ -1,4 +1,7 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Tint.module.css";
 
 @layer components {
 	/* Continuous progress bar — a single track that fills horizontally. */

package/ui/inline/Code.md

@@ -13,7 +13,7 @@ An inline code span — renders a `<code>` element with monospace type and a sub
 
 - Pick the sibling whose semantics match — they all look the same but mean different things to assistive tech and search.
 - Pass `plain` to drop the default background and inline padding (useful when the code already sits inside a tinted container).
-- Painted from the [tint ladder](/ui/TINT_CLASS): the background is `--tint-90` and the text `--tint-00`, so it re-tints with its surrounding scope.
+- Painted from the [tint ladder](/ui/TINT_CLASS): the background is [`--tint-90`](/ui/TINT_CLASS) and the text [`--tint-00`](/ui/TINT_CLASS), so it re-tints with its surrounding scope.
 - Inside [`Prose`](/ui/Prose) raw `<code>` / `<kbd>` / `<samp>` / `<var>` pick up the same styling, and code inside a `<pre>` drops the inline box automatically.
 
 ## Usage
@@ -48,7 +48,7 @@ import { Code } from "shelving/ui";
 | `--code-padding` | Inline padding (non-`plain`) | `var(--space-xxsmall)` |
 | `--code-radius` | Corner radius (non-`plain`) | `var(--radius-xxsmall)` |
 
-**Global tokens it reads:** `--font-code`, `--weight-code`, `--size-smaller`, `--leading`, `--space-xxsmall`, `--radius-xxsmall`, and the tint-ladder steps `--tint-00` / `--tint-90` for the box fill and text.
+**Global tokens it reads:** [`--font-code`](/ui/getFontClass), [`--weight-code`](/ui/getWeightClass), [`--size-smaller`](/ui/getSizeClass), [`--leading`](/ui/getSizeClass), [`--space-xxsmall`](/ui/getSpaceClass), [`--radius-xxsmall`](/ui/getRadiusClass), and the tint-ladder steps [`--tint-00`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS) for the box fill and text.
 
 ## See also
 

package/ui/inline/Code.module.css

@@ -1,4 +1,10 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Font.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.code,

package/ui/inline/Deleted.module.css

@@ -1,4 +1,7 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.deleted,

package/ui/inline/Emphasis.module.css

@@ -1,4 +1,4 @@
-@import "../style/base.css";
+@import "../style/layers.css";
 
 @layer components {
 	.emphasis,

package/ui/inline/Inserted.module.css

@@ -1,4 +1,7 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.inserted,

package/ui/inline/Link.md

@@ -31,13 +31,13 @@ import { Link } from "shelving/ui";
 
 ## Styling
 
-`Link` exposes a couple of inline hooks; the link colour comes from the global `--color-link` token.
+`Link` exposes a couple of inline hooks; the link colour comes from the global [`--color-link`](/ui/getColorClass) token.
 
 | Variable | Styles | Default |
 |---|---|---|
 | `--link-weight` | Text colour and font weight | `var(--color-link)` colour / `var(--weight-strong)` weight |
 
-**Global tokens it reads:** `--color-link`, `--weight-strong`, and `--stroke-normal` (the underline thickness).
+**Global tokens it reads:** [`--color-link`](/ui/getColorClass), [`--weight-strong`](/ui/getWeightClass), and [`--stroke-normal`](/ui/getStrokeClass) (the underline thickness).
 
 ## See also
 

package/ui/inline/Link.module.css

@@ -1,5 +1,7 @@
-@import "../style/base.css";
-@import "../style/Tint.module.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.link,

package/ui/inline/Mark.md

@@ -30,7 +30,7 @@ import { Mark } from "shelving/ui";
 | `--mark-radius` | Corner radius | `var(--radius-xxsmall)` |
 | `--mark-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--light-yellow`, `--dark-yellow`, `--radius-xxsmall`, and `--weight-strong`.
+**Global tokens it reads:** `--light-yellow`, `--dark-yellow`, [`--radius-xxsmall`](/ui/getRadiusClass), and [`--weight-strong`](/ui/getWeightClass).
 
 ## See also
 

package/ui/inline/Mark.module.css

@@ -1,4 +1,6 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Radius.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.mark,

package/ui/inline/Small.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.small,

package/ui/inline/Strong.md

@@ -24,7 +24,7 @@ import { Paragraph, Strong } from "shelving/ui";
 
 `Strong` has no own theming hooks — it sets `font-weight: var(--weight-strong)` and inherits everything else from its surroundings.
 
-**Global tokens it reads:** `--weight-strong`.
+**Global tokens it reads:** [`--weight-strong`](/ui/getWeightClass).
 
 ## See also
 

package/ui/inline/Strong.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.strong,

package/ui/inline/Subscript.module.css

@@ -1,4 +1,4 @@
-@import "../style/base.css";
+@import "../style/layers.css";
 
 @layer components {
 	.subscript,

package/ui/inline/Superscript.module.css

@@ -1,4 +1,4 @@
-@import "../style/base.css";
+@import "../style/layers.css";
 
 @layer components {
 	.superscript,

package/ui/layout/CenteredLayout.md

@@ -27,9 +27,9 @@ Layouts compose naturally as [`Router`](/ui/Router) route values — wrap a grou
 
 ## Styling
 
-This layout exposes no own `--centered-layout-*` hooks. The inner column is capped at the global `--width-wide` token (dropped when `fullWidth` is set), and the outer element composes the shared `.layout` behaviour, so it reads the layout hooks `--layout-space`, `--layout-padding`, and `--layout-inset-top` / `-bottom` / `-left` / `-right`.
+This layout exposes no own `--centered-layout-*` hooks. The inner column is capped at the global [`--width-wide`](/ui/getWidthClass) token (dropped when `fullWidth` is set), and the outer element composes the shared `.layout` behaviour, so it reads the layout hooks `--layout-space`, `--layout-padding`, and `--layout-inset-top` / `-bottom` / `-left` / `-right`.
 
-**Global tokens it reads** — `--width-wide`.
+**Global tokens it reads** — [`--width-wide`](/ui/getWidthClass).
 
 ## See also
 

package/ui/layout/CenteredLayout.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Width.module.css";
 
 @layer components {
 	.main {

package/ui/layout/Layout.module.css

@@ -1,4 +1,6 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
+@import "../style/Tint.module.css";
 
 /* Low-priority padding/flex defaults live in `@layer defaults` so consumers can override them */
 /* with normal-specificity selectors without needing `:where()` tricks. */
@@ -53,7 +55,7 @@
 		position: fixed;
 		inset: 0;
 
-		/* Layout-specific bg hook. Typography and page bg come from the body baseline in style/base.css. */
+		/* Layout-specific bg hook. Typography and page bg come from the body baseline in the style/ token modules. */
 		background: var(--layout-body-bg, var(--tint-100));
 	}
 

package/ui/layout/SidebarLayout.md

@@ -55,7 +55,7 @@ useEffect(useSafeKeyboardArea, []);
 
 The content column composes the shared `.layout` behaviour, so it also reads the layout hooks `--layout-space`, `--layout-padding`, `--layout-inset-top` / `-bottom` / `-left` / `-right`, and `--layout-body-bg`.
 
-**Global tokens it reads** — the tint ladder `--tint-80` / `--tint-90` / `--tint-100`, plus `--space-normal`, `--stroke-normal`, `--duration-normal`, and `--color-shadow`.
+**Global tokens it reads** — the tint ladder [`--tint-80`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS) / [`--tint-100`](/ui/TINT_CLASS), plus [`--space-normal`](/ui/getSpaceClass), [`--stroke-normal`](/ui/getStrokeClass), [`--duration-normal`](/ui/getDurationClass), and [`--color-shadow`](/ui/getColorClass).
 
 ## See also
 

package/ui/layout/SidebarLayout.module.css

@@ -1,4 +1,8 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
 @import "../style/Tint.module.css";
 
 /*

package/ui/menu/Menu.md

@@ -42,7 +42,7 @@ import { Menu, MenuItem } from "shelving/ui";
 
 Item-state hooks (`--menu-hover-*`, `--menu-proud-*`, `--menu-active-*`, `--menu-radius`, `--menu-focus-border`) are documented on [`MenuItem`](/ui/MenuItem).
 
-**Global tokens it reads** — the tint ladder `--tint-00` / `--tint-50`, plus `--space-xxsmall` / `--space-xsmall`, `--font-body`, `--size-normal`, `--leading`, and `--stroke-focus`.
+**Global tokens it reads** — the tint ladder [`--tint-00`](/ui/TINT_CLASS) / [`--tint-50`](/ui/TINT_CLASS), plus [`--space-xxsmall`](/ui/getSpaceClass) / [`--space-xsmall`](/ui/getSpaceClass), [`--font-body`](/ui/getFontClass), [`--size-normal`](/ui/getSizeClass), [`--leading`](/ui/getSizeClass), and [`--stroke-focus`](/ui/getStrokeClass).
 
 ## See also
 

package/ui/menu/Menu.module.css

@@ -1,4 +1,12 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Font.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.menu {

package/ui/menu/MenuItem.md

@@ -45,7 +45,7 @@ The item link's hooks (defined in `Menu.module.css`):
 
 List-level hooks (`--menu-gap`, `--menu-color`, the nested-submenu hooks, etc.) are documented on [`Menu`](/ui/Menu).
 
-**Global tokens it reads** — the tint ladder `--tint-00` / `--tint-90` / `--tint-100`, plus `--space-xxsmall`, `--radius-xxsmall`, `--stroke-focus`, `--stroke-normal`, `--color-focus`, and `--weight-strong`.
+**Global tokens it reads** — the tint ladder [`--tint-00`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS) / [`--tint-100`](/ui/TINT_CLASS), plus [`--space-xxsmall`](/ui/getSpaceClass), [`--radius-xxsmall`](/ui/getRadiusClass), [`--stroke-focus`](/ui/getStrokeClass), [`--stroke-normal`](/ui/getStrokeClass), [`--color-focus`](/ui/getColorClass), and [`--weight-strong`](/ui/getWeightClass).
 
 ## See also
 

package/ui/misc/Loading.module.css

@@ -1,4 +1,6 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Size.module.css";
+@import "../style/Tint.module.css";
 
 @layer components {
 	.spinner {

package/ui/misc/StatusIcon.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Size.module.css";
 
 @layer components {
 	.icon {

package/ui/misc/Tag.md

@@ -38,7 +38,7 @@ import { Tag } from "shelving/ui";
 | `--tag-case` | Text transform | `var(--case-label)` |
 | `--tag-focus-border` | Focus outline | `var(--stroke-focus) solid var(--color-focus)` |
 
-**Global tokens it reads** — the tint ladder `--tint-50` / `--tint-55` / `--tint-100`, plus `--space-xxsmall`, `--radius-xxsmall`, `--font-body`, `--size-small`, `--weight-strong`, `--leading`, `--case-label`, `--stroke-normal`, `--stroke-focus`, and `--color-focus`.
+**Global tokens it reads** — the tint ladder [`--tint-50`](/ui/TINT_CLASS) / [`--tint-55`](/ui/TINT_CLASS) / [`--tint-100`](/ui/TINT_CLASS), plus [`--space-xxsmall`](/ui/getSpaceClass), [`--radius-xxsmall`](/ui/getRadiusClass), [`--font-body`](/ui/getFontClass), [`--size-small`](/ui/getSizeClass), [`--weight-strong`](/ui/getWeightClass), [`--leading`](/ui/getSizeClass), [`--case-label`](/ui/getFontClass), [`--stroke-normal`](/ui/getStrokeClass), [`--stroke-focus`](/ui/getStrokeClass), and [`--color-focus`](/ui/getColorClass).
 
 ## See also