@josephomills/esign 0.2.2 → 0.4.0

package/dist/ui/index.d.cts

@@ -0,0 +1,100 @@
+import * as react from 'react';
+
+interface SignaturePadProps {
+    primaryColor?: string;
+    /** Emits a PNG data URL of the current signature, or null when empty. */
+    onChange: (pngDataUrl: string | null) => void;
+}
+/**
+ * Capture a signature by drawing (signature_pad, touch + mouse, DPI-aware) or by
+ * typing a name rendered in a script font. Both yield the same PNG data URL that
+ * the seal step stamps onto the document.
+ */
+declare function SignaturePad({ primaryColor, onChange }: SignaturePadProps): react.JSX.Element;
+
+interface ConsentValue {
+    signerName: string;
+    consent: boolean;
+}
+interface ConsentBlockProps {
+    value: ConsentValue;
+    onChange: (value: ConsentValue) => void;
+    primaryColor?: string;
+}
+/**
+ * The electronic-signature intent record: a typed full legal name + an explicit
+ * consent checkbox. Together with the audit trail this is what makes the simple
+ * e-signature legally valid.
+ */
+declare function ConsentBlock({ value, onChange, primaryColor }: ConsentBlockProps): react.JSX.Element;
+
+interface ViewerPlacement {
+    page: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface PdfViewerProps {
+    /** Token-gated source PDF URL. */
+    url: string;
+    /** Optional signature-box hint, drawn on its page at normalized coords. */
+    placement?: ViewerPlacement;
+    /** Override the pdf.js worker (defaults to the unpkg .mjs for the bundled version). */
+    workerSrc?: string;
+    primaryColor?: string;
+}
+/**
+ * Render the PDF to canvases (pdf.js, responsive, DPI-aware) with the signature
+ * box overlaid where the manager placed it. Falls back to an <iframe> + download
+ * link if pdf.js fails to load — so the document is always readable.
+ */
+declare function PdfViewer({ url, placement, workerSrc, primaryColor }: PdfViewerProps): react.JSX.Element;
+
+interface DesignerPlacement {
+    page: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface FieldDesignerProps {
+    /** The chosen PDF's bytes (read client-side before upload). */
+    pdfData: Uint8Array;
+    value: DesignerPlacement | null;
+    onChange: (placement: DesignerPlacement) => void;
+    workerSrc?: string;
+    primaryColor?: string;
+}
+/**
+ * Drag a signature box onto a pdf.js-rendered page. Emits a normalized
+ * placement `{ page, x, y, w, h }` (0–1 fractions, top-left origin) that the seal
+ * step converts to pdf coordinates — so it stays accurate at any size.
+ */
+declare function FieldDesigner({ pdfData, value, onChange, workerSrc, primaryColor, }: FieldDesignerProps): react.JSX.Element;
+
+interface SigningBranding {
+    appName?: string;
+    logoUrl?: string;
+    primaryColor?: string;
+}
+interface SigningExperienceProps {
+    /** Token-gated source PDF URL (GET /api/esign/source/<token>). */
+    sourceUrl: string;
+    /** Submit endpoint (POST /sign/<token>/submit). */
+    submitUrl: string;
+    documentTitle: string;
+    placement?: ViewerPlacement;
+    branding?: SigningBranding;
+    /** Called after a successful signature submit (host navigates to /done). */
+    onSigned?: () => void;
+    workerSrc?: string;
+}
+/**
+ * The full host-branded signer page body: read the PDF (placement highlighted),
+ * draw/type a signature, consent, and submit. Self-contained styling so it sits
+ * cleanly inside any host shell.
+ */
+declare function SigningExperience(props: SigningExperienceProps): react.JSX.Element;
+
+export { ConsentBlock, type ConsentBlockProps, type ConsentValue, type DesignerPlacement, FieldDesigner, type FieldDesignerProps, PdfViewer, type PdfViewerProps, SignaturePad, type SignaturePadProps, type SigningBranding, SigningExperience, type SigningExperienceProps, type ViewerPlacement };

package/dist/ui/index.d.ts

@@ -0,0 +1,100 @@
+import * as react from 'react';
+
+interface SignaturePadProps {
+    primaryColor?: string;
+    /** Emits a PNG data URL of the current signature, or null when empty. */
+    onChange: (pngDataUrl: string | null) => void;
+}
+/**
+ * Capture a signature by drawing (signature_pad, touch + mouse, DPI-aware) or by
+ * typing a name rendered in a script font. Both yield the same PNG data URL that
+ * the seal step stamps onto the document.
+ */
+declare function SignaturePad({ primaryColor, onChange }: SignaturePadProps): react.JSX.Element;
+
+interface ConsentValue {
+    signerName: string;
+    consent: boolean;
+}
+interface ConsentBlockProps {
+    value: ConsentValue;
+    onChange: (value: ConsentValue) => void;
+    primaryColor?: string;
+}
+/**
+ * The electronic-signature intent record: a typed full legal name + an explicit
+ * consent checkbox. Together with the audit trail this is what makes the simple
+ * e-signature legally valid.
+ */
+declare function ConsentBlock({ value, onChange, primaryColor }: ConsentBlockProps): react.JSX.Element;
+
+interface ViewerPlacement {
+    page: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface PdfViewerProps {
+    /** Token-gated source PDF URL. */
+    url: string;
+    /** Optional signature-box hint, drawn on its page at normalized coords. */
+    placement?: ViewerPlacement;
+    /** Override the pdf.js worker (defaults to the unpkg .mjs for the bundled version). */
+    workerSrc?: string;
+    primaryColor?: string;
+}
+/**
+ * Render the PDF to canvases (pdf.js, responsive, DPI-aware) with the signature
+ * box overlaid where the manager placed it. Falls back to an <iframe> + download
+ * link if pdf.js fails to load — so the document is always readable.
+ */
+declare function PdfViewer({ url, placement, workerSrc, primaryColor }: PdfViewerProps): react.JSX.Element;
+
+interface DesignerPlacement {
+    page: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface FieldDesignerProps {
+    /** The chosen PDF's bytes (read client-side before upload). */
+    pdfData: Uint8Array;
+    value: DesignerPlacement | null;
+    onChange: (placement: DesignerPlacement) => void;
+    workerSrc?: string;
+    primaryColor?: string;
+}
+/**
+ * Drag a signature box onto a pdf.js-rendered page. Emits a normalized
+ * placement `{ page, x, y, w, h }` (0–1 fractions, top-left origin) that the seal
+ * step converts to pdf coordinates — so it stays accurate at any size.
+ */
+declare function FieldDesigner({ pdfData, value, onChange, workerSrc, primaryColor, }: FieldDesignerProps): react.JSX.Element;
+
+interface SigningBranding {
+    appName?: string;
+    logoUrl?: string;
+    primaryColor?: string;
+}
+interface SigningExperienceProps {
+    /** Token-gated source PDF URL (GET /api/esign/source/<token>). */
+    sourceUrl: string;
+    /** Submit endpoint (POST /sign/<token>/submit). */
+    submitUrl: string;
+    documentTitle: string;
+    placement?: ViewerPlacement;
+    branding?: SigningBranding;
+    /** Called after a successful signature submit (host navigates to /done). */
+    onSigned?: () => void;
+    workerSrc?: string;
+}
+/**
+ * The full host-branded signer page body: read the PDF (placement highlighted),
+ * draw/type a signature, consent, and submit. Self-contained styling so it sits
+ * cleanly inside any host shell.
+ */
+declare function SigningExperience(props: SigningExperienceProps): react.JSX.Element;
+
+export { ConsentBlock, type ConsentBlockProps, type ConsentValue, type DesignerPlacement, FieldDesigner, type FieldDesignerProps, PdfViewer, type PdfViewerProps, SignaturePad, type SignaturePadProps, type SigningBranding, SigningExperience, type SigningExperienceProps, type ViewerPlacement };

package/dist/ui/index.js

@@ -0,0 +1,477 @@
+"use client";
+import SignaturePadLib from 'signature_pad';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/ui/SignaturePad.tsx
+function SignaturePad({ primaryColor = "#4f46e5", onChange }) {
+  const [mode, setMode] = useState("draw");
+  const [typed, setTyped] = useState("");
+  const canvasRef = useRef(null);
+  const padRef = useRef(null);
+  useEffect(() => {
+    if (mode !== "draw") return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const pad = new SignaturePadLib(canvas, { penColor: "#111827", minWidth: 0.8, maxWidth: 2.2 });
+    padRef.current = pad;
+    const resize = () => {
+      const ratio = Math.max(window.devicePixelRatio || 1, 1);
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = Math.floor(rect.width * ratio);
+      canvas.height = Math.floor(rect.height * ratio);
+      canvas.getContext("2d")?.scale(ratio, ratio);
+      pad.clear();
+      onChange(null);
+    };
+    pad.addEventListener(
+      "endStroke",
+      () => onChange(pad.isEmpty() ? null : pad.toDataURL("image/png"))
+    );
+    resize();
+    window.addEventListener("resize", resize);
+    return () => {
+      window.removeEventListener("resize", resize);
+      pad.off();
+      padRef.current = null;
+    };
+  }, [mode, onChange]);
+  useEffect(() => {
+    if (mode !== "type") return;
+    const name = typed.trim();
+    if (!name) {
+      onChange(null);
+      return;
+    }
+    const c = document.createElement("canvas");
+    c.width = 720;
+    c.height = 200;
+    const ctx = c.getContext("2d");
+    if (!ctx) return;
+    ctx.fillStyle = "#111827";
+    ctx.font = "72px 'Segoe Script', 'Brush Script MT', cursive";
+    ctx.textBaseline = "middle";
+    ctx.fillText(name, 24, 110);
+    onChange(c.toDataURL("image/png"));
+  }, [mode, typed, onChange]);
+  const tab = (m, label) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setMode(m);
+        onChange(null);
+      },
+      style: {
+        flex: 1,
+        padding: "8px 12px",
+        border: "none",
+        borderBottom: mode === m ? `2px solid ${primaryColor}` : "2px solid transparent",
+        background: "transparent",
+        fontWeight: mode === m ? 600 : 400,
+        color: mode === m ? primaryColor : "#6b7280",
+        cursor: "pointer"
+      },
+      children: label
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { style: { border: "1px solid #e5e7eb", borderRadius: 12, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", borderBottom: "1px solid #f3f4f6" }, children: [
+      tab("draw", "Draw"),
+      tab("type", "Type")
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", background: "#fff" }, children: [
+      mode === "draw" ? /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          style: { width: "100%", height: 180, touchAction: "none", display: "block" }
+        }
+      ) : /* @__PURE__ */ jsx("div", { style: { padding: 16 }, children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: typed,
+          onChange: (e) => setTyped(e.target.value),
+          placeholder: "Type your name",
+          style: {
+            width: "100%",
+            fontSize: 40,
+            fontFamily: "'Segoe Script', 'Brush Script MT', cursive",
+            border: "none",
+            borderBottom: "1px solid #e5e7eb",
+            outline: "none",
+            padding: "8px 0"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            padRef.current?.clear();
+            setTyped("");
+            onChange(null);
+          },
+          style: {
+            position: "absolute",
+            top: 8,
+            right: 8,
+            fontSize: 12,
+            color: "#6b7280",
+            background: "rgba(255,255,255,0.8)",
+            border: "1px solid #e5e7eb",
+            borderRadius: 6,
+            padding: "2px 8px",
+            cursor: "pointer"
+          },
+          children: "Clear"
+        }
+      )
+    ] })
+  ] });
+}
+function ConsentBlock({ value, onChange, primaryColor = "#4f46e5" }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "#374151" }, children: "Full legal name" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: value.signerName,
+          onChange: (e) => onChange({ ...value, signerName: e.target.value }),
+          placeholder: "e.g. Ada Lovelace",
+          style: {
+            padding: "10px 12px",
+            border: "1px solid #d1d5db",
+            borderRadius: 8,
+            fontSize: 15,
+            outline: "none"
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { style: { display: "flex", gap: 10, alignItems: "flex-start", cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: value.consent,
+          onChange: (e) => onChange({ ...value, consent: e.target.checked }),
+          style: { marginTop: 3, accentColor: primaryColor, width: 16, height: 16 }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#4b5563", lineHeight: 1.5 }, children: "I agree to sign this document electronically. I understand my electronic signature is legally binding and that an audit record (time, IP, and a tamper-evident hash) is kept with the signed document." })
+    ] })
+  ] });
+}
+function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
+  const containerRef = useRef(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const pdfjs = await import('pdfjs-dist');
+        pdfjs.GlobalWorkerOptions.workerSrc = workerSrc ?? `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+        const doc = await pdfjs.getDocument({ url }).promise;
+        const container = containerRef.current;
+        if (!container || cancelled) return;
+        container.innerHTML = "";
+        const width = container.clientWidth || 640;
+        const ratio = Math.max(window.devicePixelRatio || 1, 1);
+        for (let p = 1; p <= doc.numPages; p++) {
+          const page = await doc.getPage(p);
+          if (cancelled) return;
+          const base = page.getViewport({ scale: 1 });
+          const viewport = page.getViewport({ scale: width / base.width });
+          const canvas = document.createElement("canvas");
+          canvas.width = Math.floor(viewport.width * ratio);
+          canvas.height = Math.floor(viewport.height * ratio);
+          canvas.style.width = "100%";
+          canvas.style.display = "block";
+          canvas.style.borderRadius = "4px";
+          const wrap = document.createElement("div");
+          wrap.style.position = "relative";
+          wrap.style.marginBottom = "14px";
+          wrap.style.boxShadow = "0 1px 4px rgba(0,0,0,0.12)";
+          wrap.appendChild(canvas);
+          if (placement && placement.page === p) {
+            const box = document.createElement("div");
+            box.style.cssText = `position:absolute;left:${placement.x * 100}%;top:${placement.y * 100}%;width:${placement.w * 100}%;height:${placement.h * 100}%;border:2px dashed ${primaryColor};background:${primaryColor}1a;border-radius:4px;pointer-events:none;`;
+            const label = document.createElement("span");
+            label.textContent = "Signature";
+            label.style.cssText = `position:absolute;top:-18px;left:0;font-size:11px;font-weight:600;color:${primaryColor};`;
+            box.appendChild(label);
+            wrap.appendChild(box);
+          }
+          container.appendChild(wrap);
+          const ctx = canvas.getContext("2d");
+          if (!ctx) continue;
+          ctx.scale(ratio, ratio);
+          await page.render({ canvasContext: ctx, viewport, canvas }).promise;
+        }
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [url, placement, workerSrc, primaryColor]);
+  if (failed) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: `${url}#toolbar=0`,
+          title: "Document",
+          style: { width: "100%", height: 520, border: "1px solid #e5e7eb", borderRadius: 8 }
+        }
+      ),
+      /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noreferrer", style: { fontSize: 13, color: primaryColor }, children: "Download to read" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%" } });
+}
+function FieldDesigner({
+  pdfData,
+  value,
+  onChange,
+  workerSrc,
+  primaryColor = "#4f46e5"
+}) {
+  const [numPages, setNumPages] = useState(0);
+  const [page, setPage] = useState(value?.page ?? 1);
+  const [failed, setFailed] = useState(false);
+  const stageRef = useRef(null);
+  const canvasRef = useRef(null);
+  const docRef = useRef(null);
+  const [drag, setDrag] = useState(null);
+  const startRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const pdfjs = await import('pdfjs-dist');
+        pdfjs.GlobalWorkerOptions.workerSrc = workerSrc ?? `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+        const doc = await pdfjs.getDocument({ data: pdfData.slice() }).promise;
+        if (cancelled) return;
+        docRef.current = doc;
+        setNumPages(doc.numPages);
+        setPage((p) => Math.min(p, doc.numPages));
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [pdfData, workerSrc]);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      const doc = docRef.current;
+      const canvas = canvasRef.current;
+      if (!doc || !canvas) return;
+      const pageObj = await doc.getPage(page);
+      if (cancelled) return;
+      const width = stageRef.current?.clientWidth || 640;
+      const base = pageObj.getViewport({ scale: 1 });
+      const viewport = pageObj.getViewport({ scale: width / base.width });
+      const ratio = Math.max(window.devicePixelRatio || 1, 1);
+      canvas.width = Math.floor(viewport.width * ratio);
+      canvas.height = Math.floor(viewport.height * ratio);
+      canvas.style.width = "100%";
+      canvas.style.display = "block";
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.scale(ratio, ratio);
+      await pageObj.render({ canvasContext: ctx, viewport, canvas }).promise;
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [page, numPages]);
+  function rel(e) {
+    const rect = stageRef.current.getBoundingClientRect();
+    return {
+      x: Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1),
+      y: Math.min(Math.max((e.clientY - rect.top) / rect.height, 0), 1)
+    };
+  }
+  function onDown(e) {
+    startRef.current = rel(e);
+    setDrag({ ...startRef.current, w: 0, h: 0 });
+  }
+  function onMove(e) {
+    if (!startRef.current) return;
+    const p = rel(e);
+    const s = startRef.current;
+    setDrag({ x: Math.min(s.x, p.x), y: Math.min(s.y, p.y), w: Math.abs(p.x - s.x), h: Math.abs(p.y - s.y) });
+  }
+  function onUp() {
+    if (drag && drag.w > 0.02 && drag.h > 0.01) {
+      onChange({ page, x: drag.x, y: drag.y, w: drag.w, h: drag.h });
+    }
+    startRef.current = null;
+    setDrag(null);
+  }
+  const box = drag ?? (value?.page === page ? value : null);
+  if (failed) {
+    return /* @__PURE__ */ jsx("div", { style: { color: "#b91c1c", fontSize: 14 }, children: "Could not render this PDF for placement. Please check the file is a valid, unencrypted PDF." });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#6b7280" }, children: "Drag a box where the signature goes." }),
+      numPages > 1 ? /* @__PURE__ */ jsxs("label", { style: { marginLeft: "auto", fontSize: 13, color: "#374151" }, children: [
+        "Page",
+        " ",
+        /* @__PURE__ */ jsx("select", { value: page, onChange: (e) => setPage(Number(e.target.value)), children: Array.from({ length: numPages }, (_, i) => /* @__PURE__ */ jsx("option", { value: i + 1, children: i + 1 }, i)) })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: stageRef,
+        onMouseDown: onDown,
+        onMouseMove: onMove,
+        onMouseUp: onUp,
+        onMouseLeave: onUp,
+        style: {
+          position: "relative",
+          cursor: "crosshair",
+          userSelect: "none",
+          border: "1px solid #e5e7eb",
+          borderRadius: 6,
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx("canvas", { ref: canvasRef }),
+          box ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${box.x * 100}%`,
+                top: `${box.y * 100}%`,
+                width: `${box.w * 100}%`,
+                height: `${box.h * 100}%`,
+                border: `2px solid ${primaryColor}`,
+                background: `${primaryColor}22`,
+                borderRadius: 3,
+                pointerEvents: "none"
+              }
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function SigningExperience(props) {
+  const primary = props.branding?.primaryColor ?? "#4f46e5";
+  const [signaturePng, setSignaturePng] = useState(null);
+  const [consent, setConsent] = useState({ signerName: "", consent: false });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const canSubmit = !!signaturePng && consent.consent && consent.signerName.trim().length > 0 && !submitting;
+  async function submit() {
+    if (!canSubmit) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const res = await fetch(props.submitUrl, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          signaturePng,
+          signerName: consent.signerName.trim(),
+          consent: true
+        })
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => null);
+        throw new Error(body?.error?.message ?? "Could not submit your signature.");
+      }
+      props.onSigned?.();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Something went wrong.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        maxWidth: 760,
+        margin: "0 auto",
+        padding: "24px 16px 64px",
+        fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+        color: "#111827"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }, children: [
+          props.branding?.logoUrl ? /* @__PURE__ */ jsx("img", { src: props.branding.logoUrl, alt: "", style: { height: 32 } }) : null,
+          props.branding?.appName ? /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "#374151" }, children: props.branding.appName }) : null
+        ] }),
+        /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, margin: "8px 0 4px" }, children: props.documentTitle }),
+        /* @__PURE__ */ jsx("p", { style: { color: "#6b7280", fontSize: 14, marginTop: 0 }, children: "Review the document below, then sign \u2014 no account or login needed." }),
+        /* @__PURE__ */ jsx("section", { style: { margin: "16px 0" }, children: /* @__PURE__ */ jsx(
+          PdfViewer,
+          {
+            url: props.sourceUrl,
+            placement: props.placement,
+            workerSrc: props.workerSrc,
+            primaryColor: primary
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("section", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: { fontSize: 13, fontWeight: 600, color: "#374151" }, children: "Your signature" }),
+            /* @__PURE__ */ jsx("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ jsx(SignaturePad, { primaryColor: primary, onChange: setSignaturePng }) })
+          ] }),
+          /* @__PURE__ */ jsx(ConsentBlock, { value: consent, onChange: setConsent, primaryColor: primary }),
+          error ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                background: "#fef2f2",
+                border: "1px solid #fecaca",
+                color: "#b91c1c",
+                borderRadius: 8,
+                padding: "10px 12px",
+                fontSize: 14
+              },
+              children: error
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: submit,
+              disabled: !canSubmit,
+              style: {
+                padding: "14px 16px",
+                borderRadius: 10,
+                border: "none",
+                background: canSubmit ? primary : "#c7c9d1",
+                color: "#fff",
+                fontSize: 16,
+                fontWeight: 600,
+                cursor: canSubmit ? "pointer" : "not-allowed"
+              },
+              children: submitting ? "Signing\u2026" : "Sign document"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { ConsentBlock, FieldDesigner, PdfViewer, SignaturePad, SigningExperience };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map