@fasl-work/caos-app-shell 0.7.2 → 0.8.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, formatNumber } from './chunk-LOSSTLPP.js';
-export { NOT_AVAILABLE, SHELL_TOKENS, Stage, applyTheme, formatNumber, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-LOSSTLPP.js';
+import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, NOT_AVAILABLE, formatTicks, formatNumber, NBSP } from './chunk-ZLJCB7DD.js';
+export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, formatNumber, formatTicks, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-ZLJCB7DD.js';
 export { LANG_STORAGE_KEY, STANDARD_ROUTES, THEME_BOOT_SCRIPT, THEME_STORAGE_KEY } from './chunk-X6Y5CDUD.js';
 import { createContext, Component, useState, useRef, useId, useEffect, useCallback, useContext, useMemo } from 'react';
 import { useInRouterContext, NavLink, useLocation } from 'react-router';
@@ -20,7 +20,8 @@ var CHROME = {
     attribution: "Developed by Felipe Santib\xE1\xF1ez-Leal",
     complement: "A CAOS research project",
     license: "",
-    version: "v"
+    version: "v",
+    skip: "Skip to the content"
   },
   es: {
     github: "C\xF3digo en GitHub",
@@ -33,7 +34,8 @@ var CHROME = {
     attribution: "Desarrollado por Felipe Santib\xE1\xF1ez-Leal",
     complement: "Un proyecto de investigaci\xF3n CAOS",
     license: "",
-    version: "v"
+    version: "v",
+    skip: "Saltar al contenido"
   }
 };
 var chrome = (lang) => CHROME[lang];
@@ -378,6 +380,7 @@ function Frame({ config, pathname, routed, children }) {
     /* @__PURE__ */ jsx("span", { children: config.product.name })
   ] });
   return /* @__PURE__ */ jsxs("div", { className: config.contain ? "app-shell fixed contain" : fixed ? "app-shell fixed" : "app-shell", children: [
+    /* @__PURE__ */ jsx("a", { className: "skip-link", href: "#main", children: c.skip }),
     /* @__PURE__ */ jsx("header", { className: "site-header", children: /* @__PURE__ */ jsxs("div", { className: "header-inner", children: [
       routed ? /* @__PURE__ */ jsx(NavLink, { to: "/", className: "brand", "aria-label": config.product.name, "data-brand": config.product.name, children: brand }) : /* @__PURE__ */ jsx("a", { href: "/", className: "brand", "aria-label": config.product.name, "data-brand": config.product.name, children: brand }),
       routes.length > 1 && /* @__PURE__ */ jsx(Nav, { routes, name: config.product.name, routed, pathname }),
@@ -392,7 +395,7 @@ function Frame({ config, pathname, routed, children }) {
       ] })
     ] }) }),
     config.architecture && archOpen && /* @__PURE__ */ jsx(ArchitectureModal, { config: config.architecture, onClose: () => setArchOpen(false) }),
-    /* @__PURE__ */ jsx("main", { className: "page", children: /* @__PURE__ */ jsx(PanelBoundary, { panel: "page", children }) }),
+    /* @__PURE__ */ jsx("main", { className: "page", id: "main", tabIndex: -1, children: /* @__PURE__ */ jsx(PanelBoundary, { panel: "page", children }) }),
     /* @__PURE__ */ jsx("footer", { className: "site-footer", children: /* @__PURE__ */ jsx("div", { className: "footer-inner", children: /* @__PURE__ */ jsxs("div", { className: "footer-meta", ref: footRef, children: [
       /* @__PURE__ */ jsx("span", { children: config.product.name }),
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
@@ -723,7 +726,7 @@ function CaseSelector(props) {
     if (!deepLink || linkPending.current || !selectedId || typeof window === "undefined") return;
     const next = withCaseParam(window.location.search, selectedId, param);
     if (next !== window.location.search) {
-      window.history.replaceState(null, "", `${window.location.pathname}${next}${window.location.hash}`);
+      window.history.replaceState(window.history.state, "", `${window.location.pathname}${next}${window.location.hash}`);
     }
   }, [deepLink, param, selectedId, cases]);
   const lanes = source ? sourcesPresent(cases) : [];
@@ -1092,6 +1095,272 @@ function DocSection({ title, id, refs, noRefsReason, children }) {
     }
   );
 }
+function replaceQueryParam(param, value) {
+  if (typeof window === "undefined") return;
+  const next = withCaseParam(window.location.search, value, param);
+  window.history.replaceState(window.history.state, "", `${window.location.pathname}${next}${window.location.hash}`);
+}
+function useUrlView(ids, param, value, onChange) {
+  const [own, setOwn] = useState(
+    () => param && typeof window !== "undefined" ? readCaseParam(window.location.search, param) : null
+  );
+  const open = value ?? (own && ids.includes(own) ? own : ids[0]);
+  const select = (id) => {
+    if (value === void 0) {
+      setOwn(id);
+      if (param) replaceQueryParam(param, id);
+    }
+    onChange?.(id);
+  };
+  return [open, select];
+}
+function viewParamOf(option) {
+  return option === false ? null : typeof option === "string" ? option : "view";
+}
+function SurfacePage({ title, lede, actions, tabs, value, onChange, deepLinkView = true, ariaLabel, instrument, children }) {
+  const lang = useShellLang();
+  const [open, select] = useUrlView((tabs ?? []).map((t) => t.id), tabs ? viewParamOf(deepLinkView) : null, value, onChange);
+  const head = title !== void 0 || lede !== void 0 || actions !== void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "page-body wide caos-surface", "data-surface": "", children: [
+    head && /* @__PURE__ */ jsxs("div", { className: "caos-surface-head", children: [
+      /* @__PURE__ */ jsxs("div", { className: "caos-surface-heading", children: [
+        title !== void 0 && /* @__PURE__ */ jsx("h1", { className: "caos-surface-title", children: pick(title, lang) }),
+        lede !== void 0 && /* @__PURE__ */ jsx("p", { className: "caos-surface-lede", children: lede })
+      ] }),
+      actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "caos-surface-actions", children: actions })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "caos-surface-body", "data-instrument": instrument ? "" : void 0, children: tabs ? /* @__PURE__ */ jsx(Tabs, { tabs, value: open, onChange: select, ariaLabel: pick(ariaLabel ?? title ?? { en: "Views", es: "Vistas" }, lang) }) : children })
+  ] });
+}
+
+// src/lib/breakpoints.ts
+var BREAKPOINTS = {
+  /** A phone: the brand keeps only its mark; the header drops its separators. */
+  phone: 480,
+  /** The compact header, single-column grids, the vertical sub-tab list as a row. */
+  compact: 760,
+  /** The workbench stacks its rail over the instrument and the contained document scrolls. */
+  stack: 900,
+  /** The gate's large screen: the viewport rules of ADR-0071 are measured from here up. */
+  large: 1280
+};
+
+// src/chart/text.ts
+var context;
+function fontFamily() {
+  if (typeof document === "undefined") return "sans-serif";
+  return getComputedStyle(document.documentElement).getPropertyValue("--font-sans").trim() || "sans-serif";
+}
+function textWidth(text, px, weight = 400) {
+  if (context === void 0) {
+    try {
+      context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+    } catch {
+      context = null;
+    }
+  }
+  if (!context) return text.length * px * 0.62;
+  context.font = `${weight} ${px}px ${fontFamily()}`;
+  return context.measureText(text).width;
+}
+function widestLabel(labels, px, weight = 400) {
+  return Math.max(0, ...labels.map((label) => textWidth(label, px, weight)));
+}
+function shorten(line, width, px) {
+  if (textWidth(line, px) <= width) return line;
+  let cut = line;
+  while (cut.length > 1 && textWidth(`${cut}\u2026`, px) > width) cut = cut.slice(0, -1);
+  return `${cut.trimEnd()}\u2026`;
+}
+function fitLabel(label, width, px, maxLines = 2) {
+  if (textWidth(label, px) <= width) return { lines: [label], shortened: false };
+  const words = label.split(" ");
+  if (maxLines === 2 && words.length > 1) {
+    let best = null;
+    let bestWidth = Infinity;
+    for (let k = 1; k < words.length; k += 1) {
+      const first = words.slice(0, k).join(" ");
+      const second = words.slice(k).join(" ");
+      const widest = Math.max(textWidth(first, px), textWidth(second, px));
+      if (widest < bestWidth) {
+        bestWidth = widest;
+        best = [first, second];
+      }
+    }
+    if (best && bestWidth <= width) return { lines: best, shortened: false };
+    if (best) return { lines: [shorten(best[0], width, px), shorten(best[1], width, px)], shortened: true };
+  }
+  return { lines: [shorten(label, width, px)], shortened: true };
+}
+function niceStep(x) {
+  if (!(x > 0) || !Number.isFinite(x)) return 1;
+  const magnitude = 10 ** Math.floor(Math.log10(x));
+  return ([1, 2, 2.5, 5, 10].find((m) => m * magnitude >= x * (1 - 1e-12)) ?? 10) * magnitude;
+}
+function niceTicks(lo, hi, room, labelSize, most = 6) {
+  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [0];
+  if (hi < lo) [lo, hi] = [hi, lo];
+  if (hi === lo) hi = lo === 0 ? 1 : lo + Math.abs(lo);
+  const count = Math.max(2, Math.min(most, Math.floor(room / (labelSize + 16)) + 1));
+  const step = niceStep((hi - lo) / (count - 1));
+  const first = Math.floor(lo / step + 1e-9) * step;
+  const ticks = [];
+  for (let k = 0; first + k * step <= hi + step * 1e-9 || ticks.length < 2; k += 1) {
+    ticks.push(Number((first + k * step).toPrecision(12)));
+    if (ticks.length > 50) break;
+  }
+  if (ticks[ticks.length - 1] < hi - step * 1e-9) ticks.push(Number((ticks[ticks.length - 1] + step).toPrecision(12)));
+  return ticks;
+}
+var PX = 11;
+var LINE = 13;
+var TONE = {
+  good: "var(--color-good)",
+  warn: "var(--color-warn)",
+  bad: "var(--color-bad)",
+  accent: "var(--color-accent)",
+  neutral: "var(--color-fg-faint)"
+};
+function Lines({ x, y, lines, anchor, fill }) {
+  return /* @__PURE__ */ jsx("text", { x, y, textAnchor: anchor, fontSize: PX, fill, style: { fontFamily: "var(--font-sans)" }, children: lines.map((line, i) => /* @__PURE__ */ jsx("tspan", { x, dy: i === 0 ? 0 : LINE, children: line }, i)) });
+}
+function BarChart({ title, data, axis, orientation = "horizontal", values = true, height, onSelect }) {
+  const lang = useShellLang();
+  const [ref, box] = useStageSize();
+  const fill = height === "fill";
+  const name = pick(title, lang);
+  const axisTitle = axis.unit ? `${pick(axis.label, lang)} (${pick(axis.unit, lang)})` : pick(axis.label, lang);
+  const fmt = axis.format ?? { digits: 3 };
+  const finite = data.map((d) => d.value).filter((v) => v !== null && v !== void 0 && Number.isFinite(v));
+  const lo = Math.min(0, axis.range ? axis.range[0] : Math.min(0, ...finite));
+  const hi = Math.max(0, axis.range ? axis.range[1] : Math.max(0, ...finite));
+  const anyHighlight = data.some((d) => d.highlight);
+  const colour = (d) => d.tone ? TONE[d.tone] : !anyHighlight || d.highlight ? "var(--color-accent)" : "var(--color-fg-faint)";
+  const shown = (d) => d.value === null || d.value === void 0 || !Number.isFinite(d.value) ? NOT_AVAILABLE[lang] : formatNumber(d.value, lang, fmt);
+  const width = box.width;
+  const select = (id) => onSelect?.(id);
+  const keyed = (id) => (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      select(id);
+    }
+  };
+  const interactive = (d) => onSelect ? { role: "button", tabIndex: 0, onClick: () => select(d.id), onKeyDown: keyed(d.id), style: { cursor: "pointer" } } : {};
+  let drawing = null;
+  let drawnHeight = 0;
+  if (width > 0 && data.length > 0) {
+    const valueLabels = data.map(shown);
+    const valueCol = values ? widestLabel(valueLabels, PX) + 8 : 0;
+    if (orientation === "horizontal") {
+      const labelCol = Math.min(widestLabel(data.map((d) => pick(d.label, lang)), PX), Math.max(80, 0.38 * width));
+      const fitted = data.map((d) => fitLabel(pick(d.label, lang), labelCol, PX, 2));
+      const need = Math.max(22, Math.max(...fitted.map((f) => f.lines.length)) * LINE + 8);
+      const axisH = 6 + LINE + 4 + LINE + 4;
+      const x0 = labelCol + 10;
+      const x1 = Math.max(x0 + 40, width - valueCol - 6);
+      const tickProbe = widestLabel(formatTicks([lo, hi], lang, fmt), PX);
+      const ticks = niceTicks(lo, hi, x1 - x0, tickProbe);
+      const t0 = ticks[0];
+      const t1 = ticks[ticks.length - 1];
+      const tickLabels = formatTicks(ticks, lang, fmt);
+      const sx = (v) => x0 + (v - t0) / (t1 - t0 || 1) * (x1 - x0);
+      const rowH = fill && box.height > 0 ? Math.max(need, (box.height - axisH - 4) / data.length) : need;
+      const top = 4;
+      const plotBottom = top + data.length * rowH;
+      drawnHeight = fill && box.height > 0 ? Math.max(box.height, plotBottom + axisH) : plotBottom + axisH;
+      const barH = Math.min(rowH * 0.5, 40);
+      drawing = /* @__PURE__ */ jsxs("svg", { width, height: drawnHeight, role: "img", "aria-label": name, "data-chart": "", "data-chart-kind": "bars", children: [
+        /* @__PURE__ */ jsx("title", { children: name }),
+        ticks.map((t, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("line", { x1: sx(t), x2: sx(t), y1: top, y2: plotBottom, stroke: "var(--color-border)", strokeWidth: t === 0 ? 1.4 : 1 }),
+          /* @__PURE__ */ jsx("text", { x: sx(t), y: plotBottom + 6 + LINE - 2, textAnchor: i === 0 && sx(t) - textWidth(tickLabels[i], PX) / 2 < 0 ? "start" : i === ticks.length - 1 && sx(t) + textWidth(tickLabels[i], PX) / 2 > width ? "end" : "middle", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: tickLabels[i] })
+        ] }, `t${i}`)),
+        /* @__PURE__ */ jsx("text", { x: x0 + (x1 - x0) / 2, y: plotBottom + 6 + LINE + 4 + LINE - 2, textAnchor: "middle", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: axisTitle }),
+        data.map((d, i) => {
+          const cy = top + i * rowH + rowH / 2;
+          const f = fitted[i];
+          const v = d.value;
+          const ok = v !== null && v !== void 0 && Number.isFinite(v);
+          const xa = sx(0);
+          const xb = ok ? sx(v) : xa;
+          const labelText = valueLabels[i];
+          const negative = ok && v < 0;
+          return /* @__PURE__ */ jsxs("g", { "data-bar": d.id, ...interactive(d), children: [
+            /* @__PURE__ */ jsx("title", { children: [pick(d.label, lang), labelText, pick(d.hint, lang)].filter(Boolean).join(": ") }),
+            /* @__PURE__ */ jsx(Lines, { x: x0 - 8, y: cy - (f.lines.length - 1) * LINE / 2 + 4, lines: f.lines, anchor: "end", fill: d.highlight ? "var(--color-fg)" : "var(--color-fg-subtle)" }),
+            ok && /* @__PURE__ */ jsx("rect", { x: Math.min(xa, xb), y: cy - barH / 2, width: Math.max(1, Math.abs(xb - xa)), height: barH, rx: 2, fill: colour(d) }),
+            values && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: ok ? negative ? Math.max(x0 + textWidth(labelText, PX) + 2, xb - 4) : xb + 4 : xa + 4,
+                y: cy + 4,
+                textAnchor: negative ? "end" : "start",
+                fontSize: PX,
+                fill: ok ? "var(--color-fg)" : "var(--color-fg-faint)",
+                fontStyle: ok ? void 0 : "italic",
+                style: { fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums" },
+                children: labelText
+              }
+            )
+          ] }, d.id);
+        })
+      ] });
+    } else {
+      const h = fill && box.height > 0 ? box.height : typeof height === "number" ? height : 240;
+      const titleRow = LINE + 6;
+      const valueRow = values ? LINE + 4 : 4;
+      const probe = widestLabel(formatTicks([lo, hi], lang, fmt), PX);
+      const left = probe + 12;
+      const right = 8;
+      const band = (width - left - right) / data.length;
+      const fitted = data.map((d) => fitLabel(pick(d.label, lang), Math.max(24, band - 6), PX, 2));
+      const bottom = Math.max(...fitted.map((f) => f.lines.length)) * LINE + 10;
+      const y0 = titleRow + valueRow;
+      const y1 = Math.max(y0 + 40, h - bottom);
+      const ticks = niceTicks(lo, hi, y1 - y0, LINE);
+      const t0 = ticks[0];
+      const t1 = ticks[ticks.length - 1];
+      const tickLabels = formatTicks(ticks, lang, fmt);
+      const sy = (v) => y1 - (v - t0) / (t1 - t0 || 1) * (y1 - y0);
+      const barW = Math.min(band * 0.62, 56);
+      drawnHeight = h;
+      drawing = /* @__PURE__ */ jsxs("svg", { width, height: h, role: "img", "aria-label": name, "data-chart": "", "data-chart-kind": "bars", children: [
+        /* @__PURE__ */ jsx("title", { children: name }),
+        /* @__PURE__ */ jsx("text", { x: 0, y: LINE - 2, textAnchor: "start", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: axisTitle }),
+        ticks.map((t, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("line", { x1: left, x2: width - right, y1: sy(t), y2: sy(t), stroke: "var(--color-border)", strokeWidth: t === 0 ? 1.4 : 1 }),
+          /* @__PURE__ */ jsx("text", { x: left - 6, y: sy(t) + 4, textAnchor: "end", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: tickLabels[i] })
+        ] }, `t${i}`)),
+        data.map((d, i) => {
+          const cx = left + band * i + band / 2;
+          const v = d.value;
+          const ok = v !== null && v !== void 0 && Number.isFinite(v);
+          const ya = sy(0);
+          const yb = ok ? sy(v) : ya;
+          const f = fitted[i];
+          return /* @__PURE__ */ jsxs("g", { "data-bar": d.id, ...interactive(d), children: [
+            /* @__PURE__ */ jsx("title", { children: [pick(d.label, lang), valueLabels[i], pick(d.hint, lang)].filter(Boolean).join(": ") }),
+            ok && /* @__PURE__ */ jsx("rect", { x: cx - barW / 2, y: Math.min(ya, yb), width: barW, height: Math.max(1, Math.abs(yb - ya)), rx: 2, fill: colour(d) }),
+            values && /* @__PURE__ */ jsx("text", { x: cx, y: Math.min(ya, yb) - 5, textAnchor: "middle", fontSize: PX, fill: ok ? "var(--color-fg)" : "var(--color-fg-faint)", fontStyle: ok ? void 0 : "italic", style: { fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums" }, children: valueLabels[i] }),
+            /* @__PURE__ */ jsx(Lines, { x: cx, y: y1 + LINE + 2, lines: f.lines, anchor: "middle", fill: d.highlight ? "var(--color-fg)" : "var(--color-fg-subtle)" })
+          ] }, d.id);
+        })
+      ] });
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: fill ? "caos-bars fill" : "caos-bars",
+      style: !fill && orientation === "vertical" ? { height: typeof height === "number" ? height : 240 } : void 0,
+      "data-drawn": width > 0 ? "1" : "0",
+      "data-width": width,
+      "data-height": drawnHeight,
+      children: drawing
+    }
+  );
+}
 function isSections(rail) {
   return Array.isArray(rail) && rail.every((s) => typeof s === "object" && s !== null && "id" in s && "content" in s);
 }
@@ -1102,11 +1371,24 @@ function WorkbenchLayout({ rail, railHead, children, railLabel, className }) {
   const baseId = useId();
   const label = pick(railLabel ?? { en: "Controls", es: "Controles" }, lang);
   const current = sections?.find((s) => s.id === active) ?? sections?.[0];
+  const rowRef = useRef(null);
+  useOverflowFade(rowRef, ".chip.on", [current?.id, sections?.length, lang]);
+  function onKeyDown(e, idx) {
+    if (!sections || e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "Home" && e.key !== "End") return;
+    e.preventDefault();
+    const n = sections.length;
+    const next = e.key === "Home" ? 0 : e.key === "End" ? n - 1 : (idx + (e.key === "ArrowRight" ? 1 : n - 1)) % n;
+    const target = sections[next];
+    if (target) {
+      setActive(target.id);
+      document.getElementById(`${baseId}-rs-${target.id}`)?.focus();
+    }
+  }
   return /* @__PURE__ */ jsxs("div", { className: ["page-body", "wide", "caos-wb", className].filter(Boolean).join(" "), "data-workbench": "", children: [
     /* @__PURE__ */ jsxs("aside", { className: "caos-wb-rail", "aria-label": label, "data-rail": "", children: [
       railHead && /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-head", children: railHead }),
       sections ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-sections", role: "tablist", "aria-label": label, children: sections.map((s) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-sections", role: "tablist", "aria-label": label, ref: rowRef, children: sections.map((s, idx) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -1114,8 +1396,10 @@ function WorkbenchLayout({ rail, railHead, children, railLabel, className }) {
             id: `${baseId}-rs-${s.id}`,
             "aria-selected": s.id === current?.id,
             "aria-controls": `${baseId}-rp-${s.id}`,
+            tabIndex: s.id === current?.id ? 0 : -1,
             className: s.id === current?.id ? "chip on" : "chip",
             onClick: () => setActive(s.id),
+            onKeyDown: (e) => onKeyDown(e, idx),
             children: pick(s.label, lang)
           },
           s.id
@@ -1178,6 +1462,8 @@ function VariantBar({ variants, activeId, onSelect, title, lane }) {
   const lang = useShellLang();
   const active = variants.find((v) => v.id === activeId) ?? variants[0];
   const shownLane = active?.lane ?? lane;
+  const rowRef = useRef(null);
+  useOverflowFade(rowRef, ".chip.on", [active?.id, variants.length, lang]);
   return /* @__PURE__ */ jsxs("div", { className: "caos-variant-bar", "data-variant-bar": "", "data-variant-count": variants.length, children: [
     /* @__PURE__ */ jsxs("div", { className: "caos-variant-head", children: [
       /* @__PURE__ */ jsxs("span", { className: "caos-variant-title", children: [
@@ -1188,7 +1474,7 @@ function VariantBar({ variants, activeId, onSelect, title, lane }) {
       ] }),
       shownLane && /* @__PURE__ */ jsx(LaneBadge, { lane: shownLane })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "caos-chip-row", role: "radiogroup", "aria-label": pick(title ?? { en: "Variants", es: "Variantes" }, lang), "data-control": "variant", children: variants.map((v) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "caos-chip-row", role: "radiogroup", "aria-label": pick(title ?? { en: "Variants", es: "Variantes" }, lang), "data-control": "variant", ref: rowRef, children: variants.map((v) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1209,7 +1495,7 @@ function panel(id, lane, provenance, content) {
   return /* @__PURE__ */ jsx("div", { className: "caos-cw-panel", "data-group": id, "data-lane": lane, "data-provenance": provenance, children: content });
 }
 function CaseWorkbench(props) {
-  const { caseId, cases, source, controls, replayOnly, variants, rail, railLabel, groups, compare, context, group, onGroupChange, ariaLabel } = props;
+  const { caseId, cases, source, controls, replayOnly, variants, rail, railLabel, groups, compare, context: context2, group, onGroupChange, deepLinkView = true, ariaLabel } = props;
   const lang = useShellLang();
   const variantId = variants?.activeId;
   const stateKey = useMemo(
@@ -1226,14 +1512,15 @@ function CaseWorkbench(props) {
   }
   tabs.push({
     id: "context",
-    label: pick(context.label ?? { en: "Context", es: "Contexto" }, lang),
-    content: /* @__PURE__ */ jsx("div", { className: "prose caos-cw-context", children: context.content })
+    label: pick(context2.label ?? { en: "Context", es: "Contexto" }, lang),
+    content: /* @__PURE__ */ jsx("div", { className: "prose caos-cw-context", children: context2.content })
   });
   if (tabs.length > MAX_WORKBENCH_GROUPS) {
     throw new Error(
       `CaseWorkbench: ${tabs.length} groups; at most ${MAX_WORKBENCH_GROUPS} peers, then group by question (ADR-0071 rule 5)`
     );
   }
+  const [openGroup, selectGroup] = useUrlView(tabs.map((t) => t.id), viewParamOf(deepLinkView), group, onGroupChange);
   const railHead = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
     cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases }),
     variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
@@ -1253,8 +1540,8 @@ function CaseWorkbench(props) {
         Tabs,
         {
           tabs,
-          value: group,
-          onChange: onGroupChange,
+          value: openGroup,
+          onChange: selectGroup,
           ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang)
         }
       )
@@ -1306,10 +1593,7 @@ function Readout({ items, title, lane, provenance, dataKey }) {
             /* @__PURE__ */ jsx("dt", { children: label }),
             /* @__PURE__ */ jsxs("dd", { children: [
               /* @__PURE__ */ jsx("span", { className: "caos-readout-value", children: shown }),
-              it.unit && it.text === void 0 && /* @__PURE__ */ jsxs("span", { className: "caos-readout-unit", children: [
-                " ",
-                pick(it.unit, lang)
-              ] })
+              it.unit && it.text === void 0 && /* @__PURE__ */ jsx("span", { className: "caos-readout-unit", children: `${NBSP}${pick(it.unit, lang)}` })
             ] })
           ] }, i);
         }) }),
@@ -1346,12 +1630,12 @@ function Gauge({ title, value, min, max, zones, unit, unitless, format }) {
       /* @__PURE__ */ jsx("span", { children: fmt(min) }),
       /* @__PURE__ */ jsxs("span", { className: "caos-gauge-value", children: [
         fmt(value),
-        finite && unit ? ` ${pick(unit, lang)}` : ""
+        finite && unit ? `${NBSP}${pick(unit, lang)}` : ""
       ] }),
       /* @__PURE__ */ jsx("span", { children: fmt(max) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "caos-gauge-legend", children: zones.map((z, i) => /* @__PURE__ */ jsxs("span", { children: [
-      /* @__PURE__ */ jsx("i", { className: `dot tone-${z.tone}`, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("i", { className: `caos-gauge-dot tone-${z.tone}`, "aria-hidden": "true" }),
       pick(z.label, lang)
     ] }, i)) })
   ] });
@@ -1415,7 +1699,7 @@ function Knob({ id, label, value, min, max, step, unit, hint, format, disabled,
       /* @__PURE__ */ jsx("span", { children: pick(label, lang) }),
       /* @__PURE__ */ jsxs("span", { className: "caos-knob-value", children: [
         formatNumber(value, lang, format ?? {}),
-        unit ? ` ${pick(unit, lang)}` : ""
+        unit ? `${NBSP}${pick(unit, lang)}` : ""
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -1436,9 +1720,11 @@ function Knob({ id, label, value, min, max, step, unit, hint, format, disabled,
 }
 function ChipGroup({ id, label, options, value, onChange }) {
   const lang = useShellLang();
+  const rowRef = useRef(null);
+  useOverflowFade(rowRef, ".chip.on", [value, options.length, lang]);
   return /* @__PURE__ */ jsxs("div", { className: "caos-chipgroup", "data-control": id, children: [
     /* @__PURE__ */ jsx("span", { className: "caos-chipgroup-label", children: pick(label, lang) }),
-    /* @__PURE__ */ jsx("div", { className: "caos-chip-row", role: "radiogroup", "aria-label": pick(label, lang), children: options.map((o) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "caos-chip-row", role: "radiogroup", "aria-label": pick(label, lang), ref: rowRef, children: options.map((o) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1455,4 +1741,4 @@ function ChipGroup({ id, label, options, value, onChange }) {
   ] });
 }
 
-export { AppShell, ArchitectureModal, Callout, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DocPage, DocSection, Equation, Figure, FocusShell, Gauge, InlineMath, Knob, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Readout, ReferenceList, Refs, SubTabs, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, groupByCategory, isStale, makeStateKey, readCaseParam, sourcesPresent, usePausedViz, useWorkbenchState, validateArchitectureConfig, withCaseParam };
+export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DocPage, DocSection, Equation, Figure, FocusShell, Gauge, InlineMath, Knob, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Readout, ReferenceList, Refs, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, readCaseParam, replaceQueryParam, sourcesPresent, textWidth, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, viewParamOf, widestLabel, withCaseParam };

package/dist/{tokens-CSV0MOgR.d.ts → tokens-DkyEXX5g.d.ts}

@@ -9,15 +9,30 @@ interface FormatOptions {
     decimals?: number;
     /** Render a fraction as a percentage (0.123 -> 12.3 %). */
     percent?: boolean;
+    /** `scientific` writes every non-zero value in scientific notation with `digits` significant digits; the default
+     * chooses by magnitude. An axis uses it so all its ticks share one notation (`formatTicks`). */
+    notation?: 'auto' | 'scientific';
 }
+/** The no-break space (U+00A0) that joins a value to its unit or sign. */
+declare const NBSP = "\u00A0";
+/** Below this magnitude a value is written in scientific notation. In fixed notation a p-value of 1e-200 is two
+ * hundred zeros: one table cell 12,790 px wide (known shell defect 15, CAOS_Contraste, 2026-10-05). */
+declare const SCIENTIFIC_BELOW = 0.0001;
 /** "Not available" in the interface language: what an absent or non-finite value renders as. */
 declare const NOT_AVAILABLE: Record<Lang, string>;
 /**
  * A number in the interface language: a decimal point in English and a decimal comma in Spanish
- * (`conventions/languages.md`), significant digits by default, scientific notation below 1e-4. `null`, `undefined` and non-finite values render as
- * "not available", never as `NaN` (failure classes 5 and 23 of the 2026-10-04 history).
+ * (`conventions/languages.md`), significant digits by default, scientific notation below 1e-4. `null`, `undefined`
+ * and non-finite values render as "not available", never as `NaN` (failure classes 5 and 23 of the 2026-10-04
+ * history). A percent is joined to its sign by a no-break space.
  */
 declare function formatNumber(value: number | null | undefined, lang: Lang, opts?: FormatOptions): string;
+/**
+ * The labels of one axis's ticks, in ONE notation: when any non-zero tick is below 1e-4 (and the axis has no fixed
+ * decimals), every non-zero tick is written in scientific notation; deciding tick by tick wrote 0.0001 beside 7.5E-5
+ * on one axis (known shell defect 19, CAOS_Contraste, 2026-10-05). `null` ticks are blank.
+ */
+declare function formatTicks(values: readonly (number | null | undefined)[], lang: Lang, opts?: FormatOptions): string[];
 /** `formatNumber` bound to the current shell language. */
 declare function useFormat(): (value: number | null | undefined, opts?: FormatOptions) => string;
 
@@ -27,8 +42,10 @@ declare function useFormat(): (value: number | null | undefined, opts?: FormatOp
  * defined renders as nothing, silently (failure class 25 of the 2026-10-04 history). A unit test keeps this list
  * equal to the stylesheet.
  */
-declare const SHELL_TOKENS: readonly ["--color-bg", "--color-surface", "--color-surface-2", "--color-border", "--color-fg", "--color-fg-subtle", "--color-fg-faint", "--color-accent", "--color-accent-fg", "--color-accent-soft", "--color-accent-2", "--color-magenta", "--color-good", "--color-warn", "--color-bad", "--color-shadow", "--font-sans", "--font-mono", "--maxw", "--maxw-wide"];
+declare const SHELL_TOKENS: readonly ["--color-bg", "--color-surface", "--color-surface-2", "--color-border", "--color-fg", "--color-fg-subtle", "--color-fg-faint", "--color-accent", "--color-accent-fg", "--color-accent-soft", "--color-accent-2", "--color-magenta", "--color-good", "--color-warn", "--color-bad", "--color-shadow", "--font-sans", "--font-mono", "--text-xs", "--text-sm", "--text-md", "--text-base", "--text-lg", "--text-xl", "--text-2xl", "--space-1", "--space-2", "--space-3", "--space-4", "--space-5", "--space-6", "--radius-sm", "--radius-md", "--radius-lg", "--radius-pill", "--maxw", "--maxw-wide", "--measure", "--measure-text", "--header-h", "--rail-w", "--fade", "--icon-sm", "--icon-md", "--icon-lg", "--z-header", "--z-focus", "--z-modal"];
 type ShellToken = (typeof SHELL_TOKENS)[number];
+/** A colour token: what a chart series, a tone or a canvas colour may name. */
+type ShellColorToken = Extract<ShellToken, `--color-${string}`>;
 /** The computed value of a token on the document, or `fallback` outside a browser. */
 declare function resolveToken(token: string, fallback?: string): string;
 /**
@@ -38,4 +55,4 @@ declare function resolveToken(token: string, fallback?: string): string;
  */
 declare function useThemeTokens(): Record<ShellToken, string>;
 
-export { type FormatOptions as F, NOT_AVAILABLE as N, type ShellToken as S, SHELL_TOKENS as a, useThemeTokens as b, formatNumber as f, resolveToken as r, useFormat as u };
+export { type FormatOptions as F, NBSP as N, type ShellColorToken as S, NOT_AVAILABLE as a, SCIENTIFIC_BELOW as b, SHELL_TOKENS as c, type ShellToken as d, formatTicks as e, formatNumber as f, useThemeTokens as g, resolveToken as r, useFormat as u };