@superdoc-dev/template-builder 1.1.0 → 1.2.0-next.1

package/dist/index.mjs

@@ -1,1105 +1,988 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { useState as E, useEffect as oe, useMemo as pe, forwardRef as We, useRef as q, useCallback as S, useImperativeHandle as He } from "react";
-const Le = ({
-  isVisible: n,
-  position: l,
-  availableFields: m,
-  filteredFields: s,
-  filterQuery: p,
-  allowCreate: c,
-  onSelect: N,
-  onClose: H,
-  onCreateField: G,
-  existingFields: f = [],
-  onSelectExisting: T
-}) => {
-  const [y, I] = E(!1), [u, L] = E(""), [P, z] = E("inline"), [Q, ie] = E(!0), [X, g] = E(!0);
-  oe(() => {
-    n || (I(!1), L(""), z("inline"));
-  }, [n]);
-  const A = pe(() => ({
-    position: "absolute",
-    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",
-    width: "280px"
-  }), [l]), R = s ?? m, O = !!p;
-  if (oe(() => {
-    O && g(!0);
-  }, [O]), !n) return null;
-  const _ = async () => {
-    const a = u.trim();
-    if (!a) return;
-    const V = {
-      id: `custom_${Date.now()}`,
-      label: a,
-      mode: P
-    };
-    try {
-      if (G) {
-        const b = await G(V);
-        N(b || V);
-      } else
-        N(V);
-    } finally {
-      I(!1), L(""), z("inline");
-    }
-  };
-  return /* @__PURE__ */ o("div", { className: "superdoc-field-menu", style: A, children: [
-    O && /* @__PURE__ */ r(
-      "div",
-      {
-        style: {
-          padding: "8px 16px",
-          borderBottom: "1px solid #f0f0f0",
-          marginBottom: "4px"
-        },
-        children: /* @__PURE__ */ o("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
-          "Filtering results for",
-          /* @__PURE__ */ r("span", { style: { fontWeight: 600, color: "#111827", marginLeft: "4px" }, children: p })
-        ] })
-      }
-    ),
-    c && !y && /* @__PURE__ */ r(
-      "div",
-      {
-        className: "field-menu-item",
-        onClick: () => I(!0),
-        style: {
-          padding: "8px 16px",
-          cursor: "pointer",
-          color: "#0066cc",
-          fontWeight: 500
-        },
-        children: "+ Create New Field"
-      }
-    ),
-    c && y && /* @__PURE__ */ o("div", { style: { padding: "8px 16px" }, children: [
-      /* @__PURE__ */ r(
-        "input",
-        {
-          type: "text",
-          value: u,
-          placeholder: "Field name...",
-          onChange: (a) => L(a.target.value),
-          onKeyDown: (a) => {
-            a.key === "Enter" && _(), a.key === "Escape" && (I(!1), L(""), z("inline"));
-          },
-          autoFocus: !0,
-          style: {
-            width: "100%",
-            padding: "4px 8px",
-            border: "1px solid #ddd",
-            borderRadius: "3px"
-          }
-        }
-      ),
-      /* @__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: P === "inline",
-                      onChange: () => z("inline")
-                    }
-                  ),
-                  "Inline"
-                ]
-              }
-            ),
-            /* @__PURE__ */ o(
-              "label",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "4px",
-                  cursor: "pointer"
-                },
-                children: [
-                  /* @__PURE__ */ r(
-                    "input",
-                    {
-                      type: "radio",
-                      value: "block",
-                      checked: P === "block",
-                      onChange: () => z("block")
-                    }
-                  ),
-                  "Block"
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ o(
-        "div",
-        {
-          style: {
-            marginTop: "8px",
-            display: "flex",
-            gap: "8px"
-          },
-          children: [
-            /* @__PURE__ */ r(
-              "button",
-              {
-                onClick: _,
-                disabled: !u.trim(),
-                style: {
-                  padding: "4px 12px",
-                  background: u.trim() ? "#0066cc" : "#ccc",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "3px",
-                  cursor: u.trim() ? "pointer" : "not-allowed"
-                },
-                children: "Create"
-              }
-            ),
-            /* @__PURE__ */ r(
-              "button",
-              {
-                onClick: () => {
-                  I(!1), L(""), z("inline");
-                },
-                style: {
-                  padding: "4px 12px",
-                  background: "white",
-                  border: "1px solid #ddd",
-                  borderRadius: "3px",
-                  cursor: "pointer"
-                },
-                children: "Cancel"
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    c && m.length > 0 && /* @__PURE__ */ r(
-      "div",
-      {
-        style: {
-          borderTop: "1px solid #eee",
-          margin: "4px 0"
-        }
-      }
-    ),
-    f.length > 0 && (() => {
-      const a = /* @__PURE__ */ new Map();
-      f.forEach((b) => {
-        const Y = b.group || `individual-${b.id}`, ee = a.get(Y) || [];
-        ee.push(b), a.set(Y, ee);
-      });
-      const V = Array.from(a.values()).map((b) => ({
-        ...b[0],
-        count: b.length
-      }));
-      return /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
-        /* @__PURE__ */ o(
-          "button",
-          {
-            type: "button",
-            onClick: () => ie(!Q),
-            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 (",
-                V.length,
-                ")"
-              ] }),
-              /* @__PURE__ */ r(
-                "span",
-                {
-                  "aria-hidden": !0,
-                  style: {
-                    display: "inline-block",
-                    width: "8px",
-                    height: "8px",
-                    borderRight: "2px solid #666",
-                    borderBottom: "2px solid #666",
-                    transform: Q ? "rotate(45deg)" : "rotate(-45deg)",
-                    transition: "transform 0.2s ease"
-                  }
-                }
-              )
-            ]
-          }
-        ),
-        Q && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: V.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
-        )) })
-      ] });
-    })(),
-    R.length === 0 ? /* @__PURE__ */ r(
-      "div",
-      {
-        style: {
-          padding: "16px",
-          fontSize: "13px",
-          color: "#6b7280",
-          textAlign: "center"
-        },
-        children: "No matching fields"
-      }
-    ) : /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
-      /* @__PURE__ */ o(
-        "button",
-        {
-          type: "button",
-          onClick: () => g(!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: [
-              "Available Fields (",
-              R.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: R.map((a) => /* @__PURE__ */ o(
-        "div",
-        {
-          className: "field-menu-item",
-          onClick: () => N(a),
-          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: a.label || a.id }),
-              /* @__PURE__ */ o(
-                "div",
-                {
-                  style: {
-                    fontSize: "11px",
-                    color: "#9ca3af",
-                    marginTop: "2px"
-                  },
-                  children: [
-                    "ID: ",
-                    a.id
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ r(
-              "span",
-              {
-                style: {
-                  fontSize: "11px",
-                  color: "#6b7280",
-                  padding: "2px 6px",
-                  background: "#f3f4f6",
-                  borderRadius: "3px",
-                  textTransform: "capitalize",
-                  flexShrink: 0
-                },
-                children: a.mode || "inline"
-              }
-            )
-          ]
-        },
-        a.id
-      )) })
-    ] }),
-    /* @__PURE__ */ r(
-      "div",
-      {
-        style: {
-          borderTop: "1px solid #eee",
-          marginTop: "4px"
-        },
-        children: /* @__PURE__ */ r(
-          "button",
-          {
-            onClick: H,
-            style: {
-              width: "100%",
-              padding: "6px 16px",
-              background: "#f3f4f6",
-              border: "none",
-              borderRadius: "0 0 4px 4px",
-              cursor: "pointer"
-            },
-            children: "Close"
-          }
-        )
-      }
-    )
-  ] });
-}, Pe = (n) => {
-  const l = n.split("-");
-  return l.length > 2 ? l[l.length - 1].substring(0, 6) : n.substring(0, 6);
-}, ve = ({ field: n, onSelect: l, onDelete: m, isSelected: s, isGrouped: p = !1 }) => /* @__PURE__ */ o(
-  "div",
-  {
-    onClick: () => l(n),
-    style: {
-      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: p ? "13px" : "14px"
-    },
-    onMouseEnter: (c) => {
-      s || (c.currentTarget.style.background = "#f3f4f6");
-    },
-    onMouseLeave: (c) => {
-      s || (c.currentTarget.style.background = "#f9fafb");
-    },
-    title: n.alias,
-    children: [
-      /* @__PURE__ */ r(
-        "button",
-        {
-          onClick: (c) => {
-            c.stopPropagation(), m(n.id);
-          },
-          style: {
-            position: "absolute",
-            top: "6px",
-            right: "6px",
-            padding: "4px",
-            background: "transparent",
-            border: "none",
-            cursor: "pointer",
-            color: "#9ca3af",
-            transition: "color 0.2s",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          onMouseEnter: (c) => {
-            c.currentTarget.style.color = "#ef4444";
-          },
-          onMouseLeave: (c) => {
-            c.currentTarget.style.color = "#9ca3af";
-          },
-          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: p ? "12px" : "14px",
-              color: p ? "#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
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    ]
-  }
-), Ae = ({ fields: n, onSelect: l, onDelete: m, selectedFieldId: s }) => {
-  const [p, c] = E(/* @__PURE__ */ new Set()), { groupedFields: N, ungroupedFields: H } = pe(() => {
-    const f = {}, T = [];
-    return n.forEach((y) => {
-      y.group ? (f[y.group] || (f[y.group] = []), f[y.group].push(y)) : T.push(y);
-    }), { groupedFields: f, ungroupedFields: T };
-  }, [n]), G = (f) => {
-    c((T) => {
-      const y = new Set(T);
-      return y.has(f) ? y.delete(f) : y.add(f), y;
-    });
-  };
-  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: [
-          H.map((f) => /* @__PURE__ */ r(
-            ve,
-            {
-              field: f,
-              onSelect: l,
-              onDelete: m,
-              isSelected: s === f.id
-            },
-            f.id
-          )),
-          Object.entries(N).map(([f, T]) => {
-            const y = p.has(f), I = T[0];
-            return /* @__PURE__ */ o("div", { children: [
-              /* @__PURE__ */ r(
-                "div",
-                {
-                  style: {
-                    position: "relative",
-                    padding: "12px",
-                    background: "#f9fafb",
-                    border: "1px solid #e5e7eb",
-                    borderRadius: "6px",
-                    cursor: "pointer",
-                    transition: "all 0.2s"
-                  },
-                  onClick: () => G(f),
-                  onMouseEnter: (u) => {
-                    u.currentTarget.style.background = "#f3f4f6";
-                  },
-                  onMouseLeave: (u) => {
-                    u.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: y ? "▼" : "▶" }),
-                    /* @__PURE__ */ o("div", { style: { flex: 1 }, children: [
-                      /* @__PURE__ */ r("div", { style: { fontWeight: "500", fontSize: "14px" }, children: I.alias }),
-                      /* @__PURE__ */ o(
-                        "div",
-                        {
-                          style: {
-                            fontSize: "11px",
-                            color: "#9ca3af",
-                            marginTop: "2px"
-                          },
-                          children: [
-                            "group: ",
-                            Pe(f),
-                            " (",
-                            T.length,
-                            " fields)"
-                          ]
-                        }
-                      )
-                    ] })
-                  ] })
-                }
-              ),
-              y && /* @__PURE__ */ r(
-                "div",
-                {
-                  style: {
-                    marginLeft: "16px",
-                    marginTop: "4px",
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "4px"
-                  },
-                  children: T.map((u) => /* @__PURE__ */ r(
-                    ve,
-                    {
-                      field: u,
-                      onSelect: l,
-                      onDelete: m,
-                      isSelected: s === u.id,
-                      isGrouped: !0
-                    },
-                    u.id
-                  ))
-                }
-              )
-            ] }, f);
-          })
-        ] })
-      ]
-    }
-  );
-}, J = (n) => {
-  const l = n.helpers?.structuredContentCommands;
-  return l?.getStructuredContentTags ? (l.getStructuredContentTags(n.state) || []).map((s) => {
-    const p = s?.node ?? s, c = p?.attrs ?? {}, H = (p?.type?.name || "").includes("Block") ? "block" : "inline";
-    return {
-      id: c.id,
-      alias: c.alias || c.label || "",
-      tag: c.tag,
-      mode: H,
-      group: l.getGroup?.(c.tag) ?? void 0
-    };
-  }) : [];
-}, Fe = (n, l) => {
-  if (n === l) return !0;
-  if (n.length !== l.length) return !1;
-  for (let m = 0; m < n.length; m += 1) {
-    const s = n[m], p = l[m];
-    if (!p || s.id !== p.id || s.alias !== p.alias || s.tag !== p.tag || s.position !== p.position || s.mode !== p.mode || s.group !== p.group)
-      return !1;
-  }
-  return !0;
-}, Ve = (n) => {
-  if (!n) return null;
-  if (n === !0)
-    return {
-      selector: "#superdoc-toolbar",
-      config: {},
-      renderDefaultContainer: !0
-    };
-  if (typeof n == "string")
-    return {
-      selector: n,
-      config: {},
-      renderDefaultContainer: !1
-    };
-  const { selector: l, ...m } = n;
-  return {
-    selector: l || "#superdoc-toolbar",
-    config: m,
-    renderDefaultContainer: l === void 0
-  };
-}, re = 10, je = 250, Ge = 300, Ce = (n) => {
-  const l = window.innerWidth - je - re, m = window.innerHeight - Ge - re, s = Math.min(n.left, l), p = Math.min(n.top, m);
-  return new DOMRect(
-    Math.max(s, re),
-    Math.max(p, re),
-    n.width,
-    n.height
-  );
-}, Oe = We(
-  (n, l) => {
-    const {
-      document: m,
-      fields: s = {},
-      menu: p = {},
-      list: c = {},
-      toolbar: N,
-      cspNonce: H,
-      onReady: G,
-      onTrigger: f,
-      onFieldInsert: T,
-      onFieldUpdate: y,
-      onFieldDelete: I,
-      onFieldsChange: u,
-      onFieldSelect: L,
-      onFieldCreate: P,
-      onExport: z,
-      className: Q,
-      style: ie,
-      documentHeight: X = "600px"
-    } = n, [g, A] = E(s.initial || []), [R, O] = E(null), [_, a] = E(!1), [V, b] = E(), [Y, ee] = E(""), [we, ke] = E(() => s.available || []), se = q(null), w = q(null), M = q(null), fe = q(s);
-    fe.current = s;
-    const B = q(null), ge = q(_);
-    oe(() => {
-      ge.current = _;
-    }, [_]);
-    const te = p.trigger || "{{", le = fe.current.available || [], j = pe(() => Ve(N), [N]), me = S(
-      (e) => {
-        const t = e.trim().toLowerCase();
-        return t ? le.filter((i) => i.label.toLowerCase().includes(t)) : le;
-      },
-      [le]
-    ), de = S(
-      (e) => {
-        ee(e), ke(me(e));
-      },
-      [me]
-    ), W = S(() => {
-      de("");
-    }, [de]), K = S(
-      (e, t) => {
-        if (!w.current?.activeEditor) return !1;
-        const i = w.current.activeEditor, v = g, C = e === "inline" ? i.commands.insertStructuredContentInline?.({
-          attrs: {
-            alias: t.alias,
-            tag: t.metadata ? JSON.stringify(t.metadata) : void 0
-          },
-          text: t.defaultValue || t.alias
-        }) : i.commands.insertStructuredContentBlock?.({
-          attrs: {
-            alias: t.alias,
-            tag: t.metadata ? JSON.stringify(t.metadata) : void 0
-          },
-          text: t.defaultValue || t.alias
-        });
-        if (C) {
-          const x = J(i);
-          A(x), u?.(x);
-          const k = x.find(
-            (F) => !v.some((d) => d.id === F.id)
-          );
-          k && T?.(k);
-        }
-        return C ?? !1;
-      },
-      [T, u, g]
-    ), Z = S(
-      (e, t) => {
-        if (!w.current?.activeEditor) return !1;
-        const v = w.current.activeEditor.commands.updateStructuredContentById?.(e, {
-          attrs: t
-        });
-        return v && A((C) => {
-          const x = C.map((F) => F.id === e ? { ...F, ...t } : F);
-          u?.(x);
-          const k = x.find((F) => F.id === e);
-          return k && y?.(k), x;
-        }), v ?? !1;
-      },
-      [y, u]
-    ), ae = S(
-      (e) => {
-        const t = w.current?.activeEditor;
-        if (!t) {
-          let d = !1;
-          return A((h) => {
-            if (!h.some((D) => D.id === e)) return h;
-            const U = h.filter((D) => D.id !== e);
-            return d = !0, u?.(U), I?.(e), U;
-          }), d && O((h) => h === e ? null : h), d;
-        }
-        const v = g.find((d) => d.id === e)?.group;
-        let C = !1;
-        try {
-          C = t.commands.deleteStructuredContentById?.(e) ?? !1;
-        } catch (d) {
-          console.warn("[TemplateBuilder] Failed to delete structured content:", e, d), C = !1;
-        }
-        let x = J(t);
-        const k = x.some((d) => d.id === e);
-        if (!C && k && (x = x.filter((d) => d.id !== e)), v) {
-          const d = x.filter((h) => h.group === v);
-          if (d.length === 1) {
-            const h = d[0];
-            t.commands.updateStructuredContentById?.(h.id, {
-              attrs: { tag: void 0 }
-            }), x = J(t);
-          }
-        }
-        let F = !1;
-        return A((d) => {
-          if (Fe(d, x))
-            return d;
-          const h = d.some((D) => D.id === e), U = x.some((D) => D.id === e);
-          return h && !U && (F = !0), u?.(x), F && I?.(e), x;
-        }), F && O((d) => d === e ? null : d), C || F;
-      },
-      [I, u, g]
-    ), $ = S(
-      (e) => {
-        if (!w.current?.activeEditor) return;
-        w.current.activeEditor.commands.selectStructuredContentById?.(e), O(e);
-        const i = g.find((v) => v.id === e);
-        i && L?.(i);
-      },
-      [g, L]
-    ), ce = S(
-      (e) => {
-        if (!e) return;
-        const t = J(e);
-        A((i) => Fe(i, t) ? i : (u?.(t), t));
-      },
-      [u]
-    );
-    oe(() => {
-      if (!se.current) return;
-      let e = !1, t = null;
-      return (async () => {
-        const { SuperDoc: v } = await import("superdoc");
-        if (e) return;
-        const C = {
-          comments: !1,
-          ...j && {
-            toolbar: {
-              selector: j.selector,
-              toolbarGroups: j.config.toolbarGroups || ["center"],
-              excludeItems: j.config.excludeItems || [],
-              ...j.config
-            }
-          }
-        }, x = () => {
-          if (!e) {
-            if (t?.activeEditor) {
-              const k = t.activeEditor;
-              k.on("update", ({ editor: F }) => {
-                const { state: d } = F, { from: h } = d.selection;
-                if (h >= te.length) {
-                  const ue = h - te.length;
-                  if (d.doc.textBetween(ue, h) === te) {
-                    const he = F.view.coordsAtPos(h), be = Ce(new DOMRect(he.left, he.top, 0, 0)), ye = () => {
-                      const ne = w.current?.activeEditor;
-                      if (!ne) return;
-                      const ze = ne.state.selection.from, Be = ne.state.tr.delete(ue, ze);
-                      ne.view.dispatch(Be);
-                    };
-                    M.current = ye, B.current = h, b(be), a(!0), W(), f?.({
-                      position: { from: ue, to: h },
-                      bounds: be,
-                      cleanup: ye
-                    });
-                    return;
-                  }
-                }
-                if (!ge.current)
-                  return;
-                if (B.current == null) {
-                  a(!1), W();
-                  return;
-                }
-                if (h < B.current) {
-                  a(!1), B.current = null, W();
-                  return;
-                }
-                const U = d.doc.textBetween(B.current, h);
-                de(U);
-                const D = F.view.coordsAtPos(h), Ne = Ce(new DOMRect(D.left, D.top, 0, 0));
-                b(Ne);
-              }), k.on("update", () => {
-                ce(k);
-              }), ce(k);
-            }
-            G?.();
-          }
-        };
-        t = new v({
-          selector: se.current,
-          document: m?.source,
-          documentMode: m?.mode || "editing",
-          modules: C,
-          toolbar: j?.selector,
-          cspNonce: H,
-          onReady: x
-        }), w.current = t;
-      })(), () => {
-        e = !0, M.current = null, B.current = null, t && typeof t.destroy == "function" && t.destroy(), w.current = null;
-      };
-    }, [m?.source, m?.mode, te, ce, G, f, j, H]);
-    const Se = S(
-      async (e) => {
-        M.current && (M.current(), M.current = null), B.current = null, W();
-        const t = e.mode || "inline";
-        if (e.id.startsWith("custom_") && P) {
-          const i = await P(e);
-          if (i) {
-            const v = i.mode || t;
-            K(v, {
-              alias: i.label,
-              metadata: i.metadata,
-              defaultValue: i.defaultValue
-            }), a(!1);
-            return;
-          }
-        }
-        K(t, {
-          alias: e.label,
-          metadata: e.metadata,
-          defaultValue: e.defaultValue
-        }), a(!1);
-      },
-      [K, P, W]
-    ), Te = S(
-      (e) => {
-        M.current && (M.current(), M.current = null), B.current = null, W();
-        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 || Z(e.id, { tag: C }), a(!1);
-          const F = J(t);
-          A(F), u?.(F);
-        }
-      },
-      [Z, W, u]
-    ), Ee = S(() => {
-      a(!1), B.current = null, W(), M.current && (M.current(), M.current = null);
-    }, [W]), Ie = S(() => {
-      if (!w.current?.activeEditor || g.length === 0) return;
-      const e = g.findIndex((i) => i.id === R), t = e >= 0 ? (e + 1) % g.length : 0;
-      $(g[t].id);
-    }, [g, R, $]), Me = S(() => {
-      if (!w.current?.activeEditor || g.length === 0) return;
-      const e = g.findIndex((i) => i.id === R), t = e > 0 ? e - 1 : g.length - 1;
-      $(g[t].id);
-    }, [g, R, $]), Re = S(
-      async (e) => {
-        const { fileName: t = "document", triggerDownload: i = !0 } = e || {}, v = await w.current?.export({
-          exportType: ["docx"],
-          exportedName: t,
-          triggerDownload: i
-        }), C = w.current?.activeEditor;
-        if (C) {
-          const x = J(C);
-          z?.({ fields: x, blob: i ? void 0 : v, fileName: t });
-        }
-        return v;
-      },
-      [z]
-    );
-    He(l, () => ({
-      insertField: (e) => K("inline", e),
-      insertBlockField: (e) => K("block", e),
-      updateField: Z,
-      deleteField: ae,
-      selectField: $,
-      nextField: Ie,
-      previousField: Me,
-      getFields: () => g,
-      exportTemplate: Re,
-      getSuperDoc: () => w.current
-    }));
-    const De = p.component || Le, xe = c.component || Ae;
-    return /* @__PURE__ */ o("div", { className: `superdoc-template-builder ${Q || ""}`, style: ie, children: [
-      /* @__PURE__ */ o("div", { style: { display: "flex", gap: "20px" }, children: [
-        c.position === "left" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
-          xe,
-          {
-            fields: g,
-            onSelect: (e) => $(e.id),
-            onDelete: ae,
-            onUpdate: (e) => Z(e.id, e),
-            selectedFieldId: R || void 0
-          }
-        ) }),
-        /* @__PURE__ */ o("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
-          j?.renderDefaultContainer && /* @__PURE__ */ r(
-            "div",
-            {
-              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: X },
-              "data-testid": "template-builder-editor"
-            }
-          )
-        ] }),
-        c.position === "right" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
-          xe,
-          {
-            fields: g,
-            onSelect: (e) => $(e.id),
-            onDelete: ae,
-            onUpdate: (e) => Z(e.id, e),
-            selectedFieldId: R || void 0
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ r(
-        De,
-        {
-          isVisible: _,
-          position: V,
-          availableFields: s.available || [],
-          filteredFields: we,
-          filterQuery: Y,
-          allowCreate: s.allowCreate || !1,
-          onSelect: Se,
-          onClose: Ee,
-          onCreateField: P,
-          existingFields: g,
-          onSelectExisting: Te
-        }
-      )
-    ] });
-  }
-);
-Oe.displayName = "SuperDocTemplateBuilder";
-export {
-  Ae as FieldList,
-  Le as FieldMenu,
-  Oe as default
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFields: a, filterQuery: s, allowCreate: c, onSelect: l, onClose: u, onCreateField: d, existingFields: f = [], onSelectExisting: ne }) => {
+	let [p, m] = useState(!1), [h, g] = useState(""), [_, v] = useState("inline"), [y, b] = useState(!0), [x, S] = useState(!0);
+	useEffect(() => {
+		e || (m(!1), g(""), v("inline"));
+	}, [e]);
+	let C = useMemo(() => ({
+		position: "absolute",
+		left: t?.left,
+		top: t?.top,
+		zIndex: 1e3,
+		background: "white",
+		border: "1px solid #ddd",
+		borderRadius: "4px",
+		boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+		padding: "8px 0",
+		width: "280px"
+	}), [t]), w = a ?? r, T = !!s;
+	if (useEffect(() => {
+		T && S(!0);
+	}, [T]), !e) return null;
+	let E = async () => {
+		let e = h.trim();
+		if (!e) return;
+		let t = {
+			id: `custom_${Date.now()}`,
+			label: e,
+			mode: _
+		};
+		try {
+			l(d && await d(t) || t);
+		} finally {
+			m(!1), g(""), v("inline");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "superdoc-field-menu",
+		style: C,
+		children: [
+			T && /* @__PURE__ */ jsx("div", {
+				style: {
+					padding: "8px 16px",
+					borderBottom: "1px solid #f0f0f0",
+					marginBottom: "4px"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: "12px",
+						color: "#6b7280"
+					},
+					children: ["Filtering results for", /* @__PURE__ */ jsx("span", {
+						style: {
+							fontWeight: 600,
+							color: "#111827",
+							marginLeft: "4px"
+						},
+						children: s
+					})]
+				})
+			}),
+			c && !p && /* @__PURE__ */ jsx("div", {
+				className: "field-menu-item",
+				onClick: () => m(!0),
+				style: {
+					padding: "8px 16px",
+					cursor: "pointer",
+					color: "#0066cc",
+					fontWeight: 500
+				},
+				children: "+ Create New Field"
+			}),
+			c && p && /* @__PURE__ */ jsxs("div", {
+				style: { padding: "8px 16px" },
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: h,
+						placeholder: "Field name...",
+						onChange: (e) => g(e.target.value),
+						onKeyDown: (e) => {
+							e.key === "Enter" && E(), e.key === "Escape" && (m(!1), g(""), v("inline"));
+						},
+						autoFocus: !0,
+						style: {
+							width: "100%",
+							padding: "4px 8px",
+							border: "1px solid #ddd",
+							borderRadius: "3px"
+						}
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							marginTop: "8px",
+							display: "flex",
+							gap: "12px",
+							fontSize: "13px"
+						},
+						children: [/* @__PURE__ */ jsxs("label", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "4px",
+								cursor: "pointer"
+							},
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "radio",
+								value: "inline",
+								checked: _ === "inline",
+								onChange: () => v("inline")
+							}), "Inline"]
+						}), /* @__PURE__ */ jsxs("label", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "4px",
+								cursor: "pointer"
+							},
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "radio",
+								value: "block",
+								checked: _ === "block",
+								onChange: () => v("block")
+							}), "Block"]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							marginTop: "8px",
+							display: "flex",
+							gap: "8px"
+						},
+						children: [/* @__PURE__ */ jsx("button", {
+							onClick: E,
+							disabled: !h.trim(),
+							style: {
+								padding: "4px 12px",
+								background: h.trim() ? "#0066cc" : "#ccc",
+								color: "white",
+								border: "none",
+								borderRadius: "3px",
+								cursor: h.trim() ? "pointer" : "not-allowed"
+							},
+							children: "Create"
+						}), /* @__PURE__ */ jsx("button", {
+							onClick: () => {
+								m(!1), g(""), v("inline");
+							},
+							style: {
+								padding: "4px 12px",
+								background: "white",
+								border: "1px solid #ddd",
+								borderRadius: "3px",
+								cursor: "pointer"
+							},
+							children: "Cancel"
+						})]
+					})
+				]
+			}),
+			c && r.length > 0 && /* @__PURE__ */ jsx("div", { style: {
+				borderTop: "1px solid #eee",
+				margin: "4px 0"
+			} }),
+			f.length > 0 && (() => {
+				let e = /* @__PURE__ */ new Map();
+				f.forEach((t) => {
+					let n = t.group || `individual-${t.id}`, r = e.get(n) || [];
+					r.push(t), e.set(n, r);
+				});
+				let t = Array.from(e.values()).map((e) => ({
+					...e[0],
+					count: e.length
+				}));
+				return /* @__PURE__ */ jsxs("div", {
+					style: { borderBottom: "1px solid #f0f0f0" },
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => b(!y),
+						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__ */ jsxs("span", { children: [
+							"Existing Fields (",
+							t.length,
+							")"
+						] }), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": !0,
+							style: {
+								display: "inline-block",
+								width: "8px",
+								height: "8px",
+								borderRight: "2px solid #666",
+								borderBottom: "2px solid #666",
+								transform: y ? "rotate(45deg)" : "rotate(-45deg)",
+								transition: "transform 0.2s ease"
+							}
+						})]
+					}), y && /* @__PURE__ */ jsx("div", {
+						style: {
+							maxHeight: "300px",
+							overflowY: "auto"
+						},
+						children: t.map((e) => /* @__PURE__ */ jsxs("div", {
+							className: "field-menu-item",
+							onClick: () => ne?.(e),
+							style: {
+								padding: "8px 16px",
+								cursor: "pointer",
+								display: "flex",
+								alignItems: "flex-start",
+								justifyContent: "space-between",
+								gap: "8px"
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									flex: 1,
+									minWidth: 0
+								},
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										fontWeight: 500,
+										fontSize: "13px"
+									},
+									children: e.alias || e.id
+								}), /* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: "11px",
+										color: "#9ca3af",
+										marginTop: "2px"
+									},
+									children: e.group ? `group (${e.count} fields)` : `ID: ${e.id}`
+								})]
+							}), /* @__PURE__ */ jsx("span", {
+								style: {
+									fontSize: "11px",
+									color: "#6b7280",
+									padding: "2px 6px",
+									background: "#f3f4f6",
+									borderRadius: "3px",
+									textTransform: "capitalize",
+									flexShrink: 0
+								},
+								children: e.mode || "inline"
+							})]
+						}, e.group || e.id))
+					})]
+				});
+			})(),
+			w.length === 0 ? /* @__PURE__ */ jsx("div", {
+				style: {
+					padding: "16px",
+					fontSize: "13px",
+					color: "#6b7280",
+					textAlign: "center"
+				},
+				children: "No matching fields"
+			}) : /* @__PURE__ */ jsxs("div", {
+				style: { borderBottom: "1px solid #f0f0f0" },
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => S(!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__ */ jsxs("span", { children: [
+						"Available Fields (",
+						w.length,
+						")"
+					] }), /* @__PURE__ */ jsx("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__ */ jsx("div", {
+					style: {
+						maxHeight: "300px",
+						overflowY: "auto"
+					},
+					children: w.map((e) => /* @__PURE__ */ jsxs("div", {
+						className: "field-menu-item",
+						onClick: () => l(e),
+						style: {
+							padding: "8px 16px",
+							cursor: "pointer",
+							display: "flex",
+							alignItems: "flex-start",
+							justifyContent: "space-between",
+							gap: "8px"
+						},
+						children: [/* @__PURE__ */ jsxs("div", {
+							style: {
+								flex: 1,
+								minWidth: 0
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									fontWeight: 500,
+									fontSize: "13px"
+								},
+								children: e.label || e.id
+							}), /* @__PURE__ */ jsxs("div", {
+								style: {
+									fontSize: "11px",
+									color: "#9ca3af",
+									marginTop: "2px"
+								},
+								children: ["ID: ", e.id]
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: "11px",
+								color: "#6b7280",
+								padding: "2px 6px",
+								background: "#f3f4f6",
+								borderRadius: "3px",
+								textTransform: "capitalize",
+								flexShrink: 0
+							},
+							children: e.mode || "inline"
+						})]
+					}, e.id))
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					borderTop: "1px solid #eee",
+					marginTop: "4px"
+				},
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: u,
+					style: {
+						width: "100%",
+						padding: "6px 16px",
+						background: "#f3f4f6",
+						border: "none",
+						borderRadius: "0 0 4px 4px",
+						cursor: "pointer"
+					},
+					children: "Close"
+				})
+			})
+		]
+	});
 };
+var shortenGroupId = (e) => {
+	let t = e.split("-");
+	return t.length > 2 ? t[t.length - 1].substring(0, 6) : e.substring(0, 6);
+}, FieldItem = ({ field: e, onSelect: t, onDelete: n, isSelected: r, isGrouped: i = !1 }) => /* @__PURE__ */ jsxs("div", {
+	onClick: () => t(e),
+	style: {
+		position: "relative",
+		padding: "10px 12px",
+		background: r ? "#eff6ff" : "#f9fafb",
+		border: r ? "1px solid #3b82f6" : "1px solid #e5e7eb",
+		borderRadius: "6px",
+		cursor: "pointer",
+		transition: "all 0.2s",
+		fontSize: i ? "13px" : "14px"
+	},
+	onMouseEnter: (e) => {
+		r || (e.currentTarget.style.background = "#f3f4f6");
+	},
+	onMouseLeave: (e) => {
+		r || (e.currentTarget.style.background = "#f9fafb");
+	},
+	title: e.alias,
+	children: [/* @__PURE__ */ jsx("button", {
+		onClick: (t) => {
+			t.stopPropagation(), n(e.id);
+		},
+		style: {
+			position: "absolute",
+			top: "6px",
+			right: "6px",
+			padding: "4px",
+			background: "transparent",
+			border: "none",
+			cursor: "pointer",
+			color: "#9ca3af",
+			transition: "color 0.2s",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		onMouseEnter: (e) => {
+			e.currentTarget.style.color = "#ef4444";
+		},
+		onMouseLeave: (e) => {
+			e.currentTarget.style.color = "#9ca3af";
+		},
+		title: "Delete field",
+		children: /* @__PURE__ */ jsx("svg", {
+			width: "14",
+			height: "14",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ 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__ */ jsxs("div", {
+		style: { paddingRight: "24px" },
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				fontWeight: "500",
+				fontSize: i ? "12px" : "14px",
+				color: i ? "#6b7280" : "#111827"
+			},
+			children: e.alias || e.id
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "6px",
+				fontSize: "11px",
+				color: "#9ca3af",
+				marginTop: "2px"
+			},
+			children: [/* @__PURE__ */ jsxs("span", { children: ["ID: ", e.id] }), e.mode && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: "9px",
+					padding: "2px 5px",
+					borderRadius: "3px",
+					background: e.mode === "block" ? "#dbeafe" : "#f3f4f6",
+					color: e.mode === "block" ? "#1e40af" : "#4b5563",
+					fontWeight: "500"
+				},
+				children: e.mode
+			})]
+		})]
+	})]
+});
+const FieldList = ({ fields: e, onSelect: t, onDelete: n, selectedFieldId: r }) => {
+	let [a, s] = useState(/* @__PURE__ */ new Set()), { groupedFields: u, ungroupedFields: d } = useMemo(() => {
+		let t = {}, n = [];
+		return e.forEach((e) => {
+			e.group ? (t[e.group] || (t[e.group] = []), t[e.group].push(e)) : n.push(e);
+		}), {
+			groupedFields: t,
+			ungroupedFields: n
+		};
+	}, [e]), f = (e) => {
+		s((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "superdoc-field-list",
+		style: {
+			width: "250px",
+			background: "white",
+			border: "1px solid #e5e7eb",
+			borderRadius: "8px",
+			padding: "16px"
+		},
+		children: [/* @__PURE__ */ jsxs("h3", {
+			style: {
+				margin: "0 0 16px 0",
+				fontSize: "16px",
+				fontWeight: "600"
+			},
+			children: [
+				"Template Fields (",
+				e.length,
+				")"
+			]
+		}), e.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			style: {
+				color: "#9ca3af",
+				fontSize: "14px",
+				textAlign: "center",
+				padding: "20px 0"
+			},
+			children: [
+				"No fields yet. Type ",
+				"{{",
+				" to add a field."
+			]
+		}) : /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "8px"
+			},
+			children: [d.map((e) => /* @__PURE__ */ jsx(FieldItem, {
+				field: e,
+				onSelect: t,
+				onDelete: n,
+				isSelected: r === e.id
+			}, e.id)), Object.entries(u).map(([e, i]) => {
+				let o = a.has(e), s = i[0];
+				return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "relative",
+						padding: "12px",
+						background: "#f9fafb",
+						border: "1px solid #e5e7eb",
+						borderRadius: "6px",
+						cursor: "pointer",
+						transition: "all 0.2s"
+					},
+					onClick: () => f(e),
+					onMouseEnter: (e) => {
+						e.currentTarget.style.background = "#f3f4f6";
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.background = "#f9fafb";
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "8px"
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: "12px",
+								color: "#6b7280"
+							},
+							children: o ? "▼" : "▶"
+						}), /* @__PURE__ */ jsxs("div", {
+							style: { flex: 1 },
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									fontWeight: "500",
+									fontSize: "14px"
+								},
+								children: s.alias
+							}), /* @__PURE__ */ jsxs("div", {
+								style: {
+									fontSize: "11px",
+									color: "#9ca3af",
+									marginTop: "2px"
+								},
+								children: [
+									"group: ",
+									shortenGroupId(e),
+									" (",
+									i.length,
+									" fields)"
+								]
+							})]
+						})]
+					})
+				}), o && /* @__PURE__ */ jsx("div", {
+					style: {
+						marginLeft: "16px",
+						marginTop: "4px",
+						display: "flex",
+						flexDirection: "column",
+						gap: "4px"
+					},
+					children: i.map((e) => /* @__PURE__ */ jsx(FieldItem, {
+						field: e,
+						onSelect: t,
+						onDelete: n,
+						isSelected: r === e.id,
+						isGrouped: !0
+					}, e.id))
+				})] }, e);
+			})]
+		})]
+	});
+};
+var getTemplateFieldsFromEditor = (e) => {
+	let t = e.helpers?.structuredContentCommands;
+	return t?.getStructuredContentTags ? (t.getStructuredContentTags(e.state) || []).map((e) => {
+		let n = e?.node ?? e, r = n?.attrs ?? {}, i = (n?.type?.name || "").includes("Block") ? "block" : "inline";
+		return {
+			id: r.id,
+			alias: r.alias || r.label || "",
+			tag: r.tag,
+			mode: i,
+			group: t.getGroup?.(r.tag) ?? void 0
+		};
+	}) : [];
+}, areTemplateFieldsEqual = (e, t) => {
+	if (e === t) return !0;
+	if (e.length !== t.length) return !1;
+	for (let n = 0; n < e.length; n += 1) {
+		let r = e[n], i = t[n];
+		if (!i || r.id !== i.id || r.alias !== i.alias || r.tag !== i.tag || r.position !== i.position || r.mode !== i.mode || r.group !== i.group) return !1;
+	}
+	return !0;
+}, resolveToolbar = (e) => {
+	if (!e) return null;
+	if (e === !0) return {
+		selector: "#superdoc-toolbar",
+		config: {},
+		renderDefaultContainer: !0
+	};
+	if (typeof e == "string") return {
+		selector: e,
+		config: {},
+		renderDefaultContainer: !1
+	};
+	let { selector: t, ...n } = e;
+	return {
+		selector: t || "#superdoc-toolbar",
+		config: n,
+		renderDefaultContainer: t === void 0
+	};
+}, MENU_VIEWPORT_PADDING = 10, MENU_APPROX_WIDTH = 250, MENU_APPROX_HEIGHT = 300, clampToViewport = (e) => {
+	let t = window.innerWidth - MENU_APPROX_WIDTH - MENU_VIEWPORT_PADDING, n = window.innerHeight - MENU_APPROX_HEIGHT - MENU_VIEWPORT_PADDING, r = Math.min(e.left, t), i = Math.min(e.top, n);
+	return new DOMRect(Math.max(r, MENU_VIEWPORT_PADDING), Math.max(i, MENU_VIEWPORT_PADDING), e.width, e.height);
+}, SuperDocTemplateBuilder = forwardRef((e, c) => {
+	let { document: l, fields: p = {}, menu: m = {}, list: h = {}, toolbar: _, cspNonce: v, telemetry: y, licenseKey: b, onReady: x, onTrigger: S, onFieldInsert: C, onFieldUpdate: w, onFieldDelete: T, onFieldsChange: E, onFieldSelect: re, onFieldCreate: D, onExport: O, className: ie, style: ae, documentHeight: oe = "600px" } = e, [k, A] = useState(p.initial || []), [j, M] = useState(null), [N, P] = useState(!1), [se, F] = useState(), [ce, le] = useState(""), [ue, de] = useState(() => p.available || []), I = useRef(null), L = useRef(null), R = useRef(null), z = useRef(p);
+	z.current = p;
+	let B = useRef(null), V = useRef(N);
+	useEffect(() => {
+		V.current = N;
+	}, [N]);
+	let H = m.trigger || "{{", U = z.current.available || [], W = useMemo(() => resolveToolbar(_), [_]), G = useMemo(() => ({
+		enabled: y?.enabled ?? !0,
+		metadata: {
+			source: "template-builder",
+			...y?.metadata
+		}
+	}), [y?.enabled, JSON.stringify(y?.metadata)]), K = useCallback((e) => {
+		let t = e.trim().toLowerCase();
+		return t ? U.filter((e) => e.label.toLowerCase().includes(t)) : U;
+	}, [U]), q = useCallback((e) => {
+		le(e), de(K(e));
+	}, [K]), J = useCallback(() => {
+		q("");
+	}, [q]), Y = useCallback((e, t) => {
+		if (!L.current?.activeEditor) return !1;
+		let n = L.current.activeEditor, r = k, i = e === "inline" ? n.commands.insertStructuredContentInline?.({
+			attrs: {
+				alias: t.alias,
+				tag: t.metadata ? JSON.stringify(t.metadata) : void 0
+			},
+			text: t.defaultValue || t.alias
+		}) : n.commands.insertStructuredContentBlock?.({
+			attrs: {
+				alias: t.alias,
+				tag: t.metadata ? JSON.stringify(t.metadata) : void 0
+			},
+			text: t.defaultValue || t.alias
+		});
+		if (i) {
+			let e = getTemplateFieldsFromEditor(n);
+			A(e), E?.(e);
+			let t = e.find((e) => !r.some((t) => t.id === e.id));
+			t && C?.(t);
+		}
+		return i ?? !1;
+	}, [
+		C,
+		E,
+		k
+	]), X = useCallback((e, t) => {
+		if (!L.current?.activeEditor) return !1;
+		let n = L.current.activeEditor.commands.updateStructuredContentById?.(e, { attrs: t });
+		return n && A((n) => {
+			let r = n.map((n) => n.id === e ? {
+				...n,
+				...t
+			} : n);
+			E?.(r);
+			let i = r.find((t) => t.id === e);
+			return i && w?.(i), r;
+		}), n ?? !1;
+	}, [w, E]), Z = useCallback((e) => {
+		let t = L.current?.activeEditor;
+		if (!t) {
+			let t = !1;
+			return A((n) => {
+				if (!n.some((t) => t.id === e)) return n;
+				let r = n.filter((t) => t.id !== e);
+				return t = !0, E?.(r), T?.(e), r;
+			}), t && M((t) => t === e ? null : t), t;
+		}
+		let n = k.find((t) => t.id === e)?.group, r = !1;
+		try {
+			r = t.commands.deleteStructuredContentById?.(e) ?? !1;
+		} catch (t) {
+			console.warn("[TemplateBuilder] Failed to delete structured content:", e, t), r = !1;
+		}
+		let i = getTemplateFieldsFromEditor(t), a = i.some((t) => t.id === e);
+		if (!r && a && (i = i.filter((t) => t.id !== e)), n) {
+			let e = i.filter((e) => e.group === n);
+			if (e.length === 1) {
+				let n = e[0];
+				t.commands.updateStructuredContentById?.(n.id, { attrs: { tag: void 0 } }), i = getTemplateFieldsFromEditor(t);
+			}
+		}
+		let o = !1;
+		return A((t) => {
+			if (areTemplateFieldsEqual(t, i)) return t;
+			let n = t.some((t) => t.id === e), r = i.some((t) => t.id === e);
+			return n && !r && (o = !0), E?.(i), o && T?.(e), i;
+		}), o && M((t) => t === e ? null : t), r || o;
+	}, [
+		T,
+		E,
+		k
+	]), Q = useCallback((e) => {
+		if (!L.current?.activeEditor) return;
+		L.current.activeEditor.commands.selectStructuredContentById?.(e), M(e);
+		let t = k.find((t) => t.id === e);
+		t && re?.(t);
+	}, [k, re]), $ = useCallback((e) => {
+		if (!e) return;
+		let t = getTemplateFieldsFromEditor(e);
+		A((e) => areTemplateFieldsEqual(e, t) ? e : (E?.(t), t));
+	}, [E]);
+	useEffect(() => {
+		if (!I.current) return;
+		let e = !1, t = null;
+		return (async () => {
+			let { SuperDoc: n } = await import("superdoc");
+			if (e) return;
+			let r = {
+				comments: !1,
+				...W && { toolbar: {
+					selector: W.selector,
+					toolbarGroups: W.config.toolbarGroups || ["center"],
+					excludeItems: W.config.excludeItems || [],
+					...W.config
+				} }
+			}, i = () => {
+				if (!e) {
+					if (t?.activeEditor) {
+						let e = t.activeEditor;
+						e.on("update", ({ editor: e }) => {
+							let { state: t } = e, { from: n } = t.selection;
+							if (n >= H.length) {
+								let r = n - H.length;
+								if (t.doc.textBetween(r, n) === H) {
+									let t = e.view.coordsAtPos(n), i = clampToViewport(new DOMRect(t.left, t.top, 0, 0)), a = () => {
+										let e = L.current?.activeEditor;
+										if (!e) return;
+										let t = e.state.selection.from, n = e.state.tr.delete(r, t);
+										e.view.dispatch(n);
+									};
+									R.current = a, B.current = n, F(i), P(!0), J(), S?.({
+										position: {
+											from: r,
+											to: n
+										},
+										bounds: i,
+										cleanup: a
+									});
+									return;
+								}
+							}
+							if (!V.current) return;
+							if (B.current == null) {
+								P(!1), J();
+								return;
+							}
+							if (n < B.current) {
+								P(!1), B.current = null, J();
+								return;
+							}
+							q(t.doc.textBetween(B.current, n));
+							let r = e.view.coordsAtPos(n);
+							F(clampToViewport(new DOMRect(r.left, r.top, 0, 0)));
+						}), e.on("update", () => {
+							$(e);
+						}), $(e);
+					}
+					x?.();
+				}
+			};
+			t = new n({
+				selector: I.current,
+				document: l?.source,
+				documentMode: l?.mode || "editing",
+				modules: r,
+				toolbar: W?.selector,
+				cspNonce: v,
+				telemetry: G,
+				...b && { licenseKey: b },
+				onReady: i
+			}), L.current = t;
+		})(), () => {
+			e = !0, R.current = null, B.current = null, t && typeof t.destroy == "function" && t.destroy(), L.current = null;
+		};
+	}, [
+		l?.source,
+		l?.mode,
+		H,
+		$,
+		x,
+		S,
+		W,
+		v,
+		G,
+		b
+	]);
+	let fe = useCallback(async (e) => {
+		R.current &&= (R.current(), null), B.current = null, J();
+		let t = e.mode || "inline";
+		if (e.id.startsWith("custom_") && D) {
+			let n = await D(e);
+			if (n) {
+				Y(n.mode || t, {
+					alias: n.label,
+					metadata: n.metadata,
+					defaultValue: n.defaultValue
+				}), P(!1);
+				return;
+			}
+		}
+		Y(t, {
+			alias: e.label,
+			metadata: e.metadata,
+			defaultValue: e.defaultValue
+		}), P(!1);
+	}, [
+		Y,
+		D,
+		J
+	]), pe = useCallback((e) => {
+		R.current &&= (R.current(), null), B.current = null, J();
+		let t = L.current?.activeEditor;
+		if (!t) return;
+		let n = t.helpers?.structuredContentCommands;
+		if (!n) return;
+		let r = e.group || `group-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`, i = n.createTagObject?.({ group: r });
+		if ((e.mode || "inline") === "inline" ? t.commands.insertStructuredContentInline?.({
+			attrs: {
+				alias: e.alias,
+				tag: i
+			},
+			text: e.alias
+		}) : t.commands.insertStructuredContentBlock?.({
+			attrs: {
+				alias: e.alias,
+				tag: i
+			},
+			text: e.alias
+		})) {
+			e.group || X(e.id, { tag: i }), P(!1);
+			let n = getTemplateFieldsFromEditor(t);
+			A(n), E?.(n);
+		}
+	}, [
+		X,
+		J,
+		E
+	]), me = useCallback(() => {
+		P(!1), B.current = null, J(), R.current &&= (R.current(), null);
+	}, [J]), he = useCallback(() => {
+		if (!L.current?.activeEditor || k.length === 0) return;
+		let e = k.findIndex((e) => e.id === j);
+		Q(k[e >= 0 ? (e + 1) % k.length : 0].id);
+	}, [
+		k,
+		j,
+		Q
+	]), ge = useCallback(() => {
+		if (!L.current?.activeEditor || k.length === 0) return;
+		let e = k.findIndex((e) => e.id === j);
+		Q(k[e > 0 ? e - 1 : k.length - 1].id);
+	}, [
+		k,
+		j,
+		Q
+	]), _e = useCallback(async (e) => {
+		let { fileName: t = "document", triggerDownload: n = !0 } = e || {}, r = await L.current?.export({
+			exportType: ["docx"],
+			exportedName: t,
+			triggerDownload: n
+		}), i = L.current?.activeEditor;
+		if (i) {
+			let e = getTemplateFieldsFromEditor(i);
+			O?.({
+				fields: e,
+				blob: n ? void 0 : r,
+				fileName: t
+			});
+		}
+		return r;
+	}, [O]);
+	useImperativeHandle(c, () => ({
+		insertField: (e) => Y("inline", e),
+		insertBlockField: (e) => Y("block", e),
+		updateField: X,
+		deleteField: Z,
+		selectField: Q,
+		nextField: he,
+		previousField: ge,
+		getFields: () => k,
+		exportTemplate: _e,
+		getSuperDoc: () => L.current
+	}));
+	let ve = m.component || FieldMenu, ye = h.component || FieldList;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `superdoc-template-builder ${ie || ""}`,
+		style: ae,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				gap: "20px"
+			},
+			children: [
+				h.position === "left" && /* @__PURE__ */ jsx("div", {
+					className: "superdoc-template-builder-sidebar",
+					children: /* @__PURE__ */ jsx(ye, {
+						fields: k,
+						onSelect: (e) => Q(e.id),
+						onDelete: Z,
+						onUpdate: (e) => X(e.id, e),
+						selectedFieldId: j || void 0
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "superdoc-template-builder-document",
+					style: { flex: 1 },
+					children: [W?.renderDefaultContainer && /* @__PURE__ */ jsx("div", {
+						id: "superdoc-toolbar",
+						className: "superdoc-template-builder-toolbar",
+						"data-testid": "template-builder-toolbar"
+					}), /* @__PURE__ */ jsx("div", {
+						ref: I,
+						className: "superdoc-template-builder-editor",
+						style: { height: oe },
+						"data-testid": "template-builder-editor"
+					})]
+				}),
+				h.position === "right" && /* @__PURE__ */ jsx("div", {
+					className: "superdoc-template-builder-sidebar",
+					children: /* @__PURE__ */ jsx(ye, {
+						fields: k,
+						onSelect: (e) => Q(e.id),
+						onDelete: Z,
+						onUpdate: (e) => X(e.id, e),
+						selectedFieldId: j || void 0
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(ve, {
+			isVisible: N,
+			position: se,
+			availableFields: p.available || [],
+			filteredFields: ue,
+			filterQuery: ce,
+			allowCreate: p.allowCreate || !1,
+			onSelect: fe,
+			onClose: me,
+			onCreateField: D,
+			existingFields: k,
+			onSelectExisting: pe
+		})]
+	});
+});
+SuperDocTemplateBuilder.displayName = "SuperDocTemplateBuilder";
+var src_default = SuperDocTemplateBuilder;
+export { FieldList, FieldMenu, src_default as default };