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

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

@@ -1,6 +1,6 @@
-import { Node2D, type CommandArgs, type NodeConfig, type Node2DProps } from "@motionscript/core";
+import { type NodeOf, type Node2D, type Node2DProps } from "@motionscript/sdk";
+import { type Arrival } from "./motion.js";
 import { type AxisConfig, type Range } from "./shared.js";
-import { type Seekable } from "@motionscript/core/component";
 export interface VerticalAxisProps extends Node2DProps {
     /** `[min, max]` of the vertical scale the markers are positioned within. */
     range: Range;
@@ -10,6 +10,12 @@ export interface VerticalAxisProps extends Node2DProps {
      * the ends.
      */
     markers: number[];
+    /**
+     * How each marker is captioned, one per entry of `markers` and in its order.
+     * Empty (the default), or short, captions a marker with its bare numeric
+     * reading; a chart with a number format on this axis writes them through it.
+     */
+    captions: string[];
     /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
     axis: AxisConfig;
     /**
@@ -19,8 +25,13 @@ export interface VerticalAxisProps extends Node2DProps {
      */
     label: string;
 }
-/** How a tick value is captioned — see {@link VerticalAxis.labelFor}. */
+/** How a tick value is captioned — see {@link VerticalAxisProps.captions}. */
 export type MarkerLabel = (value: number) => string;
+/** What a marker's caption reads: the one listed for its value, else its bare reading. */
+export declare function markerCaption(s: {
+    readonly markers: readonly number[];
+    readonly captions: readonly string[];
+}, value: number): string;
 /**
  * The numeric vertical axis shared by the cartesian charts: a **column of
  * {@link Text} nodes**, one per marker value, running top-to-bottom (highest
@@ -34,66 +45,42 @@ export type MarkerLabel = (value: number) => string;
  * tweens `range`/`markers` live. Only the marker **count** is fixed at
  * construction.
  *
- * {@link enter} staggers them in **bottom-to-top**: each marker starts pushed a
+ * `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.
  */
-export declare class VerticalAxis extends Node2D<VerticalAxisProps> {
-    range: Range;
-    markers: number[];
-    axis: AxisConfig;
-    label: string;
-    /**
-     * How a tick value is captioned. Defaults to the bare numeric reading; a
-     * chart with a number format on this axis replaces it (see `number-format`).
-     *
-     * A plain field rather than a `@property`, for the reason the horizontal
-     * axis's twin spells out: it is a policy, not a value, and there is nothing
-     * to tween between two formatters.
-     */
-    labelFor: MarkerLabel;
-    /** One text node per marker, ordered top → bottom, for the staggered enter. */
-    private markerNodes;
-    /** The caption node, or null when `label` is empty. Entered after the markers. */
-    private labelNode;
-    /** The live tick values, top → bottom (highest first) — re-read every frame. */
-    private get sortedMarkers();
-    /**
-     * Tick `i`'s value, or `undefined` once the live `markers` list is shorter
-     * than the column of text nodes built for it — a slot with no value renders as
-     * empty text rather than repeating its neighbour.
-     */
-    private valueAt;
-    /** Tick `i`'s fraction across the live `range`, 0 at the bottom edge. */
-    private fracAt;
-    constructor(props?: NodeConfig<VerticalAxis, VerticalAxisProps>);
-    /**
-     * Primes every marker (and the caption) at its pre-entrance state: shifted
-     * right and transparent. Idempotent, and separate from {@link enter} so the
-     * chart can arm its whole composition before the first frame is drawn.
-     */
-    arm(slide?: number): void;
-    /**
-     * Stagger the markers in bottom to top, then slide the caption in from the
-     * right after them.
-     *
-     * A {@link Seekable} rather than a generator — see the note on the horizontal
-     * axis's `enter`. The offsets were always static; expressing them as `wait`
-     * inside a generator is what made them reachable only by running it.
-     *
-     * `args.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.
-     *
-     * `args.data.stagger` is seconds between successive markers (derived when
-     * omitted); `args.data.slide` is the starting rightward offset in px.
-     */
-    enter(args: CommandArgs<{
-        stagger?: number;
-        slide?: number;
-    }> & {
-        duration: number;
-    }): Seekable;
-}
+export declare const VerticalAxis: import("@motionscript/sdk").Component<"verticalAxis", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
+    readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    readonly label: "";
+    readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
+}>, {
+    readonly enter: {
+        readonly stagger: import("@motionscript/sdk").Type<number | undefined, number | undefined, false>;
+        readonly slide: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, null, Node2D<Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
+    readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    readonly label: "";
+    readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
+    readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    readonly label: "";
+    readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
+}>, {
+    readonly enter: {
+        readonly stagger: import("@motionscript/sdk").Type<number | undefined, number | undefined, false>;
+        readonly slide: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, Node2D<Node2DProps>>>>;
+export type VerticalAxis = NodeOf<typeof VerticalAxis>;
 //# sourceMappingURL=vertical-axis.d.ts.map

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,EAEL,MAAM,EAQN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,UAAU,CAAA;AACjB,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAEzE,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAA;IACZ;;;;OAIG;IACH,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,oFAAoF;IACpF,IAAI,EAAE,UAAU,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AAKD,yEAAyE;AACzE,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;AAEnD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,YAAa,SAAQ,MAAM,CAAC,iBAAiB,CAAC;IACH,KAAK,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;IACvB,IAAI,EAAE,UAAU,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IAEhD;;;;;;;OAOG;IACH,QAAQ,EAAE,WAAW,CAAe;IAEpC,+EAA+E;IAC/E,OAAO,CAAC,WAAW,CAAa;IAChC,kFAAkF;IAClF,OAAO,CAAC,SAAS,CAAoB;IAErC,gFAAgF;IAChF,OAAO,KAAK,aAAa,GAExB;IAED;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAIf,yEAAyE;IACzE,OAAO,CAAC,MAAM;gBAOF,KAAK,CAAC,EAAE,UAAU,CAAC,YAAY,EAAE,iBAAiB,CAAC;IA0D/D;;;;OAIG;IACH,GAAG,CAAC,KAAK,SAAQ,GAAG,IAAI;IAKxB;;;;;;;;;;;;;;OAcG;IAEH,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,QAAQ;CA6BhG"}
+{"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"}

package/dist/kit/vertical-axis.js

@@ -1,14 +1,14 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { command, Node2D, Rect, RotatedBox, Text, easeOut, property, insetsOps, textOps, } from "@motionscript/core";
+import { Rect, RotatedBox, Text, Types, component2d, insetsOps, textOps, } from "@motionscript/sdk";
+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";
-import { at, compose } from "@motionscript/core/component";
 /** How far a marker starts to the right of its slot when it enters, in px. */
 const SLIDE = 24;
+/** What a marker's caption reads: the one listed for its value, else its bare reading. */
+export function markerCaption(s, value) {
+    const index = s.markers.indexOf(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
@@ -22,62 +22,53 @@ const SLIDE = 24;
  * tweens `range`/`markers` live. Only the marker **count** is fixed at
  * construction.
  *
- * {@link enter} staggers them in **bottom-to-top**: each marker starts pushed a
+ * `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.
  */
-export class VerticalAxis extends Node2D {
-    /**
-     * How a tick value is captioned. Defaults to the bare numeric reading; a
-     * chart with a number format on this axis replaces it (see `number-format`).
-     *
-     * A plain field rather than a `@property`, for the reason the horizontal
-     * axis's twin spells out: it is a policy, not a value, and there is nothing
-     * to tween between two formatters.
-     */
-    labelFor = formatMarker;
-    /** One text node per marker, ordered top → bottom, for the staggered enter. */
-    markerNodes = [];
-    /** The caption node, or null when `label` is empty. Entered after the markers. */
-    labelNode = null;
-    /** The live tick values, top → bottom (highest first) — re-read every frame. */
-    get sortedMarkers() {
-        return [...this.markers].sort((a, b) => b - a);
-    }
-    /**
-     * Tick `i`'s value, or `undefined` once the live `markers` list is shorter
-     * than the column of text nodes built for it — a slot with no value renders as
-     * empty text rather than repeating its neighbour.
-     */
-    valueAt(index) {
-        return this.sortedMarkers[index];
-    }
-    /** Tick `i`'s fraction across the live `range`, 0 at the bottom edge. */
-    fracAt(index) {
-        const v = this.valueAt(index);
-        if (v === undefined)
-            return 0;
-        const [min, max] = this.range;
-        return max <= min ? 0 : (v - min) / (max - min);
-    }
-    constructor(props) {
-        super(props);
-        // Composed from plain props (range/markers/label) — no context needed, so
-        // it's built here. super() applied the props, so the reads below resolve.
-        const tickPad = insetsOps.resolve(this.axis.tickPadding).right;
-        const titlePad = insetsOps.resolve(this.axis.titlePadding).right;
-        this.markerNodes = this.markers.map((_, i) => {
+export const VerticalAxis = component2d({
+    key: "verticalAxis",
+    state: {
+        range: fresh(() => [0, 1]),
+        markers: fresh(() => []),
+        captions: fresh(() => []),
+        axis: Types.custom(DEFAULT_Y_AXIS),
+        label: "",
+        arrivals: arrivalsEntry(),
+    },
+    // A plain node filled its parent; one made of its markers would 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.
+        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.
+        const markers = state.markers.map((_, i) => {
             const marker = new Text({
-                ...textOps.styleProps(this.axis.labelStyle),
+                ...textOps.styleProps(state.axis.labelStyle),
                 text: () => {
-                    const v = this.valueAt(i);
-                    return v === undefined ? "" : this.labelFor(v);
+                    const value = sorted()[i];
+                    return value === undefined ? "" : markerCaption(state, value);
                 },
                 y: () => {
                     // Node2D space is y-up, so the fraction runs from the bottom.
-                    const height = this.layoutBounds.height;
-                    const centred = (this.fracAt(i) - 0.5) * height;
+                    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
@@ -85,92 +76,66 @@ export class VerticalAxis extends Node2D {
                     const limit = height / 2 - marker.layoutBounds.height / 2;
                     return Math.min(centred, limit);
                 },
+                opacity: () => arrivalOf(state.arrivals, i).opacity,
+                x: () => arrivalOf(state.arrivals, i).shift,
             });
             return marker;
         });
         const children = [];
-        if (this.label !== "") {
-            this.labelNode = new Text({
-                ...textOps.styleProps(this.axis.titleStyle),
-                text: this.label,
-            });
+        if (state.label !== "") {
             // Node2D space is y-up and rotation is clockwise, so -90° reads bottom-to-top.
             children.push(new RotatedBox({
                 angle: -90,
                 width: "hug",
                 height: "hug",
-                children: this.labelNode,
+                children: new Text({
+                    ...textOps.styleProps(state.axis.titleStyle),
+                    text: state.label,
+                    opacity: () => arrivalOf(state.arrivals, "label").opacity,
+                    x: () => arrivalOf(state.arrivals, "label").shift,
+                }),
             }));
         }
-        children.push(new Rect({
-            height: "fill",
-            width: "hug",
-            padding: { right: tickPad },
-            children: this.markerNodes,
-        }));
-        this.add(new Rect({ flow: "horizontal", gap: titlePad, children }));
-    }
-    /**
-     * Primes every marker (and the caption) at its pre-entrance state: shifted
-     * right and transparent. Idempotent, and separate from {@link enter} so the
-     * chart can arm its whole composition before the first frame is drawn.
-     */
-    arm(slide = SLIDE) {
-        for (const marker of this.markerNodes)
-            marker.set({ opacity: 0, x: slide });
-        this.labelNode?.set({ opacity: 0, x: slide });
-    }
-    /**
-     * Stagger the markers in bottom to top, then slide the caption in from the
-     * right after them.
-     *
-     * A {@link Seekable} rather than a generator — see the note on the horizontal
-     * axis's `enter`. The offsets were always static; expressing them as `wait`
-     * inside a generator is what made them reachable only by running it.
-     *
-     * `args.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.
-     *
-     * `args.data.stagger` is seconds between successive markers (derived when
-     * omitted); `args.data.slide` is the starting rightward offset in px.
-     */
-    enter(args) {
-        const { stagger, slide = SLIDE } = args.data ?? {};
-        const easing = args.easing ?? easeOut();
-        const nodes = this.markerNodes;
-        if (nodes.length === 0)
-            return compose([]);
-        const { step, per, caption } = enterBudget(args.duration, nodes.length, this.labelNode !== null, stagger);
-        this.arm(slide);
-        // Bottom marker leads: markerNodes is top → bottom, so walk it in reverse.
-        const markers = nodes.map((node, i) => {
-            const order = nodes.length - 1 - i; // bottom-most = 0
-            return at(order * step, node.to({ data: { opacity: 1, x: 0 }, duration: per, easing }));
-        });
-        const lastMarkerEnds = (nodes.length - 1) * step + per;
-        // Once every marker has landed, the caption slides in from the right.
-        return compose([
-            ...markers,
-            ...(this.labelNode
-                ? [at(lastMarkerEnds, this.labelNode.to({ data: { opacity: 1, x: 0 }, duration: caption, easing }))]
-                : []),
-        ]);
-    }
-}
-__decorate([
-    property({ default: () => [0, 1] })
-], VerticalAxis.prototype, "range", void 0);
-__decorate([
-    property({ default: () => [] })
-], VerticalAxis.prototype, "markers", void 0);
-__decorate([
-    property({ default: DEFAULT_Y_AXIS })
-], VerticalAxis.prototype, "axis", void 0);
-__decorate([
-    property({ default: "" })
-], VerticalAxis.prototype, "label", void 0);
-__decorate([
-    command()
-], VerticalAxis.prototype, "enter", null);
+        children.push(new Rect({ height: "fill", width: "hug", padding: { right: tickPad }, children: markers }));
+        row.push(new Rect({ flow: "horizontal", gap: titlePad, children }));
+        return asParts(row);
+    },
+    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.
+         */
+        enter: {
+            args: {
+                stagger: Types.custom(undefined),
+                slide: Types.number(SLIDE),
+            },
+            run: (timeline, state) => {
+                const { stagger, slide } = timeline.args;
+                const count = state.markers.length;
+                const captioned = state.label !== "";
+                const from = { opacity: 0, shift: slide };
+                const keys = [...state.markers.keys(), ...(captioned ? ["label"] : [])];
+                const arm = timeline.animate(() => ({ arrivals: armed(keys, from) }));
+                if (count === 0)
+                    return arm;
+                const { step, per, caption } = enterBudget(timeline.duration, count, captioned, stagger);
+                const ease = frameEase(timeline);
+                // Bottom marker leads: the column is top → bottom, so walk it 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])]);
+            },
+        },
+    },
+});
 //# sourceMappingURL=vertical-axis.js.map

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  command,\n  Node2D,\n  Rect,\n  RotatedBox,\n  Text,\n  easeOut,\n  property,\n  insetsOps,\n  textOps,\n  type CommandArgs,\n  type NodeConfig,\n  type Node2DProps,\n} from \"@motionscript/core\"\n\nimport {\n  DEFAULT_Y_AXIS,\n  enterBudget,\n  formatMarker,\n  type AxisConfig,\n  type Range,\n} from \"./shared\"\nimport { at, compose, type Seekable } from \"@motionscript/core/component\"\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  /** 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 VerticalAxis.labelFor}. */\nexport type MarkerLabel = (value: number) => string\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 * {@link 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 class VerticalAxis extends Node2D<VerticalAxisProps> {\n  @property({ default: () => [0, 1] as Range }) declare range: Range\n  @property({ default: () => [] as number[] }) declare markers: number[]\n  @property({ default: DEFAULT_Y_AXIS }) declare axis: AxisConfig\n  @property({ default: \"\" }) declare label: string\n\n  /**\n   * How a tick value is captioned. Defaults to the bare numeric reading; a\n   * chart with a number format on this axis replaces it (see `number-format`).\n   *\n   * A plain field rather than a `@property`, for the reason the horizontal\n   * axis's twin spells out: it is a policy, not a value, and there is nothing\n   * to tween between two formatters.\n   */\n  labelFor: MarkerLabel = formatMarker\n\n  /** One text node per marker, ordered top → bottom, for the staggered enter. */\n  private markerNodes: Text[] = []\n  /** The caption node, or null when `label` is empty. Entered after the markers. */\n  private labelNode: Text | null = null\n\n  /** The live tick values, top → bottom (highest first) — re-read every frame. */\n  private get sortedMarkers(): number[] {\n    return [...this.markers].sort((a, b) => b - a)\n  }\n\n  /**\n   * Tick `i`'s value, or `undefined` once the live `markers` list is shorter\n   * than the column of text nodes built for it — a slot with no value renders as\n   * empty text rather than repeating its neighbour.\n   */\n  private valueAt(index: number): number | undefined {\n    return this.sortedMarkers[index]\n  }\n\n  /** Tick `i`'s fraction across the live `range`, 0 at the bottom edge. */\n  private fracAt(index: number): number {\n    const v = this.valueAt(index)\n    if (v === undefined) return 0\n    const [min, max] = this.range\n    return max <= min ? 0 : (v - min) / (max - min)\n  }\n\n  constructor(props?: NodeConfig<VerticalAxis, VerticalAxisProps>) {\n    super(props)\n\n    // Composed from plain props (range/markers/label) — no context needed, so\n    // it's built here. super() applied the props, so the reads below resolve.\n    const tickPad = insetsOps.resolve(this.axis.tickPadding).right\n    const titlePad = insetsOps.resolve(this.axis.titlePadding).right\n\n    this.markerNodes = this.markers.map((_, i) => {\n      const marker: Text = new Text({\n        ...textOps.styleProps(this.axis.labelStyle),\n        text: () => {\n          const v = this.valueAt(i)\n          return v === undefined ? \"\" : this.labelFor(v)\n        },\n        y: () => {\n          // Node2D space is y-up, so the fraction runs from the bottom.\n          const height = this.layoutBounds.height\n          const centred = (this.fracAt(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      })\n      return marker\n    })\n\n    const children: Node2D[] = []\n    if (this.label !== \"\") {\n      this.labelNode = new Text({\n        ...textOps.styleProps(this.axis.titleStyle),\n        text: this.label,\n      })\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: this.labelNode,\n        })\n      )\n    }\n    children.push(\n      new Rect({\n        height: \"fill\",\n        width: \"hug\",\n        padding: { right: tickPad },\n        children: this.markerNodes,\n      })\n    )\n\n    this.add(new Rect({ flow: \"horizontal\", gap: titlePad, children }))\n  }\n\n  /**\n   * Primes every marker (and the caption) at its pre-entrance state: shifted\n   * right and transparent. Idempotent, and separate from {@link enter} so the\n   * chart can arm its whole composition before the first frame is drawn.\n   */\n  arm(slide = SLIDE): void {\n    for (const marker of this.markerNodes) marker.set({ opacity: 0, x: slide })\n    this.labelNode?.set({ opacity: 0, x: slide })\n  }\n\n  /**\n   * Stagger the markers in bottom to top, then slide the caption in from the\n   * right after them.\n   *\n   * A {@link Seekable} rather than a generator — see the note on the horizontal\n   * axis's `enter`. The offsets were always static; expressing them as `wait`\n   * inside a generator is what made them reachable only by running it.\n   *\n   * `args.duration` is the **whole** entrance, not one marker's slide: the\n   * stagger and the caption are carved out of it rather than added on top. See\n   * {@link enterBudget} for why that distinction matters here.\n   *\n   * `args.data.stagger` is seconds between successive markers (derived when\n   * omitted); `args.data.slide` is the starting rightward offset in px.\n   */\n  @command()\n  enter(args: CommandArgs<{ stagger?: number; slide?: number }> & { duration: number }): Seekable {\n    const { stagger, slide = SLIDE } = args.data ?? {}\n    const easing = args.easing ?? easeOut()\n    const nodes = this.markerNodes\n    if (nodes.length === 0) return compose([])\n    const { step, per, caption } = enterBudget(\n      args.duration,\n      nodes.length,\n      this.labelNode !== null,\n      stagger\n    )\n\n    this.arm(slide)\n\n    // Bottom marker leads: markerNodes is top → bottom, so walk it in reverse.\n    const markers = nodes.map((node, i) => {\n      const order = nodes.length - 1 - i // bottom-most = 0\n      return at(order * step, node.to({ data: { opacity: 1, x: 0 }, duration: per, easing }))\n    })\n    const lastMarkerEnds = (nodes.length - 1) * step + per\n\n    // Once every marker has landed, the caption slides in from the right.\n    return compose([\n      ...markers,\n      ...(this.labelNode\n        ? [at(lastMarkerEnds, this.labelNode.to({ data: { opacity: 1, x: 0 }, duration: caption, easing }))]\n        : []),\n    ])\n  }\n}\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  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"]}