@haklex/rich-ext-tldraw 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1004 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createContext, use, useMemo, forwardRef, createElement, useState, useEffect, useRef, useCallback, lazy, Suspense, Component } from "react";
+import { useColorScheme } from "@haklex/rich-editor";
+import { presentDialog, SegmentedControl } from "@haklex/rich-editor-ui";
+import { DecoratorNode, $insertNodes, $getNodeByKey, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+const TldrawConfigContext = createContext({});
+function TldrawConfigProvider({
+  apiUrl,
+  saveSnapshot,
+  children
+}) {
+  const value = useMemo(
+    () => ({ apiUrl, saveSnapshot }),
+    [apiUrl, saveSnapshot]
+  );
+  return /* @__PURE__ */ jsx(TldrawConfigContext.Provider, { value, children });
+}
+function useTldrawConfig() {
+  return use(TldrawConfigContext);
+}
+const PortalThemeContext = createContext({
+  className: ""
+});
+function usePortalTheme() {
+  return use(PortalThemeContext);
+}
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+const createLucideIcon = (iconName, iconNode) => {
+  const Component2 = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component2.displayName = toPascalCase(iconName);
+  return Component2;
+};
+const __iconNode$9 = [
+  ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
+  [
+    "path",
+    {
+      d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",
+      key: "116196"
+    }
+  ]
+];
+const Clipboard = createLucideIcon("clipboard", __iconNode$9);
+const __iconNode$8 = [
+  ["path", { d: "M12 15V3", key: "m9g1x1" }],
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
+  ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
+];
+const Download = createLucideIcon("download", __iconNode$8);
+const __iconNode$7 = [
+  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
+  ["path", { d: "m21 3-7 7", key: "1l2asr" }],
+  ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
+  ["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
+];
+const Maximize2 = createLucideIcon("maximize-2", __iconNode$7);
+const __iconNode$6 = [
+  [
+    "path",
+    {
+      d: "M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z",
+      key: "nt11vn"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18",
+      key: "15qc1e"
+    }
+  ],
+  ["path", { d: "m2.3 2.3 7.286 7.286", key: "1wuzzi" }],
+  ["circle", { cx: "11", cy: "11", r: "2", key: "xmgehs" }]
+];
+const PenTool = createLucideIcon("pen-tool", __iconNode$6);
+const __iconNode$5 = [
+  [
+    "path",
+    {
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
+    }
+  ],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
+];
+const Pencil = createLucideIcon("pencil", __iconNode$5);
+const __iconNode$4 = [
+  ["path", { d: "M3 7V5a2 2 0 0 1 2-2h2", key: "aa7l1z" }],
+  ["path", { d: "M17 3h2a2 2 0 0 1 2 2v2", key: "4qcy5o" }],
+  ["path", { d: "M21 17v2a2 2 0 0 1-2 2h-2", key: "6vwrx8" }],
+  ["path", { d: "M7 21H5a2 2 0 0 1-2-2v-2", key: "ioqczr" }],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }],
+  ["path", { d: "m16 16-1.9-1.9", key: "1dq9hf" }]
+];
+const ScanSearch = createLucideIcon("scan-search", __iconNode$4);
+const __iconNode$3 = [
+  ["path", { d: "M12 3v12", key: "1x0j5s" }],
+  ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
+];
+const Upload = createLucideIcon("upload", __iconNode$3);
+const __iconNode$2 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode$2);
+const __iconNode$1 = [
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
+  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
+  ["line", { x1: "11", x2: "11", y1: "8", y2: "14", key: "1vmskp" }],
+  ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
+];
+const ZoomIn = createLucideIcon("zoom-in", __iconNode$1);
+const __iconNode = [
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
+  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
+  ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
+];
+const ZoomOut = createLucideIcon("zoom-out", __iconNode);
+var tldrawStaticContainer = "_1vqtdre0";
+var tldrawEditorContainer = "_1vqtdre1";
+var tldrawLoading = "_1vqtdre2";
+var tldrawError = "_1vqtdre4";
+var tldrawActionGroup = "_1vqtdre5";
+var tldrawActionButton = "_1vqtdre6";
+var tldrawFullscreenPopup = "_1vqtdre7";
+var tldrawDialogHeader = "_1vqtdre8";
+var tldrawStatusDot = "_1vqtdre9";
+var tldrawDialogTitle = "_1vqtdrea";
+var tldrawDialogMeta = "_1vqtdreb";
+var tldrawHeaderActions = "_1vqtdrec";
+var tldrawHeaderClose = "_1vqtdred";
+var tldrawActionBarBtn = "_1vqtdree";
+var tldrawActionBarSep = "_1vqtdref";
+var tldrawActionBarUrl = "_1vqtdreg";
+var tldrawDialogCanvas = "_1vqtdreh";
+var tldrawConfirmActions = "_1vqtdrei";
+var tldrawConfirmBtn = "_1vqtdrej";
+var tldrawConfirmBtnPrimary = "_1vqtdrek";
+var tldrawConfirmBtnDanger = "_1vqtdrel";
+var tldrawEditOverlay = "_1vqtdrem";
+var tldrawEditLabel = "_1vqtdren";
+function useTldrawData(data) {
+  const { apiUrl } = useTldrawConfig();
+  const parsed = useMemo(() => {
+    if (!data) return { type: "empty" };
+    try {
+      const json = JSON.parse(data);
+      if (json && typeof json === "object") {
+        return {
+          type: "inline",
+          snapshot: json
+        };
+      }
+    } catch {
+    }
+    const firstLine = data.split("\n")[0].trim();
+    let fetchUrl2;
+    if (firstLine.startsWith("http")) {
+      fetchUrl2 = firstLine;
+    } else if (firstLine.startsWith("ref:") && apiUrl) {
+      fetchUrl2 = `${apiUrl}/objects/${firstLine.slice(4)}`;
+    }
+    if (fetchUrl2) {
+      return { type: "remote", fetchUrl: fetchUrl2 };
+    }
+    return {
+      type: "error",
+      error: firstLine.startsWith("ref:") ? "Missing apiUrl for ref resolution" : "Unrecognized snapshot format"
+    };
+  }, [data, apiUrl]);
+  const fetchUrl = parsed.type === "remote" ? parsed.fetchUrl : void 0;
+  const [remoteSnapshot, setRemoteSnapshot] = useState();
+  const [loading, setLoading] = useState(!!fetchUrl);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    if (!fetchUrl) return;
+    let cancelled = false;
+    setLoading(true);
+    setError("");
+    fetch(fetchUrl).then((res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      return res.json();
+    }).then((json) => {
+      if (!cancelled) {
+        setRemoteSnapshot(json);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err.message : "Failed to load");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchUrl]);
+  if (parsed.type === "inline") {
+    return { snapshot: parsed.snapshot, loading: false, error: "" };
+  }
+  if (parsed.type === "remote") {
+    return { snapshot: remoteSnapshot, loading, error };
+  }
+  if (parsed.type === "error") {
+    return { snapshot: void 0, loading: false, error: parsed.error };
+  }
+  return { snapshot: void 0, loading: false, error: "" };
+}
+const SAVE_DEBOUNCE_MS = 2e3;
+const TldrawEditorDialogContent = ({
+  dismiss,
+  TldrawComponent,
+  initialData,
+  initialSnapshot,
+  theme,
+  onSave,
+  saveSnapshot,
+  onClose
+}) => {
+  const { className: portalClassName } = usePortalTheme();
+  const editorRef = useRef(null);
+  const saveTimerRef = useRef(void 0);
+  const [isDirty, setIsDirty] = useState(false);
+  const isDirtyRef = useRef(false);
+  const [storageMode, setStorageMode] = useState(() => {
+    if (!saveSnapshot || !initialSnapshot || !initialSnapshot.trim())
+      return "inline";
+    try {
+      JSON.parse(initialSnapshot);
+      return "inline";
+    } catch {
+      return "remote";
+    }
+  });
+  const storageModeRef = useRef(storageMode);
+  const [savedRef, setSavedRef] = useState(() => {
+    if (!saveSnapshot || !initialSnapshot || !initialSnapshot.trim()) return "";
+    try {
+      JSON.parse(initialSnapshot);
+      return "";
+    } catch {
+      return initialSnapshot;
+    }
+  });
+  const [isSaving, setIsSaving] = useState(false);
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, []);
+  const performSave = useCallback(() => {
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    const editor = editorRef.current;
+    if (!editor) return Promise.resolve();
+    try {
+      const doc = editor.store.getSnapshot();
+      if (storageModeRef.current === "remote" && saveSnapshot) {
+        setIsSaving(true);
+        return saveSnapshot(doc).then(
+          (ref) => {
+            onSave(ref);
+            isDirtyRef.current = false;
+            setIsDirty(false);
+            setIsSaving(false);
+            setSavedRef(ref);
+          },
+          () => {
+            setIsSaving(false);
+          }
+        );
+      } else {
+        onSave(JSON.stringify(doc));
+        isDirtyRef.current = false;
+        setIsDirty(false);
+      }
+    } catch {
+    }
+    return Promise.resolve();
+  }, [onSave, saveSnapshot]);
+  const handleMount = useCallback(
+    (editor) => {
+      editorRef.current = editor;
+      editor.user.updateUserPreferences({ colorScheme: theme });
+      editor.store.listen(
+        () => {
+          isDirtyRef.current = true;
+          setIsDirty(true);
+          if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+          saveTimerRef.current = setTimeout(
+            () => performSave(),
+            SAVE_DEBOUNCE_MS
+          );
+        },
+        { scope: "document" }
+      );
+    },
+    [theme, performSave]
+  );
+  const handleSaveAndClose = useCallback(() => {
+    void performSave().then(() => {
+      const editor = editorRef.current;
+      onClose(editor?.store.getSnapshot());
+      dismiss();
+    });
+  }, [performSave, onClose, dismiss]);
+  const handleDiscard = useCallback(() => {
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    dismiss();
+  }, [dismiss]);
+  const showConfirmDialog = useCallback(() => {
+    presentDialog({
+      title: "Unsaved Changes",
+      description: "You have unsaved changes that will be lost if you close now.",
+      content: ({ dismiss: dismissConfirm }) => /* @__PURE__ */ jsxs("div", { className: tldrawConfirmActions, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: tldrawConfirmBtn,
+            onClick: dismissConfirm,
+            children: "Continue Editing"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: tldrawConfirmBtnDanger,
+            onClick: () => {
+              dismissConfirm();
+              handleDiscard();
+            },
+            children: "Discard"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: tldrawConfirmBtnPrimary,
+            onClick: () => {
+              dismissConfirm();
+              handleSaveAndClose();
+            },
+            children: "Save & Close"
+          }
+        )
+      ] }),
+      portalClassName,
+      showCloseButton: false,
+      clickOutsideToDismiss: false
+    });
+  }, [handleDiscard, handleSaveAndClose, portalClassName]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        if (isDirtyRef.current) {
+          showConfirmDialog();
+        } else {
+          dismiss();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [dismiss, showConfirmDialog]);
+  const attemptClose = useCallback(() => {
+    if (isDirtyRef.current) {
+      showConfirmDialog();
+    } else {
+      dismiss();
+    }
+  }, [dismiss, showConfirmDialog]);
+  const handleManualUpload = useCallback(() => {
+    performSave();
+  }, [performSave]);
+  const handleExportJson = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const doc = editor.store.getSnapshot();
+    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 = "tldraw-snapshot.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, []);
+  const handleCopyJson = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const doc = editor.store.getSnapshot();
+    void navigator.clipboard.writeText(JSON.stringify(doc));
+  }, []);
+  const handleCopyRef = useCallback(() => {
+    if (savedRef) void navigator.clipboard.writeText(savedRef);
+  }, [savedRef]);
+  const handleStorageModeChange = useCallback(
+    (newMode) => {
+      setStorageMode(newMode);
+      storageModeRef.current = newMode;
+      if (newMode === "inline") setSavedRef("");
+      performSave();
+    },
+    [performSave]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: tldrawDialogHeader, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: tldrawStatusDot,
+          style: { backgroundColor: isDirty ? "#f59e0b" : "#22c55e" }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: tldrawDialogTitle, children: "Canvas Editor" }),
+      /* @__PURE__ */ jsx("span", { className: tldrawDialogMeta, children: "tldraw" }),
+      /* @__PURE__ */ jsxs("div", { className: tldrawHeaderActions, children: [
+        saveSnapshot && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              items: [
+                { value: "inline", label: "Inline" },
+                { value: "remote", label: "Remote" }
+              ],
+              value: storageMode,
+              onChange: handleStorageModeChange
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: tldrawActionBarSep }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionBarBtn,
+              onClick: handleManualUpload,
+              disabled: isSaving,
+              children: [
+                /* @__PURE__ */ jsx(Upload, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { children: isSaving ? "Saving..." : "Save" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: tldrawActionBarSep })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: tldrawActionBarBtn,
+            onClick: handleExportJson,
+            children: [
+              /* @__PURE__ */ jsx(Download, { size: 14 }),
+              "JSON"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: tldrawActionBarBtn,
+            onClick: handleCopyJson,
+            children: [
+              /* @__PURE__ */ jsx(Clipboard, { size: 14 }),
+              "Copy"
+            ]
+          }
+        ),
+        storageMode === "remote" && savedRef && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: tldrawActionBarSep }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionBarUrl,
+              onClick: handleCopyRef,
+              title: savedRef,
+              children: savedRef
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: tldrawHeaderClose,
+          onClick: attemptClose,
+          children: /* @__PURE__ */ jsx(X, { size: 18 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: tldrawDialogCanvas, children: /* @__PURE__ */ jsx(TldrawComponent, { snapshot: initialData, onMount: handleMount }) })
+  ] });
+};
+const TldrawEditRenderer = ({
+  snapshot,
+  onSnapshotChange
+}) => {
+  const theme = useColorScheme();
+  const { saveSnapshot } = useTldrawConfig();
+  const {
+    snapshot: initialData,
+    loading: dataLoading,
+    error: dataError
+  } = useTldrawData(snapshot);
+  const [TldrawComponent, setTldrawComponent] = useState(null);
+  const [libLoading, setLibLoading] = useState(true);
+  const previewEditorRef = useRef(null);
+  const initialDataRef = useRef(void 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("tldraw").then((mod) => {
+      setTldrawComponent(() => mod.Tldraw);
+      setLibLoading(false);
+    }).catch(() => setLibLoading(false));
+  }, []);
+  useEffect(() => {
+    if (previewEditorRef.current?.user?.updateUserPreferences) {
+      previewEditorRef.current.user.updateUserPreferences({
+        colorScheme: theme
+      });
+    }
+  }, [theme]);
+  const handlePreviewMount = useCallback(
+    (editor) => {
+      previewEditorRef.current = editor;
+      editor.updateInstanceState({ isReadonly: true });
+      editor.setCurrentTool("hand");
+      editor.user.updateUserPreferences({ colorScheme: theme });
+      setTimeout(() => editor.zoomToFit({ animate: false }), 100);
+    },
+    [theme]
+  );
+  const handleOpenEditor = useCallback(() => {
+    if (!TldrawComponent) return;
+    presentDialog({
+      content: ({ dismiss }) => /* @__PURE__ */ jsx(
+        TldrawEditorDialogContent,
+        {
+          dismiss,
+          TldrawComponent,
+          initialData: initialDataRef.current,
+          initialSnapshot: snapshotRef.current,
+          theme,
+          onSave: (ref) => onSnapshotChangeRef.current(ref),
+          saveSnapshot: saveSnapshotRef.current,
+          onClose: (doc) => {
+            if (doc) initialDataRef.current = doc;
+          }
+        }
+      ),
+      className: tldrawFullscreenPopup,
+      portalClassName,
+      showCloseButton: false,
+      clickOutsideToDismiss: false
+    });
+  }, [TldrawComponent, theme, portalClassName]);
+  const loading = dataLoading || libLoading;
+  if (loading || !TldrawComponent) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawEditorContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw editor..." }) });
+  }
+  if (dataError) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawEditorContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: dataError }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: tldrawEditorContainer, children: [
+    /* @__PURE__ */ jsx(
+      TldrawComponent,
+      {
+        snapshot: initialDataRef.current,
+        hideUi: true,
+        onMount: handlePreviewMount
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: tldrawEditOverlay,
+        onClick: handleOpenEditor,
+        children: /* @__PURE__ */ jsxs("span", { className: tldrawEditLabel, children: [
+          /* @__PURE__ */ jsx(Pencil, { size: 16 }),
+          "Edit Whiteboard"
+        ] })
+      }
+    )
+  ] });
+};
+const TldrawEditRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  TldrawEditRenderer
+}, Symbol.toStringTag, { value: "Module" }));
+const LazyStaticRenderer = lazy(
+  () => Promise.resolve().then(() => TldrawStaticRenderer$1).then((m) => ({
+    default: m.TldrawStaticRenderer
+  }))
+);
+const LazyEditRenderer = lazy(
+  () => Promise.resolve().then(() => TldrawEditRenderer$1).then((m) => ({
+    default: m.TldrawEditRenderer
+  }))
+);
+const _TldrawNode = class _TldrawNode extends DecoratorNode {
+  constructor(snapshot, key) {
+    super(key);
+    __publicField(this, "__snapshot");
+    this.__snapshot = snapshot;
+  }
+  static getType() {
+    return "tldraw";
+  }
+  static clone(node) {
+    return new _TldrawNode(node.__snapshot, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-tldraw-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createTldrawNode(serializedNode.snapshot);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "tldraw",
+      snapshot: this.__snapshot,
+      version: 1
+    };
+  }
+  getSnapshot() {
+    return this.__snapshot;
+  }
+  setSnapshot(snapshot) {
+    const writable = this.getWritable();
+    writable.__snapshot = snapshot;
+  }
+  decorate(editor, _config) {
+    const nodeKey = this.__key;
+    const isEditable = editor.isEditable();
+    const fallback = createElement("div", {
+      className: "rich-tldraw-loading",
+      style: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: "16 / 10",
+        margin: "1rem 0"
+      }
+    });
+    if (isEditable) {
+      return createElement(
+        Suspense,
+        { fallback },
+        createElement(LazyEditRenderer, {
+          snapshot: this.__snapshot,
+          onSnapshotChange: (newSnapshot) => {
+            editor.update(() => {
+              const node = $getNodeByKey(nodeKey);
+              if (node) {
+                node.setSnapshot(newSnapshot);
+              }
+            });
+          }
+        })
+      );
+    }
+    return createElement(
+      Suspense,
+      { fallback },
+      createElement(LazyStaticRenderer, { snapshot: this.__snapshot })
+    );
+  }
+};
+__publicField(_TldrawNode, "slashMenuItems", [
+  {
+    title: "Whiteboard",
+    icon: createElement(PenTool, { size: 20 }),
+    description: "Tldraw whiteboard canvas",
+    keywords: ["tldraw", "whiteboard", "draw", "canvas"],
+    section: "MEDIA",
+    onSelect: (editor) => {
+      editor.update(() => {
+        $insertNodes([$createTldrawNode("{}")]);
+      });
+    }
+  }
+]);
+let TldrawNode = _TldrawNode;
+function $createTldrawNode(snapshot) {
+  return new TldrawNode(snapshot);
+}
+function $isTldrawNode(node) {
+  return node instanceof TldrawNode;
+}
+const INSERT_TLDRAW_COMMAND = createCommand("INSERT_TLDRAW");
+function TldrawPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_TLDRAW_COMMAND,
+      (snapshot) => {
+        const node = $createTldrawNode(snapshot);
+        $insertNodes([node]);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  return null;
+}
+const TldrawStaticRenderer = ({
+  snapshot
+}) => {
+  const theme = useColorScheme();
+  const containerRef = useRef(null);
+  const [hasEnteredView, setHasEnteredView] = useState(false);
+  useEffect(() => {
+    if (hasEnteredView) return;
+    const target = containerRef.current;
+    if (!target) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setHasEnteredView(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px 0px", threshold: 0.1 }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [hasEnteredView]);
+  if (!hasEnteredView) {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw..." }) });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsx(TldrawStaticCanvas, { snapshot, theme }) });
+};
+const TldrawExpandContent = ({ dismiss, TldrawComponent, data, theme }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsxs("div", { className: tldrawDialogHeader, children: [
+    /* @__PURE__ */ jsx("span", { className: tldrawDialogTitle, children: "Whiteboard" }),
+    /* @__PURE__ */ jsx("span", { className: tldrawDialogMeta, children: "tldraw" }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: tldrawHeaderClose, onClick: dismiss, children: /* @__PURE__ */ jsx(X, { size: 18 }) })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: tldrawDialogCanvas, children: /* @__PURE__ */ jsx(
+    TldrawComponent,
+    {
+      snapshot: data,
+      hideUi: true,
+      onMount: (editor) => {
+        editor.updateInstanceState({ isReadonly: true });
+        editor.setCurrentTool("hand");
+        editor.user.updateUserPreferences({ colorScheme: theme });
+        setTimeout(() => editor.zoomToFit({ animate: false }), 100);
+      }
+    }
+  ) })
+] });
+const TldrawStaticCanvas = ({ snapshot, theme }) => {
+  const {
+    snapshot: data,
+    loading: dataLoading,
+    error: dataError
+  } = useTldrawData(snapshot);
+  const [TldrawComponent, setTldrawComponent] = useState(null);
+  const [libLoading, setLibLoading] = useState(true);
+  const editorRef = useRef(null);
+  const { className: portalClassName } = usePortalTheme();
+  useEffect(() => {
+    import("tldraw").then((mod) => {
+      setTldrawComponent(() => mod.Tldraw);
+      setLibLoading(false);
+    }).catch(() => setLibLoading(false));
+  }, []);
+  useEffect(() => {
+    if (editorRef.current?.user?.updateUserPreferences) {
+      editorRef.current.user.updateUserPreferences({ colorScheme: theme });
+    }
+  }, [theme]);
+  const handleMount = useCallback(
+    (editor) => {
+      editorRef.current = editor;
+      editor.updateInstanceState({ isReadonly: true });
+      editor.setCurrentTool("hand");
+      editor.user.updateUserPreferences({ colorScheme: theme });
+      setTimeout(() => {
+        editor.zoomToFit({ animate: false });
+      }, 100);
+    },
+    [theme]
+  );
+  const handleExpand = useCallback(() => {
+    if (!TldrawComponent || !data) return;
+    presentDialog({
+      content: ({ dismiss }) => /* @__PURE__ */ jsx(
+        TldrawExpandContent,
+        {
+          dismiss,
+          TldrawComponent,
+          data,
+          theme
+        }
+      ),
+      className: tldrawFullscreenPopup,
+      portalClassName,
+      showCloseButton: false,
+      clickOutsideToDismiss: true
+    });
+  }, [TldrawComponent, data, theme, portalClassName]);
+  const loading = dataLoading || libLoading;
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw..." }) });
+  }
+  if (dataError || !data) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: dataError || "No data" }) });
+  }
+  if (!TldrawComponent) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: "Failed to load tldraw" }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: tldrawStaticContainer,
+      "data-theme": theme,
+      "data-color-scheme": theme,
+      children: [
+        /* @__PURE__ */ jsx(
+          TldrawErrorBoundary,
+          {
+            fallback: /* @__PURE__ */ jsx("div", { className: tldrawError, children: "Failed to render tldraw" }),
+            children: /* @__PURE__ */ jsx(TldrawComponent, { snapshot: data, hideUi: true, onMount: handleMount })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: tldrawActionGroup, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionButton,
+              title: "Zoom In",
+              onClick: () => editorRef.current?.zoomIn(),
+              children: /* @__PURE__ */ jsx(ZoomIn, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionButton,
+              title: "Zoom Out",
+              onClick: () => editorRef.current?.zoomOut(),
+              children: /* @__PURE__ */ jsx(ZoomOut, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionButton,
+              title: "Fit to Content",
+              onClick: () => editorRef.current?.zoomToFit(),
+              children: /* @__PURE__ */ jsx(ScanSearch, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionButton,
+              title: "Expand",
+              onClick: handleExpand,
+              children: /* @__PURE__ */ jsx(Maximize2, { size: 20 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+class TldrawErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { hasError: false });
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+}
+const TldrawStaticRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  TldrawStaticRenderer
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  $createTldrawNode,
+  $isTldrawNode,
+  INSERT_TLDRAW_COMMAND,
+  TldrawConfigProvider,
+  TldrawEditRenderer,
+  TldrawNode,
+  TldrawPlugin,
+  TldrawStaticRenderer as TldrawRenderer,
+  TldrawStaticRenderer,
+  useTldrawConfig
+};