{"name":"toast-gooey-renderer","type":"registry:ui","files":[{"path":"toast-gooey-renderer.tsx","type":"registry:ui","content":"import {\n\ttype CSSProperties,\n\ttype MouseEventHandler,\n\tmemo,\n\ttype ReactNode,\n\ttype TransitionEventHandler,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport type { GooeyButton, GooeyState, GooeyStyles } from \"./toast-gooey-types\";\nimport \"./toast-gooey.css\";\nimport {\n\tArrowRight,\n\tCheck,\n\tCircleAlert,\n\tLifeBuoy,\n\tLoaderCircle,\n\tX,\n} from \"./toast-gooey-icons\";\n\n/* --------------------------------- Config --------------------------------- */\n\nconst HEIGHT = 40;\nconst WIDTH = 350;\nconst DEFAULT_ROUNDNESS = 18;\nconst BLUR_RATIO = 0.5;\nconst PILL_PADDING = 10;\nconst MIN_EXPAND_RATIO = 2.25;\nconst SWAP_COLLAPSE_MS = 200;\nconst HEADER_EXIT_MS = 150;\n\ntype State = GooeyState;\n\ninterface View {\n\ttitle?: string;\n\tdescription?: ReactNode | string;\n\tstate: State;\n\ticon?: ReactNode | null;\n\tstyles?: GooeyStyles;\n\tbutton?: GooeyButton;\n\tfill?: string;\n}\n\ninterface GooeyProps {\n\tid: string;\n\tfill?: string;\n\tstate?: State;\n\ttitle?: string;\n\tdescription?: ReactNode | string;\n\tposition?: \"left\" | \"center\" | \"right\";\n\texpand?: \"top\" | \"bottom\";\n\tclassName?: string;\n\ticon?: ReactNode | null;\n\tstyles?: GooeyStyles;\n\tbutton?: GooeyButton;\n\troundness?: number;\n\texiting?: boolean;\n\tautoExpandDelayMs?: number;\n\tautoCollapseDelayMs?: number;\n\tcanExpand?: boolean;\n\tinterruptKey?: string;\n\trefreshKey?: string;\n\tonMouseEnter?: MouseEventHandler<HTMLButtonElement>;\n\tonMouseLeave?: MouseEventHandler<HTMLButtonElement>;\n\tonDismiss?: () => void;\n}\n\n/* ---------------------------------- Icons --------------------------------- */\n\nconst STATE_ICON: Record<State, ReactNode> = {\n\tsuccess: <Check />,\n\tloading: <LoaderCircle data-gooey-icon=\"spin\" aria-hidden=\"true\" />,\n\terror: <X />,\n\twarning: <CircleAlert />,\n\tinfo: <LifeBuoy />,\n\taction: <ArrowRight />,\n};\n\n/* ----------------------------- Memoised Defs ------------------------------ */\nconst GooeyDefs = memo(function GooeyDefs({\n\tfilterId,\n\tblur,\n}: {\n\tfilterId: string;\n\tblur: number;\n}) {\n\treturn (\n\t\t<defs>\n\t\t\t<filter\n\t\t\t\tid={filterId}\n\t\t\t\tx=\"-20%\"\n\t\t\t\ty=\"-20%\"\n\t\t\t\twidth=\"140%\"\n\t\t\t\theight=\"140%\"\n\t\t\t\tcolorInterpolationFilters=\"sRGB\"\n\t\t\t>\n\t\t\t\t<feGaussianBlur in=\"SourceGraphic\" stdDeviation={blur} result=\"blur\" />\n\t\t\t\t<feColorMatrix\n\t\t\t\t\tin=\"blur\"\n\t\t\t\t\tmode=\"matrix\"\n\t\t\t\t\tvalues=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10\"\n\t\t\t\t\tresult=\"goo\"\n\t\t\t\t/>\n\t\t\t\t<feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n\t\t\t</filter>\n\t\t</defs>\n\t);\n});\n\n/* ------------------------------- Component -------------------------------- */\n\nexport const Gooey = memo(function Gooey({\n\tid,\n\tfill,\n\tstate = \"success\",\n\ttitle = state,\n\tdescription,\n\tposition = \"left\",\n\texpand = \"bottom\",\n\tclassName,\n\ticon,\n\tstyles,\n\tbutton,\n\troundness,\n\texiting = false,\n\tautoExpandDelayMs,\n\tautoCollapseDelayMs,\n\tcanExpand,\n\tinterruptKey,\n\trefreshKey,\n\tonMouseEnter,\n\tonMouseLeave,\n\tonDismiss,\n}: GooeyProps) {\n\tconst next: View = useMemo(\n\t\t() => ({ title, description, state, icon, styles, button, fill }),\n\t\t[title, description, state, icon, styles, button, fill],\n\t);\n\n\tconst [view, setView] = useState<View>(next);\n\tconst [applied, setApplied] = useState(refreshKey);\n\tconst [isExpanded, setIsExpanded] = useState(false);\n\tconst [ready, setReady] = useState(false);\n\tconst [pillWidth, setPillWidth] = useState(0);\n\tconst [contentHeight, setContentHeight] = useState(0);\n\tconst hasDesc = Boolean(view.description) || Boolean(view.button);\n\tconst isLoading = view.state === \"loading\";\n\tconst open = hasDesc && isExpanded && !isLoading;\n\tconst allowExpand = isLoading\n\t\t? false\n\t\t: (canExpand ?? (!interruptKey || interruptKey === id));\n\n\tconst headerKey = `${view.state}-${view.title}`;\n\tconst filterId = `gooey-gooey-${id}`;\n\tconst resolvedRoundness = Math.max(0, roundness ?? DEFAULT_ROUNDNESS);\n\tconst blur = resolvedRoundness * BLUR_RATIO;\n\n\tconst headerRef = useRef<HTMLDivElement>(null);\n\tconst contentRef = useRef<HTMLDivElement>(null);\n\tconst headerExitRef = useRef<number | null>(null);\n\tconst autoExpandRef = useRef<number | null>(null);\n\tconst autoCollapseRef = useRef<number | null>(null);\n\tconst swapTimerRef = useRef<number | null>(null);\n\tconst lastRefreshKeyRef = useRef(refreshKey);\n\tconst pendingRef = useRef<{ key?: string; payload: View } | null>(null);\n\tconst [headerLayer, setHeaderLayer] = useState<{\n\t\tcurrent: { key: string; view: View };\n\t\tprev: { key: string; view: View } | null;\n\t}>({ current: { key: headerKey, view }, prev: null });\n\n\t/* ------------------------------ Measurements ------------------------------ */\n\n\tconst innerRef = useRef<HTMLDivElement>(null);\n\n\tconst headerPadRef = useRef<number | null>(null);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: headerLayer.current.key is used to force a re-render\n\tuseLayoutEffect(() => {\n\t\tconst el = innerRef.current;\n\t\tconst header = headerRef.current;\n\t\tif (!el || !header) return;\n\t\tif (headerPadRef.current === null) {\n\t\t\tconst cs = getComputedStyle(header);\n\t\t\theaderPadRef.current =\n\t\t\t\tparseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);\n\t\t}\n\t\tconst px = headerPadRef.current;\n\t\tconst measure = () => {\n\t\t\tconst w = el.scrollWidth + px + PILL_PADDING;\n\t\t\tif (w > PILL_PADDING) {\n\t\t\t\tsetPillWidth((prev) => (prev === w ? prev : w));\n\t\t\t}\n\t\t};\n\t\tmeasure();\n\t\tlet rafId = 0;\n\t\tconst ro = new ResizeObserver(() => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\trafId = requestAnimationFrame(measure);\n\t\t});\n\t\tro.observe(el);\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tro.disconnect();\n\t\t};\n\t}, [headerLayer.current.key]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!hasDesc) {\n\t\t\tsetContentHeight(0);\n\t\t\treturn;\n\t\t}\n\t\tconst el = contentRef.current;\n\t\tif (!el) return;\n\t\tconst measure = () => {\n\t\t\tconst h = el.scrollHeight;\n\t\t\tsetContentHeight((prev) => (prev === h ? prev : h));\n\t\t};\n\t\tmeasure();\n\t\tlet rafId = 0;\n\t\tconst ro = new ResizeObserver(() => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\trafId = requestAnimationFrame(measure);\n\t\t});\n\t\tro.observe(el);\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tro.disconnect();\n\t\t};\n\t}, [hasDesc]);\n\n\tuseEffect(() => {\n\t\tconst raf = requestAnimationFrame(() => setReady(true));\n\t\treturn () => cancelAnimationFrame(raf);\n\t}, []);\n\n\tuseLayoutEffect(() => {\n\t\tsetHeaderLayer((state) => {\n\t\t\tif (state.current.key === headerKey) {\n\t\t\t\tif (state.current.view === view) return state;\n\t\t\t\treturn { ...state, current: { key: headerKey, view } };\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tprev: state.current,\n\t\t\t\tcurrent: { key: headerKey, view },\n\t\t\t};\n\t\t});\n\t}, [headerKey, view]);\n\n\tuseEffect(() => {\n\t\tif (!headerLayer.prev) return;\n\t\tif (headerExitRef.current) {\n\t\t\tclearTimeout(headerExitRef.current);\n\t\t}\n\t\theaderExitRef.current = window.setTimeout(() => {\n\t\t\theaderExitRef.current = null;\n\t\t\tsetHeaderLayer((state) => ({ ...state, prev: null }));\n\t\t}, HEADER_EXIT_MS);\n\t\treturn () => {\n\t\t\tif (headerExitRef.current) {\n\t\t\t\tclearTimeout(headerExitRef.current);\n\t\t\t\theaderExitRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [headerLayer.prev]);\n\n\t/* ----------------------------- Refresh logic ------------------------------ */\n\n\tuseEffect(() => {\n\t\tif (refreshKey === undefined) {\n\t\t\tsetView(next);\n\t\t\tsetApplied(undefined);\n\t\t\tpendingRef.current = null;\n\t\t\tlastRefreshKeyRef.current = refreshKey;\n\t\t\treturn;\n\t\t}\n\n\t\tif (lastRefreshKeyRef.current === refreshKey) return;\n\t\tlastRefreshKeyRef.current = refreshKey;\n\n\t\tif (swapTimerRef.current) {\n\t\t\tclearTimeout(swapTimerRef.current);\n\t\t\tswapTimerRef.current = null;\n\t\t}\n\n\t\tif (open) {\n\t\t\tpendingRef.current = { key: refreshKey, payload: next };\n\t\t\tsetIsExpanded(false);\n\t\t\tswapTimerRef.current = window.setTimeout(() => {\n\t\t\t\tswapTimerRef.current = null;\n\t\t\t\tconst pending = pendingRef.current;\n\t\t\t\tif (!pending) return;\n\t\t\t\tsetView(pending.payload);\n\t\t\t\tsetApplied(pending.key);\n\t\t\t\tpendingRef.current = null;\n\t\t\t}, SWAP_COLLAPSE_MS);\n\t\t} else {\n\t\t\tpendingRef.current = null;\n\t\t\tsetView(next);\n\t\t\tsetApplied(refreshKey);\n\t\t}\n\t}, [open, refreshKey, next]);\n\n\t/* ----------------------------- Auto expand/collapse ----------------------- */\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: applied is used to force a re-render\n\tuseEffect(() => {\n\t\tif (!hasDesc) return;\n\n\t\tif (autoExpandRef.current) clearTimeout(autoExpandRef.current);\n\t\tif (autoCollapseRef.current) clearTimeout(autoCollapseRef.current);\n\n\t\tif (exiting || !allowExpand) {\n\t\t\tsetIsExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (autoExpandDelayMs == null && autoCollapseDelayMs == null) return;\n\n\t\tconst expandDelay = autoExpandDelayMs ?? 0;\n\t\tconst collapseDelay = autoCollapseDelayMs ?? 0;\n\n\t\tif (expandDelay > 0) {\n\t\t\tautoExpandRef.current = window.setTimeout(\n\t\t\t\t() => setIsExpanded(true),\n\t\t\t\texpandDelay,\n\t\t\t);\n\t\t} else {\n\t\t\tsetIsExpanded(true);\n\t\t}\n\n\t\tif (collapseDelay > 0) {\n\t\t\tautoCollapseRef.current = window.setTimeout(\n\t\t\t\t() => setIsExpanded(false),\n\t\t\t\tcollapseDelay,\n\t\t\t);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (autoExpandRef.current) clearTimeout(autoExpandRef.current);\n\t\t\tif (autoCollapseRef.current) clearTimeout(autoCollapseRef.current);\n\t\t};\n\t}, [\n\t\tautoCollapseDelayMs,\n\t\tautoExpandDelayMs,\n\t\thasDesc,\n\t\tallowExpand,\n\t\texiting,\n\t\tapplied,\n\t]);\n\n\t/* ------------------------------ Derived values ---------------------------- */\n\n\tconst minExpanded = HEIGHT * MIN_EXPAND_RATIO;\n\tconst rawExpanded = hasDesc\n\t\t? Math.max(minExpanded, HEIGHT + contentHeight)\n\t\t: minExpanded;\n\n\tconst frozenExpandedRef = useRef(rawExpanded);\n\tif (open) {\n\t\tfrozenExpandedRef.current = rawExpanded;\n\t}\n\n\tconst expanded = open ? rawExpanded : frozenExpandedRef.current;\n\tconst svgHeight = hasDesc ? Math.max(expanded, minExpanded) : HEIGHT;\n\tconst expandedContent = Math.max(0, expanded - HEIGHT);\n\tconst resolvedPillWidth = Math.max(pillWidth || HEIGHT, HEIGHT);\n\tconst pillHeight = HEIGHT + blur * 3;\n\n\tconst pillX =\n\t\tposition === \"right\"\n\t\t\t? WIDTH - resolvedPillWidth\n\t\t\t: position === \"center\"\n\t\t\t\t? (WIDTH - resolvedPillWidth) / 2\n\t\t\t\t: 0;\n\n\t/* ------------------------------- Inline styles ---------------------------- */\n\n\tconst rootStyle = useMemo<CSSProperties & Record<string, string>>(\n\t\t() => ({\n\t\t\t\"--_h\": `${open ? expanded : HEIGHT}px`,\n\t\t\t\"--_pw\": `${resolvedPillWidth}px`,\n\t\t\t\"--_px\": `${pillX}px`,\n\t\t\t\"--_sy\": `${open ? 1 : HEIGHT / pillHeight}`,\n\t\t\t\"--_ph\": `${pillHeight}px`,\n\t\t\t\"--_by\": `${open ? 1 : 0}`,\n\t\t\t\"--_ht\": `translateY(${open ? (expand === \"bottom\" ? 3 : -3) : 0}px) scale(${open ? 0.9 : 1})`,\n\t\t\t\"--_co\": `${open ? 1 : 0}`,\n\t\t}),\n\t\t[open, expanded, resolvedPillWidth, pillX, expand, pillHeight],\n\t);\n\n\t/* -------------------------------- Handlers -------------------------------- */\n\n\tconst handleEnter: MouseEventHandler<HTMLButtonElement> = useCallback(\n\t\t(e) => {\n\t\t\tonMouseEnter?.(e);\n\t\t\tif (hasDesc) setIsExpanded(true);\n\t\t},\n\t\t[hasDesc, onMouseEnter],\n\t);\n\n\tconst handleLeave: MouseEventHandler<HTMLButtonElement> = useCallback(\n\t\t(e) => {\n\t\t\tonMouseLeave?.(e);\n\t\t\tsetIsExpanded(false);\n\t\t},\n\t\t[onMouseLeave],\n\t);\n\n\tconst handleTransitionEnd: TransitionEventHandler<HTMLButtonElement> =\n\t\tuseCallback(\n\t\t\t(e) => {\n\t\t\t\tif (e.propertyName !== \"height\" && e.propertyName !== \"transform\")\n\t\t\t\t\treturn;\n\t\t\t\tif (open) return;\n\t\t\t\tconst pending = pendingRef.current;\n\t\t\t\tif (!pending) return;\n\t\t\t\tif (swapTimerRef.current) {\n\t\t\t\t\tclearTimeout(swapTimerRef.current);\n\t\t\t\t\tswapTimerRef.current = null;\n\t\t\t\t}\n\t\t\t\tsetView(pending.payload);\n\t\t\t\tsetApplied(pending.key);\n\t\t\t\tpendingRef.current = null;\n\t\t\t},\n\t\t\t[open],\n\t\t);\n\n\t/* -------------------------------- Swipe ----------------------------------- */\n\n\tconst SWIPE_DISMISS = 30;\n\tconst SWIPE_MAX = 20;\n\tconst buttonRef = useRef<HTMLButtonElement>(null);\n\tconst pointerStartRef = useRef<number | null>(null);\n\tconst onDismissRef = useRef(onDismiss);\n\tonDismissRef.current = onDismiss;\n\n\tuseEffect(() => {\n\t\tconst el = buttonRef.current;\n\t\tif (!el) return;\n\n\t\tconst onMove = (e: PointerEvent) => {\n\t\t\tif (pointerStartRef.current === null) return;\n\t\t\tconst dy = e.clientY - pointerStartRef.current;\n\t\t\tconst sign = dy > 0 ? 1 : -1;\n\t\t\tconst clamped = Math.min(Math.abs(dy), SWIPE_MAX) * sign;\n\t\t\tel.style.transform = `translateY(${clamped}px)`;\n\t\t};\n\n\t\tconst onUp = (e: PointerEvent) => {\n\t\t\tif (pointerStartRef.current === null) return;\n\t\t\tconst dy = e.clientY - pointerStartRef.current;\n\t\t\tpointerStartRef.current = null;\n\t\t\tel.style.transform = \"\";\n\t\t\tif (Math.abs(dy) > SWIPE_DISMISS) {\n\t\t\t\tonDismissRef.current?.();\n\t\t\t}\n\t\t};\n\n\t\tel.addEventListener(\"pointermove\", onMove, { passive: true });\n\t\tel.addEventListener(\"pointerup\", onUp, { passive: true });\n\t\treturn () => {\n\t\t\tel.removeEventListener(\"pointermove\", onMove);\n\t\t\tel.removeEventListener(\"pointerup\", onUp);\n\t\t};\n\t}, []);\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (exiting || !onDismiss) return;\n\t\t\tconst target = e.target as HTMLElement;\n\t\t\tif (target.closest(\"[data-gooey-button]\")) return;\n\t\t\tpointerStartRef.current = e.clientY;\n\t\t\te.currentTarget.setPointerCapture(e.pointerId);\n\t\t},\n\t\t[exiting, onDismiss],\n\t);\n\n\t/* --------------------------------- Render --------------------------------- */\n\n\treturn (\n\t\t<button\n\t\t\tref={buttonRef}\n\t\t\ttype=\"button\"\n\t\t\tdata-gooey-toast\n\t\t\tdata-ready={ready}\n\t\t\tdata-expanded={open}\n\t\t\tdata-exiting={exiting}\n\t\t\tdata-edge={expand}\n\t\t\tdata-position={position}\n\t\t\tdata-state={view.state}\n\t\t\tclassName={className}\n\t\t\tstyle={rootStyle}\n\t\t\tonMouseEnter={handleEnter}\n\t\t\tonMouseLeave={handleLeave}\n\t\t\tonTransitionEnd={handleTransitionEnd}\n\t\t\tonPointerDown={handlePointerDown}\n\t\t>\n\t\t\t<div data-gooey-canvas data-edge={expand}>\n\t\t\t\t<svg\n\t\t\t\t\tdata-gooey-svg\n\t\t\t\t\twidth={WIDTH}\n\t\t\t\t\theight={svgHeight}\n\t\t\t\t\tviewBox={`0 0 ${WIDTH} ${svgHeight}`}\n\t\t\t\t>\n\t\t\t\t\t<title>Gooey Notification</title>\n\t\t\t\t\t<GooeyDefs filterId={filterId} blur={blur} />\n\t\t\t\t\t<g filter={`url(#${filterId})`}>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-gooey-pill\n\t\t\t\t\t\t\tx={pillX}\n\t\t\t\t\t\t\trx={resolvedRoundness}\n\t\t\t\t\t\t\try={resolvedRoundness}\n\t\t\t\t\t\t\tstyle={{ fill: view.fill || \"var(--gooey-bg)\" }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tdata-gooey-body\n\t\t\t\t\t\t\ty={HEIGHT}\n\t\t\t\t\t\t\twidth={WIDTH}\n\t\t\t\t\t\t\theight={expandedContent}\n\t\t\t\t\t\t\trx={resolvedRoundness}\n\t\t\t\t\t\t\try={resolvedRoundness}\n\t\t\t\t\t\t\tstyle={{ fill: view.fill || \"var(--gooey-bg)\" }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t</div>\n\n\t\t\t<div ref={headerRef} data-gooey-header data-edge={expand}>\n\t\t\t\t<div data-gooey-header-stack>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={innerRef}\n\t\t\t\t\t\tkey={headerLayer.current.key}\n\t\t\t\t\t\tdata-gooey-header-inner\n\t\t\t\t\t\tdata-layer=\"current\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tdata-gooey-badge\n\t\t\t\t\t\t\tdata-state={headerLayer.current.view.state}\n\t\t\t\t\t\t\tclassName={headerLayer.current.view.styles?.badge}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{headerLayer.current.view.icon ??\n\t\t\t\t\t\t\t\tSTATE_ICON[headerLayer.current.view.state]}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tdata-gooey-title\n\t\t\t\t\t\t\tdata-state={headerLayer.current.view.state}\n\t\t\t\t\t\t\tclassName={headerLayer.current.view.styles?.title}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{headerLayer.current.view.title}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{headerLayer.prev && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={headerLayer.prev.key}\n\t\t\t\t\t\t\tdata-gooey-header-inner\n\t\t\t\t\t\t\tdata-layer=\"prev\"\n\t\t\t\t\t\t\tdata-exiting=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-gooey-badge\n\t\t\t\t\t\t\t\tdata-state={headerLayer.prev.view.state}\n\t\t\t\t\t\t\t\tclassName={headerLayer.prev.view.styles?.badge}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{headerLayer.prev.view.icon ??\n\t\t\t\t\t\t\t\t\tSTATE_ICON[headerLayer.prev.view.state]}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tdata-gooey-title\n\t\t\t\t\t\t\t\tdata-state={headerLayer.prev.view.state}\n\t\t\t\t\t\t\t\tclassName={headerLayer.prev.view.styles?.title}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{headerLayer.prev.view.title}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{hasDesc && (\n\t\t\t\t<div data-gooey-content data-edge={expand} data-visible={open}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={contentRef}\n\t\t\t\t\t\tdata-gooey-description\n\t\t\t\t\t\tclassName={view.styles?.description}\n\t\t\t\t\t>\n\t\t\t\t\t\t{view.description}\n\t\t\t\t\t\t{view.button && (\n\t\t\t\t\t\t\t// biome-ignore lint/a11y/useValidAnchor: cannot use button inside a button\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-gooey-button\n\t\t\t\t\t\t\t\tdata-state={view.state}\n\t\t\t\t\t\t\t\tclassName={view.styles?.button}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\tview.button?.onClick();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{view.button.title}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</button>\n\t);\n});","target":"components/ui/toast-gooey-renderer.tsx"}],"registryDependencies":["https://www.honestui.com/r/toast-gooey-icons.json","https://www.honestui.com/r/toast-gooey-types.json","https://www.honestui.com/r/toast-gooey.css.json"]}