@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/finance-tearsheet/KpiStrip.tsx

@@ -0,0 +1,49 @@
+/**
+ * KpiStrip + Kpi (#1463) — the tearsheet KPI card grammar promoted from the
+ * inline `Kpi` in apps/digiquant-web/components/tearsheet/tearsheet-view.tsx
+ * and the dashboard PerformanceTearsheetView. Values are ReactNodes so consumers tone
+ * them with the money classes (`is-pos` / `is-neg` via `toneClass`); the
+ * gradient card surface, the 6-up `primary` strip (3-up ≤1100px, 2-up
+ * ≤640px), and the `break-inside: avoid` print rules live in
+ * styles/finance-tearsheet.css. Server component — no state, no effects.
+ */
+import type { ReactNode } from "react";
+
+export interface KpiProps {
+  label: string;
+  value: ReactNode;
+  /** Small soft line under the value (e.g. "since inception"). */
+  sub?: ReactNode;
+}
+
+export function Kpi({ label, value, sub }: KpiProps) {
+  return (
+    <div className="ts-kpi">
+      <span className="ts-kpi-label">{label}</span>
+      <span className="ts-kpi-value">{value}</span>
+      {sub != null ? <span className="ts-kpi-sub">{sub}</span> : null}
+    </div>
+  );
+}
+
+export interface KpiStripProps {
+  children: ReactNode;
+  /** The headline 6-up strip (`.ts-kpis-primary`); omit for the auto-fit grid. */
+  primary?: boolean;
+  /** Names the strip for AT (e.g. "Headline performance"). */
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function KpiStrip({ children, primary = false, ariaLabel, className }: KpiStripProps) {
+  return (
+    <section
+      className={
+        "ts-kpis" + (primary ? " ts-kpis-primary" : "") + (className ? ` ${className}` : "")
+      }
+      aria-label={ariaLabel}
+    >
+      {children}
+    </section>
+  );
+}

package/src/components/finance-tearsheet/LiveBadge.tsx

@@ -0,0 +1,29 @@
+/**
+ * LiveBadge (#1463) — the pulsing-dot live indicator promoted from
+ * apps/digiquant-web/components/tearsheet/live-metrics.tsx. The accent
+ * dot pulse (`@keyframes ts-live-pulse`) lives in
+ * styles/finance-tearsheet.css; in print the badge is hidden (live-ness is
+ * meaningless on paper). Whether the badge shows at all (e.g. only when a
+ * nightly pipeline stamped `generated_at`) is consumer data wiring. Server
+ * component — no state, no effects.
+ */
+
+export interface LiveBadgeProps {
+  /** Badge copy — lowercase by grammar (the dress lowercases regardless). */
+  label?: string;
+  /** AT description; the pulse itself is decorative. */
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function LiveBadge({ label = "live", ariaLabel = "Live metrics", className }: LiveBadgeProps) {
+  return (
+    <span
+      className={"ts-live-badge" + (className ? ` ${className}` : "")}
+      aria-label={ariaLabel}
+    >
+      <span className="ts-live-dot" aria-hidden="true" />
+      <span className="ts-live-label">{label}</span>
+    </span>
+  );
+}

package/src/components/finance-tearsheet/ReturnsMatrix.tsx

@@ -0,0 +1,321 @@
+/**
+ * ReturnsMatrix (#1463) — the period matrix promoted verbatim from
+ * apps/digiquant-web/components/tearsheet/charts.tsx: 3 metrics
+ * (return / drawdown / volatility) x 3 granularities (monthly / quarterly /
+ * annual), derived from the equity curve (returns, vol) or the drawdown
+ * curve (max DD per slot). Cells tint by data-driven max-abs magnitude on
+ * the money tokens; returns format as signed compact % so crypto-scale
+ * figures (hundreds / thousands of %) fit the narrow cells; the trailing
+ * Year column compounds. This is THE matrix grammar — the former
+ * finance-charts MonthlyReturns (fixed-peak tint, unsigned 1-dp cells,
+ * arithmetic-sum totals) was deprecated into it (monthly slice =
+ * `period="monthly" metric="return"`).
+ */
+import { fmtCompact } from "./format";
+import { annualizedVolPct, dailyReturnsFromEquity } from "./stats";
+import { type TearsheetSeriesPoint } from "./types";
+
+export type ReturnsPeriod = "monthly" | "quarterly" | "annual";
+export type MatrixMetric = "return" | "drawdown" | "volatility";
+
+const MONTH_LABELS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const QUARTER_LABELS = ["Q1", "Q2", "Q3", "Q4"];
+
+/** A single rendered cell value (or null = no data in that slot). */
+interface MatrixCell {
+  value: number | null;
+}
+interface MatrixRow {
+  year: number;
+  cells: MatrixCell[];
+  yearValue: number | null;
+}
+
+/** Number of columns per granularity (the trailing Year column is separate). */
+function colCount(period: ReturnsPeriod): number {
+  return period === "monthly" ? 12 : period === "quarterly" ? 4 : 1;
+}
+
+function slotOf(month: number, period: ReturnsPeriod): number {
+  return period === "monthly" ? month : period === "quarterly" ? Math.floor(month / 3) : 0;
+}
+
+function bucketEquityBySlot(points: TearsheetSeriesPoint[], period: ReturnsPeriod) {
+  const lastInSlot = new Map<string, number>();
+  const pointsInSlot = new Map<string, TearsheetSeriesPoint[]>();
+  const yearLast = new Map<number, number>();
+  let minYear = Infinity;
+  let maxYear = -Infinity;
+
+  for (const p of points) {
+    const d = new Date(p.t);
+    const year = d.getUTCFullYear();
+    const slot = slotOf(d.getUTCMonth(), period);
+    const key = `${year}:${slot}`;
+    lastInSlot.set(key, p.v);
+    const bucket = pointsInSlot.get(key) ?? [];
+    bucket.push(p);
+    pointsInSlot.set(key, bucket);
+    yearLast.set(year, p.v);
+    if (year < minYear) minYear = year;
+    if (year > maxYear) maxYear = year;
+  }
+  return { lastInSlot, pointsInSlot, yearLast, minYear, maxYear };
+}
+
+function bucketDrawdownBySlot(points: TearsheetSeriesPoint[], period: ReturnsPeriod) {
+  const minInSlot = new Map<string, number>();
+  const yearMin = new Map<number, number>();
+  let minYear = Infinity;
+  let maxYear = -Infinity;
+
+  for (const p of points) {
+    const d = new Date(p.t);
+    const year = d.getUTCFullYear();
+    const slot = slotOf(d.getUTCMonth(), period);
+    const key = `${year}:${slot}`;
+    const prev = minInSlot.get(key);
+    minInSlot.set(key, prev === undefined ? p.v : Math.min(prev, p.v));
+    const yPrev = yearMin.get(year);
+    yearMin.set(year, yPrev === undefined ? p.v : Math.min(yPrev, p.v));
+    if (year < minYear) minYear = year;
+    if (year > maxYear) maxYear = year;
+  }
+  return { minInSlot, yearMin, minYear, maxYear };
+}
+
+/**
+ * Period matrix from equity (returns, vol) or drawdown curve (max DD per slot).
+ */
+function buildMatrixRows(
+  equity: TearsheetSeriesPoint[],
+  drawdown: TearsheetSeriesPoint[] | undefined,
+  period: ReturnsPeriod,
+  metric: MatrixMetric,
+): MatrixRow[] {
+  if (!equity || equity.length === 0) return [];
+  const cols = colCount(period);
+
+  if (metric === "drawdown") {
+    if (!drawdown || drawdown.length === 0) return [];
+    const { minInSlot, yearMin, minYear, maxYear } = bucketDrawdownBySlot(drawdown, period);
+    if (!Number.isFinite(minYear)) return [];
+    const rows: MatrixRow[] = [];
+    for (let year = minYear; year <= maxYear; year++) {
+      const cells: MatrixCell[] = [];
+      for (let s = 0; s < cols; s++) {
+        const v = minInSlot.get(`${year}:${s}`);
+        cells.push({ value: v === undefined ? null : v });
+      }
+      const yv = yearMin.get(year);
+      rows.push({ year, cells, yearValue: yv === undefined ? null : yv });
+    }
+    return rows;
+  }
+
+  const { lastInSlot, pointsInSlot, yearLast, minYear, maxYear } = bucketEquityBySlot(
+    equity,
+    period,
+  );
+  if (!Number.isFinite(minYear)) return [];
+
+  const pointsByYear = new Map<number, TearsheetSeriesPoint[]>();
+  for (const p of equity) {
+    const y = new Date(p.t).getUTCFullYear();
+    const bucket = pointsByYear.get(y) ?? [];
+    bucket.push(p);
+    pointsByYear.set(y, bucket);
+  }
+
+  if (metric === "volatility") {
+    const rows: MatrixRow[] = [];
+    for (let year = minYear; year <= maxYear; year++) {
+      const cells: MatrixCell[] = [];
+      for (let s = 0; s < cols; s++) {
+        const pts = pointsInSlot.get(`${year}:${s}`);
+        const vol =
+          pts && pts.length >= 2 ? annualizedVolPct(dailyReturnsFromEquity(pts)) : null;
+        cells.push({ value: vol });
+      }
+      const yearPts = pointsByYear.get(year) ?? [];
+      const yearVol =
+        yearPts.length >= 2 ? annualizedVolPct(dailyReturnsFromEquity(yearPts)) : null;
+      rows.push({ year, cells, yearValue: yearVol });
+    }
+    return rows;
+  }
+
+  const opening = equity[0].v;
+  const rows: MatrixRow[] = [];
+  let prevClose = opening;
+
+  for (let year = minYear; year <= maxYear; year++) {
+    const cells: MatrixCell[] = [];
+    for (let s = 0; s < cols; s++) {
+      const close = lastInSlot.get(`${year}:${s}`);
+      if (close === undefined) {
+        cells.push({ value: null });
+      } else {
+        const ret = prevClose > 0 ? (close / prevClose - 1) * 100 : null;
+        cells.push({ value: ret });
+        prevClose = close;
+      }
+    }
+    const last = yearLast.get(year);
+    const yearStart = prevCloseAtYearStart(year, minYear, opening, yearLast);
+    const yearValue =
+      last !== undefined && yearStart > 0 ? (last / yearStart - 1) * 100 : null;
+    rows.push({ year, cells, yearValue: yearValue });
+  }
+  return rows;
+}
+
+/** Equity carried into `year`: the prior year's last close, or the opening for the
+ *  first year. Keeps the Year column consistent with the chained cell logic. */
+function prevCloseAtYearStart(year: number, minYear: number, opening: number, yearLast: Map<number, number>): number {
+  if (year === minYear) return opening;
+  // Walk back to the most recent prior year that actually has data.
+  for (let y = year - 1; y >= minYear; y--) {
+    const v = yearLast.get(y);
+    if (v !== undefined) return v;
+  }
+  return opening;
+}
+
+/** Inline cell background: tone-coloured with alpha scaled by |value| relative to max-abs. */
+function cellBg(value: number | null, maxAbs: number, metric: MatrixMetric): string {
+  if (value === null) return "transparent";
+  if (value === 0 && metric === "return") return "transparent";
+  const tone =
+    metric === "drawdown" || metric === "volatility"
+      ? "var(--down)"
+      : value > 0
+        ? "var(--up)"
+        : "var(--down)";
+  const mag = maxAbs > 0 ? Math.abs(value) / maxAbs : 0;
+  const pct = Math.round(14 + Math.min(1, mag) * 58);
+  return `color-mix(in srgb, ${tone} ${pct}%, transparent)`;
+}
+
+/** True when the up-tone wash is bright enough that the default cell ink
+ *  cannot clear AA on it: `.ts-matrix-cell.is-strong` then reads
+ *  --heat-ink-strong. Matches the pct>=57 branch in finance-tearsheet.css;
+ *  the down tone never needs it (its wash stays dark through the range). */
+function cellStrong(value: number | null, maxAbs: number, metric: MatrixMetric): boolean {
+  if (value === null || metric !== "return" || value <= 0) return false;
+  const mag = maxAbs > 0 ? Math.abs(value) / maxAbs : 0;
+  return Math.round(14 + Math.min(1, mag) * 58) >= 57;
+}
+
+/** Compact cell % — sheds decimals as magnitude grows so wide crypto returns
+ *  (hundreds / thousands of %) fit the narrow grid cells without truncation. */
+function fmtCellPct(v: number): string {
+  const a = Math.abs(v);
+  if (a >= 1000) return fmtCompact(v) + "%";
+  if (a >= 100) return v.toFixed(0) + "%";
+  return v.toFixed(1) + "%";
+}
+
+function fmtCellValue(v: number | null, metric: MatrixMetric): string {
+  if (v === null) return "";
+  if (metric === "volatility") return v.toFixed(1) + "%";
+  return fmtCellPct(v);
+}
+
+/**
+ * Calendar heatmap of period returns derived from the equity curve. Rows = years,
+ * columns = months / quarters / a single annual cell, plus a trailing compounded
+ * "Year" column. Pure CSS-grid table (no SVG) so it reflows and scrolls on mobile.
+ */
+export function ReturnsMatrix({
+  points,
+  drawdown,
+  period,
+  metric = "return",
+}: {
+  points: TearsheetSeriesPoint[];
+  drawdown?: TearsheetSeriesPoint[];
+  period: ReturnsPeriod;
+  metric?: MatrixMetric;
+}) {
+  const rows = buildMatrixRows(points, drawdown, period, metric);
+  if (rows.length === 0) {
+    return (
+      <div className="ts-status">
+        {metric === "drawdown" && !drawdown?.length ? "drawdown data unavailable" : "no data"}
+      </div>
+    );
+  }
+
+  const cols = colCount(period);
+  const labels = period === "monthly" ? MONTH_LABELS : period === "quarterly" ? QUARTER_LABELS : ["Year"];
+  const showYearCol = period !== "annual";
+
+  let maxAbs = 0;
+  for (const r of rows) {
+    for (const c of r.cells) if (c.value !== null) maxAbs = Math.max(maxAbs, Math.abs(c.value));
+    if (showYearCol && r.yearValue !== null) maxAbs = Math.max(maxAbs, Math.abs(r.yearValue));
+  }
+
+  const gridTemplate = `minmax(3rem, auto) repeat(${cols + (showYearCol ? 1 : 0)}, minmax(0, 1fr))`;
+  const metricLabel = metric === "return" ? "returns" : metric === "drawdown" ? "drawdown" : "volatility";
+
+  return (
+    <div className="ts-table-wrap ts-matrix-wrap">
+      <div
+        className="ts-matrix ts-matrix-fill"
+        style={{ gridTemplateColumns: gridTemplate }}
+        role="table"
+        aria-label={`${period} ${metricLabel}`}
+      >
+        <div className="ts-matrix-corner" role="columnheader" />
+        {labels.map((l) => (
+          <div key={l} className="ts-matrix-head" role="columnheader">{l}</div>
+        ))}
+        {showYearCol ? <div className="ts-matrix-head ts-matrix-year-head" role="columnheader">Year</div> : null}
+        {rows.map((r) => (
+          <div key={r.year} className="ts-matrix-row" role="row" style={{ display: "contents" }}>
+            <div className="ts-matrix-rowlabel" role="rowheader">{r.year}</div>
+            {r.cells.map((c, i) => (
+              <div
+                key={i}
+                className={
+                  "ts-matrix-cell" +
+                  (c.value === null ? " is-empty" : "") +
+                  (cellStrong(c.value, maxAbs, metric) ? " is-strong" : "")
+                }
+                style={{ background: cellBg(c.value, maxAbs, metric) }}
+                role="cell"
+                title={
+                  c.value === null
+                    ? "no data"
+                    : `${labels[i]} ${r.year}: ${fmtCellValue(c.value, metric)}`
+                }
+              >
+                {fmtCellValue(c.value, metric)}
+              </div>
+            ))}
+            {showYearCol ? (
+              <div
+                className={
+                  "ts-matrix-cell ts-matrix-year" +
+                  (r.yearValue === null ? " is-empty" : "") +
+                  (cellStrong(r.yearValue, maxAbs, metric) ? " is-strong" : "")
+                }
+                style={{ background: cellBg(r.yearValue, maxAbs, metric) }}
+                role="cell"
+                title={
+                  r.yearValue === null
+                    ? "no data"
+                    : `${r.year} total: ${fmtCellValue(r.yearValue, metric)}`
+                }
+              >
+                {fmtCellValue(r.yearValue, metric)}
+              </div>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/finance-tearsheet/StrategyTearsheet.tsx

@@ -0,0 +1,99 @@
+import { CandlestickChart, TimeSeries } from "./charts";
+import { Kpi, KpiStrip } from "./KpiStrip";
+import { TradeLogTable } from "./TradeLogTable";
+import type { StrategySheetMetric, StrategySheetModel } from "./strategy-sheet-model";
+
+const DASH = "—";
+
+function Figure({ metric }: { metric: StrategySheetMetric }) {
+  const tone = metric.tone === "pos" ? "is-pos" : metric.tone === "neg" ? "is-neg" : undefined;
+  return <span className={tone}>{metric.value ?? DASH}</span>;
+}
+
+/**
+ * One strategy tear sheet. Unpublished figures are an em dash. A chart is
+ * mounted only when the model already kept a series of two or more values.
+ * No status sentence and no backtest chips.
+ */
+export function StrategyTearsheet({ model }: { model: StrategySheetModel }) {
+  return (
+    <div className="ts-print-root" data-strategy-tearsheet="">
+      <header className="ts-header">
+        <div className="ts-header-main">
+          <h2 className="ts-h1">{model.title}</h2>
+          {model.symbol ? <p className="ts-meta-text m-0">{model.symbol}</p> : null}
+        </div>
+      </header>
+
+      <section className="ts-position" aria-label="Current position">
+        <div className="ts-position-head">
+          <span className="ts-panel-label">Current position</span>
+        </div>
+        <dl className="m-0 grid grid-cols-2 gap-px border border-hair bg-hair sm:grid-cols-4">
+          {model.position.map((item) => (
+            <div key={item.label} className="bg-surface px-3 py-2">
+              <dt className="font-mono text-[0.6rem] uppercase tracking-[0.08em] text-ink-mute">{item.label}</dt>
+              <dd className="m-0 mt-1 font-mono text-[0.9rem] leading-none text-ink">
+                <Figure metric={item} />
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </section>
+
+      <KpiStrip primary ariaLabel="Headline performance">
+        {model.metrics.map((item) => (
+          <Kpi key={item.label} label={item.label} value={<Figure metric={item} />} />
+        ))}
+      </KpiStrip>
+
+      {model.price ? (
+        <section className="ts-panel" aria-label="Price">
+          <h3 className="ts-panel-label">Price</h3>
+          <div className="ts-chart">
+            <CandlestickChart
+              bars={model.price}
+              trades={[]}
+              height={320}
+              ariaLabel={`${model.symbol || model.title} price`}
+            />
+          </div>
+        </section>
+      ) : null}
+
+      {model.equity ? (
+        <section className="ts-panel" aria-label="Performance">
+          <h3 className="ts-panel-label">Performance</h3>
+          <div className="ts-chart">
+            <TimeSeries points={model.equity} height={280} ariaLabel={`${model.title} equity`} />
+          </div>
+        </section>
+      ) : null}
+
+      {model.drawdown ? (
+        <section className="ts-panel" aria-label="Drawdown">
+          <h3 className="ts-panel-label">Drawdown</h3>
+          <div className="ts-chart">
+            <TimeSeries
+              points={model.drawdown}
+              height={220}
+              tone="down"
+              ariaLabel={`${model.title} drawdown`}
+            />
+          </div>
+        </section>
+      ) : null}
+
+      <section className="ts-panel" aria-label="Entries and exits">
+        <h3 className="ts-panel-label">Entries and exits</h3>
+        <TradeLogTable
+          ariaLabel="Entries and exits"
+          columns={(model.trades?.columns ?? ["Direction", "Entry date", "Entry", "Exit date", "Exit", "Return"]).map(
+            (label, index) => ({ label, numeric: index >= 2 }),
+          )}
+          rows={(model.trades?.rows ?? []).map((cells, index) => ({ key: index, cells }))}
+        />
+      </section>
+    </div>
+  );
+}

package/src/components/finance-tearsheet/TearsheetCard.tsx

@@ -0,0 +1,54 @@
+/**
+ * TearsheetCard (#1463) — the strategy-library card dress promoted from
+ * apps/digiquant-web/components/tearsheet/strategy-card.tsx, closing the
+ * gap recorded against the promoted controls Card (anchor/render composition
+ * plus a tearsheet dress): the whole card is a link, with hover-lift +
+ * accent-border transition over the gradient surface (`.ts-card` in
+ * styles/finance-tearsheet.css; `break-inside: avoid` in print). Head/title
+ * markup stays consumer-composed on the shared classes (`.ts-card-head`,
+ * `.ts-card-title`, `.ts-card-name` …); the KPI grid grammar ships as
+ * TearsheetCardKpis / TearsheetCardKpi. Server components — no state.
+ */
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+
+export interface TearsheetCardProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Renders an anchor when set; a plain div card otherwise. */
+  href?: string;
+  children: ReactNode;
+}
+
+export function TearsheetCard({ href, className, children, ...rest }: TearsheetCardProps) {
+  const cls = "ts-card" + (className ? ` ${className}` : "");
+  if (href) {
+    return (
+      <a className={cls} href={href} {...rest}>
+        {children}
+      </a>
+    );
+  }
+  return <div className={cls}>{children}</div>;
+}
+
+/** The 2-column KPI grid inside a card (`.ts-card-kpis`). */
+export function TearsheetCardKpis({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={"ts-card-kpis" + (className ? ` ${className}` : "")}>{children}</div>
+  );
+}
+
+/** One label-over-value cell in the card KPI grid. Values are ReactNodes so
+ *  consumers tone them with the money classes (`toneClass`). */
+export function TearsheetCardKpi({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <div className="ts-card-kpi">
+      <span className="ts-card-kpi-label">{label}</span>
+      <span className="ts-card-kpi-value">{value}</span>
+    </div>
+  );
+}

package/src/components/finance-tearsheet/TradeLogTable.tsx

@@ -0,0 +1,73 @@
+/**
+ * TradeLogTable + DirectionPill (#1463) — the tearsheet table grammar
+ * promoted from the inline TradeLogTable in
+ * apps/digiquant-web/components/tearsheet/tearsheet-view.tsx, generalized
+ * to ReactNode cells so consumers keep their own cell wiring (unrealized-mark
+ * cells, toned figures, conviction badges …). The dress is the shared
+ * `.ts-table` grammar: sticky mono thead inside a scroll clamp on screen; in
+ * print the clamp opens (`max-height: none`), the head goes static, and rows
+ * carry `break-inside: avoid` (styles/finance-tearsheet.css). An `open` row
+ * wears `.ts-trade-open` — the accent-washed live-position state. Server
+ * component — no state, no effects.
+ */
+import type { ReactNode } from "react";
+
+export interface TradeLogColumn {
+  label: ReactNode;
+  /** Right-aligned numeric column (`.ts-num`). */
+  numeric?: boolean;
+}
+
+export interface TradeLogRow {
+  key: string | number;
+  /** Live open position — row wears the `.ts-trade-open` state. */
+  open?: boolean;
+  /** One ReactNode per column, in column order. */
+  cells: ReactNode[];
+}
+
+export interface TradeLogTableProps {
+  columns: TradeLogColumn[];
+  rows: TradeLogRow[];
+  /** Extra classes on the scroll wrapper. */
+  className?: string;
+  /** Accessible name for the table — no visible <caption> is used by
+   *  design (the page's own heading carries that role), so this becomes
+   *  the table's aria-label. */
+  ariaLabel?: string;
+}
+
+export function TradeLogTable({ columns, rows, className, ariaLabel = "Trade log" }: TradeLogTableProps) {
+  return (
+    <div className={"ts-table-wrap ts-table-scroll" + (className ? ` ${className}` : "")}>
+      <table className="ts-table ts-trades" aria-label={ariaLabel}>
+        <thead>
+          <tr>
+            {columns.map((c, i) => (
+              <th key={i} scope="col" className={c.numeric ? "ts-num" : undefined}>
+                {c.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.key} className={r.open ? "ts-trade-open" : undefined}>
+              {r.cells.map((cell, i) => (
+                <td key={i} className={columns[i]?.numeric ? "ts-num" : undefined}>
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/** Long/short direction pill (`.ts-dir`) — long wears --up, short --down.
+ *  Copy is always lowercase (long / short, not LONG). */
+export function DirectionPill({ direction }: { direction: "long" | "short" }) {
+  return <span className={`ts-dir ts-dir-${direction}`}>{direction}</span>;
+}