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

package/dist/index.mjs

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