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

package/README.md

@@ -70,8 +70,11 @@ const config: ShellConfig = {
 - **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 cursor readout row, theme and language rebuilds.
-- **Numbers:** `formatNumber(value, lang, opts)` or `useFormat()`; never `toFixed` in a view.
+  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`.

package/chart.css

@@ -8,4 +8,12 @@
 .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

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { F as FormatOptions, S as ShellToken } from './tokens-BCqyHYx2.js';
+import { F as FormatOptions, S as ShellToken } from './tokens-CSV0MOgR.js';
 import { B as BiText } from './text-BlY47nIt.js';
 import 'zustand';
 
@@ -48,8 +48,10 @@ interface UPlotChartProps {
  * (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). The host declares `data-series`, `data-axis-titles`,
- * `data-ticks-cut` and `data-drawn` for the gate.
+ * 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;
 

package/dist/chart.js

@@ -1,4 +1,4 @@
-import { useShellLang, useThemeStore, useStageSize, pick, resolveToken, formatNumber } from './chunk-OV4HK6EQ.js';
+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';
@@ -140,6 +140,10 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
       "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 })
       ]
     }

package/dist/{chunk-OV4HK6EQ.js → chunk-LOSSTLPP.js}

@@ -112,11 +112,13 @@ function useThemeTokens() {
 
 // 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 nf = opts.decimals !== void 0 ? new Intl.NumberFormat(LOCALE[lang], { minimumFractionDigits: opts.decimals, maximumFractionDigits: opts.decimals }) : Math.abs(v) >= 10 ** ((opts.digits ?? 4) - 1) ? new Intl.NumberFormat(LOCALE[lang], { maximumFractionDigits: 0 }) : new Intl.NumberFormat(LOCALE[lang], { maximumSignificantDigits: opts.digits ?? 4 });
+  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() {

package/dist/index.d.ts

@@ -2,8 +2,8 @@ export { A as AppShell, a as ArchTab, b as ArchitectureConfig, c as Architecture
 import * as react from 'react';
 import { ReactNode, Component, ErrorInfo } from 'react';
 import * as zustand from 'zustand';
-import { F as FormatOptions } from './tokens-BCqyHYx2.js';
-export { N as NOT_AVAILABLE, a as SHELL_TOKENS, S as ShellToken, f as formatNumber, r as resolveToken, u as useFormat, b as useThemeTokens } from './tokens-BCqyHYx2.js';
+import { F as FormatOptions } from './tokens-CSV0MOgR.js';
+export { N as NOT_AVAILABLE, a as SHELL_TOKENS, S as ShellToken, f as formatNumber, r as resolveToken, u as useFormat, b as useThemeTokens } from './tokens-CSV0MOgR.js';
 import { L as Lang, B as BiText } from './text-BlY47nIt.js';
 export { p as pick, u as useLangStore, a as useShellLang } from './text-BlY47nIt.js';
 

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, formatNumber } from './chunk-OV4HK6EQ.js';
-export { NOT_AVAILABLE, SHELL_TOKENS, Stage, applyTheme, formatNumber, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-OV4HK6EQ.js';
+import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, formatNumber } from './chunk-LOSSTLPP.js';
+export { NOT_AVAILABLE, SHELL_TOKENS, Stage, applyTheme, formatNumber, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-LOSSTLPP.js';
 export { LANG_STORAGE_KEY, STANDARD_ROUTES, THEME_BOOT_SCRIPT, THEME_STORAGE_KEY } from './chunk-X6Y5CDUD.js';
 import { createContext, Component, useState, useRef, useId, useEffect, useCallback, useContext, useMemo } from 'react';
 import { useInRouterContext, NavLink, useLocation } from 'react-router';
@@ -397,7 +397,6 @@ function Frame({ config, pathname, routed, children }) {
       /* @__PURE__ */ jsx("span", { children: config.product.name }),
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
       /* @__PURE__ */ jsx("span", { children: c.complement }),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
       /* @__PURE__ */ jsx("span", { className: "footer-build", "data-version": config.version, "data-build": config.build ?? "", children: /* @__PURE__ */ jsxs("span", { children: [
         c.version,
         config.version,

package/dist/{tokens-BCqyHYx2.d.ts → tokens-CSV0MOgR.d.ts}

@@ -2,9 +2,10 @@ import { L as Lang } from './text-BlY47nIt.js';
 
 interface FormatOptions {
     /** Significant digits for a value below 10^(digits-1) (default 4); a larger value shows every integer digit, so a
-     * count is never rounded (27345 people, not 27,350). Ignored when `decimals` is set. */
+     * count is never rounded (27345 people, not 27,350). A magnitude below 1e-4 is written in scientific notation with
+     * these significant digits (6.53E-13). Ignored when `decimals` is set. */
     digits?: number;
-    /** Fixed number of decimals. */
+    /** Fixed number of decimals. The caller's explicit choice: a value below the last decimal reads as zero. */
     decimals?: number;
     /** Render a fraction as a percentage (0.123 -> 12.3 %). */
     percent?: boolean;
@@ -13,7 +14,7 @@ interface FormatOptions {
 declare const NOT_AVAILABLE: Record<Lang, string>;
 /**
  * A number in the interface language: a decimal point in English and a decimal comma in Spanish
- * (`conventions/languages.md`), significant digits by default. `null`, `undefined` and non-finite values render as
+ * (`conventions/languages.md`), significant digits by default, scientific notation below 1e-4. `null`, `undefined` and non-finite values render as
  * "not available", never as `NaN` (failure classes 5 and 23 of the 2026-10-04 history).
  */
 declare function formatNumber(value: number | null | undefined, lang: Lang, opts?: FormatOptions): string;

package/gate/inpage.mjs

@@ -101,17 +101,23 @@ export function installLib() {
     };
     walk(body, false);
 
-    // Tab rows: one row each (ADR-0071 rule 4); tops clustered so a 1px active-tab offset is not a second row.
+    // Tab rows: one row each (ADR-0071 rule 4); tops clustered so a 1px active-tab offset is not a second row. A row
+    // also shows its tabs whole: a row that shrank under a tall panel cut its tabs' height (known shell defect 16).
     const rows = [...document.querySelectorAll('[role="tablist"]')]
       .filter((tl) => visible(tl) && tl.getAttribute('aria-orientation') !== 'vertical')
       .map((tl) => {
-        const tops = [...tl.querySelectorAll('[role="tab"]')]
-          .filter((t) => t.closest('[role="tablist"]') === tl && visible(t))
-          .map((t) => t.getBoundingClientRect().top)
-          .sort((a, b) => a - b);
+        const tabs = [...tl.querySelectorAll('[role="tab"]')].filter((t) => t.closest('[role="tablist"]') === tl && visible(t));
+        const tops = tabs.map((t) => t.getBoundingClientRect().top).sort((a, b) => a - b);
         let n = tops.length ? 1 : 0;
         for (let i = 1; i < tops.length; i += 1) if (tops[i] - tops[i - 1] > 8) n += 1;
-        return { name: tl.getAttribute('aria-label') || describe(tl), rows: n };
+        // a shrunk row either lets its tabs overflow it or stretches them shorter than their own content
+        const lr = tl.getBoundingClientRect();
+        let cut = Math.max(0, tl.scrollHeight - tl.clientHeight);
+        for (const t of tabs) {
+          const r = t.getBoundingClientRect();
+          cut = Math.max(cut, t.scrollHeight - t.clientHeight, Math.round(Math.max(0, lr.top - r.top) + Math.max(0, r.bottom - lr.bottom)));
+        }
+        return { name: tl.getAttribute('aria-label') || describe(tl), rows: n, cut };
       });
 
     // The rail: no scroll (rule 6) and every descendant inside its box (G5).
@@ -312,13 +318,15 @@ export function installLib() {
       const s = getComputedStyle(a);
       const ar = a.getBoundingClientRect();
       let r = el.getBoundingClientRect();
+      // An element larger than the container is aligned by its start: aligning its end pushed its start out of
+      // view, and the probe then landed on whatever covers the container (known shell defect 18).
       if ((s.overflowX === 'auto' || s.overflowX === 'scroll') && a.scrollWidth > a.clientWidth) {
-        if (r.left < ar.left) setScroll(a, a.scrollLeft - (ar.left - r.left + 8), a.scrollTop);
+        if (r.left < ar.left || r.width > ar.width) setScroll(a, a.scrollLeft - (ar.left - r.left), a.scrollTop);
         else if (r.right > ar.right) setScroll(a, a.scrollLeft + (r.right - ar.right + 8), a.scrollTop);
       }
       r = el.getBoundingClientRect();
       if ((s.overflowY === 'auto' || s.overflowY === 'scroll') && a.scrollHeight > a.clientHeight) {
-        if (r.top < ar.top) setScroll(a, a.scrollLeft, a.scrollTop - (ar.top - r.top + 8));
+        if (r.top < ar.top || r.height > ar.height) setScroll(a, a.scrollLeft, a.scrollTop - (ar.top - r.top));
         else if (r.bottom > ar.bottom) setScroll(a, a.scrollLeft, a.scrollTop + (r.bottom - ar.bottom + 8));
       }
     }
@@ -334,7 +342,27 @@ export function installLib() {
     return Boolean(el);
   };
 
-  /** Every visible control can be brought into the viewport and receives the pointer at its centre (G5). */
+  /** The viewport cut by every ancestor that clips its content (overflow other than visible). */
+  const visibleArea = (el) => {
+    const area = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+    for (let a = el.parentElement; a && a !== document.body && a !== document.documentElement; a = a.parentElement) {
+      const s = getComputedStyle(a);
+      if (s.overflowX === 'visible' && s.overflowY === 'visible') continue;
+      const ar = a.getBoundingClientRect();
+      if (s.overflowX !== 'visible') {
+        area.left = Math.max(area.left, ar.left);
+        area.right = Math.min(area.right, ar.right);
+      }
+      if (s.overflowY !== 'visible') {
+        area.top = Math.max(area.top, ar.top);
+        area.bottom = Math.min(area.bottom, ar.bottom);
+      }
+    }
+    return area;
+  };
+
+  /** Every visible control can be brought into the viewport and receives the pointer at the centre of its visible
+   * part (G5). */
   G.reach = () => {
     const sel = 'a[href], button, select, input:not([type="hidden"]), textarea, [role="tab"], [role="button"], [tabindex]:not([tabindex="-1"])';
     const saved = new Map();
@@ -352,13 +380,25 @@ export function installLib() {
       const r = frags.length ? frags.reduce((a, b) => (b.width * b.height > a.width * a.height ? b : a)) : el.getBoundingClientRect();
       if (r.width < 1 || r.height < 1) continue;
       checked += 1;
-      const fits = r.width <= window.innerWidth && r.height <= window.innerHeight;
-      if (fits && (r.left < -1 || r.right > window.innerWidth + 1 || r.top < -1 || r.bottom > window.innerHeight + 1)) {
+      // The area the element can show in: the viewport cut by every ancestor that clips (known shell defect 18; an
+      // element that fits the window but not its scroll container was reported as never brought into view).
+      const area = visibleArea(el);
+      const fits = r.width <= area.right - area.left + 1 && r.height <= area.bottom - area.top + 1;
+      if (fits && (r.left < area.left - 1 || r.right > area.right + 1 || r.top < area.top - 1 || r.bottom > area.bottom + 1)) {
+        out.push(`${describe(el)} cannot be brought into the viewport (at ${Math.round(r.left)},${Math.round(r.top)})`);
+        continue;
+      }
+      // the pointer goes to the centre of the part that shows
+      const vx0 = Math.max(r.left, area.left);
+      const vx1 = Math.min(r.right, area.right);
+      const vy0 = Math.max(r.top, area.top);
+      const vy1 = Math.min(r.bottom, area.bottom);
+      if (vx1 - vx0 < 1 || vy1 - vy0 < 1) {
         out.push(`${describe(el)} cannot be brought into the viewport (at ${Math.round(r.left)},${Math.round(r.top)})`);
         continue;
       }
-      const px = Math.min(Math.max(r.left + Math.min(r.width, window.innerWidth) / 2, 0), window.innerWidth - 1);
-      const py = Math.min(Math.max(r.top + Math.min(r.height, window.innerHeight) / 2, 0), window.innerHeight - 1);
+      const px = Math.min(Math.max((vx0 + vx1) / 2, 0), window.innerWidth - 1);
+      const py = Math.min(Math.max((vy0 + vy1) / 2, 0), window.innerHeight - 1);
       const hit = document.elementFromPoint(px, py);
       const ok =
         hit && (hit === el || el.contains(hit) || (el.labels && [...el.labels].some((l) => l.contains(hit))) || (hit.tagName === 'LABEL' && hit.control === el));

package/gate/run.mjs

@@ -335,6 +335,7 @@ export async function runGate(o) {
     if (f.beyondCount) fail('G5', where, `${f.beyondCount} element(s) outside the viewport: ${f.beyond.join('; ')}`);
     if (big && f.docH > f.vh + 1) fail('ADR-0071.1', where, `the document scrolls: ${f.docH}px in a ${f.vh}px viewport (the page is the viewport)`);
     for (const r of f.rows) if (r.rows > 1) fail('ADR-0071.4', where, `tab row "${r.name}" wraps onto ${r.rows} rows`);
+    for (const r of f.rows) if (r.cut > 1) fail('G5', where, `tab row "${r.name}" cuts its tabs by ${r.cut}px (a row shrunk under its panel)`);
     if (f.rail) {
       if (big && f.rail.scroll > f.rail.client + 1) fail('ADR-0071.6', where, `the rail scrolls: ${f.rail.scroll}px of content in ${f.rail.client}px`);
       if (f.rail.outsideCount) fail('G5', where, `${f.rail.outsideCount} rail element(s) outside the rail: ${f.rail.outside.join('; ')}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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

@@ -24,8 +24,11 @@
     "caos-architecture-diagram",
     "caos-badges",
     "caos-chart",
+    "caos-chart-key",
+    "caos-chart-legend",
     "caos-chart-plot",
     "caos-chart-readout",
+    "caos-chart-swatch",
     "caos-chip-row",
     "caos-chipgroup",
     "caos-chipgroup-label",

package/styles.css

@@ -563,6 +563,11 @@ html, body { overflow-x: hidden; }
 .caos-wb-rail .caos-variant-note { font-size: 0.8rem; }
 .caos-cw-panel > .subtabs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-block: 0; }
 .caos-cw-panel > .subtabs > .subtablist { margin-bottom: 0.45rem; }
+/* Known shell defect 16: the group row and the sub-tab row are scroll containers (overflow-x auto), so their
+   automatic minimum height is zero, and in this column flex chain they shrank with a panel taller than the
+   instrument: the rows were clipped and the panel's top covered the sub-tabs (CAOS_Contraste, 2026-10-05). A tab
+   row keeps its height; the panel below it scrolls. */
+.caos-cw > .tabs > .tablist, .caos-cw-panel > .subtabs > .subtablist { flex: none; }
 .page-body.wide.caos-wb { padding-inline: 1rem; }
 .caos-cw-panel > .subtabs > .subtabpanels, .caos-cw-panel > .subtabs > .subtabpanels > .subtabpanel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
 .caos-cw-panel > .subtabs > .subtabpanels > .subtabpanel { gap: 0.6rem; }