@superdoc-dev/template-builder 0.2.0-next.3 → 0.2.0-next.5

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import Ae, { useState as z, useEffect as ue, useMemo as ve, useCallback as C, forwardRef as Me, useRef as Z, useImperativeHandle as Ie } from "react";
-var ce = { exports: {} }, se = {};
+import Ae, { useState as Y, useEffect as pe, useMemo as ve, useCallback as C, forwardRef as Ie, useRef as te, useImperativeHandle as Me } from "react";
+var de = { exports: {} }, ae = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -11,27 +11,27 @@ var ce = { exports: {} }, se = {};
  */
 var Ee;
 function De() {
-  if (Ee) return se;
+  if (Ee) return ae;
   Ee = 1;
-  var a = Symbol.for("react.transitional.element"), x = Symbol.for("react.fragment");
-  function m(c, n, i) {
-    var F = null;
-    if (i !== void 0 && (F = "" + i), n.key !== void 0 && (F = "" + n.key), "key" in n) {
-      i = {};
-      for (var D in n)
-        D !== "key" && (i[D] = n[D]);
-    } else i = n;
-    return n = i.ref, {
-      $$typeof: a,
-      type: c,
-      key: F,
-      ref: n !== void 0 ? n : null,
-      props: i
+  var i = Symbol.for("react.transitional.element"), b = Symbol.for("react.fragment");
+  function h(d, r, l) {
+    var S = null;
+    if (l !== void 0 && (S = "" + l), r.key !== void 0 && (S = "" + r.key), "key" in r) {
+      l = {};
+      for (var N in r)
+        N !== "key" && (l[N] = r[N]);
+    } else l = r;
+    return r = l.ref, {
+      $$typeof: i,
+      type: d,
+      key: S,
+      ref: r !== void 0 ? r : null,
+      props: l
     };
   }
-  return se.Fragment = x, se.jsx = m, se.jsxs = m, se;
+  return ae.Fragment = b, ae.jsx = h, ae.jsxs = h, ae;
 }
-var ae = {};
+var ie = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -44,123 +44,123 @@ var ae = {};
 var Re;
 function Le() {
   return Re || (Re = 1, process.env.NODE_ENV !== "production" && (function() {
-    function a(e) {
+    function i(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === fe ? null : e.displayName || e.name || null;
+        return e.$$typeof === W ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case O:
+        case U:
           return "Fragment";
-        case y:
+        case p:
           return "Profiler";
-        case K:
+        case q:
           return "StrictMode";
-        case g:
+        case z:
           return "Suspense";
-        case v:
+        case a:
           return "SuspenseList";
-        case W:
+        case T:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case J:
+          case re:
             return "Portal";
-          case A:
+          case M:
             return e.displayName || "Context";
           case $:
             return (e._context.displayName || "Context") + ".Consumer";
-          case l:
+          case X:
             var s = e.render;
             return e = e.displayName, e || (e = s.displayName || s.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case T:
-            return s = e.displayName || null, s !== null ? s : a(e.type) || "Memo";
-          case k:
+          case v:
+            return s = e.displayName || null, s !== null ? s : i(e.type) || "Memo";
+          case R:
             s = e._payload, e = e._init;
             try {
-              return a(e(s));
+              return i(e(s));
             } catch {
             }
         }
       return null;
     }
-    function x(e) {
+    function b(e) {
       return "" + e;
     }
-    function m(e) {
+    function h(e) {
       try {
-        x(e);
+        b(e);
         var s = !1;
       } catch {
         s = !0;
       }
       if (s) {
         s = console;
-        var u = s.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return u.call(
+        var f = s.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return f.call(
           s,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
-        ), x(e);
+          u
+        ), b(e);
       }
     }
-    function c(e) {
-      if (e === O) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === k)
+    function d(e) {
+      if (e === U) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === R)
         return "<...>";
       try {
-        var s = a(e);
+        var s = i(e);
         return s ? "<" + s + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function n() {
-      var e = ee.A;
+    function r() {
+      var e = P.A;
       return e === null ? null : e.getOwner();
     }
-    function i() {
+    function l() {
       return Error("react-stack-top-frame");
     }
-    function F(e) {
-      if (ie.call(e, "key")) {
+    function S(e) {
+      if (le.call(e, "key")) {
         var s = Object.getOwnPropertyDescriptor(e, "key").get;
         if (s && s.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function D(e, s) {
-      function u() {
-        M || (M = !0, console.error(
+    function N(e, s) {
+      function f() {
+        D || (D = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           s
         ));
       }
-      u.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: u,
+      f.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: f,
         configurable: !0
       });
     }
-    function U() {
-      var e = a(this.type);
-      return re[e] || (re[e] = !0, console.error(
+    function G() {
+      var e = i(this.type);
+      return oe[e] || (oe[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function G(e, s, u, d, B, oe) {
-      var h = u.ref;
+    function J(e, s, f, u, B, Z) {
+      var y = f.ref;
       return e = {
-        $$typeof: L,
+        $$typeof: k,
         type: e,
         key: s,
-        props: u,
-        _owner: d
-      }, (h !== void 0 ? h : null) !== null ? Object.defineProperty(e, "ref", {
+        props: f,
+        _owner: u
+      }, (y !== void 0 ? y : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: U
+        get: G
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -180,122 +180,122 @@ function Le() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: oe
+        value: Z
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function P(e, s, u, d, B, oe) {
-      var h = s.children;
-      if (h !== void 0)
-        if (d)
-          if (te(h)) {
-            for (d = 0; d < h.length; d++)
-              N(h[d]);
-            Object.freeze && Object.freeze(h);
+    function A(e, s, f, u, B, Z) {
+      var y = s.children;
+      if (y !== void 0)
+        if (u)
+          if (ne(y)) {
+            for (u = 0; u < y.length; u++)
+              O(y[u]);
+            Object.freeze && Object.freeze(y);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else N(h);
-      if (ie.call(s, "key")) {
-        h = a(e);
-        var j = Object.keys(s).filter(function(pe) {
-          return pe !== "key";
+        else O(y);
+      if (le.call(s, "key")) {
+        y = i(e);
+        var _ = Object.keys(s).filter(function(fe) {
+          return fe !== "key";
         });
-        d = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", q[h + d] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
+        u = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", Q[y + u] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          d,
-          h,
-          j,
-          h
-        ), q[h + d] = !0);
+          u,
+          y,
+          _,
+          y
+        ), Q[y + u] = !0);
       }
-      if (h = null, u !== void 0 && (m(u), h = "" + u), F(s) && (m(s.key), h = "" + s.key), "key" in s) {
-        u = {};
-        for (var X in s)
-          X !== "key" && (u[X] = s[X]);
-      } else u = s;
-      return h && D(
-        u,
+      if (y = null, f !== void 0 && (h(f), y = "" + f), S(s) && (h(s.key), y = "" + s.key), "key" in s) {
+        f = {};
+        for (var K in s)
+          K !== "key" && (f[K] = s[K]);
+      } else f = s;
+      return y && N(
+        f,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), G(
+      ), J(
         e,
-        h,
-        u,
-        n(),
+        y,
+        f,
+        r(),
         B,
-        oe
+        Z
       );
     }
-    function N(e) {
-      R(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? R(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function O(e) {
+      E(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === R && (e._payload.status === "fulfilled" ? E(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function R(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === L;
+    function E(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === k;
     }
-    var Y = Ae, L = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), K = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), $ = Symbol.for("react.consumer"), A = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), g = Symbol.for("react.suspense"), v = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), W = Symbol.for("react.activity"), fe = Symbol.for("react.client.reference"), ee = Y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ie = Object.prototype.hasOwnProperty, te = Array.isArray, w = console.createTask ? console.createTask : function() {
+    var I = Ae, k = Symbol.for("react.transitional.element"), re = Symbol.for("react.portal"), U = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), p = Symbol.for("react.profiler"), $ = Symbol.for("react.consumer"), M = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), a = Symbol.for("react.suspense_list"), v = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), T = Symbol.for("react.activity"), W = Symbol.for("react.client.reference"), P = I.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, le = Object.prototype.hasOwnProperty, ne = Array.isArray, j = console.createTask ? console.createTask : function() {
       return null;
     };
-    Y = {
+    I = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var M, re = {}, I = Y.react_stack_bottom_frame.bind(
-      Y,
-      i
-    )(), ne = w(c(i)), q = {};
-    ae.Fragment = O, ae.jsx = function(e, s, u) {
-      var d = 1e4 > ee.recentlyCreatedOwnerStacks++;
-      return P(
+    var D, oe = {}, L = I.react_stack_bottom_frame.bind(
+      I,
+      l
+    )(), se = j(d(l)), Q = {};
+    ie.Fragment = U, ie.jsx = function(e, s, f) {
+      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return A(
         e,
         s,
-        u,
+        f,
         !1,
-        d ? Error("react-stack-top-frame") : I,
-        d ? w(c(e)) : ne
+        u ? Error("react-stack-top-frame") : L,
+        u ? j(d(e)) : se
       );
-    }, ae.jsxs = function(e, s, u) {
-      var d = 1e4 > ee.recentlyCreatedOwnerStacks++;
-      return P(
+    }, ie.jsxs = function(e, s, f) {
+      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return A(
         e,
         s,
-        u,
+        f,
         !0,
-        d ? Error("react-stack-top-frame") : I,
-        d ? w(c(e)) : ne
+        u ? Error("react-stack-top-frame") : L,
+        u ? j(d(e)) : se
       );
     };
-  })()), ae;
+  })()), ie;
 }
 var Te;
 function We() {
-  return Te || (Te = 1, process.env.NODE_ENV === "production" ? ce.exports = De() : ce.exports = Le()), ce.exports;
+  return Te || (Te = 1, process.env.NODE_ENV === "production" ? de.exports = De() : de.exports = Le()), de.exports;
 }
-var o = We();
+var n = We();
 const Be = ({
-  isVisible: a,
-  position: x,
-  availableFields: m,
-  filteredFields: c,
-  filterQuery: n,
-  allowCreate: i,
-  onSelect: F,
-  onClose: D,
-  onCreateField: U
+  isVisible: i,
+  position: b,
+  availableFields: h,
+  filteredFields: d,
+  filterQuery: r,
+  allowCreate: l,
+  onSelect: S,
+  onClose: N,
+  onCreateField: G
 }) => {
-  const [G, P] = z(!1), [N, R] = z("");
-  ue(() => {
-    a || (P(!1), R(""));
-  }, [a]);
-  const Y = ve(() => ({
+  const [J, A] = Y(!1), [O, E] = Y(""), [I, k] = Y("inline");
+  pe(() => {
+    i || (A(!1), E(""), k("inline"));
+  }, [i]);
+  const re = ve(() => ({
     position: "absolute",
-    left: x?.left,
-    top: x?.top,
+    left: b?.left,
+    top: b?.top,
     zIndex: 1e3,
     background: "white",
     border: "1px solid #ddd",
@@ -303,56 +303,57 @@ const Be = ({
     boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
     padding: "8px 0",
     minWidth: "200px"
-  }), [x]), L = c ?? m, J = !!n, O = ve(() => {
-    const l = [], g = /* @__PURE__ */ new Map();
-    return L.forEach((v) => {
-      const T = v.category?.trim() || "Uncategorized", k = g.get(T);
-      if (k !== void 0) {
-        l[k].fields.push(v);
+  }), [b]), U = d ?? h, q = !!r, p = ve(() => {
+    const a = [], v = /* @__PURE__ */ new Map();
+    return U.forEach((R) => {
+      const T = R.category?.trim() || "Uncategorized", W = v.get(T);
+      if (W !== void 0) {
+        a[W].fields.push(R);
         return;
       }
-      g.set(T, l.length), l.push({ category: T, fields: [v] });
-    }), l;
-  }, [L]), [K, y] = z({});
-  ue(() => {
-    y((l) => {
-      if (O.length === 0)
-        return Object.keys(l).length === 0 ? l : {};
-      const g = {};
-      let v = Object.keys(l).length !== O.length;
-      return O.forEach(({ category: T }, k) => {
-        const W = J ? !0 : l[T] ?? k === 0;
-        g[T] = W, !v && l[T] !== W && (v = !0);
-      }), v ? g : l;
+      v.set(T, a.length), a.push({ category: T, fields: [R] });
+    }), a;
+  }, [U]), [$, M] = Y({});
+  pe(() => {
+    M((a) => {
+      if (p.length === 0)
+        return Object.keys(a).length === 0 ? a : {};
+      const v = {};
+      let R = Object.keys(a).length !== p.length;
+      return p.forEach(({ category: T }, W) => {
+        const P = q ? !0 : a[T] ?? W === 0;
+        v[T] = P, !R && a[T] !== P && (R = !0);
+      }), R ? v : a;
     });
-  }, [O, J]);
-  const $ = C((l) => {
-    y((g) => ({
-      ...g,
-      [l]: !g[l]
+  }, [p, q]);
+  const X = C((a) => {
+    M((v) => ({
+      ...v,
+      [a]: !v[a]
     }));
   }, []);
-  if (!a) return null;
-  const A = async () => {
-    const l = N.trim();
-    if (!l) return;
-    const g = {
+  if (!i) return null;
+  const z = async () => {
+    const a = O.trim();
+    if (!a) return;
+    const v = {
       id: `custom_${Date.now()}`,
-      label: l,
-      category: "Custom"
+      label: a,
+      category: "Custom",
+      metadata: { mode: I }
     };
     try {
-      if (U) {
-        const v = await U(g);
-        F(v || g);
+      if (G) {
+        const R = await G(v);
+        S(R || v);
       } else
-        F(g);
+        S(v);
     } finally {
-      P(!1), R("");
+      A(!1), E(""), k("inline");
     }
   };
-  return /* @__PURE__ */ o.jsxs("div", { className: "superdoc-field-menu", style: Y, children: [
-    J && /* @__PURE__ */ o.jsx(
+  return /* @__PURE__ */ n.jsxs("div", { className: "superdoc-field-menu", style: re, children: [
+    q && /* @__PURE__ */ n.jsx(
       "div",
       {
         style: {
@@ -360,23 +361,23 @@ const Be = ({
           borderBottom: "1px solid #f0f0f0",
           marginBottom: "4px"
         },
-        children: /* @__PURE__ */ o.jsxs("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
+        children: /* @__PURE__ */ n.jsxs("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
           "Filtering results for",
-          /* @__PURE__ */ o.jsx(
+          /* @__PURE__ */ n.jsx(
             "span",
             {
               style: { fontWeight: 600, color: "#111827", marginLeft: "4px" },
-              children: n
+              children: r
             }
           )
         ] })
       }
     ),
-    i && !G && /* @__PURE__ */ o.jsx(
+    l && !J && /* @__PURE__ */ n.jsx(
       "div",
       {
         className: "field-menu-item",
-        onClick: () => P(!0),
+        onClick: () => A(!0),
         style: {
           padding: "8px 16px",
           cursor: "pointer",
@@ -386,16 +387,16 @@ const Be = ({
         children: "+ Create New Field"
       }
     ),
-    i && G && /* @__PURE__ */ o.jsxs("div", { style: { padding: "8px 16px" }, children: [
-      /* @__PURE__ */ o.jsx(
+    l && J && /* @__PURE__ */ n.jsxs("div", { style: { padding: "8px 16px" }, children: [
+      /* @__PURE__ */ n.jsx(
         "input",
         {
           type: "text",
-          value: N,
+          value: O,
           placeholder: "Field name...",
-          onChange: (l) => R(l.target.value),
-          onKeyDown: (l) => {
-            l.key === "Enter" && A(), l.key === "Escape" && (P(!1), R(""));
+          onChange: (a) => E(a.target.value),
+          onKeyDown: (a) => {
+            a.key === "Enter" && z(), a.key === "Escape" && (A(!1), E(""), k("inline"));
           },
           autoFocus: !0,
           style: {
@@ -406,7 +407,44 @@ const Be = ({
           }
         }
       ),
-      /* @__PURE__ */ o.jsxs(
+      /* @__PURE__ */ n.jsxs(
+        "div",
+        {
+          style: {
+            marginTop: "8px",
+            display: "flex",
+            gap: "12px",
+            fontSize: "13px"
+          },
+          children: [
+            /* @__PURE__ */ n.jsxs("label", { style: { display: "flex", alignItems: "center", gap: "4px", cursor: "pointer" }, children: [
+              /* @__PURE__ */ n.jsx(
+                "input",
+                {
+                  type: "radio",
+                  value: "inline",
+                  checked: I === "inline",
+                  onChange: () => k("inline")
+                }
+              ),
+              "Inline"
+            ] }),
+            /* @__PURE__ */ n.jsxs("label", { style: { display: "flex", alignItems: "center", gap: "4px", cursor: "pointer" }, children: [
+              /* @__PURE__ */ n.jsx(
+                "input",
+                {
+                  type: "radio",
+                  value: "block",
+                  checked: I === "block",
+                  onChange: () => k("block")
+                }
+              ),
+              "Block"
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n.jsxs(
         "div",
         {
           style: {
@@ -415,27 +453,27 @@ const Be = ({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ n.jsx(
               "button",
               {
-                onClick: A,
-                disabled: !N.trim(),
+                onClick: z,
+                disabled: !O.trim(),
                 style: {
                   padding: "4px 12px",
-                  background: N.trim() ? "#0066cc" : "#ccc",
+                  background: O.trim() ? "#0066cc" : "#ccc",
                   color: "white",
                   border: "none",
                   borderRadius: "3px",
-                  cursor: N.trim() ? "pointer" : "not-allowed"
+                  cursor: O.trim() ? "pointer" : "not-allowed"
                 },
                 children: "Create"
               }
             ),
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ n.jsx(
               "button",
               {
                 onClick: () => {
-                  P(!1), R("");
+                  A(!1), E(""), k("inline");
                 },
                 style: {
                   padding: "4px 12px",
@@ -451,7 +489,7 @@ const Be = ({
         }
       )
     ] }),
-    i && m.length > 0 && /* @__PURE__ */ o.jsx(
+    l && h.length > 0 && /* @__PURE__ */ n.jsx(
       "div",
       {
         style: {
@@ -460,7 +498,7 @@ const Be = ({
         }
       }
     ),
-    O.length === 0 ? /* @__PURE__ */ o.jsx(
+    p.length === 0 ? /* @__PURE__ */ n.jsx(
       "div",
       {
         style: {
@@ -471,20 +509,20 @@ const Be = ({
         },
         children: "No matching fields"
       }
-    ) : O.map(({ category: l, fields: g }, v) => {
-      const T = !!K[l], k = `${Math.max(g.length * 40, 0)}px`;
-      return /* @__PURE__ */ o.jsxs(
+    ) : p.map(({ category: a, fields: v }, R) => {
+      const T = !!$[a], W = `${Math.max(v.length * 40, 0)}px`;
+      return /* @__PURE__ */ n.jsxs(
         "div",
         {
           style: {
-            borderTop: v === 0 && i ? void 0 : "1px solid #f0f0f0"
+            borderTop: R === 0 && l ? void 0 : "1px solid #f0f0f0"
           },
           children: [
-            /* @__PURE__ */ o.jsxs(
+            /* @__PURE__ */ n.jsxs(
               "button",
               {
                 type: "button",
-                onClick: () => $(l),
+                onClick: () => X(a),
                 style: {
                   width: "100%",
                   display: "flex",
@@ -498,13 +536,13 @@ const Be = ({
                   textAlign: "left"
                 },
                 children: [
-                  /* @__PURE__ */ o.jsxs("span", { children: [
-                    l,
+                  /* @__PURE__ */ n.jsxs("span", { children: [
+                    a,
                     " (",
-                    g.length,
+                    v.length,
                     ")"
                   ] }),
-                  /* @__PURE__ */ o.jsx(
+                  /* @__PURE__ */ n.jsx(
                     "span",
                     {
                       "aria-hidden": !0,
@@ -523,23 +561,23 @@ const Be = ({
                 ]
               }
             ),
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ n.jsx(
               "div",
               {
-                "data-category": l,
+                "data-category": a,
                 "aria-hidden": !T,
                 style: {
                   overflow: "hidden",
-                  maxHeight: T ? k : "0px",
+                  maxHeight: T ? W : "0px",
                   opacity: T ? 1 : 0,
                   transition: "max-height 0.2s ease, opacity 0.2s ease",
                   pointerEvents: T ? "auto" : "none"
                 },
-                children: /* @__PURE__ */ o.jsx("div", { style: { padding: T ? "4px 0" : 0 }, children: g.map((W) => /* @__PURE__ */ o.jsx(
+                children: /* @__PURE__ */ n.jsx("div", { style: { padding: T ? "4px 0" : 0 }, children: v.map((P) => /* @__PURE__ */ n.jsx(
                   "div",
                   {
                     className: "field-menu-item",
-                    onClick: () => F(W),
+                    onClick: () => S(P),
                     style: {
                       padding: "8px 16px",
                       cursor: "pointer",
@@ -547,28 +585,28 @@ const Be = ({
                       alignItems: "center",
                       justifyContent: "space-between"
                     },
-                    children: /* @__PURE__ */ o.jsx("span", { style: { fontWeight: 500 }, children: W.label })
+                    children: /* @__PURE__ */ n.jsx("span", { style: { fontWeight: 500 }, children: P.label })
                   },
-                  W.id
+                  P.id
                 )) })
               }
             )
           ]
         },
-        l
+        a
       );
     }),
-    /* @__PURE__ */ o.jsx(
+    /* @__PURE__ */ n.jsx(
       "div",
       {
         style: {
           borderTop: "1px solid #eee",
           marginTop: "4px"
         },
-        children: /* @__PURE__ */ o.jsx(
+        children: /* @__PURE__ */ n.jsx(
           "button",
           {
-            onClick: D,
+            onClick: N,
             style: {
               width: "100%",
               padding: "6px 16px",
@@ -584,11 +622,11 @@ const Be = ({
     )
   ] });
 }, Ve = ({
-  fields: a,
-  onSelect: x,
-  onDelete: m,
-  selectedFieldId: c
-}) => /* @__PURE__ */ o.jsxs(
+  fields: i,
+  onSelect: b,
+  onDelete: h,
+  selectedFieldId: d
+}) => /* @__PURE__ */ n.jsxs(
   "div",
   {
     className: "superdoc-field-list",
@@ -600,12 +638,12 @@ const Be = ({
       padding: "16px"
     },
     children: [
-      /* @__PURE__ */ o.jsxs("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
+      /* @__PURE__ */ n.jsxs("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
         "Template Fields (",
-        a.length,
+        i.length,
         ")"
       ] }),
-      a.length === 0 ? /* @__PURE__ */ o.jsxs(
+      i.length === 0 ? /* @__PURE__ */ n.jsxs(
         "div",
         {
           style: {
@@ -620,32 +658,32 @@ const Be = ({
             " to add a field."
           ]
         }
-      ) : /* @__PURE__ */ o.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: a.map((n) => /* @__PURE__ */ o.jsxs(
+      ) : /* @__PURE__ */ n.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: i.map((r) => /* @__PURE__ */ n.jsxs(
         "div",
         {
-          onClick: () => x(n),
+          onClick: () => b(r),
           style: {
             position: "relative",
             padding: "12px",
-            background: c === n.id ? "#eff6ff" : "#f9fafb",
-            border: c === n.id ? "1px solid #3b82f6" : "1px solid #e5e7eb",
+            background: d === r.id ? "#eff6ff" : "#f9fafb",
+            border: d === r.id ? "1px solid #3b82f6" : "1px solid #e5e7eb",
             borderRadius: "6px",
             cursor: "pointer",
             transition: "all 0.2s"
           },
-          onMouseEnter: (i) => {
-            c !== n.id && (i.currentTarget.style.background = "#f3f4f6");
+          onMouseEnter: (l) => {
+            d !== r.id && (l.currentTarget.style.background = "#f3f4f6");
           },
-          onMouseLeave: (i) => {
-            c !== n.id && (i.currentTarget.style.background = "#f9fafb");
+          onMouseLeave: (l) => {
+            d !== r.id && (l.currentTarget.style.background = "#f9fafb");
           },
-          title: n.alias,
+          title: r.alias,
           children: [
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ n.jsx(
               "button",
               {
-                onClick: (i) => {
-                  i.stopPropagation(), m(n.id);
+                onClick: (l) => {
+                  l.stopPropagation(), h(r.id);
                 },
                 style: {
                   position: "absolute",
@@ -661,14 +699,14 @@ const Be = ({
                   alignItems: "center",
                   justifyContent: "center"
                 },
-                onMouseEnter: (i) => {
-                  i.currentTarget.style.color = "#ef4444";
+                onMouseEnter: (l) => {
+                  l.currentTarget.style.color = "#ef4444";
                 },
-                onMouseLeave: (i) => {
-                  i.currentTarget.style.color = "#9ca3af";
+                onMouseLeave: (l) => {
+                  l.currentTarget.style.color = "#9ca3af";
                 },
                 title: "Delete field",
-                children: /* @__PURE__ */ o.jsx(
+                children: /* @__PURE__ */ n.jsx(
                   "svg",
                   {
                     width: "16",
@@ -676,7 +714,7 @@ const Be = ({
                     viewBox: "0 0 16 16",
                     fill: "none",
                     xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ o.jsx(
+                    children: /* @__PURE__ */ n.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",
@@ -690,386 +728,410 @@ const Be = ({
                 )
               }
             ),
-            /* @__PURE__ */ o.jsxs("div", { style: { paddingRight: "24px" }, children: [
-              /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ n.jsxs("div", { style: { paddingRight: "24px" }, children: [
+              /* @__PURE__ */ n.jsx(
                 "div",
                 {
                   style: {
                     fontWeight: "500",
                     fontSize: "14px",
-                    marginBottom: n.alias && n.alias !== n.id ? "4px" : "0"
+                    marginBottom: r.alias && r.alias !== r.id ? "4px" : "0"
                   },
-                  children: n.id
+                  children: r.id
                 }
               ),
-              n.alias && n.alias !== n.id && /* @__PURE__ */ o.jsx(
+              /* @__PURE__ */ n.jsxs(
                 "div",
                 {
                   style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
                     fontSize: "12px",
                     color: "#4b5563"
                   },
-                  children: n.alias
+                  children: [
+                    r.alias && r.alias !== r.id && /* @__PURE__ */ n.jsx("span", { children: r.alias }),
+                    r.mode && /* @__PURE__ */ n.jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          padding: "2px 6px",
+                          borderRadius: "4px",
+                          background: r.mode === "block" ? "#dbeafe" : "#f3f4f6",
+                          color: r.mode === "block" ? "#1e40af" : "#4b5563",
+                          fontWeight: "500"
+                        },
+                        children: r.mode
+                      }
+                    )
+                  ]
                 }
               )
             ] })
           ]
         },
-        n.id
+        r.id
       )) })
     ]
   }
-), xe = (a) => {
-  const x = a.helpers?.structuredContentCommands;
-  return x?.getStructuredContentTags ? (x.getStructuredContentTags(a.state) || []).map((c) => {
-    const i = (c?.node ?? c)?.attrs ?? {};
+), xe = (i) => {
+  const b = i.helpers?.structuredContentCommands;
+  return b?.getStructuredContentTags ? (b.getStructuredContentTags(i.state) || []).map((d) => {
+    const r = d?.node ?? d, l = r?.attrs ?? {}, N = (r?.type?.name || "").includes("Block") ? "block" : "inline";
     return {
-      id: i.id,
-      alias: i.alias || i.label || "",
-      tag: i.tag
+      id: l.id,
+      alias: l.alias || l.label || "",
+      tag: l.tag,
+      mode: N
     };
   }) : [];
-}, we = (a, x) => {
-  if (a === x) return !0;
-  if (a.length !== x.length) return !1;
-  for (let m = 0; m < a.length; m += 1) {
-    const c = a[m], n = x[m];
-    if (!n || c.id !== n.id || c.alias !== n.alias || c.tag !== n.tag || c.position !== n.position)
+}, je = (i, b) => {
+  if (i === b) return !0;
+  if (i.length !== b.length) return !1;
+  for (let h = 0; h < i.length; h += 1) {
+    const d = i[h], r = b[h];
+    if (!r || d.id !== r.id || d.alias !== r.alias || d.tag !== r.tag || d.position !== r.position || d.mode !== r.mode)
       return !1;
   }
   return !0;
-}, Ye = (a) => {
-  if (!a) return null;
-  if (a === !0)
+}, Ye = (i) => {
+  if (!i) return null;
+  if (i === !0)
     return {
       selector: "#superdoc-toolbar",
       config: {},
       renderDefaultContainer: !0
     };
-  if (typeof a == "string")
+  if (typeof i == "string")
     return {
-      selector: a,
+      selector: i,
       config: {},
       renderDefaultContainer: !1
     };
-  const { selector: x, ...m } = a;
+  const { selector: b, ...h } = i;
   return {
-    selector: x || "#superdoc-toolbar",
-    config: m,
-    renderDefaultContainer: x === void 0
+    selector: b || "#superdoc-toolbar",
+    config: h,
+    renderDefaultContainer: b === void 0
   };
-}, de = 10, $e = 250, ze = 300, _e = (a) => {
-  const x = window.innerWidth - $e - de, m = window.innerHeight - ze - de, c = Math.min(a.left, x), n = Math.min(a.top, m);
+}, ue = 10, $e = 250, ze = 300, we = (i) => {
+  const b = window.innerWidth - $e - ue, h = window.innerHeight - ze - ue, d = Math.min(i.left, b), r = Math.min(i.top, h);
   return new DOMRect(
-    Math.max(c, de),
-    Math.max(n, de),
-    a.width,
-    a.height
+    Math.max(d, ue),
+    Math.max(r, ue),
+    i.width,
+    i.height
   );
-}, He = Me((a, x) => {
+}, Ue = Ie((i, b) => {
   const {
-    document: m,
-    fields: c = {},
-    menu: n = {},
-    list: i = {},
-    toolbar: F,
-    onReady: D,
-    onTrigger: U,
-    onFieldInsert: G,
-    onFieldUpdate: P,
-    onFieldDelete: N,
-    onFieldsChange: R,
-    onFieldSelect: Y,
-    onFieldCreate: L,
-    className: J,
-    style: O,
-    documentHeight: K = "600px"
-  } = a, [y, $] = z(
-    c.initial || []
-  ), [A, l] = z(
-    null
-  ), [g, v] = z(!1), [T, k] = z(), [W, fe] = z(""), [ee, ie] = z(() => c.available || []), te = Z(null), w = Z(null), M = Z(null), re = Z(c);
-  re.current = c;
-  const I = Z(null), ne = Z(g);
-  ue(() => {
-    ne.current = g;
-  }, [g]);
-  const q = n.trigger || "{{", e = re.current.available || [], s = C(
+    document: h,
+    fields: d = {},
+    menu: r = {},
+    list: l = {},
+    toolbar: S,
+    onReady: N,
+    onTrigger: G,
+    onFieldInsert: J,
+    onFieldUpdate: A,
+    onFieldDelete: O,
+    onFieldsChange: E,
+    onFieldSelect: I,
+    onFieldCreate: k,
+    className: re,
+    style: U,
+    documentHeight: q = "600px"
+  } = i, [p, $] = Y(
+    d.initial || []
+  ), [M, X] = Y(null), [z, a] = Y(!1), [v, R] = Y(), [T, W] = Y(""), [P, le] = Y(() => d.available || []), ne = te(null), j = te(null), D = te(null), oe = te(d);
+  oe.current = d;
+  const L = te(null), se = te(z);
+  pe(() => {
+    se.current = z;
+  }, [z]);
+  const Q = r.trigger || "{{", e = oe.current.available || [], s = C(
     (t) => {
-      const r = t.trim().toLowerCase();
-      return r ? e.filter((b) => {
-        const E = b.label.toLowerCase(), S = b.category?.toLowerCase() || "";
-        return E.includes(r) || S.includes(r);
+      const o = t.trim().toLowerCase();
+      return o ? e.filter((c) => {
+        const m = c.label.toLowerCase(), F = c.category?.toLowerCase() || "";
+        return m.includes(o) || F.includes(o);
       }) : e;
     },
     [e]
-  ), u = C(
+  ), f = C(
     (t) => {
-      fe(t), ie(s(t));
+      W(t), le(s(t));
     },
     [s]
-  ), d = C(() => {
-    u("");
-  }, [u]), B = C(
-    (t, r) => {
-      if (!w.current?.activeEditor) return !1;
-      const b = w.current.activeEditor, E = y, S = t === "inline" ? b.commands.insertStructuredContentInline?.({
+  ), u = C(() => {
+    f("");
+  }, [f]), B = C(
+    (t, o) => {
+      if (!j.current?.activeEditor) return !1;
+      const c = j.current.activeEditor, m = p, F = t === "inline" ? c.commands.insertStructuredContentInline?.({
         attrs: {
-          alias: r.alias,
-          tag: r.metadata ? JSON.stringify(r.metadata) : r.category
+          alias: o.alias,
+          tag: o.metadata ? JSON.stringify(o.metadata) : o.category
         },
-        text: r.defaultValue || r.alias
-      }) : b.commands.insertStructuredContentBlock?.({
+        text: o.defaultValue || o.alias
+      }) : c.commands.insertStructuredContentBlock?.({
         attrs: {
-          alias: r.alias,
-          tag: r.metadata ? JSON.stringify(r.metadata) : r.category
+          alias: o.alias,
+          tag: o.metadata ? JSON.stringify(o.metadata) : o.category
         },
-        text: r.defaultValue || r.alias
+        text: o.defaultValue || o.alias
       });
-      if (S) {
-        const _ = xe(b);
-        $(_), R?.(_);
-        const f = _.find(
-          (p) => !E.some((H) => H.id === p.id)
+      if (F) {
+        const w = xe(c);
+        $(w), E?.(w);
+        const x = w.find(
+          (g) => !m.some((H) => H.id === g.id)
         );
-        f && G?.(f);
+        x && J?.(x);
       }
-      return S;
+      return F;
     },
-    [G, R, y]
-  ), oe = C(
-    (t, r) => {
-      if (!w.current?.activeEditor) return !1;
-      const E = w.current.activeEditor.commands.updateStructuredContentById?.(t, {
-        attrs: r
+    [J, E, p]
+  ), Z = C(
+    (t, o) => {
+      if (!j.current?.activeEditor) return !1;
+      const m = j.current.activeEditor.commands.updateStructuredContentById?.(t, {
+        attrs: o
       });
-      return E && $((S) => {
-        const _ = S.map(
-          (p) => p.id === t ? { ...p, ...r } : p
+      return m && $((F) => {
+        const w = F.map(
+          (g) => g.id === t ? { ...g, ...o } : g
         );
-        R?.(_);
-        const f = _.find((p) => p.id === t);
-        return f && P?.(f), _;
-      }), E;
+        E?.(w);
+        const x = w.find((g) => g.id === t);
+        return x && A?.(x), w;
+      }), m;
     },
-    [P, R]
-  ), h = C(
+    [A, E]
+  ), y = C(
     (t) => {
-      const r = w.current?.activeEditor;
-      if (!r) {
+      const o = j.current?.activeEditor;
+      if (!o) {
         console.warn(
           "[SuperDocTemplateBuilder] deleteField called without active editor"
         );
-        let f = !1;
-        return $((p) => {
-          if (!p.some((V) => V.id === t)) return p;
-          const H = p.filter((V) => V.id !== t);
-          return f = !0, R?.(H), H;
-        }), f && (N?.(t), l((p) => p === t ? null : p)), f;
+        let x = !1;
+        return $((g) => {
+          if (!g.some((V) => V.id === t)) return g;
+          const H = g.filter((V) => V.id !== t);
+          return x = !0, E?.(H), H;
+        }), x && (O?.(t), X((g) => g === t ? null : g)), x;
       }
-      let b = !1;
+      let c = !1;
       try {
-        b = r.commands.deleteStructuredContentById?.(t) ?? !1;
-      } catch (f) {
+        c = o.commands.deleteStructuredContentById?.(t) ?? !1;
+      } catch (x) {
         console.error(
           "[SuperDocTemplateBuilder] Delete command failed:",
-          f
+          x
         );
       }
-      let E = xe(r);
-      const S = E.some((f) => f.id === t);
-      !b && S && (E = E.filter((f) => f.id !== t));
-      let _ = !1;
-      return $((f) => {
-        if (we(f, E))
-          return f;
-        const p = f.some((V) => V.id === t), H = E.some((V) => V.id === t);
-        return p && !H && (_ = !0), R?.(E), E;
-      }), _ && (N?.(t), l((f) => f === t ? null : f)), b || _;
+      let m = xe(o);
+      const F = m.some((x) => x.id === t);
+      !c && F && (m = m.filter((x) => x.id !== t));
+      let w = !1;
+      return $((x) => {
+        if (je(x, m))
+          return x;
+        const g = x.some((V) => V.id === t), H = m.some((V) => V.id === t);
+        return g && !H && (w = !0), E?.(m), m;
+      }), w && (O?.(t), X((x) => x === t ? null : x)), c || w;
     },
-    [N, R]
-  ), j = C(
+    [O, E]
+  ), _ = C(
     (t) => {
-      if (!w.current?.activeEditor) return;
-      w.current.activeEditor.commands.selectStructuredContentById?.(t), l(t);
-      const b = y.find((E) => E.id === t);
-      b && Y?.(b);
+      if (!j.current?.activeEditor) return;
+      j.current.activeEditor.commands.selectStructuredContentById?.(t), X(t);
+      const c = p.find((m) => m.id === t);
+      c && I?.(c);
     },
-    [y, Y]
-  ), X = C(
+    [p, I]
+  ), K = C(
     (t) => {
       if (!t) return;
-      const r = xe(t);
-      $((b) => we(b, r) ? b : (R?.(r), r));
+      const o = xe(t);
+      $((c) => je(c, o) ? c : (E?.(o), o));
     },
-    [R]
+    [E]
   );
-  ue(() => te.current ? ((async () => {
-    const { SuperDoc: r } = await import("superdoc"), b = {
-      selector: te.current,
-      document: m?.source,
-      documentMode: m?.mode || "editing",
+  pe(() => ne.current ? ((async () => {
+    const { SuperDoc: o } = await import("superdoc"), c = {
+      selector: ne.current,
+      document: h?.source,
+      documentMode: h?.mode || "editing",
       onReady: () => {
-        if (E.activeEditor) {
-          const S = E.activeEditor;
-          S.on("update", ({ editor: _ }) => {
-            const { state: f } = _, { from: p } = f.selection;
-            if (p >= q.length) {
-              const me = p - q.length;
-              if (f.doc.textBetween(me, p) === q) {
-                const he = _.view.coordsAtPos(p), be = _e(
+        if (m.activeEditor) {
+          const F = m.activeEditor;
+          F.on("update", ({ editor: w }) => {
+            const { state: x } = w, { from: g } = x.selection;
+            if (g >= Q.length) {
+              const me = g - Q.length;
+              if (x.doc.textBetween(me, g) === Q) {
+                const he = w.view.coordsAtPos(g), be = we(
                   new DOMRect(he.left, he.top, 0, 0)
                 ), ye = () => {
-                  const le = w.current?.activeEditor;
-                  if (!le) return;
-                  const Oe = le.state.selection.from, Pe = le.state.tr.delete(me, Oe);
-                  le.view.dispatch(Pe);
+                  const ce = j.current?.activeEditor;
+                  if (!ce) return;
+                  const Oe = ce.state.selection.from, Pe = ce.state.tr.delete(me, Oe);
+                  ce.view.dispatch(Pe);
                 };
-                M.current = ye, I.current = p, k(be), v(!0), d(), U?.({
-                  position: { from: me, to: p },
+                D.current = ye, L.current = g, R(be), a(!0), u(), G?.({
+                  position: { from: me, to: g },
                   bounds: be,
                   cleanup: ye
                 });
                 return;
               }
             }
-            if (!ne.current)
+            if (!se.current)
               return;
-            if (I.current == null) {
-              v(!1), d();
+            if (L.current == null) {
+              a(!1), u();
               return;
             }
-            if (p < I.current) {
-              v(!1), I.current = null, d();
+            if (g < L.current) {
+              a(!1), L.current = null, u();
               return;
             }
-            const H = f.doc.textBetween(
-              I.current,
-              p
+            const H = x.doc.textBetween(
+              L.current,
+              g
             );
-            u(H);
-            const V = _.view.coordsAtPos(p), Ne = _e(
+            f(H);
+            const V = w.view.coordsAtPos(g), Ne = we(
               new DOMRect(V.left, V.top, 0, 0)
             );
-            k(Ne);
-          }), S.on("update", () => {
-            X(S);
-          }), X(S);
+            R(Ne);
+          }), F.on("update", () => {
+            K(F);
+          }), K(F);
         }
-        D?.();
+        N?.();
       }
-    }, E = new r({
-      ...b,
-      ...Q && {
-        toolbar: Q.selector,
+    }, m = new o({
+      ...c,
+      ...ee && {
+        toolbar: ee.selector,
         modules: {
           toolbar: {
-            selector: Q.selector,
-            toolbarGroups: Q.config.toolbarGroups || ["center"],
-            excludeItems: Q.config.excludeItems || [],
-            ...Q.config
+            selector: ee.selector,
+            toolbarGroups: ee.config.toolbarGroups || ["center"],
+            excludeItems: ee.config.excludeItems || [],
+            ...ee.config
           }
         }
       }
     });
-    w.current = E;
+    j.current = m;
   })(), () => {
-    M.current = null, I.current = null;
-    const r = w.current;
-    r && typeof r.destroy == "function" && r.destroy(), w.current = null;
+    D.current = null, L.current = null;
+    const o = j.current;
+    o && typeof o.destroy == "function" && o.destroy(), j.current = null;
   }) : void 0, [
-    m?.source,
-    m?.mode,
-    q,
-    X,
-    D,
-    U,
-    F
+    h?.source,
+    h?.mode,
+    Q,
+    K,
+    N,
+    G,
+    S
   ]);
-  const pe = C(
+  const fe = C(
     async (t) => {
-      if (M.current && (M.current(), M.current = null), I.current = null, d(), t.id.startsWith("custom_") && L)
+      D.current && (D.current(), D.current = null), L.current = null, u();
+      const o = t.metadata?.mode || "inline";
+      if (t.id.startsWith("custom_") && k)
         try {
-          const r = await L(t);
-          if (r) {
-            B("inline", {
-              alias: r.label,
-              category: r.category,
-              metadata: r.metadata,
-              defaultValue: r.defaultValue
-            }), v(!1);
+          const c = await k(t);
+          if (c) {
+            const m = c.metadata?.mode || o;
+            B(m, {
+              alias: c.label,
+              category: c.category,
+              metadata: c.metadata,
+              defaultValue: c.defaultValue
+            }), a(!1);
             return;
           }
-        } catch (r) {
-          console.error("Field creation failed:", r);
+        } catch (c) {
+          console.error("Field creation failed:", c);
         }
-      B("inline", {
+      B(o, {
         alias: t.label,
         category: t.category,
         metadata: t.metadata,
         defaultValue: t.defaultValue
-      }), v(!1);
+      }), a(!1);
     },
-    [B, L, d]
-  ), je = C(() => {
-    v(!1), I.current = null, d(), M.current && (M.current(), M.current = null);
-  }, [d]), Ce = C(() => {
-    if (!w.current?.activeEditor || y.length === 0)
+    [B, k, u]
+  ), ke = C(() => {
+    a(!1), L.current = null, u(), D.current && (D.current(), D.current = null);
+  }, [u]), _e = C(() => {
+    if (!j.current?.activeEditor || p.length === 0)
       return;
-    const t = y.findIndex(
-      (b) => b.id === A
-    ), r = t >= 0 ? (t + 1) % y.length : 0;
-    j(y[r].id);
-  }, [y, A, j]), ke = C(() => {
-    if (!w.current?.activeEditor || y.length === 0)
+    const t = p.findIndex(
+      (c) => c.id === M
+    ), o = t >= 0 ? (t + 1) % p.length : 0;
+    _(p[o].id);
+  }, [p, M, _]), Ce = C(() => {
+    if (!j.current?.activeEditor || p.length === 0)
       return;
-    const t = y.findIndex(
-      (b) => b.id === A
-    ), r = t > 0 ? t - 1 : y.length - 1;
-    j(y[r].id);
-  }, [y, A, j]), Se = C(
+    const t = p.findIndex(
+      (c) => c.id === M
+    ), o = t > 0 ? t - 1 : p.length - 1;
+    _(p[o].id);
+  }, [p, M, _]), Se = C(
     async (t) => {
+      const { fileName: o = "document", triggerDownload: c = !0 } = t || {};
       try {
-        await w.current?.export({
+        return await j.current?.export({
           exportType: ["docx"],
-          exportedName: t?.fileName ? t?.fileName : "document"
+          exportedName: o,
+          triggerDownload: c
         });
-      } catch (r) {
-        throw console.error("Failed to export DOCX", r), r;
+      } catch (m) {
+        throw console.error("Failed to export DOCX", m), m;
       }
     },
     []
   );
-  Ie(x, () => ({
+  Me(b, () => ({
     insertField: (t) => B("inline", t),
     insertBlockField: (t) => B("block", t),
-    updateField: oe,
-    deleteField: h,
-    selectField: j,
-    nextField: Ce,
-    previousField: ke,
-    getFields: () => y,
+    updateField: Z,
+    deleteField: y,
+    selectField: _,
+    nextField: _e,
+    previousField: Ce,
+    getFields: () => p,
     exportTemplate: Se
   }));
-  const Fe = n.component || Be, ge = i.component || Ve, Q = Ye(F);
-  return /* @__PURE__ */ o.jsxs(
+  const Fe = r.component || Be, ge = l.component || Ve, ee = Ye(S);
+  return /* @__PURE__ */ n.jsxs(
     "div",
     {
-      className: `superdoc-template-builder ${J || ""}`,
-      style: O,
+      className: `superdoc-template-builder ${re || ""}`,
+      style: U,
       children: [
-        /* @__PURE__ */ o.jsxs("div", { style: { display: "flex", gap: "20px" }, children: [
-          i.position === "left" && /* @__PURE__ */ o.jsx("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ o.jsx(
+        /* @__PURE__ */ n.jsxs("div", { style: { display: "flex", gap: "20px" }, children: [
+          l.position === "left" && /* @__PURE__ */ n.jsx("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ n.jsx(
             ge,
             {
-              fields: y,
-              onSelect: (t) => j(t.id),
-              onDelete: h,
-              selectedFieldId: A || void 0
+              fields: p,
+              onSelect: (t) => _(t.id),
+              onDelete: y,
+              onUpdate: (t) => Z(t.id, t),
+              selectedFieldId: M || void 0
             }
           ) }),
-          /* @__PURE__ */ o.jsxs("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
-            Q?.renderDefaultContainer && /* @__PURE__ */ o.jsx(
+          /* @__PURE__ */ n.jsxs("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
+            ee?.renderDefaultContainer && /* @__PURE__ */ n.jsx(
               "div",
               {
                 id: "superdoc-toolbar",
@@ -1077,47 +1139,48 @@ const Be = ({
                 "data-testid": "template-builder-toolbar"
               }
             ),
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ n.jsx(
               "div",
               {
-                ref: te,
+                ref: ne,
                 className: "superdoc-template-builder-editor",
-                style: { height: K },
+                style: { height: q },
                 "data-testid": "template-builder-editor"
               }
             )
           ] }),
-          i.position === "right" && /* @__PURE__ */ o.jsx("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ o.jsx(
+          l.position === "right" && /* @__PURE__ */ n.jsx("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ n.jsx(
             ge,
             {
-              fields: y,
-              onSelect: (t) => j(t.id),
-              onDelete: h,
-              selectedFieldId: A || void 0
+              fields: p,
+              onSelect: (t) => _(t.id),
+              onDelete: y,
+              onUpdate: (t) => Z(t.id, t),
+              selectedFieldId: M || void 0
             }
           ) })
         ] }),
-        /* @__PURE__ */ o.jsx(
+        /* @__PURE__ */ n.jsx(
           Fe,
           {
-            isVisible: g,
-            position: T,
-            availableFields: c.available || [],
-            filteredFields: ee,
-            filterQuery: W,
-            allowCreate: c.allowCreate || !1,
-            onSelect: pe,
-            onClose: je,
-            onCreateField: L
+            isVisible: z,
+            position: v,
+            availableFields: d.available || [],
+            filteredFields: P,
+            filterQuery: T,
+            allowCreate: d.allowCreate || !1,
+            onSelect: fe,
+            onClose: ke,
+            onCreateField: k
           }
         )
       ]
     }
   );
 });
-He.displayName = "SuperDocTemplateBuilder";
+Ue.displayName = "SuperDocTemplateBuilder";
 export {
   Ve as FieldList,
   Be as FieldMenu,
-  He as default
+  Ue as default
 };