@kitsy/pdf 0.0.0-stage → 0.2.0

package/dist/chunk-TR6HJ4NO.js

@@ -0,0 +1,659 @@
+import { useRenderDocument } from './chunk-J4IRICCJ.js';
+import { opaqueBounds, whiteToTransparent } from './chunk-KY6DXS6S.js';
+import { applySignatures } from './chunk-SVPUX7AM.js';
+import { renderPageToCanvas, canvasToBlob } from './chunk-DPEJU4P6.js';
+import { useSinglePdf } from './chunk-BK3MYSUS.js';
+import { PdfToolPage, PdfToolColumns, cardClass, secondaryButtonClass, iconButtonClass, SideTips, SelectedPdfCard, FileDropzone, StatusBanner, primaryButtonClass, BackToPdfTools, fieldLabelClass, inputClass } from './chunk-H6EERRCR.js';
+import { downloadBlob, toBaseName, formatBytes } from './chunk-EKHEY3LI.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import '@fontsource/dancing-script/400.css';
+import '@fontsource/great-vibes/400.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var TABS = [
+  { id: "draw", label: "Draw", icon: "fa-solid fa-pen-nib" },
+  { id: "type", label: "Type", icon: "fa-solid fa-keyboard" },
+  { id: "upload", label: "Upload", icon: "fa-solid fa-upload" }
+];
+var FONTS = [
+  { family: "Dancing Script", label: "Handwritten" },
+  { family: "Great Vibes", label: "Elegant" },
+  { family: "Helvetica, Arial, sans-serif", label: "Plain (dates, initials)" }
+];
+var INKS = [
+  { value: "#0f172a", label: "Black" },
+  { value: "#1d4ed8", label: "Blue" }
+];
+async function trimToPng(canvas, padding = 8) {
+  const context = canvas.getContext("2d");
+  const { data } = context.getImageData(0, 0, canvas.width, canvas.height);
+  const bounds = opaqueBounds(data, canvas.width, canvas.height);
+  if (!bounds) return null;
+  const x = Math.max(0, bounds.x - padding);
+  const y = Math.max(0, bounds.y - padding);
+  const width = Math.min(canvas.width - x, bounds.width + padding * 2);
+  const height = Math.min(canvas.height - y, bounds.height + padding * 2);
+  const out = document.createElement("canvas");
+  out.width = width;
+  out.height = height;
+  out.getContext("2d").drawImage(canvas, x, y, width, height, 0, 0, width, height);
+  const blob = await canvasToBlob(out, "image/png");
+  return {
+    bytes: new Uint8Array(await blob.arrayBuffer()),
+    url: URL.createObjectURL(blob),
+    aspect: width / height
+  };
+}
+function DrawPad({ ink, onReady }) {
+  const canvasRef = useRef(null);
+  const drawing = useRef(false);
+  const last = useRef(null);
+  const [hasInk, setHasInk] = useState(false);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ratio = Math.min(3, window.devicePixelRatio || 1);
+    canvas.width = canvas.clientWidth * ratio;
+    canvas.height = canvas.clientHeight * ratio;
+    const context = canvas.getContext("2d");
+    context.scale(ratio, ratio);
+    context.lineCap = "round";
+    context.lineJoin = "round";
+  }, []);
+  const point = (event) => {
+    const rect = canvasRef.current.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const start = (event) => {
+    event.preventDefault();
+    canvasRef.current.setPointerCapture(event.pointerId);
+    drawing.current = true;
+    last.current = point(event);
+  };
+  const moveTo = (event) => {
+    if (!drawing.current) return;
+    const context = canvasRef.current.getContext("2d");
+    const next = point(event);
+    const distance = Math.hypot(next.x - last.current.x, next.y - last.current.y);
+    context.strokeStyle = ink;
+    context.lineWidth = Math.max(1.6, 3.2 - distance / 18);
+    context.beginPath();
+    context.moveTo(last.current.x, last.current.y);
+    context.lineTo(next.x, next.y);
+    context.stroke();
+    last.current = next;
+    setHasInk(true);
+  };
+  const stop = () => {
+    drawing.current = false;
+  };
+  const clear = () => {
+    const canvas = canvasRef.current;
+    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
+    setHasInk(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        onPointerDown: start,
+        onPointerMove: moveTo,
+        onPointerUp: stop,
+        onPointerCancel: stop,
+        "aria-label": "Signature drawing area",
+        className: "h-40 w-full touch-none rounded-xl border border-dashed border-slate-300 bg-white dark:border-slate-600"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onReady(canvasRef.current), disabled: !hasInk, className: primaryButtonClass, children: [
+        /* @__PURE__ */ jsx("i", { className: "fa-solid fa-check" }),
+        "Use signature"
+      ] }),
+      /* @__PURE__ */ jsxs("button", { type: "button", onClick: clear, disabled: !hasInk, className: secondaryButtonClass, children: [
+        /* @__PURE__ */ jsx("i", { className: "fa-solid fa-eraser" }),
+        "Clear"
+      ] })
+    ] })
+  ] });
+}
+function TypePad({ ink, onReady }) {
+  const [text, setText] = useState("");
+  const [font, setFont] = useState(FONTS[0].family);
+  const render = async () => {
+    const size = 120;
+    const cssFont = `${size}px ${font.includes(",") ? font : `"${font}"`}`;
+    await document.fonts.load(cssFont, text);
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    context.font = cssFont;
+    const width = Math.ceil(context.measureText(text).width) + size;
+    canvas.width = width;
+    canvas.height = Math.ceil(size * 1.8);
+    context.font = cssFont;
+    context.fillStyle = ink;
+    context.textBaseline = "middle";
+    context.fillText(text, size / 2, canvas.height / 2);
+    onReady(canvas);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: fieldLabelClass, children: [
+        "Your name or text",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: text,
+            maxLength: 60,
+            onChange: (event) => setText(event.target.value),
+            placeholder: "Jane Doe",
+            className: `mt-2 ${inputClass}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: fieldLabelClass, children: [
+        "Style",
+        /* @__PURE__ */ jsx("select", { value: font, onChange: (event) => setFont(event.target.value), className: `mt-2 ${inputClass}`, children: FONTS.map((option) => /* @__PURE__ */ jsx("option", { value: option.family, children: option.label }, option.family)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mt-3 flex h-24 items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-white px-4 text-4xl dark:border-slate-600",
+        style: { fontFamily: font.includes(",") ? font : `"${font}"`, color: ink },
+        children: text || /* @__PURE__ */ jsx("span", { className: "text-base text-slate-400", children: "Preview" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("button", { type: "button", onClick: render, disabled: !text.trim(), className: `mt-3 ${primaryButtonClass}`, children: [
+      /* @__PURE__ */ jsx("i", { className: "fa-solid fa-check" }),
+      "Use signature"
+    ] })
+  ] });
+}
+function UploadPad({ onReady, onError }) {
+  const [removeBackground, setRemoveBackground] = useState(true);
+  const inputRef = useRef(null);
+  const handleFile = async (file) => {
+    if (!file) return;
+    try {
+      const bitmap = await createImageBitmap(file);
+      const scale = Math.min(1, 1200 / bitmap.width);
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.round(bitmap.width * scale);
+      canvas.height = Math.round(bitmap.height * scale);
+      const context = canvas.getContext("2d");
+      context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+      bitmap.close?.();
+      if (removeBackground) {
+        const image = context.getImageData(0, 0, canvas.width, canvas.height);
+        whiteToTransparent(image.data);
+        context.putImageData(image, 0, 0);
+      }
+      onReady(canvas);
+    } catch {
+      onError("That image could not be read. Try a PNG or JPG.");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/png,image/jpeg,image/webp",
+        className: "hidden",
+        onChange: (event) => {
+          handleFile(event.target.files?.[0]);
+          event.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => inputRef.current?.click(), className: secondaryButtonClass, children: [
+      /* @__PURE__ */ jsx("i", { className: "fa-solid fa-image" }),
+      "Choose signature image"
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "mt-3 flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: removeBackground,
+          onChange: (event) => setRemoveBackground(event.target.checked),
+          className: "h-4 w-4 accent-[#1F8CFF]"
+        }
+      ),
+      "Remove white background (for photos or scans of paper)"
+    ] })
+  ] });
+}
+function SignatureCreator({ onCreate, onError }) {
+  const [tab, setTab] = useState("draw");
+  const [ink, setInk] = useState(INKS[0].value);
+  const finish = async (canvas) => {
+    const result = await trimToPng(canvas);
+    if (!result) {
+      onError("The signature is empty.");
+      return;
+    }
+    onCreate(result);
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { role: "tablist", className: "inline-flex rounded-xl border border-slate-200 bg-slate-50 p-1 dark:border-slate-700 dark:bg-slate-900", children: TABS.map((option) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": tab === option.id,
+          onClick: () => setTab(option.id),
+          className: `inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.12em] transition ${tab === option.id ? "bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-slate-100" : "text-slate-500 hover:text-slate-800 dark:text-slate-400"}`,
+          children: [
+            /* @__PURE__ */ jsx("i", { className: option.icon }),
+            option.label
+          ]
+        },
+        option.id
+      )) }),
+      tab !== "upload" ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", "aria-label": "Ink colour", children: INKS.map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setInk(option.value),
+          "aria-label": `${option.label} ink`,
+          "aria-pressed": ink === option.value,
+          className: `h-6 w-6 rounded-full border-2 ${ink === option.value ? "border-[#1F8CFF]" : "border-transparent"}`,
+          style: { backgroundColor: option.value }
+        },
+        option.value
+      )) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      tab === "draw" ? /* @__PURE__ */ jsx(DrawPad, { ink, onReady: finish }) : null,
+      tab === "type" ? /* @__PURE__ */ jsx(TypePad, { ink, onReady: finish }) : null,
+      tab === "upload" ? /* @__PURE__ */ jsx(UploadPad, { onReady: finish, onError }) : null
+    ] })
+  ] });
+}
+var PREVIEW_WIDTH = 900;
+var nextId = 0;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function usePagePreview(doc, pageIndex) {
+  const [preview, setPreview] = useState(null);
+  useEffect(() => {
+    if (!doc) {
+      setPreview(null);
+      return void 0;
+    }
+    let cancelled = false;
+    let url = null;
+    (async () => {
+      const page = await doc.getPage(pageIndex + 1);
+      const base = page.getViewport({ scale: 1 });
+      const ratio = Math.min(2, window.devicePixelRatio || 1);
+      const render = await renderPageToCanvas(doc, pageIndex + 1, {
+        scale: PREVIEW_WIDTH / base.width * ratio
+      });
+      const blob = await canvasToBlob(render.canvas, "image/jpeg", 0.85);
+      if (cancelled) return;
+      url = URL.createObjectURL(blob);
+      setPreview({ url, width: render.width, height: render.height });
+    })().catch(() => {
+    });
+    return () => {
+      cancelled = true;
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [doc, pageIndex]);
+  return preview;
+}
+function PlacementBox({ placement, signature, pageAspect, selected, onSelect, onChange, onRemove, containerRef }) {
+  const startDrag = (event, mode) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onSelect();
+    const rect = containerRef.current.getBoundingClientRect();
+    const origin = { x: event.clientX, y: event.clientY, placement };
+    const handleMove = (moveEvent) => {
+      const dx = (moveEvent.clientX - origin.x) / rect.width;
+      const dy = (moveEvent.clientY - origin.y) / rect.height;
+      const start = origin.placement;
+      if (mode === "move") {
+        onChange({
+          x: clamp(start.x + dx, 0, 1 - start.width),
+          y: clamp(start.y + dy, 0, 1 - start.height)
+        });
+      } else {
+        const width = clamp(start.width + dx, 0.04, 1 - start.x);
+        const height = width * pageAspect / signature.aspect;
+        if (start.y + height <= 1) onChange({ width, height });
+      }
+    };
+    const handleUp = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+  };
+  const nudge = (event) => {
+    const step = event.shiftKey ? 0.02 : 5e-3;
+    const moves = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+    if (event.key === "Delete" || event.key === "Backspace") {
+      event.preventDefault();
+      onRemove();
+      return;
+    }
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    onChange({
+      x: clamp(placement.x + move[0], 0, 1 - placement.width),
+      y: clamp(placement.y + move[1], 0, 1 - placement.height)
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Placed signature. Drag to move, use arrow keys to nudge, Delete to remove.",
+      onPointerDown: (event) => startDrag(event, "move"),
+      onKeyDown: nudge,
+      onFocus: onSelect,
+      className: `absolute cursor-move touch-none select-none outline-none ${selected ? "ring-2 ring-[#1F8CFF]" : "ring-1 ring-[#1F8CFF]/40 hover:ring-[#1F8CFF]"}`,
+      style: {
+        left: `${placement.x * 100}%`,
+        top: `${placement.y * 100}%`,
+        width: `${placement.width * 100}%`,
+        height: `${placement.height * 100}%`
+      },
+      children: [
+        /* @__PURE__ */ jsx("img", { src: signature.url, alt: "", draggable: false, className: "pointer-events-none h-full w-full" }),
+        selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onPointerDown: (event) => event.stopPropagation(),
+              onClick: onRemove,
+              "aria-label": "Remove signature",
+              className: "absolute -right-3 -top-3 inline-flex h-6 w-6 items-center justify-center rounded-full bg-rose-600 text-[10px] text-white shadow",
+              children: /* @__PURE__ */ jsx("i", { className: "fa-solid fa-xmark" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              onPointerDown: (event) => startDrag(event, "resize"),
+              "aria-hidden": "true",
+              className: "absolute -bottom-2 -right-2 h-4 w-4 cursor-nwse-resize rounded-sm border-2 border-white bg-[#1F8CFF] shadow"
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function SignPdf() {
+  const [signatures, setSignatures] = useState([]);
+  const [placements, setPlacements] = useState([]);
+  const [selectedId, setSelectedId] = useState(null);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [isSaving, setIsSaving] = useState(false);
+  const [status, setStatus] = useState({
+    tone: "info",
+    text: "Add a PDF, create your signature, then place it on the page."
+  });
+  const containerRef = useRef(null);
+  const signaturesRef = useRef(signatures);
+  signaturesRef.current = signatures;
+  useEffect(() => {
+    document.title = "Sign PDF | Apps";
+    return () => signaturesRef.current.forEach((signature) => URL.revokeObjectURL(signature.url));
+  }, []);
+  const onError = useCallback((text) => setStatus({ tone: "error", text }), []);
+  const onLoaded = useCallback(({ file, pageCount }) => {
+    setPlacements([]);
+    setPageIndex(0);
+    setStatus({
+      tone: "success",
+      text: `${file.name} loaded with ${pageCount} page${pageCount === 1 ? "" : "s"}. Create a signature to place it.`
+    });
+  }, []);
+  const pdf = useSinglePdf({ onError, onLoaded });
+  const { doc, error: renderError } = useRenderDocument(pdf.bytes);
+  const preview = usePagePreview(doc, pageIndex);
+  const pageAspect = preview ? preview.width / preview.height : 1 / 1.414;
+  const placeSignature = (signature, onPage = pageIndex) => {
+    const width = 0.3;
+    const height = Math.min(width * pageAspect / signature.aspect, 1);
+    const step = placements.filter((placement2) => placement2.pageIndex === onPage).length % 6;
+    const placement = {
+      id: `place-${++nextId}`,
+      signatureId: signature.id,
+      pageIndex: onPage,
+      x: clamp(0.6 - width / 2 - step * 0.04, 0, 1 - width),
+      y: clamp(0.8 - height / 2 - step * 0.08, 0, 1 - height),
+      width,
+      height
+    };
+    setPlacements((current) => [...current, placement]);
+    setSelectedId(placement.id);
+  };
+  const addSignature = (created) => {
+    const signature = { id: `sig-${++nextId}`, ...created };
+    setSignatures((current) => [...current, signature]);
+    if (pdf.pageCount) {
+      placeSignature(signature);
+      setStatus({ tone: "success", text: "Signature placed. Drag it into position, or resize it from the corner." });
+    }
+  };
+  const updatePlacement = (id, patch) => {
+    setPlacements((current) => current.map((placement) => placement.id === id ? { ...placement, ...patch } : placement));
+  };
+  const removePlacement = (id) => {
+    setPlacements((current) => current.filter((placement) => placement.id !== id));
+    setSelectedId(null);
+  };
+  const removeSignature = (id) => {
+    setSignatures((current) => {
+      const removed = current.find((signature) => signature.id === id);
+      if (removed) URL.revokeObjectURL(removed.url);
+      return current.filter((signature) => signature.id !== id);
+    });
+    setPlacements((current) => current.filter((placement) => placement.signatureId !== id));
+  };
+  const clearFile = () => {
+    pdf.clear();
+    setPlacements([]);
+  };
+  const handleSave = async () => {
+    if (!pdf.bytes || !placements.length) return;
+    setIsSaving(true);
+    setStatus({ tone: "info", text: "Signing your PDF..." });
+    try {
+      const byId2 = new Map(signatures.map((signature) => [signature.id, signature]));
+      const bytes = await applySignatures(
+        pdf.bytes,
+        placements.map((placement) => ({ ...placement, image: byId2.get(placement.signatureId).bytes }))
+      );
+      const blob = new Blob([bytes], { type: "application/pdf" });
+      downloadBlob(blob, `${toBaseName(pdf.file.name, "document")}-signed.pdf`);
+      setStatus({
+        tone: "success",
+        text: `Signed with ${placements.length} signature${placements.length === 1 ? "" : "s"} (${formatBytes(blob.size)}). Your download has started.`
+      });
+    } catch (error) {
+      setStatus({ tone: "error", text: `Signing failed: ${error?.message || "Please try again."}` });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const busy = isSaving || pdf.isReading;
+  const pagePlacements = placements.filter((placement) => placement.pageIndex === pageIndex);
+  const byId = new Map(signatures.map((signature) => [signature.id, signature]));
+  return /* @__PURE__ */ jsx(
+    PdfToolPage,
+    {
+      title: "Sign PDF",
+      description: "Draw, type, or upload your signature and place it anywhere on the page. Runs in your browser; your document and signature never leave your device.",
+      stats: [
+        { value: pdf.pageCount || "-", label: "Pages" },
+        { value: placements.length || "-", label: "Placed" }
+      ],
+      children: /* @__PURE__ */ jsx(
+        PdfToolColumns,
+        {
+          main: /* @__PURE__ */ jsxs(Fragment, { children: [
+            pdf.file ? /* @__PURE__ */ jsx(
+              SelectedPdfCard,
+              {
+                signed: pdf.signed,
+                file: pdf.file,
+                pageCount: pdf.pageCount,
+                onRemove: clearFile,
+                disabled: isSaving
+              }
+            ) : /* @__PURE__ */ jsx(
+              FileDropzone,
+              {
+                accept: ".pdf,application/pdf",
+                disabled: busy,
+                onFiles: pdf.selectFiles,
+                title: "Drag and drop a PDF here",
+                hint: "or click to browse from your device"
+              }
+            ),
+            renderError ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-rose-700 dark:text-rose-300", children: renderError }) : null,
+            pdf.pageCount ? /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setPageIndex((index) => Math.max(0, index - 1)),
+                      disabled: pageIndex === 0,
+                      className: iconButtonClass,
+                      "aria-label": "Previous page",
+                      children: /* @__PURE__ */ jsx("i", { className: "fa-solid fa-chevron-left" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "text-sm text-slate-700 dark:text-slate-300", children: [
+                    "Page ",
+                    pageIndex + 1,
+                    " of ",
+                    pdf.pageCount
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setPageIndex((index) => Math.min(pdf.pageCount - 1, index + 1)),
+                      disabled: pageIndex === pdf.pageCount - 1,
+                      className: iconButtonClass,
+                      "aria-label": "Next page",
+                      children: /* @__PURE__ */ jsx("i", { className: "fa-solid fa-chevron-right" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+                  pagePlacements.length,
+                  " on this page"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center rounded-2xl bg-slate-100 p-3 dark:bg-slate-800", children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: containerRef,
+                  onPointerDown: () => setSelectedId(null),
+                  className: "relative w-full max-w-[720px] bg-white shadow-md",
+                  style: { aspectRatio: preview ? `${preview.width} / ${preview.height}` : "1 / 1.414" },
+                  children: [
+                    preview ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: preview.url,
+                        alt: `Page ${pageIndex + 1}`,
+                        draggable: false,
+                        className: "pointer-events-none absolute inset-0 h-full w-full select-none"
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("i", { className: "fa-solid fa-spinner fa-spin text-slate-400", "aria-label": "Rendering page" }) }),
+                    pagePlacements.map((placement) => /* @__PURE__ */ jsx(
+                      PlacementBox,
+                      {
+                        placement,
+                        signature: byId.get(placement.signatureId),
+                        pageAspect,
+                        selected: selectedId === placement.id,
+                        onSelect: () => setSelectedId(placement.id),
+                        onChange: (patch) => updatePlacement(placement.id, patch),
+                        onRemove: () => removePlacement(placement.id),
+                        containerRef
+                      },
+                      placement.id
+                    ))
+                  ]
+                }
+              ) })
+            ] }) : null,
+            /* @__PURE__ */ jsx(StatusBanner, { status }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-wrap gap-3", children: [
+              /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleSave, disabled: busy || !placements.length, className: primaryButtonClass, children: [
+                /* @__PURE__ */ jsx("i", { className: `fa-solid ${isSaving ? "fa-spinner fa-spin" : "fa-signature"}` }),
+                isSaving ? "Signing..." : "Sign & Download"
+              ] }),
+              /* @__PURE__ */ jsx(BackToPdfTools, {})
+            ] })
+          ] }),
+          side: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: "Your signature" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(SignatureCreator, { onCreate: addSignature, onError }) }),
+            signatures.length ? /* @__PURE__ */ jsx("ul", { className: "mt-5 space-y-2", children: signatures.map((signature) => /* @__PURE__ */ jsxs("li", { className: `${cardClass} !p-2`, children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center justify-center rounded-lg bg-white", children: /* @__PURE__ */ jsx("img", { src: signature.url, alt: "Saved signature", className: "max-h-full max-w-full" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => placeSignature(signature),
+                    disabled: !pdf.pageCount,
+                    className: `flex-1 justify-center ${secondaryButtonClass}`,
+                    children: [
+                      /* @__PURE__ */ jsx("i", { className: "fa-solid fa-plus" }),
+                      "Place"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => removeSignature(signature.id),
+                    className: iconButtonClass,
+                    "aria-label": "Delete signature",
+                    children: /* @__PURE__ */ jsx("i", { className: "fa-solid fa-trash" })
+                  }
+                )
+              ] })
+            ] }, signature.id)) }) : null,
+            /* @__PURE__ */ jsx(
+              SideTips,
+              {
+                tips: [
+                  "Place the same signature on several pages, or add initials with Type \u2192 Plain.",
+                  "Select a signature and press Delete to remove it; arrow keys nudge it.",
+                  "This adds a visible signature image. It is not a certificate-based digital signature."
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+
+export { SignPdf };
+//# sourceMappingURL=chunk-TR6HJ4NO.js.map
+//# sourceMappingURL=chunk-TR6HJ4NO.js.map