@motionscript/charts 0.1.0 → 0.1.1-alpha.1

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

@@ -2,63 +2,34 @@ import {
   Rect,
   Text,
   Types,
+  clamp,
   component2d,
-  insetsOps,
-  textOps,
   type NodeOf,
+  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
   type Node2D,
-  type Node2DProps,
+  type Node2DProps as _Node2DProps,
 } from "@motionscript/sdk"
+import { enterBudget } from "@motionscript/sdk/component"
 
+import { boundText } from "../kit/cartesian"
 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"
-
-export interface CategoryAxisProps extends Node2DProps {
-  /** One caption per category slot, left to right — the chart's rows, in order. */
-  categories: string[]
-  /** Caption/title text style and gutters — see {@link AxisConfig}. */
-  axis: AxisConfig
-  /**
-   * Caption drawn centred in the gutter beneath the category row. Empty string
-   * (the default) hides it.
-   */
-  label: string
-  /**
-   * Per-category opacity multiplier — how the chart's category spotlight reaches
-   * the captions, so the name under a dimmed column dims with it. Missing
-   * entries read as 1.
-   */
-  dims: number[]
-}
+import { DEFAULT_X_AXIS, type AxisConfig } from "../kit/shared"
+import { axisPads, captionColumn } from "../kit/vertical-axis"
 
-/** How far a caption starts above its slot when it enters, in px. */
 const SLIDE = 24
 
+/** Slot `index`'s centre along a run of `length` px divided into `count` equal slots, first slot at `-length / 2`. */
+export function slotCentre(index: number, count: number, length: number): number {
+  return count <= 0 ? 0 : -length / 2 + (length / count) * (index + 0.5)
+}
+
 /**
- * The **categorical** horizontal axis of a {@link BarChart}: a row of
- * {@link Text} captions, one per row of the data, each centred on its slot
- * beneath the baseline.
- *
- * Not a variant of the line chart's `HorizontalAxis` and deliberately not
- * folded into it: that axis places markers by *value* across a numeric range,
- * this one divides its width into equal slots and centres a name in each. The
- * two look alike on screen and share nothing underneath — one reads a scale,
- * the other counts rows.
- *
- * The slot arithmetic is the same as the plot's, because this node is laid out
- * to exactly the plot's width (the chart reserves the axis gutter with an
- * 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.
- *
- * `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.
+ * The categorical axis of a {@link BarChart}: one {@link Text} caption per row,
+ * centred on its slot. `horizontal` is a row under the plot, first category on
+ * the left; `vertical` a right-aligned column beside it, first category at the
+ * top. It is laid out to exactly the plot's length, so each caption lands by its
+ * bars with neither side told about the other. The resting state is landed.
  */
 export const CategoryAxis = component2d({
   key: "categoryAxis",
@@ -66,74 +37,69 @@ export const CategoryAxis = component2d({
     categories: fresh<string[]>(() => []),
     axis: Types.custom<AxisConfig>(DEFAULT_X_AXIS),
     label: "",
+    orientation: Types.oneOf(["horizontal", "vertical"] as const),
+    /** Per-category opacity multiplier, so the caption by a dimmed bar dims with it. Missing reads as 1. */
     dims: fresh<number[]>(() => []),
     arrivals: arrivalsEntry(),
   },
-  // A plain node filled its parent; one made of its captions would hug them.
+  // A node made of captions would otherwise 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 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)
+    const n = state.categories.length
+    const dim = (i: number) => clamp(state.dims[i] ?? 1, 0, 1)
+    if (state.orientation === "vertical") {
+      return asParts([
+        captionColumn({
+          count: n,
+          axis: () => state.axis,
+          text: (i) => state.categories[i] ?? "",
+          // y-up: the first category takes the top slot.
+          place: (i, height) => -slotCentre(i, state.categories.length, height),
+          arrivals: () => state.arrivals,
+          opacity: dim,
+          label: state.label,
+        }),
+      ])
     }
 
-    // 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 = state.categories.map((caption, i) =>
-      new Rect({
+    const pads = () => axisPads(state.axis, "top")
+    // The spotlight dim sits on a hug box around each caption, so the entrance animates the text's own opacity without the two fighting over one value.
+    const captions = state.categories.map((caption, i) => {
+      const slot: Node2D = new Rect({
         width: "hug",
         height: "hug",
         flow: "freeform",
-        opacity: () => clampUnit(state.dims[i] ?? 1),
-        x: () => slotCenter(i),
+        opacity: () => dim(i),
+        x: () => slotCentre(i, state.categories.length, (slot.parent as Node2D | null)?.layoutBounds.width ?? 0),
         children: [
           new Text({
-            ...textOps.styleProps(state.axis.labelStyle),
+            ...boundText(() => 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 })]
+      }) as unknown as Node2D
+      return slot
+    })
+    const children: Node2D[] = [new Rect({ width: "fill", height: "hug", padding: () => ({ top: pads().tick }), children: captions }) as unknown as Node2D]
     if (state.label !== "") {
       children.push(
         new Text({
-          ...textOps.styleProps(state.axis.titleStyle),
+          ...boundText(() => state.axis.titleStyle),
           text: state.label,
           opacity: () => arrivalOf(state.arrivals, "label").opacity,
           y: () => arrivalOf(state.arrivals, "label").shift,
-        })
+        }) as unknown as Node2D
       )
     }
-
-    column.push(new Rect({ flow: "vertical", gap: titlePad, height: "hug", width: "fill", children }))
-    return asParts(column)
+    return asParts([new Rect({ flow: "vertical", gap: () => pads().title, height: "hug", width: "fill", children }) as unknown as Node2D])
   },
   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).
+     * Slide and fade captions in, first category first, then the title. The
+     * duration is the whole entrance ({@link enterBudget}). `stagger` is seconds
+     * between captions (derived when omitted); `slide` is the starting offset in px.
      */
     enter: {
       args: {
@@ -150,9 +116,8 @@ export const CategoryAxis = component2d({
         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) }] : []
+        const label = captioned ? [{ at: (count - 1) * step + per, duration: caption, piece: arrival(timeline, "label", from, ease) }] : []
         return timeline.together([arm, beats(timeline, [...captions, ...label])])
       },
     },

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

@@ -2,243 +2,152 @@ import {
   Graphics2D,
   Text,
   Types,
+  clamp,
   component2d,
   fillOps,
-  shadowOps,
-  strokeOps,
-  textOps,
   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 Node2DProps,
-  type Shadow,
-  type ShadowResolved,
-  type Stroke,
-  type StrokeResolved,
+  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
+  type Node2D,
+  type Node2DProps as _Node2DProps,
   type TextStyle,
 } from "@motionscript/sdk"
 
-import { fresh } from "../kit/entries"
+import { boundText } from "../kit/cartesian"
+import { asParts, fresh } from "../kit/entries"
 import { frameEase } from "../kit/motion"
 import { loadPaints } from "../kit/paints"
-import { clampUnit, formatMarker } from "../kit/shared"
-import { DEFAULT_BAR_CHART_THEME } from "./shared"
+import { formatMarker } from "../kit/shared"
+import { inkOn } from "./shared"
 
 /**
- * One drawn column, already mapped into the plot's **centred pixel space**
- * (origin at the plot centre, y-up) by the parent {@link BarChart}.
- *
- * `from`/`to` are the two ends of the column rather than a base and a height,
- * for the same reason {@link BarSpan} is a span: it is the one shape that fits a
- * grouped bar, a stacked segment and a negative value without a special case.
+ * One drawn bar in the plot's centred pixel space (origin at the centre, y-up),
+ * mapped by the parent {@link BarChart}: `center` and `thickness` across the
+ * category slot, `from` and `to` along the value axis (y for a column, x for a
+ * horizontal bar). Two ends rather than a base and a length, like `BarSpan`:
+ * one shape fits grouped, stacked and negative.
  */
 export interface BarGeometry {
-  /** Centre x of the column. */
-  x: number
-  /** Column width in px. */
-  width: number
-  /** Pixel y of the column's base — the baseline when grouped, the running stack top when stacked. */
+  center: number
+  thickness: number
+  /** The base: the baseline when grouped, the running stack end when stacked. */
   from: number
-  /** Pixel y of its far end, at full {@link ChartBarsProps.growth}. */
+  /** The far end at full growth. */
   to: number
-  /** Whether the far end takes the theme's corner radius (the stack's cap). */
+  /** Whether the far end takes the corner radius (the stack's last segment on its side). */
   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
+  /** The figure printed by the bar; empty for none. */
+  caption: string
 }
 
-/** Gap between a grouped column's end and the figure printed over it, in px. */
-const VALUE_GAP = 10
-/** A segment shorter than this many multiples of the type size prints no figure. */
-const VALUE_FIT = 1.6
-/** Fallback type size when the theme's value style leaves it unset or autofit. */
-const VALUE_SIZE = 24
+/** A figure inside a bar needs this much room around it, in multiples of the type size. */
+const INSIDE_ROOM = 0.6
 
-export interface ChartBarsProps extends Node2DProps {
-  /** This series' columns, one per row of the chart's data. */
-  bars: BarGeometry[]
-  /** Pixel y of value 0 — where every column grows *from*. */
-  baseline: number
-  /** Column paint — this series' own, or the theme palette's entry for its index. */
-  fill: Fill
-  /** Optional outline on every column. */
-  barStroke: Stroke
-  /** Optional drop shadow on every column. */
-  barShadow: Shadow
-  /** Radius of the far-end corners, in px. */
-  cornerRadius: number
-  /**
-   * Rise of every column in `[0, 1]`, measured **about the baseline**: 0
-   * collapses them all onto it, 1 draws them at full length.
-   *
-   * Scaling about the baseline rather than about each column's own base is what
-   * keeps a stack flush mid-animation — every segment's base and end travel by
-   * the same factor, so the segments stay stacked instead of the upper ones
-   * floating above the still-growing lower ones. It also means a negative
-   * column grows *down* out of the same signal.
-   */
-  growth: number
-  /**
-   * Per-column opacity multiplier, by row index — how the chart's category
-   * spotlight reaches a single column without touching the series it belongs
-   * to. Missing entries read as 1.
-   */
-  dims: number[]
-  /** Whether the figure each column plots is printed on it. */
-  showValues: boolean
-  /** Type style for those figures. */
-  valueStyle: TextStyle
-  /**
-   * Whether this series draws at all — the wholesale switch behind
-   * `BarChart.showSeries`/`hideSeries`, alongside the slot weight that animates
-   * the reflow. Off skips the columns *and* their figures.
-   */
-  enabled: boolean
-}
-
-/** What the column geometry reads. */
-interface Columns {
+interface Bars {
   readonly bars: readonly BarGeometry[]
   readonly baseline: number
+  readonly horizontal: boolean
   readonly growth: number
   readonly dims: readonly number[]
   readonly enabled: boolean
+  readonly values: "none" | "end" | "inside"
   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 {
+/** Bar `i`'s dimming: the category spotlight, then the series switch. */
+function dimAt(s: Bars, index: number): number {
   if (!s.enabled) return 0
-  return clampUnit(s.dims[index] ?? 1)
+  return clamp(s.dims[index] ?? 1, 0, 1)
 }
 
-/** The two ends of column `i` at the current growth. */
-function endsAt(s: Columns, index: number): { base: number; end: number } | null {
+/** Bar `i`'s two ends as grown so far, along the value axis. */
+function endsAt(s: Bars, index: number): { base: number; end: number } | null {
   const bar = s.bars[index]
   if (!bar) return null
-  const g = clampUnit(s.growth)
+  const g = clamp(s.growth, 0, 1)
   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
+function sizeOf(style: TextStyle): number {
+  return typeof style.fontSize === "number" ? style.fontSize : 24
 }
 
-/** 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
+/** Where bar `i`'s figure sits along the value axis: past its end, or in its middle. */
+function captionAlong(s: Bars, index: number, extent: number): number {
+  const ends = endsAt(s, index)
+  if (!ends) return 0
+  if (s.values === "inside") return (ends.base + ends.end) / 2
+  const direction = ends.end >= ends.base ? 1 : -1
+  return ends.end + direction * (sizeOf(s.valueStyle) * 0.4 + extent / 2)
 }
 
-/**
- * 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 {
+/** Whether bar `i` has room for a figure `extent` long inside it. */
+function fitsInside(s: Bars, index: number, extent: number, across: number): boolean {
   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)
+  if (!bar || !ends) return false
+  const room = sizeOf(s.valueStyle) * INSIDE_ROOM
+  return Math.abs(ends.end - ends.base) >= extent + room && bar.thickness >= across
 }
 
 /**
- * One **series** of a {@link BarChart}, drawn as one command list: its column in
- * every category, plus the figures printed on them.
- *
- * A node per series rather than a node per bar, deliberately — it is the same
- * unit `ChartLine` is, which is what lets `showSeries`/`hideSeries`/
- * `spotlightSeries` mean exactly the same thing on a bar chart as on a line
- * chart: enable the node, or tween its opacity. The columns' *positions* come
- * from the parent (it owns the slot arithmetic both modes share), so this part
- * only has to know how to draw a span and grow it.
- *
- * The figures are real {@link Text} children rather than glyphs in the command
- * list, so they take the theme's type style, are measured by the layout engine,
- * and ride the node's own opacity — which is why hiding the series takes its
- * figures with it for free.
+ * One series of a {@link BarChart}: its bar in every category plus the printed
+ * figures. A node per series, like `ChartLine`, so `showSeries` and
+ * `spotlightSeries` mean the same on both: enable the node or tween its opacity.
+ * Positions come from the parent, which owns the slot arithmetic.
  */
 export const ChartBars = component2d({
   key: "chartBars",
   state: {
     bars: fresh<BarGeometry[]>(() => []),
+    /** Pixel position of value 0 along the value axis, where every bar grows from. */
     baseline: 0,
+    /** Bars grow along x from a category column rather than along y from a row. */
+    horizontal: false,
     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,
+    cornerRadius: 8,
+    /**
+     * Rise of every bar in `[0, 1]` about the baseline, not each bar's own base:
+     * every segment travels by the same factor, so a stack stays flush
+     * mid-animation and a negative bar grows the other way.
+     */
     growth: 1,
+    /** Per-bar opacity by row index, how the category spotlight reaches one bar. Missing reads as 1. */
     dims: fresh<number[]>(() => []),
-    showValues: false,
-    valueStyle: Types.custom<TextStyle>(DEFAULT_BAR_CHART_THEME.valueStyle),
+    /** Read as built: whether each bar prints its figure, and where. */
+    values: Types.custom<"none" | "end" | "inside">("none"),
+    valueStyle: Types.custom<TextStyle>({ fontSize: 24, fill: "white" }),
+    /** The wholesale switch behind `showSeries`/`hideSeries`; off skips the bars and their figures. */
     enabled: true,
   },
-  // A plain node filled its parent; one made of its figures would hug them.
+  // A node made of its figures would otherwise 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.
+  // One figure per bar, built once (the row count is fixed at construction)
+  // and bound to the live geometry so it travels with its bar.
   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),
-      })
-    )
+    if (state.values === "none") return []
+    return asParts(state.bars.map((_, i) => {
+      const caption: Node2D = new Text({
+        ...boundText(() => ({ ...state.valueStyle, ...(state.values === "inside" && { fill: inkOn(state.fill) }) })),
+        text: () => state.bars[i]?.caption ?? "",
+        x: () => (state.horizontal ? captionAlong(state, i, caption.layoutBounds.width) : (state.bars[i]?.center ?? 0)),
+        y: () => (state.horizontal ? (state.bars[i]?.center ?? 0) : captionAlong(state, i, caption.layoutBounds.height)),
+        opacity: () => {
+          const box = caption.layoutBounds
+          const along = state.horizontal ? box.width : box.height
+          const across = state.horizontal ? box.height : box.width
+          if (state.values === "inside" && !fitsInside(state, i, along, across)) return 0
+          // A figure past the end rises in with its bar's last stretch.
+          return dimAt(state, i) * clamp((state.growth - 0.6) / 0.4, 0, 1)
+        },
+      }) as unknown as Node2D
+      return caption
+    }))
   },
-  // 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] }),
+  load: (loader, state) => loadPaints(loader, { fills: [state.fill] }),
   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.
-     */
+    /** Raise every bar from the baseline (`growth` 0 to 1). The resting state is the finished one; the chart arms it back to 0. */
     enter: (timeline) => {
       const ease = frameEase(timeline)
       return timeline.animate((t) => ({ growth: ease(t) }))
@@ -249,34 +158,23 @@ export const ChartBars = component2d({
       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
-
-        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,
-          // Corner keys are visual (the renderer keeps them in y-up author space),
-          // so a column reaching *up* rounds its `top*` corners and one reaching
-          // down its `bottom*` 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
-                ? { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 }
-                : { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 }
-              : 0,
-        })
-        rect.shadow(state.barShadow)
-        rect.fill(state.fill)
-        rect.stroke(state.barStroke)
+        if (!ends || bar.thickness <= 0) continue
+        // A segment inside a stack reaches a pixel under the next, so no seam of background shows between them.
+        const seam = bar.round ? 0 : 1
+        const length = Math.abs(ends.end - ends.base) + seam
+        if (length <= seam) continue
+        const radius = bar.round ? Math.max(0, Math.min(state.cornerRadius, length, bar.thickness / 2)) : 0
+        const forward = ends.end >= ends.base
+        const mid = (ends.base + ends.end) / 2 + (forward ? seam : -seam) / 2
+        // Corner keys are visual (y-up): only the far end rounds.
+        const far = state.horizontal
+          ? (forward ? { topRight: radius, bottomRight: radius, topLeft: 0, bottomLeft: 0 } : { topLeft: radius, bottomLeft: radius, topRight: 0, bottomRight: 0 })
+          : (forward ? { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 } : { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 })
+        // One `Graphics2D` per bar: opacity belongs to the command list, and the spotlight dims single bars.
+        const g = new Graphics2D().rect(state.horizontal
+          ? { x: mid, y: bar.center, width: length, height: bar.thickness, cornerRadius: radius > 0 ? far : 0 }
+          : { x: bar.center, y: mid, width: bar.thickness, height: length, cornerRadius: radius > 0 ? far : 0 })
+        g.fill(state.fill)
         ctx.draw(g.opacity(dimAt(state, i)))
       }
     }
@@ -285,3 +183,8 @@ export const ChartBars = component2d({
 })
 
 export type ChartBars = NodeOf<typeof ChartBars>
+
+/** A figure as the bar prints it when the chart gives no caption. */
+export function barCaption(value: number): string {
+  return value === 0 ? "" : formatMarker(value)
+}

package/src/bar-chart/index.ts

@@ -1,31 +1,20 @@
-/**
- * The bar chart: grouped or stacked columns off a category axis.
- *
- * Shares the plot panel, the value axis and the legend with the line chart —
- * which is what lets a scene swap one for the other without re-theming — and
- * brings its own category axis, since a band scale is not a continuous one.
- */
 export { BarChart, barChartDomain } from "./bar-chart"
-export type { BarChartDomain, BarChartProps, BarChartValues } from "./bar-chart"
+export type { BarChartDomain, BarChartStyle, BarChartValues } from "./bar-chart"
 export { ChartBars } from "./chart-bars"
-export type { BarGeometry, ChartBarsProps } from "./chart-bars"
-export { CategoryAxis } from "./category-axis"
-export type { CategoryAxisProps } from "./category-axis"
+export type { BarGeometry } from "./chart-bars"
+export { CategoryAxis, slotCentre } from "./category-axis"
 export {
-  DEFAULT_BAR_CHART_THEME,
+  BAR_LABELS,
+  BAR_MARKS,
   barCategories,
   barSpans,
   barValueExtent,
-  lerpBarChartTheme,
-  resolveBarChartTheme,
-  resolveBarFill,
+  inkOn,
   resolveBarScale,
-  stackCapIndex,
 } from "./shared"
 export type {
-  BarChartConfig,
-  BarChartTheme,
+  BarOrientation,
   BarSeries,
   BarSpan,
-  BarStyleConfig,
+  BarStack,
 } from "./shared"