@motionscript/charts 0.1.0 → 0.1.1-alpha.0

package/dist/kit/vertical-axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-axis.d.ts","sourceRoot":"","sources":["../../src/kit/vertical-axis.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EAA8D,KAAK,OAAO,EAAE,MAAM,UAAU,CAAA;AACnG,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAA;IACZ;;;;OAIG;IACH,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,oFAAoF;IACpF,IAAI,EAAE,UAAU,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AAKD,8EAA8E;AAC9E,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;AAEnD,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,CAAC,EAAE;IAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGrI;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiHvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,YAAY,CAAC,CAAA"}
+{"version":3,"file":"vertical-axis.d.ts","sourceRoot":"","sources":["../../src/kit/vertical-axis.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,MAAM,EAEX,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAA8D,KAAK,OAAO,EAAE,MAAM,UAAU,CAAA;AACnG,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,UAAU,CAAA;AAIjB,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,CAAC,EAAE;IAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGrI;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY;;IAIrB,mHAAmH;;IAEnH,0FAA0F;;;IAG1F,8GAA8G;;;;;;;;;;IAL9G,mHAAmH;;IAEnH,0FAA0F;;;IAG1F,8GAA8G;;;;;IAL9G,mHAAmH;;IAEnH,0FAA0F;;;IAG1F,8GAA8G;;;;;;;;0BA2FhH,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,YAAY,CAAC,CAAA"}

package/dist/kit/vertical-axis.js

@@ -1,8 +1,8 @@
 import { Rect, RotatedBox, Text, Types, component2d, insetsOps, textOps, } from "@motionscript/sdk";
+import { enterBudget } from "@motionscript/sdk/component";
 import { asParts, fresh } from "./entries.js";
 import { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase } from "./motion.js";
-import { DEFAULT_Y_AXIS, enterBudget, formatMarker, } from "./shared.js";
-/** How far a marker starts to the right of its slot when it enters, in px. */
+import { DEFAULT_Y_AXIS, formatMarker, } from "./shared.js";
 const SLIDE = 24;
 /** What a marker's caption reads: the one listed for its value, else its bare reading. */
 export function markerCaption(s, value) {
@@ -10,54 +10,40 @@ export function markerCaption(s, value) {
     return (index >= 0 ? s.captions[index] : undefined) ?? formatMarker(value);
 }
 /**
- * The numeric vertical axis shared by the cartesian charts: a **column of
- * {@link Text} nodes**, one per marker value, running top-to-bottom (highest
- * value at the top). Pure layout — no `Graphics` — so the markers are real text
- * nodes the scene can measure, restyle, or animate individually.
- *
- * Each marker is positioned so its centre lands exactly on its value's fraction
- * across `range` within the axis's filled height, so unevenly-spaced markers
- * land where their values fall. Both the caption and the position are *bound*,
- * not snapshotted: a chart that rescales its axes (see `LineChart.zoomTo`)
- * tweens `range`/`markers` live. Only the marker **count** is fixed at
- * construction.
- *
- * `enter` staggers them in **bottom-to-top**: each marker starts pushed a
- * little to the right and transparent, then fades and slides left into place.
- * The resting state is the landed one, so a chart that is never told to enter
- * still reads as a finished chart.
+ * The numeric vertical axis the cartesian charts share: a column of {@link Text}
+ * markers, highest at the top, each centred on its value's fraction across
+ * `range`. Caption and position are bound, so a rescale tweens live; only the
+ * marker count is fixed at construction. The resting state is landed.
  */
 export const VerticalAxis = component2d({
     key: "verticalAxis",
     state: {
         range: fresh(() => [0, 1]),
+        /** Tick values in data units, each placed by its fraction across `range`; need not be even or include the ends. */
         markers: fresh(() => []),
+        /** One caption per marker in its order; a missing one reads as the bare numeric value. */
         captions: fresh(() => []),
         axis: Types.custom(DEFAULT_Y_AXIS),
+        /** Rotated caption in the gutter left of the markers; empty builds no caption node and reserves no gutter. */
         label: "",
         arrivals: arrivalsEntry(),
     },
-    // A plain node filled its parent; one made of its markers would hug them.
+    // A node made of markers would otherwise hug them.
     defaults: { width: "fill", height: "fill" },
     children: (state) => {
-        // Composed from plain entries (range/markers/label), so it's built once here.
         const tickPad = insetsOps.resolve(state.axis.tickPadding).right;
         const titlePad = insetsOps.resolve(state.axis.titlePadding).right;
         const row = [];
-        // The row's parent is the axis: its box is what the markers are placed in.
+        // The row's parent is the axis, whose box the markers are placed in.
         const box = () => row[0]?.parent?.layoutBounds ?? { width: 0, height: 0 };
-        /** The live tick values, top → bottom (highest first) — re-read every frame. */
         const sorted = () => [...state.markers].sort((a, b) => b - a);
-        /** Tick `i`'s fraction across the live `range`, 0 at the bottom edge. */
         const fracAt = (value) => {
             if (value === undefined)
                 return 0;
             const [min, max] = state.range;
             return max <= min ? 0 : (value - min) / (max - min);
         };
-        // One text node per marker, ordered top → bottom. A slot with no value (the
-        // live list is shorter than the column built for it) renders as empty text
-        // rather than repeating its neighbour.
+        // A slot with no value (the live list is shorter than the column built) renders empty, not its neighbour.
         const markers = state.markers.map((_, i) => {
             const marker = new Text({
                 ...textOps.styleProps(state.axis.labelStyle),
@@ -69,10 +55,7 @@ export const VerticalAxis = component2d({
                     // Node2D space is y-up, so the fraction runs from the bottom.
                     const height = box().height;
                     const centred = (fracAt(sorted()[i]) - 0.5) * height;
-                    // Held inside the axis's top edge — the backstop for a chart whose
-                    // headroom is smaller than its marker text is tall, which a theme with
-                    // much larger markers can arrange. Only the top, because what lies
-                    // below the axis is the chart's own horizontal axis and legend.
+                    // Held inside the top edge for a theme whose markers are taller than the headroom; only the top, since the chart's own axis and legend lie below.
                     const limit = height / 2 - marker.layoutBounds.height / 2;
                     return Math.min(centred, limit);
                 },
@@ -102,16 +85,9 @@ export const VerticalAxis = component2d({
     },
     commands: {
         /**
-         * Stagger the markers in bottom to top, then slide the caption in from the
-         * right after them. Its first frame arms them all: shifted right by `slide`
-         * and transparent.
-         *
-         * The timeline's duration is the **whole** entrance, not one marker's slide:
-         * the stagger and the caption are carved out of it rather than added on top.
-         * See {@link enterBudget} for why that distinction matters here.
-         *
-         * `stagger` is seconds between successive markers (derived when omitted);
-         * `slide` is the starting rightward offset in px.
+         * Stagger markers in bottom to top, then the caption. The duration is the
+         * whole entrance ({@link enterBudget}). `stagger` is seconds between markers
+         * (derived when omitted); `slide` is the starting rightward offset in px.
          */
         enter: {
             args: {
@@ -129,9 +105,8 @@ export const VerticalAxis = component2d({
                     return arm;
                 const { step, per, caption } = enterBudget(timeline.duration, count, captioned, stagger);
                 const ease = frameEase(timeline);
-                // Bottom marker leads: the column is top → bottom, so walk it in reverse.
+                // The bottom marker leads, so walk the top-to-bottom column in reverse.
                 const markers = state.markers.map((_, i) => ({ at: (count - 1 - i) * step, duration: per, piece: arrival(timeline, i, from, ease) }));
-                // Once every marker has landed, the caption slides in from the right.
                 const label = captioned ? [{ at: (count - 1) * step + per, duration: caption, piece: arrival(timeline, "label", from, ease) }] : [];
                 return timeline.together([arm, beats(timeline, [...markers, ...label])]);
             },

package/dist/kit/vertical-axis.js.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-axis.js","sourceRoot":"","sources":["../../src/kit/vertical-axis.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Rect,\n  RotatedBox,\n  Text,\n  Types,\n  component2d,\n  insetsOps,\n  textOps,\n  type NodeOf,\n  type Node2D,\n  type Node2DProps,\n} from \"@motionscript/sdk\"\n\nimport { asParts, fresh } from \"./entries\"\nimport { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase, type Arrival } from \"./motion\"\nimport {\n  DEFAULT_Y_AXIS,\n  enterBudget,\n  formatMarker,\n  type AxisConfig,\n  type Range,\n} from \"./shared\"\n\nexport interface VerticalAxisProps extends Node2DProps {\n  /** `[min, max]` of the vertical scale the markers are positioned within. */\n  range: Range\n  /**\n   * Tick values (in data units) to draw up the axis, each placed by its fraction\n   * across {@link VerticalAxisProps.range}. Need not be evenly spaced or include\n   * the ends.\n   */\n  markers: number[]\n  /**\n   * How each marker is captioned, one per entry of `markers` and in its order.\n   * Empty (the default), or short, captions a marker with its bare numeric\n   * reading; a chart with a number format on this axis writes them through it.\n   */\n  captions: string[]\n  /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */\n  axis: AxisConfig\n  /**\n   * Rotated caption drawn in the gutter to the left of the marker column. Empty\n   * string (the default) hides it — no caption node is built and no label gutter\n   * is reserved.\n   */\n  label: string\n}\n\n/** How far a marker starts to the right of its slot when it enters, in px. */\nconst SLIDE = 24\n\n/** How a tick value is captioned — see {@link VerticalAxisProps.captions}. */\nexport type MarkerLabel = (value: number) => string\n\n/** What a marker's caption reads: the one listed for its value, else its bare reading. */\nexport function markerCaption(s: { readonly markers: readonly number[]; readonly captions: readonly string[] }, value: number): string {\n  const index = s.markers.indexOf(value)\n  return (index >= 0 ? s.captions[index] : undefined) ?? formatMarker(value)\n}\n\n/**\n * The numeric vertical axis shared by the cartesian charts: a **column of\n * {@link Text} nodes**, one per marker value, running top-to-bottom (highest\n * value at the top). Pure layout — no `Graphics` — so the markers are real text\n * nodes the scene can measure, restyle, or animate individually.\n *\n * Each marker is positioned so its centre lands exactly on its value's fraction\n * across `range` within the axis's filled height, so unevenly-spaced markers\n * land where their values fall. Both the caption and the position are *bound*,\n * not snapshotted: a chart that rescales its axes (see `LineChart.zoomTo`)\n * tweens `range`/`markers` live. Only the marker **count** is fixed at\n * construction.\n *\n * `enter` staggers them in **bottom-to-top**: each marker starts pushed a\n * little to the right and transparent, then fades and slides left into place.\n * The resting state is the landed one, so a chart that is never told to enter\n * still reads as a finished chart.\n */\nexport const VerticalAxis = component2d({\n  key: \"verticalAxis\",\n  state: {\n    range: fresh<Range>(() => [0, 1]),\n    markers: fresh<number[]>(() => []),\n    captions: fresh<string[]>(() => []),\n    axis: Types.custom<AxisConfig>(DEFAULT_Y_AXIS),\n    label: \"\",\n    arrivals: arrivalsEntry(),\n  },\n  // A plain node filled its parent; one made of its markers would hug them.\n  defaults: { width: \"fill\", height: \"fill\" },\n  children: (state) => {\n    // Composed from plain entries (range/markers/label), so it's built once here.\n    const tickPad = insetsOps.resolve(state.axis.tickPadding).right\n    const titlePad = insetsOps.resolve(state.axis.titlePadding).right\n\n    const row: Node2D[] = []\n    // The row's parent is the axis: its box is what the markers are placed in.\n    const box = () => (row[0]?.parent as Node2D | null | undefined)?.layoutBounds ?? { width: 0, height: 0 }\n    /** The live tick values, top → bottom (highest first) — re-read every frame. */\n    const sorted = () => [...state.markers].sort((a, b) => b - a)\n    /** Tick `i`'s fraction across the live `range`, 0 at the bottom edge. */\n    const fracAt = (value: number | undefined) => {\n      if (value === undefined) return 0\n      const [min, max] = state.range\n      return max <= min ? 0 : (value - min) / (max - min)\n    }\n\n    // One text node per marker, ordered top → bottom. A slot with no value (the\n    // live list is shorter than the column built for it) renders as empty text\n    // rather than repeating its neighbour.\n    const markers = state.markers.map((_, i) => {\n      const marker: Node2D = new Text({\n        ...textOps.styleProps(state.axis.labelStyle),\n        text: () => {\n          const value = sorted()[i]\n          return value === undefined ? \"\" : markerCaption(state, value)\n        },\n        y: () => {\n          // Node2D space is y-up, so the fraction runs from the bottom.\n          const height = box().height\n          const centred = (fracAt(sorted()[i]) - 0.5) * height\n          // Held inside the axis's top edge — the backstop for a chart whose\n          // headroom is smaller than its marker text is tall, which a theme with\n          // much larger markers can arrange. Only the top, because what lies\n          // below the axis is the chart's own horizontal axis and legend.\n          const limit = height / 2 - marker.layoutBounds.height / 2\n          return Math.min(centred, limit)\n        },\n        opacity: () => arrivalOf(state.arrivals, i).opacity,\n        x: () => arrivalOf(state.arrivals, i).shift,\n      })\n      return marker\n    })\n\n    const children: Node2D[] = []\n    if (state.label !== \"\") {\n      // Node2D space is y-up and rotation is clockwise, so -90° reads bottom-to-top.\n      children.push(\n        new RotatedBox({\n          angle: -90,\n          width: \"hug\",\n          height: \"hug\",\n          children: new Text({\n            ...textOps.styleProps(state.axis.titleStyle),\n            text: state.label,\n            opacity: () => arrivalOf(state.arrivals, \"label\").opacity,\n            x: () => arrivalOf(state.arrivals, \"label\").shift,\n          }),\n        })\n      )\n    }\n    children.push(new Rect({ height: \"fill\", width: \"hug\", padding: { right: tickPad }, children: markers }))\n    row.push(new Rect({ flow: \"horizontal\", gap: titlePad, children }))\n    return asParts(row)\n  },\n  commands: {\n    /**\n     * Stagger the markers in bottom to top, then slide the caption in from the\n     * right after them. Its first frame arms them all: shifted right by `slide`\n     * and transparent.\n     *\n     * The timeline's duration is the **whole** entrance, not one marker's slide:\n     * the stagger and the caption are carved out of it rather than added on top.\n     * See {@link enterBudget} for why that distinction matters here.\n     *\n     * `stagger` is seconds between successive markers (derived when omitted);\n     * `slide` is the starting rightward offset in px.\n     */\n    enter: {\n      args: {\n        stagger: Types.custom<number | undefined>(undefined),\n        slide: Types.number(SLIDE),\n      },\n      run: (timeline, state) => {\n        const { stagger, slide } = timeline.args\n        const count = state.markers.length\n        const captioned = state.label !== \"\"\n        const from: Arrival = { opacity: 0, shift: slide }\n        const keys = [...state.markers.keys(), ...(captioned ? [\"label\"] : [])]\n        const arm = timeline.animate(() => ({ arrivals: armed(keys, from) }))\n        if (count === 0) return arm\n        const { step, per, caption } = enterBudget(timeline.duration, count, captioned, stagger)\n        const ease = frameEase(timeline)\n        // Bottom marker leads: the column is top → bottom, so walk it in reverse.\n        const markers = state.markers.map((_, i) => ({ at: (count - 1 - i) * step, duration: per, piece: arrival(timeline, i, from, ease) }))\n        // Once every marker has landed, the caption slides in from the right.\n        const label = captioned ? [{ at: (count - 1) * step + per, duration: caption, piece: arrival(timeline, \"label\", from, ease) }] : []\n        return timeline.together([arm, beats(timeline, [...markers, ...label])])\n      },\n    },\n  },\n})\n\nexport type VerticalAxis = NodeOf<typeof VerticalAxis>\n"]}
+{"version":3,"file":"vertical-axis.js","sourceRoot":"","sources":["../../src/kit/vertical-axis.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Rect,\n  RotatedBox,\n  Text,\n  Types,\n  component2d,\n  insetsOps,\n  textOps,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D,\n  type Node2DProps as _Node2DProps,\n} from \"@motionscript/sdk\"\nimport { enterBudget } from \"@motionscript/sdk/component\"\n\nimport { asParts, fresh } from \"./entries\"\nimport { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase, type Arrival } from \"./motion\"\nimport {\n  DEFAULT_Y_AXIS,\n  formatMarker,\n  type AxisConfig,\n  type Range,\n} from \"./shared\"\n\nconst SLIDE = 24\n\n/** What a marker's caption reads: the one listed for its value, else its bare reading. */\nexport function markerCaption(s: { readonly markers: readonly number[]; readonly captions: readonly string[] }, value: number): string {\n  const index = s.markers.indexOf(value)\n  return (index >= 0 ? s.captions[index] : undefined) ?? formatMarker(value)\n}\n\n/**\n * The numeric vertical axis the cartesian charts share: a column of {@link Text}\n * markers, highest at the top, each centred on its value's fraction across\n * `range`. Caption and position are bound, so a rescale tweens live; only the\n * marker count is fixed at construction. The resting state is landed.\n */\nexport const VerticalAxis = component2d({\n  key: \"verticalAxis\",\n  state: {\n    range: fresh<Range>(() => [0, 1]),\n    /** Tick values in data units, each placed by its fraction across `range`; need not be even or include the ends. */\n    markers: fresh<number[]>(() => []),\n    /** One caption per marker in its order; a missing one reads as the bare numeric value. */\n    captions: fresh<string[]>(() => []),\n    axis: Types.custom<AxisConfig>(DEFAULT_Y_AXIS),\n    /** Rotated caption in the gutter left of the markers; empty builds no caption node and reserves no gutter. */\n    label: \"\",\n    arrivals: arrivalsEntry(),\n  },\n  // A node made of markers would otherwise hug them.\n  defaults: { width: \"fill\", height: \"fill\" },\n  children: (state) => {\n    const tickPad = insetsOps.resolve(state.axis.tickPadding).right\n    const titlePad = insetsOps.resolve(state.axis.titlePadding).right\n\n    const row: Node2D[] = []\n    // The row's parent is the axis, whose box the markers are placed in.\n    const box = () => (row[0]?.parent as Node2D | null | undefined)?.layoutBounds ?? { width: 0, height: 0 }\n    const sorted = () => [...state.markers].sort((a, b) => b - a)\n    const fracAt = (value: number | undefined) => {\n      if (value === undefined) return 0\n      const [min, max] = state.range\n      return max <= min ? 0 : (value - min) / (max - min)\n    }\n\n    // A slot with no value (the live list is shorter than the column built) renders empty, not its neighbour.\n    const markers = state.markers.map((_, i) => {\n      const marker: Node2D = new Text({\n        ...textOps.styleProps(state.axis.labelStyle),\n        text: () => {\n          const value = sorted()[i]\n          return value === undefined ? \"\" : markerCaption(state, value)\n        },\n        y: () => {\n          // Node2D space is y-up, so the fraction runs from the bottom.\n          const height = box().height\n          const centred = (fracAt(sorted()[i]) - 0.5) * height\n          // Held inside the top edge for a theme whose markers are taller than the headroom; only the top, since the chart's own axis and legend lie below.\n          const limit = height / 2 - marker.layoutBounds.height / 2\n          return Math.min(centred, limit)\n        },\n        opacity: () => arrivalOf(state.arrivals, i).opacity,\n        x: () => arrivalOf(state.arrivals, i).shift,\n      })\n      return marker\n    })\n\n    const children: Node2D[] = []\n    if (state.label !== \"\") {\n      // Node2D space is y-up and rotation is clockwise, so -90° reads bottom-to-top.\n      children.push(\n        new RotatedBox({\n          angle: -90,\n          width: \"hug\",\n          height: \"hug\",\n          children: new Text({\n            ...textOps.styleProps(state.axis.titleStyle),\n            text: state.label,\n            opacity: () => arrivalOf(state.arrivals, \"label\").opacity,\n            x: () => arrivalOf(state.arrivals, \"label\").shift,\n          }),\n        })\n      )\n    }\n    children.push(new Rect({ height: \"fill\", width: \"hug\", padding: { right: tickPad }, children: markers }))\n    row.push(new Rect({ flow: \"horizontal\", gap: titlePad, children }))\n    return asParts(row)\n  },\n  commands: {\n    /**\n     * Stagger markers in bottom to top, then the caption. The duration is the\n     * whole entrance ({@link enterBudget}). `stagger` is seconds between markers\n     * (derived when omitted); `slide` is the starting rightward offset in px.\n     */\n    enter: {\n      args: {\n        stagger: Types.custom<number | undefined>(undefined),\n        slide: Types.number(SLIDE),\n      },\n      run: (timeline, state) => {\n        const { stagger, slide } = timeline.args\n        const count = state.markers.length\n        const captioned = state.label !== \"\"\n        const from: Arrival = { opacity: 0, shift: slide }\n        const keys = [...state.markers.keys(), ...(captioned ? [\"label\"] : [])]\n        const arm = timeline.animate(() => ({ arrivals: armed(keys, from) }))\n        if (count === 0) return arm\n        const { step, per, caption } = enterBudget(timeline.duration, count, captioned, stagger)\n        const ease = frameEase(timeline)\n        // The bottom marker leads, so walk the top-to-bottom column in reverse.\n        const markers = state.markers.map((_, i) => ({ at: (count - 1 - i) * step, duration: per, piece: arrival(timeline, i, from, ease) }))\n        const label = captioned ? [{ at: (count - 1) * step + per, duration: caption, piece: arrival(timeline, \"label\", from, ease) }] : []\n        return timeline.together([arm, beats(timeline, [...markers, ...label])])\n      },\n    },\n  },\n})\n\nexport type VerticalAxis = NodeOf<typeof VerticalAxis>\n"]}

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

@@ -1,74 +1,49 @@
-import { type NodeOf, type Node2D as _Node2D, type Stroke, type StrokeResolved, type Vector2 } from "@motionscript/sdk";
+import { type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type Stroke, type StrokeResolved, type Vector2 } from "@motionscript/sdk";
 import { type RegionBox } from "./shared.js";
-/**
- * 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: `progress` traces the line in
- * (animated by `enter`) and `enabled` shows or hides it wholesale.
- */
+/** One series of a {@link LineChart}: a rounded polyline through pre-mapped pixel `points`, one {@link Graphics2D} command list. `progress` traces it in; `enabled` shows or hides it wholesale. */
 export declare const ChartLine: import("@motionscript/sdk").Component<"chartLine", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
-    /** 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. */
+    /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */
     readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
-    /** Line colour + weight (+ optional dash/cap/join) — the per-series stroke. */
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
-    /**
-     * 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.
-     */
+    /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */
     readonly progress: 1;
-    /** Whether this line is drawn at all: the switch the chart flips alongside its legend's per-series toggle. */
+    /** Whether the line is drawn at all, flipped alongside its legend entry. */
     readonly enabled: true;
-    /** A slice of the plot to spotlight, in this node's own pixel space: outside it the line drops to `dimOpacity`. */
+    /** In this node's pixel space; outside it the line drops to `dimOpacity`. */
     readonly spotlight: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
-    /** Opacity the out-of-region stretches fade to. */
     readonly dimOpacity: 0.2;
 }>, {
     readonly enter: {
         readonly from: import("@motionscript/sdk").Type<number, number, false>;
         readonly to: 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, {
-    /** 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. */
+}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */
     readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
-    /** Line colour + weight (+ optional dash/cap/join) — the per-series stroke. */
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
-    /**
-     * 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.
-     */
+    /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */
     readonly progress: 1;
-    /** Whether this line is drawn at all: the switch the chart flips alongside its legend's per-series toggle. */
+    /** Whether the line is drawn at all, flipped alongside its legend entry. */
     readonly enabled: true;
-    /** A slice of the plot to spotlight, in this node's own pixel space: outside it the line drops to `dimOpacity`. */
+    /** In this node's pixel space; outside it the line drops to `dimOpacity`. */
     readonly spotlight: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
-    /** Opacity the out-of-region stretches fade to. */
     readonly dimOpacity: 0.2;
 }>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
-    /** 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. */
+    /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */
     readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
-    /** Line colour + weight (+ optional dash/cap/join) — the per-series stroke. */
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
-    /**
-     * 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.
-     */
+    /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */
     readonly progress: 1;
-    /** Whether this line is drawn at all: the switch the chart flips alongside its legend's per-series toggle. */
+    /** Whether the line is drawn at all, flipped alongside its legend entry. */
     readonly enabled: true;
-    /** A slice of the plot to spotlight, in this node's own pixel space: outside it the line drops to `dimOpacity`. */
+    /** In this node's pixel space; outside it the line drops to `dimOpacity`. */
     readonly spotlight: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
-    /** Opacity the out-of-region stretches fade to. */
     readonly dimOpacity: 0.2;
 }>, {
     readonly enter: {
         readonly from: import("@motionscript/sdk").Type<number, number, false>;
         readonly to: import("@motionscript/sdk").Type<number, number, false>;
     };
-}, _Node2D<import("@motionscript/core").Node2DProps>>>>;
+}, _Node2D<_Node2DProps>>>>;
 export type ChartLine = NodeOf<typeof ChartLine>;
 //# sourceMappingURL=chart-line.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-line.d.ts","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,mBAAmB,CAAA;AAM1B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAuCjB;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS;IAGlB,wJAAwJ;;IAExJ,+EAA+E;;IAE/E;;;;OAIG;;IAEH,8GAA8G;;IAE9G,mHAAmH;;IAEnH,mDAAmD;;;;;;;;IAdnD,wJAAwJ;;IAExJ,+EAA+E;;IAE/E;;;;OAIG;;IAEH,8GAA8G;;IAE9G,mHAAmH;;IAEnH,mDAAmD;;;IAdnD,wJAAwJ;;IAExJ,+EAA+E;;IAE/E;;;;OAIG;;IAEH,8GAA8G;;IAE9G,mHAAmH;;IAEnH,mDAAmD;;;;;;;uDAmErD,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"chart-line.d.ts","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,mBAAmB,CAAA;AAM1B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAkCjB,oMAAoM;AACpM,eAAO,MAAM,SAAS;IAGlB,qGAAqG;;;IAGrG,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;;;;;;IAP7E,qGAAqG;;;IAGrG,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;IAP7E,qGAAqG;;;IAGrG,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;;;;;2BAyD/E,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}

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

@@ -4,12 +4,7 @@ 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";
-/**
- * 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.
- */
+/** The prefix of `pts` revealed at fraction `p`, measured by cumulative arc length so the trace keeps a steady pace over uneven spacing. */
 function tracePoints(pts, p) {
     if (p >= 1 || pts.length < 2)
         return pts;
@@ -42,45 +37,28 @@ function tracePoints(pts, p) {
     }
     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: `progress` traces the line in
- * (animated by `enter`) and `enabled` shows or hides it wholesale.
- */
+/** One series of a {@link LineChart}: a rounded polyline through pre-mapped pixel `points`, one {@link Graphics2D} command list. `progress` traces it in; `enabled` shows or hides it wholesale. */
 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. */
+        /** In this node's pixel space (origin at centre, y-up), mapped by the parent and 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.
-         */
+        /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */
         progress: 1,
-        /** Whether this line is drawn at all: the switch the chart flips alongside its legend's per-series toggle. */
+        /** Whether the line is drawn at all, flipped alongside its legend entry. */
         enabled: true,
-        /** A slice of the plot to spotlight, in this node's own pixel space: outside it the line drops to `dimOpacity`. */
+        /** In this node's 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.
+         * Trace the line from `from` to `to`; `showSeries`/`hideSeries` are this with
+         * the ends stated. `enabled` rides along in the same value, so the line is
+         * drawable for every `t` the trace covers and arriving backwards matches
+         * arriving forwards.
          */
         enter: {
             args: { from: Types.number(0, { min: 0, max: 1 }), to: Types.number(1, { min: 0, max: 1 }) },
@@ -89,8 +67,7 @@ export const ChartLine = component2d({
                 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.
+                    // Hidden only once fully retraced, so a hide does not vanish a frame early.
                     return { progress, enabled: progress > 0 };
                 });
             },
@@ -109,24 +86,18 @@ export const ChartLine = component2d({
         if (drawn.length < 2)
             return;
         const stroke = state.stroke;
-        const radius = (stroke[0]?.weight ?? 0) * 2; // round the joins
+        const radius = (stroke[0]?.weight ?? 0) * 2;
         const box = state.spotlight;
         if (!hasRegion(box)) {
             ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke));
             return;
         }
-        // Spotlit: the whole line goes down to `dimOpacity`, then the stretches
-        // inside the region are re-drawn over it at full strength. Two passes rather
-        // than one dim + one bright *complementary* pair, so the bright run has
-        // continuous geometry through the region and its joins round the way an
-        // unspotlit line's do — and so the boundary lands exactly on the region edge.
+        // Dim the whole line, then redraw the stretches inside the region at full strength: the bright run keeps continuous geometry and round joins, and the boundary lands on the region edge.
         ctx.draw(new Graphics2D()
             .line({ points: drawn, radius })
             .stroke(stroke)
             .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.
+        // One `draw` per run: shapes chained before `stroke()` combine into one surface, and stroking a union of disjoint open paths paints nothing.
         for (const run of clipPolylineToBox(drawn, box)) {
             ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke));
         }

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 {\n  Graphics2D,\n  Types,\n  component2d,\n  strokeOps,\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  type Vector2,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { frameEase } from \"../kit/motion\"\nimport { loadPaints } from \"../kit/paints\"\nimport { SPOTLIGHT_DIM } from \"../kit/shared\"\nimport {\n  EMPTY_REGION_BOX,\n  clipPolylineToBox,\n  hasRegion,\n  type RegionBox,\n} from \"./shared\"\n\n/**\n * The prefix of `pts` revealed at fraction `p ∈ [0, 1]`, measuring the reveal\n * by *cumulative arc length* so the line traces at a steady pace regardless of\n * uneven point spacing. Returns the whole-point prefix plus one interpolated\n * point partway along the active segment.\n */\nfunction tracePoints(pts: Vector2[], p: number): Vector2[] {\n  if (p >= 1 || pts.length < 2) return pts\n  if (p <= 0) return []\n\n  const segLen: number[] = []\n  let total = 0\n  for (let i = 1; i < pts.length; i++) {\n    const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y)\n    segLen.push(d)\n    total += d\n  }\n  if (total === 0) return pts\n\n  let target = total * p\n  const out: Vector2[] = [pts[0]]\n  for (let i = 0; i < segLen.length; i++) {\n    if (target >= segLen[i]) {\n      out.push(pts[i + 1])\n      target -= segLen[i]\n    } else {\n      const t = segLen[i] === 0 ? 0 : target / segLen[i]\n      out.push({\n        x: pts[i].x + (pts[i + 1].x - pts[i].x) * t,\n        y: pts[i].y + (pts[i + 1].y - pts[i].y) * t,\n      })\n      break\n    }\n  }\n  return out\n}\n\n/**\n * A single series line of a {@link LineChart}: one rounded polyline traced\n * through pre-mapped pixel `points`, drawn as one {@link Graphics2D} command list.\n * Sized and positioned by the parent, which shares the plot's coordinate frame.\n *\n * Two signals drive it: `progress` traces the line in\n * (animated by `enter`) and `enabled` shows or hides it wholesale.\n */\nexport const ChartLine = component2d({\n  key: \"chartLine\",\n  state: {\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. */\n    points: fresh<Vector2[]>(() => []),\n    /** Line colour + weight (+ optional dash/cap/join) — the per-series stroke. */\n    stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    /**\n     * Reveal of the line in `[0, 1]`: 0 hides it, 1 traces it fully from its left\n     * end to its right. Defaults to 1, so the paused editor canvas paints the line;\n     * `enter` drives it from 0 regardless of where it rests.\n     */\n    progress: 1,\n    /** Whether this line is drawn at all: the switch the chart flips alongside its legend's per-series toggle. */\n    enabled: true,\n    /** A slice of the plot to spotlight, in this node's own pixel space: outside it the line drops to `dimOpacity`. */\n    spotlight: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    /** Opacity the out-of-region stretches fade to. */\n    dimOpacity: SPOTLIGHT_DIM,\n  },\n  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),\n  commands: {\n    /**\n     * Trace the line from `from` to `to` over the command — by default in from\n     * its left end to its right. `showSeries` and `hideSeries` are the same\n     * motion in opposite directions, so both are this with their ends stated.\n     *\n     * `enabled` rides along in the same value rather than being set before or\n     * after the command: a line is drawable for every `t` the trace covers and\n     * undrawn outside it, which is what makes arriving at a time backwards show\n     * what arriving forwards does.\n     */\n    enter: {\n      args: { from: Types.number(0, { min: 0, max: 1 }), to: Types.number(1, { min: 0, max: 1 }) },\n      run: (timeline) => {\n        const { from, to } = timeline.args\n        const ease = frameEase(timeline)\n        return timeline.animate((t) => {\n          const progress = from + (to - from) * ease(t)\n          // Hidden only once it has fully retraced, so the last frame of a hide is\n          // the empty plot rather than a line that vanished a frame early.\n          return { progress, enabled: progress > 0 }\n        })\n      },\n    },\n  },\n  render: (ctx, state) => {\n    if (!state.enabled) return\n    const pts = state.points\n    if (pts.length < 2) return\n\n    const p = Math.max(0, Math.min(1, state.progress))\n    if (p <= 0) return\n\n    const drawn = tracePoints(pts, p)\n    if (drawn.length < 2) return\n    const stroke = state.stroke\n    const radius = (stroke[0]?.weight ?? 0) * 2 // round the joins\n\n    const box = state.spotlight\n    if (!hasRegion(box)) {\n      ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke))\n      return\n    }\n\n    // Spotlit: the whole line goes down to `dimOpacity`, then the stretches\n    // inside the region are re-drawn over it at full strength. Two passes rather\n    // than one dim + one bright *complementary* pair, so the bright run has\n    // continuous geometry through the region and its joins round the way an\n    // unspotlit line's do — and so the boundary lands exactly on the region edge.\n    ctx.draw(\n      new Graphics2D()\n        .line({ points: drawn, radius })\n        .stroke(stroke)\n        .opacity(Math.max(0, Math.min(1, state.dimOpacity)))\n    )\n\n    // One `draw` per run: shapes chained before a `stroke()` are combined into a\n    // single surface, and stroking a union of disjoint open paths doesn't paint\n    // — so a line that leaves the region and comes back would lose both halves.\n    for (const run of clipPolylineToBox(drawn, box)) {\n      ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke))\n    }\n  },\n})\n\nexport type ChartLine = NodeOf<typeof ChartLine>\n"]}
+{"version":3,"file":"chart-line.js","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  component2d,\n  strokeOps,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type Stroke,\n  type StrokeResolved,\n  type Vector2,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { frameEase } from \"../kit/motion\"\nimport { loadPaints } from \"../kit/paints\"\nimport { SPOTLIGHT_DIM } from \"../kit/shared\"\nimport {\n  EMPTY_REGION_BOX,\n  clipPolylineToBox,\n  hasRegion,\n  type RegionBox,\n} from \"./shared\"\n\n/** The prefix of `pts` revealed at fraction `p`, measured by cumulative arc length so the trace keeps a steady pace over uneven spacing. */\nfunction tracePoints(pts: Vector2[], p: number): Vector2[] {\n  if (p >= 1 || pts.length < 2) return pts\n  if (p <= 0) return []\n\n  const segLen: number[] = []\n  let total = 0\n  for (let i = 1; i < pts.length; i++) {\n    const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y)\n    segLen.push(d)\n    total += d\n  }\n  if (total === 0) return pts\n\n  let target = total * p\n  const out: Vector2[] = [pts[0]]\n  for (let i = 0; i < segLen.length; i++) {\n    if (target >= segLen[i]) {\n      out.push(pts[i + 1])\n      target -= segLen[i]\n    } else {\n      const t = segLen[i] === 0 ? 0 : target / segLen[i]\n      out.push({\n        x: pts[i].x + (pts[i + 1].x - pts[i].x) * t,\n        y: pts[i].y + (pts[i + 1].y - pts[i].y) * t,\n      })\n      break\n    }\n  }\n  return out\n}\n\n/** One series of a {@link LineChart}: a rounded polyline through pre-mapped pixel `points`, one {@link Graphics2D} command list. `progress` traces it in; `enabled` shows or hides it wholesale. */\nexport const ChartLine = component2d({\n  key: \"chartLine\",\n  state: {\n    /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */\n    points: fresh<Vector2[]>(() => []),\n    stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */\n    progress: 1,\n    /** Whether the line is drawn at all, flipped alongside its legend entry. */\n    enabled: true,\n    /** In this node's pixel space; outside it the line drops to `dimOpacity`. */\n    spotlight: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    dimOpacity: SPOTLIGHT_DIM,\n  },\n  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),\n  commands: {\n    /**\n     * Trace the line from `from` to `to`; `showSeries`/`hideSeries` are this with\n     * the ends stated. `enabled` rides along in the same value, so the line is\n     * drawable for every `t` the trace covers and arriving backwards matches\n     * arriving forwards.\n     */\n    enter: {\n      args: { from: Types.number(0, { min: 0, max: 1 }), to: Types.number(1, { min: 0, max: 1 }) },\n      run: (timeline) => {\n        const { from, to } = timeline.args\n        const ease = frameEase(timeline)\n        return timeline.animate((t) => {\n          const progress = from + (to - from) * ease(t)\n          // Hidden only once fully retraced, so a hide does not vanish a frame early.\n          return { progress, enabled: progress > 0 }\n        })\n      },\n    },\n  },\n  render: (ctx, state) => {\n    if (!state.enabled) return\n    const pts = state.points\n    if (pts.length < 2) return\n\n    const p = Math.max(0, Math.min(1, state.progress))\n    if (p <= 0) return\n\n    const drawn = tracePoints(pts, p)\n    if (drawn.length < 2) return\n    const stroke = state.stroke\n    const radius = (stroke[0]?.weight ?? 0) * 2\n\n    const box = state.spotlight\n    if (!hasRegion(box)) {\n      ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke))\n      return\n    }\n\n    // Dim the whole line, then redraw the stretches inside the region at full strength: the bright run keeps continuous geometry and round joins, and the boundary lands on the region edge.\n    ctx.draw(\n      new Graphics2D()\n        .line({ points: drawn, radius })\n        .stroke(stroke)\n        .opacity(Math.max(0, Math.min(1, state.dimOpacity)))\n    )\n\n    // One `draw` per run: shapes chained before `stroke()` combine into one surface, and stroking a union of disjoint open paths paints nothing.\n    for (const run of clipPolylineToBox(drawn, box)) {\n      ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke))\n    }\n  },\n})\n\nexport type ChartLine = NodeOf<typeof ChartLine>\n"]}

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

@@ -1,46 +1,33 @@
-import { type Fill, type FillResolved, type NodeOf, type Node2D as _Node2D, type Stroke, type StrokeResolved } from "@motionscript/sdk";
+import { type Fill, type FillResolved, type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type Stroke, type StrokeResolved } from "@motionscript/sdk";
 import { type RegionBox } from "./shared.js";
 /**
- * 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 `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
- * the two can't disagree about where the boundary is.
- *
- * Only bounded edges get a rule: a region given just an `x` range spans the full
- * 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.
+ * The call-out of a {@link LineChart}: a washed rectangle with a dashed rule on
+ * each bounded edge, drawn from the pre-mapped `box`. Dimming the series outside
+ * is {@link ChartLine}'s job, clipped against the same box so the two agree on
+ * the boundary. An unbounded edge is the plot's own border, and a rule there
+ * would assert a limit the author did not set.
  */
 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. */
+    /** In this node's pixel space (origin at centre, y-up), mapped by the parent. 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. */
+    /** Driven by the chart's `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. */
+}>, {}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** In this node's pixel space (origin at centre, y-up), mapped by the parent. 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. */
+    /** Driven by the chart's `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. */
+    /** In this node's pixel space (origin at centre, y-up), mapped by the parent. 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. */
+    /** Driven by the chart's `regionReveal`, so the rules and the series' dimming move as one. */
     readonly reveal: 0;
-}>, {}, _Node2D<import("@motionscript/core").Node2DProps>>>>;
+}>, {}, _Node2D<_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,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"}
+{"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,WAAW,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAEjB;;;;;;GAMG;AACH,eAAO,MAAM,WAAW;IAGpB,iHAAiH;;;;IAIjH,8FAA8F;;;IAJ9F,iHAAiH;;;;IAIjH,8FAA8F;;;IAJ9F,iHAAiH;;;;IAIjH,8FAA8F;;gCAmChG,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

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

@@ -3,29 +3,20 @@ import { fresh } from "../kit/entries.js";
 import { loadPaints } from "../kit/paints.js";
 import { DEFAULT_CHART_THEME, EMPTY_REGION_BOX, hasRegion, } from "./shared.js";
 /**
- * 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 `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
- * the two can't disagree about where the boundary is.
- *
- * Only bounded edges get a rule: a region given just an `x` range spans the full
- * 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.
+ * The call-out of a {@link LineChart}: a washed rectangle with a dashed rule on
+ * each bounded edge, drawn from the pre-mapped `box`. Dimming the series outside
+ * is {@link ChartLine}'s job, clipped against the same box so the two agree on
+ * the boundary. An unbounded edge is the plot's own border, and a rule there
+ * would assert a limit the author did not set.
  */
 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. */
+        /** In this node's pixel space (origin at centre, y-up), mapped by the parent. 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. */
+        /** Driven by the chart's `regionReveal`, so the rules and the series' dimming move as one. */
         reveal: 0,
     },
     load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),
@@ -40,17 +31,12 @@ export const ChartRegion = component2d({
         const height = box.top - box.bottom;
         const cx = (box.left + box.right) / 2;
         const cy = (box.bottom + box.top) / 2;
-        // Wash first, so the rules sit over their own tint.
         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.
         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.
+        // One `draw` per rule: stroking a union of disjoint open paths paints nothing.
         const rule = (points) => ctx.draw(new Graphics2D().line({ points }).stroke(state.stroke).opacity(r));
         if (box.xBounded) {
             const half = (height / 2) * r;