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

package/dist/chart.js

@@ -1,8 +1,9 @@
-import { useShellLang, useThemeStore, useStageSize, pick, resolveToken, NBSP, formatNumber, formatTicks } from './chunk-YECZXGVG.js';
+import { pick, useShellLang, useThemeStore, useStageSize, resolveToken, NBSP, formatNumber, formatTicks, referenceLineName } from './chunk-DBCMAL2G.js';
+export { referenceLineName } from './chunk-DBCMAL2G.js';
 import './chunk-33WTUQ7Q.js';
-import { useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import { useRef, useCallback, useState, useEffect, useMemo } from 'react';
 import uPlot from 'uplot';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var YMARK_TONE_TOKENS = {
   warn: "--color-warn",
@@ -11,6 +12,52 @@ var YMARK_TONE_TOKENS = {
   neutral: "--color-fg-subtle"
 };
 var ROTATION = ["--color-accent", "--color-magenta", "--color-accent-2", "--color-good", "--color-warn", "--color-bad"];
+var SOLO_DIM_ALPHA = 0.12;
+function soloStyle(solo, i, width) {
+  return solo !== null && solo !== i ? { alpha: SOLO_DIM_ALPHA, width: 1 } : { alpha: 1, width };
+}
+function tickSplits(ticks, min, max, log = false) {
+  const eps = Math.abs(max - min) * 1e-9;
+  const values = ticks.map((t) => t.value).filter((v) => Number.isFinite(v) && (!log || v > 0) && v >= min - eps && v <= max + eps);
+  return [...new Set(values)].sort((a, b) => a - b);
+}
+function tickLabelAt(ticks, x, lang, span = 0) {
+  const eps = Math.abs(span) * 1e-9;
+  const t = ticks?.find((one) => Math.abs(one.value - x) <= eps);
+  return t ? pick(t.label, lang) : null;
+}
+function namedRepeats(labels) {
+  const seen = /* @__PURE__ */ new Set();
+  const names = [];
+  let n = 0;
+  for (const l of labels) {
+    if (!l) continue;
+    if (seen.has(l)) {
+      n++;
+      if (!names.includes(l)) names.push(l);
+    } else seen.add(l);
+  }
+  return { n, names };
+}
+function soloKey(s) {
+  return s.id ?? pick(s.label, "en");
+}
+function xScaleRange(xs, ext, range, log) {
+  const given = range && !(log && Math.min(range[0], range[1]) <= 0) ? range : void 0;
+  if (!ext && !given || xs.length === 0) return null;
+  let lo = xs[0];
+  let hi = xs[xs.length - 1];
+  if (ext) {
+    lo = Math.min(lo, ext.x[0]);
+    hi = Math.max(hi, ext.x[1]);
+  }
+  if (given) {
+    lo = Math.min(lo, given[0], given[1]);
+    hi = Math.max(hi, given[0], given[1]);
+  }
+  if (log && !(lo > 0)) return null;
+  return hi > lo ? [lo, hi] : log ? [lo / 10, hi * 10] : [lo - 1, hi + 1];
+}
 function seriesStyle(s, i) {
   const color = s.color ?? ROTATION[i % ROTATION.length];
   const dash = s.dash ?? (!s.color && i >= ROTATION.length ? [6, 4] : void 0);
@@ -83,11 +130,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++;
@@ -159,6 +268,7 @@ function drawYMarks(u, marks, style) {
     ctx.lineTo(right, py);
     ctx.stroke();
     ctx.setLineDash([]);
+    if (!m.label) continue;
     const w = ctx.measureText(m.label).width;
     const base = py - gap - textH < top ? py + gap + textH : py - gap;
     let x1 = right - gap;
@@ -193,7 +303,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, solo }) {
   const lang = useShellLang();
   const theme = useThemeStore((s) => s.theme);
   const fill = height === "fill";
@@ -206,11 +316,19 @@ 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);
   const [cursor, setCursor] = useState(null);
+  const [soloPick, setSoloPick] = useState(null);
+  const soloFound = solo && soloPick !== null ? series.findIndex((s) => soloKey(s) === soloPick) : -1;
+  const soloIdx = soloFound >= 0 ? soloFound : null;
+  const soloRef = useRef(soloIdx);
+  soloRef.current = soloIdx;
+  useEffect(() => {
+    if (soloPick !== null && soloIdx === null) setSoloPick(null);
+  }, [soloPick, soloIdx]);
   const onCursorRef = useRef(onCursor);
   onCursorRef.current = onCursor;
   const onPickRef = useRef(onPick);
@@ -220,36 +338,53 @@ 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(() => range ? null : xScaleRange(xs, ext, x.range, Boolean(x.log)), [ext, range, xs, x.log, x.range]);
+  const xSpan = xs.length > 0 ? Math.max(Math.abs(xs[xs.length - 1] - xs[0]), x.range ? Math.abs(x.range[1] - x.range[0]) : 0) : 0;
+  const ticks = !x.time && x.ticks && x.ticks.length > 0 ? x.ticks : void 0;
   const tiny = useMemo(
     () => ({
-      x: Boolean(x.log) && smallestPositive([xs], range) < LOG_TABLE_FLOOR,
+      x: !ticks && Boolean(x.log) && smallestPositive(ext ? [xs, ext.x] : [xs], range) < LOG_TABLE_FLOOR,
       y: Boolean(y.log) && smallestPositive(yLevels ? [...ys, yLevels] : ys, range ?? y.range) < LOG_TABLE_FLOOR
     }),
-    [x.log, y.log, xs, ys, range, y.range, yLevels]
+    [x.log, y.log, xs, ys, range, y.range, yLevels, ext, ticks]
   );
   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), Boolean(s.dots)]),
+    x: [xLabel, xUnit, Boolean(x.time), Boolean(x.log), x.format ?? null, tiny.x, xExt, ticks ? ticks.map((t) => [t.value, pick(t.label, lang)]) : null],
+    oe: ext,
     p: range,
     pick: Boolean(onPick),
     y: [yLabel, yUnit, Boolean(y.log), y.range ?? null, y.format ?? null, tiny.y],
     m: (marks ?? []).map((m) => [m.x, pick(m.label, lang)]),
-    ym: (yMarks ?? []).map((m) => [m.y, pick(m.label, lang), m.tone ?? "warn"]),
+    ym: (yMarks ?? []).map((m) => m.drag ? ["drag", m.drag, Boolean(m.label)] : [m.y, m.label ? pick(m.label, lang) : null, m.tone ?? "warn"]),
     theme,
     lang,
     h,
     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,11 +394,24 @@ 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 });
-      repeats[axis] = repeatedLabels(labels);
+    const declareTicks = (axis, labels, repeated = repeatedLabels(labels)) => {
+      repeats[axis] = repeated;
       hostRef.current?.setAttribute("data-ticks-repeat", String(repeats.x + repeats.y));
       hostRef.current?.setAttribute(`data-ticks-${axis}`, String(labels.filter((l) => l).length));
+    };
+    const tick = (fmt, axis, pre) => (_u, vals) => {
+      const labels = formatTicks(pre ? pre(vals) : vals, lang, fmt ?? { digits: 4 });
+      if (axis === "x" && pre) hostRef.current?.setAttribute("data-log-labels", labels.filter((l) => l).join("|"));
+      declareTicks(axis, labels);
+      return labels;
+    };
+    const namedTicks = (_u, vals) => {
+      const labels = vals.map((v) => v === null || v === void 0 ? "" : tickLabelAt(ticks, v, lang) ?? "");
+      hostRef.current?.setAttribute("data-x-tick-labels", labels.filter((l) => l).join("|"));
+      const dup = namedRepeats(labels);
+      if (dup.n > 0) hostRef.current?.setAttribute("data-ticks-repeated", dup.names.join("|"));
+      else hostRef.current?.removeAttribute("data-ticks-repeated");
+      declareTicks("x", labels, dup.n);
       return labels;
     };
     const near = { left: NaN, top: NaN, idx: null };
@@ -294,7 +442,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,10 +464,16 @@ 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"),
-          ...xSteps ? { incrs: xSteps } : {},
-          ...range ? { space: PARITY_TICK_SPACE } : {},
-          ...tiny.x ? DECADE_AXIS : {}
+          // a log x axis labels the decades only; the ticks between stay drawn, unlabelled
+          values: x.time ? void 0 : ticks ? namedTicks : tick(x.format, "x", x.log && !tiny.x ? decadeOnly : void 0),
+          ...ticks ? (
+            // exactly the named values, no other tick
+            { splits: (_u, _i, min, max) => tickSplits(ticks, min, max, Boolean(x.log)), filter: (_u, splits) => splits }
+          ) : {
+            ...xSteps ? { incrs: xSteps } : {},
+            ...range ? { space: PARITY_TICK_SPACE } : {},
+            ...tiny.x ? DECADE_AXIS : {}
+          }
         },
         {
           stroke: fg,
@@ -346,10 +500,11 @@ 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 } };
+          const dim = soloStyle(soloRef.current, i, s.mode === "points" ? 1.5 : s.width ?? 2);
+          return s.mode === "points" ? { label: pick(s.label, lang), stroke, width: dim.width, alpha: dim.alpha, paths: () => null, points: { show: true, space: 0, size: s.size ?? 9, fill: stroke } } : { label: pick(s.label, lang), stroke, width: dim.width, alpha: dim.alpha, dash: style.dash, spanGaps: false, points: s.dots ? { show: true, size: 5, fill: stroke } : { show: false } };
         })
       ],
       hooks: {
@@ -368,6 +523,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,13 +589,65 @@ 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.globalAlpha = soloStyle(soloRef.current, i, 1).alpha;
+                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: m.label ? pick(m.label, lang) : void 0, color: resolveToken(YMARK_TONE_TOKENS[m.tone ?? "warn"], "#c80") })), markStyle);
+            u.over.querySelectorAll("[data-y-handle]").forEach((el2) => {
+              const i = Number(el2.getAttribute("data-y-handle"));
+              const m = lines[i];
+              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 = m.label ? pick(m.label, lang) : "";
+              const shown = `${formatNumber(v, lang, y.format ?? { digits: 4 })}${yUnit ? `${NBSP}${yUnit}` : ""}`;
+              const unnamed = lines.flatMap((one, k) => one.drag && !one.label ? [k] : []);
+              el2.setAttribute("aria-label", label || referenceLineName(lang, unnamed.indexOf(i) + 1, unnamed.length));
+              el2.setAttribute("aria-valuenow", String(Number(v.toPrecision(12))));
+              el2.setAttribute("aria-valuetext", label ? `${label}: ${shown}` : shown);
+            });
             if (marks?.length) drawMarks(u, marks.map((m) => ({ x: m.x, label: pick(m.label, lang) })), markStyle);
           }
         ]
       }
     };
+    if (!ticks) {
+      hostRef.current?.removeAttribute("data-x-tick-labels");
+      hostRef.current?.removeAttribute("data-ticks-repeated");
+    }
     uRef.current?.destroy();
     uRef.current = new uPlot(opts, data, el);
     return () => {
@@ -402,9 +658,27 @@ 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, m.label ? pick(m.label, lang) : null, m.tone ?? "warn"]));
+  useEffect(() => {
+    uRef.current?.redraw(false);
+  }, [linesKey, overlaysKey]);
+  useEffect(() => {
+    const u = uRef.current;
+    if (!u) return;
+    baseEntries.forEach(({ s, i }, k) => {
+      const dim = soloStyle(soloIdx, i, s.mode === "points" ? 1.5 : s.width ?? 2);
+      const one = u.series[k + 1];
+      if (!one) return;
+      one.alpha = dim.alpha;
+      one.width = dim.width;
+    });
+    u.redraw(false);
+  }, [soloIdx, baseEntries]);
   const read = cursor !== null && readout ? readout(order ? order[cursor] : cursor) : cursor !== null ? [
-    `${xLabel} ${formatNumber(xs[cursor], lang, x.format ?? { digits: 4 })}${xUnit ? `${NBSP}${xUnit}` : ""}`,
-    ...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}` : ""}`)
+    // an x that sits on a named tick is named by it, not by its number
+    tickLabelAt(ticks, xs[cursor], lang, xSpan) !== null ? `${xLabel} ${tickLabelAt(ticks, xs[cursor], lang, xSpan)}` : `${xLabel} ${formatNumber(xs[cursor], lang, x.format ?? { digits: 4 })}${xUnit ? `${NBSP}${xUnit}` : ""}`,
+    ...baseEntries.map(({ s }, k) => ({ s, v: ys[k][cursor] ?? null })).filter(({ v }) => !scatter || v !== null).map(({ s, v }) => `${pick(s.label, lang)} ${formatNumber(v, lang, y.format ?? { digits: 4 })}${yUnit ? `${NBSP}${yUnit}` : ""}`)
   ].join(" \xB7 ") : hint ? pick(hint, lang) : lang === "es" ? "Pase el cursor sobre el gr\xE1fico para leer los valores" : "Hover the chart to read the values";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -420,16 +694,22 @@ 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,
+      "data-solo": soloIdx !== null ? String(soloIdx) : void 0,
       children: [
         /* @__PURE__ */ jsx("div", { ref: setPlot, className: "caos-chart-plot" }),
-        series.length > 1 && /* @__PURE__ */ jsx("ul", { className: "caos-chart-legend", "aria-label": lang === "es" ? "Series del gr\xE1fico" : "Series of the chart", children: series.map((s, i) => /* @__PURE__ */ jsxs("li", { className: "caos-chart-key", "data-mode": s.mode ?? "line", "data-dash": seriesStyle(s, i).dash ? "1" : void 0, children: [
+        (series.length > 1 || solo) && /* @__PURE__ */ jsx("ul", { className: "caos-chart-legend", "aria-label": lang === "es" ? "Series del gr\xE1fico" : "Series of the chart", children: series.map((s, i) => /* @__PURE__ */ jsx("li", { className: "caos-chart-key", "data-mode": s.mode ?? "line", "data-dash": seriesStyle(s, i).dash ? "1" : void 0, children: solo ? /* @__PURE__ */ jsxs("button", { type: "button", className: "caos-chart-key-button", "aria-pressed": soloIdx === i, onClick: () => setSoloPick(soloIdx === i ? null : soloKey(s)), children: [
+          /* @__PURE__ */ jsx("span", { className: "caos-chart-swatch", style: { "--swatch": `var(${seriesStyle(s, i).color})` }, "aria-hidden": "true" }),
+          pick(s.label, lang)
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "caos-chart-swatch", style: { "--swatch": `var(${seriesStyle(s, i).color})` }, "aria-hidden": "true" }),
           pick(s.label, lang)
-        ] }, i)) }),
+        ] }) }, i)) }),
         /* @__PURE__ */ jsx("p", { className: "caos-chart-readout", "aria-live": "polite", title: read, children: read })
       ]
     }
   );
 }
 
-export { LOG_TABLE_FLOOR, UPlotChart, YMARK_TONE_TOKENS, drawMarks, drawYMarks, logDecades, nearestPoint, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, sortOrder, tickSteps };
+export { LOG_TABLE_FLOOR, SOLO_DIM_ALPHA, UPlotChart, YMARK_TONE_TOKENS, clampMark, decadeOnly, drawMarks, drawYMarks, logDecades, namedRepeats, nearestPoint, nudgeMark, overlayExtent, parityBox, parityRange, rangeWithLevels, repeatedLabels, seriesStyle, smallestPositive, soloKey, soloStyle, sortOrder, tickLabelAt, tickSplits, tickSteps, xScaleRange };

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

@@ -214,4 +214,76 @@ function Stage({ label, children, className }) {
   );
 }
 
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, formatNumber, formatTicks, pick, readTheme, resolveToken, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens };
+// src/chart/text.ts
+function referenceLineName(lang, n, of) {
+  const base = lang === "es" ? "L\xEDnea de referencia" : "Reference line";
+  return of > 1 ? `${base} ${n}` : base;
+}
+var context;
+function fontFamily() {
+  if (typeof document === "undefined") return "sans-serif";
+  return getComputedStyle(document.documentElement).getPropertyValue("--font-sans").trim() || "sans-serif";
+}
+function textWidth(text, px, weight = 400) {
+  if (context === void 0) {
+    try {
+      context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+    } catch {
+      context = null;
+    }
+  }
+  if (!context) return text.length * px * 0.62;
+  context.font = `${weight} ${px}px ${fontFamily()}`;
+  return context.measureText(text).width;
+}
+function widestLabel(labels, px, weight = 400) {
+  return Math.max(0, ...labels.map((label) => textWidth(label, px, weight)));
+}
+function shorten(line, width, px) {
+  if (textWidth(line, px) <= width) return line;
+  let cut = line;
+  while (cut.length > 1 && textWidth(`${cut}\u2026`, px) > width) cut = cut.slice(0, -1);
+  return `${cut.trimEnd()}\u2026`;
+}
+function fitLabel(label, width, px, maxLines = 2) {
+  if (textWidth(label, px) <= width) return { lines: [label], shortened: false };
+  const words = label.split(" ");
+  if (maxLines === 2 && words.length > 1) {
+    let best = null;
+    let bestWidth = Infinity;
+    for (let k = 1; k < words.length; k += 1) {
+      const first = words.slice(0, k).join(" ");
+      const second = words.slice(k).join(" ");
+      const widest = Math.max(textWidth(first, px), textWidth(second, px));
+      if (widest < bestWidth) {
+        bestWidth = widest;
+        best = [first, second];
+      }
+    }
+    if (best && bestWidth <= width) return { lines: best, shortened: false };
+    if (best) return { lines: [shorten(best[0], width, px), shorten(best[1], width, px)], shortened: true };
+  }
+  return { lines: [shorten(label, width, px)], shortened: true };
+}
+function niceStep(x) {
+  if (!(x > 0) || !Number.isFinite(x)) return 1;
+  const magnitude = 10 ** Math.floor(Math.log10(x));
+  return ([1, 2, 2.5, 5, 10].find((m) => m * magnitude >= x * (1 - 1e-12)) ?? 10) * magnitude;
+}
+function niceTicks(lo, hi, room, labelSize, most = 6) {
+  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [0];
+  if (hi < lo) [lo, hi] = [hi, lo];
+  if (hi === lo) hi = lo === 0 ? 1 : lo + Math.abs(lo);
+  const count = Math.max(2, Math.min(most, Math.floor(room / (labelSize + 16)) + 1));
+  const step = niceStep((hi - lo) / (count - 1));
+  const first = Math.floor(lo / step + 1e-9) * step;
+  const ticks = [];
+  for (let k = 0; first + k * step <= hi + step * 1e-9 || ticks.length < 2; k += 1) {
+    ticks.push(Number((first + k * step).toPrecision(12)));
+    if (ticks.length > 50) break;
+  }
+  if (ticks[ticks.length - 1] < hi - step * 1e-9) ticks.push(Number((ticks[ticks.length - 1] + step).toPrecision(12)));
+  return ticks;
+}
+
+export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, referenceLineName, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel };