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

package/src/bar-chart/category-axis.ts

@@ -1,24 +1,23 @@
 import {
-  command,
-  Node2D,
   Rect,
   Text,
-  easeOut,
-  property,
+  Types,
+  component2d,
   insetsOps,
   textOps,
-  type CommandArgs,
-  type NodeConfig,
+  type NodeOf,
+  type Node2D,
   type Node2DProps,
 } 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,
   clampUnit,
   enterBudget,
   type AxisConfig,
 } from "../kit/shared"
-import { at, compose, hold, type Seekable } from "@motionscript/sdk/component"
 
 export interface CategoryAxisProps extends Node2DProps {
   /** One caption per category slot, left to right — the chart's rows, in order. */
@@ -57,121 +56,107 @@ const SLIDE = 24
  * invisible twin of the value axis, as the line chart does), so a caption lands
  * under the columns it names without either side being told about the other.
  *
- * {@link enter} staggers the captions in left-to-right, each lifted a little
- * above its slot and transparent; the resting state is the landed one, so a
- * chart that is never told to enter still reads as finished.
+ * `enter` staggers the captions in left-to-right, each lifted a little above
+ * its slot and transparent; the resting state is the landed one, so a chart
+ * that is never told to enter still reads as finished.
  */
-export class CategoryAxis extends Node2D<CategoryAxisProps> {
-  @property({ default: () => [] as string[] }) declare categories: string[]
-  @property({ default: DEFAULT_X_AXIS }) declare axis: AxisConfig
-  @property({ default: "" }) declare label: string
-  @property({ default: () => [] as number[] }) declare dims: number[]
+export const CategoryAxis = component2d({
+  key: "categoryAxis",
+  state: {
+    categories: fresh<string[]>(() => []),
+    axis: Types.custom<AxisConfig>(DEFAULT_X_AXIS),
+    label: "",
+    dims: fresh<number[]>(() => []),
+    arrivals: arrivalsEntry(),
+  },
+  // A plain node filled its parent; one made of its captions 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
 
-  /** One caption per category, ordered left → right, for the staggered enter. */
-  private captionNodes: Text[] = []
-  /** The axis title, or null when `label` is empty. */
-  private labelNode: Text | null = null
-
-  /** Centre x of slot `i`, in the node's centred space. */
-  private slotCenter(index: number): number {
-    const n = this.categories.length
-    if (n <= 0) return 0
-    const width = this.layoutBounds.width
-    return -width / 2 + (width / n) * (index + 0.5)
-  }
-
-  constructor(props?: NodeConfig<CategoryAxis, CategoryAxisProps>) {
-    super(props)
-
-    const tickPad = insetsOps.resolve(this.axis.tickPadding).top
-    const titlePad = insetsOps.resolve(this.axis.titlePadding).top
+    const column: Node2D[] = []
+    // The column's parent is the axis: its box is what the slots divide.
+    const width = () => (column[0]?.parent as Node2D | null | undefined)?.layoutBounds.width ?? 0
+    /** Centre x of slot `i`, in the node's centred space. */
+    const slotCenter = (index: number) => {
+      const n = state.categories.length
+      if (n <= 0) return 0
+      return -width() / 2 + (width() / n) * (index + 0.5)
+    }
 
     // Each caption sits in a hug box carrying the spotlight dim, so the
     // entrance can animate the text's own opacity without the two fighting over
     // one value — opacity multiplies down the tree, which is exactly the
     // composition wanted here.
-    const slots = this.categories.map((caption, i) => {
-      const text = new Text({
-        ...textOps.styleProps(this.axis.labelStyle),
-        text: caption,
-      })
-      this.captionNodes.push(text)
-      return new Rect({
+    const slots = state.categories.map((caption, i) =>
+      new Rect({
         width: "hug",
         height: "hug",
         flow: "freeform",
-        opacity: () => clampUnit(this.dims[i] ?? 1),
-        x: () => this.slotCenter(i),
-        children: [text],
+        opacity: () => clampUnit(state.dims[i] ?? 1),
+        x: () => slotCenter(i),
+        children: [
+          new Text({
+            ...textOps.styleProps(state.axis.labelStyle),
+            text: caption,
+            opacity: () => arrivalOf(state.arrivals, i).opacity,
+            y: () => arrivalOf(state.arrivals, i).shift,
+          }),
+        ],
       })
-    })
+    )
 
-    const children: Node2D[] = [
-      new Rect({
-        width: "fill",
-        height: "hug",
-        padding: { top: tickPad },
-        children: slots,
-      }),
-    ]
-    if (this.label !== "") {
-      this.labelNode = new Text({
-        ...textOps.styleProps(this.axis.titleStyle),
-        text: this.label,
-      })
-      children.push(this.labelNode)
+    const children: Node2D[] = [new Rect({ width: "fill", height: "hug", padding: { top: tickPad }, children: slots })]
+    if (state.label !== "") {
+      children.push(
+        new Text({
+          ...textOps.styleProps(state.axis.titleStyle),
+          text: state.label,
+          opacity: () => arrivalOf(state.arrivals, "label").opacity,
+          y: () => arrivalOf(state.arrivals, "label").shift,
+        })
+      )
     }
 
-    this.add(new Rect({ flow: "vertical", gap: titlePad, height: "hug", width: "fill", children }))
-  }
+    column.push(new Rect({ flow: "vertical", gap: titlePad, height: "hug", width: "fill", children }))
+    return asParts(column)
+  },
+  commands: {
+    /**
+     * Slide + fade every caption in from above, staggered left-to-right, then
+     * bring the title down behind them. Its first frame arms them all: lifted
+     * by `slide` and transparent.
+     *
+     * The timeline's duration is the **whole** entrance — the stagger and the
+     * title are carved out of it rather than added on top. See {@link enterBudget}.
+     *
+     * `stagger` is seconds between successive captions (derived when omitted);
+     * `slide` is the starting upward offset in px (node space is y-up, so a
+     * positive start slides *down* into place).
+     */
+    enter: {
+      args: {
+        stagger: Types.custom<number | undefined>(undefined),
+        slide: Types.number(SLIDE),
+      },
+      run: (timeline, state) => {
+        const { stagger, slide } = timeline.args
+        const count = state.categories.length
+        const captioned = state.label !== ""
+        const from: Arrival = { opacity: 0, shift: slide }
+        const keys = [...state.categories.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)
+        const lastCaptionEnds = (count - 1) * step + per
+        const captions = state.categories.map((_, i) => ({ at: i * step, duration: per, piece: arrival(timeline, i, from, ease) }))
+        const label = captioned ? [{ at: lastCaptionEnds, duration: caption, piece: arrival(timeline, "label", from, ease) }] : []
+        return timeline.together([arm, beats(timeline, [...captions, ...label])])
+      },
+    },
+  },
+})
 
-  /**
-   * Primes every caption (and the title) at its pre-entrance state: lifted above
-   * its slot and transparent. Idempotent, so the chart can arm its whole
-   * composition before the first frame is drawn.
-   */
-  arm(slide = SLIDE): void {
-    for (const caption of this.captionNodes) caption.set({ opacity: 0, y: slide })
-    this.labelNode?.set({ opacity: 0, y: slide })
-  }
-
-  /**
-   * Slide + fade every caption in from above, staggered left-to-right, then
-   * bring the title down behind them.
-   *
-   * `args.duration` is the **whole** entrance — the stagger and the title are
-   * carved out of it rather than added on top. See {@link enterBudget}.
-   *
-   * `args.data.stagger` is seconds between successive captions (derived when
-   * omitted); `args.data.slide` is the starting upward offset in px (node space
-   * is y-up, so a positive start slides *down* into place).
-   */
-  @command()
-  enter(args: CommandArgs<{ stagger?: number; slide?: number }> & { duration: number }): Seekable {
-    const { stagger, slide = SLIDE } = args.data ?? {}
-    const easing = args.easing ?? easeOut()
-    const nodes = this.captionNodes
-    if (nodes.length === 0) return hold(args.duration)
-    const { step, per, caption } = enterBudget(
-      args.duration,
-      nodes.length,
-      this.labelNode !== null,
-      stagger
-    )
-
-    this.arm(slide)
-
-    // The stagger was `wait(i * step)` inside a generator, so its offsets only
-    // existed while it ran. They were always `i * step`; placed, the same
-    // entrance can be asked what it looks like partway through.
-    const lastCaptionEnds = (nodes.length - 1) * step + per
-    return compose([
-      ...nodes.map((node, i) =>
-        at(i * step, node.to({ data: { opacity: 1, y: 0 }, duration: per, easing }))
-      ),
-      ...(this.labelNode
-        ? [at(lastCaptionEnds, this.labelNode.to({ data: { opacity: 1, y: 0 }, duration: caption, easing }))]
-        : []),
-    ])
-  }
-}
+export type CategoryAxis = NodeOf<typeof CategoryAxis>

package/src/bar-chart/chart-bars.ts

@@ -1,21 +1,18 @@
 import {
-  command,
-  type AssetScope,
   Graphics2D,
-  Node2D,
   Text,
-  easeOut,
+  Types,
+  component2d,
   fillOps,
   shadowOps,
   strokeOps,
-  property,
   textOps,
-  type Command,
-  type CommandArgs,
   type Fill,
-  type NodeConfig,
+  type FillResolved,
+  type NodeOf,
+  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.
+  type Node2D as _Node2D,
   type Node2DProps,
-  type RenderContext2D,
   type Shadow,
   type ShadowResolved,
   type Stroke,
@@ -23,10 +20,11 @@ import {
   type TextStyle,
 } from "@motionscript/sdk"
 
+import { fresh } from "../kit/entries"
+import { frameEase } from "../kit/motion"
+import { loadPaints } from "../kit/paints"
 import { clampUnit, formatMarker } from "../kit/shared"
-import type { MarkerLabel } from "../kit/vertical-axis"
 import { DEFAULT_BAR_CHART_THEME } from "./shared"
-import { declarePaints } from "@motionscript/sdk/component"
 
 /**
  * One drawn column, already mapped into the plot's **centred pixel space**
@@ -43,12 +41,18 @@ export interface BarGeometry {
   width: number
   /** Pixel y of the column's base — the baseline when grouped, the running stack top when stacked. */
   from: number
-  /** Pixel y of its far end, at full {@link ChartBars.growth}. */
+  /** Pixel y of its far end, at full {@link ChartBarsProps.growth}. */
   to: number
   /** Whether the far end takes the theme's corner radius (the stack's cap). */
   round: boolean
   /** The value this column plots, for the figure printed on it. */
   value: number
+  /**
+   * The figure printed on it, written as the chart's value axis writes its
+   * ticks, so the two cannot disagree. Absent, the bare marker reading of
+   * {@link value}.
+   */
+  caption?: string
 }
 
 /** Gap between a grouped column's end and the figure printed over it, in px. */
@@ -100,6 +104,81 @@ export interface ChartBarsProps extends Node2DProps {
   enabled: boolean
 }
 
+/** What the column geometry reads. */
+interface Columns {
+  readonly bars: readonly BarGeometry[]
+  readonly baseline: number
+  readonly growth: number
+  readonly dims: readonly number[]
+  readonly enabled: boolean
+  readonly valueStyle: TextStyle
+}
+
+/**
+ * How far column `i` is dimmed — the chart's category spotlight, and the series
+ * switch on top of it.
+ *
+ * The captions read this rather than being hidden by `render`'s guard: they are
+ * real child nodes, so a `return` in the draw would leave them on screen over a
+ * series that isn't there.
+ */
+function dimAt(s: Columns, index: number): number {
+  if (!s.enabled) return 0
+  return clampUnit(s.dims[index] ?? 1)
+}
+
+/** The two ends of column `i` at the current growth. */
+function endsAt(s: Columns, index: number): { base: number; end: number } | null {
+  const bar = s.bars[index]
+  if (!bar) return null
+  const g = clampUnit(s.growth)
+  return { base: s.baseline + (bar.from - s.baseline) * g, end: s.baseline + (bar.to - s.baseline) * g }
+}
+
+/** The type size the figures are set at, guarding the autofit/unset cases. */
+function valueSize(s: Columns): number {
+  const size = s.valueStyle.fontSize
+  return typeof size === "number" ? size : VALUE_SIZE
+}
+
+/** Whether column `i`'s figure sits inside the column (a stacked segment) or past its end. */
+function insideAt(s: Columns, index: number): boolean {
+  const bar = s.bars[index]
+  return bar !== undefined && Math.abs(bar.from - s.baseline) > 0.5
+}
+
+/**
+ * The figure printed on column `i`, or `""` where there is no room for it.
+ *
+ * Blanking the text rather than dropping the node keeps the caption list
+ * index-aligned with the columns, so a chart that rescales into more room simply
+ * starts printing again.
+ */
+function captionAt(s: Columns, index: number): string {
+  const bar = s.bars[index]
+  if (!bar || bar.value === 0) return ""
+  // An interior segment prints inside itself, so it has to be tall enough to
+  // hold a line of type; a grouped column prints in the headroom above its end,
+  // where the only constraint is the plot's own top.
+  if (insideAt(s, index)) {
+    const ends = endsAt(s, index)
+    if (!ends) return ""
+    if (Math.abs(ends.end - ends.base) < valueSize(s) * VALUE_FIT) return ""
+  }
+  return bar.caption ?? formatMarker(bar.value)
+}
+
+/** Where column `i`'s figure sits, in the node's centred y-up space. */
+function captionY(s: Columns, index: number): number {
+  const ends = endsAt(s, index)
+  if (!ends) return 0
+  if (insideAt(s, index)) return (ends.base + ends.end) / 2
+  // Text is centred on its `y`, so clear the column's end by the gap plus half a
+  // line — on whichever side of the baseline the column actually reached.
+  const direction = ends.end >= ends.base ? 1 : -1
+  return ends.end + direction * (VALUE_GAP + valueSize(s) / 2)
+}
+
 /**
  * One **series** of a {@link BarChart}, drawn as one command list: its column in
  * every category, plus the figures printed on them.
@@ -116,195 +195,94 @@ export interface ChartBarsProps extends Node2DProps {
  * and ride the node's own opacity — which is why hiding the series takes its
  * figures with it for free.
  */
-export class ChartBars extends Node2D<ChartBarsProps> {
-  @property({ default: () => [] as BarGeometry[] }) declare bars: BarGeometry[]
-  @property({ default: 0 }) declare baseline: number
-  @property({
-    default: [],
-    mapper: fillOps.resolve,
-    tween: fillOps.lerp,
-  })
-  declare fill: Fill
-  @property({
-    default: DEFAULT_BAR_CHART_THEME.bar.stroke,
-    mapper: strokeOps.resolve,
-    tween: strokeOps.lerp,
-  })
-  declare barStroke: Stroke
-  @property({
-    default: DEFAULT_BAR_CHART_THEME.bar.shadow,
-    mapper: shadowOps.resolve,
-    tween: shadowOps.lerp,
-  })
-  declare barShadow: Shadow
-  @property({ default: DEFAULT_BAR_CHART_THEME.bar.cornerRadius })
-  declare cornerRadius: number
-  @property({ default: 1 }) declare growth: number
-  @property({ default: () => [] as number[] }) declare dims: number[]
-  @property({ default: false }) declare showValues: boolean
-  @property({ default: DEFAULT_BAR_CHART_THEME.valueStyle })
-  declare valueStyle: TextStyle
-  @property({ default: true }) declare enabled: boolean
-
-  /**
-   * How a column's figure is written down — the same seam the two axes carry,
-   * so a chart's value axis and the numbers printed on its bars can't end up
-   * saying `$1,200` in one place and `1200` in the other.
-   */
-  labelFor: MarkerLabel = formatMarker
-
-  constructor(props?: NodeConfig<ChartBars, ChartBarsProps>) {
-    super(props)
+export const ChartBars = component2d({
+  key: "chartBars",
+  state: {
+    bars: fresh<BarGeometry[]>(() => []),
+    baseline: 0,
+    fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+    barStroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_BAR_CHART_THEME.bar.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+    barShadow: Types.custom<Shadow, ShadowResolved[]>(DEFAULT_BAR_CHART_THEME.bar.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),
+    cornerRadius: DEFAULT_BAR_CHART_THEME.bar.cornerRadius,
+    growth: 1,
+    dims: fresh<number[]>(() => []),
+    showValues: false,
+    valueStyle: Types.custom<TextStyle>(DEFAULT_BAR_CHART_THEME.valueStyle),
+    enabled: true,
+  },
+  // A plain node filled its parent; one made of its figures would hug them.
+  defaults: { width: "fill", height: "fill" },
+  // One caption per column, built once (the row count is fixed at construction,
+  // like an axis's marker count) and bound to the live geometry so it travels
+  // with its column as the chart grows, rescales or reflows.
+  children: (state) => {
+    if (!state.showValues) return []
+    return state.bars.map((_, i) =>
+      Text({
+        ...textOps.styleProps(state.valueStyle),
+        text: () => captionAt(state, i),
+        x: () => state.bars[i]?.x ?? 0,
+        y: () => captionY(state, i),
+        opacity: () => dimAt(state, i),
+      })
+    )
+  },
+  // The column stroke and shadow are named past the conventional slots, so they are named here.
+  load: (loader, state) =>
+    loadPaints(loader, { fills: [state.fill], shadows: [state.barShadow], strokes: [state.barStroke] }),
+  commands: {
+    /**
+     * Raise every column from the baseline by tweening `growth` `0 → 1`.
+     *
+     * The mirror of `ChartLine.enter`: same contract that the resting state is
+     * the finished one, so the chart arms this back to 0 before animating rather
+     * than the node hiding itself at construction. No priming to 0 first: the
+     * value at `t` is a function of `t`, so a repeat call re-raises by definition.
+     */
+    enter: (timeline) => {
+      const ease = frameEase(timeline)
+      return timeline.animate((t) => ({ growth: ease(t) }))
+    },
+  },
+  render: (ctx, state) => {
+    if (state.enabled) {
+      for (let i = 0; i < state.bars.length; i++) {
+        const bar = state.bars[i]
+        const ends = endsAt(state, i)
+        if (!ends || bar.width <= 0) continue
+        const height = Math.abs(ends.end - ends.base)
+        if (height <= 0) continue
 
-    // One caption per column, built once (the row count is fixed at
-    // construction, like an axis's marker count) and bound to the live geometry
-    // so it travels with its column as the chart grows, rescales or reflows.
-    if (!this.showValues) return
-    for (let i = 0; i < this.bars.length; i++) {
-      this.add(
-        new Text({
-          ...textOps.styleProps(this.valueStyle),
-          text: () => this.captionAt(i),
-          x: () => this.bars[i]?.x ?? 0,
-          y: () => this.captionY(i),
-          opacity: () => this.dimAt(i),
+        const radius = bar.round ? Math.min(state.cornerRadius, height) : 0
+        // A column per `Graphics2D` rather than one list for the series: the
+        // category spotlight dims individual columns, and opacity is a property
+        // of the command list rather than of a shape within it.
+        const g = new Graphics2D()
+        const rect = g.rect({
+          x: bar.x,
+          y: (ends.base + ends.end) / 2,
+          width: bar.width,
+          height,
+          // This node's space is y-up, but the renderer's corner-radius keys are
+          // labelled in canvas y-down space — so a column reaching *up* rounds
+          // through the `bottom*` keys, and one reaching down through the `top*`
+          // ones. Only the far end rounds, which is what makes a stack read as a
+          // single capped column.
+          cornerRadius:
+            radius > 0
+              ? ends.end >= ends.base
+                ? { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 }
+                : { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 }
+              : 0,
         })
-      )
+        rect.shadow(state.barShadow)
+        rect.fill(state.fill)
+        rect.stroke(state.barStroke)
+        ctx.draw(g.opacity(dimAt(state, i)))
+      }
     }
-  }
-
-  /**
-   * How far column `i` is dimmed — the chart's category spotlight, and the
-   * series switch on top of it.
-   *
-   * The captions read this rather than being hidden by `renderSelf`'s guard:
-   * they are real child nodes, so a `return` in the draw pass would leave them
-   * on screen over a series that isn't there.
-   */
-  private dimAt(index: number): number {
-    if (!this.enabled) return 0
-    return clampUnit(this.dims[index] ?? 1)
-  }
-
-  /** The two ends of column `i` at the current {@link growth}. */
-  private endsAt(index: number): { base: number; end: number } | null {
-    const bar = this.bars[index]
-    if (!bar) return null
-    const g = clampUnit(this.growth)
-    const base = this.baseline + (bar.from - this.baseline) * g
-    const end = this.baseline + (bar.to - this.baseline) * g
-    return { base, end }
-  }
-
-  /** The type size the figures are set at, guarding the autofit/unset cases. */
-  private get valueSize(): number {
-    const size = this.valueStyle.fontSize
-    return typeof size === "number" ? size : VALUE_SIZE
-  }
-
-  /**
-   * The figure printed on column `i`, or `""` where there is no room for it.
-   *
-   * Blanking the text rather than dropping the node keeps the caption list
-   * index-aligned with the columns, so a chart that rescales into more room
-   * simply starts printing again.
-   */
-  private captionAt(index: number): string {
-    const bar = this.bars[index]
-    if (!bar || bar.value === 0) return ""
-    // An interior segment prints inside itself, so it has to be tall enough to
-    // hold a line of type; a grouped column prints in the headroom above its
-    // end, where the only constraint is the plot's own top.
-    if (this.insideAt(index)) {
-      const ends = this.endsAt(index)
-      if (!ends) return ""
-      if (Math.abs(ends.end - ends.base) < this.valueSize * VALUE_FIT) return ""
-    }
-    return this.labelFor(bar.value)
-  }
-
-  /** Whether column `i`'s figure sits inside the column (a stacked segment) or past its end. */
-  private insideAt(index: number): boolean {
-    const bar = this.bars[index]
-    return bar !== undefined && Math.abs(bar.from - this.baseline) > 0.5
-  }
-
-  /** Where column `i`'s figure sits, in the node's centred y-up space. */
-  private captionY(index: number): number {
-    const ends = this.endsAt(index)
-    if (!ends) return 0
-    if (this.insideAt(index)) return (ends.base + ends.end) / 2
-    // Text is centred on its `y`, so clear the column's end by the gap plus half
-    // a line — on whichever side of the baseline the column actually reached.
-    const direction = ends.end >= ends.base ? 1 : -1
-    return ends.end + direction * (VALUE_GAP + this.valueSize / 2)
-  }
-
-  /**
-   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-   * paint props it carries — see {@link declarePaints}. The column stroke and
-   * shadow are named past the conventional slots, so they are passed explicitly.
-   */
-  override declareAssets(assets: AssetScope): void {
-    super.declareAssets(assets)
-    declarePaints(this, assets, {
-      fills: (this.barShadow as ShadowResolved[]).map((shadow) => shadow.fill),
-      strokes: [this.barStroke as StrokeResolved[]],
-    })
-  }
-
-  protected renderSelf(ctx: RenderContext2D): void {
-    if (!this.enabled) return
-    for (let i = 0; i < this.bars.length; i++) {
-      const bar = this.bars[i]
-      const ends = this.endsAt(i)
-      if (!ends || bar.width <= 0) continue
-      const height = Math.abs(ends.end - ends.base)
-      if (height <= 0) continue
-
-      const radius = bar.round ? Math.min(this.cornerRadius, height) : 0
-      // A column per `Graphics2D` rather than one list for the series: the
-      // category spotlight dims individual columns, and opacity is a property
-      // of the command list rather than of a shape within it.
-      const g = new Graphics2D()
-      const rect = g.rect({
-        x: bar.x,
-        y: (ends.base + ends.end) / 2,
-        width: bar.width,
-        height,
-        // This node's space is y-up, but the renderer's corner-radius keys are
-        // labelled in canvas y-down space — so a column reaching *up* rounds
-        // through the `bottom*` keys, and one reaching down through the `top*`
-        // ones. Only the far end rounds, which is what makes a stack read as a
-        // single capped column.
-        cornerRadius:
-          radius > 0
-            ? ends.end >= ends.base
-              ? { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 }
-              : { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 }
-            : 0,
-      })
-      rect.shadow(this.barShadow)
-      rect.fill(this.fill)
-      rect.stroke(this.barStroke)
-      ctx.draw(g.opacity(this.dimAt(i)))
-    }
-  }
-
-  /**
-   * Raise every column from the baseline by tweening {@link growth} `0 → 1`.
-   *
-   * The mirror of `ChartLine.enter`: same signature, same contract that the
-   * resting state is the finished one, so the chart arms this back to 0 before
-   * animating rather than the node hiding itself at construction.
-   */
-  @command()
-  enter(args: CommandArgs<Record<string, never>> & { duration: number }): Command<ChartBarsGrowth> {
-    // No priming to 0 first: the value at `t` is a function of `t`, so a repeat
-    // call re-raises by definition rather than by having reset something.
-    return this.command<ChartBarsGrowth>((t) => ({ growth: t }), args.duration, args.easing ?? easeOut())
-  }
-}
+    ctx.children()
+  },
+})
 
-/** The one signal {@link ChartBars.enter} moves. */
-type ChartBarsGrowth = { growth: number }
+export type ChartBars = NodeOf<typeof ChartBars>