feat(markdown): add fullscreen lightbox for mermaid diagrams

A sandbox="" iframe cannot run scripts, so users had no way to zoom or
pan rendered Mermaid diagrams beyond browser scrolling. Add a hover
toolbar with a fullscreen button that opens a portal-based lightbox
showing the same diagram scaled to 90vw x 90vh, while preserving the
sandbox isolation (the lightbox iframe is also sandbox=""). ESC or
clicking the backdrop closes the lightbox.

Co-authored-by: multica-agent <github@multica.ai>

packages/views/editor/content-editor.css

@@ -208,6 +208,7 @@
   margin: 0.75rem 0;
   overflow-x: auto;
   padding: 1rem;
+  position: relative;
 }
 
 .rich-text-editor .mermaid-diagram-frame {
@@ -228,6 +229,62 @@
   margin-bottom: 0;
 }
 
+/* Mermaid toolbar — dark pill, top-right corner, appears on hover */
+.rich-text-editor .mermaid-diagram-toolbar {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  gap: 1px;
+  padding: 0.25rem;
+  background: color-mix(in srgb, black 75%, transparent);
+  backdrop-filter: blur(8px);
+  border-radius: var(--radius);
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 1;
+}
+
+.rich-text-editor .mermaid-diagram:hover .mermaid-diagram-toolbar,
+.rich-text-editor .mermaid-diagram-toolbar:focus-within {
+  opacity: 1;
+}
+
+.rich-text-editor .mermaid-diagram-toolbar button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: calc(var(--radius) - 2px);
+  color: white;
+  transition: background 0.15s;
+}
+
+.rich-text-editor .mermaid-diagram-toolbar button:hover {
+  background: color-mix(in srgb, white 15%, transparent);
+}
+
+/* Mermaid lightbox — full-screen preview (ESC or click backdrop to close) */
+.mermaid-diagram-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, black 80%, transparent);
+  cursor: zoom-out;
+}
+
+.mermaid-diagram-lightbox-frame {
+  border: 0;
+  width: 90vw;
+  height: 90vh;
+  background: transparent;
+  cursor: default;
+}
+
 /* Syntax highlighting — lowlight (hljs) */
 .rich-text-editor .hljs-keyword,
 .rich-text-editor .hljs-selector-tag,

packages/views/editor/readonly-content.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { render, waitFor } from "@testing-library/react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
 
 vi.mock("@multica/core/paths", () => ({
   useWorkspacePaths: () => ({
@@ -138,4 +138,37 @@ describe("ReadonlyContent Mermaid rendering", () => {
       }),
     );
   });
+
+  it("opens a fullscreen lightbox when the toolbar button is clicked", async () => {
+    const { container } = render(
+      <ReadonlyContent
+        content={["```mermaid", "graph LR", "  A[Start] --> B[Done]", "```"].join("\n")}
+      />,
+    );
+
+    const button = await waitFor(() => {
+      const found = container.querySelector<HTMLButtonElement>(
+        ".mermaid-diagram-toolbar button",
+      );
+      expect(found).not.toBeNull();
+      return found!;
+    });
+
+    expect(document.querySelector(".mermaid-diagram-lightbox")).toBeNull();
+
+    fireEvent.click(button);
+
+    const lightboxFrame = document.querySelector<HTMLIFrameElement>(
+      ".mermaid-diagram-lightbox-frame",
+    );
+    expect(lightboxFrame).not.toBeNull();
+    expect(lightboxFrame?.getAttribute("sandbox")).toBe("");
+    expect(lightboxFrame?.srcdoc).toContain("mock diagram");
+    expect(lightboxFrame?.srcdoc).toContain("max-height: 100%");
+
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => {
+      expect(document.querySelector(".mermaid-diagram-lightbox")).toBeNull();
+    });
+  });
 });

packages/views/editor/readonly-content.tsx

@@ -17,6 +17,7 @@
  */
 
 import { isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import ReactMarkdown, {
   defaultUrlTransform,
   type Components,
@@ -148,6 +149,12 @@ function buildSandboxedMermaidDocument(svg: string, host: HTMLElement | null): s
   return `<!doctype html><html><head><style>:root { ${cssVariables} } body { margin: 0; display: flex; justify-content: center; background: transparent; } svg { max-width: 100%; height: auto; }</style></head><body>${svg}</body></html>`;
 }
 
+function buildExpandedMermaidDocument(svg: string, host: HTMLElement | null): string {
+  const cssVariables = getSandboxCssVariables(host);
+
+  return `<!doctype html><html><head><style>:root { ${cssVariables} } html, body { width: 100%; height: 100%; } body { margin: 0; display: flex; align-items: center; justify-content: center; background: transparent; } svg { max-width: 100%; max-height: 100%; width: auto; height: auto; }</style></head><body>${svg}</body></html>`;
+}
+
 function useThemeVersion() {
   const [themeVersion, setThemeVersion] = useState(0);
 
@@ -286,6 +293,41 @@ function ReadonlyLink({
   );
 }
 
+function MermaidLightbox({
+  srcDoc,
+  onClose,
+}: {
+  srcDoc: string;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      className="mermaid-diagram-lightbox"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Mermaid diagram fullscreen view"
+      onClick={onClose}
+    >
+      <iframe
+        className="mermaid-diagram-lightbox-frame"
+        sandbox=""
+        srcDoc={srcDoc}
+        title="Mermaid diagram fullscreen"
+        onClick={(e) => e.stopPropagation()}
+      />
+    </div>,
+    document.body,
+  );
+}
+
 function MermaidDiagram({ chart }: { chart: string }) {
   const reactId = useId();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -295,8 +337,10 @@ function MermaidDiagram({ chart }: { chart: string }) {
   );
   const themeVersion = useThemeVersion();
   const [sandboxedDocument, setSandboxedDocument] = useState<string | null>(null);
+  const [expandedDocument, setExpandedDocument] = useState<string | null>(null);
   const [layout, setLayout] = useState<MermaidLayout>({});
   const [error, setError] = useState<string | null>(null);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
@@ -305,6 +349,7 @@ function MermaidDiagram({ chart }: { chart: string }) {
       try {
         setError(null);
         setSandboxedDocument(null);
+        setExpandedDocument(null);
         setLayout({});
         const mermaid = await getMermaid();
         mermaid.initialize({
@@ -319,6 +364,9 @@ function MermaidDiagram({ chart }: { chart: string }) {
           setSandboxedDocument(
             buildSandboxedMermaidDocument(renderedSvg, containerRef.current),
           );
+          setExpandedDocument(
+            buildExpandedMermaidDocument(renderedSvg, containerRef.current),
+          );
         }
       } catch (err) {
         if (!cancelled) {
@@ -348,16 +396,34 @@ function MermaidDiagram({ chart }: { chart: string }) {
   return (
     <div ref={containerRef} className="mermaid-diagram" aria-label="Mermaid diagram">
       {sandboxedDocument ? (
-        <iframe
-          className="mermaid-diagram-frame"
-          sandbox=""
-          srcDoc={sandboxedDocument}
-          style={{
-            height: layout.height ? `${layout.height}px` : undefined,
-            width: layout.width ? `${layout.width}px` : undefined,
-          }}
-          title="Mermaid diagram"
-        />
+        <>
+          <iframe
+            className="mermaid-diagram-frame"
+            sandbox=""
+            srcDoc={sandboxedDocument}
+            style={{
+              height: layout.height ? `${layout.height}px` : undefined,
+              width: layout.width ? `${layout.width}px` : undefined,
+            }}
+            title="Mermaid diagram"
+          />
+          <div className="mermaid-diagram-toolbar">
+            <button
+              type="button"
+              onClick={() => setLightboxOpen(true)}
+              title="Open fullscreen"
+              aria-label="Open Mermaid diagram fullscreen"
+            >
+              <Maximize2 className="size-3.5" />
+            </button>
+          </div>
+          {lightboxOpen && expandedDocument && (
+            <MermaidLightbox
+              srcDoc={expandedDocument}
+              onClose={() => setLightboxOpen(false)}
+            />
+          )}
+        </>
       ) : (
         <div className="mermaid-diagram-loading">Rendering diagram…</div>
       )}