@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/finance-charts/lw-chart.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+/**
+ * Lightweight-charts scaffold (#1450 batch E) — the persistent-chart
+ * counterpart to `useFinanceChart` (chart-host.tsx), converged from the
+ * dashboard `lib/lw-chart.tsx` scaffold (#1420) so dashboards and display
+ * surfaces share ONE canon. Two sanctioned lifecycles:
+ *
+ *   - `useFinanceChart` (chart-host.tsx) — setup-callback style; a data
+ *     change tears the chart down and rebuilds it. Right for display
+ *     specimens (PriceChart / EquityCurve / DrawdownPlot).
+ *   - `useLightweightChart` (here) — the chart is exposed as state and
+ *     persists across data changes; callers own their series in effects,
+ *     guarding cleanup with `isAlive()`. Right for live dashboards
+ *     (dashboard portfolio surfaces, tearsheet workspaces).
+ *
+ * Both wear the same token chrome (`chartChromeOptions`), keep the canvas
+ * transparent with the attribution logo off, disable kinetic-scroll inertia
+ * under prefers-reduced-motion (the resting chart IS the final state), and
+ * are SSR-safe — charts exist only after mount; hosts render as plain divs
+ * with no JS. This module is palette-agnostic: the caller supplies resolved
+ * token colors (dashboard binds its ChartColors; package consumers pair it
+ * with `useFinanceChartPalette()` from chart-host.tsx).
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import {
+  ColorType,
+  createChart,
+  CrosshairMode,
+  type ChartOptions,
+  type DeepPartial,
+  type IChartApi,
+  type LineData,
+  type MouseEventParams,
+  type Time,
+  type WhitespaceData,
+} from "lightweight-charts";
+
+/* ── Theme surface ─────────────────────────────────────────────────────── */
+
+/** The four resolved token values chart chrome is painted with. */
+export type ChartChrome = {
+  /** Axis text + crosshair line color — canon `--ink-mute`. */
+  text: string;
+  /** Grid lines + price/time scale borders — canon `--hair`. */
+  hair: string;
+  /** Crosshair label background — `--accent`, or a money token for P&L reads. */
+  label: string;
+  /** Axis font — canon `--font-mono` (see `hostMonoFont`). */
+  fontFamily: string;
+};
+
+/**
+ * Chart-wide options derived from the canon tokens: transparent canvas,
+ * hair-token grid + scale borders (both price scales), mono axis text,
+ * token-backed crosshair. Re-applied wholesale on theme flips.
+ */
+export function chartChromeOptions(chrome: ChartChrome): DeepPartial<ChartOptions> {
+  return {
+    layout: {
+      background: { type: ColorType.Solid, color: "transparent" },
+      textColor: chrome.text,
+      fontFamily: chrome.fontFamily,
+      fontSize: 11,
+      attributionLogo: false,
+    },
+    grid: { vertLines: { color: chrome.hair }, horzLines: { color: chrome.hair } },
+    rightPriceScale: { borderColor: chrome.hair },
+    leftPriceScale: { borderColor: chrome.hair },
+    timeScale: { borderColor: chrome.hair, timeVisible: false },
+    crosshair: {
+      mode: CrosshairMode.Normal,
+      vertLine: { color: chrome.text, labelBackgroundColor: chrome.label },
+      horzLine: { color: chrome.text, labelBackgroundColor: chrome.label },
+    },
+  };
+}
+
+/** `--font-mono` read off the chart host (scoped overrides win), SSR-safe. */
+export function hostMonoFont(host: HTMLElement | null): string {
+  if (!host || typeof window === "undefined") return "monospace";
+  return getComputedStyle(host).getPropertyValue("--font-mono").trim() || "monospace";
+}
+
+/* ── Chart lifecycle hook ──────────────────────────────────────────────── */
+
+export interface UseLightweightChartResult<C> {
+  /** Attach to the chart host div (make it `relative` when using tooltips). */
+  containerRef: RefObject<HTMLDivElement | null>;
+  /** Live chart instance — `null` on the server and until mount (SSR-safe). */
+  chart: IChartApi | null;
+  /** The theme-reactive colors passed in, echoed for destructuring. */
+  colors: C;
+  /**
+   * Returns false once the chart has been disposed. Series-owning effects
+   * must guard their cleanup with this: React may run the hook's unmount
+   * cleanup (`chart.remove()`) before a later-declared effect's cleanup.
+   * Stable identity — safe in dependency arrays.
+   */
+  isAlive: () => boolean;
+  /** prefers-reduced-motion, read at mount. */
+  reducedMotion: boolean;
+}
+
+export interface UseLightweightChartConfig<C> {
+  /**
+   * Resolved theme colors — a NEW identity re-applies the themed options,
+   * so pass a per-theme-cached snapshot (`useFinanceChartPalette()` or an
+   * app hook like dashboard's `useChartColors()`), not a fresh object per
+   * render.
+   */
+  colors: C;
+  /** Colors + host element → chart chrome options (latest render wins). */
+  buildOptions: (colors: C, host: HTMLElement | null) => DeepPartial<ChartOptions>;
+  /**
+   * Optional live read used once at chart creation (client-side), so the
+   * first paint never wears an SSR-fallback palette. Defaults to the latest
+   * `colors` value.
+   */
+  readColors?: () => C;
+  /** Merged once at creation (first render wins). */
+  extraOptions?: DeepPartial<ChartOptions>;
+}
+
+/**
+ * Creates/destroys a lightweight-chart bound to `containerRef`: `autoSize`
+ * on, token theme from `buildOptions`, options re-applied when `colors`
+ * changes identity (theme flips), kinetic-scroll inertia disabled under
+ * reduced motion. The chart persists across data changes — callers add and
+ * remove their own series in effects, guarding cleanup with `isAlive()`.
+ */
+export function useLightweightChart<C>(
+  config: UseLightweightChartConfig<C>
+): UseLightweightChartResult<C> {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [chart, setChart] = useState<IChartApi | null>(null);
+  const alive = useRef(false);
+  const isAlive = useCallback(() => alive.current, []);
+  const [reducedMotion] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true
+  );
+  const configRef = useRef(config);
+  configRef.current = config;
+  const extraRef = useRef(config.extraOptions);
+
+  useEffect(() => {
+    const host = containerRef.current;
+    if (!host) return;
+    const { buildOptions, readColors, colors } = configRef.current;
+    const created = createChart(host, {
+      autoSize: true,
+      ...buildOptions(readColors ? readColors() : colors, host),
+      ...(reducedMotion ? { kineticScroll: { touch: false, mouse: false } } : {}),
+      ...(extraRef.current ?? {}),
+    });
+    alive.current = true;
+    setChart(created);
+    return () => {
+      alive.current = false;
+      created.remove();
+      setChart(null);
+    };
+  }, [reducedMotion]);
+
+  // Theme-reactive: re-apply the token-derived options on theme flips.
+  // Series colors are re-applied by callers (they own their series).
+  useEffect(() => {
+    if (!chart || !alive.current) return;
+    chart.applyOptions(configRef.current.buildOptions(config.colors, containerRef.current));
+  }, [chart, config.colors]);
+
+  return { containerRef, chart, colors: config.colors, isAlive, reducedMotion };
+}
+
+/* ── Data adapters ─────────────────────────────────────────────────────── */
+
+/**
+ * Array-of-objects rows (recharts-shaped) → lightweight-charts line/area
+ * points. `null`/`NaN` values become whitespace points, which render as
+ * gaps — the recharts `connectNulls` look is intentionally NOT reproduced
+ * for missing data inside a series (gaps are more honest). Rows must
+ * already be ascending by ISO date.
+ */
+export function toLineData<T>(
+  rows: readonly T[],
+  getDate: (row: T) => string,
+  getValue: (row: T) => number | null | undefined
+): (LineData<Time> | WhitespaceData<Time>)[] {
+  const out: (LineData<Time> | WhitespaceData<Time>)[] = [];
+  let prev = "";
+  for (const row of rows) {
+    const date = getDate(row);
+    if (!date || date === prev) continue; // lightweight-charts requires unique ascending times
+    prev = date;
+    const value = getValue(row);
+    const time = date as Time;
+    out.push(value == null || Number.isNaN(value) ? { time } : { time, value });
+  }
+  return out;
+}
+
+/** Crosshair `Time` (string | BusinessDay | UTC seconds) → ISO `yyyy-mm-dd`. */
+export function timeToISO(t: Time): string {
+  if (typeof t === "string") return t;
+  if (typeof t === "number") return new Date(t * 1000).toISOString().slice(0, 10);
+  const mm = String(t.month).padStart(2, "0");
+  const dd = String(t.day).padStart(2, "0");
+  return `${t.year}-${mm}-${dd}`;
+}
+
+/* ── Crosshair tooltip ─────────────────────────────────────────────────── */
+
+export interface ChartTip {
+  /** Clamped position inside the chart host, px. */
+  left: number;
+  top: number;
+  /** ISO date under the crosshair. */
+  iso: string;
+  /** Raw crosshair params — read series values via `param.seriesData`. */
+  param: MouseEventParams<Time>;
+}
+
+const TIP_WIDTH_GUESS = 240;
+const TIP_OFFSET = 14;
+
+/**
+ * Subscribes to crosshair moves and yields a clamped tooltip anchor + params,
+ * or `null` when the pointer is off the pane. Render your own token-styled
+ * DOM tooltip from it (the house idiom — see ChartTipShell).
+ */
+export function useChartTip(
+  chart: IChartApi | null,
+  containerRef: RefObject<HTMLDivElement | null>,
+  isAlive: () => boolean
+): ChartTip | null {
+  const [tip, setTip] = useState<ChartTip | null>(null);
+
+  useEffect(() => {
+    if (!chart) return;
+    const onMove = (param: MouseEventParams<Time>) => {
+      const host = containerRef.current;
+      if (
+        !host ||
+        !param.point ||
+        param.time == null ||
+        param.point.x < 0 ||
+        param.point.y < 0
+      ) {
+        setTip((old) => (old === null ? old : null));
+        return;
+      }
+      const width = host.clientWidth;
+      const flip = param.point.x > width - (TIP_WIDTH_GUESS + TIP_OFFSET);
+      const left = flip
+        ? Math.max(0, param.point.x - TIP_WIDTH_GUESS - TIP_OFFSET)
+        : param.point.x + TIP_OFFSET;
+      const top = Math.max(8, Math.min(param.point.y + TIP_OFFSET, host.clientHeight - 48));
+      setTip({ left, top, iso: timeToISO(param.time), param });
+    };
+    chart.subscribeCrosshairMove(onMove);
+    return () => {
+      if (isAlive()) chart.unsubscribeCrosshairMove(onMove);
+    };
+  }, [chart, containerRef, isAlive]);
+
+  return tip;
+}
+
+/**
+ * Token-styled floating tooltip chrome. Consuming apps must `@source` this
+ * directory so the utility classes below are generated (MIGRATION.md rule 3).
+ */
+export function ChartTipShell({ tip, children }: { tip: ChartTip; children: ReactNode }) {
+  return (
+    <div
+      className="pointer-events-none absolute z-10 rounded-none border border-hair bg-term-bg px-3 py-2 text-[0.82rem] shadow-lg max-w-[240px]"
+      style={{ left: tip.left, top: tip.top }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/finance-composites/MarketBar.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Marquee } from "../marquee/Marquee";
+import { toneClass } from "../finance-tearsheet/format";
+import { cn } from "../../lib/utils";
+
+/**
+ * MarketBar — the terminal status line: a green square, then
+ * `BTC 63,410 ▲0.40% …`, then `[pause]`. Props-driven and honest: it renders
+ * exactly the cells it is given and never a price of its own. The consumer
+ * owns the feed, the clock and the status.
+ *
+ * Built on `Marquee` (seamless -50% loop, edge fade, pause-on-hover). Each
+ * cell carries its own horizontal padding and the group gap is zero, so the
+ * join where the list repeats is the same gap as every other pair. Honesty
+ * and a11y contract:
+ *  - `status="live"` is a green square (it may pulse). The word is not shown.
+ *    `connecting` / `stale` / `offline` show a muted bracketed word;
+ *  - no quoted cells -> a red square and `Prices did not load.`;
+ *  - a cell with `value: null` shows an em dash for the price;
+ *  - a missing percent is an em dash, never a fabricated number;
+ *  - `asOf` (e.g. "as of 09-29") and `source` label recorded cells — `asOf`
+ *    shows inline, `source` in the tooltip and the screen-reader summary;
+ *  - the scrolling strip is `aria-hidden` and the region is `aria-live="off"`;
+ *    a plain-text `sr-only` summary carries the same facts once, statically;
+ *  - a pause control (the marquee auto-runs well past 5s; hover also pauses);
+ *    it is hidden under reduced motion, where nothing moves;
+ *  - when a percent actually changes, only that number pulses. The first
+ *    observation does not. The symbol, the price, and the row stay still;
+ *  - `--up` / `--down` colour ONLY the signed change (`toneClass`, the
+ *    finance-tearsheet `is-pos` / `is-neg`), never the symbol or value.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/marquee.css";
+ *                 @import "@digithings-ai/ui/styles/finance-tearsheet.css";
+ *                 @source "<path-to>/packages/ui/src/components/finance-composites";
+ * CSS-only motion: no MotionProvider needed. Client component (pause state).
+ */
+export type MarketBarStatus = "connecting" | "live" | "stale" | "offline";
+
+export type MarketBarCell = {
+  /** Instrument symbol — "BTC", "SPY" … */
+  symbol: string;
+  /** Preformatted price, or null while unknown (renders "—"). */
+  value: string | null;
+  /** Signed percent change (0.4 = +0.40%). Null or missing renders an em dash. */
+  changePct?: number | null;
+  /** Freshness stamp shown inline for recorded cells — "as of 09-29". */
+  asOf?: string;
+  /** Origin of the number — tooltip and screen-reader text only. */
+  source?: string;
+  /** Retained for callers. The tape pulses from `changePct`, not this key. */
+  flashKey?: string | number;
+};
+
+export type MarketBarProps = {
+  /** The tape. A cell with no price is dropped. None left renders the empty state. */
+  cells: MarketBarCell[];
+  /** Feed state. Only "live" earns the green square, and only while quotes are scrolling. */
+  status: MarketBarStatus;
+  /** Right-aligned slot — a clock like "00:00Z". Consumer-rendered (hydration is theirs). */
+  trailing?: ReactNode;
+  /** Marquee loop duration in seconds. Omit to give each symbol time to be read. */
+  speed?: number;
+  /** Start paused. */
+  defaultPaused?: boolean;
+  /** Accessible name for the region. */
+  ariaLabel?: string;
+  className?: string;
+};
+
+/** Seconds for one symbol to travel its own width — long enough to read symbol, price, and percent. */
+export const TAPE_SECONDS_PER_SYMBOL = 8;
+/** Floor so a one-symbol tape still drifts slowly. */
+export const TAPE_MIN_SECONDS = 48;
+
+/** Loop duration. One period is one copy of the quoted strip. */
+export function tapeDurationSeconds(count: number): number {
+  const n = Number.isFinite(count) && count > 0 ? Math.floor(count) : 1;
+  return Math.max(TAPE_MIN_SECONDS, n * TAPE_SECONDS_PER_SYMBOL);
+}
+
+/** A price string. An em dash, blank, or null is not a quote. */
+export function isTapeQuote(cell: MarketBarCell): boolean {
+  if (cell.value === null) return false;
+  const value = cell.value.trim();
+  return value.length > 0 && value !== "—" && value !== "–" && value !== "-";
+}
+
+const STATUS_WORD: Record<Exclude<MarketBarStatus, "live">, string> = {
+  connecting: "connecting",
+  stale: "stale",
+  offline: "offline",
+};
+
+const STATUS_SR: Record<MarketBarStatus, string> = {
+  connecting: "Connecting to the price feed.",
+  live: "The price feed is ticking.",
+  stale: "Prices are stale; the feed has stopped ticking.",
+  offline: "The price feed is offline.",
+};
+
+/**
+ * Pulse generation for a percent. The first observation never pulses. A null
+ * or non-finite percent never pulses. An unchanged number never pulses.
+ */
+export function percentPulseGeneration(
+  previous: number | null | undefined,
+  next: number | null,
+  generation: number,
+): { previous: number | null; generation: number } {
+  const pct = next !== null && Number.isFinite(next) ? next : null;
+  if (previous === undefined) return { previous: pct, generation };
+  if (pct !== null && pct !== previous) return { previous: pct, generation: generation + 1 };
+  return { previous: pct, generation };
+}
+
+/** Change magnitude — the sign is carried by the arrow and the tone. */
+function fmtChange(pct: number): string {
+  return `${Math.abs(pct).toFixed(2)}%`;
+}
+
+function hasChange(c: MarketBarCell): c is MarketBarCell & { changePct: number } {
+  return c.value !== null && c.changePct !== null && c.changePct !== undefined;
+}
+
+function srCell(c: MarketBarCell): string {
+  const parts = [c.symbol, c.value ?? "no value"];
+  if (hasChange(c)) {
+    parts.push(c.changePct === 0 ? "unchanged" : `${c.changePct > 0 ? "up" : "down"} ${fmtChange(c.changePct)}`);
+  } else {
+    parts.push("percent unavailable");
+  }
+  if (c.asOf) parts.push(c.asOf);
+  if (c.source) parts.push(`source ${c.source}`);
+  return parts.join(" ");
+}
+
+function PercentNumber({ pct }: { pct: number | null }) {
+  const [generation, setGeneration] = useState(0);
+  const previous = useRef<number | null | undefined>(undefined);
+  useEffect(() => {
+    const next = percentPulseGeneration(previous.current, pct, generation);
+    previous.current = next.previous;
+    if (next.generation !== generation) setGeneration(next.generation);
+  }, [pct, generation]);
+  const pulsing = generation > 0 && pct !== null && Number.isFinite(pct);
+  return (
+    <span key={generation} data-mb="pct" className={pulsing ? "mb-pct-pulse" : undefined}>
+      {pct === null || !Number.isFinite(pct) ? "—" : fmtChange(pct)}
+    </span>
+  );
+}
+
+function Cell({ cell }: { cell: MarketBarCell }) {
+  const pct = hasChange(cell) ? cell.changePct : null;
+  return (
+    <span
+      title={cell.source ? `${cell.symbol} · source ${cell.source}` : undefined}
+      className="mb-cell inline-flex items-baseline gap-2 whitespace-nowrap px-[1.15rem] font-mono text-[0.72rem] [font-variant-numeric:tabular-nums]"
+    >
+      <span className="tracking-[0.02em] text-ink">{cell.symbol}</span>
+      <span className="mb-price text-ink-soft">{cell.value ?? "—"}</span>
+      <span
+        className={cn(
+          "mb-pct inline-flex items-center justify-end gap-1",
+          pct === null ? "text-ink-mute" : toneClass(pct) || "text-ink-mute",
+        )}
+      >
+        {pct === null ? null : (
+          <span aria-hidden="true">{pct > 0 ? "▲" : pct < 0 ? "▼" : "·"}</span>
+        )}
+        <PercentNumber pct={pct} />
+      </span>
+      {cell.asOf ? <span className="text-ink-mute">{cell.asOf}</span> : null}
+    </span>
+  );
+}
+
+export function MarketBar({
+  cells,
+  status,
+  trailing,
+  speed,
+  defaultPaused = false,
+  ariaLabel = "Market prices",
+  className,
+}: MarketBarProps) {
+  const [paused, setPaused] = useState(defaultPaused);
+  const quoted = cells.filter(isTapeQuote);
+  const empty = quoted.length === 0;
+  const duration = speed ?? tapeDurationSeconds(quoted.length);
+
+  return (
+    <div
+      role="region"
+      aria-label={ariaLabel}
+      aria-live="off"
+      className={cn(
+        "flex h-8 min-w-0 items-center gap-3 font-mono text-[0.68rem] text-ink-mute",
+        className,
+      )}
+    >
+      {empty ? (
+        <span className="mb-status-miss" aria-hidden="true" />
+      ) : status === "live" ? (
+        <span className="mb-live-mark" aria-hidden="true" />
+      ) : (
+        <span className="shrink-0 tracking-[0.04em]">{`[${STATUS_WORD[status]}]`}</span>
+      )}
+
+      {empty ? (
+        <span className="min-w-0 flex-1 truncate text-ink-soft">Prices did not load.</span>
+      ) : (
+        <>
+          <div aria-hidden="true" className="min-w-0 flex-1">
+            <Marquee className="mb-tape" speed={duration} paused={paused}>
+              {quoted.map((c) => (
+                <Cell key={c.symbol} cell={c} />
+              ))}
+            </Marquee>
+          </div>
+          <p className="sr-only">{`${STATUS_SR[status]} ${quoted.map(srCell).join("; ")}.`}</p>
+        </>
+      )}
+
+      {empty || !trailing ? null : <span className="hidden shrink-0 sm:inline">{trailing}</span>}
+
+      {empty ? null : (
+        <button
+          type="button"
+          onClick={() => setPaused((p) => !p)}
+          aria-pressed={paused}
+          aria-label="Pause price ticker"
+          className="shrink-0 cursor-pointer bg-transparent p-0 font-[inherit] text-ink-mute transition-colors hover:text-ink focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-accent motion-reduce:hidden"
+        >
+          {paused ? "[play]" : "[pause]"}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/finance-composites/OrderBook.tsx

@@ -0,0 +1,133 @@
+/**
+ * OrderBook — the exchange-grade depth ladder promoted from the design
+ * reference (finance/order-book): asks descending into the spread, a
+ * mid/spread divider, bids below. Each row carries a depth bar scaled to the
+ * largest resting size and tinted by side — sell side wears --down, buy side
+ * --up: the money colors, never a livery. Mono tabular numerals so prices
+ * never jitter. Server component — no state, no effects; token utilities
+ * only, so it needs nothing from styles/finance-composites.css (still
+ * `@source` this directory so the utilities are generated).
+ *
+ * Data convention (top to bottom, as rendered): `asks` descend INTO the
+ * spread (last element = best ask); `bids` descend AWAY from it (first
+ * element = best bid). `mid` and `spread` derive from that touch when
+ * omitted. Width is the call site's business (e.g. `max-w-[380px]`).
+ */
+export type OrderBookLevel = {
+  price: number;
+  size: number;
+};
+
+export type OrderBookProps = {
+  /** Sell side, rendered top-down toward the spread (last = best ask). */
+  asks: OrderBookLevel[];
+  /** Buy side, rendered top-down away from the spread (first = best bid). */
+  bids: OrderBookLevel[];
+  /** Preformatted mid read for the divider; midpoint of the touch when omitted. */
+  mid?: string;
+  /** Preformatted spread read; best ask − best bid when omitted. */
+  spread?: string;
+  /** Price formatter for derived reads and level prices. */
+  formatPrice?: (price: number) => string;
+  /** Mono micro-caps column headers. */
+  priceLabel?: string;
+  sizeLabel?: string;
+  /** Label ahead of the spread read on the divider. */
+  spreadLabel?: string;
+  /** Extra classes on the board shell (margins, max-width …). */
+  className?: string;
+  /** Accessible name for the depth ladder (announced as the table's name). */
+  label?: string;
+};
+
+function Row({
+  level,
+  side,
+  peak,
+  formatPrice,
+}: {
+  level: OrderBookLevel;
+  side: "ask" | "bid";
+  peak: number;
+  formatPrice: (price: number) => string;
+}) {
+  const depth = `${(level.size / peak) * 100}%`;
+  const ask = side === "ask";
+  return (
+    <div
+      role="row"
+      className="relative flex justify-between overflow-hidden px-4 py-[0.28rem] text-[0.78rem]"
+    >
+      {/* depth bar fills from the right, tinted by side (money colors) */}
+      <span
+        className={`absolute inset-y-0 end-0 z-0 ${ask ? "bg-down/[0.14]" : "bg-up/[0.14]"}`}
+        style={{ width: depth }}
+        aria-hidden="true"
+      />
+      <span role="cell" className={`relative z-[1] ${ask ? "text-down" : "text-up"}`}>
+        {formatPrice(level.price)}
+      </span>
+      <span role="cell" className="relative z-[1] text-ink-soft">
+        {level.size}
+      </span>
+    </div>
+  );
+}
+
+export function OrderBook({
+  asks,
+  bids,
+  mid,
+  spread,
+  formatPrice = (price) => price.toFixed(2),
+  priceLabel = "price",
+  sizeLabel = "size",
+  spreadLabel = "spread",
+  className,
+  label = "Order book",
+}: OrderBookProps) {
+  const bestAsk = asks[asks.length - 1]?.price ?? 0;
+  const bestBid = bids[0]?.price ?? 0;
+  const midText = mid ?? formatPrice((bestAsk + bestBid) / 2);
+  const spreadText = spread ?? formatPrice(bestAsk - bestBid);
+  const peak = Math.max(1, ...asks.map((l) => l.size), ...bids.map((l) => l.size));
+
+  return (
+    <div
+      role="table"
+      aria-label={label}
+      className={`rounded-none border border-hair bg-surface py-2 font-mono [font-variant-numeric:tabular-nums]${
+        className ? ` ${className}` : ""
+      }`}
+    >
+      <div
+        role="row"
+        className="flex justify-between border-b border-hair px-4 pb-2 pt-[0.3rem] text-[0.58rem] uppercase tracking-[0.1em] text-ink-mute"
+      >
+        <span role="columnheader">{priceLabel}</span>
+        <span role="columnheader">{sizeLabel}</span>
+      </div>
+      <div role="rowgroup">
+        {asks.map((l) => (
+          <Row key={l.price} level={l} side="ask" peak={peak} formatPrice={formatPrice} />
+        ))}
+      </div>
+      <div
+        role="row"
+        className="my-[0.2rem] flex items-baseline justify-between border-y border-hair px-4 py-2"
+      >
+        <span role="cell" className="text-base text-ink">
+          {midText}
+        </span>
+        <span role="cell" className="text-[0.62rem] uppercase tracking-[0.08em] text-ink-mute">
+          {spreadLabel} {spreadText}
+        </span>
+      </div>
+      <div role="rowgroup">
+        {bids.map((l) => (
+          <Row key={l.price} level={l} side="bid" peak={peak} formatPrice={formatPrice} />
+        ))}
+      </div>
+    </div>
+  );
+}