@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/blocks/mermaid/MermaidBlock.js

@@ -0,0 +1,386 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@ai-matrx/design-system/controls";
+import { Suspense, lazy, useEffect, useState } from "react";
+import {
+  Check,
+  Copy,
+  Code2,
+  Download,
+  Expand,
+  FolderUp,
+  Maximize2,
+  Palette,
+  Zap
+} from "lucide-react";
+import { toast } from "../../../host/toast.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@ai-matrx/design-system";
+import MatrxMiniLoader from "../../../utils/lifted/MatrxMiniLoader.js";
+import { SimpleTooltip } from "../../../utils/lifted/Tooltip.js";
+import { useCanvas } from "../../../host/app-bindings.js";
+import { useOpenArtifactInCanvas } from "../../../host/app-bindings.js";
+import { isMaterializedArtifactId } from "../../../utils/lifted/artifactId.js";
+import { useCanvasOpenGuard } from "../../../host/app-bindings.js";
+import { useThemeMode } from "../../../host/app-bindings.js";
+import { useMermaidPreferences, useSetMermaidPreferences, useDiagramAgents, createMermaidEditorScope, hostMermaidEditorManifest } from "../../../host/app-bindings.js";
+import { cn } from "@ai-matrx/design-system";
+import { NonEditableContextMenu } from "../../../host/app-bindings.js";
+import {
+  getCatalogEntry,
+  getFeaturedCatalogEntries
+} from "../../../mermaid/catalog.js";
+import {
+  detectDiagramType,
+  extractMermaidTitle
+} from "../../../mermaid/diagram-type.js";
+import {
+  copyMermaidSource,
+  downloadMermaidPng,
+  downloadMermaidSource,
+  downloadMermaidSvg,
+  saveMermaidToWorkspace
+} from "../../../mermaid/export.js";
+import { MermaidRenderer } from "../../../mermaid/MermaidRenderer.js";
+import { MermaidFullscreen } from "../../../mermaid/MermaidFullscreen.js";
+import { preloadMermaid } from "../../../mermaid/runtime.js";
+import {
+  resolveMermaidTheme,
+  DEFAULT_MERMAID_PREFERENCES
+} from "../../../mermaid/types.js";
+const CodeBlock = lazy(
+  () => import("../../../code-block/CodeBlock.js")
+);
+const THEME_CHOICES = [
+  "auto",
+  "default",
+  "dark",
+  "forest",
+  "neutral",
+  "base"
+];
+const LOOK_CHOICES = ["classic", "handDrawn"];
+const LAYOUT_CHOICES = ["dagre", "elk"];
+const MermaidBlock = ({
+  content,
+  serverData,
+  metadata,
+  isStreamActive = false,
+  conversationId,
+  messageId,
+  taskId,
+  className,
+  artifactId,
+  artifactVersion
+}) => {
+  const setMermaidPreferences = useSetMermaidPreferences();
+  const { open } = useCanvas();
+  const { openArtifact } = useOpenArtifactInCanvas();
+  const { isCanvasAvailable } = useCanvasOpenGuard();
+  const appMode = useThemeMode();
+  const userPrefs = { ...DEFAULT_MERMAID_PREFERENCES, ...useMermaidPreferences() };
+  const source = serverData?.source ?? content ?? "";
+  const artifactMeta = metadata?.mermaid ?? metadata ?? {};
+  const [localOptions, setLocalOptions] = useState({});
+  const effective = {
+    theme: localOptions.theme ?? artifactMeta.theme ?? userPrefs.theme,
+    look: localOptions.look ?? artifactMeta.look ?? userPrefs.look,
+    layout: localOptions.layout ?? artifactMeta.layout ?? userPrefs.layout
+  };
+  const renderOptions = {
+    theme: resolveMermaidTheme(effective.theme, appMode),
+    look: effective.look,
+    layout: effective.layout
+  };
+  const [showSource, setShowSource] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [svgEl, setSvgEl] = useState(null);
+  const [frameMaxHeight, setFrameMaxHeight] = useState(520);
+  useEffect(() => {
+    const recompute = () => setFrameMaxHeight(
+      Math.max(320, Math.min(720, Math.round(window.innerHeight * 0.6)))
+    );
+    recompute();
+    window.addEventListener("resize", recompute);
+    return () => window.removeEventListener("resize", recompute);
+  }, []);
+  useEffect(() => {
+    preloadMermaid();
+  }, []);
+  const diagramType = detectDiagramType(source);
+  const catalog = getCatalogEntry(diagramType);
+  const title = serverData?.title ?? extractMermaidTitle(source) ?? artifactMeta.title ?? null;
+  const Icon = catalog.icon;
+  const currentSvg = () => svgEl?.outerHTML ?? null;
+  const handleCopy = async () => {
+    await copyMermaidSource(source);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  const handleSaveToWorkspace = async () => {
+    const svg = currentSvg();
+    if (!svg) {
+      toast.error("Nothing rendered to save yet");
+      return;
+    }
+    try {
+      await saveMermaidToWorkspace({ svg, source, title });
+      toast.success("Saved to your files (Diagrams folder)");
+    } catch (err) {
+      console.error("[MermaidBlock] save to workspace failed", err);
+      toast.error("Could not save the diagram to your files");
+    }
+  };
+  const handleOpenCanvas = (aiAgent) => {
+    const extras = {
+      // Chat right-click -> "Edit with <agent>": land in the workbench with
+      // the AI rail open + the diagram-scoped agent preselected, so the
+      // agent's result flows through the workbench's normal apply/version
+      // pipeline (APPLY_EXTERNAL_SOURCE -> saved as a new version).
+      ...aiAgent ? {
+        openAiRail: true,
+        aiAgentId: aiAgent.agentId,
+        aiAgentName: aiAgent.name
+      } : {},
+      mermaid: {
+        diagramType,
+        title: title ?? void 0,
+        theme: effective.theme,
+        look: effective.look,
+        layout: effective.layout
+      }
+    };
+    if (isMaterializedArtifactId(artifactId)) {
+      void openArtifact({
+        canvasType: "mermaid",
+        title: title ?? catalog.label,
+        content: source,
+        artifactId,
+        messageId,
+        conversationId,
+        metadata: extras
+      });
+      return;
+    }
+    open({
+      type: "mermaid",
+      data: source,
+      metadata: {
+        title: title ?? catalog.label,
+        sourceMessageId: messageId,
+        sourceTaskId: taskId || (messageId ? `mermaid:${messageId}` : void 0),
+        canvasItemId: artifactId,
+        conversationId,
+        ...extras
+      }
+    });
+  };
+  const setOption = (key, value) => setLocalOptions((prev) => ({ ...prev, [key]: value }));
+  const diagramAgents = useDiagramAgents();
+  const getApplicationScope = () => createMermaidEditorScope({
+    content: source,
+    diagram_source: source,
+    diagram_type: diagramType,
+    diagram_title: title ?? void 0,
+    editor_mode: "chat-block",
+    validation_state: "unknown",
+    available_diagram_types: getFeaturedCatalogEntries().map((e) => e.type),
+    canvas_item_id: artifactId,
+    version: artifactVersion,
+    conversation_id: conversationId
+  });
+  const diagramSections = !isStreamActive && isCanvasAvailable && diagramAgents.length > 0 ? [
+    {
+      id: "diagram-agents",
+      label: "Diagram",
+      items: diagramAgents.map((agent) => ({
+        kind: "item",
+        id: `diagram-agent-${agent.agentId}`,
+        label: `Edit with ${agent.name}`,
+        icon: Zap,
+        onSelect: () => handleOpenCanvas(agent)
+      }))
+    }
+  ] : [];
+  return /* @__PURE__ */ jsx(
+    NonEditableContextMenu,
+    {
+      sourceFeature: "chat",
+      surfaceName: hostMermaidEditorManifest()?.surfaceName ?? "mermaid-editor",
+      getApplicationScope,
+      contentSource: artifactId ? { type: "artifact", artifactId } : void 0,
+      extraSections: diagramSections,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "my-3 overflow-hidden rounded-lg border border-border bg-card",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-3 py-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
+                /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title ?? catalog.label }),
+                title && /* @__PURE__ */ jsx("span", { className: "hidden shrink-0 text-xs text-muted-foreground sm:inline", children: catalog.label }),
+                artifactVersion && artifactVersion > 1 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 rounded border border-border bg-muted px-1 py-px text-[10px] text-muted-foreground", children: [
+                  "v",
+                  artifactVersion
+                ] }) : null,
+                isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "drawing\u2026" })
+              ] }),
+              !isStreamActive && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+                /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                  /* @__PURE__ */ jsx(SimpleTooltip, { text: "Diagram style", children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Palette, {}), "aria-label": "Diagram style" }) }) }),
+                  /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [
+                    /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Theme" }),
+                    THEME_CHOICES.map((theme) => /* @__PURE__ */ jsxs(
+                      DropdownMenuItem,
+                      {
+                        onClick: () => setOption("theme", theme),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "flex-1 capitalize", children: theme }),
+                          effective.theme === theme && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+                        ]
+                      },
+                      theme
+                    )),
+                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                    /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Style" }),
+                    LOOK_CHOICES.map((look) => /* @__PURE__ */ jsxs(
+                      DropdownMenuItem,
+                      {
+                        onClick: () => setOption("look", look),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "flex-1", children: look === "handDrawn" ? "Hand-drawn" : "Classic" }),
+                          effective.look === look && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+                        ]
+                      },
+                      look
+                    )),
+                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                    /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Layout" }),
+                    LAYOUT_CHOICES.map((layout) => /* @__PURE__ */ jsxs(
+                      DropdownMenuItem,
+                      {
+                        onClick: () => setOption("layout", layout),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "flex-1 uppercase", children: layout }),
+                          effective.layout === layout && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+                        ]
+                      },
+                      layout
+                    )),
+                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                    /* @__PURE__ */ jsx(
+                      DropdownMenuItem,
+                      {
+                        onClick: () => {
+                          setMermaidPreferences(effective);
+                          toast.success("Saved as your default diagram style");
+                        },
+                        children: "Save as my default"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                  /* @__PURE__ */ jsx(SimpleTooltip, { text: "Export diagram", children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Download, {}), "aria-label": "Export diagram" }) }) }),
+                  /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+                    /* @__PURE__ */ jsx(
+                      DropdownMenuItem,
+                      {
+                        onClick: () => {
+                          const svg = currentSvg();
+                          if (svg) downloadMermaidSvg(svg, title);
+                          else toast.error("Nothing rendered yet");
+                        },
+                        children: "Download SVG"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      DropdownMenuItem,
+                      {
+                        onClick: async () => {
+                          const svg = currentSvg();
+                          if (!svg) {
+                            toast.error("Nothing rendered yet");
+                            return;
+                          }
+                          try {
+                            await downloadMermaidPng(svg, title);
+                          } catch (err) {
+                            console.error("[MermaidBlock] PNG export failed", err);
+                            toast.error("PNG export failed");
+                          }
+                        },
+                        children: "Download PNG"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      DropdownMenuItem,
+                      {
+                        onClick: () => downloadMermaidSource(source, title),
+                        children: "Download source (.mmd)"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                    /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleSaveToWorkspace, children: [
+                      /* @__PURE__ */ jsx(FolderUp, { className: "mr-1.5 h-3.5 w-3.5" }),
+                      "Save to my files"
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(SimpleTooltip, { text: copied ? "Copied" : "Copy diagram source", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), "aria-label": "Copy diagram source", onClick: handleCopy }) }),
+                /* @__PURE__ */ jsx(SimpleTooltip, { text: showSource ? "Hide source" : "Show source", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", pressed: showSource, icon: /* @__PURE__ */ jsx(Code2, {}), "aria-label": showSource ? "Hide source" : "Show source", onClick: () => setShowSource((v) => !v) }) }),
+                /* @__PURE__ */ jsx(SimpleTooltip, { text: "View fullscreen", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Expand, {}), "aria-label": "View fullscreen", onClick: () => setFullscreen(true) }) }),
+                isCanvasAvailable && /* @__PURE__ */ jsx(SimpleTooltip, { text: "Open in canvas", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    "aria-label": "Open in canvas",
+                    onClick: () => handleOpenCanvas(),
+                    variant: "quiet",
+                    icon: /* @__PURE__ */ jsx(Maximize2, {}),
+                    children: "Canvas"
+                  }
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              MermaidRenderer,
+              {
+                source,
+                options: renderOptions,
+                isStreamActive,
+                onSvgMounted: setSvgEl,
+                viewportMaxHeight: frameMaxHeight
+              }
+            ),
+            showSource && !isStreamActive && /* @__PURE__ */ jsx("div", { className: "border-t border-border", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(MatrxMiniLoader, {}), children: /* @__PURE__ */ jsx(CodeBlock, { showSource: true, code: source, language: "mermaid", fontSize: 13 }) }) }),
+            fullscreen && /* @__PURE__ */ jsx(
+              MermaidFullscreen,
+              {
+                source,
+                options: renderOptions,
+                title: title ?? catalog.label,
+                onClose: () => setFullscreen(false)
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var MermaidBlock_default = MermaidBlock;
+export {
+  MermaidBlock_default as default
+};

package/dist/display/blocks/search-replace/SearchReplaceBlock.d.ts

@@ -0,0 +1,50 @@
+/**
+ * SearchReplaceBlock — Content Block for SEARCH/REPLACE instructions
+ *
+ * Rendered when the server sends a `content_block` event with type "search_replace".
+ *
+ * Supports two render modes:
+ *   1. Server-processed: `serverData` carries pre-parsed { search, replace, … }
+ *   2. Streaming/fallback: raw `content` string is delegated to StreamingDiffBlock
+ *
+ * When `isStreamActive` is true:
+ *   - Phase 1 (search buffering): shows "Analyzing code…" loader
+ *   - Phase 2 (replace streaming): shows replacement code with GENERATING badge
+ *   - Phase 3 (both complete): collapses into a diff view
+ * When `isStreamActive` is false (history / stored message):
+ *   - Renders final collapsed diff view immediately
+ */
+import React from "react";
+export interface SearchReplaceBlockData {
+    /** The code / text to find (exact). */
+    search: string;
+    /** The replacement code / text. */
+    replace: string;
+    /** True once the SEARCH section has finished streaming. */
+    searchComplete: boolean;
+    /** True once the REPLACE section has finished streaming. */
+    replaceComplete: boolean;
+    /** True when both sections are complete. */
+    isComplete: boolean;
+    /** Source language for syntax highlighting (e.g. "typescript"). */
+    language?: string;
+}
+export interface SearchReplaceBlockProps {
+    /**
+     * Pre-parsed structured data from the server.
+     * When present, the component renders from this directly.
+     */
+    serverData?: SearchReplaceBlockData | Record<string, unknown>;
+    /**
+     * Raw streaming content string (fallback when serverData is absent).
+     * Must be the full text content of a SEARCH/REPLACE block including delimiters.
+     */
+    content?: string;
+    /** Whether the block is still actively streaming. */
+    isStreamActive?: boolean;
+    /** Source language for syntax highlighting. Defaults to "typescript". */
+    language?: string;
+    className?: string;
+}
+export declare const SearchReplaceBlock: React.FC<SearchReplaceBlockProps>;
+export default SearchReplaceBlock;

package/dist/display/blocks/search-replace/SearchReplaceBlock.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { SearchReplaceDiffRenderer } from "../../chat-markdown/diff-blocks/renderers/SearchReplaceDiffRenderer.js";
+import { StreamingDiffBlock } from "../../chat-markdown/diff-blocks/StreamingDiffBlock.js";
+import { DiffLoadingIndicator } from "../../chat-markdown/diff-blocks/DiffLoadingIndicator.js";
+import { cn } from "@ai-matrx/design-system";
+const SearchReplaceBlock = ({
+  serverData,
+  content,
+  isStreamActive = false,
+  language = "typescript",
+  className
+}) => {
+  if (serverData && typeof serverData === "object" && "search" in serverData) {
+    const data = serverData;
+    const effectiveLanguage = data.language ?? language;
+    if (!data.search && !data.replace) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-lg border border-neutral-200 dark:border-neutral-700 bg-muted/30",
+            className
+          ),
+          children: /* @__PURE__ */ jsx(DiffLoadingIndicator, { message: "Preparing code changes\u2026" })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SearchReplaceDiffRenderer,
+      {
+        data: {
+          search: data.search ?? "",
+          replace: data.replace ?? "",
+          searchComplete: data.searchComplete ?? !isStreamActive,
+          replaceComplete: data.replaceComplete ?? !isStreamActive,
+          isComplete: data.isComplete ?? !isStreamActive
+        },
+        language: effectiveLanguage,
+        isStreamActive,
+        className
+      }
+    );
+  }
+  if (content) {
+    return /* @__PURE__ */ jsx(
+      StreamingDiffBlock,
+      {
+        content,
+        language,
+        isStreamActive,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-neutral-200 dark:border-neutral-700 bg-muted/30",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(DiffLoadingIndicator, { message: "Waiting for changes\u2026" })
+    }
+  );
+};
+var SearchReplaceBlock_default = SearchReplaceBlock;
+export {
+  SearchReplaceBlock,
+  SearchReplaceBlock_default as default
+};

package/dist/display/blocks/svg/SvgBlock.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface SvgBlockProps {
+    content?: string;
+    isStreamActive?: boolean;
+    className?: string;
+}
+export declare const SvgBlock: React.FC<SvgBlockProps>;
+export default SvgBlock;

package/dist/display/blocks/svg/SvgBlock.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Check, Copy, Download, Expand, Image as ImageIcon, X } from "lucide-react";
+import { toast } from "../../../host/toast.js";
+import { Skeleton } from "@ai-matrx/design-system";
+import SandboxedHtml from "../common/SandboxedHtml.js";
+import { cn } from "@ai-matrx/design-system";
+import { Button } from "@ai-matrx/design-system/controls";
+function readSvgMeta(svg) {
+  let aspect = 16 / 9;
+  const viewBox = /viewBox\s*=\s*["']\s*[\d.+-]+\s+[\d.+-]+\s+([\d.]+)\s+([\d.]+)\s*["']/i.exec(svg);
+  if (viewBox) {
+    const w = parseFloat(viewBox[1]);
+    const h = parseFloat(viewBox[2]);
+    if (w > 0 && h > 0) aspect = w / h;
+  } else {
+    const w = /\bwidth\s*=\s*["']?([\d.]+)/i.exec(svg);
+    const h = /\bheight\s*=\s*["']?([\d.]+)/i.exec(svg);
+    if (w && h && +w[1] > 0 && +h[1] > 0) aspect = +w[1] / +h[1];
+  }
+  const titleEl = /<title[^>]*>([\s\S]*?)<\/title>/i.exec(svg);
+  const ariaLabel = /<svg[^>]*\saria-label\s*=\s*["']([^"']+)["']/i.exec(svg);
+  const title = (titleEl?.[1] ?? ariaLabel?.[1] ?? "").trim() || null;
+  return { aspect, title };
+}
+function toSrcDoc(svg) {
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>html,body{margin:0;padding:0;height:100%;background:transparent;overflow:hidden}svg{display:block;width:100%;height:100%}</style></head><body>${svg}</body></html>`;
+}
+const SvgBlock = ({ content = "", isStreamActive = false, className }) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const svg = content.trim();
+  const { aspect, title } = useMemo(() => readSvgMeta(svg), [svg]);
+  const srcDoc = useMemo(() => toSrcDoc(svg), [svg]);
+  const [copied, setCopied] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await copyText(svg);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error("Couldn't copy the SVG");
+    }
+  };
+  const handleDownload = () => {
+    try {
+      const blob = new Blob([svg], { type: "image/svg+xml" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${(title ?? "illustration").replace(/[^\w-]+/g, "-").toLowerCase()}.svg`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      toast.error("Couldn't download the SVG");
+    }
+  };
+  const hasSvg = /<svg[\s>]/i.test(svg);
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-3 overflow-hidden rounded-lg border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title ?? "Illustration" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden shrink-0 text-xs text-muted-foreground sm:inline", children: "SVG" }),
+        isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "drawing\u2026" })
+      ] }),
+      !isStreamActive && hasSvg && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx(IconBtn, { label: copied ? "Copied" : "Copy SVG source", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx(IconBtn, { label: "Download SVG", onClick: handleDownload, children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx(IconBtn, { label: "View fullscreen", onClick: () => setFullscreen(true), children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-3", children: isStreamActive || !hasSvg ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", "aria-busy": "true", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full", style: { aspectRatio: `${aspect}`, maxHeight: "70dvh" }, children: /* @__PURE__ */ jsx(SandboxedHtml, { html: srcDoc, title: title ?? "SVG illustration", height: "100%", className: "rounded-md" }) }) }),
+    fullscreen && /* @__PURE__ */ jsx(SvgFullscreen, { srcDoc, title, onClose: () => setFullscreen(false) })
+  ] });
+};
+function IconBtn({ label, onClick, children }) {
+  return /* @__PURE__ */ jsx(Button, { variant: "quiet", "aria-label": label, title: label, onClick, children });
+}
+function SvgFullscreen({ srcDoc, title, onClose }) {
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-[120] flex flex-col bg-background/98 backdrop-blur-sm",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title ?? "Illustration (fullscreen)",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-2 pt-safe", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title ?? "Illustration" }),
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), "aria-label": "Exit fullscreen", title: "Exit fullscreen (Esc)", onClick: onClose })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 p-4", onClick: (e) => e.target === e.currentTarget && onClose(), children: /* @__PURE__ */ jsx(SandboxedHtml, { html: srcDoc, title: title ?? "SVG illustration", height: "100%" }) })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var SvgBlock_default = SvgBlock;
+export {
+  SvgBlock,
+  SvgBlock_default as default
+};