@tangle-network/ui 11.4.0 → 11.6.0

package/dist/{chunk-NZLLDHEG.js → chunk-QGTIBEPX.js}

@@ -19,16 +19,12 @@ import { useEffect as useEffect5, useMemo as useMemo4, useState as useState3 } f
 import { PencilLine, Save, Users, Wifi, WifiOff } from "lucide-react";
 
 // src/editor/tiptap-editor.tsx
-import Collaboration from "@tiptap/extension-collaboration";
-import CollaborationCaret from "@tiptap/extension-collaboration-caret";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { Suspense as Suspense2, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 
 // src/editor/editor-provider.tsx
-import { HocuspocusProvider } from "@hocuspocus/provider";
 import {
   createContext,
+  Suspense,
   useCallback,
   useContext,
   useEffect,
@@ -36,7 +32,137 @@ import {
   useRef,
   useState
 } from "react";
-import * as Y from "yjs";
+
+// src/editor/editor-lazy.ts
+import { lazy } from "react";
+
+// src/editor/editor-peers.ts
+var DOCUMENT_PEERS_MISSING = "@tangle-network/ui/editor needs its optional editor peers. Install @tiptap/react and @tiptap/starter-kit.";
+var PROVIDER_PEERS_MISSING = "@tangle-network/ui/editor needs its optional collaboration transport peers. Install @hocuspocus/provider and yjs.";
+var COLLABORATION_PEERS_MISSING = "@tangle-network/ui/editor needs its optional collaboration peers. Install @tiptap/react, @tiptap/starter-kit, @tiptap/extension-collaboration, @tiptap/extension-collaboration-caret, @hocuspocus/provider and yjs.";
+var MissingEditorPeersError = class extends Error {
+  constructor(message, options) {
+    super(message, options);
+    this.name = "MissingEditorPeersError";
+  }
+};
+function isMissingEditorPeersError(error) {
+  return error instanceof Error && error.name === "MissingEditorPeersError";
+}
+var RESOLUTION_FAILURE = /could not resolve|cannot find (?:module|package)|can't resolve|failed to resolve|module not found/i;
+function isMissingPeerError(error) {
+  return error instanceof Error && RESOLUTION_FAILURE.test(error.message);
+}
+function rethrow(error) {
+  throw error;
+}
+var DEFERRED_PEERS = [
+  "@tiptap/core",
+  "@tiptap/react",
+  "@tiptap/starter-kit",
+  "@tiptap/extension-collaboration",
+  "@tiptap/extension-collaboration-caret",
+  "@hocuspocus/provider",
+  "yjs"
+];
+function unresolvedPeersFrom(error) {
+  if (!(error instanceof Error)) return [];
+  const named = DEFERRED_PEERS.filter((name) => error.message.includes(name));
+  return named.filter(
+    (name) => !named.some((other) => other !== name && other.includes(name))
+  );
+}
+function asMissingEditorPeersError(error, missingMessage) {
+  if (!isMissingPeerError(error)) return error;
+  const unresolved = unresolvedPeersFrom(error);
+  if (unresolved.length === 0) return error;
+  const detail = unresolved.length === 1 ? ` ${unresolved[0]} did not resolve.` : "";
+  return new MissingEditorPeersError(missingMessage + detail, { cause: error });
+}
+async function loadPeers(load, missingMessage) {
+  try {
+    return await load();
+  } catch (error) {
+    throw asMissingEditorPeersError(error, missingMessage);
+  }
+}
+function isConfigurableExtension(value) {
+  return typeof value?.configure === "function";
+}
+function assertDocumentEditorPeers(peers, missingMessage) {
+  if (typeof peers.react.useEditor !== "function" || peers.react.EditorContent === void 0 || !isConfigurableExtension(peers.starterKit.default)) {
+    throw new MissingEditorPeersError(missingMessage);
+  }
+}
+function assertEditorProviderPeers(peers, missingMessage) {
+  if (typeof peers.hocuspocus.HocuspocusProvider !== "function" || typeof peers.yjs.Doc !== "function") {
+    throw new MissingEditorPeersError(missingMessage);
+  }
+}
+function assertCollaborationPeers(peers) {
+  assertDocumentEditorPeers(peers, COLLABORATION_PEERS_MISSING);
+  assertEditorProviderPeers(peers, COLLABORATION_PEERS_MISSING);
+  if (!isConfigurableExtension(peers.collaboration.default) || !isConfigurableExtension(peers.collaborationCaret.default)) {
+    throw new MissingEditorPeersError(COLLABORATION_PEERS_MISSING);
+  }
+}
+async function importDocumentEditorPeers() {
+  const [react, starterKit] = await Promise.all([
+    import("@tiptap/react").catch(rethrow),
+    import("@tiptap/starter-kit").catch(rethrow)
+  ]);
+  return { react, starterKit };
+}
+async function importEditorProviderPeers() {
+  const [hocuspocus, yjs] = await Promise.all([
+    import("@hocuspocus/provider").catch(rethrow),
+    import("yjs").catch(rethrow)
+  ]);
+  return { hocuspocus, yjs };
+}
+async function loadEditorProviderPeers() {
+  const peers = await loadPeers(importEditorProviderPeers, PROVIDER_PEERS_MISSING);
+  assertEditorProviderPeers(peers, PROVIDER_PEERS_MISSING);
+  return peers;
+}
+async function loadDocumentEditorPeers() {
+  const peers = await loadPeers(importDocumentEditorPeers, DOCUMENT_PEERS_MISSING);
+  assertDocumentEditorPeers(peers, DOCUMENT_PEERS_MISSING);
+  return peers;
+}
+async function loadCollaborationPeers() {
+  const peers = await loadPeers(async () => {
+    const [documentPeers, providerPeers, collaboration, collaborationCaret] = await Promise.all([
+      importDocumentEditorPeers(),
+      importEditorProviderPeers(),
+      import("@tiptap/extension-collaboration").catch(rethrow),
+      import("@tiptap/extension-collaboration-caret").catch(rethrow)
+    ]);
+    return { ...documentPeers, ...providerPeers, collaboration, collaborationCaret };
+  }, COLLABORATION_PEERS_MISSING);
+  assertCollaborationPeers(peers);
+  return peers;
+}
+
+// src/editor/editor-lazy.ts
+function retryableLazyEditor(loadComponent) {
+  function build() {
+    return lazy(async () => {
+      try {
+        return { default: await loadComponent() };
+      } catch (error) {
+        if (!isMissingEditorPeersError(error)) {
+          current = build();
+        }
+        throw error;
+      }
+    });
+  }
+  let current = build();
+  return () => current;
+}
+
+// src/editor/editor-provider.tsx
 import { jsx } from "react/jsx-runtime";
 var EditorContext = createContext(null);
 function generateUserColor() {
@@ -64,225 +190,236 @@ function generateUserColor() {
   ];
   return colors[Math.floor(Math.random() * colors.length)];
 }
-function EditorProvider({
-  websocketUrl,
-  documentName,
-  token,
-  tokenExpiresAt,
-  user,
-  autoConnect = true,
-  autoReconnect = true,
-  maxReconnectAttempts = 5,
-  onConnectionChange,
-  onSync,
-  onAuthError,
-  onRefreshToken,
-  children
-}) {
-  const [connectionState, setConnectionState] = useState("disconnected");
-  const [collaborators, setCollaborators] = useState([]);
-  const [isSynced, setIsSynced] = useState(false);
-  const docRef = useRef(null);
-  const providerRef = useRef(null);
-  const reconnectAttemptsRef = useRef(0);
-  const tokenRef = useRef(token);
-  const tokenExpiryRef = useRef(tokenExpiresAt);
-  const refreshPromiseRef = useRef(null);
-  const refreshTimerRef = useRef(null);
-  tokenRef.current = token;
-  tokenExpiryRef.current = tokenExpiresAt;
-  if (!docRef.current) {
-    docRef.current = new Y.Doc();
-  }
-  const doc = docRef.current;
-  const userColor = useMemo(
-    () => user.color ?? generateUserColor(),
-    [user.color]
-  );
-  const updateConnectionState = useCallback(
-    (state) => {
-      setConnectionState(state);
-      onConnectionChange?.(state);
-    },
-    [onConnectionChange]
-  );
-  const updateCollaborators = useCallback(
-    (awareness) => {
-      if (!awareness) return;
-      const states = awareness.getStates();
-      const collabs = [];
-      states.forEach((state, clientId) => {
-        if (clientId === awareness.clientID) return;
-        if (state.user) {
-          collabs.push({
-            clientId,
-            user: state.user
-          });
-        }
-      });
-      setCollaborators(collabs);
-    },
-    []
-  );
-  const clearRefreshTimer = useCallback(() => {
-    if (refreshTimerRef.current != null) {
-      window.clearTimeout(refreshTimerRef.current);
-      refreshTimerRef.current = null;
-    }
-  }, []);
-  const refreshToken = useCallback(async () => {
-    if (!onRefreshToken) {
-      return null;
-    }
-    if (refreshPromiseRef.current) {
-      return refreshPromiseRef.current;
-    }
-    const refreshPromise = (async () => {
-      const next = await onRefreshToken();
-      const resolvedToken = typeof next === "string" ? next : next.token;
-      const resolvedExpiry = typeof next === "string" ? void 0 : next.expiresAt;
-      tokenRef.current = resolvedToken;
-      tokenExpiryRef.current = resolvedExpiry;
-      return resolvedToken;
-    })().catch((error) => {
-      onAuthError?.(
-        error instanceof Error ? error : new Error(String(error))
-      );
-      return null;
-    }).finally(() => {
-      refreshPromiseRef.current = null;
-    });
-    refreshPromiseRef.current = refreshPromise;
-    return refreshPromise;
-  }, [onAuthError, onRefreshToken]);
-  const scheduleTokenRefresh = useCallback(() => {
-    clearRefreshTimer();
-    if (!tokenExpiryRef.current || !onRefreshToken || typeof window === "undefined") {
-      return;
-    }
-    const refreshAtMs = tokenExpiryRef.current * 1e3 - 6e4;
-    const delay = refreshAtMs - Date.now();
-    if (delay <= 0) {
-      void refreshToken();
-      return;
-    }
-    refreshTimerRef.current = window.setTimeout(() => {
-      void refreshToken();
-    }, delay);
-  }, [clearRefreshTimer, onRefreshToken, refreshToken]);
-  const connect = useCallback(() => {
-    if (providerRef.current) {
-      providerRef.current.connect();
-      return;
-    }
-    updateConnectionState("connecting");
-    const provider = new HocuspocusProvider({
-      url: websocketUrl,
-      name: documentName,
-      document: doc,
-      token: async () => tokenRef.current,
-      onConnect: () => {
-        reconnectAttemptsRef.current = 0;
-        updateConnectionState("connected");
-        scheduleTokenRefresh();
-      },
-      onSynced: () => {
-        setIsSynced(true);
-        updateConnectionState("synced");
-        onSync?.();
-      },
-      onDisconnect: () => {
-        updateConnectionState("disconnected");
-        setIsSynced(false);
-        clearRefreshTimer();
-        if (autoReconnect && reconnectAttemptsRef.current < maxReconnectAttempts) {
-          reconnectAttemptsRef.current += 1;
-          const delay = Math.min(
-            1e3 * 2 ** reconnectAttemptsRef.current,
-            3e4
-          );
-          setTimeout(() => {
-            if (providerRef.current && !providerRef.current.isConnected) {
-              providerRef.current.connect();
-            }
-          }, delay);
-        }
-      },
-      onAuthenticationFailed: ({ reason }) => {
-        const error = new Error(reason ?? "Authentication failed");
-        updateConnectionState("disconnected");
-        clearRefreshTimer();
-        if (onRefreshToken) {
-          void refreshToken().then((nextToken) => {
-            if (nextToken && providerRef.current) {
-              providerRef.current.connect();
-              return;
-            }
-            onAuthError?.(error);
-          });
-          return;
-        }
-        onAuthError?.(error);
-      },
-      onAwarenessUpdate: () => {
-        updateCollaborators(provider.awareness);
-      }
-    });
-    provider.awareness?.setLocalStateField("user", {
-      name: user.name,
-      color: userColor,
-      userId: user.userId
-    });
-    providerRef.current = provider;
-  }, [
+function createEditorProvider(peers) {
+  const { Doc } = peers.yjs;
+  const { HocuspocusProvider } = peers.hocuspocus;
+  return function EditorProvider2({
     websocketUrl,
     documentName,
-    doc,
-    user.name,
-    user.userId,
-    userColor,
-    autoReconnect,
-    maxReconnectAttempts,
-    clearRefreshTimer,
-    updateConnectionState,
-    updateCollaborators,
+    token,
+    tokenExpiresAt,
+    user,
+    autoConnect = true,
+    autoReconnect = true,
+    maxReconnectAttempts = 5,
+    onConnectionChange,
     onSync,
     onAuthError,
     onRefreshToken,
-    refreshToken,
-    scheduleTokenRefresh
-  ]);
-  const disconnect = useCallback(() => {
-    if (providerRef.current) {
-      providerRef.current.disconnect();
-      updateConnectionState("disconnected");
-    }
-  }, [updateConnectionState]);
-  useEffect(() => {
-    if (autoConnect) {
-      connect();
+    children
+  }) {
+    const [connectionState, setConnectionState] = useState("disconnected");
+    const [collaborators, setCollaborators] = useState([]);
+    const [isSynced, setIsSynced] = useState(false);
+    const docRef = useRef(null);
+    const providerRef = useRef(null);
+    const reconnectAttemptsRef = useRef(0);
+    const tokenRef = useRef(token);
+    const tokenExpiryRef = useRef(tokenExpiresAt);
+    const refreshPromiseRef = useRef(null);
+    const refreshTimerRef = useRef(null);
+    tokenRef.current = token;
+    tokenExpiryRef.current = tokenExpiresAt;
+    if (!docRef.current) {
+      docRef.current = new Doc();
     }
-    return () => {
+    const doc = docRef.current;
+    const userColor = useMemo(
+      () => user.color ?? generateUserColor(),
+      [user.color]
+    );
+    const updateConnectionState = useCallback(
+      (state) => {
+        setConnectionState(state);
+        onConnectionChange?.(state);
+      },
+      [onConnectionChange]
+    );
+    const updateCollaborators = useCallback(
+      (awareness) => {
+        if (!awareness) return;
+        const states = awareness.getStates();
+        const collabs = [];
+        states.forEach((state, clientId) => {
+          if (clientId === awareness.clientID) return;
+          if (state.user) {
+            collabs.push({
+              clientId,
+              user: state.user
+            });
+          }
+        });
+        setCollaborators(collabs);
+      },
+      []
+    );
+    const clearRefreshTimer = useCallback(() => {
+      if (refreshTimerRef.current != null) {
+        window.clearTimeout(refreshTimerRef.current);
+        refreshTimerRef.current = null;
+      }
+    }, []);
+    const refreshToken = useCallback(async () => {
+      if (!onRefreshToken) {
+        return null;
+      }
+      if (refreshPromiseRef.current) {
+        return refreshPromiseRef.current;
+      }
+      const refreshPromise = (async () => {
+        const next = await onRefreshToken();
+        const resolvedToken = typeof next === "string" ? next : next.token;
+        const resolvedExpiry = typeof next === "string" ? void 0 : next.expiresAt;
+        tokenRef.current = resolvedToken;
+        tokenExpiryRef.current = resolvedExpiry;
+        return resolvedToken;
+      })().catch((error) => {
+        onAuthError?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+        return null;
+      }).finally(() => {
+        refreshPromiseRef.current = null;
+      });
+      refreshPromiseRef.current = refreshPromise;
+      return refreshPromise;
+    }, [onAuthError, onRefreshToken]);
+    const scheduleTokenRefresh = useCallback(() => {
       clearRefreshTimer();
+      if (!tokenExpiryRef.current || !onRefreshToken || typeof window === "undefined") {
+        return;
+      }
+      const refreshAtMs = tokenExpiryRef.current * 1e3 - 6e4;
+      const delay = refreshAtMs - Date.now();
+      if (delay <= 0) {
+        void refreshToken();
+        return;
+      }
+      refreshTimerRef.current = window.setTimeout(() => {
+        void refreshToken();
+      }, delay);
+    }, [clearRefreshTimer, onRefreshToken, refreshToken]);
+    const connect = useCallback(() => {
       if (providerRef.current) {
-        providerRef.current.destroy();
-        providerRef.current = null;
+        providerRef.current.connect();
+        return;
       }
-    };
-  }, [autoConnect, clearRefreshTimer, connect]);
-  const contextValue = useMemo(
-    () => ({
+      updateConnectionState("connecting");
+      const provider = new HocuspocusProvider({
+        url: websocketUrl,
+        name: documentName,
+        document: doc,
+        token: async () => tokenRef.current,
+        onConnect: () => {
+          reconnectAttemptsRef.current = 0;
+          updateConnectionState("connected");
+          scheduleTokenRefresh();
+        },
+        onSynced: () => {
+          setIsSynced(true);
+          updateConnectionState("synced");
+          onSync?.();
+        },
+        onDisconnect: () => {
+          updateConnectionState("disconnected");
+          setIsSynced(false);
+          clearRefreshTimer();
+          if (autoReconnect && reconnectAttemptsRef.current < maxReconnectAttempts) {
+            reconnectAttemptsRef.current += 1;
+            const delay = Math.min(
+              1e3 * 2 ** reconnectAttemptsRef.current,
+              3e4
+            );
+            setTimeout(() => {
+              if (providerRef.current && !providerRef.current.isConnected) {
+                providerRef.current.connect();
+              }
+            }, delay);
+          }
+        },
+        onAuthenticationFailed: ({ reason }) => {
+          const error = new Error(reason ?? "Authentication failed");
+          updateConnectionState("disconnected");
+          clearRefreshTimer();
+          if (onRefreshToken) {
+            void refreshToken().then((nextToken) => {
+              if (nextToken && providerRef.current) {
+                providerRef.current.connect();
+                return;
+              }
+              onAuthError?.(error);
+            });
+            return;
+          }
+          onAuthError?.(error);
+        },
+        onAwarenessUpdate: () => {
+          updateCollaborators(provider.awareness);
+        }
+      });
+      provider.awareness?.setLocalStateField("user", {
+        name: user.name,
+        color: userColor,
+        userId: user.userId
+      });
+      providerRef.current = provider;
+    }, [
+      websocketUrl,
+      documentName,
       doc,
-      provider: providerRef.current,
-      connectionState,
-      collaborators,
-      isSynced,
-      connect,
-      disconnect
-    }),
-    [doc, connectionState, collaborators, isSynced, connect, disconnect]
-  );
-  return /* @__PURE__ */ jsx(EditorContext.Provider, { value: contextValue, children });
+      user.name,
+      user.userId,
+      userColor,
+      autoReconnect,
+      maxReconnectAttempts,
+      clearRefreshTimer,
+      updateConnectionState,
+      updateCollaborators,
+      onSync,
+      onAuthError,
+      onRefreshToken,
+      refreshToken,
+      scheduleTokenRefresh
+    ]);
+    const disconnect = useCallback(() => {
+      if (providerRef.current) {
+        providerRef.current.disconnect();
+        updateConnectionState("disconnected");
+      }
+    }, [updateConnectionState]);
+    useEffect(() => {
+      if (autoConnect) {
+        connect();
+      }
+      return () => {
+        clearRefreshTimer();
+        if (providerRef.current) {
+          providerRef.current.destroy();
+          providerRef.current = null;
+        }
+      };
+    }, [autoConnect, clearRefreshTimer, connect]);
+    const contextValue = useMemo(
+      () => ({
+        doc,
+        provider: providerRef.current,
+        connectionState,
+        collaborators,
+        isSynced,
+        connect,
+        disconnect
+      }),
+      [doc, connectionState, collaborators, isSynced, connect, disconnect]
+    );
+    return /* @__PURE__ */ jsx(EditorContext.Provider, { value: contextValue, children });
+  };
+}
+var lazyEditorProvider = retryableLazyEditor(
+  async () => createEditorProvider(await loadEditorProviderPeers())
+);
+function EditorProvider(props) {
+  const LazyEditorProvider = lazyEditorProvider();
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyEditorProvider, { ...props }) });
 }
 function useEditorContext() {
   const context = useContext(EditorContext);
@@ -292,8 +429,25 @@ function useEditorContext() {
   return context;
 }
 
-// src/editor/editor-toolbar.tsx
+// src/editor/editor-loading.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+function EditorLoadingPlaceholder({ className }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: cn(
+        "flex w-full items-center justify-center rounded-lg border border-border border-dashed bg-muted text-muted-foreground text-sm",
+        className
+      ),
+      children: "Loading editor\u2026"
+    }
+  );
+}
+
+// src/editor/editor-toolbar.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 function EditorToolbar({
   editor,
   className
@@ -375,7 +529,7 @@ function EditorToolbar({
       isActive: editor.isActive("blockquote")
     }
   ];
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className: cn(
@@ -384,9 +538,9 @@ function EditorToolbar({
       ),
       children: buttons.map((button) => {
         if ("type" in button && button.type === "separator") {
-          return /* @__PURE__ */ jsx2("div", { className: "mx-1 h-6 w-px bg-border" }, button.id);
+          return /* @__PURE__ */ jsx3("div", { className: "mx-1 h-6 w-px bg-border" }, button.id);
         }
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx3(
           "button",
           {
             onClick: button.action,
@@ -407,7 +561,7 @@ function EditorToolbar({
 }
 
 // src/editor/tiptap-editor.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var cursorColors = {
   "#FF6B6B": { background: "#FF6B6B", text: "#FFFFFF" },
   "#4ECDC4": { background: "#4ECDC4", text: "#000000" },
@@ -423,107 +577,112 @@ var cursorColors = {
 function getCursorColors(color) {
   return cursorColors[color] ?? { background: color, text: "#FFFFFF" };
 }
-function TiptapEditor({
-  initialContent,
-  placeholder = "Start writing...",
-  readOnly = false,
-  autoFocus = false,
-  className,
-  contentClassName,
-  onUpdate,
-  onSelectionUpdate,
-  onReady
-}) {
-  const { doc, provider, connectionState } = useEditorContext();
-  const fragment = useMemo2(() => doc.getXmlFragment("prosemirror"), [doc]);
-  const extensions = useMemo2(() => {
-    const baseExtensions = [
-      StarterKit.configure({
-        // Disable history - Y.js handles undo/redo
-        ...{ history: false },
-        // Configure code block for syntax highlighting placeholder
-        codeBlock: {
-          HTMLAttributes: {
-            class: "hljs"
-          }
-        }
-      }),
-      Collaboration.configure({
-        fragment
-      })
-    ];
-    if (provider?.awareness) {
-      baseExtensions.push(
-        CollaborationCaret.configure({
-          provider,
-          user: provider.awareness.getLocalState()?.user ?? {
-            name: "Anonymous",
-            color: "#808080"
-          },
-          render: (user) => {
-            const { background, text } = getCursorColors(user.color);
-            const cursor = document.createElement("span");
-            cursor.className = "collaboration-cursor";
-            cursor.style.borderColor = background;
-            const label = document.createElement("span");
-            label.className = "collaboration-cursor-label";
-            label.style.backgroundColor = background;
-            label.style.color = text;
-            label.textContent = user.name;
-            cursor.appendChild(label);
-            return cursor;
+function createTiptapEditor(peers) {
+  const { EditorContent, useEditor } = peers.react;
+  const StarterKit = peers.starterKit.default;
+  const Collaboration = peers.collaboration.default;
+  const CollaborationCaret = peers.collaborationCaret.default;
+  return function TiptapEditor2({
+    initialContent,
+    placeholder = "Start writing...",
+    readOnly = false,
+    autoFocus = false,
+    className,
+    contentClassName,
+    onUpdate,
+    onSelectionUpdate,
+    onReady
+  }) {
+    const { doc, provider, connectionState } = useEditorContext();
+    const fragment = useMemo2(() => doc.getXmlFragment("prosemirror"), [doc]);
+    const extensions = useMemo2(() => {
+      const baseExtensions = [
+        StarterKit.configure({
+          // Disable history - Y.js handles undo/redo
+          ...{ history: false },
+          // Configure code block for syntax highlighting placeholder
+          codeBlock: {
+            HTMLAttributes: {
+              class: "hljs"
+            }
           }
+        }),
+        Collaboration.configure({
+          fragment
         })
-      );
-    }
-    return baseExtensions;
-  }, [fragment, provider]);
-  const editor = useEditor({
-    extensions,
-    editable: !readOnly,
-    autofocus: autoFocus,
-    editorProps: {
-      attributes: {
-        class: cn(
-          "prose prose-sm sm:prose-base dark:prose-invert max-w-none",
-          "focus:outline-none",
-          contentClassName
-        ),
-        "data-placeholder": placeholder
+      ];
+      if (provider?.awareness) {
+        baseExtensions.push(
+          CollaborationCaret.configure({
+            provider,
+            user: provider.awareness.getLocalState()?.user ?? {
+              name: "Anonymous",
+              color: "#808080"
+            },
+            render: (user) => {
+              const { background, text } = getCursorColors(user.color);
+              const cursor = document.createElement("span");
+              cursor.className = "collaboration-cursor";
+              cursor.style.borderColor = background;
+              const label = document.createElement("span");
+              label.className = "collaboration-cursor-label";
+              label.style.backgroundColor = background;
+              label.style.color = text;
+              label.textContent = user.name;
+              cursor.appendChild(label);
+              return cursor;
+            }
+          })
+        );
       }
-    },
-    onUpdate: ({ editor: ed }) => {
-      onUpdate?.(ed);
-    },
-    onSelectionUpdate: ({ editor: ed }) => {
-      onSelectionUpdate?.(ed);
-    },
-    onCreate: ({ editor: ed }) => {
-      onReady?.(ed);
-    }
-  });
-  useEffect2(() => {
-    if (editor) {
-      editor.setEditable(!readOnly);
-    }
-  }, [editor, readOnly]);
-  useEffect2(() => {
-    if (editor && initialContent && connectionState === "synced" && editor.isEmpty) {
-      editor.commands.setContent(initialContent);
-    }
-  }, [editor, initialContent, connectionState]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "relative min-h-[200px] w-full rounded-lg border border-border",
-        "bg-background",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx3("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx3(ConnectionIndicator, { state: connectionState }) }),
-        /* @__PURE__ */ jsx3("div", { className: "p-4 pt-10", children: /* @__PURE__ */ jsx3(EditorContent, { editor }) }),
-        /* @__PURE__ */ jsx3("style", { children: `
+      return baseExtensions;
+    }, [fragment, provider]);
+    const editor = useEditor({
+      extensions,
+      editable: !readOnly,
+      autofocus: autoFocus,
+      editorProps: {
+        attributes: {
+          class: cn(
+            "prose prose-sm sm:prose-base dark:prose-invert max-w-none",
+            "focus:outline-none",
+            contentClassName
+          ),
+          "data-placeholder": placeholder
+        }
+      },
+      onUpdate: ({ editor: ed }) => {
+        onUpdate?.(ed);
+      },
+      onSelectionUpdate: ({ editor: ed }) => {
+        onSelectionUpdate?.(ed);
+      },
+      onCreate: ({ editor: ed }) => {
+        onReady?.(ed);
+      }
+    });
+    useEffect2(() => {
+      if (editor) {
+        editor.setEditable(!readOnly);
+      }
+    }, [editor, readOnly]);
+    useEffect2(() => {
+      if (editor && initialContent && connectionState === "synced" && editor.isEmpty) {
+        editor.commands.setContent(initialContent);
+      }
+    }, [editor, initialContent, connectionState]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-[200px] w-full rounded-lg border border-border",
+          "bg-background",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx4(ConnectionIndicator, { state: connectionState }) }),
+          /* @__PURE__ */ jsx4("div", { className: "p-4 pt-10", children: /* @__PURE__ */ jsx4(EditorContent, { editor }) }),
+          /* @__PURE__ */ jsx4("style", { children: `
         .ProseMirror p.is-editor-empty:first-child::before {
           content: attr(data-placeholder);
           float: left;
@@ -586,7 +745,21 @@ function TiptapEditor({
           font-size: inherit;
         }
       ` })
-      ]
+        ]
+      }
+    );
+  };
+}
+var lazyTiptapEditor = retryableLazyEditor(
+  async () => createTiptapEditor(await loadCollaborationPeers())
+);
+function TiptapEditor(props) {
+  const LazyTiptapEditor = lazyTiptapEditor();
+  return /* @__PURE__ */ jsx4(
+    Suspense2,
+    {
+      fallback: /* @__PURE__ */ jsx4(EditorLoadingPlaceholder, { className: cn("min-h-[200px]", props.className) }),
+      children: /* @__PURE__ */ jsx4(LazyTiptapEditor, { ...props })
     }
   );
 }
@@ -612,8 +785,8 @@ function ConnectionIndicator({
     }
   }[state];
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground text-xs", children: [
-    /* @__PURE__ */ jsx3("span", { className: cn("h-2 w-2 rounded-full", config.color) }),
-    /* @__PURE__ */ jsx3("span", { children: config.label })
+    /* @__PURE__ */ jsx4("span", { className: cn("h-2 w-2 rounded-full", config.color) }),
+    /* @__PURE__ */ jsx4("span", { children: config.label })
   ] });
 }
 function CollaboratorsList({
@@ -624,7 +797,7 @@ function CollaboratorsList({
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", className), children: [
-    collaborators.slice(0, 5).map((collab) => /* @__PURE__ */ jsx3(
+    collaborators.slice(0, 5).map((collab) => /* @__PURE__ */ jsx4(
       "div",
       {
         className: "flex h-6 w-6 items-center justify-center rounded-full font-medium text-xs",
@@ -642,9 +815,7 @@ function CollaboratorsList({
 }
 
 // src/editor/markdown-document-editor.tsx
-import { EditorContent as EditorContent2, useEditor as useEditor2 } from "@tiptap/react";
-import StarterKit2 from "@tiptap/starter-kit";
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
+import { Suspense as Suspense3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
 
 // src/editor/markdown-conversion.ts
 import { marked } from "marked";
@@ -666,85 +837,88 @@ function normalizeMarkdown(markdown) {
 }
 
 // src/editor/markdown-document-editor.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function MarkdownDocumentEditor({
-  value = "",
-  placeholder = "Start writing...",
-  readOnly = false,
-  autoFocus = false,
-  className,
-  contentClassName,
-  onChange,
-  onReady
-}) {
-  const initialHtml = useMemo3(() => markdownToHtml(value), []);
-  const lastAppliedMarkdownRef = useRef2(normalizeMarkdown(value));
-  const editor = useEditor2({
-    extensions: [
-      StarterKit2.configure({
-        codeBlock: {
-          HTMLAttributes: {
-            class: "hljs"
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function createMarkdownDocumentEditor(peers) {
+  const { EditorContent, useEditor } = peers.react;
+  const StarterKit = peers.starterKit.default;
+  return function MarkdownDocumentEditor2({
+    value = "",
+    placeholder = "Start writing...",
+    readOnly = false,
+    autoFocus = false,
+    className,
+    contentClassName,
+    onChange,
+    onReady
+  }) {
+    const initialHtml = useMemo3(() => markdownToHtml(value), []);
+    const lastAppliedMarkdownRef = useRef2(normalizeMarkdown(value));
+    const editor = useEditor({
+      extensions: [
+        StarterKit.configure({
+          codeBlock: {
+            HTMLAttributes: {
+              class: "hljs"
+            }
           }
+        })
+      ],
+      content: initialHtml,
+      editable: !readOnly,
+      autofocus: autoFocus,
+      editorProps: {
+        attributes: {
+          class: cn(
+            "prose prose-sm sm:prose-base max-w-none focus:outline-none",
+            "prose-headings:text-foreground prose-p:text-foreground prose-li:text-foreground",
+            "prose-strong:text-foreground prose-code:text-foreground prose-pre:text-foreground",
+            contentClassName
+          ),
+          "data-placeholder": placeholder
         }
-      })
-    ],
-    content: initialHtml,
-    editable: !readOnly,
-    autofocus: autoFocus,
-    editorProps: {
-      attributes: {
-        class: cn(
-          "prose prose-sm sm:prose-base max-w-none focus:outline-none",
-          "prose-headings:text-foreground prose-p:text-foreground prose-li:text-foreground",
-          "prose-strong:text-foreground prose-code:text-foreground prose-pre:text-foreground",
-          contentClassName
-        ),
-        "data-placeholder": placeholder
+      },
+      onUpdate: ({ editor: currentEditor }) => {
+        const nextMarkdown = normalizeMarkdown(htmlToMarkdown(currentEditor.getHTML()));
+        lastAppliedMarkdownRef.current = nextMarkdown;
+        onChange?.(nextMarkdown, currentEditor);
+      },
+      onCreate: ({ editor: currentEditor }) => {
+        onReady?.(currentEditor);
       }
-    },
-    onUpdate: ({ editor: currentEditor }) => {
-      const nextMarkdown = normalizeMarkdown(htmlToMarkdown(currentEditor.getHTML()));
-      lastAppliedMarkdownRef.current = nextMarkdown;
-      onChange?.(nextMarkdown, currentEditor);
-    },
-    onCreate: ({ editor: currentEditor }) => {
-      onReady?.(currentEditor);
-    }
-  });
-  useEffect3(() => {
-    if (editor) {
-      editor.setEditable(!readOnly);
-    }
-  }, [editor, readOnly]);
-  useEffect3(() => {
-    if (!editor) {
-      return;
-    }
-    const normalizedValue = normalizeMarkdown(value);
-    if (normalizedValue === lastAppliedMarkdownRef.current) {
-      return;
-    }
-    editor.commands.setContent(markdownToHtml(value), { emitUpdate: false });
-    lastAppliedMarkdownRef.current = normalizedValue;
-  }, [editor, value]);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn(
-        "flex min-h-[14rem] w-full flex-col overflow-hidden rounded-lg border border-border bg-background",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx4(
-          EditorToolbar,
-          {
-            editor,
-            className: "border-border bg-card px-2 py-2"
-          }
+    });
+    useEffect3(() => {
+      if (editor) {
+        editor.setEditable(!readOnly);
+      }
+    }, [editor, readOnly]);
+    useEffect3(() => {
+      if (!editor) {
+        return;
+      }
+      const normalizedValue = normalizeMarkdown(value);
+      if (normalizedValue === lastAppliedMarkdownRef.current) {
+        return;
+      }
+      editor.commands.setContent(markdownToHtml(value), { emitUpdate: false });
+      lastAppliedMarkdownRef.current = normalizedValue;
+    }, [editor, value]);
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "flex min-h-[14rem] w-full flex-col overflow-hidden rounded-lg border border-border bg-background",
+          className
         ),
-        /* @__PURE__ */ jsx4("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-4", children: /* @__PURE__ */ jsx4(EditorContent2, { editor }) }),
-        /* @__PURE__ */ jsx4("style", { children: `
+        children: [
+          /* @__PURE__ */ jsx5(
+            EditorToolbar,
+            {
+              editor,
+              className: "border-border bg-card px-2 py-2"
+            }
+          ),
+          /* @__PURE__ */ jsx5("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-4", children: /* @__PURE__ */ jsx5(EditorContent, { editor }) }),
+          /* @__PURE__ */ jsx5("style", { children: `
         .ProseMirror p.is-editor-empty:first-child::before {
           content: attr(data-placeholder);
           float: left;
@@ -772,7 +946,21 @@ function MarkdownDocumentEditor({
           padding: 0;
         }
       ` })
-      ]
+        ]
+      }
+    );
+  };
+}
+var lazyMarkdownDocumentEditor = retryableLazyEditor(
+  async () => createMarkdownDocumentEditor(await loadDocumentEditorPeers())
+);
+function MarkdownDocumentEditor(props) {
+  const LazyMarkdownDocumentEditor = lazyMarkdownDocumentEditor();
+  return /* @__PURE__ */ jsx5(
+    Suspense3,
+    {
+      fallback: /* @__PURE__ */ jsx5(EditorLoadingPlaceholder, { className: cn("min-h-[14rem]", props.className) }),
+      children: /* @__PURE__ */ jsx5(LazyMarkdownDocumentEditor, { ...props })
     }
   );
 }
@@ -926,7 +1114,7 @@ function useAwareness() {
 }
 
 // src/editor/document-editor-pane.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function connectionTone(state) {
   switch (state) {
     case "synced":
@@ -991,21 +1179,21 @@ function CollaborativeDocumentSurface({
                 connectionTone(state)
               ),
               children: [
-                state === "disconnected" ? /* @__PURE__ */ jsx5(WifiOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx5(Wifi, { className: "h-3.5 w-3.5" }),
+                state === "disconnected" ? /* @__PURE__ */ jsx6(WifiOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx6(Wifi, { className: "h-3.5 w-3.5" }),
                 connectionLabel(state)
               ]
             }
           ),
           /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1", children: [
-            /* @__PURE__ */ jsx5(Users, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx6(Users, { className: "h-3.5 w-3.5" }),
             collaborators.length === 0 ? "Solo editing" : `${collaboratorCount} active`
           ] })
         ] }),
-        /* @__PURE__ */ jsx5("p", { className: "text-xs text-muted-foreground", children: connectionDescription(state, collaborators.length, readOnly) })
+        /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground", children: connectionDescription(state, collaborators.length, readOnly) })
       ] }),
-      /* @__PURE__ */ jsx5(CollaboratorsList, { collaborators })
+      /* @__PURE__ */ jsx6(CollaboratorsList, { collaborators })
     ] }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       TiptapEditor,
       {
         initialContent,
@@ -1080,7 +1268,7 @@ function DocumentEditorPane({
         variant: "underline",
         className: "h-auto gap-4 border-0 bg-transparent p-0 text-muted-foreground",
         children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             TabsTrigger,
             {
               value: "preview",
@@ -1096,7 +1284,7 @@ function DocumentEditorPane({
               variant: "underline",
               className: "flex items-center gap-2 pb-2 data-[state=active]:border-primary data-[state=active]:text-foreground",
               children: [
-                /* @__PURE__ */ jsx5(PencilLine, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx6(PencilLine, { className: "h-3.5 w-3.5" }),
                 isCollaborative ? "Live edit" : "Edit"
               ]
             }
@@ -1106,8 +1294,8 @@ function DocumentEditorPane({
     ),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
       toolbar,
-      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-border bg-card px-2.5 py-1 font-medium", children: isCollaborative ? "Live document" : "Local draft" }),
-      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-border bg-background px-2.5 py-1", children: saveStateLabel }),
+      /* @__PURE__ */ jsx6("span", { className: "rounded-full border border-border bg-card px-2.5 py-1 font-medium", children: isCollaborative ? "Live document" : "Local draft" }),
+      /* @__PURE__ */ jsx6("span", { className: "rounded-full border border-border bg-background px-2.5 py-1", children: saveStateLabel }),
       onSave && !readOnly && /* @__PURE__ */ jsxs3(
         "button",
         {
@@ -1116,14 +1304,14 @@ function DocumentEditorPane({
           disabled: saving || !isDirty,
           className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:border-primary/40 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
           children: [
-            /* @__PURE__ */ jsx5(Save, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx6(Save, { className: "h-3.5 w-3.5" }),
             saving ? "Saving..." : saveLabel
           ]
         }
       )
     ] })
   ] });
-  const preview = /* @__PURE__ */ jsx5(
+  const preview = /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn(
@@ -1133,10 +1321,10 @@ function DocumentEditorPane({
         "m-4 rounded-[var(--radius-lg)] border border-border bg-card p-5",
         previewClassName
       ),
-      children: /* @__PURE__ */ jsx5(Markdown, { children: draft })
+      children: /* @__PURE__ */ jsx6(Markdown, { children: draft })
     }
   );
-  const localEditor = /* @__PURE__ */ jsx5(
+  const localEditor = /* @__PURE__ */ jsx6(
     MarkdownDocumentEditor,
     {
       value: draft,
@@ -1149,7 +1337,7 @@ function DocumentEditorPane({
       className: editorClassName
     }
   );
-  const collaborativeEditor = collaboration ? /* @__PURE__ */ jsx5(EditorProvider, { ...collaboration, children: /* @__PURE__ */ jsx5(
+  const collaborativeEditor = collaboration ? /* @__PURE__ */ jsx6(EditorProvider, { ...collaboration, children: /* @__PURE__ */ jsx6(
     CollaborativeDocumentSurface,
     {
       markdown: draft,
@@ -1160,7 +1348,7 @@ function DocumentEditorPane({
       onChange: handleChange
     }
   ) }, collaboration.documentName) : localEditor;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     Tabs,
     {
       value: activeMode,
@@ -1182,8 +1370,8 @@ function DocumentEditorPane({
           toolbar: editorToolbar,
           hideTitleBlock,
           children: [
-            /* @__PURE__ */ jsx5(TabsContent, { value: "preview", className: "mt-0 h-full", children: preview }),
-            /* @__PURE__ */ jsx5(TabsContent, { value: "edit", className: "mt-0 h-full px-4 py-4", children: isCollaborative ? collaborativeEditor : localEditor })
+            /* @__PURE__ */ jsx6(TabsContent, { value: "preview", className: "mt-0 h-full", children: preview }),
+            /* @__PURE__ */ jsx6(TabsContent, { value: "edit", className: "mt-0 h-full px-4 py-4", children: isCollaborative ? collaborativeEditor : localEditor })
           ]
         }
       )