4e: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/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"],"RegistryDependencies"] 4f: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"] 50:T1c22,"use client"; // beui.dev/charts/order-book import { motion, useReducedMotion } from "motion/react"; import { createContext, useContext, type ReactNode } from "react"; import { SPRING_PANEL } from "@/lib/ease"; import { OrderBookDepthRow } from "./order-book/depth-row"; import { cn } from "@/lib/utils"; import { buildOrderBook } from "./order-book/model"; export type OrderBookLevel = { price: number; size: number }; export interface OrderBookProps { /** Snapshot of buy levels. Equal prices are combined; invalid and zero sizes are omitted. */ bids: readonly OrderBookLevel[]; /** Snapshot of sell levels. Supply new arrays when the book changes. */ asks: readonly OrderBookLevel[]; /** Number of nearest levels to show on each side. */ levels?: number; /** Last traded price. Omit to show the midpoint of the best bid and ask. */ lastPrice?: number; label?: string; baseSymbol?: string; quoteSymbol?: string; formatPrice?: (value: number) => string; formatSize?: (value: number) => string; children?: ReactNode; className?: string; } const priceFormatter = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, }); const sizeFormatter = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1, }); const defaultPrice = (value: number) => priceFormatter.format(value); const defaultSize = (value: number) => sizeFormatter.format(value); function useOrderBookModel({ bids, asks, levels = 9, lastPrice, baseSymbol = "", quoteSymbol = "USD", formatPrice = defaultPrice, formatSize = defaultSize, }: OrderBookProps) { const book = buildOrderBook(bids, asks, levels); return { ...book, price: lastPrice != null && Number.isFinite(lastPrice) && lastPrice > 0 ? lastPrice : book.midpoint, baseSymbol, quoteSymbol, formatPrice, formatSize, reduce: useReducedMotion(), }; } const OrderBookContext = createContext | null>(null); export function useOrderBook() { const context = useContext(OrderBookContext); if (!context) throw new Error("Order book parts must be rendered inside OrderBook."); return context; } /** A snapshot-driven depth ladder. No timers or invented market data live in the chart. */ export function OrderBook({ children, className, label = "Order book", ...props }: OrderBookProps) { const model = useOrderBookModel(props); return (

{children === undefined ? ( <> ) : ( children )}

); } export function OrderBookHeader({ className }: { className?: string }) { const { baseSymbol, quoteSymbol } = useOrderBook(); return ( ); } export function OrderBookSide({ side, className }: { side: "bid" | "ask"; className?: string }) { const { bids, asks, maxTotal, formatPrice, formatSize, reduce, baseSymbol, quoteSymbol } = useOrderBook(); const rows = side === "ask" ? [...asks].reverse() : bids; const color = side === "ask" ? "text-rose-600 dark:text-rose-400" : "text-emerald-700 dark:text-emerald-400"; return ( {rows.length === 0 ? ( ) : ( rows.map((row, index) => ( )) )}

Price {quoteSymbol}	Size {baseSymbol}	Cumulative total {baseSymbol}
No {side === "ask" ? "asks" : "bids"}

); } export function OrderBookSpread({ className }: { className?: string }) { const { price, spread, midpoint, formatPrice } = useOrderBook(); return (

Reference price: {price == null ? "—" : formatPrice(price)} {spread == null || midpoint == null ? "Spread unavailable" : spread < 0 ? "Crossed book" : `Spread ${formatPrice(spread)} · ${((spread / midpoint) * 100).toFixed(3)}%`}

); } /** Balance of the displayed depth, not the entire exchange order book. */ export function OrderBookBalance({ className }: { className?: string }) { const { bidTotal, askTotal, reduce } = useOrderBook(); const total = bidTotal + askTotal; const ratio = total ? bidTotal / total : 0.5; return (

Bids {total ? `${(ratio * 100).toFixed(1)}%` : "—"} Visible depth Asks {total ? `${((1 - ratio) * 100).toFixed(1)}%` : "—"}

); } 51:Tc44,"use client"; import { animate, motion, useMotionValue } from "motion/react"; import { useEffect, useRef } from "react"; import { EASE_OUT, SPRING_PANEL } from "@/lib/ease"; import { cn } from "@/lib/utils"; import type { DepthLevel } from "./model"; export function OrderBookDepthRow({ row, fraction, entranceIndex, color, formatPrice, formatSize, reduce, }: { row: DepthLevel; fraction: number; entranceIndex: number; color: string; formatPrice: (value: number) => string; formatSize: (value: number) => string; reduce: boolean; }) { const highlight = useMotionValue(0); const previousSize = useRef(row.size); const entered = useRef(false); useEffect(() => { entered.current = true; }, []); useEffect(() => { const changed = previousSize.current !== row.size; previousSize.current = row.size; if (!changed || reduce) { highlight.set(0); return; } // A soft full-row tint identifies changed quantities. Retarget from // the current opacity when another snapshot interrupts the fade. let fade: ReturnType | undefined; const rise = animate(highlight, 0.1, { duration: 0.08, ease: EASE_OUT, onComplete: () => { fade = animate(highlight, 0, { duration: 0.2, ease: EASE_OUT }); }, }); return () => { rise.stop(); fade?.stop(); }; }, [row.size, reduce, highlight]); return (

{formatPrice(row.price)} {formatSize(row.size)} {formatSize(row.total)} ); } 52:T5ce,export type DepthLevel = { price: number; size: number; total: number }; type Level = { price: number; size: number }; function prepare(levels: readonly Level[], side: "bid" | "ask", limit: number): DepthLevel[] { const prices = new Map(); for (const { price, size } of levels) { if (!Number.isFinite(price) || !Number.isFinite(size) || price <= 0 || size <= 0) continue; prices.set(price, (prices.get(price) ?? 0) + size); } let total = 0; return [...prices] .sort(([a], [b]) => (side === "bid" ? b - a : a - b)) .slice(0, limit) .map(([price, size]) => { total += size; return { price, size, total }; }); } /** Accumulate from the best quote outward before reversing asks for display. */ export function buildOrderBook(bids: readonly Level[], asks: readonly Level[], levels: number) { const limit = Number.isFinite(levels) ? Math.max(0, Math.floor(levels)) : 9; const buy = prepare(bids, "bid", limit); const sell = prepare(asks, "ask", limit); const bidTotal = buy.at(-1)?.total ?? 0; const askTotal = sell.at(-1)?.total ?? 0; const bestBid = buy[0]?.price; const bestAsk = sell[0]?.price; const midpoint = bestBid == null || bestAsk == null ? null : (bestBid + bestAsk) / 2; const spread = bestBid == null || bestAsk == null ? null : bestAsk - bestBid; return { bids: buy, asks: sell, bidTotal, askTotal, maxTotal: Math.max(bidTotal, askTotal), midpoint, spread, }; } 53:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4d:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@beui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/charts/order-book.tsx","content":"$50","type":"registry:component","target":"@components/charts/order-book.tsx"},{"path":"components/charts/order-book/depth-row.tsx","content":"$51","type":"registry:component","target":"@components/charts/order-book/depth-row.tsx"},{"path":"components/charts/order-book/model.ts","content":"$52","type":"registry:component","target":"@components/charts/order-book/model.ts"},{"path":"lib/ease.ts","content":"$53","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]