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

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, NOT_AVAILABLE, widestLabel, fitLabel, formatTicks, niceTicks, textWidth, formatNumber, NBSP } from './chunk-DBCMAL2G.js';
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel } from './chunk-DBCMAL2G.js';
+import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, barExtent, clipExtent, allIntegers, bandsOf, windowRange, windowZoomed, unusedLegendTones, NOT_AVAILABLE, formatNumber, widestLabel, fitLabel, GROUP_MARGIN, axisTitleFits, wrapLines, formatTicks, niceTicks, textWidth, repeatedLabels, chartSummary, NBSP, CHART_ROLE, ChartSummary, ChartDataTable, ResetZoomButton, memberSlots, wheelFactor, pinchState, DRAG_THRESHOLD, panRange, brushWindow, keyAction, KEY_ZOOM, stepIndex, KEY_PAN, stepWindow, roundWindow, zoomRange, categoryAt, memberAt } from './chunk-FXPSZD6X.js';
+export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel } from './chunk-FXPSZD6X.js';
 import { APP_ROUTE, LANDING_ROUTE } from './chunk-33WTUQ7Q.js';
 export { APP_ROUTE, LANDING_ROUTE, LANG_STORAGE_KEY, STANDARD_ROUTES, THEME_BOOT_SCRIPT, THEME_STORAGE_KEY } from './chunk-33WTUQ7Q.js';
 import { createContext, Component, useState, useRef, useId, useEffect, useLayoutEffect, useCallback, useContext, useMemo, Children, isValidElement } from 'react';
@@ -3142,23 +3142,87 @@ var TONE = {
   accent: "var(--color-accent)",
   neutral: "var(--color-fg-faint)"
 };
+var REST = {
+  en: "Point at a bar, or use the arrow keys, to read its value",
+  es: "Apunte a una barra, o use las flechas, para leer su valor"
+};
 function Lines({ x, y, lines, anchor, fill }) {
   return /* @__PURE__ */ jsx("text", { x, y, textAnchor: anchor, fontSize: PX, fill, style: { fontFamily: "var(--font-sans)" }, children: lines.map((line, i) => /* @__PURE__ */ jsx("tspan", { x, dy: i === 0 ? 0 : LINE, children: line }, i)) });
 }
-function BarChart({ title, data, axis, orientation = "horizontal", values = true, height, onSelect }) {
+function BarChart({ title, data, axis, orientation = "horizontal", values = true, height, onSelect, zoomOff, legend }) {
   const lang = useShellLang();
-  const [ref, box] = useStageSize();
+  const [measureRef, box] = useStageSize();
+  const innerRef = useRef(null);
+  const setInner = useCallback(
+    (el) => {
+      innerRef.current = el;
+      measureRef(el);
+    },
+    [measureRef]
+  );
   const fill = height === "fill";
   const name = pick(title, lang);
-  const axisTitle = axis.unit ? `${pick(axis.label, lang)} (${pick(axis.unit, lang)})` : pick(axis.label, lang);
+  const unit = axis.unit ? pick(axis.unit, lang) : "";
+  const axisTitle = unit ? `${pick(axis.label, lang)} (${unit})` : pick(axis.label, lang);
   const fmt = axis.format ?? { digits: 3 };
+  const n = data.length;
   const finite = data.map((d) => d.value).filter((v) => v !== null && v !== void 0 && Number.isFinite(v));
-  const lo = Math.min(0, axis.range ? axis.range[0] : Math.min(0, ...finite));
-  const hi = Math.max(0, axis.range ? axis.range[1] : Math.max(0, ...finite));
+  const spanEnds = data.flatMap((d) => {
+    const e = barExtent(d.value, d.span);
+    return e && e.given ? [e.a, e.b] : [];
+  });
+  const floating = data.some((d) => d.span !== void 0 && d.span !== null);
+  const reach = [...finite, ...spanEnds];
+  const lo = floating && axis.range ? Math.min(axis.range[0], axis.range[1]) : Math.min(0, axis.range ? axis.range[0] : Math.min(0, ...reach));
+  const hi = floating && axis.range ? Math.max(axis.range[0], axis.range[1]) : Math.max(0, axis.range ? axis.range[1] : Math.max(0, ...reach));
+  const extents = data.map((d) => clipExtent(barExtent(d.value, d.span), lo, hi, floating));
+  const anyDot = extents.some((e) => e !== null && e.dot);
+  const countAxis = fmt.decimals === void 0 && reach.length > 0 && allIntegers(reach) && allIntegers(axis.range ?? []);
+  const resolution = fmt.decimals !== void 0 ? 10 ** -fmt.decimals / (fmt.percent ? 100 : 1) : countAxis ? 1 : 0;
   const anyHighlight = data.some((d) => d.highlight);
   const colour = (d) => d.tone ? TONE[d.tone] : !anyHighlight || d.highlight ? "var(--color-accent)" : "var(--color-fg-faint)";
-  const shown = (d) => d.value === null || d.value === void 0 || !Number.isFinite(d.value) ? NOT_AVAILABLE[lang] : formatNumber(d.value, lang, fmt);
+  const outline = (d) => d.tone && d.highlight ? { stroke: "var(--color-fg)", strokeWidth: 2 } : {};
+  const fmtOf = (d) => d.format ?? fmt;
+  const shown = (d) => d.value === null || d.value === void 0 || !Number.isFinite(d.value) ? NOT_AVAILABLE[lang] : formatNumber(d.value, lang, fmtOf(d));
   const width = box.width;
+  const ids = useId();
+  const tableId = `${ids}-table`;
+  const summaryId = `${ids}-summary`;
+  const [win, setWin] = useState(null);
+  const [cursor, setCursor] = useState(null);
+  const [brush, setBrush] = useState(null);
+  const bands = useMemo(() => bandsOf(data.map((d) => d.group?.id)), [data]);
+  const nb = bands.length;
+  const grouped = data.some((d) => d.group !== void 0 && d.group !== null);
+  const most = Math.max(1, ...bands.map((b) => b.to - b.from));
+  const bandOf = (i) => bands.findIndex((b) => i >= b.from && i < b.to);
+  const bandLabel = (b) => pick(b.group !== void 0 ? data[b.from].group.label : data[b.from].label, lang);
+  const [s0, e0] = windowRange(nb, win);
+  const zoomed = windowZoomed(nb, win);
+  const zoomIsOff = zoomOff !== void 0 && zoomOff !== null;
+  const zoomable = !zoomIsOff && nb >= 3;
+  const zoomWhy = zoomIsOff ? pick(zoomOff, lang) : "";
+  const kbRef = useRef(false);
+  const geoRef = useRef(null);
+  const live = useRef({ win, n: nb, zoomable, cursor });
+  live.current = { win, n: nb, zoomable, cursor };
+  const idKey = data.map((d) => d.group ? `${d.id}${d.group.id}` : d.id).join("
");
+  useEffect(() => {
+    setWin(null);
+    setCursor(null);
+    setBrush(null);
+  }, [idKey]);
+  const unusedTones = legend ? unusedLegendTones(data.map((d) => d.tone ?? (anyHighlight && !d.highlight ? "neutral" : "accent")), legend) : [];
+  const unusedKey = unusedTones.join(",");
+  useEffect(() => {
+    let dev = false;
+    try {
+      dev = process.env.NODE_ENV !== "production";
+    } catch {
+      dev = false;
+    }
+    if (dev && unusedKey) console.warn(`BarChart "${name}": the legend names the tone(s) ${unusedKey}, which no bar uses`);
+  }, [unusedKey, name]);
   const select = (id) => onSelect?.(id);
   const keyed = (id) => (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -3167,53 +3231,103 @@ function BarChart({ title, data, axis, orientation = "horizontal", values = true
     }
   };
   const interactive = (d) => onSelect ? { role: "button", tabIndex: 0, onClick: () => select(d.id), onKeyDown: keyed(d.id), style: { cursor: "pointer" } } : {};
+  const hitArea = Boolean(onSelect) && (floating || grouped);
   let drawing = null;
   let drawnHeight = 0;
-  if (width > 0 && data.length > 0) {
-    const valueLabels = data.map(shown);
+  let tickLabels = [];
+  const valueLabels = data.map(shown);
+  const endsText = data.map((d) => {
+    const e = barExtent(d.value, d.span);
+    if (!e || !e.given && !floating) return "";
+    const [a, b] = [formatNumber(e.a, lang, fmtOf(d)), formatNumber(e.b, lang, fmtOf(d))];
+    return lang === "es" ? `de ${a} a ${b}` : `from ${a} to ${b}`;
+  });
+  const memberName = (d, room) => {
+    if (!d.group) return "";
+    const full = pick(d.label, lang);
+    for (let k = full.length; k >= 1; k--) {
+      const t2 = full.slice(0, k).trimEnd();
+      if (t2 && textWidth(t2, PX) <= room) return t2;
+    }
+    return "";
+  };
+  const fullName = (d) => d.group ? `${pick(d.group.label, lang)}, ${pick(d.label, lang)}` : pick(d.label, lang);
+  if (width > 0 && n > 0) {
+    const count = e0 - s0;
     const valueCol = values ? widestLabel(valueLabels, PX) + 8 : 0;
+    const vis = bands.slice(s0, e0);
+    const items = vis.flatMap((b, kb) => Array.from({ length: b.to - b.from }, (_, j) => ({ b, kb, j, i: b.from + j, c: b.to - b.from })));
+    const slots = (c) => memberSlots(c, most);
     if (orientation === "horizontal") {
-      const labelCol = Math.min(widestLabel(data.map((d) => pick(d.label, lang)), PX), Math.max(80, 0.38 * width));
-      const fitted = data.map((d) => fitLabel(pick(d.label, lang), labelCol, PX, 2));
-      const need = Math.max(22, Math.max(...fitted.map((f) => f.lines.length)) * LINE + 8);
-      const axisH = 6 + LINE + 4 + LINE + 4;
-      const x0 = labelCol + 10;
-      const x1 = Math.max(x0 + 40, width - valueCol - 6);
+      const bandTexts = bands.map(bandLabel);
+      const labelCol = Math.min(widestLabel(bandTexts, PX), Math.max(80, 0.38 * width));
+      const fittedAll = bandTexts.map((t2) => fitLabel(t2, labelCol, PX, 2));
+      const fitted = fittedAll.slice(s0, e0);
+      const need = Math.max(22, Math.max(...fittedAll.map((f) => f.lines.length)) * LINE + 8, grouped ? most * 18 / (1 - 2 * GROUP_MARGIN) : 0);
+      const memberRoom = grouped ? Math.min(widestLabel(data.map((d) => d.group ? pick(d.label, lang) : ""), PX), Math.max(24, 0.2 * width)) : 0;
+      const memberCol = memberRoom > 0 ? memberRoom + 8 : 0;
+      const p0 = labelCol + 10 + memberCol;
+      const p1 = Math.max(p0 + 40, width - valueCol - 6);
+      const cx = p0 + (p1 - p0) / 2;
+      const titleFits = axisTitleFits(axisTitle, 2 * Math.min(cx, width - cx) - 8, PX);
+      const titleLines = titleFits ? [axisTitle] : wrapLines(axisTitle, width - 8, PX);
+      const axisH = 6 + LINE + 4 + titleLines.length * LINE + 4;
+      const rowFull = fill && box.height > 0 ? Math.max(need, (box.height - axisH - 4) / nb) : need;
+      const rowH = nb * rowFull / count;
+      const barH = grouped ? Math.min(rowH * slots(most).size * 0.8, 40) : Math.min(rowH * 0.5, 40);
+      const inset = anyDot ? barH / 2 : 0;
+      const x0 = p0 + inset;
+      const x1 = Math.max(x0 + 40, p1 - inset);
       const tickProbe = widestLabel(formatTicks([lo, hi], lang, fmt), PX);
-      const ticks = niceTicks(lo, hi, x1 - x0, tickProbe);
+      const ticks = niceTicks(lo, hi, x1 - x0, tickProbe, 6, resolution);
       const t0 = ticks[0];
       const t1 = ticks[ticks.length - 1];
-      const tickLabels = formatTicks(ticks, lang, fmt);
+      tickLabels = formatTicks(ticks, lang, fmt);
       const sx = (v) => x0 + (v - t0) / (t1 - t0 || 1) * (x1 - x0);
-      const rowH = fill && box.height > 0 ? Math.max(need, (box.height - axisH - 4) / data.length) : need;
       const top = 4;
-      const plotBottom = top + data.length * rowH;
+      const plotBottom = top + nb * rowFull;
       drawnHeight = fill && box.height > 0 ? Math.max(box.height, plotBottom + axisH) : plotBottom + axisH;
-      const barH = Math.min(rowH * 0.5, 40);
-      drawing = /* @__PURE__ */ jsxs("svg", { width, height: drawnHeight, role: "img", "aria-label": name, "data-chart": "", "data-chart-kind": "bars", children: [
+      const slotH = grouped ? rowH * slots(1).size : rowH;
+      const centre = (it) => top + it.kb * rowH + (grouped ? rowH * (slots(it.c).start + (it.j + 0.5) * slots(it.c).size) : rowH / 2);
+      geoRef.current = { horizontal: true, start: top, end: plotBottom };
+      const cb = cursor !== null ? bandOf(cursor) : -1;
+      drawing = /* @__PURE__ */ jsxs("svg", { width, height: drawnHeight, role: "presentation", "data-chart": "", "data-chart-kind": "bars", children: [
         /* @__PURE__ */ jsx("title", { children: name }),
         ticks.map((t2, i) => /* @__PURE__ */ jsxs("g", { children: [
           /* @__PURE__ */ jsx("line", { x1: sx(t2), x2: sx(t2), y1: top, y2: plotBottom, stroke: "var(--color-border)", strokeWidth: t2 === 0 ? 1.4 : 1 }),
           /* @__PURE__ */ jsx("text", { x: sx(t2), y: plotBottom + 6 + LINE - 2, textAnchor: i === 0 && sx(t2) - textWidth(tickLabels[i], PX) / 2 < 0 ? "start" : i === ticks.length - 1 && sx(t2) + textWidth(tickLabels[i], PX) / 2 > width ? "end" : "middle", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: tickLabels[i] })
         ] }, `t${i}`)),
-        /* @__PURE__ */ jsx("text", { x: x0 + (x1 - x0) / 2, y: plotBottom + 6 + LINE + 4 + LINE - 2, textAnchor: "middle", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: axisTitle }),
-        data.map((d, i) => {
-          const cy = top + i * rowH + rowH / 2;
-          const f = fitted[i];
+        /* @__PURE__ */ jsx(Lines, { x: titleFits ? cx : width / 2, y: plotBottom + 6 + LINE + 4 + LINE - 2, lines: titleLines, anchor: "middle", fill: "var(--color-fg-subtle)" }),
+        cursor !== null && cb >= s0 && cb < e0 && (grouped ? /* @__PURE__ */ jsx("rect", { className: "caos-bars-cursor", "data-bar-cursor": "", x: 0, y: top + (cb - s0) * rowH + rowH * (slots(bands[cb].to - bands[cb].from).start + (cursor - bands[cb].from) * slots(1).size), width, height: rowH * slots(1).size }) : /* @__PURE__ */ jsx("rect", { className: "caos-bars-cursor", "data-bar-cursor": "", x: 0, y: top + (cursor - s0) * rowH, width, height: rowH })),
+        vis.map(
+          (b, kb) => b.group !== void 0 ? /* @__PURE__ */ jsxs("g", { "data-group": b.group, children: [
+            /* @__PURE__ */ jsx("title", { children: bandTexts[s0 + kb] }),
+            /* @__PURE__ */ jsx(Lines, { x: labelCol + 2, y: top + kb * rowH + rowH / 2 - (fitted[kb].lines.length - 1) * LINE / 2 + 4, lines: fitted[kb].lines, anchor: "end", fill: "var(--color-fg)" })
+          ] }, `grp${s0 + kb}`) : null
+        ),
+        items.map((it) => {
+          const { i, kb } = it;
+          const d = data[i];
+          const cy = centre(it);
+          const f = fitted[kb];
           const v = d.value;
           const ok = v !== null && v !== void 0 && Number.isFinite(v);
-          const xa = sx(0);
-          const xb = ok ? sx(v) : xa;
+          const ex = extents[i];
+          const xa = ex ? sx(ex.a) : sx(0);
+          const xb = ex ? sx(ex.b) : xa;
           const labelText = valueLabels[i];
-          const negative = ok && v < 0;
-          return /* @__PURE__ */ jsxs("g", { "data-bar": d.id, ...interactive(d), children: [
-            /* @__PURE__ */ jsx("title", { children: [pick(d.label, lang), labelText, pick(d.hint, lang)].filter(Boolean).join(": ") }),
-            /* @__PURE__ */ jsx(Lines, { x: x0 - 8, y: cy - (f.lines.length - 1) * LINE / 2 + 4, lines: f.lines, anchor: "end", fill: d.highlight ? "var(--color-fg)" : "var(--color-fg-subtle)" }),
-            ok && /* @__PURE__ */ jsx("rect", { x: Math.min(xa, xb), y: cy - barH / 2, width: Math.max(1, Math.abs(xb - xa)), height: barH, rx: 2, fill: colour(d) }),
+          const negative = ok && !ex?.given && v < 0;
+          const far = Math.max(xa, xb);
+          const member = memberName(d, memberRoom);
+          return /* @__PURE__ */ jsxs("g", { "data-bar": d.id, "data-cursor": cursor === i ? "1" : void 0, ...interactive(d), children: [
+            /* @__PURE__ */ jsx("title", { children: [fullName(d), labelText, pick(d.hint, lang), endsText[i]].filter(Boolean).join(": ") }),
+            !d.group && /* @__PURE__ */ jsx(Lines, { x: labelCol + 2, y: cy - (f.lines.length - 1) * LINE / 2 + 4, lines: f.lines, anchor: "end", fill: d.highlight ? "var(--color-fg)" : "var(--color-fg-subtle)" }),
+            ex && ex.dot && /* @__PURE__ */ jsx("circle", { cx: xa, cy, r: barH / 2, fill: colour(d), ...outline(d) }),
+            ex && !ex.dot && /* @__PURE__ */ jsx("rect", { x: Math.min(xa, xb), y: cy - barH / 2, width: Math.max(1, Math.abs(xb - xa)), height: barH, rx: 2, fill: colour(d), ...outline(d) }),
             values && /* @__PURE__ */ jsx(
               "text",
               {
-                x: ok ? negative ? Math.max(x0 + textWidth(labelText, PX) + 2, xb - 4) : xb + 4 : xa + 4,
+                x: ok ? negative ? Math.max(x0 + textWidth(labelText, PX) + 2, xb - 4) : (ex?.given ? far : xb) + 4 + (ex?.dot ? barH / 2 : 0) : xa + 4,
                 y: cy + 4,
                 textAnchor: negative ? "end" : "start",
                 fontSize: PX,
@@ -3222,63 +3336,382 @@ function BarChart({ title, data, axis, orientation = "horizontal", values = true
                 style: { fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums" },
                 children: labelText
               }
-            )
+            ),
+            member && /* @__PURE__ */ jsx("text", { "data-member": "", x: p0 - 8, y: cy + 4, textAnchor: "end", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: member }),
+            hitArea && /* @__PURE__ */ jsx("rect", { "data-bar-hit": "", x: 0, y: cy - slotH / 2, width, height: slotH, fill: "transparent" })
           ] }, d.id);
-        })
+        }),
+        brush && /* @__PURE__ */ jsx("rect", { className: "caos-bars-brush", "data-bar-brush": "", x: 0, y: Math.min(brush.a, brush.b), width, height: Math.abs(brush.b - brush.a) })
       ] });
     } else {
       const h = fill && box.height > 0 ? box.height : typeof height === "number" ? height : 240;
-      const titleRow = LINE + 6;
+      const titleLines = wrapLines(axisTitle, width - 4, PX);
+      const titleRow = titleLines.length * LINE + 6;
       const valueRow = values ? LINE + 4 : 4;
       const probe = widestLabel(formatTicks([lo, hi], lang, fmt), PX);
       const left = probe + 12;
       const right = 8;
-      const band = (width - left - right) / data.length;
-      const fitted = data.map((d) => fitLabel(pick(d.label, lang), Math.max(24, band - 6), PX, 2));
-      const bottom = Math.max(...fitted.map((f) => f.lines.length)) * LINE + 10;
-      const y0 = titleRow + valueRow;
-      const y1 = Math.max(y0 + 40, h - bottom);
-      const ticks = niceTicks(lo, hi, y1 - y0, LINE);
+      const band = Math.max(0, (width - left - right) / count);
+      const fitted = vis.map((b) => fitLabel(bandLabel(b), Math.max(24, band - 6), PX, 2));
+      const slotW = band * slots(most).size;
+      const barW = grouped ? Math.max(0, Math.min(slotW * 0.84, 56)) : Math.max(0, Math.min(band * 0.62, 56));
+      const memberRow = grouped && data.some((d) => memberName(d, slotW - 2) !== "") ? LINE + 3 : 0;
+      const bottom = Math.max(...fitted.map((f) => f.lines.length)) * LINE + 10 + memberRow;
+      const inset = anyDot ? barW / 2 : 0;
+      const y0 = titleRow + valueRow + inset;
+      const y1 = Math.max(y0 + 40, h - bottom - inset);
+      const yl = y1 + inset;
+      const ticks = niceTicks(lo, hi, y1 - y0, LINE, 6, resolution);
       const t0 = ticks[0];
       const t1 = ticks[ticks.length - 1];
-      const tickLabels = formatTicks(ticks, lang, fmt);
+      tickLabels = formatTicks(ticks, lang, fmt);
       const sy = (v) => y1 - (v - t0) / (t1 - t0 || 1) * (y1 - y0);
-      const barW = Math.min(band * 0.62, 56);
+      const crowded = grouped && values && widestLabel(valueLabels, PX) > slotW - 2;
+      const centre = (it) => left + band * it.kb + (grouped ? band * (slots(it.c).start + (it.j + 0.5) * slots(it.c).size) : band / 2);
       drawnHeight = h;
-      drawing = /* @__PURE__ */ jsxs("svg", { width, height: h, role: "img", "aria-label": name, "data-chart": "", "data-chart-kind": "bars", children: [
+      geoRef.current = { horizontal: false, start: left, end: width - right };
+      const cb = cursor !== null ? bandOf(cursor) : -1;
+      drawing = /* @__PURE__ */ jsxs("svg", { width, height: h, role: "presentation", "data-chart": "", "data-chart-kind": "bars", children: [
         /* @__PURE__ */ jsx("title", { children: name }),
-        /* @__PURE__ */ jsx("text", { x: 0, y: LINE - 2, textAnchor: "start", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: axisTitle }),
+        /* @__PURE__ */ jsx(Lines, { x: 0, y: LINE - 2, lines: titleLines, anchor: "start", fill: "var(--color-fg-subtle)" }),
         ticks.map((t2, i) => /* @__PURE__ */ jsxs("g", { children: [
           /* @__PURE__ */ jsx("line", { x1: left, x2: width - right, y1: sy(t2), y2: sy(t2), stroke: "var(--color-border)", strokeWidth: t2 === 0 ? 1.4 : 1 }),
           /* @__PURE__ */ jsx("text", { x: left - 6, y: sy(t2) + 4, textAnchor: "end", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: tickLabels[i] })
         ] }, `t${i}`)),
-        data.map((d, i) => {
-          const cx = left + band * i + band / 2;
+        cursor !== null && cb >= s0 && cb < e0 && (grouped ? /* @__PURE__ */ jsx("rect", { className: "caos-bars-cursor", "data-bar-cursor": "", x: left + band * (cb - s0) + band * (slots(bands[cb].to - bands[cb].from).start + (cursor - bands[cb].from) * slots(1).size), y: y0, width: band * slots(1).size, height: h - y0 }) : /* @__PURE__ */ jsx("rect", { className: "caos-bars-cursor", "data-bar-cursor": "", x: left + band * (cursor - s0), y: y0, width: band, height: h - y0 })),
+        vis.map(
+          (b, kb) => b.group !== void 0 ? /* @__PURE__ */ jsxs("g", { "data-group": b.group, children: [
+            /* @__PURE__ */ jsx("title", { children: bandLabel(b) }),
+            /* @__PURE__ */ jsx(Lines, { x: left + band * kb + band / 2, y: yl + LINE + 2 + memberRow, lines: fitted[kb].lines, anchor: "middle", fill: "var(--color-fg)" })
+          ] }, `grp${s0 + kb}`) : null
+        ),
+        items.map((it) => {
+          const { i, kb } = it;
+          const d = data[i];
+          const cx = centre(it);
           const v = d.value;
           const ok = v !== null && v !== void 0 && Number.isFinite(v);
-          const ya = sy(0);
-          const yb = ok ? sy(v) : ya;
-          const f = fitted[i];
-          return /* @__PURE__ */ jsxs("g", { "data-bar": d.id, ...interactive(d), children: [
-            /* @__PURE__ */ jsx("title", { children: [pick(d.label, lang), valueLabels[i], pick(d.hint, lang)].filter(Boolean).join(": ") }),
-            ok && /* @__PURE__ */ jsx("rect", { x: cx - barW / 2, y: Math.min(ya, yb), width: barW, height: Math.max(1, Math.abs(yb - ya)), rx: 2, fill: colour(d) }),
-            values && /* @__PURE__ */ jsx("text", { x: cx, y: Math.min(ya, yb) - 5, textAnchor: "middle", fontSize: PX, fill: ok ? "var(--color-fg)" : "var(--color-fg-faint)", fontStyle: ok ? void 0 : "italic", style: { fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums" }, children: valueLabels[i] }),
-            /* @__PURE__ */ jsx(Lines, { x: cx, y: y1 + LINE + 2, lines: f.lines, anchor: "middle", fill: d.highlight ? "var(--color-fg)" : "var(--color-fg-subtle)" })
+          const ex = extents[i];
+          const ya = ex ? sy(ex.a) : sy(0);
+          const yb = ex ? sy(ex.b) : ya;
+          const f = fitted[kb];
+          const member = memberName(d, slotW - 2);
+          return /* @__PURE__ */ jsxs("g", { "data-bar": d.id, "data-cursor": cursor === i ? "1" : void 0, ...interactive(d), children: [
+            /* @__PURE__ */ jsx("title", { children: [fullName(d), valueLabels[i], pick(d.hint, lang), endsText[i]].filter(Boolean).join(": ") }),
+            ex && ex.dot && /* @__PURE__ */ jsx("circle", { cx, cy: ya, r: barW / 2, fill: colour(d), ...outline(d) }),
+            ex && !ex.dot && /* @__PURE__ */ jsx("rect", { x: cx - barW / 2, y: Math.min(ya, yb), width: barW, height: Math.max(1, Math.abs(yb - ya)), rx: 2, fill: colour(d), ...outline(d) }),
+            values && /* @__PURE__ */ jsx("text", { x: cx, y: Math.min(ya, yb) - 5 - (ex?.dot ? barW / 2 : 0) - (crowded && it.j % 2 === 1 ? LINE : 0), textAnchor: "middle", fontSize: PX, fill: ok ? "var(--color-fg)" : "var(--color-fg-faint)", fontStyle: ok ? void 0 : "italic", style: { fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums" }, children: valueLabels[i] }),
+            !d.group && /* @__PURE__ */ jsx(Lines, { x: cx, y: yl + LINE + 2, lines: f.lines, anchor: "middle", fill: d.highlight ? "var(--color-fg)" : "var(--color-fg-subtle)" }),
+            member && /* @__PURE__ */ jsx("text", { "data-member": "", x: cx, y: yl + LINE + 2, textAnchor: "middle", fontSize: PX, fill: "var(--color-fg-subtle)", style: { fontFamily: "var(--font-sans)" }, children: member }),
+            hitArea && /* @__PURE__ */ jsx("rect", { "data-bar-hit": "", x: cx - (grouped ? slotW : band) / 2, y: 0, width: grouped ? slotW : band, height: h, fill: "transparent" })
           ] }, d.id);
-        })
+        }),
+        brush && /* @__PURE__ */ jsx("rect", { className: "caos-bars-brush", "data-bar-brush": "", x: Math.min(brush.a, brush.b), y: y0, width: Math.abs(brush.b - brush.a), height: h - y0 })
       ] });
     }
   }
-  return /* @__PURE__ */ jsx(
+  const drawn = width > 0 && n > 0;
+  const repeats = repeatedLabels(tickLabels);
+  const a11y = useMemo(() => {
+    if (!drawn) return null;
+    const head = [
+      ...grouped ? [lang === "es" ? "Grupo" : "Group"] : [],
+      lang === "es" ? "Categor\xEDa" : "Category",
+      unit ? `${pick(axis.label, lang)} (${unit})` : pick(axis.label, lang),
+      ...floating ? lang === "es" ? ["Desde", "Hasta"] : ["From", "To"] : [],
+      lang === "es" ? "Nota" : "Note"
+    ];
+    const rows = data.map((d, i) => {
+      const e = barExtent(d.value, d.span);
+      const end = (v) => e && v !== void 0 ? formatNumber(v, lang, fmtOf(d)) : "";
+      return [...grouped ? [d.group ? pick(d.group.label, lang) : ""] : [], pick(d.label, lang), valueLabels[i], ...floating ? [end(e?.a), end(e?.b)] : [], pick(d.hint, lang)];
+    });
+    let low = -1;
+    let high = -1;
+    data.forEach((d, i) => {
+      if (d.value === null || d.value === void 0 || !Number.isFinite(d.value)) return;
+      if (low < 0 || d.value < data[low].value) low = i;
+      if (high < 0 || d.value > data[high].value) high = i;
+    });
+    const withUnit = (i) => `${valueLabels[i]}${unit ? `${NBSP}${unit}` : ""}`;
+    const drawnExtents = data.map((d) => barExtent(d.value, d.span));
+    const firstAt = drawnExtents.findIndex((e) => e !== null);
+    const lastAt = drawnExtents.length - 1 - [...drawnExtents].reverse().findIndex((e) => e !== null);
+    const endOf = (i, v) => ({ text: `${formatNumber(v, lang, fmtOf(data[i]))}${unit ? `${NBSP}${unit}` : ""}`, at: fullName(data[i]) });
+    const ends = floating && firstAt >= 0 ? { first: endOf(firstAt, drawnExtents[firstAt].a), last: endOf(lastAt, drawnExtents[lastAt].b) } : {};
+    const summary = chartSummary(lang, {
+      ...ends,
+      kind: "bars",
+      name,
+      count: n,
+      yLabel: axisTitle,
+      low: low >= 0 ? { text: withUnit(low), at: fullName(data[low]) } : void 0,
+      high: high >= 0 ? { text: withUnit(high), at: fullName(data[high]) } : void 0
+    });
+    return { head, rows, summary };
+  }, [drawn, data, lang, unit, name, axisTitle, axis.label, floating, grouped]);
+  const rest = lang === "es" ? REST.es : REST.en;
+  const read = cursor !== null && cursor < n ? [`${fullName(data[cursor])}: ${valueLabels[cursor]}${data[cursor].value === null || data[cursor].value === void 0 || !unit ? "" : `${NBSP}${unit}`}`, pick(data[cursor].hint, lang), endsText[cursor]].filter(Boolean).join(" \xB7 ") : rest;
+  const along = (e) => {
+    const g = geoRef.current;
+    const svg = innerRef.current?.querySelector("svg");
+    if (!g || !svg) return null;
+    const r = svg.getBoundingClientRect();
+    return g.horizontal ? e.clientY - r.top : e.clientX - r.left;
+  };
+  const setWindow = (r) => {
+    if (!r || r[0] <= 0 && r[1] >= nb) setWin(null);
+    else setWin(roundWindow(r, nb));
+  };
+  const fine = useRef(null);
+  const zoomAround = (factor, anchorBar, discrete = false) => {
+    const cur = windowRange(nb, live.current.win);
+    if (discrete) {
+      fine.current = null;
+      const next2 = stepWindow(cur, nb, anchorBar, factor);
+      setWindow(next2);
+      return next2[0] !== cur[0] || next2[1] !== cur[1];
+    }
+    const held = fine.current;
+    const base = held && held[0] > cur[0] - 1 && held[1] < cur[1] + 1 && roundWindow(held, nb)[0] === cur[0] && roundWindow(held, nb)[1] === cur[1] ? held : cur;
+    const next = zoomRange(base, [0, nb], anchorBar, factor, { minSpan: Math.min(2, nb) });
+    fine.current = next;
+    setWindow(next);
+    return Math.abs(next[0] - base[0]) > 1e-9 || Math.abs(next[1] - base[1]) > 1e-9;
+  };
+  const barAt = (pos) => {
+    const g = geoRef.current;
+    if (pos === null || !g) return null;
+    const win2 = windowRange(nb, live.current.win);
+    const bi = categoryAt(pos, g.start, g.end, win2, nb);
+    if (bi === null) return null;
+    const b = bands[bi];
+    if (b.to - b.from === 1) return b.from;
+    const scaled = (pos - g.start) / (g.end - g.start || 1) * (win2[1] - win2[0]);
+    return b.from + memberAt(scaled - Math.floor(scaled), b.to - b.from, most);
+  };
+  const barFloat = (pos) => {
+    const g = geoRef.current;
+    const [s, e] = windowRange(nb, live.current.win);
+    return g ? s + (pos - g.start) / (g.end - g.start || 1) * (e - s) : s;
+  };
+  const wheelOn = drawn && zoomable;
+  useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !wheelOn) return;
+    const onWheel = (e) => {
+      if (!live.current.zoomable) return;
+      if (!el.contains(document.activeElement)) return;
+      const pos = along(e);
+      if (pos === null) return;
+      if (zoomAround(wheelFactor(e.deltaY, e.deltaMode), barFloat(pos))) e.preventDefault();
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [wheelOn, nb]);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef({ kind: null, id: -1, start: 0, last: 0, moved: false, f: [0, 0], dist: 0 });
+  const onPointerDown = (e) => {
+    e.currentTarget.focus({ preventScroll: true });
+    kbRef.current = false;
+    if (!live.current.zoomable) return;
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pos = along(e);
+    const g = gesture.current;
+    if (e.pointerType === "mouse") {
+      if (e.button !== 0 || pos === null) return;
+      Object.assign(g, { kind: e.shiftKey ? "pan" : "brush", id: e.pointerId, start: pos, last: pos, moved: false, f: windowRange(nb, live.current.win) });
+      return;
+    }
+    if (pointers.current.size === 2) {
+      const [a, b] = [...pointers.current.values()];
+      Object.assign(g, { kind: "pinch", dist: pinchState(a, b).dist });
+    } else if (pointers.current.size === 1 && windowZoomed(nb, live.current.win) && pos !== null) {
+      Object.assign(g, { kind: "pan", id: e.pointerId, start: pos, last: pos, moved: false, f: windowRange(nb, live.current.win) });
+    }
+  };
+  const onPointerMove = (e) => {
+    const g = gesture.current;
+    const pos = along(e);
+    if (pointers.current.has(e.pointerId)) pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (g.kind === "pinch" && pointers.current.size === 2) {
+      const [a, b] = [...pointers.current.values()];
+      const now = pinchState(a, b);
+      const mid = along({ clientX: now.mx, clientY: now.my });
+      if (g.dist > 0 && now.dist > 0 && mid !== null) {
+        zoomAround(g.dist / now.dist, barFloat(mid));
+        g.dist = now.dist;
+      }
+      return;
+    }
+    if (g.kind && g.id === e.pointerId && pos !== null) {
+      const gap = geoRef.current ? geoRef.current.end - geoRef.current.start : 1;
+      if (!g.moved && Math.abs(pos - g.start) < DRAG_THRESHOLD) return;
+      if (!g.moved) {
+        g.moved = true;
+        try {
+          e.currentTarget.setPointerCapture(e.pointerId);
+        } catch {
+        }
+      }
+      if (g.kind === "brush") setBrush({ a: g.start, b: pos });
+      else {
+        const [s, en] = windowRange(nb, live.current.win);
+        const bars = (g.last - pos) / (gap || 1) * (en - s);
+        g.last = pos;
+        g.f = panRange(g.f, [0, nb], bars / (g.f[1] - g.f[0] || 1));
+        setWindow(g.f);
+      }
+      return;
+    }
+    if (e.pointerType === "mouse" || e.pointerType === "pen") {
+      const bar = barAt(pos);
+      kbRef.current = false;
+      setCursor(bar);
+    }
+  };
+  const endPointer = (e) => {
+    const g = gesture.current;
+    pointers.current.delete(e.pointerId);
+    if (e.pointerType === "touch" && e.type === "pointerup" && !g.moved && g.kind !== "pinch") {
+      const bar = barAt(along(e));
+      if (bar !== null) {
+        kbRef.current = false;
+        setCursor(bar);
+      }
+    }
+    if (g.kind === "brush" && g.id === e.pointerId && g.moved) {
+      const geo = geoRef.current;
+      const pos = along(e);
+      if (geo && pos !== null) {
+        const w = brushWindow(g.start, pos, geo.start, geo.end, windowRange(nb, live.current.win), nb);
+        if (w) setWindow(w);
+      }
+    }
+    if (e.currentTarget.hasPointerCapture?.(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+    setBrush(null);
+    if (g.kind !== "pinch" || pointers.current.size < 2) gesture.current = { ...g, kind: null, moved: false };
+  };
+  const onPointerLeave = (e) => {
+    if (e.pointerType !== "touch" && !kbRef.current) setCursor(null);
+  };
+  const onKeyDown = (e) => {
+    const onBar = e.target !== e.currentTarget && e.target instanceof Element && e.target.closest("[data-bar]") !== null;
+    if (e.target !== e.currentTarget && !onBar || nb === 0) return;
+    const act = keyAction(e.key, { shift: e.shiftKey, ctrl: e.ctrlKey, meta: e.metaKey, alt: e.altKey });
+    if (!act || onBar && act === "activate") return;
+    const [s, en] = windowRange(nb, win);
+    const stand = cursor;
+    switch (act) {
+      case "prev":
+      case "next":
+      case "first":
+      case "last": {
+        const standBand = stand !== null ? bandOf(stand) : -1;
+        const from = stand !== null && standBand >= s && standBand < en ? stand : null;
+        let idx;
+        if (from === null && (act === "next" || act === "prev") && windowZoomed(nb, win)) idx = act === "next" ? bands[s].from : bands[en - 1].to - 1;
+        else idx = stepIndex(from, act, n);
+        if (idx === null) return;
+        kbRef.current = true;
+        setCursor(idx);
+        const into = bandOf(idx);
+        if (into < s) setWindow([into, into + (en - s)]);
+        else if (into >= en) setWindow([into + 1 - (en - s), into + 1]);
+        break;
+      }
+      case "zoomIn":
+      case "zoomOut":
+        if (!zoomable) return;
+        zoomAround(act === "zoomIn" ? KEY_ZOOM : 1 / KEY_ZOOM, stand !== null ? bandOf(stand) + 0.5 : (s + en) / 2, true);
+        break;
+      case "panPrev":
+      case "panNext": {
+        if (!zoomable || !windowZoomed(nb, win)) return;
+        const bars = Math.max(1, Math.round((en - s) * KEY_PAN));
+        setWindow(panRange([s, en], [0, nb], (act === "panNext" ? 1 : -1) * bars / (en - s)));
+        break;
+      }
+      case "reset":
+        if (e.key === "Escape" && !windowZoomed(nb, win)) return;
+        setWin(null);
+        e.stopPropagation();
+        break;
+      case "activate":
+        if (stand === null || !onSelect) return;
+        select(data[stand].id);
+        break;
+    }
+    e.preventDefault();
+  };
+  const onBlur = (e) => {
+    if (e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) return;
+    if (kbRef.current) {
+      kbRef.current = false;
+      setCursor(null);
+    }
+  };
+  const resetZoom = () => {
+    setWin(null);
+    innerRef.current?.focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
-      className: fill ? "caos-bars fill" : "caos-bars",
-      style: !fill && orientation === "vertical" ? { height: typeof height === "number" ? height : 240 } : void 0,
-      "data-drawn": width > 0 ? "1" : "0",
-      "data-width": width,
-      "data-height": drawnHeight,
-      children: drawing
+      className: fill ? "caos-bars-host fill" : "caos-bars-host",
+      "data-chart-host": drawn ? "bars" : void 0,
+      "data-points": drawn ? String(n) : void 0,
+      "data-groups": drawn && grouped ? String(nb) : void 0,
+      "data-legend": drawn && legend && legend.length > 0 ? String(legend.length) : void 0,
+      "data-spans": drawn && floating ? String(data.filter((d) => d.span !== void 0 && d.span !== null).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-window": drawn ? `${s0},${e0}` : void 0,
+      "data-orientation": drawn ? orientation : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setInner,
+            className: fill ? "caos-bars fill" : "caos-bars",
+            style: !fill && orientation === "vertical" ? { height: typeof height === "number" ? height : 240 } : void 0,
+            "data-drawn": width > 0 ? "1" : "0",
+            "data-width": width,
+            "data-height": drawnHeight,
+            "data-ticks-repeat": drawn ? String(repeats) : void 0,
+            ...drawn ? {
+              tabIndex: 0,
+              role: "group",
+              "aria-roledescription": CHART_ROLE[lang],
+              "aria-label": name,
+              "aria-describedby": summaryId,
+              "aria-details": tableId,
+              "data-chart-focus": "",
+              "data-zoomed": zoomed ? "1" : void 0,
+              onKeyDown,
+              onBlur,
+              onPointerDown,
+              onPointerMove,
+              onPointerUp: endPointer,
+              onPointerCancel: endPointer,
+              onPointerLeave,
+              onDoubleClick: () => setWin(null)
+            } : {},
+            children: drawing
+          }
+        ),
+        drawn && legend && legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "caos-bars-legend", "aria-label": lang === "es" ? "Leyenda" : "Legend", children: legend.map((l, k) => /* @__PURE__ */ jsxs("li", { className: "caos-bars-key", "data-tone": l.tone, children: [
+          /* @__PURE__ */ jsx("span", { className: "caos-bars-swatch", style: { "--swatch": TONE[l.tone] }, "aria-hidden": "true" }),
+          pick(l.label, lang)
+        ] }, k)) }),
+        drawn && a11y && /* @__PURE__ */ jsx(ChartSummary, { id: summaryId, text: a11y.summary }),
+        drawn && a11y && /* @__PURE__ */ jsx(ChartDataTable, { id: tableId, caption: name, head: a11y.head, rows: a11y.rows }),
+        drawn && /* @__PURE__ */ jsxs("div", { className: "caos-bars-foot", children: [
+          /* @__PURE__ */ jsx("p", { className: "caos-bars-readout", "aria-live": "polite", title: read, children: read }),
+          zoomed && zoomable && /* @__PURE__ */ jsx(ResetZoomButton, { lang, onReset: resetZoom })
+        ] })
+      ]
     }
   );
 }