@superdoc-dev/template-builder 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,359 +1,57 @@
-import Ae, { useState as Y, useEffect as pe, useMemo as ve, useCallback as C, forwardRef as Ie, useRef as te, useImperativeHandle as Me } from "react";
-var de = { exports: {} }, ae = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * 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 ae;
-  Ee = 1;
-  var i = Symbol.for("react.transitional.element"), b = Symbol.for("react.fragment");
-  function h(d, r, l) {
-    var S = null;
-    if (l !== void 0 && (S = "" + l), r.key !== void 0 && (S = "" + r.key), "key" in r) {
-      l = {};
-      for (var N in r)
-        N !== "key" && (l[N] = r[N]);
-    } else l = r;
-    return r = l.ref, {
-      $$typeof: i,
-      type: d,
-      key: S,
-      ref: r !== void 0 ? r : null,
-      props: l
-    };
-  }
-  return ae.Fragment = b, ae.jsx = h, ae.jsxs = h, ae;
-}
-var ie = {};
-/**
- * @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 i(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === W ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case U:
-          return "Fragment";
-        case p:
-          return "Profiler";
-        case q:
-          return "StrictMode";
-        case z:
-          return "Suspense";
-        case a:
-          return "SuspenseList";
-        case T:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case re:
-            return "Portal";
-          case M:
-            return e.displayName || "Context";
-          case $:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case X:
-            var s = e.render;
-            return e = e.displayName, e || (e = s.displayName || s.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case v:
-            return s = e.displayName || null, s !== null ? s : i(e.type) || "Memo";
-          case R:
-            s = e._payload, e = e._init;
-            try {
-              return i(e(s));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function b(e) {
-      return "" + e;
-    }
-    function h(e) {
-      try {
-        b(e);
-        var s = !1;
-      } catch {
-        s = !0;
-      }
-      if (s) {
-        s = console;
-        var f = s.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return f.call(
-          s,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          u
-        ), b(e);
-      }
-    }
-    function d(e) {
-      if (e === U) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === R)
-        return "<...>";
-      try {
-        var s = i(e);
-        return s ? "<" + s + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function r() {
-      var e = P.A;
-      return e === null ? null : e.getOwner();
-    }
-    function l() {
-      return Error("react-stack-top-frame");
-    }
-    function S(e) {
-      if (le.call(e, "key")) {
-        var s = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (s && s.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function N(e, s) {
-      function f() {
-        D || (D = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          s
-        ));
-      }
-      f.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: f,
-        configurable: !0
-      });
-    }
-    function G() {
-      var e = i(this.type);
-      return oe[e] || (oe[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function J(e, s, f, u, B, Z) {
-      var y = f.ref;
-      return e = {
-        $$typeof: k,
-        type: e,
-        key: s,
-        props: f,
-        _owner: u
-      }, (y !== void 0 ? y : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: G
-      }) : 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: Z
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function A(e, s, f, u, B, Z) {
-      var y = s.children;
-      if (y !== void 0)
-        if (u)
-          if (ne(y)) {
-            for (u = 0; u < y.length; u++)
-              O(y[u]);
-            Object.freeze && Object.freeze(y);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else O(y);
-      if (le.call(s, "key")) {
-        y = i(e);
-        var _ = Object.keys(s).filter(function(fe) {
-          return fe !== "key";
-        });
-        u = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", Q[y + u] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          u,
-          y,
-          _,
-          y
-        ), Q[y + u] = !0);
-      }
-      if (y = null, f !== void 0 && (h(f), y = "" + f), S(s) && (h(s.key), y = "" + s.key), "key" in s) {
-        f = {};
-        for (var K in s)
-          K !== "key" && (f[K] = s[K]);
-      } else f = s;
-      return y && N(
-        f,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), J(
-        e,
-        y,
-        f,
-        r(),
-        B,
-        Z
-      );
-    }
-    function O(e) {
-      E(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === R && (e._payload.status === "fulfilled" ? E(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function E(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === k;
-    }
-    var I = Ae, k = Symbol.for("react.transitional.element"), re = Symbol.for("react.portal"), U = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), p = Symbol.for("react.profiler"), $ = Symbol.for("react.consumer"), M = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), a = Symbol.for("react.suspense_list"), v = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), T = Symbol.for("react.activity"), W = Symbol.for("react.client.reference"), P = I.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, le = Object.prototype.hasOwnProperty, ne = Array.isArray, j = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    I = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var D, oe = {}, L = I.react_stack_bottom_frame.bind(
-      I,
-      l
-    )(), se = j(d(l)), Q = {};
-    ie.Fragment = U, ie.jsx = function(e, s, f) {
-      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return A(
-        e,
-        s,
-        f,
-        !1,
-        u ? Error("react-stack-top-frame") : L,
-        u ? j(d(e)) : se
-      );
-    }, ie.jsxs = function(e, s, f) {
-      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return A(
-        e,
-        s,
-        f,
-        !0,
-        u ? Error("react-stack-top-frame") : L,
-        u ? j(d(e)) : se
-      );
-    };
-  })()), ie;
-}
-var Te;
-function We() {
-  return Te || (Te = 1, process.env.NODE_ENV === "production" ? de.exports = De() : de.exports = Le()), de.exports;
-}
-var n = We();
-const Be = ({
-  isVisible: i,
-  position: b,
-  availableFields: h,
-  filteredFields: d,
-  filterQuery: r,
-  allowCreate: l,
-  onSelect: S,
-  onClose: N,
-  onCreateField: G
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { useState as I, useEffect as se, useMemo as Ce, forwardRef as Re, useRef as U, useCallback as S, useImperativeHandle as Ne } from "react";
+const ze = ({
+  isVisible: n,
+  position: l,
+  availableFields: u,
+  filteredFields: s,
+  filterQuery: a,
+  allowCreate: d,
+  onSelect: B,
+  onClose: P,
+  onCreateField: G,
+  existingFields: p = [],
+  onSelectExisting: T
 }) => {
-  const [J, A] = Y(!1), [O, E] = Y(""), [I, k] = Y("inline");
-  pe(() => {
-    i || (A(!1), E(""), k("inline"));
-  }, [i]);
-  const re = ve(() => ({
+  const [x, y] = I(!1), [F, N] = I(""), [q, A] = I("inline"), [J, g] = I(!0), [z, W] = I(!0);
+  se(() => {
+    n || (y(!1), N(""), A("inline"));
+  }, [n]);
+  const Q = Ce(() => ({
     position: "absolute",
-    left: b?.left,
-    top: b?.top,
+    left: l?.left,
+    top: l?.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"
-  }), [b]), U = d ?? h, q = !!r, p = ve(() => {
-    const a = [], v = /* @__PURE__ */ new Map();
-    return U.forEach((R) => {
-      const T = R.category?.trim() || "Uncategorized", W = v.get(T);
-      if (W !== void 0) {
-        a[W].fields.push(R);
-        return;
-      }
-      v.set(T, a.length), a.push({ category: T, fields: [R] });
-    }), a;
-  }, [U]), [$, M] = Y({});
-  pe(() => {
-    M((a) => {
-      if (p.length === 0)
-        return Object.keys(a).length === 0 ? a : {};
-      const v = {};
-      let R = Object.keys(a).length !== p.length;
-      return p.forEach(({ category: T }, W) => {
-        const P = q ? !0 : a[T] ?? W === 0;
-        v[T] = P, !R && a[T] !== P && (R = !0);
-      }), R ? v : a;
-    });
-  }, [p, q]);
-  const X = C((a) => {
-    M((v) => ({
-      ...v,
-      [a]: !v[a]
-    }));
-  }, []);
-  if (!i) return null;
-  const z = async () => {
-    const a = O.trim();
-    if (!a) return;
-    const v = {
+    width: "280px"
+  }), [l]), V = s ?? u, M = !!a;
+  if (se(() => {
+    M && W(!0);
+  }, [M]), !n) return null;
+  const ee = async () => {
+    const h = F.trim();
+    if (!h) return;
+    const j = {
       id: `custom_${Date.now()}`,
-      label: a,
-      category: "Custom",
-      metadata: { mode: I }
+      label: h,
+      metadata: { mode: q }
     };
     try {
       if (G) {
-        const R = await G(v);
-        S(R || v);
+        const b = await G(j);
+        B(b || j);
       } else
-        S(v);
+        B(j);
     } finally {
-      A(!1), E(""), k("inline");
+      y(!1), N(""), A("inline");
     }
   };
-  return /* @__PURE__ */ n.jsxs("div", { className: "superdoc-field-menu", style: re, children: [
-    q && /* @__PURE__ */ n.jsx(
+  return /* @__PURE__ */ o("div", { className: "superdoc-field-menu", style: Q, children: [
+    M && /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -361,23 +59,23 @@ const Be = ({
           borderBottom: "1px solid #f0f0f0",
           marginBottom: "4px"
         },
-        children: /* @__PURE__ */ n.jsxs("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
+        children: /* @__PURE__ */ o("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
           "Filtering results for",
-          /* @__PURE__ */ n.jsx(
+          /* @__PURE__ */ r(
             "span",
             {
               style: { fontWeight: 600, color: "#111827", marginLeft: "4px" },
-              children: r
+              children: a
             }
           )
         ] })
       }
     ),
-    l && !J && /* @__PURE__ */ n.jsx(
+    d && !x && /* @__PURE__ */ r(
       "div",
       {
         className: "field-menu-item",
-        onClick: () => A(!0),
+        onClick: () => y(!0),
         style: {
           padding: "8px 16px",
           cursor: "pointer",
@@ -387,16 +85,16 @@ const Be = ({
         children: "+ Create New Field"
       }
     ),
-    l && J && /* @__PURE__ */ n.jsxs("div", { style: { padding: "8px 16px" }, children: [
-      /* @__PURE__ */ n.jsx(
+    d && x && /* @__PURE__ */ o("div", { style: { padding: "8px 16px" }, children: [
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: O,
+          value: F,
           placeholder: "Field name...",
-          onChange: (a) => E(a.target.value),
-          onKeyDown: (a) => {
-            a.key === "Enter" && z(), a.key === "Escape" && (A(!1), E(""), k("inline"));
+          onChange: (h) => N(h.target.value),
+          onKeyDown: (h) => {
+            h.key === "Enter" && ee(), h.key === "Escape" && (y(!1), N(""), A("inline"));
           },
           autoFocus: !0,
           style: {
@@ -407,7 +105,7 @@ const Be = ({
           }
         }
       ),
-      /* @__PURE__ */ n.jsxs(
+      /* @__PURE__ */ o(
         "div",
         {
           style: {
@@ -417,7 +115,7 @@ const Be = ({
             fontSize: "13px"
           },
           children: [
-            /* @__PURE__ */ n.jsxs(
+            /* @__PURE__ */ o(
               "label",
               {
                 style: {
@@ -427,20 +125,20 @@ const Be = ({
                   cursor: "pointer"
                 },
                 children: [
-                  /* @__PURE__ */ n.jsx(
+                  /* @__PURE__ */ r(
                     "input",
                     {
                       type: "radio",
                       value: "inline",
-                      checked: I === "inline",
-                      onChange: () => k("inline")
+                      checked: q === "inline",
+                      onChange: () => A("inline")
                     }
                   ),
                   "Inline"
                 ]
               }
             ),
-            /* @__PURE__ */ n.jsxs(
+            /* @__PURE__ */ o(
               "label",
               {
                 style: {
@@ -450,13 +148,13 @@ const Be = ({
                   cursor: "pointer"
                 },
                 children: [
-                  /* @__PURE__ */ n.jsx(
+                  /* @__PURE__ */ r(
                     "input",
                     {
                       type: "radio",
                       value: "block",
-                      checked: I === "block",
-                      onChange: () => k("block")
+                      checked: q === "block",
+                      onChange: () => A("block")
                     }
                   ),
                   "Block"
@@ -466,7 +164,7 @@ const Be = ({
           ]
         }
       ),
-      /* @__PURE__ */ n.jsxs(
+      /* @__PURE__ */ o(
         "div",
         {
           style: {
@@ -475,27 +173,27 @@ const Be = ({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ n.jsx(
+            /* @__PURE__ */ r(
               "button",
               {
-                onClick: z,
-                disabled: !O.trim(),
+                onClick: ee,
+                disabled: !F.trim(),
                 style: {
                   padding: "4px 12px",
-                  background: O.trim() ? "#0066cc" : "#ccc",
+                  background: F.trim() ? "#0066cc" : "#ccc",
                   color: "white",
                   border: "none",
                   borderRadius: "3px",
-                  cursor: O.trim() ? "pointer" : "not-allowed"
+                  cursor: F.trim() ? "pointer" : "not-allowed"
                 },
                 children: "Create"
               }
             ),
-            /* @__PURE__ */ n.jsx(
+            /* @__PURE__ */ r(
               "button",
               {
                 onClick: () => {
-                  A(!1), E(""), k("inline");
+                  y(!1), N(""), A("inline");
                 },
                 style: {
                   padding: "4px 12px",
@@ -511,7 +209,7 @@ const Be = ({
         }
       )
     ] }),
-    l && h.length > 0 && /* @__PURE__ */ n.jsx(
+    d && u.length > 0 && /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -520,7 +218,110 @@ const Be = ({
         }
       }
     ),
-    p.length === 0 ? /* @__PURE__ */ n.jsx(
+    p.length > 0 && (() => {
+      const h = /* @__PURE__ */ new Map();
+      p.forEach((b) => {
+        const X = b.group || `individual-${b.id}`, te = h.get(X) || [];
+        te.push(b), h.set(X, te);
+      });
+      const j = Array.from(h.values()).map((b) => ({
+        ...b[0],
+        count: b.length
+      }));
+      return /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            onClick: () => g(!J),
+            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 (",
+                j.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  style: {
+                    display: "inline-block",
+                    width: "8px",
+                    height: "8px",
+                    borderRight: "2px solid #666",
+                    borderBottom: "2px solid #666",
+                    transform: J ? "rotate(45deg)" : "rotate(-45deg)",
+                    transition: "transform 0.2s ease"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        J && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: j.map((b) => /* @__PURE__ */ o(
+          "div",
+          {
+            className: "field-menu-item",
+            onClick: () => T?.(b),
+            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: b.alias || b.id }),
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      color: "#9ca3af",
+                      marginTop: "2px"
+                    },
+                    children: b.group ? `group (${b.count} fields)` : `ID: ${b.id}`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "#6b7280",
+                    padding: "2px 6px",
+                    background: "#f3f4f6",
+                    borderRadius: "3px",
+                    textTransform: "capitalize",
+                    flexShrink: 0
+                  },
+                  children: b.mode || "inline"
+                }
+              )
+            ]
+          },
+          b.group || b.id
+        )) })
+      ] });
+    })(),
+    V.length === 0 ? /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -531,104 +332,112 @@ const Be = ({
         },
         children: "No matching fields"
       }
-    ) : p.map(({ category: a, fields: v }, R) => {
-      const T = !!$[a], W = `${Math.max(v.length * 40, 0)}px`;
-      return /* @__PURE__ */ n.jsxs(
-        "div",
+    ) : /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
+      /* @__PURE__ */ o(
+        "button",
         {
+          type: "button",
+          onClick: () => W(!z),
           style: {
-            borderTop: R === 0 && l ? 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__ */ n.jsxs(
-              "button",
+            /* @__PURE__ */ o("span", { children: [
+              "Available Fields (",
+              V.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ r(
+              "span",
               {
-                type: "button",
-                onClick: () => X(a),
+                "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__ */ n.jsxs("span", { children: [
-                    a,
-                    " (",
-                    v.length,
-                    ")"
-                  ] }),
-                  /* @__PURE__ */ n.jsx(
-                    "span",
-                    {
-                      "aria-hidden": !0,
-                      style: {
-                        display: "inline-block",
-                        width: "8px",
-                        height: "8px",
-                        borderRight: "2px solid #666",
-                        borderBottom: "2px solid #666",
-                        transform: T ? "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: z ? "rotate(45deg)" : "rotate(-45deg)",
+                  transition: "transform 0.2s ease"
+                }
               }
-            ),
-            /* @__PURE__ */ n.jsx(
-              "div",
+            )
+          ]
+        }
+      ),
+      z && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: V.map((h) => /* @__PURE__ */ o(
+        "div",
+        {
+          className: "field-menu-item",
+          onClick: () => B(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.label || h.id }),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "#9ca3af",
+                    marginTop: "2px"
+                  },
+                  children: [
+                    "ID: ",
+                    h.id
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r(
+              "span",
               {
-                "data-category": a,
-                "aria-hidden": !T,
                 style: {
-                  overflow: "hidden",
-                  maxHeight: T ? W : "0px",
-                  opacity: T ? 1 : 0,
-                  transition: "max-height 0.2s ease, opacity 0.2s ease",
-                  pointerEvents: T ? "auto" : "none"
+                  fontSize: "11px",
+                  color: "#6b7280",
+                  padding: "2px 6px",
+                  background: "#f3f4f6",
+                  borderRadius: "3px",
+                  textTransform: "capitalize",
+                  flexShrink: 0
                 },
-                children: /* @__PURE__ */ n.jsx("div", { style: { padding: T ? "4px 0" : 0 }, children: v.map((P) => /* @__PURE__ */ n.jsx(
-                  "div",
-                  {
-                    className: "field-menu-item",
-                    onClick: () => S(P),
-                    style: {
-                      padding: "8px 16px",
-                      cursor: "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between"
-                    },
-                    children: /* @__PURE__ */ n.jsx("span", { style: { fontWeight: 500 }, children: P.label })
-                  },
-                  P.id
-                )) })
+                children: h.metadata?.mode || "inline"
               }
             )
           ]
         },
-        a
-      );
-    }),
-    /* @__PURE__ */ n.jsx(
+        h.id
+      )) })
+    ] }),
+    /* @__PURE__ */ r(
       "div",
       {
         style: {
           borderTop: "1px solid #eee",
           marginTop: "4px"
         },
-        children: /* @__PURE__ */ n.jsx(
+        children: /* @__PURE__ */ r(
           "button",
           {
-            onClick: N,
+            onClick: P,
             style: {
               width: "100%",
               padding: "6px 16px",
@@ -643,517 +452,646 @@ const Be = ({
       }
     )
   ] });
-}, Ve = ({
-  fields: i,
-  onSelect: b,
-  onDelete: h,
-  selectedFieldId: d
-}) => /* @__PURE__ */ n.jsxs(
+}, Be = (n) => {
+  const l = n.split("-");
+  return l.length > 2 ? l[l.length - 1].substring(0, 6) : n.substring(0, 6);
+}, be = ({ field: n, onSelect: l, onDelete: u, isSelected: s, isGrouped: a = !1 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: "superdoc-field-list",
+    onClick: () => l(n),
     style: {
-      width: "250px",
-      background: "white",
-      border: "1px solid #e5e7eb",
-      borderRadius: "8px",
-      padding: "16px"
+      position: "relative",
+      padding: "10px 12px",
+      background: s ? "#eff6ff" : "#f9fafb",
+      border: s ? "1px solid #3b82f6" : "1px solid #e5e7eb",
+      borderRadius: "6px",
+      cursor: "pointer",
+      transition: "all 0.2s",
+      fontSize: a ? "13px" : "14px"
+    },
+    onMouseEnter: (d) => {
+      s || (d.currentTarget.style.background = "#f3f4f6");
     },
+    onMouseLeave: (d) => {
+      s || (d.currentTarget.style.background = "#f9fafb");
+    },
+    title: n.alias,
     children: [
-      /* @__PURE__ */ n.jsxs("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
-        "Template Fields (",
-        i.length,
-        ")"
-      ] }),
-      i.length === 0 ? /* @__PURE__ */ n.jsxs(
-        "div",
+      /* @__PURE__ */ r(
+        "button",
         {
-          style: {
-            color: "#9ca3af",
-            fontSize: "14px",
-            textAlign: "center",
-            padding: "20px 0"
+          onClick: (d) => {
+            d.stopPropagation(), u(n.id);
           },
-          children: [
-            "No fields yet. Type ",
-            "{{",
-            " to add a field."
-          ]
-        }
-      ) : /* @__PURE__ */ n.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: i.map((r) => /* @__PURE__ */ n.jsxs(
-        "div",
-        {
-          onClick: () => b(r),
           style: {
-            position: "relative",
-            padding: "12px",
-            background: d === r.id ? "#eff6ff" : "#f9fafb",
-            border: d === r.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: (l) => {
-            d !== r.id && (l.currentTarget.style.background = "#f3f4f6");
+          onMouseEnter: (d) => {
+            d.currentTarget.style.color = "#ef4444";
           },
-          onMouseLeave: (l) => {
-            d !== r.id && (l.currentTarget.style.background = "#f9fafb");
+          onMouseLeave: (d) => {
+            d.currentTarget.style.color = "#9ca3af";
           },
-          title: r.alias,
-          children: [
-            /* @__PURE__ */ n.jsx(
-              "button",
-              {
-                onClick: (l) => {
-                  l.stopPropagation(), h(r.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: (l) => {
-                  l.currentTarget.style.color = "#ef4444";
-                },
-                onMouseLeave: (l) => {
-                  l.currentTarget.style.color = "#9ca3af";
-                },
-                title: "Delete field",
-                children: /* @__PURE__ */ n.jsx(
-                  "svg",
-                  {
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 16 16",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ n.jsx(
-                      "path",
-                      {
-                        d: "M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4",
-                        stroke: "currentColor",
-                        strokeWidth: "1.5",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round"
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ n.jsxs("div", { style: { paddingRight: "24px" }, children: [
-              /* @__PURE__ */ n.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: a ? "12px" : "14px",
+              color: a ? "#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
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+), We = ({
+  fields: n,
+  onSelect: l,
+  onDelete: u,
+  selectedFieldId: s
+}) => {
+  const [a, d] = I(/* @__PURE__ */ new Set()), { groupedFields: B, ungroupedFields: P } = Ce(() => {
+    const p = {}, T = [];
+    return n.forEach((x) => {
+      x.group ? (p[x.group] || (p[x.group] = []), p[x.group].push(x)) : T.push(x);
+    }), { groupedFields: p, ungroupedFields: T };
+  }, [n]), G = (p) => {
+    d((T) => {
+      const x = new Set(T);
+      return x.has(p) ? x.delete(p) : x.add(p), 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((p) => /* @__PURE__ */ r(
+            be,
+            {
+              field: p,
+              onSelect: l,
+              onDelete: u,
+              isSelected: s === p.id
+            },
+            p.id
+          )),
+          Object.entries(B).map(([p, T]) => {
+            const x = a.has(p), y = T[0];
+            return /* @__PURE__ */ o("div", { children: [
+              /* @__PURE__ */ r(
                 "div",
                 {
                   style: {
-                    fontWeight: "500",
-                    fontSize: "14px",
-                    marginBottom: r.alias && r.alias !== r.id ? "4px" : "0"
+                    position: "relative",
+                    padding: "12px",
+                    background: "#f9fafb",
+                    border: "1px solid #e5e7eb",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    transition: "all 0.2s"
+                  },
+                  onClick: () => G(p),
+                  onMouseEnter: (F) => {
+                    F.currentTarget.style.background = "#f3f4f6";
                   },
-                  children: r.id
+                  onMouseLeave: (F) => {
+                    F.currentTarget.style.background = "#f9fafb";
+                  },
+                  children: /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                    /* @__PURE__ */ r("span", { style: { fontSize: "12px", color: "#6b7280" }, children: x ? "▼" : "▶" }),
+                    /* @__PURE__ */ 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: ",
+                            Be(p),
+                            " (",
+                            T.length,
+                            " fields)"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] })
                 }
               ),
-              /* @__PURE__ */ n.jsxs(
+              x && /* @__PURE__ */ r(
                 "div",
                 {
                   style: {
+                    marginLeft: "16px",
+                    marginTop: "4px",
                     display: "flex",
-                    alignItems: "center",
-                    gap: "6px",
-                    fontSize: "12px",
-                    color: "#4b5563"
+                    flexDirection: "column",
+                    gap: "4px"
                   },
-                  children: [
-                    r.alias && r.alias !== r.id && /* @__PURE__ */ n.jsx("span", { children: r.alias }),
-                    r.mode && /* @__PURE__ */ n.jsx(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "10px",
-                          padding: "2px 6px",
-                          borderRadius: "4px",
-                          background: r.mode === "block" ? "#dbeafe" : "#f3f4f6",
-                          color: r.mode === "block" ? "#1e40af" : "#4b5563",
-                          fontWeight: "500"
-                        },
-                        children: r.mode
-                      }
-                    )
-                  ]
+                  children: T.map((F) => /* @__PURE__ */ r(
+                    be,
+                    {
+                      field: F,
+                      onSelect: l,
+                      onDelete: u,
+                      isSelected: s === F.id,
+                      isGrouped: !0
+                    },
+                    F.id
+                  ))
                 }
               )
-            ] })
-          ]
-        },
-        r.id
-      )) })
-    ]
-  }
-), xe = (i) => {
-  const b = i.helpers?.structuredContentCommands;
-  return b?.getStructuredContentTags ? (b.getStructuredContentTags(i.state) || []).map((d) => {
-    const r = d?.node ?? d, l = r?.attrs ?? {}, N = (r?.type?.name || "").includes("Block") ? "block" : "inline";
+            ] }, p);
+          })
+        ] })
+      ]
+    }
+  );
+}, Z = (n) => {
+  const l = n.helpers?.structuredContentCommands;
+  return l?.getStructuredContentTags ? (l.getStructuredContentTags(n.state) || []).map((s) => {
+    const a = s?.node ?? s, d = a?.attrs ?? {}, P = (a?.type?.name || "").includes("Block") ? "block" : "inline";
     return {
-      id: l.id,
-      alias: l.alias || l.label || "",
-      tag: l.tag,
-      mode: N
+      id: d.id,
+      alias: d.alias || d.label || "",
+      tag: d.tag,
+      mode: P,
+      group: l.getGroup?.(d.tag) ?? void 0
     };
   }) : [];
-}, je = (i, b) => {
-  if (i === b) return !0;
-  if (i.length !== b.length) return !1;
-  for (let h = 0; h < i.length; h += 1) {
-    const d = i[h], r = b[h];
-    if (!r || d.id !== r.id || d.alias !== r.alias || d.tag !== r.tag || d.position !== r.position || d.mode !== r.mode)
+}, ye = (n, l) => {
+  if (n === l) return !0;
+  if (n.length !== l.length) return !1;
+  for (let u = 0; u < n.length; u += 1) {
+    const s = n[u], a = l[u];
+    if (!a || s.id !== a.id || s.alias !== a.alias || s.tag !== a.tag || s.position !== a.position || s.mode !== a.mode || s.group !== a.group)
       return !1;
   }
   return !0;
-}, Ye = (i) => {
-  if (!i) return null;
-  if (i === !0)
+}, He = (n) => {
+  if (!n) return null;
+  if (n === !0)
     return {
       selector: "#superdoc-toolbar",
       config: {},
       renderDefaultContainer: !0
     };
-  if (typeof i == "string")
+  if (typeof n == "string")
     return {
-      selector: i,
+      selector: n,
       config: {},
       renderDefaultContainer: !1
     };
-  const { selector: b, ...h } = i;
+  const { selector: l, ...u } = n;
   return {
-    selector: b || "#superdoc-toolbar",
-    config: h,
-    renderDefaultContainer: b === void 0
+    selector: l || "#superdoc-toolbar",
+    config: u,
+    renderDefaultContainer: l === void 0
   };
-}, ue = 10, $e = 250, ze = 300, we = (i) => {
-  const b = window.innerWidth - $e - ue, h = window.innerHeight - ze - ue, d = Math.min(i.left, b), r = Math.min(i.top, h);
+}, ie = 10, Le = 250, Pe = 300, ve = (n) => {
+  const l = window.innerWidth - Le - ie, u = window.innerHeight - Pe - ie, s = Math.min(n.left, l), a = Math.min(n.top, u);
   return new DOMRect(
-    Math.max(d, ue),
-    Math.max(r, ue),
-    i.width,
-    i.height
+    Math.max(s, ie),
+    Math.max(a, ie),
+    n.width,
+    n.height
   );
-}, Ue = Ie((i, b) => {
+}, Ae = Re((n, l) => {
   const {
-    document: h,
-    fields: d = {},
-    menu: r = {},
-    list: l = {},
-    toolbar: S,
-    onReady: N,
+    document: u,
+    fields: s = {},
+    menu: a = {},
+    list: d = {},
+    toolbar: B,
+    onReady: P,
     onTrigger: G,
-    onFieldInsert: J,
-    onFieldUpdate: A,
-    onFieldDelete: O,
-    onFieldsChange: E,
-    onFieldSelect: I,
-    onFieldCreate: k,
-    className: re,
-    style: U,
-    documentHeight: q = "600px"
-  } = i, [p, $] = Y(
-    d.initial || []
-  ), [M, X] = Y(null), [z, a] = Y(!1), [v, R] = Y(), [T, W] = Y(""), [P, le] = Y(() => d.available || []), ne = te(null), j = te(null), D = te(null), oe = te(d);
-  oe.current = d;
-  const L = te(null), se = te(z);
-  pe(() => {
-    se.current = z;
-  }, [z]);
-  const Q = r.trigger || "{{", e = oe.current.available || [], s = C(
-    (t) => {
-      const o = t.trim().toLowerCase();
-      return o ? e.filter((c) => {
-        const m = c.label.toLowerCase(), F = c.category?.toLowerCase() || "";
-        return m.includes(o) || F.includes(o);
-      }) : e;
+    onFieldInsert: p,
+    onFieldUpdate: T,
+    onFieldDelete: x,
+    onFieldsChange: y,
+    onFieldSelect: F,
+    onFieldCreate: N,
+    className: q,
+    style: A,
+    documentHeight: J = "600px"
+  } = n, [g, z] = I(
+    s.initial || []
+  ), [W, Q] = I(null), [V, M] = I(!1), [ee, h] = I(), [j, b] = I(""), [X, te] = I(() => s.available || []), ne = U(null), w = U(null), D = U(null), ue = U(s);
+  ue.current = s;
+  const H = U(null), pe = U(V);
+  se(() => {
+    pe.current = V;
+  }, [V]);
+  const re = a.trigger || "{{", le = ue.current.available || [], fe = S(
+    (e) => {
+      const t = e.trim().toLowerCase();
+      return t ? le.filter((i) => i.label.toLowerCase().includes(t)) : le;
     },
-    [e]
-  ), f = C(
-    (t) => {
-      W(t), le(s(t));
+    [le]
+  ), de = S(
+    (e) => {
+      b(e), te(fe(e));
     },
-    [s]
-  ), u = C(() => {
-    f("");
-  }, [f]), B = C(
-    (t, o) => {
-      if (!j.current?.activeEditor) return !1;
-      const c = j.current.activeEditor, m = p, F = t === "inline" ? c.commands.insertStructuredContentInline?.({
+    [fe]
+  ), L = S(() => {
+    de("");
+  }, [de]), Y = S(
+    (e, t) => {
+      if (!w.current?.activeEditor) return !1;
+      const i = w.current.activeEditor, v = g, C = e === "inline" ? i.commands.insertStructuredContentInline?.({
         attrs: {
-          alias: o.alias,
-          tag: o.metadata ? JSON.stringify(o.metadata) : o.category
+          alias: t.alias,
+          tag: t.metadata ? JSON.stringify(t.metadata) : void 0
         },
-        text: o.defaultValue || o.alias
-      }) : c.commands.insertStructuredContentBlock?.({
+        text: t.defaultValue || t.alias
+      }) : i.commands.insertStructuredContentBlock?.({
         attrs: {
-          alias: o.alias,
-          tag: o.metadata ? JSON.stringify(o.metadata) : o.category
+          alias: t.alias,
+          tag: t.metadata ? JSON.stringify(t.metadata) : void 0
         },
-        text: o.defaultValue || o.alias
+        text: t.defaultValue || t.alias
       });
-      if (F) {
-        const w = xe(c);
-        $(w), E?.(w);
-        const x = w.find(
-          (g) => !m.some((H) => H.id === g.id)
+      if (C) {
+        const m = Z(i);
+        z(m), y?.(m);
+        const E = m.find(
+          (c) => !v.some((f) => f.id === c.id)
         );
-        x && J?.(x);
+        E && p?.(E);
       }
-      return F;
+      return C;
     },
-    [J, E, p]
-  ), Z = C(
-    (t, o) => {
-      if (!j.current?.activeEditor) return !1;
-      const m = j.current.activeEditor.commands.updateStructuredContentById?.(t, {
-        attrs: o
+    [p, y, g]
+  ), K = S(
+    (e, t) => {
+      if (!w.current?.activeEditor) return !1;
+      const v = w.current.activeEditor.commands.updateStructuredContentById?.(e, {
+        attrs: t
       });
-      return m && $((F) => {
-        const w = F.map(
-          (g) => g.id === t ? { ...g, ...o } : g
+      return v && z((C) => {
+        const m = C.map(
+          (c) => c.id === e ? { ...c, ...t } : c
         );
-        E?.(w);
-        const x = w.find((g) => g.id === t);
-        return x && A?.(x), w;
-      }), m;
+        y?.(m);
+        const E = m.find((c) => c.id === e);
+        return E && T?.(E), m;
+      }), v;
     },
-    [A, E]
-  ), y = C(
-    (t) => {
-      const o = j.current?.activeEditor;
-      if (!o) {
-        console.warn(
-          "[SuperDocTemplateBuilder] deleteField called without active editor"
-        );
-        let x = !1;
-        return $((g) => {
-          if (!g.some((V) => V.id === t)) return g;
-          const H = g.filter((V) => V.id !== t);
-          return x = !0, E?.(H), H;
-        }), x && (O?.(t), X((g) => g === t ? null : g)), x;
+    [T, y]
+  ), ae = S(
+    (e) => {
+      const t = w.current?.activeEditor;
+      if (!t) {
+        let f = !1;
+        return z((k) => {
+          if (!k.some((R) => R.id === e)) return k;
+          const $ = k.filter((R) => R.id !== e);
+          return f = !0, y?.($), $;
+        }), f && (x?.(e), Q((k) => k === e ? null : k)), f;
       }
-      let c = !1;
+      const v = g.find((f) => f.id === e)?.group;
+      let C = !1;
       try {
-        c = o.commands.deleteStructuredContentById?.(t) ?? !1;
-      } catch (x) {
-        console.error(
-          "[SuperDocTemplateBuilder] Delete command failed:",
-          x
+        C = t.commands.deleteStructuredContentById?.(e) ?? !1;
+      } catch {
+        C = !1;
+      }
+      let m = Z(t);
+      const E = m.some((f) => f.id === e);
+      if (!C && E && (m = m.filter((f) => f.id !== e)), v) {
+        const f = m.filter(
+          (k) => k.group === v
         );
+        if (f.length === 1) {
+          const k = f[0];
+          t.commands.updateStructuredContentById?.(k.id, {
+            attrs: { tag: void 0 }
+          }), m = Z(t);
+        }
       }
-      let m = xe(o);
-      const F = m.some((x) => x.id === t);
-      !c && F && (m = m.filter((x) => x.id !== t));
-      let w = !1;
-      return $((x) => {
-        if (je(x, m))
-          return x;
-        const g = x.some((V) => V.id === t), H = m.some((V) => V.id === t);
-        return g && !H && (w = !0), E?.(m), m;
-      }), w && (O?.(t), X((x) => x === t ? null : x)), c || w;
+      let c = !1;
+      return z((f) => {
+        if (ye(f, m))
+          return f;
+        const k = f.some((R) => R.id === e), $ = m.some((R) => R.id === e);
+        return k && !$ && (c = !0), y?.(m), m;
+      }), c && (x?.(e), Q((f) => f === e ? null : f)), C || c;
     },
-    [O, E]
-  ), _ = C(
-    (t) => {
-      if (!j.current?.activeEditor) return;
-      j.current.activeEditor.commands.selectStructuredContentById?.(t), X(t);
-      const c = p.find((m) => m.id === t);
-      c && I?.(c);
+    [x, y, g]
+  ), O = S(
+    (e) => {
+      if (!w.current?.activeEditor) return;
+      w.current.activeEditor.commands.selectStructuredContentById?.(e), Q(e);
+      const i = g.find((v) => v.id === e);
+      i && F?.(i);
     },
-    [p, I]
-  ), K = C(
-    (t) => {
-      if (!t) return;
-      const o = xe(t);
-      $((c) => je(c, o) ? c : (E?.(o), o));
+    [g, F]
+  ), ce = S(
+    (e) => {
+      if (!e) return;
+      const t = Z(e);
+      z((i) => ye(i, t) ? i : (y?.(t), t));
     },
-    [E]
+    [y]
   );
-  pe(() => ne.current ? ((async () => {
-    const { SuperDoc: o } = await import("superdoc"), c = {
+  se(() => ne.current ? ((async () => {
+    const { SuperDoc: t } = await import("superdoc"), i = {
       selector: ne.current,
-      document: h?.source,
-      documentMode: h?.mode || "editing",
+      document: u?.source,
+      documentMode: u?.mode || "editing",
       onReady: () => {
-        if (m.activeEditor) {
-          const F = m.activeEditor;
-          F.on("update", ({ editor: w }) => {
-            const { state: x } = w, { from: g } = x.selection;
-            if (g >= Q.length) {
-              const me = g - Q.length;
-              if (x.doc.textBetween(me, g) === Q) {
-                const he = w.view.coordsAtPos(g), be = we(
-                  new DOMRect(he.left, he.top, 0, 0)
-                ), ye = () => {
-                  const ce = j.current?.activeEditor;
-                  if (!ce) return;
-                  const Oe = ce.state.selection.from, Pe = ce.state.tr.delete(me, Oe);
-                  ce.view.dispatch(Pe);
+        if (v.activeEditor) {
+          const C = v.activeEditor;
+          C.on("update", ({ editor: m }) => {
+            const { state: E } = m, { from: c } = E.selection;
+            if (c >= re.length) {
+              const R = c - re.length;
+              if (E.doc.textBetween(R, c) === re) {
+                const me = m.view.coordsAtPos(c), xe = ve(
+                  new DOMRect(me.left, me.top, 0, 0)
+                ), he = () => {
+                  const oe = w.current?.activeEditor;
+                  if (!oe) return;
+                  const Me = oe.state.selection.from, De = oe.state.tr.delete(R, Me);
+                  oe.view.dispatch(De);
                 };
-                D.current = ye, L.current = g, R(be), a(!0), u(), G?.({
-                  position: { from: me, to: g },
-                  bounds: be,
-                  cleanup: ye
+                D.current = he, H.current = c, h(xe), M(!0), L(), G?.({
+                  position: { from: R, to: c },
+                  bounds: xe,
+                  cleanup: he
                 });
                 return;
               }
             }
-            if (!se.current)
+            if (!pe.current)
               return;
-            if (L.current == null) {
-              a(!1), u();
+            if (H.current == null) {
+              M(!1), L();
               return;
             }
-            if (g < L.current) {
-              a(!1), L.current = null, u();
+            if (c < H.current) {
+              M(!1), H.current = null, L();
               return;
             }
-            const H = x.doc.textBetween(
-              L.current,
-              g
+            const f = E.doc.textBetween(
+              H.current,
+              c
             );
-            f(H);
-            const V = w.view.coordsAtPos(g), Ne = we(
-              new DOMRect(V.left, V.top, 0, 0)
+            de(f);
+            const k = m.view.coordsAtPos(c), $ = ve(
+              new DOMRect(k.left, k.top, 0, 0)
             );
-            R(Ne);
-          }), F.on("update", () => {
-            K(F);
-          }), K(F);
+            h($);
+          }), C.on("update", () => {
+            ce(C);
+          }), ce(C);
         }
-        N?.();
+        P?.();
       }
-    }, m = new o({
-      ...c,
-      ...ee && {
-        toolbar: ee.selector,
+    }, v = new t({
+      selector: ne.current,
+      documentMode: u?.mode || "editing",
+      ...i,
+      ..._ && {
+        toolbar: _.selector,
         modules: {
           toolbar: {
-            selector: ee.selector,
-            toolbarGroups: ee.config.toolbarGroups || ["center"],
-            excludeItems: ee.config.excludeItems || [],
-            ...ee.config
+            selector: _.selector,
+            toolbarGroups: _.config.toolbarGroups || ["center"],
+            excludeItems: _.config.excludeItems || [],
+            ..._.config
           }
         }
       }
     });
-    j.current = m;
+    w.current = v;
   })(), () => {
-    D.current = null, L.current = null;
-    const o = j.current;
-    o && typeof o.destroy == "function" && o.destroy(), j.current = null;
+    D.current = null, H.current = null;
+    const t = w.current;
+    t && typeof t.destroy == "function" && t.destroy(), w.current = null;
   }) : void 0, [
-    h?.source,
-    h?.mode,
-    Q,
-    K,
-    N,
+    u?.source,
+    u?.mode,
+    re,
+    ce,
+    P,
     G,
-    S
+    B
   ]);
-  const fe = C(
-    async (t) => {
-      D.current && (D.current(), D.current = null), L.current = null, u();
-      const o = t.metadata?.mode || "inline";
-      if (t.id.startsWith("custom_") && k)
-        try {
-          const c = await k(t);
-          if (c) {
-            const m = c.metadata?.mode || o;
-            B(m, {
-              alias: c.label,
-              category: c.category,
-              metadata: c.metadata,
-              defaultValue: c.defaultValue
-            }), a(!1);
-            return;
-          }
-        } catch (c) {
-          console.error("Field creation failed:", c);
+  const Fe = S(
+    async (e) => {
+      D.current && (D.current(), D.current = null), H.current = null, L();
+      const t = e.metadata?.mode || "inline";
+      if (e.id.startsWith("custom_") && N) {
+        const i = await N(e);
+        if (i) {
+          const v = i.metadata?.mode || t;
+          Y(v, {
+            alias: i.label,
+            metadata: i.metadata,
+            defaultValue: i.defaultValue
+          }), M(!1);
+          return;
         }
-      B(o, {
-        alias: t.label,
-        category: t.category,
-        metadata: t.metadata,
-        defaultValue: t.defaultValue
-      }), a(!1);
+      }
+      Y(t, {
+        alias: e.label,
+        metadata: e.metadata,
+        defaultValue: e.defaultValue
+      }), M(!1);
     },
-    [B, k, u]
-  ), ke = C(() => {
-    a(!1), L.current = null, u(), D.current && (D.current(), D.current = null);
-  }, [u]), _e = C(() => {
-    if (!j.current?.activeEditor || p.length === 0)
+    [Y, N, L]
+  ), we = S(
+    (e) => {
+      D.current && (D.current(), D.current = null), H.current = null, L();
+      const t = w.current?.activeEditor;
+      if (!t) return;
+      const i = t.helpers?.structuredContentCommands;
+      if (!i) return;
+      const v = e.group || `group-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`, C = i.createTagObject?.({
+        group: v
+      });
+      if ((e.mode || "inline") === "inline" ? t.commands.insertStructuredContentInline?.({
+        attrs: {
+          alias: e.alias,
+          tag: C
+        },
+        text: e.alias
+      }) : t.commands.insertStructuredContentBlock?.({
+        attrs: {
+          alias: e.alias,
+          tag: C
+        },
+        text: e.alias
+      })) {
+        e.group || K(e.id, { tag: C }), M(!1);
+        const c = Z(t);
+        z(c), y?.(c);
+      }
+    },
+    [K, L, y]
+  ), ke = S(() => {
+    M(!1), H.current = null, L(), D.current && (D.current(), D.current = null);
+  }, [L]), Se = S(() => {
+    if (!w.current?.activeEditor || g.length === 0)
       return;
-    const t = p.findIndex(
-      (c) => c.id === M
-    ), o = t >= 0 ? (t + 1) % p.length : 0;
-    _(p[o].id);
-  }, [p, M, _]), Ce = C(() => {
-    if (!j.current?.activeEditor || p.length === 0)
+    const e = g.findIndex(
+      (i) => i.id === W
+    ), t = e >= 0 ? (e + 1) % g.length : 0;
+    O(g[t].id);
+  }, [g, W, O]), Te = S(() => {
+    if (!w.current?.activeEditor || g.length === 0)
       return;
-    const t = p.findIndex(
-      (c) => c.id === M
-    ), o = t > 0 ? t - 1 : p.length - 1;
-    _(p[o].id);
-  }, [p, M, _]), Se = C(
-    async (t) => {
-      const { fileName: o = "document", triggerDownload: c = !0 } = t || {};
-      try {
-        return await j.current?.export({
-          exportType: ["docx"],
-          exportedName: o,
-          triggerDownload: c
-        });
-      } catch (m) {
-        throw console.error("Failed to export DOCX", m), m;
-      }
+    const e = g.findIndex(
+      (i) => i.id === W
+    ), t = e > 0 ? e - 1 : g.length - 1;
+    O(g[t].id);
+  }, [g, W, O]), Ee = S(
+    async (e) => {
+      const { fileName: t = "document", triggerDownload: i = !0 } = e || {};
+      return await w.current?.export({
+        exportType: ["docx"],
+        exportedName: t,
+        triggerDownload: i
+      });
     },
     []
   );
-  Me(b, () => ({
-    insertField: (t) => B("inline", t),
-    insertBlockField: (t) => B("block", t),
-    updateField: Z,
-    deleteField: y,
-    selectField: _,
-    nextField: _e,
-    previousField: Ce,
-    getFields: () => p,
-    exportTemplate: Se
+  Ne(l, () => ({
+    insertField: (e) => Y("inline", e),
+    insertBlockField: (e) => Y("block", e),
+    updateField: K,
+    deleteField: ae,
+    selectField: O,
+    nextField: Se,
+    previousField: Te,
+    getFields: () => g,
+    exportTemplate: Ee,
+    getSuperDoc: () => w.current
   }));
-  const Fe = r.component || Be, ge = l.component || Ve, ee = Ye(S);
-  return /* @__PURE__ */ n.jsxs(
+  const Ie = a.component || ze, ge = d.component || We, _ = He(B);
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `superdoc-template-builder ${re || ""}`,
-      style: U,
+      className: `superdoc-template-builder ${q || ""}`,
+      style: A,
       children: [
-        /* @__PURE__ */ n.jsxs("div", { style: { display: "flex", gap: "20px" }, children: [
-          l.position === "left" && /* @__PURE__ */ n.jsx("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ n.jsx(
+        /* @__PURE__ */ o("div", { style: { display: "flex", gap: "20px" }, children: [
+          d.position === "left" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
             ge,
             {
-              fields: p,
-              onSelect: (t) => _(t.id),
-              onDelete: y,
-              onUpdate: (t) => Z(t.id, t),
-              selectedFieldId: M || void 0
+              fields: g,
+              onSelect: (e) => O(e.id),
+              onDelete: ae,
+              onUpdate: (e) => K(e.id, e),
+              selectedFieldId: W || void 0
             }
           ) }),
-          /* @__PURE__ */ n.jsxs("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
-            ee?.renderDefaultContainer && /* @__PURE__ */ n.jsx(
+          /* @__PURE__ */ o("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
+            _?.renderDefaultContainer && /* @__PURE__ */ r(
               "div",
               {
                 id: "superdoc-toolbar",
@@ -1161,48 +1099,50 @@ const Be = ({
                 "data-testid": "template-builder-toolbar"
               }
             ),
-            /* @__PURE__ */ n.jsx(
+            /* @__PURE__ */ r(
               "div",
               {
                 ref: ne,
                 className: "superdoc-template-builder-editor",
-                style: { height: q },
+                style: { height: J },
                 "data-testid": "template-builder-editor"
               }
             )
           ] }),
-          l.position === "right" && /* @__PURE__ */ n.jsx("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ n.jsx(
+          d.position === "right" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
             ge,
             {
-              fields: p,
-              onSelect: (t) => _(t.id),
-              onDelete: y,
-              onUpdate: (t) => Z(t.id, t),
-              selectedFieldId: M || void 0
+              fields: g,
+              onSelect: (e) => O(e.id),
+              onDelete: ae,
+              onUpdate: (e) => K(e.id, e),
+              selectedFieldId: W || void 0
             }
           ) })
         ] }),
-        /* @__PURE__ */ n.jsx(
-          Fe,
+        /* @__PURE__ */ r(
+          Ie,
           {
-            isVisible: z,
-            position: v,
-            availableFields: d.available || [],
-            filteredFields: P,
-            filterQuery: T,
-            allowCreate: d.allowCreate || !1,
-            onSelect: fe,
+            isVisible: V,
+            position: ee,
+            availableFields: s.available || [],
+            filteredFields: X,
+            filterQuery: j,
+            allowCreate: s.allowCreate || !1,
+            onSelect: Fe,
             onClose: ke,
-            onCreateField: k
+            onCreateField: N,
+            existingFields: g,
+            onSelectExisting: we
           }
         )
       ]
     }
   );
 });
-Ue.displayName = "SuperDocTemplateBuilder";
+Ae.displayName = "SuperDocTemplateBuilder";
 export {
-  Ve as FieldList,
-  Be as FieldMenu,
-  Ue as default
+  We as FieldList,
+  ze as FieldMenu,
+  Ae as default
 };