@motionscript/charts 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/bar-chart/bar-chart.js

@@ -1,614 +1,423 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var BarChart_1;
-import { command, node, Node2D, Rect, easeOut, property, } from "@motionscript/sdk";
+import { Rect, Types, component2d, easeOut, } from "@motionscript/sdk";
+import { formatNumber } from "@motionscript/sdk/component";
+import { cartesianFrame, cartesianViews, laidOutSize } from "../kit/cartesian.js";
 import { ChartBorder } from "../kit/chart-border.js";
 import { ChartCanvas } from "../kit/chart-canvas.js";
 import { ChartLegend } from "../kit/chart-legend.js";
+import { asParts, fresh } from "../kit/entries.js";
+import { beats } from "../kit/motion.js";
 import { VerticalAxis } from "../kit/vertical-axis.js";
-import { clampUnit, formatMarker, markerStep, axisTweenTarget, lerpAxisDomain, markerValues, num, resolveAxisDomain, } from "../kit/shared.js";
-import { formatNumber } from "@motionscript/sdk/component";
-import { asCommand, drive, hold, sequence as sequenceOf, together, } from "@motionscript/sdk/component";
+import { clampUnit, formatMarker, lerpAxisDomain, lerpAxisEntry, markerStep, markerValues, num, resolveAxisDomain, settleAxisDomain, } from "../kit/shared.js";
 import { CategoryAxis } from "./category-axis.js";
 import { ChartBars } from "./chart-bars.js";
 import { DEFAULT_BAR_CHART_THEME, barCategories, barSpans, lerpBarChartTheme, resolveBarChartTheme, resolveBarFill, resolveBarScale, stackCapIndex, } from "./shared.js";
-/**
- * Headroom above the plot, in px — the line chart's, so the two sit at the same
- * size in the same box and a scene can swap one for the other without re-tuning
- * its layout. The plot's top grid line is the one place a marker would
- * otherwise be drawn outside the chart's own box.
- */
-const TOP_HEADROOM = 24;
+/** The argument every per-series command takes: an index into `series`, offered by name. */
+const SERIES_ARG = Types.custom(0, { kind: "series", min: 0, step: 1 });
 /** How far the legend starts below its slot when it enters, in px. */
 const LEGEND_SLIDE = 20;
+/** Fallback marker count when the value axis states no ticks. */
+const DEFAULT_MARKERS = 5;
+/**
+ * How `enter` divides its duration between its three beats: the axes arriving,
+ * the columns rising, and the legend coming up. Shares of the whole, so they
+ * must sum to 1.
+ */
 const AXES_SHARE = 0.35;
 const BARS_SHARE = 0.5;
 const LEGEND_SHARE = 0.15;
+/** The value axis with its range and ticks resolved: the explicit ones, else five across the scale. */
+function drawnValue(s, domain) {
+    const divisions = (domain.ticks?.length ?? DEFAULT_MARKERS) - 1;
+    const range = resolveBarScale(s.data, s.series, s.stacked, domain.range, divisions);
+    return { ...domain, range, ticks: domain.ticks ?? markerValues(range, DEFAULT_MARKERS - 1) };
+}
+/** The value axis as a bar chart draws it now, an auto range or tick row read back as itself. */
+export function barChartDomain(s) {
+    return settleAxisDomain(s.valueAxis, (d) => drawnValue(s, d));
+}
+/**
+ * A value written down as this chart's value axis says: the ticks and the
+ * figures printed on the columns both read through here, so the two cannot
+ * disagree about what a number looks like.
+ */
+function valueLabel(s, domain, value) {
+    const pattern = s.valueAxis.format;
+    return pattern === undefined ? formatMarker(value, markerStep(domain.ticks)) : formatNumber(value, pattern);
+}
+/** A value on the plot's **centred** pixel space (origin at its centre, y-up). */
+function valueToY(domain, plot, value) {
+    const [min, max] = domain.range;
+    if (max <= min)
+        return -plot.height / 2;
+    return ((value - min) / (max - min) - 0.5) * plot.height;
+}
+/**
+ * Pixel y of the line every column grows from: zero clamped onto the scale, so
+ * a cropped axis grows its columns from the plot floor.
+ */
+function baselinePx(domain, plot) {
+    const [min, max] = domain.range;
+    return valueToY(domain, plot, Math.min(Math.max(0, min), max));
+}
+/** Series `i`'s live share of the slot; 0 once it has been hidden. */
+function weightAt(s, index) {
+    return Math.max(0, s.weights[index] ?? 1);
+}
+/** `row` with each series' value scaled by its live weight: what the stacked spans are measured from. */
+function weightedRow(s, row) {
+    const scaled = { ...row };
+    s.series.forEach((series, i) => {
+        const value = row[series.field];
+        if (typeof value === "number")
+            scaled[series.field] = value * weightAt(s, i);
+    });
+    return scaled;
+}
 /**
- * A grouped or stacked bar chart, composed from independent parts rather than
- * one monolithic draw — the sibling of the {@link LineChart} family, built the
- * same way and out of several of the same pieces:
+ * Series `index`'s columns, mapped into the plot's centred pixel space. A
+ * grouped series divides the slot with its siblings by their live weights, a
+ * stacked one takes the whole slot and runs from the running total below it,
+ * so hiding a series reflows rather than punching a hole.
+ */
+function seriesBars(s, index, plot, captioned) {
+    const series = s.series[index];
+    if (!series)
+        return [];
+    const domain = barChartDomain(s);
+    const n = s.data.length;
+    const slotWidth = n > 0 ? plot.width / n : 0;
+    const slotCenter = (i) => -plot.width / 2 + slotWidth * (i + 0.5);
+    const inner = slotWidth * clampUnit(s.theme.bar.slotFill);
+    const gap = s.theme.bar.groupGap;
+    let total = 0;
+    for (let i = 0; i < s.series.length; i++)
+        total += weightAt(s, i);
+    const unit = inner / (total > 0 ? total : 1);
+    const weight = weightAt(s, index);
+    let before = 0;
+    for (let i = 0; i < index; i++)
+        before += weightAt(s, i);
+    return s.data.map((row, rowIndex) => {
+        // The stack is built from the *live* contributions, so a series fading out
+        // lowers the segments above it as it goes.
+        const spans = barSpans(s.stacked ? weightedRow(s, row) : row, s.series, s.stacked);
+        const span = spans[index] ?? { from: 0, to: 0, value: 0 };
+        const cap = s.stacked ? stackCapIndex(row, s.series) : index;
+        const slotLeft = slotCenter(rowIndex) - inner / 2;
+        const x = s.stacked ? slotCenter(rowIndex) : slotLeft + unit * before + (unit * weight) / 2;
+        const width = s.stacked ? inner : Math.max(0, unit * weight - (s.series.length > 1 ? gap : 0));
+        // The figure printed is the row's own value, not the weighted one.
+        const value = num(row, series.field);
+        return {
+            x,
+            width,
+            from: valueToY(domain, plot, span.from),
+            to: valueToY(domain, plot, span.to),
+            round: cap === index,
+            value,
+            ...(captioned && { caption: valueLabel(s, domain, value) }),
+        };
+    });
+}
+/**
+ * How far each category is dimmed by the spotlight, one entry per row: 1 while
+ * nothing is spotlit, falling to the theme's `dimOpacity` for every category but
+ * the chosen one as the reveal climbs.
+ */
+function categoryDims(s) {
+    const focus = clampUnit(s.spotlightReveal);
+    const dim = s.theme.spotlight.dimOpacity;
+    const chosen = s.spotlight;
+    return s.data.map((_, i) => (focus <= 0 || chosen === i ? 1 : 1 - (1 - dim) * focus));
+}
+/** The parts a bar chart's commands drive, found through its children. */
+function partsOf(children) {
+    const frame = cartesianViews(children);
+    if (!frame)
+        return null;
+    const cAxis = frame.below.find(CategoryAxis.is);
+    if (!VerticalAxis.is(frame.axis) || !cAxis)
+        return null;
+    return {
+        vAxis: frame.axis,
+        cAxis,
+        bars: frame.plot.filter(ChartBars.is),
+        legend: frame.below.find(ChartLegend.is) ?? null,
+    };
+}
+/**
+ * Move series `index`'s slot share to `target` with its legend entry, the group
+ * reflowing. Its columns are drawn for every frame the move covers, and switch
+ * off only once a hide has landed, so arriving at a time backwards shows what
+ * arriving forwards does.
+ */
+function toggling(timeline, state, children, index, target) {
+    const parts = partsOf(children);
+    if (!parts || !parts.bars[index])
+        return timeline.wait(timeline.duration);
+    // Read through `weightAt`, so a chart whose stored weights are short still
+    // tweens from the 1 it is drawing at.
+    const from = state.series.map((_, i) => weightAt(state, i));
+    const start = from[index] ?? 1;
+    const showing = state.series.map((s, i) => state.showing[i] ?? (s.enabled ?? true));
+    return timeline.together([
+        timeline.animate((t) => {
+            const weights = [...from];
+            weights[index] = start + (target - start) * timeline.ease(t);
+            const shown = [...showing];
+            shown[index] = target > 0 || t < 1;
+            return { weights, showing: shown };
+        }, { eased: false }),
+        ...(parts.legend ? [parts.legend.run(target > 0 ? "showSeries" : "hideSeries", { index })] : []),
+    ]);
+}
+/**
+ * A grouped or stacked bar chart, the sibling of the line chart and built the
+ * same way, out of several of the same pieces:
  *
  * - `ChartCanvas` — the plot panel with a horizontal grid, under everything.
  * - `VerticalAxis` — the numeric value markers, staggering in bottom-to-top.
- * - {@link CategoryAxis} — the row of names beneath the baseline, one per row of
- *   the data, staggering in left-to-right.
+ * - {@link CategoryAxis} — the row of names beneath the baseline, one per row.
  * - {@link ChartBars} (one per series) — that series' column in every category,
  *   plus the figures printed on them.
  * - `ChartLegend` — a row of entries below the chart, one per series.
  *
- * The parts are laid out from this node's `layoutBounds` exactly as the line
- * chart's are: the value axis on the left, the category captions below, the
- * plot filling what's left, and the legend row beneath the whole thing. The
- * columns are mapped across the plot panel's own laid-out box and read the same
- * resolved scale the axis does, so a column's end lands exactly on its marker
- * and the chart re-flows if its box changes.
- *
- * **Resting state is the finished chart** — the same bargain the line chart
- * makes: an editor paints a node's Initial state on a paused canvas, so a chart
- * that only appeared once a command had run would be edited blind. {@link enter}
- * arms every part back to its pre-entrance state before animating.
+ * Every part reads the chart's entries through bindings, and the columns map
+ * across the plot panel's own laid-out box, so a column's end lands exactly on
+ * its marker. **Zero is always on the scale**, and the columns grow about it, so
+ * a negative value draws downward out of the same `growth` signal.
  *
- * **Zero is always on the scale** (see `barValueExtent`), and the columns
- * grow about it rather than about the plot floor, so a negative value draws
- * downward out of the same `growth` signal that draws a positive one up.
- *
- * Past the entrance, two things move the chart:
- * {@link showSeries}/{@link hideSeries}/{@link spotlightSeries} pick out a
- * *series* — and hiding one **reflows the group**, the remaining columns
- * widening into the space as it goes, rather than leaving a hole where it was —
- * while {@link spotlightCategory}/{@link clearCategory} pick out a *column of
- * the table*, dimming every other category and its caption with it.
+ * **Resting state is the finished chart**; `enter` arms every part on its first
+ * frame. `showSeries`/`hideSeries`/`spotlightSeries` pick out a *series* (hiding
+ * one reflows the group), `spotlightCategory`/`clearCategory` a *column of the
+ * table*. A `to` of the value axis's `range` or `ticks` tweens from the domain
+ * as drawn, so an auto axis rescales the columns continuously.
  */
-let BarChart = class BarChart extends Node2D {
-    static { BarChart_1 = this; }
-    // ---- Part handles (built in the constructor) --------------------------
-    vAxis;
-    cAxis;
-    legend = null;
-    barSets = [];
-    /** The plot panel: the box the grid, the columns and the border all share. */
-    plotRect;
-    /**
-     * `this.theme` read back through its *resolved* shape — the same
-     * loose-declared/resolved-stored idiom as a shape's `fill`/`stroke`, and as
-     * the line chart's own theme.
-     */
-    get resolvedTheme() {
-        return this.theme;
-    }
-    // ---- Derived scale ----------------------------------------------------
-    /** Fallback marker count when the value axis states no ticks. */
-    static DEFAULT_MARKERS = 5;
-    get valueScale() {
-        const divisions = (this.valueAxis.ticks?.length ?? BarChart_1.DEFAULT_MARKERS) - 1;
-        return resolveBarScale(this.data, this.series, this.stacked, this.valueAxis.range, divisions);
-    }
-    /**
-     * A value written down as this chart's value axis says — the axis ticks and
-     * the figures printed on the columns both read through here, so the two
-     * cannot disagree about what a number looks like.
-     */
-    valueLabel(value) {
-        const pattern = this.valueAxis.format;
-        return pattern === undefined
-            ? formatMarker(value, markerStep(this.resolvedMarkers))
-            : formatNumber(value, pattern);
-    }
-    /** The value axis ticks: the explicit ones, else five across the scale. */
-    get resolvedMarkers() {
-        return (this.valueAxis.ticks ??
-            markerValues(this.valueScale, BarChart_1.DEFAULT_MARKERS - 1));
-    }
-    // ---- Plot geometry ------------------------------------------------------
-    /**
-     * The plot panel's size, **as laid out**.
-     *
-     * The value axis is `width: "hug"` and the category row and legend are as tall
-     * as their text, so the panel's real box is whatever the layout makes it. An
-     * estimate built from gutter constants never matched it, and the columns sat a
-     * few percent off the grid line they were supposed to end on. Asking the panel
-     * is exact by construction: the grid, the columns and the border all resolve
-     * against the one box they are drawn in. Zero until the first layout pass, like
-     * any other `layoutBounds` read; the bindings that call this re-run on the
-     * next frame.
-     */
-    plotSize() {
-        const { width, height } = this.plotRect.layoutBounds;
-        return { w: width, h: height };
-    }
-    /** Map a value onto the plot's **centred** pixel space (origin at its centre, y-up). */
-    valueToY(value) {
-        const [min, max] = this.valueScale;
-        const { h } = this.plotSize();
-        if (max <= min)
-            return -h / 2;
-        return ((value - min) / (max - min) - 0.5) * h;
-    }
-    /**
-     * Pixel y of the line every column grows from.
-     *
-     * Zero, clamped onto the scale — so an author who *did* crop the axis to
-     * `[40, 100]` gets columns rising from the plot floor rather than from a
-     * baseline off the bottom of the panel.
-     */
-    get baselinePx() {
-        const [min, max] = this.valueScale;
-        return this.valueToY(Math.min(Math.max(0, min), max));
-    }
-    // ---- Slot geometry ----------------------------------------------------
-    /** Width of one category's slot across the plot. */
-    get slotWidth() {
-        const n = this.data.length;
-        return n > 0 ? this.plotSize().w / n : 0;
-    }
-    /** Centre x of category `i`'s slot, in the plot's centred space. */
-    slotCenter(index) {
-        return -this.plotSize().w / 2 + this.slotWidth * (index + 0.5);
-    }
-    /** The part of a slot the columns fill — the rest is the channel between categories. */
-    get slotInner() {
-        return this.slotWidth * clampUnit(this.resolvedTheme.bar.slotFill);
-    }
-    /** Series `i`'s live share of the slot; 0 once it has been hidden. */
-    weightAt(index) {
-        return Math.max(0, this.weights[index] ?? 1);
-    }
-    /** Total live share across the series — the slot's inner width divides by this. */
-    get totalWeight() {
-        let sum = 0;
-        for (let i = 0; i < this.series.length; i++)
-            sum += this.weightAt(i);
-        return sum > 0 ? sum : 1;
-    }
-    /** Live share of every series *before* `index`, for the grouped offset. */
-    weightBefore(index) {
-        let sum = 0;
-        for (let i = 0; i < index; i++)
-            sum += this.weightAt(i);
-        return sum;
-    }
-    /**
-     * Series `index`'s columns, mapped into the plot's centred pixel space.
-     *
-     * Both modes come out of one walk over the rows: a grouped series divides the
-     * slot with its siblings and every column runs from zero, a stacked one takes
-     * the whole slot and each column runs from the running total below it. The
-     * live {@link weights} scale the grouped widths and the stacked contributions
-     * alike, which is what lets `hideSeries` reflow rather than punch a hole.
-     */
-    seriesBars(index) {
-        const series = this.series[index];
-        if (!series)
-            return [];
-        const stacked = this.stacked;
-        const inner = this.slotInner;
-        const gap = this.resolvedTheme.bar.groupGap;
-        const unit = inner / this.totalWeight;
-        const weight = this.weightAt(index);
-        return this.data.map((row, rowIndex) => {
-            // The stack is built from the *live* contributions, so a series fading out
-            // lowers the segments above it as it goes instead of dropping them by a
-            // step when it finally switches off. A grouped row needs no such scaling —
-            // there its weight moves the column's width, not its length.
-            const spans = barSpans(stacked ? this.weightedRow(row) : row, this.series, stacked);
-            const span = spans[index] ?? { from: 0, to: 0, value: 0 };
-            const cap = stacked ? stackCapIndex(row, this.series) : index;
-            const slotLeft = this.slotCenter(rowIndex) - inner / 2;
-            const x = stacked
-                ? this.slotCenter(rowIndex)
-                : slotLeft + unit * this.weightBefore(index) + (unit * weight) / 2;
-            const width = stacked
-                ? inner
-                : Math.max(0, unit * weight - (this.series.length > 1 ? gap : 0));
-            return {
-                x,
-                width,
-                from: this.valueToY(span.from),
-                to: this.valueToY(span.to),
-                round: cap === index,
-                // The figure printed is the row's own value, not the weighted one — a
-                // series on its way out should not be seen counting down.
-                value: num(row, series.field),
-            };
-        });
-    }
-    /**
-     * `row` with each series' value scaled by that series' live {@link weights}
-     * entry — what the stacked spans are measured from.
-     */
-    weightedRow(row) {
-        const scaled = { ...row };
-        this.series.forEach((s, i) => {
-            const value = row[s.field];
-            if (typeof value === "number")
-                scaled[s.field] = value * this.weightAt(i);
-        });
-        return scaled;
-    }
-    /**
-     * How far each category is dimmed by the spotlight, one entry per row —
-     * 1 while nothing is spotlit, falling to the theme's `dimOpacity` for every
-     * category but the chosen one as the reveal climbs.
-     */
-    categoryDims() {
-        const focus = clampUnit(this.spotlightReveal);
-        const dim = this.resolvedTheme.spotlight.dimOpacity;
-        const chosen = this.spotlight;
-        return this.data.map((_, i) => focus <= 0 || chosen === i ? 1 : 1 - (1 - dim) * focus);
-    }
-    // ---- Build ------------------------------------------------------------
-    constructor(props) {
-        super(props);
-        // The whole chart is composed from plain props/`data` — no context needed,
-        // so the parts are built here (super() applied the props above). Everything
-        // a *leaf* reads live in `renderSelf` — each series' geometry, paint and
-        // dim, the panel's fill, the border's stroke — is passed as a closure rather
-        // than a snapshot, so `chart.to({ theme })` and
-        // `chart.to({ valueAxis: { range } })` genuinely animate the drawn chart.
-        const enabled = this.series.map((s) => s.enabled ?? true);
-        this.weights = enabled.map((on) => (on ? 1 : 0));
-        const showLegend = props?.showLegend !== false;
-        const showValues = props?.showValues === true;
-        this.vAxis = new VerticalAxis({
-            range: () => this.valueScale,
-            markers: () => this.resolvedMarkers,
-            axis: () => this.resolvedTheme.yAxis,
-            label: this.valueAxis.label ?? "",
+export const BarChart = component2d({
+    key: "barChart",
+    state: {
+        data: fresh(() => []),
+        categoryField: "",
+        series: fresh(() => []),
+        stacked: false,
+        valueAxis: Types.custom({}, { resolve: resolveAxisDomain, lerp: lerpAxisEntry }),
+        categoryAxis: Types.custom({}, { resolve: resolveAxisDomain, lerp: lerpAxisDomain }),
+        theme: Types.custom(DEFAULT_BAR_CHART_THEME, { resolve: resolveBarChartTheme, lerp: lerpBarChartTheme }),
+        /**
+         * Global rise of every column in `[0, 1]`, measured about the baseline: 0
+         * collapses them all onto it, 1 draws them at full length.
+         */
+        growth: 1,
+        /**
+         * How much of the slot each series claims, one entry per series: a weight
+         * rather than a switch, so hiding one is the others widening into the space.
+         * Seeded from each series' `enabled`.
+         */
+        weights: fresh(() => []),
+        /** The category spotlit, or `null` for none. The choice snaps; `spotlightReveal` is the animation. */
+        spotlight: Types.custom(null),
+        /** How far the category spotlight is drawn in, `[0, 1]`. */
+        spotlightReveal: 0,
+        /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
+        showLegend: Types.boolean(true, { animatable: false }),
+        /** Read as the chart is built: whether each column prints the figure it plots. */
+        showValues: Types.boolean(false, { animatable: false }),
+        /** Whether each series' columns are drawn: on for every frame a show or hide covers, off once a hide lands. */
+        showing: Types.custom([], { private: true }),
+    },
+    defaults: {
+        // Its parts fill it; a node made of them would hug them.
+        width: "fill",
+        height: "fill",
+        weights: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),
+        showing: (state) => state.series.map((s) => s.enabled ?? true),
+    },
+    children: (state) => {
+        const theme = () => state.theme;
+        const domain = () => barChartDomain(state);
+        let plot;
+        // Before the panel is built or laid out it has no size, and the columns map onto nothing.
+        const plotSize = () => laidOutSize(plot);
+        const captioned = state.showValues === true;
+        const vAxis = new VerticalAxis({
+            range: () => domain().range,
+            markers: () => domain().ticks,
+            captions: () => {
+                const d = domain();
+                return d.ticks.map((value) => valueLabel(state, d, value));
+            },
+            axis: () => theme().yAxis,
+            label: state.valueAxis.label ?? "",
             width: "hug",
             height: "fill",
         });
-        this.vAxis.labelFor = (value) => this.valueLabel(value);
-        this.cAxis = new CategoryAxis({
-            categories: barCategories(this.data, this.categoryField),
-            axis: () => this.resolvedTheme.xAxis,
-            label: this.categoryAxis.label ?? "",
-            dims: () => this.categoryDims(),
+        const cAxis = new CategoryAxis({
+            categories: barCategories(state.data, state.categoryField),
+            axis: () => theme().xAxis,
+            label: state.categoryAxis.label ?? "",
+            dims: () => categoryDims(state),
             width: "fill",
             height: "hug",
         });
-        this.barSets = this.series.map((s, i) => new ChartBars({
-            bars: () => this.seriesBars(i),
-            baseline: () => this.baselinePx,
-            fill: () => resolveBarFill(this.resolvedTheme.seriesFills, s, i),
-            barStroke: () => this.resolvedTheme.bar.stroke,
-            barShadow: () => this.resolvedTheme.bar.shadow,
-            cornerRadius: () => this.resolvedTheme.bar.cornerRadius,
-            growth: () => this.growth,
-            dims: () => this.categoryDims(),
-            showValues,
-            valueStyle: this.resolvedTheme.valueStyle,
-            enabled: enabled[i],
+        const barSets = state.series.map((s, i) => new ChartBars({
+            bars: () => seriesBars(state, i, plotSize(), captioned),
+            baseline: () => baselinePx(domain(), plotSize()),
+            fill: () => resolveBarFill(theme().seriesFills, s, i),
+            barStroke: () => theme().bar.stroke,
+            barShadow: () => theme().bar.shadow,
+            cornerRadius: () => theme().bar.cornerRadius,
+            growth: () => state.growth,
+            dims: () => categoryDims(state),
+            showValues: captioned,
+            valueStyle: state.theme.valueStyle,
+            enabled: () => state.showing[i] ?? (s.enabled ?? true),
         }));
-        // The figures on the columns are the same numbers the value axis ticks, so
-        // they read through the same format.
-        for (const set of this.barSets)
-            set.labelFor = (value) => this.valueLabel(value);
-        if (showLegend) {
-            this.legend = new ChartLegend({
-                series: this.series,
-                swatches: () => this.series.map((s, i) => resolveBarFill(this.resolvedTheme.seriesFills, s, i)),
-                legend: () => this.resolvedTheme.legend,
-            });
+        const below = [cAxis];
+        if (state.showLegend !== false) {
+            below.push(new ChartLegend({
+                series: state.series,
+                swatches: () => state.series.map((s, i) => resolveBarFill(theme().seriesFills, s, i)),
+                legend: () => theme().legend,
+                // The row's spacing is the theme's as the chart was built, like the
+                // entries' type and chips: a theme tween re-paints the swatches only.
+                gap: state.theme.legend.itemGap,
+                padding: state.theme.legend.padding,
+            }));
         }
-        this.plotRect = new Rect({
+        plot = new Rect({
             clip: true,
             children: [
                 new ChartCanvas({
-                    fill: () => this.resolvedTheme.plotArea.fill,
-                    shadow: () => this.resolvedTheme.plotArea.shadow,
-                    xGridStroke: () => this.resolvedTheme.xAxis.lineStyle,
-                    yGridStroke: () => this.resolvedTheme.yAxis.lineStyle,
-                    // No vertical rules: the horizontal axis is categorical, so there is
-                    // no numeric position along it for a grid line to mark. The channel
-                    // between slots does that job, and better.
+                    fill: () => theme().plotArea.fill,
+                    shadow: () => theme().plotArea.shadow,
+                    xGridStroke: () => theme().xAxis.lineStyle,
+                    yGridStroke: () => theme().yAxis.lineStyle,
+                    // No vertical rules: the horizontal axis is categorical, so there is no
+                    // numeric position along it for a grid line to mark.
                     xMarkers: [],
-                    yMarkers: () => this.resolvedMarkers,
+                    yMarkers: () => domain().ticks,
                     xExtent: () => [0, 1],
-                    yExtent: () => this.valueScale,
-                }),
-                ...this.barSets,
-                new ChartBorder({
-                    stroke: () => this.resolvedTheme.plotArea.stroke,
+                    yExtent: () => domain().range,
                 }),
+                ...barSets,
+                new ChartBorder({ stroke: () => theme().plotArea.stroke }),
             ],
         });
-        // Invisible twin of the value axis, reserving the same left gutter under the
-        // plot so the category row starts at the plot's left edge rather than the
-        // chart's — and so a caption lands under the columns it names.
-        const gutterSpacer = new VerticalAxis({
+        const gutter = new VerticalAxis({
             opacity: 0,
-            range: () => this.valueScale,
-            markers: () => this.resolvedMarkers,
-            axis: () => this.resolvedTheme.yAxis,
-            label: this.valueAxis.label ?? "",
+            range: () => domain().range,
+            markers: () => domain().ticks,
+            axis: () => theme().yAxis,
+            label: state.valueAxis.label ?? "",
             width: "hug",
             height: 0,
         });
-        const below = [this.cAxis];
-        if (this.legend)
-            below.push(this.legend);
-        this.add(new Rect({ flow: "vertical",
-            width: "fill",
-            height: "fill",
-            // See {@link TOP_HEADROOM}.
-            padding: { top: TOP_HEADROOM },
-            children: [
-                new Rect({ flow: "horizontal",
-                    height: "fill",
-                    width: "fill",
-                    children: [this.vAxis, this.plotRect],
-                }),
-                new Rect({ flow: "horizontal",
-                    width: "fill",
-                    children: [
-                        gutterSpacer,
-                        new Rect({ flow: "vertical", width: "fill", gap: 20, children: below }),
-                    ],
-                }),
-            ],
-        }));
-    }
-    // ---- Orchestrated entrance --------------------------------------------
-    /**
-     * Prime every part at its pre-entrance state — axis markers and captions
-     * shifted and transparent, columns collapsed onto the baseline, legend dropped
-     * and transparent.
-     *
-     * Called by {@link enter} before its first frame so nothing flashes ahead of
-     * its beat. Idempotent, and public so a scene can hide a chart ahead of time
-     * without starting the entrance.
-     */
-    arm() {
-        this.vAxis.arm();
-        this.cAxis.arm();
-        this.growth = 0;
-        this.legend?.set({ opacity: 0, y: -LEGEND_SLIDE });
-    }
-    /**
-     * Animate the whole chart in: the two axes stagger their markers and captions
-     * in, the columns rise from the baseline, and the legend fades up last.
-     *
-     * `duration` is the **whole** entrance. The phases are shares of it, not
-     * multiples — a command that declares 1.4 seconds has to take 1.4 seconds,
-     * because that is the slot the timeline lays out for it, the length its
-     * parallel siblings are timed against, and its contribution to the scene's own
-     * duration.
-     */
-    enter(args) {
-        const { duration } = args;
-        const easing = args.easing ?? easeOut();
-        this.arm();
-        return asCommand(sequenceOf(together(this.vAxis.enter({ data: { slide: 24 }, duration: duration * AXES_SHARE, easing }), this.cAxis.enter({ data: { slide: 24 }, duration: duration * AXES_SHARE, easing })), this.riseBars(duration * BARS_SHARE, easing), 
-        // Without a legend the beat is still its share of the whole, so the
-        // entrance ends exactly when it was laid out to.
-        this.legend
-            ? this.legend.to({ data: { opacity: 1, y: 0 }, duration: duration * LEGEND_SHARE, easing })
-            : hold(duration * LEGEND_SHARE)), duration);
-    }
-    /**
-     * Move props to new values; a restated value-axis `range` or `ticks` tweens
-     * from the domain as drawn, so an auto axis (the default) rescales the columns
-     * continuously instead of cutting at the midpoint of the move.
-     */
-    to(args) {
-        const data = (args.data ?? {});
-        const drawn = {
-            ...this.valueAxis,
-            range: this.valueScale,
-            ticks: this.resolvedMarkers,
-        };
-        const target = axisTweenTarget(drawn, data.valueAxis);
-        if (!target)
-            return super.to(args);
-        const { valueAxis: _valueAxis, ...rest } = data;
-        const axis = this.command((t) => ({ valueAxis: lerpAxisDomain(drawn, target, t) }), args.duration, args.easing);
-        if (Object.keys(rest).length === 0)
-            return axis;
-        return asCommand(together(super.to({ ...args, data: rest }), axis), args.duration);
-    }
-    /** Tween {@link growth} `0 → 1`, raising every column about the baseline. */
-    riseBars(duration, easing) {
-        // No priming to 0 first: the value at `t` is a function of `t`, so a repeat
-        // call re-raises by definition rather than by having reset something.
-        return this.command((t) => ({ growth: t }), duration, easing);
-    }
-    /**
-     * Show series `index`: bring its columns back, the group reflowing to make
-     * room as they arrive, in lockstep with its legend entry growing in.
-     */
-    showSeries(args) {
-        const { seriesIndex = 0 } = args.data ?? {};
-        return this.toggleSeries(seriesIndex, 1, args.duration ?? 0.35, args.easing ?? easeOut());
-    }
-    /**
-     * Hide series `index`: its columns narrow away (or, stacked, sink out of the
-     * stack) while the rest of the group widens into the space, its legend entry
-     * shrinking beside them — the mirror of {@link showSeries}.
-     */
-    hideSeries(args) {
-        const { seriesIndex = 0 } = args.data ?? {};
-        return this.toggleSeries(seriesIndex, 0, args.duration ?? 0.35, args.easing ?? easeOut());
-    }
-    /**
-     * Move series `index`'s slot share to `target`, with its legend entry.
-     *
-     * One method for both directions, so the pair cannot drift apart. `enabled`
-     * rides in the same value as the weight rather than being set before or after,
-     * which is what makes arriving at a time backwards show what arriving forwards
-     * does.
-     */
-    toggleSeries(index, target, duration, easing) {
-        const bars = this.barSets[index];
-        if (!bars)
-            return asCommand(hold(duration));
-        return asCommand(together(this.tweenWeight(index, target, duration, easing), drive(duration, (t) => {
-            const share = t >= 1 ? target : Math.max(target, 1 - t);
-            bars.set({ enabled: target > 0 || share > 0 });
-        }), ...(this.legend
-            ? [
-                target > 0
-                    ? this.legend.showSeries({ data: { index }, duration, easing })
-                    : this.legend.hideSeries({ data: { index }, duration, easing }),
-            ]
-            : [])), duration);
-    }
-    /**
-     * Fade out every other series — its columns **and its legend entry** — to
-     * focus attention on `index`, which comes back to full. Nothing moves, so the
-     * group doesn't reflow.
-     */
-    spotlightSeries(args) {
-        const { seriesIndex = 0 } = args.data ?? {};
-        const duration = args.duration ?? 0.35;
-        const easing = args.easing ?? easeOut();
-        const dim = this.resolvedTheme.spotlight.dimOpacity;
-        return asCommand(together(...this.barSets.map((bars, i) => bars.to({ data: { opacity: i === seriesIndex ? 1 : dim }, duration, easing })), ...(this.legend
-            ? [this.legend.spotlightSeries({ data: { index: seriesIndex }, duration, easing })]
-            : [])), duration);
-    }
-    /** Ease series `index`'s slot share toward `target`, reflowing the group. */
-    tweenWeight(index, target, duration, easing) {
-        // Read through `weightAt` rather than off the array, so a chart whose stored
-        // weights are short (or absent) still tweens from the 1 it is drawing at.
-        const from = this.series.map((_, i) => this.weightAt(i));
-        const start = from[index] ?? 1;
-        if (start === target)
-            return hold(duration);
-        return drive(duration, (t) => {
-            const next = [...from];
-            next[index] = start + (target - start) * easing(t);
-            this.weights = next;
-        });
-    }
-    // ---- Per-category ------------------------------------------------------
-    /**
-     * Spotlight one **category** — one column of the table rather than one series:
-     * every other category's bars and its caption fade to the theme's
-     * `dimOpacity`, and the chosen one stays full.
-     *
-     * The counterpart of the line chart's `spotlightRegion`, and the same shape of
-     * thing: it picks out a slice of the plot without changing what is drawn.
-     * Calling it while another category is already lit moves the focus directly —
-     * only the dimming changes, so there is nothing to retract first.
-     */
-    spotlightCategory(args) {
-        const { categoryIndex = 0 } = args.data ?? {};
-        const duration = args.duration ?? 0.4;
-        const easing = args.easing ?? easeOut();
-        if (categoryIndex < 0 || categoryIndex >= this.data.length)
-            return this.holdSpotlight(duration);
-        const from = this.spotlightReveal;
-        // Which category is lit is part of the value, set from the first frame: the
-        // focus moves directly, so unlike the line chart's region there is nothing to
-        // retract before it.
-        return this.command((t) => ({ spotlight: categoryIndex, spotlightReveal: from + (1 - from) * t }), duration, easing);
-    }
-    /**
-     * Drop the category spotlight, bringing every category back to full. A no-op
-     * when nothing is lit — but it still takes its slot on the timeline, for the
-     * reason `LineChart.clearRegion` does.
-     */
-    clearCategory(args) {
-        const duration = args.duration ?? 0.4;
-        const easing = args.easing ?? easeOut();
-        const from = this.spotlightReveal;
-        if (from === 0)
-            return this.holdSpotlight(duration);
-        // The lit category is held until the fade lands — cleared at `t === 1` rather
-        // than up front, or there would be nothing left to fade.
-        return this.command((t) => t >= 1
-            ? { spotlight: null, spotlightReveal: 0 }
-            : { spotlightReveal: from * (1 - t) }, duration, easing);
-    }
-    /** The no-op both of the above return — see {@link hold}. */
-    holdSpotlight(duration) {
-        return this.command(() => ({}), duration);
-    }
-};
-__decorate([
-    property({ default: () => [] })
-], BarChart.prototype, "data", void 0);
-__decorate([
-    property({ default: "" })
-], BarChart.prototype, "categoryField", void 0);
-__decorate([
-    property({ default: () => [] })
-], BarChart.prototype, "series", void 0);
-__decorate([
-    property({ default: false })
-], BarChart.prototype, "stacked", void 0);
-__decorate([
-    property({
-        default: {},
-        mapper: resolveAxisDomain,
-        tween: lerpAxisDomain,
-    })
-], BarChart.prototype, "valueAxis", void 0);
-__decorate([
-    property({
-        default: {},
-        mapper: resolveAxisDomain,
-        tween: lerpAxisDomain,
-    })
-], BarChart.prototype, "categoryAxis", void 0);
-__decorate([
-    property({
-        default: DEFAULT_BAR_CHART_THEME,
-        mapper: resolveBarChartTheme,
-        tween: lerpBarChartTheme,
-    })
-], BarChart.prototype, "theme", void 0);
-__decorate([
-    property({ default: 1 })
-], BarChart.prototype, "growth", void 0);
-__decorate([
-    property({ default: () => [] })
-], BarChart.prototype, "weights", void 0);
-__decorate([
-    property({ default: null })
-], BarChart.prototype, "spotlight", void 0);
-__decorate([
-    property({ default: 0 })
-], BarChart.prototype, "spotlightReveal", void 0);
-__decorate([
-    command()
-], BarChart.prototype, "enter", null);
-__decorate([
-    command({ args: [{ key: "seriesIndex", kind: "series", default: 0, min: 0, step: 1 }] })
-], BarChart.prototype, "showSeries", null);
-__decorate([
-    command({ args: [{ key: "seriesIndex", kind: "series", default: 0, min: 0, step: 1 }] })
-], BarChart.prototype, "hideSeries", null);
-__decorate([
-    command({ args: [{ key: "seriesIndex", kind: "series", default: 0, min: 0, step: 1 }] })
-], BarChart.prototype, "spotlightSeries", null);
-__decorate([
-    command({ args: [{ key: "categoryIndex", kind: "number", default: 0, min: 0, step: 1 }] })
-], BarChart.prototype, "spotlightCategory", null);
-__decorate([
-    command()
-], BarChart.prototype, "clearCategory", null);
-BarChart = BarChart_1 = __decorate([
-    node({
-        key: "barChart",
-        parentKey: "node",
-        forkable: true,
-        layout: {
-            children: "freeform",
-            defaultWidthMode: "fixed",
-            defaultHeightMode: "fixed",
-            acceptsChildren: true,
+        return asParts([
+            ...state.children,
+            cartesianFrame({ axis: vAxis, plot, gutter, below }),
+        ]);
+    },
+    commands: {
+        /**
+         * Animate the whole chart in: the two axes stagger their markers and
+         * captions in, the columns rise from the baseline, and the legend fades up
+         * last. Its first frame arms every part: markers and captions shifted and
+         * transparent, columns collapsed, the legend dropped and transparent.
+         * `duration` is the **whole** entrance; the beats are shares of it.
+         */
+        enter: {
+            args: {},
+            easing: easeOut(),
+            run: (timeline, _state, children) => {
+                const parts = partsOf(children);
+                if (!parts)
+                    return timeline.wait(timeline.duration);
+                const duration = timeline.duration;
+                const axes = duration * AXES_SHARE;
+                const rise = duration * BARS_SHARE;
+                const { legend } = parts;
+                const at0 = (piece) => ({ at: 0, duration: 0, piece });
+                // Without a legend the beat is still its share of the whole.
+                return beats(timeline, [
+                    at0(timeline.animate(() => ({ growth: 0 }))),
+                    ...(legend ? [at0(legend.to({ opacity: 0, y: -LEGEND_SLIDE }))] : []),
+                    { at: 0, duration: axes, piece: parts.vAxis.run("enter", { slide: 24 }) },
+                    { at: 0, duration: axes, piece: parts.cAxis.run("enter", { slide: 24 }) },
+                    // No priming to 0 first: the value at `t` is a function of `t`.
+                    { at: axes, duration: rise, piece: timeline.animate((t) => ({ growth: t })) },
+                    ...(legend ? [{ at: axes + rise, duration: duration * LEGEND_SHARE, piece: legend.to({ opacity: 1, y: 0 }) }] : []),
+                ]);
+            },
+        },
+        /** Show series `index`: its columns come back, the group reflowing to make room, with its legend entry. */
+        showSeries: {
+            args: { seriesIndex: SERIES_ARG },
+            easing: easeOut(),
+            run: (timeline, state, children) => toggling(timeline, state, children, timeline.args.seriesIndex, 1),
+        },
+        /**
+         * Hide series `index`: its columns narrow away (or, stacked, sink out of the
+         * stack) while the rest of the group widens into the space — the mirror of
+         * `showSeries`.
+         */
+        hideSeries: {
+            args: { seriesIndex: SERIES_ARG },
+            easing: easeOut(),
+            run: (timeline, state, children) => toggling(timeline, state, children, timeline.args.seriesIndex, 0),
+        },
+        /**
+         * Fade every other series — its columns **and its legend entry** — to focus
+         * on `index`, which comes back to full. Nothing moves, so the group doesn't
+         * reflow.
+         */
+        spotlightSeries: {
+            args: { seriesIndex: SERIES_ARG },
+            easing: easeOut(),
+            run: (timeline, state, children) => {
+                const parts = partsOf(children);
+                if (!parts)
+                    return timeline.wait(timeline.duration);
+                const index = timeline.args.seriesIndex;
+                const dim = state.theme.spotlight.dimOpacity;
+                return timeline.together([
+                    ...parts.bars.map((bars, i) => bars.to({ opacity: i === index ? 1 : dim })),
+                    ...(parts.legend ? [parts.legend.run("spotlightSeries", { index })] : []),
+                ]);
+            },
+        },
+        /**
+         * Spotlight one **category**: every other category's columns and caption
+         * fade to the theme's `dimOpacity`. Called while another is lit, the focus
+         * moves directly: only the dimming changes, so nothing retracts first. A
+         * category that is not there takes its slot and changes nothing.
+         */
+        spotlightCategory: {
+            args: { categoryIndex: Types.number(0, { min: 0, step: 1 }) },
+            easing: easeOut(),
+            run: (timeline, state) => {
+                const index = timeline.args.categoryIndex;
+                if (index < 0 || index >= state.data.length)
+                    return timeline.wait(timeline.duration);
+                const from = state.spotlightReveal;
+                return timeline.animate((t) => ({ spotlight: index, spotlightReveal: from + (1 - from) * t }));
+            },
         },
-        seed: {
-            width: 760,
-            height: 460,
+        /**
+         * Drop the category spotlight, every category back to full. The lit
+         * category is held until the fade lands; a no-op when nothing is lit, which
+         * still takes its slot.
+         */
+        clearCategory: {
+            args: {},
+            easing: easeOut(),
+            run: (timeline, state) => {
+                const from = state.spotlightReveal;
+                if (from === 0)
+                    return timeline.wait(timeline.duration);
+                const lit = state.spotlight;
+                return timeline.animate((t) => (t >= 1 ? { spotlight: null, spotlightReveal: 0 } : { spotlight: lit, spotlightReveal: from * (1 - t) }));
+            },
         },
-    })
-], BarChart);
-export { BarChart };
+    },
+});
 //# sourceMappingURL=bar-chart.js.map