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

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 {\n  command,\n  Node2D,\n  Rect,\n  Text,\n  easeOut,\n  property,\n  insetsOps,\n  textOps,\n  type CommandArgs,\n  type NodeConfig,\n  type Node2DProps,\n} from \"@motionscript/core\";\n\nimport {\n  DEFAULT_X_AXIS,\n  enterBudget,\n  formatMarker,\n  type AxisConfig,\n  type Range,\n} from \"../kit/shared\";\nimport { at, compose, type Seekable } from \"@motionscript/core/component\"\n\nexport interface HorizontalAxisProps extends Node2DProps {\n  /** `[min, max]` of the horizontal scale the markers are positioned within. */\n  range: Range;\n  /** Tick values (in data units) to draw along the axis. */\n  markers: number[];\n  /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */\n  axis: AxisConfig;\n  /**\n   * Caption drawn centred in the gutter beneath the marker row. Empty string\n   * (the default) hides it.\n   */\n  label: string;\n}\n\n/** How far a marker starts above its slot when it enters, in px. */\nconst SLIDE = 24;\n\n/** How a tick value is captioned — see {@link HorizontalAxis.labelFor}. */\nexport type MarkerLabel = (value: number) => string;\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; see {@link labelFor}.\n *\n * {@link 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 class HorizontalAxis extends Node2D<HorizontalAxisProps> {\n  @property({ default: () => [0, 1] as Range }) declare range: Range;\n  @property({ default: () => [] as number[] }) declare markers: number[];\n  @property({ default: DEFAULT_X_AXIS }) declare axis: AxisConfig;\n  @property({ default: \"\" }) declare label: string;\n\n  /**\n   * How a tick value is captioned. Defaults to the numeric formatting the\n   * vertical axis uses; a chart whose x column names months or categories\n   * replaces it (see `x-scale.ts`).\n   *\n   * A plain field rather than a `@property`, because it is a **policy, not a\n   * value**: there is nothing to tween between two formatters, and a signal\n   * holding a function is a signal every `set`/`to` on this node would have to\n   * know not to touch. Read inside each marker's `text` binding, so replacing it\n   * before the first frame is enough — which is when the chart does it.\n   */\n  labelFor: MarkerLabel = formatMarker;\n\n  /** One text node per marker, ordered left → right, for the staggered enter. */\n  private markerNodes: Text[] = [];\n  /** The caption node, or null when `label` is empty. */\n  private labelNode: Text | null = null;\n\n  /** The live tick values, left → right — re-read every frame, not snapshotted. */\n  private get sortedMarkers(): number[] {\n    return [...this.markers].sort((a, b) => a - b);\n  }\n\n  private valueAt(index: number): number | undefined {\n    return this.sortedMarkers[index];\n  }\n\n  /** Tick `i`'s fraction across the live `range`, 0 at the left edge. */\n  private fracAt(index: number): number {\n    const v = this.valueAt(index);\n    if (v === undefined) return 0;\n    const [min, max] = this.range;\n    return max <= min ? 0 : (v - min) / (max - min);\n  }\n\n  constructor(props?: NodeConfig<HorizontalAxis, HorizontalAxisProps>) {\n    super(props);\n\n    const tickPad = insetsOps.resolve(this.axis.tickPadding).top;\n    const titlePad = insetsOps.resolve(this.axis.titlePadding).top;\n\n    this.markerNodes = this.markers.map((_, i) => {\n      const marker: Text = new Text({\n        ...textOps.styleProps(this.axis.labelStyle),\n        text: () => {\n          const v = this.valueAt(i);\n          return v === undefined ? \"\" : this.labelFor(v);\n        },\n        x: () => {\n          const width = this.layoutBounds.width;\n          const centred = (this.fracAt(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      });\n      return marker;\n    });\n\n    const children: Node2D[] = [\n      new Rect({\n        width: \"fill\",\n        height: \"hug\",\n        padding: { top: tickPad },\n        children: this.markerNodes,\n      }),\n    ];\n    if (this.label !== \"\") {\n      this.labelNode = new Text({\n        ...textOps.styleProps(this.axis.titleStyle),\n        text: this.label,\n      });\n      children.push(this.labelNode);\n    }\n\n    this.add(\n      new Rect({ flow: \"vertical\", gap: titlePad, height: \"hug\", width: \"fill\", children }),\n    );\n  }\n\n  /**\n   * Primes every marker (and the caption) at its pre-entrance state: lifted\n   * above its slot and transparent. Idempotent — see {@link VerticalAxis.arm}.\n   */\n  arm(slide = SLIDE): void {\n    for (const marker of this.markerNodes) marker.set({ opacity: 0, y: slide });\n    this.labelNode?.set({ opacity: 0, y: slide });\n  }\n\n  /**\n   * Stagger the markers in left to right, then slide the caption in after them.\n   *\n   * A {@link Seekable} rather than a generator. The offsets were always static —\n   * `i * step` per marker — but expressed as `wait` inside a generator they only\n   * existed while it ran, so knowing what the axis looked like partway through\n   * meant running it from zero. Placed explicitly, the same stagger can be asked\n   * for a time, which is what lets a chart scene scrub in constant time.\n   *\n   * `duration` is the **whole** entrance — see {@link VerticalAxis.enter} and\n   * {@link enterBudget}.\n   */\n  @command()\n  enter(\n    args: CommandArgs<{ stagger?: number; slide?: number }> & { duration: number },\n  ): Seekable {\n    const { stagger, slide = SLIDE } = args.data ?? {};\n    const duration = args.duration;\n    const easing = args.easing ?? easeOut();\n    const nodes = this.markerNodes;\n    if (nodes.length === 0) return compose([]);\n    const { step, per, caption } = enterBudget(\n      duration,\n      nodes.length,\n      this.labelNode !== null,\n      stagger,\n    );\n\n    this.arm(slide);\n\n    // Left marker leads: markerNodes is already left → right.\n    const markers = nodes.map((node, i) =>\n      at(i * step, node.to({ data: { opacity: 1, y: 0 }, duration: per, easing })),\n    );\n    const lastMarkerEnds = nodes.length === 0 ? 0 : (nodes.length - 1) * step + per;\n\n    return compose([\n      ...markers,\n      ...(this.labelNode\n        ? [at(lastMarkerEnds, this.labelNode.to({ data: { opacity: 1, y: 0 }, duration: caption, easing }))]\n        : []),\n    ]);\n  }\n}\n"]}
+{"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

@@ -6,12 +6,12 @@
  * (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 `ms add line-chart` copies. Everything they reach for
+ * 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 } 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

@@ -6,11 +6,11 @@
  * (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 `ms add line-chart` copies. Everything they reach for
+ * 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 } 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":["/**\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 `ms add line-chart` copies. 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 } from \"./line-chart\"\nexport type { LineChartProps } 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"]}
+{"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

@@ -1,7 +1,6 @@
-import { Node2D, type Command, type CommandArgs, type DataRecord, type NodeConfig, type Node2DProps } from "@motionscript/core";
-import { type AxisDomainConfig } from "../kit/shared.js";
-import { type ChartTheme, type LineSeries, type PlotRegion } from "./shared.js";
-import { type Seekable } from "@motionscript/core/component";
+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[];
@@ -19,8 +18,8 @@ export interface LineChartProps extends Node2DProps {
     /**
      * A slice of the plot to spotlight, in **data units**. Dashed rules mark the
      * bounded edges and every series fades outside the box — see
-     * {@link LineChart.spotlightRegion}, which animates the same thing. `null`
-     * (the default) is no region.
+     * `spotlightRegion`, which animates the same thing. `null` (the default) is no
+     * region.
      */
     region?: PlotRegion | null;
     /**
@@ -32,18 +31,27 @@ export interface LineChartProps extends Node2DProps {
     /** Whether the legend row below the plot is drawn at all. */
     showLegend?: boolean;
 }
-/**
- * The two signals the region call-out is made of, as a props type for the
- * commands that move them.
- *
- * Written out rather than reusing `LineChartProps` because the pair is what
- * those commands actually touch, and because `regionReveal` is a signal of the
- * chart's own rather than part of its authored props.
- */
-type RegionState = {
-    region: PlotRegion | null;
-    regionReveal: number;
-};
+/** 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:
@@ -56,292 +64,137 @@ type RegionState = {
  * - {@link ChartLine} (one per series) — the traced polylines over the canvas.
  * - {@link ChartLegend} — a row of entries below the chart, one per series.
  *
- * The parts are laid out from this node's `layoutBounds`: a left gutter for the
- * vertical axis, a bottom gutter for the horizontal axis, the plot filling
- * what's left, and the legend row beneath the whole chart. Every child's
- * position/size is bound reactively, so the chart re-flows if its box changes,
- * and the series lines read the same resolved scales as the axes, so points land
- * exactly on their markers.
+ * 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.** Unlike the standalone component this
- * was ported from, nothing is built hidden: the studio paints a node's Initial
- * state on a paused canvas, and a chart that only appeared once a command had
- * run would be edited blind. {@link enter} arms every part back to its
- * pre-entrance state before animating, so the entrance itself is unchanged.
+ * **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, three things move the chart around:
- * {@link showSeries}/{@link hideSeries}/{@link spotlightSeries} pick out a
- * *series*, {@link spotlightRegion} marks a *slice of the plot* without changing
- * the scale, and {@link zoomTo} rescales the axes so a slice fills the plot. The
- * last two take the same {@link PlotRegion} and compose — a spotlit region
- * resolves against the live scales, so it travels with a zoom.
+ * 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 class LineChart extends Node2D<LineChartProps> {
-    data: DataRecord[];
-    xField: string;
-    series: LineSeries[];
-    /**
-     * X/Y-axis data domain (label/range/ticks), tweenable and mappable like
-     * `theme`: the mapper merges a partial input onto the previous resolved
-     * domain (leaving `range`/`ticks` `undefined` — the auto-derive signal — on
-     * first resolution), and the tween interpolates them numerically, so
-     * `chart.to({ yAxis: { range: [0, 10] } }, 1)` smoothly rescales the plotted
-     * lines. Like `theme`, the axis *label* text is captured once at construction.
-     */
-    xAxis: AxisDomainConfig;
-    yAxis: AxisDomainConfig;
-    /**
-     * The chart's visual theme, tweenable and mappable like a `stroke`/`fill`
-     * prop: the mapper merges the author's partial input onto the previous
-     * resolved theme (or {@link DEFAULT_CHART_THEME} the first time) and resolves
-     * every leaf; the tween interpolates two resolved themes leaf-by-leaf, so
-     * `chart.to({ theme: next }, 1)` animates smoothly.
-     */
-    theme: ChartTheme;
-    /**
-     * The spotlit slice of the plot in data units, or `null` for none. Held as a
-     * plain reactive value rather than a tweened one: the box itself snaps, and
-     * the *animation* is {@link regionReveal} drawing the rules on and the lines
-     * dimming outside it.
-     */
-    region: PlotRegion | null;
-    /**
-     * How far the {@link region} call-out is drawn in, `[0, 1]` — the single
-     * signal behind both halves of the effect: the rules grow out and the wash
-     * fades up as it climbs, while every line's out-of-region stretch fades from
-     * full down to the theme's `region.dimOpacity`. At 0 a chart with a `region`
-     * set looks exactly like one without.
-     */
-    regionReveal: number;
-    /**
-     * Read once, in the constructor, like `series`: the legend is a part the
-     * chart builds or doesn't, so a change reaches it by rebuilding the node.
-     */
-    showLegend: boolean;
-    private vAxis;
-    private hAxis;
-    /** The plot panel — the box the grid, the lines and the region all share. */
-    private plotRect;
-    private legend;
-    private lines;
-    /**
-     * `this.theme` read back through its *resolved* shape: the property's declared
-     * type is the loose author-facing {@link ChartTheme} (so a partial theme is
-     * accepted), but the mapper always stores the fully-resolved
-     * {@link ChartConfig} at runtime — the same loose-declared/resolved-stored
-     * idiom as a shape's `fill`/`stroke`.
-     */
-    private get resolvedTheme();
-    /** Fallback marker count when neither axis's ticks are given. */
-    private static readonly DEFAULT_MARKERS;
-    /**
-     * What the x column *is* — a number, an instant, or a place in the file — and
-     * with it how each row is positioned, ticked and captioned. See `x-scale.ts`.
-     */
-    private get xColumn();
-    private get xScale();
-    private get yScale();
-    /** The vertical axis ticks: the explicit ones, else five across the scale. */
-    private get resolvedYMarkers();
-    /**
-     * The horizontal axis ticks: the explicit ones, else five across the scale.
-     *
-     * Asked of the column rather than spaced evenly, because only a numeric column
-     * has round numbers between its samples. On a month column, five evenly spaced
-     * values land two-thirds of the way through four different months; the ticks
-     * a reader wants are Jan/Apr/Jul/Oct/Dec, which are rows.
-     */
-    private get resolvedXMarkers();
-    /**
-     * The plot panel's size, **as laid out**.
-     *
-     * This used to be computed: six constants estimating what the axis gutters and
-     * the legend row would take, subtracted from the node's box. The estimate was
-     * never the layout — the vertical axis is `width: "hug"`, so its real width is
-     * whatever its widest marker needs — and everything downstream inherited the
-     * gap. The grid is drawn by {@link ChartCanvas} across its *own* allocation,
-     * while the lines were mapped across the estimate, so a series sat a few
-     * percent off the grid line it was supposed to touch, silently and by an
-     * amount that changed with the theme.
-     *
-     * Asking the panel is exact by construction and cannot drift: the lines, the
-     * region rules and the grid all resolve against one box, and it is the box
-     * they are drawn in. Zero until the first layout pass, like any other
-     * `layoutBounds` read — the bindings that call this re-run on the next frame.
-     */
-    private plotSize;
-    /**
-     * Map one series' data points into the plot's **centred** pixel space (origin
-     * at the plot centre, y-up) — the local frame of the clip/line box that fills
-     * the plot. x runs `[-w/2, +w/2]`, y runs `[-h/2, +h/2]`.
-     */
-    private seriesPixels;
-    /**
-     * {@link region} mapped into the plot's **centred** pixel space — the same
-     * frame {@link seriesPixels} returns, so the region's rules and each line's
-     * clip resolve against one box from one place. Reads the live scales, so it
-     * re-maps when `xAxis`/`yAxis` tween.
-     */
-    /**
-     * Whether a call-out is authored at all — the question {@link enter} and
-     * {@link spotlightRegion} branch on.
-     *
-     * Deliberately **not** `hasRegion(this.regionBox())`, which they used to ask.
-     * That resolves the region into pixels, so it answers "and has the chart been
-     * laid out yet" as well, and comes back false for a perfectly real region on a
-     * chart that has not been measured. A generator never noticed, because it only
-     * ever ran mid-playback; a command is *built* before the first layout pass, and
-     * would have quietly dropped the region beat every time.
-     *
-     * What is left once the pixels are taken out is the same test
-     * {@link resolveRegionBox} applies before it maps anything: a region bounding
-     * *neither* axis is not a call-out, so `{}` counts as none exactly as `null`
-     * does.
-     */
-    private hasCallout;
-    private regionBox;
-    constructor(props?: NodeConfig<LineChart, LineChartProps>);
-    /**
-     * Prime every part at its pre-entrance state — axis markers shifted and
-     * transparent, lines untraced, legend dropped and transparent.
-     *
-     * Called by {@link enter} before its first frame so nothing flashes ahead of
-     * its beat. Idempotent, and public so a scene can hide a chart ahead of time
-     * without starting the entrance.
-     */
-    arm(): void;
-    /**
-     * Animate the whole chart in: the two axes stagger their markers in (vertical
-     * bottom-to-top, horizontal left-to-right), the series lines trace
-     * left-to-right, and the legend fades up last.
-     *
-     * `duration` is the **whole** entrance. The phases below are shares of it, not
-     * multiples — a command that declares 1.4 seconds has to take 1.4 seconds,
-     * because that is the slot the timeline lays out for it, the length its
-     * parallel siblings are timed against, and its contribution to the scene's own
-     * duration. (The component this was ported from scaled every phase *off* the
-     * line trace and let the total fall where it may, which came out around 3×.)
-     *
-     * A chart authored with a `region` lands its call-out last, over lines that
-     * have already traced — the same order a scene would get by calling
-     * {@link spotlightRegion} right after this — and that beat comes out of the
-     * same budget.
-     */
-    enter(args: CommandArgs<Record<string, never>> & {
-        duration: number;
-    }): Seekable;
-    /**
-     * Spotlight a rectangular slice of the plot given in **data units**: dashed
-     * rules draw themselves onto each bounded edge while every series fades
-     * outside the box and stays full inside it.
-     *
-     * Either axis alone is a band — `{ x: [80, 100] }` picks out the last fifth
-     * across all series, `{ y: [8, 10] }` a value band across the whole width —
-     * and both together a box. The unbounded axis spans the plot and draws no
-     * rule, since there's no data bound there to mark.
-     *
-     * Calling it while another region is already up cross-fades: the old call-out
-     * retracts, then the new one draws in, each over half `duration`.
-     *
-     * Both the call-out's shape and its draw-on are plain signals — `region` and
-     * {@link regionReveal} — so the whole thing is a function of `t`, including
-     * the swap: which region is up is a step at the halfway point rather than an
-     * effect that has to have happened.
-     */
-    spotlightRegion(args: CommandArgs<{
-        region: PlotRegion;
-    }> & {
-        duration?: number;
-    }): Command<RegionState>;
-    /**
-     * Drop the region call-out — the rules retract, the wash fades, and every
-     * series comes back to full across its whole length. A no-op when nothing is
-     * spotlit.
-     */
-    clearRegion(args?: CommandArgs<Record<string, never>> & {
-        duration?: number;
-    }): Command<RegionState>;
-    /**
-     * The domain to come back to, captured the first time {@link zoomTo} runs so a
-     * later {@link resetZoom} restores the chart as authored — including ticks
-     * that were auto-derived rather than given, which the props alone don't
-     * record. Cleared by {@link resetZoom}, so a second zoom captures wherever the
-     * chart genuinely rests then.
-     */
-    private home;
-    /**
-     * The `region` a document handed a command, or `{}`. A command is added
-     * before its arguments are filled in, so an unstated region is ordinary input
-     * rather than a malformed one.
-     */
-    private static regionArg;
-    /** A range read as a span, whichever way round the author wrote it. */
-    private static span;
-    /**
-     * Rescale an axis to `range`, keeping the tick *count* it already has — the
-     * axis tween interpolates ticks pairwise by index, so a constant count lets
-     * each marker slide from its old value to its new one instead of the row
-     * popping.
-     */
-    private static rescale;
-    /**
-     * Zoom the plot to a slice of itself, given in **data units**: the named axes
-     * rescale so that slice fills the plot, the grid and both marker rows
-     * following the new scale, and every series re-tracing itself into the new
-     * frame. All of it tweens, so the move reads as a camera push rather than a
-     * cut.
-     *
-     * An **omitted axis is left as it is** rather than being fitted to what's
-     * visible — so a zoom is exactly what was asked for, and two calls compose
-     * predictably. A spotlit region, if one is up, follows the zoom: it resolves
-     * against the same live scales, so its rules stay on their data bounds.
-     */
-    zoomTo(args: CommandArgs<{
-        region: PlotRegion;
-    }> & {
-        duration?: number;
-    }): Seekable;
-    /**
-     * Pull back out to the domain the chart was authored with — the mirror of
-     * {@link zoomTo}, and a no-op if it was never zoomed.
-     */
-    resetZoom(args?: CommandArgs<Record<string, never>> & {
-        duration?: number;
-    }): Seekable;
-    /**
-     * Show series `index`: **trace** its line in left-to-right — the same draw as
-     * {@link enter}, not an opacity fade — in lockstep with its legend entry
-     * growing in.
-     *
-     * `enabled` is set as part of the command's own value rather than before it,
-     * so the line is drawable for every `t` the trace covers and undrawn outside
-     * it — which is what makes arriving here backwards show the same thing as
-     * arriving forwards.
-     */
-    showSeries(args: CommandArgs<{
-        seriesIndex: number;
-    }> & {
-        duration?: number;
-    }): Seekable;
-    /**
-     * Hide series `index`: **retrace** its line back out (`progress` 1 → 0) as its
-     * legend entry shrinks away — the mirror of {@link showSeries}.
-     */
-    hideSeries(args: CommandArgs<{
-        seriesIndex: number;
-    }> & {
-        duration?: number;
-    }): Seekable;
-    /**
-     * Fade out all other series — each line **and its legend entry** — to focus
-     * attention on `index`, which comes back to full. The legend dims in place
-     * (opacity only), so no entry moves and the row doesn't reflow.
-     */
-    spotlightSeries(args: CommandArgs<{
-        seriesIndex: number;
-    }> & {
-        duration?: number;
-    }): Seekable;
-}
-export {};
+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