4b: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/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"],"RegistryDependencies"] 4c: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"] 4d:T4148,import { type CSSProperties, type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react' import { AnimatePresence, motion, MotionConfig } from 'motion/react' import { ALERT_MARKS, type AlertTone } from '@/components/ui/alert' import { Button } from '@/components/ui/button' import { StatusBadge } from '@/components/ui/spinner' import { dissolve } from '@/lib/smoky-dissolve' import { cn } from '@/lib/utils' const EVENT = 'kobra:toast' const DISMISS = 'kobra:toast-dismiss' const LIFETIME = 2400 const ACTION_LIFETIME = 6000 const GAP = 8 const PEEK = 10 const SHRINK = 0.03 const DEPTH = 3 const FADE = 0.15 const REACH = 10 const UNCAPPED = 10000 const SWIPE = 44 const FLICK = 380 const MORPH = { type: 'spring', duration: 0.3, bounce: 0 } as const const EXIT = { type: 'spring', duration: 0.2, bounce: 0 } as const export const LINE_HEIGHT = 36 const TEXT_LINE = 20 export type ToastSide = 'top' | 'bottom' export type ToastAlign = 'left' | 'center' | 'right' export type ToastPosition = `${ToastSide}-${ToastAlign}` export const toastPositions = [ 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right', ] as const satisfies readonly ToastPosition[] const ALIGN: Record = { left: 'justify-start', center: 'justify-center', right: 'justify-end', } export type ToastState = 'pending' | AlertTone export type ToastAction = { label: string; run: () => void } export type ToastInput = { id?: string message: string state?: ToastState action?: ToastAction lifetime?: number } export type Note = ToastInput & { id: string } export type ToastClock = { waits: Map; since: number | null } export type StackSlot = { y: number; scale: number; opacity: number } export type StackCard = { id: string render: (behind: boolean) => ReactNode } let nextId = 0 export function toast(input: string | ToastInput) { const detail = typeof input === 'string' ? { message: input } : input window.dispatchEvent( new CustomEvent(EVENT, { detail: { ...detail, id: detail.id ?? `toast-${++nextId}` }, }), ) } export function dismissToast(id: string) { window.dispatchEvent(new CustomEvent(DISMISS, { detail: id })) } export function upsertToast(notes: readonly Note[], note: Note): Note[] { const index = notes.findIndex((item) => item.id === note.id) return index === -1 ? [note, ...notes] : notes.map((item, at) => (at === index ? note : item)) } export function dismissDelay( state: ToastState | undefined, hasAction: boolean, lifetime?: number, ): number | null { if (state === 'pending') return null if (lifetime !== undefined) return lifetime return hasAction ? ACTION_LIFETIME : LIFETIME } export function tick(clock: ToastClock, at: number) { if (clock.since === null) return const spent = at - clock.since clock.since = at for (const [id, left] of clock.waits) clock.waits.set(id, left - spent) } export function pileSlot(index: number): StackSlot { const depth = Math.min(index, DEPTH - 1) return { y: depth * PEEK, scale: 1 - depth * SHRINK, opacity: index < DEPTH ? 1 - depth * FADE : 0, } } export function fanSlot(index: number, heights: readonly number[]): StackSlot { let y = 0 for (let at = 0; at < index; at++) y += (heights[at] ?? LINE_HEIGHT) + GAP return { y, scale: 1, opacity: 1 } } const TONE_INK: Record, string> = { error: 'text-error', warning: 'text-warning', info: 'text-info', } const BADGE_SIZE = { '--check-size': '16px' } as CSSProperties function ToastGlyph({ state }: { state: ToastState }) { switch (state) { case 'pending': case 'success': return ( ) case 'error': case 'warning': case 'info': const Mark = ALERT_MARKS[state] return default: { const exhaustive: never = state return exhaustive } } } const GLYPH_POP = { initial: { opacity: 0, scale: 0.25, filter: 'blur(4px)' }, animate: { opacity: 1, scale: 1, filter: 'blur(0px)' }, exit: { opacity: 0, scale: 0.25, filter: 'blur(4px)', transition: EXIT }, } as const const TEXT_SLIDE = { initial: { opacity: 0, x: -6 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -6, transition: EXIT }, } as const function ToastLine({ message }: { message: string }) { return ( {message} ) } const glyphKey = (state: ToastState) => state === 'pending' || state === 'success' ? 'badge' : state function ToastPill({ state, message, action, onAction, onDismiss, behind, }: { state?: ToastState message: string action?: ToastAction onAction: () => void onDismiss: () => void behind: boolean }) { const pill = useRef(null) return ( { const far = Math.hypot(info.offset.x, info.offset.y) > SWIPE const fast = Math.hypot(info.velocity.x, info.velocity.y) > FLICK if (!far && !fast) return if (pill.current) dissolve(pill.current, { onComplete: onDismiss }) else onDismiss() }} className={cn( 'toast-pill relative flex max-w-lg overflow-hidden bg-popover/80 text-sm text-foreground backdrop-blur-md', behind ? 'pointer-events-none' : 'pointer-events-auto cursor-grab active:cursor-grabbing', action ? 'py-1.5 pr-1.5' : 'py-2 pr-4', state ? 'pl-3' : 'pl-4', )} >

{state ? ( ) : null}

{action ? (

) : null} ) } function sameBoxes( first: Record, second: Record, ) { const ids = Object.keys(second) return ( ids.length === Object.keys(first).length && ids.every( (id) => first[id]?.width === second[id]?.width && first[id]?.height === second[id]?.height, ) ) } function ToastStack({ cards, onOpen, position, }: { cards: StackCard[] onOpen: (open: boolean) => void position: ToastPosition }) { const [pointing, setPointing] = useState(false) const [focused, setFocused] = useState(false) const [holding, setHolding] = useState(false) const [boxes, setBoxes] = useState>({}) const measured = useRef(new Map()) const root = useRef(null) const open = pointing || focused || holding const piled = cards.length > 1 && !open useEffect(() => onOpen(open), [onOpen, open]) useEffect(() => { if (!holding) return const release = () => setHolding(false) const check = (event: PointerEvent) => { if (event.buttons === 0) release() } window.addEventListener('pointerup', release) window.addEventListener('pointercancel', release) window.addEventListener('pointermove', check) return () => { window.removeEventListener('pointerup', release) window.removeEventListener('pointercancel', release) window.removeEventListener('pointermove', check) } }, [holding]) const at = useRef<{ x: number; y: number } | null>(null) const overCards = useCallback( () => at.current !== null && [...measured.current.values()].some((element) => { const box = element.getBoundingClientRect() return ( at.current!.x >= box.left - REACH && at.current!.x <= box.right + REACH && at.current!.y >= box.top - REACH && at.current!.y <= box.bottom + REACH ) }), [], ) useEffect(() => { const onMove = (event: PointerEvent) => { at.current = { x: event.clientX, y: event.clientY } setPointing(overCards()) } const onLeave = () => { at.current = null setPointing(false) } window.addEventListener('pointermove', onMove) document.documentElement.addEventListener('pointerleave', onLeave) return () => { window.removeEventListener('pointermove', onMove) document.documentElement.removeEventListener('pointerleave', onLeave) } }, [overCards]) useEffect(() => { if (!pointing) return let frame = requestAnimationFrame(function check() { if (!overCards()) { setPointing(false) return } frame = requestAnimationFrame(check) }) return () => cancelAnimationFrame(frame) }, [pointing, overCards]) useEffect(() => { if (!focused) return let frame = requestAnimationFrame(function check() { if (!root.current?.contains(document.activeElement)) { setFocused(false) return } frame = requestAnimationFrame(check) }) return () => cancelAnimationFrame(frame) }, [focused]) useLayoutEffect(() => { const next: Record = {} for (const card of cards) { const element = measured.current.get(card.id) if (!element) continue const capped = element.style.maxWidth element.style.maxWidth = '' next[card.id] = { width: element.offsetWidth, height: element.offsetHeight } element.style.maxWidth = capped } setBoxes((current) => (sameBoxes(current, next) ? current : next)) }, [cards]) const heights = cards.map((card) => boxes[card.id]?.height ?? LINE_HEIGHT) const deckWidth = cards[0] ? boxes[cards[0].id]?.width : undefined const [side, align] = position.split('-') as [ToastSide, ToastAlign] const fall = side === 'top' ? 1 : -1 return ( setHolding(true)} onFocus={() => setFocused(true)} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false) }} className={cn( 'pointer-events-none fixed inset-x-0 z-100', side === 'top' ? 'top-4' : 'bottom-4', )} > {cards.map((card, index) => { const slot = piled ? pileSlot(index) : fanSlot(index, heights) const y = slot.y * fall const from = (slot.y - 8) * fall return ( { if (element) measured.current.set(card.id, element) else measured.current.delete(card.id) }} className="relative" initial={false} animate={{ maxWidth: (piled && index > 0 ? deckWidth : boxes[card.id]?.width) ?? UNCAPPED, }} transition={MORPH} > {card.render(piled && index > 0)} ) })} ) } export function Toasts({ position = 'top-center' }: { position?: ToastPosition }) { const [notes, setNotes] = useState([]) const [reading, setReading] = useState(false) const clock = useRef({ waits: new Map(), since: null }) const issued = useRef(null) useEffect(() => { clock.current.since = performance.now() const onToast = (event: Event) => { const note = (event as CustomEvent).detail issued.current = note.id setNotes((current) => upsertToast(current, note)) tick(clock.current, performance.now()) const delay = dismissDelay(note.state, note.action !== undefined, note.lifetime) if (delay === null) clock.current.waits.delete(note.id) else clock.current.waits.set(note.id, delay) } const onDismiss = (event: Event) => { const id = (event as CustomEvent).detail clock.current.waits.delete(id) setNotes((current) => current.filter((note) => note.id !== id)) } window.addEventListener(EVENT, onToast) window.addEventListener(DISMISS, onDismiss) return () => { window.removeEventListener(EVENT, onToast) window.removeEventListener(DISMISS, onDismiss) } }, []) useEffect(() => { tick(clock.current, performance.now()) clock.current.since = reading ? null : performance.now() }, [reading]) useEffect(() => { if (reading) return tick(clock.current, performance.now()) const waits = [...clock.current.waits.values()] if (waits.length === 0) return const timer = window.setTimeout( () => { tick(clock.current, performance.now()) const expired = new Set() for (const [id, left] of clock.current.waits) { if (left <= 0) expired.add(id) } for (const id of expired) clock.current.waits.delete(id) setNotes((current) => current.filter((note) => !expired.has(note.id))) }, Math.max(0, Math.min(...waits)), ) return () => window.clearTimeout(timer) }, [notes, reading]) return ( { const drop = () => { clock.current.waits.delete(note.id) setNotes((current) => current.filter((item) => item.id !== note.id)) } const act = () => { issued.current = null note.action?.run() if (issued.current !== note.id) drop() } return { id: note.id, render: (behind) => ( ), } })} /> ) } 4a:["$","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"}]]}]}]]}],["$","$L4b",null,{"namespace":"@kobra","registryDependencies":["@kobra/alert","@kobra/button","@kobra/spinner"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"components/ui/toast.tsx","content":"$4d","type":"registry:ui","target":"components/ui/toast.tsx"}],"className":"h-[70svh] min-h-80"}]]}]