@signiphi/pdf-compose 0.1.0-beta.0

package/dist/index.mjs

@@ -0,0 +1,4930 @@
+import * as React12 from 'react';
+import React12__default, { createContext, useCallback, useState, useRef, useEffect, useMemo, useContext } from 'react';
+import { AlertTriangle, RefreshCw, FileText, ChevronDown, Circle, CheckSquare, Calendar, Hash, PenTool, Type, Braces, ChevronLeft, ChevronRight, ZoomOut, ZoomIn, Maximize2, Loader2, Plus, PanelLeftOpen, CheckCircle2, FileDown, PanelLeftClose, Undo, Redo, Bold, Italic, Underline as Underline$1, Code, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Minus, AlignLeft, AlignCenter, AlignRight, Trash2, X, PenLine, Upload, WrapText, Download } from 'lucide-react';
+import { ReactNodeViewRenderer, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Placeholder from '@tiptap/extension-placeholder';
+import { Node, mergeAttributes } from '@tiptap/core';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { v4 } from 'uuid';
+import { PDFDocument, StandardFonts, rgb, PDFName as PDFName$1, PDFString as PDFString$1 } from 'pdf-lib';
+import { NodeSelection } from '@tiptap/pm/state';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var FIELD_TYPE_CONFIG = {
+  text: { icon: Type, color: "bg-blue-100 text-blue-700 border-blue-300", label: "Text" },
+  signature: { icon: PenTool, color: "bg-purple-100 text-purple-700 border-purple-300", label: "Signature" },
+  initials: { icon: Hash, color: "bg-green-100 text-green-700 border-green-300", label: "Initials" },
+  date: { icon: Calendar, color: "bg-amber-100 text-amber-700 border-amber-300", label: "Date" },
+  checkbox: { icon: CheckSquare, color: "bg-teal-100 text-teal-700 border-teal-300", label: "Checkbox" },
+  radio: { icon: Circle, color: "bg-pink-100 text-pink-700 border-pink-300", label: "Radio" },
+  dropdown: { icon: ChevronDown, color: "bg-indigo-100 text-indigo-700 border-indigo-300", label: "Dropdown" },
+  text_label: { icon: FileText, color: "bg-gray-100 text-gray-700 border-gray-300", label: "Label" }
+};
+function FieldNodeView({ node, selected, getPos, editor }) {
+  const { fieldType, fieldLabel, fieldName, required } = node.attrs;
+  const config = FIELD_TYPE_CONFIG[fieldType] || FIELD_TYPE_CONFIG.text;
+  const Icon = config.icon;
+  const handleDoubleClick = useCallback((e) => {
+    const pos = typeof getPos === "function" ? getPos() : null;
+    if (pos !== null && pos !== void 0) {
+      editor.commands.setNodeSelection(pos);
+      const event = new CustomEvent("signiphi:edit-field", {
+        detail: { fieldId: node.attrs.fieldId, pos, anchorEl: e.currentTarget }
+      });
+      window.dispatchEvent(event);
+    }
+  }, [editor, getPos, node.attrs.fieldId]);
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "inline", children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 px-2 py-0.5 rounded-md border text-xs font-medium",
+        "cursor-pointer select-none align-baseline",
+        config.color,
+        selected && "ring-2 ring-primary ring-offset-1"
+      ),
+      onDoubleClick: handleDoubleClick,
+      title: `${config.label}: ${fieldLabel || fieldName}${required ? " (required)" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size: 12 }),
+        /* @__PURE__ */ jsx("span", { children: fieldLabel || fieldName }),
+        required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+      ]
+    }
+  ) });
+}
+
+// src/extensions/field-node.ts
+var FieldNode = Node.create({
+  name: "fieldNode",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      fieldId: { default: "" },
+      fieldType: { default: "text" },
+      fieldName: { default: "" },
+      fieldLabel: { default: "" },
+      required: { default: false },
+      options: { default: "" },
+      placeholder: { default: "" },
+      fontSize: { default: null },
+      defaultValue: { default: "" },
+      multiline: { default: false },
+      maxLength: { default: null },
+      acknowledgements: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-field-node]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["span", mergeAttributes({ "data-field-node": "" }, HTMLAttributes)];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(FieldNodeView);
+  },
+  addCommands() {
+    return {
+      insertField: (attrs) => ({ chain }) => {
+        return chain().insertContent({
+          type: this.name,
+          attrs
+        }).run();
+      },
+      updateField: (fieldId, attrs) => ({ tr, state, dispatch }) => {
+        let found = false;
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === this.name && node.attrs.fieldId === fieldId) {
+            if (dispatch) {
+              tr.setNodeMarkup(pos, void 0, { ...node.attrs, ...attrs });
+            }
+            found = true;
+            return false;
+          }
+        });
+        return found;
+      },
+      removeField: (fieldId) => ({ tr, state, dispatch }) => {
+        let found = false;
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === this.name && node.attrs.fieldId === fieldId) {
+            if (dispatch) {
+              tr.delete(pos, pos + node.nodeSize);
+            }
+            found = true;
+            return false;
+          }
+        });
+        return found;
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: ({ editor }) => {
+        const { state } = editor;
+        const { $from } = state.selection;
+        if (state.selection.empty && $from.nodeBefore?.type.name === this.name) {
+          return editor.commands.deleteRange({
+            from: $from.pos - $from.nodeBefore.nodeSize,
+            to: $from.pos
+          });
+        }
+        return false;
+      }
+    };
+  }
+});
+function VariableNodeView({ node, selected, getPos, editor }) {
+  const { varName, varLabel, varDefault } = node.attrs;
+  const marks = node.marks || [];
+  const isBold = marks.some((m) => m.type.name === "bold");
+  const isItalic = marks.some((m) => m.type.name === "italic");
+  const isUnderline = marks.some((m) => m.type.name === "underline");
+  const handleDoubleClick = useCallback((e) => {
+    const pos = typeof getPos === "function" ? getPos() : null;
+    if (pos !== null && pos !== void 0) {
+      editor.commands.setNodeSelection(pos);
+      const event = new CustomEvent("signiphi:edit-variable", {
+        detail: { varName, pos, anchorEl: e.currentTarget }
+      });
+      window.dispatchEvent(event);
+    }
+  }, [editor, getPos, varName]);
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "inline", children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-variable-node": "",
+      "data-var-name": varName,
+      className: cn(
+        "inline-flex items-center gap-1 px-2 py-0.5 rounded-md border text-xs font-medium",
+        "cursor-pointer select-none align-baseline",
+        "bg-orange-100 text-orange-700 border-orange-300",
+        selected && "ring-2 ring-primary ring-offset-1"
+      ),
+      onDoubleClick: handleDoubleClick,
+      title: `Variable: ${varLabel || varName}${varDefault ? ` (default: ${varDefault})` : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(Braces, { size: 12 }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              isBold && "font-bold",
+              isItalic && "italic",
+              isUnderline && "underline"
+            ),
+            children: varLabel || varName
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/extensions/variable-node.ts
+var VariableNode = Node.create({
+  name: "variableNode",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      varName: { default: "" },
+      varLabel: { default: "" },
+      varDefault: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-variable-node]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["span", mergeAttributes({ "data-variable-node": "" }, HTMLAttributes)];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(VariableNodeView);
+  },
+  addCommands() {
+    return {
+      insertVariable: (attrs) => ({ chain }) => {
+        return chain().insertContent({ type: this.name, attrs }).run();
+      },
+      updateVariable: (varName, attrs) => ({ tr, state, dispatch }) => {
+        let found = false;
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === this.name && node.attrs.varName === varName) {
+            if (dispatch) {
+              tr.setNodeMarkup(pos, void 0, { ...node.attrs, ...attrs });
+            }
+            found = true;
+          }
+        });
+        return found;
+      },
+      removeVariable: (varName) => ({ tr, state, dispatch }) => {
+        const positions = [];
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === this.name && node.attrs.varName === varName) {
+            positions.push(pos);
+          }
+        });
+        if (positions.length === 0) return false;
+        if (dispatch) {
+          for (let i = positions.length - 1; i >= 0; i--) {
+            const pos = positions[i];
+            const node = state.doc.nodeAt(pos);
+            if (node) {
+              tr.delete(pos, pos + node.nodeSize);
+            }
+          }
+        }
+        return true;
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: ({ editor }) => {
+        const { state } = editor;
+        const { $from } = state.selection;
+        if (state.selection.empty && $from.nodeBefore?.type.name === this.name) {
+          return editor.commands.deleteRange({
+            from: $from.pos - $from.nodeBefore.nodeSize,
+            to: $from.pos
+          });
+        }
+        return false;
+      }
+    };
+  }
+});
+
+// src/types/index.ts
+var FormFieldType = /* @__PURE__ */ ((FormFieldType2) => {
+  FormFieldType2["TEXT"] = "text";
+  FormFieldType2["SIGNATURE"] = "signature";
+  FormFieldType2["INITIALS"] = "initials";
+  FormFieldType2["DATE"] = "date";
+  FormFieldType2["CHECKBOX"] = "checkbox";
+  FormFieldType2["RADIO"] = "radio";
+  FormFieldType2["DROPDOWN"] = "dropdown";
+  FormFieldType2["TEXT_LABEL"] = "text_label";
+  return FormFieldType2;
+})(FormFieldType || {});
+function generateFieldName(type) {
+  return `${type}_${Date.now()}`;
+}
+function createFieldAttrs(type, overrides) {
+  const name = overrides?.fieldName || generateFieldName(type);
+  let defaultOptions = "";
+  let defaultFontSize = null;
+  let defaultMultiline = false;
+  let defaultDefaultValue = "";
+  if (type === "radio" /* RADIO */ || type === "dropdown" /* DROPDOWN */) {
+    defaultOptions = "Option A,Option B,Option C";
+  }
+  if (type === "text" /* TEXT */ || type === "text_label" /* TEXT_LABEL */) {
+    defaultFontSize = 12;
+  }
+  if (type === "text" /* TEXT */) {
+    defaultMultiline = false;
+  }
+  if (type === "text_label" /* TEXT_LABEL */) {
+    defaultDefaultValue = "Text Label";
+  }
+  return {
+    fieldId: v4(),
+    fieldType: type,
+    fieldName: name,
+    fieldLabel: overrides?.fieldLabel || "",
+    required: overrides?.required ?? false,
+    options: overrides?.options || defaultOptions,
+    placeholder: overrides?.placeholder || "",
+    fontSize: overrides?.fontSize ?? defaultFontSize,
+    defaultValue: overrides?.defaultValue || defaultDefaultValue,
+    multiline: overrides?.multiline ?? defaultMultiline,
+    maxLength: overrides?.maxLength ?? null,
+    acknowledgements: overrides?.acknowledgements ?? "",
+    ...overrides
+  };
+}
+function extractFieldsFromContent(content) {
+  const fields = [];
+  function walk(node) {
+    if (node.type === "fieldNode" && node.attrs) {
+      fields.push({
+        fieldId: node.attrs.fieldId,
+        type: node.attrs.fieldType,
+        name: node.attrs.fieldName,
+        label: node.attrs.fieldLabel,
+        required: node.attrs.required ?? false,
+        options: node.attrs.options ? node.attrs.options.split(",").map((s) => s.trim()).filter(Boolean) : void 0,
+        placeholder: node.attrs.placeholder || void 0,
+        fontSize: node.attrs.fontSize || void 0,
+        defaultValue: node.attrs.defaultValue || void 0,
+        multiline: node.attrs.multiline || void 0,
+        maxLength: node.attrs.maxLength || void 0,
+        acknowledgements: node.attrs.acknowledgements ? JSON.parse(node.attrs.acknowledgements) : void 0
+      });
+    }
+    if (node.content) {
+      node.content.forEach(walk);
+    }
+  }
+  if (content.content) {
+    content.content.forEach(walk);
+  }
+  return fields;
+}
+
+// src/utils/variable-helpers.ts
+function extractVariablesFromContent(content) {
+  const seen = /* @__PURE__ */ new Map();
+  function walk(node) {
+    if (node.type === "variableNode" && node.attrs) {
+      const varName = node.attrs.varName;
+      if (varName && !seen.has(varName)) {
+        seen.set(varName, {
+          varName,
+          varLabel: node.attrs.varLabel || varName,
+          varDefault: node.attrs.varDefault || ""
+        });
+      }
+    }
+    if (node.content) {
+      node.content.forEach(walk);
+    }
+  }
+  if (content.content) {
+    content.content.forEach(walk);
+  }
+  return Array.from(seen.values());
+}
+function replaceVariablesInContent(content, values) {
+  function walkNode(node) {
+    if (node.type === "variableNode" && node.attrs) {
+      const varName = node.attrs.varName;
+      const replacement = values[varName] || node.attrs.varDefault || `[${node.attrs.varLabel || varName}]`;
+      const textNode = { type: "text", text: replacement };
+      if (node.marks && node.marks.length > 0) {
+        textNode.marks = node.marks;
+      }
+      return textNode;
+    }
+    if (node.content) {
+      return { ...node, content: node.content.map(walkNode) };
+    }
+    return node;
+  }
+  return walkNode(content);
+}
+
+// src/utils/markdown-writer.ts
+function serializeFieldToken(attrs) {
+  const parts = ["field"];
+  if (attrs.fieldType) parts.push(`type:${attrs.fieldType}`);
+  if (attrs.fieldName) parts.push(`name:${attrs.fieldName}`);
+  if (attrs.fieldLabel) parts.push(`label:${attrs.fieldLabel}`);
+  if (attrs.fieldId) parts.push(`id:${attrs.fieldId}`);
+  if (attrs.required) parts.push(`required:true`);
+  if (attrs.options) parts.push(`options:${attrs.options}`);
+  if (attrs.fontSize) parts.push(`fontSize:${attrs.fontSize}`);
+  if (attrs.placeholder) parts.push(`placeholder:${attrs.placeholder}`);
+  if (attrs.defaultValue) parts.push(`defaultValue:${attrs.defaultValue}`);
+  if (attrs.multiline) parts.push(`multiline:true`);
+  if (attrs.maxLength) parts.push(`maxLength:${attrs.maxLength}`);
+  if (attrs.acknowledgements) parts.push(`acks:${btoa(attrs.acknowledgements)}`);
+  return `{{${parts.join("|")}}}`;
+}
+function serializeVariableToken(attrs) {
+  const parts = ["var"];
+  if (attrs.varName) parts.push(`name:${attrs.varName}`);
+  if (attrs.varLabel) parts.push(`label:${attrs.varLabel}`);
+  if (attrs.varDefault) parts.push(`default:${attrs.varDefault}`);
+  return `{{${parts.join("|")}}}`;
+}
+function serializeInline(content) {
+  if (!content) return "";
+  let result = "";
+  for (const node of content) {
+    if (node.type === "fieldNode") {
+      result += serializeFieldToken(node.attrs || {});
+      continue;
+    }
+    if (node.type === "variableNode") {
+      let token = serializeVariableToken(node.attrs || {});
+      const varMarks = node.marks || [];
+      const isBold = varMarks.some((m) => m.type === "bold");
+      const isItalic = varMarks.some((m) => m.type === "italic");
+      const isUnderline = varMarks.some((m) => m.type === "underline");
+      if (isBold && isItalic) token = `***${token}***`;
+      else if (isBold) token = `**${token}**`;
+      else if (isItalic) token = `*${token}*`;
+      if (isUnderline) token = `__${token}__`;
+      result += token;
+      continue;
+    }
+    if (node.type === "text") {
+      let text = node.text || "";
+      const marks = node.marks || [];
+      for (const mark of marks) {
+        if (mark.type === "bold") text = `**${text}**`;
+        else if (mark.type === "italic") text = `*${text}*`;
+        else if (mark.type === "underline") text = `__${text}__`;
+        else if (mark.type === "code") text = `\`${text}\``;
+      }
+      result += text;
+    }
+    if (node.type === "hardBreak") {
+      result += "  \n";
+    }
+  }
+  return result;
+}
+function serializeBlock(node) {
+  switch (node.type) {
+    case "heading": {
+      const level = node.attrs?.level || 1;
+      const prefix = "#".repeat(level);
+      return `${prefix} ${serializeInline(node.content)}`;
+    }
+    case "paragraph": {
+      const inline = serializeInline(node.content);
+      return inline;
+    }
+    case "bulletList": {
+      return (node.content || []).map((item) => {
+        const inner = (item.content || []).map(serializeBlock).join("\n");
+        return `- ${inner}`;
+      }).join("\n");
+    }
+    case "orderedList": {
+      return (node.content || []).map((item, i) => {
+        const inner = (item.content || []).map(serializeBlock).join("\n");
+        return `${i + 1}. ${inner}`;
+      }).join("\n");
+    }
+    case "listItem": {
+      return (node.content || []).map(serializeBlock).join("\n");
+    }
+    case "blockquote": {
+      return (node.content || []).map(serializeBlock).map((line) => `> ${line}`).join("\n");
+    }
+    case "codeBlock": {
+      const text = serializeInline(node.content);
+      return `\`\`\`
+${text}
+\`\`\``;
+    }
+    case "horizontalRule": {
+      return "---";
+    }
+    default:
+      return serializeInline(node.content);
+  }
+}
+function tiptapToMarkdown(doc) {
+  if (!doc.content) return "";
+  return doc.content.map(serializeBlock).join("\n\n");
+}
+var TOKEN_REGEX = /\{\{(field|var)\|([^}]+)\}\}/g;
+function injectMarks(token, marks) {
+  const existingMatch = token.match(/\|_marks:([^}|]+)/);
+  if (existingMatch) {
+    const existing = existingMatch[1].split(",");
+    const merged = [.../* @__PURE__ */ new Set([...existing, ...marks])];
+    return token.replace(/\|_marks:[^}|]+/, `|_marks:${merged.join(",")}`);
+  }
+  return token.replace(/\}\}$/, `|_marks:${marks.join(",")}}}`);
+}
+function preprocessMarkedTokens(text) {
+  const tk = `\\{\\{(?:var|field)\\|[^}]+\\}\\}`;
+  text = text.replace(new RegExp(`__(\\*\\*\\*(${tk})\\*\\*\\*)__`, "g"), (_, _inner, token) => `__${injectMarks(token, ["bold", "italic"])}__`);
+  text = text.replace(new RegExp(`__(\\*\\*(${tk})\\*\\*)__`, "g"), (_, _inner, token) => `__${injectMarks(token, ["bold"])}__`);
+  text = text.replace(new RegExp(`__(\\*(${tk})\\*)__`, "g"), (_, _inner, token) => `__${injectMarks(token, ["italic"])}__`);
+  text = text.replace(new RegExp(`__(${tk})__`, "g"), (_, token) => injectMarks(token, ["underline"]));
+  text = text.replace(new RegExp(`\\*\\*\\*(${tk})\\*\\*\\*`, "g"), (_, token) => injectMarks(token, ["bold", "italic"]));
+  text = text.replace(new RegExp(`\\*\\*(${tk})\\*\\*`, "g"), (_, token) => injectMarks(token, ["bold"]));
+  text = text.replace(new RegExp(`(?<!\\*)\\*(${tk})\\*(?!\\*)`, "g"), (_, token) => injectMarks(token, ["italic"]));
+  return text;
+}
+function extractAndRemoveMarks(attrs) {
+  const marksStr = attrs._marks;
+  delete attrs._marks;
+  if (!marksStr) return [];
+  return marksStr.split(",").map((m) => ({ type: m.trim() }));
+}
+function parseFieldToken(tokenBody) {
+  const attrs = {
+    fieldId: "",
+    fieldType: "text",
+    fieldName: "",
+    fieldLabel: "",
+    required: false,
+    options: "",
+    placeholder: "",
+    fontSize: null,
+    defaultValue: "",
+    multiline: false,
+    maxLength: null,
+    acknowledgements: ""
+  };
+  const pairs = tokenBody.split("|");
+  for (const pair of pairs) {
+    const colonIdx = pair.indexOf(":");
+    if (colonIdx === -1) continue;
+    const key = pair.slice(0, colonIdx).trim();
+    const value = pair.slice(colonIdx + 1).trim();
+    switch (key) {
+      case "type":
+        attrs.fieldType = value;
+        break;
+      case "name":
+        attrs.fieldName = value;
+        break;
+      case "label":
+        attrs.fieldLabel = value;
+        break;
+      case "id":
+        attrs.fieldId = value;
+        break;
+      case "required":
+        attrs.required = value === "true";
+        break;
+      case "options":
+        attrs.options = value;
+        break;
+      case "fontSize":
+        attrs.fontSize = parseInt(value, 10) || null;
+        break;
+      case "placeholder":
+        attrs.placeholder = value;
+        break;
+      case "defaultValue":
+        attrs.defaultValue = value;
+        break;
+      case "multiline":
+        attrs.multiline = value === "true";
+        break;
+      case "maxLength":
+        attrs.maxLength = parseInt(value, 10) || null;
+        break;
+      case "acks":
+        attrs.acknowledgements = atob(value);
+        break;
+      case "_marks":
+        attrs._marks = value;
+        break;
+    }
+  }
+  if (!attrs.fieldId) {
+    attrs.fieldId = v4();
+  }
+  return attrs;
+}
+function parseVariableToken(tokenBody) {
+  const attrs = {
+    varName: "",
+    varLabel: "",
+    varDefault: ""
+  };
+  const pairs = tokenBody.split("|");
+  for (const pair of pairs) {
+    const colonIdx = pair.indexOf(":");
+    if (colonIdx === -1) continue;
+    const key = pair.slice(0, colonIdx).trim();
+    const value = pair.slice(colonIdx + 1).trim();
+    switch (key) {
+      case "name":
+        attrs.varName = value;
+        break;
+      case "label":
+        attrs.varLabel = value;
+        break;
+      case "default":
+        attrs.varDefault = value;
+        break;
+      case "_marks":
+        attrs._marks = value;
+        break;
+    }
+  }
+  return attrs;
+}
+function parseInline(text) {
+  text = preprocessMarkedTokens(text);
+  const nodes = [];
+  let lastIndex = 0;
+  TOKEN_REGEX.lastIndex = 0;
+  let match;
+  while ((match = TOKEN_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      const beforeText = text.slice(lastIndex, match.index);
+      nodes.push(...parseFormattedText(beforeText));
+    }
+    if (match[1] === "field") {
+      const attrs = parseFieldToken(match[2]);
+      const marks = extractAndRemoveMarks(attrs);
+      const node = { type: "fieldNode", attrs };
+      if (marks.length > 0) node.marks = marks;
+      nodes.push(node);
+    } else if (match[1] === "var") {
+      const attrs = parseVariableToken(match[2]);
+      const marks = extractAndRemoveMarks(attrs);
+      const node = { type: "variableNode", attrs };
+      if (marks.length > 0) node.marks = marks;
+      nodes.push(node);
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    nodes.push(...parseFormattedText(text.slice(lastIndex)));
+  }
+  return nodes;
+}
+function parseFormattedText(text) {
+  if (!text) return [];
+  const nodes = [];
+  const parts = text.split(/(\*\*[^*]+\*\*|\*[^*]+\*|__[^_]+__|`[^`]+`)/);
+  for (const part of parts) {
+    if (!part) continue;
+    if (part.startsWith("**") && part.endsWith("**")) {
+      nodes.push({
+        type: "text",
+        text: part.slice(2, -2),
+        marks: [{ type: "bold" }]
+      });
+    } else if (part.startsWith("*") && part.endsWith("*")) {
+      nodes.push({
+        type: "text",
+        text: part.slice(1, -1),
+        marks: [{ type: "italic" }]
+      });
+    } else if (part.startsWith("__") && part.endsWith("__")) {
+      nodes.push({
+        type: "text",
+        text: part.slice(2, -2),
+        marks: [{ type: "underline" }]
+      });
+    } else if (part.startsWith("`") && part.endsWith("`")) {
+      nodes.push({
+        type: "text",
+        text: part.slice(1, -1),
+        marks: [{ type: "code" }]
+      });
+    } else {
+      nodes.push({ type: "text", text: part });
+    }
+  }
+  return nodes;
+}
+function markdownToTiptap(markdown) {
+  const lines = markdown.split("\n");
+  const content = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+    if (/^---+$/.test(line.trim())) {
+      content.push({ type: "horizontalRule" });
+      i++;
+      continue;
+    }
+    const headingMatch = line.match(/^(#{1,3})\s+(.+)/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      const text = headingMatch[2];
+      content.push({
+        type: "heading",
+        attrs: { level },
+        content: parseInline(text)
+      });
+      i++;
+      continue;
+    }
+    if (/^\s*[-*]\s+/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) {
+        const itemText = lines[i].replace(/^\s*[-*]\s+/, "");
+        items.push({
+          type: "listItem",
+          content: [{ type: "paragraph", content: parseInline(itemText) }]
+        });
+        i++;
+      }
+      content.push({ type: "bulletList", content: items });
+      continue;
+    }
+    if (/^\s*\d+\.\s+/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) {
+        const itemText = lines[i].replace(/^\s*\d+\.\s+/, "");
+        items.push({
+          type: "listItem",
+          content: [{ type: "paragraph", content: parseInline(itemText) }]
+        });
+        i++;
+      }
+      content.push({ type: "orderedList", content: items });
+      continue;
+    }
+    if (line.startsWith("> ")) {
+      const quoteLines = [];
+      while (i < lines.length && lines[i].startsWith("> ")) {
+        quoteLines.push(lines[i].slice(2));
+        i++;
+      }
+      content.push({
+        type: "blockquote",
+        content: [{ type: "paragraph", content: parseInline(quoteLines.join("\n")) }]
+      });
+      continue;
+    }
+    if (line.startsWith("```")) {
+      i++;
+      const codeLines = [];
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      if (i < lines.length) i++;
+      content.push({
+        type: "codeBlock",
+        content: [{ type: "text", text: codeLines.join("\n") }]
+      });
+      continue;
+    }
+    content.push({
+      type: "paragraph",
+      content: parseInline(line)
+    });
+    i++;
+  }
+  return { type: "doc", content };
+}
+
+// src/utils/error-helpers.ts
+function getErrorMessage(error) {
+  if (error instanceof Error) return error.message;
+  if (typeof error === "string") return error;
+  try {
+    return JSON.stringify(error);
+  } catch {
+    return String(error);
+  }
+}
+function formatError(context, error) {
+  const message = getErrorMessage(error);
+  return `${context}: ${message}`;
+}
+var CONTEXT_CHARS = 25;
+function extractPosition(error, inputLength) {
+  const msg = error.message;
+  const v8 = /position\s+(\d+)/i.exec(msg);
+  if (v8) return Number(v8[1]);
+  if (/unexpected end/i.test(msg) || /unterminated/i.test(msg)) {
+    return inputLength > 0 ? inputLength - 1 : 0;
+  }
+  return null;
+}
+function stripNativePosition(msg) {
+  const v8Stripped = msg.replace(/\s+in JSON at position\s+\d+(\s*\(line\s+\d+\s+column\s+\d+\))?/i, "");
+  if (v8Stripped !== msg) return v8Stripped;
+  const ffStripped = msg.replace(/\s+at line\s+\d+\s+column\s+\d+\s+of the JSON data/i, "");
+  if (ffStripped !== msg) return ffStripped;
+  return msg;
+}
+function posToLineCol(text, pos) {
+  let line = 1;
+  let lastNewline = -1;
+  for (let i = 0; i < pos && i < text.length; i++) {
+    if (text[i] === "\n") {
+      line++;
+      lastNewline = i;
+    }
+  }
+  return { line, col: pos - lastNewline };
+}
+function extractLineCol(error) {
+  const ff = /line\s+(\d+)\s+column\s+(\d+)/i.exec(error.message);
+  if (ff) return { line: Number(ff[1]), col: Number(ff[2]) };
+  return null;
+}
+function buildContextSnippet(text, pos) {
+  const start = Math.max(0, pos - CONTEXT_CHARS);
+  const end = Math.min(text.length, pos + CONTEXT_CHARS);
+  const prefix = start > 0 ? "..." : "";
+  const suffix = end < text.length ? "..." : "";
+  return `${prefix}${text.slice(start, end)}${suffix}`;
+}
+function parseJsonWithDetails(input) {
+  try {
+    const data = JSON.parse(input);
+    return { valid: true, data };
+  } catch (err) {
+    if (!(err instanceof SyntaxError)) {
+      return { valid: false, message: getErrorMessage(err), line: 0, col: 0 };
+    }
+    const pos = extractPosition(err, input.length);
+    let lc = extractLineCol(err);
+    if (!lc && pos !== null) {
+      lc = posToLineCol(input, pos);
+    }
+    const line = lc?.line ?? 0;
+    const col = lc?.col ?? 0;
+    let message = stripNativePosition(err.message);
+    if (line > 0) {
+      message += ` (line ${line}, col ${col})`;
+    }
+    if (pos !== null) {
+      const snippet = buildContextSnippet(input, pos);
+      message += `
+near: ${snippet}`;
+    }
+    return { valid: false, message, line, col };
+  }
+}
+
+// src/utils/pdf-metadata.ts
+var PDFName;
+var PDFString;
+function initPdfMetadata(pdfLibModule) {
+  PDFName = pdfLibModule.PDFName;
+  PDFString = pdfLibModule.PDFString;
+}
+function setSigniphiMetadata(pdfDoc, metadata) {
+  if (!PDFName || !PDFString) {
+    throw new Error("PDF metadata classes not initialized \u2014 call initPdfMetadata before setSigniphiMetadata");
+  }
+  try {
+    const infoRef = pdfDoc.context.trailerInfo.Info;
+    const infoObj = pdfDoc.context.lookup(infoRef);
+    if (!infoObj || typeof infoObj.set !== "function") {
+      throw new Error("Cannot access PDF document info dictionary for metadata storage");
+    }
+    const infoDict = infoObj;
+    const metadataString = JSON.stringify(metadata);
+    infoDict.set(PDFName.of("SigniphiMetadata"), PDFString.of(metadataString));
+  } catch (error) {
+    throw new Error(`Failed to embed document metadata: ${getErrorMessage(error)}`);
+  }
+}
+function buildMetadataObject(fields, actualFieldNames) {
+  const metadata = {
+    version: "1.0",
+    fields: {},
+    fieldIdIndex: {}
+  };
+  fields.forEach((field) => {
+    const hasMetadata = field.fieldId || field.label || field.placeholder || field.acknowledgements?.length || field.required !== void 0 || field.options?.length;
+    if (hasMetadata) {
+      const actualFieldName = actualFieldNames?.get(field.name) || field.name;
+      metadata.fields[actualFieldName] = {
+        fieldId: field.fieldId,
+        label: field.label,
+        placeholder: field.placeholder,
+        acknowledgements: field.acknowledgements,
+        required: field.required,
+        options: field.options
+      };
+      if (field.fieldId) {
+        metadata.fieldIdIndex[field.fieldId] = actualFieldName;
+      }
+    }
+  });
+  return metadata;
+}
+
+// src/utils/pdf-generator.ts
+var PAGE_WIDTH = 595.28;
+var PAGE_HEIGHT = 841.89;
+var MARGIN = 72;
+var CONTENT_WIDTH = PAGE_WIDTH - 2 * MARGIN;
+var CONTENT_HEIGHT = PAGE_HEIGHT - 2 * MARGIN;
+var LINE_HEIGHT_FACTOR = 1.4;
+var FIELD_DISPLAY = {
+  ["text" /* TEXT */]: { label: "Text", width: 120, height: 30 },
+  ["signature" /* SIGNATURE */]: { label: "Signature", width: 200, height: 60 },
+  ["initials" /* INITIALS */]: { label: "Initials", width: 120, height: 30 },
+  ["date" /* DATE */]: { label: "Date", width: 100, height: 30 },
+  ["checkbox" /* CHECKBOX */]: { label: "Checkbox", width: 20, height: 20 },
+  ["radio" /* RADIO */]: { label: "Radio", width: 100, height: 88 },
+  ["dropdown" /* DROPDOWN */]: { label: "Dropdown", width: 120, height: 30 },
+  ["text_label" /* TEXT_LABEL */]: { label: "Label", width: 150, height: 25 }
+};
+var INLINE_FIELD_TYPES = /* @__PURE__ */ new Set([
+  "text" /* TEXT */,
+  "date" /* DATE */,
+  "dropdown" /* DROPDOWN */,
+  "text_label" /* TEXT_LABEL */
+]);
+function getFieldDimensions(fieldType, attrs, font, fontSize) {
+  if (!INLINE_FIELD_TYPES.has(fieldType)) {
+    const display = FIELD_DISPLAY[fieldType] || FIELD_DISPLAY["text" /* TEXT */];
+    return { width: display.width, height: display.height };
+  }
+  const label = attrs?.fieldLabel || attrs?.fieldName || fieldType;
+  const textLineHeight = fontSize * LINE_HEIGHT_FACTOR;
+  const labelText = `[ ${label} ]`;
+  const textWidth = font.widthOfTextAtSize(labelText, fontSize);
+  const padding = 12;
+  const width = Math.max(textWidth + padding, 60);
+  const height = textLineHeight + 4;
+  return { width, height };
+}
+function ensureSpace(state, neededHeight) {
+  if (state.y + neededHeight > CONTENT_HEIGHT) {
+    const newPage = state.pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);
+    state.currentPage = newPage;
+    state.pageIndex++;
+    state.y = 0;
+  }
+}
+function drawText(state, text, font, fontSize, indent = 0) {
+  const lineHeight = fontSize * LINE_HEIGHT_FACTOR;
+  const maxWidth = CONTENT_WIDTH - indent;
+  const words = text.split(/\s+/);
+  let line = "";
+  let totalAdvance = 0;
+  for (const word of words) {
+    const testLine = line ? `${line} ${word}` : word;
+    const testWidth = font.widthOfTextAtSize(testLine, fontSize);
+    if (testWidth > maxWidth && line) {
+      ensureSpace(state, lineHeight);
+      const pdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
+      state.currentPage.drawText(line, {
+        x: MARGIN + indent,
+        y: pdfY,
+        size: fontSize,
+        font,
+        color: rgb(0, 0, 0)
+      });
+      state.y += lineHeight;
+      totalAdvance += lineHeight;
+      line = word;
+    } else {
+      line = testLine;
+    }
+  }
+  if (line) {
+    ensureSpace(state, lineHeight);
+    const pdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
+    state.currentPage.drawText(line, {
+      x: MARGIN + indent,
+      y: pdfY,
+      size: fontSize,
+      font,
+      color: rgb(0, 0, 0)
+    });
+    state.y += lineHeight;
+    totalAdvance += lineHeight;
+  }
+  return totalAdvance;
+}
+function collectInlineSegments(content, fonts, fontSize) {
+  const segments = [];
+  for (const node of content) {
+    if (node.type === "fieldNode") {
+      const fieldType = node.attrs?.fieldType || "text";
+      const { width, height } = getFieldDimensions(fieldType, node.attrs, fonts.italic, fontSize);
+      segments.push({ kind: "field", attrs: node.attrs || {}, width, height });
+    } else if (node.type === "text") {
+      const text = node.text || "";
+      const marks = node.marks || [];
+      const isBold = marks.some((m) => m.type === "bold");
+      const isItalic = marks.some((m) => m.type === "italic");
+      let font = fonts.regular;
+      if (isBold && isItalic) font = fonts.boldItalic;
+      else if (isBold) font = fonts.bold;
+      else if (isItalic) font = fonts.italic;
+      segments.push({ kind: "text", text, font, fontSize });
+    } else if (node.type === "variableNode") {
+      const label = node.attrs?.varLabel || node.attrs?.varName || "Variable";
+      const varMarks = node.marks || [];
+      const varIsBold = varMarks.some((m) => m.type === "bold");
+      const varIsItalic = varMarks.some((m) => m.type === "italic");
+      let varFont = fonts.regular;
+      if (varIsBold && varIsItalic) varFont = fonts.boldItalic;
+      else if (varIsBold) varFont = fonts.bold;
+      else if (varIsItalic) varFont = fonts.italic;
+      segments.push({ kind: "text", text: `[${label}]`, font: varFont, fontSize });
+    } else if (node.type === "hardBreak") {
+      segments.push({ kind: "break" });
+    }
+  }
+  return segments;
+}
+function layoutInlineSegments(state, segments, fontSize, indent = 0) {
+  const textLineHeight = fontSize * LINE_HEIGHT_FACTOR;
+  const maxX = MARGIN + CONTENT_WIDTH;
+  const startX = MARGIN + indent;
+  let currentX = startX;
+  let currentLineHeight = 0;
+  let lineHasContent = false;
+  function flushLine() {
+    if (lineHasContent) {
+      state.y += currentLineHeight;
+    }
+    currentX = startX;
+    currentLineHeight = 0;
+    lineHasContent = false;
+  }
+  for (const seg of segments) {
+    if (seg.kind === "break") {
+      if (!lineHasContent) {
+        currentLineHeight = textLineHeight;
+        lineHasContent = true;
+      }
+      flushLine();
+      continue;
+    }
+    if (seg.kind === "field") {
+      const fieldGap = 4;
+      const totalFieldWidth = seg.width + fieldGap;
+      if (lineHasContent && currentX + seg.width > maxX) {
+        flushLine();
+      }
+      ensureSpace(state, Math.max(seg.height, textLineHeight));
+      const fieldX = currentX;
+      const pdfY = PAGE_HEIGHT - MARGIN - state.y - seg.height;
+      if (state.drawFieldPlaceholders) {
+        const fieldType = seg.attrs.fieldType || "text";
+        const fieldLabel = seg.attrs.fieldLabel || seg.attrs.fieldName || fieldType;
+        const isInline = INLINE_FIELD_TYPES.has(fieldType);
+        state.currentPage.drawRectangle({
+          x: fieldX,
+          y: pdfY,
+          width: seg.width,
+          height: seg.height,
+          borderColor: rgb(0.5, 0.5, 0.7),
+          borderWidth: isInline ? 0.5 : 1,
+          color: rgb(0.95, 0.95, 1),
+          borderDashArray: [4, 2]
+        });
+        const display = FIELD_DISPLAY[fieldType] || FIELD_DISPLAY["text" /* TEXT */];
+        const labelFontSize = isInline ? fontSize - 2 : 8;
+        const labelText = isInline ? `[ ${fieldLabel} ]` : `[ ${display.label}: ${fieldLabel} ]`;
+        const labelPadding = isInline ? 6 : 4;
+        state.currentPage.drawText(labelText, {
+          x: fieldX + labelPadding,
+          y: pdfY + seg.height / 2 - labelFontSize / 2,
+          size: labelFontSize,
+          font: state.fonts.italic,
+          color: rgb(0.4, 0.4, 0.6),
+          maxWidth: seg.width - labelPadding * 2
+        });
+      }
+      const fieldId = seg.attrs.fieldId;
+      if (fieldId) {
+        state.fieldPositions.set(fieldId, {
+          x: fieldX,
+          y: pdfY,
+          width: seg.width,
+          height: seg.height,
+          page: state.pageIndex + 1
+        });
+      }
+      currentX += totalFieldWidth;
+      currentLineHeight = Math.max(currentLineHeight, seg.height + 4);
+      lineHasContent = true;
+      continue;
+    }
+    if (seg.kind === "text") {
+      const { text, font } = seg;
+      const spaceWidth = font.widthOfTextAtSize(" ", fontSize);
+      const words = text.split(/(\s+)/);
+      for (const token of words) {
+        if (!token) continue;
+        if (/^\s+$/.test(token)) {
+          if (lineHasContent) {
+            currentX += spaceWidth;
+          }
+          continue;
+        }
+        const wordWidth = font.widthOfTextAtSize(token, fontSize);
+        if (lineHasContent && currentX + wordWidth > maxX) {
+          flushLine();
+        }
+        ensureSpace(state, textLineHeight);
+        const pdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
+        state.currentPage.drawText(token, {
+          x: currentX,
+          y: pdfY,
+          size: fontSize,
+          font,
+          color: rgb(0, 0, 0)
+        });
+        currentX += wordWidth;
+        currentLineHeight = Math.max(currentLineHeight, textLineHeight);
+        lineHasContent = true;
+      }
+    }
+  }
+  flushLine();
+}
+function processInlineContent(state, content, fontSize, indent = 0) {
+  if (!content) return;
+  const segments = collectInlineSegments(content, state.fonts, fontSize);
+  if (segments.length === 0) return;
+  layoutInlineSegments(state, segments, fontSize, indent);
+}
+function processBlock(state, node) {
+  switch (node.type) {
+    case "heading": {
+      const level = node.attrs?.level || 1;
+      const fontSizes = { 1: 24, 2: 20, 3: 16 };
+      const fontSize = fontSizes[level] || 16;
+      const spacing = fontSize * 0.6;
+      ensureSpace(state, fontSize * LINE_HEIGHT_FACTOR + spacing);
+      state.y += spacing / 2;
+      if (!node.content) break;
+      const headingFonts = {
+        regular: state.fonts.bold,
+        bold: state.fonts.bold,
+        italic: state.fonts.boldItalic,
+        boldItalic: state.fonts.boldItalic
+      };
+      const segments = collectInlineSegments(node.content, headingFonts, fontSize);
+      layoutInlineSegments(state, segments, fontSize);
+      state.y += spacing / 2;
+      break;
+    }
+    case "paragraph": {
+      const fontSize = 12;
+      if (!node.content || node.content.length === 0) {
+        state.y += fontSize * LINE_HEIGHT_FACTOR;
+        break;
+      }
+      processInlineContent(state, node.content, fontSize);
+      state.y += 4;
+      break;
+    }
+    case "bulletList": {
+      for (const item of node.content || []) {
+        for (const child of item.content || []) {
+          const fontSize = 12;
+          ensureSpace(state, fontSize * LINE_HEIGHT_FACTOR);
+          const bulletPdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
+          state.currentPage.drawText("\u2022", {
+            x: MARGIN + 8,
+            y: bulletPdfY,
+            size: fontSize,
+            font: state.fonts.regular,
+            color: rgb(0, 0, 0)
+          });
+          processInlineContent(state, child.content, fontSize, 24);
+        }
+      }
+      state.y += 4;
+      break;
+    }
+    case "orderedList": {
+      let num = 1;
+      for (const item of node.content || []) {
+        for (const child of item.content || []) {
+          const fontSize = 12;
+          ensureSpace(state, fontSize * LINE_HEIGHT_FACTOR);
+          const numPdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
+          state.currentPage.drawText(`${num}.`, {
+            x: MARGIN + 4,
+            y: numPdfY,
+            size: fontSize,
+            font: state.fonts.regular,
+            color: rgb(0, 0, 0)
+          });
+          processInlineContent(state, child.content, fontSize, 24);
+        }
+        num++;
+      }
+      state.y += 4;
+      break;
+    }
+    case "blockquote": {
+      const startY = state.y;
+      for (const child of node.content || []) {
+        processInlineContent(state, child.content, 12, 16);
+      }
+      const endY = state.y;
+      const barX = MARGIN + 4;
+      const barTop = PAGE_HEIGHT - MARGIN - startY;
+      const barBottom = PAGE_HEIGHT - MARGIN - endY;
+      state.currentPage.drawLine({
+        start: { x: barX, y: barTop },
+        end: { x: barX, y: barBottom },
+        thickness: 2,
+        color: rgb(0.7, 0.7, 0.7)
+      });
+      state.y += 4;
+      break;
+    }
+    case "horizontalRule": {
+      ensureSpace(state, 16);
+      state.y += 8;
+      const ruleY = PAGE_HEIGHT - MARGIN - state.y;
+      state.currentPage.drawLine({
+        start: { x: MARGIN, y: ruleY },
+        end: { x: PAGE_WIDTH - MARGIN, y: ruleY },
+        thickness: 1,
+        color: rgb(0.7, 0.7, 0.7)
+      });
+      state.y += 8;
+      break;
+    }
+    case "codeBlock": {
+      const fontSize = 10;
+      const text = node.content?.map((c) => c.text || "").join("") || "";
+      const lines = text.split("\n");
+      const lineHeight = fontSize * LINE_HEIGHT_FACTOR;
+      const blockHeight = lines.length * lineHeight + 16;
+      ensureSpace(state, blockHeight);
+      const boxY = PAGE_HEIGHT - MARGIN - state.y - blockHeight;
+      state.currentPage.drawRectangle({
+        x: MARGIN,
+        y: boxY,
+        width: CONTENT_WIDTH,
+        height: blockHeight,
+        color: rgb(0.95, 0.95, 0.95),
+        borderColor: rgb(0.85, 0.85, 0.85),
+        borderWidth: 0.5
+      });
+      state.y += 8;
+      for (const line of lines) {
+        drawText(state, line || " ", state.fonts.regular, fontSize, 8);
+      }
+      state.y += 8;
+      break;
+    }
+    default:
+      if (node.content) {
+        processInlineContent(state, node.content, 12);
+      }
+      break;
+  }
+}
+function ensureFieldSuffix(fieldName, suffix) {
+  const cleanName = fieldName.replace(/_signature$/i, "").replace(/_initials$/i, "").replace(/_date$/i, "");
+  return `${cleanName}${suffix}`;
+}
+async function addFormFields(pdfDoc, fieldPositions, fields) {
+  const form = pdfDoc.getForm();
+  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+  const pages = pdfDoc.getPages();
+  const actualFieldNames = /* @__PURE__ */ new Map();
+  const warnings = [];
+  let baseTimestamp = Date.now();
+  for (const field of fields) {
+    const position = fieldPositions.get(field.fieldId);
+    if (!position || !field.name) continue;
+    const pdfFieldName = `${field.type}_${baseTimestamp++}`;
+    const pageIndex = position.page - 1;
+    const page = pages[pageIndex];
+    if (!page) continue;
+    const pdfX = position.x;
+    const pdfY = position.y;
+    try {
+      switch (field.type) {
+        case "text" /* TEXT */: {
+          const textField = form.createTextField(pdfFieldName);
+          actualFieldNames.set(field.name, pdfFieldName);
+          textField.addToPage(page, {
+            x: pdfX,
+            y: pdfY,
+            width: position.width,
+            height: position.height,
+            borderColor: rgb(0.5, 0.5, 0.5),
+            backgroundColor: rgb(1, 1, 1)
+          });
+          if (field.label && field.label.trim()) {
+            let tuValue = field.label;
+            if (field.fontSize && field.fontSize >= 8 && field.fontSize <= 72) {
+              tuValue = `${field.label}|fontSize:${field.fontSize}`;
+            }
+            textField.acroField.dict.set(
+              PDFName$1.of("TU"),
+              PDFString$1.of(tuValue)
+            );
+          }
+          if (field.defaultValue && field.defaultValue.trim()) {
+            textField.setText(field.defaultValue);
+          }
+          if (field.fontSize && field.fontSize >= 8 && field.fontSize <= 72) {
+            try {
+              textField.setFontSize(field.fontSize);
+            } catch (e) {
+            }
+          }
+          if (field.multiline) {
+            try {
+              textField.enableMultiline();
+            } catch (e) {
+            }
+          }
+          if (field.maxLength && field.maxLength > 0) {
+            try {
+              textField.setMaxLength(field.maxLength);
+            } catch (e) {
+            }
+          }
+          if (field.required) {
+            textField.enableRequired();
+          }
+          break;
+        }
+        case "signature" /* SIGNATURE */: {
+          const fieldNameWithSuffix = ensureFieldSuffix(pdfFieldName, "_signature");
+          actualFieldNames.set(field.name, fieldNameWithSuffix);
+          const sigField = form.createTextField(fieldNameWithSuffix);
+          sigField.addToPage(page, {
+            x: pdfX,
+            y: pdfY,
+            width: position.width,
+            height: position.height,
+            borderColor: rgb(0, 0, 1),
+            backgroundColor: rgb(0.9, 0.9, 1)
+          });
+          if (field.label && field.label.trim()) {
+            sigField.acroField.dict.set(
+              PDFName$1.of("TU"),
+              PDFString$1.of(field.label)
+            );
+          }
+          sigField.enableReadOnly();
+          if (field.required) sigField.enableRequired();
+          break;
+        }
+        case "initials" /* INITIALS */: {
+          const fieldNameWithSuffix = ensureFieldSuffix(pdfFieldName, "_initials");
+          actualFieldNames.set(field.name, fieldNameWithSuffix);
+          const initialsField = form.createTextField(fieldNameWithSuffix);
+          initialsField.addToPage(page, {
+            x: pdfX,
+            y: pdfY,
+            width: position.width,
+            height: position.height,
+            borderColor: rgb(0, 0, 1),
+            backgroundColor: rgb(0.9, 1, 0.9)
+          });
+          if (field.label && field.label.trim()) {
+            initialsField.acroField.dict.set(
+              PDFName$1.of("TU"),
+              PDFString$1.of(field.label)
+            );
+          }
+          initialsField.enableReadOnly();
+          if (field.required) initialsField.enableRequired();
+          break;
+        }
+        case "date" /* DATE */: {
+          const fieldNameWithSuffix = ensureFieldSuffix(pdfFieldName, "_date");
+          actualFieldNames.set(field.name, fieldNameWithSuffix);
+          const dateField = form.createTextField(fieldNameWithSuffix);
+          dateField.addToPage(page, {
+            x: pdfX,
+            y: pdfY,
+            width: position.width,
+            height: position.height,
+            borderColor: rgb(0.5, 0.5, 0.5),
+            backgroundColor: rgb(1, 1, 1)
+          });
+          const tuValue = field.placeholder && field.placeholder.trim() ? field.placeholder : field.label && field.label.trim() ? field.label : void 0;
+          if (tuValue) {
+            dateField.acroField.dict.set(
+              PDFName$1.of("TU"),
+              PDFString$1.of(tuValue)
+            );
+          }
+          if (field.required) dateField.enableRequired();
+          break;
+        }
+        case "checkbox" /* CHECKBOX */: {
+          const checkBox = form.createCheckBox(pdfFieldName);
+          actualFieldNames.set(field.name, pdfFieldName);
+          checkBox.addToPage(page, {
+            x: pdfX,
+            y: pdfY,
+            width: position.width,
+            height: position.height,
+            borderColor: rgb(0.5, 0.5, 0.5),
+            backgroundColor: rgb(1, 1, 1)
+          });
+          if (field.defaultValue === "true" || field.defaultValue === "checked") {
+            checkBox.check();
+          }
+          if (field.required) checkBox.enableRequired();
+          break;
+        }
+        case "dropdown" /* DROPDOWN */: {
+          const dropdown = form.createDropdown(pdfFieldName);
+          actualFieldNames.set(field.name, pdfFieldName);
+          if (field.options && field.options.length > 0) {
+            dropdown.setOptions(field.options);
+          }
+          dropdown.addToPage(page, {
+            x: pdfX,
+            y: pdfY,
+            width: position.width,
+            height: position.height,
+            borderColor: rgb(0.5, 0.5, 0.5),
+            backgroundColor: rgb(1, 1, 1)
+          });
+          if (field.required) dropdown.enableRequired();
+          break;
+        }
+        case "radio" /* RADIO */: {
+          const radioGroup = form.createRadioGroup(pdfFieldName);
+          actualFieldNames.set(field.name, pdfFieldName);
+          if (field.options && field.options.length > 0) {
+            const radioButtonSize = 20;
+            const buttonGap = 4;
+            const radioSpacing = radioButtonSize + buttonGap;
+            const topPadding = 8;
+            const fieldTopY = pdfY + position.height;
+            field.options.forEach((option, index) => {
+              const radioX = pdfX;
+              const radioY = fieldTopY - topPadding - radioButtonSize - index * radioSpacing;
+              radioGroup.addOptionToPage(option, page, {
+                x: radioX,
+                y: radioY,
+                width: radioButtonSize,
+                height: radioButtonSize,
+                borderColor: rgb(0.5, 0.5, 0.5),
+                backgroundColor: rgb(1, 1, 1)
+              });
+            });
+          }
+          if (field.required) radioGroup.enableRequired();
+          break;
+        }
+        case "text_label" /* TEXT_LABEL */: {
+          const textContent = field.defaultValue || "Text Label";
+          const labelFontSize = field.fontSize && field.fontSize >= 8 && field.fontSize <= 72 ? field.fontSize : Math.max(8, Math.min(16, position.height * 0.8));
+          const textX = pdfX;
+          const textY = pdfY + (position.height - labelFontSize) / 2;
+          page.drawText(textContent, {
+            x: textX,
+            y: textY,
+            size: labelFontSize,
+            font,
+            color: rgb(0, 0, 0)
+          });
+          break;
+        }
+      }
+    } catch (err) {
+      warnings.push(`Failed to create ${field.type} field "${field.name}": ${getErrorMessage(err)}`);
+    }
+  }
+  initPdfMetadata({ PDFName: PDFName$1, PDFString: PDFString$1 });
+  const metadata = buildMetadataObject(fields, actualFieldNames);
+  setSigniphiMetadata(pdfDoc, metadata);
+  return warnings;
+}
+async function generatePdfFromContent(content, options = {}) {
+  const { drawFieldPlaceholders = false, embedFormFields = false, fields = [] } = options;
+  const pdfDoc = await PDFDocument.create();
+  const firstPage = pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);
+  const fonts = {
+    regular: await pdfDoc.embedFont(StandardFonts.Helvetica),
+    bold: await pdfDoc.embedFont(StandardFonts.HelveticaBold),
+    italic: await pdfDoc.embedFont(StandardFonts.HelveticaOblique),
+    boldItalic: await pdfDoc.embedFont(StandardFonts.HelveticaBoldOblique)
+  };
+  const state = {
+    currentPage: firstPage,
+    pageIndex: 0,
+    y: 0,
+    fonts,
+    pdfDoc,
+    fieldPositions: /* @__PURE__ */ new Map(),
+    drawFieldPlaceholders
+  };
+  if (content.content) {
+    for (const block of content.content) {
+      processBlock(state, block);
+    }
+  }
+  let fieldWarnings;
+  if (embedFormFields && fields.length > 0) {
+    const warnings = await addFormFields(pdfDoc, state.fieldPositions, fields);
+    if (warnings.length > 0) fieldWarnings = warnings;
+  }
+  const pdfBytes = await pdfDoc.save({ useObjectStreams: false });
+  return {
+    pdfBytes,
+    fieldPositions: state.fieldPositions,
+    fieldWarnings
+  };
+}
+
+// src/utils/pdf-preview.ts
+async function pdfToImages(pdfBytes, scale = 2) {
+  let pdfjsLib;
+  try {
+    pdfjsLib = await import('pdfjs-dist');
+  } catch (err) {
+    throw new Error(formatError(
+      "Failed to load the PDF preview library \u2014 ensure pdfjs-dist is installed and the worker is accessible",
+      err
+    ));
+  }
+  if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
+    pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdfjs/build/pdf.worker.mjs";
+  }
+  let pdf;
+  try {
+    const loadingTask = pdfjsLib.getDocument({ data: pdfBytes });
+    pdf = await loadingTask.promise;
+  } catch (err) {
+    throw new Error(formatError("Failed to parse the generated PDF for preview", err));
+  }
+  const pages = [];
+  const pageErrors = [];
+  for (let i = 1; i <= pdf.numPages; i++) {
+    try {
+      const page = await pdf.getPage(i);
+      const viewport = page.getViewport({ scale });
+      const canvas = document.createElement("canvas");
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+      const context = canvas.getContext("2d");
+      if (!context) {
+        throw new Error("Browser could not create a 2D canvas rendering context");
+      }
+      await page.render({
+        canvasContext: context,
+        viewport
+      }).promise;
+      const imageUrl = canvas.toDataURL("image/png");
+      const originalViewport = page.getViewport({ scale: 1 });
+      pages.push({
+        pageNumber: i,
+        width: originalViewport.width,
+        height: originalViewport.height,
+        imageUrl
+      });
+      page.cleanup();
+    } catch (err) {
+      pageErrors.push(`Page ${i}: ${getErrorMessage(err)}`);
+    }
+  }
+  pdf.destroy();
+  if (pages.length === 0 && pageErrors.length > 0) {
+    throw new Error(`Failed to render PDF pages:
+${pageErrors.join("\n")}`);
+  }
+  return pages;
+}
+
+// src/hooks/useDocumentGenerator.ts
+function useDocumentGenerator(options = {}) {
+  const [fields, setFields] = useState([]);
+  const [variables, setVariables] = useState([]);
+  const [fieldPositions, setFieldPositions] = useState(/* @__PURE__ */ new Map());
+  const [markdown, setMarkdown] = useState(options.initialMarkdown || "");
+  const [pdfBytes, setPdfBytes] = useState(null);
+  const [pdfPages, setPdfPages] = useState([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState(null);
+  const [fieldWarnings, setFieldWarnings] = useState([]);
+  const debounceRef = useRef();
+  const onChangeRef = useRef(options.onChange);
+  onChangeRef.current = options.onChange;
+  const initialContent = options.initialContent || (options.initialMarkdown ? markdownToTiptap(options.initialMarkdown) : void 0);
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] }
+      }),
+      Underline,
+      TextAlign.configure({
+        types: ["heading", "paragraph"]
+      }),
+      Placeholder.configure({
+        placeholder: options.placeholder || "Start writing your document..."
+      }),
+      FieldNode,
+      VariableNode
+    ],
+    content: initialContent || { type: "doc", content: [{ type: "paragraph" }] },
+    onUpdate: ({ editor: ed }) => {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        const content = ed.getJSON();
+        const extractedFields = extractFieldsFromContent(content);
+        const extractedVariables = extractVariablesFromContent(content);
+        const md = tiptapToMarkdown(content);
+        setFields(extractedFields);
+        setVariables(extractedVariables);
+        setMarkdown(md);
+        onChangeRef.current?.({ markdown: md, content, fields: extractedFields, variables: extractedVariables });
+      }, 150);
+    }
+  });
+  useEffect(() => {
+    if (!editor) return;
+    const content = editor.getJSON();
+    const extractedFields = extractFieldsFromContent(content);
+    const extractedVariables = extractVariablesFromContent(content);
+    const md = tiptapToMarkdown(content);
+    setFields(extractedFields);
+    setVariables(extractedVariables);
+    setMarkdown(md);
+  }, [editor]);
+  useEffect(() => {
+    return () => clearTimeout(debounceRef.current);
+  }, []);
+  const insertField = useCallback(
+    (type, overrides) => {
+      if (!editor) return;
+      const attrs = createFieldAttrs(type, {
+        fieldType: type,
+        ...overrides
+      });
+      editor.commands.insertField(attrs);
+    },
+    [editor]
+  );
+  const updateField = useCallback(
+    (fieldId, attrs) => {
+      if (!editor) return;
+      editor.commands.updateField(fieldId, attrs);
+    },
+    [editor]
+  );
+  const deleteField = useCallback(
+    (fieldId) => {
+      if (!editor) return;
+      editor.commands.removeField(fieldId);
+    },
+    [editor]
+  );
+  const insertVariable = useCallback(
+    (attrs) => {
+      if (!editor) return;
+      editor.commands.insertVariable(attrs);
+    },
+    [editor]
+  );
+  const updateVariable = useCallback(
+    (varName, attrs) => {
+      if (!editor) return;
+      editor.commands.updateVariable(varName, attrs);
+    },
+    [editor]
+  );
+  const deleteVariable = useCallback(
+    (varName) => {
+      if (!editor) return;
+      editor.commands.removeVariable(varName);
+    },
+    [editor]
+  );
+  const generatePdf = useCallback(async () => {
+    if (!editor) return;
+    setIsGenerating(true);
+    setError(null);
+    setFieldWarnings([]);
+    try {
+      const content = editor.getJSON();
+      setFields(extractFieldsFromContent(content));
+      setVariables(extractVariablesFromContent(content));
+      const result = await generatePdfFromContent(content);
+      setPdfBytes(result.pdfBytes);
+      setFieldPositions(result.fieldPositions);
+      if (result.fieldWarnings) {
+        setFieldWarnings(result.fieldWarnings);
+      }
+      const pages = await pdfToImages(result.pdfBytes);
+      setPdfPages(pages);
+    } catch (err) {
+      console.error("Failed to generate PDF:", err);
+      setError(formatError("PDF generation failed", err));
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [editor]);
+  const generateWithVariables = useCallback(
+    async (values) => {
+      if (!editor) throw new Error("Editor is not initialized yet \u2014 wait for the editor to load before generating");
+      const content = editor.getJSON();
+      const replacedContent = replaceVariablesInContent(content, values);
+      const result = await generatePdfFromContent(replacedContent);
+      const pages = await pdfToImages(result.pdfBytes);
+      return { pdfBytes: result.pdfBytes, pdfPages: pages };
+    },
+    [editor]
+  );
+  const PDF_PAGE_HEIGHT = 841.89;
+  const positionedFields = fields.map((f) => {
+    const pos = fieldPositions.get(f.fieldId);
+    return {
+      id: f.name,
+      fieldId: f.fieldId,
+      type: f.type,
+      name: f.name,
+      label: f.label,
+      position: pos || { x: 0, y: 0, width: 0, height: 0, page: 1 },
+      required: f.required,
+      options: f.options,
+      placeholder: f.placeholder,
+      fontSize: f.fontSize,
+      defaultValue: f.defaultValue,
+      multiline: f.multiline,
+      maxLength: f.maxLength,
+      acknowledgements: f.acknowledgements
+    };
+  });
+  const exportDocument = useCallback(async () => {
+    if (!editor) return null;
+    setError(null);
+    setFieldWarnings([]);
+    try {
+      const content = editor.getJSON();
+      const exportFields = extractFieldsFromContent(content);
+      const result = await generatePdfFromContent(content, {
+        embedFormFields: true,
+        fields: exportFields
+      });
+      if (result.fieldWarnings) {
+        setFieldWarnings(result.fieldWarnings);
+      }
+      const blob = new Blob([result.pdfBytes], { type: "application/pdf" });
+      return {
+        pdfBlob: blob,
+        fields: exportFields.map((f) => {
+          const pos = result.fieldPositions.get(f.fieldId);
+          const exportPos = pos ? { ...pos, y: PDF_PAGE_HEIGHT - pos.y - pos.height } : { x: 0, y: 0, width: 0, height: 0, page: 1 };
+          return {
+            id: f.name,
+            fieldId: f.fieldId,
+            type: f.type,
+            name: f.name,
+            label: f.label,
+            position: exportPos,
+            required: f.required,
+            options: f.options,
+            placeholder: f.placeholder,
+            fontSize: f.fontSize,
+            defaultValue: f.defaultValue,
+            multiline: f.multiline,
+            maxLength: f.maxLength,
+            acknowledgements: f.acknowledgements
+          };
+        }),
+        markdown
+      };
+    } catch (err) {
+      console.error("Document export failed:", err);
+      setError(formatError("Document export failed", err));
+      return null;
+    }
+  }, [editor, markdown]);
+  const exportMarkdown = useCallback(() => {
+    if (!editor) return "";
+    return tiptapToMarkdown(editor.getJSON());
+  }, [editor]);
+  const getDocument = useCallback(
+    (title) => ({
+      title,
+      markdown,
+      editorContent: editor?.getJSON() || { type: "doc", content: [] },
+      fields,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    }),
+    [editor, markdown, fields]
+  );
+  const loadDocument = useCallback(
+    (doc) => {
+      if (!editor) return;
+      if (doc.editorContent) {
+        editor.commands.setContent(doc.editorContent);
+      } else if (doc.markdown) {
+        const content = markdownToTiptap(doc.markdown);
+        editor.commands.setContent(content);
+      }
+    },
+    [editor]
+  );
+  return {
+    editor,
+    fields,
+    variables,
+    fieldPositions,
+    positionedFields,
+    markdown,
+    pdfBytes,
+    pdfPages,
+    isGenerating,
+    error,
+    fieldWarnings,
+    insertField,
+    updateField,
+    deleteField,
+    insertVariable,
+    updateVariable,
+    deleteVariable,
+    generatePdf,
+    generateWithVariables,
+    exportDocument,
+    exportMarkdown,
+    getDocument,
+    loadDocument
+  };
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 md:h-12 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React12.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size }), className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var TooltipProvider = ({ children, ...props }) => /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration: 0, ...props, children });
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React12.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: "signiphi-pdf-compose",
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn(
+      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+      className
+    ), children })
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function ToolbarButton({ icon: Icon, label, isActive, disabled, onClick }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn(
+          "h-8 w-8",
+          isActive && "bg-accent text-accent-foreground"
+        ),
+        disabled,
+        onClick,
+        children: /* @__PURE__ */ jsx(Icon, { size: 16 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: label })
+  ] });
+}
+function ToolbarSeparator() {
+  return /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-border" });
+}
+function isMarkActiveOnSelection(editor, markName) {
+  if (editor.isActive(markName)) return true;
+  const { selection } = editor.state;
+  if (selection instanceof NodeSelection && selection.node.type.name === "variableNode") {
+    const markType = editor.schema.marks[markName];
+    return markType ? !!markType.isInSet(selection.node.marks) : false;
+  }
+  return false;
+}
+function EditorToolbar({ editor, insertFieldButton, insertVariableButton, onCollapse }) {
+  const toggle = useCallback(
+    (command) => {
+      if (!editor) return;
+      command();
+      editor.commands.focus();
+    },
+    [editor]
+  );
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap gap-0.5 px-2 py-1.5 bg-muted/30", children: [
+    onCollapse && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          icon: PanelLeftClose,
+          label: "Collapse",
+          onClick: onCollapse
+        }
+      ),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Undo,
+        label: "Undo",
+        disabled: !editor.can().undo(),
+        onClick: () => toggle(() => editor.chain().focus().undo().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Redo,
+        label: "Redo",
+        disabled: !editor.can().redo(),
+        onClick: () => toggle(() => editor.chain().focus().redo().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Bold,
+        label: "Bold",
+        isActive: isMarkActiveOnSelection(editor, "bold"),
+        onClick: () => toggle(() => editor.chain().focus().toggleBold().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Italic,
+        label: "Italic",
+        isActive: isMarkActiveOnSelection(editor, "italic"),
+        onClick: () => toggle(() => editor.chain().focus().toggleItalic().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Underline$1,
+        label: "Underline",
+        isActive: isMarkActiveOnSelection(editor, "underline"),
+        onClick: () => toggle(() => editor.chain().focus().toggleUnderline().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Code,
+        label: "Code",
+        isActive: editor.isActive("code"),
+        onClick: () => toggle(() => editor.chain().focus().toggleCode().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Heading1,
+        label: "Heading 1",
+        isActive: editor.isActive("heading", { level: 1 }),
+        onClick: () => toggle(() => editor.chain().focus().toggleHeading({ level: 1 }).run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Heading2,
+        label: "Heading 2",
+        isActive: editor.isActive("heading", { level: 2 }),
+        onClick: () => toggle(() => editor.chain().focus().toggleHeading({ level: 2 }).run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Heading3,
+        label: "Heading 3",
+        isActive: editor.isActive("heading", { level: 3 }),
+        onClick: () => toggle(() => editor.chain().focus().toggleHeading({ level: 3 }).run())
+      }
+    ),
+    /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: List,
+        label: "Bullet List",
+        isActive: editor.isActive("bulletList"),
+        onClick: () => toggle(() => editor.chain().focus().toggleBulletList().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: ListOrdered,
+        label: "Ordered List",
+        isActive: editor.isActive("orderedList"),
+        onClick: () => toggle(() => editor.chain().focus().toggleOrderedList().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Quote,
+        label: "Blockquote",
+        isActive: editor.isActive("blockquote"),
+        onClick: () => toggle(() => editor.chain().focus().toggleBlockquote().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: Minus,
+        label: "Horizontal Rule",
+        onClick: () => toggle(() => editor.chain().focus().setHorizontalRule().run())
+      }
+    ),
+    /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: AlignLeft,
+        label: "Align Left",
+        isActive: editor.isActive({ textAlign: "left" }),
+        onClick: () => toggle(() => editor.chain().focus().setTextAlign("left").run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: AlignCenter,
+        label: "Align Center",
+        isActive: editor.isActive({ textAlign: "center" }),
+        onClick: () => toggle(() => editor.chain().focus().setTextAlign("center").run())
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        icon: AlignRight,
+        label: "Align Right",
+        isActive: editor.isActive({ textAlign: "right" }),
+        onClick: () => toggle(() => editor.chain().focus().setTextAlign("right").run())
+      }
+    ),
+    /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+    insertFieldButton,
+    insertVariableButton
+  ] }) });
+}
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React12.forwardRef(({ className, align = "center", sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: "signiphi-pdf-compose",
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn(
+      "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      className
+    ), children })
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var Input = React12.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border-2 border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground transition-all duration-200 focus:outline-none focus:border-primary focus:ring-0 focus:shadow-[0_0_0_3px_rgba(0,153,205,0.15)] focus-visible:outline-none focus-visible:border-primary focus-visible:ring-0 focus-visible:shadow-[0_0_0_3px_rgba(0,153,205,0.15)] disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+var FIELD_TYPES = [
+  { type: "text" /* TEXT */, icon: Type, label: "Text", color: "bg-blue-100 text-blue-700 border-blue-300 hover:bg-blue-200" },
+  { type: "signature" /* SIGNATURE */, icon: PenTool, label: "Signature", color: "bg-purple-100 text-purple-700 border-purple-300 hover:bg-purple-200" },
+  { type: "initials" /* INITIALS */, icon: Hash, label: "Initials", color: "bg-green-100 text-green-700 border-green-300 hover:bg-green-200" },
+  { type: "date" /* DATE */, icon: Calendar, label: "Date", color: "bg-amber-100 text-amber-700 border-amber-300 hover:bg-amber-200" },
+  { type: "checkbox" /* CHECKBOX */, icon: CheckSquare, label: "Checkbox", color: "bg-teal-100 text-teal-700 border-teal-300 hover:bg-teal-200" },
+  { type: "radio" /* RADIO */, icon: Circle, label: "Radio", color: "bg-pink-100 text-pink-700 border-pink-300 hover:bg-pink-200" },
+  { type: "dropdown" /* DROPDOWN */, icon: ChevronDown, label: "Dropdown", color: "bg-indigo-100 text-indigo-700 border-indigo-300 hover:bg-indigo-200" },
+  { type: "text_label" /* TEXT_LABEL */, icon: FileText, label: "Label", color: "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200" }
+];
+function FieldInsertPopover({
+  open,
+  onOpenChange,
+  onInsert,
+  children
+}) {
+  const [step, setStep] = useState("type");
+  const [selectedType, setSelectedType] = useState(null);
+  const [label, setLabel] = useState("");
+  const [required, setRequired] = useState(false);
+  const [options, setOptions] = useState("");
+  const [placeholder, setPlaceholder] = useState("");
+  const [defaultValue, setDefaultValue] = useState("");
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [fontSize, setFontSize] = useState("");
+  const [multiline, setMultiline] = useState(false);
+  const [maxLength, setMaxLength] = useState("");
+  const [acknowledgements, setAcknowledgements] = useState([]);
+  const [isAddingAck, setIsAddingAck] = useState(false);
+  const [ackTitle, setAckTitle] = useState("");
+  const [ackDescription, setAckDescription] = useState("");
+  const reset = useCallback(() => {
+    setStep("type");
+    setSelectedType(null);
+    setLabel("");
+    setRequired(false);
+    setOptions("");
+    setPlaceholder("");
+    setDefaultValue("");
+    setAdvancedOpen(false);
+    setFontSize("");
+    setMultiline(false);
+    setMaxLength("");
+    setAcknowledgements([]);
+    setIsAddingAck(false);
+    setAckTitle("");
+    setAckDescription("");
+  }, []);
+  const handleOpenChange = useCallback(
+    (nextOpen) => {
+      if (!nextOpen) reset();
+      onOpenChange(nextOpen);
+    },
+    [onOpenChange, reset]
+  );
+  const handleTypeSelect = useCallback((type) => {
+    setSelectedType(type);
+    setStep("configure");
+  }, []);
+  const handleInsert = useCallback(() => {
+    if (!selectedType) return;
+    const attrs = {};
+    if (label) attrs.fieldLabel = label;
+    attrs.required = required;
+    if (options) attrs.options = options;
+    if (placeholder) attrs.placeholder = placeholder;
+    if (defaultValue) attrs.defaultValue = defaultValue;
+    if (fontSize) attrs.fontSize = parseInt(fontSize, 10) || null;
+    if (multiline) attrs.multiline = multiline;
+    if (maxLength) attrs.maxLength = parseInt(maxLength, 10) || null;
+    if (acknowledgements.length > 0) {
+      attrs.acknowledgements = JSON.stringify(acknowledgements);
+    }
+    onInsert(selectedType, attrs);
+    handleOpenChange(false);
+  }, [selectedType, label, required, options, placeholder, defaultValue, fontSize, multiline, maxLength, acknowledgements, onInsert, handleOpenChange]);
+  const addAcknowledgement = useCallback(() => {
+    if (!ackTitle.trim()) return;
+    const newAck = {
+      id: v4(),
+      title: ackTitle.trim(),
+      description: ackDescription.trim()
+    };
+    setAcknowledgements((prev) => {
+      const updated = [...prev, newAck];
+      if (updated.length === 1) setRequired(true);
+      return updated;
+    });
+    setAckTitle("");
+    setAckDescription("");
+    setIsAddingAck(false);
+  }, [ackTitle, ackDescription]);
+  const removeAcknowledgement = useCallback((id) => {
+    setAcknowledgements((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+  const showLabel = selectedType !== "text_label" /* TEXT_LABEL */;
+  const showPlaceholder = selectedType === "text" /* TEXT */ || selectedType === "date" /* DATE */;
+  const showOptions = selectedType === "dropdown" /* DROPDOWN */ || selectedType === "radio" /* RADIO */;
+  const showDefaultValue = selectedType === "text" /* TEXT */ || selectedType === "text_label" /* TEXT_LABEL */;
+  const showFontSize = selectedType === "text" /* TEXT */ || selectedType === "text_label" /* TEXT_LABEL */;
+  const showMultiline = selectedType === "text" /* TEXT */;
+  const showMaxLength = selectedType === "text" /* TEXT */;
+  const showRequired = selectedType !== "text_label" /* TEXT_LABEL */;
+  const showAcknowledgements = selectedType !== "text_label" /* TEXT_LABEL */;
+  const hasAdvancedFields = showFontSize || showMultiline || showMaxLength || showAcknowledgements;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-80 p-0", align: "start", sideOffset: 8, children: [
+      step === "type" && /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium text-foreground", children: "Select field type" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: FIELD_TYPES.map(({ type, icon: Icon, label: typeLabel, color }) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: cn(
+              "flex items-center gap-2 rounded-md border px-3 py-2 text-xs font-medium transition-colors",
+              color
+            ),
+            onClick: () => handleTypeSelect(type),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: 14 }),
+              typeLabel
+            ]
+          },
+          type
+        )) })
+      ] }),
+      step === "configure" && selectedType && /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Configure field" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              onClick: () => setStep("type"),
+              children: "Back"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          showLabel && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "field-label", className: "text-xs", children: "Label" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "field-label",
+                value: label,
+                onChange: (e) => setLabel(e.target.value),
+                placeholder: "e.g. Customer Signature",
+                className: "h-8 text-xs"
+              }
+            )
+          ] }),
+          showDefaultValue && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "field-default", className: "text-xs", children: selectedType === "text_label" /* TEXT_LABEL */ ? "Text Content" : "Default Value" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "field-default",
+                value: defaultValue,
+                onChange: (e) => setDefaultValue(e.target.value),
+                placeholder: selectedType === "text_label" /* TEXT_LABEL */ ? "Text Label" : "Default value",
+                className: "h-8 text-xs"
+              }
+            )
+          ] }),
+          showPlaceholder && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "field-placeholder", className: "text-xs", children: "Placeholder" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "field-placeholder",
+                value: placeholder,
+                onChange: (e) => setPlaceholder(e.target.value),
+                placeholder: "e.g. Enter your name",
+                className: "h-8 text-xs"
+              }
+            )
+          ] }),
+          showOptions && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "field-options", className: "text-xs", children: "Options (comma-separated)" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "field-options",
+                value: options,
+                onChange: (e) => setOptions(e.target.value),
+                placeholder: "e.g. Option A, Option B, Option C",
+                className: "h-8 text-xs"
+              }
+            )
+          ] }),
+          showRequired && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: required,
+                onChange: (e) => setRequired(e.target.checked),
+                className: "h-3.5 w-3.5 rounded border-border"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Required field" })
+          ] })
+        ] }),
+        hasAdvancedFields && /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground w-full",
+              onClick: () => setAdvancedOpen(!advancedOpen),
+              children: [
+                advancedOpen ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 }),
+                "Advanced"
+              ]
+            }
+          ),
+          advancedOpen && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+            showFontSize && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "field-fontsize", className: "text-xs", children: "Font Size (8-72)" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "field-fontsize",
+                  type: "number",
+                  min: "8",
+                  max: "72",
+                  value: fontSize,
+                  onChange: (e) => setFontSize(e.target.value),
+                  placeholder: "12",
+                  className: "h-8 text-xs"
+                }
+              )
+            ] }),
+            showMultiline && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: multiline,
+                  onChange: (e) => setMultiline(e.target.checked),
+                  className: "h-3.5 w-3.5 rounded border-border"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Multiline" })
+            ] }),
+            showMaxLength && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "field-maxlength", className: "text-xs", children: "Max Length" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "field-maxlength",
+                  type: "number",
+                  min: "1",
+                  value: maxLength,
+                  onChange: (e) => setMaxLength(e.target.value),
+                  placeholder: "No limit",
+                  className: "h-8 text-xs"
+                }
+              )
+            ] }),
+            showAcknowledgements && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Acknowledgements" }),
+              acknowledgements.length === 0 && !isAddingAck && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: "No acknowledgements added" }),
+              acknowledgements.map((ack) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 rounded border border-border p-1.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium text-foreground truncate", children: ack.title }),
+                  ack.description && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: ack.description })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "text-muted-foreground hover:text-destructive shrink-0 mt-0.5",
+                    onClick: () => removeAcknowledgement(ack.id),
+                    children: /* @__PURE__ */ jsx(X, { size: 12 })
+                  }
+                )
+              ] }, ack.id)),
+              isAddingAck ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 rounded border border-border p-2", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: ackTitle,
+                    onChange: (e) => setAckTitle(e.target.value),
+                    placeholder: "Title (required)",
+                    className: "h-7 text-xs"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: ackDescription,
+                    onChange: (e) => setAckDescription(e.target.value),
+                    placeholder: "Description (optional)",
+                    className: "h-7 text-xs"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "h-6 text-[10px] flex-1",
+                      onClick: addAcknowledgement,
+                      disabled: !ackTitle.trim(),
+                      children: "Add"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      className: "h-6 text-[10px]",
+                      onClick: () => {
+                        setIsAddingAck(false);
+                        setAckTitle("");
+                        setAckDescription("");
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "flex items-center gap-1 text-[11px] text-primary hover:text-primary/80",
+                  onClick: () => setIsAddingAck(true),
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { size: 11 }),
+                    "Add acknowledgement"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              className: "h-8 flex-1 text-xs",
+              onClick: handleInsert,
+              children: "Insert"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-8 text-xs",
+              onClick: () => handleOpenChange(false),
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+var FIELD_TYPE_META = {
+  ["text" /* TEXT */]: { icon: Type, label: "Text", color: "text-blue-600" },
+  ["signature" /* SIGNATURE */]: { icon: PenTool, label: "Signature", color: "text-purple-600" },
+  ["initials" /* INITIALS */]: { icon: Hash, label: "Initials", color: "text-green-600" },
+  ["date" /* DATE */]: { icon: Calendar, label: "Date", color: "text-amber-600" },
+  ["checkbox" /* CHECKBOX */]: { icon: CheckSquare, label: "Checkbox", color: "text-teal-600" },
+  ["radio" /* RADIO */]: { icon: Circle, label: "Radio", color: "text-pink-600" },
+  ["dropdown" /* DROPDOWN */]: { icon: ChevronDown, label: "Dropdown", color: "text-indigo-600" },
+  ["text_label" /* TEXT_LABEL */]: { icon: FileText, label: "Label", color: "text-gray-600" }
+};
+function FieldEditPopover({
+  fieldId,
+  attrs,
+  anchorEl,
+  onUpdate,
+  onDelete,
+  onClose
+}) {
+  const [label, setLabel] = useState("");
+  const [required, setRequired] = useState(false);
+  const [options, setOptions] = useState("");
+  const [placeholder, setPlaceholder] = useState("");
+  const [defaultValue, setDefaultValue] = useState("");
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [fontSize, setFontSize] = useState("");
+  const [multiline, setMultiline] = useState(false);
+  const [maxLength, setMaxLength] = useState("");
+  const [acknowledgements, setAcknowledgements] = useState([]);
+  const [isAddingAck, setIsAddingAck] = useState(false);
+  const [ackTitle, setAckTitle] = useState("");
+  const [ackDescription, setAckDescription] = useState("");
+  useEffect(() => {
+    if (attrs) {
+      setLabel(String(attrs.fieldLabel || ""));
+      setRequired(Boolean(attrs.required));
+      setOptions(String(attrs.options || ""));
+      setPlaceholder(String(attrs.placeholder || ""));
+      setDefaultValue(String(attrs.defaultValue || ""));
+      setFontSize(attrs.fontSize ? String(attrs.fontSize) : "");
+      setMultiline(Boolean(attrs.multiline));
+      setMaxLength(attrs.maxLength ? String(attrs.maxLength) : "");
+      try {
+        const acks = attrs.acknowledgements ? JSON.parse(attrs.acknowledgements) : [];
+        setAcknowledgements(Array.isArray(acks) ? acks : []);
+      } catch {
+        setAcknowledgements([]);
+      }
+      setAdvancedOpen(false);
+      setIsAddingAck(false);
+      setAckTitle("");
+      setAckDescription("");
+    }
+  }, [attrs]);
+  const handleSave = useCallback(() => {
+    if (!fieldId) return;
+    const updates = {
+      fieldLabel: label,
+      required,
+      options,
+      placeholder,
+      defaultValue,
+      fontSize: fontSize ? parseInt(fontSize, 10) || null : null,
+      multiline,
+      maxLength: maxLength ? parseInt(maxLength, 10) || null : null,
+      acknowledgements: acknowledgements.length > 0 ? JSON.stringify(acknowledgements) : ""
+    };
+    onUpdate(fieldId, updates);
+    onClose();
+  }, [fieldId, label, required, options, placeholder, defaultValue, fontSize, multiline, maxLength, acknowledgements, onUpdate, onClose]);
+  const handleDelete = useCallback(() => {
+    if (!fieldId) return;
+    onDelete(fieldId);
+    onClose();
+  }, [fieldId, onDelete, onClose]);
+  const addAcknowledgement = useCallback(() => {
+    if (!ackTitle.trim()) return;
+    const newAck = {
+      id: v4(),
+      title: ackTitle.trim(),
+      description: ackDescription.trim()
+    };
+    setAcknowledgements((prev) => {
+      const updated = [...prev, newAck];
+      if (updated.length === 1) setRequired(true);
+      return updated;
+    });
+    setAckTitle("");
+    setAckDescription("");
+    setIsAddingAck(false);
+  }, [ackTitle, ackDescription]);
+  const removeAcknowledgement = useCallback((id) => {
+    setAcknowledgements((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+  const isOpen = fieldId !== null && attrs !== null;
+  const fieldType = attrs?.fieldType;
+  const meta = FIELD_TYPE_META[fieldType] || FIELD_TYPE_META["text" /* TEXT */];
+  const Icon = meta.icon;
+  const showLabel = fieldType !== "text_label" /* TEXT_LABEL */;
+  const showPlaceholder = fieldType === "text" /* TEXT */ || fieldType === "date" /* DATE */;
+  const showOptions = fieldType === "dropdown" /* DROPDOWN */ || fieldType === "radio" /* RADIO */;
+  const showDefaultValue = fieldType === "text" /* TEXT */ || fieldType === "text_label" /* TEXT_LABEL */;
+  const showFontSize = fieldType === "text" /* TEXT */ || fieldType === "text_label" /* TEXT_LABEL */;
+  const showMultiline = fieldType === "text" /* TEXT */;
+  const showMaxLength = fieldType === "text" /* TEXT */;
+  const showRequired = fieldType !== "text_label" /* TEXT_LABEL */;
+  const showAcknowledgements = fieldType !== "text_label" /* TEXT_LABEL */;
+  const hasAdvancedFields = showFontSize || showMultiline || showMaxLength || showAcknowledgements;
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: [
+    anchorEl && /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: { current: anchorEl } }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 p-0", align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5 text-sm font-medium", meta.color), children: [
+          /* @__PURE__ */ jsx(Icon, { size: 14 }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            meta.label,
+            " Field"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-7 w-7 text-destructive hover:text-destructive",
+            onClick: handleDelete,
+            children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-field-name", className: "text-xs", children: "Name" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "edit-field-name",
+              value: String(attrs?.fieldName || ""),
+              disabled: true,
+              className: "h-8 text-xs opacity-60"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Auto-generated identifier" })
+        ] }),
+        showLabel && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-field-label", className: "text-xs", children: "Label" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "edit-field-label",
+              value: label,
+              onChange: (e) => setLabel(e.target.value),
+              className: "h-8 text-xs"
+            }
+          )
+        ] }),
+        showDefaultValue && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-field-default", className: "text-xs", children: fieldType === "text_label" /* TEXT_LABEL */ ? "Text Content" : "Default Value" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "edit-field-default",
+              value: defaultValue,
+              onChange: (e) => setDefaultValue(e.target.value),
+              className: "h-8 text-xs"
+            }
+          )
+        ] }),
+        showPlaceholder && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-field-placeholder", className: "text-xs", children: "Placeholder" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "edit-field-placeholder",
+              value: placeholder,
+              onChange: (e) => setPlaceholder(e.target.value),
+              className: "h-8 text-xs"
+            }
+          )
+        ] }),
+        showOptions && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-field-options", className: "text-xs", children: "Options (comma-separated)" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "edit-field-options",
+              value: options,
+              onChange: (e) => setOptions(e.target.value),
+              className: "h-8 text-xs"
+            }
+          )
+        ] }),
+        showRequired && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: required,
+              onChange: (e) => setRequired(e.target.checked),
+              className: "h-3.5 w-3.5 rounded border-border"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Required field" })
+        ] })
+      ] }),
+      hasAdvancedFields && /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground w-full",
+            onClick: () => setAdvancedOpen(!advancedOpen),
+            children: [
+              advancedOpen ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 }),
+              "Advanced"
+            ]
+          }
+        ),
+        advancedOpen && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+          showFontSize && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "edit-field-fontsize", className: "text-xs", children: "Font Size (8-72)" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "edit-field-fontsize",
+                type: "number",
+                min: "8",
+                max: "72",
+                value: fontSize,
+                onChange: (e) => setFontSize(e.target.value),
+                placeholder: "12",
+                className: "h-8 text-xs"
+              }
+            )
+          ] }),
+          showMultiline && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: multiline,
+                onChange: (e) => setMultiline(e.target.checked),
+                className: "h-3.5 w-3.5 rounded border-border"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Multiline" })
+          ] }),
+          showMaxLength && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "edit-field-maxlength", className: "text-xs", children: "Max Length" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "edit-field-maxlength",
+                type: "number",
+                min: "1",
+                value: maxLength,
+                onChange: (e) => setMaxLength(e.target.value),
+                placeholder: "No limit",
+                className: "h-8 text-xs"
+              }
+            )
+          ] }),
+          showAcknowledgements && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Acknowledgements" }),
+            acknowledgements.length === 0 && !isAddingAck && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: "No acknowledgements added" }),
+            acknowledgements.map((ack) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 rounded border border-border p-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium text-foreground truncate", children: ack.title }),
+                ack.description && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: ack.description })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "text-muted-foreground hover:text-destructive shrink-0 mt-0.5",
+                  onClick: () => removeAcknowledgement(ack.id),
+                  children: /* @__PURE__ */ jsx(X, { size: 12 })
+                }
+              )
+            ] }, ack.id)),
+            isAddingAck ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 rounded border border-border p-2", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: ackTitle,
+                  onChange: (e) => setAckTitle(e.target.value),
+                  placeholder: "Title (required)",
+                  className: "h-7 text-xs"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: ackDescription,
+                  onChange: (e) => setAckDescription(e.target.value),
+                  placeholder: "Description (optional)",
+                  className: "h-7 text-xs"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    className: "h-6 text-[10px] flex-1",
+                    onClick: addAcknowledgement,
+                    disabled: !ackTitle.trim(),
+                    children: "Add"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "h-6 text-[10px]",
+                    onClick: () => {
+                      setIsAddingAck(false);
+                      setAckTitle("");
+                      setAckDescription("");
+                    },
+                    children: "Cancel"
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "flex items-center gap-1 text-[11px] text-primary hover:text-primary/80",
+                onClick: () => setIsAddingAck(true),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { size: 11 }),
+                  "Add acknowledgement"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            className: "h-8 flex-1 text-xs",
+            onClick: handleSave,
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "h-8 text-xs",
+            onClick: onClose,
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+function labelToVarName(label) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+}
+function VariableInsertPopover({
+  open,
+  onOpenChange,
+  onInsert,
+  children
+}) {
+  const [varLabel, setVarLabel] = useState("");
+  const [varName, setVarName] = useState("");
+  const [varDefault, setVarDefault] = useState("");
+  const [nameManuallyEdited, setNameManuallyEdited] = useState(false);
+  const reset = useCallback(() => {
+    setVarLabel("");
+    setVarName("");
+    setVarDefault("");
+    setNameManuallyEdited(false);
+  }, []);
+  const handleOpenChange = useCallback(
+    (nextOpen) => {
+      if (!nextOpen) reset();
+      onOpenChange(nextOpen);
+    },
+    [onOpenChange, reset]
+  );
+  useEffect(() => {
+    if (!nameManuallyEdited) {
+      setVarName(labelToVarName(varLabel));
+    }
+  }, [varLabel, nameManuallyEdited]);
+  const handleInsert = useCallback(() => {
+    if (!varLabel.trim() || !varName.trim()) return;
+    onInsert({
+      varName: varName.trim(),
+      varLabel: varLabel.trim(),
+      varDefault: varDefault.trim()
+    });
+    handleOpenChange(false);
+  }, [varLabel, varName, varDefault, onInsert, handleOpenChange]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 p-0", align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm font-medium text-orange-700", children: [
+        /* @__PURE__ */ jsx(Braces, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: "Insert Variable" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "var-label", className: "text-xs", children: "Label" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "var-label",
+              value: varLabel,
+              onChange: (e) => setVarLabel(e.target.value),
+              placeholder: "e.g. Company Name",
+              className: "h-8 text-xs"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "var-name", className: "text-xs", children: "Name (identifier)" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "var-name",
+              value: varName,
+              onChange: (e) => {
+                setVarName(e.target.value);
+                setNameManuallyEdited(true);
+              },
+              placeholder: "e.g. company_name",
+              className: "h-8 text-xs font-mono"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Used as key in data objects" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "var-default", className: "text-xs", children: "Default Value" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "var-default",
+              value: varDefault,
+              onChange: (e) => setVarDefault(e.target.value),
+              placeholder: "Optional",
+              className: "h-8 text-xs"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            className: "h-8 flex-1 text-xs",
+            onClick: handleInsert,
+            disabled: !varLabel.trim() || !varName.trim(),
+            children: "Insert"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "h-8 text-xs",
+            onClick: () => handleOpenChange(false),
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+function VariableEditPopover({
+  varName,
+  attrs,
+  anchorEl,
+  onUpdate,
+  onDelete,
+  onClose
+}) {
+  const [varLabel, setVarLabel] = useState("");
+  const [varDefault, setVarDefault] = useState("");
+  useEffect(() => {
+    if (attrs) {
+      setVarLabel(String(attrs.varLabel || ""));
+      setVarDefault(String(attrs.varDefault || ""));
+    }
+  }, [attrs]);
+  const handleSave = useCallback(() => {
+    if (!varName) return;
+    onUpdate(varName, {
+      varLabel,
+      varDefault
+    });
+    onClose();
+  }, [varName, varLabel, varDefault, onUpdate, onClose]);
+  const handleDelete = useCallback(() => {
+    if (!varName) return;
+    onDelete(varName);
+    onClose();
+  }, [varName, onDelete, onClose]);
+  const isOpen = varName !== null && attrs !== null;
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: [
+    anchorEl && /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: { current: anchorEl } }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 p-0", align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm font-medium text-orange-700", children: [
+          /* @__PURE__ */ jsx(Braces, { size: 14 }),
+          /* @__PURE__ */ jsx("span", { children: "Edit Variable" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-7 w-7 text-destructive hover:text-destructive",
+            onClick: handleDelete,
+            children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-var-name", className: "text-xs", children: "Name (identifier)" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "edit-var-name",
+              value: String(attrs?.varName || ""),
+              disabled: true,
+              className: "h-8 text-xs font-mono opacity-60"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Same name = same value across document" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-var-label", className: "text-xs", children: "Label" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "edit-var-label",
+              value: varLabel,
+              onChange: (e) => setVarLabel(e.target.value),
+              className: "h-8 text-xs"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-var-default", className: "text-xs", children: "Default Value" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "edit-var-default",
+              value: varDefault,
+              onChange: (e) => setVarDefault(e.target.value),
+              placeholder: "Optional",
+              className: "h-8 text-xs"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            className: "h-8 flex-1 text-xs",
+            onClick: handleSave,
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "h-8 text-xs",
+            onClick: onClose,
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+function getFieldIcon(type) {
+  switch (type) {
+    case "text" /* TEXT */:
+      return "T";
+    case "signature" /* SIGNATURE */:
+      return "\u270D";
+    case "initials" /* INITIALS */:
+      return "I";
+    case "date" /* DATE */:
+      return "\u{1F4C5}";
+    case "checkbox" /* CHECKBOX */:
+      return "\u2610";
+    case "radio" /* RADIO */:
+      return "\u25CB";
+    case "dropdown" /* DROPDOWN */:
+      return "\u25BC";
+    case "text_label" /* TEXT_LABEL */:
+      return "A";
+    default:
+      return "T";
+  }
+}
+function getFieldColors(type) {
+  switch (type) {
+    case "signature" /* SIGNATURE */:
+      return { bg: "bg-purple-50", border: "border-purple-300" };
+    case "initials" /* INITIALS */:
+      return { bg: "bg-green-50", border: "border-green-400" };
+    case "date" /* DATE */:
+      return { bg: "bg-orange-50", border: "border-orange-400" };
+    default:
+      return { bg: "bg-card", border: "border-border" };
+  }
+}
+function FieldOverlay({ field, renderScale, pageHeight }) {
+  const { position } = field;
+  const displayX = position.x * renderScale;
+  const displayY = (pageHeight - position.y - position.height) * renderScale;
+  const displayWidth = position.width * renderScale;
+  const displayHeight = position.height * renderScale;
+  const colors = getFieldColors(field.type);
+  const icon = getFieldIcon(field.type);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute box-border border-2 border-dashed rounded pointer-events-none",
+        colors.bg,
+        colors.border
+      ),
+      style: {
+        left: displayX,
+        top: displayY,
+        width: displayWidth,
+        height: displayHeight
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 h-full px-1 text-xs overflow-hidden", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: field.label })
+      ] })
+    }
+  );
+}
+function PreviewPanel({
+  pages,
+  isGenerating,
+  positionedFields,
+  headerLeft,
+  className
+}) {
+  const [currentPageIndex, setCurrentPageIndex] = useState(0);
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const currentPage = pages.length > 0 ? pages[currentPageIndex] : null;
+  useEffect(() => {
+    if (pages.length > 0 && currentPageIndex >= pages.length) {
+      setCurrentPageIndex(0);
+    }
+  }, [pages.length, currentPageIndex]);
+  const zoomIn = () => setZoomLevel((prev) => Math.min(prev + 0.25, 4));
+  const zoomOut = () => setZoomLevel((prev) => Math.max(prev - 0.25, 0.25));
+  const resetZoom = () => setZoomLevel(1);
+  const handleZoomSliderChange = (e) => {
+    setZoomLevel(parseFloat(e.target.value));
+  };
+  const pageDisplaySize = useMemo(() => {
+    if (!currentPage) return null;
+    const renderWidth = currentPage.width;
+    const renderHeight = currentPage.height;
+    const baseScale = Math.min(700 / renderWidth, 900 / renderHeight, 1);
+    const viewportWidth = renderWidth * baseScale;
+    const viewportHeight = renderHeight * baseScale;
+    const contentWidth = renderWidth * baseScale * zoomLevel;
+    const contentHeight = renderHeight * baseScale * zoomLevel;
+    const renderScale = baseScale * zoomLevel;
+    return { viewportWidth, viewportHeight, contentWidth, contentHeight, renderScale };
+  }, [currentPage, zoomLevel]);
+  const pageFields = useMemo(() => {
+    if (!currentPage || !positionedFields) return [];
+    return positionedFields.filter(
+      (f) => f.position.page === currentPageIndex + 1 && f.position.width > 0
+    );
+  }, [positionedFields, currentPage, currentPageIndex]);
+  const showScrollbars = zoomLevel > 1;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full border border-border rounded-lg overflow-hidden bg-muted/20", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-border px-2 py-1.5 flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        headerLeft,
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "h-8 px-2 text-xs",
+            disabled: currentPageIndex <= 0 || pages.length === 0,
+            onClick: () => setCurrentPageIndex((p) => Math.max(0, p - 1)),
+            children: [
+              /* @__PURE__ */ jsx(ChevronLeft, { size: 14 }),
+              "Prev"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "h-8 px-2 text-xs",
+            disabled: currentPageIndex >= pages.length - 1 || pages.length === 0,
+            onClick: () => setCurrentPageIndex((p) => Math.min(pages.length - 1, p + 1)),
+            children: [
+              "Next",
+              /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-1", children: pages.length > 0 ? `Page ${currentPageIndex + 1} of ${pages.length}` : "No pages" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        pageFields.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          pageFields.length,
+          " field",
+          pageFields.length !== 1 ? "s" : "",
+          " on this page"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-8 w-8 p-0",
+              disabled: pages.length === 0 || zoomLevel <= 0.25,
+              onClick: zoomOut,
+              children: /* @__PURE__ */ jsx(ZoomOut, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: "0.25",
+              max: "4",
+              step: "0.25",
+              value: zoomLevel,
+              onChange: handleZoomSliderChange,
+              disabled: pages.length === 0,
+              className: "w-20 h-1.5 bg-muted rounded-lg appearance-none cursor-pointer accent-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-8 w-8 p-0",
+              disabled: pages.length === 0 || zoomLevel >= 4,
+              onClick: zoomIn,
+              children: /* @__PURE__ */ jsx(ZoomIn, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground font-medium min-w-[2.5rem] text-center", children: [
+            Math.round(zoomLevel * 100),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-8 w-8 p-0",
+              disabled: pages.length === 0 || zoomLevel === 1,
+              onClick: resetZoom,
+              children: /* @__PURE__ */ jsx(Maximize2, { size: 14 })
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex-1 min-h-0 bg-muted/50 flex justify-center overflow-auto p-4",
+          !isGenerating && currentPage && pageDisplaySize ? "items-start" : "items-center"
+        ),
+        children: [
+          isGenerating && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { size: 24, className: "animate-spin" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Generating PDF..." })
+          ] }),
+          !isGenerating && pages.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "No preview available" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs", children: 'Click "Generate PDF" to see a preview' })
+          ] }),
+          !isGenerating && currentPage && pageDisplaySize && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "border border-border rounded-lg bg-muted/30 shrink-0",
+                showScrollbars ? "overflow-auto" : "overflow-hidden"
+              ),
+              style: {
+                width: pageDisplaySize.viewportWidth,
+                height: pageDisplaySize.viewportHeight
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "relative bg-white",
+                  style: {
+                    width: pageDisplaySize.contentWidth,
+                    height: pageDisplaySize.contentHeight
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: currentPage.imageUrl,
+                        alt: `Page ${currentPage.pageNumber}`,
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "contain"
+                        },
+                        className: "absolute inset-0 pointer-events-none",
+                        draggable: false
+                      }
+                    ),
+                    pageFields.map((field) => /* @__PURE__ */ jsx(
+                      FieldOverlay,
+                      {
+                        field,
+                        renderScale: pageDisplaySize.renderScale,
+                        pageHeight: currentPage.height
+                      },
+                      field.fieldId
+                    ))
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/utils/markdown-validator.ts
+function validateMarkdown(markdown) {
+  const errors = [];
+  const warnings = [];
+  if (!markdown || !markdown.trim()) {
+    return { valid: false, errors: ["Content is empty"], warnings: [], variables: [], fields: [] };
+  }
+  const lines = markdown.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineNum = i + 1;
+    let searchFrom = 0;
+    while (true) {
+      const openIdx = line.indexOf("{{", searchFrom);
+      if (openIdx === -1) break;
+      const closeIdx = line.indexOf("}}", openIdx + 2);
+      if (closeIdx === -1) {
+        errors.push(`Unclosed token at line ${lineNum}: missing }}`);
+        break;
+      }
+      const tokenContent = line.slice(openIdx + 2, closeIdx);
+      const pipeIdx = tokenContent.indexOf("|");
+      if (pipeIdx === -1) {
+        errors.push(`Malformed token at line ${lineNum}: missing | delimiter`);
+      } else {
+        const tokenType = tokenContent.slice(0, pipeIdx);
+        if (tokenType !== "field" && tokenType !== "var") {
+          errors.push(`Unknown token type "${tokenType}" at line ${lineNum} (expected "field" or "var")`);
+        } else {
+          const body = tokenContent.slice(pipeIdx + 1);
+          const pairs = body.split("|");
+          if (tokenType === "field") {
+            const hasType = pairs.some((p) => p.startsWith("type:"));
+            if (!hasType) {
+              errors.push(`Field token at line ${lineNum} is missing required "type" attribute`);
+            }
+          } else if (tokenType === "var") {
+            const hasName = pairs.some((p) => p.startsWith("name:"));
+            if (!hasName) {
+              errors.push(`Variable token at line ${lineNum} is missing required "name" attribute`);
+            }
+          }
+        }
+      }
+      searchFrom = closeIdx + 2;
+    }
+  }
+  let fields = [];
+  let variables = [];
+  try {
+    const content = markdownToTiptap(markdown);
+    fields = extractFieldsFromContent(content);
+    variables = extractVariablesFromContent(content);
+  } catch (e) {
+    errors.push(`Failed to parse markdown: ${e.message}`);
+  }
+  const varMap = /* @__PURE__ */ new Map();
+  for (const v of variables) {
+    const existing = varMap.get(v.varName);
+    if (existing) {
+      if (existing.varLabel !== v.varLabel || existing.varDefault !== v.varDefault) {
+        warnings.push(`Variable "${v.varName}" has conflicting labels or defaults`);
+      }
+    } else {
+      varMap.set(v.varName, v);
+    }
+  }
+  for (const v of variables) {
+    if (!v.varDefault) {
+      warnings.push(`Variable "${v.varName}" has no default value`);
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings,
+    variables,
+    fields
+  };
+}
+var sizeClasses = {
+  md: "px-3 py-1.5 text-xs font-medium",
+  sm: "px-2 py-0.5 text-[10px] font-medium"
+};
+function ToggleGroup({
+  value,
+  onChange,
+  options,
+  size = "md",
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center gap-1 bg-muted/50 p-0.5 rounded-lg", className), children: options.map((opt) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "rounded-md transition-colors",
+        sizeClasses[size],
+        value === opt.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+      ),
+      onClick: () => onChange(opt.value),
+      children: opt.label
+    },
+    opt.value
+  )) });
+}
+function parseCsv(text) {
+  const lines = text.split(/\r?\n/).filter((l) => l.trim() !== "");
+  if (lines.length < 2) return [];
+  function parseLine(line) {
+    const fields = [];
+    let current = "";
+    let inQuotes = false;
+    for (let i = 0; i < line.length; i++) {
+      const ch = line[i];
+      if (inQuotes) {
+        if (ch === '"' && line[i + 1] === '"') {
+          current += '"';
+          i++;
+        } else if (ch === '"') {
+          inQuotes = false;
+        } else {
+          current += ch;
+        }
+      } else {
+        if (ch === '"') {
+          inQuotes = true;
+        } else if (ch === ",") {
+          fields.push(current.trim());
+          current = "";
+        } else {
+          current += ch;
+        }
+      }
+    }
+    fields.push(current.trim());
+    return fields;
+  }
+  const headers = parseLine(lines[0]);
+  const rows = [];
+  for (let i = 1; i < lines.length; i++) {
+    const values = parseLine(lines[i]);
+    const row = {};
+    for (let j = 0; j < headers.length; j++) {
+      row[headers[j]] = values[j] || "";
+    }
+    rows.push(row);
+  }
+  return rows;
+}
+function GeneratePanel({
+  editorMarkdown,
+  editorContent,
+  editorVariables,
+  onGeneratePdf,
+  initialBulkData
+}) {
+  const [templateSource, setTemplateSource] = useState("editor");
+  const [importedMarkdown, setImportedMarkdown] = useState(null);
+  const [importedFileName, setImportedFileName] = useState(null);
+  const [validationResult, setValidationResult] = useState(null);
+  const [mode, setMode] = useState("single");
+  const [variableValues, setVariableValues] = useState({});
+  const [bulkInputFormat, setBulkInputFormat] = useState("json");
+  const [bulkInput, setBulkInput] = useState("");
+  const [bulkData, setBulkData] = useState(null);
+  const [bulkError, setBulkError] = useState(null);
+  const [csvFileName, setCsvFileName] = useState(null);
+  const [previewPages, setPreviewPages] = useState([]);
+  const [previewFields, setPreviewFields] = useState([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [previewFresh, setPreviewFresh] = useState(false);
+  const [previewError, setPreviewError] = useState(null);
+  const [exportError, setExportError] = useState(null);
+  const [exportSuccess, setExportSuccess] = useState(null);
+  const [jsonCursor, setJsonCursor] = useState({ line: 1, col: 1 });
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isCsvDragOver, setIsCsvDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+  const csvInputRef = useRef(null);
+  const jsonGutterRef = useRef(null);
+  const updateJsonCursor = useCallback((el) => {
+    const pos = el.selectionStart ?? 0;
+    const textBefore = el.value.slice(0, pos);
+    const line = (textBefore.match(/\n/g) || []).length + 1;
+    const col = pos - textBefore.lastIndexOf("\n");
+    setJsonCursor({ line, col });
+  }, []);
+  const activeVariables = templateSource === "imported" && validationResult?.valid ? validationResult.variables : editorVariables;
+  const hasVariables = activeVariables.length > 0;
+  const hasEditorContent = editorMarkdown.trim().length > 0;
+  const hasImportedContent = templateSource === "imported" && importedMarkdown != null;
+  const hasContent = hasImportedContent || hasEditorContent;
+  const getActiveContent = useCallback(() => {
+    if (templateSource === "imported" && importedMarkdown) {
+      return markdownToTiptap(importedMarkdown);
+    }
+    if (editorContent) {
+      return editorContent;
+    }
+    return markdownToTiptap(editorMarkdown);
+  }, [templateSource, importedMarkdown, editorContent, editorMarkdown]);
+  const handleFileImport = useCallback((file) => {
+    if (!file.name.endsWith(".md")) {
+      setValidationResult({
+        valid: false,
+        errors: ["Only .md files are supported"],
+        warnings: [],
+        variables: [],
+        fields: []
+      });
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const text = e.target?.result;
+      const result = validateMarkdown(text);
+      setValidationResult(result);
+      if (result.valid) {
+        setImportedMarkdown(text);
+        setImportedFileName(file.name);
+        setTemplateSource("imported");
+        const defaults = {};
+        for (const v of result.variables) {
+          defaults[v.varName] = v.varDefault || "";
+        }
+        setVariableValues(defaults);
+        setPreviewPages([]);
+      }
+    };
+    reader.readAsText(file);
+  }, []);
+  const handleCsvImport = useCallback(
+    (file) => {
+      if (!file.name.endsWith(".csv")) {
+        setBulkError("Only .csv files are supported");
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const text = e.target?.result;
+        try {
+          const rows = parseCsv(text);
+          if (rows.length === 0) {
+            setBulkError("CSV is empty or has no data rows");
+            setBulkData(null);
+            setCsvFileName(null);
+            return;
+          }
+          const csvHeaders = Object.keys(rows[0]);
+          const varNames = activeVariables.map((v) => v.varName);
+          const matchingHeaders = csvHeaders.filter((h) => varNames.includes(h));
+          if (matchingHeaders.length === 0) {
+            setBulkError(
+              `No CSV headers match variable names. Expected: ${varNames.join(", ")}. Got: ${csvHeaders.join(", ")}`
+            );
+            setBulkData(null);
+            setCsvFileName(null);
+            return;
+          }
+          setBulkData(rows);
+          setBulkError(null);
+          setCsvFileName(file.name);
+        } catch (err) {
+          setBulkError(`Failed to parse CSV file: ${getErrorMessage(err)}`);
+          setBulkData(null);
+          setCsvFileName(null);
+        }
+      };
+      reader.readAsText(file);
+    },
+    [activeVariables]
+  );
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        handleFileImport(files[0]);
+      }
+    },
+    [handleFileImport]
+  );
+  const handleCsvDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsCsvDragOver(true);
+  }, []);
+  const handleCsvDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsCsvDragOver(false);
+  }, []);
+  const handleCsvDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsCsvDragOver(false);
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        handleCsvImport(files[0]);
+      }
+    },
+    [handleCsvImport]
+  );
+  const clearImport = useCallback(() => {
+    setTemplateSource("editor");
+    setImportedMarkdown(null);
+    setImportedFileName(null);
+    setValidationResult(null);
+    setPreviewPages([]);
+    const defaults = {};
+    for (const v of editorVariables) {
+      defaults[v.varName] = v.varDefault || "";
+    }
+    setVariableValues(defaults);
+  }, [editorVariables]);
+  const updateVariableValue = useCallback((varName, value) => {
+    setVariableValues((prev) => ({ ...prev, [varName]: value }));
+  }, []);
+  const buildPositionedFields = useCallback(
+    (fields, positions) => fields.map((f) => {
+      const pos = positions.get(f.fieldId);
+      return {
+        id: f.name,
+        fieldId: f.fieldId,
+        type: f.type,
+        name: f.name,
+        label: f.label,
+        position: pos || { x: 0, y: 0, width: 0, height: 0, page: 1 },
+        required: f.required,
+        options: f.options,
+        placeholder: f.placeholder,
+        fontSize: f.fontSize,
+        defaultValue: f.defaultValue,
+        multiline: f.multiline,
+        maxLength: f.maxLength,
+        acknowledgements: f.acknowledgements
+      };
+    }),
+    []
+  );
+  const handlePreview = useCallback(async () => {
+    if (!hasContent) return;
+    setIsGenerating(true);
+    setPreviewError(null);
+    try {
+      const content = getActiveContent();
+      const replaced = replaceVariablesInContent(content, variableValues);
+      const fields = extractFieldsFromContent(replaced);
+      const result = await generatePdfFromContent(replaced);
+      const pages = await pdfToImages(result.pdfBytes);
+      setPreviewPages(pages);
+      setPreviewFields(buildPositionedFields(fields, result.fieldPositions));
+      setPreviewFresh(true);
+    } catch (err) {
+      console.error("Preview generation failed:", err);
+      setPreviewError(formatError("Preview generation failed", err));
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [getActiveContent, variableValues, hasContent, buildPositionedFields]);
+  const handleExportSingle = useCallback(async () => {
+    if (!hasContent) return;
+    setIsExporting(true);
+    setExportError(null);
+    setExportSuccess(null);
+    try {
+      const content = getActiveContent();
+      const replaced = replaceVariablesInContent(content, variableValues);
+      const fields = extractFieldsFromContent(replaced);
+      const result = await generatePdfFromContent(replaced, {
+        drawFieldPlaceholders: false,
+        embedFormFields: true,
+        fields
+      });
+      const blob = new Blob([result.pdfBytes], { type: "application/pdf" });
+      const fileName = importedFileName ? importedFileName.replace(".md", ".pdf") : "document.pdf";
+      if (onGeneratePdf) {
+        onGeneratePdf(blob, fileName);
+      } else {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = fileName;
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+      setExportSuccess(`Exported ${fileName} successfully`);
+      if (result.fieldWarnings && result.fieldWarnings.length > 0) {
+        setExportError(`PDF exported with warnings: ${result.fieldWarnings.join("; ")}`);
+      }
+    } catch (err) {
+      console.error("Export failed:", err);
+      setExportError(formatError("PDF export failed", err));
+    } finally {
+      setIsExporting(false);
+    }
+  }, [getActiveContent, variableValues, hasContent, onGeneratePdf, importedFileName]);
+  const parseBulkInput = useCallback(() => {
+    const result = parseJsonWithDetails(bulkInput);
+    if (!result.valid) {
+      setBulkError(result.message);
+      setBulkData(null);
+      return;
+    }
+    const parsed = result.data;
+    if (!Array.isArray(parsed)) {
+      setBulkError("Input must be a JSON array (wrap objects in [ ])");
+      setBulkData(null);
+      return;
+    }
+    if (parsed.length === 0) {
+      setBulkError("Array is empty \u2014 add at least one object");
+      setBulkData(null);
+      return;
+    }
+    for (let i = 0; i < parsed.length; i++) {
+      if (typeof parsed[i] !== "object" || parsed[i] === null) {
+        setBulkError(`Entry ${i + 1} is not a valid object \u2014 each array element must be a { } object`);
+        setBulkData(null);
+        return;
+      }
+    }
+    setBulkData(parsed);
+    setBulkError(null);
+  }, [bulkInput]);
+  const handleFormatJson = useCallback(() => {
+    const result = parseJsonWithDetails(bulkInput);
+    if (result.valid) {
+      setBulkInput(JSON.stringify(result.data, null, 2));
+      setBulkError(null);
+    } else {
+      setBulkError(result.message);
+    }
+  }, [bulkInput]);
+  const handleBulkGenerate = useCallback(async () => {
+    if (!bulkData || !hasContent) return;
+    setIsExporting(true);
+    setBulkError(null);
+    setExportSuccess(null);
+    try {
+      const JSZip = (await import('jszip')).default;
+      const zip = new JSZip();
+      const content = getActiveContent();
+      const baseFields = extractFieldsFromContent(content);
+      const allWarnings = [];
+      for (let i = 0; i < bulkData.length; i++) {
+        const values = bulkData[i];
+        const replaced = replaceVariablesInContent(content, values);
+        const fields = extractFieldsFromContent(replaced);
+        const result = await generatePdfFromContent(replaced, {
+          drawFieldPlaceholders: false,
+          embedFormFields: true,
+          fields: fields.length > 0 ? fields : baseFields
+        });
+        if (result.fieldWarnings) {
+          allWarnings.push(`Document ${i + 1}: ${result.fieldWarnings.join(", ")}`);
+        }
+        const fileName = `document_${i + 1}.pdf`;
+        zip.file(fileName, result.pdfBytes);
+      }
+      const zipBlob = await zip.generateAsync({ type: "blob" });
+      if (onGeneratePdf) {
+        onGeneratePdf(zipBlob, "documents.zip");
+      } else {
+        const url = URL.createObjectURL(zipBlob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "documents.zip";
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+      const count = bulkData.length;
+      setExportSuccess(`Generated ${count} PDF${count !== 1 ? "s" : ""} successfully`);
+      if (allWarnings.length > 0) {
+        setBulkError(`Generated with warnings:
+${allWarnings.join("\n")}`);
+      }
+    } catch (err) {
+      console.error("Bulk generation failed:", err);
+      setBulkError(formatError("Bulk generation failed", err));
+    } finally {
+      setIsExporting(false);
+    }
+  }, [bulkData, getActiveContent, hasContent, onGeneratePdf]);
+  const initialBulkJson = React12__default.useMemo(
+    () => initialBulkData && initialBulkData.length > 0 ? JSON.stringify(initialBulkData, null, 2) : "",
+    [initialBulkData]
+  );
+  const switchBulkFormat = useCallback((format) => {
+    setBulkInputFormat(format);
+    setBulkData(null);
+    setBulkError(null);
+    setCsvFileName(null);
+    setBulkInput(format === "json" ? initialBulkJson : "");
+  }, [initialBulkJson]);
+  useEffect(() => {
+    if (mode === "bulk" && bulkInputFormat === "json" && !bulkInput && initialBulkJson) {
+      setBulkInput(initialBulkJson);
+    }
+  }, [mode, bulkInputFormat, bulkInput, initialBulkJson]);
+  React12__default.useEffect(() => {
+    if (templateSource === "editor") {
+      const defaults = {};
+      for (const v of editorVariables) {
+        defaults[v.varName] = variableValues[v.varName] || v.varDefault || "";
+      }
+      setVariableValues(defaults);
+    }
+  }, [editorVariables, templateSource]);
+  useEffect(() => {
+    setPreviewFresh(false);
+  }, [variableValues, templateSource, importedMarkdown, editorMarkdown, editorContent]);
+  useEffect(() => {
+    if (exportSuccess) {
+      const timer = setTimeout(() => setExportSuccess(null), 3e3);
+      return () => clearTimeout(timer);
+    }
+  }, [exportSuccess]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 grid grid-cols-[1fr_1px_1fr]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Template" }),
+            templateSource === "imported" && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 text-xs",
+                onClick: clearImport,
+                children: [
+                  /* @__PURE__ */ jsx(X, { size: 12, className: "mr-1" }),
+                  "Clear"
+                ]
+              }
+            )
+          ] }),
+          templateSource === "editor" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            hasEditorContent && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 p-3 rounded-lg bg-muted/40 mb-2", children: [
+              /* @__PURE__ */ jsx(PenLine, { size: 14, className: "text-muted-foreground shrink-0 mt-0.5" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsxs("p", { children: [
+                  "Generating from the ",
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Editor tab" }),
+                  " content.",
+                  editorVariables.length > 0 ? ` ${editorVariables.length} variable${editorVariables.length !== 1 ? "s" : ""} detected.` : " No variables detected."
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "mt-0.5", children: "You can also import a different .md template below." })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "border-2 border-dashed rounded-lg p-5 text-center transition-colors cursor-pointer border-border hover:border-muted-foreground/50",
+                  isDragOver && "border-muted-foreground/50 bg-muted/30"
+                ),
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave,
+                onDrop: handleDrop,
+                onClick: () => fileInputRef.current?.click(),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Upload,
+                    {
+                      size: 20,
+                      className: "mx-auto mb-1.5 text-muted-foreground"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hasEditorContent ? "Import a different .md template" : "Drop .md file here or click to browse" }),
+                  !hasEditorContent && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground/70 mt-1", children: "Or add content in the Editor tab" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      type: "file",
+                      accept: ".md",
+                      className: "hidden",
+                      onChange: (e) => {
+                        const file = e.target.files?.[0];
+                        if (file) handleFileImport(file);
+                        e.target.value = "";
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg p-3 bg-muted/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              FileText,
+              {
+                size: 16,
+                className: "text-muted-foreground shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: importedFileName })
+          ] }) }),
+          validationResult && !validationResult.valid && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 rounded-md bg-destructive/10 border border-destructive/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              AlertTriangle,
+              {
+                size: 14,
+                className: "text-destructive shrink-0 mt-0.5"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-destructive space-y-0.5", children: validationResult.errors.map((err, i) => /* @__PURE__ */ jsx("p", { children: err }, i)) })
+          ] }) }),
+          validationResult?.valid && validationResult.warnings.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 rounded-md bg-orange-500/10 border border-orange-500/20", children: /* @__PURE__ */ jsx("div", { className: "text-xs text-orange-700 space-y-0.5", children: validationResult.warnings.map((warn, i) => /* @__PURE__ */ jsx("p", { children: warn }, i)) }) })
+        ] }),
+        !hasContent && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Braces, { size: 32, className: "mb-2 opacity-50" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "No template content" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: "Import a .md template above or add content in the Editor tab." })
+        ] }),
+        hasVariables && hasContent && /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-lg overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsx(
+            ToggleGroup,
+            {
+              value: mode,
+              onChange: setMode,
+              options: [
+                { value: "single", label: "Single" },
+                { value: "bulk", label: "Bulk" }
+              ]
+            }
+          ) }),
+          mode === "single" && /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Variables" }),
+            activeVariables.map((v) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `gen-${v.varName}`, className: "text-xs", children: v.varLabel || v.varName }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: `gen-${v.varName}`,
+                  value: variableValues[v.varName] || "",
+                  onChange: (e) => updateVariableValue(v.varName, e.target.value),
+                  placeholder: v.varDefault || `Enter ${v.varLabel || v.varName}`,
+                  className: "h-8 text-xs"
+                }
+              )
+            ] }, v.varName))
+          ] }),
+          mode === "bulk" && /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Bulk Data" }),
+              /* @__PURE__ */ jsx(
+                ToggleGroup,
+                {
+                  value: bulkInputFormat,
+                  onChange: switchBulkFormat,
+                  options: [
+                    { value: "json", label: "JSON" },
+                    { value: "csv", label: "CSV" }
+                  ],
+                  size: "sm"
+                }
+              )
+            ] }),
+            bulkInputFormat === "json" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "rounded-md border border-input bg-background overflow-hidden focus-within:ring-2 focus-within:ring-ring",
+                  style: { resize: "vertical" },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex h-64", style: { resize: "vertical", overflow: "hidden" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ref: jsonGutterRef,
+                          "aria-hidden": true,
+                          className: "shrink-0 py-2 pl-2 pr-1.5 text-xs font-mono text-muted-foreground/50 text-right select-none overflow-hidden border-r border-input bg-muted/30",
+                          style: { lineHeight: "1.35rem" },
+                          children: Array.from(
+                            { length: Math.max((bulkInput || "\n").split("\n").length, 1) },
+                            (_, i) => /* @__PURE__ */ jsx("div", { children: i + 1 }, i)
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "textarea",
+                        {
+                          value: bulkInput,
+                          onChange: (e) => {
+                            setBulkInput(e.target.value);
+                            updateJsonCursor(e.target);
+                          },
+                          onKeyUp: (e) => updateJsonCursor(e.target),
+                          onClick: (e) => updateJsonCursor(e.target),
+                          onScroll: (e) => {
+                            if (jsonGutterRef.current) {
+                              jsonGutterRef.current.scrollTop = e.target.scrollTop;
+                            }
+                          },
+                          placeholder: `[
+  { ${activeVariables.map((v) => `"${v.varName}": "..."`).join(", ")} },
+  ...
+]`,
+                          className: "flex-1 py-2 px-2.5 text-xs font-mono bg-transparent resize-none focus:outline-none overflow-y-auto",
+                          style: { lineHeight: "1.35rem" }
+                        }
+                      )
+                    ] }),
+                    bulkInput.trim() && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-2 py-0.5 border-t border-input bg-muted/30", children: /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-muted-foreground/60", children: [
+                      "Ln ",
+                      jsonCursor.line,
+                      ", Col ",
+                      jsonCursor.col
+                    ] }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "h-7 text-xs",
+                    onClick: handleFormatJson,
+                    disabled: !bulkInput.trim(),
+                    children: [
+                      /* @__PURE__ */ jsx(WrapText, { size: 12 }),
+                      "Format"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "h-7 text-xs",
+                    onClick: parseBulkInput,
+                    disabled: !bulkInput.trim(),
+                    children: "Parse JSON"
+                  }
+                )
+              ] })
+            ] }),
+            bulkInputFormat === "csv" && /* @__PURE__ */ jsx(Fragment, { children: !csvFileName ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors border-border hover:border-muted-foreground/50",
+                  isCsvDragOver && "border-muted-foreground/50 bg-muted/30"
+                ),
+                onClick: () => csvInputRef.current?.click(),
+                onDragOver: handleCsvDragOver,
+                onDragLeave: handleCsvDragLeave,
+                onDrop: handleCsvDrop,
+                children: [
+                  /* @__PURE__ */ jsx(Upload, { size: 18, className: "mx-auto mb-1.5 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Click to upload a .csv file" }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground/70 mt-1", children: [
+                    "First row must be headers matching variable names:",
+                    " ",
+                    activeVariables.map((v) => v.varName).join(", ")
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: csvInputRef,
+                      type: "file",
+                      accept: ".csv",
+                      className: "hidden",
+                      onChange: (e) => {
+                        const file = e.target.files?.[0];
+                        if (file) handleCsvImport(file);
+                        e.target.value = "";
+                      }
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2.5 border border-border rounded-lg bg-muted/20", children: [
+              /* @__PURE__ */ jsx(FileText, { size: 14, className: "text-muted-foreground shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium truncate flex-1", children: csvFileName }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-6 w-6 p-0",
+                  onClick: () => {
+                    setCsvFileName(null);
+                    setBulkData(null);
+                    setBulkError(null);
+                  },
+                  children: /* @__PURE__ */ jsx(X, { size: 12 })
+                }
+              )
+            ] }) }),
+            bulkError && /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-destructive/10 border border-destructive/20", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: bulkError }) }),
+            bulkData && /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-md overflow-auto max-h-48", children: [
+              /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border bg-muted/30", children: [
+                  /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left font-medium text-muted-foreground", children: "#" }),
+                  activeVariables.map((v) => /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      className: "px-2 py-1 text-left font-medium text-muted-foreground",
+                      children: v.varLabel || v.varName
+                    },
+                    v.varName
+                  ))
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: bulkData.map((row, i) => /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    className: "border-b border-border last:border-b-0",
+                    children: [
+                      /* @__PURE__ */ jsx("td", { className: "px-2 py-1 text-muted-foreground", children: i + 1 }),
+                      activeVariables.map((v) => /* @__PURE__ */ jsx("td", { className: "px-2 py-1", children: row[v.varName] || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "-" }) }, v.varName))
+                    ]
+                  },
+                  i
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 text-xs text-muted-foreground bg-muted/20 border-t border-border", children: [
+                bulkData.length,
+                " row",
+                bulkData.length !== 1 ? "s" : ""
+              ] })
+            ] })
+          ] })
+        ] }),
+        !hasVariables && hasContent && /* @__PURE__ */ jsx("div", { className: "p-3 rounded-md bg-muted/30 border border-border", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: 'This template has no variables. You can still preview and export the PDF as-is, or add variables in the Editor tab using the "Insert Variable" button.' }) })
+      ] }),
+      previewError && /* @__PURE__ */ jsx("div", { className: "px-4 pb-0", children: /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-destructive/10 border border-destructive/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "text-destructive shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: previewError })
+      ] }) }) }),
+      exportError && /* @__PURE__ */ jsx("div", { className: "px-4 pb-0", children: /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-destructive/10 border border-destructive/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "text-destructive shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: exportError })
+      ] }) }) }),
+      exportSuccess && /* @__PURE__ */ jsx("div", { className: "px-4 pb-0", children: /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-emerald-500/10 border border-emerald-500/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(CheckCircle2, { size: 14, className: "text-emerald-600 shrink-0" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-emerald-700", children: exportSuccess })
+      ] }) }) }),
+      hasContent && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3 flex items-center gap-2 bg-gradient-to-b from-background to-muted/20", children: mode === "single" || !hasVariables ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "secondary",
+            onClick: handlePreview,
+            disabled: isGenerating,
+            className: "h-10 px-4 font-semibold shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+            children: [
+              isGenerating ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, { size: 16 }),
+              isGenerating ? "Generating..." : "Generate PDF"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleExportSingle,
+            disabled: !previewFresh || isExporting,
+            className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+            children: [
+              isExporting ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(Download, { size: 16 }),
+              isExporting ? "Exporting..." : "Export PDF"
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: handleBulkGenerate,
+          disabled: isExporting || !bulkData || bulkData.length === 0,
+          className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg hover:shadow-xl transition-all duration-200 text-sm",
+          children: [
+            isExporting ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(Download, { size: 16 }),
+            isExporting ? "Generating..." : `Generate All (${bulkData?.length || 0} PDFs)`
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bg-border" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-0 min-w-0", children: /* @__PURE__ */ jsx(
+      PreviewPanel,
+      {
+        pages: previewPages,
+        isGenerating,
+        positionedFields: previewFields,
+        className: "flex-1 border-0 rounded-none"
+      }
+    ) })
+  ] });
+}
+
+// src/utils/theme-helpers.ts
+function parseThemeColor(color) {
+  if (!color || typeof color !== "string") {
+    return "#0099CD";
+  }
+  const trimmed = color.trim();
+  if (trimmed.startsWith("#") || trimmed.startsWith("rgb") || trimmed.startsWith("hsl") || trimmed.startsWith("oklch") || /^[a-z]+$/i.test(trimmed)) {
+    return trimmed;
+  }
+  return trimmed;
+}
+function getContrastColor(backgroundColor) {
+  if (typeof window === "undefined") {
+    return "#000000";
+  }
+  const tempDiv = document.createElement("div");
+  tempDiv.style.color = backgroundColor;
+  tempDiv.style.position = "absolute";
+  tempDiv.style.visibility = "hidden";
+  document.body.appendChild(tempDiv);
+  const computedColor = window.getComputedStyle(tempDiv).color;
+  document.body.removeChild(tempDiv);
+  const rgbMatch = computedColor.match(/\d+/g);
+  if (!rgbMatch || rgbMatch.length < 3) {
+    return "#000000";
+  }
+  const r = parseInt(rgbMatch[0], 10);
+  const g = parseInt(rgbMatch[1], 10);
+  const b = parseInt(rgbMatch[2], 10);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+function applyThemeColor(element, color, config) {
+  if (!element) return;
+  const parsedColor = parseThemeColor(color);
+  element.style.setProperty("--xpc-primary", parsedColor);
+  element.style.setProperty("--xpc-ring", parsedColor);
+  const primaryForeground = config?.primaryForeground || getContrastColor(parsedColor);
+  element.style.setProperty("--xpc-primary-foreground", primaryForeground);
+  if (config) {
+    Object.entries(config).forEach(([key, value]) => {
+      if (value) {
+        const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        element.style.setProperty(`--xpc-${cssKey}`, parseThemeColor(value));
+      }
+    });
+  }
+}
+function detectSystemTheme() {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return "light";
+  }
+  try {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } catch {
+    return "light";
+  }
+}
+function getEffectiveThemeMode(themeMode = "auto") {
+  if (themeMode === "auto") {
+    return detectSystemTheme();
+  }
+  return themeMode;
+}
+var ThemeContext = createContext(void 0);
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+function ThemeProvider({
+  themeMode: initialMode = "auto",
+  themeColor: initialColor = "#0099CD",
+  themeConfig,
+  rootElement,
+  children
+}) {
+  const [themeMode, setThemeModeState] = useState(initialMode);
+  const rootRef = useRef(rootElement || null);
+  const effectiveMode = useMemo(() => getEffectiveThemeMode(themeMode), [themeMode]);
+  useEffect(() => {
+    if (themeMode !== "auto") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => setThemeModeState("auto");
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, [themeMode]);
+  useEffect(() => {
+    const element = rootRef.current || document.querySelector(".signiphi-pdf-compose");
+    if (!element) return;
+    const htmlElement = element;
+    htmlElement.setAttribute("data-theme", effectiveMode);
+    applyThemeColor(htmlElement, initialColor, themeConfig);
+    if (effectiveMode === "dark") {
+      htmlElement.classList.add("dark");
+    } else {
+      htmlElement.classList.remove("dark");
+    }
+  }, [effectiveMode, initialColor, themeConfig]);
+  const setThemeMode = (mode) => setThemeModeState(mode);
+  const contextValue = useMemo(
+    () => ({
+      themeMode: effectiveMode,
+      originalMode: themeMode,
+      themeColor: parseThemeColor(initialColor),
+      themeConfig,
+      setThemeMode
+    }),
+    [effectiveMode, themeMode, initialColor, themeConfig]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+var ComposeErrorBoundary = class extends React12__default.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "handleReset", () => {
+      this.setState({ hasError: false, error: null });
+    });
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("pdf-compose render error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx("div", { className: this.props.fallbackClassName, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center gap-3", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { size: 32, className: "text-destructive" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Something went wrong" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: this.state.error?.message || "An unexpected error occurred in the document composer." })
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: this.handleReset, children: [
+          /* @__PURE__ */ jsx(RefreshCw, { size: 14 }),
+          "Try Again"
+        ] })
+      ] }) });
+    }
+    return this.props.children;
+  }
+};
+function DocumentGeneratorInner({
+  initialMarkdown,
+  initialContent,
+  onChange,
+  onExport,
+  readOnly = false,
+  className,
+  showPreview = true,
+  placeholder,
+  exportButtonText = "Export Document",
+  showToolbar = true,
+  showGenerateTab = true,
+  onGeneratePdf,
+  initialBulkData
+}) {
+  const {
+    editor,
+    fields,
+    variables,
+    positionedFields,
+    markdown,
+    pdfPages,
+    isGenerating,
+    error: generationError,
+    fieldWarnings,
+    insertField,
+    updateField,
+    deleteField,
+    insertVariable,
+    updateVariable,
+    deleteVariable,
+    generatePdf,
+    exportDocument,
+    exportMarkdown
+  } = useDocumentGenerator({
+    initialMarkdown,
+    initialContent,
+    placeholder,
+    onChange
+  });
+  const [activeTab, setActiveTab] = useState("editor");
+  const [insertPopoverOpen, setInsertPopoverOpen] = useState(false);
+  const [insertVarPopoverOpen, setInsertVarPopoverOpen] = useState(false);
+  const [editFieldId, setEditFieldId] = useState(null);
+  const [editFieldAttrs, setEditFieldAttrs] = useState(null);
+  const [editFieldAnchorEl, setEditFieldAnchorEl] = useState(null);
+  const [editVarName, setEditVarName] = useState(null);
+  const [editVarAttrs, setEditVarAttrs] = useState(null);
+  const [editVarAnchorEl, setEditVarAnchorEl] = useState(null);
+  const editorWrapperRef = useRef(null);
+  const [editorCollapsed, setEditorCollapsed] = useState(false);
+  const [mdExportError, setMdExportError] = useState(null);
+  const [exportSuccess, setExportSuccess] = useState(null);
+  useEffect(() => {
+    const handler = (e) => {
+      const detail = e.detail;
+      if (!detail?.fieldId || !editor) return;
+      let foundAttrs = null;
+      editor.state.doc.descendants((node) => {
+        if (node.type.name === "fieldNode" && node.attrs.fieldId === detail.fieldId) {
+          foundAttrs = node.attrs;
+          return false;
+        }
+      });
+      if (foundAttrs) {
+        setEditFieldId(detail.fieldId);
+        setEditFieldAttrs(foundAttrs);
+        setEditFieldAnchorEl(detail.anchorEl || editorWrapperRef.current);
+      }
+    };
+    window.addEventListener("signiphi:edit-field", handler);
+    return () => window.removeEventListener("signiphi:edit-field", handler);
+  }, [editor]);
+  useEffect(() => {
+    const handler = (e) => {
+      const detail = e.detail;
+      if (!detail?.varName || !editor) return;
+      let foundAttrs = null;
+      editor.state.doc.descendants((node) => {
+        if (node.type.name === "variableNode" && node.attrs.varName === detail.varName) {
+          foundAttrs = node.attrs;
+          return false;
+        }
+      });
+      if (foundAttrs) {
+        setEditVarName(detail.varName);
+        setEditVarAttrs(foundAttrs);
+        setEditVarAnchorEl(detail.anchorEl || editorWrapperRef.current);
+      }
+    };
+    window.addEventListener("signiphi:edit-variable", handler);
+    return () => window.removeEventListener("signiphi:edit-variable", handler);
+  }, [editor]);
+  const handleInsertField = useCallback(
+    (type, attrs) => {
+      insertField(type, attrs);
+    },
+    [insertField]
+  );
+  const handleInsertVariable = useCallback(
+    (attrs) => {
+      insertVariable(attrs);
+    },
+    [insertVariable]
+  );
+  const handleCloseFieldEditPopover = useCallback(() => {
+    setEditFieldId(null);
+    setEditFieldAttrs(null);
+    setEditFieldAnchorEl(null);
+  }, []);
+  const handleCloseVarEditPopover = useCallback(() => {
+    setEditVarName(null);
+    setEditVarAttrs(null);
+    setEditVarAnchorEl(null);
+  }, []);
+  const handleExport = useCallback(async () => {
+    setExportSuccess(null);
+    const result = await exportDocument();
+    if (result && onExport) {
+      onExport(result);
+      setExportSuccess("Document exported successfully");
+    }
+  }, [exportDocument, onExport]);
+  const handleExportMarkdown = useCallback(() => {
+    const md = exportMarkdown();
+    if (!md.trim()) {
+      setMdExportError("Editor content is empty");
+      return;
+    }
+    const validation = validateMarkdown(md);
+    if (!validation.valid) {
+      setMdExportError(validation.errors.join("; "));
+      return;
+    }
+    setMdExportError(null);
+    const blob = new Blob([md], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "template.md";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [exportMarkdown]);
+  useEffect(() => {
+    if (mdExportError) setMdExportError(null);
+  }, [markdown]);
+  useEffect(() => {
+    if (exportSuccess) {
+      const timer = setTimeout(() => setExportSuccess(null), 3e3);
+      return () => clearTimeout(timer);
+    }
+  }, [exportSuccess]);
+  const insertFieldButton = /* @__PURE__ */ jsx(
+    FieldInsertPopover,
+    {
+      open: insertPopoverOpen,
+      onOpenChange: setInsertPopoverOpen,
+      onInsert: handleInsertField,
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-8 gap-1.5 text-xs font-medium",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { size: 14 }),
+            "Insert Field"
+          ]
+        }
+      )
+    }
+  );
+  const insertVariableButton = /* @__PURE__ */ jsx(
+    VariableInsertPopover,
+    {
+      open: insertVarPopoverOpen,
+      onOpenChange: setInsertVarPopoverOpen,
+      onInsert: handleInsertVariable,
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-8 gap-1.5 text-xs font-medium",
+          children: [
+            /* @__PURE__ */ jsx(Braces, { size: 14 }),
+            "Insert Variable"
+          ]
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-compose-root": true, className: cn("signiphi-pdf-compose", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-border bg-background", children: [
+      showGenerateTab && /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          value: activeTab,
+          onChange: setActiveTab,
+          options: [
+            { value: "editor", label: "Editor" },
+            { value: "generate", label: "Generate" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        fields.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+          fields.length,
+          " field",
+          fields.length !== 1 ? "s" : ""
+        ] }),
+        variables.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+          variables.length,
+          " variable",
+          variables.length !== 1 ? "s" : ""
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex flex-col flex-1 min-h-0",
+      activeTab !== "editor" && "hidden"
+    ), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(
+        "flex-1 min-h-0",
+        showPreview && !editorCollapsed ? "grid grid-cols-[1fr_1px_1fr]" : "flex flex-col"
+      ), children: [
+        !editorCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0 min-w-0", children: [
+          showToolbar && !readOnly && /* @__PURE__ */ jsx("div", { className: "border-b border-border", children: /* @__PURE__ */ jsx(
+            EditorToolbar,
+            {
+              editor,
+              insertFieldButton,
+              insertVariableButton,
+              onCollapse: showPreview ? () => setEditorCollapsed(true) : void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { ref: editorWrapperRef, className: "flex-1 overflow-y-auto min-h-0", children: /* @__PURE__ */ jsx(
+            EditorContent,
+            {
+              editor,
+              className: "prose prose-sm max-w-none p-4 focus-within:outline-none"
+            }
+          ) })
+        ] }),
+        showPreview && !editorCollapsed && /* @__PURE__ */ jsx("div", { className: "bg-border" }),
+        showPreview && /* @__PURE__ */ jsx(
+          PreviewPanel,
+          {
+            pages: pdfPages,
+            isGenerating,
+            positionedFields,
+            headerLeft: editorCollapsed ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-8 w-8 p-0",
+                onClick: () => setEditorCollapsed(false),
+                children: /* @__PURE__ */ jsx(PanelLeftOpen, { size: 14 })
+              }
+            ) : void 0,
+            className: "flex-1 border-0 rounded-none"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border bg-gradient-to-b from-background to-muted/20", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "secondary",
+            onClick: generatePdf,
+            disabled: isGenerating || !editor,
+            className: "h-10 px-4 font-semibold shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+            children: [
+              isGenerating ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, { size: 16 }),
+              isGenerating ? "Generating..." : "Generate PDF"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+          mdExportError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-destructive max-w-[300px]", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: mdExportError })
+          ] }),
+          generationError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-destructive max-w-[300px]", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: generationError })
+          ] }),
+          fieldWarnings.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-orange-600 max-w-[400px]", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
+            /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+              fieldWarnings.length,
+              " field",
+              fieldWarnings.length !== 1 ? "s" : "",
+              " had warnings during generation"
+            ] })
+          ] }),
+          exportSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-emerald-600 max-w-[300px]", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { size: 14, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: exportSuccess })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: handleExportMarkdown,
+              disabled: !editor || !markdown.trim(),
+              className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+              children: [
+                /* @__PURE__ */ jsx(FileText, { size: 16 }),
+                "Export MD"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: handleExport,
+              disabled: isGenerating || !editor || pdfPages.length === 0,
+              className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+              children: [
+                /* @__PURE__ */ jsx(FileDown, { size: 16 }),
+                exportButtonText
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    showGenerateTab && activeTab === "generate" && /* @__PURE__ */ jsx(
+      GeneratePanel,
+      {
+        editorMarkdown: markdown,
+        editorContent: editor?.getJSON(),
+        editorVariables: variables,
+        onGeneratePdf,
+        initialBulkData
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FieldEditPopover,
+      {
+        fieldId: editFieldId,
+        attrs: editFieldAttrs,
+        anchorEl: editFieldAnchorEl,
+        onUpdate: updateField,
+        onDelete: deleteField,
+        onClose: handleCloseFieldEditPopover
+      },
+      editFieldId
+    ),
+    /* @__PURE__ */ jsx(
+      VariableEditPopover,
+      {
+        varName: editVarName,
+        attrs: editVarAttrs,
+        anchorEl: editVarAnchorEl,
+        onUpdate: updateVariable,
+        onDelete: deleteVariable,
+        onClose: handleCloseVarEditPopover
+      },
+      editVarName
+    )
+  ] });
+}
+function DocumentGenerator(props) {
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      themeColor: props.themeColor,
+      themeMode: props.themeMode,
+      themeConfig: props.themeConfig,
+      children: /* @__PURE__ */ jsx(ComposeErrorBoundary, { fallbackClassName: props.className, children: /* @__PURE__ */ jsx(DocumentGeneratorInner, { ...props }) })
+    }
+  );
+}
+function EditorPanel({
+  editor,
+  showToolbar = true,
+  readOnly = false,
+  className,
+  onInsertField,
+  onUpdateField,
+  onDeleteField
+}) {
+  const [insertPopoverOpen, setInsertPopoverOpen] = useState(false);
+  const [editFieldId, setEditFieldId] = useState(null);
+  const [editFieldAttrs, setEditFieldAttrs] = useState(null);
+  const [editAnchorEl, setEditAnchorEl] = useState(null);
+  const editorWrapperRef = useRef(null);
+  useEffect(() => {
+    const handler = (e) => {
+      const detail = e.detail;
+      if (!detail?.fieldId || !editor) return;
+      let foundAttrs = null;
+      editor.state.doc.descendants((node) => {
+        if (node.type.name === "fieldNode" && node.attrs.fieldId === detail.fieldId) {
+          foundAttrs = node.attrs;
+          return false;
+        }
+      });
+      if (foundAttrs) {
+        setEditFieldId(detail.fieldId);
+        setEditFieldAttrs(foundAttrs);
+        const fieldEl = editorWrapperRef.current?.querySelector(
+          `[data-field-node][data-field-id="${detail.fieldId}"], span[data-field-node]`
+        );
+        if (fieldEl) {
+          setEditAnchorEl(fieldEl);
+        } else {
+          setEditAnchorEl(editorWrapperRef.current);
+        }
+      }
+    };
+    window.addEventListener("signiphi:edit-field", handler);
+    return () => window.removeEventListener("signiphi:edit-field", handler);
+  }, [editor]);
+  const handleInsertField = useCallback(
+    (type, attrs) => {
+      onInsertField(type, attrs);
+    },
+    [onInsertField]
+  );
+  const handleCloseEditPopover = useCallback(() => {
+    setEditFieldId(null);
+    setEditFieldAttrs(null);
+    setEditAnchorEl(null);
+  }, []);
+  const insertFieldButton = /* @__PURE__ */ jsx(
+    FieldInsertPopover,
+    {
+      open: insertPopoverOpen,
+      onOpenChange: setInsertPopoverOpen,
+      onInsert: handleInsertField,
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-8 gap-1.5 text-xs font-medium",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { size: 14 }),
+            "Insert Field"
+          ]
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full border border-border rounded-lg overflow-hidden bg-background", className), children: [
+    showToolbar && !readOnly && /* @__PURE__ */ jsx(
+      EditorToolbar,
+      {
+        editor,
+        insertFieldButton
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ref: editorWrapperRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(
+      EditorContent,
+      {
+        editor,
+        className: "prose prose-sm max-w-none p-4 min-h-full focus-within:outline-none"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      FieldEditPopover,
+      {
+        fieldId: editFieldId,
+        attrs: editFieldAttrs,
+        anchorEl: editAnchorEl,
+        onUpdate: onUpdateField,
+        onDelete: onDeleteField,
+        onClose: handleCloseEditPopover
+      }
+    )
+  ] });
+}
+
+export { DocumentGenerator, EditorPanel, FormFieldType, PreviewPanel, ThemeProvider, useDocumentGenerator, useTheme };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map