@fasl-work/caos-app-shell 0.18.0 → 0.19.0

package/dist/{text-DyQ1A8oo.d.ts → tokens-BvU9bFPw.d.ts}

@@ -39,25 +39,6 @@ declare function formatTicks(values: readonly (number | null | undefined)[], lan
 /** `formatNumber` bound to the current shell language. */
 declare function useFormat(): (value: number | null | undefined, opts?: FormatOptions) => string;
 
-/**
- * The colour and font tokens `styles.css` defines for both themes. The architecture-modal validation and the
- * template's web-baseline guard check every `var(--x)` a product names against this list; a token that is not
- * 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"];
-type ShellToken = (typeof SHELL_TOKENS)[number];
-/** A colour token: what a chart series, a tone or a canvas colour may name. */
-type ShellColorToken = Extract<ShellToken, `--color-${string}`>;
-/** The computed value of a token on the document, or `fallback` outside a browser. */
-declare function resolveToken(token: string, fallback?: string): string;
-/**
- * The colour tokens resolved to concrete values for the active theme, recomputed when the theme changes. Canvas
- * and WebGL renderers cannot read CSS variables, so they take these (failure classes 7 and 18: charts drawn in
- * dark-theme colours on a light page).
- */
-declare function useThemeTokens(): Record<ShellToken, string>;
-
 /**
  * Text that fits the drawing it labels, measured in the font the page renders.
  *
@@ -92,8 +73,30 @@ declare function niceStep(x: number): number;
 /**
  * Round ticks covering [lo, hi], as many as leave room for labels about `labelSize` pixels along an axis of `room`
  * pixels (at least two, at most `most`). The first tick is at or below `lo` and the last at or above `hi`, so a bar
- * or a point never runs past the last labelled value.
+ * or a point never runs past the last labelled value. With a `resolution` (1 for an axis of counts, 10^-d for d fixed
+ * decimals) every step is a multiple of it, so no two labels read the same and none is a rounded fraction (0.19.0).
  */
-declare function niceTicks(lo: number, hi: number, room: number, labelSize: number, most?: number): number[];
+declare function niceTicks(lo: number, hi: number, room: number, labelSize: number, most?: number, resolution?: number): number[];
+/** How many tick labels repeat the label before them (empty labels apart); the gate fails a chart with any (G6). */
+declare function repeatedLabels(labels: readonly (string | null | undefined)[]): number;
+
+/**
+ * The colour and font tokens `styles.css` defines for both themes. The architecture-modal validation and the
+ * template's web-baseline guard check every `var(--x)` a product names against this list; a token that is not
+ * 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"];
+type ShellToken = (typeof SHELL_TOKENS)[number];
+/** A colour token: what a chart series, a tone or a canvas colour may name. */
+type ShellColorToken = Extract<ShellToken, `--color-${string}`>;
+/** The computed value of a token on the document, or `fallback` outside a browser. */
+declare function resolveToken(token: string, fallback?: string): string;
+/**
+ * The colour tokens resolved to concrete values for the active theme, recomputed when the theme changes. Canvas
+ * and WebGL renderers cannot read CSS variables, so they take these (failure classes 7 and 18: charts drawn in
+ * dark-theme colours on a light page).
+ */
+declare function useThemeTokens(): Record<ShellToken, string>;
 
-export { type FormatOptions as F, NBSP as N, type ShellColorToken as S, type FittedLabel as a, NOT_AVAILABLE as b, SCIENTIFIC_BELOW as c, SHELL_TOKENS as d, type ShellToken as e, fitLabel as f, fontFamily as g, formatNumber as h, formatTicks as i, niceTicks as j, resolveToken as k, useThemeTokens as l, niceStep as n, referenceLineName as r, textWidth as t, useFormat as u, widestLabel as w };
+export { type FormatOptions as F, NBSP as N, type ShellColorToken as S, repeatedLabels as a, type FittedLabel as b, NOT_AVAILABLE as c, SCIENTIFIC_BELOW as d, SHELL_TOKENS as e, type ShellToken as f, fitLabel as g, fontFamily as h, formatNumber as i, formatTicks as j, niceTicks as k, resolveToken as l, useThemeTokens as m, niceStep as n, referenceLineName as r, textWidth as t, useFormat as u, widestLabel as w };

package/gate/inpage.mjs

@@ -1580,4 +1580,173 @@ export function installLib() {
     }
     return out.slice(0, 10);
   };
+
+  // ---- G20 (0.19.0): every chart host carries Tier A: one tab stop with a name, the table of the values, a summary, a reset --------------
+  const reasonWords = (t) => (String(t).match(/[\p{L}\p{Nd}]/gu) || []).length;
+  G.chartsTierA = async (drive) => {
+    const out = [];
+    const pause = (ms) => new Promise((r) => setTimeout(r, ms));
+    for (const host of document.querySelectorAll('[data-chart-host]')) {
+      if (!visible(host)) continue;
+      const kind = host.getAttribute('data-chart-host');
+      const label = describe(host.closest('[data-plot]') || host);
+      const problems = [];
+      const stop = host.querySelector('[data-chart-focus]');
+      // a chart that turns zoom off declares data-zoom-off, an empty reason included (the attribute is there, its text is the reason)
+      const entry = { label, kind, problems, zoomOffSet: host.hasAttribute('data-zoom-off'), zoomOff: host.getAttribute('data-zoom-off') || '', zoomOffValid: true };
+      if (entry.zoomOffSet) entry.zoomOffValid = reasonWords(entry.zoomOff) >= 12;
+      out.push(entry);
+      // the labels of a chart's marks (x and y) share one set of boxes, and none lies over another (0.19.0): the chart says how many do
+      const overlaps = host.getAttribute('data-mark-overlaps');
+      if (overlaps !== null && Number(overlaps) > 0) {
+        // the pairs that overlap, each label named with its kind (an x mark or a y mark), from the boxes the chart declares (re-review of 0.19.0, m1)
+        let pairs = [];
+        try {
+          const boxes = JSON.parse(host.getAttribute('data-mark-boxes') || '[]');
+          for (let i = 0; i < boxes.length; i++)
+            for (let j = i + 1; j < boxes.length; j++) {
+              const a = boxes[i];
+              const b = boxes[j];
+              if (a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1) pairs.push(`"${a.t}" (${a.k}) lies over "${b.t}" (${b.k})`);
+            }
+        } catch {
+          pairs = [];
+        }
+        problems.push(`${overlaps} pair(s) of mark label(s) overlap (data-mark-overlaps="${overlaps}")${pairs.length ? `: ${pairs.slice(0, 4).join('; ')}` : ': the chart declares no boxes to name them'}`);
+      }
+      if (!stop) {
+        problems.push('the chart is not a tab stop (no element with data-chart-focus): the keyboard cannot reach its crosshair, zoom or reset');
+        continue;
+      }
+      if (stop.tabIndex < 0) problems.push('the plot is not a tab stop (tabindex is below 0)');
+      const labelledBy = (stop.getAttribute('aria-labelledby') || '').split(/\s+/).filter(Boolean).map((id) => document.getElementById(id)?.textContent || '').join(' ');
+      const name = (stop.getAttribute('aria-label') || labelledBy || '').trim();
+      if (name.length < 2) problems.push('the plot has no accessible name (aria-label or aria-labelledby)');
+      // the summary describes the plot (aria-describedby); the table of the values is linked by aria-details (or, as in 0.19.0, described by)
+      const ids = `${stop.getAttribute('aria-describedby') || ''} ${stop.getAttribute('aria-details') || ''}`.split(/\s+/).filter(Boolean);
+      const described = ids.map((id) => document.getElementById(id)).filter(Boolean);
+      const table = described.find((el) => el.tagName === 'TABLE');
+      const points = Number(host.getAttribute('data-points') || '0');
+      if (!table) problems.push('the plot is not linked to a data table (aria-details must name a table of the plotted values)');
+      else {
+        const rows = table.querySelectorAll('tbody tr').length;
+        if (points > 0 && rows === 0) problems.push('the data table has no rows');
+        if (table.querySelectorAll('thead th').length < 2) problems.push('the data table has no header for the values');
+      }
+      const summary = described.find((el) => el.tagName !== 'TABLE');
+      if (!summary || !(summary.textContent || '').trim()) problems.push('the plot has no one-line text summary (aria-describedby must name it)');
+      // the bar forms of 0.19.0: a floating bar adds the two ends to the table (From, To), grouped bars add the group; a legend is drawn when one is declared
+      const spans = Number(host.getAttribute('data-spans') || '0');
+      const groups = Number(host.getAttribute('data-groups') || '0');
+      const legend = Number(host.getAttribute('data-legend') || '0');
+      if (kind === 'bars' && table) {
+        const want = 3 + (spans > 0 ? 2 : 0) + (groups > 0 ? 1 : 0);
+        const have = table.querySelectorAll('thead th').length;
+        if (have !== want) problems.push(`the data table of ${spans > 0 ? 'floating' : 'grouped'} bars has ${have} columns, it must have ${want} (${[groups > 0 ? 'group' : '', 'category', 'value', spans > 0 ? 'from, to' : '', 'note'].filter(Boolean).join(', ')})`);
+      }
+      if (kind === 'bars' && legend > 0) {
+        const keys = [...host.querySelectorAll('.caos-bars-legend li')].filter(visible);
+        if (keys.length !== legend) problems.push(`the legend is not shown: the chart declares ${legend} entries and ${keys.length} are visible`);
+      }
+      // driven (the `interact` state): the arrow keys move the crosshair and change the readout, a scripted brush zooms, `+` zooms, the one
+      // visible control and `0` reset. A chart that is zoomed already, or cannot be zoomed, is not driven for the zoom
+      if (drive) {
+        const key = (k) => stop.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
+        let zeroDead = false;
+        const readout = host.querySelector('.caos-chart-readout, .caos-bars-readout');
+        if (readout && points > 0) {
+          const rest = (readout.textContent || '').trim();
+          key('ArrowRight');
+          await pause(80);
+          const moved = (readout.textContent || '').trim();
+          if (!moved || moved === rest) problems.push('the arrow keys do not move the crosshair (the readout does not change on ArrowRight)');
+          key('End');
+          key('Home');
+          await pause(40);
+          // floating and grouped bars: the keyboard walks every bar, each readout reads the bar's two ends (a floating bar) and its group (a grouped one)
+          if (kind === 'bars' && (spans > 0 || groups > 0) && points > 1 && points <= 60) {
+            const cells = table ? [...table.querySelectorAll('tbody tr')].map((tr) => [...tr.querySelectorAll('th, td')].map((c) => (c.textContent || '').trim())) : [];
+            const seen = new Set();
+            let unread = 0;
+            let ungrouped = 0;
+            for (let k = 0; k < points; k++) {
+              if (k > 0) key('ArrowRight');
+              await pause(30);
+              const text = (readout.textContent || '').trim();
+              seen.add(text);
+              const row = cells[k] || [];
+              const offset = groups > 0 ? 1 : 0;
+              if (spans > 0 && row[offset + 2] && row[offset + 3] && !(text.includes(row[offset + 2]) && text.includes(row[offset + 3]))) unread += 1;
+              if (groups > 0 && row[0] && !text.includes(row[0])) ungrouped += 1;
+            }
+            if (seen.size !== points) problems.push(`the keyboard walk reached ${seen.size} of ${points} bars (the arrow keys skip bars, or two bars read the same)`);
+            if (unread > 0) problems.push(`the readout of ${unread} floating bar(s) does not read its two ends (the table has them: From and To)`);
+            if (ungrouped > 0) problems.push(`the readout of ${ungrouped} grouped bar(s) does not read its group`);
+            key('Home');
+            await pause(40);
+          }
+        }
+        if (host.getAttribute('data-zoomable') === '1' && !host.hasAttribute('data-zoomed')) {
+          key('+');
+          await pause(80);
+          if (!host.hasAttribute('data-zoomed')) problems.push('the + key does not zoom the chart');
+          else {
+            const control = [...host.querySelectorAll('[data-chart-reset]')].filter(visible);
+            if (control.length !== 1) problems.push(`a zoomed chart shows ${control.length} reset controls, it must show exactly one`);
+            key('0');
+            await pause(80);
+            if (host.hasAttribute('data-zoomed')) {
+              zeroDead = true;
+              key('Escape');
+              await pause(80);
+            }
+          }
+          // a scripted brush across the plot: the mouse events uPlot listens for, the pointer events the bar chart listens for (it brushes along its
+          // category axis: down the rows of a horizontal chart, across the columns of a vertical one)
+          const target = kind === 'bars' ? host.querySelector('[data-chart-focus]') : host.querySelector('.u-over');
+          if (target && visible(target) && !host.hasAttribute('data-zoomed')) {
+            const r = target.getBoundingClientRect();
+            const bars = kind === 'bars';
+            const down = bars && host.getAttribute('data-orientation') !== 'vertical';
+            // a bar chart is brushed from the middle of its first bar to the middle of a bar a third of the way along (the Contraste adoption, F8-3):
+            // a fixed share of the drawing reached across every row of a short horizontal chart, whose axis and title take most of its height, and
+            // a brush over every category is no zoom. Without bars to aim at, a fixed share of the drawing is dragged
+            const drawnBars = bars ? [...host.querySelectorAll('svg [data-bar]')].map((g) => g.getBoundingClientRect()).filter((q) => q.width > 0 && q.height > 0) : [];
+            const aim = drawnBars.length >= 2 ? [drawnBars[0], drawnBars[Math.max(1, Math.floor(drawnBars.length / 3))]] : null;
+            const mid = (q) => ({ x: q.left + q.width / 2, y: q.top + q.height / 2 });
+            const at = (f) => {
+              if (aim) {
+                const [a, b] = [mid(aim[0]), mid(aim[1])];
+                return down ? { x: r.left + r.width * 0.5, y: a.y + (b.y - a.y) * f } : { x: a.x + (b.x - a.x) * f, y: r.top + r.height * 0.5 };
+              }
+              return down ? { x: r.left + r.width * 0.5, y: r.top + r.height * (0.15 + 0.4 * f) } : { x: r.left + r.width * (0.3 + 0.3 * f), y: r.top + r.height * 0.5 };
+            };
+            const fire = (type, f) => {
+              const p = at(f);
+              // uPlot ignores a mouse move with no movement while it drags (a Chrome-on-Windows stray event), so the scripted ones carry some
+              const init = { bubbles: true, cancelable: true, clientX: p.x, clientY: p.y, button: 0, buttons: type.endsWith('up') ? 0 : 1, view: window, movementX: down ? 0 : 3, movementY: down ? 3 : 0 };
+              target.dispatchEvent(bars ? new PointerEvent(type.replace('mouse', 'pointer'), { ...init, pointerId: 41, pointerType: 'mouse', isPrimary: true }) : new MouseEvent(type, init));
+            };
+            if (!bars) target.dispatchEvent(new MouseEvent('mouseenter', { bubbles: false, clientX: at(0).x, clientY: at(0).y }));
+            fire('mousedown', 0);
+            for (let k = 1; k <= 6; k++) fire('mousemove', k / 6);
+            fire('mouseup', 1);
+            await pause(120);
+            if (!host.hasAttribute('data-zoomed')) problems.push('a drag across the plot does not zoom the chart (the brush is dead)');
+            else {
+              key('0');
+              await pause(80);
+              if (host.hasAttribute('data-zoomed')) {
+                zeroDead = true;
+                key('Escape');
+                await pause(80);
+              }
+            }
+          }
+        }
+        if (zeroDead) problems.push('the 0 key does not reset the zoom');
+      }
+    }
+    return out;
+  };
 }

package/gate/run.mjs

@@ -32,6 +32,9 @@
 //                            on a surface App (--workbench '', --app-route; 0.16.0) the same for the views of its tab row: another view or
 //                            sub-view in Focus or after the return, no ?focus=1 and view in the URL, no view that offers the control
 //   G19 values whole         a short value (number, percentage, amount, unit) sits on one line in every state
+//   G20 chart interactions   every chart is one tab stop with an accessible name, described by a table of its values and a one-line summary,
+//                            and a zoomed chart resets (the + key zooms, the visible control shows, the 0 key resets); a chart that turns zoom
+//                            off says why (12 letters and digits at least) and is listed among the waivers (0.19.0)
 // plus the ADR-0071 and ADR-0017 measures (viewport, one-row tabs, rail without scroll, centred prose, captions,
 // references).
 
@@ -485,6 +488,15 @@ export async function runGate(o) {
       if (r.names) fail('G6', where, `${r.label}: ${r.n} named x tick label(s) repeat another tick's label (${r.names.split('|').map((n) => `"${n}"`).join(', ')}); give every named tick a label of its own`);
       else fail('G6', where, `${r.label}: ${r.n} axis tick label(s) repeat the label before them (give the axis fixed decimals)`);
     }
+    // G20 (0.19.0): every chart is a tab stop with a name, a table of its values, a summary and a reset; one that turns zoom off is listed with its reason
+    for (const c of await page.evaluate((drive) => window.__caosGate.chartsTierA(drive), Boolean(s.interact))) {
+      for (const m of c.problems) fail('G20', where, `${c.label} (${c.kind} chart): ${m}`);
+      if (c.zoomOffSet) {
+        // listed once per route and language (the first state), failed in every state while the reason is too short
+        if (s.interact) waivers.push({ route: where.route, lang: s.lang, floor: 'chart zoom off', reason: c.zoomOff, valid: c.zoomOffValid });
+        if (!c.zoomOffValid) fail('G20', where, `${c.label}: zoom is turned off with a reason of fewer than 12 letters and digits ("${c.zoomOff}"); say why the chart cannot be zoomed`);
+      }
+    }
     // a filling card whose note leaves its drawing under the floor (CAOS_APP_SHELL#95); below 1280 px the document scrolls
     if (big) for (const c of f.fillStages ?? []) if (c.h < opt.stageFloor) fail('G6', where, `the drawing of ${c.label} keeps ${Math.round(c.h)} px under its note (floor ${opt.stageFloor} px)`);
     for (const m of await page.evaluate(() => window.__caosGate.drawingText())) fail('G10', where, m);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Shared web-app shell, workbench primitives, content primitives, design system and measured gate for the CAOS / Faena public apps (ADR-0016, ADR-0017, ADR-0071).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",

package/reserved-classes.json

@@ -22,13 +22,24 @@
     "caos-architecture-diagram",
     "caos-badges",
     "caos-bars",
+    "caos-bars-brush",
+    "caos-bars-cursor",
+    "caos-bars-foot",
+    "caos-bars-host",
+    "caos-bars-key",
+    "caos-bars-legend",
+    "caos-bars-readout",
+    "caos-bars-swatch",
     "caos-card",
     "caos-chart",
+    "caos-chart-axis-title",
+    "caos-chart-foot",
     "caos-chart-key",
     "caos-chart-key-button",
     "caos-chart-legend",
     "caos-chart-plot",
     "caos-chart-readout",
+    "caos-chart-reset",
     "caos-chart-swatch",
     "caos-chip-row",
     "caos-chipgroup",
@@ -336,13 +347,24 @@
     "caos-architecture-diagram",
     "caos-badges",
     "caos-bars",
+    "caos-bars-brush",
+    "caos-bars-cursor",
+    "caos-bars-foot",
+    "caos-bars-host",
+    "caos-bars-key",
+    "caos-bars-legend",
+    "caos-bars-readout",
+    "caos-bars-swatch",
     "caos-card",
     "caos-chart",
+    "caos-chart-axis-title",
+    "caos-chart-foot",
     "caos-chart-key",
     "caos-chart-key-button",
     "caos-chart-legend",
     "caos-chart-plot",
     "caos-chart-readout",
+    "caos-chart-reset",
     "caos-chart-swatch",
     "caos-chip-row",
     "caos-chipgroup",

package/styles.css

@@ -356,6 +356,9 @@ code, kbd { font-family: var(--font-mono); }
 .prose table { display: block; max-width: 100%; overflow-x: auto; }
 .prose pre { max-width: 100%; overflow-x: auto; }
 .prose img, .prose svg, .prose video { max-width: 100%; height: auto; }
+/* KaTeX draws a square root, a wide accent and a stretchy arrow as an SVG sized by its own rule (height: inherit, width 100% of
+   a span the glyph sizes); the media rule above made it height: auto, which collapsed it to under 2 px (shell 0.19.0, Contraste b11 and b13). */
+.prose .katex svg { height: inherit; max-width: none; }
 
 .fig-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: center; margin-block: 1.5rem; }
 .fig-row.rev { grid-template-columns: 1fr 1.1fr; }
@@ -652,6 +655,35 @@ svg.lucide { flex: none; }
 .caos-bars { position: relative; width: 100%; min-width: 0; }
 .caos-bars.fill { height: 100%; min-height: 0; overflow-y: auto; }
 .caos-bars > svg { display: block; }
+/* The bar chart's host holds the drawing, the hidden table, the readout and the reset control (shell 0.19.0, Tier A); a filling
+   chart gives the drawing the height the foot leaves. */
+.caos-bars-host { position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; }
+.caos-bars-host.fill { height: 100%; min-height: 0; }
+.caos-bars-host.fill > .caos-bars { flex: 1 1 0; height: auto; min-height: 0; }
+.caos-bars-host > .caos-bars { flex: none; }
+.caos-bars-host.fill > .caos-bars-foot, .caos-bars-host.fill > .caos-chart-axis-title { flex: none; }
+.caos-bars-foot { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
+.caos-bars-readout { flex: 1 1 0; min-width: 0; 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; }
+.caos-bars[data-chart-focus] { outline-offset: -2px; border-radius: var(--radius-sm); touch-action: pan-y; }
+.caos-bars[data-chart-focus][data-zoomed] { touch-action: none; }
+.caos-bars-brush { fill: var(--color-accent); fill-opacity: 0.16; stroke: var(--color-accent); stroke-width: 1; pointer-events: none; }
+.caos-bars-cursor { fill: var(--color-accent); fill-opacity: 0.1; pointer-events: none; }
+/* grouped bars (0.19.0): the legend of what each tone means, under the bars; a square swatch in the tone's colour */
+.caos-bars-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-bars-key { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
+.caos-bars-swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--swatch); }
+/* Tier A of the shell charts (0.19.0): the tab stop's ring, an axis title that moved off the axis, the foot with the reset control. */
+.caos-chart-plot[data-chart-focus]:focus-visible, .caos-bars[data-chart-focus]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
+/* A chart that holds the focus takes the wheel (a click gives it the focus, however it was given): the ring says so, in both themes. */
+.caos-chart[data-zoomable="1"] > .caos-chart-plot[data-chart-focus]:focus, .caos-bars-host[data-zoomable="1"] > .caos-bars[data-chart-focus]:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }
+.caos-chart-axis-title { margin: 0 0 0.15rem; font-size: 0.73rem; line-height: 1.3; color: var(--color-fg-subtle); overflow-wrap: anywhere; }
+.caos-chart-axis-title[data-axis-title="x"] { margin: 0.1rem 0 0; text-align: center; }
+.caos-chart.fill > .caos-chart-axis-title, .caos-chart.fill > .caos-chart-foot { flex: none; }
+.caos-chart-foot { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
+.caos-chart-foot > .caos-chart-readout { flex: 1 1 0; min-width: 0; }
+.caos-chart-reset { flex: none; box-sizing: border-box; min-width: 24px; min-height: 24px; margin: 0.15rem 0 0; padding: 0.15rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-fg); font: inherit; font-size: 0.72rem; line-height: 1.15; cursor: pointer; }
+.caos-chart-reset:hover { border-color: var(--color-fg-subtle); }
+.caos-chart-reset:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
 /* A view whose data is not there yet says so (and declares data-state="loading" for the gate). */
 .caos-pending { margin: auto; padding: var(--space-5); color: var(--color-fg-faint); font-size: 0.86rem; text-align: center; }
 /* A failed view (PanelBoundary): an inline message in its own frame, never a blank page. */

package/dist/chunk-DBCMAL2G.js

@@ -1,289 +0,0 @@
-import { LANG_STORAGE_KEY, THEME_STORAGE_KEY } from './chunk-33WTUQ7Q.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",
-  "--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"
-];
-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 NBSP = "\xA0";
-var SCIENTIFIC_BELOW = 1e-4;
-function belowScientific(magnitude) {
-  return magnitude !== 0 && Math.abs(magnitude) < SCIENTIFIC_BELOW * (1 - 1e-12);
-}
-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 scientific = v !== 0 && (opts.notation === "scientific" || belowScientific(v));
-  const grouping = opts.grouping === false ? { useGrouping: false } : {};
-  const nf = opts.decimals !== void 0 ? new Intl.NumberFormat(LOCALE[lang], { minimumFractionDigits: opts.decimals, maximumFractionDigits: opts.decimals, ...grouping }) : scientific ? new Intl.NumberFormat(LOCALE[lang], { notation: "scientific", maximumSignificantDigits: digits }) : Math.abs(v) >= 10 ** (digits - 1) ? new Intl.NumberFormat(LOCALE[lang], { maximumFractionDigits: 0, ...grouping }) : new Intl.NumberFormat(LOCALE[lang], { maximumSignificantDigits: digits, ...grouping });
-  return opts.percent ? `${nf.format(v)}${NBSP}%` : nf.format(v);
-}
-function formatTicks(values, lang, opts = {}) {
-  let o = opts;
-  if (opts.decimals === void 0 && opts.notation === void 0) {
-    const scale = opts.percent ? 100 : 1;
-    const small = values.some((v) => v !== null && v !== void 0 && Number.isFinite(v) && belowScientific(v * scale));
-    if (small) o = { ...opts, notation: "scientific" };
-  }
-  return values.map((v) => v === null || v === void 0 ? "" : formatNumber(v, lang, o));
-}
-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
-    }
-  );
-}
-
-// src/chart/text.ts
-function referenceLineName(lang, n, of) {
-  const base = lang === "es" ? "L\xEDnea de referencia" : "Reference line";
-  return of > 1 ? `${base} ${n}` : base;
-}
-var context;
-function fontFamily() {
-  if (typeof document === "undefined") return "sans-serif";
-  return getComputedStyle(document.documentElement).getPropertyValue("--font-sans").trim() || "sans-serif";
-}
-function textWidth(text, px, weight = 400) {
-  if (context === void 0) {
-    try {
-      context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
-    } catch {
-      context = null;
-    }
-  }
-  if (!context) return text.length * px * 0.62;
-  context.font = `${weight} ${px}px ${fontFamily()}`;
-  return context.measureText(text).width;
-}
-function widestLabel(labels, px, weight = 400) {
-  return Math.max(0, ...labels.map((label) => textWidth(label, px, weight)));
-}
-function shorten(line, width, px) {
-  if (textWidth(line, px) <= width) return line;
-  let cut = line;
-  while (cut.length > 1 && textWidth(`${cut}\u2026`, px) > width) cut = cut.slice(0, -1);
-  return `${cut.trimEnd()}\u2026`;
-}
-function fitLabel(label, width, px, maxLines = 2) {
-  if (textWidth(label, px) <= width) return { lines: [label], shortened: false };
-  const words = label.split(" ");
-  if (maxLines === 2 && words.length > 1) {
-    let best = null;
-    let bestWidth = Infinity;
-    for (let k = 1; k < words.length; k += 1) {
-      const first = words.slice(0, k).join(" ");
-      const second = words.slice(k).join(" ");
-      const widest = Math.max(textWidth(first, px), textWidth(second, px));
-      if (widest < bestWidth) {
-        bestWidth = widest;
-        best = [first, second];
-      }
-    }
-    if (best && bestWidth <= width) return { lines: best, shortened: false };
-    if (best) return { lines: [shorten(best[0], width, px), shorten(best[1], width, px)], shortened: true };
-  }
-  return { lines: [shorten(label, width, px)], shortened: true };
-}
-function niceStep(x) {
-  if (!(x > 0) || !Number.isFinite(x)) return 1;
-  const magnitude = 10 ** Math.floor(Math.log10(x));
-  return ([1, 2, 2.5, 5, 10].find((m) => m * magnitude >= x * (1 - 1e-12)) ?? 10) * magnitude;
-}
-function niceTicks(lo, hi, room, labelSize, most = 6) {
-  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [0];
-  if (hi < lo) [lo, hi] = [hi, lo];
-  if (hi === lo) hi = lo === 0 ? 1 : lo + Math.abs(lo);
-  const count = Math.max(2, Math.min(most, Math.floor(room / (labelSize + 16)) + 1));
-  const step = niceStep((hi - lo) / (count - 1));
-  const first = Math.floor(lo / step + 1e-9) * step;
-  const ticks = [];
-  for (let k = 0; first + k * step <= hi + step * 1e-9 || ticks.length < 2; k += 1) {
-    ticks.push(Number((first + k * step).toPrecision(12)));
-    if (ticks.length > 50) break;
-  }
-  if (ticks[ticks.length - 1] < hi - step * 1e-9) ticks.push(Number((ticks[ticks.length - 1] + step).toPrecision(12)));
-  return ticks;
-}
-
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, referenceLineName, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel };