@haklex/rich-ext-excalidraw 0.1.1 → 0.2.0

package/dist/ExcalidrawDisplayRenderer-DVdXrM8P.js

@@ -0,0 +1,226 @@
+import { t as __exportAll } from "./rolldown-runtime-CiIaOW0V.js";
+import { D as excalidrawStaticContainer, S as excalidrawFullscreenPopup, T as excalidrawLoading, _ as excalidrawDialogTitle, c as excalidrawActionGroup, g as excalidrawDialogMeta, h as excalidrawDialogHeaderTitle, k as readonlyUIOptions, m as excalidrawDialogHeader, p as excalidrawDialogCanvas, s as excalidrawActionButton, t as useExcalidrawData, w as excalidrawHeaderClose, x as excalidrawError } from "./useExcalidrawData-DcXa8vqV.js";
+import { Component, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useColorScheme } from "@haklex/rich-editor";
+import { presentDialog } from "@haklex/rich-editor-ui";
+import { usePortalTheme } from "@haklex/rich-style-token";
+import { Maximize2, ScanSearch, X, ZoomIn, ZoomOut } from "lucide-react";
+//#region \0@oxc-project+runtime@0.127.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region src/ExcalidrawDisplayRenderer.tsx
+var ExcalidrawDisplayRenderer_exports = /* @__PURE__ */ __exportAll({ ExcalidrawDisplayRenderer: () => ExcalidrawDisplayRenderer });
+var ExcalidrawDisplayRenderer = ({ snapshot }) => {
+	return /* @__PURE__ */ jsx(ExcalidrawStaticCanvas, {
+		snapshot,
+		theme: useColorScheme()
+	});
+};
+var ExcalidrawExpandContent = ({ dismiss, ExcalidrawComponent, data, theme }) => {
+	const apiRef = useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: excalidrawDialogHeader,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: excalidrawDialogHeaderTitle,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: excalidrawDialogTitle,
+				children: "Whiteboard"
+			}), /* @__PURE__ */ jsx("span", {
+				className: excalidrawDialogMeta,
+				children: "excalidraw"
+			})]
+		}), /* @__PURE__ */ jsx("button", {
+			className: excalidrawHeaderClose,
+			type: "button",
+			onClick: dismiss,
+			children: /* @__PURE__ */ jsx(X, { size: 18 })
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: excalidrawDialogCanvas,
+		children: /* @__PURE__ */ jsx(ExcalidrawComponent, {
+			viewModeEnabled: true,
+			zenModeEnabled: true,
+			UIOptions: readonlyUIOptions,
+			initialData: data,
+			theme,
+			excalidrawAPI: (api) => {
+				apiRef.current = api;
+				setTimeout(() => api.scrollToContent(), 100);
+			}
+		})
+	})] });
+};
+var ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
+	const { snapshot: data, loading: dataLoading, error: dataError } = useExcalidrawData(snapshot);
+	const [ExcalidrawComponent, setExcalidrawComponent] = useState(null);
+	const [libLoading, setLibLoading] = useState(true);
+	const apiRef = useRef(null);
+	const { className: portalClassName } = usePortalTheme();
+	useEffect(() => {
+		import("@excalidraw/excalidraw").then((mod) => {
+			const Comp = mod.Excalidraw;
+			if (Comp) setExcalidrawComponent(() => Comp);
+			setLibLoading(false);
+		}).catch((error) => {
+			console.error("Error loading excalidraw", error);
+			setLibLoading(false);
+		});
+	}, []);
+	const handleExpand = useCallback(() => {
+		if (!ExcalidrawComponent || !data) return;
+		presentDialog({
+			content: ({ dismiss }) => /* @__PURE__ */ jsx(ExcalidrawExpandContent, {
+				ExcalidrawComponent,
+				data,
+				dismiss,
+				theme
+			}),
+			className: excalidrawFullscreenPopup,
+			portalClassName,
+			theme,
+			showCloseButton: false,
+			clickOutsideToDismiss: true
+		});
+	}, [
+		ExcalidrawComponent,
+		data,
+		theme,
+		portalClassName
+	]);
+	if (dataLoading || libLoading) return /* @__PURE__ */ jsx("div", {
+		className: excalidrawStaticContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: excalidrawLoading,
+			children: "Loading excalidraw..."
+		})
+	});
+	if (dataError || !data) return /* @__PURE__ */ jsx("div", {
+		className: excalidrawStaticContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: excalidrawError,
+			children: dataError || "No data"
+		})
+	});
+	if (!ExcalidrawComponent) return /* @__PURE__ */ jsx("div", {
+		className: excalidrawStaticContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: excalidrawError,
+			children: "Failed to load excalidraw"
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		suppressHydrationWarning: true,
+		className: excalidrawStaticContainer,
+		"data-color-scheme": theme,
+		"data-theme": theme,
+		children: [/* @__PURE__ */ jsx(ExcalidrawErrorBoundary, {
+			fallback: /* @__PURE__ */ jsx("div", {
+				className: excalidrawError,
+				children: "Failed to render excalidraw"
+			}),
+			children: /* @__PURE__ */ jsx(ExcalidrawComponent, {
+				viewModeEnabled: true,
+				zenModeEnabled: true,
+				UIOptions: readonlyUIOptions,
+				initialData: data,
+				theme,
+				excalidrawAPI: (api) => {
+					apiRef.current = api;
+					setTimeout(() => api.scrollToContent(), 100);
+				}
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: excalidrawActionGroup,
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					className: excalidrawActionButton,
+					title: "Zoom In",
+					type: "button",
+					onClick: () => {
+						const api = apiRef.current;
+						if (!api) return;
+						const zoom = api.getAppState().zoom.value;
+						api.updateScene({ appState: { zoom: { value: zoom * 1.25 } } });
+					},
+					children: /* @__PURE__ */ jsx(ZoomIn, { size: 20 })
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: excalidrawActionButton,
+					title: "Zoom Out",
+					type: "button",
+					onClick: () => {
+						const api = apiRef.current;
+						if (!api) return;
+						const zoom = api.getAppState().zoom.value;
+						api.updateScene({ appState: { zoom: { value: zoom / 1.25 } } });
+					},
+					children: /* @__PURE__ */ jsx(ZoomOut, { size: 20 })
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: excalidrawActionButton,
+					title: "Fit to Content",
+					type: "button",
+					onClick: () => apiRef.current?.scrollToContent(),
+					children: /* @__PURE__ */ jsx(ScanSearch, { size: 20 })
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: excalidrawActionButton,
+					title: "Expand",
+					type: "button",
+					onClick: handleExpand,
+					children: /* @__PURE__ */ jsx(Maximize2, { size: 20 })
+				})
+			]
+		})]
+	});
+};
+var ExcalidrawErrorBoundary = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "state", { hasError: false });
+	}
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	render() {
+		return this.state.hasError ? this.props.fallback : this.props.children;
+	}
+};
+//#endregion
+export { ExcalidrawDisplayRenderer_exports as n, _defineProperty as r, ExcalidrawDisplayRenderer as t };

package/dist/ExcalidrawEditRenderer-C6P1ukC8.js

@@ -0,0 +1,481 @@
+import { t as __exportAll } from "./rolldown-runtime-CiIaOW0V.js";
+import { C as excalidrawHeaderActions, O as excalidrawStatusDot, S as excalidrawFullscreenPopup, T as excalidrawLoading, _ as excalidrawDialogTitle, b as excalidrawEditorContainer, d as excalidrawConfirmBtnDanger, f as excalidrawConfirmBtnPrimary, g as excalidrawDialogMeta, i as excalidrawActionBarBtn, j as useExcalidrawConfig, k as readonlyUIOptions, l as excalidrawConfirmActions, m as excalidrawDialogHeader, p as excalidrawDialogCanvas, t as useExcalidrawData, u as excalidrawConfirmBtn, v as excalidrawEditLabel, w as excalidrawHeaderClose, x as excalidrawError, y as excalidrawEditOverlay } from "./useExcalidrawData-DcXa8vqV.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useColorScheme } from "@haklex/rich-editor";
+import { SegmentedControl, dismissTopDialog, presentDialog } from "@haklex/rich-editor-ui";
+import { usePortalTheme } from "@haklex/rich-style-token";
+import { Clipboard, Download, Pencil, Save, X } from "lucide-react";
+//#region src/ExcalidrawEditRenderer.tsx
+var ExcalidrawEditRenderer_exports = /* @__PURE__ */ __exportAll({ ExcalidrawEditRenderer: () => ExcalidrawEditRenderer });
+var SAVE_DEBOUNCE_MS = 2e3;
+var ExcalidrawEditorDialogContent = ({ dismiss, ExcalidrawComponent, initialData, initialSnapshot, theme, onSave, saveSnapshot, onClose, baseRef, baseData }) => {
+	const { className: portalClassName } = usePortalTheme();
+	const apiRef = useRef(null);
+	const saveTimerRef = useRef(void 0);
+	const [isDirty, setIsDirty] = useState(false);
+	const isDirtyRef = useRef(false);
+	const confirmDialogOpenRef = useRef(false);
+	const initializedRef = useRef(false);
+	const stableRef = useRef(false);
+	const baseRefRef = useRef(baseRef);
+	const baseDataRef = useRef(baseData);
+	const [storageMode, setStorageMode] = useState(() => {
+		if (!saveSnapshot || !initialSnapshot) return "inline";
+		return initialSnapshot.type === "delta" ? "delta" : initialSnapshot.type === "remote" ? "remote" : "inline";
+	});
+	const storageModeRef = useRef(storageMode);
+	const [savedRef, setSavedRef] = useState(() => {
+		if (!saveSnapshot || !initialSnapshot) return "";
+		if (initialSnapshot.type === "remote") return initialSnapshot.url;
+		if (initialSnapshot.type === "delta") return initialSnapshot.baseUrl;
+		return "";
+	});
+	const [isSaving, setIsSaving] = useState(false);
+	useEffect(() => {
+		const stableTimer = setTimeout(() => {
+			stableRef.current = true;
+		}, 500);
+		return () => {
+			clearTimeout(stableTimer);
+			if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		};
+	}, []);
+	const getSnapshot = useCallback(() => {
+		const api = apiRef.current;
+		if (!api) return;
+		const appState = api.getAppState();
+		return {
+			elements: api.getSceneElements(),
+			appState: {
+				viewBackgroundColor: appState.viewBackgroundColor,
+				gridSize: appState.gridSize
+			},
+			files: api.getFiles()
+		};
+	}, []);
+	const performSave = useCallback(() => {
+		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		const doc = getSnapshot();
+		if (!doc) return Promise.resolve();
+		const mode = storageModeRef.current;
+		if (mode === "delta" && saveSnapshot) {
+			setIsSaving(true);
+			return (async () => {
+				try {
+					const currentBaseUrl = baseRefRef.current;
+					const currentBaseData = baseDataRef.current;
+					if (!currentBaseUrl || !currentBaseData) {
+						const ref = await saveSnapshot(doc, baseRefRef.current || void 0);
+						baseRefRef.current = ref;
+						baseDataRef.current = doc;
+						setSavedRef(ref);
+					}
+					isDirtyRef.current = false;
+					setIsDirty(false);
+				} finally {
+					setIsSaving(false);
+				}
+			})();
+		}
+		if (mode === "remote" && saveSnapshot) {
+			if (baseRefRef.current && baseDataRef.current && JSON.stringify(doc) === JSON.stringify(baseDataRef.current)) {
+				isDirtyRef.current = false;
+				setIsDirty(false);
+				return Promise.resolve();
+			}
+			setIsSaving(true);
+			return saveSnapshot(doc, baseRefRef.current || void 0).then((ref) => {
+				baseRefRef.current = ref;
+				baseDataRef.current = doc;
+				isDirtyRef.current = false;
+				setIsDirty(false);
+				setIsSaving(false);
+				setSavedRef(ref);
+			}, () => {
+				setIsSaving(false);
+			});
+		}
+		isDirtyRef.current = false;
+		setIsDirty(false);
+		return Promise.resolve();
+	}, [saveSnapshot, getSnapshot]);
+	const emitSnapshot = useCallback(async () => {
+		const doc = getSnapshot();
+		if (!doc) return;
+		const mode = storageModeRef.current;
+		if (mode === "delta" && saveSnapshot) {
+			const currentBaseUrl = baseRefRef.current;
+			const currentBaseData = baseDataRef.current;
+			if (currentBaseUrl && currentBaseData) {
+				const { diff } = await import("jsondiffpatch");
+				const delta = diff(currentBaseData, structuredClone(doc));
+				onSave(delta ? {
+					type: "delta",
+					baseUrl: currentBaseUrl,
+					delta
+				} : {
+					type: "remote",
+					url: currentBaseUrl
+				});
+			} else onSave({
+				type: "remote",
+				url: await saveSnapshot(doc, baseRefRef.current || void 0)
+			});
+			return;
+		}
+		if (mode === "remote") {
+			const ref = baseRefRef.current;
+			if (ref) onSave({
+				type: "remote",
+				url: ref
+			});
+			else if (saveSnapshot) onSave({
+				type: "remote",
+				url: await saveSnapshot(doc)
+			});
+			return;
+		}
+		onSave({
+			type: "inline",
+			data: doc
+		});
+	}, [
+		onSave,
+		saveSnapshot,
+		getSnapshot
+	]);
+	const handleChange = useCallback((elements) => {
+		if (!initializedRef.current) {
+			initializedRef.current = true;
+			return;
+		}
+		if (!stableRef.current) return;
+		if (elements.length === 0) return;
+		if (!isDirtyRef.current) {
+			isDirtyRef.current = true;
+			setIsDirty(true);
+		}
+		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		saveTimerRef.current = setTimeout(() => performSave(), SAVE_DEBOUNCE_MS);
+	}, [performSave]);
+	const handleSaveAndClose = useCallback(() => {
+		performSave().then(async () => {
+			await emitSnapshot();
+			onClose(getSnapshot());
+			dismiss();
+		});
+	}, [
+		performSave,
+		emitSnapshot,
+		getSnapshot,
+		onClose,
+		dismiss
+	]);
+	const handleDiscard = useCallback(() => {
+		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		dismiss();
+	}, [dismiss]);
+	const showConfirmDialog = useCallback(() => {
+		if (confirmDialogOpenRef.current) return;
+		confirmDialogOpenRef.current = true;
+		presentDialog({
+			title: "Unsaved Changes",
+			description: "You have unsaved changes that will be lost if you close now.",
+			content: ({ dismiss: dismissConfirm }) => {
+				const wrappedDismiss = () => {
+					confirmDialogOpenRef.current = false;
+					dismissConfirm();
+				};
+				return /* @__PURE__ */ jsxs("div", {
+					className: excalidrawConfirmActions,
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							className: excalidrawConfirmBtn,
+							type: "button",
+							onClick: wrappedDismiss,
+							children: "Continue Editing"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: excalidrawConfirmBtnDanger,
+							type: "button",
+							onClick: () => {
+								wrappedDismiss();
+								handleDiscard();
+							},
+							children: "Discard"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: excalidrawConfirmBtnPrimary,
+							type: "button",
+							onClick: () => {
+								wrappedDismiss();
+								handleSaveAndClose();
+							},
+							children: "Save & Close"
+						})
+					]
+				});
+			},
+			portalClassName,
+			theme,
+			showCloseButton: false,
+			clickOutsideToDismiss: false
+		});
+	}, [
+		handleDiscard,
+		handleSaveAndClose,
+		portalClassName,
+		theme
+	]);
+	const attemptClose = useCallback(() => {
+		if (isDirtyRef.current) showConfirmDialog();
+		else emitSnapshot().then(() => {
+			onClose(getSnapshot());
+			dismiss();
+		});
+	}, [
+		dismiss,
+		showConfirmDialog,
+		emitSnapshot,
+		getSnapshot,
+		onClose
+	]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				if (confirmDialogOpenRef.current) {
+					confirmDialogOpenRef.current = false;
+					dismissTopDialog();
+				} else attemptClose();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => document.removeEventListener("keydown", handleKeyDown, true);
+	}, [attemptClose]);
+	const handleManualUpload = useCallback(() => {
+		performSave();
+	}, [performSave]);
+	const handleExportJson = useCallback(() => {
+		const doc = getSnapshot();
+		if (!doc) return;
+		const blob = new Blob([JSON.stringify(doc, null, 2)], { type: "application/json" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = "excalidraw-snapshot.json";
+		a.click();
+		URL.revokeObjectURL(url);
+	}, [getSnapshot]);
+	const handleCopyJson = useCallback(() => {
+		const doc = getSnapshot();
+		if (!doc) return;
+		navigator.clipboard.writeText(JSON.stringify(doc));
+	}, [getSnapshot]);
+	const handleRefChange = useCallback((e) => {
+		const { value } = e.target;
+		setSavedRef(value);
+		baseRefRef.current = value;
+		baseDataRef.current = void 0;
+	}, []);
+	const handleStorageModeChange = useCallback((newMode) => {
+		setStorageMode(newMode);
+		storageModeRef.current = newMode;
+		if (newMode === "inline") setSavedRef("");
+		performSave();
+	}, [performSave]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: excalidrawDialogHeader,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: excalidrawStatusDot,
+				style: { backgroundColor: isDirty ? "#f59e0b" : "#22c55e" }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: excalidrawDialogTitle,
+				children: "Canvas Editor"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: excalidrawDialogMeta,
+				children: "excalidraw"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: excalidrawHeaderActions,
+				children: [
+					saveSnapshot && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(SegmentedControl, {
+							value: storageMode,
+							items: [
+								{
+									value: "inline",
+									label: "Inline"
+								},
+								{
+									value: "remote",
+									label: "Remote"
+								},
+								{
+									value: "delta",
+									label: "Delta"
+								}
+							],
+							onChange: handleStorageModeChange
+						}),
+						/* @__PURE__ */ jsx("div", { className: "_1c3wdzlh" }),
+						/* @__PURE__ */ jsxs("button", {
+							className: "_1c3wdzlg",
+							disabled: isSaving,
+							type: "button",
+							onClick: handleManualUpload,
+							children: [/* @__PURE__ */ jsx(Save, { size: 14 }), /* @__PURE__ */ jsx("span", { children: isSaving ? "Saving..." : "Save" })]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "_1c3wdzlh" })
+					] }),
+					/* @__PURE__ */ jsxs("button", {
+						className: excalidrawActionBarBtn,
+						type: "button",
+						onClick: handleExportJson,
+						children: [/* @__PURE__ */ jsx(Download, { size: 14 }), "JSON"]
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						className: excalidrawActionBarBtn,
+						type: "button",
+						onClick: handleCopyJson,
+						children: [/* @__PURE__ */ jsx(Clipboard, { size: 14 }), "Copy"]
+					}),
+					storageMode !== "inline" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "_1c3wdzlh" }), /* @__PURE__ */ jsx("input", {
+						className: "_1c3wdzli",
+						placeholder: "base URL / ref",
+						spellCheck: false,
+						type: "text",
+						value: savedRef,
+						onChange: handleRefChange
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				className: excalidrawHeaderClose,
+				type: "button",
+				onClick: attemptClose,
+				children: /* @__PURE__ */ jsx(X, { size: 18 })
+			})
+		]
+	}), /* @__PURE__ */ jsx("div", {
+		className: excalidrawDialogCanvas,
+		children: /* @__PURE__ */ jsx(ExcalidrawComponent, {
+			initialData,
+			theme,
+			excalidrawAPI: (api) => {
+				apiRef.current = api;
+			},
+			onChange: handleChange
+		})
+	})] });
+};
+var ExcalidrawEditRenderer = ({ snapshot, onSnapshotChange }) => {
+	const theme = useColorScheme();
+	const { saveSnapshot } = useExcalidrawConfig();
+	const { snapshot: initialData, loading: dataLoading, error: dataError, baseRef, baseData } = useExcalidrawData(snapshot);
+	const [ExcalidrawComponent, setExcalidrawComponent] = useState(null);
+	const [libLoading, setLibLoading] = useState(true);
+	const previewApiRef = useRef(null);
+	const initialDataRef = useRef(void 0);
+	const [previewKey, setPreviewKey] = useState(0);
+	const onSnapshotChangeRef = useRef(onSnapshotChange);
+	onSnapshotChangeRef.current = onSnapshotChange;
+	const saveSnapshotRef = useRef(saveSnapshot);
+	saveSnapshotRef.current = saveSnapshot;
+	const snapshotRef = useRef(snapshot);
+	snapshotRef.current = snapshot;
+	const { className: portalClassName } = usePortalTheme();
+	useEffect(() => {
+		if (initialData && !initialDataRef.current) initialDataRef.current = initialData;
+	}, [initialData]);
+	useEffect(() => {
+		import("@excalidraw/excalidraw").then((mod) => {
+			const Comp = mod.Excalidraw || mod.default?.Excalidraw;
+			if (Comp) setExcalidrawComponent(() => Comp);
+			setLibLoading(false);
+		}).catch(() => setLibLoading(false));
+	}, []);
+	const baseRefRef = useRef(baseRef);
+	const baseDataRefOuter = useRef(baseData);
+	useEffect(() => {
+		if (baseRef) baseRefRef.current = baseRef;
+	}, [baseRef]);
+	useEffect(() => {
+		if (baseData) baseDataRefOuter.current = baseData;
+	}, [baseData]);
+	const handleOpenEditor = useCallback(() => {
+		if (!ExcalidrawComponent || dataLoading) return;
+		presentDialog({
+			content: ({ dismiss }) => /* @__PURE__ */ jsx(ExcalidrawEditorDialogContent, {
+				ExcalidrawComponent,
+				baseData: baseDataRefOuter.current,
+				baseRef: baseRefRef.current,
+				dismiss,
+				initialData: initialDataRef.current,
+				initialSnapshot: snapshotRef.current,
+				saveSnapshot: saveSnapshotRef.current,
+				theme,
+				onSave: (ref) => onSnapshotChangeRef.current(ref),
+				onClose: (doc) => {
+					if (doc) {
+						initialDataRef.current = doc;
+						setPreviewKey((k) => k + 1);
+					}
+				}
+			}),
+			className: excalidrawFullscreenPopup,
+			portalClassName,
+			theme,
+			showCloseButton: false,
+			clickOutsideToDismiss: false
+		});
+	}, [
+		ExcalidrawComponent,
+		dataLoading,
+		theme,
+		portalClassName
+	]);
+	if (dataLoading || libLoading || !ExcalidrawComponent) return /* @__PURE__ */ jsx("div", {
+		className: excalidrawEditorContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: excalidrawLoading,
+			children: "Loading excalidraw editor..."
+		})
+	});
+	if (dataError) return /* @__PURE__ */ jsx("div", {
+		className: excalidrawEditorContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: excalidrawError,
+			children: dataError
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: excalidrawEditorContainer,
+		children: [/* @__PURE__ */ jsx(ExcalidrawComponent, {
+			viewModeEnabled: true,
+			zenModeEnabled: true,
+			UIOptions: readonlyUIOptions,
+			initialData: initialDataRef.current,
+			theme,
+			excalidrawAPI: (api) => {
+				previewApiRef.current = api;
+				setTimeout(() => api.scrollToContent(), 100);
+			}
+		}, previewKey), /* @__PURE__ */ jsx("button", {
+			className: excalidrawEditOverlay,
+			type: "button",
+			onClick: handleOpenEditor,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: excalidrawEditLabel,
+				children: [/* @__PURE__ */ jsx(Pencil, { size: 16 }), "Edit Whiteboard"]
+			})
+		})]
+	});
+};
+//#endregion
+export { ExcalidrawEditRenderer_exports as n, ExcalidrawEditRenderer as t };