@react-email/editor 0.0.0-experimental.41 → 0.0.0-experimental.43

package/dist/ui/index.mjs

@@ -1,6 +1,320 @@
-import { $ as BubbleMenuButtonForm, A as BubbleMenuImageEditLink, At as AlignRightIcon, B as BubbleMenuItalic, C as BubbleMenuLinkUnlink, Ct as Columns2, D as BubbleMenuLinkEditLink, Dt as Check, E as BubbleMenuLinkForm, Et as ChevronDown, F as BubbleMenuNodeSelector, G as BubbleMenuAlignLeft, H as BubbleMenuCode, I as NodeSelectorContent, J as BubbleMenuButtonDefault, K as BubbleMenuAlignCenter, L as NodeSelectorRoot, M as BubbleMenuUppercase, Mt as AlignCenterIcon, N as BubbleMenuUnderline, O as BubbleMenuImageDefault, Ot as CaseUpperIcon, P as BubbleMenuStrike, Q as BubbleMenuButtonToolbar, R as NodeSelectorTrigger, S as BubbleMenuLinkDefault, St as Columns3, T as BubbleMenuLinkOpenLink, Tt as CodeIcon, U as BubbleMenuBold, V as BubbleMenuItemGroup, W as BubbleMenuAlignRight, X as bubbleMenuTriggers, Y as BubbleMenuRoot, Z as BubbleMenuButtonUnlink, _ as TWO_COLUMNS, _t as Heading3, a as BUTTON, at as Text, b as isAtMaxColumnsDepth, bt as ExternalLinkIcon, c as FOUR_COLUMNS, ct as SquareCode, d as H3, dt as PencilIcon, et as BubbleMenuButtonEditLink, f as NUMBERED_LIST, ft as MousePointer, g as THREE_COLUMNS, gt as ItalicIcon, h as TEXT, ht as LinkIcon, i as BULLET_LIST, it as TextQuote, j as BubbleMenuDefault, jt as AlignLeftIcon, k as BubbleMenuImageToolbar, kt as BoldIcon, l as H1, lt as SplitSquareVertical, m as SECTION, mt as List, n as filterAndRankItems, nt as UnlinkIcon, o as CODE, ot as TextIcon, p as QUOTE, pt as ListOrdered, q as BubbleMenuItem, r as scoreItem, rt as UnderlineIcon, s as DIVIDER, st as StrikethroughIcon, t as SlashCommandRoot, tt as useBubbleMenuContext, u as H2, ut as Rows2, v as defaultSlashCommands, vt as Heading2, w as BubbleMenuLinkToolbar, wt as Code, x as isInsideNode, xt as Columns4, y as CommandList, yt as Heading1, z as BubbleMenuLinkSelector } from "../root-pS4l8bVZ.mjs";
-import { jsx } from "react/jsx-runtime";
+import { d as EDITOR_THEMES, l as useEmailTheming, m as SUPPORTED_CSS_PROPERTIES, s as setGlobalStyles } from "../extension-DcToBuV0.mjs";
+import { $ as BubbleMenuButtonForm, A as BubbleMenuImageEditLink, At as AlignRightIcon, B as BubbleMenuItalic, C as BubbleMenuLinkUnlink, Ct as Columns2, D as BubbleMenuLinkEditLink, Dt as Check, E as BubbleMenuLinkForm, Et as ChevronDown, F as BubbleMenuNodeSelector, G as BubbleMenuAlignLeft, H as BubbleMenuCode, I as NodeSelectorContent, J as BubbleMenuButtonDefault, K as BubbleMenuAlignCenter, L as NodeSelectorRoot, M as BubbleMenuUppercase, Mt as AlignCenterIcon, N as BubbleMenuUnderline, O as BubbleMenuImageDefault, Ot as CaseUpperIcon, P as BubbleMenuStrike, Q as BubbleMenuButtonToolbar, R as NodeSelectorTrigger, S as BubbleMenuLinkDefault, St as Columns3, T as BubbleMenuLinkOpenLink, Tt as CodeIcon, U as BubbleMenuBold, V as BubbleMenuItemGroup, W as BubbleMenuAlignRight, X as bubbleMenuTriggers, Y as BubbleMenuRoot, Z as BubbleMenuButtonUnlink, _ as TWO_COLUMNS, _t as Heading3, a as BUTTON, at as Text, b as isAtMaxColumnsDepth, bt as ExternalLinkIcon, c as FOUR_COLUMNS, ct as SquareCode, d as H3, dt as PencilIcon, et as BubbleMenuButtonEditLink, f as NUMBERED_LIST, ft as MousePointer, g as THREE_COLUMNS, gt as ItalicIcon, h as TEXT, ht as LinkIcon, i as BULLET_LIST, it as TextQuote, j as BubbleMenuDefault, jt as AlignLeftIcon, k as BubbleMenuImageToolbar, kt as BoldIcon, l as H1, lt as SplitSquareVertical, m as SECTION, mt as List, n as filterAndRankItems, nt as UnlinkIcon, o as CODE, ot as TextIcon, p as QUOTE, pt as ListOrdered, q as BubbleMenuItem, r as scoreItem, rt as UnderlineIcon, s as DIVIDER, st as StrikethroughIcon, t as SlashCommandRoot, tt as useBubbleMenuContext, u as H2, ut as Rows2, v as defaultSlashCommands, vt as Heading2, w as BubbleMenuLinkToolbar, wt as Code, x as isInsideNode, xt as Columns4, y as CommandList, yt as Heading1, z as BubbleMenuLinkSelector } from "../root-BVs63m-4.mjs";
+import { useCurrentEditor, useEditorState } from "@tiptap/react";
+import * as React$1 from "react";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { extensions } from "@tiptap/core";
+import { NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 
+//#region src/ui/icons/align-center-vertical.tsx
+function AlignCenterVerticalIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M12 2v20" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1" })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/align-end-vertical.tsx
+function AlignEndVerticalIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				width: "9",
+				height: "6",
+				x: "9",
+				y: "14",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				width: "16",
+				height: "6",
+				x: "2",
+				y: "4",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M22 2v20" })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/align-start-vertical.tsx
+function AlignStartVerticalIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				width: "9",
+				height: "6",
+				x: "6",
+				y: "14",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				width: "16",
+				height: "6",
+				x: "6",
+				y: "4",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M2 2v20" })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/box.tsx
+function BoxIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m3.3 7 8.7 5 8.7-5" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 22V12" })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/image.tsx
+function ImageIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				width: "18",
+				height: "18",
+				x: "3",
+				y: "3",
+				rx: "2",
+				ry: "2"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "9",
+				r: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/layout.tsx
+function LayoutIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				width: "18",
+				height: "18",
+				x: "3",
+				y: "3",
+				rx: "2",
+				ry: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+			/* @__PURE__ */ jsx("path", { d: "M9 21V9" })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/minus.tsx
+function MinusIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+	});
+}
+
+//#endregion
+//#region src/ui/icons/mouse-pointer-click.tsx
+function MousePointerClickIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M14 4.1 12 6" }),
+			/* @__PURE__ */ jsx("path", { d: "m5.1 8-2.9-.8" }),
+			/* @__PURE__ */ jsx("path", { d: "m6 12-1.9 2" }),
+			/* @__PURE__ */ jsx("path", { d: "M7.2 2.2 8 5.1" }),
+			/* @__PURE__ */ jsx("path", { d: "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z" })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/square-round-corner.tsx
+function SquareRoundCornerIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), /* @__PURE__ */ jsx("path", { d: "M14 3a8 8 0 0 1 8 8" })]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/table.tsx
+function TableIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M12 3v18" }),
+			/* @__PURE__ */ jsx("rect", {
+				width: "18",
+				height: "18",
+				x: "3",
+				y: "3",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 15h18" })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/icons/type.tsx
+function TypeIcon({ size, width, height, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? width ?? 24,
+		height: size ?? height ?? 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "9",
+				x2: "15",
+				y1: "20",
+				y2: "20"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				x2: "12",
+				y1: "4",
+				y2: "20"
+			})
+		]
+	});
+}
+
+//#endregion
 //#region src/ui/bubble-menu/separator.tsx
 function BubbleMenuSeparator({ className }) {
 	return /* @__PURE__ */ jsx("hr", {
@@ -48,6 +362,319 @@ const BubbleMenu = {
 	ImageDefault: BubbleMenuImageDefault
 };
 
+//#endregion
+//#region src/ui/inspector/provider.tsx
+const IGNORED_NODES = ["doc", "text"];
+function getHierarchyAtPosition(editor, pos) {
+	if (!editor) return [];
+	const { doc } = editor.state;
+	const hierarchy = [];
+	const nodeAtPos = doc.nodeAt(pos);
+	if (nodeAtPos && !IGNORED_NODES.includes(nodeAtPos.type.name)) hierarchy.push({
+		nodeType: nodeAtPos.type.name,
+		nodeAttrs: { ...nodeAtPos.attrs },
+		nodePos: {
+			pos,
+			inside: pos
+		}
+	});
+	const resolvedPos = doc.resolve(pos);
+	for (let depth = resolvedPos.depth; depth > 0; depth--) {
+		const node = resolvedPos.node(depth);
+		const nodePos = resolvedPos.before(depth);
+		if (node && !IGNORED_NODES.includes(node.type.name)) {
+			if (!hierarchy.some((h) => h.nodePos.pos === nodePos)) hierarchy.push({
+				nodeType: node.type.name,
+				nodeAttrs: { ...node.attrs },
+				nodePos: {
+					pos: nodePos,
+					inside: nodePos
+				}
+			});
+		}
+	}
+	return hierarchy;
+}
+function getNodeHierarchy(editor) {
+	if (!editor) return [];
+	const { selection } = editor.state;
+	const hierarchy = [];
+	if (selection instanceof NodeSelection) {
+		const node = selection.node;
+		if (node && !IGNORED_NODES.includes(node.type.name)) hierarchy.push({
+			nodeType: node.type.name,
+			nodeAttrs: { ...node.attrs },
+			nodePos: {
+				pos: selection.from,
+				inside: selection.from
+			}
+		});
+	}
+	const { from } = selection;
+	const resolvedPos = editor.state.doc.resolve(from);
+	for (let depth = resolvedPos.depth; depth > 0; depth--) {
+		const node = resolvedPos.node(depth);
+		const pos = resolvedPos.before(depth);
+		if (node && !IGNORED_NODES.includes(node.type.name)) {
+			if (!hierarchy.some((h) => h.nodePos.pos === pos)) hierarchy.push({
+				nodeType: node.type.name,
+				nodeAttrs: { ...node.attrs },
+				nodePos: {
+					pos,
+					inside: pos
+				}
+			});
+		}
+	}
+	return hierarchy;
+}
+const InspectorContext = React$1.createContext(null);
+function useInspector() {
+	const context = React$1.useContext(InspectorContext);
+	if (!context) throw new Error("useInspector can only be called from inside the InspectorContext. This probably means you forgot the <Inspector.Provider>");
+	return context;
+}
+function InspectorProvider({ children }) {
+	const { editor } = useCurrentEditor();
+	const target = useEditorState({
+		editor,
+		selector(context) {
+			if (!context.editor) return null;
+			if (!context.editor.isFocused) return "doc";
+			const { selection } = context.editor.state;
+			if (selection.content().size > 0 && selection instanceof TextSelection) {
+				const { $from } = selection;
+				for (let depth = $from.depth; depth > 0; depth--) if ($from.node(depth).type.name === "button") {
+					const pos = $from.before(depth);
+					const node = context.editor.state.doc.nodeAt(pos);
+					if (node) return {
+						nodeType: "button",
+						nodeAttrs: { ...node.attrs },
+						nodePos: {
+							pos,
+							inside: pos
+						}
+					};
+					break;
+				}
+				return "text";
+			}
+			const hierarchy = getNodeHierarchy(context.editor);
+			if (hierarchy.length > 0) {
+				const innermost = hierarchy[0];
+				const columnEntry = hierarchy.find((h) => h.nodeType === "columnsColumn");
+				return columnEntry && innermost.nodeType === "paragraph" ? columnEntry : innermost;
+			}
+			return "doc";
+		}
+	});
+	const pathFromRoot = React$1.useMemo(() => {
+		if (!editor) return [];
+		if (typeof target === "object" && target) {
+			const path = [...getHierarchyAtPosition(editor, target.nodePos.pos)].reverse();
+			return path.length > 0 ? path : [target];
+		}
+		if (target === "text") return [...getNodeHierarchy(editor)].reverse();
+		return [];
+	}, [editor, target]);
+	const editorDomFocused = React$1.useRef(false);
+	const inspectorFocused = React$1.useRef(false);
+	React$1.useEffect(() => {
+		const defaultFocusPlugin = editor?.state.plugins.find((plugin) => plugin.spec.key === extensions.focusEventsPluginKey);
+		if (editor && defaultFocusPlugin) {
+			editor?.unregisterPlugin(extensions.focusEventsPluginKey);
+			const pluginKey = new PluginKey("inspectorReactEmailFocusEvents");
+			editor.registerPlugin(new Plugin({
+				key: pluginKey,
+				props: { handleDOMEvents: {
+					focus: (view, event) => {
+						editorDomFocused.current = true;
+						editor.isFocused = true;
+						const transaction = editor.state.tr.setMeta("focus", { event }).setMeta("addToHistory", false);
+						view.dispatch(transaction);
+						return false;
+					},
+					blur: (view, event) => {
+						editorDomFocused.current = false;
+						if (!inspectorFocused.current) {
+							editor.isFocused = false;
+							const transaction = editor.state.tr.setMeta("blur", { event }).setMeta("addToHistory", false);
+							view.dispatch(transaction);
+						}
+						return false;
+					}
+				} }
+			}));
+			return () => {
+				editor?.unregisterPlugin(pluginKey);
+				editor?.registerPlugin(defaultFocusPlugin);
+			};
+		}
+	}, [editor]);
+	return /* @__PURE__ */ jsx(InspectorContext.Provider, {
+		value: {
+			target,
+			pathFromRoot,
+			focus: (event) => {
+				inspectorFocused.current = true;
+				if (editor) {
+					editor.isFocused = true;
+					const transaction = editor.state.tr.setMeta("focus", { event }).setMeta("addToHistory", false);
+					editor.view.dispatch(transaction);
+				}
+			},
+			blur: (event) => {
+				inspectorFocused.current = false;
+				if (!editorDomFocused.current && editor) {
+					editor.isFocused = false;
+					const transaction = editor.state.tr.setMeta("blur", { event }).setMeta("addToHistory", false);
+					editor.view.dispatch(transaction);
+				}
+			}
+		},
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/inspector/breadcrumb.tsx
+function InspectorBreadcrumb({ children }) {
+	const { editor } = useCurrentEditor();
+	const { pathFromRoot } = useInspector();
+	return children(React.useMemo(() => {
+		return [{
+			node: null,
+			focus() {
+				editor?.commands.setTextSelection(0);
+			}
+		}, ...pathFromRoot.map((focusedNode) => ({
+			node: focusedNode,
+			focus() {
+				editor?.commands.setNodeSelection(focusedNode.nodePos.pos);
+				editor?.commands.focus();
+			}
+		}))];
+	}, [pathFromRoot]));
+}
+
+//#endregion
+//#region src/ui/inspector/document.tsx
+function ensureAllProperties(currentStyles, themeDefaults) {
+	return currentStyles.map((group) => {
+		const defaultGroup = themeDefaults.find((g) => group.id ? g.id === group.id : g.title === group.title);
+		if (!defaultGroup || defaultGroup.inputs.length === 0) return group;
+		const existingProps = new Set(group.inputs.map((i) => `${i.classReference}:${i.prop}`));
+		const missingInputs = defaultGroup.inputs.filter((defaultInput) => !existingProps.has(`${defaultInput.classReference}:${defaultInput.prop}`)).map((defaultInput) => {
+			const propDef = SUPPORTED_CSS_PROPERTIES[defaultInput.prop];
+			if (propDef && propDef.type === "number") return {
+				...defaultInput,
+				value: "",
+				placeholder: String(propDef.defaultValue)
+			};
+			return { ...defaultInput };
+		});
+		if (missingInputs.length === 0) return group;
+		return {
+			...group,
+			inputs: [...group.inputs, ...missingInputs]
+		};
+	});
+}
+function applyStyleChange(styles, themeName, { classReference, prop, newValue }) {
+	let found = false;
+	const updatedStyles = styles.map((styleGroup) => {
+		if (styleGroup.inputs.find((input) => input.classReference === classReference && input.prop === prop)) {
+			found = true;
+			return {
+				...styleGroup,
+				inputs: styleGroup.inputs.map((input) => {
+					if (input.classReference === classReference && input.prop === prop) return {
+						...input,
+						value: newValue
+					};
+					return input;
+				})
+			};
+		}
+		return styleGroup;
+	});
+	if (found) return updatedStyles;
+	const propDef = SUPPORTED_CSS_PROPERTIES[prop] ?? null;
+	return updatedStyles.map((styleGroup) => {
+		if (styleGroup.classReference !== classReference) return styleGroup;
+		const defaultInput = EDITOR_THEMES[themeName].find((g) => styleGroup.id ? g.id === styleGroup.id : g.title === styleGroup.title)?.inputs.find((i) => i.prop === prop && i.classReference === classReference);
+		if (defaultInput) return {
+			...styleGroup,
+			inputs: [...styleGroup.inputs, {
+				...defaultInput,
+				value: newValue
+			}]
+		};
+		if (propDef) return {
+			...styleGroup,
+			inputs: [...styleGroup.inputs, {
+				label: propDef.label,
+				type: propDef.type,
+				value: newValue,
+				prop,
+				classReference,
+				unit: propDef.unit,
+				options: propDef.options
+			}]
+		};
+		return styleGroup;
+	});
+}
+function InspectorDocument({ children }) {
+	const { editor } = useCurrentEditor();
+	const theming = useEmailTheming(editor);
+	const { target } = useInspector();
+	if (!editor || !theming) return null;
+	const themeDefaults = EDITOR_THEMES[theming.theme];
+	const groups = ensureAllProperties(theming.styles, themeDefaults);
+	function setGlobalStyle(classReference, property, value) {
+		setGlobalStyles(editor, applyStyleChange(theming.styles, theming.theme, {
+			classReference,
+			prop: property,
+			newValue: value
+		}));
+	}
+	function batchSetGlobalStyle(changes) {
+		let styles = theming.styles;
+		for (const change of changes) styles = applyStyleChange(styles, theming.theme, {
+			classReference: change.classReference,
+			prop: change.property,
+			newValue: change.value
+		});
+		setGlobalStyles(editor, styles);
+	}
+	function findStyleValue(classReference, prop) {
+		for (const group of groups) {
+			const input = group.inputs.find((i) => i.classReference === classReference && i.prop === prop);
+			if (input) return input.value;
+		}
+		for (const group of themeDefaults) {
+			const input = group.inputs.find((i) => i.classReference === classReference && i.prop === prop);
+			if (input) return input.value;
+		}
+		return SUPPORTED_CSS_PROPERTIES[prop]?.defaultValue ?? "";
+	}
+	if (target === "doc") return /* @__PURE__ */ jsx(Fragment, { children: children({
+		styles: groups,
+		setGlobalStyle,
+		batchSetGlobalStyle,
+		findStyleValue
+	}) });
+}
+
+//#endregion
+//#region src/ui/inspector/index.tsx
+const Inspector = {
+	Provider: InspectorProvider,
+	Breadcrumb: InspectorBreadcrumb,
+	Document: InspectorDocument
+};
+
 //#endregion
 //#region src/ui/slash-command/index.ts
 const SlashCommand = {
@@ -56,5 +683,5 @@ const SlashCommand = {
 };
 
 //#endregion
-export { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BULLET_LIST, BUTTON, BoldIcon, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuButtonDefault, BubbleMenuButtonEditLink, BubbleMenuButtonForm, BubbleMenuButtonToolbar, BubbleMenuButtonUnlink, BubbleMenuCode, BubbleMenuDefault, BubbleMenuImageDefault, BubbleMenuImageEditLink, BubbleMenuImageToolbar, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkDefault, BubbleMenuLinkEditLink, BubbleMenuLinkForm, BubbleMenuLinkOpenLink, BubbleMenuLinkSelector, BubbleMenuLinkToolbar, BubbleMenuLinkUnlink, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, CODE, CaseUpperIcon, Check, ChevronDown, Code, CodeIcon, Columns2, Columns3, Columns4, CommandList, DIVIDER, ExternalLinkIcon, FOUR_COLUMNS, H1, H2, H3, Heading1, Heading2, Heading3, ItalicIcon, LinkIcon, List, ListOrdered, MousePointer, NUMBERED_LIST, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, PencilIcon, QUOTE, Rows2, SECTION, SlashCommand, SplitSquareVertical, SquareCode, StrikethroughIcon, TEXT, THREE_COLUMNS, TWO_COLUMNS, Text, TextIcon, TextQuote, UnderlineIcon, UnlinkIcon, bubbleMenuTriggers, defaultSlashCommands, filterAndRankItems, isAtMaxColumnsDepth, isInsideNode, scoreItem, useBubbleMenuContext };
+export { AlignCenterIcon, AlignCenterVerticalIcon, AlignEndVerticalIcon, AlignLeftIcon, AlignRightIcon, AlignStartVerticalIcon, BULLET_LIST, BUTTON, BoldIcon, BoxIcon, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuButtonDefault, BubbleMenuButtonEditLink, BubbleMenuButtonForm, BubbleMenuButtonToolbar, BubbleMenuButtonUnlink, BubbleMenuCode, BubbleMenuDefault, BubbleMenuImageDefault, BubbleMenuImageEditLink, BubbleMenuImageToolbar, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkDefault, BubbleMenuLinkEditLink, BubbleMenuLinkForm, BubbleMenuLinkOpenLink, BubbleMenuLinkSelector, BubbleMenuLinkToolbar, BubbleMenuLinkUnlink, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, CODE, CaseUpperIcon, Check, ChevronDown, Code, CodeIcon, Columns2, Columns3, Columns4, CommandList, DIVIDER, ExternalLinkIcon, FOUR_COLUMNS, H1, H2, H3, Heading1, Heading1 as Heading1Icon, Heading2, Heading3, ImageIcon, Inspector, ItalicIcon, LayoutIcon, LinkIcon, List, List as ListIcon, ListOrdered, ListOrdered as ListOrderedIcon, MinusIcon, MousePointer, MousePointerClickIcon, NUMBERED_LIST, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, PencilIcon, QUOTE, TextQuote as QuoteIcon, TextQuote, Rows2, SECTION, SlashCommand, SplitSquareVertical, SquareCode, SquareRoundCornerIcon, StrikethroughIcon, TEXT, THREE_COLUMNS, TWO_COLUMNS, TableIcon, Text, TextIcon, TypeIcon, UnderlineIcon, UnlinkIcon, bubbleMenuTriggers, defaultSlashCommands, filterAndRankItems, isAtMaxColumnsDepth, isInsideNode, scoreItem, useBubbleMenuContext };
 //# sourceMappingURL=index.mjs.map