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

package/dist/chart.d.ts

@@ -16,6 +16,17 @@ interface ChartSeries {
     mode?: 'line' | 'points';
     /** The marker diameter of a `points` series, in CSS pixels (9 by default): a larger one rings the selected case. */
     size?: number;
+    /** A `points` series on x values of its own (measured cases over a modelled curve that has other sizes): one x per
+     * 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[];
+}
+/** 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). */
+interface YMarkDrag {
+    min: number;
+    max: number;
+    step?: number;
 }
 interface ChartAxis {
     label: BiText;
@@ -52,7 +63,12 @@ interface UPlotChartProps {
         y: number;
         label: BiText;
         tone?: YMarkTone;
+        drag?: YMarkDrag;
     }[];
+    /** Called with the index in `yMarks` and the new y of a draggable reference line (`drag`) every time the reader moves
+     * it, by the pointer or the keyboard (a slider on the line: arrows, Page keys, Home and End); the caller sets the new
+     * y in `yMarks`. */
+    onYMarkChange?: (index: number, y: number) => void;
     /** Height in pixels, or `fill` to take the container's height (inside `PlotCard fill`); the width is always the
      * container's. */
     height?: number | 'fill';
@@ -110,6 +126,29 @@ declare const LOG_TABLE_FLOOR = 1e-22;
 declare function logDecades(min: number, max: number, most?: number): number[];
 /** The smallest positive value among columns of values and the lower end of a fixed range; Infinity if none. */
 declare function smallestPositive(columns: readonly (readonly (number | null)[])[], range?: readonly [number, number] | null): number;
+/**
+ * The ticks of a log x axis that get a label: the powers of ten only (null for every other tick, which formatTicks leaves
+ * blank). A range with no power of ten in it keeps its ticks, so the axis is never left without a label.
+ */
+declare function decadeOnly(ticks: readonly (number | null)[]): (number | null)[];
+/** The side of the square box of a parity plot: the smaller of the box's width and the height asked for (the box's
+ * height when the chart fills it). */
+declare function parityBox(boxWidth: number, boxHeight: number, height: number, fill: boolean): number;
+/** A dragged value kept inside the range of its line and snapped to its step; a value that is not a number falls to the
+ * lower end. */
+declare function clampMark(y: number, drag: YMarkDrag): number;
+/**
+ * The value a key sets on a draggable line, or null for a key it does not handle: the arrows one step, Page Up and Down
+ * ten, Home and End the ends of the range. A step is a hundredth of the range, or `drag.step`; on a log axis it is a factor
+ * (a hundredth of the range in decades) and `drag.step` is not used.
+ */
+declare function nudgeMark(y: number, key: string, drag: YMarkDrag, log?: boolean): number | null;
+/** The x and y extent of the series that bring an x of their own, finite points only (on a log x axis, `positiveX`,
+ * only the points with x above 0); null when there are none. */
+declare function overlayExtent(series: readonly ChartSeries[], positiveX?: boolean): {
+    x: [number, number];
+    y: [number, number];
+} | null;
 /** How many tick labels repeat the label before them (empty labels apart); the gate fails a chart with any (G6). */
 declare function repeatedLabels(labels: readonly (string | null | undefined)[]): number;
 /**
@@ -158,6 +197,6 @@ declare function nearestPoint(xs: readonly number[], ys: readonly (readonly (num
  * (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, yMarks, 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 }: UPlotChartProps): react.JSX.Element;
 
-export { type ChartAxis, type ChartSeries, LOG_TABLE_FLOOR, UPlotChart, type UPlotChartProps, YMARK_TONE_TOKENS, type YMarkTone, drawMarks, drawYMarks, logDecades, nearestPoint, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, sortOrder, tickSteps };
+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 };

package/dist/chart.js

@@ -83,11 +83,73 @@ function smallestPositive(columns, range) {
   for (const c of columns) for (const v of c) if (v !== null && Number.isFinite(v) && v > 0 && v < lo) lo = v;
   return lo;
 }
+function isDecade(t) {
+  if (t === null || t === void 0 || !Number.isFinite(t) || t <= 0) return false;
+  const d = Math.log10(t);
+  return Math.abs(d - Math.round(d)) < 1e-6;
+}
+function decadeOnly(ticks) {
+  if (!ticks.some(isDecade)) return [...ticks];
+  return ticks.map((t) => isDecade(t) ? t : null);
+}
+function parityBox(boxWidth, boxHeight, height, fill) {
+  return Math.min(boxWidth, fill ? boxHeight : height);
+}
+function clampMark(y, drag) {
+  if (!Number.isFinite(y)) return drag.min;
+  const v = drag.step && drag.step > 0 ? drag.min + Math.round((y - drag.min) / drag.step) * drag.step : y;
+  const clamped = Math.min(drag.max, Math.max(drag.min, v));
+  return Number(clamped.toPrecision(12));
+}
+function nudgeMark(y, key, drag, log = false) {
+  const dir = key === "ArrowUp" || key === "ArrowRight" || key === "PageUp" ? 1 : key === "ArrowDown" || key === "ArrowLeft" || key === "PageDown" ? -1 : 0;
+  if (key === "Home") return drag.min;
+  if (key === "End") return drag.max;
+  if (dir === 0) return null;
+  const n = key === "PageUp" || key === "PageDown" ? 10 : 1;
+  if (log && drag.min > 0 && drag.max > drag.min) {
+    const decades = (Math.log10(drag.max) - Math.log10(drag.min)) / 100;
+    return Math.min(drag.max, Math.max(drag.min, y * 10 ** (dir * n * decades)));
+  }
+  const step = drag.step && drag.step > 0 ? drag.step : (drag.max - drag.min) / 100;
+  return clampMark(y + dir * n * step, { ...drag, step: void 0 });
+}
+function isOverlay(s) {
+  return Boolean(s.x) && s.mode === "points";
+}
+function dragWithin(drag, range) {
+  if (!range) return drag;
+  const lo = Math.min(range[0], range[1]);
+  const hi = Math.max(range[0], range[1]);
+  const min = Math.min(hi, Math.max(lo, drag.min));
+  const max = Math.max(lo, Math.min(hi, drag.max));
+  return { ...drag, min, max: Math.max(min, max) };
+}
+function overlayExtent(series, positiveX = false) {
+  let x0 = Infinity;
+  let x1 = -Infinity;
+  let y0 = Infinity;
+  let y1 = -Infinity;
+  for (const s of series) {
+    if (!isOverlay(s) || !s.x) continue;
+    for (let i = 0; i < Math.min(s.x.length, s.values.length); i++) {
+      const px = s.x[i];
+      const py = s.values[i];
+      if (py === null || py === void 0 || !Number.isFinite(px) || !Number.isFinite(py) || positiveX && !(px > 0)) continue;
+      x0 = Math.min(x0, px);
+      x1 = Math.max(x1, px);
+      y0 = Math.min(y0, py);
+      y1 = Math.max(y1, py);
+    }
+  }
+  return Number.isFinite(x0) ? { x: [x0, x1], y: [y0, y1] } : null;
+}
 var DECADE_AXIS = {
   splits: (_u, _i, min, max) => logDecades(min, max),
   filter: (_u, splits) => splits
 };
 var PARITY_TICK_SPACE = 40;
+var HANDLE_HEIGHT = 14;
 function repeatedLabels(labels) {
   let n = 0;
   for (let i = 1; i < labels.length; i++) if (labels[i] && labels[i] === labels[i - 1]) n++;
@@ -193,7 +255,7 @@ function nearestPoint(xs, ys, left, top) {
   }
   return best;
 }
-function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPick, parity, readout, hint }) {
+function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280, onCursor, onPick, parity, readout, hint }) {
   const lang = useShellLang();
   const theme = useThemeStore((s) => s.theme);
   const fill = height === "fill";
@@ -206,7 +268,7 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
     },
     [measureRef]
   );
-  const width = parity ? Math.min(box.width, fill ? box.height : height) : box.width;
+  const width = parity ? parityBox(box.width, box.height, typeof height === "number" ? height : 0, fill) : box.width;
   const h = parity ? width : fill ? box.height : height;
   const uRef = useRef(null);
   const hostRef = useRef(null);
@@ -220,36 +282,57 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
   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 levels = useMemo(() => (yMarks ?? []).map((m) => m.y), [yMarks]);
-  const range = useMemo(() => parity ? parityRange(xs, ...ys, levels) : null, [parity, xs, ys, levels]);
-  const yLevels = !parity && !y.range && levels.length > 0 ? levels : null;
+  const entries = useMemo(() => series.map((s, i) => ({ s, i })), [series]);
+  const baseEntries = useMemo(() => entries.filter(({ s }) => !isOverlay(s)), [entries]);
+  const overlays = useMemo(() => entries.filter(({ s }) => isOverlay(s)), [entries]);
+  const ext = useMemo(() => overlayExtent(series, Boolean(x.log)), [series, x.log]);
+  const ys = useMemo(() => baseEntries.map(({ s }) => order ? order.map((i) => s.values[i] ?? null) : s.values), [order, baseEntries]);
+  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 tiny = useMemo(
     () => ({
-      x: Boolean(x.log) && smallestPositive([xs], range) < LOG_TABLE_FLOOR,
+      x: 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]
+    [x.log, y.log, xs, ys, range, y.range, yLevels, ext]
   );
   const xLabel = pick(x.label, lang);
   const yLabel = pick(y.label, lang);
+  const yMarksRef = useRef(yMarks);
+  yMarksRef.current = yMarks;
+  const liveRef = useRef([]);
+  liveRef.current = (yMarks ?? []).map((m) => m.y);
+  const overlaysRef = useRef(overlays);
+  overlaysRef.current = overlays;
+  const onYMarkChangeRef = useRef(onYMarkChange);
+  onYMarkChangeRef.current = onYMarkChange;
+  const dragCount = (yMarks ?? []).filter((m) => m.drag).length;
   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]),
-    x: [xLabel, xUnit, Boolean(x.time), Boolean(x.log), x.format ?? null, tiny.x],
+    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],
+    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.y, pick(m.label, lang), m.tone ?? "warn"]),
+    ym: (yMarks ?? []).map((m) => m.drag ? ["drag", m.drag] : [m.y, pick(m.label, lang), m.tone ?? "warn"]),
     theme,
     lang,
     h,
     w: width
   });
   const data = useMemo(() => [xs, ...ys], [xs, ys]);
-  const scatter = series.length > 0 && series.every((s) => s.mode === "points");
+  const scatter = baseEntries.length > 0 && baseEntries.every(({ s }) => s.mode === "points");
   useEffect(() => {
     const el = plotRef.current;
     if (!el || width <= 0 || h <= 0) return;
@@ -259,8 +342,9 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
     const font = `11px ${family}`;
     const surface = resolveToken("--color-surface", "#fff");
     const repeats = { x: 0, y: 0 };
-    const tick = (fmt, axis) => (_u, vals) => {
-      const labels = formatTicks(vals, lang, fmt ?? { digits: 4 });
+    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));
@@ -294,7 +378,7 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
         x: {
           time: Boolean(x.time),
           distr: x.log ? 3 : 1,
-          ...range ? { range } : x.log ? { range: (_u, min, max) => [min, max] } : {}
+          ...range ? { range } : xExt ? { range: xExt } : x.log ? { range: (_u, min, max) => [min, max] } : {}
         },
         y: {
           distr: y.log ? 3 : 1,
@@ -316,7 +400,8 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
           font,
           label: xUnit ? `${xLabel} (${xUnit})` : xLabel,
           labelFont: font,
-          values: x.time ? void 0 : tick(x.format, "x"),
+          // 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 : {}
@@ -346,7 +431,7 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
       ],
       series: [
         {},
-        ...series.map((s, i) => {
+        ...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 } };
@@ -368,6 +453,55 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
               if (idx === null || idx === void 0 || !onPickRef.current) return;
               onPickRef.current(orderRef.current ? orderRef.current[idx] : idx);
             });
+            const accent = resolveToken("--color-accent", "#06c");
+            (yMarks ?? []).forEach((m, i) => {
+              if (!m.drag) return;
+              const drag = dragWithin(m.drag, range ? void 0 : y.range);
+              const el2 = document.createElement("div");
+              el2.setAttribute("role", "slider");
+              el2.setAttribute("tabindex", "0");
+              el2.setAttribute("aria-orientation", "vertical");
+              el2.setAttribute("aria-valuemin", String(drag.min));
+              el2.setAttribute("aria-valuemax", String(drag.max));
+              el2.setAttribute("data-y-handle", String(i));
+              Object.assign(el2.style, { position: "absolute", left: "0", width: "100%", height: `${HANDLE_HEIGHT}px`, cursor: "ns-resize", touchAction: "none", outlineOffset: "-2px", zIndex: "3" });
+              el2.addEventListener("focus", () => el2.style.outline = `2px solid ${accent}`);
+              el2.addEventListener("blur", () => el2.style.outline = "none");
+              el2.addEventListener("click", (e) => e.stopPropagation());
+              const set = (raw) => {
+                const v = clampMark(raw, y.log ? { ...drag, step: void 0 } : drag);
+                if (v === liveRef.current[i]) return;
+                liveRef.current[i] = v;
+                onYMarkChangeRef.current?.(i, v);
+                u.redraw(false);
+              };
+              let dragging = false;
+              el2.addEventListener("pointerdown", (e) => {
+                if (e.button !== 0) return;
+                dragging = true;
+                el2.setPointerCapture(e.pointerId);
+                el2.focus();
+                e.preventDefault();
+              });
+              el2.addEventListener("pointermove", (e) => {
+                if (!dragging) return;
+                set(u.posToVal(e.clientY - u.over.getBoundingClientRect().top, "y"));
+              });
+              const end = (e) => {
+                dragging = false;
+                if (el2.hasPointerCapture(e.pointerId)) el2.releasePointerCapture(e.pointerId);
+              };
+              el2.addEventListener("pointerup", end);
+              el2.addEventListener("pointercancel", end);
+              el2.addEventListener("keydown", (e) => {
+                const v = nudgeMark(liveRef.current[i], e.key, drag, Boolean(y.log));
+                if (v === null) return;
+                e.preventDefault();
+                set(v);
+              });
+              u.over.appendChild(el2);
+            });
+            if (dragCount) queueMicrotask(() => uRef.current === u && u.redraw(false));
           }
         ],
         draw: [
@@ -385,8 +519,53 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
               ctx.stroke();
               ctx.restore();
             }
+            const dots = overlaysRef.current;
+            if (dots.length) {
+              const ctx = u.ctx;
+              const pr = uPlot.pxRatio || 1;
+              let drawn = 0;
+              ctx.save();
+              ctx.beginPath();
+              ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
+              ctx.clip();
+              for (const { s, i } of dots) {
+                ctx.fillStyle = resolveToken(seriesStyle(s, i).color, "#4a8");
+                ctx.strokeStyle = surface;
+                ctx.lineWidth = Math.max(1, pr);
+                const r = (s.size ?? 9) / 2 * pr;
+                const ox = s.x ?? [];
+                for (let k = 0; k < Math.min(ox.length, s.values.length); k++) {
+                  const v = s.values[k];
+                  if (v === null || v === void 0 || !Number.isFinite(v) || !Number.isFinite(ox[k])) continue;
+                  const px = u.valToPos(ox[k], "x", true);
+                  const py = u.valToPos(v, "y", true);
+                  if (!Number.isFinite(px) || !Number.isFinite(py) || px < u.bbox.left - 0.5 || px > u.bbox.left + u.bbox.width + 0.5 || py < u.bbox.top - 0.5 || py > u.bbox.top + u.bbox.height + 0.5) continue;
+                  ctx.beginPath();
+                  ctx.arc(px, py, r, 0, Math.PI * 2);
+                  ctx.fill();
+                  ctx.stroke();
+                  drawn++;
+                }
+              }
+              ctx.restore();
+              hostRef.current?.setAttribute("data-overlay-drawn", String(drawn));
+            }
             const markStyle = { color: resolveToken("--color-warn", "#c80"), halo: surface, family };
-            if (yMarks?.length) drawYMarks(u, yMarks.map((m) => ({ y: m.y, label: pick(m.label, lang), color: resolveToken(YMARK_TONE_TOKENS[m.tone ?? "warn"], "#c80") })), markStyle);
+            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);
+            u.over.querySelectorAll("[data-y-handle]").forEach((el2) => {
+              const i = Number(el2.getAttribute("data-y-handle"));
+              const m = lines[i];
+              const v = liveRef.current[i];
+              if (!m || v === void 0) return;
+              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);
+              el2.setAttribute("aria-valuenow", String(Number(v.toPrecision(12))));
+              el2.setAttribute("aria-valuetext", `${label}: ${formatNumber(v, lang, y.format ?? { digits: 4 })}${yUnit ? `${NBSP}${yUnit}` : ""}`);
+            });
             if (marks?.length) drawMarks(u, marks.map((m) => ({ x: m.x, label: pick(m.label, lang) })), markStyle);
           }
         ]
@@ -402,9 +581,14 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
   useEffect(() => {
     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"]));
+  useEffect(() => {
+    uRef.current?.redraw(false);
+  }, [linesKey, overlaysKey]);
   const read = cursor !== null && readout ? readout(order ? order[cursor] : cursor) : cursor !== null ? [
     `${xLabel} ${formatNumber(xs[cursor], lang, x.format ?? { digits: 4 })}${xUnit ? `${NBSP}${xUnit}` : ""}`,
-    ...series.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}` : ""}`)
+    ...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(
     "div",
@@ -420,6 +604,8 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
       "data-log-x": x.log ? "1" : void 0,
       "data-pick": onPick ? "1" : void 0,
       "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,
       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: [
@@ -432,4 +618,4 @@ function UPlotChart({ x, y, series, marks, yMarks, height = 280, onCursor, onPic
   );
 }
 
-export { LOG_TABLE_FLOOR, UPlotChart, YMARK_TONE_TOKENS, drawMarks, drawYMarks, logDecades, nearestPoint, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, sortOrder, tickSteps };
+export { LOG_TABLE_FLOOR, UPlotChart, YMARK_TONE_TOKENS, clampMark, decadeOnly, drawMarks, drawYMarks, logDecades, nearestPoint, nudgeMark, overlayExtent, parityBox, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, sortOrder, tickSteps };

package/dist/index.d.ts

@@ -260,8 +260,9 @@ interface CaseSelectorProps {
      * category structure is preserved either way; only the height changes.
      */
     layout?: 'chips' | 'select';
-    /** A control that sits on the select's row, after it (the workbench's Focus button, shell 0.14.1): the select shrinks to make
-     * room, so the selector is no taller with it. With `layout: 'chips'` it gets a row of its own, after the chips. */
+    /** A control of the product that sits on the select's row, after it: the select shrinks to make room, so the selector is no taller with
+     * it (a long case name may then be cut: keep the control narrow). The workbench's own Focus control is not an accessory since 0.17.0:
+     * it sits in the group tab row. With `layout: 'chips'` it gets a row of its own, after the chips. */
     accessory?: ReactNode;
 }
 /**
@@ -1251,7 +1252,7 @@ interface CaseWorkbenchProps {
     deepLinkView?: boolean | string;
     ariaLabel?: BiText;
     /**
-     * Focus mode for the App (ADR-0070, shell 0.14.0): a Focus button in the rail head opens the selected case's open group in
+     * Focus mode for the App (ADR-0070, shell 0.14.0): a Focus control at the end of the group tab row opens the selected case's open group in
      * the full viewport through `FocusShell` (the stage is the view, the rail stays), holds `?focus=1` beside `?case=` and
      * `?view=` in the URL, and returns with Escape or the exit button to the same case, group and sub-view. `true` takes all
      * the defaults. Omit it and the App is exactly what it was.

package/dist/index.js

@@ -795,17 +795,64 @@ function CaseSelector(props) {
   const visible = casesInSource(cases, source);
   const groups = groupByCategory(visible);
   const modified = cases.find((c) => c.id === modifiedFromId) ?? null;
+  const wrapRef = useRef(null);
+  const [minHeight, setMinHeight] = useState(null);
+  const nameKey = visible.map((c) => c.name).join("
");
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const display = wrap?.querySelector(".cs-select-display");
+    if (!wrap || !display) return void 0;
+    const names = nameKey ? nameKey.split("
") : [];
+    const measure = () => {
+      const st = getComputedStyle(display);
+      const room = display.clientWidth - parseFloat(st.paddingLeft) - parseFloat(st.paddingRight);
+      if (!(room > 0)) return;
+      const copy = document.createElement("span");
+      copy.className = "cs-select-text";
+      copy.setAttribute("aria-hidden", "true");
+      copy.setAttribute("style", `position:absolute;visibility:hidden;left:0;top:0;width:${room}px;display:block;overflow:visible;max-height:none;-webkit-line-clamp:unset;line-clamp:unset`);
+      display.append(copy);
+      let tallest = 0;
+      for (const n of names) {
+        copy.textContent = n;
+        tallest = Math.max(tallest, copy.getBoundingClientRect().height);
+      }
+      const line = parseFloat(getComputedStyle(copy).lineHeight) || parseFloat(st.fontSize) * 1.25;
+      copy.remove();
+      const frame = parseFloat(st.paddingTop) + parseFloat(st.paddingBottom) + parseFloat(st.borderTopWidth) + parseFloat(st.borderBottomWidth);
+      const next = tallest > line * 1.5 ? Math.ceil((tallest + frame) * 100) / 100 : null;
+      setMinHeight((prev) => prev === next ? prev : next);
+    };
+    measure();
+    let width = wrap.getBoundingClientRect().width;
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      const w = wrap.getBoundingClientRect().width;
+      if (w !== width) {
+        width = w;
+        measure();
+      }
+    });
+    ro?.observe(wrap);
+    void document.fonts?.ready.then(measure);
+    return () => ro?.disconnect();
+  }, [layout, nameKey]);
+  const options = groups.flatMap((g) => g.cases);
+  const selectedName = (options.find((c) => c.id === selectedId) ?? options.find((c) => !c.disabled))?.name ?? "";
   const select = /* @__PURE__ */ jsx(
     "select",
     {
       "data-control": "case",
-      className: "select cs-select",
+      className: "select cs-select cs-select-native",
       "aria-label": ariaLabel ?? "Case selector",
       value: selectedId,
       onChange: (e) => onSelect(e.target.value),
       children: groups.map((g) => /* @__PURE__ */ jsx("optgroup", { label: g.category || " ", children: g.cases.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, disabled: c.disabled, title: caseTooltip(c) || void 0, children: c.name }, c.id)) }, g.category || "_"))
     }
   );
+  const selectBox = /* @__PURE__ */ jsxs("div", { className: "cs-select-wrap", ref: wrapRef, children: [
+    /* @__PURE__ */ jsx("div", { className: "cs-select-display", style: minHeight === null ? void 0 : { minHeight }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "cs-select-text", children: selectedName }) }),
+    select
+  ] });
   return /* @__PURE__ */ jsxs("div", { className: `cs${className ? ` ${className}` : ""}`, role: "group", "aria-label": ariaLabel ?? "Case selector", children: [
     source && lanes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "cs-source", children: [
       /* @__PURE__ */ jsx("span", { className: "cs-source-label", children: t2.source }),
@@ -824,9 +871,9 @@ function CaseSelector(props) {
     ] }),
     source && source !== "synthetic" && /* @__PURE__ */ jsx("p", { className: "cs-locked banner", children: lockedNote ?? t2.lockedNote }),
     layout === "select" && (props.accessory ? /* @__PURE__ */ jsxs("div", { className: "cs-select-row", children: [
-      select,
+      selectBox,
       props.accessory
-    ] }) : select),
+    ] }) : selectBox),
     layout === "chips" && groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "cs-group", role: "group", "aria-label": g.category || void 0, "data-control": "case", children: [
       g.category && /* @__PURE__ */ jsx("span", { className: "cs-group-label", children: g.category }),
       /* @__PURE__ */ jsx("div", { className: "cs-chips", children: g.cases.map((c) => {
@@ -3487,19 +3534,12 @@ function CaseWorkbench(props) {
       ]
     }
   );
-  const besideSelect = Boolean(cases && (cases.layout ?? "chips") === "select");
   const pickers = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases, accessory: besideSelect ? enter : cases.accessory }),
+    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases }),
     variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
   ] }) : null;
-  const focusPickers = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases, accessory: cases.accessory }),
-    variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
-  ] }) : null;
-  const railHead = pickers || enter ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    pickers,
-    besideSelect ? null : enter
-  ] }) : null;
+  const railHead = pickers;
+  const focusPickers = pickers;
   const instrumentData = {
     "data-case-workbench": "",
     "data-group-count": tabs.length,
@@ -3533,7 +3573,8 @@ function CaseWorkbench(props) {
       tabs,
       value: openGroup,
       onChange: selectGroup,
-      ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang)
+      ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang),
+      trailing: enter || void 0
     }
   ) }) }) }) });
 }

package/gate/inpage.mjs

@@ -181,6 +181,67 @@ export function installLib() {
     };
   };
 
+  /**
+   * Selects whose selected option does not fit the room it leaves, or a case select that shows another name than the one it holds (BL-074, shell
+   * 0.17.0; the reviews of 0.17.0). What is measured is what the reader sees:
+   * - a select with the shell's display (`.cs-select-wrap`, the case select since the trial of 0.17.0) shows the name whole at any length in the
+   *   display's real `.cs-select-text` element: the name is cut when that element overflows its box (`scrollHeight` or `scrollWidth` past its
+   *   `clientHeight` or `clientWidth` by more than 1px, e.g. a product stylesheet that clamps it), measured on the element itself, never on a probe
+   *   copy, and when the display's own box is smaller than its content (a product stylesheet that fixes its height); the display is stale when the name it shows, whitespace normalized, differs from the text of the option the select holds;
+   * - any other select shows its text on one line: the room is its width less its own CSS padding and less the native arrow, which is
+   *   measured, not assumed (a probe select of the same class holding one character, sized to its content; 0 with `appearance: none`).
+   * Plain text is measured with the select's own font on one canvas. Runs in the App and inside Focus (its rail holds a case select too).
+   */
+  const selectCuts = () => {
+    const cuts = [];
+    const mctx = document.createElement('canvas').getContext('2d');
+    const norm = (t) => (t ?? '').trim().replace(/\s+/g, ' ');
+    for (const sel of document.querySelectorAll('select')) {
+      if (!mctx || !visible(sel)) continue;
+      const ss = getComputedStyle(sel);
+      const held = norm(sel.options[sel.selectedIndex]?.textContent);
+      const display = sel.closest('.cs-select-wrap')?.querySelector('.cs-select-display');
+      if (display) {
+        const t = display.querySelector('.cs-select-text') ?? display;
+        const shown = norm(t.textContent);
+        if (shown !== held) {
+          cuts.push(`${describe(sel)} shows "${shown}" while the select holds "${held}" (a stale display)`);
+          continue;
+        }
+        const overV = t.scrollHeight > t.clientHeight + 1;
+        const overH = t.scrollWidth > t.clientWidth + 1;
+        if (overV || overH) {
+          const line = Number.parseFloat(getComputedStyle(t).lineHeight) || 1;
+          cuts.push(`${describe(sel)} cuts the case name "${shown}" (the name needs ${Math.round(t.scrollHeight / line)} lines, ${Math.round(t.scrollHeight)}px high and ${Math.round(t.scrollWidth)}px wide, and its box holds ${Math.round(t.clientHeight)}px by ${Math.round(t.clientWidth)}px; held option "${held}")`);
+        } else if (display.scrollHeight > display.clientHeight + 1 || display.scrollWidth > display.clientWidth + 1) {
+          // the text fits its own box but the display's box is smaller (a product stylesheet that fixes the display's height)
+          cuts.push(`${describe(sel)} cuts the case name "${shown}" in its display (the name needs ${Math.round(display.scrollHeight)}px by ${Math.round(display.scrollWidth)}px, the display holds ${Math.round(display.clientHeight)}px by ${Math.round(display.clientWidth)}px; held option "${held}")`);
+        }
+        continue;
+      }
+      const text = held;
+      if (!text) continue;
+      mctx.font = `${ss.fontStyle} ${ss.fontWeight} ${ss.fontSize} ${ss.fontFamily}`;
+      const pad = Number.parseFloat(ss.paddingLeft) + Number.parseFloat(ss.paddingRight);
+      let arrow = 0;
+      const host = sel.parentElement;
+      if (host) {
+        const probe = sel.cloneNode(false);
+        for (const a of [...probe.attributes]) if (a.name !== 'class') probe.removeAttribute(a.name);
+        probe.append(new Option('x'));
+        probe.setAttribute('style', 'position:absolute;visibility:hidden;width:auto;min-width:0;max-width:none;flex:none;left:0;top:0');
+        host.append(probe);
+        const pv = getComputedStyle(probe);
+        arrow = Math.max(0, probe.clientWidth - Number.parseFloat(pv.paddingLeft) - Number.parseFloat(pv.paddingRight) - mctx.measureText('x').width);
+        probe.remove();
+      }
+      const need = mctx.measureText(text).width;
+      const has = sel.clientWidth - pad - arrow;
+      if (need > has + 1) cuts.push(`${describe(sel)} cuts "${text}" (${Math.round(need)}px of text in ${Math.round(has)}px of room, the ${Math.round(arrow)}px arrow taken out)`);
+    }
+    return cuts;
+  };
+
   /** The static layout of the current view (G5, G6 inputs, ADR-0071 and ADR-0017 measures). */
   G.facts = () => {
     const vw = window.innerWidth;
@@ -272,6 +333,8 @@ export function installLib() {
       if (!named) truncated.push(describe(el));
     }
 
+    const cutSelects = selectCuts();
+
     // Containers that cut their content: overflow hidden or clip with more content than box (S1, G5).
     const clipped = [];
     const containers = new Set([de, body, document.getElementById('root'), ...document.querySelectorAll('main, .page, .page-body, [data-instrument], [data-rail], .tabpanel, .caos-cw, [data-plot]')]);
@@ -415,6 +478,8 @@ export function installLib() {
       rail,
       truncated: truncated.slice(0, 5),
       truncatedCount: truncated.length,
+      cutSelects: cutSelects.slice(0, 5),
+      cutSelectCount: cutSelects.length,
       clipped,
       instrument,
       surfaces,
@@ -1063,6 +1128,7 @@ export function installLib() {
     return {
       focus: Boolean(shell),
       covered,
+      cutSelects: (() => { const c = selectCuts(); return { count: c.length, list: c.slice(0, 5) }; })(),
       enterInside: [...document.querySelectorAll('[data-focus-shell] [data-focus-enter]')].filter(visible).length,
       app: Boolean(document.querySelector('[data-workbench], [data-surface]')),
       caseId: stage ? stage.getAttribute('data-case') : null,

package/gate/run.mjs

@@ -8,7 +8,7 @@
 //   G4 deep links            every route loaded directly (and with a trailing slash), 200 and rendered; artifacts
 //                            are JSON, not the HTML fallback; a missing asset answers 404; doc text clears a floor
 //   G5 scroll and reach      boxes inside the viewport, the rail and their scrollers; tall views scroll; nothing is
-//                            cut; truncated text carries its full text; every control reachable by the pointer
+//                            cut; truncated text carries its full text; a select shows its whole selected text (0.17.0); every control reachable by the pointer
 //   G6 painted area          drawing surfaces have painted pixels, fill their stage, and cover at least half the
 //                            viewport on the App route, measured on the screenshot, never on a host box
 //   G7 walk everything       every route, tab, sub-tab and case, at five sizes, both themes, both languages,
@@ -269,6 +269,15 @@ export async function runGate(o) {
       fail('G18', { route: appRoute, mode: 'routes' }, `the App route ${appRoute} is not among the measured routes (${routes.join(', ') || 'none'}): with --workbench '' and --require-focus the gate measures the App as a surface and must walk it; add it to --routes or name it with --app-route`);
     }
 
+    // ---- G18 on a workbench App (shell 0.17.0): under --require-focus every workbench route must be among the measured routes, or no Focus would be measured
+    if (opt.requireFocus) {
+      for (const wr of workbenchRoutes) {
+        if (!routes.includes(wr)) {
+          fail('G18', { route: wr, mode: 'routes' }, `the workbench route ${wr} is not among the measured routes (${routes.join(', ') || 'none'}): with --require-focus the gate must walk the App to measure its Focus mode; add it to --routes or drop it from --workbench`);
+        }
+      }
+    }
+
     // ---- The landing (shell 0.13.0): the root opens the Introduction on its executive view; an old App link with a query string reaches the App.
     {
       const ctx = await openContext(primarySize, themes[0], langs[0]);
@@ -460,6 +469,7 @@ export async function runGate(o) {
       if (f.rail.outsideCount) fail('G5', where, `${f.rail.outsideCount} rail element(s) outside the rail: ${f.rail.outside.join('; ')}`);
     }
     if (f.truncatedCount) fail('G5', where, `${f.truncatedCount} truncated text(s) without the full text in a title: ${f.truncated.join('; ')}`);
+    if (f.cutSelectCount) fail('G5', where, `${f.cutSelectCount} select(s) cut the selected text (a case name cut in its box, or a display that names another case than the one the select holds, or a plain select with a text wider than its room): ${f.cutSelects.join('; ')}`);
     for (const c of f.clipped) fail('G5', where, c);
     if (f.offCentre !== null && f.offCentre > 2) fail('ADR-0017.1', where, `the prose page is off-centre by ${f.offCentre.toFixed(1)}px`);
     if (f.referenceLists) fail('ADR-0017.4', where, `${f.referenceLists} bibliography outside the end-of-page references block (a .reference-list); give each DocSection its refs and let the page list them once`);
@@ -913,6 +923,7 @@ export async function runGate(o) {
     if (big && f.share < opt.instrumentMin) fail('G18', at, `${label}: the stage covers ${(100 * f.share).toFixed(1)}% of the viewport (floor ${(100 * opt.instrumentMin).toFixed(0)}%)`);
     if (f.exitInside === false) fail('G18', at, `${label}: the exit control is outside the viewport`);
     for (const c of f.covered) fail('G18', at, `${label}: ${c.chrome} covers the control "${c.control}" (the stage must clear the Focus chrome)`);
+    if (f.cutSelects.count) fail('G5', at, `${label}: ${f.cutSelects.count} select(s) cut the selected text (a case name cut in its box, or a display that names another case than the one the select holds, or a plain select with a text wider than its room): ${f.cutSelects.list.join('; ')}`);
     if (f.enterInside > 0) fail('G18', at, `${label}: the Focus control shows inside Focus mode (it opens the mode the reader is already in)`);
     for (const m of await page.evaluate(() => window.__caosGate.drawingText())) fail('G10', at, m);
     for (const m of await page.evaluate(() => window.__caosGate.brokenValues())) fail('G19', at, m);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.16.0",
+  "version": "0.17.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",
@@ -56,7 +56,7 @@
     "check:sdd": "python scripts/check_sdd.py ."
   },
   "peerDependencies": {
-    "katex": "^0.16.0",
+    "katex": "^0.16.0 || ^0.17.0 || ^0.18.0 || ^0.19.0",
     "lucide-react": ">=0.400.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
@@ -67,11 +67,10 @@
   },
   "devDependencies": {
     "@playwright/test": "1.63.0",
-    "@types/katex": "^0.16.7",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "esbuild": "0.28.1",
-    "katex": "^0.16.11",
+    "katex": "0.19.0",
     "lucide-react": "1.43.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/reserved-classes.json

@@ -198,8 +198,11 @@
     "cs-locked",
     "cs-modified",
     "cs-reset",
-    "cs-select",
+    "cs-select-display",
+    "cs-select-native",
     "cs-select-row",
+    "cs-select-text",
+    "cs-select-wrap",
     "cs-source",
     "cs-source-label",
     "cs-source-tabs",
@@ -512,8 +515,11 @@
     "cs-locked",
     "cs-modified",
     "cs-reset",
-    "cs-select",
+    "cs-select-display",
+    "cs-select-native",
     "cs-select-row",
+    "cs-select-text",
+    "cs-select-wrap",
     "cs-source",
     "cs-source-label",
     "cs-source-tabs",

package/styles.css

@@ -507,11 +507,28 @@ svg.lucide { flex: none; }
 .cs-reset { border: none; background: transparent; color: var(--color-accent); font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.2rem; text-decoration: underline; text-underline-offset: 2px; }
 /* The compact one-of-N case picker (ADR-0071 rule 7): ten cases in four categories cost a 308px chip block, 21% of a
    2560x1440 viewport, and one row as a dropdown. */
-.cs-select { width: 100%; max-width: 460px; }
-/* the select and a control beside it (the workbench's Focus button): one row, the select shrinks, the control keeps its size */
+/* The case select shows the selected name whole, at any length, in a display (as many lines as the longest name of the list needs, measured in the DOM by CaseSelector; no clamp, no ellipsis), the native select on top of it, transparent by colour (shell 0.17.0; BL-074). */
+.cs-select-wrap { position: relative; width: 100%; max-width: 460px; min-width: 0; }
+.cs-select-display { box-sizing: border-box; display: flex; align-items: center; position: relative; min-width: 0; background: var(--color-surface-2); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.35rem 1.7rem 0.35rem 0.5rem; font-size: 0.85rem; line-height: 1.25; }
+.cs-select-text { display: block; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
+.cs-select-display::after { content: ''; position: absolute; right: 0.65rem; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.3rem; border-right: 2px solid var(--color-fg-subtle); border-bottom: 2px solid var(--color-fg-subtle); transform: rotate(45deg); }
+.cs-select-wrap > .cs-select-native { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0 0.5rem; box-sizing: border-box; background: transparent; color: transparent; border-color: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
+.cs-select-native option, .cs-select-native optgroup { color: var(--color-fg); background: var(--color-surface-2); }
+.cs-select-wrap > .cs-select-native:focus { outline: none; }
+.cs-select-wrap:focus-within > .cs-select-display { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+@supports selector(:has(*)) {
+  .cs-select-wrap:focus-within > .cs-select-display { outline: none; }
+  .cs-select-wrap:has(> .cs-select-native:focus-visible) > .cs-select-display { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+}
+/* Windows High Contrast forces a select's text back to CanvasText, which would paint its one cut line over the display's lines (the re-review of 0.17.0, B1) */
+@media (forced-colors: active) {
+  .cs-select-wrap > .cs-select-native { forced-color-adjust: none; }
+  .cs-select-native option, .cs-select-native optgroup { forced-color-adjust: auto; }
+}
+/* the select and a control beside it (a product's accessory): one row, the select shrinks, the control keeps its size */
 .cs-select-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
-.cs-select-row > .cs-select { flex: 1 1 auto; min-width: 0; }
-.cs-select-row > :not(.cs-select) { flex: none; }
+.cs-select-row > .cs-select-wrap { flex: 1 1 auto; min-width: 0; }
+.cs-select-row > :not(.cs-select-wrap) { flex: none; }
 
 /* == 9 workbench ================================================================================================ */
 
@@ -858,3 +875,7 @@ svg.lucide { flex: none; }
 .tabs-has-slot > .tabs-slot { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; align-items: center; padding-bottom: 0.4rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); }
 .tabs-has-slot > .tabs-slot > .caos-focus-enter { align-self: center; padding-block: 0.2rem; }
 .tabs-has-slot > .tabpanel { grid-column: 1 / -1; grid-row: 2; }
+/* The same slot in the workbench's group tab row (shell 0.17.0, BL-074): the Focus control of the App ends the row, so the case select keeps
+   the rail head's whole width. The tab row's own spacing (a tighter rule than the surface's) is repeated under the slot. */
+.caos-cw > .tabs.tabs-has-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 0.5rem; }
+.caos-cw > .tabs-has-slot > .tabs-slot { margin-bottom: 0.5rem; padding-bottom: var(--space-1); }