@lovett/ui 0.0.10 → 0.1.0

package/src/popover.tsx

@@ -0,0 +1,407 @@
+/**
+ * Popover — an anchored, non-modal floating surface with focus management.
+ *
+ * Compound: `<Popover>` (state) + `<Popover.Trigger>` + `<Popover.Content>`.
+ * Controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ * Content portals to `document.body`, positions through
+ * `useAnchoredPosition` (flip + clamp), enters with `.ds-enter-pop` once
+ * positioned, and registers on the shared dismiss-layer stack — so Escape
+ * closes ONLY the topmost surface (a Popover inside a Modal closes before
+ * the Modal does) and an outside pointerdown closes it unless the pointer
+ * landed in a layer stacked above (a Select opened from inside it).
+ *
+ * Focus: opening moves focus into the content — the `[data-autofocus]`
+ * control if one is marked, else the first tabbable, else the content
+ * itself (`tabIndex={-1}`) — once the content is POSITIONED, not on the
+ * first frame: that frame is parked off-screen with `visibility: hidden`,
+ * and no browser will focus into a hidden subtree (the call is a silent
+ * no-op). Closing returns focus to the trigger, EXCEPT
+ * after an outside click, where the user has already put focus where they
+ * want it and yanking it back to the trigger would be wrong.
+ *
+ * Promoted per ADR-0030 Decision G (meta-ads-audit-dashboard task manager:
+ * the row / card / context-menu / palette pickers all sit in a popover with
+ * search + live counts). Second consumer is the workspace app, which has
+ * three hand-rolled popovers today (sidebar user menu, group-settings
+ * colour and icon pickers, CalculatorShell's AssumptionsPopover) — each a
+ * migration target. DropdownMenu stays a sibling on the same hook and stack
+ * rather than a Popover child: a menu does NOT move focus into itself on
+ * open, and 137 call sites depend on that.
+ *
+ * Trigger is an unstyled `<button type="button">` by default — Popover is a
+ * generic surface, the caller chooses the trigger's look. Pass `asChild` to
+ * make the single child element the trigger instead (a `<Button>`, a table
+ * cell, a chip): it receives the ref, the click handler and the ARIA
+ * attributes, and the DOM stays one element. The child must be keyboard-
+ * operable ON ITS OWN: Trigger adds ARIA + click only, no role, tabIndex or
+ * key handler. A native `<button>` / `<a href>` already is; a `<td>` or
+ * `<span>` needs `role="button"`, `tabIndex={0}` and its own Enter / Space
+ * handling, or only mouse users can open the popover.
+ *
+ * Content is `role="dialog"` (non-modal — no `aria-modal`) and needs a name
+ * from the caller (`aria-label` / `aria-labelledby`). Pass `role="none"`
+ * when the content IS the widget (a listbox, a menu) and would otherwise
+ * nest roles.
+ *
+ * Token discipline: the surface reads the INTERNAL `--popover` /
+ * `--popover-foreground` (allowed in packages/ui, ESLint-enforced elsewhere)
+ * plus public `--border`, `--shadow-lg`, `--radius-lg`. Geometry comes from
+ * the hook; motion from `.ds-enter-pop` (`--dur-fast` / `--ease-out`, honours
+ * prefers-reduced-motion in styles.css). No hex, no raw px in classes.
+ *
+ * Usage:
+ *
+ *   <Popover>
+ *     <Popover.Trigger asChild>
+ *       <Button variant="secondary">Assignee</Button>
+ *     </Popover.Trigger>
+ *     <Popover.Content aria-label="Pick an assignee" align="start">
+ *       <input data-autofocus placeholder="Search people…" />
+ *       …
+ *     </Popover.Content>
+ *   </Popover>
+ *
+ *   // Virtual anchor (ContextMenu later): no Trigger, position at a point.
+ *   <Popover open={!!point} onOpenChange={…} anchorRect={point}>
+ *     <Popover.Content role="none">…</Popover.Content>
+ *   </Popover>
+ */
+
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type HTMLAttributes,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from './lib/utils'
+import { composeRefs } from './lib/refs'
+import { tabbablesWithin } from './lib/focus'
+import { useLayer } from './lib/layer-stack'
+import {
+  useAnchoredPosition,
+  useOutsideClick,
+  type AnchorAlign,
+  type AnchorRect,
+  type AnchorSide,
+} from './lib/anchor'
+
+/**
+ * The popover surface chrome, shared with DropdownMenuContent so a menu and
+ * a popover read as the same family. Inline rather than a stylesheet class
+ * because the surface tokens are internal and the primitives already own
+ * them here (Kbd, DropdownMenu follow the same pattern).
+ */
+export const POPOVER_SURFACE_STYLE: CSSProperties = {
+  background: 'rgb(var(--popover))',
+  color: 'rgb(var(--popover-foreground))',
+  border: '1px solid rgb(var(--border))',
+  boxShadow: 'var(--shadow-lg)',
+}
+
+interface PopoverContextValue {
+  open: boolean
+  setOpen: (next: boolean) => void
+  triggerRef: RefObject<HTMLElement | null>
+  contentId: string
+  anchorRect: AnchorRect | null
+  /** Set when the close came from an outside pointerdown; skips focus return. */
+  interactedOutsideRef: RefObject<boolean>
+}
+
+const PopoverCtx = createContext<PopoverContextValue | null>(null)
+
+function usePopoverCtx(consumer: string): PopoverContextValue {
+  const ctx = useContext(PopoverCtx)
+  if (!ctx) {
+    throw new Error(
+      `${consumer} must be rendered inside <Popover>. ` +
+        `Wrap your trigger + content with the Popover root component.`,
+    )
+  }
+  return ctx
+}
+
+export interface PopoverProps {
+  /** Controlled open state. Omit for internal state. */
+  open?: boolean
+  defaultOpen?: boolean
+  /** Fires whenever open transitions. */
+  onOpenChange?: (open: boolean) => void
+  /**
+   * Virtual anchor. When non-null, Content positions against this rect
+   * instead of the Trigger — a right-click point, a caret, a cell.
+   */
+  anchorRect?: AnchorRect | null
+  children: ReactNode
+}
+
+function PopoverRoot({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  anchorRect = null,
+  children,
+}: PopoverProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen))
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? Boolean(controlledOpen) : uncontrolledOpen
+  const triggerRef = useRef<HTMLElement | null>(null)
+  const interactedOutsideRef = useRef(false)
+  const generatedId = useId()
+  const contentId = `popover-${generatedId.replace(/:/g, '')}`
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setUncontrolledOpen(next)
+      onOpenChange?.(next)
+    },
+    [isControlled, onOpenChange],
+  )
+
+  const value = useMemo<PopoverContextValue>(
+    () => ({ open, setOpen, triggerRef, contentId, anchorRect, interactedOutsideRef }),
+    [open, setOpen, contentId, anchorRect],
+  )
+
+  return <PopoverCtx.Provider value={value}>{children}</PopoverCtx.Provider>
+}
+
+export interface PopoverTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Render the single child element as the trigger instead of a `<button>`.
+   * The child receives the ref, click handler and ARIA attributes; the DOM
+   * stays one element. It must be focusable and keyboard-operable on its
+   * own (a `<button>`, an `<a href>`, or `role="button"` + `tabIndex={0}` +
+   * Enter / Space handling): Trigger adds no role, tabIndex or key handler.
+   */
+  asChild?: boolean
+}
+
+type TriggerChildProps = HTMLAttributes<HTMLElement> & {
+  ref?: Ref<HTMLElement>
+  'data-state'?: string
+}
+
+const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(
+  function PopoverTrigger({ asChild, onClick, children, ...rest }, forwardedRef) {
+    const { open, setOpen, triggerRef, contentId } = usePopoverCtx('Popover.Trigger')
+
+    const ariaProps = {
+      'aria-haspopup': 'dialog',
+      'aria-expanded': open,
+      'aria-controls': open ? contentId : undefined,
+      'data-state': open ? 'open' : 'closed',
+    } as const
+
+    if (asChild) {
+      if (!isValidElement<TriggerChildProps>(children)) {
+        throw new Error('Popover.Trigger with `asChild` expects exactly one element child.')
+      }
+      const child = children
+      const childOnClick = child.props.onClick
+      return cloneElement(child, {
+        ...rest,
+        ...ariaProps,
+        ref: composeRefs<HTMLElement>(child.props.ref, forwardedRef, triggerRef),
+        onClick: (event: ReactMouseEvent<HTMLElement>) => {
+          childOnClick?.(event)
+          onClick?.(event as ReactMouseEvent<HTMLButtonElement>)
+          if (!event.defaultPrevented) setOpen(!open)
+        },
+      })
+    }
+
+    return (
+      <button
+        ref={composeRefs<HTMLElement>(forwardedRef, triggerRef)}
+        type="button"
+        {...ariaProps}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) setOpen(!open)
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+
+export interface PopoverContentProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+  children: ReactNode
+  /** Preferred side of the anchor. Default `bottom`. Flips when it cannot fit. */
+  side?: AnchorSide
+  /** Alignment along the anchor's cross axis. Default `start`. */
+  align?: AnchorAlign
+  /** Gap from the anchor, px. Default 6. */
+  offset?: number
+  /** Shift along the alignment axis, px. Default 0. */
+  alignOffset?: number
+  /** Default true. */
+  flip?: boolean
+  /** Default true. */
+  clampToViewport?: boolean
+  /**
+   * `dialog` (default) — a named, non-modal dialog; give it `aria-label` or
+   * `aria-labelledby`. `none` — no role attribute, for content that is
+   * itself the widget.
+   */
+  role?: 'dialog' | 'none'
+  /** Skip the surface chrome (background / border / shadow / radius / padding). */
+  unstyled?: boolean
+}
+
+const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
+  function PopoverContent(
+    {
+      children,
+      side = 'bottom',
+      align = 'start',
+      offset = 6,
+      alignOffset = 0,
+      flip = true,
+      clampToViewport = true,
+      role = 'dialog',
+      unstyled,
+      className,
+      style,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const { open, setOpen, triggerRef, contentId, anchorRect, interactedOutsideRef } =
+      usePopoverCtx('Popover.Content')
+    const contentRef = useRef<HTMLDivElement | null>(null)
+
+    const {
+      ref: positionRef,
+      style: positionStyle,
+      placement,
+      positioned,
+    } = useAnchoredPosition<HTMLDivElement>({
+      anchorRef: triggerRef,
+      anchorRect,
+      side,
+      align,
+      offset,
+      alignOffset,
+      flip,
+      clampToViewport,
+      enabled: open,
+    })
+
+    const layer = useLayer({
+      enabled: open,
+      kind: 'popover',
+      elementRef: contentRef,
+      onEscape: () => setOpen(false),
+    })
+
+    useOutsideClick(
+      [triggerRef, contentRef],
+      () => {
+        interactedOutsideRef.current = true
+        setOpen(false)
+      },
+      { enabled: open, layer },
+    )
+
+    // Focus in once the content is POSITIONED, back to the trigger on close.
+    // Not on `open`: the first open frame is the parked one (off-screen,
+    // `visibility: hidden`), and Chromium, Firefox and WebKit all refuse to
+    // focus into a visibility:hidden subtree, so a focus() there is a silent
+    // no-op and focus stays on the trigger. `positioned` flips true in the
+    // re-render the measuring layout effect triggers, after the parked frame
+    // has already flushed its passive effects. jsdom does not enforce the
+    // rule, which is why the test records `data-positioned` at focus time.
+    // Keyed on state, not an inline callback, so `onOpenChange` identity
+    // churn never re-runs it mid-interaction.
+    useEffect(() => {
+      if (!open || !positioned) return
+      const node = contentRef.current
+      if (!node) return
+      interactedOutsideRef.current = false
+      // Captured now, not in the cleanup: the trigger does not change while
+      // the popover is open, and a remounted one would be disconnected.
+      const trigger = triggerRef.current
+      const previous =
+        document.activeElement instanceof HTMLElement &&
+        document.activeElement !== document.body
+          ? document.activeElement
+          : null
+      const initial =
+        node.querySelector<HTMLElement>('[data-autofocus]') ??
+        tabbablesWithin(node)[0] ??
+        node
+      initial.focus()
+
+      return () => {
+        if (interactedOutsideRef.current) return
+        // The content is gone by now, so a focus that was inside it has
+        // already fallen to <body>. Anything else means the user moved on.
+        const active = document.activeElement
+        if (active !== null && active !== document.body && !node.contains(active)) return
+        const target = trigger ?? previous
+        if (target?.isConnected) target.focus()
+      }
+    }, [open, positioned, triggerRef, interactedOutsideRef])
+
+    const ref = useMemo(
+      () => composeRefs<HTMLDivElement>(forwardedRef, contentRef, positionRef),
+      [forwardedRef, positionRef],
+    )
+
+    if (!open || typeof document === 'undefined') return null
+
+    return createPortal(
+      <div
+        ref={ref}
+        id={contentId}
+        role={role === 'none' ? undefined : role}
+        tabIndex={-1}
+        data-slot="popover-content"
+        data-state="open"
+        data-side={placement?.side}
+        data-align={placement?.align}
+        data-positioned={positioned ? 'true' : 'false'}
+        className={cn(
+          'fixed z-[100] outline-none',
+          !unstyled && 'rounded-[var(--radius-lg)] p-3',
+          positioned && 'ds-enter-pop',
+          className,
+        )}
+        style={{
+          ...positionStyle,
+          ...(unstyled ? undefined : POPOVER_SURFACE_STYLE),
+          ...style,
+        }}
+        {...rest}
+      >
+        {children}
+      </div>,
+      document.body,
+    )
+  },
+)
+
+export const Popover = Object.assign(PopoverRoot, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+})

package/src/progress-ledger.tsx

@@ -0,0 +1,304 @@
+/**
+ * ProgressLedger — the per-task block bar.
+ *
+ * ADR-146's one piece of boldness, and the reason the port keeps a ledger
+ * rather than a percentage bar: it is COUNTABLE. You read 7 of 11 without
+ * reading a number, and each segment doubles as navigation into that group.
+ *
+ * Three rules it must not lose:
+ *
+ *  1. **Never colour-only.** The label row always carries the count AND the
+ *     percentage as text (interface-standards §6), so completion is legible
+ *     without perceiving hue.
+ *  2. **The track is grey structure, not a surface.** `--surface-inset` +
+ *     1px `--border`, exactly the "grey structure inside an opaque card" the
+ *     data-display recipe requires (CLAUDE.md §2). Filled cells take the
+ *     column hue off the tint ladder, so they composite opaque in both themes.
+ *  3. **A cell settles, it never pops.** Colour transitions over `--dur-base`
+ *     (`.ds-ledger-cell` in styles.css) and `prefers-reduced-motion` jumps to
+ *     the end state.
+ *
+ * Radius is the documented exception to the concentric ladder: cells are 3px
+ * because squareness is what makes them countable. The track is 5px so that
+ * 5 − 2px of padding = the cells' 3px and the chain still holds locally.
+ *
+ * The hue comes from an ancestor's `.hue hue-<key>` classes (see `hue.ts`);
+ * this primitive reads `--tint-fill` / `--tint-task` / `--h` and never names a
+ * colour of its own.
+ */
+
+import type { CSSProperties, ReactNode } from 'react'
+import { cn } from './lib/utils'
+import { StatusRing } from './status'
+
+/** One cell — a single task. */
+export interface LedgerCell {
+  id: string
+  done: boolean
+  /** The task in flight. Rendered as an outlined cell, not a filled one. */
+  current?: boolean
+  /** Falls back to the cell id in the cell's title attribute. */
+  label?: string
+}
+
+/** One phase / group. A divider is drawn at every boundary between segments. */
+export interface LedgerSegment {
+  id: string
+  label: string
+  cells: readonly LedgerCell[]
+}
+
+/** Done, total and the rounded percentage over a set of segments. */
+export interface LedgerProgress {
+  done: number
+  total: number
+  /** 0–100, rounded. `0` when there is nothing to measure. */
+  percent: number
+}
+
+/**
+ * THE completion calculation — one function, every consumer.
+ *
+ * The ledger prints these numbers as text, the card's ring draws them, and a
+ * board column aggregates its lane's items through this same function. A
+ * second implementation anywhere is how a filled meter ends up disagreeing
+ * with the percentage printed beside it (header-primitives §1, last row).
+ */
+export function ledgerProgress(segments: readonly LedgerSegment[]): LedgerProgress {
+  const cells = segments.flatMap((segment) => segment.cells)
+  const total = cells.length
+  const done = cells.filter((cell) => cell.done).length
+  return { done, total, percent: total === 0 ? 0 : Math.round((done / total) * 100) }
+}
+
+export interface ProgressLedgerProps {
+  segments: readonly LedgerSegment[]
+  /** Leading word in the label row. Sentence case. */
+  label?: string
+  /** Optional middle term — the phase the item is in. */
+  phase?: string
+  /** `lg` is the detail-drawer size; `sm` is the card size. */
+  size?: 'sm' | 'lg'
+  /**
+   * Emitted when a segment is activated. Interactivity is OPT-IN: without
+   * this, segments render as inert `<span>`s and add no tab stops.
+   *
+   * Supplying it is a commitment to a destination. A board that wires an empty
+   * handler here puts one dead 12px-tall tab stop on the page per segment per
+   * card — six of the Tasks board's twenty tab stops did exactly that — which
+   * is worse than the control being absent. When it IS supplied, the segment
+   * is forced to a 24px minimum hit area (interface-standards §6), so it
+   * cannot come back as a 12px target.
+   */
+  onSelectSegment?: (segmentId: string) => void
+  /**
+   * Draws a `<StatusRing>` at the head of the label row, showing the SAME
+   * percentage this ledger prints. It is decorative by construction — the
+   * number is already text two words away, and announcing it twice is the
+   * defect, not the feature.
+   */
+  showRing?: boolean
+  /** Names the ledger for assistive tech, e.g. the item title. */
+  ariaLabel?: string
+  className?: string
+}
+
+const TRACK_RADIUS = '5px'
+const CELL_RADIUS = '3px'
+
+export function ProgressLedger({
+  segments,
+  label = 'Progress',
+  phase,
+  size = 'sm',
+  onSelectSegment,
+  showRing = false,
+  ariaLabel,
+  className,
+}: ProgressLedgerProps) {
+  const { done, total, percent } = ledgerProgress(segments)
+  const cellHeight = size === 'lg' ? 22 : 12
+  const cellMinWidth = size === 'lg' ? 12 : 5
+
+  return (
+    <div
+      className={cn('flex flex-col', className)}
+      style={{ gap: 'var(--space-1)' }}
+      role="group"
+      aria-label={
+        ariaLabel
+          ? `${label} for ${ariaLabel}: ${done} of ${total} done, ${percent} percent`
+          : `${label}: ${done} of ${total} done, ${percent} percent`
+      }
+    >
+      {/* Label row — `Progress · 7/11 · 64%`. The count is the reason the
+          ledger beats a bar, so it is never dropped for space. */}
+      <div
+        className="flex items-baseline text-[11px] leading-none"
+        style={{ gap: 'var(--space-2)', color: 'rgb(var(--text-muted))' }}
+      >
+        {showRing ? (
+          <StatusRing
+            percent={percent}
+            size={size === 'lg' ? 16 : 13}
+            strokeWidth={2}
+            decorative
+            // The 11px label row sits on its baseline; a ring has none, so it
+            // is nudged optically rather than mathematically.
+            style={{ alignSelf: 'center', marginBlockStart: '-1px' }}
+          />
+        ) : null}
+        <span>{label}</span>
+        {/* min-width slots: the card must not resize when a task is checked
+            and `9/11` becomes `10/11` (layout-stability rule). */}
+        <LedgerFigure style={{ minInlineSize: '3.5ch' }}>
+          {done}/{total}
+        </LedgerFigure>
+        {phase ? <span className="truncate">{phase}</span> : null}
+        <LedgerFigure
+          className="ms-auto font-semibold"
+          style={{
+            color: 'rgb(var(--muted-foreground))',
+            minInlineSize: '4ch',
+            textAlign: 'end',
+          }}
+        >
+          {percent}%
+        </LedgerFigure>
+      </div>
+
+      <div
+        className="flex items-stretch"
+        style={{
+          gap: '2px',
+          padding: '2px',
+          background: 'rgb(var(--surface-inset))',
+          border: '1px solid rgb(var(--border))',
+          borderRadius: TRACK_RADIUS,
+        }}
+      >
+        {total === 0 ? (
+          <span
+            className="block w-full"
+            style={{ height: cellHeight, borderRadius: CELL_RADIUS }}
+            aria-hidden="true"
+          />
+        ) : null}
+        {segments.map((segment, index) => (
+          <SegmentRun
+            key={segment.id}
+            segment={segment}
+            showDivider={index > 0}
+            cellHeight={cellHeight}
+            cellMinWidth={cellMinWidth}
+            onSelect={onSelectSegment}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function SegmentRun({
+  segment,
+  showDivider,
+  cellHeight,
+  cellMinWidth,
+  onSelect,
+}: {
+  segment: LedgerSegment
+  showDivider: boolean
+  cellHeight: number
+  cellMinWidth: number
+  onSelect?: ((segmentId: string) => void) | undefined
+}) {
+  const doneCount = segment.cells.filter((cell) => cell.done).length
+  const cells = (
+    <>
+      {segment.cells.map((cell) => (
+        <span
+          key={cell.id}
+          className="ds-ledger-cell block"
+          title={cell.label ?? undefined}
+          style={{
+            flex: '1 1 0',
+            minWidth: cellMinWidth,
+            height: cellHeight,
+            borderRadius: CELL_RADIUS,
+            background: cell.done
+              ? 'var(--tint-fill)'
+              : cell.current
+                ? 'var(--tint-task)'
+                : 'rgb(var(--surface-card))',
+            boxShadow: cell.current && !cell.done ? 'inset 0 0 0 1px var(--h)' : undefined,
+          }}
+        />
+      ))}
+    </>
+  )
+
+  const runStyle = {
+    flex: `${Math.max(segment.cells.length, 1)} 1 0`,
+    display: 'flex',
+    gap: '2px',
+    minWidth: 0,
+  } as const
+
+  return (
+    <>
+      {/* Phase boundary. A 1px rule, not a gap — a gap at this scale reads as
+          a missing cell and would make the count wrong at a glance. */}
+      {showDivider ? (
+        <span
+          aria-hidden="true"
+          style={{
+            flex: 'none',
+            width: '1px',
+            background: 'rgb(var(--border-strong))',
+            marginBlock: '-2px',
+            marginInline: '2px',
+          }}
+        />
+      ) : null}
+      {onSelect ? (
+        <button
+          type="button"
+          onClick={() => onSelect(segment.id)}
+          aria-label={`${segment.label}: ${doneCount} of ${segment.cells.length} done`}
+          className="rounded-[3px] focus-visible:[box-shadow:var(--ring-focus)] focus-visible:outline-none"
+          style={{
+            ...runStyle,
+            // The accessibility floor, enforced in the primitive rather than
+            // asked of every caller: a 12px cell row is not a 24px target, so
+            // the run grows to 24px and centres its cells inside it.
+            alignItems: 'center',
+            minBlockSize: '24px',
+            background: 'transparent',
+            border: 'none',
+            padding: 0,
+          }}
+        >
+          {cells}
+        </button>
+      ) : (
+        <span style={runStyle}>{cells}</span>
+      )}
+    </>
+  )
+}
+
+function LedgerFigure({
+  children,
+  className,
+  style,
+}: {
+  children: ReactNode
+  className?: string
+  style?: CSSProperties
+}) {
+  return (
+    <span className={cn('tabular-nums', className)} style={style}>
+      {children}
+    </span>
+  )
+}