@digithings-ai/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,71 @@
+"use client";
+
+/**
+ * EquityCurve — the tearsheet's headline promoted from the design reference
+ * (finance/equity-curve): cumulative equity as an area series on TradingView
+ * Lightweight Charts. It wears the module accent — identity, not a single
+ * P&L read, so the money colors stay out of it — with a gradient fill that
+ * thins toward the baseline, and re-themes live on `data-theme` flips.
+ *
+ * Data comes in via the required `data` prop (ISO-dated points, ascending);
+ * `EQUITY_CURVE_DEMO` is the exported reference filler. The host fills its
+ * pane (`autoSize`) — give the pane a definite height. Client component —
+ * chart lifecycle effect; no motion/react surface.
+ *
+ * Wiring (consuming app): `lightweight-charts` dependency, plus
+ *   globals.css   @source "<path-to>/packages/ui/src/components/finance-charts";
+ */
+
+import { useCallback } from "react";
+import { AreaSeries, type AreaData, type IChartApi } from "lightweight-charts";
+import {
+  toChartTime,
+  tokenAlpha,
+  useFinanceChart,
+  type FinanceChartPalette,
+  type FinanceSeriesPoint,
+} from "./chart-host";
+
+export type EquityCurveProps = {
+  /** Cumulative-equity series, ISO `yyyy-mm-dd` ascending. */
+  data: FinanceSeriesPoint[];
+  /** Extra classes on the chart host (it is `h-full w-full` by default). */
+  className?: string;
+  /** Accessible name; omitted → decorative (`aria-hidden`). */
+  label?: string;
+};
+
+export function EquityCurve({ data, className, label }: EquityCurveProps) {
+  const setup = useCallback(
+    (chart: IChartApi, p: FinanceChartPalette) => {
+      const area = chart.addSeries(AreaSeries, {
+        lineColor: p.accent,
+        topColor: tokenAlpha(p.accent, 0.28),
+        bottomColor: tokenAlpha(p.accent, 0.02),
+        lineWidth: 2,
+        priceLineVisible: false,
+      });
+      area.setData(
+        data.map((pt): AreaData => ({ time: toChartTime(pt.time), value: pt.value }))
+      );
+      return (next: FinanceChartPalette) => {
+        area.applyOptions({
+          lineColor: next.accent,
+          topColor: tokenAlpha(next.accent, 0.28),
+          bottomColor: tokenAlpha(next.accent, 0.02),
+        });
+      };
+    },
+    [data]
+  );
+
+  const hostRef = useFinanceChart(setup, "accent");
+
+  return (
+    <div
+      ref={hostRef}
+      className={`h-full w-full${className ? ` ${className}` : ""}`}
+      {...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true })}
+    />
+  );
+}

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

@@ -0,0 +1,119 @@
+"use client";
+
+/**
+ * PriceChart — the standard price-plotting primitive promoted from the design
+ * reference (finance/price-chart): candlesticks (plus an optional volume
+ * histogram tucked under the price pane) on TradingView Lightweight Charts.
+ * Candles and volume wear the digiquant chart scale (`--up` / `--down`) —
+ * this IS a P&L read. Volume follows the candle at the same time: up when
+ * the close is at or above the open. Everything re-themes live on
+ * `data-theme` flips. Custom SVG candles are retired (see the finance
+ * reference page's charting rules).
+ *
+ * Data comes in via the required `candles` prop (ISO-dated OHLC, ascending);
+ * `volume` is optional — omit it for a candles-only pane. `PRICE_CHART_DEMO`
+ * is the exported reference filler carrying both. The host fills its pane
+ * (`autoSize`) — give the pane a definite height. Client component — chart
+ * lifecycle effect; no motion/react surface.
+ *
+ * Wiring (consuming app): `lightweight-charts` dependency, plus
+ *   globals.css   @source "<path-to>/packages/ui/src/components/finance-charts";
+ */
+
+import { useCallback } from "react";
+import {
+  CandlestickSeries,
+  HistogramSeries,
+  type CandlestickData,
+  type HistogramData,
+  type IChartApi,
+} from "lightweight-charts";
+import {
+  toChartTime,
+  useFinanceChart,
+  type FinanceChartPalette,
+  type FinanceSeriesPoint,
+  type OhlcPoint,
+} from "./chart-host";
+
+export type PriceChartProps = {
+  /** OHLC candles, ISO `yyyy-mm-dd` ascending. */
+  candles: OhlcPoint[];
+  /** Optional volume bars (same time axis); omitted → candles only. */
+  volume?: FinanceSeriesPoint[];
+  /** Extra classes on the chart host (it is `h-full w-full` by default). */
+  className?: string;
+  /** Accessible name; omitted → decorative (`aria-hidden`). */
+  label?: string;
+};
+
+export function PriceChart({ candles, volume, className, label }: PriceChartProps) {
+  const setup = useCallback(
+    (chart: IChartApi, p: FinanceChartPalette) => {
+      const candleSeries = chart.addSeries(CandlestickSeries, {
+        upColor: p.up,
+        downColor: p.down,
+        borderUpColor: p.up,
+        borderDownColor: p.down,
+        wickUpColor: p.up,
+        wickDownColor: p.down,
+      });
+      candleSeries.setData(
+        candles.map(
+          (c): CandlestickData => ({
+            time: toChartTime(c.time),
+            open: c.open,
+            high: c.high,
+            low: c.low,
+            close: c.close,
+          })
+        )
+      );
+
+      const volumeSeries = volume
+        ? chart.addSeries(HistogramSeries, {
+            priceFormat: { type: "volume" },
+            priceScaleId: "vol",
+          })
+        : null;
+      const paintVolume = (palette: FinanceChartPalette) => {
+        if (!volumeSeries || !volume) return;
+        const direction = new Map(candles.map((c) => [c.time, c.close >= c.open]));
+        volumeSeries.setData(
+          volume.map((v): HistogramData => ({
+            time: toChartTime(v.time),
+            value: v.value,
+            color: direction.get(v.time) === false ? palette.down : palette.up,
+          }))
+        );
+      };
+      paintVolume(p);
+      if (volumeSeries) {
+        chart.priceScale("vol").applyOptions({ scaleMargins: { top: 0.82, bottom: 0 } });
+      }
+
+      return (next: FinanceChartPalette) => {
+        candleSeries.applyOptions({
+          upColor: next.up,
+          downColor: next.down,
+          borderUpColor: next.up,
+          borderDownColor: next.down,
+          wickUpColor: next.up,
+          wickDownColor: next.down,
+        });
+        paintVolume(next);
+      };
+    },
+    [candles, volume]
+  );
+
+  const hostRef = useFinanceChart(setup, "accent");
+
+  return (
+    <div
+      ref={hostRef}
+      className={`h-full w-full${className ? ` ${className}` : ""}`}
+      {...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true })}
+    />
+  );
+}

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

@@ -0,0 +1,236 @@
+"use client";
+
+/**
+ * Finance-charts host scaffold (#1450) — the family's shared TradingView
+ * Lightweight Charts lifecycle, promoted from the design reference
+ * (finance/price-chart · equity-curve · drawdown). Since batch E this IS the
+ * chart-scaffold canon: dashboard's `lib/lw-chart.tsx` is a thin adapter over
+ * this family (see lw-chart.tsx here for the persistent-chart lifecycle).
+ * Token-themed via CSS-variable reads with SSR fallbacks, `autoSize: true`,
+ * transparent canvas, attribution logo off, a MutationObserver on
+ * `data-theme` re-applies the palette live, and kinetic-scroll inertia is
+ * disabled under prefers-reduced-motion.
+ *
+ * Charts draw on canvas, so there is no CSS file for them — the host div
+ * carries `h-full w-full` utilities and fills whatever definite-height pane
+ * the consumer provides. `lightweight-charts` must be a dependency of the
+ * consuming app (it is a peer of this family).
+ */
+
+import { useEffect, useRef, useSyncExternalStore, type RefObject } from "react";
+import {
+  createChart,
+  type ChartOptions,
+  type DeepPartial,
+  type IChartApi,
+  type Time,
+} from "lightweight-charts";
+import { chartChromeOptions } from "./lw-chart";
+
+/** ISO-dated series point — the wire shape every finance chart accepts. */
+export type FinanceSeriesPoint = {
+  /** ISO `yyyy-mm-dd`, ascending and unique across the series. */
+  time: string;
+  value: number;
+};
+
+/** ISO-dated OHLC candle for <PriceChart/>. */
+export type OhlcPoint = {
+  /** ISO `yyyy-mm-dd`, ascending and unique across the series. */
+  time: string;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+};
+
+/** Resolved design tokens a finance chart paints with. */
+export type FinanceChartPalette = {
+  ink: string;
+  inkMute: string;
+  hair: string;
+  accent: string;
+  up: string;
+  down: string;
+  mono: string;
+};
+
+/** Which palette token backs the crosshair's axis labels. */
+export type CrosshairLabelToken = "accent" | "up" | "down";
+
+/** ISO `yyyy-mm-dd` → lightweight-charts `Time`. */
+export function toChartTime(iso: string): Time {
+  return iso as unknown as Time;
+}
+
+/** Token reads off the host element, with SSR-safe fallbacks mirroring the
+ *  dark theme in @digithings-ai/design/tokens.css (the sanctioned cssVar
+ *  fallback pattern — see scripts/check_frontend_canon.py). Fallbacks track
+ *  tokens.css:161,166,175,182-183; the light theme intentionally renders
+ *  from the dark snapshot until the client re-reads. Pass `null`
+ *  (or call on the server) to get the fallback palette verbatim. */
+export function readFinancePalette(host: HTMLElement | null): FinanceChartPalette {
+  const cs = host && typeof window !== "undefined" ? getComputedStyle(host) : null;
+  const cssVar = (name: string, fallback: string) =>
+    cs?.getPropertyValue(name).trim() || fallback;
+  return {
+    ink: cssVar("--ink", "#ECEEF0"),
+    inkMute: cssVar("--ink-mute", "#7D8389"),
+    hair: cssVar("--hair", "rgba(255,255,255,0.09)"),
+    accent: cssVar("--accent", "#3dd6c4"),
+    up: cssVar("--up", "#3DD6C4"),
+    down: cssVar("--down", "#E5533E"),
+    mono: cssVar("--font-mono", "monospace"),
+  };
+}
+
+/**
+ * Re-emit a resolved token color at `alpha` — the gradient fills read the
+ * accent/money tokens, then thin them out. Handles both token spellings in
+ * tokens.css: `#rgb`/`#rrggbb` hex (accents, money colors) and `rgb()`/
+ * `rgba()` functions (hairlines). Unparseable values pass through.
+ */
+export function tokenAlpha(color: string, alpha: number): string {
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    const full =
+      hex.length === 3 || hex.length === 4
+        ? [...hex.slice(0, 3)].map((c) => c + c).join("")
+        : hex.slice(0, 6);
+    if (!/^[0-9a-fA-F]{6}$/.test(full)) return color;
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+  const channels = color.match(/[\d.]+/g);
+  if (!channels || channels.length < 3) return color;
+  return `rgba(${channels[0]},${channels[1]},${channels[2]},${alpha})`;
+}
+
+/** Chart-wide options derived from the tokens: transparent canvas, hair
+ *  grid + scale borders, ink-mute mono text and crosshair lines, token-backed
+ *  crosshair labels. Re-applied wholesale on theme flips. Thin binding of the
+ *  palette onto the family's unified chrome builder (lw-chart.tsx). */
+export function financeChartOptions(
+  p: FinanceChartPalette,
+  crosshairLabel: CrosshairLabelToken
+): DeepPartial<ChartOptions> {
+  return chartChromeOptions({
+    text: p.inkMute,
+    hair: p.hair,
+    label: p[crosshairLabel],
+    fontFamily: p.mono,
+  });
+}
+
+/* ── Theme-reactive document-level palette ─────────────────────────────── */
+
+/** SSR / pre-mount snapshot — the fallback palette, referentially stable. */
+const SSR_PALETTE = readFinancePalette(null);
+
+let paletteCache: { theme: string | null; palette: FinanceChartPalette } | null = null;
+
+/**
+ * Resolved document-level palette, re-read once per `data-theme` flip and
+ * referentially stable between flips (safe as an effect dependency). This is
+ * the live-read companion to `useFinanceChartPalette` — pass it as
+ * `readColors` when composing with `useLightweightChart`.
+ */
+export function getFinancePalette(): FinanceChartPalette {
+  if (typeof window === "undefined") return SSR_PALETTE;
+  const theme = document.documentElement.getAttribute("data-theme");
+  if (!paletteCache || paletteCache.theme !== theme) {
+    paletteCache = { theme, palette: readFinancePalette(document.documentElement) };
+  }
+  return paletteCache.palette;
+}
+
+function subscribeToThemeFlips(onStoreChange: () => void): () => void {
+  const observer = new MutationObserver(onStoreChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"],
+  });
+  return () => observer.disconnect();
+}
+
+/**
+ * Theme-reactive palette hook: serves the fallback palette on the server
+ * (hydration-safe), the live document-level token values on the client, and
+ * re-reads when `data-theme` flips on `<html>`. Pairs with the persistent
+ * `useLightweightChart` scaffold (lw-chart.tsx) for dashboard surfaces.
+ * Note: document-level reads — scoped liveries (`.accent-digiquant { … }`)
+ * resolve per-host only through `useFinanceChart`'s host reads.
+ */
+export function useFinanceChartPalette(): FinanceChartPalette {
+  return useSyncExternalStore(subscribeToThemeFlips, getFinancePalette, () => SSR_PALETTE);
+}
+
+/**
+ * Owns a chart's lifecycle against the returned host ref: create with the
+ * token theme, hand the chart to `setup` (add series + set data there, return
+ * a re-tint callback for the series' own colors), fit content, re-theme on
+ * `data-theme` flips, dispose on unmount.
+ *
+ * `setup` is an effect dependency — memoize it with `useCallback` keyed on
+ * the data props. A data change tears the chart down and rebuilds it, which
+ * matches the reference specimens' lifecycle (these are display surfaces;
+ * dashboards with live-updating series should use the persistent
+ * `useLightweightChart` scaffold from lw-chart.tsx instead).
+ */
+export function useFinanceChart(
+  setup: (
+    chart: IChartApi,
+    palette: FinanceChartPalette
+  ) => (palette: FinanceChartPalette) => void,
+  crosshairLabel: CrosshairLabelToken = "accent"
+): RefObject<HTMLDivElement | null> {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+
+    const reducedMotion =
+      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+    let palette = readFinancePalette(host);
+
+    const chart: IChartApi = createChart(host, {
+      autoSize: true,
+      ...financeChartOptions(palette, crosshairLabel),
+      // These are display specimens embedded in scrolling prose (design
+      // reference / marketing surfaces), never a live dashboard — see this
+      // file's own docblock. A reader's wheel/touch scroll landing on the
+      // canvas should keep moving the page, not pan/zoom a chart nobody
+      // asked to interact with. useLightweightChart (lw-chart.tsx), the
+      // dashboard-facing sibling, is untouched and keeps full pan/zoom.
+      handleScroll: { mouseWheel: false, pressedMouseMove: false, horzTouchDrag: false, vertTouchDrag: false },
+      handleScale: { axisPressedMouseMove: false, mouseWheel: false, pinch: false },
+      // Reduced motion: no kinetic-scroll inertia (the final state is the
+      // same chart — panning still works, it just stops with the pointer).
+      ...(reducedMotion ? { kineticScroll: { touch: false, mouse: false } } : {}),
+    });
+
+    const retintSeries = setup(chart, palette);
+    chart.timeScale().fitContent();
+
+    const retheme = () => {
+      palette = readFinancePalette(host);
+      chart.applyOptions(financeChartOptions(palette, crosshairLabel));
+      retintSeries(palette);
+    };
+    const themeObs = new MutationObserver(retheme);
+    themeObs.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+
+    return () => {
+      themeObs.disconnect();
+      chart.remove();
+    };
+  }, [setup, crosshairLabel]);
+
+  return hostRef;
+}

package/src/components/finance-charts/chart-scale.ts

@@ -0,0 +1,93 @@
+/**
+ * One digiquant chart scale. Candles, volume, and price moves use the
+ * design-canon pair already declared as `--up` and `--down` in
+ * `@digithings-ai/design/tokens.css` (dark teal `#3DD6C4` / red `#E5533E`,
+ * light `#0C7C71` / `#B2452E`).
+ *
+ * Studies use a teal-led palette — spring, cyan, yellow, lime, orange,
+ * green, azure — so each indicator keeps its own hue. Grid and axis stay
+ * on the neutral hair and mute tokens.
+ *
+ * Canvas engines need a resolved color. `DIGIQUANT_CHART` is the dark-theme
+ * snapshot (the same fallback `readFinancePalette` uses). Call
+ * `readDigiquantChartScale` when a document is available so a theme flip
+ * resolves the live custom properties.
+ *
+ * Import path: `@digithings-ai/ui/chart-scale`.
+ */
+
+export type DigiquantChartScale = {
+  candleUp: string;
+  candleDown: string;
+  volumeUp: string;
+  volumeDown: string;
+  sma: string;
+  ema: string;
+  vwap: string;
+  bollingerBasis: string;
+  bollingerBand: string;
+  supertrendUp: string;
+  supertrendDown: string;
+  grid: string;
+  axis: string;
+};
+
+/** Dark-theme snapshot. The token name on each line is the canon-guard escape. */
+function role(token: `--${string}`, fallback: string): string {
+  void token;
+  return fallback;
+}
+
+export const DIGIQUANT_CHART: DigiquantChartScale = {
+  candleUp: role("--chart-candle-up", "#3DD6C4"),
+  candleDown: role("--chart-candle-down", "#E5533E"),
+  volumeUp: role("--chart-volume-up", "#3DD6C4"),
+  volumeDown: role("--chart-volume-down", "#E5533E"),
+  sma: role("--chart-sma", "#1EC98A"),
+  ema: role("--chart-ema", "#5AD4F0"),
+  vwap: role("--chart-vwap", "#F0D44A"),
+  bollingerBasis: role("--chart-bollinger", "#B0DC3A"),
+  bollingerBand: role("--chart-bollinger-band", "#F09238"),
+  supertrendUp: role("--chart-supertrend-up", "#54DC62"),
+  supertrendDown: role("--chart-supertrend-down", "#6A96F0"),
+  grid: role("--chart-grid", "rgba(255, 255, 255, 0.09)"),
+  axis: role("--chart-axis", "#7D8389"),
+};
+
+/** Live chart roles off `host`, or the dark snapshot when there is no document. */
+export function readDigiquantChartScale(host: HTMLElement | null): DigiquantChartScale {
+  const cs = host && typeof window !== "undefined" ? getComputedStyle(host) : null;
+  const cssVar = (name: keyof typeof TOKEN, fallback: string) =>
+    cs?.getPropertyValue(TOKEN[name]).trim() || fallback;
+  return {
+    candleUp: cssVar("candleUp", DIGIQUANT_CHART.candleUp),
+    candleDown: cssVar("candleDown", DIGIQUANT_CHART.candleDown),
+    volumeUp: cssVar("volumeUp", DIGIQUANT_CHART.volumeUp),
+    volumeDown: cssVar("volumeDown", DIGIQUANT_CHART.volumeDown),
+    sma: cssVar("sma", DIGIQUANT_CHART.sma),
+    ema: cssVar("ema", DIGIQUANT_CHART.ema),
+    vwap: cssVar("vwap", DIGIQUANT_CHART.vwap),
+    bollingerBasis: cssVar("bollingerBasis", DIGIQUANT_CHART.bollingerBasis),
+    bollingerBand: cssVar("bollingerBand", DIGIQUANT_CHART.bollingerBand),
+    supertrendUp: cssVar("supertrendUp", DIGIQUANT_CHART.supertrendUp),
+    supertrendDown: cssVar("supertrendDown", DIGIQUANT_CHART.supertrendDown),
+    grid: cssVar("grid", DIGIQUANT_CHART.grid),
+    axis: cssVar("axis", DIGIQUANT_CHART.axis),
+  };
+}
+
+const TOKEN = {
+  candleUp: "--chart-candle-up",
+  candleDown: "--chart-candle-down",
+  volumeUp: "--chart-volume-up",
+  volumeDown: "--chart-volume-down",
+  sma: "--chart-sma",
+  ema: "--chart-ema",
+  vwap: "--chart-vwap",
+  bollingerBasis: "--chart-bollinger",
+  bollingerBand: "--chart-bollinger-band",
+  supertrendUp: "--chart-supertrend-up",
+  supertrendDown: "--chart-supertrend-down",
+  grid: "--chart-grid",
+  axis: "--chart-axis",
+} as const;

package/src/components/finance-charts/demo-data.ts

@@ -0,0 +1,88 @@
+/**
+ * DEMO DATA ONLY (#1450) — deterministic filler series for the finance-charts
+ * family, the exact LCG walks the reference specimens shipped with, so the
+ * promoted charts render pixel-identical on the reference pages. Marketing /
+ * catalog surfaces may pass these; anything showing real performance passes
+ * its own series — the chart components take data via required props precisely
+ * so demo numbers can never ship by omission.
+ */
+
+import type { FinanceSeriesPoint, OhlcPoint } from "./chart-host";
+
+/** Deterministic LCG in [0, 1) — stable across renders and runtimes. */
+function lcg(seed: number): () => number {
+  let s = seed;
+  return () => {
+    s = (s * 1103515245 + 12345) & 0x7fffffff;
+    return s / 0x7fffffff;
+  };
+}
+
+function isoOffset(startUtc: Date, days: number): string {
+  const date = new Date(startUtc);
+  date.setUTCDate(startUtc.getUTCDate() + days);
+  return date.toISOString().slice(0, 10);
+}
+
+/** Cumulative-equity walk: starts at 100, drifts up with dips (weekly bars). */
+function equityCurveDemo(n: number): FinanceSeriesPoint[] {
+  const rnd = lcg(730217);
+  const start = new Date(Date.UTC(2022, 0, 1));
+  const data: FinanceSeriesPoint[] = [];
+  let equity = 100;
+  for (let i = 0; i < n; i++) {
+    equity *= 1 + (rnd() - 0.44) * 0.05;
+    data.push({ time: isoOffset(start, i * 7), value: Math.max(40, equity) });
+  }
+  return data;
+}
+
+/** Underwater curve: % below the running peak of an equity walk — every
+ *  value is ≤ 0. */
+function drawdownDemo(n: number): FinanceSeriesPoint[] {
+  const rnd = lcg(5150);
+  const start = new Date(Date.UTC(2022, 0, 1));
+  const data: FinanceSeriesPoint[] = [];
+  let equity = 100;
+  let peak = 100;
+  for (let i = 0; i < n; i++) {
+    equity *= 1 + (rnd() - 0.44) * 0.05;
+    peak = Math.max(peak, equity);
+    data.push({
+      time: isoOffset(start, i * 7),
+      value: Math.round((equity / peak - 1) * 1000) / 10,
+    });
+  }
+  return data;
+}
+
+/** Daily OHLC + volume walk. */
+function priceChartDemo(n: number): { candles: OhlcPoint[]; volume: FinanceSeriesPoint[] } {
+  const rnd = lcg(20260101);
+  const start = new Date(Date.UTC(2026, 0, 1));
+  const candles: OhlcPoint[] = [];
+  const volume: FinanceSeriesPoint[] = [];
+  let price = 92;
+  for (let i = 0; i < n; i++) {
+    const time = isoOffset(start, i);
+    const drift = (rnd() - 0.47) * 3.4;
+    const open = price;
+    const close = Math.max(6, open + drift);
+    const high = Math.max(open, close) + rnd() * 2.1;
+    const low = Math.min(open, close) - rnd() * 2.1;
+    candles.push({ time, open, high, low, close });
+    volume.push({ time, value: 40 + rnd() * 120 });
+    price = close;
+  }
+  return { candles, volume };
+}
+
+/** Demo cumulative-equity series (210 weekly points from 2022-01-01). */
+export const EQUITY_CURVE_DEMO: FinanceSeriesPoint[] = equityCurveDemo(210);
+
+/** Demo underwater-drawdown series (210 weekly points, all ≤ 0). */
+export const DRAWDOWN_DEMO: FinanceSeriesPoint[] = drawdownDemo(210);
+
+/** Demo OHLC candles + volume bars (120 daily points from 2026-01-01). */
+export const PRICE_CHART_DEMO: { candles: OhlcPoint[]; volume: FinanceSeriesPoint[] } =
+  priceChartDemo(120);

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

@@ -0,0 +1,46 @@
+/**
+ * finance-charts family barrel (#1450) — canvas dashboard chart surfaces
+ * promoted from the design reference's finance page. Time-series charts ride
+ * TradingView Lightweight Charts (the engine ruling — see
+ * packages/ui/CHARTS.md for the canvas-vs-SVG split; print-grade
+ * surfaces compose the finance-tearsheet family instead). MonthlyReturns was
+ * deprecated into finance-tearsheet's ReturnsMatrix (#1463) — one matrix
+ * grammar, no app consumers existed. Re-exported from the package root by
+ * src/index.ts.
+ */
+
+export { PriceChart, type PriceChartProps } from "./PriceChart";
+export { EquityCurve, type EquityCurveProps } from "./EquityCurve";
+export { DrawdownPlot, type DrawdownPlotProps } from "./DrawdownPlot";
+export {
+  useFinanceChart,
+  useFinanceChartPalette,
+  getFinancePalette,
+  readFinancePalette,
+  financeChartOptions,
+  tokenAlpha,
+  toChartTime,
+  type FinanceChartPalette,
+  type FinanceSeriesPoint,
+  type OhlcPoint,
+  type CrosshairLabelToken,
+} from "./chart-host";
+export {
+  useLightweightChart,
+  chartChromeOptions,
+  hostMonoFont,
+  toLineData,
+  timeToISO,
+  useChartTip,
+  ChartTipShell,
+  type ChartChrome,
+  type ChartTip,
+  type UseLightweightChartConfig,
+  type UseLightweightChartResult,
+} from "./lw-chart";
+export { PRICE_CHART_DEMO, EQUITY_CURVE_DEMO, DRAWDOWN_DEMO } from "./demo-data";
+export {
+  DIGIQUANT_CHART,
+  readDigiquantChartScale,
+  type DigiquantChartScale,
+} from "./chart-scale";