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

package/dist/components/callout/callout.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as k } from "react/jsx-runtime";
 import * as a from "react";
-import { mergeClasses as m, SLOT_ATTR as C, shorthands as I } from "@epilot/zenith-runtime/v1";
+import { mergeClasses as m, SLOT_ATTR as s, shorthands as I } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as V } from "../../styles/make-styles.js";
 import { spacingGroup2 as w, spacingLayout1 as y, spacingElement2 as v, spacingLayout2 as E, leadingSm as S, textSm as R, fontWeightSemibold as N, leadingBase as $, textBase as j, spacingElement3 as c, spacingElement1 as z } from "../../tokens/index.js";
 import { ClearButton as G } from "../../lib/clear-button.js";
@@ -63,7 +63,7 @@ const A = a.forwardRef(
 ), x = a.createContext({
   variant: "info",
   hideIcon: !1
-}), u = "--zenith-callout-bg", d = "--zenith-callout-fg", l = (i, o) => `var(--zenith-${W}-sem-${i}-${o})`, P = {
+}), u = "--zenith-callout-bg", d = "--zenith-callout-fg", l = (i, o) => `var(--zenith-${W}-${i}-${o})`, P = {
   info: () => ({
     [u]: l("accent", "soft"),
     [d]: l("accent", "default")
@@ -111,13 +111,13 @@ const A = a.forwardRef(
         // gap-x-3 — no token for 0.75rem.
         columnGap: c
       },
-      [`&:has([${C}="callout-icon"])`]: {
+      [`&:has([${s}="callout-icon"])`]: {
         gridTemplateColumns: "1rem 1fr",
         columnGap: c
       }
     },
     // v1 `[&>[data-slot=callout-icon]]` — SLOT_ATTR, never data-slot (CONVENTIONS rule 4).
-    [`& > [${C}="callout-icon"]`]: {
+    [`& > [${s}="callout-icon"]`]: {
       // size-5 — no token for 1.25rem.
       width: "1.25rem",
       height: "1.25rem",
@@ -191,7 +191,7 @@ const A = a.forwardRef(
     hideIcon: e = !1,
     customIcon: r,
     dismissible: f = !1,
-    onDismiss: s,
+    onDismiss: C,
     style: p,
     children: L,
     ...T
@@ -200,7 +200,7 @@ const A = a.forwardRef(
     if (!M)
       return null;
     const B = () => {
-      b(!1), s == null || s();
+      b(!1), C == null || C();
     };
     return /* @__PURE__ */ n(x.Provider, { value: { variant: t, hideIcon: e }, children: /* @__PURE__ */ k(
       "div",
@@ -211,7 +211,7 @@ const A = a.forwardRef(
         "data-hide-icon": e ? "true" : "false",
         "data-dismissible": f ? "true" : "false",
         role: "alert",
-        [C]: "callout",
+        [s]: "callout",
         className: m(
           g.root,
           f && g.dismissible,
@@ -243,7 +243,7 @@ const A = a.forwardRef(
       {
         ref: e,
         "data-slot": "callout-title",
-        [C]: "callout-title",
+        [s]: "callout-title",
         className: m(r.title, o),
         ...t
       }
@@ -256,21 +256,21 @@ const A = a.forwardRef(
     {
       ref: e,
       "data-slot": "callout-description",
-      [C]: "callout-description",
+      [s]: "callout-description",
       className: m(r.description, o),
       ...t
     }
   );
 }), a1 = a.forwardRef(function({ className: o, align: t = "start", ...e }, r) {
-  const { hideIcon: f } = a.useContext(x), s = h(), p = t === "end" ? s.actionEnd : f ? s.actionStart : s.actionStartIcon;
+  const { hideIcon: f } = a.useContext(x), C = h(), p = t === "end" ? C.actionEnd : f ? C.actionStart : C.actionStartIcon;
   return /* @__PURE__ */ n(
     "div",
     {
       ref: r,
       "data-slot": "callout-action",
       "data-align": t,
-      [C]: "callout-action",
-      className: m(s.action, p, o),
+      [s]: "callout-action",
+      className: m(C.action, p, o),
       ...e
     }
   );
@@ -296,7 +296,7 @@ const A = a.forwardRef(
       {
         ref: r,
         "data-slot": "callout-icon",
-        [C]: "callout-icon",
+        [s]: "callout-icon",
         customIcon: t,
         className: o,
         ...e

package/dist/components/callout/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../src/components/callout/callout.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 } from \"../../tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\nimport { CloseIcon } from \"../../lib/icons\"\n\n/**\n * Callout — Badge's colour collapse applied to Card's compound pattern, in one makeZenithStyles\n * call. v1 hardcodes two variants per family as class strings (`bg-accent-soft text-accent-a12`,\n * ...).\n */\n\nconst InfoIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function InfoIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5345 16.5343C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3593 12.5343 11.2155C12.3904 11.0718 12.2122 11 11.9997 11C11.7871 11 11.609 11.0718 11.4655 11.2155C11.3218 11.3593 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4658 16.5343C11.6096 16.6781 11.7878 16.75 12.0003 16.75ZM12 9.2885C12.2288 9.2885 12.4207 9.21108 12.5755 9.05625C12.7303 8.90142 12.8077 8.70958 12.8077 8.48075C12.8077 8.25192 12.7303 8.06008 12.5755 7.90525C12.4207 7.75058 12.2288 7.67325 12 7.67325C11.7712 7.67325 11.5793 7.75058 11.4245 7.90525C11.2697 8.06008 11.1923 8.25192 11.1923 8.48075C11.1923 8.70958 11.2697 8.90142 11.4245 9.05625C11.5793 9.21108 11.7712 9.2885 12 9.2885ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nconst WarningIcon = React.forwardRef<\n  SVGSVGElement,\n  React.ComponentProps<\"svg\">\n>(function WarningIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M3.4255 20.5C3.256 20.5 3.10375 20.4586 2.96875 20.3757C2.83375 20.2929 2.72883 20.1837 2.654 20.048C2.576 19.9133 2.53308 19.7675 2.52525 19.6105C2.51742 19.4535 2.55975 19.298 2.65225 19.144L11.213 4.356C11.3057 4.202 11.4215 4.08817 11.5605 4.0145C11.6997 3.94083 11.8462 3.904 12 3.904C12.1538 3.904 12.3003 3.94083 12.4395 4.0145C12.5785 4.08817 12.6943 4.202 12.787 4.356L21.3477 19.144C21.4402 19.298 21.4826 19.4535 21.4747 19.6105C21.4669 19.7675 21.424 19.9133 21.346 20.048C21.2712 20.1837 21.1663 20.2929 21.0313 20.3757C20.8963 20.4586 20.744 20.5 20.5745 20.5H3.4255ZM12 17.8077C12.2288 17.8077 12.4207 17.7303 12.5755 17.5755C12.7303 17.4207 12.8078 17.2288 12.8078 17C12.8078 16.7712 12.7303 16.5793 12.5755 16.4245C12.4207 16.2697 12.2288 16.1923 12 16.1923C11.7712 16.1923 11.5793 16.2697 11.4245 16.4245C11.2697 16.5793 11.1923 16.7712 11.1923 17C11.1923 17.2288 11.2697 17.4207 11.4245 17.5755C11.5793 17.7303 11.7712 17.8077 12 17.8077ZM12.0003 15.1923C12.2129 15.1923 12.391 15.1204 12.5345 14.9768C12.6782 14.8329 12.75 14.6548 12.75 14.4423V10.9423C12.75 10.7298 12.6781 10.5517 12.5342 10.408C12.3904 10.2642 12.2122 10.1923 11.9997 10.1923C11.7871 10.1923 11.609 10.2642 11.4655 10.408C11.3218 10.5517 11.25 10.7298 11.25 10.9423V14.4423C11.25 14.6548 11.3219 14.8329 11.4658 14.9768C11.6096 15.1204 11.7878 15.1923 12.0003 15.1923Z\" />\n    </svg>\n  )\n})\n\nconst CheckIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CheckIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M10.5808 14.1463L8.25775 11.823C8.11925 11.6847 7.94517 11.6138 7.7355 11.6105C7.526 11.6073 7.34875 11.6782 7.20375 11.823C7.05892 11.968 6.9865 12.1437 6.9865 12.35C6.9865 12.5563 7.05892 12.732 7.20375 12.877L9.948 15.6212C10.1288 15.8019 10.3398 15.8922 10.5808 15.8922C10.8218 15.8922 11.0327 15.8019 11.2135 15.6212L16.777 10.0577C16.9153 9.91925 16.9862 9.74517 16.9895 9.5355C16.9927 9.326 16.9218 9.14875 16.777 9.00375C16.632 8.85892 16.4563 8.7865 16.25 8.7865C16.0437 8.7865 15.868 8.85892 15.723 9.00375L10.5808 14.1463ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nconst ErrorIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function ErrorIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M12 16.7307C12.2288 16.7307 12.4207 16.6533 12.5755 16.4985C12.7303 16.3437 12.8077 16.1518 12.8077 15.923C12.8077 15.6942 12.7303 15.5023 12.5755 15.3475C12.4207 15.1928 12.2288 15.1155 12 15.1155C11.7712 15.1155 11.5793 15.1928 11.4245 15.3475C11.2697 15.5023 11.1923 15.6942 11.1923 15.923C11.1923 16.1518 11.2697 16.3437 11.4245 16.4985C11.5793 16.6533 11.7712 16.7307 12 16.7307ZM12.0003 13.077C12.2129 13.077 12.391 13.0051 12.5345 12.8613C12.6782 12.7176 12.75 12.5395 12.75 12.327V7.827C12.75 7.6145 12.6781 7.43633 12.5343 7.2925C12.3904 7.14883 12.2122 7.077 11.9997 7.077C11.7871 7.077 11.609 7.14883 11.4655 7.2925C11.3218 7.43633 11.25 7.6145 11.25 7.827V12.327C11.25 12.5395 11.3219 12.7176 11.4658 12.8613C11.6096 13.0051 11.7878 13.077 12.0003 13.077ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nexport type CalloutVariant =\n  \"info\" | \"gray\" | \"success\" | \"warning\" | \"destructive\"\n\ntype CalloutContextValue = {\n  variant: CalloutVariant\n  hideIcon: boolean\n}\n\nconst CalloutContext = React.createContext<CalloutContextValue>({\n  variant: \"info\",\n  hideIcon: false,\n})\n\n/**\n * The two slots a variant paints. Set inline; read by the root's atoms. Every variant is the same\n * style shape (soft background, default-graded text), so the five entries are data about five\n * families, not five class strings.\n */\nconst BG = \"--zenith-callout-bg\"\nconst FG = \"--zenith-callout-fg\"\n\nconst semantic = (family: string, slot: string): string =>\n  `var(--zenith-${NS}-sem-${family}-${slot})`\n\nconst VARIANT_SLOTS: Record<CalloutVariant, () => Record<string, string>> = {\n  info: () => ({\n    [BG]: semantic(\"accent\", \"soft\"),\n    [FG]: semantic(\"accent\", \"default\"),\n  }),\n  gray: () => ({\n    [BG]: semantic(\"gray\", \"soft\"),\n    [FG]: semantic(\"gray\", \"default\"),\n  }),\n  success: () => ({\n    [BG]: semantic(\"success\", \"soft\"),\n    [FG]: semantic(\"success\", \"default\"),\n  }),\n  warning: () => ({\n    [BG]: semantic(\"warning\", \"soft\"),\n    [FG]: semantic(\"warning\", \"default\"),\n  }),\n  destructive: () => ({\n    [BG]: semantic(\"error\", \"soft\"),\n    [FG]: semantic(\"error\", \"default\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    position: \"relative\",\n    width: \"100%\",\n    // p-3 — no token for 0.75rem.\n    paddingTop: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n    paddingLeft: tokens.spacingElement3,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    // `items-center`: present in every state, like v1's base string.\n    alignItems: \"center\",\n    // v1's `data-[hide-icon=false]:` block — the icon grid kicks in only when an icon renders.\n    \"&[data-hide-icon='false']\": {\n      display: \"grid\",\n      gridTemplateColumns: \"0 1fr auto\",\n      // gap-y-0.5 — no token for 0.125rem.\n      rowGap: \"0.125rem\",\n      // `has-[>svg]` and `has-data-[slot=callout-icon]` collapse to the same re-laid-out grid.\n      \"&:has(>svg)\": {\n        gridTemplateColumns: \"1rem 1fr\",\n        // gap-x-3 — no token for 0.75rem.\n        columnGap: tokens.spacingElement3,\n      },\n      [`&:has([${SLOT_ATTR}=\"callout-icon\"])`]: {\n        gridTemplateColumns: \"1rem 1fr\",\n        columnGap: tokens.spacingElement3,\n      },\n    },\n    // v1 `[&>[data-slot=callout-icon]]` — SLOT_ATTR, never data-slot (CONVENTIONS rule 4).\n    [`& > [${SLOT_ATTR}=\"callout-icon\"]`]: {\n      // size-5 — no token for 1.25rem.\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n      flexShrink: 0,\n    },\n  },\n  dismissible: {\n    // pr-10 — no token for 2.5rem.\n    paddingRight: \"2.5rem\",\n  },\n  title: {\n    gridColumnStart: 2,\n    ...shorthands.overflow(\"hidden\"),\n    display: \"-webkit-box\",\n    WebkitBoxOrient: \"vertical\",\n    WebkitLineClamp: 1,\n    // min-h-4\n    minHeight: tokens.spacingGroup2,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  description: {\n    gridColumnStart: 2,\n    display: \"grid\",\n    justifyItems: \"start\",\n    ...shorthands.gap(tokens.spacingElement1),\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    \"& p\": {\n      // leading-relaxed — no token for a 1.625 line-height.\n      lineHeight: 1.625,\n    },\n  },\n  action: {\n    display: \"flex\",\n    width: \"100%\",\n    gridColumnEnd: \"span 3\",\n    // mt-2\n    marginTop: tokens.spacingElement2,\n  },\n  actionStart: {\n    justifyContent: \"flex-start\",\n  },\n  actionStartIcon: {\n    justifyContent: \"flex-start\",\n    // ml-8\n    marginLeft: tokens.spacingLayout2,\n  },\n  actionEnd: {\n    justifyContent: \"flex-end\",\n  },\n  dismiss: {\n    position: \"absolute\",\n    // top-2 right-2\n    top: tokens.spacingElement2,\n    right: tokens.spacingElement2,\n    // size-6 — the ClearButton itself supplies centering, rounding, hover and focus.\n    width: tokens.spacingLayout1,\n    height: tokens.spacingLayout1,\n  },\n  dismissIcon: {\n    // size-4\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type CalloutProps = React.ComponentProps<\"div\"> & {\n  variant?: CalloutVariant\n  hideIcon?: boolean\n  customIcon?: React.ReactNode\n  /** Shows a top-right close button that dismisses the callout. */\n  dismissible?: boolean\n  /** Called when the close button is clicked, after the callout hides itself. */\n  onDismiss?: () => void\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  function Callout(\n    {\n      className,\n      variant = \"info\",\n      hideIcon = false,\n      customIcon,\n      dismissible = false,\n      onDismiss,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const [open, setOpen] = React.useState(true)\n    const styles = useStyles()\n\n    if (!open) {\n      return null\n    }\n\n    const handleDismiss = () => {\n      setOpen(false)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutContext.Provider value={{ variant, hideIcon }}>\n        <div\n          ref={ref}\n          data-callout-variant={variant}\n          data-slot=\"callout\"\n          data-hide-icon={hideIcon ? \"true\" : \"false\"}\n          data-dismissible={dismissible ? \"true\" : \"false\"}\n          role=\"alert\"\n          {...{ [SLOT_ATTR]: \"callout\" }}\n          className={mergeClasses(\n            styles.root,\n            dismissible && styles.dismissible,\n            className\n          )}\n          style={\n            { ...VARIANT_SLOTS[variant](), ...style } as React.CSSProperties\n          }\n          {...props}\n        >\n          {!hideIcon && <CalloutIcon customIcon={customIcon} />}\n          {children}\n          {dismissible && (\n            <ClearButton\n              label=\"Dismiss\"\n              onClick={handleDismiss}\n              className={styles.dismiss}\n            >\n              <CloseIcon className={styles.dismissIcon} />\n            </ClearButton>\n          )}\n        </div>\n      </CalloutContext.Provider>\n    )\n  }\n)\n\nexport type CalloutTitleProps = React.ComponentProps<\"div\">\n\nexport const CalloutTitle = React.forwardRef<HTMLDivElement, CalloutTitleProps>(\n  function CalloutTitle({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"callout-title\"\n        {...{ [SLOT_ATTR]: \"callout-title\" }}\n        className={mergeClasses(styles.title, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type CalloutDescriptionProps = React.ComponentProps<\"div\">\n\nexport const CalloutDescription = React.forwardRef<\n  HTMLDivElement,\n  CalloutDescriptionProps\n>(function CalloutDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"callout-description\"\n      {...{ [SLOT_ATTR]: \"callout-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CalloutActionProps = React.ComponentProps<\"div\"> & {\n  align?: \"start\" | \"end\"\n}\n\nexport const CalloutAction = React.forwardRef<\n  HTMLDivElement,\n  CalloutActionProps\n>(function CalloutAction({ className, align = \"start\", ...props }, ref) {\n  const { hideIcon } = React.useContext(CalloutContext)\n  const styles = useStyles()\n\n  const alignment =\n    align === \"end\"\n      ? styles.actionEnd\n      : hideIcon\n        ? styles.actionStart\n        : styles.actionStartIcon\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"callout-action\"\n      data-align={align}\n      {...{ [SLOT_ATTR]: \"callout-action\" }}\n      className={mergeClasses(styles.action, alignment, className)}\n      {...props}\n    />\n  )\n})\n\ntype CalloutVariantIconProps = React.ComponentProps<\"svg\"> & {\n  customIcon?: React.ReactNode\n}\n\nconst CalloutVariantIcon = React.forwardRef<\n  SVGSVGElement,\n  CalloutVariantIconProps\n>(function CalloutVariantIcon({ customIcon, ...props }, ref) {\n  const { variant } = React.useContext(CalloutContext)\n\n  if (customIcon) {\n    return customIcon\n  }\n\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon ref={ref} {...props} />\n    case \"success\":\n      return <CheckIcon ref={ref} {...props} />\n    case \"warning\":\n      return <WarningIcon ref={ref} {...props} />\n    case \"destructive\":\n      return <ErrorIcon ref={ref} {...props} />\n  }\n\n  // gray has no default icon; v1 renders nothing for it.\n  return null\n})\n\nexport type CalloutIconProps = React.ComponentProps<\"svg\"> & {\n  customIcon?: React.ReactNode\n}\n\nconst CalloutIcon = React.forwardRef<SVGSVGElement, CalloutIconProps>(\n  function CalloutIcon({ className, customIcon, ...props }, ref) {\n    return (\n      <CalloutVariantIcon\n        ref={ref}\n        data-slot=\"callout-icon\"\n        {...{ [SLOT_ATTR]: \"callout-icon\" }}\n        customIcon={customIcon}\n        className={className}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["InfoIcon","React","props","ref","jsx","WarningIcon","CheckIcon","ErrorIcon","CalloutContext","BG","FG","semantic","family","slot","NS","VARIANT_SLOTS","useStyles","makeZenithStyles","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","SLOT_ATTR","shorthands","tokens.spacingGroup2","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.spacingElement1","tokens.spacingElement2","tokens.spacingLayout2","tokens.spacingLayout1","Callout","className","variant","hideIcon","customIcon","dismissible","onDismiss","style","children","open","setOpen","styles","handleDismiss","jsxs","mergeClasses","CalloutIcon","ClearButton","CloseIcon","CalloutTitle","CalloutDescription","CalloutAction","align","alignment","CalloutVariantIcon"],"mappings":"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"}
+{"version":3,"file":"callout.js","sources":["../../../src/components/callout/callout.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 } from \"../../tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\nimport { CloseIcon } from \"../../lib/icons\"\n\n/**\n * Callout — Badge's colour collapse applied to Card's compound pattern, in one makeZenithStyles\n * call. v1 hardcodes two variants per family as class strings (`bg-accent-soft text-accent-a12`,\n * ...).\n */\n\nconst InfoIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function InfoIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5345 16.5343C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3593 12.5343 11.2155C12.3904 11.0718 12.2122 11 11.9997 11C11.7871 11 11.609 11.0718 11.4655 11.2155C11.3218 11.3593 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4658 16.5343C11.6096 16.6781 11.7878 16.75 12.0003 16.75ZM12 9.2885C12.2288 9.2885 12.4207 9.21108 12.5755 9.05625C12.7303 8.90142 12.8077 8.70958 12.8077 8.48075C12.8077 8.25192 12.7303 8.06008 12.5755 7.90525C12.4207 7.75058 12.2288 7.67325 12 7.67325C11.7712 7.67325 11.5793 7.75058 11.4245 7.90525C11.2697 8.06008 11.1923 8.25192 11.1923 8.48075C11.1923 8.70958 11.2697 8.90142 11.4245 9.05625C11.5793 9.21108 11.7712 9.2885 12 9.2885ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nconst WarningIcon = React.forwardRef<\n  SVGSVGElement,\n  React.ComponentProps<\"svg\">\n>(function WarningIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M3.4255 20.5C3.256 20.5 3.10375 20.4586 2.96875 20.3757C2.83375 20.2929 2.72883 20.1837 2.654 20.048C2.576 19.9133 2.53308 19.7675 2.52525 19.6105C2.51742 19.4535 2.55975 19.298 2.65225 19.144L11.213 4.356C11.3057 4.202 11.4215 4.08817 11.5605 4.0145C11.6997 3.94083 11.8462 3.904 12 3.904C12.1538 3.904 12.3003 3.94083 12.4395 4.0145C12.5785 4.08817 12.6943 4.202 12.787 4.356L21.3477 19.144C21.4402 19.298 21.4826 19.4535 21.4747 19.6105C21.4669 19.7675 21.424 19.9133 21.346 20.048C21.2712 20.1837 21.1663 20.2929 21.0313 20.3757C20.8963 20.4586 20.744 20.5 20.5745 20.5H3.4255ZM12 17.8077C12.2288 17.8077 12.4207 17.7303 12.5755 17.5755C12.7303 17.4207 12.8078 17.2288 12.8078 17C12.8078 16.7712 12.7303 16.5793 12.5755 16.4245C12.4207 16.2697 12.2288 16.1923 12 16.1923C11.7712 16.1923 11.5793 16.2697 11.4245 16.4245C11.2697 16.5793 11.1923 16.7712 11.1923 17C11.1923 17.2288 11.2697 17.4207 11.4245 17.5755C11.5793 17.7303 11.7712 17.8077 12 17.8077ZM12.0003 15.1923C12.2129 15.1923 12.391 15.1204 12.5345 14.9768C12.6782 14.8329 12.75 14.6548 12.75 14.4423V10.9423C12.75 10.7298 12.6781 10.5517 12.5342 10.408C12.3904 10.2642 12.2122 10.1923 11.9997 10.1923C11.7871 10.1923 11.609 10.2642 11.4655 10.408C11.3218 10.5517 11.25 10.7298 11.25 10.9423V14.4423C11.25 14.6548 11.3219 14.8329 11.4658 14.9768C11.6096 15.1204 11.7878 15.1923 12.0003 15.1923Z\" />\n    </svg>\n  )\n})\n\nconst CheckIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CheckIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M10.5808 14.1463L8.25775 11.823C8.11925 11.6847 7.94517 11.6138 7.7355 11.6105C7.526 11.6073 7.34875 11.6782 7.20375 11.823C7.05892 11.968 6.9865 12.1437 6.9865 12.35C6.9865 12.5563 7.05892 12.732 7.20375 12.877L9.948 15.6212C10.1288 15.8019 10.3398 15.8922 10.5808 15.8922C10.8218 15.8922 11.0327 15.8019 11.2135 15.6212L16.777 10.0577C16.9153 9.91925 16.9862 9.74517 16.9895 9.5355C16.9927 9.326 16.9218 9.14875 16.777 9.00375C16.632 8.85892 16.4563 8.7865 16.25 8.7865C16.0437 8.7865 15.868 8.85892 15.723 9.00375L10.5808 14.1463ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nconst ErrorIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function ErrorIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M12 16.7307C12.2288 16.7307 12.4207 16.6533 12.5755 16.4985C12.7303 16.3437 12.8077 16.1518 12.8077 15.923C12.8077 15.6942 12.7303 15.5023 12.5755 15.3475C12.4207 15.1928 12.2288 15.1155 12 15.1155C11.7712 15.1155 11.5793 15.1928 11.4245 15.3475C11.2697 15.5023 11.1923 15.6942 11.1923 15.923C11.1923 16.1518 11.2697 16.3437 11.4245 16.4985C11.5793 16.6533 11.7712 16.7307 12 16.7307ZM12.0003 13.077C12.2129 13.077 12.391 13.0051 12.5345 12.8613C12.6782 12.7176 12.75 12.5395 12.75 12.327V7.827C12.75 7.6145 12.6781 7.43633 12.5343 7.2925C12.3904 7.14883 12.2122 7.077 11.9997 7.077C11.7871 7.077 11.609 7.14883 11.4655 7.2925C11.3218 7.43633 11.25 7.6145 11.25 7.827V12.327C11.25 12.5395 11.3219 12.7176 11.4658 12.8613C11.6096 13.0051 11.7878 13.077 12.0003 13.077ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nexport type CalloutVariant =\n  \"info\" | \"gray\" | \"success\" | \"warning\" | \"destructive\"\n\ntype CalloutContextValue = {\n  variant: CalloutVariant\n  hideIcon: boolean\n}\n\nconst CalloutContext = React.createContext<CalloutContextValue>({\n  variant: \"info\",\n  hideIcon: false,\n})\n\n/**\n * The two slots a variant paints. Set inline; read by the root's atoms. Every variant is the same\n * style shape (soft background, default-graded text), so the five entries are data about five\n * families, not five class strings.\n */\nconst BG = \"--zenith-callout-bg\"\nconst FG = \"--zenith-callout-fg\"\n\nconst semantic = (family: string, slot: string): string =>\n  `var(--zenith-${NS}-${family}-${slot})`\n\nconst VARIANT_SLOTS: Record<CalloutVariant, () => Record<string, string>> = {\n  info: () => ({\n    [BG]: semantic(\"accent\", \"soft\"),\n    [FG]: semantic(\"accent\", \"default\"),\n  }),\n  gray: () => ({\n    [BG]: semantic(\"gray\", \"soft\"),\n    [FG]: semantic(\"gray\", \"default\"),\n  }),\n  success: () => ({\n    [BG]: semantic(\"success\", \"soft\"),\n    [FG]: semantic(\"success\", \"default\"),\n  }),\n  warning: () => ({\n    [BG]: semantic(\"warning\", \"soft\"),\n    [FG]: semantic(\"warning\", \"default\"),\n  }),\n  destructive: () => ({\n    [BG]: semantic(\"error\", \"soft\"),\n    [FG]: semantic(\"error\", \"default\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    position: \"relative\",\n    width: \"100%\",\n    // p-3 — no token for 0.75rem.\n    paddingTop: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n    paddingLeft: tokens.spacingElement3,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    // `items-center`: present in every state, like v1's base string.\n    alignItems: \"center\",\n    // v1's `data-[hide-icon=false]:` block — the icon grid kicks in only when an icon renders.\n    \"&[data-hide-icon='false']\": {\n      display: \"grid\",\n      gridTemplateColumns: \"0 1fr auto\",\n      // gap-y-0.5 — no token for 0.125rem.\n      rowGap: \"0.125rem\",\n      // `has-[>svg]` and `has-data-[slot=callout-icon]` collapse to the same re-laid-out grid.\n      \"&:has(>svg)\": {\n        gridTemplateColumns: \"1rem 1fr\",\n        // gap-x-3 — no token for 0.75rem.\n        columnGap: tokens.spacingElement3,\n      },\n      [`&:has([${SLOT_ATTR}=\"callout-icon\"])`]: {\n        gridTemplateColumns: \"1rem 1fr\",\n        columnGap: tokens.spacingElement3,\n      },\n    },\n    // v1 `[&>[data-slot=callout-icon]]` — SLOT_ATTR, never data-slot (CONVENTIONS rule 4).\n    [`& > [${SLOT_ATTR}=\"callout-icon\"]`]: {\n      // size-5 — no token for 1.25rem.\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n      flexShrink: 0,\n    },\n  },\n  dismissible: {\n    // pr-10 — no token for 2.5rem.\n    paddingRight: \"2.5rem\",\n  },\n  title: {\n    gridColumnStart: 2,\n    ...shorthands.overflow(\"hidden\"),\n    display: \"-webkit-box\",\n    WebkitBoxOrient: \"vertical\",\n    WebkitLineClamp: 1,\n    // min-h-4\n    minHeight: tokens.spacingGroup2,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  description: {\n    gridColumnStart: 2,\n    display: \"grid\",\n    justifyItems: \"start\",\n    ...shorthands.gap(tokens.spacingElement1),\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    \"& p\": {\n      // leading-relaxed — no token for a 1.625 line-height.\n      lineHeight: 1.625,\n    },\n  },\n  action: {\n    display: \"flex\",\n    width: \"100%\",\n    gridColumnEnd: \"span 3\",\n    // mt-2\n    marginTop: tokens.spacingElement2,\n  },\n  actionStart: {\n    justifyContent: \"flex-start\",\n  },\n  actionStartIcon: {\n    justifyContent: \"flex-start\",\n    // ml-8\n    marginLeft: tokens.spacingLayout2,\n  },\n  actionEnd: {\n    justifyContent: \"flex-end\",\n  },\n  dismiss: {\n    position: \"absolute\",\n    // top-2 right-2\n    top: tokens.spacingElement2,\n    right: tokens.spacingElement2,\n    // size-6 — the ClearButton itself supplies centering, rounding, hover and focus.\n    width: tokens.spacingLayout1,\n    height: tokens.spacingLayout1,\n  },\n  dismissIcon: {\n    // size-4\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type CalloutProps = React.ComponentProps<\"div\"> & {\n  variant?: CalloutVariant\n  hideIcon?: boolean\n  customIcon?: React.ReactNode\n  /** Shows a top-right close button that dismisses the callout. */\n  dismissible?: boolean\n  /** Called when the close button is clicked, after the callout hides itself. */\n  onDismiss?: () => void\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  function Callout(\n    {\n      className,\n      variant = \"info\",\n      hideIcon = false,\n      customIcon,\n      dismissible = false,\n      onDismiss,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const [open, setOpen] = React.useState(true)\n    const styles = useStyles()\n\n    if (!open) {\n      return null\n    }\n\n    const handleDismiss = () => {\n      setOpen(false)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutContext.Provider value={{ variant, hideIcon }}>\n        <div\n          ref={ref}\n          data-callout-variant={variant}\n          data-slot=\"callout\"\n          data-hide-icon={hideIcon ? \"true\" : \"false\"}\n          data-dismissible={dismissible ? \"true\" : \"false\"}\n          role=\"alert\"\n          {...{ [SLOT_ATTR]: \"callout\" }}\n          className={mergeClasses(\n            styles.root,\n            dismissible && styles.dismissible,\n            className\n          )}\n          style={\n            { ...VARIANT_SLOTS[variant](), ...style } as React.CSSProperties\n          }\n          {...props}\n        >\n          {!hideIcon && <CalloutIcon customIcon={customIcon} />}\n          {children}\n          {dismissible && (\n            <ClearButton\n              label=\"Dismiss\"\n              onClick={handleDismiss}\n              className={styles.dismiss}\n            >\n              <CloseIcon className={styles.dismissIcon} />\n            </ClearButton>\n          )}\n        </div>\n      </CalloutContext.Provider>\n    )\n  }\n)\n\nexport type CalloutTitleProps = React.ComponentProps<\"div\">\n\nexport const CalloutTitle = React.forwardRef<HTMLDivElement, CalloutTitleProps>(\n  function CalloutTitle({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"callout-title\"\n        {...{ [SLOT_ATTR]: \"callout-title\" }}\n        className={mergeClasses(styles.title, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type CalloutDescriptionProps = React.ComponentProps<\"div\">\n\nexport const CalloutDescription = React.forwardRef<\n  HTMLDivElement,\n  CalloutDescriptionProps\n>(function CalloutDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"callout-description\"\n      {...{ [SLOT_ATTR]: \"callout-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CalloutActionProps = React.ComponentProps<\"div\"> & {\n  align?: \"start\" | \"end\"\n}\n\nexport const CalloutAction = React.forwardRef<\n  HTMLDivElement,\n  CalloutActionProps\n>(function CalloutAction({ className, align = \"start\", ...props }, ref) {\n  const { hideIcon } = React.useContext(CalloutContext)\n  const styles = useStyles()\n\n  const alignment =\n    align === \"end\"\n      ? styles.actionEnd\n      : hideIcon\n        ? styles.actionStart\n        : styles.actionStartIcon\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"callout-action\"\n      data-align={align}\n      {...{ [SLOT_ATTR]: \"callout-action\" }}\n      className={mergeClasses(styles.action, alignment, className)}\n      {...props}\n    />\n  )\n})\n\ntype CalloutVariantIconProps = React.ComponentProps<\"svg\"> & {\n  customIcon?: React.ReactNode\n}\n\nconst CalloutVariantIcon = React.forwardRef<\n  SVGSVGElement,\n  CalloutVariantIconProps\n>(function CalloutVariantIcon({ customIcon, ...props }, ref) {\n  const { variant } = React.useContext(CalloutContext)\n\n  if (customIcon) {\n    return customIcon\n  }\n\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon ref={ref} {...props} />\n    case \"success\":\n      return <CheckIcon ref={ref} {...props} />\n    case \"warning\":\n      return <WarningIcon ref={ref} {...props} />\n    case \"destructive\":\n      return <ErrorIcon ref={ref} {...props} />\n  }\n\n  // gray has no default icon; v1 renders nothing for it.\n  return null\n})\n\nexport type CalloutIconProps = React.ComponentProps<\"svg\"> & {\n  customIcon?: React.ReactNode\n}\n\nconst CalloutIcon = React.forwardRef<SVGSVGElement, CalloutIconProps>(\n  function CalloutIcon({ className, customIcon, ...props }, ref) {\n    return (\n      <CalloutVariantIcon\n        ref={ref}\n        data-slot=\"callout-icon\"\n        {...{ [SLOT_ATTR]: \"callout-icon\" }}\n        customIcon={customIcon}\n        className={className}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["InfoIcon","React","props","ref","jsx","WarningIcon","CheckIcon","ErrorIcon","CalloutContext","BG","FG","semantic","family","slot","NS","VARIANT_SLOTS","useStyles","makeZenithStyles","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","SLOT_ATTR","shorthands","tokens.spacingGroup2","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.spacingElement1","tokens.spacingElement2","tokens.spacingLayout2","tokens.spacingLayout1","Callout","className","variant","hideIcon","customIcon","dismissible","onDismiss","style","children","open","setOpen","styles","handleDismiss","jsxs","mergeClasses","CalloutIcon","ClearButton","CloseIcon","CalloutTitle","CalloutDescription","CalloutAction","align","alignment","CalloutVariantIcon"],"mappings":"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"}

package/dist/components/checkbox/checkbox.js

@@ -1,10 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as n from "react";
 import { Checkbox as m, CheckboxIndicator as u } from "../../vendor/.bun/@radix-ui_react-checkbox@1.3.3_2b23df507bdda662/vendor/@radix-ui/react-checkbox/dist/index.js";
-import { SLOT_ATTR as i, mergeClasses as x, shorthands as r } from "@epilot/zenith-runtime/v1";
+import { SLOT_ATTR as i, mergeClasses as x, shorthands as e } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as b } from "../../styles/make-styles.js";
-import { semAccentContrast as p, semAccentSolid as f, semAccentOnSoft as g, accentA7 as s, semFocusRing as d, radiusSm as k, semAccentSoft as w, errorA8 as C, grayA4 as v } from "../../tokens/index.js";
-const S = n.forwardRef(function(e, t) {
+import { accentContrast as p, accentSolid as f, accentOnSoft as g, accentA7 as s, focusRing as d, radiusSm as k, accentSoft as w, errorA8 as C, grayA4 as v } from "../../tokens/index.js";
+const S = n.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -16,11 +16,11 @@ const S = n.forwardRef(function(e, t) {
       viewBox: "0 -960 960 960",
       width: "24px",
       fill: "currentColor",
-      ...e,
+      ...r,
       children: /* @__PURE__ */ o("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
     }
   );
-}), y = n.forwardRef(function(e, t) {
+}), y = n.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -32,13 +32,13 @@ const S = n.forwardRef(function(e, t) {
       viewBox: "0 -960 960 960",
       width: "24px",
       fill: "currentColor",
-      ...e,
+      ...r,
       children: /* @__PURE__ */ o("path", { d: "M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z" })
     }
   );
 }), T = b({
   root: {
-    ...r.border("1px", "solid", s),
+    ...e.border("1px", "solid", s),
     backgroundColor: w,
     display: "inline-block",
     boxSizing: "border-box",
@@ -63,20 +63,20 @@ const S = n.forwardRef(function(e, t) {
     "&[data-disabled]": {
       cursor: "not-allowed",
       opacity: 0.5,
-      ...r.borderColor(v)
+      ...e.borderColor(v)
     },
     "&[aria-invalid='true']": {
       outlineColor: d,
-      ...r.borderColor(C)
+      ...e.borderColor(C)
     },
     "&[data-state='indeterminate']": {
       backgroundColor: s,
-      ...r.borderColor("transparent"),
+      ...e.borderColor("transparent"),
       color: g
     },
     "&[data-state='checked']": {
       backgroundColor: f,
-      ...r.borderWidth("0px"),
+      ...e.borderWidth("0px"),
       color: p
     },
     "&[data-state='checked'] svg, &[data-state='indeterminate'] svg": {
@@ -95,7 +95,7 @@ const S = n.forwardRef(function(e, t) {
       height: "0.875rem"
     }
   }
-}), M = n.forwardRef(function({ className: e, checked: t, ...l }, h) {
+}), M = n.forwardRef(function({ className: r, checked: t, ...l }, h) {
   const a = T();
   return /* @__PURE__ */ o(
     m,
@@ -104,7 +104,7 @@ const S = n.forwardRef(function(e, t) {
       checked: t,
       "data-slot": "checkbox",
       [i]: "checkbox",
-      className: x(a.root, e),
+      className: x(a.root, r),
       ...l,
       children: /* @__PURE__ */ o(
         u,

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\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\"\n\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.semFocusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.semAccentOnSoft,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'] svg, &[data-state='indeterminate'] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\nexport type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nexport const Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(function Checkbox({ className, checked, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={checked}\n      data-slot=\"checkbox\"\n      {...{ [SLOT_ATTR]: \"checkbox\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n        className={styles.indicator}\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeZenithStyles","shorthands","tokens.accentA7","tokens.semAccentSoft","tokens.radiusSm","tokens.semFocusRing","tokens.grayA4","tokens.errorA8","tokens.semAccentOnSoft","tokens.semAccentSolid","tokens.semAccentContrast","Checkbox","className","checked","styles","CheckboxPrimitive.Root","mergeClasses","CheckboxPrimitive.Indicator"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\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\"\n\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.focusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.accentOnSoft,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.accentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.accentContrast,\n    },\n    \"&[data-state='checked'] svg, &[data-state='indeterminate'] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\nexport type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nexport const Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(function Checkbox({ className, checked, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={checked}\n      data-slot=\"checkbox\"\n      {...{ [SLOT_ATTR]: \"checkbox\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n        className={styles.indicator}\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeZenithStyles","shorthands","tokens.accentA7","tokens.accentSoft","tokens.radiusSm","tokens.focusRing","tokens.grayA4","tokens.errorA8","tokens.accentOnSoft","tokens.accentSolid","tokens.accentContrast","Checkbox","className","checked","styles","CheckboxPrimitive.Root","mergeClasses","CheckboxPrimitive.Indicator"],"mappings":"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"}

package/dist/components/code-block/code-block.js

@@ -2,12 +2,12 @@ import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import * as a from "react";
 import { SLOT_ATTR as t, mergeClasses as m, shorthands as l } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as oe } from "../../styles/make-styles.js";
-import { surfaceContainer as T, spacingElement3 as X, spacingElement2 as p, grayA8 as te, grayA2 as j, semFocusRing as ie, grayA12 as D, leadingXs as R, textXs as $, fontMono as E, spacingElement05 as b, grayA11 as le, fontWeightMedium as ae, surfaceRadiusContainer as ne, borderWidthContainer as F, surfaceSep as re, spacingElement1 as ce, borderContainer as de } from "../../tokens/index.js";
+import { surfaceContainer as T, spacingElement3 as X, spacingElement2 as p, grayA8 as te, grayA2 as j, focusRing as ie, grayA12 as D, leadingXs as R, textXs as $, fontMono as E, spacingElement05 as b, grayA11 as le, fontWeightMedium as ae, surfaceRadiusContainer as ne, borderWidthContainer as Y, surfaceSep as re, spacingElement1 as ce, borderContainer as de } from "../../tokens/index.js";
 import { Button as se } from "../button/button.js";
 import { highlightCode as pe, splitTokenLines as he } from "../../lib/code-highlight.js";
 import { useCodeTokenRenderer as ue } from "../../lib/code-tokens.js";
 import { gutterDigits as fe } from "../../lib/code-lines.js";
-const me = 2e3, Y = "--zenith-code-gutter", be = oe({
+const me = 2e3, F = "--zenith-code-gutter", be = oe({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -16,7 +16,7 @@ const me = 2e3, Y = "--zenith-code-gutter", be = oe({
     // The same role recipe Surface's `section` uses, and the same property shapes, so a caller's
     // own border or radius replaces these through `mergeClasses` without a wrapper.
     backgroundColor: T,
-    ...l.borderWidth(F),
+    ...l.borderWidth(Y),
     ...l.borderStyle("solid"),
     ...l.borderColor(de),
     borderRadius: ne,
@@ -38,7 +38,7 @@ const me = 2e3, Y = "--zenith-code-gutter", be = oe({
     // helper, and a bare `borderBottomWidth: …` alongside a neighbour's `borderWidth` shorthand
     // is exactly the property-shape mismatch AGENTS.md rule 3 warns about.
     ...l.borderBottom(
-      F,
+      Y,
       "solid",
       re
     )
@@ -158,7 +158,7 @@ const me = 2e3, Y = "--zenith-code-gutter", be = oe({
     flexShrink: 0,
     color: te,
     boxSizing: "border-box",
-    width: `calc(var(${Y}) + ${p} + ${X})`,
+    width: `calc(var(${F}) + ${p} + ${X})`,
     paddingLeft: p,
     paddingRight: X,
     // Opaque because horizontally scrolled code passes beneath the sticky gutter.
@@ -266,7 +266,7 @@ const me = 2e3, Y = "--zenith-code-gutter", be = oe({
       () => v && f !== null ? he(f) : null,
       [f, v]
     ), N = S !== void 0 && S !== "", M = c !== void 0 && c !== "", G = W["aria-label"], q = W["aria-labelledby"], H = N ? I : q, J = H !== void 0 || G !== void 0, O = h === "copied" ? _ : h === "error" ? K : P, Q = N || M, ee = s === null ? B : {
-      [Y]: `${fe(s.length)}ch`,
+      [F]: `${fe(s.length)}ch`,
       ...B
     };
     return /* @__PURE__ */ g(

package/dist/components/code-block/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","sources":["../../../src/components/code-block/code-block.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 { Button } from \"../button/button\"\nimport { highlightCode, splitTokenLines } from \"../../lib/code-highlight\"\nimport { useCodeTokenRenderer } from \"../../lib/code-tokens\"\nimport { gutterDigits } from \"../../lib/code-lines\"\n\n/**\n * Read-only highlighted code. Source is rendered as text, and the focusable `<pre>` keeps\n * horizontal overflow keyboard-accessible.\n */\n\nconst COPY_FEEDBACK_MS = 2000\n\n/** Gutter width in monospace glyphs, shared by every numbered row. */\nconst GUTTER = \"--zenith-code-gutter\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    minWidth: 0,\n    position: \"relative\",\n    // The same role recipe Surface's `section` uses, and the same property shapes, so a caller's\n    // own border or radius replaces these through `mergeClasses` without a wrapper.\n    backgroundColor: tokens.surfaceContainer,\n    ...shorthands.borderWidth(tokens.borderWidthContainer),\n    ...shorthands.borderStyle(\"solid\"),\n    ...shorthands.borderColor(tokens.borderContainer),\n    borderRadius: tokens.surfaceRadiusContainer,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n  },\n  // Griffel ancestor state selectors must be declared on the ancestor.\n  rootCopyReveal: {\n    \"&:hover [data-copy-state]\": { opacity: 1 },\n    \"&:focus-within [data-copy-state]\": { opacity: 1 },\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.paddingBlock(tokens.spacingElement1),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    // `borderBottom` expands to the three bottom-edge longhands; there is no per-edge width\n    // helper, and a bare `borderBottomWidth: …` alongside a neighbour's `borderWidth` shorthand\n    // is exactly the property-shape mismatch AGENTS.md rule 3 warns about.\n    ...shorthands.borderBottom(\n      tokens.borderWidthContainer,\n      \"solid\",\n      tokens.surfaceSep\n    ),\n  },\n  // Reserve the overlay button's width when a caption is present.\n  headerWithCopy: {\n    paddingRight: `calc(1.75rem + ${tokens.spacingElement2} + ${tokens.spacingElement05})`,\n    minHeight: `calc(1.75rem + ${tokens.spacingElement05} + ${tokens.spacingElement05})`,\n  },\n  title: {\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightMedium,\n    color: tokens.grayA12,\n    minWidth: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  language: {\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    color: tokens.grayA11,\n    // The language label names a machine format, so it stays in the code family rather than\n    // inheriting the surrounding UI face.\n    fontFamily: tokens.fontMono,\n    whiteSpace: \"nowrap\",\n  },\n  headerSpacer: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minWidth: 0,\n  },\n  // The button stays in the tab order while its paint is hidden.\n  copy: {\n    position: \"absolute\",\n    top: tokens.spacingElement05,\n    right: tokens.spacingElement05,\n    zIndex: 1,\n    backgroundColor: tokens.surfaceContainer,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"120ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0s\",\n    },\n    \"@media (hover: none)\": {\n      opacity: 1,\n    },\n    // Focus and feedback must override the hidden resting state.\n    \"&[data-copy-state='copied']\": { opacity: 1 },\n    \"&[data-copy-state='error']\": { opacity: 1 },\n    \"&:focus-visible\": { opacity: 1 },\n  },\n  pre: {\n    ...shorthands.margin(0),\n    ...shorthands.padding(tokens.spacingElement2),\n    overflowX: \"auto\",\n    overflowY: \"auto\",\n    fontFamily: tokens.fontMono,\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    color: tokens.grayA12,\n    // `tab-size` is what makes a tab-indented source line up at all; 2 matches the indent the\n    // editor inserts by default.\n    tabSize: 2,\n    outlineStyle: \"none\",\n    // Declared after the base so the focus ring wins, per the ordering rule in AGENTS.md.\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"-2px\",\n      outlineColor: tokens.semFocusRing,\n    },\n  },\n  // Sticky numbers must pin flush to the scrollport.\n  preGutter: {\n    paddingLeft: 0,\n  },\n  preNoWrap: {\n    whiteSpace: \"pre\",\n  },\n  preWrap: {\n    whiteSpace: \"pre-wrap\",\n    overflowWrap: \"break-word\",\n  },\n  code: {\n    // `<code>` is inline by default, which collapses the numbered-line grid to one row.\n    display: \"block\",\n    fontFamily: \"inherit\",\n    fontSize: \"inherit\",\n    lineHeight: \"inherit\",\n  },\n  // Give sticky gutters and row bands the full width of unwrapped code.\n  codeNoWrap: {\n    width: \"max-content\",\n    minWidth: \"100%\",\n  },\n  line: {\n    display: \"flex\",\n    width: \"100%\",\n    // Avoid sticky touch-hover states; paint both cells because the gutter is opaque.\n    \"@media (hover: hover)\": {\n      [`&:hover [${SLOT_ATTR}='code-block-line-number'], &:hover [${SLOT_ATTR}='code-block-line-content']`]:\n        {\n          backgroundImage: `linear-gradient(${tokens.grayA2}, ${tokens.grayA2})`,\n        },\n    },\n  },\n  lineNumber: {\n    // Not selectable, so dragging a selection across the block copies code and not a column of\n    // integers. The copy button never sees these at all — it copies the original `code` string.\n    userSelect: \"none\",\n    textAlign: \"right\",\n    flexGrow: 0,\n    flexShrink: 0,\n    color: tokens.grayA8,\n    boxSizing: \"border-box\",\n    width: `calc(var(${GUTTER}) + ${tokens.spacingElement2} + ${tokens.spacingElement3})`,\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement3,\n    // Opaque because horizontally scrolled code passes beneath the sticky gutter.\n    position: \"sticky\",\n    left: 0,\n    backgroundColor: tokens.surfaceContainer,\n  },\n  lineContent: {\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"auto\",\n  },\n  lineContentWrap: {\n    overflowWrap: \"break-word\",\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    ...shorthands.padding(0),\n    ...shorthands.margin(\"-1px\"),\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nconst CopyIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n    {...props}\n  >\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M5 15V5a2 2 0 0 1 2-2h10\" />\n  </svg>\n)\n\nconst CheckIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n    {...props}\n  >\n    <path d=\"m4 12.5 5 5 11-11\" />\n  </svg>\n)\n\n/** Idle, or the outcome of the last copy attempt. Drives both the icon and the live region. */\ntype CopyState = \"idle\" | \"copied\" | \"error\"\n\nexport type CodeBlockProps = Omit<\n  React.ComponentProps<\"div\">,\n  \"children\" | \"title\"\n> & {\n  /** The source to display. Rendered as text — never as markup, and never evaluated. */\n  code: string\n  /** Language grammar used for syntax highlighting, also shown in the header. */\n  language?: string\n  /**\n   * Visible caption, typically a file name. Also names the scrollable code region.\n   *\n   * This replaces the native `title` attribute, which would have rendered a browser tooltip\n   * instead of a caption.\n   */\n  title?: string\n  /** Soft-wrap long lines instead of scrolling horizontally. */\n  wrap?: boolean\n  /**\n   * Render a non-selectable line-number gutter, and give each row a hover band.\n   *\n   * Off by default. Numbers are wayfinding for prose that refers to a line by number; on a\n   * four-line snippet they are a column of noise that also costs horizontal space.\n   */\n  showLineNumbers?: boolean\n  /** Show the copy button. */\n  copyable?: boolean\n  /** Accessible name of the copy button. */\n  copyLabel?: string\n  /** Announced, and used as the button's name, after a successful copy. */\n  copiedLabel?: string\n  /** Announced, and used as the button's name, when the clipboard is unavailable or refuses. */\n  copyErrorLabel?: string\n  /** Called with the exact string written to the clipboard. */\n  onCopy?: (code: string) => void\n  /** Called when the clipboard write failed or was unavailable. */\n  onCopyError?: (error: unknown) => void\n}\n\nexport const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(\n  function CodeBlock(\n    {\n      code,\n      language,\n      title,\n      wrap = false,\n      showLineNumbers = false,\n      copyable = false,\n      copyLabel = \"Copy code\",\n      copiedLabel = \"Copied\",\n      copyErrorLabel = \"Copy failed\",\n      onCopy,\n      onCopyError,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const reactId = React.useId()\n    const titleId = `${reactId}-title`\n\n    const [copyState, setCopyState] = React.useState<CopyState>(\"idle\")\n    const resetTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n\n    React.useEffect(\n      () => () => {\n        if (resetTimer.current !== null) clearTimeout(resetTimer.current)\n      },\n      []\n    )\n\n    const handleCopy = React.useCallback(async () => {\n      // Read the clipboard off `navigator` at click time, never at import or render time: this is\n      // the only browser-only access in the component, and an event handler cannot run on a\n      // server. A missing or rejecting clipboard is an ordinary outcome here (insecure origin,\n      // denied permission, older browser), not an exception to propagate.\n      let failure: unknown = null\n      try {\n        const clipboard =\n          typeof navigator === \"undefined\" ? undefined : navigator.clipboard\n        if (typeof clipboard?.writeText !== \"function\") {\n          failure = new Error(\"Clipboard API unavailable\")\n        } else {\n          await clipboard.writeText(code)\n        }\n      } catch (error) {\n        failure = error ?? new Error(\"Clipboard write rejected\")\n      }\n\n      if (failure === null) onCopy?.(code)\n      else onCopyError?.(failure)\n\n      setCopyState(failure === null ? \"copied\" : \"error\")\n      if (resetTimer.current !== null) clearTimeout(resetTimer.current)\n      resetTimer.current = setTimeout(() => {\n        resetTimer.current = null\n        setCopyState(\"idle\")\n      }, COPY_FEEDBACK_MS)\n    }, [code, onCopy, onCopyError])\n\n    // One trailing newline is an artefact of how source files end, not a line the reader should\n    // see numbered and empty. The clipboard still gets `code` byte for byte.\n    const displayed = code.endsWith(\"\\n\") ? code.slice(0, -1) : code\n    const renderTokens = useCodeTokenRenderer()\n\n    // Tokenized once per (source, language). Synchronous by construction, so the server render and\n    // the first client render produce identical markup and hydration has nothing to reconcile.\n    const highlighted = React.useMemo(\n      () => highlightCode(displayed, language),\n      [displayed, language]\n    )\n\n    // Two shapes, because the gutter needs rows: a plain string or a token run when there are no\n    // line numbers, and one entry per line when there are.\n    const plainLines = React.useMemo(\n      () => (showLineNumbers ? displayed.split(\"\\n\") : null),\n      [displayed, showLineNumbers]\n    )\n    const tokenLines = React.useMemo(\n      () =>\n        showLineNumbers && highlighted !== null\n          ? splitTokenLines(highlighted)\n          : null,\n      [highlighted, showLineNumbers]\n    )\n\n    // An empty string is not a caption. Normalised once, so the header, the caption element and\n    // the region's name can never disagree about whether there is one — labelling the region by an\n    // empty caption would name it with nothing, which is worse than leaving it unnamed.\n    const hasTitle = title !== undefined && title !== \"\"\n    const hasLanguage = language !== undefined && language !== \"\"\n\n    const ariaLabel = props[\"aria-label\"]\n    const ariaLabelledBy = props[\"aria-labelledby\"]\n    // A region needs a name. Prefer the caption the reader can see, then whatever the caller\n    // supplied; with none of the three, stay focusable but claim no landmark.\n    const labelledBy = hasTitle ? titleId : ariaLabelledBy\n    const named = labelledBy !== undefined || ariaLabel !== undefined\n\n    const copyStatusLabel =\n      copyState === \"copied\"\n        ? copiedLabel\n        : copyState === \"error\"\n          ? copyErrorLabel\n          : copyLabel\n\n    // A header exists for content. A copy button is an overlay and does not summon one — that is\n    // what lets `<CodeBlock code copyable />` reserve no vertical space for chrome at all.\n    const showHeader = hasTitle || hasLanguage\n\n    const gutterStyle =\n      plainLines === null\n        ? style\n        : ({\n            [GUTTER]: `${gutterDigits(plainLines.length)}ch`,\n            ...style,\n          } as React.CSSProperties)\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"code-block\"\n        {...{ [SLOT_ATTR]: \"code-block\" }}\n        data-language={language}\n        className={mergeClasses(\n          styles.root,\n          copyable ? styles.rootCopyReveal : undefined,\n          className\n        )}\n        style={gutterStyle}\n        {...props}\n        aria-label={undefined}\n        aria-labelledby={undefined}\n      >\n        {showHeader ? (\n          <div\n            data-slot=\"code-block-header\"\n            {...{ [SLOT_ATTR]: \"code-block-header\" }}\n            className={mergeClasses(\n              styles.header,\n              copyable ? styles.headerWithCopy : undefined\n            )}\n          >\n            {hasTitle ? (\n              <span\n                id={titleId}\n                data-slot=\"code-block-title\"\n                {...{ [SLOT_ATTR]: \"code-block-title\" }}\n                className={styles.title}\n              >\n                {title}\n              </span>\n            ) : null}\n            {hasLanguage ? (\n              <span\n                data-slot=\"code-block-language\"\n                {...{ [SLOT_ATTR]: \"code-block-language\" }}\n                className={styles.language}\n              >\n                {language}\n              </span>\n            ) : null}\n            <span className={styles.headerSpacer} />\n          </div>\n        ) : null}\n\n        {copyable ? (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            // Button keeps its OWN slot markers, the way Callout leaves the ClearButton it\n            // composes alone: a Button stays a Button, and a rule written against the button\n            // slot must still reach this one. `data-copy-state` is the handle for this\n            // button specifically, and it carries the state a caller would want to select on.\n            data-copy-state={copyState}\n            aria-label={copyStatusLabel}\n            className={styles.copy}\n            onClick={handleCopy}\n          >\n            {copyState === \"copied\" ? <CheckIcon /> : <CopyIcon />}\n          </Button>\n        ) : null}\n\n        <pre\n          data-slot=\"code-block-content\"\n          {...{ [SLOT_ATTR]: \"code-block-content\" }}\n          // Always reachable: this is the scroll container, and a pointer must not be the only\n          // way to scroll it.\n          tabIndex={0}\n          role={named ? \"region\" : undefined}\n          aria-label={ariaLabel}\n          aria-labelledby={labelledBy}\n          className={mergeClasses(\n            styles.pre,\n            plainLines === null ? undefined : styles.preGutter,\n            wrap ? styles.preWrap : styles.preNoWrap\n          )}\n        >\n          <code\n            data-slot=\"code-block-code\"\n            {...{ [SLOT_ATTR]: \"code-block-code\" }}\n            className={mergeClasses(\n              styles.code,\n              plainLines !== null && !wrap ? styles.codeNoWrap : undefined\n            )}\n          >\n            {plainLines === null\n              ? // No gutter: one run, highlighted if we have a grammar, otherwise the raw string.\n                highlighted === null\n                ? displayed\n                : renderTokens(highlighted)\n              : plainLines.map((line, index) => (\n                  <span\n                    // Lines have no identity beyond their position, and the whole block\n                    // re-renders when `code` changes, so the index is the key.\n                    key={index}\n                    data-slot=\"code-block-line\"\n                    {...{ [SLOT_ATTR]: \"code-block-line\" }}\n                    data-line={index + 1}\n                    className={styles.line}\n                  >\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"code-block-line-number\"\n                      {...{ [SLOT_ATTR]: \"code-block-line-number\" }}\n                      className={styles.lineNumber}\n                    >\n                      {index + 1}\n                    </span>\n                    <span\n                      data-slot=\"code-block-line-content\"\n                      {...{ [SLOT_ATTR]: \"code-block-line-content\" }}\n                      className={mergeClasses(\n                        styles.lineContent,\n                        wrap ? styles.lineContentWrap : undefined\n                      )}\n                    >\n                      {/* `tokenLines` is the same text as `plainLines`, split by the same\n                          newlines — `splitTokenLines` round-trips — so the row count matches and\n                          the index is safe. Falls back to the plain line when there is no\n                          grammar. */}\n                      {tokenLines === null\n                        ? line\n                        : renderTokens(tokenLines[index] ?? [])}\n                      {/* The newline keeps a dragged selection line-separated, exactly as the\n                          unnumbered rendering is. */}\n                      {\"\\n\"}\n                    </span>\n                  </span>\n                ))}\n          </code>\n        </pre>\n\n        {copyable ? (\n          <span\n            role=\"status\"\n            aria-live=\"polite\"\n            data-slot=\"code-block-copy-status\"\n            {...{ [SLOT_ATTR]: \"code-block-copy-status\" }}\n            className={styles.srOnly}\n          >\n            {copyState === \"idle\" ? \"\" : copyStatusLabel}\n          </span>\n        ) : null}\n      </div>\n    )\n  }\n)\n"],"names":["COPY_FEEDBACK_MS","GUTTER","useStyles","makeZenithStyles","tokens.surfaceContainer","shorthands","tokens.borderWidthContainer","tokens.borderContainer","tokens.surfaceRadiusContainer","tokens.spacingElement2","tokens.spacingElement1","tokens.surfaceSep","tokens.spacingElement05","tokens.textXs","tokens.leadingXs","tokens.fontWeightMedium","tokens.grayA12","tokens.grayA11","tokens.fontMono","tokens.semFocusRing","SLOT_ATTR","tokens.grayA2","tokens.grayA8","tokens.spacingElement3","CopyIcon","props","jsxs","jsx","CheckIcon","CodeBlock","React","code","language","title","wrap","showLineNumbers","copyable","copyLabel","copiedLabel","copyErrorLabel","onCopy","onCopyError","className","style","ref","styles","titleId","copyState","setCopyState","resetTimer","handleCopy","failure","clipboard","error","displayed","renderTokens","useCodeTokenRenderer","highlighted","highlightCode","plainLines","tokenLines","splitTokenLines","hasTitle","hasLanguage","ariaLabel","ariaLabelledBy","labelledBy","named","copyStatusLabel","showHeader","gutterStyle","gutterDigits","mergeClasses","Button","line","index"],"mappings":"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"}
+{"version":3,"file":"code-block.js","sources":["../../../src/components/code-block/code-block.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 { Button } from \"../button/button\"\nimport { highlightCode, splitTokenLines } from \"../../lib/code-highlight\"\nimport { useCodeTokenRenderer } from \"../../lib/code-tokens\"\nimport { gutterDigits } from \"../../lib/code-lines\"\n\n/**\n * Read-only highlighted code. Source is rendered as text, and the focusable `<pre>` keeps\n * horizontal overflow keyboard-accessible.\n */\n\nconst COPY_FEEDBACK_MS = 2000\n\n/** Gutter width in monospace glyphs, shared by every numbered row. */\nconst GUTTER = \"--zenith-code-gutter\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    minWidth: 0,\n    position: \"relative\",\n    // The same role recipe Surface's `section` uses, and the same property shapes, so a caller's\n    // own border or radius replaces these through `mergeClasses` without a wrapper.\n    backgroundColor: tokens.surfaceContainer,\n    ...shorthands.borderWidth(tokens.borderWidthContainer),\n    ...shorthands.borderStyle(\"solid\"),\n    ...shorthands.borderColor(tokens.borderContainer),\n    borderRadius: tokens.surfaceRadiusContainer,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n  },\n  // Griffel ancestor state selectors must be declared on the ancestor.\n  rootCopyReveal: {\n    \"&:hover [data-copy-state]\": { opacity: 1 },\n    \"&:focus-within [data-copy-state]\": { opacity: 1 },\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.paddingBlock(tokens.spacingElement1),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    // `borderBottom` expands to the three bottom-edge longhands; there is no per-edge width\n    // helper, and a bare `borderBottomWidth: …` alongside a neighbour's `borderWidth` shorthand\n    // is exactly the property-shape mismatch AGENTS.md rule 3 warns about.\n    ...shorthands.borderBottom(\n      tokens.borderWidthContainer,\n      \"solid\",\n      tokens.surfaceSep\n    ),\n  },\n  // Reserve the overlay button's width when a caption is present.\n  headerWithCopy: {\n    paddingRight: `calc(1.75rem + ${tokens.spacingElement2} + ${tokens.spacingElement05})`,\n    minHeight: `calc(1.75rem + ${tokens.spacingElement05} + ${tokens.spacingElement05})`,\n  },\n  title: {\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightMedium,\n    color: tokens.grayA12,\n    minWidth: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  language: {\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    color: tokens.grayA11,\n    // The language label names a machine format, so it stays in the code family rather than\n    // inheriting the surrounding UI face.\n    fontFamily: tokens.fontMono,\n    whiteSpace: \"nowrap\",\n  },\n  headerSpacer: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minWidth: 0,\n  },\n  // The button stays in the tab order while its paint is hidden.\n  copy: {\n    position: \"absolute\",\n    top: tokens.spacingElement05,\n    right: tokens.spacingElement05,\n    zIndex: 1,\n    backgroundColor: tokens.surfaceContainer,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"120ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0s\",\n    },\n    \"@media (hover: none)\": {\n      opacity: 1,\n    },\n    // Focus and feedback must override the hidden resting state.\n    \"&[data-copy-state='copied']\": { opacity: 1 },\n    \"&[data-copy-state='error']\": { opacity: 1 },\n    \"&:focus-visible\": { opacity: 1 },\n  },\n  pre: {\n    ...shorthands.margin(0),\n    ...shorthands.padding(tokens.spacingElement2),\n    overflowX: \"auto\",\n    overflowY: \"auto\",\n    fontFamily: tokens.fontMono,\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    color: tokens.grayA12,\n    // `tab-size` is what makes a tab-indented source line up at all; 2 matches the indent the\n    // editor inserts by default.\n    tabSize: 2,\n    outlineStyle: \"none\",\n    // Declared after the base so the focus ring wins, per the ordering rule in AGENTS.md.\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"-2px\",\n      outlineColor: tokens.focusRing,\n    },\n  },\n  // Sticky numbers must pin flush to the scrollport.\n  preGutter: {\n    paddingLeft: 0,\n  },\n  preNoWrap: {\n    whiteSpace: \"pre\",\n  },\n  preWrap: {\n    whiteSpace: \"pre-wrap\",\n    overflowWrap: \"break-word\",\n  },\n  code: {\n    // `<code>` is inline by default, which collapses the numbered-line grid to one row.\n    display: \"block\",\n    fontFamily: \"inherit\",\n    fontSize: \"inherit\",\n    lineHeight: \"inherit\",\n  },\n  // Give sticky gutters and row bands the full width of unwrapped code.\n  codeNoWrap: {\n    width: \"max-content\",\n    minWidth: \"100%\",\n  },\n  line: {\n    display: \"flex\",\n    width: \"100%\",\n    // Avoid sticky touch-hover states; paint both cells because the gutter is opaque.\n    \"@media (hover: hover)\": {\n      [`&:hover [${SLOT_ATTR}='code-block-line-number'], &:hover [${SLOT_ATTR}='code-block-line-content']`]:\n        {\n          backgroundImage: `linear-gradient(${tokens.grayA2}, ${tokens.grayA2})`,\n        },\n    },\n  },\n  lineNumber: {\n    // Not selectable, so dragging a selection across the block copies code and not a column of\n    // integers. The copy button never sees these at all — it copies the original `code` string.\n    userSelect: \"none\",\n    textAlign: \"right\",\n    flexGrow: 0,\n    flexShrink: 0,\n    color: tokens.grayA8,\n    boxSizing: \"border-box\",\n    width: `calc(var(${GUTTER}) + ${tokens.spacingElement2} + ${tokens.spacingElement3})`,\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement3,\n    // Opaque because horizontally scrolled code passes beneath the sticky gutter.\n    position: \"sticky\",\n    left: 0,\n    backgroundColor: tokens.surfaceContainer,\n  },\n  lineContent: {\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"auto\",\n  },\n  lineContentWrap: {\n    overflowWrap: \"break-word\",\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    ...shorthands.padding(0),\n    ...shorthands.margin(\"-1px\"),\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nconst CopyIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n    {...props}\n  >\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M5 15V5a2 2 0 0 1 2-2h10\" />\n  </svg>\n)\n\nconst CheckIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n    {...props}\n  >\n    <path d=\"m4 12.5 5 5 11-11\" />\n  </svg>\n)\n\n/** Idle, or the outcome of the last copy attempt. Drives both the icon and the live region. */\ntype CopyState = \"idle\" | \"copied\" | \"error\"\n\nexport type CodeBlockProps = Omit<\n  React.ComponentProps<\"div\">,\n  \"children\" | \"title\"\n> & {\n  /** The source to display. Rendered as text — never as markup, and never evaluated. */\n  code: string\n  /** Language grammar used for syntax highlighting, also shown in the header. */\n  language?: string\n  /**\n   * Visible caption, typically a file name. Also names the scrollable code region.\n   *\n   * This replaces the native `title` attribute, which would have rendered a browser tooltip\n   * instead of a caption.\n   */\n  title?: string\n  /** Soft-wrap long lines instead of scrolling horizontally. */\n  wrap?: boolean\n  /**\n   * Render a non-selectable line-number gutter, and give each row a hover band.\n   *\n   * Off by default. Numbers are wayfinding for prose that refers to a line by number; on a\n   * four-line snippet they are a column of noise that also costs horizontal space.\n   */\n  showLineNumbers?: boolean\n  /** Show the copy button. */\n  copyable?: boolean\n  /** Accessible name of the copy button. */\n  copyLabel?: string\n  /** Announced, and used as the button's name, after a successful copy. */\n  copiedLabel?: string\n  /** Announced, and used as the button's name, when the clipboard is unavailable or refuses. */\n  copyErrorLabel?: string\n  /** Called with the exact string written to the clipboard. */\n  onCopy?: (code: string) => void\n  /** Called when the clipboard write failed or was unavailable. */\n  onCopyError?: (error: unknown) => void\n}\n\nexport const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(\n  function CodeBlock(\n    {\n      code,\n      language,\n      title,\n      wrap = false,\n      showLineNumbers = false,\n      copyable = false,\n      copyLabel = \"Copy code\",\n      copiedLabel = \"Copied\",\n      copyErrorLabel = \"Copy failed\",\n      onCopy,\n      onCopyError,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const reactId = React.useId()\n    const titleId = `${reactId}-title`\n\n    const [copyState, setCopyState] = React.useState<CopyState>(\"idle\")\n    const resetTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n    React.useEffect(\n      () => () => {\n        if (resetTimer.current !== null) clearTimeout(resetTimer.current)\n      },\n      []\n    )\n\n    const handleCopy = React.useCallback(async () => {\n      // Read the clipboard off `navigator` at click time, never at import or render time: this is\n      // the only browser-only access in the component, and an event handler cannot run on a\n      // server. A missing or rejecting clipboard is an ordinary outcome here (insecure origin,\n      // denied permission, older browser), not an exception to propagate.\n      let failure: unknown = null\n      try {\n        const clipboard =\n          typeof navigator === \"undefined\" ? undefined : navigator.clipboard\n        if (typeof clipboard?.writeText !== \"function\") {\n          failure = new Error(\"Clipboard API unavailable\")\n        } else {\n          await clipboard.writeText(code)\n        }\n      } catch (error) {\n        failure = error ?? new Error(\"Clipboard write rejected\")\n      }\n\n      if (failure === null) onCopy?.(code)\n      else onCopyError?.(failure)\n\n      setCopyState(failure === null ? \"copied\" : \"error\")\n      if (resetTimer.current !== null) clearTimeout(resetTimer.current)\n      resetTimer.current = setTimeout(() => {\n        resetTimer.current = null\n        setCopyState(\"idle\")\n      }, COPY_FEEDBACK_MS)\n    }, [code, onCopy, onCopyError])\n\n    // One trailing newline is an artefact of how source files end, not a line the reader should\n    // see numbered and empty. The clipboard still gets `code` byte for byte.\n    const displayed = code.endsWith(\"\\n\") ? code.slice(0, -1) : code\n    const renderTokens = useCodeTokenRenderer()\n\n    // Tokenized once per (source, language). Synchronous by construction, so the server render and\n    // the first client render produce identical markup and hydration has nothing to reconcile.\n    const highlighted = React.useMemo(\n      () => highlightCode(displayed, language),\n      [displayed, language]\n    )\n\n    // Two shapes, because the gutter needs rows: a plain string or a token run when there are no\n    // line numbers, and one entry per line when there are.\n    const plainLines = React.useMemo(\n      () => (showLineNumbers ? displayed.split(\"\\n\") : null),\n      [displayed, showLineNumbers]\n    )\n    const tokenLines = React.useMemo(\n      () =>\n        showLineNumbers && highlighted !== null\n          ? splitTokenLines(highlighted)\n          : null,\n      [highlighted, showLineNumbers]\n    )\n\n    // An empty string is not a caption. Normalised once, so the header, the caption element and\n    // the region's name can never disagree about whether there is one — labelling the region by an\n    // empty caption would name it with nothing, which is worse than leaving it unnamed.\n    const hasTitle = title !== undefined && title !== \"\"\n    const hasLanguage = language !== undefined && language !== \"\"\n\n    const ariaLabel = props[\"aria-label\"]\n    const ariaLabelledBy = props[\"aria-labelledby\"]\n    // A region needs a name. Prefer the caption the reader can see, then whatever the caller\n    // supplied; with none of the three, stay focusable but claim no landmark.\n    const labelledBy = hasTitle ? titleId : ariaLabelledBy\n    const named = labelledBy !== undefined || ariaLabel !== undefined\n\n    const copyStatusLabel =\n      copyState === \"copied\"\n        ? copiedLabel\n        : copyState === \"error\"\n          ? copyErrorLabel\n          : copyLabel\n\n    // A header exists for content. A copy button is an overlay and does not summon one — that is\n    // what lets `<CodeBlock code copyable />` reserve no vertical space for chrome at all.\n    const showHeader = hasTitle || hasLanguage\n\n    const gutterStyle =\n      plainLines === null\n        ? style\n        : ({\n            [GUTTER]: `${gutterDigits(plainLines.length)}ch`,\n            ...style,\n          } as React.CSSProperties)\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"code-block\"\n        {...{ [SLOT_ATTR]: \"code-block\" }}\n        data-language={language}\n        className={mergeClasses(\n          styles.root,\n          copyable ? styles.rootCopyReveal : undefined,\n          className\n        )}\n        style={gutterStyle}\n        {...props}\n        aria-label={undefined}\n        aria-labelledby={undefined}\n      >\n        {showHeader ? (\n          <div\n            data-slot=\"code-block-header\"\n            {...{ [SLOT_ATTR]: \"code-block-header\" }}\n            className={mergeClasses(\n              styles.header,\n              copyable ? styles.headerWithCopy : undefined\n            )}\n          >\n            {hasTitle ? (\n              <span\n                id={titleId}\n                data-slot=\"code-block-title\"\n                {...{ [SLOT_ATTR]: \"code-block-title\" }}\n                className={styles.title}\n              >\n                {title}\n              </span>\n            ) : null}\n            {hasLanguage ? (\n              <span\n                data-slot=\"code-block-language\"\n                {...{ [SLOT_ATTR]: \"code-block-language\" }}\n                className={styles.language}\n              >\n                {language}\n              </span>\n            ) : null}\n            <span className={styles.headerSpacer} />\n          </div>\n        ) : null}\n\n        {copyable ? (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            // Button keeps its OWN slot markers, the way Callout leaves the ClearButton it\n            // composes alone: a Button stays a Button, and a rule written against the button\n            // slot must still reach this one. `data-copy-state` is the handle for this\n            // button specifically, and it carries the state a caller would want to select on.\n            data-copy-state={copyState}\n            aria-label={copyStatusLabel}\n            className={styles.copy}\n            onClick={handleCopy}\n          >\n            {copyState === \"copied\" ? <CheckIcon /> : <CopyIcon />}\n          </Button>\n        ) : null}\n\n        <pre\n          data-slot=\"code-block-content\"\n          {...{ [SLOT_ATTR]: \"code-block-content\" }}\n          // Always reachable: this is the scroll container, and a pointer must not be the only\n          // way to scroll it.\n          tabIndex={0}\n          role={named ? \"region\" : undefined}\n          aria-label={ariaLabel}\n          aria-labelledby={labelledBy}\n          className={mergeClasses(\n            styles.pre,\n            plainLines === null ? undefined : styles.preGutter,\n            wrap ? styles.preWrap : styles.preNoWrap\n          )}\n        >\n          <code\n            data-slot=\"code-block-code\"\n            {...{ [SLOT_ATTR]: \"code-block-code\" }}\n            className={mergeClasses(\n              styles.code,\n              plainLines !== null && !wrap ? styles.codeNoWrap : undefined\n            )}\n          >\n            {plainLines === null\n              ? // No gutter: one run, highlighted if we have a grammar, otherwise the raw string.\n                highlighted === null\n                ? displayed\n                : renderTokens(highlighted)\n              : plainLines.map((line, index) => (\n                  <span\n                    // Lines have no identity beyond their position, and the whole block\n                    // re-renders when `code` changes, so the index is the key.\n                    key={index}\n                    data-slot=\"code-block-line\"\n                    {...{ [SLOT_ATTR]: \"code-block-line\" }}\n                    data-line={index + 1}\n                    className={styles.line}\n                  >\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"code-block-line-number\"\n                      {...{ [SLOT_ATTR]: \"code-block-line-number\" }}\n                      className={styles.lineNumber}\n                    >\n                      {index + 1}\n                    </span>\n                    <span\n                      data-slot=\"code-block-line-content\"\n                      {...{ [SLOT_ATTR]: \"code-block-line-content\" }}\n                      className={mergeClasses(\n                        styles.lineContent,\n                        wrap ? styles.lineContentWrap : undefined\n                      )}\n                    >\n                      {/* `tokenLines` is the same text as `plainLines`, split by the same\n                          newlines — `splitTokenLines` round-trips — so the row count matches and\n                          the index is safe. Falls back to the plain line when there is no\n                          grammar. */}\n                      {tokenLines === null\n                        ? line\n                        : renderTokens(tokenLines[index] ?? [])}\n                      {/* The newline keeps a dragged selection line-separated, exactly as the\n                          unnumbered rendering is. */}\n                      {\"\\n\"}\n                    </span>\n                  </span>\n                ))}\n          </code>\n        </pre>\n\n        {copyable ? (\n          <span\n            role=\"status\"\n            aria-live=\"polite\"\n            data-slot=\"code-block-copy-status\"\n            {...{ [SLOT_ATTR]: \"code-block-copy-status\" }}\n            className={styles.srOnly}\n          >\n            {copyState === \"idle\" ? \"\" : copyStatusLabel}\n          </span>\n        ) : null}\n      </div>\n    )\n  }\n)\n"],"names":["COPY_FEEDBACK_MS","GUTTER","useStyles","makeZenithStyles","tokens.surfaceContainer","shorthands","tokens.borderWidthContainer","tokens.borderContainer","tokens.surfaceRadiusContainer","tokens.spacingElement2","tokens.spacingElement1","tokens.surfaceSep","tokens.spacingElement05","tokens.textXs","tokens.leadingXs","tokens.fontWeightMedium","tokens.grayA12","tokens.grayA11","tokens.fontMono","tokens.focusRing","SLOT_ATTR","tokens.grayA2","tokens.grayA8","tokens.spacingElement3","CopyIcon","props","jsxs","jsx","CheckIcon","CodeBlock","React","code","language","title","wrap","showLineNumbers","copyable","copyLabel","copiedLabel","copyErrorLabel","onCopy","onCopyError","className","style","ref","styles","titleId","copyState","setCopyState","resetTimer","handleCopy","failure","clipboard","error","displayed","renderTokens","useCodeTokenRenderer","highlighted","highlightCode","plainLines","tokenLines","splitTokenLines","hasTitle","hasLanguage","ariaLabel","ariaLabelledBy","labelledBy","named","copyStatusLabel","showHeader","gutterStyle","gutterDigits","mergeClasses","Button","line","index"],"mappings":";;;;;;;;;AAiBA,MAAMA,KAAmB,KAGnBC,IAAS,wBAETC,KAAYC,GAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,UAAU;AAAA;AAAA;AAAA,IAGV,iBAAiBC;AAAAA,IACjB,GAAGC,EAAW,YAAYC,CAA2B;AAAA,IACrD,GAAGD,EAAW,YAAY,OAAO;AAAA,IACjC,GAAGA,EAAW,YAAYE,EAAsB;AAAA,IAChD,cAAcC;AAAAA,IACd,WAAW;AAAA,IACX,WAAW;AAAA,EAAA;AAAA;AAAA,EAGb,gBAAgB;AAAA,IACd,6BAA6B,EAAE,SAAS,EAAA;AAAA,IACxC,oCAAoC,EAAE,SAAS,EAAA;AAAA,EAAE;AAAA,EAEnD,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAGH,EAAW,IAAII,CAAsB;AAAA,IACxC,GAAGJ,EAAW,aAAaK,EAAsB;AAAA,IACjD,GAAGL,EAAW,cAAcI,CAAsB;AAAA;AAAA;AAAA;AAAA,IAIlD,GAAGJ,EAAW;AAAA,MACZC;AAAAA,MACA;AAAA,MACAK;AAAAA,IAAO;AAAA,EACT;AAAA;AAAA,EAGF,gBAAgB;AAAA,IACd,cAAc,kBAAkBF,CAAsB,MAAMG,CAAuB;AAAA,IACnF,WAAW,kBAAkBA,CAAuB,MAAMA,CAAuB;AAAA,EAAA;AAAA,EAEnF,OAAO;AAAA,IACL,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,EAAA;AAAA,EAEd,UAAU;AAAA,IACR,UAAUH;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOG;AAAAA;AAAAA;AAAAA,IAGP,YAAYC;AAAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA;AAAA,EAGZ,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,KAAKN;AAAAA,IACL,OAAOA;AAAAA,IACP,QAAQ;AAAA,IACR,iBAAiBR;AAAAA,IACjB,SAAS;AAAA,IACT,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,wBAAwB;AAAA,MACtB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,+BAA+B,EAAE,SAAS,EAAA;AAAA,IAC1C,8BAA8B,EAAE,SAAS,EAAA;AAAA,IACzC,mBAAmB,EAAE,SAAS,EAAA;AAAA,EAAE;AAAA,EAElC,KAAK;AAAA,IACH,GAAGC,EAAW,OAAO,CAAC;AAAA,IACtB,GAAGA,EAAW,QAAQI,CAAsB;AAAA,IAC5C,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAYS;AAAAA,IACZ,UAAUL;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOE;AAAAA;AAAAA;AAAAA,IAGP,SAAS;AAAA,IACT,cAAc;AAAA;AAAA,IAEd,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcG;AAAAA,IAAO;AAAA,EACvB;AAAA;AAAA,EAGF,WAAW;AAAA,IACT,aAAa;AAAA,EAAA;AAAA,EAEf,WAAW;AAAA,IACT,YAAY;AAAA,EAAA;AAAA,EAEd,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,EAAA;AAAA,EAEhB,MAAM;AAAA;AAAA,IAEJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA;AAAA,EAGd,YAAY;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA;AAAA,IAEP,yBAAyB;AAAA,MACvB,CAAC,YAAYC,CAAS,wCAAwCA,CAAS,6BAA6B,GAClG;AAAA,QACE,iBAAiB,mBAAmBC,CAAa,KAAKA,CAAa;AAAA,MAAA;AAAA,IACrE;AAAA,EACJ;AAAA,EAEF,YAAY;AAAA;AAAA;AAAA,IAGV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAOC;AAAAA,IACP,WAAW;AAAA,IACX,OAAO,YAAYrB,CAAM,OAAOQ,CAAsB,MAAMc,CAAsB;AAAA,IAClF,aAAad;AAAAA,IACb,cAAcc;AAAAA;AAAAA,IAEd,UAAU;AAAA,IACV,MAAM;AAAA,IACN,iBAAiBnB;AAAAA,EAAO;AAAA,EAE1B,aAAa;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,iBAAiB;AAAA,IACf,cAAc;AAAA,EAAA;AAAA,EAEhB,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAGC,EAAW,QAAQ,CAAC;AAAA,IACvB,GAAGA,EAAW,OAAO,MAAM;AAAA,IAC3B,WAAW;AAAA,IACX,WAAW;AAAA,IACX,MAAM;AAAA,IACN,YAAY;AAAA,EAAA;AAEhB,CAAC,GAEKmB,KAAW,CAACC,MAChB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,MAChD,gBAAAA,EAAC,QAAA,EAAK,GAAE,2BAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AACrC,GAGIC,KAAY,CAACH,MACjB,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGF;AAAA,IAEJ,UAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,oBAAA,CAAoB;AAAA,EAAA;AAC9B,GA4CWE,KAAYC,EAAM;AAAA,EAC7B,SACE;AAAA,IACE,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,iBAAAC,IAAkB;AAAA,IAClB,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,gBAAAC,IAAiB;AAAA,IACjB,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGlB;AAAA,EAAA,GAELmB,GACA;AACA,UAAMC,IAAS3C,GAAA,GAET4C,IAAU,GADAhB,EAAM,MAAA,CACI,UAEpB,CAACiB,GAAWC,CAAY,IAAIlB,EAAM,SAAoB,MAAM,GAC5DmB,IAAanB,EAAM,OAA6C,IAAI;AAC1E,IAAAA,EAAM;AAAA,MACJ,MAAM,MAAM;AACV,QAAImB,EAAW,YAAY,QAAM,aAAaA,EAAW,OAAO;AAAA,MAClE;AAAA,MACA,CAAA;AAAA,IAAC;AAGH,UAAMC,IAAapB,EAAM,YAAY,YAAY;AAK/C,UAAIqB,IAAmB;AACvB,UAAI;AACF,cAAMC,IACJ,OAAO,YAAc,MAAc,SAAY,UAAU;AAC3D,QAAI,QAAOA,KAAA,gBAAAA,EAAW,cAAc,aAClCD,IAAU,IAAI,MAAM,2BAA2B,IAE/C,MAAMC,EAAU,UAAUrB,CAAI;AAAA,MAElC,SAASsB,GAAO;AACd,QAAAF,IAAUE,KAAS,IAAI,MAAM,0BAA0B;AAAA,MACzD;AAEA,MAAIF,MAAY,OAAMX,KAAA,QAAAA,EAAST,oBACZoB,IAEnBH,EAAaG,MAAY,OAAO,WAAW,OAAO,GAC9CF,EAAW,YAAY,QAAM,aAAaA,EAAW,OAAO,GAChEA,EAAW,UAAU,WAAW,MAAM;AACpC,QAAAA,EAAW,UAAU,MACrBD,EAAa,MAAM;AAAA,MACrB,GAAGhD,EAAgB;AAAA,IACrB,GAAG,CAAC+B,GAAMS,GAAQC,CAAW,CAAC,GAIxBa,IAAYvB,EAAK,SAAS;AAAA,CAAI,IAAIA,EAAK,MAAM,GAAG,EAAE,IAAIA,GACtDwB,IAAeC,GAAA,GAIfC,IAAc3B,EAAM;AAAA,MACxB,MAAM4B,GAAcJ,GAAWtB,CAAQ;AAAA,MACvC,CAACsB,GAAWtB,CAAQ;AAAA,IAAA,GAKhB2B,IAAa7B,EAAM;AAAA,MACvB,MAAOK,IAAkBmB,EAAU,MAAM;AAAA,CAAI,IAAI;AAAA,MACjD,CAACA,GAAWnB,CAAe;AAAA,IAAA,GAEvByB,IAAa9B,EAAM;AAAA,MACvB,MACEK,KAAmBsB,MAAgB,OAC/BI,GAAgBJ,CAAW,IAC3B;AAAA,MACN,CAACA,GAAatB,CAAe;AAAA,IAAA,GAMzB2B,IAAW7B,MAAU,UAAaA,MAAU,IAC5C8B,IAAc/B,MAAa,UAAaA,MAAa,IAErDgC,IAAYvC,EAAM,YAAY,GAC9BwC,IAAiBxC,EAAM,iBAAiB,GAGxCyC,IAAaJ,IAAWhB,IAAUmB,GAClCE,IAAQD,MAAe,UAAaF,MAAc,QAElDI,IACJrB,MAAc,WACVT,IACAS,MAAc,UACZR,IACAF,GAIFgC,IAAaP,KAAYC,GAEzBO,KACJX,MAAe,OACXhB,IACC;AAAA,MACC,CAAC1C,CAAM,GAAG,GAAGsE,GAAaZ,EAAW,MAAM,CAAC;AAAA,MAC5C,GAAGhB;AAAA,IAAA;AAGX,WACE,gBAAAjB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAkB;AAAA,QACA,aAAU;AAAA,QACJ,CAACxB,CAAS,GAAG;AAAA,QACnB,iBAAeY;AAAA,QACf,WAAWwC;AAAA,UACT3B,EAAO;AAAA,UACPT,IAAWS,EAAO,iBAAiB;AAAA,UACnCH;AAAA,QAAA;AAAA,QAEF,OAAO4B;AAAA,QACN,GAAG7C;AAAA,QACJ,cAAY;AAAA,QACZ,mBAAiB;AAAA,QAEhB,UAAA;AAAA,UAAA4C,IACC,gBAAA3C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACJ,CAACN,CAAS,GAAG;AAAA,cACnB,WAAWoD;AAAA,gBACT3B,EAAO;AAAA,gBACPT,IAAWS,EAAO,iBAAiB;AAAA,cAAA;AAAA,cAGpC,UAAA;AAAA,gBAAAiB,IACC,gBAAAnC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAImB;AAAA,oBACJ,aAAU;AAAA,oBACJ,CAAC1B,CAAS,GAAG;AAAA,oBACnB,WAAWyB,EAAO;AAAA,oBAEjB,UAAAZ;AAAA,kBAAA;AAAA,gBAAA,IAED;AAAA,gBACH8B,IACC,gBAAApC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,aAAU;AAAA,oBACJ,CAACP,CAAS,GAAG;AAAA,oBACnB,WAAWyB,EAAO;AAAA,oBAEjB,UAAAb;AAAA,kBAAA;AAAA,gBAAA,IAED;AAAA,gBACJ,gBAAAL,EAAC,QAAA,EAAK,WAAWkB,EAAO,aAAA,CAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAEtC;AAAA,UAEHT,IACC,gBAAAT;AAAA,YAAC8C;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cAKL,mBAAiB1B;AAAA,cACjB,cAAYqB;AAAA,cACZ,WAAWvB,EAAO;AAAA,cAClB,SAASK;AAAA,cAER,gBAAc,WAAW,gBAAAvB,EAACC,IAAA,EAAU,sBAAMJ,IAAA,CAAA,CAAS;AAAA,YAAA;AAAA,UAAA,IAEpD;AAAA,UAEJ,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACJ,CAACP,CAAS,GAAG;AAAA,cAGnB,UAAU;AAAA,cACV,MAAM+C,IAAQ,WAAW;AAAA,cACzB,cAAYH;AAAA,cACZ,mBAAiBE;AAAA,cACjB,WAAWM;AAAA,gBACT3B,EAAO;AAAA,gBACPc,MAAe,OAAO,SAAYd,EAAO;AAAA,gBACzCX,IAAOW,EAAO,UAAUA,EAAO;AAAA,cAAA;AAAA,cAGjC,UAAA,gBAAAlB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,aAAU;AAAA,kBACJ,CAACP,CAAS,GAAG;AAAA,kBACnB,WAAWoD;AAAA,oBACT3B,EAAO;AAAA,oBACPc,MAAe,QAAQ,CAACzB,IAAOW,EAAO,aAAa;AAAA,kBAAA;AAAA,kBAGpD,UAAAc,MAAe;AAAA;AAAA,oBAEZF,MAAgB,OACdH,IACAC,EAAaE,CAAW;AAAA,sBAC1BE,EAAW,IAAI,CAACe,GAAMC,MACpB,gBAAAjD;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAIC,aAAU;AAAA,sBACJ,CAACN,CAAS,GAAG;AAAA,sBACnB,aAAWuD,IAAQ;AAAA,sBACnB,WAAW9B,EAAO;AAAA,sBAElB,UAAA;AAAA,wBAAA,gBAAAlB;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,eAAY;AAAA,4BACZ,aAAU;AAAA,4BACJ,CAACP,CAAS,GAAG;AAAA,4BACnB,WAAWyB,EAAO;AAAA,4BAEjB,UAAA8B,IAAQ;AAAA,0BAAA;AAAA,wBAAA;AAAA,wBAEX,gBAAAjD;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,aAAU;AAAA,4BACJ,CAACN,CAAS,GAAG;AAAA,4BACnB,WAAWoD;AAAA,8BACT3B,EAAO;AAAA,8BACPX,IAAOW,EAAO,kBAAkB;AAAA,4BAAA;AAAA,4BAOjC,UAAA;AAAA,8BAAAe,MAAe,OACZc,IACAnB,EAAaK,EAAWe,CAAK,KAAK,EAAE;AAAA,8BAGvC;AAAA;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACH;AAAA,oBAAA;AAAA,oBAhCKA;AAAA,kBAAA,CAkCR;AAAA,gBAAA;AAAA,cAAA;AAAA,YACP;AAAA,UAAA;AAAA,UAGDvC,IACC,gBAAAT;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAU;AAAA,cACV,aAAU;AAAA,cACJ,CAACP,CAAS,GAAG;AAAA,cACnB,WAAWyB,EAAO;AAAA,cAEjB,UAAAE,MAAc,SAAS,KAAKqB;AAAA,YAAA;AAAA,UAAA,IAE7B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/components/code-editor/code-editor.js

@@ -2,7 +2,7 @@ import { jsxs as j, jsx as n } from "react/jsx-runtime";
 import * as t from "react";
 import { mergeClasses as m, SLOT_ATTR as c, shorthands as l } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as it } from "../../styles/make-styles.js";
-import { leadingXs as le, spacingElement2 as k, surfaceField as oe, spacingElement05 as ze, info11 as nt, warning11 as lt, error11 as at, semInfoUi as st, semWarningUi as ct, semErrorUi as De, grayA12 as _, spacingElement3 as ie, grayA8 as ne, grayA2 as We, accentA5 as dt, fontWeightNormal as ut, trackingNormal as ft, textXs as ht, fontMono as gt, grayA3 as Re, semFocusRing as mt, surfaceRadiusField as pt, borderField as vt, borderWidthField as bt } from "../../tokens/index.js";
+import { leadingXs as le, spacingElement2 as k, surfaceField as oe, spacingElement05 as ze, info11 as nt, warning11 as lt, error11 as at, infoUi as st, warningUi as ct, errorUi as De, grayA12 as _, spacingElement3 as ie, grayA8 as ne, grayA2 as We, accentA5 as dt, fontWeightNormal as ut, trackingNormal as ft, textXs as ht, fontMono as gt, grayA3 as Re, focusRing as mt, surfaceRadiusField as pt, borderField as vt, borderWidthField as bt } from "../../tokens/index.js";
 import { Button as yt } from "../button/button.js";
 import { applyIndent as kt } from "./indent.js";
 import { highlightCode as xt, splitTokenLines as St } from "../../lib/code-highlight.js";