@motionscript/charts 0.1.0-alpha.5 → 0.1.0-alpha.7

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

@@ -1,45 +1,116 @@
-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, command, easeOut, strokeOps, property, } from "@motionscript/sdk";
+import { Graphics2D, Types, component2d, strokeOps, } from "@motionscript/sdk";
+import { fresh } from "../kit/entries.js";
+import { frameEase } from "../kit/motion.js";
+import { loadPaints } from "../kit/paints.js";
 import { SPOTLIGHT_DIM } from "../kit/shared.js";
 import { EMPTY_REGION_BOX, clipPolylineToBox, hasRegion, } from "./shared.js";
-import { declarePaints } from "@motionscript/sdk/component";
+/**
+ * The prefix of `pts` revealed at fraction `p ∈ [0, 1]`, measuring the reveal
+ * by *cumulative arc length* so the line traces at a steady pace regardless of
+ * uneven point spacing. Returns the whole-point prefix plus one interpolated
+ * point partway along the active segment.
+ */
+function tracePoints(pts, p) {
+    if (p >= 1 || pts.length < 2)
+        return pts;
+    if (p <= 0)
+        return [];
+    const segLen = [];
+    let total = 0;
+    for (let i = 1; i < pts.length; i++) {
+        const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y);
+        segLen.push(d);
+        total += d;
+    }
+    if (total === 0)
+        return pts;
+    let target = total * p;
+    const out = [pts[0]];
+    for (let i = 0; i < segLen.length; i++) {
+        if (target >= segLen[i]) {
+            out.push(pts[i + 1]);
+            target -= segLen[i];
+        }
+        else {
+            const t = segLen[i] === 0 ? 0 : target / segLen[i];
+            out.push({
+                x: pts[i].x + (pts[i + 1].x - pts[i].x) * t,
+                y: pts[i].y + (pts[i + 1].y - pts[i].y) * t,
+            });
+            break;
+        }
+    }
+    return out;
+}
 /**
  * A single series line of a {@link LineChart}: one rounded polyline traced
  * through pre-mapped pixel `points`, drawn as one {@link Graphics2D} command list.
  * Sized and positioned by the parent, which shares the plot's coordinate frame.
  *
- * Two signals drive it: {@link ChartLineProps.progress} traces the line in
- * (animated by {@link enter}) and `enabled` shows or hides it wholesale.
+ * Two signals drive it: `progress` traces the line in
+ * (animated by `enter`) and `enabled` shows or hides it wholesale.
  */
-export class ChartLine 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) {
-        if (!this.enabled)
+export const ChartLine = component2d({
+    key: "chartLine",
+    state: {
+        /** The series polyline, already mapped into this node's local pixel space (origin at centre, y-up) by the parent {@link LineChart}. Ordered along x. */
+        points: fresh(() => []),
+        /** Line colour + weight (+ optional dash/cap/join) — the per-series stroke. */
+        stroke: Types.custom([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+        /**
+         * Reveal of the line in `[0, 1]`: 0 hides it, 1 traces it fully from its left
+         * end to its right. Defaults to 1, so the paused editor canvas paints the line;
+         * `enter` drives it from 0 regardless of where it rests.
+         */
+        progress: 1,
+        /** Whether this line is drawn at all: the switch the chart flips alongside its legend's per-series toggle. */
+        enabled: true,
+        /** A slice of the plot to spotlight, in this node's own pixel space: outside it the line drops to `dimOpacity`. */
+        spotlight: fresh(() => EMPTY_REGION_BOX),
+        /** Opacity the out-of-region stretches fade to. */
+        dimOpacity: SPOTLIGHT_DIM,
+    },
+    load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),
+    commands: {
+        /**
+         * Trace the line from `from` to `to` over the command — by default in from
+         * its left end to its right. `showSeries` and `hideSeries` are the same
+         * motion in opposite directions, so both are this with their ends stated.
+         *
+         * `enabled` rides along in the same value rather than being set before or
+         * after the command: a line is drawable for every `t` the trace covers and
+         * undrawn outside it, which is what makes arriving at a time backwards show
+         * what arriving forwards does.
+         */
+        enter: {
+            args: { from: Types.number(0, { min: 0, max: 1 }), to: Types.number(1, { min: 0, max: 1 }) },
+            run: (timeline) => {
+                const { from, to } = timeline.args;
+                const ease = frameEase(timeline);
+                return timeline.animate((t) => {
+                    const progress = from + (to - from) * ease(t);
+                    // Hidden only once it has fully retraced, so the last frame of a hide is
+                    // the empty plot rather than a line that vanished a frame early.
+                    return { progress, enabled: progress > 0 };
+                });
+            },
+        },
+    },
+    render: (ctx, state) => {
+        if (!state.enabled)
             return;
-        const pts = this.points;
+        const pts = state.points;
         if (pts.length < 2)
             return;
-        const p = Math.max(0, Math.min(1, this.progress));
+        const p = Math.max(0, Math.min(1, state.progress));
         if (p <= 0)
             return;
-        const drawn = this.tracePoints(pts, p);
+        const drawn = tracePoints(pts, p);
         if (drawn.length < 2)
             return;
-        const stroke = this.stroke;
+        const stroke = state.stroke;
         const radius = (stroke[0]?.weight ?? 0) * 2; // round the joins
-        const box = this.spotlight;
+        const box = state.spotlight;
         if (!hasRegion(box)) {
             ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke));
             return;
@@ -52,105 +123,13 @@ export class ChartLine extends Node2D {
         ctx.draw(new Graphics2D()
             .line({ points: drawn, radius })
             .stroke(stroke)
-            .opacity(Math.max(0, Math.min(1, this.dimOpacity))));
+            .opacity(Math.max(0, Math.min(1, state.dimOpacity))));
         // One `draw` per run: shapes chained before a `stroke()` are combined into a
         // single surface, and stroking a union of disjoint open paths doesn't paint
         // — so a line that leaves the region and comes back would lose both halves.
         for (const run of clipPolylineToBox(drawn, box)) {
             ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke));
         }
-    }
-    /**
-     * The prefix of `pts` revealed at fraction `p ∈ [0, 1]`, measuring the reveal
-     * by *cumulative arc length* so the line traces at a steady pace regardless of
-     * uneven point spacing. Returns the whole-point prefix plus one interpolated
-     * point partway along the active segment.
-     */
-    tracePoints(pts, p) {
-        if (p >= 1 || pts.length < 2)
-            return pts;
-        if (p <= 0)
-            return [];
-        const segLen = [];
-        let total = 0;
-        for (let i = 1; i < pts.length; i++) {
-            const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y);
-            segLen.push(d);
-            total += d;
-        }
-        if (total === 0)
-            return pts;
-        let target = total * p;
-        const out = [pts[0]];
-        for (let i = 0; i < segLen.length; i++) {
-            if (target >= segLen[i]) {
-                out.push(pts[i + 1]);
-                target -= segLen[i];
-            }
-            else {
-                const t = segLen[i] === 0 ? 0 : target / segLen[i];
-                out.push({
-                    x: pts[i].x + (pts[i + 1].x - pts[i].x) * t,
-                    y: pts[i].y + (pts[i + 1].y - pts[i].y) * t,
-                });
-                break;
-            }
-        }
-        return out;
-    }
-    /**
-     * Trace the line in from its left end to its right over `duration` seconds.
-     * Drives `progress` `0 → 1`.
-     *
-     * A `Command` rather than a generator, so the trace can be *evaluated* at a
-     * time instead of run to one — which is what lets a scene containing this
-     * chart be scrubbed in constant time. It no longer needs to prime `progress`
-     * to 0 first: the value at `t` is a function of `t`, so a repeat call re-traces
-     * by definition rather than by having reset something.
-     */
-    enter(args) {
-        return this.enterFrom(0, args.duration, args.easing ?? easeOut());
-    }
-    /**
-     * The trace, with both ends stated: `progress` runs `from` → `to`.
-     *
-     * What {@link LineChart.showSeries} and `hideSeries` are both made of — they
-     * are the same motion in opposite directions, and expressing them as one thing
-     * with endpoints is what stops the pair drifting apart.
-     *
-     * `enabled` rides along in the same value rather than being set before or after
-     * the command. A line is drawable for every `t` the trace covers and undrawn
-     * outside it, which is what makes arriving at a time backwards show what
-     * arriving forwards does — a flag flipped by a side effect would not.
-     */
-    enterFrom(from, duration, easing = easeOut(), to = 1) {
-        return this.command((t) => {
-            const progress = from + (to - from) * t;
-            // Hidden only once it has fully retraced, so the last frame of a hide is
-            // the empty plot rather than a line that vanished a frame early.
-            return { progress, enabled: progress > 0 };
-        }, duration, easing);
-    }
-}
-__decorate([
-    property({ default: () => [] })
-], ChartLine.prototype, "points", void 0);
-__decorate([
-    property({ default: [], mapper: strokeOps.resolve, tween: strokeOps.lerp })
-], ChartLine.prototype, "stroke", void 0);
-__decorate([
-    property({ default: 1 })
-], ChartLine.prototype, "progress", void 0);
-__decorate([
-    property({ default: true })
-], ChartLine.prototype, "enabled", void 0);
-__decorate([
-    property({ default: () => EMPTY_REGION_BOX })
-], ChartLine.prototype, "spotlight", void 0);
-__decorate([
-    property({ default: SPOTLIGHT_DIM })
-], ChartLine.prototype, "dimOpacity", void 0);
-__decorate([
-    command()
-], ChartLine.prototype, "enter", null);
+    },
+});
 //# sourceMappingURL=chart-line.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-line.js","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  type AssetScope,\r\n  Graphics2D,\r\n  Node2D,\r\n  command,\r\n  easeOut,\r\n  strokeOps,\r\n  property,\r\n  type Command,\r\n  type CommandArgs,\r\n  type EasingFunction,\r\n  type Node2DProps,\r\n  type RenderContext2D,\r\n  type Stroke,\r\n  type StrokeResolved,\r\n  type Vector2,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport { SPOTLIGHT_DIM } from \"../kit/shared\"\r\nimport {\r\n  EMPTY_REGION_BOX,\r\n  clipPolylineToBox,\r\n  hasRegion,\r\n  type RegionBox,\r\n} from \"./shared\"\r\nimport { declarePaints } from \"@motionscript/sdk/component\"\r\n\r\nexport interface ChartLineProps extends Node2DProps {\r\n  /**\r\n   * The series polyline, already mapped into this node's local pixel space\r\n   * (origin at centre, y-up) by the parent {@link LineChart}. Ordered along x.\r\n   */\r\n  points: Vector2[]\r\n  /** Line colour + weight (+ optional dash/cap/join) — the per-series stroke. */\r\n  stroke: Stroke\r\n  /**\r\n   * Reveal of the line in `[0, 1]`: 0 hides it, 1 traces it fully from its left\r\n   * end to its right.\r\n   *\r\n   * Defaults to **1**, unlike the standalone chart this was ported from: in an\r\n   * editor a node's resting state is what the paused editor canvas paints, so a\r\n   * chart that only appeared once a command had run would edit blind. {@link\r\n   * enter} drives it from 0 regardless of where it rests, so the animation is\r\n   * unchanged.\r\n   */\r\n  progress: number\r\n  /**\r\n   * Whether this line is drawn at all. `false` hides it outright — the switch\r\n   * the chart flips alongside its legend's per-series toggle.\r\n   */\r\n  enabled: boolean\r\n  /**\r\n   * A slice of the plot to spotlight, in this node's own pixel space. When set\r\n   * to a real box, the stretches of the line *outside* it drop to\r\n   * {@link ChartLineProps.dimOpacity} while the stretches inside stay full.\r\n   */\r\n  spotlight: RegionBox\r\n  /** Opacity the out-of-region stretches fade to. */\r\n  dimOpacity: number\r\n}\r\n\r\n/**\r\n * A single series line of a {@link LineChart}: one rounded polyline traced\r\n * through pre-mapped pixel `points`, drawn as one {@link Graphics2D} command list.\r\n * Sized and positioned by the parent, which shares the plot's coordinate frame.\r\n *\r\n * Two signals drive it: {@link ChartLineProps.progress} traces the line in\r\n * (animated by {@link enter}) and `enabled` shows or hides it wholesale.\r\n */\r\nexport class ChartLine extends Node2D<ChartLineProps> {\r\n  @property({ default: () => [] as Vector2[] }) declare points: Vector2[]\r\n  @property({ default: [], mapper: strokeOps.resolve, tween: strokeOps.lerp })\r\n  declare stroke: Stroke\r\n  @property({ default: 1 }) declare progress: number\r\n  @property({ default: true }) declare enabled: boolean\r\n  @property({ default: () => EMPTY_REGION_BOX }) declare spotlight: RegionBox\r\n  @property({ default: SPOTLIGHT_DIM }) declare dimOpacity: number\r\n\r\n  /**\r\n   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the\r\n   * paint props it carries — see {@link declarePaints}.\r\n   */\r\n  override declareAssets(assets: AssetScope): void {\r\n    super.declareAssets(assets)\r\n    declarePaints(this, assets)\r\n  }\r\n\r\n  protected renderSelf(ctx: RenderContext2D): void {\r\n    if (!this.enabled) return\r\n    const pts = this.points\r\n    if (pts.length < 2) return\r\n\r\n    const p = Math.max(0, Math.min(1, this.progress))\r\n    if (p <= 0) return\r\n\r\n    const drawn = this.tracePoints(pts, p)\r\n    if (drawn.length < 2) return\r\n    const stroke = this.stroke as StrokeResolved[]\r\n    const radius = (stroke[0]?.weight ?? 0) * 2 // round the joins\r\n\r\n    const box = this.spotlight\r\n    if (!hasRegion(box)) {\r\n      ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke))\r\n      return\r\n    }\r\n\r\n    // Spotlit: the whole line goes down to `dimOpacity`, then the stretches\r\n    // inside the region are re-drawn over it at full strength. Two passes rather\r\n    // than one dim + one bright *complementary* pair, so the bright run has\r\n    // continuous geometry through the region and its joins round the way an\r\n    // unspotlit line's do — and so the boundary lands exactly on the region edge.\r\n    ctx.draw(\r\n      new Graphics2D()\r\n        .line({ points: drawn, radius })\r\n        .stroke(stroke)\r\n        .opacity(Math.max(0, Math.min(1, this.dimOpacity)))\r\n    )\r\n\r\n    // One `draw` per run: shapes chained before a `stroke()` are combined into a\r\n    // single surface, and stroking a union of disjoint open paths doesn't paint\r\n    // — so a line that leaves the region and comes back would lose both halves.\r\n    for (const run of clipPolylineToBox(drawn, box)) {\r\n      ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke))\r\n    }\r\n  }\r\n\r\n  /**\r\n   * The prefix of `pts` revealed at fraction `p ∈ [0, 1]`, measuring the reveal\r\n   * by *cumulative arc length* so the line traces at a steady pace regardless of\r\n   * uneven point spacing. Returns the whole-point prefix plus one interpolated\r\n   * point partway along the active segment.\r\n   */\r\n  private tracePoints(pts: Vector2[], p: number): Vector2[] {\r\n    if (p >= 1 || pts.length < 2) return pts\r\n    if (p <= 0) return []\r\n\r\n    const segLen: number[] = []\r\n    let total = 0\r\n    for (let i = 1; i < pts.length; i++) {\r\n      const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y)\r\n      segLen.push(d)\r\n      total += d\r\n    }\r\n    if (total === 0) return pts\r\n\r\n    let target = total * p\r\n    const out: Vector2[] = [pts[0]]\r\n    for (let i = 0; i < segLen.length; i++) {\r\n      if (target >= segLen[i]) {\r\n        out.push(pts[i + 1])\r\n        target -= segLen[i]\r\n      } else {\r\n        const t = segLen[i] === 0 ? 0 : target / segLen[i]\r\n        out.push({\r\n          x: pts[i].x + (pts[i + 1].x - pts[i].x) * t,\r\n          y: pts[i].y + (pts[i + 1].y - pts[i].y) * t,\r\n        })\r\n        break\r\n      }\r\n    }\r\n    return out\r\n  }\r\n\r\n  /**\r\n   * Trace the line in from its left end to its right over `duration` seconds.\r\n   * Drives `progress` `0 → 1`.\r\n   *\r\n   * A `Command` rather than a generator, so the trace can be *evaluated* at a\r\n   * time instead of run to one — which is what lets a scene containing this\r\n   * chart be scrubbed in constant time. It no longer needs to prime `progress`\r\n   * to 0 first: the value at `t` is a function of `t`, so a repeat call re-traces\r\n   * by definition rather than by having reset something.\r\n   */\r\n  @command()\r\n  enter(args: CommandArgs<Record<string, never>> & { duration: number }): Command<ChartLineProps> {\r\n    return this.enterFrom(0, args.duration, args.easing ?? easeOut())\r\n  }\r\n\r\n  /**\r\n   * The trace, with both ends stated: `progress` runs `from` → `to`.\r\n   *\r\n   * What {@link LineChart.showSeries} and `hideSeries` are both made of — they\r\n   * are the same motion in opposite directions, and expressing them as one thing\r\n   * with endpoints is what stops the pair drifting apart.\r\n   *\r\n   * `enabled` rides along in the same value rather than being set before or after\r\n   * the command. A line is drawable for every `t` the trace covers and undrawn\r\n   * outside it, which is what makes arriving at a time backwards show what\r\n   * arriving forwards does — a flag flipped by a side effect would not.\r\n   */\r\n  enterFrom(\r\n    from: number,\r\n    duration: number,\r\n    easing: EasingFunction = easeOut(),\r\n    to = 1\r\n  ): Command<ChartLineProps> {\r\n    return this.command<ChartLineProps>(\r\n      (t) => {\r\n        const progress = from + (to - from) * t\r\n        // Hidden only once it has fully retraced, so the last frame of a hide is\r\n        // the empty plot rather than a line that vanished a frame early.\r\n        return { progress, enabled: progress > 0 }\r\n      },\r\n      duration,\r\n      easing\r\n    )\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"chart-line.js","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,GAOV,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,GAEV,MAAM,UAAU,CAAA;AAEjB;;;;;GAKG;AACH,SAAS,WAAW,CAAC,GAAc,EAAE,CAAS;IAC5C,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,GAAG,CAAA;IACxC,IAAI,CAAC,IAAI,CAAC;QAAE,OAAO,EAAE,CAAA;IAErB,MAAM,MAAM,GAAa,EAAE,CAAA;IAC3B,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACtE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACd,KAAK,IAAI,CAAC,CAAA;IACZ,CAAC;IACD,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,GAAG,CAAA;IAE3B,IAAI,MAAM,GAAG,KAAK,GAAG,CAAC,CAAA;IACtB,MAAM,GAAG,GAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,IAAI,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACxB,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;YACpB,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAAA;QACrB,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YAClD,GAAG,CAAC,IAAI,CAAC;gBACP,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC3C,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;aAC5C,CAAC,CAAA;YACF,MAAK;QACP,CAAC;IACH,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC;IACnC,GAAG,EAAE,WAAW;IAChB,KAAK,EAAE;QACL,wJAAwJ;QACxJ,MAAM,EAAE,KAAK,CAAY,GAAG,EAAE,CAAC,EAAE,CAAC;QAClC,+EAA+E;QAC/E,MAAM,EAAE,KAAK,CAAC,MAAM,CAA2B,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;QACxG;;;;WAIG;QACH,QAAQ,EAAE,CAAC;QACX,8GAA8G;QAC9G,OAAO,EAAE,IAAI;QACb,mHAAmH;QACnH,SAAS,EAAE,KAAK,CAAY,GAAG,EAAE,CAAC,gBAAgB,CAAC;QACnD,mDAAmD;QACnD,UAAU,EAAE,aAAa;KAC1B;IACD,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IACxE,QAAQ,EAAE;QACR;;;;;;;;;WASG;QACH,KAAK,EAAE;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;YAC5F,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE;gBAChB,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAA;gBAClC,MAAM,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAA;gBAChC,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC5B,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;oBAC7C,yEAAyE;oBACzE,iEAAiE;oBACjE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,CAAC,EAAE,CAAA;gBAC5C,CAAC,CAAC,CAAA;YACJ,CAAC;SACF;KACF;IACD,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACrB,IAAI,CAAC,KAAK,CAAC,OAAO;YAAE,OAAM;QAC1B,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAA;QACxB,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC;YAAE,OAAM;QAE1B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;QAClD,IAAI,CAAC,IAAI,CAAC;YAAE,OAAM;QAElB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QACjC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE,OAAM;QAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;QAC3B,MAAM,MAAM,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA,CAAC,kBAAkB;QAE9D,MAAM,GAAG,GAAG,KAAK,CAAC,SAAS,CAAA;QAC3B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;YACpB,GAAG,CAAC,IAAI,CAAC,IAAI,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;YACzE,OAAM;QACR,CAAC;QAED,wEAAwE;QACxE,6EAA6E;QAC7E,wEAAwE;QACxE,wEAAwE;QACxE,8EAA8E;QAC9E,GAAG,CAAC,IAAI,CACN,IAAI,UAAU,EAAE;aACb,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;aAC/B,MAAM,CAAC,MAAM,CAAC;aACd,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CACvD,CAAA;QAED,6EAA6E;QAC7E,4EAA4E;QAC5E,4EAA4E;QAC5E,KAAK,MAAM,GAAG,IAAI,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC;YAChD,GAAG,CAAC,IAAI,CAAC,IAAI,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;QACzE,CAAC;IACH,CAAC;CACF,CAAC,CAAA","sourcesContent":["import {\r\n  Graphics2D,\r\n  Types,\r\n  component2d,\r\n  strokeOps,\r\n  type NodeOf,\r\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\r\n  type Node2D as _Node2D,\r\n  type Stroke,\r\n  type StrokeResolved,\r\n  type Vector2,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport { fresh } from \"../kit/entries\"\r\nimport { frameEase } from \"../kit/motion\"\r\nimport { loadPaints } from \"../kit/paints\"\r\nimport { SPOTLIGHT_DIM } from \"../kit/shared\"\r\nimport {\r\n  EMPTY_REGION_BOX,\r\n  clipPolylineToBox,\r\n  hasRegion,\r\n  type RegionBox,\r\n} from \"./shared\"\r\n\r\n/**\r\n * The prefix of `pts` revealed at fraction `p ∈ [0, 1]`, measuring the reveal\r\n * by *cumulative arc length* so the line traces at a steady pace regardless of\r\n * uneven point spacing. Returns the whole-point prefix plus one interpolated\r\n * point partway along the active segment.\r\n */\r\nfunction tracePoints(pts: Vector2[], p: number): Vector2[] {\r\n  if (p >= 1 || pts.length < 2) return pts\r\n  if (p <= 0) return []\r\n\r\n  const segLen: number[] = []\r\n  let total = 0\r\n  for (let i = 1; i < pts.length; i++) {\r\n    const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y)\r\n    segLen.push(d)\r\n    total += d\r\n  }\r\n  if (total === 0) return pts\r\n\r\n  let target = total * p\r\n  const out: Vector2[] = [pts[0]]\r\n  for (let i = 0; i < segLen.length; i++) {\r\n    if (target >= segLen[i]) {\r\n      out.push(pts[i + 1])\r\n      target -= segLen[i]\r\n    } else {\r\n      const t = segLen[i] === 0 ? 0 : target / segLen[i]\r\n      out.push({\r\n        x: pts[i].x + (pts[i + 1].x - pts[i].x) * t,\r\n        y: pts[i].y + (pts[i + 1].y - pts[i].y) * t,\r\n      })\r\n      break\r\n    }\r\n  }\r\n  return out\r\n}\r\n\r\n/**\r\n * A single series line of a {@link LineChart}: one rounded polyline traced\r\n * through pre-mapped pixel `points`, drawn as one {@link Graphics2D} command list.\r\n * Sized and positioned by the parent, which shares the plot's coordinate frame.\r\n *\r\n * Two signals drive it: `progress` traces the line in\r\n * (animated by `enter`) and `enabled` shows or hides it wholesale.\r\n */\r\nexport const ChartLine = component2d({\r\n  key: \"chartLine\",\r\n  state: {\r\n    /** The series polyline, already mapped into this node's local pixel space (origin at centre, y-up) by the parent {@link LineChart}. Ordered along x. */\r\n    points: fresh<Vector2[]>(() => []),\r\n    /** Line colour + weight (+ optional dash/cap/join) — the per-series stroke. */\r\n    stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\r\n    /**\r\n     * Reveal of the line in `[0, 1]`: 0 hides it, 1 traces it fully from its left\r\n     * end to its right. Defaults to 1, so the paused editor canvas paints the line;\r\n     * `enter` drives it from 0 regardless of where it rests.\r\n     */\r\n    progress: 1,\r\n    /** Whether this line is drawn at all: the switch the chart flips alongside its legend's per-series toggle. */\r\n    enabled: true,\r\n    /** A slice of the plot to spotlight, in this node's own pixel space: outside it the line drops to `dimOpacity`. */\r\n    spotlight: fresh<RegionBox>(() => EMPTY_REGION_BOX),\r\n    /** Opacity the out-of-region stretches fade to. */\r\n    dimOpacity: SPOTLIGHT_DIM,\r\n  },\r\n  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),\r\n  commands: {\r\n    /**\r\n     * Trace the line from `from` to `to` over the command — by default in from\r\n     * its left end to its right. `showSeries` and `hideSeries` are the same\r\n     * motion in opposite directions, so both are this with their ends stated.\r\n     *\r\n     * `enabled` rides along in the same value rather than being set before or\r\n     * after the command: a line is drawable for every `t` the trace covers and\r\n     * undrawn outside it, which is what makes arriving at a time backwards show\r\n     * what arriving forwards does.\r\n     */\r\n    enter: {\r\n      args: { from: Types.number(0, { min: 0, max: 1 }), to: Types.number(1, { min: 0, max: 1 }) },\r\n      run: (timeline) => {\r\n        const { from, to } = timeline.args\r\n        const ease = frameEase(timeline)\r\n        return timeline.animate((t) => {\r\n          const progress = from + (to - from) * ease(t)\r\n          // Hidden only once it has fully retraced, so the last frame of a hide is\r\n          // the empty plot rather than a line that vanished a frame early.\r\n          return { progress, enabled: progress > 0 }\r\n        })\r\n      },\r\n    },\r\n  },\r\n  render: (ctx, state) => {\r\n    if (!state.enabled) return\r\n    const pts = state.points\r\n    if (pts.length < 2) return\r\n\r\n    const p = Math.max(0, Math.min(1, state.progress))\r\n    if (p <= 0) return\r\n\r\n    const drawn = tracePoints(pts, p)\r\n    if (drawn.length < 2) return\r\n    const stroke = state.stroke\r\n    const radius = (stroke[0]?.weight ?? 0) * 2 // round the joins\r\n\r\n    const box = state.spotlight\r\n    if (!hasRegion(box)) {\r\n      ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke))\r\n      return\r\n    }\r\n\r\n    // Spotlit: the whole line goes down to `dimOpacity`, then the stretches\r\n    // inside the region are re-drawn over it at full strength. Two passes rather\r\n    // than one dim + one bright *complementary* pair, so the bright run has\r\n    // continuous geometry through the region and its joins round the way an\r\n    // unspotlit line's do — and so the boundary lands exactly on the region edge.\r\n    ctx.draw(\r\n      new Graphics2D()\r\n        .line({ points: drawn, radius })\r\n        .stroke(stroke)\r\n        .opacity(Math.max(0, Math.min(1, state.dimOpacity)))\r\n    )\r\n\r\n    // One `draw` per run: shapes chained before a `stroke()` are combined into a\r\n    // single surface, and stroking a union of disjoint open paths doesn't paint\r\n    // — so a line that leaves the region and comes back would lose both halves.\r\n    for (const run of clipPolylineToBox(drawn, box)) {\r\n      ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke))\r\n    }\r\n  },\r\n})\r\n\r\nexport type ChartLine = NodeOf<typeof ChartLine>\r\n"]}

package/dist/line-chart/chart-region.d.ts

@@ -1,28 +1,10 @@
-import { type AssetScope, Node2D, type Fill, type Node2DProps, type RenderContext2D, type Stroke } from "@motionscript/sdk";
+import { type Fill, type FillResolved, type NodeOf, type Node2D as _Node2D, type Stroke, type StrokeResolved } from "@motionscript/sdk";
 import { type RegionBox } from "./shared.js";
-export interface ChartRegionProps extends Node2DProps {
-    /**
-     * 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: RegionBox;
-    /** Dashed rule marking each *bounded* edge of the box. */
-    stroke: Stroke;
-    /** Wash filling the box, under the series lines. */
-    fill: Fill;
-    /**
-     * Reveal of the annotation in `[0, 1]`: 0 hides it, 1 draws it fully. Driven
-     * by the chart's own `regionReveal`, so the rules and the series' dimming move
-     * as one.
-     */
-    reveal: number;
-}
 /**
  * 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
@@ -32,16 +14,33 @@ export interface ChartRegionProps extends Node2DProps {
  * 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 declare class ChartRegion extends Node2D<ChartRegionProps> {
-    box: RegionBox;
-    stroke: Stroke;
-    fill: Fill;
-    reveal: number;
-    /**
-     * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-     * paint props it carries — see {@link declarePaints}.
-     */
-    declareAssets(assets: AssetScope): void;
-    protected renderSelf(ctx: RenderContext2D): void;
-}
+export declare const ChartRegion: import("@motionscript/sdk").Component<"chartRegion", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** 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. */
+    readonly box: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
+    /** Dashed rule marking each *bounded* edge of the box. */
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** Wash filling the box, under the series lines. */
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    /** Reveal of the annotation in `[0, 1]`, driven by the chart's own `regionReveal` so the rules and the series' dimming move as one. */
+    readonly reveal: 0;
+}>, {}, null, _Node2D<import("@motionscript/core").Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** 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. */
+    readonly box: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
+    /** Dashed rule marking each *bounded* edge of the box. */
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** Wash filling the box, under the series lines. */
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    /** Reveal of the annotation in `[0, 1]`, driven by the chart's own `regionReveal` so the rules and the series' dimming move as one. */
+    readonly reveal: 0;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** 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. */
+    readonly box: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
+    /** Dashed rule marking each *bounded* edge of the box. */
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** Wash filling the box, under the series lines. */
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    /** Reveal of the annotation in `[0, 1]`, driven by the chart's own `regionReveal` so the rules and the series' dimming move as one. */
+    readonly reveal: 0;
+}>, {}, _Node2D<import("@motionscript/core").Node2DProps>>>>;
+export type ChartRegion = NodeOf<typeof ChartRegion>;
 //# sourceMappingURL=chart-region.d.ts.map

package/dist/line-chart/chart-region.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-region.d.ts","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EAEf,MAAM,EAIN,KAAK,IAAI,EAET,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,MAAM,EAEZ,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAGjB,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;OAIG;IACH,GAAG,EAAE,SAAS,CAAA;IACd,0DAA0D;IAC1D,MAAM,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,IAAI,EAAE,IAAI,CAAA;IACV;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,MAAM,CAAC,gBAAgB,CAAC;IACA,GAAG,EAAE,SAAS,CAAA;IAM7D,MAAM,EAAE,MAAM,CAAA;IAMd,IAAI,EAAE,IAAI,CAAA;IACgB,MAAM,EAAE,MAAM,CAAA;IAEhD;;;OAGG;IACM,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAKhD,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,eAAe,GAAG,IAAI;CAqDjD"}
+{"version":3,"file":"chart-region.d.ts","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,IAAI,EACT,KAAK,YAAY,EACjB,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,MAAM,EACX,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAEjB;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW;IAGpB,2KAA2K;;IAE3K,0DAA0D;;IAE1D,oDAAoD;;IAEpD,uIAAuI;;;IANvI,2KAA2K;;IAE3K,0DAA0D;;IAE1D,oDAAoD;;IAEpD,uIAAuI;;;IANvI,2KAA2K;;IAE3K,0DAA0D;;IAE1D,oDAAoD;;IAEpD,uIAAuI;;4DAwCzI,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

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/sdk";
+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/sdk/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/sdk/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":"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","sourcesContent":["import {\r\n  type AssetScope,\r\n  Graphics2D,\r\n  Node2D,\r\n  fillOps,\r\n  strokeOps,\r\n  property,\r\n  type Fill,\r\n  type FillResolved,\r\n  type Node2DProps,\r\n  type RenderContext2D,\r\n  type Stroke,\r\n  type StrokeResolved,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport {\r\n  DEFAULT_CHART_THEME,\r\n  EMPTY_REGION_BOX,\r\n  hasRegion,\r\n  type RegionBox,\r\n} from \"./shared\"\r\nimport { declarePaints } from \"@motionscript/sdk/component\"\r\n\r\nexport interface ChartRegionProps extends Node2DProps {\r\n  /**\r\n   * The highlighted slice, already resolved into this node's local pixel space\r\n   * (origin at centre, y-up) by the parent {@link LineChart}. A degenerate box\r\n   * draws nothing.\r\n   */\r\n  box: RegionBox\r\n  /** Dashed rule marking each *bounded* edge of the box. */\r\n  stroke: Stroke\r\n  /** Wash filling the box, under the series lines. */\r\n  fill: Fill\r\n  /**\r\n   * Reveal of the annotation in `[0, 1]`: 0 hides it, 1 draws it fully. Driven\r\n   * by the chart's own `regionReveal`, so the rules and the series' dimming move\r\n   * as one.\r\n   */\r\n  reveal: number\r\n}\r\n\r\n/**\r\n * The **region call-out** of a {@link LineChart}: a washed rectangle over the\r\n * plot with a dashed rule down each edge the author actually bounded. Sized and\r\n * positioned entirely from the pre-mapped {@link ChartRegionProps.box} rather\r\n * than its own `layoutBounds` — the box already carries the plot geometry.\r\n *\r\n * It draws only the *marking*; fading the series outside the region is\r\n * {@link ChartLine}'s job (it clips its own polyline against the same box), so\r\n * the two can't disagree about where the boundary is.\r\n *\r\n * Only bounded edges get a rule: a region given just an `x` range spans the full\r\n * plot height, so its top and bottom edges are the plot's own border, not a data\r\n * bound — drawing dashes there would assert a limit the author didn't set.\r\n */\r\nexport class ChartRegion extends Node2D<ChartRegionProps> {\r\n  @property({ default: () => EMPTY_REGION_BOX }) declare box: RegionBox\r\n  @property({\r\n    default: DEFAULT_CHART_THEME.region.stroke,\r\n    mapper: strokeOps.resolve,\r\n    tween: strokeOps.lerp,\r\n  })\r\n  declare stroke: Stroke\r\n  @property({\r\n    default: DEFAULT_CHART_THEME.region.fill,\r\n    mapper: fillOps.resolve,\r\n    tween: fillOps.lerp,\r\n  })\r\n  declare fill: Fill\r\n  @property({ default: 0 }) declare reveal: number\r\n\r\n  /**\r\n   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the\r\n   * paint props it carries — see {@link declarePaints}.\r\n   */\r\n  override declareAssets(assets: AssetScope): void {\r\n    super.declareAssets(assets)\r\n    declarePaints(this, assets)\r\n  }\r\n\r\n  protected renderSelf(ctx: RenderContext2D): void {\r\n    const box = this.box\r\n    if (!hasRegion(box)) return\r\n\r\n    const r = Math.max(0, Math.min(1, this.reveal))\r\n    if (r <= 0) return\r\n\r\n    const width = box.right - box.left\r\n    const height = box.top - box.bottom\r\n    const cx = (box.left + box.right) / 2\r\n    const cy = (box.bottom + box.top) / 2\r\n\r\n    // Wash first, so the rules sit over their own tint.\r\n    const layers = this.fill as FillResolved[]\r\n    if (layers.length > 0) {\r\n      ctx.draw(\r\n        new Graphics2D()\r\n          .rect({ x: cx, y: cy, width, height })\r\n          .fill(this.fill)\r\n          .opacity(r)\r\n      )\r\n    }\r\n\r\n    // One rule per bounded edge, growing from the region's centre outward as\r\n    // `reveal` climbs — the same \"trace it in\" beat as the series lines.\r\n    const stroke = this.stroke as StrokeResolved[]\r\n    if (stroke.length === 0) return\r\n\r\n    // One `draw` per rule rather than four line ops under a single paint:\r\n    // shapes chained before a `stroke()` are combined into one surface, and\r\n    // stroking a union of disjoint open paths doesn't paint.\r\n    const rule = (points: { x: number; y: number }[]) =>\r\n      ctx.draw(new Graphics2D().line({ points }).stroke(this.stroke).opacity(r))\r\n\r\n    if (box.xBounded) {\r\n      const half = (height / 2) * r\r\n      for (const x of [box.left, box.right]) {\r\n        rule([\r\n          { x, y: cy - half },\r\n          { x, y: cy + half },\r\n        ])\r\n      }\r\n    }\r\n    if (box.yBounded) {\r\n      const half = (width / 2) * r\r\n      for (const y of [box.bottom, box.top]) {\r\n        rule([\r\n          { x: cx - half, y },\r\n          { x: cx + half, y },\r\n        ])\r\n      }\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"chart-region.js","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GAQV,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,GAEV,MAAM,UAAU,CAAA;AAEjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,GAAG,EAAE,aAAa;IAClB,KAAK,EAAE;QACL,2KAA2K;QAC3K,GAAG,EAAE,KAAK,CAAY,GAAG,EAAE,CAAC,gBAAgB,CAAC;QAC7C,0DAA0D;QAC1D,MAAM,EAAE,KAAK,CAAC,MAAM,CAA2B,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;QACvI,oDAAoD;QACpD,IAAI,EAAE,KAAK,CAAC,MAAM,CAAuB,mBAAmB,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC;QAC3H,uIAAuI;QACvI,MAAM,EAAE,CAAC;KACV;IACD,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7F,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACrB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAA;QACrB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;YAAE,OAAM;QAE3B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;QAChD,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,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,GAAG,CAAC,IAAI,CAAC,IAAI,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAC9F,CAAC;QAED,yEAAyE;QACzE,qEAAqE;QACrE,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAErC,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,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAE7E,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;gBAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,CAAA;QACzF,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;gBAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QACzF,CAAC;IACH,CAAC;CACF,CAAC,CAAA","sourcesContent":["import {\r\n  Graphics2D,\r\n  Types,\r\n  component2d,\r\n  fillOps,\r\n  strokeOps,\r\n  type Fill,\r\n  type FillResolved,\r\n  type NodeOf,\r\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\r\n  type Node2D as _Node2D,\r\n  type Stroke,\r\n  type StrokeResolved,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport { fresh } from \"../kit/entries\"\r\nimport { loadPaints } from \"../kit/paints\"\r\nimport {\r\n  DEFAULT_CHART_THEME,\r\n  EMPTY_REGION_BOX,\r\n  hasRegion,\r\n  type RegionBox,\r\n} from \"./shared\"\r\n\r\n/**\r\n * The **region call-out** of a {@link LineChart}: a washed rectangle over the\r\n * plot with a dashed rule down each edge the author actually bounded. Sized and\r\n * positioned entirely from the pre-mapped `box` rather\r\n * than its own box — the region already carries the plot geometry.\r\n *\r\n * It draws only the *marking*; fading the series outside the region is\r\n * {@link ChartLine}'s job (it clips its own polyline against the same box), so\r\n * the two can't disagree about where the boundary is.\r\n *\r\n * Only bounded edges get a rule: a region given just an `x` range spans the full\r\n * plot height, so its top and bottom edges are the plot's own border, not a data\r\n * bound — drawing dashes there would assert a limit the author didn't set.\r\n */\r\nexport const ChartRegion = component2d({\r\n  key: \"chartRegion\",\r\n  state: {\r\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. */\r\n    box: fresh<RegionBox>(() => EMPTY_REGION_BOX),\r\n    /** Dashed rule marking each *bounded* edge of the box. */\r\n    stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_CHART_THEME.region.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\r\n    /** Wash filling the box, under the series lines. */\r\n    fill: Types.custom<Fill, FillResolved[]>(DEFAULT_CHART_THEME.region.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),\r\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. */\r\n    reveal: 0,\r\n  },\r\n  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),\r\n  render: (ctx, state) => {\r\n    const box = state.box\r\n    if (!hasRegion(box)) return\r\n\r\n    const r = Math.max(0, Math.min(1, state.reveal))\r\n    if (r <= 0) return\r\n\r\n    const width = box.right - box.left\r\n    const height = box.top - box.bottom\r\n    const cx = (box.left + box.right) / 2\r\n    const cy = (box.bottom + box.top) / 2\r\n\r\n    // Wash first, so the rules sit over their own tint.\r\n    if (state.fill.length > 0) {\r\n      ctx.draw(new Graphics2D().rect({ x: cx, y: cy, width, height }).fill(state.fill).opacity(r))\r\n    }\r\n\r\n    // One rule per bounded edge, growing from the region's centre outward as\r\n    // `reveal` climbs — the same \"trace it in\" beat as the series lines.\r\n    if (state.stroke.length === 0) return\r\n\r\n    // One `draw` per rule rather than four line ops under a single paint:\r\n    // shapes chained before a `stroke()` are combined into one surface, and\r\n    // stroking a union of disjoint open paths doesn't paint.\r\n    const rule = (points: { x: number; y: number }[]) =>\r\n      ctx.draw(new Graphics2D().line({ points }).stroke(state.stroke).opacity(r))\r\n\r\n    if (box.xBounded) {\r\n      const half = (height / 2) * r\r\n      for (const x of [box.left, box.right]) rule([{ x, y: cy - half }, { x, y: cy + half }])\r\n    }\r\n    if (box.yBounded) {\r\n      const half = (width / 2) * r\r\n      for (const y of [box.bottom, box.top]) rule([{ x: cx - half, y }, { x: cx + half, y }])\r\n    }\r\n  },\r\n})\r\n\r\nexport type ChartRegion = NodeOf<typeof ChartRegion>\r\n"]}