@superdoc-dev/template-builder 1.2.0-next.1 → 1.2.0

package/README.md

@@ -12,7 +12,7 @@ npm install @superdoc-dev/template-builder
 
 ```jsx
 import SuperDocTemplateBuilder from '@superdoc-dev/template-builder';
-import 'superdoc/dist/style.css';
+import 'superdoc/style.css';
 
 function TemplateEditor() {
   return (
@@ -23,42 +23,30 @@ function TemplateEditor() {
       }}
       fields={{
         available: [
-          { id: '1324567890', label: 'Customer Name', category: 'Contact' },
-          { id: '1324567891', label: 'Invoice Date', category: 'Invoice' },
-          { id: '1324567892', label: 'Amount', category: 'Invoice' },
+          { id: '1324567890', label: 'Customer Name' },
+          { id: '1324567891', label: 'Invoice Date' },
+          { id: '1324567892', label: 'Signature', mode: 'block', fieldType: 'signer' },
         ],
       }}
-      onTrigger={(event) => {
-        console.log('User typed trigger at', event.position);
-      }}
       onFieldInsert={(field) => {
-        console.log('Field inserted:', field.alias);
+        console.log('Field inserted:', field.alias, field.fieldType);
       }}
     />
   );
 }
 ```
 
-## What You Receive
-
-```javascript
-{
-  fields: [
-    { id: "1324567890", alias: "Customer Name", tag: "contact" },
-    { id: "1324567891", alias: "Invoice Date", tag: "invoice" }
-  ],
-  document: { /* ProseMirror document JSON */ }
-}
-```
-
 ## Features
 
-- **🎯 Trigger Detection** - Type `{{` (customizable) to insert fields
-- **📝 Field Management** - Insert, update, delete, and navigate fields
-- **🔍 Field Discovery** - Automatically finds existing fields in documents
-- **🎨 UI Agnostic** - Bring your own menus, panels, and components
-- **📄 SDT Based** - Uses structured content tags for Word compatibility
-- **⚡ Simple API** - Clear callbacks for trigger events and field changes
+- **Trigger Detection** - Type `{{` (customizable) to insert fields
+- **Field Management** - Insert, update, delete, and navigate fields
+- **Field Discovery** - Automatically finds existing fields in documents
+- **Field Types** - Distinguish owner vs signer fields with visual styling
+- **Field Creation** - Allow users to create custom fields inline
+- **Linked Fields** - Insert copies of existing fields that share a group
+- **UI Agnostic** - Bring your own menus, panels, and components
+- **SDT Based** - Uses structured content tags for Word compatibility
+- **Export** - Download as `.docx` or get a Blob for API storage
 
 ## API
 
@@ -75,7 +63,8 @@ function TemplateEditor() {
   // Field configuration
   fields={{
     available: FieldDefinition[],  // Fields user can insert
-    initial: TemplateField[]       // Pre-existing fields
+    initial: TemplateField[],      // Pre-existing fields
+    allowCreate: boolean,          // Show "Create New Field" in menu
   }}
 
   // UI components (optional)
@@ -97,6 +86,9 @@ function TemplateEditor() {
   //   excludeItems: ['italic', 'bold'],
   // }}
 
+  // Content Security Policy nonce (optional)
+  cspNonce="abc123"
+
   // Telemetry (optional, enabled by default)
   telemetry={{ enabled: true, metadata: { source: 'template-builder' } }}
 
@@ -111,17 +103,19 @@ function TemplateEditor() {
   onFieldDelete={(fieldId) => {}}
   onFieldsChange={(fields) => {}}
   onFieldSelect={(field) => {}}
+  onFieldCreate={(field) => {}}     // Called when user creates a custom field
+  onExport={(event) => {}}          // Called after export with fields and blob
 />
 ```
 
 ### Ref Methods
 
 ```jsx
-const ref = useRef();
+const ref = useRef<SuperDocTemplateBuilderHandle>(null);
 
 // Insert fields
-ref.current.insertField({ alias: 'Customer Name' });
-ref.current.insertBlockField({ alias: 'Terms Block' });
+ref.current.insertField({ alias: 'Customer Name', fieldType: 'owner' });
+ref.current.insertBlockField({ alias: 'Signature', fieldType: 'signer' });
 
 // Update/delete fields
 ref.current.updateField(fieldId, { alias: 'New Name' });
@@ -129,27 +123,114 @@ ref.current.deleteField(fieldId);
 
 // Navigation
 ref.current.selectField(fieldId);
-ref.current.nextField(); // Tab behavior
-ref.current.previousField(); // Shift+Tab behavior
+ref.current.nextField();
+ref.current.previousField();
 
 // Get data
 const fields = ref.current.getFields();
-const template = await ref.current.exportTemplate();
+const blob = await ref.current.exportTemplate({ triggerDownload: false });
+
+// Access SuperDoc instance
+const superdoc = ref.current.getSuperDoc();
+```
+
+## Field Types
+
+Fields can have a `fieldType` property to distinguish between different roles (e.g. `'owner'` vs `'signer'`). This is stored in the SDT tag metadata and flows through the entire system.
+
+### Defining field types
+
+```jsx
+const availableFields = [
+  { id: '1', label: 'Company Name', fieldType: 'owner' },
+  { id: '2', label: 'Signer Name', fieldType: 'signer' },
+  { id: '3', label: 'Date' },  // defaults to 'owner'
+];
+```
+
+### Visual styling
+
+Import the optional CSS to color-code fields in the editor by type:
+
+```jsx
+import '@superdoc-dev/template-builder/field-types.css';
+```
+
+Customize colors via CSS variables:
+
+```css
+:root {
+  --superdoc-field-owner-color: #629be7;   /* default blue */
+  --superdoc-field-signer-color: #d97706;  /* default amber */
+}
+```
+
+### Accessing field type in callbacks
+
+All field callbacks include `fieldType`:
+
+```jsx
+onFieldInsert={(field) => {
+  console.log(field.fieldType); // 'owner' | 'signer' | ...
+}}
+
+onFieldsChange={(fields) => {
+  const signerFields = fields.filter(f => f.fieldType === 'signer');
+}}
 ```
 
+## Custom Field Creation
+
+Enable inline field creation in the dropdown menu:
+
+```jsx
+<SuperDocTemplateBuilder
+  fields={{
+    available: [...],
+    allowCreate: true,
+  }}
+  onFieldCreate={async (field) => {
+    // field.id starts with 'custom_'
+    // field.fieldType is 'owner' or 'signer' (user-selected)
+    const saved = await api.createField(field);
+    return { ...field, id: saved.id }; // return modified field or void
+  }}
+/>
+```
+
+The create form lets users pick inline/block mode and owner/signer field type.
+
+## Linked Fields (Groups)
+
+When a user selects an existing field from the menu, a linked copy is inserted. Linked fields share a group ID and stay in sync. The menu shows an "Existing Fields" section with grouped entries.
+
+When the last field in a group is deleted, the remaining field's group tag is automatically removed.
+
 ## Custom Components
 
 ### Field Menu
 
 ```jsx
-const CustomFieldMenu = ({ isVisible, position, availableFields, onSelect, onClose }) => {
+const CustomFieldMenu = ({
+  isVisible,
+  position,
+  availableFields,
+  filteredFields,     // filtered by typed query after {{
+  filterQuery,        // the query text
+  allowCreate,
+  existingFields,     // fields already in the document
+  onSelect,
+  onSelectExisting,
+  onClose,
+  onCreateField,
+}) => {
   if (!isVisible) return null;
 
   return (
     <div style={{ position: 'fixed', left: position?.left, top: position?.top }}>
-      {availableFields.map((field) => (
+      {filteredFields.map((field) => (
         <button key={field.id} onClick={() => onSelect(field)}>
-          {field.label}
+          {field.label} {field.fieldType && `(${field.fieldType})`}
         </button>
       ))}
       <button onClick={onClose}>Cancel</button>
@@ -169,9 +250,9 @@ const CustomFieldList = ({ fields, onSelect, onDelete, selectedFieldId }) => {
         <div
           key={field.id}
           onClick={() => onSelect(field)}
-          style={{ background: selectedFieldId === field.id ? '#blue' : '#gray' }}
+          style={{ background: selectedFieldId === field.id ? 'lightblue' : 'white' }}
         >
-          {field.alias}
+          {field.alias} {field.fieldType && `[${field.fieldType}]`}
           <button onClick={() => onDelete(field.id)}>Delete</button>
         </div>
       ))}
@@ -186,7 +267,7 @@ Enable Tab/Shift+Tab navigation:
 
 ```jsx
 function TemplateEditor() {
-  const ref = useRef();
+  const ref = useRef<SuperDocTemplateBuilderHandle>(null);
 
   const handleKeyDown = (e) => {
     if (e.key === 'Tab') {
@@ -209,66 +290,44 @@ function TemplateEditor() {
 
 ## Export Template
 
-The `exportTemplate` method supports two modes of operation via the `ExportConfig` interface:
-
-### 1. Download Mode (Default)
+The `exportTemplate` method supports two modes via `ExportConfig`:
 
-Automatically downloads the template as a file in the browser:
+### Download Mode (Default)
 
 ```jsx
-const handleDownload = async () => {
-  // Download with default filename "document.docx"
-  await ref.current?.exportTemplate();
-
-  // Or with custom filename
-  await ref.current?.exportTemplate({
-    fileName: 'invoice-template.docx',
-  });
-};
+await ref.current?.exportTemplate();
+await ref.current?.exportTemplate({ fileName: 'invoice-template' });
 ```
 
-### 2. Blob Mode (for Database/API)
-
-Get the template as a Blob for saving to your database or API:
+### Blob Mode (for Database/API)
 
 ```jsx
-const handleSave = async () => {
-  // Get the blob without triggering download
-  const blob = await ref.current?.exportTemplate({
-    fileName: 'invoice-template.docx',
-    triggerDownload: false,
-  });
-
-  if (blob) {
-    // Send to your API/database
-    const formData = new FormData();
-    formData.append('template', blob, 'invoice-template.docx');
-
-    await fetch('/api/templates', {
-      method: 'POST',
-      body: formData,
-    });
-  }
-};
+const blob = await ref.current?.exportTemplate({
+  fileName: 'invoice-template',
+  triggerDownload: false,
+});
+
+if (blob) {
+  const formData = new FormData();
+  formData.append('template', blob, 'invoice-template.docx');
+  await fetch('/api/templates', { method: 'POST', body: formData });
+}
 ```
 
-### ExportConfig Interface
+### onExport Callback
 
-```typescript
-interface ExportConfig {
-  fileName?: string;         // Default: "document"
-  triggerDownload?: boolean; // Default: true
-}
+Fires after every export with the field list and optional blob:
 
-// Method signature
-exportTemplate(config?: ExportConfig): Promise<void | Blob>
+```jsx
+<SuperDocTemplateBuilder
+  onExport={(event) => {
+    console.log(event.fields);    // TemplateField[]
+    console.log(event.fileName);  // string
+    console.log(event.blob);      // Blob | undefined (only in blob mode)
+  }}
+/>
 ```
 
-**Return value:**
-
-- `Promise<void>` when `triggerDownload: true` (download happens automatically)
-- `Promise<Blob>` when `triggerDownload: false` (returns the docx data)
-
 ## Telemetry
 
 Telemetry is enabled by default with `source: 'template-builder'` metadata. You can override or extend the configuration:
@@ -292,10 +351,11 @@ import type {
   FieldDefinition,
   TriggerEvent,
   ExportConfig,
+  ExportEvent,
+  FieldMenuProps,
+  FieldListProps,
   SuperDocTemplateBuilderHandle,
 } from '@superdoc-dev/template-builder';
-
-const ref = useRef<SuperDocTemplateBuilderHandle>(null);
 ```
 
 ## License

package/dist/defaults/InfoTooltip.d.ts

@@ -0,0 +1,3 @@
+export declare const InfoTooltip: React.FC<{
+    text: string;
+}>;

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require(`react`),t=require(`react/jsx-runtime`);const n=({isVisible:n,position:r,availableFields:i,filteredFields:a,filterQuery:o,allowCreate:s,onSelect:c,onClose:l,onCreateField:u,existingFields:d=[],onSelectExisting:f})=>{let[p,m]=(0,e.useState)(!1),[h,g]=(0,e.useState)(``),[_,v]=(0,e.useState)(`inline`),[y,b]=(0,e.useState)(!0),[x,S]=(0,e.useState)(!0);(0,e.useEffect)(()=>{n||(m(!1),g(``),v(`inline`))},[n]);let C=(0,e.useMemo)(()=>({position:`absolute`,left:r?.left,top:r?.top,zIndex:1e3,background:`white`,border:`1px solid #ddd`,borderRadius:`4px`,boxShadow:`0 2px 8px rgba(0,0,0,0.1)`,padding:`8px 0`,width:`280px`}),[r]),w=a??i,T=!!o;if((0,e.useEffect)(()=>{T&&S(!0)},[T]),!n)return null;let E=async()=>{let e=h.trim();if(!e)return;let t={id:`custom_${Date.now()}`,label:e,mode:_};try{c(u&&await u(t)||t)}finally{m(!1),g(``),v(`inline`)}};return(0,t.jsxs)(`div`,{className:`superdoc-field-menu`,style:C,children:[T&&(0,t.jsx)(`div`,{style:{padding:`8px 16px`,borderBottom:`1px solid #f0f0f0`,marginBottom:`4px`},children:(0,t.jsxs)(`div`,{style:{fontSize:`12px`,color:`#6b7280`},children:[`Filtering results for`,(0,t.jsx)(`span`,{style:{fontWeight:600,color:`#111827`,marginLeft:`4px`},children:o})]})}),s&&!p&&(0,t.jsx)(`div`,{className:`field-menu-item`,onClick:()=>m(!0),style:{padding:`8px 16px`,cursor:`pointer`,color:`#0066cc`,fontWeight:500},children:`+ Create New Field`}),s&&p&&(0,t.jsxs)(`div`,{style:{padding:`8px 16px`},children:[(0,t.jsx)(`input`,{type:`text`,value:h,placeholder:`Field name...`,onChange:e=>g(e.target.value),onKeyDown:e=>{e.key===`Enter`&&E(),e.key===`Escape`&&(m(!1),g(``),v(`inline`))},autoFocus:!0,style:{width:`100%`,padding:`4px 8px`,border:`1px solid #ddd`,borderRadius:`3px`}}),(0,t.jsxs)(`div`,{style:{marginTop:`8px`,display:`flex`,gap:`12px`,fontSize:`13px`},children:[(0,t.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`4px`,cursor:`pointer`},children:[(0,t.jsx)(`input`,{type:`radio`,value:`inline`,checked:_===`inline`,onChange:()=>v(`inline`)}),`Inline`]}),(0,t.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`4px`,cursor:`pointer`},children:[(0,t.jsx)(`input`,{type:`radio`,value:`block`,checked:_===`block`,onChange:()=>v(`block`)}),`Block`]})]}),(0,t.jsxs)(`div`,{style:{marginTop:`8px`,display:`flex`,gap:`8px`},children:[(0,t.jsx)(`button`,{onClick:E,disabled:!h.trim(),style:{padding:`4px 12px`,background:h.trim()?`#0066cc`:`#ccc`,color:`white`,border:`none`,borderRadius:`3px`,cursor:h.trim()?`pointer`:`not-allowed`},children:`Create`}),(0,t.jsx)(`button`,{onClick:()=>{m(!1),g(``),v(`inline`)},style:{padding:`4px 12px`,background:`white`,border:`1px solid #ddd`,borderRadius:`3px`,cursor:`pointer`},children:`Cancel`})]})]}),s&&i.length>0&&(0,t.jsx)(`div`,{style:{borderTop:`1px solid #eee`,margin:`4px 0`}}),d.length>0&&(()=>{let e=new Map;d.forEach(t=>{let n=t.group||`individual-${t.id}`,r=e.get(n)||[];r.push(t),e.set(n,r)});let n=Array.from(e.values()).map(e=>({...e[0],count:e.length}));return(0,t.jsxs)(`div`,{style:{borderBottom:`1px solid #f0f0f0`},children:[(0,t.jsxs)(`button`,{type:`button`,onClick:()=>b(!y),style:{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,padding:`8px 16px`,background:`transparent`,border:`none`,cursor:`pointer`,fontWeight:500,fontSize:`13px`,color:`#374151`,textAlign:`left`},children:[(0,t.jsxs)(`span`,{children:[`Existing Fields (`,n.length,`)`]}),(0,t.jsx)(`span`,{"aria-hidden":!0,style:{display:`inline-block`,width:`8px`,height:`8px`,borderRight:`2px solid #666`,borderBottom:`2px solid #666`,transform:y?`rotate(45deg)`:`rotate(-45deg)`,transition:`transform 0.2s ease`}})]}),y&&(0,t.jsx)(`div`,{style:{maxHeight:`300px`,overflowY:`auto`},children:n.map(e=>(0,t.jsxs)(`div`,{className:`field-menu-item`,onClick:()=>f?.(e),style:{padding:`8px 16px`,cursor:`pointer`,display:`flex`,alignItems:`flex-start`,justifyContent:`space-between`,gap:`8px`},children:[(0,t.jsxs)(`div`,{style:{flex:1,minWidth:0},children:[(0,t.jsx)(`div`,{style:{fontWeight:500,fontSize:`13px`},children:e.alias||e.id}),(0,t.jsx)(`div`,{style:{fontSize:`11px`,color:`#9ca3af`,marginTop:`2px`},children:e.group?`group (${e.count} fields)`:`ID: ${e.id}`})]}),(0,t.jsx)(`span`,{style:{fontSize:`11px`,color:`#6b7280`,padding:`2px 6px`,background:`#f3f4f6`,borderRadius:`3px`,textTransform:`capitalize`,flexShrink:0},children:e.mode||`inline`})]},e.group||e.id))})]})})(),w.length===0?(0,t.jsx)(`div`,{style:{padding:`16px`,fontSize:`13px`,color:`#6b7280`,textAlign:`center`},children:`No matching fields`}):(0,t.jsxs)(`div`,{style:{borderBottom:`1px solid #f0f0f0`},children:[(0,t.jsxs)(`button`,{type:`button`,onClick:()=>S(!x),style:{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,padding:`8px 16px`,background:`transparent`,border:`none`,cursor:`pointer`,fontWeight:500,fontSize:`13px`,color:`#374151`,textAlign:`left`},children:[(0,t.jsxs)(`span`,{children:[`Available Fields (`,w.length,`)`]}),(0,t.jsx)(`span`,{"aria-hidden":!0,style:{display:`inline-block`,width:`8px`,height:`8px`,borderRight:`2px solid #666`,borderBottom:`2px solid #666`,transform:x?`rotate(45deg)`:`rotate(-45deg)`,transition:`transform 0.2s ease`}})]}),x&&(0,t.jsx)(`div`,{style:{maxHeight:`300px`,overflowY:`auto`},children:w.map(e=>(0,t.jsxs)(`div`,{className:`field-menu-item`,onClick:()=>c(e),style:{padding:`8px 16px`,cursor:`pointer`,display:`flex`,alignItems:`flex-start`,justifyContent:`space-between`,gap:`8px`},children:[(0,t.jsxs)(`div`,{style:{flex:1,minWidth:0},children:[(0,t.jsx)(`div`,{style:{fontWeight:500,fontSize:`13px`},children:e.label||e.id}),(0,t.jsxs)(`div`,{style:{fontSize:`11px`,color:`#9ca3af`,marginTop:`2px`},children:[`ID: `,e.id]})]}),(0,t.jsx)(`span`,{style:{fontSize:`11px`,color:`#6b7280`,padding:`2px 6px`,background:`#f3f4f6`,borderRadius:`3px`,textTransform:`capitalize`,flexShrink:0},children:e.mode||`inline`})]},e.id))})]}),(0,t.jsx)(`div`,{style:{borderTop:`1px solid #eee`,marginTop:`4px`},children:(0,t.jsx)(`button`,{onClick:l,style:{width:`100%`,padding:`6px 16px`,background:`#f3f4f6`,border:`none`,borderRadius:`0 0 4px 4px`,cursor:`pointer`},children:`Close`})})]})};var r=e=>{let t=e.split(`-`);return t.length>2?t[t.length-1].substring(0,6):e.substring(0,6)},i=({field:e,onSelect:n,onDelete:r,isSelected:i,isGrouped:a=!1})=>(0,t.jsxs)(`div`,{onClick:()=>n(e),style:{position:`relative`,padding:`10px 12px`,background:i?`#eff6ff`:`#f9fafb`,border:i?`1px solid #3b82f6`:`1px solid #e5e7eb`,borderRadius:`6px`,cursor:`pointer`,transition:`all 0.2s`,fontSize:a?`13px`:`14px`},onMouseEnter:e=>{i||(e.currentTarget.style.background=`#f3f4f6`)},onMouseLeave:e=>{i||(e.currentTarget.style.background=`#f9fafb`)},title:e.alias,children:[(0,t.jsx)(`button`,{onClick:t=>{t.stopPropagation(),r(e.id)},style:{position:`absolute`,top:`6px`,right:`6px`,padding:`4px`,background:`transparent`,border:`none`,cursor:`pointer`,color:`#9ca3af`,transition:`color 0.2s`,display:`flex`,alignItems:`center`,justifyContent:`center`},onMouseEnter:e=>{e.currentTarget.style.color=`#ef4444`},onMouseLeave:e=>{e.currentTarget.style.color=`#9ca3af`},title:`Delete field`,children:(0,t.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,t.jsx)(`path`,{d:`M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),(0,t.jsxs)(`div`,{style:{paddingRight:`24px`},children:[(0,t.jsx)(`div`,{style:{fontWeight:`500`,fontSize:a?`12px`:`14px`,color:a?`#6b7280`:`#111827`},children:e.alias||e.id}),(0,t.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`6px`,fontSize:`11px`,color:`#9ca3af`,marginTop:`2px`},children:[(0,t.jsxs)(`span`,{children:[`ID: `,e.id]}),e.mode&&(0,t.jsx)(`span`,{style:{fontSize:`9px`,padding:`2px 5px`,borderRadius:`3px`,background:e.mode===`block`?`#dbeafe`:`#f3f4f6`,color:e.mode===`block`?`#1e40af`:`#4b5563`,fontWeight:`500`},children:e.mode})]})]})]});const a=({fields:n,onSelect:a,onDelete:o,selectedFieldId:s})=>{let[c,l]=(0,e.useState)(new Set),{groupedFields:u,ungroupedFields:d}=(0,e.useMemo)(()=>{let e={},t=[];return n.forEach(n=>{n.group?(e[n.group]||(e[n.group]=[]),e[n.group].push(n)):t.push(n)}),{groupedFields:e,ungroupedFields:t}},[n]),f=e=>{l(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})};return(0,t.jsxs)(`div`,{className:`superdoc-field-list`,style:{width:`250px`,background:`white`,border:`1px solid #e5e7eb`,borderRadius:`8px`,padding:`16px`},children:[(0,t.jsxs)(`h3`,{style:{margin:`0 0 16px 0`,fontSize:`16px`,fontWeight:`600`},children:[`Template Fields (`,n.length,`)`]}),n.length===0?(0,t.jsxs)(`div`,{style:{color:`#9ca3af`,fontSize:`14px`,textAlign:`center`,padding:`20px 0`},children:[`No fields yet. Type `,`{{`,` to add a field.`]}):(0,t.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`8px`},children:[d.map(e=>(0,t.jsx)(i,{field:e,onSelect:a,onDelete:o,isSelected:s===e.id},e.id)),Object.entries(u).map(([e,n])=>{let l=c.has(e),u=n[0];return(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`div`,{style:{position:`relative`,padding:`12px`,background:`#f9fafb`,border:`1px solid #e5e7eb`,borderRadius:`6px`,cursor:`pointer`,transition:`all 0.2s`},onClick:()=>f(e),onMouseEnter:e=>{e.currentTarget.style.background=`#f3f4f6`},onMouseLeave:e=>{e.currentTarget.style.background=`#f9fafb`},children:(0,t.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`},children:[(0,t.jsx)(`span`,{style:{fontSize:`12px`,color:`#6b7280`},children:l?`▼`:`▶`}),(0,t.jsxs)(`div`,{style:{flex:1},children:[(0,t.jsx)(`div`,{style:{fontWeight:`500`,fontSize:`14px`},children:u.alias}),(0,t.jsxs)(`div`,{style:{fontSize:`11px`,color:`#9ca3af`,marginTop:`2px`},children:[`group: `,r(e),` (`,n.length,` fields)`]})]})]})}),l&&(0,t.jsx)(`div`,{style:{marginLeft:`16px`,marginTop:`4px`,display:`flex`,flexDirection:`column`,gap:`4px`},children:n.map(e=>(0,t.jsx)(i,{field:e,onSelect:a,onDelete:o,isSelected:s===e.id,isGrouped:!0},e.id))})]},e)})]})]})};var o=e=>{let t=e.helpers?.structuredContentCommands;return t?.getStructuredContentTags?(t.getStructuredContentTags(e.state)||[]).map(e=>{let n=e?.node??e,r=n?.attrs??{},i=(n?.type?.name||``).includes(`Block`)?`block`:`inline`;return{id:r.id,alias:r.alias||r.label||``,tag:r.tag,mode:i,group:t.getGroup?.(r.tag)??void 0}}):[]},s=(e,t)=>{if(e===t)return!0;if(e.length!==t.length)return!1;for(let n=0;n<e.length;n+=1){let r=e[n],i=t[n];if(!i||r.id!==i.id||r.alias!==i.alias||r.tag!==i.tag||r.position!==i.position||r.mode!==i.mode||r.group!==i.group)return!1}return!0},c=e=>{if(!e)return null;if(e===!0)return{selector:`#superdoc-toolbar`,config:{},renderDefaultContainer:!0};if(typeof e==`string`)return{selector:e,config:{},renderDefaultContainer:!1};let{selector:t,...n}=e;return{selector:t||`#superdoc-toolbar`,config:n,renderDefaultContainer:t===void 0}},l=10,u=250,d=300,f=e=>{let t=window.innerWidth-u-l,n=window.innerHeight-d-l,r=Math.min(e.left,t),i=Math.min(e.top,n);return new DOMRect(Math.max(r,l),Math.max(i,l),e.width,e.height)},p=(0,e.forwardRef)((r,i)=>{let{document:l,fields:u={},menu:d={},list:p={},toolbar:m,cspNonce:h,telemetry:g,licenseKey:_,onReady:v,onTrigger:y,onFieldInsert:b,onFieldUpdate:x,onFieldDelete:S,onFieldsChange:C,onFieldSelect:w,onFieldCreate:T,onExport:E,className:ee,style:te,documentHeight:ne=`600px`}=r,[D,O]=(0,e.useState)(u.initial||[]),[k,A]=(0,e.useState)(null),[j,M]=(0,e.useState)(!1),[re,N]=(0,e.useState)(),[ie,ae]=(0,e.useState)(``),[oe,se]=(0,e.useState)(()=>u.available||[]),P=(0,e.useRef)(null),F=(0,e.useRef)(null),I=(0,e.useRef)(null),L=(0,e.useRef)(u);L.current=u;let R=(0,e.useRef)(null),z=(0,e.useRef)(j);(0,e.useEffect)(()=>{z.current=j},[j]);let B=d.trigger||`{{`,V=L.current.available||[],H=(0,e.useMemo)(()=>c(m),[m]),U=(0,e.useMemo)(()=>({enabled:g?.enabled??!0,metadata:{source:`template-builder`,...g?.metadata}}),[g?.enabled,JSON.stringify(g?.metadata)]),W=(0,e.useCallback)(e=>{let t=e.trim().toLowerCase();return t?V.filter(e=>e.label.toLowerCase().includes(t)):V},[V]),G=(0,e.useCallback)(e=>{ae(e),se(W(e))},[W]),K=(0,e.useCallback)(()=>{G(``)},[G]),q=(0,e.useCallback)((e,t)=>{if(!F.current?.activeEditor)return!1;let n=F.current.activeEditor,r=D,i=e===`inline`?n.commands.insertStructuredContentInline?.({attrs:{alias:t.alias,tag:t.metadata?JSON.stringify(t.metadata):void 0},text:t.defaultValue||t.alias}):n.commands.insertStructuredContentBlock?.({attrs:{alias:t.alias,tag:t.metadata?JSON.stringify(t.metadata):void 0},text:t.defaultValue||t.alias});if(i){let e=o(n);O(e),C?.(e);let t=e.find(e=>!r.some(t=>t.id===e.id));t&&b?.(t)}return i??!1},[b,C,D]),J=(0,e.useCallback)((e,t)=>{if(!F.current?.activeEditor)return!1;let n=F.current.activeEditor.commands.updateStructuredContentById?.(e,{attrs:t});return n&&O(n=>{let r=n.map(n=>n.id===e?{...n,...t}:n);C?.(r);let i=r.find(t=>t.id===e);return i&&x?.(i),r}),n??!1},[x,C]),Y=(0,e.useCallback)(e=>{let t=F.current?.activeEditor;if(!t){let t=!1;return O(n=>{if(!n.some(t=>t.id===e))return n;let r=n.filter(t=>t.id!==e);return t=!0,C?.(r),S?.(e),r}),t&&A(t=>t===e?null:t),t}let n=D.find(t=>t.id===e)?.group,r=!1;try{r=t.commands.deleteStructuredContentById?.(e)??!1}catch(t){console.warn(`[TemplateBuilder] Failed to delete structured content:`,e,t),r=!1}let i=o(t),a=i.some(t=>t.id===e);if(!r&&a&&(i=i.filter(t=>t.id!==e)),n){let e=i.filter(e=>e.group===n);if(e.length===1){let n=e[0];t.commands.updateStructuredContentById?.(n.id,{attrs:{tag:void 0}}),i=o(t)}}let c=!1;return O(t=>{if(s(t,i))return t;let n=t.some(t=>t.id===e),r=i.some(t=>t.id===e);return n&&!r&&(c=!0),C?.(i),c&&S?.(e),i}),c&&A(t=>t===e?null:t),r||c},[S,C,D]),X=(0,e.useCallback)(e=>{if(!F.current?.activeEditor)return;F.current.activeEditor.commands.selectStructuredContentById?.(e),A(e);let t=D.find(t=>t.id===e);t&&w?.(t)},[D,w]),Z=(0,e.useCallback)(e=>{if(!e)return;let t=o(e);O(e=>s(e,t)?e:(C?.(t),t))},[C]);(0,e.useEffect)(()=>{if(!P.current)return;let e=!1,t=null;return(async()=>{let{SuperDoc:n}=await import(`superdoc`);if(e)return;let r={comments:!1,...H&&{toolbar:{selector:H.selector,toolbarGroups:H.config.toolbarGroups||[`center`],excludeItems:H.config.excludeItems||[],...H.config}}},i=()=>{if(!e){if(t?.activeEditor){let e=t.activeEditor;e.on(`update`,({editor:e})=>{let{state:t}=e,{from:n}=t.selection;if(n>=B.length){let r=n-B.length;if(t.doc.textBetween(r,n)===B){let t=e.view.coordsAtPos(n),i=f(new DOMRect(t.left,t.top,0,0)),a=()=>{let e=F.current?.activeEditor;if(!e)return;let t=e.state.selection.from,n=e.state.tr.delete(r,t);e.view.dispatch(n)};I.current=a,R.current=n,N(i),M(!0),K(),y?.({position:{from:r,to:n},bounds:i,cleanup:a});return}}if(!z.current)return;if(R.current==null){M(!1),K();return}if(n<R.current){M(!1),R.current=null,K();return}G(t.doc.textBetween(R.current,n));let r=e.view.coordsAtPos(n);N(f(new DOMRect(r.left,r.top,0,0)))}),e.on(`update`,()=>{Z(e)}),Z(e)}v?.()}};t=new n({selector:P.current,document:l?.source,documentMode:l?.mode||`editing`,modules:r,toolbar:H?.selector,cspNonce:h,telemetry:U,..._&&{licenseKey:_},onReady:i}),F.current=t})(),()=>{e=!0,I.current=null,R.current=null,t&&typeof t.destroy==`function`&&t.destroy(),F.current=null}},[l?.source,l?.mode,B,Z,v,y,H,h,U,_]);let ce=(0,e.useCallback)(async e=>{I.current&&=(I.current(),null),R.current=null,K();let t=e.mode||`inline`;if(e.id.startsWith(`custom_`)&&T){let n=await T(e);if(n){q(n.mode||t,{alias:n.label,metadata:n.metadata,defaultValue:n.defaultValue}),M(!1);return}}q(t,{alias:e.label,metadata:e.metadata,defaultValue:e.defaultValue}),M(!1)},[q,T,K]),le=(0,e.useCallback)(e=>{I.current&&=(I.current(),null),R.current=null,K();let t=F.current?.activeEditor;if(!t)return;let n=t.helpers?.structuredContentCommands;if(!n)return;let r=e.group||`group-${Date.now()}-${Math.random().toString(36).substring(2,11)}`,i=n.createTagObject?.({group:r});if((e.mode||`inline`)===`inline`?t.commands.insertStructuredContentInline?.({attrs:{alias:e.alias,tag:i},text:e.alias}):t.commands.insertStructuredContentBlock?.({attrs:{alias:e.alias,tag:i},text:e.alias})){e.group||J(e.id,{tag:i}),M(!1);let n=o(t);O(n),C?.(n)}},[J,K,C]),ue=(0,e.useCallback)(()=>{M(!1),R.current=null,K(),I.current&&=(I.current(),null)},[K]),Q=(0,e.useCallback)(()=>{if(!F.current?.activeEditor||D.length===0)return;let e=D.findIndex(e=>e.id===k);X(D[e>=0?(e+1)%D.length:0].id)},[D,k,X]),de=(0,e.useCallback)(()=>{if(!F.current?.activeEditor||D.length===0)return;let e=D.findIndex(e=>e.id===k);X(D[e>0?e-1:D.length-1].id)},[D,k,X]),fe=(0,e.useCallback)(async e=>{let{fileName:t=`document`,triggerDownload:n=!0}=e||{},r=await F.current?.export({exportType:[`docx`],exportedName:t,triggerDownload:n}),i=F.current?.activeEditor;if(i){let e=o(i);E?.({fields:e,blob:n?void 0:r,fileName:t})}return r},[E]);(0,e.useImperativeHandle)(i,()=>({insertField:e=>q(`inline`,e),insertBlockField:e=>q(`block`,e),updateField:J,deleteField:Y,selectField:X,nextField:Q,previousField:de,getFields:()=>D,exportTemplate:fe,getSuperDoc:()=>F.current}));let pe=d.component||n,$=p.component||a;return(0,t.jsxs)(`div`,{className:`superdoc-template-builder ${ee||``}`,style:te,children:[(0,t.jsxs)(`div`,{style:{display:`flex`,gap:`20px`},children:[p.position===`left`&&(0,t.jsx)(`div`,{className:`superdoc-template-builder-sidebar`,children:(0,t.jsx)($,{fields:D,onSelect:e=>X(e.id),onDelete:Y,onUpdate:e=>J(e.id,e),selectedFieldId:k||void 0})}),(0,t.jsxs)(`div`,{className:`superdoc-template-builder-document`,style:{flex:1},children:[H?.renderDefaultContainer&&(0,t.jsx)(`div`,{id:`superdoc-toolbar`,className:`superdoc-template-builder-toolbar`,"data-testid":`template-builder-toolbar`}),(0,t.jsx)(`div`,{ref:P,className:`superdoc-template-builder-editor`,style:{height:ne},"data-testid":`template-builder-editor`})]}),p.position===`right`&&(0,t.jsx)(`div`,{className:`superdoc-template-builder-sidebar`,children:(0,t.jsx)($,{fields:D,onSelect:e=>X(e.id),onDelete:Y,onUpdate:e=>J(e.id,e),selectedFieldId:k||void 0})})]}),(0,t.jsx)(pe,{isVisible:j,position:re,availableFields:u.available||[],filteredFields:oe,filterQuery:ie,allowCreate:u.allowCreate||!1,onSelect:ce,onClose:ue,onCreateField:T,existingFields:D,onSelectExisting:le})]})});p.displayName=`SuperDocTemplateBuilder`;var m=p;exports.FieldList=a,exports.FieldMenu=n,exports.default=m;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require(`react`),t=require(`react/jsx-runtime`);const n=(e,t)=>{if(e===t)return!0;if(e.length!==t.length)return!1;for(let n=0;n<e.length;n+=1){let r=e[n],i=t[n];if(!i||r.id!==i.id||r.alias!==i.alias||r.tag!==i.tag||r.position!==i.position||r.mode!==i.mode||r.group!==i.group||r.fieldType!==i.fieldType)return!1}return!0},r=e=>{if(!e)return null;if(e===!0)return{selector:`#superdoc-toolbar`,config:{},renderDefaultContainer:!0};if(typeof e==`string`)return{selector:e,config:{},renderDefaultContainer:!1};let{selector:t,...n}=e;return{selector:t||`#superdoc-toolbar`,config:n,renderDefaultContainer:t===void 0}},i=e=>{let t=e?.superdocStore?.documents;return!Array.isArray(t)||t.length===0?null:t[0].getPresentationEditor?.()??null};var a={signer:{background:`#fef3c7`,color:`#b45309`}},o={background:`#f3f4f6`,color:`#6b7280`};const s=e=>a[e]??o,c=10,l=250,u=300,d=e=>{let t=window.innerWidth-250-10,n=window.innerHeight-300-10,r=Math.min(e.left,t),i=Math.min(e.top,n);return new DOMRect(Math.max(r,10),Math.max(i,10),e.width,e.height)},f=({text:n})=>{let[r,i]=(0,e.useState)(!1);return(0,t.jsxs)(`span`,{style:{position:`relative`,display:`inline-flex`},onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),onClick:e=>e.stopPropagation(),children:[(0,t.jsxs)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,style:{cursor:`help`,flexShrink:0},children:[(0,t.jsx)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`#9ca3af`,strokeWidth:`1.5`}),(0,t.jsx)(`text`,{x:`8`,y:`11.5`,textAnchor:`middle`,fontSize:`10`,fontWeight:`600`,fontFamily:`system-ui, sans-serif`,fill:`#6b7280`,children:`?`})]}),r&&(0,t.jsx)(`span`,{style:{position:`absolute`,bottom:`100%`,left:`50%`,transform:`translateX(-50%)`,marginBottom:`6px`,padding:`6px 10px`,background:`#1f2937`,color:`#fff`,fontSize:`11px`,lineHeight:`1.4`,borderRadius:`4px`,whiteSpace:`normal`,width:`200px`,textAlign:`center`,zIndex:1001,pointerEvents:`none`,fontWeight:400},children:n})]})},p=({isVisible:n,position:r,availableFields:i,filteredFields:a,filterQuery:o,allowCreate:c,onSelect:l,onClose:u,onCreateField:d,existingFields:p=[],onSelectExisting:m})=>{let[h,g]=(0,e.useState)(!1),[_,v]=(0,e.useState)(``),[y,b]=(0,e.useState)(`inline`),[x,S]=(0,e.useState)(`owner`),[C,w]=(0,e.useState)(!0),[T,E]=(0,e.useState)(!0);(0,e.useEffect)(()=>{n||(g(!1),v(``),b(`inline`),S(`owner`))},[n]);let D=(0,e.useMemo)(()=>({position:`fixed`,left:r?.left,top:r?.top,zIndex:1e3,background:`white`,border:`1px solid #ddd`,borderRadius:`4px`,boxShadow:`0 2px 8px rgba(0,0,0,0.1)`,padding:`8px 0`,width:`280px`,maxHeight:`calc(100vh - ${(r?.top??0)+10}px)`,overflowY:`auto`}),[r]),O=a??i,k=!!o;if((0,e.useEffect)(()=>{k&&E(!0)},[k]),!n)return null;let A=async()=>{let e=_.trim();if(!e)return;let t={id:`custom_${Date.now()}`,label:e,mode:y,fieldType:x};try{l(d&&await d(t)||t)}finally{g(!1),v(``),b(`inline`),S(`owner`)}};return(0,t.jsxs)(`div`,{className:`superdoc-field-menu`,style:D,children:[k&&(0,t.jsx)(`div`,{style:{padding:`8px 16px`,borderBottom:`1px solid #f0f0f0`,marginBottom:`4px`},children:(0,t.jsxs)(`div`,{style:{fontSize:`12px`,color:`#6b7280`},children:[`Filtering results for`,(0,t.jsx)(`span`,{style:{fontWeight:600,color:`#111827`,marginLeft:`4px`},children:o})]})}),c&&!h&&(0,t.jsx)(`div`,{className:`field-menu-item`,onClick:()=>g(!0),style:{padding:`8px 16px`,cursor:`pointer`,color:`#0066cc`,fontWeight:500},children:`+ Create New Field`}),c&&h&&(0,t.jsxs)(`div`,{style:{padding:`8px 16px`},children:[(0,t.jsx)(`input`,{type:`text`,value:_,placeholder:`Field name...`,onChange:e=>v(e.target.value),onKeyDown:e=>{e.key===`Enter`&&A(),e.key===`Escape`&&(g(!1),v(``),b(`inline`))},autoFocus:!0,style:{width:`100%`,padding:`4px 8px`,border:`1px solid #ddd`,borderRadius:`3px`}}),(0,t.jsxs)(`div`,{style:{marginTop:`8px`,display:`flex`,gap:`12px`,fontSize:`13px`},children:[(0,t.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`4px`,cursor:`pointer`},children:[(0,t.jsx)(`input`,{type:`radio`,name:`fieldMode`,value:`inline`,checked:y===`inline`,onChange:()=>b(`inline`)}),`Inline`]}),(0,t.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`4px`,cursor:`pointer`},children:[(0,t.jsx)(`input`,{type:`radio`,name:`fieldMode`,value:`block`,checked:y===`block`,onChange:()=>b(`block`)}),`Block`]})]}),(0,t.jsxs)(`div`,{style:{marginTop:`8px`,display:`flex`,gap:`12px`,fontSize:`13px`},children:[(0,t.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`4px`,cursor:`pointer`},children:[(0,t.jsx)(`input`,{type:`radio`,name:`fieldType`,value:`owner`,checked:x===`owner`,onChange:()=>S(`owner`)}),`Owner`]}),(0,t.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`4px`,cursor:`pointer`},children:[(0,t.jsx)(`input`,{type:`radio`,name:`fieldType`,value:`signer`,checked:x===`signer`,onChange:()=>S(`signer`)}),`Signer`]})]}),(0,t.jsxs)(`div`,{style:{marginTop:`8px`,display:`flex`,gap:`8px`},children:[(0,t.jsx)(`button`,{onClick:A,disabled:!_.trim(),style:{padding:`4px 12px`,background:_.trim()?`#0066cc`:`#ccc`,color:`white`,border:`none`,borderRadius:`3px`,cursor:_.trim()?`pointer`:`not-allowed`},children:`Create`}),(0,t.jsx)(`button`,{onClick:()=>{g(!1),v(``),b(`inline`),S(`owner`)},style:{padding:`4px 12px`,background:`white`,border:`1px solid #ddd`,borderRadius:`3px`,cursor:`pointer`},children:`Cancel`})]})]}),c&&i.length>0&&(0,t.jsx)(`div`,{style:{borderTop:`1px solid #eee`,margin:`4px 0`}}),p.length>0&&(()=>{let e=new Map;p.forEach(t=>{let n=t.group||`individual-${t.id}`,r=e.get(n)||[];r.push(t),e.set(n,r)});let n=Array.from(e.values()).map(e=>({...e[0],count:e.length}));return(0,t.jsxs)(`div`,{style:{borderBottom:`1px solid #f0f0f0`},children:[(0,t.jsxs)(`button`,{type:`button`,onClick:()=>w(!C),style:{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,padding:`8px 16px`,background:`transparent`,border:`none`,cursor:`pointer`,fontWeight:500,fontSize:`13px`,color:`#374151`,textAlign:`left`},children:[(0,t.jsxs)(`span`,{style:{display:`flex`,alignItems:`center`,gap:`4px`},children:[`Existing Fields (`,n.length,`)`,(0,t.jsx)(f,{text:`Insert a linked copy of a field already in the document. Linked fields share the same group and stay in sync.`})]}),(0,t.jsx)(`span`,{"aria-hidden":!0,style:{display:`inline-block`,width:`8px`,height:`8px`,borderRight:`2px solid #666`,borderBottom:`2px solid #666`,transform:C?`rotate(45deg)`:`rotate(-45deg)`,transition:`transform 0.2s ease`}})]}),C&&(0,t.jsx)(`div`,{children:n.map(e=>(0,t.jsxs)(`div`,{className:`field-menu-item`,onClick:()=>m?.(e),style:{padding:`8px 16px`,cursor:`pointer`,display:`flex`,alignItems:`flex-start`,justifyContent:`space-between`,gap:`8px`},children:[(0,t.jsxs)(`div`,{style:{flex:1,minWidth:0},children:[(0,t.jsx)(`div`,{style:{fontWeight:500,fontSize:`13px`},children:e.alias||e.id}),(0,t.jsx)(`div`,{style:{fontSize:`11px`,color:`#9ca3af`,marginTop:`2px`},children:e.group?`group (${e.count} fields)`:`ID: ${e.id}`})]}),(0,t.jsxs)(`div`,{style:{display:`flex`,gap:`4px`,flexShrink:0},children:[e.fieldType&&(0,t.jsx)(`span`,{style:{fontSize:`11px`,padding:`2px 6px`,borderRadius:`3px`,textTransform:`capitalize`,...s(e.fieldType),fontWeight:500},children:e.fieldType}),(0,t.jsx)(`span`,{style:{fontSize:`11px`,color:`#6b7280`,padding:`2px 6px`,background:`#f3f4f6`,borderRadius:`3px`,textTransform:`capitalize`},children:e.mode||`inline`})]})]},e.group||e.id))})]})})(),O.length===0?(0,t.jsx)(`div`,{style:{padding:`16px`,fontSize:`13px`,color:`#6b7280`,textAlign:`center`},children:`No matching fields`}):(0,t.jsxs)(`div`,{style:{borderBottom:`1px solid #f0f0f0`},children:[(0,t.jsxs)(`button`,{type:`button`,onClick:()=>E(!T),style:{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,padding:`8px 16px`,background:`transparent`,border:`none`,cursor:`pointer`,fontWeight:500,fontSize:`13px`,color:`#374151`,textAlign:`left`},children:[(0,t.jsxs)(`span`,{style:{display:`flex`,alignItems:`center`,gap:`4px`},children:[`Available Fields (`,O.length,`)`,(0,t.jsx)(f,{text:`Insert a new, independent field instance into the document.`})]}),(0,t.jsx)(`span`,{"aria-hidden":!0,style:{display:`inline-block`,width:`8px`,height:`8px`,borderRight:`2px solid #666`,borderBottom:`2px solid #666`,transform:T?`rotate(45deg)`:`rotate(-45deg)`,transition:`transform 0.2s ease`}})]}),T&&(0,t.jsx)(`div`,{children:O.map(e=>(0,t.jsxs)(`div`,{className:`field-menu-item`,onClick:()=>l(e),style:{padding:`8px 16px`,cursor:`pointer`,display:`flex`,alignItems:`flex-start`,justifyContent:`space-between`,gap:`8px`},children:[(0,t.jsxs)(`div`,{style:{flex:1,minWidth:0},children:[(0,t.jsx)(`div`,{style:{fontWeight:500,fontSize:`13px`},children:e.label||e.id}),(0,t.jsxs)(`div`,{style:{fontSize:`11px`,color:`#9ca3af`,marginTop:`2px`},children:[`ID: `,e.id]})]}),(0,t.jsxs)(`div`,{style:{display:`flex`,gap:`4px`,flexShrink:0},children:[e.fieldType&&(0,t.jsx)(`span`,{style:{fontSize:`11px`,padding:`2px 6px`,borderRadius:`3px`,textTransform:`capitalize`,...s(e.fieldType),fontWeight:500},children:e.fieldType}),(0,t.jsx)(`span`,{style:{fontSize:`11px`,color:`#6b7280`,padding:`2px 6px`,background:`#f3f4f6`,borderRadius:`3px`,textTransform:`capitalize`},children:e.mode||`inline`})]})]},e.id))})]}),(0,t.jsx)(`div`,{style:{borderTop:`1px solid #eee`,marginTop:`4px`},children:(0,t.jsx)(`button`,{onClick:u,style:{width:`100%`,padding:`6px 16px`,background:`#f3f4f6`,border:`none`,borderRadius:`0 0 4px 4px`,cursor:`pointer`},children:`Close`})})]})};var m=e=>{let t=e.split(`-`);return t.length>2?t[t.length-1].substring(0,6):e.substring(0,6)},h=({field:e,onSelect:n,onDelete:r,isSelected:i,isGrouped:a=!1})=>(0,t.jsxs)(`div`,{onClick:()=>n(e),style:{position:`relative`,padding:`10px 12px`,background:i?`#eff6ff`:`#f9fafb`,border:i?`1px solid #3b82f6`:`1px solid #e5e7eb`,borderRadius:`6px`,cursor:`pointer`,transition:`all 0.2s`,fontSize:a?`13px`:`14px`},onMouseEnter:e=>{i||(e.currentTarget.style.background=`#f3f4f6`)},onMouseLeave:e=>{i||(e.currentTarget.style.background=`#f9fafb`)},title:e.alias,children:[(0,t.jsx)(`button`,{onClick:t=>{t.stopPropagation(),r(e.id)},style:{position:`absolute`,top:`6px`,right:`6px`,padding:`4px`,background:`transparent`,border:`none`,cursor:`pointer`,color:`#9ca3af`,transition:`color 0.2s`,display:`flex`,alignItems:`center`,justifyContent:`center`},onMouseEnter:e=>{e.currentTarget.style.color=`#ef4444`},onMouseLeave:e=>{e.currentTarget.style.color=`#9ca3af`},title:`Delete field`,children:(0,t.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,t.jsx)(`path`,{d:`M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),(0,t.jsxs)(`div`,{style:{paddingRight:`24px`},children:[(0,t.jsx)(`div`,{style:{fontWeight:`500`,fontSize:a?`12px`:`14px`,color:a?`#6b7280`:`#111827`},children:e.alias||e.id}),(0,t.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`6px`,fontSize:`11px`,color:`#9ca3af`,marginTop:`2px`},children:[(0,t.jsxs)(`span`,{children:[`ID: `,e.id]}),e.mode&&(0,t.jsx)(`span`,{style:{fontSize:`9px`,padding:`2px 5px`,borderRadius:`3px`,background:e.mode===`block`?`#dbeafe`:`#f3f4f6`,color:e.mode===`block`?`#1e40af`:`#4b5563`,fontWeight:`500`},children:e.mode}),e.fieldType&&(0,t.jsx)(`span`,{style:{fontSize:`9px`,padding:`2px 5px`,borderRadius:`3px`,...s(e.fieldType),fontWeight:`500`},children:e.fieldType})]})]})]});const g=({fields:n,onSelect:r,onDelete:i,selectedFieldId:a})=>{let[o,s]=(0,e.useState)(new Set),{groupedFields:c,ungroupedFields:l}=(0,e.useMemo)(()=>{let e={},t=[];return n.forEach(n=>{n.group?(e[n.group]||(e[n.group]=[]),e[n.group].push(n)):t.push(n)}),{groupedFields:e,ungroupedFields:t}},[n]),u=e=>{s(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})};return(0,t.jsxs)(`div`,{className:`superdoc-field-list`,style:{width:`250px`,background:`white`,border:`1px solid #e5e7eb`,borderRadius:`8px`,padding:`16px`},children:[(0,t.jsxs)(`h3`,{style:{margin:`0 0 16px 0`,fontSize:`16px`,fontWeight:`600`},children:[`Template Fields (`,n.length,`)`]}),n.length===0?(0,t.jsxs)(`div`,{style:{color:`#9ca3af`,fontSize:`14px`,textAlign:`center`,padding:`20px 0`},children:[`No fields yet. Type `,`{{`,` to add a field.`]}):(0,t.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`8px`},children:[l.map(e=>(0,t.jsx)(h,{field:e,onSelect:r,onDelete:i,isSelected:a===e.id},e.id)),Object.entries(c).map(([e,n])=>{let s=o.has(e),c=n[0];return(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`div`,{style:{position:`relative`,padding:`12px`,background:`#f9fafb`,border:`1px solid #e5e7eb`,borderRadius:`6px`,cursor:`pointer`,transition:`all 0.2s`},onClick:()=>u(e),onMouseEnter:e=>{e.currentTarget.style.background=`#f3f4f6`},onMouseLeave:e=>{e.currentTarget.style.background=`#f9fafb`},children:(0,t.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`},children:[(0,t.jsx)(`span`,{style:{fontSize:`12px`,color:`#6b7280`},children:s?`▼`:`▶`}),(0,t.jsxs)(`div`,{style:{flex:1},children:[(0,t.jsx)(`div`,{style:{fontWeight:`500`,fontSize:`14px`},children:c.alias}),(0,t.jsxs)(`div`,{style:{fontSize:`11px`,color:`#9ca3af`,marginTop:`2px`},children:[`group: `,m(e),` (`,n.length,` fields)`]})]})]})}),s&&(0,t.jsx)(`div`,{style:{marginLeft:`16px`,marginTop:`4px`,display:`flex`,flexDirection:`column`,gap:`4px`},children:n.map(e=>(0,t.jsx)(h,{field:e,onSelect:r,onDelete:i,isSelected:a===e.id,isGrouped:!0},e.id))})]},e)})]})]})};var _=e=>{let t=e.helpers?.structuredContentCommands;return t?.getStructuredContentTags?(t.getStructuredContentTags(e.state)||[]).map(e=>{let n=e?.node??e,r=n?.attrs??{},i=(n?.type?.name||``).includes(`Block`)?`block`:`inline`,a=(()=>{try{return typeof r.tag==`string`&&r.tag.startsWith(`{`)?JSON.parse(r.tag):null}catch{return null}})();return{id:r.id,alias:r.alias||r.label||``,tag:r.tag,mode:i,group:t.getGroup?.(r.tag)??void 0,fieldType:a?.fieldType??`owner`}}):[]},v=(0,e.forwardRef)((a,o)=>{let{document:s,fields:c={},menu:l={},list:u={},toolbar:f,cspNonce:m,telemetry:h,licenseKey:v,onReady:y,onTrigger:b,onFieldInsert:x,onFieldUpdate:S,onFieldDelete:C,onFieldsChange:w,onFieldSelect:T,onFieldCreate:E,onExport:D,className:O,style:k,documentHeight:A=`600px`}=a,[j,M]=(0,e.useState)(c.initial||[]),[N,P]=(0,e.useState)(null),[F,I]=(0,e.useState)(!1),[ee,te]=(0,e.useState)(),[ne,re]=(0,e.useState)(``),[ie,ae]=(0,e.useState)(()=>c.available||[]),L=(0,e.useRef)(null),R=(0,e.useRef)(null),z=(0,e.useRef)(null),B=(0,e.useRef)(c);B.current=c;let V=(0,e.useRef)(null),oe=(0,e.useRef)(F);(0,e.useEffect)(()=>{oe.current=F},[F]);let H=l.trigger||`{{`,U=B.current.available||[],W=(0,e.useMemo)(()=>r(f),[f]),G=(0,e.useMemo)(()=>({enabled:h?.enabled??!0,metadata:{source:`template-builder`,...h?.metadata}}),[h?.enabled,JSON.stringify(h?.metadata)]),K=(0,e.useCallback)(e=>{let t=e.trim().toLowerCase();return t?U.filter(e=>e.label.toLowerCase().includes(t)):U},[U]),q=(0,e.useCallback)(e=>{re(e),ae(K(e))},[K]),J=(0,e.useCallback)(()=>{q(``)},[q]),Y=(0,e.useCallback)((e,t)=>{if(!R.current?.activeEditor)return!1;let n=R.current.activeEditor,r=j,i=t.metadata||t.fieldType?JSON.stringify({...t.metadata,...t.fieldType?{fieldType:t.fieldType}:{}}):void 0,a=e===`inline`?n.commands.insertStructuredContentInline?.({attrs:{alias:t.alias,tag:i},text:t.defaultValue||t.alias}):n.commands.insertStructuredContentBlock?.({attrs:{alias:t.alias,tag:i},text:t.defaultValue||t.alias});if(a){let e=_(n);M(e),w?.(e);let t=e.find(e=>!r.some(t=>t.id===e.id));t&&x?.(t)}return a??!1},[x,w,j]),X=(0,e.useCallback)((e,t)=>{if(!R.current?.activeEditor)return!1;let n=R.current.activeEditor.commands.updateStructuredContentById?.(e,{attrs:t});return n&&M(n=>{let r=n.map(n=>n.id===e?{...n,...t}:n);w?.(r);let i=r.find(t=>t.id===e);return i&&S?.(i),r}),n??!1},[S,w]),Z=(0,e.useCallback)(e=>{let t=R.current?.activeEditor;if(!t){let t=!1;return M(n=>{if(!n.some(t=>t.id===e))return n;let r=n.filter(t=>t.id!==e);return t=!0,w?.(r),C?.(e),r}),t&&P(t=>t===e?null:t),t}let r=j.find(t=>t.id===e)?.group,i=!1;try{i=t.commands.deleteStructuredContentById?.(e)??!1}catch(t){console.warn(`[TemplateBuilder] Failed to delete structured content:`,e,t),i=!1}let a=_(t),o=a.some(t=>t.id===e);if(!i&&o&&(a=a.filter(t=>t.id!==e)),r){let e=a.filter(e=>e.group===r);if(e.length===1){let n=e[0];t.commands.updateStructuredContentById?.(n.id,{attrs:{tag:void 0}}),a=_(t)}}let s=!1;return M(t=>{if(n(t,a))return t;let r=t.some(t=>t.id===e),i=a.some(t=>t.id===e);return r&&!i&&(s=!0),w?.(a),s&&C?.(e),a}),s&&P(t=>t===e?null:t),i||s},[C,w,j]),Q=(0,e.useCallback)(e=>{if(!R.current?.activeEditor)return;R.current.activeEditor.commands.selectStructuredContentById?.(e),P(e);let t=j.find(t=>t.id===e);t&&T?.(t)},[j,T]),$=(0,e.useCallback)(e=>{if(!e)return;let t=_(e);M(e=>n(e,t)?e:(w?.(t),t))},[w]);(0,e.useEffect)(()=>{if(!L.current)return;let e=!1,t=null;return(async()=>{let{SuperDoc:n}=await import(`superdoc`);if(e)return;let r={comments:!1,...W&&{toolbar:{selector:W.selector,toolbarGroups:W.config.toolbarGroups||[`center`],excludeItems:W.config.excludeItems||[],...W.config}}},a=()=>{if(!e){if(t?.activeEditor){let e=t.activeEditor,n=i(t);e.on(`update`,({editor:e})=>{let{state:t}=e,{from:r}=t.selection;if(r>=H.length){let i=r-H.length;if(t.doc.textBetween(i,r)===H){let t=n?.coordsAtPos(r)??e.view.coordsAtPos(r),a=d(new DOMRect(t.left,t.bottom??t.top,0,0)),o=()=>{let e=R.current?.activeEditor;if(!e)return;let t=e.state.selection.from,n=e.state.tr.delete(i,t);e.view.dispatch(n)};z.current=o,V.current=r,te(a),I(!0),J(),b?.({position:{from:i,to:r},bounds:a,cleanup:o});return}}if(!oe.current)return;if(V.current==null){I(!1),J();return}if(r<V.current){I(!1),V.current=null,J();return}q(t.doc.textBetween(V.current,r));let i=n?.coordsAtPos(r)??e.view.coordsAtPos(r);te(d(new DOMRect(i.left,i.bottom??i.top,0,0)))}),e.on(`update`,()=>{$(e)}),$(e)}y?.()}};t=new n({selector:L.current,document:s?.source,documentMode:s?.mode||`editing`,modules:r,toolbar:W?.selector,cspNonce:m,telemetry:G,...v&&{licenseKey:v},onReady:a}),R.current=t})(),()=>{e=!0,z.current=null,V.current=null,t&&typeof t.destroy==`function`&&t.destroy(),R.current=null}},[s?.source,s?.mode,H,$,y,b,W,m,G,v]);let se=(0,e.useCallback)(async e=>{z.current&&=(z.current(),null),V.current=null,J();let t=e.mode||`inline`;if(e.id.startsWith(`custom_`)&&E){let n=await E(e);if(n){Y(n.mode||t,{alias:n.label,metadata:n.metadata,defaultValue:n.defaultValue,fieldType:n.fieldType}),I(!1);return}}Y(t,{alias:e.label,metadata:e.metadata,defaultValue:e.defaultValue,fieldType:e.fieldType}),I(!1)},[Y,E,J]),ce=(0,e.useCallback)(e=>{z.current&&=(z.current(),null),V.current=null,J();let t=R.current?.activeEditor;if(!t)return;let n=t.helpers?.structuredContentCommands;if(!n)return;let r=e.group||`group-${Date.now()}-${Math.random().toString(36).substring(2,11)}`,i=n.createTagObject?.({group:r,...e.fieldType?{fieldType:e.fieldType}:{}});if((e.mode||`inline`)===`inline`?t.commands.insertStructuredContentInline?.({attrs:{alias:e.alias,tag:i},text:e.alias}):t.commands.insertStructuredContentBlock?.({attrs:{alias:e.alias,tag:i},text:e.alias})){e.group||X(e.id,{tag:i}),I(!1);let n=_(t);M(n),w?.(n)}},[X,J,w]),le=(0,e.useCallback)(()=>{I(!1),V.current=null,J(),z.current&&=(z.current(),null)},[J]),ue=(0,e.useCallback)(()=>{if(!R.current?.activeEditor||j.length===0)return;let e=j.findIndex(e=>e.id===N);Q(j[e>=0?(e+1)%j.length:0].id)},[j,N,Q]),de=(0,e.useCallback)(()=>{if(!R.current?.activeEditor||j.length===0)return;let e=j.findIndex(e=>e.id===N);Q(j[e>0?e-1:j.length-1].id)},[j,N,Q]),fe=(0,e.useCallback)(async e=>{let{fileName:t=`document`,triggerDownload:n=!0}=e||{},r=await R.current?.export({exportType:[`docx`],exportedName:t,triggerDownload:n}),i=R.current?.activeEditor;if(i){let e=_(i);D?.({fields:e,blob:n?void 0:r,fileName:t})}return r},[D]);(0,e.useImperativeHandle)(o,()=>({insertField:e=>Y(`inline`,e),insertBlockField:e=>Y(`block`,e),updateField:X,deleteField:Z,selectField:Q,nextField:ue,previousField:de,getFields:()=>j,exportTemplate:fe,getSuperDoc:()=>R.current}));let pe=l.component||p,me=u.component||g;return(0,t.jsxs)(`div`,{className:`superdoc-template-builder ${O||``}`,style:k,children:[(0,t.jsxs)(`div`,{style:{display:`flex`,gap:`20px`},children:[u.position===`left`&&(0,t.jsx)(`div`,{className:`superdoc-template-builder-sidebar`,children:(0,t.jsx)(me,{fields:j,onSelect:e=>Q(e.id),onDelete:Z,onUpdate:e=>X(e.id,e),selectedFieldId:N||void 0})}),(0,t.jsxs)(`div`,{className:`superdoc-template-builder-document`,style:{flex:1},children:[W?.renderDefaultContainer&&(0,t.jsx)(`div`,{id:`superdoc-toolbar`,className:`superdoc-template-builder-toolbar`,"data-testid":`template-builder-toolbar`}),(0,t.jsx)(`div`,{ref:L,className:`superdoc-template-builder-editor`,style:{height:A},"data-testid":`template-builder-editor`})]}),u.position===`right`&&(0,t.jsx)(`div`,{className:`superdoc-template-builder-sidebar`,children:(0,t.jsx)(me,{fields:j,onSelect:e=>Q(e.id),onDelete:Z,onUpdate:e=>X(e.id,e),selectedFieldId:N||void 0})})]}),(0,t.jsx)(pe,{isVisible:F,position:ee,availableFields:c.available||[],filteredFields:ie,filterQuery:ne,allowCreate:c.allowCreate||!1,onSelect:se,onClose:le,onCreateField:E,existingFields:j,onSelectExisting:ce})]})});v.displayName=`SuperDocTemplateBuilder`;var y=v;exports.FieldList=g,exports.FieldMenu=p,exports.default=y;