@superdoc-dev/template-builder 0.2.0-next.4 → 0.2.0-next.6

package/dist/index.mjs

@@ -1,301 +1,24 @@
-import Ae, { useState as U, useEffect as ue, useMemo as ve, useCallback as C, forwardRef as Me, useRef as K, useImperativeHandle as Ie } from "react";
-var ce = { exports: {} }, se = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Ee;
-function De() {
-  if (Ee) return se;
-  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
-    };
-  }
-  return se.Fragment = x, se.jsx = m, se.jsxs = m, se;
-}
-var ae = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Re;
-function Le() {
-  return Re || (Re = 1, process.env.NODE_ENV !== "production" && (function() {
-    function a(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === fe ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case O:
-          return "Fragment";
-        case y:
-          return "Profiler";
-        case ee:
-          return "StrictMode";
-        case g:
-          return "Suspense";
-        case v:
-          return "SuspenseList";
-        case W:
-          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:
-            return "Portal";
-          case A:
-            return e.displayName || "Context";
-          case $:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case l:
-            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:
-            s = e._payload, e = e._init;
-            try {
-              return a(e(s));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function x(e) {
-      return "" + e;
-    }
-    function m(e) {
-      try {
-        x(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(
-          s,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
-        ), x(e);
-      }
-    }
-    function c(e) {
-      if (e === O) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === k)
-        return "<...>";
-      try {
-        var s = a(e);
-        return s ? "<" + s + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function n() {
-      var e = te.A;
-      return e === null ? null : e.getOwner();
-    }
-    function i() {
-      return Error("react-stack-top-frame");
-    }
-    function F(e) {
-      if (ie.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(
-          "%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,
-        configurable: !0
-      });
-    }
-    function H() {
-      var e = a(this.type);
-      return ne[e] || (ne[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, X) {
-      var h = u.ref;
-      return e = {
-        $$typeof: L,
-        type: e,
-        key: s,
-        props: u,
-        _owner: d
-      }, (h !== void 0 ? h : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: H
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: B
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: X
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function P(e, s, u, d, B, X) {
-      var h = s.children;
-      if (h !== void 0)
-        if (d)
-          if (re(h)) {
-            for (d = 0; d < h.length; d++)
-              N(h[d]);
-            Object.freeze && Object.freeze(h);
-          } 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";
-        });
-        d = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", q[h + d] || (j = 0 < j.length ? "{" + j.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);
-      }
-      if (h = null, u !== void 0 && (m(u), h = "" + u), F(s) && (m(s.key), h = "" + s.key), "key" in s) {
-        u = {};
-        for (var Q in s)
-          Q !== "key" && (u[Q] = s[Q]);
-      } else u = s;
-      return h && D(
-        u,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), G(
-        e,
-        h,
-        u,
-        n(),
-        B,
-        X
-      );
-    }
-    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 R(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === L;
-    }
-    var Y = Ae, L = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), ee = 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"), te = Y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ie = Object.prototype.hasOwnProperty, re = Array.isArray, w = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    Y = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var M, ne = {}, I = Y.react_stack_bottom_frame.bind(
-      Y,
-      i
-    )(), oe = w(c(i)), q = {};
-    ae.Fragment = O, ae.jsx = function(e, s, u) {
-      var d = 1e4 > te.recentlyCreatedOwnerStacks++;
-      return P(
-        e,
-        s,
-        u,
-        !1,
-        d ? Error("react-stack-top-frame") : I,
-        d ? w(c(e)) : oe
-      );
-    }, ae.jsxs = function(e, s, u) {
-      var d = 1e4 > te.recentlyCreatedOwnerStacks++;
-      return P(
-        e,
-        s,
-        u,
-        !0,
-        d ? Error("react-stack-top-frame") : I,
-        d ? w(c(e)) : oe
-      );
-    };
-  })()), ae;
-}
-var Te;
-function We() {
-  return Te || (Te = 1, process.env.NODE_ENV === "production" ? ce.exports = De() : ce.exports = Le()), ce.exports;
-}
-var o = We();
-const Be = ({
-  isVisible: a,
-  position: x,
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { useState as T, useEffect as ee, useMemo as xe, useCallback as F, forwardRef as Ee, useRef as _, useImperativeHandle as De } from "react";
+const Ne = ({
+  isVisible: s,
+  position: f,
   availableFields: m,
   filteredFields: c,
   filterQuery: n,
-  allowCreate: i,
-  onSelect: F,
-  onClose: D,
-  onCreateField: H
+  allowCreate: p,
+  onSelect: H,
+  onClose: j,
+  onCreateField: U
 }) => {
-  const [G, P] = U(!1), [N, R] = U("");
-  ue(() => {
-    a || (P(!1), R(""));
-  }, [a]);
-  const Y = ve(() => ({
+  const [G, E] = T(!1), [S, y] = T(""), [A, k] = T("inline");
+  ee(() => {
+    s || (E(!1), y(""), k("inline"));
+  }, [s]);
+  const te = xe(() => ({
     position: "absolute",
-    left: x?.left,
-    top: x?.top,
+    left: f?.left,
+    top: f?.top,
     zIndex: 1e3,
     background: "white",
     border: "1px solid #ddd",
@@ -303,56 +26,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);
+  }), [f]), Q = c ?? m, X = !!n, u = xe(() => {
+    const r = [], x = /* @__PURE__ */ new Map();
+    return Q.forEach((v) => {
+      const h = v.category?.trim() || "Uncategorized", D = x.get(h);
+      if (D !== void 0) {
+        r[D].fields.push(v);
         return;
       }
-      g.set(T, l.length), l.push({ category: T, fields: [v] });
-    }), l;
-  }, [L]), [ee, y] = U({});
-  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;
+      x.set(h, r.length), r.push({ category: h, fields: [v] });
+    }), r;
+  }, [Q]), [P, I] = T({});
+  ee(() => {
+    I((r) => {
+      if (u.length === 0)
+        return Object.keys(r).length === 0 ? r : {};
+      const x = {};
+      let v = Object.keys(r).length !== u.length;
+      return u.forEach(({ category: h }, D) => {
+        const N = X ? !0 : r[h] ?? D === 0;
+        x[h] = N, !v && r[h] !== N && (v = !0);
+      }), v ? x : r;
     });
-  }, [O, J]);
-  const $ = C((l) => {
-    y((g) => ({
-      ...g,
-      [l]: !g[l]
+  }, [u, X]);
+  const $ = F((r) => {
+    I((x) => ({
+      ...x,
+      [r]: !x[r]
     }));
   }, []);
-  if (!a) return null;
-  const A = async () => {
-    const l = N.trim();
-    if (!l) return;
-    const g = {
+  if (!s) return null;
+  const W = async () => {
+    const r = S.trim();
+    if (!r) return;
+    const x = {
       id: `custom_${Date.now()}`,
-      label: l,
-      category: "Custom"
+      label: r,
+      category: "Custom",
+      metadata: { mode: A }
     };
     try {
-      if (H) {
-        const v = await H(g);
-        F(v || g);
+      if (U) {
+        const v = await U(x);
+        H(v || x);
       } else
-        F(g);
+        H(x);
     } finally {
-      P(!1), R("");
+      E(!1), y(""), k("inline");
     }
   };
-  return /* @__PURE__ */ o.jsxs("div", { className: "superdoc-field-menu", style: Y, children: [
-    J && /* @__PURE__ */ o.jsx(
+  return /* @__PURE__ */ g("div", { className: "superdoc-field-menu", style: te, children: [
+    X && /* @__PURE__ */ i(
       "div",
       {
         style: {
@@ -360,9 +84,9 @@ const Be = ({
           borderBottom: "1px solid #f0f0f0",
           marginBottom: "4px"
         },
-        children: /* @__PURE__ */ o.jsxs("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
+        children: /* @__PURE__ */ g("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
           "Filtering results for",
-          /* @__PURE__ */ o.jsx(
+          /* @__PURE__ */ i(
             "span",
             {
               style: { fontWeight: 600, color: "#111827", marginLeft: "4px" },
@@ -372,11 +96,11 @@ const Be = ({
         ] })
       }
     ),
-    i && !G && /* @__PURE__ */ o.jsx(
+    p && !G && /* @__PURE__ */ i(
       "div",
       {
         className: "field-menu-item",
-        onClick: () => P(!0),
+        onClick: () => E(!0),
         style: {
           padding: "8px 16px",
           cursor: "pointer",
@@ -386,16 +110,16 @@ const Be = ({
         children: "+ Create New Field"
       }
     ),
-    i && G && /* @__PURE__ */ o.jsxs("div", { style: { padding: "8px 16px" }, children: [
-      /* @__PURE__ */ o.jsx(
+    p && G && /* @__PURE__ */ g("div", { style: { padding: "8px 16px" }, children: [
+      /* @__PURE__ */ i(
         "input",
         {
           type: "text",
-          value: N,
+          value: S,
           placeholder: "Field name...",
-          onChange: (l) => R(l.target.value),
-          onKeyDown: (l) => {
-            l.key === "Enter" && A(), l.key === "Escape" && (P(!1), R(""));
+          onChange: (r) => y(r.target.value),
+          onKeyDown: (r) => {
+            r.key === "Enter" && W(), r.key === "Escape" && (E(!1), y(""), k("inline"));
           },
           autoFocus: !0,
           style: {
@@ -406,7 +130,66 @@ const Be = ({
           }
         }
       ),
-      /* @__PURE__ */ o.jsxs(
+      /* @__PURE__ */ g(
+        "div",
+        {
+          style: {
+            marginTop: "8px",
+            display: "flex",
+            gap: "12px",
+            fontSize: "13px"
+          },
+          children: [
+            /* @__PURE__ */ g(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  cursor: "pointer"
+                },
+                children: [
+                  /* @__PURE__ */ i(
+                    "input",
+                    {
+                      type: "radio",
+                      value: "inline",
+                      checked: A === "inline",
+                      onChange: () => k("inline")
+                    }
+                  ),
+                  "Inline"
+                ]
+              }
+            ),
+            /* @__PURE__ */ g(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  cursor: "pointer"
+                },
+                children: [
+                  /* @__PURE__ */ i(
+                    "input",
+                    {
+                      type: "radio",
+                      value: "block",
+                      checked: A === "block",
+                      onChange: () => k("block")
+                    }
+                  ),
+                  "Block"
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ g(
         "div",
         {
           style: {
@@ -415,27 +198,27 @@ const Be = ({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ i(
               "button",
               {
-                onClick: A,
-                disabled: !N.trim(),
+                onClick: W,
+                disabled: !S.trim(),
                 style: {
                   padding: "4px 12px",
-                  background: N.trim() ? "#0066cc" : "#ccc",
+                  background: S.trim() ? "#0066cc" : "#ccc",
                   color: "white",
                   border: "none",
                   borderRadius: "3px",
-                  cursor: N.trim() ? "pointer" : "not-allowed"
+                  cursor: S.trim() ? "pointer" : "not-allowed"
                 },
                 children: "Create"
               }
             ),
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ i(
               "button",
               {
                 onClick: () => {
-                  P(!1), R("");
+                  E(!1), y(""), k("inline");
                 },
                 style: {
                   padding: "4px 12px",
@@ -451,7 +234,7 @@ const Be = ({
         }
       )
     ] }),
-    i && m.length > 0 && /* @__PURE__ */ o.jsx(
+    p && m.length > 0 && /* @__PURE__ */ i(
       "div",
       {
         style: {
@@ -460,7 +243,7 @@ const Be = ({
         }
       }
     ),
-    O.length === 0 ? /* @__PURE__ */ o.jsx(
+    u.length === 0 ? /* @__PURE__ */ i(
       "div",
       {
         style: {
@@ -471,20 +254,20 @@ const Be = ({
         },
         children: "No matching fields"
       }
-    ) : O.map(({ category: l, fields: g }, v) => {
-      const T = !!ee[l], k = `${Math.max(g.length * 40, 0)}px`;
-      return /* @__PURE__ */ o.jsxs(
+    ) : u.map(({ category: r, fields: x }, v) => {
+      const h = !!P[r], D = `${Math.max(x.length * 40, 0)}px`;
+      return /* @__PURE__ */ g(
         "div",
         {
           style: {
-            borderTop: v === 0 && i ? void 0 : "1px solid #f0f0f0"
+            borderTop: v === 0 && p ? void 0 : "1px solid #f0f0f0"
           },
           children: [
-            /* @__PURE__ */ o.jsxs(
+            /* @__PURE__ */ g(
               "button",
               {
                 type: "button",
-                onClick: () => $(l),
+                onClick: () => $(r),
                 style: {
                   width: "100%",
                   display: "flex",
@@ -498,13 +281,13 @@ const Be = ({
                   textAlign: "left"
                 },
                 children: [
-                  /* @__PURE__ */ o.jsxs("span", { children: [
-                    l,
+                  /* @__PURE__ */ g("span", { children: [
+                    r,
                     " (",
-                    g.length,
+                    x.length,
                     ")"
                   ] }),
-                  /* @__PURE__ */ o.jsx(
+                  /* @__PURE__ */ i(
                     "span",
                     {
                       "aria-hidden": !0,
@@ -514,7 +297,7 @@ const Be = ({
                         height: "8px",
                         borderRight: "2px solid #666",
                         borderBottom: "2px solid #666",
-                        transform: T ? "rotate(45deg)" : "rotate(-45deg)",
+                        transform: h ? "rotate(45deg)" : "rotate(-45deg)",
                         transition: "transform 0.2s ease",
                         marginLeft: "12px"
                       }
@@ -523,23 +306,23 @@ const Be = ({
                 ]
               }
             ),
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ i(
               "div",
               {
-                "data-category": l,
-                "aria-hidden": !T,
+                "data-category": r,
+                "aria-hidden": !h,
                 style: {
                   overflow: "hidden",
-                  maxHeight: T ? k : "0px",
-                  opacity: T ? 1 : 0,
+                  maxHeight: h ? D : "0px",
+                  opacity: h ? 1 : 0,
                   transition: "max-height 0.2s ease, opacity 0.2s ease",
-                  pointerEvents: T ? "auto" : "none"
+                  pointerEvents: h ? "auto" : "none"
                 },
-                children: /* @__PURE__ */ o.jsx("div", { style: { padding: T ? "4px 0" : 0 }, children: g.map((W) => /* @__PURE__ */ o.jsx(
+                children: /* @__PURE__ */ i("div", { style: { padding: h ? "4px 0" : 0 }, children: x.map((N) => /* @__PURE__ */ i(
                   "div",
                   {
                     className: "field-menu-item",
-                    onClick: () => F(W),
+                    onClick: () => H(N),
                     style: {
                       padding: "8px 16px",
                       cursor: "pointer",
@@ -547,28 +330,28 @@ const Be = ({
                       alignItems: "center",
                       justifyContent: "space-between"
                     },
-                    children: /* @__PURE__ */ o.jsx("span", { style: { fontWeight: 500 }, children: W.label })
+                    children: /* @__PURE__ */ i("span", { style: { fontWeight: 500 }, children: N.label })
                   },
-                  W.id
+                  N.id
                 )) })
               }
             )
           ]
         },
-        l
+        r
       );
     }),
-    /* @__PURE__ */ o.jsx(
+    /* @__PURE__ */ i(
       "div",
       {
         style: {
           borderTop: "1px solid #eee",
           marginTop: "4px"
         },
-        children: /* @__PURE__ */ o.jsx(
+        children: /* @__PURE__ */ i(
           "button",
           {
-            onClick: D,
+            onClick: j,
             style: {
               width: "100%",
               padding: "6px 16px",
@@ -583,12 +366,12 @@ const Be = ({
       }
     )
   ] });
-}, Ve = ({
-  fields: a,
-  onSelect: x,
+}, Re = ({
+  fields: s,
+  onSelect: f,
   onDelete: m,
   selectedFieldId: c
-}) => /* @__PURE__ */ o.jsxs(
+}) => /* @__PURE__ */ g(
   "div",
   {
     className: "superdoc-field-list",
@@ -600,12 +383,12 @@ const Be = ({
       padding: "16px"
     },
     children: [
-      /* @__PURE__ */ o.jsxs("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
+      /* @__PURE__ */ g("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
         "Template Fields (",
-        a.length,
+        s.length,
         ")"
       ] }),
-      a.length === 0 ? /* @__PURE__ */ o.jsxs(
+      s.length === 0 ? /* @__PURE__ */ g(
         "div",
         {
           style: {
@@ -620,10 +403,10 @@ 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__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: s.map((n) => /* @__PURE__ */ g(
         "div",
         {
-          onClick: () => x(n),
+          onClick: () => f(n),
           style: {
             position: "relative",
             padding: "12px",
@@ -633,19 +416,19 @@ const Be = ({
             cursor: "pointer",
             transition: "all 0.2s"
           },
-          onMouseEnter: (i) => {
-            c !== n.id && (i.currentTarget.style.background = "#f3f4f6");
+          onMouseEnter: (p) => {
+            c !== n.id && (p.currentTarget.style.background = "#f3f4f6");
           },
-          onMouseLeave: (i) => {
-            c !== n.id && (i.currentTarget.style.background = "#f9fafb");
+          onMouseLeave: (p) => {
+            c !== n.id && (p.currentTarget.style.background = "#f9fafb");
           },
           title: n.alias,
           children: [
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ i(
               "button",
               {
-                onClick: (i) => {
-                  i.stopPropagation(), m(n.id);
+                onClick: (p) => {
+                  p.stopPropagation(), m(n.id);
                 },
                 style: {
                   position: "absolute",
@@ -661,14 +444,14 @@ const Be = ({
                   alignItems: "center",
                   justifyContent: "center"
                 },
-                onMouseEnter: (i) => {
-                  i.currentTarget.style.color = "#ef4444";
+                onMouseEnter: (p) => {
+                  p.currentTarget.style.color = "#ef4444";
                 },
-                onMouseLeave: (i) => {
-                  i.currentTarget.style.color = "#9ca3af";
+                onMouseLeave: (p) => {
+                  p.currentTarget.style.color = "#9ca3af";
                 },
                 title: "Delete field",
-                children: /* @__PURE__ */ o.jsx(
+                children: /* @__PURE__ */ i(
                   "svg",
                   {
                     width: "16",
@@ -676,7 +459,7 @@ const Be = ({
                     viewBox: "0 0 16 16",
                     fill: "none",
                     xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ o.jsx(
+                    children: /* @__PURE__ */ i(
                       "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,8 +473,8 @@ const Be = ({
                 )
               }
             ),
-            /* @__PURE__ */ o.jsxs("div", { style: { paddingRight: "24px" }, children: [
-              /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ g("div", { style: { paddingRight: "24px" }, children: [
+              /* @__PURE__ */ i(
                 "div",
                 {
                   style: {
@@ -702,14 +485,33 @@ const Be = ({
                   children: n.id
                 }
               ),
-              n.alias && n.alias !== n.id && /* @__PURE__ */ o.jsx(
+              /* @__PURE__ */ g(
                 "div",
                 {
                   style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
                     fontSize: "12px",
                     color: "#4b5563"
                   },
-                  children: n.alias
+                  children: [
+                    n.alias && n.alias !== n.id && /* @__PURE__ */ i("span", { children: n.alias }),
+                    n.mode && /* @__PURE__ */ i(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          padding: "2px 6px",
+                          borderRadius: "4px",
+                          background: n.mode === "block" ? "#dbeafe" : "#f3f4f6",
+                          color: n.mode === "block" ? "#1e40af" : "#4b5563",
+                          fontWeight: "500"
+                        },
+                        children: n.mode
+                      }
+                    )
+                  ]
                 }
               )
             ] })
@@ -719,356 +521,364 @@ const Be = ({
       )) })
     ]
   }
-), xe = (a) => {
-  const x = a.helpers?.structuredContentCommands;
-  return x?.getStructuredContentTags ? (x.getStructuredContentTags(a.state) || []).map((c) => {
-    const i = (c?.node ?? c)?.attrs ?? {};
+), ae = (s) => {
+  const f = s.helpers?.structuredContentCommands;
+  return f?.getStructuredContentTags ? (f.getStructuredContentTags(s.state) || []).map((c) => {
+    const n = c?.node ?? c, p = n?.attrs ?? {}, j = (n?.type?.name || "").includes("Block") ? "block" : "inline";
     return {
-      id: i.id,
-      alias: i.alias || i.label || "",
-      tag: i.tag
+      id: p.id,
+      alias: p.alias || p.label || "",
+      tag: p.tag,
+      mode: j
     };
   }) : [];
-}, 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)
+}, he = (s, f) => {
+  if (s === f) return !0;
+  if (s.length !== f.length) return !1;
+  for (let m = 0; m < s.length; m += 1) {
+    const c = s[m], n = f[m];
+    if (!n || c.id !== n.id || c.alias !== n.alias || c.tag !== n.tag || c.position !== n.position || c.mode !== n.mode)
       return !1;
   }
   return !0;
-}, Ye = (a) => {
-  if (!a) return null;
-  if (a === !0)
+}, Be = (s) => {
+  if (!s) return null;
+  if (s === !0)
     return {
       selector: "#superdoc-toolbar",
       config: {},
       renderDefaultContainer: !0
     };
-  if (typeof a == "string")
+  if (typeof s == "string")
     return {
-      selector: a,
+      selector: s,
       config: {},
       renderDefaultContainer: !1
     };
-  const { selector: x, ...m } = a;
+  const { selector: f, ...m } = s;
   return {
-    selector: x || "#superdoc-toolbar",
+    selector: f || "#superdoc-toolbar",
     config: m,
-    renderDefaultContainer: x === void 0
+    renderDefaultContainer: f === void 0
   };
-}, de = 10, $e = 250, Ue = 300, _e = (a) => {
-  const x = window.innerWidth - $e - de, m = window.innerHeight - Ue - de, c = Math.min(a.left, x), n = Math.min(a.top, m);
+}, Z = 10, Le = 250, He = 300, ye = (s) => {
+  const f = window.innerWidth - Le - Z, m = window.innerHeight - He - Z, c = Math.min(s.left, f), n = Math.min(s.top, m);
   return new DOMRect(
-    Math.max(c, de),
-    Math.max(n, de),
-    a.width,
-    a.height
+    Math.max(c, Z),
+    Math.max(n, Z),
+    s.width,
+    s.height
   );
-}, ze = Me((a, x) => {
+}, Pe = Ee((s, f) => {
   const {
     document: m,
     fields: c = {},
     menu: n = {},
-    list: i = {},
-    toolbar: F,
-    onReady: D,
-    onTrigger: H,
+    list: p = {},
+    toolbar: H,
+    onReady: j,
+    onTrigger: U,
     onFieldInsert: G,
-    onFieldUpdate: P,
-    onFieldDelete: N,
-    onFieldsChange: R,
-    onFieldSelect: Y,
-    onFieldCreate: L,
-    className: J,
-    style: O,
-    documentHeight: ee = "600px"
-  } = a, [y, $] = U(
+    onFieldUpdate: E,
+    onFieldDelete: S,
+    onFieldsChange: y,
+    onFieldSelect: A,
+    onFieldCreate: k,
+    className: te,
+    style: Q,
+    documentHeight: X = "600px"
+  } = s, [u, P] = T(
     c.initial || []
-  ), [A, l] = U(null), [g, v] = U(!1), [T, k] = U(), [W, fe] = U(""), [te, ie] = U(() => c.available || []), re = K(null), w = K(null), M = K(null), ne = K(c);
-  ne.current = c;
-  const I = K(null), oe = K(g);
-  ue(() => {
-    oe.current = g;
-  }, [g]);
-  const q = n.trigger || "{{", e = ne.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);
-      }) : e;
+  ), [I, $] = T(null), [W, r] = T(!1), [x, v] = T(), [h, D] = T(""), [N, be] = T(() => c.available || []), q = _(null), C = _(null), R = _(null), de = _(c);
+  de.current = c;
+  const B = _(null), ce = _(W);
+  ee(() => {
+    ce.current = W;
+  }, [W]);
+  const K = n.trigger || "{{", ne = de.current.available || [], ue = F(
+    (e) => {
+      const t = e.trim().toLowerCase();
+      return t ? ne.filter((o) => {
+        const l = o.label.toLowerCase(), w = o.category?.toLowerCase() || "";
+        return l.includes(t) || w.includes(t);
+      }) : ne;
     },
-    [e]
-  ), u = C(
-    (t) => {
-      fe(t), ie(s(t));
+    [ne]
+  ), re = F(
+    (e) => {
+      D(e), be(ue(e));
     },
-    [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?.({
+    [ue]
+  ), V = F(() => {
+    re("");
+  }, [re]), J = F(
+    (e, t) => {
+      if (!C.current?.activeEditor) return !1;
+      const o = C.current.activeEditor, l = u, w = e === "inline" ? o.commands.insertStructuredContentInline?.({
         attrs: {
-          alias: r.alias,
-          tag: r.metadata ? JSON.stringify(r.metadata) : r.category
+          alias: t.alias,
+          tag: t.metadata ? JSON.stringify(t.metadata) : t.category
         },
-        text: r.defaultValue || r.alias
-      }) : b.commands.insertStructuredContentBlock?.({
+        text: t.defaultValue || t.alias
+      }) : o.commands.insertStructuredContentBlock?.({
         attrs: {
-          alias: r.alias,
-          tag: r.metadata ? JSON.stringify(r.metadata) : r.category
+          alias: t.alias,
+          tag: t.metadata ? JSON.stringify(t.metadata) : t.category
         },
-        text: r.defaultValue || r.alias
+        text: t.defaultValue || t.alias
       });
-      if (S) {
-        const _ = xe(b);
-        $(_), R?.(_);
-        const f = _.find(
-          (p) => !E.some((z) => z.id === p.id)
+      if (w) {
+        const b = ae(o);
+        P(b), y?.(b);
+        const a = b.find(
+          (d) => !l.some((L) => L.id === d.id)
         );
-        f && G?.(f);
+        a && G?.(a);
       }
-      return S;
+      return w;
     },
-    [G, R, y]
-  ), X = C(
-    (t, r) => {
-      if (!w.current?.activeEditor) return !1;
-      const E = w.current.activeEditor.commands.updateStructuredContentById?.(t, {
-        attrs: r
+    [G, y, u]
+  ), oe = F(
+    (e, t) => {
+      if (!C.current?.activeEditor) return !1;
+      const l = C.current.activeEditor.commands.updateStructuredContentById?.(e, {
+        attrs: t
       });
-      return E && $((S) => {
-        const _ = S.map(
-          (p) => p.id === t ? { ...p, ...r } : p
+      return l && P((w) => {
+        const b = w.map(
+          (d) => d.id === e ? { ...d, ...t } : d
         );
-        R?.(_);
-        const f = _.find((p) => p.id === t);
-        return f && P?.(f), _;
-      }), E;
+        y?.(b);
+        const a = b.find((d) => d.id === e);
+        return a && E?.(a), b;
+      }), l;
     },
-    [P, R]
-  ), h = C(
-    (t) => {
-      const r = w.current?.activeEditor;
-      if (!r) {
+    [E, y]
+  ), ie = F(
+    (e) => {
+      const t = C.current?.activeEditor;
+      if (!t) {
         console.warn(
           "[SuperDocTemplateBuilder] deleteField called without active editor"
         );
-        let f = !1;
-        return $((p) => {
-          if (!p.some((V) => V.id === t)) return p;
-          const z = p.filter((V) => V.id !== t);
-          return f = !0, R?.(z), z;
-        }), f && (N?.(t), l((p) => p === t ? null : p)), f;
+        let a = !1;
+        return P((d) => {
+          if (!d.some((M) => M.id === e)) return d;
+          const L = d.filter((M) => M.id !== e);
+          return a = !0, y?.(L), L;
+        }), a && (S?.(e), $((d) => d === e ? null : d)), a;
       }
-      let b = !1;
+      let o = !1;
       try {
-        b = r.commands.deleteStructuredContentById?.(t) ?? !1;
-      } catch (f) {
+        o = t.commands.deleteStructuredContentById?.(e) ?? !1;
+      } catch (a) {
         console.error(
           "[SuperDocTemplateBuilder] Delete command failed:",
-          f
+          a
         );
       }
-      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), z = E.some((V) => V.id === t);
-        return p && !z && (_ = !0), R?.(E), E;
-      }), _ && (N?.(t), l((f) => f === t ? null : f)), b || _;
+      let l = ae(t);
+      const w = l.some((a) => a.id === e);
+      !o && w && (l = l.filter((a) => a.id !== e));
+      let b = !1;
+      return P((a) => {
+        if (he(a, l))
+          return a;
+        const d = a.some((M) => M.id === e), L = l.some((M) => M.id === e);
+        return d && !L && (b = !0), y?.(l), l;
+      }), b && (S?.(e), $((a) => a === e ? null : a)), o || b;
     },
-    [N, R]
-  ), j = 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);
+    [S, y]
+  ), z = F(
+    (e) => {
+      if (!C.current?.activeEditor) return;
+      C.current.activeEditor.commands.selectStructuredContentById?.(e), $(e);
+      const o = u.find((l) => l.id === e);
+      o && A?.(o);
     },
-    [y, Y]
-  ), Q = C(
-    (t) => {
-      if (!t) return;
-      const r = xe(t);
-      $((b) => we(b, r) ? b : (R?.(r), r));
+    [u, A]
+  ), se = F(
+    (e) => {
+      if (!e) return;
+      const t = ae(e);
+      P((o) => he(o, t) ? o : (y?.(t), t));
     },
-    [R]
+    [y]
   );
-  ue(() => re.current ? ((async () => {
-    const { SuperDoc: r } = await import("superdoc"), b = {
-      selector: re.current,
+  ee(() => q.current ? ((async () => {
+    const { SuperDoc: t } = await import("superdoc"), o = {
+      selector: q.current,
       document: m?.source,
       documentMode: m?.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(
-                  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);
+        if (l.activeEditor) {
+          const w = l.activeEditor;
+          w.on("update", ({ editor: b }) => {
+            const { state: a } = b, { from: d } = a.selection;
+            if (d >= K.length) {
+              const le = d - K.length;
+              if (a.doc.textBetween(le, d) === K) {
+                const me = b.view.coordsAtPos(d), fe = ye(
+                  new DOMRect(me.left, me.top, 0, 0)
+                ), ge = () => {
+                  const Y = C.current?.activeEditor;
+                  if (!Y) return;
+                  const Se = Y.state.selection.from, Ie = Y.state.tr.delete(le, Se);
+                  Y.view.dispatch(Ie);
                 };
-                M.current = ye, I.current = p, k(be), v(!0), d(), H?.({
-                  position: { from: me, to: p },
-                  bounds: be,
-                  cleanup: ye
+                R.current = ge, B.current = d, v(fe), r(!0), V(), U?.({
+                  position: { from: le, to: d },
+                  bounds: fe,
+                  cleanup: ge
                 });
                 return;
               }
             }
-            if (!oe.current)
+            if (!ce.current)
               return;
-            if (I.current == null) {
-              v(!1), d();
+            if (B.current == null) {
+              r(!1), V();
               return;
             }
-            if (p < I.current) {
-              v(!1), I.current = null, d();
+            if (d < B.current) {
+              r(!1), B.current = null, V();
               return;
             }
-            const z = f.doc.textBetween(
-              I.current,
-              p
+            const L = a.doc.textBetween(
+              B.current,
+              d
             );
-            u(z);
-            const V = _.view.coordsAtPos(p), Ne = _e(
-              new DOMRect(V.left, V.top, 0, 0)
+            re(L);
+            const M = b.view.coordsAtPos(d), Te = ye(
+              new DOMRect(M.left, M.top, 0, 0)
             );
-            k(Ne);
-          }), S.on("update", () => {
-            Q(S);
-          }), Q(S);
+            v(Te);
+          }), w.on("update", () => {
+            se(w);
+          }), se(w);
         }
-        D?.();
+        j?.();
       }
-    }, E = new r({
-      ...b,
-      ...Z && {
-        toolbar: Z.selector,
+    }, l = new t({
+      selector: q.current,
+      documentMode: m?.mode || "editing",
+      ...o,
+      ...O && {
+        toolbar: O.selector,
         modules: {
           toolbar: {
-            selector: Z.selector,
-            toolbarGroups: Z.config.toolbarGroups || ["center"],
-            excludeItems: Z.config.excludeItems || [],
-            ...Z.config
+            selector: O.selector,
+            toolbarGroups: O.config.toolbarGroups || ["center"],
+            excludeItems: O.config.excludeItems || [],
+            ...O.config
           }
         }
       }
     });
-    w.current = E;
+    C.current = l;
   })(), () => {
-    M.current = null, I.current = null;
-    const r = w.current;
-    r && typeof r.destroy == "function" && r.destroy(), w.current = null;
+    R.current = null, B.current = null;
+    const t = C.current;
+    t && typeof t.destroy == "function" && t.destroy(), C.current = null;
   }) : void 0, [
     m?.source,
     m?.mode,
-    q,
-    Q,
-    D,
-    H,
-    F
+    K,
+    se,
+    j,
+    U,
+    H
   ]);
-  const pe = C(
-    async (t) => {
-      if (M.current && (M.current(), M.current = null), I.current = null, d(), t.id.startsWith("custom_") && L)
+  const ve = F(
+    async (e) => {
+      R.current && (R.current(), R.current = null), B.current = null, V();
+      const t = e.metadata?.mode || "inline";
+      if (e.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 o = await k(e);
+          if (o) {
+            const l = o.metadata?.mode || t;
+            J(l, {
+              alias: o.label,
+              category: o.category,
+              metadata: o.metadata,
+              defaultValue: o.defaultValue
+            }), r(!1);
             return;
           }
-        } catch (r) {
-          console.error("Field creation failed:", r);
+        } catch (o) {
+          console.error("Field creation failed:", o);
         }
-      B("inline", {
-        alias: t.label,
-        category: t.category,
-        metadata: t.metadata,
-        defaultValue: t.defaultValue
-      }), v(!1);
+      J(t, {
+        alias: e.label,
+        category: e.category,
+        metadata: e.metadata,
+        defaultValue: e.defaultValue
+      }), r(!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)
+    [J, k, V]
+  ), Ce = F(() => {
+    r(!1), B.current = null, V(), R.current && (R.current(), R.current = null);
+  }, [V]), Fe = F(() => {
+    if (!C.current?.activeEditor || u.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 e = u.findIndex(
+      (o) => o.id === I
+    ), t = e >= 0 ? (e + 1) % u.length : 0;
+    z(u[t].id);
+  }, [u, I, z]), we = F(() => {
+    if (!C.current?.activeEditor || u.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(
-    async (t) => {
+    const e = u.findIndex(
+      (o) => o.id === I
+    ), t = e > 0 ? e - 1 : u.length - 1;
+    z(u[t].id);
+  }, [u, I, z]), ke = F(
+    async (e) => {
+      const { fileName: t = "document", triggerDownload: o = !0 } = e || {};
       try {
-        await w.current?.export({
+        return await C.current?.export({
           exportType: ["docx"],
-          exportedName: t?.fileName ? t?.fileName : "document"
+          exportedName: t,
+          triggerDownload: o
         });
-      } catch (r) {
-        throw console.error("Failed to export DOCX", r), r;
+      } catch (l) {
+        throw console.error("Failed to export DOCX", l), l;
       }
     },
     []
   );
-  Ie(x, () => ({
-    insertField: (t) => B("inline", t),
-    insertBlockField: (t) => B("block", t),
-    updateField: X,
-    deleteField: h,
-    selectField: j,
-    nextField: Ce,
-    previousField: ke,
-    getFields: () => y,
-    exportTemplate: Se
+  De(f, () => ({
+    insertField: (e) => J("inline", e),
+    insertBlockField: (e) => J("block", e),
+    updateField: oe,
+    deleteField: ie,
+    selectField: z,
+    nextField: Fe,
+    previousField: we,
+    getFields: () => u,
+    exportTemplate: ke
   }));
-  const Fe = n.component || Be, ge = i.component || Ve, Z = Ye(F);
-  return /* @__PURE__ */ o.jsxs(
+  const Me = n.component || Ne, pe = p.component || Re, O = Be(H);
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: `superdoc-template-builder ${J || ""}`,
-      style: O,
+      className: `superdoc-template-builder ${te || ""}`,
+      style: Q,
       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(
-            ge,
+        /* @__PURE__ */ g("div", { style: { display: "flex", gap: "20px" }, children: [
+          p.position === "left" && /* @__PURE__ */ i("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ i(
+            pe,
             {
-              fields: y,
-              onSelect: (t) => j(t.id),
-              onDelete: h,
-              onUpdate: (t) => X(t.id, t),
-              selectedFieldId: A || void 0
+              fields: u,
+              onSelect: (e) => z(e.id),
+              onDelete: ie,
+              onUpdate: (e) => oe(e.id, e),
+              selectedFieldId: I || void 0
             }
           ) }),
-          /* @__PURE__ */ o.jsxs("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
-            Z?.renderDefaultContainer && /* @__PURE__ */ o.jsx(
+          /* @__PURE__ */ g("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
+            O?.renderDefaultContainer && /* @__PURE__ */ i(
               "div",
               {
                 id: "superdoc-toolbar",
@@ -1076,48 +886,48 @@ const Be = ({
                 "data-testid": "template-builder-toolbar"
               }
             ),
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ i(
               "div",
               {
-                ref: re,
+                ref: q,
                 className: "superdoc-template-builder-editor",
-                style: { height: ee },
+                style: { height: X },
                 "data-testid": "template-builder-editor"
               }
             )
           ] }),
-          i.position === "right" && /* @__PURE__ */ o.jsx("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ o.jsx(
-            ge,
+          p.position === "right" && /* @__PURE__ */ i("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ i(
+            pe,
             {
-              fields: y,
-              onSelect: (t) => j(t.id),
-              onDelete: h,
-              onUpdate: (t) => X(t.id, t),
-              selectedFieldId: A || void 0
+              fields: u,
+              onSelect: (e) => z(e.id),
+              onDelete: ie,
+              onUpdate: (e) => oe(e.id, e),
+              selectedFieldId: I || void 0
             }
           ) })
         ] }),
-        /* @__PURE__ */ o.jsx(
-          Fe,
+        /* @__PURE__ */ i(
+          Me,
           {
-            isVisible: g,
-            position: T,
+            isVisible: W,
+            position: x,
             availableFields: c.available || [],
-            filteredFields: te,
-            filterQuery: W,
+            filteredFields: N,
+            filterQuery: h,
             allowCreate: c.allowCreate || !1,
-            onSelect: pe,
-            onClose: je,
-            onCreateField: L
+            onSelect: ve,
+            onClose: Ce,
+            onCreateField: k
           }
         )
       ]
     }
   );
 });
-ze.displayName = "SuperDocTemplateBuilder";
+Pe.displayName = "SuperDocTemplateBuilder";
 export {
-  Ve as FieldList,
-  Be as FieldMenu,
-  ze as default
+  Re as FieldList,
+  Ne as FieldMenu,
+  Pe as default
 };