feat(canvas): 扩展节点 - 新增 7 种展示与加工节点并补齐上游读取基建

在已落地的节点注册表上加两层节点：展示层（Markdown / SVG / HTML / 全景）与
接入生成链的加工层（对比 / 图表 / 调色）。全部是第一方内置节点，不引入远程插件
加载，因此不涉及沙箱信任模型，也不需要把 CanvasNodeType 放开成任意字符串。

刻意保留穷尽性检查而不是改成运行时注册。全库只有 4 张按类型建的穷眉表
（NODE_DEFAULT_SIZE / NODE_SPECS / 注册表定义 / nodeContentRenderers），
让编译器强制每个新节点填满它们，比少改几个文件更值 —— 加第一个枚举成员时
编译器点出了 5 处，其中 pages/canvas/shared.tsx 是原先没编目的那一处；
换成运行时注册，那里会静默回落成「未知节点」。

两处前置基建：
- CanvasNodeGraphContext：渲染器只拿到 node、没有 connections，而加工层三个节点
  都要读上游。仿已有的 canvas-node-action-context（同一个问题：节点经
  CanvasProjectWorldLayers 渲染不便逐个透传），取上游复用
  canvas-resource-references 的 getContextResourceNodes，不另写一份。
  Provider 值必须 memo —— 每帧新对象会让所有节点跟着重渲染。
- ToolbarHandlers.onAddExtensionNode(type)：一个泛用入口，不给每种扩展节点单开
  一个 onAddXxx。菜单另开「展示与加工」分区，不挤占上方调好的四列创作网格。

SVG 与 HTML 统一走 sandbox iframe：依赖里没有 DOMPurify，手写 SVG 消毒不可靠
（script / on* / foreignObject）。SandboxedFrame 只暴露 allowScripts 布尔而不是
sandbox 取值，让「同时给 allow-same-origin」这条没有入口。

全景节点三个取舍：点击才激活 WebGL（浏览器对同时存在的上下文有硬上限，画布可以有
任意多个全景节点，自动激活必然在某个数量后整片黑）；用原生 three 而非 fiber
（需要精确 dispose，forceContextLoss 才真正释放上下文）；性能模式下只给静态预览。

调色是唯一碰生成路径的节点，照 Drawing 的先例：拖滑杆只做本地 CSS filter 预览，
落地成资源要等到生成消费它时才走 uploadResourceFile。预览与导出共用同一个
filter 字符串，两处各写一份就会「看到的和用的悄悄不一致」；未调色时直接透传源图，
省掉一次渲染与上传。ctx.filter 不受支持时明确报错而不是导出一张没调色的图。

resourceKind 与 inputKind 分开两个字段：空图片节点不是素材（不进 @ 引用），
但照样计入 imageCount。调色节点的 resourceKind 无条件返回 image —— 它的图来自
上游，按「有没有 content」判断会让它永远进不了生成输入，这是不报错的静默失效。

测试：新增 test/canvas-extension-nodes.test.ts（12 用例 / 64 断言），覆盖 7 个节点的
判据矩阵、调色参数、以及图表解析。图表解析函数刻意不抛 —— 数据来自模型输出，
非法 JSON 是常态而不是异常，抛出来会连带整个画布白屏，有 7 条断言钉这个。
测试列表是显式枚举，已把新文件加进 package.json，不加进去不会跑。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/src/components/canvas/canvas-context-menu.tsx

@@ -270,6 +270,7 @@ function AddNodeContextMenu({ parentPosition, workspaceMode, isProjectLinked, re
             onAddFrame: () => onAddNode(CanvasNodeType.Frame),
             onAddFolder,
             onAddDrawing: () => onAddNode(CanvasNodeType.Drawing),
+            onAddExtensionNode: onAddNode,
             onChooseStyle,
             onOpenDirector,
             onUpload,

web/src/components/canvas/canvas-create-menu.tsx

@@ -11,7 +11,7 @@ export type CanvasCreateCommand = {
     label: string;
     icon: ReactNode;
     badge?: string;
-    section: "node" | "project" | "resource";
+    section: "node" | "extension" | "project" | "resource";
     onClick: () => void;
 };
 
@@ -19,6 +19,7 @@ export function CanvasCreateMenu({ commands }: { commands: CanvasCreateCommand[]
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
     const projectCommands = commands.filter((command) => command.section === "project");
     const nodeCommands = commands.filter((command) => command.section === "node");
+    const extensionCommands = commands.filter((command) => command.section === "extension");
     const resourceCommands = commands.filter((command) => command.section === "resource");
 
     return (
@@ -44,6 +45,13 @@ export function CanvasCreateMenu({ commands }: { commands: CanvasCreateCommand[]
             <MenuSection title="创作节点" color={theme.node.muted} />
             <CanvasCreateCommandGrid commands={nodeCommands} variant="node" />
 
+            {extensionCommands.length ? (
+                <>
+                    <MenuSection title="展示与加工" color={theme.node.muted} spaced />
+                    <CanvasCreateCommandGrid commands={extensionCommands} variant="node" />
+                </>
+            ) : null}
+
             <MenuSection title="导入资源" color={theme.node.muted} spaced />
             <CanvasCreateCommandGrid commands={resourceCommands} variant="resource" />
         </div>

web/src/components/canvas/canvas-node-action-context.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 
-import type { CanvasNodeData } from "@/types/canvas";
+import type { CanvasNodeData, CanvasNodeMetadata } from "@/types/canvas";
 
 // 批次子图操作条（下载/创建副本/删除）与主图位下载需要调用画布级动作，
 // 但画布节点经 CanvasProjectWorldLayers 渲染、不便逐个透传 handler，
@@ -9,6 +9,8 @@ export type CanvasNodeActionContextValue = {
     download?: (node: CanvasNodeData) => void;
     duplicate?: (node: CanvasNodeData) => void;
     deleteNode?: (node: CanvasNodeData) => void;
+    /** 合并式更新节点 metadata；扩展节点（如调色）在自己的面板里改参数时用。 */
+    updateMetadata?: (nodeId: string, patch: CanvasNodeMetadata) => void;
 };
 
 export const CanvasNodeActionContext = createContext<CanvasNodeActionContextValue>({});

web/src/components/canvas/canvas-node-content.tsx

@@ -17,6 +17,13 @@ import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 import { createDefaultSubtitleStyle } from "@/types/timeline";
 import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
 import { CanvasSubtitleOverlay } from "./canvas-subtitle-overlay";
+import { MarkdownNodeContent } from "./nodes/markdown-node";
+import { ChartNodeContent } from "./nodes/chart-node";
+import { CompareNodeContent } from "./nodes/compare-node";
+import { ColorGradeNodeContent } from "./nodes/color-grade-node";
+import { HtmlNodeContent } from "./nodes/html-node";
+import { PanoramaNodeContent } from "./nodes/panorama-node";
+import { SvgNodeContent } from "./nodes/svg-node";
 
 type CanvasNodeContentProps = {
     node: CanvasNodeData;
@@ -65,6 +72,13 @@ const nodeContentRenderers = {
     [CanvasNodeType.Audio]: AudioNodeContent,
     [CanvasNodeType.Drawing]: DrawingContent,
     [CanvasNodeType.Frame]: UnknownNodeContent,
+    [CanvasNodeType.Markdown]: MarkdownNodeContent,
+    [CanvasNodeType.Svg]: SvgNodeContent,
+    [CanvasNodeType.Html]: HtmlNodeContent,
+    [CanvasNodeType.Panorama]: PanoramaNodeContent,
+    [CanvasNodeType.Compare]: CompareNodeContent,
+    [CanvasNodeType.Chart]: ChartNodeContent,
+    [CanvasNodeType.ColorGrade]: ColorGradeNodeContent,
 } satisfies Record<CanvasNodeType, (props: CanvasNodeContentProps) => ReactNode>;
 
 function DrawingContent({ node, theme, drawingProjectId }: CanvasNodeContentProps) {
@@ -418,6 +432,7 @@ function ImageContent({ node, theme, isBatchRoot, batchCount, batchExpanded, bat
     const nearViewport = useNearViewport(imageContainerRef);
     const { url, loading } = useNodeResourceUrl(node, nearViewport);
     const importedFromLibTV = node.metadata?.importSource?.provider === "libtv";
+
     return (
         <BatchFrame batchCount={isBatchRoot ? batchCount : 0} batchExpanded={batchExpanded} batchOpening={batchOpening} batchRecovering={batchRecovering} theme={theme} onToggleBatch={onToggleBatch}>
             <div ref={imageContainerRef} className="h-full w-full overflow-hidden rounded-[var(--node-radius)]">

web/src/components/canvas/canvas-node-generation.ts

@@ -4,7 +4,9 @@ import { seedanceReferenceLabel } from "@/lib/seedance-video";
 import type { ReferenceImage } from "@/types/image";
 import type { ReferenceAudio, ReferenceVideo } from "@/types/media";
 import { CanvasNodeType, type CanvasConnection, type CanvasGenerationMode, type CanvasNodeData } from "@/types/canvas";
-import { getGenerationResourceNodes } from "@/lib/canvas/canvas-resource-references";
+import { getGenerationResourceNodes, getContextResourceNodes } from "@/lib/canvas/canvas-resource-references";
+import { isNeutralColorGrade, resolveCanvasColorGradeReference } from "@/lib/canvas/canvas-color-grade";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
 import { resolveCanvasDrawingReference } from "@/lib/canvas/canvas-drawing-reference";
 import { compileCharacterReferencePrompt } from "@/lib/canvas/canvas-character-reference";
 import { nodeReferenceImage } from "@/lib/canvas/canvas-project-generation";
@@ -227,8 +229,10 @@ export function buildNodeGenerationInputs(nodeId: string, nodes: CanvasNodeData[
     return resourceNodes.flatMap((node): NodeGenerationInput[] => {
         const character = readCharacterReference(node);
         if (character) return [{ nodeId: node.id, type: "character" as const, title: node.title, character }];
-        const image = readReferenceImage(node);
-        if (image) return [{ nodeId: node.id, type: "image" as const, sourceKind: image.source?.kind, title: node.title, image }];
+        const image = readReferenceImage(node, nodes, connections);
+        // sourceKind 只是「标签用绘图N而不是参考图N」的覆盖开关，不是来源全集。
+        // 调色节点在下游就是一张普通参考图，按 image 标签即正确。
+        if (image) return [{ nodeId: node.id, type: "image" as const, sourceKind: image.source?.kind === "drawing" ? "drawing" : undefined, title: node.title, image }];
         const video = readReferenceVideo(node);
         if (video) return [{ nodeId: node.id, type: "video" as const, title: node.title, video }];
         const audio = readReferenceAudio(node);
@@ -311,6 +315,7 @@ export async function hydrateNodeGenerationContext(context: NodeGenerationContex
     let referenceImages = await Promise.all(
         context.referenceImages.map(async (image) => {
             if (image.source?.kind === "drawing") return resolveCanvasDrawingReference(projectId, image);
+            if (image.source?.kind === "colorgrade") return resolveCanvasColorGradeReference(image);
             return { ...image, dataUrl: await imageToDataUrl(image) };
         }),
     );
@@ -448,7 +453,7 @@ function generationLabel(type: NodeGenerationInput["type"] | "drawing", index: n
     return `文本${index + 1}`;
 }
 
-function readReferenceImage(node: CanvasNodeData): ReferenceImage | null {
+function readReferenceImage(node: CanvasNodeData, nodes: CanvasNodeData[], connections: CanvasConnection[]): ReferenceImage | null {
     if (node.type === CanvasNodeType.Drawing && node.metadata?.drawingId) {
         return {
             id: node.id,
@@ -463,6 +468,29 @@ function readReferenceImage(node: CanvasNodeData): ReferenceImage | null {
             },
         };
     }
+    if (node.type === CanvasNodeType.ColorGrade) {
+        // 调色节点自己不存图：源图在上游，参数在 metadata。没连线就跳过这条输入，
+        // 而不是抛错——画布上放一个还没连线的调色节点是很正常的中间状态。
+        // 判据与节点渲染保持一致（都要求上游是带 content 的图片），
+        // 否则会出现「预览里看到了、生成时却没用上」这类不报错的偏差。
+        const source = getContextResourceNodes(node.id, nodes, connections).find((item) => getNodeResourceKind(item) === "image" && item.metadata?.content);
+        const url = source?.metadata?.content;
+        if (!source || !url) return null;
+
+        const grade = node.metadata?.colorGrade;
+        // 未调色时直接透传源图，省掉一次渲染与上传（也就不占文件容量）。
+        if (!grade || isNeutralColorGrade(grade)) {
+            const passthrough = nodeReferenceImage(source);
+            return passthrough ? { ...passthrough, id: node.id, name: node.title || `调色-${node.id}` } : null;
+        }
+        return {
+            id: node.id,
+            name: node.title || `调色-${node.id}`,
+            type: "image/png",
+            dataUrl: "",
+            source: { kind: "colorgrade", url, grade },
+        };
+    }
     return nodeReferenceImage(node);
 }
 

web/src/components/canvas/canvas-node-graph-context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+
+import type { CanvasNodeData } from "@/types/canvas";
+
+// 扩展节点（对比/图表/调色等）要读自己的上游才能工作，但节点经 CanvasProjectWorldLayers
+// 渲染、CanvasNodeContentProps 里只有 node 本身，没有 nodes/connections。
+// 与 canvas-node-action-context 同一个理由：通过 Context 注入，避免改动 world-layers 的透传链。
+// 无 Provider 时静默降级为「没有上游」，节点自行显示空状态而不是崩。
+export type CanvasNodeGraphContextValue = {
+    getUpstreamNodes?: (nodeId: string) => CanvasNodeData[];
+};
+
+export const CanvasNodeGraphContext = createContext<CanvasNodeGraphContextValue>({});
+
+/** 取该节点的直接上游素材节点；无 Provider 或无上游时返回空数组。 */
+export function useUpstreamNodes(nodeId: string) {
+    const { getUpstreamNodes } = useContext(CanvasNodeGraphContext);
+    return getUpstreamNodes?.(nodeId) ?? [];
+}

web/src/components/canvas/canvas-toolbar.tsx

@@ -13,7 +13,7 @@ import { canvasDockStyle } from "@/lib/canvas/canvas-aceternity-style";
 import { canvasThemes, type CanvasBackgroundMode, type CanvasColorTheme, type CanvasTheme } from "@/lib/canvas-theme";
 import { defaultToolbarPrefs, readToolbarPrefs, resolveAddNodeMenuCommands, resolveToolbarEntries, type AddNodeMenuCommand, type ToolContext, type ToolbarHandlers, type ToolbarPrefs } from "@/lib/canvas/tool-registry";
 import { useThemeStore } from "@/stores/use-theme-store";
-import type { CanvasToolMode, CanvasWorkspaceMode } from "@/types/canvas";
+import type { CanvasNodeType, CanvasToolMode, CanvasWorkspaceMode } from "@/types/canvas";
 
 export function CanvasToolbar({
     selectedCount,
@@ -34,6 +34,7 @@ export function CanvasToolbar({
     onAddFrame,
     onAddFolder,
     onAddDrawing,
+    onAddExtensionNode,
     onOpenDirector,
     onUndo,
     onRedo,
@@ -64,6 +65,7 @@ export function CanvasToolbar({
     onAddFrame: () => void;
     onAddFolder: () => void;
     onAddDrawing: () => void;
+    onAddExtensionNode: (type: CanvasNodeType) => void;
     onOpenDirector: () => void;
     onUndo: () => void;
     onRedo: () => void;
@@ -126,6 +128,7 @@ export function CanvasToolbar({
         onAddFrame,
         onAddFolder,
         onAddDrawing,
+        onAddExtensionNode,
         onChooseStyle,
         onOpenDirector,
         onUpload,

web/src/components/canvas/nodes/chart-node.tsx

@@ -0,0 +1,124 @@
+import { ChartColumn } from "lucide-react";
+import { Bar, BarChart, CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type ChartNodeContentProps = {
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+};
+
+type ChartRow = Record<string, string | number>;
+type ParsedChart = { rows: ChartRow[]; xKey: string; series: string[] };
+
+/**
+ * 把一段文本解析成图表数据；解析不出来返回 null，由调用方显示错误态。
+ *
+ * 这个函数**必须不抛**：数据来自模型输出，非法 JSON 是常态而不是异常，
+ * 抛出来会连带整个画布白屏。
+ */
+export function parseChartSource(text: string): ParsedChart | null {
+    const trimmed = text.trim();
+    if (!trimmed) return null;
+    const rows = parseJsonRows(trimmed) ?? parseCsvRows(trimmed);
+    if (!rows?.length) return null;
+
+    const keys = Object.keys(rows[0]);
+    if (!keys.length) return null;
+    // 数值列作为系列，其余第一列作为横轴；全是数值时用行号当横轴。
+    const series = keys.filter((key) => rows.every((row) => typeof row[key] === "number"));
+    const xKey = keys.find((key) => !series.includes(key)) || "__index";
+    if (!series.length) return null;
+    if (xKey === "__index") rows.forEach((row, index) => { row.__index = index + 1; });
+    return { rows, xKey, series };
+}
+
+function parseJsonRows(text: string): ChartRow[] | null {
+    try {
+        const parsed: unknown = JSON.parse(text);
+        if (!Array.isArray(parsed)) return null;
+        const rows = parsed.filter((item): item is ChartRow => Boolean(item) && typeof item === "object" && !Array.isArray(item));
+        return rows.length ? rows.map(normalizeRow) : null;
+    } catch {
+        return null;
+    }
+}
+
+function parseCsvRows(text: string): ChartRow[] | null {
+    const lines = text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+    if (lines.length < 2) return null;
+    const header = lines[0].split(",").map((cell) => cell.trim());
+    if (header.length < 2) return null;
+    return lines.slice(1).map((line) => {
+        const cells = line.split(",").map((cell) => cell.trim());
+        return normalizeRow(Object.fromEntries(header.map((key, index) => [key, cells[index] ?? ""])));
+    });
+}
+
+/** 把看起来是数字的值转成数字，否则 recharts 会把 "12" 当类别处理。 */
+function normalizeRow(row: Record<string, unknown>): ChartRow {
+    return Object.fromEntries(Object.entries(row).map(([key, value]) => {
+        if (typeof value === "number") return [key, value];
+        const text = String(value ?? "").trim();
+        const numeric = text !== "" && Number.isFinite(Number(text));
+        return [key, numeric ? Number(text) : text];
+    }));
+}
+
+const SERIES_COLORS = ["#f59e0b", "#22c55e", "#06b6d4", "#a855f7", "#ef4444"];
+
+/**
+ * 图表节点：把上游文本（JSON 数组或 CSV）渲染成柱状图/折线图。
+ * metadata.chartKind 为 "line" 时画折线，缺省柱状。
+ */
+export function ChartNodeContent({ node, theme }: ChartNodeContentProps) {
+    const upstream = useUpstreamNodes(node.id);
+    const inherited = upstream.find((item) => getNodeResourceKind(item) === "text");
+    const source = node.metadata?.content || inherited?.metadata?.content || inherited?.metadata?.prompt || "";
+    const parsed = parseChartSource(source);
+    const asLine = node.metadata?.chartKind === "line";
+
+    if (!parsed) {
+        return (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.muted }}>
+                <ChartColumn className="size-5 opacity-60" />
+                <span style={{ fontSize: "var(--fs-label)" }}>{source.trim() ? "无法解析为图表数据（需要 JSON 数组或 CSV）" : "连接输出 JSON 数组或 CSV 的文本节点"}</span>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className="h-full w-full px-2 py-2"
+            data-canvas-no-zoom
+            style={{ color: theme.node.text }}
+            onWheel={(event) => event.stopPropagation()}
+            onMouseDown={(event) => event.stopPropagation()}
+        >
+            <ResponsiveContainer width="100%" height="100%">
+                {asLine ? (
+                    <LineChart data={parsed.rows}>
+                        <CartesianGrid stroke={theme.node.stroke} strokeDasharray="3 3" />
+                        <XAxis dataKey={parsed.xKey} tick={{ fill: theme.node.muted, fontSize: 11 }} />
+                        <YAxis tick={{ fill: theme.node.muted, fontSize: 11 }} />
+                        <Tooltip />
+                        {parsed.series.length > 1 ? <Legend /> : null}
+                        {parsed.series.map((key, index) => <Line key={key} type="monotone" dataKey={key} stroke={SERIES_COLORS[index % SERIES_COLORS.length]} dot={false} />)}
+                    </LineChart>
+                ) : (
+                    <BarChart data={parsed.rows}>
+                        <CartesianGrid stroke={theme.node.stroke} strokeDasharray="3 3" />
+                        <XAxis dataKey={parsed.xKey} tick={{ fill: theme.node.muted, fontSize: 11 }} />
+                        <YAxis tick={{ fill: theme.node.muted, fontSize: 11 }} />
+                        <Tooltip />
+                        {parsed.series.length > 1 ? <Legend /> : null}
+                        {parsed.series.map((key, index) => <Bar key={key} dataKey={key} fill={SERIES_COLORS[index % SERIES_COLORS.length]} />)}
+                    </BarChart>
+                )}
+            </ResponsiveContainer>
+        </div>
+    );
+}

web/src/components/canvas/nodes/color-grade-node.tsx

@@ -0,0 +1,93 @@
+import { Palette, RotateCcw } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { useCanvasNodeActions } from "@/components/canvas/canvas-node-action-context";
+import { colorGradeCssFilter, DEFAULT_COLOR_GRADE, isNeutralColorGrade, type CanvasColorGrade } from "@/lib/canvas/canvas-color-grade";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type ColorGradeNodeContentProps = {
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+};
+
+const SLIDERS: Array<{ key: keyof CanvasColorGrade; label: string; min: number; max: number }> = [
+    { key: "brightness", label: "亮度", min: 0, max: 200 },
+    { key: "contrast", label: "对比", min: 0, max: 200 },
+    { key: "saturate", label: "饱和", min: 0, max: 200 },
+    { key: "hueRotate", label: "色相", min: -180, max: 180 },
+];
+
+/**
+ * 调色节点：吃上游图片，本地预览调色结果，并作为图片素材喂给下游。
+ *
+ * 预览只用 CSS filter，不上传任何东西；真正落地成资源要等到生成时——
+ * 见 canvas-color-grade.ts 的 resolveCanvasColorGradeReference。拖滑杆不产生上传，
+ * 也不消耗文件容量。
+ */
+export function ColorGradeNodeContent({ node, theme }: ColorGradeNodeContentProps) {
+    const { updateMetadata } = useCanvasNodeActions();
+    const upstream = useUpstreamNodes(node.id);
+    // 判据要与 canvas-node-generation 的 readReferenceImage 完全一致，
+    // 否则会出现「预览有图、生成却没用上」这种不报错的偏差。
+    const inherited = upstream.find((item) => getNodeResourceKind(item) === "image" && item.metadata?.content);
+    const url = inherited?.metadata?.content || "";
+    const grade = node.metadata?.colorGrade || DEFAULT_COLOR_GRADE;
+
+    if (!url) {
+        return (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.muted }}>
+                <Palette className="size-5 opacity-60" />
+                <span style={{ fontSize: "var(--fs-label)" }}>连接一张图片即可调色</span>
+            </div>
+        );
+    }
+
+    const editable = Boolean(updateMetadata);
+    const update = (key: keyof CanvasColorGrade, value: number) => updateMetadata?.(node.id, { colorGrade: { ...grade, [key]: value } });
+
+    return (
+        <div className="flex h-full w-full flex-col overflow-hidden" style={{ background: theme.node.fill }}>
+            <div className="relative min-h-0 flex-1">
+                <img src={url} alt={node.title || "调色"} className="h-full w-full object-contain" draggable={false} style={{ filter: colorGradeCssFilter(grade) }} />
+                {isNeutralColorGrade(grade) ? (
+                    <span className="pointer-events-none absolute left-2 top-2 rounded bg-black/55 px-1.5 py-0.5 text-white" style={{ fontSize: "var(--fs-tiny)" }}>未调色</span>
+                ) : null}
+            </div>
+
+            {editable ? (
+                <div
+                    className="shrink-0 border-t px-2 py-1.5"
+                    data-canvas-no-zoom
+                    style={{ borderColor: theme.node.stroke }}
+                    onWheel={(event) => event.stopPropagation()}
+                    onMouseDown={(event) => event.stopPropagation()}
+                >
+                    {SLIDERS.map((slider) => (
+                        <label key={slider.key} className="flex items-center gap-2" style={{ fontSize: "var(--fs-tiny)", color: theme.node.muted }}>
+                            <span className="w-6 shrink-0">{slider.label}</span>
+                            <input
+                                type="range"
+                                className="min-w-0 flex-1"
+                                min={slider.min}
+                                max={slider.max}
+                                value={grade[slider.key]}
+                                onChange={(event) => update(slider.key, Number(event.target.value))}
+                            />
+                            <span className="w-8 shrink-0 text-right tabular-nums">{grade[slider.key]}</span>
+                        </label>
+                    ))}
+                    <button
+                        type="button"
+                        className="mt-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors hover:bg-black/5 dark:hover:bg-white/10"
+                        style={{ fontSize: "var(--fs-tiny)", color: theme.node.muted }}
+                        onClick={() => updateMetadata?.(node.id, { colorGrade: DEFAULT_COLOR_GRADE })}
+                    >
+                        <RotateCcw className="size-3" />复位
+                    </button>
+                </div>
+            ) : null}
+        </div>
+    );
+}

web/src/components/canvas/nodes/compare-node.tsx

@@ -0,0 +1,72 @@
+import { useRef, useState } from "react";
+import { Columns2 } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type CompareNodeContentProps = {
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+};
+
+/**
+ * A/B 对比节点：吃两个图片上游，中间一根滑杆左右拖动对比。
+ *
+ * 分割位置只存组件内 state，不落 metadata——它是「看的时候临时挪一下」，
+ * 不是画布内容；CanvasNodeContentProps 也只给了 onContentChange(content)，
+ * 为它另开一条写元数据的通道不值得。
+ */
+export function CompareNodeContent({ node, theme }: CompareNodeContentProps) {
+    const upstream = useUpstreamNodes(node.id);
+    const images = upstream.filter((item) => getNodeResourceKind(item) === "image");
+    const [split, setSplit] = useState(50);
+    const hostRef = useRef<HTMLDivElement | null>(null);
+    const draggingRef = useRef(false);
+
+    const before = images[0]?.metadata?.content || "";
+    const after = images[1]?.metadata?.content || "";
+
+    if (!before || !after) {
+        return (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.muted }}>
+                <Columns2 className="size-5 opacity-60" />
+                <span style={{ fontSize: "var(--fs-label)" }}>{images.length === 1 ? "再连一张图片即可对比" : "连接两张图片进行对比"}</span>
+            </div>
+        );
+    }
+
+    const moveTo = (clientX: number) => {
+        const rect = hostRef.current?.getBoundingClientRect();
+        if (!rect?.width) return;
+        setSplit(Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100)));
+    };
+
+    return (
+        <div
+            ref={hostRef}
+            className="relative h-full w-full select-none overflow-hidden"
+            data-canvas-no-zoom
+            style={{ background: theme.node.fill, cursor: "ew-resize" }}
+            onMouseDown={(event) => event.stopPropagation()}
+            onPointerDown={(event) => {
+                draggingRef.current = true;
+                event.currentTarget.setPointerCapture(event.pointerId);
+                moveTo(event.clientX);
+            }}
+            onPointerMove={(event) => { if (draggingRef.current) moveTo(event.clientX); }}
+            onPointerUp={(event) => {
+                draggingRef.current = false;
+                if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+            }}
+        >
+            <img src={after} alt="B" className="absolute inset-0 h-full w-full object-contain" draggable={false} />
+            {/* 上层按分割位置裁切，露出下层的 B */}
+            <img src={before} alt="A" className="absolute inset-0 h-full w-full object-contain" draggable={false} style={{ clipPath: `inset(0 ${100 - split}% 0 0)` }} />
+            <div className="pointer-events-none absolute inset-y-0 w-px bg-white/90 shadow-[0_0_0_1px_rgba(0,0,0,.35)]" style={{ left: `${split}%` }} />
+            <span className="pointer-events-none absolute left-2 top-2 rounded bg-black/55 px-1.5 py-0.5 text-white" style={{ fontSize: "var(--fs-tiny)" }}>A</span>
+            <span className="pointer-events-none absolute right-2 top-2 rounded bg-black/55 px-1.5 py-0.5 text-white" style={{ fontSize: "var(--fs-tiny)" }}>B</span>
+        </div>
+    );
+}

web/src/components/canvas/nodes/html-node.tsx

@@ -0,0 +1,47 @@
+import { Code } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+import { SandboxedFrame } from "./sandboxed-frame";
+
+type HtmlNodeContentProps = {
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+};
+
+/**
+ * HTML 展示节点：在沙箱 iframe 里预览 HTML。
+ *
+ * 源码取自身 metadata.content，为空时回落上游文本（与 SVG / Markdown 一致）。
+ * 自身有源码时，上游文本作为数据填进 `{{input}}`，所以「模板 + 数据」两条线可以分开接。
+ *
+ * 脚本可执行（allow-scripts），但 SandboxedFrame 结构上不允许同时给 allow-same-origin
+ * —— 否则页面能读到本源登录态。
+ */
+export function HtmlNodeContent({ node, theme }: HtmlNodeContentProps) {
+    const upstream = useUpstreamNodes(node.id);
+    const inherited = upstream.find((item) => getNodeResourceKind(item) === "text");
+    const upstreamText = inherited?.metadata?.content || inherited?.metadata?.prompt || "";
+    const own = node.metadata?.content || "";
+    // 与 SVG / Markdown 一致：自身为空时把上游文本当源码，这样「AI 写页面 → 连线 → 看效果」
+    // 不需要先把源码搬进本节点。
+    const source = own || upstreamText;
+    // 源码本身就来自上游时，{{input}} 没有第二份数据可填——替换成空串，
+    // 否则会把同一段内容再塞回自己里。
+    const input = own ? upstreamText : "";
+
+    if (!source.trim()) {
+        return (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.muted }}>
+                <Code className="size-5 opacity-60" />
+                <span style={{ fontSize: "var(--fs-label)" }}>连接输出 HTML 的文本节点</span>
+                <span style={{ fontSize: "var(--fs-tiny)" }}>源码里的 {"{{input}}"} 会替换为上游文本</span>
+            </div>
+        );
+    }
+
+    return <SandboxedFrame srcDoc={source.replaceAll("{{input}}", input)} theme={theme} allowScripts />;
+}

web/src/components/canvas/nodes/markdown-node.tsx

@@ -0,0 +1,48 @@
+import { FileText } from "lucide-react";
+
+import { AIMessageMarkdown } from "@/components/ai/ai-message-markdown";
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type MarkdownNodeContentProps = {
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+};
+
+/**
+ * Markdown 展示节点。
+ *
+ * 内容取自身 metadata.content；为空时回落到上游文本素材——这样「AI 写文档 → 连一根线 →
+ * 排版好的文档」不需要先把内容搬进本节点。上游取用统一经 CanvasNodeGraphContext，
+ * 判定文本素材复用注册表的 resourceKind，不在这里另立一套判断。
+ */
+export function MarkdownNodeContent({ node, theme }: MarkdownNodeContentProps) {
+    const upstream = useUpstreamNodes(node.id);
+    const own = node.metadata?.content || "";
+    const inherited = upstream.find((item) => getNodeResourceKind(item) === "text");
+    const source = own || inherited?.metadata?.content || inherited?.metadata?.prompt || "";
+
+    if (!source.trim()) {
+        return (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.muted }}>
+                <FileText className="size-5 opacity-60" />
+                <span style={{ fontSize: "var(--fs-label)" }}>连接文本节点，或双击编辑 Markdown</span>
+            </div>
+        );
+    }
+
+    return (
+        // 滚动区要吞掉 wheel 并标 data-canvas-no-zoom，否则滚动会被画布缩放拦走。
+        <div
+            className="h-full w-full overflow-y-auto overflow-x-hidden px-4 py-3"
+            data-canvas-no-zoom
+            style={{ color: theme.node.text }}
+            onWheel={(event) => event.stopPropagation()}
+            onMouseDown={(event) => event.stopPropagation()}
+        >
+            <AIMessageMarkdown>{source}</AIMessageMarkdown>
+        </div>
+    );
+}

web/src/components/canvas/nodes/panorama-node.tsx

@@ -0,0 +1,205 @@
+import { useEffect, useRef, useState } from "react";
+import { Globe, X } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type PanoramaNodeContentProps = {
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+    reduceMediaEffects?: boolean;
+};
+
+/**
+ * 360° 全景查看器节点：取上游图片，拖拽环视。
+ *
+ * 三个刻意的取舍：
+ * 1. **点击才激活 WebGL**。浏览器对同时存在的 WebGL 上下文有硬上限（十几个），
+ *    画布上可以有任意多个全景节点，自动激活必然在某个数量后整片黑。默认只显示平面预览，
+ *    与既有的 DeferredMediaLoad「点击加载」是同一套交互习惯。
+ * 2. **用原生 three 而不是 @react-three/fiber**。这里需要精确控制 dispose——
+ *    上下文/纹理/几何体漏一个就逼近上限，节点还会被频繁增删。
+ * 3. **性能模式下不提供激活入口**。错题本里多条崩溃出在画布高频渲染，
+ *    reduceMediaEffects 时只给静态预览。
+ */
+export function PanoramaNodeContent({ node, theme, reduceMediaEffects }: PanoramaNodeContentProps) {
+    const upstream = useUpstreamNodes(node.id);
+    const inherited = upstream.find((item) => getNodeResourceKind(item) === "image");
+    const url = node.metadata?.content || inherited?.metadata?.content || "";
+    const [active, setActive] = useState(false);
+    const [failed, setFailed] = useState(false);
+
+    // 上游换图后退出环视，避免旧上下文继续持有已被替换的纹理。
+    useEffect(() => {
+        setActive(false);
+        setFailed(false);
+    }, [url]);
+
+    if (!url) {
+        return (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.muted }}>
+                <Globe className="size-5 opacity-60" />
+                <span style={{ fontSize: "var(--fs-label)" }}>连接一张 360° 等距柱状全景图</span>
+            </div>
+        );
+    }
+
+    if (!active) {
+        return (
+            <div className="relative h-full w-full overflow-hidden" style={{ background: theme.node.fill }}>
+                <img src={url} alt={node.title || "全景"} className="h-full w-full object-cover opacity-80" draggable={false} />
+                <div className="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 px-3 py-2" style={{ background: "linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.35))", boxShadow: "0 -1px 0 rgba(0,0,0,.25)" }}>
+                    <span className="min-w-0 truncate text-white" style={{ fontSize: "var(--fs-label)", textShadow: "0 1px 3px rgba(0,0,0,.85)" }}>
+                        {failed ? "全景加载失败（图片可能不允许跨域读取）" : reduceMediaEffects ? "性能模式下仅显示预览" : "360° 全景"}
+                    </span>
+                    {reduceMediaEffects ? null : (
+                        <button
+                            type="button"
+                            className="shrink-0 rounded-[var(--r-md)] px-2 py-1 font-medium text-white outline-none transition-colors"
+                            style={{ fontSize: "var(--fs-label)", background: "rgba(0,0,0,.78)", boxShadow: "0 1px 4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.32)" }}
+                            onMouseDown={(event) => event.stopPropagation()}
+                            onClick={() => { setFailed(false); setActive(true); }}
+                        >
+                            进入环视
+                        </button>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="relative h-full w-full overflow-hidden" style={{ background: "#000" }}>
+            <PanoramaViewport url={url} onError={() => { setFailed(true); setActive(false); }} />
+            <button
+                type="button"
+                aria-label="退出环视"
+                className="absolute right-2 top-2 grid size-6 place-items-center rounded-full bg-black/70 text-white outline-none transition-colors hover:bg-black/90"
+                style={{ boxShadow: "0 1px 4px rgba(0,0,0,.5)" }}
+                onMouseDown={(event) => event.stopPropagation()}
+                onClick={() => setActive(false)}
+            >
+                <X className="size-3.5" />
+            </button>
+        </div>
+    );
+}
+
+function PanoramaViewport({ url, onError }: { url: string; onError: () => void }) {
+    const hostRef = useRef<HTMLDivElement | null>(null);
+    // onError 是内联箭头函数，每次渲染都是新引用；直接放进 effect 依赖会让
+    // 父级任何重渲染（悬停/选中/画布状态）都销毁重建 WebGL 上下文 ——
+    // 表现就是环视画面闪动、视角回到初始位置。用 ref 稳定它。
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host) return;
+        let disposed = false;
+        let frame = 0;
+        // three 体积大，按需加载，不进主包。
+        const teardown: Array<() => void> = [];
+
+        void (async () => {
+            const THREE = await import("three");
+            if (disposed) return;
+
+            const renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+            const scene = new THREE.Scene();
+            const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1100);
+
+            const loader = new THREE.TextureLoader();
+            loader.setCrossOrigin("anonymous");
+            const texture = await new Promise<InstanceType<typeof THREE.Texture> | null>((resolve) => {
+                loader.load(url, resolve, undefined, () => resolve(null));
+            });
+            if (disposed) { renderer.dispose(); return; }
+            if (!texture) { renderer.dispose(); onErrorRef.current(); return; }
+
+            texture.colorSpace = THREE.SRGBColorSpace;
+            const geometry = new THREE.SphereGeometry(500, 60, 40);
+            const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });
+            scene.add(new THREE.Mesh(geometry, material));
+            host.appendChild(renderer.domElement);
+            renderer.domElement.style.cssText = "width:100%;height:100%;display:block;cursor:grab";
+
+            let lon = 0;
+            let lat = 0;
+            let dragging = false;
+            let lastX = 0;
+            let lastY = 0;
+
+            const onPointerDown = (event: PointerEvent) => {
+                dragging = true;
+                lastX = event.clientX;
+                lastY = event.clientY;
+                renderer.domElement.setPointerCapture(event.pointerId);
+                event.stopPropagation();
+            };
+            const onPointerMove = (event: PointerEvent) => {
+                if (!dragging) return;
+                lon -= (event.clientX - lastX) * 0.18;
+                lat += (event.clientY - lastY) * 0.18;
+                lat = Math.max(-85, Math.min(85, lat));
+                lastX = event.clientX;
+                lastY = event.clientY;
+            };
+            const onPointerUp = (event: PointerEvent) => {
+                dragging = false;
+                if (renderer.domElement.hasPointerCapture(event.pointerId)) renderer.domElement.releasePointerCapture(event.pointerId);
+            };
+            // 滚轮留给画布缩放，全景不吃 wheel —— 节点里再嵌一层缩放会让手感彻底乱。
+            renderer.domElement.addEventListener("pointerdown", onPointerDown);
+            renderer.domElement.addEventListener("pointermove", onPointerMove);
+            renderer.domElement.addEventListener("pointerup", onPointerUp);
+            renderer.domElement.addEventListener("pointercancel", onPointerUp);
+
+            const resize = () => {
+                const { clientWidth, clientHeight } = host;
+                if (!clientWidth || !clientHeight) return;
+                renderer.setSize(clientWidth, clientHeight, false);
+                camera.aspect = clientWidth / clientHeight;
+                camera.updateProjectionMatrix();
+            };
+            const observer = new ResizeObserver(resize);
+            observer.observe(host);
+            resize();
+
+            const tick = () => {
+                const phi = THREE.MathUtils.degToRad(90 - lat);
+                const theta = THREE.MathUtils.degToRad(lon);
+                camera.lookAt(500 * Math.sin(phi) * Math.cos(theta), 500 * Math.cos(phi), 500 * Math.sin(phi) * Math.sin(theta));
+                renderer.render(scene, camera);
+                frame = requestAnimationFrame(tick);
+            };
+            tick();
+
+            teardown.push(() => {
+                cancelAnimationFrame(frame);
+                observer.disconnect();
+                renderer.domElement.removeEventListener("pointerdown", onPointerDown);
+                renderer.domElement.removeEventListener("pointermove", onPointerMove);
+                renderer.domElement.removeEventListener("pointerup", onPointerUp);
+                renderer.domElement.removeEventListener("pointercancel", onPointerUp);
+                renderer.domElement.remove();
+                geometry.dispose();
+                material.dispose();
+                texture.dispose();
+                // forceContextLoss 才真正释放上下文；只 dispose 在部分浏览器上仍占着配额。
+                renderer.forceContextLoss();
+                renderer.dispose();
+            });
+        })();
+
+        return () => {
+            disposed = true;
+            teardown.forEach((fn) => fn());
+        };
+    }, [url]);
+
+    return <div ref={hostRef} className="h-full w-full" data-canvas-no-zoom onMouseDown={(event) => event.stopPropagation()} />;
+}

web/src/components/canvas/nodes/sandboxed-frame.tsx

@@ -0,0 +1,41 @@
+import type { CanvasTheme } from "@/lib/canvas-theme";
+
+type SandboxedFrameProps = {
+    /** 完整的 HTML 文档字符串，作为 iframe 的 srcDoc */
+    srcDoc: string;
+    theme: CanvasTheme;
+    /**
+     * 是否允许文档内脚本执行。
+     *
+     * ⚠️ 只给 allow-scripts，**绝不同时给 allow-same-origin** —— 两者并存等于取消沙箱：
+     * 文档能拿到本源 DOM 与存储（含登录态）。这里刻意不暴露 sandbox 的完整取值，
+     * 就是为了让这条约束没有被绕过的入口。
+     */
+    allowScripts?: boolean;
+};
+
+/**
+ * 沙箱 iframe —— SVG 与 HTML 节点共用。
+ *
+ * 依赖里没有 DOMPurify，手写消毒不可靠（script / on* / foreignObject 等绕法很多），
+ * 所以两种节点都不走 innerHTML，统一塞进沙箱 iframe 渲染。
+ */
+export function SandboxedFrame({ srcDoc, theme, allowScripts = false }: SandboxedFrameProps) {
+    return (
+        <iframe
+            title="节点预览"
+            className="h-full w-full border-0"
+            sandbox={allowScripts ? "allow-scripts" : ""}
+            srcDoc={srcDoc}
+            data-canvas-no-zoom
+            style={{ background: theme.node.fill }}
+            // 指针交给文档自己处理，但按下时别让画布把它当成拖拽节点。
+            onMouseDown={(event) => event.stopPropagation()}
+        />
+    );
+}
+
+/** 把一段片段包成可渲染的最小文档；居中且不溢出节点。 */
+export function centeredFrameDocument(body: string, extraCss = "") {
+    return `<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;background:transparent}body{display:grid;place-items:center;overflow:hidden}svg,img{max-width:100%;max-height:100%}${extraCss}</style></head><body>${body}</body></html>`;
+}

web/src/components/canvas/nodes/svg-node.tsx

@@ -0,0 +1,45 @@
+import { Shapes } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+import { centeredFrameDocument, SandboxedFrame } from "./sandboxed-frame";
+
+type SvgNodeContentProps = {
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+};
+
+/** 只取到第一个 <svg> 根元素，避免上游文本里的说明文字被一起塞进文档。 */
+function extractSvgSource(text: string) {
+    const start = text.indexOf("<svg");
+    if (start < 0) return "";
+    const end = text.lastIndexOf("</svg>");
+    return end > start ? text.slice(start, end + "</svg>".length) : "";
+}
+
+/**
+ * SVG 展示节点：把 SVG 源码渲染成图形。
+ *
+ * 源码取自身 metadata.content，为空时回落上游文本素材——「让 AI 输出 SVG 代码 → 连线 → 看图」
+ * 是这个节点存在的理由。渲染走沙箱 iframe（见 sandboxed-frame），不给脚本权限。
+ */
+export function SvgNodeContent({ node, theme }: SvgNodeContentProps) {
+    const upstream = useUpstreamNodes(node.id);
+    const inherited = upstream.find((item) => getNodeResourceKind(item) === "text");
+    const raw = node.metadata?.content || inherited?.metadata?.content || inherited?.metadata?.prompt || "";
+    const svg = extractSvgSource(raw);
+
+    if (!svg) {
+        return (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.muted }}>
+                <Shapes className="size-5 opacity-60" />
+                <span style={{ fontSize: "var(--fs-label)" }}>{raw.trim() ? "上游内容里没有找到 <svg> 源码" : "连接输出 SVG 的文本节点"}</span>
+            </div>
+        );
+    }
+
+    return <SandboxedFrame srcDoc={centeredFrameDocument(svg)} theme={theme} />;
+}