@motionscript/charts 0.0.0-stage → 0.1.0-alpha.10

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-region.js","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  component2d,\n  fillOps,\n  strokeOps,\n  type Fill,\n  type FillResolved,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\n  type Node2D as _Node2D,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { loadPaints } from \"../kit/paints\"\nimport {\n  DEFAULT_CHART_THEME,\n  EMPTY_REGION_BOX,\n  hasRegion,\n  type RegionBox,\n} from \"./shared\"\n\n/**\n * The **region call-out** of a {@link LineChart}: a washed rectangle over the\n * plot with a dashed rule down each edge the author actually bounded. Sized and\n * positioned entirely from the pre-mapped `box` rather\n * than its own box — the region already carries the plot geometry.\n *\n * It draws only the *marking*; fading the series outside the region is\n * {@link ChartLine}'s job (it clips its own polyline against the same box), so\n * the two can't disagree about where the boundary is.\n *\n * Only bounded edges get a rule: a region given just an `x` range spans the full\n * plot height, so its top and bottom edges are the plot's own border, not a data\n * bound — drawing dashes there would assert a limit the author didn't set.\n */\nexport const ChartRegion = component2d({\n  key: \"chartRegion\",\n  state: {\n    /** The highlighted slice, already resolved into this node's local pixel space (origin at centre, y-up) by the parent {@link LineChart}. A degenerate box draws nothing. */\n    box: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    /** Dashed rule marking each *bounded* edge of the box. */\n    stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_CHART_THEME.region.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    /** Wash filling the box, under the series lines. */\n    fill: Types.custom<Fill, FillResolved[]>(DEFAULT_CHART_THEME.region.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    /** Reveal of the annotation in `[0, 1]`, driven by the chart's own `regionReveal` so the rules and the series' dimming move as one. */\n    reveal: 0,\n  },\n  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),\n  render: (ctx, state) => {\n    const box = state.box\n    if (!hasRegion(box)) return\n\n    const r = Math.max(0, Math.min(1, state.reveal))\n    if (r <= 0) return\n\n    const width = box.right - box.left\n    const height = box.top - box.bottom\n    const cx = (box.left + box.right) / 2\n    const cy = (box.bottom + box.top) / 2\n\n    // Wash first, so the rules sit over their own tint.\n    if (state.fill.length > 0) {\n      ctx.draw(new Graphics2D().rect({ x: cx, y: cy, width, height }).fill(state.fill).opacity(r))\n    }\n\n    // One rule per bounded edge, growing from the region's centre outward as\n    // `reveal` climbs — the same \"trace it in\" beat as the series lines.\n    if (state.stroke.length === 0) return\n\n    // One `draw` per rule rather than four line ops under a single paint:\n    // shapes chained before a `stroke()` are combined into one surface, and\n    // stroking a union of disjoint open paths doesn't paint.\n    const rule = (points: { x: number; y: number }[]) =>\n      ctx.draw(new Graphics2D().line({ points }).stroke(state.stroke).opacity(r))\n\n    if (box.xBounded) {\n      const half = (height / 2) * r\n      for (const x of [box.left, box.right]) rule([{ x, y: cy - half }, { x, y: cy + half }])\n    }\n    if (box.yBounded) {\n      const half = (width / 2) * r\n      for (const y of [box.bottom, box.top]) rule([{ x: cx - half, y }, { x: cx + half, y }])\n    }\n  },\n})\n\nexport type ChartRegion = NodeOf<typeof ChartRegion>\n"]}

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

@@ -0,0 +1,79 @@
+import { type NodeOf, type Node2D } from "@motionscript/sdk";
+import { type Arrival } from "../kit/motion.js";
+import { type AxisConfig, type Range } from "../kit/shared.js";
+/**
+ * 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
+ * kit's `VerticalAxis`, including its bound (not snapshotted) marker text and
+ * positions, and its landed resting state.
+ *
+ * Markers are always placed **by value** across the range, whatever they say:
+ * `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, in `captions`.
+ *
+ * `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 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 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.
+     */
+    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>;
+    /**
+     * 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.
+     */
+    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>;
+    /**
+     * 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.
+     */
+    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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,129 @@
+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;
+/**
+ * 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
+ * kit's `VerticalAxis`, including its bound (not snapshotted) marker text and
+ * positions, and its landed resting state.
+ *
+ * Markers are always placed **by value** across the range, whatever they say:
+ * `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, in `captions`.
+ *
+ * `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 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(state.axis.labelStyle),
+                text: () => {
+                    const value = sorted()[i];
+                    return value === undefined ? "" : markerCaption(state, value);
+                },
+                x: () => {
+                    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
+                    // the rectangle the editor draws around it. Only the right edge is
+                    // held, because the left one has the vertical axis's whole gutter
+                    // beyond it, and a marker overhanging into that is inside the chart.
+                    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: markers }),
+        ];
+        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,
+            }));
+        }
+        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

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal-axis.js","sourceRoot":"","sources":["../../src/line-chart/horizontal-axis.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Rect,\n  Text,\n  Types,\n  component2d,\n  insetsOps,\n  textOps,\n  type NodeOf,\n  type Node2D,\n} from \"@motionscript/sdk\";\n\nimport { asParts, fresh } from \"../kit/entries\";\nimport { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase, type Arrival } from \"../kit/motion\";\nimport {\n  DEFAULT_X_AXIS,\n  enterBudget,\n  type AxisConfig,\n  type Range,\n} from \"../kit/shared\";\nimport { markerCaption } from \"../kit/vertical-axis\";\n\n/** How far a marker starts above its slot when it enters, in px. */\nconst SLIDE = 24;\n\n/**\n * The horizontal axis of a {@link LineChart}: a **row of {@link Text} nodes**,\n * one per marker value, running left-to-right. Pure layout — the mirror of the\n * kit's `VerticalAxis`, including its bound (not snapshotted) marker text and\n * positions, and its landed resting state.\n *\n * Markers are always placed **by value** across the range, whatever they say:\n * `2026-03` sits three months along, not three slots along. That is what keeps\n * it distinct from a bar chart's bottom axis, which centres a caption on each\n * slot and has no scale at all — the two only look alike. What the values are\n * captioned *as* is the chart's to decide, in `captions`.\n *\n * `enter` staggers the markers in **left-to-right**: each starts lifted a\n * little above its slot and transparent, then fades and slides down into place.\n */\nexport const HorizontalAxis = component2d({\n  key: \"horizontalAxis\",\n  state: {\n    /** `[min, max]` of the horizontal scale the markers are positioned within. */\n    range: fresh<Range>(() => [0, 1]),\n    /** Tick values (in data units) to draw along the axis. */\n    markers: fresh<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 whose x column names months or categories writes those.\n     */\n    captions: fresh<string[]>(() => []),\n    /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */\n    axis: Types.custom<AxisConfig>(DEFAULT_X_AXIS),\n    /** Caption drawn centred in the gutter beneath the marker row; empty (the default) hides it. */\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    const tickPad = insetsOps.resolve(state.axis.tickPadding).top;\n    const titlePad = insetsOps.resolve(state.axis.titlePadding).top;\n\n    const column: Node2D[] = [];\n    // The column's parent is the axis: its box is what the markers are placed in.\n    const box = () => (column[0]?.parent as Node2D | null | undefined)?.layoutBounds ?? { width: 0, height: 0 };\n    /** The live tick values, left → right — re-read every frame, not snapshotted. */\n    const sorted = () => [...state.markers].sort((a, b) => a - b);\n    /** Tick `i`'s fraction across the live `range`, 0 at the left 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    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        x: () => {\n          const width = box().width;\n          const centred = (fracAt(sorted()[i]) - 0.5) * width;\n          // Held inside the axis's right edge, which is also the *chart's*: the\n          // last marker is centred on the last grid line, so half of `2026-06`\n          // — or of `3300` — would be drawn outside the node's box and outside\n          // the rectangle the editor draws around it. Only the right edge is\n          // held, because the left one has the vertical axis's whole gutter\n          // beyond it, and a marker overhanging into that is inside the chart.\n          const limit = width / 2 - marker.layoutBounds.width / 2;\n          return Math.min(centred, limit);\n        },\n        opacity: () => arrivalOf(state.arrivals, i).opacity,\n        y: () => arrivalOf(state.arrivals, i).shift,\n      });\n      return marker;\n    });\n\n    const children: Node2D[] = [\n      new Rect({ width: \"fill\", height: \"hug\", padding: { top: tickPad }, children: markers }),\n    ];\n    if (state.label !== \"\") {\n      children.push(\n        new Text({\n          ...textOps.styleProps(state.axis.titleStyle),\n          text: state.label,\n          opacity: () => arrivalOf(state.arrivals, \"label\").opacity,\n          y: () => arrivalOf(state.arrivals, \"label\").shift,\n        }),\n      );\n    }\n\n    column.push(new Rect({ flow: \"vertical\", gap: titlePad, height: \"hug\", width: \"fill\", children }));\n    return asParts(column);\n  },\n  commands: {\n    /**\n     * Stagger the markers in left to right, then slide the caption in after\n     * them. Its first frame arms them all: lifted by `slide` and transparent.\n     *\n     * The timeline's duration is the **whole** entrance — see\n     * `VerticalAxis.enter` and {@link enterBudget}.\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        // Left marker leads: the row is already left → right.\n        const markers = state.markers.map((_, i) => ({ at: 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 HorizontalAxis = NodeOf<typeof HorizontalAxis>;\n"]}

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

@@ -0,0 +1,22 @@
+/**
+ * The line chart: a cartesian plot with a traced polyline, spotlit regions and
+ * a staggered entrance.
+ *
+ * {@link LineChart} composes the parts below plus the shared ones in the kit
+ * (the plot panel, the value axis, the legend); each part is exported too, so
+ * another node type can reuse one on its own.
+ *
+ * These files are what a copy of the line chart takes (`registry.json`). Everything they reach for
+ * 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, 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";
+export { DEFAULT_CHART_THEME, EMPTY_REGION_BOX, clipPolylineToBox, hasRegion, lerpChartTheme, resolveChartTheme, resolveRegionBox, resolveYScale, seriesPoints, yExtent, } from "./shared.js";
+export type { ChartConfig, ChartTheme, LineSeries, PlotRegion, RegionBox, RegionConfig, } from "./shared.js";
+export { formatInstant, parseInstant, resolveXScale } from "./x-scale.js";
+export type { XScale, XScaleKind } from "./x-scale.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,19 @@
+/**
+ * The line chart: a cartesian plot with a traced polyline, spotlit regions and
+ * a staggered entrance.
+ *
+ * {@link LineChart} composes the parts below plus the shared ones in the kit
+ * (the plot panel, the value axis, the legend); each part is exported too, so
+ * another node type can reuse one on its own.
+ *
+ * These files are what a copy of the line chart takes (`registry.json`). Everything they reach for
+ * 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, lineChartDomains } from "./line-chart.js";
+export { ChartRegion } from "./chart-region.js";
+export { ChartLine } from "./chart-line.js";
+export { HorizontalAxis } from "./horizontal-axis.js";
+export { DEFAULT_CHART_THEME, EMPTY_REGION_BOX, clipPolylineToBox, hasRegion, lerpChartTheme, resolveChartTheme, resolveRegionBox, resolveYScale, seriesPoints, yExtent, } from "./shared.js";
+export { formatInstant, parseInstant, resolveXScale } from "./x-scale.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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":["/**\n * The line chart: a cartesian plot with a traced polyline, spotlit regions and\n * a staggered entrance.\n *\n * {@link LineChart} composes the parts below plus the shared ones in the kit\n * (the plot panel, the value axis, the legend); each part is exported too, so\n * another node type can reuse one on its own.\n *\n * These files are what a copy of the line chart takes (`registry.json`). Everything they reach for\n * that is *not* here comes from the kit and stays a dependency — see\n * `../engine.ts` for why that line is where it is.\n */\nexport { LineChart, lineChartDomains } from \"./line-chart\"\nexport type { LineChartDomains, LineChartProps, LineChartValues } from \"./line-chart\"\nexport { ChartRegion } from \"./chart-region\"\nexport { ChartLine } from \"./chart-line\"\nexport { HorizontalAxis } from \"./horizontal-axis\"\nexport {\n  DEFAULT_CHART_THEME,\n  EMPTY_REGION_BOX,\n  clipPolylineToBox,\n  hasRegion,\n  lerpChartTheme,\n  resolveChartTheme,\n  resolveRegionBox,\n  resolveYScale,\n  seriesPoints,\n  yExtent,\n} from \"./shared\"\nexport type {\n  ChartConfig,\n  ChartTheme,\n  LineSeries,\n  PlotRegion,\n  RegionBox,\n  RegionConfig,\n} from \"./shared\"\nexport { formatInstant, parseInstant, resolveXScale } from \"./x-scale\"\nexport type { XScale, XScaleKind } from \"./x-scale\"\n"]}

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

@@ -0,0 +1,200 @@
+import { type DataRecord, type NodeOf, type Node2D, type Node2DProps } from "@motionscript/sdk";
+import { type AxisDomainConfig, type Range } from "../kit/shared.js";
+import { type ChartConfig, type ChartTheme, type LineSeries, type PlotRegion } from "./shared.js";
+export interface LineChartProps extends Node2DProps {
+    /** One row per sample — a plain record of field name to value. */
+    data: DataRecord[];
+    /**
+     * Key into each row for its x value, shared by every series. Named `xField`
+     * rather than `x` because every node already has an `x` — its position.
+     */
+    xField: string;
+    /** One polyline per entry: which field it plots, its legend `label`, its `fill`. */
+    series: LineSeries[];
+    /** X-axis data domain: caption, scale range, and tick placement. */
+    xAxis?: AxisDomainConfig;
+    /** Y-axis data domain: caption, scale range, and tick placement. */
+    yAxis?: AxisDomainConfig;
+    /**
+     * A slice of the plot to spotlight, in **data units**. Dashed rules mark the
+     * bounded edges and every series fades outside the box — see
+     * `spotlightRegion`, which animates the same thing. `null` (the default) is no
+     * region.
+     */
+    region?: PlotRegion | null;
+    /**
+     * The chart's visual theme — series palette, axis text/grid/gutters, plot
+     * panel paint, and legend styling. Every branch is optional and deep-merged
+     * onto {@link DEFAULT_CHART_THEME}, so pass only what you want to override.
+     */
+    theme?: ChartTheme;
+    /** Whether the legend row below the plot is drawn at all. */
+    showLegend?: boolean;
+}
+/** Both axes' domains with their ranges and ticks resolved. */
+export interface LineChartDomains {
+    readonly x: AxisDomainConfig & {
+        readonly range: Range;
+        readonly ticks: number[];
+    };
+    readonly y: AxisDomainConfig & {
+        readonly range: Range;
+        readonly ticks: number[];
+    };
+}
+/** What a line chart plots, as its entries hold it. */
+export interface LineChartValues {
+    readonly data: DataRecord[];
+    readonly xField: string;
+    readonly series: LineSeries[];
+    readonly xAxis: AxisDomainConfig;
+    readonly yAxis: AxisDomainConfig;
+}
+/** Both axes as a line chart draws them now, an auto range or tick row read back as itself. */
+export declare function lineChartDomains(s: LineChartValues): LineChartDomains;
+/**
+ * A multi-series line chart, composed from five independent parts rather than
+ * one monolithic draw:
+ *
+ * - {@link ChartCanvas} — the plot panel with a two-way grid, under everything.
+ * - {@link VerticalAxis} / {@link HorizontalAxis} — columns/rows of real text
+ *   markers that stagger in, each carrying its own axis caption.
+ * - {@link ChartRegion} — the optional call-out marking a spotlit slice of the
+ *   plot: dashed rules on its bounded edges, and every series faded outside it.
+ * - {@link ChartLine} (one per series) — the traced polylines over the canvas.
+ * - {@link ChartLegend} — a row of entries below the chart, one per series.
+ *
+ * Every part reads the chart's entries through bindings, and the lines, the
+ * region and the grid all map against the plot panel's own laid-out box, so
+ * points land exactly on their markers and the chart re-flows if its box
+ * changes.
+ *
+ * **Resting state is the finished chart**: an editor paints a node's Initial
+ * state on a paused canvas. `enter` arms every part on its first frame.
+ *
+ * Past the entrance, `showSeries`/`hideSeries`/`spotlightSeries` pick out a
+ * *series*, `spotlightRegion` marks a *slice of the plot* without changing the
+ * scale, and `zoomTo` rescales the axes so a slice fills the plot. A spotlit
+ * region resolves against the live scales, so it travels with a zoom. A `to` of
+ * an axis `range` or `ticks` tweens from the domain as drawn (see
+ * {@link lerpAxisEntry}), so an auto axis rescales continuously.
+ */
+export declare const LineChart: import("@motionscript/sdk").Component<"lineChart", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    readonly xField: "";
+    readonly series: import("@motionscript/sdk").Type<import("../index.js").ChartSeries[], import("../index.js").ChartSeries[], false>;
+    readonly xAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
+    readonly yAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
+    readonly theme: import("@motionscript/sdk").Type<ChartTheme, ChartConfig, false>;
+    /**
+     * The spotlit slice of the plot in data units, or `null` for none. The box
+     * snaps; the animation is {@link regionReveal} drawing the rules on.
+     */
+    readonly region: import("@motionscript/sdk").Type<PlotRegion | null, PlotRegion | null, false>;
+    /**
+     * How far the `region` call-out is drawn in, `[0, 1]`: the rules grow out and
+     * the wash fades up as it climbs, while every line's out-of-region stretch
+     * fades to the theme's `region.dimOpacity`.
+     */
+    readonly regionReveal: 0;
+    /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
+    readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    /**
+     * The domain `zoomTo` first left, so `resetZoom` restores the chart as it
+     * stood, auto-derived ticks included. Cleared by `resetZoom`, so the next zoom
+     * remembers wherever the chart rests then.
+     */
+    readonly home: import("@motionscript/sdk").Type<LineChartDomains | null, LineChartDomains | null, false>;
+}>, {
+    readonly enter: {};
+    readonly spotlightRegion: {
+        readonly region: import("@motionscript/sdk").Type<PlotRegion | undefined, PlotRegion | undefined, false>;
+    };
+    readonly clearRegion: {};
+    readonly zoomTo: {
+        readonly region: import("@motionscript/sdk").Type<PlotRegion | undefined, PlotRegion | undefined, false>;
+    };
+    readonly resetZoom: {};
+    readonly showSeries: {
+        readonly seriesIndex: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly hideSeries: {
+        readonly seriesIndex: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly spotlightSeries: {
+        readonly seriesIndex: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, readonly [], Node2D<Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    readonly xField: "";
+    readonly series: import("@motionscript/sdk").Type<import("../index.js").ChartSeries[], import("../index.js").ChartSeries[], false>;
+    readonly xAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
+    readonly yAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
+    readonly theme: import("@motionscript/sdk").Type<ChartTheme, ChartConfig, false>;
+    /**
+     * The spotlit slice of the plot in data units, or `null` for none. The box
+     * snaps; the animation is {@link regionReveal} drawing the rules on.
+     */
+    readonly region: import("@motionscript/sdk").Type<PlotRegion | null, PlotRegion | null, false>;
+    /**
+     * How far the `region` call-out is drawn in, `[0, 1]`: the rules grow out and
+     * the wash fades up as it climbs, while every line's out-of-region stretch
+     * fades to the theme's `region.dimOpacity`.
+     */
+    readonly regionReveal: 0;
+    /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
+    readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    /**
+     * The domain `zoomTo` first left, so `resetZoom` restores the chart as it
+     * stood, auto-derived ticks included. Cleared by `resetZoom`, so the next zoom
+     * remembers wherever the chart rests then.
+     */
+    readonly home: import("@motionscript/sdk").Type<LineChartDomains | null, LineChartDomains | null, false>;
+}>, readonly [], import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    readonly xField: "";
+    readonly series: import("@motionscript/sdk").Type<import("../index.js").ChartSeries[], import("../index.js").ChartSeries[], false>;
+    readonly xAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
+    readonly yAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
+    readonly theme: import("@motionscript/sdk").Type<ChartTheme, ChartConfig, false>;
+    /**
+     * The spotlit slice of the plot in data units, or `null` for none. The box
+     * snaps; the animation is {@link regionReveal} drawing the rules on.
+     */
+    readonly region: import("@motionscript/sdk").Type<PlotRegion | null, PlotRegion | null, false>;
+    /**
+     * How far the `region` call-out is drawn in, `[0, 1]`: the rules grow out and
+     * the wash fades up as it climbs, while every line's out-of-region stretch
+     * fades to the theme's `region.dimOpacity`.
+     */
+    readonly regionReveal: 0;
+    /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
+    readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    /**
+     * The domain `zoomTo` first left, so `resetZoom` restores the chart as it
+     * stood, auto-derived ticks included. Cleared by `resetZoom`, so the next zoom
+     * remembers wherever the chart rests then.
+     */
+    readonly home: import("@motionscript/sdk").Type<LineChartDomains | null, LineChartDomains | null, false>;
+}>, {
+    readonly enter: {};
+    readonly spotlightRegion: {
+        readonly region: import("@motionscript/sdk").Type<PlotRegion | undefined, PlotRegion | undefined, false>;
+    };
+    readonly clearRegion: {};
+    readonly zoomTo: {
+        readonly region: import("@motionscript/sdk").Type<PlotRegion | undefined, PlotRegion | undefined, false>;
+    };
+    readonly resetZoom: {};
+    readonly showSeries: {
+        readonly seriesIndex: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly hideSeries: {
+        readonly seriesIndex: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly spotlightSeries: {
+        readonly seriesIndex: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, Node2D<Node2DProps>>>>;
+export type LineChart = NodeOf<typeof LineChart>;
+//# sourceMappingURL=line-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../src/line-chart/line-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,UAAU,EAEf,KAAK,MAAM,EAEX,KAAK,MAAM,EACX,KAAK,WAAW,EAIjB,MAAM,mBAAmB,CAAA;AAU1B,OAAO,EAWL,KAAK,gBAAgB,EACrB,KAAK,KAAK,EACX,MAAM,eAAe,CAAA;AAItB,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,UAAU,EAEhB,MAAM,UAAU,CAAA;AAGjB,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,kEAAkE;IAClE,IAAI,EAAE,UAAU,EAAE,CAAA;IAClB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAA;IACd,oFAAoF;IACpF,MAAM,EAAE,UAAU,EAAE,CAAA;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,+DAA+D;AAC/D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,CAAC,EAAE,gBAAgB,GAAG;QAAE,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAClF,QAAQ,CAAC,CAAC,EAAE,gBAAgB,GAAG;QAAE,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;CACnF;AAED,uDAAuD;AACvD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,CAAA;IAC7B,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAA;IAChC,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAA;CACjC;AA4ED,+FAA+F;AAC/F,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAYrE;AAoGD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS;;;;;;;IASlB;;;OAGG;;IAEH;;;;OAIG;;IAEH,oFAAoF;;IAEpF;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAjBH;;;OAGG;;IAEH;;;;OAIG;;IAEH,oFAAoF;;IAEpF;;;;OAIG;;;;;;;;;IAjBH;;;OAGG;;IAEH;;;;OAIG;;IAEH,oFAAoF;;IAEpF;;;;OAIG;;;;;;;;;;;;;;;;;;;;;yBA4PL,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}