@drvillo/react-browser-e-signing 0.1.0 → 0.1.2

package/dist/index.js

@@ -5,7 +5,49 @@ import SignaturePadLibrary from 'signature_pad';
 import fontkit from '@pdf-lib/fontkit';
 import { PDFDocument, StandardFonts } from 'pdf-lib';
 
-// src/components/pdf-viewer.tsx
+// src/lib/signature-fonts.ts
+var loadedFonts = /* @__PURE__ */ new Set();
+var SIGNATURE_FONTS = [
+  "Caveat",
+  "Homemade Apple",
+  "Reenie Beanie",
+  "Mr Dafoe",
+  "Pacifico",
+  "Qwitcher Grypen"
+];
+function buildGoogleFontsCssUrl(family) {
+  const encoded = family.trim().replace(/\s+/g, "+");
+  return `https://fonts.googleapis.com/css2?family=${encoded}&display=swap`;
+}
+async function loadCssFromGoogleFonts(url) {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Unable to load font css from ${url}`);
+  return response.text();
+}
+function extractFontSource(cssText) {
+  const sourceMatch = cssText.match(/src:\s*url\(([^)]+)\)\s*format\(['"]?([^'")]+)['"]?\)/i);
+  if (!sourceMatch) return null;
+  return sourceMatch[1].replace(/['"]/g, "");
+}
+async function loadSignatureFont(fontFamily) {
+  if (loadedFonts.has(fontFamily)) return;
+  if (typeof document === "undefined") return;
+  if (typeof FontFace === "undefined") return;
+  const cssUrl = buildGoogleFontsCssUrl(fontFamily);
+  const cssText = await loadCssFromGoogleFonts(cssUrl);
+  const fontSource = extractFontSource(cssText);
+  if (!fontSource) throw new Error(`Unable to extract font source for ${fontFamily}`);
+  const fontFace = new FontFace(fontFamily, `url(${fontSource})`);
+  await fontFace.load();
+  const fontSet = document.fonts;
+  fontSet.add(fontFace);
+  loadedFonts.add(fontFamily);
+}
+
+// src/lib/cn.ts
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
 if (typeof window !== "undefined") {
   pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 }
@@ -19,27 +61,28 @@ function PdfViewer({
   onScaleChange,
   onDocumentLoadSuccess,
   onPageDimensions,
-  renderOverlay
+  renderOverlay,
+  className
 }) {
   if (!pdfData)
-    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-slate-300 bg-slate-50 p-8 text-center text-sm text-slate-500", children: "Upload a PDF to begin" });
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border border-slate-300 bg-white p-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-sm text-slate-700", children: [
+    return /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-empty", className: cn(className), children: "Upload a PDF to begin" });
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-viewer", className: cn(className), children: [
+    /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-viewer-toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-viewer-page-count", children: [
         "Pages: ",
         numPages || "\u2014"
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-viewer-zoom", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            className: "rounded border border-slate-300 px-2 py-1 text-sm hover:bg-slate-50",
+            "data-slot": "pdf-viewer-zoom-button",
             onClick: () => onScaleChange(Math.max(MIN_SCALE, Number((scale - SCALE_STEP).toFixed(2)))),
             children: "-"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: "w-16 text-center text-sm text-slate-700", children: [
+        /* @__PURE__ */ jsxs("span", { "data-slot": "pdf-viewer-zoom-value", children: [
           Math.round(scale * 100),
           "%"
         ] }),
@@ -47,7 +90,7 @@ function PdfViewer({
           "button",
           {
             type: "button",
-            className: "rounded border border-slate-300 px-2 py-1 text-sm hover:bg-slate-50",
+            "data-slot": "pdf-viewer-zoom-button",
             onClick: () => onScaleChange(Math.min(MAX_SCALE, Number((scale + SCALE_STEP).toFixed(2)))),
             children: "+"
           }
@@ -59,25 +102,33 @@ function PdfViewer({
       {
         file: pdfData,
         onLoadSuccess: (loadedPdf) => onDocumentLoadSuccess(loadedPdf.numPages),
-        loading: /* @__PURE__ */ jsx("div", { className: "text-sm text-slate-500", children: "Loading PDF..." }),
-        error: /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: "Unable to render this PDF." }),
-        children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: Array.from({ length: numPages }, (_, pageIndex) => /* @__PURE__ */ jsxs("div", { className: "relative mx-auto w-fit rounded bg-white p-2 shadow", children: [
-          /* @__PURE__ */ jsx(
-            Page,
-            {
-              pageNumber: pageIndex + 1,
-              scale,
-              renderTextLayer: false,
-              renderAnnotationLayer: false,
-              onLoadSuccess: (page) => onPageDimensions({
-                pageIndex,
-                widthPt: page.view[2],
-                heightPt: page.view[3]
-              })
-            }
-          ),
-          renderOverlay?.(pageIndex)
-        ] }, `pdf-page-${pageIndex}`)) })
+        loading: /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-loading", children: "Loading PDF..." }),
+        error: /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-error", children: "Unable to render this PDF." }),
+        children: /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-pages", children: Array.from({ length: numPages }, (_, pageIndex) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "pdf-viewer-page",
+            style: { position: "relative", margin: "0 auto", width: "fit-content" },
+            children: [
+              /* @__PURE__ */ jsx(
+                Page,
+                {
+                  pageNumber: pageIndex + 1,
+                  scale,
+                  renderTextLayer: false,
+                  renderAnnotationLayer: false,
+                  onLoadSuccess: (page) => onPageDimensions({
+                    pageIndex,
+                    widthPt: page.view[2],
+                    heightPt: page.view[3]
+                  })
+                }
+              ),
+              renderOverlay?.(pageIndex)
+            ]
+          },
+          `pdf-page-${pageIndex}`
+        )) })
       }
     )
   ] });
@@ -95,7 +146,7 @@ function getFieldPreviewText(field, preview) {
   if (field.type === "date") return preview.dateText;
   return "";
 }
-function SignatureField({ field, onUpdateField, onRemoveField, preview }) {
+function SignatureField({ field, onUpdateField, onRemoveField, preview, className }) {
   const rootRef = useRef(null);
   const dragStateRef = useRef(null);
   const resizeStateRef = useRef(null);
@@ -170,49 +221,74 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview }) {
     "div",
     {
       ref: rootRef,
-      className: "absolute rounded border-2 border-blue-500 bg-blue-50/80 shadow-sm select-none",
+      "data-slot": "signature-field",
+      "data-field-type": field.type,
+      className: cn(className),
       style: {
+        position: "absolute",
         left: `${field.xPercent}%`,
         top: `${field.yPercent}%`,
         width: `${field.widthPercent}%`,
-        height: `${field.heightPercent}%`
+        height: `${field.heightPercent}%`,
+        userSelect: "none"
       },
       onPointerDown: handleDragPointerDown,
       onPointerMove: handleDragPointerMove,
       onPointerUp: handleDragPointerUp,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full items-start justify-between gap-2 p-1.5 text-[11px] text-slate-800", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
-            /* @__PURE__ */ jsx("div", { className: "truncate font-semibold capitalize", children: field.type }),
-            field.type === "signature" && preview.signatureDataUrl ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: preview.signatureDataUrl,
-                alt: "signature preview",
-                className: "mt-1 h-[calc(100%-18px)] max-h-full w-full object-contain",
-                draggable: false
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "truncate text-slate-600", children: previewText || "\u2014" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "rounded bg-white/80 px-1 text-xs text-red-600 hover:bg-white",
-              onPointerDown: (event) => event.stopPropagation(),
-              onClick: (event) => {
-                event.stopPropagation();
-                onRemoveField(field.id);
-              },
-              "aria-label": "Remove field",
-              children: "\xD7"
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "signature-field-content",
+            style: {
+              display: "flex",
+              height: "100%",
+              width: "100%",
+              alignItems: "stretch",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { "data-slot": "signature-field-preview", children: [
+                /* @__PURE__ */ jsx("div", { "data-slot": "signature-field-label", children: field.type }),
+                field.type === "signature" && preview.signatureDataUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    "data-slot": "signature-field-preview-image",
+                    src: preview.signatureDataUrl,
+                    alt: "signature preview",
+                    draggable: false
+                  }
+                ) : /* @__PURE__ */ jsx("div", { "data-slot": "signature-field-preview-text", children: previewText || "\u2014" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "signature-field-remove",
+                  onPointerDown: (event) => event.stopPropagation(),
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    onRemoveField(field.id);
+                  },
+                  "aria-label": "Remove field",
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute -bottom-1.5 -right-1.5 h-3 w-3 cursor-nwse-resize rounded-full bg-blue-600",
+            "data-slot": "signature-field-resize",
+            style: {
+              position: "absolute",
+              right: "-0.375rem",
+              bottom: "-0.375rem",
+              width: "0.75rem",
+              height: "0.75rem",
+              cursor: "nwse-resize"
+            },
             onPointerDown: handleResizePointerDown,
             onPointerMove: handleResizePointerMove,
             onPointerUp: handleResizePointerUp
@@ -229,7 +305,8 @@ function FieldOverlay({
   onAddField,
   onUpdateField,
   onRemoveField,
-  preview
+  preview,
+  className
 }) {
   function handleOverlayPointerDown(event) {
     if (!selectedFieldType) return;
@@ -249,7 +326,15 @@ function FieldOverlay({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `absolute inset-0 z-20 rounded ${selectedFieldType ? "cursor-crosshair" : "cursor-default"}`,
+      "data-slot": "field-overlay",
+      "data-state": selectedFieldType ? "placing" : "idle",
+      className: cn(className),
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 20,
+        cursor: selectedFieldType ? "crosshair" : "default"
+      },
       onPointerDown: handleOverlayPointerDown,
       "aria-label": `Field overlay page ${pageIndex + 1}`,
       children: pageFields.map((field) => /* @__PURE__ */ jsx(
@@ -272,14 +357,15 @@ var FIELD_LABELS = {
   date: "Date"
 };
 var FIELD_TYPES = ["signature", "fullName", "title", "date"];
-function FieldPalette({ selectedFieldType, onSelectFieldType }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-lg border border-slate-300 bg-white p-2", children: FIELD_TYPES.map((fieldType) => {
+function FieldPalette({ selectedFieldType, onSelectFieldType, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "field-palette", className: cn(className), children: FIELD_TYPES.map((fieldType) => {
     const isSelected = selectedFieldType === fieldType;
     return /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: `rounded-md border px-3 py-1.5 text-sm font-medium transition ${isSelected ? "border-blue-600 bg-blue-600 text-white" : "border-slate-300 bg-slate-50 text-slate-700 hover:bg-slate-100"}`,
+        "data-slot": "field-palette-button",
+        "data-state": isSelected ? "selected" : "idle",
         onClick: () => onSelectFieldType(isSelected ? null : fieldType),
         "aria-pressed": isSelected,
         children: FIELD_LABELS[fieldType]
@@ -288,43 +374,43 @@ function FieldPalette({ selectedFieldType, onSelectFieldType }) {
     );
   }) });
 }
-function SignerDetailsPanel({ signerInfo, onSignerInfoChange }) {
+function SignerDetailsPanel({ signerInfo, onSignerInfoChange, className }) {
   function handleInputChange(fieldName, fieldValue) {
     onSignerInfoChange({
       ...signerInfo,
       [fieldName]: fieldValue
     });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-slate-300 bg-white p-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-slate-800", children: "Signer Details" }),
-    /* @__PURE__ */ jsxs("label", { className: "block text-sm text-slate-700", children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "signer-panel", className: cn(className), children: [
+    /* @__PURE__ */ jsx("h2", { "data-slot": "signer-panel-heading", children: "Signer Details" }),
+    /* @__PURE__ */ jsxs("label", { "data-slot": "signer-panel-label", children: [
       "First Name",
       /* @__PURE__ */ jsx(
         "input",
         {
-          className: "mt-1 w-full rounded border border-slate-300 px-2 py-1.5 text-sm",
+          "data-slot": "signer-panel-input",
           value: signerInfo.firstName,
           onChange: (event) => handleInputChange("firstName", event.target.value)
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("label", { className: "block text-sm text-slate-700", children: [
+    /* @__PURE__ */ jsxs("label", { "data-slot": "signer-panel-label", children: [
       "Last Name",
       /* @__PURE__ */ jsx(
         "input",
         {
-          className: "mt-1 w-full rounded border border-slate-300 px-2 py-1.5 text-sm",
+          "data-slot": "signer-panel-input",
           value: signerInfo.lastName,
           onChange: (event) => handleInputChange("lastName", event.target.value)
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("label", { className: "block text-sm text-slate-700", children: [
+    /* @__PURE__ */ jsxs("label", { "data-slot": "signer-panel-label", children: [
       "Title",
       /* @__PURE__ */ jsx(
         "input",
         {
-          className: "mt-1 w-full rounded border border-slate-300 px-2 py-1.5 text-sm",
+          "data-slot": "signer-panel-input",
           value: signerInfo.title,
           onChange: (event) => handleInputChange("title", event.target.value)
         }
@@ -332,39 +418,7 @@ function SignerDetailsPanel({ signerInfo, onSignerInfoChange }) {
     ] })
   ] });
 }
-
-// src/lib/signature-fonts.ts
-var loadedFonts = /* @__PURE__ */ new Set();
-var SIGNATURE_FONTS = ["Dancing Script", "Great Vibes", "Sacramento", "Alex Brush"];
-function buildGoogleFontsCssUrl(family) {
-  const encoded = family.trim().replace(/\s+/g, "+");
-  return `https://fonts.googleapis.com/css2?family=${encoded}&display=swap`;
-}
-async function loadCssFromGoogleFonts(url) {
-  const response = await fetch(url);
-  if (!response.ok) throw new Error(`Unable to load font css from ${url}`);
-  return response.text();
-}
-function extractFontSource(cssText) {
-  const sourceMatch = cssText.match(/src:\s*url\(([^)]+)\)\s*format\(['"]?([^'")]+)['"]?\)/i);
-  if (!sourceMatch) return null;
-  return sourceMatch[1].replace(/['"]/g, "");
-}
-async function loadSignatureFont(fontFamily) {
-  if (loadedFonts.has(fontFamily)) return;
-  if (typeof document === "undefined") return;
-  if (typeof FontFace === "undefined") return;
-  const cssUrl = buildGoogleFontsCssUrl(fontFamily);
-  const cssText = await loadCssFromGoogleFonts(cssUrl);
-  const fontSource = extractFontSource(cssText);
-  if (!fontSource) throw new Error(`Unable to extract font source for ${fontFamily}`);
-  const fontFace = new FontFace(fontFamily, `url(${fontSource})`);
-  await fontFace.load();
-  const fontSet = document.fonts;
-  fontSet.add(fontFace);
-  loadedFonts.add(fontFamily);
-}
-function SignaturePad({ onDrawn }) {
+function SignaturePad({ onDrawn, className }) {
   const canvasRef = useRef(null);
   const signaturePadRef = useRef(null);
   useEffect(() => {
@@ -391,13 +445,13 @@ function SignaturePad({ onDrawn }) {
     signaturePadRef.current?.clear();
     onDrawn("");
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width: 420, height: 140, className: "w-full rounded border border-slate-300 bg-white" }),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "signature-pad", className: cn(className), children: [
+    /* @__PURE__ */ jsx("canvas", { "data-slot": "signature-pad-canvas", ref: canvasRef, width: 420, height: 140 }),
+    /* @__PURE__ */ jsx("div", { "data-slot": "signature-pad-actions", children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: "rounded border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50",
+        "data-slot": "signature-pad-clear",
         onClick: handleClear,
         children: "Clear"
       }
@@ -409,17 +463,20 @@ function SignaturePreview({
   style,
   signatureDataUrl,
   isRendering,
-  onStyleChange
+  onStyleChange,
+  className
 }) {
   const canShowPreview = useMemo(() => signerName.trim().length > 0, [signerName]);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-slate-300 bg-white p-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-slate-800", children: "Signature" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "signature-preview", className: cn(className), children: [
+    /* @__PURE__ */ jsx("h2", { "data-slot": "signature-preview-heading", children: "Signature" }),
+    /* @__PURE__ */ jsxs("div", { "data-slot": "signature-preview-mode-toggle", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: `rounded border px-2 py-1 text-xs ${style.mode === "typed" ? "border-blue-600 bg-blue-600 text-white" : "border-slate-300 bg-slate-50 text-slate-700"}`,
+          "data-slot": "signature-preview-mode-button",
+          "data-mode": "typed",
+          "data-state": style.mode === "typed" ? "active" : "idle",
           onClick: () => onStyleChange({ mode: "typed", fontFamily: style.mode === "typed" ? style.fontFamily : SIGNATURE_FONTS[0] }),
           children: "Typed"
         }
@@ -428,25 +485,34 @@ function SignaturePreview({
         "button",
         {
           type: "button",
-          className: `rounded border px-2 py-1 text-xs ${style.mode === "drawn" ? "border-blue-600 bg-blue-600 text-white" : "border-slate-300 bg-slate-50 text-slate-700"}`,
+          "data-slot": "signature-preview-mode-button",
+          "data-mode": "drawn",
+          "data-state": style.mode === "drawn" ? "active" : "idle",
           onClick: () => onStyleChange({ mode: "drawn", dataUrl: style.mode === "drawn" ? style.dataUrl : "" }),
           children: "Drawn"
         }
       )
     ] }),
-    style.mode === "typed" ? /* @__PURE__ */ jsxs("label", { className: "block text-sm text-slate-700", children: [
+    style.mode === "typed" ? /* @__PURE__ */ jsxs("label", { "data-slot": "signature-preview-font-label", children: [
       "Font",
       /* @__PURE__ */ jsx(
         "select",
         {
-          className: "mt-1 w-full rounded border border-slate-300 px-2 py-1.5 text-sm",
+          "data-slot": "signature-preview-font-select",
           value: style.fontFamily,
           onChange: (event) => onStyleChange({ mode: "typed", fontFamily: event.target.value }),
           children: SIGNATURE_FONTS.map((fontFamily) => /* @__PURE__ */ jsx("option", { value: fontFamily, children: fontFamily }, fontFamily))
         }
       )
     ] }) : /* @__PURE__ */ jsx(SignaturePad, { onDrawn: (dataUrl) => onStyleChange({ mode: "drawn", dataUrl }) }),
-    /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-slate-300 bg-slate-50 p-3", children: !canShowPreview ? /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "Enter signer first and last name to render a signature." }) : isRendering ? /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "Rendering signature..." }) : signatureDataUrl ? /* @__PURE__ */ jsx("img", { src: signatureDataUrl, alt: "Signature preview", className: "h-24 w-full object-contain" }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "No signature available yet." }) })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "signature-preview-display",
+        "data-state": !canShowPreview ? "empty" : isRendering ? "rendering" : signatureDataUrl ? "ready" : "missing-signature",
+        children: !canShowPreview ? /* @__PURE__ */ jsx("p", { "data-slot": "signature-preview-placeholder", children: "Enter signer first and last name to render a signature." }) : isRendering ? /* @__PURE__ */ jsx("p", { "data-slot": "signature-preview-placeholder", children: "Rendering signature..." }) : signatureDataUrl ? /* @__PURE__ */ jsx("img", { "data-slot": "signature-preview-image", src: signatureDataUrl, alt: "Signature preview" }) : /* @__PURE__ */ jsx("p", { "data-slot": "signature-preview-placeholder", children: "No signature available yet." })
+      }
+    )
   ] });
 }
 function SigningComplete({
@@ -456,11 +522,12 @@ function SigningComplete({
   documentHash,
   downloadUrl,
   fileName = "signed-document.pdf",
-  onReset
+  onReset,
+  className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-lg border border-emerald-300 bg-emerald-50 p-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-emerald-900", children: "Document Signed" }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-sm text-emerald-900", children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "signing-complete", className: cn(className), children: [
+    /* @__PURE__ */ jsx("h2", { "data-slot": "signing-complete-heading", children: "Document Signed" }),
+    /* @__PURE__ */ jsxs("div", { "data-slot": "signing-complete-details", children: [
       /* @__PURE__ */ jsxs("p", { children: [
         "Signer: ",
         signerName || "Unknown"
@@ -474,17 +541,17 @@ function SigningComplete({
         signedAt
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "rounded border border-emerald-200 bg-white p-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-slate-500", children: "SHA-256" }),
-      /* @__PURE__ */ jsx("p", { className: "break-all font-mono text-xs text-slate-800", children: documentHash })
+    /* @__PURE__ */ jsxs("div", { "data-slot": "signing-complete-hash", children: [
+      /* @__PURE__ */ jsx("p", { "data-slot": "signing-complete-hash-label", children: "SHA-256" }),
+      /* @__PURE__ */ jsx("p", { "data-slot": "signing-complete-hash-value", children: documentHash })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { "data-slot": "signing-complete-actions", children: [
       /* @__PURE__ */ jsx(
         "a",
         {
           href: downloadUrl,
           download: fileName,
-          className: "rounded bg-emerald-700 px-3 py-1.5 text-sm text-white hover:bg-emerald-800",
+          "data-slot": "signing-complete-download",
           children: "Download Signed PDF"
         }
       ),
@@ -492,7 +559,7 @@ function SigningComplete({
         "button",
         {
           type: "button",
-          className: "rounded border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50",
+          "data-slot": "signing-complete-reset",
           onClick: onReset,
           children: "Sign Another"
         }
@@ -647,6 +714,41 @@ function useFieldPlacement(options = {}) {
 function buildCanvas() {
   return document.createElement("canvas");
 }
+function hashString(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function mulberry32(seed) {
+  return function() {
+    let t = seed += 1831565813;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function layoutTypedGlyphs({
+  signerName,
+  fontFamily,
+  fontSize,
+  context
+}) {
+  const rng = mulberry32(hashString(`${signerName}\0${fontFamily}`));
+  context.font = `${fontSize}px "${fontFamily}"`;
+  const chars = Array.from(signerName);
+  const layouts = [];
+  for (let i = 0; i < chars.length; i++) {
+    const char = chars[i];
+    const width = context.measureText(char).width;
+    const rotation = (rng() * 2 - 1) * 0.07;
+    const gapAfter = i < chars.length - 1 ? (rng() * 2 - 1) * 1.25 : 0;
+    layouts.push({ char, width, rotation, gapAfter });
+  }
+  return layouts;
+}
 function drawTypedSignature({
   signerName,
   fontFamily
@@ -656,15 +758,27 @@ function drawTypedSignature({
   if (!context) return "";
   const padding = 16;
   const fontSize = 56;
-  context.font = `${fontSize}px "${fontFamily}"`;
-  const metrics = context.measureText(signerName);
-  canvas.width = Math.max(240, Math.ceil(metrics.width + padding * 2));
+  const baselineY = 50;
+  const glyphs = layoutTypedGlyphs({ signerName, fontFamily, fontSize, context });
+  const textWidth = glyphs.reduce((sum, g) => sum + g.width + g.gapAfter, 0);
+  canvas.width = Math.max(240, Math.ceil(textWidth + padding * 2));
   canvas.height = 100;
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.font = `${fontSize}px "${fontFamily}"`;
   context.fillStyle = "#111827";
+  context.textAlign = "center";
   context.textBaseline = "middle";
-  context.fillText(signerName, padding, canvas.height / 2);
+  let x = padding;
+  for (const glyph of glyphs) {
+    const { char, width, rotation, gapAfter } = glyph;
+    const cx = x + width / 2;
+    context.save();
+    context.translate(cx, baselineY);
+    context.rotate(rotation);
+    context.fillText(char, 0, 0);
+    context.restore();
+    x += width + gapAfter;
+  }
   return canvas.toDataURL("image/png");
 }
 function useSignatureRenderer({ signerName, style }) {
@@ -796,13 +910,65 @@ async function sha256(data) {
   return Array.from(new Uint8Array(hashBuffer)).map((byte) => byte.toString(16).padStart(2, "0")).join("");
 }
 
+// src/lib/slots.ts
+var SLOTS = {
+  pdfViewer: "pdf-viewer",
+  pdfViewerEmpty: "pdf-viewer-empty",
+  pdfViewerToolbar: "pdf-viewer-toolbar",
+  pdfViewerPageCount: "pdf-viewer-page-count",
+  pdfViewerZoom: "pdf-viewer-zoom",
+  pdfViewerZoomButton: "pdf-viewer-zoom-button",
+  pdfViewerZoomValue: "pdf-viewer-zoom-value",
+  pdfViewerPages: "pdf-viewer-pages",
+  pdfViewerPage: "pdf-viewer-page",
+  pdfViewerLoading: "pdf-viewer-loading",
+  pdfViewerError: "pdf-viewer-error",
+  fieldOverlay: "field-overlay",
+  signatureField: "signature-field",
+  signatureFieldContent: "signature-field-content",
+  signatureFieldLabel: "signature-field-label",
+  signatureFieldPreview: "signature-field-preview",
+  signatureFieldPreviewImage: "signature-field-preview-image",
+  signatureFieldPreviewText: "signature-field-preview-text",
+  signatureFieldRemove: "signature-field-remove",
+  signatureFieldResize: "signature-field-resize",
+  fieldPalette: "field-palette",
+  fieldPaletteButton: "field-palette-button",
+  signerPanel: "signer-panel",
+  signerPanelHeading: "signer-panel-heading",
+  signerPanelLabel: "signer-panel-label",
+  signerPanelInput: "signer-panel-input",
+  signaturePreview: "signature-preview",
+  signaturePreviewHeading: "signature-preview-heading",
+  signaturePreviewModeToggle: "signature-preview-mode-toggle",
+  signaturePreviewModeButton: "signature-preview-mode-button",
+  signaturePreviewFontLabel: "signature-preview-font-label",
+  signaturePreviewFontSelect: "signature-preview-font-select",
+  signaturePreviewDisplay: "signature-preview-display",
+  signaturePreviewImage: "signature-preview-image",
+  signaturePreviewPlaceholder: "signature-preview-placeholder",
+  signaturePad: "signature-pad",
+  signaturePadCanvas: "signature-pad-canvas",
+  signaturePadActions: "signature-pad-actions",
+  signaturePadClear: "signature-pad-clear",
+  signingComplete: "signing-complete",
+  signingCompleteHeading: "signing-complete-heading",
+  signingCompleteDetails: "signing-complete-details",
+  signingCompleteHash: "signing-complete-hash",
+  signingCompleteHashLabel: "signing-complete-hash-label",
+  signingCompleteHashValue: "signing-complete-hash-value",
+  signingCompleteActions: "signing-complete-actions",
+  signingCompleteDownload: "signing-complete-download",
+  signingCompleteReset: "signing-complete-reset"
+};
+
 // src/index.ts
 var defaults = {
-  SIGNATURE_FONTS: ["Dancing Script", "Great Vibes", "Sacramento", "Alex Brush"],
+  SIGNATURE_FONTS: [...SIGNATURE_FONTS],
   DEFAULT_FIELD_WIDTH_PERCENT: 25,
   DEFAULT_FIELD_HEIGHT_PERCENT: 5
 };
 
-export { FieldOverlay, FieldPalette, PdfViewer, SIGNATURE_FONTS, SignatureField, SignaturePad, SignaturePreview, SignerDetailsPanel, SigningComplete, defaults, loadSignatureFont, mapFromPoints, mapToPoints, modifyPdf, sha256, useFieldPlacement, usePdfDocument, useSignatureRenderer };
+export { FieldOverlay, FieldPalette, PdfViewer, SIGNATURE_FONTS, SLOTS, SignatureField, SignaturePad, SignaturePreview, SignerDetailsPanel, SigningComplete, defaults, loadSignatureFont, mapFromPoints, mapToPoints, modifyPdf, sha256, useFieldPlacement, usePdfDocument, useSignatureRenderer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map