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

package/dist/chart.js

@@ -1,10 +1,210 @@
-import { pick, useShellLang, useThemeStore, useStageSize, resolveToken, NBSP, formatNumber, formatTicks, referenceLineName } from './chunk-DBCMAL2G.js';
-export { referenceLineName } from './chunk-DBCMAL2G.js';
+import { pick, placeXLabel, placeYLabel, useShellLang, useThemeStore, useStageSize, defaultChartName, axisTitleFits, resolveToken, dateNames, DRAG_THRESHOLD, sameData, NBSP, formatNumber, thinRows, chartSummary, referenceLineName, ZOOM_HINT, CHART_ROLE, ChartSummary, ChartDataTable, ResetZoomButton, formatTicks, countOverlaps, isZoomed, formatTime, keyAction, KEY_PAN, KEY_ZOOM, firstVisible, stepIndex, wheelFactor, pinchState, repeatedLabels, panRange, zoomRange, revealValue, brushRange, leastLabelSpan, MIN_SPAN_SHARE } from './chunk-FXPSZD6X.js';
+export { referenceLineName, repeatedLabels } from './chunk-FXPSZD6X.js';
 import './chunk-33WTUQ7Q.js';
-import { useRef, useCallback, useState, useEffect, useMemo } from 'react';
+import { useRef, useCallback, useState, useId, useEffect, useMemo } from 'react';
 import uPlot from 'uplot';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+// src/chart/uplotZoom.ts
+var rangeOf = (u, key) => [u.scales[key].min ?? 0, u.scales[key].max ?? 1];
+function createZoom(u, ctx) {
+  const differs = (a, b, full) => {
+    const tol = Math.abs(full[1] - full[0]) * 1e-9;
+    return Math.abs(a[0] - b[0]) > tol || Math.abs(a[1] - b[1]) > tol;
+  };
+  const apply = (nx, ny) => {
+    const full = ctx.full();
+    const cx = rangeOf(u, "x");
+    const cy = rangeOf(u, "y");
+    const moved = Boolean(nx && differs(nx, cx, full ? full.x : cx) || ny && differs(ny, cy, full ? full.y : cy));
+    if (!moved) return false;
+    ctx.explicit.current = true;
+    try {
+      u.batch(() => {
+        if (nx) u.setScale("x", { min: nx[0], max: nx[1] });
+        if (ny) u.setScale("y", { min: ny[0], max: ny[1] });
+      });
+    } finally {
+      ctx.explicit.current = false;
+    }
+    return true;
+  };
+  const isNow = () => {
+    const full = ctx.full();
+    if (!full) return false;
+    return isZoomed(rangeOf(u, "x"), full.x) || ctx.both && isZoomed(rangeOf(u, "y"), full.y);
+  };
+  const leastOf = (axis, full) => {
+    if (ctx.log[axis]) return void 0;
+    return Math.max(Math.abs(full[1] - full[0]) * MIN_SPAN_SHARE, ctx.least?.(axis) ?? 0);
+  };
+  const zoomBy = (factor, ax, ay) => {
+    const full = ctx.full();
+    if (!full || !ctx.enabled()) return false;
+    const nx = zoomRange(rangeOf(u, "x"), full.x, ax, factor, { log: ctx.log.x, minSpan: leastOf("x", full.x) });
+    const ny = ctx.both && ay !== void 0 ? zoomRange(rangeOf(u, "y"), full.y, ay, factor, { log: ctx.log.y, minSpan: leastOf("y", full.y) }) : null;
+    return apply(nx, ny);
+  };
+  const panBy = (shareX, shareY = 0) => {
+    const full = ctx.full();
+    if (!full || !ctx.enabled()) return false;
+    const nx = shareX ? panRange(rangeOf(u, "x"), full.x, shareX, ctx.log.x) : null;
+    const ny = ctx.both && shareY ? panRange(rangeOf(u, "y"), full.y, shareY, ctx.log.y) : null;
+    return apply(nx, ny);
+  };
+  const brush = (sx, sy) => {
+    const full = ctx.full();
+    if (!full || !ctx.enabled()) return false;
+    const nx = sx ? brushRange(sx, full.x, leastOf("x", full.x) ?? 0) : null;
+    const ny = ctx.both && sy ? brushRange(sy, full.y, leastOf("y", full.y) ?? 0) : null;
+    return apply(nx, ny);
+  };
+  const reveal = (x) => {
+    const full = ctx.full();
+    if (!full || !isNow()) return;
+    const cur = rangeOf(u, "x");
+    const next = revealValue(cur, full.x, x, ctx.log.x);
+    if (next[0] !== cur[0] || next[1] !== cur[1]) apply(next, null);
+  };
+  const reset = () => {
+    const full = ctx.full();
+    if (!full) return;
+    apply(full.x, ctx.both ? full.y : null);
+  };
+  const place = (idx) => {
+    const d = u.data;
+    const xv = d[0][idx];
+    if (xv === null || xv === void 0) return;
+    const left = u.valToPos(xv, "x");
+    let top = u.bbox.height / (window.devicePixelRatio || 1) / 2;
+    for (let k = 1; k < d.length; k++) {
+      const v = d[k][idx];
+      if (v !== null && v !== void 0 && Number.isFinite(v)) {
+        top = u.valToPos(v, "y");
+        break;
+      }
+    }
+    u.setCursor({ left, top }, true);
+  };
+  const clear = () => u.setCursor({ left: -10, top: -10 }, true);
+  const over = u.over;
+  const onHandle = (e) => e.target instanceof Element && e.target.closest("[data-y-handle]") !== null;
+  const ac = new AbortController();
+  const opt = { signal: ac.signal };
+  const sizeOf = () => {
+    const r = over.getBoundingClientRect();
+    return { w: Math.max(1, r.width), h: Math.max(1, r.height), left: r.left, top: r.top };
+  };
+  over.addEventListener(
+    "wheel",
+    (e) => {
+      if (!ctx.enabled()) return;
+      if (!ctx.plot.contains(document.activeElement)) return;
+      const s = sizeOf();
+      const changed = Math.abs(e.deltaX) > Math.abs(e.deltaY) && isNow() ? panBy(e.deltaX / s.w) : zoomBy(wheelFactor(e.deltaY, e.deltaMode), u.posToVal(e.clientX - s.left, "x"), ctx.both ? u.posToVal(e.clientY - s.top, "y") : void 0);
+      if (changed) e.preventDefault();
+    },
+    { ...opt, passive: false }
+  );
+  u.root.addEventListener(
+    "mousedown",
+    (e) => {
+      if (e.shiftKey && e.button === 0 && ctx.enabled() && !onHandle(e)) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    },
+    { ...opt, capture: true }
+  );
+  const pts = /* @__PURE__ */ new Map();
+  let pan = null;
+  let pinch = null;
+  const startPan = (id, x, y) => {
+    pan = { id, x, y };
+    try {
+      over.setPointerCapture(id);
+    } catch {
+    }
+  };
+  over.addEventListener(
+    "pointerdown",
+    (e) => {
+      if (onHandle(e)) return;
+      ctx.plot.focus({ preventScroll: true });
+      if (!ctx.enabled()) return;
+      pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (e.pointerType === "mouse") {
+        if (e.button === 0 && e.shiftKey) startPan(e.pointerId, e.clientX, e.clientY);
+        return;
+      }
+      if (pts.size === 2) {
+        const [a, b] = [...pts.values()];
+        pinch = { dist: pinchState(a, b).dist };
+        pan = null;
+      } else if (pts.size === 1 && isNow()) startPan(e.pointerId, e.clientX, e.clientY);
+    },
+    opt
+  );
+  over.addEventListener(
+    "pointermove",
+    (e) => {
+      if (!pts.has(e.pointerId)) return;
+      const before = pts.get(e.pointerId);
+      pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      const s = sizeOf();
+      if (pinch && pts.size === 2) {
+        const [a, b] = [...pts.values()];
+        const now = pinchState(a, b);
+        if (pinch.dist > 0 && now.dist > 0) {
+          zoomBy(pinch.dist / now.dist, u.posToVal(now.mx - s.left, "x"), ctx.both ? u.posToVal(now.my - s.top, "y") : void 0);
+          pinch.dist = now.dist;
+        }
+        panBy(-(e.clientX - before.x) / 2 / s.w, ctx.both ? (e.clientY - before.y) / 2 / s.h : 0);
+        return;
+      }
+      if (pan && pan.id === e.pointerId) {
+        panBy(-(e.clientX - pan.x) / s.w, ctx.both ? (e.clientY - pan.y) / s.h : 0);
+        pan.x = e.clientX;
+        pan.y = e.clientY;
+      }
+    },
+    opt
+  );
+  const end = (e) => {
+    pts.delete(e.pointerId);
+    if (pan && pan.id === e.pointerId) {
+      pan = null;
+      if (over.hasPointerCapture?.(e.pointerId)) over.releasePointerCapture(e.pointerId);
+    }
+    if (pts.size < 2) pinch = null;
+    if (pts.size === 1 && !pan && isNow()) {
+      const [[id, p]] = [...pts.entries()];
+      startPan(id, p.x, p.y);
+    }
+  };
+  over.addEventListener("pointerup", end, opt);
+  over.addEventListener("pointercancel", end, opt);
+  over.addEventListener(
+    "dblclick",
+    (e) => {
+      if (onHandle(e) || !ctx.enabled()) return;
+      reset();
+    },
+    opt
+  );
+  return {
+    zoomBy,
+    panBy,
+    brush,
+    reveal,
+    reset,
+    view: () => ({ x: rangeOf(u, "x"), y: rangeOf(u, "y") }),
+    place,
+    clear,
+    zoomed: isNow,
+    detach: () => ac.abort()
+  };
+}
 var YMARK_TONE_TOKENS = {
   warn: "--color-warn",
   bad: "--color-bad",
@@ -197,19 +397,16 @@ var DECADE_AXIS = {
 };
 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++;
-  return n;
-}
-function drawMarks(u, marks, style) {
+var CUT_SEP = String.fromCharCode(1);
+function drawMarks(u, marks, style, boxes = []) {
   const ctx = u.ctx;
   const pr = uPlot.pxRatio || 1;
   const left = u.bbox.left;
   const right = u.bbox.left + u.bbox.width;
   const gap = 4 * pr;
   const rowH = 14 * pr;
-  const placed = [];
+  const textH = 11 * pr;
+  const cut = [];
   ctx.save();
   ctx.font = `${Math.round(11 * pr)}px ${style.family}`;
   ctx.textBaseline = "alphabetic";
@@ -225,24 +422,25 @@ function drawMarks(u, marks, style) {
     ctx.lineTo(px, u.bbox.top + u.bbox.height);
     ctx.stroke();
     ctx.setLineDash([]);
-    const w = ctx.measureText(m.label).width;
-    let x0 = px + gap;
-    if (x0 + w > right) x0 = px - gap - w;
-    if (x0 < left) x0 = Math.max(left, Math.min(right - w, px - w / 2));
-    let row = 0;
-    while (placed.some((p) => p.row === row && x0 < p.x1 + gap && x0 + w + gap > p.x0)) row += 1;
-    placed.push({ x0, x1: x0 + w, row });
-    const y = u.bbox.top + 12 * pr + row * rowH;
+    if (!m.label) continue;
+    const at = placeXLabel(m.label, { px, left, right, bottom: u.bbox.top + u.bbox.height, gap, rowH, textH, first: u.bbox.top + 12 * pr, boxes, measure: (t) => ctx.measureText(t).width });
+    if (!at) {
+      cut.push(m.label);
+      continue;
+    }
+    if (at.cut) cut.push(m.label);
+    boxes.push({ kind: "x", text: at.text, full: m.label, x0: at.x0, x1: at.x0 + at.w, y0: at.y - textH, y1: at.y });
     ctx.textAlign = "left";
     ctx.lineWidth = 3 * pr;
     ctx.strokeStyle = style.halo;
-    ctx.strokeText(m.label, x0, y);
+    ctx.strokeText(at.text, at.x0, at.y);
     ctx.fillStyle = style.color;
-    ctx.fillText(m.label, x0, y);
+    ctx.fillText(at.text, at.x0, at.y);
   }
   ctx.restore();
+  return cut;
 }
-function drawYMarks(u, marks, style) {
+function drawYMarks(u, marks, style, boxes) {
   const ctx = u.ctx;
   const pr = uPlot.pxRatio || 1;
   const left = u.bbox.left;
@@ -250,8 +448,10 @@ function drawYMarks(u, marks, style) {
   const top = u.bbox.top;
   const bottom = u.bbox.top + u.bbox.height;
   const gap = 4 * pr;
+  const rowH = 14 * pr;
   const textH = 11 * pr;
   const placed = [];
+  const cut = [];
   ctx.save();
   ctx.font = `${Math.round(11 * pr)}px ${style.family}`;
   ctx.textBaseline = "alphabetic";
@@ -269,22 +469,23 @@ function drawYMarks(u, marks, style) {
     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;
-    while (placed.some((p) => x1 - w < p.x1 + gap && x1 > p.x0 - gap && base - textH < p.y1 && base > p.y0)) {
-      x1 = Math.min(...placed.filter((p) => base - textH < p.y1 && base > p.y0).map((p) => p.x0)) - 2 * gap;
+    const at = placeYLabel(m.label, { py, left, right, top, bottom, gap, rowH, textH, boxes: [...placed, ...boxes ?? []], measure: (t) => ctx.measureText(t).width });
+    if (!at) {
+      cut.push(m.label);
+      continue;
     }
-    const x0 = Math.max(left + gap, x1 - w);
-    placed.push({ x0, x1: x0 + w, y0: base - textH, y1: base });
+    if (at.cut) cut.push(m.label);
+    placed.push({ x0: at.x0, x1: at.x0 + at.w, y0: at.y - textH, y1: at.y });
+    boxes?.push({ kind: "y", text: at.text, full: m.label, x0: at.x0, x1: at.x0 + at.w, y0: at.y - textH, y1: at.y });
     ctx.textAlign = "left";
     ctx.lineWidth = 3 * pr;
     ctx.strokeStyle = style.halo;
-    ctx.strokeText(m.label, x0, base);
+    ctx.strokeText(at.text, at.x0, at.y);
     ctx.fillStyle = color;
-    ctx.fillText(m.label, x0, base);
+    ctx.fillText(at.text, at.x0, at.y);
   }
   ctx.restore();
+  return cut;
 }
 function nearestPoint(xs, ys, left, top) {
   let best = null;
@@ -303,7 +504,7 @@ function nearestPoint(xs, ys, left, top) {
   }
   return best;
 }
-function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280, onCursor, onPick, parity, readout, hint, solo }) {
+function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280, onCursor, onPick, parity, readout, hint, solo, title, zoomY, zoomOff }) {
   const lang = useShellLang();
   const theme = useThemeStore((s) => s.theme);
   const fill = height === "fill";
@@ -319,8 +520,21 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
   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 ctlRef = useRef(null);
+  const explicitRef = useRef(false);
   const hostRef = useRef(null);
   const [cursor, setCursor] = useState(null);
+  const ids = useId();
+  const tableId = `${ids}-table`;
+  const summaryId = `${ids}-summary`;
+  const [zoomed, setZoomed] = useState(false);
+  const fullRef = useRef(null);
+  const zoomRef = useRef({ x: null, y: null });
+  const zoomedRef = useRef(false);
+  const kbRef = useRef(null);
+  const dataRef = useRef(null);
+  const [forced, setForced] = useState("");
+  const [cutKey, setCutKey] = useState("");
   const [soloPick, setSoloPick] = useState(null);
   const soloFound = solo && soloPick !== null ? series.findIndex((s) => soloKey(s) === soloPick) : -1;
   const soloIdx = soloFound >= 0 ? soloFound : null;
@@ -369,6 +583,20 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
   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 drawn = width > 0 && h > 0;
+  const name = title ? pick(title, lang) : defaultChartName(lang, yLabel, xLabel);
+  const zoomIsOff = zoomOff !== void 0 && zoomOff !== null;
+  const zoomWhy = zoomIsOff ? pick(zoomOff, lang) : "";
+  const zoomable = !zoomIsOff && xs.length >= 2 && xs[xs.length - 1] > xs[0];
+  const both = Boolean(zoomY || parity);
+  const zoomableRef = useRef(zoomable);
+  zoomableRef.current = zoomable;
+  const bothRef = useRef(both);
+  bothRef.current = both;
+  const xTitle = xUnit ? `${xLabel} (${xUnit})` : xLabel;
+  const yTitle = yUnit ? `${yLabel} (${yUnit})` : yLabel;
+  const yAbove = !axisTitleFits(yTitle, h - 44) || forced === yTitle;
+  const xBelow = !axisTitleFits(xTitle, width - 16);
   const structure = JSON.stringify({
     s: series.map((s, i) => [pick(s.label, lang), seriesStyle(s, i), s.width ?? 2, s.mode ?? "line", s.size ?? 9, isOverlay(s), 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],
@@ -381,9 +609,19 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
     theme,
     lang,
     h,
-    w: width
+    w: width,
+    ta: [yAbove, xBelow, zoomable, both]
   });
   const data = useMemo(() => [xs, ...ys], [xs, ys]);
+  const leastSpan = (axis) => {
+    const u = uRef.current;
+    const f = fullRef.current;
+    if (!u || !f) return void 0;
+    if (axis === "x" ? x.time || x.log || Boolean(ticks) : Boolean(y.log)) return void 0;
+    const pr = uPlot.pxRatio || 1;
+    const room = (axis === "x" ? u.bbox.width : u.bbox.height) / pr;
+    return leastLabelSpan(axis === "x" ? x.format : y.format, f[axis], room, range ? PARITY_TICK_SPACE : axis === "x" ? 50 : 30);
+  };
   const scatter = baseEntries.length > 0 && baseEntries.every(({ s }) => s.mode === "points");
   useEffect(() => {
     const el = plotRef.current;
@@ -415,13 +653,13 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
       return labels;
     };
     const near = { left: NaN, top: NaN, idx: null };
-    const nearest = (u) => {
-      const { left, top } = u.cursor;
+    const nearest = (u2) => {
+      const { left, top } = u2.cursor;
       if (left === void 0 || top === void 0 || left < 0 || top < 0) return null;
       if (left !== near.left || top !== near.top) {
-        const d = u.data;
-        const px = d[0].map((v) => v === null ? NaN : u.valToPos(v, "x"));
-        const py = d.slice(1).map((col) => col.map((v) => v === null ? null : u.valToPos(v, "y")));
+        const d = u2.data;
+        const px = d[0].map((v) => v === null ? NaN : u2.valToPos(v, "x"));
+        const py = d.slice(1).map((col) => col.map((v) => v === null ? null : u2.valToPos(v, "y")));
         near.left = left;
         near.top = top;
         near.idx = nearestPoint(px, py, left, top);
@@ -430,11 +668,20 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
     };
     const xSteps = x.time || x.log ? void 0 : tickSteps(x.format);
     const ySteps = y.log ? void 0 : tickSteps(y.format);
+    const fixedRange = (r) => (_u, min, max) => explicitRef.current && min !== null && max !== null ? [min, max] : [r[0], r[1]];
     const opts = {
       width,
       height: h,
+      // the month and weekday names of a time axis in the page language: uPlot's own are English (0.19.1, SHC-099)
+      ...x.time ? { fmtDate: /* @__PURE__ */ ((names) => (tpl) => uPlot.fmtDate(tpl, names))(dateNames(lang)) } : {},
       legend: { show: false },
-      ...scatter ? { cursor: { dataIdx: (u, sIdx, closest) => sIdx === 0 ? closest : nearest(u) ?? closest } } : {},
+      cursor: {
+        ...scatter ? { dataIdx: (u2, sIdx, closest) => sIdx === 0 ? closest : nearest(u2) ?? closest } : {},
+        // the brush: a drag along x (and y where both axes zoom); a drag under DRAG_THRESHOLD px is a click, not a zoom. uPlot's own setScale
+        // is off: a fixed range (`range`, `x.range`) turns the scale it sets back into the fixed one, so the selection is applied by the
+        // `setSelect` hook below, through the same operation as the wheel and the keys
+        drag: zoomable ? { x: true, y: both, dist: DRAG_THRESHOLD, setScale: false } : { x: false, y: false, setScale: false }
+      },
       // a log axis labels the ticks uPlot keeps and passes null for the rest, which formatTicks leaves blank
       scales: {
         // a log x axis spans the data, not the decades around it (uPlot rounds out to the next decade, which left an
@@ -442,16 +689,18 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
         x: {
           time: Boolean(x.time),
           distr: x.log ? 3 : 1,
-          ...range ? { range } : xExt ? { range: xExt } : x.log ? { range: (_u, min, max) => [min, max] } : {}
+          // a fixed range is a function that gives way to a zoom: uPlot passes even an explicit range through the scale's range, so a constant
+          // (or an array) undid every zoom of a chart with `x.range` or `y.range` (Tier A, 0.19.0)
+          ...range ? { range: fixedRange(range) } : xExt ? { range: fixedRange(xExt) } : x.log ? { range: (_u, min, max) => [min, max] } : {}
         },
         y: {
           distr: y.log ? 3 : 1,
-          ...range ? { range } : y.range ? { range: y.range } : yLevels ? {
+          ...range ? { range: fixedRange(range) } : y.range ? { range: fixedRange(y.range) } : yLevels ? {
             // uPlot's own range of the data and the levels: its padding, its decade snap on a log axis
-            range: (u, dmin, dmax) => {
+            range: (u2, dmin, dmax) => {
               const w = rangeWithLevels(dmin, dmax, yLevels, Boolean(y.log), 0.05);
               if (!w) return [dmin, dmax];
-              return y.log ? uPlot.rangeLog(w[0], w[1], u.scales.y.log ?? 10, false) : uPlot.rangeNum(w[0], w[1], 0.1, true);
+              return y.log ? uPlot.rangeLog(w[0], w[1], u2.scales.y.log ?? 10, false) : uPlot.rangeNum(w[0], w[1], 0.1, true);
             }
           } : {}
         }
@@ -462,7 +711,7 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
           grid: { stroke: grid, width: 1 },
           ticks: { stroke: grid },
           font,
-          label: xUnit ? `${xLabel} (${xUnit})` : xLabel,
+          label: xBelow ? void 0 : xTitle,
           labelFont: font,
           // 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),
@@ -480,7 +729,7 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
           grid: { stroke: grid, width: 1 },
           ticks: { stroke: grid },
           font,
-          label: yUnit ? `${yLabel} (${yUnit})` : yLabel,
+          label: yAbove ? void 0 : yTitle,
           labelFont: font,
           values: tick(y.format, "y"),
           ...ySteps ? { incrs: ySteps } : {},
@@ -489,12 +738,12 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
           // Sized to the longest tick label. uPlot draws in device pixels with a font scaled by its pixel ratio, so the
           // label is measured in that font and divided back (measuring the unscaled font and dividing by the ratio
           // made the axis too narrow on every high-density screen; the gate runs at ratio 1 and never saw it).
-          size: (u, values) => {
+          size: (u2, values) => {
             if (!values || values.length === 0) return 48;
             const pr = uPlot.pxRatio || 1;
-            u.ctx.font = `${Math.round(11 * pr)}px ${family}`;
-            const widest = Math.max(...values.map((v) => u.ctx.measureText(v ?? "").width));
-            return Math.ceil(widest / pr) + 30;
+            u2.ctx.font = `${Math.round(11 * pr)}px ${family}`;
+            const widest = Math.max(...values.map((v) => u2.ctx.measureText(v ?? "").width));
+            return Math.ceil(widest / pr) + (yAbove ? 18 : 30);
           }
         }
       ],
@@ -509,16 +758,16 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
       ],
       hooks: {
         setCursor: [
-          (u) => {
-            const idx = scatter ? nearest(u) : u.cursor.idx ?? null;
+          (u2) => {
+            const idx = scatter ? nearest(u2) : u2.cursor.idx ?? null;
             pickedRef.current = idx;
             setCursor(idx);
             onCursorRef.current?.(idx === null ? null : orderRef.current ? orderRef.current[idx] : idx);
           }
         ],
         ready: [
-          (u) => {
-            u.over.addEventListener("click", () => {
+          (u2) => {
+            u2.over.addEventListener("click", () => {
               const idx = pickedRef.current;
               if (idx === null || idx === void 0 || !onPickRef.current) return;
               onPickRef.current(orderRef.current ? orderRef.current[idx] : idx);
@@ -543,7 +792,7 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
                 if (v === liveRef.current[i]) return;
                 liveRef.current[i] = v;
                 onYMarkChangeRef.current?.(i, v);
-                u.redraw(false);
+                u2.redraw(false);
               };
               let dragging = false;
               el2.addEventListener("pointerdown", (e) => {
@@ -555,7 +804,7 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
               });
               el2.addEventListener("pointermove", (e) => {
                 if (!dragging) return;
-                set(u.posToVal(e.clientY - u.over.getBoundingClientRect().top, "y"));
+                set(u2.posToVal(e.clientY - u2.over.getBoundingClientRect().top, "y"));
               });
               const end = (e) => {
                 dragging = false;
@@ -569,68 +818,100 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
                 e.preventDefault();
                 set(v);
               });
-              u.over.appendChild(el2);
+              u2.over.appendChild(el2);
             });
-            if (dragCount) queueMicrotask(() => uRef.current === u && u.redraw(false));
+            if (dragCount) queueMicrotask(() => uRef.current === u2 && u2.redraw(false));
+          }
+        ],
+        setSelect: [
+          (u2) => {
+            const sel = { left: u2.select.left, top: u2.select.top, width: u2.select.width, height: u2.select.height };
+            if (!(sel.width > 0 || sel.height > 0)) return;
+            const x0 = u2.posToVal(sel.left, "x");
+            const x1 = u2.posToVal(sel.left + sel.width, "x");
+            const y0 = u2.posToVal(sel.top + sel.height, "y");
+            const y1 = u2.posToVal(sel.top, "y");
+            u2.setSelect({ left: 0, top: 0, width: 0, height: 0 }, false);
+            ctlRef.current?.brush(sel.width > 0 ? [x0, x1] : null, bothRef.current && sel.height > 0 ? [y0, y1] : void 0);
+          }
+        ],
+        setScale: [
+          (u2, key) => {
+            if (key !== "x" && key !== "y") return;
+            const f2 = fullRef.current;
+            if (!f2) return;
+            const rx = [u2.scales.x.min ?? f2.x[0], u2.scales.x.max ?? f2.x[1]];
+            const ry = [u2.scales.y.min ?? f2.y[0], u2.scales.y.max ?? f2.y[1]];
+            hostRef.current?.setAttribute("data-view-x", `${rx[0]},${rx[1]}`);
+            const zx = isZoomed(rx, f2.x);
+            const zy = bothRef.current && isZoomed(ry, f2.y);
+            zoomRef.current = { x: zx ? rx : null, y: zy ? ry : null };
+            const z = zx || zy;
+            if (z !== zoomedRef.current) {
+              zoomedRef.current = z;
+              setZoomed(z);
+            }
+            u2.over.style.touchAction = zoomableRef.current ? z ? "none" : "pan-y" : "";
           }
         ],
         draw: [
-          (u) => {
+          (u2) => {
             if (range) {
-              const ctx = u.ctx;
-              const pr = uPlot.pxRatio || 1;
+              const ctx = u2.ctx;
+              const pr2 = uPlot.pxRatio || 1;
               ctx.save();
               ctx.strokeStyle = resolveToken("--color-fg-faint", "#888");
-              ctx.lineWidth = Math.max(1, pr);
-              ctx.setLineDash([5 * pr, 4 * pr]);
+              ctx.lineWidth = Math.max(1, pr2);
+              ctx.setLineDash([5 * pr2, 4 * pr2]);
               ctx.beginPath();
-              ctx.moveTo(u.valToPos(range[0], "x", true), u.valToPos(range[0], "y", true));
-              ctx.lineTo(u.valToPos(range[1], "x", true), u.valToPos(range[1], "y", true));
+              ctx.moveTo(u2.valToPos(range[0], "x", true), u2.valToPos(range[0], "y", true));
+              ctx.lineTo(u2.valToPos(range[1], "x", true), u2.valToPos(range[1], "y", true));
               ctx.stroke();
               ctx.restore();
             }
             const dots = overlaysRef.current;
             if (dots.length) {
-              const ctx = u.ctx;
-              const pr = uPlot.pxRatio || 1;
-              let drawn = 0;
+              const ctx = u2.ctx;
+              const pr2 = uPlot.pxRatio || 1;
+              let drawn2 = 0;
               ctx.save();
               ctx.beginPath();
-              ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
+              ctx.rect(u2.bbox.left, u2.bbox.top, u2.bbox.width, u2.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;
+                ctx.lineWidth = Math.max(1, pr2);
+                const r = (s.size ?? 9) / 2 * pr2;
                 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;
+                  const px = u2.valToPos(ox[k], "x", true);
+                  const py = u2.valToPos(v, "y", true);
+                  if (!Number.isFinite(px) || !Number.isFinite(py) || px < u2.bbox.left - 0.5 || px > u2.bbox.left + u2.bbox.width + 0.5 || py < u2.bbox.top - 0.5 || py > u2.bbox.top + u2.bbox.height + 0.5) continue;
                   ctx.beginPath();
                   ctx.arc(px, py, r, 0, Math.PI * 2);
                   ctx.fill();
                   ctx.stroke();
-                  drawn++;
+                  drawn2++;
                 }
               }
               ctx.restore();
-              hostRef.current?.setAttribute("data-overlay-drawn", String(drawn));
+              hostRef.current?.setAttribute("data-overlay-drawn", String(drawn2));
             }
             const markStyle = { color: resolveToken("--color-warn", "#c80"), halo: surface, family };
             const lines = yMarksRef.current ?? [];
-            if (lines.length) drawYMarks(u, lines.map((m, i) => ({ y: liveRef.current[i] ?? m.y, label: 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 boxes = [];
+            const ycut = lines.length ? drawYMarks(u2, 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, boxes) : [];
+            u2.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";
+              const top = u2.valToPos(v, "y");
+              el2.style.display = Number.isFinite(top) && top >= 0 && top <= u2.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}` : ""}`;
@@ -639,7 +920,16 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
               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);
+            const cut = [...ycut, ...marks?.length ? drawMarks(u2, marks.map((m) => ({ x: m.x, label: pick(m.label, lang) })), markStyle, boxes) : []];
+            const pr = uPlot.pxRatio || 1;
+            const rounded = (v) => Math.round(v / pr * 10) / 10;
+            hostRef.current?.setAttribute("data-mark-overlaps", String(countOverlaps(boxes)));
+            if (boxes.length) hostRef.current?.setAttribute("data-mark-boxes", JSON.stringify(boxes.map((b) => ({ k: b.kind, t: b.text, x0: rounded(b.x0), y0: rounded(b.y0), x1: rounded(b.x1), y1: rounded(b.y1), ...b.text !== b.full ? { cut: true } : {} }))));
+            else hostRef.current?.removeAttribute("data-mark-boxes");
+            if (cut.length) hostRef.current?.setAttribute("data-mark-cut", cut.join("|"));
+            else hostRef.current?.removeAttribute("data-mark-cut");
+            const now = cut.join(CUT_SEP);
+            setCutKey((prev) => prev === now ? prev : now);
           }
         ]
       }
@@ -649,14 +939,60 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
       hostRef.current?.removeAttribute("data-ticks-repeated");
     }
     uRef.current?.destroy();
-    uRef.current = new uPlot(opts, data, el);
+    fullRef.current = null;
+    dataRef.current = data;
+    const u = new uPlot(opts, data, el);
+    uRef.current = u;
+    u.batch(() => void 0);
+    const f = { x: [u.scales.x.min ?? 0, u.scales.x.max ?? 1], y: [u.scales.y.min ?? 0, u.scales.y.max ?? 1] };
+    fullRef.current = f;
+    hostRef.current?.setAttribute("data-view-x", `${f.x[0]},${f.x[1]}`);
+    const ctl = createZoom(u, { plot: el, log: { x: Boolean(x.log), y: Boolean(y.log) }, both, enabled: () => zoomableRef.current, full: () => fullRef.current, explicit: explicitRef, least: leastSpan });
+    ctlRef.current = ctl;
+    u.over.style.touchAction = zoomable ? "pan-y" : "";
+    const held = zoomRef.current;
+    const meets = (r, full) => r && r[1] > full[0] && r[0] < full[1] ? [Math.max(r[0], full[0]), Math.min(r[1], full[1])] : null;
+    const hx = zoomable ? meets(held.x, f.x) : null;
+    const hy = zoomable && both ? meets(held.y, f.y) : null;
+    if (hx || hy) {
+      explicitRef.current = true;
+      u.batch(() => {
+        if (hx) u.setScale("x", { min: hx[0], max: hx[1] });
+        if (hy) u.setScale("y", { min: hy[0], max: hy[1] });
+      });
+      explicitRef.current = false;
+    } else {
+      zoomRef.current = { x: null, y: null };
+      if (zoomedRef.current) {
+        zoomedRef.current = false;
+        setZoomed(false);
+      }
+    }
+    if (!yAbove && yTitle) {
+      const pr = uPlot.pxRatio || 1;
+      const cy = (u.bbox.top + u.bbox.height / 2) / pr;
+      if (!axisTitleFits(yTitle, 2 * Math.min(cy, h - cy) - 4)) setForced(yTitle);
+    }
     return () => {
+      ctl.detach();
+      ctlRef.current = null;
       uRef.current?.destroy();
       uRef.current = null;
     };
   }, [structure]);
   useEffect(() => {
-    uRef.current?.setData(data);
+    const u = uRef.current;
+    if (!u) return;
+    if (dataRef.current && sameData(dataRef.current, data)) return;
+    dataRef.current = data;
+    fullRef.current = null;
+    zoomRef.current = { x: null, y: null };
+    u.batch(() => u.setData(data));
+    fullRef.current = { x: [u.scales.x.min ?? 0, u.scales.x.max ?? 1], y: [u.scales.y.min ?? 0, u.scales.y.max ?? 1] };
+    if (zoomedRef.current) {
+      zoomedRef.current = false;
+      setZoomed(false);
+    }
   }, [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"]));
@@ -675,11 +1011,144 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
     });
     u.redraw(false);
   }, [soloIdx, baseEntries]);
+  const timeSpan = xs.length > 1 ? Math.abs(xs[xs.length - 1] - xs[0]) : 0;
+  const xValue = (v) => x.time ? formatTime(v, lang, timeSpan) : formatNumber(v, lang, x.format ?? { digits: 4 });
   const read = cursor !== null && readout ? readout(order ? order[cursor] : cursor) : cursor !== null ? [
     // 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}` : ""}`,
+    tickLabelAt(ticks, xs[cursor], lang, xSpan) !== null ? `${xLabel} ${tickLabelAt(ticks, xs[cursor], lang, xSpan)}` : `${xLabel} ${xValue(xs[cursor])}${xUnit && !x.time ? `${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";
+  const cutTexts = cutKey ? cutKey.split(CUT_SEP) : [];
+  const readFull = cutTexts.length ? [read, ...cutTexts].join(" \xB7 ") : read;
+  const xText = (v) => tickLabelAt(ticks, v, lang, xSpan) ?? xValue(v);
+  const yText = (v) => v === null || v === void 0 || !Number.isFinite(v) ? "" : `${formatNumber(v, lang, y.format ?? { digits: 4 })}`;
+  const xFormatKey = JSON.stringify(x.format ?? null);
+  const yFormatKey = JSON.stringify(y.format ?? null);
+  const a11y = useMemo(() => {
+    if (!drawn) return null;
+    const head = [xTitle, ...baseEntries.map(({ s: one }) => yUnit ? `${pick(one.label, lang)} (${yUnit})` : pick(one.label, lang)), ...overlays.map(({ s: one }) => yUnit ? `${pick(one.label, lang)} (${yUnit})` : pick(one.label, lang))];
+    const kept = thinRows(xs.length);
+    const blanks = (n) => Array.from({ length: n }, () => "");
+    const rows = kept.map((i) => [xText(xs[i]), ...ys.map((col) => yText(col[i])), ...blanks(overlays.length)]);
+    overlays.forEach(({ s: one }, o) => {
+      const ox = one.x ?? [];
+      for (const k of thinRows(Math.min(ox.length, one.values.length))) {
+        if (!Number.isFinite(ox[k]) || one.values[k] === null || one.values[k] === void 0) continue;
+        const cells = [...blanks(ys.length), ...blanks(overlays.length)];
+        cells[ys.length + o] = yText(one.values[k]);
+        rows.push([xText(ox[k]), ...cells]);
+      }
+    });
+    const multi = baseEntries.length + overlays.length > 1;
+    let low = null;
+    let high = null;
+    baseEntries.forEach(({ s: one }, k) => {
+      for (let i = 0; i < xs.length; i++) {
+        const v = ys[k][i];
+        if (v === null || v === void 0 || !Number.isFinite(v)) continue;
+        const at = `${multi ? `${pick(one.label, lang)}, ` : ""}${xLabel} ${xText(xs[i])}`;
+        if (!low || v < low.v) low = { v, at };
+        if (!high || v > high.v) high = { v, at };
+      }
+    });
+    const unit = yUnit ? `${NBSP}${yUnit}` : "";
+    const lo = low;
+    const hi = high;
+    const summary = chartSummary(lang, {
+      kind: "line",
+      name,
+      count: xs.length,
+      series: series.map((one) => pick(one.label, lang)),
+      xLabel,
+      xFrom: xs.length ? xText(xs[0]) : void 0,
+      xTo: xs.length ? xText(xs[xs.length - 1]) : void 0,
+      yLabel: yTitle,
+      low: lo ? { text: `${yText(lo.v)}${unit}`, at: lo.at } : void 0,
+      high: hi ? { text: `${yText(hi.v)}${unit}`, at: hi.at } : void 0
+    });
+    return { head, rows, summary, thinned: kept.length < xs.length };
+  }, [drawn, xs, ys, baseEntries, overlays, series, lang, ticks, xSpan, xTitle, yTitle, xLabel, yUnit, name, xFormatKey, yFormatKey, x.time, timeSpan]);
+  const marksId = `${ids}-marks`;
+  const markRows = useMemo(() => {
+    const unnamed = (yMarks ?? []).flatMap((m, k) => m.label ? [] : [k]);
+    const xs2 = (marks ?? []).map((m) => [pick(m.label, lang), `${xLabel} ${xText(m.x)}${xUnit && !x.time && tickLabelAt(ticks, m.x, lang, xSpan) === null ? `${NBSP}${xUnit}` : ""}`]);
+    const ys2 = (yMarks ?? []).map((m, k) => [m.label ? pick(m.label, lang) : referenceLineName(lang, unnamed.indexOf(k) + 1, unnamed.length), `${yText(m.y)}${yUnit ? `${NBSP}${yUnit}` : ""}`]);
+    return [...xs2, ...ys2];
+  }, [marks, yMarks, lang, xLabel, xUnit, yUnit, ticks, xSpan, xFormatKey, yFormatKey, x.time, timeSpan]);
+  const onKeyDown = (e) => {
+    if (e.target !== e.currentTarget) return;
+    const u = uRef.current;
+    const ctl = ctlRef.current;
+    if (!u || !ctl) return;
+    const act = keyAction(e.key, { shift: e.shiftKey, ctrl: e.ctrlKey, meta: e.metaKey, alt: e.altKey });
+    if (!act) return;
+    const n = xs.length;
+    const stand = kbRef.current;
+    switch (act) {
+      case "prev":
+      case "next":
+      case "first":
+      case "last": {
+        let idx;
+        if (stand === null && zoomedRef.current && (act === "next" || act === "prev")) {
+          const v = ctl.view().x;
+          let last = null;
+          for (let i = n - 1; i >= 0; i--) {
+            if (xs[i] >= v[0] && xs[i] <= v[1]) {
+              last = i;
+              break;
+            }
+          }
+          idx = act === "next" ? firstVisible(xs, v[0], v[1]) : last;
+        } else idx = stepIndex(stand, act, n);
+        if (idx === null) return;
+        kbRef.current = idx;
+        ctl.reveal(xs[idx]);
+        ctl.place(idx);
+        break;
+      }
+      case "zoomIn":
+      case "zoomOut": {
+        if (!zoomableRef.current) return;
+        const v = ctl.view();
+        const ax = stand !== null ? xs[stand] : x.log && v.x[0] > 0 ? Math.sqrt(v.x[0] * v.x[1]) : (v.x[0] + v.x[1]) / 2;
+        const firstY = stand !== null ? ys.map((col) => col[stand]).find((val) => val !== null && val !== void 0 && Number.isFinite(val)) : void 0;
+        const ay = firstY ?? (y.log && v.y[0] > 0 ? Math.sqrt(v.y[0] * v.y[1]) : (v.y[0] + v.y[1]) / 2);
+        ctl.zoomBy(act === "zoomIn" ? KEY_ZOOM : 1 / KEY_ZOOM, ax, ay);
+        if (stand !== null) ctl.place(stand);
+        break;
+      }
+      case "panPrev":
+      case "panNext":
+        if (!zoomableRef.current || !zoomedRef.current) return;
+        ctl.panBy(act === "panNext" ? KEY_PAN : -KEY_PAN);
+        break;
+      case "reset":
+        if (e.key === "Escape" && !zoomedRef.current) return;
+        ctl.reset();
+        if (stand !== null) ctl.place(stand);
+        e.stopPropagation();
+        break;
+      case "activate": {
+        if (stand === null || !onPickRef.current) return;
+        onPickRef.current(orderRef.current ? orderRef.current[stand] : stand);
+        break;
+      }
+    }
+    e.preventDefault();
+  };
+  const onBlur = (e) => {
+    if (e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) return;
+    if (kbRef.current === null) return;
+    kbRef.current = null;
+    ctlRef.current?.clear();
+  };
+  const resetZoom = () => {
+    ctlRef.current?.reset();
+    plotRef.current?.focus({ preventScroll: true });
+  };
+  const moved = [xBelow ? "x" : "", yAbove ? "y" : ""].filter(Boolean).join("");
+  const readoutEl = /* @__PURE__ */ jsx("p", { className: "caos-chart-readout", "aria-live": "polite", title: readFull, children: readFull });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -697,8 +1166,48 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
       "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,
+      "data-chart-host": drawn ? "line" : void 0,
+      "data-points": drawn ? String(xs.length) : void 0,
+      "data-zoomable": drawn ? zoomable ? "1" : "0" : void 0,
+      "data-zoomed": drawn && zoomed ? "1" : void 0,
+      "data-zoom-off": drawn && zoomIsOff ? zoomWhy : void 0,
+      "data-axis-title-moved": drawn && moved ? moved : void 0,
       children: [
-        /* @__PURE__ */ jsx("div", { ref: setPlot, className: "caos-chart-plot" }),
+        drawn && yAbove && yTitle && /* @__PURE__ */ jsx("p", { className: "caos-chart-axis-title", "data-axis-title": "y", children: yTitle }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setPlot,
+            className: "caos-chart-plot",
+            title: cutTexts.length ? cutTexts.join("; ") : void 0,
+            ...drawn ? {
+              tabIndex: 0,
+              role: "group",
+              "aria-roledescription": CHART_ROLE[lang],
+              "aria-label": name,
+              "aria-describedby": summaryId,
+              "aria-details": markRows.length ? `${tableId} ${marksId}` : tableId,
+              "aria-description": zoomable ? ZOOM_HINT[lang] : void 0,
+              "data-chart-focus": "",
+              onKeyDown,
+              onBlur
+            } : {}
+          }
+        ),
+        drawn && xBelow && /* @__PURE__ */ jsx("p", { className: "caos-chart-axis-title", "data-axis-title": "x", children: xTitle }),
+        drawn && a11y && /* @__PURE__ */ jsx(ChartSummary, { id: summaryId, text: a11y.summary }),
+        drawn && markRows.length > 0 && /* @__PURE__ */ jsx("div", { className: "sr-only", "data-chart-marks-box": "", children: /* @__PURE__ */ jsxs("table", { id: marksId, className: "caos-chart-table", "data-chart-marks": "", children: [
+          /* @__PURE__ */ jsx("caption", { children: lang === "es" ? `Marcas de ${name}` : `Marks of ${name}` }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: lang === "es" ? "Marca" : "Mark" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: lang === "es" ? "Posici\xF3n" : "Position" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: markRows.map((row, r) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", children: row[0] }),
+            /* @__PURE__ */ jsx("td", { children: row[1] })
+          ] }, r)) })
+        ] }) }),
+        drawn && a11y && /* @__PURE__ */ jsx(ChartDataTable, { id: tableId, caption: a11y.thinned ? `${name} (${lang === "es" ? "una de cada varias filas" : "every few rows"})` : name, head: a11y.head, rows: a11y.rows }),
         (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)
@@ -706,10 +1215,13 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
           /* @__PURE__ */ jsx("span", { className: "caos-chart-swatch", style: { "--swatch": `var(${seriesStyle(s, i).color})` }, "aria-hidden": "true" }),
           pick(s.label, lang)
         ] }) }, i)) }),
-        /* @__PURE__ */ jsx("p", { className: "caos-chart-readout", "aria-live": "polite", title: read, children: read })
+        drawn ? /* @__PURE__ */ jsxs("div", { className: "caos-chart-foot", children: [
+          readoutEl,
+          zoomed && zoomable && /* @__PURE__ */ jsx(ResetZoomButton, { lang, onReset: resetZoom })
+        ] }) : readoutEl
       ]
     }
   );
 }
 
-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 };
+export { LOG_TABLE_FLOOR, SOLO_DIM_ALPHA, UPlotChart, YMARK_TONE_TOKENS, clampMark, decadeOnly, drawMarks, drawYMarks, logDecades, namedRepeats, nearestPoint, nudgeMark, overlayExtent, parityBox, parityRange, rangeWithLevels, seriesStyle, smallestPositive, soloKey, soloStyle, sortOrder, tickLabelAt, tickSplits, tickSteps, xScaleRange };