@motionscript/charts 0.1.0 → 0.1.1-alpha.1

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

@@ -1,85 +1,77 @@
-import { type DataRecord, type NodeOf, type Node2D, type 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. */
+import { type DataRecord, type NodeOf, type Node2D, type Node2DProps as _Node2DProps, type Fill as _Fill, type FillResolved as _FillResolved } from "@motionscript/sdk";
+import { type PieLabelMode, type PieStyle } from "./shared.js";
 export interface PieChartValues {
     readonly data: DataRecord[];
     readonly categoryField: string;
     readonly valueField: string;
-    readonly theme: PieChartConfig;
+    readonly style: PieStyle;
     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>;
+    readonly style: import("@motionscript/sdk").Type<import("@motionscript/sdk").StyleInput<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        sliceGap: import("@motionscript/sdk").Type<number, number, false>;
+        sliceRadius: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        labelPlacement: import("@motionscript/sdk").Type<"inside" | "outside" | "none", "inside" | "outside" | "none", false>;
+    }>, import("@motionscript/sdk").StyleValues<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        sliceGap: import("@motionscript/sdk").Type<number, number, false>;
+        sliceRadius: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        labelPlacement: import("@motionscript/sdk").Type<"inside" | "outside" | "none", "inside" | "outside" | "none", false>;
+    }>, false>;
+    /** What the ring's labels say. */
     readonly labelMode: import("@motionscript/sdk").Type<PieLabelMode, PieLabelMode, false>;
-    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 +86,115 @@ 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>;
+    readonly style: import("@motionscript/sdk").Type<import("@motionscript/sdk").StyleInput<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        sliceGap: import("@motionscript/sdk").Type<number, number, false>;
+        sliceRadius: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        labelPlacement: import("@motionscript/sdk").Type<"inside" | "outside" | "none", "inside" | "outside" | "none", false>;
+    }>, import("@motionscript/sdk").StyleValues<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        sliceGap: import("@motionscript/sdk").Type<number, number, false>;
+        sliceRadius: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        labelPlacement: import("@motionscript/sdk").Type<"inside" | "outside" | "none", "inside" | "outside" | "none", false>;
+    }>, false>;
+    /** What the ring's labels say. */
     readonly labelMode: import("@motionscript/sdk").Type<PieLabelMode, PieLabelMode, false>;
-    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>;
+    readonly style: import("@motionscript/sdk").Type<import("@motionscript/sdk").StyleInput<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        sliceGap: import("@motionscript/sdk").Type<number, number, false>;
+        sliceRadius: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        labelPlacement: import("@motionscript/sdk").Type<"inside" | "outside" | "none", "inside" | "outside" | "none", false>;
+    }>, import("@motionscript/sdk").StyleValues<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        sliceGap: import("@motionscript/sdk").Type<number, number, false>;
+        sliceRadius: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        labelPlacement: import("@motionscript/sdk").Type<"inside" | "outside" | "none", "inside" | "outside" | "none", false>;
+    }>, false>;
+    /** What the ring's labels say. */
     readonly labelMode: import("@motionscript/sdk").Type<PieLabelMode, PieLabelMode, false>;
-    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 +209,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,EAChC,KAAK,IAAI,IAAI,KAAK,EAClB,KAAK,YAAY,IAAI,aAAa,EACnC,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EASL,KAAK,YAAY,EAEjB,KAAK,QAAQ,EACd,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,QAAQ,CAAA;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CACxB;AAqBD,2FAA2F;AAC3F,wBAAgB,eAAe,CAAC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAEzE;AA2BD;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;;IAIjB,wDAAwD;;IAExD,sDAAsD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGtD,kCAAkC;;IAElC,kDAAkD;;IAElD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,kIAAkI;;IAElI,yJAAyJ;;;;;;;;;;;;;;;;;IAfzJ,wDAAwD;;IAExD,sDAAsD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGtD,kCAAkC;;IAElC,kDAAkD;;IAElD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,kIAAkI;;IAElI,yJAAyJ;;;;IAfzJ,wDAAwD;;IAExD,sDAAsD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGtD,kCAAkC;;IAElC,kDAAkD;;IAElD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,kIAAkI;;IAElI,yJAAyJ;;;;;;;;;;;;;;;0BA0H3J,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 { PieLegend } from "../kit/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 { CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, paletteFill } from "../kit/style.js";
+import { PIE_SPOTLIGHT_DIM, PIE_STYLE_GROUPS, centerConfigOf, labelConfigOf, legendOf, resolvePieSlices, ringConfigOf, 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);
+    return resolvePieSlices(s.data, s.categoryField, s.valueField, s.data.map((_, i) => paletteFill(s.style, i)));
 }
-/** 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, PIE_SPOTLIGHT_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,101 +45,99 @@ 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(() => []),
+        data: fresh(() => [], { kind: "dataset" }),
+        /** 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 }),
+        style: Types.style(CHART_STYLE_FAMILY, PIE_STYLE_GROUPS, { presets: CHART_STYLE_PRESETS }),
+        /** What the ring's labels say. */
         labelMode: Types.custom("percent"),
-        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 style = () => state.style;
         const slices = () => slicesOf(state);
         const parts = [
             new PieRing({
                 width: "fill",
                 height: "fill",
                 slices,
-                ring: () => theme().ring,
-                label: () => theme().label,
-                centerStyle: () => theme().center,
+                ring: () => ringConfigOf(style()),
+                label: () => labelConfigOf(style()),
+                centerStyle: () => centerConfigOf(style()),
                 labelMode: state.labelMode,
-                labelPlacement: state.labelPlacement,
+                labelPlacement: state.style.labelPlacement,
                 pops: () => state.pops,
-                dimOpacity: () => theme().spotlight.dimOpacity,
+                dimOpacity: PIE_SPOTLIGHT_DIM,
                 centerLabel: state.centerLabel,
                 centerCaption: state.centerCaption,
                 centerReveal: state.showCenter === false ? 0 : 1,
             }),
         ];
-        if (state.showLegend !== false) {
-            parts.push(new PieLegend({
+        const position = state.style.legend;
+        if (position !== "none") {
+            const side = position === "right";
+            const legend = new PieLegend({
                 slices,
-                legend: () => theme().legend,
+                legend: () => legendOf(style()),
                 dims: () => sliceDims(state),
-                // The column's spacing is the theme's as the chart was built, like the
-                // entries' type and chips.
-                gap: state.theme.legend.itemGap / 3,
-                padding: state.theme.legend.padding,
-            }));
+                flow: side ? "vertical" : "horizontal",
+                align: "center",
+                // Spacing is fixed as built.
+                gap: side ? legendOf(state.style).itemGap / 3 : legendOf(state.style).itemGap,
+                padding: 0,
+            });
+            if (position === "top")
+                parts.unshift(legend);
+            else
+                parts.push(legend);
         }
-        const row = new Rect({ flow: "horizontal", width: "fill", height: "fill", gap: state.gap, align: "center", children: parts });
+        const row = new Rect({
+            flow: position === "right" || position === "none" ? "horizontal" : "vertical",
+            width: "fill",
+            height: "fill",
+            gap: state.gap,
+            padding: 24,
+            align: "center",
+            fill: () => state.style.background,
+            children: parts,
+        });
         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 +157,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(),