@tangle-network/sandbox-ui 0.14.0 → 0.15.1

package/dist/chunk-U6QTHMY6.js

@@ -1,1290 +0,0 @@
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger
-} from "./chunk-Q56BYXQF.js";
-import {
-  ArtifactPane
-} from "./chunk-HB5Y37YU.js";
-import {
-  Markdown
-} from "./chunk-T7HMZEVO.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/.pnpm/@tiptap+extension-collaboration-caret@3.21.0_@tiptap+core@3.20.4_@tiptap+pm@3.20.4__@ti_795f003f8529614c8766f32d0d0747ee/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/editor-toolbar.tsx
-import { jsx as jsx2 } 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__ */ jsx2(
-    "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__ */ 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/tiptap-editor.tsx
-import { jsx as jsx3, 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__ */ 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: `
-        .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__ */ jsx3("span", { className: cn("h-2 w-2 rounded-full", config.color) }),
-    /* @__PURE__ */ jsx3("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__ */ jsx3(
-      "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 { 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/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-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__ */ jsx4(
-          EditorToolbar,
-          {
-            editor,
-            className: "border-border bg-card 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: 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;
-        }
-      ` })
-      ]
-    }
-  );
-}
-
-// 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-[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__ */ 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-border bg-background 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-muted-foreground", children: connectionDescription(state, collaborators.length, readOnly) })
-      ] }),
-      /* @__PURE__ */ jsx5(CollaboratorsList, { collaborators })
-    ] }),
-    /* @__PURE__ */ jsx5(
-      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,
-  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__ */ jsx5(
-            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__ */ 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-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 }),
-      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-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" }),
-            saving ? "Saving..." : saveLabel
-          ]
-        }
-      )
-    ] })
-  ] });
-  const preview = /* @__PURE__ */ jsx5(
-    "div",
-    {
-      className: cn(
-        "rounded-[var(--radius-lg)] border border-border bg-background 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,
-  EditorToolbar,
-  TiptapEditor,
-  CollaboratorsList,
-  useEditorConnection,
-  useCollaborators,
-  useCollaboratorPresence,
-  useYjsState,
-  useDocumentChanges,
-  useAwareness,
-  DocumentEditorPane
-};