@unlev/exeq 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/components/pdf-builder/DesignerView.tsx
-import { useState as useState3, useCallback as useCallback3, useEffect as useEffect2 } from "react";
+import { useState as useState2, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { createPortal } from "react-dom";
 
 // src/types/pdf-builder.ts
 function generateId() {
@@ -55,14 +56,44 @@ var FIELD_DEFAULTS = {
     height: 5,
     fontSize: 12,
     placeholder: "Initials"
+  },
+  blackout: {
+    width: 20,
+    height: 3,
+    fontSize: 12,
+    placeholder: ""
+  },
+  whiteout: {
+    width: 20,
+    height: 3,
+    fontSize: 12,
+    placeholder: ""
   }
 };
-function createField(type, assignee, page, x, y) {
+var TYPE_LABELS = {
+  text: "Text Field",
+  signature: "Signature",
+  "signed-date": "Signed Date",
+  checkbox: "Checkbox",
+  initials: "Initials",
+  blackout: "Blackout",
+  whiteout: "Whiteout"
+};
+function uniqueLabel(desired, existingLabels) {
+  const lower = desired.toLowerCase();
+  if (!existingLabels.some((l) => l.toLowerCase() === lower)) return desired;
+  let i = 2;
+  while (existingLabels.some((l) => l.toLowerCase() === `${lower} ${i}`)) i++;
+  return `${desired} ${i}`;
+}
+function createField(type, assignee, page, x, y, existingFields) {
   const defaults = FIELD_DEFAULTS[type];
+  const baseLabel = TYPE_LABELS[type];
+  const existingLabels = existingFields?.map((f) => f.label) ?? [];
   return {
     id: generateId(),
     type,
-    label: type === "text" ? "Text Field" : type === "signature" ? "Signature" : type === "signed-date" ? "Signed Date" : type === "checkbox" ? "Checkbox" : "Initials",
+    label: uniqueLabel(baseLabel, existingLabels),
     placeholder: defaults.placeholder || "",
     required: true,
     assignee,
@@ -117,6 +148,7 @@ function PdfViewer({
   onFieldMove,
   onFieldResize,
   onPageClick,
+  onDropField,
   mode,
   currentSigner,
   renderFieldContent
@@ -134,6 +166,21 @@ function PdfViewer({
       onSelectField(null);
     }
   }, [onPageClick, onSelectField]);
+  const handleDragOver = useCallback((e) => {
+    if (e.dataTransfer.types.includes("application/exeq-field-type")) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+    }
+  }, []);
+  const handleDrop = useCallback((e, pageIndex) => {
+    const fieldType = e.dataTransfer.getData("application/exeq-field-type");
+    if (!fieldType || !onDropField) return;
+    e.preventDefault();
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width * 100;
+    const y = (e.clientY - rect.top) / rect.height * 100;
+    onDropField(pageIndex, x, y, fieldType);
+  }, [onDropField]);
   return /* @__PURE__ */ jsx("div", { className: "pdf-viewer", ref: containerRef, children: pages.map((page, pageIndex) => {
     const pageFields = fields.filter((f) => f.page === pageIndex);
     return /* @__PURE__ */ jsxs(
@@ -142,6 +189,8 @@ function PdfViewer({
         className: "pdf-page",
         style: { aspectRatio: `${page.width} / ${page.height}` },
         onClick: (e) => handlePageClick(e, pageIndex),
+        onDragOver: handleDragOver,
+        onDrop: (e) => handleDrop(e, pageIndex),
         "data-page": pageIndex,
         children: [
           /* @__PURE__ */ jsx(
@@ -187,6 +236,7 @@ function FieldOverlayItem({
   const dragStartRef = useRef(null);
   const resizeStartRef = useRef(null);
   const color = getSignerColor(field.assignee);
+  const isRedact = field.type === "blackout" || field.type === "whiteout";
   const isEditable = mode === "designer" || mode === "signer" && field.assignee === currentSigner;
   const isPreFilled = !isEditable && !!field.value;
   const handleMouseDown = useCallback((e) => {
@@ -252,14 +302,15 @@ function FieldOverlayItem({
     "div",
     {
       ref: overlayRef,
-      className: `field-overlay ${isSelected ? "selected" : ""} ${isEditable ? "editable" : "readonly"} ${isPreFilled ? "prefilled" : ""}`,
+      className: `field-overlay ${isSelected ? "selected" : ""} ${isEditable ? "editable" : "readonly"} ${isPreFilled ? "prefilled" : ""} ${isRedact ? "redact" : ""}`,
       style: {
         left: `${field.x}%`,
         top: `${field.y}%`,
         width: `${field.width}%`,
         height: `${field.height}%`,
-        borderColor: color,
-        backgroundColor: isSelected ? `${color}22` : `${color}11`,
+        borderColor: isRedact ? field.type === "blackout" ? "#666" : "#bbb" : color,
+        borderStyle: isRedact ? "dashed" : "solid",
+        backgroundColor: isRedact ? field.type === "blackout" ? "#000000" : "#ffffff" : isSelected ? `${color}22` : `${color}11`,
         cursor: mode === "designer" ? "move" : "default"
       },
       onClick: (e) => {
@@ -268,7 +319,7 @@ function FieldOverlayItem({
       },
       onMouseDown: handleMouseDown,
       children: [
-        mode === "designer" && /* @__PURE__ */ jsx("div", { className: "field-overlay-label", style: { backgroundColor: color }, children: field.label }),
+        mode === "designer" && !isRedact && /* @__PURE__ */ jsx("div", { className: "field-overlay-label", style: { backgroundColor: color }, children: field.label }),
         renderContent ? renderContent(field) : /* @__PURE__ */ jsx("div", { className: "field-overlay-placeholder", children: field.value || field.placeholder }),
         mode === "designer" && isSelected && /* @__PURE__ */ jsx(
           "div",
@@ -284,8 +335,15 @@ function FieldOverlayItem({
 
 // src/components/pdf-builder/FieldPropertyPanel.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var INK_COLORS = [
+  { value: "#000000", label: "Black" },
+  { value: "#1a56db", label: "Blue" }
+];
 function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
   const color = getSignerColor(field.assignee);
+  const isRedactField = field.type === "blackout" || field.type === "whiteout";
+  const showFontSize = field.type === "text" || field.type === "signed-date";
+  const showInkColor = field.type === "text" || field.type === "signature" || field.type === "initials" || field.type === "signed-date";
   return /* @__PURE__ */ jsxs2("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ jsxs2("div", { className: "panel-header", children: [
       /* @__PURE__ */ jsx2("h3", { style: { color }, children: field.label }),
@@ -302,7 +360,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+    !isRedactField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
       /* @__PURE__ */ jsx2("label", { children: "Field Type" }),
       /* @__PURE__ */ jsxs2(
         "select",
@@ -336,7 +394,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+    !isRedactField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
       /* @__PURE__ */ jsx2("label", { children: "Assigned To" }),
       /* @__PURE__ */ jsx2(
         "select",
@@ -347,7 +405,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+    !isRedactField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
       /* @__PURE__ */ jsx2("label", { children: "Placeholder" }),
       /* @__PURE__ */ jsx2(
         "input",
@@ -358,7 +416,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "panel-field", children: /* @__PURE__ */ jsxs2("label", { className: "panel-checkbox-label", children: [
+    !isRedactField && /* @__PURE__ */ jsx2("div", { className: "panel-field", children: /* @__PURE__ */ jsxs2("label", { className: "panel-checkbox-label", children: [
       /* @__PURE__ */ jsx2(
         "input",
         {
@@ -369,7 +427,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
       ),
       "Required"
     ] }) }),
-    field.type !== "checkbox" && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+    showFontSize && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
       /* @__PURE__ */ jsx2("label", { children: "Font Size (pt)" }),
       /* @__PURE__ */ jsx2(
         "input",
@@ -382,118 +440,26 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "panel-field-group", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
-        /* @__PURE__ */ jsx2("label", { children: "Width (%)" }),
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "number",
-            min: "1",
-            max: "100",
-            step: "0.5",
-            value: field.width,
-            onChange: (e) => onUpdate(field.id, { width: Number(e.target.value) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
-        /* @__PURE__ */ jsx2("label", { children: "Height (%)" }),
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "number",
-            min: "1",
-            max: "100",
-            step: "0.5",
-            value: field.height,
-            onChange: (e) => onUpdate(field.id, { height: Number(e.target.value) })
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-
-// src/components/pdf-builder/SignerRoleSelector.tsx
-import { useState } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function SignerRoleSelector({
-  roles,
-  activeRole,
-  onSetActiveRole,
-  onAddRole,
-  onRemoveRole
-}) {
-  const [isAdding, setIsAdding] = useState(false);
-  const [newRoleName, setNewRoleName] = useState("");
-  const handleAdd = () => {
-    if (newRoleName.trim()) {
-      onAddRole(newRoleName.trim());
-      setNewRoleName("");
-      setIsAdding(false);
-    }
-  };
-  return /* @__PURE__ */ jsxs3("div", { className: "signer-role-selector", children: [
-    /* @__PURE__ */ jsx3("div", { className: "signer-role-label", children: "Signer Roles" }),
-    /* @__PURE__ */ jsxs3("div", { className: "signer-role-list", children: [
-      roles.map((role) => /* @__PURE__ */ jsxs3(
+    showInkColor && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      /* @__PURE__ */ jsx2("label", { children: "Ink Color" }),
+      /* @__PURE__ */ jsx2("div", { className: "ink-color-picker", children: INK_COLORS.map((c) => /* @__PURE__ */ jsx2(
         "button",
         {
-          className: `signer-role-chip ${role === activeRole ? "active" : ""}`,
-          style: {
-            borderColor: getSignerColor(role),
-            backgroundColor: role === activeRole ? getSignerColor(role) : "transparent",
-            color: role === activeRole ? "#fff" : getSignerColor(role)
-          },
-          onClick: () => onSetActiveRole(role),
-          children: [
-            role,
-            roles.length > 1 && role !== "Sender" && /* @__PURE__ */ jsx3(
-              "span",
-              {
-                className: "signer-role-remove",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onRemoveRole(role);
-                },
-                children: "\xD7"
-              }
-            )
-          ]
+          className: `ink-color-swatch ${(field.inkColor || "#000000") === c.value ? "active" : ""}`,
+          style: { backgroundColor: c.value },
+          onClick: () => onUpdate(field.id, { inkColor: c.value }),
+          title: c.label
         },
-        role
-      )),
-      isAdding ? /* @__PURE__ */ jsxs3("div", { className: "signer-role-add-input", children: [
-        /* @__PURE__ */ jsx3(
-          "input",
-          {
-            type: "text",
-            value: newRoleName,
-            onChange: (e) => setNewRoleName(e.target.value),
-            onKeyDown: (e) => e.key === "Enter" && handleAdd(),
-            placeholder: "Role name",
-            autoFocus: true
-          }
-        ),
-        /* @__PURE__ */ jsx3("button", { onClick: handleAdd, children: "Add" }),
-        /* @__PURE__ */ jsx3("button", { onClick: () => setIsAdding(false), children: "Cancel" })
-      ] }) : /* @__PURE__ */ jsx3(
-        "button",
-        {
-          className: "signer-role-add-btn",
-          onClick: () => setIsAdding(true),
-          children: "+ Add Role"
-        }
-      )
+        c.value
+      )) })
     ] })
   ] });
 }
 
 // src/components/pdf-builder/SignatureCanvas.tsx
-import { useRef as useRef2, useState as useState2, useCallback as useCallback2, useEffect } from "react";
+import { useRef as useRef2, useState, useCallback as useCallback2, useEffect } from "react";
 import { getStroke } from "perfect-freehand";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function getSvgPathFromStroke(stroke) {
   if (!stroke.length) return "";
   const d = stroke.reduce(
@@ -512,12 +478,13 @@ function SignatureCanvas({
   height = 150,
   onSign,
   initialValue,
-  className
+  className,
+  inkColor = "#000000"
 }) {
   const canvasRef = useRef2(null);
-  const [paths, setPaths] = useState2([]);
-  const [currentPath, setCurrentPath] = useState2(null);
-  const [isEmpty, setIsEmpty] = useState2(!initialValue);
+  const [paths, setPaths] = useState([]);
+  const [currentPath, setCurrentPath] = useState(null);
+  const [isEmpty, setIsEmpty] = useState(!initialValue);
   useEffect(() => {
     if (initialValue && canvasRef.current) {
       const ctx = canvasRef.current.getContext("2d");
@@ -544,7 +511,7 @@ function SignatureCanvas({
       });
       const pathStr = getSvgPathFromStroke(stroke);
       const path2d = new Path2D(pathStr);
-      ctx.fillStyle = "#000";
+      ctx.fillStyle = inkColor;
       ctx.fill(path2d);
     }
   }, [paths, currentPath, width, height]);
@@ -588,8 +555,8 @@ function SignatureCanvas({
       onSign("");
     }
   }, [width, height, onSign]);
-  return /* @__PURE__ */ jsxs4("div", { className: `signature-canvas-wrapper ${className || ""}`, children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { className: `signature-canvas-wrapper ${className || ""}`, children: [
+    /* @__PURE__ */ jsx3(
       "canvas",
       {
         ref: canvasRef,
@@ -602,28 +569,66 @@ function SignatureCanvas({
         style: { touchAction: "none" }
       }
     ),
-    /* @__PURE__ */ jsxs4("div", { className: "signature-canvas-actions", children: [
-      !isEmpty && /* @__PURE__ */ jsx4("button", { type: "button", onClick: handleClear, className: "signature-clear-btn", children: "Clear" }),
-      isEmpty && /* @__PURE__ */ jsx4("span", { className: "signature-hint", children: "Draw your signature above" })
+    /* @__PURE__ */ jsxs3("div", { className: "signature-canvas-actions", children: [
+      !isEmpty && /* @__PURE__ */ jsx3("button", { type: "button", onClick: handleClear, className: "signature-clear-btn", children: "Clear" }),
+      isEmpty && /* @__PURE__ */ jsx3("span", { className: "signature-hint", children: "Draw your signature above" })
     ] })
   ] });
 }
 
+// src/utils/apiKey.ts
+var VALID_KEYS = /* @__PURE__ */ new Set([
+  "exeq_live_2024"
+]);
+function isValidApiKey(key) {
+  if (!key) return false;
+  return VALID_KEYS.has(key);
+}
+
 // src/components/pdf-builder/DesignerView.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var FIELD_TYPE_META = [
+  { type: "text", label: "Text", icon: "T" },
+  { type: "signature", label: "Signature", icon: "\u270D" },
+  { type: "signed-date", label: "Date", icon: "\u{1F4C5}" },
+  { type: "checkbox", label: "Checkbox", icon: "\u2611" },
+  { type: "initials", label: "Initials", icon: "IN" },
+  { type: "blackout", label: "Blackout", icon: "\u25A0", group: "redact" },
+  { type: "whiteout", label: "Whiteout", icon: "\u25A1", group: "redact" }
+];
 function DesignerView({
+  apiKey,
   initialPdfUrl,
   initialTemplate,
-  onSave
+  onSave,
+  hideHeader,
+  headerPortalRef
 } = {}) {
-  const [pages, setPages] = useState3([]);
-  const [fields, setFields] = useState3(initialTemplate?.fields ?? []);
-  const [selectedFieldId, setSelectedFieldId] = useState3(null);
-  const [signerRoles, setSignerRoles] = useState3(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
-  const [activeRole, setActiveRole] = useState3("Sender");
-  const [activeFieldType, setActiveFieldType] = useState3("text");
-  const [loading, setLoading] = useState3(false);
-  const [pdfSource, setPdfSource] = useState3(null);
+  if (!isValidApiKey(apiKey)) {
+    return /* @__PURE__ */ jsx4("div", { className: "designer-layout", children: /* @__PURE__ */ jsxs4("div", { className: "empty-state", children: [
+      /* @__PURE__ */ jsx4("h2", { children: "Invalid API Key" }),
+      /* @__PURE__ */ jsxs4("p", { children: [
+        "A valid API key is required to use Exeq. Visit ",
+        /* @__PURE__ */ jsx4("a", { href: "https://exeq.org", children: "exeq.org" }),
+        " to get one."
+      ] })
+    ] }) });
+  }
+  const [pages, setPages] = useState2([]);
+  const [fields, setFields] = useState2(initialTemplate?.fields ?? []);
+  const [selectedFieldId, setSelectedFieldId] = useState2(null);
+  const [signerRoles, setSignerRoles] = useState2(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
+  const [activeRole, setActiveRole] = useState2("Sender");
+  const [activeFieldType, setActiveFieldType] = useState2("text");
+  const [loading, setLoading] = useState2(false);
+  const [pdfSource, setPdfSource] = useState2(null);
+  const [rightTab, setRightTab] = useState2("properties");
+  const [isAddingRole, setIsAddingRole] = useState2(false);
+  const [newRoleName, setNewRoleName] = useState2("");
+  const [draggingFieldType, setDraggingFieldType] = useState2(null);
+  const [panelWidth, setPanelWidth] = useState2(380);
+  const dragGhostRef = useRef3(null);
+  const resizingRef = useRef3(false);
   useEffect2(() => {
     const pdfUrl = initialPdfUrl || initialTemplate?.pdfUrl;
     if (pdfUrl) {
@@ -670,10 +675,11 @@ function DesignerView({
     reader.readAsArrayBuffer(file);
   }, [loadPdf]);
   const handlePageClick = useCallback3((page, x, y) => {
-    const field = createField(activeFieldType, activeRole, page, x, y);
+    const field = createField(activeFieldType, activeRole, page, x, y, fields);
     setFields((prev) => [...prev, field]);
     setSelectedFieldId(field.id);
-  }, [activeFieldType, activeRole]);
+    setRightTab("properties");
+  }, [activeFieldType, activeRole, fields]);
   const handleFieldMove = useCallback3((id, page, x, y) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, page, x, y } : f));
   }, []);
@@ -681,17 +687,26 @@ function DesignerView({
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, width, height } : f));
   }, []);
   const handleFieldUpdate = useCallback3((id, updates) => {
-    setFields((prev) => prev.map((f) => f.id === id ? { ...f, ...updates } : f));
+    setFields((prev) => {
+      if (updates.label !== void 0) {
+        const otherLabels = prev.filter((f) => f.id !== id).map((f) => f.label);
+        updates.label = uniqueLabel(updates.label, otherLabels);
+      }
+      return prev.map((f) => f.id === id ? { ...f, ...updates } : f);
+    });
   }, []);
   const handleFieldDelete = useCallback3((id) => {
     setFields((prev) => prev.filter((f) => f.id !== id));
     if (selectedFieldId === id) setSelectedFieldId(null);
   }, [selectedFieldId]);
-  const handleAddRole = useCallback3((role) => {
-    if (!signerRoles.includes(role)) {
-      setSignerRoles((prev) => [...prev, role]);
+  const handleAddRole = useCallback3(() => {
+    const name = newRoleName.trim();
+    if (name && !signerRoles.includes(name)) {
+      setSignerRoles((prev) => [...prev, name]);
     }
-  }, [signerRoles]);
+    setNewRoleName("");
+    setIsAddingRole(false);
+  }, [newRoleName, signerRoles]);
   const handleRemoveRole = useCallback3((role) => {
     setSignerRoles((prev) => prev.filter((r) => r !== role));
     setFields((prev) => prev.map((f) => f.assignee === role ? { ...f, assignee: signerRoles[0] } : f));
@@ -717,160 +732,310 @@ function DesignerView({
     }
     window.parent?.postMessage({ type: "template-saved", template }, "*");
   }, [fields, signerRoles, pdfSource, onSave]);
+  const handlePaletteDragStart = useCallback3((e, type) => {
+    setDraggingFieldType(type);
+    e.dataTransfer.setData("application/exeq-field-type", type);
+    e.dataTransfer.effectAllowed = "copy";
+    const ghost = document.createElement("div");
+    ghost.className = "palette-drag-ghost";
+    ghost.textContent = FIELD_TYPE_META.find((f) => f.type === type)?.label || type;
+    ghost.style.cssText = `
+      position: fixed; top: -200px; left: -200px;
+      padding: 6px 16px; background: ${getSignerColor(activeRole)};
+      color: #fff; border-radius: 4px; font-size: 12px;
+      font-family: system-ui; pointer-events: none; white-space: nowrap;
+    `;
+    document.body.appendChild(ghost);
+    e.dataTransfer.setDragImage(ghost, 40, 16);
+    dragGhostRef.current = ghost;
+  }, [activeRole]);
+  const handlePaletteDragEnd = useCallback3(() => {
+    setDraggingFieldType(null);
+    if (dragGhostRef.current) {
+      document.body.removeChild(dragGhostRef.current);
+      dragGhostRef.current = null;
+    }
+  }, []);
+  const handleDropOnPage = useCallback3((page, x, y, fieldType) => {
+    const field = createField(fieldType, activeRole, page, x, y, fields);
+    setFields((prev) => [...prev, field]);
+    setSelectedFieldId(field.id);
+    setRightTab("properties");
+  }, [activeRole, fields]);
+  useEffect2(() => {
+    const handleKeyDown = (e) => {
+      if (e.key !== "Delete" && e.key !== "Backspace") return;
+      if (!selectedFieldId) return;
+      const tag = (document.activeElement?.tagName || "").toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (document.activeElement?.isContentEditable) return;
+      e.preventDefault();
+      if (window.confirm("Delete this field?")) {
+        handleFieldDelete(selectedFieldId);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedFieldId, handleFieldDelete]);
+  const handleResizeStart = useCallback3((e) => {
+    e.preventDefault();
+    resizingRef.current = true;
+    const startX = e.clientX;
+    const startWidth = panelWidth;
+    const handleMouseMove = (e2) => {
+      if (!resizingRef.current) return;
+      const delta = startX - e2.clientX;
+      setPanelWidth(Math.max(280, Math.min(600, startWidth + delta)));
+    };
+    const handleMouseUp = () => {
+      resizingRef.current = false;
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }, [panelWidth]);
+  const sortedFields = [...fields].sort((a, b) => {
+    if (a.page !== b.page) return a.page - b.page;
+    const bandThreshold = 2;
+    if (Math.abs(a.y - b.y) > bandThreshold) return a.y - b.y;
+    return a.x - b.x;
+  });
   const selectedField = fields.find((f) => f.id === selectedFieldId) || null;
   const renderFieldContent = useCallback3((field) => {
+    if (field.type === "blackout" || field.type === "whiteout") {
+      return null;
+    }
     if (field.type === "signature" || field.type === "initials") {
       if (field.value) {
-        return /* @__PURE__ */ jsx5("img", { src: field.value, alt: field.label, className: "field-signature-preview" });
+        return /* @__PURE__ */ jsx4("img", { src: field.value, alt: field.label, className: "field-signature-preview" });
       }
     }
-    return /* @__PURE__ */ jsx5("div", { className: "field-overlay-placeholder", children: field.value || field.placeholder });
+    const inkColor = field.inkColor || "#000000";
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "field-overlay-placeholder",
+        style: { color: field.value ? inkColor : void 0, fontSize: `${field.fontSize * 0.6}px` },
+        children: field.value || field.placeholder
+      }
+    );
   }, []);
-  return /* @__PURE__ */ jsxs5("div", { className: "designer-layout", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "designer-toolbar", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "toolbar-left", children: [
-        !pages.length && /* @__PURE__ */ jsxs5("label", { className: "upload-btn", children: [
-          "Upload PDF",
-          /* @__PURE__ */ jsx5("input", { type: "file", accept: ".pdf", onChange: handleFileUpload, hidden: true })
-        ] }),
-        pages.length > 0 && /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsxs5("label", { className: "upload-btn upload-btn-small", children: [
-            "Change PDF",
-            /* @__PURE__ */ jsx5("input", { type: "file", accept: ".pdf", onChange: handleFileUpload, hidden: true })
-          ] }),
-          /* @__PURE__ */ jsx5("div", { className: "field-type-selector", children: ["text", "signature", "signed-date", "checkbox", "initials"].map((type) => /* @__PURE__ */ jsx5(
-            "button",
+  const headerButtons = pages.length > 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4("label", { className: "header-btn header-btn-outline", children: [
+      "Change PDF",
+      /* @__PURE__ */ jsx4("input", { type: "file", accept: ".pdf", onChange: handleFileUpload, hidden: true })
+    ] }),
+    /* @__PURE__ */ jsx4("button", { onClick: handleExport, className: "header-btn header-btn-primary", children: "Export Template" })
+  ] }) : null;
+  return /* @__PURE__ */ jsxs4("div", { className: "designer-layout", children: [
+    headerPortalRef?.current && headerButtons && createPortal(headerButtons, headerPortalRef.current),
+    !hideHeader && !headerPortalRef && /* @__PURE__ */ jsx4("div", { className: "designer-header", children: /* @__PURE__ */ jsx4("div", { className: "designer-header-right", children: headerButtons }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "designer-body", children: [
+      pages.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "designer-palette", children: [
+        /* @__PURE__ */ jsx4("div", { className: "palette-heading", children: "New Field Role" }),
+        /* @__PURE__ */ jsxs4("div", { className: "palette-role-section", children: [
+          /* @__PURE__ */ jsx4(
+            "select",
             {
-              className: `field-type-btn ${activeFieldType === type ? "active" : ""}`,
-              onClick: () => setActiveFieldType(type),
-              children: type === "text" ? "Text" : type === "signature" ? "Signature" : type === "signed-date" ? "Date" : type === "checkbox" ? "Checkbox" : "Initials"
-            },
-            type
-          )) })
-        ] })
+              className: "palette-role-select",
+              value: activeRole,
+              onChange: (e) => setActiveRole(e.target.value),
+              style: { borderColor: getSignerColor(activeRole), color: getSignerColor(activeRole) },
+              children: signerRoles.map((role) => /* @__PURE__ */ jsx4("option", { value: role, children: role }, role))
+            }
+          ),
+          isAddingRole ? /* @__PURE__ */ jsxs4("div", { className: "palette-role-add-inline", children: [
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                type: "text",
+                value: newRoleName,
+                onChange: (e) => setNewRoleName(e.target.value),
+                onKeyDown: (e) => e.key === "Enter" && handleAddRole(),
+                placeholder: "Role name",
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ jsx4("button", { onClick: handleAddRole, children: "Add" }),
+            /* @__PURE__ */ jsx4("button", { onClick: () => {
+              setIsAddingRole(false);
+              setNewRoleName("");
+            }, children: "Cancel" })
+          ] }) : /* @__PURE__ */ jsx4("button", { className: "palette-role-add-link", onClick: () => setIsAddingRole(true), children: "+ Add Role" })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "palette-divider" }),
+        /* @__PURE__ */ jsx4("div", { className: "palette-heading", children: "Fields" }),
+        FIELD_TYPE_META.filter((f) => !f.group).map(({ type, label, icon }) => /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: `palette-item ${activeFieldType === type ? "active" : ""}`,
+            draggable: true,
+            onClick: () => setActiveFieldType(type),
+            onDragStart: (e) => handlePaletteDragStart(e, type),
+            onDragEnd: handlePaletteDragEnd,
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "palette-item-icon", children: icon }),
+              /* @__PURE__ */ jsx4("span", { className: "palette-item-label", children: label })
+            ]
+          },
+          type
+        )),
+        /* @__PURE__ */ jsx4("div", { className: "palette-divider" }),
+        /* @__PURE__ */ jsx4("div", { className: "palette-heading", children: "Redact" }),
+        FIELD_TYPE_META.filter((f) => f.group === "redact").map(({ type, label, icon }) => /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: `palette-item ${activeFieldType === type ? "active" : ""}`,
+            draggable: true,
+            onClick: () => setActiveFieldType(type),
+            onDragStart: (e) => handlePaletteDragStart(e, type),
+            onDragEnd: handlePaletteDragEnd,
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "palette-item-icon", children: icon }),
+              /* @__PURE__ */ jsx4("span", { className: "palette-item-label", children: label })
+            ]
+          },
+          type
+        ))
       ] }),
-      /* @__PURE__ */ jsx5("div", { className: "toolbar-right", children: pages.length > 0 && /* @__PURE__ */ jsx5("button", { onClick: handleExport, className: "export-btn", children: "Export Template" }) })
-    ] }),
-    pages.length > 0 && /* @__PURE__ */ jsx5(
-      SignerRoleSelector,
-      {
-        roles: signerRoles,
-        activeRole,
-        onSetActiveRole: setActiveRole,
-        onAddRole: handleAddRole,
-        onRemoveRole: handleRemoveRole
-      }
-    ),
-    /* @__PURE__ */ jsxs5("div", { className: "designer-content", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "designer-pdf-area", children: [
-        loading && /* @__PURE__ */ jsx5("div", { className: "loading-indicator", children: "Loading PDF..." }),
-        !pages.length && !loading && /* @__PURE__ */ jsxs5("div", { className: "empty-state", children: [
-          /* @__PURE__ */ jsx5("h2", { children: "Upload a PDF to get started" }),
-          /* @__PURE__ */ jsx5("p", { children: "Upload a template PDF, then click on the page to place form fields." }),
-          /* @__PURE__ */ jsxs5("label", { className: "upload-btn upload-btn-large", children: [
-            "Choose PDF File",
-            /* @__PURE__ */ jsx5("input", { type: "file", accept: ".pdf", onChange: handleFileUpload, hidden: true })
+      /* @__PURE__ */ jsxs4("div", { className: "designer-pdf-area", children: [
+        loading && /* @__PURE__ */ jsx4("div", { className: "loading-indicator", children: "Loading PDF..." }),
+        !pages.length && !loading && /* @__PURE__ */ jsxs4("div", { className: "empty-state", children: [
+          /* @__PURE__ */ jsx4("h2", { children: "Open a PDF to get started" }),
+          /* @__PURE__ */ jsx4("p", { children: "Select a PDF from your device to begin. Your file stays on your computer \u2014 nothing is uploaded." }),
+          /* @__PURE__ */ jsxs4("label", { className: "upload-btn upload-btn-large", children: [
+            "Select PDF",
+            /* @__PURE__ */ jsx4("input", { type: "file", accept: ".pdf", onChange: handleFileUpload, hidden: true })
           ] })
         ] }),
-        pages.length > 0 && /* @__PURE__ */ jsx5(
+        pages.length > 0 && /* @__PURE__ */ jsx4(
           PdfViewer,
           {
             pages,
             fields,
             selectedFieldId,
-            onSelectField: setSelectedFieldId,
+            onSelectField: (id) => {
+              setSelectedFieldId(id);
+              if (id) setRightTab("properties");
+            },
             onFieldMove: handleFieldMove,
             onFieldResize: handleFieldResize,
             onPageClick: handlePageClick,
+            onDropField: handleDropOnPage,
             mode: "designer",
             renderFieldContent
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "designer-panel", children: [
-        selectedField ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx5(
-            FieldPropertyPanel,
-            {
-              field: selectedField,
-              signerRoles,
-              onUpdate: handleFieldUpdate,
-              onDelete: handleFieldDelete
-            }
-          ),
-          selectedField.assignee === activeRole && /* @__PURE__ */ jsxs5("div", { className: "prefill-section", children: [
-            /* @__PURE__ */ jsx5("h4", { children: "Pre-fill Value" }),
-            selectedField.type === "signature" || selectedField.type === "initials" ? /* @__PURE__ */ jsx5(
-              SignatureCanvas,
+      pages.length > 0 && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4("div", { className: "panel-resize-handle", onMouseDown: handleResizeStart }),
+        /* @__PURE__ */ jsxs4("div", { className: "designer-panel", style: { width: panelWidth }, children: [
+          /* @__PURE__ */ jsxs4("div", { className: "panel-tabs", children: [
+            /* @__PURE__ */ jsx4(
+              "button",
               {
-                width: 300,
-                height: selectedField.type === "initials" ? 100 : 150,
-                onSign: (dataUrl) => handleFieldUpdate(selectedField.id, { value: dataUrl }),
-                initialValue: selectedField.value
+                className: `panel-tab ${rightTab === "properties" ? "active" : ""}`,
+                onClick: () => setRightTab("properties"),
+                children: "Properties"
               }
-            ) : selectedField.type === "checkbox" ? /* @__PURE__ */ jsxs5("label", { className: "panel-checkbox-label", children: [
-              /* @__PURE__ */ jsx5(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: selectedField.value === "true",
-                  onChange: (e) => handleFieldUpdate(selectedField.id, { value: e.target.checked ? "true" : "" })
-                }
-              ),
-              "Checked"
-            ] }) : /* @__PURE__ */ jsx5(
-              "input",
+            ),
+            /* @__PURE__ */ jsxs4(
+              "button",
               {
-                type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
-                value: selectedField.value,
-                onChange: (e) => handleFieldUpdate(selectedField.id, { value: e.target.value }),
-                placeholder: `Pre-fill ${selectedField.label}`,
-                className: "prefill-input"
+                className: `panel-tab ${rightTab === "fields" ? "active" : ""}`,
+                onClick: () => setRightTab("fields"),
+                children: [
+                  "All Fields",
+                  fields.length > 0 ? ` (${fields.length})` : ""
+                ]
               }
             )
-          ] })
-        ] }) : /* @__PURE__ */ jsx5("div", { className: "panel-empty", children: pages.length > 0 ? "Click on the PDF to place a field, or select an existing field to edit its properties." : "Upload a PDF to begin designing your template." }),
-        fields.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "field-list", children: [
-          /* @__PURE__ */ jsxs5("h4", { children: [
-            "All Fields (",
-            fields.length,
-            ")"
           ] }),
-          fields.map((f, i) => /* @__PURE__ */ jsxs5(
-            "div",
-            {
-              className: `field-list-item ${f.id === selectedFieldId ? "active" : ""}`,
-              onClick: () => setSelectedFieldId(f.id),
-              children: [
-                /* @__PURE__ */ jsx5(
-                  "span",
+          /* @__PURE__ */ jsxs4("div", { className: "panel-tab-content", children: [
+            rightTab === "properties" && /* @__PURE__ */ jsx4(Fragment, { children: selectedField ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+              /* @__PURE__ */ jsx4(
+                FieldPropertyPanel,
+                {
+                  field: selectedField,
+                  signerRoles,
+                  onUpdate: handleFieldUpdate,
+                  onDelete: handleFieldDelete
+                }
+              ),
+              selectedField.type !== "blackout" && selectedField.type !== "whiteout" && /* @__PURE__ */ jsxs4("div", { className: "prefill-section", children: [
+                /* @__PURE__ */ jsx4("h4", { children: "Pre-fill Value" }),
+                selectedField.type === "signature" || selectedField.type === "initials" ? /* @__PURE__ */ jsx4(
+                  SignatureCanvas,
                   {
-                    className: "field-list-dot",
-                    style: { backgroundColor: getSignerColor(f.assignee) }
+                    width: panelWidth - 40,
+                    height: selectedField.type === "initials" ? 100 : 150,
+                    onSign: (dataUrl) => handleFieldUpdate(selectedField.id, { value: dataUrl }),
+                    initialValue: selectedField.value,
+                    inkColor: selectedField.inkColor
                   }
-                ),
-                /* @__PURE__ */ jsx5("span", { className: "field-list-name", children: f.label }),
-                /* @__PURE__ */ jsxs5("span", { className: "field-list-page", children: [
-                  "p",
-                  f.page + 1
-                ] }),
-                f.required && /* @__PURE__ */ jsx5("span", { className: "field-list-required", children: "*" })
-              ]
-            },
-            f.id
-          ))
+                ) : selectedField.type === "checkbox" ? /* @__PURE__ */ jsxs4("label", { className: "panel-checkbox-label", children: [
+                  /* @__PURE__ */ jsx4(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: selectedField.value === "true",
+                      onChange: (e) => handleFieldUpdate(selectedField.id, { value: e.target.checked ? "true" : "" })
+                    }
+                  ),
+                  "Checked"
+                ] }) : /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
+                    value: selectedField.value,
+                    onChange: (e) => handleFieldUpdate(selectedField.id, { value: e.target.value }),
+                    placeholder: `Pre-fill ${selectedField.label}`,
+                    className: "prefill-input",
+                    style: { color: selectedField.inkColor || "#000000" }
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsx4("div", { className: "panel-empty", children: "Click on the PDF to place a field, or select an existing field to edit its properties." }) }),
+            rightTab === "fields" && /* @__PURE__ */ jsx4(Fragment, { children: fields.length === 0 ? /* @__PURE__ */ jsx4("div", { className: "panel-empty", children: "No fields yet. Drag a field from the left palette onto the PDF, or click on the PDF to place one." }) : /* @__PURE__ */ jsx4("div", { className: "field-list", children: sortedFields.map((f) => /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: `field-list-item ${f.id === selectedFieldId ? "active" : ""}`,
+                onClick: () => {
+                  setSelectedFieldId(f.id);
+                  setRightTab("properties");
+                },
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    "span",
+                    {
+                      className: "field-list-dot",
+                      style: { backgroundColor: getSignerColor(f.assignee) }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("span", { className: "field-list-name", children: f.label }),
+                  /* @__PURE__ */ jsxs4("span", { className: "field-list-page", children: [
+                    "p",
+                    f.page + 1
+                  ] }),
+                  f.required && /* @__PURE__ */ jsx4("span", { className: "field-list-required", children: "*" })
+                ]
+              },
+              f.id
+            )) }) })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "powered-by", children: [
+            "Powered by ",
+            /* @__PURE__ */ jsx4("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
+          ] })
         ] })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "powered-by", children: [
-      "Powered by ",
-      /* @__PURE__ */ jsx5("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
     ] })
   ] });
 }
 
 // src/components/pdf-builder/SignerView.tsx
-import { useState as useState4, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useState as useState3, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4 } from "react";
 
 // src/utils/pdfFiller.ts
 import { PDFDocument, rgb, StandardFonts } from "pdf-lib";
@@ -885,8 +1050,13 @@ async function generateFilledPdf(pdfSource, fields) {
   const pdfDoc = await PDFDocument.load(pdfBytes);
   const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
   const pages = pdfDoc.getPages();
+  function hexToRgb(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    return rgb(r, g, b);
+  }
   for (const field of fields) {
-    if (!field.value) continue;
     const page = pages[field.page];
     if (!page) continue;
     const pageWidth = page.getWidth();
@@ -895,6 +1065,18 @@ async function generateFilledPdf(pdfSource, fields) {
     const y = pageHeight - field.y / 100 * pageHeight - field.height / 100 * pageHeight;
     const w = field.width / 100 * pageWidth;
     const h = field.height / 100 * pageHeight;
+    if (field.type === "blackout" || field.type === "whiteout") {
+      page.drawRectangle({
+        x,
+        y,
+        width: w,
+        height: h,
+        color: field.type === "blackout" ? rgb(0, 0, 0) : rgb(1, 1, 1)
+      });
+      continue;
+    }
+    if (!field.value) continue;
+    const inkColor = field.inkColor ? hexToRgb(field.inkColor) : rgb(0, 0, 0);
     if (field.type === "checkbox") {
       if (field.value === "true") {
         const inset = Math.min(w, h) * 0.2;
@@ -903,13 +1085,13 @@ async function generateFilledPdf(pdfSource, fields) {
           start: { x: x + inset, y: y + inset },
           end: { x: x + w - inset, y: y + h - inset },
           thickness: lineWidth,
-          color: rgb(0, 0, 0)
+          color: inkColor
         });
         page.drawLine({
           start: { x: x + w - inset, y: y + inset },
           end: { x: x + inset, y: y + h - inset },
           thickness: lineWidth,
-          color: rgb(0, 0, 0)
+          color: inkColor
         });
       }
     } else if (field.type === "signature" || field.type === "initials") {
@@ -933,7 +1115,7 @@ async function generateFilledPdf(pdfSource, fields) {
         y: y + h * 0.3,
         size: fontSize,
         font,
-        color: rgb(0, 0, 0),
+        color: inkColor,
         maxWidth: w - 4
       });
     }
@@ -960,7 +1142,7 @@ async function postPdfToCallback(bytes, callbackUrl, filename) {
 }
 
 // src/components/pdf-builder/FieldNavigator.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function FieldNavigator({
   fields,
   currentFieldId,
@@ -986,15 +1168,15 @@ function FieldNavigator({
     if (f.type === "checkbox") return true;
     return !!f.value;
   }).length;
-  return /* @__PURE__ */ jsxs6("div", { className: "field-navigator", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "field-navigator-progress", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "field-navigator", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "field-navigator-progress", children: [
       filledCount,
       " of ",
       fields.length,
       " fields completed"
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "field-navigator-controls", children: [
-      /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs5("div", { className: "field-navigator-controls", children: [
+      /* @__PURE__ */ jsx5(
         "button",
         {
           onClick: handlePrev,
@@ -1003,8 +1185,8 @@ function FieldNavigator({
           children: "Prev"
         }
       ),
-      /* @__PURE__ */ jsx6("span", { className: "field-navigator-position", children: currentIndex >= 0 ? `${currentIndex + 1} / ${fields.length}` : "-" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx5("span", { className: "field-navigator-position", children: currentIndex >= 0 ? `${currentIndex + 1} / ${fields.length}` : "-" }),
+      /* @__PURE__ */ jsx5(
         "button",
         {
           onClick: handleNext,
@@ -1014,7 +1196,7 @@ function FieldNavigator({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx5(
       "button",
       {
         onClick: onSubmit,
@@ -1027,26 +1209,49 @@ function FieldNavigator({
 }
 
 // src/components/pdf-builder/SignerView.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function SignerView({
+  apiKey,
   initialPdfUrl,
   initialTemplate,
   initialSigner,
   callbackUrl: initialCallbackUrl,
-  onComplete
+  onComplete,
+  initialValues
 } = {}) {
-  const [pages, setPages] = useState4([]);
-  const [fields, setFields] = useState4([]);
-  const [selectedFieldId, setSelectedFieldId] = useState4(null);
-  const [signer, setSigner] = useState4(initialSigner || "Signer 1");
-  const [loading, setLoading] = useState4(false);
-  const [submitting, setSubmitting] = useState4(false);
-  const [pdfSource, setPdfSource] = useState4(null);
-  const [callbackUrl, setCallbackUrl] = useState4(initialCallbackUrl || "");
-  const containerRef = useRef3(null);
+  if (!isValidApiKey(apiKey)) {
+    return /* @__PURE__ */ jsx6("div", { className: "signer-layout", children: /* @__PURE__ */ jsxs6("div", { className: "empty-state", children: [
+      /* @__PURE__ */ jsx6("h2", { children: "Invalid API Key" }),
+      /* @__PURE__ */ jsxs6("p", { children: [
+        "A valid API key is required to use Exeq. Visit ",
+        /* @__PURE__ */ jsx6("a", { href: "https://exeq.org", children: "exeq.org" }),
+        " to get one."
+      ] })
+    ] }) });
+  }
+  const [pages, setPages] = useState3([]);
+  const [fields, setFields] = useState3([]);
+  const [selectedFieldId, setSelectedFieldId] = useState3(null);
+  const [signer, setSigner] = useState3(initialSigner || "Signer 1");
+  const [loading, setLoading] = useState3(false);
+  const [submitting, setSubmitting] = useState3(false);
+  const [pdfSource, setPdfSource] = useState3(null);
+  const [callbackUrl, setCallbackUrl] = useState3(initialCallbackUrl || "");
+  const containerRef = useRef4(null);
   useEffect3(() => {
     if (initialTemplate) {
-      setFields(initialTemplate.fields);
+      let templateFields = initialTemplate.fields;
+      if (initialValues) {
+        templateFields = templateFields.map((f) => {
+          const byLabel = Object.entries(initialValues).find(
+            ([key]) => key.toLowerCase() === f.label.toLowerCase()
+          );
+          const byId = initialValues[f.id];
+          const value = byLabel?.[1] ?? byId;
+          return value !== void 0 ? { ...f, value } : f;
+        });
+      }
+      setFields(templateFields);
       if (initialPdfUrl) loadPdf(initialPdfUrl);
       return;
     }
@@ -1084,7 +1289,12 @@ function SignerView({
       setLoading(false);
     }
   }, []);
-  const editableFields = fields.filter((f) => f.assignee === signer);
+  const editableFields = fields.filter((f) => f.assignee === signer).sort((a, b) => {
+    if (a.page !== b.page) return a.page - b.page;
+    const bandThreshold = 2;
+    if (Math.abs(a.y - b.y) > bandThreshold) return a.y - b.y;
+    return a.x - b.x;
+  });
   const selectedField = fields.find((f) => f.id === selectedFieldId) || null;
   const isFieldEditable = selectedField ? selectedField.assignee === signer : false;
   const handleFieldUpdate = useCallback4((id, value) => {
@@ -1129,21 +1339,21 @@ function SignerView({
     const editable = field.assignee === signer;
     if (!editable) {
       if (field.type === "signature" || field.type === "initials") {
-        return field.value ? /* @__PURE__ */ jsx7("img", { src: field.value, alt: field.label, className: "field-signature-preview" }) : /* @__PURE__ */ jsx7("div", { className: "field-overlay-placeholder readonly", children: field.placeholder });
+        return field.value ? /* @__PURE__ */ jsx6("img", { src: field.value, alt: field.label, className: "field-signature-preview" }) : /* @__PURE__ */ jsx6("div", { className: "field-overlay-placeholder readonly", children: field.placeholder });
       }
       if (field.type === "checkbox") {
-        return /* @__PURE__ */ jsx7("div", { className: "field-checkbox-display readonly", children: field.value === "true" ? "\u2713" : "" });
+        return /* @__PURE__ */ jsx6("div", { className: "field-checkbox-display readonly", children: field.value === "true" ? "\u2713" : "" });
       }
-      return /* @__PURE__ */ jsx7("div", { className: "field-overlay-placeholder readonly", children: field.value || field.placeholder });
+      return /* @__PURE__ */ jsx6("div", { className: "field-overlay-placeholder readonly", children: field.value || field.placeholder });
     }
     if (field.type === "signature" || field.type === "initials") {
       if (field.value) {
-        return /* @__PURE__ */ jsx7("div", { className: "field-signature-filled", onClick: () => handleFieldUpdate(field.id, ""), children: /* @__PURE__ */ jsx7("img", { src: field.value, alt: field.label, className: "field-signature-preview" }) });
+        return /* @__PURE__ */ jsx6("div", { className: "field-signature-filled", onClick: () => handleFieldUpdate(field.id, ""), children: /* @__PURE__ */ jsx6("img", { src: field.value, alt: field.label, className: "field-signature-preview" }) });
       }
-      return /* @__PURE__ */ jsx7("div", { className: "field-overlay-placeholder editable", children: field.placeholder });
+      return /* @__PURE__ */ jsx6("div", { className: "field-overlay-placeholder editable", children: field.placeholder });
     }
     if (field.type === "checkbox") {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx6(
         "div",
         {
           className: "field-checkbox-display editable",
@@ -1156,9 +1366,9 @@ function SignerView({
       );
     }
     if (field.type === "signed-date") {
-      return /* @__PURE__ */ jsx7("div", { className: "field-overlay-value", children: field.value || (/* @__PURE__ */ new Date()).toLocaleDateString() });
+      return /* @__PURE__ */ jsx6("div", { className: "field-overlay-value", children: field.value || (/* @__PURE__ */ new Date()).toLocaleDateString() });
     }
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       "input",
       {
         type: field.textSubtype === "email" ? "email" : field.textSubtype === "number" ? "number" : field.textSubtype === "phone" ? "tel" : field.textSubtype === "date" ? "date" : "text",
@@ -1183,10 +1393,10 @@ function SignerView({
       }));
     }
   }, [fields.filter((f) => f.type === "signature" && f.value).length]);
-  return /* @__PURE__ */ jsxs7("div", { className: "signer-layout", ref: containerRef, children: [
-    loading && /* @__PURE__ */ jsx7("div", { className: "loading-indicator", children: "Loading document..." }),
-    /* @__PURE__ */ jsxs7("div", { className: "signer-content", children: [
-      /* @__PURE__ */ jsx7("div", { className: "signer-pdf-area", children: pages.length > 0 && /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6("div", { className: "signer-layout", ref: containerRef, children: [
+    loading && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Loading document..." }),
+    /* @__PURE__ */ jsxs6("div", { className: "signer-content", children: [
+      /* @__PURE__ */ jsx6("div", { className: "signer-pdf-area", children: pages.length > 0 && /* @__PURE__ */ jsx6(
         PdfViewer,
         {
           pages,
@@ -1198,11 +1408,11 @@ function SignerView({
           renderFieldContent
         }
       ) }),
-      /* @__PURE__ */ jsxs7("div", { className: "signer-panel", children: [
-        selectedField && isFieldEditable && /* @__PURE__ */ jsxs7("div", { className: "signer-field-input", children: [
-          /* @__PURE__ */ jsx7("h3", { children: selectedField.label }),
-          selectedField.required && /* @__PURE__ */ jsx7("span", { className: "required-badge", children: "Required" }),
-          (selectedField.type === "signature" || selectedField.type === "initials") && /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs6("div", { className: "signer-panel", children: [
+        selectedField && isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-input", children: [
+          /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
+          selectedField.required && /* @__PURE__ */ jsx6("span", { className: "required-badge", children: "Required" }),
+          (selectedField.type === "signature" || selectedField.type === "initials") && /* @__PURE__ */ jsx6(
             SignatureCanvas,
             {
               width: 280,
@@ -1211,7 +1421,7 @@ function SignerView({
               initialValue: selectedField.value
             }
           ),
-          selectedField.type === "text" && /* @__PURE__ */ jsx7(
+          selectedField.type === "text" && /* @__PURE__ */ jsx6(
             "input",
             {
               type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
@@ -1221,8 +1431,8 @@ function SignerView({
               className: "signer-text-input"
             }
           ),
-          selectedField.type === "checkbox" && /* @__PURE__ */ jsxs7("label", { className: "signer-checkbox-label", children: [
-            /* @__PURE__ */ jsx7(
+          selectedField.type === "checkbox" && /* @__PURE__ */ jsxs6("label", { className: "signer-checkbox-label", children: [
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 type: "checkbox",
@@ -1232,14 +1442,14 @@ function SignerView({
             ),
             selectedField.placeholder || "Check this box"
           ] }),
-          selectedField.type === "signed-date" && /* @__PURE__ */ jsx7("div", { className: "signer-date-display", children: selectedField.value || "Will auto-fill when you sign" })
+          selectedField.type === "signed-date" && /* @__PURE__ */ jsx6("div", { className: "signer-date-display", children: selectedField.value || "Will auto-fill when you sign" })
         ] }),
-        selectedField && !isFieldEditable && /* @__PURE__ */ jsxs7("div", { className: "signer-field-readonly", children: [
-          /* @__PURE__ */ jsx7("h3", { children: selectedField.label }),
-          /* @__PURE__ */ jsx7("p", { children: "This field belongs to another signer." })
+        selectedField && !isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-readonly", children: [
+          /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
+          /* @__PURE__ */ jsx6("p", { children: "This field belongs to another signer." })
         ] }),
-        !selectedField && editableFields.length > 0 && /* @__PURE__ */ jsx7("div", { className: "panel-empty", children: "Select a field to fill it in, or use the navigation below." }),
-        /* @__PURE__ */ jsx7(
+        !selectedField && editableFields.length > 0 && /* @__PURE__ */ jsx6("div", { className: "panel-empty", children: "Select a field to fill it in, or use the navigation below." }),
+        /* @__PURE__ */ jsx6(
           FieldNavigator,
           {
             fields: editableFields,
@@ -1249,12 +1459,87 @@ function SignerView({
             onSubmit: handleSubmit
           }
         ),
-        submitting && /* @__PURE__ */ jsx7("div", { className: "loading-indicator", children: "Generating PDF..." })
+        submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "powered-by", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "powered-by", children: [
       "Powered by ",
-      /* @__PURE__ */ jsx7("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
+      /* @__PURE__ */ jsx6("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
+    ] })
+  ] });
+}
+
+// src/components/pdf-builder/SignerRoleSelector.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function SignerRoleSelector({
+  roles,
+  activeRole,
+  onSetActiveRole,
+  onAddRole,
+  onRemoveRole
+}) {
+  const [isAdding, setIsAdding] = useState4(false);
+  const [newRoleName, setNewRoleName] = useState4("");
+  const handleAdd = () => {
+    if (newRoleName.trim()) {
+      onAddRole(newRoleName.trim());
+      setNewRoleName("");
+      setIsAdding(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "signer-role-selector", children: [
+    /* @__PURE__ */ jsx7("div", { className: "signer-role-label", children: "Signer Roles" }),
+    /* @__PURE__ */ jsxs7("div", { className: "signer-role-list", children: [
+      roles.map((role) => /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          className: `signer-role-chip ${role === activeRole ? "active" : ""}`,
+          style: {
+            borderColor: getSignerColor(role),
+            backgroundColor: role === activeRole ? getSignerColor(role) : "transparent",
+            color: role === activeRole ? "#fff" : getSignerColor(role)
+          },
+          onClick: () => onSetActiveRole(role),
+          children: [
+            role,
+            roles.length > 1 && role !== "Sender" && /* @__PURE__ */ jsx7(
+              "span",
+              {
+                className: "signer-role-remove",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemoveRole(role);
+                },
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        role
+      )),
+      isAdding ? /* @__PURE__ */ jsxs7("div", { className: "signer-role-add-input", children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "text",
+            value: newRoleName,
+            onChange: (e) => setNewRoleName(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && handleAdd(),
+            placeholder: "Role name",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx7("button", { onClick: handleAdd, children: "Add" }),
+        /* @__PURE__ */ jsx7("button", { onClick: () => setIsAdding(false), children: "Cancel" })
+      ] }) : /* @__PURE__ */ jsx7(
+        "button",
+        {
+          className: "signer-role-add-btn",
+          onClick: () => setIsAdding(true),
+          children: "+ Add Role"
+        }
+      )
     ] })
   ] });
 }
@@ -1274,6 +1559,7 @@ export {
   generateFilledPdf,
   getSignerColor,
   postPdfToCallback,
-  renderPdfPages
+  renderPdfPages,
+  uniqueLabel
 };
 //# sourceMappingURL=index.mjs.map