@tangle-network/ui 11.10.0 → 11.11.0

package/dist/chunk-K5XFRUS4.js

@@ -1,1401 +0,0 @@
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger
-} from "./chunk-R7SUY4E3.js";
-import {
-  ArtifactPane
-} from "./chunk-LTEKI7YJ.js";
-import {
-  Markdown
-} from "./chunk-OL5GYLHV.js";
-import {
-  focusRing
-} from "./chunk-WKWBTL2V.js";
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-
-// src/editor/document-editor-pane.tsx
-import { useEffect as useEffect5, useMemo as useMemo4, useState as useState3 } from "react";
-import { PencilLine, Save, Users, Wifi, WifiOff } from "lucide-react";
-
-// src/editor/tiptap-editor.tsx
-import { Suspense as Suspense2, useEffect as useEffect2, useMemo as useMemo2 } from "react";
-
-// src/editor/editor-provider.tsx
-import {
-  createContext,
-  Suspense,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-
-// 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() {
-  const colors = [
-    "#FF6B6B",
-    // Red
-    "#4ECDC4",
-    // Teal
-    "#45B7D1",
-    // Blue
-    "#96CEB4",
-    // Green
-    "#FFEAA7",
-    // Yellow
-    "#DDA0DD",
-    // Plum
-    "#98D8C8",
-    // Mint
-    "#F7DC6F",
-    // Gold
-    "#BB8FCE",
-    // Purple
-    "#85C1E9"
-    // Sky
-  ];
-  return colors[Math.floor(Math.random() * colors.length)];
-}
-function createEditorProvider(peers) {
-  const { Doc } = peers.yjs;
-  const { HocuspocusProvider } = peers.hocuspocus;
-  return function EditorProvider2({
-    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 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;
-    }, [
-      websocketUrl,
-      documentName,
-      doc,
-      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);
-  if (!context) {
-    throw new Error("useEditorContext must be used within an EditorProvider");
-  }
-  return context;
-}
-
-// 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
-}) {
-  if (!editor) {
-    return null;
-  }
-  const buttons = [
-    {
-      id: "bold",
-      label: "Bold",
-      action: () => editor.chain().focus().toggleBold().run(),
-      isActive: editor.isActive("bold"),
-      shortcut: "Ctrl+B"
-    },
-    {
-      id: "italic",
-      label: "Italic",
-      action: () => editor.chain().focus().toggleItalic().run(),
-      isActive: editor.isActive("italic"),
-      shortcut: "Ctrl+I"
-    },
-    {
-      id: "strike",
-      label: "Strike",
-      action: () => editor.chain().focus().toggleStrike().run(),
-      isActive: editor.isActive("strike"),
-      shortcut: "Ctrl+Shift+X"
-    },
-    {
-      id: "code",
-      label: "Code",
-      action: () => editor.chain().focus().toggleCode().run(),
-      isActive: editor.isActive("code"),
-      shortcut: "Ctrl+E"
-    },
-    { id: "sep-1", type: "separator" },
-    {
-      id: "h1",
-      label: "H1",
-      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: editor.isActive("heading", { level: 1 })
-    },
-    {
-      id: "h2",
-      label: "H2",
-      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: editor.isActive("heading", { level: 2 })
-    },
-    {
-      id: "h3",
-      label: "H3",
-      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: editor.isActive("heading", { level: 3 })
-    },
-    { id: "sep-2", type: "separator" },
-    {
-      id: "bullet-list",
-      label: "Bullet List",
-      action: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: editor.isActive("bulletList")
-    },
-    {
-      id: "ordered-list",
-      label: "Ordered List",
-      action: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: editor.isActive("orderedList")
-    },
-    {
-      id: "code-block",
-      label: "Code Block",
-      action: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: editor.isActive("codeBlock")
-    },
-    {
-      id: "blockquote",
-      label: "Blockquote",
-      action: () => editor.chain().focus().toggleBlockquote().run(),
-      isActive: editor.isActive("blockquote")
-    }
-  ];
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-1 border-border border-b bg-card p-2",
-        className
-      ),
-      children: buttons.map((button) => {
-        if ("type" in button && button.type === "separator") {
-          return /* @__PURE__ */ jsx3("div", { className: "mx-1 h-6 w-px bg-border" }, button.id);
-        }
-        return /* @__PURE__ */ jsx3(
-          "button",
-          {
-            onClick: button.action,
-            type: "button",
-            title: "shortcut" in button ? `${button.label} (${button.shortcut})` : button.label,
-            className: cn(
-              "rounded px-2 py-1 font-medium text-xs transition-colors",
-              "hover:bg-accent hover:text-accent-foreground",
-              button.isActive && "bg-accent text-accent-foreground"
-            ),
-            children: button.label
-          },
-          button.id
-        );
-      })
-    }
-  );
-}
-
-// src/editor/tiptap-editor.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var cursorColors = {
-  "#FF6B6B": { background: "#FF6B6B", text: "#FFFFFF" },
-  "#4ECDC4": { background: "#4ECDC4", text: "#000000" },
-  "#45B7D1": { background: "#45B7D1", text: "#000000" },
-  "#96CEB4": { background: "#96CEB4", text: "#000000" },
-  "#FFEAA7": { background: "#FFEAA7", text: "#000000" },
-  "#DDA0DD": { background: "#DDA0DD", text: "#000000" },
-  "#98D8C8": { background: "#98D8C8", text: "#000000" },
-  "#F7DC6F": { background: "#F7DC6F", text: "#000000" },
-  "#BB8FCE": { background: "#BB8FCE", text: "#000000" },
-  "#85C1E9": { background: "#85C1E9", text: "#000000" }
-};
-function getCursorColors(color) {
-  return cursorColors[color] ?? { background: color, text: "#FFFFFF" };
-}
-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
-        })
-      ];
-      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;
-            }
-          })
-        );
-      }
-      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;
-          color: var(--muted-foreground, #999);
-          pointer-events: none;
-          height: 0;
-        }
-
-        .collaboration-cursor {
-          position: relative;
-          border-left: 2px solid;
-          margin-left: -1px;
-          margin-right: -1px;
-          pointer-events: none;
-          word-break: normal;
-        }
-
-        .collaboration-cursor-label {
-          position: absolute;
-          top: -1.4em;
-          left: -1px;
-          font-size: 12px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: normal;
-          padding: 2px 6px;
-          border-radius: 4px 4px 4px 0;
-          white-space: nowrap;
-          user-select: none;
-        }
-
-        .ProseMirror pre {
-          background: var(--muted, #f4f4f5);
-          border-radius: 0.375rem;
-          padding: 0.75rem 1rem;
-          font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-          font-size: 0.875rem;
-          overflow-x: auto;
-        }
-
-        .dark .ProseMirror pre {
-          background: var(--muted, #27272a);
-        }
-
-        .ProseMirror code {
-          background: var(--muted, #f4f4f5);
-          border-radius: 0.25rem;
-          padding: 0.125rem 0.25rem;
-          font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-          font-size: 0.875em;
-        }
-
-        .dark .ProseMirror code {
-          background: var(--muted, #27272a);
-        }
-
-        .ProseMirror pre code {
-          background: transparent;
-          padding: 0;
-          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 })
-    }
-  );
-}
-function ConnectionIndicator({
-  state
-}) {
-  const config = {
-    disconnected: {
-      color: "bg-red-500",
-      label: "Disconnected"
-    },
-    connecting: {
-      color: "bg-yellow-500 animate-pulse",
-      label: "Connecting..."
-    },
-    connected: {
-      color: "bg-blue-500",
-      label: "Connected"
-    },
-    synced: {
-      color: "bg-green-500",
-      label: "Synced"
-    }
-  }[state];
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground text-xs", children: [
-    /* @__PURE__ */ jsx4("span", { className: cn("h-2 w-2 rounded-full", config.color) }),
-    /* @__PURE__ */ jsx4("span", { children: config.label })
-  ] });
-}
-function CollaboratorsList({
-  collaborators,
-  className
-}) {
-  if (collaborators.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", className), children: [
-    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",
-        style: { backgroundColor: collab.user.color },
-        title: collab.user.name,
-        children: collab.user.name.charAt(0).toUpperCase()
-      },
-      collab.clientId
-    )),
-    collaborators.length > 5 && /* @__PURE__ */ jsxs("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-muted font-medium text-xs", children: [
-      "+",
-      collaborators.length - 5
-    ] })
-  ] });
-}
-
-// src/editor/markdown-document-editor.tsx
-import { Suspense as Suspense3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
-
-// src/editor/markdown-conversion.ts
-import { marked } from "marked";
-import TurndownService from "turndown";
-var turndown = new TurndownService({
-  bulletListMarker: "-",
-  codeBlockStyle: "fenced",
-  emDelimiter: "*",
-  headingStyle: "atx"
-});
-function markdownToHtml(markdown) {
-  return String(marked.parse(markdown, { async: false, gfm: true }));
-}
-function htmlToMarkdown(html) {
-  return turndown.turndown(html);
-}
-function normalizeMarkdown(markdown) {
-  return markdown.replace(/\r\n/g, "\n").trimEnd();
-}
-
-// src/editor/markdown-document-editor.tsx
-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
-        }
-      },
-      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__ */ 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;
-          color: hsl(var(--muted-foreground));
-          pointer-events: none;
-          height: 0;
-        }
-
-        .ProseMirror pre {
-          background: hsl(var(--muted));
-          border: 1px solid hsl(var(--border));
-          border-radius: 0.75rem;
-          padding: 0.875rem 1rem;
-          overflow-x: auto;
-        }
-
-        .ProseMirror code {
-          background: hsl(var(--muted));
-          border-radius: 0.35rem;
-          padding: 0.12rem 0.3rem;
-        }
-
-        .ProseMirror pre code {
-          background: transparent;
-          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 })
-    }
-  );
-}
-
-// src/editor/use-editor.ts
-import { useCallback as useCallback2, useEffect as useEffect4, useState as useState2 } from "react";
-function useEditorConnection() {
-  const { connectionState, isSynced, connect, disconnect } = useEditorContext();
-  const isConnected = connectionState === "connected" || connectionState === "synced";
-  const isConnecting = connectionState === "connecting";
-  const isDisconnected = connectionState === "disconnected";
-  return {
-    /** Current connection state string */
-    state: connectionState,
-    /** Whether connected to the server (connected or synced) */
-    isConnected,
-    /** Whether currently attempting to connect */
-    isConnecting,
-    /** Whether disconnected from the server */
-    isDisconnected,
-    /** Whether the document is synced with the server */
-    isSynced,
-    /** Connect to the collaboration server */
-    connect,
-    /** Disconnect from the collaboration server */
-    disconnect
-  };
-}
-function useCollaborators() {
-  const { collaborators } = useEditorContext();
-  const count = collaborators.length;
-  const hasOthers = count > 0;
-  return {
-    /** List of active collaborators (excluding self) */
-    collaborators,
-    /** Number of other collaborators */
-    count,
-    /** Whether there are other collaborators present */
-    hasOthers
-  };
-}
-function useCollaboratorPresence(userId) {
-  const { collaborators } = useEditorContext();
-  return collaborators.find((c) => c.user.userId === userId) ?? null;
-}
-function useYjsState(key, initialValue) {
-  const { doc } = useEditorContext();
-  const [value, setLocalValue] = useState2(initialValue);
-  const metaMap = doc.getMap("metadata");
-  useEffect4(() => {
-    const updateValue = () => {
-      const stored = metaMap.get(key);
-      if (stored !== void 0) {
-        setLocalValue(stored);
-      }
-    };
-    updateValue();
-    metaMap.observe(updateValue);
-    return () => {
-      metaMap.unobserve(updateValue);
-    };
-  }, [metaMap, key]);
-  const setValue = useCallback2(
-    (newValue) => {
-      doc.transact(() => {
-        metaMap.set(key, newValue);
-      });
-    },
-    [doc, metaMap, key]
-  );
-  return [value, setValue];
-}
-function useDocumentChanges(onSave) {
-  const { doc } = useEditorContext();
-  const [isDirty, setIsDirty] = useState2(false);
-  const [isSaving, setIsSaving] = useState2(false);
-  const [lastSaved, setLastSaved] = useState2(null);
-  useEffect4(() => {
-    const handleUpdate = () => {
-      setIsDirty(true);
-    };
-    doc.on("update", handleUpdate);
-    return () => {
-      doc.off("update", handleUpdate);
-    };
-  }, [doc]);
-  const save = useCallback2(async () => {
-    if (!onSave || isSaving) return;
-    setIsSaving(true);
-    try {
-      await onSave();
-      setIsDirty(false);
-      setLastSaved(/* @__PURE__ */ new Date());
-    } finally {
-      setIsSaving(false);
-    }
-  }, [onSave, isSaving]);
-  return {
-    /** Whether there are unsaved changes */
-    isDirty,
-    /** Whether save is in progress */
-    isSaving,
-    /** When the document was last saved */
-    lastSaved,
-    /** Save the document */
-    save
-  };
-}
-function useAwareness() {
-  const { provider } = useEditorContext();
-  const [localState, setLocalStateValue] = useState2(
-    {}
-  );
-  const awareness = provider?.awareness;
-  useEffect4(() => {
-    if (!awareness) return;
-    const updateState = () => {
-      setLocalStateValue(awareness.getLocalState() ?? {});
-    };
-    updateState();
-    awareness.on("change", updateState);
-    return () => {
-      awareness.off("change", updateState);
-    };
-  }, [awareness]);
-  const setLocalState = useCallback2(
-    (state) => {
-      if (!awareness) return;
-      const current = awareness.getLocalState() ?? {};
-      awareness.setLocalState({ ...current, ...state });
-    },
-    [awareness]
-  );
-  const setLocalStateField = useCallback2(
-    (field, value) => {
-      if (!awareness) return;
-      awareness.setLocalStateField(field, value);
-    },
-    [awareness]
-  );
-  return {
-    /** Current local awareness state */
-    localState,
-    /** Set the entire local state (merges with existing) */
-    setLocalState,
-    /** Set a single field in the local state */
-    setLocalStateField,
-    /** The raw awareness instance */
-    awareness
-  };
-}
-
-// src/editor/document-editor-pane.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function connectionTone(state) {
-  switch (state) {
-    case "synced":
-      return "text-[var(--surface-success-text)] border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]";
-    case "connected":
-    case "connecting":
-      return "text-[var(--surface-info-text)] border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]";
-    case "disconnected":
-    default:
-      return "text-[var(--surface-warning-text)] border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]";
-  }
-}
-function connectionLabel(state) {
-  switch (state) {
-    case "synced":
-      return "Live synced";
-    case "connected":
-      return "Connected";
-    case "connecting":
-      return "Connecting";
-    case "disconnected":
-    default:
-      return "Offline";
-  }
-}
-function connectionDescription(state, collaborators, readOnly) {
-  if (readOnly) {
-    return state === "disconnected" ? "Live access is paused. You can keep reading while the editor reconnects." : "You are viewing the live document in read-only mode.";
-  }
-  switch (state) {
-    case "synced":
-      return collaborators > 0 ? `You and ${collaborators} collaborator${collaborators === 1 ? "" : "s"} are editing the same document.` : "You are editing the live document. Changes sync automatically.";
-    case "connected":
-    case "connecting":
-      return "Connecting the live document. Local edits stay in place while sync catches up.";
-    case "disconnected":
-    default:
-      return "Live updates are paused. You can keep editing and reconnect when the transport is healthy again.";
-  }
-}
-function CollaborativeDocumentSurface({
-  markdown,
-  placeholder,
-  autoFocus,
-  readOnly,
-  className,
-  onChange
-}) {
-  const { state } = useEditorConnection();
-  const { collaborators } = useCollaborators();
-  const initialContent = useMemo4(() => markdownToHtml(markdown), [markdown]);
-  const collaboratorCount = collaborators.length + 1;
-  return /* @__PURE__ */ jsxs3("div", { className: cn("flex h-full min-h-0 flex-col gap-3", className), children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-lg)] border border-border bg-card px-3 py-2", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 space-y-2", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs3(
-            "span",
-            {
-              className: cn(
-                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-medium",
-                connectionTone(state)
-              ),
-              children: [
-                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__ */ jsx6(Users, { className: "h-3.5 w-3.5" }),
-            collaborators.length === 0 ? "Solo editing" : `${collaboratorCount} active`
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground", children: connectionDescription(state, collaborators.length, readOnly) })
-      ] }),
-      /* @__PURE__ */ jsx6(CollaboratorsList, { collaborators })
-    ] }),
-    /* @__PURE__ */ jsx6(
-      TiptapEditor,
-      {
-        initialContent,
-        placeholder,
-        autoFocus,
-        readOnly,
-        className: cn("h-full min-h-[16rem]", className),
-        onUpdate: (editor) => {
-          onChange?.(normalizeMarkdown(htmlToMarkdown(editor.getHTML())));
-        }
-      }
-    )
-  ] });
-}
-function DocumentEditorPane({
-  eyebrow,
-  title,
-  subtitle,
-  meta,
-  headerActions,
-  footer,
-  className,
-  contentClassName,
-  headerClassName,
-  hideTitleBlock,
-  tabs,
-  toolbar,
-  markdown = "",
-  mode,
-  defaultMode = "preview",
-  onModeChange,
-  backend = "local",
-  placeholder = "Start writing...",
-  autoFocus = false,
-  readOnly = false,
-  onChange,
-  onSave,
-  saving = false,
-  saveLabel = "Save changes",
-  previewClassName,
-  editorClassName,
-  collaboration
-}) {
-  const [draft, setDraft] = useState3(markdown);
-  const [uncontrolledMode, setUncontrolledMode] = useState3(defaultMode);
-  const activeMode = mode ?? uncontrolledMode;
-  const isCollaborative = backend === "collaborative" && Boolean(collaboration);
-  const isDirty = normalizeMarkdown(draft) !== normalizeMarkdown(markdown);
-  const saveStateLabel = readOnly ? "Read only" : isCollaborative ? isDirty ? "Snapshot pending" : "Live document current" : isDirty ? "Unsaved changes" : "Saved";
-  useEffect5(() => {
-    setDraft(markdown);
-  }, [markdown]);
-  useEffect5(() => {
-    if (mode === void 0) {
-      setUncontrolledMode(defaultMode);
-    }
-  }, [defaultMode, mode]);
-  const setMode = (nextMode) => {
-    if (mode === void 0) {
-      setUncontrolledMode(nextMode);
-    }
-    onModeChange?.(nextMode);
-  };
-  const handleChange = (nextMarkdown) => {
-    setDraft(nextMarkdown);
-    onChange?.(nextMarkdown);
-  };
-  const editorToolbar = /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-    /* @__PURE__ */ jsxs3(
-      TabsList,
-      {
-        variant: "underline",
-        className: "h-auto gap-4 border-0 bg-transparent p-0 text-muted-foreground",
-        children: [
-          /* @__PURE__ */ jsx6(
-            TabsTrigger,
-            {
-              value: "preview",
-              variant: "underline",
-              className: "pb-2 data-[state=active]:border-primary data-[state=active]:text-foreground",
-              children: "Preview"
-            }
-          ),
-          /* @__PURE__ */ jsxs3(
-            TabsTrigger,
-            {
-              value: "edit",
-              variant: "underline",
-              className: "flex items-center gap-2 pb-2 data-[state=active]:border-primary data-[state=active]:text-foreground",
-              children: [
-                /* @__PURE__ */ jsx6(PencilLine, { className: "h-3.5 w-3.5" }),
-                isCollaborative ? "Live edit" : "Edit"
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
-      toolbar,
-      /* @__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",
-        {
-          type: "button",
-          onClick: () => void onSave(draft),
-          disabled: saving || !isDirty,
-          className: cn(
-            "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-[var(--border-strong)] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-            focusRing
-          ),
-          children: [
-            /* @__PURE__ */ jsx6(Save, { className: "h-3.5 w-3.5" }),
-            saving ? "Saving..." : saveLabel
-          ]
-        }
-      )
-    ] })
-  ] });
-  const preview = /* @__PURE__ */ jsx6(
-    "div",
-    {
-      className: cn(
-        // The outer margin is the card's gutter (rather than padding on the tab
-        // panel) so `previewClassName` can govern the whole box — gutter, border,
-        // surface, and inner padding — e.g. to render the document full-bleed.
-        "m-4 rounded-[var(--radius-lg)] border border-border bg-card p-5",
-        previewClassName
-      ),
-      children: /* @__PURE__ */ jsx6(Markdown, { children: draft })
-    }
-  );
-  const localEditor = /* @__PURE__ */ jsx6(
-    MarkdownDocumentEditor,
-    {
-      value: draft,
-      placeholder,
-      autoFocus,
-      readOnly,
-      onChange: (nextMarkdown) => {
-        handleChange(nextMarkdown);
-      },
-      className: editorClassName
-    }
-  );
-  const collaborativeEditor = collaboration ? /* @__PURE__ */ jsx6(EditorProvider, { ...collaboration, children: /* @__PURE__ */ jsx6(
-    CollaborativeDocumentSurface,
-    {
-      markdown: draft,
-      placeholder,
-      autoFocus,
-      readOnly,
-      className: editorClassName,
-      onChange: handleChange
-    }
-  ) }, collaboration.documentName) : localEditor;
-  return /* @__PURE__ */ jsx6(
-    Tabs,
-    {
-      value: activeMode,
-      onValueChange: (nextValue) => setMode(nextValue),
-      className: "h-full",
-      children: /* @__PURE__ */ jsxs3(
-        ArtifactPane,
-        {
-          eyebrow,
-          title,
-          subtitle,
-          meta,
-          headerActions,
-          footer,
-          tabs,
-          className,
-          contentClassName,
-          headerClassName,
-          toolbar: editorToolbar,
-          hideTitleBlock,
-          children: [
-            /* @__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 })
-          ]
-        }
-      )
-    }
-  );
-}
-
-export {
-  EditorProvider,
-  useEditorContext,
-  EditorToolbar,
-  TiptapEditor,
-  CollaboratorsList,
-  useEditorConnection,
-  useCollaborators,
-  useCollaboratorPresence,
-  useYjsState,
-  useDocumentChanges,
-  useAwareness,
-  DocumentEditorPane
-};