67: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollBar"] 72: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}] 50:["$","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":"#0b0e15"}]]}] 51:["$","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":"#ffffff"}]]}] 52:["$","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"}]]}] 53:["$","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"}]]}] 54:["$","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)"}]]}]}]]}] 55:["$","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"}]]}] 56:["$","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"}]]}] 57:["$","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"}]]}] 58:["$","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"}]]}] 59:["$","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)"}]]}]}]]}] 5a:["$","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"}]]}] 5b:["$","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"}]]}] 5c:["$","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"}]]}] 5d:["$","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"}]]}] 5e:["$","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"}]]}] 5f:["$","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"}]]}] 60:["$","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"}]]}] 61:["$","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"}]]}] 62:["$","$L67",null,{"orientation":"horizontal"}] 63:["$","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":["$","$L4e",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",":"]}]}],"$L68"]}],"$L69","$L6a","$L6b","$L6c","$L6d","$L6e","$L6f","$L70"]}],"$L71"]}]}]]}] 64:null 65:null 73:T24f1,"use client" import { useEffect, useLayoutEffect, useRef, useState } from "react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { ArrowUp } from "lucide-react" import { cn } from "@/lib/utils" const EASE = [0.16, 1, 0.3, 1] as const export interface FeedFill { id: number time: string side: "buy" | "sell" symbol: string size: string price: string } const SYMBOLS = ["NOVX", "ARDN", "MRDX", "ZTH", "ORBN"] /** Fixed session anchor so the tape never depends on the wall clock — the same * index always renders the same second, on the server and on every re-render. */ const OPEN_SECONDS = 9 * 3600 + 32 * 60 function clock(i: number) { const t = OPEN_SECONDS + i * 7 const pad = (n: number) => String(n).padStart(2, "0") return `${pad(Math.floor(t / 3600) % 24)}:${pad(Math.floor((t % 3600) / 60))}:${pad(t % 60)}` } /* hash-sine: a fill is a pure function of its sequence number, so replaying the tape gives byte-identical rows. */ function makeFill(i: number): FeedFill { const g = Math.abs(Math.sin(i * 12.9898 + 78.233) * 43758.5453) % 1 const symbol = SYMBOLS[i % SYMBOLS.length] const base = 120 + (i % SYMBOLS.length) * 37 return { id: i, time: clock(i), side: g > 0.5 ? "buy" : "sell", symbol, size: (Math.floor(g * 900) + 25).toLocaleString("en-US"), price: (base + g * 4).toFixed(2), } } const SEED = 16 const DEFAULT_FILLS: FeedFill[] = Array.from({ length: SEED }, (_, i) => makeFill(SEED - 1 - i)) /** the tape stops growing here so a long session cannot leak rows */ const CAP = 80 /** anything under this counts as "parked at the top", where arrivals may land freely */ const TOP = 4 /** * A live tape that refuses to move the ground under you. * * Parked at the top, fills land and the list grows. Scroll down to read a row and * the behaviour inverts: fills still land, but the scroll position is pinned to the * row you were on, and the arrivals are counted into a pill instead. Tap the pill to * come back to the top and clear it. * * The pin is the whole component. Prepending to a scrolled list slides everything * down by the height of the new row, so the line under your cursor at mousedown is * not the line you click — on a fills blotter that is a misread position, and on a * request log it is the wrong trace opened. The count is the exact number that * arrived while you were away: never rounded, never capped at "9+", because the one * question the pill exists to answer is how much you have not seen. */ export function NewItemsPill({ fills = DEFAULT_FILLS, intervalMs = 2600, live = true, title = "Sample tape", className, }: { fills?: FeedFill[] /** gap between arrivals; the tape freezes when live is false */ intervalMs?: number live?: boolean title?: string className?: string }) { const reduced = useReducedMotion() const scroller = useRef(null) const next = useRef(SEED) /** scrollHeight captured before a prepend, so the pin can measure the delta */ const before = useRef(0) /** ids seeded on mount — they must not animate in, only later arrivals do */ const seeded = useRef(new Set(fills.map((f) => f.id))) const [tape, setTape] = useState(fills) const [pending, setPending] = useState(0) const [away, setAway] = useState(false) useEffect(() => { if (!live) return const t = window.setInterval(() => { const el = scroller.current before.current = el ? el.scrollHeight : 0 const parked = !el || el.scrollTop < TOP setTape((prev) => [makeFill(next.current++), ...prev].slice(0, CAP)) if (!parked) setPending((n) => n + 1) }, intervalMs) return () => window.clearInterval(t) }, [live, intervalMs]) /* Runs before paint: add back exactly the height that was inserted above the viewport, so the visible rows never move. useEffect is too late and shows a jump. */ useLayoutEffect(() => { const el = scroller.current if (!el || !before.current) return const delta = el.scrollHeight - before.current if (delta > 0 && el.scrollTop > 0) el.scrollTop += delta before.current = 0 }, [tape]) const onScroll = () => { const el = scroller.current if (!el) return const parked = el.scrollTop < TOP setAway(!parked) if (parked) setPending(0) } const jump = () => { scroller.current?.scrollTo({ top: 0, behavior: reduced ? "auto" : "smooth" }) setPending(0) } const showPill = pending > 0 && away return (

{title} {live ? "live" : "paused"}

Time Symbol Size Price

{/* the pill floats over the tape; only the button itself takes the pointer */}

{showPill && ( {pending} new )}

{/* overflow-anchor: none is load-bearing. Chrome ships scroll anchoring on by default and already shifts scrollTop when content lands above the viewport, so leaving it on makes the pin below fire on top of the browser's and the tape jumps by twice the inserted height. Safari implements neither, so the fix is to switch the browser's off everywhere and own the correction here. */}

{tape.map((f) => { const fresh = !seeded.current.has(f.id) const up = f.side === "buy" return ( {f.time} {f.symbol} {f.side} {f.size} {f.price} ) })}

) } 66:["$","$L72",null,{"files":[{"path":"components/ui/new-items-pill.tsx","content":"$73","type":"registry:ui","target":"components/ui/new-items-pill.tsx"}],"className":"h-[70svh] min-h-80"}]