@ltm-blueverse/alpha-semantic-hub 0.7.0

package/explorer/src/workspaces/GraphWorkspace/MarkdownContentViewer.tsx

@@ -0,0 +1,705 @@
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+} from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import {
+  Check,
+  Code2,
+  Copy,
+  Eye,
+  ExternalLink,
+  Image as ImageIcon,
+  Loader2,
+  Pencil,
+  RefreshCw,
+  X,
+} from "lucide-react";
+import { GRAPH_THEME } from "./graphTheme";
+import type { MarkdownApplyResult } from "./markdownResourceClient";
+import type { MarkdownResourceRef } from "./markdownEditorState";
+import { isSafeUrl } from "./markdownUrlSafety";
+import { useMarkdownEditor } from "./useMarkdownEditor";
+
+export interface MarkdownContentViewerProps {
+  content?: string | null;
+  resource?: MarkdownResourceRef;
+  onApplied?: (result: MarkdownApplyResult) => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  className?: string;
+  defaultMode?: "preview" | "source";
+}
+
+// Exported for unit-testing the roving-tabindex navigation logic without a DOM.
+// Given the ordered list of tab modes and the currently focused mode, returns
+// the mode that should receive focus for a given keyboard key.  Returns null if
+// the key is not a navigation key so callers can handle the default case.
+// eslint-disable-next-line react-refresh/only-export-components
+export function resolveTabNavigation(
+  current: "preview" | "source",
+  key: string,
+): "preview" | "source" | null {
+  const order = ["preview", "source"] as const;
+  const idx = order.indexOf(current);
+  switch (key) {
+    case "ArrowRight": return order[(idx + 1) % order.length];
+    case "ArrowLeft":  return order[(idx - 1 + order.length) % order.length];
+    case "Home":       return order[0];
+    case "End":        return order[order.length - 1];
+    default:           return null;
+  }
+}
+
+export function MarkdownContentViewer({
+  content,
+  resource,
+  onApplied,
+  onDirtyChange,
+  className,
+  defaultMode = "preview",
+}: MarkdownContentViewerProps) {
+  const [activeMode, setActiveMode] = useState<"preview" | "source">(defaultMode);
+  const [copied, setCopied] = useState(false);
+  const modeBeforeEditRef = useRef<"preview" | "source">(defaultMode);
+  const resourceKey = resource ? `${resource.kind}:${resource.id}` : "";
+  const [activeResourceKey, setActiveResourceKey] = useState(resourceKey);
+  const editor = useMarkdownEditor({ resource, onApplied, onDirtyChange });
+  const {
+    session,
+    error,
+    dirty,
+    editing,
+    saving,
+    loading,
+  } = editor;
+
+  if (activeResourceKey !== resourceKey) {
+    setActiveResourceKey(resourceKey);
+    setCopied(false);
+    setActiveMode(defaultMode);
+  }
+
+  // Track the content value for which the copied indicator is valid.
+  const [copiedForContent, setCopiedForContent] = useState<string | null | undefined>(content);
+  if (copiedForContent !== content) {
+    setCopiedForContent(content);
+    if (copied) setCopied(false);
+  }
+
+  // useId (not hardcoded strings) so the ids stay unique if more than one viewer
+  // is ever mounted at once — the same pattern GraphWorkspace uses for its search
+  // combobox. Hardcoded ids would collide silently in that case.
+  const baseId = useId();
+  const previewTabId = `${baseId}-tab-preview`;
+  const sourceTabId = `${baseId}-tab-source`;
+  const panelId = `${baseId}-panel`;
+
+  // Roving tabindex: the tablist is one Tab stop and arrows move focus within it.
+  // Focus is tracked separately from selection because activation is manual (see
+  // handleTabKeyDown), so a tab can hold focus without being the selected one.
+  //
+  // focusedMode is stored in a ref rather than state so that moving focus with
+  // arrow keys does NOT trigger a React re-render. A re-render here is expensive:
+  // react-markdown@10 has no internal memoisation and calls processor.parse() +
+  // processor.runSync() unconditionally on every render — measured at 385ms for a
+  // 1000-row GFM table and 1.4s at 2000 rows (#1118). Using a ref means arrow-key
+  // navigation is free of Markdown re-parses while still keeping the DOM tabIndex
+  // attributes correct via direct mutation (the same pattern used by WAI-ARIA APG
+  // keyboard examples for roving tabindex).
+  //
+  // The JSX tabIndex props use activeMode (not the ref) to satisfy the
+  // react-hooks/refs lint rule that bars ref reads during render. JSX provides the
+  // correct value on initial render and after selectMode() calls (which always keep
+  // focusedModeRef.current === activeMode at React render boundaries). A
+  // useLayoutEffect (see below) corrects any JSX overwrite that occurs when focus
+  // and selection temporarily differ during arrow navigation.
+  const focusedModeRef = useRef<"preview" | "source">(defaultMode);
+  const previewTabRef = useRef<HTMLButtonElement>(null);
+  const sourceTabRef = useRef<HTMLButtonElement>(null);
+
+  const focusTab = (mode: "preview" | "source") => {
+    focusedModeRef.current = mode;
+    // Imperatively update tabIndex on both buttons so the roving tabindex
+    // DOM state is correct without scheduling a React re-render.
+    if (previewTabRef.current) previewTabRef.current.tabIndex = mode === "preview" ? 0 : -1;
+    if (sourceTabRef.current) sourceTabRef.current.tabIndex = mode === "source" ? 0 : -1;
+    (mode === "preview" ? previewTabRef : sourceTabRef).current?.focus();
+  };
+
+  const selectMode = (mode: "preview" | "source") => {
+    // Keep the ref in sync before setActiveMode so the upcoming re-render reads
+    // the correct focusedModeRef.current when evaluating JSX tabIndex props.
+    focusedModeRef.current = mode;
+    setActiveMode(mode);
+  };
+
+  // Manual activation (APG permits it, and here it is required): arrows move
+  // focus only, Enter/Space activates via the native button click. Automatic
+  // activation would re-run the full markdown parse on every arrow keypress —
+  // measured at 385ms for a 1000-row GFM table and 1.4s at 2000 rows (#1118).
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    const next = resolveTabNavigation(focusedModeRef.current, event.key);
+    if (next === null) return;
+    event.preventDefault();
+    focusTab(next);
+  };
+
+  const copyTimeoutRef = useRef<number | undefined>(undefined);
+  useEffect(() => {
+    return () => {
+      clearTimeout(copyTimeoutRef.current);
+    };
+  }, []);
+
+  // When the viewed resource/node changes, reset focusedModeRef to match the
+  // incoming defaultMode. The render-phase setActiveMode(defaultMode) above
+  // resets React state, but refs are not state and must be updated separately.
+  // useLayoutEffect fires synchronously before paint so the ref is correct before
+  // the no-deps tabIndex-correction effect (declared next) reads it.
+  // Using resourceKey as the dep means this runs exactly once per resource change,
+  // immediately after the render that detected the change.
+  useLayoutEffect(() => {
+    focusedModeRef.current = defaultMode;
+  }, [resourceKey, defaultMode]);
+
+  // After every render, restore the DOM tabIndex to match focusedModeRef.current.
+  // This is necessary because the JSX tabIndex props derive from activeMode, which
+  // is correct for initial render and for renders triggered by selectMode(). However,
+  // when focus and selection differ (i.e. after arrow-key navigation, before Enter/Space),
+  // any unrelated re-render (copy-button click, parent update, etc.) will reconcile JSX
+  // tabIndex={activeMode === X} and overwrite the imperative tabIndex values set by
+  // focusTab(). useLayoutEffect fires synchronously after React's DOM mutations, before
+  // paint, so it corrects any such overwrite before the user sees it. It does not
+  // schedule another render — the two property writes are pure DOM mutations.
+  // No deps array: intentional. The correction must run after every render, not just mount.
+  // SSR-safe: useLayoutEffect is silently skipped on the server; the JSX tabIndex from
+  // activeMode provides the correct initial value (focusedModeRef.current === activeMode
+  // at mount). Strict Mode: runs twice on remount — both runs write the same values,
+  // no state mutation, no render triggered.
+  useLayoutEffect(() => {
+    if (previewTabRef.current) {
+      previewTabRef.current.tabIndex = focusedModeRef.current === "preview" ? 0 : -1;
+    }
+    if (sourceTabRef.current) {
+      sourceTabRef.current.tabIndex = focusedModeRef.current === "source" ? 0 : -1;
+    }
+  });
+
+  const rawContent = editor.editing
+    ? editor.session?.draft ?? ""
+    : (typeof content === "string" ? content : "");
+
+  const previewContent = useMemo(() => {
+    if (!editor.editing) return rawContent;
+    const lines = rawContent.split(/\r?\n/);
+    if (lines[0] !== "---") return rawContent;
+    const closingIndex = lines.findIndex((line, index) => index > 0 && line === "---");
+    return closingIndex < 0 ? rawContent : lines.slice(closingIndex + 1).join("\n").replace(/^\n/, "");
+  }, [editor.editing, rawContent]);
+
+  const hasContent = rawContent.trim().length > 0;
+
+  const renderedMarkdown = useMemo(
+    () => (
+      <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={MARKDOWN_COMPONENTS}>
+        {previewContent}
+      </ReactMarkdown>
+    ),
+    [previewContent],
+  );
+
+  const handleCopy = async () => {
+    if (!hasContent) return;
+    try {
+      await navigator.clipboard.writeText(rawContent);
+      clearTimeout(copyTimeoutRef.current);
+      setCopied(true);
+      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard write unavailable.
+    }
+  };
+
+  const handleEdit = async () => {
+    modeBeforeEditRef.current = activeMode;
+    selectMode("source");
+    if (!await editor.beginEdit()) {
+      selectMode(modeBeforeEditRef.current);
+    }
+  };
+
+  const handleCancel = () => {
+    editor.discard();
+    selectMode(modeBeforeEditRef.current);
+  };
+
+  const handleApply = async () => {
+    if (await editor.save()) {
+      selectMode("preview");
+    }
+  };
+
+  return (
+    <div className={className} style={viewerContainerStyle}>
+      <div style={viewerHeaderStyle}>
+        <div style={{ display: "flex", gap: 4 }} role="tablist" aria-label="Content view mode">
+          <button
+            type="button"
+            role="tab"
+            id={previewTabId}
+            ref={previewTabRef}
+            aria-selected={activeMode === "preview"}
+            aria-controls={panelId}
+            tabIndex={activeMode === "preview" ? 0 : -1}
+            onClick={() => selectMode("preview")}
+            onKeyDown={handleTabKeyDown}
+            style={{ ...tabBtnStyle, ...(activeMode === "preview" ? activeTabBtnStyle : {}) }}
+          >
+            <Eye size={12} style={{ marginRight: 5 }} aria-hidden="true" />
+            Preview
+          </button>
+          <button
+            type="button"
+            role="tab"
+            id={sourceTabId}
+            ref={sourceTabRef}
+            aria-selected={activeMode === "source"}
+            aria-controls={panelId}
+            tabIndex={activeMode === "source" ? 0 : -1}
+            onClick={() => selectMode("source")}
+            onKeyDown={handleTabKeyDown}
+            style={{ ...tabBtnStyle, ...(activeMode === "source" ? activeTabBtnStyle : {}) }}
+          >
+            <Code2 size={12} style={{ marginRight: 5 }} aria-hidden="true" />
+            Source
+          </button>
+        </div>
+
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          {hasContent && (
+            <button type="button" onClick={() => void handleCopy()} style={copyBtnStyle} title="Copy raw content">
+              {copied ? (
+                <>
+                  <Check size={12} color="#3fb950" style={{ marginRight: 4 }} aria-hidden="true" />
+                  <span style={{ color: "#3fb950", fontSize: 11 }}>Copied</span>
+                </>
+              ) : (
+                <>
+                  <Copy size={12} style={{ marginRight: 4 }} aria-hidden="true" />
+                  <span style={{ fontSize: 11 }}>Copy</span>
+                </>
+              )}
+            </button>
+          )}
+          {resource && !editing && !loading ? (
+            <button type="button" onClick={() => void handleEdit()} style={copyBtnStyle}>
+              <Pencil size={12} style={{ marginRight: 4 }} aria-hidden="true" />
+              Edit
+            </button>
+          ) : null}
+          {loading ? (
+            <button type="button" disabled style={{ ...copyBtnStyle, opacity: 0.65 }}>
+              <Loader2 size={12} className="animate-spin" style={{ marginRight: 4 }} aria-hidden="true" />
+              Loading…
+            </button>
+          ) : null}
+          {editing ? (
+            <>
+              <button type="button" onClick={handleCancel} disabled={saving} style={copyBtnStyle}>
+                <X size={12} style={{ marginRight: 4 }} aria-hidden="true" />
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleApply()}
+                disabled={saving || !dirty}
+                title={!dirty ? "Make a change before applying" : undefined}
+                style={{ ...saveBtnStyle, opacity: saving || !dirty ? 0.55 : 1 }}
+              >
+                {saving ? (
+                  <Loader2 size={12} className="animate-spin" style={{ marginRight: 4 }} aria-hidden="true" />
+                ) : (
+                  <Check size={12} style={{ marginRight: 4 }} aria-hidden="true" />
+                )}
+                {saving ? "Applying…" : "Apply"}
+              </button>
+            </>
+          ) : null}
+        </div>
+      </div>
+
+      {error ? (
+        <div id="markdown-editor-error" role="alert" style={errorStyle}>
+          <span>{error.message}</span>
+          {error.kind === "conflict" ? (
+            <button type="button" onClick={() => void editor.reloadLatest()} style={errorActionStyle}>
+              <RefreshCw size={12} style={{ marginRight: 4 }} aria-hidden="true" />
+              Reload latest
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+
+      {/* Both tabs point aria-controls at this one panel: only the active view is
+          ever rendered inside (edit/preview/source/empty), so per-tab panel ids
+          would leave the inactive tab referencing an element not in the DOM.
+          Wrapping all branches — including empty state and editing textarea —
+          keeps every aria-controls reference resolvable at all times.
+          tabIndex=0 because the panel is a scroll container (viewerBodyStyle caps
+          its height), so keyboard users need to be able to focus and scroll it.
+          aria-busy signals to assistive tech that the content is loading/saving. */}
+      <div
+        role="tabpanel"
+        id={panelId}
+        aria-labelledby={activeMode === "preview" ? previewTabId : sourceTabId}
+        aria-busy={saving || loading}
+        tabIndex={0}
+        style={viewerBodyStyle}
+      >
+        {activeMode === "source" && editing ? (
+          <textarea
+            aria-label="Markdown source"
+            aria-describedby={error ? "markdown-editor-error" : undefined}
+            aria-invalid={error?.kind === "validation" || undefined}
+            value={session?.draft ?? ""}
+            onChange={(event) => editor.changeDraft(event.target.value)}
+            disabled={saving}
+            spellCheck={false}
+            style={editorStyle}
+          />
+        ) : !hasContent ? (
+          <div style={emptyTextStyle}>No content available for this node.</div>
+        ) : activeMode === "source" ? (
+          <pre style={sourcePreStyle}>
+            <code style={sourceCodeStyle}>{rawContent}</code>
+          </pre>
+        ) : (
+          <div style={previewStyle}>{renderedMarkdown}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ─── Markdown rendering config ───────────────────────────────────── */
+
+// Both props are hoisted to module scope so they keep a stable identity across
+// renders. As inline literals they allocated a fresh plugin array and ~20 fresh
+// arrow components on every render, which made React treat every mapped tag as a
+// new element type and remount the entire rendered subtree instead of updating
+// it (issue #1118). The arrow bodies only read the style constants below at call
+// time, so declaring the map before them is safe.
+const REMARK_PLUGINS = [remarkGfm];
+
+const MARKDOWN_COMPONENTS: Components = {
+  // C-1: react-markdown passes a HAST `node` prop (the raw AST
+  // Element) to every custom component override via passNode:true.
+  // In React 19 any unknown prop spreads onto a native element are
+  // serialised as HTML attributes, producing node="[object Object]"
+  // on every rendered link. Fix: destructure `node` by name so it
+  // is explicitly discarded, then spread `...rest` to preserve all
+  // other legitimate HAST/remark-gfm attributes — e.g. the `id`,
+  // `aria-describedby`, `aria-label`, `data-footnote-ref`,
+  // `data-footnote-backref`, and `class` attrs that GFM footnotes
+  // require for correct in-page navigation and accessibility.
+  //
+  // C-2: fragment links (#anchor, GFM footnote backlinks) must
+  // navigate within the current document. External links continue
+  // to use target="_blank" with noopener noreferrer.
+  //
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  a: ({ href, children, title, node: _node, ...rest }) => {
+    if (!isSafeUrl(href)) {
+      return <span style={{ color: GRAPH_THEME.ui.text.muted, textDecoration: "line-through" }}>{children}</span>;
+    }
+    // isSafeUrl returning true guarantees href is a non-empty string.
+    const safeHref = href ?? "";
+    // Fragment links (#section, footnote backlinks like
+    // #user-content-fnref-1) are in-document anchors. Opening them
+    // in a new tab would break GFM footnote back-navigation.
+    const isFragment = safeHref.startsWith("#");
+    if (isFragment) {
+      return (
+        <a href={safeHref} title={title} style={linkStyle} {...rest}>
+          {children}
+        </a>
+      );
+    }
+    return (
+      <a href={safeHref} title={title} target="_blank" rel="noopener noreferrer" style={linkStyle} {...rest}>
+        {children}
+        <ExternalLink size={10} style={{ marginLeft: 3, verticalAlign: "middle", display: "inline" }} />
+      </a>
+    );
+  },
+  img: ({ src, alt }) => (
+    <span style={imageBadgeStyle} title={src || "Image"}>
+      <ImageIcon size={12} style={{ marginRight: 5 }} />
+      <span>Image: {alt || src || "unlabeled"}</span>
+    </span>
+  ),
+  h1: ({ children }) => <h1 style={h1Style}>{children}</h1>,
+  h2: ({ children }) => <h2 style={h2Style}>{children}</h2>,
+  h3: ({ children }) => <h3 style={h3Style}>{children}</h3>,
+  h4: ({ children }) => <h4 style={h4Style}>{children}</h4>,
+  p: ({ children }) => <p style={{ margin: "0 0 8px 0" }}>{children}</p>,
+  ul: ({ children }) => <ul style={{ margin: "0 0 8px 0", paddingLeft: 18 }}>{children}</ul>,
+  ol: ({ children }) => <ol style={{ margin: "0 0 8px 0", paddingLeft: 18 }}>{children}</ol>,
+  li: ({ children }) => <li style={{ marginBottom: 3 }}>{children}</li>,
+  blockquote: ({ children }) => <blockquote style={blockquoteStyle}>{children}</blockquote>,
+  hr: () => <hr style={{ border: "none", borderTop: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`, margin: "10px 0" }} />,
+  table: ({ children }) => (
+    <div style={{ width: "100%", overflowX: "auto", margin: "8px 0", borderRadius: 6, border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}` }}>
+      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => <thead style={{ background: "rgba(255, 255, 255, 0.04)" }}>{children}</thead>,
+  tbody: ({ children }) => <tbody>{children}</tbody>,
+  tr: ({ children }) => <tr style={{ borderBottom: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}` }}>{children}</tr>,
+  th: ({ children }) => <th style={{ padding: "6px 8px", textAlign: "left", fontWeight: 700, color: GRAPH_THEME.ui.text.strong, borderRight: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}` }}>{children}</th>,
+  td: ({ children }) => <td style={{ padding: "6px 8px", color: GRAPH_THEME.ui.text.body, borderRight: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}` }}>{children}</td>,
+  pre: ({ children }) => <pre style={preBlockStyle}>{children}</pre>,
+  // C-1: discard `node` here too — code elements are custom components
+  // and would otherwise receive node="[object Object]" in the DOM.
+  code: ({ className: codeClass, children }) => {
+    const isInline = !codeClass && typeof children === "string" && !children.includes("\n");
+    return (
+      <code style={isInline ? inlineCodeStyle : blockCodeStyle}>
+        {children}
+      </code>
+    );
+  },
+};
+
+/* ─── Styles ──────────────────────────────────────────────────────── */
+
+const viewerContainerStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  background: "rgba(255, 255, 255, 0.025)",
+  border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
+  borderRadius: 12,
+  overflow: "hidden",
+};
+
+const viewerHeaderStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 8,
+  flexWrap: "wrap",
+  padding: "6px 10px",
+  background: "rgba(0, 0, 0, 0.2)",
+  borderBottom: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
+};
+
+const tabBtnStyle: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "4px 9px",
+  borderRadius: 6,
+  border: "1px solid transparent",
+  background: "transparent",
+  color: GRAPH_THEME.ui.text.muted,
+  fontSize: 12,
+  fontWeight: 600,
+  cursor: "pointer",
+  transition: "all 150ms ease",
+};
+
+const activeTabBtnStyle: CSSProperties = {
+  background: GRAPH_THEME.ui.timeline.playheadSoft,
+  border: `1px solid ${GRAPH_THEME.ui.control.activeBorder}`,
+  color: GRAPH_THEME.ui.timeline.playhead,
+};
+
+const copyBtnStyle: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "3px 8px",
+  borderRadius: 6,
+  border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
+  background: "rgba(255, 255, 255, 0.04)",
+  color: GRAPH_THEME.ui.text.subtle,
+  fontSize: 11,
+  cursor: "pointer",
+};
+
+const saveBtnStyle: CSSProperties = {
+  ...copyBtnStyle,
+  background: GRAPH_THEME.ui.control.primaryBg,
+  border: `1px solid ${GRAPH_THEME.ui.control.primaryBorder}`,
+  color: GRAPH_THEME.ui.control.primaryText,
+  fontWeight: 700,
+};
+
+const errorStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 8,
+  padding: "8px 12px",
+  color: "#ffb4ad",
+  background: "rgba(248, 81, 73, 0.1)",
+  borderBottom: "1px solid rgba(248, 81, 73, 0.25)",
+  fontSize: 12,
+  lineHeight: 1.5,
+};
+
+const errorActionStyle: CSSProperties = {
+  ...copyBtnStyle,
+  flexShrink: 0,
+  color: "#ffb4ad",
+  border: "1px solid rgba(248, 81, 73, 0.32)",
+};
+
+const viewerBodyStyle: CSSProperties = {
+  padding: 12,
+  maxHeight: 380,
+  overflowY: "auto",
+};
+
+const editorStyle: CSSProperties = {
+  display: "block",
+  boxSizing: "border-box",
+  width: "100%",
+  minHeight: 280,
+  resize: "vertical",
+  padding: 10,
+  borderRadius: 8,
+  border: `1px solid ${GRAPH_THEME.ui.control.activeBorder}`,
+  background: "rgba(0, 0, 0, 0.3)",
+  color: GRAPH_THEME.ui.text.strong,
+  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+  fontSize: 12,
+  lineHeight: 1.6,
+};
+
+const emptyTextStyle: CSSProperties = {
+  color: GRAPH_THEME.ui.text.muted,
+  fontSize: 12,
+  lineHeight: 1.5,
+  fontStyle: "italic",
+};
+
+const sourcePreStyle: CSSProperties = {
+  margin: 0,
+  padding: 10,
+  borderRadius: 8,
+  background: "rgba(0, 0, 0, 0.3)",
+  border: "1px solid rgba(255, 255, 255, 0.05)",
+  overflowX: "auto",
+};
+
+const sourceCodeStyle: CSSProperties = {
+  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+  fontSize: 12,
+  lineHeight: 1.6,
+  color: GRAPH_THEME.ui.text.strong,
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  userSelect: "text",
+};
+
+const previewStyle: CSSProperties = {
+  color: GRAPH_THEME.ui.text.body,
+  fontSize: 13,
+  lineHeight: 1.6,
+  wordBreak: "break-word",
+};
+
+const h1Style: CSSProperties = {
+  fontSize: 16,
+  fontWeight: 700,
+  color: GRAPH_THEME.ui.text.strong,
+  marginTop: 8,
+  marginBottom: 6,
+  paddingBottom: 3,
+  borderBottom: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
+};
+
+const h2Style: CSSProperties = {
+  fontSize: 14,
+  fontWeight: 700,
+  color: GRAPH_THEME.ui.text.strong,
+  marginTop: 8,
+  marginBottom: 4,
+};
+
+const h3Style: CSSProperties = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: GRAPH_THEME.ui.text.strong,
+  marginTop: 6,
+  marginBottom: 4,
+};
+
+const h4Style: CSSProperties = {
+  fontSize: 12,
+  fontWeight: 600,
+  color: GRAPH_THEME.ui.text.strong,
+  marginTop: 4,
+  marginBottom: 2,
+};
+
+const blockquoteStyle: CSSProperties = {
+  margin: "8px 0",
+  padding: "6px 12px",
+  borderLeft: `3px solid ${GRAPH_THEME.ui.timeline.playhead}`,
+  background: "rgba(98, 226, 205, 0.05)",
+  borderRadius: "0 6px 6px 0",
+  color: GRAPH_THEME.ui.text.body,
+  fontStyle: "italic",
+};
+
+const linkStyle: CSSProperties = {
+  color: "#ff8fa0",
+  textDecoration: "underline",
+  textUnderlineOffset: "3px",
+  wordBreak: "break-all",
+};
+
+const imageBadgeStyle: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "3px 7px",
+  background: "rgba(255, 255, 255, 0.04)",
+  border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
+  borderRadius: 6,
+  color: GRAPH_THEME.ui.text.muted,
+  fontSize: 11,
+  margin: "3px 0",
+};
+
+const inlineCodeStyle: CSSProperties = {
+  fontFamily: "'JetBrains Mono', monospace",
+  fontSize: 12,
+  padding: "2px 5px",
+  borderRadius: 4,
+  background: "rgba(255, 255, 255, 0.07)",
+  color: "#ffeaed",
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+};
+
+const preBlockStyle: CSSProperties = {
+  margin: "8px 0",
+  padding: 10,
+  borderRadius: 8,
+  background: "rgba(0, 0, 0, 0.35)",
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  overflowX: "auto",
+};
+
+const blockCodeStyle: CSSProperties = {
+  fontFamily: "'JetBrains Mono', monospace",
+  fontSize: 12,
+  lineHeight: 1.5,
+  color: "#ffeaed",
+};