@fasl-work/caos-app-shell 0.8.0 → 0.9.0

package/README.md

@@ -121,8 +121,9 @@ const config: ShellConfig = {
 `ChipGroup`, `Stage`, `useStageSize`, `makeStateKey`, `isStale`, `useWorkbenchState`,
 `WorkbenchStateContext`, `pick`; since 0.8.0 `SurfacePage`, `useUrlView`, `viewParamOf`, `replaceQueryParam`,
 `BREAKPOINTS`, `BarChart`, `textWidth`, `widestLabel`, `fitLabel`, `niceTicks`, `niceStep`, `fontFamily`,
-`formatTicks`, `NBSP`, `SCIENTIFIC_BELOW`, the type `ShellColorToken`. Separate entries: `/chart` (`UPlotChart`,
-`drawMarks`, `tickSteps`, `repeatedLabels`), `/keys` (the storage keys, no React), `/styles.css`, `/chart.css`,
+`formatTicks`, `NBSP`, `SCIENTIFIC_BELOW`, the type `ShellColorToken`; since 0.9.0 `ViewsRow`. Separate entries:
+`/chart` (`UPlotChart` with `x.log`, `parity`, `onPick`; `drawMarks`, `tickSteps`, `repeatedLabels`, `seriesStyle`,
+`sortOrder`, `parityRange`), `/keys` (the storage keys, no React), `/styles.css`, `/chart.css`,
 `/reserved-classes.json`. Bin: `caos-shell-gate`.
 
 ### Authenticated workbenches

package/chart.css

@@ -16,4 +16,7 @@
 .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); }
+/* A parity plot is square and centred in its box; a chart whose points can be picked shows a pointer. */
+.caos-chart[data-parity] .uplot { margin-inline: auto; }
+.caos-chart[data-pick] .u-over { cursor: pointer; }
 .caos-chart .u-cursor-x, .caos-chart .u-cursor-y { border-color: var(--color-fg-faint) !important; }

package/dist/chart.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import uPlot from 'uplot';
-import { F as FormatOptions, S as ShellColorToken } from './tokens-DkyEXX5g.js';
+import { F as FormatOptions, S as ShellColorToken } from './tokens-BTOzar-U.js';
 import { B as BiText } from './text-BlY47nIt.js';
 import 'zustand';
 
@@ -26,6 +26,7 @@ interface UPlotChartProps {
     x: ChartAxis & {
         values: number[];
         time?: boolean;
+        log?: boolean;
     };
     y: ChartAxis & {
         log?: boolean;
@@ -40,9 +41,26 @@ interface UPlotChartProps {
     /** 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. */
+    /** Called with the index under the cursor (or null), for linked views; the index is the caller's, before any
+     * sorting by x. */
     onCursor?: (index: number | null) => void;
+    /** Called with the caller's index of the point under the cursor when the plot is clicked (select a case, a blast). */
+    onPick?: (index: number) => void;
+    /** A parity plot: predicted (the series) against observed (x) on one shared range, in a square box, with the
+     * identity line. Unsorted x is allowed (the chart sorts it and maps every index back). */
+    parity?: boolean;
 }
+/** The colour and dash of a series: its own, or the rotation's; when the rotation comes round (a seventh series
+ * repeats the first colour) the repeat is dashed, so two series never look the same (CAOS_Fragmenta drew this for
+ * itself until 0.9.0). */
+declare function seriesStyle(s: ChartSeries, i: number): {
+    color: ShellColorToken;
+    dash?: number[];
+};
+/** The order that sorts x ascending (uPlot draws aligned data by increasing x), or null when x is already sorted. */
+declare function sortOrder(xs: readonly number[]): number[] | null;
+/** One range for both axes of a parity plot, padded by 5% of the span on each side. */
+declare function parityRange(...arrays: readonly (readonly (number | null)[])[]): [number, number];
 /**
  * The tick steps an axis may use. With fixed `decimals` (scaled by 100 for a percent) only multiples of the smallest
  * difference its labels can show, so no two ticks read the same: an integer axis ticks at integers, never at 1.5,
@@ -78,6 +96,6 @@ declare function drawMarks(u: uPlot, marks: {
  * (known shell defect 17). An axis with fixed decimals ticks only where its labels differ (`tickSteps`). The host
  * declares `data-series`, `data-axis-titles`, `data-ticks-cut`, `data-ticks-repeat` and `data-drawn` for the gate.
  */
-declare function UPlotChart({ x, y, series, marks, height, onCursor }: UPlotChartProps): react.JSX.Element;
+declare function UPlotChart({ x, y, series, marks, height, onCursor, onPick, parity }: UPlotChartProps): react.JSX.Element;
 
-export { type ChartAxis, type ChartSeries, UPlotChart, type UPlotChartProps, drawMarks, repeatedLabels, tickSteps };
+export { type ChartAxis, type ChartSeries, UPlotChart, type UPlotChartProps, drawMarks, parityRange, repeatedLabels, seriesStyle, sortOrder, tickSteps };

package/dist/chart.js

@@ -1,10 +1,35 @@
-import { useShellLang, useThemeStore, useStageSize, pick, resolveToken, NBSP, formatNumber, formatTicks } from './chunk-ZLJCB7DD.js';
+import { useShellLang, useThemeStore, useStageSize, pick, resolveToken, NBSP, formatNumber, formatTicks } from './chunk-IDUNUMCR.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 seriesStyle(s, i) {
+  const color = s.color ?? ROTATION[i % ROTATION.length];
+  const dash = s.dash ?? (!s.color && i >= ROTATION.length ? [6, 4] : void 0);
+  return { color, dash };
+}
+function sortOrder(xs) {
+  for (let i = 1; i < xs.length; i++) {
+    if (xs[i] < xs[i - 1]) return xs.map((_, j) => j).sort((a, b) => xs[a] - xs[b] || a - b);
+  }
+  return null;
+}
+function parityRange(...arrays) {
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const a of arrays) {
+    for (const v of a) {
+      if (v === null || !Number.isFinite(v)) continue;
+      lo = Math.min(lo, v);
+      hi = Math.max(hi, v);
+    }
+  }
+  if (!Number.isFinite(lo)) return [0, 1];
+  const pad = (hi - lo || Math.abs(hi) || 1) * 0.05;
+  return [lo - pad, hi + pad];
+}
 var STEPS = [];
 for (let e = -16; e <= 16; e++) for (const m of [1, 2, 2.5, 5]) STEPS.push(Number((m * 10 ** e).toPrecision(3)));
 function tickSteps(fmt) {
@@ -57,7 +82,7 @@ function drawMarks(u, marks, style) {
   }
   ctx.restore();
 }
-function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
+function UPlotChart({ x, y, series, marks, height = 280, onCursor, onPick, parity }) {
   const lang = useShellLang();
   const theme = useThemeStore((s) => s.theme);
   const fill = height === "fill";
@@ -70,20 +95,30 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
     },
     [measureRef]
   );
-  const width = box.width;
-  const h = fill ? box.height : height;
+  const width = parity ? Math.min(box.width, fill ? box.height : height) : box.width;
+  const h = parity ? width : fill ? box.height : height;
   const uRef = useRef(null);
   const hostRef = useRef(null);
   const [cursor, setCursor] = useState(null);
   const onCursorRef = useRef(onCursor);
   onCursorRef.current = onCursor;
+  const onPickRef = useRef(onPick);
+  onPickRef.current = onPick;
+  const order = useMemo(() => sortOrder(x.values), [x.values]);
+  const orderRef = useRef(order);
+  orderRef.current = order;
+  const xs = useMemo(() => order ? order.map((i) => x.values[i]) : x.values, [order, x.values]);
+  const ys = useMemo(() => series.map((s) => order ? order.map((i) => s.values[i] ?? null) : s.values), [order, series]);
+  const range = useMemo(() => parity ? parityRange(xs, ...ys) : null, [parity, xs, ys]);
   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],
+    s: series.map((s, i) => [pick(s.label, lang), seriesStyle(s, i), s.width ?? 2, s.mode ?? "line"]),
+    x: [xLabel, xUnit, Boolean(x.time), Boolean(x.log), x.format ?? null],
+    p: range,
+    pick: Boolean(onPick),
     y: [yLabel, yUnit, Boolean(y.log), y.range ?? null, y.format ?? null],
     m: (marks ?? []).map((m) => [m.x, pick(m.label, lang)]),
     theme,
@@ -91,7 +126,7 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
     h,
     w: width
   });
-  const data = useMemo(() => [x.values, ...series.map((s) => s.values)], [x.values, series]);
+  const data = useMemo(() => [xs, ...ys], [xs, ys]);
   useEffect(() => {
     const el = plotRef.current;
     if (!el || width <= 0 || h <= 0) return;
@@ -107,13 +142,23 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
       hostRef.current?.setAttribute("data-ticks-repeat", String(repeats.x + repeats.y));
       return labels;
     };
-    const xSteps = x.time ? void 0 : tickSteps(x.format);
+    const xSteps = x.time || x.log ? void 0 : tickSteps(x.format);
     const ySteps = y.log ? void 0 : tickSteps(y.format);
     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 } : {} } },
+      // a log axis labels the ticks uPlot keeps and passes null for the rest, which formatTicks leaves blank
+      scales: {
+        // a log x axis spans the data, not the decades around it (uPlot rounds out to the next decade, which left an
+        // axis to 1,000 for data that ends at 120)
+        x: {
+          time: Boolean(x.time),
+          distr: x.log ? 3 : 1,
+          ...range ? { range } : x.log ? { range: (_u, min, max) => [min, max] } : {}
+        },
+        y: { distr: y.log ? 3 : 1, ...range ? { range } : y.range ? { range: y.range } : {} }
+      },
       axes: [
         {
           stroke: fg,
@@ -149,8 +194,9 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
       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 } };
+          const style = seriesStyle(s, i);
+          const stroke = resolveToken(style.color, "#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: style.dash, spanGaps: false, points: { show: false } };
         })
       ],
       hooks: {
@@ -158,11 +204,33 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
           (u) => {
             const idx = u.cursor.idx ?? null;
             setCursor(idx);
-            onCursorRef.current?.(idx);
+            onCursorRef.current?.(idx === null ? null : orderRef.current ? orderRef.current[idx] : idx);
+          }
+        ],
+        ready: [
+          (u) => {
+            u.over.addEventListener("click", () => {
+              const idx = u.cursor.idx;
+              if (idx === null || idx === void 0 || !onPickRef.current) return;
+              onPickRef.current(orderRef.current ? orderRef.current[idx] : idx);
+            });
           }
         ],
         draw: [
           (u) => {
+            if (range) {
+              const ctx = u.ctx;
+              const pr = uPlot.pxRatio || 1;
+              ctx.save();
+              ctx.strokeStyle = resolveToken("--color-fg-faint", "#888");
+              ctx.lineWidth = Math.max(1, pr);
+              ctx.setLineDash([5 * pr, 4 * pr]);
+              ctx.beginPath();
+              ctx.moveTo(u.valToPos(range[0], "x", true), u.valToPos(range[0], "y", true));
+              ctx.lineTo(u.valToPos(range[1], "x", true), u.valToPos(range[1], "y", true));
+              ctx.stroke();
+              ctx.restore();
+            }
             if (!marks?.length) return;
             drawMarks(u, marks.map((m) => ({ x: m.x, label: pick(m.label, lang) })), {
               color: resolveToken("--color-warn", "#c80"),
@@ -184,9 +252,9 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
     uRef.current?.setData(data);
   }, [data]);
   const read = cursor !== null ? [
-    `${xLabel} ${formatNumber(x.values[cursor], lang, x.format ?? { digits: 4 })}${xUnit ? `${NBSP}${xUnit}` : ""}`,
+    `${xLabel} ${formatNumber(xs[cursor], lang, x.format ?? { digits: 4 })}${xUnit ? `${NBSP}${xUnit}` : ""}`,
     ...series.map(
-      (s) => `${pick(s.label, lang)} ${formatNumber(s.values[cursor] ?? null, lang, y.format ?? { digits: 4 })}${yUnit ? `${NBSP}${yUnit}` : ""}`
+      (s, k) => `${pick(s.label, lang)} ${formatNumber(ys[k][cursor] ?? null, lang, y.format ?? { digits: 4 })}${yUnit ? `${NBSP}${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(
@@ -199,10 +267,13 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
       "data-ticks-cut": "0",
       "data-ticks-repeat": "0",
       "data-drawn": width > 0 && h > 0 ? "1" : "0",
+      "data-parity": parity ? "1" : void 0,
+      "data-log-x": x.log ? "1" : void 0,
+      "data-pick": onPick ? "1" : void 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" }),
+        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": seriesStyle(s, i).dash ? "1" : void 0, children: [
+          /* @__PURE__ */ jsx("span", { className: "caos-chart-swatch", style: { "--swatch": `var(${seriesStyle(s, i).color})` }, "aria-hidden": "true" }),
           pick(s.label, lang)
         ] }, i)) }),
         /* @__PURE__ */ jsx("p", { className: "caos-chart-readout", "aria-live": "polite", title: read, children: read })
@@ -211,4 +282,4 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor }) {
   );
 }
 
-export { UPlotChart, drawMarks, repeatedLabels, tickSteps };
+export { UPlotChart, drawMarks, parityRange, repeatedLabels, seriesStyle, sortOrder, tickSteps };

package/dist/{chunk-ZLJCB7DD.js → chunk-IDUNUMCR.js}

@@ -148,7 +148,8 @@ function formatNumber(value, lang, opts = {}) {
   const v = opts.percent ? value * 100 : value;
   const digits = opts.digits ?? 4;
   const scientific = v !== 0 && (opts.notation === "scientific" || Math.abs(v) < SCIENTIFIC_BELOW);
-  const nf = opts.decimals !== void 0 ? new Intl.NumberFormat(LOCALE[lang], { minimumFractionDigits: opts.decimals, maximumFractionDigits: opts.decimals }) : scientific ? 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 });
+  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 = {}) {

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-DkyEXX5g.js';
-export { N as NBSP, a as NOT_AVAILABLE, b as SCIENTIFIC_BELOW, c as SHELL_TOKENS, S as ShellColorToken, d as ShellToken, f as formatNumber, e as formatTicks, r as resolveToken, u as useFormat, g as useThemeTokens } from './tokens-DkyEXX5g.js';
+import { F as FormatOptions } from './tokens-BTOzar-U.js';
+export { N as NBSP, a as NOT_AVAILABLE, b as SCIENTIFIC_BELOW, c as SHELL_TOKENS, S as ShellColorToken, d as ShellToken, f as formatNumber, e as formatTicks, r as resolveToken, u as useFormat, g as useThemeTokens } from './tokens-BTOzar-U.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';
 
@@ -823,4 +823,17 @@ declare function Stage({ label, children, className }: {
     className?: string;
 }): react.JSX.Element;
 
-export { BREAKPOINTS, BarChart, type BarChartProps, type BarDatum, BiText, Callout, type CaseDef, type CaseGroup, type CaseKind, CaseSelector, type CaseSelectorProps, type CaseSelectorText, CaseWorkbench, type CaseWorkbenchProps, ChipGroup, type ChipGroupProps, type ChipOption, type Citation, CitationsProvider, Cite, DocPage, DocSection, type DocSectionProps, Equation, Figure, type FittedLabel, FocusShell, type FocusShellProps, FormatOptions, Gauge, type GaugeProps, type GaugeZone, InlineMath, Knob, type KnobProps, type Lane, LaneBadge, Lang, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, type PausedVizController, PlotCard, type PlotCardProps, type Provenance, type RailSection, Readout, type ReadoutItem, type ReadoutProps, ReferenceList, Refs, Stage, type StageSize, type SubTabDef, SubTabs, type SubTabsProps, SurfacePage, type SurfacePageProps, type TabDef, type TabGroupDef, TabGroups, type TabGroupsProps, Tabs, type TabsProps, type Theme, ThemeToggle, type Tone, type UsePausedVizOptions, VariantBar, type VariantBarProps, type VariantDef, Verdict, type VerdictProps, type VizFrame, type VizLoop, type VizLoopDeps, type VizLoopOptions, type WorkbenchGroup, WorkbenchLayout, type WorkbenchLayoutProps, type WorkbenchRoute, WorkbenchShell, type WorkbenchShellProps, type WorkbenchState, WorkbenchStateContext, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, readCaseParam, readTheme, replaceQueryParam, sourcesPresent, textWidth, usePausedViz, useStageSize, useThemeStore, useUrlView, useWorkbenchState, viewParamOf, widestLabel, withCaseParam };
+interface ViewsRowProps {
+    /** The views side by side: `PlotCard`s, or components that render one. */
+    children: ReactNode;
+    /** The share of the row each view takes, in order (`[3, 2]`: the first takes three fifths); equal when absent. */
+    shares?: number[];
+}
+/**
+ * Views side by side in an instrument panel, each in a column the shell owns, so a filling `PlotCard` keeps its height
+ * chain and the row splits by `shares` (CAOS_Fragmenta's design row, three fifths for the response surface). Before
+ * 0.9.0 a product wrote this column itself (`.fr-viewcol`). Below 900 px the views stack.
+ */
+declare function ViewsRow({ children, shares }: ViewsRowProps): react.JSX.Element;
+
+export { BREAKPOINTS, BarChart, type BarChartProps, type BarDatum, BiText, Callout, type CaseDef, type CaseGroup, type CaseKind, CaseSelector, type CaseSelectorProps, type CaseSelectorText, CaseWorkbench, type CaseWorkbenchProps, ChipGroup, type ChipGroupProps, type ChipOption, type Citation, CitationsProvider, Cite, DocPage, DocSection, type DocSectionProps, Equation, Figure, type FittedLabel, FocusShell, type FocusShellProps, FormatOptions, Gauge, type GaugeProps, type GaugeZone, InlineMath, Knob, type KnobProps, type Lane, LaneBadge, Lang, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, type PausedVizController, PlotCard, type PlotCardProps, type Provenance, type RailSection, Readout, type ReadoutItem, type ReadoutProps, ReferenceList, Refs, Stage, type StageSize, type SubTabDef, SubTabs, type SubTabsProps, SurfacePage, type SurfacePageProps, type TabDef, type TabGroupDef, TabGroups, type TabGroupsProps, Tabs, type TabsProps, type Theme, ThemeToggle, type Tone, type UsePausedVizOptions, VariantBar, type VariantBarProps, type VariantDef, Verdict, type VerdictProps, ViewsRow, type ViewsRowProps, type VizFrame, type VizLoop, type VizLoopDeps, type VizLoopOptions, type WorkbenchGroup, WorkbenchLayout, type WorkbenchLayoutProps, type WorkbenchRoute, WorkbenchShell, type WorkbenchShellProps, type WorkbenchState, WorkbenchStateContext, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, readCaseParam, readTheme, replaceQueryParam, sourcesPresent, textWidth, usePausedViz, useStageSize, useThemeStore, useUrlView, useWorkbenchState, viewParamOf, widestLabel, withCaseParam };

package/dist/index.js

@@ -1,7 +1,7 @@
-import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, NOT_AVAILABLE, formatTicks, formatNumber, NBSP } from './chunk-ZLJCB7DD.js';
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, formatNumber, formatTicks, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-ZLJCB7DD.js';
+import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, NOT_AVAILABLE, formatTicks, formatNumber, NBSP } from './chunk-IDUNUMCR.js';
+export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, formatNumber, formatTicks, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-IDUNUMCR.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 { createContext, Component, useState, useRef, useId, useEffect, useCallback, useContext, useMemo, Children } from 'react';
 import { useInRouterContext, NavLink, useLocation } from 'react-router';
 import { Sun, Moon, Languages, Boxes, CodeXml, Globe, Briefcase, Info } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1264,11 +1264,11 @@ function BarChart({ title, data, axis, orientation = "horizontal", values = true
       const t1 = ticks[ticks.length - 1];
       const tickLabels = formatTicks(ticks, lang, fmt);
       const sx = (v) => x0 + (v - t0) / (t1 - t0 || 1) * (x1 - x0);
-      const rowH = fill && box.height > 0 ? Math.max(need, Math.min(need * 2.2, (box.height - axisH - 4) / data.length)) : need;
+      const rowH = fill && box.height > 0 ? Math.max(need, (box.height - axisH - 4) / data.length) : need;
       const top = 4;
       const plotBottom = top + data.length * rowH;
       drawnHeight = fill && box.height > 0 ? Math.max(box.height, plotBottom + axisH) : plotBottom + axisH;
-      const barH = Math.min(rowH * 0.62, 28);
+      const barH = Math.min(rowH * 0.5, 40);
       drawing = /* @__PURE__ */ jsxs("svg", { width, height: drawnHeight, role: "img", "aria-label": name, "data-chart": "", "data-chart-kind": "bars", children: [
         /* @__PURE__ */ jsx("title", { children: name }),
         ticks.map((t, i) => /* @__PURE__ */ jsxs("g", { children: [
@@ -1740,5 +1740,12 @@ function ChipGroup({ id, label, options, value, onChange }) {
     )) })
   ] });
 }
+function ViewsRow({ children, shares }) {
+  const items = Children.toArray(children).filter(Boolean);
+  return /* @__PURE__ */ jsx("div", { className: "caos-views-row", "data-views": items.length, children: items.map((child, i) => {
+    const share = shares?.[i];
+    return /* @__PURE__ */ jsx("div", { className: "caos-views-col", "data-share": share ?? 1, style: share && share > 0 ? { flexGrow: share } : void 0, children: child }, i);
+  }) });
+}
 
-export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DocPage, DocSection, Equation, Figure, FocusShell, Gauge, InlineMath, Knob, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Readout, ReferenceList, Refs, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, readCaseParam, replaceQueryParam, sourcesPresent, textWidth, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, viewParamOf, widestLabel, withCaseParam };
+export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DocPage, DocSection, Equation, Figure, FocusShell, Gauge, InlineMath, Knob, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Readout, ReferenceList, Refs, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, ViewsRow, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, readCaseParam, replaceQueryParam, sourcesPresent, textWidth, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, viewParamOf, widestLabel, withCaseParam };

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

@@ -12,6 +12,9 @@ interface FormatOptions {
     /** `scientific` writes every non-zero value in scientific notation with `digits` significant digits; the default
      * chooses by magnitude. An axis uses it so all its ticks share one notation (`formatTicks`). */
     notation?: 'auto' | 'scientific';
+    /** `false` writes the integer part without a group separator, in both languages: a calendar year on an axis, in a
+     * readout or in a table reads 2021, never 2,021 or 2.021 (known shell defect 30). Default true. */
+    grouping?: boolean;
 }
 /** The no-break space (U+00A0) that joins a value to its unit or sign. */
 declare const NBSP = "\u00A0";

package/gate/inpage.mjs

@@ -17,6 +17,11 @@ export function installLib() {
       });
   }
 
+  /** The ancestors of an element up to (not including) `stop`. */
+  function* ancestorsUntil(el, stop) {
+    for (let a = el.parentElement; a && a !== stop && a !== document.body; a = a.parentElement) yield a;
+  }
+
   const visible = (el) => {
     if (!el || el.nodeType !== 1) return false;
     const r = el.getBoundingClientRect();
@@ -233,7 +238,9 @@ export function installLib() {
           y,
           w: x2 - x,
           h: y2 - y,
-          right: r.right,
+          // a table or drawing inside a box that SCROLLS sideways (a wide table on a phone, ADR-0071 rule 3) ends where
+          // its box ends: a reader scrolls it; one cut by a box that hides its overflow still extends past the page
+          right: Math.min(r.right, ...[...ancestorsUntil(el, inst)].filter((a) => ['auto', 'scroll'].includes(getComputedStyle(a).overflowX)).map((a) => a.getBoundingClientRect().right)),
           stageKey: path(stageEl),
           stage: clipRect(stageEl.getBoundingClientRect()),
           viewKey: path(viewEl),
@@ -523,6 +530,25 @@ export function installLib() {
 
   // ---- 0.8.0 measures ----------------------------------------------------------------------------------------
 
+  /** The part of the page the ancestors of an element let it show when they CUT their content (overflow hidden or
+   * clip). A scroll container does not cut (a reader scrolls it), and neither does the viewport. */
+  const cutArea = (el) => {
+    const area = { left: -Infinity, top: -Infinity, right: Infinity, bottom: Infinity };
+    for (let a = el.parentElement; a && a !== document.body && a !== document.documentElement; a = a.parentElement) {
+      const s = getComputedStyle(a);
+      const ar = a.getBoundingClientRect();
+      if (s.overflowX === 'hidden' || s.overflowX === 'clip') {
+        area.left = Math.max(area.left, ar.left);
+        area.right = Math.min(area.right, ar.right);
+      }
+      if (s.overflowY === 'hidden' || s.overflowY === 'clip') {
+        area.top = Math.max(area.top, ar.top);
+        area.bottom = Math.min(area.bottom, ar.bottom);
+      }
+    }
+    return area;
+  };
+
   /** The boxes a text element occupies on screen: one per line (tspan) when it has several. */
   const textBoxes = (t) => {
     const spans = [...t.querySelectorAll('tspan')].filter((s) => (s.textContent || '').trim());
@@ -550,7 +576,7 @@ export function installLib() {
       if (svg.classList.contains('lucide') || !visible(svg)) continue;
       const sr = svg.getBoundingClientRect();
       if (sr.width < 48 || sr.height < 24) continue;
-      const area = visibleArea(svg);
+      const area = cutArea(svg);
       const box = { left: Math.max(sr.left, area.left), top: Math.max(sr.top, area.top), right: Math.min(sr.right, area.right), bottom: Math.min(sr.bottom, area.bottom) };
       const name = describe(svg.closest('[data-plot]') || svg);
       const texts = [...svg.querySelectorAll('text')].filter((t) => (t.textContent || '').trim() && visible(t));
@@ -559,7 +585,7 @@ export function installLib() {
         for (const b of textBoxes(t)) {
           // a label outside the visible part of the drawing: cut, or drawn where no one sees it
           if (b.top >= box.bottom || b.bottom <= box.top) {
-            if (sr.bottom <= area.bottom + 1 && sr.top >= area.top - 1) out.push(`${name}: the label "${(t.textContent || '').trim().slice(0, 40)}" lies outside the drawing`);
+            out.push(`${name}: the label "${(t.textContent || '').trim().slice(0, 40)}" lies outside the drawing`);
             continue;
           }
           const cutX = Math.max(0, box.left - b.left) + Math.max(0, b.right - box.right);
@@ -595,7 +621,8 @@ export function installLib() {
     const out = [];
     const skip = 'code, pre, kbd, samp, .katex, [data-version], [data-build], [translate="no"], script, style, [aria-hidden="true"]';
     const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
-    const re = /(?<![\w.,/:@#])(\d+)\.(\d+)(?![\w/@]|\.\d)/g;
+    // an exponent belongs to the number: 2.7e-08 on a Spanish page writes its decimal with a point too
+    const re = /(?<![\w.,/:@#])(\d+)\.(\d+)(?:[eE][-+]?\d+)?(?![\w/@]|\.\d)/g;
     for (let n = walker.nextNode(); n; n = walker.nextNode()) {
       const text = n.nodeValue || '';
       if (!/\d\.\d/.test(text)) continue;

package/gate/run.mjs

@@ -318,7 +318,7 @@ export async function runGate(o) {
           if (primary) {
             // ADR-0071 rule 9 / G5: every header route reached by a real pointer click from the App route.
             for (const route of routes.filter((r) => r !== '/')) {
-              await page.goto(urlFor('/'), { waitUntil: 'load', timeout: 30000 });
+              await page.goto(urlFor('/'), { waitUntil: 'load', timeout: 30000 }).catch(() => undefined);
               await settle(page);
               const link = page.locator('header nav a[href]');
               const hrefs = await link.evaluateAll((as) => as.map((a) => a.href));
@@ -326,8 +326,10 @@ export async function runGate(o) {
               let ok = false;
               if (idx >= 0) {
                 // A reader scrolls a narrow nav row to the link first; so does the gate, then clicks with the pointer.
-                await link.nth(idx).evaluate((el) => window.__caosGate.bringEl(el));
-                const box = await link.nth(idx).boundingBox();
+                // A link that does not answer in time is a failure of this route, never an exception that ends the
+                // whole run (a locator waited its default 30 s under load and aborted the gate, 0.9.0 self-test).
+                await link.nth(idx).evaluate((el) => window.__caosGate.bringEl(el), undefined, { timeout: 10000 }).catch(() => undefined);
+                const box = await link.nth(idx).boundingBox({ timeout: 10000 }).catch(() => null);
                 if (box) {
                   await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
                   await page.waitForURL((u) => routeOf(u.href) === route, { timeout: 3000 }).catch(() => undefined);

package/package.json

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

@@ -94,6 +94,7 @@
     "caos-verdict",
     "caos-verdict-text",
     "caos-verdict-title",
+    "caos-views-col",
     "caos-views-row",
     "caos-wb",
     "caos-wb-main",
@@ -210,7 +211,8 @@
     "tone-good",
     "tone-neutral",
     "tone-warn",
-    "two-col"
+    "two-col",
+    "uplot"
   ],
   "modifiers": [
     "accent",
@@ -325,6 +327,7 @@
     "caos-verdict",
     "caos-verdict-text",
     "caos-verdict-title",
+    "caos-views-col",
     "caos-views-row",
     "caos-wb",
     "caos-wb-main",
@@ -454,6 +457,7 @@
     "tone-neutral",
     "tone-warn",
     "two-col",
+    "uplot",
     "warn",
     "wide"
   ]

package/styles.css

@@ -579,6 +579,9 @@ svg.lucide { flex: none; }
    defect 23, #54: `.caos-plot.fill` outranked the row's zero basis and took the row). */
 .caos-views-row { display: flex; gap: 0.9rem; flex: 1 1 auto; min-height: 0; min-width: 0; }
 .caos-views-row > *, .caos-views-row > .caos-plot.fill { flex: 1 1 0; min-width: 0; }
+/* ViewsRow's column: a view inside it keeps its height chain (a filling card fills the column); its share of the row
+   is its flex-grow. */
+.caos-views-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 0.6rem; }
 
 /* Staleness: a view showing data for an earlier selection says so. */
 .caos-stale .caos-plot-body > :not(.caos-stale-overlay), .caos-readout.caos-stale dl { opacity: 0.45; }