@superdoc-dev/template-builder 0.5.0 → 1.0.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAElD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAoGhC,QAAA,MAAM,uBAAuB,oJAolB3B,CAAC;AAIH,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAElD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAoGhC,QAAA,MAAM,uBAAuB,oJAymB3B,CAAC;AAIH,eAAe,uBAAuB,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";var De=Object.create;var ge=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var ze=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,We=Object.prototype.hasOwnProperty;var Le=(n,o,c,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let d of ze(o))!We.call(n,d)&&d!==c&&ge(n,d,{get:()=>o[d],enumerable:!(i=Ne(o,d))||i.enumerable});return n};var He=(n,o,c)=>(c=n!=null?De(Be(n)):{},Le(o||!n||!n.__esModule?ge(c,"default",{value:n,enumerable:!0}):c,n));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),ye=({isVisible:n,position:o,availableFields:c,filteredFields:i,filterQuery:d,allowCreate:u,onSelect:I,onClose:W,onCreateField:A,existingFields:f=[],onSelectExisting:S})=>{const[g,y]=r.useState(!1),[k,E]=r.useState(""),[$,L]=r.useState("inline"),[q,te]=r.useState(!0),[x,R]=r.useState(!0);r.useEffect(()=>{n||(y(!1),E(""),L("inline"))},[n]);const H=r.useMemo(()=>({position:"absolute",left:o?.left,top:o?.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"}),[o]),V=i??c,P=!!d;if(r.useEffect(()=>{P&&R(!0)},[P]),!n)return null;const M=async()=>{const m=k.trim();if(!m)return;const D={id:`custom_${Date.now()}`,label:m,mode:$};try{if(A){const h=await A(D);I(h||D)}else I(D)}finally{y(!1),E(""),L("inline")}};return e.jsxs("div",{className:"superdoc-field-menu",style:H,children:[P&&e.jsx("div",{style:{padding:"8px 16px",borderBottom:"1px solid #f0f0f0",marginBottom:"4px"},children:e.jsxs("div",{style:{fontSize:"12px",color:"#6b7280"},children:["Filtering results for",e.jsx("span",{style:{fontWeight:600,color:"#111827",marginLeft:"4px"},children:d})]})}),u&&!g&&e.jsx("div",{className:"field-menu-item",onClick:()=>y(!0),style:{padding:"8px 16px",cursor:"pointer",color:"#0066cc",fontWeight:500},children:"+ Create New Field"}),u&&g&&e.jsxs("div",{style:{padding:"8px 16px"},children:[e.jsx("input",{type:"text",value:k,placeholder:"Field name...",onChange:m=>E(m.target.value),onKeyDown:m=>{m.key==="Enter"&&M(),m.key==="Escape"&&(y(!1),E(""),L("inline"))},autoFocus:!0,style:{width:"100%",padding:"4px 8px",border:"1px solid #ddd",borderRadius:"3px"}}),e.jsxs("div",{style:{marginTop:"8px",display:"flex",gap:"12px",fontSize:"13px"},children:[e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"4px",cursor:"pointer"},children:[e.jsx("input",{type:"radio",value:"inline",checked:$==="inline",onChange:()=>L("inline")}),"Inline"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"4px",cursor:"pointer"},children:[e.jsx("input",{type:"radio",value:"block",checked:$==="block",onChange:()=>L("block")}),"Block"]})]}),e.jsxs("div",{style:{marginTop:"8px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:M,disabled:!k.trim(),style:{padding:"4px 12px",background:k.trim()?"#0066cc":"#ccc",color:"white",border:"none",borderRadius:"3px",cursor:k.trim()?"pointer":"not-allowed"},children:"Create"}),e.jsx("button",{onClick:()=>{y(!1),E(""),L("inline")},style:{padding:"4px 12px",background:"white",border:"1px solid #ddd",borderRadius:"3px",cursor:"pointer"},children:"Cancel"})]})]}),u&&c.length>0&&e.jsx("div",{style:{borderTop:"1px solid #eee",margin:"4px 0"}}),f.length>0&&(()=>{const m=new Map;f.forEach(h=>{const J=h.group||`individual-${h.id}`,Y=m.get(J)||[];Y.push(h),m.set(J,Y)});const D=Array.from(m.values()).map(h=>({...h[0],count:h.length}));return e.jsxs("div",{style:{borderBottom:"1px solid #f0f0f0"},children:[e.jsxs("button",{type:"button",onClick:()=>te(!q),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:[e.jsxs("span",{children:["Existing Fields (",D.length,")"]}),e.jsx("span",{"aria-hidden":!0,style:{display:"inline-block",width:"8px",height:"8px",borderRight:"2px solid #666",borderBottom:"2px solid #666",transform:q?"rotate(45deg)":"rotate(-45deg)",transition:"transform 0.2s ease"}})]}),q&&e.jsx("div",{style:{maxHeight:"300px",overflowY:"auto"},children:D.map(h=>e.jsxs("div",{className:"field-menu-item",onClick:()=>S?.(h),style:{padding:"8px 16px",cursor:"pointer",display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:"8px"},children:[e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontWeight:500,fontSize:"13px"},children:h.alias||h.id}),e.jsx("div",{style:{fontSize:"11px",color:"#9ca3af",marginTop:"2px"},children:h.group?`group (${h.count} fields)`:`ID: ${h.id}`})]}),e.jsx("span",{style:{fontSize:"11px",color:"#6b7280",padding:"2px 6px",background:"#f3f4f6",borderRadius:"3px",textTransform:"capitalize",flexShrink:0},children:h.mode||"inline"})]},h.group||h.id))})]})})(),V.length===0?e.jsx("div",{style:{padding:"16px",fontSize:"13px",color:"#6b7280",textAlign:"center"},children:"No matching fields"}):e.jsxs("div",{style:{borderBottom:"1px solid #f0f0f0"},children:[e.jsxs("button",{type:"button",onClick:()=>R(!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:[e.jsxs("span",{children:["Available Fields (",V.length,")"]}),e.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&&e.jsx("div",{style:{maxHeight:"300px",overflowY:"auto"},children:V.map(m=>e.jsxs("div",{className:"field-menu-item",onClick:()=>I(m),style:{padding:"8px 16px",cursor:"pointer",display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:"8px"},children:[e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontWeight:500,fontSize:"13px"},children:m.label||m.id}),e.jsxs("div",{style:{fontSize:"11px",color:"#9ca3af",marginTop:"2px"},children:["ID: ",m.id]})]}),e.jsx("span",{style:{fontSize:"11px",color:"#6b7280",padding:"2px 6px",background:"#f3f4f6",borderRadius:"3px",textTransform:"capitalize",flexShrink:0},children:m.mode||"inline"})]},m.id))})]}),e.jsx("div",{style:{borderTop:"1px solid #eee",marginTop:"4px"},children:e.jsx("button",{onClick:W,style:{width:"100%",padding:"6px 16px",background:"#f3f4f6",border:"none",borderRadius:"0 0 4px 4px",cursor:"pointer"},children:"Close"})})]})},Pe=n=>{const o=n.split("-");return o.length>2?o[o.length-1].substring(0,6):n.substring(0,6)},me=({field:n,onSelect:o,onDelete:c,isSelected:i,isGrouped:d=!1})=>e.jsxs("div",{onClick:()=>o(n),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:d?"13px":"14px"},onMouseEnter:u=>{i||(u.currentTarget.style.background="#f3f4f6")},onMouseLeave:u=>{i||(u.currentTarget.style.background="#f9fafb")},title:n.alias,children:[e.jsx("button",{onClick:u=>{u.stopPropagation(),c(n.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:u=>{u.currentTarget.style.color="#ef4444"},onMouseLeave:u=>{u.currentTarget.style.color="#9ca3af"},title:"Delete field",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.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"})})}),e.jsxs("div",{style:{paddingRight:"24px"},children:[e.jsx("div",{style:{fontWeight:"500",fontSize:d?"12px":"14px",color:d?"#6b7280":"#111827"},children:n.alias||n.id}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"6px",fontSize:"11px",color:"#9ca3af",marginTop:"2px"},children:[e.jsxs("span",{children:["ID: ",n.id]}),n.mode&&e.jsx("span",{style:{fontSize:"9px",padding:"2px 5px",borderRadius:"3px",background:n.mode==="block"?"#dbeafe":"#f3f4f6",color:n.mode==="block"?"#1e40af":"#4b5563",fontWeight:"500"},children:n.mode})]})]})]}),ve=({fields:n,onSelect:o,onDelete:c,selectedFieldId:i})=>{const[d,u]=r.useState(new Set),{groupedFields:I,ungroupedFields:W}=r.useMemo(()=>{const f={},S=[];return n.forEach(g=>{g.group?(f[g.group]||(f[g.group]=[]),f[g.group].push(g)):S.push(g)}),{groupedFields:f,ungroupedFields:S}},[n]),A=f=>{u(S=>{const g=new Set(S);return g.has(f)?g.delete(f):g.add(f),g})};return e.jsxs("div",{className:"superdoc-field-list",style:{width:"250px",background:"white",border:"1px solid #e5e7eb",borderRadius:"8px",padding:"16px"},children:[e.jsxs("h3",{style:{margin:"0 0 16px 0",fontSize:"16px",fontWeight:"600"},children:["Template Fields (",n.length,")"]}),n.length===0?e.jsxs("div",{style:{color:"#9ca3af",fontSize:"14px",textAlign:"center",padding:"20px 0"},children:["No fields yet. Type ","{{"," to add a field."]}):e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[W.map(f=>e.jsx(me,{field:f,onSelect:o,onDelete:c,isSelected:i===f.id},f.id)),Object.entries(I).map(([f,S])=>{const g=d.has(f),y=S[0];return e.jsxs("div",{children:[e.jsx("div",{style:{position:"relative",padding:"12px",background:"#f9fafb",border:"1px solid #e5e7eb",borderRadius:"6px",cursor:"pointer",transition:"all 0.2s"},onClick:()=>A(f),onMouseEnter:k=>{k.currentTarget.style.background="#f3f4f6"},onMouseLeave:k=>{k.currentTarget.style.background="#f9fafb"},children:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx("span",{style:{fontSize:"12px",color:"#6b7280"},children:g?"▼":"▶"}),e.jsxs("div",{style:{flex:1},children:[e.jsx("div",{style:{fontWeight:"500",fontSize:"14px"},children:y.alias}),e.jsxs("div",{style:{fontSize:"11px",color:"#9ca3af",marginTop:"2px"},children:["group: ",Pe(f)," (",S.length," fields)"]})]})]})}),g&&e.jsx("div",{style:{marginLeft:"16px",marginTop:"4px",display:"flex",flexDirection:"column",gap:"4px"},children:S.map(k=>e.jsx(me,{field:k,onSelect:o,onDelete:c,isSelected:i===k.id,isGrouped:!0},k.id))})]},f)})]})]})},U=n=>{const o=n.helpers?.structuredContentCommands;return o?.getStructuredContentTags?(o.getStructuredContentTags(n.state)||[]).map(i=>{const d=i?.node??i,u=d?.attrs??{},W=(d?.type?.name||"").includes("Block")?"block":"inline";return{id:u.id,alias:u.alias||u.label||"",tag:u.tag,mode:W,group:o.getGroup?.(u.tag)??void 0}}):[]},he=(n,o)=>{if(n===o)return!0;if(n.length!==o.length)return!1;for(let c=0;c<n.length;c+=1){const i=n[c],d=o[c];if(!d||i.id!==d.id||i.alias!==d.alias||i.tag!==d.tag||i.position!==d.position||i.mode!==d.mode||i.group!==d.group)return!1}return!0},Ae=n=>{if(!n)return null;if(n===!0)return{selector:"#superdoc-toolbar",config:{},renderDefaultContainer:!0};if(typeof n=="string")return{selector:n,config:{},renderDefaultContainer:!1};const{selector:o,...c}=n;return{selector:o||"#superdoc-toolbar",config:c,renderDefaultContainer:o===void 0}},ee=10,Ve=250,Oe=300,be=n=>{const o=window.innerWidth-Ve-ee,c=window.innerHeight-Oe-ee,i=Math.min(n.left,o),d=Math.min(n.top,c);return new DOMRect(Math.max(i,ee),Math.max(d,ee),n.width,n.height)},je=r.forwardRef((n,o)=>{const{document:c,fields:i={},menu:d={},list:u={},toolbar:I,onReady:W,onTrigger:A,onFieldInsert:f,onFieldUpdate:S,onFieldDelete:g,onFieldsChange:y,onFieldSelect:k,onFieldCreate:E,onExport:$,className:L,style:q,documentHeight:te="600px"}=n,[x,R]=r.useState(i.initial||[]),[H,V]=r.useState(null),[P,M]=r.useState(!1),[m,D]=r.useState(),[h,J]=r.useState(""),[Y,Ce]=r.useState(()=>i.available||[]),ne=r.useRef(null),C=r.useRef(null),T=r.useRef(null),ae=r.useRef(i);ae.current=i;const N=r.useRef(null),de=r.useRef(P);r.useEffect(()=>{de.current=P},[P]);const K=d.trigger||"{{",se=ae.current.available||[],ce=r.useCallback(t=>{const s=t.trim().toLowerCase();return s?se.filter(l=>l.label.toLowerCase().includes(s)):se},[se]),re=r.useCallback(t=>{J(t),Ce(ce(t))},[ce]),z=r.useCallback(()=>{re("")},[re]),Q=r.useCallback((t,s)=>{if(!C.current?.activeEditor)return!1;const l=C.current.activeEditor,v=x,b=t==="inline"?l.commands.insertStructuredContentInline?.({attrs:{alias:s.alias,tag:s.metadata?JSON.stringify(s.metadata):void 0},text:s.defaultValue||s.alias}):l.commands.insertStructuredContentBlock?.({attrs:{alias:s.alias,tag:s.metadata?JSON.stringify(s.metadata):void 0},text:s.defaultValue||s.alias});if(b){const p=U(l);R(p),y?.(p);const w=p.find(j=>!v.some(a=>a.id===j.id));w&&f?.(w)}return b},[f,y,x]),X=r.useCallback((t,s)=>{if(!C.current?.activeEditor)return!1;const v=C.current.activeEditor.commands.updateStructuredContentById?.(t,{attrs:s});return v&&R(b=>{const p=b.map(j=>j.id===t?{...j,...s}:j);y?.(p);const w=p.find(j=>j.id===t);return w&&S?.(w),p}),v},[S,y]),oe=r.useCallback(t=>{const s=C.current?.activeEditor;if(!s){let a=!1;return R(F=>{if(!F.some(B=>B.id===t))return F;const _=F.filter(B=>B.id!==t);return a=!0,y?.(_),_}),a&&(g?.(t),V(F=>F===t?null:F)),a}const v=x.find(a=>a.id===t)?.group;let b=!1;try{b=s.commands.deleteStructuredContentById?.(t)??!1}catch{b=!1}let p=U(s);const w=p.some(a=>a.id===t);if(!b&&w&&(p=p.filter(a=>a.id!==t)),v){const a=p.filter(F=>F.group===v);if(a.length===1){const F=a[0];s.commands.updateStructuredContentById?.(F.id,{attrs:{tag:void 0}}),p=U(s)}}let j=!1;return R(a=>{if(he(a,p))return a;const F=a.some(B=>B.id===t),_=p.some(B=>B.id===t);return F&&!_&&(j=!0),y?.(p),p}),j&&(g?.(t),V(a=>a===t?null:a)),b||j},[g,y,x]),O=r.useCallback(t=>{if(!C.current?.activeEditor)return;C.current.activeEditor.commands.selectStructuredContentById?.(t),V(t);const l=x.find(v=>v.id===t);l&&k?.(l)},[x,k]),ie=r.useCallback(t=>{if(!t)return;const s=U(t);R(l=>he(l,s)?l:(y?.(s),s))},[y]);r.useEffect(()=>ne.current?((async()=>{const{SuperDoc:s}=await import("superdoc"),l={comments:!1,...G&&{toolbar:{selector:G.selector,toolbarGroups:G.config.toolbarGroups||["center"],excludeItems:G.config.excludeItems||[],...G.config}}},v=()=>{if(b.activeEditor){const p=b.activeEditor;p.on("update",({editor:w})=>{const{state:j}=w,{from:a}=j.selection;if(a>=K.length){const le=a-K.length;if(j.doc.textBetween(le,a)===K){const pe=w.view.coordsAtPos(a),xe=be(new DOMRect(pe.left,pe.top,0,0)),fe=()=>{const Z=C.current?.activeEditor;if(!Z)return;const Ie=Z.state.selection.from,Re=Z.state.tr.delete(le,Ie);Z.view.dispatch(Re)};T.current=fe,N.current=a,D(xe),M(!0),z(),A?.({position:{from:le,to:a},bounds:xe,cleanup:fe});return}}if(!de.current)return;if(N.current==null){M(!1),z();return}if(a<N.current){M(!1),N.current=null,z();return}const F=j.doc.textBetween(N.current,a);re(F);const _=w.view.coordsAtPos(a),B=be(new DOMRect(_.left,_.top,0,0));D(B)}),p.on("update",()=>{ie(p)}),ie(p)}W?.()},b=new s({selector:ne.current,document:c?.source,documentMode:c?.mode||"editing",modules:l,toolbar:G?.selector,onReady:v});C.current=b})(),()=>{T.current=null,N.current=null;const s=C.current;s&&typeof s.destroy=="function"&&s.destroy(),C.current=null}):void 0,[c?.source,c?.mode,K,ie,W,A,I]);const ke=r.useCallback(async t=>{T.current&&(T.current(),T.current=null),N.current=null,z();const s=t.mode||"inline";if(t.id.startsWith("custom_")&&E){const l=await E(t);if(l){const v=l.mode||s;Q(v,{alias:l.label,metadata:l.metadata,defaultValue:l.defaultValue}),M(!1);return}}Q(s,{alias:t.label,metadata:t.metadata,defaultValue:t.defaultValue}),M(!1)},[Q,E,z]),Fe=r.useCallback(t=>{T.current&&(T.current(),T.current=null),N.current=null,z();const s=C.current?.activeEditor;if(!s)return;const l=s.helpers?.structuredContentCommands;if(!l)return;const v=t.group||`group-${Date.now()}-${Math.random().toString(36).substring(2,11)}`,b=l.createTagObject?.({group:v});if((t.mode||"inline")==="inline"?s.commands.insertStructuredContentInline?.({attrs:{alias:t.alias,tag:b},text:t.alias}):s.commands.insertStructuredContentBlock?.({attrs:{alias:t.alias,tag:b},text:t.alias})){t.group||X(t.id,{tag:b}),M(!1);const j=U(s);R(j),y?.(j)}},[X,z,y]),Se=r.useCallback(()=>{M(!1),N.current=null,z(),T.current&&(T.current(),T.current=null)},[z]),we=r.useCallback(()=>{if(!C.current?.activeEditor||x.length===0)return;const t=x.findIndex(l=>l.id===H),s=t>=0?(t+1)%x.length:0;O(x[s].id)},[x,H,O]),Te=r.useCallback(()=>{if(!C.current?.activeEditor||x.length===0)return;const t=x.findIndex(l=>l.id===H),s=t>0?t-1:x.length-1;O(x[s].id)},[x,H,O]),Ee=r.useCallback(async t=>{const{fileName:s="document",triggerDownload:l=!0}=t||{},v=await C.current?.export({exportType:["docx"],exportedName:s,triggerDownload:l}),b=C.current?.activeEditor;if(b){const p=U(b);$?.({fields:p,blob:l?void 0:v,fileName:s})}return v},[$]);r.useImperativeHandle(o,()=>({insertField:t=>Q("inline",t),insertBlockField:t=>Q("block",t),updateField:X,deleteField:oe,selectField:O,nextField:we,previousField:Te,getFields:()=>x,exportTemplate:Ee,getSuperDoc:()=>C.current}));const Me=d.component||ye,ue=u.component||ve,G=Ae(I);return e.jsxs("div",{className:`superdoc-template-builder ${L||""}`,style:q,children:[e.jsxs("div",{style:{display:"flex",gap:"20px"},children:[u.position==="left"&&e.jsx("div",{className:"superdoc-template-builder-sidebar",children:e.jsx(ue,{fields:x,onSelect:t=>O(t.id),onDelete:oe,onUpdate:t=>X(t.id,t),selectedFieldId:H||void 0})}),e.jsxs("div",{className:"superdoc-template-builder-document",style:{flex:1},children:[G?.renderDefaultContainer&&e.jsx("div",{id:"superdoc-toolbar",className:"superdoc-template-builder-toolbar","data-testid":"template-builder-toolbar"}),e.jsx("div",{ref:ne,className:"superdoc-template-builder-editor",style:{height:te},"data-testid":"template-builder-editor"})]}),u.position==="right"&&e.jsx("div",{className:"superdoc-template-builder-sidebar",children:e.jsx(ue,{fields:x,onSelect:t=>O(t.id),onDelete:oe,onUpdate:t=>X(t.id,t),selectedFieldId:H||void 0})})]}),e.jsx(Me,{isVisible:P,position:m,availableFields:i.available||[],filteredFields:Y,filterQuery:h,allowCreate:i.allowCreate||!1,onSelect:ke,onClose:Se,onCreateField:E,existingFields:x,onSelectExisting:Fe})]})});je.displayName="SuperDocTemplateBuilder";exports.FieldList=ve;exports.FieldMenu=ye;exports.default=je;
+"use strict";var Ne=Object.create;var ge=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var Be=Object.getOwnPropertyNames;var We=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var He=(n,o,d,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of Be(o))!Le.call(n,l)&&l!==d&&ge(n,l,{get:()=>o[l],enumerable:!(i=ze(o,l))||i.enumerable});return n};var Pe=(n,o,d)=>(d=n!=null?Ne(We(n)):{},He(o||!n||!n.__esModule?ge(d,"default",{value:n,enumerable:!0}):d,n));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("react"),ye=({isVisible:n,position:o,availableFields:d,filteredFields:i,filterQuery:l,allowCreate:c,onSelect:R,onClose:W,onCreateField:V,existingFields:x=[],onSelectExisting:w})=>{const[m,y]=s.useState(!1),[k,E]=s.useState(""),[_,L]=s.useState("inline"),[q,te]=s.useState(!0),[p,D]=s.useState(!0);s.useEffect(()=>{n||(y(!1),E(""),L("inline"))},[n]);const H=s.useMemo(()=>({position:"absolute",left:o?.left,top:o?.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"}),[o]),O=i??d,P=!!l;if(s.useEffect(()=>{P&&D(!0)},[P]),!n)return null;const M=async()=>{const h=k.trim();if(!h)return;const N={id:`custom_${Date.now()}`,label:h,mode:_};try{if(V){const b=await V(N);R(b||N)}else R(N)}finally{y(!1),E(""),L("inline")}};return t.jsxs("div",{className:"superdoc-field-menu",style:H,children:[P&&t.jsx("div",{style:{padding:"8px 16px",borderBottom:"1px solid #f0f0f0",marginBottom:"4px"},children:t.jsxs("div",{style:{fontSize:"12px",color:"#6b7280"},children:["Filtering results for",t.jsx("span",{style:{fontWeight:600,color:"#111827",marginLeft:"4px"},children:l})]})}),c&&!m&&t.jsx("div",{className:"field-menu-item",onClick:()=>y(!0),style:{padding:"8px 16px",cursor:"pointer",color:"#0066cc",fontWeight:500},children:"+ Create New Field"}),c&&m&&t.jsxs("div",{style:{padding:"8px 16px"},children:[t.jsx("input",{type:"text",value:k,placeholder:"Field name...",onChange:h=>E(h.target.value),onKeyDown:h=>{h.key==="Enter"&&M(),h.key==="Escape"&&(y(!1),E(""),L("inline"))},autoFocus:!0,style:{width:"100%",padding:"4px 8px",border:"1px solid #ddd",borderRadius:"3px"}}),t.jsxs("div",{style:{marginTop:"8px",display:"flex",gap:"12px",fontSize:"13px"},children:[t.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"4px",cursor:"pointer"},children:[t.jsx("input",{type:"radio",value:"inline",checked:_==="inline",onChange:()=>L("inline")}),"Inline"]}),t.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"4px",cursor:"pointer"},children:[t.jsx("input",{type:"radio",value:"block",checked:_==="block",onChange:()=>L("block")}),"Block"]})]}),t.jsxs("div",{style:{marginTop:"8px",display:"flex",gap:"8px"},children:[t.jsx("button",{onClick:M,disabled:!k.trim(),style:{padding:"4px 12px",background:k.trim()?"#0066cc":"#ccc",color:"white",border:"none",borderRadius:"3px",cursor:k.trim()?"pointer":"not-allowed"},children:"Create"}),t.jsx("button",{onClick:()=>{y(!1),E(""),L("inline")},style:{padding:"4px 12px",background:"white",border:"1px solid #ddd",borderRadius:"3px",cursor:"pointer"},children:"Cancel"})]})]}),c&&d.length>0&&t.jsx("div",{style:{borderTop:"1px solid #eee",margin:"4px 0"}}),x.length>0&&(()=>{const h=new Map;x.forEach(b=>{const J=b.group||`individual-${b.id}`,Y=h.get(J)||[];Y.push(b),h.set(J,Y)});const N=Array.from(h.values()).map(b=>({...b[0],count:b.length}));return t.jsxs("div",{style:{borderBottom:"1px solid #f0f0f0"},children:[t.jsxs("button",{type:"button",onClick:()=>te(!q),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:[t.jsxs("span",{children:["Existing Fields (",N.length,")"]}),t.jsx("span",{"aria-hidden":!0,style:{display:"inline-block",width:"8px",height:"8px",borderRight:"2px solid #666",borderBottom:"2px solid #666",transform:q?"rotate(45deg)":"rotate(-45deg)",transition:"transform 0.2s ease"}})]}),q&&t.jsx("div",{style:{maxHeight:"300px",overflowY:"auto"},children:N.map(b=>t.jsxs("div",{className:"field-menu-item",onClick:()=>w?.(b),style:{padding:"8px 16px",cursor:"pointer",display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:"8px"},children:[t.jsxs("div",{style:{flex:1,minWidth:0},children:[t.jsx("div",{style:{fontWeight:500,fontSize:"13px"},children:b.alias||b.id}),t.jsx("div",{style:{fontSize:"11px",color:"#9ca3af",marginTop:"2px"},children:b.group?`group (${b.count} fields)`:`ID: ${b.id}`})]}),t.jsx("span",{style:{fontSize:"11px",color:"#6b7280",padding:"2px 6px",background:"#f3f4f6",borderRadius:"3px",textTransform:"capitalize",flexShrink:0},children:b.mode||"inline"})]},b.group||b.id))})]})})(),O.length===0?t.jsx("div",{style:{padding:"16px",fontSize:"13px",color:"#6b7280",textAlign:"center"},children:"No matching fields"}):t.jsxs("div",{style:{borderBottom:"1px solid #f0f0f0"},children:[t.jsxs("button",{type:"button",onClick:()=>D(!p),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:[t.jsxs("span",{children:["Available Fields (",O.length,")"]}),t.jsx("span",{"aria-hidden":!0,style:{display:"inline-block",width:"8px",height:"8px",borderRight:"2px solid #666",borderBottom:"2px solid #666",transform:p?"rotate(45deg)":"rotate(-45deg)",transition:"transform 0.2s ease"}})]}),p&&t.jsx("div",{style:{maxHeight:"300px",overflowY:"auto"},children:O.map(h=>t.jsxs("div",{className:"field-menu-item",onClick:()=>R(h),style:{padding:"8px 16px",cursor:"pointer",display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:"8px"},children:[t.jsxs("div",{style:{flex:1,minWidth:0},children:[t.jsx("div",{style:{fontWeight:500,fontSize:"13px"},children:h.label||h.id}),t.jsxs("div",{style:{fontSize:"11px",color:"#9ca3af",marginTop:"2px"},children:["ID: ",h.id]})]}),t.jsx("span",{style:{fontSize:"11px",color:"#6b7280",padding:"2px 6px",background:"#f3f4f6",borderRadius:"3px",textTransform:"capitalize",flexShrink:0},children:h.mode||"inline"})]},h.id))})]}),t.jsx("div",{style:{borderTop:"1px solid #eee",marginTop:"4px"},children:t.jsx("button",{onClick:W,style:{width:"100%",padding:"6px 16px",background:"#f3f4f6",border:"none",borderRadius:"0 0 4px 4px",cursor:"pointer"},children:"Close"})})]})},Ae=n=>{const o=n.split("-");return o.length>2?o[o.length-1].substring(0,6):n.substring(0,6)},me=({field:n,onSelect:o,onDelete:d,isSelected:i,isGrouped:l=!1})=>t.jsxs("div",{onClick:()=>o(n),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:l?"13px":"14px"},onMouseEnter:c=>{i||(c.currentTarget.style.background="#f3f4f6")},onMouseLeave:c=>{i||(c.currentTarget.style.background="#f9fafb")},title:n.alias,children:[t.jsx("button",{onClick:c=>{c.stopPropagation(),d(n.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:c=>{c.currentTarget.style.color="#ef4444"},onMouseLeave:c=>{c.currentTarget.style.color="#9ca3af"},title:"Delete field",children:t.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children: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"})})}),t.jsxs("div",{style:{paddingRight:"24px"},children:[t.jsx("div",{style:{fontWeight:"500",fontSize:l?"12px":"14px",color:l?"#6b7280":"#111827"},children:n.alias||n.id}),t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"6px",fontSize:"11px",color:"#9ca3af",marginTop:"2px"},children:[t.jsxs("span",{children:["ID: ",n.id]}),n.mode&&t.jsx("span",{style:{fontSize:"9px",padding:"2px 5px",borderRadius:"3px",background:n.mode==="block"?"#dbeafe":"#f3f4f6",color:n.mode==="block"?"#1e40af":"#4b5563",fontWeight:"500"},children:n.mode})]})]})]}),ve=({fields:n,onSelect:o,onDelete:d,selectedFieldId:i})=>{const[l,c]=s.useState(new Set),{groupedFields:R,ungroupedFields:W}=s.useMemo(()=>{const x={},w=[];return n.forEach(m=>{m.group?(x[m.group]||(x[m.group]=[]),x[m.group].push(m)):w.push(m)}),{groupedFields:x,ungroupedFields:w}},[n]),V=x=>{c(w=>{const m=new Set(w);return m.has(x)?m.delete(x):m.add(x),m})};return t.jsxs("div",{className:"superdoc-field-list",style:{width:"250px",background:"white",border:"1px solid #e5e7eb",borderRadius:"8px",padding:"16px"},children:[t.jsxs("h3",{style:{margin:"0 0 16px 0",fontSize:"16px",fontWeight:"600"},children:["Template Fields (",n.length,")"]}),n.length===0?t.jsxs("div",{style:{color:"#9ca3af",fontSize:"14px",textAlign:"center",padding:"20px 0"},children:["No fields yet. Type ","{{"," to add a field."]}):t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[W.map(x=>t.jsx(me,{field:x,onSelect:o,onDelete:d,isSelected:i===x.id},x.id)),Object.entries(R).map(([x,w])=>{const m=l.has(x),y=w[0];return t.jsxs("div",{children:[t.jsx("div",{style:{position:"relative",padding:"12px",background:"#f9fafb",border:"1px solid #e5e7eb",borderRadius:"6px",cursor:"pointer",transition:"all 0.2s"},onClick:()=>V(x),onMouseEnter:k=>{k.currentTarget.style.background="#f3f4f6"},onMouseLeave:k=>{k.currentTarget.style.background="#f9fafb"},children:t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[t.jsx("span",{style:{fontSize:"12px",color:"#6b7280"},children:m?"▼":"▶"}),t.jsxs("div",{style:{flex:1},children:[t.jsx("div",{style:{fontWeight:"500",fontSize:"14px"},children:y.alias}),t.jsxs("div",{style:{fontSize:"11px",color:"#9ca3af",marginTop:"2px"},children:["group: ",Ae(x)," (",w.length," fields)"]})]})]})}),m&&t.jsx("div",{style:{marginLeft:"16px",marginTop:"4px",display:"flex",flexDirection:"column",gap:"4px"},children:w.map(k=>t.jsx(me,{field:k,onSelect:o,onDelete:d,isSelected:i===k.id,isGrouped:!0},k.id))})]},x)})]})]})},U=n=>{const o=n.helpers?.structuredContentCommands;return o?.getStructuredContentTags?(o.getStructuredContentTags(n.state)||[]).map(i=>{const l=i?.node??i,c=l?.attrs??{},W=(l?.type?.name||"").includes("Block")?"block":"inline";return{id:c.id,alias:c.alias||c.label||"",tag:c.tag,mode:W,group:o.getGroup?.(c.tag)??void 0}}):[]},he=(n,o)=>{if(n===o)return!0;if(n.length!==o.length)return!1;for(let d=0;d<n.length;d+=1){const i=n[d],l=o[d];if(!l||i.id!==l.id||i.alias!==l.alias||i.tag!==l.tag||i.position!==l.position||i.mode!==l.mode||i.group!==l.group)return!1}return!0},Ve=n=>{if(!n)return null;if(n===!0)return{selector:"#superdoc-toolbar",config:{},renderDefaultContainer:!0};if(typeof n=="string")return{selector:n,config:{},renderDefaultContainer:!1};const{selector:o,...d}=n;return{selector:o||"#superdoc-toolbar",config:d,renderDefaultContainer:o===void 0}},ee=10,Oe=250,Ge=300,be=n=>{const o=window.innerWidth-Oe-ee,d=window.innerHeight-Ge-ee,i=Math.min(n.left,o),l=Math.min(n.top,d);return new DOMRect(Math.max(i,ee),Math.max(l,ee),n.width,n.height)},je=s.forwardRef((n,o)=>{const{document:d,fields:i={},menu:l={},list:c={},toolbar:R,onReady:W,onTrigger:V,onFieldInsert:x,onFieldUpdate:w,onFieldDelete:m,onFieldsChange:y,onFieldSelect:k,onFieldCreate:E,onExport:_,className:L,style:q,documentHeight:te="600px"}=n,[p,D]=s.useState(i.initial||[]),[H,O]=s.useState(null),[P,M]=s.useState(!1),[h,N]=s.useState(),[b,J]=s.useState(""),[Y,Ce]=s.useState(()=>i.available||[]),ne=s.useRef(null),F=s.useRef(null),T=s.useRef(null),ae=s.useRef(i);ae.current=i;const z=s.useRef(null),de=s.useRef(P);s.useEffect(()=>{de.current=P},[P]);const K=l.trigger||"{{",re=ae.current.available||[],A=s.useMemo(()=>Ve(R),[R]),ce=s.useCallback(e=>{const r=e.trim().toLowerCase();return r?re.filter(a=>a.label.toLowerCase().includes(r)):re},[re]),se=s.useCallback(e=>{J(e),Ce(ce(e))},[ce]),B=s.useCallback(()=>{se("")},[se]),Q=s.useCallback((e,r)=>{if(!F.current?.activeEditor)return!1;const a=F.current.activeEditor,v=p,C=e==="inline"?a.commands.insertStructuredContentInline?.({attrs:{alias:r.alias,tag:r.metadata?JSON.stringify(r.metadata):void 0},text:r.defaultValue||r.alias}):a.commands.insertStructuredContentBlock?.({attrs:{alias:r.alias,tag:r.metadata?JSON.stringify(r.metadata):void 0},text:r.defaultValue||r.alias});if(C){const f=U(a);D(f),y?.(f);const S=f.find(j=>!v.some(u=>u.id===j.id));S&&x?.(S)}return C??!1},[x,y,p]),X=s.useCallback((e,r)=>{if(!F.current?.activeEditor)return!1;const v=F.current.activeEditor.commands.updateStructuredContentById?.(e,{attrs:r});return v&&D(C=>{const f=C.map(j=>j.id===e?{...j,...r}:j);y?.(f);const S=f.find(j=>j.id===e);return S&&w?.(S),f}),v??!1},[w,y]),oe=s.useCallback(e=>{const r=F.current?.activeEditor;if(!r){let u=!1;return D(g=>{if(!g.some(I=>I.id===e))return g;const $=g.filter(I=>I.id!==e);return u=!0,y?.($),m?.(e),$}),u&&O(g=>g===e?null:g),u}const v=p.find(u=>u.id===e)?.group;let C=!1;try{C=r.commands.deleteStructuredContentById?.(e)??!1}catch{C=!1}let f=U(r);const S=f.some(u=>u.id===e);if(!C&&S&&(f=f.filter(u=>u.id!==e)),v){const u=f.filter(g=>g.group===v);if(u.length===1){const g=u[0];r.commands.updateStructuredContentById?.(g.id,{attrs:{tag:void 0}}),f=U(r)}}let j=!1;return D(u=>{if(he(u,f))return u;const g=u.some(I=>I.id===e),$=f.some(I=>I.id===e);return g&&!$&&(j=!0),y?.(f),j&&m?.(e),f}),j&&O(u=>u===e?null:u),C||j},[m,y,p]),G=s.useCallback(e=>{if(!F.current?.activeEditor)return;F.current.activeEditor.commands.selectStructuredContentById?.(e),O(e);const a=p.find(v=>v.id===e);a&&k?.(a)},[p,k]),ie=s.useCallback(e=>{if(!e)return;const r=U(e);D(a=>he(a,r)?a:(y?.(r),r))},[y]);s.useEffect(()=>{if(!ne.current)return;let e=!1,r=null;return(async()=>{const{SuperDoc:v}=await import("superdoc");if(e)return;const C={comments:!1,...A&&{toolbar:{selector:A.selector,toolbarGroups:A.config.toolbarGroups||["center"],excludeItems:A.config.excludeItems||[],...A.config}}},f=()=>{if(!e){if(r?.activeEditor){const S=r.activeEditor;S.on("update",({editor:j})=>{const{state:u}=j,{from:g}=u.selection;if(g>=K.length){const le=g-K.length;if(u.doc.textBetween(le,g)===K){const pe=j.view.coordsAtPos(g),xe=be(new DOMRect(pe.left,pe.top,0,0)),fe=()=>{const Z=F.current?.activeEditor;if(!Z)return;const Re=Z.state.selection.from,De=Z.state.tr.delete(le,Re);Z.view.dispatch(De)};T.current=fe,z.current=g,N(xe),M(!0),B(),V?.({position:{from:le,to:g},bounds:xe,cleanup:fe});return}}if(!de.current)return;if(z.current==null){M(!1),B();return}if(g<z.current){M(!1),z.current=null,B();return}const $=u.doc.textBetween(z.current,g);se($);const I=j.view.coordsAtPos(g),Ie=be(new DOMRect(I.left,I.top,0,0));N(Ie)}),S.on("update",()=>{ie(S)}),ie(S)}W?.()}};r=new v({selector:ne.current,document:d?.source,documentMode:d?.mode||"editing",modules:C,toolbar:A?.selector,onReady:f}),F.current=r})(),()=>{e=!0,T.current=null,z.current=null,r&&typeof r.destroy=="function"&&r.destroy(),F.current=null}},[d?.source,d?.mode,K,ie,W,V,A]);const ke=s.useCallback(async e=>{T.current&&(T.current(),T.current=null),z.current=null,B();const r=e.mode||"inline";if(e.id.startsWith("custom_")&&E){const a=await E(e);if(a){const v=a.mode||r;Q(v,{alias:a.label,metadata:a.metadata,defaultValue:a.defaultValue}),M(!1);return}}Q(r,{alias:e.label,metadata:e.metadata,defaultValue:e.defaultValue}),M(!1)},[Q,E,B]),Fe=s.useCallback(e=>{T.current&&(T.current(),T.current=null),z.current=null,B();const r=F.current?.activeEditor;if(!r)return;const a=r.helpers?.structuredContentCommands;if(!a)return;const v=e.group||`group-${Date.now()}-${Math.random().toString(36).substring(2,11)}`,C=a.createTagObject?.({group:v});if((e.mode||"inline")==="inline"?r.commands.insertStructuredContentInline?.({attrs:{alias:e.alias,tag:C},text:e.alias}):r.commands.insertStructuredContentBlock?.({attrs:{alias:e.alias,tag:C},text:e.alias})){e.group||X(e.id,{tag:C}),M(!1);const j=U(r);D(j),y?.(j)}},[X,B,y]),Se=s.useCallback(()=>{M(!1),z.current=null,B(),T.current&&(T.current(),T.current=null)},[B]),we=s.useCallback(()=>{if(!F.current?.activeEditor||p.length===0)return;const e=p.findIndex(a=>a.id===H),r=e>=0?(e+1)%p.length:0;G(p[r].id)},[p,H,G]),Te=s.useCallback(()=>{if(!F.current?.activeEditor||p.length===0)return;const e=p.findIndex(a=>a.id===H),r=e>0?e-1:p.length-1;G(p[r].id)},[p,H,G]),Ee=s.useCallback(async e=>{const{fileName:r="document",triggerDownload:a=!0}=e||{},v=await F.current?.export({exportType:["docx"],exportedName:r,triggerDownload:a}),C=F.current?.activeEditor;if(C){const f=U(C);_?.({fields:f,blob:a?void 0:v,fileName:r})}return v},[_]);s.useImperativeHandle(o,()=>({insertField:e=>Q("inline",e),insertBlockField:e=>Q("block",e),updateField:X,deleteField:oe,selectField:G,nextField:we,previousField:Te,getFields:()=>p,exportTemplate:Ee,getSuperDoc:()=>F.current}));const Me=l.component||ye,ue=c.component||ve;return t.jsxs("div",{className:`superdoc-template-builder ${L||""}`,style:q,children:[t.jsxs("div",{style:{display:"flex",gap:"20px"},children:[c.position==="left"&&t.jsx("div",{className:"superdoc-template-builder-sidebar",children:t.jsx(ue,{fields:p,onSelect:e=>G(e.id),onDelete:oe,onUpdate:e=>X(e.id,e),selectedFieldId:H||void 0})}),t.jsxs("div",{className:"superdoc-template-builder-document",style:{flex:1},children:[A?.renderDefaultContainer&&t.jsx("div",{id:"superdoc-toolbar",className:"superdoc-template-builder-toolbar","data-testid":"template-builder-toolbar"}),t.jsx("div",{ref:ne,className:"superdoc-template-builder-editor",style:{height:te},"data-testid":"template-builder-editor"})]}),c.position==="right"&&t.jsx("div",{className:"superdoc-template-builder-sidebar",children:t.jsx(ue,{fields:p,onSelect:e=>G(e.id),onDelete:oe,onUpdate:e=>X(e.id,e),selectedFieldId:H||void 0})})]}),t.jsx(Me,{isVisible:P,position:h,availableFields:i.available||[],filteredFields:Y,filterQuery:b,allowCreate:i.allowCreate||!1,onSelect:ke,onClose:Se,onCreateField:E,existingFields:p,onSelectExisting:Fe})]})});je.displayName="SuperDocTemplateBuilder";exports.FieldList=ve;exports.FieldMenu=ye;exports.default=je;

package/dist/index.mjs

@@ -1,26 +1,26 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { useState as I, useEffect as oe, useMemo as Fe, forwardRef as ze, useRef as J, useCallback as S, useImperativeHandle as Be } from "react";
-const We = ({
+import { useState as I, useEffect as oe, useMemo as pe, forwardRef as Be, useRef as J, useCallback as T, useImperativeHandle as We } from "react";
+const He = ({
   isVisible: n,
-  position: d,
-  availableFields: g,
-  filteredFields: l,
-  filterQuery: u,
-  allowCreate: a,
-  onSelect: N,
+  position: l,
+  availableFields: f,
+  filteredFields: s,
+  filterQuery: c,
+  allowCreate: d,
+  onSelect: z,
   onClose: P,
-  onCreateField: G,
-  existingFields: f = [],
-  onSelectExisting: T
+  onCreateField: O,
+  existingFields: p = [],
+  onSelectExisting: E
 }) => {
-  const [x, y] = I(!1), [w, R] = I(""), [q, A] = I("inline"), [X, ie] = I(!0), [p, z] = I(!0);
+  const [m, y] = I(!1), [w, R] = I(""), [U, A] = I("inline"), [X, ie] = I(!0), [u, B] = I(!0);
   oe(() => {
     n || (y(!1), R(""), A("inline"));
   }, [n]);
-  const V = Fe(() => ({
+  const V = pe(() => ({
     position: "absolute",
-    left: d?.left,
-    top: d?.top,
+    left: l?.left,
+    top: l?.top,
     zIndex: 1e3,
     background: "white",
     border: "1px solid #ddd",
@@ -28,24 +28,24 @@ const We = ({
     boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
     padding: "8px 0",
     width: "280px"
-  }), [d]), O = l ?? g, j = !!u;
+  }), [l]), _ = s ?? f, j = !!c;
   if (oe(() => {
-    j && z(!0);
+    j && B(!0);
   }, [j]), !n) return null;
   const D = async () => {
-    const m = w.trim();
-    if (!m) return;
-    const B = {
+    const h = w.trim();
+    if (!h) return;
+    const W = {
       id: `custom_${Date.now()}`,
-      label: m,
-      mode: q
+      label: h,
+      mode: U
     };
     try {
-      if (G) {
-        const h = await G(B);
-        N(h || B);
+      if (O) {
+        const b = await O(W);
+        z(b || W);
       } else
-        N(B);
+        z(W);
     } finally {
       y(!1), R(""), A("inline");
     }
@@ -61,11 +61,11 @@ const We = ({
         },
         children: /* @__PURE__ */ o("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
           "Filtering results for",
-          /* @__PURE__ */ r("span", { style: { fontWeight: 600, color: "#111827", marginLeft: "4px" }, children: u })
+          /* @__PURE__ */ r("span", { style: { fontWeight: 600, color: "#111827", marginLeft: "4px" }, children: c })
         ] })
       }
     ),
-    a && !x && /* @__PURE__ */ r(
+    d && !m && /* @__PURE__ */ r(
       "div",
       {
         className: "field-menu-item",
@@ -79,16 +79,16 @@ const We = ({
         children: "+ Create New Field"
       }
     ),
-    a && x && /* @__PURE__ */ o("div", { style: { padding: "8px 16px" }, children: [
+    d && m && /* @__PURE__ */ o("div", { style: { padding: "8px 16px" }, children: [
       /* @__PURE__ */ r(
         "input",
         {
           type: "text",
           value: w,
           placeholder: "Field name...",
-          onChange: (m) => R(m.target.value),
-          onKeyDown: (m) => {
-            m.key === "Enter" && D(), m.key === "Escape" && (y(!1), R(""), A("inline"));
+          onChange: (h) => R(h.target.value),
+          onKeyDown: (h) => {
+            h.key === "Enter" && D(), h.key === "Escape" && (y(!1), R(""), A("inline"));
           },
           autoFocus: !0,
           style: {
@@ -124,7 +124,7 @@ const We = ({
                     {
                       type: "radio",
                       value: "inline",
-                      checked: q === "inline",
+                      checked: U === "inline",
                       onChange: () => A("inline")
                     }
                   ),
@@ -147,7 +147,7 @@ const We = ({
                     {
                       type: "radio",
                       value: "block",
-                      checked: q === "block",
+                      checked: U === "block",
                       onChange: () => A("block")
                     }
                   ),
@@ -203,7 +203,7 @@ const We = ({
         }
       )
     ] }),
-    a && g.length > 0 && /* @__PURE__ */ r(
+    d && f.length > 0 && /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -212,15 +212,15 @@ const We = ({
         }
       }
     ),
-    f.length > 0 && (() => {
-      const m = /* @__PURE__ */ new Map();
-      f.forEach((h) => {
-        const Y = h.group || `individual-${h.id}`, ee = m.get(Y) || [];
-        ee.push(h), m.set(Y, ee);
+    p.length > 0 && (() => {
+      const h = /* @__PURE__ */ new Map();
+      p.forEach((b) => {
+        const Y = b.group || `individual-${b.id}`, ee = h.get(Y) || [];
+        ee.push(b), h.set(Y, ee);
       });
-      const B = Array.from(m.values()).map((h) => ({
-        ...h[0],
-        count: h.length
+      const W = Array.from(h.values()).map((b) => ({
+        ...b[0],
+        count: b.length
       }));
       return /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
         /* @__PURE__ */ o(
@@ -245,7 +245,7 @@ const We = ({
             children: [
               /* @__PURE__ */ o("span", { children: [
                 "Existing Fields (",
-                B.length,
+                W.length,
                 ")"
               ] }),
               /* @__PURE__ */ r(
@@ -266,11 +266,11 @@ const We = ({
             ]
           }
         ),
-        X && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: B.map((h) => /* @__PURE__ */ o(
+        X && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: W.map((b) => /* @__PURE__ */ o(
           "div",
           {
             className: "field-menu-item",
-            onClick: () => T?.(h),
+            onClick: () => E?.(b),
             style: {
               padding: "8px 16px",
               cursor: "pointer",
@@ -281,7 +281,7 @@ const We = ({
             },
             children: [
               /* @__PURE__ */ o("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ r("div", { style: { fontWeight: 500, fontSize: "13px" }, children: h.alias || h.id }),
+                /* @__PURE__ */ r("div", { style: { fontWeight: 500, fontSize: "13px" }, children: b.alias || b.id }),
                 /* @__PURE__ */ r(
                   "div",
                   {
@@ -290,7 +290,7 @@ const We = ({
                       color: "#9ca3af",
                       marginTop: "2px"
                     },
-                    children: h.group ? `group (${h.count} fields)` : `ID: ${h.id}`
+                    children: b.group ? `group (${b.count} fields)` : `ID: ${b.id}`
                   }
                 )
               ] }),
@@ -306,16 +306,16 @@ const We = ({
                     textTransform: "capitalize",
                     flexShrink: 0
                   },
-                  children: h.mode || "inline"
+                  children: b.mode || "inline"
                 }
               )
             ]
           },
-          h.group || h.id
+          b.group || b.id
         )) })
       ] });
     })(),
-    O.length === 0 ? /* @__PURE__ */ r(
+    _.length === 0 ? /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -331,7 +331,7 @@ const We = ({
         "button",
         {
           type: "button",
-          onClick: () => z(!p),
+          onClick: () => B(!u),
           style: {
             width: "100%",
             display: "flex",
@@ -349,7 +349,7 @@ const We = ({
           children: [
             /* @__PURE__ */ o("span", { children: [
               "Available Fields (",
-              O.length,
+              _.length,
               ")"
             ] }),
             /* @__PURE__ */ r(
@@ -362,7 +362,7 @@ const We = ({
                   height: "8px",
                   borderRight: "2px solid #666",
                   borderBottom: "2px solid #666",
-                  transform: p ? "rotate(45deg)" : "rotate(-45deg)",
+                  transform: u ? "rotate(45deg)" : "rotate(-45deg)",
                   transition: "transform 0.2s ease"
                 }
               }
@@ -370,11 +370,11 @@ const We = ({
           ]
         }
       ),
-      p && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: O.map((m) => /* @__PURE__ */ o(
+      u && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: _.map((h) => /* @__PURE__ */ o(
         "div",
         {
           className: "field-menu-item",
-          onClick: () => N(m),
+          onClick: () => z(h),
           style: {
             padding: "8px 16px",
             cursor: "pointer",
@@ -385,7 +385,7 @@ const We = ({
           },
           children: [
             /* @__PURE__ */ o("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ r("div", { style: { fontWeight: 500, fontSize: "13px" }, children: m.label || m.id }),
+              /* @__PURE__ */ r("div", { style: { fontWeight: 500, fontSize: "13px" }, children: h.label || h.id }),
               /* @__PURE__ */ o(
                 "div",
                 {
@@ -396,7 +396,7 @@ const We = ({
                   },
                   children: [
                     "ID: ",
-                    m.id
+                    h.id
                   ]
                 }
               )
@@ -413,12 +413,12 @@ const We = ({
                   textTransform: "capitalize",
                   flexShrink: 0
                 },
-                children: m.mode || "inline"
+                children: h.mode || "inline"
               }
             )
           ]
         },
-        m.id
+        h.id
       )) })
     ] }),
     /* @__PURE__ */ r(
@@ -446,36 +446,36 @@ const We = ({
       }
     )
   ] });
-}, He = (n) => {
-  const d = n.split("-");
-  return d.length > 2 ? d[d.length - 1].substring(0, 6) : n.substring(0, 6);
-}, ye = ({ field: n, onSelect: d, onDelete: g, isSelected: l, isGrouped: u = !1 }) => /* @__PURE__ */ o(
+}, Le = (n) => {
+  const l = n.split("-");
+  return l.length > 2 ? l[l.length - 1].substring(0, 6) : n.substring(0, 6);
+}, ve = ({ field: n, onSelect: l, onDelete: f, isSelected: s, isGrouped: c = !1 }) => /* @__PURE__ */ o(
   "div",
   {
-    onClick: () => d(n),
+    onClick: () => l(n),
     style: {
       position: "relative",
       padding: "10px 12px",
-      background: l ? "#eff6ff" : "#f9fafb",
-      border: l ? "1px solid #3b82f6" : "1px solid #e5e7eb",
+      background: s ? "#eff6ff" : "#f9fafb",
+      border: s ? "1px solid #3b82f6" : "1px solid #e5e7eb",
       borderRadius: "6px",
       cursor: "pointer",
       transition: "all 0.2s",
-      fontSize: u ? "13px" : "14px"
+      fontSize: c ? "13px" : "14px"
     },
-    onMouseEnter: (a) => {
-      l || (a.currentTarget.style.background = "#f3f4f6");
+    onMouseEnter: (d) => {
+      s || (d.currentTarget.style.background = "#f3f4f6");
     },
-    onMouseLeave: (a) => {
-      l || (a.currentTarget.style.background = "#f9fafb");
+    onMouseLeave: (d) => {
+      s || (d.currentTarget.style.background = "#f9fafb");
     },
     title: n.alias,
     children: [
       /* @__PURE__ */ r(
         "button",
         {
-          onClick: (a) => {
-            a.stopPropagation(), g(n.id);
+          onClick: (d) => {
+            d.stopPropagation(), f(n.id);
           },
           style: {
             position: "absolute",
@@ -491,11 +491,11 @@ const We = ({
             alignItems: "center",
             justifyContent: "center"
           },
-          onMouseEnter: (a) => {
-            a.currentTarget.style.color = "#ef4444";
+          onMouseEnter: (d) => {
+            d.currentTarget.style.color = "#ef4444";
           },
-          onMouseLeave: (a) => {
-            a.currentTarget.style.color = "#9ca3af";
+          onMouseLeave: (d) => {
+            d.currentTarget.style.color = "#9ca3af";
           },
           title: "Delete field",
           children: /* @__PURE__ */ r(
@@ -526,8 +526,8 @@ const We = ({
           {
             style: {
               fontWeight: "500",
-              fontSize: u ? "12px" : "14px",
-              color: u ? "#6b7280" : "#111827"
+              fontSize: c ? "12px" : "14px",
+              color: c ? "#6b7280" : "#111827"
             },
             children: n.alias || n.id
           }
@@ -568,21 +568,21 @@ const We = ({
       ] })
     ]
   }
-), Le = ({
+), Pe = ({
   fields: n,
-  onSelect: d,
-  onDelete: g,
-  selectedFieldId: l
+  onSelect: l,
+  onDelete: f,
+  selectedFieldId: s
 }) => {
-  const [u, a] = I(/* @__PURE__ */ new Set()), { groupedFields: N, ungroupedFields: P } = Fe(() => {
-    const f = {}, T = [];
-    return n.forEach((x) => {
-      x.group ? (f[x.group] || (f[x.group] = []), f[x.group].push(x)) : T.push(x);
-    }), { groupedFields: f, ungroupedFields: T };
-  }, [n]), G = (f) => {
-    a((T) => {
-      const x = new Set(T);
-      return x.has(f) ? x.delete(f) : x.add(f), x;
+  const [c, d] = I(/* @__PURE__ */ new Set()), { groupedFields: z, ungroupedFields: P } = pe(() => {
+    const p = {}, E = [];
+    return n.forEach((m) => {
+      m.group ? (p[m.group] || (p[m.group] = []), p[m.group].push(m)) : E.push(m);
+    }), { groupedFields: p, ungroupedFields: E };
+  }, [n]), O = (p) => {
+    d((E) => {
+      const m = new Set(E);
+      return m.has(p) ? m.delete(p) : m.add(p), m;
     });
   };
   return /* @__PURE__ */ o(
@@ -618,18 +618,18 @@ const We = ({
             ]
           }
         ) : /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-          P.map((f) => /* @__PURE__ */ r(
-            ye,
+          P.map((p) => /* @__PURE__ */ r(
+            ve,
             {
-              field: f,
-              onSelect: d,
-              onDelete: g,
-              isSelected: l === f.id
+              field: p,
+              onSelect: l,
+              onDelete: f,
+              isSelected: s === p.id
             },
-            f.id
+            p.id
           )),
-          Object.entries(N).map(([f, T]) => {
-            const x = u.has(f), y = T[0];
+          Object.entries(z).map(([p, E]) => {
+            const m = c.has(p), y = E[0];
             return /* @__PURE__ */ o("div", { children: [
               /* @__PURE__ */ r(
                 "div",
@@ -643,7 +643,7 @@ const We = ({
                     cursor: "pointer",
                     transition: "all 0.2s"
                   },
-                  onClick: () => G(f),
+                  onClick: () => O(p),
                   onMouseEnter: (w) => {
                     w.currentTarget.style.background = "#f3f4f6";
                   },
@@ -651,7 +651,7 @@ const We = ({
                     w.currentTarget.style.background = "#f9fafb";
                   },
                   children: /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                    /* @__PURE__ */ r("span", { style: { fontSize: "12px", color: "#6b7280" }, children: x ? "▼" : "▶" }),
+                    /* @__PURE__ */ r("span", { style: { fontSize: "12px", color: "#6b7280" }, children: m ? "▼" : "▶" }),
                     /* @__PURE__ */ o("div", { style: { flex: 1 }, children: [
                       /* @__PURE__ */ r("div", { style: { fontWeight: "500", fontSize: "14px" }, children: y.alias }),
                       /* @__PURE__ */ o(
@@ -664,9 +664,9 @@ const We = ({
                           },
                           children: [
                             "group: ",
-                            He(f),
+                            Le(p),
                             " (",
-                            T.length,
+                            E.length,
                             " fields)"
                           ]
                         }
@@ -675,7 +675,7 @@ const We = ({
                   ] })
                 }
               ),
-              x && /* @__PURE__ */ r(
+              m && /* @__PURE__ */ r(
                 "div",
                 {
                   style: {
@@ -685,47 +685,47 @@ const We = ({
                     flexDirection: "column",
                     gap: "4px"
                   },
-                  children: T.map((w) => /* @__PURE__ */ r(
-                    ye,
+                  children: E.map((w) => /* @__PURE__ */ r(
+                    ve,
                     {
                       field: w,
-                      onSelect: d,
-                      onDelete: g,
-                      isSelected: l === w.id,
+                      onSelect: l,
+                      onDelete: f,
+                      isSelected: s === w.id,
                       isGrouped: !0
                     },
                     w.id
                   ))
                 }
               )
-            ] }, f);
+            ] }, p);
           })
         ] })
       ]
     }
   );
 }, Q = (n) => {
-  const d = n.helpers?.structuredContentCommands;
-  return d?.getStructuredContentTags ? (d.getStructuredContentTags(n.state) || []).map((l) => {
-    const u = l?.node ?? l, a = u?.attrs ?? {}, P = (u?.type?.name || "").includes("Block") ? "block" : "inline";
+  const l = n.helpers?.structuredContentCommands;
+  return l?.getStructuredContentTags ? (l.getStructuredContentTags(n.state) || []).map((s) => {
+    const c = s?.node ?? s, d = c?.attrs ?? {}, P = (c?.type?.name || "").includes("Block") ? "block" : "inline";
     return {
-      id: a.id,
-      alias: a.alias || a.label || "",
-      tag: a.tag,
+      id: d.id,
+      alias: d.alias || d.label || "",
+      tag: d.tag,
       mode: P,
-      group: d.getGroup?.(a.tag) ?? void 0
+      group: l.getGroup?.(d.tag) ?? void 0
     };
   }) : [];
-}, ve = (n, d) => {
-  if (n === d) return !0;
-  if (n.length !== d.length) return !1;
-  for (let g = 0; g < n.length; g += 1) {
-    const l = n[g], u = d[g];
-    if (!u || l.id !== u.id || l.alias !== u.alias || l.tag !== u.tag || l.position !== u.position || l.mode !== u.mode || l.group !== u.group)
+}, Ce = (n, l) => {
+  if (n === l) return !0;
+  if (n.length !== l.length) return !1;
+  for (let f = 0; f < n.length; f += 1) {
+    const s = n[f], c = l[f];
+    if (!c || s.id !== c.id || s.alias !== c.alias || s.tag !== c.tag || s.position !== c.position || s.mode !== c.mode || s.group !== c.group)
       return !1;
   }
   return !0;
-}, Pe = (n) => {
+}, Ae = (n) => {
   if (!n) return null;
   if (n === !0)
     return {
@@ -739,64 +739,64 @@ const We = ({
       config: {},
       renderDefaultContainer: !1
     };
-  const { selector: d, ...g } = n;
+  const { selector: l, ...f } = n;
   return {
-    selector: d || "#superdoc-toolbar",
-    config: g,
-    renderDefaultContainer: d === void 0
+    selector: l || "#superdoc-toolbar",
+    config: f,
+    renderDefaultContainer: l === void 0
   };
-}, re = 10, Ae = 250, Ve = 300, Ce = (n) => {
-  const d = window.innerWidth - Ae - re, g = window.innerHeight - Ve - re, l = Math.min(n.left, d), u = Math.min(n.top, g);
+}, re = 10, Ve = 250, je = 300, Fe = (n) => {
+  const l = window.innerWidth - Ve - re, f = window.innerHeight - je - re, s = Math.min(n.left, l), c = Math.min(n.top, f);
   return new DOMRect(
-    Math.max(l, re),
-    Math.max(u, re),
+    Math.max(s, re),
+    Math.max(c, re),
     n.width,
     n.height
   );
-}, je = ze((n, d) => {
+}, Ge = Be((n, l) => {
   const {
-    document: g,
-    fields: l = {},
-    menu: u = {},
-    list: a = {},
-    toolbar: N,
+    document: f,
+    fields: s = {},
+    menu: c = {},
+    list: d = {},
+    toolbar: z,
     onReady: P,
-    onTrigger: G,
-    onFieldInsert: f,
-    onFieldUpdate: T,
-    onFieldDelete: x,
+    onTrigger: O,
+    onFieldInsert: p,
+    onFieldUpdate: E,
+    onFieldDelete: m,
     onFieldsChange: y,
     onFieldSelect: w,
     onFieldCreate: R,
-    onExport: q,
+    onExport: U,
     className: A,
     style: X,
     documentHeight: ie = "600px"
-  } = n, [p, z] = I(l.initial || []), [V, O] = I(null), [j, D] = I(!1), [m, B] = I(), [h, Y] = I(""), [ee, we] = I(
-    () => l.available || []
-  ), se = J(null), F = J(null), M = J(null), pe = J(l);
-  pe.current = l;
-  const W = J(null), fe = J(j);
+  } = n, [u, B] = I(s.initial || []), [V, _] = I(null), [j, D] = I(!1), [h, W] = I(), [b, Y] = I(""), [ee, we] = I(
+    () => s.available || []
+  ), se = J(null), k = J(null), M = J(null), fe = J(s);
+  fe.current = s;
+  const H = J(null), ge = J(j);
   oe(() => {
-    fe.current = j;
+    ge.current = j;
   }, [j]);
-  const te = u.trigger || "{{", le = pe.current.available || [], ge = S(
+  const te = c.trigger || "{{", le = fe.current.available || [], G = pe(() => Ae(z), [z]), xe = T(
     (e) => {
       const t = e.trim().toLowerCase();
       return t ? le.filter((i) => i.label.toLowerCase().includes(t)) : le;
     },
     [le]
-  ), de = S(
+  ), de = T(
     (e) => {
-      Y(e), we(ge(e));
+      Y(e), we(xe(e));
     },
-    [ge]
-  ), H = S(() => {
+    [xe]
+  ), L = T(() => {
     de("");
-  }, [de]), K = S(
+  }, [de]), K = T(
     (e, t) => {
-      if (!F.current?.activeEditor) return !1;
-      const i = F.current.activeEditor, v = p, b = e === "inline" ? i.commands.insertStructuredContentInline?.({
+      if (!k.current?.activeEditor) return !1;
+      const i = k.current.activeEditor, v = u, F = e === "inline" ? i.commands.insertStructuredContentInline?.({
         attrs: {
           alias: t.alias,
           tag: t.metadata ? JSON.stringify(t.metadata) : void 0
@@ -809,154 +809,168 @@ const We = ({
         },
         text: t.defaultValue || t.alias
       });
-      if (b) {
-        const c = Q(i);
-        z(c), y?.(c);
-        const E = c.find(
-          (C) => !v.some((s) => s.id === C.id)
+      if (F) {
+        const g = Q(i);
+        B(g), y?.(g);
+        const S = g.find(
+          (C) => !v.some((a) => a.id === C.id)
         );
-        E && f?.(E);
+        S && p?.(S);
       }
-      return b;
+      return F ?? !1;
     },
-    [f, y, p]
-  ), Z = S(
+    [p, y, u]
+  ), Z = T(
     (e, t) => {
-      if (!F.current?.activeEditor) return !1;
-      const v = F.current.activeEditor.commands.updateStructuredContentById?.(e, {
+      if (!k.current?.activeEditor) return !1;
+      const v = k.current.activeEditor.commands.updateStructuredContentById?.(e, {
         attrs: t
       });
-      return v && z((b) => {
-        const c = b.map((C) => C.id === e ? { ...C, ...t } : C);
-        y?.(c);
-        const E = c.find((C) => C.id === e);
-        return E && T?.(E), c;
-      }), v;
+      return v && B((F) => {
+        const g = F.map((C) => C.id === e ? { ...C, ...t } : C);
+        y?.(g);
+        const S = g.find((C) => C.id === e);
+        return S && E?.(S), g;
+      }), v ?? !1;
     },
-    [T, y]
-  ), ae = S(
+    [E, y]
+  ), ae = T(
     (e) => {
-      const t = F.current?.activeEditor;
+      const t = k.current?.activeEditor;
       if (!t) {
-        let s = !1;
-        return z((k) => {
-          if (!k.some((L) => L.id === e)) return k;
-          const U = k.filter((L) => L.id !== e);
-          return s = !0, y?.(U), U;
-        }), s && (x?.(e), O((k) => k === e ? null : k)), s;
+        let a = !1;
+        return B((x) => {
+          if (!x.some((N) => N.id === e)) return x;
+          const q = x.filter((N) => N.id !== e);
+          return a = !0, y?.(q), m?.(e), q;
+        }), a && _((x) => x === e ? null : x), a;
       }
-      const v = p.find((s) => s.id === e)?.group;
-      let b = !1;
+      const v = u.find((a) => a.id === e)?.group;
+      let F = !1;
       try {
-        b = t.commands.deleteStructuredContentById?.(e) ?? !1;
+        F = t.commands.deleteStructuredContentById?.(e) ?? !1;
       } catch {
-        b = !1;
+        F = !1;
       }
-      let c = Q(t);
-      const E = c.some((s) => s.id === e);
-      if (!b && E && (c = c.filter((s) => s.id !== e)), v) {
-        const s = c.filter((k) => k.group === v);
-        if (s.length === 1) {
-          const k = s[0];
-          t.commands.updateStructuredContentById?.(k.id, {
+      let g = Q(t);
+      const S = g.some((a) => a.id === e);
+      if (!F && S && (g = g.filter((a) => a.id !== e)), v) {
+        const a = g.filter((x) => x.group === v);
+        if (a.length === 1) {
+          const x = a[0];
+          t.commands.updateStructuredContentById?.(x.id, {
             attrs: { tag: void 0 }
-          }), c = Q(t);
+          }), g = Q(t);
         }
       }
       let C = !1;
-      return z((s) => {
-        if (ve(s, c))
-          return s;
-        const k = s.some((L) => L.id === e), U = c.some((L) => L.id === e);
-        return k && !U && (C = !0), y?.(c), c;
-      }), C && (x?.(e), O((s) => s === e ? null : s)), b || C;
+      return B((a) => {
+        if (Ce(a, g))
+          return a;
+        const x = a.some((N) => N.id === e), q = g.some((N) => N.id === e);
+        return x && !q && (C = !0), y?.(g), C && m?.(e), g;
+      }), C && _((a) => a === e ? null : a), F || C;
     },
-    [x, y, p]
-  ), _ = S(
+    [m, y, u]
+  ), $ = T(
     (e) => {
-      if (!F.current?.activeEditor) return;
-      F.current.activeEditor.commands.selectStructuredContentById?.(e), O(e);
-      const i = p.find((v) => v.id === e);
+      if (!k.current?.activeEditor) return;
+      k.current.activeEditor.commands.selectStructuredContentById?.(e), _(e);
+      const i = u.find((v) => v.id === e);
       i && w?.(i);
     },
-    [p, w]
-  ), ce = S(
+    [u, w]
+  ), ce = T(
     (e) => {
       if (!e) return;
       const t = Q(e);
-      z((i) => ve(i, t) ? i : (y?.(t), t));
+      B((i) => Ce(i, t) ? i : (y?.(t), t));
     },
     [y]
   );
-  oe(() => se.current ? ((async () => {
-    const { SuperDoc: t } = await import("superdoc"), i = {
-      comments: !1,
-      ...$ && {
-        toolbar: {
-          selector: $.selector,
-          toolbarGroups: $.config.toolbarGroups || ["center"],
-          excludeItems: $.config.excludeItems || [],
-          ...$.config
-        }
-      }
-    }, v = () => {
-      if (b.activeEditor) {
-        const c = b.activeEditor;
-        c.on("update", ({ editor: E }) => {
-          const { state: C } = E, { from: s } = C.selection;
-          if (s >= te.length) {
-            const ue = s - te.length;
-            if (C.doc.textBetween(ue, s) === te) {
-              const me = E.view.coordsAtPos(s), he = Ce(new DOMRect(me.left, me.top, 0, 0)), be = () => {
-                const ne = F.current?.activeEditor;
-                if (!ne) return;
-                const De = ne.state.selection.from, Ne = ne.state.tr.delete(ue, De);
-                ne.view.dispatch(Ne);
-              };
-              M.current = be, W.current = s, B(he), D(!0), H(), G?.({
-                position: { from: ue, to: s },
-                bounds: he,
-                cleanup: be
-              });
-              return;
-            }
-          }
-          if (!fe.current)
-            return;
-          if (W.current == null) {
-            D(!1), H();
-            return;
+  oe(() => {
+    if (!se.current) return;
+    let e = !1, t = null;
+    return (async () => {
+      const { SuperDoc: v } = await import("superdoc");
+      if (e) return;
+      const F = {
+        comments: !1,
+        ...G && {
+          toolbar: {
+            selector: G.selector,
+            toolbarGroups: G.config.toolbarGroups || ["center"],
+            excludeItems: G.config.excludeItems || [],
+            ...G.config
           }
-          if (s < W.current) {
-            D(!1), W.current = null, H();
-            return;
+        }
+      }, g = () => {
+        if (!e) {
+          if (t?.activeEditor) {
+            const S = t.activeEditor;
+            S.on("update", ({ editor: C }) => {
+              const { state: a } = C, { from: x } = a.selection;
+              if (x >= te.length) {
+                const ue = x - te.length;
+                if (a.doc.textBetween(ue, x) === te) {
+                  const he = C.view.coordsAtPos(x), be = Fe(new DOMRect(he.left, he.top, 0, 0)), ye = () => {
+                    const ne = k.current?.activeEditor;
+                    if (!ne) return;
+                    const Ne = ne.state.selection.from, ze = ne.state.tr.delete(ue, Ne);
+                    ne.view.dispatch(ze);
+                  };
+                  M.current = ye, H.current = x, W(be), D(!0), L(), O?.({
+                    position: { from: ue, to: x },
+                    bounds: be,
+                    cleanup: ye
+                  });
+                  return;
+                }
+              }
+              if (!ge.current)
+                return;
+              if (H.current == null) {
+                D(!1), L();
+                return;
+              }
+              if (x < H.current) {
+                D(!1), H.current = null, L();
+                return;
+              }
+              const q = a.doc.textBetween(H.current, x);
+              de(q);
+              const N = C.view.coordsAtPos(x), De = Fe(new DOMRect(N.left, N.top, 0, 0));
+              W(De);
+            }), S.on("update", () => {
+              ce(S);
+            }), ce(S);
           }
-          const k = C.doc.textBetween(W.current, s);
-          de(k);
-          const U = E.view.coordsAtPos(s), L = Ce(new DOMRect(U.left, U.top, 0, 0));
-          B(L);
-        }), c.on("update", () => {
-          ce(c);
-        }), ce(c);
-      }
-      P?.();
-    }, b = new t({
-      selector: se.current,
-      document: g?.source,
-      documentMode: g?.mode || "editing",
-      modules: i,
-      toolbar: $?.selector,
-      onReady: v
-    });
-    F.current = b;
-  })(), () => {
-    M.current = null, W.current = null;
-    const t = F.current;
-    t && typeof t.destroy == "function" && t.destroy(), F.current = null;
-  }) : void 0, [g?.source, g?.mode, te, ce, P, G, N]);
-  const ke = S(
+          P?.();
+        }
+      };
+      t = new v({
+        selector: se.current,
+        document: f?.source,
+        documentMode: f?.mode || "editing",
+        modules: F,
+        toolbar: G?.selector,
+        onReady: g
+      }), k.current = t;
+    })(), () => {
+      e = !0, M.current = null, H.current = null, t && typeof t.destroy == "function" && t.destroy(), k.current = null;
+    };
+  }, [
+    f?.source,
+    f?.mode,
+    te,
+    ce,
+    P,
+    O,
+    G
+  ]);
+  const ke = T(
     async (e) => {
-      M.current && (M.current(), M.current = null), W.current = null, H();
+      M.current && (M.current(), M.current = null), H.current = null, L();
       const t = e.mode || "inline";
       if (e.id.startsWith("custom_") && R) {
         const i = await R(e);
@@ -976,88 +990,88 @@ const We = ({
         defaultValue: e.defaultValue
       }), D(!1);
     },
-    [K, R, H]
-  ), Se = S(
+    [K, R, L]
+  ), Se = T(
     (e) => {
-      M.current && (M.current(), M.current = null), W.current = null, H();
-      const t = F.current?.activeEditor;
+      M.current && (M.current(), M.current = null), H.current = null, L();
+      const t = k.current?.activeEditor;
       if (!t) return;
       const i = t.helpers?.structuredContentCommands;
       if (!i) return;
-      const v = e.group || `group-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`, b = i.createTagObject?.({
+      const v = e.group || `group-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`, F = i.createTagObject?.({
         group: v
       });
       if ((e.mode || "inline") === "inline" ? t.commands.insertStructuredContentInline?.({
         attrs: {
           alias: e.alias,
-          tag: b
+          tag: F
         },
         text: e.alias
       }) : t.commands.insertStructuredContentBlock?.({
         attrs: {
           alias: e.alias,
-          tag: b
+          tag: F
         },
         text: e.alias
       })) {
-        e.group || Z(e.id, { tag: b }), D(!1);
+        e.group || Z(e.id, { tag: F }), D(!1);
         const C = Q(t);
-        z(C), y?.(C);
+        B(C), y?.(C);
       }
     },
-    [Z, H, y]
-  ), Te = S(() => {
-    D(!1), W.current = null, H(), M.current && (M.current(), M.current = null);
-  }, [H]), Ee = S(() => {
-    if (!F.current?.activeEditor || p.length === 0) return;
-    const e = p.findIndex((i) => i.id === V), t = e >= 0 ? (e + 1) % p.length : 0;
-    _(p[t].id);
-  }, [p, V, _]), Ie = S(() => {
-    if (!F.current?.activeEditor || p.length === 0) return;
-    const e = p.findIndex((i) => i.id === V), t = e > 0 ? e - 1 : p.length - 1;
-    _(p[t].id);
-  }, [p, V, _]), Me = S(
+    [Z, L, y]
+  ), Te = T(() => {
+    D(!1), H.current = null, L(), M.current && (M.current(), M.current = null);
+  }, [L]), Ee = T(() => {
+    if (!k.current?.activeEditor || u.length === 0) return;
+    const e = u.findIndex((i) => i.id === V), t = e >= 0 ? (e + 1) % u.length : 0;
+    $(u[t].id);
+  }, [u, V, $]), Ie = T(() => {
+    if (!k.current?.activeEditor || u.length === 0) return;
+    const e = u.findIndex((i) => i.id === V), t = e > 0 ? e - 1 : u.length - 1;
+    $(u[t].id);
+  }, [u, V, $]), Me = T(
     async (e) => {
-      const { fileName: t = "document", triggerDownload: i = !0 } = e || {}, v = await F.current?.export({
+      const { fileName: t = "document", triggerDownload: i = !0 } = e || {}, v = await k.current?.export({
         exportType: ["docx"],
         exportedName: t,
         triggerDownload: i
-      }), b = F.current?.activeEditor;
-      if (b) {
-        const c = Q(b);
-        q?.({ fields: c, blob: i ? void 0 : v, fileName: t });
+      }), F = k.current?.activeEditor;
+      if (F) {
+        const g = Q(F);
+        U?.({ fields: g, blob: i ? void 0 : v, fileName: t });
       }
       return v;
     },
-    [q]
+    [U]
   );
-  Be(d, () => ({
+  We(l, () => ({
     insertField: (e) => K("inline", e),
     insertBlockField: (e) => K("block", e),
     updateField: Z,
     deleteField: ae,
-    selectField: _,
+    selectField: $,
     nextField: Ee,
     previousField: Ie,
-    getFields: () => p,
+    getFields: () => u,
     exportTemplate: Me,
-    getSuperDoc: () => F.current
+    getSuperDoc: () => k.current
   }));
-  const Re = u.component || We, xe = a.component || Le, $ = Pe(N);
+  const Re = c.component || He, me = d.component || Pe;
   return /* @__PURE__ */ o("div", { className: `superdoc-template-builder ${A || ""}`, style: X, children: [
     /* @__PURE__ */ o("div", { style: { display: "flex", gap: "20px" }, children: [
-      a.position === "left" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
-        xe,
+      d.position === "left" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
+        me,
         {
-          fields: p,
-          onSelect: (e) => _(e.id),
+          fields: u,
+          onSelect: (e) => $(e.id),
           onDelete: ae,
           onUpdate: (e) => Z(e.id, e),
           selectedFieldId: V || void 0
         }
       ) }),
       /* @__PURE__ */ o("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
-        $?.renderDefaultContainer && /* @__PURE__ */ r(
+        G?.renderDefaultContainer && /* @__PURE__ */ r(
           "div",
           {
             id: "superdoc-toolbar",
@@ -1075,11 +1089,11 @@ const We = ({
           }
         )
       ] }),
-      a.position === "right" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
-        xe,
+      d.position === "right" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
+        me,
         {
-          fields: p,
-          onSelect: (e) => _(e.id),
+          fields: u,
+          onSelect: (e) => $(e.id),
           onDelete: ae,
           onUpdate: (e) => Z(e.id, e),
           selectedFieldId: V || void 0
@@ -1090,23 +1104,23 @@ const We = ({
       Re,
       {
         isVisible: j,
-        position: m,
-        availableFields: l.available || [],
+        position: h,
+        availableFields: s.available || [],
         filteredFields: ee,
-        filterQuery: h,
-        allowCreate: l.allowCreate || !1,
+        filterQuery: b,
+        allowCreate: s.allowCreate || !1,
         onSelect: ke,
         onClose: Te,
         onCreateField: R,
-        existingFields: p,
+        existingFields: u,
         onSelectExisting: Se
       }
     )
   ] });
 });
-je.displayName = "SuperDocTemplateBuilder";
+Ge.displayName = "SuperDocTemplateBuilder";
 export {
-  Le as FieldList,
-  We as FieldMenu,
-  je as default
+  Pe as FieldList,
+  He as FieldMenu,
+  Ge as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdoc-dev/template-builder",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "React template builder component for SuperDoc",
   "type": "module",
   "main": "./dist/index.js",
@@ -54,7 +54,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "superdoc": "^0.35.3"
+    "superdoc": "^1.5.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",