@apliteni/apliteni-ui 0.113.0 → 0.114.0

package/react/dist/index.js

@@ -273,6 +273,43 @@ import { useId as useId2 } from "react";
 
 // src/Tooltip.tsx
 import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState } from "react";
+
+// src/tip.ts
+function placeTip(host, mark, tip, bound) {
+  const mrect = mark.getBoundingClientRect();
+  const rect = host.getBoundingClientRect();
+  const view = host.ownerDocument.documentElement;
+  const clip = { top: 0, left: 0, right: view.clientWidth, bottom: view.clientHeight };
+  for (let el = host; el && el !== host.ownerDocument.body; el = el.parentElement) {
+    const style = getComputedStyle(el);
+    if (![style.overflow, style.overflowX, style.overflowY].some((v) => v && v !== "visible")) continue;
+    const bounds = el.getBoundingClientRect();
+    clip.top = Math.max(clip.top, bounds.top);
+    clip.left = Math.max(clip.left, bounds.left);
+    clip.right = Math.min(clip.right, bounds.right);
+    clip.bottom = Math.min(clip.bottom, bounds.bottom);
+  }
+  if (bound) {
+    const edge = bound.getBoundingClientRect();
+    clip.top = Math.max(clip.top, edge.top);
+    clip.left = Math.max(clip.left, edge.left);
+    clip.right = Math.min(clip.right, edge.right);
+    clip.bottom = Math.min(clip.bottom, edge.bottom);
+  }
+  const gap = parseFloat(getComputedStyle(tip).getPropertyValue("--ui-tip-gap")) || 8;
+  const above = mrect.top - clip.top;
+  const below = clip.bottom - mrect.bottom;
+  const isBelow = above < tip.offsetHeight + gap && below > above;
+  tip.classList.toggle("is-below", isBelow);
+  const centre = mrect.left + mrect.width / 2;
+  const ideal = centre - tip.offsetWidth / 2;
+  const left = Math.max(clip.left, Math.min(ideal, clip.right - tip.offsetWidth));
+  tip.style.setProperty("--ui-tip-x", `${centre - rect.left - host.clientLeft + host.scrollLeft}px`);
+  tip.style.setProperty("--ui-tip-y", `${(isBelow ? mrect.bottom : mrect.top) - rect.top - host.clientTop + host.scrollTop}px`);
+  tip.style.setProperty("--ui-tip-shift", `${left - ideal}px`);
+}
+
+// src/Tooltip.tsx
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function Tooltip({ text: text2, children }) {
   const id = useId();
@@ -282,34 +319,7 @@ function Tooltip({ text: text2, children }) {
   const ignoreMouseUntil = useRef2(0);
   const touchMoved = useRef2(false);
   const [open, setOpen] = useState(false);
-  function place() {
-    const h = host.current;
-    const t = tip.current;
-    const mark = trigger.current.getBoundingClientRect();
-    const rect = h.getBoundingClientRect();
-    const view = h.ownerDocument.documentElement;
-    const clip = { top: 0, left: 0, right: view.clientWidth, bottom: view.clientHeight };
-    for (let el = h; el && el !== h.ownerDocument.body; el = el.parentElement) {
-      const style = getComputedStyle(el);
-      if (![style.overflow, style.overflowX, style.overflowY].some((v) => v && v !== "visible")) continue;
-      const bounds = el.getBoundingClientRect();
-      clip.top = Math.max(clip.top, bounds.top);
-      clip.left = Math.max(clip.left, bounds.left);
-      clip.right = Math.min(clip.right, bounds.right);
-      clip.bottom = Math.min(clip.bottom, bounds.bottom);
-    }
-    const gap = parseFloat(getComputedStyle(t).getPropertyValue("--ui-tip-gap")) || 8;
-    const above = mark.top - clip.top;
-    const below = clip.bottom - mark.bottom;
-    const isBelow = above < t.offsetHeight + gap && below > above;
-    t.classList.toggle("is-below", isBelow);
-    const centre = mark.left + mark.width / 2;
-    const ideal = centre - t.offsetWidth / 2;
-    const left = Math.max(clip.left, Math.min(ideal, clip.right - t.offsetWidth));
-    t.style.setProperty("--ui-tip-x", `${centre - rect.left - h.clientLeft + h.scrollLeft}px`);
-    t.style.setProperty("--ui-tip-y", `${(isBelow ? mark.bottom : mark.top) - rect.top - h.clientTop + h.scrollTop}px`);
-    t.style.setProperty("--ui-tip-shift", `${left - ideal}px`);
-  }
+  const place = () => placeTip(host.current, trigger.current, tip.current);
   useLayoutEffect2(() => {
     if (open) place();
   }, [open, text2]);
@@ -3796,10 +3806,690 @@ var Success = forwardRef9(function Success2({
   );
 });
 
+// src/Chart.tsx
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect15,
+  useId as useId12,
+  useLayoutEffect as useLayoutEffect5,
+  useMemo as useMemo4,
+  useRef as useRef19,
+  useState as useState16
+} from "react";
+import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
+import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+var HEIGHT = { months: 216, bridge: 216, spark: 32 };
+var PAD = 2;
+var ZERO_INSET = 1.5;
+var TARGET = 24;
+var TAP_FLOOR = 44;
+var PHONE_MAX2 = 560;
+var FALLBACK_COL = 48;
+var BAR_SHARE = 0.5;
+var BAR_MAX = 24;
+var BAR_MAX_BRIDGE = 40;
+var LANE_GAP = 2;
+var BAR_RADIUS = 4;
+var MISSING = "\u2014";
+var cx8 = (...parts) => parts.filter(Boolean).join(" ");
+var px = (n) => Math.round(n * 10) / 10;
+var columnOf = (p, fallback) => ({
+  label: p.label,
+  short: p.short || fallback,
+  estimated: Boolean(p.estimated),
+  note: p.note
+});
+function onPrevious(value, previous, when) {
+  if (previous === void 0 || previous === 0 || !Number.isFinite(previous) || !when) return "";
+  const pct = (value - previous) / Math.abs(previous) * 100;
+  return `${pct < 0 ? "\u2212" : "+"}${Math.abs(pct).toFixed(1)}% on ${when}`;
+}
+function barPath(m) {
+  const r = Math.min(BAR_RADIUS, m.w / 2, m.h / (m.foot ? 1 : 4));
+  const { x, y: top, w, h } = m;
+  const bottom = top + h;
+  const arc = (dx, dy, sweep) => `a${px(r)} ${px(r)} 0 0 ${sweep} ${px(dx)} ${px(dy)}`;
+  if (r <= 0) return `M${px(x)} ${px(top)}h${px(w)}v${px(h)}h${px(-w)}z`;
+  const roundTop = m.foot !== "top";
+  const roundBottom = m.foot !== "bottom";
+  return `M${px(x)} ${px(roundBottom ? bottom - r : bottom)}V${px(roundTop ? top + r : top)}` + (roundTop ? `${arc(r, -r, 1)}h${px(w - r * 2)}${arc(r, r, 1)}` : `h${px(w)}`) + `V${px(roundBottom ? bottom - r : bottom)}` + (roundBottom ? `${arc(-r, r, 1)}h${px(-(w - r * 2))}${arc(-r, -r, 1)}` : `h${px(-w)}`) + "z";
+}
+function useTapFloor() {
+  const [floor, setFloor] = useState16(TARGET);
+  useEffect15(() => {
+    const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX2}px) and (pointer: coarse)`);
+    if (!query) return;
+    const read = () => setFloor(query.matches ? TAP_FLOOR : TARGET);
+    read();
+    query.addEventListener?.("change", read);
+    return () => query.removeEventListener?.("change", read);
+  }, []);
+  return floor;
+}
+function stateOf(column) {
+  if (!column?.estimated) return "";
+  return column.note ? `Estimated \u2014 ${column.note}` : "Estimated";
+}
+function seriesFrame(periods, series, spark, format) {
+  const columns = periods.map((p) => columnOf(p, p.label.split(" ")[0]));
+  const shapeOf = (s) => s.shape ?? "bars";
+  const split = series.some((s) => shapeOf(s) === "bars-below");
+  const reach = series.flatMap((s) => s.values.map((v) => shapeOf(s) === "bars-below" ? -v : v));
+  const scale = chartScale(spark ? reach : [...reach, 0], spark ? { zero: false, nice: false, floor: CHART_FLOOR } : { zero: true, ticks: 4 });
+  const bars = [];
+  const lines = [];
+  const bandOf = (s) => split ? shapeOf(s) === "bars-below" ? "down" : "up" : "full";
+  const inBand = (band) => series.filter((s) => shapeOf(s) !== "line" && bandOf(s) === band);
+  for (const s of series) {
+    const shape = shapeOf(s);
+    const tone = s.tone ?? (shape === "line" ? "neutral" : "accent");
+    if (shape === "line") {
+      lines.push({ id: s.id, tone, values: s.values.map((v) => Number.isFinite(v) ? v : Number.NaN) });
+      continue;
+    }
+    const below = shape === "bars-below";
+    const band = bandOf(s);
+    const lanes = inBand(band).length;
+    const lane = inBand(band).indexOf(s);
+    s.values.forEach((raw, i) => {
+      if (!Number.isFinite(raw) || i >= columns.length) return;
+      const value = raw;
+      bars.push({
+        id: `${s.id}-${i}`,
+        name: s.name,
+        tone,
+        column: i,
+        from: 0,
+        to: below ? -value : value,
+        detail: onPrevious(value, s.values[i - 1], columns[i - 1]?.short ?? ""),
+        band,
+        lane,
+        lanes
+      });
+    });
+  }
+  return {
+    columns,
+    scale,
+    bars,
+    lines,
+    links: false,
+    keys: series.map((s) => ({
+      id: s.id,
+      name: s.name,
+      shape: shapeOf(s),
+      tone: s.tone ?? (shapeOf(s) === "line" ? "neutral" : "accent")
+    })),
+    tableHead: ["Period", ...series.map((s) => s.name)],
+    tableRows: columns.map((column, i) => ({
+      column,
+      cells: series.map((s) => Number.isFinite(s.values[i]) ? format(s.values[i]) : MISSING)
+    }))
+  };
+}
+function bridgeFrame(steps, tones, format) {
+  const rise = tones?.rise ?? "good";
+  const fall = tones?.fall ?? "bad";
+  const total = tones?.total ?? "neutral";
+  const walk = bridgeWalk(steps);
+  const columns = walk.map((step) => columnOf(step, step.label));
+  const toneOf = (step) => step.kind === "total" ? total : step.value < 0 ? fall : rise;
+  const named = [];
+  for (const step of walk) {
+    const tone = toneOf(step);
+    const name = step.kind === "total" ? "Totals" : step.value < 0 ? "Decreases" : "Increases";
+    if (!named.some((k) => k.id === tone)) named.push({ id: tone, name, tone, shape: "bars" });
+  }
+  return {
+    columns,
+    scale: chartScale([...walk.flatMap((s) => [s.from, s.to]), 0], { zero: true, ticks: 4 }),
+    bars: walk.map((step, i) => ({
+      id: `step-${i}`,
+      name: step.label,
+      tone: toneOf(step),
+      column: i,
+      from: step.from,
+      to: step.to,
+      detail: step.kind === "total" ? "" : `Running total ${format(step.to)}`,
+      band: "full",
+      lane: 0,
+      lanes: 1
+    })),
+    lines: [],
+    links: true,
+    keys: named,
+    tableHead: ["Step", "Amount", "Running total"],
+    tableRows: walk.map((step, i) => ({ column: columns[i], cells: [format(step.value), format(step.to)] }))
+  };
+}
+function Chart(props) {
+  const {
+    title,
+    format,
+    formatAxis = format,
+    height,
+    table,
+    selectable,
+    selected,
+    onSelect,
+    className
+  } = props;
+  const variant = props.variant ?? "months";
+  const spark = variant === "spark";
+  const plotHeight = height ?? HEIGHT[variant];
+  const showTable = table ?? !spark;
+  const uid = useId12().replace(/[^\w-]/g, "");
+  const frameEl = useRef19(null);
+  const scroller = useRef19(null);
+  const plot = useRef19(null);
+  const tipEl = useRef19(null);
+  const svgEl = useRef19(null);
+  const ignoreMouseUntil = useRef19(0);
+  const touchMoved = useRef19(false);
+  const dismissed = useRef19(null);
+  const opening = useRef19(false);
+  const pointerFocus = useRef19(false);
+  const floor = useTapFloor();
+  const [width, setWidth] = useState16(0);
+  const [openId, setOpenId] = useState16(null);
+  const [rawCursor, setCursor] = useState16(0);
+  const [said, setSaid] = useState16("");
+  const [ownPick, setOwnPick] = useState16(null);
+  const pick = selected === void 0 ? ownPick : selected;
+  const steps = props.variant === "bridge" ? props.steps : void 0;
+  const bridgeTones = props.variant === "bridge" ? props.tones : void 0;
+  const periods = props.variant === "bridge" ? void 0 : props.periods;
+  const series = props.variant === "bridge" ? void 0 : props.series;
+  const frame = useMemo4(() => steps ? bridgeFrame(steps, bridgeTones, format) : seriesFrame(periods ?? [], series ?? [], spark, format), [steps, bridgeTones, periods, series, spark, format]);
+  const { columns, scale, lines, keys, tableHead, tableRows } = frame;
+  const count = columns.length || 1;
+  const cursor = Math.min(rawCursor, Math.max(columns.length - 1, 0));
+  const plotWidth = width || count * FALLBACK_COL;
+  const colWidth = plotWidth / count;
+  const boxHeight = Math.max(plotHeight, floor);
+  const boxTop = -(boxHeight - plotHeight) / 2;
+  const span = scale.max - scale.min || 1;
+  const y = useCallback5(
+    (value) => PAD + (scale.max - value) / span * (plotHeight - PAD * 2),
+    [scale.max, span, plotHeight]
+  );
+  const zero = y(Math.min(Math.max(0, scale.min), scale.max));
+  const lanes = Math.max(1, ...frame.bars.map((b) => b.lanes));
+  const cap = variant === "bridge" ? BAR_MAX_BRIDGE : BAR_MAX;
+  const groupWidth = Math.max(4, Math.min(
+    colWidth * BAR_SHARE,
+    colWidth - 6,
+    cap * lanes + LANE_GAP * (lanes - 1)
+  ));
+  const barWidth = (groupWidth - LANE_GAP * (lanes - 1)) / lanes;
+  const centre = useCallback5((column) => column * colWidth + colWidth / 2, [colWidth]);
+  const marks = useMemo4(() => {
+    const out = frame.bars.map((bar) => {
+      let top = Math.min(y(bar.from), y(bar.to));
+      let bottom = Math.max(y(bar.from), y(bar.to));
+      let foot = null;
+      if (bottom - top > ZERO_INSET + 1) {
+        if (Math.abs(bottom - zero) < 0.5) {
+          bottom -= ZERO_INSET;
+          foot = "bottom";
+        }
+        if (Math.abs(top - zero) < 0.5) {
+          top += ZERO_INSET;
+          foot = "top";
+        }
+      }
+      return {
+        id: bar.id,
+        column: bar.column,
+        name: bar.name,
+        tone: bar.tone,
+        value: bar.band === "down" ? bar.from - bar.to : bar.to - bar.from,
+        detail: bar.detail,
+        kind: "bar",
+        band: bar.band,
+        foot,
+        lane: bar.lane,
+        lanes: bar.lanes,
+        // Every bar in the chart is drawn at one width, and each band centres
+        // the lanes it actually has: a chart with two series above the line and
+        // one below puts the single one in the middle of its column rather than
+        // in the left half of a group it does not fill.
+        x: centre(bar.column) - (bar.lanes * barWidth + LANE_GAP * (bar.lanes - 1)) / 2 + bar.lane * (barWidth + LANE_GAP),
+        y: top,
+        w: barWidth,
+        h: Math.max(bottom - top, 1),
+        estimated: Boolean(frame.columns[bar.column]?.estimated)
+      };
+    });
+    const dots = [];
+    for (const line of lines) {
+      line.values.forEach((value, i) => {
+        if (!Number.isFinite(value)) return;
+        dots.push({
+          id: `${line.id}-${i}`,
+          column: i,
+          name: keys.find((k) => k.id === line.id)?.name ?? line.id,
+          tone: line.tone,
+          value,
+          detail: onPrevious(value, line.values[i - 1], columns[i - 1]?.short ?? ""),
+          kind: "dot",
+          band: "full",
+          foot: null,
+          lane: 0,
+          lanes: 1,
+          x: centre(i) - TARGET / 2,
+          y: y(value) - TARGET / 2,
+          w: TARGET,
+          h: TARGET,
+          estimated: Boolean(columns[i]?.estimated)
+        });
+      });
+    }
+    const box = { left: 0, right: plotWidth, top: boxTop, bottom: boxTop + boxHeight };
+    for (const dot of dots) {
+      const apart = dots.filter((d) => d !== dot && d.column === dot.column).map((d) => d.y + d.h / 2);
+      dot.hit = pointTarget(
+        { x: dot.x + dot.w / 2, y: dot.y + dot.h / 2 },
+        { floor, min: Math.min(TARGET, colWidth), box, column: [dot.column * colWidth, (dot.column + 1) * colWidth], apart }
+      );
+    }
+    return [...out, ...dots];
+  }, [frame, lines, keys, columns, centre, barWidth, groupWidth, y, floor, colWidth, plotWidth, boxTop, boxHeight]);
+  const byId = useMemo4(() => new Map(marks.map((m) => [m.id, m])), [marks]);
+  const lead = useCallback5((column) => marks.find((m) => m.column === column), [marks]);
+  const open = openId ? byId.get(openId) : void 0;
+  useEffect15(() => {
+    const el = plot.current;
+    if (!el) return;
+    const read = () => setWidth(el.clientWidth);
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const syncEdges = useCallback5(() => {
+    const el = scroller.current;
+    if (!el) return;
+    const last = el.scrollWidth - el.clientWidth;
+    el.classList.toggle("is-more-before", el.scrollLeft > 1);
+    el.classList.toggle("is-more-after", el.scrollLeft < last - 1);
+  }, []);
+  useEffect15(syncEdges, [syncEdges, plotWidth, count]);
+  useLayoutEffect5(() => {
+    if (!openId || !frameEl.current || !tipEl.current || !svgEl.current) return;
+    const anchor = [...svgEl.current.querySelectorAll("[data-anchor]")].find((el) => el.getAttribute("data-anchor") === openId);
+    if (anchor) placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
+  }, [openId, plotWidth, plotHeight]);
+  useEffect15(() => {
+    if (!openId) return;
+    const doc = frameEl.current?.ownerDocument;
+    const view = doc?.defaultView;
+    if (!doc || !view) return;
+    const hide = () => setOpenId(null);
+    const escape = (event) => {
+      if (event.key !== "Escape") return;
+      dismissed.current = openId;
+      hide();
+    };
+    doc.addEventListener("keydown", escape);
+    view.addEventListener("resize", hide);
+    return () => {
+      doc.removeEventListener("keydown", escape);
+      view.removeEventListener("resize", hide);
+    };
+  }, [openId]);
+  const show = (id) => {
+    if (!id) {
+      setOpenId(null);
+      return;
+    }
+    if (dismissed.current === id) return;
+    dismissed.current = null;
+    setOpenId(id);
+  };
+  const markAt = (target) => target.closest?.("[data-mark]")?.getAttribute("data-mark") ?? null;
+  const announce = useCallback5((column, picked = pick) => {
+    const where = columns[column];
+    if (!where) return;
+    const values = marks.filter((m) => m.column === column).map((m) => `${m.name} ${format(m.value)}`).join(". ") || "No value";
+    const state = stateOf(where);
+    setSaid(`${where.label}. ${values}.${state ? ` ${state}.` : ""}${picked === column ? " Selected." : ""}`);
+  }, [columns, marks, format, pick]);
+  const step = (next) => {
+    const column = Math.max(0, Math.min(next, count - 1));
+    setCursor(column);
+    show(lead(column)?.id);
+    announce(column);
+    const el = scroller.current;
+    if (el && el.scrollWidth > el.clientWidth) {
+      el.scrollLeft = Math.max(0, centre(column) - el.clientWidth / 2);
+      syncEdges();
+    }
+  };
+  const choose = (column) => {
+    if (!selectable) return;
+    if (selected === void 0) setOwnPick(column);
+    onSelect?.(column);
+  };
+  const onKeyDown = (event) => {
+    const steps2 = {
+      ArrowLeft: cursor - 1,
+      ArrowRight: cursor + 1,
+      Home: 0,
+      End: count - 1
+    };
+    if (event.key in steps2) {
+      event.preventDefault();
+      step(steps2[event.key]);
+      return;
+    }
+    if ((event.key === "Enter" || event.key === " ") && selectable) {
+      event.preventDefault();
+      choose(cursor);
+      announce(cursor, cursor);
+    }
+  };
+  const estimated = columns.filter((c) => c.estimated);
+  const estimatedTone = marks.find((m) => m.estimated && m.kind === "bar")?.tone ?? keys[0]?.tone ?? "neutral";
+  const hitBand = (band) => band === "up" ? { y: PAD, h: Math.max(zero - PAD, TARGET) } : band === "down" ? { y: zero, h: Math.max(plotHeight - PAD - zero, TARGET) } : { y: PAD, h: Math.max(plotHeight - PAD * 2, TARGET) };
+  return /* @__PURE__ */ jsxs33(
+    "div",
+    {
+      className: cx8("ui-chart", `ui-chart--${variant}`, selectable && "ui-chart--pick", className),
+      style: {
+        "--ui-chart-h": `${plotHeight}px`,
+        "--ui-chart-box": `${px(boxHeight)}px`,
+        "--ui-chart-cols": count,
+        "--ui-chart-pad": `${PAD}px`
+      },
+      children: [
+        !spark && keys.length > 0 && /* @__PURE__ */ jsxs33("ul", { className: "ui-chart__legend", children: [
+          keys.map((key) => /* @__PURE__ */ jsxs33("li", { className: cx8("ui-chart__key", `ui-chart__tone--${key.tone}`), children: [
+            key.shape === "line" ? /* @__PURE__ */ jsx38("svg", { className: "ui-chart__key-mark", width: "18", height: "12", viewBox: "0 0 18 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { className: "ui-chart__key-line", d: "M1 9 L6 5 L12 7 L17 3" }) }) : /* @__PURE__ */ jsx38("svg", { className: "ui-chart__key-mark", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx38(
+              "rect",
+              {
+                className: "ui-chart__key-swatch",
+                x: "1",
+                width: "10",
+                height: "5",
+                rx: "1",
+                y: key.shape === "bars-below" ? 6 : 1
+              }
+            ) }),
+            key.name
+          ] }, key.id)),
+          estimated.length > 0 && /* @__PURE__ */ jsxs33("li", { className: cx8("ui-chart__key", `ui-chart__tone--${estimatedTone}`), children: [
+            /* @__PURE__ */ jsx38("svg", { className: "ui-chart__key-mark", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("rect", { className: "ui-chart__key-estimated", x: "1.5", y: "1.5", width: "9", height: "9", rx: "1" }) }),
+            "Estimated"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs33(
+          "div",
+          {
+            ref: frameEl,
+            className: "ui-chart__frame ui-tip-host ui-focusable",
+            tabIndex: 0,
+            role: "group",
+            "aria-label": `${title}. Arrow keys step through the ${columns.length} columns.`,
+            onKeyDown,
+            onFocus: (event) => {
+              if (event.target !== event.currentTarget) return;
+              if (pointerFocus.current) {
+                pointerFocus.current = false;
+                return;
+              }
+              show(lead(cursor)?.id);
+              announce(cursor);
+            },
+            onBlur: (event) => {
+              if (event.target !== event.currentTarget) return;
+              setOpenId(null);
+              setSaid("");
+            },
+            children: [
+              !spark && scale.ticks.length > 0 && /* @__PURE__ */ jsx38("div", { className: "ui-chart__axis", "aria-hidden": "true", children: [...scale.ticks].reverse().map((tick) => /* @__PURE__ */ jsx38("span", { className: "ui-chart__tick", children: formatAxis(tick) }, tick)) }),
+              /* @__PURE__ */ jsx38("div", { ref: scroller, className: "ui-chart__scroll", tabIndex: -1, onScroll: () => {
+                syncEdges();
+                const anchor = [...svgEl.current?.querySelectorAll("[data-anchor]") ?? []].find((el) => el.getAttribute("data-anchor") === openId);
+                if (!anchor || !scroller.current || !frameEl.current || !tipEl.current) return;
+                const mark = anchor.getBoundingClientRect();
+                const view = scroller.current.getBoundingClientRect();
+                if (mark.right <= view.left || mark.left >= view.right) setOpenId(null);
+                else placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
+              }, children: /* @__PURE__ */ jsxs33("div", { ref: plot, className: "ui-chart__plot", children: [
+                /* @__PURE__ */ jsxs33(
+                  "svg",
+                  {
+                    ref: svgEl,
+                    className: "ui-chart__svg",
+                    width: px(plotWidth),
+                    height: px(boxHeight),
+                    viewBox: `0 ${px(boxTop)} ${px(plotWidth)} ${px(boxHeight)}`,
+                    role: "img",
+                    "aria-label": spark && marks.length > 0 ? `${title}. ${format(marks[0].value)} to ${format(marks[marks.length - 1].value)}.` : title,
+                    onMouseMove: (event) => {
+                      if (Date.now() < ignoreMouseUntil.current) return;
+                      show(markAt(event.target));
+                    },
+                    onMouseLeave: () => {
+                      if (Date.now() < ignoreMouseUntil.current) return;
+                      dismissed.current = null;
+                      setOpenId(null);
+                    },
+                    onTouchStart: () => {
+                      ignoreMouseUntil.current = Date.now() + 800;
+                      touchMoved.current = false;
+                    },
+                    onTouchMove: () => {
+                      touchMoved.current = true;
+                    },
+                    onTouchCancel: () => {
+                      touchMoved.current = true;
+                    },
+                    onTouchEnd: (event) => {
+                      ignoreMouseUntil.current = Date.now() + 800;
+                      if (touchMoved.current) return;
+                      const id = markAt(event.target);
+                      if (id && id === openId) {
+                        opening.current = false;
+                        setOpenId(null);
+                      } else {
+                        opening.current = Boolean(id) && dismissed.current !== id;
+                        show(id);
+                      }
+                    },
+                    onPointerDown: () => {
+                      pointerFocus.current = true;
+                    },
+                    onClick: (event) => {
+                      frameEl.current?.focus();
+                      pointerFocus.current = false;
+                      const opened = opening.current;
+                      opening.current = false;
+                      const mark = byId.get(markAt(event.target) ?? "");
+                      if (!mark) return;
+                      setCursor(mark.column);
+                      if (opened) {
+                        announce(mark.column);
+                        return;
+                      }
+                      choose(mark.column);
+                      announce(mark.column, selectable ? mark.column : pick);
+                    },
+                    children: [
+                      !spark && pick !== null && pick >= 0 && pick < count && /* @__PURE__ */ jsx38(
+                        "rect",
+                        {
+                          className: "ui-chart__band",
+                          x: px(pick * colWidth),
+                          width: px(colWidth),
+                          y: "0",
+                          height: px(plotHeight)
+                        }
+                      ),
+                      frame.links && frame.bars.slice(0, -1).map((bar, i) => {
+                        const from = byId.get(bar.id);
+                        const to = byId.get(frame.bars[i + 1].id);
+                        return from && to ? /* @__PURE__ */ jsx38(
+                          "line",
+                          {
+                            className: "ui-chart__carry",
+                            x1: px(from.x + from.w),
+                            x2: px(to.x),
+                            y1: px(y(bar.to)),
+                            y2: px(y(bar.to))
+                          },
+                          `carry-${bar.id}`
+                        ) : null;
+                      }),
+                      !spark && scale.ticks.filter((tick) => tick !== 0).map((tick) => /* @__PURE__ */ jsx38(
+                        "line",
+                        {
+                          className: "ui-chart__grid",
+                          x1: "0",
+                          x2: px(plotWidth),
+                          y1: px(y(tick)),
+                          y2: px(y(tick))
+                        },
+                        `grid-${tick}`
+                      )),
+                      !spark && scale.ticks.includes(0) && /* @__PURE__ */ jsx38(
+                        "line",
+                        {
+                          className: "ui-chart__zero",
+                          x1: "0",
+                          x2: px(plotWidth),
+                          y1: px(y(0)),
+                          y2: px(y(0))
+                        }
+                      ),
+                      marks.filter((m) => m.kind === "bar").map((mark) => /* @__PURE__ */ jsx38(
+                        "path",
+                        {
+                          className: cx8(
+                            "ui-chart__bar",
+                            `ui-chart__tone--${mark.tone}`,
+                            mark.estimated && "is-estimated"
+                          ),
+                          d: barPath(mark)
+                        },
+                        `bar-${mark.id}`
+                      )),
+                      ["casing", "stroke"].map((layer) => lines.flatMap(
+                        (line) => line.values.slice(1).map((value, i) => Number.isFinite(value) && Number.isFinite(line.values[i]) ? /* @__PURE__ */ jsx38(
+                          "line",
+                          {
+                            className: layer === "casing" ? "ui-chart__line-casing" : cx8(
+                              "ui-chart__line",
+                              `ui-chart__tone--${line.tone}`,
+                              (columns[i]?.estimated || columns[i + 1]?.estimated) && "is-estimated"
+                            ),
+                            x1: px(centre(i)),
+                            y1: px(y(line.values[i])),
+                            x2: px(centre(i + 1)),
+                            y2: px(y(value))
+                          },
+                          `${line.id}-${layer}-${i}`
+                        ) : null)
+                      )),
+                      lines.flatMap((line) => line.values.map((value, i) => Number.isFinite(value) && !Number.isFinite(line.values[i - 1]) && !Number.isFinite(line.values[i + 1]) ? /* @__PURE__ */ jsx38(
+                        "circle",
+                        {
+                          className: cx8("ui-chart__isolated", `ui-chart__tone--${line.tone}`),
+                          cx: px(centre(i)),
+                          cy: px(y(value)),
+                          r: "2"
+                        },
+                        `isolated-${line.id}-${i}`
+                      ) : null)),
+                      marks.map((mark) => /* @__PURE__ */ jsxs33("g", { "data-mark": mark.id, children: [
+                        mark.kind === "bar" ? /* @__PURE__ */ jsx38(
+                          "rect",
+                          {
+                            className: "ui-chart__hit",
+                            x: px(mark.column * colWidth + mark.lane * colWidth / mark.lanes),
+                            width: px(colWidth / mark.lanes),
+                            y: px(hitBand(mark.band).y),
+                            height: px(hitBand(mark.band).h)
+                          }
+                        ) : /* @__PURE__ */ jsx38(
+                          "rect",
+                          {
+                            className: "ui-chart__hit",
+                            x: px(mark.hit?.x ?? mark.x),
+                            y: px(mark.hit?.y ?? mark.y),
+                            width: px(mark.hit?.w ?? TARGET),
+                            height: px(mark.hit?.h ?? TARGET)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx38(
+                          "rect",
+                          {
+                            "data-anchor": mark.id,
+                            className: "ui-chart__anchor",
+                            x: px(mark.x),
+                            y: px(mark.y),
+                            width: px(mark.w),
+                            height: "0"
+                          }
+                        )
+                      ] }, `hit-${mark.id}`))
+                    ]
+                  }
+                ),
+                !spark && /* @__PURE__ */ jsx38("div", { className: "ui-chart__periods", "aria-hidden": "true", children: columns.map((column, i) => /* @__PURE__ */ jsx38(
+                  "span",
+                  {
+                    className: cx8("ui-chart__period", pick === i && "is-selected"),
+                    children: column.short
+                  },
+                  `${column.label}-${i}`
+                )) })
+              ] }) }),
+              /* @__PURE__ */ jsx38("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs33(Fragment11, { children: [
+                /* @__PURE__ */ jsx38("span", { className: "ui-tip__label", children: spark ? columns[open.column]?.label : `${open.name}, ${columns[open.column]?.label}` }),
+                /* @__PURE__ */ jsx38("span", { className: "ui-tip__value", children: format(open.value) }),
+                (stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */ jsx38("span", { className: "ui-tip__detail", children: stateOf(columns[open.column]) || open.detail })
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx38("div", { className: "ui-sr", role: "status", children: said }),
+        showTable && /* @__PURE__ */ jsxs33("details", { className: "ui-chart__data", children: [
+          /* @__PURE__ */ jsx38("summary", { className: "ui-focusable", children: "Values as a table" }),
+          /* @__PURE__ */ jsx38(
+            "div",
+            {
+              className: "ui-table-scroll",
+              role: "region",
+              tabIndex: 0,
+              "aria-label": `${title}, as a table. Scroll for more columns.`,
+              children: /* @__PURE__ */ jsxs33("table", { className: "ui-table", "aria-label": title, children: [
+                /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { children: tableHead.map((head, i) => /* @__PURE__ */ jsx38("th", { scope: "col", className: cx8(i > 0 && "ui-table__num"), children: head }, head)) }) }),
+                /* @__PURE__ */ jsx38("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs33("tr", { "aria-current": pick === i ? true : void 0, children: [
+                  /* @__PURE__ */ jsxs33("th", { scope: "row", children: [
+                    row.column.label,
+                    row.column.estimated && /* @__PURE__ */ jsxs33(Fragment11, { children: [
+                      " ",
+                      /* @__PURE__ */ jsx38("span", { className: "ui-chart__state", children: stateOf(row.column) })
+                    ] })
+                  ] }),
+                  row.cells.map((cell, j) => /* @__PURE__ */ jsx38("td", { className: "ui-table__num", children: cell }, tableHead[j + 1]))
+                ] }, `${row.column.label}-${i}`)) })
+              ] })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
 // src/AccentPicker.tsx
 import { forwardRef as forwardRef10 } from "react";
 import { ACCENTS, accentSwatchStyle } from "@apliteni/apliteni-ui";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var AccentPicker = forwardRef10(function AccentPicker2({
   value,
   onChange,
@@ -3808,7 +4498,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
   "aria-label": label = "Accent",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       ...rest,
@@ -3819,7 +4509,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
       "aria-label": label,
       children: options.map((accent) => {
         const title = accent.charAt(0).toUpperCase() + accent.slice(1);
-        return /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx39(
           "button",
           {
             type: "button",
@@ -3849,6 +4539,7 @@ export {
   Button,
   Callout,
   Card,
+  Chart,
   Checkbox,
   CommandPalette,
   Confirm,