63: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"] 64: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"] 65: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"] 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"],"ScrollBar"] 67: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"] 68:T47e9,"use client"; import { useId, useRef, useState } from "react"; // --------------------------------------------------------------------------- // SpecieClip — a partial-refund control drawn as a struck coin: an SVG disc // with a reeded edge (120 ticks, every 3deg) and the outstanding amount as // its face. Refunding is CLIPPING: the user drags a chord across the disc // and the sector on the far side of it is the refund. // // The one governing scalar is `refundFrac` (0-1). Geometry and money are // bound by the real circular-segment area formula, not a linear ratio: // fracAtD(d) = (acos(d) - d*sqrt(1-d^2)) / pi for d in [-1, 1] // where d is the chord's signed offset from the disc centre in radius // units. This is exact and cheap (one acos), so live dragging reads the // chord's pixel position and evaluates it directly, forward, every move. // The INVERSE — "what chord position pays out exactly 25%, or exactly // $30.00" — has no closed form (acos - d*sqrt(1-d^2) isn't solvable for d // algebraically), so whenever refundFrac is the source of truth (keyboard // step, typed amount, a snapped detent, a controlled-prop sync) the chord // position is looked up from a 256-sample table of fracAtD(d) built once at // module load and walked with linear interpolation. Forward = formula. // Backward = table. Both directions always agree because they're the same // curve; nothing here is a disguised linear slider. // // RENDER: the coin is drawn twice, once per side of the chord, each a full // disc + full reeded edge + full face text, each clipped to its half by a // rect driven by the same chord x. Together the two halves are // pixel-identical to one undivided coin — the seam is the clip boundary, // nothing is faked. On commit (button only, never on drag release) the far // side's is torn free with a single 280ms translate+fade tween along // the chord's normal, eased ease-out-expo (1 - 2^(-10t), a real physical // deceleration curve, not a CSS approximation) and driven imperatively via // rAF writing the SVG `transform`/`opacity` attributes directly — CSS // transitions on inline SVG groups are ambiguous about px-vs-user-space // under viewBox scaling, so this keeps the shear numerically exact in the // same coordinate system as the ticks it's carrying with it. The shear // reads from that geometry alone — the departing 's own translate+fade // is the only signal that it's being torn free. When the tween lands, the // coin re-strikes: the outstanding amount drops by the refund and the // chord resets to the disc's edge (0% again), ready for the next partial // refund. The live cut line inside the coin (the chord's visible // position, doubling as the otherwise-invisible role=slider handle's // value indicator) is drawn in --border, the same value the disc's own // edge stroke uses — it reads as another physical seam of the coin, not // an accent highlight. The clip boundary alone can't carry that job: the // two halves are deliberately pixel-identical to one undivided coin at // rest, so the boundary itself is invisible until commit tears the cut // half free. --ns-accent appears only on the keyboard focus ring — the // one genuinely interaction-tied, never rest-state, use of it. // --------------------------------------------------------------------------- const VB = 200; // svg viewBox is VB x VB const CX = VB / 2; const CY = VB / 2; const FACE_R = 78; // metal disc radius const OUTER_R = 92; // reeded-edge tick outer radius const TICK_STEP_DEG = 3; const TICK_ANGLES: number[] = Array.from( { length: 360 / TICK_STEP_DEG }, (_, i) => i * TICK_STEP_DEG ); const LUT_SIZE = 256; const SHEAR_MS = 280; const SHEAR_DX = 46; // svg user units the cut sector travels on commit const SNAP_PX = 4; // real screen px radius for detent snapping function clamp(v: number, lo: number, hi: number) { return Math.min(hi, Math.max(lo, v)); } function round2(v: number) { return Math.round(v * 100) / 100; } /** Area, as a fraction of the whole disc, that lies on the far side (x > d) * of a chord at signed offset d (in radius units, -1..1) from the centre of * a unit circle. Exact, closed-form, monotonically decreasing 1 -> 0. */ function fracAtD(d: number): number { const dc = clamp(d, -1, 1); return (Math.acos(dc) - dc * Math.sqrt(1 - dc * dc)) / Math.PI; } // Precomputed once: FRAC_TABLE[i] = fracAtD(d) for d sampled uniformly // across [-1, 1]. fracAtD has no algebraic inverse, so recovering "the d // that pays out this fraction" is done by walking this table, never by // re-deriving it per call. const FRAC_TABLE: number[] = Array.from({ length: LUT_SIZE }, (_, i) => fracAtD(-1 + (2 * i) / (LUT_SIZE - 1)) ); /** Inverse of fracAtD: given a target refund fraction, find the chord * offset d that produces it — binary search into FRAC_TABLE (monotonic * descending) plus linear interpolation between the two bracketing * samples. */ function dForFrac(frac: number): number { const f = clamp(frac, 0, 1); let lo = 0; let hi = LUT_SIZE - 1; while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (FRAC_TABLE[mid] > f) lo = mid; else hi = mid; } const fLo = FRAC_TABLE[lo]; const fHi = FRAC_TABLE[hi]; const span = fLo - fHi; const u = span > 1e-9 ? (fLo - f) / span : 0; const dLo = -1 + (2 * lo) / (LUT_SIZE - 1); const dHi = -1 + (2 * hi) / (LUT_SIZE - 1); return dLo + (dHi - dLo) * u; } /** Rounds a raw dollar amount to a "nice" support-refund step, scaled to * the size of the charge — $120 rounds to $5s, $1200 rounds to $100s. */ function niceStep(chargeValue: number): number { if (chargeValue <= 20) return 1; if (chargeValue <= 100) return 5; if (chargeValue <= 500) return 10; if (chargeValue <= 2000) return 25; return 100; } /** Snaps a raw drag-derived fraction to the nearest of {25%, 50%, 100%, one * nice round dollar amount} if that candidate's chord position is within * SNAP_PX real pixels of the raw one — else returns the raw fraction * untouched. */ function snapFrac( rawD: number, rawFrac: number, chargeValue: number, pxPerUnit: number ): number { if (!(pxPerUnit > 0)) return rawFrac; const rawPx = rawD * FACE_R; const candidates: number[] = [0.25, 0.5, 1]; if (chargeValue > 0) { const step = niceStep(chargeValue); const rounded = clamp( Math.round((chargeValue * rawFrac) / step) * step, 0, chargeValue ); candidates.push(rounded / chargeValue); } let best = rawFrac; let bestDist = Infinity; for (const c of candidates) { const px = dForFrac(c) * FACE_R; const dist = Math.abs(px - rawPx) * pxPerUnit; if (dist < bestDist) { bestDist = dist; best = c; } } return bestDist <= SNAP_PX ? best : rawFrac; } function fmt(amount: number, symbol: string) { return `${symbol}${amount.toFixed(2)}`; } function easeOutExpo(t: number) { return t >= 1 ? 1 : 1 - Math.pow(2, -10 * t); } interface DiscFaceProps { label: string; } /** The struck face: disc + reeded edge + amount. Rendered twice (once per * clip half) so the two halves are, together, one undivided coin. */ function DiscFace({ label }: DiscFaceProps) { return ( <> {TICK_ANGLES.map((deg) => { const rad = (deg * Math.PI) / 180; const cos = Math.cos(rad); const sin = Math.sin(rad); // rounded: Math.cos/sin can differ by a ULP between Node (SSR) and the // browser's engine (CSR), which surfaced as x2="62.58022883702639" on // the server vs 62.5802288370264 on the client — a hydration mismatch // despite both being "correct". return ( ); })} {label} ); } export interface SpecieClipProps { /** controlled outstanding charge amount available to refund */ chargeAmount?: number; /** uncontrolled initial charge amount */ defaultChargeAmount?: number; /** controlled refund fraction, 0-1 */ refundFrac?: number; /** uncontrolled initial refund fraction */ defaultRefundFrac?: number; /** currency symbol prefix */ currencySymbol?: string; /** fires on every drag/keyboard/typed change to the fraction (no money moves) */ onRefundFracChange?: (frac: number) => void; /** fires once the refund is committed via the button, after the shear settles */ onRefund?: (refundedAmount: number, remainingAmount: number) => void; /** extra classes merged onto the root element */ className?: string; } export function SpecieClip({ chargeAmount, defaultChargeAmount = 120, refundFrac, defaultRefundFrac = 0.25, currencySymbol = "$", onRefundFracChange, onRefund, className = "", }: SpecieClipProps) { const isChargeControlled = chargeAmount !== undefined; const [chargeInternal, setChargeInternal] = useState(() => Math.max(0, defaultChargeAmount) ); const chargeValue = isChargeControlled ? (chargeAmount as number) : chargeInternal; const isFracControlled = refundFrac !== undefined; const [fracInternal, setFracInternal] = useState(() => clamp(defaultRefundFrac, 0, 1) ); const fracValue = isFracControlled ? (refundFrac as number) : fracInternal; const [dragging, setDragging] = useState(false); const [committing, setCommitting] = useState(false); const [ledgerMsg, setLedgerMsg] = useState(""); const coinBoxRef = useRef(null); const handleRef = useRef(null); const cutGroupRef = useRef(null); const keptClipId = useId(); const cutClipId = useId(); const inputId = useId(); const commitFracChange = (next: number) => { const q = clamp(next, 0, 1); if (!isFracControlled) setFracInternal(q); onRefundFracChange?.(q); }; const d = dForFrac(fracValue); const chordXpx = clamp(CX + d * FACE_R, CX - FACE_R, CX + FACE_R); const refundAmt = round2(chargeValue * fracValue); const remainingAmt = round2(Math.max(0, chargeValue - refundAmt)); const pct = Math.round(fracValue * 100); const valueText = `refund ${fmt(refundAmt, currencySymbol)} of ${fmt( chargeValue, currencySymbol )}, ${pct}%`; const updateFromClientX = (clientX: number) => { const box = coinBoxRef.current; if (!box) return; const rect = box.getBoundingClientRect(); if (rect.width <= 0) return; const xLocal = ((clientX - rect.left) / rect.width) * VB; const rawD = clamp((xLocal - CX) / FACE_R, -1, 1); const rawFrac = clamp(fracAtD(rawD), 0, 1); const pxPerUnit = rect.width / VB; const snapped = snapFrac(rawD, rawFrac, chargeValue, pxPerUnit); commitFracChange(snapped); }; const onCoinPointerDown = (e: React.PointerEvent) => { if (committing) return; e.preventDefault(); e.currentTarget.setPointerCapture(e.pointerId); handleRef.current?.focus({ preventScroll: true }); setDragging(true); updateFromClientX(e.clientX); }; const onCoinPointerMove = (e: React.PointerEvent) => { if (!dragging) return; updateFromClientX(e.clientX); }; const endDrag = () => setDragging(false); const onHandleKeyDown = (e: React.KeyboardEvent) => { if (committing || chargeValue <= 0) return; const step = 1 / chargeValue; const bigStep = 10 / chargeValue; let next: number | null = null; switch (e.key) { case "ArrowRight": case "ArrowUp": next = fracValue + (e.shiftKey ? bigStep : step); break; case "ArrowLeft": case "ArrowDown": next = fracValue - (e.shiftKey ? bigStep : step); break; case "Home": next = 0; break; case "End": next = 1; break; default: return; } e.preventDefault(); commitFracChange(clamp(next, 0, 1)); }; const handleCommit = () => { if (committing || refundAmt <= 0 || chargeValue <= 0) return; setCommitting(true); const refunded = refundAmt; const remaining = remainingAmt; const reduced = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; const finalize = () => { const g = cutGroupRef.current; g?.removeAttribute("transform"); g?.removeAttribute("opacity"); if (!isChargeControlled) setChargeInternal(remaining); if (!isFracControlled) setFracInternal(0); onRefundFracChange?.(0); onRefund?.(refunded, remaining); setLedgerMsg( `Refunded ${fmt(refunded, currencySymbol)}. ${fmt( remaining, currencySymbol )} remaining.` ); setCommitting(false); }; const g = cutGroupRef.current; if (reduced || !g) { g?.setAttribute("transform", `translate(${SHEAR_DX} 0)`); g?.setAttribute("opacity", "0"); finalize(); return; } const start = performance.now(); const step = (now: number) => { const t = clamp((now - start) / SHEAR_MS, 0, 1); const e = easeOutExpo(t); g.setAttribute("transform", `translate(${SHEAR_DX * e} 0)`); g.setAttribute("opacity", String(1 - e)); if (t < 1) requestAnimationFrame(step); else finalize(); }; requestAnimationFrame(step); }; const onInputChange = (e: React.ChangeEvent) => { if (committing) return; const raw = Number.parseFloat(e.target.value); const amt = Number.isFinite(raw) ? clamp(raw, 0, chargeValue) : 0; commitFracChange(chargeValue > 0 ? amt / chargeValue : 0); }; return (

{`Refund ${fmt(refundAmt, currencySymbol)}`} {`of ${fmt(chargeValue, currencySymbol)} · ${pct}%`}

Amount

{ledgerMsg}

); } 62:["$","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,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/specie-clip/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/specie-clip.tsx"}],"className":"h-[70svh] min-h-80"}]]}]