@superdoc-dev/template-builder 0.2.0-next.1 → 0.2.0-next.12

package/dist/index.mjs

@@ -1,358 +1,57 @@
-import Ae, { useState as z, useEffect as ue, useMemo as ye, useCallback as C, forwardRef as Ie, useRef as Z, useImperativeHandle as Me } 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 ve;
-function De() {
-  if (ve) return se;
-  ve = 1;
-  var a = Symbol.for("react.transitional.element"), x = Symbol.for("react.fragment");
-  function p(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 I in n)
-        I !== "key" && (i[I] = n[I]);
-    } 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 = p, se.jsxs = p, 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 Ee;
-function Le() {
-  return Ee || (Ee = 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 v:
-          return "Profiler";
-        case K:
-          return "StrictMode";
-        case g:
-          return "Suspense";
-        case E:
-          return "SuspenseList";
-        case D:
-          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 G:
-            return "Portal";
-          case A:
-            return e.displayName || "Context";
-          case Y:
-            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 w:
-            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 p(e) {
-      try {
-        x(e);
-        var s = !1;
-      } catch {
-        s = !0;
-      }
-      if (s) {
-        s = console;
-        var f = s.error, d = 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);
-      }
-    }
-    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 = ee.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 I(e, s) {
-      function f() {
-        L || (L = !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
-        ));
-      }
-      f.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: f,
-        configurable: !0
-      });
-    }
-    function H() {
-      var e = a(this.type);
-      return re[e] || (re[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 U(e, s, f, d, B, oe) {
-      var h = f.ref;
-      return e = {
-        $$typeof: M,
-        type: e,
-        key: s,
-        props: f,
-        _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: oe
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function P(e, s, f, 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);
-          } 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 _ = Object.keys(s).filter(function(pe) {
-          return pe !== "key";
-        });
-        d = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", J[h + d] || (_ = 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,
-          _,
-          h
-        ), J[h + d] = !0);
-      }
-      if (h = null, f !== void 0 && (p(f), h = "" + f), F(s) && (p(s.key), h = "" + s.key), "key" in s) {
-        f = {};
-        for (var q in s)
-          q !== "key" && (f[q] = s[q]);
-      } else f = s;
-      return h && I(
-        f,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), U(
-        e,
-        h,
-        f,
-        n(),
-        B,
-        oe
-      );
-    }
-    function N(e) {
-      T(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? T(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function T(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === M;
-    }
-    var V = Ae, M = Symbol.for("react.transitional.element"), G = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), K = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), Y = Symbol.for("react.consumer"), A = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), g = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), fe = Symbol.for("react.client.reference"), ee = V.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ie = Object.prototype.hasOwnProperty, te = Array.isArray, R = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    V = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var L, re = {}, W = V.react_stack_bottom_frame.bind(
-      V,
-      i
-    )(), ne = R(c(i)), J = {};
-    ae.Fragment = O, ae.jsx = function(e, s, f) {
-      var d = 1e4 > ee.recentlyCreatedOwnerStacks++;
-      return P(
-        e,
-        s,
-        f,
-        !1,
-        d ? Error("react-stack-top-frame") : W,
-        d ? R(c(e)) : ne
-      );
-    }, ae.jsxs = function(e, s, f) {
-      var d = 1e4 > ee.recentlyCreatedOwnerStacks++;
-      return P(
-        e,
-        s,
-        f,
-        !0,
-        d ? Error("react-stack-top-frame") : W,
-        d ? R(c(e)) : ne
-      );
-    };
-  })()), ae;
-}
-var Re;
-function We() {
-  return Re || (Re = 1, process.env.NODE_ENV === "production" ? ce.exports = De() : ce.exports = Le()), ce.exports;
-}
-var o = We();
-const Be = ({
-  isVisible: a,
-  position: x,
-  availableFields: p,
-  filteredFields: c,
-  filterQuery: n,
-  allowCreate: i,
-  onSelect: F,
-  onClose: I,
-  onCreateField: H
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { useState as I, useEffect as oe, useMemo as Fe, forwardRef as ze, useRef as J, useCallback as S, useImperativeHandle as Be } from "react";
+const We = ({
+  isVisible: n,
+  position: d,
+  availableFields: g,
+  filteredFields: l,
+  filterQuery: u,
+  allowCreate: a,
+  onSelect: N,
+  onClose: P,
+  onCreateField: G,
+  existingFields: f = [],
+  onSelectExisting: T
 }) => {
-  const [U, P] = z(!1), [N, T] = z("");
-  ue(() => {
-    a || (P(!1), T(""));
-  }, [a]);
-  const V = ye(() => ({
+  const [x, y] = I(!1), [w, R] = I(""), [q, A] = I("inline"), [X, ie] = I(!0), [p, z] = I(!0);
+  oe(() => {
+    n || (y(!1), R(""), A("inline"));
+  }, [n]);
+  const V = Fe(() => ({
     position: "absolute",
-    left: x?.left,
-    top: x?.top,
+    left: d?.left,
+    top: d?.top,
     zIndex: 1e3,
     background: "white",
     border: "1px solid #ddd",
     borderRadius: "4px",
     boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
     padding: "8px 0",
-    minWidth: "200px"
-  }), [x]), M = c ?? p, G = !!n, O = ye(() => {
-    const l = [], g = /* @__PURE__ */ new Map();
-    return M.forEach((E) => {
-      const w = E.category?.trim() || "Uncategorized", k = g.get(w);
-      if (k !== void 0) {
-        l[k].fields.push(E);
-        return;
-      }
-      g.set(w, l.length), l.push({ category: w, fields: [E] });
-    }), l;
-  }, [M]), [K, v] = z({});
-  ue(() => {
-    v((l) => {
-      if (O.length === 0)
-        return Object.keys(l).length === 0 ? l : {};
-      const g = {};
-      let E = Object.keys(l).length !== O.length;
-      return O.forEach(({ category: w }, k) => {
-        const D = G ? !0 : l[w] ?? k === 0;
-        g[w] = D, !E && l[w] !== D && (E = !0);
-      }), E ? g : l;
-    });
-  }, [O, G]);
-  const Y = C((l) => {
-    v((g) => ({
-      ...g,
-      [l]: !g[l]
-    }));
-  }, []);
-  if (!a) return null;
-  const A = async () => {
-    const l = N.trim();
-    if (!l) return;
-    const g = {
+    width: "280px"
+  }), [d]), O = l ?? g, j = !!u;
+  if (oe(() => {
+    j && z(!0);
+  }, [j]), !n) return null;
+  const D = async () => {
+    const m = w.trim();
+    if (!m) return;
+    const B = {
       id: `custom_${Date.now()}`,
-      label: l,
-      category: "Custom"
+      label: m,
+      mode: q
     };
     try {
-      if (H) {
-        const E = await H(g);
-        F(E || g);
+      if (G) {
+        const h = await G(B);
+        N(h || B);
       } else
-        F(g);
+        N(B);
     } finally {
-      P(!1), T("");
+      y(!1), R(""), A("inline");
     }
   };
-  return /* @__PURE__ */ o.jsxs("div", { className: "superdoc-field-menu", style: V, children: [
-    G && /* @__PURE__ */ o.jsx(
+  return /* @__PURE__ */ o("div", { className: "superdoc-field-menu", style: V, children: [
+    j && /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -360,23 +59,17 @@ const Be = ({
           borderBottom: "1px solid #f0f0f0",
           marginBottom: "4px"
         },
-        children: /* @__PURE__ */ o.jsxs("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
+        children: /* @__PURE__ */ o("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
           "Filtering results for",
-          /* @__PURE__ */ o.jsx(
-            "span",
-            {
-              style: { fontWeight: 600, color: "#111827", marginLeft: "4px" },
-              children: n
-            }
-          )
+          /* @__PURE__ */ r("span", { style: { fontWeight: 600, color: "#111827", marginLeft: "4px" }, children: u })
         ] })
       }
     ),
-    i && !U && /* @__PURE__ */ o.jsx(
+    a && !x && /* @__PURE__ */ r(
       "div",
       {
         className: "field-menu-item",
-        onClick: () => P(!0),
+        onClick: () => y(!0),
         style: {
           padding: "8px 16px",
           cursor: "pointer",
@@ -386,16 +79,16 @@ const Be = ({
         children: "+ Create New Field"
       }
     ),
-    i && U && /* @__PURE__ */ o.jsxs("div", { style: { padding: "8px 16px" }, children: [
-      /* @__PURE__ */ o.jsx(
+    a && x && /* @__PURE__ */ o("div", { style: { padding: "8px 16px" }, children: [
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: N,
+          value: w,
           placeholder: "Field name...",
-          onChange: (l) => T(l.target.value),
-          onKeyDown: (l) => {
-            l.key === "Enter" && A(), l.key === "Escape" && (P(!1), T(""));
+          onChange: (m) => R(m.target.value),
+          onKeyDown: (m) => {
+            m.key === "Enter" && D(), m.key === "Escape" && (y(!1), R(""), A("inline"));
           },
           autoFocus: !0,
           style: {
@@ -406,7 +99,66 @@ const Be = ({
           }
         }
       ),
-      /* @__PURE__ */ o.jsxs(
+      /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            marginTop: "8px",
+            display: "flex",
+            gap: "12px",
+            fontSize: "13px"
+          },
+          children: [
+            /* @__PURE__ */ o(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  cursor: "pointer"
+                },
+                children: [
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      type: "radio",
+                      value: "inline",
+                      checked: q === "inline",
+                      onChange: () => A("inline")
+                    }
+                  ),
+                  "Inline"
+                ]
+              }
+            ),
+            /* @__PURE__ */ o(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  cursor: "pointer"
+                },
+                children: [
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      type: "radio",
+                      value: "block",
+                      checked: q === "block",
+                      onChange: () => A("block")
+                    }
+                  ),
+                  "Block"
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(
         "div",
         {
           style: {
@@ -415,27 +167,27 @@ const Be = ({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ r(
               "button",
               {
-                onClick: A,
-                disabled: !N.trim(),
+                onClick: D,
+                disabled: !w.trim(),
                 style: {
                   padding: "4px 12px",
-                  background: N.trim() ? "#0066cc" : "#ccc",
+                  background: w.trim() ? "#0066cc" : "#ccc",
                   color: "white",
                   border: "none",
                   borderRadius: "3px",
-                  cursor: N.trim() ? "pointer" : "not-allowed"
+                  cursor: w.trim() ? "pointer" : "not-allowed"
                 },
                 children: "Create"
               }
             ),
-            /* @__PURE__ */ o.jsx(
+            /* @__PURE__ */ r(
               "button",
               {
                 onClick: () => {
-                  P(!1), T("");
+                  y(!1), R(""), A("inline");
                 },
                 style: {
                   padding: "4px 12px",
@@ -451,7 +203,7 @@ const Be = ({
         }
       )
     ] }),
-    i && p.length > 0 && /* @__PURE__ */ o.jsx(
+    a && g.length > 0 && /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -460,7 +212,110 @@ const Be = ({
         }
       }
     ),
-    O.length === 0 ? /* @__PURE__ */ o.jsx(
+    f.length > 0 && (() => {
+      const m = /* @__PURE__ */ new Map();
+      f.forEach((h) => {
+        const Y = h.group || `individual-${h.id}`, ee = m.get(Y) || [];
+        ee.push(h), m.set(Y, ee);
+      });
+      const B = Array.from(m.values()).map((h) => ({
+        ...h[0],
+        count: h.length
+      }));
+      return /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            onClick: () => ie(!X),
+            style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "8px 16px",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              fontWeight: 500,
+              fontSize: "13px",
+              color: "#374151",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ o("span", { children: [
+                "Existing Fields (",
+                B.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  style: {
+                    display: "inline-block",
+                    width: "8px",
+                    height: "8px",
+                    borderRight: "2px solid #666",
+                    borderBottom: "2px solid #666",
+                    transform: X ? "rotate(45deg)" : "rotate(-45deg)",
+                    transition: "transform 0.2s ease"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        X && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: B.map((h) => /* @__PURE__ */ o(
+          "div",
+          {
+            className: "field-menu-item",
+            onClick: () => T?.(h),
+            style: {
+              padding: "8px 16px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ o("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ r("div", { style: { fontWeight: 500, fontSize: "13px" }, children: h.alias || h.id }),
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      color: "#9ca3af",
+                      marginTop: "2px"
+                    },
+                    children: h.group ? `group (${h.count} fields)` : `ID: ${h.id}`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "#6b7280",
+                    padding: "2px 6px",
+                    background: "#f3f4f6",
+                    borderRadius: "3px",
+                    textTransform: "capitalize",
+                    flexShrink: 0
+                  },
+                  children: h.mode || "inline"
+                }
+              )
+            ]
+          },
+          h.group || h.id
+        )) })
+      ] });
+    })(),
+    O.length === 0 ? /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -471,104 +326,112 @@ const Be = ({
         },
         children: "No matching fields"
       }
-    ) : O.map(({ category: l, fields: g }, E) => {
-      const w = !!K[l], k = `${Math.max(g.length * 40, 0)}px`;
-      return /* @__PURE__ */ o.jsxs(
-        "div",
+    ) : /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
+      /* @__PURE__ */ o(
+        "button",
         {
+          type: "button",
+          onClick: () => z(!p),
           style: {
-            borderTop: E === 0 && i ? void 0 : "1px solid #f0f0f0"
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "8px 16px",
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            fontWeight: 500,
+            fontSize: "13px",
+            color: "#374151",
+            textAlign: "left"
           },
           children: [
-            /* @__PURE__ */ o.jsxs(
-              "button",
+            /* @__PURE__ */ o("span", { children: [
+              "Available Fields (",
+              O.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ r(
+              "span",
               {
-                type: "button",
-                onClick: () => Y(l),
+                "aria-hidden": !0,
                 style: {
-                  width: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  padding: "8px 16px",
-                  background: "transparent",
-                  border: "none",
-                  cursor: "pointer",
-                  fontWeight: 500,
-                  textAlign: "left"
-                },
-                children: [
-                  /* @__PURE__ */ o.jsxs("span", { children: [
-                    l,
-                    " (",
-                    g.length,
-                    ")"
-                  ] }),
-                  /* @__PURE__ */ o.jsx(
-                    "span",
-                    {
-                      "aria-hidden": !0,
-                      style: {
-                        display: "inline-block",
-                        width: "8px",
-                        height: "8px",
-                        borderRight: "2px solid #666",
-                        borderBottom: "2px solid #666",
-                        transform: w ? "rotate(45deg)" : "rotate(-45deg)",
-                        transition: "transform 0.2s ease",
-                        marginLeft: "12px"
-                      }
-                    }
-                  )
-                ]
+                  display: "inline-block",
+                  width: "8px",
+                  height: "8px",
+                  borderRight: "2px solid #666",
+                  borderBottom: "2px solid #666",
+                  transform: p ? "rotate(45deg)" : "rotate(-45deg)",
+                  transition: "transform 0.2s ease"
+                }
               }
-            ),
-            /* @__PURE__ */ o.jsx(
-              "div",
+            )
+          ]
+        }
+      ),
+      p && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: O.map((m) => /* @__PURE__ */ o(
+        "div",
+        {
+          className: "field-menu-item",
+          onClick: () => N(m),
+          style: {
+            padding: "8px 16px",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            gap: "8px"
+          },
+          children: [
+            /* @__PURE__ */ o("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ r("div", { style: { fontWeight: 500, fontSize: "13px" }, children: m.label || m.id }),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "#9ca3af",
+                    marginTop: "2px"
+                  },
+                  children: [
+                    "ID: ",
+                    m.id
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r(
+              "span",
               {
-                "data-category": l,
-                "aria-hidden": !w,
                 style: {
-                  overflow: "hidden",
-                  maxHeight: w ? k : "0px",
-                  opacity: w ? 1 : 0,
-                  transition: "max-height 0.2s ease, opacity 0.2s ease",
-                  pointerEvents: w ? "auto" : "none"
+                  fontSize: "11px",
+                  color: "#6b7280",
+                  padding: "2px 6px",
+                  background: "#f3f4f6",
+                  borderRadius: "3px",
+                  textTransform: "capitalize",
+                  flexShrink: 0
                 },
-                children: /* @__PURE__ */ o.jsx("div", { style: { padding: w ? "4px 0" : 0 }, children: g.map((D) => /* @__PURE__ */ o.jsx(
-                  "div",
-                  {
-                    className: "field-menu-item",
-                    onClick: () => F(D),
-                    style: {
-                      padding: "8px 16px",
-                      cursor: "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between"
-                    },
-                    children: /* @__PURE__ */ o.jsx("span", { style: { fontWeight: 500 }, children: D.label })
-                  },
-                  D.id
-                )) })
+                children: m.mode || "inline"
               }
             )
           ]
         },
-        l
-      );
-    }),
-    /* @__PURE__ */ o.jsx(
+        m.id
+      )) })
+    ] }),
+    /* @__PURE__ */ r(
       "div",
       {
         style: {
           borderTop: "1px solid #eee",
           marginTop: "4px"
         },
-        children: /* @__PURE__ */ o.jsx(
+        children: /* @__PURE__ */ r(
           "button",
           {
-            onClick: I,
+            onClick: P,
             style: {
               width: "100%",
               padding: "6px 16px",
@@ -583,542 +446,667 @@ const Be = ({
       }
     )
   ] });
-}, $e = ({
-  fields: a,
-  onSelect: x,
-  onDelete: p,
-  selectedFieldId: c
-}) => /* @__PURE__ */ o.jsxs(
+}, He = (n) => {
+  const d = n.split("-");
+  return d.length > 2 ? d[d.length - 1].substring(0, 6) : n.substring(0, 6);
+}, ye = ({ field: n, onSelect: d, onDelete: g, isSelected: l, isGrouped: u = !1 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: "superdoc-field-list",
+    onClick: () => d(n),
     style: {
-      width: "250px",
-      background: "white",
-      border: "1px solid #e5e7eb",
-      borderRadius: "8px",
-      padding: "16px"
+      position: "relative",
+      padding: "10px 12px",
+      background: l ? "#eff6ff" : "#f9fafb",
+      border: l ? "1px solid #3b82f6" : "1px solid #e5e7eb",
+      borderRadius: "6px",
+      cursor: "pointer",
+      transition: "all 0.2s",
+      fontSize: u ? "13px" : "14px"
+    },
+    onMouseEnter: (a) => {
+      l || (a.currentTarget.style.background = "#f3f4f6");
     },
+    onMouseLeave: (a) => {
+      l || (a.currentTarget.style.background = "#f9fafb");
+    },
+    title: n.alias,
     children: [
-      /* @__PURE__ */ o.jsxs("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
-        "Template Fields (",
-        a.length,
-        ")"
-      ] }),
-      a.length === 0 ? /* @__PURE__ */ o.jsxs(
-        "div",
+      /* @__PURE__ */ r(
+        "button",
         {
-          style: {
-            color: "#9ca3af",
-            fontSize: "14px",
-            textAlign: "center",
-            padding: "20px 0"
+          onClick: (a) => {
+            a.stopPropagation(), g(n.id);
           },
-          children: [
-            "No fields yet. Type ",
-            "{{",
-            " to add a field."
-          ]
-        }
-      ) : /* @__PURE__ */ o.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: a.map((n) => /* @__PURE__ */ o.jsxs(
-        "div",
-        {
-          onClick: () => x(n),
           style: {
-            position: "relative",
-            padding: "12px",
-            background: c === n.id ? "#eff6ff" : "#f9fafb",
-            border: c === n.id ? "1px solid #3b82f6" : "1px solid #e5e7eb",
-            borderRadius: "6px",
+            position: "absolute",
+            top: "6px",
+            right: "6px",
+            padding: "4px",
+            background: "transparent",
+            border: "none",
             cursor: "pointer",
-            transition: "all 0.2s"
+            color: "#9ca3af",
+            transition: "color 0.2s",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
           },
-          onMouseEnter: (i) => {
-            c !== n.id && (i.currentTarget.style.background = "#f3f4f6");
+          onMouseEnter: (a) => {
+            a.currentTarget.style.color = "#ef4444";
           },
-          onMouseLeave: (i) => {
-            c !== n.id && (i.currentTarget.style.background = "#f9fafb");
+          onMouseLeave: (a) => {
+            a.currentTarget.style.color = "#9ca3af";
           },
-          title: n.alias,
-          children: [
-            /* @__PURE__ */ o.jsx(
-              "button",
-              {
-                onClick: (i) => {
-                  i.stopPropagation(), p(n.id);
-                },
-                style: {
-                  position: "absolute",
-                  top: "8px",
-                  right: "8px",
-                  padding: "4px",
-                  background: "transparent",
-                  border: "none",
-                  cursor: "pointer",
-                  color: "#9ca3af",
-                  transition: "color 0.2s",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                onMouseEnter: (i) => {
-                  i.currentTarget.style.color = "#ef4444";
-                },
-                onMouseLeave: (i) => {
-                  i.currentTarget.style.color = "#9ca3af";
-                },
-                title: "Delete field",
-                children: /* @__PURE__ */ o.jsx(
-                  "svg",
-                  {
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 16 16",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ o.jsx(
-                      "path",
-                      {
-                        d: "M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4",
-                        stroke: "currentColor",
-                        strokeWidth: "1.5",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round"
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ o.jsxs("div", { style: { paddingRight: "24px" }, children: [
-              /* @__PURE__ */ o.jsx(
+          title: "Delete field",
+          children: /* @__PURE__ */ r(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ r(
+                "path",
+                {
+                  d: "M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o("div", { style: { paddingRight: "24px" }, children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              fontWeight: "500",
+              fontSize: u ? "12px" : "14px",
+              color: u ? "#6b7280" : "#111827"
+            },
+            children: n.alias || n.id
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              fontSize: "11px",
+              color: "#9ca3af",
+              marginTop: "2px"
+            },
+            children: [
+              /* @__PURE__ */ o("span", { children: [
+                "ID: ",
+                n.id
+              ] }),
+              n.mode && /* @__PURE__ */ r(
+                "span",
+                {
+                  style: {
+                    fontSize: "9px",
+                    padding: "2px 5px",
+                    borderRadius: "3px",
+                    background: n.mode === "block" ? "#dbeafe" : "#f3f4f6",
+                    color: n.mode === "block" ? "#1e40af" : "#4b5563",
+                    fontWeight: "500"
+                  },
+                  children: n.mode
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+), Le = ({
+  fields: n,
+  onSelect: d,
+  onDelete: g,
+  selectedFieldId: l
+}) => {
+  const [u, a] = I(/* @__PURE__ */ new Set()), { groupedFields: N, ungroupedFields: P } = Fe(() => {
+    const f = {}, T = [];
+    return n.forEach((x) => {
+      x.group ? (f[x.group] || (f[x.group] = []), f[x.group].push(x)) : T.push(x);
+    }), { groupedFields: f, ungroupedFields: T };
+  }, [n]), G = (f) => {
+    a((T) => {
+      const x = new Set(T);
+      return x.has(f) ? x.delete(f) : x.add(f), x;
+    });
+  };
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: "superdoc-field-list",
+      style: {
+        width: "250px",
+        background: "white",
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        padding: "16px"
+      },
+      children: [
+        /* @__PURE__ */ o("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
+          "Template Fields (",
+          n.length,
+          ")"
+        ] }),
+        n.length === 0 ? /* @__PURE__ */ o(
+          "div",
+          {
+            style: {
+              color: "#9ca3af",
+              fontSize: "14px",
+              textAlign: "center",
+              padding: "20px 0"
+            },
+            children: [
+              "No fields yet. Type ",
+              "{{",
+              " to add a field."
+            ]
+          }
+        ) : /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          P.map((f) => /* @__PURE__ */ r(
+            ye,
+            {
+              field: f,
+              onSelect: d,
+              onDelete: g,
+              isSelected: l === f.id
+            },
+            f.id
+          )),
+          Object.entries(N).map(([f, T]) => {
+            const x = u.has(f), y = T[0];
+            return /* @__PURE__ */ o("div", { children: [
+              /* @__PURE__ */ r(
                 "div",
                 {
                   style: {
-                    fontWeight: "500",
-                    fontSize: "14px",
-                    marginBottom: n.alias && n.alias !== n.id ? "4px" : "0"
+                    position: "relative",
+                    padding: "12px",
+                    background: "#f9fafb",
+                    border: "1px solid #e5e7eb",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    transition: "all 0.2s"
+                  },
+                  onClick: () => G(f),
+                  onMouseEnter: (w) => {
+                    w.currentTarget.style.background = "#f3f4f6";
+                  },
+                  onMouseLeave: (w) => {
+                    w.currentTarget.style.background = "#f9fafb";
                   },
-                  children: n.id
+                  children: /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                    /* @__PURE__ */ r("span", { style: { fontSize: "12px", color: "#6b7280" }, children: x ? "▼" : "▶" }),
+                    /* @__PURE__ */ o("div", { style: { flex: 1 }, children: [
+                      /* @__PURE__ */ r("div", { style: { fontWeight: "500", fontSize: "14px" }, children: y.alias }),
+                      /* @__PURE__ */ o(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "11px",
+                            color: "#9ca3af",
+                            marginTop: "2px"
+                          },
+                          children: [
+                            "group: ",
+                            He(f),
+                            " (",
+                            T.length,
+                            " fields)"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] })
                 }
               ),
-              n.alias && n.alias !== n.id && /* @__PURE__ */ o.jsx(
+              x && /* @__PURE__ */ r(
                 "div",
                 {
                   style: {
-                    fontSize: "12px",
-                    color: "#4b5563"
+                    marginLeft: "16px",
+                    marginTop: "4px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "4px"
                   },
-                  children: n.alias
+                  children: T.map((w) => /* @__PURE__ */ r(
+                    ye,
+                    {
+                      field: w,
+                      onSelect: d,
+                      onDelete: g,
+                      isSelected: l === w.id,
+                      isGrouped: !0
+                    },
+                    w.id
+                  ))
                 }
               )
-            ] })
-          ]
-        },
-        n.id
-      )) })
-    ]
-  }
-), Te = (a) => {
-  const x = a.helpers?.structuredContentCommands;
-  return x?.getStructuredContentTags ? (x.getStructuredContentTags(a.state) || []).map((c) => {
-    const i = (c?.node ?? c)?.attrs ?? {};
+            ] }, f);
+          })
+        ] })
+      ]
+    }
+  );
+}, Q = (n) => {
+  const d = n.helpers?.structuredContentCommands;
+  return d?.getStructuredContentTags ? (d.getStructuredContentTags(n.state) || []).map((l) => {
+    const u = l?.node ?? l, a = u?.attrs ?? {}, P = (u?.type?.name || "").includes("Block") ? "block" : "inline";
     return {
-      id: i.id,
-      alias: i.alias || i.label || "",
-      tag: i.tag
+      id: a.id,
+      alias: a.alias || a.label || "",
+      tag: a.tag,
+      mode: P,
+      group: d.getGroup?.(a.tag) ?? void 0
     };
-  }).filter((c) => !!c.id) : [];
-}, we = (a, x) => {
-  if (a === x) return !0;
-  if (a.length !== x.length) return !1;
-  for (let p = 0; p < a.length; p += 1) {
-    const c = a[p], n = x[p];
-    if (!n || c.id !== n.id || c.alias !== n.alias || c.tag !== n.tag || c.position !== n.position)
+  }) : [];
+}, ve = (n, d) => {
+  if (n === d) return !0;
+  if (n.length !== d.length) return !1;
+  for (let g = 0; g < n.length; g += 1) {
+    const l = n[g], u = d[g];
+    if (!u || l.id !== u.id || l.alias !== u.alias || l.tag !== u.tag || l.position !== u.position || l.mode !== u.mode || l.group !== u.group)
       return !1;
   }
   return !0;
-}, Ve = (a) => {
-  if (!a) return null;
-  if (a === !0)
+}, Pe = (n) => {
+  if (!n) return null;
+  if (n === !0)
     return {
       selector: "#superdoc-toolbar",
       config: {},
       renderDefaultContainer: !0
     };
-  if (typeof a == "string")
+  if (typeof n == "string")
     return {
-      selector: a,
+      selector: n,
       config: {},
       renderDefaultContainer: !1
     };
-  const { selector: x, ...p } = a;
+  const { selector: d, ...g } = n;
   return {
-    selector: x || "#superdoc-toolbar",
-    config: p,
-    renderDefaultContainer: x === void 0
+    selector: d || "#superdoc-toolbar",
+    config: g,
+    renderDefaultContainer: d === void 0
   };
-}, de = 10, Ye = 250, ze = 300, _e = (a) => {
-  const x = window.innerWidth - Ye - de, p = window.innerHeight - ze - de, c = Math.min(a.left, x), n = Math.min(a.top, p);
+}, re = 10, Ae = 250, Ve = 300, Ce = (n) => {
+  const d = window.innerWidth - Ae - re, g = window.innerHeight - Ve - re, l = Math.min(n.left, d), u = Math.min(n.top, g);
   return new DOMRect(
-    Math.max(c, de),
-    Math.max(n, de),
-    a.width,
-    a.height
+    Math.max(l, re),
+    Math.max(u, re),
+    n.width,
+    n.height
   );
-}, He = Ie((a, x) => {
+}, je = ze((n, d) => {
   const {
-    document: p,
-    fields: c = {},
-    menu: n = {},
-    list: i = {},
-    toolbar: F,
-    onReady: I,
-    onTrigger: H,
-    onFieldInsert: U,
-    onFieldUpdate: P,
-    onFieldDelete: N,
-    onFieldsChange: T,
-    onFieldSelect: V,
-    onFieldCreate: M,
-    className: G,
-    style: O,
-    documentHeight: K = "600px"
-  } = a, [v, Y] = z(
-    c.initial || []
-  ), [A, l] = z(null), [g, E] = z(!1), [w, k] = z(), [D, fe] = z(""), [ee, ie] = z(() => c.available || []), te = Z(null), R = Z(null), L = Z(null), re = Z(c);
-  re.current = c;
-  const W = Z(null), ne = Z(g);
-  ue(() => {
-    ne.current = g;
-  }, [g]);
-  const J = n.trigger || "{{", e = re.current.available || [], s = C(
-    (t) => {
-      const r = t.trim().toLowerCase();
-      return r ? e.filter((b) => {
-        const y = b.label.toLowerCase(), S = b.category?.toLowerCase() || "";
-        return y.includes(r) || S.includes(r);
-      }) : e;
+    document: g,
+    fields: l = {},
+    menu: u = {},
+    list: a = {},
+    toolbar: N,
+    onReady: P,
+    onTrigger: G,
+    onFieldInsert: f,
+    onFieldUpdate: T,
+    onFieldDelete: x,
+    onFieldsChange: y,
+    onFieldSelect: w,
+    onFieldCreate: R,
+    onExport: q,
+    className: A,
+    style: X,
+    documentHeight: ie = "600px"
+  } = n, [p, z] = I(l.initial || []), [V, O] = I(null), [j, D] = I(!1), [m, B] = I(), [h, Y] = I(""), [ee, we] = I(
+    () => l.available || []
+  ), se = J(null), F = J(null), M = J(null), pe = J(l);
+  pe.current = l;
+  const W = J(null), fe = J(j);
+  oe(() => {
+    fe.current = j;
+  }, [j]);
+  const te = u.trigger || "{{", le = pe.current.available || [], ge = S(
+    (e) => {
+      const t = e.trim().toLowerCase();
+      return t ? le.filter((i) => i.label.toLowerCase().includes(t)) : le;
     },
-    [e]
-  ), f = C(
-    (t) => {
-      fe(t), ie(s(t));
+    [le]
+  ), de = S(
+    (e) => {
+      Y(e), we(ge(e));
     },
-    [s]
-  ), d = C(() => {
-    f("");
-  }, [f]), B = C(
-    (t, r) => {
-      if (!R.current?.activeEditor) return !1;
-      const b = R.current.activeEditor, y = `field_${Date.now()}`, S = t === "inline" ? b.commands.insertStructuredContentInline?.({
+    [ge]
+  ), H = S(() => {
+    de("");
+  }, [de]), K = S(
+    (e, t) => {
+      if (!F.current?.activeEditor) return !1;
+      const i = F.current.activeEditor, v = p, b = e === "inline" ? i.commands.insertStructuredContentInline?.({
         attrs: {
-          id: y,
-          alias: r.alias,
-          tag: r.metadata ? JSON.stringify(r.metadata) : r.category
+          alias: t.alias,
+          tag: t.metadata ? JSON.stringify(t.metadata) : void 0
         },
-        text: r.defaultValue || r.alias
-      }) : b.commands.insertStructuredContentBlock?.({
+        text: t.defaultValue || t.alias
+      }) : i.commands.insertStructuredContentBlock?.({
         attrs: {
-          id: y,
-          alias: r.alias,
-          tag: r.metadata ? JSON.stringify(r.metadata) : r.category
+          alias: t.alias,
+          tag: t.metadata ? JSON.stringify(t.metadata) : void 0
         },
-        text: r.defaultValue || r.alias
+        text: t.defaultValue || t.alias
       });
-      if (S) {
-        const j = {
-          id: y,
-          alias: r.alias,
-          tag: r.category
-        };
-        Y((m) => {
-          const u = [...m, j];
-          return T?.(u), u;
-        }), U?.(j);
+      if (b) {
+        const c = Q(i);
+        z(c), y?.(c);
+        const E = c.find(
+          (C) => !v.some((s) => s.id === C.id)
+        );
+        E && f?.(E);
       }
-      return S;
+      return b;
     },
-    [U, T]
-  ), oe = C(
-    (t, r) => {
-      if (!R.current?.activeEditor) return !1;
-      const y = R.current.activeEditor.commands.updateStructuredContentById?.(t, {
-        attrs: r
+    [f, y, p]
+  ), Z = S(
+    (e, t) => {
+      if (!F.current?.activeEditor) return !1;
+      const v = F.current.activeEditor.commands.updateStructuredContentById?.(e, {
+        attrs: t
       });
-      return y && Y((S) => {
-        const j = S.map(
-          (u) => u.id === t ? { ...u, ...r } : u
-        );
-        T?.(j);
-        const m = j.find((u) => u.id === t);
-        return m && P?.(m), j;
-      }), y;
+      return v && z((b) => {
+        const c = b.map((C) => C.id === e ? { ...C, ...t } : C);
+        y?.(c);
+        const E = c.find((C) => C.id === e);
+        return E && T?.(E), c;
+      }), v;
     },
-    [P, T]
-  ), h = C(
-    (t) => {
-      const r = R.current?.activeEditor;
-      if (!r) {
-        console.warn(
-          "[SuperDocTemplateBuilder] deleteField called without active editor"
-        );
-        let m = !1;
-        return Y((u) => {
-          if (!u.some(($) => $.id === t)) return u;
-          const Q = u.filter(($) => $.id !== t);
-          return m = !0, T?.(Q), Q;
-        }), m && (N?.(t), l((u) => u === t ? null : u)), m;
+    [T, y]
+  ), ae = S(
+    (e) => {
+      const t = F.current?.activeEditor;
+      if (!t) {
+        let s = !1;
+        return z((k) => {
+          if (!k.some((L) => L.id === e)) return k;
+          const U = k.filter((L) => L.id !== e);
+          return s = !0, y?.(U), U;
+        }), s && (x?.(e), O((k) => k === e ? null : k)), s;
       }
+      const v = p.find((s) => s.id === e)?.group;
       let b = !1;
       try {
-        b = r.commands.deleteStructuredContentById?.(t) ?? !1;
-      } catch (m) {
-        console.error(
-          "[SuperDocTemplateBuilder] Delete command failed:",
-          m
-        );
+        b = t.commands.deleteStructuredContentById?.(e) ?? !1;
+      } catch {
+        b = !1;
+      }
+      let c = Q(t);
+      const E = c.some((s) => s.id === e);
+      if (!b && E && (c = c.filter((s) => s.id !== e)), v) {
+        const s = c.filter((k) => k.group === v);
+        if (s.length === 1) {
+          const k = s[0];
+          t.commands.updateStructuredContentById?.(k.id, {
+            attrs: { tag: void 0 }
+          }), c = Q(t);
+        }
       }
-      let y = Te(r);
-      const S = y.some((m) => m.id === t);
-      !b && S && (y = y.filter((m) => m.id !== t));
-      let j = !1;
-      return Y((m) => {
-        if (we(m, y))
-          return m;
-        const u = m.some(($) => $.id === t), Q = y.some(($) => $.id === t);
-        return u && !Q && (j = !0), T?.(y), y;
-      }), j && (N?.(t), l((m) => m === t ? null : m)), b || j;
+      let C = !1;
+      return z((s) => {
+        if (ve(s, c))
+          return s;
+        const k = s.some((L) => L.id === e), U = c.some((L) => L.id === e);
+        return k && !U && (C = !0), y?.(c), c;
+      }), C && (x?.(e), O((s) => s === e ? null : s)), b || C;
     },
-    [N, T]
-  ), _ = C(
-    (t) => {
-      if (!R.current?.activeEditor) return;
-      R.current.activeEditor.commands.selectStructuredContentById?.(t), l(t);
-      const b = v.find((y) => y.id === t);
-      b && V?.(b);
+    [x, y, p]
+  ), _ = S(
+    (e) => {
+      if (!F.current?.activeEditor) return;
+      F.current.activeEditor.commands.selectStructuredContentById?.(e), O(e);
+      const i = p.find((v) => v.id === e);
+      i && w?.(i);
     },
-    [v, V]
-  ), q = C(
-    (t) => {
-      if (!t) return;
-      const r = Te(t);
-      Y((b) => we(b, r) ? b : (T?.(r), r));
+    [p, w]
+  ), ce = S(
+    (e) => {
+      if (!e) return;
+      const t = Q(e);
+      z((i) => ve(i, t) ? i : (y?.(t), t));
     },
-    [T]
+    [y]
   );
-  ue(() => te.current ? ((async () => {
-    const { SuperDoc: r } = await import("superdoc"), b = {
-      selector: te.current,
-      document: p?.source,
-      documentMode: p?.mode || "editing",
-      onReady: () => {
-        if (y.activeEditor) {
-          const S = y.activeEditor;
-          S.on("update", ({ editor: j }) => {
-            const { state: m } = j, { from: u } = m.selection;
-            if (u >= J.length) {
-              const me = u - J.length;
-              if (m.doc.textBetween(me, u) === J) {
-                const ge = j.view.coordsAtPos(u), he = _e(
-                  new DOMRect(ge.left, ge.top, 0, 0)
-                ), be = () => {
-                  const le = R.current?.activeEditor;
-                  if (!le) return;
-                  const Oe = le.state.selection.from, Pe = le.state.tr.delete(me, Oe);
-                  le.view.dispatch(Pe);
-                };
-                L.current = be, W.current = u, k(he), E(!0), d(), H?.({
-                  position: { from: me, to: u },
-                  bounds: he,
-                  cleanup: be
-                });
-                return;
-              }
-            }
-            if (!ne.current)
-              return;
-            if (W.current == null) {
-              E(!1), d();
-              return;
-            }
-            if (u < W.current) {
-              E(!1), W.current = null, d();
-              return;
-            }
-            const Q = m.doc.textBetween(
-              W.current,
-              u
-            );
-            f(Q);
-            const $ = j.view.coordsAtPos(u), Ne = _e(
-              new DOMRect($.left, $.top, 0, 0)
-            );
-            k(Ne);
-          }), S.on("update", () => {
-            q(S);
-          }), q(S);
+  oe(() => se.current ? ((async () => {
+    const { SuperDoc: t } = await import("superdoc"), i = {
+      comments: !1,
+      ...$ && {
+        toolbar: {
+          selector: $.selector,
+          toolbarGroups: $.config.toolbarGroups || ["center"],
+          excludeItems: $.config.excludeItems || [],
+          ...$.config
         }
-        I?.();
       }
-    }, y = new r({
-      ...b,
-      ...X && {
-        toolbar: X.selector,
-        modules: {
-          toolbar: {
-            selector: X.selector,
-            toolbarGroups: X.config.toolbarGroups || ["center"],
-            excludeItems: X.config.excludeItems || [],
-            ...X.config
+    }, v = () => {
+      if (b.activeEditor) {
+        const c = b.activeEditor;
+        c.on("update", ({ editor: E }) => {
+          const { state: C } = E, { from: s } = C.selection;
+          if (s >= te.length) {
+            const ue = s - te.length;
+            if (C.doc.textBetween(ue, s) === te) {
+              const me = E.view.coordsAtPos(s), he = Ce(new DOMRect(me.left, me.top, 0, 0)), be = () => {
+                const ne = F.current?.activeEditor;
+                if (!ne) return;
+                const De = ne.state.selection.from, Ne = ne.state.tr.delete(ue, De);
+                ne.view.dispatch(Ne);
+              };
+              M.current = be, W.current = s, B(he), D(!0), H(), G?.({
+                position: { from: ue, to: s },
+                bounds: he,
+                cleanup: be
+              });
+              return;
+            }
           }
-        }
+          if (!fe.current)
+            return;
+          if (W.current == null) {
+            D(!1), H();
+            return;
+          }
+          if (s < W.current) {
+            D(!1), W.current = null, H();
+            return;
+          }
+          const k = C.doc.textBetween(W.current, s);
+          de(k);
+          const U = E.view.coordsAtPos(s), L = Ce(new DOMRect(U.left, U.top, 0, 0));
+          B(L);
+        }), c.on("update", () => {
+          ce(c);
+        }), ce(c);
       }
+      P?.();
+    }, b = new t({
+      selector: se.current,
+      document: g?.source,
+      documentMode: g?.mode || "editing",
+      modules: i,
+      toolbar: $?.selector,
+      onReady: v
     });
-    R.current = y;
+    F.current = b;
   })(), () => {
-    R.current && (typeof R.current.destroy == "function" && R.current.destroy(), R.current = null);
-  }) : void 0, [
-    p?.source,
-    p?.mode,
-    J,
-    q,
-    I,
-    H,
-    F
-  ]);
-  const pe = C(
-    async (t) => {
-      if (L.current && (L.current(), L.current = null), W.current = null, d(), t.id.startsWith("custom_") && M)
-        try {
-          const r = await M(t);
-          if (r) {
-            B("inline", {
-              alias: r.label,
-              category: r.category,
-              metadata: r.metadata,
-              defaultValue: r.defaultValue
-            }), E(!1);
-            return;
-          }
-        } catch (r) {
-          console.error("Field creation failed:", r);
+    M.current = null, W.current = null;
+    const t = F.current;
+    t && typeof t.destroy == "function" && t.destroy(), F.current = null;
+  }) : void 0, [g?.source, g?.mode, te, ce, P, G, N]);
+  const ke = S(
+    async (e) => {
+      M.current && (M.current(), M.current = null), W.current = null, H();
+      const t = e.mode || "inline";
+      if (e.id.startsWith("custom_") && R) {
+        const i = await R(e);
+        if (i) {
+          const v = i.mode || t;
+          K(v, {
+            alias: i.label,
+            metadata: i.metadata,
+            defaultValue: i.defaultValue
+          }), D(!1);
+          return;
         }
-      B("inline", {
-        alias: t.label,
-        category: t.category,
-        metadata: t.metadata,
-        defaultValue: t.defaultValue
-      }), E(!1);
+      }
+      K(t, {
+        alias: e.label,
+        metadata: e.metadata,
+        defaultValue: e.defaultValue
+      }), D(!1);
     },
-    [B, M, d]
-  ), je = C(() => {
-    E(!1), W.current = null, d(), L.current && (L.current(), L.current = null);
-  }, [d]), Ce = C(() => {
-    if (!R.current?.activeEditor || v.length === 0)
-      return;
-    const t = v.findIndex(
-      (b) => b.id === A
-    ), r = t >= 0 ? (t + 1) % v.length : 0;
-    _(v[r].id);
-  }, [v, A, _]), ke = C(() => {
-    if (!R.current?.activeEditor || v.length === 0)
-      return;
-    const t = v.findIndex(
-      (b) => b.id === A
-    ), r = t > 0 ? t - 1 : v.length - 1;
-    _(v[r].id);
-  }, [v, A, _]), Se = C(
-    async (t) => {
-      try {
-        await R.current?.export({
-          exportType: ["docx"],
-          exportedName: t?.fileName ? t?.fileName : "document"
-        });
-      } catch (r) {
-        throw console.error("Failed to export DOCX", r), r;
+    [K, R, H]
+  ), Se = S(
+    (e) => {
+      M.current && (M.current(), M.current = null), W.current = null, H();
+      const t = F.current?.activeEditor;
+      if (!t) return;
+      const i = t.helpers?.structuredContentCommands;
+      if (!i) return;
+      const v = e.group || `group-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`, b = i.createTagObject?.({
+        group: v
+      });
+      if ((e.mode || "inline") === "inline" ? t.commands.insertStructuredContentInline?.({
+        attrs: {
+          alias: e.alias,
+          tag: b
+        },
+        text: e.alias
+      }) : t.commands.insertStructuredContentBlock?.({
+        attrs: {
+          alias: e.alias,
+          tag: b
+        },
+        text: e.alias
+      })) {
+        e.group || Z(e.id, { tag: b }), D(!1);
+        const C = Q(t);
+        z(C), y?.(C);
       }
     },
-    []
+    [Z, H, y]
+  ), Te = S(() => {
+    D(!1), W.current = null, H(), M.current && (M.current(), M.current = null);
+  }, [H]), Ee = S(() => {
+    if (!F.current?.activeEditor || p.length === 0) return;
+    const e = p.findIndex((i) => i.id === V), t = e >= 0 ? (e + 1) % p.length : 0;
+    _(p[t].id);
+  }, [p, V, _]), Ie = S(() => {
+    if (!F.current?.activeEditor || p.length === 0) return;
+    const e = p.findIndex((i) => i.id === V), t = e > 0 ? e - 1 : p.length - 1;
+    _(p[t].id);
+  }, [p, V, _]), Me = S(
+    async (e) => {
+      const { fileName: t = "document", triggerDownload: i = !0 } = e || {}, v = await F.current?.export({
+        exportType: ["docx"],
+        exportedName: t,
+        triggerDownload: i
+      }), b = F.current?.activeEditor;
+      if (b) {
+        const c = Q(b);
+        q?.({ fields: c, blob: i ? void 0 : v, fileName: t });
+      }
+      return v;
+    },
+    [q]
   );
-  Me(x, () => ({
-    insertField: (t) => B("inline", t),
-    insertBlockField: (t) => B("block", t),
-    updateField: oe,
-    deleteField: h,
+  Be(d, () => ({
+    insertField: (e) => K("inline", e),
+    insertBlockField: (e) => K("block", e),
+    updateField: Z,
+    deleteField: ae,
     selectField: _,
-    nextField: Ce,
-    previousField: ke,
-    getFields: () => v,
-    exportTemplate: Se
+    nextField: Ee,
+    previousField: Ie,
+    getFields: () => p,
+    exportTemplate: Me,
+    getSuperDoc: () => F.current
   }));
-  const Fe = n.component || Be, xe = i.component || $e, X = Ve(F);
-  return /* @__PURE__ */ o.jsxs(
-    "div",
-    {
-      className: `superdoc-template-builder ${G || ""}`,
-      style: O,
-      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(
-            xe,
-            {
-              fields: v,
-              onSelect: (t) => _(t.id),
-              onDelete: h,
-              selectedFieldId: A || void 0
-            }
-          ) }),
-          /* @__PURE__ */ o.jsxs("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
-            X?.renderDefaultContainer && /* @__PURE__ */ o.jsx(
-              "div",
-              {
-                id: "superdoc-toolbar",
-                className: "superdoc-template-builder-toolbar",
-                "data-testid": "template-builder-toolbar"
-              }
-            ),
-            /* @__PURE__ */ o.jsx(
-              "div",
-              {
-                ref: te,
-                className: "superdoc-template-builder-editor",
-                style: { height: K },
-                "data-testid": "template-builder-editor"
-              }
-            )
-          ] }),
-          i.position === "right" && /* @__PURE__ */ o.jsx("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ o.jsx(
-            xe,
-            {
-              fields: v,
-              onSelect: (t) => _(t.id),
-              onDelete: h,
-              selectedFieldId: A || void 0
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ o.jsx(
-          Fe,
+  const Re = u.component || We, xe = a.component || Le, $ = Pe(N);
+  return /* @__PURE__ */ o("div", { className: `superdoc-template-builder ${A || ""}`, style: X, children: [
+    /* @__PURE__ */ o("div", { style: { display: "flex", gap: "20px" }, children: [
+      a.position === "left" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
+        xe,
+        {
+          fields: p,
+          onSelect: (e) => _(e.id),
+          onDelete: ae,
+          onUpdate: (e) => Z(e.id, e),
+          selectedFieldId: V || void 0
+        }
+      ) }),
+      /* @__PURE__ */ o("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
+        $?.renderDefaultContainer && /* @__PURE__ */ r(
+          "div",
           {
-            isVisible: g,
-            position: w,
-            availableFields: c.available || [],
-            filteredFields: ee,
-            filterQuery: D,
-            allowCreate: c.allowCreate || !1,
-            onSelect: pe,
-            onClose: je,
-            onCreateField: M
+            id: "superdoc-toolbar",
+            className: "superdoc-template-builder-toolbar",
+            "data-testid": "template-builder-toolbar"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            ref: se,
+            className: "superdoc-template-builder-editor",
+            style: { height: ie },
+            "data-testid": "template-builder-editor"
           }
         )
-      ]
-    }
-  );
+      ] }),
+      a.position === "right" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
+        xe,
+        {
+          fields: p,
+          onSelect: (e) => _(e.id),
+          onDelete: ae,
+          onUpdate: (e) => Z(e.id, e),
+          selectedFieldId: V || void 0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r(
+      Re,
+      {
+        isVisible: j,
+        position: m,
+        availableFields: l.available || [],
+        filteredFields: ee,
+        filterQuery: h,
+        allowCreate: l.allowCreate || !1,
+        onSelect: ke,
+        onClose: Te,
+        onCreateField: R,
+        existingFields: p,
+        onSelectExisting: Se
+      }
+    )
+  ] });
 });
-He.displayName = "SuperDocTemplateBuilder";
+je.displayName = "SuperDocTemplateBuilder";
 export {
-  $e as FieldList,
-  Be as FieldMenu,
-  He as default
+  Le as FieldList,
+  We as FieldMenu,
+  je as default
 };