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:T1882,"use client"; import { useEffect, useId, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode, } from "react"; import { cn } from "./lib/cn"; import "./shared/action-label.css"; import "./hold-to-confirm.css"; function usePrefersReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => setReduced(query.matches); update(); query.addEventListener("change", update); return () => query.removeEventListener("change", update); }, []); return reduced; } /** * An irreversible action that needs a deliberate gesture. The fill soaks out * from where the press landed, a countdown says how long is left, and letting * go drains it back. Space or Enter can be held from the keyboard. */ export function HoldToConfirm({ children, label = "Hold to confirm", doneLabel = "Confirmed", duration = 1500, onConfirm, className, }: { children?: ReactNode; /** Accessible name and visible label while idle. */ label?: string; /** Label after the hold completes. */ doneLabel?: string; /** How long to hold, in milliseconds. */ duration?: number; onConfirm: () => void; className?: string; }) { const hint = useId(); const reduced = usePrefersReducedMotion(); const [progress, setProgress] = useState(0); const [phase, setPhase] = useState<"idle" | "holding" | "draining" | "done">("idle"); const [origin, setOrigin] = useState<{ x: number; size: number } | null>(null); const [announcement, setAnnouncement] = useState(""); const frame = useRef(null); const started = useRef(0); const holding = useRef(false); const finished = useRef(false); useEffect( () => () => { if (frame.current != null) cancelAnimationFrame(frame.current); }, [], ); function tick(now: number) { if (!holding.current) return; const next = Math.min(1, (now - started.current) / duration); setProgress(next); if (next >= 1) { holding.current = false; finished.current = true; setPhase("done"); setAnnouncement(doneLabel); onConfirm(); return; } frame.current = requestAnimationFrame(tick); } function begin(x: number, width: number) { if (finished.current || holding.current) return; holding.current = true; started.current = performance.now(); setOrigin({ x, size: width * 2.4 }); setPhase("holding"); setAnnouncement(""); frame.current = requestAnimationFrame(tick); } function release() { window.removeEventListener("pointerup", release); window.removeEventListener("pointercancel", release); if (!holding.current || finished.current) return; holding.current = false; if (frame.current != null) cancelAnimationFrame(frame.current); setPhase("draining"); setProgress(0); setAnnouncement("Released early. Nothing happened."); } function onPointerDown(event: PointerEvent) { if (event.button !== 0) return; const rect = event.currentTarget.getBoundingClientRect(); try { event.currentTarget.setPointerCapture(event.pointerId); } catch { // A stale pointer cannot be captured; the window listener still ends the hold. } window.addEventListener("pointerup", release); window.addEventListener("pointercancel", release); begin(event.clientX - rect.left, rect.width); } function onKeyDown(event: KeyboardEvent) { if (event.key !== " " && event.key !== "Enter") return; event.preventDefault(); if (event.repeat) return; const width = event.currentTarget.offsetWidth; begin(width / 2, width); } const done = phase === "done"; const remaining = Math.max(0, ((1 - progress) * duration) / 1000).toFixed(1); const lit = done ? 4 : Math.floor(progress * 4); return ( ); } 55:T693,/* hold-to-confirm.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Hold to confirm: the fill soaks out from the press point at the hold's own pace (driven per frame), then drains back on the settle curve. */ [data-slot="hold-to-confirm"] { box-shadow: var(--shadow-danger); transition: translate var(--duration-normal) var(--ease-settle); } [data-slot="hold-to-confirm"][data-phase="holding"] { translate: 0 var(--motion-press-travel); box-shadow: var(--shadow-danger-press); transition-duration: 90ms; } [data-slot="hold-to-confirm"]:disabled { cursor: default; } [data-slot="hold-fill"] { position: absolute; top: 50%; z-index: 0; border-radius: 50%; background: rgb(0 0 0 / 34%); pointer-events: none; } [data-slot="hold-to-confirm"][data-phase="draining"] [data-slot="hold-fill"] { transition: transform 380ms var(--ease-settle); } [data-slot="hold-countdown"] { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.8; } [data-slot="hold-notches"] { position: absolute; inset-inline: 14px; bottom: 6px; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } [data-slot="hold-notches"] i { height: 3px; border-radius: 2px; background: rgb(255 255 255 / 28%); } [data-slot="hold-notches"] i[data-on="true"] { background: #ffffff; } @media (prefers-reduced-motion: reduce) { [data-slot="hold-to-confirm"], [data-slot="hold-fill"] { transition: none !important; } } } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L52",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/hold-to-confirm.tsx","content":"$54","type":"registry:ui","target":"components/ui/hold-to-confirm.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/shared/action-label.css","content":"/* Shared by action-button.tsx, copy-button.tsx, hold-to-confirm.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n /* Action button: every phase's label shares one grid cell, so the button\n is always as wide as its widest label and never shifts. */\n [data-slot=\"action-labels\"] {\n display: inline-grid;\n justify-items: center;\n }\n [data-slot=\"action-label\"] {\n grid-area: 1 / 1;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--duration-fast) var(--ease-out), visibility 0s linear var(--duration-fast);\n }\n [data-slot=\"action-label\"][data-active=\"true\"] {\n visibility: visible;\n opacity: 1;\n transition: opacity var(--duration-fast) var(--ease-out), visibility 0s;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"action-label\"],\n [data-slot=\"action-label\"][data-active=\"true\"] {\n transition: none !important;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/action-label.css"},{"path":"ui/hold-to-confirm.css","content":"$55","type":"registry:file","target":"components/ui/hold-to-confirm.css"}],"className":"h-[70svh] min-h-80"}]]}]