@digithings-ai/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,2624 @@
+"use client";
+/**
+ * Dependency-free SVG charts for finance tearsheets (#1463) — promoted
+ * verbatim from apps/digiquant-web/components/tearsheet/charts.tsx.
+ * Pure vector output (no canvas, no libs) so the tearsheet prints to PDF
+ * crisply: the PDF pipeline flushSync-re-renders these same component
+ * instances at full span and calls window.print(), so print-first pure-SVG
+ * is a hard constraint here. Canvas engines are the DASHBOARD grammar
+ * (finance-charts / finance-composites) — see packages/ui/CHARTS.md
+ * before swapping engines on any surface.
+ *
+ * Charts render into a 0 0 1000 H viewBox and scale to the container width.
+ * Colours come from CSS custom properties on the chart classes (theme-aware
+ * via [data-theme]). Supports linear / log / symlog y scales — symlog
+ * handles series that cross zero (cumulative P&L). The series surfaces
+ * (CandlestickChart, TimeSeries, TradeReturnChart) share one normalized
+ * ViewWindow: wheel-zoom / drag-pan / double-click reset stay synced across
+ * charts, with lookback presets matched back via `matchLookbackPreset`.
+ */
+import { type ReactNode, type RefObject, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { fmtCompact, fmtMoney, fmtNum, fmtPct, toneClass } from "./format";
+import { RISK_BANDS } from "./risk-bands";
+import {
+  isOpenTrade,
+  type TearsheetOhlcBar,
+  type TearsheetSeriesPoint,
+  type TearsheetTrade,
+  type TradeReturnBar,
+} from "./types";
+
+const W = 1000;
+const PAD = { top: 30, right: 18, bottom: 34, left: 68 };
+/** Tighter gutters for homepage preview cards — more plot area edge-to-edge. */
+const PAD_COMPACT = { top: 16, right: 4, bottom: 22, left: 44 };
+
+type ChartPad = typeof PAD;
+
+function resolveChartPad(widthPx: number, compact: boolean): ChartPad {
+  const base = compact ? PAD_COMPACT : PAD;
+  if (widthPx >= 640) return { ...base };
+  const t = Math.max(0, Math.min(1, (widthPx - 280) / (640 - 280)));
+  return {
+    top: compact ? base.top : Math.round(20 + t * (base.top - 20)),
+    right: compact ? base.right : Math.round(6 + t * (base.right - 6)),
+    bottom: compact ? base.bottom : Math.round(26 + t * (base.bottom - 26)),
+    left: compact
+      ? Math.round(26 + t * (base.left - 26))
+      : Math.round(40 + t * (base.left - 40)),
+  };
+}
+
+/** Match viewBox width to container aspect so fill-mode scaling stays uniform. */
+function useChartLayout(
+  wrapRef: RefObject<HTMLDivElement | null>,
+  vbH: number,
+  compact: boolean,
+): { vbW: number; pad: ChartPad } {
+  const [layout, setLayout] = useState<{ vbW: number; pad: ChartPad }>(() => ({
+    vbW: W,
+    pad: compact ? PAD_COMPACT : PAD,
+  }));
+
+  useLayoutEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+
+    const update = () => {
+      const { width, height } = el.getBoundingClientRect();
+      if (width <= 0 || height <= 0) return;
+      const vbW = Math.max(280, Math.round((width / height) * vbH));
+      setLayout({
+        vbW,
+        pad: resolveChartPad(width, compact),
+      });
+    };
+
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [wrapRef, vbH, compact]);
+
+  return layout;
+}
+
+/** Pointer position in viewBox coords. */
+function viewBoxPoint(
+  clientX: number,
+  clientY: number,
+  svg: Element,
+  vbW: number,
+  vbH: number,
+): { x: number; y: number } {
+  const rect = svg.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return { x: vbW / 2, y: vbH / 2 };
+  return {
+    x: ((clientX - rect.left) / rect.width) * vbW,
+    y: ((clientY - rect.top) / rect.height) * vbH,
+  };
+}
+
+interface ChartHoverTip {
+  x: number;
+  y: number;
+  flipX: boolean;
+  flipY: boolean;
+  content: ReactNode;
+}
+
+function positionHoverTip(
+  clientX: number,
+  clientY: number,
+  wrap: HTMLElement,
+  estW = 200,
+  estH = 96,
+): Pick<ChartHoverTip, "x" | "y" | "flipX" | "flipY"> {
+  const rect = wrap.getBoundingClientRect();
+  const pad = 12;
+  const relX = clientX - rect.left;
+  const relY = clientY - rect.top;
+  const flipX = relX + pad + estW > rect.width;
+  const flipY = relY - pad - estH < 0;
+  return {
+    x: relX,
+    y: relY,
+    flipX,
+    flipY,
+  };
+}
+
+function ChartHoverShell({
+  hover,
+  children,
+  wrapRef,
+}: {
+  hover: ChartHoverTip | null;
+  children: ReactNode;
+  wrapRef?: RefObject<HTMLDivElement | null>;
+}) {
+  return (
+    <div className="ts-chart-wrap" ref={wrapRef}>
+      {children}
+      {hover ? (
+        <div
+          className={
+            "ts-chart-tip" +
+            (hover.flipX ? " is-flip-x" : "") +
+            (hover.flipY ? " is-flip-y" : "")
+          }
+          style={{ left: hover.x, top: hover.y }}
+          role="tooltip"
+        >
+          {hover.content}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function TradeTipContent({ trade, showPnlMoney = false }: { trade: TearsheetTrade; showPnlMoney?: boolean }) {
+  const open = isOpenTrade(trade);
+  const pnlTone = toneClass(trade.pnl_pct);
+  return (
+    <div className="ts-chart-tip-body">
+      <div className="ts-chart-tip-title">
+        <span className={`ts-dir ts-dir-${trade.direction}`}>{trade.direction}</span>
+        {trade.entry_label ? <span className="ts-chart-tip-signal">{trade.entry_label}</span> : null}
+      </div>
+      <dl className="ts-chart-tip-dl">
+        <div>
+          <dt>Entry</dt>
+          <dd>
+            {(trade.entry_date || "").slice(0, 10)} @ {fmtNum(trade.entry_price, 2)}
+          </dd>
+        </div>
+        <div>
+          <dt>Exit</dt>
+          <dd>
+            {open
+              ? "open"
+              : `${(trade.exit_date || "").slice(0, 10)} @ ${fmtNum(trade.exit_price, 2)}`}
+          </dd>
+        </div>
+        <div>
+          <dt>P&amp;L</dt>
+          <dd className={pnlTone}>
+            {fmtPct(trade.pnl_pct)}
+            {showPnlMoney ? ` · ${fmtMoney(trade.pnl)}` : null}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+function OhlcTipContent({ bar }: { bar: TearsheetOhlcBar }) {
+  return (
+    <dl className="ts-chart-tip-dl">
+      <div>
+        <dt>Date</dt>
+        <dd>{(bar.t || "").slice(0, 10)}</dd>
+      </div>
+      <div>
+        <dt>Open</dt>
+        <dd>{fmtNum(bar.o, 2)}</dd>
+      </div>
+      <div>
+        <dt>High</dt>
+        <dd>{fmtNum(bar.h, 2)}</dd>
+      </div>
+      <div>
+        <dt>Low</dt>
+        <dd>{fmtNum(bar.l, 2)}</dd>
+      </div>
+      <div>
+        <dt>Close</dt>
+        <dd>{fmtNum(bar.c, 2)}</dd>
+      </div>
+    </dl>
+  );
+}
+
+function SeriesTipContent({ date, value }: { date: string; value: string }) {
+  return (
+    <dl className="ts-chart-tip-dl">
+      <div>
+        <dt>Date</dt>
+        <dd>{date.slice(0, 10)}</dd>
+      </div>
+      <div>
+        <dt>Value</dt>
+        <dd>{value}</dd>
+      </div>
+    </dl>
+  );
+}
+
+function ContributionReturnTipContent({
+  point,
+  colors,
+  benchmark,
+}: {
+  point: ContributionReturnPoint;
+  /** Per-series swatch colors — replaces a header legend, which does not scale past a handful of assets. */
+  colors?: Record<string, string>;
+  benchmark?: { label: string; value: number };
+}) {
+  const contributions = Object.entries(point.contributions)
+    .filter(([, value]) => value !== 0)
+    .sort((left, right) => Math.abs(right[1]) - Math.abs(left[1]));
+  return (
+    <div className="ts-chart-tip-body">
+      <dl className="ts-chart-tip-dl">
+        <div><dt>Date</dt><dd>{point.t.slice(0, 10)}</dd></div>
+        <div><dt>Portfolio</dt><dd>{fmtPct(point.returnPct)}</dd></div>
+        {benchmark ? <div><dt>{benchmark.label}</dt><dd>{fmtPct(benchmark.value)}</dd></div> : null}
+        {contributions.map(([label, value]) => (
+          <div key={label}>
+            <dt>
+              {colors?.[label] ? (
+                <span
+                  aria-hidden="true"
+                  style={{
+                    display: "inline-block",
+                    width: "0.55em",
+                    height: "0.55em",
+                    marginRight: "0.45em",
+                    backgroundColor: colors[label],
+                  }}
+                />
+              ) : null}
+              {label}
+            </dt>
+            <dd>{fmtPct(value)}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}
+
+interface MarkerHit {
+  x: number;
+  y: number;
+  role: "entry" | "exit";
+  trade: TearsheetTrade;
+}
+
+/** Nearest marker triangle; on reversal bars entry/exit share a bar — prefer entry. */
+function hitMarker(vbX: number, vbY: number, markers: MarkerHit[], threshold = 20): MarkerHit | null {
+  let best: MarkerHit | null = null;
+  let bestD = threshold;
+  for (const m of markers) {
+    const d = Math.hypot(vbX - m.x, vbY - m.y);
+    if (d > bestD) continue;
+    if (
+      d < bestD ||
+      !best ||
+      (m.role === "entry" && best.role === "exit")
+    ) {
+      bestD = d;
+      best = m;
+    }
+  }
+  return best;
+}
+
+function nearestBarIndex(vbX: number, n: number, xAt: (i: number) => number, maxDist: number): number {
+  if (n <= 0) return -1;
+  if (n === 1) return 0;
+  let best = 0;
+  let bestD = Infinity;
+  for (let i = 0; i < n; i++) {
+    const d = Math.abs(vbX - xAt(i));
+    if (d < bestD) {
+      bestD = d;
+      best = i;
+    }
+  }
+  return bestD <= maxDist ? best : -1;
+}
+
+/** Default zoom: last calendar year of the shared span (readable on long backtests). */
+export function viewWindowLastYear(fullSpan: [string, string] | undefined): ViewWindow {
+  return viewWindowForPreset("1y", fullSpan);
+}
+
+export type LookbackPreset = "1m" | "3m" | "6m" | "ytd" | "1y" | "3y" | "all";
+
+export const LOOKBACK_OPTIONS: { value: LookbackPreset; label: string }[] = [
+  { value: "1m", label: "1M" },
+  { value: "3m", label: "3M" },
+  { value: "6m", label: "6M" },
+  { value: "ytd", label: "YTD" },
+  { value: "1y", label: "1Y" },
+  { value: "3y", label: "3Y" },
+  { value: "all", label: "All" },
+];
+
+const MS_DAY = 24 * 3600 * 1000;
+
+function spanEndpoints(fullSpan: [string, string]): { t0: number; t1: number; spanMs: number } | null {
+  const t0 = new Date(fullSpan[0]).getTime();
+  const t1 = new Date(fullSpan[1]).getTime();
+  const spanMs = t1 - t0;
+  if (!Number.isFinite(spanMs) || spanMs <= 0) return null;
+  return { t0, t1, spanMs };
+}
+
+/** Map a lookback preset to a normalized [lo, hi] window over `fullSpan`. */
+export function viewWindowForPreset(
+  preset: LookbackPreset,
+  fullSpan: [string, string] | undefined,
+): ViewWindow {
+  if (!fullSpan || preset === "all") return { lo: 0, hi: 1 };
+  const span = spanEndpoints(fullSpan);
+  if (!span) return { lo: 0, hi: 1 };
+
+  const { t0, t1, spanMs } = span;
+  let startMs: number;
+  switch (preset) {
+    case "1m":
+      startMs = t1 - 30 * MS_DAY;
+      break;
+    case "3m":
+      startMs = t1 - 91.25 * MS_DAY;
+      break;
+    case "6m":
+      startMs = t1 - 182.625 * MS_DAY;
+      break;
+    case "ytd": {
+      const end = new Date(fullSpan[1]);
+      startMs = Date.UTC(end.getUTCFullYear(), 0, 1);
+      break;
+    }
+    case "1y":
+      startMs = t1 - 365.25 * MS_DAY;
+      break;
+    case "3y":
+      startMs = t1 - 3 * 365.25 * MS_DAY;
+      break;
+    default: {
+      const _exhaustive: never = preset;
+      return _exhaustive;
+    }
+  }
+  const lo = Math.max(0, (startMs - t0) / spanMs);
+  return clampView(lo, 1);
+}
+
+const VIEW_EPS = 0.002;
+
+/** True when two normalized windows are effectively the same. */
+export function viewsNear(a: ViewWindow, b: ViewWindow): boolean {
+  return Math.abs(a.lo - b.lo) < VIEW_EPS && Math.abs(a.hi - b.hi) < VIEW_EPS;
+}
+
+/** Which preset matches this window, if any. */
+export function matchLookbackPreset(
+  view: ViewWindow,
+  fullSpan: [string, string] | undefined,
+): LookbackPreset | null {
+  if (!fullSpan) return null;
+  for (const { value } of LOOKBACK_OPTIONS) {
+    if (viewsNear(view, viewWindowForPreset(value, fullSpan))) return value;
+  }
+  return null;
+}
+
+/** Tight y-domain in transformed scale space with optional zero anchor. */
+function dataDomain(
+  values: number[],
+  scale: { f: (v: number) => number },
+  opts: { padRatio?: number; anchorZero?: "min" | "max" },
+): { lo: number; hi: number } {
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const v of values) {
+    const y = scale.f(v);
+    if (y < lo) lo = y;
+    if (y > hi) hi = y;
+  }
+  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return { lo: 0, hi: 1 };
+  if (opts.anchorZero === "min") lo = Math.min(lo, scale.f(0));
+  if (opts.anchorZero === "max") hi = Math.max(hi, scale.f(0));
+  if (lo === hi) hi = lo + 1;
+  const pad = (hi - lo) * (opts.padRatio ?? 0.05);
+  return { lo: lo - pad, hi: hi + pad };
+}
+
+export type ChartLegendKind =
+  | "line"
+  | "line-up"
+  | "line-down"
+  | "line-mute"
+  | "line-dashed"
+  | "bar-up"
+  | "bar-down"
+  | "bar-open"
+  | "marker-buy"
+  | "marker-sell";
+
+/** Compact HTML legend for panel headers (top-right, beside controls). */
+export function ChartLegend({
+  items,
+}: {
+  items: { kind: ChartLegendKind; label: string }[];
+}) {
+  return (
+    // Not aria-hidden: these labels ("long"/"short"/"Realized %"/etc.) are
+    // the one place the chart's visual encoding is spelled out in words —
+    // hiding them left the charts' role="img" panes with no way for a
+    // screen-reader user to learn what a line/bar/marker color means.
+    <div className="ts-chart-legend">
+      {items.map((it) => (
+        <span className="ts-chart-legend-item" key={it.label}>
+          <span className={`ts-chart-legend-swatch ts-chart-legend-${it.kind}`} />
+          <span>{it.label}</span>
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function axisLabelY(y: number, plotTop: number, plotBottom: number): number {
+  return Math.max(plotTop + 11, Math.min(plotBottom - 2, y + 4));
+}
+
+export type ChartScale = "linear" | "log" | "symlog";
+export type ChartTone = "accent" | "up" | "down";
+/** Overlay lines may also use the muted ink (rails, lump/flat benchmarks). */
+export type OverlayTone = ChartTone | "mute";
+
+/**
+ * Reference overlays for TimeSeries / MultiTimeSeries (Q3b slice 5, #4443).
+ * Published levels, conviction bands and event anchors that are data, not
+ * decoration — every consumer pairs them with a text caption carrying the
+ * same facts so the chart stays legible without pixels.
+ */
+export type ReferenceTone = "accent" | "up" | "down" | "warn" | "mute";
+export interface ReferenceLineSpec {
+  value: number;
+  tone?: ReferenceTone;
+  /** Dashed by default (all current consumers dash); pass false for solid. */
+  dashed?: boolean;
+  label?: string;
+}
+export interface ReferenceBandSpec {
+  from: number;
+  to: number;
+  tone?: ReferenceTone;
+}
+export interface ReferenceMarkerSpec {
+  /** ISO date — snaps to the nearest plotted date. */
+  t: string;
+  v: number;
+  tone?: ReferenceTone;
+  label?: string;
+}
+export interface ChartReferences {
+  lines?: ReferenceLineSpec[];
+  bands?: ReferenceBandSpec[];
+  markers?: ReferenceMarkerSpec[];
+}
+
+/** A normalized x-domain window (fractions 0..1 over a chart's full date span). */
+export interface ViewWindow {
+  lo: number;
+  hi: number;
+}
+/**
+ * Smallest allowed window (2% of the span) — keeps zoom from collapsing into
+ * an empty/degenerate range that blanks the chart (legacy ComboPnl bug #1180;
+ * the SVG tearsheet grammar owns that surface after the digiquant-web → digiweb
+ * promotion).
+ */
+export const MIN_VIEW = 0.02;
+
+/** Clamp a zoom window into `[0,1]` and enforce {@link MIN_VIEW} width. */
+export function clampView(lo: number, hi: number): ViewWindow {
+  let l = Math.max(0, Math.min(lo, 1));
+  let h = Math.max(0, Math.min(hi, 1));
+  if (h - l < MIN_VIEW) {
+    // Re-expand around the window centre, then re-clamp into [0,1].
+    const mid = (l + h) / 2;
+    l = Math.max(0, mid - MIN_VIEW / 2);
+    h = Math.min(1, l + MIN_VIEW);
+    l = Math.max(0, h - MIN_VIEW);
+  }
+  return { lo: l, hi: h };
+}
+
+/** Icon-only reset zoom — floats over the chart area (top-right). */
+export function ChartResetButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      className="ts-reset ts-reset-chart"
+      onClick={onClick}
+      aria-label="Reset zoom to selected time range"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="15"
+        height="15"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+        <path d="M16 3h3a2 2 0 0 1 2 2v3" />
+        <path d="M8 21H5a2 2 0 0 1-2-2v-3" />
+        <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+      </svg>
+    </button>
+  );
+}
+
+/**
+ * Generic segmented-button toggle. Real <button>s with aria-pressed inside a
+ * labelled group — accessible, theme-aware (active = accent). Used for the equity
+ * scale, the cumulative-P&L scale, and the returns-matrix period selector.
+ */
+export function SegToggle<T extends string>({
+  value,
+  options,
+  onChange,
+  label,
+  className,
+}: {
+  value: T;
+  options: { value: T; label: string }[];
+  onChange: (v: T) => void;
+  label: string;
+  className?: string;
+}) {
+  return (
+    <div className={"ts-seg" + (className ? ` ${className}` : "")} role="group" aria-label={label}>
+      {options.map((o) => (
+        <button
+          key={o.value}
+          type="button"
+          className={"ts-seg-btn" + (o.value === value ? " is-active" : "")}
+          aria-pressed={o.value === value}
+          onClick={() => onChange(o.value)}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Translate a pointer event over the chart SVG into a fraction (0..1) across the
+ * plot area (inside the left/right insets).
+ */
+function plotFraction(
+  clientX: number,
+  target: Element,
+  padLeft: number,
+  padRight: number,
+  vbW: number,
+): number {
+  const rect = target.getBoundingClientRect();
+  if (rect.width === 0) return 0.5;
+  const x = ((clientX - rect.left) / rect.width) * vbW;
+  const plotW = vbW - padLeft - padRight;
+  if (plotW <= 0) return 0.5;
+  return Math.max(0, Math.min(1, (x - padLeft) / plotW));
+}
+
+/** What a view-controlled chart needs to drive zoom/pan; null ⇒ static chart. */
+interface ViewControl {
+  /** plot-area right inset (differs per chart). */
+  padRight: number;
+  /** wheel zoom, centred on cursor clientX, against the chart's own width. */
+  onWheel: (clientX: number, deltaY: number, target: Element) => void;
+  /** Drag-pan start — Pointer Events (not mouse-only), so a single-finger
+   *  touch drag pans the same as a mouse drag. Pinch-zoom has no wheel
+   *  equivalent and is not implemented (see the P2 note in charts.tsx's
+   *  header comment). */
+  onPointerDown: (e: React.PointerEvent<SVGSVGElement>) => void;
+  onDoubleClick: () => void;
+}
+
+/**
+ * Which pointerId currently owns an active drag on a given chart <svg> —
+ * keyed by the DOM element itself (not module-global) so independent chart
+ * instances never contend with each other, and a re-render's fresh
+ * viewHandlers() closure still sees a drag its previous closure started.
+ * A single mouse can never produce two concurrent "down" states, but a
+ * touchscreen can (two fingers, or a fast second tap while the first is
+ * still held) — without this guard a second pointerdown starts a SECOND
+ * independent drag session with its own startX/lo/hi snapshot, and the two
+ * sessions' onView(...) calls overwrite each other every other frame,
+ * visibly thrashing the shared view.
+ */
+const activeDragPointer = new WeakMap<Element, number>();
+
+/**
+ * Build the shared wheel / drag / double-click control for a ViewWindow. Returns
+ * null (static chart) when not view-controlled, so the same component renders
+ * statically wherever `view`/`onView` are omitted.
+ */
+function viewHandlers(
+  view: ViewWindow | undefined,
+  onView: ((v: ViewWindow) => void) | undefined,
+  pad: Pick<ChartPad, "left" | "right">,
+  vbW: number,
+  resetTo?: ViewWindow,
+): ViewControl | null {
+  if (!view || !onView) return null;
+  const { lo, hi } = view;
+  const resetView = resetTo ?? { lo: 0, hi: 1 };
+
+  const onWheel = (clientX: number, deltaY: number, target: Element) => {
+    const span = hi - lo;
+    const cursor = lo + plotFraction(clientX, target, pad.left, pad.right, vbW) * span;
+    // Wheel up (deltaY < 0) zooms in; down zooms out. Centred on the cursor.
+    const factor = Math.exp(deltaY * 0.0011);
+    const nlo = cursor - (cursor - lo) * factor;
+    const nhi = cursor + (hi - cursor) * factor;
+    onView(clampView(nlo, nhi));
+  };
+
+  // Pointer Events (not mouse-only): the same handler drives mouse drag AND
+  // single-finger touch drag, so drag-pan works on the mobile breakpoint
+  // this family's own CSS already ships for these panes. setPointerCapture
+  // keeps move/up routed to this element even if the finger/cursor leaves
+  // its bounds mid-drag (load-bearing for touch, where a real finger drifts
+  // off the SVG far more easily than a mouse does).
+  const onPointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
+    const el = e.currentTarget;
+    // A drag is already active on this chart (a second finger, or a fast
+    // second tap while the first is still held) — ignore it rather than
+    // starting a competing session against the same shared view.
+    if (activeDragPointer.has(el)) return;
+    e.preventDefault();
+    activeDragPointer.set(el, e.pointerId);
+    el.setPointerCapture(e.pointerId);
+    const startX = e.clientX;
+    const span = hi - lo;
+    const rect = el.getBoundingClientRect();
+    const plotPxW = rect.width * ((vbW - pad.left - pad.right) / vbW);
+    const move = (me: PointerEvent) => {
+      if (me.pointerId !== e.pointerId) return;
+      if (plotPxW === 0) return;
+      // Drag right ⇒ window shifts left (content follows the cursor). Clamp the
+      // shift so the window TRANSLATES (keeps its width) against the [0,1] edges
+      // instead of narrowing — true pan, not zoom, at the boundary.
+      let dFrac = ((me.clientX - startX) / plotPxW) * span;
+      dFrac = Math.max(hi - 1, Math.min(lo, dFrac));
+      onView(clampView(lo - dFrac, hi - dFrac));
+    };
+    const up = (ue: PointerEvent) => {
+      if (ue.pointerId !== e.pointerId) return;
+      activeDragPointer.delete(el);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+  };
+
+  const onDoubleClick = () => onView(resetView);
+
+  return { padRight: pad.right, onWheel, onPointerDown, onDoubleClick };
+}
+
+function makeScale(kind: ChartScale) {
+  if (kind === "log") {
+    return { f: (v: number) => Math.log10(Math.max(v, 1e-9)), inv: (y: number) => Math.pow(10, y) };
+  }
+  if (kind === "symlog") {
+    return {
+      f: (v: number) => Math.sign(v) * Math.log10(1 + Math.abs(v)),
+      inv: (y: number) => Math.sign(y) * (Math.pow(10, Math.abs(y)) - 1),
+    };
+  }
+  return { f: (v: number) => v, inv: (y: number) => y };
+}
+
+function niceLinearTicks(min: number, max: number, count: number): number[] {
+  if (min === max) return [min];
+  const span = max - min;
+  const step0 = Math.pow(10, Math.floor(Math.log10(span / count)));
+  const e = span / count / step0;
+  const step = e >= 7.5 ? step0 * 10 : e >= 3 ? step0 * 5 : e >= 1.5 ? step0 * 2 : step0;
+  const out: number[] = [];
+  for (let v = Math.ceil(min / step) * step; v <= max + step * 0.5; v += step) out.push(v);
+  return out;
+}
+
+/** Log-scale ticks with ~targetCount labels between min and max (not just decades). */
+function logTicks(realLo: number, realHi: number, targetCount = 6): number[] {
+  const lo = Math.max(realLo, 1e-12);
+  const hi = Math.max(realHi, lo * 1.001);
+  const loLog = Math.log10(lo);
+  const hiLog = Math.log10(hi);
+  const span = hiLog - loLog;
+  if (!Number.isFinite(span) || span <= 0) return [lo, hi];
+
+  const roughStep = span / Math.max(2, targetCount - 1);
+  const niceSteps = [0.1, 0.2, 0.3, 0.5, 1.0, 2.0];
+  let logStep = niceSteps[niceSteps.length - 1]!;
+  for (const s of niceSteps) {
+    if (s >= roughStep - 1e-9) {
+      logStep = s;
+      break;
+    }
+  }
+
+  const ticks: number[] = [];
+  const start = Math.floor(loLog / logStep) * logStep;
+  for (let lk = start; lk <= hiLog + logStep * 0.001; lk += logStep) {
+    const v = Math.pow(10, lk);
+    if (v + 1e-9 >= lo && v - 1e-9 <= hi) ticks.push(v);
+  }
+  return ticks.length >= 2 ? ticks : [lo, hi];
+}
+
+// Decade ticks for symlog, in real (untransformed) space.
+function decadeTicks(kind: ChartScale, realLo: number, realHi: number): number[] {
+  const ticks: number[] = [];
+  const maxAbs = Math.max(Math.abs(realLo), Math.abs(realHi));
+  if (maxAbs <= 0) return [0];
+  const topK = Math.ceil(Math.log10(maxAbs));
+  if (kind === "symlog") {
+    ticks.push(0);
+    for (let k = 1; k <= topK; k++) {
+      const v = Math.pow(10, k);
+      if (v <= realHi) ticks.push(v);
+      if (-v >= realLo) ticks.push(-v);
+    }
+  } else {
+    const botK = Math.floor(Math.log10(Math.max(realLo, 1e-9)));
+    for (let k = botK; k <= topK; k++) {
+      const v = Math.pow(10, k);
+      if (v >= realLo * 0.999 && v <= realHi * 1.001) ticks.push(v);
+    }
+  }
+  return ticks.length ? ticks : [realLo, realHi];
+}
+
+function normalizeWheelDelta(e: WheelEvent): number {
+  let dy = e.deltaY;
+  if (e.deltaMode === WheelEvent.DOM_DELTA_LINE) dy *= 16;
+  else if (e.deltaMode === WheelEvent.DOM_DELTA_PAGE) dy *= window.innerHeight;
+  return dy;
+}
+
+function Svg({
+  height,
+  vbW = W,
+  children,
+  control,
+  onMouseMove,
+  onMouseLeave,
+  preserveAspectRatio = "none",
+  ariaLabel,
+}: {
+  height: number;
+  vbW?: number;
+  children: ReactNode;
+  control?: ViewControl | null;
+  onMouseMove?: (e: React.MouseEvent<SVGSVGElement>) => void;
+  onMouseLeave?: (e: React.MouseEvent<SVGSVGElement>) => void;
+  preserveAspectRatio?: string;
+  /** role="img" needs an accessible name or it announces as a bare, unnamed
+   *  image — every chart consumer must pass one describing the series. */
+  ariaLabel: string;
+}) {
+  const ref = useRef<SVGSVGElement>(null);
+  const controlRef = useRef(control);
+  const wheelAccumRef = useRef<{ clientX: number; deltaY: number } | null>(null);
+  const wheelRafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    controlRef.current = control;
+  }, [control]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const flushWheel = () => {
+      wheelRafRef.current = null;
+      const c = controlRef.current;
+      const accum = wheelAccumRef.current;
+      wheelAccumRef.current = null;
+      if (!c || !accum) return;
+      c.onWheel(accum.clientX, accum.deltaY, el);
+    };
+
+    const handler = (e: WheelEvent) => {
+      if (!controlRef.current) return;
+      e.preventDefault();
+
+      const dy = normalizeWheelDelta(e);
+      if (Math.abs(e.deltaX) > Math.abs(dy) * 1.25) return;
+
+      if (wheelAccumRef.current) {
+        wheelAccumRef.current.deltaY += dy;
+        wheelAccumRef.current.clientX = e.clientX;
+      } else {
+        wheelAccumRef.current = { clientX: e.clientX, deltaY: dy };
+      }
+      if (wheelRafRef.current === null) {
+        wheelRafRef.current = requestAnimationFrame(flushWheel);
+      }
+    };
+
+    el.addEventListener("wheel", handler, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", handler);
+      if (wheelRafRef.current !== null) cancelAnimationFrame(wheelRafRef.current);
+    };
+  }, []);
+
+  return (
+    <svg
+      ref={ref}
+      viewBox={`0 0 ${vbW} ${height}`}
+      preserveAspectRatio={preserveAspectRatio}
+      className={"ts-svg" + (control ? " is-interactive" : "")}
+      role="img"
+      aria-label={ariaLabel}
+      onPointerDown={control ? control.onPointerDown : undefined}
+      onDoubleClick={control ? control.onDoubleClick : undefined}
+      onMouseMove={onMouseMove}
+      onMouseLeave={onMouseLeave}
+    >
+      {children}
+    </svg>
+  );
+}
+
+function Empty({ height, msg, vbW = W }: { height: number; msg: string; vbW?: number }) {
+  return (
+    <Svg height={height} vbW={vbW} ariaLabel={msg}>
+      <text x={vbW / 2} y={height / 2} textAnchor="middle" className="ts-svg-empty">
+        {msg}
+      </text>
+    </Svg>
+  );
+}
+
+export interface TimeSeriesProps {
+  points: TearsheetSeriesPoint[];
+  height?: number;
+  scale?: ChartScale;
+  tone?: ChartTone;
+  fmt?: (v: number) => string;
+  zeroBaseline?: boolean;
+  /** Shared normalized x-window (date span fraction). Omit ⇒ full range, static. */
+  view?: ViewWindow;
+  /** Notified on wheel-zoom / drag-pan / double-click reset. */
+  onView?: (v: ViewWindow) => void;
+  /** Full date span [firstISO, lastISO] for the *whole* series; defaults to the
+   *  series' own endpoints. Pass the shared span so every chart maps the same
+   *  fraction to the same calendar window even if point counts differ. */
+  fullSpan?: [string, string];
+  /** Double-click / internal reset target (defaults to full range). */
+  resetView?: ViewWindow;
+  /** When false, omit hover tooltips (static print-first panes). */
+  interactive?: boolean;
+  /**
+   * Reference overlays: horizontal levels, shaded bands, date-anchored dots.
+   * Rendered beneath the series paths; out-of-domain values clamp to the plot.
+   */
+  references?: ChartReferences;
+  /** Explicit y-domain [lo, hi] (data units). Omit ⇒ derived from the data. */
+  domain?: [number, number];
+  /** Accessible name for the chart (role="img" has none without it) — should
+   *  summarize the series, e.g. "Equity curve, percent return, linear scale,
+   *  Jan 2023 to Feb 2025". */
+  ariaLabel: string;
+}
+
+/** Nearest plotted date index for a reference marker's ISO date. */
+function nearestDateIndex(dates: string[], t: string): number {
+  const target = Date.parse(t);
+  if (!Number.isFinite(target) || dates.length === 0) return -1;
+  let best = 0;
+  let bestDist = Infinity;
+  for (let i = 0; i < dates.length; i++) {
+    const d = Date.parse(dates[i]);
+    if (!Number.isFinite(d)) continue;
+    const dist = Math.abs(d - target);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = i;
+    }
+  }
+  return bestDist === Infinity ? -1 : best;
+}
+
+/**
+ * Reference bands (behind), lines and date-anchored dots for the two series
+ * panes. Render the result before the series paths so bands sit beneath them.
+ */
+function referenceEls(args: {
+  dates: string[];
+  xAt: (i: number) => number;
+  yAt: (v: number) => number;
+  plotLeft: number;
+  plotWidth: number;
+  plotTop: number;
+  plotBottom: number;
+  references: ChartReferences | undefined;
+}): ReactNode[] {
+  const { references } = args;
+  if (!references) return [];
+  const els: ReactNode[] = [];
+  const clampY = (y: number) => Math.max(args.plotTop, Math.min(args.plotBottom, y));
+  (references.bands ?? []).forEach((b, i) => {
+    const y1 = clampY(args.yAt(b.from));
+    const y2 = clampY(args.yAt(b.to));
+    els.push(
+      <rect
+        key={`ref-band-${i}`}
+        x={args.plotLeft}
+        y={Math.min(y1, y2)}
+        width={args.plotWidth}
+        height={Math.max(1, Math.abs(y2 - y1))}
+        className={`ts-ref-band ts-ref-band-${b.tone ?? "accent"}`}
+        data-chart-layer="reference-band"
+      />,
+    );
+  });
+  (references.lines ?? []).forEach((l, i) => {
+    const y = clampY(args.yAt(l.value));
+    els.push(
+      <line
+        key={`ref-line-${i}`}
+        x1={args.plotLeft}
+        y1={y}
+        x2={args.plotLeft + args.plotWidth}
+        y2={y}
+        className={`ts-ref-line ts-ref-tone-${l.tone ?? "mute"}${l.dashed === false ? "" : " ts-ref-dashed"}`}
+        data-chart-layer="reference-line"
+      >
+        {l.label ? <title>{l.label}</title> : null}
+      </line>,
+    );
+  });
+  (references.markers ?? []).forEach((m, i) => {
+    const idx = nearestDateIndex(args.dates, m.t);
+    if (idx < 0) return;
+    els.push(
+      <circle
+        key={`ref-marker-${i}`}
+        cx={args.xAt(idx)}
+        cy={clampY(args.yAt(m.v))}
+        r={3.5}
+        className={`ts-ref-dot ts-ref-dot-${m.tone ?? "accent"}`}
+        data-chart-layer="reference-marker"
+      >
+        {m.label ? <title>{m.label}</title> : null}
+      </circle>,
+    );
+  });
+  return els;
+}
+
+/**
+ * Slice points to a normalized fraction window over a shared date span. The
+ * fraction is mapped to a calendar window [t(lo), t(hi)] (linear in time across
+ * the span), then points whose date falls inside are kept — so two series that
+ * share a span stay locked to the same calendar window regardless of sampling.
+ */
+export function sliceByView(
+  points: TearsheetSeriesPoint[],
+  view: ViewWindow | undefined,
+  fullSpan: [string, string] | undefined,
+): TearsheetSeriesPoint[] {
+  if (!view || (view.lo <= 0 && view.hi >= 1) || points.length === 0) return points;
+  const t0 = new Date((fullSpan ? fullSpan[0] : points[0].t)).getTime();
+  const t1 = new Date((fullSpan ? fullSpan[1] : points[points.length - 1].t)).getTime();
+  const span = t1 - t0;
+  if (span <= 0) return points;
+  const loT = t0 + view.lo * span;
+  const hiT = t0 + view.hi * span;
+  const out = points.filter((p) => {
+    const t = new Date(p.t).getTime();
+    return t >= loT && t <= hiT;
+  });
+  // Guarantee at least a couple of points so the path/area still draws.
+  if (out.length >= 2) return out;
+  const mid = (loT + hiT) / 2;
+  let nearest = 0;
+  for (let i = 1; i < points.length; i++) {
+    if (Math.abs(new Date(points[i].t).getTime() - mid) < Math.abs(new Date(points[nearest].t).getTime() - mid)) nearest = i;
+  }
+  return points.slice(Math.max(0, nearest - 1), Math.min(points.length, nearest + 1));
+}
+
+/** Slice OHLC bars to the same calendar window as ``sliceByView``. */
+function sliceBarsByView(
+  bars: TearsheetOhlcBar[],
+  view: ViewWindow | undefined,
+  fullSpan: [string, string] | undefined,
+): TearsheetOhlcBar[] {
+  if (!view || (view.lo <= 0 && view.hi >= 1) || bars.length === 0) return bars;
+  const t0 = new Date((fullSpan ? fullSpan[0] : bars[0].t)).getTime();
+  const t1 = new Date((fullSpan ? fullSpan[1] : bars[bars.length - 1].t)).getTime();
+  const span = t1 - t0;
+  if (span <= 0) return bars;
+  const loT = t0 + view.lo * span;
+  const hiT = t0 + view.hi * span;
+  const out = bars.filter((b) => {
+    const t = new Date(b.t).getTime();
+    return t >= loT && t <= hiT;
+  });
+  if (out.length >= 2) return out;
+  const mid = (loT + hiT) / 2;
+  let nearest = 0;
+  for (let i = 1; i < bars.length; i++) {
+    if (Math.abs(new Date(bars[i].t).getTime() - mid) < Math.abs(new Date(bars[nearest].t).getTime() - mid)) {
+      nearest = i;
+    }
+  }
+  return bars.slice(Math.max(0, nearest - 1), Math.min(bars.length, nearest + 1));
+}
+
+function barIndexForDate(bars: TearsheetOhlcBar[], iso: string): number {
+  if (!iso) return -1;
+  const exact = bars.findIndex((b) => b.t === iso);
+  if (exact >= 0) return exact;
+  const target = new Date(iso).getTime();
+  if (Number.isNaN(target)) return -1;
+  let best = 0;
+  let bestD = Infinity;
+  for (let i = 0; i < bars.length; i++) {
+    const d = Math.abs(new Date(bars[i].t).getTime() - target);
+    if (d < bestD) {
+      bestD = d;
+      best = i;
+    }
+  }
+  return best;
+}
+
+export interface CandlestickChartProps {
+  bars: TearsheetOhlcBar[];
+  trades: TearsheetTrade[];
+  height?: number;
+  scale?: ChartScale;
+  view?: ViewWindow;
+  onView?: (v: ViewWindow) => void;
+  fullSpan?: [string, string];
+  resetView?: ViewWindow;
+  /** When false, omit hover tooltips (e.g. homepage preview cards). */
+  interactive?: boolean;
+  /** Tighter plot padding for compact preview cards. */
+  compact?: boolean;
+  /** Accessible name for the chart (role="img" has none without it) — should
+   *  summarize the series, e.g. "BTC-USD candlestick price, linear scale,
+   *  with trade entry/exit markers, Jan 2023 to Feb 2025". */
+  ariaLabel: string;
+}
+
+/**
+ * Candlestick price chart with TradingView-style entry/exit markers.
+ * Long entry = buy arrow below; short entry = sell arrow above; exits flip.
+ */
+export function CandlestickChart(props: CandlestickChartProps) {
+  const { bars: allBars, height = 380 } = props;
+  if (!allBars || allBars.length === 0) return <Empty height={height} msg="no price data" />;
+  return <CandlestickChartBody {...props} bars={allBars} height={height} />;
+}
+
+function CandlestickChartBody({
+  bars: allBars,
+  trades,
+  height,
+  scale: scaleKind = "linear",
+  view,
+  onView,
+  fullSpan,
+  resetView,
+  interactive = true,
+  compact = false,
+  ariaLabel,
+}: CandlestickChartProps & { bars: TearsheetOhlcBar[]; height: number }) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [hover, setHover] = useState<ChartHoverTip | null>(null);
+  const { vbW, pad } = useChartLayout(wrapRef, height, compact);
+  const bars = sliceBarsByView(allBars, view, fullSpan);
+  const control = viewHandlers(view, onView, pad, vbW, resetView);
+  const scale = makeScale(scaleKind);
+  const plotW = vbW - pad.left - pad.right;
+  const plotH = height - pad.top - pad.bottom;
+  const plotTop = pad.top;
+  const plotBottom = pad.top + plotH;
+
+  const t0 = new Date((fullSpan ? fullSpan[0] : bars[0].t)).getTime();
+  const t1 = new Date((fullSpan ? fullSpan[1] : bars[bars.length - 1].t)).getTime();
+  const winLo = view && !(view.lo <= 0 && view.hi >= 1) && t1 > t0 ? t0 + view.lo * (t1 - t0) : t0;
+  const winHi = view && !(view.lo <= 0 && view.hi >= 1) && t1 > t0 ? t0 + view.hi * (t1 - t0) : t1;
+
+  const inWin = (iso: string) => {
+    if (!iso) return false;
+    const t = new Date(iso).getTime();
+    return t >= winLo && t <= winHi;
+  };
+
+  const priceVals: number[] = [];
+  for (const b of bars) {
+    priceVals.push(b.l, b.h);
+  }
+  for (const t of trades) {
+    if (!inWin(t.entry_date) && !( !isOpenTrade(t) && inWin(t.exit_date))) continue;
+    if (t.entry_price > 0) priceVals.push(t.entry_price);
+    if (!isOpenTrade(t) && t.exit_price > 0) priceVals.push(t.exit_price);
+  }
+
+  const { lo: loF, hi: hiF } = dataDomain(priceVals, scale, { padRatio: 0.04 });
+
+  const n = bars.length;
+
+  const slotEst = n > 1 ? plotW / (n - 1) : plotW;
+  const bodyEst = Math.max(1.2, Math.min(slotEst * 0.65, 10));
+  // Inset candles from the right edge so the latest bar (and markers) are not clipped.
+  const rightGutter = compact
+    ? Math.max(bodyEst * 0.45, plotW * 0.015)
+    : Math.max(bodyEst * 0.85, plotW * 0.06);
+  const leftGutter = compact ? bodyEst * 0.2 : bodyEst * 0.45;
+  const xSpan = Math.max(plotW * 0.2, plotW - leftGutter - rightGutter);
+  const xAt = (i: number) =>
+    pad.left + leftGutter + (n === 1 ? xSpan / 2 : (i / (n - 1)) * xSpan);
+  const yAt = (val: number) => plotBottom - ((scale.f(val) - loF) / (hiF - loF)) * plotH;
+
+  const realLo = scale.inv(loF);
+  const realHi = scale.inv(hiF);
+  const ticks =
+    scaleKind === "log"
+      ? logTicks(realLo, realHi, 6)
+      : niceLinearTicks(realLo, realHi, 5);
+
+  const gridEls: ReactNode[] = [];
+  ticks.forEach((tv, i) => {
+    const y = yAt(tv);
+    if (y < plotTop - 1 || y > plotBottom + 1) return;
+    gridEls.push(
+      <line key={`g${i}`} x1={pad.left} y1={y} x2={vbW - pad.right} y2={y} className="ts-grid" />,
+      <text key={`gt${i}`} x={pad.left - 6} y={axisLabelY(y, plotTop, plotBottom)} textAnchor="end" className="ts-axis">
+        {fmtCompact(tv)}
+      </text>,
+    );
+  });
+
+  const slot = n > 1 ? xSpan / (n - 1) : xSpan;
+  const bodyW = Math.max(1.2, Math.min(slot * 0.65, 10));
+
+  const candleEls: ReactNode[] = bars.map((b, i) => {
+    const x = xAt(i);
+    const bull = b.c >= b.o;
+    const yO = yAt(b.o);
+    const yC = yAt(b.c);
+    const yH = yAt(b.h);
+    const yL = yAt(b.l);
+    const top = Math.min(yO, yC);
+    const h = Math.max(1, Math.abs(yC - yO));
+    const tone = bull ? "up" : "down";
+    return (
+      <g key={`c${i}`} className={"ts-candle ts-candle-" + tone}>
+        <line x1={x} y1={yH} x2={x} y2={yL} className="ts-candle-wick" />
+        <rect x={x - bodyW / 2} y={top} width={bodyW} height={h} className="ts-candle-body" rx={0.4} />
+      </g>
+    );
+  });
+
+  const markerEls: ReactNode[] = [];
+  const markerHits: MarkerHit[] = [];
+
+  const addMarker = (
+    x: number,
+    y: number,
+    kind: "buy" | "sell",
+    role: "entry" | "exit",
+    key: string,
+    trade: TearsheetTrade,
+  ) => {
+    const scaleM = Math.max(1, Math.min(2.5, slot / 5.5));
+    const hw = 7.5 * scaleM;
+    const th = 12 * scaleM;
+    const gap = Math.max(11, 9 + th * 0.3);
+    const d =
+      kind === "buy"
+        ? `M${x} ${y + gap} L${x - hw} ${y + gap + th} L${x + hw} ${y + gap + th} Z`
+        : `M${x} ${y - gap} L${x - hw} ${y - gap - th} L${x + hw} ${y - gap - th} Z`;
+    const hitY = kind === "buy" ? y + gap + th * 0.55 : y - gap - th * 0.55;
+    markerHits.push({ x, y: hitY, role, trade });
+    markerEls.push(
+      <g key={key} className={"ts-marker-wrap ts-marker-wrap-" + kind} aria-hidden="true">
+        <path d={d} className="ts-marker-halo" />
+        <path d={d} className={"ts-marker ts-marker-" + kind} />
+      </g>,
+    );
+  };
+
+  for (const t of trades) {
+    if (inWin(t.entry_date)) {
+      const i = barIndexForDate(bars, t.entry_date);
+      if (i >= 0) {
+        const x = xAt(i);
+        const y = yAt(t.entry_price);
+        addMarker(x, y, t.direction === "long" ? "buy" : "sell", "entry", `e${t.n}`, t);
+      }
+    }
+    if (!isOpenTrade(t) && inWin(t.exit_date)) {
+      const i = barIndexForDate(bars, t.exit_date);
+      if (i >= 0) {
+        const x = xAt(i);
+        const y = yAt(t.exit_price);
+        addMarker(x, y, t.direction === "long" ? "sell" : "buy", "exit", `x${t.n}`, t);
+      }
+    }
+  }
+
+  const idxs = [0, Math.floor((n - 1) / 2), n - 1];
+
+  const onChartMouseMove = useCallback(
+    (e: React.MouseEvent<SVGSVGElement>) => {
+      if (e.buttons !== 0) {
+        setHover(null);
+        return;
+      }
+      const wrap = wrapRef.current;
+      if (!wrap) return;
+      const { x: vbX, y: vbY } = viewBoxPoint(e.clientX, e.clientY, e.currentTarget, vbW, height);
+      if (vbX < pad.left || vbX > vbW - pad.right || vbY < plotTop || vbY > plotBottom) {
+        setHover(null);
+        return;
+      }
+      const marker = hitMarker(vbX, vbY, markerHits);
+      const pos = positionHoverTip(e.clientX, e.clientY, wrap, 220, marker ? 108 : 132);
+      if (marker) {
+        setHover({ ...pos, content: <TradeTipContent trade={marker.trade} /> });
+        return;
+      }
+      const bi = nearestBarIndex(vbX, n, xAt, slot * 0.55);
+      if (bi < 0) {
+        setHover(null);
+        return;
+      }
+      setHover({ ...pos, content: <OhlcTipContent bar={bars[bi]} /> });
+    },
+    [bars, height, markerHits, n, pad.left, pad.right, plotBottom, plotTop, slot, vbW, xAt],
+  );
+
+  const onChartMouseLeave = useCallback(() => setHover(null), []);
+
+  return (
+    <ChartHoverShell hover={interactive ? hover : null} wrapRef={wrapRef}>
+      <Svg
+        height={height}
+        vbW={vbW}
+        control={control}
+        onMouseMove={interactive ? onChartMouseMove : undefined}
+        onMouseLeave={interactive ? onChartMouseLeave : undefined}
+        ariaLabel={ariaLabel}
+      >
+      <defs>
+        <clipPath id="ts-candle-clip">
+          <rect x={pad.left} y={plotTop} width={plotW} height={plotH} />
+        </clipPath>
+      </defs>
+      {gridEls}
+      <g clipPath="url(#ts-candle-clip)">{candleEls}</g>
+      <g className="ts-marker-layer">{markerEls}</g>
+      {idxs.map((i, k) => {
+        const anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+        const xAxisY = compact ? height - 6 : height - 10;
+        return (
+          <text key={`x${k}`} x={xAt(i)} y={xAxisY} textAnchor={anchor} className="ts-axis">
+            {(bars[i].t || "").slice(0, 10)}
+          </text>
+        );
+      })}
+        </Svg>
+    </ChartHoverShell>
+  );
+}
+
+/** Time-series area/line chart. */
+export function TimeSeries(props: TimeSeriesProps) {
+  const { points: allPoints, height = 320 } = props;
+  if (!allPoints || allPoints.length === 0) return <Empty height={height} msg="no data" />;
+  return <TimeSeriesBody {...props} points={allPoints} height={height} />;
+}
+
+function TimeSeriesBody({
+  points: allPoints,
+  height,
+  scale: scaleKind = "linear",
+  tone = "accent",
+  fmt = fmtCompact,
+  zeroBaseline = false,
+  view,
+  onView,
+  fullSpan,
+  resetView,
+  interactive = true,
+  references,
+  domain,
+  ariaLabel,
+}: TimeSeriesProps & { points: TearsheetSeriesPoint[]; height: number }) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [hover, setHover] = useState<ChartHoverTip | null>(null);
+  const { vbW, pad } = useChartLayout(wrapRef, height, false);
+  const points = sliceByView(allPoints, view, fullSpan);
+  const control = viewHandlers(view, onView, pad, vbW, resetView);
+  const scale = makeScale(scaleKind);
+  const plotW = vbW - pad.left - pad.right;
+  const plotH = height - pad.top - pad.bottom;
+  const plotTop = pad.top;
+  const plotBottom = pad.top + plotH;
+
+  const values = points.map((p) => p.v);
+  const auto = dataDomain(values, scale, {
+    padRatio: 0.05,
+    anchorZero: zeroBaseline ? "max" : undefined,
+  });
+  const lo = domain ? scale.f(domain[0]) : auto.lo;
+  const hi = domain ? scale.f(domain[1]) : auto.hi;
+
+  const n = points.length;
+  const xAt = (i: number) => pad.left + (n === 1 ? plotW / 2 : (i / (n - 1)) * plotW);
+  const yAt = (val: number) => pad.top + plotH - ((scale.f(val) - lo) / (hi - lo)) * plotH;
+
+  const realLo = scale.inv(lo), realHi = scale.inv(hi);
+  const ticks =
+    scaleKind === "log"
+      ? logTicks(realLo, realHi, 6)
+      : scaleKind === "symlog"
+        ? decadeTicks("symlog", realLo, realHi)
+        : niceLinearTicks(realLo, realHi, 4);
+
+  const gridEls: ReactNode[] = [];
+  ticks.forEach((tv, i) => {
+    const y = yAt(tv);
+    if (y < plotTop - 1 || y > plotBottom + 1) return;
+    gridEls.push(
+      <line key={`g${i}`} x1={pad.left} y1={y} x2={vbW - pad.right} y2={y} className={"ts-grid" + (tv === 0 ? " ts-grid-zero" : "")} />,
+      <text key={`gt${i}`} x={pad.left - 8} y={axisLabelY(y, plotTop, plotBottom)} textAnchor="end" className="ts-axis">{fmt(tv)}</text>,
+    );
+  });
+
+  let line = "";
+  for (let i = 0; i < n; i++) {
+    line += (i ? "L" : "M") + xAt(i).toFixed(1) + " " + yAt(points[i].v).toFixed(1) + " ";
+  }
+  const baseReal = zeroBaseline ? 0 : realLo;
+  const baseY = yAt(baseReal);
+  const area = line + `L${xAt(n - 1).toFixed(1)} ${baseY.toFixed(1)} L${xAt(0).toFixed(1)} ${baseY.toFixed(1)} Z`;
+
+  const idxs = [0, Math.floor((n - 1) / 2), n - 1];
+
+  const onChartMouseMove = useCallback(
+    (e: React.MouseEvent<SVGSVGElement>) => {
+      if (e.buttons !== 0) {
+        setHover(null);
+        return;
+      }
+      const wrap = wrapRef.current;
+      if (!wrap) return;
+      const { x: vbX, y: vbY } = viewBoxPoint(e.clientX, e.clientY, e.currentTarget, vbW, height);
+      if (vbX < pad.left || vbX > vbW - pad.right || vbY < plotTop || vbY > plotBottom) {
+        setHover(null);
+        return;
+      }
+      const frac = plotFraction(e.clientX, e.currentTarget, pad.left, pad.right, vbW);
+      const idx = n === 1 ? 0 : Math.round(frac * (n - 1));
+      const pt = points[idx];
+      if (!pt) {
+        setHover(null);
+        return;
+      }
+      const pos = positionHoverTip(e.clientX, e.clientY, wrap, 180, 72);
+      setHover({
+        ...pos,
+        content: <SeriesTipContent date={pt.t} value={fmt(pt.v)} />,
+      });
+    },
+    [fmt, height, n, pad.left, pad.right, plotBottom, plotTop, points, vbW],
+  );
+
+  const onChartMouseLeave = useCallback(() => setHover(null), []);
+
+  return (
+    <ChartHoverShell hover={interactive ? hover : null} wrapRef={wrapRef}>
+      <Svg
+        height={height}
+        vbW={vbW}
+        control={control}
+        onMouseMove={interactive ? onChartMouseMove : undefined}
+        onMouseLeave={interactive ? onChartMouseLeave : undefined}
+        ariaLabel={ariaLabel}
+      >
+      <defs>
+        <clipPath id="ts-series-clip">
+          <rect x={pad.left} y={plotTop} width={plotW} height={plotH} />
+        </clipPath>
+      </defs>
+      {gridEls}
+      <g clipPath="url(#ts-series-clip)">
+        {referenceEls({
+          dates: points.map((p) => p.t),
+          xAt,
+          yAt,
+          plotLeft: pad.left,
+          plotWidth: plotW,
+          plotTop,
+          plotBottom,
+          references,
+        })}
+        <path d={area} className={"ts-area ts-tone-" + tone} />
+        <path d={line} className={"ts-line ts-tone-" + tone} fill="none" />
+      </g>
+      {idxs.map((i, k) => {
+        const anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+        return (
+          <text key={`x${k}`} x={xAt(i)} y={height - 10} textAnchor={anchor} className="ts-axis">
+            {(points[i].t || "").slice(0, 10)}
+          </text>
+        );
+      })}
+      </Svg>
+    </ChartHoverShell>
+  );
+}
+
+export interface SignedBarsProps {
+  values: number[];
+  height?: number;
+  fmt?: (v: number) => string;
+  /** Accessible name for the chart (role="img" has none without it). */
+  ariaLabel: string;
+  /**
+   * Optional per-bar x-axis labels, parallel to `values` by index. Entries
+   * beyond `values` are ignored; a missing or empty entry leaves that bar
+   * unlabeled. Labels render angled (-30°) in the bottom gutter, matching
+   * the categorical-bar convention, and join the bar's hover title.
+   */
+  labels?: string[];
+}
+
+/**
+ * Per-item signed bar chart (gains var(--up), losses var(--down)).
+ *
+ * Each bar carries a native SVG `<title>` with its exact formatted value
+ * (plus label when given) so the precise reading survives without a JS
+ * tooltip layer — and without pixels, so it stays testable in markup.
+ */
+export function SignedBars({ values, height = 220, fmt = fmtCompact, ariaLabel, labels }: SignedBarsProps) {
+  if (!values || values.length === 0) return <Empty height={height} msg="no trades" />;
+
+  const plotW = W - PAD.left - PAD.right;
+  const plotH = height - PAD.top - PAD.bottom;
+  let lo = 0, hi = 0;
+  for (const v of values) {
+    if (v < lo) lo = v;
+    if (v > hi) hi = v;
+  }
+  if (lo === hi) hi = lo + 1;
+  const padF = (hi - lo) * 0.08;
+  lo -= padF;
+  hi += padF;
+
+  const yAt = (v: number) => PAD.top + plotH - ((v - lo) / (hi - lo)) * plotH;
+  const zeroY = yAt(0);
+
+  const gridEls: ReactNode[] = [];
+  niceLinearTicks(lo, hi, 4).forEach((tv, i) => {
+    const y = yAt(tv);
+    gridEls.push(
+      <line key={`g${i}`} x1={PAD.left} y1={y} x2={W - PAD.right} y2={y} className={"ts-grid" + (tv === 0 ? " ts-grid-zero" : "")} />,
+      <text key={`gt${i}`} x={PAD.left - 10} y={y + 4} textAnchor="end" className="ts-axis">{fmt(tv)}</text>,
+    );
+  });
+
+  const n = values.length;
+  const slot = plotW / n;
+  const bw = Math.max(0.6, Math.min(slot * 0.7, 16));
+
+  return (
+    <Svg height={height} ariaLabel={ariaLabel}>
+      {gridEls}
+      {values.map((v, i) => {
+        const x = PAD.left + i * slot + (slot - bw) / 2;
+        const y = v >= 0 ? yAt(v) : zeroY;
+        const h = Math.max(0.5, Math.abs(yAt(v) - zeroY));
+        const label = labels?.[i]?.trim() ? labels[i].trim() : null;
+        return (
+          <rect key={i} x={x.toFixed(1)} y={y.toFixed(1)} width={bw.toFixed(1)} height={h.toFixed(1)} className={"ts-bar ts-tone-" + (v >= 0 ? "up" : "down")}>
+            <title>{label ? `${label}: ${fmt(v)}` : fmt(v)}</title>
+          </rect>
+        );
+      })}
+      {(labels ?? []).map((raw, i) => {
+        const label = raw?.trim() ? raw.trim() : null;
+        if (!label || i >= n) return null;
+        const cx = PAD.left + i * slot + slot / 2;
+        // Gutter below the plot: a -30° label drops ~half its length under
+        // its anchor, so the anchor sits 28px above the viewBox bottom —
+        // anchoring at the old height-10 clipped tickers against the
+        // section edge (caught by screenshot in Q3b slice 4).
+        const ly = height - 28;
+        return (
+          <text key={`xl${i}`} x={cx.toFixed(1)} y={ly} textAnchor="end" transform={`rotate(-30 ${cx.toFixed(1)} ${ly})`} className="ts-axis">{label}</text>
+        );
+      })}
+    </Svg>
+  );
+}
+
+export interface ContributionReturnPoint {
+  t: string;
+  /** Exact cumulative portfolio return from the NAV series, in percent. */
+  returnPct: number;
+  /** Cumulative per-position contribution, in percentage points. */
+  contributions: Record<string, number>;
+}
+
+export interface ContributionReturnChartProps {
+  points: ContributionReturnPoint[];
+  /** Stable series identity colors supplied by the consuming product. */
+  colors: Record<string, string>;
+  height?: number;
+  interactive?: boolean;
+  benchmark?: { label: string; values: number[] };
+  /** Accessible name for the chart (role="img" has none without it) — should
+   *  summarize the series, e.g. "Portfolio return contribution by factor". */
+  ariaLabel: string;
+}
+
+/** Signed cumulative contribution stacks with the exact portfolio return overlaid. */
+export function ContributionReturnChart({
+  points,
+  colors,
+  height = 360,
+  interactive = true,
+  benchmark,
+  ariaLabel,
+}: ContributionReturnChartProps) {
+  if (points.length < 2) return <Empty height={height} msg="not enough history" />;
+  return (
+    <ContributionReturnChartBody
+      points={points}
+      colors={colors}
+      height={height}
+      interactive={interactive}
+      benchmark={benchmark}
+      ariaLabel={ariaLabel}
+    />
+  );
+}
+
+function ContributionReturnChartBody({
+  points,
+  colors,
+  height,
+  interactive,
+  benchmark,
+  ariaLabel,
+}: ContributionReturnChartProps & { height: number; interactive: boolean }) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [hover, setHover] = useState<ChartHoverTip | null>(null);
+  const { vbW, pad } = useChartLayout(wrapRef, height, false);
+  const plotW = vbW - pad.left - pad.right;
+  const plotH = height - pad.top - pad.bottom;
+  const plotBottom = pad.top + plotH;
+  const keys = [...new Set(points.flatMap((point) => Object.keys(point.contributions)))];
+  const extents = points.map((point) => {
+    let positive = 0;
+    let negative = 0;
+    for (const value of Object.values(point.contributions)) {
+      if (value >= 0) positive += value;
+      else negative += value;
+    }
+    return { positive, negative };
+  });
+  const values = [
+    ...points.map((point) => point.returnPct),
+    ...(benchmark?.values ?? []),
+    ...extents.flatMap((extent) => [extent.positive, extent.negative]),
+    0,
+  ];
+  let lo = Math.min(...values);
+  let hi = Math.max(...values);
+  if (lo === hi) hi = lo + 1;
+  const domainPad = (hi - lo) * 0.08;
+  lo -= domainPad;
+  hi += domainPad;
+  const yAt = (value: number) => pad.top + plotH - ((value - lo) / (hi - lo)) * plotH;
+  const zeroY = yAt(0);
+  const slot = plotW / points.length;
+  const barWidth = Math.max(1, Math.min(slot * 0.72, 24));
+  const xCenter = (index: number) => pad.left + slot * index + slot / 2;
+  const line = points
+    .map((point, index) => `${index ? 'L' : 'M'}${xCenter(index).toFixed(1)} ${yAt(point.returnPct).toFixed(1)}`)
+    .join(' ');
+  const benchmarkLine =
+    benchmark && benchmark.values.length === points.length
+      ? benchmark.values
+          .map((value, index) => `${index ? 'L' : 'M'}${xCenter(index).toFixed(1)} ${yAt(value).toFixed(1)}`)
+          .join(' ')
+      : null;
+
+  const grid: ReactNode[] = [];
+  niceLinearTicks(lo, hi, 4).forEach((tick, index) => {
+    const y = yAt(tick);
+    grid.push(
+      <line key={`g${index}`} x1={pad.left} y1={y} x2={vbW - pad.right} y2={y} className={`ts-grid${tick === 0 ? ' ts-grid-zero' : ''}`} />,
+      <text key={`gt${index}`} x={pad.left - 8} y={axisLabelY(y, pad.top, plotBottom)} textAnchor="end" className="ts-axis ts-contribution-axis">{fmtCompact(tick)}%</text>,
+    );
+  });
+
+  const onChartMouseMove = useCallback((event: React.MouseEvent<SVGSVGElement>) => {
+    if (event.buttons !== 0) {
+      setHover(null);
+      return;
+    }
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const { x, y } = viewBoxPoint(event.clientX, event.clientY, event.currentTarget, vbW, height);
+    if (x < pad.left || x > vbW - pad.right || y < pad.top || y > plotBottom) {
+      setHover(null);
+      return;
+    }
+    const index = Math.max(0, Math.min(points.length - 1, Math.floor((x - pad.left) / slot)));
+    setHover({
+      ...positionHoverTip(event.clientX, event.clientY, wrap, 220, 128),
+      content: (
+        <ContributionReturnTipContent
+          point={points[index]}
+          colors={colors}
+          benchmark={benchmarkLine && benchmark ? { label: benchmark.label, value: benchmark.values[index] } : undefined}
+        />
+      ),
+    });
+  }, [benchmark, benchmarkLine, colors, height, pad.left, pad.right, pad.top, plotBottom, points, slot, vbW]);
+
+  return (
+    <ChartHoverShell hover={interactive ? hover : null} wrapRef={wrapRef}>
+      <Svg
+        height={height}
+        vbW={vbW}
+        onMouseMove={interactive ? onChartMouseMove : undefined}
+        onMouseLeave={interactive ? () => setHover(null) : undefined}
+        ariaLabel={ariaLabel}
+      >
+        <defs>
+          <clipPath id="ts-contribution-return-clip">
+            <rect x={pad.left} y={pad.top} width={plotW} height={plotH} />
+          </clipPath>
+        </defs>
+        {grid}
+        <g clipPath="url(#ts-contribution-return-clip)" data-chart-layer="contributions">
+          {points.flatMap((point, index) => {
+            let positive = 0;
+            let negative = 0;
+            return keys.flatMap((key) => {
+              const value = point.contributions[key] ?? 0;
+              if (value === 0) return [];
+              const start = value >= 0 ? positive : negative;
+              const end = start + value;
+              if (value >= 0) positive = end;
+              else negative = end;
+              const top = Math.min(yAt(start), yAt(end));
+              return (
+                <rect
+                  key={`${point.t}:${key}`}
+                  x={(xCenter(index) - barWidth / 2).toFixed(1)}
+                  y={top.toFixed(1)}
+                  width={barWidth.toFixed(1)}
+                  height={Math.max(0.75, Math.abs(yAt(end) - yAt(start))).toFixed(1)}
+                  fill={colors[key] ?? 'var(--ink-mute)'}
+                  className="ts-contribution-segment"
+                  data-series={key}
+                />
+              );
+            });
+          })}
+          <line x1={pad.left} y1={zeroY} x2={vbW - pad.right} y2={zeroY} className="ts-grid ts-grid-zero" />
+          <path d={line} className="ts-line ts-tone-accent ts-portfolio-return-line" fill="none" data-chart-layer="portfolio-return" />
+          {benchmarkLine && benchmark ? (
+            <path
+              d={benchmarkLine}
+              className="ts-line ts-benchmark-return-line"
+              fill="none"
+              data-chart-layer="benchmark-return"
+              data-series={benchmark.label}
+            />
+          ) : null}
+          {points.map((point, index) => (
+            <circle key={point.t} cx={xCenter(index)} cy={yAt(point.returnPct)} r="2.5" className="ts-portfolio-return-dot" />
+          ))}
+        </g>
+        {[...new Set([0, Math.floor((points.length - 1) / 2), points.length - 1])].map((index) => (
+          <text
+            key={`${points[index].t}:${index}`}
+            x={xCenter(index)}
+            y={height - 10}
+            textAnchor={index === 0 ? 'start' : index === points.length - 1 ? 'end' : 'middle'}
+            className="ts-axis ts-contribution-axis"
+          >
+            {points[index].t.slice(0, 10)}
+          </text>
+        ))}
+      </Svg>
+    </ChartHoverShell>
+  );
+}
+
+/** Per-trade realized/unrealized return % (single-axis bar chart). */
+export interface TradeReturnChartProps {
+  bars: TradeReturnBar[];
+  height?: number;
+  view?: ViewWindow;
+  onView?: (v: ViewWindow) => void;
+  fullSpan?: [string, string];
+  resetView?: ViewWindow;
+  /** When false, omit hover tooltips (static print-first panes). */
+  interactive?: boolean;
+  /** Accessible name for the chart (role="img" has none without it) — should
+   *  summarize the series, e.g. "Per-trade profit and loss, realized and
+   *  open trades, Jan 2023 to Feb 2025". */
+  ariaLabel: string;
+}
+
+function sliceTradeBarsByView(
+  bars: TradeReturnBar[],
+  view: ViewWindow | undefined,
+  fullSpan: [string, string] | undefined,
+): TradeReturnBar[] {
+  if (!view || (view.lo <= 0 && view.hi >= 1) || bars.length === 0) return bars;
+  const t0 = new Date((fullSpan ? fullSpan[0] : bars[0].t)).getTime();
+  const t1 = new Date((fullSpan ? fullSpan[1] : bars[bars.length - 1].t)).getTime();
+  const span = t1 - t0;
+  if (span <= 0) return bars;
+  const loT = t0 + view.lo * span;
+  const hiT = t0 + view.hi * span;
+  const out = bars.filter((b) => {
+    const t = new Date(b.t).getTime();
+    return t >= loT && t <= hiT;
+  });
+  if (out.length > 0) return out;
+  const mid = (loT + hiT) / 2;
+  let nearest = 0;
+  for (let i = 1; i < bars.length; i++) {
+    if (Math.abs(new Date(bars[i].t).getTime() - mid) < Math.abs(new Date(bars[nearest].t).getTime() - mid)) {
+      nearest = i;
+    }
+  }
+  return bars.slice(Math.max(0, nearest - 1), Math.min(bars.length, nearest + 1));
+}
+
+/**
+ * Per-trade return % bars in trade order. Open leg is appended last and styled
+ * as unrealized. Shares zoom/pan with the other time-series charts.
+ */
+export function TradeReturnChart(props: TradeReturnChartProps) {
+  const { bars: allBars, height = 300 } = props;
+  if (!allBars || allBars.length === 0) return <Empty height={height} msg="no trades" />;
+  const bars = sliceTradeBarsByView(allBars, props.view, props.fullSpan);
+  if (bars.length === 0) return <Empty height={height} msg="no trades in window" />;
+  return <TradeReturnChartBody {...props} bars={bars} height={height} />;
+}
+
+function TradeReturnChartBody({
+  bars,
+  height,
+  view,
+  onView,
+  resetView,
+  interactive = true,
+  ariaLabel,
+}: TradeReturnChartProps & { bars: TradeReturnBar[]; height: number }) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [hover, setHover] = useState<ChartHoverTip | null>(null);
+  const { vbW, pad } = useChartLayout(wrapRef, height, false);
+  const control = viewHandlers(view, onView, pad, vbW, resetView);
+
+  const plotW = vbW - pad.left - pad.right;
+  const plotH = height - pad.top - pad.bottom;
+  const plotTop = pad.top;
+  const plotBottom = pad.top + plotH;
+  const n = bars.length;
+  const slot = plotW / n;
+  const bw = Math.max(0.6, Math.min(slot * 0.7, 16));
+  const xCenter = (i: number) => pad.left + (i + 0.5) * slot;
+
+  let lo = 0;
+  let hi = 0;
+  for (const b of bars) {
+    if (b.pct < lo) lo = b.pct;
+    if (b.pct > hi) hi = b.pct;
+  }
+  if (lo === hi) hi = lo + (lo >= 0 ? 1 : -1);
+  const padF = (hi - lo) * 0.08;
+  lo -= padF;
+  hi += padF;
+
+  const yAt = (v: number) => pad.top + plotH - ((v - lo) / (hi - lo)) * plotH;
+  const zeroY = yAt(0);
+  const fmtPctAxis = (v: number) => fmtCompact(v) + "%";
+
+  const gridEls: ReactNode[] = [];
+  niceLinearTicks(lo, hi, 4).forEach((tv, i) => {
+    const y = yAt(tv);
+    if (y < plotTop - 1 || y > plotBottom + 1) return;
+    gridEls.push(
+      <line key={`g${i}`} x1={pad.left} y1={y} x2={vbW - pad.right} y2={y} className={"ts-grid" + (tv === 0 ? " ts-grid-zero" : "")} />,
+      <text key={`gt${i}`} x={pad.left - 8} y={axisLabelY(y, plotTop, plotBottom)} textAnchor="end" className="ts-axis">
+        {fmtPctAxis(tv)}
+      </text>,
+    );
+  });
+
+  const idxs = [0, Math.floor((n - 1) / 2), n - 1];
+
+  const onChartMouseMove = useCallback(
+    (e: React.MouseEvent<SVGSVGElement>) => {
+      if (e.buttons !== 0) {
+        setHover(null);
+        return;
+      }
+      const wrap = wrapRef.current;
+      if (!wrap) return;
+      const { x: vbX, y: vbY } = viewBoxPoint(e.clientX, e.clientY, e.currentTarget, vbW, height);
+      if (vbX < pad.left || vbX > vbW - pad.right || vbY < plotTop || vbY > plotBottom) {
+        setHover(null);
+        return;
+      }
+      const relX = vbX - pad.left;
+      const idx = Math.min(n - 1, Math.max(0, Math.floor(relX / slot)));
+      const bar = bars[idx];
+      if (!bar?.trade) {
+        setHover(null);
+        return;
+      }
+      const pos = positionHoverTip(e.clientX, e.clientY, wrap, 220, 120);
+      setHover({
+        ...pos,
+        content: <TradeTipContent trade={bar.trade} showPnlMoney />,
+      });
+    },
+    [bars, height, n, pad.left, pad.right, plotBottom, plotTop, slot, vbW],
+  );
+
+  const onChartMouseLeave = useCallback(() => setHover(null), []);
+
+  return (
+    <ChartHoverShell hover={interactive ? hover : null} wrapRef={wrapRef}>
+      <Svg
+        height={height}
+        vbW={vbW}
+        control={control}
+        onMouseMove={interactive ? onChartMouseMove : undefined}
+        onMouseLeave={interactive ? onChartMouseLeave : undefined}
+        ariaLabel={ariaLabel}
+      >
+      <defs>
+        <clipPath id="ts-pnl-clip">
+          <rect x={pad.left} y={plotTop} width={plotW} height={plotH} />
+        </clipPath>
+      </defs>
+      {gridEls}
+      <g clipPath="url(#ts-pnl-clip)">
+        {bars.map((b, i) => {
+          const x = pad.left + i * slot + (slot - bw) / 2;
+          const y = b.pct >= 0 ? yAt(b.pct) : zeroY;
+          const h = Math.max(0.5, Math.abs(yAt(b.pct) - zeroY));
+          const tone = b.pct >= 0 ? "up" : "down";
+          return (
+            <rect
+              key={`${b.t}-${i}`}
+              x={x.toFixed(1)}
+              y={y.toFixed(1)}
+              width={bw.toFixed(1)}
+              height={h.toFixed(1)}
+              className={"ts-bar ts-tone-" + tone + (b.open ? " ts-bar-open" : "")}
+            />
+          );
+        })}
+      </g>
+      {idxs.map((i, k) => {
+        const anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+        const label = bars[i].open ? "open" : (bars[i].t || "").slice(0, 10);
+        return (
+          <text key={`x${k}`} x={xCenter(i)} y={height - 10} textAnchor={anchor} className="ts-axis">
+            {label}
+          </text>
+        );
+      })}
+      </Svg>
+    </ChartHoverShell>
+  );
+}
+
+export interface OverlaySeries {
+  id: string;
+  label: string;
+  points: TearsheetSeriesPoint[];
+  tone?: OverlayTone;
+  /**
+   * Explicit stroke color (CSS color string) — for categorical series whose
+   * identity must stay stable across themes (e.g. per-currency hues from an
+   * allowlisted palette). Wins over `tone`. No literals at call sites: pass
+   * values, not hex.
+   */
+  color?: string;
+  dashed?: boolean;
+  /**
+   * Round-dot stroke for the benchmark leg (the owner's landing-band grammar:
+   * portfolio is the solid filled curve, the benchmark is mute dots). Wins
+   * over `dashed` when both are set; call sites set exactly one.
+   */
+  dotted?: boolean;
+  /** Area fill under the line (default false — overlays stay as strokes). */
+  fill?: boolean;
+}
+
+export interface MultiTimeSeriesProps {
+  series: OverlaySeries[];
+  height?: number;
+  scale?: ChartScale;
+  fmt?: (v: number) => string;
+  zeroBaseline?: boolean;
+  view?: ViewWindow;
+  onView?: (v: ViewWindow) => void;
+  fullSpan?: [string, string];
+  resetView?: ViewWindow;
+  interactive?: boolean;
+  /**
+   * Reference overlays: horizontal levels, shaded bands, date-anchored dots.
+   * Rendered beneath the series paths; out-of-domain values clamp to the plot.
+   */
+  references?: ChartReferences;
+  /** Explicit y-domain [lo, hi] (data units). Omit ⇒ derived from the data. */
+  domain?: [number, number];
+  ariaLabel: string;
+}
+
+function unionDates(series: OverlaySeries[]): string[] {
+  const set = new Set<string>();
+  for (const s of series) {
+    for (const p of s.points) set.add(p.t);
+  }
+  return [...set].sort();
+}
+
+function pathForOverlay(
+  dates: string[],
+  values: Map<string, number>,
+  xAt: (i: number) => number,
+  yAt: (v: number) => number,
+): string {
+  let d = "";
+  let drawing = false;
+  for (let i = 0; i < dates.length; i++) {
+    const v = values.get(dates[i]);
+    if (v === undefined || !Number.isFinite(v)) {
+      drawing = false;
+      continue;
+    }
+    d += `${drawing ? "L" : "M"}${xAt(i).toFixed(1)} ${yAt(v).toFixed(1)} `;
+    drawing = true;
+  }
+  return d;
+}
+
+function OverlayTipContent({
+  date,
+  rows,
+}: {
+  date: string;
+  rows: { label: string; value: string }[];
+}) {
+  return (
+    <dl className="ts-chart-tip-dl">
+      <div>
+        <dt>Date</dt>
+        <dd>{date.slice(0, 10)}</dd>
+      </div>
+      {rows.map((r) => (
+        <div key={r.label}>
+          <dt>{r.label}</dt>
+          <dd>{r.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/** Overlay several time series on one SVG pane (valuation rails, three-way equity). */
+export function MultiTimeSeries(props: MultiTimeSeriesProps) {
+  const { series, height = 320 } = props;
+  const any = series.some((s) => s.points.length > 0);
+  if (!any) return <Empty height={height} msg="no data" />;
+  return <MultiTimeSeriesBody {...props} height={height} />;
+}
+
+function MultiTimeSeriesBody({
+  series,
+  height,
+  scale: scaleKind = "linear",
+  fmt = fmtCompact,
+  zeroBaseline = false,
+  view,
+  onView,
+  fullSpan,
+  resetView,
+  interactive = true,
+  references,
+  domain,
+  ariaLabel,
+}: MultiTimeSeriesProps & { height: number }) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [hover, setHover] = useState<ChartHoverTip | null>(null);
+  const { vbW, pad } = useChartLayout(wrapRef, height, false);
+  const clipId = `ts-overlay-clip-${useId().replace(/:/g, "")}`;
+  const sliced = series.map((s) => ({
+    ...s,
+    points: sliceByView(s.points, view, fullSpan),
+  }));
+  const control = viewHandlers(view, onView, pad, vbW, resetView);
+  const scale = makeScale(scaleKind);
+  const plotW = vbW - pad.left - pad.right;
+  const plotH = height - pad.top - pad.bottom;
+  const plotTop = pad.top;
+  const plotBottom = pad.top + plotH;
+
+  const dates = unionDates(sliced);
+  const maps = sliced.map((s) => new Map(s.points.map((p) => [p.t, p.v])));
+  const values: number[] = [];
+  for (const m of maps) {
+    for (const v of m.values()) values.push(v);
+  }
+  const { lo, hi } = (() => {
+    const auto = dataDomain(values, scale, {
+      padRatio: 0.05,
+      anchorZero: zeroBaseline ? "max" : undefined,
+    });
+    if (!domain) return auto;
+    return { lo: scale.f(domain[0]), hi: scale.f(domain[1]) };
+  })();
+  const n = dates.length;
+  const xAt = (i: number) => pad.left + (n <= 1 ? plotW / 2 : (i / (n - 1)) * plotW);
+  const yAt = (val: number) => pad.top + plotH - ((scale.f(val) - lo) / (hi - lo)) * plotH;
+
+  const realLo = scale.inv(lo);
+  const realHi = scale.inv(hi);
+  const ticks =
+    scaleKind === "log"
+      ? logTicks(realLo, realHi, 6)
+      : scaleKind === "symlog"
+        ? decadeTicks("symlog", realLo, realHi)
+        : niceLinearTicks(realLo, realHi, 4);
+
+  const gridEls: ReactNode[] = [];
+  ticks.forEach((tv, i) => {
+    const y = yAt(tv);
+    if (y < plotTop - 1 || y > plotBottom + 1) return;
+    gridEls.push(
+      <line key={`g${i}`} x1={pad.left} y1={y} x2={vbW - pad.right} y2={y} className={"ts-grid" + (tv === 0 ? " ts-grid-zero" : "")} />,
+      <text key={`gt${i}`} x={pad.left - 8} y={axisLabelY(y, plotTop, plotBottom)} textAnchor="end" className="ts-axis">{fmt(tv)}</text>,
+    );
+  });
+
+  const lineEls: ReactNode[] = [];
+  sliced.forEach((s, si) => {
+    const line = pathForOverlay(dates, maps[si], xAt, yAt);
+    if (!line) return;
+    const tone = s.tone ?? "accent";
+    const dash = s.dotted ? " ts-line-dotted" : s.dashed ? " ts-line-dashed" : "";
+    if (s.fill) {
+      const baseReal = zeroBaseline ? 0 : realLo;
+      const baseY = yAt(baseReal);
+      const first = dates.findIndex((t) => maps[si].has(t));
+      const last = (() => {
+        for (let i = dates.length - 1; i >= 0; i--) if (maps[si].has(dates[i])) return i;
+        return first;
+      })();
+      if (first >= 0 && last >= 0) {
+        const area = `${line}L${xAt(last).toFixed(1)} ${baseY.toFixed(1)} L${xAt(first).toFixed(1)} ${baseY.toFixed(1)} Z`;
+        lineEls.push(
+          <path key={`${s.id}-fill`} d={area} className={"ts-area ts-tone-" + tone} data-series={s.id} data-chart-layer="overlay-fill" />,
+        );
+      }
+    }
+    lineEls.push(
+      <path
+        key={s.id}
+        d={line}
+        fill="none"
+        className={"ts-line ts-tone-" + tone + dash}
+        style={s.color ? { stroke: s.color } : undefined}
+        data-series={s.id}
+        data-chart-layer="overlay-line"
+      />,
+    );
+  });
+
+  const idxs = n === 0 ? [] : [0, Math.floor((n - 1) / 2), n - 1];
+
+  const onChartMouseMove = useCallback(
+    (e: React.MouseEvent<SVGSVGElement>) => {
+      if (e.buttons !== 0) {
+        setHover(null);
+        return;
+      }
+      const wrap = wrapRef.current;
+      if (!wrap || n === 0) return;
+      const { x: vbX, y: vbY } = viewBoxPoint(e.clientX, e.clientY, e.currentTarget, vbW, height);
+      if (vbX < pad.left || vbX > vbW - pad.right || vbY < plotTop || vbY > plotBottom) {
+        setHover(null);
+        return;
+      }
+      const frac = plotFraction(e.clientX, e.currentTarget, pad.left, pad.right, vbW);
+      const idx = n === 1 ? 0 : Math.round(frac * (n - 1));
+      const date = dates[idx];
+      if (!date) {
+        setHover(null);
+        return;
+      }
+      const rows = sliced.flatMap((s, si) => {
+        const v = maps[si].get(date);
+        if (v === undefined) return [];
+        return [{ label: s.label, value: fmt(v) }];
+      });
+      const pos = positionHoverTip(e.clientX, e.clientY, wrap, 200, 24 + rows.length * 22);
+      setHover({ ...pos, content: <OverlayTipContent date={date} rows={rows} /> });
+    },
+    [dates, fmt, height, maps, n, pad.left, pad.right, plotBottom, plotTop, sliced, vbW],
+  );
+
+  const onChartMouseLeave = useCallback(() => setHover(null), []);
+
+  return (
+    <ChartHoverShell hover={interactive ? hover : null} wrapRef={wrapRef}>
+      <Svg
+        height={height}
+        vbW={vbW}
+        control={control}
+        onMouseMove={interactive ? onChartMouseMove : undefined}
+        onMouseLeave={interactive ? onChartMouseLeave : undefined}
+        ariaLabel={ariaLabel}
+      >
+        <defs>
+          <clipPath id={clipId}>
+            <rect x={pad.left} y={plotTop} width={plotW} height={plotH} />
+          </clipPath>
+        </defs>
+        {gridEls}
+        <g clipPath={`url(#${clipId})`}>
+          {referenceEls({
+            dates,
+            xAt,
+            yAt,
+            plotLeft: pad.left,
+            plotWidth: plotW,
+            plotTop,
+            plotBottom,
+            references,
+          })}
+          {lineEls}
+        </g>
+        {idxs.map((i, k) => {
+          const anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+          return (
+            <text key={`x${k}`} x={xAt(i)} y={height - 10} textAnchor={anchor} className="ts-axis">
+              {(dates[i] || "").slice(0, 10)}
+            </text>
+          );
+        })}
+      </Svg>
+    </ChartHoverShell>
+  );
+}
+
+export interface RiskBandStripProps {
+  points: TearsheetSeriesPoint[];
+  height?: number;
+  view?: ViewWindow;
+  onView?: (v: ViewWindow) => void;
+  fullSpan?: [string, string];
+  resetView?: ViewWindow;
+  interactive?: boolean;
+  ariaLabel: string;
+  /** Horizontal accumulate / distribute knees (published curve). */
+  thresholds?: { id: string; value: number; label: string }[];
+  /** Faint log-scale price drawn behind the 0–100 index (right axis). */
+  priceOverlay?: TearsheetSeriesPoint[];
+}
+
+/** Composite-risk 0–100 strip with labelled SDCA bands (#3172). */
+export function RiskBandStrip(props: RiskBandStripProps) {
+  const { points: allPoints, height = 220 } = props;
+  if (!allPoints || allPoints.length === 0) return <Empty height={height} msg="no data" />;
+  return <RiskBandStripBody {...props} points={allPoints} height={height} />;
+}
+
+function RiskBandStripBody({
+  points: allPoints,
+  height,
+  view,
+  onView,
+  fullSpan,
+  resetView,
+  interactive = true,
+  ariaLabel,
+  thresholds = [],
+  priceOverlay = [],
+}: RiskBandStripProps & { points: TearsheetSeriesPoint[]; height: number }) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [hover, setHover] = useState<ChartHoverTip | null>(null);
+  const dual = priceOverlay.length > 0;
+  const { vbW, pad: layoutPad } = useChartLayout(wrapRef, height, false);
+  const pad = dual ? { ...layoutPad, right: Math.max(layoutPad.right, 64) } : layoutPad;
+  const clipId = `ts-risk-clip-${useId().replace(/:/g, "")}`;
+  const points = sliceByView(allPoints, view, fullSpan);
+  const pricePts = sliceByView(priceOverlay, view, fullSpan);
+  const control = viewHandlers(view, onView, pad, vbW, resetView);
+  const plotW = vbW - pad.left - pad.right;
+  const plotH = height - pad.top - pad.bottom;
+  const plotTop = pad.top;
+  const plotBottom = pad.top + plotH;
+
+  const n = points.length;
+  const xAt = (i: number) => pad.left + (n <= 1 ? plotW / 2 : (i / (n - 1)) * plotW);
+  const yAt = (val: number) => pad.top + plotH - (val / 100) * plotH;
+
+  const bandEls = RISK_BANDS.map((b) => {
+    const yHi = yAt(b.hi);
+    const yLo = yAt(b.lo);
+    return (
+      <rect
+        key={b.id}
+        x={pad.left}
+        y={yHi}
+        width={plotW}
+        height={Math.max(0, yLo - yHi)}
+        className={"ts-risk-band ts-risk-band-" + b.id}
+        data-band={b.id}
+      />
+    );
+  });
+
+  const ticks = [0, 10, 25, 50, 75, 95, 100];
+  const gridEls: ReactNode[] = ticks.map((tv) => {
+    const y = yAt(tv);
+    return (
+      <g key={`g${tv}`}>
+        <line x1={pad.left} y1={y} x2={vbW - pad.right} y2={y} className="ts-grid" />
+        <text x={pad.left - 8} y={axisLabelY(y, plotTop, plotBottom)} textAnchor="end" className="ts-axis">
+          {tv}
+        </text>
+      </g>
+    );
+  });
+
+  let line = "";
+  for (let i = 0; i < n; i++) {
+    const v = Math.max(0, Math.min(100, points[i].v));
+    line += `${i ? "L" : "M"}${xAt(i).toFixed(1)} ${yAt(v).toFixed(1)} `;
+  }
+
+  const priceMap = new Map(pricePts.map((p) => [p.t, p.v]));
+  const priceVals = points.map((p) => priceMap.get(p.t)).filter((v): v is number => v != null && v > 0);
+  const priceScale = makeScale("log");
+  const priceDom =
+    priceVals.length > 0
+      ? dataDomain(priceVals, priceScale, { padRatio: 0.04 })
+      : { lo: 0, hi: 1 };
+  const yPrice = (val: number) =>
+    pad.top + plotH - ((priceScale.f(val) - priceDom.lo) / (priceDom.hi - priceDom.lo)) * plotH;
+  let priceLine = "";
+  let drawingPrice = false;
+  for (let i = 0; i < n; i++) {
+    const v = priceMap.get(points[i].t);
+    if (v == null || !(v > 0)) {
+      drawingPrice = false;
+      continue;
+    }
+    priceLine += `${drawingPrice ? "L" : "M"}${xAt(i).toFixed(1)} ${yPrice(v).toFixed(1)} `;
+    drawingPrice = true;
+  }
+  const priceTicks =
+    priceVals.length > 0 ? logTicks(priceScale.inv(priceDom.lo), priceScale.inv(priceDom.hi), 4) : [];
+
+  const idxs = n === 0 ? [] : [0, Math.floor((n - 1) / 2), n - 1];
+
+  const onChartMouseMove = useCallback(
+    (e: React.MouseEvent<SVGSVGElement>) => {
+      if (e.buttons !== 0) {
+        setHover(null);
+        return;
+      }
+      const wrap = wrapRef.current;
+      if (!wrap || n === 0) return;
+      const { x: vbX, y: vbY } = viewBoxPoint(e.clientX, e.clientY, e.currentTarget, vbW, height);
+      if (vbX < pad.left || vbX > vbW - pad.right || vbY < plotTop || vbY > plotBottom) {
+        setHover(null);
+        return;
+      }
+      const frac = plotFraction(e.clientX, e.currentTarget, pad.left, pad.right, vbW);
+      const idx = n === 1 ? 0 : Math.round(frac * (n - 1));
+      const pt = points[idx];
+      if (!pt) {
+        setHover(null);
+        return;
+      }
+      const pos = positionHoverTip(e.clientX, e.clientY, wrap, 180, 72);
+      setHover({
+        ...pos,
+        content: <SeriesTipContent date={pt.t} value={pt.v.toFixed(1)} />,
+      });
+    },
+    [height, n, pad.left, pad.right, plotBottom, plotTop, points, vbW],
+  );
+
+  const onChartMouseLeave = useCallback(() => setHover(null), []);
+
+  return (
+    <ChartHoverShell hover={interactive ? hover : null} wrapRef={wrapRef}>
+      <Svg
+        height={height}
+        vbW={vbW}
+        control={control}
+        onMouseMove={interactive ? onChartMouseMove : undefined}
+        onMouseLeave={interactive ? onChartMouseLeave : undefined}
+        ariaLabel={ariaLabel}
+      >
+        <defs>
+          <clipPath id={clipId}>
+            <rect x={pad.left} y={plotTop} width={plotW} height={plotH} />
+          </clipPath>
+        </defs>
+        <g clipPath={`url(#${clipId})`} data-chart-layer="risk-bands">
+          {bandEls}
+        </g>
+        {gridEls}
+        {priceLine ? (
+          <g clipPath={`url(#${clipId})`} data-chart-layer="price-overlay">
+            <path d={priceLine} fill="none" className="ts-line ts-price-faint" />
+          </g>
+        ) : null}
+        {thresholds.map((th) => {
+          const y = yAt(th.value);
+          return (
+            <g key={th.id} data-chart-layer="risk-threshold" data-threshold={th.id}>
+              <line
+                x1={pad.left}
+                y1={y}
+                x2={vbW - pad.right}
+                y2={y}
+                className={"ts-risk-threshold ts-risk-threshold-" + th.id}
+              />
+              <text x={vbW - pad.right - 4} y={y - 4} textAnchor="end" className="ts-risk-threshold-label">
+                {th.label}
+              </text>
+            </g>
+          );
+        })}
+        <g clipPath={`url(#${clipId})`}>
+          <path d={line} fill="none" className="ts-line ts-tone-accent" data-chart-layer="risk-line" />
+        </g>
+        {priceTicks.map((tv, i) => (
+          <text
+            key={`pr${i}`}
+            x={vbW - pad.right + 8}
+            y={axisLabelY(yPrice(tv), plotTop, plotBottom)}
+            textAnchor="start"
+            className="ts-axis ts-axis-mute"
+          >
+            {fmtCompact(tv)}
+          </text>
+        ))}
+        {idxs.map((i, k) => {
+          const anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+          return (
+            <text key={`x${k}`} x={xAt(i)} y={height - 10} textAnchor={anchor} className="ts-axis">
+              {(points[i].t || "").slice(0, 10)}
+            </text>
+          );
+        })}
+      </Svg>
+    </ChartHoverShell>
+  );
+}
+
+export interface AllocationFillMarker {
+  t: string;
+  side: "buy" | "sell";
+  book_frac: number;
+}
+
+export interface AllocationStepChartProps {
+  allocated: TearsheetSeriesPoint[];
+  markers: AllocationFillMarker[];
+  priceOverlay?: TearsheetSeriesPoint[];
+  height?: number;
+  view?: ViewWindow;
+  onView?: (v: ViewWindow) => void;
+  fullSpan?: [string, string];
+  resetView?: ViewWindow;
+  interactive?: boolean;
+  ariaLabel: string;
+}
+
+function stepPath(
+  points: TearsheetSeriesPoint[],
+  xAt: (i: number) => number,
+  yAt: (v: number) => number,
+): string {
+  if (points.length === 0) return "";
+  let d = `M${xAt(0).toFixed(1)} ${yAt(points[0].v).toFixed(1)} `;
+  for (let i = 1; i < points.length; i++) {
+    d += `H${xAt(i).toFixed(1)} V${yAt(points[i].v).toFixed(1)} `;
+  }
+  return d;
+}
+
+/** Step % allocated (MTM) with sized buy/sell fill dots and faint log price. Cash is the inverse of allocated and is not drawn. */
+export function AllocationStepChart(props: AllocationStepChartProps) {
+  const { allocated, height = 320 } = props;
+  if (!allocated || allocated.length === 0) return <Empty height={height} msg="no data" />;
+  return <AllocationStepChartBody {...props} height={height} />;
+}
+
+function AllocationStepChartBody({
+  allocated: allAllocated,
+  markers,
+  priceOverlay = [],
+  height,
+  view,
+  onView,
+  fullSpan,
+  resetView,
+  interactive = true,
+  ariaLabel,
+}: AllocationStepChartProps & { height: number }) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [hover, setHover] = useState<ChartHoverTip | null>(null);
+  const { vbW, pad: layoutPad } = useChartLayout(wrapRef, height, false);
+  const pad = { ...layoutPad, right: Math.max(layoutPad.right, 64) };
+  const clipId = `ts-alloc-clip-${useId().replace(/:/g, "")}`;
+  const allocated = sliceByView(allAllocated, view, fullSpan);
+  const pricePts = sliceByView(priceOverlay, view, fullSpan);
+  const control = viewHandlers(view, onView, pad, vbW, resetView);
+  const plotW = vbW - pad.left - pad.right;
+  const plotH = height - pad.top - pad.bottom;
+  const plotTop = pad.top;
+  const plotBottom = pad.top + plotH;
+  const n = allocated.length;
+  const xAt = (i: number) => pad.left + (n <= 1 ? plotW / 2 : (i / (n - 1)) * plotW);
+  const yAt = (val: number) => pad.top + plotH - (val / 100) * plotH;
+  const allocPath = stepPath(allocated, xAt, yAt);
+  const dateIx = new Map(allocated.map((p, i) => [p.t.slice(0, 10), i]));
+
+  const priceMap = new Map(pricePts.map((p) => [p.t, p.v]));
+  const priceVals = allocated
+    .map((p) => priceMap.get(p.t))
+    .filter((v): v is number => v != null && v > 0);
+  const priceScale = makeScale("log");
+  const priceDom =
+    priceVals.length > 0 ? dataDomain(priceVals, priceScale, { padRatio: 0.04 }) : { lo: 0, hi: 1 };
+  const yPrice = (val: number) =>
+    pad.top + plotH - ((priceScale.f(val) - priceDom.lo) / (priceDom.hi - priceDom.lo)) * plotH;
+  let priceLine = "";
+  let drawingPrice = false;
+  for (let i = 0; i < n; i++) {
+    const v = priceMap.get(allocated[i].t);
+    if (v == null || !(v > 0)) {
+      drawingPrice = false;
+      continue;
+    }
+    priceLine += `${drawingPrice ? "L" : "M"}${xAt(i).toFixed(1)} ${yPrice(v).toFixed(1)} `;
+    drawingPrice = true;
+  }
+
+  const ticks = [0, 25, 50, 75, 100];
+  const idxs = n === 0 ? [] : [0, Math.floor((n - 1) / 2), n - 1];
+
+  const onChartMouseMove = useCallback(
+    (e: React.MouseEvent<SVGSVGElement>) => {
+      if (e.buttons !== 0) {
+        setHover(null);
+        return;
+      }
+      const wrap = wrapRef.current;
+      if (!wrap || n === 0) return;
+      const { x: vbX, y: vbY } = viewBoxPoint(e.clientX, e.clientY, e.currentTarget, vbW, height);
+      if (vbX < pad.left || vbX > vbW - pad.right || vbY < plotTop || vbY > plotBottom) {
+        setHover(null);
+        return;
+      }
+      const frac = plotFraction(e.clientX, e.currentTarget, pad.left, pad.right, vbW);
+      const idx = n === 1 ? 0 : Math.round(frac * (n - 1));
+      const pt = allocated[idx];
+      if (!pt) {
+        setHover(null);
+        return;
+      }
+      const pos = positionHoverTip(e.clientX, e.clientY, wrap, 200, 80);
+      setHover({
+        ...pos,
+        content: <SeriesTipContent date={pt.t} value={`${pt.v.toFixed(1)}% allocated`} />,
+      });
+    },
+    [allocated, height, n, pad.left, pad.right, plotBottom, plotTop, vbW],
+  );
+
+  return (
+    <ChartHoverShell hover={interactive ? hover : null} wrapRef={wrapRef}>
+      <Svg
+        height={height}
+        vbW={vbW}
+        control={control}
+        onMouseMove={interactive ? onChartMouseMove : undefined}
+        onMouseLeave={interactive ? () => setHover(null) : undefined}
+        ariaLabel={ariaLabel}
+      >
+        <defs>
+          <clipPath id={clipId}>
+            <rect x={pad.left} y={plotTop} width={plotW} height={plotH} />
+          </clipPath>
+        </defs>
+        {ticks.map((tv) => (
+          <g key={`g${tv}`}>
+            <line x1={pad.left} y1={yAt(tv)} x2={vbW - pad.right} y2={yAt(tv)} className="ts-grid" />
+            <text x={pad.left - 8} y={axisLabelY(yAt(tv), plotTop, plotBottom)} textAnchor="end" className="ts-axis">
+              {tv}%
+            </text>
+          </g>
+        ))}
+        {priceLine ? (
+          <g clipPath={`url(#${clipId})`} data-chart-layer="price-overlay">
+            <path d={priceLine} fill="none" className="ts-line ts-price-faint" />
+          </g>
+        ) : null}
+        <g clipPath={`url(#${clipId})`}>
+          <path d={allocPath} fill="none" className="ts-line ts-tone-accent" data-chart-layer="alloc-step" />
+        </g>
+        <g clipPath={`url(#${clipId})`} data-chart-layer="fill-markers">
+          {markers.map((m, i) => {
+            const idx = dateIx.get(m.t.slice(0, 10));
+            if (idx == null) return null;
+            const r = 3 + 10 * Math.sqrt(Math.min(m.book_frac, 0.25));
+            return (
+              <circle
+                key={`${m.side}-${m.t}-${i}`}
+                cx={xAt(idx)}
+                cy={yAt(allocated[idx].v)}
+                r={r}
+                className={m.side === "buy" ? "ts-fill-dot ts-fill-dot-buy" : "ts-fill-dot ts-fill-dot-sell"}
+                data-side={m.side}
+              />
+            );
+          })}
+        </g>
+        {idxs.map((i, k) => {
+          const anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+          return (
+            <text key={`x${k}`} x={xAt(i)} y={height - 10} textAnchor={anchor} className="ts-axis">
+              {(allocated[i].t || "").slice(0, 10)}
+            </text>
+          );
+        })}
+      </Svg>
+    </ChartHoverShell>
+  );
+}
+