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

package/README.md

@@ -20,7 +20,6 @@ shared component-library import map.
 
 ```tsx
 import { Button } from "@epilot/zenith-react"
-import { gray11 } from "@epilot/zenith-react/tokens"
 
 export const Example = () => <Button variant="primary">Continue</Button>
 ```
@@ -34,13 +33,55 @@ import { prepareCoreTokens } from "@epilot/zenith-react/delivery"
 await prepareCoreTokens()
 ```
 
-Optional; no network. Do not add the token CSS as a second stylesheet, and do
-not write generated namespace hashes by hand.
+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`.
 
+## Lay your own screens out
+
+Zenith ships components, not a layout system: there is no `Grid`, `Stack`,
+`Box` or `Spacer`, and there never will be. The space between components is
+yours.
+
+`makeZenithStyles` is **public API for that purpose**, exported from the
+package root alongside `mergeClasses` and `shorthands`. It is the same Griffel
+API Zenith's own components use, so your layout ships its CSS with your
+components and depends on no stylesheet loaded from somewhere else.
+
+```tsx
+import { makeZenithStyles, shorthands } from "@epilot/zenith-react"
+import { spacingLayout1, containerXl } from "@epilot/zenith-react/tokens"
+
+const useStyles = makeZenithStyles({
+  page: {
+    display: "flex",
+    flexDirection: "column",
+    maxWidth: containerXl,
+    ...shorthands.gap(spacingLayout1),
+  },
+})
+```
+
+Take every value from `@epilot/zenith-react/tokens`. A literal hex, a utility
+class from another stylesheet, or a raw pixel value is how a screen drifts away
+from the system and stops following a token change.
+
+A utility-class framework works too, but understand what you are depending on:
+those classes come from a stylesheet your component does not ship, so what your
+screen looks like is decided by whichever version of that stylesheet is
+deployed beside it.
+
 ## Validate the host
 
 - Exercise the application under its real content-security policy.
@@ -57,16 +98,41 @@ 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"
+    }
+  }
+}
+```
+
+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 only
-ever points at a deliberately promoted version. Until a first promotion happens,
-`latest` does not exist.
+`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 go to `next` with a prerelease version:
+Unproven builds stay on `next` with a prerelease version:
 
 ```sh
-npm install @epilot/zenith-react@next   # e.g. 0.1.0-next.0
+npm install @epilot/zenith-react@next
 ```
 
 These are opt-in twice over — you name the tag, and a range like `^0.1.0` never
@@ -76,5 +142,8 @@ resolves a prerelease. Pin an exact version if you adopt one.
 
 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`. Development rules are in
-`AGENTS.md`.
+`@epilot/zenith-react/testing/jest-preset.cjs`.
+
+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/alert-dialog/alert-dialog.js

@@ -1,13 +1,13 @@
-import { jsx as r, jsxs as D, Fragment as x } from "react/jsx-runtime";
+import { jsx as r, jsxs as x, Fragment as h } from "react/jsx-runtime";
 import * as i from "react";
-import { Root as h, Action as b, Cancel as R, Content as T, Description as w, Overlay as C, Portal as v, Title as S, Trigger as N } from "../../vendor/.bun/@radix-ui_react-alert-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-alert-dialog/dist/index.js";
-import { SLOT_ATTR as n, mergeClasses as d, shorthands as c } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as z } from "../appearance-boundary/appearance-boundary.js";
+import { Root as b, Action as R, Cancel as T, Content as w, Description as C, Overlay as v, Portal as S, Title as N, Trigger as z } from "../../vendor/.bun/@radix-ui_react-alert-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-alert-dialog/dist/index.js";
+import { SLOT_ATTR as n, mergeClasses as g, shorthands as d } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as y } from "../appearance-boundary/appearance-boundary.js";
 import { useDensity as F } from "../density-provider/density-provider.js";
 import { makeZenithStyles as W } from "../../styles/make-styles.js";
 import { grayA11 as O, leadingSm as H, textSm as P, grayA12 as X, fontWeightSemibold as j, leadingXl as k, textXl as _, containerXl as I, containerLg as L, containerMd as B, containerSm as E, body as G, spacingElement2 as p, spacingGroup2 as u, grayA1 as M, radiusXl as Z } from "../../tokens/index.js";
-import { Button as y } from "../button/button.js";
-const g = W({
+import { Button as A } from "../button/button.js";
+const m = W({
   overlay: {
     position: "fixed",
     top: 0,
@@ -43,10 +43,10 @@ const g = W({
     display: "grid",
     width: "100%",
     maxWidth: "calc(100% - 2rem)",
-    ...c.gap(u),
-    ...c.borderRadius(Z),
-    ...c.border("1px", "solid", M),
-    ...c.padding(u),
+    ...d.gap(u),
+    ...d.borderRadius(Z),
+    ...d.border("1px", "solid", M),
+    ...d.padding(u),
     // v1 shadow-lg
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
     outlineStyle: "none",
@@ -96,12 +96,12 @@ const g = W({
   header: {
     display: "flex",
     flexDirection: "column",
-    ...c.gap(p),
+    ...d.gap(p),
     textAlign: "left"
   },
   footer: {
     display: "flex",
-    ...c.gap(p),
+    ...d.gap(p),
     justifyContent: "flex-end"
   },
   title: {
@@ -117,11 +117,11 @@ const g = W({
   }
 }), at = i.forwardRef(
   function(t, a) {
-    return /* @__PURE__ */ r(h, { "data-slot": "alert-dialog", ...t });
+    return /* @__PURE__ */ r(b, { "data-slot": "alert-dialog", ...t });
   }
 ), ot = i.forwardRef(function({ className: t, ...a }, o) {
   return /* @__PURE__ */ r(
-    N,
+    z,
     {
       ref: o,
       "data-slot": "alert-dialog-trigger",
@@ -132,7 +132,7 @@ const g = W({
   );
 }), et = i.forwardRef(function(t, a) {
   return /* @__PURE__ */ r(
-    v,
+    S,
     {
       "data-slot": "alert-dialog-portal",
       [n]: "alert-dialog-portal",
@@ -140,80 +140,81 @@ const g = W({
     }
   );
 }), q = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m(), s = y();
   return /* @__PURE__ */ r(
-    C,
+    v,
     {
       ref: o,
       "data-slot": "alert-dialog-overlay",
       [n]: "alert-dialog-overlay",
-      className: d(e.overlay, t),
+      ...s,
+      className: g(e.overlay, t),
       ...a
     }
   );
-}), rt = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, m) {
-  const s = g(), f = F(), A = z();
-  return /* @__PURE__ */ D(x, { children: [
+}), rt = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, s) {
+  const c = m(), f = F(), D = y();
+  return /* @__PURE__ */ x(h, { children: [
     /* @__PURE__ */ r(q, {}),
     /* @__PURE__ */ r(
-      T,
+      w,
       {
-        ref: m,
+        ref: s,
         "data-slot": "alert-dialog-content",
         [n]: "alert-dialog-content",
         ...f !== void 0 ? { "data-density": f } : {},
-        ...A,
-        className: d(s.content, s[a], t),
+        ...D,
+        className: g(c.content, c[a], t),
         ...e,
         children: o
       }
     )
   ] });
 }), it = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m();
   return /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       "data-slot": "alert-dialog-header",
       [n]: "alert-dialog-header",
-      className: d(e.header, t),
+      className: g(e.header, t),
       ...a
     }
   );
 }), lt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m();
   return /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       "data-slot": "alert-dialog-footer",
       [n]: "alert-dialog-footer",
-      className: d(e.footer, t),
+      className: g(e.footer, t),
       ...a
     }
   );
 }), nt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m();
   return /* @__PURE__ */ r(
-    S,
+    N,
     {
       ref: o,
       "data-slot": "alert-dialog-title",
       [n]: "alert-dialog-title",
-      className: d(e.title, t),
+      className: g(e.title, t),
       ...a
     }
   );
 }), st = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m();
   return /* @__PURE__ */ r(
-    w,
+    C,
     {
       ref: o,
       "data-slot": "alert-dialog-description",
       [n]: "alert-dialog-description",
-      className: d(e.description, t),
+      className: g(e.description, t),
       ...a
     }
   );
@@ -222,19 +223,19 @@ const g = W({
   size: a = "base",
   destructive: o = !1,
   className: e,
-  ...m
-}, s) {
-  return /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
-    y,
+  ...s
+}, c) {
+  return /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
+    A,
     {
-      ref: s,
+      ref: c,
       "data-slot": "alert-dialog-action",
       [n]: "alert-dialog-action",
       variant: t,
       size: a,
       destructive: o,
       className: e,
-      ...m
+      ...s
     }
   ) });
 }), dt = i.forwardRef(function({
@@ -242,19 +243,19 @@ const g = W({
   size: a = "base",
   destructive: o = !1,
   className: e,
-  ...m
-}, s) {
-  return /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
-    y,
+  ...s
+}, c) {
+  return /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
+    A,
     {
-      ref: s,
+      ref: c,
       "data-slot": "alert-dialog-cancel",
       [n]: "alert-dialog-cancel",
       variant: t,
       size: a,
       destructive: o,
       className: e,
-      ...m
+      ...s
     }
   ) });
 });

package/dist/components/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"../button/button\"\n\nconst useStyles = makeZenithStyles({\n  overlay: {\n    position: \"fixed\",\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 50,\n    backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  content: {\n    backgroundColor: tokens.body,\n    position: \"fixed\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n    zIndex: 50,\n    display: \"grid\",\n    width: \"100%\",\n    maxWidth: \"calc(100% - 2rem)\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    ...shorthands.padding(tokens.spacingGroup2),\n    // v1 shadow-lg\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    outlineStyle: \"none\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n        to: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n        to: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  sm: {\n    maxWidth: tokens.containerSm,\n  },\n  md: {\n    maxWidth: tokens.containerMd,\n  },\n  lg: {\n    maxWidth: tokens.containerLg,\n  },\n  xl: {\n    \"@media (min-width: 640px)\": {\n      maxWidth: tokens.containerXl,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    textAlign: \"left\",\n  },\n  footer: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    fontSize: tokens.textXl,\n    lineHeight: tokens.leadingXl,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AlertDialogProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Root\n>\n\nexport type AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>\n\nexport type AlertDialogPortalProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Portal\n>\n\nexport type AlertDialogOverlayProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Overlay\n>\n\nexport type AlertDialogSize = \"xl\" | \"lg\" | \"md\" | \"sm\"\n\nexport type AlertDialogContentProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Content\n> & {\n  size?: AlertDialogSize\n}\n\nexport type AlertDialogHeaderProps = React.ComponentProps<\"div\">\nexport type AlertDialogFooterProps = React.ComponentProps<\"div\">\n\nexport type AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>\n\nexport type AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>\n\nexport type AlertDialogActionProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport type AlertDialogCancelProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport const AlertDialog = React.forwardRef<HTMLElement, AlertDialogProps>(\n  function AlertDialog(props, _ref) {\n    return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n  }\n)\n\nexport const AlertDialogTrigger = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,\n  AlertDialogTriggerProps\n>(function AlertDialogTrigger({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"alert-dialog-trigger\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogPortal = React.forwardRef<\n  HTMLElement,\n  AlertDialogPortalProps\n>(function AlertDialogPortal(props, _ref) {\n  return (\n    <AlertDialogPrimitive.Portal\n      data-slot=\"alert-dialog-portal\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-portal\" }}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  AlertDialogOverlayProps\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-overlay\" }}\n      className={mergeClasses(styles.overlay, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(function AlertDialogContent(\n  { className, size = \"xl\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n  // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n  // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n  // none, leaving live shell inheritance in place.\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-content\" }}\n        {...(override !== undefined ? { \"data-density\": override } : {})}\n        {...appearance}\n        className={mergeClasses(styles.content, styles[size], className)}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </>\n  )\n})\n\nexport const AlertDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogHeaderProps\n>(function AlertDialogHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-header\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogFooterProps\n>(function AlertDialogFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-footer\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  AlertDialogTitleProps\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  AlertDialogDescriptionProps\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogAction = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogActionProps\n>(function AlertDialogAction(\n  {\n    variant = \"primary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Action asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-action\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-action\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Action>\n  )\n})\n\nexport const AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogCancelProps\n>(function AlertDialogCancel(\n  {\n    variant = \"secondary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Cancel asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-cancel\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-cancel\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Cancel>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.spacingElement2","tokens.textXl","tokens.leadingXl","tokens.fontWeightSemibold","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","AlertDialog","React","props","_ref","AlertDialogPrimitive.Root","AlertDialogTrigger","className","ref","jsx","AlertDialogPrimitive.Trigger","SLOT_ATTR","AlertDialogPortal","AlertDialogPrimitive.Portal","AlertDialogOverlay","styles","AlertDialogPrimitive.Overlay","mergeClasses","AlertDialogContent","size","children","override","useDensity","appearance","useAppearanceAttributes","jsxs","Fragment","AlertDialogPrimitive.Content","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogPrimitive.Title","AlertDialogDescription","AlertDialogPrimitive.Description","AlertDialogAction","variant","destructive","AlertDialogPrimitive.Action","Button","AlertDialogCancel","AlertDialogPrimitive.Cancel"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"../button/button\"\n\nconst useStyles = makeZenithStyles({\n  overlay: {\n    position: \"fixed\",\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 50,\n    backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  content: {\n    backgroundColor: tokens.body,\n    position: \"fixed\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n    zIndex: 50,\n    display: \"grid\",\n    width: \"100%\",\n    maxWidth: \"calc(100% - 2rem)\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    ...shorthands.padding(tokens.spacingGroup2),\n    // v1 shadow-lg\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    outlineStyle: \"none\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n        to: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n        to: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  sm: {\n    maxWidth: tokens.containerSm,\n  },\n  md: {\n    maxWidth: tokens.containerMd,\n  },\n  lg: {\n    maxWidth: tokens.containerLg,\n  },\n  xl: {\n    \"@media (min-width: 640px)\": {\n      maxWidth: tokens.containerXl,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    textAlign: \"left\",\n  },\n  footer: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    fontSize: tokens.textXl,\n    lineHeight: tokens.leadingXl,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AlertDialogProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Root\n>\n\nexport type AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>\n\nexport type AlertDialogPortalProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Portal\n>\n\nexport type AlertDialogOverlayProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Overlay\n>\n\nexport type AlertDialogSize = \"xl\" | \"lg\" | \"md\" | \"sm\"\n\nexport type AlertDialogContentProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Content\n> & {\n  size?: AlertDialogSize\n}\n\nexport type AlertDialogHeaderProps = React.ComponentProps<\"div\">\nexport type AlertDialogFooterProps = React.ComponentProps<\"div\">\n\nexport type AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>\n\nexport type AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>\n\nexport type AlertDialogActionProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport type AlertDialogCancelProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport const AlertDialog = React.forwardRef<HTMLElement, AlertDialogProps>(\n  function AlertDialog(props, _ref) {\n    return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n  }\n)\n\nexport const AlertDialogTrigger = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,\n  AlertDialogTriggerProps\n>(function AlertDialogTrigger({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"alert-dialog-trigger\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogPortal = React.forwardRef<\n  HTMLElement,\n  AlertDialogPortalProps\n>(function AlertDialogPortal(props, _ref) {\n  return (\n    <AlertDialogPrimitive.Portal\n      data-slot=\"alert-dialog-portal\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-portal\" }}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  AlertDialogOverlayProps\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  const styles = useStyles()\n  // The overlay is portalled too, so it re-stamps the boundary's appearance like the content (#8).\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-overlay\" }}\n      {...appearance}\n      className={mergeClasses(styles.overlay, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(function AlertDialogContent(\n  { className, size = \"xl\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n  // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n  // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n  // none, leaving live shell inheritance in place.\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-content\" }}\n        {...(override !== undefined ? { \"data-density\": override } : {})}\n        {...appearance}\n        className={mergeClasses(styles.content, styles[size], className)}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </>\n  )\n})\n\nexport const AlertDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogHeaderProps\n>(function AlertDialogHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-header\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogFooterProps\n>(function AlertDialogFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-footer\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  AlertDialogTitleProps\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  AlertDialogDescriptionProps\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogAction = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogActionProps\n>(function AlertDialogAction(\n  {\n    variant = \"primary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Action asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-action\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-action\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Action>\n  )\n})\n\nexport const AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogCancelProps\n>(function AlertDialogCancel(\n  {\n    variant = \"secondary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Cancel asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-cancel\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-cancel\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Cancel>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.spacingElement2","tokens.textXl","tokens.leadingXl","tokens.fontWeightSemibold","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","AlertDialog","React","props","_ref","AlertDialogPrimitive.Root","AlertDialogTrigger","className","ref","jsx","AlertDialogPrimitive.Trigger","SLOT_ATTR","AlertDialogPortal","AlertDialogPrimitive.Portal","AlertDialogOverlay","styles","appearance","useAppearanceAttributes","AlertDialogPrimitive.Overlay","mergeClasses","AlertDialogContent","size","children","override","useDensity","jsxs","Fragment","AlertDialogPrimitive.Content","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogPrimitive.Title","AlertDialogDescription","AlertDialogPrimitive.Description","AlertDialogAction","variant","destructive","AlertDialogPrimitive.Action","Button","AlertDialogCancel","AlertDialogPrimitive.Cancel"],"mappings":";;;;;;;;;AAiBA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,SAAS;AAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,MACtB,eAAe;AAAA,QACb,MAAM,EAAE,SAAS,EAAA;AAAA,QACjB,IAAI,EAAE,SAAS,EAAA;AAAA,MAAE;AAAA,MAEnB,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,IAE3B,0BAA0B;AAAA,MACxB,eAAe;AAAA,QACb,MAAM,EAAE,SAAS,EAAA;AAAA,QACjB,IAAI,EAAE,SAAS,EAAA;AAAA,MAAE;AAAA,MAEnB,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,SAAS;AAAA,IACP,iBAAiBC;AAAAA,IACjB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAGC,EAAW,IAAIC,CAAoB;AAAA,IACtC,GAAGD,EAAW,aAAaE,CAAe;AAAA,IAC1C,GAAGF,EAAW,OAAO,OAAO,SAASG,CAAa;AAAA,IAClD,GAAGH,EAAW,QAAQC,CAAoB;AAAA;AAAA,IAE1C,WAAW;AAAA,IACX,cAAc;AAAA,IACd,wBAAwB;AAAA,MACtB,eAAe;AAAA,QACb,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,QAEb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,MAEF,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,IAE3B,0BAA0B;AAAA,MACxB,eAAe;AAAA,QACb,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,QAEb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,MAEF,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,IAAI;AAAA,IACF,UAAUG;AAAAA,EAAO;AAAA,EAEnB,IAAI;AAAA,IACF,UAAUC;AAAAA,EAAO;AAAA,EAEnB,IAAI;AAAA,IACF,UAAUC;AAAAA,EAAO;AAAA,EAEnB,IAAI;AAAA,IACF,6BAA6B;AAAA,MAC3B,UAAUC;AAAAA,IAAO;AAAA,EACnB;AAAA,EAEF,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,GAAGP,EAAW,IAAIQ,CAAsB;AAAA,IACxC,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,GAAGR,EAAW,IAAIQ,CAAsB;AAAA,IACxC,gBAAgB;AAAA,EAAA;AAAA,EAElB,OAAO;AAAA,IACL,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,EAAO;AAAA,EAEhB,aAAa;AAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAuDYC,KAAcC,EAAM;AAAA,EAC/B,SAAqBC,GAAOC,GAAM;AAChC,6BAAQC,GAAA,EAA0B,aAAU,gBAAgB,GAAGF,GAAO;AAAA,EACxE;AACF,GAEaG,KAAqBJ,EAAM,WAGtC,SAA4B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AAC1D,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAAJ;AAAA,MACC,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYS,KAAoBV,EAAM,WAGrC,SAA2BC,GAAOC,GAAM;AACxC,SACE,gBAAAK;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACJ,CAACF,CAAS,GAAG;AAAA,MAClB,GAAGR;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYW,IAAqBZ,EAAM,WAGtC,SAA4B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AAC1D,QAAMO,IAASjC,EAAA,GAETkC,IAAaC,EAAA;AAEnB,SACE,gBAAAR;AAAA,IAACS;AAAAA,IAAA;AAAA,MACC,KAAAV;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MAClB,GAAGK;AAAA,MACJ,WAAWG,EAAaJ,EAAO,SAASR,CAAS;AAAA,MAChD,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYiB,KAAqBlB,EAAM,WAGtC,SACA,EAAE,WAAAK,GAAW,MAAAc,IAAO,MAAM,UAAAC,GAAU,GAAGnB,EAAA,GACvCK,GACA;AACA,QAAMO,IAASjC,EAAA,GAETyC,IAAWC,EAAA,GAIXR,IAAaC,EAAA;AAEnB,SACE,gBAAAQ,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAjB,EAACK,GAAA,EAAmB;AAAA,IACpB,gBAAAL;AAAA,MAACkB;AAAAA,MAAA;AAAA,QACC,KAAAnB;AAAA,QACA,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QAClB,GAAIY,MAAa,SAAY,EAAE,gBAAgBA,EAAA,IAAa,CAAA;AAAA,QAC5D,GAAGP;AAAA,QACJ,WAAWG,EAAaJ,EAAO,SAASA,EAAOM,CAAI,GAAGd,CAAS;AAAA,QAC9D,GAAGJ;AAAA,QAEH,UAAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC,GAEYM,KAAoB1B,EAAM,WAGrC,SAA2B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AACzD,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWQ,EAAaJ,EAAO,QAAQR,CAAS;AAAA,MAC/C,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEY0B,KAAoB3B,EAAM,WAGrC,SAA2B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AACzD,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWQ,EAAaJ,EAAO,QAAQR,CAAS;AAAA,MAC/C,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEY2B,KAAmB5B,EAAM,WAGpC,SAA0B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AACxD,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAACsB;AAAAA,IAAA;AAAA,MACC,KAAAvB;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWQ,EAAaJ,EAAO,OAAOR,CAAS;AAAA,MAC9C,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEY6B,KAAyB9B,EAAM,WAG1C,SAAgC,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AAC9D,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAACwB;AAAAA,IAAA;AAAA,MACC,KAAAzB;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWQ,EAAaJ,EAAO,aAAaR,CAAS;AAAA,MACpD,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEY+B,KAAoBhC,EAAM,WAGrC,SACA;AAAA,EACE,SAAAiC,IAAU;AAAA,EACV,MAAAd,IAAO;AAAA,EACP,aAAAe,IAAc;AAAA,EACd,WAAA7B;AAAA,EACA,GAAGJ;AACL,GACAK,GACA;AACA,SACE,gBAAAC,EAAC4B,GAAA,EAA4B,SAAO,IAClC,UAAA,gBAAA5B;AAAA,IAAC6B;AAAA,IAAA;AAAA,MACC,KAAA9B;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,SAAAwB;AAAA,MACA,MAAAd;AAAA,MACA,aAAAe;AAAA,MACA,WAAA7B;AAAA,MACC,GAAGJ;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC,GAEYoC,KAAoBrC,EAAM,WAGrC,SACA;AAAA,EACE,SAAAiC,IAAU;AAAA,EACV,MAAAd,IAAO;AAAA,EACP,aAAAe,IAAc;AAAA,EACd,WAAA7B;AAAA,EACA,GAAGJ;AACL,GACAK,GACA;AACA,SACE,gBAAAC,EAAC+B,GAAA,EAA4B,SAAO,IAClC,UAAA,gBAAA/B;AAAA,IAAC6B;AAAA,IAAA;AAAA,MACC,KAAA9B;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,SAAAwB;AAAA,MACA,MAAAd;AAAA,MACA,aAAAe;AAAA,MACA,WAAA7B;AAAA,MACC,GAAGJ;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;"}

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\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/** 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    : \"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. 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","AppearanceBoundary","mode","surface","asChild","className","children","props","ref","value","content","jsx","ComposeAsChild","SLOT_ATTR","useAppearance","useAppearanceAttributes"],"mappings":";;;;AAmBA,MAAMA,IAA6C,CAAC,SAAS,MAAM,GAC7DC,IAAmD;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,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,GAQvBgB,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\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)}-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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"}