50: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"] 51: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"] 52:T54d2,"use client" /** * Standalone Sonner-backed polished toasts: self-contained {@link HaloCard}, * rim variants, glyph stagger, and Sonner helpers (no imports from `halo-card.tsx`). * Mount {@link PolishedToaster} once in the root layout. * * For `toast.promise` etc., import `toast` from `"sonner"` and use `toast.custom` * with {@link PolishedToastSurface} the same way as {@link showPolishedToast}. * Pass the custom callback’s `id` as `toastId` and set `closeButton` when you want * an explicit dismiss control (Sonner’s host close button does not render inside * custom JSX). */ import { forwardRef, useEffect, useMemo, useState, type ComponentProps, type ReactNode, } from "react" import { motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react" import type { ExternalToast } from "sonner" import { toast as sonnerToast, Toaster as SonnerToaster } from "sonner" import "sonner/dist/styles.css" import { XIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" /* ─── Rim + card chrome (duplicated from halo-card for this module) ─── */ const paddingClass = { none: "", sm: "p-4", md: "p-6", lg: "p-8", } as const const BORDER_TRAIL_LOOP_MS = 5250 export type RimVariant = "default" | "success" | "destructive" const RIM_BLOB_GRADIENTS: Record< RimVariant, { primaryBg: string; secondaryBg: string; tertiaryBg: string } > = { default: { primaryBg: "linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)", secondaryBg: "linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)", tertiaryBg: "linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)", }, success: { primaryBg: "linear-gradient(90deg, #047857, #059669, #10b981, #14b8a6, #0d9488)", secondaryBg: "linear-gradient(90deg, #34d399, #6ee7b7, #2dd4bf, #5eead4)", tertiaryBg: "linear-gradient(90deg, #065f46, #047857, #0f766e)", }, destructive: { primaryBg: "linear-gradient(90deg, #991b1b, #dc2626, #e11d48, #f43f5e, #be123c)", secondaryBg: "linear-gradient(90deg, #fb7185, #fda4af, #f87171, #fecdd3)", tertiaryBg: "linear-gradient(90deg, #7f1d1d, #b91c1c, #dc2626)", }, } interface BorderTrailChrome { ambientGradient: string ambientGlow: string coreGradient: string coreGlow: string } const RIM_BORDER_TRAIL: Record = { default: { ambientGradient: "linear-gradient(90deg, transparent 0%, rgba(255,0,128,0) 6%, rgba(255,0,128,0.38) 24%, rgba(121,40,202,0.5) 50%, rgba(0,212,255,0.42) 76%, rgba(0,212,255,0) 94%, transparent 100%)", coreGradient: "linear-gradient(90deg, transparent 0%, rgba(255,0,128,0.72) 20%, rgba(200,140,255,0.92) 50%, rgba(0,212,255,0.78) 80%, transparent 100%)", ambientGlow: "0 0 22px rgba(121,40,202,0.28), 0 0 44px rgba(0,212,255,0.18), 0 0 2px rgba(255,255,255,0.12)", coreGlow: "0 0 14px rgba(255,0,128,0.35), 0 0 28px rgba(0,212,255,0.32), inset 0 0 1px rgba(255,255,255,0.22)", }, success: { ambientGradient: "linear-gradient(90deg, transparent 0%, rgba(5,150,105,0) 6%, rgba(16,185,129,0.36) 24%, rgba(20,184,166,0.48) 50%, rgba(13,148,136,0.4) 76%, rgba(13,148,136,0) 94%, transparent 100%)", coreGradient: "linear-gradient(90deg, transparent 0%, rgba(5,150,105,0.68) 20%, rgba(52,211,153,0.88) 50%, rgba(20,184,166,0.8) 80%, transparent 100%)", ambientGlow: "0 0 22px rgba(16,185,129,0.32), 0 0 44px rgba(13,148,136,0.22), 0 0 2px rgba(255,255,255,0.1)", coreGlow: "0 0 14px rgba(5,150,105,0.42), 0 0 28px rgba(20,184,166,0.4), inset 0 0 1px rgba(255,255,255,0.2)", }, destructive: { ambientGradient: "linear-gradient(90deg, transparent 0%, rgba(220,38,38,0) 6%, rgba(220,38,38,0.4) 24%, rgba(244,63,94,0.52) 50%, rgba(190,18,60,0.44) 76%, rgba(190,18,60,0) 94%, transparent 100%)", coreGradient: "linear-gradient(90deg, transparent 0%, rgba(220,38,38,0.75) 20%, rgba(251,113,133,0.9) 50%, rgba(244,63,94,0.82) 80%, transparent 100%)", ambientGlow: "0 0 22px rgba(220,38,38,0.35), 0 0 44px rgba(244,63,94,0.24), 0 0 2px rgba(255,255,255,0.08)", coreGlow: "0 0 14px rgba(220,38,38,0.48), 0 0 28px rgba(244,63,94,0.4), inset 0 0 1px rgba(255,255,255,0.16)", }, } function ToastCardBorderTrail({ active, rimVariant = "default", }: { active: boolean rimVariant?: RimVariant }) { const progress = useMotionValue(0) const offsetDistance = useTransform(progress, (v: number) => { const wrapped = ((v % 100) + 100) % 100 return `${wrapped}%` }) useEffect(() => { if (!active) { return } let rafId = 0 let last = performance.now() const tick = (now: number) => { const dt = now - last last = now const next = progress.get() + (dt / BORDER_TRAIL_LOOP_MS) * 100 progress.set(((next % 100) + 100) % 100) rafId = requestAnimationFrame(tick) } rafId = requestAnimationFrame(tick) return () => cancelAnimationFrame(rafId) }, [active, progress]) const pathCornerRadiusPx = 16 const trailLengthPx = 184 const trailThicknessPx = 32 const trailBox = { height: trailThicknessPx, offsetPath: `rect(0 auto auto 0 round ${pathCornerRadiusPx}px)`, width: trailLengthPx, } as const const trail = RIM_BORDER_TRAIL[rimVariant] return (

) } function toastBorderGlowConfig( translucent: boolean, rimEmphasis: boolean, rimVariant: RimVariant = "default" ) { let idleOpacity: number if (translucent) { idleOpacity = rimEmphasis ? 0.92 : 0.72 } else { idleOpacity = rimEmphasis ? 0.78 : 0.5 } const gradients = RIM_BLOB_GRADIENTS[rimVariant] return { opacityIdle: idleOpacity, primaryBg: gradients.primaryBg, secondaryBg: gradients.secondaryBg, tertiaryBg: gradients.tertiaryBg, primaryLeft: ["-5%", "75%", "-5%"], secondaryLeft: ["65%", "10%", "65%"], tertiaryLeft: ["25%", "55%", "25%"], durationMain: 6, durationSec: 5, durationTer: 4, } } type ToastBorderGlowState = ReturnType function ToastCardRimBlobs({ borderGlow, reduceMotion, }: { borderGlow: ToastBorderGlowState reduceMotion: boolean }) { return (

) } function toastFillBackgroundFor( translucent: boolean, interactive: boolean, rimEmphasis: boolean ) { if (translucent) { if (interactive && rimEmphasis) { return "linear-gradient(to bottom, color-mix(in oklch, var(--card) 88%, transparent) 0%, color-mix(in oklch, var(--card) 74%, transparent) 100%)" } return "linear-gradient(to bottom, color-mix(in oklch, var(--card) 82%, transparent) 0%, color-mix(in oklch, var(--card) 70%, transparent) 100%)" } if (interactive && rimEmphasis) { return "linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 90%, var(--muted)) 100%)" } return "linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 94%, var(--muted)) 100%)" } interface ToastHaloCardProps extends ComponentProps<"div"> { children: ReactNode translucent?: boolean interactive?: boolean padding?: keyof typeof paddingClass rimVariant?: RimVariant } const HaloCard = forwardRef( function HaloCard( { children, className, translucent = true, interactive = true, padding = "md", rimVariant = "default", "aria-label": ariaLabel = "Card", onBlur, onFocus, onMouseEnter, onMouseLeave, ...props }, ref ) { const [isHovered, setIsHovered] = useState(false) const [isFocusedWithin, setIsFocusedWithin] = useState(false) const reduceMotion = useReducedMotion() ?? false const rimEmphasis = interactive && (isHovered || isFocusedWithin) const borderGlow = useMemo( () => toastBorderGlowConfig(translucent, rimEmphasis, rimVariant), [translucent, rimEmphasis, rimVariant] ) const fillBackground = useMemo( () => toastFillBackgroundFor(translucent, interactive, rimEmphasis), [translucent, interactive, rimEmphasis] ) const showTrailChrome = interactive && !reduceMotion const trailActive = isHovered || isFocusedWithin return ( // biome-ignore lint/a11y/noNoninteractiveElementInteractions: hover drives animated rim; focusable controls render in children. // biome-ignore lint/a11y/useSemanticElements: not a form group; fieldset would be incorrect for layout chrome.

{ if (!e.currentTarget.contains(e.relatedTarget as Node | null)) { setIsFocusedWithin(false) } onBlur?.(e) }} onFocus={(e) => { if (interactive) { setIsFocusedWithin(true) } onFocus?.(e) }} onMouseEnter={(e) => { if (interactive) { setIsHovered(true) } onMouseEnter?.(e) }} onMouseLeave={(e) => { setIsHovered(false) onMouseLeave?.(e) }} ref={ref} role="group" {...props} >

{children}

{showTrailChrome ? (

) : null}

) } ) HaloCard.displayName = "HaloCard" /* ─── Toast copy + Sonner ─── */ const GLYPH_STAGGER_SEC = 0.018 const GLYPH_DURATION_SEC = 0.16 function StaggeredGlyphLine({ as: Tag = "span", className, delayChildrenSec = 0, messageKey, reduceMotion, text, }: { as?: "span" | "p" className?: string delayChildrenSec?: number messageKey: string reduceMotion: boolean text: string }) { const chars = useMemo(() => { const counts = new Map() return Array.from(text, (char) => { const count = counts.get(char) ?? 0 counts.set(char, count + 1) return { char, key: `${char}-${count}` } }) }, [text]) if (reduceMotion) { return {text} } const MotionOuter = Tag === "p" ? motion.p : motion.span return ( {chars.map((glyph) => ( {glyph.char} ))} ) } function approximatePriorLineStaggerEndSec( text: string, reduceMotion: boolean ) { if (reduceMotion || text.length === 0) { return 0 } const n = text.length const gapCount = Math.max(0, n - 1) return gapCount * GLYPH_STAGGER_SEC + GLYPH_DURATION_SEC } export interface PolishedToastSurfaceProps { title: string description?: string messageKey?: string politeness?: "status" | "alert" translucent?: boolean rimVariant?: RimVariant /** Sonner toast id from `toast.custom((id) => …)`; required for the dismiss control. */ toastId?: number | string /** When true (default with {@link showPolishedToast}), renders a Dismiss control. */ closeButton?: boolean className?: string } /** * Card + staggered title/body — for Sonner `toast.custom`. For a close control, * pass `toastId` from the custom renderer and `closeButton` (see {@link showPolishedToast}). */ export function PolishedToastSurface({ title, description, messageKey: messageKeyProp, politeness = "status", translucent = true, rimVariant = "default", toastId, closeButton = false, className, }: PolishedToastSurfaceProps) { const reduceMotion = useReducedMotion() ?? false const messageKey = messageKeyProp ?? `${title}\0${description ?? ""}` const bodyDelaySec = useMemo( () => approximatePriorLineStaggerEndSec(title, reduceMotion) * 0.35, [title, reduceMotion] ) const ariaLive = politeness === "alert" ? "assertive" : "polite" return (

{description ? ( ) : null}

{closeButton && toastId != null ? ( ) : null}

) } export type PolishedToastOptions = Omit & { title: string description?: string messageKey?: string politeness?: "status" | "alert" rimVariant?: RimVariant } function buildMessageKey(o: PolishedToastOptions) { return o.messageKey ?? `${o.title}\0${o.description ?? ""}` } export function showPolishedToast(options: PolishedToastOptions) { const { title, description, messageKey, politeness = "status", rimVariant = "default", duration, closeButton = true, className: toastClassName, ...rest } = options const mk = buildMessageKey({ ...options, messageKey }) return sonnerToast.custom( (id) => ( ), { duration: duration ?? 4000, ...rest, className: cn( "flex w-full max-w-md border-none bg-transparent p-0 shadow-none", "[&_[data-content]]:w-full [&_[data-title]]:w-full", toastClassName ), } ) } /** * Sonner host for polished custom toasts and standard `toast()` calls. * Transparent host chrome for {@link showPolishedToast} is applied per toast in * {@link showPolishedToast} so default success/error toasts keep normal styling. */ export function PolishedToaster({ className, ...props }: ComponentProps) { return ( <> ) } 4f:["$","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"}]]}]}],["$","li","sonner",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","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":"sonner"}]]}]}]]}],["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":["button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/halo-toast.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]