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

package/src/kit/vertical-axis.ts

@@ -0,0 +1,194 @@
+import {
+  Rect,
+  RotatedBox,
+  Text,
+  Types,
+  component2d,
+  insetsOps,
+  textOps,
+  type NodeOf,
+  type Node2D,
+  type Node2DProps,
+} from "@motionscript/sdk"
+
+import { asParts, fresh } from "./entries"
+import { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase, type Arrival } from "./motion"
+import {
+  DEFAULT_Y_AXIS,
+  enterBudget,
+  formatMarker,
+  type AxisConfig,
+  type Range,
+} from "./shared"
+
+export interface VerticalAxisProps extends Node2DProps {
+  /** `[min, max]` of the vertical scale the markers are positioned within. */
+  range: Range
+  /**
+   * Tick values (in data units) to draw up the axis, each placed by its fraction
+   * across {@link VerticalAxisProps.range}. Need not be evenly spaced or include
+   * 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
+  /**
+   * Rotated caption drawn in the gutter to the left of the marker column. Empty
+   * string (the default) hides it — no caption node is built and no label gutter
+   * is reserved.
+   */
+  label: string
+}
+
+/** How far a marker starts to the right of its slot when it enters, in px. */
+const SLIDE = 24
+
+/** 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 function markerCaption(s: { readonly markers: readonly number[]; readonly captions: readonly string[] }, value: number): string {
+  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
+ * value at the top). Pure layout — no `Graphics` — so the markers are real text
+ * nodes the scene can measure, restyle, or animate individually.
+ *
+ * Each marker is positioned so its centre lands exactly on its value's fraction
+ * across `range` within the axis's filled height, so unevenly-spaced markers
+ * land where their values fall. Both the caption and the position are *bound*,
+ * not snapshotted: a chart that rescales its axes (see `LineChart.zoomTo`)
+ * tweens `range`/`markers` live. Only the marker **count** is fixed at
+ * construction.
+ *
+ * `enter` staggers them in **bottom-to-top**: each marker starts pushed a
+ * little to the right and transparent, then fades and slides left into place.
+ * The resting state is the landed one, so a chart that is never told to enter
+ * still reads as a finished chart.
+ */
+export const VerticalAxis = component2d({
+  key: "verticalAxis",
+  state: {
+    range: fresh<Range>(() => [0, 1]),
+    markers: fresh<number[]>(() => []),
+    captions: fresh<string[]>(() => []),
+    axis: Types.custom<AxisConfig>(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: Node2D[] = []
+    // The row's parent is the axis: its box is what the markers are placed in.
+    const box = () => (row[0]?.parent as Node2D | null | undefined)?.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: number | undefined) => {
+      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: Node2D = new Text({
+        ...textOps.styleProps(state.axis.labelStyle),
+        text: () => {
+          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 = box().height
+          const centred = (fracAt(sorted()[i]) - 0.5) * height
+          // Held inside the axis's top edge — the backstop for a chart whose
+          // headroom is smaller than its marker text is tall, which a theme with
+          // much larger markers can arrange. Only the top, because what lies
+          // below the axis is the chart's own horizontal axis and legend.
+          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: Node2D[] = []
+    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: 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: 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<number | undefined>(undefined),
+        slide: Types.number(SLIDE),
+      },
+      run: (timeline, state) => {
+        const { stagger, slide } = timeline.args
+        const count = state.markers.length
+        const captioned = state.label !== ""
+        const from: Arrival = { 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])])
+      },
+    },
+  },
+})
+
+export type VerticalAxis = NodeOf<typeof VerticalAxis>

package/src/line-chart/chart-line.ts

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

package/src/line-chart/chart-region.ts

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

package/src/line-chart/horizontal-axis.ts

@@ -0,0 +1,151 @@
+import {
+  Rect,
+  Text,
+  Types,
+  component2d,
+  insetsOps,
+  textOps,
+  type NodeOf,
+  type Node2D,
+} from "@motionscript/sdk";
+
+import { asParts, fresh } from "../kit/entries";
+import { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase, type Arrival } from "../kit/motion";
+import {
+  DEFAULT_X_AXIS,
+  enterBudget,
+  type AxisConfig,
+  type Range,
+} from "../kit/shared";
+import { markerCaption } from "../kit/vertical-axis";
+
+/** 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<Range>(() => [0, 1]),
+    /** Tick values (in data units) to draw along the axis. */
+    markers: fresh<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 whose x column names months or categories writes those.
+     */
+    captions: fresh<string[]>(() => []),
+    /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
+    axis: Types.custom<AxisConfig>(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: Node2D[] = [];
+    // The column's parent is the axis: its box is what the markers are placed in.
+    const box = () => (column[0]?.parent as Node2D | null | undefined)?.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: number | undefined) => {
+      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: Node2D = 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: Node2D[] = [
+      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<number | undefined>(undefined),
+        slide: Types.number(SLIDE),
+      },
+      run: (timeline, state) => {
+        const { stagger, slide } = timeline.args;
+        const count = state.markers.length;
+        const captioned = state.label !== "";
+        const from: Arrival = { 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])]);
+      },
+    },
+  },
+});
+
+export type HorizontalAxis = NodeOf<typeof HorizontalAxis>;

package/src/line-chart/index.ts

@@ -0,0 +1,39 @@
+/**
+ * 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"
+export type { LineChartDomains, LineChartProps, LineChartValues } from "./line-chart"
+export { ChartRegion } from "./chart-region"
+export { ChartLine } from "./chart-line"
+export { HorizontalAxis } from "./horizontal-axis"
+export {
+  DEFAULT_CHART_THEME,
+  EMPTY_REGION_BOX,
+  clipPolylineToBox,
+  hasRegion,
+  lerpChartTheme,
+  resolveChartTheme,
+  resolveRegionBox,
+  resolveYScale,
+  seriesPoints,
+  yExtent,
+} from "./shared"
+export type {
+  ChartConfig,
+  ChartTheme,
+  LineSeries,
+  PlotRegion,
+  RegionBox,
+  RegionConfig,
+} from "./shared"
+export { formatInstant, parseInstant, resolveXScale } from "./x-scale"
+export type { XScale, XScaleKind } from "./x-scale"