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

package/dist/{tokens-BTOzar-U.d.ts → tokens-BvU9bFPw.d.ts}

@@ -39,6 +39,47 @@ 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;
 
+/**
+ * Text that fits the drawing it labels, measured in the font the page renders.
+ *
+ * Products drew their axes and labels with fixed margins and a fixed width per character. The Linux fonts (DejaVu
+ * Sans) are wider than the Windows ones and Spanish labels are longer than English ones, so a column sized for one
+ * ran its labels out of the drawing in the other (CAOS_Fragmenta 0.05.000: "Tamaño medio clásico, limitado al bloque
+ * in situ" read "dio clásico, limitado al bloque in situ"; its deploy gate failed on Linux). Here a label is measured
+ * with the canvas text metrics of the page's own font (`--font-sans`, which the gate's wide-font pass replaces),
+ * broken over two lines at a word when it does not fit, and only then shortened with an ellipsis, so the drawing can
+ * give the whole label as its title. Ported from CAOS_Fragmenta `viz/text.ts` (0.07.000).
+ */
+
+/** The name of a reference line that has no label, for the handle a reader drags (a screen reader says it): numbered when
+ * several unlabelled lines of one chart can be dragged, so each handle has a name of its own. */
+declare function referenceLineName(lang: Lang, n: number, of: number): string;
+/** The page's sans-serif stack as the shell token resolves it. */
+declare function fontFamily(): string;
+/** The width of one line of text at a font size, in CSS pixels; outside a browser, an estimate on the wide side. */
+declare function textWidth(text: string, px: number, weight?: number): number;
+/** The widest a set of labels needs, each on one line. */
+declare function widestLabel(labels: readonly string[], px: number, weight?: number): number;
+interface FittedLabel {
+    /** One or two lines; the last is shortened with an ellipsis only when the lines allowed are not enough. */
+    lines: string[];
+    /** Whether the label was shortened, so the drawing gives the whole label as its title. */
+    shortened: boolean;
+}
+/** A label in at most `maxLines` lines of `width` pixels: whole when it fits, broken at a word, shortened last. */
+declare function fitLabel(label: string, width: number, px: number, maxLines?: 1 | 2): FittedLabel;
+/** The 1, 2, 2.5 or 5 times a power of ten at or above `x`. */
+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. 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, 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
@@ -58,4 +99,4 @@ declare function resolveToken(token: string, fallback?: string): string;
  */
 declare function useThemeTokens(): Record<ShellToken, string>;
 
-export { type FormatOptions as F, NBSP as N, type ShellColorToken as S, NOT_AVAILABLE as a, SCIENTIFIC_BELOW as b, SHELL_TOKENS as c, type ShellToken as d, formatTicks as e, formatNumber as f, useThemeTokens as g, resolveToken as r, useFormat as u };
+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

@@ -498,7 +498,7 @@ export function installLib() {
       // charts whose axis gives a tick the label of the tick before it (UPlotChart declares data-ticks-repeat)
       repeatedTicks: [...document.querySelectorAll('[data-ticks-repeat]')]
         .filter((el) => visible(el) && Number(el.getAttribute('data-ticks-repeat')) > 0)
-        .map((el) => ({ label: describe(el.closest('[data-plot]') || el), n: Number(el.getAttribute('data-ticks-repeat')) })),
+        .map((el) => ({ label: describe(el.closest('[data-plot]') || el), n: Number(el.getAttribute('data-ticks-repeat')), names: el.getAttribute('data-ticks-repeated') || '' })),
       // the drawing a filling card keeps under its note (G6 stage floor): the body of every visible `PlotCard fill`
       fillStages: [...document.querySelectorAll('.caos-plot.fill')]
         .filter(visible)
@@ -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).
 
@@ -481,7 +484,18 @@ export async function runGate(o) {
       if (d) s.walkState.doc.push(d);
     }
     for (const r of f.repeatedTicks ?? []) {
-      fail('G6', where, `${r.label}: ${r.n} axis tick label(s) repeat the label before them (give the axis fixed decimals)`);
+      // named x ticks (UPlotChart declares the repeated names): a name used twice, wherever the two ticks sit on the axis
+      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)`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.17.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,12 +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",
@@ -335,12 +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-YECZXGVG.js

@@ -1,217 +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
-    }
-  );
-}
-
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, formatNumber, formatTicks, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens };