@weasel-js/plot 0.0.0-stage → 1.15.0

package/dist/index.js

@@ -0,0 +1,860 @@
+import { ellipsePath, pathFromD, boundsOfPath } from '@weasel-js/geom';
+import { THEMES } from '@weasel-js/theme';
+import { measureTextBounds } from '@weasel-js/text';
+import { composeWorldPose, scenePoseAdapter, composeAffordanceLayer, WeaselProvider, useScene, useLatest, SceneCanvas } from '@weasel-js/core';
+import { useState, useEffect, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/scales/linear.ts
+var DEFAULT_TICKS = 5;
+function tickStep(lo, hi, count = DEFAULT_TICKS) {
+  const span = Math.abs(hi - lo);
+  if (span === 0 || !Number.isFinite(span)) return 1;
+  const raw = span / Math.max(1, count);
+  const power = 10 ** Math.floor(Math.log10(raw));
+  const error = raw / power;
+  const factor = error >= Math.sqrt(50) ? 10 : error >= Math.sqrt(10) ? 5 : error >= Math.sqrt(2) ? 2 : 1;
+  return factor * power;
+}
+var decimalsOf = (step) => Math.max(0, -Math.floor(Math.log10(step) + 1e-9));
+var onGrid = (i, step) => Number((i * step).toFixed(decimalsOf(step)));
+function stepTicks(lo, hi, step) {
+  const [a, b] = lo <= hi ? [lo, hi] : [hi, lo];
+  const out = [];
+  for (let i = Math.ceil(a / step - 1e-9); i <= Math.floor(b / step + 1e-9); i++) out.push(onGrid(i, step));
+  return lo <= hi ? out : out.reverse();
+}
+function formatNumber(value, step) {
+  const fixed = value.toFixed(Math.min(20, decimalsOf(step)));
+  return fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+}
+function niceDomain(domain, count = DEFAULT_TICKS) {
+  const [lo, hi] = domain;
+  if (lo === hi) return lo === 0 ? [0, 1] : [Math.min(0, lo), Math.max(0, hi)];
+  const step = tickStep(lo, hi, count);
+  const down = (v) => onGrid(Math.floor(v / step + 1e-9), step);
+  const up = (v) => onGrid(Math.ceil(v / step - 1e-9), step);
+  return lo < hi ? [down(lo), up(hi)] : [up(lo), down(hi)];
+}
+function linearScale(opts) {
+  const domain = opts.nice !== void 0 ? niceDomain(opts.domain, opts.nice) : [opts.domain[0], opts.domain[1]];
+  const range = [opts.range[0], opts.range[1]];
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const span = d1 - d0;
+  const map = (v) => span === 0 ? (r0 + r1) / 2 : r0 + (v - d0) / span * (r1 - r0);
+  const step = (count = DEFAULT_TICKS) => tickStep(d0, d1, count);
+  return {
+    kind: "linear",
+    domain,
+    range,
+    map,
+    position: map,
+    invert: (at2) => r1 === r0 ? d0 : d0 + (at2 - r0) / (r1 - r0) * span,
+    tickStep: step,
+    ticks: (count = DEFAULT_TICKS) => stepTicks(d0, d1, step(count)),
+    format: (v) => formatNumber(v, step())
+  };
+}
+
+// src/scales/log.ts
+function logScale(opts) {
+  const base = opts.base ?? 10;
+  const [d0, d1] = opts.domain;
+  if (!(d0 > 0 && d1 > 0)) throw new Error(`logScale: a domain of ${d0}..${d1} does not lie above zero`);
+  const [r0, r1] = opts.range;
+  const log = (v) => Math.log(v) / Math.log(base);
+  const l0 = log(d0);
+  const l1 = log(d1);
+  const map = (v) => l1 === l0 ? (r0 + r1) / 2 : r0 + (log(v) - l0) / (l1 - l0) * (r1 - r0);
+  const ticks = (count = 5) => {
+    const [lo, hi] = l0 <= l1 ? [l0, l1] : [l1, l0];
+    const first = Math.floor(lo + 1e-9);
+    const last = Math.ceil(hi - 1e-9);
+    const steps = last - first < count / 2 && base === 10 ? [1, 2, 5] : [1];
+    const out = [];
+    for (let p = first; p <= last; p++) {
+      for (const m of steps) {
+        const v = Number((m * base ** p).toPrecision(12));
+        if (log(v) >= lo - 1e-9 && log(v) <= hi + 1e-9) out.push(v);
+      }
+    }
+    return l0 <= l1 ? out : out.reverse();
+  };
+  return {
+    kind: "log",
+    base,
+    domain: [d0, d1],
+    range: [r0, r1],
+    map,
+    position: map,
+    invert: (at2) => base ** (r1 === r0 ? l0 : l0 + (at2 - r0) / (r1 - r0) * (l1 - l0)),
+    ticks,
+    format: (v) => v >= 1 ? formatNumber(v, 1) : formatNumber(v, 10 ** Math.floor(Math.log10(v)))
+  };
+}
+
+// src/scales/band.ts
+function bandScale(opts) {
+  const domain = [...opts.domain];
+  const [r0, r1] = opts.range;
+  const inner = Math.min(1, Math.max(0, opts.paddingInner ?? 0.2));
+  const outer = Math.max(0, opts.paddingOuter ?? inner / 2);
+  const n2 = domain.length;
+  const step = n2 === 0 ? 0 : (r1 - r0) / Math.max(1e-9, n2 - inner + 2 * outer);
+  const bandwidth = Math.abs(step * (1 - inner));
+  const index = new Map(domain.map((key, i) => [key, i]));
+  const startAt = (i) => r0 + step * (outer + i) + (step < 0 ? step * (1 - inner) : 0);
+  const start = (key) => {
+    const i = index.get(key);
+    return i === void 0 ? Number.NaN : startAt(i);
+  };
+  return {
+    kind: "band",
+    domain,
+    range: [r0, r1],
+    bandwidth,
+    step: Math.abs(step),
+    start,
+    position: (key) => start(key) + bandwidth / 2,
+    invert: (at2) => {
+      if (n2 === 0) return void 0;
+      const i = Math.round((at2 - r0) / step - outer - (1 - inner) / 2);
+      return domain[Math.min(n2 - 1, Math.max(0, i))];
+    },
+    ticks: () => [...domain],
+    format: (key) => key
+  };
+}
+
+// src/scales/time.ts
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+var INTERVALS = [
+  { ms: SECOND, unit: "second" },
+  { ms: 5 * SECOND, unit: "second" },
+  { ms: 15 * SECOND, unit: "second" },
+  { ms: 30 * SECOND, unit: "second" },
+  { ms: MINUTE, unit: "minute" },
+  { ms: 5 * MINUTE, unit: "minute" },
+  { ms: 15 * MINUTE, unit: "minute" },
+  { ms: 30 * MINUTE, unit: "minute" },
+  { ms: HOUR, unit: "hour" },
+  { ms: 3 * HOUR, unit: "hour" },
+  { ms: 6 * HOUR, unit: "hour" },
+  { ms: 12 * HOUR, unit: "hour" },
+  { ms: DAY, unit: "day" },
+  { ms: 2 * DAY, unit: "day" },
+  { ms: 7 * DAY, unit: "day" },
+  { months: 1, unit: "month" },
+  { months: 3, unit: "month" },
+  { months: 12, unit: "year" }
+];
+var MONTH_MS = 30 * DAY;
+var spanOf = (i) => i.ms ?? i.months * MONTH_MS;
+function intervalFor(span, count) {
+  const target = span / Math.max(1, count);
+  let best = INTERVALS[0];
+  for (const i of INTERVALS) if (Math.abs(Math.log(spanOf(i) / target)) < Math.abs(Math.log(spanOf(best) / target))) best = i;
+  if (best.unit === "year" && target > 12 * MONTH_MS) {
+    const years = 10 ** Math.floor(Math.log10(target / (12 * MONTH_MS)));
+    return { months: 12 * years, unit: "year" };
+  }
+  return best;
+}
+function gridTicks(lo, hi, interval) {
+  const out = [];
+  if (interval.ms !== void 0) {
+    for (let t = Math.ceil(lo / interval.ms) * interval.ms; t <= hi; t += interval.ms) out.push(t);
+    return out;
+  }
+  const at2 = new Date(lo);
+  let month = at2.getUTCFullYear() * 12 + at2.getUTCMonth();
+  month = Math.ceil(month / interval.months) * interval.months;
+  for (; ; month += interval.months) {
+    const t = Date.UTC(Math.floor(month / 12), month % 12, 1);
+    if (t < lo) continue;
+    if (t > hi) break;
+    out.push(t);
+  }
+  return out;
+}
+var pad = (n2) => String(n2).padStart(2, "0");
+function formatInstant(t, unit) {
+  const d = new Date(t);
+  const date = `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;
+  const time = `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
+  switch (unit) {
+    case "year":
+      return String(d.getUTCFullYear());
+    case "month":
+      return date.slice(0, 7);
+    case "day":
+      return date;
+    case "hour":
+    case "minute":
+      return d.getUTCHours() === 0 && d.getUTCMinutes() === 0 ? date : time;
+    case "second":
+      return `${time}:${pad(d.getUTCSeconds())}`;
+  }
+}
+function timeScale(opts) {
+  const [d0, d1] = opts.domain;
+  const [r0, r1] = opts.range;
+  const span = d1 - d0;
+  const map = (v) => span === 0 ? (r0 + r1) / 2 : r0 + (v - d0) / span * (r1 - r0);
+  const interval = (count = 5) => intervalFor(Math.abs(span), count);
+  return {
+    kind: "time",
+    domain: [d0, d1],
+    range: [r0, r1],
+    map,
+    position: map,
+    invert: (at2) => r1 === r0 ? d0 : d0 + (at2 - r0) / (r1 - r0) * span,
+    ticks: (count = 5) => {
+      const out = gridTicks(Math.min(d0, d1), Math.max(d0, d1), interval(count));
+      return d0 <= d1 ? out : out.reverse();
+    },
+    format: (v) => formatInstant(v, interval().unit)
+  };
+}
+
+// src/scales/ordinal.ts
+function ordinalScale(opts) {
+  if (opts.range.length === 0) throw new Error("ordinalScale: an empty range");
+  const domain = [...opts.domain];
+  const index = new Map(domain.map((key, i) => [key, i]));
+  const range = [...opts.range];
+  return {
+    kind: "ordinal",
+    domain,
+    range,
+    map: (key) => {
+      let i = index.get(key);
+      if (i === void 0) {
+        i = domain.length;
+        domain.push(key);
+        index.set(key, i);
+      }
+      return range[i % range.length];
+    },
+    ticks: () => [...domain],
+    format: (key) => key
+  };
+}
+var rectOf = (b) => ({ kind: "rect", x: b.x, y: b.y, width: b.width, height: b.height });
+var fillOf = (color, opacity) => ({ paint: { color, ...opacity !== void 0 ? { opacity } : {} } });
+function barMark(opts) {
+  const lo = Math.min(opts.from, opts.to);
+  const length = Math.abs(opts.to - opts.from);
+  const pose = opts.orient === "horizontal" ? { x: lo, y: opts.x, width: length, height: opts.width } : { x: opts.x, y: lo, width: opts.width, height: length };
+  return {
+    key: opts.key,
+    pose,
+    data: { plotMark: { kind: "bar", ...opts.datum ? { datum: opts.datum } : {} }, path: rectOf(pose), fill: fillOf(opts.color) }
+  };
+}
+function spanMark(opts) {
+  const pose = { x: Math.min(opts.x0, opts.x1), y: opts.y, width: Math.abs(opts.x1 - opts.x0), height: opts.height };
+  return {
+    key: opts.key,
+    pose,
+    data: {
+      plotMark: { kind: "span", ...opts.datum ? { datum: opts.datum } : {} },
+      path: rectOf(pose),
+      fill: fillOf(opts.color, opts.opacity)
+    }
+  };
+}
+function pointMark(opts) {
+  const r = opts.radius ?? 3;
+  const pose = { x: opts.x - r, y: opts.y - r, width: 2 * r, height: 2 * r };
+  return {
+    key: opts.key,
+    pose,
+    data: { plotMark: { kind: "point", ...opts.datum ? { datum: opts.datum } : {} }, path: ellipsePath(pose), fill: fillOf(opts.color) }
+  };
+}
+var n = (v) => Number(v.toFixed(3));
+var at = (p) => `${n(p.x)} ${n(p.y)}`;
+function pathMark(key, path, data) {
+  const b = boundsOfPath(path);
+  return { key, pose: { x: b.x, y: b.y, width: b.width, height: b.height }, data: { ...data, path } };
+}
+var traitOf = (kind, datum) => ({ kind, ...datum ? { datum } : {} });
+function lineMark(opts) {
+  const [first, ...rest] = opts.points;
+  if (first === void 0) throw new Error(`lineMark "${opts.key}": no points`);
+  const d = `M ${at(first)}${rest.map((p) => ` L ${at(p)}`).join("")}`;
+  const stroke = {
+    paint: { color: opts.color },
+    width: opts.width ?? 2,
+    join: "round",
+    cap: "round",
+    ...opts.dash ? { dash: opts.dash } : {}
+  };
+  return pathMark(opts.key, pathFromD(d), { plotMark: traitOf("line", opts.datum), stroke });
+}
+function ruleMark(opts) {
+  const stroke = { paint: { color: opts.color }, width: opts.width ?? 1, cap: "butt", ...opts.dash ? { dash: opts.dash } : {} };
+  return pathMark(opts.key, pathFromD(`M ${at(opts.from)} L ${at(opts.to)}`), { plotMark: traitOf("rule", opts.datum), stroke });
+}
+function areaMark(opts) {
+  if (opts.top.length === 0) throw new Error(`areaMark "${opts.key}": no points`);
+  const bottom = opts.bottom ?? (opts.baseline !== void 0 ? opts.top.map((p) => ({ x: p.x, y: opts.baseline })) : []);
+  const ring = [...opts.top, ...[...bottom].reverse()];
+  const d = `M ${ring.map(at).join(" L ")} Z`;
+  return pathMark(opts.key, pathFromD(d), {
+    plotMark: traitOf("area", opts.datum),
+    fill: { paint: { color: opts.color, opacity: opts.opacity ?? 0.35 } }
+  });
+}
+var polar = (c, r, a) => ({ x: c.x + r * Math.sin(a), y: c.y - r * Math.cos(a) });
+function arcTo(c, r, a0, a1) {
+  const sweep = a1 >= a0 ? 1 : 0;
+  const mid = (a0 + a1) / 2;
+  const to = (a) => ` A ${n(r)} ${n(r)} 0 0 ${sweep} ${at(polar(c, r, a))}`;
+  return Math.abs(a1 - a0) > Math.PI ? to(mid) + to(a1) : to(a1);
+}
+function arcMark(opts) {
+  const { center: c, innerRadius: r0, outerRadius: r1, startAngle: a0 } = opts;
+  const a1 = Math.abs(opts.endAngle - a0) >= 2 * Math.PI ? a0 + Math.sign(opts.endAngle - a0) * (2 * Math.PI - 1e-6) : opts.endAngle;
+  let d = `M ${at(polar(c, r1, a0))}${arcTo(c, r1, a0, a1)}`;
+  d += r0 > 0 ? ` L ${at(polar(c, r0, a1))}${arcTo(c, r0, a1, a0)} Z` : ` L ${at(c)} Z`;
+  return pathMark(opts.key, pathFromD(d), { plotMark: traitOf("arc", opts.datum), fill: { paint: { color: opts.color } } });
+}
+function ribbonMark(opts) {
+  const { from: f, to: t } = opts;
+  const mx = (f.x + t.x) / 2;
+  const d = `M ${n(f.x)} ${n(f.y0)} C ${n(mx)} ${n(f.y0)} ${n(mx)} ${n(t.y0)} ${n(t.x)} ${n(t.y0)} L ${n(t.x)} ${n(t.y1)} C ${n(mx)} ${n(t.y1)} ${n(mx)} ${n(f.y1)} ${n(f.x)} ${n(f.y1)} Z`;
+  return pathMark(opts.key, pathFromD(d), {
+    plotMark: traitOf("ribbon", opts.datum),
+    fill: { paint: { color: opts.color, opacity: opts.opacity ?? 0.45 } }
+  });
+}
+
+// src/marks/text.ts
+var ALIGN = { start: "left", middle: "center", end: "right" };
+function textMark(opts) {
+  const { width, height } = opts.measure(opts.text, opts.font);
+  const anchor = opts.anchor ?? "middle";
+  const baseline = opts.baseline ?? "middle";
+  const along = anchor === "start" ? 0 : anchor === "middle" ? -width / 2 : -width;
+  const across = baseline === "top" ? 0 : baseline === "middle" ? -height / 2 : -height;
+  const center = opts.vertical ? { x: opts.x + across + height / 2, y: opts.y - along - width / 2 } : { x: opts.x + along + width / 2, y: opts.y + across + height / 2 };
+  return {
+    key: opts.key,
+    pose: {
+      x: center.x - width / 2,
+      y: center.y - height / 2,
+      width,
+      height,
+      ...opts.vertical ? { rotation: -Math.PI / 2 } : {}
+    },
+    data: {
+      plotMark: { kind: "text", ...opts.datum ? { datum: opts.datum } : {} },
+      text: opts.text,
+      style: { fontFamily: opts.font.fontFamily, fontSize: opts.font.fontSize, align: ALIGN[anchor], ...opts.bold ? { fontWeight: 700 } : {} },
+      fill: { paint: { color: opts.color } },
+      verticalAlign: "center"
+    }
+  };
+}
+
+// src/axes.ts
+var TICK = 5;
+var GAP = 4;
+var isHorizontal = (side) => side === "top" || side === "bottom";
+var outward = (side) => side === "bottom" || side === "right" ? 1 : -1;
+function axisRoom(opts) {
+  const { scale, side, theme, measure } = opts;
+  const sizes = scale.ticks(opts.ticks).map((t) => measure(scale.format(t), theme.font));
+  const labels = sizes.length === 0 ? 0 : Math.max(...sizes.map((s) => isHorizontal(side) ? s.height : s.width));
+  const title = opts.title ? measure(opts.title, theme.font).height + GAP : 0;
+  return TICK + GAP + labels + title;
+}
+function axisMarks(opts) {
+  const { scale, side, at: at2, theme, measure } = opts;
+  const key = opts.key ?? `axis:${side}`;
+  const h = isHorizontal(side);
+  const out = outward(side);
+  const pt = (along, across) => h ? { x: along, y: across } : { x: across, y: along };
+  const [r0, r1] = scale.range;
+  const marks = [];
+  const ticks = scale.ticks(opts.ticks);
+  ticks.forEach((t, i) => {
+    const p = scale.position(t);
+    if (opts.gridTo !== void 0) {
+      marks.push(ruleMark({ key: `${key}:grid:${i}`, from: pt(p, at2), to: pt(p, opts.gridTo), color: theme.grid }));
+    }
+  });
+  marks.push(ruleMark({ key: `${key}:rule`, from: pt(r0, at2), to: pt(r1, at2), color: theme.axis }));
+  let reach = 0;
+  ticks.forEach((t, i) => {
+    const p = scale.position(t);
+    marks.push(ruleMark({ key: `${key}:tick:${i}`, from: pt(p, at2), to: pt(p, at2 + out * TICK), color: theme.axis }));
+    const anchorAt = pt(p, at2 + out * (TICK + GAP));
+    const label = textMark({
+      key: `${key}:label:${i}`,
+      text: scale.format(t),
+      ...anchorAt,
+      font: theme.font,
+      color: theme.text,
+      measure,
+      anchor: h ? "middle" : out > 0 ? "start" : "end",
+      baseline: h ? out > 0 ? "top" : "bottom" : "middle"
+    });
+    reach = Math.max(reach, h ? label.pose.height : label.pose.width);
+    marks.push(label);
+  });
+  if (opts.title) {
+    const across = at2 + out * (TICK + GAP + reach + GAP);
+    marks.push(textMark({
+      key: `${key}:title`,
+      text: opts.title,
+      ...pt((r0 + r1) / 2, across),
+      font: theme.font,
+      color: theme.text,
+      measure,
+      anchor: "middle",
+      baseline: out > 0 ? "top" : "bottom",
+      vertical: !h
+    }));
+  }
+  return marks;
+}
+var SWATCHES = ["sky", "amber", "green", "rose", "violet", "teal", "citron", "fuchsia", "blue", "red"];
+function plotThemeFrom(resolved, font = PLOT_FONT) {
+  const at2 = (token) => resolved[`--wzl-${token}`] ?? "#888888";
+  return {
+    text: at2("fg"),
+    axis: at2("border-strong"),
+    grid: at2("border"),
+    series: SWATCHES.map((s) => at2(`swatch-${s}`)),
+    font
+  };
+}
+var PLOT_FONT = { fontFamily: "sans-serif", fontSize: 12 };
+var PLOT_THEME = plotThemeFrom(THEMES.weasel.selections["mode=dark,density=comfortable"]);
+var seriesColor = (theme, i) => theme.series[(i % theme.series.length + theme.series.length) % theme.series.length] ?? theme.text;
+var textMeasure = (text, font) => {
+  const { width } = measureTextBounds(text, { fontFamily: font.fontFamily, fontSize: font.fontSize });
+  return { width: Math.ceil(width), height: Math.ceil(font.fontSize * 1.2) };
+};
+
+// src/xychart/compile.ts
+var PAD = 12;
+var GAP2 = 8;
+var BAND_PADDING = 0.2;
+var xyLength = (data) => Math.max(0, ...data.series.map((s) => s.values.length));
+function categoriesOf(data) {
+  if (data.x?.kind === "band" && data.x.categories.length > 0) return [...data.x.categories];
+  return Array.from({ length: xyLength(data) }, (_, i) => String(i + 1));
+}
+function xyValueDomain(data) {
+  const values = data.series.flatMap((s) => s.values).filter(Number.isFinite);
+  const lo = Math.min(0, ...values);
+  const hi = Math.max(0, ...values);
+  const [niceLo, niceHi] = niceDomain([lo, hi === lo ? lo + 1 : hi]);
+  const min = data.y?.min ?? niceLo;
+  const max = data.y?.max ?? niceHi;
+  return min === max ? [min, min + 1] : [min, max];
+}
+function categoryAxis(data, range) {
+  const n2 = xyLength(data);
+  if (data.x?.kind === "range") {
+    const scale2 = linearScale({ domain: [data.x.min, data.x.max], range });
+    const step = (range[1] - range[0]) / Math.max(1, n2);
+    const slots2 = Array.from({ length: n2 }, (_, i) => range[0] + step * (i + 0.5));
+    return { scale: scale2, slots: slots2, slotWidth: Math.abs(step) * (1 - BAND_PADDING) };
+  }
+  const categories = categoriesOf(data);
+  const scale = bandScale({ domain: categories, range, paddingInner: BAND_PADDING });
+  const slots = Array.from({ length: n2 }, (_, i) => i < categories.length ? scale.position(categories[i]) : Number.NaN);
+  return { scale, slots, slotWidth: scale.bandwidth };
+}
+function compileXyChart(data, size, theme, measure) {
+  const vertical = data.orientation !== "horizontal";
+  const marks = [];
+  let top = PAD;
+  if (data.title) {
+    const title = textMark({
+      key: "title",
+      text: data.title,
+      x: size.width / 2,
+      y: PAD,
+      baseline: "top",
+      font: theme.font,
+      color: theme.text,
+      measure,
+      bold: true
+    });
+    marks.push(title);
+    top += title.pose.height + GAP2;
+  }
+  const domain = xyValueDomain(data);
+  const base = { theme, measure, at: 0 };
+  const valueTitle = data.y?.title !== void 0 ? { title: data.y.title } : {};
+  const categoryTitle = data.x?.title !== void 0 ? { title: data.x.title } : {};
+  const probe = categoryAxis(data, [0, 1]);
+  const valueRoom = axisRoom({ ...base, ...valueTitle, scale: linearScale({ domain, range: [0, 1] }), side: vertical ? "left" : "bottom" });
+  const categoryRoom = axisRoom({ ...base, ...categoryTitle, scale: probe.scale, side: vertical ? "bottom" : "left" });
+  const left = PAD + (vertical ? valueRoom : categoryRoom);
+  const bottom = size.height - PAD - (vertical ? categoryRoom : valueRoom);
+  const plot = { x: left, y: top, width: Math.max(1, size.width - PAD - left), height: Math.max(1, bottom - top) };
+  const right = plot.x + plot.width;
+  const value = linearScale({ domain, range: vertical ? [bottom, top] : [left, right] });
+  const category = categoryAxis(data, vertical ? [left, right] : [top, bottom]);
+  marks.push(...axisMarks({ ...base, ...valueTitle, key: "axis:value", scale: value, side: vertical ? "left" : "bottom", at: vertical ? left : bottom, gridTo: vertical ? right : top }));
+  marks.push(...axisMarks({ ...base, ...categoryTitle, key: "axis:category", scale: category.scale, side: vertical ? "bottom" : "left", at: vertical ? bottom : left }));
+  const layout = { orientation: vertical ? "vertical" : "horizontal", plot, value, slots: category.slots, slotWidth: category.slotWidth };
+  marks.push(...seriesMarks(data, layout, theme));
+  return { marks, layout };
+}
+function seriesMarks(data, layout, theme) {
+  const { value, slots, slotWidth } = layout;
+  const vertical = layout.orientation === "vertical";
+  const at2 = (along, v) => vertical ? { x: along, y: value.map(v) } : { x: value.map(v), y: along };
+  const [d0, d1] = value.domain;
+  const baseline = value.map(Math.min(Math.max(0, Math.min(d0, d1)), Math.max(d0, d1)));
+  const bars = data.series.filter((s) => s.kind === "bar");
+  const barWidth = slotWidth / Math.max(1, bars.length);
+  const categories = categoriesOf(data);
+  const marks = [];
+  data.series.forEach((series, s) => {
+    const color = seriesColor(theme, s);
+    const datum = (i) => ({ series: s, index: i, value: series.values[i], category: categories[i] ?? String(i + 1) });
+    const placed = series.values.map((v, i) => ({ v, i })).filter(({ v, i }) => Number.isFinite(v) && Number.isFinite(slots[i] ?? Number.NaN));
+    if (series.kind === "bar") {
+      const j = bars.indexOf(series);
+      for (const { v, i } of placed) {
+        marks.push(barMark({
+          key: `bar:${s}:${i}`,
+          x: slots[i] - slotWidth / 2 + j * barWidth,
+          width: barWidth,
+          from: baseline,
+          to: value.map(v),
+          color,
+          datum: datum(i),
+          orient: layout.orientation
+        }));
+      }
+      return;
+    }
+    if (placed.length > 0) {
+      marks.push(lineMark({ key: `line:${s}`, points: placed.map(({ v, i }) => at2(slots[i], v)), color, datum: { series: s } }));
+    }
+    for (const { v, i } of placed) marks.push(pointMark({ key: `point:${s}:${i}`, ...at2(slots[i], v), radius: 3.5, color, datum: datum(i) }));
+  });
+  return marks;
+}
+
+// src/plotData.ts
+var COMPILERS = {
+  xychart: compileXyChart
+};
+function compilePlot(data, size, theme, measure) {
+  const compile = COMPILERS[data.kind];
+  if (compile === void 0) throw new Error(`compilePlot: no chart of kind "${data.kind}"`);
+  return compile(data, size, theme, measure).marks;
+}
+
+// src/xychart/edit.ts
+function setXyValue(data, series, index, value) {
+  const target = data.series[series];
+  if (target === void 0 || index < 0 || index >= target.values.length) {
+    throw new Error(`setXyValue: series ${series} holds no value ${index}`);
+  }
+  if (target.values[index] === value) return data;
+  const values = target.values.map((v, i) => i === index ? value : v);
+  return { ...data, series: data.series.map((s, i) => i === series ? { ...s, values } : s) };
+}
+function xyValueAt(layout, at2) {
+  const raw = layout.value.invert(layout.orientation === "vertical" ? at2.y : at2.x);
+  const step = layout.value.tickStep() / 10;
+  return Number((Math.round(raw / step) * step).toFixed(decimalsOf(step)));
+}
+
+// src/plotScene.ts
+function plotRootOf(node) {
+  const plot = node?.data?.plot;
+  return plot !== void 0 && plot !== null && typeof plot === "object" && typeof plot.data?.kind === "string" ? plot : null;
+}
+function plotMarkOf(node) {
+  const mark = node?.data?.plotMark;
+  return mark !== void 0 && mark !== null && typeof mark.kind === "string" ? mark : null;
+}
+var plotMarkId = (rootId, key) => `${rootId}/${key}`;
+function markSpecs(rootId, layer, marks) {
+  return marks.map((m) => ({
+    kind: "mark",
+    id: plotMarkId(rootId, m.key),
+    parent: rootId,
+    layer,
+    pose: { x: m.pose.x, y: m.pose.y, width: m.pose.width, height: m.pose.height, ...m.pose.rotation ? { rotation: m.pose.rotation } : {} },
+    data: m.data
+  }));
+}
+function plotSpecs(data, opts) {
+  const id = opts.id ?? "plot";
+  const layer = opts.layer ?? "main";
+  const theme = opts.theme ?? PLOT_THEME;
+  const { x, y, width, height } = opts.box;
+  const marks = compilePlot(data, { width, height }, theme, opts.measure ?? textMeasure);
+  const root = { kind: "group", id, layer, pose: { x, y, width, height }, data: { plot: { data, theme } } };
+  return [root, ...markSpecs(id, layer, marks)];
+}
+function rootTrait(scene, rootId) {
+  const node = scene.get(rootId);
+  const trait = plotRootOf(node);
+  if (node === void 0 || trait === null) throw new Error(`replacePlotData: "${rootId}" is not a plot root`);
+  return { node, trait };
+}
+function replacePlotData(scene, rootId, data, opts = {}) {
+  const s = scene;
+  const { node, trait } = rootTrait(s, rootId);
+  const theme = opts.theme ?? trait.theme;
+  const pose = node.pose;
+  const marks = compilePlot(data, { width: pose.width, height: pose.height }, theme, opts.measure ?? textMeasure);
+  s.batch(opts.label ?? "Edit chart", () => {
+    s.update(node.id, { data: { ...node.data, plot: { data, theme } } });
+    const children = s.childrenOf(node.id);
+    if (children.length > 0) s.removeMany(children);
+    for (const spec of markSpecs(rootId, node.layer, marks)) s.add(spec);
+  });
+}
+function plotRootsIn(scene) {
+  return scene.renderOrderNodes().filter((n2) => plotRootOf(n2) !== null).map((n2) => n2.id);
+}
+
+// src/xychart/editor.ts
+var seriesIndex = (datum) => {
+  const d = datum;
+  return typeof d?.series === "number" && typeof d.index === "number" ? { series: d.series, index: d.index } : null;
+};
+var xyEditor = {
+  handle(data, { trait, pose }) {
+    if (trait.kind !== "bar" && trait.kind !== "point" || seriesIndex(trait.datum) === null) return null;
+    const vertical = data.orientation !== "horizontal";
+    const cursor = vertical ? "ns-resize" : "ew-resize";
+    const cx = pose.x + pose.width / 2;
+    const cy = pose.y + pose.height / 2;
+    if (trait.kind === "point") return { at: { x: cx, y: cy }, cursor };
+    const up = Number(trait.datum?.value ?? 0) >= 0;
+    return vertical ? { at: { x: cx, y: up ? pose.y : pose.y + pose.height }, cursor } : { at: { x: up ? pose.x + pose.width : pose.x, y: cy }, cursor };
+  },
+  drag(data, trait, size, theme, measure) {
+    const which = seriesIndex(trait.datum);
+    if (which === null) return null;
+    const { layout } = compileXyChart(data, size, theme, measure);
+    return (at2) => setXyValue(data, which.series, which.index, xyValueAt(layout, at2));
+  }
+};
+
+// src/editing/editors.ts
+var EDITORS = {
+  xychart: xyEditor
+};
+var plotEditorOf = (data) => EDITORS[data.kind] ?? null;
+var PLOT_HANDLE_LAYER_ID = "plot-handles";
+var PLOT_HANDLE_AFFORDANCE_KIND = `layer:${PLOT_HANDLE_LAYER_ID}`;
+function plotHandleScratchOf(hit) {
+  const p = hit?.payload;
+  return p !== void 0 && typeof p.rootId === "string" && typeof p.markId === "string" ? p : null;
+}
+function plotOrigin(scene, rootId) {
+  const pose = composeWorldPose(scenePoseAdapter(scene), rootId, scene.composition.compose);
+  return { x: pose.x, y: pose.y };
+}
+function* plotHandles(scene) {
+  for (const rootId of plotRootsIn(scene)) {
+    const root = scene.get(rootId);
+    const trait = plotRootOf(root);
+    const editor = trait && plotEditorOf(trait.data);
+    if (trait === null || editor === null || scene.isLocked(rootId) || scene.isHidden(rootId)) continue;
+    const origin = plotOrigin(scene, rootId);
+    for (const id of scene.childrenOf(rootId)) {
+      const node = scene.get(id);
+      const mark = plotMarkOf(node);
+      if (node === void 0 || mark === null) continue;
+      const handle = editor.handle(trait.data, { trait: mark, pose: node.pose });
+      if (handle === null) continue;
+      yield { rootId, markId: id, cursor: handle.cursor, at: { x: origin.x + handle.at.x, y: origin.y + handle.at.y } };
+    }
+  }
+}
+var HIT_RADIUS_PX = 6;
+function handleAffordance(scene) {
+  const regions = () => [...plotHandles(scene)].map(({ rootId, markId, at: at2, cursor }) => ({
+    id: markId,
+    targetId: null,
+    shape: { kind: "point", x: at2.x, y: at2.y, hitRadiusPx: HIT_RADIUS_PX },
+    cursor,
+    strength: "exclusive",
+    claimedKinds: ["pointer"],
+    bind: () => ({ initialScratch: { rootId, markId, at: at2 } })
+  }));
+  return { id: PLOT_HANDLE_LAYER_ID, regions, regionsAt: regions };
+}
+function plotHandleLayer(scene) {
+  return composeAffordanceLayer(PLOT_HANDLE_LAYER_ID, "Plot handles", [handleAffordance(scene)]);
+}
+
+// src/editing/dragAction.ts
+var PLOT_DRAG_ACTION_ID = "plot.dragValue";
+function pressOf(ctx, measure) {
+  const pressed = plotHandleScratchOf(ctx.drag?.affordance);
+  const scene = ctx.deps.scene;
+  const root = pressed === null ? void 0 : scene?.get(pressed.rootId);
+  const trait = plotRootOf(root);
+  const mark = plotMarkOf(pressed === null ? void 0 : scene?.get(pressed.markId));
+  const editor = trait && plotEditorOf(trait.data);
+  if (pressed === null || scene === void 0 || root === void 0 || trait === null || mark === null || editor === null) return null;
+  const size = { width: root.pose.width, height: root.pose.height };
+  const propose = editor.drag(trait.data, mark, size, trait.theme, measure);
+  if (propose === null) return null;
+  const origin = plotOrigin(scene, pressed.rootId);
+  const start = ctx.drag?.start ?? ctx.world;
+  const grab = { x: pressed.at.x - start.x, y: pressed.at.y - start.y };
+  return {
+    rootId: pressed.rootId,
+    propose,
+    toPlot: (w) => ({ x: w.x + grab.x - origin.x, y: w.y + grab.y - origin.y }),
+    redraw: (data) => markSpecs(pressed.rootId, root.layer, compilePlot(data, size, trait.theme, measure)),
+    deps: ctx.deps
+  };
+}
+function commitPlotToScene(edit, ctx, measure = textMeasure) {
+  const scene = ctx.deps.scene;
+  if (scene === void 0 || plotRootOf(scene.get(edit.rootId)) === null) return;
+  replacePlotData(scene, edit.rootId, edit.data, { label: "Edit value", measure });
+}
+function createPlotDragAction(opts = {}) {
+  const measure = opts.measure ?? textMeasure;
+  const commit = opts.commit ?? ((edit, ctx) => commitPlotToScene(edit, ctx, measure));
+  return {
+    id: opts.id ?? PLOT_DRAG_ACTION_ID,
+    label: "Edit value",
+    group: "plot",
+    requires: ["scene"],
+    eligible: { mode: "normal" },
+    invoker: {
+      timing: "ongoing",
+      start(ctx) {
+        const p = pressOf(ctx, measure);
+        if (p === null) return {};
+        let next = null;
+        let shown = /* @__PURE__ */ new Map();
+        let open = true;
+        const scene = ctx.deps.scene;
+        const previewing = () => open && next !== null ? shown : null;
+        return {
+          kind: "plot-drag-value",
+          onMove(moveCtx) {
+            next = p.propose(p.toPlot(moveCtx.world));
+            shown = new Map(p.redraw(next).map((spec) => [spec.id, spec]));
+          },
+          previewIds: () => {
+            const specs = previewing();
+            return specs === null ? null : [...specs.keys()].filter((id) => scene.get(id) !== void 0);
+          },
+          previewPose: (id) => previewing()?.get(id)?.pose ?? null,
+          previewData: (id) => previewing()?.get(id)?.data ?? null,
+          onEnd(endCtx, reason) {
+            open = false;
+            if (reason !== "commit" || next === null) return;
+            commit({ rootId: p.rootId, data: p.propose(p.toPlot(endCtx.world)) }, { ...endCtx, deps: p.deps });
+          }
+        };
+      }
+    },
+    enabled: () => true
+  };
+}
+
+// src/editing/plotEditing.ts
+var GRAB_PLOT_HANDLE_ACTION_ID = "plot.grabHandle";
+var grabHandleAction = {
+  id: GRAB_PLOT_HANDLE_ACTION_ID,
+  label: "Grab chart handle",
+  group: "plot",
+  invoker: { timing: "immediate", run: () => {
+  } },
+  enabled: () => true
+};
+function plotEditing(opts) {
+  const actionId = opts.id ?? PLOT_DRAG_ACTION_ID;
+  const target = `affordance:${PLOT_HANDLE_AFFORDANCE_KIND}`;
+  return {
+    layer: plotHandleLayer(opts.scene),
+    contribution: {
+      id: "weasel-plot-editing",
+      eligibility: { claimed: true },
+      actions: [createPlotDragAction({ ...opts, id: actionId }), grabHandleAction],
+      bindings: [
+        { spec: { kind: "drag", target }, actionId, opts: { id: "weasel-plot-editing.drag" } },
+        { spec: { kind: "pointerDown", target }, actionId: GRAB_PLOT_HANDLE_ACTION_ID, opts: { id: "weasel-plot-editing.pointerDown" } },
+        { spec: { kind: "click", target }, actionId: GRAB_PLOT_HANDLE_ACTION_ID, opts: { id: "weasel-plot-editing.click" } }
+      ]
+    }
+  };
+}
+var ROOT = "plot";
+var FEATURES = ["pick"];
+function PlotView(props) {
+  return /* @__PURE__ */ jsx(WeaselProvider, { children: /* @__PURE__ */ jsx(Inner, { ...props }) });
+}
+function Inner({ data, onChange, width, height, theme, measure, background, className, "aria-label": label }) {
+  const [initial] = useState(() => plotSpecs(data, {
+    id: ROOT,
+    box: { x: 0, y: 0, width, height },
+    ...theme ? { theme } : {},
+    ...measure ? { measure } : {}
+  }));
+  const scene = useScene({ systemLayers: [{ id: "main" }], initial });
+  const changed = useLatest(onChange);
+  useEffect(() => {
+    const root = scene.get(ROOT);
+    const pose = root?.pose;
+    const trait = plotRootOf(root);
+    const sized = pose !== void 0 && pose.width === width && pose.height === height;
+    if (trait === null || trait.data === data && sized && (theme === void 0 || trait.theme === theme)) return;
+    scene.untracked(() => {
+      if (!sized) scene.setPose(ROOT, { x: 0, y: 0, width, height });
+      replacePlotData(scene, ROOT, data, { ...theme ? { theme } : {}, ...measure ? { measure } : {} });
+    });
+  }, [scene, data, width, height, theme, measure]);
+  useEffect(() => {
+    let last = plotRootOf(scene.get(ROOT))?.data;
+    return scene.subscribe(() => {
+      const now = plotRootOf(scene.get(ROOT))?.data;
+      if (now === void 0 || now === last) return;
+      last = now;
+      changed.current?.(now);
+    });
+  }, [scene, changed]);
+  const editing = useMemo(() => plotEditing({ scene, ...measure ? { measure } : {} }), [scene, measure]);
+  const ambient = useMemo(() => [editing.contribution], [editing]);
+  const [canvas, setCanvas] = useState(null);
+  useEffect(() => canvas === null ? void 0 : canvas.registerLayer(editing.layer), [canvas, editing]);
+  return /* @__PURE__ */ jsx("div", { className, "data-wzl-plot": "", children: /* @__PURE__ */ jsx(
+    SceneCanvas,
+    {
+      ref: setCanvas,
+      scene,
+      features: FEATURES,
+      enableKeybindings: true,
+      ambient,
+      width,
+      height,
+      ...background ? { backgroundFill: background } : {},
+      ...label ? { "aria-label": label } : {}
+    }
+  ) });
+}
+
+export { GRAB_PLOT_HANDLE_ACTION_ID, PLOT_DRAG_ACTION_ID, PLOT_FONT, PLOT_HANDLE_AFFORDANCE_KIND, PLOT_HANDLE_LAYER_ID, PLOT_THEME, PlotView, arcMark, areaMark, axisMarks, axisRoom, bandScale, barMark, commitPlotToScene, compilePlot, compileXyChart, createPlotDragAction, formatInstant, formatNumber, lineMark, linearScale, logScale, markSpecs, niceDomain, ordinalScale, plotEditing, plotEditorOf, plotHandleLayer, plotHandleScratchOf, plotHandles, plotMarkId, plotMarkOf, plotOrigin, plotRootOf, plotRootsIn, plotSpecs, plotThemeFrom, pointMark, replacePlotData, ribbonMark, ruleMark, seriesColor, setXyValue, spanMark, stepTicks, textMark, textMeasure, tickStep, timeScale, xyLength, xyValueAt, xyValueDomain };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map