@motionscript/charts 0.1.0-alpha.0 → 0.1.0-alpha.10

package/dist/line-chart/line-chart.js

@@ -1,50 +1,178 @@
-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 LineChart_1;
-import { command, node, Node2D, Rect, easeOut, property, } from "@motionscript/core";
+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 { SPOTLIGHT_DIM, formatMarker, lerpAxisDomain, markerValues, resolveAxisDomain, resolveSeriesFill, resolveSeriesStroke, } from "../kit/shared.js";
-import { formatNumber } from "@motionscript/core/component";
+import { SPOTLIGHT_DIM, formatMarker, lerpAxisDomain, lerpAxisEntry, markerStep, markerValues, resolveAxisDomain, resolveSeriesFill, resolveSeriesStroke, settleAxisDomain, } from "../kit/shared.js";
 import { ChartLine } from "./chart-line.js";
 import { ChartRegion } from "./chart-region.js";
 import { HorizontalAxis } from "./horizontal-axis.js";
 import { DEFAULT_CHART_THEME, lerpChartTheme, resolveChartTheme, resolveRegionBox, resolveYScale, seriesPoints, } from "./shared.js";
 import { resolveXScale } from "./x-scale.js";
-import { hold, sequence as sequenceOf, together } from "@motionscript/core/component";
-/**
- * Headroom above the plot, in px.
- *
- * Two jobs, and the second is why it is real padding on the composition rather
- * than a number the point-mapping math imagines: a series peaking at `yMax`
- * isn't flush to the top edge, **and** the top y-marker — which is centred on
- * that top grid line — has somewhere to be. Without it the marker's upper half
- * is drawn above the chart's own box, outside the rectangle the editor draws
- * around the node.
- */
-const TOP_HEADROOM = 24;
 /**
  * The argument every per-series command takes: an index into `series`. Its own
  * kind rather than `number` so a host can offer the series by name.
  */
-const SERIES_ARG = { key: "seriesIndex", kind: "series", default: 0, min: 0, step: 1 };
+const SERIES_ARG = Types.custom(0, { kind: "series", min: 0, step: 1 });
+/** One argument, two controls: the commands take a `PlotRegion`, so the x and y spans a host draws are declared inside it. */
+const REGION_ARG = Types.custom(undefined, {
+    kind: "region",
+    properties: {
+        x: { kind: "range", default: true, defaultMin: 0, defaultMax: 100 },
+        y: { kind: "range", default: false, defaultMin: 0, defaultMax: 100 },
+    },
+});
 /** How far the legend starts below its slot when it enters, in px. */
 const LEGEND_SLIDE = 20;
+/** Fallback marker count when neither axis's ticks are given. */
+const DEFAULT_MARKERS = 5;
 /**
- * How {@link LineChart.enter} divides its duration between its three beats: the
- * axes arriving, the lines tracing, and the legend coming up. Shares of the
- * whole, so they must sum to 1 — the entrance takes exactly the time it was
- * given (see the note on `enter`).
+ * How `enter` divides its duration between its three beats: the axes arriving,
+ * the lines tracing, and the legend coming up. Shares of the whole, so they must
+ * sum to 1 — the entrance takes exactly the time it was given.
  */
 const AXES_SHARE = 0.35;
 const LINES_SHARE = 0.5;
 const LEGEND_SHARE = 0.15;
+/**
+ * What the x column *is* — a number, an instant, or a place in the file — and
+ * with it how each row is positioned, ticked and captioned. See `x-scale.ts`.
+ */
+function columnOf(s, format = s.xAxis.format) {
+    return resolveXScale(s.data, s.xField, format);
+}
+/**
+ * The horizontal axis with its range and ticks resolved: the explicit ones, else
+ * the column's extent and five ticks across it, asked of the column because only
+ * a numeric one has round numbers between its samples.
+ */
+function drawnX(s, domain) {
+    const column = columnOf(s, domain.format);
+    const range = domain.range ?? column.extent;
+    return { ...domain, range, ticks: domain.ticks ?? column.ticks(range, DEFAULT_MARKERS - 1) };
+}
+/**
+ * The vertical axis with its range and ticks resolved. Auto-ranging steps into
+ * one fewer segment than the intended marker count, so the tidy bounds frame the
+ * ticks the axis draws.
+ */
+function drawnY(s, domain) {
+    const divisions = (domain.ticks?.length ?? DEFAULT_MARKERS) - 1;
+    const range = resolveYScale(s.data, s.series, domain.range, divisions);
+    return { ...domain, range, ticks: domain.ticks ?? markerValues(range, DEFAULT_MARKERS - 1) };
+}
+/** The last domains worked out from each data array, and what else they were read from. */
+const domainsDrawn = new WeakMap();
+/** Both axes as a line chart draws them now, an auto range or tick row read back as itself. */
+export function lineChartDomains(s) {
+    const { data, xField, xAxis, yAxis, series } = s;
+    const kept = domainsDrawn.get(data);
+    if (kept && kept.xField === xField && kept.xAxis === xAxis && kept.yAxis === yAxis && kept.series === series) {
+        return kept.domains;
+    }
+    const domains = {
+        x: settleAxisDomain(xAxis, (d) => drawnX(s, d)),
+        y: settleAxisDomain(yAxis, (d) => drawnY(s, d)),
+    };
+    domainsDrawn.set(data, { xField, xAxis, yAxis, series, domains });
+    return domains;
+}
+/**
+ * Map one series' data points into the plot's **centred** pixel space (origin at
+ * the plot centre, y-up): x runs `[-w/2, +w/2]`, y runs `[-h/2, +h/2]`.
+ */
+function seriesPixels(s, domains, index, plot) {
+    const series = s.series[index];
+    if (!series)
+        return [];
+    const points = seriesPoints(s.data, columnOf(s), series);
+    if (points.length === 0)
+        return [];
+    const { width: w, height: h } = plot;
+    const [xMin, xMax] = domains.x.range;
+    const [yMin, yMax] = domains.y.range;
+    const xToPx = (x) => (xMax <= xMin ? 0 : ((x - xMin) / (xMax - xMin) - 0.5) * w);
+    const yToPx = (y) => (yMax <= yMin ? 0 : ((y - yMin) / (yMax - yMin) - 0.5) * h);
+    // `seriesPoints` already sorted them along x.
+    return points.map(([x, y]) => ({ x: xToPx(x), y: yToPx(y) }));
+}
+/** `region` mapped into the plot's centred pixel space, against the live scales, so it travels with a zoom. */
+function regionBox(s, domains, plot) {
+    const { width: w, height: h } = plot;
+    return resolveRegionBox(s.region, { left: -w / 2, right: w / 2, bottom: -h / 2, top: h / 2 }, domains.x.range, domains.y.range);
+}
+/**
+ * Whether a call-out is authored at all. Not whether it resolves to pixels: a
+ * command is built before the first layout, and a region on a chart not yet
+ * measured is a real one. A region bounding neither axis is none, as `null` is.
+ */
+function hasCallout(s) {
+    const region = s.region;
+    return region != null && (region.x !== undefined || region.y !== undefined);
+}
+/** The `region` a document handed a command, or `{}`: a command is added before its arguments are filled in. */
+function regionArg(region) {
+    return region != null && typeof region === "object" ? region : {};
+}
+/** A range read as a span, whichever way round the author wrote it. */
+function span([a, b]) {
+    return a <= b ? [a, b] : [b, a];
+}
+/**
+ * Rescale an axis to `range`, keeping the tick *count* it already has, so each
+ * marker slides from its old value to its new one instead of the row popping.
+ */
+function rescale(range, ticks) {
+    const to = span(range);
+    return { range: to, ticks: markerValues(to, Math.max(2, ticks.length) - 1) };
+}
+/** The axis writes of a move from `from` toward `to` at `t`. */
+function axesAt(from, to, t) {
+    return {
+        ...(to.x && { xAxis: lerpAxisDomain(from.x, to.x, t) }),
+        ...(to.y && { yAxis: lerpAxisDomain(from.y, to.y, t) }),
+    };
+}
+/** The parts a line chart's commands drive, found through its children. */
+function partsOf(children) {
+    const frame = cartesianViews(children);
+    if (!frame)
+        return null;
+    const hAxis = frame.below.find(HorizontalAxis.is);
+    if (!VerticalAxis.is(frame.axis) || !hAxis)
+        return null;
+    return {
+        vAxis: frame.axis,
+        hAxis,
+        lines: frame.plot.filter(ChartLine.is),
+        legend: frame.below.find(ChartLegend.is) ?? null,
+    };
+}
+/** Drop the call-out: the rules retract, the wash fades, and every series comes back to full. */
+function clearing(timeline, state) {
+    const from = state.regionReveal;
+    const region = state.region;
+    // Nothing to retract, but the call still takes its slot on the timeline.
+    if (from === 0)
+        return timeline.animate(() => ({ region: null, regionReveal: 0 }), { eased: false });
+    // `region` is held until the retraction lands, or there would be nothing left to retract.
+    return timeline.animate((t) => (t >= 1 ? { region: null, regionReveal: 0 } : { region, regionReveal: from * (1 - t) }));
+}
+/** Trace series `index`'s line in (`show`) or back out, in lockstep with its legend entry. */
+function toggling(timeline, children, index, show) {
+    const parts = partsOf(children);
+    const line = parts?.lines[index];
+    if (!parts || !line)
+        return timeline.wait(timeline.duration);
+    return timeline.together([
+        line.run("enter", show ? { from: 0, to: 1 } : { from: 1, to: 0 }),
+        ...(parts.legend ? [parts.legend.run(show ? "showSeries" : "hideSeries", { index })] : []),
+    ]);
+}
 /**
  * A multi-series line chart, composed from five independent parts rather than
  * one monolithic draw:
@@ -57,645 +185,289 @@ const LEGEND_SHARE = 0.15;
  * - {@link ChartLine} (one per series) — the traced polylines over the canvas.
  * - {@link ChartLegend} — a row of entries below the chart, one per series.
  *
- * The parts are laid out from this node's `layoutBounds`: a left gutter for the
- * vertical axis, a bottom gutter for the horizontal axis, the plot filling
- * what's left, and the legend row beneath the whole chart. Every child's
- * position/size is bound reactively, so the chart re-flows if its box changes,
- * and the series lines read the same resolved scales as the axes, so points land
- * exactly on their markers.
+ * Every part reads the chart's entries through bindings, and the lines, the
+ * region and the grid all map against the plot panel's own laid-out box, so
+ * points land exactly on their markers and the chart re-flows if its box
+ * changes.
  *
- * **Resting state is the finished chart.** Unlike the standalone component this
- * was ported from, nothing is built hidden: the studio paints a node's Initial
- * state on a paused canvas, and 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, so the entrance itself is unchanged.
+ * **Resting state is the finished chart**: an editor paints a node's Initial
+ * state on a paused canvas. `enter` arms every part on its first frame.
  *
- * Past the entrance, three things move the chart around:
- * {@link showSeries}/{@link hideSeries}/{@link spotlightSeries} pick out a
- * *series*, {@link spotlightRegion} marks a *slice of the plot* without changing
- * the scale, and {@link zoomTo} rescales the axes so a slice fills the plot. The
- * last two take the same {@link PlotRegion} and compose — a spotlit region
- * resolves against the live scales, so it travels with a zoom.
+ * Past the entrance, `showSeries`/`hideSeries`/`spotlightSeries` pick out a
+ * *series*, `spotlightRegion` marks a *slice of the plot* without changing the
+ * scale, and `zoomTo` rescales the axes so a slice fills the plot. A spotlit
+ * region resolves against the live scales, so it travels with a zoom. A `to` of
+ * an axis `range` or `ticks` tweens from the domain as drawn (see
+ * {@link lerpAxisEntry}), so an auto axis rescales continuously.
  */
-let LineChart = class LineChart extends Node2D {
-    static { LineChart_1 = this; }
-    // ---- Part handles (built in the constructor) --------------------------
-    vAxis;
-    hAxis;
-    /** The plot panel — the box the grid, the lines and the region all share. */
-    plotRect;
-    legend = null;
-    lines = [];
-    /**
-     * `this.theme` read back through its *resolved* shape: the property's declared
-     * type is the loose author-facing {@link ChartTheme} (so a partial theme is
-     * accepted), but the mapper always stores the fully-resolved
-     * {@link ChartConfig} at runtime — the same loose-declared/resolved-stored
-     * idiom as a shape's `fill`/`stroke`.
-     */
-    get resolvedTheme() {
-        return this.theme;
-    }
-    // ---- Derived scales ---------------------------------------------------
-    /** Fallback marker count when neither axis's ticks are given. */
-    static DEFAULT_MARKERS = 5;
-    /**
-     * What the x column *is* — a number, an instant, or a place in the file — and
-     * with it how each row is positioned, ticked and captioned. See `x-scale.ts`.
-     */
-    get xColumn() {
-        return resolveXScale(this.data, this.xField, this.xAxis.format);
-    }
-    get xScale() {
-        return this.xAxis.range ?? this.xColumn.extent;
-    }
-    get yScale() {
-        // Auto-ranging steps into one fewer segment than the intended marker count
-        // — the explicit ticks' count when given, else the default — so the tidy
-        // bounds still frame the ticks the axis draws.
-        const divisions = (this.yAxis.ticks?.length ?? LineChart_1.DEFAULT_MARKERS) - 1;
-        return resolveYScale(this.data, this.series, this.yAxis.range, divisions);
-    }
-    /** The vertical axis ticks: the explicit ones, else five across the scale. */
-    get resolvedYMarkers() {
-        return (this.yAxis.ticks ??
-            markerValues(this.yScale, LineChart_1.DEFAULT_MARKERS - 1));
-    }
-    /**
-     * The horizontal axis ticks: the explicit ones, else five across the scale.
-     *
-     * Asked of the column rather than spaced evenly, because only a numeric column
-     * has round numbers between its samples. On a month column, five evenly spaced
-     * values land two-thirds of the way through four different months; the ticks
-     * a reader wants are Jan/Apr/Jul/Oct/Dec, which are rows.
-     */
-    get resolvedXMarkers() {
-        return (this.xAxis.ticks ??
-            this.xColumn.ticks(this.xScale, LineChart_1.DEFAULT_MARKERS - 1));
-    }
-    // ---- Plot geometry ------------------------------------------------------
-    /**
-     * The plot panel's size, **as laid out**.
-     *
-     * This used to be computed: six constants estimating what the axis gutters and
-     * the legend row would take, subtracted from the node's box. The estimate was
-     * never the layout — the vertical axis is `width: "hug"`, so its real width is
-     * whatever its widest marker needs — and everything downstream inherited the
-     * gap. The grid is drawn by {@link ChartCanvas} across its *own* allocation,
-     * while the lines were mapped across the estimate, so a series sat a few
-     * percent off the grid line it was supposed to touch, silently and by an
-     * amount that changed with the theme.
-     *
-     * Asking the panel is exact by construction and cannot drift: the lines, the
-     * region rules and the grid all resolve against one box, and it is the 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 { width, height };
-    }
-    /**
-     * Map one series' data points into the plot's **centred** pixel space (origin
-     * at the plot centre, y-up) — the local frame of the clip/line box that fills
-     * the plot. x runs `[-w/2, +w/2]`, y runs `[-h/2, +h/2]`.
-     */
-    seriesPixels(index) {
-        const s = this.series[index];
-        if (!s)
-            return [];
-        const points = seriesPoints(this.data, this.xColumn, s);
-        if (points.length === 0)
-            return [];
-        const { width: w, height: h } = this.plotSize();
-        const [xMin, xMax] = this.xScale;
-        const [yMin, yMax] = this.yScale;
-        // Plot centre is the origin; map the data fraction to [-half, +half].
-        const xToPx = (x) => xMax <= xMin ? 0 : ((x - xMin) / (xMax - xMin) - 0.5) * w;
-        const yToPx = (y) => yMax <= yMin ? 0 : ((y - yMin) / (yMax - yMin) - 0.5) * h;
-        // `seriesPoints` already sorted them along x.
-        return points.map(([x, y]) => ({ x: xToPx(x), y: yToPx(y) }));
-    }
-    /**
-     * {@link region} mapped into the plot's **centred** pixel space — the same
-     * frame {@link seriesPixels} returns, so the region's rules and each line's
-     * clip resolve against one box from one place. Reads the live scales, so it
-     * re-maps when `xAxis`/`yAxis` tween.
-     */
-    /**
-     * Whether a call-out is authored at all — the question {@link enter} and
-     * {@link spotlightRegion} branch on.
-     *
-     * Deliberately **not** `hasRegion(this.regionBox())`, which they used to ask.
-     * That resolves the region into pixels, so it answers "and has the chart been
-     * laid out yet" as well, and comes back false for a perfectly real region on a
-     * chart that has not been measured. A generator never noticed, because it only
-     * ever ran mid-playback; a command is *built* before the first layout pass, and
-     * would have quietly dropped the region beat every time.
-     *
-     * What is left once the pixels are taken out is the same test
-     * {@link resolveRegionBox} applies before it maps anything: a region bounding
-     * *neither* axis is not a call-out, so `{}` counts as none exactly as `null`
-     * does.
-     */
-    hasCallout() {
-        const region = this.region;
-        return region != null && (region.x !== undefined || region.y !== undefined);
-    }
-    regionBox() {
-        const { width: w, height: h } = this.plotSize();
-        // The region lives in the plot's own centred frame, the same one
-        // seriesPixels maps its points into.
-        return resolveRegionBox(this.region, { left: -w / 2, right: w / 2, bottom: -h / 2, top: h / 2 }, this.xScale, this.yScale);
-    }
-    // ---- 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).
-        //
-        // Every theme/axis-derived prop below that a *leaf* drawing part reads live
-        // in `renderSelf` every frame — the canvas's fill/grid/extent, the border's
-        // stroke, each line's stroke/points — is passed as a closure, not a one-time
-        // snapshot, so `chart.to({ theme })` and `chart.to({ yAxis: { range } })`
-        // genuinely animate the panel, grid, border, and plotted lines. The two axes
-        // compose their child text nodes *once* (the marker count is fixed at
-        // construction) but bind each marker's caption and position to the live
-        // range/ticks, so a rescale re-labels and re-places the row as it tweens.
-        const enabled = this.series.map((s) => s.enabled ?? true);
-        const showLegend = this.showLegend !== false;
-        this.vAxis = new VerticalAxis({
-            // Bound, not snapshotted — this is the half of a rescale the axis owns.
-            // The marker *count* is still read once (it fixes how many text nodes get
-            // built), which is why `zoomTo` keeps the count constant.
-            range: () => this.yScale,
-            markers: () => this.resolvedYMarkers,
-            axis: () => this.resolvedTheme.yAxis,
-            label: this.yAxis.label ?? "",
+export const LineChart = component2d({
+    key: "lineChart",
+    state: {
+        data: fresh(() => [], { kind: "dataset" }),
+        xField: "",
+        series: fresh(() => [], { kind: "series" }),
+        xAxis: Types.custom({}, { resolve: resolveAxisDomain, lerp: lerpAxisEntry }),
+        yAxis: Types.custom({}, { resolve: resolveAxisDomain, lerp: lerpAxisEntry }),
+        theme: Types.custom(DEFAULT_CHART_THEME, { resolve: resolveChartTheme, lerp: lerpChartTheme }),
+        /**
+         * The spotlit slice of the plot in data units, or `null` for none. The box
+         * snaps; the animation is {@link regionReveal} drawing the rules on.
+         */
+        region: Types.custom(null),
+        /**
+         * How far the `region` call-out is drawn in, `[0, 1]`: the rules grow out and
+         * the wash fades up as it climbs, while every line's out-of-region stretch
+         * fades to the theme's `region.dimOpacity`.
+         */
+        regionReveal: 0,
+        /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
+        showLegend: Types.boolean(true, { animatable: false }),
+        /**
+         * The domain `zoomTo` first left, so `resetZoom` restores the chart as it
+         * stood, auto-derived ticks included. Cleared by `resetZoom`, so the next zoom
+         * remembers wherever the chart rests then.
+         */
+        home: Types.custom(null, { private: true }),
+    },
+    // Its parts fill it; a node made of them would hug them.
+    defaults: { width: "fill", height: "fill" },
+    allowedChildren: [],
+    children: (state) => {
+        const theme = () => state.theme;
+        const domains = () => lineChartDomains(state);
+        let plot;
+        const plotSize = () => laidOutSize(plot);
+        const enabled = state.series.map((s) => s.enabled ?? true);
+        // Bound, not snapshotted, so a rescale re-labels and re-places the row as it
+        // tweens. The marker *count* is read once, which is why `zoomTo` keeps it.
+        const vAxis = new VerticalAxis({
+            range: () => domains().y.range,
+            markers: () => domains().y.ticks,
+            // The y axis is always numbers, so its format is simply the pattern.
+            captions: () => {
+                const markers = domains().y.ticks;
+                const format = state.yAxis.format;
+                return markers.map((value) => (format === undefined ? formatMarker(value, markerStep(markers)) : formatNumber(value, format)));
+            },
+            axis: () => theme().yAxis,
+            label: state.yAxis.label ?? "",
             width: "hug",
             height: "fill",
         });
-        // The y axis is always numbers, so its format is simply the pattern.
-        this.vAxis.labelFor = (value) => this.yAxis.format === undefined
-            ? formatMarker(value)
-            : formatNumber(value, this.yAxis.format);
-        this.hAxis = new HorizontalAxis({
-            range: () => this.xScale,
-            markers: () => this.resolvedXMarkers,
-            axis: () => this.resolvedTheme.xAxis,
-            label: this.xAxis.label ?? "",
+        const hAxis = new HorizontalAxis({
+            range: () => domains().x.range,
+            markers: () => domains().x.ticks,
+            // A tick on a month or category column is captioned with the cell it came
+            // out of — `Jan`, not the instant it parsed to.
+            captions: () => {
+                const column = columnOf(state);
+                return domains().x.ticks.map((value) => column.label(value));
+            },
+            axis: () => theme().xAxis,
+            label: state.xAxis.label ?? "",
             width: "fill",
             height: "hug",
         });
-        // A tick on a month or category column is captioned with the cell it came
-        // out of — `Jan`, not the instant it parsed to. Assigned rather than passed:
-        // see the note on the field.
-        this.hAxis.labelFor = (value) => this.xColumn.label(value);
-        this.lines = this.series.map((s, i) => new ChartLine({
-            points: () => this.seriesPixels(i),
-            stroke: () => resolveSeriesStroke(this.resolvedTheme.seriesStyles, s, i),
+        const lines = state.series.map((s, i) => new ChartLine({
+            points: () => seriesPixels(state, domains(), i, plotSize()),
+            stroke: () => resolveSeriesStroke(theme().seriesStyles, s, i),
             enabled: enabled[i],
-            // Each line clips itself against the same box the rules are drawn
-            // from, so the dim/bright boundary can't drift from the dashes.
-            spotlight: () => this.regionBox(),
-            // Ramped by the same reveal that draws the rules, so at reveal 0 the
-            // line is uniform and the region invisible — one signal, both halves.
-            dimOpacity: () => 1 - (1 - this.resolvedTheme.region.dimOpacity) * this.regionReveal,
+            // Each line clips itself against the box the rules are drawn from, so
+            // the dim/bright boundary can't drift from the dashes.
+            spotlight: () => regionBox(state, domains(), plotSize()),
+            // Ramped by the reveal that draws the rules: one signal, both halves.
+            dimOpacity: () => 1 - (1 - theme().region.dimOpacity) * state.regionReveal,
         }));
-        if (showLegend) {
-            this.legend = new ChartLegend({
-                series: this.series,
-                // The kit's legend paints a swatch, not a line, so the chart hands it
-                // the *colour* each stroke resolves to rather than the stroke itself —
-                // which is also what lets a bar chart's fill palette drive the same row.
-                swatches: () => this.series.map((s, i) => resolveSeriesFill(this.resolvedTheme.seriesStyles, s, i)),
-                legend: () => this.resolvedTheme.legend,
-            });
+        const below = [hAxis];
+        if (state.showLegend !== false) {
+            below.push(new ChartLegend({
+                series: state.series,
+                // The legend paints a swatch, not a line, so it is handed the colour each
+                // stroke resolves to rather than the stroke itself.
+                swatches: () => state.series.map((s, i) => resolveSeriesFill(theme().seriesStyles, 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,
-                    // A grid line under every axis marker; the canvas maps the marker
-                    // values through the extents and skips the edges.
-                    xMarkers: () => this.resolvedXMarkers,
-                    yMarkers: () => this.resolvedYMarkers,
-                    xExtent: () => this.xScale,
-                    yExtent: () => this.yScale,
+                    fill: () => theme().plotArea.fill,
+                    shadow: () => theme().plotArea.shadow,
+                    xGridStroke: () => theme().xAxis.lineStyle,
+                    yGridStroke: () => theme().yAxis.lineStyle,
+                    // A grid line under every axis marker; the canvas skips the edges.
+                    xMarkers: () => domains().x.ticks,
+                    yMarkers: () => domains().y.ticks,
+                    xExtent: () => domains().x.range,
+                    yExtent: () => domains().y.range,
                 }),
-                // Region wash + dashed rules: over the grid, under the lines, so a
-                // spotlit stretch of a series isn't tinted by the highlight meant to
-                // pick it out.
+                // Over the grid, under the lines, so a spotlit stretch of a series isn't
+                // tinted by the highlight meant to pick it out.
                 new ChartRegion({
-                    box: () => this.regionBox(),
-                    stroke: () => this.resolvedTheme.region.stroke,
-                    fill: () => this.resolvedTheme.region.fill,
-                    reveal: () => this.regionReveal,
-                }),
-                ...this.lines,
-                new ChartBorder({
-                    stroke: () => this.resolvedTheme.plotArea.stroke,
+                    box: () => regionBox(state, domains(), plotSize()),
+                    stroke: () => theme().region.stroke,
+                    fill: () => theme().region.fill,
+                    reveal: () => state.regionReveal,
                 }),
+                ...lines,
+                new ChartBorder({ stroke: () => theme().plotArea.stroke }),
             ],
         });
-        // Invisible twin of the vertical axis, reserving the same left gutter under
-        // the plot so the horizontal axis starts at the plot's left edge rather than
-        // the chart's.
-        const gutterSpacer = new VerticalAxis({
+        const gutter = new VerticalAxis({
             opacity: 0,
-            range: () => this.yScale,
-            markers: () => this.resolvedYMarkers,
-            axis: () => this.resolvedTheme.yAxis,
-            label: this.yAxis.label ?? "",
+            range: () => domains().y.range,
+            markers: () => domains().y.ticks,
+            axis: () => theme().yAxis,
+            label: state.yAxis.label ?? "",
             width: "hug",
             height: 0,
         });
-        const below = [this.hAxis];
-        if (this.legend)
-            below.push(this.legend);
-        this.add(new Rect({ flow: "vertical",
-            width: "fill",
-            height: "fill",
-            // See {@link TOP_HEADROOM}: the plot's top grid line is the one place a
-            // marker would otherwise be drawn outside the chart's own box.
-            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 shifted and
-     * transparent, lines untraced, 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.hAxis.arm();
-        for (const line of this.lines)
-            line.set({ progress: 0 });
-        this.legend?.set({ opacity: 0, y: -LEGEND_SLIDE });
-    }
-    /**
-     * Animate the whole chart in: the two axes stagger their markers in (vertical
-     * bottom-to-top, horizontal left-to-right), the series lines trace
-     * left-to-right, and the legend fades up last.
-     *
-     * `duration` is the **whole** entrance. The phases below 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. (The component this was ported from scaled every phase *off* the
-     * line trace and let the total fall where it may, which came out around 3×.)
-     *
-     * A chart authored with a `region` lands its call-out last, over lines that
-     * have already traced — the same order a scene would get by calling
-     * {@link spotlightRegion} right after this — and that beat comes out of the
-     * same budget.
-     */
-    enter(args) {
-        const duration = args.duration;
-        const easing = args.easing ?? easeOut();
-        this.arm();
-        const revealing = this.hasCallout() && this.regionReveal === 0;
-        // The region call-out, when there is one, takes the last quarter.
-        const body = revealing ? duration * 0.75 : duration;
-        // The same three phases, in the same order and with the same shares — placed
-        // at their offsets rather than sequenced by a generator, so the whole
-        // entrance can be asked what it looks like at a time. Each part writes to its
-        // own node (the axes, the lines, the legend), which is why these compose as
-        // steppers rather than as merged props.
-        const axes = together(this.vAxis.enter({ data: { slide: 24 }, duration: body * AXES_SHARE, easing }), this.hAxis.enter({ data: { slide: 24 }, duration: body * AXES_SHARE, easing }));
-        const lines = together(...this.lines.map((line) => line.enter({ duration: body * LINES_SHARE, easing })));
-        const legend = this.legend
-            ? [this.legend.to({ data: { opacity: 1, y: 0 }, duration: body * LEGEND_SHARE, easing })]
-            : [];
-        const phases = sequenceOf(axes, lines, ...legend);
-        return revealing
-            ? sequenceOf(phases, 
-            // Typed to what it writes rather than to `LineChartProps`: `regionReveal`
-            // is a signal of the chart's own, not part of its authored props.
-            this.command((t) => ({ regionReveal: t }), duration * 0.25, easing))
-            : phases;
-    }
-    // ---- Region spotlight --------------------------------------------------
-    /**
-     * Spotlight a rectangular slice of the plot given in **data units**: dashed
-     * rules draw themselves onto each bounded edge while every series fades
-     * outside the box and stays full inside it.
-     *
-     * Either axis alone is a band — `{ x: [80, 100] }` picks out the last fifth
-     * across all series, `{ y: [8, 10] }` a value band across the whole width —
-     * and both together a box. The unbounded axis spans the plot and draws no
-     * rule, since there's no data bound there to mark.
-     *
-     * Calling it while another region is already up cross-fades: the old call-out
-     * retracts, then the new one draws in, each over half `duration`.
-     *
-     * Both the call-out's shape and its draw-on are plain signals — `region` and
-     * {@link regionReveal} — so the whole thing is a function of `t`, including
-     * the swap: which region is up is a step at the halfway point rather than an
-     * effect that has to have happened.
-     */
-    spotlightRegion(args) {
-        const region = LineChart_1.regionArg(args.data);
-        const duration = args.duration ?? 0.5;
-        const easing = args.easing ?? easeOut();
-        const from = this.regionReveal;
-        const previous = this.region;
-        // A region bounding neither axis is no call-out: spotlighting it is a clear.
-        if (region.x === undefined && region.y === undefined) {
-            return this.clearRegion({ duration, easing });
-        }
-        // Nothing up yet: the region is set from the first frame and just draws on.
-        if (from <= 0 || !this.hasCallout()) {
-            return this.command((t) => ({ region, regionReveal: from + (1 - from) * t }), duration, easing);
-        }
-        // Something already up: retract it first so the rules don't jump across the
-        // plot mid-draw. Each half eases on its own — which is why the easing is
-        // applied here rather than handed to `animate`, whose easing would shape the
-        // pair as one curve and leave both halves crawling past the seam.
-        return this.command((t) => t < 0.5
-            ? { region: previous, regionReveal: from * (1 - easing(t * 2)) }
-            : { region, regionReveal: easing(t * 2 - 1) }, duration);
-    }
-    /**
-     * Drop the region call-out — the rules retract, the wash fades, and every
-     * series comes back to full across its whole length. A no-op when nothing is
-     * spotlit.
-     */
-    clearRegion(args = {}) {
-        const duration = args.duration ?? 0.5;
-        const easing = args.easing ?? easeOut();
-        const from = this.regionReveal;
-        if (from === 0) {
-            // Nothing to retract, but the call still takes its slot: in the studio a
-            // command's duration is what the timeline lays out and what parallel
-            // siblings are timed against, so a no-op that took no frames would pull
-            // everything after it forward. Same reason for `zoomTo`/`resetZoom` below.
-            return this.command(() => ({ region: null, regionReveal: 0 }), duration);
-        }
-        // `region` is left alone until the retraction lands — cleared at `t === 1`
-        // rather than up front, or there would be nothing left to retract.
-        return this.command((t) => (t >= 1 ? { region: null, regionReveal: 0 } : { regionReveal: from * (1 - t) }), duration, easing);
-    }
-    // ---- Zoom --------------------------------------------------------------
-    /**
-     * The domain to come back to, captured the first time {@link zoomTo} runs so a
-     * later {@link resetZoom} restores the chart as authored — including ticks
-     * that were auto-derived rather than given, which the props alone don't
-     * record. Cleared by {@link resetZoom}, so a second zoom captures wherever the
-     * chart genuinely rests then.
-     */
-    home = null;
-    /**
-     * The `region` a document handed a command, or `{}`. A command is added
-     * before its arguments are filled in, so an unstated region is ordinary input
-     * rather than a malformed one.
-     */
-    static regionArg(data) {
-        const region = data?.region;
-        return region != null && typeof region === "object" ? region : {};
-    }
-    /** A range read as a span, whichever way round the author wrote it. */
-    static span([a, b]) {
-        return a <= b ? [a, b] : [b, a];
-    }
-    /**
-     * Rescale an axis to `range`, keeping the tick *count* it already has — the
-     * axis tween interpolates ticks pairwise by index, so a constant count lets
-     * each marker slide from its old value to its new one instead of the row
-     * popping.
-     */
-    static rescale(range, ticks) {
-        const span = LineChart_1.span(range);
-        const count = Math.max(2, ticks.length);
-        return { range: span, ticks: markerValues(span, count - 1) };
-    }
-    /**
-     * Zoom the plot to a slice of itself, given in **data units**: the named axes
-     * rescale so that slice fills the plot, the grid and both marker rows
-     * following the new scale, and every series re-tracing itself into the new
-     * frame. All of it tweens, so the move reads as a camera push rather than a
-     * cut.
-     *
-     * An **omitted axis is left as it is** rather than being fitted to what's
-     * visible — so a zoom is exactly what was asked for, and two calls compose
-     * predictably. A spotlit region, if one is up, follows the zoom: it resolves
-     * against the same live scales, so its rules stay on their data bounds.
-     */
-    zoomTo(args) {
-        const region = LineChart_1.regionArg(args.data);
-        const duration = args.duration ?? 0.8;
-        const easing = args.easing ?? easeOut();
-        if (!region.x && !region.y)
-            return hold(duration);
-        // Capture the resting domain *before* the first zoom moves it. Ticks are
-        // read through the resolved getters rather than off `xAxis`/`yAxis`, so an
-        // auto-derived tick row comes back as itself.
-        this.home ??= {
-            x: {
-                label: this.xAxis.label,
-                range: this.xScale,
-                ticks: this.resolvedXMarkers,
+        return asParts([cartesianFrame({ axis: vAxis, plot, gutter, below })]);
+    },
+    commands: {
+        /**
+         * Animate the whole chart in: the two axes stagger their markers in, the
+         * series lines trace left to right, and the legend fades up last. Its first
+         * frame arms every part: markers shifted and transparent, lines untraced,
+         * the legend dropped and transparent.
+         *
+         * `duration` is the **whole** entrance; the beats are shares of it. A chart
+         * authored with a `region` lands its call-out last, in the final quarter.
+         */
+        enter: {
+            args: {},
+            // Held from the chart's arrival, so it never shows finished ahead of its draw.
+            entrance: true,
+            easing: easeOut(),
+            run: (timeline, state, children) => {
+                const parts = partsOf(children);
+                if (!parts)
+                    return timeline.wait(timeline.duration);
+                const duration = timeline.duration;
+                const revealing = hasCallout(state) && state.regionReveal === 0;
+                const body = revealing ? duration * 0.75 : duration;
+                const axes = body * AXES_SHARE;
+                const traced = body * LINES_SHARE;
+                const { legend } = parts;
+                const at0 = (piece) => ({ at: 0, duration: 0, piece });
+                // The first frame arms what every later beat moves: a beat ahead of the
+                // playhead writes nothing. A beat with nothing to do still takes its share.
+                return beats(timeline, [
+                    ...(revealing ? [at0(timeline.animate(() => ({ regionReveal: 0 })))] : []),
+                    ...parts.lines.map((line) => at0(line.to({ progress: 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.hAxis.run("enter", { slide: 24 }) },
+                    ...parts.lines.map((line) => ({ at: axes, duration: traced, piece: line.run("enter") })),
+                    ...(legend ? [{ at: axes + traced, duration: body * LEGEND_SHARE, piece: legend.to({ opacity: 1, y: 0 }) }] : []),
+                    ...(revealing ? [{ at: body, duration: duration * 0.25, piece: timeline.animate((t) => ({ regionReveal: t })) }] : []),
+                ]);
             },
-            y: {
-                label: this.yAxis.label,
-                range: this.yScale,
-                ticks: this.resolvedYMarkers,
+        },
+        /**
+         * Spotlight a rectangular slice of the plot given in **data units**: dashed
+         * rules draw onto each bounded edge while every series fades outside the box.
+         * Either axis alone is a band; both are a box. Called while another region is
+         * up, the old call-out retracts over the first half and the new one draws in
+         * over the second, each half eased on its own.
+         */
+        spotlightRegion: {
+            args: { region: REGION_ARG },
+            easing: easeOut(),
+            run: (timeline, state) => {
+                const region = regionArg(timeline.args.region);
+                const from = state.regionReveal;
+                const previous = state.region;
+                // A region bounding neither axis is no call-out: spotlighting it is a clear.
+                if (region.x === undefined && region.y === undefined)
+                    return clearing(timeline, state);
+                // Nothing up yet: the region is set from the first frame and just draws on.
+                if (from <= 0 || !hasCallout(state))
+                    return timeline.animate((t) => ({ region, regionReveal: from + (1 - from) * t }));
+                return timeline.animate((t) => (t < 0.5
+                    ? { region: previous, regionReveal: from * (1 - timeline.ease(t * 2)) }
+                    : { region, regionReveal: timeline.ease(t * 2 - 1) }), { eased: false });
             },
-        };
-        const next = {};
-        if (region.x)
-            next.xAxis = LineChart_1.rescale(region.x, this.resolvedXMarkers);
-        if (region.y)
-            next.yAxis = LineChart_1.rescale(region.y, this.resolvedYMarkers);
-        return this.to({ data: next, duration, easing });
-    }
-    /**
-     * Pull back out to the domain the chart was authored with — the mirror of
-     * {@link zoomTo}, and a no-op if it was never zoomed.
-     */
-    resetZoom(args = {}) {
-        const duration = args.duration ?? 0.8;
-        const easing = args.easing ?? easeOut();
-        const home = this.home;
-        if (!home)
-            return hold(duration);
-        // Cleared here rather than once the move lands. Nothing reads `home` while
-        // it runs, and a value has no "after" to clear it in — what matters is that
-        // the *next* `zoomTo` captures wherever the chart genuinely rests by then,
-        // and both this and its capture happen as the command list is walked.
-        this.home = null;
-        return this.to({ data: { xAxis: home.x, yAxis: home.y }, duration, easing });
-    }
-    // ---- Per-series -------------------------------------------------------
-    /**
-     * Show series `index`: **trace** its line in left-to-right — the same draw as
-     * {@link enter}, not an opacity fade — in lockstep with its legend entry
-     * growing in.
-     *
-     * `enabled` is set as part of the command's own value rather than before it,
-     * so the line is drawable for every `t` the trace covers and undrawn outside
-     * it — which is what makes arriving here backwards show the same thing as
-     * arriving forwards.
-     */
-    showSeries(args) {
-        const index = args.data?.seriesIndex ?? 0;
-        const duration = args.duration ?? 0.35;
-        const easing = args.easing ?? easeOut();
-        const line = this.lines[index];
-        if (!line)
-            return hold(duration);
-        return together(line.enterFrom(0, duration, easing), ...(this.legend ? [this.legend.showSeries({ data: { index }, duration, easing })] : []));
-    }
-    /**
-     * Hide series `index`: **retrace** its line back out (`progress` 1 → 0) as its
-     * legend entry shrinks away — the mirror of {@link showSeries}.
-     */
-    hideSeries(args) {
-        const index = args.data?.seriesIndex ?? 0;
-        const duration = args.duration ?? 0.35;
-        const easing = args.easing ?? easeOut();
-        const line = this.lines[index];
-        if (!line)
-            return hold(duration);
-        return together(line.enterFrom(1, duration, easing, 0), ...(this.legend ? [this.legend.hideSeries({ data: { index }, duration, easing })] : []));
-    }
-    /**
-     * Fade out all other series — each line **and its legend entry** — to focus
-     * attention on `index`, which comes back to full. The legend dims in place
-     * (opacity only), so no entry moves and the row doesn't reflow.
-     */
-    spotlightSeries(args) {
-        const index = args.data?.seriesIndex ?? 0;
-        const duration = args.duration ?? 0.35;
-        const easing = args.easing ?? easeOut();
-        return together(...this.lines.map((line, i) => line.to({ data: { opacity: i === index ? 1 : SPOTLIGHT_DIM }, duration, easing })), ...(this.legend
-            ? [this.legend.spotlightSeries({ data: { index }, duration, easing })]
-            : []));
-    }
-};
-__decorate([
-    property({ default: () => [], kind: "dataset" })
-], LineChart.prototype, "data", void 0);
-__decorate([
-    property({ default: "" })
-], LineChart.prototype, "xField", void 0);
-__decorate([
-    property({ default: () => [], kind: "series" })
-], LineChart.prototype, "series", void 0);
-__decorate([
-    property({
-        default: {},
-        mapper: resolveAxisDomain,
-        tween: lerpAxisDomain,
-    })
-], LineChart.prototype, "xAxis", void 0);
-__decorate([
-    property({
-        default: {},
-        mapper: resolveAxisDomain,
-        tween: lerpAxisDomain,
-    })
-], LineChart.prototype, "yAxis", void 0);
-__decorate([
-    property({
-        default: DEFAULT_CHART_THEME,
-        mapper: resolveChartTheme,
-        tween: lerpChartTheme,
-    })
-], LineChart.prototype, "theme", void 0);
-__decorate([
-    property({ default: null })
-], LineChart.prototype, "region", void 0);
-__decorate([
-    property({ default: 0 })
-], LineChart.prototype, "regionReveal", void 0);
-__decorate([
-    property({ default: true, animatable: false })
-], LineChart.prototype, "showLegend", void 0);
-__decorate([
-    command()
-], LineChart.prototype, "enter", null);
-__decorate([
-    command({
-        args: [
-            // One argument, two controls: the method takes a `PlotRegion`, so the x
-            // and y spans a host draws are declared inside it.
-            {
-                key: "region", kind: "region", properties: {
-                    x: { kind: "range", default: true, defaultMin: 0, defaultMax: 100 },
-                    y: { kind: "range", default: false, defaultMin: 0, defaultMax: 100 },
-                },
+        },
+        /** Drop the region call-out. A no-op when nothing is spotlit, which still takes its slot. */
+        clearRegion: {
+            args: {},
+            easing: easeOut(),
+            run: (timeline, state) => clearing(timeline, state),
+        },
+        /**
+         * Zoom the plot to a slice of itself, given in **data units**: the named axes
+         * rescale so that slice fills the plot, the grid, both marker rows and every
+         * series following. An omitted axis is left as it is. The first zoom
+         * remembers the domain it left, for `resetZoom`.
+         */
+        zoomTo: {
+            args: { region: REGION_ARG },
+            easing: easeOut(),
+            run: (timeline, state) => {
+                const region = regionArg(timeline.args.region);
+                if (!region.x && !region.y)
+                    return timeline.wait(timeline.duration);
+                const from = lineChartDomains(state);
+                const home = state.home ?? from;
+                const to = {
+                    ...(region.x && { x: { ...from.x, ...rescale(region.x, from.x.ticks) } }),
+                    ...(region.y && { y: { ...from.y, ...rescale(region.y, from.y.ticks) } }),
+                };
+                return timeline.animate((t) => ({ home, ...axesAt(from, to, t) }));
             },
-        ],
-    })
-], LineChart.prototype, "spotlightRegion", null);
-__decorate([
-    command()
-], LineChart.prototype, "clearRegion", null);
-__decorate([
-    command({
-        args: [
-            // One argument, two controls: the method takes a `PlotRegion`, so the x
-            // and y spans a host draws are declared inside it.
-            {
-                key: "region", kind: "region", properties: {
-                    x: { kind: "range", default: true, defaultMin: 0, defaultMax: 100 },
-                    y: { kind: "range", default: false, defaultMin: 0, defaultMax: 100 },
-                },
+        },
+        /** Pull back out to the domain the first zoom left — the mirror of `zoomTo`, and a hold if it never zoomed. */
+        resetZoom: {
+            args: {},
+            easing: easeOut(),
+            run: (timeline, state) => {
+                const home = state.home;
+                if (!home)
+                    return timeline.wait(timeline.duration);
+                const from = lineChartDomains(state);
+                return timeline.animate((t) => ({ home: null, ...axesAt(from, home, t) }));
             },
-        ],
-    })
-], LineChart.prototype, "zoomTo", null);
-__decorate([
-    command()
-], LineChart.prototype, "resetZoom", null);
-__decorate([
-    command({ args: [SERIES_ARG] })
-], LineChart.prototype, "showSeries", null);
-__decorate([
-    command({ args: [SERIES_ARG] })
-], LineChart.prototype, "hideSeries", null);
-__decorate([
-    command({ args: [SERIES_ARG] })
-], LineChart.prototype, "spotlightSeries", null);
-LineChart = LineChart_1 = __decorate([
-    node({
-        key: "lineChart",
-        parentKey: "node",
-        forkable: true,
-        layout: {
-            children: "freeform",
-            defaultWidthMode: "fixed",
-            defaultHeightMode: "fixed",
-            acceptsChildren: true,
         },
-        seed: {
-            width: 760,
-            height: 460,
+        /**
+         * Show series `index`: **trace** its line in left to right, in lockstep with
+         * its legend entry growing in.
+         */
+        showSeries: {
+            args: { seriesIndex: SERIES_ARG },
+            easing: easeOut(),
+            run: (timeline, _state, children) => toggling(timeline, children, timeline.args.seriesIndex, true),
+        },
+        /** Hide series `index`: **retrace** its line back out as its legend entry shrinks away. */
+        hideSeries: {
+            args: { seriesIndex: SERIES_ARG },
+            easing: easeOut(),
+            run: (timeline, _state, children) => toggling(timeline, children, timeline.args.seriesIndex, false),
+        },
+        /**
+         * Fade every other series — each line **and its legend entry** — to focus on
+         * `index`, which comes back to full. The legend dims in place, so the row
+         * 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;
+                return timeline.together([
+                    ...parts.lines.map((line, i) => line.to({ opacity: i === index ? 1 : SPOTLIGHT_DIM })),
+                    ...(parts.legend ? [parts.legend.run("spotlightSeries", { index })] : []),
+                ]);
+            },
         },
-    })
-], LineChart);
-export { LineChart };
+    },
+});
 //# sourceMappingURL=line-chart.js.map