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

package/dist/kit/chart-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-canvas.js","sourceRoot":"","sources":["../../src/kit/chart-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  type AssetScope,\n  Graphics2D,\n  Node2D,\n  fillOps,\n  shadowOps,\n  strokeOps,\n  property,\n  type Fill,\n  type Node2DProps,\n  type RenderContext2D,\n  type Shadow,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport {\n  DEFAULT_PLOT_AREA,\n  DEFAULT_X_AXIS,\n  DEFAULT_Y_AXIS,\n  type Range,\n} from \"./shared\"\nimport { declarePaints } from \"@motionscript/sdk/component\"\n\nexport interface ChartCanvasProps extends Node2DProps {\n  /** Fill of the plot panel behind the marks. */\n  fill: Fill\n  /** Drop shadow of the panel. Default none. */\n  shadow: Shadow\n  /** Stroke of the vertical grid lines (one per {@link xMarkers}). */\n  xGridStroke: Stroke\n  /** Stroke of the horizontal grid lines (one per {@link yMarkers}). */\n  yGridStroke: Stroke\n  /**\n   * Data-unit x positions to draw a vertical grid line at — one per horizontal\n   * axis marker, so a line lands under every marker regardless of spacing.\n   * Positions at (or past) an {@link xExtent} edge coincide with the border and\n   * are skipped. Pass an empty list for a chart whose horizontal axis is\n   * categorical and so has no numeric position to rule at.\n   */\n  xMarkers: number[]\n  /** Data-unit y positions to draw a horizontal grid line at. */\n  yMarkers: number[]\n  /** `[min, max]` of the horizontal scale — maps {@link xMarkers} into the panel. */\n  xExtent: Range\n  /** `[min, max]` of the vertical scale — maps {@link yMarkers} into the panel. */\n  yExtent: Range\n}\n\n/**\n * The plot **backdrop** of a cartesian chart: a filled panel with a grid of\n * faint lines spanning both directions across it. Drawn as one {@link Graphics2D}\n * command list, sized from its allocated `layoutBounds` and centred on the node\n * origin.\n *\n * The thick frame is a **separate** {@link ChartBorder} node so it can be drawn\n * *over* the marks while this panel sits under them. Grid lines are placed from\n * the axis marker positions (in data units) mapped into the panel through\n * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its\n * marker whether or not the markers are evenly spaced.\n */\nexport class ChartCanvas extends Node2D<ChartCanvasProps> {\n  @property({\n    default: DEFAULT_PLOT_AREA.fill,\n    mapper: fillOps.resolve,\n    tween: fillOps.lerp,\n  })\n  declare fill: Fill\n  @property({\n    default: DEFAULT_PLOT_AREA.shadow,\n    mapper: shadowOps.resolve,\n    tween: shadowOps.lerp,\n  })\n  declare shadow: Shadow\n  @property({\n    default: DEFAULT_X_AXIS.lineStyle,\n    mapper: strokeOps.resolve,\n    tween: strokeOps.lerp,\n  })\n  declare xGridStroke: Stroke\n  @property({\n    default: DEFAULT_Y_AXIS.lineStyle,\n    mapper: strokeOps.resolve,\n    tween: strokeOps.lerp,\n  })\n  declare yGridStroke: Stroke\n  @property({ default: () => [] as number[] }) declare xMarkers: number[]\n  @property({ default: () => [] as number[] }) declare yMarkers: number[]\n  @property({ default: () => [0, 1] as Range }) declare xExtent: Range\n  @property({ default: () => [0, 1] as Range }) declare yExtent: Range\n\n  /**\n   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the\n   * paint props it carries — see {@link declarePaints}. The grid strokes are\n   * named past the conventional slots, so they are passed explicitly.\n   */\n  override declareAssets(assets: AssetScope): void {\n    super.declareAssets(assets)\n    declarePaints(this, assets, {\n      strokes: [this.xGridStroke as StrokeResolved[], this.yGridStroke as StrokeResolved[]],\n    })\n  }\n\n  protected renderSelf(ctx: RenderContext2D): void {\n    const W = this.layoutBounds.width\n    const H = this.layoutBounds.height\n    if (W <= 0 || H <= 0) return\n\n    // Plot panel, centred on the origin (node space is y-up, origin centre).\n    ctx.draw(\n      new Graphics2D()\n        .rect({ x: 0, y: 0, width: W, height: H })\n        .shadow(this.shadow)\n        .fill(this.fill)\n    )\n\n    const [xMin, xMax] = this.xExtent\n    const [yMin, yMax] = this.yExtent\n    // Fraction of a marker across its extent; guard a zero-width extent.\n    const xFrac = (v: number) => (xMax <= xMin ? 0 : (v - xMin) / (xMax - xMin))\n    const yFrac = (v: number) => (yMax <= yMin ? 0 : (v - yMin) / (yMax - yMin))\n    // Skip markers landing on (or outside) the edges — they'd sit under the border.\n    const interior = (f: number) => f > 1e-6 && f < 1 - 1e-6\n\n    const xStroke = (this.xGridStroke as StrokeResolved[])[0]\n    if (xStroke) {\n      const xGrid = new Graphics2D()\n      for (const v of this.xMarkers) {\n        const f = xFrac(v)\n        if (!interior(f)) continue\n        xGrid.rect({\n          x: -W / 2 + f * W,\n          y: 0,\n          width: xStroke.weight,\n          height: H,\n        })\n      }\n      ctx.draw(xGrid.fill(xStroke.fill))\n    }\n\n    const yStroke = (this.yGridStroke as StrokeResolved[])[0]\n    if (yStroke) {\n      const yGrid = new Graphics2D()\n      for (const v of this.yMarkers) {\n        const f = yFrac(v)\n        if (!interior(f)) continue\n        yGrid.rect({\n          x: 0,\n          y: -H / 2 + f * H,\n          width: W,\n          height: yStroke.weight,\n        })\n      }\n      ctx.draw(yGrid.fill(yStroke.fill))\n    }\n  }\n}\n"]}
+{"version":3,"file":"chart-canvas.js","sourceRoot":"","sources":["../../src/kit/chart-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Graphics2D,\r\n  Types,\r\n  component2d,\r\n  fillOps,\r\n  shadowOps,\r\n  strokeOps,\r\n  type Fill,\r\n  type FillResolved,\r\n  type NodeOf,\r\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\r\n  type Node2D as _Node2D,\r\n  type Node2DProps,\r\n  type Shadow,\r\n  type ShadowResolved,\r\n  type Stroke,\r\n  type StrokeResolved,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport { fresh } from \"./entries\"\r\nimport { loadPaints } from \"./paints\"\r\nimport {\r\n  DEFAULT_PLOT_AREA,\r\n  DEFAULT_X_AXIS,\r\n  DEFAULT_Y_AXIS,\r\n  type Range,\r\n} from \"./shared\"\r\n\r\nexport interface ChartCanvasProps extends Node2DProps {\r\n  /** Fill of the plot panel behind the marks. */\r\n  fill: Fill\r\n  /** Drop shadow of the panel. Default none. */\r\n  shadow: Shadow\r\n  /** Stroke of the vertical grid lines (one per {@link xMarkers}). */\r\n  xGridStroke: Stroke\r\n  /** Stroke of the horizontal grid lines (one per {@link yMarkers}). */\r\n  yGridStroke: Stroke\r\n  /**\r\n   * Data-unit x positions to draw a vertical grid line at — one per horizontal\r\n   * axis marker, so a line lands under every marker regardless of spacing.\r\n   * Positions at (or past) an {@link xExtent} edge coincide with the border and\r\n   * are skipped. Pass an empty list for a chart whose horizontal axis is\r\n   * categorical and so has no numeric position to rule at.\r\n   */\r\n  xMarkers: number[]\r\n  /** Data-unit y positions to draw a horizontal grid line at. */\r\n  yMarkers: number[]\r\n  /** `[min, max]` of the horizontal scale — maps {@link xMarkers} into the panel. */\r\n  xExtent: Range\r\n  /** `[min, max]` of the vertical scale — maps {@link yMarkers} into the panel. */\r\n  yExtent: Range\r\n}\r\n\r\nconst strokeEntry = (initial: Stroke) =>\r\n  Types.custom<Stroke, StrokeResolved[]>(initial, { resolve: strokeOps.resolve, lerp: strokeOps.lerp })\r\n\r\n/**\r\n * The plot **backdrop** of a cartesian chart: a filled panel with a grid of\r\n * faint lines spanning both directions across it, sized from its box and centred\r\n * on its origin.\r\n *\r\n * The thick frame is a **separate** {@link ChartBorder} node so it can be drawn\r\n * *over* the marks while this panel sits under them. Grid lines are placed from\r\n * the axis marker positions (in data units) mapped into the panel through\r\n * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its\r\n * marker whether or not the markers are evenly spaced.\r\n */\r\nexport const ChartCanvas = component2d({\r\n  key: \"chartCanvas\",\r\n  state: {\r\n    fill: Types.custom<Fill, FillResolved[]>(DEFAULT_PLOT_AREA.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),\r\n    shadow: Types.custom<Shadow, ShadowResolved[]>(DEFAULT_PLOT_AREA.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),\r\n    xGridStroke: strokeEntry(DEFAULT_X_AXIS.lineStyle),\r\n    yGridStroke: strokeEntry(DEFAULT_Y_AXIS.lineStyle),\r\n    xMarkers: fresh<number[]>(() => []),\r\n    yMarkers: fresh<number[]>(() => []),\r\n    xExtent: fresh<Range>(() => [0, 1]),\r\n    yExtent: fresh<Range>(() => [0, 1]),\r\n  },\r\n  // The grid strokes are named past the conventional slots, so they are named here.\r\n  load: (loader, state) =>\r\n    loadPaints(loader, { fills: [state.fill], shadows: [state.shadow], strokes: [state.xGridStroke, state.yGridStroke] }),\r\n  render: (ctx, state) => {\r\n    const { width: W, height: H } = ctx.size\r\n    if (W <= 0 || H <= 0) return\r\n\r\n    // Plot panel, centred on the origin (node space is y-up, origin centre).\r\n    ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).shadow(state.shadow).fill(state.fill))\r\n\r\n    const [xMin, xMax] = state.xExtent\r\n    const [yMin, yMax] = state.yExtent\r\n    // Fraction of a marker across its extent; guard a zero-width extent.\r\n    const xFrac = (v: number) => (xMax <= xMin ? 0 : (v - xMin) / (xMax - xMin))\r\n    const yFrac = (v: number) => (yMax <= yMin ? 0 : (v - yMin) / (yMax - yMin))\r\n    // Skip markers landing on (or outside) the edges — they'd sit under the border.\r\n    const interior = (f: number) => f > 1e-6 && f < 1 - 1e-6\r\n\r\n    const xStroke = state.xGridStroke[0]\r\n    if (xStroke) {\r\n      const xGrid = new Graphics2D()\r\n      for (const v of state.xMarkers) {\r\n        const f = xFrac(v)\r\n        if (!interior(f)) continue\r\n        xGrid.rect({ x: -W / 2 + f * W, y: 0, width: xStroke.weight, height: H })\r\n      }\r\n      ctx.draw(xGrid.fill(xStroke.fill))\r\n    }\r\n\r\n    const yStroke = state.yGridStroke[0]\r\n    if (yStroke) {\r\n      const yGrid = new Graphics2D()\r\n      for (const v of state.yMarkers) {\r\n        const f = yFrac(v)\r\n        if (!interior(f)) continue\r\n        yGrid.rect({ x: 0, y: -H / 2 + f * H, width: W, height: yStroke.weight })\r\n      }\r\n      ctx.draw(yGrid.fill(yStroke.fill))\r\n    }\r\n  },\r\n})\r\n\r\nexport type ChartCanvas = NodeOf<typeof ChartCanvas>\r\n"]}

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

@@ -1,12 +1,11 @@
-import { Rect, type CommandArgs, type Fill, type NodeConfig, type RectProps } from "@motionscript/sdk";
-import { type Seekable } from "@motionscript/sdk/component";
+import { type Fill, type NodeOf, type RectProps, type Alignment as _Alignment, type CornerRadiusResolved as _CornerRadiusResolved, type CornerStyleResolved as _CornerStyleResolved, 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 ChartSeries, type LegendConfig } from "./shared.js";
 export interface ChartLegendProps extends RectProps {
     /**
      * One entry per series: legend `label`, its `enabled` default, and — through
      * {@link ChartLegendProps.swatches} — the colour its chip is painted. A series
      * that starts enabled (the default) is added to the row up front; one that
-     * starts `false` is hidden until a later {@link ChartLegend.showSeries}.
+     * starts `false` is hidden until a later `showSeries`.
      */
     series: ChartSeries[];
     /**
@@ -25,102 +24,94 @@ export interface ChartLegendProps extends RectProps {
  * with a rounded colour swatch; only the swatch carries the series colour, the
  * caption reads in the legend's neutral ink.
  *
- * {@link showSeries}/{@link hideSeries} flip a series on or off — showing one
- * adds its entry back into the row at its stable series position and grows it
- * in, hiding one shrinks it away and removes it. So the row only ever holds the
- * currently-enabled series, in series order, and closes the gap when one leaves.
+ * `showSeries`/`hideSeries` flip a series on or off — showing one grows its
+ * entry back in at its stable series position, hiding one shrinks it away. So
+ * the row only ever shows the currently-enabled series, in series order, and
+ * closes the gap when one leaves.
  *
  * This node *is* the row, so the parent places it (centred below the chart) and
  * it hugs its entries.
  */
-export declare class ChartLegend extends Rect {
-    series: ChartSeries[];
-    swatches: Fill[];
-    legend: LegendConfig;
-    /** One entry per series. **Every** entry is a child — see {@link reveal}. */
-    private items;
+export declare const ChartLegend: import("@motionscript/sdk").Component<"chartLegend", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly series: import("@motionscript/sdk").Type<ChartSeries[], ChartSeries[], false>;
+    readonly swatches: import("@motionscript/sdk").Type<Fill[], Fill[], false>;
+    readonly legend: import("@motionscript/sdk").Type<LegendConfig, LegendConfig, false>;
     /**
      * How far each entry is shown, `0`–`1`. Drives its width, opacity and gap
      * together, so `0` is an entry that takes no room and `1` is one at its
      * natural size.
      *
-     * This replaces adding and removing the entry from the row, which is what
-     * `showSeries`/`hideSeries` used to do. That could not be a command: a command
-     * is asked what it looks like at a time, and "is this node a child" is not a
-     * value a time can produce — the tree either contains it or it doesn't, and
-     * getting there means having run the add. Collapsed-but-present is the same
-     * picture reached by a route that *is* a function of `t`.
-     *
-     * A plain array rather than reactive props because the count is the series
-     * count, which is data. The entries' props are bound to it, so writing one
-     * still moves the layout.
-     */
-    private reveal;
-    /**
-     * Each entry's natural width, last time it was fully shown.
-     *
-     * A collapse needs numeric endpoints — `lerpSizeInput` snaps between a token
-     * and a number rather than interpolating — and `"hug"` is not a number until
-     * something measures it. Refreshed on every frame an entry is at full reveal
-     * (see {@link widthFor}), so it is current by the time a hide starts, and it
-     * tracks a relabelled series or a restyled legend without being told.
-     */
-    private natural;
-    constructor(props?: NodeConfig<ChartLegend, ChartLegendProps>);
-    /**
-     * An entry's width for its current reveal.
-     *
-     * `"hug"` at full reveal rather than the pinned number, so a shown entry stays
-     * responsive to its own content; the number only takes over while it is
-     * collapsing, which is the only time a token cannot express it.
-     *
-     * Records the natural width as a side effect, which is the honest place for it:
-     * this runs inside a binding, so it is already reading the layout every frame,
-     * and the value it wants is the one the layout just produced. It writes a plain
-     * array rather than a signal, so nothing is invalidated by it.
+     * This replaces adding and removing the entry from the row: a command is
+     * asked what it looks like at a time, and "is this node a child" is not a
+     * value a time can produce. Collapsed-but-present is the same picture reached
+     * by a route that *is* a function of `t`.
      */
-    private widthFor;
-    /** One entry: the series caption beside its colour swatch. */
-    private buildItem;
-    /** True if series `index` is showing at all — see {@link reveal}. */
-    isEnabled(index: number): boolean;
+    readonly reveal: import("@motionscript/sdk").Type<number[] | Readonly<Record<number, number>>, number[], 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 showSeries: {
+        readonly index: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly hideSeries: {
+        readonly index: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly spotlightSeries: {
+        readonly index: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    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 series: import("@motionscript/sdk").Type<ChartSeries[], ChartSeries[], false>;
+    readonly swatches: import("@motionscript/sdk").Type<Fill[], Fill[], false>;
+    readonly legend: import("@motionscript/sdk").Type<LegendConfig, LegendConfig, false>;
     /**
-     * Grow series `index`'s entry back in at its series-order position, the
-     * siblings sliding over to make room.
-     *
-     * A reveal tween rather than an animated `addChildAt`. The entry never left —
-     * see {@link reveal} — so there is no add to have happened, and the whole
-     * thing is a function of `t`.
-     */
-    showSeries(args: CommandArgs<{
-        index: number;
-    }>): Seekable;
-    /**
-     * Shrink series `index`'s entry away, the gap closing behind it — the mirror
-     * of {@link showSeries}.
-     */
-    hideSeries(args: CommandArgs<{
-        index: number;
-    }>): Seekable;
-    /**
-     * Ramp one entry's reveal to `target`.
-     *
-     * `from` is read when the command is built, which for a driven scene is with
-     * the node in the state its own start time implies — so a hide that follows a
-     * show starts where the show left it rather than at whatever the node happens
-     * to hold now.
-     */
-    private revealTo;
-    /**
-     * Dim every entry but series `index` to {@link SPOTLIGHT_DIM} and bring that
-     * one back to full — the legend half of a chart's `spotlightSeries`. Entries
-     * stay in place; only their opacity moves, so the row doesn't reflow.
+     * How far each entry is shown, `0`–`1`. Drives its width, opacity and gap
+     * together, so `0` is an entry that takes no room and `1` is one at its
+     * natural size.
      *
-     * Only the currently-shown entries are touched — a hidden series' entry is
-     * left as {@link hideSeries} left it.
+     * This replaces adding and removing the entry from the row: a command is
+     * asked what it looks like at a time, and "is this node a child" is not a
+     * value a time can produce. Collapsed-but-present is the same picture reached
+     * by a route that *is* a function of `t`.
      */
-    spotlightSeries(args: CommandArgs<{
-        index: number;
-    }>): Seekable;
-}
+    readonly reveal: import("@motionscript/sdk").Type<number[] | Readonly<Record<number, number>>, number[], 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>>;
+/** Whether series `index` is showing at all on `legend`. */
+export declare function legendShows(legend: {
+    readonly reveal: readonly number[];
+}, index: number): boolean;
+export type ChartLegend = NodeOf<typeof ChartLegend>;
 //# sourceMappingURL=chart-legend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-legend.d.ts","sourceRoot":"","sources":["../../src/kit/chart-legend.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAMJ,KAAK,WAAW,EAEhB,KAAK,IAAI,EACT,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAElF,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;;;OAKG;IACH,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB;;;;;OAKG;IACH,QAAQ,EAAE,IAAI,EAAE,CAAA;IAChB,oFAAoF;IACpF,MAAM,EAAE,YAAY,CAAA;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,IAAI;IACuB,MAAM,EAAE,WAAW,EAAE,CAAA;IAC5B,QAAQ,EAAE,IAAI,EAAE,CAAA;IACpB,MAAM,EAAE,YAAY,CAAA;IAEnE,6EAA6E;IAC7E,OAAO,CAAC,KAAK,CAAa;IAC1B;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,MAAM,CAAe;IAC7B;;;;;;;;OAQG;IACH,OAAO,CAAC,OAAO,CAAe;gBAElB,KAAK,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,gBAAgB,CAAC;IA6B7D;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,QAAQ;IAUhB,8DAA8D;IAC9D,OAAO,CAAC,SAAS;IAgCjB,qEAAqE;IACrE,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIjC;;;;;;;OAOG;IAEH,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,QAAQ;IAK1D;;;OAGG;IAEH,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,QAAQ;IAK1D;;;;;;;OAOG;IACH,OAAO,CAAC,QAAQ;IAahB;;;;;;;OAOG;IAEH,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,QAAQ;CAehE"}
+{"version":3,"file":"chart-legend.d.ts","sourceRoot":"","sources":["../../src/kit/chart-legend.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,IAAI,EACT,KAAK,MAAM,EACX,KAAK,SAAS,EAEd,KAAK,SAAS,IAAI,UAAU,EAC5B,KAAK,oBAAoB,IAAI,qBAAqB,EAClD,KAAK,mBAAmB,IAAI,oBAAoB,EAChD,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;AAI1B,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;;;OAKG;IACH,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB;;;;;OAKG;IACH,QAAQ,EAAE,IAAI,EAAE,CAAA;IAChB,oFAAoF;IACpF,MAAM,EAAE,YAAY,CAAA;CACrB;AAsCD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW;;;;IAOpB;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IATH;;;;;;;;;OASG;;;;;;;;;;;;;;;;UAuFL,CAAA;AAWF,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAElG;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/kit/chart-legend.js

@@ -1,212 +1,163 @@
-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 { Rect, Text, command, easeOut, property, textOps, } from "@motionscript/sdk";
-import { drive, hold, together } from "@motionscript/sdk/component";
+import { Flow, Paint, Rect, Shapes, Text, Types, component2d, textOps, } from "@motionscript/sdk";
+import { fresh } from "./entries.js";
+import { frameEase } from "./motion.js";
 import { DEFAULT_LEGEND, SPOTLIGHT_DIM, } from "./shared.js";
+/** A row's entries are a `Rect`'s: paint, the flow of its children, its corners. */
+const row = { ...Paint.state, ...Flow.state, ...Shapes.corners };
+/**
+ * One legend entry. It hugs its caption and swatch; `shown` scales that width
+ * from nothing to the whole of it.
+ *
+ * The width is taken from the content on every measure, at any reveal, so a frame
+ * never depends on whether the entry was once seen fully shown. A collapse needs a
+ * number to scale, and `"hug"` is not one until something measures it — this is
+ * the something.
+ */
+const LegendEntry = component2d({
+    key: "legendEntry",
+    state: { ...row, shown: Types.number(1) },
+    commands: { ...Paint.commands },
+    measure: (measurer, state, children) => {
+        const size = Flow.measure(measurer, state, children, Paint.inset(state));
+        return state.shown >= 1 ? size : { ...size, width: state.shown * size.width };
+    },
+    layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),
+    render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),
+});
+/**
+ * How far each entry is shown, written whole (a document, a `set`) or one
+ * entry at a time (a command, as `{ [index]: reveal }`), which leaves the others
+ * as the frame left them — so two series moving at once each move their own.
+ */
+function revealOf(value, previous) {
+    if (Array.isArray(value))
+        return value;
+    const next = [...(previous ?? [])];
+    for (const [index, reveal] of Object.entries(value))
+        next[Number(index)] = reveal;
+    return next;
+}
 /**
  * The legend of a chart: a **horizontal-flow row of entries**, one per series, laid out
  * left-to-right with the theme's `itemGap`. Each entry pairs the series label
  * with a rounded colour swatch; only the swatch carries the series colour, the
  * caption reads in the legend's neutral ink.
  *
- * {@link showSeries}/{@link hideSeries} flip a series on or off — showing one
- * adds its entry back into the row at its stable series position and grows it
- * in, hiding one shrinks it away and removes it. So the row only ever holds the
- * currently-enabled series, in series order, and closes the gap when one leaves.
+ * `showSeries`/`hideSeries` flip a series on or off — showing one grows its
+ * entry back in at its stable series position, hiding one shrinks it away. So
+ * the row only ever shows the currently-enabled series, in series order, and
+ * closes the gap when one leaves.
  *
  * This node *is* the row, so the parent places it (centred below the chart) and
  * it hugs its entries.
  */
-export class ChartLegend extends Rect {
-    /** One entry per series. **Every** entry is a child — see {@link reveal}. */
-    items = [];
-    /**
-     * How far each entry is shown, `0`–`1`. Drives its width, opacity and gap
-     * together, so `0` is an entry that takes no room and `1` is one at its
-     * natural size.
-     *
-     * This replaces adding and removing the entry from the row, which is what
-     * `showSeries`/`hideSeries` used to do. That could not be a command: a command
-     * is asked what it looks like at a time, and "is this node a child" is not a
-     * value a time can produce — the tree either contains it or it doesn't, and
-     * getting there means having run the add. Collapsed-but-present is the same
-     * picture reached by a route that *is* a function of `t`.
-     *
-     * A plain array rather than reactive props because the count is the series
-     * count, which is data. The entries' props are bound to it, so writing one
-     * still moves the layout.
-     */
-    reveal = [];
-    /**
-     * Each entry's natural width, last time it was fully shown.
-     *
-     * A collapse needs numeric endpoints — `lerpSizeInput` snaps between a token
-     * and a number rather than interpolating — and `"hug"` is not a number until
-     * something measures it. Refreshed on every frame an entry is at full reveal
-     * (see {@link widthFor}), so it is current by the time a hide starts, and it
-     * tracks a relabelled series or a restyled legend without being told.
-     */
-    natural = [];
-    constructor(props) {
-        // `flow` after the spread, with the rest of the geometry: this class *is*
-        // the row, so the direction is its own answer and not the caller's. It has
-        // to be stated — a `Rect` given no flow lays its children out `freeform`,
-        // which stacks every entry on the same spot. One series looks perfect that
-        // way and three look like one smeared caption, so the failure only shows up
-        // on the charts that most need a legend.
-        super({
-            ...props,
+export const ChartLegend = component2d({
+    key: "chartLegend",
+    state: {
+        ...row,
+        series: fresh(() => []),
+        swatches: fresh(() => []),
+        legend: Types.custom(DEFAULT_LEGEND),
+        /**
+         * How far each entry is shown, `0`–`1`. Drives its width, opacity and gap
+         * together, so `0` is an entry that takes no room and `1` is one at its
+         * natural size.
+         *
+         * This replaces adding and removing the entry from the row: a command is
+         * asked what it looks like at a time, and "is this node a child" is not a
+         * value a time can produce. Collapsed-but-present is the same picture reached
+         * by a route that *is* a function of `t`.
+         */
+        reveal: fresh(() => [], { resolve: revealOf }),
+    },
+    // This node *is* the row, so the direction is its own answer. It has to be
+    // stated — a `Rect` given no flow lays its children out `freeform`, which
+    // stacks every entry on the same spot. The gap and padding are the theme's.
+    defaults: {
+        flow: "horizontal",
+        width: "hug",
+        height: "hug",
+        gap: (state) => state.legend.itemGap,
+        padding: (state) => state.legend.padding,
+        reveal: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),
+    },
+    // One entry per series, in series order, every one a child for good: order is
+    // fixed rather than depending on which siblings happen to be shown, so an entry
+    // always comes back where it belongs.
+    children: (state) => {
+        const marker = state.legend.markerStyle;
+        return state.series.map((series, index) => LegendEntry({
             flow: "horizontal",
+            gap: 12,
             align: "center",
             width: "hug",
             height: "hug",
-        });
-        // Structure is one entry per series, so it's composed here from the resolved
-        // props super() applied. Fixed row geometry last, so it wins over super().
-        this.set({ gap: this.legend.itemGap, padding: this.legend.padding });
-        this.reveal = this.series.map((s) => ((s.enabled ?? true) ? 1 : 0));
-        this.natural = this.series.map(() => 0);
-        this.items = this.series.map((s, i) => this.buildItem(s, i));
-        // All of them, in series order. Order is now fixed rather than depending on
-        // which siblings happen to be shown, so an entry always comes back where it
-        // belongs and `insertionIndex` has nothing left to compute.
-        for (const item of this.items)
-            this.add(item);
-    }
-    /**
-     * An entry's width for its current reveal.
-     *
-     * `"hug"` at full reveal rather than the pinned number, so a shown entry stays
-     * responsive to its own content; the number only takes over while it is
-     * collapsing, which is the only time a token cannot express it.
-     *
-     * Records the natural width as a side effect, which is the honest place for it:
-     * this runs inside a binding, so it is already reading the layout every frame,
-     * and the value it wants is the one the layout just produced. It writes a plain
-     * array rather than a signal, so nothing is invalidated by it.
-     */
-    widthFor(index) {
-        const shown = this.reveal[index] ?? 0;
-        if (shown >= 1) {
-            const measured = this.items[index]?.measuredWidth ?? 0;
-            if (measured > 0)
-                this.natural[index] = measured;
-            return "hug";
-        }
-        return shown * (this.natural[index] ?? 0);
-    }
-    /** One entry: the series caption beside its colour swatch. */
-    buildItem(series, index) {
-        const marker = this.legend.markerStyle;
-        const item = new Rect({ flow: "horizontal",
-            gap: 12,
-            align: "center",
             // Bound to the reveal, so showing and hiding is a number moving rather
-            // than a child arriving and leaving.
-            width: () => this.widthFor(index),
-            opacity: () => this.reveal[index] ?? 0,
-            height: "hug",
+            // than a child arriving and leaving. The width follows it in `measure`,
+            // and the flanking gap closes with the entry rather than snapping.
+            opacity: () => state.reveal[index] ?? 0,
+            gapScale: () => state.reveal[index] ?? 0,
+            shown: () => state.reveal[index] ?? 0,
             children: [
-                new Text({
-                    ...textOps.styleProps(this.legend.textStyle),
-                    text: series.label,
-                }),
-                new Rect({
+                Text({ ...textOps.styleProps(state.legend.textStyle), text: series.label }),
+                Rect({
                     width: marker.width,
                     height: marker.height,
                     cornerRadius: marker.borderRadius,
-                    fill: this.swatches[index] ?? "white",
+                    fill: state.swatches[index] ?? "white",
                     stroke: marker.stroke,
                     shadow: marker.shadow,
                 }),
             ],
-        });
-        // `gapScale` is a `Node` prop rather than a container one, so it is bound here
-        // instead of in the config. It tracks the reveal so the flanking gap closes
-        // with the entry rather than snapping when it reaches zero.
-        item.set({ gapScale: () => this.reveal[index] ?? 0 });
-        return item;
-    }
-    /** True if series `index` is showing at all — see {@link reveal}. */
-    isEnabled(index) {
-        return (this.reveal[index] ?? 0) > 0;
-    }
-    /**
-     * Grow series `index`'s entry back in at its series-order position, the
-     * siblings sliding over to make room.
-     *
-     * A reveal tween rather than an animated `addChildAt`. The entry never left —
-     * see {@link reveal} — so there is no add to have happened, and the whole
-     * thing is a function of `t`.
-     */
-    showSeries(args) {
-        const { index = 0 } = args.data ?? {};
-        return this.revealTo(index, 1, args.duration ?? 0.35, args.easing ?? easeOut());
-    }
-    /**
-     * Shrink series `index`'s entry away, the gap closing behind it — the mirror
-     * of {@link showSeries}.
-     */
-    hideSeries(args) {
-        const { index = 0 } = args.data ?? {};
-        return this.revealTo(index, 0, args.duration ?? 0.35, args.easing ?? easeOut());
-    }
-    /**
-     * Ramp one entry's reveal to `target`.
-     *
-     * `from` is read when the command is built, which for a driven scene is with
-     * the node in the state its own start time implies — so a hide that follows a
-     * show starts where the show left it rather than at whatever the node happens
-     * to hold now.
-     */
-    revealTo(index, target, duration, easing) {
-        if (this.items[index] === undefined)
-            return hold(duration);
-        const from = this.reveal[index] ?? 0;
-        return drive(duration, (t) => {
-            this.reveal[index] = from + (target - from) * easing(t);
-        });
-    }
-    /**
-     * Dim every entry but series `index` to {@link SPOTLIGHT_DIM} and bring that
-     * one back to full — the legend half of a chart's `spotlightSeries`. Entries
-     * stay in place; only their opacity moves, so the row doesn't reflow.
-     *
-     * Only the currently-shown entries are touched — a hidden series' entry is
-     * left as {@link hideSeries} left it.
-     */
-    spotlightSeries(args) {
-        const { index = 0 } = args.data ?? {};
-        const duration = args.duration ?? 0.35;
-        const easing = args.easing ?? easeOut();
-        // Opacity only, on entries that are already in the row — no membership
-        // changes, so unlike {@link showSeries} this is a plain function of `t`.
-        return together(...this.items
-            .map((item, i) => ({ item, i }))
-            .filter(({ i }) => this.isEnabled(i))
-            .map(({ item, i }) => item.to({ data: { opacity: i === index ? 1 : SPOTLIGHT_DIM }, duration, easing })));
-    }
+        }));
+    },
+    commands: {
+        ...Paint.commands,
+        /**
+         * Grow series `index`'s entry back in at its series-order position, the
+         * siblings sliding over to make room. A reveal tween rather than an animated
+         * `addChildAt`: the entry never left, so the whole thing is a function of `t`.
+         */
+        showSeries: {
+            args: { index: Types.number(0, { min: 0, step: 1 }) },
+            // An index that is not a series takes its slot and moves nothing.
+            run: (timeline, state) => (timeline.args.index in state.series
+                ? timeline.animate(revealFrame(state, timeline.args.index, 1, frameEase(timeline)))
+                : timeline.wait(timeline.duration)),
+        },
+        /** Shrink series `index`'s entry away, the gap closing behind it — the mirror of `showSeries`. */
+        hideSeries: {
+            args: { index: Types.number(0, { min: 0, step: 1 }) },
+            run: (timeline, state) => (timeline.args.index in state.series
+                ? timeline.animate(revealFrame(state, timeline.args.index, 0, frameEase(timeline)))
+                : timeline.wait(timeline.duration)),
+        },
+        /**
+         * Dim every entry but series `index` to {@link SPOTLIGHT_DIM} and bring that
+         * one back to full — the legend half of a chart's `spotlightSeries`. Entries
+         * stay in place; only their opacity moves, so the row doesn't reflow. Only
+         * the entries shown when it is built are touched: a hidden series' entry is
+         * left as `hideSeries` left it.
+         */
+        spotlightSeries: {
+            args: { index: Types.number(0, { min: 0, step: 1 }) },
+            run: (timeline, state, children) => timeline.together(children.flatMap((entry, i) => (state.reveal[i] ?? 0) > 0 ? [entry.to({ opacity: i === timeline.args.index ? 1 : SPOTLIGHT_DIM })] : [])),
+        },
+    },
+    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)),
+});
+/**
+ * One entry's reveal ramping to `target` from where the command finds it — so a
+ * hide that follows a show starts where the show left it.
+ */
+function revealFrame(state, index, target, ease) {
+    const from = state.reveal[index] ?? 0;
+    return (t) => ({ reveal: { [index]: from + (target - from) * ease(t) } });
+}
+/** Whether series `index` is showing at all on `legend`. */
+export function legendShows(legend, index) {
+    return (legend.reveal[index] ?? 0) > 0;
 }
-__decorate([
-    property({ default: () => [] })
-], ChartLegend.prototype, "series", void 0);
-__decorate([
-    property({ default: () => [] })
-], ChartLegend.prototype, "swatches", void 0);
-__decorate([
-    property({ default: DEFAULT_LEGEND })
-], ChartLegend.prototype, "legend", void 0);
-__decorate([
-    command()
-], ChartLegend.prototype, "showSeries", null);
-__decorate([
-    command()
-], ChartLegend.prototype, "hideSeries", null);
-__decorate([
-    command()
-], ChartLegend.prototype, "spotlightSeries", null);
 //# sourceMappingURL=chart-legend.js.map