@motionscript/charts 0.1.0 → 0.1.1-alpha.1

package/dist/kit/chart-canvas.js

@@ -1,68 +1,74 @@
-import { Graphics2D, Types, component2d, fillOps, shadowOps, strokeOps, } from "@motionscript/sdk";
+import { Graphics2D, Types, component2d, fillOps, strokeOps, } from "@motionscript/sdk";
 import { fresh } from "./entries.js";
 import { loadPaints } from "./paints.js";
-import { DEFAULT_PLOT_AREA, DEFAULT_X_AXIS, DEFAULT_Y_AXIS, } from "./shared.js";
-const strokeEntry = (initial) => Types.custom(initial, { resolve: strokeOps.resolve, lerp: strokeOps.lerp });
+const strokeEntry = () => Types.custom([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp });
+/** Where along a scale a fraction lands in a run of `length` px centred on 0. */
+function along(value, [min, max], length) {
+    return (max <= min ? 0 : (value - min) / (max - min) - 0.5) * length;
+}
+/** One rule per draw: stroking a union of open paths paints nothing, and a dashed rule keeps its own phase. */
+export function rule(ctx, from, to, stroke, opacity = 1) {
+    ctx.draw(new Graphics2D().line({ points: [from, to] }).stroke(stroke).opacity(opacity));
+}
 /**
- * The plot **backdrop** of a cartesian chart: a filled panel with a grid of
- * faint lines spanning both directions across it, sized from its box and centred
- * on its origin.
- *
- * The thick frame is a **separate** {@link ChartBorder} node so it can be drawn
- * *over* the marks while this panel sits under them. Grid lines are placed from
- * the axis marker positions (in data units) mapped into the panel through
- * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its
- * marker whether or not the markers are evenly spaced.
+ * The plot backdrop: the panel fill, the grid and the axis rules, sized from its
+ * box. Grid lines are placed from data-unit marker positions mapped through the
+ * extents, so each lands under its marker however the markers are spaced; a line
+ * on an edge is drawn just inside it.
  */
 export const ChartCanvas = component2d({
     key: "chartCanvas",
     state: {
-        fill: Types.custom(DEFAULT_PLOT_AREA.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),
-        shadow: Types.custom(DEFAULT_PLOT_AREA.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),
-        xGridStroke: strokeEntry(DEFAULT_X_AXIS.lineStyle),
-        yGridStroke: strokeEntry(DEFAULT_Y_AXIS.lineStyle),
+        fill: Types.custom([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+        /** The vertical grid lines, one per `xMarkers` entry. */
+        xGridStroke: strokeEntry(),
+        /** The horizontal grid lines, one per `yMarkers` entry. */
+        yGridStroke: strokeEntry(),
         xMarkers: fresh(() => []),
         yMarkers: fresh(() => []),
+        /** `[min, max]` of each scale, mapping the markers into the panel. */
         xExtent: fresh(() => [0, 1]),
         yExtent: fresh(() => [0, 1]),
+        /** The baseline and the value-axis rule. */
+        axisStroke: strokeEntry(),
+        /** Where the horizontal axis rule sits on the y scale, or `null` for none. */
+        xAxisAt: Types.custom(null),
+        /** Where the vertical axis rule sits on the x scale, or `null` for none. */
+        yAxisAt: Types.custom(null),
     },
-    // The grid strokes are named past the conventional slots, so they are named here.
-    load: (loader, state) => loadPaints(loader, { fills: [state.fill], shadows: [state.shadow], strokes: [state.xGridStroke, state.yGridStroke] }),
+    load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.xGridStroke, state.yGridStroke, state.axisStroke] }),
     render: (ctx, state) => {
         const { width: W, height: H } = ctx.size;
         if (W <= 0 || H <= 0)
             return;
-        // Plot panel, centred on the origin (node space is y-up, origin centre).
-        ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).shadow(state.shadow).fill(state.fill));
-        const [xMin, xMax] = state.xExtent;
-        const [yMin, yMax] = state.yExtent;
-        // Fraction of a marker across its extent; guard a zero-width extent.
-        const xFrac = (v) => (xMax <= xMin ? 0 : (v - xMin) / (xMax - xMin));
-        const yFrac = (v) => (yMax <= yMin ? 0 : (v - yMin) / (yMax - yMin));
-        // Skip markers landing on (or outside) the edges — they'd sit under the border.
-        const interior = (f) => f > 1e-6 && f < 1 - 1e-6;
-        const xStroke = state.xGridStroke[0];
-        if (xStroke) {
-            const xGrid = new Graphics2D();
-            for (const v of state.xMarkers) {
-                const f = xFrac(v);
-                if (!interior(f))
-                    continue;
-                xGrid.rect({ x: -W / 2 + f * W, y: 0, width: xStroke.weight, height: H });
+        if (state.fill.length > 0)
+            ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).fill(state.fill));
+        const inside = (at, length, weight) => Math.max(-length / 2 + weight / 2, Math.min(length / 2 - weight / 2, at));
+        const verticals = (values, stroke) => {
+            const weight = stroke[0]?.weight ?? 0;
+            if (weight <= 0)
+                return;
+            for (const v of values) {
+                const x = inside(along(v, state.xExtent, W), W, weight);
+                rule(ctx, { x, y: -H / 2 }, { x, y: H / 2 }, stroke);
             }
-            ctx.draw(xGrid.fill(xStroke.fill));
-        }
-        const yStroke = state.yGridStroke[0];
-        if (yStroke) {
-            const yGrid = new Graphics2D();
-            for (const v of state.yMarkers) {
-                const f = yFrac(v);
-                if (!interior(f))
-                    continue;
-                yGrid.rect({ x: 0, y: -H / 2 + f * H, width: W, height: yStroke.weight });
+        };
+        const horizontals = (values, stroke) => {
+            const weight = stroke[0]?.weight ?? 0;
+            if (weight <= 0)
+                return;
+            for (const v of values) {
+                const y = inside(along(v, state.yExtent, H), H, weight);
+                rule(ctx, { x: -W / 2, y }, { x: W / 2, y }, stroke);
             }
-            ctx.draw(yGrid.fill(yStroke.fill));
-        }
+        };
+        const within = ([min, max]) => (v) => v >= Math.min(min, max) - 1e-9 && v <= Math.max(min, max) + 1e-9;
+        verticals(state.xMarkers.filter(within(state.xExtent)), state.xGridStroke);
+        horizontals(state.yMarkers.filter(within(state.yExtent)), state.yGridStroke);
+        if (state.xAxisAt !== null)
+            horizontals([state.xAxisAt], state.axisStroke);
+        if (state.yAxisAt !== null)
+            verticals([state.yAxisAt], state.axisStroke);
     },
 });
 //# sourceMappingURL=chart-canvas.js.map

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  Graphics2D,\n  Types,\n  component2d,\n  fillOps,\n  shadowOps,\n  strokeOps,\n  type Fill,\n  type FillResolved,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps,\n  type Shadow,\n  type ShadowResolved,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"./entries\"\nimport { loadPaints } from \"./paints\"\nimport {\n  DEFAULT_PLOT_AREA,\n  DEFAULT_X_AXIS,\n  DEFAULT_Y_AXIS,\n  type Range,\n} from \"./shared\"\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\nconst strokeEntry = (initial: Stroke) =>\n  Types.custom<Stroke, StrokeResolved[]>(initial, { resolve: strokeOps.resolve, lerp: strokeOps.lerp })\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, sized from its box and centred\n * on its 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 const ChartCanvas = component2d({\n  key: \"chartCanvas\",\n  state: {\n    fill: Types.custom<Fill, FillResolved[]>(DEFAULT_PLOT_AREA.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    shadow: Types.custom<Shadow, ShadowResolved[]>(DEFAULT_PLOT_AREA.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),\n    xGridStroke: strokeEntry(DEFAULT_X_AXIS.lineStyle),\n    yGridStroke: strokeEntry(DEFAULT_Y_AXIS.lineStyle),\n    xMarkers: fresh<number[]>(() => []),\n    yMarkers: fresh<number[]>(() => []),\n    xExtent: fresh<Range>(() => [0, 1]),\n    yExtent: fresh<Range>(() => [0, 1]),\n  },\n  // The grid strokes are named past the conventional slots, so they are named here.\n  load: (loader, state) =>\n    loadPaints(loader, { fills: [state.fill], shadows: [state.shadow], strokes: [state.xGridStroke, state.yGridStroke] }),\n  render: (ctx, state) => {\n    const { width: W, height: H } = ctx.size\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(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).shadow(state.shadow).fill(state.fill))\n\n    const [xMin, xMax] = state.xExtent\n    const [yMin, yMax] = state.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 = state.xGridStroke[0]\n    if (xStroke) {\n      const xGrid = new Graphics2D()\n      for (const v of state.xMarkers) {\n        const f = xFrac(v)\n        if (!interior(f)) continue\n        xGrid.rect({ x: -W / 2 + f * W, y: 0, width: xStroke.weight, height: H })\n      }\n      ctx.draw(xGrid.fill(xStroke.fill))\n    }\n\n    const yStroke = state.yGridStroke[0]\n    if (yStroke) {\n      const yGrid = new Graphics2D()\n      for (const v of state.yMarkers) {\n        const f = yFrac(v)\n        if (!interior(f)) continue\n        yGrid.rect({ x: 0, y: -H / 2 + f * H, width: W, height: yStroke.weight })\n      }\n      ctx.draw(yGrid.fill(yStroke.fill))\n    }\n  },\n})\n\nexport type ChartCanvas = NodeOf<typeof ChartCanvas>\n"]}
+{"version":3,"file":"chart-canvas.js","sourceRoot":"","sources":["../../src/kit/chart-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  component2d,\n  fillOps,\n  strokeOps,\n  type Fill,\n  type FillResolved,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type RenderContext,\n  type Stroke,\n  type StrokeResolved,\n  type Vector2,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"./entries\"\nimport { loadPaints } from \"./paints\"\nimport type { Range } from \"./shared\"\n\nconst strokeEntry = () => Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp })\n\n/** Where along a scale a fraction lands in a run of `length` px centred on 0. */\nfunction along(value: number, [min, max]: Range, length: number): number {\n  return (max <= min ? 0 : (value - min) / (max - min) - 0.5) * length\n}\n\n/** One rule per draw: stroking a union of open paths paints nothing, and a dashed rule keeps its own phase. */\nexport function rule(ctx: RenderContext, from: Vector2, to: Vector2, stroke: StrokeResolved[], opacity = 1): void {\n  ctx.draw(new Graphics2D().line({ points: [from, to] }).stroke(stroke).opacity(opacity))\n}\n\n/**\n * The plot backdrop: the panel fill, the grid and the axis rules, sized from its\n * box. Grid lines are placed from data-unit marker positions mapped through the\n * extents, so each lands under its marker however the markers are spaced; a line\n * on an edge is drawn just inside it.\n */\nexport const ChartCanvas = component2d({\n  key: \"chartCanvas\",\n  state: {\n    fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    /** The vertical grid lines, one per `xMarkers` entry. */\n    xGridStroke: strokeEntry(),\n    /** The horizontal grid lines, one per `yMarkers` entry. */\n    yGridStroke: strokeEntry(),\n    xMarkers: fresh<number[]>(() => []),\n    yMarkers: fresh<number[]>(() => []),\n    /** `[min, max]` of each scale, mapping the markers into the panel. */\n    xExtent: fresh<Range>(() => [0, 1]),\n    yExtent: fresh<Range>(() => [0, 1]),\n    /** The baseline and the value-axis rule. */\n    axisStroke: strokeEntry(),\n    /** Where the horizontal axis rule sits on the y scale, or `null` for none. */\n    xAxisAt: Types.custom<number | null>(null),\n    /** Where the vertical axis rule sits on the x scale, or `null` for none. */\n    yAxisAt: Types.custom<number | null>(null),\n  },\n  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.xGridStroke, state.yGridStroke, state.axisStroke] }),\n  render: (ctx, state) => {\n    const { width: W, height: H } = ctx.size\n    if (W <= 0 || H <= 0) return\n    if (state.fill.length > 0) ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).fill(state.fill))\n\n    const inside = (at: number, length: number, weight: number) => Math.max(-length / 2 + weight / 2, Math.min(length / 2 - weight / 2, at))\n    const verticals = (values: readonly number[], stroke: StrokeResolved[]) => {\n      const weight = stroke[0]?.weight ?? 0\n      if (weight <= 0) return\n      for (const v of values) {\n        const x = inside(along(v, state.xExtent, W), W, weight)\n        rule(ctx, { x, y: -H / 2 }, { x, y: H / 2 }, stroke)\n      }\n    }\n    const horizontals = (values: readonly number[], stroke: StrokeResolved[]) => {\n      const weight = stroke[0]?.weight ?? 0\n      if (weight <= 0) return\n      for (const v of values) {\n        const y = inside(along(v, state.yExtent, H), H, weight)\n        rule(ctx, { x: -W / 2, y }, { x: W / 2, y }, stroke)\n      }\n    }\n    const within = ([min, max]: Range) => (v: number) => v >= Math.min(min, max) - 1e-9 && v <= Math.max(min, max) + 1e-9\n    verticals(state.xMarkers.filter(within(state.xExtent)), state.xGridStroke)\n    horizontals(state.yMarkers.filter(within(state.yExtent)), state.yGridStroke)\n    if (state.xAxisAt !== null) horizontals([state.xAxisAt], state.axisStroke)\n    if (state.yAxisAt !== null) verticals([state.yAxisAt], state.axisStroke)\n  },\n})\n\nexport type ChartCanvas = NodeOf<typeof ChartCanvas>\n"]}

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

@@ -1,50 +1,19 @@
-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 Fill, type NodeOf, 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 `showSeries`.
-     */
-    series: ChartSeries[];
-    /**
-     * The swatch colour for each series, by index — resolved by the chart, whose
-     * business it is whether a series' colour comes out of a stroke palette (a
-     * line) or a fill palette (a bar). Shorter than the series list means the
-     * missing entries fall back to white.
-     */
-    swatches: Fill[];
-    /** Padding, caption style, gaps, and swatch geometry — see {@link LegendConfig}. */
-    legend: LegendConfig;
-}
 /**
- * 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.
- *
- * `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.
+ * A chart's legend: one entry per series, a colour swatch then its caption, in
+ * a row (`flow: "horizontal"`) or a column (`"vertical"`, for a legend beside
+ * the plot). This node is the row, so the parent places it.
  */
 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>;
+    /** Swatch colour by series index, resolved by the chart; a missing entry is white. */
     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: 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`.
+     * How far each entry is shown, `0`-`1`, driving its length, opacity and gap
+     * together. Entries are never added or removed: "is this node a child" is not
+     * a function of time, while collapsed-but-present is.
      */
     readonly reveal: import("@motionscript/sdk").Type<number[] | Readonly<Record<number, number>>, number[], false>;
     readonly cornerRadius: import("@motionscript/sdk").Attribute<_RectCornerRadius, _CornerRadiusResolved>;
@@ -81,17 +50,13 @@ export declare const ChartLegend: import("@motionscript/sdk").Component<"chartLe
     };
 }, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     readonly series: import("@motionscript/sdk").Type<ChartSeries[], ChartSeries[], false>;
+    /** Swatch colour by series index, resolved by the chart; a missing entry is white. */
     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: 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`.
+     * How far each entry is shown, `0`-`1`, driving its length, opacity and gap
+     * together. Entries are never added or removed: "is this node a child" is not
+     * a function of time, while collapsed-but-present is.
      */
     readonly reveal: import("@motionscript/sdk").Type<number[] | Readonly<Record<number, number>>, number[], false>;
     readonly cornerRadius: import("@motionscript/sdk").Attribute<_RectCornerRadius, _CornerRadiusResolved>;
@@ -110,17 +75,13 @@ export declare const ChartLegend: import("@motionscript/sdk").Component<"chartLe
     readonly end: import("@motionscript/sdk").Type<number, number, false>;
 }>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     readonly series: import("@motionscript/sdk").Type<ChartSeries[], ChartSeries[], false>;
+    /** Swatch colour by series index, resolved by the chart; a missing entry is white. */
     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: 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`.
+     * How far each entry is shown, `0`-`1`, driving its length, opacity and gap
+     * together. Entries are never added or removed: "is this node a child" is not
+     * a function of time, while collapsed-but-present is.
      */
     readonly reveal: import("@motionscript/sdk").Type<number[] | Readonly<Record<number, number>>, number[], false>;
     readonly cornerRadius: import("@motionscript/sdk").Attribute<_RectCornerRadius, _CornerRadiusResolved>;
@@ -156,9 +117,5 @@ export declare const ChartLegend: import("@motionscript/sdk").Component<"chartLe
         readonly portion: import("@motionscript/sdk").Type<number, number, false>;
     };
 }, _Node2D<_Node2DProps>>>>;
-/** 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,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;;;;;;;;;;;;;;;;;;;;IATH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAuFL,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"}
+{"version":3,"file":"chart-legend.d.ts","sourceRoot":"","sources":["../../src/kit/chart-legend.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,IAAI,EACT,KAAK,MAAM,EAEX,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;AAK1B,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,UAAU,CAAA;AA+BjB;;;;GAIG;AACH,eAAO,MAAM,WAAW;;IAKpB,sFAAsF;;;IAGtF;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAPH,sFAAsF;;;IAGtF;;;;OAIG;;;;;;;;;;;;;;;;;;IAPH,sFAAsF;;;IAGtF;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA0EL,CAAA;AAQF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/kit/chart-legend.js

@@ -1,34 +1,29 @@
-import { Flow, Paint, Rect, Shapes, Text, Types, component2d, textOps, } from "@motionscript/sdk";
+import { Flow, Paint, Rect, Shapes, Text, Types, component2d, } from "@motionscript/sdk";
+import { boundText } from "./cartesian.js";
 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.
+ * One legend entry, hugging its swatch and caption; `shown` scales its length
+ * along the legend (`along`) from nothing. The length is measured from the
+ * content at any reveal, so a frame never depends on the entry once having been
+ * fully shown.
  */
 const LegendEntry = component2d({
     key: "legendEntry",
-    state: { ...row, shown: Types.number(1) },
+    state: { ...row, shown: Types.number(1), along: Types.oneOf(["horizontal", "vertical"]) },
     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 };
+        if (state.shown >= 1)
+            return size;
+        return state.along === "vertical" ? { ...size, height: state.shown * size.height } : { ...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.
- */
+/** Written whole, or one entry at a time as `{ [index]: reveal }`, which leaves the others as the frame left them so two series can move at once. */
 function revealOf(value, previous) {
     if (Array.isArray(value))
         return value;
@@ -38,86 +33,66 @@ function revealOf(value, previous) {
     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.
- *
- * `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.
+ * A chart's legend: one entry per series, a colour swatch then its caption, in
+ * a row (`flow: "horizontal"`) or a column (`"vertical"`, for a legend beside
+ * the plot). This node is the row, so the parent places it.
  */
 export const ChartLegend = component2d({
     key: "chartLegend",
     state: {
         ...row,
         series: fresh(() => []),
+        /** Swatch colour by series index, resolved by the chart; a missing entry is white. */
         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`.
+         * How far each entry is shown, `0`-`1`, driving its length, opacity and gap
+         * together. Entries are never added or removed: "is this node a child" is not
+         * a function of time, while collapsed-but-present is.
          */
         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.
+    // The flow must be stated: a `Rect` with none lays children out `freeform`, stacking every entry on one spot.
     defaults: {
         flow: "horizontal",
         width: "hug",
         height: "hug",
-        gap: (state) => state.legend.itemGap,
+        gap: (state) => (state.flow === "vertical" ? Math.round(state.legend.itemGap * 0.4) : state.legend.itemGap),
         padding: (state) => state.legend.padding,
+        align: (state) => (state.flow === "vertical" ? "centerLeft" : "center"),
         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.
+    // Every entry stays a child, so one always comes back where it belongs.
     children: (state) => {
-        const marker = state.legend.markerStyle;
+        const marker = () => state.legend.markerStyle;
+        const along = state.flow === "vertical" ? "vertical" : "horizontal";
         return state.series.map((series, index) => LegendEntry({
             flow: "horizontal",
-            gap: 12,
+            gap: () => Math.round((state.legend.textStyle.fontSize ?? 24) * 0.45),
             align: "center",
             width: "hug",
             height: "hug",
-            // Bound to the reveal, so showing and hiding is a number moving rather
-            // than a child arriving and leaving. The width follows it in `measure`,
-            // and the flanking gap closes with the entry rather than snapping.
+            along,
+            // The length follows the reveal in `measure`, and the flanking gap closes with the entry.
             opacity: () => state.reveal[index] ?? 0,
             gapScale: () => state.reveal[index] ?? 0,
             shown: () => state.reveal[index] ?? 0,
             children: [
-                Text({ ...textOps.styleProps(state.legend.textStyle), text: series.label }),
                 Rect({
-                    width: marker.width,
-                    height: marker.height,
-                    cornerRadius: marker.borderRadius,
-                    fill: state.swatches[index] ?? "white",
-                    stroke: marker.stroke,
-                    shadow: marker.shadow,
+                    width: () => marker().width,
+                    height: () => marker().height,
+                    cornerRadius: () => marker().borderRadius,
+                    fill: () => state.swatches[index] ?? "white",
+                    stroke: () => marker().stroke,
+                    shadow: () => marker().shadow,
                 }),
+                Text({ ...boundText(() => state.legend.textStyle), text: series.label || series.field }),
             ],
         }));
     },
     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`.
-         */
+        /** Grow series `index`'s entry back in at its position, the siblings sliding over. */
         showSeries: {
             args: { index: Types.number(0, { min: 0, step: 1 }) },
             // An index that is not a series takes its slot and moves nothing.
@@ -125,20 +100,14 @@ export const ChartLegend = component2d({
                 ? 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`. */
+        /** 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.
-         */
+        /** Dim every entry but `index` to {@link SPOTLIGHT_DIM}, in place. 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 })] : [])),
@@ -148,16 +117,9 @@ export const ChartLegend = component2d({
     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.
- */
+/** One entry's reveal ramping to `target` from where the command finds it, so a hide after 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;
-}
 //# sourceMappingURL=chart-legend.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-legend.js","sourceRoot":"","sources":["../../src/kit/chart-legend.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Flow,\n  Paint,\n  Rect,\n  Shapes,\n  Text,\n  Types,\n  component2d,\n  textOps,\n  type Fill,\n  type NodeOf,\n  type RectProps,\n  // Named so the row's emitted type reaches the Rect surface it spreads through the sdk, not core.\n  type Alignment as _Alignment,\n  type CornerRadiusResolved as _CornerRadiusResolved,\n  type CornerStyleResolved as _CornerStyleResolved,\n  type FillResolved as _FillResolved,\n  type FlowMode as _FlowMode,\n  type FlowResolved as _FlowResolved,\n  type GapSize as _GapSize,\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type RectCornerRadius as _RectCornerRadius,\n  type RectCornerStyle as _RectCornerStyle,\n  type Shadow as _Shadow,\n  type ShadowResolved as _ShadowResolved,\n  type Stroke as _Stroke,\n  type StrokeResolved as _StrokeResolved,\n  type Vector2 as _Vector2,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"./entries\"\nimport { frameEase } from \"./motion\"\nimport {\n  DEFAULT_LEGEND,\n  SPOTLIGHT_DIM,\n  type ChartSeries,\n  type LegendConfig,\n} from \"./shared\"\n\nexport interface ChartLegendProps extends RectProps {\n  /**\n   * One entry per series: legend `label`, its `enabled` default, and — through\n   * {@link ChartLegendProps.swatches} — the colour its chip is painted. A series\n   * that starts enabled (the default) is added to the row up front; one that\n   * starts `false` is hidden until a later `showSeries`.\n   */\n  series: ChartSeries[]\n  /**\n   * The swatch colour for each series, by index — resolved by the chart, whose\n   * business it is whether a series' colour comes out of a stroke palette (a\n   * line) or a fill palette (a bar). Shorter than the series list means the\n   * missing entries fall back to white.\n   */\n  swatches: Fill[]\n  /** Padding, caption style, gaps, and swatch geometry — see {@link LegendConfig}. */\n  legend: LegendConfig\n}\n\n/** A row's entries are a `Rect`'s: paint, the flow of its children, its corners. */\nconst row = { ...Paint.state, ...Flow.state, ...Shapes.corners }\n\n/**\n * One legend entry. It hugs its caption and swatch; `shown` scales that width\n * from nothing to the whole of it.\n *\n * The width is taken from the content on every measure, at any reveal, so a frame\n * never depends on whether the entry was once seen fully shown. A collapse needs a\n * number to scale, and `\"hug\"` is not one until something measures it — this is\n * the something.\n */\nconst LegendEntry = component2d({\n  key: \"legendEntry\",\n  state: { ...row, shown: Types.number(1) },\n  commands: { ...Paint.commands },\n  measure: (measurer, state, children) => {\n    const size = Flow.measure(measurer, state, children, Paint.inset(state))\n    return state.shown >= 1 ? size : { ...size, width: state.shown * size.width }\n  },\n  layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),\n  render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),\n})\n\n/**\n * How far each entry is shown, written whole (a document, a `set`) or one\n * entry at a time (a command, as `{ [index]: reveal }`), which leaves the others\n * as the frame left them — so two series moving at once each move their own.\n */\nfunction revealOf(value: readonly number[] | Readonly<Record<number, number>>, previous?: number[]): number[] {\n  if (Array.isArray(value)) return value as number[]\n  const next = [...(previous ?? [])]\n  for (const [index, reveal] of Object.entries(value)) next[Number(index)] = reveal\n  return next\n}\n\n/**\n * The legend of a chart: a **horizontal-flow row of entries**, one per series, laid out\n * left-to-right with the theme's `itemGap`. Each entry pairs the series label\n * with a rounded colour swatch; only the swatch carries the series colour, the\n * caption reads in the legend's neutral ink.\n *\n * `showSeries`/`hideSeries` flip a series on or off — showing one grows its\n * entry back in at its stable series position, hiding one shrinks it away. So\n * the row only ever shows the currently-enabled series, in series order, and\n * closes the gap when one leaves.\n *\n * This node *is* the row, so the parent places it (centred below the chart) and\n * it hugs its entries.\n */\nexport const ChartLegend = component2d({\n  key: \"chartLegend\",\n  state: {\n    ...row,\n    series: fresh<ChartSeries[]>(() => []),\n    swatches: fresh<Fill[]>(() => []),\n    legend: Types.custom<LegendConfig>(DEFAULT_LEGEND),\n    /**\n     * How far each entry is shown, `0`–`1`. Drives its width, opacity and gap\n     * together, so `0` is an entry that takes no room and `1` is one at its\n     * natural size.\n     *\n     * This replaces adding and removing the entry from the row: a command is\n     * asked what it looks like at a time, and \"is this node a child\" is not a\n     * value a time can produce. Collapsed-but-present is the same picture reached\n     * by a route that *is* a function of `t`.\n     */\n    reveal: fresh<number[], number[] | Readonly<Record<number, number>>>(() => [], { resolve: revealOf }),\n  },\n  // This node *is* the row, so the direction is its own answer. It has to be\n  // stated — a `Rect` given no flow lays its children out `freeform`, which\n  // stacks every entry on the same spot. The gap and padding are the theme's.\n  defaults: {\n    flow: \"horizontal\",\n    width: \"hug\",\n    height: \"hug\",\n    gap: (state) => state.legend.itemGap,\n    padding: (state) => state.legend.padding,\n    reveal: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),\n  },\n  // One entry per series, in series order, every one a child for good: order is\n  // fixed rather than depending on which siblings happen to be shown, so an entry\n  // always comes back where it belongs.\n  children: (state) => {\n    const marker = state.legend.markerStyle\n    return state.series.map((series, index) =>\n      LegendEntry({\n        flow: \"horizontal\",\n        gap: 12,\n        align: \"center\",\n        width: \"hug\",\n        height: \"hug\",\n        // Bound to the reveal, so showing and hiding is a number moving rather\n        // than a child arriving and leaving. The width follows it in `measure`,\n        // and the flanking gap closes with the entry rather than snapping.\n        opacity: () => state.reveal[index] ?? 0,\n        gapScale: () => state.reveal[index] ?? 0,\n        shown: () => state.reveal[index] ?? 0,\n        children: [\n          Text({ ...textOps.styleProps(state.legend.textStyle), text: series.label }),\n          Rect({\n            width: marker.width,\n            height: marker.height,\n            cornerRadius: marker.borderRadius,\n            fill: state.swatches[index] ?? \"white\",\n            stroke: marker.stroke,\n            shadow: marker.shadow,\n          }),\n        ],\n      })\n    )\n  },\n  commands: {\n    ...Paint.commands,\n    /**\n     * Grow series `index`'s entry back in at its series-order position, the\n     * siblings sliding over to make room. A reveal tween rather than an animated\n     * `addChildAt`: the entry never left, so the whole thing is a function of `t`.\n     */\n    showSeries: {\n      args: { index: Types.number(0, { min: 0, step: 1 }) },\n      // An index that is not a series takes its slot and moves nothing.\n      run: (timeline, state) => (timeline.args.index in state.series\n        ? timeline.animate(revealFrame(state, timeline.args.index, 1, frameEase(timeline)))\n        : timeline.wait(timeline.duration)),\n    },\n    /** Shrink series `index`'s entry away, the gap closing behind it — the mirror of `showSeries`. */\n    hideSeries: {\n      args: { index: Types.number(0, { min: 0, step: 1 }) },\n      run: (timeline, state) => (timeline.args.index in state.series\n        ? timeline.animate(revealFrame(state, timeline.args.index, 0, frameEase(timeline)))\n        : timeline.wait(timeline.duration)),\n    },\n    /**\n     * Dim every entry but series `index` to {@link SPOTLIGHT_DIM} and bring that\n     * one back to full — the legend half of a chart's `spotlightSeries`. Entries\n     * stay in place; only their opacity moves, so the row doesn't reflow. Only\n     * the entries shown when it is built are touched: a hidden series' entry is\n     * left as `hideSeries` left it.\n     */\n    spotlightSeries: {\n      args: { index: Types.number(0, { min: 0, step: 1 }) },\n      run: (timeline, state, children) =>\n        timeline.together(\n          children.flatMap((entry, i) =>\n            (state.reveal[i] ?? 0) > 0 ? [entry.to({ opacity: i === timeline.args.index ? 1 : SPOTLIGHT_DIM })] : []\n          )\n        ),\n    },\n  },\n  measure: (measurer, state, children) => Flow.measure(measurer, state, children, Paint.inset(state)),\n  layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),\n  render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),\n})\n\n/**\n * One entry's reveal ramping to `target` from where the command finds it — so a\n * hide that follows a show starts where the show left it.\n */\nfunction revealFrame(state: { readonly reveal: readonly number[] }, index: number, target: number, ease: (t: number) => number) {\n  const from = state.reveal[index] ?? 0\n  return (t: number) => ({ reveal: { [index]: from + (target - from) * ease(t) } })\n}\n\n/** Whether series `index` is showing at all on `legend`. */\nexport function legendShows(legend: { readonly reveal: readonly number[] }, index: number): boolean {\n  return (legend.reveal[index] ?? 0) > 0\n}\n\nexport type ChartLegend = NodeOf<typeof ChartLegend>\n"]}
+{"version":3,"file":"chart-legend.js","sourceRoot":"","sources":["../../src/kit/chart-legend.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Flow,\n  Paint,\n  Rect,\n  Shapes,\n  Text,\n  Types,\n  component2d,\n  type Fill,\n  type NodeOf,\n  // Named so the row's emitted type reaches the Rect surface it spreads through the sdk, not core.\n  type Alignment as _Alignment,\n  type CornerRadiusResolved as _CornerRadiusResolved,\n  type CornerStyleResolved as _CornerStyleResolved,\n  type FillResolved as _FillResolved,\n  type FlowMode as _FlowMode,\n  type FlowResolved as _FlowResolved,\n  type GapSize as _GapSize,\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type RectCornerRadius as _RectCornerRadius,\n  type RectCornerStyle as _RectCornerStyle,\n  type Shadow as _Shadow,\n  type ShadowResolved as _ShadowResolved,\n  type Stroke as _Stroke,\n  type StrokeResolved as _StrokeResolved,\n  type Vector2 as _Vector2,\n} from \"@motionscript/sdk\"\n\nimport { boundText } from \"./cartesian\"\nimport { fresh } from \"./entries\"\nimport { frameEase } from \"./motion\"\nimport {\n  DEFAULT_LEGEND,\n  SPOTLIGHT_DIM,\n  type ChartSeries,\n  type LegendConfig,\n} from \"./shared\"\n\nconst row = { ...Paint.state, ...Flow.state, ...Shapes.corners }\n\n/**\n * One legend entry, hugging its swatch and caption; `shown` scales its length\n * along the legend (`along`) from nothing. The length is measured from the\n * content at any reveal, so a frame never depends on the entry once having been\n * fully shown.\n */\nconst LegendEntry = component2d({\n  key: \"legendEntry\",\n  state: { ...row, shown: Types.number(1), along: Types.oneOf([\"horizontal\", \"vertical\"] as const) },\n  commands: { ...Paint.commands },\n  measure: (measurer, state, children) => {\n    const size = Flow.measure(measurer, state, children, Paint.inset(state))\n    if (state.shown >= 1) return size\n    return state.along === \"vertical\" ? { ...size, height: state.shown * size.height } : { ...size, width: state.shown * size.width }\n  },\n  layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),\n  render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),\n})\n\n/** Written whole, or one entry at a time as `{ [index]: reveal }`, which leaves the others as the frame left them so two series can move at once. */\nfunction revealOf(value: readonly number[] | Readonly<Record<number, number>>, previous?: number[]): number[] {\n  if (Array.isArray(value)) return value as number[]\n  const next = [...(previous ?? [])]\n  for (const [index, reveal] of Object.entries(value)) next[Number(index)] = reveal\n  return next\n}\n\n/**\n * A chart's legend: one entry per series, a colour swatch then its caption, in\n * a row (`flow: \"horizontal\"`) or a column (`\"vertical\"`, for a legend beside\n * the plot). This node is the row, so the parent places it.\n */\nexport const ChartLegend = component2d({\n  key: \"chartLegend\",\n  state: {\n    ...row,\n    series: fresh<ChartSeries[]>(() => []),\n    /** Swatch colour by series index, resolved by the chart; a missing entry is white. */\n    swatches: fresh<Fill[]>(() => []),\n    legend: Types.custom<LegendConfig>(DEFAULT_LEGEND),\n    /**\n     * How far each entry is shown, `0`-`1`, driving its length, opacity and gap\n     * together. Entries are never added or removed: \"is this node a child\" is not\n     * a function of time, while collapsed-but-present is.\n     */\n    reveal: fresh<number[], number[] | Readonly<Record<number, number>>>(() => [], { resolve: revealOf }),\n  },\n  // The flow must be stated: a `Rect` with none lays children out `freeform`, stacking every entry on one spot.\n  defaults: {\n    flow: \"horizontal\",\n    width: \"hug\",\n    height: \"hug\",\n    gap: (state) => (state.flow === \"vertical\" ? Math.round(state.legend.itemGap * 0.4) : state.legend.itemGap),\n    padding: (state) => state.legend.padding,\n    align: (state) => (state.flow === \"vertical\" ? \"centerLeft\" : \"center\"),\n    reveal: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),\n  },\n  // Every entry stays a child, so one always comes back where it belongs.\n  children: (state) => {\n    const marker = () => state.legend.markerStyle\n    const along = state.flow === \"vertical\" ? \"vertical\" : \"horizontal\"\n    return state.series.map((series, index) =>\n      LegendEntry({\n        flow: \"horizontal\",\n        gap: () => Math.round(((state.legend.textStyle.fontSize as number | undefined) ?? 24) * 0.45),\n        align: \"center\",\n        width: \"hug\",\n        height: \"hug\",\n        along,\n        // The length follows the reveal in `measure`, and the flanking gap closes with the entry.\n        opacity: () => state.reveal[index] ?? 0,\n        gapScale: () => state.reveal[index] ?? 0,\n        shown: () => state.reveal[index] ?? 0,\n        children: [\n          Rect({\n            width: () => marker().width,\n            height: () => marker().height,\n            cornerRadius: () => marker().borderRadius,\n            fill: () => state.swatches[index] ?? \"white\",\n            stroke: () => marker().stroke,\n            shadow: () => marker().shadow,\n          }),\n          Text({ ...boundText(() => state.legend.textStyle), text: series.label || series.field }),\n        ],\n      })\n    )\n  },\n  commands: {\n    ...Paint.commands,\n    /** Grow series `index`'s entry back in at its position, the siblings sliding over. */\n    showSeries: {\n      args: { index: Types.number(0, { min: 0, step: 1 }) },\n      // An index that is not a series takes its slot and moves nothing.\n      run: (timeline, state) => (timeline.args.index in state.series\n        ? timeline.animate(revealFrame(state, timeline.args.index, 1, frameEase(timeline)))\n        : timeline.wait(timeline.duration)),\n    },\n    /** The mirror of `showSeries`. */\n    hideSeries: {\n      args: { index: Types.number(0, { min: 0, step: 1 }) },\n      run: (timeline, state) => (timeline.args.index in state.series\n        ? timeline.animate(revealFrame(state, timeline.args.index, 0, frameEase(timeline)))\n        : timeline.wait(timeline.duration)),\n    },\n    /** Dim every entry but `index` to {@link SPOTLIGHT_DIM}, in place. A hidden series' entry is left as `hideSeries` left it. */\n    spotlightSeries: {\n      args: { index: Types.number(0, { min: 0, step: 1 }) },\n      run: (timeline, state, children) =>\n        timeline.together(\n          children.flatMap((entry, i) =>\n            (state.reveal[i] ?? 0) > 0 ? [entry.to({ opacity: i === timeline.args.index ? 1 : SPOTLIGHT_DIM })] : []\n          )\n        ),\n    },\n  },\n  measure: (measurer, state, children) => Flow.measure(measurer, state, children, Paint.inset(state)),\n  layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),\n  render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),\n})\n\n/** One entry's reveal ramping to `target` from where the command finds it, so a hide after a show starts where the show left it. */\nfunction revealFrame(state: { readonly reveal: readonly number[] }, index: number, target: number, ease: (t: number) => number) {\n  const from = state.reveal[index] ?? 0\n  return (t: number) => ({ reveal: { [index]: from + (target - from) * ease(t) } })\n}\n\nexport type ChartLegend = NodeOf<typeof ChartLegend>\n"]}

package/dist/kit/entries.d.ts

@@ -14,4 +14,6 @@ export declare function fresh<T, In = T>(make: () => T, options?: {
  * the element.
  */
 export declare function asParts(nodes: readonly Node2D[]): readonly Element[];
+/** The argument every per-series command takes: an index into `series`, offered by name. */
+export declare const SERIES_ARG: Type<number, number, false>;
 //# sourceMappingURL=entries.d.ts.map

package/dist/kit/entries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entries.d.ts","sourceRoot":"","sources":["../../src/kit/entries.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAE/E;;;GAGG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;IAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAGtI;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,OAAO,EAAE,CAEpE"}
+{"version":3,"file":"entries.d.ts","sourceRoot":"","sources":["../../src/kit/entries.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,OAAO,EAAqB,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAElG;;;GAGG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;IAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAGtI;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,OAAO,EAAE,CAEpE;AAED,4FAA4F;AAC5F,eAAO,MAAM,UAAU,6BAAuI,CAAA"}

package/dist/kit/entries.js

@@ -16,4 +16,6 @@ export function fresh(make, options) {
 export function asParts(nodes) {
     return nodes;
 }
+/** The argument every per-series command takes: an index into `series`, offered by name. */
+export const SERIES_ARG = Types.custom(0, { kind: "series", min: 0, step: 1 });
 //# sourceMappingURL=entries.js.map