60: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"] 61: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"] 62:T23e3,"use client"; import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type ReactNode } from "react"; import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, type AnimationPlaybackControls, type HTMLMotionProps, type MotionProps, type PanInfo, type TargetAndTransition, type Transition, type Variants } from "motion/react"; import { X } from "lucide-react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./toast.module.css"; export interface ToastProps { title: string; description?: string; open?: boolean; onOpenChange?: (open: boolean) => void; duration?: number; } const subscribeHydration = () => () => {}; const exitFast: Transition = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] }; const enter: Transition = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }; const textIn: TargetAndTransition = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }; const textOut: TargetAndTransition = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast }; const textShown: TargetAndTransition = { opacity: 1, y: "0em", filter: "blur(0px)" }; const fadeOut: TargetAndTransition = { opacity: 0, transition: { duration: motionTokens.duration.instant } }; /** A swipe past this distance (px) or speed (px/s) dismisses the toast in the direction it was thrown. */ const swipe = { distance: 80, velocity: 480 }; /** Outgoing copies are hidden from assistive tech while they fade, so the live region reads only the current text. */ function Swap(props: HTMLMotionProps<"span">) { const present = useIsPresent(); return ; } /** Follows its content height. After `morphKey` changes, the height springs from the old size to the new one and then returns to auto, so passive reflows (a resize, a font swap) follow instantly. It clips only while moving, so focus rings stay visible at rest. */ function HeightFrame({ reduce, morphKey, children }: { reduce: boolean | null; morphKey: string; children: ReactNode }) { const frame = useRef(null); const content = useRef(null); const height = useMotionValue("auto"); const changedAt = useRef(0); useLayoutEffect(() => { changedAt.current = performance.now(); }, [morphKey]); useEffect(() => { const node = content.current; if (!node || typeof ResizeObserver === "undefined") return; let last: number | undefined; let controls: AnimationPlaybackControls | undefined; const settle = () => { height.jump("auto"); if (frame.current) Object.assign(frame.current.style, { overflow: "", height: "auto" }); }; const observer = new ResizeObserver(([entry]) => { if (!entry) return; const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight; const current = height.get(); const from = typeof current === "number" ? current : last; last = next; controls?.stop(); if (reduce || from === undefined || from === next || performance.now() - changedAt.current > 120) return settle(); // Pin the old height before this frame paints, then spring to the new one. if (frame.current) Object.assign(frame.current.style, { overflow: "hidden", height: `${from}px` }); controls = animate(height, [from, next], { ...motionTokens.spring.smooth, onComplete: settle }); }); observer.observe(node); return () => { observer.disconnect(); controls?.stop(); }; }, [height, reduce]); return

{children}

; } export default function Toast({ title, description, open = true, onOpenChange, duration = 4500 }: ToastProps) { const reduce = useReducedMotion(); // Toasts that mount after hydration rise in from their edge; server-rendered ones start settled. const hydrated = useSyncExternalStore(subscribeHydration, () => true, () => false); const [enterOnMount] = useState(hydrated); const [dismissed, setDismissed] = useState(false); const [throwX, setThrowX] = useState(0); const [lastOpen, setLastOpen] = useState(open); if (open !== lastOpen) { setLastOpen(open); if (open) { setDismissed(false); setThrowX(0); } } const visible = open && !dismissed; const surface = useRef(null); // The drag offset is owned here, so a release hands its velocity straight to the spring home or to the throw. const x = useMotionValue(0); const releaseVelocity = useRef(0); /** Closing tells the parent at once, while the exit plays out here, so a new toast can be raised mid-exit and simply turns back. */ function dismiss(to: number) { setThrowX(to); setDismissed(true); onOpenChange?.(false); } useEffect(() => { if (!visible || !onOpenChange || duration <= 0) return; const timer = window.setTimeout(() => { setThrowX(0); setDismissed(true); onOpenChange(false); }, duration); return () => window.clearTimeout(timer); }, [visible, onOpenChange, duration]); function handleDragEnd(_: PointerEvent | MouseEvent | TouchEvent, info: PanInfo) { const direction = Math.sign(info.offset.x || info.velocity.x); // A short swipe springs back with its release velocity and a slight settle instead of drifting home. if (Math.abs(info.offset.x) < swipe.distance && Math.abs(info.velocity.x) < swipe.velocity) { animate(x, 0, { ...motionTokens.spring.snappy, velocity: info.velocity.x }); return; } releaseVelocity.current = info.velocity.x; dismiss(direction * ((surface.current?.offsetWidth ?? 320) + 48)); } const variants: Variants = reduce ? { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: motionTokens.duration.instant } }, exit: fadeOut, } : { // x resets here because the drag value outlives a thrown toast; the next one must rise from the center. hidden: { opacity: 0, x: 0, y: 16, scale: .96 }, // x returns to center too, in case the toast is raised again while a throw is still leaving. shown: { opacity: 1, x: 0, y: 0, scale: 1, transition: { ...motionTokens.spring.morph, opacity: enter } }, // A thrown toast keeps its release velocity; a closed one sinks back toward the edge it came from. // The throw settles loosely: it is invisible once the fade ends, so no long unseen tail keeps it mounted. exit: (to: number) => to ? { x: to, opacity: 0, transition: { x: { type: "spring", visualDuration: .3, bounce: 0, velocity: releaseVelocity.current, restDelta: 2, restSpeed: 40 }, opacity: { duration: motionTokens.duration.exit } } } : { opacity: 0, y: 8, scale: .97, transition: { duration: motionTokens.duration.exit, ease: [...motionTokens.ease.standard] } }, }; const swap: MotionProps = { initial: reduce ? { opacity: 0 } : textIn, animate: textShown, exit: reduce ? fadeOut : textOut, transition: reduce ? { duration: motionTokens.duration.instant } : enter }; return ( {visible && {/* The copy column follows its content height, so a longer message grows the toast instead of snapping it. */} {title} {description ? {description} : null} } ); } 63:T8a9,.toast { display: flex; width: min(100%, 26rem); min-width: 0; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 0.875rem 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-panel); background: color-mix(in oklab, var(--surface) 94%, var(--background)); color: var(--foreground); letter-spacing: var(--tracking-body); box-shadow: var(--shadow-floating); } .icon { display: grid; width: 1.875rem; height: 1.875rem; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in oklab, var(--success) 24%, var(--border)); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--success) 10%, var(--surface)); color: var(--success); } .frame { display: block; min-width: 0; flex: 1; } .copy { position: relative; display: grid; min-width: 0; gap: 0.125rem; /* Centers the title's first line on the 30px status icon. */ padding-top: 0.3125rem; } .title { position: relative; display: block; min-width: 0; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); } .line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .description { display: block; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); } .close { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; margin: -0.0625rem -0.125rem 0 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } @media (hover: hover) and (pointer: fine) { .close:hover { background: var(--surface-muted); color: var(--foreground); } } /* Quick press, spring release. */ .close:active { transform: scale(0.96); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); } @media (prefers-reduced-motion: reduce) { .close { transition: none; } .close:active { transform: none; } } 5f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/components/toast/toast.tsx","content":"$62","type":"registry:component","target":"@components/arc/toast/toast.tsx"},{"path":"registry/components/toast/toast.module.css","content":"$63","type":"registry:component","target":"@components/arc/toast/toast.module.css"}],"className":"h-[70svh] min-h-80"}]]}]