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:Tf7c,"use client"; import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react"; import type { ReactNode } from "react"; import confettiModule from "canvas-confetti"; import type { GlobalOptions as ConfettiGlobalOptions, Options as ConfettiOptions, CreateTypes as ConfettiInstance, } from "canvas-confetti"; import { useLiveRef } from "../../internals/dom/use-live-ref"; import { ConfettiReactContext } from "./context"; import type { ConfettiContextValue } from "./context"; /** * The imperative surface the root exposes. * * The Svelte source declares `export function fire(...)`, which Svelte 5 hangs * off the component instance (`bind:this={c}; c.fire()`). React has no instance, * so the same method is published through the ref channel. This is the ONE place * the port's `forwardRef` is not backed by a `ref = $bindable` declaration: the * ref carries the handle, not the DOM node, because there is no bindable node to * carry and dropping `fire` would delete a public method. */ export interface ConfettiHandle { /** Fire the canvas instance. `opts` is merged over the component's `options`. */ fire: (opts?: ConfettiOptions) => void; } export interface ConfettiProps { /** Default confetti options, merged under every `fire()` call. */ options?: ConfettiOptions; /** Canvas creation options, read once when the instance is created. */ globalOptions?: ConfettiGlobalOptions; /** Skip the automatic fire on mount. */ manualStart?: boolean; /** Canvas CSS classes. */ className?: string; /** Content rendered next to the canvas — typically the buttons that fire it. */ children?: ReactNode; } /** * Canvas wrapper owning one `canvas-confetti` instance and publishing its * `fire` through context, so any `ConfettiButton` below it paints onto this * canvas rather than the library's own full-page one. * * Rest props are not spread: the Svelte source reads only these props off * `$props()` and has no `...restProps`. */ export const Confetti = forwardRef( ( { options = {}, globalOptions = {}, manualStart = false, className = "", children }, ref ) => { const canvasRef = useRef(null); const instanceRef = useRef(null); // `fire` closes over the *current* `options` on the Svelte side because // `options` is reactive there. Live refs reproduce that without rebuilding // the callback — which keeps both the context value and the ref handle // identity-stable for the life of the component. const optionsRef = useLiveRef(options); const globalOptionsRef = useLiveRef(globalOptions); const manualStartRef = useLiveRef(manualStart); const fire = useCallback((opts: ConfettiOptions = {}) => { instanceRef.current?.({ ...optionsRef.current, ...opts }); }, [optionsRef]); useImperativeHandle(ref, () => ({ fire }), [fire]); const context = useMemo(() => ({ fire }), [fire]); // The counterpart of `onMount` + its returned teardown. `fire` is stable, // so this runs exactly once; `globalOptions` and `manualStart` are read // through their live refs because the Svelte source reads them once, at // mount, and never re-creates the instance when they change. useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; instanceRef.current = confettiModule.create(canvas, { ...globalOptionsRef.current, resize: true, }); if (!manualStartRef.current) { fire(); } return () => { if (instanceRef.current) { instanceRef.current.reset(); instanceRef.current = null; } }; }, [fire, globalOptionsRef, manualStartRef]); return (

); } ); Confetti.displayName = "Confetti"; 53:Tbc9,"use client"; import { forwardRef } from "react"; import type { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react"; import confetti from "canvas-confetti"; import type { Options as ConfettiOptions } from "canvas-confetti"; import { useSoundCue } from "../../sound/use-sound"; import { useSoundFeedback } from "../../sound/sound-feedback"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { ConfettiReactContext } from "./context"; type BaseProps = { /** Confetti options for this button, merged over the surrounding root's options. */ options?: ConfettiOptions; /** Button content. */ children?: ReactNode; /** * Plays the `hover` cue on mouse/pen pointer enter and the `press` cue on * click. Off by default; only audible once the user has enabled sound. */ sound?: boolean; /** Custom CSS class */ className?: string; }; export interface ConfettiButtonProps extends BaseProps, Omit, keyof BaseProps> {} /** * Button that fires confetti from its own centre. * * Inside a `Confetti` it paints on that component's canvas; outside one it falls * back to the module-level confetti and its full-page canvas. * * `type` defaults to `"button"` so it never submits a surrounding form; `className` * and native button attributes are forwarded, and a consumer `onClick` runs once * after the burst. */ export const ConfettiButton = forwardRef( function ConfettiButton( { options = {}, children, sound = false, className, type = "button", onClick, ...restProps }, ref ) { const confettiContext = ConfettiReactContext.useOptional(); const playCue = useSoundCue(sound); // Hover cue for mouse/pen pointers only. `on: {}` binds nothing when sound is // off (and never the default click → press, which `handleClick` already plays). const soundRef = useSoundFeedback({ on: sound ? { pointerenter: "hover" } : {}, disabled: !!restProps.disabled, }); const composedRef = useComposedRefs(ref, soundRef); function handleClick(event: MouseEvent) { if (restProps.disabled) return; // The cue fires before the burst, matching the Svelte source: the click // resolves nothing, so it gets `press` rather than a success cue. The // root's own auto-fire on mount stays silent — this button owns the // only cue in the family. playCue("press"); const target = event.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top + rect.height / 2; const origin = { x: x / window.innerWidth, y: y / window.innerHeight, }; if (confettiContext) { confettiContext.fire({ ...options, origin }); } else { confetti({ ...options, origin }); } onClick?.(event); } return ( ); } ); 54:T488,"use client"; /** * The contract `Confetti` publishes to the buttons rendered inside it. * * The Svelte source keys this on the string `"ConfettiContext"` via * `setContext` / `getContext`; React's own context object plays that role * here. It is deliberately NOT re-exported from `index.ts` — the Svelte * `index.ts` exports only the two components, so the key has no public * identity on either side. */ import type { Options as ConfettiOptions } from "canvas-confetti"; import { createInternalContext } from "../../internals/dom/context"; /** What the canvas root publishes: the one imperative method its children call. */ export interface ConfettiContextValue { /** Fire the shared canvas instance, merging `opts` over the root's own `options`. */ fire: (opts?: ConfettiOptions) => void; } /** * Read with `ConfettiReactContext.useOptional()` — a `ConfettiButton` rendered * outside a `Confetti` gets `undefined` and falls back to the module-level * confetti, exactly as `getContext` returning `undefined` does on the Svelte side. */ export const ConfettiReactContext = createInternalContext("ConfettiContext"); 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","canvas-confetti@^1.9.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/canvas-confetti","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":"canvas-confetti@^1.9.4"}]]}]}]]}],["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/confetti/Confetti.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/confetti/Confetti.tsx"},{"path":"react/src/components/confetti/ConfettiButton.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/confetti/ConfettiButton.tsx"},{"path":"react/src/components/confetti/context.ts","content":"$54","type":"registry:ui","target":"@ui/fancy/components/confetti/context.ts"},{"path":"react/src/components/confetti/index.ts","content":"\"use client\";\n\nexport { Confetti } from \"./Confetti\";\nexport type { ConfettiProps } from \"./Confetti\";\nexport { ConfettiButton } from \"./ConfettiButton\";\nexport type { ConfettiButtonProps } from \"./ConfettiButton\";\n","type":"registry:ui","target":"@ui/fancy/components/confetti/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]