4f: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"] 50: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"] 51:T136b,import { useEffect } from 'react' import clsx from 'clsx' import { motion, AnimatePresence, useReducedMotion } from 'framer-motion' import type { ReactNode } from 'react' import { Icon } from './Icon' /** How long a routine alert stays. Long enough to read one line without hurrying; * NN/g's guidance on transient messages puts the floor around 5s, and every alert * here also survives in the panel, so erring short costs nothing. */ const AUTO_DISMISS_MS = 6_000 export type ToastSeverity = 'critical' | 'info' /** Render `*bold*` markers as emphasis. * * When the same message string is reused across surfaces it may carry lightweight * markdown. Rendering it raw would put literal asterisks on screen ("*Saved*"); * re-writing every call site to strip them would fork the message per surface. Splitting * on the delimiter keeps one string and no HTML injection: the parts are React children, * never innerHTML. */ function emphasise(text: string): ReactNode[] { return text.split(/\*([^*]+)\*/g).map((part, i) => // Odd indices are the captured groups — i.e. what was inside the asterisks. i % 2 === 1 ? {part} : {part}, ) } interface ToastProps { id: number severity: ToastSeverity children: ReactNode /** MUST be referentially stable — see the timer note in Toast. Pass a store action * or a useCallback, never an inline arrow. */ onDismiss: (id: number) => void } /** * One alert. * * Critical toasts do NOT auto-dismiss. That is the entire point of the severity split: * these are the `force: true` alerts — payment declined, upload failed, a job that died * halfway — and a message that fades after six seconds can be missed by someone who * looked away, which is exactly the failure `force` was invented to prevent. Routine * alerts fade, because a "saved" you missed is still true and costs nothing. */ /* Shared with toaster.tsx's programmatic toasts: comes in from the side, tiny, * and fades up to full size on a gentle spring, collapsing to a plain fade under * prefers-reduced-motion. Tuned in docs/toast-anim-playground.html. */ function toastMotion(reduce: boolean) { if (reduce) { return { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.12 }, } } return { initial: { opacity: 0, x: 140, scale: 0.7 }, animate: { opacity: 1, x: 0, scale: 1 }, exit: { opacity: 0, x: 100, scale: 0.8, transition: { duration: 0.14, ease: 'easeIn' as const } }, transition: { type: 'spring' as const, stiffness: 280, damping: 26, mass: 1 }, } } export function Toast({ id, severity, children, onDismiss }: ToastProps) { const critical = severity === 'critical' const reduce = useReducedMotion() ?? false // Every dep here MUST be referentially stable, or this timer never fires. // // This effect re-runs whenever a dep changes, and re-running clears the pending // timeout and starts a new one. `onDismiss` used to be an inline arrow built fresh on // each render of the viewport — and if the app polls on an interval (say every 5s), it // re-renders App and therefore the viewport. A 6s timer reset every 5s never reaches // 6s: routine toasts hung around forever, and only a real browser with a real clock // showed it. That is why onDismiss takes an id instead of closing over one. useEffect(() => { if (critical) return // sticky by design — see above const t = setTimeout(() => onDismiss(id), AUTO_DISMISS_MS) return () => clearTimeout(t) }, [critical, id, onDismiss]) return (

{children}

) } export interface ToastItem { id: number severity: ToastSeverity text: string } /** Bare items — the shell owns the single .pouf-toasts stack and mounts this * inside it, beside the programmatic Toaster. Two components each bringing * their own fixed stack meant two overlapping stacks at the same corner. */ export function ToastViewport({ toasts, onDismiss }: { toasts: ToastItem[]; onDismiss: (id: number) => void }) { if (toasts.length === 0) return null return ( {toasts.map((t) => ( {emphasise(t.text)} ))} ) } 4e:["$","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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/icon.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/pouf/Toast.tsx","content":"$51","type":"registry:ui","target":"components/pouf/Toast.tsx"}],"className":"h-[70svh] min-h-80"}]]}]