basalt-ui 1.26.0 → 1.28.0

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

@@ -48,6 +48,9 @@ import type {
   TranscriptPart,
 } from '../agent'
 import { coalesceParts, narrowAgentPart, PartList } from '../agent'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
 import { Markdown } from '../content/markdown'
 import { CopyAction } from '../content/copy-action'
 import { VX } from '../tokens'
@@ -57,6 +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'
 
 /** 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. */
@@ -185,10 +189,11 @@ function UnknownPartChip({ part }: { part: ForeignPart }): JSX.Element {
   )
 }
 
-/** Consulted only when `ThreadTranscript` gets no `fallbackRenderer` prop. `process.env.NODE_ENV`
- * (not `import.meta.env` — basalt-ui bans it) is read INSIDE the render so tests can flip it. */
+/** Consulted only when `ThreadTranscript` gets no `fallbackRenderer` prop. `isDev()` reads
+ * `process.env.NODE_ENV` (not `import.meta.env` — basalt-ui bans it) INSIDE the render so tests can
+ * flip it. */
 const DEFAULT_FALLBACK_RENDERER: PartRenderer<ForeignPart> = ({ part }) =>
-  process.env['NODE_ENV'] !== 'production' ? <UnknownPartChip part={part} /> : null
+  isDev() ? <UnknownPartChip part={part} /> : null
 
 // ── Part resolution — the three-step order that is the whole design ───────────
 //
@@ -544,6 +549,7 @@ function areMessageBlockPropsEqual(prev: MessageBlockProps, next: MessageBlockPr
 }
 
 const MessageBlock = memo(MessageBlockImpl, areMessageBlockPropsEqual)
+MessageBlock.displayName = 'MessageBlock'
 
 // ── Virtualization (AGENT-CHAT-SPEC.md §9) ─────────────────────────────────────
 //
@@ -594,7 +600,7 @@ type TranscriptRow = {
   readonly node: JSX.Element
 }
 
-type VirtualizedTranscriptProps = {
+type VirtualizedTranscriptProps = BasaltProps & {
   readonly rows: readonly TranscriptRow[]
   readonly height: number | string
   readonly overscan: number
@@ -613,10 +619,15 @@ type VirtualizedTranscriptProps = {
  * settle a genuine unmount/remount of every rendered row, re-firing each row's effects once and
  * risking hitting a message mid-stream during the resolve window.
  */
-function NonVirtualizedRows({ rows, height }: VirtualizedTranscriptProps): JSX.Element {
+function NonVirtualizedRows({
+  rows,
+  height,
+  className,
+  style,
+}: VirtualizedTranscriptProps): JSX.Element {
   return (
     // theme-allow raw-scroll-container — degrade target owns its own scroll node, same as the real virtualizer below.
-    <Box style={{ height, overflow: 'auto' }}>
+    <Box className={cx(className)} style={{ height, overflow: 'auto', ...style }}>
       <Stack gap="sm">
         {rows.map((row) => (
           <Fragment key={row.key}>{row.node}</Fragment>
@@ -834,6 +845,8 @@ const LazyVirtualizedRows = lazy(() =>
         overscan,
         estimateSize,
         initialScroll,
+        className,
+        style,
       }: VirtualizedTranscriptProps): JSX.Element {
         const parentRef = useRef<HTMLDivElement>(null)
         const initialScrollStateRef = useRef<InitialScrollState>({
@@ -895,8 +908,12 @@ const LazyVirtualizedRows = lazy(() =>
         })
 
         return (
-          // theme-allow raw-scroll-container — TanStack Virtual measures/scrolls this element (never nest in BasaltStickToBottom, see ./virtualize).
-          <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+          <Box
+            ref={parentRef}
+            className={cx(className)}
+            // theme-allow raw-scroll-container — TanStack Virtual measures/scrolls this element (never nest in BasaltStickToBottom, see ./virtualize).
+            style={{ height, overflow: 'auto', ...style }}
+          >
             <Box style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
               {virtualizer.getVirtualItems().map((virtualItem) => {
                 const row = rows[virtualItem.index]
@@ -929,6 +946,7 @@ const LazyVirtualizedRows = lazy(() =>
     })
     .catch(() => ({ default: NonVirtualizedRows })),
 )
+Object.assign(LazyVirtualizedRows, { displayName: 'LazyVirtualizedRows' })
 
 /**
  * Lightweight `Suspense` fallback for `VirtualizedTranscript` — shown only for the one tick the
@@ -937,14 +955,26 @@ const LazyVirtualizedRows = lazy(() =>
  * unmount/remount of the whole transcript. An empty, correctly-sized scroll pane avoids a layout
  * flash without paying that cost — it settles state before any row has meaningfully mounted.
  */
-function VirtualizeSuspenseFallback({ height }: { readonly height: number | string }): JSX.Element {
+function VirtualizeSuspenseFallback({
+  height,
+  className,
+  style,
+}: BasaltProps & { readonly height: number | string }): JSX.Element {
   // theme-allow raw-scroll-container — placeholder owns its own scroll node, matching the real virtualizer's shape.
-  return <Box style={{ height, overflow: 'auto' }} />
+  return <Box className={cx(className)} style={{ height, overflow: 'auto', ...style }} />
 }
 
 function VirtualizedTranscript(props: VirtualizedTranscriptProps): JSX.Element {
   return (
-    <Suspense fallback={<VirtualizeSuspenseFallback height={props.height} />}>
+    <Suspense
+      fallback={
+        <VirtualizeSuspenseFallback
+          height={props.height}
+          {...(props.className !== undefined && { className: props.className })}
+          {...(props.style !== undefined && { style: props.style })}
+        />
+      }
+    >
       <LazyVirtualizedRows {...props} />
     </Suspense>
   )
@@ -954,7 +984,7 @@ function VirtualizedTranscript(props: VirtualizedTranscriptProps): JSX.Element {
 
 const EMPTY_RENDERERS: PartRenderers = {}
 
-type ThreadTranscriptBase = {
+type ThreadTranscriptBase = BasaltProps & {
   /** Settled messages for the thread, oldest first. */
   readonly messages: readonly ChatMessage<TranscriptPart>[]
   /** The live (in-flight) assistant turn's parts, when a run is streaming for this thread. */
@@ -1050,7 +1080,10 @@ export function ThreadTranscript(props: ThreadTranscriptProps): JSX.Element {
     fallbackRenderer = DEFAULT_FALLBACK_RENDERER,
     affordances: affordancesProp,
     groupConsecutive = true,
+    className,
+    style,
   } = props
+  assertRequiredProps('ThreadTranscript', { messages }, ['messages'])
   const virtualized = resolveVirtualize(props)
 
   // Mirrors PartList's own `useMemo` (part-list.tsx:290) — avoids rebuilding the renderer
@@ -1166,12 +1199,14 @@ export function ThreadTranscript(props: ThreadTranscriptProps): JSX.Element {
         overscan={virtualized.options.overscan ?? DEFAULT_VIRTUALIZE_OVERSCAN}
         estimateSize={virtualized.options.estimateSize ?? DEFAULT_VIRTUALIZE_ESTIMATE_SIZE}
         initialScroll={virtualized.options.initialScroll ?? DEFAULT_VIRTUALIZE_INITIAL_SCROLL}
+        {...(className !== undefined && { className })}
+        {...(style !== undefined && { style })}
       />
     )
   }
 
   return (
-    <Stack gap="sm">
+    <Stack gap="sm" className={cx(className)} {...(style !== undefined && { style })}>
       {rows.map((row) => (
         <Fragment key={row.key}>{row.node}</Fragment>
       ))}

package/src/agent-chat/thread-outcome-card.tsx

@@ -22,6 +22,9 @@ import { Badge, Group, Skeleton, Stack, Text, UnstyledButton } from '@mantine/co
 import { useHover } from '@mantine/hooks'
 import type { JSX } from 'react'
 import type { AgentThread, ThreadStatus } from '../agent'
+import { assertRequiredProps } from '../common/validate'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
 import { alpha, VX } from '../tokens'
 import { formatRelativeTime } from './relative-time'
 
@@ -118,7 +121,7 @@ function OutcomeBody({ thread }: { thread: AgentThread }): JSX.Element {
 
 // ── ThreadOutcomeCard ─────────────────────────────────────────────────────────
 
-export type ThreadOutcomeCardProps = {
+export type ThreadOutcomeCardProps = BasaltProps & {
   readonly thread: AgentThread
   /** Whether this row is the active/open thread — applies a subtle highlight. */
   readonly selected: boolean
@@ -138,7 +141,10 @@ export function ThreadOutcomeCard({
   thread,
   selected,
   onSelect,
+  className,
+  style,
 }: ThreadOutcomeCardProps): JSX.Element {
+  assertRequiredProps('ThreadOutcomeCard', { thread }, ['thread'])
   const { hovered, ref } = useHover<HTMLButtonElement>()
   const isPreviewing =
     thread.outcome === null && (thread.status === 'pending' || thread.status === 'streaming')
@@ -157,6 +163,7 @@ export function ThreadOutcomeCard({
       ref={ref}
       onClick={onSelect}
       w="100%"
+      className={cx(className)}
       style={{
         display: 'block',
         padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-sm)',
@@ -164,6 +171,7 @@ export function ThreadOutcomeCard({
         boxShadow: VX.shadowCard,
         backgroundColor: background,
         transition: 'background-color 120ms ease',
+        ...style,
       }}
     >
       {isPreviewing ? <OutcomeSkeleton /> : <OutcomeBody thread={thread} />}

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

@@ -32,46 +32,58 @@
  *   )
  * }
  */
-import { Box, Divider, Flex, Skeleton, Stack, Text } from '@mantine/core'
+import { Box, Divider, Flex, Skeleton, Stack, Text, useMantineTheme } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
 import type { JSX, ReactNode } from 'react'
 import type { AgentPart, AgentTransport, OutcomeResolver, ThreadsStore } from '../agent'
 import { useAgentThreadRuns } from '../agent'
+import { cx } from '../common/props'
+import type { BasaltProps, SlotStylesProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
 import { VX } from '../tokens'
 import { Composer } from './composer'
 import { ThreadDetailPanel } from './thread-detail-panel'
 import { ThreadFeed } from './thread-feed'
 
-const NARROW_BREAKPOINT = '(max-width: 768px)'
 const DETAIL_PANEL_WIDTH = 'clamp(440px, 40%, 520px)'
 
-export type ThreadWorkspaceProps = {
-  /**
-   * The thread-store hook, created ONCE at module scope via `createThreadsStore` and passed in —
-   * ThreadWorkspace must not call `createThreadsStore` itself.
-   */
-  readonly useThreads: () => ThreadsStore
-  /** The injected transport seam — one stream per `start()` call. */
-  readonly transport: AgentTransport<AgentPart, string>
-  /** Distills a finished thread into a feed-ready `AgentOutcome`. */
-  readonly resolveOutcome: OutcomeResolver<AgentPart>
-  /** Placeholder for the new-thread composer pinned under the feed. */
-  readonly newThreadPlaceholder?: string
-  /**
-   * Rendered in place of the feed once the store is hydrated and there really are no threads.
-   * Shown ONLY when `store.hydrated` is true — while an async store's initial load is still in
-   * flight, `ThreadWorkspace` holds a neutral loading state instead (see `FeedHydratingState`),
-   * so a server-backed workspace never asserts "no threads yet" before it actually knows that.
-   */
-  readonly emptyState?: ReactNode
-  /**
-   * Rendered in place of the feed when the store's initial load has failed — `!store.hydrated &&
-   * store.error !== undefined` (see `ThreadsStore.hydrated`'s doc for the discriminant). Shown
-   * instead of `FeedHydratingState`, so a rejected `listThreads` surfaces a legible failure rather
-   * than an endless skeleton.
-   */
-  readonly errorState?: ReactNode
-}
+// Static across every instance, so it stays a module-level constant rather than a per-render
+// literal, letting the no-override case keep a stable reference.
+const FULL_HEIGHT_STYLE = { height: '100%' } as const
+
+/** The four boxes `ThreadWorkspace` paints: `root` is the outermost pane split, `feed` is the
+ * thread-list pane, `composer` is the new-thread composer pinned under the feed, `detail` is the
+ * right-hand (or, below 768px, full-screen) open-thread pane. */
+export type ThreadWorkspaceSlot = 'root' | 'feed' | 'composer' | 'detail'
+
+export type ThreadWorkspaceProps = BasaltProps &
+  SlotStylesProps<ThreadWorkspaceSlot> & {
+    /**
+     * The thread-store hook, created ONCE at module scope via `createThreadsStore` and passed in —
+     * ThreadWorkspace must not call `createThreadsStore` itself.
+     */
+    readonly useThreads: () => ThreadsStore
+    /** The injected transport seam — one stream per `start()` call. */
+    readonly transport: AgentTransport<AgentPart, string>
+    /** Distills a finished thread into a feed-ready `AgentOutcome`. */
+    readonly resolveOutcome: OutcomeResolver<AgentPart>
+    /** Placeholder for the new-thread composer pinned under the feed. */
+    readonly newThreadPlaceholder?: string
+    /**
+     * Rendered in place of the feed once the store is hydrated and there really are no threads.
+     * Shown ONLY when `store.hydrated` is true — while an async store's initial load is still in
+     * flight, `ThreadWorkspace` holds a neutral loading state instead (see `FeedHydratingState`),
+     * so a server-backed workspace never asserts "no threads yet" before it actually knows that.
+     */
+    readonly emptyState?: ReactNode
+    /**
+     * Rendered in place of the feed when the store's initial load has failed — `!store.hydrated &&
+     * store.error !== undefined` (see `ThreadsStore.hydrated`'s doc for the discriminant). Shown
+     * instead of `FeedHydratingState`, so a rejected `listThreads` surfaces a legible failure rather
+     * than an endless skeleton.
+     */
+    readonly errorState?: ReactNode
+  }
 
 /** Default hint shown in the feed pane once hydrated with no threads (overridable via `emptyState`). */
 function FeedEmptyState(): JSX.Element {
@@ -146,10 +158,19 @@ export function ThreadWorkspace({
   newThreadPlaceholder,
   emptyState,
   errorState,
+  className,
+  style,
+  classNames,
 }: ThreadWorkspaceProps): JSX.Element {
+  assertRequiredProps('ThreadWorkspace', { useThreads }, ['useThreads'])
   const store = useThreads()
   const runs = useAgentThreadRuns({ transport, store, resolveOutcome })
-  const narrow = useMediaQuery(NARROW_BREAKPOINT)
+  // Matches `shell/page-aside.tsx`'s own `theme.breakpoints.sm` desktop check — read off the theme,
+  // not hardcoded, so a consumer that retunes `breakpoints.sm` moves the aside and this workspace
+  // together. `max-width` is the min-width complement: `sm − 0.00625em` (the same 0.1px offset
+  // Mantine's own CSS breakpoints use), so the two checks never straddle the same pixel.
+  const theme = useMantineTheme()
+  const narrow = useMediaQuery(`(max-width: calc(${theme.breakpoints.sm} - 0.00625em))`)
 
   const threads = store.threads
   const activeThread = threads.find((thread) => thread.id === store.activeId) ?? null
@@ -186,7 +207,12 @@ export function ThreadWorkspace({
   // A plain pane, NOT a card — the feed's own rows carry the card idiom (docs/DESIGN-SPEC.md §5),
   // so this pane stays flush with the page and the feed/detail split reads via the divider token.
   const feed = (
-    <Flex direction="column" h="100%" style={{ overflow: 'hidden' }}>
+    <Flex
+      direction="column"
+      h="100%"
+      className={cx(classNames?.feed)}
+      style={{ overflow: 'hidden' }}
+    >
       <Box style={{ flex: 1, minHeight: 0 }}>
         {threads.length === 0 ? (
           store.hydrated ? (
@@ -205,6 +231,7 @@ export function ThreadWorkspace({
         <Composer
           onSubmit={({ text }) => handleNewThread(text)}
           {...(newThreadPlaceholder !== undefined ? { placeholder: newThreadPlaceholder } : {})}
+          {...(classNames?.composer !== undefined && { className: classNames.composer })}
         />
       </Box>
     </Flex>
@@ -219,15 +246,27 @@ export function ThreadWorkspace({
       onStop={handleStop}
       onRetry={handleRetry}
       onClose={() => store.select(null)}
+      {...(classNames?.detail !== undefined && { className: classNames.detail })}
     />
   )
 
   if (narrow) {
-    return <Box style={{ height: '100%' }}>{store.activeId !== null ? detail : feed}</Box>
+    return (
+      <Box
+        className={cx(classNames?.root, className)}
+        style={style ? { ...FULL_HEIGHT_STYLE, ...style } : FULL_HEIGHT_STYLE}
+      >
+        {store.activeId !== null ? detail : feed}
+      </Box>
+    )
   }
 
   return (
-    <Flex style={{ height: '100%' }} gap="md">
+    <Flex
+      className={cx(classNames?.root, className)}
+      style={style ? { ...FULL_HEIGHT_STYLE, ...style } : FULL_HEIGHT_STYLE}
+      gap="md"
+    >
       <Box
         style={{
           flex: 1,

package/src/agent-chat/tool-chip.tsx

@@ -21,6 +21,9 @@ import { useDisclosure } from '@mantine/hooks'
 import type { JSX } from 'react'
 import { isToolCallSettled } from '../agent'
 import type { ToolCallPart } from '../agent'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
 import { alpha, VX } from '../tokens'
 
 // Mirrors thread-message.tsx's micro-label/rail/code-block idiom (docs/DESIGN-SPEC.md §3/§5) —
@@ -96,7 +99,7 @@ function formatDuration(ms: number): string {
   return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${Math.round(ms)}ms`
 }
 
-export type ToolChipProps = {
+export type ToolChipProps = BasaltProps & {
   readonly part: ToolCallPart
   readonly defaultExpanded?: boolean
   /** Rendered only in 'approval-requested'. Omit both to render a read-only chip. */
@@ -119,7 +122,10 @@ export function ToolChip({
   defaultExpanded = false,
   onApprove,
   onDeny,
+  className,
+  style,
 }: ToolChipProps): JSX.Element {
+  assertRequiredProps('ToolChip', { part }, ['part'])
   const [expanded, { toggle }] = useDisclosure(defaultExpanded)
   const { label, dotToken } = stateMeta(part)
   const settled = isToolCallSettled(part)
@@ -128,7 +134,7 @@ export function ToolChip({
   const rawInput = part.state === 'output-error' ? part.rawInput : undefined
 
   return (
-    <Box style={RAIL_STYLE}>
+    <Box className={cx(className)} style={style ? { ...RAIL_STYLE, ...style } : RAIL_STYLE}>
       <Stack gap={4}>
         <UnstyledButton onClick={toggle}>
           <Group gap={6} align="center" wrap="nowrap">

package/src/charts/hooks/useBandPlot.ts

@@ -17,12 +17,12 @@
 import { scaleBand } from '@visx/scale'
 import { useCallback, useMemo, useRef } from 'react'
 import type { ReactNode, RefObject } from 'react'
-import { VX } from '../../tokens'
 import type { ChartMargin } from '../../tokens'
 import type { CursorResolution } from '../cursor/resolve'
 import { autoMargin } from '../layout/auto-margin'
+import { useChartTierMetrics } from '../primitives/chart-tier'
 import { maxTextWidth } from '../utils/measure-text'
-import { smartTicks } from '../utils/ticks'
+import { smartTicks, xLabelPxFor } from '../utils/ticks'
 import { useChartCursor } from './useChartCursor'
 import type { ChartCursor, CursorAnchor } from './useChartCursor'
 
@@ -177,6 +177,12 @@ export function useBandPlot<T>(input: UseBandPlotInput<T>): BandPlot<T> {
     tooltip,
   } = input
 
+  // The tier `ChartFrame` resolved from its own MEASURED width. A banded plot needs exactly the
+  // two things `CartesianChart` reads off it: the tick font its gutters are MEASURED at (the same
+  // one `AxisBottomDate` paints — measured labels must be the painted labels, §1) and the tightened
+  // margin FLOORS (`docs/CHARTS-SPEC.md` §8).
+  const tier = useChartTierMetrics()
+
   const hasLeftAxis = leftLabels !== undefined && leftLabels.length > 0
   const xLabelsAll = useMemo(() => data.map((d) => formatX(getX(d))), [data, getX, formatX])
 
@@ -185,11 +191,13 @@ export function useBandPlot<T>(input: UseBandPlotInput<T>): BandPlot<T> {
     const measured = autoMargin({
       ...(leftLabels !== undefined && { left: leftLabels }),
       bottom: xLabelsAll,
+      fontPx: tier.axisFont,
+      floor: tier.margin,
       ...(marginOverride !== undefined && { override: marginOverride }),
     })
     if (marginOverride?.left !== undefined && marginOverride.right !== undefined) return measured
 
-    const halfXLabel = Math.ceil(maxTextWidth(xLabelsAll, VX.axisFont) / 2)
+    const halfXLabel = Math.ceil(maxTextWidth(xLabelsAll, tier.axisFont) / 2)
     // A band axis puts its FIRST tick on the plot's left edge, so the left gutter needs the same
     // half-label law `autoMargin` already applies on the right. `autoMargin` cannot know that —
     // its left law measures a left AXIS, which a band plot may not have.
@@ -199,18 +207,18 @@ export function useBandPlot<T>(input: UseBandPlotInput<T>): BandPlot<T> {
       ...(marginOverride?.left === undefined && {
         left: hasLeftAxis
           ? left
-          : capTerminalGutter(left, width, TERMINAL_GUTTER_MAX_FRACTION.left, VX.margin.left),
+          : capTerminalGutter(left, width, TERMINAL_GUTTER_MAX_FRACTION.left, tier.margin.left),
       }),
       ...(marginOverride?.right === undefined && {
         right: capTerminalGutter(
           measured.right,
           width,
           TERMINAL_GUTTER_MAX_FRACTION.right,
-          VX.margin.right,
+          tier.margin.right,
         ),
       }),
     }
-  }, [leftLabels, xLabelsAll, marginOverride, hasLeftAxis, width])
+  }, [leftLabels, xLabelsAll, marginOverride, hasLeftAxis, width, tier.axisFont, tier.margin])
 
   const plotWidth = Math.max(width - margin.left - margin.right, 0)
 
@@ -250,11 +258,21 @@ export function useBandPlot<T>(input: UseBandPlotInput<T>): BandPlot<T> {
     ...(cursorResolution !== undefined && { resolution: cursorResolution }),
   })
 
+  // The horizontal room one x tick label needs, from the labels `smartTicks` could actually pick —
+  // same measured-spacing law `CartesianChart` applies (`docs/CHARTS-SPEC.md` §1). `keys` (not
+  // `xLabelsAll`) because ticks are chosen from the post-fold key list.
+  const xLabelPx = useMemo(
+    () => xLabelPxFor(keys.map(formatX), tier.axisFont),
+    [keys, formatX, tier.axisFont],
+  )
+
   const tickValues = useMemo(
     () => [
-      ...(xTickValues === undefined ? smartTicks(keys, plotWidth) : xTickValues(keys, plotWidth)),
+      ...(xTickValues === undefined
+        ? smartTicks(keys, plotWidth, xLabelPx)
+        : xTickValues(keys, plotWidth)),
     ],
-    [keys, plotWidth, xTickValues],
+    [keys, plotWidth, xTickValues, xLabelPx],
   )
 
   const svgRef = useRef<SVGSVGElement>(null)

package/src/charts/index.ts

@@ -42,6 +42,8 @@ export {
 export {
   type SeriesMark,
   type SeriesDash,
+  type SeriesCurve,
+  curveFor,
   type SeriesRole,
   type LegendPlacement,
   type ChartLegendConfig,
@@ -73,10 +75,25 @@ export {
   type ChartCenterProps,
   ChartPending,
   type ChartPendingProps,
+  ChartEmpty,
+  type ChartEmptyProps,
+  ChartError,
+  type ChartErrorProps,
+  type ChartState,
+  type ResolvedChartState,
+  resolveChartState,
 } from './primitives/ChartPending'
+export {
+  useChartTier,
+  useChartTierMetrics,
+  chartTierMetrics,
+  resolveChartTier,
+  type ChartTier,
+  type ChartTierMetrics,
+} from './primitives/chart-tier'
 export { Crosshair, SeriesDot } from './primitives/Crosshair'
 export { HatchPattern, hatchFill, hatchSizeFor } from './primitives/HatchPattern'
-export { ChartCard, type ChartCardProps } from './primitives/ChartCard'
+export { ChartCard, type ChartCardProps, type ChartCardSlot } from './primitives/ChartCard'
 export { ChartLegend, type LegendEntry } from './primitives/ChartLegend'
 export {
   ChartTooltipFloat,
@@ -102,8 +119,19 @@ export type { CursorResolution, DomainKind } from './cursor/resolve'
 export { useChartSize, type UseChartSizeResult, type ChartSize } from './hooks/useChartSize'
 
 // ── Utils ────────────────────────────────────────────────────────────────
-export { fmtAxisDate, fmtTooltipDate } from './utils/format'
-export { smartTicks, smartTicksEvery } from './utils/ticks'
+export {
+  fmtAxisDate,
+  fmtTooltipDate,
+  fmtCompact,
+  type FmtCompactOptions,
+  fmtPercent,
+  type FmtPercentOptions,
+  fmtCurrency,
+  type FmtCurrencyOptions,
+  fmtInt,
+  formatters,
+} from './utils/format'
+export { smartTicks, smartTicksEvery, xLabelPxFor, autoXLabelRotate } from './utils/ticks'
 export { autoMargin, probeAxisLabels, type AutoMarginInput } from './layout/auto-margin'
 export { measureText, maxTextWidth } from './utils/measure-text'
 
@@ -140,7 +168,12 @@ export {
 export { MirroredBars, type MirroredBarsProps, type MirroredBarPane } from './kinds/MirroredBars'
 
 // ── Sparklines ───────────────────────────────────────────────────────────
-export { LineSparkline, BarSparkline } from './sparklines'
+export {
+  LineSparkline,
+  type LineSparklineProps,
+  BarSparkline,
+  type BarSparklineProps,
+} from './sparklines'
 
 // ── Re-exported visx primitives ──────────────────────────────────────────
 // Bespoke charts (genuinely unique compositions per CLAUDE.md) need raw
@@ -155,6 +188,8 @@ export {
   curveMonotoneX,
   curveLinear,
   curveCatmullRom,
+  curveStep,
   curveStepAfter,
+  curveStepBefore,
   curveBasis,
 } from '@visx/curve'