@anvpx/motion-scenes 0.0.0-stage → 0.1.1

package/dist/scenes/chapter/scene.js

@@ -0,0 +1,6 @@
+// @ts-check
+import { mountOverlay } from "../../runtime/mount.js";
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    return mountOverlay(root, config, ctx, { baseDelay: 0.1, staggerFrames: 4, rise: 24 });
+}

package/dist/scenes/chapter/style.css

@@ -0,0 +1,25 @@
+#scene-root .mk-chip {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  border-radius: var(--mk-radius-full);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  background: var(--mk-color-card);
+  font-weight: 700;
+}
+#scene-root .mk-number {
+  display: grid;
+  place-items: center;
+  min-width: var(--mk-space-xxl);
+  padding: var(--mk-space-sm) var(--mk-space-md);
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+}
+#scene-root .mk-label {
+  display: grid;
+  align-items: center;
+  padding: var(--mk-space-sm) var(--mk-space-lg);
+  color: var(--mk-color-fg);
+}

package/dist/scenes/chart/index.d.ts

@@ -0,0 +1 @@
+export declare const chartScene: import("@anvpx/motion-schema").ScenePlugin;

package/dist/scenes/chart/index.js

@@ -0,0 +1,24 @@
+import { defineScene } from "../../define-scene.js";
+import { readText } from "../../text-file.js";
+import { render } from "./render.js";
+import { configSchema } from "./schema.js";
+export const chartScene = defineScene({
+    type: "chart",
+    configSchema,
+    meta: {
+        purpose: "Animated bar, line or donut chart for ranking, trend or share, with values shown and an optional highlight.",
+        example: {
+            kind: "bar",
+            title: "Signups by channel",
+            data: [
+                { label: "Search", value: 420 },
+                { label: "Referral", value: 310 },
+                { label: "Social", value: 190 },
+            ],
+            highlight: 0,
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render,
+});

package/dist/scenes/chart/render.d.ts

@@ -0,0 +1,4 @@
+import type { EmitContext } from "@anvpx/motion-schema";
+import type { Rendered } from "../../define-scene.ts";
+import type { Props } from "./schema.ts";
+export declare const render: (props: Props, ctx: EmitContext, root: string) => Rendered;

package/dist/scenes/chart/render.js

@@ -0,0 +1,257 @@
+import { animAttrs, esc } from "../../html.js";
+import { frameCss } from "../../shared/frame.js";
+import { textWidth } from "../../shared/measure.js";
+import { along, formatter, scaleOf } from "./scale.js";
+const SM_PX = 28;
+const MD_PX = 32;
+const LG_PX = 48;
+const ROUND = 100;
+const PALETTE = 8;
+/** Plot padding (percent) that keeps strokes and end dots inside the plot box. */
+const X_PAD = 3;
+const Y_PAD = 6;
+/** SVG y of the plot floor (the lowest tick). */
+const FLOOR = ROUND - Y_PAD;
+const VALUE_PAD_PX = 40;
+const LABEL_MAX_POINTS = 8;
+/** Minimum vertical distance between end labels, in plot percent. */
+const END_GAP = 9;
+const round = (value) => Math.round(value * ROUND) / ROUND;
+const sizeOf = (ctx, step, fallback) => ctx.theme.fontSizes[step] ?? fallback;
+const slot = (index) => (index % PALETTE) + 1;
+const ordered = (props) => {
+    const points = (props.data ?? []).map((point, index) => ({ ...point, index }));
+    if (props.sort === "asc")
+        return points.sort((a, b) => a.value - b.value);
+    return props.sort === "desc" ? points.sort((a, b) => b.value - a.value) : points;
+};
+const summary = (props, parts) => esc(`${props.kind} chart${props.title ? `: ${props.title}` : ""}. ${parts.join("; ")}${props.caption ? `. ${props.caption}` : ""}`);
+const figure = (props, cls, parts, inner) => `<figure class="mk-chart ${cls}" role="img" aria-label="${summary(props, parts)}">\n${inner}\n</figure>`;
+/** Count-up value cell: the text it ends on rides in data-count. */
+const counted = (cls, step, shown) => `<span class="${cls}" data-step="${step}" data-count="${esc(shown)}">${esc(shown)}</span>`;
+const emphasis = (props, point) => {
+    if (props.highlight === undefined)
+        return "";
+    return point.index === props.highlight ? " mk-hi" : " mk-lo";
+};
+/* ---------- bar ---------- */
+const barRow = (props, point, step, pct, shown, vertical) => {
+    const attrs = animAttrs(vertical ? "fade" : "rise", step, `item-${point.index + 1}`);
+    const grow = `data-grow="${vertical ? "height" : "width"}" data-to="${pct}" data-step="${step}"`;
+    const value = !props.showValues ? "" : counted("mk-val", step, shown);
+    const name = `<span class="mk-name">${esc(point.label)}</span>`;
+    const mark = `<span class="mk-fill${emphasis(props, point)}"`;
+    if (vertical) {
+        const stack = `<div class="mk-stack" ${grow}>${value}${mark}></span></div>`;
+        return `<div class="mk-col" ${attrs}><div class="mk-well">${stack}</div>${name}</div>`;
+    }
+    const fill = `${mark} ${grow}></span>`;
+    return `<div class="mk-row" ${attrs}>${name}<div class="mk-track">${fill}</div>${value}</div>`;
+};
+const bars = (props, ctx, offset) => {
+    const points = ordered(props);
+    const values = points.map((point) => point.value);
+    const format = formatter(values, props.unit);
+    const max = Math.max(...values);
+    const vertical = props.orient === "v";
+    const rows = points.map((point, index) => {
+        const pct = max > 0 ? round((point.value / max) * ROUND) : 0;
+        return barRow(props, point, index + offset, pct, format(point.value), vertical);
+    });
+    const parts = points.map((point) => `${point.label} ${format(point.value)}`);
+    const valueW = Math.max(...points.map((p) => textWidth(format(p.value), sizeOf(ctx, "lg", LG_PX))));
+    return {
+        body: figure(props, `mk-bars ${vertical ? "mk-v" : "mk-h"}${!props.showValues ? " mk-noval" : ""}`, parts, rows.join("\n")),
+        css: vertical
+            ? `{root} .mk-bars.mk-v { grid-template-columns: repeat(${points.length}, minmax(0, 1fr)); }\n`
+            : `{root} .mk-bars.mk-h { --vw: ${valueW + VALUE_PAD_PX}px; }\n`,
+    };
+};
+/* ---------- line ---------- */
+const xAt = (index, count) => round(X_PAD + (index / (count - 1)) * (ROUND - 2 * X_PAD));
+const yAt = (value, scale) => round(Y_PAD + along(value, scale) * (ROUND - 2 * Y_PAD));
+/** Moves labels apart (bottom to top) until neighbours keep `END_GAP` between them. */
+const spread = (ys) => {
+    const order = ys.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y);
+    order.forEach((item, k) => {
+        const below = order[k - 1];
+        if (below !== undefined && item.y - below.y < END_GAP)
+            item.y = below.y + END_GAP;
+    });
+    const out = [];
+    for (const item of order)
+        out[item.i] = item.y;
+    return out;
+};
+const labelled = (count, values) => {
+    if (count <= LABEL_MAX_POINTS)
+        return new Set(values.map((_, i) => i));
+    return new Set([0, count - 1, values.indexOf(Math.max(...values))]);
+};
+const lineShapes = (values, scale, solid) => {
+    const pts = values.map((v, i) => `${xAt(i, values.length)},${round(ROUND - yAt(v, scale))}`);
+    const first = pts[0] ?? "0,100";
+    const last = pts[pts.length - 1] ?? "0,100";
+    const area = solid
+        ? `<polygon class="mk-area" points="${first.split(",")[0]},${FLOOR} ${pts.join(" ")} ${last.split(",")[0]},${FLOOR}"/>`
+        : "";
+    return `${area}<polyline class="mk-stroke" points="${pts.join(" ")}"/>`;
+};
+/** Where a point's value goes: above every point of a lone line, else right of each line's end. */
+const labelKind = (props, single, index, values) => {
+    if (!props.showValues)
+        return undefined;
+    if (single)
+        return labelled(values.length, values).has(index) ? "above" : undefined;
+    return index === values.length - 1 ? "right" : undefined;
+};
+const lineLabels = (props, ctx, scale, step) => {
+    const { x = [], series = [] } = props;
+    const format = formatter(series.flatMap((one) => one.values), props.unit);
+    const single = series.length === 1;
+    const ends = spread(series.map((one) => yAt(one.values[x.length - 1] ?? 0, scale)));
+    const widest = Math.max(...series.map((one) => textWidth(format(one.values[x.length - 1] ?? 0), sizeOf(ctx, "md", MD_PX))));
+    const html = series.flatMap((one, s) => one.values.flatMap((value, i) => {
+        const at = round(xAt(i, x.length) / ROUND);
+        const attrs = `data-grow="dot" data-at="${at}" data-step="${step(s)}"`;
+        const left = xAt(i, x.length);
+        const spot = `left: ${left}%; bottom: ${yAt(value, scale)}%`;
+        const dot = `<span class="mk-dot mk-s${slot(s)}" style="${spot}" ${attrs}></span>`;
+        const kind = labelKind(props, single, i, one.values);
+        if (kind === undefined)
+            return [dot];
+        const pos = kind === "above" ? spot : `left: ${left}%; bottom: ${ends[s]}%`;
+        const label = `<span class="mk-pv mk-${kind}" style="${pos}" ${attrs}>${esc(format(value))}</span>`;
+        return [dot, label];
+    }));
+    return { html: html.join("\n"), room: single ? 56 : widest + 56 };
+};
+const line = (props, ctx, offset) => {
+    const { x = [], series = [] } = props;
+    const scale = scaleOf(series.flatMap((one) => one.values));
+    const tick = formatter(scale.ticks, props.unit);
+    const step = (s) => offset + 1 + s;
+    const yWidth = Math.max(...scale.ticks.map((t) => textWidth(tick(t), sizeOf(ctx, "sm", SM_PX))));
+    const labels = lineLabels(props, ctx, scale, step);
+    const grid = scale.ticks.map((t) => {
+        const bottom = yAt(t, scale);
+        return `<i class="mk-gl" style="bottom: ${bottom}%"></i>`;
+    });
+    const ticks = scale.ticks.map((t) => `<span class="mk-tick" style="bottom: ${yAt(t, scale)}%">${esc(tick(t))}</span>`);
+    const xs = x.map((label, i) => `<span class="mk-xl" style="left: ${xAt(i, x.length)}%">${esc(label)}</span>`);
+    const curves = series.map((one, s) => `<svg class="mk-curve mk-s${slot(s)}" viewBox="0 0 100 100" preserveAspectRatio="none" data-grow="line" data-step="${step(s)}" aria-hidden="true">${lineShapes(one.values, scale, series.length === 1)}</svg>`);
+    const legend = series.length > 1
+        ? `<ul class="mk-legend" ${animAttrs("fade", offset)}>${series
+            .map((one, s) => `<li><i class="mk-key mk-s${slot(s)}"></i>${esc(one.name)}</li>`)
+            .join("")}</ul>\n`
+        : "";
+    const axes = `<div class="mk-yaxis" ${animAttrs("fade", offset)}>${ticks.join("")}</div>
+<div class="mk-plot"><div class="mk-gls" ${animAttrs("fade", offset)}>${grid.join("")}</div>${curves.join("")}\n${labels.html}</div>
+<div class="mk-xaxis" ${animAttrs("fade", offset)}>${xs.join("")}</div>`;
+    const parts = series.map((one) => `${one.name}: ${x.map((label, i) => `${label} ${one.values[i]}`).join(", ")}`);
+    return {
+        body: figure(props, "mk-lines", parts, `${legend}<div class="mk-frame">\n${axes}\n</div>`),
+        css: `{root} .mk-lines .mk-frame { --yw: ${yWidth + 24}px; --mr: ${labels.room}px; }\n`,
+    };
+};
+/* ---------- bar + trend ---------- */
+/** Bars stay the default; an opt-in trend draws one line per series below them. */
+const barsWithTrend = (props, ctx, offset) => {
+    const base = bars(props, ctx, offset);
+    if (props.trend === undefined)
+        return base;
+    const points = ordered(props);
+    const nested = line({
+        ...props,
+        kind: "line",
+        x: points.map((point) => point.label),
+        series: props.trend.map((one) => ({
+            ...one,
+            values: points.map((point) => one.values[point.index] ?? 0),
+        })),
+    }, ctx, offset + points.length);
+    return { body: `${base.body}\n${nested.body}`, css: `${base.css ?? ""}${nested.css ?? ""}` };
+};
+/* ---------- donut ---------- */
+const ARC_GAP = 0.6;
+/** From this many slices the legend rows tighten so they fit the panel at any theme scale. */
+const DENSE_POINTS = 7;
+/** Tall frames: the legend sits below the ring at full width, so long labels wrap instead of colliding with values. */
+const DONUT_TALL_CSS = `#scene-root .mk-donut { flex-direction: column; gap: var(--mk-space-xl); justify-content: center; }
+#scene-root .mk-donut .mk-ring { width: min(100%, 600px); height: auto; aspect-ratio: 1; }
+#scene-root .mk-donut .mk-core { padding: 0 22%; }
+#scene-root .mk-donut .mk-legend-list { flex: none; width: 100%; max-width: none; }
+#scene-root .mk-donut .mk-lname { overflow-wrap: anywhere; }`;
+/** Square frames have no height for a stacked legend: ring and legend sit side by side, ring smaller, share column dropped (values stay). */
+const DONUT_SQUARE_CSS = `#scene-root .mk-donut { flex-direction: row; gap: var(--mk-space-lg); }
+#scene-root .mk-donut .mk-ring { width: 300px; height: 300px; aspect-ratio: auto; }
+#scene-root .mk-donut .mk-core { padding: 0 56px; }
+#scene-root .mk-donut .mk-total { font-size: var(--mk-font-size-md); }
+#scene-root .mk-donut .mk-legend-list { flex: 1; width: auto; min-width: 0; gap: var(--mk-space-xs); }
+#scene-root .mk-donut .mk-leg { grid-template-columns: 24px minmax(0, 1fr) var(--vw); column-gap: var(--mk-space-sm); padding: var(--mk-space-xs) var(--mk-space-sm); font-size: var(--mk-font-size-sm); }
+#scene-root .mk-donut.mk-noval .mk-leg { grid-template-columns: 24px minmax(0, 1fr); }
+#scene-root .mk-donut .mk-pct { display: none; }
+#scene-root .mk-donut .mk-lname { line-height: 1.1; overflow-wrap: normal; hyphens: none; }`;
+const share = (value, total) => {
+    const pct = (value / total) * ROUND;
+    return pct > 0 && pct < 1 ? "<1%" : `${Math.round(pct)}%`;
+};
+const donut = (props, ctx, offset) => {
+    const points = ordered(props);
+    const values = points.map((point) => point.value);
+    const total = values.reduce((sum, value) => sum + value, 0);
+    const format = formatter(values, props.unit);
+    const chosen = points.find((point) => point.index === props.highlight);
+    let from = 0;
+    const arcs = points.map((point) => {
+        const len = point.value / total;
+        const arc = `<circle class="mk-arc mk-c${slot(point.index)}${emphasis(props, point)}" cx="50" cy="50" r="38" pathLength="100" transform="rotate(-90 50 50)" data-grow="arc" data-from="${round(from)}" data-len="${round(len)}" data-gap="${ARC_GAP}" data-step="${offset}"/>`;
+        from += len;
+        return arc;
+    });
+    const centre = !props.showValues
+        ? ""
+        : chosen === undefined
+            ? counted("mk-total", offset, format(total))
+            : `${counted("mk-total", offset, share(chosen.value, total))}<span class="mk-core-label">${esc(chosen.label)}</span>`;
+    /** Values that already are percentages need no second share column. */
+    const shares = props.unit !== "%";
+    const rows = points.map((point, i) => {
+        const step = offset + 1 + i;
+        const attrs = animAttrs("rise", step, `item-${point.index + 1}`);
+        const nums = !props.showValues
+            ? ""
+            : `${counted("mk-lval", step, format(point.value))}${shares ? `<span class="mk-pct">${share(point.value, total)}</span>` : ""}`;
+        return `<li class="mk-leg${emphasis(props, point)}" ${attrs}><i class="mk-sw mk-c${slot(point.index)}"></i><span class="mk-lname">${esc(point.label)}</span>${nums}</li>`;
+    });
+    const ring = `<div class="mk-ring" ${animAttrs("fade", offset)}><svg viewBox="0 0 100 100" aria-hidden="true"><circle class="mk-bg" cx="50" cy="50" r="38"/>${arcs.join("")}</svg><div class="mk-core">${centre}</div></div>`;
+    const parts = points.map((point) => `${point.label} ${format(point.value)} (${share(point.value, total)})`);
+    const lead = textWidth(format(Math.max(...values)), sizeOf(ctx, "md", MD_PX));
+    return {
+        body: figure(props, `mk-donut${!props.showValues ? " mk-noval" : ""}${shares ? "" : " mk-nopct"}${points.length >= DENSE_POINTS ? " mk-dense" : ""}`, parts, `${ring}\n<ul class="mk-legend-list">\n${rows.join("\n")}\n</ul>`),
+        css: `{root} .mk-donut { --vw: ${lead + VALUE_PAD_PX}px; }\n${frameCss(ctx, "{root}", { tall: DONUT_TALL_CSS, square: DONUT_SQUARE_CSS })}`,
+    };
+};
+/* ---------- scene ---------- */
+export const render = (props, ctx, root) => {
+    const offset = props.title ? 1 : 0;
+    const part = props.kind === "line"
+        ? line(props, ctx, offset)
+        : props.kind === "donut"
+            ? donut(props, ctx, offset)
+            : barsWithTrend(props, ctx, offset);
+    const head = props.title
+        ? `<div class="mk-head">
+<h1 class="mk-heading" ${animAttrs("rise", 0, "title")}>${esc(props.title)}</h1>
+<span class="mk-rule" ${animAttrs("grow", 0, "title")}></span>
+</div>
+`
+        : "";
+    const caption = props.caption
+        ? `\n<p class="mk-caption" ${animAttrs("fade", offset)}>${esc(props.caption)}</p>`
+        : "";
+    return {
+        body: `${head}<div class="mk-panel">\n${part.body}\n</div>${caption}`,
+        css: (part.css ?? "").replaceAll("{root}", root),
+    };
+};

package/dist/scenes/chart/scale.d.ts

@@ -0,0 +1,11 @@
+export interface Scale {
+    readonly ticks: readonly number[];
+    readonly lo: number;
+    readonly hi: number;
+}
+/** Axis ticks covering the data; the baseline is zero unless the data sits far above it. */
+export declare const scaleOf: (values: readonly number[]) => Scale;
+/** One formatter for a whole data set, so every label has the same decimals and scale. */
+export declare const formatter: (values: readonly number[], unit: string | undefined) => ((value: number) => string);
+/** Position of `value` on the axis, 0..1. */
+export declare const along: (value: number, scale: Scale) => number;

package/dist/scenes/chart/scale.js

@@ -0,0 +1,53 @@
+import { fmt } from "../../shared/format.js";
+const TICK_TARGET = 4;
+const NICE_STEPS = [1, 2, 2.5, 5, 10];
+const FLAT_SPAN = 1;
+/** Data that starts above this share of its maximum gets a raised baseline. */
+const ZERO_BASE_SHARE = 0.6;
+const BASE_PAD = 0.15;
+const COMPACT_FROM = 100_000;
+const MAX_DECIMALS = 2;
+const ROUND_DIGITS = 10;
+/** "310.0K" reads better as "310K". */
+const WHOLE_TIER = /\.0(?=[KMBT])/;
+const niceStep = (raw) => {
+    const magnitude = 10 ** Math.floor(Math.log10(raw));
+    const normal = raw / magnitude;
+    return (NICE_STEPS.find((step) => normal <= step) ?? 10) * magnitude;
+};
+const round = (value) => Number(value.toFixed(ROUND_DIGITS));
+/** Axis ticks covering the data; the baseline is zero unless the data sits far above it. */
+export const scaleOf = (values) => {
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min;
+    const zeroBased = min >= 0 && min <= max * ZERO_BASE_SHARE;
+    const from = zeroBased ? Math.min(0, min) : min - range * BASE_PAD;
+    const to = max > from ? max : from + FLAT_SPAN;
+    const step = niceStep((to - from) / TICK_TARGET);
+    const lo = round(Math.floor(from / step) * step);
+    const hi = round(Math.ceil(to / step) * step);
+    const ticks = [];
+    for (let at = lo; at <= hi + step / 2; at += step)
+        ticks.push(round(at));
+    return { ticks, lo, hi: ticks[ticks.length - 1] ?? hi };
+};
+const decimalsOf = (value) => {
+    const [, fraction = ""] = String(Math.abs(value)).split(".");
+    return fraction.includes("e") ? MAX_DECIMALS : Math.min(MAX_DECIMALS, fraction.length);
+};
+/** Unit words ("users") are set apart by a space; symbols ("$", "%") hug the number. */
+const unitText = (unit) => unit !== undefined && /^[\p{L}]/u.test(unit) ? ` ${unit}` : unit;
+/** One formatter for a whole data set, so every label has the same decimals and scale. */
+export const formatter = (values, unit) => {
+    const compact = Math.max(...values.map(Math.abs)) >= COMPACT_FROM;
+    const decimals = compact ? undefined : Math.max(...values.map(decimalsOf));
+    const text = unitText(unit);
+    return (value) => fmt(value, {
+        compact,
+        ...(decimals === undefined ? {} : { decimals }),
+        ...(text === undefined ? {} : { unit: text }),
+    }).replace(WHOLE_TIER, "");
+};
+/** Position of `value` on the axis, 0..1. */
+export const along = (value, scale) => (value - scale.lo) / (scale.hi - scale.lo);

package/dist/scenes/chart/scene.d.ts

@@ -0,0 +1,2 @@
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export declare function createScene(root: HTMLElement, config: import("../../runtime/mount.js").SceneConfig, ctx: import("../../runtime/mount.js").RuntimeContext): import("../../runtime/mount.js").Runtime;

package/dist/scenes/chart/scene.js

@@ -0,0 +1,73 @@
+// @ts-check
+import { mountTimeline } from "../../runtime/mount.js";
+import { countTrack, sample } from "../../runtime/timeline.js";
+import { clamp, wipe } from "../../shared/motion.js";
+const PLAN = { baseDelay: 0.2, staggerFrames: 5, rise: 32 };
+const DOT_RAMP = 24;
+/** A dot is fully shown once the line has passed it; last dots sit just inside the end. */
+const DOT_LEAD = 0.95;
+const WHOLE = 100;
+/**
+ * @param {HTMLElement | SVGElement} el
+ * @param {string} name
+ * @returns {number}
+ */
+const num = (el, name) => Number(el.getAttribute(`data-${name}`) ?? 0);
+/**
+ * Draws one growing mark at eased progress p (0..1).
+ * @param {HTMLElement | SVGElement} el
+ * @param {number} p
+ */
+const draw = (el, p) => {
+    const kind = el.getAttribute("data-grow");
+    if (kind === "width")
+        el.style.width = `${num(el, "to") * p}%`;
+    else if (kind === "height")
+        el.style.height = `${num(el, "to") * p}%`;
+    else if (kind === "line")
+        el.style.clipPath = wipe(p);
+    else if (kind === "dot")
+        el.style.opacity = String(clamp((p - num(el, "at") * DOT_LEAD) * DOT_RAMP, 0, 1));
+    else if (kind === "arc") {
+        const full = num(el, "len") * WHOLE;
+        const gap = num(el, "gap");
+        const seen = clamp((p - num(el, "from")) / num(el, "len"), 0, 1);
+        const length = seen * Math.max(full - gap, 0);
+        el.style.strokeDasharray = `${length} ${WHOLE}`;
+        el.style.strokeDashoffset = String(-(num(el, "from") * WHOLE + gap / 2));
+    }
+};
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const base = mountTimeline(root, config, ctx, PLAN);
+    const ease = config.ease ?? root.dataset.ease ?? "out";
+    const fps = ctx.fps ?? Number(root.dataset.fps ?? 30);
+    const duration = ctx.duration ?? Number(root.dataset.duration ?? 0);
+    const marks = Array.from(root.querySelectorAll("[data-grow]"), (node) => {
+        const el = /** @type {HTMLElement | SVGElement} */ (node);
+        return { el, track: countTrack(num(el, "step"), PLAN, fps, ease, duration) };
+    });
+    /** @param {number} t */
+    const seek = (t) => {
+        base.seek(t);
+        for (const mark of marks)
+            draw(mark.el, sample(mark.track, t));
+    };
+    const dispose = () => {
+        base.dispose();
+        for (const { el } of marks) {
+            for (const name of [
+                "width",
+                "height",
+                "clip-path",
+                "opacity",
+                "stroke-dasharray",
+                "stroke-dashoffset",
+            ]) {
+                el.style.removeProperty(name);
+            }
+        }
+    };
+    seek(0);
+    return { seek, dispose, ready: base.ready };
+}

package/dist/scenes/chart/schema.d.ts

@@ -0,0 +1,36 @@
+import { z } from "zod";
+export declare const configSchema: z.ZodObject<{
+    kind: z.ZodEnum<{
+        bar: "bar";
+        donut: "donut";
+        line: "line";
+    }>;
+    title: z.ZodOptional<z.ZodString>;
+    unit: z.ZodOptional<z.ZodString>;
+    showValues: z.ZodDefault<z.ZodBoolean>;
+    caption: z.ZodOptional<z.ZodString>;
+    data: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodNumber;
+    }, z.core.$strict>>>;
+    sort: z.ZodOptional<z.ZodEnum<{
+        asc: "asc";
+        desc: "desc";
+        none: "none";
+    }>>;
+    highlight: z.ZodOptional<z.ZodNumber>;
+    orient: z.ZodOptional<z.ZodEnum<{
+        h: "h";
+        v: "v";
+    }>>;
+    x: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    series: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        values: z.ZodArray<z.ZodNumber>;
+    }, z.core.$strict>>>;
+    trend: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        values: z.ZodArray<z.ZodNumber>;
+    }, z.core.$strict>>>;
+}, z.core.$strict>;
+export type Props = z.output<typeof configSchema>;

package/dist/scenes/chart/schema.js

@@ -0,0 +1,109 @@
+import { z } from "zod";
+import { textWidth } from "../../shared/measure.js";
+import { limitWords, present, text } from "../../words.js";
+const KINDS = ["bar", "line", "donut"];
+const COUNT_MESSAGE = "need 2-8 data points";
+const LABEL_MAX = 32;
+const X_LABEL_MAX = 12;
+/** Text px and usable plot width the label-fit checks assume at 1080p. */
+const MIN_TEXT_PX = 28;
+const TITLE_PX = 72;
+const LINE_ROOM_PX = 1500;
+const TITLE_ROOM_PX = 1700;
+const LABEL_GAP_PX = 12;
+const pointSchema = z.strictObject({ label: text.max(LABEL_MAX), value: z.number().min(0) });
+const seriesSchema = z.strictObject({
+    name: text.max(LABEL_MAX),
+    values: z.array(z.number()).min(2).max(12),
+});
+const base = z.strictObject({
+    kind: z.enum(KINDS),
+    title: text.optional(),
+    unit: text.optional(),
+    showValues: z.boolean().default(true),
+    caption: text.optional(),
+    data: z.array(pointSchema).min(2, COUNT_MESSAGE).max(8, COUNT_MESSAGE).optional(),
+    sort: z.enum(["none", "asc", "desc"]).optional(),
+    highlight: z.number().int().min(0).optional(),
+    orient: z.enum(["h", "v"]).optional(),
+    x: z.array(text.max(X_LABEL_MAX)).min(2).max(12).optional(),
+    series: z.array(seriesSchema).min(1, "need 1-3 series").max(3, "need 1-3 series").optional(),
+    trend: z
+        .array(seriesSchema)
+        .min(1, "need 1-3 trend series")
+        .max(3, "need 1-3 trend series")
+        .optional(),
+});
+const fail = (ctx, path, message) => ctx.addIssue({ code: "custom", path, message });
+const forbid = (props, ctx, keys) => {
+    for (const key of keys) {
+        if (props[key] !== undefined)
+            fail(ctx, [key], `not used by ${props.kind} charts`);
+    }
+};
+const checkPoints = (props, ctx) => {
+    if (props.data === undefined) {
+        fail(ctx, ["data"], `${props.kind} charts need data`);
+        return;
+    }
+    if (props.highlight !== undefined && props.highlight >= props.data.length) {
+        fail(ctx, ["highlight"], `highlight ${props.highlight} is outside data (0-${props.data.length - 1})`);
+    }
+    if (props.kind === "donut" && props.data.every((point) => point.value === 0)) {
+        fail(ctx, ["data"], "donut needs at least one value above 0");
+    }
+};
+const checkLine = (props, ctx) => {
+    if (props.x === undefined)
+        fail(ctx, ["x"], "line charts need x labels");
+    if (props.series === undefined)
+        fail(ctx, ["series"], "line charts need series");
+    const { x = [], series = [] } = props;
+    series.forEach((one, index) => {
+        if (one.values.length !== x.length) {
+            fail(ctx, ["series", index, "values"], `needs ${x.length} values (one per x label)`);
+        }
+    });
+    const slot = LINE_ROOM_PX / Math.max(x.length - 1, 1) - LABEL_GAP_PX;
+    x.forEach((label, index) => {
+        if (textWidth(label, MIN_TEXT_PX) > slot) {
+            fail(ctx, ["x", index], `label too wide for ${x.length} points; shorten it`);
+        }
+    });
+};
+const checkKind = (props, ctx) => {
+    if (props.kind === "line") {
+        forbid(props, ctx, ["data", "sort", "highlight", "orient", "trend"]);
+        checkLine(props, ctx);
+        return;
+    }
+    forbid(props, ctx, ["x", "series"]);
+    if (props.kind === "donut") {
+        forbid(props, ctx, ["orient", "trend"]);
+        checkPoints(props, ctx);
+        return;
+    }
+    checkPoints(props, ctx);
+    checkTrend(props, ctx);
+};
+const checkTrend = (props, ctx) => {
+    if (props.trend === undefined || props.data === undefined)
+        return;
+    const count = props.data.length;
+    props.trend.forEach((one, index) => {
+        if (one.values.length !== count) {
+            fail(ctx, ["trend", index, "values"], `needs ${count} values (one per bar)`);
+        }
+    });
+};
+export const configSchema = limitWords(base.superRefine((props, ctx) => {
+    checkKind(props, ctx);
+    if (props.title !== undefined && textWidth(props.title, TITLE_PX) > TITLE_ROOM_PX) {
+        fail(ctx, ["title"], "title too long for one line; shorten it");
+    }
+}), (props) => [
+    ...present(props.title, props.unit, props.caption),
+    ...(props.data ?? []).flatMap((point) => present(point.label)),
+    ...(props.x ?? []),
+    ...(props.series ?? []).flatMap((one) => present(one.name)),
+]);