@tangle-network/sandbox-ui 0.3.11 → 0.3.13

package/dist/chunk-HXEA7L2T.js

@@ -0,0 +1,1401 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-Q56BYXQF.js";
+import {
+  ArtifactPane
+} from "./chunk-W4LM3QYZ.js";
+import {
+  Markdown
+} from "./chunk-LTFK464G.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 Collaboration from "@tiptap/extension-collaboration";
+
+// node_modules/@tiptap/extension-collaboration-caret/dist/index.js
+import { Extension } from "@tiptap/core";
+import { defaultSelectionBuilder, yCursorPlugin } from "@tiptap/y-tiptap";
+var awarenessStatesToArray = (states) => {
+  return Array.from(states.entries()).map(([key, value]) => {
+    return {
+      clientId: key,
+      ...value.user
+    };
+  });
+};
+var defaultOnUpdate = () => null;
+var CollaborationCaret = Extension.create({
+  name: "collaborationCaret",
+  priority: 999,
+  addOptions() {
+    return {
+      provider: null,
+      user: {
+        name: null,
+        color: null
+      },
+      render: (user) => {
+        const cursor = document.createElement("span");
+        cursor.classList.add("collaboration-carets__caret");
+        cursor.setAttribute("style", `border-color: ${user.color}`);
+        const label = document.createElement("div");
+        label.classList.add("collaboration-carets__label");
+        label.setAttribute("style", `background-color: ${user.color}`);
+        label.insertBefore(document.createTextNode(user.name), null);
+        cursor.insertBefore(label, null);
+        return cursor;
+      },
+      selectionRender: defaultSelectionBuilder,
+      onUpdate: defaultOnUpdate
+    };
+  },
+  onCreate() {
+    if (this.options.onUpdate !== defaultOnUpdate) {
+      console.warn(
+        '[tiptap warn]: DEPRECATED: The "onUpdate" option is deprecated. Please use `editor.storage.collaborationCaret.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret'
+      );
+    }
+    if (!this.options.provider) {
+      throw new Error('The "provider" option is required for the CollaborationCaret extension');
+    }
+  },
+  addStorage() {
+    return {
+      users: []
+    };
+  },
+  addCommands() {
+    return {
+      updateUser: (attributes) => () => {
+        this.options.provider.awareness.setLocalStateField("user", attributes);
+        return true;
+      },
+      user: (attributes) => ({ editor }) => {
+        console.warn(
+          '[tiptap warn]: DEPRECATED: The "user" command is deprecated. Please use "updateUser" instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret'
+        );
+        return editor.commands.updateUser(attributes);
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      yCursorPlugin(
+        (() => {
+          this.options.provider.awareness.setLocalStateField("user", this.options.user);
+          this.storage.users = awarenessStatesToArray(this.options.provider.awareness.states);
+          this.options.provider.awareness.on("update", () => {
+            this.storage.users = awarenessStatesToArray(this.options.provider.awareness.states);
+          });
+          return this.options.provider.awareness;
+        })(),
+        {
+          cursorBuilder: this.options.render,
+          selectionBuilder: this.options.selectionRender
+        }
+      )
+    ];
+  }
+});
+var index_default = CollaborationCaret;
+
+// src/editor/tiptap-editor.tsx
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+
+// src/editor/editor-provider.tsx
+import { HocuspocusProvider } from "@hocuspocus/provider";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import * as Y from "yjs";
+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 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,
+      // @ts-expect-error -- connect is valid at runtime but missing from type defs
+      connect: true,
+      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 });
+}
+function useEditorContext() {
+  const context = useContext(EditorContext);
+  if (!context) {
+    throw new Error("useEditorContext must be used within an EditorProvider");
+  }
+  return context;
+}
+
+// src/editor/tiptap-editor.tsx
+import { jsx as jsx2, 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 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(
+        index_default.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__ */ jsx2("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx2(ConnectionIndicator, { state: connectionState }) }),
+        /* @__PURE__ */ jsx2("div", { className: "p-4 pt-10", children: /* @__PURE__ */ jsx2(EditorContent, { editor }) }),
+        /* @__PURE__ */ jsx2("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;
+        }
+      ` })
+      ]
+    }
+  );
+}
+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__ */ jsx2("span", { className: cn("h-2 w-2 rounded-full", config.color) }),
+    /* @__PURE__ */ jsx2("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__ */ jsx2(
+      "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
+    ] })
+  ] });
+}
+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__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1 border-border border-b bg-muted/50 p-2",
+        className
+      ),
+      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__ */ jsx2(
+          "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/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";
+
+// src/editor/editor-toolbar.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function EditorToolbar2({
+  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-muted/50 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/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 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"
+          }
+        }
+      })
+    ],
+    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-[var(--text-primary)] prose-p:text-[var(--text-secondary)] prose-li:text-[var(--text-secondary)]",
+          "prose-strong:text-[var(--text-primary)] prose-code:text-[var(--text-primary)] prose-pre:text-[var(--text-secondary)]",
+          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-[24rem] w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-input)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx4(
+          EditorToolbar2,
+          {
+            editor,
+            className: "border-[var(--border-subtle)] bg-[var(--bg-card)]/80 px-2 py-2"
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-4", children: /* @__PURE__ */ jsx4(EditorContent2, { editor }) }),
+        /* @__PURE__ */ jsx4("style", { children: `
+        .ProseMirror p.is-editor-empty:first-child::before {
+          content: attr(data-placeholder);
+          float: left;
+          color: var(--text-muted, #999);
+          pointer-events: none;
+          height: 0;
+        }
+
+        .ProseMirror pre {
+          background: var(--bg-elevated, #16161a);
+          border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
+          border-radius: 0.75rem;
+          padding: 0.875rem 1rem;
+          overflow-x: auto;
+        }
+
+        .ProseMirror code {
+          background: var(--bg-hover, rgba(255,255,255,0.05));
+          border-radius: 0.35rem;
+          padding: 0.12rem 0.3rem;
+        }
+
+        .ProseMirror pre code {
+          background: transparent;
+          padding: 0;
+        }
+      ` })
+      ]
+    }
+  );
+}
+
+// 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 jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function connectionTone(state) {
+  switch (state) {
+    case "synced":
+      return "text-emerald-300 border-emerald-400/30 bg-emerald-400/10";
+    case "connected":
+    case "connecting":
+      return "text-sky-300 border-sky-400/30 bg-sky-400/10";
+    case "disconnected":
+    default:
+      return "text-amber-200 border-amber-300/30 bg-amber-300/10";
+  }
+}
+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-[var(--border-subtle)] bg-[var(--bg-card)]/80 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-[var(--text-muted)]", 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__ */ jsx5(WifiOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx5(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-[var(--border-subtle)] bg-[var(--bg-input)] px-2.5 py-1", children: [
+            /* @__PURE__ */ jsx5(Users, { className: "h-3.5 w-3.5" }),
+            collaborators.length === 0 ? "Solo editing" : `${collaboratorCount} active`
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5("p", { className: "text-xs text-[var(--text-muted)]", children: connectionDescription(state, collaborators.length, readOnly) })
+      ] }),
+      /* @__PURE__ */ jsx5(CollaboratorsList, { collaborators })
+    ] }),
+    /* @__PURE__ */ jsx5(
+      TiptapEditor,
+      {
+        initialContent,
+        placeholder,
+        autoFocus,
+        readOnly,
+        className: cn("h-full min-h-[28rem]", className),
+        onUpdate: (editor) => {
+          onChange?.(normalizeMarkdown(htmlToMarkdown(editor.getHTML())));
+        }
+      }
+    )
+  ] });
+}
+function DocumentEditorPane({
+  eyebrow,
+  title,
+  subtitle,
+  meta,
+  headerActions,
+  footer,
+  className,
+  contentClassName,
+  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-[var(--text-muted)]",
+        children: [
+          /* @__PURE__ */ jsx5(
+            TabsTrigger,
+            {
+              value: "preview",
+              variant: "underline",
+              className: "pb-2 data-[state=active]:border-[var(--brand-cool)] data-[state=active]:text-[var(--text-primary)]",
+              children: "Preview"
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            TabsTrigger,
+            {
+              value: "edit",
+              variant: "underline",
+              className: "flex items-center gap-2 pb-2 data-[state=active]:border-[var(--brand-cool)] data-[state=active]:text-[var(--text-primary)]",
+              children: [
+                /* @__PURE__ */ jsx5(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-[var(--text-muted)]", children: [
+      toolbar,
+      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-card)] px-2.5 py-1 font-medium", children: isCollaborative ? "Live document" : "Local draft" }),
+      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-input)] px-2.5 py-1", children: saveStateLabel }),
+      onSave && !readOnly && /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          onClick: () => void onSave(draft),
+          disabled: saving || !isDirty,
+          className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-3 py-1.5 text-xs font-semibold text-[var(--text-secondary)] transition-colors hover:border-[var(--brand-cool)]/40 hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsx5(Save, { className: "h-3.5 w-3.5" }),
+            saving ? "Saving..." : saveLabel
+          ]
+        }
+      )
+    ] })
+  ] });
+  const preview = /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn(
+        "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-input)] p-5",
+        previewClassName
+      ),
+      children: /* @__PURE__ */ jsx5(Markdown, { className: "prose-sm max-w-none", children: draft })
+    }
+  );
+  const localEditor = /* @__PURE__ */ jsx5(
+    MarkdownDocumentEditor,
+    {
+      value: draft,
+      placeholder,
+      autoFocus,
+      readOnly,
+      onChange: (nextMarkdown) => {
+        handleChange(nextMarkdown);
+      },
+      className: editorClassName
+    }
+  );
+  const collaborativeEditor = collaboration ? /* @__PURE__ */ jsx5(EditorProvider, { ...collaboration, children: /* @__PURE__ */ jsx5(
+    CollaborativeDocumentSurface,
+    {
+      markdown: draft,
+      placeholder,
+      autoFocus,
+      readOnly,
+      className: editorClassName,
+      onChange: handleChange
+    }
+  ) }, collaboration.documentName) : localEditor;
+  return /* @__PURE__ */ jsx5(
+    Tabs,
+    {
+      value: activeMode,
+      onValueChange: (nextValue) => setMode(nextValue),
+      className: "h-full",
+      children: /* @__PURE__ */ jsxs3(
+        ArtifactPane,
+        {
+          eyebrow,
+          title,
+          subtitle,
+          meta,
+          headerActions,
+          footer,
+          tabs,
+          className,
+          contentClassName,
+          toolbar: editorToolbar,
+          children: [
+            /* @__PURE__ */ jsx5(TabsContent, { value: "preview", className: "mt-0 h-full px-4 py-4", children: preview }),
+            /* @__PURE__ */ jsx5(TabsContent, { value: "edit", className: "mt-0 h-full px-4 py-4", children: isCollaborative ? collaborativeEditor : localEditor })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  EditorProvider,
+  useEditorContext,
+  TiptapEditor,
+  CollaboratorsList,
+  EditorToolbar,
+  useEditorConnection,
+  useCollaborators,
+  useCollaboratorPresence,
+  useYjsState,
+  useDocumentChanges,
+  useAwareness,
+  DocumentEditorPane
+};