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

package/README.md

@@ -13,58 +13,97 @@ fix lands in one place.
 ```bash
 npm i @fasl-work/caos-app-shell
 # peer deps (the app provides them):
-npm i react react-dom react-router-dom lucide-react katex zustand
+npm i react react-dom react-router lucide-react katex zustand
+# optional: the house chart and the measured gate
+npm i uplot && npm i -D playwright
 ```
 
 ## Use
 
+```html
+<!-- index.html: apply the stored theme and language before the first frame (THEME_BOOT_SCRIPT, ADR-0011) -->
+<script>/* paste THEME_BOOT_SCRIPT here, or inject it at build */</script>
+```
+
 ```tsx
 // main.tsx
-import { applyTheme, readTheme } from "@fasl-work/caos-app-shell";
 import "@fasl-work/caos-app-shell/styles.css";
-applyTheme(readTheme()); // (an inline script in index.html should also set data-theme pre-paint)
-
-// router / app
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { AppShell, type ShellConfig } from "@fasl-work/caos-app-shell";
+import "@fasl-work/caos-app-shell/chart.css"; // only with the chart entry
+import { BrowserRouter, Routes, Route } from "react-router";
+import { AppShell, STANDARD_ROUTES, type ShellConfig } from "@fasl-work/caos-app-shell";
 
 const config: ShellConfig = {
   product: { name: "RotorVitals" },
-  routes: [
-    { path: "/", en: "App", es: "App" },
-    { path: "/introduction", en: "Introduction", es: "Introducción" },
-    { path: "/methodology", en: "Methodology", es: "Metodología" },
-    { path: "/implementation", en: "Implementation", es: "Implementación" },
-    { path: "/experiments", en: "Experiments", es: "Experimentos" },
-  ],
-  links: { github: "https://github.com/fsantibanezleal/CAOS_RotorVitals" }, // personal/portfolio default in
-  version: "0.01.000",
+  routes: STANDARD_ROUTES, // App, Introduction, Methodology, Implementation, Experiments, Benchmark
+  links: { github: "https://github.com/fsantibanezleal/CAOS_RotorVitals" },
+  version: "0.01.000", // X.XX.XXX, checked on mount
+  build: import.meta.env.VITE_BUILD_ID, // short commit, shown beside the version
+  license: { en: "MIT licence", es: "Licencia MIT" }, // required; no default
+  visibility: "public", // "private" hides every source link
+  contain: true, // every route is the viewport (ADR-0071 rule 1)
 };
 
-<BrowserRouter>
+<BrowserRouter basename={import.meta.env.BASE_URL}>
   <AppShell config={config}>
-    <Routes>{/* /  = the tool (landing); the rest are deep pages */}</Routes>
+    <Routes>{/* / = the workbench; the rest are DocPage routes */}</Routes>
   </AppShell>
 </BrowserRouter>
 ```
 
-- **Land on the tool:** make `/` your interactive tool; Introduction/Methodology/etc. are separate routes.
-- **Product metadata:** `footer.attribution` accepts bilingual text or `false` when a product excludes personal attribution. `footer.license` accepts the product's bilingual license label. Omitting these keeps existing consumer defaults. A product does not inherit the shell's MIT license.
-- **Hub case (Faena):** pass `routes: []` (or one) → the nav is hidden, header/footer identical.
-- **Deep pages:** compose with `Tabs`, `SubTabs`, `Equation`/`InlineMath`, `Callout`, `Figure`, and
-  `CitationsProvider` + `Cite`/`Refs`/`ReferenceList`. Read the current language with `useShellLang()`.
-- **Case + source picking:** use `CaseSelector` for the interactive tool's source/case selection
-  (labelled groups, `Synthetic | Real | Uploaded` source control, locked-knobs explanation, divergence
-  badge, `?case=` deep-linking).
-- **Animated views:** drive every canvas/3D loop through `usePausedViz` (default paused, run-once,
-  halt on a hidden tab), never call `requestAnimationFrame` directly.
+- **Land on the tool:** `/` is the workbench; the five documentation routes are separate pages.
+- **One React, one router:** set `resolve.dedupe: ['react', 'react-dom', 'react-router']` in Vite. A second copy
+  leaves the shell outside the router context; `AppShell` reports it with `console.error` and names the cause.
+- **Product metadata:** `license` and `visibility` are required: the footer shows the product's licence and a
+  private product shows no source link. `footer.attribution` accepts bilingual text or `false`.
+- **Hub case (Faena):** pass `routes: []` (or one) and the nav is hidden; header and footer stay identical.
+- **The App route:** one `CaseWorkbench` is the whole route: the rail holds the case picker (`cases`, the
+  `CaseSelector` props), the variants (`variants`) and your `rail` (parameters as `Knob` and `ChipGroup`, live
+  values as `Readout` / `Gauge` / `Verdict`); the instrument holds at most six question `groups`, then the
+  variant comparison and the context. Pickers and numbers live in the rail so the drawing keeps the instrument.
+  Every control writes `data-control`. `PlotCard` and `Readout` take `lane`, `provenance` and a `dataKey`:
+  pass `useWorkbenchState().stateKey` as captured when the computation started (rail and instrument share it), and
+  a view still showing an earlier selection is overlaid as stale. Anything that loads declares
+  `data-state="loading"` until it is ready; the gate waits for that, never for the network.
+- **Fill the instrument:** `<PlotCard fill>` takes the height its panel leaves (several `fill` cards share it, a
+  `.caos-views-row` puts them side by side), and a `Stage` or `<UPlotChart height="fill">` inside it gets a real
+  size. A table (`.caos-table`) is sized to its rows: put it above the drawing of the same numbers, never alone.
+- **Drawing:** put canvas, WebGL and SVG instruments in a `Stage` (or `useStageSize`): nothing draws at zero
+  size, and colours come from `useThemeTokens()` (a canvas cannot read CSS variables).
+- **Charts:** `import { UPlotChart } from "@fasl-work/caos-app-shell/chart"`: x and y titles with units, series
+  by token colour, `marks` for what the engine detected, a key of every series when there are two or more, a cursor
+  readout row, theme and language rebuilds. Keep series labels short: the key wraps under the plot.
+- **Numbers:** `formatNumber(value, lang, opts)` or `useFormat()`; never `toFixed` in a view. A magnitude below 1e-4
+  is written in scientific notation (a p-value of 1e-200 is `1E-200`, not two hundred zeros); give `digits`, not
+  `decimals`, for p-values.
+- **Documentation routes:** `DocPage` and `DocSection` (each section ends in its own `Refs`, or states why it
+  cites nothing), `Equation` with a caption, `CitationsProvider` and `Cite` (every citation has a DOI or URL).
+  `Tabs`, `SubTabs` and `TabGroups` are controllable and render only the open panel inside a `PanelBoundary`.
+- **Architecture modal:** five or more tabs, each an inline SVG string (`import svg from "./x.svg?raw"`) that uses
+  only `SHELL_TOKENS`; `validateArchitectureConfig` reports anything else on mount.
+- **Measure it:** `npx caos-shell-gate --serve dist --expect-brand "RotorVitals"` serves the build as GitHub
+  Pages does (no SPA fallback), or `--url https://...` measures the deployed origin (needs `playwright`). It walks
+  every route, tab, sub-tab and case at five sizes, both themes and both languages, and fails on: a wrong subject
+  (G1) or mode (G2), console errors and 4xx/5xx (G3), broken deep links or HTML for an artifact (G4), anything a
+  reader cannot scroll to, see whole or click (G5), blank or underfilled drawings and an instrument under half the
+  viewport (G6), a view that never settles (G7), loops at rest (G8), and controls that change nothing (G9). The
+  report (`gate-output/gate-report.json`) lists every failure and the smallest margins against each floor.
+- **Your own CSS:** never redefine a class in `reserved-classes.json`; the product guard reads that list.
+- **Animated views:** drive every canvas or 3D loop through `usePausedViz` (default paused, run once, halt on a
+  hidden tab), never call `requestAnimationFrame` directly.
 
 ## Exports
 
-`AppShell`, `WorkbenchShell`, `ThemeToggle`, `LanguageToggle`, `useThemeStore`, `applyTheme`, `readTheme`, `useLangStore`,
-`useShellLang`, `usePausedViz`, `createVizLoop`, `CaseSelector` (+ `caseModel` helpers), `Tabs`, `SubTabs`,
-`Callout`, `Equation`, `InlineMath`, `Figure`, `CitationsProvider`, `Cite`, `Refs`, `ReferenceList`, plus
-the `@fasl-work/caos-app-shell/styles.css` design system.
+`AppShell`, `STANDARD_ROUTES`, `WorkbenchShell`, `FocusShell`, `ArchitectureModal`,
+`validateArchitectureConfig`, `ThemeToggle`, `LanguageToggle`, `useThemeStore`, `applyTheme`, `readTheme`,
+`THEME_BOOT_SCRIPT`, `THEME_STORAGE_KEY`, `LANG_STORAGE_KEY`, `useLangStore`, `useShellLang`, `formatNumber`,
+`useFormat`, `NOT_AVAILABLE`, `SHELL_TOKENS`, `resolveToken`, `useThemeTokens`, `PanelBoundary`,
+`usePausedViz`, `createVizLoop`, `CaseSelector` (and the `caseModel` helpers), `Tabs`, `MAX_PEER_TABS`,
+`SubTabs`, `TabGroups`, `Callout`, `Equation`, `InlineMath`, `Figure`, `CitationsProvider`, `Cite`, `Refs`,
+`ReferenceList` (deprecated), `DocPage`, `DocSection`, `WorkbenchLayout`, `CaseWorkbench`,
+`MAX_WORKBENCH_GROUPS`, `VariantBar`, `LaneBadge`, `Readout`, `Gauge`, `Verdict`, `PlotCard`, `Knob`,
+`ChipGroup`, `Stage`, `useStageSize`, `makeStateKey`, `isStale`, `useWorkbenchState`,
+`WorkbenchStateContext`, `pick`. Separate entries: `/chart` (`UPlotChart`), `/keys` (the storage keys, no
+React), `/styles.css`, `/chart.css`, `/reserved-classes.json`. Bin: `caos-shell-gate`.
 
 ### Authenticated workbenches
 

package/bin/caos-shell-gate.mjs

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+// caos-shell-gate: the measured web baseline of a CAOS product (ADR-0071, ADR-0017, ADR-0016, ADR-0078).
+// The checks and the traps each one embeds are listed in gate/run.mjs; the self-test (npm run test:gate in the
+// shell repository) plants one defect per check and requires each to fail.
+//
+// Usage:
+//   npx caos-shell-gate --serve dist --expect-brand "Contraste"            a Pages-faithful server over the build
+//   npx caos-shell-gate --url https://contraste.fasl-work.com --expect-brand "Contraste"     the deployed origin
+// Options:
+//   --base-path /Repo/           the site's base path with --serve (a project page); default /
+//   --routes /,/methodology      the routes; default: read from the header navigation
+//   --workbench /                the routes that carry the case workbench; default /
+//   --sizes 390x844,...,2560x1440  --themes light,dark  --langs en,es
+//   --case-sample id1,id2        cases walked outside the primary mode; default the first and the last
+//   --single-case                the workbench has one case and no case control
+//   --idle-ms 3000  --settle-ms 15000  --text-floor 400  --instrument-min 0.5  --stage-fill-min 0.3
+//   --out gate-output            report (gate-report.json) and screenshots (shots/)
+// Needs `playwright` in the consuming project (optional peer dependency). Exit 1 on any failure, 2 on misuse.
+
+import { runGate } from '../gate/run.mjs';
+
+const FLAGS = new Set(['single-case']);
+const args = {};
+const argv = process.argv.slice(2);
+for (let i = 0; i < argv.length; i += 1) {
+  const a = argv[i];
+  if (!a.startsWith('--')) continue;
+  const key = a.slice(2);
+  if (FLAGS.has(key)) args[key] = true;
+  else args[key] = argv[i + 1];
+  if (!FLAGS.has(key)) i += 1;
+}
+const num = (k) => (args[k] === undefined ? undefined : Number(args[k]));
+const options = {
+  url: args.url,
+  serve: args.serve,
+  basePath: args['base-path'],
+  expectBrand: args['expect-brand'],
+  routes: args.routes,
+  workbench: args.workbench,
+  sizes: args.sizes,
+  themes: args.themes,
+  langs: args.langs,
+  caseSample: args['case-sample'],
+  singleCase: args['single-case'] === true,
+  idleMs: num('idle-ms'),
+  settleMs: num('settle-ms'),
+  textFloor: num('text-floor'),
+  instrumentMin: num('instrument-min'),
+  stageFillMin: num('stage-fill-min'),
+  out: args.out,
+};
+for (const k of Object.keys(options)) if (options[k] === undefined) delete options[k];
+
+let report;
+try {
+  report = await runGate(options);
+} catch (e) {
+  console.error(e.message);
+  process.exit(2);
+}
+const shown = report.failures.slice(0, 80);
+for (const f of shown) console.log(`FAIL [${f.check}] ${f.route} ${f.mode}${f.trail ? ` (${f.trail})` : ''}: ${f.message}`);
+if (report.failures.length > shown.length) console.log(`... and ${report.failures.length - shown.length} more in ${options.out ?? 'gate-output'}/gate-report.json`);
+const counts = Object.entries(report.checks).map(([k, n]) => `${k} ${n}`).join(', ');
+console.log(report.ok ? `caos-shell-gate: OK, ${report.states} measured states` : `caos-shell-gate: ${report.failures.length} failure(s) in ${report.states} measured states (${counts})`);
+process.exit(report.ok ? 0 : 1);

package/chart.css

@@ -0,0 +1,19 @@
+@import "uplot/dist/uPlot.min.css";
+
+/* @fasl-work/caos-app-shell/chart.css: the house chart (UPlotChart). The cursor value is shown in a readout row under
+   the plot, never in uPlot's legend, which a sized host clips (known shell defect 3). */
+.caos-chart { position: relative; min-width: 0; width: 100%; }
+.caos-chart .u-legend { display: none; }
+/* height="fill": the chart takes its container's height; the plot box is sized by the layout, never by its content. */
+.caos-chart.fill { height: 100%; display: flex; flex-direction: column; min-height: 0; }
+.caos-chart.fill > .caos-chart-plot { flex: 1 1 0; min-height: 0; overflow: hidden; }
+.caos-chart-readout { margin: 0.15rem 0 0; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.3; color: var(--color-fg-subtle); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* The series key (known shell defect 17): every series of a chart with two or more, always in view; it wraps. A line
+   swatch in the series' colour, dashed for a dashed series, a dot for a series drawn as points. */
+.caos-chart-legend { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.8rem; font-size: 0.74rem; line-height: 1.35; color: var(--color-fg-subtle); }
+.caos-chart.fill > .caos-chart-legend { flex: none; }
+.caos-chart-key { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; }
+.caos-chart-swatch { flex: none; width: 16px; height: 0; border-top: 2px solid var(--swatch); }
+.caos-chart-key[data-dash] .caos-chart-swatch { border-top-style: dashed; }
+.caos-chart-key[data-mode="points"] .caos-chart-swatch { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--swatch); }
+.caos-chart .u-cursor-x, .caos-chart .u-cursor-y { border-color: var(--color-fg-faint) !important; }

package/dist/chart.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { F as FormatOptions, S as ShellToken } from './tokens-CSV0MOgR.js';
+import { B as BiText } from './text-BlY47nIt.js';
+import 'zustand';
+
+interface ChartSeries {
+    label: BiText;
+    /** One value per x; `null` leaves a gap. */
+    values: (number | null)[];
+    /** A shell colour token; defaults rotate through the accent palette. */
+    color?: ShellToken;
+    width?: number;
+    dash?: number[];
+    /** `points` draws markers only (a scatter of cases over a curve); `null` values are simply absent. */
+    mode?: 'line' | 'points';
+}
+interface ChartAxis {
+    label: BiText;
+    unit?: BiText;
+    format?: FormatOptions;
+}
+interface UPlotChartProps {
+    /** The x values and their axis. A time axis must be declared (`time: true`); uPlot otherwise reads numbers as
+     * epoch seconds and labels ticks as dates (failure class 7). */
+    x: ChartAxis & {
+        values: number[];
+        time?: boolean;
+    };
+    y: ChartAxis & {
+        log?: boolean;
+        range?: [number, number];
+    };
+    series: ChartSeries[];
+    /** Vertical markers at x positions, drawn on the plot and labelled (mark what the engine detected). */
+    marks?: {
+        x: number;
+        label: BiText;
+    }[];
+    /** Height in pixels, or `fill` to take the container's height (inside `PlotCard fill`); the width is always the
+     * container's. */
+    height?: number | 'fill';
+    /** Called with the index under the cursor (or null), for linked views. */
+    onCursor?: (index: number | null) => void;
+}
+/**
+ * The house chart (S12 of the 2026-10-04 requirements; uPlot, ADR on interactive charts). It is built only once its
+ * box has a size; it resolves the theme's colours to concrete values and rebuilds when the theme or language changes
+ * (a canvas cannot read CSS variables); it compares its options by value, never by identity, so a parent re-render
+ * does not tear it down; its tick formatters are null-safe and follow the interface language; the y axis is sized to
+ * its longest tick label, so no tick is cut; the cursor value is written into a readout row under the plot instead of
+ * uPlot's legend, which a sized host clips (known shell defect 3). A chart of two or more series keys every series
+ * under the plot, always (its colour, a dashed or a dotted swatch, its label): at rest the readout names none of them
+ * (known shell defect 17). The host declares `data-series`, `data-axis-titles`, `data-ticks-cut` and `data-drawn` for
+ * the gate.
+ */
+declare function UPlotChart({ x, y, series, marks, height, onCursor }: UPlotChartProps): react.JSX.Element;
+
+export { type ChartAxis, type ChartSeries, UPlotChart, type UPlotChartProps };

package/dist/chart.js

@@ -0,0 +1,153 @@
+import { useShellLang, useThemeStore, useStageSize, pick, resolveToken, formatNumber } from './chunk-LOSSTLPP.js';
+import './chunk-X6Y5CDUD.js';
+import { useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import uPlot from 'uplot';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ROTATION = ["--color-accent", "--color-magenta", "--color-accent-2", "--color-good", "--color-warn", "--color-bad"];
+function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
+  const lang = useShellLang();
+  const theme = useThemeStore((s) => s.theme);
+  const fill = height === "fill";
+  const [measureRef, box] = useStageSize();
+  const plotRef = useRef(null);
+  const setPlot = useCallback(
+    (el) => {
+      plotRef.current = el;
+      measureRef(el);
+    },
+    [measureRef]
+  );
+  const width = box.width;
+  const h = fill ? box.height : height;
+  const uRef = useRef(null);
+  const [cursor, setCursor] = useState(null);
+  const onCursorRef = useRef(onCursor);
+  onCursorRef.current = onCursor;
+  const xLabel = pick(x.label, lang);
+  const yLabel = pick(y.label, lang);
+  const xUnit = x.unit ? pick(x.unit, lang) : "";
+  const yUnit = y.unit ? pick(y.unit, lang) : "";
+  const structure = JSON.stringify({
+    s: series.map((s, i) => [pick(s.label, lang), s.color ?? ROTATION[i % ROTATION.length], s.width ?? 2, s.dash ?? null, s.mode ?? "line"]),
+    x: [xLabel, xUnit, Boolean(x.time), x.format ?? null],
+    y: [yLabel, yUnit, Boolean(y.log), y.range ?? null, y.format ?? null],
+    m: (marks ?? []).map((m) => [m.x, pick(m.label, lang)]),
+    theme,
+    lang,
+    h,
+    w: width
+  });
+  const data = useMemo(() => [x.values, ...series.map((s) => s.values)], [x.values, series]);
+  useEffect(() => {
+    const el = plotRef.current;
+    if (!el || width <= 0 || h <= 0) return;
+    const fg = resolveToken("--color-fg-subtle", "#888");
+    const grid = resolveToken("--color-border", "#ccc");
+    const font = `11px ${resolveToken("--font-sans", "sans-serif")}`;
+    const tick = (fmt) => (_u, vals) => vals.map((v) => v === null || v === void 0 ? "" : formatNumber(v, lang, fmt ?? { digits: 4 }));
+    const opts = {
+      width,
+      height: h,
+      legend: { show: false },
+      scales: { x: { time: Boolean(x.time) }, y: { distr: y.log ? 3 : 1, ...y.range ? { range: y.range } : {} } },
+      axes: [
+        {
+          stroke: fg,
+          grid: { stroke: grid, width: 1 },
+          ticks: { stroke: grid },
+          font,
+          label: xUnit ? `${xLabel} (${xUnit})` : xLabel,
+          labelFont: font,
+          values: x.time ? void 0 : tick(x.format)
+        },
+        {
+          stroke: fg,
+          grid: { stroke: grid, width: 1 },
+          ticks: { stroke: grid },
+          font,
+          label: yUnit ? `${yLabel} (${yUnit})` : yLabel,
+          labelFont: font,
+          values: tick(y.format),
+          size: (u, values) => {
+            if (!values || values.length === 0) return 48;
+            u.ctx.font = font;
+            const widest = Math.max(...values.map((v) => u.ctx.measureText(v ?? "").width));
+            return Math.ceil(widest / (window.devicePixelRatio || 1)) + 30;
+          }
+        }
+      ],
+      series: [
+        {},
+        ...series.map((s, i) => {
+          const stroke = resolveToken(s.color ?? ROTATION[i % ROTATION.length], "#4a8");
+          return s.mode === "points" ? { label: pick(s.label, lang), stroke, width: 1.5, paths: () => null, points: { show: true, space: 0, size: 9, fill: stroke } } : { label: pick(s.label, lang), stroke, width: s.width ?? 2, dash: s.dash, spanGaps: false, points: { show: false } };
+        })
+      ],
+      hooks: {
+        setCursor: [
+          (u) => {
+            const idx = u.cursor.idx ?? null;
+            setCursor(idx);
+            onCursorRef.current?.(idx);
+          }
+        ],
+        draw: [
+          (u) => {
+            if (!marks?.length) return;
+            const ctx = u.ctx;
+            ctx.save();
+            ctx.strokeStyle = resolveToken("--color-warn", "#c80");
+            ctx.fillStyle = resolveToken("--color-warn", "#c80");
+            ctx.setLineDash([4, 4]);
+            ctx.font = font;
+            for (const m of marks) {
+              const px = u.valToPos(m.x, "x", true);
+              ctx.beginPath();
+              ctx.moveTo(px, u.bbox.top);
+              ctx.lineTo(px, u.bbox.top + u.bbox.height);
+              ctx.stroke();
+              ctx.fillText(pick(m.label, lang), px + 4, u.bbox.top + 12);
+            }
+            ctx.restore();
+          }
+        ]
+      }
+    };
+    uRef.current?.destroy();
+    uRef.current = new uPlot(opts, data, el);
+    return () => {
+      uRef.current?.destroy();
+      uRef.current = null;
+    };
+  }, [structure]);
+  useEffect(() => {
+    uRef.current?.setData(data);
+  }, [data]);
+  const read = cursor !== null ? [
+    `${xLabel} ${formatNumber(x.values[cursor], lang, x.format ?? { digits: 4 })}${xUnit ? ` ${xUnit}` : ""}`,
+    ...series.map(
+      (s) => `${pick(s.label, lang)} ${formatNumber(s.values[cursor] ?? null, lang, y.format ?? { digits: 4 })}${yUnit ? ` ${yUnit}` : ""}`
+    )
+  ].join(" \xB7 ") : lang === "es" ? "Pase el cursor sobre el gr\xE1fico para leer los valores" : "Hover the chart to read the values";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: fill ? "caos-chart fill" : "caos-chart",
+      "data-series": series.length,
+      "data-axis-titles": `${xLabel}|${yLabel}`,
+      "data-ticks-cut": "0",
+      "data-drawn": width > 0 && h > 0 ? "1" : "0",
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: setPlot, className: "caos-chart-plot" }),
+        series.length > 1 && /* @__PURE__ */ jsx("ul", { className: "caos-chart-legend", "aria-label": lang === "es" ? "Series del gr\xE1fico" : "Series of the chart", children: series.map((s, i) => /* @__PURE__ */ jsxs("li", { className: "caos-chart-key", "data-mode": s.mode ?? "line", "data-dash": s.dash ? "1" : void 0, children: [
+          /* @__PURE__ */ jsx("span", { className: "caos-chart-swatch", style: { "--swatch": `var(${s.color ?? ROTATION[i % ROTATION.length]})` }, "aria-hidden": "true" }),
+          pick(s.label, lang)
+        ] }, i)) }),
+        /* @__PURE__ */ jsx("p", { className: "caos-chart-readout", "aria-live": "polite", title: read, children: read })
+      ]
+    }
+  );
+}
+
+export { UPlotChart };

package/dist/chunk-LOSSTLPP.js

@@ -0,0 +1,174 @@
+import { LANG_STORAGE_KEY, THEME_STORAGE_KEY } from './chunk-X6Y5CDUD.js';
+import { create } from 'zustand';
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var KEY = LANG_STORAGE_KEY;
+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/text.ts
+function pick(text, lang) {
+  if (text === void 0) return "";
+  if (typeof text === "string") return text;
+  return text[lang] ?? text.en;
+}
+var KEY2 = THEME_STORAGE_KEY;
+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 applyTheme(t) {
+  try {
+    document.documentElement.dataset.theme = t;
+  } catch {
+  }
+}
+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 });
+  }
+}));
+var SHELL_TOKENS = [
+  "--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"
+];
+function resolveToken(token, fallback = "") {
+  if (typeof document === "undefined") return fallback;
+  const v = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+  return v || fallback;
+}
+function useThemeTokens() {
+  const theme = useThemeStore((s) => s.theme);
+  return useMemo(() => {
+    const out = {};
+    for (const t of SHELL_TOKENS) out[t] = resolveToken(t);
+    return out;
+  }, [theme]);
+}
+
+// src/lib/format.ts
+var LOCALE = { en: "en-US", es: "es-CL" };
+var SCIENTIFIC_BELOW = 1e-4;
+var NOT_AVAILABLE = { en: "not available", es: "no disponible" };
+function formatNumber(value, lang, opts = {}) {
+  if (value === null || value === void 0 || !Number.isFinite(value)) return NOT_AVAILABLE[lang];
+  const v = opts.percent ? value * 100 : value;
+  const digits = opts.digits ?? 4;
+  const nf = opts.decimals !== void 0 ? new Intl.NumberFormat(LOCALE[lang], { minimumFractionDigits: opts.decimals, maximumFractionDigits: opts.decimals }) : v !== 0 && Math.abs(v) < SCIENTIFIC_BELOW ? new Intl.NumberFormat(LOCALE[lang], { notation: "scientific", maximumSignificantDigits: digits }) : Math.abs(v) >= 10 ** (digits - 1) ? new Intl.NumberFormat(LOCALE[lang], { maximumFractionDigits: 0 }) : new Intl.NumberFormat(LOCALE[lang], { maximumSignificantDigits: digits });
+  return opts.percent ? `${nf.format(v)} %` : nf.format(v);
+}
+function useFormat() {
+  const lang = useShellLang();
+  return (value, opts) => formatNumber(value, lang, opts);
+}
+function useStageSize() {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const roRef = useRef(null);
+  const ref = useCallback((el) => {
+    roRef.current?.disconnect();
+    roRef.current = null;
+    if (!el) return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      setSize((prev) => prev.width === Math.round(r.width) && prev.height === Math.round(r.height) ? prev : { width: Math.round(r.width), height: Math.round(r.height) });
+    };
+    measure();
+    if (typeof ResizeObserver !== "undefined") {
+      roRef.current = new ResizeObserver(measure);
+      roRef.current.observe(el);
+    }
+  }, []);
+  useEffect(() => () => roRef.current?.disconnect(), []);
+  return [ref, size];
+}
+function Stage({ label, children, className }) {
+  const lang = useShellLang();
+  const [ref, size] = useStageSize();
+  const ready = size.width > 0 && size.height > 0;
+  const name = pick(label, lang);
+  useEffect(() => {
+    if (ready) return;
+    const t = setTimeout(() => {
+      console.error(`[caos-app-shell] Stage "${name}" has no size; give its container a height (ADR-0071 rule 8)`);
+    }, 1500);
+    return () => clearTimeout(t);
+  }, [ready, name]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: ["caos-stage", className].filter(Boolean).join(" "),
+      "data-stage": name,
+      "data-drawn": ready ? "1" : "0",
+      "data-width": size.width,
+      "data-height": size.height,
+      children: ready ? children(size) : null
+    }
+  );
+}
+
+export { NOT_AVAILABLE, SHELL_TOKENS, Stage, applyTheme, formatNumber, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens };

package/dist/chunk-X6Y5CDUD.js

@@ -0,0 +1,16 @@
+// src/shell/routes.ts
+var STANDARD_ROUTES = [
+  { path: "/", en: "App", es: "App" },
+  { path: "/introduction", en: "Introduction", es: "Introducci\xF3n" },
+  { path: "/methodology", en: "Methodology", es: "Metodolog\xEDa" },
+  { path: "/implementation", en: "Implementation", es: "Implementaci\xF3n" },
+  { path: "/experiments", en: "Experiments", es: "Experimentos" },
+  { path: "/benchmark", en: "Benchmark", es: "Benchmark" }
+];
+
+// src/lib/keys.ts
+var THEME_STORAGE_KEY = "caos.theme";
+var LANG_STORAGE_KEY = "caos.lang";
+var THEME_BOOT_SCRIPT = `(function(){try{var t=localStorage.getItem('${THEME_STORAGE_KEY}');if(t!=='light'&&t!=='dark'){t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark'}document.documentElement.dataset.theme=t;var l=localStorage.getItem('${LANG_STORAGE_KEY}');document.documentElement.lang=l==='es'?'es':'en'}catch(e){document.documentElement.dataset.theme='dark'}})();`;
+
+export { LANG_STORAGE_KEY, STANDARD_ROUTES, THEME_BOOT_SCRIPT, THEME_STORAGE_KEY };