@epilot/zenith-react 0.1.0-next.0

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,124 @@
+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 { 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) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      ref: t,
+      "data-slot": "checkbox-check-icon",
+      [i]: "checkbox-check-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24px",
+      viewBox: "0 -960 960 960",
+      width: "24px",
+      fill: "currentColor",
+      ...e,
+      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) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      ref: t,
+      "data-slot": "checkbox-minus-icon",
+      [i]: "checkbox-minus-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24px",
+      viewBox: "0 -960 960 960",
+      width: "24px",
+      fill: "currentColor",
+      ...e,
+      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),
+    backgroundColor: w,
+    display: "inline-block",
+    boxSizing: "border-box",
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    borderRadius: k,
+    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).
+    boxShadow: "0 1px 2px 0 #0000000d",
+    transitionProperty: "box-shadow",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    transitionDuration: "150ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
+    ":focus-visible": {
+      outlineOffset: "2px",
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: d
+    },
+    "&[data-disabled]": {
+      cursor: "not-allowed",
+      opacity: 0.5,
+      ...r.borderColor(v)
+    },
+    "&[aria-invalid='true']": {
+      outlineColor: d,
+      ...r.borderColor(C)
+    },
+    "&[data-state='indeterminate']": {
+      backgroundColor: s,
+      ...r.borderColor("transparent"),
+      color: g
+    },
+    "&[data-state='checked']": {
+      backgroundColor: f,
+      ...r.borderWidth("0px"),
+      color: p
+    },
+    "&[data-state='checked'] svg, &[data-state='indeterminate'] svg": {
+      width: "0.875rem",
+      height: "0.875rem"
+    }
+  },
+  indicator: {
+    display: "grid",
+    placeContent: "center",
+    height: "100%",
+    color: "currentColor",
+    transitionProperty: "none",
+    "& svg": {
+      width: "0.875rem",
+      height: "0.875rem"
+    }
+  }
+}), M = n.forwardRef(function({ className: e, checked: t, ...l }, h) {
+  const a = T();
+  return /* @__PURE__ */ o(
+    m,
+    {
+      ref: h,
+      checked: t,
+      "data-slot": "checkbox",
+      [i]: "checkbox",
+      className: x(a.root, e),
+      ...l,
+      children: /* @__PURE__ */ o(
+        u,
+        {
+          "data-slot": "checkbox-indicator",
+          [i]: "checkbox-indicator",
+          className: a.indicator,
+          children: t === "indeterminate" ? /* @__PURE__ */ o(y, {}) : /* @__PURE__ */ o(S, {})
+        }
+      )
+    }
+  );
+});
+export {
+  M as Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,422 @@
+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 { 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({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0,
+    position: "relative",
+    // 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.borderStyle("solid"),
+    ...l.borderColor(de),
+    borderRadius: ne,
+    overflowX: "hidden",
+    overflowY: "hidden"
+  },
+  // Griffel ancestor state selectors must be declared on the ancestor.
+  rootCopyReveal: {
+    "&:hover [data-copy-state]": { opacity: 1 },
+    "&:focus-within [data-copy-state]": { opacity: 1 }
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    ...l.gap(p),
+    ...l.paddingBlock(ce),
+    ...l.paddingInline(p),
+    // `borderBottom` expands to the three bottom-edge longhands; there is no per-edge width
+    // 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,
+      "solid",
+      re
+    )
+  },
+  // Reserve the overlay button's width when a caption is present.
+  headerWithCopy: {
+    paddingRight: `calc(1.75rem + ${p} + ${b})`,
+    minHeight: `calc(1.75rem + ${b} + ${b})`
+  },
+  title: {
+    fontSize: $,
+    lineHeight: R,
+    fontWeight: ae,
+    color: D,
+    minWidth: 0,
+    overflowX: "hidden",
+    overflowY: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  language: {
+    fontSize: $,
+    lineHeight: R,
+    color: le,
+    // The language label names a machine format, so it stays in the code family rather than
+    // inheriting the surrounding UI face.
+    fontFamily: E,
+    whiteSpace: "nowrap"
+  },
+  headerSpacer: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    minWidth: 0
+  },
+  // The button stays in the tab order while its paint is hidden.
+  copy: {
+    position: "absolute",
+    top: b,
+    right: b,
+    zIndex: 1,
+    backgroundColor: T,
+    opacity: 0,
+    transitionProperty: "opacity",
+    transitionDuration: "120ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0s"
+    },
+    "@media (hover: none)": {
+      opacity: 1
+    },
+    // Focus and feedback must override the hidden resting state.
+    "&[data-copy-state='copied']": { opacity: 1 },
+    "&[data-copy-state='error']": { opacity: 1 },
+    "&:focus-visible": { opacity: 1 }
+  },
+  pre: {
+    ...l.margin(0),
+    ...l.padding(p),
+    overflowX: "auto",
+    overflowY: "auto",
+    fontFamily: E,
+    fontSize: $,
+    lineHeight: R,
+    color: D,
+    // `tab-size` is what makes a tab-indented source line up at all; 2 matches the indent the
+    // editor inserts by default.
+    tabSize: 2,
+    outlineStyle: "none",
+    // Declared after the base so the focus ring wins, per the ordering rule in AGENTS.md.
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "-2px",
+      outlineColor: ie
+    }
+  },
+  // Sticky numbers must pin flush to the scrollport.
+  preGutter: {
+    paddingLeft: 0
+  },
+  preNoWrap: {
+    whiteSpace: "pre"
+  },
+  preWrap: {
+    whiteSpace: "pre-wrap",
+    overflowWrap: "break-word"
+  },
+  code: {
+    // `<code>` is inline by default, which collapses the numbered-line grid to one row.
+    display: "block",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    lineHeight: "inherit"
+  },
+  // Give sticky gutters and row bands the full width of unwrapped code.
+  codeNoWrap: {
+    width: "max-content",
+    minWidth: "100%"
+  },
+  line: {
+    display: "flex",
+    width: "100%",
+    // Avoid sticky touch-hover states; paint both cells because the gutter is opaque.
+    "@media (hover: hover)": {
+      [`&:hover [${t}='code-block-line-number'], &:hover [${t}='code-block-line-content']`]: {
+        backgroundImage: `linear-gradient(${j}, ${j})`
+      }
+    }
+  },
+  lineNumber: {
+    // Not selectable, so dragging a selection across the block copies code and not a column of
+    // integers. The copy button never sees these at all — it copies the original `code` string.
+    userSelect: "none",
+    textAlign: "right",
+    flexGrow: 0,
+    flexShrink: 0,
+    color: te,
+    boxSizing: "border-box",
+    width: `calc(var(${Y}) + ${p} + ${X})`,
+    paddingLeft: p,
+    paddingRight: X,
+    // Opaque because horizontally scrolled code passes beneath the sticky gutter.
+    position: "sticky",
+    left: 0,
+    backgroundColor: T
+  },
+  lineContent: {
+    minWidth: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto"
+  },
+  lineContentWrap: {
+    overflowWrap: "break-word"
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    ...l.padding(0),
+    ...l.margin("-1px"),
+    overflowX: "hidden",
+    overflowY: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap"
+  }
+}), ge = (k) => /* @__PURE__ */ g(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    ...k,
+    children: [
+      /* @__PURE__ */ o("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+      /* @__PURE__ */ o("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+    ]
+  }
+), ke = (k) => /* @__PURE__ */ o(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    ...k,
+    children: /* @__PURE__ */ o("path", { d: "m4 12.5 5 5 11-11" })
+  }
+), Re = a.forwardRef(
+  function({
+    code: r,
+    language: c,
+    title: S,
+    wrap: C = !1,
+    showLineNumbers: v = !1,
+    copyable: y = !1,
+    copyLabel: P = "Copy code",
+    copiedLabel: _ = "Copied",
+    copyErrorLabel: K = "Copy failed",
+    onCopy: w,
+    onCopyError: x,
+    className: U,
+    style: B,
+    ...W
+  }, V) {
+    const e = be(), I = `${a.useId()}-title`, [h, L] = a.useState("idle"), d = a.useRef(null);
+    a.useEffect(
+      () => () => {
+        d.current !== null && clearTimeout(d.current);
+      },
+      []
+    );
+    const Z = a.useCallback(async () => {
+      let n = null;
+      try {
+        const i = typeof navigator > "u" ? void 0 : navigator.clipboard;
+        typeof (i == null ? void 0 : i.writeText) != "function" ? n = new Error("Clipboard API unavailable") : await i.writeText(r);
+      } catch (i) {
+        n = i ?? new Error("Clipboard write rejected");
+      }
+      n === null ? w == null || w(r) : x == null || x(n), L(n === null ? "copied" : "error"), d.current !== null && clearTimeout(d.current), d.current = setTimeout(() => {
+        d.current = null, L("idle");
+      }, me);
+    }, [r, w, x]), u = r.endsWith(`
+`) ? r.slice(0, -1) : r, z = ue(), f = a.useMemo(
+      () => pe(u, c),
+      [u, c]
+    ), s = a.useMemo(
+      () => v ? u.split(`
+`) : null,
+      [u, v]
+    ), A = a.useMemo(
+      () => 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`,
+      ...B
+    };
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        ref: V,
+        "data-slot": "code-block",
+        [t]: "code-block",
+        "data-language": c,
+        className: m(
+          e.root,
+          y ? e.rootCopyReveal : void 0,
+          U
+        ),
+        style: ee,
+        ...W,
+        "aria-label": void 0,
+        "aria-labelledby": void 0,
+        children: [
+          Q ? /* @__PURE__ */ g(
+            "div",
+            {
+              "data-slot": "code-block-header",
+              [t]: "code-block-header",
+              className: m(
+                e.header,
+                y ? e.headerWithCopy : void 0
+              ),
+              children: [
+                N ? /* @__PURE__ */ o(
+                  "span",
+                  {
+                    id: I,
+                    "data-slot": "code-block-title",
+                    [t]: "code-block-title",
+                    className: e.title,
+                    children: S
+                  }
+                ) : null,
+                M ? /* @__PURE__ */ o(
+                  "span",
+                  {
+                    "data-slot": "code-block-language",
+                    [t]: "code-block-language",
+                    className: e.language,
+                    children: c
+                  }
+                ) : null,
+                /* @__PURE__ */ o("span", { className: e.headerSpacer })
+              ]
+            }
+          ) : null,
+          y ? /* @__PURE__ */ o(
+            se,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              "data-copy-state": h,
+              "aria-label": O,
+              className: e.copy,
+              onClick: Z,
+              children: h === "copied" ? /* @__PURE__ */ o(ke, {}) : /* @__PURE__ */ o(ge, {})
+            }
+          ) : null,
+          /* @__PURE__ */ o(
+            "pre",
+            {
+              "data-slot": "code-block-content",
+              [t]: "code-block-content",
+              tabIndex: 0,
+              role: J ? "region" : void 0,
+              "aria-label": G,
+              "aria-labelledby": H,
+              className: m(
+                e.pre,
+                s === null ? void 0 : e.preGutter,
+                C ? e.preWrap : e.preNoWrap
+              ),
+              children: /* @__PURE__ */ o(
+                "code",
+                {
+                  "data-slot": "code-block-code",
+                  [t]: "code-block-code",
+                  className: m(
+                    e.code,
+                    s !== null && !C ? e.codeNoWrap : void 0
+                  ),
+                  children: s === null ? (
+                    // No gutter: one run, highlighted if we have a grammar, otherwise the raw string.
+                    f === null ? u : z(f)
+                  ) : s.map((n, i) => /* @__PURE__ */ g(
+                    "span",
+                    {
+                      "data-slot": "code-block-line",
+                      [t]: "code-block-line",
+                      "data-line": i + 1,
+                      className: e.line,
+                      children: [
+                        /* @__PURE__ */ o(
+                          "span",
+                          {
+                            "aria-hidden": "true",
+                            "data-slot": "code-block-line-number",
+                            [t]: "code-block-line-number",
+                            className: e.lineNumber,
+                            children: i + 1
+                          }
+                        ),
+                        /* @__PURE__ */ g(
+                          "span",
+                          {
+                            "data-slot": "code-block-line-content",
+                            [t]: "code-block-line-content",
+                            className: m(
+                              e.lineContent,
+                              C ? e.lineContentWrap : void 0
+                            ),
+                            children: [
+                              A === null ? n : z(A[i] ?? []),
+                              `
+`
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    i
+                  ))
+                }
+              )
+            }
+          ),
+          y ? /* @__PURE__ */ o(
+            "span",
+            {
+              role: "status",
+              "aria-live": "polite",
+              "data-slot": "code-block-copy-status",
+              [t]: "code-block-copy-status",
+              className: e.srOnly,
+              children: h === "idle" ? "" : O
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  Re as CodeBlock
+};
+//# sourceMappingURL=code-block.js.map

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

@@ -0,0 +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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"}