52: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"] 53: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"] 54:T52f1,"use client" /** * Polished notification surface (`HaloPolishedToastSurface`) and * {@link HaloPolishedNotification} — slide + fade shell for local * `` use. Self-contained {@link HaloCard}, rim variants, and * glyph stagger (no imports from `halo-card.tsx`). App-wide Sonner toasts: * `@/components/cult-pro/halo-toast`. */ import { forwardRef, useEffect, useMemo, useState, type ComponentProps, type ReactNode, } from "react" import { Button as ButtonPrimitive } from "@base-ui/react/button" import { XIcon } from "lucide-react" import { motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react" import { cn } from "@/lib/utils" /* ─── Rim + card chrome (self-contained; no halo-card import) ─── */ const paddingClass = { none: "", sm: "p-4", md: "p-6", lg: "p-8", } as const const BORDER_TRAIL_LOOP_MS = 5250 /** Inner corner radius for content inside `rounded-2xl` + `p-px` (concentric nested radii). */ const CARD_INNER_RADIUS_CLASS = "rounded-[calc(1rem-1px)]" 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 NotificationCardBorderTrail({ 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 notificationBorderGlowConfig( 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 NotificationBorderGlowState = ReturnType< typeof notificationBorderGlowConfig > function NotificationCardRimBlobs({ borderGlow, reduceMotion, }: { borderGlow: NotificationBorderGlowState reduceMotion: boolean }) { return (

) } function notificationFillBackgroundFor( 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 NotificationHaloCardProps 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( () => notificationBorderGlowConfig(translucent, rimEmphasis, rimVariant), [translucent, rimEmphasis, rimVariant] ) const fillBackground = useMemo( () => notificationFillBackgroundFor(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" /* ─── Notification surface ─── */ 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 /** Bump when the message identity changes so stagger replays. */ 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 HaloPolishedToastSurfaceProps { title: string description?: string /** * Change when the notification shows a new message so title/body stagger replay. * Defaults to `title` + `description` (stable for identical copy). */ messageKey?: string /** `status` for non-urgent updates; `alert` for urgent/interruptive content. */ politeness?: "status" | "alert" onDismiss?: () => void /** Forwarded to the local `HaloCard`. */ translucent?: boolean /** Rim blob + border-trail palette (success / error vs default). */ rimVariant?: RimVariant className?: string } /** * Card + staggered text + optional dismiss — use inside Sonner `toast.custom`, or wrap with * `HaloPolishedNotification` for local AnimatePresence. */ export function HaloPolishedToastSurface({ title, description, messageKey: messageKeyProp, politeness = "status", onDismiss, translucent = true, rimVariant = "default", className, }: HaloPolishedToastSurfaceProps) { 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}

{onDismiss ? ( ) : null}

) } const ENTER_EXIT_SEC = 0.2 const ENTER_EXIT_SEC_REDUCED = 0.12 const slideOffsetPx = 12 export interface HaloPolishedNotificationProps extends HaloPolishedToastSurfaceProps, Omit, "children" | "title"> { /** Slide direction for enter/exit (`transform: translateY`). */ slideFrom?: "top" | "bottom" } export const HaloPolishedNotification = forwardRef< HTMLDivElement, HaloPolishedNotificationProps >(function HaloPolishedNotification( { title, description, messageKey, politeness, onDismiss, slideFrom = "bottom", translucent, rimVariant, className, ...motionProps }, ref ) { const reduceMotion = useReducedMotion() ?? false const travelY = slideFrom === "top" ? -slideOffsetPx : slideOffsetPx const duration = reduceMotion ? ENTER_EXIT_SEC_REDUCED : ENTER_EXIT_SEC const { animate, exit, initial, transition, ...restMotionProps } = motionProps return ( ) }) HaloPolishedNotification.displayName = "HaloPolishedNotification" 51:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/halo-notification.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]