@motionscript/charts 0.1.0 → 0.1.1-alpha.0

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

@@ -1,38 +1,5 @@
-import { type DataRecord, type NodeOf, type Node2D, type Node2DProps } from "@motionscript/sdk";
+import { type DataRecord, type NodeOf, type Node2D, type Node2DProps as _Node2DProps } from "@motionscript/sdk";
 import { type PieChartConfig, type PieChartTheme, type PieLabelMode, type PieLabelPlacement } from "./shared.js";
-export interface PieChartProps extends Node2DProps {
-    /** One row per slice — a plain record of field name to value. */
-    data: DataRecord[];
-    /** Key into each row for its slice caption, used on the labels and the legend. */
-    categoryField: string;
-    /** Key into each row for its slice magnitude — the wedge's share of the ring. */
-    valueField: string;
-    /**
-     * The chart's visual theme — slice palette, ring geometry, label and centre
-     * type, legend. Every branch is optional and deep-merged onto
-     * {@link DEFAULT_PIE_CHART_THEME}.
-     */
-    theme?: PieChartTheme;
-    /** What the ring's labels say. */
-    labelMode?: PieLabelMode;
-    /** Where they sit: inside their wedge, outside on a leader, or nowhere. */
-    labelPlacement?: PieLabelPlacement;
-    /** Whether the legend column beside the ring is drawn at all. */
-    showLegend?: boolean;
-    /** Gap between the ring and the legend, in px. */
-    gap?: number;
-    /** Text set in the ring's hole — see `revealCenter`. */
-    centerLabel?: string;
-    /** Smaller second line under {@link centerLabel}. */
-    centerCaption?: string;
-    /**
-     * Whether the hole's summary is drawn at rest. `true` (the default) is the
-     * plain answer; a scene that wants the conclusion to land on a later beat sets
-     * this `false` and runs `revealCenter` when it gets there.
-     */
-    showCenter?: boolean;
-}
-/** What the selection reads: the rows, how they are cut, and the pops the commands move. */
 export interface PieChartValues {
     readonly data: DataRecord[];
     readonly categoryField: string;
@@ -40,46 +7,39 @@ export interface PieChartValues {
     readonly theme: PieChartConfig;
     readonly pops: number[];
 }
-/** Whether slice `index` is grown out past the ring's rim: past half way, so a slice mid-swell is not yet counted. */
+/** Whether slice `index` is past half way out, so a slice mid-swell is not yet counted. */
 export declare function isSliceSelected(s: PieChartValues, index: number): boolean;
 /**
- * A pie or donut chart, composed from two parts laid out by a horizontal-flow
- * {@link Rect} — the ring filling whatever the hugging legend leaves, both
- * centred:
+ * A pie or donut chart: a {@link PieRing} filling what the hugging {@link PieLegend}
+ * leaves. One mark per row, not per column, and nothing to hide, since dropping
+ * a slice would re-cut every other wedge; `selectSlice` and its siblings swell
+ * a slice and dim the rest instead.
  *
- * - {@link PieRing} — the wedges, each sized by its share of the total, with its
- *   label inside its own band or pinned outside on a leader line, and the
- *   summary in the hole.
- * - {@link PieLegend} — a column of swatch-and-caption rows naming each slice.
- *
- * **One mark per row, not per column**: a pie's palette is indexed by row and
- * there is nothing to hide, since dropping a slice would re-cut every other
- * wedge. `selectSlice` and its siblings are what a pie has instead — a slice
- * swells out of the ring and everything else dims behind it.
- *
- * **Resting state is the finished chart**; `enter` arms every part on its first
- * frame. The one exception is the hole's summary, which a scene can hold back
- * with `showCenter: false`, because it is usually the chart's *conclusion*.
+ * Resting state is the finished chart, except the hole's summary, which
+ * `showCenter: false` holds back for `revealCenter`.
  */
 export declare const PieChart: import("@motionscript/sdk").Component<"pieChart", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    /** Slice caption, used on the labels and the legend. */
     readonly categoryField: "";
+    /** Slice magnitude: the wedge's share of the ring. */
     readonly valueField: "";
     readonly theme: import("@motionscript/sdk").Type<PieChartTheme, PieChartConfig, false>;
+    /** What the ring's labels say. */
     readonly labelMode: import("@motionscript/sdk").Type<PieLabelMode, PieLabelMode, false>;
+    /** Where they sit: inside their wedge, outside on a leader, or nowhere. */
     readonly labelPlacement: import("@motionscript/sdk").Type<PieLabelPlacement, PieLabelPlacement, false>;
+    /** Gap between the ring and the legend, in px. */
     readonly gap: 40;
+    /** Text set in the ring's hole. */
     readonly centerLabel: "";
+    /** Smaller second line under `centerLabel`. */
     readonly centerCaption: "";
-    /**
-     * How far each slice is pushed out of the ring, `0`–`1` per index. Held here
-     * rather than on the ring because two parts read it: the wedges grow out by
-     * it, and the legend entries dim by it. Seeded flush, one to a row.
-     */
+    /** How far each slice is pushed out, `0`-`1` per index. Here, not on the ring, because the wedges and the legend both read it. */
     readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
     /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
     readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
-    /** Read as the chart is built: whether the hole's summary is drawn at rest. */
+    /** Read as the chart is built: whether the hole's summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */
     readonly showCenter: import("@motionscript/sdk").Type<boolean, boolean, false>;
 }>, {
     readonly enter: {};
@@ -94,45 +54,51 @@ export declare const PieChart: import("@motionscript/sdk").Component<"pieChart",
         readonly sliceIndex: import("@motionscript/sdk").Type<number, number, false>;
     };
     readonly clearSelection: {};
-}, readonly [], Node2D<Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+}, readonly [], Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    /** Slice caption, used on the labels and the legend. */
     readonly categoryField: "";
+    /** Slice magnitude: the wedge's share of the ring. */
     readonly valueField: "";
     readonly theme: import("@motionscript/sdk").Type<PieChartTheme, PieChartConfig, false>;
+    /** What the ring's labels say. */
     readonly labelMode: import("@motionscript/sdk").Type<PieLabelMode, PieLabelMode, false>;
+    /** Where they sit: inside their wedge, outside on a leader, or nowhere. */
     readonly labelPlacement: import("@motionscript/sdk").Type<PieLabelPlacement, PieLabelPlacement, false>;
+    /** Gap between the ring and the legend, in px. */
     readonly gap: 40;
+    /** Text set in the ring's hole. */
     readonly centerLabel: "";
+    /** Smaller second line under `centerLabel`. */
     readonly centerCaption: "";
-    /**
-     * How far each slice is pushed out of the ring, `0`–`1` per index. Held here
-     * rather than on the ring because two parts read it: the wedges grow out by
-     * it, and the legend entries dim by it. Seeded flush, one to a row.
-     */
+    /** How far each slice is pushed out, `0`-`1` per index. Here, not on the ring, because the wedges and the legend both read it. */
     readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
     /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
     readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
-    /** Read as the chart is built: whether the hole's summary is drawn at rest. */
+    /** Read as the chart is built: whether the hole's summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */
     readonly showCenter: import("@motionscript/sdk").Type<boolean, boolean, false>;
 }>, readonly [], import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    /** Slice caption, used on the labels and the legend. */
     readonly categoryField: "";
+    /** Slice magnitude: the wedge's share of the ring. */
     readonly valueField: "";
     readonly theme: import("@motionscript/sdk").Type<PieChartTheme, PieChartConfig, false>;
+    /** What the ring's labels say. */
     readonly labelMode: import("@motionscript/sdk").Type<PieLabelMode, PieLabelMode, false>;
+    /** Where they sit: inside their wedge, outside on a leader, or nowhere. */
     readonly labelPlacement: import("@motionscript/sdk").Type<PieLabelPlacement, PieLabelPlacement, false>;
+    /** Gap between the ring and the legend, in px. */
     readonly gap: 40;
+    /** Text set in the ring's hole. */
     readonly centerLabel: "";
+    /** Smaller second line under `centerLabel`. */
     readonly centerCaption: "";
-    /**
-     * How far each slice is pushed out of the ring, `0`–`1` per index. Held here
-     * rather than on the ring because two parts read it: the wedges grow out by
-     * it, and the legend entries dim by it. Seeded flush, one to a row.
-     */
+    /** How far each slice is pushed out, `0`-`1` per index. Here, not on the ring, because the wedges and the legend both read it. */
     readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
     /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
     readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
-    /** Read as the chart is built: whether the hole's summary is drawn at rest. */
+    /** Read as the chart is built: whether the hole's summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */
     readonly showCenter: import("@motionscript/sdk").Type<boolean, boolean, false>;
 }>, {
     readonly enter: {};
@@ -147,6 +113,6 @@ export declare const PieChart: import("@motionscript/sdk").Component<"pieChart",
         readonly sliceIndex: import("@motionscript/sdk").Type<number, number, false>;
     };
     readonly clearSelection: {};
-}, Node2D<Node2DProps>>>>;
+}, Node2D<_Node2DProps>>>>;
 export type PieChart = NodeOf<typeof PieChart>;
 //# sourceMappingURL=pie-chart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../src/pie-chart/pie-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,UAAU,EACf,KAAK,MAAM,EAEX,KAAK,MAAM,EACX,KAAK,WAAW,EAEjB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAEvB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,iEAAiE;IACjE,IAAI,EAAE,UAAU,EAAE,CAAA;IAClB,kFAAkF;IAClF,aAAa,EAAE,MAAM,CAAA;IACrB,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,kCAAkC;IAClC,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,iBAAiB,CAAA;IAClC,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,4FAA4F;AAC5F,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,CAAA;IAC3B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAA;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CACxB;AAqBD,sHAAsH;AACtH,wBAAgB,eAAe,CAAC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAEzE;AAsCD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;IAYjB;;;;OAIG;;IAEH,oFAAoF;;IAEpF,+EAA+E;;;;;;;;;;;;;;;;;;;;;;;;;IAR/E;;;;OAIG;;IAEH,oFAAoF;;IAEpF,+EAA+E;;;;;;;;;;;;IAR/E;;;;OAIG;;IAEH,oFAAoF;;IAEpF,+EAA+E;;;;;;;;;;;;;;;yBAyHjF,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,QAAQ,CAAC,CAAA"}
+{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../src/pie-chart/pie-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,MAAM,EAEX,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAM1B,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAEvB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,CAAA;IAC3B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAA;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CACxB;AAgBD,2FAA2F;AAC3F,wBAAgB,eAAe,CAAC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAEzE;AA4BD;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;;IAIjB,wDAAwD;;IAExD,sDAAsD;;;IAGtD,kCAAkC;;IAElC,2EAA2E;;IAE3E,kDAAkD;;IAElD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,kIAAkI;;IAElI,oFAAoF;;IAEpF,yJAAyJ;;;;;;;;;;;;;;;;;IAnBzJ,wDAAwD;;IAExD,sDAAsD;;;IAGtD,kCAAkC;;IAElC,2EAA2E;;IAE3E,kDAAkD;;IAElD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,kIAAkI;;IAElI,oFAAoF;;IAEpF,yJAAyJ;;;;IAnBzJ,wDAAwD;;IAExD,sDAAsD;;;IAGtD,kCAAkC;;IAElC,2EAA2E;;IAE3E,kDAAkD;;IAElD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,kIAAkI;;IAElI,oFAAoF;;IAEpF,yJAAyJ;;;;;;;;;;;;;;;0BA6G3J,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,QAAQ,CAAC,CAAA"}

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

@@ -1,55 +1,40 @@
-import { Rect, Types, component2d, easeOut, } from "@motionscript/sdk";
+import { Rect, Types, clamp, component2d, easeOut, } from "@motionscript/sdk";
 import { asParts, fresh } from "../kit/entries.js";
 import { beats } from "../kit/motion.js";
-import { clampUnit } from "../kit/shared.js";
 import { PieLegend } from "./pie-legend.js";
 import { PieRing } from "./pie-ring.js";
-import { DEFAULT_PIE_CHART_THEME, lerpPieChartTheme, resolvePieChartTheme, resolvePieSlices, } from "./shared.js";
-/**
- * How `enter` divides its duration: the wedges sweeping in, then the labels and
- * the legend arriving together. Shares of the whole, so they sum to 1.
- */
+import { DEFAULT_PIE_CHART_THEME, lerpPieChartTheme, resolvePieChartTheme, resolvePieSlices, selectionFade, } from "./shared.js";
+/** How `enter` divides its duration: wedges sweeping in, then labels and legend together. Sums to 1. */
 const SWEEP_SHARE = 0.65;
 const LABEL_SHARE = 0.35;
 const SLICE_ARG = Types.number(0, { min: 0, step: 1 });
-/** The slices the ring and the legend draw, resolved from the rows and the palette. */
 function slicesOf(s) {
     return resolvePieSlices(s.data, s.categoryField, s.valueField, s.theme.sliceFills);
 }
-/** How far slice `index` is pushed out, in `[0, 1]`. */
 function popAt(s, index) {
-    return clampUnit(s.pops[index] ?? 0);
+    return clamp(s.pops[index] ?? 0, 0, 1);
 }
-/** Whether slice `index` is grown out past the ring's rim: past half way, so a slice mid-swell is not yet counted. */
+/** Whether slice `index` is past half way out, so a slice mid-swell is not yet counted. */
 export function isSliceSelected(s, index) {
     return popAt(s, index) > 0.5;
 }
-/**
- * How far each slice is dimmed by the selection, one entry per slice: 1 while
- * nothing is out, and for the selected slice itself; falling toward the theme's
- * `dimOpacity` for the rest in proportion to how far the selection has grown.
- */
+/** Per-slice opacity: 1 while nothing is out and for the selected slice, falling toward `dimOpacity` for the rest as the selection grows. */
 function sliceDims(s) {
     let focus = 0;
     for (let i = 0; i < s.data.length; i++)
         focus = Math.max(focus, popAt(s, i));
     const dim = s.theme.spotlight.dimOpacity;
-    if (focus <= 0)
-        return s.data.map(() => 1);
-    return s.data.map((_, i) => 1 - (1 - clampUnit(dim)) * focus * (1 - popAt(s, i)));
+    return s.data.map((_, i) => selectionFade(focus, dim, popAt(s, i)));
 }
-/**
- * Every slice's pop eased from where it is to what `pop` asks for. A move that
- * changes nothing still takes its slot, writing nothing.
- */
+/** Every slice's pop eased to what `pop` asks for. A move that changes nothing still takes its slot. */
 function popping(timeline, s, pop) {
     const from = s.data.map((_, i) => popAt(s, i));
-    const targets = s.data.map((_, i) => clampUnit(pop(i)));
+    const targets = s.data.map((_, i) => clamp(pop(i), 0, 1));
     if (from.every((value, i) => value === targets[i]))
         return timeline.wait(timeline.duration);
     return timeline.animate((t) => ({ pops: from.map((value, i) => value + (targets[i] - value) * t) }));
 }
-/** The ring and the legend, found through the chart's children: the last row of them is the one it built. */
+/** The ring and legend among the children; the last row is the one the chart built. */
 function partsOf(children) {
     for (let i = children.length - 1; i >= 0; i--) {
         const row = children[i];
@@ -60,57 +45,48 @@ function partsOf(children) {
     return null;
 }
 /**
- * A pie or donut chart, composed from two parts laid out by a horizontal-flow
- * {@link Rect} — the ring filling whatever the hugging legend leaves, both
- * centred:
- *
- * - {@link PieRing} — the wedges, each sized by its share of the total, with its
- *   label inside its own band or pinned outside on a leader line, and the
- *   summary in the hole.
- * - {@link PieLegend} — a column of swatch-and-caption rows naming each slice.
- *
- * **One mark per row, not per column**: a pie's palette is indexed by row and
- * there is nothing to hide, since dropping a slice would re-cut every other
- * wedge. `selectSlice` and its siblings are what a pie has instead — a slice
- * swells out of the ring and everything else dims behind it.
+ * A pie or donut chart: a {@link PieRing} filling what the hugging {@link PieLegend}
+ * leaves. One mark per row, not per column, and nothing to hide, since dropping
+ * a slice would re-cut every other wedge; `selectSlice` and its siblings swell
+ * a slice and dim the rest instead.
  *
- * **Resting state is the finished chart**; `enter` arms every part on its first
- * frame. The one exception is the hole's summary, which a scene can hold back
- * with `showCenter: false`, because it is usually the chart's *conclusion*.
+ * Resting state is the finished chart, except the hole's summary, which
+ * `showCenter: false` holds back for `revealCenter`.
  */
 export const PieChart = component2d({
     key: "pieChart",
     state: {
         data: fresh(() => []),
+        /** Slice caption, used on the labels and the legend. */
         categoryField: "",
+        /** Slice magnitude: the wedge's share of the ring. */
         valueField: "",
         theme: Types.custom(DEFAULT_PIE_CHART_THEME, { resolve: resolvePieChartTheme, lerp: lerpPieChartTheme }),
+        /** What the ring's labels say. */
         labelMode: Types.custom("percent"),
+        /** Where they sit: inside their wedge, outside on a leader, or nowhere. */
         labelPlacement: Types.custom("leader"),
+        /** Gap between the ring and the legend, in px. */
         gap: 40,
+        /** Text set in the ring's hole. */
         centerLabel: "",
+        /** Smaller second line under `centerLabel`. */
         centerCaption: "",
-        /**
-         * How far each slice is pushed out of the ring, `0`–`1` per index. Held here
-         * rather than on the ring because two parts read it: the wedges grow out by
-         * it, and the legend entries dim by it. Seeded flush, one to a row.
-         */
+        /** How far each slice is pushed out, `0`-`1` per index. Here, not on the ring, because the wedges and the legend both read it. */
         pops: fresh(() => []),
         /** 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 the hole's summary is drawn at rest. */
+        /** Read as the chart is built: whether the hole's summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */
         showCenter: Types.boolean(true, { animatable: false }),
     },
     defaults: {
-        // Its parts fill it; a node made of them would hug them.
+        // A node made of parts that fill would otherwise hug them.
         width: "fill",
         height: "fill",
         pops: (state) => slicesOf(state).map(() => 0),
     },
     allowedChildren: [],
-    // The slice *structure* (one label and one legend row per row) is read once;
-    // the slices themselves, their paint and the selection are bound, so a theme
-    // tween re-paints and a `set` of `data` re-cuts the wedges.
+    // The structure (a label and legend row per row) is read once; slices, paint and selection are bound, so a theme tween re-paints and a `set` of `data` re-cuts.
     children: (state) => {
         const theme = () => state.theme;
         const slices = () => slicesOf(state);
@@ -136,8 +112,7 @@ export const PieChart = component2d({
                 slices,
                 legend: () => theme().legend,
                 dims: () => sliceDims(state),
-                // The column's spacing is the theme's as the chart was built, like the
-                // entries' type and chips.
+                // Spacing is fixed as built.
                 gap: state.theme.legend.itemGap / 3,
                 padding: state.theme.legend.padding,
             }));
@@ -146,15 +121,10 @@ export const PieChart = component2d({
         return asParts([row]);
     },
     commands: {
-        /**
-         * Animate the whole chart in: the wedges sweep in clockwise from the theme's
-         * `startAngle`, then the labels fade up and the legend staggers in together.
-         * Its first frame arms the wedges, the labels and the legend; the hole's
-         * summary keeps its own signal. `duration` is the **whole** entrance.
-         */
+        /** Wedges sweep in clockwise from `startAngle`, then labels fade up and the legend staggers in. `duration` is the whole entrance; the hole's summary keeps its own signal. */
         enter: {
             args: {},
-            // Held from the chart's arrival, so it never shows finished ahead of its draw.
+            // Held from arrival, so it never shows finished ahead of its draw.
             entrance: true,
             easing: easeOut(),
             run: (timeline, _state, children) => {
@@ -174,11 +144,7 @@ export const PieChart = component2d({
                 ]);
             },
         },
-        /**
-         * Fade the hole's summary up. Held out of `enter` on purpose: what sits in a
-         * donut's hole is usually the chart's conclusion, so the scene lands it on
-         * its own beat. Pair it with `showCenter: false`.
-         */
+        /** Fade the hole's summary up. Not part of `enter`: it is usually the conclusion, which a scene lands on its own beat. */
         revealCenter: {
             args: {},
             easing: easeOut(),

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

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../src/pie-chart/pie-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Rect,\n  Types,\n  component2d,\n  easeOut,\n  type ChildView,\n  type DataRecord,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\n  type Node2D,\n  type Node2DProps,\n  type Timeline,\n} from \"@motionscript/sdk\"\n\nimport { asParts, fresh } from \"../kit/entries\"\nimport { beats, type Beat } from \"../kit/motion\"\nimport { clampUnit } from \"../kit/shared\"\nimport { PieLegend } from \"./pie-legend\"\nimport { PieRing } from \"./pie-ring\"\nimport {\n  DEFAULT_PIE_CHART_THEME,\n  lerpPieChartTheme,\n  resolvePieChartTheme,\n  resolvePieSlices,\n  type PieChartConfig,\n  type PieChartTheme,\n  type PieLabelMode,\n  type PieLabelPlacement,\n  type PieSlice,\n} from \"./shared\"\n\nexport interface PieChartProps extends Node2DProps {\n  /** One row per slice — a plain record of field name to value. */\n  data: DataRecord[]\n  /** Key into each row for its slice caption, used on the labels and the legend. */\n  categoryField: string\n  /** Key into each row for its slice magnitude — the wedge's share of the ring. */\n  valueField: string\n  /**\n   * The chart's visual theme — slice palette, ring geometry, label and centre\n   * type, legend. Every branch is optional and deep-merged onto\n   * {@link DEFAULT_PIE_CHART_THEME}.\n   */\n  theme?: PieChartTheme\n  /** What the ring's labels say. */\n  labelMode?: PieLabelMode\n  /** Where they sit: inside their wedge, outside on a leader, or nowhere. */\n  labelPlacement?: PieLabelPlacement\n  /** Whether the legend column beside the ring is drawn at all. */\n  showLegend?: boolean\n  /** Gap between the ring and the legend, in px. */\n  gap?: number\n  /** Text set in the ring's hole — see `revealCenter`. */\n  centerLabel?: string\n  /** Smaller second line under {@link centerLabel}. */\n  centerCaption?: string\n  /**\n   * Whether the hole's summary is drawn at rest. `true` (the default) is the\n   * plain answer; a scene that wants the conclusion to land on a later beat sets\n   * this `false` and runs `revealCenter` when it gets there.\n   */\n  showCenter?: boolean\n}\n\n/** What the selection reads: the rows, how they are cut, and the pops the commands move. */\nexport interface PieChartValues {\n  readonly data: DataRecord[]\n  readonly categoryField: string\n  readonly valueField: string\n  readonly theme: PieChartConfig\n  readonly pops: number[]\n}\n\n/**\n * How `enter` divides its duration: the wedges sweeping in, then the labels and\n * the legend arriving together. Shares of the whole, so they sum to 1.\n */\nconst SWEEP_SHARE = 0.65\nconst LABEL_SHARE = 0.35\n\nconst SLICE_ARG = Types.number(0, { min: 0, step: 1 })\n\n/** The slices the ring and the legend draw, resolved from the rows and the palette. */\nfunction slicesOf(s: PieChartValues): PieSlice[] {\n  return resolvePieSlices(s.data, s.categoryField, s.valueField, s.theme.sliceFills)\n}\n\n/** How far slice `index` is pushed out, in `[0, 1]`. */\nfunction popAt(s: PieChartValues, index: number): number {\n  return clampUnit(s.pops[index] ?? 0)\n}\n\n/** Whether slice `index` is grown out past the ring's rim: past half way, so a slice mid-swell is not yet counted. */\nexport function isSliceSelected(s: PieChartValues, index: number): boolean {\n  return popAt(s, index) > 0.5\n}\n\n/**\n * How far each slice is dimmed by the selection, one entry per slice: 1 while\n * nothing is out, and for the selected slice itself; falling toward the theme's\n * `dimOpacity` for the rest in proportion to how far the selection has grown.\n */\nfunction sliceDims(s: PieChartValues): number[] {\n  let focus = 0\n  for (let i = 0; i < s.data.length; i++) focus = Math.max(focus, popAt(s, i))\n  const dim = s.theme.spotlight.dimOpacity\n  if (focus <= 0) return s.data.map(() => 1)\n  return s.data.map((_, i) => 1 - (1 - clampUnit(dim)) * focus * (1 - popAt(s, i)))\n}\n\ntype AnyTimeline = Timeline<any, any>\n\n/**\n * Every slice's pop eased from where it is to what `pop` asks for. A move that\n * changes nothing still takes its slot, writing nothing.\n */\nfunction popping(timeline: AnyTimeline, s: PieChartValues, pop: (index: number) => number) {\n  const from = s.data.map((_, i) => popAt(s, i))\n  const targets = s.data.map((_, i) => clampUnit(pop(i)))\n  if (from.every((value, i) => value === targets[i])) return timeline.wait(timeline.duration)\n  return timeline.animate((t) => ({ pops: from.map((value, i) => value + (targets[i] - value) * t) }))\n}\n\n/** The ring and the legend, found through the chart's children: the last row of them is the one it built. */\nfunction partsOf(children: readonly ChildView[]) {\n  for (let i = children.length - 1; i >= 0; i--) {\n    const row = children[i]\n    const ring = Rect.is(row) ? row.children.find(PieRing.is) : undefined\n    if (ring) return { ring, legend: row.children.find(PieLegend.is) ?? null }\n  }\n  return null\n}\n\n/**\n * A pie or donut chart, composed from two parts laid out by a horizontal-flow\n * {@link Rect} — the ring filling whatever the hugging legend leaves, both\n * centred:\n *\n * - {@link PieRing} — the wedges, each sized by its share of the total, with its\n *   label inside its own band or pinned outside on a leader line, and the\n *   summary in the hole.\n * - {@link PieLegend} — a column of swatch-and-caption rows naming each slice.\n *\n * **One mark per row, not per column**: a pie's palette is indexed by row and\n * there is nothing to hide, since dropping a slice would re-cut every other\n * wedge. `selectSlice` and its siblings are what a pie has instead — a slice\n * swells out of the ring and everything else dims behind it.\n *\n * **Resting state is the finished chart**; `enter` arms every part on its first\n * frame. The one exception is the hole's summary, which a scene can hold back\n * with `showCenter: false`, because it is usually the chart's *conclusion*.\n */\nexport const PieChart = component2d({\n  key: \"pieChart\",\n  state: {\n    data: fresh<DataRecord[]>(() => []),\n    categoryField: \"\",\n    valueField: \"\",\n    theme: Types.custom<PieChartTheme, PieChartConfig>(DEFAULT_PIE_CHART_THEME, { resolve: resolvePieChartTheme, lerp: lerpPieChartTheme }),\n    labelMode: Types.custom<PieLabelMode>(\"percent\"),\n    labelPlacement: Types.custom<PieLabelPlacement>(\"leader\"),\n    gap: 40,\n    centerLabel: \"\",\n    centerCaption: \"\",\n    /**\n     * How far each slice is pushed out of the ring, `0`–`1` per index. Held here\n     * rather than on the ring because two parts read it: the wedges grow out by\n     * it, and the legend entries dim by it. Seeded flush, one to a row.\n     */\n    pops: fresh<number[]>(() => []),\n    /** Read as the chart is built: the legend is a part the chart builds or doesn't. */\n    showLegend: Types.boolean(true, { animatable: false }),\n    /** Read as the chart is built: whether the hole's summary is drawn at rest. */\n    showCenter: Types.boolean(true, { animatable: false }),\n  },\n  defaults: {\n    // Its parts fill it; a node made of them would hug them.\n    width: \"fill\",\n    height: \"fill\",\n    pops: (state) => slicesOf(state).map(() => 0),\n  },\n  allowedChildren: [],\n  // The slice *structure* (one label and one legend row per row) is read once;\n  // the slices themselves, their paint and the selection are bound, so a theme\n  // tween re-paints and a `set` of `data` re-cuts the wedges.\n  children: (state) => {\n    const theme = () => state.theme\n    const slices = () => slicesOf(state)\n    const parts: Node2D[] = [\n      new PieRing({\n        width: \"fill\",\n        height: \"fill\",\n        slices,\n        ring: () => theme().ring,\n        label: () => theme().label,\n        centerStyle: () => theme().center,\n        labelMode: state.labelMode,\n        labelPlacement: state.labelPlacement,\n        pops: () => state.pops,\n        dimOpacity: () => theme().spotlight.dimOpacity,\n        centerLabel: state.centerLabel,\n        centerCaption: state.centerCaption,\n        centerReveal: state.showCenter === false ? 0 : 1,\n      }) as unknown as Node2D,\n    ]\n    if (state.showLegend !== false) {\n      parts.push(\n        new PieLegend({\n          slices,\n          legend: () => theme().legend,\n          dims: () => sliceDims(state),\n          // The column's spacing is the theme's as the chart was built, like the\n          // entries' type and chips.\n          gap: state.theme.legend.itemGap / 3,\n          padding: state.theme.legend.padding,\n        }) as unknown as Node2D\n      )\n    }\n    const row = new Rect({ flow: \"horizontal\", width: \"fill\", height: \"fill\", gap: state.gap, align: \"center\", children: parts })\n    return asParts([row as unknown as Node2D])\n  },\n  commands: {\n    /**\n     * Animate the whole chart in: the wedges sweep in clockwise from the theme's\n     * `startAngle`, then the labels fade up and the legend staggers in together.\n     * Its first frame arms the wedges, the labels and the legend; the hole's\n     * summary keeps its own signal. `duration` is the **whole** entrance.\n     */\n    enter: {\n      args: {},\n      // Held from the chart's arrival, so it never shows finished ahead of its draw.\n      entrance: true,\n      easing: easeOut(),\n      run: (timeline, _state, children) => {\n        const parts = partsOf(children)\n        if (!parts) return timeline.wait(timeline.duration)\n        const { ring, legend } = parts\n        const sweep = timeline.duration * SWEEP_SHARE\n        const labels = timeline.duration * LABEL_SHARE\n        const at0 = (piece: Beat[\"piece\"]): Beat => ({ at: 0, duration: 0, piece })\n        return beats(timeline, [\n          at0(ring.to({ growth: 0, labelReveal: 0 })),\n          ...(legend ? [at0(legend.run(\"arm\"))] : []),\n          { at: 0, duration: sweep, piece: ring.run(\"sweep\") },\n          { at: sweep, duration: labels, piece: ring.run(\"revealLabels\") },\n          ...(legend ? [{ at: sweep, duration: labels, piece: legend.run(\"enter\") }] : []),\n        ])\n      },\n    },\n    /**\n     * Fade the hole's summary up. Held out of `enter` on purpose: what sits in a\n     * donut's hole is usually the chart's conclusion, so the scene lands it on\n     * its own beat. Pair it with `showCenter: false`.\n     */\n    revealCenter: {\n      args: {},\n      easing: easeOut(),\n      run: (timeline, _state, children) => partsOf(children)?.ring.run(\"revealCenter\") ?? timeline.wait(timeline.duration),\n    },\n    /** Grow slice `index` out past the ring's rim and dim the rest, leaving any other selected slice where it is. */\n    selectSlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 1 : popAt(state, i)))\n      },\n    },\n    /** Settle slice `index` back flush with the ring. */\n    deselectSlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 0 : popAt(state, i)))\n      },\n    },\n    /** Move the focus to slice `index` alone, settling whatever else was out. */\n    selectOnlySlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 1 : 0))\n      },\n    },\n    /** Settle every slice flush and bring the whole chart back to full. */\n    clearSelection: {\n      args: {},\n      easing: easeOut(),\n      run: (timeline, state) => popping(timeline, state, () => 0),\n    },\n  },\n})\n\nexport type PieChart = NodeOf<typeof PieChart>\n"]}
+{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../src/pie-chart/pie-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Rect,\n  Types,\n  clamp,\n  component2d,\n  easeOut,\n  type ChildView,\n  type DataRecord,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D,\n  type Node2DProps as _Node2DProps,\n} from \"@motionscript/sdk\"\n\nimport { asParts, fresh } from \"../kit/entries\"\nimport { beats, type AnyTimeline, type Beat } from \"../kit/motion\"\nimport { PieLegend } from \"./pie-legend\"\nimport { PieRing } from \"./pie-ring\"\nimport {\n  DEFAULT_PIE_CHART_THEME,\n  lerpPieChartTheme,\n  resolvePieChartTheme,\n  resolvePieSlices,\n  selectionFade,\n  type PieChartConfig,\n  type PieChartTheme,\n  type PieLabelMode,\n  type PieLabelPlacement,\n  type PieSlice,\n} from \"./shared\"\n\nexport interface PieChartValues {\n  readonly data: DataRecord[]\n  readonly categoryField: string\n  readonly valueField: string\n  readonly theme: PieChartConfig\n  readonly pops: number[]\n}\n\n/** How `enter` divides its duration: wedges sweeping in, then labels and legend together. Sums to 1. */\nconst SWEEP_SHARE = 0.65\nconst LABEL_SHARE = 0.35\n\nconst SLICE_ARG = Types.number(0, { min: 0, step: 1 })\n\nfunction slicesOf(s: PieChartValues): PieSlice[] {\n  return resolvePieSlices(s.data, s.categoryField, s.valueField, s.theme.sliceFills)\n}\n\nfunction popAt(s: PieChartValues, index: number): number {\n  return clamp(s.pops[index] ?? 0, 0, 1)\n}\n\n/** Whether slice `index` is past half way out, so a slice mid-swell is not yet counted. */\nexport function isSliceSelected(s: PieChartValues, index: number): boolean {\n  return popAt(s, index) > 0.5\n}\n\n/** Per-slice opacity: 1 while nothing is out and for the selected slice, falling toward `dimOpacity` for the rest as the selection grows. */\nfunction sliceDims(s: PieChartValues): number[] {\n  let focus = 0\n  for (let i = 0; i < s.data.length; i++) focus = Math.max(focus, popAt(s, i))\n  const dim = s.theme.spotlight.dimOpacity\n  return s.data.map((_, i) => selectionFade(focus, dim, popAt(s, i)))\n}\n\n/** Every slice's pop eased to what `pop` asks for. A move that changes nothing still takes its slot. */\nfunction popping(timeline: AnyTimeline, s: PieChartValues, pop: (index: number) => number) {\n  const from = s.data.map((_, i) => popAt(s, i))\n  const targets = s.data.map((_, i) => clamp(pop(i), 0, 1))\n  if (from.every((value, i) => value === targets[i])) return timeline.wait(timeline.duration)\n  return timeline.animate((t) => ({ pops: from.map((value, i) => value + (targets[i] - value) * t) }))\n}\n\n/** The ring and legend among the children; the last row is the one the chart built. */\nfunction partsOf(children: readonly ChildView[]) {\n  for (let i = children.length - 1; i >= 0; i--) {\n    const row = children[i]\n    const ring = Rect.is(row) ? row.children.find(PieRing.is) : undefined\n    if (ring) return { ring, legend: row.children.find(PieLegend.is) ?? null }\n  }\n  return null\n}\n\n/**\n * A pie or donut chart: a {@link PieRing} filling what the hugging {@link PieLegend}\n * leaves. One mark per row, not per column, and nothing to hide, since dropping\n * a slice would re-cut every other wedge; `selectSlice` and its siblings swell\n * a slice and dim the rest instead.\n *\n * Resting state is the finished chart, except the hole's summary, which\n * `showCenter: false` holds back for `revealCenter`.\n */\nexport const PieChart = component2d({\n  key: \"pieChart\",\n  state: {\n    data: fresh<DataRecord[]>(() => []),\n    /** Slice caption, used on the labels and the legend. */\n    categoryField: \"\",\n    /** Slice magnitude: the wedge's share of the ring. */\n    valueField: \"\",\n    theme: Types.custom<PieChartTheme, PieChartConfig>(DEFAULT_PIE_CHART_THEME, { resolve: resolvePieChartTheme, lerp: lerpPieChartTheme }),\n    /** What the ring's labels say. */\n    labelMode: Types.custom<PieLabelMode>(\"percent\"),\n    /** Where they sit: inside their wedge, outside on a leader, or nowhere. */\n    labelPlacement: Types.custom<PieLabelPlacement>(\"leader\"),\n    /** Gap between the ring and the legend, in px. */\n    gap: 40,\n    /** Text set in the ring's hole. */\n    centerLabel: \"\",\n    /** Smaller second line under `centerLabel`. */\n    centerCaption: \"\",\n    /** How far each slice is pushed out, `0`-`1` per index. Here, not on the ring, because the wedges and the legend both read it. */\n    pops: fresh<number[]>(() => []),\n    /** Read as the chart is built: the legend is a part the chart builds or doesn't. */\n    showLegend: Types.boolean(true, { animatable: false }),\n    /** Read as the chart is built: whether the hole's summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */\n    showCenter: Types.boolean(true, { animatable: false }),\n  },\n  defaults: {\n    // A node made of parts that fill would otherwise hug them.\n    width: \"fill\",\n    height: \"fill\",\n    pops: (state) => slicesOf(state).map(() => 0),\n  },\n  allowedChildren: [],\n  // The structure (a label and legend row per row) is read once; slices, paint and selection are bound, so a theme tween re-paints and a `set` of `data` re-cuts.\n  children: (state) => {\n    const theme = () => state.theme\n    const slices = () => slicesOf(state)\n    const parts: Node2D[] = [\n      new PieRing({\n        width: \"fill\",\n        height: \"fill\",\n        slices,\n        ring: () => theme().ring,\n        label: () => theme().label,\n        centerStyle: () => theme().center,\n        labelMode: state.labelMode,\n        labelPlacement: state.labelPlacement,\n        pops: () => state.pops,\n        dimOpacity: () => theme().spotlight.dimOpacity,\n        centerLabel: state.centerLabel,\n        centerCaption: state.centerCaption,\n        centerReveal: state.showCenter === false ? 0 : 1,\n      }) as unknown as Node2D,\n    ]\n    if (state.showLegend !== false) {\n      parts.push(\n        new PieLegend({\n          slices,\n          legend: () => theme().legend,\n          dims: () => sliceDims(state),\n          // Spacing is fixed as built.\n          gap: state.theme.legend.itemGap / 3,\n          padding: state.theme.legend.padding,\n        }) as unknown as Node2D\n      )\n    }\n    const row = new Rect({ flow: \"horizontal\", width: \"fill\", height: \"fill\", gap: state.gap, align: \"center\", children: parts })\n    return asParts([row as unknown as Node2D])\n  },\n  commands: {\n    /** Wedges sweep in clockwise from `startAngle`, then labels fade up and the legend staggers in. `duration` is the whole entrance; the hole's summary keeps its own signal. */\n    enter: {\n      args: {},\n      // Held from arrival, so it never shows finished ahead of its draw.\n      entrance: true,\n      easing: easeOut(),\n      run: (timeline, _state, children) => {\n        const parts = partsOf(children)\n        if (!parts) return timeline.wait(timeline.duration)\n        const { ring, legend } = parts\n        const sweep = timeline.duration * SWEEP_SHARE\n        const labels = timeline.duration * LABEL_SHARE\n        const at0 = (piece: Beat[\"piece\"]): Beat => ({ at: 0, duration: 0, piece })\n        return beats(timeline, [\n          at0(ring.to({ growth: 0, labelReveal: 0 })),\n          ...(legend ? [at0(legend.run(\"arm\"))] : []),\n          { at: 0, duration: sweep, piece: ring.run(\"sweep\") },\n          { at: sweep, duration: labels, piece: ring.run(\"revealLabels\") },\n          ...(legend ? [{ at: sweep, duration: labels, piece: legend.run(\"enter\") }] : []),\n        ])\n      },\n    },\n    /** Fade the hole's summary up. Not part of `enter`: it is usually the conclusion, which a scene lands on its own beat. */\n    revealCenter: {\n      args: {},\n      easing: easeOut(),\n      run: (timeline, _state, children) => partsOf(children)?.ring.run(\"revealCenter\") ?? timeline.wait(timeline.duration),\n    },\n    /** Grow slice `index` out past the ring's rim and dim the rest, leaving any other selected slice where it is. */\n    selectSlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 1 : popAt(state, i)))\n      },\n    },\n    /** Settle slice `index` back flush with the ring. */\n    deselectSlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 0 : popAt(state, i)))\n      },\n    },\n    /** Move the focus to slice `index` alone, settling whatever else was out. */\n    selectOnlySlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 1 : 0))\n      },\n    },\n    /** Settle every slice flush and bring the whole chart back to full. */\n    clearSelection: {\n      args: {},\n      easing: easeOut(),\n      run: (timeline, state) => popping(timeline, state, () => 0),\n    },\n  },\n})\n\nexport type PieChart = NodeOf<typeof PieChart>\n"]}

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

@@ -1,37 +1,18 @@
-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 NodeOf, 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 { PieSlice } from "./shared.js";
-export interface PieLegendProps extends RectProps {
-    /** One entry per slice, in ring order. */
-    slices: PieSlice[];
-    /** Padding, caption style, gaps, and swatch geometry — see {@link LegendConfig}. */
-    legend: LegendConfig;
-    /**
-     * Per-slice opacity multiplier, by index — the same signal that dims the ring,
-     * so an entry fades in step with the wedge it names. Missing entries read as 1.
-     */
-    dims: number[];
-}
 /**
- * The legend of a {@link PieChart}: a **vertical-flow column** of entries, one per
- * slice, each pairing the slice's caption with its colour swatch.
- *
- * A column rather than the cartesian charts' row, because it sits *beside* the
- * ring rather than beneath the plot — a pie is as tall as it is wide, so the
- * space it leaves over is a vertical strip. It is otherwise the same entry: the
- * swatch carries the colour, the caption reads in the legend's neutral ink, and
- * both take the shared {@link LegendConfig}.
- *
- * There is no show/hide here. A pie's marks are its *rows*, and a row that
- * 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 PieLegendProps.dims}.
+ * The legend of a {@link PieChart}: a column (it sits beside the ring, in the
+ * vertical strip it leaves) of caption-and-swatch entries, one per slice. No
+ * show/hide: removing a row would re-cut every other wedge's share. Selection
+ * arrives through `dims`.
  */
 export declare const PieLegend: import("@motionscript/sdk").Component<"pieLegend", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** One entry per slice, in ring order. */
     readonly slices: import("@motionscript/sdk").Type<PieSlice[], PieSlice[], false>;
     readonly legend: import("@motionscript/sdk").Type<LegendConfig, LegendConfig, false>;
+    /** Per-slice opacity multiplier, the signal that dims the ring, so an entry fades in step with its wedge. Missing reads as 1. */
     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>;
@@ -60,8 +41,10 @@ export declare const PieLegend: import("@motionscript/sdk").Component<"pieLegend
         readonly portion: import("@motionscript/sdk").Type<number, number, false>;
     };
 }, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** One entry per slice, in ring order. */
     readonly slices: import("@motionscript/sdk").Type<PieSlice[], PieSlice[], false>;
     readonly legend: import("@motionscript/sdk").Type<LegendConfig, LegendConfig, false>;
+    /** Per-slice opacity multiplier, the signal that dims the ring, so an entry fades in step with its wedge. Missing reads as 1. */
     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>;
@@ -79,8 +62,10 @@ export declare const PieLegend: import("@motionscript/sdk").Component<"pieLegend
     readonly start: import("@motionscript/sdk").Type<number, number, false>;
     readonly end: import("@motionscript/sdk").Type<number, number, false>;
 }>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** One entry per slice, in ring order. */
     readonly slices: import("@motionscript/sdk").Type<PieSlice[], PieSlice[], false>;
     readonly legend: import("@motionscript/sdk").Type<LegendConfig, LegendConfig, false>;
+    /** Per-slice opacity multiplier, the signal that dims the ring, so an entry fades in step with its wedge. Missing reads as 1. */
     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>;

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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA+FpB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"pie-legend.d.ts","sourceRoot":"","sources":["../../src/pie-chart/pie-legend.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,MAAM,EAEX,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,EAAkB,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAIxC;;;;;GAKG;AACH,eAAO,MAAM,SAAS;IAMlB,0CAA0C;;;IAG1C,iIAAiI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAHjI,0CAA0C;;;IAG1C,iIAAiI;;;;;;;;;;;;;;;;;;IAHjI,0CAA0C;;;IAG1C,iIAAiI;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAwEnI,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}