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

package/bin/caos-shell-gate.mjs

@@ -8,20 +8,24 @@
 //   npx caos-shell-gate --url https://contraste.fasl-work.com --expect-brand "Contraste"     the deployed origin
 // Options:
 //   --base-path /Repo/           the site's base path with --serve (a project page); default /
+//   --spa-fallback               with --serve, answer as nginx does for a single-page app (try_files $uri $uri/ /index.html): an extensionless
+//                                path that matches no file gets index.html with 200; a path with an extension stays 404; default off (Pages)
 //   --routes /,/methodology      the routes; default: read from the header navigation
-//   --workbench /app             the routes that carry the case workbench; default /app
+//   --workbench /app             the routes that carry the case workbench; default /app; '' for a product whose App is a SurfacePage
+//   --app-route /app             the App route measured as a surface when --workbench is '' (G18 walks its views' Focus mode); default /app
 //   --sizes 390x844,...,2560x1440  --themes light,dark  --langs en,es
 //   --case-sample id1,id2        cases walked outside the primary mode; default the first and the last
 //   --single-case                the workbench has one case and no case control
 //   --idle-ms 3000  --settle-ms 15000  --text-floor 400  --instrument-min 0.5  --stage-fill-min 0.3  --stage-floor 140
 //   --wide-font-sizes 390x844,1280x800   the sizes of the wide-font pass (G10); --no-wide-font skips it
-//   --require-focus              fail an App without a Focus control (G18; ADR-0070 requires one in a product with simulations)
+//   --require-focus              fail an App without a Focus control (G18; ADR-0070 requires one in a product with simulations); on a surface
+//                                App, one with no view that offers it
 //   --out gate-output            report (gate-report.json), screenshots (shots/) and the capture index (index.html)
 // Needs `playwright` in the consuming project (optional peer dependency). Exit 1 on any failure, 2 on misuse.
 
 import { runGate } from '../gate/run.mjs';
 
-const FLAGS = new Set(['single-case', 'no-wide-font', 'require-focus']);
+const FLAGS = new Set(['single-case', 'no-wide-font', 'require-focus', 'spa-fallback']);
 const args = {};
 const argv = process.argv.slice(2);
 for (let i = 0; i < argv.length; i += 1) {
@@ -40,12 +44,14 @@ const options = {
   expectBrand: args['expect-brand'],
   routes: args.routes,
   workbench: args.workbench,
+  appRoute: args['app-route'],
   sizes: args.sizes,
   themes: args.themes,
   langs: args.langs,
   caseSample: args['case-sample'],
   singleCase: args['single-case'] === true,
   requireFocus: args['require-focus'] === true,
+  spaFallback: args['spa-fallback'] === true,
   idleMs: num('idle-ms'),
   settleMs: num('settle-ms'),
   textFloor: num('text-floor'),

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 };