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:T594e,"use client" import * as React from "react" import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area" import type SignaturePad from "signature_pad" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { ScrollArea as InlineScrollArea, ScrollBar, } from "@/components/ui/scroll-area" import { PdfBlockResizableShell } from "@/components/extend/pdf-block-resizable-shell" import { PDFViewer } from "@/components/extend/pdf-viewer" import { IconPlaceholder } from "@/components/icon-placeholder" type BoundingBox = { x: number y: number width: number height: number } type SignatureField = { id: string label: string page: number bbox: BoundingBox imageDataUrl?: string } const PAGE_WIDTH = 612 const PAGE_HEIGHT = 792 const DEFAULT_ZOOM = 1 const SIGNATURE_PAD_PADDING = 8 const SIGNATURE_PAD_BACKGROUND_COLOR = "#ffffff" const SIGNATURE_PAD_PEN_COLOR = "#000000" const DEFAULT_SIGNATURE_ASPECT_RATIO = 3 const INITIAL_FIELD: SignatureField = { id: "signature-1", label: "Signature", page: 1, bbox: { x: 300, y: 504, width: 250, height: 58 }, } function bboxToStyle(bbox: BoundingBox): React.CSSProperties { return { left: `${(bbox.x / PAGE_WIDTH) * 100}%`, top: `${(bbox.y / PAGE_HEIGHT) * 100}%`, width: `${(bbox.width / PAGE_WIDTH) * 100}%`, height: `${(bbox.height / PAGE_HEIGHT) * 100}%`, } } function getSignatureAspectRatio(bbox?: BoundingBox): number { if (!bbox || bbox.width <= 0 || bbox.height <= 0) { return DEFAULT_SIGNATURE_ASPECT_RATIO } return bbox.width / bbox.height } function getSignatureGuideSize({ containerWidth, containerHeight, aspectRatio, }: { containerWidth: number containerHeight: number aspectRatio: number }): { width: number height: number } { const maxWidth = Math.max(containerWidth - SIGNATURE_PAD_PADDING * 2, 1) const maxHeight = Math.max(containerHeight - SIGNATURE_PAD_PADDING * 2, 1) if (maxWidth / maxHeight > aspectRatio) { const height = maxHeight return { width: height * aspectRatio, height, } } const width = maxWidth return { width, height: width / aspectRatio, } } function getSignatureDataUrl(canvas: HTMLCanvasElement): string { return canvas.toDataURL("image/png") } function SignatureDialog({ open, fieldBbox, initialValue, onOpenChange, onConfirm, }: { open: boolean fieldBbox: BoundingBox initialValue?: string onOpenChange: (open: boolean) => void onConfirm: (value: string) => void }) { const canvasContainerRef = React.useRef(null) const canvasRef = React.useRef(null) const signaturePadRef = React.useRef(null) const [isReady, setIsReady] = React.useState(false) const [hasSignature, setHasSignature] = React.useState(false) const [guideSize, setGuideSize] = React.useState<{ width: number height: number } | null>(null) const signatureAspectRatio = React.useMemo( () => getSignatureAspectRatio(fieldBbox), [fieldBbox] ) const [previousOpen, setPreviousOpen] = React.useState(open) if (previousOpen !== open) { setPreviousOpen(open) if (!open) { setGuideSize(null) setIsReady(false) setHasSignature(false) } } const canInitialize = Boolean( open && guideSize && guideSize.width > 1 && guideSize.height > 1 ) if (!canInitialize && isReady) setIsReady(false) React.useEffect(() => { if (!open) return let frameId = 0 let resizeObserver: ResizeObserver | null = null const updateGuideSize = (container?: HTMLDivElement | null) => { const currentContainer = container ?? canvasContainerRef.current if ( !currentContainer || currentContainer.clientWidth <= 0 || currentContainer.clientHeight <= 0 ) { return false } const nextSize = getSignatureGuideSize({ containerWidth: currentContainer.clientWidth, containerHeight: currentContainer.clientHeight, aspectRatio: signatureAspectRatio, }) setGuideSize((previousSize) => { if ( previousSize && Math.abs(previousSize.width - nextSize.width) < 0.5 && Math.abs(previousSize.height - nextSize.height) < 0.5 ) { return previousSize } return nextSize }) return true } const connect = () => { const container = canvasContainerRef.current if (!updateGuideSize(container)) { frameId = window.requestAnimationFrame(connect) return } if (container) { resizeObserver = new ResizeObserver(() => { updateGuideSize(container) }) resizeObserver.observe(container) } } connect() return () => { window.cancelAnimationFrame(frameId) resizeObserver?.disconnect() } }, [open, signatureAspectRatio]) React.useEffect(() => { if (!open || !guideSize || guideSize.width <= 1 || guideSize.height <= 1) { signaturePadRef.current?.off() signaturePadRef.current = null return } let cancelled = false let resizeObserver: ResizeObserver | null = null const syncCanvasSize = (canvas: HTMLCanvasElement) => { const width = Math.max(canvas.offsetWidth, 1) const height = Math.max(canvas.offsetHeight, 1) const ratio = Math.max(window.devicePixelRatio || 1, 1) canvas.style.width = `${width}px` canvas.style.height = `${height}px` canvas.width = Math.floor(width * ratio) canvas.height = Math.floor(height * ratio) const context = canvas.getContext("2d") context?.setTransform(1, 0, 0, 1, 0, 0) context?.scale(ratio, ratio) return { width, height, ratio } } const initialize = async () => { const canvas = canvasRef.current if (!canvas) return const { default: SignaturePadConstructor } = await import("signature_pad") if (cancelled) return const signaturePad = new SignaturePadConstructor(canvas, { minWidth: 1, maxWidth: 2, penColor: SIGNATURE_PAD_PEN_COLOR, }) signaturePadRef.current = signaturePad const loadSignature = async (dataUrl?: string) => { const size = syncCanvasSize(canvas) if (dataUrl) { await signaturePad.fromDataURL(dataUrl, size) setHasSignature(true) return } signaturePad.clear() setHasSignature(false) } await loadSignature(initialValue) if (cancelled) return signaturePad.addEventListener("endStroke", () => { setHasSignature(true) }) resizeObserver = new ResizeObserver(() => { const currentCanvas = canvasRef.current const currentSignaturePad = signaturePadRef.current if (!currentCanvas || !currentSignaturePad) return const previousSignature = currentSignaturePad.isEmpty() ? undefined : currentSignaturePad.toDataURL("image/png") void loadSignature(previousSignature) }) resizeObserver.observe(canvas) setIsReady(true) } const animationFrame = window.requestAnimationFrame(() => { void initialize() }) return () => { cancelled = true window.cancelAnimationFrame(animationFrame) resizeObserver?.disconnect() signaturePadRef.current?.off() signaturePadRef.current = null setIsReady(false) } }, [open, guideSize, initialValue]) return ( ) } function SignatureFieldOverlay({ field, onOpen, }: { field: SignatureField onOpen: () => void }) { return ( ) } async function downloadSignedPdf({ file, field, }: { file: string field: SignatureField }) { const { PDFDocument } = await import("pdf-lib") const existingPdfBytes = await fetch(file).then((response) => response.arrayBuffer() ) const pdfDocument = await PDFDocument.load(existingPdfBytes) const page = pdfDocument.getPage(field.page - 1) if (field.imageDataUrl) { const signatureImage = await pdfDocument.embedPng(field.imageDataUrl) const { width: pageWidth, height: pageHeight } = page.getSize() const scaleX = pageWidth / PAGE_WIDTH const scaleY = pageHeight / PAGE_HEIGHT const fieldWidth = field.bbox.width * scaleX const fieldHeight = field.bbox.height * scaleY const fieldX = field.bbox.x * scaleX const fieldY = pageHeight - (field.bbox.y + field.bbox.height) * scaleY page.drawImage(signatureImage, { x: fieldX, y: fieldY, width: fieldWidth, height: fieldHeight, }) } const bytes = await pdfDocument.save() const blob = new Blob([new Uint8Array(bytes)], { type: "application/pdf" }) const url = URL.createObjectURL(blob) const anchor = document.createElement("a") anchor.href = url anchor.download = "signed-document.pdf" anchor.click() URL.revokeObjectURL(url) } function SignatureFieldsPanel({ field, className, canExport, isDownloading, onSign, onClear, onDownload, }: { field: SignatureField className?: string canExport: boolean isDownloading: boolean onSign: () => void onClear: () => void onDownload: () => void }) { return (

Signature fields

Review fields, collect signatures, and export a signed PDF.

{field.label}

{field.imageDataUrl ? "Signed" : "Unsigned"}

{Math.round(field.bbox.width)} x{" "} {Math.round(field.bbox.height)} on page {field.page}

{field.imageDataUrl ? ( ) : null}

) } export function ESignatureBlock({ file }: { file?: string }) { const [field, setField] = React.useState(INITIAL_FIELD) const [dialogOpen, setDialogOpen] = React.useState(false) const [isDownloading, setIsDownloading] = React.useState(false) const handleDownload = React.useCallback(async () => { if (!file || !field.imageDataUrl) return setIsDownloading(true) try { await downloadSignedPdf({ file, field }) } finally { setIsDownloading(false) } }, [field, file]) return ( <> Download } renderPageOverlay={({ pageNumber }) => pageNumber === field.page ? ( setDialogOpen(true)} /> ) : null } /> } right={ setDialogOpen(true)} onClear={() => setField((previousField) => ({ ...previousField, imageDataUrl: undefined, })) } onDownload={handleDownload} /> } /> { setField((previousField) => ({ ...previousField, imageDataUrl })) }} /> ) } function InlineDialogPanel({ className, children, ...props }: React.ComponentProps<"div">) { return (

{children}

) } function InlineScrollArea2({ className, children, orientation = "both", scrollFade = false, scrollbarGutter = false, scrollbarOverflowOnly = false, viewportClassName, viewportProps, viewportRef, ...props }: InlineScrollAreaProps) { const { className: viewportPropsClassName, ref: viewportPropsRef, ...resolvedViewportProps } = viewportProps ?? {} const composedViewportRef = React.useMemo( () => InlineComposeRefs(viewportPropsRef, viewportRef), [viewportPropsRef, viewportRef] ) if ( !viewportProps && !viewportRef && !viewportClassName && !scrollFade && !scrollbarGutter && !scrollbarOverflowOnly ) { return ( [data-orientation=vertical]]:hidden", className )} > {children} {orientation !== "vertical" ? ( ) : null} ) } return ( {children} {orientation !== "horizontal" ? ( ) : null} {orientation !== "vertical" ? ( ) : null} {orientation === "both" ? : null} ) } type InlineScrollAreaProps = ScrollAreaPrimitive.Root.Props & { orientation?: "vertical" | "horizontal" | "both" scrollFade?: boolean scrollbarGutter?: boolean scrollbarOverflowOnly?: boolean viewportClassName?: string viewportProps?: ScrollAreaPrimitive.Viewport.Props viewportRef?: React.Ref } function InlineComposeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (!ref) continue if (typeof ref === "function") ref(node) else ref.current = node } } } 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","pdf-lib@^1.17.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/pdf-lib","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":"pdf-lib@^1.17.1"}]]}]}],["$","li","signature_pad@^5.1.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/signature_pad","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":"signature_pad@^5.1.3"}]]}]}],["$","li","@base-ui/react@^1.4.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.4.1"}]]}]}]]}],["$","$L4e",null,{"namespace":"@extend","registryDependencies":["@extend/pdf-block-resizable-shell","@extend/pdf-viewer","utils","button","dialog","scroll-area"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/new-york-v4/blocks/e-signature.tsx","content":"$50","type":"registry:component","target":"@components/blocks/e-signature.tsx"}],"className":"h-[70svh] min-h-80"}]]}]