@motionscript/charts 0.1.0-alpha.3 → 0.1.0-alpha.6

package/dist/pie-chart/pie-legend.d.ts

@@ -1,6 +1,6 @@
-import { Rect, type CommandArgs, type NodeConfig, type RectProps } from "@motionscript/sdk";
+import { type NodeOf, type RectProps, type Alignment as _Alignment, type CornerRadiusResolved as _CornerRadiusResolved, type CornerStyleResolved as _CornerStyleResolved, type Fill as _Fill, type FillResolved as _FillResolved, type FlowMode as _FlowMode, type FlowResolved as _FlowResolved, type GapSize as _GapSize, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type RectCornerRadius as _RectCornerRadius, type RectCornerStyle as _RectCornerStyle, type Shadow as _Shadow, type ShadowResolved as _ShadowResolved, type Stroke as _Stroke, type StrokeResolved as _StrokeResolved, type Vector2 as _Vector2 } from "@motionscript/sdk";
+import { type Arrival } from "../kit/motion.js";
 import { type LegendConfig } from "../kit/shared.js";
-import { type Seekable } from "@motionscript/sdk/component";
 import type { PieSlice } from "./shared.js";
 export interface PieLegendProps extends RectProps {
     /** One entry per slice, in ring order. */
@@ -27,34 +27,57 @@ export interface PieLegendProps extends RectProps {
  * shouldn't be in the chart shouldn't be in the table — removing one would
  * silently re-cut every other wedge's share, which is a different chart rather
  * than the same chart with something hidden. Selection is what a pie has
- * instead, and it arrives through {@link dims}.
+ * instead, and it arrives through {@link PieLegendProps.dims}.
  */
-export declare class PieLegend extends Rect {
-    slices: PieSlice[];
-    legend: LegendConfig;
-    dims: number[];
-    /** One entry per slice, ordered top → bottom, for the staggered entrance. */
-    private items;
-    constructor(props?: NodeConfig<PieLegend, PieLegendProps>);
-    /** One entry: the slice's colour swatch beside its caption. */
-    private buildItem;
-    /**
-     * Prime every entry at its pre-entrance state: shifted right and transparent.
-     *
-     * Idempotent, and separate from {@link enter} so the chart can arm its whole
-     * composition before the first frame is drawn — the resting state is the
-     * finished legend, so there is nothing hidden to reveal unless a scene asks.
-     */
-    arm(slide?: number): void;
-    /**
-     * Slide + fade every entry in from the right, staggered top-to-bottom.
-     *
-     * `duration` is the **whole** entrance: the stagger is carved out of it rather
-     * than added on top, so the command takes exactly the time the timeline laid
-     * out for it.
-     */
-    enter(args: CommandArgs<Record<string, never>> & {
-        duration: number;
-    }): Seekable;
-}
+export declare const PieLegend: import("@motionscript/sdk").Component<"pieLegend", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly slices: import("@motionscript/sdk").Type<PieSlice[], PieSlice[], false>;
+    readonly legend: import("@motionscript/sdk").Type<LegendConfig, LegendConfig, false>;
+    readonly dims: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
+    readonly cornerRadius: import("@motionscript/sdk").Attribute<_RectCornerRadius, _CornerRadiusResolved>;
+    readonly cornerStyle: import("@motionscript/sdk").Attribute<_RectCornerStyle, _CornerStyleResolved>;
+    readonly flow: import("@motionscript/sdk").Type<_FlowMode, _FlowResolved, false>;
+    readonly gap: import("@motionscript/sdk").Type<_GapSize, _GapSize, false>;
+    readonly wrap: boolean;
+    readonly crossGap: import("@motionscript/sdk").Type<number | undefined, number | undefined, false>;
+    readonly columns: import("@motionscript/sdk").Type<number, number, false>;
+    readonly align: import("@motionscript/sdk").Attribute<_Alignment, _Vector2>;
+    readonly fill: import("@motionscript/sdk").Attribute<_Fill, _FillResolved[]>;
+    readonly stroke: import("@motionscript/sdk").Attribute<_Stroke, _StrokeResolved[]>;
+    readonly shadow: import("@motionscript/sdk").Attribute<_Shadow, _ShadowResolved[]>;
+    readonly overlay: import("@motionscript/sdk").Attribute<_Fill, _FillResolved[]>;
+    readonly start: import("@motionscript/sdk").Type<number, number, false>;
+    readonly end: import("@motionscript/sdk").Type<number, number, false>;
+}>, {
+    readonly arm: unknown;
+    readonly enter: unknown;
+    readonly fillTo: readonly ["fill"];
+    readonly strokeTo: readonly ["stroke"];
+    readonly shadowTo: readonly ["shadow"];
+    readonly overlayTo: readonly ["overlay"];
+    readonly progressTo: readonly ["start", "end"];
+    readonly flash: {
+        readonly portion: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly slices: import("@motionscript/sdk").Type<PieSlice[], PieSlice[], false>;
+    readonly legend: import("@motionscript/sdk").Type<LegendConfig, LegendConfig, false>;
+    readonly dims: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
+    readonly cornerRadius: import("@motionscript/sdk").Attribute<_RectCornerRadius, _CornerRadiusResolved>;
+    readonly cornerStyle: import("@motionscript/sdk").Attribute<_RectCornerStyle, _CornerStyleResolved>;
+    readonly flow: import("@motionscript/sdk").Type<_FlowMode, _FlowResolved, false>;
+    readonly gap: import("@motionscript/sdk").Type<_GapSize, _GapSize, false>;
+    readonly wrap: boolean;
+    readonly crossGap: import("@motionscript/sdk").Type<number | undefined, number | undefined, false>;
+    readonly columns: import("@motionscript/sdk").Type<number, number, false>;
+    readonly align: import("@motionscript/sdk").Attribute<_Alignment, _Vector2>;
+    readonly fill: import("@motionscript/sdk").Attribute<_Fill, _FillResolved[]>;
+    readonly stroke: import("@motionscript/sdk").Attribute<_Stroke, _StrokeResolved[]>;
+    readonly shadow: import("@motionscript/sdk").Attribute<_Shadow, _ShadowResolved[]>;
+    readonly overlay: import("@motionscript/sdk").Attribute<_Fill, _FillResolved[]>;
+    readonly start: import("@motionscript/sdk").Type<number, number, false>;
+    readonly end: import("@motionscript/sdk").Type<number, number, false>;
+}>, null>>;
+export type PieLegend = NodeOf<typeof PieLegend>;
 //# sourceMappingURL=pie-legend.d.ts.map

package/dist/pie-chart/pie-legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pie-legend.d.ts","sourceRoot":"","sources":["../../src/pie-chart/pie-legend.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,IAAI,EAKJ,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAqB,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAExC,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,0CAA0C;IAC1C,MAAM,EAAE,QAAQ,EAAE,CAAA;IAClB,oFAAoF;IACpF,MAAM,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,IAAI,EAAE,MAAM,EAAE,CAAA;CACf;AAKD;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,SAAU,SAAQ,IAAI;IACsB,MAAM,EAAE,QAAQ,EAAE,CAAA;IAC1B,MAAM,EAAE,YAAY,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IAEnE,6EAA6E;IAC7E,OAAO,CAAC,KAAK,CAAa;gBAEd,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,cAAc,CAAC;IAmCzD,+DAA+D;IAC/D,OAAO,CAAC,SAAS;IAwBjB;;;;;;OAMG;IACH,GAAG,CAAC,KAAK,SAAQ,GAAG,IAAI;IAIxB;;;;;;OAMG;IAEH,KAAK,CACH,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAC9D,QAAQ;CAkBZ"}
+{"version":3,"file":"pie-legend.d.ts","sourceRoot":"","sources":["../../src/pie-chart/pie-legend.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,MAAM,EACX,KAAK,SAAS,EAEd,KAAK,SAAS,IAAI,UAAU,EAC5B,KAAK,oBAAoB,IAAI,qBAAqB,EAClD,KAAK,mBAAmB,IAAI,oBAAoB,EAChD,KAAK,IAAI,IAAI,KAAK,EAClB,KAAK,YAAY,IAAI,aAAa,EAClC,KAAK,QAAQ,IAAI,SAAS,EAC1B,KAAK,YAAY,IAAI,aAAa,EAClC,KAAK,OAAO,IAAI,QAAQ,EACxB,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,gBAAgB,IAAI,iBAAiB,EAC1C,KAAK,eAAe,IAAI,gBAAgB,EACxC,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,cAAc,IAAI,eAAe,EACtC,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,cAAc,IAAI,eAAe,EACtC,KAAK,OAAO,IAAI,QAAQ,EACzB,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EAA8D,KAAK,OAAO,EAAE,MAAM,eAAe,CAAA;AACxG,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAExC,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,0CAA0C;IAC1C,MAAM,EAAE,QAAQ,EAAE,CAAA;IAClB,oFAAoF;IACpF,MAAM,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,IAAI,EAAE,MAAM,EAAE,CAAA;CACf;AAKD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+FpB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/pie-chart/pie-legend.js

@@ -1,12 +1,7 @@
-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;
-};
-import { command, Rect, Text, easeOut, property, textOps, } from "@motionscript/sdk";
+import { Flow, Paint, Rect, Shapes, Text, Types, component2d, textOps, } from "@motionscript/sdk";
+import { fresh } from "../kit/entries.js";
+import { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase } from "../kit/motion.js";
 import { DEFAULT_LEGEND, clampUnit, } from "../kit/shared.js";
-import { at, compose, hold } from "@motionscript/sdk/component";
 /** How far an entry starts to the right of its slot when it enters, in px. */
 const SLIDE = 16;
 /**
@@ -23,109 +18,100 @@ const SLIDE = 16;
  * shouldn't be in the chart shouldn't be in the table — removing one would
  * silently re-cut every other wedge's share, which is a different chart rather
  * than the same chart with something hidden. Selection is what a pie has
- * instead, and it arrives through {@link dims}.
+ * instead, and it arrives through {@link PieLegendProps.dims}.
  */
-export class PieLegend extends Rect {
-    /** One entry per slice, ordered top → bottom, for the staggered entrance. */
-    items = [];
-    constructor(props) {
-        // `flow` with the rest of the fixed geometry, and for the reason
-        // {@link ChartLegend} spells out: a `Rect` given none lays its children out
-        // `freeform`, so an unstated column is every caption drawn on top of the
-        // last one.
-        super({
-            ...props,
-            flow: "vertical",
-            align: "centerLeft",
-            width: "hug",
-            height: "hug",
-        });
-        // Fixed column geometry last, so it wins over what super() applied.
-        this.set({ gap: this.legend.itemGap / 3, padding: this.legend.padding });
-        for (let i = 0; i < this.slices.length; i++) {
-            const item = this.buildItem(this.slices[i]);
-            this.items.push(item);
-            // The selection dim rides a wrapper rather than the entry itself, so the
-            // entrance can animate the entry's own opacity without the two fighting
-            // over one value — opacity multiplies down the tree, which is exactly the
-            // composition wanted here.
-            this.add(new Rect({
-                width: "hug",
-                height: "hug",
-                flow: "freeform",
-                opacity: () => clampUnit(this.dims[i] ?? 1),
-                children: [item],
-            }));
-        }
-    }
-    /** One entry: the slice's colour swatch beside its caption. */
-    buildItem(slice) {
-        const marker = this.legend.markerStyle;
-        return new Rect({ flow: "horizontal",
-            gap: 12,
-            align: "center",
+export const PieLegend = component2d({
+    key: "pieLegend",
+    state: {
+        ...Paint.state,
+        ...Flow.state,
+        ...Shapes.corners,
+        slices: fresh(() => []),
+        legend: Types.custom(DEFAULT_LEGEND),
+        dims: fresh(() => []),
+        arrivals: arrivalsEntry(),
+    },
+    // A column, for the reason `ChartLegend` gives for its row: a `Rect` given no
+    // flow lays its children out `freeform`, every caption on top of the last.
+    defaults: {
+        flow: "vertical",
+        align: "centerLeft",
+        width: "hug",
+        height: "hug",
+        gap: (state) => state.legend.itemGap / 3,
+        padding: (state) => state.legend.padding,
+    },
+    // One entry per slice, ordered top → bottom. The selection dim rides a wrapper
+    // rather than the entry itself, so the entrance can animate the entry's own
+    // opacity without the two fighting over one value — opacity multiplies down
+    // the tree, which is exactly the composition wanted here.
+    children: (state) => {
+        const marker = state.legend.markerStyle;
+        return state.slices.map((_, index) => Rect({
             width: "hug",
             height: "hug",
+            flow: "freeform",
+            opacity: () => clampUnit(state.dims[index] ?? 1),
             children: [
-                new Rect({
-                    width: marker.height,
-                    height: marker.height,
-                    cornerRadius: marker.borderRadius,
-                    fill: slice.fill,
-                    stroke: marker.stroke,
-                    shadow: marker.shadow,
-                }),
-                new Text({
-                    ...textOps.styleProps(this.legend.textStyle),
-                    text: slice.category,
+                Rect({
+                    flow: "horizontal",
+                    gap: 12,
+                    align: "center",
+                    width: "hug",
+                    height: "hug",
+                    opacity: () => arrivalOf(state.arrivals, index).opacity,
+                    x: () => arrivalOf(state.arrivals, index).shift,
+                    children: [
+                        Rect({
+                            width: marker.height,
+                            height: marker.height,
+                            cornerRadius: marker.borderRadius,
+                            fill: () => state.slices[index]?.fill ?? "white",
+                            stroke: marker.stroke,
+                            shadow: marker.shadow,
+                        }),
+                        Text({
+                            ...textOps.styleProps(state.legend.textStyle),
+                            text: () => state.slices[index]?.category ?? "",
+                        }),
+                    ],
                 }),
             ],
-        });
-    }
-    /**
-     * Prime every entry at its pre-entrance state: shifted right and transparent.
-     *
-     * Idempotent, and separate from {@link enter} so the chart can arm its whole
-     * composition before the first frame is drawn — the resting state is the
-     * finished legend, so there is nothing hidden to reveal unless a scene asks.
-     */
-    arm(slide = SLIDE) {
-        for (const item of this.items)
-            item.set({ opacity: 0, x: slide });
-    }
-    /**
-     * Slide + fade every entry in from the right, staggered top-to-bottom.
-     *
-     * `duration` is the **whole** entrance: the stagger is carved out of it rather
-     * than added on top, so the command takes exactly the time the timeline laid
-     * out for it.
-     */
-    enter(args) {
-        const duration = args.duration;
-        const easing = args.easing ?? easeOut();
-        const items = this.items;
-        if (items.length === 0)
-            return hold(duration);
-        this.arm();
-        // Each gap is a fifth of an entry's own move, the rhythm the axes use;
-        // solved for from the budget rather than added to it. The offsets were
-        // always `i * step` — written as `wait` inside a generator they merely only
-        // existed while it ran.
-        const per = duration / (1 + Math.max(0, items.length - 1) / 5);
-        const step = per / 5;
-        return compose(items.map((item, i) => at(i * step, item.to({ data: { opacity: 1, x: 0 }, duration: per, easing }))));
-    }
-}
-__decorate([
-    property({ default: () => [] })
-], PieLegend.prototype, "slices", void 0);
-__decorate([
-    property({ default: DEFAULT_LEGEND })
-], PieLegend.prototype, "legend", void 0);
-__decorate([
-    property({ default: () => [] })
-], PieLegend.prototype, "dims", void 0);
-__decorate([
-    command()
-], PieLegend.prototype, "enter", null);
+        }));
+    },
+    commands: {
+        ...Paint.commands,
+        /**
+         * Every entry at its pre-entrance state, shifted right and transparent: what
+         * a chart shows ahead of this legend's own beat in its entrance, since
+         * `enter` arms the entries only on its first frame.
+         */
+        arm: (timeline, state) => timeline.animate(() => ({ arrivals: armed([...state.slices.keys()], { opacity: 0, shift: SLIDE }) })),
+        /**
+         * Slide + fade every entry in from the right, staggered top-to-bottom. Its
+         * first frame arms them all: shifted right and transparent.
+         *
+         * The timeline's duration is the **whole** entrance: the stagger is carved
+         * out of it rather than added on top, so the command takes exactly the time
+         * the timeline laid out for it.
+         */
+        enter: (timeline, state) => {
+            const count = state.slices.length;
+            if (count === 0)
+                return timeline.wait(timeline.duration);
+            const from = { opacity: 0, shift: SLIDE };
+            const arm = timeline.animate(() => ({ arrivals: armed([...state.slices.keys()], from) }));
+            // Each gap is a fifth of an entry's own move, the rhythm the axes use;
+            // solved for from the budget rather than added to it.
+            const per = timeline.duration / (1 + Math.max(0, count - 1) / 5);
+            const step = per / 5;
+            const ease = frameEase(timeline);
+            const entries = state.slices.map((_, i) => ({ at: i * step, duration: per, piece: arrival(timeline, i, from, ease) }));
+            return timeline.together([arm, beats(timeline, entries)]);
+        },
+    },
+    measure: (measurer, state, children) => Flow.measure(measurer, state, children, Paint.inset(state)),
+    layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),
+    render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),
+});
 //# sourceMappingURL=pie-legend.js.map

package/dist/pie-chart/pie-legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie-legend.js","sourceRoot":"","sources":["../../src/pie-chart/pie-legend.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  command,\n  Rect,\n  Text,\n  easeOut,\n  property,\n  textOps,\n  type CommandArgs,\n  type NodeConfig,\n  type RectProps,\n} from \"@motionscript/sdk\"\n\nimport {\n  DEFAULT_LEGEND,\n  clampUnit,\n  type LegendConfig,\n} from \"../kit/shared\"\nimport { at, compose, hold, type Seekable } from \"@motionscript/sdk/component\"\nimport type { PieSlice } from \"./shared\"\n\nexport interface PieLegendProps extends RectProps {\n  /** One entry per slice, in ring order. */\n  slices: PieSlice[]\n  /** Padding, caption style, gaps, and swatch geometry — see {@link LegendConfig}. */\n  legend: LegendConfig\n  /**\n   * Per-slice opacity multiplier, by index — the same signal that dims the ring,\n   * so an entry fades in step with the wedge it names. Missing entries read as 1.\n   */\n  dims: number[]\n}\n\n/** How far an entry starts to the right of its slot when it enters, in px. */\nconst SLIDE = 16\n\n/**\n * The legend of a {@link PieChart}: a **vertical-flow column** of entries, one per\n * slice, each pairing the slice's caption with its colour swatch.\n *\n * A column rather than the cartesian charts' row, because it sits *beside* the\n * ring rather than beneath the plot — a pie is as tall as it is wide, so the\n * space it leaves over is a vertical strip. It is otherwise the same entry: the\n * swatch carries the colour, the caption reads in the legend's neutral ink, and\n * both take the shared {@link LegendConfig}.\n *\n * There is no show/hide here. A pie's marks are its *rows*, and a row that\n * shouldn't be in the chart shouldn't be in the table — removing one would\n * silently re-cut every other wedge's share, which is a different chart rather\n * than the same chart with something hidden. Selection is what a pie has\n * instead, and it arrives through {@link dims}.\n */\nexport class PieLegend extends Rect {\n  @property({ default: () => [] as PieSlice[] }) declare slices: PieSlice[]\n  @property({ default: DEFAULT_LEGEND }) declare legend: LegendConfig\n  @property({ default: () => [] as number[] }) declare dims: number[]\n\n  /** One entry per slice, ordered top → bottom, for the staggered entrance. */\n  private items: Rect[] = []\n\n  constructor(props?: NodeConfig<PieLegend, PieLegendProps>) {\n    // `flow` with the rest of the fixed geometry, and for the reason\n    // {@link ChartLegend} spells out: a `Rect` given none lays its children out\n    // `freeform`, so an unstated column is every caption drawn on top of the\n    // last one.\n    super({\n      ...(props as RectProps),\n      flow: \"vertical\",\n      align: \"centerLeft\",\n      width: \"hug\",\n      height: \"hug\",\n    })\n\n    // Fixed column geometry last, so it wins over what super() applied.\n    this.set({ gap: this.legend.itemGap / 3, padding: this.legend.padding })\n\n    for (let i = 0; i < this.slices.length; i++) {\n      const item = this.buildItem(this.slices[i])\n      this.items.push(item)\n      // The selection dim rides a wrapper rather than the entry itself, so the\n      // entrance can animate the entry's own opacity without the two fighting\n      // over one value — opacity multiplies down the tree, which is exactly the\n      // composition wanted here.\n      this.add(\n        new Rect({\n          width: \"hug\",\n          height: \"hug\",\n          flow: \"freeform\",\n          opacity: () => clampUnit(this.dims[i] ?? 1),\n          children: [item],\n        })\n      )\n    }\n  }\n\n  /** One entry: the slice's colour swatch beside its caption. */\n  private buildItem(slice: PieSlice): Rect {\n    const marker = this.legend.markerStyle\n    return new Rect({ flow: \"horizontal\",\n      gap: 12,\n      align: \"center\",\n      width: \"hug\",\n      height: \"hug\",\n      children: [\n        new Rect({\n          width: marker.height,\n          height: marker.height,\n          cornerRadius: marker.borderRadius,\n          fill: slice.fill,\n          stroke: marker.stroke,\n          shadow: marker.shadow,\n        }),\n        new Text({\n          ...textOps.styleProps(this.legend.textStyle),\n          text: slice.category,\n        }),\n      ],\n    })\n  }\n\n  /**\n   * Prime every entry at its pre-entrance state: shifted right and transparent.\n   *\n   * Idempotent, and separate from {@link enter} so the chart can arm its whole\n   * composition before the first frame is drawn — the resting state is the\n   * finished legend, so there is nothing hidden to reveal unless a scene asks.\n   */\n  arm(slide = SLIDE): void {\n    for (const item of this.items) item.set({ opacity: 0, x: slide })\n  }\n\n  /**\n   * Slide + fade every entry in from the right, staggered top-to-bottom.\n   *\n   * `duration` is the **whole** entrance: the stagger is carved out of it rather\n   * than added on top, so the command takes exactly the time the timeline laid\n   * out for it.\n   */\n  @command()\n  enter(\n    args: CommandArgs<Record<string, never>> & { duration: number }\n  ): Seekable {\n    const duration = args.duration\n    const easing = args.easing ?? easeOut()\n    const items = this.items\n    if (items.length === 0) return hold(duration)\n    this.arm()\n\n    // Each gap is a fifth of an entry's own move, the rhythm the axes use;\n    // solved for from the budget rather than added to it. The offsets were\n    // always `i * step` — written as `wait` inside a generator they merely only\n    // existed while it ran.\n    const per = duration / (1 + Math.max(0, items.length - 1) / 5)\n    const step = per / 5\n\n    return compose(\n      items.map((item, i) => at(i * step, item.to({ data: { opacity: 1, x: 0 }, duration: per, easing })))\n    )\n  }\n}\n"]}
+{"version":3,"file":"pie-legend.js","sourceRoot":"","sources":["../../src/pie-chart/pie-legend.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Flow,\r\n  Paint,\r\n  Rect,\r\n  Shapes,\r\n  Text,\r\n  Types,\r\n  component2d,\r\n  textOps,\r\n  type NodeOf,\r\n  type RectProps,\r\n  // Named so the column's emitted type reaches the Rect surface it spreads through the sdk, not core.\r\n  type Alignment as _Alignment,\r\n  type CornerRadiusResolved as _CornerRadiusResolved,\r\n  type CornerStyleResolved as _CornerStyleResolved,\r\n  type Fill as _Fill,\r\n  type FillResolved as _FillResolved,\r\n  type FlowMode as _FlowMode,\r\n  type FlowResolved as _FlowResolved,\r\n  type GapSize as _GapSize,\r\n  type Node2D as _Node2D,\r\n  type Node2DProps as _Node2DProps,\r\n  type RectCornerRadius as _RectCornerRadius,\r\n  type RectCornerStyle as _RectCornerStyle,\r\n  type Shadow as _Shadow,\r\n  type ShadowResolved as _ShadowResolved,\r\n  type Stroke as _Stroke,\r\n  type StrokeResolved as _StrokeResolved,\r\n  type Vector2 as _Vector2,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport { fresh } from \"../kit/entries\"\r\nimport { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase, type Arrival } from \"../kit/motion\"\r\nimport {\r\n  DEFAULT_LEGEND,\r\n  clampUnit,\r\n  type LegendConfig,\r\n} from \"../kit/shared\"\r\nimport type { PieSlice } from \"./shared\"\r\n\r\nexport interface PieLegendProps extends RectProps {\r\n  /** One entry per slice, in ring order. */\r\n  slices: PieSlice[]\r\n  /** Padding, caption style, gaps, and swatch geometry — see {@link LegendConfig}. */\r\n  legend: LegendConfig\r\n  /**\r\n   * Per-slice opacity multiplier, by index — the same signal that dims the ring,\r\n   * so an entry fades in step with the wedge it names. Missing entries read as 1.\r\n   */\r\n  dims: number[]\r\n}\r\n\r\n/** How far an entry starts to the right of its slot when it enters, in px. */\r\nconst SLIDE = 16\r\n\r\n/**\r\n * The legend of a {@link PieChart}: a **vertical-flow column** of entries, one per\r\n * slice, each pairing the slice's caption with its colour swatch.\r\n *\r\n * A column rather than the cartesian charts' row, because it sits *beside* the\r\n * ring rather than beneath the plot — a pie is as tall as it is wide, so the\r\n * space it leaves over is a vertical strip. It is otherwise the same entry: the\r\n * swatch carries the colour, the caption reads in the legend's neutral ink, and\r\n * both take the shared {@link LegendConfig}.\r\n *\r\n * There is no show/hide here. A pie's marks are its *rows*, and a row that\r\n * shouldn't be in the chart shouldn't be in the table — removing one would\r\n * silently re-cut every other wedge's share, which is a different chart rather\r\n * than the same chart with something hidden. Selection is what a pie has\r\n * instead, and it arrives through {@link PieLegendProps.dims}.\r\n */\r\nexport const PieLegend = component2d({\r\n  key: \"pieLegend\",\r\n  state: {\r\n    ...Paint.state,\r\n    ...Flow.state,\r\n    ...Shapes.corners,\r\n    slices: fresh<PieSlice[]>(() => []),\r\n    legend: Types.custom<LegendConfig>(DEFAULT_LEGEND),\r\n    dims: fresh<number[]>(() => []),\r\n    arrivals: arrivalsEntry(),\r\n  },\r\n  // A column, for the reason `ChartLegend` gives for its row: a `Rect` given no\r\n  // flow lays its children out `freeform`, every caption on top of the last.\r\n  defaults: {\r\n    flow: \"vertical\",\r\n    align: \"centerLeft\",\r\n    width: \"hug\",\r\n    height: \"hug\",\r\n    gap: (state) => state.legend.itemGap / 3,\r\n    padding: (state) => state.legend.padding,\r\n  },\r\n  // One entry per slice, ordered top → bottom. The selection dim rides a wrapper\r\n  // rather than the entry itself, so the entrance can animate the entry's own\r\n  // opacity without the two fighting over one value — opacity multiplies down\r\n  // the tree, which is exactly the composition wanted here.\r\n  children: (state) => {\r\n    const marker = state.legend.markerStyle\r\n    return state.slices.map((_, index) =>\r\n      Rect({\r\n        width: \"hug\",\r\n        height: \"hug\",\r\n        flow: \"freeform\",\r\n        opacity: () => clampUnit(state.dims[index] ?? 1),\r\n        children: [\r\n          Rect({\r\n            flow: \"horizontal\",\r\n            gap: 12,\r\n            align: \"center\",\r\n            width: \"hug\",\r\n            height: \"hug\",\r\n            opacity: () => arrivalOf(state.arrivals, index).opacity,\r\n            x: () => arrivalOf(state.arrivals, index).shift,\r\n            children: [\r\n              Rect({\r\n                width: marker.height,\r\n                height: marker.height,\r\n                cornerRadius: marker.borderRadius,\r\n                fill: () => state.slices[index]?.fill ?? \"white\",\r\n                stroke: marker.stroke,\r\n                shadow: marker.shadow,\r\n              }),\r\n              Text({\r\n                ...textOps.styleProps(state.legend.textStyle),\r\n                text: () => state.slices[index]?.category ?? \"\",\r\n              }),\r\n            ],\r\n          }),\r\n        ],\r\n      })\r\n    )\r\n  },\r\n  commands: {\r\n    ...Paint.commands,\r\n    /**\r\n     * Every entry at its pre-entrance state, shifted right and transparent: what\r\n     * a chart shows ahead of this legend's own beat in its entrance, since\r\n     * `enter` arms the entries only on its first frame.\r\n     */\r\n    arm: (timeline, state) =>\r\n      timeline.animate(() => ({ arrivals: armed([...state.slices.keys()], { opacity: 0, shift: SLIDE }) })),\r\n    /**\r\n     * Slide + fade every entry in from the right, staggered top-to-bottom. Its\r\n     * first frame arms them all: shifted right and transparent.\r\n     *\r\n     * The timeline's duration is the **whole** entrance: the stagger is carved\r\n     * out of it rather than added on top, so the command takes exactly the time\r\n     * the timeline laid out for it.\r\n     */\r\n    enter: (timeline, state) => {\r\n      const count = state.slices.length\r\n      if (count === 0) return timeline.wait(timeline.duration)\r\n      const from: Arrival = { opacity: 0, shift: SLIDE }\r\n      const arm = timeline.animate(() => ({ arrivals: armed([...state.slices.keys()], from) }))\r\n      // Each gap is a fifth of an entry's own move, the rhythm the axes use;\r\n      // solved for from the budget rather than added to it.\r\n      const per = timeline.duration / (1 + Math.max(0, count - 1) / 5)\r\n      const step = per / 5\r\n      const ease = frameEase(timeline)\r\n      const entries = state.slices.map((_, i) => ({ at: i * step, duration: per, piece: arrival(timeline, i, from, ease) }))\r\n      return timeline.together([arm, beats(timeline, entries)])\r\n    },\r\n  },\r\n  measure: (measurer, state, children) => Flow.measure(measurer, state, children, Paint.inset(state)),\r\n  layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),\r\n  render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),\r\n})\r\n\r\nexport type PieLegend = NodeOf<typeof PieLegend>\r\n"]}