@superdoc-dev/template-builder 1.1.0-next.9 → 1.1.0

package/dist/index.js

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

package/dist/index.mjs

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

package/dist/types.d.ts

@@ -99,6 +99,8 @@ export interface SuperDocTemplateBuilderProps {
     menu?: MenuConfig;
     list?: ListConfig;
     toolbar?: boolean | string | ToolbarConfig;
+    /** Content Security Policy nonce for dynamically injected styles */
+    cspNonce?: string;
     onReady?: () => void;
     onTrigger?: (event: TriggerEvent) => void;
     onFieldInsert?: (field: TemplateField) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdoc-dev/template-builder",
-  "version": "1.1.0-next.9",
+  "version": "1.1.0",
   "description": "React template builder component for SuperDoc",
   "type": "module",
   "main": "./dist/index.js",