@elixpo/lixeditor 2.1.6

package/dist/index.js

@@ -0,0 +1,2337 @@
+"use client";
+
+// src/editor/LixEditor.jsx
+import { BlockNoteSchema, defaultBlockSpecs, defaultInlineContentSpecs, createCodeBlockSpec } from "@blocknote/core";
+import { useCreateBlockNote, SuggestionMenuController, getDefaultReactSlashMenuItems, TableHandlesController } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import { useCallback as useCallback7, useMemo, forwardRef, useImperativeHandle, useState as useState10, useRef as useRef8, useEffect as useEffect9 } from "react";
+
+// src/hooks/useLixTheme.js
+import { createContext, useContext, useState, useEffect } from "react";
+"use client";
+var LixThemeContext = createContext(null);
+function LixThemeProvider({ children, defaultTheme = "light", storageKey = "lixeditor_theme" }) {
+  const [theme, setTheme] = useState(defaultTheme);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    if (storageKey) {
+      const saved = localStorage.getItem(storageKey);
+      if (saved === "dark" || saved === "light")
+        setTheme(saved);
+    }
+    setMounted(true);
+  }, [storageKey]);
+  useEffect(() => {
+    if (!mounted)
+      return;
+    document.documentElement.setAttribute("data-theme", theme);
+    if (storageKey)
+      localStorage.setItem(storageKey, theme);
+  }, [theme, mounted, storageKey]);
+  const toggleTheme = () => setTheme((t) => t === "dark" ? "light" : "dark");
+  const isDark = theme === "dark";
+  return <LixThemeContext.Provider value={{ theme, setTheme, toggleTheme, isDark, mounted }}>{children}</LixThemeContext.Provider>;
+}
+function useLixTheme() {
+  const ctx = useContext(LixThemeContext);
+  if (ctx)
+    return ctx;
+  const isDark = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark";
+  return { theme: isDark ? "dark" : "light", isDark, toggleTheme: () => {
+  }, setTheme: () => {
+  }, mounted: true };
+}
+
+// src/blocks/BlockEquation.jsx
+import { createReactBlockSpec } from "@blocknote/react";
+import { useState as useState2, useEffect as useEffect2, useRef, useCallback } from "react";
+import katex from "katex";
+"use client";
+function stripDelimiters(raw) {
+  let s = raw.trim();
+  if (s.startsWith("\\[") && s.endsWith("\\]"))
+    return s.slice(2, -2).trim();
+  if (s.startsWith("$$") && s.endsWith("$$"))
+    return s.slice(2, -2).trim();
+  if (s.startsWith("\\(") && s.endsWith("\\)"))
+    return s.slice(2, -2).trim();
+  if (s.startsWith("$") && s.endsWith("$") && s.length > 2)
+    return s.slice(1, -1).trim();
+  return s;
+}
+function renderKaTeX(latex, displayMode = true) {
+  try {
+    return katex.renderToString(stripDelimiters(latex), { displayMode, throwOnError: false });
+  } catch {
+    return `<span style="color:#f87171">${latex}</span>`;
+  }
+}
+var BlockEquation = createReactBlockSpec(
+  {
+    type: "blockEquation",
+    propSchema: {
+      latex: { default: "" }
+    },
+    content: "none"
+  },
+  {
+    render: ({ block, editor }) => {
+      const [editing, setEditing] = useState2(!block.props.latex);
+      const [value, setValue] = useState2(block.props.latex || "");
+      const [livePreview, setLivePreview] = useState2(block.props.latex || "");
+      const inputRef = useRef(null);
+      const debounceRef = useRef(null);
+      useEffect2(() => {
+        if (editing)
+          inputRef.current?.focus();
+      }, [editing]);
+      const handleCodeChange = useCallback((e) => {
+        const v = e.target.value;
+        setValue(v);
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => setLivePreview(v), 200);
+      }, []);
+      useEffect2(() => {
+        return () => clearTimeout(debounceRef.current);
+      }, []);
+      const save = () => {
+        editor.updateBlock(block, { props: { latex: value } });
+        setEditing(false);
+      };
+      if (editing) {
+        return <div className="mermaid-block mermaid-block--editing">
+          <div className="mermaid-block-header">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#c4b5fd" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" /></svg>
+            <span>LaTeX Equation</span>
+            <span style={{ marginLeft: "auto", fontSize: "10px", color: "var(--text-faint)" }}>Shift+Enter to save</span>
+          </div>
+          <textarea
+            ref={inputRef}
+            value={value}
+            onChange={handleCodeChange}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && e.shiftKey) {
+                e.preventDefault();
+                save();
+              }
+              if (e.key === "Escape") {
+                setEditing(false);
+                setValue(block.props.latex || "");
+                setLivePreview(block.props.latex || "");
+              }
+            }}
+            placeholder="E = mc^2"
+            rows={4}
+            className="mermaid-block-textarea"
+          />
+          {livePreview.trim() && <div className="latex-live-preview">
+            <div className="latex-live-preview-label">Preview</div>
+            <div dangerouslySetInnerHTML={{ __html: renderKaTeX(livePreview) }} />
+          </div>}
+          <div className="mermaid-block-actions">
+            <button onClick={() => {
+              setEditing(false);
+              setValue(block.props.latex || "");
+              setLivePreview(block.props.latex || "");
+            }} className="mermaid-btn-cancel">Cancel</button>
+            <button onClick={save} className="mermaid-btn-save" disabled={!value.trim()}>Done</button>
+          </div>
+        </div>;
+      }
+      const latex = block.props.latex;
+      if (!latex) {
+        return <div
+          onClick={() => setEditing(true)}
+          className="mermaid-block mermaid-block--empty"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" /></svg>
+          <span>Click to add a block equation</span>
+        </div>;
+      }
+      return <div
+        onClick={() => setEditing(true)}
+        className="editor-block-equation"
+        dangerouslySetInnerHTML={{ __html: renderKaTeX(latex) }}
+      />;
+    }
+  }
+);
+
+// src/blocks/MermaidBlock.jsx
+import { createReactBlockSpec as createReactBlockSpec2 } from "@blocknote/react";
+import { useState as useState3, useEffect as useEffect3, useRef as useRef2, useCallback as useCallback2 } from "react";
+"use client";
+var darkConfig = {
+  startOnLoad: false,
+  securityLevel: "loose",
+  theme: "dark",
+  themeVariables: {
+    primaryColor: "#232d3f",
+    primaryTextColor: "#e4e4e7",
+    primaryBorderColor: "#c4b5fd",
+    lineColor: "#8b8fa3",
+    secondaryColor: "#1e1e2e",
+    tertiaryColor: "#141a26",
+    fontFamily: "'lixFont', sans-serif",
+    fontSize: "16px",
+    nodeTextColor: "#e4e4e7",
+    nodeBorder: "#c4b5fd",
+    mainBkg: "#232d3f",
+    clusterBkg: "#1a1f2e",
+    clusterBorder: "#333",
+    titleColor: "#c4b5fd",
+    edgeLabelBackground: "#141a26",
+    git0: "#c4b5fd",
+    git1: "#7c5cbf",
+    git2: "#4ade80",
+    git3: "#f59e0b",
+    git4: "#ef4444",
+    git5: "#3b82f6",
+    git6: "#ec4899",
+    git7: "#14b8a6",
+    gitBranchLabel0: "#e4e4e7",
+    gitBranchLabel1: "#e4e4e7",
+    gitBranchLabel2: "#e4e4e7",
+    gitBranchLabel3: "#e4e4e7",
+    gitInv0: "#141a26"
+  },
+  flowchart: { padding: 20, nodeSpacing: 50, rankSpacing: 60, curve: "basis", htmlLabels: true, useMaxWidth: false },
+  sequence: { useMaxWidth: false, boxMargin: 10, noteMargin: 10, messageMargin: 35, mirrorActors: false },
+  gitGraph: { showBranches: true, showCommitLabel: true, mainBranchName: "main", rotateCommitLabel: false }
+};
+var lightConfig = {
+  startOnLoad: false,
+  securityLevel: "loose",
+  theme: "default",
+  themeVariables: {
+    primaryColor: "#e8e0ff",
+    primaryTextColor: "#1a1a2e",
+    primaryBorderColor: "#7c5cbf",
+    lineColor: "#6b7280",
+    secondaryColor: "#f3f0ff",
+    tertiaryColor: "#f9fafb",
+    fontFamily: "'lixFont', sans-serif",
+    fontSize: "16px",
+    nodeTextColor: "#1a1a2e",
+    nodeBorder: "#7c5cbf",
+    mainBkg: "#e8e0ff",
+    clusterBkg: "#f3f0ff",
+    clusterBorder: "#d1d5db",
+    titleColor: "#7c5cbf",
+    edgeLabelBackground: "#f9fafb",
+    git0: "#7c5cbf",
+    git1: "#9b7bf7",
+    git2: "#16a34a",
+    git3: "#d97706",
+    git4: "#dc2626",
+    git5: "#2563eb",
+    git6: "#db2777",
+    git7: "#0d9488"
+  },
+  flowchart: { padding: 20, nodeSpacing: 50, rankSpacing: 60, curve: "basis", htmlLabels: true, useMaxWidth: false },
+  sequence: { useMaxWidth: false, boxMargin: 10, noteMargin: 10, messageMargin: 35, mirrorActors: false },
+  gitGraph: { showBranches: true, showCommitLabel: true, mainBranchName: "main", rotateCommitLabel: false }
+};
+var mermaidModule = null;
+var mermaidLoadPromise = null;
+var renderQueue = Promise.resolve();
+var lastTheme = null;
+async function getMermaid(isDark) {
+  if (!mermaidModule) {
+    if (!mermaidLoadPromise) {
+      mermaidLoadPromise = import("mermaid").then((m) => {
+        mermaidModule = m.default;
+        return mermaidModule;
+      });
+    }
+    await mermaidLoadPromise;
+  }
+  const theme = isDark ? "dark" : "light";
+  if (lastTheme !== theme) {
+    lastTheme = theme;
+    mermaidModule.initialize(isDark ? darkConfig : lightConfig);
+  }
+  return mermaidModule;
+}
+function queueRender(fn) {
+  renderQueue = renderQueue.then(fn, fn);
+  return renderQueue;
+}
+function MermaidPreview({ diagram, isDark, interactive }) {
+  const containerRef = useRef2(null);
+  const [svgHTML, setSvgHTML] = useState3("");
+  const [error, setError] = useState3("");
+  const [zoom, setZoom] = useState3(1);
+  const [pan, setPan] = useState3({ x: 0, y: 0 });
+  const dragging = useRef2(false);
+  const dragStart = useRef2({ x: 0, y: 0 });
+  const panStart = useRef2({ x: 0, y: 0 });
+  useEffect3(() => {
+    if (!diagram?.trim()) {
+      setSvgHTML("");
+      setError("");
+      return;
+    }
+    let cancelled = false;
+    const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    queueRender(async () => {
+      if (cancelled)
+        return;
+      try {
+        const mermaid = await getMermaid(isDark);
+        if (cancelled)
+          return;
+        let diagramText = diagram.trim();
+        diagramText = diagramText.replace(/^\s*gitgraph/i, "gitGraph");
+        diagramText = diagramText.replace(/^\s*sequencediagram/i, "sequenceDiagram");
+        diagramText = diagramText.replace(/^\s*classDiagram/i, "classDiagram");
+        diagramText = diagramText.replace(/^\s*stateDiagram/i, "stateDiagram");
+        diagramText = diagramText.replace(/^\s*erDiagram/i, "erDiagram");
+        diagramText = diagramText.replace(/^\s*gantt/i, "gantt");
+        const tempDiv = document.createElement("div");
+        tempDiv.id = "container-" + id;
+        tempDiv.style.cssText = "position:fixed;top:0;left:0;width:100vw;opacity:0;pointer-events:none;z-index:-9999;";
+        document.body.appendChild(tempDiv);
+        const { svg } = await mermaid.render(id, diagramText, tempDiv);
+        tempDiv.remove();
+        if (!cancelled) {
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(svg, "image/svg+xml");
+          const svgEl = doc.querySelector("svg");
+          if (svgEl) {
+            svgEl.removeAttribute("width");
+            svgEl.setAttribute("style", "width:100%;height:auto;max-width:100%;");
+          }
+          setSvgHTML(svgEl ? svgEl.outerHTML : svg);
+          setError("");
+          setZoom(1);
+          setPan({ x: 0, y: 0 });
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err.message || "Invalid diagram syntax");
+          setSvgHTML("");
+        }
+        try {
+          document.getElementById(id)?.remove();
+        } catch {
+        }
+        try {
+          document.getElementById("container-" + id)?.remove();
+        } catch {
+        }
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [diagram, isDark]);
+  useEffect3(() => {
+    if (!interactive)
+      return;
+    const el = containerRef.current;
+    if (!el)
+      return;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setZoom((z) => {
+        const delta = e.deltaY > 0 ? -0.1 : 0.1;
+        return Math.min(3, Math.max(0.3, z + delta));
+      });
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [svgHTML, interactive]);
+  const handleMouseDown = useCallback2((e) => {
+    if (!interactive || e.button !== 0)
+      return;
+    e.preventDefault();
+    dragging.current = true;
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    panStart.current = { ...pan };
+  }, [pan, interactive]);
+  const handleMouseMove = useCallback2((e) => {
+    if (!dragging.current)
+      return;
+    const dx = e.clientX - dragStart.current.x;
+    const dy = e.clientY - dragStart.current.y;
+    setPan({ x: panStart.current.x + dx, y: panStart.current.y + dy });
+  }, []);
+  const handleMouseUp = useCallback2(() => {
+    dragging.current = false;
+  }, []);
+  useEffect3(() => {
+    if (!interactive)
+      return;
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [handleMouseMove, handleMouseUp, interactive]);
+  const resetView = useCallback2(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+  if (error) {
+    return <div className="mermaid-viewport mermaid-viewport--compact"><pre style={{ color: "#f87171", fontSize: "12px", whiteSpace: "pre-wrap", padding: "16px", margin: 0 }}>{error}</pre></div>;
+  }
+  if (!diagram?.trim()) {
+    return <div className="mermaid-viewport mermaid-viewport--compact" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}><span style={{ color: "var(--text-faint)", fontSize: "12px" }}>Preview will appear here...</span></div>;
+  }
+  if (!svgHTML) {
+    return <div className="mermaid-viewport mermaid-viewport--compact" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}><span style={{ color: "var(--text-faint)", fontSize: "13px" }}>Rendering...</span></div>;
+  }
+  return <div
+    ref={containerRef}
+    className={interactive ? "mermaid-viewport" : "mermaid-viewport mermaid-viewport--compact"}
+    onMouseDown={handleMouseDown}
+  >
+    <div
+      className="mermaid-block-svg"
+      style={{
+        transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+        transformOrigin: "center center"
+      }}
+      dangerouslySetInnerHTML={{ __html: svgHTML }}
+    />
+    {interactive && <div className="mermaid-zoom-controls">
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          setZoom((z) => Math.min(3, z + 0.2));
+        }}
+        className="mermaid-zoom-btn"
+        title="Zoom in"
+      ><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg></button>
+      <span className="mermaid-zoom-label">
+        {Math.round(zoom * 100)}
+        {"%"}
+      </span>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          setZoom((z) => Math.max(0.3, z - 0.2));
+        }}
+        className="mermaid-zoom-btn"
+        title="Zoom out"
+      ><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /></svg></button>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          resetView();
+        }}
+        className="mermaid-zoom-btn"
+        title="Reset view"
+      ><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
+        <polyline points="1 4 1 10 7 10" />
+      </svg></button>
+    </div>}
+  </div>;
+}
+var MermaidBlock = createReactBlockSpec2(
+  {
+    type: "mermaidBlock",
+    propSchema: {
+      diagram: { default: "" }
+    },
+    content: "none"
+  },
+  {
+    render: ({ block, editor }) => {
+      const { isDark } = useLixTheme();
+      const [editing, setEditing] = useState3(!block.props.diagram);
+      const [value, setValue] = useState3(block.props.diagram || "");
+      const [livePreview, setLivePreview] = useState3(block.props.diagram || "");
+      const inputRef = useRef2(null);
+      const debounceRef = useRef2(null);
+      useEffect3(() => {
+        if (editing && inputRef.current)
+          inputRef.current.focus();
+      }, [editing]);
+      const handleCodeChange = useCallback2((e) => {
+        const v = e.target.value;
+        setValue(v);
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => setLivePreview(v), 400);
+      }, []);
+      useEffect3(() => {
+        return () => clearTimeout(debounceRef.current);
+      }, []);
+      const save = useCallback2(() => {
+        editor.updateBlock(block, { props: { diagram: value } });
+        setEditing(false);
+      }, [editor, block, value]);
+      const handleDelete = useCallback2(() => {
+        try {
+          editor.removeBlocks([block.id]);
+        } catch {
+        }
+      }, [editor, block.id]);
+      if (editing) {
+        return <div className="mermaid-block mermaid-block--editing">
+          <div className="mermaid-block-header">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#c4b5fd" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z" /></svg>
+            <span>Mermaid Diagram</span>
+            <span style={{ marginLeft: "auto", fontSize: "10px", color: "var(--text-faint)" }}>Shift+Enter to save</span>
+          </div>
+          <textarea
+            ref={inputRef}
+            value={value}
+            onChange={handleCodeChange}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && e.shiftKey) {
+                e.preventDefault();
+                save();
+              }
+              if (e.key === "Escape") {
+                setEditing(false);
+                setValue(block.props.diagram || "");
+                setLivePreview(block.props.diagram || "");
+              }
+              if (e.key === "Tab") {
+                e.preventDefault();
+                const start = e.target.selectionStart;
+                const end = e.target.selectionEnd;
+                const newVal = value.substring(0, start) + "    " + value.substring(end);
+                setValue(newVal);
+                setLivePreview(newVal);
+                requestAnimationFrame(() => {
+                  e.target.selectionStart = e.target.selectionEnd = start + 4;
+                });
+              }
+            }}
+            placeholder={`graph TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[OK]
+    B -->|No| D[End]`}
+            rows={8}
+            className="mermaid-block-textarea"
+          />
+          <div className="mermaid-live-preview">
+            <div className="mermaid-live-preview-label">Preview</div>
+            <MermaidPreview diagram={livePreview} isDark={isDark} interactive={false} />
+          </div>
+          <div className="mermaid-block-actions">
+            <button onClick={() => {
+              setEditing(false);
+              setValue(block.props.diagram || "");
+              setLivePreview(block.props.diagram || "");
+            }} className="mermaid-btn-cancel">Cancel</button>
+            <button onClick={save} className="mermaid-btn-save" disabled={!value.trim()}>Done</button>
+          </div>
+        </div>;
+      }
+      if (!block.props.diagram) {
+        return <div onClick={() => setEditing(true)} className="mermaid-block mermaid-block--empty">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="3" width="7" height="7" rx="1.5" />
+            <rect x="14" y="3" width="7" height="7" rx="1.5" />
+            <rect x="8.5" y="14" width="7" height="7" rx="1.5" />
+            <line x1="6.5" y1="10" x2="6.5" y2="14" />
+            <line x1="17.5" y1="10" x2="17.5" y2="14" />
+            <line x1="6.5" y1="14" x2="8.5" y2="14" />
+            <line x1="17.5" y1="14" x2="15.5" y2="14" />
+          </svg>
+          <span>Click to add a Mermaid diagram</span>
+        </div>;
+      }
+      return <div className="mermaid-block mermaid-block--rendered group" onDoubleClick={() => setEditing(true)}>
+        <MermaidPreview diagram={block.props.diagram} isDark={isDark} interactive={true} />
+        <div className="mermaid-block-hover">
+          <button onClick={() => setEditing(true)} className="mermaid-hover-btn" title="Edit diagram"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+            <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+          </svg></button>
+          <button onClick={handleDelete} className="mermaid-hover-btn mermaid-hover-delete" title="Delete"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
+          </svg></button>
+        </div>
+      </div>;
+    }
+  }
+);
+
+// src/blocks/TableOfContents.jsx
+import { createReactBlockSpec as createReactBlockSpec3 } from "@blocknote/react";
+"use client";
+var TableOfContents = createReactBlockSpec3(
+  {
+    type: "tableOfContents",
+    propSchema: {},
+    content: "none"
+  },
+  {
+    render: ({ editor }) => {
+      const headings = editor.document.filter(
+        (b) => b.type === "heading" && b.content?.length > 0
+      );
+      return <div className="toc-block border border-[var(--border-default)] rounded-xl bg-[var(--bg-surface)] px-5 py-4 my-2 select-none">
+        <p className="text-[11px] uppercase tracking-wider text-[var(--text-muted)] font-bold mb-3">Table of Contents</p>
+        {headings.length === 0 ? <p className="text-[13px] text-[var(--text-faint)] italic">Add headings to see the outline here.</p> : <ul className="space-y-1.5">{headings.map((h) => {
+          const level = h.props?.level || 1;
+          const text = h.content.map((c) => c.text || "").join("");
+          return <li
+            key={h.id}
+            className="text-[13px] text-[#9b7bf7] hover:text-[#b69aff] cursor-pointer transition-colors"
+            style={{ paddingLeft: `${(level - 1) * 16}px` }}
+            onClick={() => editor.setTextCursorPosition(h.id)}
+          >{text}</li>;
+        })}</ul>}
+      </div>;
+    }
+  }
+);
+
+// src/blocks/InlineEquation.jsx
+import { createReactInlineContentSpec } from "@blocknote/react";
+import { useState as useState4, useRef as useRef3, useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import katex2 from "katex";
+"use client";
+function stripDelimiters2(raw) {
+  let s = raw.trim();
+  if (s.startsWith("\\(") && s.endsWith("\\)"))
+    return s.slice(2, -2).trim();
+  if (s.startsWith("\\[") && s.endsWith("\\]"))
+    return s.slice(2, -2).trim();
+  if (s.startsWith("$$") && s.endsWith("$$"))
+    return s.slice(2, -2).trim();
+  if (s.startsWith("$") && s.endsWith("$") && s.length > 2)
+    return s.slice(1, -1).trim();
+  return s;
+}
+function renderKaTeXInline(latex) {
+  try {
+    return katex2.renderToString(stripDelimiters2(latex), { displayMode: false, throwOnError: false });
+  } catch {
+    return `<span style="color:#f87171">${latex}</span>`;
+  }
+}
+function InlineEquationChip({ inlineContent }) {
+  const [editing, setEditing] = useState4(false);
+  const [value, setValue] = useState4(inlineContent.props.latex || "");
+  const inputRef = useRef3(null);
+  const popupRef = useRef3(null);
+  useEffect4(() => {
+    if (editing && inputRef.current)
+      inputRef.current.focus();
+  }, [editing]);
+  useEffect4(() => {
+    if (!editing)
+      return;
+    function handleClick(e) {
+      if (popupRef.current && !popupRef.current.contains(e.target)) {
+        setEditing(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [editing]);
+  const save = useCallback3(() => {
+    if (value.trim()) {
+      inlineContent.props.latex = value.trim();
+    }
+    setEditing(false);
+  }, [value, inlineContent]);
+  const html = renderKaTeXInline(inlineContent.props.latex);
+  const previewHtml = value.trim() ? renderKaTeXInline(value) : "";
+  return <span className="relative inline-flex items-center">
+    <span
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setValue(inlineContent.props.latex || "");
+        setEditing(!editing);
+      }}
+      className="inline-equation-chip"
+      dangerouslySetInnerHTML={{ __html: html }}
+      title={inlineContent.props.latex}
+    />
+    {editing && <div
+      ref={popupRef}
+      className="inline-equation-editor"
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        className="inline-equation-editor-input"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            save();
+          }
+          if (e.key === "Escape") {
+            setEditing(false);
+          }
+        }}
+        placeholder="E = mc^2"
+      />
+      {previewHtml && <div className="inline-equation-editor-preview" dangerouslySetInnerHTML={{ __html: previewHtml }} />}
+      <div className="inline-equation-editor-actions">
+        <button className="mermaid-btn-cancel" onClick={() => setEditing(false)}>Cancel</button>
+        <button className="mermaid-btn-save" disabled={!value.trim()} onClick={save}>Save</button>
+      </div>
+    </div>}
+  </span>;
+}
+var InlineEquation = createReactInlineContentSpec(
+  {
+    type: "inlineEquation",
+    propSchema: {
+      latex: { default: "x^2" }
+    },
+    content: "none"
+  },
+  {
+    render: (props) => <InlineEquationChip {...props} />
+  }
+);
+
+// src/blocks/DateInline.jsx
+import { createReactInlineContentSpec as createReactInlineContentSpec2 } from "@blocknote/react";
+import { useState as useState5, useRef as useRef4, useEffect as useEffect5, useCallback as useCallback4 } from "react";
+"use client";
+function MiniCalendar({ selectedDate, onSelect, onClose, anchorEl }) {
+  const ref = useRef4(null);
+  const [viewDate, setViewDate] = useState5(() => {
+    const d = selectedDate ? new Date(selectedDate) : new Date();
+    return { year: d.getFullYear(), month: d.getMonth() };
+  });
+  const [pos, setPos] = useState5(null);
+  useEffect5(() => {
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target))
+        onClose();
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [onClose]);
+  useEffect5(() => {
+    if (!anchorEl)
+      return;
+    const rect = anchorEl.getBoundingClientRect();
+    const calWidth = 240;
+    let left = rect.left;
+    left = Math.max(8, Math.min(left, window.innerWidth - calWidth - 8));
+    setPos({ top: rect.bottom + 4, left });
+  }, [anchorEl]);
+  const { year, month } = viewDate;
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const today = new Date();
+  const todayStr = today.toISOString().split("T")[0];
+  const monthName = new Date(year, month).toLocaleDateString("en-US", { month: "long", year: "numeric" });
+  const days = [];
+  for (let i = 0; i < firstDay; i++)
+    days.push(null);
+  for (let d = 1; d <= daysInMonth; d++)
+    days.push(d);
+  const prev = () => setViewDate((v) => v.month === 0 ? { year: v.year - 1, month: 11 } : { ...v, month: v.month - 1 });
+  const next = () => setViewDate((v) => v.month === 11 ? { year: v.year + 1, month: 0 } : { ...v, month: v.month + 1 });
+  const toDateStr = (d) => `${year}-${String(month + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+  if (!pos)
+    return null;
+  return <div
+    ref={ref}
+    className="fixed z-[100] rounded-xl shadow-2xl overflow-hidden"
+    style={{ backgroundColor: "var(--bg-app)", border: "1px solid var(--border-default)", width: "240px", top: pos.top, left: pos.left }}
+    onMouseDown={(e) => e.stopPropagation()}
+  >
+    <div className="flex items-center justify-between px-3 py-2" style={{ borderBottom: "1px solid var(--divider)" }}>
+      <button onClick={prev} className="w-6 h-6 flex items-center justify-center rounded hover:bg-[var(--bg-hover)] transition-colors" style={{ color: "var(--text-muted)" }}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="15 18 9 12 15 6" /></svg></button>
+      <span className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>{monthName}</span>
+      <button onClick={next} className="w-6 h-6 flex items-center justify-center rounded hover:bg-[var(--bg-hover)] transition-colors" style={{ color: "var(--text-muted)" }}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="9 18 15 12 9 6" /></svg></button>
+    </div>
+    <div className="grid grid-cols-7 px-2 pt-2">{["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => <div key={d} className="text-center text-[10px] font-medium py-1" style={{ color: "var(--text-faint)" }}>{d}</div>)}</div>
+    <div className="grid grid-cols-7 px-2 pb-2 gap-0.5">{days.map((d, i) => {
+      if (!d)
+        return <div key={`e${i}`} />;
+      const dateStr = toDateStr(d);
+      const isSelected = dateStr === selectedDate;
+      const isToday = dateStr === todayStr;
+      return <button
+        key={d}
+        onClick={() => {
+          onSelect(dateStr);
+          onClose();
+        }}
+        className="w-7 h-7 rounded-lg text-[11px] font-medium flex items-center justify-center transition-all"
+        style={{
+          backgroundColor: isSelected ? "#9b7bf7" : "transparent",
+          color: isSelected ? "white" : isToday ? "#9b7bf7" : "var(--text-body)",
+          border: isToday && !isSelected ? "1px solid #9b7bf7" : "1px solid transparent"
+        }}
+        onMouseEnter={(e) => {
+          if (!isSelected)
+            e.currentTarget.style.backgroundColor = "var(--bg-hover)";
+        }}
+        onMouseLeave={(e) => {
+          if (!isSelected)
+            e.currentTarget.style.backgroundColor = "transparent";
+        }}
+      >{d}</button>;
+    })}</div>
+    <div className="flex items-center justify-between px-3 py-1.5" style={{ borderTop: "1px solid var(--divider)" }}>
+      <button
+        onClick={() => {
+          onSelect("");
+          onClose();
+        }}
+        className="text-[10px] font-medium transition-colors"
+        style={{ color: "var(--text-faint)" }}
+      >Clear</button>
+      <button
+        onClick={() => {
+          onSelect(todayStr);
+          onClose();
+        }}
+        className="text-[10px] font-medium transition-colors"
+        style={{ color: "#9b7bf7" }}
+      >Today</button>
+    </div>
+  </div>;
+}
+function DateChip({ inlineContent }) {
+  const [showPicker, setShowPicker] = useState5(false);
+  const chipRef = useRef4(null);
+  const d = inlineContent.props.date;
+  let formatted;
+  try {
+    formatted = new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  } catch {
+    formatted = d;
+  }
+  const handleSelect = useCallback4((newDate) => {
+    if (newDate) {
+      inlineContent.props.date = newDate;
+    }
+    setShowPicker(false);
+  }, [inlineContent]);
+  return <span className="relative inline-flex items-center">
+    <span
+      ref={chipRef}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowPicker(!showPicker);
+      }}
+      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[13px] font-medium mx-0.5 cursor-pointer transition-all hover:ring-2 hover:ring-[#9b7bf7]/30"
+      style={{ color: "#9b7bf7", backgroundColor: "rgba(155,123,247,0.06)", border: "1px solid rgba(155,123,247,0.15)" }}
+      title="Click to change date (Ctrl+D to insert)"
+    >
+      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" strokeWidth={2} />
+        <line x1="16" y1="2" x2="16" y2="6" strokeWidth={2} />
+        <line x1="8" y1="2" x2="8" y2="6" strokeWidth={2} />
+        <line x1="3" y1="10" x2="21" y2="10" strokeWidth={2} />
+      </svg>
+      {formatted}
+    </span>
+    {showPicker && <MiniCalendar
+      selectedDate={d}
+      onSelect={handleSelect}
+      onClose={() => setShowPicker(false)}
+      anchorEl={chipRef.current}
+    />}
+  </span>;
+}
+var DateInline = createReactInlineContentSpec2(
+  {
+    type: "dateInline",
+    propSchema: {
+      date: { default: new Date().toISOString().split("T")[0] }
+    },
+    content: "none"
+  },
+  {
+    render: (props) => <DateChip {...props} />
+  }
+);
+
+// src/blocks/ImageBlock.jsx
+import { createReactBlockSpec as createReactBlockSpec4 } from "@blocknote/react";
+import { useState as useState6, useRef as useRef5, useCallback as useCallback5, useEffect as useEffect6 } from "react";
+"use client";
+var BlogImageBlock = createReactBlockSpec4(
+  {
+    type: "image",
+    propSchema: {
+      url: { default: "" },
+      caption: { default: "" },
+      previewWidth: { default: 740 },
+      name: { default: "" },
+      showPreview: { default: true }
+    },
+    content: "none"
+  },
+  {
+    render: (props) => <ImageRenderer {...props} />
+  }
+);
+function ImageRenderer({ block, editor }) {
+  const { url, caption } = block.props;
+  const [mode, setMode] = useState6("idle");
+  const [embedUrl, setEmbedUrl] = useState6("");
+  const [embedError, setEmbedError] = useState6("");
+  const [isDragOver, setIsDragOver] = useState6(false);
+  const [uploadStatus, setUploadStatus] = useState6("");
+  const [editingCaption, setEditingCaption] = useState6(false);
+  const [captionText, setCaptionText] = useState6(caption || "");
+  const fileInputRef = useRef5(null);
+  const blockRef = useRef5(null);
+  const embedInputRef = useRef5(null);
+  useEffect6(() => {
+    if (mode === "embed")
+      setTimeout(() => embedInputRef.current?.focus(), 50);
+  }, [mode]);
+  useEffect6(() => {
+    const el = blockRef.current;
+    if (!el)
+      return;
+    function handleKey(e) {
+      if ((e.key === "Backspace" || e.key === "Delete") && mode === "idle" && !url) {
+        e.preventDefault();
+        try {
+          editor.removeBlocks([block.id]);
+        } catch {
+        }
+      }
+    }
+    el.addEventListener("keydown", handleKey);
+    return () => el.removeEventListener("keydown", handleKey);
+  }, [editor, block.id, mode, url]);
+  const uploadFile = useCallback5(async (file) => {
+    if (!file || !file.type.startsWith("image/"))
+      return;
+    setMode("uploading");
+    setUploadStatus("Processing...");
+    try {
+      const reader = new FileReader();
+      reader.onload = () => {
+        editor.updateBlock(block.id, { props: { url: reader.result, name: file.name } });
+        setMode("idle");
+      };
+      reader.onerror = () => {
+        showFailToast("Failed to read image");
+        setMode("idle");
+      };
+      reader.readAsDataURL(file);
+    } catch {
+      setMode("idle");
+    }
+  }, [editor, block.id]);
+  const handlePaste = useCallback5((e) => {
+    const items = e.clipboardData?.items;
+    if (!items)
+      return;
+    for (const item of items) {
+      if (item.type.startsWith("image/")) {
+        e.preventDefault();
+        uploadFile(item.getAsFile());
+        return;
+      }
+    }
+  }, [uploadFile]);
+  const handleDrop = useCallback5((e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const file = e.dataTransfer?.files?.[0];
+    if (file?.type.startsWith("image/"))
+      uploadFile(file);
+  }, [uploadFile]);
+  const handleEmbed = useCallback5(() => {
+    const trimmed = embedUrl.trim();
+    if (!trimmed)
+      return;
+    if (!trimmed.startsWith("http")) {
+      setEmbedError("URL must start with http:// or https://");
+      return;
+    }
+    editor.updateBlock(block.id, { props: { url: trimmed } });
+    setMode("idle");
+    setEmbedUrl("");
+    setEmbedError("");
+  }, [embedUrl, editor, block.id]);
+  const showFailToast = useCallback5((msg) => {
+    const toast = document.createElement("div");
+    toast.className = "blog-img-fail-toast";
+    toast.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="flex-shrink:0"><circle cx="8" cy="8" r="7" stroke="#f87171" stroke-width="1.5"/><path d="M8 4.5v4" stroke="#f87171" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11" r=".75" fill="#f87171"/></svg><span>${msg}</span>`;
+    document.body.appendChild(toast);
+    setTimeout(() => {
+      toast.classList.add("blog-img-fail-toast--out");
+    }, 3200);
+    setTimeout(() => {
+      toast.remove();
+    }, 3600);
+  }, []);
+  const handleDelete = useCallback5(() => {
+    try {
+      editor.removeBlocks([block.id]);
+    } catch {
+    }
+  }, [editor, block.id]);
+  const handleReplace = useCallback5(() => {
+    editor.updateBlock(block.id, { props: { url: "" } });
+    setMode("idle");
+  }, [editor, block.id]);
+  const handleCaptionSave = useCallback5(() => {
+    editor.updateBlock(block.id, { props: { caption: captionText } });
+    setEditingCaption(false);
+  }, [editor, block.id, captionText]);
+  if (!url) {
+    return <div
+      ref={blockRef}
+      className="blog-img-empty"
+      tabIndex={0}
+      onPaste={handlePaste}
+      onDrop={handleDrop}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+      }}
+      onDragLeave={() => setIsDragOver(false)}
+      data-drag-over={isDragOver}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={(e) => {
+          if (e.target.files?.[0])
+            uploadFile(e.target.files[0]);
+          e.target.value = "";
+        }}
+        style={{ display: "none" }}
+      />
+      {mode === "uploading" && <div className="blog-img-status">
+        <div className="blog-img-spinner" />
+        <span>{uploadStatus}</span>
+      </div>}
+      {mode === "idle" && <>
+        <div className="blog-img-actions-row">
+          <button className="blog-img-action" onClick={() => fileInputRef.current?.click()}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+            {"Upload"}
+          </button>
+          <button className="blog-img-action" onClick={() => setMode("embed")}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" />
+              <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
+            </svg>
+            {"Embed URL"}
+          </button>
+        </div>
+        <p className="blog-img-hint">{"or drag & drop / paste an image"}</p>
+      </>}
+      {mode === "embed" && <div className="blog-img-input-row">
+        <input
+          ref={embedInputRef}
+          type="url"
+          value={embedUrl}
+          onChange={(e) => {
+            setEmbedUrl(e.target.value);
+            setEmbedError("");
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter")
+              handleEmbed();
+            if (e.key === "Escape") {
+              setMode("idle");
+              setEmbedUrl("");
+              setEmbedError("");
+            }
+          }}
+          placeholder="https://example.com/image.jpg"
+          className="blog-img-url-input"
+        />
+        <button className="blog-img-submit-btn" onClick={handleEmbed} disabled={!embedUrl.trim()}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg></button>
+        <button className="blog-img-cancel-btn" onClick={() => {
+          setMode("idle");
+          setEmbedUrl("");
+          setEmbedError("");
+        }}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg></button>
+        {embedError && <span className="blog-img-error">{embedError}</span>}
+      </div>}
+    </div>;
+  }
+  return <div ref={blockRef} className="blog-img-loaded" tabIndex={0} onPaste={handlePaste}>
+    <div className="blog-img-wrapper">
+      <img src={url} alt={caption || "Image"} className="blog-img-main" draggable={false} />
+      <div className="blog-img-hover-overlay"><div className="blog-img-hover-actions">
+        <button className="blog-img-hover-btn" onClick={handleReplace}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg></button>
+        <button className="blog-img-hover-btn" onClick={() => setEditingCaption(true)}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+          <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+        </svg></button>
+        <button className="blog-img-hover-btn blog-img-hover-delete" onClick={handleDelete}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="3 6 5 6 21 6" />
+          <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
+        </svg></button>
+      </div></div>
+    </div>
+    {editingCaption ? <input
+      type="text"
+      value={captionText}
+      onChange={(e) => setCaptionText(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter")
+          handleCaptionSave();
+        if (e.key === "Escape") {
+          setEditingCaption(false);
+          setCaptionText(caption || "");
+        }
+      }}
+      onBlur={handleCaptionSave}
+      placeholder="Add a caption..."
+      className="blog-img-caption-input"
+      autoFocus
+    /> : <p
+      className={`blog-img-caption ${caption ? "" : "blog-img-caption--empty"}`}
+      onClick={() => {
+        setCaptionText(caption || "");
+        setEditingCaption(true);
+      }}
+    >{caption || "Add a caption..."}</p>}
+  </div>;
+}
+
+// src/blocks/ButtonBlock.jsx
+import { createReactBlockSpec as createReactBlockSpec5 } from "@blocknote/react";
+import { useState as useState7, useEffect as useEffect7, useRef as useRef6 } from "react";
+"use client";
+var BUTTON_ACTIONS = [
+  { value: "link", label: "Open Link" },
+  { value: "copy", label: "Copy Text" },
+  { value: "scroll-top", label: "Scroll to Top" },
+  { value: "share", label: "Share Page" }
+];
+var BUTTON_VARIANTS = [
+  { value: "primary", label: "Primary", cls: "bg-[#9b7bf7] text-[var(--text-primary)] hover:bg-[#b69aff]" },
+  { value: "secondary", label: "Secondary", cls: "bg-[var(--bg-surface)] border border-[var(--border-default)] text-[var(--text-primary)] hover:border-[var(--border-hover)]" },
+  { value: "accent", label: "Accent", cls: "bg-[#9b7bf7] text-[var(--text-primary)] hover:bg-[#b69aff]" }
+];
+var ButtonBlock = createReactBlockSpec5(
+  {
+    type: "buttonBlock",
+    propSchema: {
+      label: { default: "Button" },
+      action: { default: "link" },
+      actionValue: { default: "" },
+      variant: { default: "primary" }
+    },
+    content: "none"
+  },
+  {
+    render: ({ block, editor }) => {
+      const [editing, setEditing] = useState7(!block.props.label || block.props.label === "Button");
+      const [label, setLabel] = useState7(block.props.label);
+      const [action, setAction] = useState7(block.props.action);
+      const [actionValue, setActionValue] = useState7(block.props.actionValue);
+      const [variant, setVariant] = useState7(block.props.variant);
+      const save = () => {
+        editor.updateBlock(block, { props: { label, action, actionValue, variant } });
+        setEditing(false);
+      };
+      if (editing) {
+        return <div className="border border-[var(--border-default)] rounded-xl bg-[var(--bg-surface)] p-4 my-2 space-y-3">
+          <p className="text-[11px] text-[var(--text-muted)] font-medium">Button Block</p>
+          <input
+            type="text"
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            placeholder="Button label"
+            className="w-full bg-[var(--bg-app)] border border-[var(--border-default)] rounded-lg px-3 py-2 text-[13px] text-[var(--text-primary)] outline-none focus:border-[var(--border-hover)] placeholder-[#6b7a8d]"
+          />
+          <div className="flex gap-2">
+            <select value={action} onChange={(e) => setAction(e.target.value)} className="bg-[var(--bg-app)] border border-[var(--border-default)] rounded-lg px-3 py-2 text-[13px] text-[var(--text-primary)] outline-none flex-1">{BUTTON_ACTIONS.map((a) => <option key={a.value} value={a.value}>{a.label}</option>)}</select>
+            <select value={variant} onChange={(e) => setVariant(e.target.value)} className="bg-[var(--bg-app)] border border-[var(--border-default)] rounded-lg px-3 py-2 text-[13px] text-[var(--text-primary)] outline-none">{BUTTON_VARIANTS.map((v) => <option key={v.value} value={v.value}>{v.label}</option>)}</select>
+          </div>
+          {(action === "link" || action === "copy") && <input
+            type="text"
+            value={actionValue}
+            onChange={(e) => setActionValue(e.target.value)}
+            placeholder={action === "link" ? "https://..." : "Text to copy"}
+            className="w-full bg-[var(--bg-app)] border border-[var(--border-default)] rounded-lg px-3 py-2 text-[13px] text-[var(--text-primary)] outline-none focus:border-[var(--border-hover)] placeholder-[#6b7a8d]"
+          />}
+          <div className="flex justify-end gap-2">
+            <button onClick={() => setEditing(false)} className="px-3 py-1 text-[12px] text-[#888] hover:text-[var(--text-primary)] transition-colors">Cancel</button>
+            <button onClick={save} className="px-3 py-1 text-[12px] bg-[#9b7bf7] text-[var(--text-primary)] rounded-md font-medium hover:bg-[#b69aff] transition-colors">Done</button>
+          </div>
+        </div>;
+      }
+      const variantCls = BUTTON_VARIANTS.find((v) => v.value === variant)?.cls || BUTTON_VARIANTS[0].cls;
+      return <div className="my-2" onDoubleClick={() => setEditing(true)}><button className={`px-5 py-2 rounded-lg text-[13px] font-medium transition-colors ${variantCls}`}>{label}</button></div>;
+    }
+  }
+);
+
+// src/blocks/PDFEmbedBlock.jsx
+import { createReactBlockSpec as createReactBlockSpec6 } from "@blocknote/react";
+import { useState as useState8 } from "react";
+"use client";
+var PDFEmbedBlock = createReactBlockSpec6(
+  {
+    type: "pdfEmbed",
+    propSchema: {
+      url: { default: "" },
+      title: { default: "" },
+      fileSize: { default: "" },
+      pageCount: { default: "" }
+    },
+    content: "none"
+  },
+  {
+    render: ({ block, editor }) => {
+      const { url, title, fileSize, pageCount } = block.props;
+      const [inputUrl, setInputUrl] = useState8(url || "");
+      const [loading, setLoading] = useState8(false);
+      const handleSubmit = () => {
+        const trimmed = inputUrl.trim();
+        if (!trimmed)
+          return;
+        setLoading(true);
+        const fileName = decodeURIComponent(trimmed.split("/").pop()?.split("?")[0] || "document.pdf");
+        editor.updateBlock(block, {
+          props: {
+            url: trimmed,
+            title: fileName,
+            fileSize: fileSize || "",
+            pageCount: pageCount || ""
+          }
+        });
+        setLoading(false);
+      };
+      const handleReplace = () => {
+        editor.updateBlock(block, {
+          props: { url: "", title: "", fileSize: "", pageCount: "" }
+        });
+      };
+      const handleDelete = () => {
+        editor.removeBlocks([block]);
+      };
+      if (!url) {
+        return <div style={{
+          background: "rgba(155, 123, 247, 0.04)",
+          border: "1.5px dashed rgba(155, 123, 247, 0.25)",
+          borderRadius: "12px",
+          padding: "24px"
+        }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "12px" }}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9b7bf7" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+              <line x1="16" y1="13" x2="8" y2="13" />
+              <line x1="16" y1="17" x2="8" y2="17" />
+              <polyline points="10 9 9 9 8 9" />
+            </svg>
+            <span style={{ fontSize: "14px", fontWeight: 600, color: "var(--text-primary)" }}>Embed PDF</span>
+          </div>
+          <div style={{ display: "flex", gap: "8px" }}>
+            <input
+              type="text"
+              value={inputUrl}
+              onChange={(e) => setInputUrl(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+              placeholder="Paste PDF link..."
+              style={{
+                flex: 1,
+                background: "var(--bg-app)",
+                color: "var(--text-primary)",
+                border: "1px solid #232d3f",
+                borderRadius: "8px",
+                padding: "8px 12px",
+                fontSize: "13px",
+                outline: "none"
+              }}
+            />
+            <button
+              onClick={handleSubmit}
+              disabled={!inputUrl.trim() || loading}
+              style={{
+                padding: "8px 16px",
+                background: "#9b7bf7",
+                color: "white",
+                border: "none",
+                borderRadius: "8px",
+                fontSize: "13px",
+                fontWeight: 600,
+                cursor: "pointer",
+                opacity: !inputUrl.trim() || loading ? 0.4 : 1
+              }}
+            >{loading ? "..." : "Embed"}</button>
+          </div>
+        </div>;
+      }
+      return <div style={{
+        display: "flex",
+        borderRadius: "12px",
+        overflow: "hidden",
+        border: "1px solid #232d3f",
+        background: "var(--bg-surface)"
+      }}>
+        <div style={{
+          width: "200px",
+          minHeight: "160px",
+          flexShrink: 0,
+          background: "#0d1117",
+          position: "relative",
+          overflow: "hidden"
+        }}>
+          <iframe
+            src={`${url}#toolbar=0&navpanes=0&scrollbar=0&view=FitH`}
+            title={title || "PDF"}
+            style={{
+              width: "100%",
+              height: "100%",
+              border: "none",
+              pointerEvents: "none"
+            }}
+          />
+          <div style={{
+            position: "absolute",
+            inset: 0,
+            background: "linear-gradient(135deg, rgba(155,123,247,0.08) 0%, transparent 60%)",
+            pointerEvents: "none"
+          }} />
+          <div style={{
+            position: "absolute",
+            bottom: "8px",
+            left: "8px",
+            background: "rgba(155, 123, 247, 0.2)",
+            backdropFilter: "blur(8px)",
+            borderRadius: "6px",
+            padding: "3px 8px",
+            fontSize: "10px",
+            fontWeight: 700,
+            color: "#c4b5fd",
+            letterSpacing: "0.5px",
+            textTransform: "uppercase"
+          }}>PDF</div>
+        </div>
+        <div style={{ flex: 1, padding: "16px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
+          <div>
+            <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" }}>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9b7bf7" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                <polyline points="14 2 14 8 20 8" />
+              </svg>
+              <span style={{ fontSize: "14px", fontWeight: 600, color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{title || "Document"}</span>
+            </div>
+            <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+              {fileSize && <span style={{ fontSize: "12px", color: "var(--text-muted)", display: "flex", alignItems: "center", gap: "4px" }}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" /></svg>
+                {fileSize}
+              </span>}
+              {pageCount && <span style={{ fontSize: "12px", color: "var(--text-muted)", display: "flex", alignItems: "center", gap: "4px" }}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M4 19.5A2.5 2.5 0 016.5 17H20" />
+                  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" />
+                </svg>
+                {pageCount}
+                {" pages"}
+              </span>}
+            </div>
+          </div>
+          <div style={{ display: "flex", gap: "8px", marginTop: "12px" }}>
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{
+                padding: "6px 12px",
+                background: "rgba(155,123,247,0.1)",
+                border: "1px solid rgba(155,123,247,0.25)",
+                borderRadius: "6px",
+                fontSize: "12px",
+                color: "#a78bfa",
+                fontWeight: 500,
+                textDecoration: "none",
+                cursor: "pointer"
+              }}
+            >Open PDF</a>
+            <button onClick={handleReplace} style={{
+              padding: "6px 12px",
+              background: "rgba(255,255,255,0.04)",
+              border: "1px solid #232d3f",
+              borderRadius: "6px",
+              fontSize: "12px",
+              color: "var(--text-muted)",
+              cursor: "pointer"
+            }}>Replace</button>
+            <button onClick={handleDelete} style={{
+              padding: "6px 12px",
+              background: "rgba(248,113,113,0.06)",
+              border: "1px solid rgba(248,113,113,0.2)",
+              borderRadius: "6px",
+              fontSize: "12px",
+              color: "#f87171",
+              cursor: "pointer"
+            }}>Delete</button>
+          </div>
+        </div>
+      </div>;
+    }
+  }
+);
+
+// src/editor/LinkPreviewTooltip.jsx
+import { useState as useState9, useEffect as useEffect8, useRef as useRef7, useCallback as useCallback6 } from "react";
+"use client";
+var previewCache = /* @__PURE__ */ new Map();
+var linkPreviewEndpoint = "/api/link-preview";
+function setLinkPreviewEndpoint(endpoint) {
+  linkPreviewEndpoint = endpoint;
+}
+async function fetchPreview(url) {
+  if (previewCache.has(url))
+    return previewCache.get(url);
+  try {
+    const res = await fetch(`${linkPreviewEndpoint}?url=${encodeURIComponent(url)}`);
+    if (!res.ok)
+      throw new Error("fetch failed");
+    const data = await res.json();
+    previewCache.set(url, data);
+    return data;
+  } catch {
+    const fallback = { title: new URL(url).hostname, description: "", image: "", favicon: "", domain: new URL(url).hostname };
+    previewCache.set(url, fallback);
+    return fallback;
+  }
+}
+function LinkPreviewTooltip({ anchorEl, url, onClose }) {
+  const [data, setData] = useState9(null);
+  const [loading, setLoading] = useState9(true);
+  const tooltipRef = useRef7(null);
+  const hoverRef = useRef7(false);
+  const hideTimerRef = useRef7(null);
+  useEffect8(() => {
+    if (!url)
+      return;
+    setLoading(true);
+    fetchPreview(url).then((d) => {
+      setData(d);
+      setLoading(false);
+    });
+  }, [url]);
+  const posRef = useRef7(null);
+  if (!posRef.current && anchorEl) {
+    const rect = anchorEl.getBoundingClientRect();
+    const tooltipWidth = 320;
+    const tooltipHeight = 300;
+    let left = rect.left + rect.width / 2 - tooltipWidth / 2;
+    left = Math.max(8, Math.min(left, window.innerWidth - tooltipWidth - 8));
+    const spaceBelow = window.innerHeight - rect.bottom;
+    if (spaceBelow >= tooltipHeight || spaceBelow >= rect.top) {
+      posRef.current = { top: rect.bottom + 4, left };
+    } else {
+      posRef.current = { bottom: window.innerHeight - rect.top + 4, left, useBottom: true };
+    }
+  }
+  const scheduleHide = useCallback6(() => {
+    clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      if (!hoverRef.current)
+        onClose();
+    }, 200);
+  }, [onClose]);
+  useEffect8(() => {
+    if (!anchorEl)
+      return;
+    const onEnter = () => {
+      hoverRef.current = true;
+      clearTimeout(hideTimerRef.current);
+    };
+    const onLeave = () => {
+      hoverRef.current = false;
+      scheduleHide();
+    };
+    anchorEl.addEventListener("mouseenter", onEnter);
+    anchorEl.addEventListener("mouseleave", onLeave);
+    return () => {
+      anchorEl.removeEventListener("mouseenter", onEnter);
+      anchorEl.removeEventListener("mouseleave", onLeave);
+    };
+  }, [anchorEl, scheduleHide]);
+  const onTooltipEnter = useCallback6(() => {
+    hoverRef.current = true;
+    clearTimeout(hideTimerRef.current);
+  }, []);
+  const onTooltipLeave = useCallback6(() => {
+    hoverRef.current = false;
+    scheduleHide();
+  }, [scheduleHide]);
+  useEffect8(() => {
+    return () => clearTimeout(hideTimerRef.current);
+  }, []);
+  if (!url || !posRef.current)
+    return null;
+  const style = posRef.current.useBottom ? { bottom: posRef.current.bottom, left: posRef.current.left } : { top: posRef.current.top, left: posRef.current.left };
+  return <div
+    ref={tooltipRef}
+    className="link-preview-tooltip"
+    style={style}
+    onMouseEnter={onTooltipEnter}
+    onMouseLeave={onTooltipLeave}
+  >{loading ? <div className="link-preview-loading">
+    <div className="link-preview-skeleton" style={{ width: "60%", height: 12 }} />
+    <div className="link-preview-skeleton" style={{ width: "90%", height: 10, marginTop: 8 }} />
+    <div className="link-preview-skeleton" style={{ width: "40%", height: 10, marginTop: 4 }} />
+  </div> : data ? <a href={url} target="_blank" rel="noopener noreferrer" className="link-preview-card">
+    {data.image && <div className="link-preview-image"><img src={data.image} alt="" onError={(e) => {
+      e.target.style.display = "none";
+    }} /></div>}
+    <div className="link-preview-body">
+      <div className="link-preview-title">{data.title}</div>
+      {data.description && <div className="link-preview-desc">{data.description.length > 120 ? data.description.slice(0, 120) + "..." : data.description}</div>}
+      <div className="link-preview-domain">
+        {data.favicon && <img src={data.favicon} alt="" className="link-preview-favicon" onError={(e) => {
+          e.target.style.display = "none";
+        }} />}
+        <span>{data.domain}</span>
+      </div>
+    </div>
+  </a> : null}</div>;
+}
+function useLinkPreview() {
+  const [preview, setPreview] = useState9(null);
+  const showTimerRef = useRef7(null);
+  const show = useCallback6((anchorEl, url) => {
+    clearTimeout(showTimerRef.current);
+    showTimerRef.current = setTimeout(() => {
+      setPreview({ anchorEl, url });
+    }, 400);
+  }, []);
+  const hide = useCallback6(() => {
+    clearTimeout(showTimerRef.current);
+    setPreview(null);
+  }, []);
+  const cancel = useCallback6(() => {
+    clearTimeout(showTimerRef.current);
+  }, []);
+  useEffect8(() => {
+    return () => clearTimeout(showTimerRef.current);
+  }, []);
+  return { preview, show, hide, cancel };
+}
+
+// src/editor/LixEditor.jsx
+"use client";
+var DEFAULT_LANGUAGES = {
+  text: { name: "Text" },
+  javascript: { name: "JavaScript", aliases: ["js"] },
+  typescript: { name: "TypeScript", aliases: ["ts"] },
+  python: { name: "Python", aliases: ["py"] },
+  java: { name: "Java" },
+  c: { name: "C" },
+  cpp: { name: "C++" },
+  csharp: { name: "C#", aliases: ["cs"] },
+  go: { name: "Go" },
+  rust: { name: "Rust", aliases: ["rs"] },
+  ruby: { name: "Ruby", aliases: ["rb"] },
+  php: { name: "PHP" },
+  swift: { name: "Swift" },
+  kotlin: { name: "Kotlin", aliases: ["kt"] },
+  html: { name: "HTML" },
+  css: { name: "CSS" },
+  json: { name: "JSON" },
+  yaml: { name: "YAML", aliases: ["yml"] },
+  markdown: { name: "Markdown", aliases: ["md"] },
+  bash: { name: "Bash", aliases: ["sh"] },
+  shell: { name: "Shell" },
+  sql: { name: "SQL" },
+  graphql: { name: "GraphQL", aliases: ["gql"] },
+  jsx: { name: "JSX" },
+  tsx: { name: "TSX" },
+  vue: { name: "Vue" },
+  svelte: { name: "Svelte" },
+  dart: { name: "Dart" },
+  lua: { name: "Lua" },
+  r: { name: "R" },
+  scala: { name: "Scala" }
+};
+var LixEditor = forwardRef(function LixEditor2({
+  initialContent,
+  onChange,
+  features = {},
+  codeLanguages,
+  extraBlockSpecs = [],
+  extraInlineSpecs = [],
+  slashMenuItems: extraSlashItems = [],
+  placeholder = "Type '/' for commands...",
+  collaboration,
+  onReady,
+  children
+}, ref) {
+  const { isDark } = useLixTheme();
+  const wrapperRef = useRef8(null);
+  const editorLinkPreview = useLinkPreview();
+  const f = {
+    equations: true,
+    mermaid: true,
+    codeHighlighting: true,
+    tableOfContents: true,
+    images: true,
+    buttons: true,
+    pdf: true,
+    dates: true,
+    linkPreview: true,
+    markdownLinks: true,
+    ...features
+  };
+  const langs = codeLanguages || DEFAULT_LANGUAGES;
+  const codeBlock = f.codeHighlighting ? createCodeBlockSpec({
+    supportedLanguages: langs,
+    createHighlighter: async () => {
+      const { createHighlighter } = await import("shiki");
+      return createHighlighter({
+        themes: ["vitesse-dark", "vitesse-light"],
+        langs: Object.keys(langs).filter((k) => k !== "text")
+      });
+    }
+  }) : void 0;
+  const schema = useMemo(() => {
+    const blockSpecs = { ...defaultBlockSpecs };
+    if (codeBlock)
+      blockSpecs.codeBlock = codeBlock;
+    if (f.equations)
+      blockSpecs.blockEquation = BlockEquation({});
+    if (f.mermaid)
+      blockSpecs.mermaidBlock = MermaidBlock({});
+    if (f.tableOfContents)
+      blockSpecs.tableOfContents = TableOfContents({});
+    if (f.images)
+      blockSpecs.image = BlogImageBlock({});
+    if (f.buttons)
+      blockSpecs.buttonBlock = ButtonBlock({});
+    if (f.pdf)
+      blockSpecs.pdfEmbed = PDFEmbedBlock({});
+    for (const spec of extraBlockSpecs) {
+      if (spec.type && spec.spec)
+        blockSpecs[spec.type] = spec.spec;
+    }
+    const inlineContentSpecs = { ...defaultInlineContentSpecs };
+    if (f.equations)
+      inlineContentSpecs.inlineEquation = InlineEquation;
+    if (f.dates)
+      inlineContentSpecs.dateInline = DateInline;
+    for (const spec of extraInlineSpecs) {
+      if (spec.type && spec.spec)
+        inlineContentSpecs[spec.type] = spec.spec;
+    }
+    return BlockNoteSchema.create({ blockSpecs, inlineContentSpecs });
+  }, []);
+  const sanitized = useMemo(() => {
+    if (!initialContent)
+      return void 0;
+    let blocks = initialContent;
+    if (typeof blocks === "string") {
+      try {
+        blocks = JSON.parse(blocks);
+      } catch {
+        return void 0;
+      }
+    }
+    if (!Array.isArray(blocks) || blocks.length === 0)
+      return void 0;
+    return blocks;
+  }, [initialContent]);
+  const editor = useCreateBlockNote({
+    schema,
+    ...collaboration ? { collaboration } : { initialContent: sanitized || void 0 },
+    domAttributes: { editor: { class: "lix-editor" } },
+    placeholders: { default: placeholder }
+  });
+  useImperativeHandle(ref, () => ({
+    getDocument: () => editor.document,
+    getEditor: () => editor,
+    getBlocks: () => editor.document,
+    getHTML: async () => await editor.blocksToHTMLLossy(editor.document),
+    getMarkdown: async () => await editor.blocksToMarkdownLossy(editor.document)
+  }), [editor]);
+  useEffect9(() => {
+    if (onReady)
+      onReady();
+  }, []);
+  useEffect9(() => {
+    if (!f.markdownLinks || !editor)
+      return;
+    const tiptap = editor._tiptapEditor;
+    if (!tiptap)
+      return;
+    const handleInput = () => {
+      const { state, view } = tiptap;
+      const { $from } = state.selection;
+      const textBefore = $from.parent.textBetween(0, $from.parentOffset, void 0, "\uFFFC");
+      const imgMatch = textBefore.match(/!\[([^\]]*)\]\((https?:\/\/[^\s)]+)\)$/);
+      if (imgMatch) {
+        const [fullMatch2, alt, imgUrl] = imgMatch;
+        const from2 = $from.pos - fullMatch2.length;
+        view.dispatch(state.tr.delete(from2, $from.pos));
+        const cursorBlock = editor.getTextCursorPosition().block;
+        editor.insertBlocks(
+          [{ type: "image", props: { url: imgUrl, caption: alt || "" } }],
+          cursorBlock,
+          "after"
+        );
+        requestAnimationFrame(() => {
+          try {
+            const block = editor.getTextCursorPosition().block;
+            if (block?.type === "paragraph" && !(block.content || []).some((c) => c.text?.trim())) {
+              editor.removeBlocks([block.id]);
+            }
+          } catch {
+          }
+        });
+        return;
+      }
+      const match = textBefore.match(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)$/);
+      if (!match)
+        return;
+      const [fullMatch, linkText, url] = match;
+      const from = $from.pos - fullMatch.length;
+      const linkMark = state.schema.marks.link.create({ href: url });
+      const tr = state.tr.delete(from, $from.pos).insertText(linkText, from).addMark(from, from + linkText.length, linkMark);
+      view.dispatch(tr);
+    };
+    tiptap.on("update", handleInput);
+    return () => tiptap.off("update", handleInput);
+  }, [editor, f.markdownLinks]);
+  useEffect9(() => {
+    if (!f.linkPreview)
+      return;
+    const wrapper = wrapperRef.current;
+    if (!wrapper)
+      return;
+    const handleMouseOver = (e) => {
+      const link = e.target.closest("a[href]");
+      if (!link || link.closest(".bn-link-toolbar") || link.closest(".bn-toolbar"))
+        return;
+      const href = link.getAttribute("href");
+      if (href && href.startsWith("http"))
+        editorLinkPreview.show(link, href);
+    };
+    const handleMouseOut = (e) => {
+      const link = e.target.closest("a[href]");
+      if (!link)
+        return;
+      editorLinkPreview.cancel();
+    };
+    const handleClick = (e) => {
+      if (!(e.ctrlKey || e.metaKey))
+        return;
+      const link = e.target.closest("a[href]");
+      if (!link || link.closest(".bn-link-toolbar"))
+        return;
+      const href = link.getAttribute("href");
+      if (href && href.startsWith("http")) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(href, "_blank", "noopener,noreferrer");
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.ctrlKey || e.metaKey)
+        wrapper.classList.add("ctrl-held");
+    };
+    const handleKeyUp = () => wrapper.classList.remove("ctrl-held");
+    wrapper.addEventListener("mouseover", handleMouseOver);
+    wrapper.addEventListener("mouseout", handleMouseOut);
+    wrapper.addEventListener("click", handleClick);
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      wrapper.removeEventListener("mouseover", handleMouseOver);
+      wrapper.removeEventListener("mouseout", handleMouseOut);
+      wrapper.removeEventListener("click", handleClick);
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [f.linkPreview]);
+  const getItems = useCallback7(async (query) => {
+    const defaults = getDefaultReactSlashMenuItems(editor).filter((item) => !["video", "audio", "file"].includes(item.key));
+    const custom = [];
+    if (f.equations) {
+      custom.push({
+        title: "Block Equation",
+        subtext: "LaTeX block equation",
+        group: "Advanced",
+        icon: <span style={{ fontSize: 16 }}>{"\u2211"}</span>,
+        onItemClick: () => editor.insertBlocks([{ type: "blockEquation" }], editor.getTextCursorPosition().block, "after")
+      });
+    }
+    if (f.mermaid) {
+      custom.push({
+        title: "Diagram",
+        subtext: "Mermaid diagram (flowchart, sequence, etc.)",
+        group: "Advanced",
+        icon: <span style={{ fontSize: 14 }}>{"\u25C7"}</span>,
+        onItemClick: () => editor.insertBlocks([{ type: "mermaidBlock" }], editor.getTextCursorPosition().block, "after")
+      });
+    }
+    if (f.tableOfContents) {
+      custom.push({
+        title: "Table of Contents",
+        subtext: "Auto-generated document outline",
+        group: "Advanced",
+        icon: <span style={{ fontSize: 14 }}>{"\u2630"}</span>,
+        onItemClick: () => editor.insertBlocks([{ type: "tableOfContents" }], editor.getTextCursorPosition().block, "after")
+      });
+    }
+    return [...defaults, ...custom, ...extraSlashItems].filter((item) => item.title.toLowerCase().includes(query.toLowerCase()));
+  }, [editor, f, extraSlashItems]);
+  const handleChange = useCallback7(() => {
+    if (onChange)
+      onChange(editor);
+  }, [editor, onChange]);
+  return <div className={`lix-editor-wrapper${""}`} ref={wrapperRef} style={{ position: "relative" }}>
+    <BlockNoteView
+      editor={editor}
+      onChange={handleChange}
+      theme={isDark ? "dark" : "light"}
+      slashMenu={false}
+    >
+      <SuggestionMenuController triggerCharacter="/" getItems={getItems} />
+      <TableHandlesController />
+      {children}
+    </BlockNoteView>
+    {f.linkPreview && editorLinkPreview.preview && <LinkPreviewTooltip
+      anchorEl={editorLinkPreview.preview.anchorEl}
+      url={editorLinkPreview.preview.url}
+      onClose={editorLinkPreview.hide}
+    />}
+  </div>;
+});
+var LixEditor_default = LixEditor;
+
+// src/preview/LixPreview.jsx
+import { useEffect as useEffect10, useRef as useRef9, useState as useState11, useCallback as useCallback8 } from "react";
+
+// src/preview/renderBlocks.js
+function renderBlocksToHTML(blocks) {
+  if (!blocks || !blocks.length)
+    return "";
+  function inlineToHTML(content) {
+    if (!content || !Array.isArray(content))
+      return "";
+    return content.map((c) => {
+      if (c.type === "inlineEquation" && c.props?.latex) {
+        return `<span class="lix-inline-equation" data-latex="${encodeURIComponent(c.props.latex)}"></span>`;
+      }
+      if (c.type === "dateInline" && c.props?.date) {
+        let formatted;
+        try {
+          formatted = new Date(c.props.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+        } catch {
+          formatted = c.props.date;
+        }
+        return `<span class="lix-date-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> ${formatted}</span>`;
+      }
+      if (c.type === "link" && c.href) {
+        const linkText = c.content ? inlineToHTML(c.content) : (c.text || c.href).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        return `<a href="${c.href}">${linkText || c.href}</a>`;
+      }
+      let text = (c.text || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      if (!text)
+        return "";
+      const s = c.styles || {};
+      if (s.bold)
+        text = `<strong>${text}</strong>`;
+      if (s.italic)
+        text = `<em>${text}</em>`;
+      if (s.strike)
+        text = `<del>${text}</del>`;
+      if (s.code)
+        text = `<code>${text}</code>`;
+      if (s.underline)
+        text = `<u>${text}</u>`;
+      if (s.textColor)
+        text = `<span style="color:${s.textColor}">${text}</span>`;
+      if (s.backgroundColor)
+        text = `<span style="background:${s.backgroundColor};border-radius:3px;padding:0 2px">${text}</span>`;
+      return text;
+    }).join("");
+  }
+  const headings = [];
+  function collectHeadings(blockList) {
+    for (const block of blockList) {
+      if (block.type === "heading") {
+        const text = (block.content || []).map((c) => c.text || "").join("");
+        if (text.trim()) {
+          const id = `h-${text.trim().toLowerCase().replace(/[^\w]+/g, "-").slice(0, 40)}`;
+          headings.push({ id, text: text.trim(), level: block.props?.level || 1 });
+        }
+      }
+      if (block.children?.length)
+        collectHeadings(block.children);
+    }
+  }
+  collectHeadings(blocks);
+  function renderBlock(block) {
+    const content = inlineToHTML(block.content);
+    const childrenHTML = block.children?.length ? renderListGroup(block.children) : "";
+    switch (block.type) {
+      case "tableOfContents":
+        return "__TOC_PLACEHOLDER__";
+      case "heading": {
+        const level = block.props?.level || 1;
+        const text = (block.content || []).map((c) => c.text || "").join("");
+        const id = `h-${text.trim().toLowerCase().replace(/[^\w]+/g, "-").slice(0, 40)}`;
+        return `<h${level} id="${id}">${content}</h${level}>${childrenHTML}`;
+      }
+      case "bulletListItem":
+        return `<li class="lix-bullet">${content}${childrenHTML}</li>`;
+      case "numberedListItem":
+        return `<li class="lix-numbered">${content}${childrenHTML}</li>`;
+      case "checkListItem": {
+        const checked = !!block.props?.checked;
+        const cb = `<span class="lix-checkbox${checked ? " lix-checkbox--checked" : ""}"><span class="lix-checkbox-icon">${checked ? '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>' : ""}</span></span>`;
+        return `<li class="lix-check${checked ? " lix-check--checked" : ""}">${cb}<span class="lix-check-text">${content}</span>${childrenHTML}</li>`;
+      }
+      case "blockEquation":
+        if (block.props?.latex)
+          return `<div class="lix-block-equation" data-latex="${encodeURIComponent(block.props.latex)}"></div>${childrenHTML}`;
+        return childrenHTML;
+      case "mermaidBlock":
+        if (block.props?.diagram)
+          return `<div class="lix-mermaid-block" data-diagram="${encodeURIComponent(block.props.diagram)}"></div>${childrenHTML}`;
+        return childrenHTML;
+      case "divider":
+        return `<hr class="lix-divider" />${childrenHTML}`;
+      case "codeBlock": {
+        const lang = block.props?.language || "";
+        const code = (block.content || []).map((c) => c.text || "").join("");
+        return `<pre><code class="language-${lang}">${code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</code></pre>${childrenHTML}`;
+      }
+      case "image":
+        if (block.props?.url) {
+          return `<figure><img src="${block.props.url}" alt="${block.props?.caption || ""}" />${block.props?.caption ? `<figcaption>${block.props.caption}</figcaption>` : ""}</figure>${childrenHTML}`;
+        }
+        return childrenHTML;
+      case "table": {
+        const rows = block.content?.rows || [];
+        if (!rows.length)
+          return childrenHTML;
+        const headerRows = block.content?.headerRows || 0;
+        let table = "<table>";
+        rows.forEach((row, ri) => {
+          table += "<tr>";
+          (row.cells || []).forEach((cell) => {
+            const tag = ri < headerRows ? "th" : "td";
+            let cellContent;
+            if (Array.isArray(cell))
+              cellContent = cell;
+            else if (cell?.content)
+              cellContent = Array.isArray(cell.content) ? cell.content : [];
+            else
+              cellContent = [];
+            table += `<${tag}>${inlineToHTML(cellContent)}</${tag}>`;
+          });
+          table += "</tr>";
+        });
+        table += "</table>";
+        return table + childrenHTML;
+      }
+      case "paragraph":
+      default:
+        if (content)
+          return `<p>${content}</p>${childrenHTML}`;
+        return childrenHTML || "";
+    }
+  }
+  function renderListGroup(blockList) {
+    if (!blockList?.length)
+      return "";
+    const out = [];
+    let i = 0;
+    while (i < blockList.length) {
+      const block = blockList[i];
+      if (block.type === "bulletListItem") {
+        let items = "";
+        while (i < blockList.length && blockList[i].type === "bulletListItem") {
+          items += renderBlock(blockList[i]);
+          i++;
+        }
+        out.push(`<ul>${items}</ul>`);
+      } else if (block.type === "numberedListItem") {
+        let items = "";
+        while (i < blockList.length && blockList[i].type === "numberedListItem") {
+          items += renderBlock(blockList[i]);
+          i++;
+        }
+        out.push(`<ol>${items}</ol>`);
+      } else if (block.type === "checkListItem") {
+        let items = "";
+        while (i < blockList.length && blockList[i].type === "checkListItem") {
+          items += renderBlock(blockList[i]);
+          i++;
+        }
+        out.push(`<ul class="lix-checklist">${items}</ul>`);
+      } else {
+        out.push(renderBlock(block));
+        i++;
+      }
+    }
+    return out.join("\n");
+  }
+  let html = renderListGroup(blocks);
+  if (headings.length > 0) {
+    const tocItems = headings.map((h) => {
+      const indent = (h.level - 1) * 16;
+      return `<li><a href="#${h.id}" class="lix-toc-link" style="padding-left:${indent}px">${h.text}</a></li>`;
+    }).join("");
+    const tocHTML = `<div class="lix-toc-block"><p class="lix-toc-label">Table of Contents</p><ul class="lix-toc-list">${tocItems}</ul></div>`;
+    html = html.replace("__TOC_PLACEHOLDER__", tocHTML);
+  } else {
+    html = html.replace("__TOC_PLACEHOLDER__", "");
+  }
+  return html;
+}
+
+// src/preview/LixPreview.jsx
+"use client";
+function LixPreview({ blocks, html, features = {}, className = "" }) {
+  const { isDark } = useLixTheme();
+  const contentRef = useRef9(null);
+  const linkPreview = useLinkPreview();
+  const linkPreviewRef = useRef9(linkPreview);
+  linkPreviewRef.current = linkPreview;
+  const f = {
+    equations: true,
+    mermaid: true,
+    codeHighlighting: true,
+    linkPreview: true,
+    ...features
+  };
+  const renderedHTML = blocks && blocks.length > 0 ? renderBlocksToHTML(blocks) : html || "";
+  const effectGenRef = useRef9(0);
+  useEffect10(() => {
+    const root = contentRef.current;
+    if (!root)
+      return;
+    const gen = ++effectGenRef.current;
+    root.innerHTML = renderedHTML || "";
+    function isStale() {
+      return effectGenRef.current !== gen;
+    }
+    if (f.equations) {
+      const eqEls = root.querySelectorAll(".lix-block-equation[data-latex]");
+      const inlineEls = root.querySelectorAll(".lix-inline-equation[data-latex]");
+      if (eqEls.length || inlineEls.length) {
+        import("katex").then((mod) => {
+          if (isStale())
+            return;
+          const katex3 = mod.default || mod;
+          const strip = (raw) => {
+            let s = raw.trim();
+            if (s.startsWith("\\[") && s.endsWith("\\]"))
+              return s.slice(2, -2).trim();
+            if (s.startsWith("$$") && s.endsWith("$$"))
+              return s.slice(2, -2).trim();
+            if (s.startsWith("\\(") && s.endsWith("\\)"))
+              return s.slice(2, -2).trim();
+            if (s.startsWith("$") && s.endsWith("$") && s.length > 2)
+              return s.slice(1, -1).trim();
+            return s;
+          };
+          eqEls.forEach((el) => {
+            if (!el.isConnected)
+              return;
+            try {
+              el.innerHTML = katex3.renderToString(strip(decodeURIComponent(el.dataset.latex)), { displayMode: true, throwOnError: false });
+            } catch (err) {
+              el.innerHTML = `<span style="color:#f87171">${err.message}</span>`;
+            }
+          });
+          inlineEls.forEach((el) => {
+            if (!el.isConnected)
+              return;
+            try {
+              el.innerHTML = katex3.renderToString(strip(decodeURIComponent(el.dataset.latex)), { displayMode: false, throwOnError: false });
+            } catch (err) {
+              el.innerHTML = `<span style="color:#f87171">${err.message}</span>`;
+            }
+          });
+        }).catch(() => {
+        });
+      }
+    }
+    if (f.mermaid) {
+      const mermaidEls = root.querySelectorAll(".lix-mermaid-block[data-diagram]");
+      if (mermaidEls.length) {
+        import("mermaid").then((mod) => {
+          if (isStale())
+            return;
+          const mermaid = mod.default || mod;
+          mermaid.initialize({
+            startOnLoad: false,
+            securityLevel: "loose",
+            theme: isDark ? "dark" : "default",
+            flowchart: { useMaxWidth: false, padding: 20 }
+          });
+          (async () => {
+            for (const el of mermaidEls) {
+              const id = `lix-mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+              try {
+                const diagram = decodeURIComponent(el.dataset.diagram).trim();
+                const tempDiv = document.createElement("div");
+                tempDiv.id = "c-" + id;
+                tempDiv.style.cssText = "position:fixed;top:0;left:0;width:100vw;opacity:0;pointer-events:none;z-index:-9999;";
+                document.body.appendChild(tempDiv);
+                const { svg } = await mermaid.render(id, diagram, tempDiv);
+                tempDiv.remove();
+                if (el.isConnected && !isStale()) {
+                  el.innerHTML = svg;
+                  const svgEl = el.querySelector("svg");
+                  if (svgEl) {
+                    svgEl.removeAttribute("width");
+                    svgEl.style.width = "100%";
+                    svgEl.style.height = "auto";
+                  }
+                }
+              } catch (err) {
+                if (el.isConnected)
+                  el.innerHTML = `<pre style="color:#f87171;font-size:12px">${err.message || "Diagram error"}</pre>`;
+                try {
+                  document.getElementById(id)?.remove();
+                  document.getElementById("c-" + id)?.remove();
+                } catch {
+                }
+              }
+            }
+          })();
+        }).catch(() => {
+        });
+      }
+    }
+    if (f.codeHighlighting) {
+      const codeEls = root.querySelectorAll('pre > code[class*="language-"]');
+      if (codeEls.length) {
+        import("shiki").then(({ createHighlighter }) => {
+          if (isStale())
+            return;
+          const langs = /* @__PURE__ */ new Set();
+          codeEls.forEach((el) => {
+            const m = el.className.match(/language-(\w+)/);
+            if (m?.[1] && m[1] !== "text")
+              langs.add(m[1]);
+          });
+          return createHighlighter({ themes: ["vitesse-dark", "vitesse-light"], langs: [...langs] }).then((hl) => {
+            if (isStale())
+              return;
+            const theme = isDark ? "vitesse-dark" : "vitesse-light";
+            codeEls.forEach((codeEl) => {
+              const pre = codeEl.parentElement;
+              if (!pre || pre.dataset.highlighted)
+                return;
+              pre.dataset.highlighted = "true";
+              const m = codeEl.className.match(/language-(\w+)/);
+              const lang = m?.[1] || "text";
+              const code = codeEl.textContent || "";
+              if (lang !== "text" && langs.has(lang)) {
+                try {
+                  const html2 = hl.codeToHtml(code, { lang, theme });
+                  const tmp = document.createElement("div");
+                  tmp.innerHTML = html2;
+                  const shikiPre = tmp.querySelector("pre");
+                  if (shikiPre)
+                    codeEl.innerHTML = shikiPre.querySelector("code")?.innerHTML || codeEl.innerHTML;
+                } catch {
+                }
+              }
+              pre.style.position = "relative";
+              const label = document.createElement("span");
+              label.className = "lix-code-lang-label";
+              label.textContent = lang;
+              pre.appendChild(label);
+              const btn = document.createElement("button");
+              btn.className = "lix-code-copy-btn";
+              btn.title = "Copy code";
+              btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+              btn.onclick = () => {
+                navigator.clipboard.writeText(code);
+                btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
+                btn.style.color = "#86efac";
+                setTimeout(() => {
+                  btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+                  btn.style.color = "";
+                }, 1500);
+              };
+              pre.appendChild(btn);
+            });
+          });
+        }).catch(() => {
+        });
+      }
+    }
+    if (f.linkPreview) {
+      const externalLinks = root.querySelectorAll('a[href^="http"]');
+      const handlers = [];
+      externalLinks.forEach((link) => {
+        const href = link.getAttribute("href");
+        if (!href)
+          return;
+        const onEnter = () => linkPreviewRef.current.show(link, href);
+        const onLeave = () => linkPreviewRef.current.cancel();
+        link.addEventListener("mouseenter", onEnter);
+        link.addEventListener("mouseleave", onLeave);
+        handlers.push({ el: link, onEnter, onLeave });
+      });
+      return () => handlers.forEach(({ el, onEnter, onLeave }) => {
+        el.removeEventListener("mouseenter", onEnter);
+        el.removeEventListener("mouseleave", onLeave);
+      });
+    }
+  }, [renderedHTML, isDark]);
+  return <div className={`lix-preview ${className}`}>
+    <div ref={contentRef} className="lix-preview-content" />
+    {f.linkPreview && linkPreview.preview && <LinkPreviewTooltip
+      anchorEl={linkPreview.preview.anchorEl}
+      url={linkPreview.preview.url}
+      onClose={linkPreview.hide}
+    />}
+  </div>;
+}
+
+// src/editor/KeyboardShortcutsModal.jsx
+import { useEffect as useEffect11, useRef as useRef10 } from "react";
+"use client";
+var SHORTCUT_GROUPS = [
+  {
+    title: "General",
+    shortcuts: [
+      { keys: ["Ctrl", "S"], desc: "Save & sync to cloud" },
+      { keys: ["Ctrl", "O"], desc: "Import markdown file (.md)" },
+      { keys: ["Ctrl", "Shift", "I"], desc: "Invite collaborators" },
+      { keys: ["Ctrl", "D"], desc: "Insert date chip" },
+      { keys: ["Ctrl", "Shift", "P"], desc: "Toggle editor / preview" },
+      { keys: ["Ctrl", "Z"], desc: "Undo" },
+      { keys: ["Ctrl", "Shift", "Z"], desc: "Redo" },
+      { keys: ["Ctrl", "A"], desc: "Select all" },
+      { keys: ["?"], desc: "Show this help" }
+    ]
+  },
+  {
+    title: "Text Formatting",
+    shortcuts: [
+      { keys: ["Ctrl", "B"], desc: "Bold" },
+      { keys: ["Ctrl", "I"], desc: "Italic" },
+      { keys: ["Ctrl", "U"], desc: "Underline" },
+      { keys: ["Ctrl", "E"], desc: "Code (inline)" },
+      { keys: ["Ctrl", "Shift", "S"], desc: "Strikethrough" },
+      { keys: ["Ctrl", "K"], desc: "Add link" }
+    ]
+  },
+  {
+    title: "Blocks",
+    shortcuts: [
+      { keys: ["/"], desc: "Slash commands menu" },
+      { keys: ["Space"], desc: "AI assistant (on empty line)" },
+      { keys: ["@"], desc: "Mention user/blog/org" },
+      { keys: ["Tab"], desc: "Indent block" },
+      { keys: ["Shift", "Tab"], desc: "Outdent block" },
+      { keys: ["Enter"], desc: "New block" },
+      { keys: ["Backspace"], desc: "Delete block (when empty)" }
+    ]
+  },
+  {
+    title: "AI",
+    shortcuts: [
+      { keys: ["Space"], desc: "Open AI prompt (empty line)" },
+      { keys: ["\u2605", "click"], desc: "AI edit selected text" },
+      { keys: ["Esc"], desc: "Cancel AI / close menu" }
+    ]
+  }
+];
+function KeyboardShortcutsModal({ onClose }) {
+  const ref = useRef10(null);
+  useEffect11(() => {
+    function handleKey(e) {
+      if (e.key === "Escape")
+        onClose();
+    }
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target))
+        onClose();
+    }
+    document.addEventListener("keydown", handleKey);
+    document.addEventListener("mousedown", handleClick);
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [onClose]);
+  return <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30 backdrop-blur-sm"><div
+    ref={ref}
+    className="w-full max-w-[520px] max-h-[80vh] rounded-2xl shadow-2xl overflow-hidden"
+    style={{ backgroundColor: "var(--card-bg)", border: "1px solid var(--border-default)", boxShadow: "var(--shadow-lg)" }}
+  >
+    <div className="flex items-center justify-between px-6 py-4" style={{ borderBottom: "1px solid var(--divider)" }}>
+      <div className="flex items-center gap-2.5">
+        <ion-icon name="keypad-outline" style={{ fontSize: "18px", color: "#9b7bf7" }} />
+        <h2 className="text-[15px] font-bold" style={{ color: "var(--text-primary)" }}>Keyboard Shortcuts</h2>
+      </div>
+      <button
+        onClick={onClose}
+        className="transition-colors p-1"
+        style={{ color: "var(--text-faint)" }}
+      ><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg></button>
+    </div>
+    <div className="overflow-y-auto max-h-[calc(80vh-60px)] p-6 space-y-6 scrollbar-thin">{SHORTCUT_GROUPS.map((group) => <div key={group.title}>
+      <h3 className="text-[11px] font-semibold uppercase tracking-wider mb-3" style={{ color: "#9b7bf7" }}>{group.title}</h3>
+      <div className="space-y-1">{group.shortcuts.map((s, i) => <div key={i} className="flex items-center justify-between py-1.5">
+        <span className="text-[13px]" style={{ color: "var(--text-body)" }}>{s.desc}</span>
+        <div className="flex items-center gap-1">{s.keys.map((key, j) => <span key={j}>
+          {j > 0 && <span className="text-[10px] mx-0.5" style={{ color: "var(--text-faint)" }}>+</span>}
+          <kbd
+            className="inline-block min-w-[24px] text-center px-1.5 py-0.5 text-[11px] font-medium rounded-md"
+            style={{ color: "var(--text-secondary)", backgroundColor: "var(--bg-surface)", border: "1px solid var(--border-default)" }}
+          >{key}</kbd>
+        </span>)}</div>
+      </div>)}</div>
+    </div>)}</div>
+  </div></div>;
+}
+export {
+  BlockEquation,
+  ButtonBlock,
+  DateInline,
+  BlogImageBlock as ImageBlock,
+  InlineEquation,
+  KeyboardShortcutsModal,
+  LinkPreviewTooltip,
+  LixEditor_default as LixEditor,
+  LixPreview,
+  LixThemeProvider,
+  MermaidBlock,
+  PDFEmbedBlock,
+  TableOfContents,
+  renderBlocksToHTML,
+  setLinkPreviewEndpoint,
+  useLinkPreview,
+  useLixTheme
+};
+//# sourceMappingURL=index.js.map