@epilot/zenith-react 0.1.0-next.0 → 0.1.0

package/README.md

@@ -3,33 +3,113 @@
 Accessible React components for Zenith, styled with Griffel and designed for
 independent micro-frontend delivery.
 
+## Install
+
 ```sh
-bun add @epilot/zenith-react
+npm install @epilot/zenith-react
 ```
 
-React and React DOM 18 or newer are peers. Before the first Zenith render, await
-the content-addressed core token sheet:
+`@epilot/zenith-runtime` installs with it; do not override it unless the host
+serves the identical `/v1` ABI. Tokens are built in, so there is no third
+package. React and React DOM 18 or newer are peers.
+
+Zenith is an ordinary per-application dependency, not something loaded through a
+shared component-library import map.
+
+## Render
 
 ```tsx
 import { Button } from "@epilot/zenith-react"
+
+export const Example = () => <Button variant="primary">Continue</Button>
+```
+
+There is no setup step: components install their token stylesheet as they
+render. To install it at startup instead:
+
+```ts
 import { prepareCoreTokens } from "@epilot/zenith-react/delivery"
 
 await prepareCoreTokens()
+```
 
-export const Example = () => <Button variant="primary">Continue</Button>
+Optional; no network.
+
+Application styles that need a design token import a named binding from
+`@epilot/zenith-react/tokens`. Do not add the token CSS as a second stylesheet,
+and do not write generated `--zenith-<hash>-*` names by hand.
+
+Zenith ships no `.css` files, and its `exports` map has no stylesheet entry:
+there is nothing to import. Porting from Volt, drop its `style.css`,
+`preflight.css` and `font.css` imports and add no replacement — the token CSS
+above is the only stylesheet, and the package installs it itself.
+
+Use `AppearanceBoundary` for a scoped appearance that must also reach portalled
+content — a theme or surface attribute on a subtree does not follow a Dialog,
+Popover, Select, Tooltip or menu into `document.body`.
+
+## Validate the host
+
+- Exercise the application under its real content-security policy.
+- Open and close every portalled component.
+- Test keyboard order, focus restoration, screen-reader names and error states.
+- Test two independently bundled Zenith consumers on one page, where that is a
+  supported host scenario.
+- Measure the actual entry and lazy chunks.
+
+## Migrate deliberately
+
+Move one surface at a time. Do not reuse custom-property names, styling
+selectors or internal DOM structure from another component system. Where APIs
+differ, adapt at the application boundary and remove the adapter once the
+surface is fully on Zenith.
+
+## Connect an MCP client
+
+A read-only Model Context Protocol (MCP) server for Zenith runs dynamically on
+the documentation site at `/api/mcp`. It serves component APIs, design tokens,
+and design guidelines directly to AI coding tools.
+
+The catalogue is built from the commit the current `latest` release was
+published from, so it describes exactly what `npm install @epilot/zenith-react`
+installs — not unreleased work on `main`.
+
+Point an MCP client (such as Cursor or Claude) at the Streamable HTTP endpoint:
+
+```json
+{
+  "mcpServers": {
+    "zenith": {
+      "url": "https://main.d8s2wyuq7fsgk.amplifyapp.com/api/mcp"
+    }
+  }
+}
 ```
 
-Named token bindings are available from `@epilot/zenith-react/tokens`; resolved
-literal values are available from `@epilot/zenith-react/tokens.json`. The
-React-package token and delivery subpaths remain compatibility aliases for the
-`0.1` line. Do not write generated namespace hashes or install a second copy of
-the core sheet by hand.
+Replace `https://main.d8s2wyuq7fsgk.amplifyapp.com` with your custom domain if
+configured. All queries and tools are strictly read-only and require no
+credentials.
+
+## Which version you get
+
+`npm install @epilot/zenith-react` resolves the `latest` dist-tag, which points
+at `0.1.0` — published to `next`, verified, then promoted by hand.
+
+Unproven builds stay on `next` with a prerelease version:
+
+```sh
+npm install @epilot/zenith-react@next
+```
+
+These are opt-in twice over — you name the tag, and a range like `^0.1.0` never
+resolves a prerelease. Pin an exact version if you adopt one.
+
+## Reference
 
-The package is ESM-only and tree-shakeable. Its runtime dependencies are exact
-versions of `@epilot/zenith-runtime` and `@epilot/zenith-react/tokens`; React and
-`csstype` are the only external declaration dependencies. The optional Jest
-helper is exported from
+The package is ESM-only and tree-shakeable. Resolved literal token values are in
+`@epilot/zenith-react/tokens.json`, and an optional Jest helper in
 `@epilot/zenith-react/testing/jest-preset.cjs`.
 
-For development rules see `AGENTS.md`; for consumer setup and migration details
-see `ADOPTING.md` and the repository documentation site.
+Component reference, guidelines and examples are on the documentation site — the
+same catalogue the MCP endpoint above serves. Development and contribution rules
+live in the repository.

package/dist/components/appearance-boundary/appearance-boundary.js

@@ -1,53 +1,51 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as t from "react";
-import { ComposeAsChild as f } from "../slot/compose-as-child.js";
-import { SLOT_ATTR as A } from "@epilot/zenith-runtime/v1";
-const l = ["light", "dark"], C = [
-  "plain",
-  "bordered",
-  "glass",
-  "tint",
-  "card"
-], h = (e) => ({
-  mode: l.includes(e.mode) ? e.mode : "light",
-  surface: C.includes(e.surface) ? e.surface : "plain"
-}), i = t.createContext(void 0), O = t.forwardRef(function({ mode: r, surface: n, asChild: m = !1, className: c, children: s, ...d }, u) {
-  const a = t.useMemo(
-    () => h({ mode: r, surface: n }),
-    [r, n]
-  ), p = m ? /* @__PURE__ */ o(
-    f,
+import { jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import { mergeClasses as v, SLOT_ATTR as y } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as h } from "../../styles/make-styles.js";
+import { body as b } from "../../tokens/index.js";
+import { ComposeAsChild as S } from "../slot/compose-as-child.js";
+const g = ["light", "dark"], x = ["flat", "bordered"], N = (e) => ({
+  mode: g.includes(e.mode) ? e.mode : "light",
+  surface: x.includes(e.surface) ? e.surface : "flat"
+}), p = o.createContext(void 0), O = h({
+  canvas: { backgroundColor: b }
+}), B = o.forwardRef(function({ mode: r, surface: c, asChild: l = !1, className: n, children: d, ...m }, u) {
+  const a = o.useMemo(
+    () => N({ mode: r, surface: c }),
+    [r, c]
+  ), t = i(), A = O(), f = (t == null ? void 0 : t.mode) === a.mode ? n : v(A.canvas, n), C = l ? /* @__PURE__ */ s(
+    S,
     {
-      ...d,
+      ...m,
       ref: u,
-      className: c,
+      className: f,
       forceProps: { "data-theme": a.mode, "data-surface": a.surface },
       "data-theme": a.mode,
       "data-surface": a.surface,
-      children: s
+      children: d
     }
-  ) : /* @__PURE__ */ o(
+  ) : /* @__PURE__ */ s(
     "div",
     {
       ref: u,
       "data-slot": "appearance-boundary",
-      [A]: "appearance-boundary",
-      className: c,
-      ...d,
+      [y]: "appearance-boundary",
+      className: f,
+      ...m,
       "data-theme": a.mode,
       "data-surface": a.surface,
-      children: s
+      children: d
     }
   );
-  return /* @__PURE__ */ o(i.Provider, { value: a, children: p });
-}), v = () => t.useContext(i), R = () => {
-  const e = v();
+  return /* @__PURE__ */ s(p.Provider, { value: a, children: C });
+}), i = () => o.useContext(p), E = () => {
+  const e = i();
   return e === void 0 ? {} : { "data-theme": e.mode, "data-surface": e.surface };
 };
 export {
-  O as AppearanceBoundary,
-  h as canonicalAppearance,
-  v as useAppearance,
-  R as useAppearanceAttributes
+  B as AppearanceBoundary,
+  N as canonicalAppearance,
+  i as useAppearance,
+  E as useAppearanceAttributes
 };
 //# sourceMappingURL=appearance-boundary.js.map

package/dist/components/appearance-boundary/appearance-boundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-boundary.js","sources":["../../../src/components/appearance-boundary/appearance-boundary.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { ComposeAsChild } from \"../slot/compose-as-child\"\n\n/**\n * A region that carries its own appearance — `packages/tokens/SPEC.md` §2 rule 3's document\n * boundary, as a component instead of two hand-written DOM attributes.\n *\n * **What it is for.** Mode is the page's: the shell stamps `data-theme` on `<html>` and every token\n * resolves from there through ordinary CSS inheritance. The one exception is a region that renders\n * content the page does not own — a variable, email or journey preview, a code editor — which brings\n * its own theme regardless of the shell's. The generated sheet already supports that: it emits every\n * treatment's light values under `.light[data-surface=\"<t>\"], [data-theme=\"light\"][data-surface=\"<t>\"]`\n * after the dark blocks, and the dark compounds `[data-theme=\"dark\"][data-surface=\"<t>\"]` alongside\n * them, so an element carrying BOTH attributes wins over an ancestor's mode on specificity and\n * source order. This component is the supported way to stamp that pair.\n *\n * **Why both props are required.** The two attributes are one boundary, not two independent\n * switches. The role tokens (`surface.*`, `border.*`, `shadow.*`, `blur.*`) resolve through the\n * compound `[data-theme=…][data-surface=…]` selector; stamping only `data-theme` would reset the\n * mode while leaving the treatment to be inherited from whatever ancestor happens to declare one —\n * so a boundary would silently render the page's treatment under the region's mode, which is a\n * combination nobody designed. Requiring `surface` makes the caller say which treatment the region\n * is, rather than having this component fabricate a plausible one.\n *\n * **Without a boundary nothing changes.** No component reads `document.documentElement`, and none\n * of them consults this context for anything except re-stamping portalled content (below). A tree\n * with no `AppearanceBoundary` behaves exactly as it does today: live shell attributes stay\n * authoritative, including when the shell flips them after mount.\n *\n * **Density is a separate axis** and stays that way. `DensityProvider` is independent, its context\n * is a different context, and this component neither reads nor writes `data-density`. A region can\n * be inside both, in either nesting order.\n *\n * **Scope limit, stated plainly.** The React context below is per bundled copy of this package. Two\n * independently bundled micro-frontends do not share it, so a boundary in one does not reach\n * portalled content rendered by the other. The DOM attributes it stamps *are* shared — they are\n * ordinary CSS — so the non-portal case works across copies; it is only the portal re-stamp that is\n * copy-local. Each MFE wraps its own root.\n */\n\nexport type AppearanceMode = \"light\" | \"dark\"\n\nexport type AppearanceSurface = \"plain\" | \"bordered\" | \"glass\" | \"tint\" | \"card\"\n\nexport type Appearance = {\n  mode: AppearanceMode\n  surface: AppearanceSurface\n}\n\nconst CANONICAL_MODES: readonly AppearanceMode[] = [\"light\", \"dark\"]\nconst CANONICAL_SURFACES: readonly AppearanceSurface[] = [\n  \"plain\",\n  \"bordered\",\n  \"glass\",\n  \"tint\",\n  \"card\",\n]\n\n/**\n * Per-axis normalization of invalid runtime input, mirroring `canonicalDensity`. A typed caller\n * cannot reach this; a plain-JavaScript one can, and a bad string would otherwise be stamped\n * verbatim into `data-theme`/`data-surface`, where no generated selector matches it — leaving the\n * region with the shell's appearance while `useAppearance()` reported the boundary's.\n *\n * Per axis, not all-or-nothing: a valid `mode` with a garbage `surface` keeps the mode. Collapsing\n * both to the default because one was wrong would throw away information the caller did supply.\n */\nexport const canonicalAppearance = (appearance: Appearance): Appearance => ({\n  mode: CANONICAL_MODES.includes(appearance.mode) ? appearance.mode : \"light\",\n  surface: CANONICAL_SURFACES.includes(appearance.surface)\n    ? appearance.surface\n    : \"plain\",\n})\n\n/**\n * Unexported, same as `DensityContext` — read only through `useAppearance()`. Default `undefined`:\n * a component with no `AppearanceBoundary` ancestor gets `undefined`, never a fabricated\n * `{light, plain}`, which would be this package inventing a reading of the live shell attributes it\n * deliberately does not read.\n */\nconst AppearanceContext = React.createContext<Appearance | undefined>(undefined)\n\ntype AppearanceBoundaryBaseProps = Omit<\n  React.ComponentProps<\"div\">,\n  \"children\"\n> & {\n  /** The mode this region renders in, regardless of the page's. No default. */\n  mode: AppearanceMode\n  /** The treatment this region restates. Required — see the note on both props above. */\n  surface: AppearanceSurface\n}\n\nexport type AppearanceBoundaryProps =\n  | (AppearanceBoundaryBaseProps & {\n      asChild?: false\n      children?: React.ReactNode\n    })\n  | (AppearanceBoundaryBaseProps & {\n      asChild: true\n      children: React.ReactElement\n    })\n\n/**\n * The default is one ordinary HTML div. `asChild` stamps the same authoritative pair on one actual\n * child without a wrapper, while keeping the context provider around it so portal descendants keep\n * their nearest explicit appearance. Child markers remain the child's identity.\n */\nexport const AppearanceBoundary = React.forwardRef<\n  HTMLDivElement,\n  AppearanceBoundaryProps\n>(function AppearanceBoundary(\n  { mode, surface, asChild = false, className, children, ...props },\n  ref\n) {\n  const value = React.useMemo(\n    () => canonicalAppearance({ mode, surface }),\n    [mode, surface]\n  )\n\n  const content = asChild ? (\n    <ComposeAsChild\n      {...props}\n      ref={ref}\n      className={className}\n      forceProps={{ \"data-theme\": value.mode, \"data-surface\": value.surface }}\n      // Authoritative, spread LAST: required normalized props win over conflicting child attrs.\n      data-theme={value.mode}\n      data-surface={value.surface}\n    >\n      {children as React.ReactElement}\n    </ComposeAsChild>\n  ) : (\n    <div\n      ref={ref}\n      data-slot=\"appearance-boundary\"\n      {...{ [SLOT_ATTR]: \"appearance-boundary\" }}\n      className={className}\n      {...props}\n      // Authoritative, spread LAST — the same ordering rule `DensityProvider` applies to\n      // `data-density`. `AppearanceBoundaryProps` extends every native div prop, so a caller can\n      // pass a raw conflicting `data-theme`/`data-surface`; the normalized required props win, and\n      // the DOM attributes then always agree with the context value below.\n      data-theme={value.mode}\n      data-surface={value.surface}\n    >\n      {children}\n    </div>\n  )\n\n  return (\n    <AppearanceContext.Provider value={value}>\n      {content}\n    </AppearanceContext.Provider>\n  )\n})\n\n/**\n * The nearest explicit boundary, or `undefined` when there is none. Package-internal — NOT exported\n * from `src/index.ts`; `AppearanceBoundary` is the whole public surface. Never reads\n * `getComputedStyle` or `documentElement`: `undefined` means \"no explicit boundary in the React\n * tree\", not \"the ambient appearance is unknown\".\n */\nexport const useAppearance = (): Appearance | undefined =>\n  React.useContext(AppearanceContext)\n\n/**\n * The attributes a portal-content element re-stamps, or nothing at all.\n *\n * Portalled content is a React-tree descendant but a DOM sibling, so a boundary's DOM attributes do\n * not reach it while its context does — exactly the asymmetry `DensityProvider` was built around\n * (DENSITY-SPEC.md §4.4). One helper rather than the same ternary pair at nine call sites, and one\n * place where \"no explicit boundary ⇒ stamp NEITHER attribute\" is decided: stamping a fabricated\n * `light`/`plain` would mask the live shell inheritance that already reaches the portal correctly,\n * and stamping only one of the pair would produce the mode-without-treatment combination the\n * required props exist to prevent.\n *\n * Package-internal, and deliberately a hook returning a spreadable object rather than a public\n * `useAppearance()` + a public attribute builder — there is one consumer shape and it is inside\n * this package.\n */\nexport const useAppearanceAttributes = (): {\n  \"data-theme\"?: AppearanceMode\n  \"data-surface\"?: AppearanceSurface\n} => {\n  const appearance = useAppearance()\n  return appearance === undefined\n    ? {}\n    : { \"data-theme\": appearance.mode, \"data-surface\": appearance.surface }\n}\n"],"names":["CANONICAL_MODES","CANONICAL_SURFACES","canonicalAppearance","appearance","AppearanceContext","React","AppearanceBoundary","mode","surface","asChild","className","children","props","ref","value","content","jsx","ComposeAsChild","SLOT_ATTR","useAppearance","useAppearanceAttributes"],"mappings":";;;;AAmDA,MAAMA,IAA6C,CAAC,SAAS,MAAM,GAC7DC,IAAmD;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWaC,IAAsB,CAACC,OAAwC;AAAA,EAC1E,MAAMH,EAAgB,SAASG,EAAW,IAAI,IAAIA,EAAW,OAAO;AAAA,EACpE,SAASF,EAAmB,SAASE,EAAW,OAAO,IACnDA,EAAW,UACX;AACN,IAQMC,IAAoBC,EAAM,cAAsC,MAAS,GA2BlEC,IAAqBD,EAAM,WAGtC,SACA,EAAE,MAAAE,GAAM,SAAAC,GAAS,SAAAC,IAAU,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMC,IAAQT,EAAM;AAAA,IAClB,MAAMH,EAAoB,EAAE,MAAAK,GAAM,SAAAC,GAAS;AAAA,IAC3C,CAACD,GAAMC,CAAO;AAAA,EAAA,GAGVO,IAAUN,IACd,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACJ,KAAAC;AAAA,MACA,WAAAH;AAAA,MACA,YAAY,EAAE,cAAcI,EAAM,MAAM,gBAAgBA,EAAM,QAAA;AAAA,MAE9D,cAAYA,EAAM;AAAA,MAClB,gBAAcA,EAAM;AAAA,MAEnB,UAAAH;AAAA,IAAA;AAAA,EAAA,IAGH,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACK,CAAS,GAAG;AAAA,MACnB,WAAAR;AAAA,MACC,GAAGE;AAAA,MAKJ,cAAYE,EAAM;AAAA,MAClB,gBAAcA,EAAM;AAAA,MAEnB,UAAAH;AAAA,IAAA;AAAA,EAAA;AAIL,SACE,gBAAAK,EAACZ,EAAkB,UAAlB,EAA2B,OAAAU,GACzB,UAAAC,GACH;AAEJ,CAAC,GAQYI,IAAgB,MAC3Bd,EAAM,WAAWD,CAAiB,GAiBvBgB,IAA0B,MAGlC;AACH,QAAMjB,IAAagB,EAAA;AACnB,SAAOhB,MAAe,SAClB,CAAA,IACA,EAAE,cAAcA,EAAW,MAAM,gBAAgBA,EAAW,QAAA;AAClE;"}
+{"version":3,"file":"appearance-boundary.js","sources":["../../../src/components/appearance-boundary/appearance-boundary.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { ComposeAsChild } from \"../slot/compose-as-child\"\n\n/**\n * A region that carries its own appearance — `packages/tokens/SPEC.md` §2 rule 3's document\n * boundary, as a component instead of two hand-written DOM attributes.\n */\n\nexport type AppearanceMode = \"light\" | \"dark\"\n\n/**\n * Reduced from five to two on 2026-09-17: `glass`, `tint` and `card` were removed and `plain`\n * was renamed `flat`. `flat` is the root anchor, `bordered` the inheritance base (SPEC §2 rule 3).\n */\nexport type AppearanceSurface = \"flat\" | \"bordered\"\n\nexport type Appearance = {\n  mode: AppearanceMode\n  surface: AppearanceSurface\n}\n\nconst CANONICAL_MODES: readonly AppearanceMode[] = [\"light\", \"dark\"]\nconst CANONICAL_SURFACES: readonly AppearanceSurface[] = [\"flat\", \"bordered\"]\n\n/** Per-axis normalization of invalid runtime input, mirroring `canonicalDensity`. */\nexport const canonicalAppearance = (appearance: Appearance): Appearance => ({\n  mode: CANONICAL_MODES.includes(appearance.mode) ? appearance.mode : \"light\",\n  surface: CANONICAL_SURFACES.includes(appearance.surface)\n    ? appearance.surface\n    : \"flat\",\n})\n\n/**\n * Unexported, same as `DensityContext` — read only through `useAppearance()`. Default `undefined`:\n * a component with no `AppearanceBoundary` ancestor gets `undefined`, never a fabricated\n * `{light, plain}`, which would be this package inventing a reading of the live shell attributes it\n * deliberately does not read.\n */\nconst AppearanceContext = React.createContext<Appearance | undefined>(undefined)\n\n/**\n * A mode is a canvas, so a region that restates one has to paint it. `flat` leaves\n * `surface.object` transparent, which means a boundary that only stamped the attributes let the\n * page behind it show through: a `mode=\"light\"` region on a dark page rendered light ink onto the\n * dark page at 1.08:1. Painting `body` is what makes \"regardless of the page's\" true.\n *\n * Skipped when the nearest ancestor boundary already declares this mode, so restating a mode\n * inside a region that has one stays transparent and composes as before.\n */\nconst useCanvasStyles = makeZenithStyles({\n  canvas: { backgroundColor: tokens.body },\n})\n\ntype AppearanceBoundaryBaseProps = Omit<\n  React.ComponentProps<\"div\">,\n  \"children\"\n> & {\n  /** The mode this region renders in, regardless of the page's. No default. */\n  mode: AppearanceMode\n  /** The treatment this region restates. Required — see the note on both props above. */\n  surface: AppearanceSurface\n}\n\nexport type AppearanceBoundaryProps =\n  | (AppearanceBoundaryBaseProps & {\n      asChild?: false\n      children?: React.ReactNode\n    })\n  | (AppearanceBoundaryBaseProps & {\n      asChild: true\n      children: React.ReactElement\n    })\n\n/**\n * The default is one ordinary HTML div. `asChild` stamps the same authoritative pair on one actual\n * child without a wrapper, while keeping the context provider around it so portal descendants keep\n * their nearest explicit appearance. Child markers remain the child's identity.\n */\nexport const AppearanceBoundary = React.forwardRef<\n  HTMLDivElement,\n  AppearanceBoundaryProps\n>(function AppearanceBoundary(\n  { mode, surface, asChild = false, className, children, ...props },\n  ref\n) {\n  const value = React.useMemo(\n    () => canonicalAppearance({ mode, surface }),\n    [mode, surface]\n  )\n\n  const inherited = useAppearance()\n  const styles = useCanvasStyles()\n  const merged =\n    inherited?.mode === value.mode\n      ? className\n      : mergeClasses(styles.canvas, className)\n\n  const content = asChild ? (\n    <ComposeAsChild\n      {...props}\n      ref={ref}\n      className={merged}\n      forceProps={{ \"data-theme\": value.mode, \"data-surface\": value.surface }}\n      // Authoritative, spread LAST: required normalized props win over conflicting child attrs.\n      data-theme={value.mode}\n      data-surface={value.surface}\n    >\n      {children as React.ReactElement}\n    </ComposeAsChild>\n  ) : (\n    <div\n      ref={ref}\n      data-slot=\"appearance-boundary\"\n      {...{ [SLOT_ATTR]: \"appearance-boundary\" }}\n      className={merged}\n      {...props}\n      // Authoritative, spread LAST — the same ordering rule `DensityProvider` applies to\n      // `data-density`. `AppearanceBoundaryProps` extends every native div prop, so a caller can\n      // pass a raw conflicting `data-theme`/`data-surface`; the normalized required props win, and\n      // the DOM attributes then always agree with the context value below.\n      data-theme={value.mode}\n      data-surface={value.surface}\n    >\n      {children}\n    </div>\n  )\n\n  return (\n    <AppearanceContext.Provider value={value}>\n      {content}\n    </AppearanceContext.Provider>\n  )\n})\n\n/**\n * The nearest explicit boundary, or `undefined` when there is none. Package-internal — NOT exported\n * from `src/index.ts`; `AppearanceBoundary` is the whole public surface. Never reads\n * `getComputedStyle` or `documentElement`: `undefined` means \"no explicit boundary in the React\n * tree\", not \"the ambient appearance is unknown\".\n */\nexport const useAppearance = (): Appearance | undefined =>\n  React.useContext(AppearanceContext)\n\n/**\n * The attributes a portal-content element re-stamps, or nothing at all. Portalled content is a\n * React-tree descendant but a DOM sibling, so a boundary's DOM attributes do not reach it while\n * its context does — exactly the asymmetry `DensityProvider` was built around (DENSITY-SPEC.md\n * §4.4).\n */\nexport const useAppearanceAttributes = (): {\n  \"data-theme\"?: AppearanceMode\n  \"data-surface\"?: AppearanceSurface\n} => {\n  const appearance = useAppearance()\n  return appearance === undefined\n    ? {}\n    : { \"data-theme\": appearance.mode, \"data-surface\": appearance.surface }\n}\n"],"names":["CANONICAL_MODES","CANONICAL_SURFACES","canonicalAppearance","appearance","AppearanceContext","React","useCanvasStyles","makeZenithStyles","tokens.body","AppearanceBoundary","mode","surface","asChild","className","children","props","ref","value","inherited","useAppearance","styles","merged","mergeClasses","content","jsx","ComposeAsChild","SLOT_ATTR","useAppearanceAttributes"],"mappings":";;;;;;AA2BA,MAAMA,IAA6C,CAAC,SAAS,MAAM,GAC7DC,IAAmD,CAAC,QAAQ,UAAU,GAG/DC,IAAsB,CAACC,OAAwC;AAAA,EAC1E,MAAMH,EAAgB,SAASG,EAAW,IAAI,IAAIA,EAAW,OAAO;AAAA,EACpE,SAASF,EAAmB,SAASE,EAAW,OAAO,IACnDA,EAAW,UACX;AACN,IAQMC,IAAoBC,EAAM,cAAsC,MAAS,GAWzEC,IAAkBC,EAAiB;AAAA,EACvC,QAAQ,EAAE,iBAAiBC,EAAO;AACpC,CAAC,GA2BYC,IAAqBJ,EAAM,WAGtC,SACA,EAAE,MAAAK,GAAM,SAAAC,GAAS,SAAAC,IAAU,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMC,IAAQZ,EAAM;AAAA,IAClB,MAAMH,EAAoB,EAAE,MAAAQ,GAAM,SAAAC,GAAS;AAAA,IAC3C,CAACD,GAAMC,CAAO;AAAA,EAAA,GAGVO,IAAYC,EAAA,GACZC,IAASd,EAAA,GACTe,KACJH,KAAA,gBAAAA,EAAW,UAASD,EAAM,OACtBJ,IACAS,EAAaF,EAAO,QAAQP,CAAS,GAErCU,IAAUX,IACd,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGV;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWK;AAAA,MACX,YAAY,EAAE,cAAcJ,EAAM,MAAM,gBAAgBA,EAAM,QAAA;AAAA,MAE9D,cAAYA,EAAM;AAAA,MAClB,gBAAcA,EAAM;AAAA,MAEnB,UAAAH;AAAA,IAAA;AAAA,EAAA,IAGH,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,aAAU;AAAA,MACJ,CAACU,CAAS,GAAG;AAAA,MACnB,WAAWL;AAAA,MACV,GAAGN;AAAA,MAKJ,cAAYE,EAAM;AAAA,MAClB,gBAAcA,EAAM;AAAA,MAEnB,UAAAH;AAAA,IAAA;AAAA,EAAA;AAIL,SACE,gBAAAU,EAACpB,EAAkB,UAAlB,EAA2B,OAAAa,GACzB,UAAAM,GACH;AAEJ,CAAC,GAQYJ,IAAgB,MAC3Bd,EAAM,WAAWD,CAAiB,GAQvBuB,IAA0B,MAGlC;AACH,QAAMxB,IAAagB,EAAA;AACnB,SAAOhB,MAAe,SAClB,CAAA,IACA,EAAE,cAAcA,EAAW,MAAM,gBAAgBA,EAAW,QAAA;AAClE;"}

package/dist/components/badge/badge.js

@@ -31,7 +31,7 @@ const X = [
   "bronze"
 ], o = "--zenith-badge-bg", a = "--zenith-badge-fg", s = "--zenith-badge-bd", m = (e) => e === "neutral" ? "gray" : e, d = (e) => I(e) ? W : E, n = (e, r) => {
   const t = m(e);
-  return `var(--zenith-${d(t)}-sem-${t}-${r})`;
+  return `var(--zenith-${d(t)}-${t}-${r})`;
 }, F = (e, r) => {
   const t = m(e);
   return `var(--zenith-${d(t)}-${t}-${r})`;

package/dist/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component\n * that takes a `color` prop.\n *\n * v1 enumerates 20 colours x 3 styles as 60 `compoundVariants`, each a distinct class string like\n * `volt-bg-mint-soft`. Because those names are built by interpolation, Tailwind's scanner cannot\n * see them, which is what `safelist.css` exists to force — 9 lines that emit ~945 rules, 65.6 KB\n * and 59% of v1's entire rule count. The Griffel PoC carried the same shape forward as 60 static\n * style objects.\n *\n * Here the colour is a VALUE, not part of a class name. Three atoms read three custom properties;\n * the component sets those properties inline from the `color` prop. Total rules: one small set per\n * style variant, regardless of how many colours exist. Adding a 22nd palette family costs zero\n * rules.\n *\n * Two consequences worth knowing:\n *  - `color` may legitimately arrive from a runtime expression (`getColorForEntityLabel(label)` and\n *    `WCAG_BADGE_MAP[level].color` both exist in consumer code today), which no build step can\n *    resolve. That is exactly why the palette sheet cannot be statically shaken, and why this\n *    component calls `ensurePaletteTokens()`.\n *  - Selectors key on SLOT_ATTR, never on `data-slot`. `data-slot` values are shared with v1, so a\n *    rule keyed on one also matches v1-rendered DOM — the StyleX track had a v1 icon compute to\n *    0x0 through a green gate this way. `data-slot` is still emitted, purely as a diagnostic.\n */\n\nconst COLORS = [\n  \"accent\",\n  \"neutral\",\n  \"gray\",\n  \"success\",\n  \"warning\",\n  \"error\",\n  \"info\",\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n] as const\n\nexport type BadgeColor = (typeof COLORS)[number]\nexport type BadgeVariant = \"soft\" | \"solid\" | \"surface\"\nexport type BadgeSize = \"sm\" | \"base\" | \"lg\"\n\n/** The three slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-badge-bg\"\nconst FG = \"--zenith-badge-fg\"\nconst BD = \"--zenith-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\n/**\n * The namespace fix. `resolveColor` runs FIRST so `neutral` is classified as `gray` (core) rather\n * than as the literal string \"neutral\" (which is in neither sheet's family list) — same order\n * `semantic`/`primitive` already apply it in. This does not touch `useZenithPaletteTokensFor(color)`\n * above, which still receives the raw, unresolved `color` prop and therefore still installs the\n * palette sheet for `color=\"neutral\"` even though the resolved family needs none of it — a\n * separate, pre-existing inefficiency this fix does not optimize.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: BadgeColor, slot: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-sem-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-${family}-${step})`\n}\n\n/**\n * Which token each variant pulls into each slot. This replaces the 60-entry compound matrix: it is\n * data about three variants, not about 60 combinations.\n */\nconst VARIANT_SLOTS: Record<\n  BadgeVariant,\n  (color: BadgeColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: \"transparent\",\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: primitive(c, \"a6\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"fit-content\",\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontWeight: tokens.fontWeightNormal,\n    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a\n    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would\n    // both survive with the winner decided by insertion order. Griffel warns at runtime, which\n    // means the mistake ships silently in production where nobody reads the console.\n    // `shorthands.*` expands to the individual longhands.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    transitionProperty: \"color, box-shadow\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused\n    // badge paints the error ring, matching v1's variant ordering.\n    \"&[aria-invalid]\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"& > svg\": { pointerEvents: \"none\" },\n  },\n  sm: {\n    fontSize: tokens.textXs,\n    lineHeight: \"1rem\",\n    letterSpacing: \"0.04px\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement1,\n    minWidth: \"1rem\",\n    borderRadius: \"3px\",\n    \"& > svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  base: {\n    fontSize: tokens.textSm,\n    lineHeight: \"1.25rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement2,\n    minWidth: \"1.25rem\",\n    borderRadius: tokens.radiusSm,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    fontSize: tokens.textBase,\n    lineHeight: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement3,\n    minWidth: \"1.5rem\",\n    borderRadius: tokens.radiusMd,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n})\n\nexport type BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: BadgeColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute\n   * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is\n   * not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      className,\n      color = \"accent\",\n      variant = \"soft\",\n      size = \"base\",\n      style,\n      ...props\n    },\n    ref\n  ) {\n    // A decorative family can still arrive from an expression the build cannot see, so this has to\n    // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) —\n    // but it is the resolved family that decides, and a core one needs no palette sheet.\n    useZenithPaletteTokensFor(color)\n\n    const styles = useStyles()\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...{ [SLOT_ATTR]: \"badge\" }}\n        className={mergeClasses(styles.root, styles[size], className)}\n        style={\n          { ...VARIANT_SLOTS[variant](color), ...style } as React.CSSProperties\n        }\n        {...props}\n      />\n    )\n  }\n)\n\nexport { COLORS as BADGE_COLORS }\n"],"names":["COLORS","BG","FG","BD","resolveColor","color","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","tokens.fontWeightNormal","shorthands","tokens.accentA8","tokens.errorA8","tokens.textXs","tokens.spacingElement1","tokens.textSm","tokens.spacingElement2","tokens.radiusSm","tokens.textBase","tokens.spacingElement3","tokens.radiusMd","Badge","React","className","variant","size","style","props","ref","useZenithPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component\n * that takes a `color` prop.\n */\n\nconst COLORS = [\n  \"accent\",\n  \"neutral\",\n  \"gray\",\n  \"success\",\n  \"warning\",\n  \"error\",\n  \"info\",\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n] as const\n\nexport type BadgeColor = (typeof COLORS)[number]\nexport type BadgeVariant = \"soft\" | \"solid\" | \"surface\"\nexport type BadgeSize = \"sm\" | \"base\" | \"lg\"\n\n/** The three slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-badge-bg\"\nconst FG = \"--zenith-badge-fg\"\nconst BD = \"--zenith-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\n/**\n * The namespace fix. `resolveColor` runs FIRST so `neutral` is classified as `gray` (core) rather\n * than as the literal string \"neutral\" (which is in neither sheet's family list) — same order\n * `semantic`/`primitive` already apply it in.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: BadgeColor, slot: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-${family}-${step})`\n}\n\n/**\n * Which token each variant pulls into each slot. This replaces the 60-entry compound matrix: it is\n * data about three variants, not about 60 combinations.\n */\nconst VARIANT_SLOTS: Record<\n  BadgeVariant,\n  (color: BadgeColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: \"transparent\",\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: primitive(c, \"a6\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"fit-content\",\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontWeight: tokens.fontWeightNormal,\n    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a\n    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would\n    // both survive with the winner decided by insertion order. Griffel warns at runtime, which\n    // means the mistake ships silently in production where nobody reads the console.\n    // `shorthands.*` expands to the individual longhands.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    transitionProperty: \"color, box-shadow\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused\n    // badge paints the error ring, matching v1's variant ordering.\n    \"&[aria-invalid]\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"& > svg\": { pointerEvents: \"none\" },\n  },\n  sm: {\n    fontSize: tokens.textXs,\n    lineHeight: \"1rem\",\n    letterSpacing: \"0.04px\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement1,\n    minWidth: \"1rem\",\n    borderRadius: \"3px\",\n    \"& > svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  base: {\n    fontSize: tokens.textSm,\n    lineHeight: \"1.25rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement2,\n    minWidth: \"1.25rem\",\n    borderRadius: tokens.radiusSm,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    fontSize: tokens.textBase,\n    lineHeight: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement3,\n    minWidth: \"1.5rem\",\n    borderRadius: tokens.radiusMd,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n})\n\nexport type BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: BadgeColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute\n   * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is\n   * not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      className,\n      color = \"accent\",\n      variant = \"soft\",\n      size = \"base\",\n      style,\n      ...props\n    },\n    ref\n  ) {\n    // A decorative family can still arrive from an expression the build cannot see, so this has to\n    // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) —\n    // but it is the resolved family that decides, and a core one needs no palette sheet.\n    useZenithPaletteTokensFor(color)\n\n    const styles = useStyles()\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...{ [SLOT_ATTR]: \"badge\" }}\n        className={mergeClasses(styles.root, styles[size], className)}\n        style={\n          { ...VARIANT_SLOTS[variant](color), ...style } as React.CSSProperties\n        }\n        {...props}\n      />\n    )\n  }\n)\n\nexport { COLORS as BADGE_COLORS }\n"],"names":["COLORS","BG","FG","BD","resolveColor","color","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","tokens.fontWeightNormal","shorthands","tokens.accentA8","tokens.errorA8","tokens.textXs","tokens.spacingElement1","tokens.textSm","tokens.spacingElement2","tokens.radiusSm","tokens.textBase","tokens.spacingElement3","tokens.radiusMd","Badge","React","className","variant","size","style","props","ref","useZenithPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as x } from "react/jsx-runtime";
 import * as o from "react";
 import { SLOT_ATTR as c, mergeClasses as u, shorthands as b } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as B } from "../../styles/make-styles.js";
-import { semGrayDefault as p, fontWeightSemibold as f, accentA8 as L, semGrayLight as g, leadingBase as R, textBase as S, spacingElement1 as I, spacingElement2 as N } from "../../tokens/index.js";
+import { grayDefault as p, fontWeightSemibold as f, accentA8 as L, grayLight as g, leadingBase as R, textBase as S, spacingElement1 as I, spacingElement2 as N } from "../../tokens/index.js";
 import { Root as T } from "../../vendor/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
 const h = B({
   list: {
@@ -45,24 +45,24 @@ const h = B({
     color: p
   }
 }), w = o.forwardRef(
-  function({ separator: t = "/", className: a, children: i, ...n }, s) {
-    const l = h(), m = o.Children.toArray(i).filter(o.isValidElement);
+  function({ separator: t = "/", className: a, children: i, ...n }, l) {
+    const s = h(), m = o.Children.toArray(i).filter(o.isValidElement);
     return /* @__PURE__ */ e(
       "nav",
       {
-        ref: s,
+        ref: l,
         "data-slot": "breadcrumb",
         [c]: "breadcrumb",
         "aria-label": "Breadcrumb",
         className: a,
         ...n,
-        children: /* @__PURE__ */ e("ol", { className: l.list, children: m.map((r, d) => /* @__PURE__ */ x(o.Fragment, { children: [
+        children: /* @__PURE__ */ e("ol", { className: s.list, children: m.map((r, d) => /* @__PURE__ */ x(o.Fragment, { children: [
           d > 0 && /* @__PURE__ */ e(
             "li",
             {
               role: "presentation",
               "aria-hidden": "true",
-              className: l.separator,
+              className: s.separator,
               children: t
             }
           ),
@@ -71,16 +71,16 @@ const h = B({
       }
     );
   }
-), z = o.forwardRef(function({ href: t, isCurrent: a = !1, className: i, children: n, asChild: s = !1, ...l }, m) {
-  const r = h(), y = !!t || s ? /* @__PURE__ */ e(
-    s ? T : "a",
+), z = o.forwardRef(function({ href: t, isCurrent: a = !1, className: i, children: n, asChild: l = !1, ...s }, m) {
+  const r = h(), y = !!t || l ? /* @__PURE__ */ e(
+    l ? T : "a",
     {
       "data-slot": "breadcrumb-link",
       [c]: "breadcrumb-link",
       ...t ? { href: t } : {},
       className: u(r.link, i),
       ...a ? { "aria-current": "page" } : {},
-      ...l,
+      ...s,
       children: n
     }
   ) : /* @__PURE__ */ e(

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * Breadcrumb — Card's compound pattern applied to the nav / ol / li structure.\n *\n * v1's `Breadcrumb` walks its children and interleaves a presentational separator `<li>` between\n * them; `BreadcrumbItem` decides between a link and a plain page by whether a `href` exists. The\n * `nav` / `ol` / `li` semantics and the `aria-current=\"page\"` handling are the real value of this\n * component and are reproduced exactly.\n *\n * v1 renders the link branch through Radix `Slot` when `asChild` is set — dropped here per\n * CONVENTIONS rule 6 (no Radix dependency). There is no `asChild` escape hatch; a consumer wanting\n * a non-`<a>` link anchors it themselves.\n *\n * `BreadcrumbItem` with a `href` renders an `<a>` (slot `breadcrumb-link`); without one, a `<span>`\n * (slot `breadcrumb-page`). Either way the item is wrapped in a `breadcrumb-item` `<li>`. The nav\n * itself has no base styles in v1 — it is left to the caller's className — so it carries only the\n * slot attributes.\n *\n * The link's `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — literals from the framework's default theme, which is\n * visible motion and cannot be read from the v1 file (Rule 0: flagged, not approximated away).\n */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n}\n\nconst useStyles = makeZenithStyles({\n  list: {\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  separator: {\n    color: tokens.semGrayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  link: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.semGrayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb({ separator = \"/\", className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label=\"Breadcrumb\"\n        className={className}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. v1 supports it; it was dropped here while the package\n   * was on Base UI and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  { href, isCurrent = false, className, children, asChild = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const LinkRoot = asChild ? Slot : \"a\"\n\n  const content =\n    isLink || asChild ? (\n      <LinkRoot\n        data-slot=\"breadcrumb-link\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-link\" }}\n        {...(href ? { href } : {})}\n        className={mergeClasses(styles.link, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n        {...props}\n      >\n        {children}\n      </LinkRoot>\n    ) : (\n      <span\n        data-slot=\"breadcrumb-page\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n        className={mergeClasses(styles.page, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n      >\n        {children}\n      </span>\n    )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      className={styles.item}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.semGrayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semGrayDefault","tokens.accentA8","Breadcrumb","React","separator","className","children","props","ref","styles","items","jsx","SLOT_ATTR","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","content","Slot","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/** Breadcrumb — Card's compound pattern applied to the nav / ol / li structure. */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n}\n\nconst useStyles = makeZenithStyles({\n  list: {\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  separator: {\n    color: tokens.grayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  link: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.grayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb({ separator = \"/\", className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label=\"Breadcrumb\"\n        className={className}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. v1 supports it; it was dropped here while the package\n   * was on Base UI and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  { href, isCurrent = false, className, children, asChild = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const LinkRoot = asChild ? Slot : \"a\"\n\n  const content =\n    isLink || asChild ? (\n      <LinkRoot\n        data-slot=\"breadcrumb-link\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-link\" }}\n        {...(href ? { href } : {})}\n        className={mergeClasses(styles.link, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n        {...props}\n      >\n        {children}\n      </LinkRoot>\n    ) : (\n      <span\n        data-slot=\"breadcrumb-page\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n        className={mergeClasses(styles.page, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n      >\n        {children}\n      </span>\n    )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      className={styles.item}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.grayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.grayDefault","tokens.accentA8","Breadcrumb","React","separator","className","children","props","ref","styles","items","jsx","SLOT_ATTR","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","content","Slot","mergeClasses"],"mappings":"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"}

package/dist/components/button/button.js

@@ -1,9 +1,9 @@
 import { jsx as b } from "react/jsx-runtime";
-import * as s from "react";
+import * as a from "react";
 import { mergeClasses as w, SLOT_ATTR as B, shorthands as n } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as H } from "../../styles/make-styles.js";
-import { capTrim as E } from "../../styles/text-box.js";
-import { radiusLg as A, buttonIconSize as g, leadingLg as R, textLg as I, leadingBase as z, textBase as L, buttonBaseMinHeight as O, leadingSm as T, textSm as D, leadingXs as P, textXs as X, semErrorSoft as h, errorA11 as $, semErrorSoftHover as V, semErrorOnSoft as W, semErrorSolidHover as u, semErrorContrast as j, semErrorSolid as F, semAccentSoft as d, grayA12 as M, accentA11 as N, semAccentSoftHover as K, semAccentOnSoft as Z, semAccentSolidHover as p, semAccentContrast as _, semAccentSolid as q, semFocusRing as G, fontWeightSemibold as J, buttonBasePaddingInline as Q, spacingElement3 as U } from "../../tokens/index.js";
+import { capTrim as R } from "../../styles/text-box.js";
+import { radiusLg as I, buttonIconSize as m, leadingLg as z, textLg as E, leadingBase as L, textBase as O, buttonBaseMinHeight as T, leadingSm as A, textSm as D, leadingXs as P, textXs as X, errorSoft as h, errorA11 as $, errorSoftHover as V, errorOnSoft as W, errorSolidHover as u, errorContrast as j, errorSolid as M, accentSoft as d, grayA12 as N, accentA11 as F, accentSoftHover as K, accentOnSoft as Z, accentSolidHover as p, accentContrast as _, accentSolid as q, focusRing as G, fontWeightSemibold as J, buttonBasePaddingInline as Q, spacingElement3 as U } from "../../tokens/index.js";
 import { Root as Y } from "../../vendor/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
 const ee = "button", oe = H({
   root: {
@@ -33,7 +33,7 @@ const ee = "button", oe = H({
       color: "currentColor"
     }
   },
-  label: E,
+  label: R,
   primary: {
     backgroundColor: q,
     color: _,
@@ -47,16 +47,16 @@ const ee = "button", oe = H({
   },
   tertiary: {
     backgroundColor: "transparent",
-    color: N,
+    color: F,
     ":hover:not(:disabled)": { backgroundColor: d }
   },
   ghost: {
     backgroundColor: "transparent",
-    color: M,
+    color: N,
     ":hover:not(:disabled)": { backgroundColor: d }
   },
   primaryDestructive: {
-    backgroundColor: F,
+    backgroundColor: M,
     color: j,
     ":hover:not(:disabled)": { backgroundColor: u },
     ":active:not(:disabled)": { backgroundColor: u }
@@ -88,7 +88,7 @@ const ee = "button", oe = H({
     // As above, the fixed 28px size is part of Button's contract, independent of its label box.
     minHeight: "1.75rem",
     fontSize: D,
-    lineHeight: T,
+    lineHeight: A,
     gap: "0.375rem",
     "& svg": { width: "0.875rem", height: "0.875rem" }
   },
@@ -99,9 +99,9 @@ const ee = "button", oe = H({
     // explicit minHeight above the natural content box, same mechanism `lg` already uses).
     ...n.paddingInline(Q),
     ...n.paddingBlock("0.25rem"),
-    minHeight: O,
-    fontSize: L,
-    lineHeight: z,
+    minHeight: T,
+    fontSize: O,
+    lineHeight: L,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -109,8 +109,8 @@ const ee = "button", oe = H({
     ...n.paddingInline("1.25rem"),
     ...n.paddingBlock("0.25rem"),
     minHeight: "2.5rem",
-    fontSize: I,
-    lineHeight: R,
+    fontSize: E,
+    lineHeight: z,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -127,8 +127,8 @@ const ee = "button", oe = H({
   icon: {
     // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable
     // both move freely (DENSITY-SPEC.md §2.4).
-    width: g,
-    height: g,
+    width: m,
+    height: m,
     "& svg": { width: "1.125rem", height: "1.125rem" }
   },
   iconLg: {
@@ -136,13 +136,13 @@ const ee = "button", oe = H({
     height: "2.5rem",
     "& svg": { width: "1.5rem", height: "1.5rem" }
   },
-  normal: { borderRadius: A },
+  normal: { borderRadius: I },
   rounded: { borderRadius: "9999px" }
 });
 function f(c, i = "button") {
-  return s.Children.toArray(c).flatMap((e, t) => {
-    const l = s.isValidElement(e) && e.key !== null ? String(e.key) : String(t), o = `${i}/${l}`;
-    return s.isValidElement(e) && e.type === s.Fragment ? f(e.props.children, o) : [{ node: e, keyPath: o }];
+  return a.Children.toArray(c).flatMap((e, t) => {
+    const l = a.isValidElement(e) && e.key !== null ? String(e.key) : String(t), o = `${i}/${l}`;
+    return a.isValidElement(e) && e.type === a.Fragment ? f(e.props.children, o) : [{ node: e, keyPath: o }];
   });
 }
 function te(c, i) {
@@ -170,12 +170,12 @@ function te(c, i) {
       continue;
     }
     l(), e.push(
-      s.isValidElement(o.node) ? s.cloneElement(o.node, { key: o.keyPath }) : o.node
+      a.isValidElement(o.node) ? a.cloneElement(o.node, { key: o.keyPath }) : o.node
     );
   }
   return l(), e;
 }
-const ce = s.forwardRef(
+const ce = a.forwardRef(
   function({
     variant: i = "primary",
     size: e = "base",
@@ -183,10 +183,10 @@ const ce = s.forwardRef(
     destructive: l = !1,
     className: o,
     asChild: r = !1,
-    children: m,
+    children: g,
     ...S
   }, y) {
-    const a = oe(), k = l && i !== "ghost" ? `${i}Destructive` : i, v = {
+    const s = oe(), k = l && i !== "ghost" ? `${i}Destructive` : i, v = {
       xs: "xs",
       sm: "sm",
       base: "base",
@@ -195,7 +195,7 @@ const ce = s.forwardRef(
       "icon-sm": "iconSm",
       icon: "icon",
       "icon-lg": "iconLg"
-    }[e], C = r ? Y : ee, x = r ? m : te(m, a.label);
+    }[e], C = r ? Y : ee, x = r ? g : te(g, s.label);
     return /* @__PURE__ */ b(
       C,
       {
@@ -203,10 +203,10 @@ const ce = s.forwardRef(
         "data-slot": "button",
         [B]: "button",
         className: w(
-          a.root,
-          a[k],
-          a[v],
-          a[t],
+          s.root,
+          s[k],
+          s[v],
+          s[t],
           o
         ),
         ...S,