69:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 74:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:"#ffffff" 54:["$","div","card-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0b0e15"}]]}] 55:["$","div","muted-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","muted-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#5a636b"}]]}] 56:["$","div","border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(0,0,0,0.08)"}}],["$","p",null,{"children":"rgba(0,0,0,0.08)"}]]}]}]]}] 57:["$","div","surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8fafc"}]]}] 58:["$","div","surface-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","surface-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fcfdfe"}]]}] 59:["$","div","panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5a:["$","div","card-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5b:["$","div","card-shadow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-shadow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(0, 0, 0, 0.22)"}}],["$","p",null,{"children":"rgba(0, 0, 0, 0.22)"}]]}]}]]}] 5c:["$","div","chart-1",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-1",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2b7fd6"}]]}] 5d:["$","div","chart-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2f9e70"}]]}] 5e:["$","div","chart-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#a85f3b"}]]}] 5f:["$","div","chart-4",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-4",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9a9d00"}]]}] 60:["$","div","chart-5",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-5",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9c5ba6"}]]}] 61:["$","div","chart-up",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-up",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#1a9e6a"}]]}] 62:["$","div","chart-down",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-down",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d0433f"}]]}] 63:["$","div","chart-amber",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-amber",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b8862f"}]]}] 64:["$","$L69",null,{"orientation":"horizontal"}] 65:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","background",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","background",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#000000"}]]}],["$","div","foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","card",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080b12"}]]}],["$","div","card-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","muted-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","muted-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#868f97"}]]}],["$","div","border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(255,255,255,0.05)"}}],["$","p",null,{"children":"rgba(255,255,255,0.05)"}]]}]}]]}],["$","div","surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0a0e16"}]]}],["$","div","surface-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","surface-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#070a12"}]]}],["$","div","panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0e121b"}]]}],["$","div","card-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#10141e"}]]}],["$","div","card-shadow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-shadow",":"]}]}],"$L6a"]}],"$L6b","$L6c","$L6d","$L6e","$L6f","$L70","$L71","$L72"]}],"$L73"]}]}]]}] 66:null 67:null 75:T3f7c,"use client" import { useMemo, useRef, useState } from "react" import { useInView, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" import { useWidth } from "@/components/ui/use-width" import { AxisTag, ChartCard } from "@/components/ui/chart-overlay" /* Candlestick, in the trading terminal's chart language (user call, 2026-10-02: "fix the candlestick chart to be similar to the one on the trading terminal"). The version before this one is in git history. What it took from the terminal's price pane: · many thin candles, the wick a 1px line, the body ~62% of a slot; direction is the only hue · solid faint gridlines with dollar figures on the right · a dashed guide at the last close, across the whole plot · the crosshair: a rule on the candle, a dashed rule on its close, a dot where they meet, the close as an outlined tag on the axis, and a card beside the cursor reading the bar's time, open, high, low, close and change · a volume pane under its own hairline, the same hue at 0.6 · dates along the foot The header reads the last close and the move across the whole run. 2026-10-02: the header looked weird (symbol, price, move and a "15d" all on one small line), so it now has the library's three tiers like Market Snapshot (spec 14.1): the company name at /45 with the symbol on the right, the last close as the headline with its cents at /35, then the run's move in its hue and the window at /45. A new `name` prop carries the company name. 2026-10-02 audit: the sample company is now Alphabet (GOOGL), because NVIDIA and NVDA read the same at both ends of the label row (his call). The last close guide is named on the axis as plain 9px text (the close at /90, "Last" at /45) and steps aside under the pointed tag, the price ticks are 9px like the dates, and the card gains a Volume row so the volume pane is readable; a new `volumeUnit` prop says how many shares one unit of `v` stands for. Formulas: · change on a bar = (close − open) ÷ open × 100 · move across the run = last close − first open, and ÷ first open × 100 · volume bar height = volume ÷ the run's largest volume × the pane's height · volume in the card = v × volumeUnit shares Motion (2026-10-01, kept): once the chart first comes into view every candle rises out of its own middle and every volume bar grows off the floor, left to right under one 380ms stagger. CSS transitions on transform. Reduced motion draws the end state. */ const EASE_CSS = "cubic-bezier(0.16, 1, 0.3, 1)" const UP = "var(--chart-up)" const DOWN = "var(--chart-candle-down, var(--chart-down))" export interface Candle { o: number h: number l: number c: number /** relative volume, 0..1.5 */ v: number } /** Deterministic walk so every render agrees (LCG, one seed): a slow climb with pullbacks. */ const DEFAULT_CANDLES: Candle[] = (() => { let s = 20260729 const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff return s / 0x7fffffff } const out: Candle[] = [] let close = 168 for (let i = 0; i < 90; i++) { const o = close const move = (rnd() - 0.44) * 1.9 const c = o + move const h = Math.max(o, c) + rnd() * 0.9 const l = Math.min(o, c) - rnd() * 0.9 const v = 0.35 + rnd() * 0.8 + Math.abs(move) * 0.18 out.push({ o, h, l, c, v }) close = c } return out })() /** the price axis on the right, the date row under the volume pane */ const AXIS_W = 52 const DATE_H = 20 const GAP = 10 const PRICE_TOP = 8 /** how many dates along the foot */ const DATES = 5 /** shares, compact: 18.4M */ const shares = (v: number) => v >= 1e9 ? `${(v / 1e9).toFixed(2)}B` : v >= 1e6 ? `${(v / 1e6).toFixed(1)}M` : v >= 1e3 ? `${(v / 1e3).toFixed(1)}K` : `${Math.round(v)}` const usd = (v: number) => `$${v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` const axisUsd = (v: number) => `$${Math.round(v).toLocaleString("en-US")}` const day = (t: number) => new Date(t).toLocaleDateString("en-GB", { day: "numeric", month: "short", timeZone: "UTC" }) const stamp = (t: number) => `${new Date(t).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" })} ${new Date(t).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", timeZone: "UTC" })} UTC` /** * Candles over a volume pane that share one x. The crosshair snaps to the candle under the * pointer, keeps it full and dims the rest, tags its close on the axis and reads the bar in a * card beside the cursor. Green up, red down. */ export function Candlestick({ name = "Alphabet", symbol = "GOOGL", candles = DEFAULT_CANDLES, start = Date.UTC(2026, 4, 12), interval = 4 * 3600_000, volumeUnit = 20_000_000, markers = [], height = 300, className, }: { /** the chart's height in px (2026-10-06); the volume pane keeps its share */ height?: number /** signals on the bars (2026-10-06): a buy sits under its bar's low, a sell over its high */ markers?: { at: number; side: "buy" | "sell" }[] /** the company or market's name, read in the header's label row */ name?: string symbol?: string /** open, high, low, close and a relative volume per bar */ candles?: Candle[] /** the first bar's open time, ms since epoch (UTC) */ start?: number /** one bar's length, ms */ interval?: number /** shares one unit of a candle's `v` stands for; the card reads v × volumeUnit */ volumeUnit?: number className?: string }) { // laid out at the width it is given (2026-10-06), so the text keeps its size const [boxRef, W] = useWidth(560) // the default width, as before const PLOT_W = W - AXIS_W const H = height const VOL_H = Math.round(H * 0.18) const PRICE_BOT = H - DATE_H - VOL_H - GAP const VOL_BOT = H - DATE_H const reduced = useReducedMotion() ?? false const svgRef = useRef(null) const seen = useInView(svgRef, { once: true, amount: 0.3 }) const shown = seen || reduced const [hi, setHi] = useState(null) const n = candles.length const { pMin, pMax, vMax, ticks } = useMemo(() => { let lo = Number.POSITIVE_INFINITY let top = Number.NEGATIVE_INFINITY let vm = 0 for (const d of candles) { lo = Math.min(lo, d.l) top = Math.max(top, d.h) vm = Math.max(vm, d.v) } const pad = (top - lo) * 0.06 || 1 const a = lo - pad const b = top + pad return { pMin: a, pMax: b, vMax: vm || 1, ticks: [0.1, 0.37, 0.63, 0.9].map((f) => b - f * (b - a)) } }, [candles]) const step = PLOT_W / Math.max(1, n) const bodyW = Math.max(1, Math.min(9, step * 0.62)) const cx = (i: number) => (i + 0.5) * step const yP = (v: number) => PRICE_TOP + (1 - (v - pMin) / (pMax - pMin || 1)) * (PRICE_BOT - PRICE_TOP) const yV = (v: number) => VOL_BOT - (v / vMax) * (VOL_H - 4) const time = (i: number) => start + i * interval const onMove = (e: React.PointerEvent) => { const el = svgRef.current if (!el || n === 0) return const r = el.getBoundingClientRect() const px = ((e.clientX - r.left) / r.width) * W setHi(px > PLOT_W ? n - 1 : Math.max(0, Math.min(n - 1, Math.floor(px / step)))) } const first = candles[0] ?? { o: 0, h: 0, l: 0, c: 0, v: 0 } const last = candles[n - 1] ?? first const runMove = last.c - first.o const runPct = first.o ? (runMove / first.o) * 100 : 0 const runUp = runMove >= 0 const active = hi !== null ? candles[hi] : null const up = active ? active.c >= active.o : runUp const hue = up ? UP : DOWN const barPct = active && active.o ? ((active.c - active.o) / active.o) * 100 : 0 const sign = (v: number) => (v >= 0 ? "+" : "−") const tagY = active ? Math.max(PRICE_TOP + 8, Math.min(PRICE_BOT - 8, yP(active.c))) : 0 const fade = reduced ? "none" : "opacity 160ms" /* the entrance: every candle rises from its own middle, the whole run under 380ms */ const stagger = Math.min(0.02, 0.38 / Math.max(1, n)) const grow = (i: number) => (reduced ? "none" : `transform 0.45s ${EASE_CSS} ${(i * stagger).toFixed(3)}s, opacity 0.45s ${EASE_CSS} ${(i * stagger).toFixed(3)}s`) const dates = Array.from({ length: DATES }, (_, k) => Math.round((k / (DATES - 1)) * (n - 1))) /* the card sits right of the cursor, and flips left past 60% of the plot */ const flip = hi !== null && cx(hi) > PLOT_W * 0.6 const [closeWhole, closeCents] = usd(last.c).split(".") const windowDays = Math.round((n * interval) / 86_400_000) /* the last close, named on the axis; it and any tick under it step aside for the pointed tag */ const lastY = yP(last.c) const lastHidden = active !== null && Math.abs(lastY - tagY) < 13 return (

{/* the header, three tiers (spec 14.1): name and symbol, the last close, then the run's move and its window */}

{name} {symbol}

{closeWhole} .{closeCents}

{sign(runMove)} {usd(Math.abs(runMove))} · {sign(runPct)} {Math.abs(runPct).toFixed(1)}% {windowDays === 1 ? "1 day" : `${windowDays} days`}

{/* the bar under the cursor, read out beside it (chart-overlay.tsx) */}

) } 76:T1404,"use client" import { type ReactNode } from "react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" /* Chart overlay: the two parts every library chart reads a point with (2026-10-02). They came out of Candlestick, Volume Profile, the trading terminal and Price Scrubber, which had each drawn their own; this is the one copy. Shipped beside the charts that use it. AxisTag the outlined tag on the value axis: the pointed value in its hue, or a named reference (POC, last close) in ink. A pill 16px high, 8.5px figures. ChartCard the card laid over the chart beside the cursor: a heading row (a time or a range) at /60, then label and value rows (labels 10px /60, values 11px /90), the one signed figure in its hue. It glides between points on a spring, fades in from 0.97 and out in 120ms, and flips to the cursor's left when told to. 2026-10-02: the card looked out of place over the charts, so it now wears the library popover, the same as the sidebar's hover card: a hairline border at 8%, radius 12, the 6% foreground mix and the popover shadow with no inset highlight (spec 14.6). */ const EASE = [0.16, 1, 0.3, 1] as const const GLIDE = { type: "spring", stiffness: 520, damping: 40 } as const /** the outlined tag on a chart's value axis, centred on `y` */ export function AxisTag({ x, y, width, color = "var(--foreground)", strong = true, hidden = false, children, }: { /** the tag's left edge, in the chart's own units */ x: number /** the value's line; the tag is centred on it */ y: number width: number /** stroke and figure; ink for a named reference, the series hue for the pointed value */ color?: string /** a quieter tag (a secondary reference) drops the weight and the stroke */ strong?: boolean /** fades the tag out, for when the pointed value sits on it */ hidden?: boolean children: ReactNode }) { return ( ) } export interface ChartCardRow { label: string value: ReactNode /** only the one signed figure carries a hue */ color?: string } /** the readout card over a chart; place it inside a `relative` box that holds the svg */ export function ChartCard({ open, x, y = 4, flip = false, width = 148, heading, rows, footer, }: { open: boolean /** the cursor's x inside the box: px, or a percentage string for a chart drawn to a viewBox */ x: number | string /** the card's top inside the box, px */ y?: number /** put the card on the cursor's left (past ~60% of the plot) */ flip?: boolean width?: number heading: ReactNode rows: ChartCardRow[] /** a closing line under the rows, such as where the point sits */ footer?: ReactNode }) { const reduced = useReducedMotion() return ( {open && (

{heading}

{rows.map((r) => (

{r.label} {r.value}

))}

{footer &&

{footer}

} )} ) } 68:["$","$L74",null,{"files":[{"path":"components/ui/candlestick.tsx","content":"$75","type":"registry:ui","target":"components/ui/candlestick.tsx"},{"path":"components/ui/use-width.ts","content":"\"use client\";\n\n// The width a chart is given (2026-10-06, the Tradeboard case study). The charts used to lay\n// out in a fixed box and stretch as a picture in a wider column, so their text grew with it;\n// measured, they lay out at the real width and the text keeps its size. A chart left at its\n// default class measures its own default width, so nothing changes where it is not stretched.\nimport { useEffect, useRef, useState } from \"react\";\n\nexport function useWidth(fallback: number, min = 280) {\n const ref = useRef(null);\n const [w, setW] = useState(fallback);\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const ro = new ResizeObserver(([e]) => setW(Math.max(min, Math.round(e.contentRect.width)) || fallback));\n ro.observe(el);\n return () => ro.disconnect();\n }, [fallback, min]);\n return [ref, w] as const;\n}\n","type":"registry:ui","target":"components/ui/use-width.ts"},{"path":"components/ui/chart-overlay.tsx","content":"$76","type":"registry:ui","target":"components/ui/chart-overlay.tsx"}],"className":"h-[70svh] min-h-80"}]