@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-EBNPVPR7.js

@@ -0,0 +1,266 @@
+"use client";
+import {
+  formatColorAsOklch,
+  formatLengthAsPx
+} from "./chunk-HCU2JHPH.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/token-spotlight/token-spotlight.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TOKEN_SPOTLIGHT_LABELS = {
+  row: "Design tokens",
+  hint: "Highlights every element on this page that uses this token."
+};
+var TOKEN_SPOTLIGHT_SCAN_LIMIT = 2e3;
+var SCAN_CHUNK_SIZE = 150;
+var MARK_CHUNK_SIZE = 40;
+var BORDER_SIDES = ["Top", "Right", "Bottom", "Left"];
+var SVG_PAINTING_ELEMENTS = /* @__PURE__ */ new Set([
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  "text",
+  "textPath",
+  "tspan"
+]);
+function hasOwnText(el) {
+  for (const node of Array.from(el.childNodes)) {
+    if (node.nodeType === 3 && node.nodeValue?.trim()) return true;
+  }
+  return false;
+}
+function consumerOf(el, style, matchValue) {
+  if (el instanceof SVGElement) {
+    if (!SVG_PAINTING_ELEMENTS.has(el.localName)) return null;
+    const paints = style.fill === matchValue || style.stroke === matchValue && parseFloat(style.strokeWidth) > 0;
+    return paints ? el.ownerSVGElement ?? el : null;
+  }
+  if (style.backgroundColor === matchValue) return el;
+  for (const side of BORDER_SIDES) {
+    if (style[`border${side}Color`] === matchValue && parseFloat(style[`border${side}Width`]) > 0) {
+      return el;
+    }
+  }
+  if (style.color === matchValue && hasOwnText(el)) return el;
+  return null;
+}
+function scheduleIdle(callback) {
+  const w = window;
+  if (typeof w.requestIdleCallback === "function") {
+    const handle2 = w.requestIdleCallback(callback, { timeout: 100 });
+    return () => w.cancelIdleCallback?.(handle2);
+  }
+  const handle = window.setTimeout(
+    () => callback({ timeRemaining: () => 50, didTimeout: true }),
+    0
+  );
+  return () => window.clearTimeout(handle);
+}
+function resolveTokenMatchValue(token, doc = document) {
+  const probe = doc.createElement("span");
+  probe.style.cssText = `position:fixed;inset:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;background-color:var(${token});`;
+  doc.body.appendChild(probe);
+  const value = getComputedStyle(probe).backgroundColor;
+  doc.body.removeChild(probe);
+  return value;
+}
+var supportsCss = (property, value) => typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports(property, value);
+function probeComputed(host, property, token) {
+  const doc = host.ownerDocument;
+  const probe = doc.createElement("span");
+  probe.style.cssText = `position:fixed;inset:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;${property}:var(${token});`;
+  host.appendChild(probe);
+  const value = getComputedStyle(probe).getPropertyValue(property);
+  host.removeChild(probe);
+  return value;
+}
+function resolveTokenDisplayValue(token, root) {
+  const target = root ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (!target) return "";
+  const raw = getComputedStyle(target).getPropertyValue(token).trim();
+  if (!raw) return "";
+  const direct = formatColorAsOklch(raw);
+  if (direct) return direct;
+  const host = target === target.ownerDocument.documentElement ? target.ownerDocument.body : target;
+  if (supportsCss("color", raw)) {
+    return formatColorAsOklch(probeComputed(host, "color", token)) ?? raw;
+  }
+  if (supportsCss("width", raw)) {
+    return formatLengthAsPx(probeComputed(host, "letter-spacing", token)) ?? raw;
+  }
+  return raw;
+}
+var isEmptyMatchValue = (value) => value === "" || value === "rgba(0, 0, 0, 0)" || value === "transparent";
+function scanForConsumers(root, matchValue, limit, onDone) {
+  if (isEmptyMatchValue(matchValue)) {
+    onDone([]);
+    return () => {
+    };
+  }
+  const candidates = Array.from(root.querySelectorAll("*")).slice(0, limit);
+  const found = /* @__PURE__ */ new Set();
+  let index = 0;
+  let cancelled = false;
+  let cancelIdle = () => {
+  };
+  const step = (deadline) => {
+    if (cancelled) return;
+    let examinedInSlice = 0;
+    while (index < candidates.length && examinedInSlice < SCAN_CHUNK_SIZE && (deadline.timeRemaining() > 0 || deadline.didTimeout)) {
+      const el = candidates[index++];
+      examinedInSlice++;
+      if (!(el instanceof HTMLElement) && !(el instanceof SVGElement)) continue;
+      const consumer = consumerOf(el, getComputedStyle(el), matchValue);
+      if (consumer) found.add(consumer);
+    }
+    if (index < candidates.length) {
+      cancelIdle = scheduleIdle(step);
+    } else {
+      onDone(Array.from(found));
+    }
+  };
+  cancelIdle = scheduleIdle(step);
+  return () => {
+    cancelled = true;
+    cancelIdle();
+  };
+}
+function writeMarksInSlices(elements, name, written) {
+  let index = 0;
+  let cancelled = false;
+  let cancelIdle = () => {
+  };
+  const step = () => {
+    if (cancelled) return;
+    const end = Math.min(index + MARK_CHUNK_SIZE, elements.length);
+    for (const el of elements.slice(index, end)) {
+      el.setAttribute("data-token-consumer", name);
+      written.push(el);
+    }
+    index = end;
+    if (index < elements.length) cancelIdle = scheduleIdle(step);
+  };
+  if (elements.length > 0) cancelIdle = scheduleIdle(step);
+  return () => {
+    cancelled = true;
+    cancelIdle();
+  };
+}
+function useRootAttribute(name) {
+  const [value, setValue] = React.useState(
+    () => typeof document === "undefined" ? "" : document.documentElement.getAttribute(name) ?? ""
+  );
+  React.useEffect(() => {
+    if (typeof MutationObserver === "undefined") return;
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setValue(root.getAttribute(name) ?? "");
+    });
+    observer.observe(root, { attributes: true, attributeFilter: [name] });
+    return () => observer.disconnect();
+  }, [name]);
+  return value;
+}
+var TokenSpotlight = React.forwardRef(
+  function TokenSpotlight2({
+    tokens,
+    onSpotlight,
+    scanLimit = TOKEN_SPOTLIGHT_SCAN_LIMIT,
+    labels: labelsProp,
+    className,
+    ...props
+  }, ref) {
+    const labels = { ...DEFAULT_TOKEN_SPOTLIGHT_LABELS, ...labelsProp };
+    const theme = useRootAttribute("data-theme");
+    const decoration = useRootAttribute("data-decoration");
+    const [active, setActive] = React.useState(null);
+    const consumersRef = React.useRef([]);
+    const [displayValues, setDisplayValues] = React.useState({});
+    React.useEffect(() => {
+      const next = {};
+      for (const { token } of tokens) next[token] = resolveTokenDisplayValue(token);
+      setDisplayValues(next);
+    }, [theme, decoration, tokens]);
+    const clearConsumers = React.useCallback(() => {
+      for (const el of consumersRef.current) el.removeAttribute("data-token-consumer");
+      consumersRef.current = [];
+    }, []);
+    React.useEffect(() => {
+      const root = document.documentElement;
+      if (!active) {
+        delete root.dataset.tokenSpotlight;
+        clearConsumers();
+        onSpotlight?.(null);
+        return;
+      }
+      const bareToken = active.replace(/^--/, "");
+      root.dataset.tokenSpotlight = bareToken;
+      onSpotlight?.(active);
+      const matchValue = resolveTokenMatchValue(active);
+      let cancelMarks = () => {
+      };
+      const cancelScan = scanForConsumers(document.body, matchValue, scanLimit, (elements) => {
+        clearConsumers();
+        cancelMarks = writeMarksInSlices(elements, bareToken, consumersRef.current);
+      });
+      return () => {
+        cancelScan();
+        cancelMarks();
+        clearConsumers();
+        delete root.dataset.tokenSpotlight;
+      };
+    }, [active, theme, scanLimit]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-label": labels.row,
+        "data-slot": "token-spotlight",
+        className: cn("flex flex-wrap items-center gap-2", className),
+        ...props,
+        children: tokens.map(({ token, label }) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-slot": "token-spotlight-chip",
+            "data-active": active === token ? "" : void 0,
+            className: cn(
+              "focus-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-meta font-medium",
+              "bg-card text-foreground transition-colors",
+              active === token ? "border-ring" : "border-border-strong"
+            ),
+            onMouseEnter: () => setActive(token),
+            onMouseLeave: () => setActive((current) => current === token ? null : current),
+            onFocus: () => setActive(token),
+            onBlur: () => setActive((current) => current === token ? null : current),
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "font-mono text-code", children: token }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: displayValues[token] || "\u2014" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: ` \u2014 ${label}. ${labels.hint}` })
+            ]
+          },
+          token
+        ))
+      }
+    );
+  }
+);
+TokenSpotlight.displayName = "TokenSpotlight";
+
+export {
+  DEFAULT_TOKEN_SPOTLIGHT_LABELS,
+  TOKEN_SPOTLIGHT_SCAN_LIMIT,
+  resolveTokenMatchValue,
+  resolveTokenDisplayValue,
+  scanForConsumers,
+  TokenSpotlight
+};
+//# sourceMappingURL=chunk-EBNPVPR7.js.map

package/dist/chunk-EBNPVPR7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/token-spotlight/token-spotlight.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { formatColorAsOklch, formatLengthAsPx } from \"./token-value-format\";\nimport \"./token-spotlight.css\";\n\n/** One chip: a semantic token plus its display label. */\nexport interface TokenSpotlightToken {\n  /** The CSS custom property name, including its leading `--` (e.g. `--primary`). */\n  token: string;\n  /** Display label for the chip — supply your own to localize. */\n  label: string;\n}\n\nexport interface TokenSpotlightLabels {\n  /** Accessible name of the chip row (`role=\"group\"`). */\n  row: string;\n  /** sr-only text appended to each chip's accessible name, describing what hovering does. */\n  hint: string;\n}\n\nexport const DEFAULT_TOKEN_SPOTLIGHT_LABELS: TokenSpotlightLabels = {\n  row: \"Design tokens\",\n  hint: \"Highlights every element on this page that uses this token.\",\n};\n\n/** Hard cap on elements a single scan pass examines (wave-4 ruling 26). */\nexport const TOKEN_SPOTLIGHT_SCAN_LIMIT = 2000;\n/** Elements examined per idle slice before yielding back to the browser. */\nconst SCAN_CHUNK_SIZE = 150;\n/** `data-token-consumer` marks written per idle slice, so the restyle + outline paint they cause\n * is spread over several frames instead of landing in one long task (#583). */\nconst MARK_CHUNK_SIZE = 40;\n\nconst BORDER_SIDES = [\"Top\", \"Right\", \"Bottom\", \"Left\"] as const;\n/** SVG elements that paint their own `fill`/`stroke`; containers (`svg`, `g`) only pass it on. */\nconst SVG_PAINTING_ELEMENTS = new Set([\n  \"circle\",\n  \"ellipse\",\n  \"line\",\n  \"path\",\n  \"polygon\",\n  \"polyline\",\n  \"rect\",\n  \"text\",\n  \"textPath\",\n  \"tspan\",\n]);\n\n/** True when `el` has a direct, non-whitespace text node — i.e. it paints glyphs in its own\n * `color`, rather than merely inheriting a `color` it never uses. */\nfunction hasOwnText(el: Element): boolean {\n  for (const node of Array.from(el.childNodes)) {\n    if (node.nodeType === 3 && node.nodeValue?.trim()) return true;\n  }\n  return false;\n}\n\n/**\n * The element that visibly CONSUMES `matchValue`, or `null` (#583). Only real paint counts:\n * - `background-color` on the element itself;\n * - a border side's colour only where that side's width is > 0 (the base layer gives every element\n *   `border-color: var(--border)` at width 0 — that is not a consumer);\n * - `color` only on an element with its own non-empty text node (inherited `color` is not use);\n * - `fill`/`stroke` only on SVG shapes and text that paint (`stroke` needs a width > 0), reported\n *   as their owning `<svg>` so an icon or chart is one outline, not one per path.\n */\nfunction consumerOf(el: Element, style: CSSStyleDeclaration, matchValue: string): Element | null {\n  if (el instanceof SVGElement) {\n    if (!SVG_PAINTING_ELEMENTS.has(el.localName)) return null;\n    const paints =\n      style.fill === matchValue ||\n      (style.stroke === matchValue && parseFloat(style.strokeWidth) > 0);\n    return paints ? (el.ownerSVGElement ?? el) : null;\n  }\n  if (style.backgroundColor === matchValue) return el;\n  for (const side of BORDER_SIDES) {\n    if (style[`border${side}Color`] === matchValue && parseFloat(style[`border${side}Width`]) > 0) {\n      return el;\n    }\n  }\n  if (style.color === matchValue && hasOwnText(el)) return el;\n  return null;\n}\n\ntype IdleDeadline = { timeRemaining: () => number; didTimeout: boolean };\n\n/** `requestIdleCallback` where it exists; a same-shaped `setTimeout` fallback otherwise (Safari). */\nfunction scheduleIdle(callback: (deadline: IdleDeadline) => void): () => void {\n  const w = window as Window & {\n    requestIdleCallback?: (cb: (d: IdleDeadline) => void, opts?: { timeout: number }) => number;\n    cancelIdleCallback?: (handle: number) => void;\n  };\n  if (typeof w.requestIdleCallback === \"function\") {\n    const handle = w.requestIdleCallback(callback, { timeout: 100 });\n    return () => w.cancelIdleCallback?.(handle);\n  }\n  const handle = window.setTimeout(\n    () => callback({ timeRemaining: () => 50, didTimeout: true }),\n    0,\n  );\n  return () => window.clearTimeout(handle);\n}\n\n/**\n * Resolves `token`'s CURRENT value the same way the browser will compare it: an off-screen probe\n * element takes `background-color: var(token)`, so whatever colour-space normalisation the\n * browser applies happens identically for the probe and for every candidate element below —\n * string equality holds regardless of how a theme authored the value (oklch, rgb, …).\n */\nexport function resolveTokenMatchValue(token: string, doc: Document = document): string {\n  const probe = doc.createElement(\"span\");\n  probe.style.cssText =\n    \"position:fixed;inset:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;\" +\n    `background-color:var(${token});`;\n  doc.body.appendChild(probe);\n  const value = getComputedStyle(probe).backgroundColor;\n  doc.body.removeChild(probe);\n  return value;\n}\n\nconst supportsCss = (property: string, value: string): boolean =>\n  typeof CSS !== \"undefined\" && typeof CSS.supports === \"function\" && CSS.supports(property, value);\n\n/** `property: var(token)` on an off-screen probe inside `host`, read back as the browser's\n * computed value — so `calc()`, `rem`, named colours and `color-mix()` arrive resolved. Lengths go\n * through `letter-spacing`: an absolute computed length (negatives allowed) that, unlike `width`,\n * is never quantised to layout units (`1.6px`, not `1.59375px`). */\nfunction probeComputed(host: Element, property: \"color\" | \"letter-spacing\", token: string): string {\n  const doc = host.ownerDocument;\n  const probe = doc.createElement(\"span\");\n  probe.style.cssText =\n    \"position:fixed;inset:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;\" +\n    `${property}:var(${token});`;\n  host.appendChild(probe);\n  const value = getComputedStyle(probe).getPropertyValue(property);\n  host.removeChild(probe);\n  return value;\n}\n\n/**\n * What a chip shows a person for `token` on `root` (#585): a colour as a rounded `oklch(L C H)`\n * — never the `lab()` a CSS build may have transpiled it to — and a length as resolved px, never\n * a raw `calc()`. Anything else (a font stack, a shadow) is shown as authored. `\"\"` when there is\n * no `document` yet (SSR — the component fills it in after mount).\n */\nexport function resolveTokenDisplayValue(token: string, root?: HTMLElement): string {\n  const target = root ?? (typeof document === \"undefined\" ? undefined : document.documentElement);\n  if (!target) return \"\";\n  const raw = getComputedStyle(target).getPropertyValue(token).trim();\n  if (!raw) return \"\";\n  const direct = formatColorAsOklch(raw);\n  if (direct) return direct;\n  // The probe must inherit `root`'s custom properties: `<html>` itself cannot host it visibly.\n  const host = target === target.ownerDocument.documentElement ? target.ownerDocument.body : target;\n  if (supportsCss(\"color\", raw)) {\n    return formatColorAsOklch(probeComputed(host, \"color\", token)) ?? raw;\n  }\n  if (supportsCss(\"width\", raw)) {\n    return formatLengthAsPx(probeComputed(host, \"letter-spacing\", token)) ?? raw;\n  }\n  return raw;\n}\n\nconst isEmptyMatchValue = (value: string) =>\n  value === \"\" || value === \"rgba(0, 0, 0, 0)\" || value === \"transparent\";\n\n/**\n * Scans `root` in idle-time chunks for elements that visibly paint `matchValue` (from\n * {@link resolveTokenMatchValue}) — a background, a border side with width, their own text, or an\n * SVG shape's fill/stroke (reported as its `<svg>`) — capped at `limit` elements EXAMINED. Never a\n * long task, never inline styles (callers add/remove a `data-token-consumer` attribute instead).\n * Returns a canceller for effect cleanup.\n */\nexport function scanForConsumers(\n  root: ParentNode,\n  matchValue: string,\n  limit: number,\n  onDone: (elements: HTMLElement[]) => void,\n): () => void {\n  if (isEmptyMatchValue(matchValue)) {\n    onDone([]);\n    return () => {};\n  }\n  const candidates = Array.from(root.querySelectorAll(\"*\")).slice(0, limit);\n  const found = new Set<Element>();\n  let index = 0;\n  let cancelled = false;\n  let cancelIdle = () => {};\n\n  const step = (deadline: IdleDeadline) => {\n    if (cancelled) return;\n    let examinedInSlice = 0;\n    while (\n      index < candidates.length &&\n      examinedInSlice < SCAN_CHUNK_SIZE &&\n      (deadline.timeRemaining() > 0 || deadline.didTimeout)\n    ) {\n      const el = candidates[index++];\n      examinedInSlice++;\n      if (!(el instanceof HTMLElement) && !(el instanceof SVGElement)) continue;\n      const consumer = consumerOf(el, getComputedStyle(el), matchValue);\n      if (consumer) found.add(consumer);\n    }\n    if (index < candidates.length) {\n      cancelIdle = scheduleIdle(step);\n    } else {\n      // An SVG consumer is its `<svg>` root — typed `HTMLElement[]` as before for compatibility.\n      onDone(Array.from(found) as HTMLElement[]);\n    }\n  };\n  cancelIdle = scheduleIdle(step);\n  return () => {\n    cancelled = true;\n    cancelIdle();\n  };\n}\n\n/**\n * Writes `data-token-consumer=\"<name>\"` onto `elements` in idle slices of {@link MARK_CHUNK_SIZE},\n * pushing each marked element onto `written` as it goes so the caller can always clear exactly\n * what landed — even mid-way. Returns a canceller that stops further slices (#583).\n */\nfunction writeMarksInSlices(elements: Element[], name: string, written: Element[]): () => void {\n  let index = 0;\n  let cancelled = false;\n  let cancelIdle = () => {};\n  const step = () => {\n    if (cancelled) return;\n    const end = Math.min(index + MARK_CHUNK_SIZE, elements.length);\n    for (const el of elements.slice(index, end)) {\n      el.setAttribute(\"data-token-consumer\", name);\n      written.push(el);\n    }\n    index = end;\n    if (index < elements.length) cancelIdle = scheduleIdle(step);\n  };\n  if (elements.length > 0) cancelIdle = scheduleIdle(step);\n  return () => {\n    cancelled = true;\n    cancelIdle();\n  };\n}\n\n/** Tracks one attribute of `document.documentElement`, so a change re-renders. */\nfunction useRootAttribute(name: \"data-theme\" | \"data-decoration\"): string {\n  const [value, setValue] = React.useState<string>(() =>\n    typeof document === \"undefined\" ? \"\" : (document.documentElement.getAttribute(name) ?? \"\"),\n  );\n  React.useEffect(() => {\n    if (typeof MutationObserver === \"undefined\") return;\n    const root = document.documentElement;\n    const observer = new MutationObserver(() => {\n      setValue(root.getAttribute(name) ?? \"\");\n    });\n    observer.observe(root, { attributes: true, attributeFilter: [name] });\n    return () => observer.disconnect();\n  }, [name]);\n  return value;\n}\n\nexport interface TokenSpotlightProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"onSelect\"\n> {\n  /** Chips to render, in order. */\n  tokens: readonly TokenSpotlightToken[];\n  /** Fires with the token on hover/focus, and `null` when the spotlight clears. */\n  onSpotlight?: (token: string | null) => void;\n  /** Upper bound on elements a scan pass examines. Default {@link TOKEN_SPOTLIGHT_SCAN_LIMIT}. */\n  scanLimit?: number;\n  labels?: Partial<TokenSpotlightLabels>;\n}\n\n/**\n * A row of token chips (concept §4.5, §5a \"Scroll choreography 5\"): hovering or focusing one sets\n * `data-token-spotlight` on `<html>` and marks every element on the page that resolves to the\n * same colour with `data-token-consumer` (never an inline style), so a stylesheet can draw the\n * highlight. `onSpotlight` lets the host tint an `AmbientField` to match. Each chip shows the\n * token's own resolved value, re-read on every theme change.\n */\nexport const TokenSpotlight = React.forwardRef<HTMLDivElement, TokenSpotlightProps>(\n  function TokenSpotlight(\n    {\n      tokens,\n      onSpotlight,\n      scanLimit = TOKEN_SPOTLIGHT_SCAN_LIMIT,\n      labels: labelsProp,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const labels = { ...DEFAULT_TOKEN_SPOTLIGHT_LABELS, ...labelsProp };\n    const theme = useRootAttribute(\"data-theme\");\n    const decoration = useRootAttribute(\"data-decoration\");\n    const [active, setActive] = React.useState<string | null>(null);\n    const consumersRef = React.useRef<Element[]>([]);\n    // Read once after mount and again on every theme or decoration switch (a decoration-scaled\n    // token like `--radius` changes with `data-decoration`, #585) — never during SSR/hydration,\n    // so the server and the first client render agree (both start from `{}`).\n    const [displayValues, setDisplayValues] = React.useState<Record<string, string>>({});\n    React.useEffect(() => {\n      const next: Record<string, string> = {};\n      for (const { token } of tokens) next[token] = resolveTokenDisplayValue(token);\n      setDisplayValues(next);\n    }, [theme, decoration, tokens]);\n\n    const clearConsumers = React.useCallback(() => {\n      for (const el of consumersRef.current) el.removeAttribute(\"data-token-consumer\");\n      consumersRef.current = [];\n    }, []);\n\n    React.useEffect(() => {\n      const root = document.documentElement;\n      if (!active) {\n        delete root.dataset.tokenSpotlight;\n        clearConsumers();\n        onSpotlight?.(null);\n        return;\n      }\n      const bareToken = active.replace(/^--/, \"\");\n      root.dataset.tokenSpotlight = bareToken;\n      onSpotlight?.(active);\n      const matchValue = resolveTokenMatchValue(active);\n      let cancelMarks = () => {};\n      const cancelScan = scanForConsumers(document.body, matchValue, scanLimit, (elements) => {\n        clearConsumers();\n        cancelMarks = writeMarksInSlices(elements, bareToken, consumersRef.current);\n      });\n      return () => {\n        cancelScan();\n        cancelMarks();\n        clearConsumers();\n        delete root.dataset.tokenSpotlight;\n      };\n      // `theme` re-runs the scan on a theme switch (Acceptance: \"re-scans consumers\"); `onSpotlight`\n      // and `clearConsumers` are stable identities the caller/`useCallback` control.\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- see comment above\n    }, [active, theme, scanLimit]);\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={labels.row}\n        data-slot=\"token-spotlight\"\n        className={cn(\"flex flex-wrap items-center gap-2\", className)}\n        {...props}\n      >\n        {tokens.map(({ token, label }) => (\n          <button\n            key={token}\n            type=\"button\"\n            data-slot=\"token-spotlight-chip\"\n            data-active={active === token ? \"\" : undefined}\n            className={cn(\n              \"focus-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-meta font-medium\",\n              \"bg-card text-foreground transition-colors\",\n              active === token ? \"border-ring\" : \"border-border-strong\",\n            )}\n            onMouseEnter={() => setActive(token)}\n            onMouseLeave={() => setActive((current) => (current === token ? null : current))}\n            onFocus={() => setActive(token)}\n            onBlur={() => setActive((current) => (current === token ? null : current))}\n          >\n            <span aria-hidden=\"true\" className=\"font-mono text-code\">\n              {token}\n            </span>\n            <span className=\"text-muted-foreground\">{displayValues[token] || \"—\"}</span>\n            <span className=\"sr-only\">{` — ${label}. ${labels.hint}`}</span>\n          </button>\n        ))}\n      </div>\n    );\n  },\n);\nTokenSpotlight.displayName = \"TokenSpotlight\";\n"],"mappings":"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","names":["handle","TokenSpotlight"]}

package/dist/chunk-EDE73Q6Z.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-EDE73Q6Z.js.map

package/dist/chunk-EDE73Q6Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-EJ3XWNY3.js

@@ -0,0 +1,52 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/resizable/resizable.tsx
+import { forwardRef } from "react";
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { jsx } from "react/jsx-runtime";
+var ResizablePanelGroup = forwardRef(function ResizablePanelGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.PanelGroup,
+    {
+      ref,
+      className: cn("flex size-full data-[panel-group-direction=vertical]:flex-col", className),
+      ...props
+    }
+  );
+});
+var ResizablePanel = ResizablePrimitive.Panel;
+var DEFAULT_HIT_AREA_MARGINS = {
+  coarse: 15,
+  fine: 8
+};
+function ResizableHandle({
+  withHandle,
+  className,
+  hitAreaMargins,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.PanelResizeHandle,
+    {
+      hitAreaMargins: hitAreaMargins ?? DEFAULT_HIT_AREA_MARGINS,
+      className: cn(
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-ring",
+        "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { className: "size-2.5" }) })
+    }
+  );
+}
+
+export {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle
+};
+//# sourceMappingURL=chunk-EJ3XWNY3.js.map

package/dist/chunk-EJ3XWNY3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/resizable/resizable.tsx"],"sourcesContent":["import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from \"react\";\nimport { GripVertical } from \"lucide-react\";\nimport * as ResizablePrimitive from \"react-resizable-panels\";\nimport { cn } from \"../../lib/cn\";\n\nexport const ResizablePanelGroup: ForwardRefExoticComponent<\n  React.ComponentProps<typeof ResizablePrimitive.PanelGroup> &\n    RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>\n> = forwardRef<\n  ResizablePrimitive.ImperativePanelGroupHandle,\n  React.ComponentProps<typeof ResizablePrimitive.PanelGroup>\n>(function ResizablePanelGroup({ className, ...props }, ref) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      ref={ref}\n      className={cn(\"flex size-full data-[panel-group-direction=vertical]:flex-col\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const ResizablePanel = ResizablePrimitive.Panel;\n\n/**\n * The visible line stays 1px (`w-px`); the DRAG hit area is expanded via the\n * primitive's own `hitAreaMargins` (pointer-distance based, not a CSS trick),\n * so pointer/touch users get a ≥16px target without widening what's drawn.\n * Callers can still override `hitAreaMargins` explicitly.\n */\nconst DEFAULT_HIT_AREA_MARGINS: ResizablePrimitive.PointerHitAreaMargins = {\n  coarse: 15,\n  fine: 8,\n};\n\n/**\n * NOT wrapped in `forwardRef`: `react-resizable-panels`' `PanelResizeHandle`\n * is a plain function component that hardcodes its own internal element ref\n * and does not accept `ref` as a prop at all (neither in its types nor at\n * runtime — verified: a `ref` passed to it resolves to `null`). There is no\n * DOM node here for a wrapper ref to attach to without changing what render\n * onto the actual drag surface, so adding `forwardRef` would be a dead prop.\n */\nexport function ResizableHandle({\n  withHandle,\n  className,\n  hitAreaMargins,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { withHandle?: boolean }) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      hitAreaMargins={hitAreaMargins ?? DEFAULT_HIT_AREA_MARGINS}\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-ring\",\n        \"data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n          <GripVertical className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAS,kBAAsE;AAC/E,SAAS,oBAAoB;AAC7B,YAAY,wBAAwB;AAWhC;AARG,IAAM,sBAGT,WAGF,SAASA,qBAAoB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC3D,SACE;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iEAAiE,SAAS;AAAA,MACvF,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,iBAAoC;AAQjD,IAAM,2BAAqE;AAAA,EACzE,QAAQ;AAAA,EACR,MAAM;AACR;AAUO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiG;AAC/F,SACE;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC,gBAAgB,kBAAkB;AAAA,MAClC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,wBACC,oBAAC,SAAI,WAAU,6EACb,8BAAC,gBAAa,WAAU,YAAW,GACrC;AAAA;AAAA,EAEJ;AAEJ;","names":["ResizablePanelGroup"]}

package/dist/chunk-EJQYE4MY.js

@@ -0,0 +1,100 @@
+"use client";
+import {
+  DEFAULT_MESSAGES
+} from "./chunk-6TJVJPNU.js";
+
+// src/components/locale-provider/locale-provider.tsx
+import { createContext, use, useMemo } from "react";
+import { DirectionProvider } from "@radix-ui/react-direction";
+import { jsx } from "react/jsx-runtime";
+var LocaleContext = createContext(null);
+function interpolate(template, vars) {
+  if (!vars) return template;
+  return template.replace(
+    /\{(\w+)\}/g,
+    (_, key) => key in vars ? String(vars[key]) : `{${key}}`
+  );
+}
+function resolveMessage(key, template, vars, pluralRules) {
+  if (typeof template === "string") return interpolate(template, vars);
+  const count = typeof vars?.count === "number" ? vars.count : void 0;
+  const category = count !== void 0 ? pluralRules.select(count) : "other";
+  const form = template[category] ?? template.other ?? key;
+  return interpolate(form, vars);
+}
+function makeDefaultValue() {
+  const locale = "en-US";
+  const numberCache = /* @__PURE__ */ new Map();
+  const dateCache = /* @__PURE__ */ new Map();
+  const pluralRules = new Intl.PluralRules(locale);
+  return {
+    locale,
+    dir: "ltr",
+    t(key, vars) {
+      const template = DEFAULT_MESSAGES[key] ?? key;
+      return resolveMessage(key, template, vars, pluralRules);
+    },
+    formatNumber(n, opts) {
+      const k = JSON.stringify(opts ?? null);
+      if (!numberCache.has(k)) numberCache.set(k, new Intl.NumberFormat(locale, opts));
+      return numberCache.get(k).format(n);
+    },
+    formatDate(d, opts) {
+      const k = JSON.stringify(opts ?? null);
+      if (!dateCache.has(k)) dateCache.set(k, new Intl.DateTimeFormat(locale, opts));
+      return dateCache.get(k).format(d);
+    }
+  };
+}
+var DEFAULT_LOCALE_VALUE = makeDefaultValue();
+function LocaleProvider({
+  locale = "en-US",
+  dir = "ltr",
+  messages,
+  translate,
+  children
+}) {
+  const merged = useMemo(
+    () => messages ? { ...DEFAULT_MESSAGES, ...messages } : DEFAULT_MESSAGES,
+    // We intentionally deep-compare via JSON only when messages reference changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [messages]
+  );
+  const numberCache = useMemo(() => /* @__PURE__ */ new Map(), [locale]);
+  const dateCache = useMemo(() => /* @__PURE__ */ new Map(), [locale]);
+  const pluralRules = useMemo(() => new Intl.PluralRules(locale), [locale]);
+  const value = useMemo(
+    () => ({
+      locale,
+      dir,
+      t(key, vars) {
+        const resolved = translate?.(key, vars);
+        if (resolved != null) return resolved;
+        const template = merged[key] ?? key;
+        return resolveMessage(key, template, vars, pluralRules);
+      },
+      formatNumber(n, opts) {
+        const k = JSON.stringify(opts ?? null);
+        if (!numberCache.has(k)) numberCache.set(k, new Intl.NumberFormat(locale, opts));
+        return numberCache.get(k).format(n);
+      },
+      formatDate(d, opts) {
+        const k = JSON.stringify(opts ?? null);
+        if (!dateCache.has(k)) dateCache.set(k, new Intl.DateTimeFormat(locale, opts));
+        return dateCache.get(k).format(d);
+      }
+    }),
+    [locale, dir, merged, numberCache, dateCache, pluralRules, translate]
+  );
+  return /* @__PURE__ */ jsx(LocaleContext.Provider, { value, children: /* @__PURE__ */ jsx(DirectionProvider, { dir, children: /* @__PURE__ */ jsx("div", { dir, children }) }) });
+}
+function useLocale() {
+  const ctx = use(LocaleContext);
+  return ctx ?? DEFAULT_LOCALE_VALUE;
+}
+
+export {
+  LocaleProvider,
+  useLocale
+};
+//# sourceMappingURL=chunk-EJQYE4MY.js.map

package/dist/chunk-EJQYE4MY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/locale-provider/locale-provider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, use, useMemo, type ReactNode } from \"react\";\nimport { DirectionProvider } from \"@radix-ui/react-direction\";\nimport { DEFAULT_MESSAGES, type MessageValue, type PluralCategory } from \"./messages\";\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\n/**\n * A flat map of string keys to their translated values — a plain string, or a\n * `PluralMessage` (one string per ICU cardinal-plural category, e.g.\n * `{ one: \"{count} item\", other: \"{count} items\" }`) for microcopy whose\n * wording changes with a count. See `PluralMessage` in `./messages`.\n */\nexport type Messages = Record<string, MessageValue>;\n\nexport interface LocaleContextValue {\n  /** BCP-47 locale tag, e.g. \"en-US\", \"ar-EG\", \"de-DE\". */\n  locale: string;\n  /** Layout direction for the locale region. */\n  dir: \"ltr\" | \"rtl\";\n  /**\n   * Translate a key.\n   * Falls back to: an external `translate` resolver (if the provider was\n   * given one) → consumer `messages` → English default → the key itself.\n   * Supports simple `{name}`-style variable interpolation, and ICU\n   * cardinal-plural forms (`Intl.PluralRules`) when the resolved message is a\n   * `PluralMessage` map and `vars.count` is a number. Note: `count` must be a\n   * number, not a numeric string (e.g., `count: 3`, not `count: \"3\"`) to select\n   * the correct plural category.\n   */\n  t: (key: string, vars?: Record<string, string | number>) => string;\n  /** Format a number using the active locale. Memoized per locale+opts hash. */\n  formatNumber: (n: number, opts?: Intl.NumberFormatOptions) => string;\n  /** Format a date using the active locale. Memoized per locale+opts hash. */\n  formatDate: (d: Date | number, opts?: Intl.DateTimeFormatOptions) => string;\n}\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst LocaleContext = createContext<LocaleContextValue | null>(null);\n\n// ---------------------------------------------------------------------------\n// Default (no-provider) value — en-US / ltr\n// ---------------------------------------------------------------------------\n\nfunction interpolate(template: string, vars?: Record<string, string | number>): string {\n  if (!vars) return template;\n  return template.replace(/\\{(\\w+)\\}/g, (_, key: string) =>\n    key in vars ? String(vars[key]) : `{${key}}`,\n  );\n}\n\n/**\n * Resolve a `MessageValue` (a plain string or a `PluralMessage`) to its final,\n * interpolated string.\n *\n * A `PluralMessage` selects its category via `Intl.PluralRules(locale).select(count)`\n * when `vars.count` is a number; with no `count`, or when the selected\n * category has no entry, it falls back to `\"other\"` (the one category every\n * locale defines), then to the raw `key` if even `\"other\"` is missing.\n */\nfunction resolveMessage(\n  key: string,\n  template: MessageValue,\n  vars: Record<string, string | number> | undefined,\n  pluralRules: Intl.PluralRules,\n): string {\n  if (typeof template === \"string\") return interpolate(template, vars);\n  const count = typeof vars?.count === \"number\" ? vars.count : undefined;\n  const category: PluralCategory = count !== undefined ? pluralRules.select(count) : \"other\";\n  const form = template[category] ?? template.other ?? key;\n  return interpolate(form, vars);\n}\n\nfunction makeDefaultValue(): LocaleContextValue {\n  const locale = \"en-US\";\n  // Simple cache: one Intl object per serialized opts string\n  const numberCache = new Map<string, Intl.NumberFormat>();\n  const dateCache = new Map<string, Intl.DateTimeFormat>();\n  const pluralRules = new Intl.PluralRules(locale);\n\n  return {\n    locale,\n    dir: \"ltr\",\n    t(key, vars) {\n      const template = DEFAULT_MESSAGES[key] ?? key;\n      return resolveMessage(key, template, vars, pluralRules);\n    },\n    formatNumber(n, opts) {\n      const k = JSON.stringify(opts ?? null);\n      if (!numberCache.has(k)) numberCache.set(k, new Intl.NumberFormat(locale, opts));\n      return numberCache.get(k)!.format(n);\n    },\n    formatDate(d, opts) {\n      const k = JSON.stringify(opts ?? null);\n      if (!dateCache.has(k)) dateCache.set(k, new Intl.DateTimeFormat(locale, opts));\n      return dateCache.get(k)!.format(d);\n    },\n  };\n}\n\n// Singleton default — stable across renders when no provider is mounted\nconst DEFAULT_LOCALE_VALUE = makeDefaultValue();\n\n// ---------------------------------------------------------------------------\n// Provider props\n// ---------------------------------------------------------------------------\n\nexport interface LocaleProviderProps {\n  /**\n   * BCP-47 locale tag. Defaults to \"en-US\".\n   * Used by `t`, `formatNumber`, and `formatDate`.\n   */\n  locale?: string;\n  /**\n   * Layout direction for the subtree.\n   * Defaults to \"ltr\". Set \"rtl\" for Arabic, Hebrew, Farsi, etc.\n   */\n  dir?: \"ltr\" | \"rtl\";\n  /**\n   * Additional/overriding message strings merged on top of the shipped English\n   * defaults. Only the keys you provide are overridden; the rest fall through\n   * to the English bundle.\n   */\n  messages?: Messages;\n  /**\n   * Optional external resolver — hand brand-ui's microcopy off to an app's own\n   * i18n runtime (next-intl, react-intl, i18next, …) instead of maintaining a\n   * second, flattened message catalogue. Called with the raw key and vars\n   * (not pre-interpolated), so a real ICU formatter gets real values and can\n   * do its own pluralization/number/date formatting.\n   *\n   * Return a string to use it as-is (brand-ui does NOT re-run its own\n   * `{name}` interpolation on it — the app's runtime already formatted it).\n   * Return `undefined`/`null` to decline a key; brand-ui then falls back to\n   * `messages` → `DEFAULT_MESSAGES` → the raw key, in that order — so a\n   * resolver only needs to cover the keys it actually wants to override.\n   * See `docs/I18N.md`.\n   */\n  translate?: (key: string, vars?: Record<string, string | number>) => string | undefined | null;\n  children: ReactNode;\n}\n\n// ---------------------------------------------------------------------------\n// LocaleProvider\n// ---------------------------------------------------------------------------\n\n/**\n * `LocaleProvider` supplies locale, layout direction, component microcopy, and\n * Intl formatting helpers to the component subtree.\n *\n * - Wrap your app (or a regional subtree) with it to localise brand-ui components.\n * - Components call `useLocale()` unconditionally; without a provider they\n *   degrade gracefully to \"en-US\" / \"ltr\" / English defaults.\n * - Portalled Radix content (Dialog, Sheet, Popover, DropdownMenu) still honors\n *   `dir` because the subtree is wrapped in Radix's `DirectionProvider`, which\n *   every Radix primitive reads via context regardless of DOM position (ADR-0014).\n *   The `<div dir={dir}>` continues to carry direction for non-Radix content.\n */\nexport function LocaleProvider({\n  locale = \"en-US\",\n  dir = \"ltr\",\n  messages,\n  translate,\n  children,\n}: LocaleProviderProps) {\n  // Merge consumer messages over the shipped English defaults.\n  const merged: Messages = useMemo(\n    () => (messages ? { ...DEFAULT_MESSAGES, ...messages } : DEFAULT_MESSAGES),\n    // We intentionally deep-compare via JSON only when messages reference changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [messages],\n  );\n\n  // Memoized Intl formatter caches — keyed by serialised opts\n  const numberCache = useMemo(() => new Map<string, Intl.NumberFormat>(), [locale]);\n  const dateCache = useMemo(() => new Map<string, Intl.DateTimeFormat>(), [locale]);\n  const pluralRules = useMemo(() => new Intl.PluralRules(locale), [locale]);\n\n  const value = useMemo<LocaleContextValue>(\n    () => ({\n      locale,\n      dir,\n      t(key, vars) {\n        // An external runtime (next-intl, react-intl, i18next, …) gets first\n        // say, and its result is used AS-IS — it already interpolated and\n        // pluralized. `undefined`/`null` means \"I decline this key\".\n        const resolved = translate?.(key, vars);\n        if (resolved != null) return resolved;\n        const template = merged[key] ?? key;\n        return resolveMessage(key, template, vars, pluralRules);\n      },\n      formatNumber(n, opts) {\n        const k = JSON.stringify(opts ?? null);\n        if (!numberCache.has(k)) numberCache.set(k, new Intl.NumberFormat(locale, opts));\n        return numberCache.get(k)!.format(n);\n      },\n      formatDate(d, opts) {\n        const k = JSON.stringify(opts ?? null);\n        if (!dateCache.has(k)) dateCache.set(k, new Intl.DateTimeFormat(locale, opts));\n        return dateCache.get(k)!.format(d);\n      },\n    }),\n    [locale, dir, merged, numberCache, dateCache, pluralRules, translate],\n  );\n\n  return (\n    <LocaleContext.Provider value={value}>\n      {/*\n       * `DirectionProvider` makes `dir` reach portalled Radix overlays (Dialog,\n       * Sheet, Popover, DropdownMenu, Select, Tooltip, …) which escape the DOM\n       * `dir` ancestor (ADR-0014). The `<div dir={dir}>` still carries direction\n       * for non-Radix content.\n       */}\n      <DirectionProvider dir={dir}>\n        <div dir={dir}>{children}</div>\n      </DirectionProvider>\n    </LocaleContext.Provider>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// useLocale\n// ---------------------------------------------------------------------------\n\n/**\n * Read the active locale, direction, `t`, `formatNumber`, and `formatDate`.\n *\n * Provider-optional: without a `<LocaleProvider>` this returns the en-US\n * defaults so components can call it unconditionally and remain usable in\n * unwrapped contexts.\n */\nexport function useLocale(): LocaleContextValue {\n  // React 19 `use()` — can be called conditionally and composes with Suspense.\n  const ctx = use(LocaleContext);\n  return ctx ?? DEFAULT_LOCALE_VALUE;\n}\n"],"mappings":"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","names":[]}