@superdoc-dev/template-builder 0.3.0 → 0.5.0

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