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

package/chart.css

@@ -22,3 +22,8 @@
 .caos-chart.fill[data-parity] > .caos-chart-plot { display: flex; align-items: center; justify-content: center; }
 .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; }
+/* The key that solos a series (`solo`, 0.18.0): each entry is a button. At rest it reads as the plain key; the soloed one is
+   set off by a border and bold text, in the text colour, never by colour alone. */
+.caos-chart-key-button { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; margin: 0; padding: 0.15rem 0.45rem; border: 1px solid transparent; border-radius: 0.4rem; background: none; color: inherit; font: inherit; line-height: inherit; text-align: start; cursor: pointer; }
+.caos-chart-key-button:hover { border-color: var(--color-border); }
+.caos-chart-key-button[aria-pressed="true"] { border-color: var(--color-fg-subtle); color: var(--color-fg); font-weight: 600; }

package/dist/chart.d.ts

@@ -1,10 +1,15 @@
 import * as react from 'react';
 import uPlot from 'uplot';
-import { F as FormatOptions, S as ShellColorToken } from './tokens-BTOzar-U.js';
-import { B as BiText } from './text-BlY47nIt.js';
+import { F as FormatOptions, S as ShellColorToken } from './text-DyQ1A8oo.js';
+export { r as referenceLineName } from './text-DyQ1A8oo.js';
+import { B as BiText, L as Lang } from './text-BlY47nIt.js';
 import 'zustand';
 
 interface ChartSeries {
+    /** What identifies the series to the solo key (0.18.0): the solo follows the series with this id when the list of series
+     * changes (one dropped, one added, a label changed), not its position. Without an id the English label is the key. Unique
+     * within the chart; with two series of one key the first is taken. */
+    id?: string;
     label: BiText;
     /** One value per x; `null` leaves a gap. */
     values: (number | null)[];
@@ -20,6 +25,14 @@ interface ChartSeries {
      * value. It is drawn over the plot on its own x, outside the curve's data, so it takes no part in the cursor, the
      * pick or the readout, and the axes take its extent in. */
     x?: number[];
+    /** A dot at each value of a `line` series (CAOS_Fragmenta drew them under 40 values: `dots={x.length < 40}`). Off by
+     * default; no dot is drawn at a `null`. */
+    dots?: boolean;
+}
+/** A named x tick: the x value it sits at and the text the axis reads there (and the readout, for an x on it). */
+interface ChartTick {
+    value: number;
+    label: BiText;
 }
 /** What a reference line may be dragged over: the range it stays inside, and the step it snaps to (a hundredth of the
  * range when not given; on a log axis the step is a factor). */
@@ -46,6 +59,17 @@ interface UPlotChartProps {
         values: number[];
         time?: boolean;
         log?: boolean;
+        /** Named ticks (0.18.0): the axis ticks exactly at these values, no other, each labelled with its text in the page
+         * language (a categorical axis: protocols, blast ids). The readout names an x that sits on one by its label. A tick
+         * outside the range is not drawn; an empty list leaves uPlot its own ticks. A value listed twice keeps its first label.
+         * Labels must be different from each other, adjacent or not (the gate fails any repeated label, G6). An x is on a tick
+         * when it is within 1e-9 of the x span of it. Ignored on a time axis. */
+        ticks?: ChartTick[];
+        /** The x scale spans at least this range (0.18.0), as `y.range` fixes the y scale: widen it past the data so an end tick's
+         * label is not cut by the plot edge. The data and the overlays still widen it further. On a log axis a range that reaches 0
+         * or below is ignored (the overlays still widen the scale); on a parity chart it is ignored, the chart's own shared range
+         * rules. */
+        range?: [number, number];
     };
     y: ChartAxis & {
         log?: boolean;
@@ -58,10 +82,10 @@ interface UPlotChartProps {
         label: BiText;
     }[];
     /** Horizontal reference lines at y values, labelled at their right end (a null model's constant prediction, a
-     * target, a limit). */
+     * target, a limit). A line without a `label` is drawn with no label box and nothing reserved for one (a zero line). */
     yMarks?: {
         y: number;
-        label: BiText;
+        label?: BiText;
         tone?: YMarkTone;
         drag?: YMarkDrag;
     }[];
@@ -88,7 +112,40 @@ interface UPlotChartProps {
     readout?: (index: number) => string;
     /** The readout at rest; by default "Hover the chart to read the values". */
     hint?: BiText;
+    /** The key solos a series (0.18.0): each entry is a button (`aria-pressed`, Tab, click, Enter or Space) that dims every
+     * other series (alpha 0.12, 1 px) and leaves the chosen one as drawn; pressing it again releases it, pressing another
+     * moves the solo. The chart is redrawn, not rebuilt. A chart of one series shows the key too. Off by default. */
+    solo?: boolean;
 }
+/** The alpha a series takes when another one is soloed (0.18.0; what CAOS_Fragmenta's key did). */
+declare const SOLO_DIM_ALPHA = 0.12;
+/** How a series is drawn while `solo` (the index in `series` of the soloed one, or null) is held: as given, or dimmed to
+ * `SOLO_DIM_ALPHA` and 1 px when another is soloed. Dimmed, never hidden, so the reader keeps the context. */
+declare function soloStyle(solo: number | null, i: number, width: number): {
+    alpha: number;
+    width: number;
+};
+/** The values a named x axis ticks at inside [min, max]: ascending, each once; on a log axis only the ones above 0. A value
+ * that is not a number is dropped. */
+declare function tickSplits(ticks: readonly ChartTick[], min: number, max: number, log?: boolean): number[];
+/** The label of the named tick at an x, in the page language; null when no tick sits there. An x is on a tick when it is
+ * within 1e-9 of `span` (the x span, as `tickSplits` takes the range) of its value, so 0.1 + 0.2 is on a tick at 0.3; without
+ * a span only an equal x is. A value listed twice keeps its first label. */
+declare function tickLabelAt(ticks: readonly ChartTick[] | undefined, x: number, lang: Lang, span?: number): string | null;
+/** How many of the labels of named ticks repeat another's, adjacent or not (the gate's check of numeric ticks counts only
+ * neighbours, and on a categorical axis order means nothing), and which ones; an empty label is no label. */
+declare function namedRepeats(labels: readonly string[]): {
+    n: number;
+    names: string[];
+};
+/** What a series is known by to the solo key: its id, else its English label. */
+declare function soloKey(s: ChartSeries): string;
+/** The x scale of a chart whose x range is fixed, or whose overlays reach past the curve: the data's extent widened by the
+ * given range and by the overlays' x; null when none is given (uPlot's own range), and on a log axis when the data would reach 0.
+ * One x alone gets a unit either side, a decade on a log axis. `xs` is sorted ascending. */
+declare function xScaleRange(xs: readonly number[], ext: {
+    x: [number, number];
+} | null, range: readonly [number, number] | undefined, log: boolean): [number, number] | null;
 /** 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). */
@@ -169,12 +226,12 @@ declare function drawMarks(u: uPlot, marks: {
 /**
  * The horizontal reference lines of a chart and their labels: a dashed line across the plot, its label at the right
  * end above the line (below it when the line runs along the top), inside the plot, haloed; a label that would overlap
- * the one placed before it moves left of it. A line outside the y range is not drawn. A mark's `color` (the tone's) draws
+ * the one placed before it moves left of it. A line outside the y range is not drawn; a line without a label is drawn alone. A mark's `color` (the tone's) draws
  * its line and its label; without one `style.color` does.
  */
 declare function drawYMarks(u: uPlot, marks: {
     y: number;
-    label: string;
+    label?: string;
     color?: string;
 }[], style: {
     color: string;
@@ -195,8 +252,10 @@ declare function nearestPoint(xs: readonly number[], ys: readonly (readonly (num
  * 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). 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.
+ * declares `data-series`, `data-axis-titles`, `data-ticks-cut`, `data-ticks-repeat` and `data-drawn` for the gate. Since
+ * 0.18.0: named x ticks (`x.ticks`, declared in `data-x-tick-labels`), an x range (`x.range`), a key that solos a series
+ * (`solo`, declared in `data-solo`), dots on a line (`ChartSeries.dots`) and reference lines without a label.
  */
-declare function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height, onCursor, onPick, parity, readout, hint }: UPlotChartProps): react.JSX.Element;
+declare function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height, onCursor, onPick, parity, readout, hint, solo }: UPlotChartProps): react.JSX.Element;
 
-export { type ChartAxis, type ChartSeries, LOG_TABLE_FLOOR, UPlotChart, type UPlotChartProps, YMARK_TONE_TOKENS, type YMarkDrag, type YMarkTone, clampMark, decadeOnly, drawMarks, drawYMarks, logDecades, nearestPoint, nudgeMark, overlayExtent, parityBox, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, sortOrder, tickSteps };
+export { type ChartAxis, type ChartSeries, type ChartTick, LOG_TABLE_FLOOR, SOLO_DIM_ALPHA, UPlotChart, type UPlotChartProps, YMARK_TONE_TOKENS, type YMarkDrag, type YMarkTone, clampMark, decadeOnly, drawMarks, drawYMarks, logDecades, namedRepeats, nearestPoint, nudgeMark, overlayExtent, parityBox, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, soloKey, soloStyle, sortOrder, tickLabelAt, tickSplits, tickSteps, xScaleRange };

package/dist/chart.js

@@ -1,8 +1,9 @@
-import { useShellLang, useThemeStore, useStageSize, pick, resolveToken, NBSP, formatNumber, formatTicks } from './chunk-YECZXGVG.js';
+import { pick, useShellLang, useThemeStore, useStageSize, resolveToken, NBSP, formatNumber, formatTicks, referenceLineName } from './chunk-DBCMAL2G.js';
+export { referenceLineName } from './chunk-DBCMAL2G.js';
 import './chunk-33WTUQ7Q.js';
-import { useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import { useRef, useCallback, useState, useEffect, useMemo } from 'react';
 import uPlot from 'uplot';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var YMARK_TONE_TOKENS = {
   warn: "--color-warn",
@@ -11,6 +12,52 @@ var YMARK_TONE_TOKENS = {
   neutral: "--color-fg-subtle"
 };
 var ROTATION = ["--color-accent", "--color-magenta", "--color-accent-2", "--color-good", "--color-warn", "--color-bad"];
+var SOLO_DIM_ALPHA = 0.12;
+function soloStyle(solo, i, width) {
+  return solo !== null && solo !== i ? { alpha: SOLO_DIM_ALPHA, width: 1 } : { alpha: 1, width };
+}
+function tickSplits(ticks, min, max, log = false) {
+  const eps = Math.abs(max - min) * 1e-9;
+  const values = ticks.map((t) => t.value).filter((v) => Number.isFinite(v) && (!log || v > 0) && v >= min - eps && v <= max + eps);
+  return [...new Set(values)].sort((a, b) => a - b);
+}
+function tickLabelAt(ticks, x, lang, span = 0) {
+  const eps = Math.abs(span) * 1e-9;
+  const t = ticks?.find((one) => Math.abs(one.value - x) <= eps);
+  return t ? pick(t.label, lang) : null;
+}
+function namedRepeats(labels) {
+  const seen = /* @__PURE__ */ new Set();
+  const names = [];
+  let n = 0;
+  for (const l of labels) {
+    if (!l) continue;
+    if (seen.has(l)) {
+      n++;
+      if (!names.includes(l)) names.push(l);
+    } else seen.add(l);
+  }
+  return { n, names };
+}
+function soloKey(s) {
+  return s.id ?? pick(s.label, "en");
+}
+function xScaleRange(xs, ext, range, log) {
+  const given = range && !(log && Math.min(range[0], range[1]) <= 0) ? range : void 0;
+  if (!ext && !given || xs.length === 0) return null;
+  let lo = xs[0];
+  let hi = xs[xs.length - 1];
+  if (ext) {
+    lo = Math.min(lo, ext.x[0]);
+    hi = Math.max(hi, ext.x[1]);
+  }
+  if (given) {
+    lo = Math.min(lo, given[0], given[1]);
+    hi = Math.max(hi, given[0], given[1]);
+  }
+  if (log && !(lo > 0)) return null;
+  return hi > lo ? [lo, hi] : log ? [lo / 10, hi * 10] : [lo - 1, hi + 1];
+}
 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);
@@ -221,6 +268,7 @@ function drawYMarks(u, marks, style) {
     ctx.lineTo(right, py);
     ctx.stroke();
     ctx.setLineDash([]);
+    if (!m.label) continue;
     const w = ctx.measureText(m.label).width;
     const base = py - gap - textH < top ? py + gap + textH : py - gap;
     let x1 = right - gap;
@@ -255,7 +303,7 @@ function nearestPoint(xs, ys, left, top) {
   }
   return best;
 }
-function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280, onCursor, onPick, parity, readout, hint }) {
+function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280, onCursor, onPick, parity, readout, hint, solo }) {
   const lang = useShellLang();
   const theme = useThemeStore((s) => s.theme);
   const fill = height === "fill";
@@ -273,6 +321,14 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
   const uRef = useRef(null);
   const hostRef = useRef(null);
   const [cursor, setCursor] = useState(null);
+  const [soloPick, setSoloPick] = useState(null);
+  const soloFound = solo && soloPick !== null ? series.findIndex((s) => soloKey(s) === soloPick) : -1;
+  const soloIdx = soloFound >= 0 ? soloFound : null;
+  const soloRef = useRef(soloIdx);
+  soloRef.current = soloIdx;
+  useEffect(() => {
+    if (soloPick !== null && soloIdx === null) setSoloPick(null);
+  }, [soloPick, soloIdx]);
   const onCursorRef = useRef(onCursor);
   onCursorRef.current = onCursor;
   const onPickRef = useRef(onPick);
@@ -290,19 +346,15 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
   const levels = useMemo(() => (yMarks ?? []).flatMap((m) => m.drag ? [m.drag.min, m.drag.max] : [m.y]), [yMarks]);
   const range = useMemo(() => parity ? parityRange(xs, ...ys, levels, ext ? [...ext.x, ...ext.y] : []) : null, [parity, xs, ys, levels, ext]);
   const yLevels = !parity && !y.range && (levels.length > 0 || ext) ? [...levels, ...ext ? ext.y : []] : null;
-  const xExt = useMemo(() => {
-    if (!ext || range || xs.length === 0) return null;
-    const lo = Math.min(xs[0], ext.x[0]);
-    const hi = Math.max(xs[xs.length - 1], ext.x[1]);
-    if (x.log && !(lo > 0)) return null;
-    return hi > lo ? [lo, hi] : x.log ? [lo / 10, hi * 10] : [lo - 1, hi + 1];
-  }, [ext, range, xs, x.log]);
+  const xExt = useMemo(() => range ? null : xScaleRange(xs, ext, x.range, Boolean(x.log)), [ext, range, xs, x.log, x.range]);
+  const xSpan = xs.length > 0 ? Math.max(Math.abs(xs[xs.length - 1] - xs[0]), x.range ? Math.abs(x.range[1] - x.range[0]) : 0) : 0;
+  const ticks = !x.time && x.ticks && x.ticks.length > 0 ? x.ticks : void 0;
   const tiny = useMemo(
     () => ({
-      x: Boolean(x.log) && smallestPositive(ext ? [xs, ext.x] : [xs], range) < LOG_TABLE_FLOOR,
+      x: !ticks && Boolean(x.log) && smallestPositive(ext ? [xs, ext.x] : [xs], range) < LOG_TABLE_FLOOR,
       y: Boolean(y.log) && smallestPositive(yLevels ? [...ys, yLevels] : ys, range ?? y.range) < LOG_TABLE_FLOOR
     }),
-    [x.log, y.log, xs, ys, range, y.range, yLevels, ext]
+    [x.log, y.log, xs, ys, range, y.range, yLevels, ext, ticks]
   );
   const xLabel = pick(x.label, lang);
   const yLabel = pick(y.label, lang);
@@ -318,14 +370,14 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
   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), seriesStyle(s, i), s.width ?? 2, s.mode ?? "line", s.size ?? 9, isOverlay(s)]),
-    x: [xLabel, xUnit, Boolean(x.time), Boolean(x.log), x.format ?? null, tiny.x, xExt],
+    s: series.map((s, i) => [pick(s.label, lang), seriesStyle(s, i), s.width ?? 2, s.mode ?? "line", s.size ?? 9, isOverlay(s), Boolean(s.dots)]),
+    x: [xLabel, xUnit, Boolean(x.time), Boolean(x.log), x.format ?? null, tiny.x, xExt, ticks ? ticks.map((t) => [t.value, pick(t.label, lang)]) : null],
     oe: ext,
     p: range,
     pick: Boolean(onPick),
     y: [yLabel, yUnit, Boolean(y.log), y.range ?? null, y.format ?? null, tiny.y],
     m: (marks ?? []).map((m) => [m.x, pick(m.label, lang)]),
-    ym: (yMarks ?? []).map((m) => m.drag ? ["drag", m.drag] : [m.y, pick(m.label, lang), m.tone ?? "warn"]),
+    ym: (yMarks ?? []).map((m) => m.drag ? ["drag", m.drag, Boolean(m.label)] : [m.y, m.label ? pick(m.label, lang) : null, m.tone ?? "warn"]),
     theme,
     lang,
     h,
@@ -342,12 +394,24 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
     const font = `11px ${family}`;
     const surface = resolveToken("--color-surface", "#fff");
     const repeats = { x: 0, y: 0 };
+    const declareTicks = (axis, labels, repeated = repeatedLabels(labels)) => {
+      repeats[axis] = repeated;
+      hostRef.current?.setAttribute("data-ticks-repeat", String(repeats.x + repeats.y));
+      hostRef.current?.setAttribute(`data-ticks-${axis}`, String(labels.filter((l) => l).length));
+    };
     const tick = (fmt, axis, pre) => (_u, vals) => {
       const labels = formatTicks(pre ? pre(vals) : vals, lang, fmt ?? { digits: 4 });
       if (axis === "x" && pre) hostRef.current?.setAttribute("data-log-labels", labels.filter((l) => l).join("|"));
-      repeats[axis] = repeatedLabels(labels);
-      hostRef.current?.setAttribute("data-ticks-repeat", String(repeats.x + repeats.y));
-      hostRef.current?.setAttribute(`data-ticks-${axis}`, String(labels.filter((l) => l).length));
+      declareTicks(axis, labels);
+      return labels;
+    };
+    const namedTicks = (_u, vals) => {
+      const labels = vals.map((v) => v === null || v === void 0 ? "" : tickLabelAt(ticks, v, lang) ?? "");
+      hostRef.current?.setAttribute("data-x-tick-labels", labels.filter((l) => l).join("|"));
+      const dup = namedRepeats(labels);
+      if (dup.n > 0) hostRef.current?.setAttribute("data-ticks-repeated", dup.names.join("|"));
+      else hostRef.current?.removeAttribute("data-ticks-repeated");
+      declareTicks("x", labels, dup.n);
       return labels;
     };
     const near = { left: NaN, top: NaN, idx: null };
@@ -401,10 +465,15 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
           label: xUnit ? `${xLabel} (${xUnit})` : xLabel,
           labelFont: font,
           // a log x axis labels the decades only; the ticks between stay drawn, unlabelled
-          values: x.time ? void 0 : tick(x.format, "x", x.log && !tiny.x ? decadeOnly : void 0),
-          ...xSteps ? { incrs: xSteps } : {},
-          ...range ? { space: PARITY_TICK_SPACE } : {},
-          ...tiny.x ? DECADE_AXIS : {}
+          values: x.time ? void 0 : ticks ? namedTicks : tick(x.format, "x", x.log && !tiny.x ? decadeOnly : void 0),
+          ...ticks ? (
+            // exactly the named values, no other tick
+            { splits: (_u, _i, min, max) => tickSplits(ticks, min, max, Boolean(x.log)), filter: (_u, splits) => splits }
+          ) : {
+            ...xSteps ? { incrs: xSteps } : {},
+            ...range ? { space: PARITY_TICK_SPACE } : {},
+            ...tiny.x ? DECADE_AXIS : {}
+          }
         },
         {
           stroke: fg,
@@ -434,7 +503,8 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
         ...baseEntries.map(({ s, i }) => {
           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: s.size ?? 9, fill: stroke } } : { label: pick(s.label, lang), stroke, width: s.width ?? 2, dash: style.dash, spanGaps: false, points: { show: false } };
+          const dim = soloStyle(soloRef.current, i, s.mode === "points" ? 1.5 : s.width ?? 2);
+          return s.mode === "points" ? { label: pick(s.label, lang), stroke, width: dim.width, alpha: dim.alpha, paths: () => null, points: { show: true, space: 0, size: s.size ?? 9, fill: stroke } } : { label: pick(s.label, lang), stroke, width: dim.width, alpha: dim.alpha, dash: style.dash, spanGaps: false, points: s.dots ? { show: true, size: 5, fill: stroke } : { show: false } };
         })
       ],
       hooks: {
@@ -529,6 +599,7 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
               ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
               ctx.clip();
               for (const { s, i } of dots) {
+                ctx.globalAlpha = soloStyle(soloRef.current, i, 1).alpha;
                 ctx.fillStyle = resolveToken(seriesStyle(s, i).color, "#4a8");
                 ctx.strokeStyle = surface;
                 ctx.lineWidth = Math.max(1, pr);
@@ -552,7 +623,7 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
             }
             const markStyle = { color: resolveToken("--color-warn", "#c80"), halo: surface, family };
             const lines = yMarksRef.current ?? [];
-            if (lines.length) drawYMarks(u, lines.map((m, i) => ({ y: liveRef.current[i] ?? m.y, label: pick(m.label, lang), color: resolveToken(YMARK_TONE_TOKENS[m.tone ?? "warn"], "#c80") })), markStyle);
+            if (lines.length) drawYMarks(u, lines.map((m, i) => ({ y: liveRef.current[i] ?? m.y, label: m.label ? pick(m.label, lang) : void 0, color: resolveToken(YMARK_TONE_TOKENS[m.tone ?? "warn"], "#c80") })), markStyle);
             u.over.querySelectorAll("[data-y-handle]").forEach((el2) => {
               const i = Number(el2.getAttribute("data-y-handle"));
               const m = lines[i];
@@ -561,16 +632,22 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
               const top = u.valToPos(v, "y");
               el2.style.display = Number.isFinite(top) && top >= 0 && top <= u.bbox.height / (uPlot.pxRatio || 1) ? "" : "none";
               el2.style.top = `${top - HANDLE_HEIGHT / 2}px`;
-              const label = pick(m.label, lang);
-              el2.setAttribute("aria-label", label);
+              const label = m.label ? pick(m.label, lang) : "";
+              const shown = `${formatNumber(v, lang, y.format ?? { digits: 4 })}${yUnit ? `${NBSP}${yUnit}` : ""}`;
+              const unnamed = lines.flatMap((one, k) => one.drag && !one.label ? [k] : []);
+              el2.setAttribute("aria-label", label || referenceLineName(lang, unnamed.indexOf(i) + 1, unnamed.length));
               el2.setAttribute("aria-valuenow", String(Number(v.toPrecision(12))));
-              el2.setAttribute("aria-valuetext", `${label}: ${formatNumber(v, lang, y.format ?? { digits: 4 })}${yUnit ? `${NBSP}${yUnit}` : ""}`);
+              el2.setAttribute("aria-valuetext", label ? `${label}: ${shown}` : shown);
             });
             if (marks?.length) drawMarks(u, marks.map((m) => ({ x: m.x, label: pick(m.label, lang) })), markStyle);
           }
         ]
       }
     };
+    if (!ticks) {
+      hostRef.current?.removeAttribute("data-x-tick-labels");
+      hostRef.current?.removeAttribute("data-ticks-repeated");
+    }
     uRef.current?.destroy();
     uRef.current = new uPlot(opts, data, el);
     return () => {
@@ -582,12 +659,25 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
     uRef.current?.setData(data);
   }, [data]);
   const overlaysKey = JSON.stringify(overlays.map(({ s, i }) => [i, s.x, s.values, s.size ?? 9, seriesStyle(s, i).color]));
-  const linesKey = JSON.stringify((yMarks ?? []).map((m) => [m.y, pick(m.label, lang), m.tone ?? "warn"]));
+  const linesKey = JSON.stringify((yMarks ?? []).map((m) => [m.y, m.label ? pick(m.label, lang) : null, m.tone ?? "warn"]));
   useEffect(() => {
     uRef.current?.redraw(false);
   }, [linesKey, overlaysKey]);
+  useEffect(() => {
+    const u = uRef.current;
+    if (!u) return;
+    baseEntries.forEach(({ s, i }, k) => {
+      const dim = soloStyle(soloIdx, i, s.mode === "points" ? 1.5 : s.width ?? 2);
+      const one = u.series[k + 1];
+      if (!one) return;
+      one.alpha = dim.alpha;
+      one.width = dim.width;
+    });
+    u.redraw(false);
+  }, [soloIdx, baseEntries]);
   const read = cursor !== null && readout ? readout(order ? order[cursor] : cursor) : cursor !== null ? [
-    `${xLabel} ${formatNumber(xs[cursor], lang, x.format ?? { digits: 4 })}${xUnit ? `${NBSP}${xUnit}` : ""}`,
+    // an x that sits on a named tick is named by it, not by its number
+    tickLabelAt(ticks, xs[cursor], lang, xSpan) !== null ? `${xLabel} ${tickLabelAt(ticks, xs[cursor], lang, xSpan)}` : `${xLabel} ${formatNumber(xs[cursor], lang, x.format ?? { digits: 4 })}${xUnit ? `${NBSP}${xUnit}` : ""}`,
     ...baseEntries.map(({ s }, k) => ({ s, v: ys[k][cursor] ?? null })).filter(({ v }) => !scatter || v !== null).map(({ s, v }) => `${pick(s.label, lang)} ${formatNumber(v, lang, y.format ?? { digits: 4 })}${yUnit ? `${NBSP}${yUnit}` : ""}`)
   ].join(" \xB7 ") : hint ? pick(hint, lang) : lang === "es" ? "Pase el cursor sobre el gr\xE1fico para leer los valores" : "Hover the chart to read the values";
   return /* @__PURE__ */ jsxs(
@@ -606,16 +696,20 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
       "data-y-marks": yMarks?.length ? String(yMarks.length) : void 0,
       "data-y-drag": dragCount ? String(dragCount) : void 0,
       "data-overlay": overlays.length ? String(overlays.length) : void 0,
+      "data-solo": soloIdx !== null ? String(soloIdx) : 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": seriesStyle(s, i).dash ? "1" : void 0, children: [
+        (series.length > 1 || solo) && /* @__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__ */ jsx("li", { className: "caos-chart-key", "data-mode": s.mode ?? "line", "data-dash": seriesStyle(s, i).dash ? "1" : void 0, children: solo ? /* @__PURE__ */ jsxs("button", { type: "button", className: "caos-chart-key-button", "aria-pressed": soloIdx === i, onClick: () => setSoloPick(soloIdx === i ? null : soloKey(s)), children: [
+          /* @__PURE__ */ jsx("span", { className: "caos-chart-swatch", style: { "--swatch": `var(${seriesStyle(s, i).color})` }, "aria-hidden": "true" }),
+          pick(s.label, lang)
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "caos-chart-swatch", style: { "--swatch": `var(${seriesStyle(s, i).color})` }, "aria-hidden": "true" }),
           pick(s.label, lang)
-        ] }, i)) }),
+        ] }) }, i)) }),
         /* @__PURE__ */ jsx("p", { className: "caos-chart-readout", "aria-live": "polite", title: read, children: read })
       ]
     }
   );
 }
 
-export { LOG_TABLE_FLOOR, UPlotChart, YMARK_TONE_TOKENS, clampMark, decadeOnly, drawMarks, drawYMarks, logDecades, nearestPoint, nudgeMark, overlayExtent, parityBox, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, sortOrder, tickSteps };
+export { LOG_TABLE_FLOOR, SOLO_DIM_ALPHA, UPlotChart, YMARK_TONE_TOKENS, clampMark, decadeOnly, drawMarks, drawYMarks, logDecades, namedRepeats, nearestPoint, nudgeMark, overlayExtent, parityBox, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, soloKey, soloStyle, sortOrder, tickLabelAt, tickSplits, tickSteps, xScaleRange };

package/dist/{chunk-YECZXGVG.js → chunk-DBCMAL2G.js}

@@ -214,4 +214,76 @@ function Stage({ label, children, className }) {
   );
 }
 
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, formatNumber, formatTicks, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens };
+// 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 };

package/dist/index.d.ts

@@ -2,8 +2,8 @@ export { A as APP_ROUTE, a as AppShell, b as ArchTab, c as ArchitectureConfig, d
 import * as react from 'react';
 import { ReactNode, Component, ErrorInfo } from 'react';
 import * as zustand from 'zustand';
-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 { F as FormatOptions } from './text-DyQ1A8oo.js';
+export { a as FittedLabel, N as NBSP, b as NOT_AVAILABLE, c as SCIENTIFIC_BELOW, d as SHELL_TOKENS, S as ShellColorToken, e as ShellToken, f as fitLabel, g as fontFamily, h as formatNumber, i as formatTicks, n as niceStep, j as niceTicks, k as resolveToken, t as textWidth, u as useFormat, l as useThemeTokens, w as widestLabel } from './text-DyQ1A8oo.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';
 
@@ -1118,40 +1118,6 @@ interface BarChartProps {
  */
 declare function BarChart({ title, data, axis, orientation, values, height, onSelect }: BarChartProps): react.JSX.Element;
 
-/**
- * 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 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.
- */
-declare function niceTicks(lo: number, hi: number, room: number, labelSize: number, most?: number): number[];
-
 /** One section of the control rail. A rail whose content does not fit is SPLIT into sections, one shown at a
  * time, never scrolled (ADR-0071 rule 6: a panel must show its own controls). */
 interface RailSection {
@@ -1380,4 +1346,4 @@ interface ViewsRowProps {
  */
 declare function ViewsRow({ children, shares }: ViewsRowProps): react.JSX.Element;
 
-export { BREAKPOINTS, BarChart, type BarChartProps, type BarDatum, BiText, Callout, CardDeck, type CardDeckProps, type CaseDef, type CaseFocusConfig, type CaseGroup, type CaseKind, CaseSelector, type CaseSelectorProps, type CaseSelectorText, CaseWorkbench, type CaseWorkbenchProps, ChipGroup, type ChipGroupProps, type ChipOption, type Citation, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, type DeckCard, DocPage, type DocPageProps, DocReferences, DocRefsScope, DocSection, type DocSectionProps, EXECUTIVE_SCHEMA_VERSION, Equation, type ExecutiveData, type ExecutiveProblem, ExecutiveView, type ExecutiveViewProps, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, type FittedLabel, FlipCard, type FlipCardProps, type FocusMode, type FocusModeConfig, type FocusModeOptions, FocusShell, type FocusShellProps, FormatOptions, Gauge, type GaugeProps, type GaugeZone, Glossary, type GlossaryEntry, InlineMath, Knob, type KnobProps, Landing, type Lane, LaneBadge, Lang, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, type PausedVizController, PlotCard, type PlotCardProps, type Provenance, Question, type QuestionProps, type RailSection, Readout, type ReadoutItem, type ReadoutProps, ReferenceList, Refs, Stage, type StageSize, Stat, type StatProps, type SubTabDef, SubTabs, type SubTabsProps, type SurfaceFocusConfig, 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 ViewFocusConfig, 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, deckPosition, deckWindow, firstAppearance, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, perPageFor, readCaseParam, readTheme, removeQueryParam, replaceQueryParam, sourcesPresent, textWidth, useFocusMode, usePausedViz, useStageSize, useThemeStore, useUrlView, useWorkbenchState, validateExecutive, viewParamOf, widestLabel, withCaseParam };
+export { BREAKPOINTS, BarChart, type BarChartProps, type BarDatum, BiText, Callout, CardDeck, type CardDeckProps, type CaseDef, type CaseFocusConfig, type CaseGroup, type CaseKind, CaseSelector, type CaseSelectorProps, type CaseSelectorText, CaseWorkbench, type CaseWorkbenchProps, ChipGroup, type ChipGroupProps, type ChipOption, type Citation, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, type DeckCard, DocPage, type DocPageProps, DocReferences, DocRefsScope, DocSection, type DocSectionProps, EXECUTIVE_SCHEMA_VERSION, Equation, type ExecutiveData, type ExecutiveProblem, ExecutiveView, type ExecutiveViewProps, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, FlipCard, type FlipCardProps, type FocusMode, type FocusModeConfig, type FocusModeOptions, FocusShell, type FocusShellProps, FormatOptions, Gauge, type GaugeProps, type GaugeZone, Glossary, type GlossaryEntry, InlineMath, Knob, type KnobProps, Landing, type Lane, LaneBadge, Lang, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, type PausedVizController, PlotCard, type PlotCardProps, type Provenance, Question, type QuestionProps, type RailSection, Readout, type ReadoutItem, type ReadoutProps, ReferenceList, Refs, Stage, type StageSize, Stat, type StatProps, type SubTabDef, SubTabs, type SubTabsProps, type SurfaceFocusConfig, 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 ViewFocusConfig, 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, deckPosition, deckWindow, firstAppearance, groupByCategory, isStale, makeStateKey, perPageFor, readCaseParam, readTheme, removeQueryParam, replaceQueryParam, sourcesPresent, useFocusMode, usePausedViz, useStageSize, useThemeStore, useUrlView, useWorkbenchState, validateExecutive, viewParamOf, withCaseParam };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, NOT_AVAILABLE, formatTicks, formatNumber, NBSP } from './chunk-YECZXGVG.js';
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, formatNumber, formatTicks, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens } from './chunk-YECZXGVG.js';
+import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, NOT_AVAILABLE, widestLabel, fitLabel, formatTicks, niceTicks, textWidth, formatNumber, NBSP } from './chunk-DBCMAL2G.js';
+export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel } from './chunk-DBCMAL2G.js';
 import { APP_ROUTE, LANDING_ROUTE } from './chunk-33WTUQ7Q.js';
 export { APP_ROUTE, LANDING_ROUTE, LANG_STORAGE_KEY, STANDARD_ROUTES, THEME_BOOT_SCRIPT, THEME_STORAGE_KEY } from './chunk-33WTUQ7Q.js';
 import { createContext, Component, useState, useRef, useId, useEffect, useLayoutEffect, useCallback, useContext, useMemo, Children, isValidElement } from 'react';
@@ -2092,7 +2092,7 @@ function executiveTextFields(d) {
   add("title", d.title, 1);
   add("key_statement", d.key_statement, 2);
   d.headline_figures.forEach((f, i) => figure(`headline_figures[${i}]`, f));
-  const { pain, context: context2, situation, trends, proposal } = d;
+  const { pain, context, situation, trends, proposal } = d;
   add("pain.key_message", pain.key_message, 1);
   pain.paragraphs.forEach((p, i) => add(`pain.paragraphs[${i}]`, p, void 0, EXEC_LIMITS.minParagraphWords));
   pain.bearers.forEach((b, i) => {
@@ -2102,11 +2102,11 @@ function executiveTextFields(d) {
   });
   pain.figures.forEach((f, i) => figure(`pain.figures[${i}]`, f));
   pain.causes.forEach((c, i) => add(`pain.causes[${i}].cause`, c.cause));
-  add("context.key_message", context2.key_message, 1);
-  context2.paragraphs.forEach((p, i) => add(`context.paragraphs[${i}]`, p, void 0, EXEC_LIMITS.minParagraphWords));
-  add("context.setting", context2.setting);
-  context2.forces.forEach((f, i) => add(`context.forces[${i}].force`, f.force));
-  context2.evidence.forEach((e, i) => add(`context.evidence[${i}].statement`, e.statement, 1));
+  add("context.key_message", context.key_message, 1);
+  context.paragraphs.forEach((p, i) => add(`context.paragraphs[${i}]`, p, void 0, EXEC_LIMITS.minParagraphWords));
+  add("context.setting", context.setting);
+  context.forces.forEach((f, i) => add(`context.forces[${i}].force`, f.force));
+  context.evidence.forEach((e, i) => add(`context.evidence[${i}].statement`, e.statement, 1));
   add("situation.key_message", situation.key_message, 1);
   situation.roles.forEach((r, i) => {
     add(`situation.roles[${i}].role`, r.role);
@@ -3133,74 +3133,6 @@ var BREAKPOINTS = {
   /** The gate's large screen: the viewport rules of ADR-0071 are measured from here up. */
   large: 1280
 };
-
-// src/chart/text.ts
-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;
-}
 var PX = 11;
 var LINE = 13;
 var TONE = {
@@ -3489,7 +3421,7 @@ function panel(id, lane, provenance, content) {
   return /* @__PURE__ */ jsx("div", { className: "caos-cw-panel", "data-group": id, "data-lane": lane, "data-provenance": provenance, children: content });
 }
 function CaseWorkbench(props) {
-  const { caseId, cases, source, controls, replayOnly, variants, rail, railLabel, groups, compare, context: context2, group, onGroupChange, deepLinkView = true, ariaLabel, focus } = props;
+  const { caseId, cases, source, controls, replayOnly, variants, rail, railLabel, groups, compare, context, group, onGroupChange, deepLinkView = true, ariaLabel, focus } = props;
   const lang = useShellLang();
   const focusCfg = focus === true ? {} : focus || null;
   const { show: showFocus, setFocus, enterRef, memory } = useFocusMode(focusCfg);
@@ -3509,8 +3441,8 @@ function CaseWorkbench(props) {
   }
   tabs.push({
     id: "context",
-    label: pick(context2.label ?? { en: "Context", es: "Contexto" }, lang),
-    content: /* @__PURE__ */ jsx("div", { className: "prose caos-cw-context", children: context2.content })
+    label: pick(context.label ?? { en: "Context", es: "Contexto" }, lang),
+    content: /* @__PURE__ */ jsx("div", { className: "prose caos-cw-context", children: context.content })
   });
   if (tabs.length > MAX_WORKBENCH_GROUPS) {
     throw new Error(
@@ -3778,4 +3710,4 @@ function ViewsRow({ children, shares }) {
   }) });
 }
 
-export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CardDeck, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, DocPage, DocReferences, DocRefsScope, DocSection, EXECUTIVE_SCHEMA_VERSION, Equation, ExecutiveView, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, FlipCard, FocusShell, Gauge, Glossary, InlineMath, Knob, Landing, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Question, Readout, ReferenceList, Refs, Stat, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, ViewsRow, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, fitLabel, fontFamily, groupByCategory, isStale, makeStateKey, niceStep, niceTicks, perPageFor, readCaseParam, removeQueryParam, replaceQueryParam, sourcesPresent, textWidth, useFocusMode, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, validateExecutive, viewParamOf, widestLabel, withCaseParam };
+export { AppShell, ArchitectureModal, BREAKPOINTS, BarChart, Callout, CardDeck, CaseSelector, CaseWorkbench, ChipGroup, CitationsProvider, Cite, DECK_TEXT, DOC_AREAS, DocPage, DocReferences, DocRefsScope, DocSection, EXECUTIVE_SCHEMA_VERSION, Equation, ExecutiveView, FLIP_LIMITS, FLIP_TEXT, FOCUS_PARAM, FOCUS_TEXT, FOUR_CS, Figure, FlipCard, FocusShell, Gauge, Glossary, InlineMath, Knob, Landing, LaneBadge, LanguageToggle, MAX_PEER_TABS, MAX_WORKBENCH_GROUPS, PanelBoundary, PlotCard, Question, Readout, ReferenceList, Refs, Stat, SubTabs, SurfacePage, TabGroups, Tabs, ThemeToggle, VariantBar, Verdict, ViewsRow, WorkbenchLayout, WorkbenchShell, WorkbenchStateContext, caseKind, caseTooltip, casesInSource, createVizLoop, deckPosition, deckWindow, firstAppearance, groupByCategory, isStale, makeStateKey, perPageFor, readCaseParam, removeQueryParam, replaceQueryParam, sourcesPresent, useFocusMode, usePausedViz, useUrlView, useWorkbenchState, validateArchitectureConfig, validateExecutive, viewParamOf, withCaseParam };

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

@@ -58,4 +58,42 @@ 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 };
+/**
+ * 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.
+ */
+declare function niceTicks(lo: number, hi: number, room: number, labelSize: number, most?: number): number[];
+
+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 };

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)

package/gate/run.mjs

@@ -481,7 +481,9 @@ 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)`);
     }
     // 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.18.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

@@ -25,6 +25,7 @@
     "caos-card",
     "caos-chart",
     "caos-chart-key",
+    "caos-chart-key-button",
     "caos-chart-legend",
     "caos-chart-plot",
     "caos-chart-readout",
@@ -338,6 +339,7 @@
     "caos-card",
     "caos-chart",
     "caos-chart-key",
+    "caos-chart-key-button",
     "caos-chart-legend",
     "caos-chart-plot",
     "caos-chart-readout",