@digithings-ai/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,185 @@
+import type { ReactNode } from "react";
+
+/**
+ * PerformanceDashboard — the book-level surface promoted from the design
+ * reference (finance/performance-dashboard): a value/return headline row, a
+ * strip of aggregate ratios, and an allocation-by-strategy breakdown. Sits
+ * above the single-strategy tearsheet metrics (<PerfMetrics/>): this is the
+ * whole book. P&L reads wear the money colors (`tone`); ratios stay ink; the
+ * allocation bars take the module accent. Server component — no state, no
+ * effects.
+ *
+ * `children` is the composite slot: an optional chart section rendered
+ * between the headline row and the ratio strip (intended for the
+ * finance-charts family — <EquityCurve/>, <SyncedTearsheet/> — passed in by
+ * the page, never imported here). Give the slot content a definite height;
+ * the dashboard only contributes the hairline divider.
+ *
+ * The hairline grammar between headline cells and ratio cells is
+ * sibling-index CSS (styles/finance-composites.css, pdash-*) keyed off the
+ * strip's `data-cols` — Tailwind can't express nth-child, so it stays CSS.
+ * Below 720px the headline stacks and the ratio strip collapses to 3-up.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/finance-composites.css";
+ *                 @source "<path-to>/packages/ui/src/components/finance-composites";
+ */
+export type DashboardHeadline = {
+  /** Mono micro-caps label — "portfolio value", "total return" … */
+  label: string;
+  /** Big tabular read — "$1.284M", "+28.4%" … */
+  value: string;
+  /** Money semantics on the value: only P&L reads take a tone. */
+  tone?: "up" | "down";
+  /** Small line under the value — "+$5.47K · +0.43% today", "since inception · 2y" … */
+  note?: string;
+  /** Money semantics on the note; untoned notes read muted ink. */
+  noteTone?: "up" | "down";
+};
+
+export type DashboardRatio = {
+  /** Mono micro-caps label — "sharpe", "max drawdown" … */
+  label: string;
+  /** Preformatted read — "2.31", "−18.4%" … */
+  value: string;
+  /** Money semantics: drawdown-class reads take "down"; ratios stay ink. */
+  tone?: "up" | "down";
+};
+
+export type DashboardAllocation = {
+  /** Strategy / sleeve name — "trend_xsec" … */
+  name: string;
+  /** Share of the book, 0–100; drives the accent bar width. */
+  pct: number;
+};
+
+export type PerformanceDashboardProps = {
+  /** Headline cells; designed for two (value + return), 1.4fr/1fr split. */
+  headlines: DashboardHeadline[];
+  ratios?: DashboardRatio[];
+  /** Desktop ratio cells per row (collapses to 3-up below 720px). */
+  ratioColumns?: 3 | 4 | 5 | 6;
+  allocations?: DashboardAllocation[];
+  /** Mono micro-caps heading over the allocation bars. */
+  allocationsLabel?: string;
+  /** Optional chart slot rendered after the headline row (see docblock). */
+  children?: ReactNode;
+  /** Extra classes on the dashboard shell (margins — the call site's business). */
+  className?: string;
+};
+
+const HEAD_COLS: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-[1.4fr_1fr]",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+};
+
+const RATIO_COLS: Record<3 | 4 | 5 | 6, string> = {
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+};
+
+export function PerformanceDashboard({
+  headlines,
+  ratios,
+  ratioColumns = 6,
+  allocations,
+  allocationsLabel = "allocation by strategy",
+  children,
+  className,
+}: PerformanceDashboardProps) {
+  return (
+    <div
+      className={`overflow-hidden rounded-none border border-hair bg-surface${
+        className ? ` ${className}` : ""
+      }`}
+    >
+      <div className={`grid ${HEAD_COLS[headlines.length] ?? "grid-cols-2"} max-[720px]:grid-cols-1`}>
+        {headlines.map((h) => (
+          <div
+            key={h.label}
+            className="pdash-head flex flex-col gap-[0.3rem] px-[1.4rem] pb-[1.2rem] pt-[1.4rem]"
+          >
+            <span className="font-mono text-[0.58rem] uppercase tracking-[0.1em] text-ink-mute">
+              {h.label}
+            </span>
+            <span
+              className={`font-mono text-[clamp(1.6rem,4vw,2.2rem)] [font-variant-numeric:tabular-nums] ${
+                h.tone === "up" ? "text-up" : h.tone === "down" ? "text-down" : "text-ink"
+              }`}
+            >
+              {h.value}
+            </span>
+            {h.note ? (
+              <span
+                className={`font-mono ${
+                  h.noteTone === "up"
+                    ? "text-[0.72rem] text-up"
+                    : h.noteTone === "down"
+                      ? "text-[0.72rem] text-down"
+                      : "text-[0.66rem] text-ink-mute"
+                }`}
+              >
+                {h.note}
+              </span>
+            ) : null}
+          </div>
+        ))}
+      </div>
+
+      {children ? <div className="border-t border-hair">{children}</div> : null}
+
+      {ratios && ratios.length > 0 ? (
+        <div
+          data-cols={ratioColumns}
+          className={`pdash-ratios grid ${RATIO_COLS[ratioColumns]} border-t border-hair max-[720px]:grid-cols-3`}
+        >
+          {ratios.map((r) => (
+            <div key={r.label} className="pdash-ratio flex flex-col gap-[0.3rem] px-4 py-[0.9rem]">
+              <span className="font-mono text-[0.52rem] uppercase tracking-[0.08em] text-ink-mute">
+                {r.label}
+              </span>
+              <span
+                className={`font-mono text-[0.98rem] [font-variant-numeric:tabular-nums] ${
+                  r.tone === "up" ? "text-up" : r.tone === "down" ? "text-down" : "text-ink"
+                }`}
+              >
+                {r.value}
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {allocations && allocations.length > 0 ? (
+        <div className="border-t border-hair px-[1.4rem] pb-[1.4rem] pt-[1.2rem]">
+          <p className="mx-0 mb-[0.8rem] mt-0 font-mono text-[0.58rem] uppercase tracking-[0.1em] text-ink-mute">
+            {allocationsLabel}
+          </p>
+          {allocations.map((a) => (
+            <div
+              key={a.name}
+              className="grid grid-cols-[6rem_1fr_3rem] items-center gap-[0.9rem] py-[0.35rem] font-mono text-[0.78rem] text-ink-soft"
+            >
+              <span className="min-w-0 truncate text-ink" title={a.name}>
+                {a.name}
+              </span>
+              <span className="h-2 overflow-hidden rounded-none bg-ink/[0.08]">
+                <span
+                  className="block h-full rounded-none bg-accent"
+                  style={{ width: `${a.pct}%` }}
+                />
+              </span>
+              <span className="text-end text-ink-soft [font-variant-numeric:tabular-nums]">
+                {a.pct}%
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,144 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * SortableTable — the reorderable leaderboard promoted from the design
+ * reference (data/sortable-table): click (or keyboard-activate — real
+ * <button>s in the headers) a column to sort, click again to flip. The active
+ * column shows a caret and reports `aria-sort` on its <th>; numeric columns
+ * sort numerically and right-align, text sorts lexically. Column `tone`
+ * wears the money colors (--up / --down) — returns up, drawdowns down —
+ * and everything else stays ink.
+ *
+ * The table grammar (srt-*) lives in styles/finance-composites.css: header
+ * hover/active state, caret accent, hairline row rules, td money colors —
+ * descendant/state selectors that stay CSS per migrate-vs-leave. Rows render
+ * fully server-side markup-wise; without JS you get the table in its default
+ * order.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/finance-composites.css";
+ *                 @source "<path-to>/packages/ui/src/components/finance-composites";
+ */
+export type SortableColumn<Row> = {
+  /** Row field this column reads (and sorts by). */
+  key: keyof Row & string;
+  /** Mono micro-caps header label. */
+  label: string;
+  /** Numeric columns right-align and default to descending on first sort. */
+  numeric?: boolean;
+  /** Preformats the cell read; defaults to String(value). */
+  format?: (value: Row[keyof Row & string], row: Row) => string;
+  /** Money semantics for the whole column: returns "up", drawdowns "down". */
+  tone?: "up" | "down";
+  /** Identifier column emphasis — the read stays ink instead of ink-soft. */
+  emphasis?: boolean;
+};
+
+export type SortableTableProps<Row> = {
+  rows: Row[];
+  columns: SortableColumn<Row>[];
+  /** Stable React key per row — e.g. `(r) => r.strat`. */
+  rowKey: (row: Row) => string;
+  /** Initial sort; defaults to the first column in its natural direction. */
+  defaultSort?: { key: keyof Row & string; dir?: "asc" | "desc" };
+  /** Extra classes on the scroll shell (margins — the call site's business). */
+  className?: string;
+};
+
+export function SortableTable<Row>({
+  rows,
+  columns,
+  rowKey,
+  defaultSort,
+  className,
+}: SortableTableProps<Row>) {
+  const naturalDir = (key: keyof Row & string): "asc" | "desc" =>
+    columns.find((c) => c.key === key)?.numeric ? "desc" : "asc";
+
+  const initialKey = defaultSort?.key ?? columns[0]?.key;
+  const [sortKey, setSortKey] = useState<keyof Row & string>(initialKey);
+  const [dir, setDir] = useState<"asc" | "desc">(
+    defaultSort?.dir ?? (initialKey ? naturalDir(initialKey) : "asc"),
+  );
+
+  const sorted = [...rows].sort((a, b) => {
+    const av = a[sortKey];
+    const bv = b[sortKey];
+    const cmp =
+      typeof av === "number" && typeof bv === "number"
+        ? av - bv
+        : String(av).localeCompare(String(bv));
+    return dir === "asc" ? cmp : -cmp;
+  });
+
+  const onSort = (key: keyof Row & string) => {
+    if (key === sortKey) {
+      setDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setDir(naturalDir(key));
+    }
+  };
+
+  return (
+    <div
+      // tabIndex + role/aria-label: this is a horizontally-scrolling region on
+      // narrow viewports (no wrap point in the table itself) — without a tab
+      // stop, a keyboard-only user (no touch, no scrollbar drag) has no way
+      // to focus it and arrow-key-scroll the columns that overflow.
+      tabIndex={0}
+      role="region"
+      aria-label="Table, scrollable horizontally"
+      className={`overflow-x-auto rounded-none border border-hair bg-surface${
+        className ? ` ${className}` : ""
+      }`}
+    >
+      <table className="srt-table">
+        <thead>
+          <tr>
+            {columns.map((c) => {
+              const active = c.key === sortKey;
+              return (
+                <th
+                  key={c.key}
+                  scope="col"
+                  className={c.numeric ? "srt-r" : "srt-l"}
+                  aria-sort={active ? (dir === "asc" ? "ascending" : "descending") : "none"}
+                >
+                  <button
+                    type="button"
+                    className={`srt-head${active ? " is-active" : ""}`}
+                    onClick={() => onSort(c.key)}
+                  >
+                    {c.label}
+                    <span className="srt-caret" aria-hidden="true">
+                      {active ? (dir === "asc" ? "▲" : "▼") : "↕"}
+                    </span>
+                  </button>
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map((row) => (
+            <tr key={rowKey(row)}>
+              {columns.map((c) => (
+                <td
+                  key={c.key}
+                  className={`${c.numeric ? "srt-r" : "srt-l"}${c.tone ? ` ${c.tone}` : ""}${
+                    c.emphasis ? " srt-sym" : ""
+                  }`}
+                >
+                  {c.format ? c.format(row[c.key], row) : String(row[c.key])}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+/**
+ * StockTicker — the scrolling market strip promoted from the design reference
+ * (finance/ticker-tape): one mono row of symbol · last · change looping
+ * seamlessly (content duplicated once, track translated exactly -50%) behind
+ * edge-fade masks, pause-on-hover/focus-within/tap (the container is
+ * tabbable so touch users can tap-to-focus and keyboard users can tab to it —
+ * :focus-within mirrors the :hover rule, no JS state needed). This is the one
+ * marquee that legitimately wears the money colors — a price change IS the
+ * up/down semantic — while the module accent stays out of it entirely. Pure
+ * CSS animation (styles/finance-composites.css), so a plain server component;
+ * the tape is fully readable with no JS and prefers-reduced-motion holds it
+ * still.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/finance-composites.css";
+ *                 @source "<path-to>/packages/ui/src/components/finance-composites";
+ */
+export type TickerItem = {
+  /** Instrument symbol — "BTC-PERP", "SPY", "US10Y" … */
+  symbol: string;
+  /** Preformatted last price — "63,410", "4.281%" … */
+  last: string;
+  /** Preformatted change magnitude — "1.24%" (direction carried by `up`). */
+  change: string;
+  /** Direction of the change: true wears --up, false wears --down. */
+  up: boolean;
+};
+
+export type StockTickerProps = {
+  /** The ticks on the tape — duplicated internally for the seamless loop. */
+  items: TickerItem[];
+  /** Extra classes on the tape shell (margins, widths — the call site's business). */
+  className?: string;
+};
+
+export function StockTicker({ items, className }: StockTickerProps) {
+  return (
+    <div
+      className={`tk${className ? ` ${className}` : ""}`}
+      tabIndex={0}
+      aria-label="Price ticker, tab or tap to pause"
+    >
+      <div className="tk-track">
+        {[...items, ...items].map((t, i) => (
+          <span
+            className="inline-flex items-baseline gap-2 whitespace-nowrap border-e border-hair px-[1.3rem] py-[0.7rem] font-mono text-[0.82rem] [font-variant-numeric:tabular-nums]"
+            key={`${t.symbol}-${i}`}
+            aria-hidden={i >= items.length || undefined}
+          >
+            <span className="tracking-[0.02em] text-ink">{t.symbol}</span>
+            <span className="text-ink-soft">{t.last}</span>
+            <span
+              className={`inline-flex items-center gap-[0.28rem] text-[0.76rem] ${
+                t.up ? "text-up" : "text-down"
+              }`}
+            >
+              <span aria-hidden="true">{t.up ? "▲" : "▼"}</span>
+              {t.change}
+            </span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,226 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import {
+  AreaSeries,
+  BaselineSeries,
+  ColorType,
+  createChart,
+  CrosshairMode,
+  type AreaData,
+  type BaselineData,
+  type IChartApi,
+  type Time,
+} from "lightweight-charts";
+
+/**
+ * SyncedTearsheet — the multi-pane tearsheet chart promoted from the design
+ * reference (finance/synced-tearsheet): ONE Lightweight Charts instance, two
+ * panes sharing a single time axis — cumulative equity on top, the underwater
+ * drawdown below. Because both live in one chart, the x-axis, crosshair and
+ * zoom are synced natively (no cross-chart plumbing). Equity wears the module
+ * accent (identity); drawdown wears --down (it only ever reads negative) —
+ * per the charting house rules, every color is read from a design token at
+ * runtime and a MutationObserver on data-theme re-themes live.
+ *
+ * This IS the multi-series primitive: add a pane per series rather than
+ * stacking separate charts. The finance-charts family's single-series
+ * specimens (price-chart / equity-curve / drawdown-plot) are siblings, not
+ * children — composites embed this component directly. Give the host a
+ * definite height (the reference wraps it in `.pc-frame--tall`); autoSize
+ * fills it. Canvas-only, so nothing to read without JS — decorative by
+ * default (aria-hidden) unless you pass `ariaLabel`.
+ *
+ * Wiring (in the consuming app):
+ *   package: lightweight-charts ^5.2.0
+ *   globals.css   @source "<path-to>/packages/ui/src/components/finance-composites";
+ *   (no family CSS needed — the chart paints from tokens on canvas)
+ */
+export type TearsheetPoint = {
+  /** ISO date, yyyy-mm-dd — Lightweight Charts business-day time. */
+  time: string;
+  value: number;
+};
+
+export type SyncedTearsheetProps = {
+  /** Cumulative equity series (pane 0, module accent). */
+  equity: TearsheetPoint[];
+  /**
+   * Underwater drawdown series (pane 1, --down), in percent (≤ 0). Derived
+   * from `equity`'s running peak (one decimal) when omitted.
+   */
+  drawdown?: TearsheetPoint[];
+  /** Height share of the equity pane relative to the drawdown pane's 1. */
+  equityStretch?: number;
+  /** Describes the chart to AT; omitted = decorative (aria-hidden). */
+  ariaLabel?: string;
+  /** Extra classes on the host (defaults fill the parent: h-full w-full). */
+  className?: string;
+  /**
+   * Let page scroll/wheel/touch-drag pass through instead of panning or
+   * zooming the chart. Off by default — this component rides real dashboard
+   * dashboard surfaces (e.g. a workspace's drawdown view) where pan/zoom on
+   * the chart is an intended interaction. Turn it on only for a display
+   * specimen embedded in scrolling prose (see synced-tearsheet-reference.tsx)
+   * where nobody is meant to interact with the chart itself.
+   */
+  pageScrollThrough?: boolean;
+};
+
+function deriveDrawdown(equity: TearsheetPoint[]): TearsheetPoint[] {
+  let peak = -Infinity;
+  return equity.map((p) => {
+    peak = Math.max(peak, p.value);
+    return { time: p.time, value: Math.round((p.value / peak - 1) * 1000) / 10 };
+  });
+}
+
+export function SyncedTearsheet({
+  equity,
+  drawdown,
+  equityStretch = 2.4,
+  ariaLabel,
+  className,
+  pageScrollThrough = false,
+}: SyncedTearsheetProps) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || equity.length === 0) return;
+    const cssVar = (name: string, fb: string) =>
+      getComputedStyle(host).getPropertyValue(name).trim() || fb;
+    const toRgba = (col: string, a: number) => {
+      const m = col.match(/[\d.]+/g);
+      if (col.startsWith("#") || !m || m.length < 3) return col;
+      return `rgba(${m[0]},${m[1]},${m[2]},${a})`;
+    };
+
+    const palette = () => ({
+      inkMute: cssVar("--ink-mute", "#7D8389"),
+      hair: cssVar("--hair", "rgba(255,255,255,0.09)"),
+      accent: cssVar("--accent", "#3dd6c4"),
+      down: cssVar("--down", "#E5533E"),
+      mono: cssVar("--font-mono", "monospace"),
+    });
+    let p = palette();
+
+    const chart: IChartApi = createChart(host, {
+      autoSize: true,
+      layout: {
+        background: { type: ColorType.Solid, color: "transparent" },
+        textColor: p.inkMute,
+        fontFamily: p.mono,
+        fontSize: 11,
+        attributionLogo: false,
+      },
+      grid: { vertLines: { color: p.hair }, horzLines: { color: p.hair } },
+      rightPriceScale: { borderColor: p.hair },
+      timeScale: { borderColor: p.hair, timeVisible: false },
+      crosshair: {
+        mode: CrosshairMode.Normal,
+        vertLine: { color: p.inkMute, labelBackgroundColor: p.accent },
+        horzLine: { color: p.inkMute, labelBackgroundColor: p.accent },
+      },
+      ...(pageScrollThrough
+        ? {
+            handleScroll: {
+              mouseWheel: false,
+              pressedMouseMove: false,
+              horzTouchDrag: false,
+              vertTouchDrag: false,
+            },
+            handleScale: { axisPressedMouseMove: false, mouseWheel: false, pinch: false },
+          }
+        : {}),
+    });
+
+    // pane 0 — cumulative equity (identity accent)
+    const equitySeries = chart.addSeries(
+      AreaSeries,
+      {
+        lineColor: p.accent,
+        topColor: toRgba(p.accent, 0.28),
+        bottomColor: toRgba(p.accent, 0.02),
+        lineWidth: 2,
+        priceLineVisible: false,
+      },
+      0,
+    );
+    equitySeries.setData(
+      equity.map((pt): AreaData => ({ time: pt.time as Time, value: pt.value })),
+    );
+
+    // pane 1 — underwater drawdown (money --down)
+    const drawdownSeries = chart.addSeries(
+      BaselineSeries,
+      {
+        baseValue: { type: "price", price: 0 },
+        topLineColor: "transparent",
+        topFillColor1: "transparent",
+        topFillColor2: "transparent",
+        bottomLineColor: p.down,
+        bottomFillColor1: toRgba(p.down, 0.05),
+        bottomFillColor2: toRgba(p.down, 0.32),
+        lineWidth: 2,
+        priceLineVisible: false,
+        // this pane is always the underwater drawdown series (percent, ≤ 0) —
+        // format the axis accordingly rather than leaving it bare numbers.
+        priceFormat: { type: "custom", formatter: (v: number) => `${v.toFixed(1)}%`, minMove: 0.1 },
+      },
+      1,
+    );
+    drawdownSeries.setData(
+      (drawdown ?? deriveDrawdown(equity)).map(
+        (pt): BaselineData => ({ time: pt.time as Time, value: pt.value }),
+      ),
+    );
+
+    // give the equity pane the lion's share of the height
+    const panes = chart.panes();
+    panes[0]?.setStretchFactor(equityStretch);
+    panes[1]?.setStretchFactor(1);
+
+    chart.timeScale().fitContent();
+
+    const retheme = () => {
+      p = palette();
+      chart.applyOptions({
+        layout: { textColor: p.inkMute },
+        grid: { vertLines: { color: p.hair }, horzLines: { color: p.hair } },
+        rightPriceScale: { borderColor: p.hair },
+        timeScale: { borderColor: p.hair },
+      });
+      equitySeries.applyOptions({
+        lineColor: p.accent,
+        topColor: toRgba(p.accent, 0.28),
+        bottomColor: toRgba(p.accent, 0.02),
+      });
+      drawdownSeries.applyOptions({
+        bottomLineColor: p.down,
+        bottomFillColor1: toRgba(p.down, 0.05),
+        bottomFillColor2: toRgba(p.down, 0.32),
+      });
+    };
+    const themeObs = new MutationObserver(retheme);
+    themeObs.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+
+    return () => {
+      themeObs.disconnect();
+      chart.remove();
+    };
+  }, [equity, drawdown, equityStretch, pageScrollThrough]);
+
+  return (
+    <div
+      className={className ?? "h-full w-full"}
+      ref={hostRef}
+      role={ariaLabel ? "img" : undefined}
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? undefined : "true"}
+    />
+  );
+}

package/src/components/finance-composites/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Finance-composites family barrel (#1450) — the composite finance surfaces
+ * promoted from the reference finance/data pages: ticker tape, order book,
+ * sortable leaderboard, book-level performance dashboard, and the synced
+ * two-pane tearsheet chart. Structural CSS: styles/finance-composites.css.
+ * Re-exported from the package barrel (src/index.ts) by the F1 wire-up.
+ */
+export { StockTicker, type TickerItem, type StockTickerProps } from "./StockTicker";
+export {
+  MarketBar,
+  type MarketBarProps,
+  type MarketBarCell,
+  type MarketBarStatus,
+} from "./MarketBar";
+export { OrderBook, type OrderBookLevel, type OrderBookProps } from "./OrderBook";
+export { SortableTable, type SortableColumn, type SortableTableProps } from "./SortableTable";
+export {
+  PerformanceDashboard,
+  type DashboardHeadline,
+  type DashboardRatio,
+  type DashboardAllocation,
+  type PerformanceDashboardProps,
+} from "./PerformanceDashboard";
+export {
+  SyncedTearsheet,
+  type TearsheetPoint,
+  type SyncedTearsheetProps,
+} from "./SyncedTearsheet";