@motionscript/charts 0.1.0-alpha.0 → 0.1.0-alpha.10

package/dist/line-chart/chart-region.js

@@ -1,17 +1,12 @@
-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 { Graphics2D, Node2D, fillOps, strokeOps, property, } from "@motionscript/core";
+import { Graphics2D, Types, component2d, fillOps, strokeOps, } from "@motionscript/sdk";
+import { fresh } from "../kit/entries.js";
+import { loadPaints } from "../kit/paints.js";
 import { DEFAULT_CHART_THEME, EMPTY_REGION_BOX, hasRegion, } from "./shared.js";
-import { declarePaints } from "@motionscript/core/component";
 /**
  * The **region call-out** of a {@link LineChart}: a washed rectangle over the
  * plot with a dashed rule down each edge the author actually bounded. Sized and
- * positioned entirely from the pre-mapped {@link ChartRegionProps.box} rather
- * than its own `layoutBounds` — the box already carries the plot geometry.
+ * positioned entirely from the pre-mapped `box` rather
+ * than its own box — the region already carries the plot geometry.
  *
  * It draws only the *marking*; fading the series outside the region is
  * {@link ChartLine}'s job (it clips its own polyline against the same box), so
@@ -21,20 +16,24 @@ import { declarePaints } from "@motionscript/core/component";
  * plot height, so its top and bottom edges are the plot's own border, not a data
  * bound — drawing dashes there would assert a limit the author didn't set.
  */
-export class ChartRegion extends Node2D {
-    /**
-     * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-     * paint props it carries — see {@link declarePaints}.
-     */
-    declareAssets(assets) {
-        super.declareAssets(assets);
-        declarePaints(this, assets);
-    }
-    renderSelf(ctx) {
-        const box = this.box;
+export const ChartRegion = component2d({
+    key: "chartRegion",
+    state: {
+        /** The highlighted slice, already resolved into this node's local pixel space (origin at centre, y-up) by the parent {@link LineChart}. A degenerate box draws nothing. */
+        box: fresh(() => EMPTY_REGION_BOX),
+        /** Dashed rule marking each *bounded* edge of the box. */
+        stroke: Types.custom(DEFAULT_CHART_THEME.region.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+        /** Wash filling the box, under the series lines. */
+        fill: Types.custom(DEFAULT_CHART_THEME.region.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+        /** Reveal of the annotation in `[0, 1]`, driven by the chart's own `regionReveal` so the rules and the series' dimming move as one. */
+        reveal: 0,
+    },
+    load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),
+    render: (ctx, state) => {
+        const box = state.box;
         if (!hasRegion(box))
             return;
-        const r = Math.max(0, Math.min(1, this.reveal));
+        const r = Math.max(0, Math.min(1, state.reveal));
         if (r <= 0)
             return;
         const width = box.right - box.left;
@@ -42,60 +41,27 @@ export class ChartRegion extends Node2D {
         const cx = (box.left + box.right) / 2;
         const cy = (box.bottom + box.top) / 2;
         // Wash first, so the rules sit over their own tint.
-        const layers = this.fill;
-        if (layers.length > 0) {
-            ctx.draw(new Graphics2D()
-                .rect({ x: cx, y: cy, width, height })
-                .fill(this.fill)
-                .opacity(r));
+        if (state.fill.length > 0) {
+            ctx.draw(new Graphics2D().rect({ x: cx, y: cy, width, height }).fill(state.fill).opacity(r));
         }
         // One rule per bounded edge, growing from the region's centre outward as
         // `reveal` climbs — the same "trace it in" beat as the series lines.
-        const stroke = this.stroke;
-        if (stroke.length === 0)
+        if (state.stroke.length === 0)
             return;
         // One `draw` per rule rather than four line ops under a single paint:
         // shapes chained before a `stroke()` are combined into one surface, and
         // stroking a union of disjoint open paths doesn't paint.
-        const rule = (points) => ctx.draw(new Graphics2D().line({ points }).stroke(this.stroke).opacity(r));
+        const rule = (points) => ctx.draw(new Graphics2D().line({ points }).stroke(state.stroke).opacity(r));
         if (box.xBounded) {
             const half = (height / 2) * r;
-            for (const x of [box.left, box.right]) {
-                rule([
-                    { x, y: cy - half },
-                    { x, y: cy + half },
-                ]);
-            }
+            for (const x of [box.left, box.right])
+                rule([{ x, y: cy - half }, { x, y: cy + half }]);
         }
         if (box.yBounded) {
             const half = (width / 2) * r;
-            for (const y of [box.bottom, box.top]) {
-                rule([
-                    { x: cx - half, y },
-                    { x: cx + half, y },
-                ]);
-            }
+            for (const y of [box.bottom, box.top])
+                rule([{ x: cx - half, y }, { x: cx + half, y }]);
         }
-    }
-}
-__decorate([
-    property({ default: () => EMPTY_REGION_BOX })
-], ChartRegion.prototype, "box", void 0);
-__decorate([
-    property({
-        default: DEFAULT_CHART_THEME.region.stroke,
-        mapper: strokeOps.resolve,
-        tween: strokeOps.lerp,
-    })
-], ChartRegion.prototype, "stroke", void 0);
-__decorate([
-    property({
-        default: DEFAULT_CHART_THEME.region.fill,
-        mapper: fillOps.resolve,
-        tween: fillOps.lerp,
-    })
-], ChartRegion.prototype, "fill", void 0);
-__decorate([
-    property({ default: 0 })
-], ChartRegion.prototype, "reveal", void 0);
+    },
+});
 //# sourceMappingURL=chart-region.js.map

package/dist/line-chart/chart-region.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-region.js","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAEL,UAAU,EACV,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GAOT,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,GAEV,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAqB5D;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,WAAY,SAAQ,MAAwB;IAgBvD;;;OAGG;IACM,aAAa,CAAC,MAAkB;QACvC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QAC3B,aAAa,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAC7B,CAAC;IAES,UAAU,CAAC,GAAoB;QACvC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAA;QACpB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;YAAE,OAAM;QAE3B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;QAC/C,IAAI,CAAC,IAAI,CAAC;YAAE,OAAM;QAElB,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI,CAAA;QAClC,MAAM,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAA;QACnC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACrC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAErC,oDAAoD;QACpD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAsB,CAAA;QAC1C,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACtB,GAAG,CAAC,IAAI,CACN,IAAI,UAAU,EAAE;iBACb,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;iBACrC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;iBACf,OAAO,CAAC,CAAC,CAAC,CACd,CAAA;QACH,CAAC;QAED,yEAAyE;QACzE,qEAAqE;QACrE,MAAM,MAAM,GAAG,IAAI,CAAC,MAA0B,CAAA;QAC9C,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAE/B,sEAAsE;QACtE,wEAAwE;QACxE,yDAAyD;QACzD,MAAM,IAAI,GAAG,CAAC,MAAkC,EAAE,EAAE,CAClD,GAAG,CAAC,IAAI,CAAC,IAAI,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAE5E,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;YAC7B,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC;oBACH,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE;oBACnB,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE;iBACpB,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QACD,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;YAC5B,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC;oBACH,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE;oBACnB,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE;iBACpB,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;IACH,CAAC;CACF;AA7EwD;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC;wCAAuB;AAM7D;IALP,QAAQ,CAAC;QACR,OAAO,EAAE,mBAAmB,CAAC,MAAM,CAAC,MAAM;QAC1C,MAAM,EAAE,SAAS,CAAC,OAAO;QACzB,KAAK,EAAE,SAAS,CAAC,IAAI;KACtB,CAAC;2CACoB;AAMd;IALP,QAAQ,CAAC;QACR,OAAO,EAAE,mBAAmB,CAAC,MAAM,CAAC,IAAI;QACxC,MAAM,EAAE,OAAO,CAAC,OAAO;QACvB,KAAK,EAAE,OAAO,CAAC,IAAI;KACpB,CAAC;yCACgB;AACgB;IAAjC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;2CAAuB","sourcesContent":["import {\n  type AssetScope,\n  Graphics2D,\n  Node2D,\n  fillOps,\n  strokeOps,\n  property,\n  type Fill,\n  type FillResolved,\n  type Node2DProps,\n  type RenderContext2D,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/core\"\n\nimport {\n  DEFAULT_CHART_THEME,\n  EMPTY_REGION_BOX,\n  hasRegion,\n  type RegionBox,\n} from \"./shared\"\nimport { declarePaints } from \"@motionscript/core/component\"\n\nexport interface ChartRegionProps extends Node2DProps {\n  /**\n   * The highlighted slice, already resolved into this node's local pixel space\n   * (origin at centre, y-up) by the parent {@link LineChart}. A degenerate box\n   * draws nothing.\n   */\n  box: RegionBox\n  /** Dashed rule marking each *bounded* edge of the box. */\n  stroke: Stroke\n  /** Wash filling the box, under the series lines. */\n  fill: Fill\n  /**\n   * Reveal of the annotation in `[0, 1]`: 0 hides it, 1 draws it fully. Driven\n   * by the chart's own `regionReveal`, so the rules and the series' dimming move\n   * as one.\n   */\n  reveal: number\n}\n\n/**\n * The **region call-out** of a {@link LineChart}: a washed rectangle over the\n * plot with a dashed rule down each edge the author actually bounded. Sized and\n * positioned entirely from the pre-mapped {@link ChartRegionProps.box} rather\n * than its own `layoutBounds` — the box already carries the plot geometry.\n *\n * It draws only the *marking*; fading the series outside the region is\n * {@link ChartLine}'s job (it clips its own polyline against the same box), so\n * the two can't disagree about where the boundary is.\n *\n * Only bounded edges get a rule: a region given just an `x` range spans the full\n * plot height, so its top and bottom edges are the plot's own border, not a data\n * bound — drawing dashes there would assert a limit the author didn't set.\n */\nexport class ChartRegion extends Node2D<ChartRegionProps> {\n  @property({ default: () => EMPTY_REGION_BOX }) declare box: RegionBox\n  @property({\n    default: DEFAULT_CHART_THEME.region.stroke,\n    mapper: strokeOps.resolve,\n    tween: strokeOps.lerp,\n  })\n  declare stroke: Stroke\n  @property({\n    default: DEFAULT_CHART_THEME.region.fill,\n    mapper: fillOps.resolve,\n    tween: fillOps.lerp,\n  })\n  declare fill: Fill\n  @property({ default: 0 }) declare reveal: number\n\n  /**\n   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the\n   * paint props it carries — see {@link declarePaints}.\n   */\n  override declareAssets(assets: AssetScope): void {\n    super.declareAssets(assets)\n    declarePaints(this, assets)\n  }\n\n  protected renderSelf(ctx: RenderContext2D): void {\n    const box = this.box\n    if (!hasRegion(box)) return\n\n    const r = Math.max(0, Math.min(1, this.reveal))\n    if (r <= 0) return\n\n    const width = box.right - box.left\n    const height = box.top - box.bottom\n    const cx = (box.left + box.right) / 2\n    const cy = (box.bottom + box.top) / 2\n\n    // Wash first, so the rules sit over their own tint.\n    const layers = this.fill as FillResolved[]\n    if (layers.length > 0) {\n      ctx.draw(\n        new Graphics2D()\n          .rect({ x: cx, y: cy, width, height })\n          .fill(this.fill)\n          .opacity(r)\n      )\n    }\n\n    // One rule per bounded edge, growing from the region's centre outward as\n    // `reveal` climbs — the same \"trace it in\" beat as the series lines.\n    const stroke = this.stroke as StrokeResolved[]\n    if (stroke.length === 0) return\n\n    // One `draw` per rule rather than four line ops under a single paint:\n    // shapes chained before a `stroke()` are combined into one surface, and\n    // stroking a union of disjoint open paths doesn't paint.\n    const rule = (points: { x: number; y: number }[]) =>\n      ctx.draw(new Graphics2D().line({ points }).stroke(this.stroke).opacity(r))\n\n    if (box.xBounded) {\n      const half = (height / 2) * r\n      for (const x of [box.left, box.right]) {\n        rule([\n          { x, y: cy - half },\n          { x, y: cy + half },\n        ])\n      }\n    }\n    if (box.yBounded) {\n      const half = (width / 2) * r\n      for (const y of [box.bottom, box.top]) {\n        rule([\n          { x: cx - half, y },\n          { x: cx + half, y },\n        ])\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"chart-region.js","sourceRoot":"","sources":["../../src/line-chart/chart-region.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` through the sdk, not core.\n  type Node2D as _Node2D,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { loadPaints } from \"../kit/paints\"\nimport {\n  DEFAULT_CHART_THEME,\n  EMPTY_REGION_BOX,\n  hasRegion,\n  type RegionBox,\n} from \"./shared\"\n\n/**\n * The **region call-out** of a {@link LineChart}: a washed rectangle over the\n * plot with a dashed rule down each edge the author actually bounded. Sized and\n * positioned entirely from the pre-mapped `box` rather\n * than its own box — the region already carries the plot geometry.\n *\n * It draws only the *marking*; fading the series outside the region is\n * {@link ChartLine}'s job (it clips its own polyline against the same box), so\n * the two can't disagree about where the boundary is.\n *\n * Only bounded edges get a rule: a region given just an `x` range spans the full\n * plot height, so its top and bottom edges are the plot's own border, not a data\n * bound — drawing dashes there would assert a limit the author didn't set.\n */\nexport const ChartRegion = component2d({\n  key: \"chartRegion\",\n  state: {\n    /** The highlighted slice, already resolved into this node's local pixel space (origin at centre, y-up) by the parent {@link LineChart}. A degenerate box draws nothing. */\n    box: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    /** Dashed rule marking each *bounded* edge of the box. */\n    stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_CHART_THEME.region.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    /** Wash filling the box, under the series lines. */\n    fill: Types.custom<Fill, FillResolved[]>(DEFAULT_CHART_THEME.region.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    /** Reveal of the annotation in `[0, 1]`, driven by the chart's own `regionReveal` so the rules and the series' dimming move as one. */\n    reveal: 0,\n  },\n  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),\n  render: (ctx, state) => {\n    const box = state.box\n    if (!hasRegion(box)) return\n\n    const r = Math.max(0, Math.min(1, state.reveal))\n    if (r <= 0) return\n\n    const width = box.right - box.left\n    const height = box.top - box.bottom\n    const cx = (box.left + box.right) / 2\n    const cy = (box.bottom + box.top) / 2\n\n    // Wash first, so the rules sit over their own tint.\n    if (state.fill.length > 0) {\n      ctx.draw(new Graphics2D().rect({ x: cx, y: cy, width, height }).fill(state.fill).opacity(r))\n    }\n\n    // One rule per bounded edge, growing from the region's centre outward as\n    // `reveal` climbs — the same \"trace it in\" beat as the series lines.\n    if (state.stroke.length === 0) return\n\n    // One `draw` per rule rather than four line ops under a single paint:\n    // shapes chained before a `stroke()` are combined into one surface, and\n    // stroking a union of disjoint open paths doesn't paint.\n    const rule = (points: { x: number; y: number }[]) =>\n      ctx.draw(new Graphics2D().line({ points }).stroke(state.stroke).opacity(r))\n\n    if (box.xBounded) {\n      const half = (height / 2) * r\n      for (const x of [box.left, box.right]) rule([{ x, y: cy - half }, { x, y: cy + half }])\n    }\n    if (box.yBounded) {\n      const half = (width / 2) * r\n      for (const y of [box.bottom, box.top]) rule([{ x: cx - half, y }, { x: cx + half, y }])\n    }\n  },\n})\n\nexport type ChartRegion = NodeOf<typeof ChartRegion>\n"]}

package/dist/line-chart/horizontal-axis.d.ts

@@ -1,21 +1,6 @@
-import { Node2D, type CommandArgs, type NodeConfig, type Node2DProps } from "@motionscript/core";
+import { type NodeOf, type Node2D } from "@motionscript/sdk";
+import { type Arrival } from "../kit/motion.js";
 import { type AxisConfig, type Range } from "../kit/shared.js";
-import { type Seekable } from "@motionscript/core/component";
-export interface HorizontalAxisProps extends Node2DProps {
-    /** `[min, max]` of the horizontal scale the markers are positioned within. */
-    range: Range;
-    /** Tick values (in data units) to draw along the axis. */
-    markers: number[];
-    /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
-    axis: AxisConfig;
-    /**
-     * Caption drawn centred in the gutter beneath the marker row. Empty string
-     * (the default) hides it.
-     */
-    label: string;
-}
-/** How a tick value is captioned — see {@link HorizontalAxis.labelFor}. */
-export type MarkerLabel = (value: number) => string;
 /**
  * The horizontal axis of a {@link LineChart}: a **row of {@link Text} nodes**,
  * one per marker value, running left-to-right. Pure layout — the mirror of the
@@ -26,60 +11,69 @@ export type MarkerLabel = (value: number) => string;
  * `2026-03` sits three months along, not three slots along. That is what keeps
  * it distinct from a bar chart's bottom axis, which centres a caption on each
  * slot and has no scale at all — the two only look alike. What the values are
- * captioned *as* is the chart's to decide; see {@link labelFor}.
+ * captioned *as* is the chart's to decide, in `captions`.
  *
- * {@link enter} staggers the markers in **left-to-right**: each starts lifted a
+ * `enter` staggers the markers in **left-to-right**: each starts lifted a
  * little above its slot and transparent, then fades and slides down into place.
  */
-export declare class HorizontalAxis extends Node2D<HorizontalAxisProps> {
-    range: Range;
-    markers: number[];
-    axis: AxisConfig;
-    label: string;
+export declare const HorizontalAxis: import("@motionscript/sdk").Component<"horizontalAxis", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** `[min, max]` of the horizontal scale the markers are positioned within. */
+    readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    /** Tick values (in data units) to draw along the axis. */
+    readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
     /**
-     * How a tick value is captioned. Defaults to the numeric formatting the
-     * vertical axis uses; a chart whose x column names months or categories
-     * replaces it (see `x-scale.ts`).
-     *
-     * A plain field rather than a `@property`, because it is a **policy, not a
-     * value**: there is nothing to tween between two formatters, and a signal
-     * holding a function is a signal every `set`/`to` on this node would have to
-     * know not to touch. Read inside each marker's `text` binding, so replacing it
-     * before the first frame is enough — which is when the chart does it.
+     * How each marker is captioned, one per entry of `markers` and in its order.
+     * Empty (the default), or short, captions a marker with its bare numeric
+     * reading; a chart whose x column names months or categories writes those.
      */
-    labelFor: MarkerLabel;
-    /** One text node per marker, ordered left → right, for the staggered enter. */
-    private markerNodes;
-    /** The caption node, or null when `label` is empty. */
-    private labelNode;
-    /** The live tick values, left → right — re-read every frame, not snapshotted. */
-    private get sortedMarkers();
-    private valueAt;
-    /** Tick `i`'s fraction across the live `range`, 0 at the left edge. */
-    private fracAt;
-    constructor(props?: NodeConfig<HorizontalAxis, HorizontalAxisProps>);
+    readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
+    /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
+    readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    /** Caption drawn centred in the gutter beneath the marker row; empty (the default) hides it. */
+    readonly label: "";
+    readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
+}>, {
+    readonly enter: {
+        readonly stagger: import("@motionscript/sdk").Type<number | undefined, number | undefined, false>;
+        readonly slide: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, null, Node2D<import("@motionscript/core").Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** `[min, max]` of the horizontal scale the markers are positioned within. */
+    readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    /** Tick values (in data units) to draw along the axis. */
+    readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
     /**
-     * Primes every marker (and the caption) at its pre-entrance state: lifted
-     * above its slot and transparent. Idempotent — see {@link VerticalAxis.arm}.
+     * How each marker is captioned, one per entry of `markers` and in its order.
+     * Empty (the default), or short, captions a marker with its bare numeric
+     * reading; a chart whose x column names months or categories writes those.
      */
-    arm(slide?: number): void;
+    readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
+    /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
+    readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    /** Caption drawn centred in the gutter beneath the marker row; empty (the default) hides it. */
+    readonly label: "";
+    readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** `[min, max]` of the horizontal scale the markers are positioned within. */
+    readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    /** Tick values (in data units) to draw along the axis. */
+    readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
     /**
-     * Stagger the markers in left to right, then slide the caption in after them.
-     *
-     * A {@link Seekable} rather than a generator. The offsets were always static —
-     * `i * step` per marker — but expressed as `wait` inside a generator they only
-     * existed while it ran, so knowing what the axis looked like partway through
-     * meant running it from zero. Placed explicitly, the same stagger can be asked
-     * for a time, which is what lets a chart scene scrub in constant time.
-     *
-     * `duration` is the **whole** entrance — see {@link VerticalAxis.enter} and
-     * {@link enterBudget}.
+     * How each marker is captioned, one per entry of `markers` and in its order.
+     * Empty (the default), or short, captions a marker with its bare numeric
+     * reading; a chart whose x column names months or categories writes those.
      */
-    enter(args: CommandArgs<{
-        stagger?: number;
-        slide?: number;
-    }> & {
-        duration: number;
-    }): Seekable;
-}
+    readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
+    /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
+    readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    /** Caption drawn centred in the gutter beneath the marker row; empty (the default) hides it. */
+    readonly label: "";
+    readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
+}>, {
+    readonly enter: {
+        readonly stagger: import("@motionscript/sdk").Type<number | undefined, number | undefined, false>;
+        readonly slide: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, Node2D<import("@motionscript/core").Node2DProps>>>>;
+export type HorizontalAxis = NodeOf<typeof HorizontalAxis>;
 //# sourceMappingURL=horizontal-axis.d.ts.map

package/dist/line-chart/horizontal-axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"horizontal-axis.d.ts","sourceRoot":"","sources":["../../src/line-chart/horizontal-axis.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAON,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAEzE,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,8EAA8E;IAC9E,KAAK,EAAE,KAAK,CAAC;IACb,0DAA0D;IAC1D,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,oFAAoF;IACpF,IAAI,EAAE,UAAU,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAKD,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AACH,qBAAa,cAAe,SAAQ,MAAM,CAAC,mBAAmB,CAAC;IACP,KAAK,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IACxB,IAAI,EAAE,UAAU,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IAEjD;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,WAAW,CAAgB;IAErC,+EAA+E;IAC/E,OAAO,CAAC,WAAW,CAAc;IACjC,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAAqB;IAEtC,iFAAiF;IACjF,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,OAAO;IAIf,uEAAuE;IACvE,OAAO,CAAC,MAAM;gBAOF,KAAK,CAAC,EAAE,UAAU,CAAC,cAAc,EAAE,mBAAmB,CAAC;IAkDnE;;;OAGG;IACH,GAAG,CAAC,KAAK,SAAQ,GAAG,IAAI;IAKxB;;;;;;;;;;;OAWG;IAEH,KAAK,CACH,IAAI,EAAE,WAAW,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAC7E,QAAQ;CA4BZ"}
+{"version":3,"file":"horizontal-axis.d.ts","sourceRoot":"","sources":["../../src/line-chart/horizontal-axis.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,MAAM,EACX,KAAK,MAAM,EACZ,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAA8D,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AACzG,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,eAAe,CAAC;AAMvB;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc;IAGvB,8EAA8E;;IAE9E,0DAA0D;;IAE1D;;;;OAIG;;IAEH,oFAAoF;;IAEpF,gGAAgG;;;;;;;;;IAZhG,8EAA8E;;IAE9E,0DAA0D;;IAE1D;;;;OAIG;;IAEH,oFAAoF;;IAEpF,gGAAgG;;;;IAZhG,8EAA8E;;IAE9E,0DAA0D;;IAE1D;;;;OAIG;;IAEH,oFAAoF;;IAEpF,gGAAgG;;;;;;;;sDA8FlG,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/line-chart/horizontal-axis.js

@@ -1,12 +1,8 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { command, Node2D, Rect, Text, easeOut, property, insetsOps, textOps, } from "@motionscript/core";
-import { DEFAULT_X_AXIS, enterBudget, formatMarker, } from "../kit/shared.js";
-import { at, compose } from "@motionscript/core/component";
+import { Rect, Text, Types, component2d, insetsOps, textOps, } from "@motionscript/sdk";
+import { asParts, fresh } from "../kit/entries.js";
+import { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase } from "../kit/motion.js";
+import { DEFAULT_X_AXIS, enterBudget, } from "../kit/shared.js";
+import { markerCaption } from "../kit/vertical-axis.js";
 /** How far a marker starts above its slot when it enters, in px. */
 const SLIDE = 24;
 /**
@@ -19,57 +15,57 @@ const SLIDE = 24;
  * `2026-03` sits three months along, not three slots along. That is what keeps
  * it distinct from a bar chart's bottom axis, which centres a caption on each
  * slot and has no scale at all — the two only look alike. What the values are
- * captioned *as* is the chart's to decide; see {@link labelFor}.
+ * captioned *as* is the chart's to decide, in `captions`.
  *
- * {@link enter} staggers the markers in **left-to-right**: each starts lifted a
+ * `enter` staggers the markers in **left-to-right**: each starts lifted a
  * little above its slot and transparent, then fades and slides down into place.
  */
-export class HorizontalAxis extends Node2D {
-    /**
-     * How a tick value is captioned. Defaults to the numeric formatting the
-     * vertical axis uses; a chart whose x column names months or categories
-     * replaces it (see `x-scale.ts`).
-     *
-     * A plain field rather than a `@property`, because it is a **policy, not a
-     * value**: there is nothing to tween between two formatters, and a signal
-     * holding a function is a signal every `set`/`to` on this node would have to
-     * know not to touch. Read inside each marker's `text` binding, so replacing it
-     * before the first frame is enough — which is when the chart does it.
-     */
-    labelFor = formatMarker;
-    /** One text node per marker, ordered left → right, for the staggered enter. */
-    markerNodes = [];
-    /** The caption node, or null when `label` is empty. */
-    labelNode = null;
-    /** The live tick values, left → right — re-read every frame, not snapshotted. */
-    get sortedMarkers() {
-        return [...this.markers].sort((a, b) => a - b);
-    }
-    valueAt(index) {
-        return this.sortedMarkers[index];
-    }
-    /** Tick `i`'s fraction across the live `range`, 0 at the left edge. */
-    fracAt(index) {
-        const v = this.valueAt(index);
-        if (v === undefined)
-            return 0;
-        const [min, max] = this.range;
-        return max <= min ? 0 : (v - min) / (max - min);
-    }
-    constructor(props) {
-        super(props);
-        const tickPad = insetsOps.resolve(this.axis.tickPadding).top;
-        const titlePad = insetsOps.resolve(this.axis.titlePadding).top;
-        this.markerNodes = this.markers.map((_, i) => {
+export const HorizontalAxis = component2d({
+    key: "horizontalAxis",
+    state: {
+        /** `[min, max]` of the horizontal scale the markers are positioned within. */
+        range: fresh(() => [0, 1]),
+        /** Tick values (in data units) to draw along the axis. */
+        markers: fresh(() => []),
+        /**
+         * How each marker is captioned, one per entry of `markers` and in its order.
+         * Empty (the default), or short, captions a marker with its bare numeric
+         * reading; a chart whose x column names months or categories writes those.
+         */
+        captions: fresh(() => []),
+        /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
+        axis: Types.custom(DEFAULT_X_AXIS),
+        /** Caption drawn centred in the gutter beneath the marker row; empty (the default) hides it. */
+        label: "",
+        arrivals: arrivalsEntry(),
+    },
+    // A plain node filled its parent; one made of its markers would hug them.
+    defaults: { width: "fill", height: "fill" },
+    children: (state) => {
+        const tickPad = insetsOps.resolve(state.axis.tickPadding).top;
+        const titlePad = insetsOps.resolve(state.axis.titlePadding).top;
+        const column = [];
+        // The column's parent is the axis: its box is what the markers are placed in.
+        const box = () => column[0]?.parent?.layoutBounds ?? { width: 0, height: 0 };
+        /** The live tick values, left → right — re-read every frame, not snapshotted. */
+        const sorted = () => [...state.markers].sort((a, b) => a - b);
+        /** Tick `i`'s fraction across the live `range`, 0 at the left edge. */
+        const fracAt = (value) => {
+            if (value === undefined)
+                return 0;
+            const [min, max] = state.range;
+            return max <= min ? 0 : (value - min) / (max - min);
+        };
+        const markers = state.markers.map((_, i) => {
             const marker = new Text({
-                ...textOps.styleProps(this.axis.labelStyle),
+                ...textOps.styleProps(state.axis.labelStyle),
                 text: () => {
-                    const v = this.valueAt(i);
-                    return v === undefined ? "" : this.labelFor(v);
+                    const value = sorted()[i];
+                    return value === undefined ? "" : markerCaption(state, value);
                 },
                 x: () => {
-                    const width = this.layoutBounds.width;
-                    const centred = (this.fracAt(i) - 0.5) * width;
+                    const width = box().width;
+                    const centred = (fracAt(sorted()[i]) - 0.5) * width;
                     // Held inside the axis's right edge, which is also the *chart's*: the
                     // last marker is centred on the last grid line, so half of `2026-06`
                     // — or of `3300` — would be drawn outside the node's box and outside
@@ -79,80 +75,55 @@ export class HorizontalAxis extends Node2D {
                     const limit = width / 2 - marker.layoutBounds.width / 2;
                     return Math.min(centred, limit);
                 },
+                opacity: () => arrivalOf(state.arrivals, i).opacity,
+                y: () => arrivalOf(state.arrivals, i).shift,
             });
             return marker;
         });
         const children = [
-            new Rect({
-                width: "fill",
-                height: "hug",
-                padding: { top: tickPad },
-                children: this.markerNodes,
-            }),
+            new Rect({ width: "fill", height: "hug", padding: { top: tickPad }, children: markers }),
         ];
-        if (this.label !== "") {
-            this.labelNode = new Text({
-                ...textOps.styleProps(this.axis.titleStyle),
-                text: this.label,
-            });
-            children.push(this.labelNode);
+        if (state.label !== "") {
+            children.push(new Text({
+                ...textOps.styleProps(state.axis.titleStyle),
+                text: state.label,
+                opacity: () => arrivalOf(state.arrivals, "label").opacity,
+                y: () => arrivalOf(state.arrivals, "label").shift,
+            }));
         }
-        this.add(new Rect({ flow: "vertical", gap: titlePad, height: "hug", width: "fill", children }));
-    }
-    /**
-     * Primes every marker (and the caption) at its pre-entrance state: lifted
-     * above its slot and transparent. Idempotent — see {@link VerticalAxis.arm}.
-     */
-    arm(slide = SLIDE) {
-        for (const marker of this.markerNodes)
-            marker.set({ opacity: 0, y: slide });
-        this.labelNode?.set({ opacity: 0, y: slide });
-    }
-    /**
-     * Stagger the markers in left to right, then slide the caption in after them.
-     *
-     * A {@link Seekable} rather than a generator. The offsets were always static —
-     * `i * step` per marker — but expressed as `wait` inside a generator they only
-     * existed while it ran, so knowing what the axis looked like partway through
-     * meant running it from zero. Placed explicitly, the same stagger can be asked
-     * for a time, which is what lets a chart scene scrub in constant time.
-     *
-     * `duration` is the **whole** entrance — see {@link VerticalAxis.enter} and
-     * {@link enterBudget}.
-     */
-    enter(args) {
-        const { stagger, slide = SLIDE } = args.data ?? {};
-        const duration = args.duration;
-        const easing = args.easing ?? easeOut();
-        const nodes = this.markerNodes;
-        if (nodes.length === 0)
-            return compose([]);
-        const { step, per, caption } = enterBudget(duration, nodes.length, this.labelNode !== null, stagger);
-        this.arm(slide);
-        // Left marker leads: markerNodes is already left → right.
-        const markers = nodes.map((node, i) => at(i * step, node.to({ data: { opacity: 1, y: 0 }, duration: per, easing })));
-        const lastMarkerEnds = nodes.length === 0 ? 0 : (nodes.length - 1) * step + per;
-        return compose([
-            ...markers,
-            ...(this.labelNode
-                ? [at(lastMarkerEnds, this.labelNode.to({ data: { opacity: 1, y: 0 }, duration: caption, easing }))]
-                : []),
-        ]);
-    }
-}
-__decorate([
-    property({ default: () => [0, 1] })
-], HorizontalAxis.prototype, "range", void 0);
-__decorate([
-    property({ default: () => [] })
-], HorizontalAxis.prototype, "markers", void 0);
-__decorate([
-    property({ default: DEFAULT_X_AXIS })
-], HorizontalAxis.prototype, "axis", void 0);
-__decorate([
-    property({ default: "" })
-], HorizontalAxis.prototype, "label", void 0);
-__decorate([
-    command()
-], HorizontalAxis.prototype, "enter", null);
+        column.push(new Rect({ flow: "vertical", gap: titlePad, height: "hug", width: "fill", children }));
+        return asParts(column);
+    },
+    commands: {
+        /**
+         * Stagger the markers in left to right, then slide the caption in after
+         * them. Its first frame arms them all: lifted by `slide` and transparent.
+         *
+         * The timeline's duration is the **whole** entrance — see
+         * `VerticalAxis.enter` and {@link enterBudget}.
+         */
+        enter: {
+            args: {
+                stagger: Types.custom(undefined),
+                slide: Types.number(SLIDE),
+            },
+            run: (timeline, state) => {
+                const { stagger, slide } = timeline.args;
+                const count = state.markers.length;
+                const captioned = state.label !== "";
+                const from = { opacity: 0, shift: slide };
+                const keys = [...state.markers.keys(), ...(captioned ? ["label"] : [])];
+                const arm = timeline.animate(() => ({ arrivals: armed(keys, from) }));
+                if (count === 0)
+                    return arm;
+                const { step, per, caption } = enterBudget(timeline.duration, count, captioned, stagger);
+                const ease = frameEase(timeline);
+                // Left marker leads: the row is already left → right.
+                const markers = state.markers.map((_, i) => ({ at: i * step, duration: per, piece: arrival(timeline, i, from, ease) }));
+                const label = captioned ? [{ at: (count - 1) * step + per, duration: caption, piece: arrival(timeline, "label", from, ease) }] : [];
+                return timeline.together([arm, beats(timeline, [...markers, ...label])]);
+            },
+        },
+    },
+});
 //# sourceMappingURL=horizontal-axis.js.map