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:T1f30,"use client"; import { useEffect, useRef, useState, type ButtonHTMLAttributes, type CSSProperties, type KeyboardEvent, type PointerEvent, } from "react"; export interface FuseButtonProps extends ButtonHTMLAttributes { /** Ms the button must be held for the fuse to burn all the way round. */ duration?: number; /** Spark and burst color. */ color?: string; /** Called once the fuse finishes burning. */ onComplete?: () => void; } const SPARKS = 14; const EMBERS = 5; const css = ` @keyframes fuse-button-spark{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}} @keyframes fuse-button-ring{from{transform:translate(-50%,-50%) scale(.15);opacity:.9}to{transform:translate(-50%,-50%) scale(1);opacity:0}} @keyframes fuse-button-flash{from{opacity:.45}to{opacity:0}} @keyframes fuse-button-regrow{from{opacity:0}to{opacity:1}}`; /** Pill outline starting at top center, running clockwise. */ function pill(w: number, h: number, inset = 1) { const r = h / 2 - inset; const l = inset + r; const rt = w - inset - r; const t = inset; const b = h - inset; return `M${w / 2} ${t}H${rt}A${r} ${r} 0 0 1 ${rt} ${b}H${l}A${r} ${r} 0 0 1 ${l} ${t}Z`; } export function FuseButton({ duration = 1600, color = "#fb923c", onComplete, className, children, disabled, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, ...props }: FuseButtonProps) { const btn = useRef(null); const fuse = useRef(null); const spark = useRef(null); const loop = useRef({ p: 0, holding: false, raf: 0, last: 0, calm: false }); const [size, setSize] = useState({ w: 0, h: 0 }); const [bursts, setBursts] = useState(0); useEffect(() => { const el = btn.current; if (!el) return; const ro = new ResizeObserver(() => setSize({ w: el.offsetWidth, h: el.offsetHeight })); ro.observe(el); const st = loop.current; return () => { ro.disconnect(); cancelAnimationFrame(st.raf); }; }, []); // Direct DOM writes: burnt part hidden via dash offset, spark parked at the burn point. const draw = (p: number) => { const path = fuse.current; const g = spark.current; if (!path || !g) return; const len = path.getTotalLength(); path.style.strokeDasharray = `${len} ${len}`; path.style.strokeDashoffset = `${-p * len}`; const pt = path.getPointAtLength(p * len); g.setAttribute("transform", `translate(${pt.x} ${pt.y})`); g.style.opacity = p > 0 ? "1" : "0"; if (loop.current.calm) return; g.querySelectorAll("[data-ember]").forEach((c) => { const a = Math.random() * Math.PI * 2; const d = 4 + Math.random() * 10; c.setAttribute("cx", `${Math.cos(a) * d}`); c.setAttribute("cy", `${Math.sin(a) * d}`); c.style.opacity = `${Math.random()}`; }); }; const tick = (now: number) => { const st = loop.current; const dt = Math.min(50, Math.max(0, now - st.last)); // rAF time can precede performance.now() st.last = now; // Burns forward while held, snaps back quickly when released early. st.p += st.holding ? dt / duration : -dt / 280; if (st.p >= 1) { st.p = 0; st.holding = false; st.raf = 0; draw(0); setBursts((b) => b + 1); onComplete?.(); return; } if (st.p <= 0 && !st.holding) { st.p = 0; st.raf = 0; draw(0); return; } draw(st.p); st.raf = requestAnimationFrame(tick); }; const start = () => { const st = loop.current; if (disabled || st.holding) return; st.holding = true; st.calm = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (!st.raf) { st.last = performance.now(); st.raf = requestAnimationFrame(tick); } }; const stop = () => { loop.current.holding = false; }; const key = (e: KeyboardEvent, down: boolean) => { if (e.key !== " " && e.key !== "Enter") return; e.preventDefault(); if (down && !e.repeat) start(); if (!down) stop(); }; const { w, h } = size; return ( ); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"registry/ui/fuse-button.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]