From e921deac741187971fab2ede4ebe2e72d1cdf296 Mon Sep 17 00:00:00 2001
From: Codex <codex@local.invalid>
Date: Sat, 19 Sep 2026 14:25:24 +0800
Subject: [PATCH] feat: add list mode for AI-powered batch table generation

- Add text/list toggle in prompt panel
- List mode: AI analyzes connected images + prompt, outputs structured JSON table
- Batch table node renders AI-generated text columns as read-only content
- Column names and row count determined by AI (3-6 columns, N rows)
---
 .../canvas/canvas-batch-table-node.tsx        | 1167 +--
 .../canvas/canvas-node-prompt-panel.tsx       | 2250 +++---
 web/src/pages/canvas/list-mode-generator.ts   |  204 +
 web/src/pages/canvas/project.tsx              | 6461 +++++++++--------
 web/src/types/canvas.ts                       | 1176 +--
 5 files changed, 5762 insertions(+), 5496 deletions(-)
 create mode 100644 web/src/pages/canvas/list-mode-generator.ts

diff --git a/web/src/components/canvas/canvas-batch-table-node.tsx b/web/src/components/canvas/canvas-batch-table-node.tsx
index e5e55cc97..baaa29ce3 100644
--- a/web/src/components/canvas/canvas-batch-table-node.tsx
+++ b/web/src/components/canvas/canvas-batch-table-node.tsx
@@ -1,580 +1,587 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
-import { Button, Input, Select, Switch, Tooltip } from "antd";
-import { GripVertical, Image as ImageIcon, LoaderCircle, Play, Plus, RefreshCw, Rows3, Trash2, Upload } from "lucide-react";
-
-import { CachedResourceImage } from "@/components/cached-resource-image";
-import { BATCH_REFERENCE_HANDLE_GAP, BATCH_REFERENCE_HANDLE_TOP, MAX_BATCH_REFERENCE_COLUMNS, MAX_BATCH_TEXT_COLUMNS, batchGridTemplateColumns, batchPromptForRow, batchReferenceColumns, batchReferenceHandleId, batchTextColumns, batchTextHandleId, batchTextHandleTop } from "@/lib/canvas/canvas-batch-table";
-import type { CanvasTheme } from "@/lib/canvas-theme";
-import type { CanvasBatchOperation, CanvasBatchRow, CanvasBatchTableData, CanvasConnection, CanvasGenerationBatch, CanvasGenerationBatchItem, CanvasNodeData } from "@/types/canvas";
-
-type Props = {
-    node: CanvasNodeData;
-    nodes: CanvasNodeData[];
-    connections: CanvasConnection[];
-    batch?: CanvasGenerationBatch;
-    theme: CanvasTheme;
-    onPatchTable: (patch: Partial<CanvasBatchTableData>) => void;
-    onAddRow: () => void;
-    onRemoveRow: (rowId: string) => void;
-    onUpdateRow: (rowId: string, patch: Partial<CanvasBatchRow>) => void;
-    onFillRows: () => void;
-    onGenerate: (rowIds?: string[]) => void;
-    onRetryItem: (batchId: string, itemId: string) => void;
-    onAddReferenceColumn: () => void;
-    onAddTextColumn: () => void;
-    onReorderReferenceColumns: (fromColumnId: string, toColumnId: string) => void;
-    onMoveReferenceCell: (sourceRowId: string, sourceColumnIndex: number, targetRowId: string, targetColumnIndex: number) => void;
-    onReplaceReference: (node: CanvasNodeData) => void;
-    onUploadReference: (rowId: string, columnIndex: number, file: File) => void;
-    onConnectStart: (event: ReactPointerEvent, handleId: string) => void;
-    onConnectDrop?: (event: ReactPointerEvent, handleId: string) => void;
-    readOnly?: boolean;
-};
-
-const OPERATION_OPTIONS = [
-    { value: "try_on", label: "批量换装" },
-    { value: "creative", label: "创意生图" },
-] satisfies Array<{ value: CanvasBatchOperation; label: string }>;
-
-type ReferenceCell = { rowId: string; columnIndex: number };
-
-export function CanvasBatchTableNodeContent({ node, nodes, connections, batch, theme, onPatchTable, onAddRow, onRemoveRow, onUpdateRow, onFillRows, onGenerate, onRetryItem, onAddReferenceColumn, onAddTextColumn, onReorderReferenceColumns, onMoveReferenceCell, onReplaceReference, onUploadReference, onConnectStart, onConnectDrop, readOnly = false }: Props) {
-    const table = node.metadata?.batchTable || { operation: "try_on" as const, concurrency: 10, rows: [] };
-    const referenceColumns = batchReferenceColumns(table);
-    const textColumns = batchTextColumns(table);
-    const globalPrompt = table.globalPrompt || "";
-    const hasGlobalPrompt = Boolean(globalPrompt.trim());
-    const nodeById = useMemo(() => new Map(nodes.map((item) => [item.id, item])), [nodes]);
-    const batchItemByRowId = useMemo(() => new Map((batch?.items || []).map((item) => [item.rowId, item])), [batch?.items]);
-    const connectedImageCount = useMemo(() => new Set(connections.filter((connection) => connection.toNodeId === node.id).map((connection) => connection.fromNodeId)).size, [connections, node.id]);
-    const completed = table.rows.filter((row) => Boolean(row.outputNodeId && nodeById.get(row.outputNodeId)?.metadata?.content)).length;
-    const gridTemplateColumns = batchGridTemplateColumns(referenceColumns.length, textColumns.length);
-    const [draggingColumnId, setDraggingColumnId] = useState<string | null>(null);
-    const [draggingCell, setDraggingCell] = useState<ReferenceCell | null>(null);
-    const [dropCell, setDropCell] = useState<ReferenceCell | null>(null);
-    const draggingCellRef = useRef<ReferenceCell | null>(null);
-    const dropCellRef = useRef<ReferenceCell | null>(null);
-    const dragStartRef = useRef<{ x: number; y: number; pointerId: number; cell: ReferenceCell } | null>(null);
-    const lastPointerRef = useRef({ x: 0, y: 0 });
-    const suppressClickRef = useRef(false);
-    const uploadTargetRef = useRef<{ rowId: string; columnIndex: number } | null>(null);
-    const uploadInputRef = useRef<HTMLInputElement>(null);
-
-    const clearReferenceDrag = useCallback(() => {
-        dragStartRef.current = null;
-        draggingCellRef.current = null;
-        dropCellRef.current = null;
-        setDraggingCell(null);
-        setDropCell(null);
-    }, []);
-
-    const findReferenceCellAtPoint = useCallback((clientX: number, clientY: number) => {
-        const hit = document.elementsFromPoint(clientX, clientY)
-            .map((element) => element.closest<HTMLElement>("[data-batch-reference-cell]"))
-            .find((element): element is HTMLElement => Boolean(element));
-        if (!hit) return null;
-        const rowId = hit.dataset.batchRowId;
-        const columnIndex = Number(hit.dataset.batchColumnIndex);
-        return rowId && Number.isInteger(columnIndex) ? { rowId, columnIndex } : null;
-    }, []);
-
-    const updateReferenceDrag = useCallback((clientX: number, clientY: number) => {
-        const start = dragStartRef.current;
-        if (!start || readOnly) return;
-        const distance = Math.hypot(clientX - start.x, clientY - start.y);
-        if (!draggingCellRef.current && distance < 5) return;
-        if (!draggingCellRef.current) {
-            draggingCellRef.current = start.cell;
-            setDraggingCell(start.cell);
-            suppressClickRef.current = true;
-        }
-        const nextDropCell = findReferenceCellAtPoint(clientX, clientY);
-        dropCellRef.current = nextDropCell;
-        setDropCell(nextDropCell);
-    }, [findReferenceCellAtPoint, readOnly]);
-
-    const finishReferenceDrag = useCallback((clientX: number, clientY: number, cancel = false) => {
-        const start = dragStartRef.current;
-        if (!start) return;
-        const sourceCell = draggingCellRef.current;
-        const targetCell = cancel ? null : dropCellRef.current || findReferenceCellAtPoint(clientX, clientY);
-        if (sourceCell && targetCell) {
-            onMoveReferenceCell(sourceCell.rowId, sourceCell.columnIndex, targetCell.rowId, targetCell.columnIndex);
-        }
-        clearReferenceDrag();
-        window.setTimeout(() => { suppressClickRef.current = false; }, 0);
-    }, [clearReferenceDrag, findReferenceCellAtPoint, onMoveReferenceCell]);
-
-    const cancelReferenceDrag = useCallback(() => {
-        if (!dragStartRef.current) return;
-        clearReferenceDrag();
-        window.setTimeout(() => { suppressClickRef.current = false; }, 0);
-    }, [clearReferenceDrag]);
-
-    useEffect(() => {
-        const handleWindowPointerMove = (event: PointerEvent) => {
-            const start = dragStartRef.current;
-            if (!start || event.pointerId !== start.pointerId) return;
-            const distance = Math.hypot(event.clientX - start.x, event.clientY - start.y);
-            if (distance >= 5) event.preventDefault();
-            updateReferenceDrag(event.clientX, event.clientY);
-        };
-        const handleWindowPointerUp = (event: PointerEvent) => {
-            const start = dragStartRef.current;
-            if (!start || event.pointerId !== start.pointerId) return;
-            finishReferenceDrag(event.clientX, event.clientY);
-        };
-        const handleWindowPointerCancel = (event: PointerEvent) => {
-            const start = dragStartRef.current;
-            if (!start || event.pointerId !== start.pointerId) return;
-            cancelReferenceDrag();
-        };
-        const handleWindowMouseUp = () => {
-            if (!dragStartRef.current) return;
-            finishReferenceDrag(lastPointerRef.current.x, lastPointerRef.current.y);
-        };
-        const handleWindowBlur = () => cancelReferenceDrag();
-        window.addEventListener("pointermove", handleWindowPointerMove, { passive: false });
-        window.addEventListener("pointerup", handleWindowPointerUp, true);
-        window.addEventListener("pointercancel", handleWindowPointerCancel, true);
-        window.addEventListener("mouseup", handleWindowMouseUp, true);
-        window.addEventListener("blur", handleWindowBlur);
-        return () => {
-            window.removeEventListener("pointermove", handleWindowPointerMove);
-            window.removeEventListener("pointerup", handleWindowPointerUp, true);
-            window.removeEventListener("pointercancel", handleWindowPointerCancel, true);
-            window.removeEventListener("mouseup", handleWindowMouseUp, true);
-            window.removeEventListener("blur", handleWindowBlur);
-        };
-    }, [cancelReferenceDrag, finishReferenceDrag, updateReferenceDrag]);
-
-    const handleReferencePointerDown = useCallback((event: ReactPointerEvent<HTMLButtonElement>, rowId: string, columnIndex: number, hasMaterial: boolean) => {
-        if (readOnly || !hasMaterial) return;
-        event.preventDefault();
-        event.stopPropagation();
-        event.currentTarget.setPointerCapture(event.pointerId);
-        lastPointerRef.current = { x: event.clientX, y: event.clientY };
-        dragStartRef.current = { x: event.clientX, y: event.clientY, pointerId: event.pointerId, cell: { rowId, columnIndex } };
-        suppressClickRef.current = false;
-    }, [readOnly]);
-
-    const handleReferencePointerMove = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-        event.stopPropagation();
-        lastPointerRef.current = { x: event.clientX, y: event.clientY };
-        updateReferenceDrag(event.clientX, event.clientY);
-    }, [updateReferenceDrag]);
-
-    const handleReferencePointerUp = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-        event.stopPropagation();
-        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
-        finishReferenceDrag(event.clientX, event.clientY);
-    }, [finishReferenceDrag]);
-
-    const handleReferencePointerCancel = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-        event.stopPropagation();
-        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
-        cancelReferenceDrag();
-    }, [cancelReferenceDrag]);
-
-    return (
-        <div
-            data-canvas-no-zoom
-            data-canvas-wheel-scroll
-            data-canvas-batch-table
-            className="relative flex h-full w-full flex-col overflow-visible pt-9 text-xs"
-            style={{ color: theme.node.text }}
-            onPointerDown={(event) => event.stopPropagation()}
-            onMouseDown={(event) => {
-                // Only the top padding is a node drag surface; keep child controls isolated.
-                if (event.target !== event.currentTarget) event.stopPropagation();
-            }}
-        >
-            <input
-                type="file"
-                ref={uploadInputRef}
-                accept="image/*"
-                className="hidden"
-                aria-hidden="true"
-                tabIndex={-1}
-                onChange={(event) => {
-                    const file = event.currentTarget.files?.[0];
-                    const target = uploadTargetRef.current;
-                    uploadTargetRef.current = null;
-                    event.currentTarget.value = "";
-                    if (file && target) onUploadReference(target.rowId, target.columnIndex, file);
-                }}
-            />
-            {!readOnly ? <BatchReferenceHandles columns={referenceColumns} textColumns={textColumns} theme={theme} onAdd={onAddReferenceColumn} onAddText={onAddTextColumn} onConnectStart={onConnectStart} onConnectDrop={onConnectDrop} /> : null}
-            <div
-                className="flex min-h-12 flex-wrap items-center gap-2 border-b px-3 py-2"
-                style={{ borderColor: theme.node.stroke, background: theme.node.panel }}
-                onMouseDown={(event) => event.stopPropagation()}
-            >
-                <Select size="small" value={table.operation} options={OPERATION_OPTIONS} disabled={readOnly} onChange={(operation) => onPatchTable({ operation })} className="w-28" aria-label="批量任务类型" />
-                <span className="opacity-55">并发</span>
-                <Select
-                    size="small"
-                    value={table.concurrency}
-                    options={[10, 50, 100].map((value) => ({ value, label: String(value) }))}
-                    disabled={readOnly}
-                    onChange={(concurrency) => onPatchTable({ concurrency })}
-                    className="w-20"
-                    aria-label="并发数"
-                />
-                <span className="opacity-55">
-                    {referenceColumns.length} 组参考 · 已连 {connectedImageCount} 张图 · 完成 {completed}/{table.rows.length}
-                </span>
-                {!readOnly ? (
-                    <div className="flex min-w-[280px] max-w-[min(42vw,520px)] flex-1 items-center gap-2">
-                        <span className="shrink-0 font-medium" style={{ color: theme.node.muted }}>全局提示词</span>
-                        <Input.TextArea
-                            size="small"
-                            value={globalPrompt}
-                            autoSize={{ minRows: 1, maxRows: 2 }}
-                            placeholder="输入一次，覆盖所有任务提示词"
-                            aria-label="全局提示词"
-                            onChange={(event) => onPatchTable({ globalPrompt: event.target.value })}
-                        />
-                        {hasGlobalPrompt ? <span className="shrink-0 text-[11px]" style={{ color: theme.accent.primary }}>已覆盖全部</span> : null}
-                    </div>
-                ) : null}
-                {!readOnly ? (
-                    <div className="ml-auto flex gap-1.5">
-                        <Button size="small" icon={<Rows3 className="size-3.5" />} onClick={onFillRows}>
-                            同步连线
-                        </Button>
-                        <Button size="small" icon={<Plus className="size-3.5" />} onClick={onAddRow}>
-                            加一行
-                        </Button>
-                        <Button size="small" type="primary" icon={<Play className="size-3.5" />} disabled={!table.rows.length} onClick={() => onGenerate()}>
-                            生成未完成项
-                        </Button>
-                    </div>
-                ) : null}
-            </div>
-
-            <div className="min-h-0 flex-1 overflow-auto rounded-b-[inherit]" onMouseDown={(event) => event.stopPropagation()}>
-                <div className="sticky top-0 z-10 grid min-w-[820px] items-center gap-2 border-b px-3 py-2 font-medium" style={{ borderColor: theme.node.stroke, gridTemplateColumns, background: theme.node.panel, color: theme.node.muted }}>
-                    <span>#</span>
-                    <span>任务</span>
-                    {referenceColumns.map((column) => (
-                        <ReferenceColumnHeader key={column.id} column={column} theme={theme} readOnly={readOnly} dragging={draggingColumnId === column.id} onDragStart={() => setDraggingColumnId(column.id)} onDragEnd={() => setDraggingColumnId(null)} onDrop={(targetColumnId) => { if (draggingColumnId) onReorderReferenceColumns(draggingColumnId, targetColumnId); setDraggingColumnId(null); }} />
-                    ))}
-                    {textColumns.map((column, index) => (
-                        <span key={column.id} className={index === 0 ? "border-l pl-3" : undefined} style={index === 0 ? { borderColor: theme.node.stroke } : undefined}>{column.label}</span>
-                    ))}
-                    <span>任务提示词</span>
-                    <span>生成结果</span>
-                    <span />
-                </div>
-                {table.rows.length ? (
-                    table.rows.map((row, index) => {
-                        const output = row.outputNodeId ? nodeById.get(row.outputNodeId) : undefined;
-                        const item = batchItemByRowId.get(row.id);
-                        const status = rowStatus(item, output);
-                        return (
-                            <div key={row.id} className="grid min-w-[820px] items-center gap-2 border-b px-3 py-3" style={{ borderColor: theme.node.stroke, gridTemplateColumns }}>
-                                <span className="tabular-nums opacity-45">{index + 1}</span>
-                                <div className="flex items-center gap-1.5">
-                                    <Switch size="small" checked={row.enabled !== false} disabled={readOnly} onChange={(enabled) => onUpdateRow(row.id, { enabled })} aria-label={`任务 ${index + 1}`} />
-                                    <span className="text-[10px]" style={{ color: row.enabled === false ? theme.node.placeholder : theme.accent.primary }}>{row.enabled === false ? "关" : "开"}</span>
-                                </div>
-                                {referenceColumns.map((column, columnIndex) => (
-                                    <ReferenceThumbnail
-                                        key={column.id}
-                                        node={nodeById.get(row.inputNodeIds[columnIndex])}
-                                        theme={theme}
-                                        readOnly={readOnly}
-                                        rowId={row.id}
-                                        columnIndex={columnIndex}
-                                        columnId={column.id}
-                                        draggingColumnId={draggingColumnId}
-                                        isDraggingCell={draggingCell?.rowId === row.id && draggingCell.columnIndex === columnIndex}
-                                        isDropTarget={dropCell?.rowId === row.id && dropCell.columnIndex === columnIndex}
-                                        suppressClickRef={suppressClickRef}
-                                        onReplace={onReplaceReference}
-                                        onUpload={() => { uploadTargetRef.current = { rowId: row.id, columnIndex }; uploadInputRef.current?.click(); }}
-                                        onPointerDown={handleReferencePointerDown}
-                                        onPointerMove={handleReferencePointerMove}
-                                        onPointerUp={handleReferencePointerUp}
-                                        onPointerCancel={handleReferencePointerCancel}
-                                        onLostPointerCapture={handleReferencePointerCancel}
-                                    />
-                                ))}
-                                {textColumns.map((column, columnIndex) => (
-                                    <div key={column.id} className={columnIndex === 0 ? "border-l pl-3" : undefined} style={columnIndex === 0 ? { borderColor: theme.node.stroke } : undefined}>
-                                        <TextNodeCell node={row.textNodeIds?.[columnIndex] ? nodeById.get(row.textNodeIds[columnIndex]) : undefined} theme={theme} />
-                                    </div>
-                                ))}
-                                <Input.TextArea value={batchPromptForRow(table, row)} readOnly={readOnly || hasGlobalPrompt} autoSize={{ minRows: 2, maxRows: 4 }} placeholder={hasGlobalPrompt ? "已由全局提示词覆盖" : "描述这一行要生成的画面"} onChange={(event) => onUpdateRow(row.id, { prompt: event.target.value })} />
-                                <div className="flex min-w-0 items-center gap-2">
-                                    {output?.metadata?.content || output?.metadata?.storageKey ? (
-                                        <CachedResourceImage
-                                            eager
-                                            src={output.metadata.previewContent || output.metadata.content}
-                                            storageKey={output.metadata.storageKey}
-                                            alt="生成结果"
-                                            className="size-12 rounded object-cover"
-                                            fallback={<EmptyThumbnail theme={theme} />}
-                                        />
-                                    ) : (
-                                        <EmptyThumbnail theme={theme} />
-                                    )}
-                                    <div className="min-w-0">
-                                        <div className="truncate font-medium">{status.label}</div>
-                                        {!readOnly && status.retryable && batch && item ? (
-                                            <Button type="link" size="small" className="h-auto p-0 text-[11px]" icon={<RefreshCw className="size-3" />} onClick={() => onRetryItem(batch.id, item.id)}>
-                                                重试
-                                            </Button>
-                                        ) : null}
-                                    </div>
-                                    {status.loading ? <LoaderCircle className="ml-auto size-4 animate-spin opacity-55" /> : null}
-                                </div>
-                                {!readOnly ? (
-                                    <Tooltip title="移除这一行">
-                                        <Button type="text" size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => onRemoveRow(row.id)} />
-                                    </Tooltip>
-                                ) : (
-                                    <span />
-                                )}
-                            </div>
-                        );
-                    })
-                ) : (
-                    <div className="grid h-40 place-items-center px-5 text-center" style={{ color: theme.node.muted }}>连接图片后会自动生成任务；点击缩略图可替换素材，拖动参考图列可调整顺序。</div>
-                )}
-            </div>
-        </div>
-    );
-}
-
-function ReferenceColumnHeader({ column, theme, readOnly, dragging, onDragStart, onDragEnd, onDrop }: { column: { id: string; label: string }; theme: CanvasTheme; readOnly: boolean; dragging: boolean; onDragStart: () => void; onDragEnd: () => void; onDrop: (columnId: string) => void }) {
-    return (
-        <span
-            draggable={!readOnly}
-            className="flex min-w-0 items-center gap-1 rounded px-1 py-1 transition-opacity"
-            style={{ opacity: dragging ? 0.45 : 1, cursor: readOnly ? "default" : "grab" }}
-            title={readOnly ? column.label : `${column.label}：拖动调整顺序`}
-            onDragStart={(event) => {
-                event.dataTransfer.effectAllowed = "move";
-                event.dataTransfer.setData("text/plain", column.id);
-                onDragStart();
-            }}
-            onDragEnd={onDragEnd}
-            onDragOver={(event) => { if (!readOnly) { event.preventDefault(); event.dataTransfer.dropEffect = "move"; } }}
-            onDrop={(event) => { event.preventDefault(); onDrop(column.id); }}
-        >
-            {!readOnly ? <GripVertical className="size-3 shrink-0 opacity-45" /> : null}
-            <span className="truncate">{column.label}</span>
-        </span>
-    );
-}
-
-function BatchTextHandle(props: Omit<React.ComponentProps<typeof BatchReferenceHandle>, "column"> & { column: { id: string; label: string } }) {
-    return <BatchReferenceHandle {...props} column={props.column} handlePrefix="text" />;
-}
-
-function BatchReferenceHandles({
-    columns,
-    textColumns,
-    theme,
-    onAdd,
-    onAddText,
-    onConnectStart,
-    onConnectDrop,
-}: {
-    columns: ReturnType<typeof batchReferenceColumns>;
-    textColumns: ReturnType<typeof batchTextColumns>;
-    theme: CanvasTheme;
-    onAdd: () => void;
-    onAddText: () => void;
-    onConnectStart: (event: ReactPointerEvent, handleId: string) => void;
-    onConnectDrop?: (event: ReactPointerEvent, handleId: string) => void;
-}) {
-    const commonStyle = { left: 0, width: 44, height: 44, transform: "translate(-50%, -50%)", transformOrigin: "center" };
-    const referenceAddTop = BATCH_REFERENCE_HANDLE_TOP + columns.length * BATCH_REFERENCE_HANDLE_GAP;
-    const textTop = batchTextHandleTop(columns.length);
-    return (
-        <>
-            {columns.map((column, index) => (
-                <BatchReferenceHandle key={column.id} column={column} top={BATCH_REFERENCE_HANDLE_TOP + index * BATCH_REFERENCE_HANDLE_GAP} badge={String(index + 1)} theme={theme} commonStyle={commonStyle} onConnectStart={onConnectStart} onConnectDrop={onConnectDrop} />
-            ))}
-            {textColumns.map((column, index) => (
-                <BatchTextHandle key={column.id} column={column} top={textTop + index * BATCH_REFERENCE_HANDLE_GAP} badge={`T${index + 1}`} theme={theme} commonStyle={commonStyle} onConnectStart={onConnectStart} onConnectDrop={onConnectDrop} />
-            ))}
-            {columns.length < MAX_BATCH_REFERENCE_COLUMNS ? (
-                <Tooltip title={`新增参考图 ${columns.length + 1}`} placement="left">
-                    <button type="button" aria-label={`新增参考图 ${columns.length + 1}`} className="group absolute z-[var(--node-z-handle)] grid place-items-center rounded-full outline-none" style={{ ...commonStyle, top: referenceAddTop, color: theme.accent.primary }} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); onAdd(); }}>
-                        <span className="grid size-[22px] place-items-center rounded-full border shadow-sm transition-transform group-hover:scale-110 group-focus-visible:scale-110" style={{ background: theme.node.panel, borderColor: theme.accent.primary }}><Plus className="size-3" /></span>
-                    </button>
-                </Tooltip>
-            ) : null}
-            {textColumns.length < MAX_BATCH_TEXT_COLUMNS ? (
-                <Tooltip title={`新增文字 ${textColumns.length + 1}`} placement="left">
-                    <button type="button" aria-label={`新增文字 ${textColumns.length + 1}`} className="group absolute z-[var(--node-z-handle)] grid place-items-center rounded-full outline-none" style={{ ...commonStyle, top: textTop + textColumns.length * BATCH_REFERENCE_HANDLE_GAP, color: theme.node.text }} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); onAddText(); }}>
-                        <span className="grid size-[22px] place-items-center rounded-full border shadow-sm transition-transform group-hover:scale-110 group-focus-visible:scale-110" style={{ background: theme.node.panel, borderColor: theme.node.stroke }}><Plus className="size-3" /></span>
-                    </button>
-                </Tooltip>
-            ) : null}
-        </>
-    );
-}
-
-function BatchReferenceHandle({
-    column,
-    top,
-    badge,
-    theme,
-    commonStyle,
-    onConnectStart,
-    onConnectDrop,
-    handlePrefix = "reference",
-}: {
-    column: { id: string; label: string };
-    top: number;
-    badge: string;
-    theme: CanvasTheme;
-    commonStyle: { left: number; width: number; height: number; transform: string; transformOrigin: string };
-    onConnectStart: (event: ReactPointerEvent, handleId: string) => void;
-    onConnectDrop?: (event: ReactPointerEvent, handleId: string) => void;
-    handlePrefix?: "reference" | "text";
-}) {
-    const [hovered, setHovered] = useState(false);
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
-    const handleId = handlePrefix === "text" ? batchTextHandleId(column.id) : batchReferenceHandleId(column.id);
-    const reset = useCallback(() => {
-        setHovered(false);
-        setOffset({ x: 0, y: 0 });
-    }, []);
-    const update = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-        const bounds = event.currentTarget.getBoundingClientRect();
-        const dx = event.clientX - (bounds.left + bounds.width / 2);
-        const dy = event.clientY - (bounds.top + bounds.height / 2);
-        const limit = 16;
-        setOffset({ x: Math.max(-limit, Math.min(limit, dx)), y: Math.max(-limit, Math.min(limit, dy)) });
-    }, []);
-    return (
-        <Tooltip title={`磁吸到${column.label}`} placement="left">
-            <button
-                type="button"
-                aria-label={`${column.label}连线点`}
-                className="group absolute z-[var(--node-z-handle)] grid place-items-center rounded-full outline-none"
-                style={{ ...commonStyle, top, cursor: "crosshair" }}
-                onPointerEnter={(event) => {
-                    setHovered(true);
-                    update(event);
-                }}
-                onPointerMove={update}
-                onPointerLeave={reset}
-                onPointerDown={(event) => {
-                    event.stopPropagation();
-                    onConnectStart(event, handleId);
-                }}
-                onPointerUp={(event) => {
-                    event.stopPropagation();
-                    onConnectDrop?.(event, handleId);
-                }}
-            >
-                <span
-                    className="grid size-[22px] place-items-center rounded-full border text-[9px] font-semibold shadow-sm transition-transform duration-100 group-hover:scale-125 group-focus-visible:scale-125"
-                    style={{ transform: `translate(${offset.x}px, ${offset.y}px) scale(${hovered ? 1.08 : 1})`, background: theme.node.panel, borderColor: handlePrefix === "text" ? theme.node.stroke : theme.accent.primary, color: handlePrefix === "text" ? theme.node.text : theme.accent.primary }}
-                >
-                    {badge}
-                </span>
-            </button>
-        </Tooltip>
-    );
-}
-function TextNodeCell({ node, theme }: { node?: CanvasNodeData; theme: CanvasTheme }) {
-    const content = node?.metadata?.content || node?.metadata?.prompt;
-    return <div className="min-h-12 max-w-full overflow-hidden rounded border px-2 py-1.5 text-[11px] leading-4" style={{ borderColor: theme.node.stroke, color: content ? theme.node.text : theme.node.placeholder }} title={content || "未连接文字节点"}>{content || "未连接文字"}</div>;
-}
-
-function ReferenceThumbnail({ node, theme, readOnly, rowId, columnIndex, columnId, draggingColumnId, isDraggingCell, isDropTarget, suppressClickRef, onReplace, onUpload, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture }: {
-    node?: CanvasNodeData;
-    theme: CanvasTheme;
-    readOnly: boolean;
-    rowId: string;
-    columnIndex: number;
-    columnId: string;
-    draggingColumnId: string | null;
-    isDraggingCell: boolean;
-    isDropTarget: boolean;
-    suppressClickRef: MutableRefObject<boolean>;
-    onReplace: (node: CanvasNodeData) => void;
-    onUpload: () => void;
-    onPointerDown: (event: ReactPointerEvent<HTMLButtonElement>, rowId: string, columnIndex: number, hasMaterial: boolean) => void;
-    onPointerMove: (event: ReactPointerEvent<HTMLButtonElement>) => void;
-    onPointerUp: (event: ReactPointerEvent<HTMLButtonElement>) => void;
-    onPointerCancel: (event: ReactPointerEvent<HTMLButtonElement>) => void;
-    onLostPointerCapture: (event: ReactPointerEvent<HTMLButtonElement>) => void;
-}) {
-    const cellData = { "data-batch-reference-cell": true, "data-batch-row-id": rowId, "data-batch-column-index": String(columnIndex) };
-    const dropStyle = isDropTarget ? { boxShadow: `0 0 0 2px ${theme.accent.primary}, 0 0 0 5px ${theme.accent.primary}33` } : undefined;
-    if (!node || (!node.metadata?.content && !node.metadata?.storageKey)) {
-        return (
-            <Tooltip title={readOnly ? "未连接参考图" : "点击上传参考图"}>
-                <button
-                    type="button"
-                    draggable={false}
-                    className="group relative grid size-16 min-w-0 place-items-center rounded-md border border-dashed outline-none transition-all focus-visible:ring-2"
-                    style={{ borderColor: isDropTarget ? theme.accent.primary : theme.node.stroke, background: `${theme.node.panel}88`, ...dropStyle }}
-                    disabled={readOnly}
-                    onClick={(event) => { event.stopPropagation(); if (!suppressClickRef.current) onUpload(); }}
-                    aria-label={`${columnId}，点击上传图片`}
-                    {...cellData}
-                    onPointerDown={(event) => onPointerDown(event, rowId, columnIndex, false)}
-                    onPointerMove={onPointerMove}
-                    onPointerUp={onPointerUp}
-                    onPointerCancel={onPointerCancel}
-                    onLostPointerCapture={onLostPointerCapture}
-                    onDragStart={(event) => event.preventDefault()}
-                >
-                    <EmptyThumbnail theme={theme} sizeClass="size-16 border-0" />
-                    {!readOnly ? <span className="pointer-events-none absolute inset-x-1 bottom-1 rounded bg-black/60 px-1 py-1 text-center text-[9px] text-white opacity-0 transition-opacity group-hover:opacity-100">点击上传</span> : null}
-                </button>
-            </Tooltip>
-        );
-    }
-    const fallback = <EmptyThumbnail theme={theme} />;
-    return (
-        <Tooltip title={readOnly ? (node.title || "图片") : `${node.title || "图片"} · 点击替换，拖动排序`}>
-            <button
-                type="button"
-                draggable={false}
-                className="group relative size-16 min-w-0 touch-none overflow-hidden rounded-md border outline-none transition-all hover:-translate-y-0.5 hover:shadow-md focus-visible:ring-2"
-                style={{ borderColor: isDropTarget || draggingColumnId === columnId ? theme.accent.primary : theme.node.stroke, opacity: isDraggingCell || draggingColumnId === columnId ? 0.55 : 1, ...dropStyle }}
-                aria-label={readOnly ? node.title || "参考图" : `${node.title || "参考图"}，点击替换素材`}
-                onClick={(event) => { event.stopPropagation(); if (!readOnly && !draggingColumnId && !suppressClickRef.current) onReplace(node); }}
-                {...cellData}
-                onPointerDown={(event) => onPointerDown(event, rowId, columnIndex, true)}
-                onPointerMove={onPointerMove}
-                onPointerUp={onPointerUp}
-                onPointerCancel={onPointerCancel}
-                onLostPointerCapture={onLostPointerCapture}
-                onDragStart={(event) => event.preventDefault()}
-            >
-                <CachedResourceImage draggable={false} eager src={node.metadata.previewContent || node.metadata.content} storageKey={node.metadata.storageKey} alt={node.title || "参考图"} className="size-16 select-none object-cover" fallback={fallback} />
-                {!readOnly ? <span className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-center gap-1 bg-black/55 px-1 py-1 text-[9px] text-white opacity-0 transition-opacity group-hover:opacity-100"><Upload className="size-3" />替换</span> : null}
-            </button>
-        </Tooltip>
-    );
-}
-
-function EmptyThumbnail({ theme, sizeClass = "size-12" }: { theme: CanvasTheme; sizeClass?: string }): ReactNode {
-    return (
-        <div className={`grid ${sizeClass} shrink-0 place-items-center rounded border`} style={{ borderColor: theme.node.stroke, color: theme.node.placeholder }}>
-            <ImageIcon className="size-5" />
-        </div>
-    );
-}
-
-function rowStatus(item: CanvasGenerationBatchItem | undefined, output: CanvasNodeData | undefined) {
-    if (output?.metadata?.content) return { label: "生成完成", loading: false, retryable: false };
-    if (item?.status === "failed") return { label: item.errorDetails || "生成失败", loading: false, retryable: true };
-    if (item?.status === "cancelled") return { label: "已停止", loading: false, retryable: false };
-    if (item && ["waiting", "submitting", "queued", "running"].includes(item.status))
-        return { label: item.status === "waiting" ? "等待中" : item.status === "submitting" ? "正在提交" : item.status === "queued" ? "已排队" : "生成中", loading: true, retryable: false };
-    if (output?.metadata?.status === "error") return { label: output.metadata.errorDetails || "生成失败", loading: false, retryable: false };
-    return { label: "待生成", loading: false, retryable: false };
-}
+import { useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
+import { Button, Input, Select, Switch, Tooltip } from "antd";
+import { GripVertical, Image as ImageIcon, LoaderCircle, Play, Plus, RefreshCw, Rows3, Trash2, Upload } from "lucide-react";
+
+import { CachedResourceImage } from "@/components/cached-resource-image";
+import { BATCH_REFERENCE_HANDLE_GAP, BATCH_REFERENCE_HANDLE_TOP, MAX_BATCH_REFERENCE_COLUMNS, MAX_BATCH_TEXT_COLUMNS, batchGridTemplateColumns, batchPromptForRow, batchReferenceColumns, batchReferenceHandleId, batchTextColumns, batchTextHandleId, batchTextHandleTop } from "@/lib/canvas/canvas-batch-table";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasBatchOperation, CanvasBatchRow, CanvasBatchTableData, CanvasConnection, CanvasGenerationBatch, CanvasGenerationBatchItem, CanvasNodeData } from "@/types/canvas";
+
+type Props = {
+    node: CanvasNodeData;
+    nodes: CanvasNodeData[];
+    connections: CanvasConnection[];
+    batch?: CanvasGenerationBatch;
+    theme: CanvasTheme;
+    onPatchTable: (patch: Partial<CanvasBatchTableData>) => void;
+    onAddRow: () => void;
+    onRemoveRow: (rowId: string) => void;
+    onUpdateRow: (rowId: string, patch: Partial<CanvasBatchRow>) => void;
+    onFillRows: () => void;
+    onGenerate: (rowIds?: string[]) => void;
+    onRetryItem: (batchId: string, itemId: string) => void;
+    onAddReferenceColumn: () => void;
+    onAddTextColumn: () => void;
+    onReorderReferenceColumns: (fromColumnId: string, toColumnId: string) => void;
+    onMoveReferenceCell: (sourceRowId: string, sourceColumnIndex: number, targetRowId: string, targetColumnIndex: number) => void;
+    onReplaceReference: (node: CanvasNodeData) => void;
+    onUploadReference: (rowId: string, columnIndex: number, file: File) => void;
+    onConnectStart: (event: ReactPointerEvent, handleId: string) => void;
+    onConnectDrop?: (event: ReactPointerEvent, handleId: string) => void;
+    readOnly?: boolean;
+};
+
+const OPERATION_OPTIONS = [
+    { value: "try_on", label: "批量换装" },
+    { value: "creative", label: "创意生图" },
+] satisfies Array<{ value: CanvasBatchOperation; label: string }>;
+
+type ReferenceCell = { rowId: string; columnIndex: number };
+
+export function CanvasBatchTableNodeContent({ node, nodes, connections, batch, theme, onPatchTable, onAddRow, onRemoveRow, onUpdateRow, onFillRows, onGenerate, onRetryItem, onAddReferenceColumn, onAddTextColumn, onReorderReferenceColumns, onMoveReferenceCell, onReplaceReference, onUploadReference, onConnectStart, onConnectDrop, readOnly = false }: Props) {
+    const table = node.metadata?.batchTable || { operation: "try_on" as const, concurrency: 10, rows: [] };
+    const referenceColumns = batchReferenceColumns(table);
+    const textColumns = batchTextColumns(table);
+    const globalPrompt = table.globalPrompt || "";
+    const hasGlobalPrompt = Boolean(globalPrompt.trim());
+    const nodeById = useMemo(() => new Map(nodes.map((item) => [item.id, item])), [nodes]);
+    const batchItemByRowId = useMemo(() => new Map((batch?.items || []).map((item) => [item.rowId, item])), [batch?.items]);
+    const connectedImageCount = useMemo(() => new Set(connections.filter((connection) => connection.toNodeId === node.id).map((connection) => connection.fromNodeId)).size, [connections, node.id]);
+    const completed = table.rows.filter((row) => Boolean(row.outputNodeId && nodeById.get(row.outputNodeId)?.metadata?.content)).length;
+    const isAiTable = Boolean(table.aiGenerated);
+    const gridTemplateColumns = batchGridTemplateColumns(referenceColumns.length, textColumns.length);
+    const [draggingColumnId, setDraggingColumnId] = useState<string | null>(null);
+    const [draggingCell, setDraggingCell] = useState<ReferenceCell | null>(null);
+    const [dropCell, setDropCell] = useState<ReferenceCell | null>(null);
+    const draggingCellRef = useRef<ReferenceCell | null>(null);
+    const dropCellRef = useRef<ReferenceCell | null>(null);
+    const dragStartRef = useRef<{ x: number; y: number; pointerId: number; cell: ReferenceCell } | null>(null);
+    const lastPointerRef = useRef({ x: 0, y: 0 });
+    const suppressClickRef = useRef(false);
+    const uploadTargetRef = useRef<{ rowId: string; columnIndex: number } | null>(null);
+    const uploadInputRef = useRef<HTMLInputElement>(null);
+
+    const clearReferenceDrag = useCallback(() => {
+        dragStartRef.current = null;
+        draggingCellRef.current = null;
+        dropCellRef.current = null;
+        setDraggingCell(null);
+        setDropCell(null);
+    }, []);
+
+    const findReferenceCellAtPoint = useCallback((clientX: number, clientY: number) => {
+        const hit = document.elementsFromPoint(clientX, clientY)
+            .map((element) => element.closest<HTMLElement>("[data-batch-reference-cell]"))
+            .find((element): element is HTMLElement => Boolean(element));
+        if (!hit) return null;
+        const rowId = hit.dataset.batchRowId;
+        const columnIndex = Number(hit.dataset.batchColumnIndex);
+        return rowId && Number.isInteger(columnIndex) ? { rowId, columnIndex } : null;
+    }, []);
+
+    const updateReferenceDrag = useCallback((clientX: number, clientY: number) => {
+        const start = dragStartRef.current;
+        if (!start || readOnly) return;
+        const distance = Math.hypot(clientX - start.x, clientY - start.y);
+        if (!draggingCellRef.current && distance < 5) return;
+        if (!draggingCellRef.current) {
+            draggingCellRef.current = start.cell;
+            setDraggingCell(start.cell);
+            suppressClickRef.current = true;
+        }
+        const nextDropCell = findReferenceCellAtPoint(clientX, clientY);
+        dropCellRef.current = nextDropCell;
+        setDropCell(nextDropCell);
+    }, [findReferenceCellAtPoint, readOnly]);
+
+    const finishReferenceDrag = useCallback((clientX: number, clientY: number, cancel = false) => {
+        const start = dragStartRef.current;
+        if (!start) return;
+        const sourceCell = draggingCellRef.current;
+        const targetCell = cancel ? null : dropCellRef.current || findReferenceCellAtPoint(clientX, clientY);
+        if (sourceCell && targetCell) {
+            onMoveReferenceCell(sourceCell.rowId, sourceCell.columnIndex, targetCell.rowId, targetCell.columnIndex);
+        }
+        clearReferenceDrag();
+        window.setTimeout(() => { suppressClickRef.current = false; }, 0);
+    }, [clearReferenceDrag, findReferenceCellAtPoint, onMoveReferenceCell]);
+
+    const cancelReferenceDrag = useCallback(() => {
+        if (!dragStartRef.current) return;
+        clearReferenceDrag();
+        window.setTimeout(() => { suppressClickRef.current = false; }, 0);
+    }, [clearReferenceDrag]);
+
+    useEffect(() => {
+        const handleWindowPointerMove = (event: PointerEvent) => {
+            const start = dragStartRef.current;
+            if (!start || event.pointerId !== start.pointerId) return;
+            const distance = Math.hypot(event.clientX - start.x, event.clientY - start.y);
+            if (distance >= 5) event.preventDefault();
+            updateReferenceDrag(event.clientX, event.clientY);
+        };
+        const handleWindowPointerUp = (event: PointerEvent) => {
+            const start = dragStartRef.current;
+            if (!start || event.pointerId !== start.pointerId) return;
+            finishReferenceDrag(event.clientX, event.clientY);
+        };
+        const handleWindowPointerCancel = (event: PointerEvent) => {
+            const start = dragStartRef.current;
+            if (!start || event.pointerId !== start.pointerId) return;
+            cancelReferenceDrag();
+        };
+        const handleWindowMouseUp = () => {
+            if (!dragStartRef.current) return;
+            finishReferenceDrag(lastPointerRef.current.x, lastPointerRef.current.y);
+        };
+        const handleWindowBlur = () => cancelReferenceDrag();
+        window.addEventListener("pointermove", handleWindowPointerMove, { passive: false });
+        window.addEventListener("pointerup", handleWindowPointerUp, true);
+        window.addEventListener("pointercancel", handleWindowPointerCancel, true);
+        window.addEventListener("mouseup", handleWindowMouseUp, true);
+        window.addEventListener("blur", handleWindowBlur);
+        return () => {
+            window.removeEventListener("pointermove", handleWindowPointerMove);
+            window.removeEventListener("pointerup", handleWindowPointerUp, true);
+            window.removeEventListener("pointercancel", handleWindowPointerCancel, true);
+            window.removeEventListener("mouseup", handleWindowMouseUp, true);
+            window.removeEventListener("blur", handleWindowBlur);
+        };
+    }, [cancelReferenceDrag, finishReferenceDrag, updateReferenceDrag]);
+
+    const handleReferencePointerDown = useCallback((event: ReactPointerEvent<HTMLButtonElement>, rowId: string, columnIndex: number, hasMaterial: boolean) => {
+        if (readOnly || !hasMaterial) return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        lastPointerRef.current = { x: event.clientX, y: event.clientY };
+        dragStartRef.current = { x: event.clientX, y: event.clientY, pointerId: event.pointerId, cell: { rowId, columnIndex } };
+        suppressClickRef.current = false;
+    }, [readOnly]);
+
+    const handleReferencePointerMove = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        lastPointerRef.current = { x: event.clientX, y: event.clientY };
+        updateReferenceDrag(event.clientX, event.clientY);
+    }, [updateReferenceDrag]);
+
+    const handleReferencePointerUp = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+        finishReferenceDrag(event.clientX, event.clientY);
+    }, [finishReferenceDrag]);
+
+    const handleReferencePointerCancel = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+        cancelReferenceDrag();
+    }, [cancelReferenceDrag]);
+
+    return (
+        <div
+            data-canvas-no-zoom
+            data-canvas-wheel-scroll
+            data-canvas-batch-table
+            className="relative flex h-full w-full flex-col overflow-visible pt-9 text-xs"
+            style={{ color: theme.node.text }}
+            onPointerDown={(event) => event.stopPropagation()}
+            onMouseDown={(event) => {
+                // Only the top padding is a node drag surface; keep child controls isolated.
+                if (event.target !== event.currentTarget) event.stopPropagation();
+            }}
+        >
+            <input
+                type="file"
+                ref={uploadInputRef}
+                accept="image/*"
+                className="hidden"
+                aria-hidden="true"
+                tabIndex={-1}
+                onChange={(event) => {
+                    const file = event.currentTarget.files?.[0];
+                    const target = uploadTargetRef.current;
+                    uploadTargetRef.current = null;
+                    event.currentTarget.value = "";
+                    if (file && target) onUploadReference(target.rowId, target.columnIndex, file);
+                }}
+            />
+            {!readOnly ? <BatchReferenceHandles columns={referenceColumns} textColumns={textColumns} theme={theme} onAdd={onAddReferenceColumn} onAddText={onAddTextColumn} onConnectStart={onConnectStart} onConnectDrop={onConnectDrop} /> : null}
+            <div
+                className="flex min-h-12 flex-wrap items-center gap-2 border-b px-3 py-2"
+                style={{ borderColor: theme.node.stroke, background: theme.node.panel }}
+                onMouseDown={(event) => event.stopPropagation()}
+            >
+                <Select size="small" value={table.operation} options={OPERATION_OPTIONS} disabled={readOnly} onChange={(operation) => onPatchTable({ operation })} className="w-28" aria-label="批量任务类型" />
+                <span className="opacity-55">并发</span>
+                <Select
+                    size="small"
+                    value={table.concurrency}
+                    options={[10, 50, 100].map((value) => ({ value, label: String(value) }))}
+                    disabled={readOnly}
+                    onChange={(concurrency) => onPatchTable({ concurrency })}
+                    className="w-20"
+                    aria-label="并发数"
+                />
+                <span className="opacity-55">
+                    {referenceColumns.length} 组参考 · 已连 {connectedImageCount} 张图 · 完成 {completed}/{table.rows.length}
+                </span>
+                {!readOnly ? (
+                    <div className="flex min-w-[280px] max-w-[min(42vw,520px)] flex-1 items-center gap-2">
+                        <span className="shrink-0 font-medium" style={{ color: theme.node.muted }}>全局提示词</span>
+                        <Input.TextArea
+                            size="small"
+                            value={globalPrompt}
+                            autoSize={{ minRows: 1, maxRows: 2 }}
+                            placeholder="输入一次，覆盖所有任务提示词"
+                            aria-label="全局提示词"
+                            onChange={(event) => onPatchTable({ globalPrompt: event.target.value })}
+                        />
+                        {hasGlobalPrompt ? <span className="shrink-0 text-[11px]" style={{ color: theme.accent.primary }}>已覆盖全部</span> : null}
+                    </div>
+                ) : null}
+                {!readOnly ? (
+                    <div className="ml-auto flex gap-1.5">
+                        <Button size="small" icon={<Rows3 className="size-3.5" />} onClick={onFillRows}>
+                            同步连线
+                        </Button>
+                        <Button size="small" icon={<Plus className="size-3.5" />} onClick={onAddRow}>
+                            加一行
+                        </Button>
+                        <Button size="small" type="primary" icon={<Play className="size-3.5" />} disabled={!table.rows.length} onClick={() => onGenerate()}>
+                            生成未完成项
+                        </Button>
+                    </div>
+                ) : null}
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-auto rounded-b-[inherit]" onMouseDown={(event) => event.stopPropagation()}>
+                <div className="sticky top-0 z-10 grid min-w-[900px] items-center gap-2 border-b px-3 py-2 font-medium" style={{ borderColor: theme.node.stroke, gridTemplateColumns, background: theme.node.panel, color: theme.node.muted }}>
+                    <span>#</span>
+                    <span>任务</span>
+                    {referenceColumns.map((column) => (
+                        <ReferenceColumnHeader key={column.id} column={column} theme={theme} readOnly={readOnly} dragging={draggingColumnId === column.id} onDragStart={() => setDraggingColumnId(column.id)} onDragEnd={() => setDraggingColumnId(null)} onDrop={(targetColumnId) => { if (draggingColumnId) onReorderReferenceColumns(draggingColumnId, targetColumnId); setDraggingColumnId(null); }} />
+                    ))}
+                    {textColumns.map((column, index) => (
+                        <span key={column.id} className={index === 0 ? "border-l pl-3" : undefined} style={index === 0 ? { borderColor: theme.node.stroke } : undefined}>{column.label}</span>
+                    ))}
+                    <span>任务提示词</span>
+                    <span>生成结果</span>
+                    <span />
+                </div>
+                {table.rows.length ? (
+                    table.rows.map((row, index) => {
+                        const output = row.outputNodeId ? nodeById.get(row.outputNodeId) : undefined;
+                        const item = batchItemByRowId.get(row.id);
+                        const status = rowStatus(item, output);
+                        return (
+                            <div key={row.id} className="grid min-w-[900px] items-center gap-2 border-b px-3 py-3" style={{ borderColor: theme.node.stroke, gridTemplateColumns }}>
+                                <span className="tabular-nums opacity-45">{index + 1}</span>
+                                <div className="flex items-center gap-1.5">
+                                    <Switch size="small" checked={row.enabled !== false} disabled={readOnly} onChange={(enabled) => onUpdateRow(row.id, { enabled })} aria-label={`任务 ${index + 1}`} />
+                                    <span className="text-[10px]" style={{ color: row.enabled === false ? theme.node.placeholder : theme.accent.primary }}>{row.enabled === false ? "关" : "开"}</span>
+                                </div>
+                                {referenceColumns.map((column, columnIndex) => (
+                                    <ReferenceThumbnail
+                                        key={column.id}
+                                        node={nodeById.get(row.inputNodeIds[columnIndex])}
+                                        theme={theme}
+                                        readOnly={readOnly}
+                                        rowId={row.id}
+                                        columnIndex={columnIndex}
+                                        columnId={column.id}
+                                        draggingColumnId={draggingColumnId}
+                                        isDraggingCell={draggingCell?.rowId === row.id && draggingCell.columnIndex === columnIndex}
+                                        isDropTarget={dropCell?.rowId === row.id && dropCell.columnIndex === columnIndex}
+                                        suppressClickRef={suppressClickRef}
+                                        onReplace={onReplaceReference}
+                                        onUpload={() => { uploadTargetRef.current = { rowId: row.id, columnIndex }; uploadInputRef.current?.click(); }}
+                                        onPointerDown={handleReferencePointerDown}
+                                        onPointerMove={handleReferencePointerMove}
+                                        onPointerUp={handleReferencePointerUp}
+                                        onPointerCancel={handleReferencePointerCancel}
+                                        onLostPointerCapture={handleReferencePointerCancel}
+                                    />
+                                ))}
+                                {textColumns.map((column, columnIndex) => (
+                                    <div key={column.id} className={`${columnIndex === 0 ? "border-l pl-3" : ""} min-w-0`} style={columnIndex === 0 ? { borderColor: theme.node.stroke } : undefined}>
+                                        {table.aiGenerated ? (
+                                            <div className="line-clamp-4 text-[11px] leading-relaxed" style={{ color: theme.node.text }}>
+                                                {row.cells?.[column.id] || ""}
+                                            </div>
+                                        ) : (
+                                            <TextNodeCell node={row.textNodeIds?.[columnIndex] ? nodeById.get(row.textNodeIds[columnIndex]) : undefined} theme={theme} />
+                                        )}
+                                    </div>
+                                ))}
+                                <Input.TextArea value={batchPromptForRow(table, row)} readOnly={readOnly || hasGlobalPrompt} autoSize={{ minRows: 2, maxRows: 4 }} placeholder={hasGlobalPrompt ? "已由全局提示词覆盖" : "描述这一行要生成的画面"} onChange={(event) => onUpdateRow(row.id, { prompt: event.target.value })} />
+                                <div className="flex min-w-0 items-center gap-2">
+                                    {output?.metadata?.content || output?.metadata?.storageKey ? (
+                                        <CachedResourceImage
+                                            eager
+                                            src={output.metadata.previewContent || output.metadata.content}
+                                            storageKey={output.metadata.storageKey}
+                                            alt="生成结果"
+                                            className="size-12 rounded object-cover"
+                                            fallback={<EmptyThumbnail theme={theme} />}
+                                        />
+                                    ) : (
+                                        <EmptyThumbnail theme={theme} />
+                                    )}
+                                    <div className="min-w-0">
+                                        <div className="truncate font-medium">{status.label}</div>
+                                        {!readOnly && status.retryable && batch && item ? (
+                                            <Button type="link" size="small" className="h-auto p-0 text-[11px]" icon={<RefreshCw className="size-3" />} onClick={() => onRetryItem(batch.id, item.id)}>
+                                                重试
+                                            </Button>
+                                        ) : null}
+                                    </div>
+                                    {status.loading ? <LoaderCircle className="ml-auto size-4 animate-spin opacity-55" /> : null}
+                                </div>
+                                {!readOnly ? (
+                                    <Tooltip title="移除这一行">
+                                        <Button type="text" size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => onRemoveRow(row.id)} />
+                                    </Tooltip>
+                                ) : (
+                                    <span />
+                                )}
+                            </div>
+                        );
+                    })
+                ) : (
+                    <div className="grid h-40 place-items-center px-5 text-center" style={{ color: theme.node.muted }}>连接图片后会自动生成任务；点击缩略图可替换素材，拖动参考图列可调整顺序。</div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function ReferenceColumnHeader({ column, theme, readOnly, dragging, onDragStart, onDragEnd, onDrop }: { column: { id: string; label: string }; theme: CanvasTheme; readOnly: boolean; dragging: boolean; onDragStart: () => void; onDragEnd: () => void; onDrop: (columnId: string) => void }) {
+    return (
+        <span
+            draggable={!readOnly}
+            className="flex min-w-0 items-center gap-1 rounded px-1 py-1 transition-opacity"
+            style={{ opacity: dragging ? 0.45 : 1, cursor: readOnly ? "default" : "grab" }}
+            title={readOnly ? column.label : `${column.label}：拖动调整顺序`}
+            onDragStart={(event) => {
+                event.dataTransfer.effectAllowed = "move";
+                event.dataTransfer.setData("text/plain", column.id);
+                onDragStart();
+            }}
+            onDragEnd={onDragEnd}
+            onDragOver={(event) => { if (!readOnly) { event.preventDefault(); event.dataTransfer.dropEffect = "move"; } }}
+            onDrop={(event) => { event.preventDefault(); onDrop(column.id); }}
+        >
+            {!readOnly ? <GripVertical className="size-3 shrink-0 opacity-45" /> : null}
+            <span className="truncate">{column.label}</span>
+        </span>
+    );
+}
+
+function BatchTextHandle(props: Omit<React.ComponentProps<typeof BatchReferenceHandle>, "column"> & { column: { id: string; label: string } }) {
+    return <BatchReferenceHandle {...props} column={props.column} handlePrefix="text" />;
+}
+
+function BatchReferenceHandles({
+    columns,
+    textColumns,
+    theme,
+    onAdd,
+    onAddText,
+    onConnectStart,
+    onConnectDrop,
+}: {
+    columns: ReturnType<typeof batchReferenceColumns>;
+    textColumns: ReturnType<typeof batchTextColumns>;
+    theme: CanvasTheme;
+    onAdd: () => void;
+    onAddText: () => void;
+    onConnectStart: (event: ReactPointerEvent, handleId: string) => void;
+    onConnectDrop?: (event: ReactPointerEvent, handleId: string) => void;
+}) {
+    const commonStyle = { left: 0, width: 44, height: 44, transform: "translate(-50%, -50%)", transformOrigin: "center" };
+    const referenceAddTop = BATCH_REFERENCE_HANDLE_TOP + columns.length * BATCH_REFERENCE_HANDLE_GAP;
+    const textTop = batchTextHandleTop(columns.length);
+    return (
+        <>
+            {columns.map((column, index) => (
+                <BatchReferenceHandle key={column.id} column={column} top={BATCH_REFERENCE_HANDLE_TOP + index * BATCH_REFERENCE_HANDLE_GAP} badge={String(index + 1)} theme={theme} commonStyle={commonStyle} onConnectStart={onConnectStart} onConnectDrop={onConnectDrop} />
+            ))}
+            {textColumns.map((column, index) => (
+                <BatchTextHandle key={column.id} column={column} top={textTop + index * BATCH_REFERENCE_HANDLE_GAP} badge={`T${index + 1}`} theme={theme} commonStyle={commonStyle} onConnectStart={onConnectStart} onConnectDrop={onConnectDrop} />
+            ))}
+            {columns.length < MAX_BATCH_REFERENCE_COLUMNS ? (
+                <Tooltip title={`新增参考图 ${columns.length + 1}`} placement="left">
+                    <button type="button" aria-label={`新增参考图 ${columns.length + 1}`} className="group absolute z-[var(--node-z-handle)] grid place-items-center rounded-full outline-none" style={{ ...commonStyle, top: referenceAddTop, color: theme.accent.primary }} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); onAdd(); }}>
+                        <span className="grid size-[22px] place-items-center rounded-full border shadow-sm transition-transform group-hover:scale-110 group-focus-visible:scale-110" style={{ background: theme.node.panel, borderColor: theme.accent.primary }}><Plus className="size-3" /></span>
+                    </button>
+                </Tooltip>
+            ) : null}
+            {textColumns.length < MAX_BATCH_TEXT_COLUMNS ? (
+                <Tooltip title={`新增文字 ${textColumns.length + 1}`} placement="left">
+                    <button type="button" aria-label={`新增文字 ${textColumns.length + 1}`} className="group absolute z-[var(--node-z-handle)] grid place-items-center rounded-full outline-none" style={{ ...commonStyle, top: textTop + textColumns.length * BATCH_REFERENCE_HANDLE_GAP, color: theme.node.text }} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); onAddText(); }}>
+                        <span className="grid size-[22px] place-items-center rounded-full border shadow-sm transition-transform group-hover:scale-110 group-focus-visible:scale-110" style={{ background: theme.node.panel, borderColor: theme.node.stroke }}><Plus className="size-3" /></span>
+                    </button>
+                </Tooltip>
+            ) : null}
+        </>
+    );
+}
+
+function BatchReferenceHandle({
+    column,
+    top,
+    badge,
+    theme,
+    commonStyle,
+    onConnectStart,
+    onConnectDrop,
+    handlePrefix = "reference",
+}: {
+    column: { id: string; label: string };
+    top: number;
+    badge: string;
+    theme: CanvasTheme;
+    commonStyle: { left: number; width: number; height: number; transform: string; transformOrigin: string };
+    onConnectStart: (event: ReactPointerEvent, handleId: string) => void;
+    onConnectDrop?: (event: ReactPointerEvent, handleId: string) => void;
+    handlePrefix?: "reference" | "text";
+}) {
+    const [hovered, setHovered] = useState(false);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const handleId = handlePrefix === "text" ? batchTextHandleId(column.id) : batchReferenceHandleId(column.id);
+    const reset = useCallback(() => {
+        setHovered(false);
+        setOffset({ x: 0, y: 0 });
+    }, []);
+    const update = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+        const bounds = event.currentTarget.getBoundingClientRect();
+        const dx = event.clientX - (bounds.left + bounds.width / 2);
+        const dy = event.clientY - (bounds.top + bounds.height / 2);
+        const limit = 16;
+        setOffset({ x: Math.max(-limit, Math.min(limit, dx)), y: Math.max(-limit, Math.min(limit, dy)) });
+    }, []);
+    return (
+        <Tooltip title={`磁吸到${column.label}`} placement="left">
+            <button
+                type="button"
+                aria-label={`${column.label}连线点`}
+                className="group absolute z-[var(--node-z-handle)] grid place-items-center rounded-full outline-none"
+                style={{ ...commonStyle, top, cursor: "crosshair" }}
+                onPointerEnter={(event) => {
+                    setHovered(true);
+                    update(event);
+                }}
+                onPointerMove={update}
+                onPointerLeave={reset}
+                onPointerDown={(event) => {
+                    event.stopPropagation();
+                    onConnectStart(event, handleId);
+                }}
+                onPointerUp={(event) => {
+                    event.stopPropagation();
+                    onConnectDrop?.(event, handleId);
+                }}
+            >
+                <span
+                    className="grid size-[22px] place-items-center rounded-full border text-[9px] font-semibold shadow-sm transition-transform duration-100 group-hover:scale-125 group-focus-visible:scale-125"
+                    style={{ transform: `translate(${offset.x}px, ${offset.y}px) scale(${hovered ? 1.08 : 1})`, background: theme.node.panel, borderColor: handlePrefix === "text" ? theme.node.stroke : theme.accent.primary, color: handlePrefix === "text" ? theme.node.text : theme.accent.primary }}
+                >
+                    {badge}
+                </span>
+            </button>
+        </Tooltip>
+    );
+}
+function TextNodeCell({ node, theme }: { node?: CanvasNodeData; theme: CanvasTheme }) {
+    const content = node?.metadata?.content || node?.metadata?.prompt;
+    return <div className="min-h-12 max-w-full overflow-hidden rounded border px-2 py-1.5 text-[11px] leading-4" style={{ borderColor: theme.node.stroke, color: content ? theme.node.text : theme.node.placeholder }} title={content || "未连接文字节点"}>{content || "未连接文字"}</div>;
+}
+
+function ReferenceThumbnail({ node, theme, readOnly, rowId, columnIndex, columnId, draggingColumnId, isDraggingCell, isDropTarget, suppressClickRef, onReplace, onUpload, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture }: {
+    node?: CanvasNodeData;
+    theme: CanvasTheme;
+    readOnly: boolean;
+    rowId: string;
+    columnIndex: number;
+    columnId: string;
+    draggingColumnId: string | null;
+    isDraggingCell: boolean;
+    isDropTarget: boolean;
+    suppressClickRef: MutableRefObject<boolean>;
+    onReplace: (node: CanvasNodeData) => void;
+    onUpload: () => void;
+    onPointerDown: (event: ReactPointerEvent<HTMLButtonElement>, rowId: string, columnIndex: number, hasMaterial: boolean) => void;
+    onPointerMove: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+    onPointerUp: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+    onPointerCancel: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+    onLostPointerCapture: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+}) {
+    const cellData = { "data-batch-reference-cell": true, "data-batch-row-id": rowId, "data-batch-column-index": String(columnIndex) };
+    const dropStyle = isDropTarget ? { boxShadow: `0 0 0 2px ${theme.accent.primary}, 0 0 0 5px ${theme.accent.primary}33` } : undefined;
+    if (!node || (!node.metadata?.content && !node.metadata?.storageKey)) {
+        return (
+            <Tooltip title={readOnly ? "未连接参考图" : "点击上传参考图"}>
+                <button
+                    type="button"
+                    draggable={false}
+                    className="group relative grid size-16 min-w-0 place-items-center rounded-md border border-dashed outline-none transition-all focus-visible:ring-2"
+                    style={{ borderColor: isDropTarget ? theme.accent.primary : theme.node.stroke, background: `${theme.node.panel}88`, ...dropStyle }}
+                    disabled={readOnly}
+                    onClick={(event) => { event.stopPropagation(); if (!suppressClickRef.current) onUpload(); }}
+                    aria-label={`${columnId}，点击上传图片`}
+                    {...cellData}
+                    onPointerDown={(event) => onPointerDown(event, rowId, columnIndex, false)}
+                    onPointerMove={onPointerMove}
+                    onPointerUp={onPointerUp}
+                    onPointerCancel={onPointerCancel}
+                    onLostPointerCapture={onLostPointerCapture}
+                    onDragStart={(event) => event.preventDefault()}
+                >
+                    <EmptyThumbnail theme={theme} sizeClass="size-16 border-0" />
+                    {!readOnly ? <span className="pointer-events-none absolute inset-x-1 bottom-1 rounded bg-black/60 px-1 py-1 text-center text-[9px] text-white opacity-0 transition-opacity group-hover:opacity-100">点击上传</span> : null}
+                </button>
+            </Tooltip>
+        );
+    }
+    const fallback = <EmptyThumbnail theme={theme} />;
+    return (
+        <Tooltip title={readOnly ? (node.title || "图片") : `${node.title || "图片"} · 点击替换，拖动排序`}>
+            <button
+                type="button"
+                draggable={false}
+                className="group relative size-16 min-w-0 touch-none overflow-hidden rounded-md border outline-none transition-all hover:-translate-y-0.5 hover:shadow-md focus-visible:ring-2"
+                style={{ borderColor: isDropTarget || draggingColumnId === columnId ? theme.accent.primary : theme.node.stroke, opacity: isDraggingCell || draggingColumnId === columnId ? 0.55 : 1, ...dropStyle }}
+                aria-label={readOnly ? node.title || "参考图" : `${node.title || "参考图"}，点击替换素材`}
+                onClick={(event) => { event.stopPropagation(); if (!readOnly && !draggingColumnId && !suppressClickRef.current) onReplace(node); }}
+                {...cellData}
+                onPointerDown={(event) => onPointerDown(event, rowId, columnIndex, true)}
+                onPointerMove={onPointerMove}
+                onPointerUp={onPointerUp}
+                onPointerCancel={onPointerCancel}
+                onLostPointerCapture={onLostPointerCapture}
+                onDragStart={(event) => event.preventDefault()}
+            >
+                <CachedResourceImage draggable={false} eager src={node.metadata.previewContent || node.metadata.content} storageKey={node.metadata.storageKey} alt={node.title || "参考图"} className="size-16 select-none object-cover" fallback={fallback} />
+                {!readOnly ? <span className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-center gap-1 bg-black/55 px-1 py-1 text-[9px] text-white opacity-0 transition-opacity group-hover:opacity-100"><Upload className="size-3" />替换</span> : null}
+            </button>
+        </Tooltip>
+    );
+}
+
+function EmptyThumbnail({ theme, sizeClass = "size-12" }: { theme: CanvasTheme; sizeClass?: string }): ReactNode {
+    return (
+        <div className={`grid ${sizeClass} shrink-0 place-items-center rounded border`} style={{ borderColor: theme.node.stroke, color: theme.node.placeholder }}>
+            <ImageIcon className="size-5" />
+        </div>
+    );
+}
+
+function rowStatus(item: CanvasGenerationBatchItem | undefined, output: CanvasNodeData | undefined) {
+    if (output?.metadata?.content) return { label: "生成完成", loading: false, retryable: false };
+    if (item?.status === "failed") return { label: item.errorDetails || "生成失败", loading: false, retryable: true };
+    if (item?.status === "cancelled") return { label: "已停止", loading: false, retryable: false };
+    if (item && ["waiting", "submitting", "queued", "running"].includes(item.status))
+        return { label: item.status === "waiting" ? "等待中" : item.status === "submitting" ? "正在提交" : item.status === "queued" ? "已排队" : "生成中", loading: true, retryable: false };
+    if (output?.metadata?.status === "error") return { label: output.metadata.errorDetails || "生成失败", loading: false, retryable: false };
+    return { label: "待生成", loading: false, retryable: false };
+}
diff --git a/web/src/components/canvas/canvas-node-prompt-panel.tsx b/web/src/components/canvas/canvas-node-prompt-panel.tsx
index 03a01ff0d..285e8c9e6 100644
--- a/web/src/components/canvas/canvas-node-prompt-panel.tsx
+++ b/web/src/components/canvas/canvas-node-prompt-panel.tsx
@@ -1,1109 +1,1141 @@
-import { Button, Image as AntImage, InputNumber, Modal, Popover } from "antd";
-import { Tooltip } from "@/components/ui/base/tooltip";
-import { useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
-import { ArrowLeftRight, ArrowUp, AtSign, Boxes, Camera, ChevronDown, FileText, GripVertical, ImageIcon, ImagePlus, Link2, LoaderCircle, Maximize2, Music2, Pencil, SlidersHorizontal, UserRound, Video, WandSparkles, X } from "lucide-react";
-
-import { ModelPicker } from "@/components/model-picker";
-import { defaultConfig, modelOptionName, resolveModelChannel, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
-import { resolveCanvasGenerationModel } from "@/lib/canvas/canvas-project-generation";
-import { clampPromptEditorModalSize, PROMPT_EDITOR_VIEWPORT_MARGIN } from "@/lib/canvas/canvas-prompt-editor-size";
-import { CreditSymbol, requestCreditCost } from "@/constant/credits";
-import { canvasThemes } from "@/lib/canvas-theme";
-import { modelQuoteRequest } from "@/lib/model-pricing";
-import { normalizeVideoDuration, normalizeVideoResolution } from "@/lib/video-generation-options";
-import { modelRequestOptions, resolveCompatibleModel, resolveModelGenerationDefaults, defaultImageParamsForModel, type ModelRequirements } from "@/lib/model-selection";
-import { navigateToSettings } from "@/lib/settings-navigation";
-import { useActiveTheme } from "@/stores/canvas/use-canvas-theme-store";
-import { useUserStore } from "@/stores/use-user-store";
-import { CanvasCameraControlPopover } from "./canvas-camera-control-popover";
-import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
-import { CanvasAudioSettingsPopover, type CanvasAudioSettingKey } from "./canvas-audio-settings-popover";
-import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
-import { CanvasVideoSettingsPopover } from "./canvas-video-settings-popover";
-import { CanvasVideoPromptTools } from "./canvas-video-prompt-tools";
-import { CanvasPresetPicker, type CanvasPromptPreset } from "./canvas-preset-picker";
-import { CanvasPortraitTexturePopover } from "./canvas-portrait-texture-popover";
-import { CanvasPromptOptimizerDrawer } from "./canvas-prompt-optimizer-drawer";
-import { CanvasNodeType, type CanvasGenerationMode, type CanvasNodeData, type CanvasNodeMetadata, type CanvasWorkspaceMode } from "@/types/canvas";
-import { autoMentionCanvasResourceReferences, canvasResourceMentionToken, normalizeCanvasNodeMentionTokens, type CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
-import { promptOptimizerPlugin, PROMPT_OPTIMIZER_PLUGIN_ID } from "@/lib/plugins/builtin/prompt-optimizer";
-import { createPluginHostContext } from "@/services/plugin-host";
-import { usePluginStore } from "@/stores/use-plugin-store";
-import { useResolvedCanvasResourceReferences } from "./use-resolved-canvas-resource-references";
-import { quoteLogicalModel } from "@/services/api/logical-models";
-
-export type CanvasNodeGenerationMode = CanvasGenerationMode;
-
-type CanvasNodePromptPanelProps = {
-    projectId: string;
-    node: CanvasNodeData;
-    isRunning: boolean;
-    onPromptChange: (nodeId: string, prompt: string) => void;
-    onConfigChange: (nodeId: string, patch: Partial<CanvasNodeMetadata>) => void;
-    onGenerate: (nodeId: string, mode: CanvasNodeGenerationMode, prompt: string) => void;
-    mentionReferences?: CanvasResourceReference[];
-    onAddReference?: (nodeId: string, reference: CanvasResourceReference) => CanvasResourceReference | undefined;
-    onRemoveReference?: (nodeId: string, reference: CanvasResourceReference) => void;
-    onReorderReferences?: (nodeId: string, orderedNodeIds: string[]) => void;
-    onReplaceReference?: (nodeId: string, oldReference: CanvasResourceReference, sourceNodeId: string) => void;
-    onReplaceReferenceFiles?: (nodeId: string, oldReference: CanvasResourceReference, files: File[]) => void;
-    onClose?: () => void;
-    onNodeMouseDown?: (event: ReactPointerEvent, nodeId: string) => void;
-    onImageSettingsOpenChange?: (open: boolean) => void;
-    workspaceMode?: CanvasWorkspaceMode;
-};
-
-type CanvasTheme = (typeof canvasThemes)[keyof typeof canvasThemes];
-
-const PROMPT_REFERENCE_SHELF_HEIGHT = 58;
-// Keep the compact editor readable at rest: three 20px lines plus 12px vertical padding.
-const PROMPT_EDITOR_MIN_HEIGHT = 72;
-const PROMPT_EDITOR_EXPANDED_MIN_HEIGHT = 200;
-const PROMPT_EDITOR_LINE_HEIGHT = 20;
-const PROMPT_EDITOR_EXPANDED_LINE_HEIGHT = 24;
-const PROMPT_EDITOR_VERTICAL_PADDING = 12;
-const PROMPT_EDITOR_EXPANDED_VERTICAL_PADDING = 20;
-const PROMPT_EDITOR_MAX_LINES = 8;
-const PROMPT_EDITOR_EXPANDED_MAX_LINES = 14;
-const PROMPT_EDITOR_MODAL_WIDTH = "min(1200px, 92vw)";
-const PROMPT_EDITOR_MODAL_DEFAULT_WIDTH = 1200;
-const PROMPT_EDITOR_MODAL_DEFAULT_HEIGHT = 420;
-
-export function CanvasNodePromptPanel({ projectId, node, isRunning, onPromptChange, onConfigChange, onGenerate, mentionReferences = [], onAddReference, onRemoveReference, onReorderReferences, onReplaceReference, onReplaceReferenceFiles, onClose, onNodeMouseDown, onImageSettingsOpenChange, workspaceMode = "professional" }: CanvasNodePromptPanelProps) {
-    const globalConfig = useEffectiveConfig();
-    const themeName = useActiveTheme();
-    const theme = canvasThemes[themeName];
-    const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
-    const promptOptimizerInstallation = usePluginStore((state) => state.installations.find((item) => item.manifest.id === PROMPT_OPTIMIZER_PLUGIN_ID));
-    const promptOptimizerEnabled = usePluginStore((state) => state.pluginStates[PROMPT_OPTIMIZER_PLUGIN_ID]?.effectiveEnabled ?? Boolean(state.installations.find((item) => item.manifest.id === PROMPT_OPTIMIZER_PLUGIN_ID)?.enabled));
-    const simpleMode = workspaceMode === "simple";
-    const mode = defaultMode(node.type);
-    const hasTextContent = node.type === CanvasNodeType.Text && Boolean(node.metadata?.content?.trim());
-    const hasImageContent = node.type === CanvasNodeType.Image && Boolean(node.metadata?.content);
-    const savedPrompt = node.metadata?.composerContent ?? node.metadata?.prompt ?? "";
-    const [prompt, setPrompt] = useState(savedPrompt);
-    const [presetOpen, setPresetOpen] = useState(false);
-    const [expandedPresetOpen, setExpandedPresetOpen] = useState(false);
-    const [expandedPromptOpen, setExpandedPromptOpen] = useState(false);
-    const [expandedModalSize, setExpandedModalSize] = useState<{ width: number; height: number } | null>(null);
-    const expandedModalRef = useRef<HTMLDivElement>(null);
-    const [promptContentHeight, setPromptContentHeight] = useState(() => estimatePromptContentHeight(savedPrompt, false));
-    const [expandedPromptContentHeight, setExpandedPromptContentHeight] = useState(() => estimatePromptContentHeight(savedPrompt, true));
-    const [manualPromptHeight, setManualPromptHeight] = useState<number | null>(null);
-    const [paramsExpanded, setParamsExpanded] = useState(false); // #98 决策2：B区参数区折叠状态（手风琴）
-    const [promptOptimizerOpen, setPromptOptimizerOpen] = useState(false);
-    const [autoLinkEnabled, setAutoLinkEnabled] = useState(true);
-    const resolvedMentionReferences = useResolvedCanvasResourceReferences(mentionReferences, { projectId });
-    const normalizedSavedPrompt = useMemo(() => normalizeCanvasNodeMentionTokens(savedPrompt, mentionReferences), [mentionReferences, savedPrompt]);
-    const activeReferences = resolvedMentionReferences.filter((item) => item.active && item.kind !== "skill");
-    const requirements: ModelRequirements = {
-        capability: mode,
-        input: {
-            textCount: (prompt.trim() ? 1 : 0) + activeReferences.filter((item) => item.kind === "text").length,
-            imageCount: activeReferences.filter((item) => item.kind === "image").length,
-            videoCount: activeReferences.filter((item) => item.kind === "video").length,
-            audioCount: activeReferences.filter((item) => item.kind === "audio").length,
-            characterCount: activeReferences.filter((item) => item.kind === "character").length,
-        },
-        videoOperation: node.metadata?.videoEditOperation,
-        videoSeconds: mode === "video" ? node.metadata?.seconds || globalConfig.videoSeconds : undefined,
-        options: modelRequestOptions({
-            ...globalConfig,
-            size: node.metadata?.size || globalConfig.size,
-            quality: node.metadata?.quality || globalConfig.quality,
-            count: String(node.metadata?.count || globalConfig.count),
-            transparentBackground: node.metadata?.transparentBackground || globalConfig.transparentBackground,
-            videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds,
-            vquality: node.metadata?.vquality || globalConfig.vquality,
-            videoGenerateAudio: node.metadata?.generateAudio || globalConfig.videoGenerateAudio,
-            videoWatermark: node.metadata?.watermark || globalConfig.videoWatermark,
-            audioVoice: node.metadata?.audioVoice || globalConfig.audioVoice,
-            audioFormat: node.metadata?.audioFormat || globalConfig.audioFormat,
-            audioSpeed: node.metadata?.audioSpeed || globalConfig.audioSpeed,
-        }, mode),
-    };
-    const config = buildNodeConfig(globalConfig, node, mode, requirements);
-    const resolvedRequirements: ModelRequirements = {
-        ...requirements,
-        options: modelRequestOptions(config, mode),
-        videoSeconds: mode === "video" ? config.videoSeconds : undefined,
-    };
-    const promptOptimizerProvider = useMemo(() => {
-        if (!promptOptimizerEnabled || !promptOptimizerInstallation || !promptOptimizerPlugin.createPromptOptimizer) return null;
-        return promptOptimizerPlugin.createPromptOptimizer(createPluginHostContext(promptOptimizerPlugin, promptOptimizerInstallation, globalConfig));
-    }, [globalConfig, promptOptimizerEnabled, promptOptimizerInstallation]);
-    const generationCount = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
-    const priceChannel = resolveModelChannel(config, config.model);
-    const configuredCredits = requestCreditCost({
-        channelMode: priceChannel.scope === "system" ? "remote" : "local",
-        modelCosts: priceChannel.modelCosts,
-        model: modelOptionName(config.model),
-        count: mode === "image" ? generationCount : 1,
-        seconds: mode === "video" ? config.videoSeconds : 1,
-        capability: mode,
-        config,
-        requirements: resolvedRequirements,
-    });
-    const quoteRequest = modelQuoteRequest(config, config.model, mode, resolvedRequirements);
-    const quoteRequestKey = JSON.stringify(quoteRequest || null);
-    const [quotedCredits, setQuotedCredits] = useState<number | null>(null);
-    const credits = quotedCredits ?? configuredCredits;
-    const activeReferenceCount = activeReferences.length;
-    const videoFrameOptions = resolvedMentionReferences.filter((item) => item.active && item.kind === "image").map((item) => ({ nodeId: item.nodeId, label: item.label, title: item.title, previewUrl: item.previewUrl }));
-    const hasVideoPromptTools = mode === "video" && !simpleMode && videoFrameOptions.length > 0;
-    const monochromeAccent = theme.node.activeStroke;
-    const composerTokens = {
-        "--canvas-composer-surface": theme.node.panel,
-        "--canvas-composer-control-surface": theme.toolbar.itemHover,
-        "--canvas-composer-control-hover": theme.toolbar.activeBg,
-        "--canvas-composer-shadow": theme.node.shadow,
-        "--cn-text": theme.node.text,
-    } as CSSProperties;
-    const composerSurfaceStyle = {
-        ...composerTokens,
-        background: theme.node.panel,
-        color: theme.node.text,
-        boxShadow: theme.node.shadow,
-    } as CSSProperties;
-    const controlSurface = "var(--canvas-composer-control-surface)";
-    const promptBounds = promptEditorBounds(false, activeReferenceCount > 0);
-    const expandedPromptBounds = promptEditorBounds(true, activeReferenceCount > 0);
-    const composerHeight = clampPromptHeight(manualPromptHeight ?? promptContentHeight + (activeReferenceCount ? PROMPT_REFERENCE_SHELF_HEIGHT : 0), promptBounds);
-    const expandedComposerHeight = clampPromptHeight(expandedPromptContentHeight + (activeReferenceCount ? PROMPT_REFERENCE_SHELF_HEIGHT : 0), expandedPromptBounds);
-    const measureExpandedModalSize = () => {
-        const rect = expandedModalRef.current?.getBoundingClientRect();
-        if (!rect?.width || !rect.height) return { width: PROMPT_EDITOR_MODAL_DEFAULT_WIDTH, height: PROMPT_EDITOR_MODAL_DEFAULT_HEIGHT };
-        return { width: Math.round(rect.width), height: Math.round(rect.height) };
-    };
-    const isSubmitDisabled = !isRunning && !prompt.trim();
-    const canExpandPrompt = mode === "image" || mode === "video";
-    const canOptimizePrompt = Boolean(promptOptimizerProvider) && canExpandPrompt;
-    const isPortraitTexture = mode === "image" && Boolean(node.metadata?.portraitTexture);
-    const autoMentionedPrompt = useMemo(() => autoMentionCanvasResourceReferences(prompt, resolvedMentionReferences), [prompt, resolvedMentionReferences]);
-    const canAutoMention = autoMentionedPrompt !== prompt;
-
-    useEffect(() => {
-        setPrompt(normalizedSavedPrompt);
-        if (normalizedSavedPrompt !== savedPrompt) onPromptChange(node.id, normalizedSavedPrompt);
-    }, [node.id, normalizedSavedPrompt, onPromptChange, savedPrompt]);
-
-    useEffect(() => {
-        setExpandedPromptOpen(false);
-        setExpandedPresetOpen(false);
-        setExpandedModalSize(null);
-        setPromptContentHeight(estimatePromptContentHeight(normalizedSavedPrompt, false));
-        setExpandedPromptContentHeight(estimatePromptContentHeight(normalizedSavedPrompt, true));
-        setManualPromptHeight(null);
-    }, [node.id]);
-
-    useEffect(() => {
-        if (!expandedPromptOpen) return;
-        const constrainSize = () => setExpandedModalSize((size) => {
-            if (!size) return size;
-            const next = clampExpandedModalSize(size);
-            return next.width === size.width && next.height === size.height ? size : next;
-        });
-        constrainSize();
-        window.addEventListener("resize", constrainSize);
-        return () => window.removeEventListener("resize", constrainSize);
-    }, [expandedPromptOpen]);
-
-    useEffect(() => {
-        if (!creditsEnabled || !quoteRequest) {
-            setQuotedCredits(null);
-            return;
-        }
-        const controller = new AbortController();
-        setQuotedCredits(null);
-        quoteLogicalModel(quoteRequest.logicalModelID, quoteRequest.intent, controller.signal)
-            .then(({ quote }) => setQuotedCredits(quote.amountMicrocredits / 1_000_000))
-            .catch(() => {
-                if (!controller.signal.aborted) setQuotedCredits(null);
-            });
-        return () => controller.abort();
-        // quoteRequestKey captures the full normalized request without retriggering on object identity.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [creditsEnabled, quoteRequestKey]);
-
-    const skillReferences = useMemo(() => resolvedMentionReferences.filter((item) => item.kind === "skill"), [resolvedMentionReferences]);
-
-    const updatePrompt = (value: string) => {
-        setPrompt(value);
-        onPromptChange(node.id, value);
-        if (/(^|\s)\/[\p{L}\p{N}_-]*$/u.test(value)) {
-            if (expandedPromptOpen) setExpandedPresetOpen(true);
-            else setPresetOpen(true);
-        }
-    };
-
-    const applyPreset = (preset: CanvasPromptPreset) => {
-        const withoutSlash = prompt.replace(/(^|\s)\/[\p{L}\p{N}_-]*$/u, "$1").trimEnd();
-        updatePrompt(withoutSlash ? `${withoutSlash}\n${preset.prompt}` : preset.prompt);
-    };
-
-    const insertPromptReference = (reference: CanvasResourceReference) => {
-        const insertText = `${canvasResourceMentionToken(reference)} `;
-        const pendingMentionMatch = /@[^\s@，。！？、,.!?;:]*\s*$/.exec(prompt);
-        if (pendingMentionMatch) {
-            const prefix = prompt.slice(0, pendingMentionMatch.index).replace(/\s*$/, "");
-            updatePrompt(prefix ? `${prefix} ${insertText}` : insertText);
-            return;
-        }
-        const basePrompt = prompt.replace(/\s*$/, "");
-        updatePrompt(basePrompt ? `${basePrompt} ${insertText}` : insertText);
-    };
-
-    const submit = () => {
-        const text = prompt.trim();
-        if (!text || isRunning) return false;
-        onGenerate(node.id, mode, text);
-        return true;
-    };
-
-    const submitExpandedPrompt = () => {
-        if (submit()) {
-            setExpandedPresetOpen(false);
-            setExpandedPromptOpen(false);
-        }
-    };
-
-    const renderComposerHeader = (expanded: boolean) => (
-        <div
-            className="canvas-node-composer-header cursor-grab select-none active:cursor-grabbing"
-            data-canvas-node-drag-handle
-            title="拖动节点"
-            onPointerDown={(event) => {
-                const target = event.target instanceof Element ? event.target : null;
-                if (!target?.closest("button, input, textarea, select, a, [contenteditable=\"true\"], [data-canvas-no-drag]")) onNodeMouseDown?.(event, node.id);
-            }}
-        >
-            {isPortraitTexture ? (
-                <>
-                    <CanvasPortraitTexturePopover value={node.metadata?.portraitTexture} placement={expanded ? "topRight" : "topLeft"} onChange={(portraitTexture) => onConfigChange(node.id, { portraitTexture })} />
-                    {activeReferenceCount > 0 ? <span className="canvas-node-composer-reference-heading">{referenceShelfHeading(activeReferences)}</span> : null}
-                </>
-            ) : (
-                <div className="canvas-node-composer-mode">
-                    <span className="grid size-3.5 shrink-0 place-items-center" style={{ color: monochromeAccent }}>
-                        <GenerationModeIcon mode={mode} />
-                    </span>
-                    <span className="truncate text-[var(--fs-tiny)] font-medium">{modeDisplayName(mode)}生成</span>
-                    {activeReferenceCount > 0 ? <span className="canvas-node-composer-reference-heading">{referenceShelfHeading(activeReferences)}</span> : null}
-                </div>
-            )}
-            <div className="ml-auto flex shrink-0 items-center justify-end gap-1">
-            {!simpleMode ? <CanvasPresetPicker mode={mode} skillReferences={skillReferences} open={expanded ? expandedPresetOpen : presetOpen} onOpenChange={expanded ? setExpandedPresetOpen : setPresetOpen} onSelect={applyPreset} dense appearance="quiet" /> : null}
-            {canOptimizePrompt ? (
-                <Tooltip title="用 AI 润色提示词">
-                    <button
-                        type="button"
-                        className="canvas-node-composer-header-action inline-flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5"
-                        onClick={() => setPromptOptimizerOpen(true)}
-                        aria-label="润色提示词"
-                    >
-                        <WandSparkles className="size-3" />
-                        <span className="text-[var(--fs-tiny)] font-medium">润色</span>
-                    </button>
-                </Tooltip>
-            ) : null}
-                {!expanded && canExpandPrompt ? (
-                    <Tooltip title="放大编辑">
-                        <button
-                            type="button"
-                            className="canvas-node-composer-header-action grid size-6 shrink-0 place-items-center rounded-md"
-                            onClick={() => setExpandedPromptOpen(true)}
-                            aria-label="放大编辑提示词"
-                        >
-                            <Maximize2 className="size-3" />
-                        </button>
-                    </Tooltip>
-                ) : null}
-                {!expanded && onClose ? (
-                    <Tooltip title="关闭">
-                        <button
-                            type="button"
-                            className="canvas-node-composer-header-action grid size-6 shrink-0 place-items-center rounded-md"
-                            onClick={onClose}
-                            aria-label="关闭创作面板"
-                        >
-                            <X className="size-3" />
-                        </button>
-                    </Tooltip>
-                ) : null}
-            </div>
-        </div>
-    );
-
-    const renderSubmitButton = (expanded: boolean) => {
-        const showCost = creditsEnabled && credits !== null;
-        const formattedCredits = credits?.toLocaleString("zh-CN", { maximumFractionDigits: 6 });
-        const actionLabel = isRunning ? "生成中" : showCost ? `预计消耗 ${formattedCredits} 积分，生成` : "生成";
-        return (
-            <Button
-                type="text"
-                className={`canvas-node-composer-submit canvas-node-composer-submit-canvas ${showCost ? "has-cost" : ""}`}
-                disabled={isRunning || isSubmitDisabled}
-                style={
-                    {
-                        color: isSubmitDisabled ? theme.node.faint : theme.node.text,
-                        "--canvas-composer-submit-action": isSubmitDisabled ? theme.toolbar.itemHover : monochromeAccent,
-                        "--canvas-composer-submit-action-fg": isSubmitDisabled ? theme.node.faint : theme.canvas.background,
-                    } as CSSProperties
-                }
-                onClick={() => (expanded ? submitExpandedPrompt() : submit())}
-                aria-label={actionLabel}
-                title={actionLabel}
-            >
-                {showCost ? (
-                    <span className="canvas-node-composer-submit-cost">
-                        <CreditSymbol />
-                        <span>{formattedCredits}</span>
-                    </span>
-                ) : null}
-                <span className="canvas-node-composer-submit-action" aria-hidden>
-                    {isRunning ? <LoaderCircle className="size-3.5 animate-spin motion-reduce:animate-none" /> : <ArrowUp className="size-3.5" strokeWidth={2.4} />}
-                </span>
-            </Button>
-        );
-    };
-
-    const renderComposerControls = (expanded: boolean) =>
-        simpleMode ? (
-            <div className="canvas-node-composer-footer">
-                <span className="min-w-0 truncate px-2 text-[var(--fs-tiny)]" style={{ color: theme.node.muted }}>
-                    {activeReferenceCount ? `已连接 ${activeReferenceCount} 个素材` : "将使用默认模型与参数"}
-                </span>
-                <ReferenceToolsPopover
-                    canAutoMention={canAutoMention}
-                    autoLinkEnabled={autoLinkEnabled}
-                    onAutoMention={() => updatePrompt(autoMentionedPrompt)}
-                    onAutoLinkEnabledChange={setAutoLinkEnabled}
-                    accent={monochromeAccent}
-                    compact
-                />
-                {renderSubmitButton(expanded)}
-            </div>
-        ) : (
-            <div className="canvas-node-composer-footer">
-                <div className={expanded ? "min-w-0 flex-1" : "canvas-node-composer-model"}>
-                    <ModelPicker
-                        className="!h-7 !w-full !min-w-0 !text-[var(--fs-tiny)] !font-normal [&_img]:!size-3 [&_.lucide]:!size-3"
-                        fullWidth
-                        config={config}
-                        value={config.model}
-                        onChange={(model) => onConfigChange(node.id, mode === "image" ? { model, ...defaultImageParamsForModel(config, model) } : { model })}
-                        capability={mode}
-                        requirements={resolvedRequirements}
-                        onMissingConfig={() => navigateToSettings({ continueCreation: true })}
-                        showSelectedPrice={false}
-                        showOptionPrices={creditsEnabled}
-                        variant="creation"
-                        showConfiguredModelName
-                    />
-                </div>
-                <div className="ml-auto flex min-w-0 shrink-0 items-center gap-1">
-                    <ReferenceToolsPopover
-                        canAutoMention={canAutoMention}
-                        autoLinkEnabled={autoLinkEnabled}
-                        onAutoMention={() => updatePrompt(autoMentionedPrompt)}
-                        onAutoLinkEnabledChange={setAutoLinkEnabled}
-                        accent={monochromeAccent}
-                        compact={!expanded}
-                    />
-                    {mode === "text" ? (
-                        <Tooltip title={`文本生成份数（默认 1，可在生成配置中调整）`}>
-                            <InputNumber
-                                size="small"
-                                min={1}
-                                max={15}
-                                value={Math.max(1, Math.min(15, Math.floor(Math.abs(Number(node.metadata?.textCount) || 1))))}
-                                onChange={(value) => onConfigChange(node.id, { textCount: Math.max(1, Math.min(15, Math.floor(Math.abs(Number(value)) || 1))) })}
-                                aria-label="文本生成份数"
-                                className="!w-14 !h-7 [&_.ant-input-number-input]:!text-[var(--fs-tiny)]"
-                            />
-                        </Tooltip>
-                    ) : mode === "image" ? (
-                        // 图片模式下，显示相机配置与镜头配置
-                        <>
-                            <CanvasCameraControlPopover
-                                cameraControl={node.metadata?.cameraControl}
-                                onCameraControlChange={(options) => onConfigChange(node.id, { cameraControl: options })}
-                                theme={theme}
-                                compact={!expanded}
-                            />
-                            <CanvasImageSettingsPopover
-                                config={config}
-                                placement={expanded ? "topRight" : "topLeft"}
-                                buttonClassName="canvas-node-composer-settings-trigger [&>span]:min-w-0 [&_.lucide]:!size-3"
-                                onConfigChange={(key, value) => onConfigChange(node.id, key === "count" ? { count: Number(value) || 1 } : { [key]: value })}
-                                onMissingConfig={() => navigateToSettings({ continueCreation: true })}
-                                onOpenChange={expanded ? undefined : onImageSettingsOpenChange}
-                            />
-                        </>
-                    ) : mode === "video" ? (
-                        <CanvasVideoSettingsPopover
-                            config={config}
-                            buttonClassName="canvas-node-composer-settings-trigger [&>span]:min-w-0 [&_.lucide]:!size-3"
-                            onConfigChange={(key, value) => onConfigChange(node.id, videoConfigPatch(key, value))}
-                        />
-                    ) : mode === "audio" ? (
-                        <CanvasAudioSettingsPopover
-                            config={config}
-                            buttonClassName="canvas-node-composer-settings-trigger [&>span]:min-w-0 [&_.lucide]:!size-3"
-                            onConfigChange={(key, value) => onConfigChange(node.id, audioConfigPatch(key, value))}
-                        />
-                    ) : null}
-                    {renderSubmitButton(expanded)}
-                </div>
-            </div>
-        );
-
-    const renderPromptEditor = (expanded: boolean, fill = false) => {
-        const bounds = expanded ? expandedPromptBounds : promptBounds;
-        const height = expanded ? expandedComposerHeight : composerHeight;
-        return (
-            <>
-                <div className={fill ? "canvas-node-composer-editor flex-1" : "canvas-node-composer-editor"} style={fill ? { minHeight: bounds.min } : { height, ...(expanded ? { flexShrink: 0 } : null) }}>
-                    <ConnectedReferenceShelf
-                        targetNodeId={node.id}
-                        references={resolvedMentionReferences}
-                        theme={theme}
-                        onInsert={insertPromptReference}
-                        onRemove={(reference) => onRemoveReference?.(node.id, reference)}
-                        onReorder={onReorderReferences ? (orderedNodeIds) => onReorderReferences(node.id, orderedNodeIds) : undefined}
-                        onReplaceReference={onReplaceReference ? (oldReference, sourceNodeId) => onReplaceReference(node.id, oldReference, sourceNodeId) : undefined}
-                        onReplaceReferenceFiles={onReplaceReferenceFiles ? (oldReference, files) => onReplaceReferenceFiles(node.id, oldReference, files) : undefined}
-                    />
-                    <CanvasResourceMentionTextarea
-                        value={prompt}
-                        references={resolvedMentionReferences}
-                        onSelectReference={onAddReference ? (reference) => onAddReference(node.id, reference) : undefined}
-                        includeAssetLibrary
-                        onChange={updatePrompt}
-                        autoLinkEnabled={autoLinkEnabled}
-                        onReferenceFilesDrop={onReplaceReferenceFiles ? (reference, files) => onReplaceReferenceFiles(node.id, reference, files) : undefined}
-                        onContentSizeChange={expanded ? setExpandedPromptContentHeight : setPromptContentHeight}
-                        containerClassName="min-h-0 flex-1"
-                        className={expanded
-                            ? "thin-scrollbar h-full w-full resize-none overflow-y-auto border-none bg-transparent px-3 py-2.5 text-[var(--fs-body-lg)] leading-6 !outline-none !ring-0 !shadow-none focus:!outline-none focus:!ring-0 focus:!shadow-none placeholder:text-current placeholder:opacity-35"
-                            : "thin-scrollbar h-full w-full resize-none overflow-y-auto border-none bg-transparent px-2.5 py-1.5 text-[var(--fs-body)] leading-5 !outline-none !ring-0 !shadow-none focus:!outline-none focus:!ring-0 focus:!shadow-none placeholder:text-current placeholder:opacity-35"}
-                        style={{ color: theme.node.text, outline: "none", boxShadow: "none" }}
-                        placeholder={promptPlaceholder(mode, hasImageContent, hasTextContent)}
-                        aria-label={`${modeDisplayName(mode)}提示词`}
-                    />
-                </div>
-                {!expanded && <PromptResizeHandle
-                    height={height}
-                    min={bounds.min}
-                    max={bounds.max}
-                    onResize={setManualPromptHeight}
-                />}
-            </>
-        );
-    };
-
-    return (
-        <CanvasPromptOptimizerDrawer
-            open={promptOptimizerOpen}
-            prompt={prompt}
-            generationMode={mode === "image" || mode === "video" ? mode : "image"}
-            targetModel={modelOptionName(config.model) || config.model}
-            targetProtocol={priceChannel.modelCosts?.find((item) => item.model === modelOptionName(config.model))?.protocol || priceChannel.interfaceType}
-            config={globalConfig}
-            optimizerModel={globalConfig.textModel}
-            references={activeReferences}
-            provider={promptOptimizerProvider}
-            onClose={() => setPromptOptimizerOpen(false)}
-            onApply={(nextPrompt) => updatePrompt(nextPrompt)}
-        >
-            <div
-                className="canvas-node-composer"
-                style={composerSurfaceStyle}
-                onMouseDown={(event) => event.stopPropagation()}
-                onPointerDown={(event) => event.stopPropagation()}
-                onWheel={(event) => event.stopPropagation()}
-            >
-            {renderComposerHeader(false)}
-
-            {renderPromptEditor(false)}
-
-            {/* B区 参数区（对应 #98 决策2：默认折叠，手风琴展开）*/}
-            {hasVideoPromptTools ? (
-                <div className="canvas-node-composer-parameters overflow-hidden">
-                    <button
-                        type="button"
-                        className="canvas-node-composer-parameters-toggle flex w-full items-center gap-1.5 rounded-[var(--r-md)] px-2 py-1 text-[var(--fs-micro)] font-medium transition-colors"
-                        style={{ color: theme.node.muted }}
-                        onClick={() => setParamsExpanded(!paramsExpanded)}
-                        aria-expanded={paramsExpanded}
-                        aria-label={paramsExpanded ? "收起参数" : "展开参数"}
-                    >
-                        <SlidersHorizontal className="size-3" strokeWidth={1.8} />
-                        <span className="flex-1 text-left">参数</span>
-                        <ChevronDown className={`size-3 transition-transform duration-200 ${paramsExpanded ? "rotate-180" : ""}`} strokeWidth={1.8} />
-                    </button>
-                    {paramsExpanded ? (
-                        <div className="pt-1">
-                            <CanvasVideoPromptTools metadata={node.metadata} frameOptions={videoFrameOptions} onMetadataChange={(patch) => onConfigChange(node.id, patch)} />
-                        </div>
-                    ) : null}
-                </div>
-            ) : null}
-
-            {renderComposerControls(false)}
-
-            <Modal
-                className="canvas-prompt-editor-modal"
-                open={expandedPromptOpen}
-                title={null}
-                footer={null}
-                centered
-                width={expandedModalSize ? expandedModalSize.width : PROMPT_EDITOR_MODAL_WIDTH}
-                style={{ maxWidth: `calc(100vw - ${PROMPT_EDITOR_VIEWPORT_MARGIN}px)` }}
-                destroyOnHidden
-                onCancel={() => {
-                    setExpandedPresetOpen(false);
-                    setExpandedPromptOpen(false);
-                }}
-                styles={{
-                    container: { border: 0, borderRadius: "var(--canvas-composer-radius)", padding: 0, overflow: "hidden", background: theme.node.panel, boxShadow: theme.node.shadow },
-                    body: { minHeight: 0, padding: 0 },
-                }}
-            >
-                <div ref={expandedModalRef} className="relative flex min-h-0 flex-col" style={{ ...composerTokens, color: theme.node.text, maxHeight: `calc(100dvh - ${PROMPT_EDITOR_VIEWPORT_MARGIN}px)`, ...(expandedModalSize ? { height: expandedModalSize.height } : null) }}>
-                    <div className="flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto p-3">
-                        <div className="shrink-0 pr-8">{renderComposerHeader(true)}</div>
-                        {renderPromptEditor(true, Boolean(expandedModalSize))}
-                        {hasVideoPromptTools ? (
-                            <div className="canvas-node-composer-parameters shrink-0">
-                                <CanvasVideoPromptTools metadata={node.metadata} frameOptions={videoFrameOptions} onMetadataChange={(patch) => onConfigChange(node.id, patch)} />
-                            </div>
-                        ) : null}
-                        <div className="shrink-0">{renderComposerControls(true)}</div>
-                    </div>
-                    <PromptModalResizeHandle size={expandedModalSize} measure={measureExpandedModalSize} onResize={setExpandedModalSize} accent={theme.node.muted} />
-                </div>
-            </Modal>
-
-            </div>
-        </CanvasPromptOptimizerDrawer>
-    );
-}
-
-function ReferenceToolsPopover({ canAutoMention, autoLinkEnabled, onAutoMention, onAutoLinkEnabledChange, accent, compact }: { canAutoMention: boolean; autoLinkEnabled: boolean; onAutoMention: () => void; onAutoLinkEnabledChange: (enabled: boolean) => void; accent: string; compact: boolean }) {
-    return (
-        <Popover
-            trigger="click"
-            placement="topRight"
-            rootClassName="canvas-reference-tools-popover"
-            arrow={false}
-            align={{ offset: [0, -8] }}
-            styles={{ root: { width: "min(280px, calc(100vw - 24px))" }, container: { width: "100%" }, content: { width: "100%", padding: 10 } }}
-            content={
-                <div className="space-y-1.5">
-                    <div>
-                        <div className="text-sm font-medium leading-5">智能引用</div>
-                        <div className="mt-0.5 text-xs leading-4 text-black/50 dark:text-white/50">输入素材序号或名称后按 Tab，可快速引用</div>
-                    </div>
-                    <div className="flex min-h-6 items-center justify-between gap-3">
-                        <div className="flex items-center gap-2 text-sm"><Link2 className="size-3.5" />AutoLink</div>
-                        <button
-                            type="button"
-                            role="switch"
-                            aria-checked={autoLinkEnabled}
-                            aria-label={autoLinkEnabled ? "关闭 AutoLink" : "开启 AutoLink"}
-                            className="canvas-reference-autolink-switch relative inline-flex h-5 w-9 items-center rounded-full border transition-colors"
-                            style={{ background: autoLinkEnabled ? `${accent}14` : "transparent", borderColor: autoLinkEnabled ? accent : "color-mix(in srgb, currentColor 22%, transparent)", color: accent }}
-                            onClick={() => onAutoLinkEnabledChange(!autoLinkEnabled)}
-                        >
-                            <span className={`size-3.5 rounded-full shadow-sm transition-transform ${autoLinkEnabled ? "translate-x-[18px]" : "translate-x-0.5"}`} style={{ background: autoLinkEnabled ? accent : "currentColor" }} />
-                        </button>
-                    </div>
-                    <button
-                        type="button"
-                        className="canvas-reference-tools-mention-button flex h-7 w-full items-center justify-center gap-1.5 rounded-md border px-2.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-45"
-                        style={{ borderColor: accent, color: accent, background: "transparent" }}
-                        disabled={!canAutoMention}
-                        onClick={onAutoMention}
-                    >
-                        <AtSign className="size-3.5" />一键引用全文
-                    </button>
-                </div>
-            }
-        >
-            <button
-                type="button"
-                className={`canvas-node-composer-settings-trigger canvas-node-composer-reference-tools-trigger inline-flex shrink-0 items-center gap-1 ${compact ? "is-compact" : ""}`}
-                aria-label="打开智能引用"
-                title="智能引用"
-            >
-                <SlidersHorizontal className="size-3.5" />
-                {!compact ? <span>引用</span> : null}
-            </button>
-        </Popover>
-    );
-}
-
-function GenerationModeIcon({ mode }: { mode: CanvasNodeGenerationMode }) {
-    if (mode === "image") return <ImagePlus className="size-3" />;
-    if (mode === "video") return <Video className="size-3" />;
-    if (mode === "audio") return <Music2 className="size-3" />;
-    return <FileText className="size-3" />;
-}
-
-function modeDisplayName(mode: CanvasNodeGenerationMode) {
-    if (mode === "image") return "图片";
-    if (mode === "video") return "视频";
-    if (mode === "audio") return "音频";
-    return "文本";
-}
-
-function referenceShelfHeading(references: CanvasResourceReference[]) {
-    const label = references.every((reference) => reference.kind === "image" || reference.kind === "character") ? "参考图" : "参考素材";
-    return `${label} · ${references.length}`;
-}
-
-function ConnectedReferenceShelf({
-    targetNodeId,
-    references,
-    theme,
-    onInsert,
-    onRemove,
-    onReorder,
-    onReplaceReference,
-    onReplaceReferenceFiles,
-}: {
-    targetNodeId?: string;
-    references: CanvasResourceReference[];
-    theme: CanvasTheme;
-    onInsert: (reference: CanvasResourceReference) => void;
-    onRemove?: (reference: CanvasResourceReference) => void;
-    onReorder?: (orderedNodeIds: string[]) => void;
-    onReplaceReference?: (oldReference: CanvasResourceReference, sourceNodeId: string) => void;
-    onReplaceReferenceFiles?: (oldReference: CanvasResourceReference, files: File[]) => void;
-}) {
-    const activeReferences = references.filter((item) => item.active && item.kind !== "skill");
-    const [imagePreview, setImagePreview] = useState<CanvasResourceReference | null>(null);
-    const [draggedReferenceId, setDraggedReferenceId] = useState<string | null>(null);
-    const [dropTargetReferenceId, setDropTargetReferenceId] = useState<string | null>(null);
-    if (!activeReferences.length) return null;
-
-    const moveReference = (sourceId: string, targetId: string) => {
-        if (!onReorder || sourceId === targetId) return;
-        const sourceIndex = activeReferences.findIndex((reference) => reference.nodeId === sourceId);
-        const targetIndex = activeReferences.findIndex((reference) => reference.nodeId === targetId);
-        if (sourceIndex < 0 || targetIndex < 0) return;
-        const ordered = [...activeReferences];
-        const [moved] = ordered.splice(sourceIndex, 1);
-        ordered.splice(targetIndex, 0, moved);
-        onReorder(ordered.map((reference) => reference.nodeId));
-    };
-
-    const moveReferenceByOffset = (sourceId: string, offset: -1 | 1) => {
-        const sourceIndex = activeReferences.findIndex((reference) => reference.nodeId === sourceId);
-        const target = activeReferences[sourceIndex + offset];
-        if (!target) return;
-        moveReference(sourceId, target.nodeId);
-    };
-
-    return (
-        <>
-            <div className="canvas-node-composer-references" role="group" aria-label="已连接素材">
-                <div className="canvas-node-composer-references-track thin-scrollbar">
-                    {activeReferences.map((reference, index) => {
-                        const canPreview = Boolean(reference.previewUrl) && (reference.kind === "image" || reference.kind === "character" || reference.kind === "video");
-                        const isDropTarget = dropTargetReferenceId === reference.id;
-                        return (
-                            <span
-                                key={reference.id}
-                                className="canvas-node-reference-chip relative"
-                                data-reference-chip="true"
-                                data-reference-id={reference.id}
-                                data-reference-node-id={reference.nodeId}
-                                data-reference-label={reference.label}
-                                data-reference-title={reference.title || reference.label}
-                                data-target-node-id={targetNodeId}
-                                data-dragging={draggedReferenceId === reference.nodeId || undefined}
-                                data-drop-target={isDropTarget ? "true" : undefined}
-                                style={{
-                                    boxShadow: isDropTarget ? "0 0 0 2px #3b82f6, 0 0 16px rgba(59, 130, 246, 0.45)" : undefined,
-                                }}
-                                onDragOver={(event) => {
-                                    if (draggedReferenceId) {
-                                        if (!onReorder) return;
-                                        event.preventDefault();
-                                        event.dataTransfer.dropEffect = "move";
-                                        return;
-                                    }
-                                    const hasImageNode = event.dataTransfer.types.includes("application/x-canvas-image-node-id");
-                                    const hasFiles = event.dataTransfer.types.includes("Files");
-                                    if (hasImageNode || hasFiles) {
-                                        event.preventDefault();
-                                        event.stopPropagation();
-                                        event.dataTransfer.dropEffect = "copy";
-                                        if (dropTargetReferenceId !== reference.id) {
-                                            setDropTargetReferenceId(reference.id);
-                                        }
-                                    }
-                                }}
-                                onDragLeave={(event) => {
-                                    if (!event.currentTarget.contains(event.relatedTarget as Node)) {
-                                        if (dropTargetReferenceId === reference.id) {
-                                            setDropTargetReferenceId(null);
-                                        }
-                                    }
-                                }}
-                                onDrop={(event) => {
-                                    if (dropTargetReferenceId === reference.id) {
-                                        setDropTargetReferenceId(null);
-                                    }
-                                    if (draggedReferenceId) {
-                                        event.preventDefault();
-                                        const sourceId = draggedReferenceId || event.dataTransfer.getData("text/plain");
-                                        setDraggedReferenceId(null);
-                                        moveReference(sourceId, reference.nodeId);
-                                        return;
-                                    }
-                                    const sourceNodeId = event.dataTransfer.getData("application/x-canvas-image-node-id");
-                                    if (sourceNodeId && sourceNodeId !== reference.nodeId && onReplaceReference) {
-                                        event.preventDefault();
-                                        event.stopPropagation();
-                                        onReplaceReference(reference, sourceNodeId);
-                                        return;
-                                    }
-                                    const files = Array.from(event.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
-                                    if (files.length && onReplaceReferenceFiles) {
-                                        event.preventDefault();
-                                        event.stopPropagation();
-                                        onReplaceReferenceFiles(reference, files);
-                                        return;
-                                    }
-                                }}
-                            >
-                                {onReorder ? (
-                                    <button
-                                        type="button"
-                                        className="canvas-node-reference-drag-handle"
-                                        draggable
-                                        title={`拖动调整 ${reference.label} 的顺序`}
-                                        aria-label={`调整 ${reference.label} 的顺序；使用左右方向键也可移动`}
-                                        onDragStart={(event) => {
-                                            setDraggedReferenceId(reference.nodeId);
-                                            event.dataTransfer.effectAllowed = "move";
-                                            event.dataTransfer.setData("text/plain", reference.nodeId);
-                                        }}
-                                        onDragEnd={() => setDraggedReferenceId(null)}
-                                        onKeyDown={(event) => {
-                                            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
-                                            event.preventDefault();
-                                            moveReferenceByOffset(reference.nodeId, event.key === "ArrowLeft" ? -1 : 1);
-                                        }}
-                                        onPointerDown={(event) => event.stopPropagation()}
-                                    >
-                                        <GripVertical className="size-3" />
-                                    </button>
-                                ) : null}
-                                <span className="canvas-node-reference-order" aria-hidden>{index + 1}</span>
-                                <button
-                                    type="button"
-                                    className="canvas-node-reference-preview"
-                                    style={{ background: theme.toolbar.itemHover, color: theme.node.text, outlineColor: theme.node.activeStroke }}
-                                    title={canPreview ? `预览 ${reference.title}` : `插入 @${reference.label}`}
-                                    aria-label={canPreview ? `预览 ${reference.title}` : `插入 @${reference.label}`}
-                                    onClick={() => (canPreview ? setImagePreview(reference) : onInsert(reference))}
-                                >
-                                    <ReferenceThumbnail reference={reference} />
-                                    {canPreview ? (
-                                        <span className="canvas-node-reference-preview-hint" aria-hidden="true">
-                                            <Maximize2 className="size-3" />
-                                        </span>
-                                    ) : null}
-                                </button>
-                                <button type="button" className="canvas-node-reference-label" title={`插入 @${reference.label}`} onClick={() => onInsert(reference)}>
-                                    <span className="opacity-55">@</span>
-                                    <span className="truncate">{reference.label}</span>
-                                </button>
-                                {onRemove ? (
-                                    <button
-                                        type="button"
-                                        className="canvas-node-reference-remove"
-                                        style={{ background: theme.toolbar.panel, borderColor: theme.node.stroke, color: theme.node.text }}
-                                        title="移除参考并删除连接"
-                                        aria-label={`移除参考 ${reference.label}`}
-                                        onClick={(event) => {
-                                            event.stopPropagation();
-                                            onRemove(reference);
-                                        }}
-                                        onPointerDown={(event) => event.stopPropagation()}
-                                    >
-                                        <X className="size-3" />
-                                    </button>
-                                ) : null}
-                            </span>
-                        );
-                    })}
-                </div>
-            </div>
-            {imagePreview?.previewUrl ? (
-                <AntImage
-                    src={imagePreview.previewUrl}
-                    alt={imagePreview.title || imagePreview.label}
-                    style={{ display: "none" }}
-                    preview={{
-                        open: true,
-                        movable: true,
-                        minScale: 0.5,
-                        maxScale: 12,
-                        scaleStep: 0.25,
-                        onOpenChange: (open) => !open && setImagePreview(null),
-                    }}
-                />
-            ) : null}
-        </>
-    );
-}
-
-function ReferenceThumbnail({ reference }: { reference: CanvasResourceReference }) {
-    if (reference.kind === "image" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full object-cover" />;
-    if (reference.kind === "video" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full bg-black object-cover" loading="lazy" decoding="async" />;
-    if (reference.kind === "character" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full bg-black/5 object-contain" />;
-
-    const Icon = reference.sourceType === CanvasNodeType.Drawing ? Pencil : reference.kind === "character" ? UserRound : reference.kind === "audio" ? Music2 : reference.kind === "video" ? Video : reference.kind === "image" ? ImageIcon : FileText;
-    return (
-        <span className="grid size-full place-items-center bg-black/10 text-current dark:bg-white/10">
-            <Icon className="size-3.5 opacity-75" />
-        </span>
-    );
-}
-
-function PromptResizeHandle({ height, min, max, onResize }: { height: number; min: number; max: number; onResize: (height: number) => void }) {
-    const dragRef = useRef<{ pointerId: number; startY: number; startHeight: number } | null>(null);
-
-    const finishResize = (event: ReactPointerEvent<HTMLButtonElement>) => {
-        if (dragRef.current?.pointerId !== event.pointerId) return;
-        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
-        dragRef.current = null;
-    };
-
-    const handleKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
-        if (event.key === "ArrowUp") {
-            event.preventDefault();
-            onResize(Math.max(min, height - 8));
-        } else if (event.key === "ArrowDown") {
-            event.preventDefault();
-            onResize(Math.min(max, height + 8));
-        } else if (event.key === "Home") {
-            event.preventDefault();
-            onResize(min);
-        } else if (event.key === "End") {
-            event.preventDefault();
-            onResize(max);
-        }
-    };
-
-    return (
-        <button
-            type="button"
-            className="canvas-node-composer-resize-handle"
-            role="separator"
-            aria-label="调整提示词输入高度"
-            aria-orientation="horizontal"
-            aria-valuemin={min}
-            aria-valuemax={max}
-            aria-valuenow={Math.round(height)}
-            onKeyDown={handleKeyDown}
-            onPointerDown={(event) => {
-                if (event.button !== 0) return;
-                event.preventDefault();
-                event.stopPropagation();
-                dragRef.current = { pointerId: event.pointerId, startY: event.clientY, startHeight: height };
-                event.currentTarget.setPointerCapture(event.pointerId);
-            }}
-            onPointerMove={(event) => {
-                const drag = dragRef.current;
-                if (!drag || drag.pointerId !== event.pointerId) return;
-                if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
-                    dragRef.current = null;
-                    return;
-                }
-                if ((event.buttons & 1) === 0) {
-                    finishResize(event);
-                    return;
-                }
-                onResize(Math.min(max, Math.max(min, drag.startHeight + event.clientY - drag.startY)));
-            }}
-            onPointerUp={finishResize}
-            onPointerCancel={finishResize}
-            onLostPointerCapture={(event) => {
-                if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
-            }}
-        >
-            <span aria-hidden />
-        </button>
-    );
-}
-
-function clampExpandedModalSize(size: { width: number; height: number }) {
-    return clampPromptEditorModalSize(size, { width: window.innerWidth, height: window.innerHeight });
-}
-
-function PromptModalResizeHandle({ size, measure, onResize, accent }: { size: { width: number; height: number } | null; measure: () => { width: number; height: number }; onResize: (size: { width: number; height: number }) => void; accent: string }) {
-    const dragRef = useRef<{ pointerId: number; startX: number; startY: number; width: number; height: number } | null>(null);
-
-    const finishResize = (event: ReactPointerEvent<HTMLButtonElement>) => {
-        if (dragRef.current?.pointerId !== event.pointerId) return;
-        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
-        dragRef.current = null;
-    };
-
-    const handleKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
-        const step = event.shiftKey ? 40 : 12;
-        const widthDelta = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
-        const heightDelta = event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
-        if (!widthDelta && !heightDelta) return;
-        event.preventDefault();
-        event.stopPropagation();
-        const base = size ?? measure();
-        onResize(clampExpandedModalSize({ width: base.width + widthDelta, height: base.height + heightDelta }));
-    };
-
-    return (
-        <button
-            type="button"
-            className="absolute bottom-1.5 right-1.5 z-10 grid size-5 cursor-nwse-resize touch-none place-items-center opacity-60 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2"
-            aria-label="拖动调整窗口大小"
-            title="拖动调整窗口宽高，也可用方向键调整"
-            onKeyDown={handleKeyDown}
-            onPointerDown={(event) => {
-                if (event.button !== 0 || !event.isPrimary) return;
-                event.preventDefault();
-                event.stopPropagation();
-                const base = measure();
-                dragRef.current = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, ...base };
-                onResize(clampExpandedModalSize(base));
-                event.currentTarget.setPointerCapture(event.pointerId);
-            }}
-            onPointerMove={(event) => {
-                const drag = dragRef.current;
-                if (!drag || drag.pointerId !== event.pointerId) return;
-                if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
-                    dragRef.current = null;
-                    return;
-                }
-                if ((event.buttons & 1) === 0) {
-                    finishResize(event);
-                    return;
-                }
-                event.stopPropagation();
-                // The modal stays centered, so each edge moves by half the size change.
-                onResize(clampExpandedModalSize({ width: drag.width + 2 * (event.clientX - drag.startX), height: drag.height + 2 * (event.clientY - drag.startY) }));
-            }}
-            onPointerUp={finishResize}
-            onPointerCancel={finishResize}
-            onLostPointerCapture={(event) => {
-                if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
-            }}
-        >
-            <span aria-hidden className="absolute bottom-1 right-1 size-2 rounded-br border-b-2 border-r-2" style={{ borderColor: accent }} />
-        </button>
-    );
-}
-
-function promptEditorBounds(expanded: boolean, hasReferences: boolean) {
-    const shelfHeight = hasReferences ? PROMPT_REFERENCE_SHELF_HEIGHT : 0;
-    const min = (expanded ? PROMPT_EDITOR_EXPANDED_MIN_HEIGHT : PROMPT_EDITOR_MIN_HEIGHT) + shelfHeight;
-    const max = (expanded ? PROMPT_EDITOR_EXPANDED_LINE_HEIGHT * PROMPT_EDITOR_EXPANDED_MAX_LINES + PROMPT_EDITOR_EXPANDED_VERTICAL_PADDING : PROMPT_EDITOR_LINE_HEIGHT * PROMPT_EDITOR_MAX_LINES + PROMPT_EDITOR_VERTICAL_PADDING) + shelfHeight;
-    return { min, max };
-}
-
-function estimatePromptContentHeight(value: string, expanded: boolean) {
-    if (!value.trim()) return expanded ? PROMPT_EDITOR_EXPANDED_MIN_HEIGHT : PROMPT_EDITOR_MIN_HEIGHT;
-    const charsPerLine = expanded ? 34 : 38;
-    const lineCount = value.split("\n").reduce((total, line) => total + Math.max(1, Math.ceil(Array.from(line).length / charsPerLine)), 0);
-    const lineHeight = expanded ? PROMPT_EDITOR_EXPANDED_LINE_HEIGHT : PROMPT_EDITOR_LINE_HEIGHT;
-    const verticalPadding = expanded ? PROMPT_EDITOR_EXPANDED_VERTICAL_PADDING : PROMPT_EDITOR_VERTICAL_PADDING;
-    return Math.max(expanded ? PROMPT_EDITOR_EXPANDED_MIN_HEIGHT : PROMPT_EDITOR_MIN_HEIGHT, lineCount * lineHeight + verticalPadding);
-}
-
-function clampPromptHeight(height: number, bounds: { min: number; max: number }) {
-    return Math.min(bounds.max, Math.max(bounds.min, height));
-}
-
-function defaultMode(type: CanvasNodeData["type"]): CanvasNodeGenerationMode {
-    return type === CanvasNodeType.Text || type === CanvasNodeType.Skill ? "text" : type === CanvasNodeType.Video ? "video" : type === CanvasNodeType.Audio ? "audio" : "image";
-}
-
-export function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: CanvasNodeGenerationMode, requirements: ModelRequirements): AiConfig {
-    const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : mode === "audio" ? globalConfig.audioModel : globalConfig.textModel;
-    const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
-    const preferredModel = resolveCanvasGenerationModel(globalConfig, node.metadata?.model, mode) || resolveCanvasGenerationModel(globalConfig, defaultModel, mode) || fallbackModel;
-    const model = resolveCompatibleModel(globalConfig, preferredModel, mode === "image" ? { ...requirements, imageSize: node.metadata?.size || globalConfig.size || defaultConfig.size } : requirements) || preferredModel;
-    const defaults = resolveModelGenerationDefaults(
-        globalConfig,
-        model,
-        mode === "image" ? "image" : mode === "video" ? "video" : undefined,
-        mode === "image"
-            ? {
-                  size: node.metadata?.size,
-                  quality: node.metadata?.quality,
-                  transparentBackground: node.metadata?.transparentBackground,
-                  videoWatermark: node.metadata?.watermark,
-                  count: String(node.metadata?.count || globalConfig.canvasImageCount || globalConfig.count || defaultConfig.count),
-              }
-            : {
-                  size: node.metadata?.size,
-                  videoSeconds: node.metadata?.seconds,
-                  vquality: node.metadata?.vquality,
-                  videoGenerateAudio: node.metadata?.generateAudio,
-                  videoWatermark: node.metadata?.watermark,
-              },
-        {
-            size: globalConfig.size || defaultConfig.size,
-            quality: globalConfig.quality || defaultConfig.quality,
-            transparentBackground: globalConfig.transparentBackground || defaultConfig.transparentBackground,
-            count: String(globalConfig.canvasImageCount || globalConfig.count || defaultConfig.count),
-            videoSeconds: globalConfig.videoSeconds || defaultConfig.videoSeconds,
-            vquality: globalConfig.vquality || defaultConfig.vquality,
-            videoGenerateAudio: globalConfig.videoGenerateAudio || defaultConfig.videoGenerateAudio,
-            videoWatermark: globalConfig.videoWatermark || defaultConfig.videoWatermark,
-        },
-    );
-    return {
-        ...globalConfig,
-        model,
-        quality: defaults.quality ?? globalConfig.quality ?? defaultConfig.quality,
-        size: defaults.size ?? globalConfig.size ?? defaultConfig.size,
-        transparentBackground: defaults.transparentBackground ?? "false",
-        videoSeconds: defaults.videoSeconds || normalizeVideoDuration(globalConfig.videoSeconds || defaultConfig.videoSeconds),
-        vquality: defaults.vquality ?? normalizeVideoResolution(globalConfig.vquality || defaultConfig.vquality),
-        videoGenerateAudio: defaults.videoGenerateAudio ?? globalConfig.videoGenerateAudio ?? defaultConfig.videoGenerateAudio,
-        videoWatermark: defaults.videoWatermark ?? globalConfig.videoWatermark ?? defaultConfig.videoWatermark,
-        audioVoice: node.metadata?.audioVoice || globalConfig.audioVoice || defaultConfig.audioVoice,
-        audioFormat: node.metadata?.audioFormat || globalConfig.audioFormat || defaultConfig.audioFormat,
-        audioSpeed: node.metadata?.audioSpeed || globalConfig.audioSpeed || defaultConfig.audioSpeed,
-        audioInstructions: node.metadata?.audioInstructions || globalConfig.audioInstructions || defaultConfig.audioInstructions,
-        count: defaults.count ?? String(node.metadata?.count || (mode === "image" ? globalConfig.canvasImageCount || globalConfig.count : globalConfig.count) || defaultConfig.count),
-    };
-}
-
-function promptPlaceholder(mode: CanvasNodeGenerationMode, hasImageContent: boolean, hasTextContent: boolean) {
-    if (mode === "video") return "描述要生成的视频内容";
-    if (mode === "audio") return "描述要生成的音频内容";
-    if (mode === "image") return hasImageContent ? "输入新提示词，重新生成当前图片" : "描述要生成的图片内容";
-    return hasTextContent ? "请输入你想要将本段文本修改成什么" : "请输入你想要生成的文本内容";
-}
-
-function videoConfigPatch(key: keyof AiConfig, value: string) {
-    if (key === "videoSeconds") return { seconds: value };
-    if (key === "videoGenerateAudio") return { generateAudio: value };
-    if (key === "videoWatermark") return { watermark: value };
-    if (key === "videoArkPrivateAssetUpload") return { arkPrivateAssetUpload: value };
-    return { [key]: value };
-}
-
-function audioConfigPatch(key: CanvasAudioSettingKey, value: string) {
-    if (key === "audioVoice") return { audioVoice: value };
-    if (key === "audioFormat") return { audioFormat: value };
-    if (key === "audioSpeed") return { audioSpeed: value };
-    return { audioInstructions: value };
-}
+import { Button, Image as AntImage, InputNumber, Modal, Popover } from "antd";
+import { Tooltip } from "@/components/ui/base/tooltip";
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
+import { ArrowLeftRight, ArrowUp, AtSign, Boxes, Camera, ChevronDown, FileText, GripVertical, ImageIcon, ImagePlus, LayoutList, Link2, LoaderCircle, Maximize2, Music2, Pencil, SlidersHorizontal, UserRound, Video, WandSparkles, X } from "lucide-react";
+
+import { ModelPicker } from "@/components/model-picker";
+import { defaultConfig, modelOptionName, resolveModelChannel, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { resolveCanvasGenerationModel } from "@/lib/canvas/canvas-project-generation";
+import { clampPromptEditorModalSize, PROMPT_EDITOR_VIEWPORT_MARGIN } from "@/lib/canvas/canvas-prompt-editor-size";
+import { CreditSymbol, requestCreditCost } from "@/constant/credits";
+import { canvasThemes } from "@/lib/canvas-theme";
+import { modelQuoteRequest } from "@/lib/model-pricing";
+import { normalizeVideoDuration, normalizeVideoResolution } from "@/lib/video-generation-options";
+import { modelRequestOptions, resolveCompatibleModel, resolveModelGenerationDefaults, defaultImageParamsForModel, type ModelRequirements } from "@/lib/model-selection";
+import { navigateToSettings } from "@/lib/settings-navigation";
+import { useActiveTheme } from "@/stores/canvas/use-canvas-theme-store";
+import { useUserStore } from "@/stores/use-user-store";
+import { CanvasCameraControlPopover } from "./canvas-camera-control-popover";
+import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
+import { CanvasAudioSettingsPopover, type CanvasAudioSettingKey } from "./canvas-audio-settings-popover";
+import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
+import { CanvasVideoSettingsPopover } from "./canvas-video-settings-popover";
+import { CanvasVideoPromptTools } from "./canvas-video-prompt-tools";
+import { CanvasPresetPicker, type CanvasPromptPreset } from "./canvas-preset-picker";
+import { CanvasPortraitTexturePopover } from "./canvas-portrait-texture-popover";
+import { CanvasPromptOptimizerDrawer } from "./canvas-prompt-optimizer-drawer";
+import { CanvasNodeType, type CanvasGenerationMode, type CanvasNodeData, type CanvasNodeMetadata, type CanvasWorkspaceMode } from "@/types/canvas";
+import { autoMentionCanvasResourceReferences, canvasResourceMentionToken, normalizeCanvasNodeMentionTokens, type CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
+import { promptOptimizerPlugin, PROMPT_OPTIMIZER_PLUGIN_ID } from "@/lib/plugins/builtin/prompt-optimizer";
+import { createPluginHostContext } from "@/services/plugin-host";
+import { usePluginStore } from "@/stores/use-plugin-store";
+import { useResolvedCanvasResourceReferences } from "./use-resolved-canvas-resource-references";
+import { quoteLogicalModel } from "@/services/api/logical-models";
+
+export type CanvasNodeGenerationMode = CanvasGenerationMode;
+
+type CanvasNodePromptPanelProps = {
+    projectId: string;
+    node: CanvasNodeData;
+    isRunning: boolean;
+    onPromptChange: (nodeId: string, prompt: string) => void;
+    onConfigChange: (nodeId: string, patch: Partial<CanvasNodeMetadata>) => void;
+    onGenerate: (nodeId: string, mode: CanvasNodeGenerationMode, prompt: string) => void;
+    mentionReferences?: CanvasResourceReference[];
+    onAddReference?: (nodeId: string, reference: CanvasResourceReference) => CanvasResourceReference | undefined;
+    onRemoveReference?: (nodeId: string, reference: CanvasResourceReference) => void;
+    onReorderReferences?: (nodeId: string, orderedNodeIds: string[]) => void;
+    onReplaceReference?: (nodeId: string, oldReference: CanvasResourceReference, sourceNodeId: string) => void;
+    onReplaceReferenceFiles?: (nodeId: string, oldReference: CanvasResourceReference, files: File[]) => void;
+    onClose?: () => void;
+    onNodeMouseDown?: (event: ReactPointerEvent, nodeId: string) => void;
+    onImageSettingsOpenChange?: (open: boolean) => void;
+    workspaceMode?: CanvasWorkspaceMode;
+    onListGenerate?: (nodeId: string, prompt: string) => void;
+};
+
+type CanvasTheme = (typeof canvasThemes)[keyof typeof canvasThemes];
+
+const PROMPT_REFERENCE_SHELF_HEIGHT = 58;
+// Keep the compact editor readable at rest: three 20px lines plus 12px vertical padding.
+const PROMPT_EDITOR_MIN_HEIGHT = 72;
+const PROMPT_EDITOR_EXPANDED_MIN_HEIGHT = 200;
+const PROMPT_EDITOR_LINE_HEIGHT = 20;
+const PROMPT_EDITOR_EXPANDED_LINE_HEIGHT = 24;
+const PROMPT_EDITOR_VERTICAL_PADDING = 12;
+const PROMPT_EDITOR_EXPANDED_VERTICAL_PADDING = 20;
+const PROMPT_EDITOR_MAX_LINES = 8;
+const PROMPT_EDITOR_EXPANDED_MAX_LINES = 14;
+const PROMPT_EDITOR_MODAL_WIDTH = "min(1200px, 92vw)";
+const PROMPT_EDITOR_MODAL_DEFAULT_WIDTH = 1200;
+const PROMPT_EDITOR_MODAL_DEFAULT_HEIGHT = 420;
+
+export function CanvasNodePromptPanel({ projectId, node, isRunning, onPromptChange, onConfigChange, onGenerate, mentionReferences = [], onAddReference, onRemoveReference, onReorderReferences, onReplaceReference, onReplaceReferenceFiles, onClose, onNodeMouseDown, onImageSettingsOpenChange, workspaceMode = "professional", onListGenerate }: CanvasNodePromptPanelProps) {
+    const globalConfig = useEffectiveConfig();
+    const themeName = useActiveTheme();
+    const theme = canvasThemes[themeName];
+    const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
+    const promptOptimizerInstallation = usePluginStore((state) => state.installations.find((item) => item.manifest.id === PROMPT_OPTIMIZER_PLUGIN_ID));
+    const promptOptimizerEnabled = usePluginStore((state) => state.pluginStates[PROMPT_OPTIMIZER_PLUGIN_ID]?.effectiveEnabled ?? Boolean(state.installations.find((item) => item.manifest.id === PROMPT_OPTIMIZER_PLUGIN_ID)?.enabled));
+    const simpleMode = workspaceMode === "simple";
+    const mode = defaultMode(node.type);
+    const hasTextContent = node.type === CanvasNodeType.Text && Boolean(node.metadata?.content?.trim());
+    const hasImageContent = node.type === CanvasNodeType.Image && Boolean(node.metadata?.content);
+    const savedPrompt = node.metadata?.composerContent ?? node.metadata?.prompt ?? "";
+    const [prompt, setPrompt] = useState(savedPrompt);
+    const [presetOpen, setPresetOpen] = useState(false);
+    const [expandedPresetOpen, setExpandedPresetOpen] = useState(false);
+    const [expandedPromptOpen, setExpandedPromptOpen] = useState(false);
+    const [expandedModalSize, setExpandedModalSize] = useState<{ width: number; height: number } | null>(null);
+    const expandedModalRef = useRef<HTMLDivElement>(null);
+    const [promptContentHeight, setPromptContentHeight] = useState(() => estimatePromptContentHeight(savedPrompt, false));
+    const [expandedPromptContentHeight, setExpandedPromptContentHeight] = useState(() => estimatePromptContentHeight(savedPrompt, true));
+    const [manualPromptHeight, setManualPromptHeight] = useState<number | null>(null);
+    const [paramsExpanded, setParamsExpanded] = useState(false); // #98 决策2：B区参数区折叠状态（手风琴）
+    const [promptOptimizerOpen, setPromptOptimizerOpen] = useState(false);
+    const [autoLinkEnabled, setAutoLinkEnabled] = useState(true);
+    const resolvedMentionReferences = useResolvedCanvasResourceReferences(mentionReferences, { projectId });
+    const normalizedSavedPrompt = useMemo(() => normalizeCanvasNodeMentionTokens(savedPrompt, mentionReferences), [mentionReferences, savedPrompt]);
+    const activeReferences = resolvedMentionReferences.filter((item) => item.active && item.kind !== "skill");
+    const requirements: ModelRequirements = {
+        capability: mode,
+        input: {
+            textCount: (prompt.trim() ? 1 : 0) + activeReferences.filter((item) => item.kind === "text").length,
+            imageCount: activeReferences.filter((item) => item.kind === "image").length,
+            videoCount: activeReferences.filter((item) => item.kind === "video").length,
+            audioCount: activeReferences.filter((item) => item.kind === "audio").length,
+            characterCount: activeReferences.filter((item) => item.kind === "character").length,
+        },
+        videoOperation: node.metadata?.videoEditOperation,
+        videoSeconds: mode === "video" ? node.metadata?.seconds || globalConfig.videoSeconds : undefined,
+        options: modelRequestOptions({
+            ...globalConfig,
+            size: node.metadata?.size || globalConfig.size,
+            quality: node.metadata?.quality || globalConfig.quality,
+            count: String(node.metadata?.count || globalConfig.count),
+            transparentBackground: node.metadata?.transparentBackground || globalConfig.transparentBackground,
+            videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds,
+            vquality: node.metadata?.vquality || globalConfig.vquality,
+            videoGenerateAudio: node.metadata?.generateAudio || globalConfig.videoGenerateAudio,
+            videoWatermark: node.metadata?.watermark || globalConfig.videoWatermark,
+            audioVoice: node.metadata?.audioVoice || globalConfig.audioVoice,
+            audioFormat: node.metadata?.audioFormat || globalConfig.audioFormat,
+            audioSpeed: node.metadata?.audioSpeed || globalConfig.audioSpeed,
+        }, mode),
+    };
+    const config = buildNodeConfig(globalConfig, node, mode, requirements);
+    const resolvedRequirements: ModelRequirements = {
+        ...requirements,
+        options: modelRequestOptions(config, mode),
+        videoSeconds: mode === "video" ? config.videoSeconds : undefined,
+    };
+    const promptOptimizerProvider = useMemo(() => {
+        if (!promptOptimizerEnabled || !promptOptimizerInstallation || !promptOptimizerPlugin.createPromptOptimizer) return null;
+        return promptOptimizerPlugin.createPromptOptimizer(createPluginHostContext(promptOptimizerPlugin, promptOptimizerInstallation, globalConfig));
+    }, [globalConfig, promptOptimizerEnabled, promptOptimizerInstallation]);
+    const generationCount = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
+    const priceChannel = resolveModelChannel(config, config.model);
+    const configuredCredits = requestCreditCost({
+        channelMode: priceChannel.scope === "system" ? "remote" : "local",
+        modelCosts: priceChannel.modelCosts,
+        model: modelOptionName(config.model),
+        count: mode === "image" ? generationCount : 1,
+        seconds: mode === "video" ? config.videoSeconds : 1,
+        capability: mode,
+        config,
+        requirements: resolvedRequirements,
+    });
+    const quoteRequest = modelQuoteRequest(config, config.model, mode, resolvedRequirements);
+    const quoteRequestKey = JSON.stringify(quoteRequest || null);
+    const [quotedCredits, setQuotedCredits] = useState<number | null>(null);
+    const credits = quotedCredits ?? configuredCredits;
+    const activeReferenceCount = activeReferences.length;
+    const videoFrameOptions = resolvedMentionReferences.filter((item) => item.active && item.kind === "image").map((item) => ({ nodeId: item.nodeId, label: item.label, title: item.title, previewUrl: item.previewUrl }));
+    const hasVideoPromptTools = mode === "video" && !simpleMode && videoFrameOptions.length > 0;
+    const monochromeAccent = theme.node.activeStroke;
+    const composerTokens = {
+        "--canvas-composer-surface": theme.node.panel,
+        "--canvas-composer-control-surface": theme.toolbar.itemHover,
+        "--canvas-composer-control-hover": theme.toolbar.activeBg,
+        "--canvas-composer-shadow": theme.node.shadow,
+        "--cn-text": theme.node.text,
+    } as CSSProperties;
+    const composerSurfaceStyle = {
+        ...composerTokens,
+        background: theme.node.panel,
+        color: theme.node.text,
+        boxShadow: theme.node.shadow,
+    } as CSSProperties;
+    const controlSurface = "var(--canvas-composer-control-surface)";
+    const promptBounds = promptEditorBounds(false, activeReferenceCount > 0);
+    const expandedPromptBounds = promptEditorBounds(true, activeReferenceCount > 0);
+    const composerHeight = clampPromptHeight(manualPromptHeight ?? promptContentHeight + (activeReferenceCount ? PROMPT_REFERENCE_SHELF_HEIGHT : 0), promptBounds);
+    const expandedComposerHeight = clampPromptHeight(expandedPromptContentHeight + (activeReferenceCount ? PROMPT_REFERENCE_SHELF_HEIGHT : 0), expandedPromptBounds);
+    const measureExpandedModalSize = () => {
+        const rect = expandedModalRef.current?.getBoundingClientRect();
+        if (!rect?.width || !rect.height) return { width: PROMPT_EDITOR_MODAL_DEFAULT_WIDTH, height: PROMPT_EDITOR_MODAL_DEFAULT_HEIGHT };
+        return { width: Math.round(rect.width), height: Math.round(rect.height) };
+    };
+    const isSubmitDisabled = !isRunning && !prompt.trim();
+    const canExpandPrompt = mode === "image" || mode === "video";
+    const canOptimizePrompt = Boolean(promptOptimizerProvider) && canExpandPrompt;
+    const isPortraitTexture = mode === "image" && Boolean(node.metadata?.portraitTexture);
+    const autoMentionedPrompt = useMemo(() => autoMentionCanvasResourceReferences(prompt, resolvedMentionReferences), [prompt, resolvedMentionReferences]);
+    const canAutoMention = autoMentionedPrompt !== prompt;
+
+    useEffect(() => {
+        setPrompt(normalizedSavedPrompt);
+        if (normalizedSavedPrompt !== savedPrompt) onPromptChange(node.id, normalizedSavedPrompt);
+    }, [node.id, normalizedSavedPrompt, onPromptChange, savedPrompt]);
+
+    useEffect(() => {
+        setExpandedPromptOpen(false);
+        setExpandedPresetOpen(false);
+        setExpandedModalSize(null);
+        setPromptContentHeight(estimatePromptContentHeight(normalizedSavedPrompt, false));
+        setExpandedPromptContentHeight(estimatePromptContentHeight(normalizedSavedPrompt, true));
+        setManualPromptHeight(null);
+    }, [node.id]);
+
+    useEffect(() => {
+        if (!expandedPromptOpen) return;
+        const constrainSize = () => setExpandedModalSize((size) => {
+            if (!size) return size;
+            const next = clampExpandedModalSize(size);
+            return next.width === size.width && next.height === size.height ? size : next;
+        });
+        constrainSize();
+        window.addEventListener("resize", constrainSize);
+        return () => window.removeEventListener("resize", constrainSize);
+    }, [expandedPromptOpen]);
+
+    useEffect(() => {
+        if (!creditsEnabled || !quoteRequest) {
+            setQuotedCredits(null);
+            return;
+        }
+        const controller = new AbortController();
+        setQuotedCredits(null);
+        quoteLogicalModel(quoteRequest.logicalModelID, quoteRequest.intent, controller.signal)
+            .then(({ quote }) => setQuotedCredits(quote.amountMicrocredits / 1_000_000))
+            .catch(() => {
+                if (!controller.signal.aborted) setQuotedCredits(null);
+            });
+        return () => controller.abort();
+        // quoteRequestKey captures the full normalized request without retriggering on object identity.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [creditsEnabled, quoteRequestKey]);
+
+    const skillReferences = useMemo(() => resolvedMentionReferences.filter((item) => item.kind === "skill"), [resolvedMentionReferences]);
+
+    const updatePrompt = (value: string) => {
+        setPrompt(value);
+        onPromptChange(node.id, value);
+        if (/(^|\s)\/[\p{L}\p{N}_-]*$/u.test(value)) {
+            if (expandedPromptOpen) setExpandedPresetOpen(true);
+            else setPresetOpen(true);
+        }
+    };
+
+    const applyPreset = (preset: CanvasPromptPreset) => {
+        const withoutSlash = prompt.replace(/(^|\s)\/[\p{L}\p{N}_-]*$/u, "$1").trimEnd();
+        updatePrompt(withoutSlash ? `${withoutSlash}\n${preset.prompt}` : preset.prompt);
+    };
+
+    const insertPromptReference = (reference: CanvasResourceReference) => {
+        const insertText = `${canvasResourceMentionToken(reference)} `;
+        const pendingMentionMatch = /@[^\s@，。！？、,.!?;:]*\s*$/.exec(prompt);
+        if (pendingMentionMatch) {
+            const prefix = prompt.slice(0, pendingMentionMatch.index).replace(/\s*$/, "");
+            updatePrompt(prefix ? `${prefix} ${insertText}` : insertText);
+            return;
+        }
+        const basePrompt = prompt.replace(/\s*$/, "");
+        updatePrompt(basePrompt ? `${basePrompt} ${insertText}` : insertText);
+    };
+
+    const submit = () => {
+        const text = prompt.trim();
+        if (!text || isRunning) return false;
+        if (mode === "text" && node.metadata?.listMode && onListGenerate) {
+            onListGenerate(node.id, text);
+        } else {
+            onGenerate(node.id, mode, text);
+        }
+        return true;
+    };
+
+    const submitExpandedPrompt = () => {
+        if (submit()) {
+            setExpandedPresetOpen(false);
+            setExpandedPromptOpen(false);
+        }
+    };
+
+    const renderComposerHeader = (expanded: boolean) => (
+        <div
+            className="canvas-node-composer-header cursor-grab select-none active:cursor-grabbing"
+            data-canvas-node-drag-handle
+            title="拖动节点"
+            onPointerDown={(event) => {
+                const target = event.target instanceof Element ? event.target : null;
+                if (!target?.closest("button, input, textarea, select, a, [contenteditable=\"true\"], [data-canvas-no-drag]")) onNodeMouseDown?.(event, node.id);
+            }}
+        >
+            {isPortraitTexture ? (
+                <>
+                    <CanvasPortraitTexturePopover value={node.metadata?.portraitTexture} placement={expanded ? "topRight" : "topLeft"} onChange={(portraitTexture) => onConfigChange(node.id, { portraitTexture })} />
+                    {activeReferenceCount > 0 ? <span className="canvas-node-composer-reference-heading">{referenceShelfHeading(activeReferences)}</span> : null}
+                </>
+            ) : (
+                <div className="canvas-node-composer-mode">
+                    <span className="grid size-3.5 shrink-0 place-items-center" style={{ color: monochromeAccent }}>
+                        <GenerationModeIcon mode={mode} />
+                    </span>
+                    <span className="truncate text-[var(--fs-tiny)] font-medium">{modeDisplayName(mode)}生成</span>
+                    {activeReferenceCount > 0 ? <span className="canvas-node-composer-reference-heading">{referenceShelfHeading(activeReferences)}</span> : null}
+                </div>
+            )}
+            <div className="ml-auto flex shrink-0 items-center justify-end gap-1">
+            {!simpleMode ? <CanvasPresetPicker mode={mode} skillReferences={skillReferences} open={expanded ? expandedPresetOpen : presetOpen} onOpenChange={expanded ? setExpandedPresetOpen : setPresetOpen} onSelect={applyPreset} dense appearance="quiet" /> : null}
+            {canOptimizePrompt ? (
+                <Tooltip title="用 AI 润色提示词">
+                    <button
+                        type="button"
+                        className="canvas-node-composer-header-action inline-flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5"
+                        onClick={() => setPromptOptimizerOpen(true)}
+                        aria-label="润色提示词"
+                    >
+                        <WandSparkles className="size-3" />
+                        <span className="text-[var(--fs-tiny)] font-medium">润色</span>
+                    </button>
+                </Tooltip>
+            ) : null}
+                {!expanded && canExpandPrompt ? (
+                    <Tooltip title="放大编辑">
+                        <button
+                            type="button"
+                            className="canvas-node-composer-header-action grid size-6 shrink-0 place-items-center rounded-md"
+                            onClick={() => setExpandedPromptOpen(true)}
+                            aria-label="放大编辑提示词"
+                        >
+                            <Maximize2 className="size-3" />
+                        </button>
+                    </Tooltip>
+                ) : null}
+                {!expanded && onClose ? (
+                    <Tooltip title="关闭">
+                        <button
+                            type="button"
+                            className="canvas-node-composer-header-action grid size-6 shrink-0 place-items-center rounded-md"
+                            onClick={onClose}
+                            aria-label="关闭创作面板"
+                        >
+                            <X className="size-3" />
+                        </button>
+                    </Tooltip>
+                ) : null}
+            </div>
+        </div>
+    );
+
+    const renderSubmitButton = (expanded: boolean) => {
+        const showCost = creditsEnabled && credits !== null;
+        const formattedCredits = credits?.toLocaleString("zh-CN", { maximumFractionDigits: 6 });
+        const actionLabel = isRunning ? "生成中" : showCost ? `预计消耗 ${formattedCredits} 积分，生成` : "生成";
+        return (
+            <Button
+                type="text"
+                className={`canvas-node-composer-submit canvas-node-composer-submit-canvas ${showCost ? "has-cost" : ""}`}
+                disabled={isRunning || isSubmitDisabled}
+                style={
+                    {
+                        color: isSubmitDisabled ? theme.node.faint : theme.node.text,
+                        "--canvas-composer-submit-action": isSubmitDisabled ? theme.toolbar.itemHover : monochromeAccent,
+                        "--canvas-composer-submit-action-fg": isSubmitDisabled ? theme.node.faint : theme.canvas.background,
+                    } as CSSProperties
+                }
+                onClick={() => (expanded ? submitExpandedPrompt() : submit())}
+                aria-label={actionLabel}
+                title={actionLabel}
+            >
+                {showCost ? (
+                    <span className="canvas-node-composer-submit-cost">
+                        <CreditSymbol />
+                        <span>{formattedCredits}</span>
+                    </span>
+                ) : null}
+                <span className="canvas-node-composer-submit-action" aria-hidden>
+                    {isRunning ? <LoaderCircle className="size-3.5 animate-spin motion-reduce:animate-none" /> : <ArrowUp className="size-3.5" strokeWidth={2.4} />}
+                </span>
+            </Button>
+        );
+    };
+
+    const renderComposerControls = (expanded: boolean) =>
+        simpleMode ? (
+            <div className="canvas-node-composer-footer">
+                <span className="min-w-0 truncate px-2 text-[var(--fs-tiny)]" style={{ color: theme.node.muted }}>
+                    {activeReferenceCount ? `已连接 ${activeReferenceCount} 个素材` : "将使用默认模型与参数"}
+                </span>
+                <ReferenceToolsPopover
+                    canAutoMention={canAutoMention}
+                    autoLinkEnabled={autoLinkEnabled}
+                    onAutoMention={() => updatePrompt(autoMentionedPrompt)}
+                    onAutoLinkEnabledChange={setAutoLinkEnabled}
+                    accent={monochromeAccent}
+                    compact
+                />
+                {renderSubmitButton(expanded)}
+            </div>
+        ) : (
+            <div className="canvas-node-composer-footer">
+                <div className={expanded ? "min-w-0 flex-1" : "canvas-node-composer-model"}>
+                    <ModelPicker
+                        className="!h-7 !w-full !min-w-0 !text-[var(--fs-tiny)] !font-normal [&_img]:!size-3 [&_.lucide]:!size-3"
+                        fullWidth
+                        config={config}
+                        value={config.model}
+                        onChange={(model) => onConfigChange(node.id, mode === "image" ? { model, ...defaultImageParamsForModel(config, model) } : { model })}
+                        capability={mode}
+                        requirements={resolvedRequirements}
+                        onMissingConfig={() => navigateToSettings({ continueCreation: true })}
+                        showSelectedPrice={false}
+                        showOptionPrices={creditsEnabled}
+                        variant="creation"
+                        showConfiguredModelName
+                    />
+                </div>
+                <div className="ml-auto flex min-w-0 shrink-0 items-center gap-1">
+                    <ReferenceToolsPopover
+                        canAutoMention={canAutoMention}
+                        autoLinkEnabled={autoLinkEnabled}
+                        onAutoMention={() => updatePrompt(autoMentionedPrompt)}
+                        onAutoLinkEnabledChange={setAutoLinkEnabled}
+                        accent={monochromeAccent}
+                        compact={!expanded}
+                    />
+                    {mode === "text" ? (
+                        <>
+                            <div className="flex h-7 items-center overflow-hidden rounded-md border" style={{ borderColor: theme.node.stroke }}>
+                                <button
+                                    type="button"
+                                    onClick={() => onConfigChange(node.id, { listMode: false })}
+                                    className={`flex h-full items-center gap-1 px-2 text-[var(--fs-tiny)] transition-colors ${!node.metadata?.listMode ? "font-medium" : ""}`}
+                                    style={!node.metadata?.listMode ? { background: theme.accent.primary, color: "#fff" } : { color: theme.node.muted }}
+                                >
+                                    <FileText className="size-3" />
+                                    文本
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={() => onConfigChange(node.id, { listMode: true })}
+                                    className={`flex h-full items-center gap-1 px-2 text-[var(--fs-tiny)] transition-colors ${node.metadata?.listMode ? "font-medium" : ""}`}
+                                    style={node.metadata?.listMode ? { background: theme.accent.primary, color: "#fff" } : { color: theme.node.muted }}
+                                >
+                                    <LayoutList className="size-3" />
+                                    列表
+                                </button>
+                            </div>
+                            {!node.metadata?.listMode ? (
+                                <Tooltip title={`文本生成份数（默认 1，可在生成配置中调整）`}>
+                                    <InputNumber
+                                        size="small"
+                                        min={1}
+                                        max={15}
+                                        value={Math.max(1, Math.min(15, Math.floor(Math.abs(Number(node.metadata?.textCount) || 1))))}
+                                        onChange={(value) => onConfigChange(node.id, { textCount: Math.max(1, Math.min(15, Math.floor(Math.abs(Number(value)) || 1))) })}
+                                        aria-label="文本生成份数"
+                                        className="!w-14 !h-7 [&_.ant-input-number-input]:!text-[var(--fs-tiny)]"
+                                    />
+                                </Tooltip>
+                            ) : null}
+                            {node.metadata?.listMode ? (
+                                <span className="text-[10px]" style={{ color: theme.node.muted }}>行数和列结构由模型判断</span>
+                            ) : null}
+                        </>
+                    ) : mode === "image" ? (
+                        // 图片模式下，显示相机配置与镜头配置
+                        <>
+                            <CanvasCameraControlPopover
+                                cameraControl={node.metadata?.cameraControl}
+                                onCameraControlChange={(options) => onConfigChange(node.id, { cameraControl: options })}
+                                theme={theme}
+                                compact={!expanded}
+                            />
+                            <CanvasImageSettingsPopover
+                                config={config}
+                                placement={expanded ? "topRight" : "topLeft"}
+                                buttonClassName="canvas-node-composer-settings-trigger [&>span]:min-w-0 [&_.lucide]:!size-3"
+                                onConfigChange={(key, value) => onConfigChange(node.id, key === "count" ? { count: Number(value) || 1 } : { [key]: value })}
+                                onMissingConfig={() => navigateToSettings({ continueCreation: true })}
+                                onOpenChange={expanded ? undefined : onImageSettingsOpenChange}
+                            />
+                        </>
+                    ) : mode === "video" ? (
+                        <CanvasVideoSettingsPopover
+                            config={config}
+                            buttonClassName="canvas-node-composer-settings-trigger [&>span]:min-w-0 [&_.lucide]:!size-3"
+                            onConfigChange={(key, value) => onConfigChange(node.id, videoConfigPatch(key, value))}
+                        />
+                    ) : mode === "audio" ? (
+                        <CanvasAudioSettingsPopover
+                            config={config}
+                            buttonClassName="canvas-node-composer-settings-trigger [&>span]:min-w-0 [&_.lucide]:!size-3"
+                            onConfigChange={(key, value) => onConfigChange(node.id, audioConfigPatch(key, value))}
+                        />
+                    ) : null}
+                    {renderSubmitButton(expanded)}
+                </div>
+            </div>
+        );
+
+    const renderPromptEditor = (expanded: boolean, fill = false) => {
+        const bounds = expanded ? expandedPromptBounds : promptBounds;
+        const height = expanded ? expandedComposerHeight : composerHeight;
+        return (
+            <>
+                <div className={fill ? "canvas-node-composer-editor flex-1" : "canvas-node-composer-editor"} style={fill ? { minHeight: bounds.min } : { height, ...(expanded ? { flexShrink: 0 } : null) }}>
+                    <ConnectedReferenceShelf
+                        targetNodeId={node.id}
+                        references={resolvedMentionReferences}
+                        theme={theme}
+                        onInsert={insertPromptReference}
+                        onRemove={(reference) => onRemoveReference?.(node.id, reference)}
+                        onReorder={onReorderReferences ? (orderedNodeIds) => onReorderReferences(node.id, orderedNodeIds) : undefined}
+                        onReplaceReference={onReplaceReference ? (oldReference, sourceNodeId) => onReplaceReference(node.id, oldReference, sourceNodeId) : undefined}
+                        onReplaceReferenceFiles={onReplaceReferenceFiles ? (oldReference, files) => onReplaceReferenceFiles(node.id, oldReference, files) : undefined}
+                    />
+                    <CanvasResourceMentionTextarea
+                        value={prompt}
+                        references={resolvedMentionReferences}
+                        onSelectReference={onAddReference ? (reference) => onAddReference(node.id, reference) : undefined}
+                        includeAssetLibrary
+                        onChange={updatePrompt}
+                        autoLinkEnabled={autoLinkEnabled}
+                        onReferenceFilesDrop={onReplaceReferenceFiles ? (reference, files) => onReplaceReferenceFiles(node.id, reference, files) : undefined}
+                        onContentSizeChange={expanded ? setExpandedPromptContentHeight : setPromptContentHeight}
+                        containerClassName="min-h-0 flex-1"
+                        className={expanded
+                            ? "thin-scrollbar h-full w-full resize-none overflow-y-auto border-none bg-transparent px-3 py-2.5 text-[var(--fs-body-lg)] leading-6 !outline-none !ring-0 !shadow-none focus:!outline-none focus:!ring-0 focus:!shadow-none placeholder:text-current placeholder:opacity-35"
+                            : "thin-scrollbar h-full w-full resize-none overflow-y-auto border-none bg-transparent px-2.5 py-1.5 text-[var(--fs-body)] leading-5 !outline-none !ring-0 !shadow-none focus:!outline-none focus:!ring-0 focus:!shadow-none placeholder:text-current placeholder:opacity-35"}
+                        style={{ color: theme.node.text, outline: "none", boxShadow: "none" }}
+                        placeholder={promptPlaceholder(mode, hasImageContent, hasTextContent)}
+                        aria-label={`${modeDisplayName(mode)}提示词`}
+                    />
+                </div>
+                {!expanded && <PromptResizeHandle
+                    height={height}
+                    min={bounds.min}
+                    max={bounds.max}
+                    onResize={setManualPromptHeight}
+                />}
+            </>
+        );
+    };
+
+    return (
+        <CanvasPromptOptimizerDrawer
+            open={promptOptimizerOpen}
+            prompt={prompt}
+            generationMode={mode === "image" || mode === "video" ? mode : "image"}
+            targetModel={modelOptionName(config.model) || config.model}
+            targetProtocol={priceChannel.modelCosts?.find((item) => item.model === modelOptionName(config.model))?.protocol || priceChannel.interfaceType}
+            config={globalConfig}
+            optimizerModel={globalConfig.textModel}
+            references={activeReferences}
+            provider={promptOptimizerProvider}
+            onClose={() => setPromptOptimizerOpen(false)}
+            onApply={(nextPrompt) => updatePrompt(nextPrompt)}
+        >
+            <div
+                className="canvas-node-composer"
+                style={composerSurfaceStyle}
+                onMouseDown={(event) => event.stopPropagation()}
+                onPointerDown={(event) => event.stopPropagation()}
+                onWheel={(event) => event.stopPropagation()}
+            >
+            {renderComposerHeader(false)}
+
+            {renderPromptEditor(false)}
+
+            {/* B区 参数区（对应 #98 决策2：默认折叠，手风琴展开）*/}
+            {hasVideoPromptTools ? (
+                <div className="canvas-node-composer-parameters overflow-hidden">
+                    <button
+                        type="button"
+                        className="canvas-node-composer-parameters-toggle flex w-full items-center gap-1.5 rounded-[var(--r-md)] px-2 py-1 text-[var(--fs-micro)] font-medium transition-colors"
+                        style={{ color: theme.node.muted }}
+                        onClick={() => setParamsExpanded(!paramsExpanded)}
+                        aria-expanded={paramsExpanded}
+                        aria-label={paramsExpanded ? "收起参数" : "展开参数"}
+                    >
+                        <SlidersHorizontal className="size-3" strokeWidth={1.8} />
+                        <span className="flex-1 text-left">参数</span>
+                        <ChevronDown className={`size-3 transition-transform duration-200 ${paramsExpanded ? "rotate-180" : ""}`} strokeWidth={1.8} />
+                    </button>
+                    {paramsExpanded ? (
+                        <div className="pt-1">
+                            <CanvasVideoPromptTools metadata={node.metadata} frameOptions={videoFrameOptions} onMetadataChange={(patch) => onConfigChange(node.id, patch)} />
+                        </div>
+                    ) : null}
+                </div>
+            ) : null}
+
+            {renderComposerControls(false)}
+
+            <Modal
+                className="canvas-prompt-editor-modal"
+                open={expandedPromptOpen}
+                title={null}
+                footer={null}
+                centered
+                width={expandedModalSize ? expandedModalSize.width : PROMPT_EDITOR_MODAL_WIDTH}
+                style={{ maxWidth: `calc(100vw - ${PROMPT_EDITOR_VIEWPORT_MARGIN}px)` }}
+                destroyOnHidden
+                onCancel={() => {
+                    setExpandedPresetOpen(false);
+                    setExpandedPromptOpen(false);
+                }}
+                styles={{
+                    container: { border: 0, borderRadius: "var(--canvas-composer-radius)", padding: 0, overflow: "hidden", background: theme.node.panel, boxShadow: theme.node.shadow },
+                    body: { minHeight: 0, padding: 0 },
+                }}
+            >
+                <div ref={expandedModalRef} className="relative flex min-h-0 flex-col" style={{ ...composerTokens, color: theme.node.text, maxHeight: `calc(100dvh - ${PROMPT_EDITOR_VIEWPORT_MARGIN}px)`, ...(expandedModalSize ? { height: expandedModalSize.height } : null) }}>
+                    <div className="flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto p-3">
+                        <div className="shrink-0 pr-8">{renderComposerHeader(true)}</div>
+                        {renderPromptEditor(true, Boolean(expandedModalSize))}
+                        {hasVideoPromptTools ? (
+                            <div className="canvas-node-composer-parameters shrink-0">
+                                <CanvasVideoPromptTools metadata={node.metadata} frameOptions={videoFrameOptions} onMetadataChange={(patch) => onConfigChange(node.id, patch)} />
+                            </div>
+                        ) : null}
+                        <div className="shrink-0">{renderComposerControls(true)}</div>
+                    </div>
+                    <PromptModalResizeHandle size={expandedModalSize} measure={measureExpandedModalSize} onResize={setExpandedModalSize} accent={theme.node.muted} />
+                </div>
+            </Modal>
+
+            </div>
+        </CanvasPromptOptimizerDrawer>
+    );
+}
+
+function ReferenceToolsPopover({ canAutoMention, autoLinkEnabled, onAutoMention, onAutoLinkEnabledChange, accent, compact }: { canAutoMention: boolean; autoLinkEnabled: boolean; onAutoMention: () => void; onAutoLinkEnabledChange: (enabled: boolean) => void; accent: string; compact: boolean }) {
+    return (
+        <Popover
+            trigger="click"
+            placement="topRight"
+            rootClassName="canvas-reference-tools-popover"
+            arrow={false}
+            align={{ offset: [0, -8] }}
+            styles={{ root: { width: "min(280px, calc(100vw - 24px))" }, container: { width: "100%" }, content: { width: "100%", padding: 10 } }}
+            content={
+                <div className="space-y-1.5">
+                    <div>
+                        <div className="text-sm font-medium leading-5">智能引用</div>
+                        <div className="mt-0.5 text-xs leading-4 text-black/50 dark:text-white/50">输入素材序号或名称后按 Tab，可快速引用</div>
+                    </div>
+                    <div className="flex min-h-6 items-center justify-between gap-3">
+                        <div className="flex items-center gap-2 text-sm"><Link2 className="size-3.5" />AutoLink</div>
+                        <button
+                            type="button"
+                            role="switch"
+                            aria-checked={autoLinkEnabled}
+                            aria-label={autoLinkEnabled ? "关闭 AutoLink" : "开启 AutoLink"}
+                            className="canvas-reference-autolink-switch relative inline-flex h-5 w-9 items-center rounded-full border transition-colors"
+                            style={{ background: autoLinkEnabled ? `${accent}14` : "transparent", borderColor: autoLinkEnabled ? accent : "color-mix(in srgb, currentColor 22%, transparent)", color: accent }}
+                            onClick={() => onAutoLinkEnabledChange(!autoLinkEnabled)}
+                        >
+                            <span className={`size-3.5 rounded-full shadow-sm transition-transform ${autoLinkEnabled ? "translate-x-[18px]" : "translate-x-0.5"}`} style={{ background: autoLinkEnabled ? accent : "currentColor" }} />
+                        </button>
+                    </div>
+                    <button
+                        type="button"
+                        className="canvas-reference-tools-mention-button flex h-7 w-full items-center justify-center gap-1.5 rounded-md border px-2.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-45"
+                        style={{ borderColor: accent, color: accent, background: "transparent" }}
+                        disabled={!canAutoMention}
+                        onClick={onAutoMention}
+                    >
+                        <AtSign className="size-3.5" />一键引用全文
+                    </button>
+                </div>
+            }
+        >
+            <button
+                type="button"
+                className={`canvas-node-composer-settings-trigger canvas-node-composer-reference-tools-trigger inline-flex shrink-0 items-center gap-1 ${compact ? "is-compact" : ""}`}
+                aria-label="打开智能引用"
+                title="智能引用"
+            >
+                <SlidersHorizontal className="size-3.5" />
+                {!compact ? <span>引用</span> : null}
+            </button>
+        </Popover>
+    );
+}
+
+function GenerationModeIcon({ mode }: { mode: CanvasNodeGenerationMode }) {
+    if (mode === "image") return <ImagePlus className="size-3" />;
+    if (mode === "video") return <Video className="size-3" />;
+    if (mode === "audio") return <Music2 className="size-3" />;
+    return <FileText className="size-3" />;
+}
+
+function modeDisplayName(mode: CanvasNodeGenerationMode) {
+    if (mode === "image") return "图片";
+    if (mode === "video") return "视频";
+    if (mode === "audio") return "音频";
+    return "文本";
+}
+
+function referenceShelfHeading(references: CanvasResourceReference[]) {
+    const label = references.every((reference) => reference.kind === "image" || reference.kind === "character") ? "参考图" : "参考素材";
+    return `${label} · ${references.length}`;
+}
+
+function ConnectedReferenceShelf({
+    targetNodeId,
+    references,
+    theme,
+    onInsert,
+    onRemove,
+    onReorder,
+    onReplaceReference,
+    onReplaceReferenceFiles,
+}: {
+    targetNodeId?: string;
+    references: CanvasResourceReference[];
+    theme: CanvasTheme;
+    onInsert: (reference: CanvasResourceReference) => void;
+    onRemove?: (reference: CanvasResourceReference) => void;
+    onReorder?: (orderedNodeIds: string[]) => void;
+    onReplaceReference?: (oldReference: CanvasResourceReference, sourceNodeId: string) => void;
+    onReplaceReferenceFiles?: (oldReference: CanvasResourceReference, files: File[]) => void;
+}) {
+    const activeReferences = references.filter((item) => item.active && item.kind !== "skill");
+    const [imagePreview, setImagePreview] = useState<CanvasResourceReference | null>(null);
+    const [draggedReferenceId, setDraggedReferenceId] = useState<string | null>(null);
+    const [dropTargetReferenceId, setDropTargetReferenceId] = useState<string | null>(null);
+    if (!activeReferences.length) return null;
+
+    const moveReference = (sourceId: string, targetId: string) => {
+        if (!onReorder || sourceId === targetId) return;
+        const sourceIndex = activeReferences.findIndex((reference) => reference.nodeId === sourceId);
+        const targetIndex = activeReferences.findIndex((reference) => reference.nodeId === targetId);
+        if (sourceIndex < 0 || targetIndex < 0) return;
+        const ordered = [...activeReferences];
+        const [moved] = ordered.splice(sourceIndex, 1);
+        ordered.splice(targetIndex, 0, moved);
+        onReorder(ordered.map((reference) => reference.nodeId));
+    };
+
+    const moveReferenceByOffset = (sourceId: string, offset: -1 | 1) => {
+        const sourceIndex = activeReferences.findIndex((reference) => reference.nodeId === sourceId);
+        const target = activeReferences[sourceIndex + offset];
+        if (!target) return;
+        moveReference(sourceId, target.nodeId);
+    };
+
+    return (
+        <>
+            <div className="canvas-node-composer-references" role="group" aria-label="已连接素材">
+                <div className="canvas-node-composer-references-track thin-scrollbar">
+                    {activeReferences.map((reference, index) => {
+                        const canPreview = Boolean(reference.previewUrl) && (reference.kind === "image" || reference.kind === "character" || reference.kind === "video");
+                        const isDropTarget = dropTargetReferenceId === reference.id;
+                        return (
+                            <span
+                                key={reference.id}
+                                className="canvas-node-reference-chip relative"
+                                data-reference-chip="true"
+                                data-reference-id={reference.id}
+                                data-reference-node-id={reference.nodeId}
+                                data-reference-label={reference.label}
+                                data-reference-title={reference.title || reference.label}
+                                data-target-node-id={targetNodeId}
+                                data-dragging={draggedReferenceId === reference.nodeId || undefined}
+                                data-drop-target={isDropTarget ? "true" : undefined}
+                                style={{
+                                    boxShadow: isDropTarget ? "0 0 0 2px #3b82f6, 0 0 16px rgba(59, 130, 246, 0.45)" : undefined,
+                                }}
+                                onDragOver={(event) => {
+                                    if (draggedReferenceId) {
+                                        if (!onReorder) return;
+                                        event.preventDefault();
+                                        event.dataTransfer.dropEffect = "move";
+                                        return;
+                                    }
+                                    const hasImageNode = event.dataTransfer.types.includes("application/x-canvas-image-node-id");
+                                    const hasFiles = event.dataTransfer.types.includes("Files");
+                                    if (hasImageNode || hasFiles) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        event.dataTransfer.dropEffect = "copy";
+                                        if (dropTargetReferenceId !== reference.id) {
+                                            setDropTargetReferenceId(reference.id);
+                                        }
+                                    }
+                                }}
+                                onDragLeave={(event) => {
+                                    if (!event.currentTarget.contains(event.relatedTarget as Node)) {
+                                        if (dropTargetReferenceId === reference.id) {
+                                            setDropTargetReferenceId(null);
+                                        }
+                                    }
+                                }}
+                                onDrop={(event) => {
+                                    if (dropTargetReferenceId === reference.id) {
+                                        setDropTargetReferenceId(null);
+                                    }
+                                    if (draggedReferenceId) {
+                                        event.preventDefault();
+                                        const sourceId = draggedReferenceId || event.dataTransfer.getData("text/plain");
+                                        setDraggedReferenceId(null);
+                                        moveReference(sourceId, reference.nodeId);
+                                        return;
+                                    }
+                                    const sourceNodeId = event.dataTransfer.getData("application/x-canvas-image-node-id");
+                                    if (sourceNodeId && sourceNodeId !== reference.nodeId && onReplaceReference) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        onReplaceReference(reference, sourceNodeId);
+                                        return;
+                                    }
+                                    const files = Array.from(event.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+                                    if (files.length && onReplaceReferenceFiles) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        onReplaceReferenceFiles(reference, files);
+                                        return;
+                                    }
+                                }}
+                            >
+                                {onReorder ? (
+                                    <button
+                                        type="button"
+                                        className="canvas-node-reference-drag-handle"
+                                        draggable
+                                        title={`拖动调整 ${reference.label} 的顺序`}
+                                        aria-label={`调整 ${reference.label} 的顺序；使用左右方向键也可移动`}
+                                        onDragStart={(event) => {
+                                            setDraggedReferenceId(reference.nodeId);
+                                            event.dataTransfer.effectAllowed = "move";
+                                            event.dataTransfer.setData("text/plain", reference.nodeId);
+                                        }}
+                                        onDragEnd={() => setDraggedReferenceId(null)}
+                                        onKeyDown={(event) => {
+                                            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+                                            event.preventDefault();
+                                            moveReferenceByOffset(reference.nodeId, event.key === "ArrowLeft" ? -1 : 1);
+                                        }}
+                                        onPointerDown={(event) => event.stopPropagation()}
+                                    >
+                                        <GripVertical className="size-3" />
+                                    </button>
+                                ) : null}
+                                <span className="canvas-node-reference-order" aria-hidden>{index + 1}</span>
+                                <button
+                                    type="button"
+                                    className="canvas-node-reference-preview"
+                                    style={{ background: theme.toolbar.itemHover, color: theme.node.text, outlineColor: theme.node.activeStroke }}
+                                    title={canPreview ? `预览 ${reference.title}` : `插入 @${reference.label}`}
+                                    aria-label={canPreview ? `预览 ${reference.title}` : `插入 @${reference.label}`}
+                                    onClick={() => (canPreview ? setImagePreview(reference) : onInsert(reference))}
+                                >
+                                    <ReferenceThumbnail reference={reference} />
+                                    {canPreview ? (
+                                        <span className="canvas-node-reference-preview-hint" aria-hidden="true">
+                                            <Maximize2 className="size-3" />
+                                        </span>
+                                    ) : null}
+                                </button>
+                                <button type="button" className="canvas-node-reference-label" title={`插入 @${reference.label}`} onClick={() => onInsert(reference)}>
+                                    <span className="opacity-55">@</span>
+                                    <span className="truncate">{reference.label}</span>
+                                </button>
+                                {onRemove ? (
+                                    <button
+                                        type="button"
+                                        className="canvas-node-reference-remove"
+                                        style={{ background: theme.toolbar.panel, borderColor: theme.node.stroke, color: theme.node.text }}
+                                        title="移除参考并删除连接"
+                                        aria-label={`移除参考 ${reference.label}`}
+                                        onClick={(event) => {
+                                            event.stopPropagation();
+                                            onRemove(reference);
+                                        }}
+                                        onPointerDown={(event) => event.stopPropagation()}
+                                    >
+                                        <X className="size-3" />
+                                    </button>
+                                ) : null}
+                            </span>
+                        );
+                    })}
+                </div>
+            </div>
+            {imagePreview?.previewUrl ? (
+                <AntImage
+                    src={imagePreview.previewUrl}
+                    alt={imagePreview.title || imagePreview.label}
+                    style={{ display: "none" }}
+                    preview={{
+                        open: true,
+                        movable: true,
+                        minScale: 0.5,
+                        maxScale: 12,
+                        scaleStep: 0.25,
+                        onOpenChange: (open) => !open && setImagePreview(null),
+                    }}
+                />
+            ) : null}
+        </>
+    );
+}
+
+function ReferenceThumbnail({ reference }: { reference: CanvasResourceReference }) {
+    if (reference.kind === "image" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full object-cover" />;
+    if (reference.kind === "video" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full bg-black object-cover" loading="lazy" decoding="async" />;
+    if (reference.kind === "character" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full bg-black/5 object-contain" />;
+
+    const Icon = reference.sourceType === CanvasNodeType.Drawing ? Pencil : reference.kind === "character" ? UserRound : reference.kind === "audio" ? Music2 : reference.kind === "video" ? Video : reference.kind === "image" ? ImageIcon : FileText;
+    return (
+        <span className="grid size-full place-items-center bg-black/10 text-current dark:bg-white/10">
+            <Icon className="size-3.5 opacity-75" />
+        </span>
+    );
+}
+
+function PromptResizeHandle({ height, min, max, onResize }: { height: number; min: number; max: number; onResize: (height: number) => void }) {
+    const dragRef = useRef<{ pointerId: number; startY: number; startHeight: number } | null>(null);
+
+    const finishResize = (event: ReactPointerEvent<HTMLButtonElement>) => {
+        if (dragRef.current?.pointerId !== event.pointerId) return;
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+        dragRef.current = null;
+    };
+
+    const handleKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            onResize(Math.max(min, height - 8));
+        } else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            onResize(Math.min(max, height + 8));
+        } else if (event.key === "Home") {
+            event.preventDefault();
+            onResize(min);
+        } else if (event.key === "End") {
+            event.preventDefault();
+            onResize(max);
+        }
+    };
+
+    return (
+        <button
+            type="button"
+            className="canvas-node-composer-resize-handle"
+            role="separator"
+            aria-label="调整提示词输入高度"
+            aria-orientation="horizontal"
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={Math.round(height)}
+            onKeyDown={handleKeyDown}
+            onPointerDown={(event) => {
+                if (event.button !== 0) return;
+                event.preventDefault();
+                event.stopPropagation();
+                dragRef.current = { pointerId: event.pointerId, startY: event.clientY, startHeight: height };
+                event.currentTarget.setPointerCapture(event.pointerId);
+            }}
+            onPointerMove={(event) => {
+                const drag = dragRef.current;
+                if (!drag || drag.pointerId !== event.pointerId) return;
+                if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+                    dragRef.current = null;
+                    return;
+                }
+                if ((event.buttons & 1) === 0) {
+                    finishResize(event);
+                    return;
+                }
+                onResize(Math.min(max, Math.max(min, drag.startHeight + event.clientY - drag.startY)));
+            }}
+            onPointerUp={finishResize}
+            onPointerCancel={finishResize}
+            onLostPointerCapture={(event) => {
+                if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
+            }}
+        >
+            <span aria-hidden />
+        </button>
+    );
+}
+
+function clampExpandedModalSize(size: { width: number; height: number }) {
+    return clampPromptEditorModalSize(size, { width: window.innerWidth, height: window.innerHeight });
+}
+
+function PromptModalResizeHandle({ size, measure, onResize, accent }: { size: { width: number; height: number } | null; measure: () => { width: number; height: number }; onResize: (size: { width: number; height: number }) => void; accent: string }) {
+    const dragRef = useRef<{ pointerId: number; startX: number; startY: number; width: number; height: number } | null>(null);
+
+    const finishResize = (event: ReactPointerEvent<HTMLButtonElement>) => {
+        if (dragRef.current?.pointerId !== event.pointerId) return;
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+        dragRef.current = null;
+    };
+
+    const handleKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+        const step = event.shiftKey ? 40 : 12;
+        const widthDelta = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
+        const heightDelta = event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
+        if (!widthDelta && !heightDelta) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const base = size ?? measure();
+        onResize(clampExpandedModalSize({ width: base.width + widthDelta, height: base.height + heightDelta }));
+    };
+
+    return (
+        <button
+            type="button"
+            className="absolute bottom-1.5 right-1.5 z-10 grid size-5 cursor-nwse-resize touch-none place-items-center opacity-60 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2"
+            aria-label="拖动调整窗口大小"
+            title="拖动调整窗口宽高，也可用方向键调整"
+            onKeyDown={handleKeyDown}
+            onPointerDown={(event) => {
+                if (event.button !== 0 || !event.isPrimary) return;
+                event.preventDefault();
+                event.stopPropagation();
+                const base = measure();
+                dragRef.current = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, ...base };
+                onResize(clampExpandedModalSize(base));
+                event.currentTarget.setPointerCapture(event.pointerId);
+            }}
+            onPointerMove={(event) => {
+                const drag = dragRef.current;
+                if (!drag || drag.pointerId !== event.pointerId) return;
+                if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+                    dragRef.current = null;
+                    return;
+                }
+                if ((event.buttons & 1) === 0) {
+                    finishResize(event);
+                    return;
+                }
+                event.stopPropagation();
+                // The modal stays centered, so each edge moves by half the size change.
+                onResize(clampExpandedModalSize({ width: drag.width + 2 * (event.clientX - drag.startX), height: drag.height + 2 * (event.clientY - drag.startY) }));
+            }}
+            onPointerUp={finishResize}
+            onPointerCancel={finishResize}
+            onLostPointerCapture={(event) => {
+                if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
+            }}
+        >
+            <span aria-hidden className="absolute bottom-1 right-1 size-2 rounded-br border-b-2 border-r-2" style={{ borderColor: accent }} />
+        </button>
+    );
+}
+
+function promptEditorBounds(expanded: boolean, hasReferences: boolean) {
+    const shelfHeight = hasReferences ? PROMPT_REFERENCE_SHELF_HEIGHT : 0;
+    const min = (expanded ? PROMPT_EDITOR_EXPANDED_MIN_HEIGHT : PROMPT_EDITOR_MIN_HEIGHT) + shelfHeight;
+    const max = (expanded ? PROMPT_EDITOR_EXPANDED_LINE_HEIGHT * PROMPT_EDITOR_EXPANDED_MAX_LINES + PROMPT_EDITOR_EXPANDED_VERTICAL_PADDING : PROMPT_EDITOR_LINE_HEIGHT * PROMPT_EDITOR_MAX_LINES + PROMPT_EDITOR_VERTICAL_PADDING) + shelfHeight;
+    return { min, max };
+}
+
+function estimatePromptContentHeight(value: string, expanded: boolean) {
+    if (!value.trim()) return expanded ? PROMPT_EDITOR_EXPANDED_MIN_HEIGHT : PROMPT_EDITOR_MIN_HEIGHT;
+    const charsPerLine = expanded ? 34 : 38;
+    const lineCount = value.split("\n").reduce((total, line) => total + Math.max(1, Math.ceil(Array.from(line).length / charsPerLine)), 0);
+    const lineHeight = expanded ? PROMPT_EDITOR_EXPANDED_LINE_HEIGHT : PROMPT_EDITOR_LINE_HEIGHT;
+    const verticalPadding = expanded ? PROMPT_EDITOR_EXPANDED_VERTICAL_PADDING : PROMPT_EDITOR_VERTICAL_PADDING;
+    return Math.max(expanded ? PROMPT_EDITOR_EXPANDED_MIN_HEIGHT : PROMPT_EDITOR_MIN_HEIGHT, lineCount * lineHeight + verticalPadding);
+}
+
+function clampPromptHeight(height: number, bounds: { min: number; max: number }) {
+    return Math.min(bounds.max, Math.max(bounds.min, height));
+}
+
+function defaultMode(type: CanvasNodeData["type"]): CanvasNodeGenerationMode {
+    return type === CanvasNodeType.Text || type === CanvasNodeType.Skill ? "text" : type === CanvasNodeType.Video ? "video" : type === CanvasNodeType.Audio ? "audio" : "image";
+}
+
+export function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: CanvasNodeGenerationMode, requirements: ModelRequirements): AiConfig {
+    const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : mode === "audio" ? globalConfig.audioModel : globalConfig.textModel;
+    const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
+    const preferredModel = resolveCanvasGenerationModel(globalConfig, node.metadata?.model, mode) || resolveCanvasGenerationModel(globalConfig, defaultModel, mode) || fallbackModel;
+    const model = resolveCompatibleModel(globalConfig, preferredModel, mode === "image" ? { ...requirements, imageSize: node.metadata?.size || globalConfig.size || defaultConfig.size } : requirements) || preferredModel;
+    const defaults = resolveModelGenerationDefaults(
+        globalConfig,
+        model,
+        mode === "image" ? "image" : mode === "video" ? "video" : undefined,
+        mode === "image"
+            ? {
+                  size: node.metadata?.size,
+                  quality: node.metadata?.quality,
+                  transparentBackground: node.metadata?.transparentBackground,
+                  videoWatermark: node.metadata?.watermark,
+                  count: String(node.metadata?.count || globalConfig.canvasImageCount || globalConfig.count || defaultConfig.count),
+              }
+            : {
+                  size: node.metadata?.size,
+                  videoSeconds: node.metadata?.seconds,
+                  vquality: node.metadata?.vquality,
+                  videoGenerateAudio: node.metadata?.generateAudio,
+                  videoWatermark: node.metadata?.watermark,
+              },
+        {
+            size: globalConfig.size || defaultConfig.size,
+            quality: globalConfig.quality || defaultConfig.quality,
+            transparentBackground: globalConfig.transparentBackground || defaultConfig.transparentBackground,
+            count: String(globalConfig.canvasImageCount || globalConfig.count || defaultConfig.count),
+            videoSeconds: globalConfig.videoSeconds || defaultConfig.videoSeconds,
+            vquality: globalConfig.vquality || defaultConfig.vquality,
+            videoGenerateAudio: globalConfig.videoGenerateAudio || defaultConfig.videoGenerateAudio,
+            videoWatermark: globalConfig.videoWatermark || defaultConfig.videoWatermark,
+        },
+    );
+    return {
+        ...globalConfig,
+        model,
+        quality: defaults.quality ?? globalConfig.quality ?? defaultConfig.quality,
+        size: defaults.size ?? globalConfig.size ?? defaultConfig.size,
+        transparentBackground: defaults.transparentBackground ?? "false",
+        videoSeconds: defaults.videoSeconds || normalizeVideoDuration(globalConfig.videoSeconds || defaultConfig.videoSeconds),
+        vquality: defaults.vquality ?? normalizeVideoResolution(globalConfig.vquality || defaultConfig.vquality),
+        videoGenerateAudio: defaults.videoGenerateAudio ?? globalConfig.videoGenerateAudio ?? defaultConfig.videoGenerateAudio,
+        videoWatermark: defaults.videoWatermark ?? globalConfig.videoWatermark ?? defaultConfig.videoWatermark,
+        audioVoice: node.metadata?.audioVoice || globalConfig.audioVoice || defaultConfig.audioVoice,
+        audioFormat: node.metadata?.audioFormat || globalConfig.audioFormat || defaultConfig.audioFormat,
+        audioSpeed: node.metadata?.audioSpeed || globalConfig.audioSpeed || defaultConfig.audioSpeed,
+        audioInstructions: node.metadata?.audioInstructions || globalConfig.audioInstructions || defaultConfig.audioInstructions,
+        count: defaults.count ?? String(node.metadata?.count || (mode === "image" ? globalConfig.canvasImageCount || globalConfig.count : globalConfig.count) || defaultConfig.count),
+    };
+}
+
+function promptPlaceholder(mode: CanvasNodeGenerationMode, hasImageContent: boolean, hasTextContent: boolean) {
+    if (mode === "video") return "描述要生成的视频内容";
+    if (mode === "audio") return "描述要生成的音频内容";
+    if (mode === "image") return hasImageContent ? "输入新提示词，重新生成当前图片" : "描述要生成的图片内容";
+    return hasTextContent ? "请输入你想要将本段文本修改成什么" : "请输入你想要生成的文本内容";
+}
+
+function videoConfigPatch(key: keyof AiConfig, value: string) {
+    if (key === "videoSeconds") return { seconds: value };
+    if (key === "videoGenerateAudio") return { generateAudio: value };
+    if (key === "videoWatermark") return { watermark: value };
+    if (key === "videoArkPrivateAssetUpload") return { arkPrivateAssetUpload: value };
+    return { [key]: value };
+}
+
+function audioConfigPatch(key: CanvasAudioSettingKey, value: string) {
+    if (key === "audioVoice") return { audioVoice: value };
+    if (key === "audioFormat") return { audioFormat: value };
+    if (key === "audioSpeed") return { audioSpeed: value };
+    return { audioInstructions: value };
+}
diff --git a/web/src/pages/canvas/list-mode-generator.ts b/web/src/pages/canvas/list-mode-generator.ts
new file mode 100644
index 000000000..f279ed16d
--- /dev/null
+++ b/web/src/pages/canvas/list-mode-generator.ts
@@ -0,0 +1,204 @@
+import { nanoid } from "nanoid";
+import { message } from "antd";
+import { CanvasNodeType, type CanvasConnection, type CanvasNodeData, type CanvasBatchTableData, type CanvasBatchRow } from "@/types/canvas";
+import { runBackendGenerationTask } from "@/services/api/generation-task";
+import { resolveCanvasGenerationModel } from "@/lib/canvas/canvas-project-generation";
+import type { AiConfig } from "@/stores/use-config-store";
+
+const LIST_MODE_SYSTEM_PROMPT = `你是一个电商内容分析助手。用户会给你多张产品图片和一个任务描述。
+请分析每张图片，为每张图片生成一行数据。
+
+输出严格为以下 JSON 格式（不要输出其他内容）：
+{
+  "columns": ["列名1", "列名2", "列名3"],
+  "rows": [
+    {"列名1": "内容", "列名2": "内容", "列名3": "内容"}
+  ]
+}
+
+规则：
+1. 第一列不需要输出（它是图片本身），从第二列开始定义分析维度
+2. 列名根据任务需求自动决定（如：核心卖点、视觉细节、文案标题、搭配建议等）
+3. 每张图片对应一行，rows 数量等于图片数量
+4. 每个单元格内容简洁有力，适合电商/社交媒体使用
+5. 列数建议 3-6 列，根据任务复杂度决定
+6. 只输出 JSON，不要有任何其他文字`;
+
+type ListGenerationResult = {
+    columns: string[];
+    rows: Record<string, string>[];
+};
+
+function parseListModeJson(text: string): ListGenerationResult | null {
+    // Try to extract JSON from the response
+    const jsonMatch = text.match(/\{[\s\S]*\}/);
+    if (!jsonMatch) return null;
+    try {
+        const parsed = JSON.parse(jsonMatch[0]);
+        if (Array.isArray(parsed.columns) && Array.isArray(parsed.rows) && parsed.columns.length > 0) {
+            return parsed as ListGenerationResult;
+        }
+    } catch {
+        // Try removing markdown code blocks
+        const cleaned = jsonMatch[0].replace(/^```json\s*/, "").replace(/\s*```$/, "");
+        try {
+            const parsed = JSON.parse(cleaned);
+            if (Array.isArray(parsed.columns) && Array.isArray(parsed.rows)) {
+                return parsed as ListGenerationResult;
+            }
+        } catch {
+            return null;
+        }
+    }
+    return null;
+}
+
+type HandleListGenerateOptions = {
+    sourceNodeId: string;
+    prompt: string;
+    nodes: CanvasNodeData[];
+    connections: CanvasConnection[];
+    config: AiConfig;
+    projectId: string;
+    setNodes: (updater: (prev: CanvasNodeData[]) => CanvasNodeData[]) => void;
+    setConnections: (updater: (prev: CanvasConnection[]) => CanvasConnection[]) => void;
+    setRunningNodeId: (id: string | null) => void;
+    setDialogNodeId: (id: string | null) => void;
+};
+
+export async function handleListGenerate({
+    sourceNodeId,
+    prompt,
+    nodes,
+    connections,
+    config,
+    projectId,
+    setNodes,
+    setConnections,
+    setRunningNodeId,
+    setDialogNodeId,
+}: HandleListGenerateOptions) {
+    const sourceNode = nodes.find((n) => n.id === sourceNodeId);
+    if (!sourceNode) return;
+
+    // Find connected image nodes
+    const connectedImageIds = connections
+        .filter((c) => c.toNodeId === sourceNodeId && c.fromNodeId !== sourceNodeId)
+        .map((c) => c.fromNodeId);
+    const imageNodes = nodes.filter((n) => connectedImageIds.includes(n.id) && n.type === CanvasNodeType.Image && n.metadata?.content);
+
+    if (imageNodes.length === 0) {
+        message.warning("请先连接至少一张图片到当前文本节点");
+        return;
+    }
+
+    setRunningNodeId(sourceNodeId);
+
+    try {
+        const model = resolveCanvasGenerationModel(config, undefined, "text");
+        const listConfig = { ...config, model };
+
+        const referenceImages = imageNodes.map((node) => ({
+            id: node.id,
+            name: node.title || "image",
+            type: "image",
+            dataUrl: node.metadata?.content || "",
+            storageKey: node.metadata?.storageKey,
+        }));
+
+        const fullPrompt = `${LIST_MODE_SYSTEM_PROMPT}\n\n用户任务：${prompt}\n\n图片数量：${imageNodes.length} 张`;
+
+        const result = await runBackendGenerationTask({
+            projectId,
+            mode: "text",
+            prompt: fullPrompt,
+            config: listConfig,
+            referenceImages,
+            streamText: false,
+        });
+
+        const text = result.text || "";
+        const parsed = parseListModeJson(text);
+
+        if (!parsed) {
+            message.error("AI 返回格式异常，请重试");
+            return;
+        }
+
+        // Build batch table data
+        const textColumns = parsed.columns.map((name, i) => ({
+            id: `ai-col-${i}`,
+            label: name,
+            type: "text" as const,
+        }));
+
+        const referenceColumn = { id: "ai-ref", label: "输入", type: "image" as const };
+
+        const rows: CanvasBatchRow[] = parsed.rows.map((row, rowIndex) => {
+            const imageNode = imageNodes[rowIndex % imageNodes.length];
+            const cells: Record<string, string> = {};
+            parsed.columns.forEach((colName, colIndex) => {
+                cells[`ai-col-${colIndex}`] = row[colName] || "";
+            });
+            // Build prompt from all text cells
+            const cellPrompts = parsed.columns.map((colName, colIndex) => {
+                const val = row[colName] || "";
+                return val ? `${colName}：${val}` : "";
+            }).filter(Boolean);
+
+            return {
+                id: `batch-row-${nanoid()}`,
+                enabled: true,
+                inputNodeIds: imageNode ? [imageNode.id] : [],
+                prompt: cellPrompts.join("\n"),
+                cells,
+            };
+        });
+
+        const batchTable: CanvasBatchTableData = {
+            operation: "creative",
+            concurrency: 10,
+            aiGenerated: true,
+            referenceColumns: [referenceColumn],
+            textColumns,
+            rows,
+        };
+
+        // Create the batch table node
+        const sourcePos = sourceNode.position;
+        const batchNodeId = `batch-table-${nanoid()}`;
+        const batchNode: CanvasNodeData = {
+            id: batchNodeId,
+            type: CanvasNodeType.BatchTable,
+            title: "AI 多维表格",
+            position: { x: sourcePos.x + 400, y: sourcePos.y },
+            width: 900,
+            height: 400,
+            metadata: {
+                batchTable,
+                model: listConfig.model,
+                status: "idle",
+            },
+        };
+
+        // Create connections from each image node to the batch table's reference handle
+        const newConnections: CanvasConnection[] = imageNodes.map((imgNode) => ({
+            id: `conn-${nanoid()}`,
+            fromNodeId: imgNode.id,
+            fromHandleId: "output",
+            toNodeId: batchNodeId,
+            toHandleId: "batch-reference:ai-ref",
+            relation: "batch-input",
+        }));
+
+        setNodes((prev) => [...prev, batchNode]);
+        setConnections((prev) => [...prev, ...newConnections]);
+        setDialogNodeId(batchNodeId);
+
+        message.success(`已生成多维表格：${parsed.columns.length} 列 × ${rows.length} 行`);
+    } catch (err) {
+        message.error(err instanceof Error ? err.message : "列表生成失败");
+    } finally {
+        setRunningNodeId(null);
+    }
+}
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index e9961393a..5ddc7b8db 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -1,3223 +1,3238 @@
-import { isCanvasNodeGenerating } from "@/lib/canvas/canvas-node-task-state";
-import { lazy, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import type { Dispatch, MouseEvent as ReactMouseEvent, SetStateAction } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Link, useParams, useSearchParams } from "react-router";
-import { loadAssetsForUse } from "@/services/user-data-sync";
-import { canvasAssetHandoffIds } from "@/lib/canvas/canvas-asset-handoff";
-import { useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
-import { uploadMediaFile } from "@/services/file-storage";
-import { createCanvasGenerationLiveProjectAdapter, registerCanvasGenerationLiveProject } from "@/services/canvas-generation-consumer";
-import { getActiveUserScope } from "@/lib/user-scope";
-import { resourceFileUrl, resourceIdFromStorageKey, syncResourceToArkPrivateAsset } from "@/services/api/resources";
-import { uploadImage } from "@/services/image-storage";
-import { imageMetadata } from "@/lib/canvas/canvas-generation-task-sync";
-import { isCanvasImageSourceNode } from "@/lib/canvas/canvas-image-source";
-import { getCachedResourceBlob } from "@/services/resource-blob-cache";
-import copyToClipboard from "copy-to-clipboard";
-import { nanoid } from "nanoid";
-import { canvasAppearanceBaseTheme, canvasAppearanceForTheme, DEFAULT_CANVAS_BACKGROUND_MODE, normalizeCanvasAppearance, resolveCanvasAppearance, writeCanvasAppearanceDefault, type CanvasAppearance } from "@/lib/canvas/canvas-appearance";
-import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme";
-import { persistCanvasMediaPerformanceMode, readCanvasMediaPerformanceMode } from "@/lib/canvas/canvas-performance-mode";
-import { summarizeCanvasContext } from "@/lib/canvas/canvas-context-summary";
-import { refreshCanvasCharacterReferenceNodes } from "@/lib/canvas/canvas-character-reference";
-import { useAssetStore } from "@/stores/use-asset-store";
-import { flushCanvasStorePersistence } from "@/stores/canvas/use-canvas-store";
-import { ensureCanvasNodeAsset } from "@/services/project-asset-sync";
-import { useCanvasThemeStore, useCanvasThemeScope } from "@/stores/canvas/use-canvas-theme-store";
-import { useUserStore } from "@/stores/use-user-store";
-import { App, Button } from "antd";
-import { ArrowLeftRight } from "lucide-react";
-import { AppModal } from "@/components/ui/product/app-modal";
-import { getNodeSpec } from "@/constant/canvas";
-import { CanvasConfigComposer } from "@/components/canvas/canvas-config-composer";
-import { CanvasConfigNodePanel } from "@/components/canvas/canvas-config-node-panel";
-import { CanvasCloudAgentPanel } from "@/components/canvas/canvas-cloud-agent-panel";
-import { CanvasActiveTaskPanel } from "@/components/canvas/canvas-active-task-panel";
-import { CanvasAssetTray } from "@/components/canvas/canvas-asset-tray";
-import { CanvasProjectSidebar } from "@/components/canvas/canvas-project-sidebar";
-import { CanvasProjectAssetModal } from "@/components/canvas/canvas-project-asset-modal";
-import { CanvasCharacterReferenceNodeContent } from "@/components/canvas/canvas-character-reference-node";
-import { CanvasCharacterReferenceModal } from "@/components/canvas/canvas-character-reference-modal";
-import { WorkspaceState } from "@/components/layout/workspace-state";
-import { resolveProjectCanvasStyle } from "@/components/canvas/canvas-style-picker-modal";
-import { createStyleProfileSnapshot, resolveStyleProfile, serializeStyleProfile } from "@/lib/canvas/style-profile";
-import { CanvasNodeToolbar, CanvasNodeInfoModal } from "@/components/canvas/canvas-node-toolbar";
-import { CanvasSubtitleDialog } from "@/components/canvas/canvas-subtitle-dialog";
-import { CanvasVideoFrameDialog } from "@/components/canvas/canvas-video-frame-dialog";
-import { CanvasVideoSegmentDialog } from "@/components/canvas/canvas-video-segment-dialog";
-import { CanvasTimelineDialog } from "@/components/canvas/canvas-timeline-dialog";
-import { syncNodeSubtitlesToTimeline } from "@/lib/timeline/timeline-build";
-import { CanvasNodeAnglePanel } from "@/components/canvas/canvas-node-angle-dialog";
-import { CanvasNodeLightingPanel } from "@/components/canvas/canvas-node-lighting-dialog";
-import { CanvasTextEditorModal } from "@/components/canvas/canvas-text-editor-modal";
-import { CanvasNodeSearchModal } from "@/components/canvas/canvas-node-search-modal";
-import { CanvasStylePickerModal } from "@/components/canvas/canvas-style-picker-modal";
-import { CanvasDirectorTemplateModal } from "@/components/canvas/director/canvas-director-template-modal";
-import { CanvasFileDropOverlay } from "@/components/canvas/canvas-file-drop-overlay";
-import { CanvasUploadModal } from "@/components/canvas/canvas-upload-modal";
-import { CanvasPanoramaConfigModal } from "@/components/canvas/canvas-panorama-config-modal";
-import { InfiniteCanvas } from "@/components/canvas/infinite-canvas";
-import { Minimap } from "@/components/canvas/canvas-mini-map";
-import { CanvasNodePromptPanel, type CanvasNodeGenerationMode } from "@/components/canvas/canvas-node-prompt-panel";
-import { CanvasToolbar } from "@/components/canvas/canvas-toolbar";
-import { useCanvasCreateCommands } from "@/components/canvas/use-canvas-create-commands";
-import { AssetPickerModal } from "@/components/canvas/asset-picker-modal";
-import { getProject } from "@/services/api/projects";
-import { CanvasZoomControls } from "@/components/canvas/canvas-zoom-controls";
-import { CanvasShareModal } from "@/components/canvas/canvas-share-modal";
-import { CanvasScriptEditor, CanvasScriptNodeContent } from "@/components/canvas/canvas-script-node";
-import { CanvasBatchTableNodeContent } from "@/components/canvas/canvas-batch-table-node";
-import { STORYBOARD_HEADER_HEIGHT, STORYBOARD_ROW_HEIGHT, storyboardMinNodeHeight, storyboardTableHeight } from "@/lib/canvas/canvas-storyboard-layout";
-import { CanvasDirectorNodePanel } from "@/components/canvas/director/canvas-director-node-panel";
-import { CanvasVersionCompareModal } from "@/components/canvas/canvas-version-compare-modal";
-import { useFocusMode } from "@/hooks/use-focus-mode";
-import { connectCanvasTextMention } from "@/lib/canvas/canvas-text-mention";
-import { writeCanvasNodePrompt } from "@/lib/canvas/canvas-node-prompt";
-import {
-    applyCanvasConnectionPromptSync,
-    buildCanvasAgentMentionReferences,
-    canvasResourceMentionToken,
-    buildCanvasNodeMentionReferenceMap,
-    buildCanvasResourceReferences,
-    getContextResourceNodes,
-    normalizeCanvasNodeMentionTokens,
-    reorderCanvasResourceConnections,
-    replaceCanvasReferenceMentions,
-    type CanvasResourceReference,
-} from "@/lib/canvas/canvas-resource-references";
-import { CanvasConnectionCreateMenu, CanvasNodePanelOverlay, type PendingConnectionCreate } from "@/components/canvas/canvas-workspace-overlays";
-import { CanvasOverlayLayerContainer, CanvasOverlayLayerProvider } from "@/components/canvas/canvas-overlay-layer";
-import { CanvasLeaferGraphicsLayer } from "@/components/canvas/canvas-leafer-graphics-layer";
-import { CanvasFreeformEmptyState, CanvasLinkedProjectEmptyState, CanvasShortDramaEmptyState, CanvasShortDramaGuide, CanvasStoryInputNodeContent, CanvasStylePlaceholderNodeContent } from "@/components/canvas/canvas-short-drama-entry";
-import { resolveCanvasEmptyStateKind } from "@/lib/canvas/canvas-starter";
-import { failedImageBatchChildren, markImageBatchRetrying, reconcileImageBatchRoot, restoreUnsubmittedImageBatchChild } from "@/lib/canvas/canvas-image-batch-retry";
-import { createCanvasNode, getInputSummary, isHiddenBatchChild } from "@/lib/canvas/canvas-project-domain";
-import { stampCanvasNodeChanges, updateCanvasNode, updateCanvasNodes } from "@/lib/canvas/canvas-node-timestamps";
-import { canvasAssetHandoffAttempt, finalizeCanvasAssetHandoff, uninsertedCanvasAssetHandoffPayloads } from "@/lib/canvas/canvas-asset-handoff";
-import { batchSourceRestriction } from "@/lib/canvas/canvas-batch-connection";
-import { batchReferenceColumns } from "@/lib/canvas/canvas-batch-table";
-import { deriveStoryboardPipelineProgress } from "@/lib/canvas/canvas-storyboard-progress";
-import { CanvasOperationChangeToast, CanvasMergeStatusToast, CanvasUploadStatusToast } from "./canvas-project-feedback";
-import { backendProviderConfig, getGenerationCount } from "@/lib/canvas/canvas-project-generation";
-import { cancelGenerationTask } from "@/services/api/task-center";
-import { CanvasSyncStatus } from "./canvas-sync-status";
-import { CanvasVersionHistory, useCanvasVersionHistory } from "./canvas-version-history";
-import { CanvasVersionPreview } from "./canvas-version-preview";
-import { CanvasTopBar } from "./canvas-project-top-bar";
-import { LibTVImportDialog } from "./components/libtv-import-dialog";
-import { TapNowImportDialog } from "./components/tapnow-import-dialog";
-import { CanvasFocusModeBar } from "@/components/canvas/canvas-focus-mode-bar";
-import { CanvasProjectContextMenu } from "./canvas-project-context-menu";
-import { CanvasProjectMediaDialogs } from "./canvas-project-media-dialogs";
-import { BatchGenerationSettingsDialog } from "@/components/canvas/batch-generation-settings-dialog";
-import { CanvasProjectSelectionToolbar } from "./canvas-project-selection-toolbar";
-import { CanvasProjectStatusDialogs } from "./canvas-project-status-dialogs";
-import { CanvasProjectWorldLayers } from "./canvas-project-world-layers";
-import { CanvasNodeActionContext, type CanvasNodeActionContextValue } from "@/components/canvas/canvas-node-action-context";
-import { bringCanvasNodeToFront, type CanvasNodeStackOrder } from "@/lib/canvas/canvas-node-stack-order";
-import { AiArtCritiqueModal } from "@/components/canvas/art-critique/ai-art-critique-modal";
-import { CanvasNodeGraphContext, type CanvasNodeGraphContextValue } from "@/components/canvas/canvas-node-graph-context";
-import { CanvasRefreshShell } from "./canvas-refresh-shell";
-import { queryGenerationTask } from "@/services/api/task-center";
-import type { CanvasImageEmotionPayload } from "@/components/canvas/canvas-node-emotion-panel";
-import { CanvasEmotionWorkspace } from "@/components/canvas/canvas-emotion-workspace";
-import { removeCanvasDrawing } from "@/lib/canvas/canvas-drawing-storage";
-import { useCanvasConnectionController } from "./use-canvas-connection-controller";
-import { useCanvasOperationHistory } from "./use-canvas-operation-history";
-import { useCanvasAssistantVisibility } from "./use-canvas-assistant-visibility";
-import { useCanvasActiveTasks } from "./use-canvas-active-tasks";
-import { useCanvasStyleWorkflow } from "./use-canvas-style-workflow";
-import { useCanvasDirector } from "./use-canvas-director";
-import { useCanvasGeneration } from "./use-canvas-generation";
-import { useCanvasGenerationBatches } from "./use-canvas-generation-batches";
-import { useCanvasBatchTable } from "./use-canvas-batch-table";
-import { useCanvasGenerationExecutor, type CanvasNodeGenerationOptions } from "./use-canvas-generation-executor";
-import { useCanvasGenerationRetry } from "./use-canvas-generation-retry";
-import { useCanvasHistory } from "./use-canvas-history";
-import { useCanvasKeyboard } from "./use-canvas-keyboard";
-import { useCanvasMediaTools } from "./use-canvas-media-tools";
-import { useCanvasNodeEditor } from "./use-canvas-node-editor";
-import { useCanvasNodeOperations } from "./use-canvas-node-operations";
-import { useCanvasProjectLifecycle } from "./use-canvas-project-lifecycle";
-import { useCanvasRenderModel } from "./use-canvas-render-model";
-import { useCanvasSelectionController } from "./use-canvas-selection-controller";
-import { useCanvasShortDrama } from "./use-canvas-short-drama";
-import { useCanvasStoryboard } from "./use-canvas-storyboard";
-import { useCanvasUpload } from "./use-canvas-upload";
-import { useCanvasTimelineAssetInsert } from "./use-canvas-timeline-asset-insert";
-import { useCanvasViewportController } from "./use-canvas-viewport-controller";
-import {
-    CanvasNodeType,
-    type CanvasAssistantSession,
-    type CanvasConnection,
-    type CanvasFolderStyle,
-    type CanvasFolderTheme,
-    type CanvasNodeData,
-    type CanvasNodeMetadata,
-    type CanvasMediaPerformanceMode,
-    type StoryboardColumn,
-    type StoryboardShotCount,
-    type StoryboardShotDuration,
-    type CanvasWorkflowKind,
-    type CanvasWorkspaceMode,
-    type CanvasToolMode,
-    type ContextMenuState,
-    type Position,
-    type ViewportTransform,
-} from "@/types/canvas";
-import type { ReferenceImage } from "@/types/image";
-import { ART_CRITIQUE_NODE_TYPE } from "@/lib/art-critique/contracts";
-
-const CanvasDirectorWorkbench = lazy(() => import("@/components/canvas/director/canvas-director-workbench").then((module) => ({ default: module.CanvasDirectorWorkbench })));
-const CanvasDrawingEditorModal = lazy(() => import("@/components/canvas/canvas-drawing-editor-modal").then((module) => ({ default: module.CanvasDrawingEditorModal })));
-
-const NODE_STATUS_SUCCESS = "success" as const;
-const EMPTY_RESOURCE_REFERENCES: CanvasResourceReference[] = [];
-
-
-async function copyImageToSystemClipboard(source: string, storageKey?: string) {
-    if (typeof ClipboardItem === "undefined" || !navigator.clipboard?.write) throw new Error("当前浏览器不支持复制图片");
-    if (typeof window !== "undefined") window.focus();
-
-    const fetchPNG = async (): Promise<Blob> => {
-        let sourceBlob: Blob | null = null;
-        if (storageKey) {
-            sourceBlob = await getCachedResourceBlob(storageKey).catch(() => null);
-        }
-        if (!sourceBlob) {
-            const response = await fetch(source);
-            if (!response.ok) throw new Error(`图片读取失败（HTTP ${response.status}）`);
-            sourceBlob = await response.blob();
-        }
-        return sourceBlob.type === "image/png" ? sourceBlob : await convertClipboardImageToPNG(sourceBlob);
-    };
-
-    // 优先尝试将 Promise 直接传给 ClipboardItem（现代浏览器标准），在用户激活手势内立即声明写入，
-    // 避免因 fetch / 格式转换耗时导致手势过期或窗口失焦抛出 "Document is not focused" 错误。
-    try {
-        const item = new ClipboardItem({ "image/png": fetchPNG() });
-        await navigator.clipboard.write([item]);
-        return;
-    } catch {
-        // 部分浏览器环境不支持延迟 Promise，回退到先取 Blob 再写入
-    }
-
-    const blob = await fetchPNG();
-    if (typeof window !== "undefined") window.focus();
-    await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
-}
-
-async function convertClipboardImageToPNG(blob: Blob) {
-    if (typeof createImageBitmap !== "function") throw new Error("当前浏览器无法转换这张图片的格式");
-    const bitmap = await createImageBitmap(blob);
-    try {
-        const canvas = document.createElement("canvas");
-        canvas.width = bitmap.width;
-        canvas.height = bitmap.height;
-        const context = canvas.getContext("2d");
-        if (!context) throw new Error("当前浏览器无法处理这张图片");
-        context.drawImage(bitmap, 0, 0);
-        return await new Promise<Blob>((resolve, reject) => canvas.toBlob((value) => (value ? resolve(value) : reject(new Error("图片格式转换失败"))), "image/png"));
-    } finally {
-        bitmap.close();
-    }
-}
-
-function visibleGenerationBatch(node: CanvasNodeData) {
-    const batches = node.metadata?.generationBatches || [];
-    for (let index = batches.length - 1; index >= 0; index -= 1) {
-        if (batches[index].status === "queued" || batches[index].status === "running") return batches[index];
-    }
-    return batches.at(-1);
-}
-
-export default function CanvasPage() {
-    useCanvasThemeScope();
-    const [mounted, setMounted] = useState(false);
-
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) return <CanvasRefreshShell />;
-
-    return <InfiniteCanvasPage />;
-}
-
-function InfiniteCanvasPage() {
-    // 命令式确认必须走 App.useApp().modal；静态 Modal.confirm 拿不到主题和 App 上下文。
-    const { message, modal } = App.useApp();
-    const queryClient = useQueryClient();
-    const params = useParams<{ id: string }>();
-    const [searchParams, setSearchParams] = useSearchParams();
-    const projectId = params.id || "";
-    const canvasStorageScope = getActiveUserScope();
-    const containerRef = useRef<HTMLDivElement>(null);
-    const didInitialCenterRef = useRef(false);
-    const toolbarHideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const assetHandoffRef = useRef("");
-
-    const config = useConfigStore((state) => state.config);
-    const effectiveConfig = useEffectiveConfig();
-    const isAiConfigReady = useConfigStore((state) => state.isAiConfigReady);
-    const assets = useAssetStore((state) => state.assets);
-    const assetsHydrated = useAssetStore((state) => state.hydrated);
-    const cleanupAssetImages = useAssetStore((state) => state.cleanupImages);
-    const colorTheme = useCanvasThemeStore((state) => state.theme);
-    const setTheme = useCanvasThemeStore((state) => state.setTheme);
-    const theme = canvasThemes[colorTheme];
-    const defaultDrawingEngine = useUserStore((state) => state.drawingEngine.defaultEngine);
-    const shortDramaEnabled = useUserStore((state) => state.features.shortDramaEnabled);
-    const directorOnboardingScope = useUserStore((state) => state.user?.id?.trim() || "");
-    const nodesRef = useRef<CanvasNodeData[]>([]);
-    const [nodes, setNodesState] = useState<CanvasNodeData[]>([]);
-    const setNodes = useCallback<Dispatch<SetStateAction<CanvasNodeData[]>>>((value) => {
-        if (typeof value === "function") {
-            setNodesState((current) => {
-                const next = stampCanvasNodeChanges(current, value(current));
-                nodesRef.current = next;
-                return next;
-            });
-            return;
-        }
-        const next = stampCanvasNodeChanges(nodesRef.current, value);
-        nodesRef.current = next;
-        setNodesState(next);
-    }, []);
-    const [nodeStackOrder, setNodeStackOrder] = useState<CanvasNodeStackOrder>([]);
-    const bringNodeToFront = useCallback((nodeId: string) => {
-        setNodeStackOrder((current) => bringCanvasNodeToFront(current, nodeId));
-    }, []);
-    const [connections, setConnections] = useState<CanvasConnection[]>([]);
-    const [chatSessions, setChatSessions] = useState<CanvasAssistantSession[]>([]);
-    const [activeChatId, setActiveChatId] = useState<string | null>(null);
-    const [viewport, setViewport] = useState<ViewportTransform>({ x: 0, y: 0, k: 1 });
-    const [size, setSize] = useState({ width: 1200, height: 720 });
-    const [selectedNodeIds, setSelectedNodeIds] = useState<Set<string>>(new Set());
-    const [selectedConnectionId, setSelectedConnectionId] = useState<string | null>(null);
-    const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
-    const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
-    const [agentPrefillPrompt, setAgentPrefillPrompt] = useState("");
-    const [isMiniMapOpen, setIsMiniMapOpen] = useState(false);
-    const [canvasAppearance, setCanvasAppearance] = useState<CanvasAppearance>(() => canvasAppearanceForTheme(colorTheme));
-    const [backgroundMode, setBackgroundMode] = useState<CanvasBackgroundMode>(DEFAULT_CANVAS_BACKGROUND_MODE);
-    const [showImageInfo, setShowImageInfo] = useState(false);
-    const [canvasTool, setCanvasTool] = useState<CanvasToolMode>("box-select");
-    const [mediaPerformanceMode, setMediaPerformanceMode] = useState<CanvasMediaPerformanceMode>(readCanvasMediaPerformanceMode);
-    const [projectLoaded, setProjectLoaded] = useState(false);
-    const workspaceMode: CanvasWorkspaceMode = "professional";
-    const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
-    const [shareModalOpen, setShareModalOpen] = useState(false);
-    const [tapNowImportOpen, setTapNowImportOpen] = useState(false);
-    const [nodeSearchOpen, setNodeSearchOpen] = useState(false);
-    const [toolbarNodeId, setToolbarNodeId] = useState<string | null>(null);
-    const [arkPrivateAssetUploadNodeId, setArkPrivateAssetUploadNodeId] = useState<string | null>(null);
-    const [nodeImageSettingsOpen, setNodeImageSettingsOpen] = useState(false);
-    const [dialogNodeId, setDialogNodeId] = useState<string | null>(null);
-    const [textEditorNodeId, setTextEditorNodeId] = useState<string | null>(null);
-    const [characterReferenceNodeId, setCharacterReferenceNodeId] = useState<string | null>(null);
-    const [drawingNodeId, setDrawingNodeId] = useState<string | null>(null);
-    const [stylePickerOpen, setStylePickerOpen] = useState(false);
-    // 新建导演台镜头必须先选模板：null 表示未在选择中，undefined position 表示用画布中心。
-    const [directorTemplateRequest, setDirectorTemplateRequest] = useState<{ position?: Position } | null>(null);
-    const [infoNodeId, setInfoNodeId] = useState<string | null>(null);
-    const [subtitleNodeId, setSubtitleNodeId] = useState<string | null>(null);
-    const [timelineNodeId, setTimelineNodeId] = useState<string | null>(null);
-    const [superResolveNodeId, setSuperResolveNodeId] = useState<string | null>(null);
-    const [previewNodeId, setPreviewNodeId] = useState<string | null>(null);
-    const [scriptEditorNodeId, setScriptEditorNodeId] = useState<string | null>(null);
-    const [artCritiqueNodeId, setArtCritiqueNodeId] = useState<string | null>(null);
-    const artCritiqueRunningRef = useRef(false);
-    const [artCritiqueStartRequest, setArtCritiqueStartRequest] = useState<{ nodeId: string; id: string; restart: boolean } | null>(null);
-    const [scriptScrollTopById, setScriptScrollTopById] = useState<Record<string, number>>({});
-    const [directorNodeId, setDirectorNodeId] = useState<string | null>(null);
-    const [versionCompareRootId, setVersionCompareRootId] = useState<string | null>(null);
-    const [libTVImportOpen, setLibTVImportOpen] = useState(false);
-    const [titleEditing, setTitleEditing] = useState(false);
-    const [titleDraft, setTitleDraft] = useState("");
-    const [shortcutRequestNonce, setShortcutRequestNonce] = useState(0);
-    const [cinematicAgentEntry, setCinematicAgentEntry] = useState(false);
-    const { assistantOpen, closeAgent, openAgent: openAssistant } = useCanvasAssistantVisibility();
-    const agentMentionReferences = useMemo(() => buildCanvasAgentMentionReferences(nodes), [nodes]);
-
-    const { tasks: activeTasks } = useCanvasActiveTasks(projectId, projectLoaded);
-    const { focusMode, enterFocusMode, exitFocusMode, toggleFocusMode } = useFocusMode();
-    const [focusDockRevealed, setFocusDockRevealed] = useState(false);
-
-    useEffect(() => {
-        persistCanvasMediaPerformanceMode(mediaPerformanceMode);
-    }, [mediaPerformanceMode]);
-
-    useEffect(() => {
-        didInitialCenterRef.current = false;
-        setNodeStackOrder([]);
-    }, [projectId]);
-
-    useEffect(() => {
-        const nodeIds = new Set(nodes.map((node) => node.id));
-        setNodeStackOrder((current) => {
-            const next = current.filter((nodeId) => nodeIds.has(nodeId));
-            return next.length === current.length ? current : next;
-        });
-    }, [nodes]);
-
-    const connectionsRef = useRef(connections);
-    const chatSessionsRef = useRef(chatSessions);
-    const activeChatIdRef = useRef(activeChatId);
-    const selectedNodeIdsRef = useRef(selectedNodeIds);
-    const viewportRef = useRef(viewport);
-    const generateNodeRef = useRef<((nodeId: string, mode: CanvasNodeGenerationMode, prompt: string, options?: CanvasNodeGenerationOptions) => Promise<void>) | null>(null);
-
-    useEffect(() => {
-        if (!projectId) return;
-        return registerCanvasGenerationLiveProject({
-            scope: canvasStorageScope,
-            projectId,
-            adapter: createCanvasGenerationLiveProjectAdapter({ nodesRef, connectionsRef, chatSessionsRef, activeChatIdRef, setNodes, setConnections, setChatSessions, setActiveChatId }),
-        });
-    }, [canvasStorageScope, projectId]);
-
-    const resolvedCanvasAppearance = useMemo(() => resolveCanvasAppearance(canvasAppearance, colorTheme), [canvasAppearance, colorTheme]);
-    const applyCanvasAppearance = useCallback(
-        (next: CanvasAppearance) => {
-            const fallback = canvasAppearanceBaseTheme(next, colorTheme);
-            const normalized = normalizeCanvasAppearance(next, fallback);
-            setCanvasAppearance(normalized);
-            setTheme(canvasAppearanceBaseTheme(normalized, fallback));
-        },
-        [colorTheme, setTheme],
-    );
-    const saveCanvasAppearanceDefault = useCallback(
-        (next: CanvasAppearance) => {
-            writeCanvasAppearanceDefault({ appearance: next, backgroundMode });
-            message.success("已保存为当前账号在本机的新建画布默认外观");
-        },
-        [backgroundMode, message],
-    );
-
-    const { getHistoryCleanupContext, historyPausedRef, historyState, redoCanvas, resetHistory, undoCanvas } = useCanvasHistory({
-        projectLoaded,
-        nodes,
-        connections,
-        chatSessions,
-        activeChatId,
-        canvasAppearance,
-        backgroundMode,
-        showImageInfo,
-        setNodes,
-        setConnections,
-        setChatSessions,
-        setActiveChatId,
-        applyCanvasAppearance,
-        setBackgroundMode,
-        setShowImageInfo,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setContextMenu,
-    });
-
-    const cleanupCanvasFiles = useCallback(
-        (extra?: unknown) => {
-            cleanupAssetImages({ extra, ...getHistoryCleanupContext() });
-        },
-        [cleanupAssetImages, getHistoryCleanupContext],
-    );
-
-    const { loadError, retryLoad, addedSkills, agentCreatedNodes, clearCanvasFiles, createAndOpenProject, currentProject, deleteCurrentProject, renameCurrentProject, reloadLatestCanvasProject, restoreCanvasProjectVersion, saveCanvasProject, forceSaveCanvasProject, updateProject } = useCanvasProjectLifecycle({
-        projectId,
-        projectLoaded,
-        nodes,
-        connections,
-        chatSessions,
-        activeChatId,
-        canvasAppearance,
-        backgroundMode,
-        showImageInfo,
-        viewport,
-        nodesRef,
-        connectionsRef,
-        chatSessionsRef,
-        activeChatIdRef,
-        viewportRef,
-        historyPausedRef,
-        setNodes,
-        setConnections,
-        setChatSessions,
-        setActiveChatId,
-        setCanvasAppearance,
-        setBackgroundMode,
-        setShowImageInfo,
-        setViewport,
-        setProjectLoaded,
-        resetHistory,
-        cleanupAssetImages,
-        cleanupCanvasFiles,
-    });
-
-    const versions = useCanvasVersionHistory(projectId, restoreCanvasProjectVersion);
-    const openVersions = () => { closeAgent(); setVersionCompareRootId(null); versions.show(); };
-    const openAgent = useCallback(() => { versions.close(); openAssistant(); }, [versions.close, openAssistant]);
-
-    const sendSelectionToAgent = useCallback((nodeId?: string) => {
-        const ids = nodeId ? [nodeId] : Array.from(selectedNodeIdsRef.current);
-        const references = ids.map((id) => agentMentionReferences.find((reference) => reference.nodeId === id)).filter((reference): reference is CanvasResourceReference => Boolean(reference));
-        if (!references.length) return;
-        setAgentPrefillPrompt(`${references.map(canvasResourceMentionToken).join(" ")} `);
-        openAgent();
-        setContextMenu(null);
-    }, [agentMentionReferences, openAgent]);
-    // 修复素材关联仍遵守当前画布版本，不能替用户确认覆盖云端的新内容。
-    const confirmForceSaveCanvas = useCallback(() => {
-        modal.confirm({
-            title: "修复素材关联并保存？",
-            content: "核对画布媒体与素材库的关联，补齐缺失素材后保存。若云端已有新版本，会保留本地草稿并提示加载最新版。",
-            okText: "修复并保存",
-            cancelText: "取消",
-            onOk: () => forceSaveCanvasProject(),
-        });
-    }, [forceSaveCanvasProject, modal]);
-
-    const applyLibTVImport = useCallback(
-        async (importedNodes: CanvasNodeData[], importedConnections: CanvasConnection[]) => {
-            const previousNodes = nodesRef.current;
-            const previousConnections = connectionsRef.current;
-            const nextNodes = [...nodesRef.current, ...importedNodes];
-            const nextConnections = [...connectionsRef.current, ...importedConnections];
-            nodesRef.current = nextNodes;
-            connectionsRef.current = nextConnections;
-            setNodes(nextNodes);
-            setConnections(nextConnections);
-            const saved = await saveCanvasProject({ requireRemote: false });
-            if (!saved) {
-                nodesRef.current = previousNodes;
-                connectionsRef.current = previousConnections;
-                setNodes(previousNodes);
-                setConnections(previousConnections);
-                throw new Error("画布保存失败，已撤销本次 LibTV 导入");
-            }
-        },
-        [saveCanvasProject, setConnections, setNodes],
-    );
-    const applyTapNowImport = useCallback(
-        async (importedNodes: CanvasNodeData[], importedConnections: CanvasConnection[]) => {
-            const previousNodes = nodesRef.current;
-            const previousConnections = connectionsRef.current;
-            const nextNodes = [...nodesRef.current, ...importedNodes];
-            const nextConnections = [...connectionsRef.current, ...importedConnections];
-            nodesRef.current = nextNodes;
-            connectionsRef.current = nextConnections;
-            setNodes(nextNodes);
-            setConnections(nextConnections);
-            const saved = await saveCanvasProject({ requireRemote: false });
-            if (!saved) {
-                nodesRef.current = previousNodes;
-                connectionsRef.current = previousConnections;
-                setNodes(previousNodes);
-                setConnections(previousConnections);
-                throw new Error("画布保存失败，已撤销本次 TapNow 导入");
-            }
-        },
-        [saveCanvasProject, setConnections, setNodes],
-    );
-    const linkedProjectId = shortDramaEnabled ? currentProject?.projectId || "" : "";
-    const linkedProjectQuery = useQuery({ queryKey: ["project", linkedProjectId], queryFn: () => getProject(linkedProjectId), enabled: Boolean(linkedProjectId) });
-    const refetchLinkedProject = linkedProjectQuery.refetch;
-    const archiveNodesToLinkedFolder = useCallback(
-        (folder: CanvasNodeData, droppedNodes: CanvasNodeData[]) => {
-            const folderId = folder.metadata?.folder?.assetFolderId;
-            const domainProjectId = folder.metadata?.folder?.projectId || linkedProjectId;
-            if (!folderId || !domainProjectId || !droppedNodes.length) return;
-            void Promise.all(droppedNodes.map((node) => ensureCanvasNodeAsset({ canvasId: projectId, domainProjectId, folderId, node, source: "canvas-manual" })))
-                .then((results) => {
-                    const archivedByNodeId = new Map(droppedNodes.map((node, index) => [node.id, { assetId: results[index].assetId, content: node.metadata?.content, previousAssetId: node.metadata?.assetId }]));
-                    setNodes((current) =>
-                        current.map((node) => {
-                            const archived = archivedByNodeId.get(node.id);
-                            if (!archived || node.metadata?.content !== archived.content || node.metadata?.assetId !== archived.previousAssetId) return node;
-                            return { ...node, metadata: { ...node.metadata, assetId: archived.assetId } };
-                        }),
-                    );
-                    void refetchLinkedProject();
-                    message.success(`已归档到“${folder.title}”`);
-                })
-                .catch((error) => message.error(error instanceof Error ? error.message : "素材归档失败"));
-        },
-        [linkedProjectId, message, projectId, refetchLinkedProject, setNodes],
-    );
-    useEffect(() => {
-        if (!projectLoaded || !linkedProjectQuery.data) return;
-        setNodes((current) => refreshCanvasCharacterReferenceNodes(current, linkedProjectQuery.data.assets));
-    }, [linkedProjectQuery.data, projectLoaded, setNodes]);
-    const canvasContext = useMemo(() => summarizeCanvasContext(nodes, selectedNodeIds, linkedProjectQuery.data?.units), [linkedProjectQuery.data?.units, nodes, selectedNodeIds]);
-    // 扩展节点（对比/图表/调色）要读自己的上游才能渲染，经 Context 下发；
-    // 取上游复用 canvas-resource-references 的实现，别在这里另写一份。必须 memo——
-    // 每帧新对象会让所有节点跟着重渲染，错题本里多条崩溃都出在画布高频更新。
-    const nodeGraphContext = useMemo<CanvasNodeGraphContextValue>(() => ({ getUpstreamNodes: (nodeId: string) => getContextResourceNodes(nodeId, nodes, connections) }), [connections, nodes]);
-
-    const { applyGenerationTaskResult, bindGenerationTask, finishGenerationRequest, openNodeTaskDetails, runningNodeId, setRunningNodeId, setTaskDetail, startGenerationRequest, taskDetail, taskDetailLoading, taskDetailLogs } = useCanvasGeneration({
-        projectId,
-        domainProjectId: linkedProjectId,
-        projectLoaded,
-        nodes,
-        nodesRef,
-        setNodes,
-    });
-
-    const cancelCanvasTask = useCallback(
-        (task: import("@/services/api/task-center").GenerationTask) => {
-            modal.confirm({
-                title: "取消生成任务？",
-                content: "任务会立即停止本地执行；如果已经提交到上游，系统会继续核对取消结果和积分状态。",
-                okText: "取消任务",
-                okButtonProps: { danger: true },
-                cancelText: "继续等待",
-                onOk: async () => {
-                    try {
-                        const next = await cancelGenerationTask(task.id);
-                        const node = nodesRef.current.find((item) => item.metadata?.taskId === task.id);
-                        if (node) bindGenerationTask(node.id, next);
-                        setTaskDetail((current) => (current?.id === task.id ? next : current));
-                        await queryClient.invalidateQueries({ queryKey: ["canvas-active-tasks", projectId] });
-                        message.success("任务已取消");
-                    } catch (error) {
-                        message.error(error instanceof Error ? error.message : "取消任务失败");
-                    }
-                },
-            });
-        },
-        [bindGenerationTask, message, modal, nodesRef, projectId, queryClient, setTaskDetail],
-    );
-
-    useEffect(() => {
-        const sessionId = searchParams.get("conversation");
-        if (!projectLoaded || !sessionId) return;
-        if (!chatSessions.some((session) => session.id === sessionId)) {
-            message.warning("未找到要接续的会话，请从首页重新进入。");
-        } else {
-            activeChatIdRef.current = sessionId;
-            setActiveChatId(sessionId);
-            openAgent();
-        }
-        const next = new URLSearchParams(searchParams);
-        next.delete("conversation");
-        setSearchParams(next, { replace: true });
-    }, [projectLoaded, chatSessions, searchParams, setSearchParams, openAgent, message]);
-
-    useEffect(() => {
-        if (!projectLoaded || searchParams.get("agent") !== "1") return;
-        openAgent();
-        const next = new URLSearchParams(searchParams);
-        next.delete("agent");
-        setSearchParams(next, { replace: true });
-    }, [projectLoaded, searchParams, setSearchParams, openAgent]);
-
-    // 沉浸专注进入时收起智能体与小地图、重置 Dock 唤出态；仅响应「进入」瞬间，避免关闭专注内主动唤出的面板。
-    const prevFocusModeRef = useRef(focusMode);
-    useEffect(() => {
-        const enteredFocus = focusMode && !prevFocusModeRef.current;
-        prevFocusModeRef.current = focusMode;
-        if (!enteredFocus) return;
-        closeAgent();
-        setIsMiniMapOpen(false);
-        setFocusDockRevealed(false);
-    }, [closeAgent, focusMode]);
-
-    useEffect(() => {
-        if (!dialogNodeId) setNodeImageSettingsOpen(false);
-    }, [dialogNodeId]);
-
-    useLayoutEffect(() => {
-        nodesRef.current = nodes;
-        connectionsRef.current = connections;
-        chatSessionsRef.current = chatSessions;
-        activeChatIdRef.current = activeChatId;
-        selectedNodeIdsRef.current = selectedNodeIds;
-        viewportRef.current = viewport;
-    }, [activeChatId, chatSessions, nodes, connections, selectedNodeIds, viewport]);
-
-    useEffect(() => {
-        if (!projectLoaded) return;
-        const el = containerRef.current;
-        if (!el) return;
-
-        const updateSize = () => {
-            const rect = el.getBoundingClientRect();
-            setSize((current) => (current.width === rect.width && current.height === rect.height ? current : { width: rect.width, height: rect.height }));
-            if (!didInitialCenterRef.current) {
-                didInitialCenterRef.current = true;
-                const current = viewportRef.current;
-                if (current.x === 0 && current.y === 0 && current.k === 1) {
-                    const centered = { x: rect.width / 2, y: rect.height / 2, k: 1 };
-                    viewportRef.current = centered;
-                    setViewport(centered);
-                }
-            }
-        };
-
-        updateSize();
-        const resizeObserver = new ResizeObserver(updateSize);
-        resizeObserver.observe(el);
-        return () => resizeObserver.disconnect();
-    }, [projectLoaded]);
-
-    const {
-        fitCanvasContent,
-        fitCanvasSelection,
-        focusCanvasImageNode,
-        focusCanvasNode,
-        getCanvasCenter,
-        handleCanvasDoubleClick,
-        handleViewportChange,
-        handleViewportPreviewChange,
-        previewViewport,
-        screenToCanvas,
-        setZoomScale,
-        zoomCanvasIn,
-        zoomCanvasOut,
-        zoomToActualSize,
-    } = useCanvasViewportController({
-        agentCreatedNodes,
-        containerRef,
-        size,
-        viewportRef,
-        nodesRef,
-        selectedNodeIdsRef,
-        setViewport,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setContextMenu,
-        setDialogNodeId,
-        setToolbarNodeId,
-    });
-
-    useEffect(() => {
-        const project = linkedProjectQuery.data?.project;
-        const preset = resolveProjectCanvasStyle(project?.stylePresetId, project?.styleProfileJson);
-        if (!projectLoaded || !preset) return;
-        const profile = resolveStyleProfile(project?.stylePresetId, project?.styleProfileJson, preset.profile || createStyleProfileSnapshot(preset));
-        if (!profile) return;
-        const current = nodesRef.current.find((node) => node.type === CanvasNodeType.Text && node.metadata?.workflowKind === "styleboard");
-        const nextMetadata = {
-            content: profile.prompt,
-            prompt: profile.prompt,
-            status: NODE_STATUS_SUCCESS,
-            workflowKind: "styleboard" as const,
-            workflowTitle: "项目画风",
-            workflowDescription: profile.description,
-            stylePresetId: profile.presetId,
-            styleProfileJson: serializeStyleProfile(profile),
-            fontSize: 14,
-            locked: true,
-        };
-        if (current) {
-            if (current.metadata?.stylePresetId === profile.presetId && current.metadata?.content === profile.prompt && current.metadata?.styleProfileJson === nextMetadata.styleProfileJson && current.metadata?.locked) return;
-            setNodes((nodes) => nodes.map((node) => (node.id === current.id ? { ...node, title: `项目画风 · ${profile.title}`, metadata: { ...node.metadata, ...nextMetadata } } : node)));
-            return;
-        }
-        const node = createCanvasNode(CanvasNodeType.Text, getCanvasCenter(), nextMetadata);
-        node.title = `项目画风 · ${profile.title}`;
-        node.width = 420;
-        node.height = 240;
-        setNodes((nodes) => [...nodes, node]);
-    }, [getCanvasCenter, linkedProjectQuery.data?.project, projectLoaded, setNodes]);
-
-    const {
-        assetPickerOpen,
-        closeUploadModal,
-        closeAssetPicker,
-        createVideoNodeFromBlob,
-        createImageAssetNode,
-        fileDropActive,
-        handleAssetsInsert,
-        handleDrop,
-        handleFileDragEnter,
-        handleFileDragLeave,
-        handleFileDragOver,
-        handleImageInputChange,
-        handleProjectAssetsInsert,
-        handleProjectChapterInsert,
-        handleUploadFiles,
-        handleUploadRequest,
-        imageInputRef,
-        openAssetsAtPosition,
-        pasteAssistantImage,
-        pasteSystemClipboard,
-        replaceNodeMedia,
-        createFileNode,
-        startUploadStatus,
-        uploadModalOpen,
-        uploadTimelineMedia,
-        uploadStatus,
-    } = useCanvasUpload({
-        canvasId: projectId,
-        domainProjectId: linkedProjectId,
-        nodesRef,
-        selectedNodeIdsRef,
-        getCanvasCenter,
-        screenToCanvas,
-        setNodes,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setContextMenu,
-        setDialogNodeId,
-    });
-    const replaceCanvasNodeMedia = useCallback((node: CanvasNodeData) => handleUploadRequest(node.id), [handleUploadRequest]);
-    const {
-        timelineAddNodeRef,
-        timelineMediaAddRef,
-        assetInsertScope,
-        projectAssetScope,
-        projectAssetOpen,
-        projectAssetInitialCategory,
-        projectAssetInitialFolderId,
-        projectAssetInsertPosition,
-        handleLibraryAssetsInsert,
-        handleTimelineProjectAssetsInsert,
-        openProjectAssets,
-        openCanvasAssetLibrary,
-        openTimelineAssetLibrary,
-        closeProjectAssets,
-    } = useCanvasTimelineAssetInsert({
-        linkedProjectId,
-        refetchLinkedProject,
-        handleAssetsInsert,
-        handleProjectAssetsInsert,
-        openAssetsAtPosition,
-    });
-
-    useEffect(() => {
-        if (!projectLoaded || searchParams.get("mode") !== "handoff") return;
-        void loadAssetsForUse(canvasAssetHandoffIds(searchParams)).catch((error) => message.error(error instanceof Error ? error.message : "转入素材读取失败"));
-    }, [projectLoaded, searchParams, message]);
-
-    useEffect(() => {
-        if (!projectLoaded || !assetsHydrated || searchParams.get("mode") !== "handoff") return;
-        const attempt = canvasAssetHandoffAttempt(assets, searchParams);
-        const { assetIds, payloads } = attempt;
-        if (!assetIds.length) return;
-        const assetReadiness = assetIds
-            .map((assetId) => {
-                const asset = assets.find((candidate) => candidate.id === assetId);
-                return `${assetId}:${asset?.kind || "missing"}`;
-            })
-            .join("|");
-        const handoffKey = `${projectId}:${assetReadiness}`;
-        if (assetHandoffRef.current === handoffKey) return;
-        assetHandoffRef.current = handoffKey;
-
-        if (attempt.kind === "retry") return;
-        const pendingPayloads = uninsertedCanvasAssetHandoffPayloads(nodesRef.current, payloads);
-        const persistHandoff = async (createdNodes: CanvasNodeData[]) => {
-            const finalized = await finalizeCanvasAssetHandoff({
-                searchParams,
-                currentNodes: nodesRef.current,
-                createdNodes,
-                persist: async (nextNodes) => {
-                    nodesRef.current = nextNodes;
-                    updateProject(projectId, { nodes: nextNodes });
-                    await flushCanvasStorePersistence();
-                },
-            });
-            setSearchParams(finalized.searchParams, { replace: true });
-        };
-        const insertion = pendingPayloads.length ? handleProjectAssetsInsert(pendingPayloads) : Promise.resolve([] as CanvasNodeData[]);
-        void insertion.then(persistHandoff).catch(() => {
-            assetHandoffRef.current = "";
-        });
-    }, [assets, assetsHydrated, handleProjectAssetsInsert, message, nodesRef, projectId, projectLoaded, searchParams, setSearchParams, updateProject]);
-
-    const {
-        angleNodeId,
-        lightingNodeId,
-        emotionNodeId,
-        annotationNodeId,
-        annotationEditNodeId,
-        createImageReversePromptNodes,
-        openPortraitTextureEditor,
-        cropImageNode,
-        cropNodeId,
-        closeFrameDialog,
-        closeSegmentDialog,
-        extractAudioFromVideo,
-        extractVideoFrames,
-        extractingVideoFramesNodeId,
-        frameDialogNodeId,
-        generateAngleNode,
-        generateLightingNode,
-        openPanoramaConfig,
-        createPanoramaViewerWithConfig,
-        addPanoramaCaptureNode,
-        panoramaConfigNodeId,
-        setPanoramaConfigNodeId,
-        generateEmotionNode,
-        handleSegmentConfirm,
-        maskEditImageNode,
-        maskEditNodeId,
-        imageEditNodeId,
-        imageEditPreset,
-        layerDecompositionNodeId,
-        textEditNodeId,
-        mergeSelectedVideos,
-        mergeVideosByIds,
-        mergeVideoProgress,
-        saveAnnotatedImageNode,
-        segmentDialogMode,
-        segmentDialogNodeId,
-        segmentRunningMode,
-        setFrameDialogNodeId,
-        setSegmentDialogNodeId,
-        setAngleNodeId,
-        setLightingNodeId,
-        setEmotionNodeId,
-        setAnnotationNodeId,
-        setAnnotationEditNodeId,
-        setCropNodeId,
-        setMaskEditNodeId,
-        setImageEditNodeId,
-        setImageEditPreset,
-        openImageEditNode,
-        openBackgroundRemoval,
-        openLayerDecomposition,
-        decomposeImageLayers,
-        setLayerDecompositionNodeId,
-        setTextEditNodeId,
-        openTextEditNode,
-        openAnnotationEditNode,
-        detectImageText,
-        editTextImageNode,
-        editAnnotatedImageNode,
-        editImageNode,
-        setUpscaleNodeId,
-        splitImageNode,
-        openVideoFrameExtractor,
-        openVideoSegmentExtractor,
-        upscaleImageNode,
-        upscaleNodeId,
-    } = useCanvasMediaTools({
-        projectId,
-        domainProjectId: linkedProjectId,
-        nodesRef,
-        connectionsRef,
-        selectedNodeIdsRef,
-        setNodes,
-        setConnections,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setDialogNodeId,
-        setContextMenu,
-        setHoveredNodeId,
-        setToolbarNodeId,
-        setRunningNodeId,
-        startUploadStatus,
-        startGenerationRequest,
-        finishGenerationRequest,
-        bindGenerationTask,
-    });
-
-    const handleNodesDeleted = useCallback(
-        (removedIds: Set<string>, nextNodes: CanvasNodeData[], removedNodes: CanvasNodeData[]) => {
-            const clearDeletedId = (current: string | null) => (current && removedIds.has(current) ? null : current);
-            setHoveredNodeId(clearDeletedId);
-            setToolbarNodeId(clearDeletedId);
-            setDialogNodeId(clearDeletedId);
-            setTextEditorNodeId(clearDeletedId);
-            setCharacterReferenceNodeId(clearDeletedId);
-            setDrawingNodeId(clearDeletedId);
-            setInfoNodeId(clearDeletedId);
-            setSubtitleNodeId(clearDeletedId);
-            setFrameDialogNodeId(clearDeletedId);
-            setSegmentDialogNodeId(clearDeletedId);
-            setCropNodeId(clearDeletedId);
-            setMaskEditNodeId(clearDeletedId);
-            setAnnotationNodeId(clearDeletedId);
-            setUpscaleNodeId(clearDeletedId);
-            setAngleNodeId(clearDeletedId);
-            setLightingNodeId(clearDeletedId);
-            setEmotionNodeId(clearDeletedId);
-            setSuperResolveNodeId(clearDeletedId);
-            setPreviewNodeId(clearDeletedId);
-            setRunningNodeId(clearDeletedId);
-            setScriptEditorNodeId(clearDeletedId);
-            setArtCritiqueNodeId(clearDeletedId);
-            setDirectorNodeId(clearDeletedId);
-            setVersionCompareRootId(clearDeletedId);
-            setScriptScrollTopById((current) => Object.fromEntries(Object.entries(current).filter(([id]) => !removedIds.has(id))));
-            setContextMenu((current) => (current?.type === "node" && removedIds.has(current.nodeId) ? null : current));
-            const removedDrawingIds = removedNodes.flatMap((node) => (node.type === CanvasNodeType.Drawing && node.metadata?.drawingId ? [node.metadata.drawingId] : []));
-            if (removedDrawingIds.length) {
-                void Promise.all(removedDrawingIds.map((drawingId) => removeCanvasDrawing(projectId, drawingId))).catch(() => message.warning("绘图节点已删除，但本地绘图缓存清理失败"));
-            }
-            cleanupCanvasFiles({ projectId, nodes: nextNodes, chatSessions });
-        },
-        [
-            chatSessions,
-            cleanupCanvasFiles,
-            message,
-            projectId,
-            setAngleNodeId,
-            setAnnotationNodeId,
-            setArtCritiqueNodeId,
-            setCropNodeId,
-            setEmotionNodeId,
-            setFrameDialogNodeId,
-            setLightingNodeId,
-            setMaskEditNodeId,
-            setSegmentDialogNodeId,
-            setUpscaleNodeId,
-            setRunningNodeId,
-        ],
-    );
-
-    const {
-        alignSelectedNodes,
-        autoArrangeCanvasNodes,
-        arrangeSelectedNodes,
-        spreadSelectedNodes,
-        copyNodesToClipboard,
-        copySelectedNodes,
-        createFolder,
-        createNode,
-        createReferenceGroup,
-        createStoryboardGroup,
-        deleteConnection,
-        deleteNodes,
-        duplicateNode,
-        hasCopiedNodes,
-        pasteCopiedNodes,
-        restoreCopiedNodesFromText,
-        releaseCopiedNodesPastePriority,
-        setPrimaryVersion,
-        shouldPreferCopiedNodes,
-        toggleNodeLocked,
-    } = useCanvasNodeOperations({
-        projectId,
-        defaultDrawingEngine,
-        nodesRef,
-        connectionsRef,
-        selectedNodeIdsRef,
-        getCanvasCenter,
-        setNodes,
-        setConnections,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setContextMenu,
-        setDialogNodeId,
-        onNodesDeleted: handleNodesDeleted,
-    });
-
-    const handleReplaceNodeReference = useCallback(
-        (targetNodeId: string, oldReference: { id: string; nodeId?: string; label?: string; title?: string }, sourceNodeId: string) => {
-            const sourceNode = nodesRef.current.find((n) => n.id === sourceNodeId);
-            if (!sourceNode || sourceNode.id === oldReference.nodeId) return;
-
-            const previousNodes = nodesRef.current;
-            const previousConnections = connectionsRef.current;
-
-            const configNodeId = previousConnections.find((c) => c.fromNodeId === targetNodeId && previousNodes.find((n) => n.id === c.toNodeId)?.type === CanvasNodeType.Config)?.toNodeId;
-            const receiverId = configNodeId || targetNodeId;
-
-            let rewired = false;
-            const nextConnections = previousConnections.map((c) => {
-                if (!rewired && c.fromNodeId === oldReference.nodeId && (c.toNodeId === targetNodeId || c.toNodeId === configNodeId)) {
-                    rewired = true;
-                    return { ...c, fromNodeId: sourceNodeId };
-                }
-                return c;
-            });
-
-            if (!rewired) {
-                nextConnections.push({
-                    id: nanoid(),
-                    fromNodeId: sourceNodeId,
-                    toNodeId: receiverId,
-                });
-            }
-
-            const nextReferencesMap = buildCanvasNodeMentionReferenceMap(previousNodes, nextConnections, previousNodes);
-            const targetNextReferences = nextReferencesMap.get(targetNodeId) || [];
-            const newRef = targetNextReferences.find((r) => r.nodeId === sourceNodeId);
-
-            const targetNode = previousNodes.find((n) => n.id === targetNodeId);
-            let nextNodes = previousNodes;
-            if (targetNode && newRef) {
-                const currentPrompt = targetNode.metadata?.composerContent ?? targetNode.metadata?.prompt ?? "";
-                const replacementToken = `@${newRef.label}`;
-                const updatedPrompt = replaceCanvasReferenceMentions(currentPrompt, oldReference, replacementToken, sourceNode.title ? sourceNode.title : newRef.label);
-
-                nextNodes = previousNodes.map((n) => (n.id === targetNodeId ? writeCanvasNodePrompt(n, updatedPrompt) : n));
-            }
-
-            nodesRef.current = nextNodes;
-            connectionsRef.current = nextConnections;
-            setNodes(nextNodes);
-            setConnections(nextConnections);
-            message.success(`已将参考图「${oldReference.label || "参考图"}」替换为「${sourceNode.title || "新图片"}」，提示词已同步更新`);
-        },
-        [connectionsRef, message, nodesRef, setConnections, setNodes],
-    );
-
-    const handleReplaceNodeReferenceFiles = useCallback(
-        (_targetNodeId: string, oldReference: { id: string; nodeId?: string; label?: string; title?: string }, files: File[]) => {
-            const file = files.find((f) => f.type.startsWith("image/"));
-            if (!file || !oldReference.nodeId) return;
-            void replaceNodeMedia(oldReference.nodeId, file).then((success: boolean) => {
-                if (success) {
-                    message.success("参考图片已替换");
-                }
-            });
-        },
-        [message, replaceNodeMedia],
-    );
-
-    const {
-        cancelPendingConnectionCreate,
-        closeConnectionCreateMenu,
-        connectionTargetAnchorRatio,
-        connectionTargetNodeId,
-        connectionApproach,
-        connectionReplaceHover,
-        connectingParams,
-        createConnectedNode,
-        getConnectionCreateDisabledReason,
-        handleConnectStart,
-        handleConnectDrop,
-        handleBatchConnectionTargetClick,
-        batchConnectionPreview,
-        beginBatchConnectionMode,
-        startBatchConnection,
-        mouseWorld,
-        pendingConnectionCreate,
-        setConnecting,
-    } = useCanvasConnectionController({
-        projectId,
-        config: effectiveConfig,
-        defaultDrawingEngine,
-        nodesRef,
-        connectionsRef,
-        viewportRef,
-        scriptScrollTopById,
-        screenToCanvas,
-        setNodes,
-        setConnections,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setContextMenu,
-        setDialogNodeId,
-        setDrawingNodeId,
-        onReplaceReference: handleReplaceNodeReference,
-    });
-
-    const batchSourceNodeIds = useMemo(() => nodes.filter((node) => selectedNodeIds.has(node.id) && !batchSourceRestriction(node)).map((node) => node.id), [nodes, selectedNodeIds]);
-
-    const handleCanvasSelectionStart = useCallback(() => {
-        setContextMenu(null);
-    }, []);
-
-    const handleNodeInteractionStart = useCallback((selectionModifier: boolean) => {
-        setContextMenu(null);
-        setHoveredNodeId(null);
-        setToolbarNodeId(null);
-        if (selectionModifier) setDialogNodeId(null);
-    }, []);
-
-    const handleSelectedNodeClick = useCallback(
-        (node: CanvasNodeData) => {
-            // Selection is transient, but the LibTV-style paint order survives
-            // deselection so a clicked lower node stays above its neighbours.
-            if (node.type !== CanvasNodeType.Frame) bringNodeToFront(node.id);
-            if (node.type === CanvasNodeType.Drawing) {
-                setDialogNodeId(null);
-                setDrawingNodeId(node.id);
-            } else if (node.type === CanvasNodeType.Script) {
-                setDialogNodeId(null);
-            } else if (node.type === CanvasNodeType.Text) {
-                setDialogNodeId(node.id);
-            } else if (node.type === CanvasNodeType.Frame) {
-                setDialogNodeId((current) => (current === node.id ? current : null));
-            } else if (node.type === ART_CRITIQUE_NODE_TYPE) {
-                setDialogNodeId(null);
-                setArtCritiqueNodeId(node.id);
-            } else if (node.type === CanvasNodeType.Panorama) {
-                // 全景节点是纯查看器，没有可编辑提示词，不弹提示词面板。
-                setDialogNodeId(null);
-            } else {
-                // 选择参考媒体时保留当前工作流配置面板，避免点击图片后配置“返回/消失”。
-                // 没有工作流配置面板时，媒体节点仍按原逻辑打开自己的面板。
-                setDialogNodeId((current) => {
-                    const currentNode = current ? nodesRef.current.find((item) => item.id === current) : undefined;
-                    return currentNode?.type === CanvasNodeType.Config ? current : node.id;
-                });
-            }
-        },
-        [bringNodeToFront, nodesRef],
-    );
-
-    const handleNodeBringToFront = useCallback(
-        (nodeId: string) => {
-            const node = nodesRef.current.find((item) => item.id === nodeId);
-            if (node && node.type !== CanvasNodeType.Frame) bringNodeToFront(nodeId);
-        },
-        [bringNodeToFront, nodesRef],
-    );
-
-    const handleNodeDragEnd = useCallback(
-        (nodeId: string) => {
-            const node = nodesRef.current.find((item) => item.id === nodeId);
-            if (!node || node.type === CanvasNodeType.Script || node.type === CanvasNodeType.Drawing || node.type === CanvasNodeType.Panorama || node.type === ART_CRITIQUE_NODE_TYPE) {
-                setDialogNodeId(null);
-                return;
-            }
-            // A drag selects a new node even though it is not a click. Keep the
-            // generation editor bound to the node most recently moved so a stale
-            // panel from the previous node cannot reappear after mouse-up.
-            setDialogNodeId(node.id);
-        },
-        [nodesRef],
-    );
-
-    const handleCanvasDeselect = useCallback(() => {
-        setContextMenu(null);
-        setHoveredNodeId(null);
-        setToolbarNodeId(null);
-        setDialogNodeId(null);
-    }, []);
-
-    const { alignmentGuides, cancelSelectionBox, deselectCanvas, dragPreview, frameDropTargetId, handleCanvasMouseDown, handleNodeMouseDown, isNodeDragging, nodeDraggingRef, selectionBoundsElementRef, selectionBox } = useCanvasSelectionController({
-        containerRef,
-        nodesRef,
-        viewportRef,
-        selectedNodeIdsRef,
-        historyPausedRef,
-        screenToCanvas,
-        setNodes,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        cancelPendingConnectionCreate,
-        onCanvasSelectionStart: handleCanvasSelectionStart,
-        onNodeInteractionStart: handleNodeInteractionStart,
-        onNodeBringToFront: handleNodeBringToFront,
-        onNodeClick: handleSelectedNodeClick,
-        onNodeDragEnd: handleNodeDragEnd,
-        onBatchConnectionTarget: handleBatchConnectionTargetClick,
-        onLinkedFolderDrop: archiveNodesToLinkedFolder,
-        onDeselect: handleCanvasDeselect,
-    });
-
-    const keepNodeToolbar = useCallback(
-        (nodeId: string) => {
-            if (nodeDraggingRef.current || nodeImageSettingsOpen) return;
-            if (toolbarHideTimerRef.current) {
-                clearTimeout(toolbarHideTimerRef.current);
-                toolbarHideTimerRef.current = null;
-            }
-            setToolbarNodeId(nodeId);
-        },
-        [nodeImageSettingsOpen],
-    );
-
-    const hideNodeToolbar = useCallback(() => {
-        if (toolbarHideTimerRef.current) clearTimeout(toolbarHideTimerRef.current);
-        toolbarHideTimerRef.current = setTimeout(() => {
-            setToolbarNodeId(null);
-            toolbarHideTimerRef.current = null;
-        }, 120);
-    }, []);
-
-    const {
-        collapsingBatchIds,
-        downloadNodeImage,
-        handleConfigNodeChange,
-        handleFolderStyleChange,
-        handleFolderThemeChange,
-        handleFontSizeChange,
-        handleNodeContentChange,
-        handleNodePromptChange,
-        handleNodeResize,
-        handleNodeTitleChange,
-        openingBatchIds,
-        saveNodeAsset,
-        setBatchPrimary,
-        toggleBatchExpanded,
-        toggleFrameCollapsed,
-        toggleNodeFreeResize,
-    } = useCanvasNodeEditor({
-        canvasId: projectId,
-        canvasTitle: currentProject?.title || "未命名画布",
-        domainProjectId: linkedProjectId,
-        nodesRef,
-        setNodes,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setDialogNodeId,
-        setToolbarNodeId,
-        setHoveredNodeId,
-    });
-
-    const handleRemoveNodeReference = useCallback(
-        (targetNodeId: string, reference: CanvasResourceReference) => {
-            const referenceNodeId = reference.nodeId;
-            if (!referenceNodeId) return;
-            // 生成节点可能通过配置节点接收参考，只移除参考来源边，保留目标到配置节点的主链。
-            const previousNodes = nodesRef.current;
-            const previousConnections = connectionsRef.current;
-            const configNodeId = previousConnections.find((connection) => {
-                if (connection.fromNodeId !== targetNodeId) return false;
-                return previousNodes.find((node) => node.id === connection.toNodeId)?.type === CanvasNodeType.Config;
-            })?.toNodeId;
-            const removedConnectionIds = new Set(previousConnections.filter((connection) => connection.fromNodeId === referenceNodeId && (connection.toNodeId === targetNodeId || connection.toNodeId === configNodeId)).map((connection) => connection.id));
-            if (!removedConnectionIds.size) return;
-            const nextConnections = previousConnections.filter((connection) => !removedConnectionIds.has(connection.id));
-            const nextNodes = applyCanvasConnectionPromptSync(previousNodes, previousConnections, previousNodes, nextConnections);
-            if (nextNodes !== previousNodes) {
-                nodesRef.current = nextNodes;
-                setNodes(nextNodes);
-            }
-            connectionsRef.current = nextConnections;
-            setConnections(nextConnections);
-            setSelectedConnectionId((current) => (current && removedConnectionIds.has(current) ? null : current));
-        },
-        [connectionsRef, nodesRef, setConnections, setNodes, setSelectedConnectionId],
-    );
-
-    const handleReorderNodeReferences = useCallback(
-        (targetNodeId: string, orderedNodeIds: string[]) => {
-            const previousNodes = nodesRef.current;
-            const previousConnections = connectionsRef.current;
-            const nextConnections = reorderCanvasResourceConnections(targetNodeId, orderedNodeIds, previousNodes, previousConnections);
-            if (nextConnections === previousConnections) return;
-            const nextNodes = applyCanvasConnectionPromptSync(previousNodes, previousConnections, previousNodes, nextConnections);
-            if (nextNodes !== previousNodes) {
-                nodesRef.current = nextNodes;
-                setNodes(nextNodes);
-            }
-            connectionsRef.current = nextConnections;
-            setConnections(nextConnections);
-        },
-        [connectionsRef, nodesRef, setConnections, setNodes],
-    );
-
-    const handleProjectFolderInsert = useCallback(
-        (folderId: string) => {
-            const folder = linkedProjectQuery.data?.assetFolders.find((item) => item.id === folderId);
-            if (!folder || !linkedProjectId) throw new Error("素材文件夹已不存在，请刷新后重试");
-            const style: CanvasFolderStyle = folder.style === "stacked" || folder.style === "midnight" || folder.style === "paper" || folder.style === "cinema" || folder.style === "compact" ? folder.style : "glass";
-            const theme: CanvasFolderTheme = folder.theme === "obsidian" || folder.theme === "ember" || folder.theme === "pearl" ? folder.theme : "aurora";
-            createFolder(projectAssetInsertPosition, { id: folder.id, projectId: linkedProjectId, title: folder.name, style, theme, createdAt: folder.createdAt });
-        },
-        [createFolder, linkedProjectId, linkedProjectQuery.data?.assetFolders, projectAssetInsertPosition],
-    );
-
-    const handleFrameToggle = useCallback(
-        (nodeId: string) => {
-            const node = nodesRef.current.find((item) => item.id === nodeId);
-            const linkedFolderId = node?.metadata?.folder?.assetFolderId;
-            if (linkedFolderId) {
-                openProjectAssets("all", node ? { x: node.position.x + node.width + 40, y: node.position.y } : undefined, "canvas", linkedFolderId);
-                return;
-            }
-            toggleFrameCollapsed(nodeId);
-        },
-        [nodesRef, openProjectAssets, toggleFrameCollapsed],
-    );
-
-    const linkedFolderPreviewNodesById = useMemo(() => {
-        const result = new Map<string, CanvasNodeData[]>();
-        const localById = new Map(assets.map((asset) => [asset.id, asset]));
-        for (const asset of linkedProjectQuery.data?.assets || []) {
-            if (!asset.folderId) continue;
-            const local = localById.get(asset.id);
-            const characterCover = asset.character?.representations.find((item) => item.role === "turnaround_sheet") || asset.character?.representations.find((item) => item.role === "primary") || asset.character?.representations[0];
-            const type = asset.category === "character" || asset.mediaType === "image" ? CanvasNodeType.Image : asset.mediaType === "video" ? CanvasNodeType.Video : asset.mediaType === "audio" ? CanvasNodeType.Audio : CanvasNodeType.Text;
-            const remoteResourceId = resourceIdFromStorageKey(asset.storageKey);
-            const content = characterCover
-                ? resourceFileUrl(characterCover.resourceId)
-                : local?.kind === "image"
-                  ? local.data.dataUrl || local.coverUrl
-                  : local?.kind === "video" || local?.kind === "audio"
-                    ? local.data.url
-                    : local?.kind === "text"
-                      ? local.data.content
-                      : remoteResourceId
-                        ? resourceFileUrl(remoteResourceId)
-                        : asset.previewText || "";
-            const preview: CanvasNodeData = { id: asset.id, type, title: asset.title, position: { x: 0, y: 0 }, width: 240, height: 160, metadata: { assetId: asset.id, content } };
-            const current = result.get(asset.folderId) || [];
-            current.push(preview);
-            result.set(asset.folderId, current);
-        }
-        return result;
-    }, [assets, linkedProjectQuery.data?.assets]);
-
-    useEffect(() => {
-        const folders = linkedProjectQuery.data?.assetFolders;
-        if (!folders?.length) return;
-        const byId = new Map(folders.map((folder) => [folder.id, folder]));
-        setNodes((current) => {
-            let changed = false;
-            const next = current.map((node) => {
-                const folderId = node.metadata?.folder?.assetFolderId;
-                const folder = folderId ? byId.get(folderId) : undefined;
-                if (!folder) return node;
-                const style: CanvasFolderStyle = folder.style === "stacked" || folder.style === "midnight" || folder.style === "paper" || folder.style === "cinema" || folder.style === "compact" ? folder.style : "glass";
-                const theme: CanvasFolderTheme = folder.theme === "obsidian" || folder.theme === "ember" || folder.theme === "pearl" ? folder.theme : "aurora";
-                if (node.title === folder.name && node.metadata?.folder?.style === style && node.metadata?.folder?.theme === theme) return node;
-                changed = true;
-                return { ...node, title: folder.name, metadata: { ...node.metadata, folder: { ...node.metadata!.folder!, style, theme, themeCover: undefined } } };
-            });
-            return changed ? next : current;
-        });
-    }, [linkedProjectQuery.data?.assetFolders, setNodes]);
-
-    const {
-        activeDirectorScene,
-        activeNodeId,
-        activeScriptNode,
-        activeStylePresetId,
-        angleNode,
-        lightingNode,
-        emotionNode,
-        annotationNode,
-        batchChildCountById,
-        batchMotionById,
-        canvasImageNodes,
-        configInputsById,
-        connectionLayerBounds,
-        contextMenuNode,
-        cropNode,
-        displayConnections,
-        frameChildrenById,
-        imageAssets,
-        infoNode,
-        maskEditNode,
-        imageEditNode,
-        mentionReferencesByNodeId,
-        nodeById,
-        previewNode,
-        reduceMediaEffects,
-        relatedHighlight,
-        resourceReferenceByNodeId,
-        selectedNodeBounds,
-        selectedVideoNodes,
-        skillMentionReferences,
-        superResolveNode,
-        toolbarNode,
-        upscaleNode,
-        versionCompareNodes,
-        visibleNodes,
-    } = useCanvasRenderModel({
-        nodes,
-        connections,
-        assets,
-        viewport,
-        viewportSize: size,
-        mediaPerformanceMode,
-        selectedNodeIds,
-        hoveredNodeId,
-        dragPreview,
-        collapsingBatchIds,
-        addedSkills,
-        directorScenes: currentProject?.directorScenes,
-        infoNodeId,
-        cropNodeId,
-        maskEditNodeId,
-        imageEditNodeId,
-        annotationNodeId,
-        splitNodeId: null,
-        upscaleNodeId,
-        superResolveNodeId,
-        angleNodeId,
-        lightingNodeId,
-        emotionNodeId,
-        previewNodeId,
-        contextMenu,
-        versionCompareRootId,
-        directorNodeId,
-        scriptEditorNodeId,
-        dialogNodeId,
-    });
-    useEffect(() => {
-        setNodes((current) => {
-            let changed = false;
-            const next = current.map((node) => {
-                const references = mentionReferencesByNodeId.get(node.id);
-                const savedPrompt = node.metadata?.composerContent ?? node.metadata?.prompt;
-                if (!references?.length || !savedPrompt?.includes("@[node:")) return node;
-                const normalizedPrompt = normalizeCanvasNodeMentionTokens(savedPrompt, references);
-                if (normalizedPrompt === savedPrompt) return node;
-                changed = true;
-                return {
-                    ...node,
-                    metadata: node.metadata?.composerContent !== undefined ? { ...node.metadata, composerContent: normalizedPrompt } : { ...node.metadata, prompt: normalizedPrompt },
-                };
-            });
-            return changed ? next : current;
-        });
-    }, [mentionReferencesByNodeId, setNodes]);
-    const dialogNode = dialogNodeId ? nodeById.get(dialogNodeId) || null : null;
-    // dragPreview is published on the same pointer-down frame as isNodeDragging.
-    // Treat either signal as moving so floating editors disappear before the
-    // first preview transform is painted and never affect drag layout.
-    const isCanvasNodeMoving = isNodeDragging || Boolean(dragPreview?.nodeIds.size);
-    const subtitleNode = subtitleNodeId ? nodeById.get(subtitleNodeId) || null : null;
-    const timelineNode = timelineNodeId ? nodeById.get(timelineNodeId) || null : null;
-    const frameNode = frameDialogNodeId ? nodeById.get(frameDialogNodeId) || null : null;
-    const segmentNode = segmentDialogNodeId ? nodeById.get(segmentDialogNodeId) || null : null;
-    const textEditorNode = textEditorNodeId ? nodeById.get(textEditorNodeId) || null : null;
-    const characterReferenceNode = characterReferenceNodeId ? nodeById.get(characterReferenceNodeId) || null : null;
-    const drawingNode = drawingNodeId ? nodeById.get(drawingNodeId) || null : null;
-    const artCritiqueNode = artCritiqueNodeId ? nodeById.get(artCritiqueNodeId) || null : null;
-    const artCritiqueInputs = artCritiqueNode
-        ? connections
-              .filter((connection) => connection.toNodeId === artCritiqueNode.id)
-              .sort((left, right) => left.id.localeCompare(right.id))
-              .map((connection) => nodeById.get(connection.fromNodeId))
-              .filter((node): node is CanvasNodeData => Boolean(node))
-        : [];
-    const pendingConnectionSourceNode = pendingConnectionCreate?.connection.handleType === "source" ? nodeById.get(pendingConnectionCreate.connection.nodeId) : null;
-    const canCreateDrawingFromConnection = !pendingConnectionCreate?.batchSourceNodeIds?.length && pendingConnectionSourceNode?.type === CanvasNodeType.Image && Boolean(pendingConnectionSourceNode.metadata?.content);
-
-    const openTextNodeEditor = useCallback((node: CanvasNodeData) => {
-        if (node.type !== CanvasNodeType.Text) return;
-        setSelectedNodeIds(new Set([node.id]));
-        setSelectedConnectionId(null);
-        setContextMenu(null);
-        setDialogNodeId(null);
-        setToolbarNodeId(null);
-        if (node.metadata?.workflowKind === "character" && node.metadata.characterAssetId) {
-            setCharacterReferenceNodeId(node.id);
-            return;
-        }
-        setTextEditorNodeId(node.id);
-    }, []);
-
-    const openDrawingNode = useCallback((node: CanvasNodeData) => {
-        if (node.type !== CanvasNodeType.Drawing) return;
-        setSelectedNodeIds(new Set([node.id]));
-        setSelectedConnectionId(null);
-        setContextMenu(null);
-        setDialogNodeId(null);
-        setToolbarNodeId(null);
-        setDrawingNodeId(node.id);
-    }, []);
-
-    const openArtCritique = useCallback((node: CanvasNodeData) => {
-        if (node.type !== ART_CRITIQUE_NODE_TYPE) return;
-        setSelectedNodeIds(new Set([node.id]));
-        setSelectedConnectionId(null);
-        setContextMenu(null);
-        setDialogNodeId(null);
-        setToolbarNodeId(null);
-        setArtCritiqueNodeId(node.id);
-    }, []);
-    const duplicateNodeFromContent = useCallback((node: CanvasNodeData) => duplicateNode(node.id), [duplicateNode]);
-    const deleteNodeFromContent = useCallback((node: CanvasNodeData) => deleteNodes(new Set([node.id])), [deleteNodes]);
-    const updateNodeFromContent = useCallback((nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData) => {
-        setNodesState((current) => {
-            const next = updateCanvasNode(current, nodeId, update);
-            nodesRef.current = next;
-            return next;
-        });
-    }, []);
-    const pendingMediaUpdatesRef = useRef(new Map<string, (node: CanvasNodeData) => CanvasNodeData>());
-    const mediaUpdateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const updateMediaNodeFromContent = useCallback((nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData) => {
-        const previous = pendingMediaUpdatesRef.current.get(nodeId);
-        pendingMediaUpdatesRef.current.set(nodeId, previous ? (node) => update(previous(node)) : update);
-        if (mediaUpdateTimerRef.current) return;
-        mediaUpdateTimerRef.current = setTimeout(() => {
-            const updates = pendingMediaUpdatesRef.current;
-            pendingMediaUpdatesRef.current = new Map();
-            mediaUpdateTimerRef.current = null;
-            if (!updates.size) return;
-            setNodesState((current) => {
-                const next = updateCanvasNodes(current, updates);
-                nodesRef.current = next;
-                return next;
-            });
-        }, 120);
-    }, []);
-    const updateNodeMetadataFromContent = useCallback(
-        (nodeId: string, patch: CanvasNodeMetadata) => {
-            updateNodeFromContent(nodeId, (node) => ({ ...node, metadata: { ...node.metadata, ...patch } }));
-        },
-        [updateNodeFromContent],
-    );
-    const canvasNodeActions = useMemo<CanvasNodeActionContextValue>(
-        () => ({
-            upload: replaceCanvasNodeMedia,
-            download: downloadNodeImage,
-            duplicate: duplicateNodeFromContent,
-            deleteNode: deleteNodeFromContent,
-            updateMetadata: updateNodeMetadataFromContent,
-            updateNode: updateNodeFromContent,
-            updateMediaNode: updateMediaNodeFromContent,
-            openArtCritique,
-            addPanoramaCaptureNode,
-        }),
-        [addPanoramaCaptureNode, deleteNodeFromContent, downloadNodeImage, duplicateNodeFromContent, openArtCritique, replaceCanvasNodeMedia, updateMediaNodeFromContent, updateNodeFromContent, updateNodeMetadataFromContent],
-    );
-    const { agentSnapshot, agentUndoCount, applyAgentOps, canUndoAgentOps, dismissLastAgentChange, lastAgentChange, undoAgentOps, viewLastAgentChange } = useCanvasOperationHistory({
-        projectId,
-        domainProjectId: currentProject?.projectId,
-        projectTitle: currentProject?.title || "未命名画布",
-        nodes,
-        connections,
-        selectedNodeIds,
-        viewport,
-        nodesRef,
-        connectionsRef,
-        selectedNodeIdsRef,
-        viewportRef,
-        generateNodeRef,
-        setNodes,
-        setConnections,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setViewport,
-        setContextMenu,
-        focusSelection: fitCanvasSelection,
-    });
-
-    const { selectCanvasStyle, applyCanvasStyleAsync, styleApplying } = useCanvasStyleWorkflow({
-        canvasId: projectId,
-        domainProjectId: currentProject?.projectId,
-        nodesRef,
-        selectedNodeIdsRef,
-        getCanvasCenter,
-        setNodes,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setDialogNodeId,
-        setStylePickerOpen,
-    });
-
-    const { applyDirectorOutput, createDirectorShot, openDirectorWorkbench, saveDirectorScene } = useCanvasDirector({
-        projectId,
-        domainProjectId: currentProject?.projectId,
-        directorNodeId,
-        directorScenes: currentProject?.directorScenes || [],
-        nodesRef,
-        connectionsRef,
-        getCanvasCenter,
-        setNodes,
-        setConnections,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setDirectorNodeId,
-        updateProject,
-    });
-
-    const {
-        activateStep: activateShortDramaStep,
-        createPipeline: createShortDramaPipeline,
-        guideCollapsed: shortDramaGuideCollapsed,
-        openStoryInput,
-        progress: shortDramaProgress,
-        setGuideCollapsed: setShortDramaGuideCollapsed,
-        skipGuide: skipShortDramaGuide,
-    } = useCanvasShortDrama({
-        nodes,
-        connections,
-        nodesRef,
-        connectionsRef,
-        selectedNodeIdsRef,
-        getCanvasCenter,
-        setNodes,
-        setConnections,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setStylePickerOpen,
-        fitCanvasSelection,
-        focusCanvasNode,
-        openTextEditor: openTextNodeEditor,
-    });
-
-    const shortDramaGuide = shortDramaEnabled && !currentProject?.projectId && shortDramaProgress.active ? { progress: shortDramaProgress, collapsed: shortDramaGuideCollapsed, onToggle: () => setShortDramaGuideCollapsed((value) => !value) } : undefined;
-
-    const clearCanvas = useCallback(() => {
-        const drawingIds = nodesRef.current.flatMap((node) => (node.type === CanvasNodeType.Drawing && node.metadata?.drawingId ? [node.metadata.drawingId] : []));
-        if (drawingIds.length) {
-            void Promise.all(drawingIds.map((drawingId) => removeCanvasDrawing(projectId, drawingId))).catch(() => message.warning("画布已清空，但部分本地绘图缓存清理失败"));
-        }
-        setNodes([]);
-        setConnections([]);
-        setTextEditorNodeId(null);
-        setDrawingNodeId(null);
-        setInfoNodeId(null);
-        setSubtitleNodeId(null);
-        setCropNodeId(null);
-        setMaskEditNodeId(null);
-        setAnnotationNodeId(null);
-        setAngleNodeId(null);
-        setLightingNodeId(null);
-        setEmotionNodeId(null);
-        setPreviewNodeId(null);
-        setRunningNodeId(null);
-        setArtCritiqueNodeId(null);
-        deselectCanvas();
-        setClearConfirmOpen(false);
-        clearCanvasFiles();
-    }, [clearCanvasFiles, deselectCanvas, message, nodesRef, projectId, setEmotionNodeId]);
-
-    useCanvasKeyboard({
-        enabled: projectLoaded && !versions.preview,
-        nodesRef,
-        selectedNodeIdsRef,
-        selectedConnectionId,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setContextMenu,
-        setShortcutRequestNonce,
-        setInfoNodeId,
-        setCropNodeId,
-        setMaskEditNodeId,
-        setAnnotationNodeId,
-        saveCanvasProject,
-        zoomToActualSize,
-        fitCanvasContent,
-        fitCanvasSelection,
-        undoCanvas,
-        redoCanvas,
-        cancelSelectionBox,
-        copySelectedNodes,
-        pasteCopiedNodes,
-        restoreCopiedNodesFromText,
-        shouldPreferCopiedNodes,
-        pasteSystemClipboard,
-        deleteNodes,
-        deleteConnection,
-        deselectCanvas,
-        zoomCanvasIn,
-        zoomCanvasOut,
-        focusMode,
-        exitFocusMode,
-        toggleFocusMode,
-        onOpenSearch: () => setNodeSearchOpen(true),
-        beginBatchConnection: () => beginBatchConnectionMode(Array.from(selectedNodeIdsRef.current)),
-    });
-
-    const handleAssistantSessionsChange = useCallback((sessions: CanvasAssistantSession[], activeId: string | null) => {
-        chatSessionsRef.current = sessions;
-        activeChatIdRef.current = activeId;
-        setChatSessions(sessions);
-        setActiveChatId(activeId);
-    }, []);
-
-    const startTitleEditing = useCallback(() => {
-        setTitleDraft(currentProject?.title || "未命名画布");
-        setTitleEditing(true);
-    }, [currentProject?.title]);
-
-    const finishTitleEditing = useCallback(() => {
-        const nextTitle = titleDraft.trim();
-        if (nextTitle) renameCurrentProject(nextTitle);
-        setTitleEditing(false);
-    }, [renameCurrentProject, titleDraft]);
-
-    const pasteAtPosition = useCallback(
-        (position: Position) => {
-            if (shouldPreferCopiedNodes() && pasteCopiedNodes(position)) return;
-            void (async () => {
-                try {
-                    // 标记写入成功时仍优先系统图片，兼容截图和从外部应用复制的媒体。
-                    const handled = await pasteSystemClipboard(position);
-                    if (!handled) pasteCopiedNodes(position);
-                } catch {
-                    if (!pasteCopiedNodes(position)) message.warning("无法读取剪贴板内容");
-                }
-            })();
-        },
-        [message, pasteCopiedNodes, pasteSystemClipboard, shouldPreferCopiedNodes],
-    );
-
-    const copyingNodeContentRef = useRef(false);
-    const copyNodeContentToClipboard = useCallback(
-        async (node: CanvasNodeData | null) => {
-            if (copyingNodeContentRef.current) return;
-            copyingNodeContentRef.current = true;
-            releaseCopiedNodesPastePriority();
-            const content = node?.metadata?.content?.trim();
-            const resourceId = resourceIdFromStorageKey(node?.metadata?.storageKey);
-            const copySource = content || (node?.type === CanvasNodeType.Image && resourceId ? resourceFileUrl(resourceId) : "");
-            if (!node || !copySource) {
-                copyingNodeContentRef.current = false;
-                message.warning("没有可复制的内容");
-                return;
-            }
-
-            try {
-                if (node.type === CanvasNodeType.Image) {
-                    try {
-                        await copyImageToSystemClipboard(copySource, node.metadata?.storageKey);
-                        message.success("图片已复制到剪贴板");
-                        return;
-                    } catch (imageErr) {
-                        const fallbackUrl = new URL(copySource, window.location.href).toString();
-                        if (navigator.clipboard?.writeText) {
-                            await navigator.clipboard.writeText(fallbackUrl).catch(() => undefined);
-                            message.info("由于浏览器未获得焦点，已为您复制图片地址");
-                            return;
-                        }
-                        if (await copyToClipboard(fallbackUrl)) {
-                            message.info("由于浏览器未获得焦点，已为您复制图片地址");
-                            return;
-                        }
-                        throw imageErr;
-                    }
-                }
-
-                if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(copySource);
-                else if (!copyToClipboard(copySource)) throw new Error("当前浏览器不支持写入剪贴板");
-                message.success(node.type === CanvasNodeType.Text ? "文本已复制" : "内容链接已复制");
-            } catch (error) {
-                message.error(error instanceof Error ? error.message : "复制失败，请检查浏览器剪贴板权限");
-            } finally {
-                copyingNodeContentRef.current = false;
-            }
-        },
-        [message, releaseCopiedNodesPastePriority],
-    );
-
-    const copyNodeMediaUrlToClipboard = useCallback(
-        async (node: CanvasNodeData | null) => {
-            releaseCopiedNodesPastePriority();
-            try {
-                const storageKey = node?.metadata?.storageKey;
-                const content = node?.metadata?.content?.trim();
-                const resourceId = resourceIdFromStorageKey(storageKey);
-                const mediaPath = content && !content.startsWith("data:") && !content.startsWith("blob:") ? content : resourceId ? resourceFileUrl(resourceId) : "";
-                const mediaURL = mediaPath ? new URL(mediaPath, window.location.href).toString() : "";
-                if (!mediaURL) throw new Error("当前媒体只有本地内容，没有可复制的地址");
-                if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(mediaURL);
-                else if (!(await copyToClipboard(mediaURL))) throw new Error("当前浏览器不支持写入剪贴板");
-                message.success(node?.type === CanvasNodeType.Video ? "视频地址已复制" : "图片地址已复制");
-            } catch (error) {
-                message.error(error instanceof Error ? error.message : "媒体地址复制失败");
-            }
-        },
-        [message, releaseCopiedNodesPastePriority],
-    );
-
-    const uploadNodeImageToArkPrivateAsset = useCallback(
-        async (node: CanvasNodeData) => {
-            if (node.type !== CanvasNodeType.Image || !node.metadata?.content) {
-                message.warning("请选择一张可用图片后再上传");
-                return;
-            }
-            if (arkPrivateAssetUploadNodeId === node.id) return;
-            const feedbackKey = `ark-private-asset-${node.id}`;
-            setArkPrivateAssetUploadNodeId(node.id);
-            message.loading({ key: feedbackKey, content: "正在保存并上传到方舟素材库...", duration: 0 });
-            try {
-                let resourceID = resourceIdFromStorageKey(node.metadata.storageKey);
-                let persistedNode = node;
-                if (!resourceID) {
-                    const uploaded = await uploadImage(node.metadata.content);
-                    resourceID = resourceIdFromStorageKey(uploaded.storageKey);
-                    if (!resourceID) throw new Error("图片未能保存到系统素材库，请检查对象存储配置后重试");
-                    handleConfigNodeChange(node.id, imageMetadata(uploaded));
-                    persistedNode = { ...node, metadata: { ...node.metadata, ...imageMetadata(uploaded) } };
-                }
-                const asset = await ensureCanvasNodeAsset({ canvasId: projectId, domainProjectId: currentProject?.projectId, node: persistedNode, source: "canvas-manual" });
-                handleConfigNodeChange(node.id, { assetId: asset.assetId });
-                await syncResourceToArkPrivateAsset(resourceID);
-                message.success({ key: feedbackKey, content: "已同步到方舟素材库，Seedance 将自动复用该素材", duration: 4 });
-            } catch (error) {
-                message.error({ key: feedbackKey, content: error instanceof Error ? error.message : "上传到方舟素材库失败", duration: 5 });
-            } finally {
-                setArkPrivateAssetUploadNodeId((current) => (current === node.id ? null : current));
-            }
-        },
-        [arkPrivateAssetUploadNodeId, currentProject?.projectId, handleConfigNodeChange, message, projectId],
-    );
-
-    const confirmUploadNodeImageToArkPrivateAsset = useCallback(
-        (node: CanvasNodeData) => {
-            modal.confirm({
-                title: "上传到方舟素材库",
-                content: "仅可上传你拥有肖像、版权或其他合法使用权的图片。方舟审核通过后，Seedance 会使用受控素材标识生成视频。",
-                okText: "确认拥有使用权并上传",
-                cancelText: "取消",
-                onOk: () => uploadNodeImageToArkPrivateAsset(node),
-            });
-        },
-        [modal, uploadNodeImageToArkPrivateAsset],
-    );
-
-    const handleCanvasContextMenu = useCallback(
-        (event: ReactMouseEvent) => {
-            const target = event.target instanceof Element ? event.target : null;
-            if (target?.closest("[data-node-id],[data-connection-id]")) return;
-
-            event.preventDefault();
-            event.stopPropagation();
-            if (target?.closest("[data-canvas-no-zoom],.ant-modal,.ant-popover,.ant-dropdown")) {
-                setContextMenu(null);
-                return;
-            }
-
-            closeConnectionCreateMenu();
-            setContextMenu({ type: "canvas", x: event.clientX, y: event.clientY, position: screenToCanvas(event.clientX, event.clientY) });
-        },
-        [closeConnectionCreateMenu, screenToCanvas],
-    );
-
-    const handleNodeContextMenu = useCallback(
-        (event: ReactMouseEvent, id: string) => {
-            event.preventDefault();
-            event.stopPropagation();
-            setSelectedNodeIds((current) => {
-                if (current.has(id) && current.size > 1) return current;
-                return new Set([id]);
-            });
-            setSelectedConnectionId(null);
-            closeConnectionCreateMenu();
-            setToolbarNodeId(null);
-            setDialogNodeId(null);
-            setContextMenu({ type: "node", x: event.clientX, y: event.clientY, nodeId: id });
-        },
-        [closeConnectionCreateMenu],
-    );
-
-    const handleGenerateNode = useCanvasGenerationExecutor({
-        projectId,
-        domainProjectId: currentProject?.projectId,
-        addedSkills,
-        assets,
-        nodesRef,
-        connectionsRef,
-        setNodes,
-        setConnections,
-        setSelectedNodeIds,
-        setSelectedConnectionId,
-        setDialogNodeId,
-        setRunningNodeId,
-        startGenerationRequest,
-        finishGenerationRequest,
-        bindGenerationTask,
-        applyGenerationTaskResult,
-    });
-    useEffect(() => {
-        generateNodeRef.current = handleGenerateNode;
-    }, [handleGenerateNode]);
-
-    const { enqueueGenerationBatch, retryFailedBatchItems, stopRemainingBatchItems } = useCanvasGenerationBatches({
-        projectId,
-        projectLoaded,
-        nodes,
-        nodesRef,
-        setNodes,
-        handleGenerateNode,
-    });
-
-    const { addReferenceColumn: addBatchReferenceColumn, addTextColumn: addBatchTextColumn, addRow: addBatchRow, fillRowsFromConnections, generateRows: generateBatchRows, moveReferenceCell: moveBatchReferenceCell, patchTable: patchBatchTable, removeRow: removeBatchRow, reorderReferenceColumns: reorderBatchReferenceColumns, syncRowsFromConnections, updateRow: updateBatchRow, batchGenDialogOpen, batchGenDialogRowCount, batchGenDialogConcurrency, batchGenDialogConfig, closeBatchGenDialog, confirmBatchGenDialog } = useCanvasBatchTable({
-        nodesRef,
-        connectionsRef,
-        setNodes,
-        setConnections,
-        setSelectedNodeIds,
-        enqueueGenerationBatch,
-    });
-
-    useEffect(() => {
-        if (!projectLoaded) return;
-        nodesRef.current.filter((node) => node.type === CanvasNodeType.BatchTable).forEach((node) => {
-            syncRowsFromConnections(node.id, true);
-        });
-    }, [connections, projectLoaded, syncRowsFromConnections]);
-
-    const handleUploadBatchReference = useCallback(async (tableNodeId: string, rowId: string, columnIndex: number, file: File) => {
-        const tableNode = nodesRef.current.find((item) => item.id === tableNodeId);
-        const table = tableNode?.metadata?.batchTable;
-        const row = table?.rows.find((item) => item.id === rowId);
-        if (!tableNode || !table || !row) return;
-        const rowIndex = table.rows.findIndex((item) => item.id === rowId);
-        const uploadedNodeId = await createFileNode(file, {
-            x: tableNode.position.x - 240,
-            y: tableNode.position.y + 170 + Math.max(0, rowIndex) * 220,
-        });
-        if (!uploadedNodeId) return;
-        const inputNodeIds = Array.from({ length: Math.max(batchReferenceColumns(table).length, columnIndex + 1) }, (_, index) => row.inputNodeIds[index] || "");
-        inputNodeIds[columnIndex] = uploadedNodeId;
-        updateBatchRow(tableNodeId, rowId, { inputNodeIds });
-        message.success(`已上传并填入参考图 ${columnIndex + 1}`);
-    }, [createFileNode, message, nodesRef, updateBatchRow]);
-
-    const { addScriptRow, createAndGenerateScriptVideos, createScriptActionBoards, createScriptImageNodes, createScriptVideoNodes, generateScriptImages, generateScriptRows, generateScriptVideos, removeScriptRow, replaceScriptRows, updateScriptRow } =
-        useCanvasStoryboard({
-            projectId,
-            addedSkills,
-            nodesRef,
-            connectionsRef,
-            setNodes,
-            setConnections,
-            setSelectedNodeIds,
-            enqueueGenerationBatch,
-        });
-
-    const handleRetryNode = useCanvasGenerationRetry({
-        projectId,
-        domainProjectId: currentProject?.projectId,
-        addedSkills,
-        assets,
-        nodesRef,
-        connectionsRef,
-        setNodes,
-        setRunningNodeId,
-        startGenerationRequest,
-        finishGenerationRequest,
-        bindGenerationTask,
-        applyGenerationTaskResult,
-    });
-    const reloadCanvasNodeResource = useCallback(
-        async (node: CanvasNodeData) => {
-            const taskId = node.metadata?.taskId;
-            if (!taskId || !node.metadata?.resourceReloadAvailable) return;
-            setNodes((current) => current.map((item) => (item.id === node.id ? { ...item, metadata: { ...item.metadata, status: "loading", taskStage: "正在重新加载资源", errorDetails: undefined } } : item)));
-            try {
-                const task = await queryGenerationTask(taskId);
-                if (task.status !== "succeeded") throw new Error("原生成任务尚未成功，无法重新加载资源");
-                await applyGenerationTaskResult(node.id, task);
-            } catch (error) {
-                setNodes((current) =>
-                    current.map((item) => (item.id === node.id ? { ...item, metadata: { ...item.metadata, status: "error", errorDetails: error instanceof Error ? error.message : "资源重新加载失败", resourceReloadAvailable: true } } : item)),
-                );
-            }
-        },
-        [applyGenerationTaskResult, setNodes],
-    );
-    const reconcileImageBatchRootNode = useCallback(
-        (rootId: string) => {
-            setNodes((current) => {
-                const root = current.find((item) => item.id === rootId);
-                if (!root) return current;
-                const reconciled = reconcileImageBatchRoot(root, current);
-                return current.map((item) => (item.id === root.id ? reconciled : item));
-            });
-        },
-        [setNodes],
-    );
-    const retryImageBatchChildren = useCallback(
-        (rootId: string, children: CanvasNodeData[]) => {
-            const childIds = children.map((child) => child.id);
-            setNodes((current) => markImageBatchRetrying(rootId, childIds, current));
-            void Promise.allSettled(
-                children.map(async (child) => {
-                    await handleRetryNode(child);
-                    setNodes((current) => current.map((item) => (item.id === child.id ? restoreUnsubmittedImageBatchChild(item, child) : item)));
-                }),
-            ).finally(() => reconcileImageBatchRootNode(rootId));
-        },
-        [handleRetryNode, reconcileImageBatchRootNode, setNodes],
-    );
-
-    const generateImageFromTextNode = useCallback(
-        (node: CanvasNodeData) => {
-            const prompt = (node.metadata?.content || node.metadata?.prompt || "").trim();
-            if (!prompt) {
-                message.warning("文本节点为空，无法生图");
-                return;
-            }
-            const sourceNode = nodesRef.current.find((item) => item.id === node.id);
-            if (!sourceNode) return;
-            const nodeSize = getNodeSpec(CanvasNodeType.Image);
-            const imageNode = createCanvasNode(
-                CanvasNodeType.Image,
-                {
-                    x: sourceNode.position.x + sourceNode.width + 96 + nodeSize.width / 2,
-                    y: sourceNode.position.y + sourceNode.height / 2,
-                },
-                {
-                    prompt: "@文本1",
-                    composerContent: "@文本1",
-                    model: effectiveConfig.imageModel || effectiveConfig.model,
-                    size: effectiveConfig.size,
-                    quality: effectiveConfig.quality,
-                    transparentBackground: effectiveConfig.transparentBackground,
-                    count: getGenerationCount(effectiveConfig.canvasImageCount || effectiveConfig.count),
-                },
-            );
-            imageNode.title = "图片生成";
-            const connection = { id: nanoid(), fromNodeId: sourceNode.id, toNodeId: imageNode.id };
-            const nextNodes = nodesRef.current.map((item) => (item.id === sourceNode.id ? { ...item, metadata: { ...item.metadata, content: prompt, richText: undefined, prompt, status: NODE_STATUS_SUCCESS } } : item)).concat(imageNode);
-            const nextConnections = [...connectionsRef.current, connection];
-            nodesRef.current = nextNodes;
-            connectionsRef.current = nextConnections;
-            setNodes(nextNodes);
-            setConnections(nextConnections);
-            setSelectedNodeIds(new Set([imageNode.id]));
-            setSelectedConnectionId(null);
-            setDialogNodeId(imageNode.id);
-        },
-        [effectiveConfig, message],
-    );
-
-    const renderCanvasNodePanel = useCallback(
-        (panelNode: CanvasNodeData) => {
-            if (panelNode.type === CanvasNodeType.Script || panelNode.type === CanvasNodeType.Drawing) return null;
-            return panelNode.type === CanvasNodeType.Config ? (
-                <CanvasConfigComposer
-                    value={panelNode.metadata?.composerContent ?? panelNode.metadata?.prompt ?? ""}
-                    inputs={configInputsById.get(panelNode.id) || []}
-                    skillReferences={skillMentionReferences}
-                    generationMode={panelNode.metadata?.generationMode}
-                    metadata={panelNode.metadata}
-                    workspaceMode={workspaceMode}
-                    onChange={(composerContent) => handleConfigNodeChange(panelNode.id, { composerContent })}
-                    onMetadataChange={(patch) => handleConfigNodeChange(panelNode.id, patch)}
-                    onClose={() => setDialogNodeId(null)}
-                />
-            ) : (
-                <CanvasNodePromptPanel
-                    projectId={projectId}
-                    node={panelNode}
-                    isRunning={isCanvasNodeGenerating(panelNode, runningNodeId)}
-                    mentionReferences={[
-                        ...(mentionReferencesByNodeId.get(panelNode.id) || EMPTY_RESOURCE_REFERENCES),
-                        ...buildCanvasResourceReferences(nodesRef.current, connectionsRef.current).filter((reference) => reference.kind === "text" && reference.nodeId !== panelNode.id && !(mentionReferencesByNodeId.get(panelNode.id) || []).some((active) => active.nodeId === reference.nodeId)),
-                    ]}
-                    onAddReference={(nodeId, reference) => {
-                        if (reference.active || reference.assetId || reference.kind === "skill") return reference;
-                        if (reference.kind !== "text" || !reference.nodeId || reference.nodeId === nodeId) return undefined;
-                        try {
-                            const linked = connectCanvasTextMention(nodesRef.current, connectionsRef.current, nodeId, reference.nodeId, nanoid());
-                            nodesRef.current = linked.nodes;
-                            connectionsRef.current = linked.connections;
-                            setNodes(linked.nodes);
-                            setConnections(linked.connections);
-                            return linked.reference;
-                        } catch (cause) {
-                            message.warning(cause instanceof Error ? cause.message : "文本引用失败");
-                            return undefined;
-                        }
-                    }}
-                    onPromptChange={handleNodePromptChange}
-                    onConfigChange={handleConfigNodeChange}
-                    onGenerate={handleGenerateNode}
-                    onRemoveReference={handleRemoveNodeReference}
-                    onReorderReferences={handleReorderNodeReferences}
-                    onReplaceReference={handleReplaceNodeReference}
-                    onReplaceReferenceFiles={handleReplaceNodeReferenceFiles}
-                    onClose={() => setDialogNodeId(null)}
-                    onNodeMouseDown={handleNodeMouseDown}
-                    workspaceMode={workspaceMode}
-                    onImageSettingsOpenChange={(open) => {
-                        setNodeImageSettingsOpen(open);
-                        if (open) setToolbarNodeId(null);
-                    }}
-                />
-            );
-        },
-        [
-            configInputsById,
-            handleConfigNodeChange,
-            handleGenerateNode,
-            handleNodePromptChange,
-            handleRemoveNodeReference,
-            handleReorderNodeReferences,
-            handleReplaceNodeReference,
-            handleReplaceNodeReferenceFiles,
-            mentionReferencesByNodeId,
-            message,
-            projectId,
-            runningNodeId,
-            skillMentionReferences,
-            workspaceMode,
-        ],
-    );
-
-    const renderCanvasNodeContent = useCallback(
-        (contentNode: CanvasNodeData) => {
-            if (contentNode.metadata?.workflowKind === "character" && contentNode.metadata.characterAssetId) {
-                return <CanvasCharacterReferenceNodeContent node={contentNode} />;
-            }
-            if (contentNode.metadata?.workflowKind === "styleboard" && !contentNode.metadata.content) {
-                return <CanvasStylePlaceholderNodeContent onChoose={() => setStylePickerOpen(true)} />;
-            }
-            if (contentNode.metadata?.workflowKind === "story_input") {
-                return <CanvasStoryInputNodeContent node={contentNode} onEdit={() => openStoryInput(contentNode.id)} />;
-            }
-            if (contentNode.type === CanvasNodeType.BatchTable) {
-                return (
-                    <CanvasBatchTableNodeContent
-                        node={contentNode}
-                        nodes={nodesRef.current}
-                        connections={connections}
-                        batch={visibleGenerationBatch(contentNode)}
-                        theme={theme}
-                        onPatchTable={(patch) => patchBatchTable(contentNode.id, patch)}
-                        onAddRow={() => addBatchRow(contentNode.id)}
-                        onRemoveRow={(rowId) => removeBatchRow(contentNode.id, rowId)}
-                        onUpdateRow={(rowId, patch) => updateBatchRow(contentNode.id, rowId, patch)}
-                        onFillRows={() => fillRowsFromConnections(contentNode.id)}
-                        onGenerate={(rowIds) => void generateBatchRows(contentNode.id, rowIds)}
-                        onRetryItem={(batchId, itemId) => retryFailedBatchItems(contentNode.id, batchId, itemId)}
-                        onAddReferenceColumn={() => addBatchReferenceColumn(contentNode.id)}
-                        onAddTextColumn={() => addBatchTextColumn(contentNode.id)}
-                        onReorderReferenceColumns={(fromColumnId, toColumnId) => reorderBatchReferenceColumns(contentNode.id, fromColumnId, toColumnId)}
-                        onMoveReferenceCell={(sourceRowId, sourceColumnIndex, targetRowId, targetColumnIndex) => moveBatchReferenceCell(contentNode.id, sourceRowId, sourceColumnIndex, targetRowId, targetColumnIndex)}
-                        onReplaceReference={replaceCanvasNodeMedia}
-                        onUploadReference={(rowId, columnIndex, file) => { void handleUploadBatchReference(contentNode.id, rowId, columnIndex, file); }}
-                        onConnectStart={(event, handleId) => handleConnectStart(event, contentNode.id, "target", handleId)}
-                        onConnectDrop={(event, handleId) => handleConnectDrop(event, contentNode.id, handleId)}
-                    />
-                );
-            }
-            if (contentNode.type === CanvasNodeType.Script) {
-                const pipeline = deriveStoryboardPipelineProgress(contentNode, nodesRef.current, connectionsRef.current);
-                return (
-                    <CanvasScriptNodeContent
-                        node={contentNode}
-                        nodes={nodesRef.current}
-                        batch={visibleGenerationBatch(contentNode)}
-                        pipeline={pipeline}
-                        scale={viewport.k}
-                        mentionReferences={mentionReferencesByNodeId.get(contentNode.id) || EMPTY_RESOURCE_REFERENCES}
-                        onOpen={() => setScriptEditorNodeId(contentNode.id)}
-                        onCreateImageNodes={() => createScriptImageNodes(contentNode.id)}
-                        onCreateVideoNodes={() => createScriptVideoNodes(contentNode.id)}
-                        onGenerateImages={(rowIds) => void generateScriptImages(contentNode.id, rowIds)}
-                        onGenerateVideos={(rowIds) => (contentNode.metadata?.storyboardVideoInputMode === "keyframe" ? void generateScriptVideos(contentNode.id, rowIds) : void createAndGenerateScriptVideos(contentNode.id, rowIds))}
-                        onVideoInputModeChange={(storyboardVideoInputMode) => handleConfigNodeChange(contentNode.id, { storyboardVideoInputMode })}
-                        onMergeVideos={() => void mergeVideosByIds(pipeline.successfulVideoNodeIds)}
-                        onCreateActionBoards={() => void createScriptActionBoards(contentNode.id)}
-                        onRetryBatch={(batchId) => retryFailedBatchItems(contentNode.id, batchId)}
-                        onRetryBatchItem={(batchId, itemId) => retryFailedBatchItems(contentNode.id, batchId, itemId)}
-                        onStopBatch={(batchId) => stopRemainingBatchItems(contentNode.id, batchId)}
-                        onAddRow={() => addScriptRow(contentNode.id)}
-                        onRemoveRow={(rowId) => removeScriptRow(contentNode.id, rowId)}
-                        onUpdateRow={(rowId, patch) => updateScriptRow(contentNode.id, rowId, patch)}
-                        onPromptChange={(composerContent) => handleConfigNodeChange(contentNode.id, { composerContent })}
-                        onGenerateScript={(prompt) => void generateScriptRows(contentNode.id, prompt)}
-                        onModelChange={(model) => handleConfigNodeChange(contentNode.id, { model })}
-                        onShotDurationChange={(duration: StoryboardShotDuration) => handleConfigNodeChange(contentNode.id, { storyboardShotDuration: duration })}
-                        onShotCountChange={(count: StoryboardShotCount) => handleConfigNodeChange(contentNode.id, { storyboardShotCount: count })}
-                        workspaceMode={workspaceMode}
-                        onComposerHeightChange={(height) => {
-                            if (contentNode.metadata?.storyboardComposerHeight === height) return;
-                            handleConfigNodeChange(contentNode.id, { storyboardComposerHeight: height });
-                            const minHeight = storyboardMinNodeHeight(height);
-                            if (contentNode.height < minHeight) handleNodeResize(contentNode.id, contentNode.width, minHeight);
-                        }}
-                        onConnectStart={(event, rowId, handleType) => handleConnectStart(event, contentNode.id, handleType, rowId === "context" ? "storyboard:context" : `row:${rowId}`)}
-                        onScrollTopChange={(scrollTop) => setScriptScrollTopById((current) => (current[contentNode.id] === scrollTop ? current : { ...current, [contentNode.id]: scrollTop }))}
-                    />
-                );
-            }
-            if (contentNode.metadata?.directorSceneId) {
-                return (
-                    <CanvasDirectorNodePanel
-                        node={contentNode}
-                        scene={currentProject?.directorScenes?.find((scene) => scene.id === contentNode.metadata?.directorSceneId) || null}
-                        readNodeContent={(nodeId) => (nodeId ? nodesRef.current.find((item) => item.id === nodeId)?.metadata?.content : undefined)}
-                        professional={workspaceMode === "professional"}
-                        onOpen={() => openDirectorWorkbench(contentNode.id)}
-                    />
-                );
-            }
-            return (
-                <CanvasConfigNodePanel
-                    node={contentNode}
-                    isRunning={isCanvasNodeGenerating(contentNode, runningNodeId)}
-                    inputSummary={getInputSummary(configInputsById.get(contentNode.id) || [])}
-                    onConfigChange={handleConfigNodeChange}
-                    onComposerToggle={() => setDialogNodeId((current) => (current === contentNode.id ? null : contentNode.id))}
-                    onGenerate={(nodeId) => {
-                        const target = nodesRef.current.find((item) => item.id === nodeId);
-                        void handleGenerateNode(nodeId, target?.metadata?.generationMode || "image", target?.metadata?.composerContent ?? target?.metadata?.prompt ?? "");
-                    }}
-                    workspaceMode={workspaceMode}
-                />
-            );
-        },
-        [
-            addBatchReferenceColumn,
-            addBatchTextColumn,
-            addBatchRow,
-            addScriptRow,
-            configInputsById,
-            connections,
-            createAndGenerateScriptVideos,
-            createScriptActionBoards,
-            createScriptImageNodes,
-            createScriptVideoNodes,
-            currentProject?.directorScenes,
-            fillRowsFromConnections,
-            generateBatchRows,
-            generateScriptImages,
-            generateScriptRows,
-            generateScriptVideos,
-            handleUploadBatchReference,
-            moveBatchReferenceCell,
-            handleConfigNodeChange,
-            handleConnectDrop,
-            handleConnectStart,
-            handleGenerateNode,
-            handleNodeResize,
-            mentionReferencesByNodeId,
-            mergeVideosByIds,
-            openDirectorWorkbench,
-            openStoryInput,
-            patchBatchTable,
-            removeBatchRow,
-            reorderBatchReferenceColumns,
-            replaceCanvasNodeMedia,
-            removeScriptRow,
-            retryFailedBatchItems,
-            runningNodeId,
-            stopRemainingBatchItems,
-            theme,
-            updateBatchRow,
-            updateScriptRow,
-            viewport.k,
-            workspaceMode,
-        ],
-    );
-
-    const handleCanvasNodeHoverStart = useCallback(
-        (nodeId: string) => {
-            if (nodeDraggingRef.current) return;
-            setHoveredNodeId(nodeId);
-            keepNodeToolbar(nodeId);
-        },
-        [keepNodeToolbar],
-    );
-    const handleCanvasNodeHoverEnd = useCallback(
-        (nodeId: string) => {
-            setHoveredNodeId((current) => (current === nodeId ? null : current));
-            hideNodeToolbar();
-        },
-        [hideNodeToolbar],
-    );
-    const retryCanvasNode = useCallback(
-        (node: CanvasNodeData) => {
-            if (node.type === CanvasNodeType.Script) {
-                const prompt = (node.metadata?.composerContent || node.metadata?.prompt || "").trim();
-                if (!prompt) {
-                    message.warning("分镜脚本缺少剧情内容，无法重试");
-                    return;
-                }
-                void generateScriptRows(node.id, prompt);
-                return;
-            }
-            if (node.type === CanvasNodeType.Image && node.metadata?.isBatchRoot) {
-                const failedChildren = failedImageBatchChildren(node, nodesRef.current);
-                if (!failedChildren.length) {
-                    message.info("当前批次没有需要重试的失败图片");
-                    return;
-                }
-                message.info(`正在重试 ${failedChildren.length} 个失败图片`);
-                retryImageBatchChildren(node.id, failedChildren);
-                return;
-            }
-            if (node.type === CanvasNodeType.Image && node.metadata?.batchRootId) {
-                retryImageBatchChildren(node.metadata.batchRootId, [node]);
-                return;
-            }
-            void handleRetryNode(node);
-        },
-        [generateScriptRows, handleRetryNode, message, nodesRef, retryImageBatchChildren],
-    );
-    const openCanvasNodeTaskDetails = useCallback(
-        (node: CanvasNodeData) => {
-            void openNodeTaskDetails(node);
-        },
-        [openNodeTaskDetails],
-    );
-    const openCanvasNodeVersions = useCallback((node: CanvasNodeData) => setVersionCompareRootId(node.metadata?.versionOfNodeId || node.id), []);
-    const viewCanvasNodeImage = useCallback((node: CanvasNodeData) => setPreviewNodeId(node.id), []);
-    const editCanvasDirector = useCallback((node: CanvasNodeData) => openDirectorWorkbench(node.id), [openDirectorWorkbench]);
-    const locateProjectStyleNode = useCallback(() => {
-        const styleNode = nodesRef.current.find((node) => node.type === CanvasNodeType.Text && node.metadata?.workflowKind === "styleboard");
-        if (!styleNode) {
-            message.info("项目画风节点正在同步，请稍后再试");
-            return;
-        }
-        focusCanvasNode(styleNode.id);
-    }, [focusCanvasNode, message, nodesRef]);
-    const freeformCreateCommands = useCanvasCreateCommands({
-        workspaceMode,
-        isProjectLinked: Boolean(shortDramaEnabled && currentProject?.projectId),
-        handlers: {
-            onAddText: () => createNode(CanvasNodeType.Text),
-            onAddImage: () => createNode(CanvasNodeType.Image),
-            onAddVideo: () => createNode(CanvasNodeType.Video),
-            onAddAudio: () => createNode(CanvasNodeType.Audio),
-            onAddScript: () => createNode(CanvasNodeType.Script),
-            onAddFrame: () => createNode(CanvasNodeType.Frame),
-            onAddFolder: createFolder,
-            onAddDrawing: () => createNode(CanvasNodeType.Drawing),
-            onAddWorkflow: () => createNode(CanvasNodeType.Config),
-            onAddExtensionNode: (type) => createNode(type),
-            onChooseStyle: () => setStylePickerOpen(true),
-            onOpenDirector: () => setDirectorTemplateRequest({}),
-            onUpload: () => handleUploadRequest(),
-            onOpenMyAssets: () => openCanvasAssetLibrary(),
-            onOpenProjectCharacters: () => openProjectAssets("character"),
-        },
-    });
-    const emptyStateKind = resolveCanvasEmptyStateKind({
-        nodeCount: nodes.length,
-        shortDramaEnabled,
-        isProjectLinked: Boolean(currentProject?.projectId),
-        starterMode: currentProject?.starterMode,
-    });
-    const emptyCanvasState =
-        emptyStateKind === "freeform" ? (
-            <CanvasFreeformEmptyState commands={freeformCreateCommands} />
-        ) : emptyStateKind === "linked" ? (
-            <CanvasLinkedProjectEmptyState
-                projectName={linkedProjectQuery.data?.project.name || currentProject?.title || "项目画布"}
-                hasChapter={Boolean(linkedProjectQuery.data?.units.length)}
-                onAddFirstChapter={() => {
-                    const first = linkedProjectQuery.data?.units.slice().sort((left, right) => left.position - right.position)[0];
-                    if (first) void handleProjectChapterInsert({ id: first.id, projectId: linkedProjectId, title: first.title, position: first.position });
-                }}
-                onOpenAssets={() => openProjectAssets()}
-                onAddText={() => createNode(CanvasNodeType.Text)}
-            />
-        ) : emptyStateKind === "guided" ? (
-            <CanvasShortDramaEmptyState
-                onCreatePipeline={createShortDramaPipeline}
-                onOpenAgent={() => {
-                    setCinematicAgentEntry(true);
-                    openAgent();
-                }}
-                onStartFreeform={() => updateProject(projectId, { starterMode: "freeform" })}
-                onUpload={() => handleUploadRequest()}
-                onAddText={() => createNode(CanvasNodeType.Text)}
-                onAddScript={() => createNode(CanvasNodeType.Script)}
-            />
-        ) : null;
-    if (!projectLoaded && loadError)
-        return (
-            <main className="flex h-full flex-col items-center justify-center gap-4">
-                <p role="alert">{loadError}</p>
-                <Button onClick={retryLoad}>重新加载</Button>
-                <Link to="/canvas">返回画布库</Link>
-            </main>
-        );
-    if (!projectLoaded) return <CanvasRefreshShell />;
-
-    return (
-        <>
-            <a
-                href="#canvas-main"
-                className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[var(--z-toast)] focus:rounded-md focus:border focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:shadow-lg"
-            >
-                跳转到画布主内容
-            </a>
-            <main id="canvas-main" tabIndex={-1} className="flex h-full min-h-0 overflow-hidden outline-none" style={{ background: resolvedCanvasAppearance.background, color: theme.node.text }}>
-                {!focusMode && !versions.preview && shortDramaEnabled && currentProject?.projectId ? (
-                    <CanvasProjectSidebar projectId={currentProject.projectId} detail={linkedProjectQuery.data} onAddChapter={handleProjectChapterInsert} onLocateStyle={locateProjectStyleNode} onOpenAssets={() => openProjectAssets()} />
-                ) : null}
-                <CanvasOverlayLayerProvider>
-                    <div className="canvas-editor-shell relative flex min-w-0 flex-1">
-                    <section data-canvas-editor inert={Boolean(versions.preview)} style={{ visibility: versions.preview ? "hidden" : undefined, opacity: versions.preview ? 0 : undefined }} className="relative min-w-0 flex-1 flex flex-col min-h-0 overflow-hidden">
-                        {!focusMode ? (
-                            <CanvasTopBar
-                                syncStatus={<CanvasSyncStatus projectId={projectId} onLoadLatest={reloadLatestCanvasProject} onOpenVersions={openVersions} />}
-                                versionsOpen={versions.open}
-                                onToggleVersions={() => { closeAgent(); setVersionCompareRootId(null); versions.toggle(); }}
-                                title={currentProject?.title || "未命名画布"}
-                                titleDraft={titleDraft}
-                                isTitleEditing={titleEditing}
-                                onTitleDraftChange={setTitleDraft}
-                                onStartTitleEditing={startTitleEditing}
-                                onFinishTitleEditing={finishTitleEditing}
-                                onCancelTitleEditing={() => setTitleEditing(false)}
-                                canUndo={historyState.canUndo}
-                                canRedo={historyState.canRedo}
-                                onCreateProject={createAndOpenProject}
-                                onDeleteProject={deleteCurrentProject}
-                                onSave={() => void saveCanvasProject()}
-                                onForceSave={confirmForceSaveCanvas}
-                                onImportImage={() => handleUploadRequest()}
-                                onImportLibTV={() => setLibTVImportOpen(true)}
-                                onImportTapNow={() => setTapNowImportOpen(true)}
-                                onUndo={undoCanvas}
-                                onRedo={redoCanvas}
-                                onShare={() => setShareModalOpen(true)}
-                                shortcutRequestNonce={shortcutRequestNonce}
-                                mediaPerformanceMode={mediaPerformanceMode}
-                                onMediaPerformanceModeChange={setMediaPerformanceMode}
-                                onOpenSearch={() => setNodeSearchOpen(true)}
-                                projectContext={
-                                    shortDramaEnabled && currentProject?.projectId
-                                        ? {
-                                              ...canvasContext,
-                                              projectId: currentProject.projectId,
-                                              projectName: linkedProjectQuery.data?.project.name || currentProject.title,
-                                          }
-                                        : undefined
-                                }
-                                onEnterFocusMode={enterFocusMode}
-                                shortDramaGuide={shortDramaGuide}
-                            />
-                        ) : null}
-
-                        <CanvasNodeSearchModal
-                            open={nodeSearchOpen}
-                            nodes={nodes}
-                            onClose={() => setNodeSearchOpen(false)}
-                            onFocus={(nodeId) => {
-                                const target = nodeById.get(nodeId);
-                                const parent = target?.parentId ? nodeById.get(target.parentId) : null;
-                                if (parent?.metadata?.frame?.collapsed) toggleFrameCollapsed(parent.id);
-                                const batchRoot = target?.metadata?.batchRootId ? nodeById.get(target.metadata.batchRootId) : null;
-                                if (batchRoot && !batchRoot.metadata?.imageBatchExpanded) toggleBatchExpanded(batchRoot.id);
-                                const selection = new Set([nodeId]);
-                                selectedNodeIdsRef.current = selection;
-                                setSelectedNodeIds(selection);
-                                setSelectedConnectionId(null);
-                                focusCanvasNode(nodeId);
-                            }}
-                        />
-
-                        {!focusMode && shortDramaGuide ? (
-                            <CanvasShortDramaGuide progress={shortDramaGuide.progress} collapsed={shortDramaGuide.collapsed} onToggle={shortDramaGuide.onToggle} onSkip={skipShortDramaGuide} onStepClick={activateShortDramaStep} />
-                        ) : null}
-
-                        <CanvasShareModal projectId={projectId} open={shareModalOpen} onClose={() => setShareModalOpen(false)} beforeCreate={saveCanvasProject} />
-                        <LibTVImportDialog open={libTVImportOpen} projectId={projectId} viewport={viewport} viewportSize={size} onClose={() => setLibTVImportOpen(false)} onApply={applyLibTVImport} />
-                        <TapNowImportDialog open={tapNowImportOpen} projectId={projectId} viewport={viewport} viewportSize={size} onClose={() => setTapNowImportOpen(false)} onApply={applyTapNowImport} />
-
-                        <CanvasStylePickerModal open={stylePickerOpen} value={activeStylePresetId} applying={styleApplying} onClose={() => setStylePickerOpen(false)} onSelect={selectCanvasStyle} />
-
-                        <CanvasDirectorTemplateModal open={Boolean(directorTemplateRequest)} onClose={() => setDirectorTemplateRequest(null)} onSelect={(templateId) => createDirectorShot(templateId, directorTemplateRequest?.position)} />
-
-                        <div className="relative flex min-h-0 min-w-0 flex-1">
-                            <div className="relative min-w-0 flex-1 overflow-hidden">
-                                <InfiniteCanvas
-                                    interactive={!versions.preview}
-                                    containerRef={containerRef}
-                                    viewport={viewport}
-                                    appearance={canvasAppearance}
-                                    backgroundMode={backgroundMode}
-                                    graphicsLayer={
-                                        <CanvasLeaferGraphicsLayer
-                                            containerRef={containerRef}
-                                            viewport={viewport}
-                                            theme={theme}
-                                            displayConnections={displayConnections}
-                                            selectedConnectionId={selectedConnectionId}
-                                            relatedConnectionIds={relatedHighlight.connectionIds}
-                                            scriptScrollTopById={scriptScrollTopById}
-                                            connectingParams={connectingParams}
-                                            batchConnectionPreview={batchConnectionPreview}
-                                            mouseWorld={mouseWorld}
-                                            connectionTargetNodeId={connectionTargetNodeId}
-                                            connectionTargetAnchorRatio={connectionTargetAnchorRatio}
-                                            nodeById={nodeById}
-                                            selectionBox={selectionBox}
-                                            selectedNodeBounds={selectedNodeBounds}
-                                            alignmentGuides={alignmentGuides}
-                                        />
-                                    }
-                                    onViewportChange={handleViewportChange}
-                                    onViewportPreviewChange={handleViewportPreviewChange}
-                                    onCanvasMouseDown={handleCanvasMouseDown}
-                                    boxSelectEnabled={canvasTool === "box-select"}
-                                    onCanvasDoubleClick={handleCanvasDoubleClick}
-                                    onCanvasDeselect={deselectCanvas}
-                                    onContextMenu={handleCanvasContextMenu}
-                                    onDrop={handleDrop}
-                                    onFileDragEnter={handleFileDragEnter}
-                                    onFileDragLeave={handleFileDragLeave}
-                                    onFileDragOver={handleFileDragOver}
-                                >
-                                    <CanvasNodeActionContext.Provider value={canvasNodeActions}>
-                                        <CanvasNodeGraphContext.Provider value={nodeGraphContext}>
-                                            <CanvasProjectWorldLayers
-                                                connectionApproach={connectionApproach}
-                                                projectId={projectId}
-                                                viewportScale={viewport.k}
-                                                connectionLayerBounds={connectionLayerBounds}
-                                                displayConnections={displayConnections}
-                                                selectedConnectionId={selectedConnectionId}
-                                                relatedConnectionIds={relatedHighlight.connectionIds}
-                                                scriptScrollTopById={scriptScrollTopById}
-                                                connectingParams={connectingParams}
-                                                mouseWorld={mouseWorld}
-                                                connectionTargetNodeId={connectionTargetNodeId}
-                                                nodeById={nodeById}
-                                                visibleNodes={visibleNodes}
-                                                nodeStackOrder={nodeStackOrder}
-                                                frameChildrenById={frameChildrenById}
-                                                linkedFolderPreviewNodesById={linkedFolderPreviewNodesById}
-                                                dragPreview={dragPreview}
-                                                selectedNodeIds={selectedNodeIds}
-                                                frameDropTargetId={frameDropTargetId}
-                                                relatedNodeIds={relatedHighlight.nodeIds}
-                                                activeNodeId={activeNodeId}
-                                                selectionBox={selectionBox}
-                                                batchChildCountById={batchChildCountById}
-                                                collapsingBatchIds={collapsingBatchIds}
-                                                openingBatchIds={openingBatchIds}
-                                                batchMotionById={batchMotionById}
-                                                showImageInfo={showImageInfo}
-                                                reduceMediaEffects={reduceMediaEffects}
-                                                resourceReferenceByNodeId={resourceReferenceByNodeId}
-                                                mentionReferencesByNodeId={mentionReferencesByNodeId}
-                                                mediaEffectsDisabledNodeId={emotionNodeId}
-                                                selectedNodeBounds={selectedNodeBounds}
-                                                batchSourceNodeIds={batchSourceNodeIds}
-                                                batchConnectionPreview={batchConnectionPreview}
-                                                isNodeDragging={isNodeDragging}
-                                                selectionBoundsElementRef={selectionBoundsElementRef}
-                                                renderCanvasNodeContent={renderCanvasNodeContent}
-                                                onConnectionSelect={(connectionId) => {
-                                                    setSelectedConnectionId(connectionId);
-                                                    setSelectedNodeIds(new Set());
-                                                    setContextMenu(null);
-                                                }}
-                                                onConnectionContextMenu={(event, connectionId) => {
-                                                    setSelectedConnectionId(connectionId);
-                                                    setSelectedNodeIds(new Set());
-                                                    closeConnectionCreateMenu();
-                                                    setContextMenu({ type: "connection", x: event.clientX, y: event.clientY, connectionId });
-                                                }}
-                                                onNodeMouseDown={handleNodeMouseDown}
-                                                onNodeHoverStart={handleCanvasNodeHoverStart}
-                                                onNodeHoverEnd={handleCanvasNodeHoverEnd}
-                                                onConnectStart={handleConnectStart}
-                                                onNodeResize={handleNodeResize}
-                                                onToggleFrame={handleFrameToggle}
-                                                onFolderStyleChange={handleFolderStyleChange}
-                                                onFolderThemeChange={handleFolderThemeChange}
-                                                onNodeTitleChange={handleNodeTitleChange}
-                                                onNodeContextMenu={handleNodeContextMenu}
-                                                onNodeContentChange={handleNodeContentChange}
-                                                onToggleBatch={toggleBatchExpanded}
-                                                onSetBatchPrimary={setBatchPrimary}
-                                                onRetry={retryCanvasNode}
-                                                onReloadResource={reloadCanvasNodeResource}
-                                                onOpenTaskDetails={openCanvasNodeTaskDetails}
-                                                onOpenVersions={openCanvasNodeVersions}
-                                                onViewImage={viewCanvasNodeImage}
-                                                onReplaceMedia={replaceCanvasNodeMedia}
-                                                onOpenTextEditor={openTextNodeEditor}
-                                                onOpenDirector={editCanvasDirector}
-                                                onOpenDrawing={openDrawingNode}
-                                                onStartBatchConnection={startBatchConnection}
-                                            />
-                                        </CanvasNodeGraphContext.Provider>
-                                    </CanvasNodeActionContext.Provider>
-                                </InfiniteCanvas>
-
-                                <CanvasActiveTaskPanel tasks={activeTasks} onCancelTask={cancelCanvasTask} topInset={focusMode ? "var(--space-3)" : "var(--canvas-topbar-offset)"} />
-
-                                {focusMode ? (
-                                    <CanvasFocusModeBar
-                                        syncStatus={<CanvasSyncStatus projectId={projectId} onLoadLatest={reloadLatestCanvasProject} onOpenVersions={openVersions} />}
-                                        versionsOpen={versions.open}
-                                        onToggleVersions={() => { closeAgent(); versions.toggle(); }}
-                                        dockRevealed={focusDockRevealed}
-                                        zoomPercent={viewport.k}
-                                        onToggleDock={() => setFocusDockRevealed((value) => !value)}
-                                        onExit={exitFocusMode}
-                                        onZoomIn={zoomCanvasIn}
-                                        onZoomOut={zoomCanvasOut}
-                                        onFit={fitCanvasContent}
-                                    />
-                                ) : null}
-
-                                <CanvasFileDropOverlay active={fileDropActive} theme={theme} />
-
-                                {emptyCanvasState}
-
-                                {!focusMode || focusDockRevealed ? (
-                                    <CanvasToolbar
-                                        selectedCount={selectedNodeIds.size}
-                                        workspaceMode={workspaceMode}
-                                        canvasTool={canvasTool}
-                                        onToolChange={setCanvasTool}
-                                        isProjectLinked={Boolean(shortDramaEnabled && currentProject?.projectId)}
-                                        canUndo={historyState.canUndo}
-                                        canRedo={historyState.canRedo}
-                                        appearance={canvasAppearance}
-                                        backgroundMode={backgroundMode}
-                                        showImageInfo={showImageInfo}
-                                        onAddImage={() => createNode(CanvasNodeType.Image)}
-                                        onAddVideo={() => createNode(CanvasNodeType.Video)}
-                                        onAddAudio={() => createNode(CanvasNodeType.Audio)}
-                                        onAddText={() => createNode(CanvasNodeType.Text)}
-                                        onChooseStyle={() => setStylePickerOpen(true)}
-                                        onAddScript={() => createNode(CanvasNodeType.Script)}
-                                        onAddFrame={() => createNode(CanvasNodeType.Frame)}
-                                        onAddFolder={createFolder}
-                                        onAddDrawing={() => createNode(CanvasNodeType.Drawing)}
-                                        onAddExtensionNode={(type) => createNode(type)}
-                                        onAddWorkflow={() => createNode(CanvasNodeType.Config)}
-                                        onOpenDirector={() => setDirectorTemplateRequest({})}
-                                        onUndo={undoCanvas}
-                                        onRedo={redoCanvas}
-                                        onUpload={() => handleUploadRequest()}
-                                        onDelete={() => deleteNodes(new Set(selectedNodeIds))}
-                                        onClear={() => setClearConfirmOpen(true)}
-                                        onDeselect={deselectCanvas}
-                                        onAppearanceChange={applyCanvasAppearance}
-                                        onSaveAppearanceDefault={saveCanvasAppearanceDefault}
-                                        onBackgroundModeChange={setBackgroundMode}
-                                        onShowImageInfoChange={setShowImageInfo}
-                                        onOpenMyAssets={() => {
-                                            openCanvasAssetLibrary();
-                                        }}
-                                        onOpenProjectCharacters={() => openProjectAssets("character")}
-                                    />
-                                ) : null}
-                            </div>
-
-                            <div className={versions.open ? "hidden" : "contents"}>
-                            <CanvasCloudAgentPanel canvasId={projectId} domainProjectId={currentProject?.projectId} nodeCount={nodes.length} references={agentMentionReferences} prefillPrompt={agentPrefillPrompt} open={assistantOpen} onOpen={openAgent} onCollapse={closeAgent} onFocusNode={(nodeId) => {
-                                if (!nodesRef.current.some((node) => node.id === nodeId)) { message.info("该节点已删除或尚未同步到画布"); return; }
-                                focusCanvasNode(nodeId);
-                            }} />
-                            </div>
-                        </div>
-
-                        {angleNode?.metadata?.content ? (
-                            <CanvasNodePanelOverlay
-                                node={angleNode}
-                                viewport={viewport}
-                                containerRef={containerRef}
-                                panelWidth={640}
-                                panelHeight={540}
-                                allowOverflow
-                                dragOffset={dragPreview?.nodeIds.has(angleNode.id) ? { x: dragPreview.x, y: dragPreview.y } : null}
-                                isDragging={isNodeDragging && Boolean(dragPreview?.nodeIds.has(angleNode.id))}
-                            >
-                                <CanvasNodeAnglePanel
-                                    dataUrl={angleNode.metadata.content}
-                                    onClose={() => setAngleNodeId(null)}
-                                    onConfirm={(params) => {
-                                        void generateAngleNode(angleNode, params);
-                                    }}
-                                />
-                            </CanvasNodePanelOverlay>
-                        ) : null}
-
-                        {lightingNode?.metadata?.content ? (
-                            <AppModal flush open centered title={null} closable={false} footer={null} width={720} onCancel={() => setLightingNodeId(null)}>
-                                <CanvasNodeLightingPanel
-                                    dataUrl={lightingNode.metadata.content}
-                                    onClose={() => setLightingNodeId(null)}
-                                    onConfirm={(options, prompt) => {
-                                        generateLightingNode(lightingNode, options, prompt);
-                                    }}
-                                />
-                            </AppModal>
-                        ) : null}
-
-                        {emotionNode?.metadata?.content && !isCanvasNodeMoving ? (
-                            <CanvasEmotionWorkspace
-                                node={emotionNode}
-                                viewport={viewport}
-                                containerRef={containerRef}
-                                dragOffset={dragPreview?.nodeIds.has(emotionNode.id) ? { x: dragPreview.x, y: dragPreview.y } : null}
-                                isDragging={isNodeDragging && Boolean(dragPreview?.nodeIds.has(emotionNode.id))}
-                                onClose={() => setEmotionNodeId(null)}
-                                onConfirm={(payload: CanvasImageEmotionPayload) => {
-                                    void generateEmotionNode(emotionNode, payload);
-                                }}
-                            />
-                        ) : null}
-
-                        {dialogNode &&
-                        !isCanvasImageSourceNode(dialogNode) &&
-                        !dialogNode.metadata?.fileUpload &&
-                        dialogNode.type !== CanvasNodeType.Script &&
-                        dialogNode.type !== CanvasNodeType.BatchTable &&
-                        dialogNode.type !== CanvasNodeType.Drawing &&
-                        dialogNode.type !== CanvasNodeType.Panorama &&
-                        !selectionBox &&
-                        !isCanvasNodeMoving ? (
-                            <CanvasNodePanelOverlay
-                                node={dialogNode}
-                                viewport={viewport}
-                                containerRef={containerRef}
-                                allowOverflow={dialogNode.type !== CanvasNodeType.Config}
-                                dragOffset={dragPreview?.nodeIds.has(dialogNode.id) ? { x: dragPreview.x, y: dragPreview.y } : null}
-                                isDragging={isNodeDragging && Boolean(dragPreview?.nodeIds.has(dialogNode.id))}
-                            >
-                                {renderCanvasNodePanel(dialogNode)}
-                            </CanvasNodePanelOverlay>
-                        ) : null}
-
-                        {pendingConnectionCreate ? (
-                            <CanvasConnectionCreateMenu
-                                pending={pendingConnectionCreate}
-                                viewport={viewport}
-                                viewportSize={size}
-                                containerRef={containerRef}
-                                canCreateDrawing={canCreateDrawingFromConnection}
-                                getDisabledReason={(type) => getConnectionCreateDisabledReason(type, pendingConnectionCreate)}
-                                onCreate={(type) => void createConnectedNode(type, pendingConnectionCreate)}
-                                onClose={cancelPendingConnectionCreate}
-                            />
-                        ) : null}
-
-                        {connectionReplaceHover ? (
-                            <div
-                                className="pointer-events-none fixed z-[var(--z-dialog-popover)] flex select-none items-center gap-1.5 rounded-full border border-white/15 bg-black/60 px-2.5 py-1 text-[11px] font-medium text-white/90 shadow-[0_8px_24px_rgba(0,0,0,0.4)] backdrop-blur-md transition-all"
-                                style={{
-                                    left: connectionReplaceHover.clientX + 14,
-                                    top: connectionReplaceHover.clientY + 14,
-                                    transform: "translateY(-50%)",
-                                }}
-                            >
-                                <ArrowLeftRight className="size-3 text-blue-400" />
-                                <span>松开替换</span>
-                                <span className="rounded bg-white/15 px-1.5 py-0.5 text-[10px] font-semibold text-blue-200">@{connectionReplaceHover.referenceLabel}</span>
-                            </div>
-                        ) : null}
-
-                        {selectedNodeBounds && !selectionBox && !isCanvasNodeMoving ? (
-                            <CanvasProjectSelectionToolbar
-                                anchorRef={selectionBoundsElementRef}
-                                containerRef={containerRef}
-                                count={selectedNodeBounds.count}
-                                selectedVideoCount={selectedVideoNodes.length}
-                                mergingVideos={Boolean(mergeVideoProgress)}
-                                onAlign={alignSelectedNodes}
-                                onArrange={arrangeSelectedNodes}
-                                onCreateStoryboard={createStoryboardGroup}
-                                onCreateReferenceGroup={createReferenceGroup}
-                                onBatchConnect={() => beginBatchConnectionMode(Array.from(selectedNodeIds))}
-                                onMergeVideos={() => void mergeSelectedVideos()}
-                                onSendSelectionToAgent={() => sendSelectionToAgent()}
-                            />
-                        ) : null}
-
-                        {uploadStatus ? <CanvasUploadStatusToast status={uploadStatus} theme={theme} /> : null}
-                        {mergeVideoProgress ? <CanvasMergeStatusToast progress={mergeVideoProgress} theme={theme} /> : null}
-                        {lastAgentChange ? (
-                            <CanvasOperationChangeToast
-                                change={lastAgentChange}
-                                theme={theme}
-                                onView={viewLastAgentChange}
-                                onUndo={() => {
-                                    undoAgentOps();
-                                }}
-                                onClose={dismissLastAgentChange}
-                            />
-                        ) : null}
-
-                        <CanvasNodeToolbar
-                            node={isCanvasNodeMoving || nodeImageSettingsOpen || emotionNodeId || angleNodeId ? null : toolbarNode}
-                            workspaceMode={workspaceMode}
-                            viewport={viewport}
-                            containerRef={containerRef}
-                            onKeep={keepNodeToolbar}
-                            onLeave={hideNodeToolbar}
-                            onInfo={(node) => (node.metadata?.workflowKind === "character" && node.metadata.characterAssetId ? openTextNodeEditor(node) : setInfoNodeId(node.id))}
-                            onEditText={openTextNodeEditor}
-                            onDecreaseFont={(node) => handleFontSizeChange(node.id, Math.max(10, (node.metadata?.fontSize || 14) - 2))}
-                            onIncreaseFont={(node) => handleFontSizeChange(node.id, Math.min(32, (node.metadata?.fontSize || 14) + 2))}
-                            onToggleDialog={(node) => setDialogNodeId((current) => (current === node.id ? null : node.id))}
-                            onGenerateImage={generateImageFromTextNode}
-                            onUpload={(node) => handleUploadRequest(node.id)}
-                            onDownload={downloadNodeImage}
-                            onSaveAsset={(node) => void saveNodeAsset(node)}
-                            onAnnotate={(node) => setAnnotationNodeId(node.id)}
-                            onAnnotationEdit={openAnnotationEditNode}
-                            onMaskEdit={(node) => setMaskEditNodeId(node.id)}
-                            onImageEdit={openImageEditNode}
-                            onRemoveBackground={openBackgroundRemoval}
-                            onLayerDecomposition={openLayerDecomposition}
-                            onTextEdit={openTextEditNode}
-                            onEmotion={(node) => {
-                                setDialogNodeId(null);
-                                setEmotionNodeId((current) => (current === node.id ? null : node.id));
-                            }}
-                            onPortraitTexture={openPortraitTextureEditor}
-                            onCrop={(node) => setCropNodeId(node.id)}
-                            onSplit={(node, params) => void splitImageNode(node, params)}
-                            onUpscale={(node) => setUpscaleNodeId(node.id)}
-                            onSuperResolve={(node) => setSuperResolveNodeId(node.id)}
-                            onAngle={(node) => {
-                                setDialogNodeId(null);
-                                setAngleNodeId((current) => (current === node.id ? null : node.id));
-                            }}
-                            onLighting={(node) => {
-                                setDialogNodeId(null);
-                                setLightingNodeId((current) => (current === node.id ? null : node.id));
-                            }}
-                            onPanorama={openPanoramaConfig}
-                            onViewImage={(node) => setPreviewNodeId(node.id)}
-                            onExtractVideoFrames={openVideoFrameExtractor}
-                            onExtractAudioFromVideo={(node) => void extractAudioFromVideo(node)}
-                            onTrimVideoSegments={openVideoSegmentExtractor}
-                            onSubtitles={(node) => setSubtitleNodeId(node.id)}
-                            onTimeline={(node) => setTimelineNodeId(node.id)}
-                            extractingVideoFrames={toolbarNode?.id === extractingVideoFramesNodeId}
-                            extractingAudio={segmentRunningMode === "audio"}
-                            trimmingVideo={segmentRunningMode === "video"}
-                            onReversePrompt={createImageReversePromptNodes}
-                            onRetry={retryCanvasNode}
-                            onToggleFreeResize={(node) => toggleNodeFreeResize(node.id)}
-                            onToggleLocked={(node) => toggleNodeLocked(node.id)}
-                            onDelete={(node) => deleteNodes(new Set([node.id]))}
-                        />
-
-{isMiniMapOpen && !focusMode ? <Minimap nodes={nodes} viewport={viewport} viewportSize={size} canvasContainerRef={containerRef} onViewportPreviewChange={previewViewport} onViewportChange={handleViewportChange} /> : null}
-
-                        {!focusMode ? (
-                            <CanvasOverlayLayerContainer
-                                overlayId="asset-tray"
-                                fallbackZIndex="var(--z-panel)"
-                                className="absolute bottom-[calc(var(--canvas-inset-y)+var(--space-16))] left-[var(--canvas-inset-x)] flex items-end gap-2 lg:bottom-[var(--canvas-inset-y)]"
-                                onMouseDown={(event) => event.stopPropagation()}
-                                onPointerDown={(event) => event.stopPropagation()}
-                                onWheel={(event) => event.stopPropagation()}
-                            >
-                                <CanvasZoomControls
-                                    scale={viewport.k}
-                                    containerRef={containerRef}
-                                    onScaleChange={setZoomScale}
-                                    onFitContent={fitCanvasContent}
-                                    onAutoArrange={autoArrangeCanvasNodes}
-                                    isMiniMapOpen={isMiniMapOpen}
-                                    onToggleMiniMap={() => setIsMiniMapOpen((value) => !value)}
-                                    onOpenShortcuts={() => setShortcutRequestNonce((value) => value + 1)}
-                                />
-                                <CanvasAssetTray
-                                    assetImages={imageAssets}
-                                    canvasImages={canvasImageNodes}
-                                    showLibrary={!currentProject?.projectId}
-                                    activeNodeId={selectedNodeIds.size === 1 ? Array.from(selectedNodeIds)[0] : null}
-                                    onInsertAssetImage={(asset) => void createImageAssetNode(asset)}
-                                    onFocusCanvasImage={focusCanvasImageNode}
-                                />
-                            </CanvasOverlayLayerContainer>
-                        ) : null}
-
-                        <CanvasProjectContextMenu
-                            menu={contextMenu}
-                            node={contextMenuNode}
-                            workspaceMode={workspaceMode}
-                            isProjectLinked={Boolean(currentProject?.projectId)}
-                            canUndo={historyState.canUndo}
-                            canRedo={historyState.canRedo}
-                            canPaste={hasCopiedNodes || Boolean(navigator.clipboard)}
-                            selectedCount={selectedNodeIds.size}
-                            screenToCanvas={screenToCanvas}
-                            onClose={() => setContextMenu(null)}
-                            onAddNode={(type, position) => createNode(type, position)}
-                            onAddFolder={createFolder}
-                            onChooseStyle={() => setStylePickerOpen(true)}
-                            onOpenDirector={(position) => setDirectorTemplateRequest({ position })}
-                            onUpload={(nodeId, position) => handleUploadRequest(nodeId, position)}
-                            onOpenAssets={openCanvasAssetLibrary}
-                            onOpenProjectCharacters={(position) => openProjectAssets("character", position)}
-                            onUndo={undoCanvas}
-                            onRedo={redoCanvas}
-                            onPaste={pasteAtPosition}
-                            onCopyNode={(nodeId) => copyNodesToClipboard(new Set([nodeId]))}
-                            onCreateGenerationCopy={(nodeId) => duplicateNode(nodeId, "copy")}
-                            onDuplicate={duplicateNode}
-                            onDeleteNode={(nodeId) => deleteNodes(new Set([nodeId]))}
-                            onDeleteConnection={deleteConnection}
-                            onSaveAsset={(node) => {
-                                void saveNodeAsset(node);
-                            }}
-                            onViewMedia={(node) => setPreviewNodeId(node.id)}
-                            onEditText={openTextNodeEditor}
-                            onOpenDrawing={openDrawingNode}
-                            onGenerateImage={generateImageFromTextNode}
-                            onCopyContent={(node) => {
-                                void copyNodeContentToClipboard(node);
-                            }}
-                            onCopyMediaUrl={(node) => {
-                                void copyNodeMediaUrlToClipboard(node);
-                            }}
-                            onUploadToArkPrivateAsset={confirmUploadNodeImageToArkPrivateAsset}
-                            onSetAssetCategory={(nodeId, assetCategory) => handleConfigNodeChange(nodeId, { assetCategory })}
-                            onToggleFrame={(node) => handleFrameToggle(node.id)}
-                            onSpreadSelection={spreadSelectedNodes}
-                            onCopySelection={copySelectedNodes}
-                            onDeleteSelection={() => deleteNodes(selectedNodeIds)}
-                            onSendToAgent={() => sendSelectionToAgent(contextMenu?.type === "node" && selectedNodeIds.size <= 1 ? contextMenu.nodeId : undefined)}
-                        />
-
-                        <CanvasUploadModal open={uploadModalOpen} onClose={closeUploadModal} onUpload={handleUploadFiles} />
-
-                        <input ref={imageInputRef} type="file" accept="image/*,video/*,audio/mpeg,audio/wav,audio/x-wav,.mp3,.wav" className="hidden" onChange={handleImageInputChange} />
-
-                        <CanvasNodeInfoModal node={infoNode} open={Boolean(infoNode)} onClose={() => setInfoNodeId(null)} onMetadataChange={handleConfigNodeChange} />
-
-                        {subtitleNode ? (
-                            <CanvasSubtitleDialog
-                                node={subtitleNode}
-                                open={Boolean(subtitleNode)}
-                                projectId={projectId}
-                                config={effectiveConfig}
-                                onClose={() => setSubtitleNodeId(null)}
-                                onSave={(nodeId, patch) => {
-                                    handleConfigNodeChange(nodeId, patch);
-                                    const currentTimeline = currentProject?.timeline;
-                                    if (currentTimeline) {
-                                        const next = syncNodeSubtitlesToTimeline(currentTimeline, nodeId, patch.subtitleEntries || []);
-                                        if (next !== currentTimeline) updateProject(projectId, { timeline: next });
-                                    }
-                                }}
-                            />
-                        ) : null}
-
-                        {frameNode ? <CanvasVideoFrameDialog node={frameNode} open={Boolean(frameNode)} onClose={closeFrameDialog} onConfirm={(params) => void extractVideoFrames(frameNode, params)} /> : null}
-
-                        {segmentNode && segmentDialogMode ? (
-                            <CanvasVideoSegmentDialog
-                                node={segmentNode}
-                                nodes={nodes}
-                                connections={connections}
-                                open={Boolean(segmentNode && segmentDialogMode)}
-                                mode={segmentDialogMode}
-                                config={effectiveConfig}
-                                timeline={currentProject?.timeline || null}
-                                onClose={closeSegmentDialog}
-                                onConfirm={(params) => void handleSegmentConfirm(segmentNode, params)}
-                            />
-                        ) : null}
-
-                        {timelineNode ? (
-                            <CanvasTimelineDialog
-                                node={timelineNode}
-                                open={Boolean(timelineNode)}
-                                nodes={nodes}
-                                timeline={currentProject?.timeline || null}
-                                onClose={() => setTimelineNodeId(null)}
-                                onOpenSubtitleDialog={(subNodeId) => {
-                                    setTimelineNodeId(null);
-                                    setSubtitleNodeId(subNodeId);
-                                }}
-                                onSave={(next) => updateProject(projectId, { timeline: next })}
-                                onSaveSubtitles={(subNodeId, entries) =>
-                                    handleConfigNodeChange(subNodeId, {
-                                        subtitleEntries: entries,
-                                        ...(entries.length ? {} : { subtitleHighlights: [] }),
-                                        subtitleUpdatedAt: new Date().toISOString(),
-                                    })
-                                }
-                                onOpenAssetLibrary={openTimelineAssetLibrary}
-                                onOpenProjectAssets={() => openProjectAssets("all", undefined, "timeline")}
-                                onUploadLocalFiles={uploadTimelineMedia}
-                                addNodeToTimelineRef={timelineAddNodeRef}
-                                addMediaToTimelineRef={timelineMediaAddRef}
-                                onCreateAssembledNode={createVideoNodeFromBlob}
-                            />
-                        ) : null}
-
-                        <CanvasCharacterReferenceModal node={characterReferenceNode} open={Boolean(characterReferenceNode)} onClose={() => setCharacterReferenceNodeId(null)} />
-
-                        <CanvasTextEditorModal
-                            node={textEditorNode}
-                            open={Boolean(textEditorNode)}
-                            onClose={() => setTextEditorNodeId(null)}
-                            onSave={(nodeId, title, content, richText) => {
-                                setNodes((current) => current.map((node) => (node.id === nodeId ? { ...node, title, metadata: { ...node.metadata, content, richText } } : node)));
-                            }}
-                        />
-
-                        {drawingNode ? (
-                            <Suspense
-                                fallback={
-                                    <div className="fixed inset-0 z-[var(--z-toast)] grid place-items-center px-5" style={{ background: theme.canvas.background, color: theme.node.text }}>
-                                        <WorkspaceState icon="loading" title="正在加载绘图编辑器" description="正在准备绘图画布。" />
-                                    </div>
-                                }
-                            >
-                                <CanvasDrawingEditorModal
-                                    node={drawingNode}
-                                    projectId={projectId}
-                                    open={Boolean(drawingNode)}
-                                    onClose={() => setDrawingNodeId(null)}
-                                    onSaved={(nodeId, summary) => {
-                                        setNodes((current) =>
-                                            current.map((node) =>
-                                                node.id === nodeId
-                                                    ? {
-                                                          ...node,
-                                                          metadata: {
-                                                              ...node.metadata,
-                                                              drawingEngine: summary.engine,
-                                                              drawingRevision: summary.revision,
-                                                              drawingUpdatedAt: summary.updatedAt,
-                                                              drawingShapeCount: summary.shapeCount,
-                                                              drawingPageCount: summary.pageCount,
-                                                          },
-                                                      }
-                                                    : node,
-                                            ),
-                                        );
-                                        message.success("绘图已保存");
-                                    }}
-                                />
-                            </Suspense>
-                        ) : null}
-
-                        <AiArtCritiqueModal
-                            startRequestId={artCritiqueStartRequest && artCritiqueStartRequest.nodeId === artCritiqueNode?.id ? artCritiqueStartRequest.id : undefined}
-                            restartRequested={artCritiqueStartRequest?.nodeId === artCritiqueNode?.id && artCritiqueStartRequest?.restart}
-                            onRunningChange={(running) => {
-                                artCritiqueRunningRef.current = running;
-                            }}
-                            node={artCritiqueNode}
-                            upstreamNodes={artCritiqueInputs}
-                            open={Boolean(artCritiqueNode)}
-                            onClose={() => setArtCritiqueNodeId(null)}
-                            onUpdateState={(nodeId, state) => handleConfigNodeChange(nodeId, { artCritique: state })}
-                        />
-
-                        <CanvasPanoramaConfigModal
-                            open={Boolean(panoramaConfigNodeId)}
-                            onCancel={() => setPanoramaConfigNodeId(null)}
-                            onConfirm={(composedPrompt, config) => {
-                                const node = nodes.find((n) => n.id === panoramaConfigNodeId);
-                                if (node) {
-                                    createPanoramaViewerWithConfig(node, composedPrompt, config);
-                                }
-                            }}
-                            onCopyPrompt={(prompt) => {
-                                void navigator.clipboard?.writeText(prompt).then(() => message.success("已复制全景提示词"));
-                            }}
-                            previewImageUrl={panoramaConfigNodeId ? nodes.find((n) => n.id === panoramaConfigNodeId)?.metadata?.content : undefined}
-                            nodes={nodes}
-                        />
-
-                        <CanvasScriptEditor
-                            node={activeScriptNode}
-                            nodes={nodes}
-                            open={Boolean(activeScriptNode)}
-                            onClose={() => setScriptEditorNodeId(null)}
-                            onUpdateRows={(rows) => activeScriptNode && replaceScriptRows(activeScriptNode.id, rows)}
-                            onVisibleColumnsChange={(visibleColumns: StoryboardColumn[]) => {
-                                if (!activeScriptNode || !visibleColumns.length) return;
-                                setNodes((prev) =>
-                                    prev.map((node) =>
-                                        node.id === activeScriptNode.id
-                                            ? { ...node, metadata: { ...node.metadata, storyboard: { rows: node.metadata?.storyboard?.rows || [], visibleColumns, referenceNodeIds: node.metadata?.storyboard?.referenceNodeIds || [] } } }
-                                            : node,
-                                    ),
-                                );
-                            }}
-                            onGenerateImages={(rowIds) => activeScriptNode && void generateScriptImages(activeScriptNode.id, rowIds)}
-                            onGenerateVideos={(rowIds) => {
-                                if (!activeScriptNode) return;
-                                if (activeScriptNode.metadata?.storyboardVideoInputMode === "keyframe") void generateScriptVideos(activeScriptNode.id, rowIds);
-                                else void createAndGenerateScriptVideos(activeScriptNode.id, rowIds);
-                            }}
-                            onVideoInputModeChange={(storyboardVideoInputMode) => activeScriptNode && handleConfigNodeChange(activeScriptNode.id, { storyboardVideoInputMode })}
-                        />
-
-                        {directorNodeId && activeDirectorScene ? (
-                            <Suspense
-                                fallback={
-                                    <div className="fixed inset-0 z-[var(--z-toast)] grid place-items-center px-5" style={{ background: theme.canvas.background, color: theme.node.text }}>
-                                        <WorkspaceState icon="loading" title="正在加载 3D 导演台" description="准备场景、镜头与空间控制。" />
-                                    </div>
-                                }
-                            >
-                                <CanvasDirectorWorkbench
-                                    open
-                                    scene={activeDirectorScene}
-                                    imageNodes={nodes.filter((node) => node.type === CanvasNodeType.Image && Boolean(node.metadata?.content))}
-                                    onClose={() => setDirectorNodeId(null)}
-                                    onChange={saveDirectorScene}
-                                    onApply={applyDirectorOutput}
-                                    onDeleteImageNode={(nodeId) => deleteNodes(new Set([nodeId]))}
-                                    onFlush={() => flushCanvasStorePersistence()}
-                                    onboardingScope={directorOnboardingScope}
-                                />
-                            </Suspense>
-                        ) : null}
-
-                        <CanvasVersionCompareModal
-                            open={Boolean(versionCompareRootId)}
-                            versions={versionCompareNodes}
-                            onClose={() => setVersionCompareRootId(null)}
-                            onSetPrimary={setPrimaryVersion}
-                            onFocus={(nodeId) => {
-                                setVersionCompareRootId(null);
-                                focusCanvasNode(nodeId);
-                            }}
-                        />
-
-                        <CanvasProjectMediaDialogs
-                            cropNode={cropNode}
-                            annotationNode={annotationNode}
-                            annotationEditNode={annotationEditNodeId ? nodeById.get(annotationEditNodeId) || null : null}
-                            maskEditNode={maskEditNode}
-                            imageEditNode={imageEditNode}
-                            layerDecompositionNode={layerDecompositionNodeId ? nodeById.get(layerDecompositionNodeId) || null : null}
-                            textEditNode={textEditNodeId ? nodeById.get(textEditNodeId) || null : null}
-                            imageEditPreset={imageEditPreset}
-                            upscaleNode={upscaleNode}
-                            onCloseCrop={() => setCropNodeId(null)}
-                            onCloseAnnotation={() => setAnnotationNodeId(null)}
-                            onCloseAnnotationEdit={() => setAnnotationEditNodeId(null)}
-                            onCloseMaskEdit={() => setMaskEditNodeId(null)}
-                            onCloseImageEdit={() => { setImageEditNodeId(null); setImageEditPreset(null); }}
-                            onCloseLayerDecomposition={() => setLayerDecompositionNodeId(null)}
-                            onCloseTextEdit={() => setTextEditNodeId(null)}
-                            onCloseUpscale={() => setUpscaleNodeId(null)}
-                            onCrop={(node, crop) => void cropImageNode(node, crop)}
-                            onAnnotate={(node, dataUrl) => void saveAnnotatedImageNode(node, dataUrl)}
-                            onAnnotationEdit={(node, payload) => void editAnnotatedImageNode(node, payload)}
-                            onMaskEdit={(node, payload) => void maskEditImageNode(node, payload)}
-                            onImageEdit={(node, payload) => void editImageNode(node, payload)}
-                            onLayerDecomposition={(node, payload) => void decomposeImageLayers(node, payload)}
-                            onDetectText={() => {
-                                const node = textEditNodeId ? nodeById.get(textEditNodeId) : null;
-                                return node ? detectImageText(node) : Promise.reject(new Error("图片节点已不存在"));
-                            }}
-                            onTextEdit={(node, payload) => void editTextImageNode(node, payload)}
-                            onUpscale={(node, params) => void upscaleImageNode(node, params)}
-                            config={effectiveConfig}
-                        />
-
-                        <BatchGenerationSettingsDialog
-                            open={batchGenDialogOpen}
-                            config={batchGenDialogConfig}
-                            rowCount={batchGenDialogRowCount}
-                            concurrency={batchGenDialogConcurrency}
-                            onClose={closeBatchGenDialog}
-                            onConfirm={confirmBatchGenDialog}
-                        />
-
-                        <CanvasProjectStatusDialogs
-                            theme={theme}
-                            task={taskDetail}
-                            taskLogs={taskDetailLogs}
-                            taskLoading={taskDetailLoading}
-                            onCloseTask={() => setTaskDetail(null)}
-                            onCancelTask={cancelCanvasTask}
-                            superResolveNode={superResolveNode}
-                            onCloseSuperResolve={() => setSuperResolveNodeId(null)}
-                            previewNode={previewNode}
-                            onClosePreview={() => setPreviewNodeId(null)}
-                            clearConfirmOpen={clearConfirmOpen}
-                            onCancelClear={() => setClearConfirmOpen(false)}
-                            onConfirmClear={clearCanvas}
-                        />
-
-                        <AssetPickerModal open={assetPickerOpen} multiple={assetInsertScope === "canvas"} onInsert={handleLibraryAssetsInsert} onClose={closeAssetPicker} />
-                        <CanvasProjectAssetModal
-                            open={projectAssetOpen}
-                            detail={linkedProjectQuery.data}
-                            initialCategory={projectAssetInitialCategory}
-                            initialFolderId={projectAssetInitialFolderId}
-                            onClose={closeProjectAssets}
-                            onInsert={handleTimelineProjectAssetsInsert}
-                            onInsertFolder={projectAssetScope === "canvas" ? handleProjectFolderInsert : undefined}
-                        />
-                    </section>
-                    {versions.preview ? <CanvasVersionPreview key={versions.preview.key} preview={versions.preview} onReturn={versions.returnToCurrent} onShowVersions={versions.show} /> : null}
-                    </div>
-                </CanvasOverlayLayerProvider>
-                <CanvasVersionHistory history={versions} />
-            </main>
-        </>
-    );
-}
+import { isCanvasNodeGenerating } from "@/lib/canvas/canvas-node-task-state";
+import { lazy, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { Dispatch, MouseEvent as ReactMouseEvent, SetStateAction } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link, useParams, useSearchParams } from "react-router";
+import { loadAssetsForUse } from "@/services/user-data-sync";
+import { canvasAssetHandoffIds } from "@/lib/canvas/canvas-asset-handoff";
+import { useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
+import { uploadMediaFile } from "@/services/file-storage";
+import { createCanvasGenerationLiveProjectAdapter, registerCanvasGenerationLiveProject } from "@/services/canvas-generation-consumer";
+import { getActiveUserScope } from "@/lib/user-scope";
+import { resourceFileUrl, resourceIdFromStorageKey, syncResourceToArkPrivateAsset } from "@/services/api/resources";
+import { uploadImage } from "@/services/image-storage";
+import { imageMetadata } from "@/lib/canvas/canvas-generation-task-sync";
+import { isCanvasImageSourceNode } from "@/lib/canvas/canvas-image-source";
+import { getCachedResourceBlob } from "@/services/resource-blob-cache";
+import copyToClipboard from "copy-to-clipboard";
+import { nanoid } from "nanoid";
+import { canvasAppearanceBaseTheme, canvasAppearanceForTheme, DEFAULT_CANVAS_BACKGROUND_MODE, normalizeCanvasAppearance, resolveCanvasAppearance, writeCanvasAppearanceDefault, type CanvasAppearance } from "@/lib/canvas/canvas-appearance";
+import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme";
+import { persistCanvasMediaPerformanceMode, readCanvasMediaPerformanceMode } from "@/lib/canvas/canvas-performance-mode";
+import { summarizeCanvasContext } from "@/lib/canvas/canvas-context-summary";
+import { refreshCanvasCharacterReferenceNodes } from "@/lib/canvas/canvas-character-reference";
+import { useAssetStore } from "@/stores/use-asset-store";
+import { flushCanvasStorePersistence } from "@/stores/canvas/use-canvas-store";
+import { ensureCanvasNodeAsset } from "@/services/project-asset-sync";
+import { useCanvasThemeStore, useCanvasThemeScope } from "@/stores/canvas/use-canvas-theme-store";
+import { useUserStore } from "@/stores/use-user-store";
+import { App, Button } from "antd";
+import { ArrowLeftRight } from "lucide-react";
+import { AppModal } from "@/components/ui/product/app-modal";
+import { getNodeSpec } from "@/constant/canvas";
+import { CanvasConfigComposer } from "@/components/canvas/canvas-config-composer";
+import { CanvasConfigNodePanel } from "@/components/canvas/canvas-config-node-panel";
+import { CanvasCloudAgentPanel } from "@/components/canvas/canvas-cloud-agent-panel";
+import { CanvasActiveTaskPanel } from "@/components/canvas/canvas-active-task-panel";
+import { CanvasAssetTray } from "@/components/canvas/canvas-asset-tray";
+import { CanvasProjectSidebar } from "@/components/canvas/canvas-project-sidebar";
+import { CanvasProjectAssetModal } from "@/components/canvas/canvas-project-asset-modal";
+import { CanvasCharacterReferenceNodeContent } from "@/components/canvas/canvas-character-reference-node";
+import { CanvasCharacterReferenceModal } from "@/components/canvas/canvas-character-reference-modal";
+import { WorkspaceState } from "@/components/layout/workspace-state";
+import { resolveProjectCanvasStyle } from "@/components/canvas/canvas-style-picker-modal";
+import { createStyleProfileSnapshot, resolveStyleProfile, serializeStyleProfile } from "@/lib/canvas/style-profile";
+import { CanvasNodeToolbar, CanvasNodeInfoModal } from "@/components/canvas/canvas-node-toolbar";
+import { CanvasSubtitleDialog } from "@/components/canvas/canvas-subtitle-dialog";
+import { CanvasVideoFrameDialog } from "@/components/canvas/canvas-video-frame-dialog";
+import { CanvasVideoSegmentDialog } from "@/components/canvas/canvas-video-segment-dialog";
+import { CanvasTimelineDialog } from "@/components/canvas/canvas-timeline-dialog";
+import { syncNodeSubtitlesToTimeline } from "@/lib/timeline/timeline-build";
+import { CanvasNodeAnglePanel } from "@/components/canvas/canvas-node-angle-dialog";
+import { CanvasNodeLightingPanel } from "@/components/canvas/canvas-node-lighting-dialog";
+import { CanvasTextEditorModal } from "@/components/canvas/canvas-text-editor-modal";
+import { CanvasNodeSearchModal } from "@/components/canvas/canvas-node-search-modal";
+import { CanvasStylePickerModal } from "@/components/canvas/canvas-style-picker-modal";
+import { CanvasDirectorTemplateModal } from "@/components/canvas/director/canvas-director-template-modal";
+import { CanvasFileDropOverlay } from "@/components/canvas/canvas-file-drop-overlay";
+import { CanvasUploadModal } from "@/components/canvas/canvas-upload-modal";
+import { CanvasPanoramaConfigModal } from "@/components/canvas/canvas-panorama-config-modal";
+import { InfiniteCanvas } from "@/components/canvas/infinite-canvas";
+import { Minimap } from "@/components/canvas/canvas-mini-map";
+import { CanvasNodePromptPanel, type CanvasNodeGenerationMode } from "@/components/canvas/canvas-node-prompt-panel";
+import { CanvasToolbar } from "@/components/canvas/canvas-toolbar";
+import { useCanvasCreateCommands } from "@/components/canvas/use-canvas-create-commands";
+import { AssetPickerModal } from "@/components/canvas/asset-picker-modal";
+import { getProject } from "@/services/api/projects";
+import { CanvasZoomControls } from "@/components/canvas/canvas-zoom-controls";
+import { CanvasShareModal } from "@/components/canvas/canvas-share-modal";
+import { CanvasScriptEditor, CanvasScriptNodeContent } from "@/components/canvas/canvas-script-node";
+import { CanvasBatchTableNodeContent } from "@/components/canvas/canvas-batch-table-node";
+import { STORYBOARD_HEADER_HEIGHT, STORYBOARD_ROW_HEIGHT, storyboardMinNodeHeight, storyboardTableHeight } from "@/lib/canvas/canvas-storyboard-layout";
+import { CanvasDirectorNodePanel } from "@/components/canvas/director/canvas-director-node-panel";
+import { CanvasVersionCompareModal } from "@/components/canvas/canvas-version-compare-modal";
+import { useFocusMode } from "@/hooks/use-focus-mode";
+import { connectCanvasTextMention } from "@/lib/canvas/canvas-text-mention";
+import { writeCanvasNodePrompt } from "@/lib/canvas/canvas-node-prompt";
+import {
+    applyCanvasConnectionPromptSync,
+    buildCanvasAgentMentionReferences,
+    canvasResourceMentionToken,
+    buildCanvasNodeMentionReferenceMap,
+    buildCanvasResourceReferences,
+    getContextResourceNodes,
+    normalizeCanvasNodeMentionTokens,
+    reorderCanvasResourceConnections,
+    replaceCanvasReferenceMentions,
+    type CanvasResourceReference,
+} from "@/lib/canvas/canvas-resource-references";
+import { CanvasConnectionCreateMenu, CanvasNodePanelOverlay, type PendingConnectionCreate } from "@/components/canvas/canvas-workspace-overlays";
+import { CanvasOverlayLayerContainer, CanvasOverlayLayerProvider } from "@/components/canvas/canvas-overlay-layer";
+import { CanvasLeaferGraphicsLayer } from "@/components/canvas/canvas-leafer-graphics-layer";
+import { CanvasFreeformEmptyState, CanvasLinkedProjectEmptyState, CanvasShortDramaEmptyState, CanvasShortDramaGuide, CanvasStoryInputNodeContent, CanvasStylePlaceholderNodeContent } from "@/components/canvas/canvas-short-drama-entry";
+import { resolveCanvasEmptyStateKind } from "@/lib/canvas/canvas-starter";
+import { failedImageBatchChildren, markImageBatchRetrying, reconcileImageBatchRoot, restoreUnsubmittedImageBatchChild } from "@/lib/canvas/canvas-image-batch-retry";
+import { createCanvasNode, getInputSummary, isHiddenBatchChild } from "@/lib/canvas/canvas-project-domain";
+import { stampCanvasNodeChanges, updateCanvasNode, updateCanvasNodes } from "@/lib/canvas/canvas-node-timestamps";
+import { canvasAssetHandoffAttempt, finalizeCanvasAssetHandoff, uninsertedCanvasAssetHandoffPayloads } from "@/lib/canvas/canvas-asset-handoff";
+import { batchSourceRestriction } from "@/lib/canvas/canvas-batch-connection";
+import { batchReferenceColumns } from "@/lib/canvas/canvas-batch-table";
+import { deriveStoryboardPipelineProgress } from "@/lib/canvas/canvas-storyboard-progress";
+import { CanvasOperationChangeToast, CanvasMergeStatusToast, CanvasUploadStatusToast } from "./canvas-project-feedback";
+import { backendProviderConfig, getGenerationCount } from "@/lib/canvas/canvas-project-generation";
+import { cancelGenerationTask } from "@/services/api/task-center";
+import { CanvasSyncStatus } from "./canvas-sync-status";
+import { CanvasVersionHistory, useCanvasVersionHistory } from "./canvas-version-history";
+import { CanvasVersionPreview } from "./canvas-version-preview";
+import { CanvasTopBar } from "./canvas-project-top-bar";
+import { LibTVImportDialog } from "./components/libtv-import-dialog";
+import { TapNowImportDialog } from "./components/tapnow-import-dialog";
+import { CanvasFocusModeBar } from "@/components/canvas/canvas-focus-mode-bar";
+import { CanvasProjectContextMenu } from "./canvas-project-context-menu";
+import { CanvasProjectMediaDialogs } from "./canvas-project-media-dialogs";
+import { BatchGenerationSettingsDialog } from "@/components/canvas/batch-generation-settings-dialog";
+import { CanvasProjectSelectionToolbar } from "./canvas-project-selection-toolbar";
+import { CanvasProjectStatusDialogs } from "./canvas-project-status-dialogs";
+import { CanvasProjectWorldLayers } from "./canvas-project-world-layers";
+import { CanvasNodeActionContext, type CanvasNodeActionContextValue } from "@/components/canvas/canvas-node-action-context";
+import { bringCanvasNodeToFront, type CanvasNodeStackOrder } from "@/lib/canvas/canvas-node-stack-order";
+import { AiArtCritiqueModal } from "@/components/canvas/art-critique/ai-art-critique-modal";
+import { CanvasNodeGraphContext, type CanvasNodeGraphContextValue } from "@/components/canvas/canvas-node-graph-context";
+import { CanvasRefreshShell } from "./canvas-refresh-shell";
+import { queryGenerationTask } from "@/services/api/task-center";
+import type { CanvasImageEmotionPayload } from "@/components/canvas/canvas-node-emotion-panel";
+import { CanvasEmotionWorkspace } from "@/components/canvas/canvas-emotion-workspace";
+import { removeCanvasDrawing } from "@/lib/canvas/canvas-drawing-storage";
+import { useCanvasConnectionController } from "./use-canvas-connection-controller";
+import { useCanvasOperationHistory } from "./use-canvas-operation-history";
+import { useCanvasAssistantVisibility } from "./use-canvas-assistant-visibility";
+import { useCanvasActiveTasks } from "./use-canvas-active-tasks";
+import { useCanvasStyleWorkflow } from "./use-canvas-style-workflow";
+import { useCanvasDirector } from "./use-canvas-director";
+import { useCanvasGeneration } from "./use-canvas-generation";
+import { useCanvasGenerationBatches } from "./use-canvas-generation-batches";
+import { handleListGenerate } from "./list-mode-generator";
+import { useCanvasBatchTable } from "./use-canvas-batch-table";
+import { useCanvasGenerationExecutor, type CanvasNodeGenerationOptions } from "./use-canvas-generation-executor";
+import { useCanvasGenerationRetry } from "./use-canvas-generation-retry";
+import { useCanvasHistory } from "./use-canvas-history";
+import { useCanvasKeyboard } from "./use-canvas-keyboard";
+import { useCanvasMediaTools } from "./use-canvas-media-tools";
+import { useCanvasNodeEditor } from "./use-canvas-node-editor";
+import { useCanvasNodeOperations } from "./use-canvas-node-operations";
+import { useCanvasProjectLifecycle } from "./use-canvas-project-lifecycle";
+import { useCanvasRenderModel } from "./use-canvas-render-model";
+import { useCanvasSelectionController } from "./use-canvas-selection-controller";
+import { useCanvasShortDrama } from "./use-canvas-short-drama";
+import { useCanvasStoryboard } from "./use-canvas-storyboard";
+import { useCanvasUpload } from "./use-canvas-upload";
+import { useCanvasTimelineAssetInsert } from "./use-canvas-timeline-asset-insert";
+import { useCanvasViewportController } from "./use-canvas-viewport-controller";
+import {
+    CanvasNodeType,
+    type CanvasAssistantSession,
+    type CanvasConnection,
+    type CanvasFolderStyle,
+    type CanvasFolderTheme,
+    type CanvasNodeData,
+    type CanvasNodeMetadata,
+    type CanvasMediaPerformanceMode,
+    type StoryboardColumn,
+    type StoryboardShotCount,
+    type StoryboardShotDuration,
+    type CanvasWorkflowKind,
+    type CanvasWorkspaceMode,
+    type CanvasToolMode,
+    type ContextMenuState,
+    type Position,
+    type ViewportTransform,
+} from "@/types/canvas";
+import type { ReferenceImage } from "@/types/image";
+import { ART_CRITIQUE_NODE_TYPE } from "@/lib/art-critique/contracts";
+
+const CanvasDirectorWorkbench = lazy(() => import("@/components/canvas/director/canvas-director-workbench").then((module) => ({ default: module.CanvasDirectorWorkbench })));
+const CanvasDrawingEditorModal = lazy(() => import("@/components/canvas/canvas-drawing-editor-modal").then((module) => ({ default: module.CanvasDrawingEditorModal })));
+
+const NODE_STATUS_SUCCESS = "success" as const;
+const EMPTY_RESOURCE_REFERENCES: CanvasResourceReference[] = [];
+
+
+async function copyImageToSystemClipboard(source: string, storageKey?: string) {
+    if (typeof ClipboardItem === "undefined" || !navigator.clipboard?.write) throw new Error("当前浏览器不支持复制图片");
+    if (typeof window !== "undefined") window.focus();
+
+    const fetchPNG = async (): Promise<Blob> => {
+        let sourceBlob: Blob | null = null;
+        if (storageKey) {
+            sourceBlob = await getCachedResourceBlob(storageKey).catch(() => null);
+        }
+        if (!sourceBlob) {
+            const response = await fetch(source);
+            if (!response.ok) throw new Error(`图片读取失败（HTTP ${response.status}）`);
+            sourceBlob = await response.blob();
+        }
+        return sourceBlob.type === "image/png" ? sourceBlob : await convertClipboardImageToPNG(sourceBlob);
+    };
+
+    // 优先尝试将 Promise 直接传给 ClipboardItem（现代浏览器标准），在用户激活手势内立即声明写入，
+    // 避免因 fetch / 格式转换耗时导致手势过期或窗口失焦抛出 "Document is not focused" 错误。
+    try {
+        const item = new ClipboardItem({ "image/png": fetchPNG() });
+        await navigator.clipboard.write([item]);
+        return;
+    } catch {
+        // 部分浏览器环境不支持延迟 Promise，回退到先取 Blob 再写入
+    }
+
+    const blob = await fetchPNG();
+    if (typeof window !== "undefined") window.focus();
+    await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+}
+
+async function convertClipboardImageToPNG(blob: Blob) {
+    if (typeof createImageBitmap !== "function") throw new Error("当前浏览器无法转换这张图片的格式");
+    const bitmap = await createImageBitmap(blob);
+    try {
+        const canvas = document.createElement("canvas");
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        const context = canvas.getContext("2d");
+        if (!context) throw new Error("当前浏览器无法处理这张图片");
+        context.drawImage(bitmap, 0, 0);
+        return await new Promise<Blob>((resolve, reject) => canvas.toBlob((value) => (value ? resolve(value) : reject(new Error("图片格式转换失败"))), "image/png"));
+    } finally {
+        bitmap.close();
+    }
+}
+
+function visibleGenerationBatch(node: CanvasNodeData) {
+    const batches = node.metadata?.generationBatches || [];
+    for (let index = batches.length - 1; index >= 0; index -= 1) {
+        if (batches[index].status === "queued" || batches[index].status === "running") return batches[index];
+    }
+    return batches.at(-1);
+}
+
+export default function CanvasPage() {
+    useCanvasThemeScope();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) return <CanvasRefreshShell />;
+
+    return <InfiniteCanvasPage />;
+}
+
+function InfiniteCanvasPage() {
+    // 命令式确认必须走 App.useApp().modal；静态 Modal.confirm 拿不到主题和 App 上下文。
+    const { message, modal } = App.useApp();
+    const queryClient = useQueryClient();
+    const params = useParams<{ id: string }>();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const projectId = params.id || "";
+    const canvasStorageScope = getActiveUserScope();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const didInitialCenterRef = useRef(false);
+    const toolbarHideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const assetHandoffRef = useRef("");
+
+    const config = useConfigStore((state) => state.config);
+    const effectiveConfig = useEffectiveConfig();
+    const isAiConfigReady = useConfigStore((state) => state.isAiConfigReady);
+    const assets = useAssetStore((state) => state.assets);
+    const assetsHydrated = useAssetStore((state) => state.hydrated);
+    const cleanupAssetImages = useAssetStore((state) => state.cleanupImages);
+    const colorTheme = useCanvasThemeStore((state) => state.theme);
+    const setTheme = useCanvasThemeStore((state) => state.setTheme);
+    const theme = canvasThemes[colorTheme];
+    const defaultDrawingEngine = useUserStore((state) => state.drawingEngine.defaultEngine);
+    const shortDramaEnabled = useUserStore((state) => state.features.shortDramaEnabled);
+    const directorOnboardingScope = useUserStore((state) => state.user?.id?.trim() || "");
+    const nodesRef = useRef<CanvasNodeData[]>([]);
+    const [nodes, setNodesState] = useState<CanvasNodeData[]>([]);
+    const setNodes = useCallback<Dispatch<SetStateAction<CanvasNodeData[]>>>((value) => {
+        if (typeof value === "function") {
+            setNodesState((current) => {
+                const next = stampCanvasNodeChanges(current, value(current));
+                nodesRef.current = next;
+                return next;
+            });
+            return;
+        }
+        const next = stampCanvasNodeChanges(nodesRef.current, value);
+        nodesRef.current = next;
+        setNodesState(next);
+    }, []);
+    const [nodeStackOrder, setNodeStackOrder] = useState<CanvasNodeStackOrder>([]);
+    const bringNodeToFront = useCallback((nodeId: string) => {
+        setNodeStackOrder((current) => bringCanvasNodeToFront(current, nodeId));
+    }, []);
+    const [connections, setConnections] = useState<CanvasConnection[]>([]);
+    const [chatSessions, setChatSessions] = useState<CanvasAssistantSession[]>([]);
+    const [activeChatId, setActiveChatId] = useState<string | null>(null);
+    const [viewport, setViewport] = useState<ViewportTransform>({ x: 0, y: 0, k: 1 });
+    const [size, setSize] = useState({ width: 1200, height: 720 });
+    const [selectedNodeIds, setSelectedNodeIds] = useState<Set<string>>(new Set());
+    const [selectedConnectionId, setSelectedConnectionId] = useState<string | null>(null);
+    const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
+    const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+    const [agentPrefillPrompt, setAgentPrefillPrompt] = useState("");
+    const [isMiniMapOpen, setIsMiniMapOpen] = useState(false);
+    const [canvasAppearance, setCanvasAppearance] = useState<CanvasAppearance>(() => canvasAppearanceForTheme(colorTheme));
+    const [backgroundMode, setBackgroundMode] = useState<CanvasBackgroundMode>(DEFAULT_CANVAS_BACKGROUND_MODE);
+    const [showImageInfo, setShowImageInfo] = useState(false);
+    const [canvasTool, setCanvasTool] = useState<CanvasToolMode>("box-select");
+    const [mediaPerformanceMode, setMediaPerformanceMode] = useState<CanvasMediaPerformanceMode>(readCanvasMediaPerformanceMode);
+    const [projectLoaded, setProjectLoaded] = useState(false);
+    const workspaceMode: CanvasWorkspaceMode = "professional";
+    const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
+    const [shareModalOpen, setShareModalOpen] = useState(false);
+    const [tapNowImportOpen, setTapNowImportOpen] = useState(false);
+    const [nodeSearchOpen, setNodeSearchOpen] = useState(false);
+    const [toolbarNodeId, setToolbarNodeId] = useState<string | null>(null);
+    const [arkPrivateAssetUploadNodeId, setArkPrivateAssetUploadNodeId] = useState<string | null>(null);
+    const [nodeImageSettingsOpen, setNodeImageSettingsOpen] = useState(false);
+    const [dialogNodeId, setDialogNodeId] = useState<string | null>(null);
+    const [textEditorNodeId, setTextEditorNodeId] = useState<string | null>(null);
+    const [characterReferenceNodeId, setCharacterReferenceNodeId] = useState<string | null>(null);
+    const [drawingNodeId, setDrawingNodeId] = useState<string | null>(null);
+    const [stylePickerOpen, setStylePickerOpen] = useState(false);
+    // 新建导演台镜头必须先选模板：null 表示未在选择中，undefined position 表示用画布中心。
+    const [directorTemplateRequest, setDirectorTemplateRequest] = useState<{ position?: Position } | null>(null);
+    const [infoNodeId, setInfoNodeId] = useState<string | null>(null);
+    const [subtitleNodeId, setSubtitleNodeId] = useState<string | null>(null);
+    const [timelineNodeId, setTimelineNodeId] = useState<string | null>(null);
+    const [superResolveNodeId, setSuperResolveNodeId] = useState<string | null>(null);
+    const [previewNodeId, setPreviewNodeId] = useState<string | null>(null);
+    const [scriptEditorNodeId, setScriptEditorNodeId] = useState<string | null>(null);
+    const [artCritiqueNodeId, setArtCritiqueNodeId] = useState<string | null>(null);
+    const artCritiqueRunningRef = useRef(false);
+    const [artCritiqueStartRequest, setArtCritiqueStartRequest] = useState<{ nodeId: string; id: string; restart: boolean } | null>(null);
+    const [scriptScrollTopById, setScriptScrollTopById] = useState<Record<string, number>>({});
+    const [directorNodeId, setDirectorNodeId] = useState<string | null>(null);
+    const [versionCompareRootId, setVersionCompareRootId] = useState<string | null>(null);
+    const [libTVImportOpen, setLibTVImportOpen] = useState(false);
+    const [titleEditing, setTitleEditing] = useState(false);
+    const [titleDraft, setTitleDraft] = useState("");
+    const [shortcutRequestNonce, setShortcutRequestNonce] = useState(0);
+    const [cinematicAgentEntry, setCinematicAgentEntry] = useState(false);
+    const { assistantOpen, closeAgent, openAgent: openAssistant } = useCanvasAssistantVisibility();
+    const agentMentionReferences = useMemo(() => buildCanvasAgentMentionReferences(nodes), [nodes]);
+
+    const { tasks: activeTasks } = useCanvasActiveTasks(projectId, projectLoaded);
+    const { focusMode, enterFocusMode, exitFocusMode, toggleFocusMode } = useFocusMode();
+    const [focusDockRevealed, setFocusDockRevealed] = useState(false);
+
+    useEffect(() => {
+        persistCanvasMediaPerformanceMode(mediaPerformanceMode);
+    }, [mediaPerformanceMode]);
+
+    useEffect(() => {
+        didInitialCenterRef.current = false;
+        setNodeStackOrder([]);
+    }, [projectId]);
+
+    useEffect(() => {
+        const nodeIds = new Set(nodes.map((node) => node.id));
+        setNodeStackOrder((current) => {
+            const next = current.filter((nodeId) => nodeIds.has(nodeId));
+            return next.length === current.length ? current : next;
+        });
+    }, [nodes]);
+
+    const connectionsRef = useRef(connections);
+    const chatSessionsRef = useRef(chatSessions);
+    const activeChatIdRef = useRef(activeChatId);
+    const selectedNodeIdsRef = useRef(selectedNodeIds);
+    const viewportRef = useRef(viewport);
+    const generateNodeRef = useRef<((nodeId: string, mode: CanvasNodeGenerationMode, prompt: string, options?: CanvasNodeGenerationOptions) => Promise<void>) | null>(null);
+
+    useEffect(() => {
+        if (!projectId) return;
+        return registerCanvasGenerationLiveProject({
+            scope: canvasStorageScope,
+            projectId,
+            adapter: createCanvasGenerationLiveProjectAdapter({ nodesRef, connectionsRef, chatSessionsRef, activeChatIdRef, setNodes, setConnections, setChatSessions, setActiveChatId }),
+        });
+    }, [canvasStorageScope, projectId]);
+
+    const resolvedCanvasAppearance = useMemo(() => resolveCanvasAppearance(canvasAppearance, colorTheme), [canvasAppearance, colorTheme]);
+    const applyCanvasAppearance = useCallback(
+        (next: CanvasAppearance) => {
+            const fallback = canvasAppearanceBaseTheme(next, colorTheme);
+            const normalized = normalizeCanvasAppearance(next, fallback);
+            setCanvasAppearance(normalized);
+            setTheme(canvasAppearanceBaseTheme(normalized, fallback));
+        },
+        [colorTheme, setTheme],
+    );
+    const saveCanvasAppearanceDefault = useCallback(
+        (next: CanvasAppearance) => {
+            writeCanvasAppearanceDefault({ appearance: next, backgroundMode });
+            message.success("已保存为当前账号在本机的新建画布默认外观");
+        },
+        [backgroundMode, message],
+    );
+
+    const { getHistoryCleanupContext, historyPausedRef, historyState, redoCanvas, resetHistory, undoCanvas } = useCanvasHistory({
+        projectLoaded,
+        nodes,
+        connections,
+        chatSessions,
+        activeChatId,
+        canvasAppearance,
+        backgroundMode,
+        showImageInfo,
+        setNodes,
+        setConnections,
+        setChatSessions,
+        setActiveChatId,
+        applyCanvasAppearance,
+        setBackgroundMode,
+        setShowImageInfo,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setContextMenu,
+    });
+
+    const cleanupCanvasFiles = useCallback(
+        (extra?: unknown) => {
+            cleanupAssetImages({ extra, ...getHistoryCleanupContext() });
+        },
+        [cleanupAssetImages, getHistoryCleanupContext],
+    );
+
+    const { loadError, retryLoad, addedSkills, agentCreatedNodes, clearCanvasFiles, createAndOpenProject, currentProject, deleteCurrentProject, renameCurrentProject, reloadLatestCanvasProject, restoreCanvasProjectVersion, saveCanvasProject, forceSaveCanvasProject, updateProject } = useCanvasProjectLifecycle({
+        projectId,
+        projectLoaded,
+        nodes,
+        connections,
+        chatSessions,
+        activeChatId,
+        canvasAppearance,
+        backgroundMode,
+        showImageInfo,
+        viewport,
+        nodesRef,
+        connectionsRef,
+        chatSessionsRef,
+        activeChatIdRef,
+        viewportRef,
+        historyPausedRef,
+        setNodes,
+        setConnections,
+        setChatSessions,
+        setActiveChatId,
+        setCanvasAppearance,
+        setBackgroundMode,
+        setShowImageInfo,
+        setViewport,
+        setProjectLoaded,
+        resetHistory,
+        cleanupAssetImages,
+        cleanupCanvasFiles,
+    });
+
+    const versions = useCanvasVersionHistory(projectId, restoreCanvasProjectVersion);
+    const openVersions = () => { closeAgent(); setVersionCompareRootId(null); versions.show(); };
+    const openAgent = useCallback(() => { versions.close(); openAssistant(); }, [versions.close, openAssistant]);
+
+    const sendSelectionToAgent = useCallback((nodeId?: string) => {
+        const ids = nodeId ? [nodeId] : Array.from(selectedNodeIdsRef.current);
+        const references = ids.map((id) => agentMentionReferences.find((reference) => reference.nodeId === id)).filter((reference): reference is CanvasResourceReference => Boolean(reference));
+        if (!references.length) return;
+        setAgentPrefillPrompt(`${references.map(canvasResourceMentionToken).join(" ")} `);
+        openAgent();
+        setContextMenu(null);
+    }, [agentMentionReferences, openAgent]);
+    // 修复素材关联仍遵守当前画布版本，不能替用户确认覆盖云端的新内容。
+    const confirmForceSaveCanvas = useCallback(() => {
+        modal.confirm({
+            title: "修复素材关联并保存？",
+            content: "核对画布媒体与素材库的关联，补齐缺失素材后保存。若云端已有新版本，会保留本地草稿并提示加载最新版。",
+            okText: "修复并保存",
+            cancelText: "取消",
+            onOk: () => forceSaveCanvasProject(),
+        });
+    }, [forceSaveCanvasProject, modal]);
+
+    const applyLibTVImport = useCallback(
+        async (importedNodes: CanvasNodeData[], importedConnections: CanvasConnection[]) => {
+            const previousNodes = nodesRef.current;
+            const previousConnections = connectionsRef.current;
+            const nextNodes = [...nodesRef.current, ...importedNodes];
+            const nextConnections = [...connectionsRef.current, ...importedConnections];
+            nodesRef.current = nextNodes;
+            connectionsRef.current = nextConnections;
+            setNodes(nextNodes);
+            setConnections(nextConnections);
+            const saved = await saveCanvasProject({ requireRemote: false });
+            if (!saved) {
+                nodesRef.current = previousNodes;
+                connectionsRef.current = previousConnections;
+                setNodes(previousNodes);
+                setConnections(previousConnections);
+                throw new Error("画布保存失败，已撤销本次 LibTV 导入");
+            }
+        },
+        [saveCanvasProject, setConnections, setNodes],
+    );
+    const applyTapNowImport = useCallback(
+        async (importedNodes: CanvasNodeData[], importedConnections: CanvasConnection[]) => {
+            const previousNodes = nodesRef.current;
+            const previousConnections = connectionsRef.current;
+            const nextNodes = [...nodesRef.current, ...importedNodes];
+            const nextConnections = [...connectionsRef.current, ...importedConnections];
+            nodesRef.current = nextNodes;
+            connectionsRef.current = nextConnections;
+            setNodes(nextNodes);
+            setConnections(nextConnections);
+            const saved = await saveCanvasProject({ requireRemote: false });
+            if (!saved) {
+                nodesRef.current = previousNodes;
+                connectionsRef.current = previousConnections;
+                setNodes(previousNodes);
+                setConnections(previousConnections);
+                throw new Error("画布保存失败，已撤销本次 TapNow 导入");
+            }
+        },
+        [saveCanvasProject, setConnections, setNodes],
+    );
+    const linkedProjectId = shortDramaEnabled ? currentProject?.projectId || "" : "";
+    const linkedProjectQuery = useQuery({ queryKey: ["project", linkedProjectId], queryFn: () => getProject(linkedProjectId), enabled: Boolean(linkedProjectId) });
+    const refetchLinkedProject = linkedProjectQuery.refetch;
+    const archiveNodesToLinkedFolder = useCallback(
+        (folder: CanvasNodeData, droppedNodes: CanvasNodeData[]) => {
+            const folderId = folder.metadata?.folder?.assetFolderId;
+            const domainProjectId = folder.metadata?.folder?.projectId || linkedProjectId;
+            if (!folderId || !domainProjectId || !droppedNodes.length) return;
+            void Promise.all(droppedNodes.map((node) => ensureCanvasNodeAsset({ canvasId: projectId, domainProjectId, folderId, node, source: "canvas-manual" })))
+                .then((results) => {
+                    const archivedByNodeId = new Map(droppedNodes.map((node, index) => [node.id, { assetId: results[index].assetId, content: node.metadata?.content, previousAssetId: node.metadata?.assetId }]));
+                    setNodes((current) =>
+                        current.map((node) => {
+                            const archived = archivedByNodeId.get(node.id);
+                            if (!archived || node.metadata?.content !== archived.content || node.metadata?.assetId !== archived.previousAssetId) return node;
+                            return { ...node, metadata: { ...node.metadata, assetId: archived.assetId } };
+                        }),
+                    );
+                    void refetchLinkedProject();
+                    message.success(`已归档到“${folder.title}”`);
+                })
+                .catch((error) => message.error(error instanceof Error ? error.message : "素材归档失败"));
+        },
+        [linkedProjectId, message, projectId, refetchLinkedProject, setNodes],
+    );
+    useEffect(() => {
+        if (!projectLoaded || !linkedProjectQuery.data) return;
+        setNodes((current) => refreshCanvasCharacterReferenceNodes(current, linkedProjectQuery.data.assets));
+    }, [linkedProjectQuery.data, projectLoaded, setNodes]);
+    const canvasContext = useMemo(() => summarizeCanvasContext(nodes, selectedNodeIds, linkedProjectQuery.data?.units), [linkedProjectQuery.data?.units, nodes, selectedNodeIds]);
+    // 扩展节点（对比/图表/调色）要读自己的上游才能渲染，经 Context 下发；
+    // 取上游复用 canvas-resource-references 的实现，别在这里另写一份。必须 memo——
+    // 每帧新对象会让所有节点跟着重渲染，错题本里多条崩溃都出在画布高频更新。
+    const nodeGraphContext = useMemo<CanvasNodeGraphContextValue>(() => ({ getUpstreamNodes: (nodeId: string) => getContextResourceNodes(nodeId, nodes, connections) }), [connections, nodes]);
+
+    const { applyGenerationTaskResult, bindGenerationTask, finishGenerationRequest, openNodeTaskDetails, runningNodeId, setRunningNodeId, setTaskDetail, startGenerationRequest, taskDetail, taskDetailLoading, taskDetailLogs } = useCanvasGeneration({
+        projectId,
+        domainProjectId: linkedProjectId,
+        projectLoaded,
+        nodes,
+        nodesRef,
+        setNodes,
+    });
+
+    const cancelCanvasTask = useCallback(
+        (task: import("@/services/api/task-center").GenerationTask) => {
+            modal.confirm({
+                title: "取消生成任务？",
+                content: "任务会立即停止本地执行；如果已经提交到上游，系统会继续核对取消结果和积分状态。",
+                okText: "取消任务",
+                okButtonProps: { danger: true },
+                cancelText: "继续等待",
+                onOk: async () => {
+                    try {
+                        const next = await cancelGenerationTask(task.id);
+                        const node = nodesRef.current.find((item) => item.metadata?.taskId === task.id);
+                        if (node) bindGenerationTask(node.id, next);
+                        setTaskDetail((current) => (current?.id === task.id ? next : current));
+                        await queryClient.invalidateQueries({ queryKey: ["canvas-active-tasks", projectId] });
+                        message.success("任务已取消");
+                    } catch (error) {
+                        message.error(error instanceof Error ? error.message : "取消任务失败");
+                    }
+                },
+            });
+        },
+        [bindGenerationTask, message, modal, nodesRef, projectId, queryClient, setTaskDetail],
+    );
+
+    useEffect(() => {
+        const sessionId = searchParams.get("conversation");
+        if (!projectLoaded || !sessionId) return;
+        if (!chatSessions.some((session) => session.id === sessionId)) {
+            message.warning("未找到要接续的会话，请从首页重新进入。");
+        } else {
+            activeChatIdRef.current = sessionId;
+            setActiveChatId(sessionId);
+            openAgent();
+        }
+        const next = new URLSearchParams(searchParams);
+        next.delete("conversation");
+        setSearchParams(next, { replace: true });
+    }, [projectLoaded, chatSessions, searchParams, setSearchParams, openAgent, message]);
+
+    useEffect(() => {
+        if (!projectLoaded || searchParams.get("agent") !== "1") return;
+        openAgent();
+        const next = new URLSearchParams(searchParams);
+        next.delete("agent");
+        setSearchParams(next, { replace: true });
+    }, [projectLoaded, searchParams, setSearchParams, openAgent]);
+
+    // 沉浸专注进入时收起智能体与小地图、重置 Dock 唤出态；仅响应「进入」瞬间，避免关闭专注内主动唤出的面板。
+    const prevFocusModeRef = useRef(focusMode);
+    useEffect(() => {
+        const enteredFocus = focusMode && !prevFocusModeRef.current;
+        prevFocusModeRef.current = focusMode;
+        if (!enteredFocus) return;
+        closeAgent();
+        setIsMiniMapOpen(false);
+        setFocusDockRevealed(false);
+    }, [closeAgent, focusMode]);
+
+    useEffect(() => {
+        if (!dialogNodeId) setNodeImageSettingsOpen(false);
+    }, [dialogNodeId]);
+
+    useLayoutEffect(() => {
+        nodesRef.current = nodes;
+        connectionsRef.current = connections;
+        chatSessionsRef.current = chatSessions;
+        activeChatIdRef.current = activeChatId;
+        selectedNodeIdsRef.current = selectedNodeIds;
+        viewportRef.current = viewport;
+    }, [activeChatId, chatSessions, nodes, connections, selectedNodeIds, viewport]);
+
+    useEffect(() => {
+        if (!projectLoaded) return;
+        const el = containerRef.current;
+        if (!el) return;
+
+        const updateSize = () => {
+            const rect = el.getBoundingClientRect();
+            setSize((current) => (current.width === rect.width && current.height === rect.height ? current : { width: rect.width, height: rect.height }));
+            if (!didInitialCenterRef.current) {
+                didInitialCenterRef.current = true;
+                const current = viewportRef.current;
+                if (current.x === 0 && current.y === 0 && current.k === 1) {
+                    const centered = { x: rect.width / 2, y: rect.height / 2, k: 1 };
+                    viewportRef.current = centered;
+                    setViewport(centered);
+                }
+            }
+        };
+
+        updateSize();
+        const resizeObserver = new ResizeObserver(updateSize);
+        resizeObserver.observe(el);
+        return () => resizeObserver.disconnect();
+    }, [projectLoaded]);
+
+    const {
+        fitCanvasContent,
+        fitCanvasSelection,
+        focusCanvasImageNode,
+        focusCanvasNode,
+        getCanvasCenter,
+        handleCanvasDoubleClick,
+        handleViewportChange,
+        handleViewportPreviewChange,
+        previewViewport,
+        screenToCanvas,
+        setZoomScale,
+        zoomCanvasIn,
+        zoomCanvasOut,
+        zoomToActualSize,
+    } = useCanvasViewportController({
+        agentCreatedNodes,
+        containerRef,
+        size,
+        viewportRef,
+        nodesRef,
+        selectedNodeIdsRef,
+        setViewport,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setContextMenu,
+        setDialogNodeId,
+        setToolbarNodeId,
+    });
+
+    useEffect(() => {
+        const project = linkedProjectQuery.data?.project;
+        const preset = resolveProjectCanvasStyle(project?.stylePresetId, project?.styleProfileJson);
+        if (!projectLoaded || !preset) return;
+        const profile = resolveStyleProfile(project?.stylePresetId, project?.styleProfileJson, preset.profile || createStyleProfileSnapshot(preset));
+        if (!profile) return;
+        const current = nodesRef.current.find((node) => node.type === CanvasNodeType.Text && node.metadata?.workflowKind === "styleboard");
+        const nextMetadata = {
+            content: profile.prompt,
+            prompt: profile.prompt,
+            status: NODE_STATUS_SUCCESS,
+            workflowKind: "styleboard" as const,
+            workflowTitle: "项目画风",
+            workflowDescription: profile.description,
+            stylePresetId: profile.presetId,
+            styleProfileJson: serializeStyleProfile(profile),
+            fontSize: 14,
+            locked: true,
+        };
+        if (current) {
+            if (current.metadata?.stylePresetId === profile.presetId && current.metadata?.content === profile.prompt && current.metadata?.styleProfileJson === nextMetadata.styleProfileJson && current.metadata?.locked) return;
+            setNodes((nodes) => nodes.map((node) => (node.id === current.id ? { ...node, title: `项目画风 · ${profile.title}`, metadata: { ...node.metadata, ...nextMetadata } } : node)));
+            return;
+        }
+        const node = createCanvasNode(CanvasNodeType.Text, getCanvasCenter(), nextMetadata);
+        node.title = `项目画风 · ${profile.title}`;
+        node.width = 420;
+        node.height = 240;
+        setNodes((nodes) => [...nodes, node]);
+    }, [getCanvasCenter, linkedProjectQuery.data?.project, projectLoaded, setNodes]);
+
+    const {
+        assetPickerOpen,
+        closeUploadModal,
+        closeAssetPicker,
+        createVideoNodeFromBlob,
+        createImageAssetNode,
+        fileDropActive,
+        handleAssetsInsert,
+        handleDrop,
+        handleFileDragEnter,
+        handleFileDragLeave,
+        handleFileDragOver,
+        handleImageInputChange,
+        handleProjectAssetsInsert,
+        handleProjectChapterInsert,
+        handleUploadFiles,
+        handleUploadRequest,
+        imageInputRef,
+        openAssetsAtPosition,
+        pasteAssistantImage,
+        pasteSystemClipboard,
+        replaceNodeMedia,
+        createFileNode,
+        startUploadStatus,
+        uploadModalOpen,
+        uploadTimelineMedia,
+        uploadStatus,
+    } = useCanvasUpload({
+        canvasId: projectId,
+        domainProjectId: linkedProjectId,
+        nodesRef,
+        selectedNodeIdsRef,
+        getCanvasCenter,
+        screenToCanvas,
+        setNodes,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setContextMenu,
+        setDialogNodeId,
+    });
+    const replaceCanvasNodeMedia = useCallback((node: CanvasNodeData) => handleUploadRequest(node.id), [handleUploadRequest]);
+    const {
+        timelineAddNodeRef,
+        timelineMediaAddRef,
+        assetInsertScope,
+        projectAssetScope,
+        projectAssetOpen,
+        projectAssetInitialCategory,
+        projectAssetInitialFolderId,
+        projectAssetInsertPosition,
+        handleLibraryAssetsInsert,
+        handleTimelineProjectAssetsInsert,
+        openProjectAssets,
+        openCanvasAssetLibrary,
+        openTimelineAssetLibrary,
+        closeProjectAssets,
+    } = useCanvasTimelineAssetInsert({
+        linkedProjectId,
+        refetchLinkedProject,
+        handleAssetsInsert,
+        handleProjectAssetsInsert,
+        openAssetsAtPosition,
+    });
+
+    useEffect(() => {
+        if (!projectLoaded || searchParams.get("mode") !== "handoff") return;
+        void loadAssetsForUse(canvasAssetHandoffIds(searchParams)).catch((error) => message.error(error instanceof Error ? error.message : "转入素材读取失败"));
+    }, [projectLoaded, searchParams, message]);
+
+    useEffect(() => {
+        if (!projectLoaded || !assetsHydrated || searchParams.get("mode") !== "handoff") return;
+        const attempt = canvasAssetHandoffAttempt(assets, searchParams);
+        const { assetIds, payloads } = attempt;
+        if (!assetIds.length) return;
+        const assetReadiness = assetIds
+            .map((assetId) => {
+                const asset = assets.find((candidate) => candidate.id === assetId);
+                return `${assetId}:${asset?.kind || "missing"}`;
+            })
+            .join("|");
+        const handoffKey = `${projectId}:${assetReadiness}`;
+        if (assetHandoffRef.current === handoffKey) return;
+        assetHandoffRef.current = handoffKey;
+
+        if (attempt.kind === "retry") return;
+        const pendingPayloads = uninsertedCanvasAssetHandoffPayloads(nodesRef.current, payloads);
+        const persistHandoff = async (createdNodes: CanvasNodeData[]) => {
+            const finalized = await finalizeCanvasAssetHandoff({
+                searchParams,
+                currentNodes: nodesRef.current,
+                createdNodes,
+                persist: async (nextNodes) => {
+                    nodesRef.current = nextNodes;
+                    updateProject(projectId, { nodes: nextNodes });
+                    await flushCanvasStorePersistence();
+                },
+            });
+            setSearchParams(finalized.searchParams, { replace: true });
+        };
+        const insertion = pendingPayloads.length ? handleProjectAssetsInsert(pendingPayloads) : Promise.resolve([] as CanvasNodeData[]);
+        void insertion.then(persistHandoff).catch(() => {
+            assetHandoffRef.current = "";
+        });
+    }, [assets, assetsHydrated, handleProjectAssetsInsert, message, nodesRef, projectId, projectLoaded, searchParams, setSearchParams, updateProject]);
+
+    const {
+        angleNodeId,
+        lightingNodeId,
+        emotionNodeId,
+        annotationNodeId,
+        annotationEditNodeId,
+        createImageReversePromptNodes,
+        openPortraitTextureEditor,
+        cropImageNode,
+        cropNodeId,
+        closeFrameDialog,
+        closeSegmentDialog,
+        extractAudioFromVideo,
+        extractVideoFrames,
+        extractingVideoFramesNodeId,
+        frameDialogNodeId,
+        generateAngleNode,
+        generateLightingNode,
+        openPanoramaConfig,
+        createPanoramaViewerWithConfig,
+        addPanoramaCaptureNode,
+        panoramaConfigNodeId,
+        setPanoramaConfigNodeId,
+        generateEmotionNode,
+        handleSegmentConfirm,
+        maskEditImageNode,
+        maskEditNodeId,
+        imageEditNodeId,
+        imageEditPreset,
+        layerDecompositionNodeId,
+        textEditNodeId,
+        mergeSelectedVideos,
+        mergeVideosByIds,
+        mergeVideoProgress,
+        saveAnnotatedImageNode,
+        segmentDialogMode,
+        segmentDialogNodeId,
+        segmentRunningMode,
+        setFrameDialogNodeId,
+        setSegmentDialogNodeId,
+        setAngleNodeId,
+        setLightingNodeId,
+        setEmotionNodeId,
+        setAnnotationNodeId,
+        setAnnotationEditNodeId,
+        setCropNodeId,
+        setMaskEditNodeId,
+        setImageEditNodeId,
+        setImageEditPreset,
+        openImageEditNode,
+        openBackgroundRemoval,
+        openLayerDecomposition,
+        decomposeImageLayers,
+        setLayerDecompositionNodeId,
+        setTextEditNodeId,
+        openTextEditNode,
+        openAnnotationEditNode,
+        detectImageText,
+        editTextImageNode,
+        editAnnotatedImageNode,
+        editImageNode,
+        setUpscaleNodeId,
+        splitImageNode,
+        openVideoFrameExtractor,
+        openVideoSegmentExtractor,
+        upscaleImageNode,
+        upscaleNodeId,
+    } = useCanvasMediaTools({
+        projectId,
+        domainProjectId: linkedProjectId,
+        nodesRef,
+        connectionsRef,
+        selectedNodeIdsRef,
+        setNodes,
+        setConnections,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setDialogNodeId,
+        setContextMenu,
+        setHoveredNodeId,
+        setToolbarNodeId,
+        setRunningNodeId,
+        startUploadStatus,
+        startGenerationRequest,
+        finishGenerationRequest,
+        bindGenerationTask,
+    });
+
+    const handleNodesDeleted = useCallback(
+        (removedIds: Set<string>, nextNodes: CanvasNodeData[], removedNodes: CanvasNodeData[]) => {
+            const clearDeletedId = (current: string | null) => (current && removedIds.has(current) ? null : current);
+            setHoveredNodeId(clearDeletedId);
+            setToolbarNodeId(clearDeletedId);
+            setDialogNodeId(clearDeletedId);
+            setTextEditorNodeId(clearDeletedId);
+            setCharacterReferenceNodeId(clearDeletedId);
+            setDrawingNodeId(clearDeletedId);
+            setInfoNodeId(clearDeletedId);
+            setSubtitleNodeId(clearDeletedId);
+            setFrameDialogNodeId(clearDeletedId);
+            setSegmentDialogNodeId(clearDeletedId);
+            setCropNodeId(clearDeletedId);
+            setMaskEditNodeId(clearDeletedId);
+            setAnnotationNodeId(clearDeletedId);
+            setUpscaleNodeId(clearDeletedId);
+            setAngleNodeId(clearDeletedId);
+            setLightingNodeId(clearDeletedId);
+            setEmotionNodeId(clearDeletedId);
+            setSuperResolveNodeId(clearDeletedId);
+            setPreviewNodeId(clearDeletedId);
+            setRunningNodeId(clearDeletedId);
+            setScriptEditorNodeId(clearDeletedId);
+            setArtCritiqueNodeId(clearDeletedId);
+            setDirectorNodeId(clearDeletedId);
+            setVersionCompareRootId(clearDeletedId);
+            setScriptScrollTopById((current) => Object.fromEntries(Object.entries(current).filter(([id]) => !removedIds.has(id))));
+            setContextMenu((current) => (current?.type === "node" && removedIds.has(current.nodeId) ? null : current));
+            const removedDrawingIds = removedNodes.flatMap((node) => (node.type === CanvasNodeType.Drawing && node.metadata?.drawingId ? [node.metadata.drawingId] : []));
+            if (removedDrawingIds.length) {
+                void Promise.all(removedDrawingIds.map((drawingId) => removeCanvasDrawing(projectId, drawingId))).catch(() => message.warning("绘图节点已删除，但本地绘图缓存清理失败"));
+            }
+            cleanupCanvasFiles({ projectId, nodes: nextNodes, chatSessions });
+        },
+        [
+            chatSessions,
+            cleanupCanvasFiles,
+            message,
+            projectId,
+            setAngleNodeId,
+            setAnnotationNodeId,
+            setArtCritiqueNodeId,
+            setCropNodeId,
+            setEmotionNodeId,
+            setFrameDialogNodeId,
+            setLightingNodeId,
+            setMaskEditNodeId,
+            setSegmentDialogNodeId,
+            setUpscaleNodeId,
+            setRunningNodeId,
+        ],
+    );
+
+    const {
+        alignSelectedNodes,
+        autoArrangeCanvasNodes,
+        arrangeSelectedNodes,
+        spreadSelectedNodes,
+        copyNodesToClipboard,
+        copySelectedNodes,
+        createFolder,
+        createNode,
+        createReferenceGroup,
+        createStoryboardGroup,
+        deleteConnection,
+        deleteNodes,
+        duplicateNode,
+        hasCopiedNodes,
+        pasteCopiedNodes,
+        restoreCopiedNodesFromText,
+        releaseCopiedNodesPastePriority,
+        setPrimaryVersion,
+        shouldPreferCopiedNodes,
+        toggleNodeLocked,
+    } = useCanvasNodeOperations({
+        projectId,
+        defaultDrawingEngine,
+        nodesRef,
+        connectionsRef,
+        selectedNodeIdsRef,
+        getCanvasCenter,
+        setNodes,
+        setConnections,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setContextMenu,
+        setDialogNodeId,
+        onNodesDeleted: handleNodesDeleted,
+    });
+
+    const handleReplaceNodeReference = useCallback(
+        (targetNodeId: string, oldReference: { id: string; nodeId?: string; label?: string; title?: string }, sourceNodeId: string) => {
+            const sourceNode = nodesRef.current.find((n) => n.id === sourceNodeId);
+            if (!sourceNode || sourceNode.id === oldReference.nodeId) return;
+
+            const previousNodes = nodesRef.current;
+            const previousConnections = connectionsRef.current;
+
+            const configNodeId = previousConnections.find((c) => c.fromNodeId === targetNodeId && previousNodes.find((n) => n.id === c.toNodeId)?.type === CanvasNodeType.Config)?.toNodeId;
+            const receiverId = configNodeId || targetNodeId;
+
+            let rewired = false;
+            const nextConnections = previousConnections.map((c) => {
+                if (!rewired && c.fromNodeId === oldReference.nodeId && (c.toNodeId === targetNodeId || c.toNodeId === configNodeId)) {
+                    rewired = true;
+                    return { ...c, fromNodeId: sourceNodeId };
+                }
+                return c;
+            });
+
+            if (!rewired) {
+                nextConnections.push({
+                    id: nanoid(),
+                    fromNodeId: sourceNodeId,
+                    toNodeId: receiverId,
+                });
+            }
+
+            const nextReferencesMap = buildCanvasNodeMentionReferenceMap(previousNodes, nextConnections, previousNodes);
+            const targetNextReferences = nextReferencesMap.get(targetNodeId) || [];
+            const newRef = targetNextReferences.find((r) => r.nodeId === sourceNodeId);
+
+            const targetNode = previousNodes.find((n) => n.id === targetNodeId);
+            let nextNodes = previousNodes;
+            if (targetNode && newRef) {
+                const currentPrompt = targetNode.metadata?.composerContent ?? targetNode.metadata?.prompt ?? "";
+                const replacementToken = `@${newRef.label}`;
+                const updatedPrompt = replaceCanvasReferenceMentions(currentPrompt, oldReference, replacementToken, sourceNode.title ? sourceNode.title : newRef.label);
+
+                nextNodes = previousNodes.map((n) => (n.id === targetNodeId ? writeCanvasNodePrompt(n, updatedPrompt) : n));
+            }
+
+            nodesRef.current = nextNodes;
+            connectionsRef.current = nextConnections;
+            setNodes(nextNodes);
+            setConnections(nextConnections);
+            message.success(`已将参考图「${oldReference.label || "参考图"}」替换为「${sourceNode.title || "新图片"}」，提示词已同步更新`);
+        },
+        [connectionsRef, message, nodesRef, setConnections, setNodes],
+    );
+
+    const handleReplaceNodeReferenceFiles = useCallback(
+        (_targetNodeId: string, oldReference: { id: string; nodeId?: string; label?: string; title?: string }, files: File[]) => {
+            const file = files.find((f) => f.type.startsWith("image/"));
+            if (!file || !oldReference.nodeId) return;
+            void replaceNodeMedia(oldReference.nodeId, file).then((success: boolean) => {
+                if (success) {
+                    message.success("参考图片已替换");
+                }
+            });
+        },
+        [message, replaceNodeMedia],
+    );
+
+    const {
+        cancelPendingConnectionCreate,
+        closeConnectionCreateMenu,
+        connectionTargetAnchorRatio,
+        connectionTargetNodeId,
+        connectionApproach,
+        connectionReplaceHover,
+        connectingParams,
+        createConnectedNode,
+        getConnectionCreateDisabledReason,
+        handleConnectStart,
+        handleConnectDrop,
+        handleBatchConnectionTargetClick,
+        batchConnectionPreview,
+        beginBatchConnectionMode,
+        startBatchConnection,
+        mouseWorld,
+        pendingConnectionCreate,
+        setConnecting,
+    } = useCanvasConnectionController({
+        projectId,
+        config: effectiveConfig,
+        defaultDrawingEngine,
+        nodesRef,
+        connectionsRef,
+        viewportRef,
+        scriptScrollTopById,
+        screenToCanvas,
+        setNodes,
+        setConnections,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setContextMenu,
+        setDialogNodeId,
+        setDrawingNodeId,
+        onReplaceReference: handleReplaceNodeReference,
+    });
+
+    const batchSourceNodeIds = useMemo(() => nodes.filter((node) => selectedNodeIds.has(node.id) && !batchSourceRestriction(node)).map((node) => node.id), [nodes, selectedNodeIds]);
+
+    const handleCanvasSelectionStart = useCallback(() => {
+        setContextMenu(null);
+    }, []);
+
+    const handleNodeInteractionStart = useCallback((selectionModifier: boolean) => {
+        setContextMenu(null);
+        setHoveredNodeId(null);
+        setToolbarNodeId(null);
+        if (selectionModifier) setDialogNodeId(null);
+    }, []);
+
+    const handleSelectedNodeClick = useCallback(
+        (node: CanvasNodeData) => {
+            // Selection is transient, but the LibTV-style paint order survives
+            // deselection so a clicked lower node stays above its neighbours.
+            if (node.type !== CanvasNodeType.Frame) bringNodeToFront(node.id);
+            if (node.type === CanvasNodeType.Drawing) {
+                setDialogNodeId(null);
+                setDrawingNodeId(node.id);
+            } else if (node.type === CanvasNodeType.Script) {
+                setDialogNodeId(null);
+            } else if (node.type === CanvasNodeType.Text) {
+                setDialogNodeId(node.id);
+            } else if (node.type === CanvasNodeType.Frame) {
+                setDialogNodeId((current) => (current === node.id ? current : null));
+            } else if (node.type === ART_CRITIQUE_NODE_TYPE) {
+                setDialogNodeId(null);
+                setArtCritiqueNodeId(node.id);
+            } else if (node.type === CanvasNodeType.Panorama) {
+                // 全景节点是纯查看器，没有可编辑提示词，不弹提示词面板。
+                setDialogNodeId(null);
+            } else {
+                // 选择参考媒体时保留当前工作流配置面板，避免点击图片后配置“返回/消失”。
+                // 没有工作流配置面板时，媒体节点仍按原逻辑打开自己的面板。
+                setDialogNodeId((current) => {
+                    const currentNode = current ? nodesRef.current.find((item) => item.id === current) : undefined;
+                    return currentNode?.type === CanvasNodeType.Config ? current : node.id;
+                });
+            }
+        },
+        [bringNodeToFront, nodesRef],
+    );
+
+    const handleNodeBringToFront = useCallback(
+        (nodeId: string) => {
+            const node = nodesRef.current.find((item) => item.id === nodeId);
+            if (node && node.type !== CanvasNodeType.Frame) bringNodeToFront(nodeId);
+        },
+        [bringNodeToFront, nodesRef],
+    );
+
+    const handleNodeDragEnd = useCallback(
+        (nodeId: string) => {
+            const node = nodesRef.current.find((item) => item.id === nodeId);
+            if (!node || node.type === CanvasNodeType.Script || node.type === CanvasNodeType.Drawing || node.type === CanvasNodeType.Panorama || node.type === ART_CRITIQUE_NODE_TYPE) {
+                setDialogNodeId(null);
+                return;
+            }
+            // A drag selects a new node even though it is not a click. Keep the
+            // generation editor bound to the node most recently moved so a stale
+            // panel from the previous node cannot reappear after mouse-up.
+            setDialogNodeId(node.id);
+        },
+        [nodesRef],
+    );
+
+    const handleCanvasDeselect = useCallback(() => {
+        setContextMenu(null);
+        setHoveredNodeId(null);
+        setToolbarNodeId(null);
+        setDialogNodeId(null);
+    }, []);
+
+    const { alignmentGuides, cancelSelectionBox, deselectCanvas, dragPreview, frameDropTargetId, handleCanvasMouseDown, handleNodeMouseDown, isNodeDragging, nodeDraggingRef, selectionBoundsElementRef, selectionBox } = useCanvasSelectionController({
+        containerRef,
+        nodesRef,
+        viewportRef,
+        selectedNodeIdsRef,
+        historyPausedRef,
+        screenToCanvas,
+        setNodes,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        cancelPendingConnectionCreate,
+        onCanvasSelectionStart: handleCanvasSelectionStart,
+        onNodeInteractionStart: handleNodeInteractionStart,
+        onNodeBringToFront: handleNodeBringToFront,
+        onNodeClick: handleSelectedNodeClick,
+        onNodeDragEnd: handleNodeDragEnd,
+        onBatchConnectionTarget: handleBatchConnectionTargetClick,
+        onLinkedFolderDrop: archiveNodesToLinkedFolder,
+        onDeselect: handleCanvasDeselect,
+    });
+
+    const keepNodeToolbar = useCallback(
+        (nodeId: string) => {
+            if (nodeDraggingRef.current || nodeImageSettingsOpen) return;
+            if (toolbarHideTimerRef.current) {
+                clearTimeout(toolbarHideTimerRef.current);
+                toolbarHideTimerRef.current = null;
+            }
+            setToolbarNodeId(nodeId);
+        },
+        [nodeImageSettingsOpen],
+    );
+
+    const hideNodeToolbar = useCallback(() => {
+        if (toolbarHideTimerRef.current) clearTimeout(toolbarHideTimerRef.current);
+        toolbarHideTimerRef.current = setTimeout(() => {
+            setToolbarNodeId(null);
+            toolbarHideTimerRef.current = null;
+        }, 120);
+    }, []);
+
+    const {
+        collapsingBatchIds,
+        downloadNodeImage,
+        handleConfigNodeChange,
+        handleFolderStyleChange,
+        handleFolderThemeChange,
+        handleFontSizeChange,
+        handleNodeContentChange,
+        handleNodePromptChange,
+        handleNodeResize,
+        handleNodeTitleChange,
+        openingBatchIds,
+        saveNodeAsset,
+        setBatchPrimary,
+        toggleBatchExpanded,
+        toggleFrameCollapsed,
+        toggleNodeFreeResize,
+    } = useCanvasNodeEditor({
+        canvasId: projectId,
+        canvasTitle: currentProject?.title || "未命名画布",
+        domainProjectId: linkedProjectId,
+        nodesRef,
+        setNodes,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setDialogNodeId,
+        setToolbarNodeId,
+        setHoveredNodeId,
+    });
+
+    const handleRemoveNodeReference = useCallback(
+        (targetNodeId: string, reference: CanvasResourceReference) => {
+            const referenceNodeId = reference.nodeId;
+            if (!referenceNodeId) return;
+            // 生成节点可能通过配置节点接收参考，只移除参考来源边，保留目标到配置节点的主链。
+            const previousNodes = nodesRef.current;
+            const previousConnections = connectionsRef.current;
+            const configNodeId = previousConnections.find((connection) => {
+                if (connection.fromNodeId !== targetNodeId) return false;
+                return previousNodes.find((node) => node.id === connection.toNodeId)?.type === CanvasNodeType.Config;
+            })?.toNodeId;
+            const removedConnectionIds = new Set(previousConnections.filter((connection) => connection.fromNodeId === referenceNodeId && (connection.toNodeId === targetNodeId || connection.toNodeId === configNodeId)).map((connection) => connection.id));
+            if (!removedConnectionIds.size) return;
+            const nextConnections = previousConnections.filter((connection) => !removedConnectionIds.has(connection.id));
+            const nextNodes = applyCanvasConnectionPromptSync(previousNodes, previousConnections, previousNodes, nextConnections);
+            if (nextNodes !== previousNodes) {
+                nodesRef.current = nextNodes;
+                setNodes(nextNodes);
+            }
+            connectionsRef.current = nextConnections;
+            setConnections(nextConnections);
+            setSelectedConnectionId((current) => (current && removedConnectionIds.has(current) ? null : current));
+        },
+        [connectionsRef, nodesRef, setConnections, setNodes, setSelectedConnectionId],
+    );
+
+    const handleReorderNodeReferences = useCallback(
+        (targetNodeId: string, orderedNodeIds: string[]) => {
+            const previousNodes = nodesRef.current;
+            const previousConnections = connectionsRef.current;
+            const nextConnections = reorderCanvasResourceConnections(targetNodeId, orderedNodeIds, previousNodes, previousConnections);
+            if (nextConnections === previousConnections) return;
+            const nextNodes = applyCanvasConnectionPromptSync(previousNodes, previousConnections, previousNodes, nextConnections);
+            if (nextNodes !== previousNodes) {
+                nodesRef.current = nextNodes;
+                setNodes(nextNodes);
+            }
+            connectionsRef.current = nextConnections;
+            setConnections(nextConnections);
+        },
+        [connectionsRef, nodesRef, setConnections, setNodes],
+    );
+
+    const handleProjectFolderInsert = useCallback(
+        (folderId: string) => {
+            const folder = linkedProjectQuery.data?.assetFolders.find((item) => item.id === folderId);
+            if (!folder || !linkedProjectId) throw new Error("素材文件夹已不存在，请刷新后重试");
+            const style: CanvasFolderStyle = folder.style === "stacked" || folder.style === "midnight" || folder.style === "paper" || folder.style === "cinema" || folder.style === "compact" ? folder.style : "glass";
+            const theme: CanvasFolderTheme = folder.theme === "obsidian" || folder.theme === "ember" || folder.theme === "pearl" ? folder.theme : "aurora";
+            createFolder(projectAssetInsertPosition, { id: folder.id, projectId: linkedProjectId, title: folder.name, style, theme, createdAt: folder.createdAt });
+        },
+        [createFolder, linkedProjectId, linkedProjectQuery.data?.assetFolders, projectAssetInsertPosition],
+    );
+
+    const handleFrameToggle = useCallback(
+        (nodeId: string) => {
+            const node = nodesRef.current.find((item) => item.id === nodeId);
+            const linkedFolderId = node?.metadata?.folder?.assetFolderId;
+            if (linkedFolderId) {
+                openProjectAssets("all", node ? { x: node.position.x + node.width + 40, y: node.position.y } : undefined, "canvas", linkedFolderId);
+                return;
+            }
+            toggleFrameCollapsed(nodeId);
+        },
+        [nodesRef, openProjectAssets, toggleFrameCollapsed],
+    );
+
+    const linkedFolderPreviewNodesById = useMemo(() => {
+        const result = new Map<string, CanvasNodeData[]>();
+        const localById = new Map(assets.map((asset) => [asset.id, asset]));
+        for (const asset of linkedProjectQuery.data?.assets || []) {
+            if (!asset.folderId) continue;
+            const local = localById.get(asset.id);
+            const characterCover = asset.character?.representations.find((item) => item.role === "turnaround_sheet") || asset.character?.representations.find((item) => item.role === "primary") || asset.character?.representations[0];
+            const type = asset.category === "character" || asset.mediaType === "image" ? CanvasNodeType.Image : asset.mediaType === "video" ? CanvasNodeType.Video : asset.mediaType === "audio" ? CanvasNodeType.Audio : CanvasNodeType.Text;
+            const remoteResourceId = resourceIdFromStorageKey(asset.storageKey);
+            const content = characterCover
+                ? resourceFileUrl(characterCover.resourceId)
+                : local?.kind === "image"
+                  ? local.data.dataUrl || local.coverUrl
+                  : local?.kind === "video" || local?.kind === "audio"
+                    ? local.data.url
+                    : local?.kind === "text"
+                      ? local.data.content
+                      : remoteResourceId
+                        ? resourceFileUrl(remoteResourceId)
+                        : asset.previewText || "";
+            const preview: CanvasNodeData = { id: asset.id, type, title: asset.title, position: { x: 0, y: 0 }, width: 240, height: 160, metadata: { assetId: asset.id, content } };
+            const current = result.get(asset.folderId) || [];
+            current.push(preview);
+            result.set(asset.folderId, current);
+        }
+        return result;
+    }, [assets, linkedProjectQuery.data?.assets]);
+
+    useEffect(() => {
+        const folders = linkedProjectQuery.data?.assetFolders;
+        if (!folders?.length) return;
+        const byId = new Map(folders.map((folder) => [folder.id, folder]));
+        setNodes((current) => {
+            let changed = false;
+            const next = current.map((node) => {
+                const folderId = node.metadata?.folder?.assetFolderId;
+                const folder = folderId ? byId.get(folderId) : undefined;
+                if (!folder) return node;
+                const style: CanvasFolderStyle = folder.style === "stacked" || folder.style === "midnight" || folder.style === "paper" || folder.style === "cinema" || folder.style === "compact" ? folder.style : "glass";
+                const theme: CanvasFolderTheme = folder.theme === "obsidian" || folder.theme === "ember" || folder.theme === "pearl" ? folder.theme : "aurora";
+                if (node.title === folder.name && node.metadata?.folder?.style === style && node.metadata?.folder?.theme === theme) return node;
+                changed = true;
+                return { ...node, title: folder.name, metadata: { ...node.metadata, folder: { ...node.metadata!.folder!, style, theme, themeCover: undefined } } };
+            });
+            return changed ? next : current;
+        });
+    }, [linkedProjectQuery.data?.assetFolders, setNodes]);
+
+    const {
+        activeDirectorScene,
+        activeNodeId,
+        activeScriptNode,
+        activeStylePresetId,
+        angleNode,
+        lightingNode,
+        emotionNode,
+        annotationNode,
+        batchChildCountById,
+        batchMotionById,
+        canvasImageNodes,
+        configInputsById,
+        connectionLayerBounds,
+        contextMenuNode,
+        cropNode,
+        displayConnections,
+        frameChildrenById,
+        imageAssets,
+        infoNode,
+        maskEditNode,
+        imageEditNode,
+        mentionReferencesByNodeId,
+        nodeById,
+        previewNode,
+        reduceMediaEffects,
+        relatedHighlight,
+        resourceReferenceByNodeId,
+        selectedNodeBounds,
+        selectedVideoNodes,
+        skillMentionReferences,
+        superResolveNode,
+        toolbarNode,
+        upscaleNode,
+        versionCompareNodes,
+        visibleNodes,
+    } = useCanvasRenderModel({
+        nodes,
+        connections,
+        assets,
+        viewport,
+        viewportSize: size,
+        mediaPerformanceMode,
+        selectedNodeIds,
+        hoveredNodeId,
+        dragPreview,
+        collapsingBatchIds,
+        addedSkills,
+        directorScenes: currentProject?.directorScenes,
+        infoNodeId,
+        cropNodeId,
+        maskEditNodeId,
+        imageEditNodeId,
+        annotationNodeId,
+        splitNodeId: null,
+        upscaleNodeId,
+        superResolveNodeId,
+        angleNodeId,
+        lightingNodeId,
+        emotionNodeId,
+        previewNodeId,
+        contextMenu,
+        versionCompareRootId,
+        directorNodeId,
+        scriptEditorNodeId,
+        dialogNodeId,
+    });
+    useEffect(() => {
+        setNodes((current) => {
+            let changed = false;
+            const next = current.map((node) => {
+                const references = mentionReferencesByNodeId.get(node.id);
+                const savedPrompt = node.metadata?.composerContent ?? node.metadata?.prompt;
+                if (!references?.length || !savedPrompt?.includes("@[node:")) return node;
+                const normalizedPrompt = normalizeCanvasNodeMentionTokens(savedPrompt, references);
+                if (normalizedPrompt === savedPrompt) return node;
+                changed = true;
+                return {
+                    ...node,
+                    metadata: node.metadata?.composerContent !== undefined ? { ...node.metadata, composerContent: normalizedPrompt } : { ...node.metadata, prompt: normalizedPrompt },
+                };
+            });
+            return changed ? next : current;
+        });
+    }, [mentionReferencesByNodeId, setNodes]);
+    const dialogNode = dialogNodeId ? nodeById.get(dialogNodeId) || null : null;
+    // dragPreview is published on the same pointer-down frame as isNodeDragging.
+    // Treat either signal as moving so floating editors disappear before the
+    // first preview transform is painted and never affect drag layout.
+    const isCanvasNodeMoving = isNodeDragging || Boolean(dragPreview?.nodeIds.size);
+    const subtitleNode = subtitleNodeId ? nodeById.get(subtitleNodeId) || null : null;
+    const timelineNode = timelineNodeId ? nodeById.get(timelineNodeId) || null : null;
+    const frameNode = frameDialogNodeId ? nodeById.get(frameDialogNodeId) || null : null;
+    const segmentNode = segmentDialogNodeId ? nodeById.get(segmentDialogNodeId) || null : null;
+    const textEditorNode = textEditorNodeId ? nodeById.get(textEditorNodeId) || null : null;
+    const characterReferenceNode = characterReferenceNodeId ? nodeById.get(characterReferenceNodeId) || null : null;
+    const drawingNode = drawingNodeId ? nodeById.get(drawingNodeId) || null : null;
+    const artCritiqueNode = artCritiqueNodeId ? nodeById.get(artCritiqueNodeId) || null : null;
+    const artCritiqueInputs = artCritiqueNode
+        ? connections
+              .filter((connection) => connection.toNodeId === artCritiqueNode.id)
+              .sort((left, right) => left.id.localeCompare(right.id))
+              .map((connection) => nodeById.get(connection.fromNodeId))
+              .filter((node): node is CanvasNodeData => Boolean(node))
+        : [];
+    const pendingConnectionSourceNode = pendingConnectionCreate?.connection.handleType === "source" ? nodeById.get(pendingConnectionCreate.connection.nodeId) : null;
+    const canCreateDrawingFromConnection = !pendingConnectionCreate?.batchSourceNodeIds?.length && pendingConnectionSourceNode?.type === CanvasNodeType.Image && Boolean(pendingConnectionSourceNode.metadata?.content);
+
+    const openTextNodeEditor = useCallback((node: CanvasNodeData) => {
+        if (node.type !== CanvasNodeType.Text) return;
+        setSelectedNodeIds(new Set([node.id]));
+        setSelectedConnectionId(null);
+        setContextMenu(null);
+        setDialogNodeId(null);
+        setToolbarNodeId(null);
+        if (node.metadata?.workflowKind === "character" && node.metadata.characterAssetId) {
+            setCharacterReferenceNodeId(node.id);
+            return;
+        }
+        setTextEditorNodeId(node.id);
+    }, []);
+
+    const openDrawingNode = useCallback((node: CanvasNodeData) => {
+        if (node.type !== CanvasNodeType.Drawing) return;
+        setSelectedNodeIds(new Set([node.id]));
+        setSelectedConnectionId(null);
+        setContextMenu(null);
+        setDialogNodeId(null);
+        setToolbarNodeId(null);
+        setDrawingNodeId(node.id);
+    }, []);
+
+    const openArtCritique = useCallback((node: CanvasNodeData) => {
+        if (node.type !== ART_CRITIQUE_NODE_TYPE) return;
+        setSelectedNodeIds(new Set([node.id]));
+        setSelectedConnectionId(null);
+        setContextMenu(null);
+        setDialogNodeId(null);
+        setToolbarNodeId(null);
+        setArtCritiqueNodeId(node.id);
+    }, []);
+    const duplicateNodeFromContent = useCallback((node: CanvasNodeData) => duplicateNode(node.id), [duplicateNode]);
+    const deleteNodeFromContent = useCallback((node: CanvasNodeData) => deleteNodes(new Set([node.id])), [deleteNodes]);
+    const updateNodeFromContent = useCallback((nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData) => {
+        setNodesState((current) => {
+            const next = updateCanvasNode(current, nodeId, update);
+            nodesRef.current = next;
+            return next;
+        });
+    }, []);
+    const pendingMediaUpdatesRef = useRef(new Map<string, (node: CanvasNodeData) => CanvasNodeData>());
+    const mediaUpdateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const updateMediaNodeFromContent = useCallback((nodeId: string, update: (node: CanvasNodeData) => CanvasNodeData) => {
+        const previous = pendingMediaUpdatesRef.current.get(nodeId);
+        pendingMediaUpdatesRef.current.set(nodeId, previous ? (node) => update(previous(node)) : update);
+        if (mediaUpdateTimerRef.current) return;
+        mediaUpdateTimerRef.current = setTimeout(() => {
+            const updates = pendingMediaUpdatesRef.current;
+            pendingMediaUpdatesRef.current = new Map();
+            mediaUpdateTimerRef.current = null;
+            if (!updates.size) return;
+            setNodesState((current) => {
+                const next = updateCanvasNodes(current, updates);
+                nodesRef.current = next;
+                return next;
+            });
+        }, 120);
+    }, []);
+    const updateNodeMetadataFromContent = useCallback(
+        (nodeId: string, patch: CanvasNodeMetadata) => {
+            updateNodeFromContent(nodeId, (node) => ({ ...node, metadata: { ...node.metadata, ...patch } }));
+        },
+        [updateNodeFromContent],
+    );
+    const canvasNodeActions = useMemo<CanvasNodeActionContextValue>(
+        () => ({
+            upload: replaceCanvasNodeMedia,
+            download: downloadNodeImage,
+            duplicate: duplicateNodeFromContent,
+            deleteNode: deleteNodeFromContent,
+            updateMetadata: updateNodeMetadataFromContent,
+            updateNode: updateNodeFromContent,
+            updateMediaNode: updateMediaNodeFromContent,
+            openArtCritique,
+            addPanoramaCaptureNode,
+        }),
+        [addPanoramaCaptureNode, deleteNodeFromContent, downloadNodeImage, duplicateNodeFromContent, openArtCritique, replaceCanvasNodeMedia, updateMediaNodeFromContent, updateNodeFromContent, updateNodeMetadataFromContent],
+    );
+    const { agentSnapshot, agentUndoCount, applyAgentOps, canUndoAgentOps, dismissLastAgentChange, lastAgentChange, undoAgentOps, viewLastAgentChange } = useCanvasOperationHistory({
+        projectId,
+        domainProjectId: currentProject?.projectId,
+        projectTitle: currentProject?.title || "未命名画布",
+        nodes,
+        connections,
+        selectedNodeIds,
+        viewport,
+        nodesRef,
+        connectionsRef,
+        selectedNodeIdsRef,
+        viewportRef,
+        generateNodeRef,
+        setNodes,
+        setConnections,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setViewport,
+        setContextMenu,
+        focusSelection: fitCanvasSelection,
+    });
+
+    const { selectCanvasStyle, applyCanvasStyleAsync, styleApplying } = useCanvasStyleWorkflow({
+        canvasId: projectId,
+        domainProjectId: currentProject?.projectId,
+        nodesRef,
+        selectedNodeIdsRef,
+        getCanvasCenter,
+        setNodes,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setDialogNodeId,
+        setStylePickerOpen,
+    });
+
+    const { applyDirectorOutput, createDirectorShot, openDirectorWorkbench, saveDirectorScene } = useCanvasDirector({
+        projectId,
+        domainProjectId: currentProject?.projectId,
+        directorNodeId,
+        directorScenes: currentProject?.directorScenes || [],
+        nodesRef,
+        connectionsRef,
+        getCanvasCenter,
+        setNodes,
+        setConnections,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setDirectorNodeId,
+        updateProject,
+    });
+
+    const {
+        activateStep: activateShortDramaStep,
+        createPipeline: createShortDramaPipeline,
+        guideCollapsed: shortDramaGuideCollapsed,
+        openStoryInput,
+        progress: shortDramaProgress,
+        setGuideCollapsed: setShortDramaGuideCollapsed,
+        skipGuide: skipShortDramaGuide,
+    } = useCanvasShortDrama({
+        nodes,
+        connections,
+        nodesRef,
+        connectionsRef,
+        selectedNodeIdsRef,
+        getCanvasCenter,
+        setNodes,
+        setConnections,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setStylePickerOpen,
+        fitCanvasSelection,
+        focusCanvasNode,
+        openTextEditor: openTextNodeEditor,
+    });
+
+    const shortDramaGuide = shortDramaEnabled && !currentProject?.projectId && shortDramaProgress.active ? { progress: shortDramaProgress, collapsed: shortDramaGuideCollapsed, onToggle: () => setShortDramaGuideCollapsed((value) => !value) } : undefined;
+
+    const clearCanvas = useCallback(() => {
+        const drawingIds = nodesRef.current.flatMap((node) => (node.type === CanvasNodeType.Drawing && node.metadata?.drawingId ? [node.metadata.drawingId] : []));
+        if (drawingIds.length) {
+            void Promise.all(drawingIds.map((drawingId) => removeCanvasDrawing(projectId, drawingId))).catch(() => message.warning("画布已清空，但部分本地绘图缓存清理失败"));
+        }
+        setNodes([]);
+        setConnections([]);
+        setTextEditorNodeId(null);
+        setDrawingNodeId(null);
+        setInfoNodeId(null);
+        setSubtitleNodeId(null);
+        setCropNodeId(null);
+        setMaskEditNodeId(null);
+        setAnnotationNodeId(null);
+        setAngleNodeId(null);
+        setLightingNodeId(null);
+        setEmotionNodeId(null);
+        setPreviewNodeId(null);
+        setRunningNodeId(null);
+        setArtCritiqueNodeId(null);
+        deselectCanvas();
+        setClearConfirmOpen(false);
+        clearCanvasFiles();
+    }, [clearCanvasFiles, deselectCanvas, message, nodesRef, projectId, setEmotionNodeId]);
+
+    useCanvasKeyboard({
+        enabled: projectLoaded && !versions.preview,
+        nodesRef,
+        selectedNodeIdsRef,
+        selectedConnectionId,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setContextMenu,
+        setShortcutRequestNonce,
+        setInfoNodeId,
+        setCropNodeId,
+        setMaskEditNodeId,
+        setAnnotationNodeId,
+        saveCanvasProject,
+        zoomToActualSize,
+        fitCanvasContent,
+        fitCanvasSelection,
+        undoCanvas,
+        redoCanvas,
+        cancelSelectionBox,
+        copySelectedNodes,
+        pasteCopiedNodes,
+        restoreCopiedNodesFromText,
+        shouldPreferCopiedNodes,
+        pasteSystemClipboard,
+        deleteNodes,
+        deleteConnection,
+        deselectCanvas,
+        zoomCanvasIn,
+        zoomCanvasOut,
+        focusMode,
+        exitFocusMode,
+        toggleFocusMode,
+        onOpenSearch: () => setNodeSearchOpen(true),
+        beginBatchConnection: () => beginBatchConnectionMode(Array.from(selectedNodeIdsRef.current)),
+    });
+
+    const handleAssistantSessionsChange = useCallback((sessions: CanvasAssistantSession[], activeId: string | null) => {
+        chatSessionsRef.current = sessions;
+        activeChatIdRef.current = activeId;
+        setChatSessions(sessions);
+        setActiveChatId(activeId);
+    }, []);
+
+    const startTitleEditing = useCallback(() => {
+        setTitleDraft(currentProject?.title || "未命名画布");
+        setTitleEditing(true);
+    }, [currentProject?.title]);
+
+    const finishTitleEditing = useCallback(() => {
+        const nextTitle = titleDraft.trim();
+        if (nextTitle) renameCurrentProject(nextTitle);
+        setTitleEditing(false);
+    }, [renameCurrentProject, titleDraft]);
+
+    const pasteAtPosition = useCallback(
+        (position: Position) => {
+            if (shouldPreferCopiedNodes() && pasteCopiedNodes(position)) return;
+            void (async () => {
+                try {
+                    // 标记写入成功时仍优先系统图片，兼容截图和从外部应用复制的媒体。
+                    const handled = await pasteSystemClipboard(position);
+                    if (!handled) pasteCopiedNodes(position);
+                } catch {
+                    if (!pasteCopiedNodes(position)) message.warning("无法读取剪贴板内容");
+                }
+            })();
+        },
+        [message, pasteCopiedNodes, pasteSystemClipboard, shouldPreferCopiedNodes],
+    );
+
+    const copyingNodeContentRef = useRef(false);
+    const copyNodeContentToClipboard = useCallback(
+        async (node: CanvasNodeData | null) => {
+            if (copyingNodeContentRef.current) return;
+            copyingNodeContentRef.current = true;
+            releaseCopiedNodesPastePriority();
+            const content = node?.metadata?.content?.trim();
+            const resourceId = resourceIdFromStorageKey(node?.metadata?.storageKey);
+            const copySource = content || (node?.type === CanvasNodeType.Image && resourceId ? resourceFileUrl(resourceId) : "");
+            if (!node || !copySource) {
+                copyingNodeContentRef.current = false;
+                message.warning("没有可复制的内容");
+                return;
+            }
+
+            try {
+                if (node.type === CanvasNodeType.Image) {
+                    try {
+                        await copyImageToSystemClipboard(copySource, node.metadata?.storageKey);
+                        message.success("图片已复制到剪贴板");
+                        return;
+                    } catch (imageErr) {
+                        const fallbackUrl = new URL(copySource, window.location.href).toString();
+                        if (navigator.clipboard?.writeText) {
+                            await navigator.clipboard.writeText(fallbackUrl).catch(() => undefined);
+                            message.info("由于浏览器未获得焦点，已为您复制图片地址");
+                            return;
+                        }
+                        if (await copyToClipboard(fallbackUrl)) {
+                            message.info("由于浏览器未获得焦点，已为您复制图片地址");
+                            return;
+                        }
+                        throw imageErr;
+                    }
+                }
+
+                if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(copySource);
+                else if (!copyToClipboard(copySource)) throw new Error("当前浏览器不支持写入剪贴板");
+                message.success(node.type === CanvasNodeType.Text ? "文本已复制" : "内容链接已复制");
+            } catch (error) {
+                message.error(error instanceof Error ? error.message : "复制失败，请检查浏览器剪贴板权限");
+            } finally {
+                copyingNodeContentRef.current = false;
+            }
+        },
+        [message, releaseCopiedNodesPastePriority],
+    );
+
+    const copyNodeMediaUrlToClipboard = useCallback(
+        async (node: CanvasNodeData | null) => {
+            releaseCopiedNodesPastePriority();
+            try {
+                const storageKey = node?.metadata?.storageKey;
+                const content = node?.metadata?.content?.trim();
+                const resourceId = resourceIdFromStorageKey(storageKey);
+                const mediaPath = content && !content.startsWith("data:") && !content.startsWith("blob:") ? content : resourceId ? resourceFileUrl(resourceId) : "";
+                const mediaURL = mediaPath ? new URL(mediaPath, window.location.href).toString() : "";
+                if (!mediaURL) throw new Error("当前媒体只有本地内容，没有可复制的地址");
+                if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(mediaURL);
+                else if (!(await copyToClipboard(mediaURL))) throw new Error("当前浏览器不支持写入剪贴板");
+                message.success(node?.type === CanvasNodeType.Video ? "视频地址已复制" : "图片地址已复制");
+            } catch (error) {
+                message.error(error instanceof Error ? error.message : "媒体地址复制失败");
+            }
+        },
+        [message, releaseCopiedNodesPastePriority],
+    );
+
+    const uploadNodeImageToArkPrivateAsset = useCallback(
+        async (node: CanvasNodeData) => {
+            if (node.type !== CanvasNodeType.Image || !node.metadata?.content) {
+                message.warning("请选择一张可用图片后再上传");
+                return;
+            }
+            if (arkPrivateAssetUploadNodeId === node.id) return;
+            const feedbackKey = `ark-private-asset-${node.id}`;
+            setArkPrivateAssetUploadNodeId(node.id);
+            message.loading({ key: feedbackKey, content: "正在保存并上传到方舟素材库...", duration: 0 });
+            try {
+                let resourceID = resourceIdFromStorageKey(node.metadata.storageKey);
+                let persistedNode = node;
+                if (!resourceID) {
+                    const uploaded = await uploadImage(node.metadata.content);
+                    resourceID = resourceIdFromStorageKey(uploaded.storageKey);
+                    if (!resourceID) throw new Error("图片未能保存到系统素材库，请检查对象存储配置后重试");
+                    handleConfigNodeChange(node.id, imageMetadata(uploaded));
+                    persistedNode = { ...node, metadata: { ...node.metadata, ...imageMetadata(uploaded) } };
+                }
+                const asset = await ensureCanvasNodeAsset({ canvasId: projectId, domainProjectId: currentProject?.projectId, node: persistedNode, source: "canvas-manual" });
+                handleConfigNodeChange(node.id, { assetId: asset.assetId });
+                await syncResourceToArkPrivateAsset(resourceID);
+                message.success({ key: feedbackKey, content: "已同步到方舟素材库，Seedance 将自动复用该素材", duration: 4 });
+            } catch (error) {
+                message.error({ key: feedbackKey, content: error instanceof Error ? error.message : "上传到方舟素材库失败", duration: 5 });
+            } finally {
+                setArkPrivateAssetUploadNodeId((current) => (current === node.id ? null : current));
+            }
+        },
+        [arkPrivateAssetUploadNodeId, currentProject?.projectId, handleConfigNodeChange, message, projectId],
+    );
+
+    const confirmUploadNodeImageToArkPrivateAsset = useCallback(
+        (node: CanvasNodeData) => {
+            modal.confirm({
+                title: "上传到方舟素材库",
+                content: "仅可上传你拥有肖像、版权或其他合法使用权的图片。方舟审核通过后，Seedance 会使用受控素材标识生成视频。",
+                okText: "确认拥有使用权并上传",
+                cancelText: "取消",
+                onOk: () => uploadNodeImageToArkPrivateAsset(node),
+            });
+        },
+        [modal, uploadNodeImageToArkPrivateAsset],
+    );
+
+    const handleCanvasContextMenu = useCallback(
+        (event: ReactMouseEvent) => {
+            const target = event.target instanceof Element ? event.target : null;
+            if (target?.closest("[data-node-id],[data-connection-id]")) return;
+
+            event.preventDefault();
+            event.stopPropagation();
+            if (target?.closest("[data-canvas-no-zoom],.ant-modal,.ant-popover,.ant-dropdown")) {
+                setContextMenu(null);
+                return;
+            }
+
+            closeConnectionCreateMenu();
+            setContextMenu({ type: "canvas", x: event.clientX, y: event.clientY, position: screenToCanvas(event.clientX, event.clientY) });
+        },
+        [closeConnectionCreateMenu, screenToCanvas],
+    );
+
+    const handleNodeContextMenu = useCallback(
+        (event: ReactMouseEvent, id: string) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setSelectedNodeIds((current) => {
+                if (current.has(id) && current.size > 1) return current;
+                return new Set([id]);
+            });
+            setSelectedConnectionId(null);
+            closeConnectionCreateMenu();
+            setToolbarNodeId(null);
+            setDialogNodeId(null);
+            setContextMenu({ type: "node", x: event.clientX, y: event.clientY, nodeId: id });
+        },
+        [closeConnectionCreateMenu],
+    );
+
+    const handleGenerateNode = useCanvasGenerationExecutor({
+        projectId,
+        domainProjectId: currentProject?.projectId,
+        addedSkills,
+        assets,
+        nodesRef,
+        connectionsRef,
+        setNodes,
+        setConnections,
+        setSelectedNodeIds,
+        setSelectedConnectionId,
+        setDialogNodeId,
+        setRunningNodeId,
+        startGenerationRequest,
+        finishGenerationRequest,
+        bindGenerationTask,
+        applyGenerationTaskResult,
+    });
+    useEffect(() => {
+        generateNodeRef.current = handleGenerateNode;
+    }, [handleGenerateNode]);
+
+    const { enqueueGenerationBatch, retryFailedBatchItems, stopRemainingBatchItems } = useCanvasGenerationBatches({
+        projectId,
+        projectLoaded,
+        nodes,
+        nodesRef,
+        setNodes,
+        handleGenerateNode,
+    });
+
+    const { addReferenceColumn: addBatchReferenceColumn, addTextColumn: addBatchTextColumn, addRow: addBatchRow, fillRowsFromConnections, generateRows: generateBatchRows, moveReferenceCell: moveBatchReferenceCell, patchTable: patchBatchTable, removeRow: removeBatchRow, reorderReferenceColumns: reorderBatchReferenceColumns, syncRowsFromConnections, updateRow: updateBatchRow, batchGenDialogOpen, batchGenDialogRowCount, batchGenDialogConcurrency, batchGenDialogConfig, closeBatchGenDialog, confirmBatchGenDialog } = useCanvasBatchTable({
+        nodesRef,
+        connectionsRef,
+        setNodes,
+        setConnections,
+        setSelectedNodeIds,
+        enqueueGenerationBatch,
+    });
+
+    useEffect(() => {
+        if (!projectLoaded) return;
+        nodesRef.current.filter((node) => node.type === CanvasNodeType.BatchTable).forEach((node) => {
+            syncRowsFromConnections(node.id, true);
+        });
+    }, [connections, projectLoaded, syncRowsFromConnections]);
+
+    const handleUploadBatchReference = useCallback(async (tableNodeId: string, rowId: string, columnIndex: number, file: File) => {
+        const tableNode = nodesRef.current.find((item) => item.id === tableNodeId);
+        const table = tableNode?.metadata?.batchTable;
+        const row = table?.rows.find((item) => item.id === rowId);
+        if (!tableNode || !table || !row) return;
+        const rowIndex = table.rows.findIndex((item) => item.id === rowId);
+        const uploadedNodeId = await createFileNode(file, {
+            x: tableNode.position.x - 240,
+            y: tableNode.position.y + 170 + Math.max(0, rowIndex) * 220,
+        });
+        if (!uploadedNodeId) return;
+        const inputNodeIds = Array.from({ length: Math.max(batchReferenceColumns(table).length, columnIndex + 1) }, (_, index) => row.inputNodeIds[index] || "");
+        inputNodeIds[columnIndex] = uploadedNodeId;
+        updateBatchRow(tableNodeId, rowId, { inputNodeIds });
+        message.success(`已上传并填入参考图 ${columnIndex + 1}`);
+    }, [createFileNode, message, nodesRef, updateBatchRow]);
+
+    const { addScriptRow, createAndGenerateScriptVideos, createScriptActionBoards, createScriptImageNodes, createScriptVideoNodes, generateScriptImages, generateScriptRows, generateScriptVideos, removeScriptRow, replaceScriptRows, updateScriptRow } =
+        useCanvasStoryboard({
+            projectId,
+            addedSkills,
+            nodesRef,
+            connectionsRef,
+            setNodes,
+            setConnections,
+            setSelectedNodeIds,
+            enqueueGenerationBatch,
+        });
+
+    const handleRetryNode = useCanvasGenerationRetry({
+        projectId,
+        domainProjectId: currentProject?.projectId,
+        addedSkills,
+        assets,
+        nodesRef,
+        connectionsRef,
+        setNodes,
+        setRunningNodeId,
+        startGenerationRequest,
+        finishGenerationRequest,
+        bindGenerationTask,
+        applyGenerationTaskResult,
+    });
+    const reloadCanvasNodeResource = useCallback(
+        async (node: CanvasNodeData) => {
+            const taskId = node.metadata?.taskId;
+            if (!taskId || !node.metadata?.resourceReloadAvailable) return;
+            setNodes((current) => current.map((item) => (item.id === node.id ? { ...item, metadata: { ...item.metadata, status: "loading", taskStage: "正在重新加载资源", errorDetails: undefined } } : item)));
+            try {
+                const task = await queryGenerationTask(taskId);
+                if (task.status !== "succeeded") throw new Error("原生成任务尚未成功，无法重新加载资源");
+                await applyGenerationTaskResult(node.id, task);
+            } catch (error) {
+                setNodes((current) =>
+                    current.map((item) => (item.id === node.id ? { ...item, metadata: { ...item.metadata, status: "error", errorDetails: error instanceof Error ? error.message : "资源重新加载失败", resourceReloadAvailable: true } } : item)),
+                );
+            }
+        },
+        [applyGenerationTaskResult, setNodes],
+    );
+    const reconcileImageBatchRootNode = useCallback(
+        (rootId: string) => {
+            setNodes((current) => {
+                const root = current.find((item) => item.id === rootId);
+                if (!root) return current;
+                const reconciled = reconcileImageBatchRoot(root, current);
+                return current.map((item) => (item.id === root.id ? reconciled : item));
+            });
+        },
+        [setNodes],
+    );
+    const retryImageBatchChildren = useCallback(
+        (rootId: string, children: CanvasNodeData[]) => {
+            const childIds = children.map((child) => child.id);
+            setNodes((current) => markImageBatchRetrying(rootId, childIds, current));
+            void Promise.allSettled(
+                children.map(async (child) => {
+                    await handleRetryNode(child);
+                    setNodes((current) => current.map((item) => (item.id === child.id ? restoreUnsubmittedImageBatchChild(item, child) : item)));
+                }),
+            ).finally(() => reconcileImageBatchRootNode(rootId));
+        },
+        [handleRetryNode, reconcileImageBatchRootNode, setNodes],
+    );
+
+    const generateImageFromTextNode = useCallback(
+        (node: CanvasNodeData) => {
+            const prompt = (node.metadata?.content || node.metadata?.prompt || "").trim();
+            if (!prompt) {
+                message.warning("文本节点为空，无法生图");
+                return;
+            }
+            const sourceNode = nodesRef.current.find((item) => item.id === node.id);
+            if (!sourceNode) return;
+            const nodeSize = getNodeSpec(CanvasNodeType.Image);
+            const imageNode = createCanvasNode(
+                CanvasNodeType.Image,
+                {
+                    x: sourceNode.position.x + sourceNode.width + 96 + nodeSize.width / 2,
+                    y: sourceNode.position.y + sourceNode.height / 2,
+                },
+                {
+                    prompt: "@文本1",
+                    composerContent: "@文本1",
+                    model: effectiveConfig.imageModel || effectiveConfig.model,
+                    size: effectiveConfig.size,
+                    quality: effectiveConfig.quality,
+                    transparentBackground: effectiveConfig.transparentBackground,
+                    count: getGenerationCount(effectiveConfig.canvasImageCount || effectiveConfig.count),
+                },
+            );
+            imageNode.title = "图片生成";
+            const connection = { id: nanoid(), fromNodeId: sourceNode.id, toNodeId: imageNode.id };
+            const nextNodes = nodesRef.current.map((item) => (item.id === sourceNode.id ? { ...item, metadata: { ...item.metadata, content: prompt, richText: undefined, prompt, status: NODE_STATUS_SUCCESS } } : item)).concat(imageNode);
+            const nextConnections = [...connectionsRef.current, connection];
+            nodesRef.current = nextNodes;
+            connectionsRef.current = nextConnections;
+            setNodes(nextNodes);
+            setConnections(nextConnections);
+            setSelectedNodeIds(new Set([imageNode.id]));
+            setSelectedConnectionId(null);
+            setDialogNodeId(imageNode.id);
+        },
+        [effectiveConfig, message],
+    );
+
+    const renderCanvasNodePanel = useCallback(
+        (panelNode: CanvasNodeData) => {
+            if (panelNode.type === CanvasNodeType.Script || panelNode.type === CanvasNodeType.Drawing) return null;
+            return panelNode.type === CanvasNodeType.Config ? (
+                <CanvasConfigComposer
+                    value={panelNode.metadata?.composerContent ?? panelNode.metadata?.prompt ?? ""}
+                    inputs={configInputsById.get(panelNode.id) || []}
+                    skillReferences={skillMentionReferences}
+                    generationMode={panelNode.metadata?.generationMode}
+                    metadata={panelNode.metadata}
+                    workspaceMode={workspaceMode}
+                    onChange={(composerContent) => handleConfigNodeChange(panelNode.id, { composerContent })}
+                    onMetadataChange={(patch) => handleConfigNodeChange(panelNode.id, patch)}
+                    onClose={() => setDialogNodeId(null)}
+                />
+            ) : (
+                <CanvasNodePromptPanel
+                    projectId={projectId}
+                    node={panelNode}
+                    isRunning={isCanvasNodeGenerating(panelNode, runningNodeId)}
+                    mentionReferences={[
+                        ...(mentionReferencesByNodeId.get(panelNode.id) || EMPTY_RESOURCE_REFERENCES),
+                        ...buildCanvasResourceReferences(nodesRef.current, connectionsRef.current).filter((reference) => reference.kind === "text" && reference.nodeId !== panelNode.id && !(mentionReferencesByNodeId.get(panelNode.id) || []).some((active) => active.nodeId === reference.nodeId)),
+                    ]}
+                    onAddReference={(nodeId, reference) => {
+                        if (reference.active || reference.assetId || reference.kind === "skill") return reference;
+                        if (reference.kind !== "text" || !reference.nodeId || reference.nodeId === nodeId) return undefined;
+                        try {
+                            const linked = connectCanvasTextMention(nodesRef.current, connectionsRef.current, nodeId, reference.nodeId, nanoid());
+                            nodesRef.current = linked.nodes;
+                            connectionsRef.current = linked.connections;
+                            setNodes(linked.nodes);
+                            setConnections(linked.connections);
+                            return linked.reference;
+                        } catch (cause) {
+                            message.warning(cause instanceof Error ? cause.message : "文本引用失败");
+                            return undefined;
+                        }
+                    }}
+                    onPromptChange={handleNodePromptChange}
+                    onConfigChange={handleConfigNodeChange}
+                    onGenerate={handleGenerateNode}
+                    onRemoveReference={handleRemoveNodeReference}
+                    onReorderReferences={handleReorderNodeReferences}
+                    onReplaceReference={handleReplaceNodeReference}
+                    onReplaceReferenceFiles={handleReplaceNodeReferenceFiles}
+                    onClose={() => setDialogNodeId(null)}
+                    onNodeMouseDown={handleNodeMouseDown}
+                    workspaceMode={workspaceMode}
+                    onImageSettingsOpenChange={(open) => {
+                        setNodeImageSettingsOpen(open);
+                        if (open) setToolbarNodeId(null);
+                    }}
+                    onListGenerate={(nodeId, listPrompt) => {
+                        void handleListGenerate({
+                            sourceNodeId: nodeId,
+                            prompt: listPrompt,
+                            nodes: nodesRef.current,
+                            connections: connectionsRef.current,
+                            config: effectiveConfig,
+                            projectId,
+                            setNodes,
+                            setConnections,
+                            setRunningNodeId,
+                            setDialogNodeId,
+                        });
+                    }}
+                />
+            );
+        },
+        [
+            configInputsById,
+            handleConfigNodeChange,
+            handleGenerateNode,
+            handleNodePromptChange,
+            handleRemoveNodeReference,
+            handleReorderNodeReferences,
+            handleReplaceNodeReference,
+            handleReplaceNodeReferenceFiles,
+            mentionReferencesByNodeId,
+            message,
+            projectId,
+            runningNodeId,
+            skillMentionReferences,
+            workspaceMode,
+        ],
+    );
+
+    const renderCanvasNodeContent = useCallback(
+        (contentNode: CanvasNodeData) => {
+            if (contentNode.metadata?.workflowKind === "character" && contentNode.metadata.characterAssetId) {
+                return <CanvasCharacterReferenceNodeContent node={contentNode} />;
+            }
+            if (contentNode.metadata?.workflowKind === "styleboard" && !contentNode.metadata.content) {
+                return <CanvasStylePlaceholderNodeContent onChoose={() => setStylePickerOpen(true)} />;
+            }
+            if (contentNode.metadata?.workflowKind === "story_input") {
+                return <CanvasStoryInputNodeContent node={contentNode} onEdit={() => openStoryInput(contentNode.id)} />;
+            }
+            if (contentNode.type === CanvasNodeType.BatchTable) {
+                return (
+                    <CanvasBatchTableNodeContent
+                        node={contentNode}
+                        nodes={nodesRef.current}
+                        connections={connections}
+                        batch={visibleGenerationBatch(contentNode)}
+                        theme={theme}
+                        onPatchTable={(patch) => patchBatchTable(contentNode.id, patch)}
+                        onAddRow={() => addBatchRow(contentNode.id)}
+                        onRemoveRow={(rowId) => removeBatchRow(contentNode.id, rowId)}
+                        onUpdateRow={(rowId, patch) => updateBatchRow(contentNode.id, rowId, patch)}
+                        onFillRows={() => fillRowsFromConnections(contentNode.id)}
+                        onGenerate={(rowIds) => void generateBatchRows(contentNode.id, rowIds)}
+                        onRetryItem={(batchId, itemId) => retryFailedBatchItems(contentNode.id, batchId, itemId)}
+                        onAddReferenceColumn={() => addBatchReferenceColumn(contentNode.id)}
+                        onAddTextColumn={() => addBatchTextColumn(contentNode.id)}
+                        onReorderReferenceColumns={(fromColumnId, toColumnId) => reorderBatchReferenceColumns(contentNode.id, fromColumnId, toColumnId)}
+                        onMoveReferenceCell={(sourceRowId, sourceColumnIndex, targetRowId, targetColumnIndex) => moveBatchReferenceCell(contentNode.id, sourceRowId, sourceColumnIndex, targetRowId, targetColumnIndex)}
+                        onReplaceReference={replaceCanvasNodeMedia}
+                        onUploadReference={(rowId, columnIndex, file) => { void handleUploadBatchReference(contentNode.id, rowId, columnIndex, file); }}
+                        onConnectStart={(event, handleId) => handleConnectStart(event, contentNode.id, "target", handleId)}
+                        onConnectDrop={(event, handleId) => handleConnectDrop(event, contentNode.id, handleId)}
+                    />
+                );
+            }
+            if (contentNode.type === CanvasNodeType.Script) {
+                const pipeline = deriveStoryboardPipelineProgress(contentNode, nodesRef.current, connectionsRef.current);
+                return (
+                    <CanvasScriptNodeContent
+                        node={contentNode}
+                        nodes={nodesRef.current}
+                        batch={visibleGenerationBatch(contentNode)}
+                        pipeline={pipeline}
+                        scale={viewport.k}
+                        mentionReferences={mentionReferencesByNodeId.get(contentNode.id) || EMPTY_RESOURCE_REFERENCES}
+                        onOpen={() => setScriptEditorNodeId(contentNode.id)}
+                        onCreateImageNodes={() => createScriptImageNodes(contentNode.id)}
+                        onCreateVideoNodes={() => createScriptVideoNodes(contentNode.id)}
+                        onGenerateImages={(rowIds) => void generateScriptImages(contentNode.id, rowIds)}
+                        onGenerateVideos={(rowIds) => (contentNode.metadata?.storyboardVideoInputMode === "keyframe" ? void generateScriptVideos(contentNode.id, rowIds) : void createAndGenerateScriptVideos(contentNode.id, rowIds))}
+                        onVideoInputModeChange={(storyboardVideoInputMode) => handleConfigNodeChange(contentNode.id, { storyboardVideoInputMode })}
+                        onMergeVideos={() => void mergeVideosByIds(pipeline.successfulVideoNodeIds)}
+                        onCreateActionBoards={() => void createScriptActionBoards(contentNode.id)}
+                        onRetryBatch={(batchId) => retryFailedBatchItems(contentNode.id, batchId)}
+                        onRetryBatchItem={(batchId, itemId) => retryFailedBatchItems(contentNode.id, batchId, itemId)}
+                        onStopBatch={(batchId) => stopRemainingBatchItems(contentNode.id, batchId)}
+                        onAddRow={() => addScriptRow(contentNode.id)}
+                        onRemoveRow={(rowId) => removeScriptRow(contentNode.id, rowId)}
+                        onUpdateRow={(rowId, patch) => updateScriptRow(contentNode.id, rowId, patch)}
+                        onPromptChange={(composerContent) => handleConfigNodeChange(contentNode.id, { composerContent })}
+                        onGenerateScript={(prompt) => void generateScriptRows(contentNode.id, prompt)}
+                        onModelChange={(model) => handleConfigNodeChange(contentNode.id, { model })}
+                        onShotDurationChange={(duration: StoryboardShotDuration) => handleConfigNodeChange(contentNode.id, { storyboardShotDuration: duration })}
+                        onShotCountChange={(count: StoryboardShotCount) => handleConfigNodeChange(contentNode.id, { storyboardShotCount: count })}
+                        workspaceMode={workspaceMode}
+                        onComposerHeightChange={(height) => {
+                            if (contentNode.metadata?.storyboardComposerHeight === height) return;
+                            handleConfigNodeChange(contentNode.id, { storyboardComposerHeight: height });
+                            const minHeight = storyboardMinNodeHeight(height);
+                            if (contentNode.height < minHeight) handleNodeResize(contentNode.id, contentNode.width, minHeight);
+                        }}
+                        onConnectStart={(event, rowId, handleType) => handleConnectStart(event, contentNode.id, handleType, rowId === "context" ? "storyboard:context" : `row:${rowId}`)}
+                        onScrollTopChange={(scrollTop) => setScriptScrollTopById((current) => (current[contentNode.id] === scrollTop ? current : { ...current, [contentNode.id]: scrollTop }))}
+                    />
+                );
+            }
+            if (contentNode.metadata?.directorSceneId) {
+                return (
+                    <CanvasDirectorNodePanel
+                        node={contentNode}
+                        scene={currentProject?.directorScenes?.find((scene) => scene.id === contentNode.metadata?.directorSceneId) || null}
+                        readNodeContent={(nodeId) => (nodeId ? nodesRef.current.find((item) => item.id === nodeId)?.metadata?.content : undefined)}
+                        professional={workspaceMode === "professional"}
+                        onOpen={() => openDirectorWorkbench(contentNode.id)}
+                    />
+                );
+            }
+            return (
+                <CanvasConfigNodePanel
+                    node={contentNode}
+                    isRunning={isCanvasNodeGenerating(contentNode, runningNodeId)}
+                    inputSummary={getInputSummary(configInputsById.get(contentNode.id) || [])}
+                    onConfigChange={handleConfigNodeChange}
+                    onComposerToggle={() => setDialogNodeId((current) => (current === contentNode.id ? null : contentNode.id))}
+                    onGenerate={(nodeId) => {
+                        const target = nodesRef.current.find((item) => item.id === nodeId);
+                        void handleGenerateNode(nodeId, target?.metadata?.generationMode || "image", target?.metadata?.composerContent ?? target?.metadata?.prompt ?? "");
+                    }}
+                    workspaceMode={workspaceMode}
+                />
+            );
+        },
+        [
+            addBatchReferenceColumn,
+            addBatchTextColumn,
+            addBatchRow,
+            addScriptRow,
+            configInputsById,
+            connections,
+            createAndGenerateScriptVideos,
+            createScriptActionBoards,
+            createScriptImageNodes,
+            createScriptVideoNodes,
+            currentProject?.directorScenes,
+            fillRowsFromConnections,
+            generateBatchRows,
+            generateScriptImages,
+            generateScriptRows,
+            generateScriptVideos,
+            handleUploadBatchReference,
+            moveBatchReferenceCell,
+            handleConfigNodeChange,
+            handleConnectDrop,
+            handleConnectStart,
+            handleGenerateNode,
+            handleNodeResize,
+            mentionReferencesByNodeId,
+            mergeVideosByIds,
+            openDirectorWorkbench,
+            openStoryInput,
+            patchBatchTable,
+            removeBatchRow,
+            reorderBatchReferenceColumns,
+            replaceCanvasNodeMedia,
+            removeScriptRow,
+            retryFailedBatchItems,
+            runningNodeId,
+            stopRemainingBatchItems,
+            theme,
+            updateBatchRow,
+            updateScriptRow,
+            viewport.k,
+            workspaceMode,
+        ],
+    );
+
+    const handleCanvasNodeHoverStart = useCallback(
+        (nodeId: string) => {
+            if (nodeDraggingRef.current) return;
+            setHoveredNodeId(nodeId);
+            keepNodeToolbar(nodeId);
+        },
+        [keepNodeToolbar],
+    );
+    const handleCanvasNodeHoverEnd = useCallback(
+        (nodeId: string) => {
+            setHoveredNodeId((current) => (current === nodeId ? null : current));
+            hideNodeToolbar();
+        },
+        [hideNodeToolbar],
+    );
+    const retryCanvasNode = useCallback(
+        (node: CanvasNodeData) => {
+            if (node.type === CanvasNodeType.Script) {
+                const prompt = (node.metadata?.composerContent || node.metadata?.prompt || "").trim();
+                if (!prompt) {
+                    message.warning("分镜脚本缺少剧情内容，无法重试");
+                    return;
+                }
+                void generateScriptRows(node.id, prompt);
+                return;
+            }
+            if (node.type === CanvasNodeType.Image && node.metadata?.isBatchRoot) {
+                const failedChildren = failedImageBatchChildren(node, nodesRef.current);
+                if (!failedChildren.length) {
+                    message.info("当前批次没有需要重试的失败图片");
+                    return;
+                }
+                message.info(`正在重试 ${failedChildren.length} 个失败图片`);
+                retryImageBatchChildren(node.id, failedChildren);
+                return;
+            }
+            if (node.type === CanvasNodeType.Image && node.metadata?.batchRootId) {
+                retryImageBatchChildren(node.metadata.batchRootId, [node]);
+                return;
+            }
+            void handleRetryNode(node);
+        },
+        [generateScriptRows, handleRetryNode, message, nodesRef, retryImageBatchChildren],
+    );
+    const openCanvasNodeTaskDetails = useCallback(
+        (node: CanvasNodeData) => {
+            void openNodeTaskDetails(node);
+        },
+        [openNodeTaskDetails],
+    );
+    const openCanvasNodeVersions = useCallback((node: CanvasNodeData) => setVersionCompareRootId(node.metadata?.versionOfNodeId || node.id), []);
+    const viewCanvasNodeImage = useCallback((node: CanvasNodeData) => setPreviewNodeId(node.id), []);
+    const editCanvasDirector = useCallback((node: CanvasNodeData) => openDirectorWorkbench(node.id), [openDirectorWorkbench]);
+    const locateProjectStyleNode = useCallback(() => {
+        const styleNode = nodesRef.current.find((node) => node.type === CanvasNodeType.Text && node.metadata?.workflowKind === "styleboard");
+        if (!styleNode) {
+            message.info("项目画风节点正在同步，请稍后再试");
+            return;
+        }
+        focusCanvasNode(styleNode.id);
+    }, [focusCanvasNode, message, nodesRef]);
+    const freeformCreateCommands = useCanvasCreateCommands({
+        workspaceMode,
+        isProjectLinked: Boolean(shortDramaEnabled && currentProject?.projectId),
+        handlers: {
+            onAddText: () => createNode(CanvasNodeType.Text),
+            onAddImage: () => createNode(CanvasNodeType.Image),
+            onAddVideo: () => createNode(CanvasNodeType.Video),
+            onAddAudio: () => createNode(CanvasNodeType.Audio),
+            onAddScript: () => createNode(CanvasNodeType.Script),
+            onAddFrame: () => createNode(CanvasNodeType.Frame),
+            onAddFolder: createFolder,
+            onAddDrawing: () => createNode(CanvasNodeType.Drawing),
+            onAddWorkflow: () => createNode(CanvasNodeType.Config),
+            onAddExtensionNode: (type) => createNode(type),
+            onChooseStyle: () => setStylePickerOpen(true),
+            onOpenDirector: () => setDirectorTemplateRequest({}),
+            onUpload: () => handleUploadRequest(),
+            onOpenMyAssets: () => openCanvasAssetLibrary(),
+            onOpenProjectCharacters: () => openProjectAssets("character"),
+        },
+    });
+    const emptyStateKind = resolveCanvasEmptyStateKind({
+        nodeCount: nodes.length,
+        shortDramaEnabled,
+        isProjectLinked: Boolean(currentProject?.projectId),
+        starterMode: currentProject?.starterMode,
+    });
+    const emptyCanvasState =
+        emptyStateKind === "freeform" ? (
+            <CanvasFreeformEmptyState commands={freeformCreateCommands} />
+        ) : emptyStateKind === "linked" ? (
+            <CanvasLinkedProjectEmptyState
+                projectName={linkedProjectQuery.data?.project.name || currentProject?.title || "项目画布"}
+                hasChapter={Boolean(linkedProjectQuery.data?.units.length)}
+                onAddFirstChapter={() => {
+                    const first = linkedProjectQuery.data?.units.slice().sort((left, right) => left.position - right.position)[0];
+                    if (first) void handleProjectChapterInsert({ id: first.id, projectId: linkedProjectId, title: first.title, position: first.position });
+                }}
+                onOpenAssets={() => openProjectAssets()}
+                onAddText={() => createNode(CanvasNodeType.Text)}
+            />
+        ) : emptyStateKind === "guided" ? (
+            <CanvasShortDramaEmptyState
+                onCreatePipeline={createShortDramaPipeline}
+                onOpenAgent={() => {
+                    setCinematicAgentEntry(true);
+                    openAgent();
+                }}
+                onStartFreeform={() => updateProject(projectId, { starterMode: "freeform" })}
+                onUpload={() => handleUploadRequest()}
+                onAddText={() => createNode(CanvasNodeType.Text)}
+                onAddScript={() => createNode(CanvasNodeType.Script)}
+            />
+        ) : null;
+    if (!projectLoaded && loadError)
+        return (
+            <main className="flex h-full flex-col items-center justify-center gap-4">
+                <p role="alert">{loadError}</p>
+                <Button onClick={retryLoad}>重新加载</Button>
+                <Link to="/canvas">返回画布库</Link>
+            </main>
+        );
+    if (!projectLoaded) return <CanvasRefreshShell />;
+
+    return (
+        <>
+            <a
+                href="#canvas-main"
+                className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[var(--z-toast)] focus:rounded-md focus:border focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:shadow-lg"
+            >
+                跳转到画布主内容
+            </a>
+            <main id="canvas-main" tabIndex={-1} className="flex h-full min-h-0 overflow-hidden outline-none" style={{ background: resolvedCanvasAppearance.background, color: theme.node.text }}>
+                {!focusMode && !versions.preview && shortDramaEnabled && currentProject?.projectId ? (
+                    <CanvasProjectSidebar projectId={currentProject.projectId} detail={linkedProjectQuery.data} onAddChapter={handleProjectChapterInsert} onLocateStyle={locateProjectStyleNode} onOpenAssets={() => openProjectAssets()} />
+                ) : null}
+                <CanvasOverlayLayerProvider>
+                    <div className="canvas-editor-shell relative flex min-w-0 flex-1">
+                    <section data-canvas-editor inert={Boolean(versions.preview)} style={{ visibility: versions.preview ? "hidden" : undefined, opacity: versions.preview ? 0 : undefined }} className="relative min-w-0 flex-1 flex flex-col min-h-0 overflow-hidden">
+                        {!focusMode ? (
+                            <CanvasTopBar
+                                syncStatus={<CanvasSyncStatus projectId={projectId} onLoadLatest={reloadLatestCanvasProject} onOpenVersions={openVersions} />}
+                                versionsOpen={versions.open}
+                                onToggleVersions={() => { closeAgent(); setVersionCompareRootId(null); versions.toggle(); }}
+                                title={currentProject?.title || "未命名画布"}
+                                titleDraft={titleDraft}
+                                isTitleEditing={titleEditing}
+                                onTitleDraftChange={setTitleDraft}
+                                onStartTitleEditing={startTitleEditing}
+                                onFinishTitleEditing={finishTitleEditing}
+                                onCancelTitleEditing={() => setTitleEditing(false)}
+                                canUndo={historyState.canUndo}
+                                canRedo={historyState.canRedo}
+                                onCreateProject={createAndOpenProject}
+                                onDeleteProject={deleteCurrentProject}
+                                onSave={() => void saveCanvasProject()}
+                                onForceSave={confirmForceSaveCanvas}
+                                onImportImage={() => handleUploadRequest()}
+                                onImportLibTV={() => setLibTVImportOpen(true)}
+                                onImportTapNow={() => setTapNowImportOpen(true)}
+                                onUndo={undoCanvas}
+                                onRedo={redoCanvas}
+                                onShare={() => setShareModalOpen(true)}
+                                shortcutRequestNonce={shortcutRequestNonce}
+                                mediaPerformanceMode={mediaPerformanceMode}
+                                onMediaPerformanceModeChange={setMediaPerformanceMode}
+                                onOpenSearch={() => setNodeSearchOpen(true)}
+                                projectContext={
+                                    shortDramaEnabled && currentProject?.projectId
+                                        ? {
+                                              ...canvasContext,
+                                              projectId: currentProject.projectId,
+                                              projectName: linkedProjectQuery.data?.project.name || currentProject.title,
+                                          }
+                                        : undefined
+                                }
+                                onEnterFocusMode={enterFocusMode}
+                                shortDramaGuide={shortDramaGuide}
+                            />
+                        ) : null}
+
+                        <CanvasNodeSearchModal
+                            open={nodeSearchOpen}
+                            nodes={nodes}
+                            onClose={() => setNodeSearchOpen(false)}
+                            onFocus={(nodeId) => {
+                                const target = nodeById.get(nodeId);
+                                const parent = target?.parentId ? nodeById.get(target.parentId) : null;
+                                if (parent?.metadata?.frame?.collapsed) toggleFrameCollapsed(parent.id);
+                                const batchRoot = target?.metadata?.batchRootId ? nodeById.get(target.metadata.batchRootId) : null;
+                                if (batchRoot && !batchRoot.metadata?.imageBatchExpanded) toggleBatchExpanded(batchRoot.id);
+                                const selection = new Set([nodeId]);
+                                selectedNodeIdsRef.current = selection;
+                                setSelectedNodeIds(selection);
+                                setSelectedConnectionId(null);
+                                focusCanvasNode(nodeId);
+                            }}
+                        />
+
+                        {!focusMode && shortDramaGuide ? (
+                            <CanvasShortDramaGuide progress={shortDramaGuide.progress} collapsed={shortDramaGuide.collapsed} onToggle={shortDramaGuide.onToggle} onSkip={skipShortDramaGuide} onStepClick={activateShortDramaStep} />
+                        ) : null}
+
+                        <CanvasShareModal projectId={projectId} open={shareModalOpen} onClose={() => setShareModalOpen(false)} beforeCreate={saveCanvasProject} />
+                        <LibTVImportDialog open={libTVImportOpen} projectId={projectId} viewport={viewport} viewportSize={size} onClose={() => setLibTVImportOpen(false)} onApply={applyLibTVImport} />
+                        <TapNowImportDialog open={tapNowImportOpen} projectId={projectId} viewport={viewport} viewportSize={size} onClose={() => setTapNowImportOpen(false)} onApply={applyTapNowImport} />
+
+                        <CanvasStylePickerModal open={stylePickerOpen} value={activeStylePresetId} applying={styleApplying} onClose={() => setStylePickerOpen(false)} onSelect={selectCanvasStyle} />
+
+                        <CanvasDirectorTemplateModal open={Boolean(directorTemplateRequest)} onClose={() => setDirectorTemplateRequest(null)} onSelect={(templateId) => createDirectorShot(templateId, directorTemplateRequest?.position)} />
+
+                        <div className="relative flex min-h-0 min-w-0 flex-1">
+                            <div className="relative min-w-0 flex-1 overflow-hidden">
+                                <InfiniteCanvas
+                                    interactive={!versions.preview}
+                                    containerRef={containerRef}
+                                    viewport={viewport}
+                                    appearance={canvasAppearance}
+                                    backgroundMode={backgroundMode}
+                                    graphicsLayer={
+                                        <CanvasLeaferGraphicsLayer
+                                            containerRef={containerRef}
+                                            viewport={viewport}
+                                            theme={theme}
+                                            displayConnections={displayConnections}
+                                            selectedConnectionId={selectedConnectionId}
+                                            relatedConnectionIds={relatedHighlight.connectionIds}
+                                            scriptScrollTopById={scriptScrollTopById}
+                                            connectingParams={connectingParams}
+                                            batchConnectionPreview={batchConnectionPreview}
+                                            mouseWorld={mouseWorld}
+                                            connectionTargetNodeId={connectionTargetNodeId}
+                                            connectionTargetAnchorRatio={connectionTargetAnchorRatio}
+                                            nodeById={nodeById}
+                                            selectionBox={selectionBox}
+                                            selectedNodeBounds={selectedNodeBounds}
+                                            alignmentGuides={alignmentGuides}
+                                        />
+                                    }
+                                    onViewportChange={handleViewportChange}
+                                    onViewportPreviewChange={handleViewportPreviewChange}
+                                    onCanvasMouseDown={handleCanvasMouseDown}
+                                    boxSelectEnabled={canvasTool === "box-select"}
+                                    onCanvasDoubleClick={handleCanvasDoubleClick}
+                                    onCanvasDeselect={deselectCanvas}
+                                    onContextMenu={handleCanvasContextMenu}
+                                    onDrop={handleDrop}
+                                    onFileDragEnter={handleFileDragEnter}
+                                    onFileDragLeave={handleFileDragLeave}
+                                    onFileDragOver={handleFileDragOver}
+                                >
+                                    <CanvasNodeActionContext.Provider value={canvasNodeActions}>
+                                        <CanvasNodeGraphContext.Provider value={nodeGraphContext}>
+                                            <CanvasProjectWorldLayers
+                                                connectionApproach={connectionApproach}
+                                                projectId={projectId}
+                                                viewportScale={viewport.k}
+                                                connectionLayerBounds={connectionLayerBounds}
+                                                displayConnections={displayConnections}
+                                                selectedConnectionId={selectedConnectionId}
+                                                relatedConnectionIds={relatedHighlight.connectionIds}
+                                                scriptScrollTopById={scriptScrollTopById}
+                                                connectingParams={connectingParams}
+                                                mouseWorld={mouseWorld}
+                                                connectionTargetNodeId={connectionTargetNodeId}
+                                                nodeById={nodeById}
+                                                visibleNodes={visibleNodes}
+                                                nodeStackOrder={nodeStackOrder}
+                                                frameChildrenById={frameChildrenById}
+                                                linkedFolderPreviewNodesById={linkedFolderPreviewNodesById}
+                                                dragPreview={dragPreview}
+                                                selectedNodeIds={selectedNodeIds}
+                                                frameDropTargetId={frameDropTargetId}
+                                                relatedNodeIds={relatedHighlight.nodeIds}
+                                                activeNodeId={activeNodeId}
+                                                selectionBox={selectionBox}
+                                                batchChildCountById={batchChildCountById}
+                                                collapsingBatchIds={collapsingBatchIds}
+                                                openingBatchIds={openingBatchIds}
+                                                batchMotionById={batchMotionById}
+                                                showImageInfo={showImageInfo}
+                                                reduceMediaEffects={reduceMediaEffects}
+                                                resourceReferenceByNodeId={resourceReferenceByNodeId}
+                                                mentionReferencesByNodeId={mentionReferencesByNodeId}
+                                                mediaEffectsDisabledNodeId={emotionNodeId}
+                                                selectedNodeBounds={selectedNodeBounds}
+                                                batchSourceNodeIds={batchSourceNodeIds}
+                                                batchConnectionPreview={batchConnectionPreview}
+                                                isNodeDragging={isNodeDragging}
+                                                selectionBoundsElementRef={selectionBoundsElementRef}
+                                                renderCanvasNodeContent={renderCanvasNodeContent}
+                                                onConnectionSelect={(connectionId) => {
+                                                    setSelectedConnectionId(connectionId);
+                                                    setSelectedNodeIds(new Set());
+                                                    setContextMenu(null);
+                                                }}
+                                                onConnectionContextMenu={(event, connectionId) => {
+                                                    setSelectedConnectionId(connectionId);
+                                                    setSelectedNodeIds(new Set());
+                                                    closeConnectionCreateMenu();
+                                                    setContextMenu({ type: "connection", x: event.clientX, y: event.clientY, connectionId });
+                                                }}
+                                                onNodeMouseDown={handleNodeMouseDown}
+                                                onNodeHoverStart={handleCanvasNodeHoverStart}
+                                                onNodeHoverEnd={handleCanvasNodeHoverEnd}
+                                                onConnectStart={handleConnectStart}
+                                                onNodeResize={handleNodeResize}
+                                                onToggleFrame={handleFrameToggle}
+                                                onFolderStyleChange={handleFolderStyleChange}
+                                                onFolderThemeChange={handleFolderThemeChange}
+                                                onNodeTitleChange={handleNodeTitleChange}
+                                                onNodeContextMenu={handleNodeContextMenu}
+                                                onNodeContentChange={handleNodeContentChange}
+                                                onToggleBatch={toggleBatchExpanded}
+                                                onSetBatchPrimary={setBatchPrimary}
+                                                onRetry={retryCanvasNode}
+                                                onReloadResource={reloadCanvasNodeResource}
+                                                onOpenTaskDetails={openCanvasNodeTaskDetails}
+                                                onOpenVersions={openCanvasNodeVersions}
+                                                onViewImage={viewCanvasNodeImage}
+                                                onReplaceMedia={replaceCanvasNodeMedia}
+                                                onOpenTextEditor={openTextNodeEditor}
+                                                onOpenDirector={editCanvasDirector}
+                                                onOpenDrawing={openDrawingNode}
+                                                onStartBatchConnection={startBatchConnection}
+                                            />
+                                        </CanvasNodeGraphContext.Provider>
+                                    </CanvasNodeActionContext.Provider>
+                                </InfiniteCanvas>
+
+                                <CanvasActiveTaskPanel tasks={activeTasks} onCancelTask={cancelCanvasTask} topInset={focusMode ? "var(--space-3)" : "var(--canvas-topbar-offset)"} />
+
+                                {focusMode ? (
+                                    <CanvasFocusModeBar
+                                        syncStatus={<CanvasSyncStatus projectId={projectId} onLoadLatest={reloadLatestCanvasProject} onOpenVersions={openVersions} />}
+                                        versionsOpen={versions.open}
+                                        onToggleVersions={() => { closeAgent(); versions.toggle(); }}
+                                        dockRevealed={focusDockRevealed}
+                                        zoomPercent={viewport.k}
+                                        onToggleDock={() => setFocusDockRevealed((value) => !value)}
+                                        onExit={exitFocusMode}
+                                        onZoomIn={zoomCanvasIn}
+                                        onZoomOut={zoomCanvasOut}
+                                        onFit={fitCanvasContent}
+                                    />
+                                ) : null}
+
+                                <CanvasFileDropOverlay active={fileDropActive} theme={theme} />
+
+                                {emptyCanvasState}
+
+                                {!focusMode || focusDockRevealed ? (
+                                    <CanvasToolbar
+                                        selectedCount={selectedNodeIds.size}
+                                        workspaceMode={workspaceMode}
+                                        canvasTool={canvasTool}
+                                        onToolChange={setCanvasTool}
+                                        isProjectLinked={Boolean(shortDramaEnabled && currentProject?.projectId)}
+                                        canUndo={historyState.canUndo}
+                                        canRedo={historyState.canRedo}
+                                        appearance={canvasAppearance}
+                                        backgroundMode={backgroundMode}
+                                        showImageInfo={showImageInfo}
+                                        onAddImage={() => createNode(CanvasNodeType.Image)}
+                                        onAddVideo={() => createNode(CanvasNodeType.Video)}
+                                        onAddAudio={() => createNode(CanvasNodeType.Audio)}
+                                        onAddText={() => createNode(CanvasNodeType.Text)}
+                                        onChooseStyle={() => setStylePickerOpen(true)}
+                                        onAddScript={() => createNode(CanvasNodeType.Script)}
+                                        onAddFrame={() => createNode(CanvasNodeType.Frame)}
+                                        onAddFolder={createFolder}
+                                        onAddDrawing={() => createNode(CanvasNodeType.Drawing)}
+                                        onAddExtensionNode={(type) => createNode(type)}
+                                        onAddWorkflow={() => createNode(CanvasNodeType.Config)}
+                                        onOpenDirector={() => setDirectorTemplateRequest({})}
+                                        onUndo={undoCanvas}
+                                        onRedo={redoCanvas}
+                                        onUpload={() => handleUploadRequest()}
+                                        onDelete={() => deleteNodes(new Set(selectedNodeIds))}
+                                        onClear={() => setClearConfirmOpen(true)}
+                                        onDeselect={deselectCanvas}
+                                        onAppearanceChange={applyCanvasAppearance}
+                                        onSaveAppearanceDefault={saveCanvasAppearanceDefault}
+                                        onBackgroundModeChange={setBackgroundMode}
+                                        onShowImageInfoChange={setShowImageInfo}
+                                        onOpenMyAssets={() => {
+                                            openCanvasAssetLibrary();
+                                        }}
+                                        onOpenProjectCharacters={() => openProjectAssets("character")}
+                                    />
+                                ) : null}
+                            </div>
+
+                            <div className={versions.open ? "hidden" : "contents"}>
+                            <CanvasCloudAgentPanel canvasId={projectId} domainProjectId={currentProject?.projectId} nodeCount={nodes.length} references={agentMentionReferences} prefillPrompt={agentPrefillPrompt} open={assistantOpen} onOpen={openAgent} onCollapse={closeAgent} onFocusNode={(nodeId) => {
+                                if (!nodesRef.current.some((node) => node.id === nodeId)) { message.info("该节点已删除或尚未同步到画布"); return; }
+                                focusCanvasNode(nodeId);
+                            }} />
+                            </div>
+                        </div>
+
+                        {angleNode?.metadata?.content ? (
+                            <CanvasNodePanelOverlay
+                                node={angleNode}
+                                viewport={viewport}
+                                containerRef={containerRef}
+                                panelWidth={640}
+                                panelHeight={540}
+                                allowOverflow
+                                dragOffset={dragPreview?.nodeIds.has(angleNode.id) ? { x: dragPreview.x, y: dragPreview.y } : null}
+                                isDragging={isNodeDragging && Boolean(dragPreview?.nodeIds.has(angleNode.id))}
+                            >
+                                <CanvasNodeAnglePanel
+                                    dataUrl={angleNode.metadata.content}
+                                    onClose={() => setAngleNodeId(null)}
+                                    onConfirm={(params) => {
+                                        void generateAngleNode(angleNode, params);
+                                    }}
+                                />
+                            </CanvasNodePanelOverlay>
+                        ) : null}
+
+                        {lightingNode?.metadata?.content ? (
+                            <AppModal flush open centered title={null} closable={false} footer={null} width={720} onCancel={() => setLightingNodeId(null)}>
+                                <CanvasNodeLightingPanel
+                                    dataUrl={lightingNode.metadata.content}
+                                    onClose={() => setLightingNodeId(null)}
+                                    onConfirm={(options, prompt) => {
+                                        generateLightingNode(lightingNode, options, prompt);
+                                    }}
+                                />
+                            </AppModal>
+                        ) : null}
+
+                        {emotionNode?.metadata?.content && !isCanvasNodeMoving ? (
+                            <CanvasEmotionWorkspace
+                                node={emotionNode}
+                                viewport={viewport}
+                                containerRef={containerRef}
+                                dragOffset={dragPreview?.nodeIds.has(emotionNode.id) ? { x: dragPreview.x, y: dragPreview.y } : null}
+                                isDragging={isNodeDragging && Boolean(dragPreview?.nodeIds.has(emotionNode.id))}
+                                onClose={() => setEmotionNodeId(null)}
+                                onConfirm={(payload: CanvasImageEmotionPayload) => {
+                                    void generateEmotionNode(emotionNode, payload);
+                                }}
+                            />
+                        ) : null}
+
+                        {dialogNode &&
+                        !isCanvasImageSourceNode(dialogNode) &&
+                        !dialogNode.metadata?.fileUpload &&
+                        dialogNode.type !== CanvasNodeType.Script &&
+                        dialogNode.type !== CanvasNodeType.BatchTable &&
+                        dialogNode.type !== CanvasNodeType.Drawing &&
+                        dialogNode.type !== CanvasNodeType.Panorama &&
+                        !selectionBox &&
+                        !isCanvasNodeMoving ? (
+                            <CanvasNodePanelOverlay
+                                node={dialogNode}
+                                viewport={viewport}
+                                containerRef={containerRef}
+                                allowOverflow={dialogNode.type !== CanvasNodeType.Config}
+                                dragOffset={dragPreview?.nodeIds.has(dialogNode.id) ? { x: dragPreview.x, y: dragPreview.y } : null}
+                                isDragging={isNodeDragging && Boolean(dragPreview?.nodeIds.has(dialogNode.id))}
+                            >
+                                {renderCanvasNodePanel(dialogNode)}
+                            </CanvasNodePanelOverlay>
+                        ) : null}
+
+                        {pendingConnectionCreate ? (
+                            <CanvasConnectionCreateMenu
+                                pending={pendingConnectionCreate}
+                                viewport={viewport}
+                                viewportSize={size}
+                                containerRef={containerRef}
+                                canCreateDrawing={canCreateDrawingFromConnection}
+                                getDisabledReason={(type) => getConnectionCreateDisabledReason(type, pendingConnectionCreate)}
+                                onCreate={(type) => void createConnectedNode(type, pendingConnectionCreate)}
+                                onClose={cancelPendingConnectionCreate}
+                            />
+                        ) : null}
+
+                        {connectionReplaceHover ? (
+                            <div
+                                className="pointer-events-none fixed z-[var(--z-dialog-popover)] flex select-none items-center gap-1.5 rounded-full border border-white/15 bg-black/60 px-2.5 py-1 text-[11px] font-medium text-white/90 shadow-[0_8px_24px_rgba(0,0,0,0.4)] backdrop-blur-md transition-all"
+                                style={{
+                                    left: connectionReplaceHover.clientX + 14,
+                                    top: connectionReplaceHover.clientY + 14,
+                                    transform: "translateY(-50%)",
+                                }}
+                            >
+                                <ArrowLeftRight className="size-3 text-blue-400" />
+                                <span>松开替换</span>
+                                <span className="rounded bg-white/15 px-1.5 py-0.5 text-[10px] font-semibold text-blue-200">@{connectionReplaceHover.referenceLabel}</span>
+                            </div>
+                        ) : null}
+
+                        {selectedNodeBounds && !selectionBox && !isCanvasNodeMoving ? (
+                            <CanvasProjectSelectionToolbar
+                                anchorRef={selectionBoundsElementRef}
+                                containerRef={containerRef}
+                                count={selectedNodeBounds.count}
+                                selectedVideoCount={selectedVideoNodes.length}
+                                mergingVideos={Boolean(mergeVideoProgress)}
+                                onAlign={alignSelectedNodes}
+                                onArrange={arrangeSelectedNodes}
+                                onCreateStoryboard={createStoryboardGroup}
+                                onCreateReferenceGroup={createReferenceGroup}
+                                onBatchConnect={() => beginBatchConnectionMode(Array.from(selectedNodeIds))}
+                                onMergeVideos={() => void mergeSelectedVideos()}
+                                onSendSelectionToAgent={() => sendSelectionToAgent()}
+                            />
+                        ) : null}
+
+                        {uploadStatus ? <CanvasUploadStatusToast status={uploadStatus} theme={theme} /> : null}
+                        {mergeVideoProgress ? <CanvasMergeStatusToast progress={mergeVideoProgress} theme={theme} /> : null}
+                        {lastAgentChange ? (
+                            <CanvasOperationChangeToast
+                                change={lastAgentChange}
+                                theme={theme}
+                                onView={viewLastAgentChange}
+                                onUndo={() => {
+                                    undoAgentOps();
+                                }}
+                                onClose={dismissLastAgentChange}
+                            />
+                        ) : null}
+
+                        <CanvasNodeToolbar
+                            node={isCanvasNodeMoving || nodeImageSettingsOpen || emotionNodeId || angleNodeId ? null : toolbarNode}
+                            workspaceMode={workspaceMode}
+                            viewport={viewport}
+                            containerRef={containerRef}
+                            onKeep={keepNodeToolbar}
+                            onLeave={hideNodeToolbar}
+                            onInfo={(node) => (node.metadata?.workflowKind === "character" && node.metadata.characterAssetId ? openTextNodeEditor(node) : setInfoNodeId(node.id))}
+                            onEditText={openTextNodeEditor}
+                            onDecreaseFont={(node) => handleFontSizeChange(node.id, Math.max(10, (node.metadata?.fontSize || 14) - 2))}
+                            onIncreaseFont={(node) => handleFontSizeChange(node.id, Math.min(32, (node.metadata?.fontSize || 14) + 2))}
+                            onToggleDialog={(node) => setDialogNodeId((current) => (current === node.id ? null : node.id))}
+                            onGenerateImage={generateImageFromTextNode}
+                            onUpload={(node) => handleUploadRequest(node.id)}
+                            onDownload={downloadNodeImage}
+                            onSaveAsset={(node) => void saveNodeAsset(node)}
+                            onAnnotate={(node) => setAnnotationNodeId(node.id)}
+                            onAnnotationEdit={openAnnotationEditNode}
+                            onMaskEdit={(node) => setMaskEditNodeId(node.id)}
+                            onImageEdit={openImageEditNode}
+                            onRemoveBackground={openBackgroundRemoval}
+                            onLayerDecomposition={openLayerDecomposition}
+                            onTextEdit={openTextEditNode}
+                            onEmotion={(node) => {
+                                setDialogNodeId(null);
+                                setEmotionNodeId((current) => (current === node.id ? null : node.id));
+                            }}
+                            onPortraitTexture={openPortraitTextureEditor}
+                            onCrop={(node) => setCropNodeId(node.id)}
+                            onSplit={(node, params) => void splitImageNode(node, params)}
+                            onUpscale={(node) => setUpscaleNodeId(node.id)}
+                            onSuperResolve={(node) => setSuperResolveNodeId(node.id)}
+                            onAngle={(node) => {
+                                setDialogNodeId(null);
+                                setAngleNodeId((current) => (current === node.id ? null : node.id));
+                            }}
+                            onLighting={(node) => {
+                                setDialogNodeId(null);
+                                setLightingNodeId((current) => (current === node.id ? null : node.id));
+                            }}
+                            onPanorama={openPanoramaConfig}
+                            onViewImage={(node) => setPreviewNodeId(node.id)}
+                            onExtractVideoFrames={openVideoFrameExtractor}
+                            onExtractAudioFromVideo={(node) => void extractAudioFromVideo(node)}
+                            onTrimVideoSegments={openVideoSegmentExtractor}
+                            onSubtitles={(node) => setSubtitleNodeId(node.id)}
+                            onTimeline={(node) => setTimelineNodeId(node.id)}
+                            extractingVideoFrames={toolbarNode?.id === extractingVideoFramesNodeId}
+                            extractingAudio={segmentRunningMode === "audio"}
+                            trimmingVideo={segmentRunningMode === "video"}
+                            onReversePrompt={createImageReversePromptNodes}
+                            onRetry={retryCanvasNode}
+                            onToggleFreeResize={(node) => toggleNodeFreeResize(node.id)}
+                            onToggleLocked={(node) => toggleNodeLocked(node.id)}
+                            onDelete={(node) => deleteNodes(new Set([node.id]))}
+                        />
+
+{isMiniMapOpen && !focusMode ? <Minimap nodes={nodes} viewport={viewport} viewportSize={size} canvasContainerRef={containerRef} onViewportPreviewChange={previewViewport} onViewportChange={handleViewportChange} /> : null}
+
+                        {!focusMode ? (
+                            <CanvasOverlayLayerContainer
+                                overlayId="asset-tray"
+                                fallbackZIndex="var(--z-panel)"
+                                className="absolute bottom-[calc(var(--canvas-inset-y)+var(--space-16))] left-[var(--canvas-inset-x)] flex items-end gap-2 lg:bottom-[var(--canvas-inset-y)]"
+                                onMouseDown={(event) => event.stopPropagation()}
+                                onPointerDown={(event) => event.stopPropagation()}
+                                onWheel={(event) => event.stopPropagation()}
+                            >
+                                <CanvasZoomControls
+                                    scale={viewport.k}
+                                    containerRef={containerRef}
+                                    onScaleChange={setZoomScale}
+                                    onFitContent={fitCanvasContent}
+                                    onAutoArrange={autoArrangeCanvasNodes}
+                                    isMiniMapOpen={isMiniMapOpen}
+                                    onToggleMiniMap={() => setIsMiniMapOpen((value) => !value)}
+                                    onOpenShortcuts={() => setShortcutRequestNonce((value) => value + 1)}
+                                />
+                                <CanvasAssetTray
+                                    assetImages={imageAssets}
+                                    canvasImages={canvasImageNodes}
+                                    showLibrary={!currentProject?.projectId}
+                                    activeNodeId={selectedNodeIds.size === 1 ? Array.from(selectedNodeIds)[0] : null}
+                                    onInsertAssetImage={(asset) => void createImageAssetNode(asset)}
+                                    onFocusCanvasImage={focusCanvasImageNode}
+                                />
+                            </CanvasOverlayLayerContainer>
+                        ) : null}
+
+                        <CanvasProjectContextMenu
+                            menu={contextMenu}
+                            node={contextMenuNode}
+                            workspaceMode={workspaceMode}
+                            isProjectLinked={Boolean(currentProject?.projectId)}
+                            canUndo={historyState.canUndo}
+                            canRedo={historyState.canRedo}
+                            canPaste={hasCopiedNodes || Boolean(navigator.clipboard)}
+                            selectedCount={selectedNodeIds.size}
+                            screenToCanvas={screenToCanvas}
+                            onClose={() => setContextMenu(null)}
+                            onAddNode={(type, position) => createNode(type, position)}
+                            onAddFolder={createFolder}
+                            onChooseStyle={() => setStylePickerOpen(true)}
+                            onOpenDirector={(position) => setDirectorTemplateRequest({ position })}
+                            onUpload={(nodeId, position) => handleUploadRequest(nodeId, position)}
+                            onOpenAssets={openCanvasAssetLibrary}
+                            onOpenProjectCharacters={(position) => openProjectAssets("character", position)}
+                            onUndo={undoCanvas}
+                            onRedo={redoCanvas}
+                            onPaste={pasteAtPosition}
+                            onCopyNode={(nodeId) => copyNodesToClipboard(new Set([nodeId]))}
+                            onCreateGenerationCopy={(nodeId) => duplicateNode(nodeId, "copy")}
+                            onDuplicate={duplicateNode}
+                            onDeleteNode={(nodeId) => deleteNodes(new Set([nodeId]))}
+                            onDeleteConnection={deleteConnection}
+                            onSaveAsset={(node) => {
+                                void saveNodeAsset(node);
+                            }}
+                            onViewMedia={(node) => setPreviewNodeId(node.id)}
+                            onEditText={openTextNodeEditor}
+                            onOpenDrawing={openDrawingNode}
+                            onGenerateImage={generateImageFromTextNode}
+                            onCopyContent={(node) => {
+                                void copyNodeContentToClipboard(node);
+                            }}
+                            onCopyMediaUrl={(node) => {
+                                void copyNodeMediaUrlToClipboard(node);
+                            }}
+                            onUploadToArkPrivateAsset={confirmUploadNodeImageToArkPrivateAsset}
+                            onSetAssetCategory={(nodeId, assetCategory) => handleConfigNodeChange(nodeId, { assetCategory })}
+                            onToggleFrame={(node) => handleFrameToggle(node.id)}
+                            onSpreadSelection={spreadSelectedNodes}
+                            onCopySelection={copySelectedNodes}
+                            onDeleteSelection={() => deleteNodes(selectedNodeIds)}
+                            onSendToAgent={() => sendSelectionToAgent(contextMenu?.type === "node" && selectedNodeIds.size <= 1 ? contextMenu.nodeId : undefined)}
+                        />
+
+                        <CanvasUploadModal open={uploadModalOpen} onClose={closeUploadModal} onUpload={handleUploadFiles} />
+
+                        <input ref={imageInputRef} type="file" accept="image/*,video/*,audio/mpeg,audio/wav,audio/x-wav,.mp3,.wav" className="hidden" onChange={handleImageInputChange} />
+
+                        <CanvasNodeInfoModal node={infoNode} open={Boolean(infoNode)} onClose={() => setInfoNodeId(null)} onMetadataChange={handleConfigNodeChange} />
+
+                        {subtitleNode ? (
+                            <CanvasSubtitleDialog
+                                node={subtitleNode}
+                                open={Boolean(subtitleNode)}
+                                projectId={projectId}
+                                config={effectiveConfig}
+                                onClose={() => setSubtitleNodeId(null)}
+                                onSave={(nodeId, patch) => {
+                                    handleConfigNodeChange(nodeId, patch);
+                                    const currentTimeline = currentProject?.timeline;
+                                    if (currentTimeline) {
+                                        const next = syncNodeSubtitlesToTimeline(currentTimeline, nodeId, patch.subtitleEntries || []);
+                                        if (next !== currentTimeline) updateProject(projectId, { timeline: next });
+                                    }
+                                }}
+                            />
+                        ) : null}
+
+                        {frameNode ? <CanvasVideoFrameDialog node={frameNode} open={Boolean(frameNode)} onClose={closeFrameDialog} onConfirm={(params) => void extractVideoFrames(frameNode, params)} /> : null}
+
+                        {segmentNode && segmentDialogMode ? (
+                            <CanvasVideoSegmentDialog
+                                node={segmentNode}
+                                nodes={nodes}
+                                connections={connections}
+                                open={Boolean(segmentNode && segmentDialogMode)}
+                                mode={segmentDialogMode}
+                                config={effectiveConfig}
+                                timeline={currentProject?.timeline || null}
+                                onClose={closeSegmentDialog}
+                                onConfirm={(params) => void handleSegmentConfirm(segmentNode, params)}
+                            />
+                        ) : null}
+
+                        {timelineNode ? (
+                            <CanvasTimelineDialog
+                                node={timelineNode}
+                                open={Boolean(timelineNode)}
+                                nodes={nodes}
+                                timeline={currentProject?.timeline || null}
+                                onClose={() => setTimelineNodeId(null)}
+                                onOpenSubtitleDialog={(subNodeId) => {
+                                    setTimelineNodeId(null);
+                                    setSubtitleNodeId(subNodeId);
+                                }}
+                                onSave={(next) => updateProject(projectId, { timeline: next })}
+                                onSaveSubtitles={(subNodeId, entries) =>
+                                    handleConfigNodeChange(subNodeId, {
+                                        subtitleEntries: entries,
+                                        ...(entries.length ? {} : { subtitleHighlights: [] }),
+                                        subtitleUpdatedAt: new Date().toISOString(),
+                                    })
+                                }
+                                onOpenAssetLibrary={openTimelineAssetLibrary}
+                                onOpenProjectAssets={() => openProjectAssets("all", undefined, "timeline")}
+                                onUploadLocalFiles={uploadTimelineMedia}
+                                addNodeToTimelineRef={timelineAddNodeRef}
+                                addMediaToTimelineRef={timelineMediaAddRef}
+                                onCreateAssembledNode={createVideoNodeFromBlob}
+                            />
+                        ) : null}
+
+                        <CanvasCharacterReferenceModal node={characterReferenceNode} open={Boolean(characterReferenceNode)} onClose={() => setCharacterReferenceNodeId(null)} />
+
+                        <CanvasTextEditorModal
+                            node={textEditorNode}
+                            open={Boolean(textEditorNode)}
+                            onClose={() => setTextEditorNodeId(null)}
+                            onSave={(nodeId, title, content, richText) => {
+                                setNodes((current) => current.map((node) => (node.id === nodeId ? { ...node, title, metadata: { ...node.metadata, content, richText } } : node)));
+                            }}
+                        />
+
+                        {drawingNode ? (
+                            <Suspense
+                                fallback={
+                                    <div className="fixed inset-0 z-[var(--z-toast)] grid place-items-center px-5" style={{ background: theme.canvas.background, color: theme.node.text }}>
+                                        <WorkspaceState icon="loading" title="正在加载绘图编辑器" description="正在准备绘图画布。" />
+                                    </div>
+                                }
+                            >
+                                <CanvasDrawingEditorModal
+                                    node={drawingNode}
+                                    projectId={projectId}
+                                    open={Boolean(drawingNode)}
+                                    onClose={() => setDrawingNodeId(null)}
+                                    onSaved={(nodeId, summary) => {
+                                        setNodes((current) =>
+                                            current.map((node) =>
+                                                node.id === nodeId
+                                                    ? {
+                                                          ...node,
+                                                          metadata: {
+                                                              ...node.metadata,
+                                                              drawingEngine: summary.engine,
+                                                              drawingRevision: summary.revision,
+                                                              drawingUpdatedAt: summary.updatedAt,
+                                                              drawingShapeCount: summary.shapeCount,
+                                                              drawingPageCount: summary.pageCount,
+                                                          },
+                                                      }
+                                                    : node,
+                                            ),
+                                        );
+                                        message.success("绘图已保存");
+                                    }}
+                                />
+                            </Suspense>
+                        ) : null}
+
+                        <AiArtCritiqueModal
+                            startRequestId={artCritiqueStartRequest && artCritiqueStartRequest.nodeId === artCritiqueNode?.id ? artCritiqueStartRequest.id : undefined}
+                            restartRequested={artCritiqueStartRequest?.nodeId === artCritiqueNode?.id && artCritiqueStartRequest?.restart}
+                            onRunningChange={(running) => {
+                                artCritiqueRunningRef.current = running;
+                            }}
+                            node={artCritiqueNode}
+                            upstreamNodes={artCritiqueInputs}
+                            open={Boolean(artCritiqueNode)}
+                            onClose={() => setArtCritiqueNodeId(null)}
+                            onUpdateState={(nodeId, state) => handleConfigNodeChange(nodeId, { artCritique: state })}
+                        />
+
+                        <CanvasPanoramaConfigModal
+                            open={Boolean(panoramaConfigNodeId)}
+                            onCancel={() => setPanoramaConfigNodeId(null)}
+                            onConfirm={(composedPrompt, config) => {
+                                const node = nodes.find((n) => n.id === panoramaConfigNodeId);
+                                if (node) {
+                                    createPanoramaViewerWithConfig(node, composedPrompt, config);
+                                }
+                            }}
+                            onCopyPrompt={(prompt) => {
+                                void navigator.clipboard?.writeText(prompt).then(() => message.success("已复制全景提示词"));
+                            }}
+                            previewImageUrl={panoramaConfigNodeId ? nodes.find((n) => n.id === panoramaConfigNodeId)?.metadata?.content : undefined}
+                            nodes={nodes}
+                        />
+
+                        <CanvasScriptEditor
+                            node={activeScriptNode}
+                            nodes={nodes}
+                            open={Boolean(activeScriptNode)}
+                            onClose={() => setScriptEditorNodeId(null)}
+                            onUpdateRows={(rows) => activeScriptNode && replaceScriptRows(activeScriptNode.id, rows)}
+                            onVisibleColumnsChange={(visibleColumns: StoryboardColumn[]) => {
+                                if (!activeScriptNode || !visibleColumns.length) return;
+                                setNodes((prev) =>
+                                    prev.map((node) =>
+                                        node.id === activeScriptNode.id
+                                            ? { ...node, metadata: { ...node.metadata, storyboard: { rows: node.metadata?.storyboard?.rows || [], visibleColumns, referenceNodeIds: node.metadata?.storyboard?.referenceNodeIds || [] } } }
+                                            : node,
+                                    ),
+                                );
+                            }}
+                            onGenerateImages={(rowIds) => activeScriptNode && void generateScriptImages(activeScriptNode.id, rowIds)}
+                            onGenerateVideos={(rowIds) => {
+                                if (!activeScriptNode) return;
+                                if (activeScriptNode.metadata?.storyboardVideoInputMode === "keyframe") void generateScriptVideos(activeScriptNode.id, rowIds);
+                                else void createAndGenerateScriptVideos(activeScriptNode.id, rowIds);
+                            }}
+                            onVideoInputModeChange={(storyboardVideoInputMode) => activeScriptNode && handleConfigNodeChange(activeScriptNode.id, { storyboardVideoInputMode })}
+                        />
+
+                        {directorNodeId && activeDirectorScene ? (
+                            <Suspense
+                                fallback={
+                                    <div className="fixed inset-0 z-[var(--z-toast)] grid place-items-center px-5" style={{ background: theme.canvas.background, color: theme.node.text }}>
+                                        <WorkspaceState icon="loading" title="正在加载 3D 导演台" description="准备场景、镜头与空间控制。" />
+                                    </div>
+                                }
+                            >
+                                <CanvasDirectorWorkbench
+                                    open
+                                    scene={activeDirectorScene}
+                                    imageNodes={nodes.filter((node) => node.type === CanvasNodeType.Image && Boolean(node.metadata?.content))}
+                                    onClose={() => setDirectorNodeId(null)}
+                                    onChange={saveDirectorScene}
+                                    onApply={applyDirectorOutput}
+                                    onDeleteImageNode={(nodeId) => deleteNodes(new Set([nodeId]))}
+                                    onFlush={() => flushCanvasStorePersistence()}
+                                    onboardingScope={directorOnboardingScope}
+                                />
+                            </Suspense>
+                        ) : null}
+
+                        <CanvasVersionCompareModal
+                            open={Boolean(versionCompareRootId)}
+                            versions={versionCompareNodes}
+                            onClose={() => setVersionCompareRootId(null)}
+                            onSetPrimary={setPrimaryVersion}
+                            onFocus={(nodeId) => {
+                                setVersionCompareRootId(null);
+                                focusCanvasNode(nodeId);
+                            }}
+                        />
+
+                        <CanvasProjectMediaDialogs
+                            cropNode={cropNode}
+                            annotationNode={annotationNode}
+                            annotationEditNode={annotationEditNodeId ? nodeById.get(annotationEditNodeId) || null : null}
+                            maskEditNode={maskEditNode}
+                            imageEditNode={imageEditNode}
+                            layerDecompositionNode={layerDecompositionNodeId ? nodeById.get(layerDecompositionNodeId) || null : null}
+                            textEditNode={textEditNodeId ? nodeById.get(textEditNodeId) || null : null}
+                            imageEditPreset={imageEditPreset}
+                            upscaleNode={upscaleNode}
+                            onCloseCrop={() => setCropNodeId(null)}
+                            onCloseAnnotation={() => setAnnotationNodeId(null)}
+                            onCloseAnnotationEdit={() => setAnnotationEditNodeId(null)}
+                            onCloseMaskEdit={() => setMaskEditNodeId(null)}
+                            onCloseImageEdit={() => { setImageEditNodeId(null); setImageEditPreset(null); }}
+                            onCloseLayerDecomposition={() => setLayerDecompositionNodeId(null)}
+                            onCloseTextEdit={() => setTextEditNodeId(null)}
+                            onCloseUpscale={() => setUpscaleNodeId(null)}
+                            onCrop={(node, crop) => void cropImageNode(node, crop)}
+                            onAnnotate={(node, dataUrl) => void saveAnnotatedImageNode(node, dataUrl)}
+                            onAnnotationEdit={(node, payload) => void editAnnotatedImageNode(node, payload)}
+                            onMaskEdit={(node, payload) => void maskEditImageNode(node, payload)}
+                            onImageEdit={(node, payload) => void editImageNode(node, payload)}
+                            onLayerDecomposition={(node, payload) => void decomposeImageLayers(node, payload)}
+                            onDetectText={() => {
+                                const node = textEditNodeId ? nodeById.get(textEditNodeId) : null;
+                                return node ? detectImageText(node) : Promise.reject(new Error("图片节点已不存在"));
+                            }}
+                            onTextEdit={(node, payload) => void editTextImageNode(node, payload)}
+                            onUpscale={(node, params) => void upscaleImageNode(node, params)}
+                            config={effectiveConfig}
+                        />
+
+                        <BatchGenerationSettingsDialog
+                            open={batchGenDialogOpen}
+                            config={batchGenDialogConfig}
+                            rowCount={batchGenDialogRowCount}
+                            concurrency={batchGenDialogConcurrency}
+                            onClose={closeBatchGenDialog}
+                            onConfirm={confirmBatchGenDialog}
+                        />
+
+                        <CanvasProjectStatusDialogs
+                            theme={theme}
+                            task={taskDetail}
+                            taskLogs={taskDetailLogs}
+                            taskLoading={taskDetailLoading}
+                            onCloseTask={() => setTaskDetail(null)}
+                            onCancelTask={cancelCanvasTask}
+                            superResolveNode={superResolveNode}
+                            onCloseSuperResolve={() => setSuperResolveNodeId(null)}
+                            previewNode={previewNode}
+                            onClosePreview={() => setPreviewNodeId(null)}
+                            clearConfirmOpen={clearConfirmOpen}
+                            onCancelClear={() => setClearConfirmOpen(false)}
+                            onConfirmClear={clearCanvas}
+                        />
+
+                        <AssetPickerModal open={assetPickerOpen} multiple={assetInsertScope === "canvas"} onInsert={handleLibraryAssetsInsert} onClose={closeAssetPicker} />
+                        <CanvasProjectAssetModal
+                            open={projectAssetOpen}
+                            detail={linkedProjectQuery.data}
+                            initialCategory={projectAssetInitialCategory}
+                            initialFolderId={projectAssetInitialFolderId}
+                            onClose={closeProjectAssets}
+                            onInsert={handleTimelineProjectAssetsInsert}
+                            onInsertFolder={projectAssetScope === "canvas" ? handleProjectFolderInsert : undefined}
+                        />
+                    </section>
+                    {versions.preview ? <CanvasVersionPreview key={versions.preview.key} preview={versions.preview} onReturn={versions.returnToCurrent} onShowVersions={versions.show} /> : null}
+                    </div>
+                </CanvasOverlayLayerProvider>
+                <CanvasVersionHistory history={versions} />
+            </main>
+        </>
+    );
+}
diff --git a/web/src/types/canvas.ts b/web/src/types/canvas.ts
index 89e3f36e6..ac209febe 100644
--- a/web/src/types/canvas.ts
+++ b/web/src/types/canvas.ts
@@ -1,584 +1,592 @@
-import type { CanvasColorGrade } from "@/lib/canvas/canvas-color-grade";
-import type { MediaConversionNodeState } from "@/lib/media-conversion/contracts";
-import type { AssetCategory } from "@/lib/asset-category";
-import type { PortraitTextureSettings } from "@/lib/canvas/canvas-portrait-texture";
-import type { StyleExecutionPlan } from "@/lib/canvas/style-profile";
-import type { ArtCritiqueNodeState } from "@/lib/art-critique/contracts";
-import type { CameraControlOptions } from "@/lib/canvas/camera-prompt-library";
-import type { SrtEntry, SubtitleHighlight, SubtitleStyle } from "@/types/timeline";
-
-export type Position = {
-    x: number;
-    y: number;
-};
-
-export type ViewportTransform = {
-    x: number;
-    y: number;
-    k: number;
-};
-
-export enum CanvasNodeType {
-    Image = "image",
-    Text = "text",
-    Drawing = "drawing",
-    Script = "script",
-    Skill = "skill",
-    Config = "config",
-    Video = "video",
-    Audio = "audio",
-    Frame = "frame",
-    Markdown = "markdown",
-    Svg = "svg",
-    Html = "html",
-    Panorama = "panorama",
-    Compare = "compare",
-    Chart = "chart",
-    ColorGrade = "colorgrade",
-    MediaConversion = "media-conversion",
-    BatchTable = "batch-table",
-}
-
-/** Runtime IDs contributed by plugins share the persisted node type field. */
-export type PluginCanvasNodeType = string & { readonly __pluginCanvasNodeType?: unique symbol };
-export type CanvasNodeTypeId = CanvasNodeType | PluginCanvasNodeType;
-
-export function isBuiltinCanvasNodeType(type: CanvasNodeTypeId): type is CanvasNodeType {
-    return Object.values(CanvasNodeType).includes(type as CanvasNodeType);
-}
-
-export type CanvasNodeStatus = "idle" | "success" | "loading" | "error";
-export type CanvasMediaPerformanceMode = "auto" | "quality" | "performance";
-export type CanvasWorkspaceMode = "simple" | "professional";
-export type CanvasToolMode = "move" | "box-select";
-export type CanvasFolderStyle = "glass" | "stacked" | "midnight" | "paper" | "cinema" | "compact";
-export type CanvasFolderTheme = "aurora" | "obsidian" | "ember" | "pearl";
-export type StoryboardShotDuration = "auto" | "5" | "10" | "15" | "30";
-export type StoryboardShotCount = "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
-export type StoryboardVideoInputMode = "direct" | "keyframe";
-export type CanvasGenerationMode = "text" | "image" | "video" | "audio";
-export type CanvasGenerationBatchMode = "storyboard_image" | "storyboard_video" | "action_board" | "batch_image";
-export type CanvasGenerationBatchStatus = "queued" | "running" | "partial_failed" | "completed" | "cancelled";
-export type CanvasGenerationBatchItemStatus = "waiting" | "submitting" | "queued" | "running" | "succeeded" | "failed" | "cancelled";
-export type CanvasImageGenerationType = "generation" | "edit";
-export type CanvasWorkflowKind = "free" | "script" | "story_input" | "character" | "scene" | "storyboard" | "shot" | "final" | "styleboard" | "reference_set" | "reference_video" | "action_board";
-export type CanvasVideoEditOperation = "text_to_video" | "image_to_video" | "reference_to_video" | "extend" | "inpaint" | "replace_element" | "camera_motion" | "style_transfer" | "audio_to_video" | "compare_versions" | "concat";
-export type CanvasSkillCategory = "writing" | "storyboard" | "image" | "video" | "utility";
-export type CanvasSkillOutputMode = "text" | "json" | "image_prompt" | "workflow";
-export type StoryboardColumn =
-    | "shotNumber"
-    | "durationSeconds"
-    | "plotDescription"
-    | "dialogue"
-    | "narrativeIntent"
-    | "viewerPOV"
-    | "performanceBlocking"
-    | "shotSize"
-    | "emotion"
-    | "lightingAndAtmosphere"
-    | "audioEffects"
-    | "camera"
-    | "motion"
-    | "timeBeats"
-    | "imageGenerationPrompt"
-    | "videoMotionPrompt"
-    | "assets"
-    | "continuityOut"
-    | "negativePrompt";
-
-export type StoryboardAssetRole = "character" | "environment" | "wardrobe" | "prop" | "weapon" | "style" | "motion" | "audio";
-
-export type StoryboardAssetBinding = {
-    nodeId: string;
-    role: StoryboardAssetRole;
-    priority: number;
-};
-
-export type StoryboardCharacterReference = {
-    characterName: string;
-    characterAssetId?: string;
-    characterVersionId?: string;
-    characterDescription?: string;
-    characterImageNodeId?: string;
-};
-
-export type StoryboardRow = {
-    id: string;
-    shotNumber: number;
-    durationSeconds: number;
-    plotDescription: string;
-    dialogue: string;
-    characters: StoryboardCharacterReference[];
-    narrativeIntent: string;
-    viewerPOV: string;
-    performanceBlocking: string;
-    shotSize: string;
-    emotion: string;
-    lightingAndAtmosphere: string;
-    audioEffects: string;
-    camera: string;
-    motion: string;
-    timeBeats: string;
-    imageGenerationPrompt: string;
-    videoMotionPrompt: string;
-    imagePromptTemplateVariables?: Record<string, string>;
-    videoPromptTemplateVariables?: Record<string, string>;
-    mustHave: string[];
-    optionalDetails: string[];
-    continuityOut: string;
-    negativePrompt: string;
-    assetBindings: StoryboardAssetBinding[];
-    imageNodeId?: string;
-    videoNodeId?: string;
-    status?: CanvasNodeStatus;
-    errorDetails?: string;
-};
-
-export type StoryboardData = {
-    rows: StoryboardRow[];
-    visibleColumns: StoryboardColumn[];
-    referenceNodeIds: string[];
-};
-
-export type CanvasGenerationBatchItem = {
-    id: string;
-    rowId: string;
-    nodeId: string;
-    taskId?: string;
-    status: CanvasGenerationBatchItemStatus;
-    retryCount: number;
-    errorDetails?: string;
-    costUncertain?: boolean;
-};
-
-export type CanvasGenerationBatch = {
-    id: string;
-    projectId: string;
-    sourceNodeId: string;
-    mode: CanvasGenerationBatchMode;
-    status: CanvasGenerationBatchStatus;
-    items: CanvasGenerationBatchItem[];
-    concurrency?: number;
-    createdAt: string;
-    updatedAt: string;
-};
-
-export type CanvasBatchOperation = "try_on" | "creative";
-export type CanvasBatchRow = {
-    id: string;
-    enabled: boolean;
-    inputNodeIds: string[];
-    /** Text nodes selected for this row; their contents are appended to prompt. */
-    textNodeIds?: string[];
-    prompt: string;
-    outputNodeId?: string;
-};
-export type CanvasBatchReferenceColumn = {
-    id: string;
-    label: string;
-};
-export type CanvasBatchTableData = {
-    operation: CanvasBatchOperation;
-    concurrency: number;
-    /** Optional prompt override applied to every batch row while non-empty. */
-    globalPrompt?: string;
-    referenceColumns?: CanvasBatchReferenceColumn[];
-    textColumns?: CanvasBatchReferenceColumn[];
-    rows: CanvasBatchRow[];
-};
-
-export type CanvasSkillSnapshot = {
-    id: string;
-    name: string;
-    description: string;
-    category: CanvasSkillCategory;
-    template: string;
-    outputMode: CanvasSkillOutputMode;
-    outputContract: string;
-    version: number;
-    tags: string[];
-};
-
-export type CanvasNodeMetadata = {
-    /** Namespaced extension ownership for nodes contributed by a unified plugin. */
-    pluginId?: string;
-    pluginNodeId?: string;
-    pluginData?: Record<string, unknown>;
-    importSource?:
-        | {
-              provider: "libtv";
-              projectUuid: string;
-              nodeKey: string;
-              batchId: string;
-              sourceType?: string;
-              styleAssetUuid?: string;
-              styleVersionUuid?: string;
-              styleName?: string;
-          }
-        | {
-              provider: "tapnow";
-              shareId: string;
-              nodeId: string;
-              batchId: string;
-              sourceType?: string;
-          };
-    content?: string;
-    previewContent?: string;
-    videoPreview?: {
-        content: string;
-        storageKey?: string;
-        width?: number;
-        height?: number;
-        bytes?: number;
-        mimeType?: string;
-    };
-    richText?: Record<string, unknown>;
-    composerContent?: string;
-    prompt?: string;
-    promptTemplateOperation?: string;
-    promptTemplateVariables?: Record<string, string>;
-    status?: CanvasNodeStatus;
-    /** 浏览器文件上传，与模型生成任务状态独立。 */
-    fileUpload?: "uploading" | "error";
-    fileUploadProgress?: number;
-    locked?: boolean;
-    errorDetails?: string;
-    generationErrorCode?: string;
-    resourceReloadAvailable?: boolean;
-    failedPromptFingerprint?: string;
-    lastGenerationRequestFingerprint?: string;
-    fontSize?: number;
-    generationMode?: CanvasGenerationMode;
-    generationType?: CanvasImageGenerationType;
-    model?: string;
-    workflowProvider?: "model" | "runninghub";
-    runningHubWorkflowId?: string;
-    runningHubWorkflowKind?: "workflow" | "app";
-    /** 当前画布节点覆盖的工作流动态字段，键为 source:* 或 field:nodeId:fieldName。 */
-    workflowParameters?: Record<string, unknown>;
-    size?: string;
-    quality?: string;
-    transparentBackground?: string;
-    count?: number;
-    textCount?: number;
-    seconds?: string;
-    vquality?: string;
-    generateAudio?: string;
-    watermark?: string;
-    audioVoice?: string;
-    audioFormat?: string;
-    audioSpeed?: string;
-    audioInstructions?: string;
-    references?: string[];
-    naturalWidth?: number;
-    naturalHeight?: number;
-    freeResize?: boolean;
-    isBatchRoot?: boolean;
-    batchRootId?: string;
-    batchChildIds?: string[];
-    batchFailedCount?: number;
-    batchUsesReferenceImages?: boolean;
-    primaryImageId?: string;
-    imageBatchExpanded?: boolean;
-    storageKey?: string;
-    mimeType?: string;
-    bytes?: number;
-    durationMs?: number;
-    /** Whether the video file contains an audio track when this is known. */
-    hasAudio?: boolean;
-    assetId?: string;
-    assetTags?: string[];
-    assetCategory?: AssetCategory;
-    workflowKind?: CanvasWorkflowKind;
-    workflowTitle?: string;
-    workflowDescription?: string;
-    stylePresetId?: string;
-    styleProfileJson?: string;
-    styleExecutionPlan?: StyleExecutionPlan;
-    skillIds?: string[];
-    skillVersions?: Array<{ skillId: string; versionId: string; version: string }>;
-    skillFiles?: Array<{ skillId: string; path: string; sha256?: string }>;
-    chapterId?: string;
-    chapterTitle?: string;
-    shotIndex?: number;
-    sceneId?: string;
-    characterIds?: string[];
-    referenceSetId?: string;
-    referenceAssetNodeIds?: string[];
-    assetBindings?: StoryboardAssetBinding[];
-    characterName?: string;
-    characterPrompt?: string;
-    characterAliases?: string[];
-    characterDefinition?: Record<string, unknown>;
-    characterAssetId?: string;
-    characterVersionId?: string;
-    characterVersionPolicy?: "current" | "pinned";
-    characterVisualStatus?: string;
-    characterVoiceStatus?: string;
-    characterVoiceName?: string;
-    characterVoiceProfile?: {
-        name: string;
-        provider: string;
-        language: string;
-        timbre: string;
-    };
-    characterVoiceInstructions?: string;
-    characterCoverUrl?: string;
-    characterView?: "front" | "side" | "back" | "multi";
-    characterViewNodeIds?: {
-        front?: string;
-        side?: string;
-        back?: string;
-    };
-    actionBoardRows?: number;
-    actionBoardColumns?: number;
-    taskId?: string;
-    taskClientOperationId?: string;
-    retryOf?: string;
-    attemptGroupId?: string;
-    taskStatus?: "queued" | "running" | "succeeded" | "failed" | "cancelled" | string;
-    taskProgress?: number;
-    taskStage?: string;
-    taskProvider?: string;
-    taskStartedAt?: string;
-    taskCompletedAt?: string;
-    taskDurationMs?: number;
-    taskErrorCode?: string;
-    taskOfficialStatus?: "pending" | "processing" | "completed" | "failed" | "cancelled";
-    taskReceiptRecorded?: boolean;
-    taskCreatedAt?: string;
-    taskUpdatedAt?: string;
-    generationEffectKeys?: string[];
-    agentGenerationContinuation?: {
-        id: string;
-        taskId: string;
-        conversationId?: string;
-        messageId?: string;
-        source?: "online" | "local";
-        status: "pending" | "completed" | "failed";
-        effectKey?: string;
-    };
-    sessionId?: string;
-    videoEditOperation?: CanvasVideoEditOperation;
-    arkPrivateAssetUpload?: string;
-    videoCameraMoveId?: string;
-    videoCameraMovePrompt?: string;
-    videoStartFrameNodeId?: string;
-    videoEndFrameNodeId?: string;
-    videoFrameSourceNodeId?: string;
-    videoFrameTimeMs?: number;
-    versionOfNodeId?: string;
-    versionLabel?: string;
-    versionPrimary?: boolean;
-    copiedFromNodeId?: string;
-    generationResultPlacement?: "replace-node" | "new-version";
-    directorSceneId?: string;
-    directorShotId?: string;
-    directorPreviewNodeId?: string;
-    directorDepthNodeId?: string;
-    directorNormalNodeId?: string;
-    directorClayVideoNodeId?: string;
-    subtitleEntries?: SrtEntry[];
-    subtitleHighlights?: SubtitleHighlight[];
-    subtitleStyle?: SubtitleStyle;
-    subtitleUpdatedAt?: string;
-    skillId?: string;
-    skillVersion?: number;
-    skillSnapshot?: CanvasSkillSnapshot;
-    /** 图表节点的图形类型，缺省柱状图。落盘字段——新增扩展节点的自有字段都要在这里声明。 */
-    chartKind?: "bar" | "line";
-    /** 调色节点的参数；缺省视为未调色。 */
-    colorGrade?: CanvasColorGrade;
-    mediaConversion?: MediaConversionNodeState;
-    /** 用户手动拉伸过尺寸；图片按真实比例自动适配时避让它。 */
-    manualSize?: boolean;
-    storyboard?: StoryboardData;
-    storyboardShotDuration?: StoryboardShotDuration;
-    storyboardShotCount?: StoryboardShotCount;
-    storyboardVideoInputMode?: StoryboardVideoInputMode;
-    storyboardComposerHeight?: number;
-    generationBatches?: CanvasGenerationBatch[];
-    batchTable?: CanvasBatchTableData;
-    batchSourceNodeId?: string;
-    batchRowId?: string;
-    batchOperation?: CanvasBatchOperation;
-    batchInputNodeIds?: string[];
-    frame?: {
-        collapsed: boolean;
-        expandedWidth: number;
-        expandedHeight: number;
-    };
-    folder?: {
-        style: CanvasFolderStyle;
-        theme?: CanvasFolderTheme;
-        createdAt: string;
-        // 自定义主题资源覆盖预置主题；目录内容永远从 childNodes 读取。
-        themeCover?: string;
-        assetFolderId?: string;
-        projectId?: string;
-    };
-    drawingId?: string;
-    drawingEngine?: "tldraw" | "excalidraw";
-    drawingRevision?: number;
-    drawingUpdatedAt?: string;
-    drawingPreviewStorageKey?: string;
-    drawingPreviewUrl?: string;
-    drawingShapeCount?: number;
-    drawingPageCount?: number;
-    emotionEdit?: {
-        sourceNodeId: string;
-        characterName: string;
-        presetId: string;
-        intimacy: number;
-        arousal: number;
-        label: string;
-        faceBox: {
-            id: string;
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-            confidence?: number;
-            source: "detected" | "manual";
-        };
-        editRegion?: {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-        };
-        sourceWidth?: number;
-        sourceHeight?: number;
-        providerSize?: string;
-        maskStorageKey?: string;
-        editMode?: "provider-mask" | "local-composite";
-    };
-    portraitTexture?: PortraitTextureSettings;
-    /** AI 审美批改节点只保存当前报告和输入指纹，不保存图片二进制。 */
-    artCritique?: ArtCritiqueNodeState;
-    /** 摄像机控制选项，启用后生成时自动追加摄影机/镜头/焦距/光圈提示词。 */
-    cameraControl?: CameraControlOptions;
-    /** 全景节点配置：投影方式、生成方式和比例兜底开关。 */
-    panoramaConfig?: {
-        projection: "spherical" | "cylindrical";
-        sourceMode: "ai" | "image";
-        smartBase: boolean;
-        directImageUrl?: string | null;
-    };
-};
-
-export type CanvasNodeData = {
-    id: string;
-    type: CanvasNodeTypeId;
-    title: string;
-    createdAt?: string;
-    updatedAt?: string;
-    position: Position;
-    width: number;
-    height: number;
-    parentId?: string;
-    metadata?: CanvasNodeMetadata;
-};
-
-export type CanvasConnection = {
-    id: string;
-    fromNodeId: string;
-    toNodeId: string;
-    fromHandleId?: string;
-    toHandleId?: string;
-    fromAnchorRatio?: number;
-    toAnchorRatio?: number;
-    relation?: "storyboard-output" | "storyboard-asset-reference" | "batch-output";
-    storyboardRowId?: string;
-};
-
-export type CanvasDisplayConnection = {
-    connection: CanvasConnection;
-    from: CanvasNodeData;
-    to: CanvasNodeData;
-};
-
-export type CanvasAssistantReference = {
-    id: string;
-    type: CanvasNodeTypeId;
-    title: string;
-    dataUrl?: string;
-    storageKey?: string;
-    text?: string;
-};
-
-export type CanvasAssistantImage = {
-    id: string;
-    dataUrl: string;
-    storageKey?: string;
-    prompt: string;
-};
-
-export type CanvasAssistantMessage = {
-    id: string;
-    role: "user" | "assistant" | "system" | "tool" | "error";
-    title?: string;
-    text: string;
-    meta?: string;
-    detail?: unknown;
-    references?: CanvasAssistantReference[];
-};
-
-export type CanvasAssistantPendingBackendSession = {
-    id: string;
-    kind: "cinematic";
-    messageId: string;
-    status: "pending";
-    startedAt: string;
-};
-
-export type CanvasAssistantSession = {
-    id: string;
-    title: string;
-    messages: CanvasAssistantMessage[];
-    pendingBackendSession?: CanvasAssistantPendingBackendSession;
-    generationEffectKeys?: string[];
-    createdAt: string;
-    updatedAt: string;
-};
-
-export type ConnectionHandle = {
-    nodeId: string;
-    handleType: "source" | "target";
-    handleId?: string;
-    anchorRatio?: number;
-};
-
-export type CanvasSelectionStrategy = "replace" | "add" | "toggle" | "subtract";
-export type CanvasSelectionHitMode = "contain" | "intersect";
-
-export type SelectionBox = {
-    startWorldX: number;
-    startWorldY: number;
-    currentWorldX: number;
-    currentWorldY: number;
-    strategy: CanvasSelectionStrategy;
-    hitMode: CanvasSelectionHitMode;
-    initialSelectedNodeIds: string[];
-};
-
-export type ContextMenuState =
-    | {
-          type: "canvas";
-          x: number;
-          y: number;
-          position: Position;
-          createOpen?: boolean;
-      }
-    | {
-          type: "node";
-          x: number;
-          y: number;
-          nodeId: string;
-      }
-    | {
-          type: "connection";
-          x: number;
-          y: number;
-          connectionId: string;
-      };
+import type { CanvasColorGrade } from "@/lib/canvas/canvas-color-grade";
+import type { MediaConversionNodeState } from "@/lib/media-conversion/contracts";
+import type { AssetCategory } from "@/lib/asset-category";
+import type { PortraitTextureSettings } from "@/lib/canvas/canvas-portrait-texture";
+import type { StyleExecutionPlan } from "@/lib/canvas/style-profile";
+import type { ArtCritiqueNodeState } from "@/lib/art-critique/contracts";
+import type { CameraControlOptions } from "@/lib/canvas/camera-prompt-library";
+import type { SrtEntry, SubtitleHighlight, SubtitleStyle } from "@/types/timeline";
+
+export type Position = {
+    x: number;
+    y: number;
+};
+
+export type ViewportTransform = {
+    x: number;
+    y: number;
+    k: number;
+};
+
+export enum CanvasNodeType {
+    Image = "image",
+    Text = "text",
+    Drawing = "drawing",
+    Script = "script",
+    Skill = "skill",
+    Config = "config",
+    Video = "video",
+    Audio = "audio",
+    Frame = "frame",
+    Markdown = "markdown",
+    Svg = "svg",
+    Html = "html",
+    Panorama = "panorama",
+    Compare = "compare",
+    Chart = "chart",
+    ColorGrade = "colorgrade",
+    MediaConversion = "media-conversion",
+    BatchTable = "batch-table",
+}
+
+/** Runtime IDs contributed by plugins share the persisted node type field. */
+export type PluginCanvasNodeType = string & { readonly __pluginCanvasNodeType?: unique symbol };
+export type CanvasNodeTypeId = CanvasNodeType | PluginCanvasNodeType;
+
+export function isBuiltinCanvasNodeType(type: CanvasNodeTypeId): type is CanvasNodeType {
+    return Object.values(CanvasNodeType).includes(type as CanvasNodeType);
+}
+
+export type CanvasNodeStatus = "idle" | "success" | "loading" | "error";
+export type CanvasMediaPerformanceMode = "auto" | "quality" | "performance";
+export type CanvasWorkspaceMode = "simple" | "professional";
+export type CanvasToolMode = "move" | "box-select";
+export type CanvasFolderStyle = "glass" | "stacked" | "midnight" | "paper" | "cinema" | "compact";
+export type CanvasFolderTheme = "aurora" | "obsidian" | "ember" | "pearl";
+export type StoryboardShotDuration = "auto" | "5" | "10" | "15" | "30";
+export type StoryboardShotCount = "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
+export type StoryboardVideoInputMode = "direct" | "keyframe";
+export type CanvasGenerationMode = "text" | "image" | "video" | "audio";
+export type CanvasGenerationBatchMode = "storyboard_image" | "storyboard_video" | "action_board" | "batch_image";
+export type CanvasGenerationBatchStatus = "queued" | "running" | "partial_failed" | "completed" | "cancelled";
+export type CanvasGenerationBatchItemStatus = "waiting" | "submitting" | "queued" | "running" | "succeeded" | "failed" | "cancelled";
+export type CanvasImageGenerationType = "generation" | "edit";
+export type CanvasWorkflowKind = "free" | "script" | "story_input" | "character" | "scene" | "storyboard" | "shot" | "final" | "styleboard" | "reference_set" | "reference_video" | "action_board";
+export type CanvasVideoEditOperation = "text_to_video" | "image_to_video" | "reference_to_video" | "extend" | "inpaint" | "replace_element" | "camera_motion" | "style_transfer" | "audio_to_video" | "compare_versions" | "concat";
+export type CanvasSkillCategory = "writing" | "storyboard" | "image" | "video" | "utility";
+export type CanvasSkillOutputMode = "text" | "json" | "image_prompt" | "workflow";
+export type StoryboardColumn =
+    | "shotNumber"
+    | "durationSeconds"
+    | "plotDescription"
+    | "dialogue"
+    | "narrativeIntent"
+    | "viewerPOV"
+    | "performanceBlocking"
+    | "shotSize"
+    | "emotion"
+    | "lightingAndAtmosphere"
+    | "audioEffects"
+    | "camera"
+    | "motion"
+    | "timeBeats"
+    | "imageGenerationPrompt"
+    | "videoMotionPrompt"
+    | "assets"
+    | "continuityOut"
+    | "negativePrompt";
+
+export type StoryboardAssetRole = "character" | "environment" | "wardrobe" | "prop" | "weapon" | "style" | "motion" | "audio";
+
+export type StoryboardAssetBinding = {
+    nodeId: string;
+    role: StoryboardAssetRole;
+    priority: number;
+};
+
+export type StoryboardCharacterReference = {
+    characterName: string;
+    characterAssetId?: string;
+    characterVersionId?: string;
+    characterDescription?: string;
+    characterImageNodeId?: string;
+};
+
+export type StoryboardRow = {
+    id: string;
+    shotNumber: number;
+    durationSeconds: number;
+    plotDescription: string;
+    dialogue: string;
+    characters: StoryboardCharacterReference[];
+    narrativeIntent: string;
+    viewerPOV: string;
+    performanceBlocking: string;
+    shotSize: string;
+    emotion: string;
+    lightingAndAtmosphere: string;
+    audioEffects: string;
+    camera: string;
+    motion: string;
+    timeBeats: string;
+    imageGenerationPrompt: string;
+    videoMotionPrompt: string;
+    imagePromptTemplateVariables?: Record<string, string>;
+    videoPromptTemplateVariables?: Record<string, string>;
+    mustHave: string[];
+    optionalDetails: string[];
+    continuityOut: string;
+    negativePrompt: string;
+    assetBindings: StoryboardAssetBinding[];
+    imageNodeId?: string;
+    videoNodeId?: string;
+    status?: CanvasNodeStatus;
+    errorDetails?: string;
+};
+
+export type StoryboardData = {
+    rows: StoryboardRow[];
+    visibleColumns: StoryboardColumn[];
+    referenceNodeIds: string[];
+};
+
+export type CanvasGenerationBatchItem = {
+    id: string;
+    rowId: string;
+    nodeId: string;
+    taskId?: string;
+    status: CanvasGenerationBatchItemStatus;
+    retryCount: number;
+    errorDetails?: string;
+    costUncertain?: boolean;
+};
+
+export type CanvasGenerationBatch = {
+    id: string;
+    projectId: string;
+    sourceNodeId: string;
+    mode: CanvasGenerationBatchMode;
+    status: CanvasGenerationBatchStatus;
+    items: CanvasGenerationBatchItem[];
+    concurrency?: number;
+    createdAt: string;
+    updatedAt: string;
+};
+
+export type CanvasBatchOperation = "try_on" | "creative";
+export type CanvasBatchRow = {
+    id: string;
+    enabled: boolean;
+    inputNodeIds: string[];
+    /** Text nodes selected for this row; their contents are appended to prompt. */
+    textNodeIds?: string[];
+    prompt: string;
+    outputNodeId?: string;
+    /** AI-generated cell content keyed by column id (for aiGenerated tables). */
+    cells?: Record<string, string>;
+};
+export type CanvasBatchColumnType = "image" | "text";
+export type CanvasBatchReferenceColumn = {
+    id: string;
+    label: string;
+    type?: CanvasBatchColumnType;
+};
+export type CanvasBatchTableData = {
+    operation: CanvasBatchOperation;
+    concurrency: number;
+    /** Optional prompt override applied to every batch row while non-empty. */
+    globalPrompt?: string;
+    referenceColumns?: CanvasBatchReferenceColumn[];
+    textColumns?: CanvasBatchReferenceColumn[];
+    rows: CanvasBatchRow[];
+    /** When true, columns are AI-generated with dynamic headers. */
+    aiGenerated?: boolean;
+};
+
+export type CanvasSkillSnapshot = {
+    id: string;
+    name: string;
+    description: string;
+    category: CanvasSkillCategory;
+    template: string;
+    outputMode: CanvasSkillOutputMode;
+    outputContract: string;
+    version: number;
+    tags: string[];
+};
+
+export type CanvasNodeMetadata = {
+    /** Namespaced extension ownership for nodes contributed by a unified plugin. */
+    pluginId?: string;
+    pluginNodeId?: string;
+    pluginData?: Record<string, unknown>;
+    importSource?:
+        | {
+              provider: "libtv";
+              projectUuid: string;
+              nodeKey: string;
+              batchId: string;
+              sourceType?: string;
+              styleAssetUuid?: string;
+              styleVersionUuid?: string;
+              styleName?: string;
+          }
+        | {
+              provider: "tapnow";
+              shareId: string;
+              nodeId: string;
+              batchId: string;
+              sourceType?: string;
+          };
+    content?: string;
+    previewContent?: string;
+    /** When true, text prompt panel uses list/table generation mode. */
+    listMode?: boolean;
+    videoPreview?: {
+        content: string;
+        storageKey?: string;
+        width?: number;
+        height?: number;
+        bytes?: number;
+        mimeType?: string;
+    };
+    richText?: Record<string, unknown>;
+    composerContent?: string;
+    prompt?: string;
+    promptTemplateOperation?: string;
+    promptTemplateVariables?: Record<string, string>;
+    status?: CanvasNodeStatus;
+    /** 浏览器文件上传，与模型生成任务状态独立。 */
+    fileUpload?: "uploading" | "error";
+    fileUploadProgress?: number;
+    locked?: boolean;
+    errorDetails?: string;
+    generationErrorCode?: string;
+    resourceReloadAvailable?: boolean;
+    failedPromptFingerprint?: string;
+    lastGenerationRequestFingerprint?: string;
+    fontSize?: number;
+    generationMode?: CanvasGenerationMode;
+    generationType?: CanvasImageGenerationType;
+    model?: string;
+    workflowProvider?: "model" | "runninghub";
+    runningHubWorkflowId?: string;
+    runningHubWorkflowKind?: "workflow" | "app";
+    /** 当前画布节点覆盖的工作流动态字段，键为 source:* 或 field:nodeId:fieldName。 */
+    workflowParameters?: Record<string, unknown>;
+    size?: string;
+    quality?: string;
+    transparentBackground?: string;
+    count?: number;
+    textCount?: number;
+    seconds?: string;
+    vquality?: string;
+    generateAudio?: string;
+    watermark?: string;
+    audioVoice?: string;
+    audioFormat?: string;
+    audioSpeed?: string;
+    audioInstructions?: string;
+    references?: string[];
+    naturalWidth?: number;
+    naturalHeight?: number;
+    freeResize?: boolean;
+    isBatchRoot?: boolean;
+    batchRootId?: string;
+    batchChildIds?: string[];
+    batchFailedCount?: number;
+    batchUsesReferenceImages?: boolean;
+    primaryImageId?: string;
+    imageBatchExpanded?: boolean;
+    storageKey?: string;
+    mimeType?: string;
+    bytes?: number;
+    durationMs?: number;
+    /** Whether the video file contains an audio track when this is known. */
+    hasAudio?: boolean;
+    assetId?: string;
+    assetTags?: string[];
+    assetCategory?: AssetCategory;
+    workflowKind?: CanvasWorkflowKind;
+    workflowTitle?: string;
+    workflowDescription?: string;
+    stylePresetId?: string;
+    styleProfileJson?: string;
+    styleExecutionPlan?: StyleExecutionPlan;
+    skillIds?: string[];
+    skillVersions?: Array<{ skillId: string; versionId: string; version: string }>;
+    skillFiles?: Array<{ skillId: string; path: string; sha256?: string }>;
+    chapterId?: string;
+    chapterTitle?: string;
+    shotIndex?: number;
+    sceneId?: string;
+    characterIds?: string[];
+    referenceSetId?: string;
+    referenceAssetNodeIds?: string[];
+    assetBindings?: StoryboardAssetBinding[];
+    characterName?: string;
+    characterPrompt?: string;
+    characterAliases?: string[];
+    characterDefinition?: Record<string, unknown>;
+    characterAssetId?: string;
+    characterVersionId?: string;
+    characterVersionPolicy?: "current" | "pinned";
+    characterVisualStatus?: string;
+    characterVoiceStatus?: string;
+    characterVoiceName?: string;
+    characterVoiceProfile?: {
+        name: string;
+        provider: string;
+        language: string;
+        timbre: string;
+    };
+    characterVoiceInstructions?: string;
+    characterCoverUrl?: string;
+    characterView?: "front" | "side" | "back" | "multi";
+    characterViewNodeIds?: {
+        front?: string;
+        side?: string;
+        back?: string;
+    };
+    actionBoardRows?: number;
+    actionBoardColumns?: number;
+    taskId?: string;
+    taskClientOperationId?: string;
+    retryOf?: string;
+    attemptGroupId?: string;
+    taskStatus?: "queued" | "running" | "succeeded" | "failed" | "cancelled" | string;
+    taskProgress?: number;
+    taskStage?: string;
+    taskProvider?: string;
+    taskStartedAt?: string;
+    taskCompletedAt?: string;
+    taskDurationMs?: number;
+    taskErrorCode?: string;
+    taskOfficialStatus?: "pending" | "processing" | "completed" | "failed" | "cancelled";
+    taskReceiptRecorded?: boolean;
+    taskCreatedAt?: string;
+    taskUpdatedAt?: string;
+    generationEffectKeys?: string[];
+    agentGenerationContinuation?: {
+        id: string;
+        taskId: string;
+        conversationId?: string;
+        messageId?: string;
+        source?: "online" | "local";
+        status: "pending" | "completed" | "failed";
+        effectKey?: string;
+    };
+    sessionId?: string;
+    videoEditOperation?: CanvasVideoEditOperation;
+    arkPrivateAssetUpload?: string;
+    videoCameraMoveId?: string;
+    videoCameraMovePrompt?: string;
+    videoStartFrameNodeId?: string;
+    videoEndFrameNodeId?: string;
+    videoFrameSourceNodeId?: string;
+    videoFrameTimeMs?: number;
+    versionOfNodeId?: string;
+    versionLabel?: string;
+    versionPrimary?: boolean;
+    copiedFromNodeId?: string;
+    generationResultPlacement?: "replace-node" | "new-version";
+    directorSceneId?: string;
+    directorShotId?: string;
+    directorPreviewNodeId?: string;
+    directorDepthNodeId?: string;
+    directorNormalNodeId?: string;
+    directorClayVideoNodeId?: string;
+    subtitleEntries?: SrtEntry[];
+    subtitleHighlights?: SubtitleHighlight[];
+    subtitleStyle?: SubtitleStyle;
+    subtitleUpdatedAt?: string;
+    skillId?: string;
+    skillVersion?: number;
+    skillSnapshot?: CanvasSkillSnapshot;
+    /** 图表节点的图形类型，缺省柱状图。落盘字段——新增扩展节点的自有字段都要在这里声明。 */
+    chartKind?: "bar" | "line";
+    /** 调色节点的参数；缺省视为未调色。 */
+    colorGrade?: CanvasColorGrade;
+    mediaConversion?: MediaConversionNodeState;
+    /** 用户手动拉伸过尺寸；图片按真实比例自动适配时避让它。 */
+    manualSize?: boolean;
+    storyboard?: StoryboardData;
+    storyboardShotDuration?: StoryboardShotDuration;
+    storyboardShotCount?: StoryboardShotCount;
+    storyboardVideoInputMode?: StoryboardVideoInputMode;
+    storyboardComposerHeight?: number;
+    generationBatches?: CanvasGenerationBatch[];
+    batchTable?: CanvasBatchTableData;
+    batchSourceNodeId?: string;
+    batchRowId?: string;
+    batchOperation?: CanvasBatchOperation;
+    batchInputNodeIds?: string[];
+    frame?: {
+        collapsed: boolean;
+        expandedWidth: number;
+        expandedHeight: number;
+    };
+    folder?: {
+        style: CanvasFolderStyle;
+        theme?: CanvasFolderTheme;
+        createdAt: string;
+        // 自定义主题资源覆盖预置主题；目录内容永远从 childNodes 读取。
+        themeCover?: string;
+        assetFolderId?: string;
+        projectId?: string;
+    };
+    drawingId?: string;
+    drawingEngine?: "tldraw" | "excalidraw";
+    drawingRevision?: number;
+    drawingUpdatedAt?: string;
+    drawingPreviewStorageKey?: string;
+    drawingPreviewUrl?: string;
+    drawingShapeCount?: number;
+    drawingPageCount?: number;
+    emotionEdit?: {
+        sourceNodeId: string;
+        characterName: string;
+        presetId: string;
+        intimacy: number;
+        arousal: number;
+        label: string;
+        faceBox: {
+            id: string;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            confidence?: number;
+            source: "detected" | "manual";
+        };
+        editRegion?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+        sourceWidth?: number;
+        sourceHeight?: number;
+        providerSize?: string;
+        maskStorageKey?: string;
+        editMode?: "provider-mask" | "local-composite";
+    };
+    portraitTexture?: PortraitTextureSettings;
+    /** AI 审美批改节点只保存当前报告和输入指纹，不保存图片二进制。 */
+    artCritique?: ArtCritiqueNodeState;
+    /** 摄像机控制选项，启用后生成时自动追加摄影机/镜头/焦距/光圈提示词。 */
+    cameraControl?: CameraControlOptions;
+    /** 全景节点配置：投影方式、生成方式和比例兜底开关。 */
+    panoramaConfig?: {
+        projection: "spherical" | "cylindrical";
+        sourceMode: "ai" | "image";
+        smartBase: boolean;
+        directImageUrl?: string | null;
+    };
+};
+
+export type CanvasNodeData = {
+    id: string;
+    type: CanvasNodeTypeId;
+    title: string;
+    createdAt?: string;
+    updatedAt?: string;
+    position: Position;
+    width: number;
+    height: number;
+    parentId?: string;
+    metadata?: CanvasNodeMetadata;
+};
+
+export type CanvasConnection = {
+    id: string;
+    fromNodeId: string;
+    toNodeId: string;
+    fromHandleId?: string;
+    toHandleId?: string;
+    fromAnchorRatio?: number;
+    toAnchorRatio?: number;
+    relation?: "storyboard-output" | "storyboard-asset-reference" | "batch-output" | "batch-input";
+    storyboardRowId?: string;
+};
+
+export type CanvasDisplayConnection = {
+    connection: CanvasConnection;
+    from: CanvasNodeData;
+    to: CanvasNodeData;
+};
+
+export type CanvasAssistantReference = {
+    id: string;
+    type: CanvasNodeTypeId;
+    title: string;
+    dataUrl?: string;
+    storageKey?: string;
+    text?: string;
+};
+
+export type CanvasAssistantImage = {
+    id: string;
+    dataUrl: string;
+    storageKey?: string;
+    prompt: string;
+};
+
+export type CanvasAssistantMessage = {
+    id: string;
+    role: "user" | "assistant" | "system" | "tool" | "error";
+    title?: string;
+    text: string;
+    meta?: string;
+    detail?: unknown;
+    references?: CanvasAssistantReference[];
+};
+
+export type CanvasAssistantPendingBackendSession = {
+    id: string;
+    kind: "cinematic";
+    messageId: string;
+    status: "pending";
+    startedAt: string;
+};
+
+export type CanvasAssistantSession = {
+    id: string;
+    title: string;
+    messages: CanvasAssistantMessage[];
+    pendingBackendSession?: CanvasAssistantPendingBackendSession;
+    generationEffectKeys?: string[];
+    createdAt: string;
+    updatedAt: string;
+};
+
+export type ConnectionHandle = {
+    nodeId: string;
+    handleType: "source" | "target";
+    handleId?: string;
+    anchorRatio?: number;
+};
+
+export type CanvasSelectionStrategy = "replace" | "add" | "toggle" | "subtract";
+export type CanvasSelectionHitMode = "contain" | "intersect";
+
+export type SelectionBox = {
+    startWorldX: number;
+    startWorldY: number;
+    currentWorldX: number;
+    currentWorldY: number;
+    strategy: CanvasSelectionStrategy;
+    hitMode: CanvasSelectionHitMode;
+    initialSelectedNodeIds: string[];
+};
+
+export type ContextMenuState =
+    | {
+          type: "canvas";
+          x: number;
+          y: number;
+          position: Position;
+          createOpen?: boolean;
+      }
+    | {
+          type: "node";
+          x: number;
+          y: number;
+          nodeId: string;
+      }
+    | {
+          type: "connection";
+          x: number;
+          y: number;
+          connectionId: string;
+      };