@fasl-work/caos-app-shell 0.19.12 → 0.20.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, barExtent, clipExtent, allIntegers, bandsOf, windowRange, windowZoomed, unusedLegendTones, NOT_AVAILABLE, formatNumber, widestLabel, fitLabel, GROUP_MARGIN, axisTitleFits, wrapLines, formatTicks, niceTicks, textWidth, repeatedLabels, chartSummary, NBSP, CHART_ROLE, ChartSummary, ChartDataTable, ResetZoomButton, memberSlots, wheelFactor, pinchState, DRAG_THRESHOLD, panRange, brushWindow, keyAction, KEY_ZOOM, stepIndex, KEY_PAN, stepWindow, roundWindow, zoomRange, categoryAt, memberAt } from './chunk-FXPSZD6X.js';
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel } from './chunk-FXPSZD6X.js';
+import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, barExtent, clipExtent, allIntegers, bandsOf, windowRange, windowZoomed, unusedLegendTones, NOT_AVAILABLE, formatNumber, widestLabel, fitLabel, GROUP_MARGIN, axisTitleFits, wrapLines, formatTicks, niceTicks, textWidth, repeatedLabels, chartSummary, NBSP, CHART_ROLE, ChartSummary, ChartDataTable, ResetZoomButton, memberSlots, wheelFactor, pinchState, DRAG_THRESHOLD, panRange, brushWindow, keyAction, KEY_ZOOM, stepIndex, KEY_PAN, stepWindow, roundWindow, zoomRange, categoryAt, memberAt } from './chunk-FPPJQC2J.js';
+export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel } from './chunk-FPPJQC2J.js';
 import { APP_ROUTE, LANDING_ROUTE } from './chunk-33WTUQ7Q.js';
 export { APP_ROUTE, LANDING_ROUTE, LANG_STORAGE_KEY, STANDARD_ROUTES, THEME_BOOT_SCRIPT, THEME_STORAGE_KEY } from './chunk-33WTUQ7Q.js';
 import { createContext, Component, useState, useRef, useId, useEffect, useLayoutEffect, useCallback, useContext, useMemo, Children, isValidElement } from 'react';
@@ -7,6 +7,8 @@ import { useInRouterContext, NavLink, useLocation, Navigate, Link } from 'react-
 import { Sun, Moon, Languages, Boxes, CodeXml, Globe, Briefcase, Info, ChevronLeft, ChevronRight, Maximize2, RotateCw } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import katex from 'katex';
+import { createStore } from 'zustand/vanilla';
+import { useStore } from 'zustand';
 
 // src/lib/chrome.ts
 var CHROME = {
@@ -4145,5 +4147,302 @@ function ViewsRow({ children, shares }) {
     return /* @__PURE__ */ jsx("div", { className: "caos-views-col", "data-share": share ?? 1, style: share && share > 0 ? { flexGrow: share } : void 0, children: child }, i);
   }) });
 }
+var DEFAULT_LABELS = {
+  steps: { en: "Story steps", es: "Pasos de la historia" },
+  previous: { en: "Previous step", es: "Paso anterior" },
+  next: { en: "Next step", es: "Paso siguiente" },
+  play: { en: "Play story", es: "Reproducir historia" },
+  pause: { en: "Pause story", es: "Pausar historia" },
+  exit: { en: "Return to exploration", es: "Volver a explorar" }
+};
+function StoryFrame({ steps, activeId, onStepChange, onExit, labels = {}, autoAdvanceMs = 5e3, className }) {
+  const lang = useShellLang();
+  const [playing, setPlaying] = useState(false);
+  const activeIndex = Math.max(0, steps.findIndex((step) => step.id === activeId));
+  const active = steps[activeIndex];
+  const copy = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+  useEffect(() => {
+    if (steps.length < 3 || steps.length > 6) console.error("[caos-app-shell] A showcase story has 3 to 6 steps (ADR-0082 rule 3)");
+  }, [steps.length]);
+  useEffect(() => {
+    if (!playing || steps.length < 2) return;
+    const timer = window.setTimeout(() => {
+      if (activeIndex >= steps.length - 1) setPlaying(false);
+      else onStepChange(steps[activeIndex + 1].id);
+    }, Math.max(1e3, autoAdvanceMs));
+    return () => window.clearTimeout(timer);
+  }, [activeIndex, autoAdvanceMs, onStepChange, playing, steps]);
+  function move(delta) {
+    setPlaying(false);
+    const next = Math.max(0, Math.min(steps.length - 1, activeIndex + delta));
+    if (steps[next]) onStepChange(steps[next].id);
+  }
+  function onKeyDown(event) {
+    if (event.target !== event.currentTarget) return;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setPlaying(false);
+      onStepChange(steps[0].id);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setPlaying(false);
+      onStepChange(steps[steps.length - 1].id);
+    } else if (event.key === " ") {
+      event.preventDefault();
+      setPlaying((value) => !value);
+    }
+  }
+  if (!active) return null;
+  return /* @__PURE__ */ jsxs("section", { className: ["caos-story", "page-body", "wide", className].filter(Boolean).join(" "), "data-story": "", "data-story-step": active.id, "data-step-accent": active.accent, "aria-label": pick(copy.steps, lang), tabIndex: 0, onKeyDown, children: [
+    /* @__PURE__ */ jsxs("header", { className: "caos-story-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "caos-story-heading", children: [
+        /* @__PURE__ */ jsxs("span", { className: "caos-story-verb", children: [
+          active.number.toString().padStart(2, "0"),
+          " \xB7 ",
+          pick(active.verb, lang)
+        ] }),
+        /* @__PURE__ */ jsx("h1", { className: "caos-story-headline", "data-story-headline": "", children: pick(active.headline, lang) }),
+        /* @__PURE__ */ jsx("p", { title: pick(active.summary, lang), children: pick(active.summary, lang) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "caos-story-actions", children: [
+        /* @__PURE__ */ jsxs("div", { className: "caos-story-controls", "aria-label": pick(copy.steps, lang), children: [
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(-1), disabled: activeIndex === 0, children: pick(copy.previous, lang) }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => {
+            setPlaying((value) => !value);
+          }, "aria-pressed": playing, children: pick(playing ? copy.pause : copy.play, lang) }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(1), disabled: activeIndex === steps.length - 1, children: pick(copy.next, lang) })
+        ] }),
+        onExit && /* @__PURE__ */ jsx("button", { type: "button", className: "caos-story-exit", onClick: () => {
+          setPlaying(false);
+          onExit();
+        }, children: pick(copy.exit, lang) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("nav", { className: "caos-story-stepper", role: "tablist", "aria-label": pick(copy.steps, lang), children: steps.map((step) => /* @__PURE__ */ jsxs(Link, { role: "tab", "aria-selected": step.id === active.id, "aria-current": step.id === active.id ? "step" : void 0, to: step.href, "data-story-link": step.id, className: step.id === active.id ? "caos-story-step is-active" : "caos-story-step", onClick: () => {
+      setPlaying(false);
+      onStepChange(step.id);
+    }, children: [
+      /* @__PURE__ */ jsx("span", { className: "caos-story-step-number", children: step.number }),
+      /* @__PURE__ */ jsx("span", { className: "caos-story-step-verb", title: pick(step.verb, lang), children: pick(step.verb, lang) }),
+      /* @__PURE__ */ jsx("span", { className: "caos-story-step-headline", title: pick(step.headline, lang), children: pick(step.headline, lang) })
+    ] }, step.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: "caos-story-layout", "data-stage-layout": "", "data-story-transition": active.id, children: [
+      /* @__PURE__ */ jsx("section", { className: "caos-story-stage", "data-stage": "", "data-drawn": "1", "aria-label": pick(active.verb, lang), onPointerDown: () => setPlaying(false), onKeyDownCapture: (event) => {
+        if (event.target !== event.currentTarget) setPlaying(false);
+      }, children: active.stage }),
+      /* @__PURE__ */ jsx("aside", { className: "caos-story-panel", "data-stage-panel": "", "aria-label": pick(active.verb, lang), onPointerDown: () => setPlaying(false), onKeyDownCapture: (event) => {
+        if (event.target !== event.currentTarget) setPlaying(false);
+      }, children: active.panel })
+    ] }, active.id)
+  ] });
+}
+var overlaps = (a, b) => a.left < b.left + b.width && a.left + a.width > b.left && a.top < b.top + b.height && a.top + a.height > b.top;
+var coversAnchor = (box, x, y, clearance = 8) => x >= box.left - clearance && x <= box.left + box.width + clearance && y >= box.top - clearance && y <= box.top + box.height + clearance;
+function layoutSceneCallouts(items, width, height, compact = false) {
+  const w = compact ? 142 : 184;
+  const h = compact ? 56 : 68;
+  const margin = 8;
+  const boxes = [];
+  for (const item of items) {
+    const x = Math.max(0, Math.min(width, item.anchor.x * width));
+    const y = Math.max(0, Math.min(height, item.anchor.y * height));
+    const d = compact ? 82 : 112;
+    const candidates = [
+      [x + d, y - h / 2],
+      [x - d - w, y - h / 2],
+      [x + d, y - h / 2 - h - 12],
+      [x - d - w, y - h / 2 - h - 12],
+      [x - w / 2, y - d - h],
+      [x - w / 2, y + d]
+    ].map(([left, top]) => ({ id: item.id, left: Math.max(margin, Math.min(width - w - margin, left)), top: Math.max(margin, Math.min(height - h - margin, top)), width: w, height: h, anchorX: x, anchorY: y }));
+    const ranked = candidates.map((candidate) => ({ candidate, score: boxes.reduce((score, box) => score + (overlaps(candidate, box) ? 1e6 : 0), 0) + items.reduce((score, subject) => score + (coversAnchor(candidate, subject.anchor.x * width, subject.anchor.y * height) ? 1e7 : 0), 0) + Math.hypot(candidate.left + w / 2 - x, candidate.top + h / 2 - y) }));
+    ranked.sort((a, b) => a.score - b.score);
+    boxes.push(ranked[0].candidate);
+  }
+  return boxes;
+}
+function layoutCalloutHeader(items, width, height, compact = false) {
+  const w = compact ? 164 : 184, h = compact ? 54 : 68, margin = 8, gap = compact ? 6 : 8;
+  const columns = width < 520 ? 2 : Math.max(1, Math.min(items.length, Math.floor((width - margin * 2 + gap) / (w + gap))));
+  return items.map((item, index) => {
+    const column = index % columns, row = Math.floor(index / columns), count = Math.min(columns, items.length - row * columns);
+    const cell = (width - margin * 2 - gap * (count - 1)) / count;
+    return { id: item.id, left: margin + column * (cell + gap) + (cell - w) / 2, top: margin + row * (h + gap), width: w, height: h, anchorX: item.anchor.x * width, anchorY: item.anchor.y * height };
+  });
+}
+function SceneCallouts({ items, className, placement = "anchored" }) {
+  const lang = useShellLang();
+  const host = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    const node = host.current;
+    if (!node) return;
+    const observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect;
+      if (rect) setSize({ width: rect.width, height: rect.height });
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const boxes = useMemo(() => {
+    if (placement === "anchored") return layoutSceneCallouts(items, size.width, size.height, size.width < 640);
+    return layoutCalloutHeader(items, size.width, size.height, size.width < 640);
+  }, [items, placement, size]);
+  return /* @__PURE__ */ jsxs("div", { ref: host, className: ["caos-callout-layer", className].filter(Boolean).join(" "), "aria-label": lang === "es" ? "Valores fijados a los componentes" : "Values anchored to components", "data-caos-callout-layer": "", "data-placement": placement, children: [
+    /* @__PURE__ */ jsx("svg", { className: "caos-callout-leaders", "aria-hidden": "true", viewBox: `0 0 ${Math.max(1, size.width)} ${Math.max(1, size.height)}`, preserveAspectRatio: "none", children: boxes.map((box) => /* @__PURE__ */ jsx("line", { x1: box.anchorX, y1: box.anchorY, x2: box.left + box.width / 2, y2: box.top + box.height / 2, "data-caos-callout-leader": box.id }, box.id)) }),
+    boxes.map((box) => {
+      const item = items.find((candidate) => candidate.id === box.id);
+      return /* @__PURE__ */ jsxs("article", { className: "caos-scene-callout", "data-caos-callout": item.id, "data-callout-value": item.value, "data-callout-unit": pick(item.unit, lang), "data-callout-state": item.state, "data-callout-source": pick(item.source, lang), "data-callout-anchor-x": item.anchor.x, "data-callout-anchor-y": item.anchor.y, style: { left: box.left, top: box.top, width: box.width, minHeight: box.height }, children: [
+        /* @__PURE__ */ jsx("span", { className: "caos-callout-eyebrow", title: pick(item.eyebrow, lang), children: pick(item.eyebrow, lang) }),
+        /* @__PURE__ */ jsxs("strong", { title: `${item.value} ${pick(item.unit, lang)}`, children: [
+          item.value,
+          " ",
+          /* @__PURE__ */ jsx("small", { children: pick(item.unit, lang) })
+        ] }),
+        item.trend && /* @__PURE__ */ jsx("span", { className: `caos-callout-trend trend-${item.trend}`, "aria-label": item.trend, children: item.trend === "up" ? "\u2191" : item.trend === "down" ? "\u2193" : "\u2192" }),
+        /* @__PURE__ */ jsx("small", { className: "caos-callout-source", title: pick(item.source, lang), children: pick(item.source, lang) })
+      ] }, box.id);
+    })
+  ] });
+}
+function Scene3DFrame({ label, legendLabel = "Scene legend", children, controls, legend, status, className }) {
+  return /* @__PURE__ */ jsxs("section", { className: ["caos-scene3d-frame", className].filter(Boolean).join(" "), "data-caos-scene3d-frame": "", children: [
+    controls && /* @__PURE__ */ jsx("div", { className: "caos-scene3d-controls", "data-caos-scene3d-controls": "", children: controls }),
+    /* @__PURE__ */ jsxs("div", { className: "caos-scene3d-viewport", role: "region", "aria-label": label, "data-caos-scene3d-viewport": "", children: [
+      /* @__PURE__ */ jsx("div", { className: "caos-scene3d-renderer", "data-caos-scene3d-renderer": "", children }),
+      status && /* @__PURE__ */ jsx("div", { className: "caos-scene3d-status", role: "status", children: status }),
+      legend && /* @__PURE__ */ jsx("aside", { className: "caos-scene3d-legend", "aria-label": legendLabel, children: legend })
+    ] })
+  ] });
+}
+var LinkedViewContext = createContext(null);
+function createLinkedViewStore(initial = {}) {
+  return createStore((set) => ({ selectedId: initial.selectedId ?? null, cursor: initial.cursor ?? null, seriesId: initial.seriesId ?? null, origin: "external", select: (selectedId, origin) => set({ selectedId, origin }), scrub: (cursor) => set({ cursor }), showSeries: (seriesId) => set({ seriesId }) }));
+}
+function LinkedViewProvider({ children, initial }) {
+  const storeRef = useRef(null);
+  if (!storeRef.current) storeRef.current = createLinkedViewStore(initial);
+  return /* @__PURE__ */ jsx(LinkedViewContext.Provider, { value: storeRef.current, children });
+}
+function useLinkedView(selector) {
+  const store = useContext(LinkedViewContext);
+  if (!store) throw new Error("useLinkedView must be inside LinkedViewProvider");
+  return useStore(store, selector);
+}
+function useLinkedItem(id, side) {
+  const selected = useLinkedView((state) => state.selectedId === id);
+  const select = useLinkedView((state) => state.select);
+  return {
+    "data-linked-id": id,
+    "data-linked-view": side,
+    "data-linked-selected": selected ? "true" : "false",
+    "aria-pressed": selected,
+    onClick: () => select(id, side)
+  };
+}
+function useLinkedCursor() {
+  const cursor = useLinkedView((state) => state.cursor);
+  const scrub = useLinkedView((state) => state.scrub);
+  const onChange = (event) => scrub(Number(event.currentTarget.value));
+  return { cursor, scrub, inputProps: { "data-linked-cursor": "", value: cursor ?? 0, onChange }, markerProps: { "data-linked-cursor-marker": "", "data-linked-cursor-position": cursor ?? "" } };
+}
+
+// src/workbench/motion.ts
+function prefersReducedMotion() {
+  return typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+async function runStagedTransition(stages, options = {}) {
+  const reduced = options.reducedMotion ?? prefersReducedMotion();
+  for (const [index, stage] of stages.entries()) {
+    if (options.signal?.aborted) return;
+    options.onStage?.(index);
+    stage.run();
+    if (!reduced && (stage.durationMs ?? 240) > 0) await new Promise((resolve2) => {
+      const timer = setTimeout(resolve2, Math.min(stage.durationMs ?? 240, 1500));
+      options.signal?.addEventListener("abort", () => {
+        clearTimeout(timer);
+        resolve2();
+      }, { once: true });
+    });
+  }
+}
+function flyCamera(frame, from, to, options = {}) {
+  const duration = options.reducedMotion ?? prefersReducedMotion() ? 0 : Math.min(1500, Math.max(600, options.durationMs ?? 900));
+  if (!duration) {
+    frame.setPosition(...to.position);
+    frame.lookAt(...to.target);
+    options.onFrame?.(1);
+    return Promise.resolve();
+  }
+  return new Promise((resolve2) => {
+    const start = typeof performance !== "undefined" ? performance.now() : Date.now();
+    const tick = (now) => {
+      if (options.signal?.aborted) {
+        resolve2();
+        return;
+      }
+      const t2 = Math.max(0, Math.min(1, (now - start) / duration));
+      const eased = t2 * t2 * (3 - 2 * t2);
+      const mix = (a, b) => a + (b - a) * eased;
+      frame.setPosition(...from.position.map((v, i) => mix(v, to.position[i])));
+      frame.lookAt(...from.target.map((v, i) => mix(v, to.target[i])));
+      options.onFrame?.(t2);
+      if (t2 < 1) requestAnimationFrame(tick);
+      else resolve2();
+    };
+    requestAnimationFrame(tick);
+  });
+}
+
+// src/workbench/scene3d.ts
+function cameraForBounds(bounds, aspect, fovDegrees = 42, margin = 1.22) {
+  const center = {
+    x: (bounds.min.x + bounds.max.x) / 2,
+    y: (bounds.min.y + bounds.max.y) / 2,
+    z: (bounds.min.z + bounds.max.z) / 2
+  };
+  const size = {
+    x: Math.max(0.01, bounds.max.x - bounds.min.x),
+    y: Math.max(0.01, bounds.max.y - bounds.min.y),
+    z: Math.max(0.01, bounds.max.z - bounds.min.z)
+  };
+  const vertical = Math.max(size.y, size.z / Math.max(0.1, aspect));
+  const distance = vertical / 2 / Math.tan(Math.max(10, Math.min(100, fovDegrees)) * Math.PI / 360) * margin;
+  const horizontal = Math.max(size.x, size.z) * 0.76;
+  return { target: [center.x, center.y, center.z], position: [center.x + distance * 0.65, center.y + distance * 0.48, center.z + Math.max(distance, horizontal)], distance };
+}
+function flowSpeed(rate, referenceRate) {
+  if (!Number.isFinite(rate) || !Number.isFinite(referenceRate) || rate <= 0 || referenceRate <= 0) return 0;
+  return Math.min(1.25, 0.16 + 0.32 * Math.log1p(rate / referenceRate));
+}
+function explodedOffsets(parts, scale = 1) {
+  const finiteScale = Number.isFinite(scale) ? Math.max(0, scale) : 0;
+  const center = parts.reduce((sum, part) => ({ x: sum.x + part.center.x, y: sum.y + part.center.y, z: sum.z + part.center.z }), { x: 0, y: 0, z: 0 });
+  if (parts.length) {
+    center.x /= parts.length;
+    center.y /= parts.length;
+    center.z /= parts.length;
+  }
+  return Object.fromEntries(parts.map(({ id, center: p }) => {
+    const dx = p.x - center.x, dy = p.y - center.y, dz = p.z - center.z;
+    const magnitude = Math.hypot(dx, dy, dz) || 1;
+    return [id, { x: dx / magnitude * finiteScale, y: dy / magnitude * finiteScale, z: dz / magnitude * finiteScale }];
+  }));
+}
+function detailTier(distance) {
+  if (!Number.isFinite(distance) || distance < 0) return "high";
+  if (distance < 20) return "high";
+  if (distance < 65) return "medium";
+  return "low";
+}
+function sceneEnvironment(theme) {
+  return theme === "dark" ? { background: "#101a22", ground: "#202b33", key: { color: "#fff0d5", intensity: 2.1, castShadow: true }, fill: { color: "#98c5db", intensity: 0.8 }, ambient: { color: "#c9d7df", intensity: 1.1 } } : { background: "#e9eef0", ground: "#d6dee1", key: { color: "#fff8e9", intensity: 1.7, castShadow: true }, fill: { color: "#8eabb9", intensity: 0.65 }, ambient: { color: "#ffffff", intensity: 1.35 } };
+}
 
-export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CardDeck, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, DocPage, DocReferences, DocRefsScope, DocSection, EXECUTIVE_SCHEMA_VERSION, Equation, ExecutiveView, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, FlipCard, FocusShell, Gauge, Glossary, InlineMath, Knob, Landing, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Question, Readout, ReferenceList, Refs, Stat, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, ViewsRow, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, groupByCategory, isStale, makeStateKey, perPageFor, readCaseParam, removeQueryParam, replaceQueryParam, sourcesPresent, useFocusMode, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, validateExecutive, viewParamOf, withCaseParam };
+export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CardDeck, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, DocPage, DocReferences, DocRefsScope, DocSection, EXECUTIVE_SCHEMA_VERSION, Equation, ExecutiveView, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, FlipCard, FocusShell, Gauge, Glossary, InlineMath, Knob, Landing, LaneBadge, LanguageToggle, LinkedViewProvider, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Question, Readout, ReferenceList, Refs, Scene3DFrame, SceneCallouts, Stat, StoryFrame, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, ViewsRow, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, cameraForBounds, caseKind, caseTooltip, casesInSource, createLinkedViewStore, createVizLoop, deckPosition, deckWindow, detailTier, explodedOffsets, firstAppearance, flowSpeed, flyCamera, groupByCategory, isStale, layoutSceneCallouts, makeStateKey, perPageFor, prefersReducedMotion, readCaseParam, removeQueryParam, replaceQueryParam, runStagedTransition, sceneEnvironment, sourcesPresent, useFocusMode, useLinkedCursor, useLinkedItem, useLinkedView, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, validateExecutive, viewParamOf, withCaseParam };

package/dist/{tokens-BvU9bFPw.d.ts → tokens-CIdhVv-t.d.ts}

@@ -86,7 +86,7 @@ declare function repeatedLabels(labels: readonly (string | null | undefined)[]):
  * 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", "--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"];
+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-step-1", "--color-step-2", "--color-step-3", "--color-step-4", "--color-step-5", "--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}`>;

package/gate/inpage.mjs

@@ -7,6 +7,34 @@
 export function installLib() {
   const G = (window.__caosGate = window.__caosGate || {});
   G.raf = 0;
+  const storyPerformance = { lcp: null, events: [] };
+  try {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) storyPerformance.lcp = Math.max(storyPerformance.lcp ?? 0, entry.startTime + entry.duration);
+    }).observe({ type: 'largest-contentful-paint', buffered: true });
+  } catch { /* Chromium reference runner supports LCP; G21 reports it unavailable if not. */ }
+  try {
+    new PerformanceObserver((list) => {
+      storyPerformance.events.push(...list.getEntries().filter((entry) => entry.interactionId > 0).map((entry) => ({ name: entry.name, duration: entry.duration })));
+    }).observe({ type: 'event', buffered: true, durationThreshold: 16 });
+  } catch { /* G21 reports no interaction samples as an unmeasured requirement. */ }
+  G.resetStoryInteractions = () => { storyPerformance.events = []; };
+  G.storyPerformanceFacts = () => ({
+    lcp: storyPerformance.lcp,
+    events: storyPerformance.events.slice(),
+    assets3d: performance.getEntriesByType('resource').filter((entry) => /\.(?:glb|gltf|bin|ktx2|basis|draco|obj|mtl|stl|fbx)(?:$|\?)/i.test(entry.name))
+      .map((entry) => ({ name: entry.name, bytes: entry.transferSize || entry.encodedBodySize || 0 })),
+  });
+  G.sampleStoryFrames = (duration = 1600) => new Promise((resolve) => {
+    const times = [];
+    const start = performance.now();
+    const tick = (now) => { times.push(now); if (now - start < duration) requestAnimationFrame(tick); else {
+      const deltas = times.slice(1).map((time, index) => time - times[index]).filter((delta) => delta > 0).sort((a, b) => a - b);
+      const percentile = (q) => deltas.length ? deltas[Math.min(deltas.length - 1, Math.floor(q * (deltas.length - 1)))] : null;
+      resolve({ frames: deltas.length, median: percentile(.5) ? 1000 / percentile(.5) : null, p05: percentile(.95) ? 1000 / percentile(.95) : null });
+    } };
+    requestAnimationFrame(tick);
+  });
   // The smallest rendered size of an illustration label (EXEC_LIMITS.minLabelPx of gate/areas.mjs; test/executive.test.ts keeps them equal).
   const EXEC_MIN_LABEL_PX = 9;
   /** Local text bounds mapped into the outer illustration's SVG user space, not screen pixels.
@@ -1514,6 +1542,46 @@ export function installLib() {
     };
   };
 
+  /** ADR-0082 showcase story, its docked stage/panel and the rendered geometry of its anchored callouts (G21). */
+  G.showcaseFacts = () => {
+    const story = document.querySelector('[data-story]');
+    const box = (element) => {
+      if (!element) return null;
+      const r = element.getBoundingClientRect();
+      return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height };
+    };
+    const stage = story?.querySelector('[data-stage]');
+    const layout = story?.querySelector('[data-stage-layout]');
+    const callouts = [...(stage?.querySelectorAll('[data-caos-callout]') ?? [])].filter(visible).map((element) => ({
+      id: element.getAttribute('data-caos-callout'), value: element.getAttribute('data-callout-value'), unit: element.getAttribute('data-callout-unit'),
+      state: element.getAttribute('data-callout-state'), source: element.getAttribute('data-callout-source'),
+      anchor: { x: Number(element.getAttribute('data-callout-anchor-x')), y: Number(element.getAttribute('data-callout-anchor-y')) }, box: box(element),
+    }));
+    const links = [...(story?.querySelectorAll('[data-story-link]') ?? [])].filter(visible).map((element) => ({ id: element.getAttribute('data-story-link'), href: element.getAttribute('href'), active: element.getAttribute('aria-selected') === 'true' }));
+    const linked = [...(story?.querySelectorAll('[data-linked-id][data-linked-view]') ?? [])].filter(visible).map((element) => ({ id: element.getAttribute('data-linked-id'), view: element.getAttribute('data-linked-view'), selected: element.getAttribute('data-linked-selected') === 'true', box: box(element) }));
+    const cursors = [...(story?.querySelectorAll('[data-linked-cursor-marker]') ?? [])].filter(visible).map((element) => element.getAttribute('data-linked-cursor-position'));
+    const cursorInputs = [...(story?.querySelectorAll('[data-linked-cursor]') ?? [])].filter(visible).map((element) => ({ value: element.value ?? element.getAttribute('value') ?? '', type: element.type ?? '' }));
+    const headline = story?.querySelector('[data-story-headline]');
+    return {
+      present: Boolean(story),
+      step: story?.getAttribute('data-story-step') ?? null,
+      count: links.length,
+      links,
+      linked,
+      cursors,
+      cursorInputs,
+      headline: headline?.textContent?.trim() ?? '',
+      stage: box(stage),
+      panel: box(story?.querySelector('[data-stage-panel]')),
+      layout: box(layout),
+      calls: callouts,
+      headlineWords: (headline?.textContent?.trim() ?? '').split(/\s+/).filter(Boolean).length,
+      motion: (() => { const stageMotion = stage?.parentElement?.getAttribute('data-story-transition'); const target = story?.querySelector('[data-story-transition] > .caos-story-stage'); if (!target) return null; const style = getComputedStyle(target); return { key: stageMotion, animationName: style.animationName, animationDuration: style.animationDuration, animationDelay: style.animationDelay, opacity: style.opacity, transform: style.transform }; })(),
+      viewport: { width: innerWidth, height: innerHeight },
+      scroll: { width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight },
+    };
+  };
+
   /** Animation frames and DOM mutations over a window at rest (G8). */
   G.idle = (ms) =>
     new Promise((done) => {