@fasl-work/caos-app-shell 0.6.13 → 0.7.0

package/dist/index.js

@@ -1,40 +1,12 @@
-import { createContext, useState, useRef, useId, useEffect, useCallback, useContext } from 'react';
-import { useLocation, NavLink } from 'react-router';
+import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, formatNumber } from './chunk-OV4HK6EQ.js';
+export { NOT_AVAILABLE, SHELL_TOKENS, Stage, applyTheme, formatNumber, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-OV4HK6EQ.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';
 import { Sun, Moon, Languages, Boxes, CodeXml, Globe, Briefcase, Info } from 'lucide-react';
-import { create } from 'zustand';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import katex from 'katex';
 
-// src/shell/AppShell.tsx
-var KEY = "caos.lang";
-function readLang() {
-  try {
-    const s = localStorage.getItem(KEY);
-    if (s === "en" || s === "es") return s;
-  } catch {
-  }
-  return "en";
-}
-var useLangStore = create((set, get) => ({
-  lang: readLang(),
-  setLang: (l) => {
-    try {
-      localStorage.setItem(KEY, l);
-    } catch {
-    }
-    set({ lang: l });
-  },
-  toggle: () => {
-    const next = get().lang === "en" ? "es" : "en";
-    try {
-      localStorage.setItem(KEY, next);
-    } catch {
-    }
-    set({ lang: next });
-  }
-}));
-var useShellLang = () => useLangStore((s) => s.lang);
-
 // src/lib/chrome.ts
 var CHROME = {
   en: {
@@ -47,7 +19,7 @@ var CHROME = {
     dark: "Dark",
     attribution: "Developed by Felipe Santib\xE1\xF1ez-Leal",
     complement: "A CAOS research project",
-    license: "MIT licensed \xB7 open source",
+    license: "",
     version: "v"
   },
   es: {
@@ -60,47 +32,73 @@ var CHROME = {
     dark: "Oscuro",
     attribution: "Desarrollado por Felipe Santib\xE1\xF1ez-Leal",
     complement: "Un proyecto de investigaci\xF3n CAOS",
-    license: "Licencia MIT \xB7 c\xF3digo abierto",
+    license: "",
     version: "v"
   }
 };
 var chrome = (lang) => CHROME[lang];
-var KEY2 = "caos.theme";
-function readTheme() {
-  try {
-    const s = localStorage.getItem(KEY2);
-    if (s === "light" || s === "dark") return s;
-    return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
-  } catch {
-    return "dark";
-  }
+function FailedView({ panel: panel2, error }) {
+  const lang = useShellLang();
+  return /* @__PURE__ */ jsxs("div", { className: "caos-panel-error", role: "alert", "data-panel-error": panel2, children: [
+    /* @__PURE__ */ jsx("strong", { children: lang === "es" ? "Esta vista fall\xF3." : "This view failed." }),
+    " ",
+    /* @__PURE__ */ jsx("span", { children: lang === "es" ? "El resto de la p\xE1gina sigue funcionando." : "The rest of the page still works." }),
+    /* @__PURE__ */ jsx("code", { children: error.message })
+  ] });
 }
-function applyTheme(t) {
-  try {
-    document.documentElement.dataset.theme = t;
-  } catch {
+var PanelBoundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
   }
-}
-var useThemeStore = create((set, get) => ({
-  theme: readTheme(),
-  toggleTheme: () => {
-    const next = get().theme === "dark" ? "light" : "dark";
-    applyTheme(next);
-    try {
-      localStorage.setItem(KEY2, next);
-    } catch {
-    }
-    set({ theme: next });
-  },
-  setTheme: (t) => {
-    applyTheme(t);
-    try {
-      localStorage.setItem(KEY2, t);
-    } catch {
-    }
-    set({ theme: t });
+  componentDidCatch(error, info) {
+    console.error(`[caos-app-shell] view "${this.props.panel}" failed: ${error.message}`, info.componentStack ?? "");
+  }
+  render() {
+    if (this.state.error) return /* @__PURE__ */ jsx(FailedView, { panel: this.props.panel, error: this.state.error });
+    return this.props.children;
+  }
+};
+var FADE = 28;
+function reveal(row, item) {
+  const r = row.getBoundingClientRect();
+  const b = item.getBoundingClientRect();
+  const margin = Math.max(0, Math.min(FADE, (r.width - b.width) / 2));
+  if (b.left < r.left + margin) {
+    row.scrollTo({ left: Math.max(0, row.scrollLeft - (r.left + margin - b.left)), behavior: "instant" });
+  } else if (b.right > r.right - margin) {
+    row.scrollTo({ left: Math.min(row.scrollWidth - row.clientWidth, row.scrollLeft + (b.right - (r.right - margin))), behavior: "instant" });
   }
-}));
+}
+function useOverflowFade(ref, activeSelector, deps = []) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => {
+      const start = el.scrollLeft > 1;
+      const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+      el.dataset.fadeStart = start ? "1" : "0";
+      el.dataset.fadeEnd = end ? "1" : "0";
+    };
+    const focused = document.activeElement instanceof HTMLElement && el.contains(document.activeElement) && document.activeElement !== el ? document.activeElement : null;
+    const active = focused ?? (activeSelector ? el.querySelector(activeSelector) : null);
+    if (active && el.scrollWidth > el.clientWidth) reveal(el, active);
+    const onFocus = (e) => {
+      const target = e.target;
+      if (target && target !== el && el.contains(target) && el.scrollWidth > el.clientWidth) reveal(el, target);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    el.addEventListener("focusin", onFocus);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    ro?.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      el.removeEventListener("focusin", onFocus);
+      ro?.disconnect();
+    };
+  }, deps);
+}
 function ThemeToggle() {
   const theme = useThemeStore((s) => s.theme);
   const toggleTheme = useThemeStore((s) => s.toggleTheme);
@@ -119,7 +117,29 @@ function LanguageToggle() {
     /* @__PURE__ */ jsx("span", { className: "lang-code", children: lang })
   ] });
 }
-var cache = {};
+function validateArchitectureConfig(config) {
+  const out = [];
+  if (config.tabs.length < 5) out.push(`the architecture modal has ${config.tabs.length} tabs; ADR-0058 requires at least 5`);
+  const known = new Set(SHELL_TOKENS);
+  for (const t of config.tabs) {
+    if (!t.en?.trim() || !t.es?.trim() || !t.body_en?.trim() || !t.body_es?.trim()) {
+      out.push(`architecture tab "${t.id}" lacks a label or a body in one language`);
+    }
+    const svg = t.svg.trim();
+    if (!svg.startsWith("<svg")) {
+      out.push(`architecture tab "${t.id}": the diagram must be an inline SVG string (import it with ?raw), not a URL`);
+      continue;
+    }
+    for (const name of new Set([...svg.matchAll(/var\((--[a-z0-9-]+)/gi)].map((x) => x[1]))) {
+      if (!known.has(name)) out.push(`architecture tab "${t.id}" uses ${name}, which the shell does not define`);
+    }
+    const hex = svg.replace(/url\(\s*#[^)]*\)/gi, "").replace(/href\s*=\s*["']#[^"']*["']/gi, "").match(/#[0-9a-f]{3,8}\b/gi);
+    if (hex) {
+      out.push(`architecture tab "${t.id}" uses hex colours (${[...new Set(hex)].slice(0, 3).join(", ")}); use shell tokens so it follows the theme`);
+    }
+  }
+  return out;
+}
 function ArchitectureModal({ config, onClose }) {
   const lang = useShellLang();
   const es = lang === "es";
@@ -179,27 +199,10 @@ function ArchitectureModal({ config, onClose }) {
       setSvg(raw);
       return;
     }
-    if (cache[raw]) {
-      setSvg(cache[raw]);
-      return;
-    }
+    console.error(`[caos-app-shell] architecture tab "${tab.id}": the diagram must be an inline SVG string, not "${raw.slice(0, 40)}"`);
     setSvg(null);
-    let cancelled = false;
-    const baseUrl = import.meta.env?.BASE_URL || "/";
-    const url = baseUrl + raw.replace(/^\//, "");
-    fetch(url).then(async (r) => {
-      if (!r.ok) throw new Error(`${r.status}`);
-      return r.text();
-    }).then((text) => {
-      cache[raw] = text;
-      if (!cancelled) setSvg(text);
-    }).catch((e) => {
-      if (!cancelled) setErr(String(e?.message ?? e));
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [tab]);
+    setErr(es ? "diagrama no disponible" : "diagram unavailable");
+  }, [tab, es]);
   useEffect(() => {
     const element = diagramRef.current?.querySelector("svg");
     if (!element) return;
@@ -275,7 +278,7 @@ function ArchitectureModal({ config, onClose }) {
                 t.id
               );
             }) }),
-            /* @__PURE__ */ jsxs("div", { id: `${id}-panel`, role: "tabpanel", "aria-labelledby": `${id}-${tab.id}`, "data-arch-lang": es ? "es" : "en", style: { overflowY: "auto", minHeight: 0, padding: "14px 16px 18px" }, children: [
+            /* @__PURE__ */ jsxs("div", { id: `${id}-panel`, role: "tabpanel", "aria-labelledby": `${id}-${tab.id}`, "data-arch-lang": es ? "es" : "en", "data-tab": tab.id, "data-state": err ? "missing" : svg === null ? "loading" : "ready", style: { overflowY: "auto", minHeight: 0, padding: "14px 16px 18px" }, children: [
               body.map((p, i) => /* @__PURE__ */ jsx("p", { style: { color: "var(--color-fg)", fontSize: 13, lineHeight: 1.65, margin: i === 0 ? "0 0 10px" : "10px 0" }, children: p }, i)),
               err && /* @__PURE__ */ jsxs("div", { style: { color: "var(--color-warn, #f87171)", fontSize: 12 }, children: [
                 "SVG: ",
@@ -283,7 +286,7 @@ function ArchitectureModal({ config, onClose }) {
               ] }),
               !err && svg === null && /* @__PURE__ */ jsx("div", { style: { color: "var(--color-fg-faint)", fontSize: 12 }, children: "\u2026" }),
               svg !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": fullSize, "aria-controls": `${id}-diagram`, onClick: () => setFullSize((value) => !value), style: { margin: "0 0 8px", fontSize: 12, padding: "5px 10px" }, children: fullSize ? es ? "Ajustar diagrama" : "Fit diagram" : es ? "Leer a tama\xF1o completo" : "Read at full size" }),
+                /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": fullSize, "aria-controls": `${id}-diagram`, onClick: () => setFullSize((value) => !value), className: "caos-arch-toggle", children: fullSize ? es ? "Ajustar diagrama" : "Fit diagram" : es ? "Leer a tama\xF1o completo" : "Read at full size" }),
                 /* @__PURE__ */ jsx("div", { id: `${id}-diagram`, role: "region", "aria-label": es ? "Diagrama de arquitectura" : "Architecture diagram", tabIndex: 0, style: { border: "1px solid var(--color-border)", borderRadius: 8, padding: 8, background: "var(--color-bg, var(--color-surface))", overflow: "auto", maxWidth: "100%" }, children: /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -303,53 +306,102 @@ function ArchitectureModal({ config, onClose }) {
 }
 var PERSONAL = "https://fsantibanezleal.github.io";
 var PORTFOLIO = "https://fasl-work.com";
+var DISPLAY_VERSION = /^\d+\.\d{2}\.\d{3}$/;
+function validate(config) {
+  if (!DISPLAY_VERSION.test(config.version)) {
+    console.error(`[caos-app-shell] version "${config.version}" is not the display form X.XX.XXX (ADR-0068)`);
+  }
+  if (!config.license && !config.footer?.license) {
+    console.error("[caos-app-shell] ShellConfig.license is required: the footer shows the product licence");
+  }
+  if (config.visibility !== "public" && config.visibility !== "private") {
+    console.error('[caos-app-shell] ShellConfig.visibility is required ("public" or "private")');
+  }
+  if (config.architecture) {
+    for (const problem of validateArchitectureConfig(config.architecture)) console.error(`[caos-app-shell] ${problem}`);
+  }
+}
+function Nav({ routes, name, routed, pathname }) {
+  const lang = useShellLang();
+  const ref = useRef(null);
+  useOverflowFade(ref, ".nav-link.active", [lang, pathname]);
+  return /* @__PURE__ */ jsx("nav", { className: "main-nav", "aria-label": name, ref, children: routes.map(
+    (r) => routed ? /* @__PURE__ */ jsx(
+      NavLink,
+      {
+        to: r.path,
+        end: r.path === "/",
+        className: ({ isActive }) => isActive ? "nav-link active" : "nav-link",
+        children: lang === "es" ? r.es : r.en
+      },
+      r.path
+    ) : /* @__PURE__ */ jsx("a", { href: r.path, className: pathname === r.path ? "nav-link active" : "nav-link", children: lang === "es" ? r.es : r.en }, r.path)
+  ) });
+}
+function RoutedPath({ children }) {
+  const { pathname } = useLocation();
+  return /* @__PURE__ */ jsx(Fragment, { children: children(pathname) });
+}
 function AppShell({ config, children }) {
+  const routed = useInRouterContext();
+  useEffect(() => {
+    if (!routed) {
+      console.error(
+        "[caos-app-shell] AppShell is outside a Router context. If a Router is mounted, two copies of react-router are installed: depend on react-router (not react-router-dom) and add resolve.dedupe ['react', 'react-dom', 'react-router'] to vite.config.ts."
+      );
+    }
+  }, [routed]);
+  useEffect(() => {
+    validate(config);
+  }, []);
+  if (routed) return /* @__PURE__ */ jsx(RoutedPath, { children: (pathname) => /* @__PURE__ */ jsx(Frame, { config, pathname, routed: true, children }) });
+  return /* @__PURE__ */ jsx(Frame, { config, pathname: typeof window !== "undefined" ? window.location.pathname : "/", routed: false, children });
+}
+function Frame({ config, pathname, routed, children }) {
   const lang = useShellLang();
   const c = chrome(lang);
   const routes = config.routes ?? [];
   const personal = config.links.personal ?? PERSONAL;
   const portfolio = config.links.portfolio ?? PORTFOLIO;
+  const isPublic = config.visibility !== "private";
   const [archOpen, setArchOpen] = useState(false);
+  const footRef = useRef(null);
+  useOverflowFade(footRef, null, [lang, pathname]);
+  useEffect(() => {
+    document.documentElement.lang = lang;
+  }, [lang]);
   const archLabel = lang === "es" ? "Arquitectura / C\xF3mo funciona" : "Architecture / How it works";
-  const { pathname } = useLocation();
-  const fixed = config.fixed === true || (config.fixedRoutes ?? []).some((p) => p === pathname || p !== "/" && pathname.startsWith(p.replace(/\/$/, "") + "/"));
-  return /* @__PURE__ */ jsxs("div", { className: fixed ? "app-shell fixed" : "app-shell", children: [
+  const fixed = config.contain === true || config.fixed === true || (config.fixedRoutes ?? []).some((p) => p === pathname || p !== "/" && pathname.startsWith(p.replace(/\/$/, "") + "/"));
+  const license = config.license ? pick(config.license, lang) : config.footer?.license?.[lang] ?? "";
+  const brand = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "brand-mark", children: config.product.mark ?? /* @__PURE__ */ jsx(Boxes, { size: 18, "aria-hidden": "true" }) }),
+    /* @__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("header", { className: "site-header", children: /* @__PURE__ */ jsxs("div", { className: "header-inner", children: [
-      /* @__PURE__ */ jsxs(NavLink, { to: "/", className: "brand", "aria-label": config.product.name, children: [
-        /* @__PURE__ */ jsx("span", { className: "brand-mark", children: config.product.mark ?? /* @__PURE__ */ jsx(Boxes, { size: 18, "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx("span", { children: config.product.name })
-      ] }),
-      routes.length > 1 && /* @__PURE__ */ jsx("nav", { className: "main-nav", "aria-label": config.product.name, children: routes.map((r) => /* @__PURE__ */ jsx(
-        NavLink,
-        {
-          to: r.path,
-          end: r.path === "/",
-          onFocus: (event) => event.currentTarget.scrollIntoView({ block: "nearest", inline: "nearest" }),
-          className: ({ isActive }) => isActive ? "nav-link active" : "nav-link",
-          children: lang === "es" ? r.es : r.en
-        },
-        r.path
-      )) }),
+      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 }),
       /* @__PURE__ */ jsxs("div", { className: "header-actions", children: [
-        /* @__PURE__ */ jsx("a", { className: "icon-btn", href: config.links.github, target: "_blank", rel: "noreferrer noopener", "aria-label": c.github, title: c.github, children: /* @__PURE__ */ jsx(CodeXml, { size: 18, "aria-hidden": "true" }) }),
+        isPublic && /* @__PURE__ */ jsx("a", { className: "icon-btn", href: config.links.github, target: "_blank", rel: "noreferrer noopener", "aria-label": c.github, title: c.github, children: /* @__PURE__ */ jsx(CodeXml, { size: 18, "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx("a", { className: "icon-btn", href: personal, target: "_blank", rel: "noreferrer noopener", "aria-label": c.personal, title: c.personal, children: /* @__PURE__ */ jsx(Globe, { size: 18, "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx("a", { className: "icon-btn", href: portfolio, target: "_blank", rel: "noreferrer noopener", "aria-label": c.portfolio, title: c.portfolio, children: /* @__PURE__ */ jsx(Briefcase, { size: 18, "aria-hidden": "true" }) }),
-        config.architecture && /* @__PURE__ */ jsx("button", { className: "icon-btn", type: "button", onClick: () => setArchOpen(true), "aria-label": archLabel, title: archLabel, children: /* @__PURE__ */ jsx(Info, { size: 18, "aria-hidden": "true" }) }),
+        config.architecture && /* @__PURE__ */ jsx("button", { className: "icon-btn", type: "button", onClick: () => setArchOpen(true), "aria-label": archLabel, title: archLabel, "data-architecture-button": "", children: /* @__PURE__ */ jsx(Info, { size: 18, "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx("span", { className: "header-sep", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx(LanguageToggle, {}),
         /* @__PURE__ */ jsx(ThemeToggle, {})
       ] })
     ] }) }),
     config.architecture && archOpen && /* @__PURE__ */ jsx(ArchitectureModal, { config: config.architecture, onClose: () => setArchOpen(false) }),
-    /* @__PURE__ */ jsx("main", { className: "page", children }),
-    /* @__PURE__ */ jsx("footer", { className: "site-footer", children: /* @__PURE__ */ jsx("div", { className: "footer-inner", children: /* @__PURE__ */ jsxs("div", { className: "footer-meta", children: [
+    /* @__PURE__ */ jsx("main", { className: "page", 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" }),
       /* @__PURE__ */ jsx("span", { children: c.complement }),
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-      /* @__PURE__ */ jsx("span", { className: "footer-build", children: /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("span", { className: "footer-build", "data-version": config.version, "data-build": config.build ?? "", children: /* @__PURE__ */ jsxs("span", { children: [
         c.version,
-        config.version
+        config.version,
+        config.build ? ` \xB7 ${config.build}` : ""
       ] }) }),
       config.footer?.attribution !== false && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
@@ -359,10 +411,14 @@ function AppShell({ config, children }) {
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
         /* @__PURE__ */ jsx("span", { children: config.footer.provenance[lang] })
       ] }),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-      /* @__PURE__ */ jsx("a", { href: config.links.github, target: "_blank", rel: "noreferrer noopener", onFocus: (event) => event.currentTarget.scrollIntoView({ block: "nearest", inline: "nearest" }), children: c.github }),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-      /* @__PURE__ */ jsx("span", { className: "faint", children: config.footer?.license?.[lang] ?? c.license }),
+      isPublic && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+        /* @__PURE__ */ jsx("a", { href: config.links.github, target: "_blank", rel: "noreferrer noopener", children: c.github })
+      ] }),
+      license && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { className: "faint", children: license })
+      ] }),
       config.footer?.disclaimer && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
         /* @__PURE__ */ jsx("span", { className: "faint", children: config.footer.disclaimer[lang] })
@@ -657,18 +713,20 @@ function CaseSelector(props) {
   const t = { ...TEXT[lang], ...text };
   const baseId = useId();
   const param = typeof deepLink === "string" ? deepLink : "case";
+  const linkPending = useRef(Boolean(deepLink));
   useEffect(() => {
-    if (!deepLink || typeof window === "undefined") return;
+    if (!linkPending.current || typeof window === "undefined" || cases.length === 0) return;
+    linkPending.current = false;
     const fromUrl = readCaseParam(window.location.search, param);
     if (fromUrl && fromUrl !== selectedId && cases.some((c) => c.id === fromUrl)) onSelect(fromUrl);
-  }, []);
+  }, [cases]);
   useEffect(() => {
-    if (!deepLink || typeof window === "undefined") return;
+    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}`);
     }
-  }, [deepLink, param, selectedId]);
+  }, [deepLink, param, selectedId, cases]);
   const lanes = source ? sourcesPresent(cases) : [];
   const visible = casesInSource(cases, source);
   const groups = groupByCategory(visible);
@@ -693,14 +751,15 @@ function CaseSelector(props) {
     layout === "select" && /* @__PURE__ */ jsx(
       "select",
       {
+        "data-control": "case",
         className: "select cs-select",
         "aria-label": ariaLabel ?? "Case selector",
         value: selectedId,
         onChange: (e) => onSelect(e.target.value),
-        children: groups.map((g) => /* @__PURE__ */ jsx("optgroup", { label: g.category || " ", children: g.cases.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, disabled: c.disabled, title: caseTooltip(c) || void 0, children: `${c.id} \xB7 ${c.name}` }, c.id)) }, g.category || "_"))
+        children: groups.map((g) => /* @__PURE__ */ jsx("optgroup", { label: g.category || " ", children: g.cases.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, disabled: c.disabled, title: caseTooltip(c) || void 0, children: c.name }, c.id)) }, g.category || "_"))
       }
     ),
-    layout === "chips" && groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "cs-group", role: "group", "aria-label": g.category || void 0, children: [
+    layout === "chips" && groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "cs-group", role: "group", "aria-label": g.category || void 0, "data-control": "case", children: [
       g.category && /* @__PURE__ */ jsx("span", { className: "cs-group-label", children: g.category }),
       /* @__PURE__ */ jsx("div", { className: "cs-chips", children: g.cases.map((c) => {
         const on = c.id === selectedId;
@@ -715,8 +774,8 @@ function CaseSelector(props) {
             disabled: c.disabled,
             title: tip || void 0,
             onClick: () => onSelect(c.id),
+            "data-case": c.id,
             children: [
-              /* @__PURE__ */ jsx("span", { className: "cs-chip-id", children: c.id }),
               /* @__PURE__ */ jsx("span", { className: "cs-chip-name", children: c.name }),
               /* @__PURE__ */ jsx("span", { className: `cs-kind cs-kind-${caseKindOf(c)}`, "aria-hidden": "true", children: KIND_TAG[caseKindOf(c)] })
             ]
@@ -729,7 +788,7 @@ function CaseSelector(props) {
       /* @__PURE__ */ jsxs("span", { className: "badge accent", children: [
         t.modifiedPrefix,
         " ",
-        /* @__PURE__ */ jsx("strong", { children: modified.id })
+        /* @__PURE__ */ jsx("strong", { children: modified.name })
       ] }),
       onResetToCanonical && /* @__PURE__ */ jsx("button", { type: "button", className: "cs-reset", onClick: onResetToCanonical, children: t.reset })
     ] })
@@ -738,10 +797,21 @@ function CaseSelector(props) {
 function caseKindOf(c) {
   return c.kind ?? "synthetic";
 }
-function Tabs({ tabs, initial, ariaLabel }) {
+var MAX_PEER_TABS = 6;
+function Tabs({ tabs, initial, value, onChange, ariaLabel }) {
   const baseId = useId();
   const first = tabs[0]?.id ?? "";
-  const [active, setActive] = useState(initial ?? first);
+  const [own, setOwn] = useState(initial ?? first);
+  const active = value ?? own;
+  const rowRef = useRef(null);
+  useOverflowFade(rowRef, ".tab.active", [active, tabs.length]);
+  if (tabs.length > MAX_PEER_TABS) {
+    console.error(`[caos-app-shell] ${tabs.length} peer tabs (${ariaLabel ?? "unnamed"}); at most ${MAX_PEER_TABS}, then group (ADR-0071 rule 5)`);
+  }
+  function select(id) {
+    if (value === void 0) setOwn(id);
+    onChange?.(id);
+  }
   function onKeyDown(e, idx) {
     if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "Home" && e.key !== "End") return;
     e.preventDefault();
@@ -752,13 +822,14 @@ function Tabs({ tabs, initial, ariaLabel }) {
     else if (e.key === "End") next = tabs.length - 1;
     const target = tabs[next];
     if (target) {
-      setActive(target.id);
+      select(target.id);
       document.getElementById(`${baseId}-tab-${target.id}`)?.focus();
     }
   }
+  const current = tabs.find((t) => t.id === active) ?? tabs[0];
   return /* @__PURE__ */ jsxs("div", { className: "tabs", children: [
-    /* @__PURE__ */ jsx("div", { className: "tablist", role: "tablist", "aria-label": ariaLabel, children: tabs.map((tab, idx) => {
-      const selected = tab.id === active;
+    /* @__PURE__ */ jsx("div", { className: "tablist", role: "tablist", "aria-label": ariaLabel, ref: rowRef, children: tabs.map((tab, idx) => {
+      const selected = tab.id === current?.id;
       return /* @__PURE__ */ jsx(
         "button",
         {
@@ -769,38 +840,44 @@ function Tabs({ tabs, initial, ariaLabel }) {
           "aria-controls": `${baseId}-panel-${tab.id}`,
           tabIndex: selected ? 0 : -1,
           className: selected ? "tab active" : "tab",
-          onClick: () => setActive(tab.id),
+          "data-tab": tab.id,
+          onClick: () => select(tab.id),
           onKeyDown: (e) => onKeyDown(e, idx),
           children: tab.label
         },
         tab.id
       );
     }) }),
-    tabs.map((tab) => /* @__PURE__ */ jsx(
+    current && /* @__PURE__ */ jsx(
       "div",
       {
-        id: `${baseId}-panel-${tab.id}`,
+        id: `${baseId}-panel-${current.id}`,
         role: "tabpanel",
-        "aria-labelledby": `${baseId}-tab-${tab.id}`,
-        hidden: tab.id !== active,
+        "aria-labelledby": `${baseId}-tab-${current.id}`,
         tabIndex: 0,
         className: "tabpanel",
-        children: tab.id === active ? tab.content : null
+        "data-panel": current.id,
+        children: /* @__PURE__ */ jsx(PanelBoundary, { panel: current.id, children: current.content })
       },
-      tab.id
-    ))
+      current.id
+    )
   ] });
 }
-function SubTabs({
-  tabs,
-  initial,
-  ariaLabel,
-  orientation = "horizontal"
-}) {
+function SubTabs({ tabs, initial, value, onChange, ariaLabel, orientation = "horizontal" }) {
   const baseId = useId();
   const first = tabs[0]?.id ?? "";
-  const [active, setActive] = useState(initial ?? first);
+  const [own, setOwn] = useState(initial ?? first);
+  const active = value ?? own;
   const vertical = orientation === "vertical";
+  const rowRef = useRef(null);
+  useOverflowFade(rowRef, ".subtab.active", [active, tabs.length, vertical]);
+  if (tabs.length > MAX_PEER_TABS) {
+    console.error(`[caos-app-shell] ${tabs.length} peer sub-tabs (${ariaLabel ?? "unnamed"}); at most ${MAX_PEER_TABS}, then group (ADR-0071 rule 5)`);
+  }
+  function select(id) {
+    if (value === void 0) setOwn(id);
+    onChange?.(id);
+  }
   function onKeyDown(e, idx) {
     const fwd = vertical ? "ArrowDown" : "ArrowRight";
     const back = vertical ? "ArrowUp" : "ArrowLeft";
@@ -813,45 +890,90 @@ function SubTabs({
     else if (e.key === "End") next = tabs.length - 1;
     const target = tabs[next];
     if (target) {
-      setActive(target.id);
+      select(target.id);
       document.getElementById(`${baseId}-subtab-${target.id}`)?.focus();
     }
   }
+  const current = tabs.find((t) => t.id === active) ?? tabs[0];
   return /* @__PURE__ */ jsxs("div", { className: vertical ? "subtabs subtabs-vertical" : "subtabs", children: [
-    /* @__PURE__ */ jsx("div", { className: "subtablist", role: "tablist", "aria-label": ariaLabel, "aria-orientation": vertical ? "vertical" : "horizontal", children: tabs.map((tab, idx) => {
-      const selected = tab.id === active;
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          id: `${baseId}-subtab-${tab.id}`,
-          role: "tab",
-          type: "button",
-          "aria-selected": selected,
-          "aria-controls": `${baseId}-subpanel-${tab.id}`,
-          tabIndex: selected ? 0 : -1,
-          className: selected ? "subtab active" : "subtab",
-          onClick: () => setActive(tab.id),
-          onKeyDown: (e) => onKeyDown(e, idx),
-          children: tab.label
-        },
-        tab.id
-      );
-    }) }),
-    /* @__PURE__ */ jsx("div", { className: "subtabpanels", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        id: `${baseId}-subpanel-${tab.id}`,
+        className: "subtablist",
+        role: "tablist",
+        "aria-label": ariaLabel,
+        "aria-orientation": vertical ? "vertical" : "horizontal",
+        ref: rowRef,
+        children: tabs.map((tab, idx) => {
+          const selected = tab.id === current?.id;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              id: `${baseId}-subtab-${tab.id}`,
+              role: "tab",
+              type: "button",
+              "aria-selected": selected,
+              "aria-controls": `${baseId}-subpanel-${tab.id}`,
+              tabIndex: selected ? 0 : -1,
+              className: selected ? "subtab active" : "subtab",
+              "data-tab": tab.id,
+              onClick: () => select(tab.id),
+              onKeyDown: (e) => onKeyDown(e, idx),
+              children: tab.label
+            },
+            tab.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "subtabpanels", children: current && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${baseId}-subpanel-${current.id}`,
         role: "tabpanel",
-        "aria-labelledby": `${baseId}-subtab-${tab.id}`,
-        hidden: tab.id !== active,
+        "aria-labelledby": `${baseId}-subtab-${current.id}`,
         tabIndex: 0,
         className: "subtabpanel",
-        children: tab.id === active ? tab.content : null
+        "data-panel": current.id,
+        children: /* @__PURE__ */ jsx(PanelBoundary, { panel: current.id, children: current.content })
       },
-      tab.id
-    )) })
+      current.id
+    ) })
   ] });
 }
+function TabGroups({ groups, value, onChange, ariaLabel }) {
+  const [own, setOwn] = useState({ group: groups[0]?.id ?? "" });
+  const sel = value ?? own;
+  const group = groups.find((g) => g.id === sel.group) ?? groups[0];
+  const tabOf = (g, wanted) => g.tabs.find((t) => t.id === wanted)?.id ?? g.tabs[0]?.id ?? "";
+  function set(next) {
+    if (value === void 0) setOwn(next);
+    onChange?.(next);
+  }
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      ariaLabel,
+      value: group?.id,
+      onChange: (gid) => {
+        const g = groups.find((x) => x.id === gid);
+        if (g) set({ group: g.id, tab: tabOf(g) });
+      },
+      tabs: groups.map((g) => ({
+        id: g.id,
+        label: g.label,
+        content: g.tabs.length === 1 ? g.tabs[0].content : /* @__PURE__ */ jsx(
+          SubTabs,
+          {
+            tabs: g.tabs,
+            value: tabOf(g, g.id === group?.id ? sel.tab : void 0),
+            onChange: (tid) => set({ group: g.id, tab: tid })
+          }
+        )
+      }))
+    }
+  );
+}
 function Callout({
   variant = "note",
   title,
@@ -864,6 +986,9 @@ function Callout({
   ] });
 }
 function Equation({ tex, caption }) {
+  if (caption === void 0 || caption === null || caption === "") {
+    console.error(`[caos-app-shell] Equation without a caption (ADR-0017 s2): ${tex.slice(0, 60)}`);
+  }
   const html = katex.renderToString(tex, { displayMode: true, throwOnError: false });
   return /* @__PURE__ */ jsxs("div", { className: "equation", children: [
     /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } }),
@@ -883,7 +1008,11 @@ function Figure({ caption, children }) {
 var CitationsContext = createContext({ list: [], byId: {} });
 function CitationsProvider({ items, children }) {
   const byId = {};
-  for (const c of items) byId[c.id] = c;
+  for (const c of items) {
+    if (byId[c.id]) console.error(`[caos-app-shell] duplicate citation id ${c.id}`);
+    if (!c.doi && !c.url) console.error(`[caos-app-shell] citation ${c.id} has no doi or url (ADR-0017 s4)`);
+    byId[c.id] = c;
+  }
   return /* @__PURE__ */ jsx(CitationsContext.Provider, { value: { list: items, byId }, children });
 }
 function href(c) {
@@ -891,14 +1020,19 @@ function href(c) {
 }
 function Cite({ id, paren = true }) {
   const { byId } = useContext(CitationsContext);
+  const lang = useShellLang();
   const c = byId[id];
-  if (!c) return /* @__PURE__ */ jsxs("cite", { className: "cite-inline", children: [
-    "[",
-    id,
-    "]"
-  ] });
+  if (!c) {
+    console.error(`[caos-app-shell] Cite of an unknown citation id ${id}`);
+    return /* @__PURE__ */ jsxs("cite", { className: "cite-inline", children: [
+      "[",
+      id,
+      "]"
+    ] });
+  }
   const h = href(c);
-  const label = h ? /* @__PURE__ */ jsx("a", { href: h, target: "_blank", rel: "noreferrer noopener", children: c.label }) : /* @__PURE__ */ jsx("span", { children: c.label });
+  const text = pick(c.label, lang);
+  const label = h ? /* @__PURE__ */ jsx("a", { href: h, target: "_blank", rel: "noreferrer noopener", children: text }) : /* @__PURE__ */ jsx("span", { children: text });
   return /* @__PURE__ */ jsxs("cite", { className: "cite-inline", children: [
     paren ? "(" : null,
     label,
@@ -916,6 +1050,7 @@ function Refs({ ids, label }) {
   ] });
 }
 function ReferenceList({ ids, heading }) {
+  console.error("[caos-app-shell] ReferenceList is banned (ADR-0017 s4): end each section with Refs");
   const { list, byId } = useContext(CitationsContext);
   const items = ids ? ids.map((k) => byId[k]).filter(Boolean) : list;
   return /* @__PURE__ */ jsxs("section", { className: "references", "aria-label": heading ?? "References", children: [
@@ -930,5 +1065,395 @@ function ReferenceList({ ids, heading }) {
     }) })
   ] });
 }
+function DocPage({ title, lede, wide, children }) {
+  const lang = useShellLang();
+  return /* @__PURE__ */ jsxs("div", { className: wide ? "page-body wide prose caos-doc" : "page-body prose caos-doc", "data-doc-page": "", children: [
+    /* @__PURE__ */ jsxs("div", { className: "page-head", children: [
+      /* @__PURE__ */ jsx("h1", { children: pick(title, lang) }),
+      /* @__PURE__ */ jsx("p", { className: "lede", children: lede })
+    ] }),
+    children
+  ] });
+}
+function DocSection({ title, id, refs, noRefsReason, children }) {
+  const lang = useShellLang();
+  const hasRefs = Boolean(refs && refs.length > 0);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id,
+      className: "caos-doc-section",
+      "data-doc-section": "",
+      "data-no-refs-reason": hasRefs ? void 0 : pick(noRefsReason, lang) || "missing",
+      children: [
+        /* @__PURE__ */ jsx("h2", { children: pick(title, lang) }),
+        children,
+        hasRefs && /* @__PURE__ */ jsx(Refs, { ids: refs, label: lang === "es" ? "Referencias" : "References" })
+      ]
+    }
+  );
+}
+function isSections(rail) {
+  return Array.isArray(rail) && rail.every((s) => typeof s === "object" && s !== null && "id" in s && "content" in s);
+}
+function WorkbenchLayout({ rail, railHead, children, railLabel, className }) {
+  const lang = useShellLang();
+  const sections = isSections(rail) ? rail : null;
+  const [active, setActive] = useState(sections?.[0]?.id ?? "");
+  const baseId = useId();
+  const label = pick(railLabel ?? { en: "Controls", es: "Controles" }, lang);
+  const current = sections?.find((s) => s.id === active) ?? sections?.[0];
+  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(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            id: `${baseId}-rs-${s.id}`,
+            "aria-selected": s.id === current?.id,
+            "aria-controls": `${baseId}-rp-${s.id}`,
+            className: s.id === current?.id ? "chip on" : "chip",
+            onClick: () => setActive(s.id),
+            children: pick(s.label, lang)
+          },
+          s.id
+        )) }),
+        current && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "caos-wb-rail-panel",
+            role: "tabpanel",
+            id: `${baseId}-rp-${current.id}`,
+            "aria-labelledby": `${baseId}-rs-${current.id}`,
+            children: current.content
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-panel", children: rail })
+    ] }),
+    /* @__PURE__ */ jsx("section", { className: "caos-wb-main", "data-instrument": "", children })
+  ] });
+}
+var WorkbenchStateContext = createContext(null);
+function useWorkbenchState() {
+  return useContext(WorkbenchStateContext);
+}
+function stable(value) {
+  if (value === null || typeof value !== "object") return JSON.stringify(value) ?? "undefined";
+  if (Array.isArray(value)) return `[${value.map(stable).join(",")}]`;
+  const obj = value;
+  return `{${Object.keys(obj).sort().map((k) => `${JSON.stringify(k)}:${stable(obj[k])}`).join(",")}}`;
+}
+function makeStateKey(parts) {
+  const text = stable(parts);
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i += 1) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h.toString(16).padStart(8, "0");
+}
+function isStale(dataKey, current) {
+  return Boolean(current && dataKey !== void 0 && dataKey !== current.stateKey);
+}
+var LANE_LABELS = {
+  live: { en: "Live in your browser", es: "En vivo en tu navegador" },
+  replay: { en: "Replay of the offline result", es: "Reproduce el resultado offline" },
+  offline: { en: "Offline only", es: "Solo offline" }
+};
+var PROVENANCE_LABELS = {
+  real: { en: "Real data", es: "Datos reales" },
+  synthetic: { en: "Synthetic data", es: "Datos sint\xE9ticos" },
+  published: { en: "Published reference", es: "Referencia publicada" }
+};
+function LaneBadge({ lane, provenance, label }) {
+  const lang = useShellLang();
+  return /* @__PURE__ */ jsxs("span", { className: "caos-badges", children: [
+    /* @__PURE__ */ jsx("span", { className: `badge caos-lane caos-lane-${lane}`, "data-lane": lane, children: pick(label ?? LANE_LABELS[lane], lang) }),
+    provenance && /* @__PURE__ */ jsx("span", { className: `badge caos-prov caos-prov-${provenance}`, "data-provenance": provenance, children: pick(PROVENANCE_LABELS[provenance], lang) })
+  ] });
+}
+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;
+  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: [
+        pick(title ?? { en: "Variants", es: "Variantes" }, lang),
+        " (",
+        variants.length,
+        ")"
+      ] }),
+      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(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": v.id === active?.id,
+        disabled: v.disabled,
+        className: v.id === active?.id ? "chip on" : "chip",
+        onClick: () => onSelect(v.id),
+        children: pick(v.label, lang)
+      },
+      v.id
+    )) }),
+    active?.note && /* @__PURE__ */ jsx("p", { className: "caos-variant-note", children: pick(active.note, lang) })
+  ] });
+}
+var MAX_WORKBENCH_GROUPS = MAX_PEER_TABS;
+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 lang = useShellLang();
+  const variantId = variants?.activeId;
+  const stateKey = useMemo(
+    () => makeStateKey({ caseId, variantId: variantId ?? null, source: source ?? null, controls: controls ?? {} }),
+    [caseId, variantId, source, controls]
+  );
+  const tabs = groups.map((g) => ({ id: g.id, label: pick(g.label, lang), content: panel(g.id, g.lane, g.provenance, g.content) }));
+  if (compare) {
+    tabs.push({
+      id: "compare",
+      label: pick(compare.label ?? { en: "Compare variants", es: "Comparar variantes" }, lang),
+      content: panel("compare", compare.lane, compare.provenance, compare.content)
+    });
+  }
+  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 })
+  });
+  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 railHead = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases }),
+    variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
+  ] }) : null;
+  return /* @__PURE__ */ jsx(WorkbenchStateContext.Provider, { value: { stateKey, caseId, variantId, source }, children: /* @__PURE__ */ jsx(WorkbenchLayout, { rail: rail ?? null, railHead, railLabel, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "caos-cw",
+      "data-case-workbench": "",
+      "data-group-count": tabs.length,
+      "data-case": caseId,
+      "data-variant": variantId ?? "",
+      "data-source": source ?? "",
+      "data-state-key": stateKey,
+      "data-replay-only": replayOnly ? "1" : void 0,
+      children: /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          tabs,
+          value: group,
+          onChange: onGroupChange,
+          ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang)
+        }
+      )
+    }
+  ) }) });
+}
+function toneOf(it) {
+  if (it.tone) return it.tone;
+  if (!it.better || it.value === null || it.value === void 0 || !Number.isFinite(it.value)) return "neutral";
+  const v = it.value;
+  const higher = it.better === "higher";
+  if (it.bad !== void 0 && (higher ? v <= it.bad : v >= it.bad)) return "bad";
+  if (it.good !== void 0 && (higher ? v >= it.good : v <= it.good)) return "good";
+  if (it.good !== void 0 || it.bad !== void 0) return "warn";
+  return "neutral";
+}
+function checkItem(it, where) {
+  if (!it.unit && !it.unitless && it.text === void 0) {
+    console.error(`[caos-app-shell] readout "${where}" has no unit; give a unit or set unitless`);
+  }
+  if (typeof it.value === "number" && Number.isNaN(it.value)) {
+    console.error(`[caos-app-shell] readout "${where}" received NaN; pass null when the value is not available`);
+  }
+}
+function Readout({ items, title, lane, provenance, dataKey }) {
+  const lang = useShellLang();
+  const ws = useWorkbenchState();
+  const stale = isStale(dataKey, ws);
+  if (!lane || !provenance) console.error("[caos-app-shell] Readout needs lane and provenance");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: stale ? "caos-readout caos-stale" : "caos-readout",
+      "data-readout": "",
+      "data-lane": lane,
+      "data-provenance": provenance,
+      "data-state-key": dataKey ?? "",
+      "data-stale": stale ? "1" : "0",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "caos-readout-head", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "caos-readout-title", children: pick(title, lang) }),
+          /* @__PURE__ */ jsx(LaneBadge, { lane, provenance })
+        ] }),
+        /* @__PURE__ */ jsx("dl", { children: items.map((it, i) => {
+          const label = pick(it.label, lang);
+          checkItem(it, label);
+          const shown = it.text !== void 0 ? pick(it.text, lang) : formatNumber(it.value, lang, it.format ?? {});
+          return /* @__PURE__ */ jsxs("div", { className: `caos-readout-row tone-${toneOf(it)}`, title: pick(it.hint, lang) || void 0, children: [
+            /* @__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)
+              ] })
+            ] })
+          ] }, i);
+        }) }),
+        stale && /* @__PURE__ */ jsx("p", { className: "caos-stale-note", children: lang === "es" ? "Recalculando para la selecci\xF3n actual" : "Recomputing for the current selection" })
+      ]
+    }
+  );
+}
+function Gauge({ title, value, min, max, zones, unit, unitless, format }) {
+  const lang = useShellLang();
+  checkItem({ value, unit, unitless }, pick(title, lang));
+  const span = max - min || 1;
+  const finite = value !== null && value !== void 0 && Number.isFinite(value);
+  const pos = (v) => `${Math.min(100, Math.max(0, (v - min) / span * 100))}%`;
+  const fmt = (v) => formatNumber(v, lang, format ?? {});
+  return /* @__PURE__ */ jsxs("div", { className: "caos-gauge", "data-gauge": "", children: [
+    /* @__PURE__ */ jsx("p", { className: "caos-gauge-title", children: pick(title, lang) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "caos-gauge-track",
+        role: "meter",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": finite ? value : void 0,
+        "aria-label": pick(title, lang),
+        children: [
+          zones.map((z, i) => /* @__PURE__ */ jsx("span", { className: `caos-gauge-zone tone-${z.tone}`, style: { left: pos(z.from), width: `calc(${pos(z.to)} - ${pos(z.from)})` } }, i)),
+          finite && /* @__PURE__ */ jsx("span", { className: "caos-gauge-needle", style: { left: pos(value) } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "caos-gauge-scale", children: [
+      /* @__PURE__ */ jsx("span", { children: fmt(min) }),
+      /* @__PURE__ */ jsxs("span", { className: "caos-gauge-value", children: [
+        fmt(value),
+        finite && unit ? ` ${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" }),
+      pick(z.label, lang)
+    ] }, i)) })
+  ] });
+}
+function Verdict(props) {
+  const lang = useShellLang();
+  let tone;
+  let text;
+  if ("code" in props) {
+    const m = props.messages[props.code];
+    if (!m) console.error(`[caos-app-shell] Verdict code "${props.code}" has no message`);
+    tone = m?.tone ?? "neutral";
+    text = m ? pick(m.text, lang) : lang === "es" ? "estado desconocido" : "unknown status";
+  } else {
+    tone = props.tone;
+    text = pick(props.verdict, lang);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `caos-verdict tone-${tone}${props.compact ? " compact" : ""}`, "data-verdict": tone, children: [
+    /* @__PURE__ */ jsx("p", { className: "caos-verdict-title", children: pick(props.title, lang) }),
+    /* @__PURE__ */ jsx("p", { className: "caos-verdict-text", children: text }),
+    props.children
+  ] });
+}
+function PlotCard({ title, lane, provenance, dataKey, actions, note, fill, children }) {
+  const lang = useShellLang();
+  const ws = useWorkbenchState();
+  const stale = isStale(dataKey, ws);
+  const name = pick(title, lang);
+  if (!lane || !provenance) console.error(`[caos-app-shell] PlotCard "${name}" needs lane and provenance`);
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: ["caos-plot", fill ? "fill" : "", stale ? "caos-stale" : ""].filter(Boolean).join(" "),
+      "data-plot": name,
+      "data-lane": lane,
+      "data-provenance": provenance,
+      "data-state-key": dataKey ?? "",
+      "data-stale": stale ? "1" : "0",
+      children: [
+        /* @__PURE__ */ jsxs("figcaption", { className: "caos-plot-head", children: [
+          /* @__PURE__ */ jsx("span", { className: "caos-plot-title", children: name }),
+          /* @__PURE__ */ jsxs("span", { className: "caos-plot-actions", children: [
+            actions,
+            /* @__PURE__ */ jsx(LaneBadge, { lane, provenance })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "caos-plot-body", children: [
+          /* @__PURE__ */ jsx(PanelBoundary, { panel: name, children }),
+          stale && /* @__PURE__ */ jsx("div", { className: "caos-stale-overlay", role: "status", children: lang === "es" ? "Recalculando para la selecci\xF3n actual" : "Recomputing for the current selection" })
+        ] }),
+        note && /* @__PURE__ */ jsx("p", { className: "caos-plot-note", children: pick(note, lang) })
+      ]
+    }
+  );
+}
+function Knob({ id, label, value, min, max, step, unit, hint, format, disabled, onChange }) {
+  const lang = useShellLang();
+  const inputId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "caos-knob", "data-control": id, title: pick(hint, lang) || void 0, children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "caos-knob-head", children: [
+      /* @__PURE__ */ jsx("span", { children: pick(label, lang) }),
+      /* @__PURE__ */ jsxs("span", { className: "caos-knob-value", children: [
+        formatNumber(value, lang, format ?? {}),
+        unit ? ` ${pick(unit, lang)}` : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        className: "range",
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        disabled,
+        onChange: (e) => onChange(Number(e.target.value))
+      }
+    )
+  ] });
+}
+function ChipGroup({ id, label, options, value, onChange }) {
+  const lang = useShellLang();
+  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(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": o.id === value,
+        className: o.id === value ? "chip on" : "chip",
+        disabled: o.disabled,
+        title: pick(o.hint, lang) || void 0,
+        onClick: () => onChange(o.id),
+        children: pick(o.label, lang)
+      },
+      o.id
+    )) })
+  ] });
+}
 
-export { AppShell, ArchitectureModal, Callout, CaseSelector, CitationsProvider, Cite, Equation, Figure, FocusShell, InlineMath, LanguageToggle, ReferenceList, Refs, SubTabs, Tabs, ThemeToggle, WorkbenchShell, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, groupByCategory, readCaseParam, readTheme, sourcesPresent, useLangStore, usePausedViz, useShellLang, useThemeStore, withCaseParam };
+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 };