@fasl-work/caos-app-shell 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [0.25.000] - 2026-11-08
+
+Two gaps that CEFOP_DinHot's full gate found on its release build (shell 0.23.2; CAOS_APP_SHELL#207, #208; known defects 61 and 62).
+
+### Added
+
+- `VariantBar` `layout?: 'chips' | 'select'` (default `'chips'`, markup unchanged; known defect 61, SHW-063, issue 207). `'select'` draws the variants as one native select with the shell's display, the active variant's full label shown whole and wrapping inside the rail, and keeps the title with its count, the lane badge, the active variant's note, `data-variant-bar`, `data-variant-count`, `data-control="variant"`, the keyboard of a native select and the disabled options. A list of 14 long-named variants fits a 232 px rail at 1280 x 800 in en and es and in the wide-font pass (as chips it scrolled the rail: G5 441, ADR-0071.6 266 and G18 14 findings on DinHot).
+- `SelectDisplay` (`src/lib/SelectDisplay.tsx`, internal): the display of the case select, extracted so `CaseSelector` and `VariantBar` share one component; the case select's markup and behaviour are unchanged.
+- Gate plants: `variants-long-chips` (the long list as chips fails ADR-0071.6), `legit-variants-select` (the same list in `layout: 'select'` passes), `legit-chart-in-document`, `legit-chart-pointer-redispatch` and `chart-readout-scroll-move` (the document walk on a long page with a chart).
+
+### Fixed
+
+- A chart's readout no longer changes when the page scrolls under a resting pointer (known defect 62, SHC-103, issue 208, ADR-0017.2). The browser re-dispatches the pointer position (a mouseover, mouseenter and mousemove at the same client coordinates) to the chart that came under it, and sends a mouseleave at the same coordinates when the scroll takes the plot away; `UPlotChart` moved its cursor and readout on both, so the gate's document walk reported "document text changed during traversal" (reproduced on the shell's own fixture, three tabs of /experiments). `UPlotChart` now changes its cursor and readout only on a real pointer move, an enter or a leave by moving, or the keyboard; the held leave is applied at the next real move of the pointer, and a touch or a pen is never judged.
+
+### Adoption
+
+- A product with a long or long-named variant list sets `layout: 'select'` on its `variants` prop (`CaseWorkbench` forwards it to `VariantBar`); nothing else changes. A product with a short list keeps the chips.
+- Known defect 62: no product change. A product that worked around it (a pointer moved off the document before the walk, a readout excluded from the walk) removes the workaround. A chart scrolled away from a resting pointer keeps its last reading until the pointer next moves, leaves by moving, or the keyboard acts.
+
 ## [0.24.000] - 2026-11-08
 
 Four defects that an ADR-0082 review of CAOS_ChancaDEM on 0.23.2 found (CAOS_MANAGE `wip/chancadem/viz-review-2026-11-07.md`, findings M11, M1, M3, m4).

package/VERSION

@@ -1 +1 @@
-0.24.000
+0.25.000

package/dist/chart.js

@@ -5,6 +5,46 @@ import { useRef, useCallback, useState, useId, useEffect, useMemo } from 'react'
 import uPlot from 'uplot';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+// src/chart/pointer.ts
+var SCROLL_WINDOW_MS = 300;
+var newTrack = () => ({ x: Number.NaN, y: Number.NaN, scrolledAt: -Infinity, type: "mouse" });
+function scrollSynthesised(t, e, now) {
+  if (t.type !== "mouse") return false;
+  if (!Number.isNaN(t.x)) return e.clientX === t.x && e.clientY === t.y;
+  return now - t.scrolledAt < SCROLL_WINDOW_MS && e.movementX === 0 && e.movementY === 0;
+}
+var track = null;
+var realMoveListeners = /* @__PURE__ */ new Set();
+function onRealMove(fn) {
+  realMoveListeners.add(fn);
+  return () => void realMoveListeners.delete(fn);
+}
+function pointerTrack() {
+  if (track) return track;
+  const t = newTrack();
+  track = t;
+  if (typeof window === "undefined") return t;
+  window.addEventListener("scroll", () => {
+    t.scrolledAt = performance.now();
+  }, { capture: true, passive: true });
+  const type = (e) => {
+    t.type = e.pointerType || "mouse";
+  };
+  window.addEventListener("pointerdown", type, { capture: true, passive: true });
+  window.addEventListener("pointermove", type, { capture: true, passive: true });
+  window.addEventListener(
+    "mousemove",
+    (e) => {
+      if (e.clientX === t.x && e.clientY === t.y) return;
+      t.x = e.clientX;
+      t.y = e.clientY;
+      for (const fn of [...realMoveListeners]) fn();
+    },
+    { passive: true }
+  );
+  return t;
+}
+
 // src/chart/uplotZoom.ts
 var rangeOf = (u, key) => [u.scales[key].min ?? 0, u.scales[key].max ?? 1];
 function createZoom(u, ctx) {
@@ -506,6 +546,7 @@ function nearestPoint(xs, ys, left, top) {
 }
 function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280, onCursor, onPick, parity, readout, hint, solo, title, zoomY, zoomOff }) {
   const lang = useShellLang();
+  pointerTrack();
   const theme = useThemeStore((s) => s.theme);
   const fill = height === "fill";
   const [measureRef, box] = useStageSize();
@@ -767,6 +808,27 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
         ],
         ready: [
           (u2) => {
+            const track2 = pointerTrack();
+            let heldLeave = false;
+            let replay = false;
+            const real = (e) => {
+              if (replay) return;
+              if (scrollSynthesised(track2, e, performance.now())) {
+                if (e.type === "mouseleave") heldLeave = true;
+                e.stopImmediatePropagation();
+              } else if (e.type !== "mouseleave") heldLeave = false;
+            };
+            u2.root.addEventListener("mousemove", real, true);
+            u2.root.addEventListener("mouseenter", real, true);
+            u2.root.addEventListener("mouseleave", real, true);
+            const stopHeld = onRealMove(() => {
+              if (!heldLeave) return;
+              heldLeave = false;
+              replay = true;
+              u2.over.dispatchEvent(new MouseEvent("mouseleave", { clientX: track2.x, clientY: track2.y }));
+              replay = false;
+            });
+            u2.hooks.destroy = [...u2.hooks.destroy ?? [], stopHeld];
             u2.over.addEventListener("click", () => {
               const idx = pickedRef.current;
               if (idx === null || idx === void 0 || !onPickRef.current) return;

package/dist/index.d.ts

@@ -1200,10 +1200,15 @@ interface VariantBarProps {
     onSelect: (id: string) => void;
     title?: BiText;
     lane?: Lane;
+    /** How the one-of-N choice is drawn. 'chips' (the default) is one scrollable row of chips; 'select' is one native select with the shell's display
+     * (the case select's: the active variant's full label shown whole, wrapping inside the rail), for a long or long-named list (ADR-0071 rule 7: 14
+     * methods named by their names drew a 605 px column of chips in a 713 px rail). The title with its count, the lane badge, the active variant's
+     * note, `data-variant-bar`, `data-variant-count` and `data-control="variant"` are the same in both. */
+    layout?: 'chips' | 'select';
 }
-/** The regimes of the selected case on ONE scrollable row (ADR-0071 rule 4), the active regime's lane, and the
- * one-line note of what it shows. Selecting a regime must change every view of the case. */
-declare function VariantBar({ variants, activeId, onSelect, title, lane }: VariantBarProps): react.JSX.Element;
+/** The regimes of the selected case on ONE scrollable row (ADR-0071 rule 4) or, with `layout: 'select'`, in one select (rule 7), the active
+ * regime's lane, and the one-line note of what it shows. Selecting a regime must change every view of the case. */
+declare function VariantBar({ variants, activeId, onSelect, title, lane, layout }: VariantBarProps): react.JSX.Element;
 
 /** One group of views of the selected case, named for the question the user is asking (ADR-0071 rule 5). */
 interface WorkbenchGroup {

package/dist/index.js

@@ -702,6 +702,53 @@ function usePausedViz(frame, options = {}) {
   const restart = useCallback(() => loopRef.current?.restart(), []);
   return { playing, play, pause, toggle, restart };
 }
+function SelectDisplay({ names, selectedName, children }) {
+  const wrapRef = useRef(null);
+  const [minHeight, setMinHeight] = useState(null);
+  const nameKey = names.join("
");
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const display = wrap?.querySelector(".cs-select-display");
+    if (!wrap || !display) return void 0;
+    const all = 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 all) {
+        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();
+  }, [nameKey]);
+  return /* @__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 }) }),
+    children
+  ] });
+}
 
 // src/case/caseModel.ts
 var caseKind = (c) => c.kind ?? "synthetic";
@@ -798,47 +845,6 @@ 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(
@@ -852,10 +858,7 @@ function CaseSelector(props) {
       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
-  ] });
+  const selectBox = /* @__PURE__ */ jsx(SelectDisplay, { names: visible.map((c) => c.name), selectedName, children: 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 }),
@@ -3824,23 +3827,24 @@ function LaneBadge({ lane, provenance, label }) {
     provenance && /* @__PURE__ */ jsx("span", { className: `badge caos-prov caos-prov-${provenance}`, "data-provenance": provenance, children: pick(PROVENANCE_LABELS[provenance], lang) })
   ] });
 }
-function VariantBar({ variants, activeId, onSelect, title, lane }) {
+function VariantBar({ variants, activeId, onSelect, title, lane, layout = "chips" }) {
   const lang = useShellLang();
   const active = variants.find((v) => v.id === activeId) ?? variants[0];
   const shownLane = active?.lane ?? lane;
   const rowRef = useRef(null);
   useOverflowFade(rowRef, ".chip.on", [active?.id, variants.length, lang]);
+  const name = pick(title ?? { en: "Variants", es: "Variantes" }, lang);
   return /* @__PURE__ */ jsxs("div", { className: "caos-variant-bar", "data-variant-bar": "", "data-variant-count": variants.length, children: [
     /* @__PURE__ */ jsxs("div", { className: "caos-variant-head", children: [
       /* @__PURE__ */ jsxs("span", { className: "caos-variant-title", children: [
-        pick(title ?? { en: "Variants", es: "Variantes" }, lang),
+        name,
         " (",
         variants.length,
         ")"
       ] }),
       shownLane && /* @__PURE__ */ jsx(LaneBadge, { lane: shownLane })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "caos-chip-row", role: "radiogroup", "aria-label": pick(title ?? { en: "Variants", es: "Variantes" }, lang), "data-control": "variant", ref: rowRef, children: variants.map((v) => /* @__PURE__ */ jsx(
+    layout === "select" ? /* @__PURE__ */ jsx(SelectDisplay, { names: variants.map((v) => pick(v.label, lang)), selectedName: active ? pick(active.label, lang) : "", children: /* @__PURE__ */ jsx("select", { "data-control": "variant", className: "select cs-select cs-select-native", "aria-label": name, value: active?.id ?? "", onChange: (e) => onSelect(e.target.value), children: variants.map((v) => /* @__PURE__ */ jsx("option", { value: v.id, disabled: v.disabled, children: pick(v.label, lang) }, v.id)) }) }) : /* @__PURE__ */ jsx("div", { className: "caos-chip-row", role: "radiogroup", "aria-label": name, "data-control": "variant", ref: rowRef, children: variants.map((v) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",

package/package.json

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