64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 67:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 68: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 69:T3b99,"use client"; import { useEffect, useRef, useState } from "react"; // --------------------------------------------------------------------------- // PlumbTrue — a success moment built on a plumb bob instead of confetti or a // checkmark draw. Pressing the trigger stands in for the real event (payment // confirmed, deploy finished, form accepted) firing *before* any motion plays: // the accessible announcement and onConfirm fire synchronously at the press, // then a bob drops from a fixed anchor on a fine string (translateY, gravity // ease-in, a hard stop at full string length — no bounce in the length // itself), and the sudden stop kicks it into a pendulum swing (rotate about // the anchor) that decays through a few honest diminishing oscillations // (closed-form damped cosine, recomputed every frame — no keyframe list) back // to hanging dead straight. The card carries a second, fixed vertical datum // line at the same x as the anchor: while swinging, the string visibly // diverges from it; the moment the swing decays to rest the two are // collinear — that coincidence *is* the verification, not a separate symbol. // Only then does a level line draw outward from the bob's tip in both // directions (stroke-dashoffset, ease-out-expo) and the success text rises // and fades onto it. Two faint echo copies of the string+bob, tinted via // color-mix, trail the first swing and fade out — an optional motion-blur // read, never load-bearing. // // The pendulum's continuous per-frame pose is written straight to SVG // attributes/style via refs (no React state on that path); the few discrete // phase changes (armed -> settled, live-region text, button label) go through // React state since they render only a handful of times per mount. Reduced // motion skips the drop/swing/echoes entirely and snaps straight to the // settled pose — the level line and text are simply already there, per the // brief's "reduced motion renders the bob at rest, line and text already // placed." Every color is a var(--token) reference read straight off the // cascade (SVG attribute values resolve CSS custom properties natively), so // there is nothing to re-derive on theme change. // --------------------------------------------------------------------------- export interface PlumbTrueProps { /** small line above the trigger, shown only while pending */ pendingCopy?: string; /** label on the trigger button before it's pressed */ pendingLabel?: string; /** label shown on the button while the bob is dropping/swinging */ armingLabel?: string; /** announced immediately (role=status) and set onto the level line at rest */ successMessage?: string; /** label the same button carries once settled — the real next action */ nextActionLabel?: string; /** fires synchronously at press, before any motion — this *is* the event */ onConfirm?: () => void; /** fires when the settled button is pressed */ onNextAction?: () => void; /** extra classes merged onto the rendered root element */ className?: string; } type Phase = "pending" | "active" | "settled"; // -- geometry (SVG user units, viewBox 0 0 240 160) -------------------------- const VB_W = 240; const VB_H = 160; const ANCHOR_X = 120; const ANCHOR_Y = 16; const STRING_LEN = 92; // bob: a small teardrop, local origin at its attach point, tip pointing down const BOB_PATH = "M -6 4 A 6 6 0 1 1 6 4 Q 6 15 0 21 Q -6 15 -6 4 Z"; const BOB_TIP_Y = 21; // local y of the tip, relative to the bob's attach point const LEVEL_Y = ANCHOR_Y + STRING_LEN + BOB_TIP_Y; // world y the level line draws at const LEVEL_HALF = 84; // px the level line reaches left/right of center const DATUM_TOP = 30; const DATUM_BOTTOM = 126; // -- timing/physics ----------------------------------------------------------- const DROP_MS = 200; // straight fall, ease-in, hard stop at STRING_LEN const SWING_MS = 950; // pendulum decay window after the stop const SWING_AMP = 15; // deg, deflection right at the stop (the "overshoot") const SWING_PERIOD = 330; // ms per oscillation (~2.9 cycles over SWING_MS) const SWING_TAU = 260; // ms, exponential decay time-constant const ECHO_FADE_MS = 500; // ghost trail only reads during the first swing const LEVEL_MS = 260; // ease-out-expo level-line draw const TEXT_MS = 300; // success text fade + rise function easeInQuad(t: number) { return t * t; } export function PlumbTrue({ pendingCopy = "Order total $49.00", pendingLabel = "Confirm payment", armingLabel = "Confirming…", successMessage = "Payment confirmed", nextActionLabel = "View receipt", onConfirm, onNextAction, className = "", }: PlumbTrueProps) { const [phase, setPhase] = useState("pending"); const [reduced, setReduced] = useState(false); const [live, setLive] = useState(""); const phaseRef = useRef("pending"); const reducedRef = useRef(false); const rafRef = useRef(0); const buttonRef = useRef(null); const wasSettled = useRef(false); const groupRef = useRef(null); const stringRef = useRef(null); const bobRef = useRef(null); const echo1GroupRef = useRef(null); const echo1StringRef = useRef(null); const echo1BobRef = useRef(null); const echo2GroupRef = useRef(null); const echo2StringRef = useRef(null); const echo2BobRef = useRef(null); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const sync = () => { reducedRef.current = mq.matches; setReduced(mq.matches); }; sync(); mq.addEventListener("change", sync); return () => { mq.removeEventListener("change", sync); cancelAnimationFrame(rafRef.current); }; }, []); // move focus onto the primary next action once settled, so a screen reader // (or a keyboard user who never looked away) lands where the flow expects useEffect(() => { if (phase === "settled" && !wasSettled.current) { wasSettled.current = true; buttonRef.current?.focus(); } }, [phase]); function applyPose(l: number, thetaDeg: number) { const s = stringRef.current; const b = bobRef.current; const g = groupRef.current; if (s) s.setAttribute("y2", String(ANCHOR_Y + l)); if (b) b.setAttribute("transform", `translate(${ANCHOR_X} ${ANCHOR_Y + l})`); if (g) g.style.transform = `rotate(${thetaDeg.toFixed(3)}deg)`; } function applyEcho( groupEl: SVGGElement | null, stringEl: SVGLineElement | null, bobEl: SVGPathElement | null, thetaDeg: number, opacity: number ) { if (stringEl) stringEl.setAttribute("y2", String(ANCHOR_Y + STRING_LEN)); if (bobEl) bobEl.setAttribute("transform", `translate(${ANCHOR_X} ${ANCHOR_Y + STRING_LEN})`); if (groupEl) { groupEl.style.transform = `rotate(${thetaDeg.toFixed(3)}deg)`; groupEl.style.opacity = opacity.toFixed(3); } } function snapSettled() { applyPose(STRING_LEN, 0); applyEcho(echo1GroupRef.current, echo1StringRef.current, echo1BobRef.current, 0, 0); applyEcho(echo2GroupRef.current, echo2StringRef.current, echo2BobRef.current, 0, 0); } function startAnimation() { const start = performance.now(); const tick = (now: number) => { const elapsed = now - start; if (elapsed < DROP_MS) { const l = STRING_LEN * easeInQuad(elapsed / DROP_MS); applyPose(l, 0); } else if (elapsed < DROP_MS + SWING_MS) { const tt = elapsed - DROP_MS; const theta = SWING_AMP * Math.exp(-tt / SWING_TAU) * Math.cos((2 * Math.PI * tt) / SWING_PERIOD); applyPose(STRING_LEN, theta); const echoOpacity = Math.max(0, 1 - tt / ECHO_FADE_MS) * 0.2; for (const lag of [40, 80] as const) { const et = Math.max(0, tt - lag); const etheta = SWING_AMP * Math.exp(-et / SWING_TAU) * Math.cos((2 * Math.PI * et) / SWING_PERIOD); if (lag === 40) { applyEcho(echo1GroupRef.current, echo1StringRef.current, echo1BobRef.current, etheta, echoOpacity); } else { applyEcho(echo2GroupRef.current, echo2StringRef.current, echo2BobRef.current, etheta, echoOpacity * 0.6); } } } else { snapSettled(); phaseRef.current = "settled"; setPhase("settled"); rafRef.current = 0; return; } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); } function confirm() { if (phaseRef.current !== "pending") return; // irreversible: one press decides it phaseRef.current = "active"; setPhase("active"); // the real event happens now, in full, regardless of what the instrument // goes on to draw — announcement and callback are never gated on motion setLive(successMessage); onConfirm?.(); if (reducedRef.current) { snapSettled(); phaseRef.current = "settled"; setPhase("settled"); } else { startAnimation(); } } function handleClick() { if (phaseRef.current === "pending") confirm(); else if (phaseRef.current === "settled") onNextAction?.(); // mid-swing presses are inert: the outcome is already decided } const settled = phase === "settled"; const textTop = (LEVEL_Y / VB_H) * 100; const buttonLabel = phase === "pending" ? pendingLabel : settled ? nextActionLabel : armingLabel; return (

{/* real DOM success text — sits just below the level line, clear of the resting bob (which occupies the space directly above the tip), and rises the last 8px up into that resting spot as it fades in */}

{successMessage}

{pendingCopy}

{/* announced immediately at confirm() — never delayed for the instrument */}

{live}

); } 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/loud/success-plumb-bob/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/success-plumb-bob.tsx"}],"className":"h-[70svh] min-h-80"}]]}]