@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/effects-chrome/ToastStack.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, m, useReducedMotion } from "motion/react";
+import { Button } from "../../ui";
+
+/**
+ * ToastStack — the corner notification stack promoted from the design
+ * reference (chrome/toasts), as an imperative-free, props-driven primitive:
+ * the APP owns the toast list (push/update/remove in its own state — there is
+ * no global toast() singleton here) and passes `toasts` + `onDismiss`. The
+ * stack renders them sliding in at the corner; a toast with `ttlMs` retires
+ * itself on a watchable drain timer (the component fires `onDismiss(id)` at
+ * expiry — remove it from state there), one without holds open (the pending /
+ * spinner case) and resolves in place when the app swaps its tone and ttl.
+ *
+ * Status rides the up/down reads (success/error), never a livery. Reduced
+ * motion drops the slide and the progress bar but keeps the toast (ttl
+ * dismissal still runs). Renders into a document.body portal by default
+ * (mount-gated, so SSR/hydration are safe); `portal={false}` renders in
+ * place for contained demos.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/effects-chrome.css";
+ *                 @source "<path-to>/packages/ui/src/components/effects-chrome";
+ */
+export type ToastTone = "success" | "error" | "info" | "loading";
+
+export type ToastItem = {
+  id: string | number;
+  tone: ToastTone;
+  /** Mono headline — "Backtest complete". */
+  title: string;
+  /** Optional detail line — "PF 2.31 · saved to vault". */
+  message?: string;
+  /** Auto-dismiss after this many ms; omit or 0 to hold open. */
+  ttlMs?: number;
+  /** Optional one-click recovery control — e.g. "Reissue" on an
+   *  expired-token error toast that names a fix but otherwise has no way to
+   *  let the user actually perform it. Renders as a small text button under
+   *  the message; omit for the current text-only rendering. */
+  action?: { label: string; onClick: () => void };
+};
+
+export type ToastStackProps = {
+  toasts: ToastItem[];
+  /** Remove the toast from app state — fired by the ✕ and by ttl expiry. */
+  onDismiss: (id: ToastItem["id"]) => void;
+  /** Render into a document.body portal (default) or in place. */
+  portal?: boolean;
+  ariaLabel?: string;
+  className?: string;
+};
+
+const ICONS: Record<ToastTone, ReactNode> = {
+  success: <path d="M5 12.5l4.5 4.5L19 7" />,
+  error: <path d="M12 8v5M12 16.5v.5M12 3l9 16H3z" />,
+  info: <path d="M12 11v6M12 7.5v.5" />,
+  loading: <path d="M12 4a8 8 0 1 0 8 8" />,
+};
+
+export function ToastStack({
+  toasts,
+  onDismiss,
+  portal = true,
+  ariaLabel = "Notifications",
+  className,
+}: ToastStackProps) {
+  const reduced = useReducedMotion();
+  const [mounted, setMounted] = useState(false);
+  const timers = useRef<Map<ToastItem["id"], { ttl: number; timer: number }>>(new Map());
+  const onDismissRef = useRef(onDismiss);
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+
+  useEffect(() => setMounted(true), []);
+
+  // Arm/re-arm ttl timers declaratively: a toast whose ttl changed (the
+  // loading → success resolve-in-place move) gets a fresh timer; departed
+  // toasts get theirs cleared.
+  useEffect(() => {
+    const map = timers.current;
+    const live = new Set(toasts.map((t) => t.id));
+    for (const [id, entry] of map) {
+      if (!live.has(id)) {
+        window.clearTimeout(entry.timer);
+        map.delete(id);
+      }
+    }
+    for (const t of toasts) {
+      const ttl = t.ttlMs ?? 0;
+      const entry = map.get(t.id);
+      if (entry && entry.ttl === ttl) continue;
+      if (entry) window.clearTimeout(entry.timer);
+      if (ttl > 0) {
+        map.set(t.id, {
+          ttl,
+          timer: window.setTimeout(() => {
+            map.delete(t.id);
+            onDismissRef.current(t.id);
+          }, ttl),
+        });
+      } else {
+        map.delete(t.id);
+      }
+    }
+  }, [toasts]);
+
+  useEffect(() => {
+    const map = timers.current;
+    return () => {
+      map.forEach((entry) => window.clearTimeout(entry.timer));
+      map.clear();
+    };
+  }, []);
+
+  const stack = (
+    <div
+      className={`toast-stack${className ? ` ${className}` : ""}`}
+      role="region"
+      aria-label={ariaLabel}
+      aria-live="polite"
+    >
+      <AnimatePresence initial={false}>
+        {toasts.map((t) => (
+          <m.div
+            key={t.id}
+            className={`toast toast-${t.tone}`}
+            initial={reduced ? { opacity: 0 } : { opacity: 0, x: 40, scale: 0.96 }}
+            animate={reduced ? { opacity: 1 } : { opacity: 1, x: 0, scale: 1 }}
+            exit={reduced ? { opacity: 0 } : { opacity: 0, x: 40, scale: 0.96 }}
+            transition={{ duration: 0.26 }}
+          >
+            <span className="toast-icon" aria-hidden="true">
+              <svg
+                viewBox="0 0 24 24"
+                width="16"
+                height="16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className={t.tone === "loading" ? "toast-spin" : undefined}
+              >
+                {ICONS[t.tone]}
+              </svg>
+            </span>
+            <div className="toast-body">
+              <p className="toast-title">{t.title}</p>
+              {t.message ? <p className="toast-msg">{t.message}</p> : null}
+              {t.action ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="toast-action h-auto inline-block border-0 bg-transparent p-0 text-[0.74rem] font-normal hover:bg-transparent hover:text-ink"
+                  onClick={t.action.onClick}
+                >
+                  {t.action.label}
+                </Button>
+              ) : null}
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              className="toast-close h-auto w-auto border-0 bg-transparent p-[0.15rem] hover:bg-transparent"
+              aria-label="Dismiss"
+              onClick={() => onDismiss(t.id)}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                width="13"
+                height="13"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+              >
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </Button>
+            {t.ttlMs && !reduced ? (
+              <span
+                className="toast-progress"
+                style={{ animationDuration: `${t.ttlMs}ms` }}
+                aria-hidden="true"
+              />
+            ) : null}
+          </m.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+
+  if (!portal) return stack;
+  if (!mounted) return null;
+  return createPortal(stack, document.body);
+}

package/src/components/effects-chrome/horizontal-track-core.ts

@@ -0,0 +1,70 @@
+/**
+ * Pure geometry for HorizontalScrollTrack — framework-free so it unit-tests
+ * without a DOM (the component wraps these with refs, observers and motion
+ * values). All x values are "distance the track has travelled left, in px".
+ */
+
+/** The pin is active only at this width and up (with motion allowed). */
+export const TRACK_MIN_WIDTH = 960;
+
+/** Clamp a number into [lo, hi]. */
+export function clamp(n: number, lo: number, hi: number): number {
+  return Math.min(hi, Math.max(lo, n));
+}
+
+/** How far the track must travel: its content width minus the viewport. */
+export function trackTravel(contentWidth: number, viewportWidth: number): number {
+  return Math.max(0, contentWidth - viewportWidth);
+}
+
+/**
+ * The runway's height: the pin's own height plus the horizontal travel, so one
+ * px of vertical scroll is exactly one px of horizontal travel and the runway
+ * always tracks the content width (the #1198 lesson — never a hardcoded vh).
+ */
+export function runwayHeight(pinHeight: number, travel: number): number {
+  return Math.round(pinHeight + travel);
+}
+
+/** Index of the item whose leading edge is nearest `x` (offsets ascending). */
+export function nearestIndex(offsets: readonly number[], x: number): number {
+  if (offsets.length === 0) return 0;
+  let best = 0;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  offsets.forEach((offset, i) => {
+    const d = Math.abs(offset - x);
+    if (d < bestDistance) {
+      bestDistance = d;
+      best = i;
+    }
+  });
+  return best;
+}
+
+/**
+ * Where the track should travel to so a focused item is revealed, or null when
+ * it is already fully inside the viewport (no scroll needed).
+ */
+export function focusTargetX(args: {
+  itemLeft: number;
+  itemWidth: number;
+  currentX: number;
+  viewportWidth: number;
+  travel: number;
+}): number | null {
+  const { itemLeft, itemWidth, currentX, viewportWidth, travel } = args;
+  const visible = itemLeft >= currentX && itemLeft + itemWidth <= currentX + viewportWidth;
+  if (visible) return null;
+  return clamp(itemLeft, 0, travel);
+}
+
+/** Document scrollTop that puts the track at travel `x` (1px : 1px). */
+export function scrollTopForX(args: {
+  runwayTopInDocument: number;
+  pinTop: number;
+  x: number;
+  travel: number;
+}): number {
+  const { runwayTopInDocument, pinTop, x, travel } = args;
+  return runwayTopInDocument - pinTop + clamp(x, 0, travel);
+}

package/src/components/effects-chrome/index.ts

@@ -0,0 +1,35 @@
+/**
+ * effects-chrome family barrel — scroll set pieces + site-chrome primitives
+ * promoted from the design reference (#1450): Pipeline, RotatingPrompts,
+ * StackingPanels, AnnouncementBar, TabStrip, ToastStack.
+ *
+ * Structural CSS for the whole family ships in styles/effects-chrome.css
+ * (one sheet, imported plainly — it manages its own layering).
+ */
+export {
+  Pipeline,
+  type PipelineProps,
+  type PipelineColumn,
+  type PipelineNode,
+  type PipelineStatus,
+  type PipelineSummaryItem,
+} from "./Pipeline";
+export { RotatingPrompts, type RotatingPromptsProps } from "./RotatingPrompts";
+export { StackingPanels, type StackingPanelsProps, type StackingPanel } from "./StackingPanels";
+export { AnnouncementBar, type AnnouncementBarProps } from "./AnnouncementBar";
+export {
+  TabStrip,
+  tabBaseId,
+  tabId,
+  tabPanelId,
+  type TabStripProps,
+  type TabItem,
+} from "./TabStrip";
+export {
+  HorizontalScrollTrack,
+  HorizontalTrackStepper,
+  useHorizontalTrack,
+  type HorizontalScrollTrackProps,
+  type HorizontalTrackState,
+} from "./HorizontalScrollTrack";
+export { ToastStack, type ToastStackProps, type ToastItem, type ToastTone } from "./ToastStack";

package/src/components/emblems.tsx

@@ -0,0 +1,188 @@
+/**
+ * Module emblem family — one modern visual grammar across modules. Each mark
+ * is a single geometric idea representing what the module does, drawn on a
+ * 0 0 32 32 grid (centered at 16,16). The grammar is dual-tone but single-hue:
+ * a monoline silhouette in `currentColor`, one soft `currentColor` tint layer
+ * (fillOpacity ~0.15) for figure/ground depth, and at most one solid accent
+ * detail for focus. The `Emblem` wrapper sets `currentColor` to the module's
+ * own accent token, so each renders in its own colour while the set stays
+ * cohesive.
+ */
+import { type SVGProps } from "react";
+
+type P = { size?: number } & SVGProps<SVGSVGElement>;
+const Svg = ({ size = 32, children, ...rest }: P & { children: React.ReactNode }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 32 32"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    {...rest}
+  >
+    <g transform="translate(16 16)">{children}</g>
+  </svg>
+);
+
+/** Soft same-hue fill for the depth layer — figure/ground without a 2nd colour. */
+const TINT = 0.15;
+
+// orchestration — a supervisor hub branching to three specialist nodes
+const DigiGraph = (p: P) => (
+  <Svg {...p}>
+    <path d="M0 -6 -9 8M0 -6 0 8M0 -6 9 8" />
+    <circle cx="0" cy="-6" r="5.4" fill="currentColor" fillOpacity={TINT} stroke="none" />
+    <circle cx="0" cy="-6" r="4.4" fill="currentColor" stroke="none" />
+    <circle cx="-9" cy="9" r="2.7" />
+    <circle cx="0" cy="9" r="2.7" />
+    <circle cx="9" cy="9" r="2.7" />
+  </Svg>
+);
+// quant — ascending candlesticks with wicks, the leader filled (research → order)
+const DigiQuant = (p: P) => (
+  <Svg {...p}>
+    <path d="M-9.5 0v13" />
+    <rect x="-12" y="3" width="5" height="9" rx="1.6" fill="currentColor" fillOpacity={TINT} />
+    <path d="M0 -7v19" />
+    <rect x="-2.5" y="-2" width="5" height="13" rx="1.6" fill="currentColor" fillOpacity={TINT} />
+    <path d="M9.5 -13v26" />
+    <rect x="7" y="-9" width="5" height="20" rx="1.6" fill="currentColor" stroke="none" />
+  </Svg>
+);
+// retrieval — a lens over a focal point (vector search)
+const DigiSearch = (p: P) => (
+  <Svg {...p}>
+    <circle cx="-3" cy="-3" r="9.5" fill="currentColor" fillOpacity={TINT} />
+    <path d="M4.5 4.5 12.5 12.5" />
+    <circle cx="-3" cy="-3" r="2.6" fill="currentColor" stroke="none" />
+  </Svg>
+);
+// chat — a terminal prompt: a chevron and a solid block cursor (no bubble)
+const DigiChat = (p: P) => (
+  <Svg {...p}>
+    <path d="M-9 -5.5 -2 0 -9 5.5" />
+    <rect x="2" y="-5" width="6.5" height="10" rx="1" fill="currentColor" stroke="none" />
+  </Svg>
+);
+// auth — a rounded key: soft-filled bow, notched shaft
+const DigiKey = (p: P) => (
+  <Svg {...p}>
+    <circle cx="-6" cy="-6" r="6" fill="currentColor" fillOpacity={TINT} />
+    <circle cx="-6" cy="-6" r="2.2" fill="currentColor" stroke="none" />
+    <path d="M-1.7 -1.7 11 11M6.5 6.5 10.5 2.5M9 9 13 5" />
+  </Svg>
+);
+// observability — a trace waterfall, the lead span filled
+const DigiTrace = (p: P) => (
+  <Svg {...p}>
+    <rect x="-13" y="-11" width="15" height="5" rx="2.5" fill="currentColor" stroke="none" />
+    <rect
+      x="-6"
+      y="-2.5"
+      width="19"
+      height="5"
+      rx="2.5"
+      fill="currentColor"
+      fillOpacity={TINT}
+    />
+    <rect x="-10" y="6" width="12" height="5" rx="2.5" fill="currentColor" fillOpacity={TINT} />
+  </Svg>
+);
+// runtime — a heartbeat sealed in a ring (always-on, on an interval)
+const DigiBot = (p: P) => (
+  <Svg {...p}>
+    <circle cx="0" cy="0" r="12" fill="currentColor" fillOpacity={TINT} />
+    <path d="M-8.5 0 -4 0 -1.5 -6 1.5 6 4 0 8.5 0" />
+  </Svg>
+);
+// library — stacked layers on a filled foundation (what everything builds on)
+const DigiBase = (p: P) => (
+  <Svg {...p}>
+    <rect x="-13" y="-11.5" width="26" height="5.2" rx="2" fill="currentColor" fillOpacity={TINT} />
+    <rect x="-13" y="-3.5" width="26" height="5.2" rx="2" fill="currentColor" fillOpacity={TINT} />
+    <rect x="-13" y="4.5" width="26" height="5.2" rx="2" fill="currentColor" stroke="none" />
+  </Svg>
+);
+// storage (roadmap) — a database cylinder with a soft-filled cap
+const DigiStore = (p: P) => (
+  <Svg {...p}>
+    <path
+      d="M-12 -9v18c0 2 5.4 3.5 12 3.5s12 -1.5 12 -3.5V-9"
+      fill="currentColor"
+      fillOpacity={TINT}
+    />
+    <ellipse cx="0" cy="-9" rx="12" ry="3.5" fill="currentColor" fillOpacity={TINT} />
+    <path d="M-12 0c0 2 5.4 3.5 12 3.5s12 -1.5 12 -3.5" />
+  </Svg>
+);
+// markdown vault — a closed folio with a clasp: notes bound and secured
+const DigiVault = (p: P) => (
+  <Svg {...p}>
+    <rect x="-10" y="-12" width="20" height="24" rx="3" fill="currentColor" fillOpacity={TINT} />
+    <path d="M-4 -12v24" />
+    <path d="M1 -5h5M1 1h5" />
+    <rect x="7" y="-3" width="6" height="6" rx="1.5" fill="currentColor" stroke="none" />
+  </Svg>
+);
+
+// link (roadmap) — two interlocking chain links, one tinted (protocol bridge)
+const DigiLink = (p: P) => (
+  <Svg {...p}>
+    <rect x="-13" y="-5.5" width="15" height="11" rx="5.5" fill="currentColor" fillOpacity={TINT} />
+    <rect x="-2" y="-5.5" width="15" height="11" rx="5.5" />
+  </Svg>
+);
+// research — research scheduler: a globe with meridian + equator
+const research = (p: P) => (
+  <Svg {...p}>
+    <circle cx="0" cy="0" r="12" fill="currentColor" fillOpacity={TINT} />
+    <path d="M0 -12a5 12 0 0 0 0 24a5 12 0 0 0 0 -24" />
+    <path d="M-12 0 12 0" />
+  </Svg>
+);
+// portfolio — signal messenger: a paper-plane send mark, filled
+const portfolio = (p: P) => (
+  <Svg {...p}>
+    <path
+      d="M13 -12 -12 -1 -1 3 3 12 13 -12z"
+      fill="currentColor"
+      fillOpacity={TINT}
+    />
+    <path d="M13 -12 -1 3" />
+    <circle cx="-1" cy="3" r="1.7" fill="currentColor" stroke="none" />
+  </Svg>
+);
+// execution — execution timing: a clock, one tick struck to mark the moment
+const execution = (p: P) => (
+  <Svg {...p}>
+    <circle cx="0" cy="0" r="12" fill="currentColor" fillOpacity={TINT} />
+    <path d="M0 -12 0 -9" stroke="currentColor" strokeWidth="2.6" />
+    <path d="M0 0 0 -6.5M0 0 4.5 2.5" />
+    <circle cx="0" cy="0" r="1.7" fill="currentColor" stroke="none" />
+  </Svg>
+);
+
+export const emblems: Record<string, (p: P) => React.ReactNode> = {
+  digigraph: DigiGraph, digiquant: DigiQuant, digisearch: DigiSearch, digichat: DigiChat,
+  digikey: DigiKey, digitrace: DigiTrace, digibot: DigiBot, digibase: DigiBase,
+  digivault: DigiVault,
+  digistore: DigiStore, digilink: DigiLink,
+  research: research, portfolio: portfolio, execution: execution,
+};
+
+export function Emblem({ id, size = 32, className }: { id: string; size?: number; className?: string }) {
+  const E = emblems[id];
+  if (!E) return null;
+  // Per-module accent (--accent-<id>, defined at :root in tokens.css), falling back
+  // to the page accent. The platform accent is neutralized on digithings.ai, but the
+  // per-module tokens keep their colour, so emblems carry the module's own hue.
+  return (
+    <span className={className} style={{ display: "inline-flex", color: `var(--accent-${id}, var(--accent))` }}>
+      {E({ size })}
+    </span>
+  );
+}

package/src/components/faviconTheme.ts

@@ -0,0 +1,23 @@
+/**
+ * Swap the tab icon to the painted theme.
+ *
+ * `prefers-color-scheme` on `<link rel="icon">` follows the OS, not the
+ * site's `data-theme`. An SVG favicon also cannot read the page's theme.
+ * This script runs after the theme init and again whenever `data-theme`
+ * changes, and it rewrites the icon links the document already has.
+ *
+ * Baked light and dark files are required: a favicon does not inherit
+ * `currentColor` from the page.
+ */
+
+export type FaviconThemePaths = {
+  dark: string;
+  light: string;
+  touchDark: string;
+  touchLight: string;
+};
+
+export function faviconThemeScript(paths: FaviconThemePaths): string {
+  const spec = JSON.stringify(paths);
+  return `try{var P=${spec};function applyFavicon(){var light=document.documentElement.getAttribute("data-theme")==="light";var icon=light?P.light:P.dark;var touch=light?P.touchLight:P.touchDark;document.querySelectorAll('link[rel="icon"],link[rel="shortcut icon"]').forEach(function(el){var type=el.getAttribute("type")||"";var href=el.getAttribute("href")||"";if(type==="image/svg+xml"||href.indexOf(".svg")!==-1){el.removeAttribute("media");el.setAttribute("href",icon);}});document.querySelectorAll('link[rel="apple-touch-icon"]').forEach(function(el){el.removeAttribute("media");el.setAttribute("href",touch);});}applyFavicon();new MutationObserver(applyFavicon).observe(document.documentElement,{attributes:true,attributeFilter:["data-theme"]});if(document.head){new MutationObserver(applyFavicon).observe(document.head,{childList:true});}}catch(e){}`;
+}

package/src/components/figure/Figure.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+
+/**
+ * Figure — the numbered `Fig N` figure grammar (D1, #4429): a `<figure>` whose
+ * content (a metric strip, a media block, a diagram) carries a mono
+ * `<figcaption>` that leads with `Fig <n>` in the accent tone. The opencode.ai
+ * language numbers its stat blocks this way, and both the landing metrics band
+ * and the quality page's counted figures use it.
+ *
+ * Generic on purpose: pass any content as `children`, the caption as `caption`,
+ * and the number/label as `n` (`1`, `2`, `"3a"` …). `n` is caller-controlled
+ * rather than auto-sequenced so a page can keep its own order explicit.
+ *
+ * Server component — no hooks, no state.
+ */
+export type FigureProps = {
+  /** The label rendered as `Fig <n>`. Caller-ordered. */
+  n: number | string;
+  /** The caption text after the `Fig <n>` label. */
+  caption: ReactNode;
+  /** The figure content — a stat strip, media block, diagram … */
+  children: ReactNode;
+  className?: string;
+};
+
+export function Figure({ n, caption, children, className }: FigureProps) {
+  return (
+    <figure className={cn("m-0 grid gap-[0.7rem]", className)}>
+      {children}
+      <figcaption className="font-mono text-[0.72rem] leading-[1.5] text-ink-mute">
+        <span className="text-accent">Fig {n}</span>
+        <span aria-hidden="true"> — </span>
+        {caption}
+      </figcaption>
+    </figure>
+  );
+}

package/src/components/figure/index.ts

@@ -0,0 +1,2 @@
+export { Figure } from "./Figure";
+export type { FigureProps } from "./Figure";

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

@@ -0,0 +1,76 @@
+"use client";
+
+/**
+ * DrawdownPlot — the underwater curve promoted from the design reference
+ * (finance/drawdown): percent below the running peak as a baseline series on
+ * TradingView Lightweight Charts, hanging under a zero baseline. It only
+ * ever reads negative, so it takes the `--down` money color — the depth and
+ * duration of the red is the risk story the CAGR hides. Re-themes live on
+ * `data-theme` flips.
+ *
+ * Data comes in via the required `data` prop (ISO-dated points, ascending,
+ * every value ≤ 0); `DRAWDOWN_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 { BaselineSeries, type BaselineData, type IChartApi } from "lightweight-charts";
+import {
+  toChartTime,
+  tokenAlpha,
+  useFinanceChart,
+  type FinanceChartPalette,
+  type FinanceSeriesPoint,
+} from "./chart-host";
+
+export type DrawdownPlotProps = {
+  /** Drawdown-% series (values ≤ 0), 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 DrawdownPlot({ data, className, label }: DrawdownPlotProps) {
+  const setup = useCallback(
+    (chart: IChartApi, p: FinanceChartPalette) => {
+      const series = chart.addSeries(BaselineSeries, {
+        baseValue: { type: "price", price: 0 },
+        topLineColor: "transparent",
+        topFillColor1: "transparent",
+        topFillColor2: "transparent",
+        bottomLineColor: p.down,
+        bottomFillColor1: tokenAlpha(p.down, 0.05),
+        bottomFillColor2: tokenAlpha(p.down, 0.32),
+        lineWidth: 2,
+        priceLineVisible: false,
+      });
+      series.setData(
+        data.map((pt): BaselineData => ({ time: toChartTime(pt.time), value: pt.value }))
+      );
+      return (next: FinanceChartPalette) => {
+        series.applyOptions({
+          bottomLineColor: next.down,
+          bottomFillColor1: tokenAlpha(next.down, 0.05),
+          bottomFillColor2: tokenAlpha(next.down, 0.32),
+        });
+      };
+    },
+    [data]
+  );
+
+  const hostRef = useFinanceChart(setup, "down");
+
+  return (
+    <div
+      ref={hostRef}
+      className={`h-full w-full${className ? ` ${className}` : ""}`}
+      {...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true })}
+    />
+  );
+}