62:I[707087,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"RegistryDependencies"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T1177,import { bands, linear, niceScale, type Domain } from "../chart-core/scales"; import type { TickStream } from "./stream"; /** One OHLC bar. `t` is the bucket's start, epoch ms. */ export type Candle = { t: number; open: number; high: number; low: number; close: number; volume?: number }; /** Buckets timestamped prices into candles (`bucketMs` wide, aligned to multiples of it). */ export function toCandles(points: readonly { t: number; value: number; volume?: number }[], bucketMs: number): Candle[] { const out: Candle[] = []; for (const p of points) { const t = Math.floor(p.t / bucketMs) * bucketMs; const last = out[out.length - 1]; if (last && last.t === t) { last.high = Math.max(last.high, p.value); last.low = Math.min(last.low, p.value); last.close = p.value; if (p.volume !== undefined) last.volume = (last.volume ?? 0) + p.volume; } else { out.push({ t, open: last?.close ?? p.value, high: p.value, low: p.value, close: p.value, volume: p.volume }); // A gap-free chart: the new candle opens at the previous close and spans it. const c = out[out.length - 1]; c.high = Math.max(c.high, c.open); c.low = Math.min(c.low, c.open); } } return out; } /** * `count` candles from one stream series, each built from `ticksPerCandle` ticks and ending at * tick `end`. Deterministic, so the same chart renders on the server and the client. */ export function candlesFromStream(stream: TickStream, id: string, { end, count, ticksPerCandle = 12 }: { end: number; count: number; ticksPerCandle?: number }): Candle[] { const first = Math.max(0, end - count * ticksPerCandle + 1); const ticks = stream.window(end, end - first + 1); const bucketMs = stream.intervalMs * ticksPerCandle; return toCandles( ticks.map((t) => ({ t: t.t, value: t.values[id] })), bucketMs, ).slice(-count); } /** * Folds a live price into the candles: it updates the last candle while `t` is inside its * bucket and opens a new one when it isn't, keeping at most `max`. Immutable. */ export function pushPrice(candles: readonly Candle[], price: number, t: number, bucketMs: number, max = Infinity): Candle[] { const bucket = Math.floor(t / bucketMs) * bucketMs; const last = candles[candles.length - 1]; if (last && last.t === bucket) { const next = { ...last, high: Math.max(last.high, price), low: Math.min(last.low, price), close: price }; return [...candles.slice(0, -1), next]; } const open = last?.close ?? price; const out = [...candles, { t: bucket, open, high: Math.max(open, price), low: Math.min(open, price), close: price }]; return out.length > max ? out.slice(out.length - max) : out; } /** A clean price domain and gridlines for candles (chart-core `niceScale`, zero dropped). */ export function candleScale(candles: readonly Candle[], { ticks = 4 }: { ticks?: number } = {}) { return niceScale( candles.flatMap((c) => [c.low, c.high]), { zero: false, ticks }, ); } export type CandleShape = { candle: Candle; /** Up (close ≥ open) or down. */ up: boolean; /** Centre x of the candle. */ x: number; /** Body: top y and height (at least 1px, so a doji still shows). */ bodyY: number; bodyHeight: number; /** The open's y: grow a body from here for the "candles grow from their open" entrance. */ openY: number; /** Wick top (high) and bottom (low). */ wickTop: number; wickBottom: number; }; /** * Pixel geometry for candles in a `width × height` plot, on chart-core's `bands` (bodies capped * at `maxBar` px with air between) and `linear` y. Pass the `domain` you are springing to so * the candles and gridlines move together. */ export function candleLayout( candles: readonly Candle[], { width, height, domain = candleScale(candles).domain, maxBar = 12 }: { width: number; height: number; domain?: Domain; maxBar?: number }, ) { const b = bands(candles.length, width, { maxBar, gap: 0.36 }); const y = linear(domain, [height, 0]); const shapes: CandleShape[] = candles.map((c, i) => { const up = c.close >= c.open; const top = y(Math.max(c.open, c.close)); const bottom = y(Math.min(c.open, c.close)); return { candle: c, up, x: b.center(i), bodyY: top, bodyHeight: Math.max(1, bottom - top), openY: y(c.open), wickTop: y(c.high), wickBottom: y(c.low), }; }); return { shapes, bar: b.bar, band: b.band, y, domain }; } 65:T108e,"use client"; import { useInView } from "motion/react"; import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type RefObject } from "react"; import { useSafeReducedMotion } from "../../lib/motion"; export type ClockOptions = { /** Ms between ticks. Default 1000. */ intervalMs?: number; /** Controlled pause (a pause button's state). Leave it out to use the returned `pause`/`resume`. */ paused?: boolean; /** Uncontrolled initial pause. Default false. */ defaultPaused?: boolean; /** * What `prefers-reduced-motion` does: `slow` ticks 4× less often (values still update, so the * data stays live, but far less flashes), `pause` waits for an explicit `resume`, `none` * ignores it. Default `slow`. */ reducedMotion?: "slow" | "pause" | "none"; /** Pause while this element is off screen (rule 85). */ target?: RefObject; /** Stop for good after this many ticks: a scripted replay that ends. */ maxTicks?: number; }; export type Clock = { /** Ticks elapsed since mount: 0 on the server and the first client render. */ tick: number; /** True while ticks are being emitted. */ running: boolean; /** Why it isn't running, if it isn't. */ reason: "paused" | "hidden" | "offscreen" | "reduced" | "ended" | null; /** The user paused it (controlled or not). */ paused: boolean; pause(): void; resume(): void; toggle(): void; /** Back to tick 0. */ reset(): void; /** `prefers-reduced-motion`, read after hydration: skip flashes and rolls when true. */ reduced: boolean; /** The interval actually in use (slowed under reduced motion). */ intervalMs: number; }; const subscribeVisibility = (onChange: () => void) => { document.addEventListener("visibilitychange", onChange); return () => document.removeEventListener("visibilitychange", onChange); }; const useDocumentVisible = () => useSyncExternalStore(subscribeVisibility, () => document.visibilityState !== "hidden", () => true); /** * A pausable tick counter for live data. It stops in a hidden tab and, given a `target`, while * that element is off screen; under reduced motion it slows (or pauses, if asked). It is a * counter, not a timestamp, so a seeded stream at `tick` renders the same on every machine. * * const clock = useClock({ intervalMs: 1200, target: ref }); * */ export function useClock({ intervalMs = 1000, paused: pausedProp, defaultPaused = false, reducedMotion = "slow", target, maxTicks, }: ClockOptions = {}): Clock { const reduced = useSafeReducedMotion(); const visible = useDocumentVisible(); const none = useRef(null); const inView = useInView(target ?? none, { initial: !target }); const [pausedState, setPaused] = useState(defaultPaused); // Reduced-motion "pause" holds until the user resumes once. const [reducedResumed, setReducedResumed] = useState(false); const [tick, setTick] = useState(0); const paused = pausedProp ?? pausedState; const ended = maxTicks !== undefined && tick >= maxTicks; const reducedHold = reduced && reducedMotion === "pause" && !reducedResumed; const reason: Clock["reason"] = paused ? "paused" : ended ? "ended" : !visible ? "hidden" : target && !inView ? "offscreen" : reducedHold ? "reduced" : null; const running = reason === null; const interval = reduced && reducedMotion === "slow" ? intervalMs * 4 : intervalMs; useEffect(() => { if (!running) return; const id = window.setInterval(() => { setTick((t) => (maxTicks !== undefined && t >= maxTicks ? t : t + 1)); }, interval); return () => clearInterval(id); }, [running, interval, maxTicks]); const pause = useCallback(() => setPaused(true), []); const resume = useCallback(() => { setPaused(false); setReducedResumed(true); }, []); const toggle = useCallback(() => { setPaused((p) => !p); setReducedResumed(true); }, []); const reset = useCallback(() => setTick(0), []); return { tick, running, reason, paused, pause, resume, toggle, reset, reduced, intervalMs: interval }; } 66:Te57,"use client"; import { useEffect, useRef, useState } from "react"; export type FlashDirection = "up" | "down"; /** How long a changed cell stays washed: 0.9s, long enough to catch, short enough not to pile up. */ export const FLASH_MS = 900; /** `up`, `down`, or null when the change is within `epsilon` (or there is no previous value). */ export function flashDirection(prev: number | undefined, next: number, epsilon = 0): FlashDirection | null { if (prev === undefined || !Number.isFinite(prev) || !Number.isFinite(next)) return null; if (next - prev > epsilon) return "up"; if (prev - next > epsilon) return "down"; return null; } export type Flash = { /** The direction of the latest change while it is washing, else null. */ direction: FlashDirection | null; /** Increments on every change: key a one-shot wash element by it to restart the wash. */ key: number; }; type FlashState = { values: Record; flashes: Record }; /** * Flash-on-change for many cells at once (an FX board, an order book): each id reports `up` or * `down` for `duration` ms after its value changes, then null. The first render reports * nothing, so a board doesn't flash on mount. Colour only: pair it with `bg-success-subtle` / * `bg-danger-subtle` on a background-colour transition, which reduced motion may keep. * * const flashes = useFlashMap(Object.fromEntries(rows.map((r) => [r.id, r.price]))); * */ export function useFlashMap(values: Record, { duration = FLASH_MS, epsilon = 0 } = {}): Record { const [state, setState] = useState(() => ({ values, flashes: {} })); // Adjust state while rendering when the inputs change (React's documented pattern), so the // wash starts on the same frame as the new value, not one effect later. let changed: Record | null = null; for (const id in values) { const dir = flashDirection(state.values[id], values[id], epsilon); if (dir || state.values[id] !== values[id]) { changed ??= { ...state.flashes }; if (dir) changed[id] = { direction: dir, key: (state.flashes[id]?.key ?? 0) + 1 }; } } if (changed) setState({ values, flashes: changed }); const flashes = changed ?? state.flashes; const signature = Object.entries(flashes) .filter(([, f]) => f.direction) .map(([id, f]) => `${id}:${f.key}`) .join("|"); // One timer per wash, so each cell clears `duration` after its own change. const timers = useRef(new Map()); useEffect(() => { if (!signature) return; for (const part of signature.split("|")) { const cut = part.lastIndexOf(":"); const id = part.slice(0, cut); const key = Number(part.slice(cut + 1)); const scheduled = `${id}:${key}`; if (timers.current.has(scheduled)) continue; const timer = window.setTimeout(() => { timers.current.delete(scheduled); setState((s) => s.flashes[id]?.key === key ? { ...s, flashes: { ...s.flashes, [id]: { direction: null, key } } } : s, ); }, duration); timers.current.set(scheduled, timer); } }, [signature, duration]); useEffect(() => { const map = timers.current; return () => { for (const t of map.values()) clearTimeout(t); map.clear(); }; }, []); return flashes; } /** Flash-on-change for one value. */ export function useFlash(value: number, options?: { duration?: number; epsilon?: number }): Flash { const flashes = useFlashMap({ v: value }, options); return flashes.v ?? { direction: null, key: 0 }; } 67:T132b,import { createRng, roundTo, seedFrom } from "./rng"; export type BookLevel = { price: number; size: number }; /** Bids best (highest) first, asks best (lowest) first. */ export type OrderBook = { bids: BookLevel[]; asks: BookLevel[] }; export type DepthLevel = BookLevel & { /** Cumulative size from the best price out to this level. */ total: number; /** `total` over the larger side's deepest total, 0–1: the depth bar's width. */ share: number; /** The level's size changed since the previous book (see `depth(book, { previous })`). */ changed: boolean; }; export type Depth = { bids: DepthLevel[]; asks: DepthLevel[]; /** Midpoint of the best bid and ask. */ mid: number; spread: number; /** Spread in basis points of the mid. */ spreadBps: number; maxTotal: number; }; const levelKey = (l: BookLevel) => l.price.toFixed(10); /** * The depth model for an order book: cumulative totals, bar shares on one scale for both sides * (so the sides compare), the spread, and which levels changed since `previous`. */ export function depth(book: OrderBook, { levels = 12, previous }: { levels?: number; previous?: OrderBook } = {}): Depth { const prev = new Map(); if (previous) for (const l of [...previous.bids, ...previous.asks]) prev.set(levelKey(l), l.size); const side = (ls: BookLevel[]) => { let total = 0; return ls.slice(0, levels).map((l) => { total += l.size; const before = prev.get(levelKey(l)); return { ...l, total, share: 0, changed: previous !== undefined && before !== l.size }; }); }; const bids = side(book.bids); const asks = side(book.asks); const maxTotal = Math.max(bids[bids.length - 1]?.total ?? 0, asks[asks.length - 1]?.total ?? 0) || 1; for (const l of [...bids, ...asks]) l.share = l.total / maxTotal; const bestBid = bids[0]?.price ?? 0; const bestAsk = asks[0]?.price ?? bestBid; const mid = (bestBid + bestAsk) / 2; const spread = bestAsk - bestBid; return { bids, asks, mid, spread, spreadBps: mid ? (spread / mid) * 10_000 : 0, maxTotal }; } /** Cumulative depth curves (price, total) for a depth chart, each side from the spread outwards. */ export function depthCurve(d: Depth) { return { bids: d.bids.map((l) => [l.price, l.total] as const), asks: d.asks.map((l) => [l.price, l.total] as const), }; } export type SyntheticBookOptions = { seed: number | string; /** The mid price, e.g. from a `TickStream` tick. */ mid: number; /** The book's tick index: consecutive indexes change only some levels. */ index: number; /** Price increment. Default 0.01. */ tickSize?: number; /** Levels per side. Default 14. */ levels?: number; /** Typical size of a level near the spread. Default 1.5. */ baseSize?: number; /** Size decimals. Default 4. */ sizeDecimals?: number; /** Share of levels that change per tick. Default 0.3. */ churn?: number; }; /** * A believable, deterministic order book around `mid`: sizes grow away from the spread with a * few walls, the spread breathes between one and three ticks, and from one `index` to the next * only about `churn` of the levels change, so flash-on-change reads like a real feed. */ export function syntheticBook({ seed, mid, index, tickSize = 0.01, levels = 14, baseSize = 1.5, sizeDecimals = 4, churn = 0.3 }: SyntheticBookOptions): OrderBook { const base = seedFrom(String(seed)); const decimals = (String(tickSize).split(".")[1] ?? "").length; const changedAt = (side: number, level: number, i: number) => createRng(base ^ seedFrom(`${side}/${level}/${i}`)).next() < churn; // The last index ≤ `index` at which this level changed (geometric, so a short walk back). const lastChange = (side: number, level: number) => { for (let i = index, n = 0; i > 0 && n < 48; i--, n++) if (changedAt(side, level, i)) return i; return 0; }; const sizeOf = (side: number, level: number) => { const r = createRng(base ^ seedFrom(`size/${side}/${level}/${lastChange(side, level)}`)); const shape = 1 + level * 0.22; const wall = r.chance(0.08) ? r.range(2.5, 4) : 1; return roundTo(baseSize * shape * wall * r.range(0.35, 1.65), sizeDecimals); }; // The spread re-rolls every few ticks, not every tick, so the price levels hold still between. const halfSpread = ((1 + createRng(base ^ seedFrom(`spread/${Math.floor(index / 6)}`)).int(0, 2)) * tickSize) / 2; const bestBid = Math.floor((mid - halfSpread) / tickSize) * tickSize; const bestAsk = Math.max(bestBid + tickSize, Math.ceil((mid + halfSpread) / tickSize) * tickSize); const bids: BookLevel[] = []; const asks: BookLevel[] = []; for (let l = 0; l < levels; l++) { bids.push({ price: roundTo(bestBid - l * tickSize, decimals), size: sizeOf(0, l) }); asks.push({ price: roundTo(bestAsk + l * tickSize, decimals), size: sizeOf(1, l) }); } return { bids, asks }; } 68:T974,/** * A small seeded RNG (mulberry32). Same seed, same sequence, on the server and in every * browser, so seeded demos hydrate without a mismatch and look the same in every screenshot. */ export type Rng = { /** Uniform in [0, 1). */ next(): number; /** Uniform in [min, max). */ range(min: number, max: number): number; /** Integer in [min, max], both inclusive. */ int(min: number, max: number): number; /** Standard normal (mean 0, sd 1), Box–Muller. */ normal(): number; /** True with probability `p`. */ chance(p: number): boolean; /** One item of a non-empty list. */ pick(items: readonly T[]): T; /** A shuffled copy (Fisher–Yates). */ shuffle(items: readonly T[]): T[]; /** The internal state, to resume a stream later with `createRng(state)`. */ state(): number; }; /** A 32-bit seed from any string (FNV-1a), so seeds can be readable: `seedFrom("crypto/BTC")`. */ export function seedFrom(text: string): number { let h = 0x811c9dc5; for (let i = 0; i < text.length; i++) { h ^= text.charCodeAt(i); h = Math.imul(h, 0x01000193); } return h >>> 0; } /** A seeded generator. `seed` is a number or a string (hashed with `seedFrom`). */ export function createRng(seed: number | string): Rng { let s = (typeof seed === "string" ? seedFrom(seed) : seed) >>> 0; const next = () => { s = (s + 0x6d2b79f5) >>> 0; let t = s; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const rng: Rng = { next, range: (min, max) => min + (max - min) * next(), int: (min, max) => Math.floor(min + (max - min + 1) * next()), normal: () => { const u = 1 - next(); const v = next(); return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v); }, chance: (p) => next() < p, pick: (items) => items[Math.floor(next() * items.length)], shuffle: (items) => { const out = [...items]; for (let i = out.length - 1; i > 0; i--) { const j = Math.floor(next() * (i + 1)); [out[i], out[j]] = [out[j], out[i]]; } return out; }, state: () => s, }; return rng; } /** Rounds to `decimals` places without float noise (0.1 + 0.2 → 0.3). */ export function roundTo(value: number, decimals: number): number { const k = 10 ** decimals; return Math.round(value * k) / k; } 69:T148d,import { createRng, roundTo, type Rng } from "./rng"; /** One value the stream moves: a price, a rate, a level such as heart rate or requests/s. */ export type SeriesSpec = { id: string; /** Value at tick 0, and what `meanRevert` pulls back towards. */ initial: number; /** * `price` walks multiplicatively (log-normal, never below 0): FX, stocks, tokens. * `level` walks additively around `initial`: heart rate, latency, queue depth. Default `price`. */ kind?: "price" | "level"; /** Per-tick standard deviation as a share of the value (price) or of `initial` (level). Default 0.001 price (≈ 0.1% a tick), 0.02 level. */ volatility?: number; /** Per-tick drift as a share (price) or in units (level). Default 0. */ drift?: number; /** 0–1, how hard each tick pulls back to `initial`. Default 0.004 price, 0.08 level. */ meanRevert?: number; /** Places the emitted values are rounded to. Default 2. */ decimals?: number; /** Clamp. */ min?: number; max?: number; }; export type Tick = { /** 0, 1, 2 …: the tick's position in the stream. */ index: number; /** Epoch ms of the tick: `start + index × intervalMs`. */ t: number; /** Each series' value at this tick, rounded to its `decimals`. */ values: Record; }; export type TickStreamOptions = { /** Same seed, same stream, everywhere. */ seed: number | string; series: readonly SeriesSpec[]; /** Spacing of tick timestamps. Default 1000. */ intervalMs?: number; /** Epoch ms of tick 0. Default 18 Oct 2026 14:30 UTC, so output never depends on the clock. */ start?: number; }; export type TickStream = { readonly series: readonly SeriesSpec[]; readonly intervalMs: number; readonly start: number; /** The tick at `index` (random access; walked once, then cached). */ at(index: number): Tick; /** `count` ticks ending at `end` (inclusive), oldest first; clipped at tick 0. */ window(end: number, count: number): Tick[]; /** One series' values over a window, oldest first: feed it to a Sparkline or Line Chart. */ values(id: string, end: number, count: number): number[]; }; /** 18 Oct 2026 14:30 UTC: the fixed "now" every Eased fixture and stream is anchored to. */ export const STREAM_EPOCH = Date.UTC(2026, 9, 18, 14, 30); type Walker = { spec: Required> & Pick; rng: Rng; raw: number[] }; /** * A deterministic, seeded tick stream: prices, rates or metrics as random walks that hydrate * identically and replay the same every time. Each series has its own generator * (`seed/id`), so adding a series never changes the others. * * const fx = createTickStream({ seed: "fx", series: [{ id: "EURUSD", initial: 1.0842, decimals: 4 }] }); * fx.at(120).values.EURUSD; // 1.0857, always */ export function createTickStream({ seed, series, intervalMs = 1000, start = STREAM_EPOCH }: TickStreamOptions): TickStream { const walkers: Walker[] = series.map((s) => { const kind = s.kind ?? "price"; return { spec: { id: s.id, initial: s.initial, kind, volatility: s.volatility ?? (kind === "price" ? 0.001 : 0.02), drift: s.drift ?? 0, meanRevert: s.meanRevert ?? (kind === "price" ? 0.004 : 0.08), decimals: s.decimals ?? 2, min: s.min, max: s.max, }, rng: createRng(`${seed}/${s.id}`), raw: [s.initial], }; }); const cache = new Map(); const rawAt = (w: Walker, index: number) => { const { spec, rng, raw } = w; while (raw.length <= index) { const v = raw[raw.length - 1]; const z = rng.normal(); let next = spec.kind === "price" ? v * Math.exp(spec.drift + spec.volatility * z) + spec.meanRevert * (spec.initial - v) : v + spec.drift + spec.volatility * spec.initial * z + spec.meanRevert * (spec.initial - v); if (spec.kind === "price") next = Math.max(next, spec.initial * 1e-3); if (spec.min !== undefined) next = Math.max(spec.min, next); if (spec.max !== undefined) next = Math.min(spec.max, next); raw.push(next); } return raw[index]; }; const at = (index: number): Tick => { const i = Math.max(0, Math.floor(index)); const hit = cache.get(i); if (hit) return hit; const values: Record = {}; for (const w of walkers) values[w.spec.id] = roundTo(rawAt(w, i), w.spec.decimals); const tick = { index: i, t: start + i * intervalMs, values }; if (cache.size > 4096) cache.clear(); cache.set(i, tick); return tick; }; const slice = (end: number, count: number) => { const out: Tick[] = []; for (let i = Math.max(0, end - count + 1); i <= end; i++) out.push(at(i)); return out; }; return { series, intervalMs, start, at, window: slice, values: (id, end, count) => slice(end, count).map((t) => t.values[id]), }; } /** Change between two values: absolute, as a share of `from`, and the direction. */ export function change(from: number, to: number) { const delta = to - from; return { delta, pct: from === 0 ? 0 : delta / Math.abs(from), direction: delta > 0 ? "up" : delta < 0 ? "down" : "flat" } as const; } 6a:T797,"use client"; import { useMemo } from "react"; import { useClock, type Clock, type ClockOptions } from "./clock"; import type { Tick, TickStream } from "./stream"; export type UseTickerOptions = ClockOptions & { /** The stream index shown at mount, so a chart opens with history. Default `history - 1`. */ startIndex?: number; /** How many ticks `history` keeps, oldest first. Default 60. */ history?: number; }; export type Ticker = Clock & { /** The stream index on screen now: `startIndex + clock.tick`. */ index: number; /** The current tick. */ current: Tick; /** The tick before it (same as `current` at index 0). */ previous: Tick; /** The last `history` ticks, oldest first. */ history: Tick[]; /** One series over `history`, oldest first: hand it to a Sparkline or Line Chart as `values`. */ series(id: string): number[]; }; /** * Drives a seeded `TickStream` from a `useClock`: the live board's one hook. Hydration-safe, * because the first render on both sides is `startIndex`, and deterministic, because every * value comes from the seed, never from `Math.random` or the wall clock. * * const stream = useMemo(() => createTickStream({ seed: "fx", series }), []); * const fx = useTicker(stream, { intervalMs: 1500, target: ref }); * fx.current.values.EURUSD; fx.series("EURUSD"); fx.toggle(); */ export function useTicker(stream: TickStream, { startIndex, history = 60, ...clockOptions }: UseTickerOptions = {}): Ticker { const clock = useClock({ intervalMs: stream.intervalMs, ...clockOptions }); const index = (startIndex ?? history - 1) + clock.tick; const slice = useMemo(() => stream.window(index, history), [stream, index, history]); const current = slice[slice.length - 1]; const previous = slice[slice.length - 2] ?? current; return { ...clock, index, current, previous, history: slice, series: (id) => slice.map((t) => t.values[id]), }; } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","d3-scale",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-scale","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"d3-scale"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://eased.dev/r/eased-tokens.json","https://eased.dev/r/eased-motion.json","https://eased.dev/r/eased-chart-core.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"src/registry/eased/_primitives/realtime-core/candles.ts","content":"$64","type":"registry:lib","target":"@components/eased/_primitives/realtime-core/candles.ts"},{"path":"src/registry/eased/_primitives/realtime-core/clock.ts","content":"$65","type":"registry:lib","target":"@components/eased/_primitives/realtime-core/clock.ts"},{"path":"src/registry/eased/_primitives/realtime-core/flash.ts","content":"$66","type":"registry:lib","target":"@components/eased/_primitives/realtime-core/flash.ts"},{"path":"src/registry/eased/_primitives/realtime-core/orderbook.ts","content":"$67","type":"registry:lib","target":"@components/eased/_primitives/realtime-core/orderbook.ts"},{"path":"src/registry/eased/_primitives/realtime-core/realtime-core.ts","content":"/**\n * realtime-core: deterministic live data for tickers, order books, candles and vitals.\n * A seeded stream, a pausable clock, flash-on-change state, and OHLC and depth models that sit\n * on chart-core's scales. Import from here; the files behind it may move.\n */\nexport { createRng, roundTo, seedFrom, type Rng } from \"./rng\";\nexport { change, createTickStream, STREAM_EPOCH, type SeriesSpec, type Tick, type TickStream, type TickStreamOptions } from \"./stream\";\nexport { useClock, type Clock, type ClockOptions } from \"./clock\";\nexport { useTicker, type Ticker, type UseTickerOptions } from \"./use-ticker\";\nexport { FLASH_MS, flashDirection, useFlash, useFlashMap, type Flash, type FlashDirection } from \"./flash\";\nexport { candleLayout, candleScale, candlesFromStream, pushPrice, toCandles, type Candle, type CandleShape } from \"./candles\";\nexport { depth, depthCurve, syntheticBook, type BookLevel, type Depth, type DepthLevel, type OrderBook, type SyntheticBookOptions } from \"./orderbook\";\n","type":"registry:lib","target":"@components/eased/_primitives/realtime-core/realtime-core.ts"},{"path":"src/registry/eased/_primitives/realtime-core/rng.ts","content":"$68","type":"registry:lib","target":"@components/eased/_primitives/realtime-core/rng.ts"},{"path":"src/registry/eased/_primitives/realtime-core/stream.ts","content":"$69","type":"registry:lib","target":"@components/eased/_primitives/realtime-core/stream.ts"},{"path":"src/registry/eased/_primitives/realtime-core/use-ticker.ts","content":"$6a","type":"registry:lib","target":"@components/eased/_primitives/realtime-core/use-ticker.ts"}],"className":"h-[70svh] min-h-80"}]]}]