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

package/dist/index.mjs

@@ -1,12 +1,111 @@
 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);
+const 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 || r.fieldType !== i.fieldType) 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
+	};
+}, getPresentationEditor = (e) => {
+	let t = e?.superdocStore?.documents;
+	return !Array.isArray(t) || t.length === 0 ? null : t[0].getPresentationEditor?.() ?? null;
+};
+var FIELD_TYPE_STYLES = { signer: {
+	background: "#fef3c7",
+	color: "#b45309"
+} }, DEFAULT_FIELD_TYPE_STYLE = {
+	background: "#f3f4f6",
+	color: "#6b7280"
+};
+const getFieldTypeStyle = (e) => FIELD_TYPE_STYLES[e] ?? DEFAULT_FIELD_TYPE_STYLE, clampToViewport = (e) => {
+	let t = window.innerWidth - 250 - 10, n = window.innerHeight - 300 - 10, r = Math.min(e.left, t), i = Math.min(e.top, n);
+	return new DOMRect(Math.max(r, 10), Math.max(i, 10), e.width, e.height);
+}, InfoTooltip = ({ text: e }) => {
+	let [t, n] = useState(!1);
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			position: "relative",
+			display: "inline-flex"
+		},
+		onMouseEnter: () => n(!0),
+		onMouseLeave: () => n(!1),
+		onClick: (e) => e.stopPropagation(),
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: "14",
+			height: "14",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			style: {
+				cursor: "help",
+				flexShrink: 0
+			},
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "7",
+				stroke: "#9ca3af",
+				strokeWidth: "1.5"
+			}), /* @__PURE__ */ jsx("text", {
+				x: "8",
+				y: "11.5",
+				textAnchor: "middle",
+				fontSize: "10",
+				fontWeight: "600",
+				fontFamily: "system-ui, sans-serif",
+				fill: "#6b7280",
+				children: "?"
+			})]
+		}), t && /* @__PURE__ */ jsx("span", {
+			style: {
+				position: "absolute",
+				bottom: "100%",
+				left: "50%",
+				transform: "translateX(-50%)",
+				marginBottom: "6px",
+				padding: "6px 10px",
+				background: "#1f2937",
+				color: "#fff",
+				fontSize: "11px",
+				lineHeight: "1.4",
+				borderRadius: "4px",
+				whiteSpace: "normal",
+				width: "200px",
+				textAlign: "center",
+				zIndex: 1001,
+				pointerEvents: "none",
+				fontWeight: 400
+			},
+			children: e
+		})]
+	});
+}, FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFields: a, filterQuery: s, allowCreate: c, onSelect: l, onClose: u, onCreateField: d, existingFields: p = [], onSelectExisting: ne }) => {
+	let [h, g] = useState(!1), [_, v] = useState(""), [y, b] = useState("inline"), [x, S] = useState("owner"), [C, w] = useState(!0), [T, E] = useState(!0);
 	useEffect(() => {
-		e || (m(!1), g(""), v("inline"));
+		e || (g(!1), v(""), b("inline"), S("owner"));
 	}, [e]);
-	let C = useMemo(() => ({
-		position: "absolute",
+	let D = useMemo(() => ({
+		position: "fixed",
 		left: t?.left,
 		top: t?.top,
 		zIndex: 1e3,
@@ -15,30 +114,33 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 		borderRadius: "4px",
 		boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
 		padding: "8px 0",
-		width: "280px"
-	}), [t]), w = a ?? r, T = !!s;
+		width: "280px",
+		maxHeight: `calc(100vh - ${(t?.top ?? 0) + 10}px)`,
+		overflowY: "auto"
+	}), [t]), O = a ?? r, k = !!s;
 	if (useEffect(() => {
-		T && S(!0);
-	}, [T]), !e) return null;
-	let E = async () => {
-		let e = h.trim();
+		k && E(!0);
+	}, [k]), !e) return null;
+	let A = async () => {
+		let e = _.trim();
 		if (!e) return;
 		let t = {
 			id: `custom_${Date.now()}`,
 			label: e,
-			mode: _
+			mode: y,
+			fieldType: x
 		};
 		try {
 			l(d && await d(t) || t);
 		} finally {
-			m(!1), g(""), v("inline");
+			g(!1), v(""), b("inline"), S("owner");
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "superdoc-field-menu",
-		style: C,
+		style: D,
 		children: [
-			T && /* @__PURE__ */ jsx("div", {
+			k && /* @__PURE__ */ jsx("div", {
 				style: {
 					padding: "8px 16px",
 					borderBottom: "1px solid #f0f0f0",
@@ -59,9 +161,9 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 					})]
 				})
 			}),
-			c && !p && /* @__PURE__ */ jsx("div", {
+			c && !h && /* @__PURE__ */ jsx("div", {
 				className: "field-menu-item",
-				onClick: () => m(!0),
+				onClick: () => g(!0),
 				style: {
 					padding: "8px 16px",
 					cursor: "pointer",
@@ -70,16 +172,16 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 				},
 				children: "+ Create New Field"
 			}),
-			c && p && /* @__PURE__ */ jsxs("div", {
+			c && h && /* @__PURE__ */ jsxs("div", {
 				style: { padding: "8px 16px" },
 				children: [
 					/* @__PURE__ */ jsx("input", {
 						type: "text",
-						value: h,
+						value: _,
 						placeholder: "Field name...",
-						onChange: (e) => g(e.target.value),
+						onChange: (e) => v(e.target.value),
 						onKeyDown: (e) => {
-							e.key === "Enter" && E(), e.key === "Escape" && (m(!1), g(""), v("inline"));
+							e.key === "Enter" && A(), e.key === "Escape" && (g(!1), v(""), b("inline"));
 						},
 						autoFocus: !0,
 						style: {
@@ -105,9 +207,10 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 							},
 							children: [/* @__PURE__ */ jsx("input", {
 								type: "radio",
+								name: "fieldMode",
 								value: "inline",
-								checked: _ === "inline",
-								onChange: () => v("inline")
+								checked: y === "inline",
+								onChange: () => b("inline")
 							}), "Inline"]
 						}), /* @__PURE__ */ jsxs("label", {
 							style: {
@@ -118,12 +221,50 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 							},
 							children: [/* @__PURE__ */ jsx("input", {
 								type: "radio",
+								name: "fieldMode",
 								value: "block",
-								checked: _ === "block",
-								onChange: () => v("block")
+								checked: y === "block",
+								onChange: () => b("block")
 							}), "Block"]
 						})]
 					}),
+					/* @__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",
+								name: "fieldType",
+								value: "owner",
+								checked: x === "owner",
+								onChange: () => S("owner")
+							}), "Owner"]
+						}), /* @__PURE__ */ jsxs("label", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "4px",
+								cursor: "pointer"
+							},
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "radio",
+								name: "fieldType",
+								value: "signer",
+								checked: x === "signer",
+								onChange: () => S("signer")
+							}), "Signer"]
+						})]
+					}),
 					/* @__PURE__ */ jsxs("div", {
 						style: {
 							marginTop: "8px",
@@ -131,20 +272,20 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 							gap: "8px"
 						},
 						children: [/* @__PURE__ */ jsx("button", {
-							onClick: E,
-							disabled: !h.trim(),
+							onClick: A,
+							disabled: !_.trim(),
 							style: {
 								padding: "4px 12px",
-								background: h.trim() ? "#0066cc" : "#ccc",
+								background: _.trim() ? "#0066cc" : "#ccc",
 								color: "white",
 								border: "none",
 								borderRadius: "3px",
-								cursor: h.trim() ? "pointer" : "not-allowed"
+								cursor: _.trim() ? "pointer" : "not-allowed"
 							},
 							children: "Create"
 						}), /* @__PURE__ */ jsx("button", {
 							onClick: () => {
-								m(!1), g(""), v("inline");
+								g(!1), v(""), b("inline"), S("owner");
 							},
 							style: {
 								padding: "4px 12px",
@@ -162,9 +303,9 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 				borderTop: "1px solid #eee",
 				margin: "4px 0"
 			} }),
-			f.length > 0 && (() => {
+			p.length > 0 && (() => {
 				let e = /* @__PURE__ */ new Map();
-				f.forEach((t) => {
+				p.forEach((t) => {
 					let n = t.group || `individual-${t.id}`, r = e.get(n) || [];
 					r.push(t), e.set(n, r);
 				});
@@ -176,7 +317,7 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 					style: { borderBottom: "1px solid #f0f0f0" },
 					children: [/* @__PURE__ */ jsxs("button", {
 						type: "button",
-						onClick: () => b(!y),
+						onClick: () => w(!C),
 						style: {
 							width: "100%",
 							display: "flex",
@@ -191,11 +332,19 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 							color: "#374151",
 							textAlign: "left"
 						},
-						children: [/* @__PURE__ */ jsxs("span", { children: [
-							"Existing Fields (",
-							t.length,
-							")"
-						] }), /* @__PURE__ */ jsx("span", {
+						children: [/* @__PURE__ */ jsxs("span", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "4px"
+							},
+							children: [
+								"Existing Fields (",
+								t.length,
+								")",
+								/* @__PURE__ */ jsx(InfoTooltip, { text: "Insert a linked copy of a field already in the document. Linked fields share the same group and stay in sync." })
+							]
+						}), /* @__PURE__ */ jsx("span", {
 							"aria-hidden": !0,
 							style: {
 								display: "inline-block",
@@ -203,45 +352,56 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 								height: "8px",
 								borderRight: "2px solid #666",
 								borderBottom: "2px solid #666",
-								transform: y ? "rotate(45deg)" : "rotate(-45deg)",
+								transform: C ? "rotate(45deg)" : "rotate(-45deg)",
 								transition: "transform 0.2s ease"
 							}
 						})]
-					}), y && /* @__PURE__ */ jsx("div", {
+					}), C && /* @__PURE__ */ jsx("div", { children: t.map((e) => /* @__PURE__ */ jsxs("div", {
+						className: "field-menu-item",
+						onClick: () => ne?.(e),
 						style: {
-							maxHeight: "300px",
-							overflowY: "auto"
+							padding: "8px 16px",
+							cursor: "pointer",
+							display: "flex",
+							alignItems: "flex-start",
+							justifyContent: "space-between",
+							gap: "8px"
 						},
-						children: t.map((e) => /* @__PURE__ */ jsxs("div", {
-							className: "field-menu-item",
-							onClick: () => ne?.(e),
+						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__ */ jsxs("div", {
 							style: {
-								padding: "8px 16px",
-								cursor: "pointer",
 								display: "flex",
-								alignItems: "flex-start",
-								justifyContent: "space-between",
-								gap: "8px"
+								gap: "4px",
+								flexShrink: 0
 							},
-							children: [/* @__PURE__ */ jsxs("div", {
+							children: [e.fieldType && /* @__PURE__ */ jsx("span", {
 								style: {
-									flex: 1,
-									minWidth: 0
+									fontSize: "11px",
+									padding: "2px 6px",
+									borderRadius: "3px",
+									textTransform: "capitalize",
+									...getFieldTypeStyle(e.fieldType),
+									fontWeight: 500
 								},
-								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}`
-								})]
+								children: e.fieldType
 							}), /* @__PURE__ */ jsx("span", {
 								style: {
 									fontSize: "11px",
@@ -249,16 +409,15 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 									padding: "2px 6px",
 									background: "#f3f4f6",
 									borderRadius: "3px",
-									textTransform: "capitalize",
-									flexShrink: 0
+									textTransform: "capitalize"
 								},
 								children: e.mode || "inline"
 							})]
-						}, e.group || e.id))
-					})]
+						})]
+					}, e.group || e.id)) })]
 				});
 			})(),
-			w.length === 0 ? /* @__PURE__ */ jsx("div", {
+			O.length === 0 ? /* @__PURE__ */ jsx("div", {
 				style: {
 					padding: "16px",
 					fontSize: "13px",
@@ -270,7 +429,7 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 				style: { borderBottom: "1px solid #f0f0f0" },
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
-					onClick: () => S(!x),
+					onClick: () => E(!T),
 					style: {
 						width: "100%",
 						display: "flex",
@@ -285,11 +444,19 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 						color: "#374151",
 						textAlign: "left"
 					},
-					children: [/* @__PURE__ */ jsxs("span", { children: [
-						"Available Fields (",
-						w.length,
-						")"
-					] }), /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsxs("span", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "4px"
+						},
+						children: [
+							"Available Fields (",
+							O.length,
+							")",
+							/* @__PURE__ */ jsx(InfoTooltip, { text: "Insert a new, independent field instance into the document." })
+						]
+					}), /* @__PURE__ */ jsx("span", {
 						"aria-hidden": !0,
 						style: {
 							display: "inline-block",
@@ -297,45 +464,56 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 							height: "8px",
 							borderRight: "2px solid #666",
 							borderBottom: "2px solid #666",
-							transform: x ? "rotate(45deg)" : "rotate(-45deg)",
+							transform: T ? "rotate(45deg)" : "rotate(-45deg)",
 							transition: "transform 0.2s ease"
 						}
 					})]
-				}), x && /* @__PURE__ */ jsx("div", {
+				}), T && /* @__PURE__ */ jsx("div", { children: O.map((e) => /* @__PURE__ */ jsxs("div", {
+					className: "field-menu-item",
+					onClick: () => l(e),
 					style: {
-						maxHeight: "300px",
-						overflowY: "auto"
+						padding: "8px 16px",
+						cursor: "pointer",
+						display: "flex",
+						alignItems: "flex-start",
+						justifyContent: "space-between",
+						gap: "8px"
 					},
-					children: w.map((e) => /* @__PURE__ */ jsxs("div", {
-						className: "field-menu-item",
-						onClick: () => l(e),
+					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__ */ jsxs("div", {
 						style: {
-							padding: "8px 16px",
-							cursor: "pointer",
 							display: "flex",
-							alignItems: "flex-start",
-							justifyContent: "space-between",
-							gap: "8px"
+							gap: "4px",
+							flexShrink: 0
 						},
-						children: [/* @__PURE__ */ jsxs("div", {
+						children: [e.fieldType && /* @__PURE__ */ jsx("span", {
 							style: {
-								flex: 1,
-								minWidth: 0
+								fontSize: "11px",
+								padding: "2px 6px",
+								borderRadius: "3px",
+								textTransform: "capitalize",
+								...getFieldTypeStyle(e.fieldType),
+								fontWeight: 500
 							},
-							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]
-							})]
+							children: e.fieldType
 						}), /* @__PURE__ */ jsx("span", {
 							style: {
 								fontSize: "11px",
@@ -343,13 +521,12 @@ const FieldMenu = ({ isVisible: e, position: t, availableFields: r, filteredFiel
 								padding: "2px 6px",
 								background: "#f3f4f6",
 								borderRadius: "3px",
-								textTransform: "capitalize",
-								flexShrink: 0
+								textTransform: "capitalize"
 							},
 							children: e.mode || "inline"
 						})]
-					}, e.id))
-				})]
+					})]
+				}, e.id)) })]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				style: {
@@ -451,22 +628,35 @@ var shortenGroupId = (e) => {
 				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
-			})]
+			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
+				}),
+				e.fieldType && /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: "9px",
+						padding: "2px 5px",
+						borderRadius: "3px",
+						...getFieldTypeStyle(e.fieldType),
+						fontWeight: "500"
+					},
+					children: e.fieldType
+				})
+			]
 		})]
 	})]
 });
 const FieldList = ({ fields: e, onSelect: t, onDelete: n, selectedFieldId: r }) => {
-	let [a, s] = useState(/* @__PURE__ */ new Set()), { groupedFields: u, ungroupedFields: d } = useMemo(() => {
+	let [a, s] = useState(/* @__PURE__ */ new Set()), { groupedFields: c, ungroupedFields: l } = useMemo(() => {
 		let t = {}, n = [];
 		return e.forEach((e) => {
 			e.group ? (t[e.group] || (t[e.group] = []), t[e.group].push(e)) : n.push(e);
@@ -474,7 +664,7 @@ const FieldList = ({ fields: e, onSelect: t, onDelete: n, selectedFieldId: r })
 			groupedFields: t,
 			ungroupedFields: n
 		};
-	}, [e]), f = (e) => {
+	}, [e]), u = (e) => {
 		s((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
@@ -518,12 +708,12 @@ const FieldList = ({ fields: e, onSelect: t, onDelete: n, selectedFieldId: r })
 				flexDirection: "column",
 				gap: "8px"
 			},
-			children: [d.map((e) => /* @__PURE__ */ jsx(FieldItem, {
+			children: [l.map((e) => /* @__PURE__ */ jsx(FieldItem, {
 				field: e,
 				onSelect: t,
 				onDelete: n,
 				isSelected: r === e.id
-			}, e.id)), Object.entries(u).map(([e, i]) => {
+			}, e.id)), Object.entries(c).map(([e, i]) => {
 				let o = a.has(e), s = i[0];
 				return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 					style: {
@@ -535,7 +725,7 @@ const FieldList = ({ fields: e, onSelect: t, onDelete: n, selectedFieldId: r })
 						cursor: "pointer",
 						transition: "all 0.2s"
 					},
-					onClick: () => f(e),
+					onClick: () => u(e),
 					onMouseEnter: (e) => {
 						e.currentTarget.style.background = "#f3f4f6";
 					},
@@ -601,113 +791,94 @@ const FieldList = ({ fields: e, onSelect: t, onDelete: n, selectedFieldId: r })
 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";
+		let n = e?.node ?? e, r = n?.attrs ?? {}, i = (n?.type?.name || "").includes("Block") ? "block" : "inline", a = (() => {
+			try {
+				return typeof r.tag == "string" && r.tag.startsWith("{") ? JSON.parse(r.tag) : null;
+			} catch {
+				return null;
+			}
+		})();
 		return {
 			id: r.id,
 			alias: r.alias || r.label || "",
 			tag: r.tag,
 			mode: i,
-			group: t.getGroup?.(r.tag) ?? void 0
+			group: t.getGroup?.(r.tag) ?? void 0,
+			fieldType: a?.fieldType ?? "owner"
 		};
 	}) : [];
-}, 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);
+}, SuperDocTemplateBuilder = forwardRef((e, u) => {
+	let { document: d, fields: f = {}, menu: m = {}, list: h = {}, toolbar: g, cspNonce: y, telemetry: b, licenseKey: x, onReady: S, onTrigger: C, onFieldInsert: w, onFieldUpdate: T, onFieldDelete: E, onFieldsChange: D, onFieldSelect: O, onFieldCreate: k, onExport: A, className: re, style: ie, documentHeight: ae = "600px" } = e, [j, M] = useState(f.initial || []), [N, P] = useState(null), [F, I] = useState(!1), [oe, L] = useState(), [se, ce] = useState(""), [le, ue] = useState(() => f.available || []), R = useRef(null), z = useRef(null), B = useRef(null), de = useRef(f);
+	de.current = f;
+	let V = useRef(null), H = useRef(F);
 	useEffect(() => {
-		V.current = N;
-	}, [N]);
-	let H = m.trigger || "{{", U = z.current.available || [], W = useMemo(() => resolveToolbar(_), [_]), G = useMemo(() => ({
-		enabled: y?.enabled ?? !0,
+		H.current = F;
+	}, [F]);
+	let U = m.trigger || "{{", W = de.current.available || [], G = useMemo(() => resolveToolbar(g), [g]), K = useMemo(() => ({
+		enabled: b?.enabled ?? !0,
 		metadata: {
 			source: "template-builder",
-			...y?.metadata
+			...b?.metadata
 		}
-	}), [y?.enabled, JSON.stringify(y?.metadata)]), K = useCallback((e) => {
+	}), [b?.enabled, JSON.stringify(b?.metadata)]), fe = 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(() => {
+		return t ? W.filter((e) => e.label.toLowerCase().includes(t)) : W;
+	}, [W]), q = useCallback((e) => {
+		ce(e), ue(fe(e));
+	}, [fe]), 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?.({
+		if (!z.current?.activeEditor) return !1;
+		let n = z.current.activeEditor, r = j, i = t.metadata || t.fieldType ? JSON.stringify({
+			...t.metadata,
+			...t.fieldType ? { fieldType: t.fieldType } : {}
+		}) : void 0, a = e === "inline" ? n.commands.insertStructuredContentInline?.({
 			attrs: {
 				alias: t.alias,
-				tag: t.metadata ? JSON.stringify(t.metadata) : void 0
+				tag: i
 			},
 			text: t.defaultValue || t.alias
 		}) : n.commands.insertStructuredContentBlock?.({
 			attrs: {
 				alias: t.alias,
-				tag: t.metadata ? JSON.stringify(t.metadata) : void 0
+				tag: i
 			},
 			text: t.defaultValue || t.alias
 		});
-		if (i) {
+		if (a) {
 			let e = getTemplateFieldsFromEditor(n);
-			A(e), E?.(e);
+			M(e), D?.(e);
 			let t = e.find((e) => !r.some((t) => t.id === e.id));
-			t && C?.(t);
+			t && w?.(t);
 		}
-		return i ?? !1;
+		return a ?? !1;
 	}, [
-		C,
-		E,
-		k
+		w,
+		D,
+		j
 	]), X = useCallback((e, t) => {
-		if (!L.current?.activeEditor) return !1;
-		let n = L.current.activeEditor.commands.updateStructuredContentById?.(e, { attrs: t });
-		return n && A((n) => {
+		if (!z.current?.activeEditor) return !1;
+		let n = z.current.activeEditor.commands.updateStructuredContentById?.(e, { attrs: t });
+		return n && M((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				...t
 			} : n);
-			E?.(r);
+			D?.(r);
 			let i = r.find((t) => t.id === e);
-			return i && w?.(i), r;
+			return i && T?.(i), r;
 		}), n ?? !1;
-	}, [w, E]), Z = useCallback((e) => {
-		let t = L.current?.activeEditor;
+	}, [T, D]), Z = useCallback((e) => {
+		let t = z.current?.activeEditor;
 		if (!t) {
 			let t = !1;
-			return A((n) => {
+			return M((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;
+				return t = !0, D?.(r), E?.(e), r;
+			}), t && P((t) => t === e ? null : t), t;
 		}
-		let n = k.find((t) => t.id === e)?.group, r = !1;
+		let n = j.find((t) => t.id === e)?.group, r = !1;
 		try {
 			r = t.commands.deleteStructuredContentById?.(e) ?? !1;
 		} catch (t) {
@@ -722,140 +893,145 @@ var getTemplateFieldsFromEditor = (e) => {
 			}
 		}
 		let o = !1;
-		return A((t) => {
+		return M((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;
+			return n && !r && (o = !0), D?.(i), o && E?.(e), i;
+		}), o && P((t) => t === e ? null : t), r || o;
 	}, [
-		T,
 		E,
-		k
+		D,
+		j
 	]), 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 (!z.current?.activeEditor) return;
+		z.current.activeEditor.commands.selectStructuredContentById?.(e), P(e);
+		let t = j.find((t) => t.id === e);
+		t && O?.(t);
+	}, [j, O]), $ = useCallback((e) => {
 		if (!e) return;
 		let t = getTemplateFieldsFromEditor(e);
-		A((e) => areTemplateFieldsEqual(e, t) ? e : (E?.(t), t));
-	}, [E]);
+		M((e) => areTemplateFieldsEqual(e, t) ? e : (D?.(t), t));
+	}, [D]);
 	useEffect(() => {
-		if (!I.current) return;
+		if (!R.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
+				...G && { toolbar: {
+					selector: G.selector,
+					toolbarGroups: G.config.toolbarGroups || ["center"],
+					excludeItems: G.config.excludeItems || [],
+					...G.config
 				} }
 			}, i = () => {
 				if (!e) {
 					if (t?.activeEditor) {
-						let e = t.activeEditor;
+						let e = t.activeEditor, n = getPresentationEditor(t);
 						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;
+							let { state: t } = e, { from: r } = t.selection;
+							if (r >= U.length) {
+								let i = r - U.length;
+								if (t.doc.textBetween(i, r) === U) {
+									let t = n?.coordsAtPos(r) ?? e.view.coordsAtPos(r), a = clampToViewport(new DOMRect(t.left, t.bottom ?? t.top, 0, 0)), o = () => {
+										let e = z.current?.activeEditor;
 										if (!e) return;
-										let t = e.state.selection.from, n = e.state.tr.delete(r, t);
+										let t = e.state.selection.from, n = e.state.tr.delete(i, t);
 										e.view.dispatch(n);
 									};
-									R.current = a, B.current = n, F(i), P(!0), J(), S?.({
+									B.current = o, V.current = r, L(a), I(!0), J(), C?.({
 										position: {
-											from: r,
-											to: n
+											from: i,
+											to: r
 										},
-										bounds: i,
-										cleanup: a
+										bounds: a,
+										cleanup: o
 									});
 									return;
 								}
 							}
-							if (!V.current) return;
-							if (B.current == null) {
-								P(!1), J();
+							if (!H.current) return;
+							if (V.current == null) {
+								I(!1), J();
 								return;
 							}
-							if (n < B.current) {
-								P(!1), B.current = null, J();
+							if (r < V.current) {
+								I(!1), V.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)));
+							q(t.doc.textBetween(V.current, r));
+							let i = n?.coordsAtPos(r) ?? e.view.coordsAtPos(r);
+							L(clampToViewport(new DOMRect(i.left, i.bottom ?? i.top, 0, 0)));
 						}), e.on("update", () => {
 							$(e);
 						}), $(e);
 					}
-					x?.();
+					S?.();
 				}
 			};
 			t = new n({
-				selector: I.current,
-				document: l?.source,
-				documentMode: l?.mode || "editing",
+				selector: R.current,
+				document: d?.source,
+				documentMode: d?.mode || "editing",
 				modules: r,
-				toolbar: W?.selector,
-				cspNonce: v,
-				telemetry: G,
-				...b && { licenseKey: b },
+				toolbar: G?.selector,
+				cspNonce: y,
+				telemetry: K,
+				...x && { licenseKey: x },
 				onReady: i
-			}), L.current = t;
+			}), z.current = t;
 		})(), () => {
-			e = !0, R.current = null, B.current = null, t && typeof t.destroy == "function" && t.destroy(), L.current = null;
+			e = !0, B.current = null, V.current = null, t && typeof t.destroy == "function" && t.destroy(), z.current = null;
 		};
 	}, [
-		l?.source,
-		l?.mode,
-		H,
+		d?.source,
+		d?.mode,
+		U,
 		$,
-		x,
 		S,
-		W,
-		v,
+		C,
 		G,
-		b
+		y,
+		K,
+		x
 	]);
-	let fe = useCallback(async (e) => {
-		R.current &&= (R.current(), null), B.current = null, J();
+	let pe = useCallback(async (e) => {
+		B.current &&= (B.current(), null), V.current = null, J();
 		let t = e.mode || "inline";
-		if (e.id.startsWith("custom_") && D) {
-			let n = await D(e);
+		if (e.id.startsWith("custom_") && k) {
+			let n = await k(e);
 			if (n) {
 				Y(n.mode || t, {
 					alias: n.label,
 					metadata: n.metadata,
-					defaultValue: n.defaultValue
-				}), P(!1);
+					defaultValue: n.defaultValue,
+					fieldType: n.fieldType
+				}), I(!1);
 				return;
 			}
 		}
 		Y(t, {
 			alias: e.label,
 			metadata: e.metadata,
-			defaultValue: e.defaultValue
-		}), P(!1);
+			defaultValue: e.defaultValue,
+			fieldType: e.fieldType
+		}), I(!1);
 	}, [
 		Y,
-		D,
+		k,
 		J
-	]), pe = useCallback((e) => {
-		R.current &&= (R.current(), null), B.current = null, J();
-		let t = L.current?.activeEditor;
+	]), me = useCallback((e) => {
+		B.current &&= (B.current(), null), V.current = null, J();
+		let t = z.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 });
+		let r = e.group || `group-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`, i = n.createTagObject?.({
+			group: r,
+			...e.fieldType ? { fieldType: e.fieldType } : {}
+		});
 		if ((e.mode || "inline") === "inline" ? t.commands.insertStructuredContentInline?.({
 			attrs: {
 				alias: e.alias,
@@ -869,64 +1045,64 @@ var getTemplateFieldsFromEditor = (e) => {
 			},
 			text: e.alias
 		})) {
-			e.group || X(e.id, { tag: i }), P(!1);
+			e.group || X(e.id, { tag: i }), I(!1);
 			let n = getTemplateFieldsFromEditor(t);
-			A(n), E?.(n);
+			M(n), D?.(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);
+		D
+	]), he = useCallback(() => {
+		I(!1), V.current = null, J(), B.current &&= (B.current(), null);
+	}, [J]), ge = useCallback(() => {
+		if (!z.current?.activeEditor || j.length === 0) return;
+		let e = j.findIndex((e) => e.id === N);
+		Q(j[e >= 0 ? (e + 1) % j.length : 0].id);
 	}, [
-		k,
 		j,
+		N,
 		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);
+	]), _e = useCallback(() => {
+		if (!z.current?.activeEditor || j.length === 0) return;
+		let e = j.findIndex((e) => e.id === N);
+		Q(j[e > 0 ? e - 1 : j.length - 1].id);
 	}, [
-		k,
 		j,
+		N,
 		Q
-	]), _e = useCallback(async (e) => {
-		let { fileName: t = "document", triggerDownload: n = !0 } = e || {}, r = await L.current?.export({
+	]), ve = useCallback(async (e) => {
+		let { fileName: t = "document", triggerDownload: n = !0 } = e || {}, r = await z.current?.export({
 			exportType: ["docx"],
 			exportedName: t,
 			triggerDownload: n
-		}), i = L.current?.activeEditor;
+		}), i = z.current?.activeEditor;
 		if (i) {
 			let e = getTemplateFieldsFromEditor(i);
-			O?.({
+			A?.({
 				fields: e,
 				blob: n ? void 0 : r,
 				fileName: t
 			});
 		}
 		return r;
-	}, [O]);
-	useImperativeHandle(c, () => ({
+	}, [A]);
+	useImperativeHandle(u, () => ({
 		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
+		nextField: ge,
+		previousField: _e,
+		getFields: () => j,
+		exportTemplate: ve,
+		getSuperDoc: () => z.current
 	}));
-	let ve = m.component || FieldMenu, ye = h.component || FieldList;
+	let ye = m.component || FieldMenu, be = h.component || FieldList;
 	return /* @__PURE__ */ jsxs("div", {
-		className: `superdoc-template-builder ${ie || ""}`,
-		style: ae,
+		className: `superdoc-template-builder ${re || ""}`,
+		style: ie,
 		children: [/* @__PURE__ */ jsxs("div", {
 			style: {
 				display: "flex",
@@ -935,51 +1111,51 @@ var getTemplateFieldsFromEditor = (e) => {
 			children: [
 				h.position === "left" && /* @__PURE__ */ jsx("div", {
 					className: "superdoc-template-builder-sidebar",
-					children: /* @__PURE__ */ jsx(ye, {
-						fields: k,
+					children: /* @__PURE__ */ jsx(be, {
+						fields: j,
 						onSelect: (e) => Q(e.id),
 						onDelete: Z,
 						onUpdate: (e) => X(e.id, e),
-						selectedFieldId: j || void 0
+						selectedFieldId: N || void 0
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "superdoc-template-builder-document",
 					style: { flex: 1 },
-					children: [W?.renderDefaultContainer && /* @__PURE__ */ jsx("div", {
+					children: [G?.renderDefaultContainer && /* @__PURE__ */ jsx("div", {
 						id: "superdoc-toolbar",
 						className: "superdoc-template-builder-toolbar",
 						"data-testid": "template-builder-toolbar"
 					}), /* @__PURE__ */ jsx("div", {
-						ref: I,
+						ref: R,
 						className: "superdoc-template-builder-editor",
-						style: { height: oe },
+						style: { height: ae },
 						"data-testid": "template-builder-editor"
 					})]
 				}),
 				h.position === "right" && /* @__PURE__ */ jsx("div", {
 					className: "superdoc-template-builder-sidebar",
-					children: /* @__PURE__ */ jsx(ye, {
-						fields: k,
+					children: /* @__PURE__ */ jsx(be, {
+						fields: j,
 						onSelect: (e) => Q(e.id),
 						onDelete: Z,
 						onUpdate: (e) => X(e.id, e),
-						selectedFieldId: j || void 0
+						selectedFieldId: N || 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
+		}), /* @__PURE__ */ jsx(ye, {
+			isVisible: F,
+			position: oe,
+			availableFields: f.available || [],
+			filteredFields: le,
+			filterQuery: se,
+			allowCreate: f.allowCreate || !1,
+			onSelect: pe,
+			onClose: he,
+			onCreateField: k,
+			existingFields: j,
+			onSelectExisting: me
 		})]
 	});
 });