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

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

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

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

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

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

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

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

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

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

@@ -10,8 +10,8 @@
  * that is *not* here comes from the kit and stays a dependency — see
  * `../engine.ts` for why that line is where it is.
  */
-export { LineChart } from "./line-chart.js";
-export type { LineChartProps } from "./line-chart.js";
+export { LineChart, lineChartDomains } from "./line-chart.js";
+export type { LineChartDomains, LineChartProps, LineChartValues } from "./line-chart.js";
 export { ChartRegion } from "./chart-region.js";
 export { ChartLine } from "./chart-line.js";
 export { HorizontalAxis } from "./horizontal-axis.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/line-chart/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,OAAO,GACR,MAAM,UAAU,CAAA;AACjB,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,YAAY,GACb,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACtE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/line-chart/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC1D,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,OAAO,GACR,MAAM,UAAU,CAAA;AACjB,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,YAAY,GACb,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACtE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA"}

package/dist/line-chart/index.js

@@ -10,7 +10,7 @@
  * that is *not* here comes from the kit and stays a dependency — see
  * `../engine.ts` for why that line is where it is.
  */
-export { LineChart } from "./line-chart.js";
+export { LineChart, lineChartDomains } from "./line-chart.js";
 export { ChartRegion } from "./chart-region.js";
 export { ChartLine } from "./chart-line.js";
 export { HorizontalAxis } from "./horizontal-axis.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/line-chart/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,OAAO,GACR,MAAM,UAAU,CAAA;AASjB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA","sourcesContent":["/**\r\n * The line chart: a cartesian plot with a traced polyline, spotlit regions and\r\n * a staggered entrance.\r\n *\r\n * {@link LineChart} composes the parts below plus the shared ones in the kit\r\n * (the plot panel, the value axis, the legend); each part is exported too, so\r\n * another node type can reuse one on its own.\r\n *\r\n * These files are what `ms add line-chart` copies. Everything they reach for\r\n * that is *not* here comes from the kit and stays a dependency — see\r\n * `../engine.ts` for why that line is where it is.\r\n */\r\nexport { LineChart } from \"./line-chart\"\r\nexport type { LineChartProps } from \"./line-chart\"\r\nexport { ChartRegion } from \"./chart-region\"\r\nexport { ChartLine } from \"./chart-line\"\r\nexport { HorizontalAxis } from \"./horizontal-axis\"\r\nexport {\r\n  DEFAULT_CHART_THEME,\r\n  EMPTY_REGION_BOX,\r\n  clipPolylineToBox,\r\n  hasRegion,\r\n  lerpChartTheme,\r\n  resolveChartTheme,\r\n  resolveRegionBox,\r\n  resolveYScale,\r\n  seriesPoints,\r\n  yExtent,\r\n} from \"./shared\"\r\nexport type {\r\n  ChartConfig,\r\n  ChartTheme,\r\n  LineSeries,\r\n  PlotRegion,\r\n  RegionBox,\r\n  RegionConfig,\r\n} from \"./shared\"\r\nexport { formatInstant, parseInstant, resolveXScale } from \"./x-scale\"\r\nexport type { XScale, XScaleKind } from \"./x-scale\"\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/line-chart/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,OAAO,GACR,MAAM,UAAU,CAAA;AASjB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA","sourcesContent":["/**\r\n * The line chart: a cartesian plot with a traced polyline, spotlit regions and\r\n * a staggered entrance.\r\n *\r\n * {@link LineChart} composes the parts below plus the shared ones in the kit\r\n * (the plot panel, the value axis, the legend); each part is exported too, so\r\n * another node type can reuse one on its own.\r\n *\r\n * These files are what `ms add line-chart` copies. Everything they reach for\r\n * that is *not* here comes from the kit and stays a dependency — see\r\n * `../engine.ts` for why that line is where it is.\r\n */\r\nexport { LineChart, lineChartDomains } from \"./line-chart\"\r\nexport type { LineChartDomains, LineChartProps, LineChartValues } from \"./line-chart\"\r\nexport { ChartRegion } from \"./chart-region\"\r\nexport { ChartLine } from \"./chart-line\"\r\nexport { HorizontalAxis } from \"./horizontal-axis\"\r\nexport {\r\n  DEFAULT_CHART_THEME,\r\n  EMPTY_REGION_BOX,\r\n  clipPolylineToBox,\r\n  hasRegion,\r\n  lerpChartTheme,\r\n  resolveChartTheme,\r\n  resolveRegionBox,\r\n  resolveYScale,\r\n  seriesPoints,\r\n  yExtent,\r\n} from \"./shared\"\r\nexport type {\r\n  ChartConfig,\r\n  ChartTheme,\r\n  LineSeries,\r\n  PlotRegion,\r\n  RegionBox,\r\n  RegionConfig,\r\n} from \"./shared\"\r\nexport { formatInstant, parseInstant, resolveXScale } from \"./x-scale\"\r\nexport type { XScale, XScaleKind } from \"./x-scale\"\r\n"]}