basalt-ui 1.28.0 → 1.29.1

package/src/agent-chat/thread-feed.tsx

@@ -23,10 +23,11 @@ import { AnimatePresence, motion } from 'motion/react'
 import type { JSX, ReactNode } from 'react'
 import { useEffect, useState } from 'react'
 import type { AgentThread } from '../agent'
+import { BasaltStickToBottom } from '../agent'
 import { cx } from '../common/props'
 import type { BasaltProps } from '../common/props'
 import { assertRequiredProps } from '../common/validate'
-import { MOTION_SPRING } from '../motion'
+import { MOTION_SPRING } from '../common/motion'
 import type { ComposerSubmit } from './composer'
 import { ThreadFeedRow } from './thread-feed-row'
 import { ThreadOutcomeCard } from './thread-outcome-card'
@@ -69,6 +70,16 @@ export type ThreadFeedProps = BasaltProps & {
    * (`onStop`/`liveParts`/`liveStatus`) the built-in `'inline'` row doesn't expose; see `variant`
    * and `onSend`. */
   readonly renderRow?: (thread: AgentThread) => ReactNode
+  /**
+   * Scroll anchor. `'start'` (default) is today's top-anchored `ScrollArea` feed, unchanged.
+   * `'end'` anchors the feed's growth to the BOTTOM instead — a `BasaltStickToBottom` scroll node
+   * (auto-follows the live turn, same container `ThreadDetailPanel` uses) rather than `ScrollArea`,
+   * with the row stack `justify`-ed to the end and grown to the full height so a short feed still
+   * sits at the bottom rather than floating at the top. This is what a bottom-anchored chat feed
+   * (argo's hermes-chat S15 — oldest→newest top→bottom, pinned last, `renderRow`-driven) needs
+   * instead of hand-rolling its own scroll shell around `renderRow`.
+   */
+  readonly anchor?: 'start' | 'end'
 }
 
 function defaultRow(
@@ -116,6 +127,7 @@ export function ThreadFeed({
   variant = 'outcome',
   onSend,
   renderRow,
+  anchor = 'start',
   className,
   style,
 }: ThreadFeedProps): JSX.Element {
@@ -153,36 +165,50 @@ export function ThreadFeed({
       ? renderRow(thread)
       : defaultRow(thread, variant, activeId, collapsedId, handleInlineToggle, onSelect, onSend)
 
-  if (reduceMotion) {
+  // B5: `anchor="end"` grows the stack to the full scroll height and pins its content to the
+  // bottom, so a feed with only a couple of threads still sits flush against the composer instead
+  // of floating at the top of an otherwise-empty ScrollArea.
+  const stackAnchorProps = anchor === 'end' ? { justify: 'flex-end' as const, mih: '100%' } : {}
+
+  const list = reduceMotion ? (
+    <Stack gap="sm" p="sm" {...stackAnchorProps}>
+      {threads.map((thread) => (
+        <Box key={thread.id}>{rowFor(thread)}</Box>
+      ))}
+    </Stack>
+  ) : (
+    <Stack gap="sm" p="sm" {...stackAnchorProps}>
+      <AnimatePresence mode="popLayout" initial={false}>
+        {threads.map((thread) => (
+          <motion.div
+            key={thread.id}
+            layout
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.97 }}
+            transition={MOTION_SPRING}
+          >
+            {rowFor(thread)}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </Stack>
+  )
+
+  // `anchor="end"`: a `BasaltStickToBottom` scroll node instead of `ScrollArea` — it owns an
+  // initial scroll-to-end on mount and auto-follows appended content (the live turn), which a
+  // plain `ScrollArea` has no notion of.
+  if (anchor === 'end') {
     return (
-      <ScrollArea className={cx(className)} style={{ height: '100%', ...style }}>
-        <Stack gap="sm" p="sm">
-          {threads.map((thread) => (
-            <Box key={thread.id}>{rowFor(thread)}</Box>
-          ))}
-        </Stack>
-      </ScrollArea>
+      <BasaltStickToBottom className={cx(className)} style={{ height: '100%', ...style }}>
+        {list}
+      </BasaltStickToBottom>
     )
   }
 
   return (
     <ScrollArea className={cx(className)} style={{ height: '100%', ...style }}>
-      <Stack gap="sm" p="sm">
-        <AnimatePresence mode="popLayout" initial={false}>
-          {threads.map((thread) => (
-            <motion.div
-              key={thread.id}
-              layout
-              initial={{ opacity: 0, y: -8 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.97 }}
-              transition={MOTION_SPRING}
-            >
-              {rowFor(thread)}
-            </motion.div>
-          ))}
-        </AnimatePresence>
-      </Stack>
+      {list}
     </ScrollArea>
   )
 }

package/src/agent-chat/thread-message.tsx

@@ -60,7 +60,7 @@ import { formatRelativeTime } from './relative-time'
 import { ToolChip } from './tool-chip'
 import { resolveVirtualize } from './virtualize'
 import type { VirtualizeOptions, VirtualizeProps } from './virtualize'
-import { isDev } from '../utils/is-dev'
+import { isDev } from '../common/is-dev'
 
 /** The mono, uppercase, letter-spaced micro-label idiom (docs/DESIGN-SPEC.md §3) — shared by the
  * transcript's role labels and the reasoning/tool-call headers below. */

package/src/agent-chat/virtualize.ts

@@ -112,6 +112,54 @@ export type ResolvedVirtualize = {
   readonly height: number | string
 }
 
+/**
+ * `ThreadFeedRow`'s OWN height contract (B3) — a strict superset of {@link VirtualizeProps} that
+ * additionally allows `height` WITHOUT `virtualize`. This is deliberately NOT a widening of
+ * `VirtualizeProps` itself (see `virtualize.type-guard.test.ts`, which pins that union rejecting
+ * `{ height }` with no `virtualize`): the two `height` modes mean different things and route to
+ * different DOM. `virtualize: true|VirtualizeOptions` + `height` still hands the row's transcript a
+ * fixed-size scroll container `@tanstack/react-virtual` owns and measures (unchanged, forwarded to
+ * `ThreadTranscript` via `resolveVirtualize`). `height` ALONE — no `virtualize` — wraps the row's
+ * TRANSCRIPT in a fixed-height `BasaltStickToBottom` (the same auto-follow-the-live-turn container
+ * `ThreadDetailPanel` already uses), leaving the composer outside/below it: a bounded, scrolling
+ * row for a thread the caller does not want to virtualize (argo's hermes-chat S7 — a 480px
+ * transcript body with inner scroll, no `@tanstack/react-virtual` peer installed).
+ */
+export type RowHeightProps =
+  | { readonly virtualize?: false; readonly height?: number | string }
+  | { readonly virtualize: true | VirtualizeOptions; readonly height: number | string }
+
+/** The resolved shape of {@link RowHeightProps} — exactly one of the three row body layouts. */
+export type ResolvedRowHeight =
+  | { readonly kind: 'virtualized'; readonly virtualize: ResolvedVirtualize }
+  | { readonly kind: 'bounded'; readonly height: number | string }
+  | { readonly kind: 'content-sized' }
+
+/**
+ * The single narrowing point `ThreadFeedRow` resolves {@link RowHeightProps} through — mirrors
+ * {@link resolveVirtualize}'s role for `VirtualizeProps`, extended with the `'bounded'` branch B3
+ * adds. Runtime-checked rather than routed through `resolveVirtualize` itself: `RowHeightProps`'
+ * inactive branch relaxes `height` from `never` to `number | string | undefined`, which is NOT
+ * structurally assignable to `VirtualizeProps` (by design — see this type's own doc), so the two
+ * resolvers stay independent rather than one calling the other with a cast.
+ */
+export function resolveRowHeight(props: RowHeightProps): ResolvedRowHeight {
+  const { virtualize, height } = props
+  if (virtualize === true || (typeof virtualize === 'object' && virtualize !== null)) {
+    // The union guarantees `height` is present on this branch — see resolveVirtualize's own doc
+    // for why the pairing is re-stated here instead of narrowed automatically.
+    return {
+      kind: 'virtualized',
+      virtualize: {
+        options: virtualize === true ? {} : virtualize,
+        height: height as number | string,
+      },
+    }
+  }
+  if (height !== undefined) return { kind: 'bounded', height }
+  return { kind: 'content-sized' }
+}
+
 /**
  * Narrows a `VirtualizeProps` pair once, centrally: `null` when virtualization is off, otherwise
  * the options object (normalizing the bare `virtualize: true` shorthand to `{}`) alongside the

package/src/charts/index.ts

@@ -101,7 +101,12 @@ export {
   TooltipRow,
   TooltipBody,
 } from './primitives/ChartTooltip'
-export { AxisBottomDate, AxisLeftNumeric, AxisRightNumeric } from './primitives/Axes'
+export {
+  AxisBottomDate,
+  AxisBottomNumeric,
+  AxisLeftNumeric,
+  AxisRightNumeric,
+} from './primitives/Axes'
 export { HoverOverlay } from './primitives/HoverOverlay'
 export { ZoneRects, type ZoneSpec } from './primitives/ZoneRects'
 export { XZoneRects, type XZoneSpec } from './primitives/XZoneRects'
@@ -139,19 +144,11 @@ export { measureText, maxTextWidth } from './utils/measure-text'
 export {
   ZonedLine,
   type ZonedLineProps,
-  type ZonedLineZone,
   type ZonedLineThreshold,
   type ZonedLineRefLine,
 } from './kinds/ZonedLine'
 
-export {
-  Bars,
-  type BarsProps,
-  type BarsBar,
-  type BarsLine,
-  type BarsZone,
-  type BarsRefLine,
-} from './kinds/Bars'
+export { Bars, type BarsProps, type BarsBar, type BarsLine, type BarsRefLine } from './kinds/Bars'
 
 export { StackedArea, type StackedAreaProps } from './kinds/StackedArea'
 export { Donut, type DonutProps, type DonutDatum } from './kinds/Donut'

package/src/charts/kinds/BandStrip.tsx

@@ -22,7 +22,7 @@ import { HoverOverlay } from '../primitives/HoverOverlay'
 import type { ChartState } from '../primitives/ChartPending'
 import type { ChartLegendConfig, SeriesStyle } from '../series'
 import { fmtAxisDate } from '../utils/format'
-import { isDev } from '../../utils/is-dev'
+import { isDev } from '../../common/is-dev'
 
 /**
  * A state a strip can draw. Extends `SeriesStyle` rather than `ChartSeries` because a band has no

package/src/charts/kinds/Bars.tsx

@@ -12,7 +12,7 @@ import type { ChartState } from '../primitives/ChartPending'
 import { curveFor, LINE_OVERLAY_STROKE_WIDTH } from '../series'
 import type { ChartLegendConfig, ChartSeries, SeriesCurve } from '../series'
 import { padAutoLower } from '../utils/domain'
-import { isDev } from '../../utils/is-dev'
+import { isDev } from '../../common/is-dev'
 
 /**
  * `T = unknown` is load-bearing, not a shortcut: it keeps a consumer's existing
@@ -55,9 +55,6 @@ export type BarsLine<T = unknown> = {
   curve?: SeriesCurve
 }
 
-/** @deprecated Use ZoneSpec from primitives/ZoneRects. Kept as an alias. */
-export type BarsZone = ZoneSpec
-
 export type BarsRefLine = {
   value: number
   color: string
@@ -84,7 +81,7 @@ export type BarsProps<T> = BasaltProps & {
   lines?: BarsLine<T>[]
 
   /** Horizontal value-range overlays (target zones, optimal bands). */
-  zones?: BarsZone[]
+  zones?: ZoneSpec[]
   /** Dashed/solid horizontal reference lines. */
   refLines?: BarsRefLine[]
 

package/src/charts/kinds/DualPanel.tsx

@@ -49,8 +49,9 @@ export type DualPanelProps<T> = BasaltProps & {
   series: ChartSeries<T>[]
   /** Top-pane y-domain. Default 'auto' (computed from all top lines, padded). */
   topYDomain?: [number, number] | 'auto'
-  /** Shade the band between two top lines (by key), filled on both sides. */
-  fillBetween?: { from: string; to: string; fill: string }
+  /** Shade the band between two top lines (by key). `aboveFill` colors the side where `to` runs
+   * above `from` (e.g. a "bad" red) — omitted, both sides share `fill` (today's behaviour). */
+  fillBetween?: { from: string; to: string; fill: string; aboveFill?: string }
   /** Horizontal reference lines on the top pane. Solid by default; set dashed: true for a dashed line. */
   topRefLines?: { value: number; color: string; dashed?: boolean }[]
   /** Horizontal value-range bands on the top pane. */
@@ -512,7 +513,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
               clipBelowTo={topH}
               curve={fillCurve}
               belowAreaProps={{ fill: fillBetween.fill }}
-              aboveAreaProps={{ fill: fillBetween.fill }}
+              aboveAreaProps={{ fill: fillBetween.aboveFill ?? fillBetween.fill }}
             />
           )}
 

package/src/charts/kinds/StackedArea.tsx

@@ -8,7 +8,7 @@ import type { AxisConfig, PlotContext } from '../primitives/CartesianChart'
 import type { ChartState } from '../primitives/ChartPending'
 import { curveFor } from '../series'
 import type { ChartLegendConfig, ChartSeries } from '../series'
-import { isDev } from '../../utils/is-dev'
+import { isDev } from '../../common/is-dev'
 
 export type StackedAreaProps<T> = BasaltProps & {
   data: T[]

package/src/charts/kinds/ZonedLine.tsx

@@ -14,9 +14,6 @@ import { curveFor, definedOn, LINE_OVERLAY_STROKE_WIDTH, toPlotPoint } from '../
 import type { ChartLegendConfig, ChartSeries } from '../series'
 import { VX } from '../../tokens'
 
-/** @deprecated Use ZoneSpec from primitives/ZoneRects. Kept as an alias for back-compat. */
-export type ZonedLineZone = ZoneSpec
-
 /** Semi-transparent fill above (or below) a threshold value, tracking the line. */
 export type ZonedLineThreshold = {
   value: number
@@ -46,7 +43,7 @@ export type ZonedLineProps<T> = BasaltProps & {
   /** Y-axis. Collapses the old `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` / `yAutoPad` /
    * `numTicksY` / `formatYTick` prop soup into one object. */
   y?: AxisConfig<T>
-  zones?: ZonedLineZone[]
+  zones?: ZoneSpec[]
   /** Vertical x-range overlays (time windows), rendered behind the line. Bounds are `getX`
    * domain keys. */
   xZones?: XZoneSpec[]

package/src/charts/primitives/Axes.tsx

@@ -20,10 +20,13 @@ export function AxisLeftNumeric({
   scale,
   numTicks = 5,
   tickFormat,
+  tickValues,
 }: {
   scale: AxisScale
   numTicks?: number
   tickFormat?: TickFormatter<number>
+  /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
+  tickValues?: readonly number[]
 }) {
   const { axisFont } = useChartTierMetrics()
   return (
@@ -31,6 +34,7 @@ export function AxisLeftNumeric({
       scale={scale}
       numTicks={numTicks}
       {...(tickFormat !== undefined && { tickFormat })}
+      {...(tickValues !== undefined && { tickValues: [...tickValues] })}
       tickLabelProps={{
         fill: VX.faint,
         fontFamily: TICK_FONT_FAMILY,
@@ -49,12 +53,15 @@ export function AxisRightNumeric({
   left,
   numTicks = 5,
   tickFormat,
+  tickValues,
 }: {
   scale: AxisScale
   /** Left offset inside the Group (typically xMax). Required since AxisRight needs positioning. */
   left: number
   numTicks?: number
   tickFormat?: TickFormatter<number>
+  /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
+  tickValues?: readonly number[]
 }) {
   const { axisFont } = useChartTierMetrics()
   return (
@@ -63,6 +70,7 @@ export function AxisRightNumeric({
       scale={scale}
       numTicks={numTicks}
       {...(tickFormat !== undefined && { tickFormat })}
+      {...(tickValues !== undefined && { tickValues: [...tickValues] })}
       tickLabelProps={{
         fill: VX.faint,
         fontFamily: TICK_FONT_FAMILY,
@@ -75,6 +83,47 @@ export function AxisRightNumeric({
   )
 }
 
+/**
+ * Themed bottom numeric axis — the numeric twin of {@link AxisLeftNumeric}, for a plot whose x is
+ * a continuous number rather than a date/category (e.g. `sky-panorama.tsx`'s azimuth 0–360°,
+ * `docs/CHARTS-SPEC.md` issue #52). Exists so a bespoke continuous-x plot — declared exempt from
+ * `CartesianChart` by a `theme-allow-file hand-rolled-plot` waiver, since the point-scale x axis
+ * that primitive builds cannot represent one — stops re-implementing tick text/color/font by hand.
+ */
+export function AxisBottomNumeric({
+  scale,
+  top,
+  numTicks = 5,
+  tickFormat,
+  tickValues,
+}: {
+  scale: AxisScale
+  top: number
+  numTicks?: number
+  tickFormat?: TickFormatter<number>
+  /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
+  tickValues?: readonly number[]
+}) {
+  const { axisFont } = useChartTierMetrics()
+  return (
+    <AxisBottom
+      top={top}
+      scale={scale}
+      numTicks={numTicks}
+      {...(tickFormat !== undefined && { tickFormat })}
+      {...(tickValues !== undefined && { tickValues: [...tickValues] })}
+      tickLabelProps={{
+        fill: VX.faint,
+        fontFamily: TICK_FONT_FAMILY,
+        fontSize: axisFont,
+        textAnchor: 'middle',
+      }}
+      stroke={VX.surface.border}
+      tickStroke={VX.surface.border}
+    />
+  )
+}
+
 /**
  * Nudge a rotated tick label back onto its tick. Both are the d3 idiom for the angle: a 45° label
  * hangs from the tick's lower-left, a 90° one is centred on the tick's vertical line.

package/src/charts/primitives/ChartCard.tsx

@@ -3,7 +3,7 @@
  * tier="widget"` title row (icon/info/value/delta/count/actions) plus an optional subtitle, over a
  * clipped chart body. Do not wrap visx charts in bare divs.
  *
- * `WidgetHeader` lives in `src/widget-header/` and is itself Mantine-free, so composing it here
+ * `WidgetHeader` lives in `src/dashboard/` and is itself Mantine-free, so composing it here
  * keeps `./charts` resolving with no `@mantine/*` installed (`check-dist-layering.mjs`,
  * `basalt/token-layer-boundary`). The `actions` slot cannot mount `CtlSlot` (Mantine-coupled) for
  * the same reason — it carries only `data-basalt-tier="widget"`; a basalt control placed there
@@ -16,8 +16,10 @@ import type { CSSProperties, ReactNode } from 'react'
 import { cx } from '../../common/props'
 import type { BasaltProps, SlotStylesProps } from '../../common/props'
 import { VX } from '../../tokens'
-import { WidgetHeader } from '../../widget-header'
-import type { DeltaPolarity } from '../../widget-header'
+import { WidgetHeader } from '../../dashboard/widget-header'
+import type { DeltaPolarity } from '../../dashboard/delta-badge'
+import { ChartEmpty, ChartError, ChartPending, resolveChartState } from './ChartPending'
+import type { ChartState } from './ChartPending'
 
 // Surfaces resolve per theme via CSS vars, so the styles are static (no useMemo/isDark).
 // Depth = `shadow-card` (a whisper shadow + a 1px ring baked into the same value), never a
@@ -99,7 +101,22 @@ export type ChartCardProps = BasaltProps &
     count?: number
     /** Right-aligned slot — carries `data-basalt-tier="widget"` (no `CtlSlot`; see module doc). */
     actions?: ReactNode
-    children: ReactNode
+    /**
+     * Any resolved state (pending → error → empty, same precedence `resolveChartState` gives
+     * every chart kind) REPLACES `children` with its placeholder at `placeholderHeight` — the
+     * header still renders unchanged, so a card's title never reflows through the pending → drawn
+     * transition. `state={{}}` (or an all-falsy state) renders `children`, same as omitting the
+     * prop.
+     */
+    state?: ChartState
+    /** Body height while a placeholder shows. Default 240 (`ChartFrame`'s own default height). */
+    placeholderHeight?: number
+    /** Affordance under a pending/empty/error label — a retry button, a "clear filters" link.
+     * Forwarded to whichever placeholder resolves. */
+    stateAction?: ReactNode
+    /** Optional so a title-less pending card can BE a route's `<Suspense>` fallback
+     * (`<ChartCard state={{ pending: true }} placeholderHeight={320} />`, no `children` at all). */
+    children?: ReactNode
   }
 
 export function ChartCard({
@@ -113,11 +130,15 @@ export function ChartCard({
   deltaPolarity,
   count,
   actions,
+  state,
+  placeholderHeight = 240,
+  stateAction,
   className,
   classNames,
   style,
   children,
 }: ChartCardProps) {
+  const resolvedState = resolveChartState({ ...(state !== undefined && { state }) })
   const hasHeader =
     title !== undefined ||
     info !== undefined ||
@@ -127,7 +148,11 @@ export function ChartCard({
     count !== undefined
 
   return (
-    <div className={cx(classNames?.root, className)} style={{ ...cardStyle, ...style }}>
+    <div
+      className={cx(classNames?.root, className)}
+      style={{ ...cardStyle, ...style }}
+      {...(resolvedState === 'pending' && { 'aria-busy': 'true' })}
+    >
       {hasHeader && (
         <div
           {...(classNames?.header !== undefined && { className: classNames.header })}
@@ -154,7 +179,25 @@ export function ChartCard({
         {...(classNames?.body !== undefined && { className: classNames.body })}
         style={bodyClipStyle}
       >
-        {children}
+        {resolvedState === 'pending' ? (
+          <ChartPending width="100%" height={placeholderHeight} />
+        ) : resolvedState === 'error' ? (
+          <ChartError
+            width="100%"
+            height={placeholderHeight}
+            error={state?.error}
+            action={stateAction}
+          />
+        ) : resolvedState === 'empty' ? (
+          <ChartEmpty
+            width="100%"
+            height={placeholderHeight}
+            {...(typeof state?.empty === 'string' && { label: state.empty })}
+            action={stateAction}
+          />
+        ) : (
+          children
+        )}
       </div>
     </div>
   )

package/src/charts/primitives/ChartFrame.tsx

@@ -283,7 +283,11 @@ export function ChartFrame({
           ) : resolvedState === 'error' ? (
             <ChartError width={plot.width} height={plot.height} error={state?.error} />
           ) : resolvedState === 'empty' ? (
-            <ChartEmpty width={plot.width} height={plot.height} />
+            <ChartEmpty
+              width={plot.width}
+              height={plot.height}
+              {...(typeof state?.empty === 'string' && { label: state.empty })}
+            />
           ) : (
             children({ ...plot, hidden })
           ))}

package/src/charts/primitives/ChartPending.tsx

@@ -3,12 +3,14 @@ import type { BasaltProps } from '../../common/props'
 import { VX } from '../../tokens'
 
 export type ChartCenterProps = BasaltProps & {
-  width: number
+  /** A block body (a title-less pending `ChartCard`, a non-`ChartFrame` body) has no measured
+   * plot width to reserve — `'100%'` fills its container instead of a pixel figure. */
+  width: number | string
   height: number
   children: ReactNode
 }
 
-const centerStyle = (width: number, height: number): CSSProperties => ({
+const centerStyle = (width: number | string, height: number): CSSProperties => ({
   width,
   height,
   display: 'flex',
@@ -40,7 +42,7 @@ export function ChartCenter({
 }
 
 export type ChartPendingProps = BasaltProps & {
-  width: number
+  width: number | string
   height: number
   /** Default `'Loading…'`. */
   label?: string
@@ -113,8 +115,12 @@ export type ChartState = {
   pending?: boolean
   /** Truthy = the query failed. Any thrown value; an `Error`'s `message` is used as the label. */
   error?: unknown
-  /** The query resolved and there is genuinely nothing to plot. */
-  empty?: boolean
+  /**
+   * The query resolved and there is genuinely nothing to plot. `true`, or the empty label
+   * itself — a string is truthy AND the copy `ChartEmpty` paints, so a consumer with its own
+   * "No data" wording never needs a ternary around the placeholder.
+   */
+  empty?: boolean | string
 }
 
 /** Which placeholder {@link ChartState} resolves to, or `null` to draw the chart. */
@@ -132,12 +138,12 @@ export function resolveChartState(input: {
   const { state, isPending } = input
   if (isPending === true || state?.pending === true) return 'pending'
   if (state?.error !== undefined && state.error !== null && state.error !== false) return 'error'
-  if (state?.empty === true) return 'empty'
+  if (state?.empty) return 'empty'
   return null
 }
 
 export type ChartEmptyProps = BasaltProps & {
-  width: number
+  width: number | string
   height: number
   /** Default `'No data'`. */
   label?: string
@@ -188,7 +194,7 @@ export function ChartEmpty({
 }
 
 export type ChartErrorProps = BasaltProps & {
-  width: number
+  width: number | string
   height: number
   /** Overrides the text outright. Omitted, an `Error`'s own `message` is used, else
    * `'Could not load chart'` — a failure never borrows the empty state's copy. */