diff --git a/app/components/editor/ArticleEditor.tsx b/app/components/editor/ArticleEditor.tsx
new file mode 100644
index 0000000..0db5718
--- /dev/null
+++ b/app/components/editor/ArticleEditor.tsx
@@ -0,0 +1,188 @@
+import { lazy, Suspense, useEffect, useRef, useState } from 'react'
+import CodeMirrorMarkdownEditor from '~/components/CodeMirrorMarkdownEditor'
+import Spinner from '~/components/Spinner'
+import type { LossyReport } from '~/lib/tiptap/markdown/lossy-detect'
+import type { TiptapArticleEditorApi } from './TiptapArticleEditor'
+
+// The visual editor (Tiptap + serializer + KaTeX + lowlight) lives in its own
+// chunk; users who stay on the markdown editor never download it.
+const TiptapArticleEditor = lazy(() => import('./TiptapArticleEditor'))
+
+const STORAGE_KEY = 'lemma:editor-mode'
+
+type EditorMode = 'markdown' | 'visual'
+
+export interface ArticleEditorApi {
+  getMarkdown(): string
+}
+
+interface ArticleEditorProps {
+  initialValue?: string
+  onChange?: (value: string) => void
+  apiRef?: React.MutableRefObject<ArticleEditorApi | null>
+}
+
+function storedMode(): EditorMode {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === 'visual' ? 'visual' : 'markdown'
+  } catch {
+    return 'markdown'
+  }
+}
+
+// Both editors speak the same language — the raw markdown that lemma stores —
+// so switching hands the current markdown to the other editor. The record
+// produced on save is identical regardless of which editor wrote it.
+export default function ArticleEditor({ initialValue = '', onChange, apiRef }: ArticleEditorProps) {
+  const [mode, setMode] = useState<EditorMode>(storedMode)
+  // The markdown the active editor was seeded with; bumping generation
+  // remounts the editor with the latest seed on switch.
+  const [seed, setSeed] = useState(initialValue)
+  const [generation, setGeneration] = useState(0)
+  const [lossyWarning, setLossyWarning] = useState<LossyReport | null>(null)
+  const currentMarkdownRef = useRef(initialValue)
+  const tiptapApiRef = useRef<TiptapArticleEditorApi | null>(null)
+
+  const getMarkdown = () =>
+    mode === 'visual' && tiptapApiRef.current
+      ? tiptapApiRef.current.getMarkdown()
+      : currentMarkdownRef.current
+
+  const getMarkdownRef = useRef(getMarkdown)
+  getMarkdownRef.current = getMarkdown
+
+  useEffect(() => {
+    if (!apiRef) return
+    apiRef.current = { getMarkdown: () => getMarkdownRef.current() }
+    return () => {
+      apiRef.current = null
+    }
+  }, [apiRef])
+
+  // An article opened directly in visual mode (persisted preference) gets the
+  // same lossy-content check a mid-session switch does.
+  useEffect(() => {
+    if (mode !== 'visual' || !initialValue.trim()) return
+    let cancelled = false
+    import('~/lib/tiptap/markdown/lossy-detect')
+      .then(({ detectLossyMarkdown }) => {
+        if (cancelled) return
+        const report = detectLossyMarkdown(initialValue)
+        if (report.isLossy) setLossyWarning(report)
+      })
+      .catch(() => {
+        // Detection is advisory only.
+      })
+    return () => {
+      cancelled = true
+    }
+    // Mount-time check only — switches run their own detection in switchTo.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  function handleChange(value: string) {
+    currentMarkdownRef.current = value
+    onChange?.(value)
+  }
+
+  async function switchTo(next: EditorMode) {
+    if (next === mode) return
+    const markdown = getMarkdown()
+    currentMarkdownRef.current = markdown
+    setLossyWarning(null)
+    if (next === 'visual' && markdown.trim()) {
+      // The detector lives in the visual-editor chunk, which this switch is
+      // about to load anyway.
+      try {
+        const { detectLossyMarkdown } = await import('~/lib/tiptap/markdown/lossy-detect')
+        const report = detectLossyMarkdown(markdown)
+        if (report.isLossy) setLossyWarning(report)
+      } catch {
+        // Detection is advisory; never block the switch on it.
+      }
+    }
+    setSeed(markdown)
+    setMode(next)
+    setGeneration((g) => g + 1)
+    try {
+      localStorage.setItem(STORAGE_KEY, next)
+    } catch {
+      // Private browsing or storage quota — the toggle still works this session.
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-end">
+        <div className="flex rounded-lg border border-stone-300 dark:border-stone-600 overflow-hidden text-xs font-medium">
+          {(['markdown', 'visual'] as const).map((m) => (
+            <button
+              key={m}
+              type="button"
+              onClick={() => switchTo(m)}
+              className={
+                mode === m
+                  ? 'px-3 py-1.5 bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 transition-colors'
+                  : 'px-3 py-1.5 bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors'
+              }
+            >
+              {m === 'markdown' ? 'Markdown' : 'Visual'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {lossyWarning && mode === 'visual' && (
+        <div className="flex items-start justify-between gap-3 rounded-lg border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 px-4 py-3">
+          <p className="text-sm text-amber-800 dark:text-amber-200">
+            This article contains formatting the visual editor can't fully represent
+            {lossyWarning.hasRawHtml && ' (raw HTML)'}
+            {lossyWarning.hasFootnotes && ' (footnotes)'}. Saving from the visual editor will
+            rewrite or drop it.
+          </p>
+          <div className="flex shrink-0 gap-2">
+            <button
+              type="button"
+              onClick={() => switchTo('markdown')}
+              className="rounded-md border border-amber-300 dark:border-amber-700 px-2.5 py-1 text-xs font-medium text-amber-800 dark:text-amber-200 hover:bg-amber-100 dark:hover:bg-amber-900/40 transition-colors"
+            >
+              Switch back
+            </button>
+            <button
+              type="button"
+              onClick={() => setLossyWarning(null)}
+              className="rounded-md px-2.5 py-1 text-xs font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40 transition-colors"
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+      )}
+
+      {mode === 'visual' ? (
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center py-24">
+              <Spinner />
+            </div>
+          }
+        >
+          <TiptapArticleEditor
+            key={generation}
+            initialValue={seed}
+            onChange={handleChange}
+            apiRef={tiptapApiRef}
+          />
+        </Suspense>
+      ) : (
+        <CodeMirrorMarkdownEditor
+          key={generation}
+          initialValue={seed}
+          onChange={handleChange}
+          displayMode="split"
+          showToolbar={true}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/app/components/editor/TiptapArticleEditor.tsx b/app/components/editor/TiptapArticleEditor.tsx
new file mode 100644
index 0000000..8e279b2
--- /dev/null
+++ b/app/components/editor/TiptapArticleEditor.tsx
@@ -0,0 +1,150 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { EditorContent, ReactNodeViewRenderer, useEditor, type Editor } from '@tiptap/react'
+import { Placeholder } from '@tiptap/extensions'
+import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
+import { Image } from '@tiptap/extension-image'
+import { createLemmaExtensions, lowlight } from '~/lib/tiptap/extensions'
+import { MathBlock } from '~/lib/tiptap/math-block'
+import { MathInline } from '~/lib/tiptap/math-inline'
+import { MarkdownClipboard } from '~/lib/tiptap/markdown-clipboard'
+import { editorHtmlToMarkdown, markdownToEditorHtml } from '~/lib/tiptap/markdown/serializer'
+import CodeBlockView from './nodeviews/CodeBlockView'
+import ImageView from './nodeviews/ImageView'
+import MathBlockView from './nodeviews/MathBlockView'
+import MathInlineView from './nodeviews/MathInlineView'
+import TiptapToolbar from './TiptapToolbar'
+import './tiptap-editor.css'
+
+export interface TiptapArticleEditorApi {
+  getMarkdown(): string
+}
+
+interface TiptapArticleEditorProps {
+  initialValue?: string
+  onChange?: (markdown: string) => void
+  showToolbar?: boolean
+  apiRef?: React.MutableRefObject<TiptapArticleEditorApi | null>
+}
+
+// Serializing to markdown walks the whole document, so onChange is debounced
+// rather than per-keystroke. Consumers that need the exact current value at a
+// point in time (submit, editor switch) use apiRef.getMarkdown(), which
+// serializes synchronously.
+const CHANGE_DEBOUNCE_MS = 300
+
+export default function TiptapArticleEditor({
+  initialValue = '',
+  onChange,
+  showToolbar = true,
+  apiRef,
+}: TiptapArticleEditorProps) {
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [imageError, setImageError] = useState<string | null>(null)
+  const imageErrorTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const extensions = useMemo(
+    () => [
+      ...createLemmaExtensions({
+        codeBlock: CodeBlockLowlight.extend({
+          addNodeView() {
+            return ReactNodeViewRenderer(CodeBlockView)
+          },
+        }).configure({ lowlight }),
+        mathInline: MathInline.extend({
+          addNodeView() {
+            return ReactNodeViewRenderer(MathInlineView)
+          },
+        }),
+        mathBlock: MathBlock.extend({
+          addNodeView() {
+            return ReactNodeViewRenderer(MathBlockView)
+          },
+        }),
+        image: Image.extend({
+          addNodeView() {
+            return ReactNodeViewRenderer(ImageView)
+          },
+        }).configure({ inline: true }),
+      }),
+      Placeholder.configure({ placeholder: 'Write your article…' }),
+      MarkdownClipboard,
+    ],
+    [],
+  )
+
+  const serialize = useCallback((instance: Editor) => editorHtmlToMarkdown(instance.getHTML()), [])
+
+  const editor = useEditor({
+    extensions,
+    content: markdownToEditorHtml(initialValue),
+    onUpdate: ({ editor: instance }) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+      debounceRef.current = setTimeout(() => {
+        debounceRef.current = null
+        onChangeRef.current?.(serialize(instance))
+      }, CHANGE_DEBOUNCE_MS)
+    },
+    onBlur: ({ editor: instance }) => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+        debounceRef.current = null
+      }
+      onChangeRef.current?.(serialize(instance))
+    },
+  })
+
+  useEffect(() => {
+    if (!apiRef) return
+    apiRef.current = {
+      getMarkdown: () => (editor && !editor.isDestroyed ? serialize(editor) : initialValue),
+    }
+    return () => {
+      apiRef.current = null
+    }
+  }, [apiRef, editor, serialize, initialValue])
+
+  // Flush a pending debounced change on unmount. Effect cleanups run in
+  // reverse registration order, so the editor is not yet destroyed here.
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current && editor && !editor.isDestroyed) {
+        clearTimeout(debounceRef.current)
+        debounceRef.current = null
+        onChangeRef.current?.(serialize(editor))
+      }
+    }
+  }, [editor, serialize])
+
+  function handleImageError(message: string) {
+    setImageError(message)
+    if (imageErrorTimerRef.current) clearTimeout(imageErrorTimerRef.current)
+    imageErrorTimerRef.current = setTimeout(() => setImageError(null), 4000)
+  }
+
+  return (
+    <div className="flex flex-col">
+      {showToolbar && <TiptapToolbar editor={editor} onImageError={handleImageError} />}
+      {imageError && (
+        <div className="flex items-center justify-between gap-3 px-4 py-2 bg-red-50 dark:bg-red-950/40 border-b border-red-200 dark:border-red-800">
+          <p className="text-sm text-red-600 dark:text-red-400">{imageError}</p>
+          <button
+            type="button"
+            onClick={() => setImageError(null)}
+            className="shrink-0 text-red-400 dark:text-red-500 hover:text-red-600 dark:hover:text-red-300 transition-colors"
+            aria-label="Dismiss"
+          >
+            <svg className="size-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75">
+              <path d="M4 4l8 8M12 4l-8 8" strokeLinecap="round" />
+            </svg>
+          </button>
+        </div>
+      )}
+      <EditorContent
+        editor={editor}
+        className="tiptap-article-editor flex-1 bg-white dark:bg-gray-900 border border-t-0 border-gray-200 dark:border-gray-600 rounded-b-lg"
+      />
+    </div>
+  )
+}
diff --git a/app/components/editor/TiptapToolbar.tsx b/app/components/editor/TiptapToolbar.tsx
new file mode 100644
index 0000000..9611664
--- /dev/null
+++ b/app/components/editor/TiptapToolbar.tsx
@@ -0,0 +1,216 @@
+import React, { lazy, Suspense, useEffect, useReducer, useRef, useState } from 'react'
+import type { Editor } from '@tiptap/react'
+import {
+  BoldIcon,
+  ItalicIcon,
+  CodeBracketIcon,
+  H1Icon, H2Icon, H3Icon,
+  ListBulletIcon,
+  NumberedListIcon,
+  QueueListIcon,
+  ChatBubbleLeftRightIcon,
+  LinkIcon,
+  PhotoIcon,
+  GlobeAltIcon,
+  CodeBracketSquareIcon,
+  TableCellsIcon,
+  VariableIcon,
+  ChartPieIcon,
+  MusicalNoteIcon,
+  FilmIcon,
+  PresentationChartLineIcon,
+  MinusIcon,
+  EyeSlashIcon,
+  StrikethroughIcon,
+  PaintBrushIcon,
+  RectangleGroupIcon,
+} from '@heroicons/react/24/outline'
+
+import { MAX_IMAGE_BYTES, MAX_IMAGE_LABEL } from '~/lib/security-constants'
+import { compressImage } from '~/lib/compress-image'
+import { markerForKind, type DiagramKind } from './diagrams/diagram-source'
+
+const ExcalidrawModal = lazy(() => import('./diagrams/ExcalidrawModal'))
+const DrawioModal = lazy(() => import('./diagrams/DrawioModal'))
+
+interface ToolbarProps {
+  editor: Editor | null
+  onImageError?: (message: string) => void
+}
+
+interface ToolbarAction {
+  id: string
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  action: () => void
+  isActive?: () => boolean
+  separator?: boolean
+  shortcut?: string
+}
+
+// Inserts a fenced code block with the given language and starter content —
+// the visual-editor counterpart of the markdown toolbar's fence templates.
+function insertFence(editor: Editor, language: string, template: string) {
+  editor
+    .chain()
+    .focus()
+    .insertContent({
+      type: 'codeBlock',
+      attrs: { language },
+      content: [{ type: 'text', text: template }],
+    })
+    .run()
+}
+
+const TiptapToolbar: React.FC<ToolbarProps> = ({ editor, onImageError }) => {
+  const imageInputRef = useRef<HTMLInputElement>(null)
+  // Modal for creating a new diagram; editing existing ones lives in ImageView.
+  const [newDiagram, setNewDiagram] = useState<DiagramKind | null>(null)
+  // Re-render on every transaction so active states track the selection.
+  const [, bump] = useReducer((x: number) => x + 1, 0)
+
+  useEffect(() => {
+    if (!editor) return
+    editor.on('transaction', bump)
+    return () => {
+      editor.off('transaction', bump)
+    }
+  }, [editor])
+
+  if (!editor) return null
+
+  const editLink = () => {
+    const previous = editor.getAttributes('link').href as string | undefined
+    const url = window.prompt('Link URL', previous ?? 'https://')
+    if (url === null) return
+    if (url === '' || url === 'https://') {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      return
+    }
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+  }
+
+  const actions: ToolbarAction[] = [
+    { id: 'h1', label: 'Heading 1', icon: H1Icon, action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isActive: () => editor.isActive('heading', { level: 1 }) },
+    { id: 'h2', label: 'Heading 2', icon: H2Icon, action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isActive: () => editor.isActive('heading', { level: 2 }) },
+    { id: 'h3', label: 'Heading 3', icon: H3Icon, action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isActive: () => editor.isActive('heading', { level: 3 }) },
+    { id: 'bold', label: 'Bold', icon: BoldIcon, shortcut: 'Cmd+B', action: () => editor.chain().focus().toggleBold().run(), isActive: () => editor.isActive('bold') },
+    { id: 'italic', label: 'Italic', icon: ItalicIcon, shortcut: 'Cmd+I', action: () => editor.chain().focus().toggleItalic().run(), isActive: () => editor.isActive('italic') },
+    { id: 'strikethrough', label: 'Strikethrough', icon: StrikethroughIcon, action: () => editor.chain().focus().toggleStrike().run(), isActive: () => editor.isActive('strike') },
+    { id: 'ul', label: 'Unordered List', icon: ListBulletIcon, action: () => editor.chain().focus().toggleBulletList().run(), isActive: () => editor.isActive('bulletList') },
+    { id: 'ol', label: 'Ordered List', icon: NumberedListIcon, action: () => editor.chain().focus().toggleOrderedList().run(), isActive: () => editor.isActive('orderedList') },
+    { id: 'cl', label: 'Check List', icon: QueueListIcon, action: () => editor.chain().focus().toggleTaskList().run(), isActive: () => editor.isActive('taskList') },
+    // Always insert a header row — GFM tables require one to serialize.
+    { id: 'table', label: 'Table', icon: TableCellsIcon, action: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), isActive: () => editor.isActive('table') },
+    { id: 'quote', label: 'Blockquote', icon: ChatBubbleLeftRightIcon, action: () => editor.chain().focus().toggleBlockquote().run(), isActive: () => editor.isActive('blockquote') },
+    { id: 'hr', label: 'Horizontal Rule', icon: MinusIcon, action: () => editor.chain().focus().setHorizontalRule().run() },
+    { id: 'link', label: 'Link', icon: LinkIcon, action: editLink, isActive: () => editor.isActive('link') },
+    { id: 'image', label: 'Insert image', icon: PhotoIcon, action: () => imageInputRef.current?.click() },
+    { id: 'separator1', label: '', icon: MinusIcon, action: () => {}, separator: true },
+    { id: 'embed', label: 'Embed from Bluesky, YouTube, Apple Music, etc.', icon: GlobeAltIcon, action: () => insertFence(editor, 'embed', 'https://bsky.app/profile/bsky.app/post/3m2kdgmbbzc2o') },
+    { id: 'spoiler', label: 'Spoiler', icon: EyeSlashIcon, action: () => editor.chain().focus().insertContent('::spoiler:: hidden text ::spoiler::').run() },
+    { id: 'code', label: 'Inline Code', icon: CodeBracketIcon, shortcut: 'Cmd+E', action: () => editor.chain().focus().toggleCode().run(), isActive: () => editor.isActive('code') },
+    { id: 'code-block', label: 'Code Block', icon: CodeBracketSquareIcon, action: () => insertFence(editor, 'javascript', '// Your code here'), isActive: () => editor.isActive('codeBlock') },
+    { id: 'math', label: 'Math Expression', icon: VariableIcon, action: () => editor.chain().focus().insertMathInline({ text: 'x^2' }).run() },
+    { id: 'functionplot', label: 'Function Plot', icon: PresentationChartLineIcon, action: () => insertFence(editor, 'functionplot', 'x^2\nsin(x)\ncos(x)') },
+    { id: 'mermaid', label: 'Mermaid Diagram', icon: ChartPieIcon, action: () => insertFence(editor, 'mermaid', 'flowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action]\n    B -->|No| D[End]\n    C --> D') },
+    { id: 'excalidraw', label: 'Excalidraw Drawing', icon: PaintBrushIcon, action: () => setNewDiagram('excalidraw') },
+    { id: 'drawio', label: 'Draw.io Diagram', icon: RectangleGroupIcon, action: () => setNewDiagram('drawio') },
+    { id: 'abc', label: 'ABC Musical Notation', icon: MusicalNoteIcon, action: () => insertFence(editor, 'abc', 'X:1\nT:Simple Tune\nK:C\nCDE F|GAB c|') },
+    { id: 'fountain', label: 'Fountain Screenplay', icon: FilmIcon, action: () => insertFence(editor, 'fountain', 'INT. ROOM - DAY\n\nJOHN sits at a desk, writing.\n\nJOHN\n(thoughtful)\nThis is going to be great.\n\nFADE OUT.') },
+  ]
+
+  return (
+    <div className="bg-gray-50 dark:bg-gray-750 px-3 py-2 border border-gray-200 dark:border-gray-600 flex items-center gap-0.5 flex-wrap overflow-x-auto rounded-t-lg">
+      <input
+        ref={imageInputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={async (e) => {
+          const file = e.target.files?.[0]
+          e.target.value = ''
+          if (!file) return
+          try {
+            const compressed = await compressImage(file)
+            if (compressed.size > MAX_IMAGE_BYTES) {
+              onImageError?.(`Image exceeds ${MAX_IMAGE_LABEL} even after compression. Please use a smaller image.`)
+              return
+            }
+            const url = URL.createObjectURL(compressed)
+            const alt = file.name.replace(/\.[^.]+$/, '')
+            editor.chain().focus().setImage({ src: url, alt }).run()
+          } catch {
+            onImageError?.('Image could not be processed. Please try a different file.')
+          }
+        }}
+      />
+      {newDiagram && (
+        <Suspense fallback={null}>
+          {(() => {
+            const commit = (blob: Blob): string | null => {
+              if (blob.size > MAX_IMAGE_BYTES) {
+                return `Diagram exceeds ${MAX_IMAGE_LABEL}. Simplify it or split it up.`
+              }
+              editor
+                .chain()
+                .focus()
+                .setImage({
+                  src: URL.createObjectURL(blob),
+                  alt: newDiagram === 'excalidraw' ? 'Excalidraw diagram' : 'Draw.io diagram',
+                  title: markerForKind(newDiagram),
+                })
+                .run()
+              setNewDiagram(null)
+              return null
+            }
+            return newDiagram === 'excalidraw' ? (
+              <ExcalidrawModal initialSrc={null} onCommit={commit} onClose={() => setNewDiagram(null)} />
+            ) : (
+              <DrawioModal initialSrc={null} onCommit={commit} onClose={() => setNewDiagram(null)} />
+            )
+          })()}
+        </Suspense>
+      )}
+      {actions.map((action) => {
+        if (action.separator) {
+          return (
+            <div
+              key={action.id}
+              className="w-px h-5 bg-gray-300 dark:bg-gray-500 mx-1 flex-shrink-0"
+            />
+          )
+        }
+
+        const IconComponent = action.icon
+        const isUndersizedIcon =
+          IconComponent === CodeBracketIcon ||
+          IconComponent === CodeBracketSquareIcon ||
+          IconComponent === VariableIcon ||
+          IconComponent === PresentationChartLineIcon ||
+          IconComponent === ChartPieIcon ||
+          IconComponent === MusicalNoteIcon ||
+          IconComponent === FilmIcon
+        const active = action.isActive?.() ?? false
+
+        return (
+          <button
+            type="button"
+            key={action.id}
+            onClick={action.action}
+            className={`px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors duration-100 min-w-[32px] text-center flex-shrink-0 flex items-center justify-center ${
+              active
+                ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100 border border-blue-200 dark:border-blue-800'
+                : 'hover:bg-gray-200 dark:hover:bg-gray-600 active:bg-gray-300 dark:active:bg-gray-500 text-gray-700 dark:text-gray-900 hover:text-gray-900 dark:hover:text-gray-100'
+            }`}
+            title={action.shortcut ? `${action.label} (${action.shortcut})` : action.label}
+          >
+            <IconComponent className={isUndersizedIcon ? 'size-5' : 'size-4'} />
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default TiptapToolbar
diff --git a/app/components/editor/diagrams/DrawioModal.tsx b/app/components/editor/diagrams/DrawioModal.tsx
new file mode 100644
index 0000000..14c5c51
--- /dev/null
+++ b/app/components/editor/diagrams/DrawioModal.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react'
+import { DrawIoEmbed, type EventExit, type EventSave } from 'react-drawio'
+import Spinner from '~/components/Spinner'
+import { blobToDataUri, dataUriToBlob, fetchDiagramSourceBlob } from './diagram-source'
+
+// The Draw.io editor is loaded as an iframe from this host (there is no
+// self-hostable npm build); the diagram itself never leaves the browser
+// except through lemma's normal blob upload.
+const DRAWIO_EMBED_URL = 'https://embed.diagrams.net'
+
+interface DrawioModalProps {
+  // Existing diagram image to load (object URL or CDN URL); null starts blank.
+  initialSrc: string | null
+  // Returns an error message to show (modal stays open), or null on success
+  // (host closes the modal).
+  onCommit: (blob: Blob) => string | null
+  onClose: () => void
+}
+
+export default function DrawioModal({ initialSrc, onCommit, onClose }: DrawioModalProps) {
+  // '' renders a blank editor; null means the existing diagram is still loading.
+  const [initialDataUri, setInitialDataUri] = useState<string | null>(initialSrc ? null : '')
+  const [error, setError] = useState<string | null>(null)
+
+  const isDark = document.documentElement.classList.contains('dark')
+
+  useEffect(() => {
+    if (!initialSrc) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const blob = await fetchDiagramSourceBlob(initialSrc)
+        // With exportFormat="xmlpng" the embed accepts the PNG data URI
+        // directly and reads the XML Draw.io embeds in it.
+        const uri = await blobToDataUri(blob)
+        if (!cancelled) setInitialDataUri(uri)
+      } catch {
+        if (!cancelled) {
+          setError("Couldn't load the diagram source. You can draw a replacement from scratch.")
+          setInitialDataUri('')
+        }
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [initialSrc])
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-black/50 p-2 sm:p-6" role="dialog" aria-label="Draw.io diagram editor">
+      <div className="flex flex-1 flex-col overflow-hidden rounded-lg bg-white dark:bg-stone-900">
+        <div className="flex items-center justify-between gap-3 border-b border-stone-200 dark:border-stone-700 px-4 py-2">
+          <p className="text-sm font-medium text-stone-900 dark:text-white">Draw.io</p>
+          {error && <p className="min-w-0 truncate text-sm text-red-600 dark:text-red-400">{error}</p>}
+          <button
+            type="button"
+            onClick={onClose}
+            className="shrink-0 rounded-md px-3 py-1.5 text-xs font-medium text-stone-500 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+        <div className="flex-1">
+          {initialDataUri === null ? (
+            <div className="flex h-full items-center justify-center">
+              <Spinner />
+            </div>
+          ) : (
+            <DrawIoEmbed
+              xml={initialDataUri}
+              exportFormat="xmlpng"
+              baseUrl={DRAWIO_EMBED_URL}
+              urlParameters={{
+                ui: isDark ? 'dark' : 'kennedy',
+                spin: true,
+                libraries: true,
+                saveAndExit: true,
+                noSaveBtn: true,
+              }}
+              onSave={(data: EventSave) => {
+                // Saves arrive as an xmlpng export: a PNG data URI with the
+                // diagram XML embedded, so the file stays editable.
+                if (data.parentEvent !== 'save') return
+                let blob: Blob
+                try {
+                  blob = dataUriToBlob(data.xml)
+                } catch {
+                  setError('Could not export the diagram.')
+                  return
+                }
+                const commitError = onCommit(blob)
+                if (commitError) setError(commitError)
+              }}
+              onClose={(data: EventExit) => {
+                // Ignore the synthetic exit that follows a save — the host
+                // closes the modal itself on successful commit.
+                if (!data.parentEvent) onClose()
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/editor/diagrams/ExcalidrawModal.tsx b/app/components/editor/diagrams/ExcalidrawModal.tsx
new file mode 100644
index 0000000..ed7c74e
--- /dev/null
+++ b/app/components/editor/diagrams/ExcalidrawModal.tsx
@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react'
+import { Excalidraw, exportToBlob, loadFromBlob } from '@excalidraw/excalidraw'
+import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types'
+import '@excalidraw/excalidraw/index.css'
+import Spinner from '~/components/Spinner'
+import { fetchDiagramSourceBlob } from './diagram-source'
+
+interface ExcalidrawModalProps {
+  // Existing diagram image to load (object URL or CDN URL); null starts blank.
+  initialSrc: string | null
+  // Returns an error message to show (modal stays open), or null on success
+  // (host closes the modal).
+  onCommit: (blob: Blob) => string | null
+  onClose: () => void
+}
+
+export default function ExcalidrawModal({ initialSrc, onCommit, onClose }: ExcalidrawModalProps) {
+  const [api, setApi] = useState<ExcalidrawImperativeAPI | null>(null)
+  const [initialData, setInitialData] = useState<Awaited<ReturnType<typeof loadFromBlob>> | null>(null)
+  const [loading, setLoading] = useState(Boolean(initialSrc))
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  const isDark = document.documentElement.classList.contains('dark')
+
+  useEffect(() => {
+    if (!initialSrc) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const blob = await fetchDiagramSourceBlob(initialSrc)
+        // loadFromBlob reads the scene JSON Excalidraw embeds in exported PNGs
+        const scene = await loadFromBlob(blob, null, null)
+        if (!cancelled) setInitialData(scene)
+      } catch {
+        if (!cancelled) {
+          setError("Couldn't load the diagram source. You can draw a replacement from scratch.")
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [initialSrc])
+
+  async function handleSave() {
+    if (!api) return
+    setSaving(true)
+    setError(null)
+    try {
+      // exportEmbedScene stores the scene JSON inside the PNG so the diagram
+      // stays editable; exportBackground avoids transparent-PNG artifacts when
+      // the CDN re-encodes to JPEG for display.
+      const blob = await exportToBlob({
+        elements: api.getSceneElements(),
+        appState: { exportEmbedScene: true, exportBackground: true, exportWithDarkMode: false },
+        files: api.getFiles(),
+        mimeType: 'image/png',
+      })
+      const commitError = onCommit(blob)
+      if (commitError) setError(commitError)
+    } catch {
+      setError('Could not export the diagram.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-black/50 p-2 sm:p-6" role="dialog" aria-label="Excalidraw diagram editor">
+      <div className="flex flex-1 flex-col overflow-hidden rounded-lg bg-white dark:bg-stone-900">
+        <div className="flex items-center justify-between gap-3 border-b border-stone-200 dark:border-stone-700 px-4 py-2">
+          <p className="text-sm font-medium text-stone-900 dark:text-white">Excalidraw</p>
+          {error && <p className="min-w-0 truncate text-sm text-red-600 dark:text-red-400">{error}</p>}
+          <div className="flex shrink-0 gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-md px-3 py-1.5 text-xs font-medium text-stone-500 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving || loading}
+              className="rounded-md bg-stone-900 dark:bg-stone-100 px-3 py-1.5 text-xs font-semibold text-white dark:text-stone-900 hover:bg-stone-700 dark:hover:bg-stone-200 disabled:opacity-50 transition-colors"
+            >
+              {saving ? 'Saving…' : 'Save & Exit'}
+            </button>
+          </div>
+        </div>
+        <div className="flex-1">
+          {loading ? (
+            <div className="flex h-full items-center justify-center">
+              <Spinner />
+            </div>
+          ) : (
+            <Excalidraw
+              excalidrawAPI={(instance) => setApi(instance)}
+              initialData={initialData ? { ...initialData, scrollToContent: true } : null}
+              theme={isDark ? 'dark' : 'light'}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/editor/diagrams/diagram-source.ts b/app/components/editor/diagrams/diagram-source.ts
new file mode 100644
index 0000000..d9cc2b5
--- /dev/null
+++ b/app/components/editor/diagrams/diagram-source.ts
@@ -0,0 +1,66 @@
+import { resolvePdsUrl } from '~/lib/atproto'
+
+// Diagrams are stored as ordinary markdown images whose blob is an exported
+// PNG carrying its own source (Excalidraw scene JSON / Draw.io XML embedded in
+// the file). The image *title* marks which diagram editor owns it:
+//
+//   ![Excalidraw diagram](url "lemma:excalidraw")
+//
+// The record shape is identical to any image-bearing article; the marker is
+// plain markdown that survives both editors and the published renderer.
+export const EXCALIDRAW_MARKER = 'lemma:excalidraw'
+export const DRAWIO_MARKER = 'lemma:drawio'
+
+export type DiagramKind = 'excalidraw' | 'drawio'
+
+export function diagramKindFromTitle(title: string | null | undefined): DiagramKind | null {
+  if (title === EXCALIDRAW_MARKER) return 'excalidraw'
+  if (title === DRAWIO_MARKER) return 'drawio'
+  return null
+}
+
+export function markerForKind(kind: DiagramKind): string {
+  return kind === 'excalidraw' ? EXCALIDRAW_MARKER : DRAWIO_MARKER
+}
+
+const CDN_IMG_RE = /cdn\.bsky\.app\/img\/[^/]+\/plain\/(did:[a-zA-Z0-9:._%-]+)\/([A-Za-z0-9]+)@/
+
+// The original bytes of a diagram file. Pre-publish the src is an object URL
+// whose blob still carries the embedded source. Post-publish the src is a
+// Bluesky CDN URL whose bytes are re-encoded (embedded source stripped), so
+// the original blob is fetched from the author's PDS via
+// com.atproto.sync.getBlob — the CID is right in the CDN URL.
+export async function fetchDiagramSourceBlob(src: string): Promise<Blob> {
+  if (src.startsWith('blob:')) {
+    const res = await fetch(src)
+    return res.blob()
+  }
+  const match = CDN_IMG_RE.exec(src)
+  if (!match) throw new Error('This image is not an editable diagram.')
+  const did = decodeURIComponent(match[1])
+  const cid = match[2]
+  const pds = await resolvePdsUrl(did)
+  const res = await fetch(
+    `${pds}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(did)}&cid=${cid}`,
+  )
+  if (!res.ok) throw new Error(`Could not fetch the diagram source (${res.status}).`)
+  return res.blob()
+}
+
+export function blobToDataUri(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(blob)
+  })
+}
+
+export function dataUriToBlob(dataUri: string): Blob {
+  const [header, base64] = dataUri.split(',')
+  const mime = header.match(/data:([^;]+)/)?.[1] ?? 'image/png'
+  const binary = atob(base64)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+  return new Blob([bytes], { type: mime })
+}
diff --git a/app/components/editor/nodeviews/CodeBlockView.tsx b/app/components/editor/nodeviews/CodeBlockView.tsx
new file mode 100644
index 0000000..c32cf3c
--- /dev/null
+++ b/app/components/editor/nodeviews/CodeBlockView.tsx
@@ -0,0 +1,37 @@
+import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react'
+import { lowlight } from '~/lib/tiptap/extensions'
+import MermaidPreview from './MermaidPreview'
+
+const LANGUAGES: string[] = (lowlight.listLanguages() as string[]).slice().sort()
+
+// Code block with a language picker; ```mermaid blocks also render a live
+// preview of the diagram beneath the source.
+export default function CodeBlockView({ node, updateAttributes, editor }: NodeViewProps) {
+  const language: string | null = node.attrs.language ?? null
+
+  return (
+    <NodeViewWrapper className="tiptap-code-block group relative my-4">
+      <select
+        contentEditable={false}
+        value={language ?? 'auto'}
+        disabled={!editor.isEditable}
+        onChange={(e) =>
+          updateAttributes({ language: e.target.value === 'auto' ? null : e.target.value })
+        }
+        className="absolute right-2 top-2 z-10 rounded border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 px-1.5 py-0.5 text-xs text-stone-500 dark:text-stone-400 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+        aria-label="Code block language"
+      >
+        <option value="auto">auto</option>
+        {LANGUAGES.map((lang) => (
+          <option key={lang} value={lang}>
+            {lang}
+          </option>
+        ))}
+      </select>
+      <pre className="rounded-lg bg-stone-100 dark:bg-stone-800 p-4 overflow-x-auto">
+        <NodeViewContent<'code'> as="code" className="font-mono text-sm" />
+      </pre>
+      {language === 'mermaid' && <MermaidPreview source={node.textContent} />}
+    </NodeViewWrapper>
+  )
+}
diff --git a/app/components/editor/nodeviews/ImageView.tsx b/app/components/editor/nodeviews/ImageView.tsx
new file mode 100644
index 0000000..10bec1e
--- /dev/null
+++ b/app/components/editor/nodeviews/ImageView.tsx
@@ -0,0 +1,69 @@
+import { lazy, Suspense, useState } from 'react'
+import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react'
+import { MAX_IMAGE_BYTES, MAX_IMAGE_LABEL } from '~/lib/security-constants'
+import { diagramKindFromTitle, type DiagramKind } from '../diagrams/diagram-source'
+
+const ExcalidrawModal = lazy(() => import('../diagrams/ExcalidrawModal'))
+const DrawioModal = lazy(() => import('../diagrams/DrawioModal'))
+
+// Renders a content image. Images whose markdown title carries a `lemma:`
+// diagram marker double-click into the matching diagram editor; everything
+// else is a plain <img>.
+export default function ImageView({ node, updateAttributes, editor, selected }: NodeViewProps) {
+  const { src, alt, title } = node.attrs as { src: string; alt?: string; title?: string }
+  const kind = diagramKindFromTitle(title)
+  const [openEditor, setOpenEditor] = useState<DiagramKind | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const selectedClass = selected ? 'outline outline-2 outline-blue-600 outline-offset-2' : ''
+
+  if (!kind) {
+    return (
+      <NodeViewWrapper as="span" className="inline-block max-w-full" data-drag-handle>
+        <img src={src} alt={alt ?? ''} title={title || undefined} className={`max-w-full rounded-lg ${selectedClass}`} />
+      </NodeViewWrapper>
+    )
+  }
+
+  // The old object URL / CDN URL is intentionally not revoked on commit: it
+  // may still be referenced by the markdown editor's preview or an unsaved
+  // draft, and navigation frees object URLs anyway.
+  const commit = (blob: Blob): string | null => {
+    if (blob.size > MAX_IMAGE_BYTES) {
+      return `Diagram exceeds ${MAX_IMAGE_LABEL}. Simplify it or split it up.`
+    }
+    updateAttributes({ src: URL.createObjectURL(blob) })
+    setOpenEditor(null)
+    setError(null)
+    return null
+  }
+
+  return (
+    <NodeViewWrapper as="span" className="inline-block max-w-full" data-drag-handle>
+      <span
+        className={`group relative inline-block max-w-full ${editor.isEditable ? 'cursor-pointer' : ''}`}
+        onDoubleClick={() => {
+          if (editor.isEditable) setOpenEditor(kind)
+        }}
+        title="Double-click to edit diagram"
+      >
+        <img src={src} alt={alt ?? ''} className={`max-w-full rounded-lg ${selectedClass}`} />
+        {editor.isEditable && (
+          <span className="pointer-events-none absolute bottom-2 right-2 rounded bg-stone-900/70 px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-hover:opacity-100">
+            Double-click to edit {kind === 'excalidraw' ? 'Excalidraw' : 'Draw.io'} diagram
+          </span>
+        )}
+      </span>
+      {error && <span className="block text-xs text-red-600 dark:text-red-400">{error}</span>}
+      {openEditor && (
+        <Suspense fallback={null}>
+          {openEditor === 'excalidraw' ? (
+            <ExcalidrawModal initialSrc={src || null} onCommit={commit} onClose={() => setOpenEditor(null)} />
+          ) : (
+            <DrawioModal initialSrc={src || null} onCommit={commit} onClose={() => setOpenEditor(null)} />
+          )}
+        </Suspense>
+      )}
+    </NodeViewWrapper>
+  )
+}
diff --git a/app/components/editor/nodeviews/MathBlockView.tsx b/app/components/editor/nodeviews/MathBlockView.tsx
new file mode 100644
index 0000000..0b2b197
--- /dev/null
+++ b/app/components/editor/nodeviews/MathBlockView.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from 'react'
+import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react'
+import { katexHtml } from './katex-html'
+
+// Renders display math with KaTeX; double-click opens a textarea for editing
+// the LaTeX source with a live preview. Escape cancels, Done commits.
+export default function MathBlockView({ node, updateAttributes, editor }: NodeViewProps) {
+  const text: string = node.attrs.text ?? ''
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(text)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    if (editing) textareaRef.current?.focus()
+  }, [editing])
+
+  const commit = () => {
+    setEditing(false)
+    const value = draft.trim()
+    if (value && value !== text) updateAttributes({ text: value })
+    else setDraft(text)
+  }
+
+  const rendered = (source: string) => katexHtml(source, true)
+
+  if (editing) {
+    return (
+      <NodeViewWrapper contentEditable={false} className="my-4">
+        <div className="rounded-lg border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 p-3 space-y-3">
+          <textarea
+            ref={textareaRef}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                e.preventDefault()
+                setDraft(text)
+                setEditing(false)
+              }
+            }}
+            rows={Math.min(Math.max(draft.split('\n').length, 2), 10)}
+            className="w-full rounded border border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900 px-3 py-2 font-mono text-sm text-stone-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-stone-900 dark:focus:ring-stone-100 resize-y"
+            aria-label="Edit math expression"
+          />
+          <div
+            className="text-stone-900 dark:text-white"
+            dangerouslySetInnerHTML={{ __html: rendered(draft || '\\ldots') }}
+          />
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => {
+                setDraft(text)
+                setEditing(false)
+              }}
+              className="rounded-md px-3 py-1.5 text-xs font-medium text-stone-500 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={commit}
+              className="rounded-md bg-stone-900 dark:bg-stone-100 px-3 py-1.5 text-xs font-semibold text-white dark:text-stone-900 hover:bg-stone-700 dark:hover:bg-stone-200 transition-colors"
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      </NodeViewWrapper>
+    )
+  }
+
+  return (
+    <NodeViewWrapper
+      contentEditable={false}
+      onDoubleClick={() => {
+        if (!editor.isEditable) return
+        setDraft(text)
+        setEditing(true)
+      }}
+      className="my-4 cursor-pointer rounded-lg px-2 py-1 transition-colors hover:bg-stone-100 dark:hover:bg-stone-800 text-stone-900 dark:text-white"
+      title="Double-click to edit"
+      dangerouslySetInnerHTML={{ __html: rendered(text) }}
+    />
+  )
+}
diff --git a/app/components/editor/nodeviews/MathInlineView.tsx b/app/components/editor/nodeviews/MathInlineView.tsx
new file mode 100644
index 0000000..bb44ef6
--- /dev/null
+++ b/app/components/editor/nodeviews/MathInlineView.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from 'react'
+import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react'
+import { katexHtml } from './katex-html'
+
+// Renders inline math with KaTeX; double-click swaps in a small input for
+// editing the LaTeX source. Enter or blur commits, Escape cancels.
+export default function MathInlineView({ node, updateAttributes, editor }: NodeViewProps) {
+  const text: string = node.attrs.text ?? ''
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(text)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (editing) inputRef.current?.select()
+  }, [editing])
+
+  const commit = () => {
+    setEditing(false)
+    const value = draft.trim()
+    if (value && value !== text) updateAttributes({ text: value })
+    else setDraft(text)
+  }
+
+  if (editing) {
+    return (
+      <NodeViewWrapper as="span" contentEditable={false}>
+        <input
+          ref={inputRef}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              commit()
+            } else if (e.key === 'Escape') {
+              e.preventDefault()
+              setDraft(text)
+              setEditing(false)
+            }
+          }}
+          size={Math.max(draft.length, 8)}
+          className="mx-0.5 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-1.5 py-0.5 font-mono text-sm text-stone-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-stone-900 dark:focus:ring-stone-100"
+          aria-label="Edit math expression"
+        />
+      </NodeViewWrapper>
+    )
+  }
+
+  return (
+    <NodeViewWrapper
+      as="span"
+      contentEditable={false}
+      onDoubleClick={() => {
+        if (!editor.isEditable) return
+        setDraft(text)
+        setEditing(true)
+      }}
+      className="cursor-pointer rounded px-0.5 transition-colors hover:bg-stone-100 dark:hover:bg-stone-800"
+      title="Double-click to edit"
+      dangerouslySetInnerHTML={{ __html: katexHtml(text, false) }}
+    />
+  )
+}
diff --git a/app/components/editor/nodeviews/MermaidPreview.tsx b/app/components/editor/nodeviews/MermaidPreview.tsx
new file mode 100644
index 0000000..66d152d
--- /dev/null
+++ b/app/components/editor/nodeviews/MermaidPreview.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react'
+import DOMPurify from 'dompurify'
+import { validateMermaidSyntax } from '~/lib/security-constants'
+
+let mermaidSeq = 0
+
+// Live preview for ```mermaid code blocks inside the visual editor. Renders
+// with the same settings as the published page (PreviewRenderer): dynamic
+// import, strict security level, theme following the .dark class on <html>.
+export default function MermaidPreview({ source }: { source: string }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const trimmed = source.trim()
+    if (!trimmed) return
+
+    let cancelled = false
+    // Debounce so the diagram doesn't re-render on every keystroke.
+    const timer = setTimeout(async () => {
+      if (!validateMermaidSyntax(trimmed)) {
+        setError('Diagram contains disallowed content.')
+        return
+      }
+      try {
+        const mermaid = (await import('mermaid')).default
+        if (cancelled) return
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
+          securityLevel: 'strict',
+        })
+        const { svg } = await mermaid.render(`tiptap-mermaid-${++mermaidSeq}`, trimmed)
+        if (cancelled || !containerRef.current) return
+        containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
+          USE_PROFILES: { svg: true, svgFilters: true },
+        })
+        setError(null)
+      } catch {
+        if (!cancelled) setError('Diagram could not be rendered. Check the syntax.')
+      }
+    }, 500)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [source])
+
+  if (error) {
+    return <p className="px-3 py-2 text-xs text-red-600 dark:text-red-400">{error}</p>
+  }
+
+  return <div ref={containerRef} className="flex justify-center px-3 py-2 overflow-x-auto" />
+}
diff --git a/app/components/editor/nodeviews/katex-html.ts b/app/components/editor/nodeviews/katex-html.ts
new file mode 100644
index 0000000..bf5d808
--- /dev/null
+++ b/app/components/editor/nodeviews/katex-html.ts
@@ -0,0 +1,12 @@
+import katex from 'katex'
+import DOMPurify from 'dompurify'
+import 'katex/dist/katex.min.css'
+
+// KaTeX output for author-supplied LaTeX, sanitized before it is injected —
+// the same defense-in-depth the published-article pipeline applies via
+// rehype-sanitize.
+export function katexHtml(source: string, displayMode: boolean): string {
+  return DOMPurify.sanitize(
+    katex.renderToString(source, { throwOnError: false, displayMode }),
+  )
+}
diff --git a/app/components/editor/tiptap-editor.css b/app/components/editor/tiptap-editor.css
new file mode 100644
index 0000000..0d8b291
--- /dev/null
+++ b/app/components/editor/tiptap-editor.css
@@ -0,0 +1,284 @@
+/* Styling for the Tiptap article editor content area. Plain CSS (not
+ * @apply) so this file can ship inside the lazy editor chunk without
+ * Tailwind v4 @reference plumbing. Colors follow the stone palette used
+ * across the app. */
+
+.tiptap-article-editor .ProseMirror {
+  min-height: 24rem;
+  padding: 1rem;
+  outline: none;
+  font-size: 1rem;
+  line-height: 1.75;
+  color: #1c1917; /* stone-900 */
+}
+
+.dark .tiptap-article-editor .ProseMirror {
+  color: #fafaf9; /* stone-50 */
+}
+
+/* Placeholder (from @tiptap/extensions Placeholder) */
+.tiptap-article-editor .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+  color: #a8a29e; /* stone-400 */
+}
+
+.tiptap-article-editor .ProseMirror > * + * {
+  margin-top: 0.75em;
+}
+
+.tiptap-article-editor .ProseMirror h1 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  margin-top: 1.25em;
+}
+
+.tiptap-article-editor .ProseMirror h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 1.25em;
+}
+
+.tiptap-article-editor .ProseMirror h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 1em;
+}
+
+.tiptap-article-editor .ProseMirror h4,
+.tiptap-article-editor .ProseMirror h5,
+.tiptap-article-editor .ProseMirror h6 {
+  font-weight: 600;
+}
+
+.tiptap-article-editor .ProseMirror ul,
+.tiptap-article-editor .ProseMirror ol {
+  padding-left: 1.5rem;
+}
+
+.tiptap-article-editor .ProseMirror ul {
+  list-style: disc;
+}
+
+.tiptap-article-editor .ProseMirror ol {
+  list-style: decimal;
+}
+
+.tiptap-article-editor .ProseMirror li > p {
+  margin: 0;
+}
+
+/* Task lists */
+.tiptap-article-editor .ProseMirror ul[data-type='taskList'] {
+  list-style: none;
+  padding-left: 0.25rem;
+}
+
+.tiptap-article-editor .ProseMirror ul[data-type='taskList'] li {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.tiptap-article-editor .ProseMirror ul[data-type='taskList'] li > label {
+  flex: 0 0 auto;
+  user-select: none;
+  margin-top: 0.3em;
+}
+
+.tiptap-article-editor .ProseMirror ul[data-type='taskList'] li > div {
+  flex: 1 1 auto;
+}
+
+.tiptap-article-editor .ProseMirror ul[data-type='taskList'] li[data-checked='true'] > div {
+  color: #78716c; /* stone-500 */
+  text-decoration: line-through;
+}
+
+/* Blockquote */
+.tiptap-article-editor .ProseMirror blockquote {
+  border-left: 3px solid #d6d3d1; /* stone-300 */
+  padding-left: 1rem;
+  color: #57534e; /* stone-600 */
+  font-style: italic;
+}
+
+.dark .tiptap-article-editor .ProseMirror blockquote {
+  border-left-color: #57534e; /* stone-600 */
+  color: #d6d3d1; /* stone-300 */
+}
+
+/* Inline code */
+.tiptap-article-editor .ProseMirror code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.875em;
+  background: #f5f5f4; /* stone-100 */
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+}
+
+.dark .tiptap-article-editor .ProseMirror code {
+  background: #292524; /* stone-800 */
+}
+
+.tiptap-article-editor .ProseMirror pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875rem;
+}
+
+/* Links */
+.tiptap-article-editor .ProseMirror a {
+  color: #2563eb; /* blue-600 */
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.dark .tiptap-article-editor .ProseMirror a {
+  color: #60a5fa; /* blue-400 */
+}
+
+/* Horizontal rule */
+.tiptap-article-editor .ProseMirror hr {
+  border: none;
+  border-top: 1px solid #d6d3d1; /* stone-300 */
+  margin: 1.5rem 0;
+}
+
+.dark .tiptap-article-editor .ProseMirror hr {
+  border-top-color: #57534e; /* stone-600 */
+}
+
+.tiptap-article-editor .ProseMirror hr.ProseMirror-selectednode {
+  border-top-color: #2563eb;
+}
+
+/* Images */
+.tiptap-article-editor .ProseMirror img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+}
+
+.tiptap-article-editor .ProseMirror img.ProseMirror-selectednode {
+  outline: 2px solid #2563eb; /* blue-600 */
+  outline-offset: 2px;
+}
+
+/* Tables */
+.tiptap-article-editor .ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+
+.tiptap-article-editor .ProseMirror table {
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.tiptap-article-editor .ProseMirror th,
+.tiptap-article-editor .ProseMirror td {
+  border: 1px solid #d6d3d1; /* stone-300 */
+  padding: 0.375rem 0.75rem;
+  vertical-align: top;
+  position: relative;
+}
+
+.dark .tiptap-article-editor .ProseMirror th,
+.dark .tiptap-article-editor .ProseMirror td {
+  border-color: #57534e; /* stone-600 */
+}
+
+.tiptap-article-editor .ProseMirror th {
+  background: #f5f5f4; /* stone-100 */
+  font-weight: 600;
+  text-align: left;
+}
+
+.dark .tiptap-article-editor .ProseMirror th {
+  background: #292524; /* stone-800 */
+}
+
+/* GFM column alignment carried on the cells */
+.tiptap-article-editor .ProseMirror th[align='center'],
+.tiptap-article-editor .ProseMirror td[align='center'] {
+  text-align: center;
+}
+
+.tiptap-article-editor .ProseMirror th[align='right'],
+.tiptap-article-editor .ProseMirror td[align='right'] {
+  text-align: right;
+}
+
+.tiptap-article-editor .ProseMirror .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(37, 99, 235, 0.12); /* blue-600 */
+  pointer-events: none;
+}
+
+/* Code block syntax highlighting: highlight.js classes emitted by the
+ * lowlight decorations. A minimal palette that reads well on stone
+ * backgrounds in both themes. */
+.tiptap-article-editor .ProseMirror .hljs-comment,
+.tiptap-article-editor .ProseMirror .hljs-quote {
+  color: #78716c;
+  font-style: italic;
+}
+
+.tiptap-article-editor .ProseMirror .hljs-keyword,
+.tiptap-article-editor .ProseMirror .hljs-selector-tag,
+.tiptap-article-editor .ProseMirror .hljs-type {
+  color: #9333ea; /* purple-600 */
+}
+
+.dark .tiptap-article-editor .ProseMirror .hljs-keyword,
+.dark .tiptap-article-editor .ProseMirror .hljs-selector-tag,
+.dark .tiptap-article-editor .ProseMirror .hljs-type {
+  color: #c084fc; /* purple-400 */
+}
+
+.tiptap-article-editor .ProseMirror .hljs-string,
+.tiptap-article-editor .ProseMirror .hljs-regexp,
+.tiptap-article-editor .ProseMirror .hljs-addition {
+  color: #16a34a; /* green-600 */
+}
+
+.dark .tiptap-article-editor .ProseMirror .hljs-string,
+.dark .tiptap-article-editor .ProseMirror .hljs-regexp,
+.dark .tiptap-article-editor .ProseMirror .hljs-addition {
+  color: #4ade80; /* green-400 */
+}
+
+.tiptap-article-editor .ProseMirror .hljs-number,
+.tiptap-article-editor .ProseMirror .hljs-literal {
+  color: #ea580c; /* orange-600 */
+}
+
+.dark .tiptap-article-editor .ProseMirror .hljs-number,
+.dark .tiptap-article-editor .ProseMirror .hljs-literal {
+  color: #fb923c; /* orange-400 */
+}
+
+.tiptap-article-editor .ProseMirror .hljs-title,
+.tiptap-article-editor .ProseMirror .hljs-function,
+.tiptap-article-editor .ProseMirror .hljs-attr {
+  color: #2563eb; /* blue-600 */
+}
+
+.dark .tiptap-article-editor .ProseMirror .hljs-title,
+.dark .tiptap-article-editor .ProseMirror .hljs-function,
+.dark .tiptap-article-editor .ProseMirror .hljs-attr {
+  color: #60a5fa; /* blue-400 */
+}
+
+/* Gap cursor between isolating blocks */
+.tiptap-article-editor .ProseMirror .ProseMirror-gapcursor:after {
+  border-top: 1px solid #1c1917;
+}
+
+.dark .tiptap-article-editor .ProseMirror .ProseMirror-gapcursor:after {
+  border-top-color: #fafaf9;
+}
diff --git a/app/lib/api-client.ts b/app/lib/api-client.ts
index fd12eb0..6d079d4 100644
--- a/app/lib/api-client.ts
+++ b/app/lib/api-client.ts
@@ -1,5 +1,6 @@
 import type { OAuthSession } from '@atproto/oauth-client-browser'
 import { nextTid, resolvePdsUrl } from '~/lib/atproto'
+import { contentImageMarkdown, matchContentImages } from '~/lib/content-images'
 import { MAX_IMAGE_BYTES, MAX_IMAGE_LABEL } from '~/lib/security-constants'
 
 export type BskyReply = {
@@ -214,7 +215,7 @@ export async function uploadContentImages(
   session: OAuthSession,
   markdown: string,
 ): Promise<{ content: string; imageBlobs: Array<{ image: AtpBlob; alt: string }> }> {
-  const matches = [...markdown.matchAll(/!\[([^\]]*)\]\((blob:[^)]+)\)/g)]
+  const matches = matchContentImages(markdown)
   if (matches.length === 0) return { content: markdown, imageBlobs: [] }
 
   const did = session.sub
@@ -222,8 +223,7 @@ export async function uploadContentImages(
   const imageBlobs: Array<{ image: AtpBlob; alt: string }> = []
   const failures: string[] = []
 
-  for (const match of matches) {
-    const [fullMatch, alt, blobUrl] = match
+  for (const { fullMatch, alt, blobUrl, title } of matches) {
     try {
       const res = await fetch(blobUrl)
       const blob = await res.blob()
@@ -234,7 +234,7 @@ export async function uploadContentImages(
       const file = new File([blob], 'image', { type: blob.type || 'image/jpeg' })
       const atpBlob = await uploadBlob(session, file)
       const cdnUrl = coverImageCdnUrl(did, atpBlob.ref.$link)
-      result = result.replace(fullMatch, `![${alt}](${cdnUrl})`)
+      result = result.replace(fullMatch, contentImageMarkdown(alt, cdnUrl, title))
       imageBlobs.push({ image: atpBlob, alt })
     } catch {
       failures.push(alt || 'image')
diff --git a/app/lib/content-images.test.ts b/app/lib/content-images.test.ts
new file mode 100644
index 0000000..bcc76c1
--- /dev/null
+++ b/app/lib/content-images.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+import { contentImageMarkdown, matchContentImages } from './content-images'
+
+describe('matchContentImages', () => {
+  it('matches a plain blob image', () => {
+    const [match] = matchContentImages('text ![my photo](blob:http://localhost/abc-123) more')
+    expect(match).toEqual({
+      fullMatch: '![my photo](blob:http://localhost/abc-123)',
+      alt: 'my photo',
+      blobUrl: 'blob:http://localhost/abc-123',
+      title: undefined,
+    })
+  })
+
+  it('matches a titled diagram image without swallowing the title into the url', () => {
+    const [match] = matchContentImages(
+      '![Excalidraw diagram](blob:http://localhost/abc-123 "lemma:excalidraw")',
+    )
+    expect(match.blobUrl).toBe('blob:http://localhost/abc-123')
+    expect(match.title).toBe('lemma:excalidraw')
+  })
+
+  it('ignores non-blob images', () => {
+    expect(matchContentImages('![done](https://cdn.bsky.app/img/x/plain/did:plc:a/cid@jpeg)')).toEqual([])
+  })
+
+  it('matches multiple images', () => {
+    const matches = matchContentImages(
+      '![a](blob:http://l/1)\n\n![b](blob:http://l/2 "lemma:drawio")\n\n![c](blob:http://l/3)',
+    )
+    expect(matches.map((m) => m.blobUrl)).toEqual([
+      'blob:http://l/1',
+      'blob:http://l/2',
+      'blob:http://l/3',
+    ])
+    expect(matches.map((m) => m.title)).toEqual([undefined, 'lemma:drawio', undefined])
+  })
+})
+
+describe('contentImageMarkdown', () => {
+  it('round-trips with matchContentImages for untitled images (byte-identical to the old form)', () => {
+    expect(contentImageMarkdown('alt', 'https://cdn.example/x@jpeg')).toBe(
+      '![alt](https://cdn.example/x@jpeg)',
+    )
+  })
+
+  it('keeps the title on rewrite', () => {
+    expect(contentImageMarkdown('d', 'https://cdn.example/x@jpeg', 'lemma:drawio')).toBe(
+      '![d](https://cdn.example/x@jpeg "lemma:drawio")',
+    )
+  })
+})
diff --git a/app/lib/content-images.ts b/app/lib/content-images.ts
new file mode 100644
index 0000000..991b170
--- /dev/null
+++ b/app/lib/content-images.ts
@@ -0,0 +1,25 @@
+// Matches the pending content images in article markdown: images whose src is
+// still a local object URL, optionally carrying a title —
+// `![alt](blob:… "title")`. The title must survive the upload rewrite because
+// diagram images use it as their editor marker (e.g. "lemma:excalidraw").
+export interface ContentImageMatch {
+  fullMatch: string
+  alt: string
+  blobUrl: string
+  title?: string
+}
+
+const CONTENT_IMAGE_RE = /!\[([^\]]*)\]\((blob:[^\s)]+)(?:\s+"([^"]*)")?\)/g
+
+export function matchContentImages(markdown: string): ContentImageMatch[] {
+  return [...markdown.matchAll(CONTENT_IMAGE_RE)].map((match) => ({
+    fullMatch: match[0],
+    alt: match[1],
+    blobUrl: match[2],
+    title: match[3],
+  }))
+}
+
+export function contentImageMarkdown(alt: string, url: string, title?: string): string {
+  return title ? `![${alt}](${url} "${title}")` : `![${alt}](${url})`
+}
diff --git a/app/lib/help-content.ts b/app/lib/help-content.ts
new file mode 100644
index 0000000..c94a883
--- /dev/null
+++ b/app/lib/help-content.ts
@@ -0,0 +1,344 @@
+// The sample article shown on the Help page. Lives in its own module so the
+// serializer tests can use it as a realistic markdown corpus without
+// importing the route component.
+
+export const HELP_CONTENT = `
+Our editor uses Markdown plus extensions designed for writers in specialized fields.
+Don't worry, the **toolbar buttons** will help you with the syntax.
+For a deeper dive please see the documentation sites for
+[GitHub Flavored Markdown](https://github.github.com/gfm/),
+[KaTeX](https://katex.org/docs/support_table.html) math notation,
+[Mermaid](https://mermaid.js.org/intro/) diagrams,
+[ABC](https://paulrosen.github.io/abcjs/overview/abc-notation.html) music notation, and
+[Fountain](https://fountain.io/syntax/) screenplays.
+
+You can upload images to use anywhere on your article. 
+They will be saved to your personal data server (PDS) and served through Bluesky's content delivery network (CDN) for super fast access, just like the photos in your Bluesky posts.
+
+<br/><br/>
+
+## Mentions, hashtags, and cashtags
+
+Just type things like #wildlife or @atproto.com for Bluesky hashtags and profiles.  
+You can also view detailed financial information for stocks and index symbols like $AAPL or $^GSPC . It won't affect price text like $10 so no worries.
+
+<br/>
+
+## Code
+
+Inline as \`myVariable\` or in a code block with syntax highlighting and a language badge:
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello, world!");
+}
+\`\`\`
+
+<br/><br/>
+
+## Math
+
+Use LaTeX syntax for math. Expressions within text like $$ log_2(64) = 6 $$ stay inline.
+
+Expressions surrounded by blank lines are rendered in display mode:
+
+$$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$$
+
+- Surround text with \`$$\` for math expressions 
+e.g. \`$$ x^2 $$\` becomes $$x^2$$.
+- Start with \`\\$\` when you want 2 or more $ signs in a row as literals.  
+For example, use \`\\$$$\` to display a price as $$$.
+
+<br/><br/>
+
+## Function Plots
+
+Visualize 2-D mathematical functions in an interactive graph using ECMAScript syntax:
+
+\`\`\`functionplot
+x^2
+sin(x)
+log2(x)
+\`\`\`
+
+<br/><br/>
+
+You can also use **frontmatter** (a common format for specifying metadata in Markdown documents) to show or hide the grid and specify the **size**, **domain**, and **range** for the plot.
+
+\`\`\`functionplot
+---
+xMin: 0
+xMax: 10
+yMin: 0
+yMax: 10
+width: 500
+height: 250
+grid: true
+---
+1
+log2(x)
+x
+x*log2(x)
+x^2
+\`\`\`
+
+<br/><br/>
+
+## Musical Notation
+
+ABC notation for musical scores:
+
+\`\`\`abc
+X:1
+K:D
+DD AA|BBA2|
+\`\`\`
+
+<br/><br/>
+
+## Embed web content
+
+You can also embed web content like music, video, social media posts, or even a whole coding sandbox thanks to [Iframely](https://iframely.com/domains). 
+Just select the **Embed** button on the toolbar while writing your post. 
+
+### Social Media
+
+\`\`\`embed
+https://bsky.app/profile/bsky.app/post/3l6oveex3ii2l
+\`\`\`
+
+<br/><br/>
+
+### Music & Podcasts
+
+\`\`\`embed
+https://open.spotify.com/track/7dLU4J2XZ9cRB9SJqORo9d?si=2267fa99c8ae46b2
+\`\`\`
+
+<br/>
+
+\`\`\`embed
+https://open.spotify.com/episode/0SoZg3LjLsMvhoTLcEI64g?si=q5UnilO0SIiot4apmPmBlA
+\`\`\`
+
+### GIFs
+
+\`\`\`embed
+https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmEyc2JkNDY2cGRwY3hjN2g4ZXh6cWhlYjJhd204dTNrdWxsNXBodSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5VKbvrjxpVJCM/giphy.gif
+\`\`\`
+
+### Photo and video
+
+\`\`\`embed
+https://picsum.photos/500
+\`\`\`
+
+<br/>
+
+\`\`\`embed
+https://www.youtube.com/watch?v=iX6w1P60m8M
+\`\`\`
+
+<br/><br/>
+
+## Technical Diagrams
+
+Use [Mermaid](https://mermaid.js.org/intro/) syntax to write all kinds of diagrams. A few examples:  
+
+### Flowchart
+
+\`\`\`mermaid
+flowchart TD
+    A[Start] --> B{Is it working?}
+    B -->|Yes| C[Great!]
+    B -->|No| D[Debug]
+    D --> B
+    C --> E[End]
+\`\`\`
+
+<br/><br/>
+
+### Architecture diagram
+
+\`\`\`mermaid
+architecture-beta
+group api(cloud)[Infrastructure]
+
+service db(database)[Database] in api
+service disk1(disk)[Storage] in api
+service server(server)[Server] in api
+
+server:R -- L:db
+server:B -- T:disk1
+\`\`\`
+
+<br/><br/>
+
+Architecture diagrams support [logos](https://icon-sets.iconify.design/logos/)!
+\`\`\`mermaid
+architecture-beta
+group api(logos:aws-cloudformation)[Infrastructure]
+
+service db(logos:aws-aurora)[Database] in api
+service disk1(logos:aws-s3)[Storage] in api
+service server(logos:aws-ec2)[Server] in api
+
+server:R -- L:db
+server:B -- T:disk1
+\`\`\`
+
+<br/><br/>
+
+### Git diagram
+
+\`\`\`mermaid
+---
+title: Example Git diagram
+---
+
+gitGraph:
+    commit
+    branch feature1
+    commit id:"my changes"
+    checkout main
+    commit
+    merge feature1
+    commit
+    commit tag:"v1.0.0" type: HIGHLIGHT 
+    branch feature2
+    commit
+\`\`\`
+
+<br/><br/>
+
+### Sankey diagram
+
+\`\`\`mermaid
+sankey
+%% source,target,value
+Revenue, Online store, 104.453
+Revenue, Physical stores, 113.726
+Revenue, Subscription services, 27.14
+\`\`\`
+
+<br/><br/>
+
+### Sequence diagram
+
+\`\`\`mermaid
+---
+title: Conversation
+---
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+    John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+\`\`\`
+
+<br/><br/>
+
+Flowcharts and sequence diagrams support math!
+\`\`\`mermaid
+sequenceDiagram
+    autonumber
+    participant 1 as $$\\alpha$$
+    participant 2 as $$\\beta$$
+    1->>2: Solve: $$\\sqrt{2+2}$$
+    2-->>1: Answer: $$2$$
+    Note right of 2: $$\\sqrt{2+2}=\\sqrt{4}=2$$
+
+\`\`\`
+
+<br/><br/>
+
+### Kanban board
+
+\`\`\`mermaid
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
+---
+kanban
+  Todo
+    [Create Documentation]
+    docs[Create blog about the new diagram]
+  [In progress]
+    id6[Create renderer so that it works in all cases.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[Last item]@{ priority: 'Very Low', assigned: 'knsv' }
+  id11[Done]
+    id5[Define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
+\`\`\`
+
+<br/><br/>
+
+### Quadrant chart
+
+\`\`\`mermaid
+quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+\`\`\`
+
+<br/><br/>
+
+## Fountain Screenplays
+
+Write screenplays in Fountain format (experimental):
+
+\`\`\`fountain
+Title: Your Screenplay
+Credit: written by
+Author: Your Name
+Source: based on the novel by Someone
+Notes:
+  FINAL PRODUCTION DRAFT
+Copyright: (c) 2025 Awesome Pictures
+
+This is a personal story.
+
+====
+
+INT. COFFEE SHOP - DAY
+
+JOHN sits at a table, typing on his laptop.
+
+JOHN 
+(excited)
+This is how you write a screenplay! I really like this place. Good drinks, friendly staff.
+
+SARAH approaches.
+
+SARAH
+What are you working on?
+
+CUT TO BLACK.
+
+> _**THE END**_ <
+\`\`\`
+`
diff --git a/app/lib/markdownProcessor.ts b/app/lib/markdownProcessor.ts
index e2d095a..bd5c0e1 100644
--- a/app/lib/markdownProcessor.ts
+++ b/app/lib/markdownProcessor.ts
@@ -16,7 +16,21 @@ import rehypeFunctionPlot from '~/lib/rehype-functionplot'
 import rehypeSpoiler from '~/lib/rehype-spoiler'
 import rehypeIframely from '~/lib/rehype-iframely'
 import remarkMentionsHashtags from '~/lib/remark-mentions-hashtags'
-import type { Element } from 'hast'
+import { visit } from 'unist-util-visit'
+import type { Element, Root } from 'hast'
+
+// Images created by the visual editor's diagram tools carry an editor-internal
+// marker in their markdown title (e.g. "lemma:excalidraw"). Strip it at render
+// time so published pages don't show it as a hover tooltip.
+const rehypeStripLemmaTitles = () => (tree: Root) => {
+  visit(tree, 'element', (node: Element) => {
+    if (node.tagName !== 'img') return
+    const title = node.properties?.title
+    if (typeof title === 'string' && title.startsWith('lemma:')) {
+      delete node.properties.title
+    }
+  })
+}
 
 // Create a custom sanitization schema that allows KaTeX elements
 // This maintains security while allowing mathematical rendering
@@ -211,6 +225,7 @@ export const createMarkdownProcessor = (theme?: 'light' | 'dark') => {
       }
     })
     .use(rehypeRaw) // Process raw HTML (needed for KaTeX, ABC, Mermaid, Fountain, and Function Plot output)
+    .use(rehypeStripLemmaTitles) // Editor-internal image markers must not render as tooltips
     .use(rehypeSanitize, sanitizeSchema) // Sanitize after KaTeX, ABC, Mermaid, Fountain, and Function Plot processing
     .use(rehypeStringify)
 }
diff --git a/app/lib/tiptap/extensions.ts b/app/lib/tiptap/extensions.ts
new file mode 100644
index 0000000..6aa9ace
--- /dev/null
+++ b/app/lib/tiptap/extensions.ts
@@ -0,0 +1,86 @@
+// The lemma extension recipe for the visual editor: the markdown-safe subset
+// of Tiptap extensions whose schema round-trips cleanly through the GFM
+// dialect lemma stores (see markdown/serializer.ts). Anything markdown can't
+// express (underline, callouts, columns, …) is deliberately absent.
+
+import type { AnyExtension } from '@tiptap/core'
+import { StarterKit } from '@tiptap/starter-kit'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
+import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'
+import { Image } from '@tiptap/extension-image'
+import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
+import { common, createLowlight } from 'lowlight'
+import plaintext from 'highlight.js/lib/languages/plaintext'
+import { MathBlock } from './math-block'
+import { MathInline } from './math-inline'
+
+export const lowlight = createLowlight(common)
+// lemma's custom fences highlight as plain text inside the editor; the
+// published renderer gives them their real treatment
+for (const lang of ['mermaid', 'abc', 'fountain', 'functionplot', 'embed']) {
+  lowlight.register(lang, plaintext)
+}
+
+// GFM column alignment (`:---:`) travels on the cells: marked emits
+// align="…" on td/th and the turndown GFM tables plugin reads it back.
+const AlignedTableCell = TableCell.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      align: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('align') || element.style.textAlign || null,
+        renderHTML: (attributes) => (attributes.align ? { align: attributes.align } : {}),
+      },
+    }
+  },
+})
+
+const AlignedTableHeader = TableHeader.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      align: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('align') || element.style.textAlign || null,
+        renderHTML: (attributes) => (attributes.align ? { align: attributes.align } : {}),
+      },
+    }
+  },
+})
+
+// The editor component layer passes overrides that attach React node views
+// (this module stays free of React so the serializer can use the same schema
+// headlessly). An override replaces the default entry for that node wholesale.
+export interface LemmaExtensionOverrides {
+  codeBlock?: AnyExtension
+  mathInline?: AnyExtension
+  mathBlock?: AnyExtension
+  image?: AnyExtension
+}
+
+export function createLemmaExtensions(overrides: LemmaExtensionOverrides = {}) {
+  return [
+    StarterKit.configure({
+      // replaced by CodeBlockLowlight below
+      codeBlock: false,
+      // markdown can't express underline
+      underline: false,
+      link: {
+        openOnClick: false,
+      },
+    }),
+    TaskList,
+    TaskItem.configure({ nested: true }),
+    Table,
+    TableRow,
+    AlignedTableHeader,
+    AlignedTableCell,
+    // Inline so `text ![img](u) more text` keeps its structure through the
+    // round trip; images on their own line serialize identically either way.
+    overrides.image ?? Image.configure({ inline: true }),
+    overrides.codeBlock ?? CodeBlockLowlight.configure({ lowlight }),
+    overrides.mathInline ?? MathInline,
+    overrides.mathBlock ?? MathBlock,
+  ]
+}
diff --git a/app/lib/tiptap/markdown-clipboard.ts b/app/lib/tiptap/markdown-clipboard.ts
new file mode 100644
index 0000000..c955cfc
--- /dev/null
+++ b/app/lib/tiptap/markdown-clipboard.ts
@@ -0,0 +1,56 @@
+// Clipboard integration for the visual editor: plain-text pastes are parsed
+// as markdown (so text copied from the markdown editor, a terminal, or a
+// README pastes as rich content), and multi-block copies serialize to
+// markdown (so text copied out of the visual editor pastes cleanly into the
+// markdown editor or any plain-text destination).
+
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { DOMParser as PMDOMParser, DOMSerializer } from '@tiptap/pm/model'
+import { editorHtmlToMarkdown, markdownToEditorHtml } from './markdown/serializer'
+
+export const MarkdownClipboard = Extension.create({
+  name: 'markdownClipboard',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('markdownClipboard'),
+        props: {
+          clipboardTextSerializer: (slice) => {
+            // Single blocks keep ProseMirror's default text extraction;
+            // markdown syntax only matters once structure is involved.
+            if (slice.content.childCount < 2) return null as unknown as string
+            const serializer = DOMSerializer.fromSchema(this.editor.schema)
+            const container = document.createElement('div')
+            container.appendChild(serializer.serializeFragment(slice.content))
+            return editorHtmlToMarkdown(container.innerHTML)
+          },
+
+          handlePaste: (view, event) => {
+            if (!event.clipboardData) return false
+            // Inside a code block everything stays literal.
+            if (this.editor.isActive('codeBlock')) return false
+            // Rich clipboard content (HTML) takes the default path.
+            if (event.clipboardData.getData('text/html')) return false
+            const text = event.clipboardData.getData('text/plain')
+            if (!text) return false
+            // Shift-paste means "paste without formatting".
+            if ((view as any).input?.shiftKey) return false
+
+            const doc = new DOMParser().parseFromString(
+              `<body>${markdownToEditorHtml(text.replace(/\n+$/, ''))}</body>`,
+              'text/html',
+            )
+            const slice = PMDOMParser.fromSchema(this.editor.schema).parseSlice(doc.body, {
+              preserveWhitespace: true,
+            })
+            const { state } = view
+            view.dispatch(state.tr.replaceSelection(slice).setMeta('paste', true).scrollIntoView())
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})
diff --git a/app/lib/tiptap/markdown/joplin-turndown.d.ts b/app/lib/tiptap/markdown/joplin-turndown.d.ts
new file mode 100644
index 0000000..f3bf455
--- /dev/null
+++ b/app/lib/tiptap/markdown/joplin-turndown.d.ts
@@ -0,0 +1,3 @@
+// The @joplin/turndown packages ship no type declarations.
+declare module '@joplin/turndown'
+declare module '@joplin/turndown-plugin-gfm'
diff --git a/app/lib/tiptap/markdown/lossy-detect.test.ts b/app/lib/tiptap/markdown/lossy-detect.test.ts
new file mode 100644
index 0000000..1849364
--- /dev/null
+++ b/app/lib/tiptap/markdown/lossy-detect.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { detectLossyMarkdown } from './lossy-detect'
+
+describe('detectLossyMarkdown', () => {
+  it('clean GFM article is not lossy', () => {
+    const report = detectLossyMarkdown(
+      '# Title\n\nSome **bold** text with a [link](https://x.example).\n\n- one\n- two\n\n```js\ncode()\n```',
+    )
+    expect(report.isLossy).toBe(false)
+  })
+
+  it('math and custom fences are not lossy', () => {
+    const report = detectLossyMarkdown(
+      'Inline $$a<b$$ math.\n\n$$\n\\sum_i i\n$$\n\n```mermaid\ngraph TD\nA-->B\n```\n\n::spoiler:: hidden ::spoiler::',
+    )
+    expect(report.isLossy).toBe(false)
+  })
+
+  it('flags raw HTML', () => {
+    const report = detectLossyMarkdown('Some text\n\n<div class="fancy">styled</div>')
+    expect(report.hasRawHtml).toBe(true)
+    expect(report.isLossy).toBe(true)
+  })
+
+  it('does not flag raw HTML inside code fences or inline code', () => {
+    const report = detectLossyMarkdown('Use `<div>` like:\n\n```html\n<div>block</div>\n```')
+    expect(report.hasRawHtml).toBe(false)
+    expect(report.isLossy).toBe(false)
+  })
+
+  it('does not flag <br>', () => {
+    const report = detectLossyMarkdown('line\n\n<br/>\n\nmore')
+    expect(report.hasRawHtml).toBe(false)
+  })
+
+  it('flags footnotes', () => {
+    const report = detectLossyMarkdown('Claim.[^1]\n\n[^1]: The source.')
+    expect(report.hasFootnotes).toBe(true)
+    expect(report.isLossy).toBe(true)
+  })
+})
diff --git a/app/lib/tiptap/markdown/lossy-detect.ts b/app/lib/tiptap/markdown/lossy-detect.ts
new file mode 100644
index 0000000..61f6169
--- /dev/null
+++ b/app/lib/tiptap/markdown/lossy-detect.ts
@@ -0,0 +1,50 @@
+// Detects markdown the visual editor cannot faithfully round-trip, so the
+// editor toggle can warn before content is silently rewritten or dropped.
+// Two layers: cheap syntax heuristics (raw HTML, footnotes — constructs the
+// editor schema has no node for), and a rendered-text comparison that catches
+// anything whose visible content changes across a round trip.
+
+import { markdownToHtml } from './marked-config'
+import { roundTripMarkdown } from './serializer'
+
+export interface LossyReport {
+  hasRawHtml: boolean
+  hasFootnotes: boolean
+  textChanged: boolean
+  isLossy: boolean
+}
+
+// Blank out spans whose contents are opaque to markdown (code, math) so their
+// bodies can't trip the heuristics — e.g. `<div>` inside a code fence, or
+// `$$a<b$$`.
+function maskOpaqueSpans(markdown: string): string {
+  return markdown
+    .replace(/```[\s\S]*?(?:```|$)/g, (m) => ' '.repeat(m.length))
+    .replace(/`[^`\n]*`/g, (m) => ' '.repeat(m.length))
+    .replace(/\$\$[^$]*\$\$/g, (m) => ' '.repeat(m.length))
+}
+
+// <br> is representable (hard break); any other raw tag is not.
+const RAW_HTML_TAG = /<\/?(?!br[\s/>])[a-zA-Z][^>\n]*>/
+const FOOTNOTE = /\[\^[^\]\s]+\]/
+
+// Visible text of the markdown as the published renderer would show it,
+// whitespace-collapsed. Parsed with DOMParser (inert document — no resource
+// loading or script execution).
+function renderedText(markdown: string): string {
+  const doc = new DOMParser().parseFromString(markdownToHtml(markdown), 'text/html')
+  return (doc.body.textContent ?? '').replace(/\s+/g, ' ').trim()
+}
+
+export function detectLossyMarkdown(markdown: string): LossyReport {
+  const masked = maskOpaqueSpans(markdown)
+  const hasRawHtml = RAW_HTML_TAG.test(masked)
+  const hasFootnotes = FOOTNOTE.test(masked)
+  const textChanged = renderedText(markdown) !== renderedText(roundTripMarkdown(markdown))
+  return {
+    hasRawHtml,
+    hasFootnotes,
+    textChanged,
+    isLossy: hasRawHtml || hasFootnotes || textChanged,
+  }
+}
diff --git a/app/lib/tiptap/markdown/marked-config.ts b/app/lib/tiptap/markdown/marked-config.ts
new file mode 100644
index 0000000..91a5953
--- /dev/null
+++ b/app/lib/tiptap/markdown/marked-config.ts
@@ -0,0 +1,47 @@
+// markdown → HTML for seeding the visual editor. The HTML shapes emitted here
+// mirror what the Tiptap extensions parse (and what the editor's getHTML()
+// produces), keeping the markdown → editor → markdown round trip stable.
+
+import { Marked } from 'marked'
+import { mathBlockTokenizer, mathInlineTokenizer } from './math-tokenizers'
+
+const marked = new Marked({
+  // Single newlines stay soft breaks (rendered as spaces), matching the
+  // remark pipeline that renders published articles. GFM two-space and
+  // backslash hard breaks still produce <br>.
+  breaks: false,
+  gfm: true,
+})
+
+marked.use({
+  renderer: {
+    // Emit the list markup Tiptap's TaskList/TaskItem extensions parse
+    // (data-type + data-checked) instead of marked's default
+    // <input type="checkbox"> form.
+    list({ ordered, start, items }) {
+      let body = ''
+      for (const item of items) body += this.listitem(item)
+      if (ordered) {
+        const startAttr = start && start !== 1 ? ` start="${start}"` : ''
+        return `<ol${startAttr}>\n${body}</ol>\n`
+      }
+      const dataType = items.some((item) => item.task) ? ' data-type="taskList"' : ''
+      return `<ul${dataType}>\n${body}</ul>\n`
+    },
+    listitem(item) {
+      // parse() wraps item text in <p> (top-level parse), matching the
+      // <li><p>… structure ProseMirror always serializes.
+      const text = this.parser.parse(item.tokens)
+      if (!item.task) {
+        return `<li>${text}</li>\n`
+      }
+      return `<li data-type="taskItem" data-checked="${item.checked ? 'true' : 'false'}">${text}</li>\n`
+    },
+  },
+})
+
+marked.use({ extensions: [mathBlockTokenizer, mathInlineTokenizer] })
+
+export function markdownToHtml(markdown: string): string {
+  return marked.parse(markdown, { async: false }) as string
+}
diff --git a/app/lib/tiptap/markdown/math-tokenizers.ts b/app/lib/tiptap/markdown/math-tokenizers.ts
new file mode 100644
index 0000000..5be7419
--- /dev/null
+++ b/app/lib/tiptap/markdown/math-tokenizers.ts
@@ -0,0 +1,69 @@
+// marked tokenizers for lemma's math syntax: `$$…$$` only, matching the
+// remark-math configuration the published-article renderer uses
+// (singleDollarTextMath: false — a single `$` is never math).
+
+import type { TokenizerAndRendererExtension } from 'marked'
+
+// Math content is emitted verbatim (HTML-escaped only). Running it through a
+// markdown parser would rewrite `*`/`_`/`\` sequences and corrupt the LaTeX
+// on the way back to markdown.
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+export const mathInlineTokenizer: TokenizerAndRendererExtension = {
+  name: 'mathInline',
+  level: 'inline',
+  start(src: string) {
+    const index = src.indexOf('$$')
+    return index === -1 ? undefined : index
+  },
+  tokenizer(src: string) {
+    const match = /^\$\$([^$\n]+?)\$\$/.exec(src)
+    if (match) {
+      return { type: 'mathInline', raw: match[0], text: match[1].trim() }
+    }
+    return undefined
+  },
+  renderer(token) {
+    return `<span data-type="mathInline" data-katex="true">${escapeHtml(token.text)}</span>`
+  },
+}
+
+// Display math: either a single line `$$…$$` with nothing after the closing
+// delimiter, or a `$$`-fenced block. The closing `$$` must end its line, so
+// `$$x$$ trailing text` stays a paragraph and is picked up by the inline
+// tokenizer — the same distinction remark-math makes.
+const BLOCK_SINGLE_LINE = /^\$\$(?!\$)([^$\n]+?)\$\$[ \t]*(?:\n+|$)/
+const BLOCK_FENCED = /^\$\$[ \t]*\n([\s\S]+?)\n[ \t]*\$\$[ \t]*(?:\n+|$)/
+
+export const mathBlockTokenizer: TokenizerAndRendererExtension = {
+  name: 'mathBlock',
+  level: 'block',
+  // Only claim positions where a block-level match actually begins (at a line
+  // start, with the closing delimiter ending a line). Interrupting a
+  // paragraph at every `$$` would break the text apart before the *inline*
+  // tokenizer gets a chance to run.
+  start(src: string) {
+    const lineStart = /(^|\n)\$\$/g
+    let match
+    while ((match = lineStart.exec(src))) {
+      const index = match.index + match[1].length
+      const rest = src.slice(index)
+      if (BLOCK_SINGLE_LINE.test(rest) || BLOCK_FENCED.test(rest)) {
+        return index
+      }
+    }
+    return undefined
+  },
+  tokenizer(src: string) {
+    const match = BLOCK_SINGLE_LINE.exec(src) ?? BLOCK_FENCED.exec(src)
+    if (match) {
+      return { type: 'mathBlock', raw: match[0], text: match[1].trim() }
+    }
+    return undefined
+  },
+  renderer(token) {
+    return `<div data-type="mathBlock" data-katex="true">${escapeHtml(token.text)}</div>`
+  },
+}
diff --git a/app/lib/tiptap/markdown/serializer.test.ts b/app/lib/tiptap/markdown/serializer.test.ts
new file mode 100644
index 0000000..940b1da
--- /dev/null
+++ b/app/lib/tiptap/markdown/serializer.test.ts
@@ -0,0 +1,185 @@
+import { describe, expect, it } from 'vitest'
+import { HELP_CONTENT } from '../../help-content'
+import { roundTripMarkdown } from './serializer'
+
+// A construct is "stable" when opening it in the visual editor and saving
+// untouched returns it byte-for-byte. Where the round trip normalizes style,
+// the fixture states the normalized form and a second trip must be a no-op.
+function expectStable(markdown: string) {
+  const once = roundTripMarkdown(markdown)
+  expect(once).toBe(markdown)
+}
+
+function expectIdempotent(markdown: string) {
+  const once = roundTripMarkdown(markdown)
+  expect(roundTripMarkdown(once)).toBe(once)
+  return once
+}
+
+describe('roundTripMarkdown: stable constructs', () => {
+  it('headings', () => {
+    expectStable('# One\n\n## Two\n\n### Three\n\n#### Four\n\n##### Five\n\n###### Six')
+  })
+
+  it('marks', () => {
+    expectStable('Some **bold** and *italic* and ~~struck~~ and `coded` text.')
+  })
+
+  it('links', () => {
+    expectStable('See [the docs](https://example.com/a?b=c) for details.')
+  })
+
+  it('bullet list', () => {
+    expectStable('- one\n- two\n- three')
+  })
+
+  it('nested bullet list stays tight', () => {
+    expectStable('- one\n  - one point one\n  - one point two\n- two')
+  })
+
+  it('ordered list', () => {
+    expectStable('1. first\n2. second\n3. third')
+  })
+
+  it('ordered list with start offset', () => {
+    expectStable('4. fourth\n5. fifth')
+  })
+
+  it('task list with inline marks', () => {
+    expectStable('- [ ] plain task\n- [x] **bold** task')
+  })
+
+  it('blockquote', () => {
+    expectStable('> quoted wisdom')
+  })
+
+  it('horizontal rule', () => {
+    expectStable('above\n\n---\n\nbelow')
+  })
+
+  it('hard break', () => {
+    expectStable('line one  \nline two')
+  })
+
+  it('fenced code block with language', () => {
+    expectStable('```javascript\nfunction hello() {\n  console.log("hi");\n}\n```')
+  })
+
+  it('fenced code block preserves markdown-like content literally', () => {
+    expectStable('```\n# not a heading\n**not bold**\n$$not math$$\n```')
+  })
+
+  it('lemma custom fences pass through as code blocks', () => {
+    for (const lang of ['mermaid', 'abc', 'fountain', 'functionplot', 'embed']) {
+      expectStable('```' + lang + '\nsome source\nlines\n```')
+    }
+  })
+
+  it('table', () => {
+    expectStable('| a   | b   |\n| --- | --- |\n| 1   | 2   |\n| 3   | 4   |')
+  })
+
+  it('table with column alignment', () => {
+    expectStable('| left | center | right |\n| :--- | :---: | ---: |\n| a   | b   | c   |')
+  })
+
+  it('inline math', () => {
+    expectStable('Euler says $$e^{i\\pi} + 1 = 0$$ inline.')
+  })
+
+  it('block math', () => {
+    expectStable('$$\n\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}\n$$')
+  })
+
+  it('math with < and underscores survives byte-for-byte', () => {
+    expectStable('$$a<b \\text{ and } x_1*x_2$$ inline.')
+  })
+
+  it('single dollars are never math', () => {
+    expectStable('Prices like $10 or $AAPL stay text.')
+  })
+
+  it('image', () => {
+    expectStable('![a photo](https://cdn.example.com/img.jpg)')
+  })
+
+  it('image with blob url', () => {
+    expectStable('![pending upload](blob:http://localhost/1234-abcd)')
+  })
+
+  it('image with diagram marker title', () => {
+    expectStable('![Excalidraw diagram](https://cdn.example.com/d.png "lemma:excalidraw")')
+  })
+
+  it('inline image keeps its place in a paragraph', () => {
+    expectStable('before ![tiny](https://x.example/i.png) after')
+  })
+
+  it('spoiler syntax passes through as text', () => {
+    expectStable('::spoiler:: the butler did it ::spoiler::')
+  })
+
+  it('mentions and hashtags mid-line pass through', () => {
+    expectStable('Ping @user.bsky.social about #wildlife today.')
+  })
+})
+
+describe('roundTripMarkdown: documented normalizations', () => {
+  it('standalone inline math becomes display form', () => {
+    expect(roundTripMarkdown('$$E = mc^2$$')).toBe('$$\nE = mc^2\n$$')
+  })
+
+  it('alternate bullet markers normalize to -', () => {
+    expect(roundTripMarkdown('* one\n* two')).toBe('- one\n- two')
+  })
+
+  it('setext headings normalize to ATX', () => {
+    expect(roundTripMarkdown('Title\n=====')).toBe('# Title')
+  })
+
+  it('underscore emphasis normalizes to asterisks', () => {
+    expect(roundTripMarkdown('some _italic_ text')).toBe('some *italic* text')
+  })
+
+  it('table cells pad to column width', () => {
+    expect(roundTripMarkdown('| a | b |\n| --- | --- |\n| 1 | 2 |')).toBe(
+      '| a   | b   |\n| --- | --- |\n| 1   | 2   |',
+    )
+  })
+})
+
+describe('roundTripMarkdown: corpus', () => {
+  it('help page content is idempotent after one normalization pass', () => {
+    expectIdempotent(HELP_CONTENT)
+  })
+
+  it('multi-construct article is idempotent', () => {
+    const article = [
+      '# Field Notes',
+      '',
+      'An *intro* paragraph with a [link](https://example.com) and `code`.',
+      '',
+      '## Observations',
+      '',
+      '- first\n  - nested\n- second',
+      '',
+      '1. step one\n2. step two',
+      '',
+      '- [ ] todo\n- [x] done',
+      '',
+      '> a quote',
+      '',
+      '```python\nprint("hello")\n```',
+      '',
+      '| k   | v   |\n| --- | --- |\n| a   | 1   |',
+      '',
+      '$$\n\\int_0^1 x\\,dx = \\tfrac12\n$$',
+      '',
+      '![fig](https://cdn.example.com/fig.png)',
+      '',
+      'The end.',
+    ].join('\n')
+    const once = expectIdempotent(article)
+    expect(once).toBe(article)
+  })
+})
diff --git a/app/lib/tiptap/markdown/serializer.ts b/app/lib/tiptap/markdown/serializer.ts
new file mode 100644
index 0000000..f0ca775
--- /dev/null
+++ b/app/lib/tiptap/markdown/serializer.ts
@@ -0,0 +1,29 @@
+// The markdown ⇄ visual-editor boundary. Lemma's canonical article format is
+// raw GFM markdown (stored verbatim in the PDS record and DynamoDB); the
+// visual editor holds a ProseMirror document. These two functions are the only
+// crossing points:
+//
+//   markdown --markdownToEditorHtml--> HTML --Tiptap setContent--> ProseMirror
+//   ProseMirror --editor.getHTML()--> HTML --editorHtmlToMarkdown--> markdown
+
+import { generateHTML, generateJSON } from '@tiptap/core'
+import { createLemmaExtensions } from '../extensions'
+import { markdownToHtml } from './marked-config'
+import { htmlToMarkdown } from './turndown-config'
+
+export function markdownToEditorHtml(markdown: string): string {
+  return markdownToHtml(markdown)
+}
+
+export function editorHtmlToMarkdown(html: string): string {
+  return htmlToMarkdown(html).trim()
+}
+
+// Full markdown → ProseMirror → markdown normalization: exactly what opening
+// an article in the visual editor and saving it untouched produces. Used by
+// tests and the lossy-content detector.
+export function roundTripMarkdown(markdown: string): string {
+  const extensions = createLemmaExtensions()
+  const json = generateJSON(markdownToEditorHtml(markdown), extensions)
+  return editorHtmlToMarkdown(generateHTML(json, extensions))
+}
diff --git a/app/lib/tiptap/markdown/turndown-config.ts b/app/lib/tiptap/markdown/turndown-config.ts
new file mode 100644
index 0000000..76b586e
--- /dev/null
+++ b/app/lib/tiptap/markdown/turndown-config.ts
@@ -0,0 +1,176 @@
+// editor HTML → markdown. Configured so the output is the same GFM dialect
+// lemma stores and renders (remark-gfm + remark-math with `$$` only).
+
+import * as TurndownModule from '@joplin/turndown'
+import * as TurndownPluginGfm from '@joplin/turndown-plugin-gfm'
+
+// CJS/ESM interop: the package is CJS; Vite exposes it under .default
+const TurndownService: any = (TurndownModule as any).default ?? TurndownModule
+
+// Joplin's turndown escapes every `$` (its Katex handling). In lemma a single
+// `$` is never math (remark-math runs with singleDollarTextMath: false), so
+// lone dollars are restored; runs of 2+ stay escaped because they could form
+// a `$$…$$` delimiter on reparse.
+function restoreLoneDollars(text: string): string {
+  return text.replace(/(?:\\\$)+/g, (run) => (run.length === 2 ? '$' : run))
+}
+
+// The turndown GFM tables plugin only treats a row as the header row when it
+// sits in <thead> (or leads a plain <table>). ProseMirror serializes tables
+// as <table><tbody> with <th> cells in the first row, so wrap that row.
+function wrapHeaderRows(root: HTMLElement) {
+  for (const table of Array.from(root.querySelectorAll('table'))) {
+    if (table.querySelector(':scope > thead')) continue
+    const firstRow = table.querySelector(':scope > tbody > tr, :scope > tr')
+    if (!firstRow) continue
+    const cells = Array.from(firstRow.children)
+    if (cells.length === 0 || !cells.every((cell) => cell.nodeName === 'TH')) continue
+    const thead = table.ownerDocument.createElement('thead')
+    thead.appendChild(firstRow)
+    table.insertBefore(thead, table.firstChild)
+  }
+}
+
+// Returns the list item a node belongs to when it sits directly in the item's
+// content flow: either a direct child of <li>, or a child of the <div> wrapper
+// Tiptap's task items render around their content.
+function listItemFor(node: HTMLElement): HTMLElement | null {
+  const parent = node.parentElement
+  if (!parent) return null
+  if (parent.nodeName === 'LI') return parent
+  if (parent.nodeName === 'DIV' && parent.parentElement?.nodeName === 'LI') {
+    return parent.parentElement
+  }
+  return null
+}
+
+// Indent continuation lines by the item's marker width. Only newlines that
+// precede content are indented — blank separator lines and the trailing
+// newline stay clean.
+function serializeListItemBody(content: string, indent: string): string {
+  return content
+    .replace(/^\n+/, '')
+    .replace(/\n+$/, '\n')
+    .replace(/\n(?=[^\n])/g, '\n' + indent)
+}
+
+function createTurndown() {
+  const service = new TurndownService({
+    headingStyle: 'atx',
+    codeBlockStyle: 'fenced',
+    hr: '---',
+    bulletListMarker: '-',
+    emDelimiter: '*',
+  })
+
+  const originalEscape = service.escape.bind(service)
+  service.escape = (text: string) => restoreLoneDollars(originalEscape(text))
+
+  service.use([TurndownPluginGfm.tables, TurndownPluginGfm.strikethrough])
+
+  // ProseMirror always wraps list-item text in <p>. Serialize a paragraph in
+  // a list item without blank-line padding so simple lists stay tight; a
+  // following sibling paragraph gets the blank line that makes the item loose.
+  service.addRule('listItemParagraph', {
+    filter: (node: HTMLElement) => node.nodeName === 'P' && listItemFor(node) !== null,
+    replacement: (content: string, node: HTMLElement) => {
+      const next = node.nextElementSibling
+      if (!next || next.nodeName === 'UL' || next.nodeName === 'OL') return content
+      return content + '\n\n'
+    },
+  })
+
+  // A paragraph with no text and no children besides hard breaks serializes
+  // to nothing — trailing-space-only lines would otherwise flip-flop between
+  // round trips.
+  service.addRule('emptyParagraph', {
+    filter: (node: HTMLElement) =>
+      node.nodeName === 'P' &&
+      !(node.textContent ?? '').trim() &&
+      Array.from(node.children).every((child) => child.nodeName === 'BR'),
+    replacement: () => '',
+  })
+
+  // A nested list starts on the line after its parent item's text, without a
+  // blank line in between.
+  service.addRule('list', {
+    filter: ['ul', 'ol'],
+    replacement: (content: string, node: HTMLElement) => {
+      if (listItemFor(node)) return '\n' + content
+      return '\n\n' + content + '\n\n'
+    },
+  })
+
+  service.addRule('taskItem', {
+    filter: (node: HTMLElement) =>
+      node.nodeName === 'LI' && node.getAttribute('data-type') === 'taskItem',
+    replacement: (content: string, node: HTMLElement) => {
+      const checked = node.getAttribute('data-checked') === 'true'
+      const body = serializeListItemBody(content, '  ')
+      return (
+        `- [${checked ? 'x' : ' '}] ` +
+        body +
+        (node.nextSibling && !/\n$/.test(body) ? '\n' : '')
+      )
+    },
+  })
+
+  service.addRule('listItem', {
+    filter: (node: HTMLElement) =>
+      node.nodeName === 'LI' && node.getAttribute('data-type') !== 'taskItem',
+    replacement: (content: string, node: HTMLElement, options: any) => {
+      const parent = node.parentElement
+      if (!parent || (parent.nodeName !== 'OL' && parent.nodeName !== 'UL')) {
+        return content
+      }
+      let prefix = options.bulletListMarker + ' '
+      if (parent.nodeName === 'OL') {
+        const start = parseInt(parent.getAttribute('start') || '1', 10)
+        const index = Array.prototype.indexOf.call(parent.children, node)
+        prefix = `${start + index}. `
+      }
+      const body = serializeListItemBody(content, ' '.repeat(prefix.length))
+      return prefix + body + (node.nextSibling && !/\n$/.test(body) ? '\n' : '')
+    },
+  })
+
+  // Math nodes serialize from textContent — the raw LaTeX — bypassing
+  // turndown's markdown escaping, which would corrupt `\`/`_`/`*` sequences.
+  service.addRule('mathInline', {
+    filter: (node: HTMLElement) =>
+      node.nodeName === 'SPAN' && node.getAttribute('data-type') === 'mathInline',
+    replacement: (_content: string, node: HTMLElement) => `$$${node.textContent}$$`,
+  })
+
+  service.addRule('mathBlock', {
+    filter: (node: HTMLElement) =>
+      node.nodeName === 'DIV' && node.getAttribute('data-type') === 'mathBlock',
+    replacement: (_content: string, node: HTMLElement) =>
+      `\n\n$$\n${node.textContent}\n$$\n\n`,
+  })
+
+  // Images keep their title — `![alt](src "title")` — which is how diagram
+  // nodes are marked (see diagram support).
+  service.addRule('image', {
+    filter: 'img',
+    replacement: (_content: string, node: HTMLElement) => {
+      const src = node.getAttribute('src') || ''
+      if (!src) return ''
+      const alt = (node.getAttribute('alt') || '')
+        .replace(/\\/g, '\\\\')
+        .replace(/([[\]!])/g, '\\$1')
+        .replace(/[\r\n]+/g, ' ')
+      const title = node.getAttribute('title') || ''
+      const titlePart = title ? ` "${title.replace(/"/g, '\\"')}"` : ''
+      return `![${alt}](${src}${titlePart})`
+    },
+  })
+
+  return service
+}
+
+export function htmlToMarkdown(html: string): string {
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+  wrapHeaderRows(doc.body)
+  return createTurndown().turndown(doc.body)
+}
diff --git a/app/lib/tiptap/math-block.ts b/app/lib/tiptap/math-block.ts
new file mode 100644
index 0000000..57c21d7
--- /dev/null
+++ b/app/lib/tiptap/math-block.ts
@@ -0,0 +1,51 @@
+// Display math node: a standalone `$$ … $$` block in lemma markdown. Like
+// MathInline, the LaTeX source is the `text` attribute and rendering is a
+// node-view concern of the editor component layer.
+
+import { Node, mergeAttributes } from '@tiptap/core'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mathBlock: {
+      insertMathBlock: (attributes?: { text: string }) => ReturnType
+    }
+  }
+}
+
+export const MathBlock = Node.create({
+  name: 'mathBlock',
+  group: 'block',
+  atom: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      text: {
+        default: '',
+        parseHTML: (element) => element.textContent ?? '',
+        renderHTML: () => ({}),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: `div[data-type="${this.name}"]` }]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes({ 'data-type': this.name, 'data-katex': 'true' }, HTMLAttributes),
+      node.attrs.text,
+    ]
+  },
+
+  addCommands() {
+    return {
+      insertMathBlock:
+        (attributes) =>
+        ({ commands }) =>
+          commands.insertContent({ type: this.name, attrs: attributes }),
+    }
+  },
+})
diff --git a/app/lib/tiptap/math-inline.ts b/app/lib/tiptap/math-inline.ts
new file mode 100644
index 0000000..a1a6e34
--- /dev/null
+++ b/app/lib/tiptap/math-inline.ts
@@ -0,0 +1,63 @@
+// Inline math node: `$$…$$` in lemma markdown. The LaTeX source lives in the
+// `text` attribute; rendering is left to a node view attached in the editor
+// component layer (the schema itself stays free of React imports).
+
+import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mathInline: {
+      insertMathInline: (attributes?: { text: string }) => ReturnType
+    }
+  }
+}
+
+export const MathInline = Node.create({
+  name: 'mathInline',
+  group: 'inline',
+  inline: true,
+  atom: true,
+
+  addAttributes() {
+    return {
+      text: {
+        default: '',
+        // textContent (not innerHTML) so entities like &lt; decode back to
+        // raw LaTeX
+        parseHTML: (element) => element.textContent ?? '',
+        renderHTML: () => ({}),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: `span[data-type="${this.name}"]` }]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      'span',
+      mergeAttributes({ 'data-type': this.name, 'data-katex': 'true' }, HTMLAttributes),
+      node.attrs.text,
+    ]
+  },
+
+  addCommands() {
+    return {
+      insertMathInline:
+        (attributes) =>
+        ({ commands }) =>
+          commands.insertContent({ type: this.name, attrs: attributes }),
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /(?:^|\s)(\$\$([^$\n]+)\$\$)$/,
+        type: this.type,
+        getAttributes: (match) => ({ text: match[2].trim() }),
+      }),
+    ]
+  },
+})
diff --git a/app/routes/edit.tsx b/app/routes/edit.tsx
index 72aac9b..8232d41 100644
--- a/app/routes/edit.tsx
+++ b/app/routes/edit.tsx
@@ -17,7 +17,7 @@ import {
 } from '~/lib/api-client'
 import { compressImage } from '~/lib/compress-image'
 import { resolveDid } from '~/lib/atproto'
-import CodeMirrorMarkdownEditor from '~/components/CodeMirrorMarkdownEditor'
+import ArticleEditor, { type ArticleEditorApi } from '~/components/editor/ArticleEditor'
 import CoverImagePicker from '~/components/CoverImagePicker'
 import CenteredMessage from '~/components/CenteredMessage'
 import Spinner from '~/components/Spinner'
@@ -49,6 +49,7 @@ function EditScreen({ session }: { session: NonNullable<ReturnType<typeof useAut
   const [post, setPost] = useState<PostDetail | null | 'not-owner'>(null)
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
+  const editorApiRef = useRef<ArticleEditorApi | null>(null)
   const [visibility, setVisibility] = useState<'published' | 'draft'>('published')
   const [pending, setPending] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -138,7 +139,10 @@ function EditScreen({ session }: { session: NonNullable<ReturnType<typeof useAut
     setError(null)
     setSaved(false)
     try {
-      const { content: finalContent, imageBlobs } = await uploadContentImages(session, content)
+      // The visual editor serializes on a debounce; ask the editor for the
+      // authoritative markdown instead of trusting possibly-stale state.
+      const markdown = editorApiRef.current?.getMarkdown() ?? content
+      const { content: finalContent, imageBlobs } = await uploadContentImages(session, markdown)
       const bskyPostOptions = visibility === 'published' && post.resolvedUrl
         ? { text: bskyPostText.trim(), pubUrl: post.resolvedUrl }
         : undefined
@@ -291,12 +295,7 @@ function EditScreen({ session }: { session: NonNullable<ReturnType<typeof useAut
             </div>
           )}
 
-          <CodeMirrorMarkdownEditor
-            initialValue={content}
-            onChange={setContent}
-            displayMode="split"
-            showToolbar={true}
-          />
+          <ArticleEditor initialValue={content} onChange={setContent} apiRef={editorApiRef} />
         </form>
       </div>
     </div>
diff --git a/app/routes/help.tsx b/app/routes/help.tsx
index 873a384..528b4ab 100644
--- a/app/routes/help.tsx
+++ b/app/routes/help.tsx
@@ -1,351 +1,12 @@
 import CodeMirrorMarkdownEditor from '~/components/CodeMirrorMarkdownEditor'
 import PageLayout from '~/components/PageLayout'
 import { SITE_NAME } from '~/lib/site-config'
+import { HELP_CONTENT } from '~/lib/help-content'
 
 export function meta() {
   return [{ title: `Help — ${SITE_NAME}` }]
 }
 
-const HELP_CONTENT = `
-Our editor uses Markdown plus extensions designed for writers in specialized fields.
-Don't worry, the **toolbar buttons** will help you with the syntax.
-For a deeper dive please see the documentation sites for
-[GitHub Flavored Markdown](https://github.github.com/gfm/),
-[KaTeX](https://katex.org/docs/support_table.html) math notation,
-[Mermaid](https://mermaid.js.org/intro/) diagrams,
-[ABC](https://paulrosen.github.io/abcjs/overview/abc-notation.html) music notation, and
-[Fountain](https://fountain.io/syntax/) screenplays.
-
-You can upload images to use anywhere on your article. 
-They will be saved to your personal data server (PDS) and served through Bluesky's content delivery network (CDN) for super fast access, just like the photos in your Bluesky posts.
-
-<br/><br/>
-
-## Mentions, hashtags, and cashtags
-
-Just type things like #wildlife or @atproto.com for Bluesky hashtags and profiles.  
-You can also view detailed financial information for stocks and index symbols like $AAPL or $^GSPC . It won't affect price text like $10 so no worries.
-
-<br/>
-
-## Code
-
-Inline as \`myVariable\` or in a code block with syntax highlighting and a language badge:
-
-\`\`\`javascript
-function hello() {
-  console.log("Hello, world!");
-}
-\`\`\`
-
-<br/><br/>
-
-## Math
-
-Use LaTeX syntax for math. Expressions within text like $$ log_2(64) = 6 $$ stay inline.
-
-Expressions surrounded by blank lines are rendered in display mode:
-
-$$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$$
-
-- Surround text with \`$$\` for math expressions 
-e.g. \`$$ x^2 $$\` becomes $$x^2$$.
-- Start with \`\\$\` when you want 2 or more $ signs in a row as literals.  
-For example, use \`\\$$$\` to display a price as $$$.
-
-<br/><br/>
-
-## Function Plots
-
-Visualize 2-D mathematical functions in an interactive graph using ECMAScript syntax:
-
-\`\`\`functionplot
-x^2
-sin(x)
-log2(x)
-\`\`\`
-
-<br/><br/>
-
-You can also use **frontmatter** (a common format for specifying metadata in Markdown documents) to show or hide the grid and specify the **size**, **domain**, and **range** for the plot.
-
-\`\`\`functionplot
----
-xMin: 0
-xMax: 10
-yMin: 0
-yMax: 10
-width: 500
-height: 250
-grid: true
----
-1
-log2(x)
-x
-x*log2(x)
-x^2
-\`\`\`
-
-<br/><br/>
-
-## Musical Notation
-
-ABC notation for musical scores:
-
-\`\`\`abc
-X:1
-K:D
-DD AA|BBA2|
-\`\`\`
-
-<br/><br/>
-
-## Embed web content
-
-You can also embed web content like music, video, social media posts, or even a whole coding sandbox thanks to [Iframely](https://iframely.com/domains). 
-Just select the **Embed** button on the toolbar while writing your post. 
-
-### Social Media
-
-\`\`\`embed
-https://bsky.app/profile/bsky.app/post/3l6oveex3ii2l
-\`\`\`
-
-<br/><br/>
-
-### Music & Podcasts
-
-\`\`\`embed
-https://open.spotify.com/track/7dLU4J2XZ9cRB9SJqORo9d?si=2267fa99c8ae46b2
-\`\`\`
-
-<br/>
-
-\`\`\`embed
-https://open.spotify.com/episode/0SoZg3LjLsMvhoTLcEI64g?si=q5UnilO0SIiot4apmPmBlA
-\`\`\`
-
-### GIFs
-
-\`\`\`embed
-https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmEyc2JkNDY2cGRwY3hjN2g4ZXh6cWhlYjJhd204dTNrdWxsNXBodSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5VKbvrjxpVJCM/giphy.gif
-\`\`\`
-
-### Photo and video
-
-\`\`\`embed
-https://picsum.photos/500
-\`\`\`
-
-<br/>
-
-\`\`\`embed
-https://www.youtube.com/watch?v=iX6w1P60m8M
-\`\`\`
-
-<br/><br/>
-
-## Technical Diagrams
-
-Use [Mermaid](https://mermaid.js.org/intro/) syntax to write all kinds of diagrams. A few examples:  
-
-### Flowchart
-
-\`\`\`mermaid
-flowchart TD
-    A[Start] --> B{Is it working?}
-    B -->|Yes| C[Great!]
-    B -->|No| D[Debug]
-    D --> B
-    C --> E[End]
-\`\`\`
-
-<br/><br/>
-
-### Architecture diagram
-
-\`\`\`mermaid
-architecture-beta
-group api(cloud)[Infrastructure]
-
-service db(database)[Database] in api
-service disk1(disk)[Storage] in api
-service server(server)[Server] in api
-
-server:R -- L:db
-server:B -- T:disk1
-\`\`\`
-
-<br/><br/>
-
-Architecture diagrams support [logos](https://icon-sets.iconify.design/logos/)!
-\`\`\`mermaid
-architecture-beta
-group api(logos:aws-cloudformation)[Infrastructure]
-
-service db(logos:aws-aurora)[Database] in api
-service disk1(logos:aws-s3)[Storage] in api
-service server(logos:aws-ec2)[Server] in api
-
-server:R -- L:db
-server:B -- T:disk1
-\`\`\`
-
-<br/><br/>
-
-### Git diagram
-
-\`\`\`mermaid
----
-title: Example Git diagram
----
-
-gitGraph:
-    commit
-    branch feature1
-    commit id:"my changes"
-    checkout main
-    commit
-    merge feature1
-    commit
-    commit tag:"v1.0.0" type: HIGHLIGHT 
-    branch feature2
-    commit
-\`\`\`
-
-<br/><br/>
-
-### Sankey diagram
-
-\`\`\`mermaid
-sankey
-%% source,target,value
-Revenue, Online store, 104.453
-Revenue, Physical stores, 113.726
-Revenue, Subscription services, 27.14
-\`\`\`
-
-<br/><br/>
-
-### Sequence diagram
-
-\`\`\`mermaid
----
-title: Conversation
----
-sequenceDiagram
-Alice->>John: Hello John, how are you?
-loop Healthcheck
-    John->>John: Fight against hypochondria
-end
-Note right of John: Rational thoughts!
-John-->>Alice: Great!
-John->>Bob: How about you?
-Bob-->>John: Jolly good!
-\`\`\`
-
-<br/><br/>
-
-Flowcharts and sequence diagrams support math!
-\`\`\`mermaid
-sequenceDiagram
-    autonumber
-    participant 1 as $$\\alpha$$
-    participant 2 as $$\\beta$$
-    1->>2: Solve: $$\\sqrt{2+2}$$
-    2-->>1: Answer: $$2$$
-    Note right of 2: $$\\sqrt{2+2}=\\sqrt{4}=2$$
-
-\`\`\`
-
-<br/><br/>
-
-### Kanban board
-
-\`\`\`mermaid
----
-config:
-  kanban:
-    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
----
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create blog about the new diagram]
-  [In progress]
-    id6[Create renderer so that it works in all cases.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[Last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[Define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
-\`\`\`
-
-<br/><br/>
-
-### Quadrant chart
-
-\`\`\`mermaid
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-\`\`\`
-
-<br/><br/>
-
-## Fountain Screenplays
-
-Write screenplays in Fountain format (experimental):
-
-\`\`\`fountain
-Title: Your Screenplay
-Credit: written by
-Author: Your Name
-Source: based on the novel by Someone
-Notes:
-  FINAL PRODUCTION DRAFT
-Copyright: (c) 2025 Awesome Pictures
-
-This is a personal story.
-
-====
-
-INT. COFFEE SHOP - DAY
-
-JOHN sits at a table, typing on his laptop.
-
-JOHN 
-(excited)
-This is how you write a screenplay! I really like this place. Good drinks, friendly staff.
-
-SARAH approaches.
-
-SARAH
-What are you working on?
-
-CUT TO BLACK.
-
-> _**THE END**_ <
-\`\`\`
-`
 
 export default function Help() {
   return (
diff --git a/app/routes/publish.tsx b/app/routes/publish.tsx
index bb34887..2809def 100644
--- a/app/routes/publish.tsx
+++ b/app/routes/publish.tsx
@@ -5,7 +5,7 @@ import { useData, usePublications } from '~/lib/data-context'
 import { createPost, uploadBlob, uploadContentImages, type AtpBlob, type Publication, CC_LICENSES } from '~/lib/api-client'
 import { compressImage } from '~/lib/compress-image'
 import type { Route } from './+types/publish'
-import CodeMirrorMarkdownEditor from '~/components/CodeMirrorMarkdownEditor';
+import ArticleEditor, { type ArticleEditorApi } from '~/components/editor/ArticleEditor'
 import CoverImagePicker from '~/components/CoverImagePicker'
 import { ArrowLongLeftIcon, ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
 import CenteredMessage from '~/components/CenteredMessage'
@@ -50,6 +50,7 @@ function PublishScreen({ session }: { session: NonNullable<ReturnType<typeof use
   const [draftSaved, setDraftSaved] = useState(false)
   const [postRkey, setPostRkey] = useState<string | null>(null)
   const [markdownValue, setMarkdownValue] = useState(''); // props.initialValue || ''
+  const editorApiRef = useRef<ArticleEditorApi | null>(null)
   const [coverImageBlob, setCoverImageBlob] = useState<AtpBlob | null>(null)
   const [coverImagePreviewUrl, setCoverImagePreviewUrl] = useState<string | null>(null)
   const [coverImageUploading, setCoverImageUploading] = useState(false)
@@ -105,7 +106,10 @@ function PublishScreen({ session }: { session: NonNullable<ReturnType<typeof use
     setError(null)
     setDraftSaved(false)
     try {
-      const { content: finalContent, imageBlobs } = await uploadContentImages(session, markdownValue)
+      // The visual editor serializes on a debounce; ask the editor for the
+      // authoritative markdown instead of trusting possibly-stale state.
+      const markdown = editorApiRef.current?.getMarkdown() ?? markdownValue
+      const { content: finalContent, imageBlobs } = await uploadContentImages(session, markdown)
       const post = await createPost(
         session,
         publication.atUri,
@@ -270,12 +274,7 @@ function PublishScreen({ session }: { session: NonNullable<ReturnType<typeof use
             </div>
           )}
 
-          <CodeMirrorMarkdownEditor
-            initialValue={''}
-            onChange={handleContentChange}
-            displayMode="split"
-            showToolbar={true}
-          />
+          <ArticleEditor initialValue={''} onChange={handleContentChange} apiRef={editorApiRef} />
         </form>
       </div>
     </div>
diff --git a/docs/architecture.md b/docs/architecture.md
index 8ee35be..364c100 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -301,12 +301,25 @@ Dependencies:
 - **Tailwind CSS v4** for styling
 - **vite-plugin-pwa** for service worker / offline support (standalone display mode)
 - **CodeMirror** for the markdown editor
+- **Tiptap** (ProseMirror) for the optional visual editor
 - **Shiki** for syntax highlighting in post previews
 
+## Article editors
+
+The write/edit screens mount `app/components/editor/ArticleEditor.tsx`, a toggle between two editors that speak the same language — the raw GFM markdown lemma stores:
+
+- **Markdown** (default): the CodeMirror source editor (`app/components/CodeMirrorMarkdownEditor.tsx`).
+- **Visual**: a Tiptap WYSIWYG (`app/components/editor/TiptapArticleEditor.tsx`), lazy-loaded so markdown-only users never download it.
+
+The stored PDS record and DynamoDB item are identical regardless of editor. The visual editor's only crossing points to markdown are in `app/lib/tiptap/markdown/serializer.ts`: markdown → HTML via a configured `marked` instance (`marked-config.ts`) parsed into ProseMirror, and ProseMirror → markdown via `@joplin/turndown` + GFM plugin (`turndown-config.ts`). `app/lib/tiptap/markdown/serializer.test.ts` pins round-trip fidelity for every supported construct; style normalizations (bullet markers, table cell padding, `$$` placement) are asserted there. The visual editor's schema (`app/lib/tiptap/extensions.ts`) is deliberately limited to what round-trips through markdown; `lossy-detect.ts` warns before opening articles containing raw HTML or footnotes in the visual editor.
+
+The editor choice persists in `localStorage['lemma:editor-mode']`. `onChange` from the visual editor is debounced; submit paths read the authoritative markdown through an `apiRef.getMarkdown()` handle instead.
+
+Excalidraw and Draw.io diagrams are ordinary markdown images whose exported PNG embeds its own source (Excalidraw scene JSON / Draw.io XML). The image title carries an editor marker (`![…](url "lemma:excalidraw")`) that `markdownProcessor.ts` strips at render time. Uploads flow through the existing `uploadContentImages` path (which preserves image titles across the CDN rewrite); re-editing a published diagram fetches the original bytes from the author's PDS via `com.atproto.sync.getBlob` because the CDN re-encodes to JPEG and would strip the embedded source (`app/components/editor/diagrams/diagram-source.ts`). Diagram exports bypass `compressImage` for the same reason. The Draw.io editor is an iframe from `embed.diagrams.net`; Excalidraw runs fully in-bundle.
 
 ## PWA / bundle size
 
-The publish page bundles CodeMirror and Shiki (syntax highlighting grammars for many languages), producing chunks well over Workbox's default 2 MiB precache limit. `vite.config.ts` raises `workbox.maximumFileSizeToCacheInBytes` to 10 MiB to allow the service worker to precache these assets.
+The publish page bundles CodeMirror and Shiki (syntax highlighting grammars for many languages), and the visual editor adds Tiptap, the markdown serializer, and Excalidraw as separate lazy chunks — producing chunks well over Workbox's default 2 MiB precache limit. `vite.config.ts` raises `workbox.maximumFileSizeToCacheInBytes` to 10 MiB to allow the service worker to precache these assets.
 
 If additional large dependencies are added and the build fails with a Workbox precache error, increase that limit or exclude the offending chunks with `workbox.globIgnores`.
 
diff --git a/package.json b/package.json
index 87dfd64..8f491c9 100644
--- a/package.json
+++ b/package.json
@@ -18,25 +18,44 @@
     "@codemirror/lint": "^6.9.6",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.42.1",
+    "@excalidraw/excalidraw": "0.18.0",
     "@heroicons/react": "^2.2.0",
     "@iconify-json/logos": "^1.2.11",
+    "@joplin/turndown": "4.0.82",
+    "@joplin/turndown-plugin-gfm": "1.0.64",
     "@react-router/node": "7.15.0",
     "@react-router/serve": "7.15.0",
+    "@tiptap/core": "3.28.0",
+    "@tiptap/extension-code": "3.28.0",
+    "@tiptap/extension-code-block": "3.28.0",
+    "@tiptap/extension-code-block-lowlight": "3.28.0",
+    "@tiptap/extension-image": "3.28.0",
+    "@tiptap/extension-list": "3.28.0",
+    "@tiptap/extension-table": "3.28.0",
+    "@tiptap/extensions": "3.28.0",
+    "@tiptap/pm": "3.28.0",
+    "@tiptap/react": "3.28.0",
+    "@tiptap/starter-kit": "3.28.0",
     "abcjs": "^6.6.3",
     "codemirror": "^6.0.2",
     "dompurify": "^3.4.2",
     "fountain-js": "^1.2.4",
     "function-plot": "^1.25.4",
     "hast-util-sanitize": "^5.0.2",
+    "highlight.js": "11.11.1",
     "human-format": "^1.2.1",
     "isbot": "^5.1.36",
     "katex": "^0.16.45",
+    "linkifyjs": "4.3.2",
+    "lowlight": "^3.3.0",
+    "marked": "17.0.5",
     "mathjs": "^15.2.0",
     "mermaid": "^11.15.0",
     "minimatch": "^10.2.5",
     "pino": "^10.3.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "react-drawio": "1.0.7",
     "react-router": "7.15.0",
     "rehype-katex": "^7.0.1",
     "rehype-parse": "^9.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc8fd52..7b0a11f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,18 +35,60 @@ importers:
       '@codemirror/view':
         specifier: ^6.42.1
         version: 6.42.1
+      '@excalidraw/excalidraw':
+        specifier: 0.18.0
+        version: 0.18.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@heroicons/react':
         specifier: ^2.2.0
         version: 2.2.0(react@19.2.6)
       '@iconify-json/logos':
         specifier: ^1.2.11
         version: 1.2.11
+      '@joplin/turndown':
+        specifier: 4.0.82
+        version: 4.0.82
+      '@joplin/turndown-plugin-gfm':
+        specifier: 1.0.64
+        version: 1.0.64
       '@react-router/node':
         specifier: 7.15.0
         version: 7.15.0(react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@5.9.3)
       '@react-router/serve':
         specifier: 7.15.0
         version: 7.15.0(react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@5.9.3)
+      '@tiptap/core':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/extension-code':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-code-block':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extension-code-block-lowlight':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/extension-code-block@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(highlight.js@11.11.1)(lowlight@3.3.0)
+      '@tiptap/extension-image':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-list':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extension-table':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extensions':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/pm':
+        specifier: 3.28.0
+        version: 3.28.0
+      '@tiptap/react':
+        specifier: 3.28.0
+        version: 3.28.0(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@tiptap/starter-kit':
+        specifier: 3.28.0
+        version: 3.28.0
       abcjs:
         specifier: ^6.6.3
         version: 6.6.3
@@ -65,6 +107,9 @@ importers:
       hast-util-sanitize:
         specifier: ^5.0.2
         version: 5.0.2
+      highlight.js:
+        specifier: 11.11.1
+        version: 11.11.1
       human-format:
         specifier: ^1.2.1
         version: 1.2.1
@@ -74,6 +119,15 @@ importers:
       katex:
         specifier: ^0.16.45
         version: 0.16.45
+      linkifyjs:
+        specifier: 4.3.2
+        version: 4.3.2
+      lowlight:
+        specifier: ^3.3.0
+        version: 3.3.0
+      marked:
+        specifier: 17.0.5
+        version: 17.0.5
       mathjs:
         specifier: ^15.2.0
         version: 15.2.0
@@ -92,6 +146,9 @@ importers:
       react-dom:
         specifier: ^19.2.6
         version: 19.2.6(react@19.2.6)
+      react-drawio:
+        specifier: 1.0.7
+        version: 1.0.7(react@19.2.6)
       react-router:
         specifier: 7.15.0
         version: 7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -207,6 +264,9 @@ importers:
 
 packages:
 
+  '@adobe/css-tools@4.4.3':
+    resolution: {integrity: sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==}
+
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
@@ -219,6 +279,9 @@ packages:
     peerDependencies:
       ajv: '>=8'
 
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
   '@asamuzakjp/css-color@5.1.11':
     resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -1080,6 +1143,9 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
+  '@braintree/sanitize-url@6.0.2':
+    resolution: {integrity: sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==}
+
   '@braintree/sanitize-url@7.1.2':
     resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
 
@@ -1123,10 +1189,21 @@ packages:
   '@codemirror/view@6.42.1':
     resolution: {integrity: sha512-ToN3oFc0nsxNUYVF5P0ztLgbC4UPPjPtA9aKYhkOKQaZASpOUo6ISXyQLP66ctVwlDc+j6Jv0uK5IFALkiXztg==}
 
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
   '@csstools/color-helpers@6.0.2':
     resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
     engines: {node: '>=20.19.0'}
 
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
   '@csstools/css-calc@3.2.0':
     resolution: {integrity: sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==}
     engines: {node: '>=20.19.0'}
@@ -1134,6 +1211,13 @@ packages:
       '@csstools/css-parser-algorithms': ^4.0.0
       '@csstools/css-tokenizer': ^4.0.0
 
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
   '@csstools/css-color-parser@4.1.0':
     resolution: {integrity: sha512-U0KhLYmy2GVj6q4T3WaAe6NPuFYCPQoE3b0dRGxejWDgcPp8TP7S5rVdM5ZrFaqu4N67X8YaPBw14dQSYx3IyQ==}
     engines: {node: '>=20.19.0'}
@@ -1141,6 +1225,12 @@ packages:
       '@csstools/css-parser-algorithms': ^4.0.0
       '@csstools/css-tokenizer': ^4.0.0
 
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
   '@csstools/css-parser-algorithms@4.0.0':
     resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
     engines: {node: '>=20.19.0'}
@@ -1155,6 +1245,10 @@ packages:
       css-tree:
         optional: true
 
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
   '@csstools/css-tokenizer@4.0.0':
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
@@ -1324,6 +1418,25 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@excalidraw/excalidraw@0.18.0':
+    resolution: {integrity: sha512-QkIiS+5qdy8lmDWTKsuy0sK/fen/LRDtbhm2lc2xcFcqhv2/zdg95bYnl+wnwwXGHo7kEmP65BSiMHE7PJ3Zpw==}
+    peerDependencies:
+      react: ^17.0.2 || ^18.2.0 || ^19.0.0
+      react-dom: ^17.0.2 || ^18.2.0 || ^19.0.0
+
+  '@excalidraw/laser-pointer@1.3.1':
+    resolution: {integrity: sha512-psA1z1N2qeAfsORdXc9JmD2y4CmDwmuMRxnNdJHZexIcPwaNEyIpNcelw+QkL9rz9tosaN9krXuKaRqYpRAR6g==}
+
+  '@excalidraw/markdown-to-text@0.1.2':
+    resolution: {integrity: sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==}
+
+  '@excalidraw/mermaid-to-excalidraw@1.1.2':
+    resolution: {integrity: sha512-hAFv/TTIsOdoy0dL5v+oBd297SQ+Z88gZ5u99fCIFuEMHfQuPgLhU/ztKhFSTs7fISwVo6fizny/5oQRR3d4tQ==}
+
+  '@excalidraw/random-username@1.1.0':
+    resolution: {integrity: sha512-nULYsQxkWHnbmHvcs+efMkJ4/9TtvNyFeLyHdeGxW0zHs6P+jYVqcRff9A6Vq9w9JXeDRnRh2VKvTtS19GW2qA==}
+    engines: {node: '>=10'}
+
   '@exodus/bytes@1.15.0':
     resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -1333,6 +1446,21 @@ packages:
       '@noble/hashes':
         optional: true
 
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
   '@heroicons/react@2.2.0':
     resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
     peerDependencies:
@@ -1351,6 +1479,12 @@ packages:
     resolution: {integrity: sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==}
     engines: {node: '>=18'}
 
+  '@joplin/turndown-plugin-gfm@1.0.64':
+    resolution: {integrity: sha512-8GJ7f9OenE3zkSVII5B6qzIkvgF7C/a20gaASEjM6jWPLPJFFQ2nQ3Ou/kXH1mPUTs9dC9VYs8QXVPvZabKXBQ==}
+
+  '@joplin/turndown@4.0.82':
+    resolution: {integrity: sha512-6TYWScwHIPEhBznTS2+TBK1SfGvbXAPELRMPnhAemZ8+AtIr/Ygv9XHAd7euIFhYrNXfRLXcicsjN7zBymBDcQ==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -1419,6 +1553,288 @@ packages:
   '@pinojs/redact@0.4.0':
     resolution: {integrity: sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==}
 
+  '@radix-ui/primitive@1.0.0':
+    resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}
+
+  '@radix-ui/primitive@1.1.1':
+    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+
+  '@radix-ui/react-arrow@1.1.2':
+    resolution: {integrity: sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.0.1':
+    resolution: {integrity: sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-compose-refs@1.0.0':
+    resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-compose-refs@1.1.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.0.0':
+    resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.0.0':
+    resolution: {integrity: sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-dismissable-layer@1.1.5':
+    resolution: {integrity: sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.2':
+    resolution: {integrity: sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.0.0':
+    resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.6':
+    resolution: {integrity: sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.2':
+    resolution: {integrity: sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.4':
+    resolution: {integrity: sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.0.0':
+    resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-presence@1.1.2':
+    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@1.0.1':
+    resolution: {integrity: sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-primitive@2.0.2':
+    resolution: {integrity: sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.0.2':
+    resolution: {integrity: sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-slot@1.0.1':
+    resolution: {integrity: sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-slot@1.1.2':
+    resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-tabs@1.0.2':
+    resolution: {integrity: sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-use-callback-ref@1.0.0':
+    resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.0.0':
+    resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-use-controllable-state@1.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.0.0':
+    resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
   '@react-router/dev@7.15.0':
     resolution: {integrity: sha512-ZwUQu4KNZrViFqdeFWqh00Bk/QbLNvoWRDfjsqOp3oyuG3jSRLYnqRD3VAMK/FYMpL+s37ByT7XqqLXaF7Nw1g==}
     engines: {node: '>=20.0.0'}
@@ -2223,6 +2639,176 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@tiptap/core@3.28.0':
+    resolution: {integrity: sha512-gUuD5WAYfbDxNSSJya/emh2KSzXZXLUYKW4fEnc1AQ5FE2twzh4LJ9UlKFIawigrUCAksWI5Fy1hRbv+5m4ZdQ==}
+    peerDependencies:
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-blockquote@3.29.2':
+    resolution: {integrity: sha512-ca4OzKDh0yaxg2+Z56bC2QnWsNsFp2YMRfVig1PDXyMVFMNJpLcnhxgq/9btn+xYAlYrj8RymOeCTYREOR6Zjg==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-bold@3.29.2':
+    resolution: {integrity: sha512-elYbGxJsYnBb4leqrcjdIJuiG380BcOgN+UUzvOv+qEjfGVzHodFOMBl3qnmD6urYHNu5/qQK2S0qSSRXKCLNQ==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-bubble-menu@3.29.2':
+    resolution: {integrity: sha512-kzcWarcpr031rZu+R3Hzut5uxb3Qj/xxMDEYZIQ3uiq1yb5vEMXj8/SIyWautk6Nu8Rr1leV3rGdR4NzhzyFAA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-bullet-list@3.29.2':
+    resolution: {integrity: sha512-3bWcCUPbCHv0XttlMdnAtXLNYWx2pblByMgxmGsaP9FU0QnslGXty6A6gHCqI33ygRg1vrA6U5Wtpwbi5aKu5g==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.29.2
+
+  '@tiptap/extension-code-block-lowlight@3.28.0':
+    resolution: {integrity: sha512-QJW8bJrYvf5BuLxgjGGa+Woncb23ud3egdExCUo+ChmvDp9AL7YKu7B7UU1DsohKPF4SJnzEb1fVsm3s2lhHlw==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/extension-code-block': 3.28.0
+      '@tiptap/pm': 3.28.0
+      highlight.js: ^11
+      lowlight: ^2 || ^3
+
+  '@tiptap/extension-code-block@3.28.0':
+    resolution: {integrity: sha512-bHITDzT0umTLh+SiEVQzIXkCMt/TzbPM1+HQy9ZxgQDHAJj/vdmfNAnP3RCOrz4lETXyhNQ2b6kxeu3lWckxyA==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-code@3.28.0':
+    resolution: {integrity: sha512-AUw2Acof3CQE6Q6Y22saK4lyg0nkeJ4XXniU65TdAi/9TE66TGiO4NQJJNNPgu8+VMEwl5j8VsIFK8sfTcNYtg==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+
+  '@tiptap/extension-document@3.29.2':
+    resolution: {integrity: sha512-YUamvefLnsqu6124GavVTI7nqcFlQJ12ROB0oSwG69eSBZYNjg1tIs05LFrBxkwf4Xgqd6YzfJ9+FeG428RvzQ==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-dropcursor@3.29.2':
+    resolution: {integrity: sha512-KKno7cU9r1HdR48CRrsDu69/1UjZdoslq/UcE+Kx+tdhAv/aljXMkRSNzGMrBNOBDmHRgS1+58zm21WQWdQzwA==}
+    peerDependencies:
+      '@tiptap/extensions': 3.29.2
+
+  '@tiptap/extension-floating-menu@3.29.2':
+    resolution: {integrity: sha512-CBTq4Xs5aGWr65uFCIkKBms796OhmirWf/ax//iJ4fl9IfwqjwFuc2vQs9PmuwpKn9ctDHo2sMTtvyeCvIt5LQ==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-gapcursor@3.29.2':
+    resolution: {integrity: sha512-8Q39UR4/Tit759IeW9xZIe3NMwN11GsuA3FLheDyyGn7RrW02HD3HhUDlazE54Ki4HoosjFmChPlN4Ik2ubdRQ==}
+    peerDependencies:
+      '@tiptap/extensions': 3.29.2
+
+  '@tiptap/extension-hard-break@3.29.2':
+    resolution: {integrity: sha512-eUW3LN3fq8rXnjEUeI3D2QONYdLsU3yYQm4jxlErs2h4cfwrFjgf19VSUFVmm6LrFbbQ0OnDVPeVLL6iOwDw2w==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-heading@3.29.2':
+    resolution: {integrity: sha512-6W4aIy70Mh7BNlbG9zZ5FBLhJhU2UUEzgZJ/jwYSCcB30o8McLxJSEjhtoHiX8R78Ah2/JzBGvIe5olZlbeE4A==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-horizontal-rule@3.29.2':
+    resolution: {integrity: sha512-8/ZPzbB9X85Mc9/7xVLZupQKBr2UVcQTGr512xtqMW+XkCQRHCph46tRo828YE13IMWI5fWn/FaNCqXG9cULSw==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-image@3.28.0':
+    resolution: {integrity: sha512-aKGCdEjyujUcQ6tEtq4EPbKxEC16QsKapv3DeZs1c/UHFiEUalbbPHBnxjGnupiLz75IR+07GYqBoZ81kSCxiA==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+
+  '@tiptap/extension-italic@3.29.2':
+    resolution: {integrity: sha512-iH63V/5wsaMnY4Jz0+meaAGhaec4AiOzOduzl6ZZr5IyGhZ1kthyW84ELt0dyLI3hNceAUhaNWc+I7+vX0aoXA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-link@3.29.2':
+    resolution: {integrity: sha512-DcVer5SqrexKCEP6Ip1UPxJUMvcRCCItSv0wxoGytanrimBh2smvcg6X0DWnjlsi5H0updhyl+atYCmmQXUIXA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-list-item@3.29.2':
+    resolution: {integrity: sha512-s8vBVHHFT0Qpu7CzAZ7S1kYmSiVaDvUNvMNcZUWnxj6VPfiwmx0eXd9FsjePrRCMoM5tFmPnhFTHDxY3D/eZeQ==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.29.2
+
+  '@tiptap/extension-list-keymap@3.29.2':
+    resolution: {integrity: sha512-R+3k8OLnxdCH7Xy9ieOwUt5m2Je74u8mikothGmsYVO2Zyq48fIbmZ+X6RBPCu7DBOI2FIUhHEFbKQeDWvDNmA==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.29.2
+
+  '@tiptap/extension-list@3.28.0':
+    resolution: {integrity: sha512-zQ66i5DuhVOndmZ0d7H475Y5Yb+BMx+zfCjFkCzEc6WVef5MumtxBVTkGLQ0ibxUaD71s4QQZbjHWagpaTg0eQ==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-ordered-list@3.29.2':
+    resolution: {integrity: sha512-ndCunC+UsYOpkOtL7vGnDz21UNa45WUlcO9wMT1fbuYow2QnRhsuMlCWENXI52YPPARWuQ0RDgN7q6TaxPERBg==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.29.2
+
+  '@tiptap/extension-paragraph@3.29.2':
+    resolution: {integrity: sha512-7qJj5YTr11vvjNgjDN1ypOfwTovc0QOCYcit/rskeuVgnmQZOZQzC/BbyKLLG7UGnpRLemU/mEGbW9pAqjAXkQ==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-strike@3.29.2':
+    resolution: {integrity: sha512-aEvLAbddUQZ+FukCreV3q4G2HfNI+odE7E9U+wbq6XsSWKyo8/pDu1muz+TFKNre4blSMOQ3JQmw5UeHDKy+fg==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-table@3.28.0':
+    resolution: {integrity: sha512-SX2Uwn/bFyrqjbBo2Hg9wfLT/ofByHm4f80BuG0h5/m89Ve78CgtaK2lGz9jHZRM7rKTG6eqel+PUZQUwcSzOg==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-text@3.29.2':
+    resolution: {integrity: sha512-Ubko45JWWHe8glBt2PiGNF8hcbys/JNalFhiR7Y1X4iOOtAxAKJJxh3+eq+//NTlGuBPdWGp7zw8EEUp7anjKA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-underline@3.29.2':
+    resolution: {integrity: sha512-K7XwH/xS/5AIREWQ00VTEf/W5U0olp7j6wwit7cdd/8nHv6h6AGr1+iEApHKoLXWQZLfGQKzJlT9W61LAl+fHA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extensions@3.28.0':
+    resolution: {integrity: sha512-DJT1khCK+O/pT1gQlAnoKAx6zwDkgv7GtnhSfkqm1/4KHC3x+SSJnBIgBl9oGHymA+DxWbW1EULU4V3d/kT2uQ==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/pm@3.28.0':
+    resolution: {integrity: sha512-ALcpwZMUdat9gjJKlpscpoqXStoLhU246LPEVBDvJdIsoUKvUu3MrzfXik2Y8mtSGfhjtm9O2TRkWxQiFVMwsQ==}
+
+  '@tiptap/react@3.28.0':
+    resolution: {integrity: sha512-BxzSAqaDEldQ97K/v6+GizU1/Dxx9VWkRh7PLQql6bXlAMiz6T1G3dGt25vvv1hQ1FoMt5ExWY5NkrPmR8G8ew==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tiptap/starter-kit@3.28.0':
+    resolution: {integrity: sha512-pqvFpValV+ONtlu3l4s73ROm/tEjoGMmt6uHmSJaLbqTcMHkdWuR3flJ/5brr4IDHe1foxmNicMbRxlje7yBYw==}
+
   '@trickfilm400/rollup-plugin-off-main-thread@3.0.0-pre1':
     resolution: {integrity: sha512-/67zpWDBLV+oYAEL682s1ktXL0HgqX76f6gaVGkGnVZlBbm1zd0v4Bz8MFF2GGhoX9rvfq3KSQHubFHwa6w6/Q==}
     engines: {node: '>=12'}
@@ -2354,6 +2940,9 @@ packages:
   '@types/katex@0.16.8':
     resolution: {integrity: sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==}
 
+  '@types/mdast@3.0.15':
+    resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -2377,9 +2966,15 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
   '@ungap/structured-clone@1.3.1':
     resolution: {integrity: sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==}
 
@@ -2440,6 +3035,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
   ajv@8.20.0:
     resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
 
@@ -2451,9 +3050,17 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -2541,6 +3148,10 @@ packages:
   bidi-js@1.0.3:
     resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
 
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
   body-parser@1.20.5:
     resolution: {integrity: sha512-3grm+/2tUOvu2cjJkvsIxrv/wVpfXQW4PsQHYm7yk4vfpu7Ekl6nEsYBoJUL6qDwZUx8wUhQ8tR2qz+ad9c9OA==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -2558,6 +3169,13 @@ packages:
     resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
     engines: {node: 18 || 20 || >=22}
 
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browser-fs-access@0.29.1:
+    resolution: {integrity: sha512-LSvVX5e21LRrXqVMhqtAwj5xPgDb+fXAIH80NsnCQ9xuZPs2xWsOREi24RKgZa1XOiQRbcmVrv87+ulOKsgjxw==}
+
   browserslist@4.28.2:
     resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -2592,6 +3210,9 @@ packages:
   caniuse-lite@1.0.30001792:
     resolution: {integrity: sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==}
 
+  canvas-roundrect-polyfill@0.0.1:
+    resolution: {integrity: sha512-yWq+R3U3jE+coOeEb3a3GgE2j/0MMiDKM/QpLb6h9ihf5fGY9UXtvK9o4vNqjWXoZz7/3EaSVU3IX53TvFFUOw==}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -2608,10 +3229,18 @@ packages:
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  clsx@1.1.1:
+    resolution: {integrity: sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==}
+    engines: {node: '>=6'}
+
   codemirror@6.0.2:
     resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
 
@@ -2681,9 +3310,18 @@ packages:
   cose-base@2.2.0:
     resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
 
+  crc-32@0.3.0:
+    resolution: {integrity: sha512-kucVIjOmMc1f0tv53BJ/5WIX+MGLcKuoBhnGqQrgKJNqLByb/sVMWfW/Aw6hw0jgcqjJ2pi9E5y32zOIpaUlsA==}
+    engines: {node: '>=0.8'}
+
   crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
 
+  cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -2702,6 +3340,10 @@ packages:
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -2858,9 +3500,16 @@ packages:
     resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
     engines: {node: '>=12'}
 
+  dagre-d3-es@7.0.10:
+    resolution: {integrity: sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==}
+
   dagre-d3-es@7.0.14:
     resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
 
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
   data-urls@7.0.0:
     resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -2942,9 +3591,16 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
+  diff@5.2.2:
+    resolution: {integrity: sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A==}
+    engines: {node: '>=0.3.1'}
+
   direction@2.0.1:
     resolution: {integrity: sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==}
     hasBin: true
@@ -2955,6 +3611,9 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dompurify@3.1.6:
+    resolution: {integrity: sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==}
+
   dompurify@3.4.2:
     resolution: {integrity: sha512-lHeS9SA/IKeIFFyYciHBr2n0v1VMPlSj843HdLOwjb2OxNwdq9Xykxqhk+FE42MzAdHvInbAolSE4mhahPpjXA==}
 
@@ -2976,6 +3635,9 @@ packages:
   electron-to-chromium@1.5.353:
     resolution: {integrity: sha512-kOrWphBi8TOZyiJZqsgqIle0lw+tzmnQK83pV9dZUd01Nm2POECSyFQMAuarzZdYqQW7FH9RaYOuaRo3h+bQ3w==}
 
+  elkjs@0.9.3:
+    resolution: {integrity: sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==}
+
   encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
@@ -3025,6 +3687,10 @@ packages:
   es-toolkit@1.46.1:
     resolution: {integrity: sha512-5eNtXOs3tbfxXOj04tjjseeWkRWaoCjdEI+96DgwzZoe6c9juL49pXlzAFTI72aWC9Y8p7168g6XIKjh7k6pyQ==}
 
+  es6-promise-pool@2.5.0:
+    resolution: {integrity: sha512-VHErXfzR/6r/+yyzPKeBvO0lgjfC5cbDCQWjWwMZWSb6YU39TGIl51OUmCfWCq4ylMdJSB8zkz2vIuIeIxXApA==}
+    engines: {node: '>=0.10.0'}
+
   esbuild@0.27.7:
     resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
     engines: {node: '>=18'}
@@ -3087,6 +3753,10 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-equals@5.4.1:
+    resolution: {integrity: sha512-DjlFSM5Pk9cGcL0q5QXl66eGzx0N6szNgaswwc5ZphlBohjTVJSnGgI+rJVOgOi65qUoQnDZN4nDqi33udtydQ==}
+    engines: {node: '>=6.0.0'}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -3112,6 +3782,10 @@ packages:
   filelist@1.0.6:
     resolution: {integrity: sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==}
 
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
   finalhandler@1.3.2:
     resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
     engines: {node: '>= 0.8'}
@@ -3134,6 +3808,10 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
+  fractional-indexing@3.2.0:
+    resolution: {integrity: sha512-PcOxmqwYCW7O2ovKRU8OoQQj2yqTfEB/yeTYk4gPid6dN5ODRfU1hXd9tTVZzax/0NkO7AxpHykvZnT1aYp/BQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -3160,6 +3838,10 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  fuzzy@0.1.3:
+    resolution: {integrity: sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==}
+    engines: {node: '>= 0.6.0'}
+
   generator-function@2.0.1:
     resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
     engines: {node: '>= 0.4'}
@@ -3172,6 +3854,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-own-enumerable-property-symbols@3.0.2:
     resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
 
@@ -3187,6 +3873,10 @@ packages:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
   glob@11.1.0:
     resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
     engines: {node: 20 || >=22}
@@ -3197,6 +3887,9 @@ packages:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
 
+  glur@1.1.2:
+    resolution: {integrity: sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA==}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -3278,10 +3971,21 @@ packages:
   hastscript@9.0.1:
     resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
   html-encoding-sniffer@6.0.0:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
+  html-entities@1.4.0:
+    resolution: {integrity: sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==}
+
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
@@ -3289,6 +3993,14 @@ packages:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
 
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
   human-format@1.2.1:
     resolution: {integrity: sha512-o5Ldz62VWR5lYUZ8aVQaLKiN37NsHnmk3xjMoUjza3mGkk8MvMofgZT0T6HKSCKSJIir+AWk9Dx8KhxvZAUgCg==}
     engines: {node: '>=4'}
@@ -3304,6 +4016,12 @@ packages:
   idb@7.1.1:
     resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
 
+  image-blob-reduce@3.0.1:
+    resolution: {integrity: sha512-/VmmWgIryG/wcn4TVrV7cC4mlfUC/oyiKIfSg5eVM3Ten/c1c34RJhMYKCWTnoSMHSqXLt3tsrBR4Q2HInvN+Q==}
+
+  immutable@4.3.9:
+    resolution: {integrity: sha512-ObHy4YN7ycwZOUCLI1/6svfyAFu7vL8RhAvVu/bh/RZW9EPlOyDaQ9jDQWCtdqzaXUjgXZCW1migtHE7YI7UGQ==}
+
   import-meta-resolve@4.2.0:
     resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
 
@@ -3347,6 +4065,10 @@ packages:
     resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
     engines: {node: '>= 0.4'}
 
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
   is-boolean-object@1.2.2:
     resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
@@ -3367,6 +4089,10 @@ packages:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
   is-finalizationregistry@1.1.1:
     resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
     engines: {node: '>= 0.4'}
@@ -3375,6 +4101,10 @@ packages:
     resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
     engines: {node: '>= 0.4'}
 
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -3390,6 +4120,10 @@ packages:
     resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
 
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
   is-obj@1.0.1:
     resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
     engines: {node: '>=0.10.0'}
@@ -3477,9 +4211,36 @@ packages:
   jose@5.10.0:
     resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
 
+  jotai-scope@0.7.2:
+    resolution: {integrity: sha512-Gwed97f3dDObrO43++2lRcgOqw4O2sdr4JCjP/7eHK1oPACDJ7xKHGScpJX9XaflU+KBHXF+VhwECnzcaQiShg==}
+    peerDependencies:
+      jotai: '>=2.9.2'
+      react: '>=17.0.0'
+
+  jotai@2.11.0:
+    resolution: {integrity: sha512-zKfoBBD1uDw3rljwHkt0fWuja1B76R7CjznuBO+mSX6jpsO1EBeWNRKpeaQho9yPI/pvCv4recGfgOXGxwPZvQ==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=17.0.0'
+      react: '>=17.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsdom@29.1.1:
     resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
@@ -3521,6 +4282,10 @@ packages:
   khroma@2.1.0:
     resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
 
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
   layout-base@1.0.2:
     resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
 
@@ -3605,6 +4370,12 @@ packages:
     resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
+  linkifyjs@4.3.2:
+    resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
+
+  linkifyjs@4.3.3:
+    resolution: {integrity: sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==}
+
   lodash-es@4.18.1:
     resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
 
@@ -3614,12 +4385,18 @@ packages:
   lodash.sortby@4.7.0:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
 
+  lodash.throttle@4.1.1:
+    resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
+
   lodash@4.18.1:
     resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
 
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
+  lowlight@3.3.0:
+    resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -3649,6 +4426,11 @@ packages:
     engines: {node: '>= 20'}
     hasBin: true
 
+  marked@17.0.5:
+    resolution: {integrity: sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-codegen@0.4.3:
     resolution: {integrity: sha512-wDPK9BputFrirD7dXgpeIa1nkTy08Gh+nCALwEmmHSmKoCJtTYu1PjGC6Z08FmCjkHzVkhvep2mzyJWRgtOe5A==}
 
@@ -3664,6 +4446,9 @@ packages:
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
+  mdast-util-from-markdown@1.3.1:
+    resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==}
+
   mdast-util-from-markdown@2.0.3:
     resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
 
@@ -3697,6 +4482,9 @@ packages:
   mdast-util-to-markdown@2.1.2:
     resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
 
+  mdast-util-to-string@3.2.0:
+    resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==}
+
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
@@ -3710,6 +4498,9 @@ packages:
   merge-descriptors@1.0.3:
     resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
 
+  mermaid@10.9.3:
+    resolution: {integrity: sha512-V80X1isSEvAewIL3xhmz/rVmc27CVljcsbWxkxlWJWY/1kQa4XOABqpDl2qQLGKzpKm6WbTfUEKImBlUfFYArw==}
+
   mermaid@11.15.0:
     resolution: {integrity: sha512-pTMbcf3rWdtLiYGpmoTjHEpeY8seiy6sR+9nD7LOs8KfUbHE4lOUAprTRqRAcWSQ6MQpdX+YEsxShtGsINtPtw==}
 
@@ -3717,6 +4508,9 @@ packages:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
 
+  micromark-core-commonmark@1.1.0:
+    resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==}
+
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -3744,63 +4538,123 @@ packages:
   micromark-extension-math@3.1.0:
     resolution: {integrity: sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==}
 
+  micromark-factory-destination@1.1.0:
+    resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
+
   micromark-factory-destination@2.0.1:
     resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
+  micromark-factory-label@1.1.0:
+    resolution: {integrity: sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==}
+
   micromark-factory-label@2.0.1:
     resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
 
+  micromark-factory-space@1.1.0:
+    resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
+
   micromark-factory-space@2.0.1:
     resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
 
+  micromark-factory-title@1.1.0:
+    resolution: {integrity: sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==}
+
   micromark-factory-title@2.0.1:
     resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
 
+  micromark-factory-whitespace@1.1.0:
+    resolution: {integrity: sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==}
+
   micromark-factory-whitespace@2.0.1:
     resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
 
+  micromark-util-character@1.2.0:
+    resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==}
+
   micromark-util-character@2.1.1:
     resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
+  micromark-util-chunked@1.1.0:
+    resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
+
   micromark-util-chunked@2.0.1:
     resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
 
+  micromark-util-classify-character@1.1.0:
+    resolution: {integrity: sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==}
+
   micromark-util-classify-character@2.0.1:
     resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
 
+  micromark-util-combine-extensions@1.1.0:
+    resolution: {integrity: sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==}
+
   micromark-util-combine-extensions@2.0.1:
     resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
 
+  micromark-util-decode-numeric-character-reference@1.1.0:
+    resolution: {integrity: sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==}
+
   micromark-util-decode-numeric-character-reference@2.0.2:
     resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
 
+  micromark-util-decode-string@1.1.0:
+    resolution: {integrity: sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==}
+
   micromark-util-decode-string@2.0.1:
     resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
 
+  micromark-util-encode@1.1.0:
+    resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
+
   micromark-util-encode@2.0.1:
     resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
+  micromark-util-html-tag-name@1.2.0:
+    resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
+
   micromark-util-html-tag-name@2.0.1:
     resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
 
+  micromark-util-normalize-identifier@1.1.0:
+    resolution: {integrity: sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==}
+
   micromark-util-normalize-identifier@2.0.1:
     resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
 
+  micromark-util-resolve-all@1.1.0:
+    resolution: {integrity: sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==}
+
   micromark-util-resolve-all@2.0.1:
     resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
 
+  micromark-util-sanitize-uri@1.2.0:
+    resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==}
+
   micromark-util-sanitize-uri@2.0.1:
     resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
 
+  micromark-util-subtokenize@1.1.0:
+    resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
+
   micromark-util-subtokenize@2.1.0:
     resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
 
+  micromark-util-symbol@1.1.0:
+    resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
+
   micromark-util-symbol@2.0.1:
     resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
 
+  micromark-util-types@1.1.0:
+    resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
+
   micromark-util-types@2.0.2:
     resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
 
+  micromark@3.2.0:
+    resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
+
   micromark@4.0.2:
     resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
 
@@ -3847,6 +4701,10 @@ packages:
   mr-parser@0.2.2:
     resolution: {integrity: sha512-9pMgttJp8pZtiYfoHkhBc9ncOHKmEwLMNBQpS/ZXgj4ORnPMKznYR0lZ1We3ZrD71RevQ34hKyKzDV1p/agXuw==}
 
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
@@ -3856,11 +4714,24 @@ packages:
   multiformats@9.9.0:
     resolution: {integrity: sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==}
 
+  multimath@2.0.0:
+    resolution: {integrity: sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==}
+
   nanoid@3.3.12:
     resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.3:
+    resolution: {integrity: sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@4.0.2:
+    resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
+    engines: {node: ^14 || ^16 || >=18}
+    hasBin: true
+
   negotiator@0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
@@ -3875,9 +4746,23 @@ packages:
   node-releases@2.0.38:
     resolution: {integrity: sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==}
 
+  non-layered-tidy-tree-layout@2.0.2:
+    resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  nwsapi@2.2.24:
+    resolution: {integrity: sha512-7YRhZ3jS45LwmSCT4b2sVFHt/WuovaktDU07QrtOBY2PXskss5a9jfmR9jptyumwXST+rFjrmppMY1KT/yn35A==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -3918,6 +4803,12 @@ packages:
   oniguruma-to-es@4.3.6:
     resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
 
+  open-color@1.9.1:
+    resolution: {integrity: sha512-vCseG/EQ6/RcvxhUcGJiHViOgrtz4x0XbZepXvKik66TMGkvbmjeJrKFyBEx6daG5rNyyd14zYXhz0hZVwQFOw==}
+
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -3932,6 +4823,9 @@ packages:
   package-manager-detector@1.6.0:
     resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
+  pako@2.0.3:
+    resolution: {integrity: sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==}
+
   parse-numeric-range@1.3.0:
     resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
 
@@ -3972,9 +4866,19 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  perfect-freehand@1.2.0:
+    resolution: {integrity: sha512-h/0ikF1M3phW7CwpZ5MMvKnfpHficWoOEyr//KVNTxV4F6deRK1eYMtHyBKEAKFK0aXIEUK9oBvlF6PNXMDsAw==}
+
+  pica@7.1.1:
+    resolution: {integrity: sha512-WY73tMvNzXWEld2LicT9Y260L43isrZ85tPuqRyvtkljSDLmnNFQmZICt4xUJMVulmcc6L9O7jbBrtx3DOz/YQ==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
   picomatch@4.0.4:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
@@ -3992,9 +4896,21 @@ packages:
   pkg-types@2.3.1:
     resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
 
+  png-chunk-text@1.0.0:
+    resolution: {integrity: sha512-DEROKU3SkkLGWNMzru3xPVgxyd48UGuMSZvioErCure6yhOc/pRH2ZV+SEn7nmaf7WNf3NdIpH+UTrRdKyq9Lw==}
+
+  png-chunks-encode@1.0.0:
+    resolution: {integrity: sha512-J1jcHgbQRsIIgx5wxW9UmCymV3wwn4qCCJl6KYgEU/yHCh/L2Mwq/nMOkRPtmV79TLxRZj5w3tH69pvygFkDqA==}
+
+  png-chunks-extract@1.0.0:
+    resolution: {integrity: sha512-ZiVwF5EJ0DNZyzAqld8BP1qyJBaGOFaq9zl579qfbkcmOwWLLO4I9L8i2O4j3HkI6/35i0nKG2n+dZplxiT89Q==}
+
   points-on-curve@0.2.0:
     resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
 
+  points-on-curve@1.0.1:
+    resolution: {integrity: sha512-3nmX4/LIiyuwGLwuUrfhTlDeQFlAhi7lyK/zcRNGhalwapDWgAGR82bUpmn2mA03vII3fvNCG8jAONzKXwpxAg==}
+
   points-on-path@0.2.1:
     resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
 
@@ -4029,6 +4945,45 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
+  prosemirror-changeset@2.4.1:
+    resolution: {integrity: sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==}
+
+  prosemirror-commands@1.7.2:
+    resolution: {integrity: sha512-q6Q6szxqdu9Xd6EcdKsqXghu5nQdZTpB4Q9yd04WRc7/jt763e/rT60Owh0L1GYY+T46o5rD+9lEN36dZS43tw==}
+
+  prosemirror-dropcursor@1.8.3:
+    resolution: {integrity: sha512-FoYbsJR8gK+DGlqhNoE29Loa38eIZPzQRIb1VMaDNBoo4OLP6vVof/jR8qFY/6XvUd6Dhug8MDCHl2a/h8RTfQ==}
+
+  prosemirror-gapcursor@1.4.1:
+    resolution: {integrity: sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==}
+
+  prosemirror-history@1.5.0:
+    resolution: {integrity: sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==}
+
+  prosemirror-inputrules@1.5.1:
+    resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
+
+  prosemirror-keymap@1.2.3:
+    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
+
+  prosemirror-model@1.25.11:
+    resolution: {integrity: sha512-QWg9RhnpLlogAmp3p96uEFrE5txQpFynd4vhBAELkwgOCWQs/X0yCzB3/hrHqiPwf91RG5KyWq6553zs9JqIOQ==}
+
+  prosemirror-schema-list@1.5.1:
+    resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
+
+  prosemirror-state@1.4.4:
+    resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
+
+  prosemirror-tables@1.8.5:
+    resolution: {integrity: sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==}
+
+  prosemirror-transform@1.12.0:
+    resolution: {integrity: sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==}
+
+  prosemirror-view@1.42.2:
+    resolution: {integrity: sha512-Pdg0l5kXm8aLDquFAnQFTCITg0q44sLqBlHlpsVLD9segdOao8TOfQdAhCrCXyVgPSRr6UDDROOIWA3bIrN9YQ==}
+
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -4037,6 +4992,9 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  pwacompat@2.0.17:
+    resolution: {integrity: sha512-6Du7IZdIy7cHiv7AhtDy4X2QRM8IAD5DII69mt5qWibC2d15ZU8DmBG1WdZKekG11cChSu4zkSUGPF9sweOl6w==}
+
   qs@6.15.2:
     resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
     engines: {node: '>=0.6'}
@@ -4057,6 +5015,11 @@ packages:
     peerDependencies:
       react: ^19.2.6
 
+  react-drawio@1.0.7:
+    resolution: {integrity: sha512-Vl3Bk7hLOl3k2i317CtxlG8axqBsLJMsuY6Sw5sT1wpvaT48L7o0JZQ1TW65+YF1GA1PuYeI3W2xpSggcB//wg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -4064,6 +5027,26 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-router@7.15.0:
     resolution: {integrity: sha512-HW9vYwuM8f4yx66Izy8xfrzCM+SBJluoZcCbww9A1TySax11S5Vgw6fi3ZjMONw9J4gQwngL7PzkyIpJJpJ7RQ==}
     engines: {node: '>=20.0.0'}
@@ -4074,10 +5057,24 @@ packages:
       react-dom:
         optional: true
 
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react@19.2.6:
     resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
     engines: {node: '>=0.10.0'}
 
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
   readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
@@ -4198,12 +5195,25 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
+  roughjs@4.6.4:
+    resolution: {integrity: sha512-s6EZ0BntezkFYMf/9mGn7M8XGIoaav9QQBCnJROWB3brUWQ683Q2LbRD/hq0Z3bAJ/9NVpU/5LpiTWvQMyLDhw==}
+
   roughjs@4.6.6:
     resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
 
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+
   safe-array-concat@1.1.4:
     resolution: {integrity: sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==}
     engines: {node: '>=0.4'}
@@ -4229,6 +5239,11 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sass@1.51.0:
+    resolution: {integrity: sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+
   saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -4313,6 +5328,10 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  sliced@1.0.1:
+    resolution: {integrity: sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA==}
+    deprecated: Unsupported
+
   smob@1.6.2:
     resolution: {integrity: sha512-RQsvleCbF8cVHEv+xuDGaA4pOizFqJ0GgjtMSRo6oP8pnN7WsigHgVGey6aILRBKv4W2YOMHLqbKdnB6hpB9fw==}
     engines: {node: '>=20.0.0'}
@@ -4450,17 +5469,32 @@ packages:
     resolution: {integrity: sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==}
     hasBin: true
 
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
   tldts-core@7.0.30:
     resolution: {integrity: sha512-uiHN8PIB1VmWyS98eZYja4xzlYqeFZVjb4OuYlJQnZAuJhMw4PbKQOKgHKhBdJR3FE/t5mUQ1Kd80++B+qhD1Q==}
 
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
   tldts@7.0.30:
     resolution: {integrity: sha512-ELrFxuqsDdHUwoh0XxDbxuLD3Wnz49Z57IFvTtvWy1hJdcMZjXLIuonjilCiWHlT2GbE4Wlv1wKVTzDFnXH1aw==}
     hasBin: true
 
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
   toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
   tough-cookie@6.0.1:
     resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
     engines: {node: '>=16'}
@@ -4468,6 +5502,10 @@ packages:
   tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
 
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
   tr46@6.0.0:
     resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
     engines: {node: '>=20'}
@@ -4485,6 +5523,9 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tunnel-rat@0.1.2:
+    resolution: {integrity: sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==}
+
   type-fest@0.16.0:
     resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
     engines: {node: '>=10'}
@@ -4570,6 +5611,9 @@ packages:
   unist-util-remove-position@5.0.0:
     resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
 
+  unist-util-stringify-position@3.0.3:
+    resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
+
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
@@ -4597,6 +5641,31 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   utils-merge@1.0.1:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
@@ -4605,6 +5674,16 @@ packages:
     resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
     hasBin: true
 
+  uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
+    hasBin: true
+
+  uvu@0.5.6:
+    resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   valibot@1.4.0:
     resolution: {integrity: sha512-iC/x7fVcSyOwlm/VSt7RlHnzNGLGvR9GnxdifUeWoCJo0q4ZZvrVkIHC6faTlkxG47I2Y4UrFquPuVHCrOnrLg==}
     peerDependencies:
@@ -4777,17 +5856,40 @@ packages:
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
+  web-worker@1.5.0:
+    resolution: {integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==}
+
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
   webidl-conversions@8.0.1:
     resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
     engines: {node: '>=20'}
 
+  webworkify@1.5.0:
+    resolution: {integrity: sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g==}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
   whatwg-mimetype@5.0.0:
     resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
     engines: {node: '>=20'}
 
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
   whatwg-url@16.0.1:
     resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -4870,6 +5972,18 @@ packages:
   workbox-window@7.4.1:
     resolution: {integrity: sha512-notZDH2u8VXaqyuD7xaqIfEFi6SRM4SUSd7ewe9PDsVqADuepxX2ZMY3uvuZGxzY5ZOsGC/vD3A/3smFtJt4/A==}
 
+  ws@8.21.3:
+    resolution: {integrity: sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -4887,11 +6001,28 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
 snapshots:
 
+  '@adobe/css-tools@4.4.3': {}
+
   '@adobe/css-tools@4.4.4': {}
 
   '@antfu/install-pkg@1.1.0':
@@ -4905,6 +6036,14 @@ snapshots:
       jsonpointer: 5.0.1
       leven: 3.1.0
 
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
   '@asamuzakjp/css-color@5.1.11':
     dependencies:
       '@asamuzakjp/generational-cache': 1.0.1
@@ -6310,6 +7449,8 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
+  '@braintree/sanitize-url@6.0.2': {}
+
   '@braintree/sanitize-url@7.1.2': {}
 
   '@bramus/specificity@2.4.2':
@@ -6404,13 +7545,27 @@ snapshots:
       style-mod: 4.1.3
       w3c-keyname: 2.2.8
 
+  '@csstools/color-helpers@5.1.0': {}
+
   '@csstools/color-helpers@6.0.2': {}
 
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
   '@csstools/css-calc@3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
   '@csstools/css-color-parser@4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/color-helpers': 6.0.2
@@ -6418,6 +7573,10 @@ snapshots:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
   '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
@@ -6426,6 +7585,8 @@ snapshots:
     optionalDependencies:
       css-tree: 3.2.1
 
+  '@csstools/css-tokenizer@3.0.4': {}
+
   '@csstools/css-tokenizer@4.0.0': {}
 
   '@emnapi/core@1.10.0':
@@ -6522,10 +7683,82 @@ snapshots:
   '@esbuild/win32-x64@0.27.7':
     optional: true
 
+  '@excalidraw/excalidraw@0.18.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@braintree/sanitize-url': 6.0.2
+      '@excalidraw/laser-pointer': 1.3.1
+      '@excalidraw/mermaid-to-excalidraw': 1.1.2
+      '@excalidraw/random-username': 1.1.0
+      '@radix-ui/react-popover': 1.1.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tabs': 1.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      browser-fs-access: 0.29.1
+      canvas-roundrect-polyfill: 0.0.1
+      clsx: 1.1.1
+      cross-env: 7.0.3
+      es6-promise-pool: 2.5.0
+      fractional-indexing: 3.2.0
+      fuzzy: 0.1.3
+      image-blob-reduce: 3.0.1
+      jotai: 2.11.0(@types/react@19.2.14)(react@19.2.6)
+      jotai-scope: 0.7.2(jotai@2.11.0(@types/react@19.2.14)(react@19.2.6))(react@19.2.6)
+      lodash.debounce: 4.0.8
+      lodash.throttle: 4.1.1
+      nanoid: 3.3.3
+      open-color: 1.9.1
+      pako: 2.0.3
+      perfect-freehand: 1.2.0
+      pica: 7.1.1
+      png-chunk-text: 1.0.0
+      png-chunks-encode: 1.0.0
+      png-chunks-extract: 1.0.0
+      points-on-curve: 1.0.1
+      pwacompat: 2.0.17
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      roughjs: 4.6.4
+      sass: 1.51.0
+      tunnel-rat: 0.1.2(@types/react@19.2.14)(react@19.2.6)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - immer
+      - supports-color
+
+  '@excalidraw/laser-pointer@1.3.1': {}
+
+  '@excalidraw/markdown-to-text@0.1.2': {}
+
+  '@excalidraw/mermaid-to-excalidraw@1.1.2':
+    dependencies:
+      '@excalidraw/markdown-to-text': 0.1.2
+      mermaid: 10.9.3
+      nanoid: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@excalidraw/random-username@1.1.0': {}
+
   '@exodus/bytes@1.15.0(@noble/hashes@1.8.0)':
     optionalDependencies:
       '@noble/hashes': 1.8.0
 
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
+  '@floating-ui/utils@0.2.12': {}
+
   '@heroicons/react@2.2.0(react@19.2.6)':
     dependencies:
       react: 19.2.6
@@ -6544,6 +7777,19 @@ snapshots:
 
   '@isaacs/cliui@9.0.0': {}
 
+  '@joplin/turndown-plugin-gfm@1.0.64': {}
+
+  '@joplin/turndown@4.0.82':
+    dependencies:
+      '@adobe/css-tools': 4.4.3
+      html-entities: 1.4.0
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -6625,23 +7871,303 @@ snapshots:
 
   '@pinojs/redact@0.4.0': {}
 
-  '@react-router/dev@7.15.0(@react-router/serve@7.15.0(react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@5.9.3))(@types/node@22.19.18)(jiti@2.7.0)(lightningcss@1.32.0)(react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(terser@5.48.0)(typescript@5.9.3)(vite@8.0.11(@types/node@22.19.18)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0))':
+  '@radix-ui/primitive@1.0.0':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/parser': 7.29.3
-      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
-      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-      '@react-router/node': 7.15.0(react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@5.9.3)
-      '@remix-run/node-fetch-server': 0.13.1
-      arg: 5.0.2
-      babel-dead-code-elimination: 1.0.12
-      chokidar: 4.0.3
-      dedent: 1.7.2
-      es-module-lexer: 1.7.0
-      exit-hook: 2.2.1
+      '@babel/runtime': 7.29.7
+
+  '@radix-ui/primitive@1.1.1': {}
+
+  '@radix-ui/react-arrow@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-collection@1.0.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@radix-ui/react-compose-refs': 1.0.0(react@19.2.6)
+      '@radix-ui/react-context': 1.0.0(react@19.2.6)
+      '@radix-ui/react-primitive': 1.0.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.0.1(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
+  '@radix-ui/react-compose-refs@1.0.0(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      react: 19.2.6
+
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-context@1.0.0(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      react: 19.2.6
+
+  '@radix-ui/react-context@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-direction@1.0.0(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      react: 19.2.6
+
+  '@radix-ui/react-dismissable-layer@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-focus-scope@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-id@1.0.0(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@19.2.6)
+      react: 19.2.6
+
+  '@radix-ui/react-id@1.1.0(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-popover@1.1.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-focus-scope': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-popper': 1.2.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      aria-hidden: 1.2.6
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-popper@1.2.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-arrow': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/rect': 1.1.0
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-portal@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-presence@1.0.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@radix-ui/react-compose-refs': 1.0.0(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-primitive@1.0.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@radix-ui/react-slot': 1.0.1(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
+  '@radix-ui/react-primitive@2.0.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-roving-focus@1.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-collection': 1.0.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.0.0(react@19.2.6)
+      '@radix-ui/react-context': 1.0.0(react@19.2.6)
+      '@radix-ui/react-direction': 1.0.0(react@19.2.6)
+      '@radix-ui/react-id': 1.0.0(react@19.2.6)
+      '@radix-ui/react-primitive': 1.0.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.0.0(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
+  '@radix-ui/react-slot@1.0.1(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@radix-ui/react-compose-refs': 1.0.0(react@19.2.6)
+      react: 19.2.6
+
+  '@radix-ui/react-slot@1.1.2(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-tabs@1.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-context': 1.0.0(react@19.2.6)
+      '@radix-ui/react-direction': 1.0.0(react@19.2.6)
+      '@radix-ui/react-id': 1.0.0(react@19.2.6)
+      '@radix-ui/react-presence': 1.0.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 1.0.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.0.0(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
+  '@radix-ui/react-use-callback-ref@1.0.0(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      react: 19.2.6
+
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-controllable-state@1.0.0(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.2.6)
+      react: 19.2.6
+
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-layout-effect@1.0.0(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      react: 19.2.6
+
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-rect@1.1.0(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-size@1.1.0(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/rect@1.1.0': {}
+
+  '@react-router/dev@7.15.0(@react-router/serve@7.15.0(react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@5.9.3))(@types/node@22.19.18)(jiti@2.7.0)(lightningcss@1.32.0)(react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(terser@5.48.0)(typescript@5.9.3)(vite@8.0.11(@types/node@22.19.18)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/parser': 7.29.3
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@react-router/node': 7.15.0(react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@5.9.3)
+      '@remix-run/node-fetch-server': 0.13.1
+      arg: 5.0.2
+      babel-dead-code-elimination: 1.0.12
+      chokidar: 4.0.3
+      dedent: 1.7.2
+      es-module-lexer: 1.7.0
+      exit-hook: 2.2.1
       isbot: 5.1.40
       jsesc: 3.0.2
       lodash: 4.18.1
@@ -7368,6 +8894,196 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@tiptap/core@3.28.0(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-blockquote@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-bold@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-bubble-menu@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+    optional: true
+
+  '@tiptap/extension-bullet-list@3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/extension-list': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-code-block-lowlight@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/extension-code-block@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(highlight.js@11.11.1)(lowlight@3.3.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/extension-code-block': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+      highlight.js: 11.11.1
+      lowlight: 3.3.0
+
+  '@tiptap/extension-code-block@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-code@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-document@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-dropcursor@3.29.2(@tiptap/extensions@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/extensions': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-floating-menu@3.29.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+    optional: true
+
+  '@tiptap/extension-gapcursor@3.29.2(@tiptap/extensions@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/extensions': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-hard-break@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-heading@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-horizontal-rule@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-image@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-italic@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-link@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+      linkifyjs: 4.3.3
+
+  '@tiptap/extension-list-item@3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/extension-list': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-list-keymap@3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/extension-list': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-ordered-list@3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/extension-list': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-paragraph@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-strike@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-table@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/extension-text@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extension-underline@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+
+  '@tiptap/extensions@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/pm@3.28.0':
+    dependencies:
+      prosemirror-changeset: 2.4.1
+      prosemirror-commands: 1.7.2
+      prosemirror-dropcursor: 1.8.3
+      prosemirror-gapcursor: 1.4.1
+      prosemirror-history: 1.5.0
+      prosemirror-inputrules: 1.5.1
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.11
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.4
+      prosemirror-tables: 1.8.5
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+
+  '@tiptap/react@3.28.0(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/use-sync-external-store': 0.0.6
+      fast-equals: 5.4.1
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      use-sync-external-store: 1.6.0(react@19.2.6)
+    optionalDependencies:
+      '@tiptap/extension-bubble-menu': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extension-floating-menu': 3.29.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+    transitivePeerDependencies:
+      - '@floating-ui/dom'
+
+  '@tiptap/starter-kit@3.28.0':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/extension-blockquote': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extension-bold': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-bullet-list': 3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))
+      '@tiptap/extension-code': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-code-block': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extension-document': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-dropcursor': 3.29.2(@tiptap/extensions@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))
+      '@tiptap/extension-gapcursor': 3.29.2(@tiptap/extensions@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))
+      '@tiptap/extension-hard-break': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-heading': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-horizontal-rule': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extension-italic': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-link': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extension-list': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/extension-list-item': 3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))
+      '@tiptap/extension-list-keymap': 3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))
+      '@tiptap/extension-ordered-list': 3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))
+      '@tiptap/extension-paragraph': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-strike': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-text': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extension-underline': 3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
+      '@tiptap/extensions': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
   '@trickfilm400/rollup-plugin-off-main-thread@3.0.0-pre1':
     dependencies:
       ejs: 3.1.10
@@ -7526,6 +9242,10 @@ snapshots:
 
   '@types/katex@0.16.8': {}
 
+  '@types/mdast@3.0.15':
+    dependencies:
+      '@types/unist': 2.0.11
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -7548,8 +9268,12 @@ snapshots:
 
   '@types/trusted-types@2.0.7': {}
 
+  '@types/unist@2.0.11': {}
+
   '@types/unist@3.0.3': {}
 
+  '@types/use-sync-external-store@0.0.6': {}
+
   '@ungap/structured-clone@1.3.1': {}
 
   '@upsetjs/venn.js@2.0.0':
@@ -7612,6 +9336,8 @@ snapshots:
 
   acorn@8.16.0: {}
 
+  agent-base@7.1.4: {}
+
   ajv@8.20.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -7623,8 +9349,17 @@ snapshots:
 
   ansi-styles@5.2.0: {}
 
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.2
+
   arg@5.0.2: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -7715,6 +9450,8 @@ snapshots:
     dependencies:
       require-from-string: 2.0.2
 
+  binary-extensions@2.3.0: {}
+
   body-parser@1.20.5:
     dependencies:
       bytes: 3.1.2
@@ -7744,6 +9481,12 @@ snapshots:
     dependencies:
       balanced-match: 4.0.4
 
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browser-fs-access@0.29.1: {}
+
   browserslist@4.28.2:
     dependencies:
       baseline-browser-mapping: 2.10.28
@@ -7781,6 +9524,8 @@ snapshots:
 
   caniuse-lite@1.0.30001792: {}
 
+  canvas-roundrect-polyfill@0.0.1: {}
+
   ccount@2.0.1: {}
 
   chai@6.2.2: {}
@@ -7791,10 +9536,24 @@ snapshots:
 
   character-entities@2.0.2: {}
 
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
 
+  clsx@1.1.1: {}
+
   codemirror@6.0.2:
     dependencies:
       '@codemirror/autocomplete': 6.20.2
@@ -7863,8 +9622,14 @@ snapshots:
     dependencies:
       layout-base: 2.0.1
 
+  crc-32@0.3.0: {}
+
   crelt@1.0.6: {}
 
+  cross-env@7.0.3:
+    dependencies:
+      cross-spawn: 7.0.6
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -7882,6 +9647,11 @@ snapshots:
 
   css.escape@1.5.1: {}
 
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
   csstype@3.2.3: {}
 
   cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.3):
@@ -8063,11 +9833,21 @@ snapshots:
       d3-transition: 3.0.1(d3-selection@3.0.0)
       d3-zoom: 3.0.0
 
+  dagre-d3-es@7.0.10:
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.18.1
+
   dagre-d3-es@7.0.14:
     dependencies:
       d3: 7.9.0
       lodash-es: 4.18.1
 
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
   data-urls@7.0.0(@noble/hashes@1.8.0):
     dependencies:
       whatwg-mimetype: 5.0.0
@@ -8137,16 +9917,22 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  detect-node-es@1.1.0: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
 
+  diff@5.2.2: {}
+
   direction@2.0.1: {}
 
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
 
+  dompurify@3.1.6: {}
+
   dompurify@3.4.2:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
@@ -8167,6 +9953,8 @@ snapshots:
 
   electron-to-chromium@1.5.353: {}
 
+  elkjs@0.9.3: {}
+
   encodeurl@2.0.0: {}
 
   enhanced-resolve@5.21.2:
@@ -8262,6 +10050,8 @@ snapshots:
 
   es-toolkit@1.46.1: {}
 
+  es6-promise-pool@2.5.0: {}
+
   esbuild@0.27.7:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.27.7
@@ -8359,6 +10149,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-equals@5.4.1: {}
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-uri@3.1.2: {}
@@ -8383,6 +10175,10 @@ snapshots:
     dependencies:
       minimatch: 5.1.9
 
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
   finalhandler@1.3.2:
     dependencies:
       debug: 2.6.9
@@ -8410,6 +10206,8 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
+  fractional-indexing@3.2.0: {}
+
   fresh@0.5.2: {}
 
   fs-extra@9.1.0:
@@ -8449,6 +10247,8 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  fuzzy@0.1.3: {}
+
   generator-function@2.0.1: {}
 
   gensync@1.0.0-beta.2: {}
@@ -8466,6 +10266,8 @@ snapshots:
       hasown: 2.0.4
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-own-enumerable-property-symbols@3.0.2: {}
 
   get-port@5.1.1: {}
@@ -8481,6 +10283,10 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
   glob@11.1.0:
     dependencies:
       foreground-child: 3.3.1
@@ -8495,6 +10301,8 @@ snapshots:
       define-properties: 1.2.1
       gopd: 1.2.0
 
+  glur@1.1.2: {}
+
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
@@ -8653,12 +10461,20 @@ snapshots:
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
 
+  highlight.js@11.11.1: {}
+
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
   html-encoding-sniffer@6.0.0(@noble/hashes@1.8.0):
     dependencies:
       '@exodus/bytes': 1.15.0(@noble/hashes@1.8.0)
     transitivePeerDependencies:
       - '@noble/hashes'
 
+  html-entities@1.4.0: {}
+
   html-void-elements@3.0.0: {}
 
   http-errors@2.0.1:
@@ -8669,6 +10485,20 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   human-format@1.2.1: {}
 
   iconv-lite@0.4.24:
@@ -8681,6 +10511,12 @@ snapshots:
 
   idb@7.1.1: {}
 
+  image-blob-reduce@3.0.1:
+    dependencies:
+      pica: 7.1.1
+
+  immutable@4.3.9: {}
+
   import-meta-resolve@4.2.0: {}
 
   indent-string@4.0.0: {}
@@ -8726,6 +10562,10 @@ snapshots:
     dependencies:
       has-bigints: 1.1.0
 
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
   is-boolean-object@1.2.2:
     dependencies:
       call-bound: 1.0.4
@@ -8748,6 +10588,8 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-extglob@2.1.1: {}
+
   is-finalizationregistry@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -8760,6 +10602,10 @@ snapshots:
       has-tostringtag: 1.0.2
       safe-regex-test: 1.1.0
 
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
   is-map@2.0.3: {}
 
   is-module@1.0.0: {}
@@ -8771,6 +10617,8 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-number@7.0.0: {}
+
   is-obj@1.0.1: {}
 
   is-plain-obj@4.1.0: {}
@@ -8844,8 +10692,45 @@ snapshots:
 
   jose@5.10.0: {}
 
+  jotai-scope@0.7.2(jotai@2.11.0(@types/react@19.2.14)(react@19.2.6))(react@19.2.6):
+    dependencies:
+      jotai: 2.11.0(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+
+  jotai@2.11.0(@types/react@19.2.14)(react@19.2.6):
+    optionalDependencies:
+      '@types/react': 19.2.14
+      react: 19.2.6
+
   js-tokens@4.0.0: {}
 
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.24
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.21.3
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsdom@29.1.1(@noble/hashes@1.8.0):
     dependencies:
       '@asamuzakjp/css-color': 5.1.11
@@ -8894,6 +10779,8 @@ snapshots:
 
   khroma@2.1.0: {}
 
+  kleur@4.1.5: {}
+
   layout-base@1.0.2: {}
 
   layout-base@2.0.1: {}
@@ -8949,16 +10836,28 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.32.0
       lightningcss-win32-x64-msvc: 1.32.0
 
+  linkifyjs@4.3.2: {}
+
+  linkifyjs@4.3.3: {}
+
   lodash-es@4.18.1: {}
 
   lodash.debounce@4.0.8: {}
 
   lodash.sortby@4.7.0: {}
 
+  lodash.throttle@4.1.1: {}
+
   lodash@4.18.1: {}
 
   longest-streak@3.1.0: {}
 
+  lowlight@3.3.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      highlight.js: 11.11.1
+
   lru-cache@10.4.3: {}
 
   lru-cache@11.3.6: {}
@@ -8979,6 +10878,8 @@ snapshots:
 
   marked@16.4.2: {}
 
+  marked@17.0.5: {}
+
   math-codegen@0.4.3:
     dependencies:
       extend: 3.0.2
@@ -9005,6 +10906,23 @@ snapshots:
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
+  mdast-util-from-markdown@1.3.1:
+    dependencies:
+      '@types/mdast': 3.0.15
+      '@types/unist': 2.0.11
+      decode-named-character-reference: 1.3.0
+      mdast-util-to-string: 3.2.0
+      micromark: 3.2.0
+      micromark-util-decode-numeric-character-reference: 1.1.0
+      micromark-util-decode-string: 1.1.0
+      micromark-util-normalize-identifier: 1.1.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      unist-util-stringify-position: 3.0.3
+      uvu: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-from-markdown@2.0.3:
     dependencies:
       '@types/mdast': 4.0.4
@@ -9120,6 +11038,10 @@ snapshots:
       unist-util-visit: 5.1.0
       zwitch: 2.0.4
 
+  mdast-util-to-string@3.2.0:
+    dependencies:
+      '@types/mdast': 3.0.15
+
   mdast-util-to-string@4.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -9130,6 +11052,31 @@ snapshots:
 
   merge-descriptors@1.0.3: {}
 
+  mermaid@10.9.3:
+    dependencies:
+      '@braintree/sanitize-url': 6.0.2
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      cytoscape: 3.33.3
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.3)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.10
+      dayjs: 1.11.20
+      dompurify: 3.1.6
+      elkjs: 0.9.3
+      katex: 0.16.45
+      khroma: 2.1.0
+      lodash-es: 4.18.1
+      mdast-util-from-markdown: 1.3.1
+      non-layered-tidy-tree-layout: 2.0.2
+      stylis: 4.4.0
+      ts-dedent: 2.2.0
+      uuid: 9.0.1
+      web-worker: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+
   mermaid@11.15.0:
     dependencies:
       '@braintree/sanitize-url': 7.1.2
@@ -9156,6 +11103,25 @@ snapshots:
 
   methods@1.1.2: {}
 
+  micromark-core-commonmark@1.1.0:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-factory-destination: 1.1.0
+      micromark-factory-label: 1.1.0
+      micromark-factory-space: 1.1.0
+      micromark-factory-title: 1.1.0
+      micromark-factory-whitespace: 1.1.0
+      micromark-util-character: 1.2.0
+      micromark-util-chunked: 1.1.0
+      micromark-util-classify-character: 1.1.0
+      micromark-util-html-tag-name: 1.2.0
+      micromark-util-normalize-identifier: 1.1.0
+      micromark-util-resolve-all: 1.1.0
+      micromark-util-subtokenize: 1.1.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      uvu: 0.5.6
+
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.3.0
@@ -9243,12 +11209,25 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-factory-destination@1.1.0:
+    dependencies:
+      micromark-util-character: 1.2.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+
   micromark-factory-destination@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-factory-label@1.1.0:
+    dependencies:
+      micromark-util-character: 1.2.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      uvu: 0.5.6
+
   micromark-factory-label@2.0.1:
     dependencies:
       devlop: 1.1.0
@@ -9256,11 +11235,23 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-factory-space@1.1.0:
+    dependencies:
+      micromark-util-character: 1.2.0
+      micromark-util-types: 1.1.0
+
   micromark-factory-space@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-types: 2.0.2
 
+  micromark-factory-title@1.1.0:
+    dependencies:
+      micromark-factory-space: 1.1.0
+      micromark-util-character: 1.2.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+
   micromark-factory-title@2.0.1:
     dependencies:
       micromark-factory-space: 2.0.1
@@ -9268,6 +11259,13 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-factory-whitespace@1.1.0:
+    dependencies:
+      micromark-factory-space: 1.1.0
+      micromark-util-character: 1.2.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+
   micromark-factory-whitespace@2.0.1:
     dependencies:
       micromark-factory-space: 2.0.1
@@ -9275,30 +11273,61 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-util-character@1.2.0:
+    dependencies:
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+
   micromark-util-character@2.1.1:
     dependencies:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-util-chunked@1.1.0:
+    dependencies:
+      micromark-util-symbol: 1.1.0
+
   micromark-util-chunked@2.0.1:
     dependencies:
       micromark-util-symbol: 2.0.1
 
+  micromark-util-classify-character@1.1.0:
+    dependencies:
+      micromark-util-character: 1.2.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+
   micromark-util-classify-character@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-util-combine-extensions@1.1.0:
+    dependencies:
+      micromark-util-chunked: 1.1.0
+      micromark-util-types: 1.1.0
+
   micromark-util-combine-extensions@2.0.1:
     dependencies:
       micromark-util-chunked: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-util-decode-numeric-character-reference@1.1.0:
+    dependencies:
+      micromark-util-symbol: 1.1.0
+
   micromark-util-decode-numeric-character-reference@2.0.2:
     dependencies:
       micromark-util-symbol: 2.0.1
 
+  micromark-util-decode-string@1.1.0:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 1.2.0
+      micromark-util-decode-numeric-character-reference: 1.1.0
+      micromark-util-symbol: 1.1.0
+
   micromark-util-decode-string@2.0.1:
     dependencies:
       decode-named-character-reference: 1.3.0
@@ -9306,24 +11335,49 @@ snapshots:
       micromark-util-decode-numeric-character-reference: 2.0.2
       micromark-util-symbol: 2.0.1
 
+  micromark-util-encode@1.1.0: {}
+
   micromark-util-encode@2.0.1: {}
 
+  micromark-util-html-tag-name@1.2.0: {}
+
   micromark-util-html-tag-name@2.0.1: {}
 
+  micromark-util-normalize-identifier@1.1.0:
+    dependencies:
+      micromark-util-symbol: 1.1.0
+
   micromark-util-normalize-identifier@2.0.1:
     dependencies:
       micromark-util-symbol: 2.0.1
 
+  micromark-util-resolve-all@1.1.0:
+    dependencies:
+      micromark-util-types: 1.1.0
+
   micromark-util-resolve-all@2.0.1:
     dependencies:
       micromark-util-types: 2.0.2
 
+  micromark-util-sanitize-uri@1.2.0:
+    dependencies:
+      micromark-util-character: 1.2.0
+      micromark-util-encode: 1.1.0
+      micromark-util-symbol: 1.1.0
+
   micromark-util-sanitize-uri@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-encode: 2.0.1
       micromark-util-symbol: 2.0.1
 
+  micromark-util-subtokenize@1.1.0:
+    dependencies:
+      micromark-util-chunked: 1.1.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      uvu: 0.5.6
+
   micromark-util-subtokenize@2.1.0:
     dependencies:
       devlop: 1.1.0
@@ -9331,10 +11385,36 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-util-symbol@1.1.0: {}
+
   micromark-util-symbol@2.0.1: {}
 
+  micromark-util-types@1.1.0: {}
+
   micromark-util-types@2.0.2: {}
 
+  micromark@3.2.0:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      micromark-core-commonmark: 1.1.0
+      micromark-factory-space: 1.1.0
+      micromark-util-character: 1.2.0
+      micromark-util-chunked: 1.1.0
+      micromark-util-combine-extensions: 1.1.0
+      micromark-util-decode-numeric-character-reference: 1.1.0
+      micromark-util-encode: 1.1.0
+      micromark-util-normalize-identifier: 1.1.0
+      micromark-util-resolve-all: 1.1.0
+      micromark-util-sanitize-uri: 1.2.0
+      micromark-util-subtokenize: 1.1.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      uvu: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
+
   micromark@4.0.2:
     dependencies:
       '@types/debug': 4.1.13
@@ -9395,14 +11475,25 @@ snapshots:
 
   mr-parser@0.2.2: {}
 
+  mri@1.2.0: {}
+
   ms@2.0.0: {}
 
   ms@2.1.3: {}
 
   multiformats@9.9.0: {}
 
+  multimath@2.0.0:
+    dependencies:
+      glur: 1.1.2
+      object-assign: 4.1.1
+
   nanoid@3.3.12: {}
 
+  nanoid@3.3.3: {}
+
+  nanoid@4.0.2: {}
+
   negotiator@0.6.3: {}
 
   negotiator@0.6.4: {}
@@ -9413,10 +11504,18 @@ snapshots:
 
   node-releases@2.0.38: {}
 
+  non-layered-tidy-tree-layout@2.0.2: {}
+
+  normalize-path@3.0.0: {}
+
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
 
+  nwsapi@2.2.24: {}
+
+  object-assign@4.1.1: {}
+
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -9454,6 +11553,10 @@ snapshots:
       regex: 6.1.0
       regex-recursion: 6.0.2
 
+  open-color@1.9.1: {}
+
+  orderedmap@2.1.1: {}
+
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
@@ -9466,6 +11569,8 @@ snapshots:
 
   package-manager-detector@1.6.0: {}
 
+  pako@2.0.3: {}
+
   parse-numeric-range@1.3.0: {}
 
   parse5@7.3.0:
@@ -9497,8 +11602,20 @@ snapshots:
 
   pathe@2.0.3: {}
 
+  perfect-freehand@1.2.0: {}
+
+  pica@7.1.1:
+    dependencies:
+      glur: 1.1.2
+      inherits: 2.0.4
+      multimath: 2.0.0
+      object-assign: 4.1.1
+      webworkify: 1.5.0
+
   picocolors@1.1.1: {}
 
+  picomatch@2.3.2: {}
+
   picomatch@4.0.4: {}
 
   pino-abstract-transport@3.0.0:
@@ -9527,8 +11644,21 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
+  png-chunk-text@1.0.0: {}
+
+  png-chunks-encode@1.0.0:
+    dependencies:
+      crc-32: 0.3.0
+      sliced: 1.0.1
+
+  png-chunks-extract@1.0.0:
+    dependencies:
+      crc-32: 0.3.0
+
   points-on-curve@0.2.0: {}
 
+  points-on-curve@1.0.1: {}
+
   points-on-path@0.2.1:
     dependencies:
       path-data-parser: 0.1.0
@@ -9558,6 +11688,80 @@ snapshots:
 
   property-information@7.1.0: {}
 
+  prosemirror-changeset@2.4.1:
+    dependencies:
+      prosemirror-transform: 1.12.0
+
+  prosemirror-commands@1.7.2:
+    dependencies:
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-dropcursor@1.8.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+
+  prosemirror-gapcursor@1.4.1:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.42.2
+
+  prosemirror-history@1.5.0:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.5.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-keymap@1.2.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      w3c-keyname: 2.2.8
+
+  prosemirror-model@1.25.11:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-list@1.5.1:
+    dependencies:
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-state@1.4.4:
+    dependencies:
+      prosemirror-model: 1.25.11
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+
+  prosemirror-tables@1.8.5:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+
+  prosemirror-transform@1.12.0:
+    dependencies:
+      prosemirror-model: 1.25.11
+
+  prosemirror-view@1.42.2:
+    dependencies:
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
@@ -9565,6 +11769,8 @@ snapshots:
 
   punycode@2.3.1: {}
 
+  pwacompat@2.0.17: {}
+
   qs@6.15.2:
     dependencies:
       side-channel: 1.1.0
@@ -9585,10 +11791,33 @@ snapshots:
       react: 19.2.6
       scheduler: 0.27.0
 
+  react-drawio@1.0.7(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   react-is@17.0.2: {}
 
   react-refresh@0.14.2: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.6)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.6)
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.6)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.6)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       cookie: 1.1.1
@@ -9597,8 +11826,20 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.6(react@19.2.6)
 
+  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.6
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   react@19.2.6: {}
 
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.2
+
   readdirp@4.1.2: {}
 
   real-require@0.2.0: {}
@@ -9856,6 +12097,15 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.61.0
       fsevents: 2.3.3
 
+  rope-sequence@1.3.4: {}
+
+  roughjs@4.6.4:
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+
   roughjs@4.6.6:
     dependencies:
       hachure-fill: 0.5.2
@@ -9863,8 +12113,14 @@ snapshots:
       points-on-curve: 0.2.0
       points-on-path: 0.2.1
 
+  rrweb-cssom@0.8.0: {}
+
   rw@1.3.3: {}
 
+  sade@1.8.1:
+    dependencies:
+      mri: 1.2.0
+
   safe-array-concat@1.1.4:
     dependencies:
       call-bind: 1.0.9
@@ -9892,6 +12148,12 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sass@1.51.0:
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.9
+      source-map-js: 1.2.1
+
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
@@ -10008,6 +12270,8 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  sliced@1.0.1: {}
+
   smob@1.6.2: {}
 
   sonic-boom@4.2.1:
@@ -10147,14 +12411,28 @@ snapshots:
 
   tlds@1.261.0: {}
 
+  tldts-core@6.1.86: {}
+
   tldts-core@7.0.30: {}
 
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
   tldts@7.0.30:
     dependencies:
       tldts-core: 7.0.30
 
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
   toidentifier@1.0.1: {}
 
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
   tough-cookie@6.0.1:
     dependencies:
       tldts: 7.0.30
@@ -10163,6 +12441,10 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
   tr46@6.0.0:
     dependencies:
       punycode: 2.3.1
@@ -10175,6 +12457,14 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tunnel-rat@0.1.2(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      zustand: 4.5.7(@types/react@19.2.14)(react@19.2.6)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+      - react
+
   type-fest@0.16.0: {}
 
   type-is@1.6.18:
@@ -10279,6 +12569,10 @@ snapshots:
       '@types/unist': 3.0.3
       unist-util-visit: 5.1.0
 
+  unist-util-stringify-position@3.0.3:
+    dependencies:
+      '@types/unist': 2.0.11
+
   unist-util-stringify-position@4.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -10306,10 +12600,38 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.6
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  use-sync-external-store@1.6.0(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   utils-merge@1.0.1: {}
 
   uuid@14.0.0: {}
 
+  uuid@9.0.1: {}
+
+  uvu@0.5.6:
+    dependencies:
+      dequal: 2.0.3
+      diff: 5.2.2
+      kleur: 4.1.5
+      sade: 1.8.1
+
   valibot@1.4.0(typescript@5.9.3):
     optionalDependencies:
       typescript: 5.9.3
@@ -10428,12 +12750,29 @@ snapshots:
 
   web-namespaces@2.0.1: {}
 
+  web-worker@1.5.0: {}
+
   webidl-conversions@4.0.2: {}
 
+  webidl-conversions@7.0.0: {}
+
   webidl-conversions@8.0.1: {}
 
+  webworkify@1.5.0: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
   whatwg-mimetype@5.0.0: {}
 
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
   whatwg-url@16.0.1(@noble/hashes@1.8.0):
     dependencies:
       '@exodus/bytes': 1.15.0(@noble/hashes@1.8.0)
@@ -10611,6 +12950,8 @@ snapshots:
       '@types/trusted-types': 2.0.7
       workbox-core: 7.4.1
 
+  ws@8.21.3: {}
+
   xml-name-validator@5.0.0: {}
 
   xml-naming@0.1.0: {}
@@ -10621,4 +12962,11 @@ snapshots:
 
   zod@3.25.76: {}
 
+  zustand@4.5.7(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      use-sync-external-store: 1.6.0(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      react: 19.2.6
+
   zwitch@2.0.4: {}
diff --git a/vite.config.ts b/vite.config.ts
index f717194..0c5274c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,10 @@ import { VitePWA } from "vite-plugin-pwa";
 
 export default defineConfig({
   server: { host: '127.0.0.1' },
+  // @excalidraw/excalidraw reads process.env at runtime; give browser bundles
+  // an empty object so those reads are undefined instead of a crash.
+  // (Vite still substitutes process.env.NODE_ENV itself — longer keys win.)
+  define: { 'process.env': {} },
   plugins: [
     tailwindcss(), 
     reactRouter(),
-- 
2.51.2


From 5405eada3af524406f1b67a1b1dfad168225a3db Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Tue, 11 Aug 2026 23:16:07 -0500
Subject: [PATCH 02/10] Fix Mermaid rendering

---
 .../editor/nodeviews/AbcPreview.tsx           | 46 +++++++++++++++++
 .../editor/nodeviews/CodeBlockView.tsx        |  8 ++-
 .../editor/nodeviews/FountainPreview.tsx      | 51 +++++++++++++++++++
 .../editor/nodeviews/MermaidPreview.tsx       | 13 +++++
 4 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 app/components/editor/nodeviews/AbcPreview.tsx
 create mode 100644 app/components/editor/nodeviews/FountainPreview.tsx

diff --git a/app/components/editor/nodeviews/AbcPreview.tsx b/app/components/editor/nodeviews/AbcPreview.tsx
new file mode 100644
index 0000000..96ae8f3
--- /dev/null
+++ b/app/components/editor/nodeviews/AbcPreview.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react'
+
+// Live preview for ```abc code blocks inside the visual editor, rendered with
+// the same abcjs options as the published page (PreviewRenderer).
+export default function AbcPreview({ source }: { source: string }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const trimmed = source.trim()
+    if (!trimmed) return
+
+    let cancelled = false
+    const timer = setTimeout(async () => {
+      try {
+        const abcjs = (await import('abcjs')).default
+        if (cancelled || !containerRef.current) return
+        abcjs.renderAbc(containerRef.current, trimmed, {
+          responsive: 'resize',
+          staffwidth: 740,
+          scale: 1.0,
+          add_classes: true,
+        })
+        setError(null)
+      } catch {
+        if (!cancelled) setError('Notation could not be rendered. Check the ABC syntax.')
+      }
+    }, 500)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [source])
+
+  if (error) {
+    return <p className="px-3 py-2 text-xs text-red-600 dark:text-red-400">{error}</p>
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="my-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4"
+    />
+  )
+}
diff --git a/app/components/editor/nodeviews/CodeBlockView.tsx b/app/components/editor/nodeviews/CodeBlockView.tsx
index c32cf3c..4ace63c 100644
--- a/app/components/editor/nodeviews/CodeBlockView.tsx
+++ b/app/components/editor/nodeviews/CodeBlockView.tsx
@@ -1,11 +1,13 @@
 import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react'
 import { lowlight } from '~/lib/tiptap/extensions'
+import AbcPreview from './AbcPreview'
+import FountainPreview from './FountainPreview'
 import MermaidPreview from './MermaidPreview'
 
 const LANGUAGES: string[] = (lowlight.listLanguages() as string[]).slice().sort()
 
-// Code block with a language picker; ```mermaid blocks also render a live
-// preview of the diagram beneath the source.
+// Code block with a language picker; ```mermaid, ```abc, and ```fountain
+// blocks also render a live preview beneath the source.
 export default function CodeBlockView({ node, updateAttributes, editor }: NodeViewProps) {
   const language: string | null = node.attrs.language ?? null
 
@@ -32,6 +34,8 @@ export default function CodeBlockView({ node, updateAttributes, editor }: NodeVi
         <NodeViewContent<'code'> as="code" className="font-mono text-sm" />
       </pre>
       {language === 'mermaid' && <MermaidPreview source={node.textContent} />}
+      {language === 'abc' && <AbcPreview source={node.textContent} />}
+      {language === 'fountain' && <FountainPreview source={node.textContent} />}
     </NodeViewWrapper>
   )
 }
diff --git a/app/components/editor/nodeviews/FountainPreview.tsx b/app/components/editor/nodeviews/FountainPreview.tsx
new file mode 100644
index 0000000..ee6f56d
--- /dev/null
+++ b/app/components/editor/nodeviews/FountainPreview.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from 'react'
+import DOMPurify from 'dompurify'
+
+// Live preview for ```fountain code blocks inside the visual editor. Produces
+// the same sanitized markup as the published page (PreviewRenderer), so the
+// screenplay styling in app.css applies to both.
+export default function FountainPreview({ source }: { source: string }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const trimmed = source.trim()
+    if (!trimmed) return
+
+    let cancelled = false
+    const timer = setTimeout(async () => {
+      try {
+        const { Fountain } = await import('fountain-js')
+        if (cancelled || !containerRef.current) return
+        const parsed = new Fountain().parse(trimmed)
+
+        let html = '<div class="fountain-screenplay prose-fountain">'
+        if (parsed.html?.title_page) {
+          html += `<div class="fountain-title-page mb-8 text-center">${parsed.html.title_page}</div>`
+        }
+        if (parsed.html?.script) {
+          html += `<div class="fountain-script">${parsed.html.script}</div>`
+        }
+        html += '</div>'
+
+        // fountain-js does not HTML-encode screenplay text, so sanitize its
+        // output before insertion — same as the published page.
+        containerRef.current.innerHTML = DOMPurify.sanitize(html)
+        setError(null)
+      } catch {
+        if (!cancelled) setError('Screenplay could not be rendered. Check the Fountain syntax.')
+      }
+    }, 500)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [source])
+
+  if (error) {
+    return <p className="px-3 py-2 text-xs text-red-600 dark:text-red-400">{error}</p>
+  }
+
+  return <div ref={containerRef} className="my-2 overflow-x-auto px-3 py-2" />
+}
diff --git a/app/components/editor/nodeviews/MermaidPreview.tsx b/app/components/editor/nodeviews/MermaidPreview.tsx
index 66d152d..218f536 100644
--- a/app/components/editor/nodeviews/MermaidPreview.tsx
+++ b/app/components/editor/nodeviews/MermaidPreview.tsx
@@ -29,11 +29,24 @@ export default function MermaidPreview({ source }: { source: string }) {
           startOnLoad: false,
           theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
           securityLevel: 'strict',
+          // Render labels as native SVG <text> instead of HTML inside
+          // <foreignObject>. DOMPurify strips foreignObject HTML no matter
+          // how it's configured (deliberate mXSS hardening), which is why
+          // the published page skips sanitization entirely; SVG-text labels
+          // let this preview keep the sanitizer AND visible labels.
+          htmlLabels: false,
+          flowchart: { htmlLabels: false },
         })
         const { svg } = await mermaid.render(`tiptap-mermaid-${++mermaidSeq}`, trimmed)
         if (cancelled || !containerRef.current) return
+        // Defense in depth on top of the DANGEROUS_MERMAID_PATTERNS gate and
+        // mermaid's securityLevel:'strict'. This only works together with
+        // htmlLabels:false above: labels are SVG <text> (kept by the svg
+        // profile) and the theme's colors live in the embedded <style>
+        // (kept via ADD_TAGS).
         containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
           USE_PROFILES: { svg: true, svgFilters: true },
+          ADD_TAGS: ['style'],
         })
         setError(null)
       } catch {
-- 
2.51.2


From e28bec01bc46715aaf914dabca6df2449b2ead34 Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Tue, 11 Aug 2026 23:51:52 -0500
Subject: [PATCH 03/10] Fix embed and function plot rendering

---
 .../editor/nodeviews/CodeBlockView.tsx        |  14 +-
 .../editor/nodeviews/EmbedPreview.tsx         |  41 +++++
 .../editor/nodeviews/FunctionPlotPreview.tsx  | 141 ++++++++++++++++++
 3 files changed, 193 insertions(+), 3 deletions(-)
 create mode 100644 app/components/editor/nodeviews/EmbedPreview.tsx
 create mode 100644 app/components/editor/nodeviews/FunctionPlotPreview.tsx

diff --git a/app/components/editor/nodeviews/CodeBlockView.tsx b/app/components/editor/nodeviews/CodeBlockView.tsx
index 4ace63c..c909d97 100644
--- a/app/components/editor/nodeviews/CodeBlockView.tsx
+++ b/app/components/editor/nodeviews/CodeBlockView.tsx
@@ -1,7 +1,9 @@
 import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react'
 import { lowlight } from '~/lib/tiptap/extensions'
 import AbcPreview from './AbcPreview'
+import EmbedPreview from './EmbedPreview'
 import FountainPreview from './FountainPreview'
+import FunctionPlotPreview from './FunctionPlotPreview'
 import MermaidPreview from './MermaidPreview'
 
 const LANGUAGES: string[] = (lowlight.listLanguages() as string[]).slice().sort()
@@ -33,9 +35,15 @@ export default function CodeBlockView({ node, updateAttributes, editor }: NodeVi
       <pre className="rounded-lg bg-stone-100 dark:bg-stone-800 p-4 overflow-x-auto">
         <NodeViewContent<'code'> as="code" className="font-mono text-sm" />
       </pre>
-      {language === 'mermaid' && <MermaidPreview source={node.textContent} />}
-      {language === 'abc' && <AbcPreview source={node.textContent} />}
-      {language === 'fountain' && <FountainPreview source={node.textContent} />}
+      {/* contentEditable=false keeps the caret and ProseMirror mutation
+          handling out of the preview DOM (embeds inject iframes there) */}
+      <div contentEditable={false}>
+        {language === 'mermaid' && <MermaidPreview source={node.textContent} />}
+        {language === 'abc' && <AbcPreview source={node.textContent} />}
+        {language === 'fountain' && <FountainPreview source={node.textContent} />}
+        {language === 'functionplot' && <FunctionPlotPreview source={node.textContent} />}
+        {language === 'embed' && <EmbedPreview source={node.textContent} />}
+      </div>
     </NodeViewWrapper>
   )
 }
diff --git a/app/components/editor/nodeviews/EmbedPreview.tsx b/app/components/editor/nodeviews/EmbedPreview.tsx
new file mode 100644
index 0000000..446796a
--- /dev/null
+++ b/app/components/editor/nodeviews/EmbedPreview.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import IframelyEmbed from '~/components/IframelyEmbed'
+
+// Live preview for ```embed code blocks inside the visual editor. Renders the
+// same IframelyEmbed component the published page hydrates, with the same
+// default dimensions (rehype-iframely: 444×250). Debounced so a half-typed
+// URL doesn't fire embed requests on every keystroke.
+export default function EmbedPreview({ source }: { source: string }) {
+  const [url, setUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const firstLine = source
+        .split('\n')
+        .map((line) => line.trim())
+        .find(Boolean)
+      setUrl(firstLine && /^https?:\/\/\S+$/.test(firstLine) ? firstLine : null)
+    }, 800)
+    return () => clearTimeout(timer)
+  }, [source])
+
+  if (!url) {
+    return (
+      <p className="my-2 px-3 py-2 text-xs text-stone-500 dark:text-stone-400">
+        Paste a URL on the first line to preview the embed.
+      </p>
+    )
+  }
+
+  // Block layout (not flex): Iframely's responsive embeds size themselves
+  // with a padding-bottom percentage of the container width, so the container
+  // needs a real width — a flex item shrink-wraps to zero and the embed
+  // collapses with it.
+  return (
+    <div className="my-2 px-3 py-2">
+      <div className="mx-auto max-w-md">
+        <IframelyEmbed key={url} url={url} width={444} height={250} />
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/editor/nodeviews/FunctionPlotPreview.tsx b/app/components/editor/nodeviews/FunctionPlotPreview.tsx
new file mode 100644
index 0000000..2a1d2dc
--- /dev/null
+++ b/app/components/editor/nodeviews/FunctionPlotPreview.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react'
+import { logger } from '~/lib/logger'
+
+// Live preview for ```functionplot code blocks inside the visual editor.
+// Mirrors the published page's hydration (PreviewRenderer): optional
+// key: value frontmatter between --- markers, then one function per line,
+// each validated with mathjs; invalid lines are skipped silently so nothing
+// flashes while the author is mid-keystroke.
+
+interface PlotConfig {
+  width: number
+  height: number
+  xDomain: [number, number]
+  yDomain: [number, number]
+  grid: boolean
+  code: string
+}
+
+// Defaults match the published renderer's rehype-functionplot options.
+function parsePlotSource(source: string): PlotConfig {
+  const config: PlotConfig = {
+    width: 800,
+    height: 400,
+    xDomain: [-10, 10],
+    yDomain: [-10, 10],
+    grid: true,
+    code: source,
+  }
+
+  const frontmatterMatch = source.match(/^---[\r\n]+(.*?)[\r\n]+---[\r\n]+([\s\S]*)$/s)
+  if (!frontmatterMatch) return config
+
+  const [, frontmatter, code] = frontmatterMatch
+  let valid = false
+  for (const line of frontmatter.split(/\r?\n/)) {
+    const separatorIndex = line.indexOf(':')
+    if (separatorIndex === -1) continue
+    const key = line.slice(0, separatorIndex).trim()
+    const value = line.slice(separatorIndex + 1).trim()
+    if (!key || !value) continue
+    const num = parseFloat(value)
+    switch (key) {
+      case 'xMin':
+        if (!isNaN(num)) (config.xDomain[0] = num), (valid = true)
+        break
+      case 'xMax':
+        if (!isNaN(num)) (config.xDomain[1] = num), (valid = true)
+        break
+      case 'yMin':
+        if (!isNaN(num)) (config.yDomain[0] = num), (valid = true)
+        break
+      case 'yMax':
+        if (!isNaN(num)) (config.yDomain[1] = num), (valid = true)
+        break
+      case 'width':
+        if (!isNaN(num) && num > 0) (config.width = Math.round(num)), (valid = true)
+        break
+      case 'height':
+        if (!isNaN(num) && num > 0) (config.height = Math.round(num)), (valid = true)
+        break
+      case 'grid':
+        if (value === 'true' || value === 'false') (config.grid = value === 'true'), (valid = true)
+        break
+    }
+  }
+  if (valid) config.code = code.trim()
+  return config
+}
+
+export default function FunctionPlotPreview({ source }: { source: string }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [message, setMessage] = useState<string | null>(null)
+
+  useEffect(() => {
+    const trimmed = source.trim()
+    if (!trimmed) return
+
+    let cancelled = false
+    const timer = setTimeout(async () => {
+      try {
+        const [{ parse }, plotModule] = await Promise.all([import('mathjs'), import('function-plot')])
+        // function-plot is CJS-only; depending on the bundler's interop the
+        // callable lands at the namespace, .default, or .default.default
+        // (Vite's dynamic-import CJS wrapping adds a layer that static
+        // imports — like PreviewRenderer's — don't see).
+        const candidates = [plotModule, (plotModule as any).default, (plotModule as any).default?.default]
+        const functionPlot = candidates.find((c) => typeof c === 'function') as
+          | ((options: Record<string, unknown>) => void)
+          | undefined
+        if (!functionPlot) throw new Error('function-plot module shape not recognized')
+        if (cancelled || !containerRef.current) return
+
+        const config = parsePlotSource(trimmed)
+        const data = config.code
+          .split('\n')
+          .map((line) => line.trim())
+          .filter(Boolean)
+          .flatMap((fn) => {
+            try {
+              return parse(fn) ? [{ fn }] : []
+            } catch {
+              // Mid-typing expressions like "sin(" are expected; skip quietly.
+              return []
+            }
+          })
+
+        if (data.length === 0) {
+          setMessage('Type mathematical functions to plot, one per line (e.g. x^2, sin(x)).')
+          return
+        }
+
+        containerRef.current.innerHTML = ''
+        functionPlot({
+          target: containerRef.current,
+          data,
+          width: config.width,
+          height: config.height,
+          xAxis: { domain: config.xDomain },
+          yAxis: { domain: config.yDomain },
+          grid: config.grid,
+        })
+        setMessage(null)
+      } catch (error) {
+        logger.error({ error }, 'Function plot preview render error')
+        if (!cancelled) setMessage('Unable to render plot. Check the function syntax.')
+      }
+    }, 500)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [source])
+
+  return (
+    <div className="my-2 px-3 py-2">
+      {message && <p className="text-xs text-stone-500 dark:text-stone-400">{message}</p>}
+      <div ref={containerRef} className="flex justify-center overflow-x-auto" />
+    </div>
+  )
+}
-- 
2.51.2


From 54615fa1a5011b0ddff40ce1cb17720f5ae1a13c Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Tue, 11 Aug 2026 23:57:51 -0500
Subject: [PATCH 04/10] Fix function plot gridlines in visual editor

---
 app/components/editor/nodeviews/FunctionPlotPreview.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/editor/nodeviews/FunctionPlotPreview.tsx b/app/components/editor/nodeviews/FunctionPlotPreview.tsx
index 2a1d2dc..fdaa9b9 100644
--- a/app/components/editor/nodeviews/FunctionPlotPreview.tsx
+++ b/app/components/editor/nodeviews/FunctionPlotPreview.tsx
@@ -135,7 +135,9 @@ export default function FunctionPlotPreview({ source }: { source: string }) {
   return (
     <div className="my-2 px-3 py-2">
       {message && <p className="text-xs text-stone-500 dark:text-stone-400">{message}</p>}
-      <div ref={containerRef} className="flex justify-center overflow-x-auto" />
+      {/* function-plot-container scopes the dark-mode axis/grid stroke
+          overrides in app.css — the same ones the published page relies on */}
+      <div ref={containerRef} className="function-plot-container flex justify-center overflow-x-auto" />
     </div>
   )
 }
-- 
2.51.2


From 9ad16460061628163dc96ca4456a214c73d3b756 Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Wed, 12 Aug 2026 00:02:40 -0500
Subject: [PATCH 05/10] Default to visual editor

---
 app/components/editor/ArticleEditor.tsx | 6 +++---
 docs/architecture.md                    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/editor/ArticleEditor.tsx b/app/components/editor/ArticleEditor.tsx
index 0db5718..63040d2 100644
--- a/app/components/editor/ArticleEditor.tsx
+++ b/app/components/editor/ArticleEditor.tsx
@@ -24,9 +24,9 @@ interface ArticleEditorProps {
 
 function storedMode(): EditorMode {
   try {
-    return localStorage.getItem(STORAGE_KEY) === 'visual' ? 'visual' : 'markdown'
+    return localStorage.getItem(STORAGE_KEY) === 'markdown' ? 'markdown' : 'visual'
   } catch {
-    return 'markdown'
+    return 'visual'
   }
 }
 
@@ -113,7 +113,7 @@ export default function ArticleEditor({ initialValue = '', onChange, apiRef }: A
 
   return (
     <div className="space-y-2">
-      <div className="flex items-center justify-end">
+      <div className="flex items-center justify-start">
         <div className="flex rounded-lg border border-stone-300 dark:border-stone-600 overflow-hidden text-xs font-medium">
           {(['markdown', 'visual'] as const).map((m) => (
             <button
diff --git a/docs/architecture.md b/docs/architecture.md
index 364c100..43c46dc 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -308,8 +308,8 @@ Dependencies:
 
 The write/edit screens mount `app/components/editor/ArticleEditor.tsx`, a toggle between two editors that speak the same language — the raw GFM markdown lemma stores:
 
-- **Markdown** (default): the CodeMirror source editor (`app/components/CodeMirrorMarkdownEditor.tsx`).
-- **Visual**: a Tiptap WYSIWYG (`app/components/editor/TiptapArticleEditor.tsx`), lazy-loaded so markdown-only users never download it.
+- **Markdown**: the CodeMirror source editor (`app/components/CodeMirrorMarkdownEditor.tsx`).
+- **Visual** (default): a Tiptap WYSIWYG (`app/components/editor/TiptapArticleEditor.tsx`), lazy-loaded so markdown-only users never download it.
 
 The stored PDS record and DynamoDB item are identical regardless of editor. The visual editor's only crossing points to markdown are in `app/lib/tiptap/markdown/serializer.ts`: markdown → HTML via a configured `marked` instance (`marked-config.ts`) parsed into ProseMirror, and ProseMirror → markdown via `@joplin/turndown` + GFM plugin (`turndown-config.ts`). `app/lib/tiptap/markdown/serializer.test.ts` pins round-trip fidelity for every supported construct; style normalizations (bullet markers, table cell padding, `$$` placement) are asserted there. The visual editor's schema (`app/lib/tiptap/extensions.ts`) is deliberately limited to what round-trips through markdown; `lossy-detect.ts` warns before opening articles containing raw HTML or footnotes in the visual editor.
 
-- 
2.51.2


From e401977ce52707e4a7c1bc879a4b5a53e2b00cab Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Wed, 12 Aug 2026 09:39:35 -0500
Subject: [PATCH 06/10] Fix link button on visual editor

---
 app/components/editor/TiptapToolbar.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/app/components/editor/TiptapToolbar.tsx b/app/components/editor/TiptapToolbar.tsx
index 9611664..da0f941 100644
--- a/app/components/editor/TiptapToolbar.tsx
+++ b/app/components/editor/TiptapToolbar.tsx
@@ -87,6 +87,21 @@ const TiptapToolbar: React.FC<ToolbarProps> = ({ editor, onImageError }) => {
       editor.chain().focus().extendMarkRange('link').unsetLink().run()
       return
     }
+    // With a collapsed cursor outside a link there is no text to mark, so
+    // insert the URL itself as linked text (plus a space to break out of the
+    // mark). With a selection or inside a link, (re)mark the range.
+    const { empty } = editor.state.selection
+    if (empty && !editor.isActive('link')) {
+      editor
+        .chain()
+        .focus()
+        .insertContent([
+          { type: 'text', text: url, marks: [{ type: 'link', attrs: { href: url } }] },
+          { type: 'text', text: ' ' },
+        ])
+        .run()
+      return
+    }
     editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
   }
 
-- 
2.51.2


From 20426dda74eb8adb477ebcfa898b538f20002784 Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Wed, 12 Aug 2026 09:52:24 -0500
Subject: [PATCH 07/10] Add bubble menu

---
 app/components/editor/TiptapArticleEditor.tsx |   2 +
 app/components/editor/TiptapBubbleMenu.tsx    | 150 ++++++++++++++++++
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  15 ++
 4 files changed, 168 insertions(+)
 create mode 100644 app/components/editor/TiptapBubbleMenu.tsx

diff --git a/app/components/editor/TiptapArticleEditor.tsx b/app/components/editor/TiptapArticleEditor.tsx
index 8e279b2..2586a8f 100644
--- a/app/components/editor/TiptapArticleEditor.tsx
+++ b/app/components/editor/TiptapArticleEditor.tsx
@@ -12,6 +12,7 @@ import CodeBlockView from './nodeviews/CodeBlockView'
 import ImageView from './nodeviews/ImageView'
 import MathBlockView from './nodeviews/MathBlockView'
 import MathInlineView from './nodeviews/MathInlineView'
+import TiptapBubbleMenu from './TiptapBubbleMenu'
 import TiptapToolbar from './TiptapToolbar'
 import './tiptap-editor.css'
 
@@ -141,6 +142,7 @@ export default function TiptapArticleEditor({
           </button>
         </div>
       )}
+      {editor && <TiptapBubbleMenu editor={editor} />}
       <EditorContent
         editor={editor}
         className="tiptap-article-editor flex-1 bg-white dark:bg-gray-900 border border-t-0 border-gray-200 dark:border-gray-600 rounded-b-lg"
diff --git a/app/components/editor/TiptapBubbleMenu.tsx b/app/components/editor/TiptapBubbleMenu.tsx
new file mode 100644
index 0000000..2f47a56
--- /dev/null
+++ b/app/components/editor/TiptapBubbleMenu.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useReducer, useRef, useState } from 'react'
+import { NodeSelection } from '@tiptap/pm/state'
+import type { Editor } from '@tiptap/react'
+import { BubbleMenu } from '@tiptap/react/menus'
+import {
+  BoldIcon,
+  CodeBracketIcon,
+  ItalicIcon,
+  LinkIcon,
+  StrikethroughIcon,
+} from '@heroicons/react/24/outline'
+
+// Floating formatting menu over text selections, with an inline link editor.
+// Also appears when the caret sits inside an existing link so its URL can be
+// edited without re-selecting the text.
+export default function TiptapBubbleMenu({ editor }: { editor: Editor }) {
+  const [linkMode, setLinkMode] = useState(false)
+  const [linkDraft, setLinkDraft] = useState('')
+  const linkInputRef = useRef<HTMLInputElement>(null)
+  // Re-render on transactions so active states track the selection.
+  const [, bump] = useReducer((x: number) => x + 1, 0)
+
+  useEffect(() => {
+    const reset = () => setLinkMode(false)
+    editor.on('transaction', bump)
+    editor.on('selectionUpdate', reset)
+    return () => {
+      editor.off('transaction', bump)
+      editor.off('selectionUpdate', reset)
+    }
+  }, [editor])
+
+  useEffect(() => {
+    if (linkMode) linkInputRef.current?.focus()
+  }, [linkMode])
+
+  const applyLink = () => {
+    const url = linkDraft.trim()
+    if (!url) {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+    } else {
+      editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+    }
+    setLinkMode(false)
+  }
+
+  const marks = [
+    { id: 'bold', label: 'Bold', icon: BoldIcon, action: () => editor.chain().focus().toggleBold().run(), active: () => editor.isActive('bold') },
+    { id: 'italic', label: 'Italic', icon: ItalicIcon, action: () => editor.chain().focus().toggleItalic().run(), active: () => editor.isActive('italic') },
+    { id: 'strike', label: 'Strikethrough', icon: StrikethroughIcon, action: () => editor.chain().focus().toggleStrike().run(), active: () => editor.isActive('strike') },
+    { id: 'code', label: 'Inline Code', icon: CodeBracketIcon, action: () => editor.chain().focus().toggleCode().run(), active: () => editor.isActive('code') },
+  ]
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      options={{ placement: 'top', offset: 8 }}
+      shouldShow={({ editor: instance, state }) => {
+        if (!instance.isEditable) return false
+        const { selection } = state
+        // Node selections (images, math, diagrams) have their own affordances.
+        if (selection instanceof NodeSelection) return false
+        if (instance.isActive('codeBlock')) return false
+        if (!selection.empty) return true
+        return instance.isActive('link')
+      }}
+      className="flex items-center gap-0.5 rounded-lg border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 p-1 shadow-lg"
+    >
+      {linkMode ? (
+        <div className="flex items-center gap-1">
+          <input
+            ref={linkInputRef}
+            type="url"
+            value={linkDraft}
+            onChange={(e) => setLinkDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                applyLink()
+              } else if (e.key === 'Escape') {
+                e.preventDefault()
+                setLinkMode(false)
+                editor.commands.focus()
+              }
+            }}
+            placeholder="https://…"
+            className="w-56 rounded border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-900 px-2 py-1 text-xs text-stone-900 dark:text-white placeholder-stone-400 focus:outline-none focus:ring-1 focus:ring-stone-900 dark:focus:ring-stone-100"
+            aria-label="Link URL"
+          />
+          <button
+            type="button"
+            onClick={applyLink}
+            className="rounded-md bg-stone-900 dark:bg-stone-100 px-2 py-1 text-xs font-semibold text-white dark:text-stone-900 hover:bg-stone-700 dark:hover:bg-stone-200 transition-colors"
+          >
+            Apply
+          </button>
+          {editor.isActive('link') && (
+            <button
+              type="button"
+              onClick={() => {
+                editor.chain().focus().extendMarkRange('link').unsetLink().run()
+                setLinkMode(false)
+              }}
+              className="rounded-md px-2 py-1 text-xs font-medium text-stone-500 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors"
+            >
+              Remove
+            </button>
+          )}
+        </div>
+      ) : (
+        <>
+          {marks.map((mark) => {
+            const IconComponent = mark.icon
+            const active = mark.active()
+            return (
+              <button
+                type="button"
+                key={mark.id}
+                onClick={mark.action}
+                title={mark.label}
+                className={`px-2 py-1.5 rounded-md transition-colors duration-100 flex items-center justify-center ${
+                  active
+                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100'
+                    : 'hover:bg-stone-100 dark:hover:bg-stone-700 text-stone-700 dark:text-stone-300'
+                }`}
+              >
+                <IconComponent className="size-4" />
+              </button>
+            )
+          })}
+          <button
+            type="button"
+            onClick={() => {
+              setLinkDraft((editor.getAttributes('link').href as string | undefined) ?? '')
+              setLinkMode(true)
+            }}
+            title="Link"
+            className={`px-2 py-1.5 rounded-md transition-colors duration-100 flex items-center justify-center ${
+              editor.isActive('link')
+                ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100'
+                : 'hover:bg-stone-100 dark:hover:bg-stone-700 text-stone-700 dark:text-stone-300'
+            }`}
+          >
+            <LinkIcon className="size-4" />
+          </button>
+        </>
+      )}
+    </BubbleMenu>
+  )
+}
diff --git a/package.json b/package.json
index 8f491c9..4a424c7 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@react-router/node": "7.15.0",
     "@react-router/serve": "7.15.0",
     "@tiptap/core": "3.28.0",
+    "@tiptap/extension-bubble-menu": "3.28.0",
     "@tiptap/extension-code": "3.28.0",
     "@tiptap/extension-code-block": "3.28.0",
     "@tiptap/extension-code-block-lowlight": "3.28.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b0a11f..5376bf4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       '@tiptap/core':
         specifier: 3.28.0
         version: 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/extension-bubble-menu':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
       '@tiptap/extension-code':
         specifier: 3.28.0
         version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
@@ -2655,6 +2658,12 @@ packages:
     peerDependencies:
       '@tiptap/core': 3.29.2
 
+  '@tiptap/extension-bubble-menu@3.28.0':
+    resolution: {integrity: sha512-7AUNoHj2K4XLKCgW4uspeD/ENejPu2BeHvLTsiOoIO+XXDNSi2j0bbaIS8f2s/qnFirscwp/sbznp1qph/76qg==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+
   '@tiptap/extension-bubble-menu@3.29.2':
     resolution: {integrity: sha512-kzcWarcpr031rZu+R3Hzut5uxb3Qj/xxMDEYZIQ3uiq1yb5vEMXj8/SIyWautk6Nu8Rr1leV3rGdR4NzhzyFAA==}
     peerDependencies:
@@ -8907,6 +8916,12 @@ snapshots:
     dependencies:
       '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
 
+  '@tiptap/extension-bubble-menu@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
   '@tiptap/extension-bubble-menu@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
     dependencies:
       '@floating-ui/dom': 1.8.0
-- 
2.51.2


From 89962332f9d5ea9f72f71671e7bc75ab42aa2ad9 Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Wed, 12 Aug 2026 11:25:40 -0500
Subject: [PATCH 08/10] Add slash menu and drag functionality

---
 app/components/editor/ArticleEditor.tsx       |  90 ++++++--
 app/components/editor/TiptapArticleEditor.tsx |  65 +++++-
 app/components/editor/TiptapToolbar.tsx       |  72 ++-----
 app/components/editor/insert-helpers.ts       |  33 +++
 .../editor/navigation-freeze.test.tsx         | 196 ++++++++++++++++++
 app/components/editor/slash/SlashMenuList.tsx |  87 ++++++++
 app/components/editor/slash/slash-command.ts  |  77 +++++++
 app/components/editor/slash/slash-items.tsx   | 109 ++++++++++
 app/routes/edit.tsx                           |   3 +
 app/routes/publish.tsx                        |   3 +
 docs/architecture.md                          |   2 +
 package.json                                  |   4 +
 pnpm-lock.yaml                                | 138 ++++++++++++
 13 files changed, 802 insertions(+), 77 deletions(-)
 create mode 100644 app/components/editor/insert-helpers.ts
 create mode 100644 app/components/editor/navigation-freeze.test.tsx
 create mode 100644 app/components/editor/slash/SlashMenuList.tsx
 create mode 100644 app/components/editor/slash/slash-command.ts
 create mode 100644 app/components/editor/slash/slash-items.tsx

diff --git a/app/components/editor/ArticleEditor.tsx b/app/components/editor/ArticleEditor.tsx
index 63040d2..ecd4b55 100644
--- a/app/components/editor/ArticleEditor.tsx
+++ b/app/components/editor/ArticleEditor.tsx
@@ -1,4 +1,5 @@
-import { lazy, Suspense, useEffect, useRef, useState } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
 import CodeMirrorMarkdownEditor from '~/components/CodeMirrorMarkdownEditor'
 import Spinner from '~/components/Spinner'
 import type { LossyReport } from '~/lib/tiptap/markdown/lossy-detect'
@@ -14,6 +15,9 @@ type EditorMode = 'markdown' | 'visual'
 
 export interface ArticleEditorApi {
   getMarkdown(): string
+  // Unmounts the visual editor synchronously. Call right before a
+  // programmatic navigation (see the workaround note in ArticleEditor).
+  detach(): void
 }
 
 interface ArticleEditorProps {
@@ -42,6 +46,49 @@ export default function ArticleEditor({ initialValue = '', onChange, apiRef }: A
   const [lossyWarning, setLossyWarning] = useState<LossyReport | null>(null)
   const currentMarkdownRef = useRef(initialValue)
   const tiptapApiRef = useRef<TiptapArticleEditorApi | null>(null)
+  // Workaround for a Tiptap/React 19 incompatibility: React node views flush
+  // portal updates synchronously (flushSync + useSyncExternalStore in
+  // @tiptap/react, still present in 3.30). Sync external-store updates cannot
+  // participate in React transitions, so while an editor with any mounted
+  // node view exists, every React Router navigation transition is restarted
+  // indefinitely — the URL changes but the old page stays frozen. (A
+  // useBlocker can't help: its own state change rides the same starved
+  // transition.) Plain sync updates DO commit during the starvation, so the
+  // fix is to unmount the editor with flushSync before the router transition
+  // starts: on in-app link clicks (capture phase), on popstate, and via
+  // detach() before programmatic navigations.
+  const [leaving, setLeaving] = useState(false)
+  const leavingRef = useRef(false)
+
+  const leave = useCallback(() => {
+    if (leavingRef.current) return
+    leavingRef.current = true
+    flushSync(() => setLeaving(true))
+  }, [])
+
+  useEffect(() => {
+    if (mode !== 'visual') return
+    const onClickCapture = (event: MouseEvent) => {
+      if (event.defaultPrevented || event.button !== 0) return
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+      const anchor = (event.target as Element | null)?.closest?.('a[href]')
+      if (!anchor) return
+      // Only in-app navigations; new-tab/download links don't unmount anything.
+      if (anchor.getAttribute('target') || anchor.hasAttribute('download')) return
+      const href = anchor.getAttribute('href') ?? ''
+      if (!href.startsWith('/')) return
+      // Links inside the document being edited never navigate (openOnClick: false).
+      if (anchor.closest('.tiptap-article-editor')) return
+      leave()
+    }
+    const onPopState = () => leave()
+    document.addEventListener('click', onClickCapture, true)
+    window.addEventListener('popstate', onPopState)
+    return () => {
+      document.removeEventListener('click', onClickCapture, true)
+      window.removeEventListener('popstate', onPopState)
+    }
+  }, [mode, leave])
 
   const getMarkdown = () =>
     mode === 'visual' && tiptapApiRef.current
@@ -53,11 +100,14 @@ export default function ArticleEditor({ initialValue = '', onChange, apiRef }: A
 
   useEffect(() => {
     if (!apiRef) return
-    apiRef.current = { getMarkdown: () => getMarkdownRef.current() }
+    apiRef.current = {
+      getMarkdown: () => getMarkdownRef.current(),
+      detach: () => leave(),
+    }
     return () => {
       apiRef.current = null
     }
-  }, [apiRef])
+  }, [apiRef, leave])
 
   // An article opened directly in visual mode (persisted preference) gets the
   // same lossy-content check a mid-session switch does.
@@ -160,20 +210,26 @@ export default function ArticleEditor({ initialValue = '', onChange, apiRef }: A
       )}
 
       {mode === 'visual' ? (
-        <Suspense
-          fallback={
-            <div className="flex items-center justify-center py-24">
-              <Spinner />
-            </div>
-          }
-        >
-          <TiptapArticleEditor
-            key={generation}
-            initialValue={seed}
-            onChange={handleChange}
-            apiRef={tiptapApiRef}
-          />
-        </Suspense>
+        leaving ? (
+          <div className="flex items-center justify-center py-24">
+            <Spinner />
+          </div>
+        ) : (
+          <Suspense
+            fallback={
+              <div className="flex items-center justify-center py-24">
+                <Spinner />
+              </div>
+            }
+          >
+            <TiptapArticleEditor
+              key={generation}
+              initialValue={seed}
+              onChange={handleChange}
+              apiRef={tiptapApiRef}
+            />
+          </Suspense>
+        )
       ) : (
         <CodeMirrorMarkdownEditor
           key={generation}
diff --git a/app/components/editor/TiptapArticleEditor.tsx b/app/components/editor/TiptapArticleEditor.tsx
index 2586a8f..db86049 100644
--- a/app/components/editor/TiptapArticleEditor.tsx
+++ b/app/components/editor/TiptapArticleEditor.tsx
@@ -1,21 +1,29 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { EditorContent, ReactNodeViewRenderer, useEditor, type Editor } from '@tiptap/react'
 import { Placeholder } from '@tiptap/extensions'
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { Image } from '@tiptap/extension-image'
+import { DragHandle } from '@tiptap/extension-drag-handle-react'
+import { MAX_IMAGE_BYTES, MAX_IMAGE_LABEL } from '~/lib/security-constants'
 import { createLemmaExtensions, lowlight } from '~/lib/tiptap/extensions'
 import { MathBlock } from '~/lib/tiptap/math-block'
 import { MathInline } from '~/lib/tiptap/math-inline'
 import { MarkdownClipboard } from '~/lib/tiptap/markdown-clipboard'
 import { editorHtmlToMarkdown, markdownToEditorHtml } from '~/lib/tiptap/markdown/serializer'
+import { markerForKind, type DiagramKind } from './diagrams/diagram-source'
 import CodeBlockView from './nodeviews/CodeBlockView'
 import ImageView from './nodeviews/ImageView'
 import MathBlockView from './nodeviews/MathBlockView'
 import MathInlineView from './nodeviews/MathInlineView'
+import { createSlashCommand } from './slash/slash-command'
+import { buildSlashItems } from './slash/slash-items'
 import TiptapBubbleMenu from './TiptapBubbleMenu'
 import TiptapToolbar from './TiptapToolbar'
 import './tiptap-editor.css'
 
+const ExcalidrawModal = lazy(() => import('./diagrams/ExcalidrawModal'))
+const DrawioModal = lazy(() => import('./diagrams/DrawioModal'))
+
 export interface TiptapArticleEditorApi {
   getMarkdown(): string
 }
@@ -44,6 +52,9 @@ export default function TiptapArticleEditor({
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const [imageError, setImageError] = useState<string | null>(null)
   const imageErrorTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // Modal for creating a new diagram, reachable from both the toolbar and
+  // the slash command menu. Editing existing diagrams lives in ImageView.
+  const [newDiagram, setNewDiagram] = useState<DiagramKind | null>(null)
 
   const extensions = useMemo(
     () => [
@@ -69,8 +80,10 @@ export default function TiptapArticleEditor({
           },
         }).configure({ inline: true }),
       }),
-      Placeholder.configure({ placeholder: 'Write your article…' }),
+      Placeholder.configure({ placeholder: 'Write your article… Type "/" for blocks' }),
       MarkdownClipboard,
+      // setNewDiagram is a stable useState setter, safe in this memo.
+      createSlashCommand(() => buildSlashItems(setNewDiagram)),
     ],
     [],
   )
@@ -124,9 +137,38 @@ export default function TiptapArticleEditor({
     imageErrorTimerRef.current = setTimeout(() => setImageError(null), 4000)
   }
 
+  const commitNewDiagram = (blob: Blob): string | null => {
+    if (!editor || !newDiagram) return 'Editor is not ready.'
+    if (blob.size > MAX_IMAGE_BYTES) {
+      return `Diagram exceeds ${MAX_IMAGE_LABEL}. Simplify it or split it up.`
+    }
+    editor
+      .chain()
+      .focus()
+      .setImage({
+        src: URL.createObjectURL(blob),
+        alt: newDiagram === 'excalidraw' ? 'Excalidraw diagram' : 'Draw.io diagram',
+        title: markerForKind(newDiagram),
+      })
+      .run()
+    setNewDiagram(null)
+    return null
+  }
+
   return (
     <div className="flex flex-col">
-      {showToolbar && <TiptapToolbar editor={editor} onImageError={handleImageError} />}
+      {showToolbar && (
+        <TiptapToolbar editor={editor} onImageError={handleImageError} onNewDiagram={setNewDiagram} />
+      )}
+      {newDiagram && (
+        <Suspense fallback={null}>
+          {newDiagram === 'excalidraw' ? (
+            <ExcalidrawModal initialSrc={null} onCommit={commitNewDiagram} onClose={() => setNewDiagram(null)} />
+          ) : (
+            <DrawioModal initialSrc={null} onCommit={commitNewDiagram} onClose={() => setNewDiagram(null)} />
+          )}
+        </Suspense>
+      )}
       {imageError && (
         <div className="flex items-center justify-between gap-3 px-4 py-2 bg-red-50 dark:bg-red-950/40 border-b border-red-200 dark:border-red-800">
           <p className="text-sm text-red-600 dark:text-red-400">{imageError}</p>
@@ -143,6 +185,23 @@ export default function TiptapArticleEditor({
         </div>
       )}
       {editor && <TiptapBubbleMenu editor={editor} />}
+      {editor && (
+        <DragHandle editor={editor} className="tiptap-drag-handle">
+          <div
+            className="flex cursor-grab items-center justify-center rounded p-0.5 text-stone-400 hover:bg-stone-100 hover:text-stone-600 active:cursor-grabbing dark:text-stone-500 dark:hover:bg-stone-700 dark:hover:text-stone-300"
+            aria-label="Drag to move block"
+          >
+            <svg className="size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <circle cx="5.5" cy="3.5" r="1.3" />
+              <circle cx="10.5" cy="3.5" r="1.3" />
+              <circle cx="5.5" cy="8" r="1.3" />
+              <circle cx="10.5" cy="8" r="1.3" />
+              <circle cx="5.5" cy="12.5" r="1.3" />
+              <circle cx="10.5" cy="12.5" r="1.3" />
+            </svg>
+          </div>
+        </DragHandle>
+      )}
       <EditorContent
         editor={editor}
         className="tiptap-article-editor flex-1 bg-white dark:bg-gray-900 border border-t-0 border-gray-200 dark:border-gray-600 rounded-b-lg"
diff --git a/app/components/editor/TiptapToolbar.tsx b/app/components/editor/TiptapToolbar.tsx
index da0f941..5d14edb 100644
--- a/app/components/editor/TiptapToolbar.tsx
+++ b/app/components/editor/TiptapToolbar.tsx
@@ -1,4 +1,4 @@
-import React, { lazy, Suspense, useEffect, useReducer, useRef, useState } from 'react'
+import React, { useEffect, useReducer, useRef } from 'react'
 import type { Editor } from '@tiptap/react'
 import {
   BoldIcon,
@@ -28,14 +28,15 @@ import {
 
 import { MAX_IMAGE_BYTES, MAX_IMAGE_LABEL } from '~/lib/security-constants'
 import { compressImage } from '~/lib/compress-image'
-import { markerForKind, type DiagramKind } from './diagrams/diagram-source'
-
-const ExcalidrawModal = lazy(() => import('./diagrams/ExcalidrawModal'))
-const DrawioModal = lazy(() => import('./diagrams/DrawioModal'))
+import type { DiagramKind } from './diagrams/diagram-source'
+import { FENCE_TEMPLATES, insertFence } from './insert-helpers'
 
 interface ToolbarProps {
   editor: Editor | null
   onImageError?: (message: string) => void
+  // Diagram modals are hosted by TiptapArticleEditor so the slash command
+  // menu can open them too.
+  onNewDiagram?: (kind: DiagramKind) => void
 }
 
 interface ToolbarAction {
@@ -48,24 +49,8 @@ interface ToolbarAction {
   shortcut?: string
 }
 
-// Inserts a fenced code block with the given language and starter content —
-// the visual-editor counterpart of the markdown toolbar's fence templates.
-function insertFence(editor: Editor, language: string, template: string) {
-  editor
-    .chain()
-    .focus()
-    .insertContent({
-      type: 'codeBlock',
-      attrs: { language },
-      content: [{ type: 'text', text: template }],
-    })
-    .run()
-}
-
-const TiptapToolbar: React.FC<ToolbarProps> = ({ editor, onImageError }) => {
+const TiptapToolbar: React.FC<ToolbarProps> = ({ editor, onImageError, onNewDiagram }) => {
   const imageInputRef = useRef<HTMLInputElement>(null)
-  // Modal for creating a new diagram; editing existing ones lives in ImageView.
-  const [newDiagram, setNewDiagram] = useState<DiagramKind | null>(null)
   // Re-render on every transaction so active states track the selection.
   const [, bump] = useReducer((x: number) => x + 1, 0)
 
@@ -122,17 +107,17 @@ const TiptapToolbar: React.FC<ToolbarProps> = ({ editor, onImageError }) => {
     { id: 'link', label: 'Link', icon: LinkIcon, action: editLink, isActive: () => editor.isActive('link') },
     { id: 'image', label: 'Insert image', icon: PhotoIcon, action: () => imageInputRef.current?.click() },
     { id: 'separator1', label: '', icon: MinusIcon, action: () => {}, separator: true },
-    { id: 'embed', label: 'Embed from Bluesky, YouTube, Apple Music, etc.', icon: GlobeAltIcon, action: () => insertFence(editor, 'embed', 'https://bsky.app/profile/bsky.app/post/3m2kdgmbbzc2o') },
+    { id: 'embed', label: 'Embed from Bluesky, YouTube, Apple Music, etc.', icon: GlobeAltIcon, action: () => insertFence(editor, FENCE_TEMPLATES.embed.language, FENCE_TEMPLATES.embed.template) },
     { id: 'spoiler', label: 'Spoiler', icon: EyeSlashIcon, action: () => editor.chain().focus().insertContent('::spoiler:: hidden text ::spoiler::').run() },
     { id: 'code', label: 'Inline Code', icon: CodeBracketIcon, shortcut: 'Cmd+E', action: () => editor.chain().focus().toggleCode().run(), isActive: () => editor.isActive('code') },
-    { id: 'code-block', label: 'Code Block', icon: CodeBracketSquareIcon, action: () => insertFence(editor, 'javascript', '// Your code here'), isActive: () => editor.isActive('codeBlock') },
+    { id: 'code-block', label: 'Code Block', icon: CodeBracketSquareIcon, action: () => insertFence(editor, FENCE_TEMPLATES.code.language, FENCE_TEMPLATES.code.template), isActive: () => editor.isActive('codeBlock') },
     { id: 'math', label: 'Math Expression', icon: VariableIcon, action: () => editor.chain().focus().insertMathInline({ text: 'x^2' }).run() },
-    { id: 'functionplot', label: 'Function Plot', icon: PresentationChartLineIcon, action: () => insertFence(editor, 'functionplot', 'x^2\nsin(x)\ncos(x)') },
-    { id: 'mermaid', label: 'Mermaid Diagram', icon: ChartPieIcon, action: () => insertFence(editor, 'mermaid', 'flowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action]\n    B -->|No| D[End]\n    C --> D') },
-    { id: 'excalidraw', label: 'Excalidraw Drawing', icon: PaintBrushIcon, action: () => setNewDiagram('excalidraw') },
-    { id: 'drawio', label: 'Draw.io Diagram', icon: RectangleGroupIcon, action: () => setNewDiagram('drawio') },
-    { id: 'abc', label: 'ABC Musical Notation', icon: MusicalNoteIcon, action: () => insertFence(editor, 'abc', 'X:1\nT:Simple Tune\nK:C\nCDE F|GAB c|') },
-    { id: 'fountain', label: 'Fountain Screenplay', icon: FilmIcon, action: () => insertFence(editor, 'fountain', 'INT. ROOM - DAY\n\nJOHN sits at a desk, writing.\n\nJOHN\n(thoughtful)\nThis is going to be great.\n\nFADE OUT.') },
+    { id: 'functionplot', label: 'Function Plot', icon: PresentationChartLineIcon, action: () => insertFence(editor, FENCE_TEMPLATES.functionplot.language, FENCE_TEMPLATES.functionplot.template) },
+    { id: 'mermaid', label: 'Mermaid Diagram', icon: ChartPieIcon, action: () => insertFence(editor, FENCE_TEMPLATES.mermaid.language, FENCE_TEMPLATES.mermaid.template) },
+    { id: 'excalidraw', label: 'Excalidraw Drawing', icon: PaintBrushIcon, action: () => onNewDiagram?.('excalidraw') },
+    { id: 'drawio', label: 'Draw.io Diagram', icon: RectangleGroupIcon, action: () => onNewDiagram?.('drawio') },
+    { id: 'abc', label: 'ABC Musical Notation', icon: MusicalNoteIcon, action: () => insertFence(editor, FENCE_TEMPLATES.abc.language, FENCE_TEMPLATES.abc.template) },
+    { id: 'fountain', label: 'Fountain Screenplay', icon: FilmIcon, action: () => insertFence(editor, FENCE_TEMPLATES.fountain.language, FENCE_TEMPLATES.fountain.template) },
   ]
 
   return (
@@ -160,33 +145,6 @@ const TiptapToolbar: React.FC<ToolbarProps> = ({ editor, onImageError }) => {
           }
         }}
       />
-      {newDiagram && (
-        <Suspense fallback={null}>
-          {(() => {
-            const commit = (blob: Blob): string | null => {
-              if (blob.size > MAX_IMAGE_BYTES) {
-                return `Diagram exceeds ${MAX_IMAGE_LABEL}. Simplify it or split it up.`
-              }
-              editor
-                .chain()
-                .focus()
-                .setImage({
-                  src: URL.createObjectURL(blob),
-                  alt: newDiagram === 'excalidraw' ? 'Excalidraw diagram' : 'Draw.io diagram',
-                  title: markerForKind(newDiagram),
-                })
-                .run()
-              setNewDiagram(null)
-              return null
-            }
-            return newDiagram === 'excalidraw' ? (
-              <ExcalidrawModal initialSrc={null} onCommit={commit} onClose={() => setNewDiagram(null)} />
-            ) : (
-              <DrawioModal initialSrc={null} onCommit={commit} onClose={() => setNewDiagram(null)} />
-            )
-          })()}
-        </Suspense>
-      )}
       {actions.map((action) => {
         if (action.separator) {
           return (
diff --git a/app/components/editor/insert-helpers.ts b/app/components/editor/insert-helpers.ts
new file mode 100644
index 0000000..e71066b
--- /dev/null
+++ b/app/components/editor/insert-helpers.ts
@@ -0,0 +1,33 @@
+import type { Editor } from '@tiptap/react'
+
+// Inserts a fenced code block with the given language and starter content —
+// the visual-editor counterpart of the markdown toolbar's fence templates.
+// Shared by the fixed toolbar and the slash command menu.
+export function insertFence(editor: Editor, language: string, template: string) {
+  editor
+    .chain()
+    .focus()
+    .insertContent({
+      type: 'codeBlock',
+      attrs: { language },
+      content: [{ type: 'text', text: template }],
+    })
+    .run()
+}
+
+export const FENCE_TEMPLATES = {
+  code: { language: 'javascript', template: '// Your code here' },
+  mermaid: {
+    language: 'mermaid',
+    template:
+      'flowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action]\n    B -->|No| D[End]\n    C --> D',
+  },
+  functionplot: { language: 'functionplot', template: 'x^2\nsin(x)\ncos(x)' },
+  abc: { language: 'abc', template: 'X:1\nT:Simple Tune\nK:C\nCDE F|GAB c|' },
+  fountain: {
+    language: 'fountain',
+    template:
+      'INT. ROOM - DAY\n\nJOHN sits at a desk, writing.\n\nJOHN\n(thoughtful)\nThis is going to be great.\n\nFADE OUT.',
+  },
+  embed: { language: 'embed', template: 'https://bsky.app/profile/bsky.app/post/3m2kdgmbbzc2o' },
+} as const
diff --git a/app/components/editor/navigation-freeze.test.tsx b/app/components/editor/navigation-freeze.test.tsx
new file mode 100644
index 0000000..ae8d76b
--- /dev/null
+++ b/app/components/editor/navigation-freeze.test.tsx
@@ -0,0 +1,196 @@
+// Temporary diagnostic: reproduces the frozen-navigation bug (URL changes but
+// the old view stays) by doing what React Router does — unmounting the editor
+// inside startTransition — and bisecting which editor piece blocks the commit.
+import { lazy, startTransition, Suspense, useState } from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { createMemoryRouter, RouterProvider, useNavigate } from 'react-router'
+import { describe, expect, it } from 'vitest'
+import { EditorContent, ReactNodeViewRenderer, useEditor, type Editor } from '@tiptap/react'
+import { DragHandle } from '@tiptap/extension-drag-handle-react'
+import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
+import { createLemmaExtensions, lowlight } from '~/lib/tiptap/extensions'
+import { MarkdownClipboard } from '~/lib/tiptap/markdown-clipboard'
+import CodeBlockView from './nodeviews/CodeBlockView'
+import { createSlashCommand } from './slash/slash-command'
+import { buildSlashItems } from './slash/slash-items'
+import TiptapBubbleMenu from './TiptapBubbleMenu'
+import TiptapArticleEditor from './TiptapArticleEditor'
+
+// Content shaped like the article that reproduces the freeze: multiple image
+// node views (diagrams), math, code fences with previews.
+const RICH_MARKDOWN = [
+  '# My title 2',
+  '',
+  '![Excalidraw diagram](https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:x/aaa@jpeg "lemma:excalidraw")',
+  '',
+  '[Google](https://google.com)',
+  '',
+  '![Draw.io diagram](https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:x/bbb@jpeg "lemma:drawio")',
+  '',
+  '![plain](https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:x/ccc@jpeg)',
+  '',
+  'Inline $$x^2$$ math.',
+  '',
+  '$$\\sum_i i$$',
+  '',
+  '```mermaid\ngraph TD\nA-->B\n```',
+].join('\n')
+
+function FullHarness({ content }: { content: string }) {
+  const [show, setShow] = useState(true)
+  return (
+    <div>
+      <button onClick={() => startTransition(() => setShow(false))}>navigate</button>
+      {show ? <TiptapArticleEditor initialValue={content} /> : <p>navigated away</p>}
+    </div>
+  )
+}
+
+interface VariantProps {
+  withDragHandle?: boolean
+  withBubbleMenu?: boolean
+  withSlash?: boolean
+  withCodeBlockView?: boolean
+}
+
+function VariantEditor({ withDragHandle, withBubbleMenu, withSlash, withCodeBlockView }: VariantProps) {
+  const editor = useEditor({
+    extensions: [
+      ...createLemmaExtensions(
+        withCodeBlockView
+          ? {
+              codeBlock: CodeBlockLowlight.extend({
+                addNodeView() {
+                  return ReactNodeViewRenderer(CodeBlockView)
+                },
+              }).configure({ lowlight }),
+            }
+          : {},
+      ),
+      MarkdownClipboard,
+      ...(withSlash ? [createSlashCommand(() => buildSlashItems(() => {}))] : []),
+    ],
+    content: '<p>hello world</p>',
+  })
+  return (
+    <div>
+      {editor && withBubbleMenu && <TiptapBubbleMenu editor={editor} />}
+      {editor && withDragHandle && (
+        <DragHandle editor={editor} className="tiptap-drag-handle">
+          <div>grip</div>
+        </DragHandle>
+      )}
+      <EditorContent editor={editor} />
+    </div>
+  )
+}
+
+function VariantHarness(props: VariantProps) {
+  const [show, setShow] = useState(true)
+  return (
+    <div>
+      <button onClick={() => startTransition(() => setShow(false))}>navigate</button>
+      {show ? <VariantEditor {...props} /> : <p>navigated away</p>}
+    </div>
+  )
+}
+
+async function expectNavigates() {
+  screen.getByText('navigate').click()
+  await waitFor(() => expect(screen.getByText('navigated away')).toBeInTheDocument(), {
+    timeout: 3000,
+  })
+}
+
+// Mirrors the real ArticleEditor structure: the editor arrives via
+// React.lazy inside Suspense, and navigation goes through React Router.
+const LazyTiptapArticleEditor = lazy(() => import('./TiptapArticleEditor'))
+
+function LazyEditScreen({ content }: { content: string }) {
+  const navigate = useNavigate()
+  return (
+    <div>
+      <button onClick={() => navigate('/done')}>navigate</button>
+      <button
+        onClick={async () => {
+          // Mirrors handleSubmit: navigation happens in a promise
+          // continuation after awaited async work, not in the click task.
+          await new Promise((resolve) => setTimeout(resolve, 30))
+          navigate('/done')
+        }}
+      >
+        save then navigate
+      </button>
+      <Suspense fallback={<p>loading editor</p>}>
+        <LazyTiptapArticleEditor initialValue={content} />
+      </Suspense>
+    </div>
+  )
+}
+
+async function renderWithRouter(content: string) {
+  const router = createMemoryRouter([
+    { path: '/', element: <LazyEditScreen content={content} /> },
+    { path: '/done', element: <p>navigated away</p> },
+  ])
+  render(<RouterProvider router={router} />)
+  // Wait for the lazy editor to mount before navigating.
+  await waitFor(() => expect(document.querySelector('.ProseMirror')).toBeTruthy(), {
+    timeout: 3000,
+  })
+}
+
+describe('navigating away from the visual editor inside startTransition', () => {
+  it('A: full TiptapArticleEditor, trivial content', async () => {
+    render(<FullHarness content="hello world" />)
+    await expectNavigates()
+  })
+
+  it('A2: full TiptapArticleEditor, image/math/diagram content', async () => {
+    render(<FullHarness content={RICH_MARKDOWN} />)
+    await expectNavigates()
+  })
+
+  it('B: bare editor (no extras)', async () => {
+    render(<VariantHarness />)
+    await expectNavigates()
+  })
+
+  it('C: bare editor + DragHandle', async () => {
+    render(<VariantHarness withDragHandle />)
+    await expectNavigates()
+  })
+
+  it('D: bare editor + BubbleMenu', async () => {
+    render(<VariantHarness withBubbleMenu />)
+    await expectNavigates()
+  })
+
+  it('E: bare editor + slash command', async () => {
+    render(<VariantHarness withSlash />)
+    await expectNavigates()
+  })
+
+  it('F: bare editor + code block node view', async () => {
+    render(<VariantHarness withCodeBlockView />)
+    await expectNavigates()
+  })
+
+  it('G: lazy editor + Suspense + react-router navigation, trivial content', async () => {
+    await renderWithRouter('hello world')
+    await expectNavigates()
+  })
+
+  it('H: lazy editor + Suspense + react-router navigation, rich content', async () => {
+    await renderWithRouter(RICH_MARKDOWN)
+    await expectNavigates()
+  })
+
+  it('I: async navigate after awaited work (mirrors save flow)', async () => {
+    await renderWithRouter(RICH_MARKDOWN)
+    screen.getByText('save then navigate').click()
+    await waitFor(() => expect(screen.getByText('navigated away')).toBeInTheDocument(), {
+      timeout: 3000,
+    })
+  })
+})
diff --git a/app/components/editor/slash/SlashMenuList.tsx b/app/components/editor/slash/SlashMenuList.tsx
new file mode 100644
index 0000000..597eb7d
--- /dev/null
+++ b/app/components/editor/slash/SlashMenuList.tsx
@@ -0,0 +1,87 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import type { SlashItem } from './slash-items'
+
+export interface SlashMenuListHandle {
+  onKeyDown: (event: KeyboardEvent) => boolean
+}
+
+interface SlashMenuListProps {
+  items: SlashItem[]
+  command: (item: SlashItem) => void
+}
+
+// The floating list the slash command renders: arrow keys move the highlight,
+// Enter or click runs the item.
+const SlashMenuList = forwardRef<SlashMenuListHandle, SlashMenuListProps>(
+  ({ items, command }, ref) => {
+    const [selected, setSelected] = useState(0)
+    const listRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => setSelected(0), [items])
+
+    useEffect(() => {
+      listRef.current
+        ?.querySelector('[data-selected="true"]')
+        ?.scrollIntoView({ block: 'nearest' })
+    }, [selected])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        onKeyDown: (event) => {
+          if (items.length === 0) return false
+          if (event.key === 'ArrowDown') {
+            setSelected((current) => (current + 1) % items.length)
+            return true
+          }
+          if (event.key === 'ArrowUp') {
+            setSelected((current) => (current - 1 + items.length) % items.length)
+            return true
+          }
+          if (event.key === 'Enter') {
+            command(items[selected])
+            return true
+          }
+          return false
+        },
+      }),
+      [items, selected, command],
+    )
+
+    return (
+      <div
+        ref={listRef}
+        className="max-h-80 w-60 overflow-y-auto rounded-lg border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 p-1 shadow-lg"
+      >
+        {items.length === 0 ? (
+          <p className="px-3 py-2 text-xs text-stone-400 dark:text-stone-500">No matches</p>
+        ) : (
+          items.map((item, index) => {
+            const IconComponent = item.icon
+            return (
+              <button
+                type="button"
+                key={item.title}
+                data-selected={index === selected}
+                onClick={() => command(item)}
+                onMouseEnter={() => setSelected(index)}
+                className={`flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors ${
+                  index === selected
+                    ? 'bg-stone-100 dark:bg-stone-700 text-stone-900 dark:text-white'
+                    : 'text-stone-700 dark:text-stone-300'
+                }`}
+              >
+                <IconComponent className="size-4 shrink-0 text-stone-500 dark:text-stone-400" />
+                {item.title}
+              </button>
+            )
+          })
+        )}
+      </div>
+    )
+  },
+)
+
+SlashMenuList.displayName = 'SlashMenuList'
+
+export default SlashMenuList
diff --git a/app/components/editor/slash/slash-command.ts b/app/components/editor/slash/slash-command.ts
new file mode 100644
index 0000000..51317f0
--- /dev/null
+++ b/app/components/editor/slash/slash-command.ts
@@ -0,0 +1,77 @@
+import { Extension } from '@tiptap/core'
+import { ReactRenderer } from '@tiptap/react'
+import Suggestion from '@tiptap/suggestion'
+import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import SlashMenuList, { type SlashMenuListHandle } from './SlashMenuList'
+import { filterSlashItems, type SlashItem } from './slash-items'
+
+// Typing "/" opens a filterable block-insert menu at the caret. The item list
+// is supplied by the editor component (it owns the diagram-modal state some
+// items need).
+export function createSlashCommand(getItems: () => SlashItem[]) {
+  return Extension.create({
+    name: 'slashCommand',
+
+    addProseMirrorPlugins() {
+      return [
+        Suggestion<SlashItem>({
+          editor: this.editor,
+          char: '/',
+          allowSpaces: false,
+          // Everything in a code fence is literal source.
+          allow: ({ editor }) => !editor.isActive('codeBlock'),
+          command: ({ editor, range, props }) => props.run({ editor, range }),
+          items: ({ query }) => filterSlashItems(getItems(), query),
+          render: () => {
+            let component: ReactRenderer<SlashMenuListHandle> | null = null
+
+            const element = () => component?.element as HTMLElement | undefined
+
+            const position = (clientRect?: (() => DOMRect | null) | null) => {
+              const el = element()
+              const rect = clientRect?.()
+              if (!el || !rect) return
+              computePosition(
+                { getBoundingClientRect: () => rect },
+                el,
+                { placement: 'bottom-start', middleware: [offset(6), flip(), shift({ padding: 8 })] },
+              ).then(({ x, y }) => {
+                Object.assign(el.style, { position: 'absolute', left: `${x}px`, top: `${y}px`, zIndex: '50' })
+              })
+            }
+
+            return {
+              onStart: (props) => {
+                component = new ReactRenderer(SlashMenuList, {
+                  props: { items: props.items, command: props.command },
+                  editor: props.editor,
+                })
+                document.body.appendChild(component.element)
+                position(props.clientRect)
+              },
+              onUpdate: (props) => {
+                component?.updateProps({ items: props.items, command: props.command })
+                const el = element()
+                if (el) el.style.display = ''
+                position(props.clientRect)
+              },
+              onKeyDown: (props) => {
+                if (props.event.key === 'Escape') {
+                  const el = element()
+                  if (el) el.style.display = 'none'
+                  return true
+                }
+                return component?.ref?.onKeyDown(props.event) ?? false
+              },
+              onExit: () => {
+                element()?.remove()
+                component?.destroy()
+                component = null
+              },
+            }
+          },
+        }),
+      ]
+    },
+  })
+}
diff --git a/app/components/editor/slash/slash-items.tsx b/app/components/editor/slash/slash-items.tsx
new file mode 100644
index 0000000..affe4ac
--- /dev/null
+++ b/app/components/editor/slash/slash-items.tsx
@@ -0,0 +1,109 @@
+import type { Range } from '@tiptap/core'
+import type { Editor } from '@tiptap/react'
+import {
+  ChartPieIcon,
+  ChatBubbleLeftRightIcon,
+  CodeBracketSquareIcon,
+  EyeSlashIcon,
+  FilmIcon,
+  GlobeAltIcon,
+  H1Icon,
+  H2Icon,
+  H3Icon,
+  ListBulletIcon,
+  MinusIcon,
+  MusicalNoteIcon,
+  NumberedListIcon,
+  PaintBrushIcon,
+  PresentationChartLineIcon,
+  QueueListIcon,
+  RectangleGroupIcon,
+  TableCellsIcon,
+  VariableIcon,
+} from '@heroicons/react/24/outline'
+import { markerForKind, type DiagramKind } from '../diagrams/diagram-source'
+import { FENCE_TEMPLATES } from '../insert-helpers'
+
+export interface SlashItem {
+  title: string
+  keywords: string
+  icon: React.ComponentType<{ className?: string }>
+  run: (ctx: { editor: Editor; range: Range }) => void
+}
+
+// The typed "/query" is deleted before each action runs.
+function chainAfterDelete(editor: Editor, range: Range) {
+  return editor.chain().focus().deleteRange(range)
+}
+
+function fenceItem(
+  title: string,
+  keywords: string,
+  icon: SlashItem['icon'],
+  fence: { language: string; template: string },
+): SlashItem {
+  return {
+    title,
+    keywords,
+    icon,
+    run: ({ editor, range }) =>
+      chainAfterDelete(editor, range)
+        .insertContent({
+          type: 'codeBlock',
+          attrs: { language: fence.language },
+          content: [{ type: 'text', text: fence.template }],
+        })
+        .run(),
+  }
+}
+
+export function buildSlashItems(openDiagram: (kind: DiagramKind) => void): SlashItem[] {
+  return [
+    { title: 'Heading 1', keywords: 'h1 title', icon: H1Icon, run: ({ editor, range }) => chainAfterDelete(editor, range).setNode('heading', { level: 1 }).run() },
+    { title: 'Heading 2', keywords: 'h2 subtitle', icon: H2Icon, run: ({ editor, range }) => chainAfterDelete(editor, range).setNode('heading', { level: 2 }).run() },
+    { title: 'Heading 3', keywords: 'h3', icon: H3Icon, run: ({ editor, range }) => chainAfterDelete(editor, range).setNode('heading', { level: 3 }).run() },
+    { title: 'Bullet List', keywords: 'ul unordered', icon: ListBulletIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).toggleBulletList().run() },
+    { title: 'Numbered List', keywords: 'ol ordered', icon: NumberedListIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).toggleOrderedList().run() },
+    { title: 'Check List', keywords: 'task todo checkbox', icon: QueueListIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).toggleTaskList().run() },
+    { title: 'Table', keywords: 'grid columns rows', icon: TableCellsIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
+    { title: 'Blockquote', keywords: 'quote citation', icon: ChatBubbleLeftRightIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).toggleBlockquote().run() },
+    { title: 'Horizontal Rule', keywords: 'hr divider separator', icon: MinusIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).setHorizontalRule().run() },
+    fenceItem('Embed', 'bluesky youtube spotify iframe', GlobeAltIcon, FENCE_TEMPLATES.embed),
+    { title: 'Spoiler', keywords: 'hidden blur reveal', icon: EyeSlashIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).insertContent('::spoiler:: hidden text ::spoiler::').run() },
+    fenceItem('Code Block', 'code snippet fence', CodeBracketSquareIcon, FENCE_TEMPLATES.code),
+    { title: 'Math Block', keywords: 'latex katex equation formula', icon: VariableIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).insertMathBlock({ text: '\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}' }).run() },
+    fenceItem('Function Plot', 'graph math plot chart', PresentationChartLineIcon, FENCE_TEMPLATES.functionplot),
+    fenceItem('Mermaid Diagram', 'flowchart graph chart', ChartPieIcon, FENCE_TEMPLATES.mermaid),
+    {
+      title: 'Excalidraw Drawing',
+      keywords: 'draw sketch whiteboard diagram',
+      icon: PaintBrushIcon,
+      run: ({ editor, range }) => {
+        chainAfterDelete(editor, range).run()
+        openDiagram('excalidraw')
+      },
+    },
+    {
+      title: 'Draw.io Diagram',
+      keywords: 'drawio diagrams.net flowchart',
+      icon: RectangleGroupIcon,
+      run: ({ editor, range }) => {
+        chainAfterDelete(editor, range).run()
+        openDiagram('drawio')
+      },
+    },
+    fenceItem('ABC Notation', 'music score notation', MusicalNoteIcon, FENCE_TEMPLATES.abc),
+    fenceItem('Fountain Screenplay', 'script movie film', FilmIcon, FENCE_TEMPLATES.fountain),
+  ]
+}
+
+export function filterSlashItems(items: SlashItem[], query: string): SlashItem[] {
+  const q = query.toLowerCase().trim()
+  if (!q) return items
+  return items.filter(
+    (item) => item.title.toLowerCase().includes(q) || item.keywords.includes(q),
+  )
+}
+
+// Re-exported so slash items and modals agree on the marker constants.
+export { markerForKind }
diff --git a/app/routes/edit.tsx b/app/routes/edit.tsx
index 8232d41..91821fa 100644
--- a/app/routes/edit.tsx
+++ b/app/routes/edit.tsx
@@ -150,6 +150,9 @@ function EditScreen({ session }: { session: NonNullable<ReturnType<typeof useAut
       if (visibility === 'published') {
         invalidatePosts()
         const publishedRkey = updatedPost.atUri.split('/').pop()!
+        // Unmount the visual editor before navigating (see ArticleEditor's
+        // workaround note) or the route transition never renders.
+        editorApiRef.current?.detach()
         navigate(`/${userId}/pub/${pubRkey}/${publishedRkey}`)
       } else {
         setSaved(true)
diff --git a/app/routes/publish.tsx b/app/routes/publish.tsx
index 2809def..0427c82 100644
--- a/app/routes/publish.tsx
+++ b/app/routes/publish.tsx
@@ -126,6 +126,9 @@ function PublishScreen({ session }: { session: NonNullable<ReturnType<typeof use
       )
       invalidatePosts()
       if (visibility === 'published') {
+        // Unmount the visual editor before navigating (see ArticleEditor's
+        // workaround note) or the route transition never renders.
+        editorApiRef.current?.detach()
         navigate('/')
       } else {
         setPostRkey(post.atUri.split('/').pop()!)
diff --git a/docs/architecture.md b/docs/architecture.md
index 43c46dc..0109174 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -315,6 +315,8 @@ The stored PDS record and DynamoDB item are identical regardless of editor. The
 
 The editor choice persists in `localStorage['lemma:editor-mode']`. `onChange` from the visual editor is debounced; submit paths read the authoritative markdown through an `apiRef.getMarkdown()` handle instead.
 
+Known upstream issue: `@tiptap/react`'s node views flush portal updates synchronously (`flushSync` + `useSyncExternalStore`), which React 19 cannot reconcile with router navigation transitions — with any React node view mounted, navigations complete in the router but React never renders the new route (verified through 3.30). `ArticleEditor` works around it by synchronously unmounting the visual editor before navigation starts: a capture-phase listener for in-app link clicks, a `popstate` listener for back/forward, and a `detach()` API that `publish.tsx`/`edit.tsx` call before their post-save `navigate()`. Remove the workaround only after confirming upstream Tiptap fixed transition compatibility.
+
 Excalidraw and Draw.io diagrams are ordinary markdown images whose exported PNG embeds its own source (Excalidraw scene JSON / Draw.io XML). The image title carries an editor marker (`![…](url "lemma:excalidraw")`) that `markdownProcessor.ts` strips at render time. Uploads flow through the existing `uploadContentImages` path (which preserves image titles across the CDN rewrite); re-editing a published diagram fetches the original bytes from the author's PDS via `com.atproto.sync.getBlob` because the CDN re-encodes to JPEG and would strip the embedded source (`app/components/editor/diagrams/diagram-source.ts`). Diagram exports bypass `compressImage` for the same reason. The Draw.io editor is an iframe from `embed.diagrams.net`; Excalidraw runs fully in-bundle.
 
 ## PWA / bundle size
diff --git a/package.json b/package.json
index 4a424c7..ae108d6 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.42.1",
     "@excalidraw/excalidraw": "0.18.0",
+    "@floating-ui/dom": "^1.8.0",
     "@heroicons/react": "^2.2.0",
     "@iconify-json/logos": "^1.2.11",
     "@joplin/turndown": "4.0.82",
@@ -30,6 +31,8 @@
     "@tiptap/extension-code": "3.28.0",
     "@tiptap/extension-code-block": "3.28.0",
     "@tiptap/extension-code-block-lowlight": "3.28.0",
+    "@tiptap/extension-drag-handle": "3.28.0",
+    "@tiptap/extension-drag-handle-react": "3.28.0",
     "@tiptap/extension-image": "3.28.0",
     "@tiptap/extension-list": "3.28.0",
     "@tiptap/extension-table": "3.28.0",
@@ -37,6 +40,7 @@
     "@tiptap/pm": "3.28.0",
     "@tiptap/react": "3.28.0",
     "@tiptap/starter-kit": "3.28.0",
+    "@tiptap/suggestion": "3.28.0",
     "abcjs": "^6.6.3",
     "codemirror": "^6.0.2",
     "dompurify": "^3.4.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5376bf4..cfafcfa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@excalidraw/excalidraw':
         specifier: 0.18.0
         version: 0.18.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@floating-ui/dom':
+        specifier: ^1.8.0
+        version: 1.8.0
       '@heroicons/react':
         specifier: ^2.2.0
         version: 2.2.0(react@19.2.6)
@@ -71,6 +74,12 @@ importers:
       '@tiptap/extension-code-block-lowlight':
         specifier: 3.28.0
         version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/extension-code-block@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(highlight.js@11.11.1)(lowlight@3.3.0)
+      '@tiptap/extension-drag-handle':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/extension-collaboration@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))(yjs@13.6.32))(@tiptap/extension-node-range@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))
+      '@tiptap/extension-drag-handle-react':
+        specifier: 3.28.0
+        version: 3.28.0(@tiptap/extension-drag-handle@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/extension-collaboration@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))(yjs@13.6.32))(@tiptap/extension-node-range@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32)))(@tiptap/pm@3.28.0)(@tiptap/react@3.28.0(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@tiptap/extension-image':
         specifier: 3.28.0
         version: 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))
@@ -92,6 +101,9 @@ importers:
       '@tiptap/starter-kit':
         specifier: 3.28.0
         version: 3.28.0
+      '@tiptap/suggestion':
+        specifier: 3.28.0
+        version: 3.28.0(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
       abcjs:
         specifier: ^6.6.3
         version: 6.6.3
@@ -2695,11 +2707,37 @@ packages:
     peerDependencies:
       '@tiptap/core': 3.28.0
 
+  '@tiptap/extension-collaboration@3.28.0':
+    resolution: {integrity: sha512-4RUyRPhieqPD7fvCeniIE0QBSwb1exOWJlYvF8s8wWTwc5uywa95gUhRbnHwgTReeG0WW+177eFSEr9xZaUseg==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+      '@tiptap/y-tiptap': ^3.0.7
+      yjs: ^13
+
   '@tiptap/extension-document@3.29.2':
     resolution: {integrity: sha512-YUamvefLnsqu6124GavVTI7nqcFlQJ12ROB0oSwG69eSBZYNjg1tIs05LFrBxkwf4Xgqd6YzfJ9+FeG428RvzQ==}
     peerDependencies:
       '@tiptap/core': 3.29.2
 
+  '@tiptap/extension-drag-handle-react@3.28.0':
+    resolution: {integrity: sha512-YdI4r6IyvNmY42vxkZYjq0p7GFaZZKcCN4FvA8RLJq5BunZYAYze+KV+sYwQyLlYTOH/DRw6kHVUQTlTB9/v3A==}
+    peerDependencies:
+      '@tiptap/extension-drag-handle': 3.28.0
+      '@tiptap/pm': 3.28.0
+      '@tiptap/react': 3.28.0
+      react: ^16.8 || ^17 || ^18 || ^19
+      react-dom: ^16.8 || ^17 || ^18 || ^19
+
+  '@tiptap/extension-drag-handle@3.28.0':
+    resolution: {integrity: sha512-Ta/ZmyFcbUGmxb/OtfJ+znWPTtSNPC0Z7diMkbg3aOo387qtrVEtbq/8w2+6PayOQGEiQN8xYU1ZjCdOhwmVAQ==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/extension-collaboration': 3.28.0
+      '@tiptap/extension-node-range': 3.28.0
+      '@tiptap/pm': 3.28.0
+      '@tiptap/y-tiptap': ^3.0.7
+
   '@tiptap/extension-dropcursor@3.29.2':
     resolution: {integrity: sha512-KKno7cU9r1HdR48CRrsDu69/1UjZdoslq/UcE+Kx+tdhAv/aljXMkRSNzGMrBNOBDmHRgS1+58zm21WQWdQzwA==}
     peerDependencies:
@@ -2765,6 +2803,12 @@ packages:
       '@tiptap/core': 3.28.0
       '@tiptap/pm': 3.28.0
 
+  '@tiptap/extension-node-range@3.28.0':
+    resolution: {integrity: sha512-bH2rxZgSVk/qeFCcJC3Fjl7CYqp1TYjx5fXLtyL+r5qz/KR8qCItLZWndfH+POVD5D9RvEwNnJHBD8Sa2hDI4w==}
+    peerDependencies:
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+
   '@tiptap/extension-ordered-list@3.29.2':
     resolution: {integrity: sha512-ndCunC+UsYOpkOtL7vGnDz21UNa45WUlcO9wMT1fbuYow2QnRhsuMlCWENXI52YPPARWuQ0RDgN7q6TaxPERBg==}
     peerDependencies:
@@ -2818,6 +2862,23 @@ packages:
   '@tiptap/starter-kit@3.28.0':
     resolution: {integrity: sha512-pqvFpValV+ONtlu3l4s73ROm/tEjoGMmt6uHmSJaLbqTcMHkdWuR3flJ/5brr4IDHe1foxmNicMbRxlje7yBYw==}
 
+  '@tiptap/suggestion@3.28.0':
+    resolution: {integrity: sha512-24k0CvvazBeHAK2+WrV1n0uDBZBHNbDAq1K8b5KkWSxcAU7zSCytmApS1u7clRW5wg2xKNBdDhNhvk7KSm1kIA==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.28.0
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/y-tiptap@3.0.8':
+    resolution: {integrity: sha512-+kndlSuoUK9sKVRuxbAHXNrbDvyydnG/Y0NFU9XXqaSkI9IRcrjpOf1RGd7NrC9jJXquDqZS96wOQf6eUpP9Dg==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      prosemirror-model: ^1.7.1
+      prosemirror-state: ^1.2.3
+      prosemirror-view: ^1.9.10
+      y-protocols: ^1.0.1
+      yjs: ^13.5.38
+
   '@trickfilm400/rollup-plugin-off-main-thread@3.0.0-pre1':
     resolution: {integrity: sha512-/67zpWDBLV+oYAEL682s1ktXL0HgqX76f6gaVGkGnVZlBbm1zd0v4Bz8MFF2GGhoX9rvfq3KSQHubFHwa6w6/Q==}
     engines: {node: '>=12'}
@@ -4201,6 +4262,9 @@ packages:
   iso-datestring-validator@2.2.2:
     resolution: {integrity: sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA==}
 
+  isomorphic.js@0.2.5:
+    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+
   jackspeak@4.2.3:
     resolution: {integrity: sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==}
     engines: {node: 20 || >=22}
@@ -4305,6 +4369,11 @@ packages:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
 
+  lib0@0.2.117:
+    resolution: {integrity: sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   lightningcss-android-arm64@1.32.0:
     resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
     engines: {node: '>= 12.0.0'}
@@ -6004,9 +6073,19 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
+  y-protocols@1.0.7:
+    resolution: {integrity: sha512-YSVsLoXxO67J6eE/nV4AtFtT3QEotZf5sK5BHxFBXso7VDUT3Tx07IfA6hsu5Q5OmBdMkQVmFZ9QOA7fikWvnw==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      yjs: ^13.0.0
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yjs@13.6.32:
+    resolution: {integrity: sha512-lfiJIIC4Xayt5ItynE407ehlE03pCjeOc4hkR4yxxvvNJ4kuiN25B0g+Qp8XagYz361LLL7DCzR5bvFJ81QKtQ==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
@@ -8950,10 +9029,34 @@ snapshots:
     dependencies:
       '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
 
+  '@tiptap/extension-collaboration@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))(yjs@13.6.32)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+      '@tiptap/y-tiptap': 3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32)
+      yjs: 13.6.32
+
   '@tiptap/extension-document@3.29.2(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))':
     dependencies:
       '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
 
+  '@tiptap/extension-drag-handle-react@3.28.0(@tiptap/extension-drag-handle@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/extension-collaboration@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))(yjs@13.6.32))(@tiptap/extension-node-range@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32)))(@tiptap/pm@3.28.0)(@tiptap/react@3.28.0(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@tiptap/extension-drag-handle': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/extension-collaboration@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))(yjs@13.6.32))(@tiptap/extension-node-range@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))
+      '@tiptap/pm': 3.28.0
+      '@tiptap/react': 3.28.0(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
+  '@tiptap/extension-drag-handle@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/extension-collaboration@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))(yjs@13.6.32))(@tiptap/extension-node-range@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/extension-collaboration': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)(@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32))(yjs@13.6.32)
+      '@tiptap/extension-node-range': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+      '@tiptap/y-tiptap': 3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32)
+
   '@tiptap/extension-dropcursor@3.29.2(@tiptap/extensions@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))':
     dependencies:
       '@tiptap/extensions': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
@@ -9009,6 +9112,11 @@ snapshots:
       '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
       '@tiptap/pm': 3.28.0
 
+  '@tiptap/extension-node-range@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
   '@tiptap/extension-ordered-list@3.29.2(@tiptap/extension-list@3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0))':
     dependencies:
       '@tiptap/extension-list': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
@@ -9099,6 +9207,21 @@ snapshots:
       '@tiptap/extensions': 3.28.0(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)
       '@tiptap/pm': 3.28.0
 
+  '@tiptap/suggestion@3.28.0(@floating-ui/dom@1.8.0)(@tiptap/core@3.28.0(@tiptap/pm@3.28.0))(@tiptap/pm@3.28.0)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.28.0(@tiptap/pm@3.28.0)
+      '@tiptap/pm': 3.28.0
+
+  '@tiptap/y-tiptap@3.0.8(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.2)(y-protocols@1.0.7(yjs@13.6.32))(yjs@13.6.32)':
+    dependencies:
+      lib0: 0.2.117
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.42.2
+      y-protocols: 1.0.7(yjs@13.6.32)
+      yjs: 13.6.32
+
   '@trickfilm400/rollup-plugin-off-main-thread@3.0.0-pre1':
     dependencies:
       ejs: 3.1.10
@@ -10691,6 +10814,8 @@ snapshots:
 
   iso-datestring-validator@2.2.2: {}
 
+  isomorphic.js@0.2.5: {}
+
   jackspeak@4.2.3:
     dependencies:
       '@isaacs/cliui': 9.0.0
@@ -10802,6 +10927,10 @@ snapshots:
 
   leven@3.1.0: {}
 
+  lib0@0.2.117:
+    dependencies:
+      isomorphic.js: 0.2.5
+
   lightningcss-android-arm64@1.32.0:
     optional: true
 
@@ -12973,8 +13102,17 @@ snapshots:
 
   xmlchars@2.2.0: {}
 
+  y-protocols@1.0.7(yjs@13.6.32):
+    dependencies:
+      lib0: 0.2.117
+      yjs: 13.6.32
+
   yallist@3.1.1: {}
 
+  yjs@13.6.32:
+    dependencies:
+      lib0: 0.2.117
+
   zod@3.25.76: {}
 
   zustand@4.5.7(@types/react@19.2.14)(react@19.2.6):
-- 
2.51.2


From 3f3392af566b8c183f03b97469d699073a2f2713 Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Wed, 12 Aug 2026 11:34:51 -0500
Subject: [PATCH 09/10] Handle spoilers in visual editor

---
 app/components/editor/TiptapBubbleMenu.tsx   |  2 ++
 app/components/editor/TiptapToolbar.tsx      | 21 ++++++++++-
 app/components/editor/slash/slash-items.tsx  | 13 ++++++-
 app/components/editor/tiptap-editor.css      | 14 ++++++++
 app/lib/tiptap/extensions.ts                 |  2 ++
 app/lib/tiptap/markdown/marked-config.ts     |  3 +-
 app/lib/tiptap/markdown/math-tokenizers.ts   |  2 +-
 app/lib/tiptap/markdown/serializer.test.ts   | 12 ++++++-
 app/lib/tiptap/markdown/spoiler-tokenizer.ts | 26 ++++++++++++++
 app/lib/tiptap/markdown/turndown-config.ts   | 12 +++++++
 app/lib/tiptap/spoiler.ts                    | 37 ++++++++++++++++++++
 11 files changed, 139 insertions(+), 5 deletions(-)
 create mode 100644 app/lib/tiptap/markdown/spoiler-tokenizer.ts
 create mode 100644 app/lib/tiptap/spoiler.ts

diff --git a/app/components/editor/TiptapBubbleMenu.tsx b/app/components/editor/TiptapBubbleMenu.tsx
index 2f47a56..0b8988c 100644
--- a/app/components/editor/TiptapBubbleMenu.tsx
+++ b/app/components/editor/TiptapBubbleMenu.tsx
@@ -5,6 +5,7 @@ import { BubbleMenu } from '@tiptap/react/menus'
 import {
   BoldIcon,
   CodeBracketIcon,
+  EyeSlashIcon,
   ItalicIcon,
   LinkIcon,
   StrikethroughIcon,
@@ -49,6 +50,7 @@ export default function TiptapBubbleMenu({ editor }: { editor: Editor }) {
     { id: 'italic', label: 'Italic', icon: ItalicIcon, action: () => editor.chain().focus().toggleItalic().run(), active: () => editor.isActive('italic') },
     { id: 'strike', label: 'Strikethrough', icon: StrikethroughIcon, action: () => editor.chain().focus().toggleStrike().run(), active: () => editor.isActive('strike') },
     { id: 'code', label: 'Inline Code', icon: CodeBracketIcon, action: () => editor.chain().focus().toggleCode().run(), active: () => editor.isActive('code') },
+    { id: 'spoiler', label: 'Spoiler', icon: EyeSlashIcon, action: () => editor.chain().focus().toggleSpoiler().run(), active: () => editor.isActive('spoiler') },
   ]
 
   return (
diff --git a/app/components/editor/TiptapToolbar.tsx b/app/components/editor/TiptapToolbar.tsx
index 5d14edb..d2e4ca8 100644
--- a/app/components/editor/TiptapToolbar.tsx
+++ b/app/components/editor/TiptapToolbar.tsx
@@ -108,7 +108,26 @@ const TiptapToolbar: React.FC<ToolbarProps> = ({ editor, onImageError, onNewDiag
     { id: 'image', label: 'Insert image', icon: PhotoIcon, action: () => imageInputRef.current?.click() },
     { id: 'separator1', label: '', icon: MinusIcon, action: () => {}, separator: true },
     { id: 'embed', label: 'Embed from Bluesky, YouTube, Apple Music, etc.', icon: GlobeAltIcon, action: () => insertFence(editor, FENCE_TEMPLATES.embed.language, FENCE_TEMPLATES.embed.template) },
-    { id: 'spoiler', label: 'Spoiler', icon: EyeSlashIcon, action: () => editor.chain().focus().insertContent('::spoiler:: hidden text ::spoiler::').run() },
+    {
+      id: 'spoiler',
+      label: 'Spoiler',
+      icon: EyeSlashIcon,
+      action: () => {
+        if (editor.state.selection.empty && !editor.isActive('spoiler')) {
+          editor
+            .chain()
+            .focus()
+            .insertContent([
+              { type: 'text', text: 'hidden text', marks: [{ type: 'spoiler' }] },
+              { type: 'text', text: ' ' },
+            ])
+            .run()
+        } else {
+          editor.chain().focus().toggleSpoiler().run()
+        }
+      },
+      isActive: () => editor.isActive('spoiler'),
+    },
     { id: 'code', label: 'Inline Code', icon: CodeBracketIcon, shortcut: 'Cmd+E', action: () => editor.chain().focus().toggleCode().run(), isActive: () => editor.isActive('code') },
     { id: 'code-block', label: 'Code Block', icon: CodeBracketSquareIcon, action: () => insertFence(editor, FENCE_TEMPLATES.code.language, FENCE_TEMPLATES.code.template), isActive: () => editor.isActive('codeBlock') },
     { id: 'math', label: 'Math Expression', icon: VariableIcon, action: () => editor.chain().focus().insertMathInline({ text: 'x^2' }).run() },
diff --git a/app/components/editor/slash/slash-items.tsx b/app/components/editor/slash/slash-items.tsx
index affe4ac..7474c6c 100644
--- a/app/components/editor/slash/slash-items.tsx
+++ b/app/components/editor/slash/slash-items.tsx
@@ -69,7 +69,18 @@ export function buildSlashItems(openDiagram: (kind: DiagramKind) => void): Slash
     { title: 'Blockquote', keywords: 'quote citation', icon: ChatBubbleLeftRightIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).toggleBlockquote().run() },
     { title: 'Horizontal Rule', keywords: 'hr divider separator', icon: MinusIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).setHorizontalRule().run() },
     fenceItem('Embed', 'bluesky youtube spotify iframe', GlobeAltIcon, FENCE_TEMPLATES.embed),
-    { title: 'Spoiler', keywords: 'hidden blur reveal', icon: EyeSlashIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).insertContent('::spoiler:: hidden text ::spoiler::').run() },
+    {
+      title: 'Spoiler',
+      keywords: 'hidden blur reveal',
+      icon: EyeSlashIcon,
+      run: ({ editor, range }) =>
+        chainAfterDelete(editor, range)
+          .insertContent([
+            { type: 'text', text: 'hidden text', marks: [{ type: 'spoiler' }] },
+            { type: 'text', text: ' ' },
+          ])
+          .run(),
+    },
     fenceItem('Code Block', 'code snippet fence', CodeBracketSquareIcon, FENCE_TEMPLATES.code),
     { title: 'Math Block', keywords: 'latex katex equation formula', icon: VariableIcon, run: ({ editor, range }) => chainAfterDelete(editor, range).insertMathBlock({ text: '\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}' }).run() },
     fenceItem('Function Plot', 'graph math plot chart', PresentationChartLineIcon, FENCE_TEMPLATES.functionplot),
diff --git a/app/components/editor/tiptap-editor.css b/app/components/editor/tiptap-editor.css
index 0d8b291..9869587 100644
--- a/app/components/editor/tiptap-editor.css
+++ b/app/components/editor/tiptap-editor.css
@@ -274,6 +274,20 @@
   color: #60a5fa; /* blue-400 */
 }
 
+/* Spoilers stay readable while editing (the published page blurs them);
+ * the dashed underline + tint marks the hidden range. */
+.tiptap-article-editor .ProseMirror span[data-type='spoiler'] {
+  background: rgba(120, 113, 108, 0.16); /* stone-500 */
+  border-bottom: 1px dashed #78716c; /* stone-500 */
+  border-radius: 0.2rem;
+  padding: 0 0.15rem;
+}
+
+.dark .tiptap-article-editor .ProseMirror span[data-type='spoiler'] {
+  background: rgba(168, 162, 158, 0.2); /* stone-400 */
+  border-bottom-color: #a8a29e; /* stone-400 */
+}
+
 /* Gap cursor between isolating blocks */
 .tiptap-article-editor .ProseMirror .ProseMirror-gapcursor:after {
   border-top: 1px solid #1c1917;
diff --git a/app/lib/tiptap/extensions.ts b/app/lib/tiptap/extensions.ts
index 6aa9ace..8b3fb8a 100644
--- a/app/lib/tiptap/extensions.ts
+++ b/app/lib/tiptap/extensions.ts
@@ -13,6 +13,7 @@ import { common, createLowlight } from 'lowlight'
 import plaintext from 'highlight.js/lib/languages/plaintext'
 import { MathBlock } from './math-block'
 import { MathInline } from './math-inline'
+import { Spoiler } from './spoiler'
 
 export const lowlight = createLowlight(common)
 // lemma's custom fences highlight as plain text inside the editor; the
@@ -82,5 +83,6 @@ export function createLemmaExtensions(overrides: LemmaExtensionOverrides = {}) {
     overrides.codeBlock ?? CodeBlockLowlight.configure({ lowlight }),
     overrides.mathInline ?? MathInline,
     overrides.mathBlock ?? MathBlock,
+    Spoiler,
   ]
 }
diff --git a/app/lib/tiptap/markdown/marked-config.ts b/app/lib/tiptap/markdown/marked-config.ts
index 91a5953..563d97a 100644
--- a/app/lib/tiptap/markdown/marked-config.ts
+++ b/app/lib/tiptap/markdown/marked-config.ts
@@ -4,6 +4,7 @@
 
 import { Marked } from 'marked'
 import { mathBlockTokenizer, mathInlineTokenizer } from './math-tokenizers'
+import { spoilerTokenizer } from './spoiler-tokenizer'
 
 const marked = new Marked({
   // Single newlines stay soft breaks (rendered as spaces), matching the
@@ -40,7 +41,7 @@ marked.use({
   },
 })
 
-marked.use({ extensions: [mathBlockTokenizer, mathInlineTokenizer] })
+marked.use({ extensions: [mathBlockTokenizer, mathInlineTokenizer, spoilerTokenizer] })
 
 export function markdownToHtml(markdown: string): string {
   return marked.parse(markdown, { async: false }) as string
diff --git a/app/lib/tiptap/markdown/math-tokenizers.ts b/app/lib/tiptap/markdown/math-tokenizers.ts
index 5be7419..279cb4a 100644
--- a/app/lib/tiptap/markdown/math-tokenizers.ts
+++ b/app/lib/tiptap/markdown/math-tokenizers.ts
@@ -7,7 +7,7 @@ import type { TokenizerAndRendererExtension } from 'marked'
 // Math content is emitted verbatim (HTML-escaped only). Running it through a
 // markdown parser would rewrite `*`/`_`/`\` sequences and corrupt the LaTeX
 // on the way back to markdown.
-function escapeHtml(text: string): string {
+export function escapeHtml(text: string): string {
   return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 
diff --git a/app/lib/tiptap/markdown/serializer.test.ts b/app/lib/tiptap/markdown/serializer.test.ts
index 940b1da..67e9dbe 100644
--- a/app/lib/tiptap/markdown/serializer.test.ts
+++ b/app/lib/tiptap/markdown/serializer.test.ts
@@ -115,10 +115,14 @@ describe('roundTripMarkdown: stable constructs', () => {
     expectStable('before ![tiny](https://x.example/i.png) after')
   })
 
-  it('spoiler syntax passes through as text', () => {
+  it('spoiler round-trips through the spoiler mark', () => {
     expectStable('::spoiler:: the butler did it ::spoiler::')
   })
 
+  it('spoiler mid-sentence', () => {
+    expectStable('The killer is ::spoiler:: the butler ::spoiler:: obviously.')
+  })
+
   it('mentions and hashtags mid-line pass through', () => {
     expectStable('Ping @user.bsky.social about #wildlife today.')
   })
@@ -141,6 +145,12 @@ describe('roundTripMarkdown: documented normalizations', () => {
     expect(roundTripMarkdown('some _italic_ text')).toBe('some *italic* text')
   })
 
+  it('unspaced spoiler markers normalize to the spaced form', () => {
+    expect(roundTripMarkdown('::spoiler::tight::spoiler::')).toBe(
+      '::spoiler:: tight ::spoiler::',
+    )
+  })
+
   it('table cells pad to column width', () => {
     expect(roundTripMarkdown('| a | b |\n| --- | --- |\n| 1 | 2 |')).toBe(
       '| a   | b   |\n| --- | --- |\n| 1   | 2   |',
diff --git a/app/lib/tiptap/markdown/spoiler-tokenizer.ts b/app/lib/tiptap/markdown/spoiler-tokenizer.ts
new file mode 100644
index 0000000..e0e12df
--- /dev/null
+++ b/app/lib/tiptap/markdown/spoiler-tokenizer.ts
@@ -0,0 +1,26 @@
+// marked tokenizer for lemma's spoiler syntax: `::spoiler:: text ::spoiler::`.
+// Mirrors rehype-spoiler on the published page, which matches the markers
+// only inside a single plain-text run — so spoiler content is treated as
+// plain text here too (no inline markdown parsing).
+
+import type { TokenizerAndRendererExtension } from 'marked'
+import { escapeHtml } from './math-tokenizers'
+
+export const spoilerTokenizer: TokenizerAndRendererExtension = {
+  name: 'spoiler',
+  level: 'inline',
+  start(src: string) {
+    const index = src.indexOf('::spoiler::')
+    return index === -1 ? undefined : index
+  },
+  tokenizer(src: string) {
+    const match = /^::spoiler::([^]*?)::spoiler::/.exec(src)
+    if (match && match[1].trim()) {
+      return { type: 'spoiler', raw: match[0], text: match[1].trim() }
+    }
+    return undefined
+  },
+  renderer(token) {
+    return `<span data-type="spoiler">${escapeHtml(token.text)}</span>`
+  },
+}
diff --git a/app/lib/tiptap/markdown/turndown-config.ts b/app/lib/tiptap/markdown/turndown-config.ts
index 76b586e..82aaf72 100644
--- a/app/lib/tiptap/markdown/turndown-config.ts
+++ b/app/lib/tiptap/markdown/turndown-config.ts
@@ -149,6 +149,18 @@ function createTurndown() {
       `\n\n$$\n${node.textContent}\n$$\n\n`,
   })
 
+  // Spoilers serialize from textContent (plain text by design — the
+  // published renderer only matches the markers within a single text run)
+  // back to the canonical spaced form the toolbar inserts.
+  service.addRule('spoiler', {
+    filter: (node: HTMLElement) =>
+      node.nodeName === 'SPAN' && node.getAttribute('data-type') === 'spoiler',
+    replacement: (_content: string, node: HTMLElement) => {
+      const text = (node.textContent ?? '').trim()
+      return text ? `::spoiler:: ${text} ::spoiler::` : ''
+    },
+  })
+
   // Images keep their title — `![alt](src "title")` — which is how diagram
   // nodes are marked (see diagram support).
   service.addRule('image', {
diff --git a/app/lib/tiptap/spoiler.ts b/app/lib/tiptap/spoiler.ts
new file mode 100644
index 0000000..15b80b1
--- /dev/null
+++ b/app/lib/tiptap/spoiler.ts
@@ -0,0 +1,37 @@
+// Spoiler mark: `::spoiler:: text ::spoiler::` in lemma markdown. The
+// published page reveals spoilers on click (rehype-spoiler); inside the
+// editor the content stays readable and is styled via tiptap-editor.css.
+// Content is plain text — the published renderer only matches the markers
+// within a single text run, so inner formatting would break it there.
+
+import { Mark, mergeAttributes } from '@tiptap/core'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    spoiler: {
+      toggleSpoiler: () => ReturnType
+    }
+  }
+}
+
+export const Spoiler = Mark.create({
+  name: 'spoiler',
+  inclusive: false,
+
+  parseHTML() {
+    return [{ tag: `span[data-type="${this.name}"]` }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes({ 'data-type': this.name }, HTMLAttributes), 0]
+  },
+
+  addCommands() {
+    return {
+      toggleSpoiler:
+        () =>
+        ({ commands }) =>
+          commands.toggleMark(this.name),
+    }
+  },
+})
-- 
2.51.2


From 9cfe123f9613a2c6a1d2cec4cd0c6f45616cfbd7 Mon Sep 17 00:00:00 2001
From: lemma <>
Date: Wed, 12 Aug 2026 12:25:44 -0500
Subject: [PATCH 10/10] Update IFramely SRI pin

---
 app/components/IframelyEmbed.test.tsx |  2 +-
 app/components/IframelyEmbed.tsx      |  2 +-
 app/lib/help-content.ts               | 13 +++++++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/components/IframelyEmbed.test.tsx b/app/components/IframelyEmbed.test.tsx
index 7a9c310..014291c 100644
--- a/app/components/IframelyEmbed.test.tsx
+++ b/app/components/IframelyEmbed.test.tsx
@@ -47,7 +47,7 @@ describe('IframelyEmbed', () => {
       expect(document.querySelector(`script[src="${EMBED_JS_SRC}"]`)).not.toBeNull(),
     );
     const script = document.querySelector<HTMLScriptElement>(`script[src="${EMBED_JS_SRC}"]`)!;
-    expect(script.integrity).toBe('sha256-3GwLJcK+mlckENNer3dPxN7pSjeNqIRkurShyMXvtsw=');
+    expect(script.integrity).toBe('sha256-D19IYg6LGSLFu7xFyGeyw0z2urLf4qXT2s5YjVAuuDU=');
     expect(script.crossOrigin).toBe('anonymous');
     expect(script.async).toBe(true);
   });
diff --git a/app/components/IframelyEmbed.tsx b/app/components/IframelyEmbed.tsx
index 325bd14..69c9570 100644
--- a/app/components/IframelyEmbed.tsx
+++ b/app/components/IframelyEmbed.tsx
@@ -6,7 +6,7 @@ import { sanitizeIframelyHtml } from '~/lib/iframely-utils';
 
 // SRI hash pins the exact embed.js build we audited. Update with: make -C infra update-iframely-sri
 const EMBED_JS_SRC = 'https://cdn.iframe.ly/embed.js';
-const EMBED_JS_INTEGRITY = 'sha256-3GwLJcK+mlckENNer3dPxN7pSjeNqIRkurShyMXvtsw=';
+const EMBED_JS_INTEGRITY = 'sha256-D19IYg6LGSLFu7xFyGeyw0z2urLf4qXT2s5YjVAuuDU=';
 
 function ensureEmbedJs() {
   const existing = document.querySelector<HTMLScriptElement>(
diff --git a/app/lib/help-content.ts b/app/lib/help-content.ts
index c94a883..aba2ab6 100644
--- a/app/lib/help-content.ts
+++ b/app/lib/help-content.ts
@@ -3,8 +3,11 @@
 // importing the route component.
 
 export const HELP_CONTENT = `
-Our editor uses Markdown plus extensions designed for writers in specialized fields.
-Don't worry, the **toolbar buttons** will help you with the syntax.
+Our editor supports two writing modes: Markdown and Visual. 
+Under the hood it uses Markdown plus extensions designed for writers in specialized fields.
+Don't worry, the **toolbar buttons** will help you with the syntax in Markdown mode. 
+In Visual mode you can use the toolbar or type \`/\` to open the menu.
+
 For a deeper dive please see the documentation sites for
 [GitHub Flavored Markdown](https://github.github.com/gfm/),
 [KaTeX](https://katex.org/docs/support_table.html) math notation,
@@ -15,7 +18,9 @@ For a deeper dive please see the documentation sites for
 You can upload images to use anywhere on your article. 
 They will be saved to your personal data server (PDS) and served through Bluesky's content delivery network (CDN) for super fast access, just like the photos in your Bluesky posts.
 
-<br/><br/>
+<br/>
+
+# Markdown mode tutorial
 
 ## Mentions, hashtags, and cashtags
 
@@ -98,7 +103,7 @@ DD AA|BBA2|
 
 ## Embed web content
 
-You can also embed web content like music, video, social media posts, or even a whole coding sandbox thanks to [Iframely](https://iframely.com/domains). 
+You can also embed web content like music, video, and social media posts thanks to [Iframely](https://iframely.com/domains). 
 Just select the **Embed** button on the toolbar while writing your post. 
 
 ### Social Media