4e: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"] 4f: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"] 50:T3c54,"use client"; import * as React from "react"; import { Eraser, Signature } from "lucide-react"; import { cn } from "@/lib/utils"; export interface SignPoint { x: number; y: number; w: number; } export type SignStroke = SignPoint[]; export interface SignPadValue { dataUrl: string; svg: string; width: number; height: number; strokes: SignStroke[]; } export interface SignPadLabels { start: string; finish: string; done: string; title: string; hint: string; tooShort: string; edit: string; undo: string; clear: string; close: string; } export interface SignPadProps { ref?: React.Ref; onComplete?: (value: SignPadValue) => void; onCancel?: () => void; onChange?: (value: SignPadValue | null) => void; defaultValue?: SignPadValue | null; accent?: string; strokeWidth?: number; minInk?: number; labels?: Partial; className?: string; } const DEFAULT_LABELS: SignPadLabels = { start: "Start signing", finish: "Done", done: "Signing done", title: "Sign", hint: "Sign here", tooShort: "That looks short. Sign a little more.", edit: "Edit signature", undo: "Undo last stroke", clear: "Clear signature", close: "Close", }; type Phase = "idle" | "signing" | "done"; const f = (n: number) => Math.round(n * 100) / 100; function edge(pts: { x: number; y: number }[]) { let d = ""; for (let i = 1; i < pts.length - 1; i++) { const mx = (pts[i].x + pts[i + 1].x) / 2; const my = (pts[i].y + pts[i + 1].y) / 2; d += `Q${f(pts[i].x)} ${f(pts[i].y)} ${f(mx)} ${f(my)}`; } const last = pts[pts.length - 1]; return d + `L${f(last.x)} ${f(last.y)}`; } function outlinePath(stroke: SignStroke, s: number) { const n = stroke.length; if (n === 0) return ""; const P = stroke.map((p) => ({ x: p.x * s, y: p.y * s, r: Math.max((p.w * s) / 2, 0.3), })); if (n === 1) { const { x, y, r } = P[0]; return `M${f(x - r)} ${f(y)}a${f(r)} ${f(r)} 0 1 0 ${f( r * 2, )} 0a${f(r)} ${f(r)} 0 1 0 ${f(-r * 2)} 0Z`; } const left: { x: number; y: number }[] = []; const right: { x: number; y: number }[] = []; for (let i = 0; i < n; i++) { const a = P[Math.max(0, i - 1)]; const b = P[Math.min(n - 1, i + 1)]; const dx = b.x - a.x; const dy = b.y - a.y; const len = Math.hypot(dx, dy) || 1; const nx = -dy / len; const ny = dx / len; left.push({ x: P[i].x + nx * P[i].r, y: P[i].y + ny * P[i].r, }); right.push({ x: P[i].x - nx * P[i].r, y: P[i].y - ny * P[i].r, }); } const first = P[0]; const last = P[n - 1]; const rl = right[n - 1]; const l0 = left[0]; return ( `M${f(l0.x)} ${f(l0.y)}` + edge(left) + `A${f(last.r)} ${f(last.r)} 0 0 0 ${f(rl.x)} ${f(rl.y)}` + edge(right.slice().reverse()) + `A${f(first.r)} ${f(first.r)} 0 0 0 ${f(l0.x)} ${f(l0.y)}Z` ); } function inkLength(strokes: SignStroke[]) { let total = 0; for (const s of strokes) { for (let i = 1; i < s.length; i++) { total += Math.hypot(s[i].x - s[i - 1].x, s[i].y - s[i - 1].y); } } return total; } function cloneStrokes(strokes: SignStroke[]) { return strokes.map((s) => s.map((p) => ({ ...p }))); } function exportSignature(strokes: SignStroke[], s: number, ink: string): SignPadValue { let x0 = Infinity; let y0 = Infinity; let x1 = -Infinity; let y1 = -Infinity; for (const stroke of strokes) { for (const p of stroke) { const r = p.w / 2; x0 = Math.min(x0, p.x - r); y0 = Math.min(y0, p.y - r); x1 = Math.max(x1, p.x + r); y1 = Math.max(y1, p.y + r); } } const pad = 10; const width = Math.ceil((x1 - x0) * s + pad * 2); const height = Math.ceil((y1 - y0) * s + pad * 2); const ox = -x0 * s + pad; const oy = -y0 * s + pad; const d = strokes.map((st) => outlinePath(st, s)).join(""); const svg = ``; const scale = 3; const canvas = document.createElement("canvas"); canvas.width = width * scale; canvas.height = height * scale; const ctx = canvas.getContext("2d"); if (ctx) { ctx.scale(scale, scale); ctx.translate(ox, oy); ctx.fillStyle = ink; for (const st of strokes) { ctx.fill(new Path2D(outlinePath(st, s))); } } return { dataUrl: canvas.toDataURL("image/png"), svg, width, height, strokes: cloneStrokes(strokes), }; } function IconButton({ label, className, ...props }: React.ButtonHTMLAttributes & { label: string; }) { return ( ); } function SignPad({ ref, onComplete, onCancel, onChange, defaultValue = null, accent = "var(--brand, #e1e900)", strokeWidth = 3, minInk = 0.3, labels: labelOverrides, className, }: SignPadProps) { const labels = React.useMemo( () => ({ ...DEFAULT_LABELS, ...labelOverrides, }), [labelOverrides], ); const [signature, setSignature] = React.useState(defaultValue); const [phase, setPhase] = React.useState(defaultValue ? "done" : "idle"); const [resolvedInk, setResolvedInk] = React.useState("#111827"); React.useEffect(() => { const root = document.documentElement; const updateInk = () => { setResolvedInk(root.classList.contains("dark") ? "#f5f5f5" : "#111827"); }; updateInk(); const observer = new MutationObserver(updateInk); observer.observe(root, { attributes: true, attributeFilter: ["class"], }); return () => observer.disconnect(); }, []); const cancel = () => { setPhase(signature ? "done" : "idle"); onCancel?.(); }; const finish = (value: SignPadValue) => { setSignature(value); setPhase("done"); onChange?.(value); onComplete?.(value); }; return (

{phase === "idle" && ( )} {phase === "signing" && ( )} {phase === "done" && ( )}

); } export { SignPad }; 4d:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/clover-ui/sign-pad.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]