diff --git a/app/(admin)/settings/video-canvas/video-canvas-settings-client.tsx b/app/(admin)/settings/video-canvas/video-canvas-settings-client.tsx
index e90fc5b98..c79fba2c7 100644
--- a/app/(admin)/settings/video-canvas/video-canvas-settings-client.tsx
+++ b/app/(admin)/settings/video-canvas/video-canvas-settings-client.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Link from "next/link";
+import { ArrowLeft, Plus, Trash2 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
 import { toast } from "sonner";
@@ -12,6 +14,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -30,6 +33,9 @@ import {
   getVideoCanvasFunctionBillingCopy,
   type VideoCanvasFunctionConfig,
   type VideoCanvasFunctionDefinition,
+  type VideoCanvasEffectPreset,
+  type VideoCanvasMotionPreset,
+  type VideoCanvasRolePreset,
   VIDEO_CANVAS_FUNCTION_CONFIG_KEY,
   defaultVideoCanvasFunctionConfig,
   normalizeVideoCanvasFunctionConfig,
@@ -199,8 +205,9 @@ export function VideoCanvasSettingsClient() {
   const functions = useMemo(
     () =>
       Object.values(config.functions).sort((a, b) => {
-        const kindCompare = a.kind.localeCompare(b.kind);
-        return kindCompare || a.label.localeCompare(b.label);
+        const compare = (left: string, right: string) =>
+          left === right ? 0 : left < right ? -1 : 1;
+        return compare(a.kind, b.kind) || compare(a.label, b.label);
       }),
     [config.functions],
   );
@@ -225,6 +232,135 @@ export function VideoCanvasSettingsClient() {
     }));
   };
 
+  const updateEffectPreset = (
+    index: number,
+    updates: Partial<VideoCanvasEffectPreset>,
+  ) => {
+    setConfig((current) => ({
+      ...current,
+      effectPresets: current.effectPresets.map((preset, presetIndex) =>
+        presetIndex === index ? { ...preset, ...updates } : preset,
+      ),
+    }));
+  };
+
+  const updateMotionPreset = (
+    index: number,
+    updates: Partial<VideoCanvasMotionPreset>,
+  ) => {
+    setConfig((current) => ({
+      ...current,
+      motionPresets: current.motionPresets.map((preset, presetIndex) =>
+        presetIndex === index ? { ...preset, ...updates } : preset,
+      ),
+    }));
+  };
+
+  const addMotionPreset = () => {
+    const createdAt = Date.now();
+    setConfig((current) => ({
+      ...current,
+      motionPresets: [
+        ...current.motionPresets,
+        {
+          id: `motion-${createdAt}`,
+          name: "新运镜预设",
+          previewUrl: "/video-canvas/effects/multi-angle.webp",
+          prompt: "镜头平稳移动，保持主体和空间关系清晰。",
+        },
+      ],
+    }));
+  };
+
+  const removeMotionPreset = (index: number) => {
+    setConfig((current) => ({
+      ...current,
+      motionPresets: current.motionPresets.filter(
+        (_, presetIndex) => presetIndex !== index,
+      ),
+    }));
+  };
+
+  const addEffectPreset = () => {
+    setConfig((current) => ({
+      ...current,
+      effectPresets: [
+        ...current.effectPresets,
+        {
+          id: `effect-${Date.now()}`,
+          title: "新视频特效",
+          author: "官方预设",
+          usageCount: 0,
+          model: "Seedance 2.0",
+          thumbnailUrl: "/video-canvas/effects/product-light-sweep.webp",
+          prompt: "保持参考主体稳定，应用自然、连续的视频特效和镜头运动。",
+          commercial: true,
+        },
+      ],
+    }));
+  };
+
+  const removeEffectPreset = (index: number) => {
+    setConfig((current) => ({
+      ...current,
+      effectPresets: current.effectPresets.filter((_, presetIndex) => presetIndex !== index),
+    }));
+  };
+
+  const updateRolePreset = (
+    index: number,
+    updates: Partial<VideoCanvasRolePreset>,
+  ) => {
+    setConfig((current) => ({
+      ...current,
+      rolePresets: current.rolePresets.map((preset, presetIndex) =>
+        presetIndex === index ? { ...preset, ...updates } : preset,
+      ),
+    }));
+  };
+
+  const addRolePreset = () => {
+    const createdAt = Date.now();
+    setConfig((current) => ({
+      ...current,
+      rolePresets: [
+        ...current.rolePresets,
+        {
+          id: `role-${createdAt}`,
+          assetId: `public-role:role-${createdAt}`,
+          name: "新角色预设",
+          accent: "#525252",
+          description: "管理员配置的公共角色素材。",
+          prompt: "保持角色身份、五官、发型、服装和体型在所有视频镜头中一致。",
+          tags: "角色",
+          compliant: true,
+          images: {
+            expression: "",
+            face: "",
+            full: "/video-canvas/effects/product-light-sweep.webp",
+            threeView: "",
+          },
+          filters: {
+            age: "青年",
+            build: "匀称",
+            culture: "东亚",
+            era: "现代",
+            gender: "中性",
+            hairColor: "黑发",
+            species: "人类",
+          },
+        },
+      ],
+    }));
+  };
+
+  const removeRolePreset = (index: number) => {
+    setConfig((current) => ({
+      ...current,
+      rolePresets: current.rolePresets.filter((_, presetIndex) => presetIndex !== index),
+    }));
+  };
+
   const save = async () => {
     setSaving(true);
     try {
@@ -255,11 +391,17 @@ export function VideoCanvasSettingsClient() {
   };
 
   return (
-    <main className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-6 py-8">
-      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+    <main className="settings-workspace mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-5 sm:px-5">
+      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">视频画布功能设置</h1>
-          <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
+          <Button asChild className="mb-2" size="sm" variant="outline">
+            <Link href="/settings">
+              <ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
+              返回设置
+            </Link>
+          </Button>
+          <h1 className="text-xl font-semibold">视频画布功能设置</h1>
+          <p className="mt-1 max-w-3xl text-xs leading-5 text-muted-foreground">
             这里集中配置复刻画布里的工具能力、预设提示词和默认模型。积分与扣费统一跟随全站模型/功能配置，不再在视频画布里单独维护一套价格。
           </p>
         </div>
@@ -321,6 +463,354 @@ export function VideoCanvasSettingsClient() {
         </CardContent>
       </Card>
 
+      <section className="space-y-4">
+        <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+          <div>
+            <h2 className="text-lg font-semibold tracking-tight">视频运镜素材预设</h2>
+            <p className="mt-1 max-w-3xl text-sm text-muted-foreground">
+              视频节点“运镜广场”的名称、预览图和插入提示词都从这里读取。点击运镜卡会按竞品规则把提示词追加到用户输入框，允许组合和重复使用。
+            </p>
+          </div>
+          <Button onClick={addMotionPreset} size="sm" type="button" variant="outline">
+            <Plus className="mr-1.5 h-4 w-4" />
+            添加运镜
+          </Button>
+        </div>
+
+        <div className="grid gap-3">
+          {config.motionPresets.map((preset, index) => (
+            <details
+              className="group rounded-lg border border-border bg-card px-4 py-3"
+              key={`${preset.id}-${index}`}
+            >
+              <summary className="flex cursor-pointer list-none items-center gap-3">
+                <img
+                  alt=""
+                  className="h-14 w-14 shrink-0 rounded-md object-cover"
+                  src={preset.previewUrl}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-sm font-medium">{preset.name}</div>
+                  <div className="mt-1 truncate text-xs text-muted-foreground">
+                    {preset.prompt || "未设置插入提示词"}
+                  </div>
+                </div>
+                <Button
+                  aria-label={`删除运镜 ${preset.name}`}
+                  className="shrink-0"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    removeMotionPreset(index);
+                  }}
+                  size="icon"
+                  title={`删除运镜 ${preset.name}`}
+                  type="button"
+                  variant="ghost"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </summary>
+
+              <div className="mt-4 grid gap-4 border-t border-border pt-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor={`motion-name-${index}`}>运镜名称</Label>
+                  <Input
+                    id={`motion-name-${index}`}
+                    onChange={(event) =>
+                      updateMotionPreset(index, { name: event.target.value })
+                    }
+                    value={preset.name}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`motion-preview-${index}`}>预览图地址</Label>
+                  <Input
+                    id={`motion-preview-${index}`}
+                    onChange={(event) =>
+                      updateMotionPreset(index, { previewUrl: event.target.value })
+                    }
+                    value={preset.previewUrl}
+                  />
+                </div>
+                <div className="space-y-2 md:col-span-2">
+                  <Label htmlFor={`motion-prompt-${index}`}>插入提示词</Label>
+                  <Textarea
+                    id={`motion-prompt-${index}`}
+                    onChange={(event) =>
+                      updateMotionPreset(index, { prompt: event.target.value })
+                    }
+                    value={preset.prompt}
+                  />
+                </div>
+              </div>
+            </details>
+          ))}
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+          <div>
+            <h2 className="text-lg font-semibold tracking-tight">视频特效素材预设</h2>
+            <p className="mt-1 max-w-3xl text-sm text-muted-foreground">
+              视频节点“特效”面板、素材节点封面、模型约束和生成提示词都从这里读取。选择特效时会创建结构化素材节点，不会把描述硬写进用户提示词。
+            </p>
+          </div>
+          <Button onClick={addEffectPreset} size="sm" type="button" variant="outline">
+            <Plus className="mr-1.5 h-4 w-4" />
+            添加特效
+          </Button>
+        </div>
+
+        <div className="grid gap-3">
+          {config.effectPresets.map((preset, index) => (
+            <details
+              className="group rounded-lg border border-border bg-card px-4 py-3"
+              key={`${preset.id}-${index}`}
+            >
+              <summary className="flex cursor-pointer list-none items-center gap-3">
+                <img
+                  alt=""
+                  className="h-12 w-12 shrink-0 rounded-md object-cover"
+                  src={preset.thumbnailUrl}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-sm font-medium">{preset.title}</div>
+                  <div className="mt-1 truncate text-xs text-muted-foreground">
+                    {preset.author} · {preset.model} · {preset.usageCount.toLocaleString()} 次使用
+                  </div>
+                </div>
+                <Button
+                  aria-label={`删除特效 ${preset.title}`}
+                  className="shrink-0"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    removeEffectPreset(index);
+                  }}
+                  size="icon"
+                  title={`删除特效 ${preset.title}`}
+                  type="button"
+                  variant="ghost"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </summary>
+
+              <div className="mt-4 grid gap-4 border-t border-border pt-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor={`effect-title-${index}`}>特效名称</Label>
+                  <Input
+                    id={`effect-title-${index}`}
+                    onChange={(event) => updateEffectPreset(index, { title: event.target.value })}
+                    value={preset.title}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`effect-author-${index}`}>作者</Label>
+                  <Input
+                    id={`effect-author-${index}`}
+                    onChange={(event) => updateEffectPreset(index, { author: event.target.value })}
+                    value={preset.author}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`effect-model-${index}`}>适用模型</Label>
+                  <Input
+                    id={`effect-model-${index}`}
+                    onChange={(event) => updateEffectPreset(index, { model: event.target.value })}
+                    value={preset.model}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`effect-count-${index}`}>展示使用次数</Label>
+                  <Input
+                    id={`effect-count-${index}`}
+                    min={0}
+                    onChange={(event) =>
+                      updateEffectPreset(index, {
+                        usageCount: Math.max(0, Number(event.target.value) || 0),
+                      })
+                    }
+                    type="number"
+                    value={preset.usageCount}
+                  />
+                </div>
+                <div className="space-y-2 md:col-span-2">
+                  <Label htmlFor={`effect-thumbnail-${index}`}>封面地址</Label>
+                  <Input
+                    id={`effect-thumbnail-${index}`}
+                    onChange={(event) =>
+                      updateEffectPreset(index, { thumbnailUrl: event.target.value })
+                    }
+                    value={preset.thumbnailUrl}
+                  />
+                </div>
+                <div className="space-y-2 md:col-span-2">
+                  <Label htmlFor={`effect-prompt-${index}`}>生成提示词 / 后端规则</Label>
+                  <Textarea
+                    id={`effect-prompt-${index}`}
+                    onChange={(event) => updateEffectPreset(index, { prompt: event.target.value })}
+                    value={preset.prompt}
+                  />
+                </div>
+                <div className="flex items-center gap-3 md:col-span-2">
+                  <Switch
+                    checked={preset.commercial}
+                    id={`effect-commercial-${index}`}
+                    onCheckedChange={(checked) => updateEffectPreset(index, { commercial: checked })}
+                  />
+                  <Label htmlFor={`effect-commercial-${index}`}>标记为可商用</Label>
+                </div>
+              </div>
+            </details>
+          ))}
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+          <div>
+            <h2 className="text-lg font-semibold tracking-tight">视频角色素材预设</h2>
+            <p className="mt-1 max-w-3xl text-sm text-muted-foreground">
+              视频节点“角色库”的公共角色、Seedance 合规资产 ID、四类角色图和隐藏生成提示词都从这里读取。角色引用通过画布连线保存，不会改写用户输入框。
+            </p>
+          </div>
+          <Button onClick={addRolePreset} size="sm" type="button" variant="outline">
+            <Plus className="mr-1.5 h-4 w-4" />
+            添加角色
+          </Button>
+        </div>
+
+        <div className="grid gap-3">
+          {config.rolePresets.map((preset, index) => (
+            <details
+              className="group rounded-lg border border-border bg-card px-4 py-3"
+              key={`${preset.id}-${index}`}
+            >
+              <summary className="flex cursor-pointer list-none items-center gap-3">
+                <img
+                  alt=""
+                  className="h-14 w-11 shrink-0 rounded-md object-cover object-top"
+                  src={preset.images.full}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-sm font-medium">{preset.name}</div>
+                  <div className="mt-1 truncate text-xs text-muted-foreground">
+                    {preset.assetId} · {preset.tags || "未设置标签"}
+                  </div>
+                </div>
+                <Button
+                  aria-label={`删除角色 ${preset.name}`}
+                  className="shrink-0"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    removeRolePreset(index);
+                  }}
+                  size="icon"
+                  title={`删除角色 ${preset.name}`}
+                  type="button"
+                  variant="ghost"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </summary>
+
+              <div className="mt-4 grid gap-4 border-t border-border pt-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor={`role-name-${index}`}>角色名称</Label>
+                  <Input
+                    id={`role-name-${index}`}
+                    onChange={(event) => updateRolePreset(index, { name: event.target.value })}
+                    value={preset.name}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`role-asset-${index}`}>合规资产 ID</Label>
+                  <Input
+                    id={`role-asset-${index}`}
+                    onChange={(event) => updateRolePreset(index, { assetId: event.target.value })}
+                    value={preset.assetId}
+                  />
+                </div>
+                <div className="space-y-2 md:col-span-2">
+                  <Label htmlFor={`role-tags-${index}`}>展示标签</Label>
+                  <Input
+                    id={`role-tags-${index}`}
+                    onChange={(event) => updateRolePreset(index, { tags: event.target.value })}
+                    value={preset.tags}
+                  />
+                </div>
+                <div className="space-y-2 md:col-span-2">
+                  <Label htmlFor={`role-description-${index}`}>角色说明</Label>
+                  <Textarea
+                    id={`role-description-${index}`}
+                    onChange={(event) => updateRolePreset(index, { description: event.target.value })}
+                    value={preset.description}
+                  />
+                </div>
+                <div className="space-y-2 md:col-span-2">
+                  <Label htmlFor={`role-prompt-${index}`}>生成提示词 / 身份一致性规则</Label>
+                  <Textarea
+                    id={`role-prompt-${index}`}
+                    onChange={(event) => updateRolePreset(index, { prompt: event.target.value })}
+                    value={preset.prompt}
+                  />
+                </div>
+                {([
+                  ["full", "角色立绘"],
+                  ["face", "脸部近景"],
+                  ["expression", "表情参考"],
+                  ["threeView", "三视图"],
+                ] as const).map(([key, label]) => (
+                  <div className="space-y-2" key={key}>
+                    <Label htmlFor={`role-${key}-${index}`}>{label}地址</Label>
+                    <Input
+                      id={`role-${key}-${index}`}
+                      onChange={(event) =>
+                        updateRolePreset(index, {
+                          images: { ...preset.images, [key]: event.target.value },
+                        })
+                      }
+                      value={preset.images[key]}
+                    />
+                  </div>
+                ))}
+                {([
+                  ["gender", "性别"],
+                  ["age", "年龄段"],
+                  ["species", "种族"],
+                  ["era", "时代"],
+                  ["culture", "文化区域"],
+                  ["build", "体型"],
+                  ["hairColor", "发色"],
+                ] as const).map(([key, label]) => (
+                  <div className="space-y-2" key={key}>
+                    <Label htmlFor={`role-filter-${key}-${index}`}>{label}</Label>
+                    <Input
+                      id={`role-filter-${key}-${index}`}
+                      onChange={(event) =>
+                        updateRolePreset(index, {
+                          filters: { ...preset.filters, [key]: event.target.value },
+                        })
+                      }
+                      value={preset.filters[key]}
+                    />
+                  </div>
+                ))}
+                <div className="flex items-center gap-3 md:col-span-2">
+                  <Switch
+                    checked={preset.compliant}
+                    id={`role-compliant-${index}`}
+                    onCheckedChange={(checked) => updateRolePreset(index, { compliant: checked })}
+                  />
+                  <Label htmlFor={`role-compliant-${index}`}>可在 Seedance2.0 合规素材库中使用</Label>
+                </div>
+              </div>
+            </details>
+          ))}
+        </div>
+      </section>
+
       <section className="space-y-4">
         <div>
           <h2 className="text-lg font-semibold tracking-tight">功能预设提示词</h2>
diff --git a/app/api/canvas/workflow/analyze/route.ts b/app/api/canvas/workflow/analyze/route.ts
index 814195ab8..ed2ff3f2b 100644
--- a/app/api/canvas/workflow/analyze/route.ts
+++ b/app/api/canvas/workflow/analyze/route.ts
@@ -25,7 +25,7 @@ const VIDEO_ANALYSIS_MAX_SIDE = 960;
 const VIDEO_ANALYSIS_TIMEOUT_MS = 15000;
 
 const requestSchema = z.object({
-  mode: z.enum(["video-analysis", "character-scene-extraction", "agent-plan"]),
+  mode: z.enum(["video-analysis", "character-scene-extraction", "story-script", "agent-plan"]),
   prompt: z.string().trim().optional(),
   imageUrls: z.array(z.string().trim()).optional(),
   videoUrls: z.array(z.string().trim()).optional(),
@@ -118,6 +118,22 @@ function normalizeVideoAnalysisRows(
       const sceneDescription = normalizeText(
         raw.sceneDescription || raw.scene || raw.title || raw.description,
       );
+      const narrative = normalizeText(
+        raw.narrative || raw.story || raw.storyContent || raw.narration || raw.summary,
+      );
+      const shot = normalizeText(raw.shot || raw.shotNumber || raw.index || index + 1);
+      const startTime = normalizeText(raw.startTime || raw.start || raw.start_time);
+      const endTime = normalizeText(raw.endTime || raw.end || raw.end_time);
+      const duration = normalizeText(raw.duration || raw.durationSeconds || raw.duration_seconds);
+      const shotSize = normalizeText(raw.shotSize || raw.frameSize || raw.shot_type || raw.sceneScale);
+      const cameraAngle = normalizeText(raw.cameraAngle || raw.angle || raw.camera_angle);
+      const cameraMovement = normalizeText(
+        raw.cameraMovement || raw.cameraMove || raw.camera_motion || raw.motionType,
+      );
+      const focusDepth = normalizeText(
+        raw.focusDepth || raw.depthOfField || raw.focalDepth || raw.focus_depth,
+      );
+      const lighting = normalizeText(raw.lighting || raw.light || raw.lightDesign);
       const backgroundMusic = normalizeText(
         raw.backgroundMusic || raw.music || raw.bgm,
       );
@@ -135,10 +151,16 @@ function normalizeVideoAnalysisRows(
       );
       if (
         !sceneDescription &&
+        !narrative &&
         !backgroundMusic &&
         !voiceAndSfx &&
         !imagePrompt &&
-        !motionPrompt
+        !motionPrompt &&
+        !shotSize &&
+        !cameraAngle &&
+        !cameraMovement &&
+        !focusDepth &&
+        !lighting
       ) {
         return null;
       }
@@ -147,7 +169,17 @@ function normalizeVideoAnalysisRows(
           ? Math.max(0, Math.min(framePreviews.length - 1, Math.round(keyframeIndex) - 1))
           : index % Math.max(framePreviews.length, 1);
       return {
+        shot: shot || String(index + 1),
+        startTime: startTime || (index === 0 ? "0" : ""),
+        endTime,
+        duration,
         sceneDescription: sceneDescription || `镜头 ${index + 1}`,
+        narrative: narrative || sceneDescription || `镜头 ${index + 1}`,
+        shotSize: shotSize || "中景至近景",
+        cameraAngle: cameraAngle || "平视",
+        cameraMovement: cameraMovement || "缓慢推镜头 (Slow Zoom In)",
+        focusDepth: focusDepth || "浅景深",
+        lighting: lighting || "冷调低沉照明，主体光线柔和。",
         backgroundMusic: backgroundMusic || "无",
         voiceAndSfx: voiceAndSfx || "无",
         imagePrompt: imagePrompt || sceneDescription || "延续当前视频气质生成关键帧",
@@ -159,7 +191,17 @@ function normalizeVideoAnalysisRows(
       (
         item,
       ): item is {
+        shot: string;
+        startTime: string;
+        endTime: string;
+        duration: string;
         sceneDescription: string;
+        narrative: string;
+        shotSize: string;
+        cameraAngle: string;
+        cameraMovement: string;
+        focusDepth: string;
+        lighting: string;
         backgroundMusic: string;
         voiceAndSfx: string;
         imagePrompt: string;
@@ -170,6 +212,226 @@ function normalizeVideoAnalysisRows(
     .slice(0, 8);
 }
 
+function normalizeStoryShot(value: unknown, index: number) {
+  const text = normalizeText(value);
+  if (/^\d+$/.test(text)) return text.padStart(2, "0");
+  return text || String(index + 1).padStart(2, "0");
+}
+
+type NormalizedStoryScriptRow = {
+  shot: string;
+  duration: string;
+  scene: string;
+  sceneDescription: string;
+  shotSize: string;
+  lighting: string;
+  dialogue: string;
+  backgroundMusic: string;
+  voiceAndSfx: string;
+  cameraMovement: string;
+  imagePrompt: string;
+  motionPrompt: string;
+  keyframeUrl: string;
+};
+
+function normalizeStoryScriptRows(value: unknown): NormalizedStoryScriptRow[] {
+  if (!Array.isArray(value)) return [];
+  return value
+    .map((item, index) => {
+      if (Array.isArray(item)) {
+        const cells = item.map((cell) => normalizeText(cell));
+        const shot = normalizeStoryShot(cells[0], index);
+        const secondCellLooksLikeDuration = /^\d+(\.\d+)?\s*(s|秒)?$/i.test(cells[1] || "");
+        const duration = secondCellLooksLikeDuration ? cells[1] : "5s";
+        const scene = secondCellLooksLikeDuration ? cells[2] || `镜头 ${shot}` : cells[1] || `镜头 ${shot}`;
+        const sceneDescription = secondCellLooksLikeDuration ? cells[2] || scene : cells[2] || cells[3] || scene;
+        return {
+          shot,
+          duration,
+          scene,
+          sceneDescription,
+          shotSize: (secondCellLooksLikeDuration ? cells[3] : "") || "中景",
+          lighting: (secondCellLooksLikeDuration ? cells[4] : cells[4]) || "电影感光影",
+          dialogue: (secondCellLooksLikeDuration ? cells[5] : "") || "+",
+          backgroundMusic: "无",
+          voiceAndSfx: (secondCellLooksLikeDuration ? cells[6] : cells[3]) || "无",
+          cameraMovement: (secondCellLooksLikeDuration ? cells[7] : "") || "缓慢推镜头",
+          imagePrompt: (secondCellLooksLikeDuration ? cells[8] : cells[5]) || sceneDescription,
+          motionPrompt:
+            (secondCellLooksLikeDuration ? cells[9] || cells[7] : cells[6]) ||
+            "保持镜头运动自然、连贯，围绕主体动作推进。",
+          keyframeUrl: "",
+        };
+      }
+
+      const raw =
+        item && typeof item === "object" && !Array.isArray(item)
+          ? (item as Record<string, unknown>)
+          : {};
+      const shot = normalizeStoryShot(raw.shot || raw.shotNumber || raw.index || raw.id, index);
+      const duration = normalizeText(raw.duration || raw.length || raw.time || raw.seconds);
+      const scene = normalizeText(raw.scene || raw.location || raw.title || `镜头 ${shot}`);
+      const sceneDescription = normalizeText(
+        raw.sceneDescription ||
+          raw.description ||
+          raw.visual ||
+          raw.picture ||
+          raw.screen ||
+          raw.summary,
+      );
+      const shotSize = normalizeText(
+        raw.shotSize || raw.frameSize || raw.shot_type || raw.sceneScale || raw.cameraShot,
+      );
+      const lighting = normalizeText(
+        raw.lighting || raw.light || raw.atmosphere || raw.mood || raw.lightMood,
+      );
+      const dialogue = normalizeText(
+        raw.dialogue || raw.dialog || raw.narration || raw.voiceover || raw.monologue || raw.line,
+      );
+      const cameraMovement = normalizeText(
+        raw.cameraMovement || raw.cameraMove || raw.movement || raw.lensMovement || raw.motion,
+      );
+      const imagePrompt = normalizeText(
+        raw.imagePrompt ||
+          raw.image_generation_prompt ||
+          raw.image ||
+          raw.keyframePrompt ||
+          raw.keyFramePrompt,
+      );
+      const motionPrompt = normalizeText(
+        raw.motionPrompt ||
+          raw.videoPrompt ||
+          raw.video_motion_prompt ||
+          raw.motion ||
+          raw.cameraMovement,
+      );
+      const backgroundMusic = normalizeText(
+        raw.backgroundMusic || raw.music || raw.bgm || raw.soundtrack,
+      );
+      const voiceAndSfx = normalizeText(
+        raw.voiceAndSfx || raw.voice || raw.sound || raw.audio || raw.sfx,
+      );
+
+      if (
+        !scene &&
+        !sceneDescription &&
+        !imagePrompt &&
+        !motionPrompt &&
+        !backgroundMusic &&
+        !voiceAndSfx
+      ) {
+        return null;
+      }
+
+      return {
+        shot,
+        duration: duration || "5s",
+        scene,
+        sceneDescription: sceneDescription || imagePrompt || scene || `镜头 ${shot}`,
+        shotSize: shotSize || "中景",
+        lighting: lighting || "电影感光影",
+        dialogue: dialogue || "+",
+        backgroundMusic: backgroundMusic || "无",
+        voiceAndSfx: voiceAndSfx || "无",
+        cameraMovement: cameraMovement || "缓慢推镜头",
+        imagePrompt: imagePrompt || sceneDescription || scene || `镜头 ${shot}关键帧`,
+        motionPrompt: motionPrompt || cameraMovement || "保持镜头运动自然、连贯，围绕主体动作推进。",
+        keyframeUrl: "",
+      };
+    })
+    .filter(
+      (
+        item,
+      ): item is NormalizedStoryScriptRow => Boolean(item),
+    )
+    .slice(0, 18);
+}
+
+const storyExpansionPhases = [
+  {
+    description: "建立镜头，交代环境、人物位置和当前压力",
+    cameraMovement: "缓慢推镜头",
+    imagePrompt: "广角或中景建立画面，环境信息清晰，主体位置明确",
+    lighting: "环境主光明确，氛围基调清晰",
+    motionPrompt: "镜头缓慢推进或轻微横移，建立空间关系",
+    shotSize: "中景",
+  },
+  {
+    description: "动作推进，突出人物的关键行为或剧情转折",
+    cameraMovement: "跟随主体动作推进",
+    imagePrompt: "中景表现人物动作，服装、道具和光影保持连续",
+    lighting: "主体光影连续，动作区域清晰",
+    motionPrompt: "跟随主体动作推进，节奏自然连贯",
+    shotSize: "中景",
+  },
+  {
+    description: "情绪反应，用近景或特写强化人物心理和冲突",
+    cameraMovement: "轻微推近或稳定特写",
+    imagePrompt: "近景或特写，突出表情、眼神、手部或关键道具细节",
+    lighting: "面部光线突出，情绪反差增强",
+    motionPrompt: "轻微推近或稳定特写，强调情绪变化",
+    shotSize: "特写",
+  },
+  {
+    description: "关系与氛围，表现周围人物、环境反馈或声画张力",
+    cameraMovement: "横移扫过环境或切换视角",
+    imagePrompt: "加入环境反馈、群像反应或空间层次，电影感光影",
+    lighting: "场景氛围增强，空间层次明显",
+    motionPrompt: "镜头扫过环境或切换视角，保持节奏递进",
+    shotSize: "全景",
+  },
+  {
+    description: "转场收束，为下一镜头保留动作、视线或情绪钩子",
+    cameraMovement: "顺势后移、上摇或转场",
+    imagePrompt: "构图留出转场方向，动作或视线指向下一段剧情",
+    lighting: "光影引导视线并保留转场方向",
+    motionPrompt: "镜头后移、上摇或顺势转场，衔接下一镜头",
+    shotSize: "大远景",
+  },
+];
+
+function expandStoryScriptRowsToTarget(
+  rows: NormalizedStoryScriptRow[],
+  targetCount = 18,
+): NormalizedStoryScriptRow[] {
+  if (rows.length === 0) return [];
+  if (rows.length >= targetCount) {
+    return rows.slice(0, targetCount).map((row, index) => ({
+      ...row,
+      shot: String(index + 1).padStart(2, "0"),
+    }));
+  }
+
+  const baseCount = Math.floor(targetCount / rows.length);
+  const extraCount = targetCount % rows.length;
+  const expanded: NormalizedStoryScriptRow[] = [];
+
+  rows.forEach((row, rowIndex) => {
+    const segmentCount = baseCount + (rowIndex < extraCount ? 1 : 0);
+    for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex += 1) {
+      const phase =
+        storyExpansionPhases[
+          Math.min(
+            storyExpansionPhases.length - 1,
+            Math.floor((segmentIndex / Math.max(segmentCount, 1)) * storyExpansionPhases.length),
+          )
+        ];
+      expanded.push({
+        ...row,
+        shot: String(expanded.length + 1).padStart(2, "0"),
+        sceneDescription: `${phase.description}：${row.sceneDescription}`,
+        shotSize: row.shotSize || phase.shotSize,
+        lighting: row.lighting || phase.lighting,
+        cameraMovement: row.cameraMovement || phase.cameraMovement,
+        imagePrompt: `${row.imagePrompt}；${phase.imagePrompt}`,
+        motionPrompt: `${phase.motionPrompt}；${row.motionPrompt}`,
+      });
+    }
+  });
+
+  return expanded.slice(0, targetCount);
+}
+
 function normalizeCharacters(value: unknown) {
   if (!Array.isArray(value)) return [];
   return value
@@ -243,11 +505,21 @@ function buildVideoAnalysisPrompt(params: {
   "highlights": ["3-5条镜头分析要点"],
   "analysisRows": [
     {
-      "sceneDescription": "镜头内容与景别描述",
+      "shot": "1",
+      "startTime": "0",
+      "endTime": "5",
+      "duration": "5",
+      "sceneDescription": "画面描述，说明主体、环境、动作、构图和色调",
+      "narrative": "叙事内容，说明这一镜头承担的剧情/情绪/信息作用",
+      "shotSize": "景别，例如中景至近景",
+      "cameraAngle": "摄影机角度，例如平视",
+      "cameraMovement": "摄影机运动，例如缓慢推镜头 (Slow Zoom In)",
+      "focusDepth": "焦距与景深，例如浅景深",
+      "lighting": "光线，例如冷调低沉照明，屏幕光作为侧逆光",
       "backgroundMusic": "这一段适合的背景音乐氛围",
       "voiceAndSfx": "人声/环境声/音效建议，没有就写无",
-      "imagePrompt": "后续生成关键帧时可直接使用的图像提示词",
-      "motionPrompt": "后续生成视频时可直接使用的运动提示词",
+      "imagePrompt": "后续生成关键帧时可直接使用的英文图像提示词",
+      "motionPrompt": "后续生成视频时可直接使用的英文运动提示词",
       "keyframeIndex": 1
     }
   ],
@@ -257,7 +529,9 @@ function buildVideoAnalysisPrompt(params: {
   "visualMotifs": ["2-4个可复用的视觉母题"],
   "recommendedNextSteps": ["2-4条建议的下游动作"]
 }`,
-    "analysisRows 请尽量输出 2-6 行；keyframeIndex 使用 1 开始的序号，对应你看到的关键帧顺序。",
+    "analysisRows 请按镜头时间顺序输出；短视频可以输出 1 行，复杂视频输出 2-6 行。",
+    "每行必须覆盖镜号、开始时间、结束时间、时长、画面描述、叙事内容、景别、摄影机角度、摄影机运动、焦距与景深、光线、背景音乐、人声/音效、图像生成提示词、视频运动提示词和关键帧。",
+    "imagePrompt 和 motionPrompt 优先使用英文；其他字段使用中文；keyframeIndex 使用 1 开始的序号，对应你看到的关键帧顺序。",
     "如果没有真实视频帧，只能依据参考图和脚本推断，也要正常输出，但措辞要稳健。",
   ]
     .filter(Boolean)
@@ -437,13 +711,63 @@ function buildAgentPlanPrompt(params: {
     .join("\n");
 }
 
+function buildStoryScriptPrompt(params: {
+  nodeTitle?: string;
+  prompt: string;
+  imageCount: number;
+  videoCount: number;
+}) {
+  return [
+    "你是视频画布里的故事脚本生成节点，需要把用户输入、参考图和参考视频整理成可直接用于后续分镜/生图/生视频的结构化脚本表。",
+    params.nodeTitle ? `当前节点：${params.nodeTitle}` : "",
+    `参考图数量：${params.imageCount}`,
+    `视频数量：${params.videoCount}`,
+    params.prompt ? `输入内容：\n${params.prompt}` : "没有额外脚本，请生成一个节奏清晰的短视频脚本。",
+    "",
+    "请只输出 JSON，不要输出 markdown，不要输出解释。",
+    "JSON 结构如下：",
+    `{
+  "summary": "一句话概括故事主题、情绪和视频方向，不超过120字",
+  "analysisRows": [
+    {
+      "shot": "01",
+      "duration": "5s",
+      "scene": "场景名或地点，如 盛唐·金銮殿·日",
+      "sceneDescription": "画面内容、人物动作和剧情推进，不要重复 scene 字段",
+      "shotSize": "景别，如中景、特写、全景、大远景",
+      "lighting": "光影氛围，如暖金主光带阴影，气氛紧张压抑",
+      "dialogue": "对白或旁白，没有就写 +",
+      "backgroundMusic": "背景音乐或情绪氛围，没有就写无",
+      "voiceAndSfx": "环境声、动作声或音效，没有就写无",
+      "cameraMovement": "运镜，如缓慢推镜头、固定、横移、上摇、环绕轨道跟拍",
+      "imagePrompt": "后续生成该镜头关键帧时可直接使用的中文图像提示词",
+      "motionPrompt": "后续生成视频时可直接使用的中文视频运动提示词"
+    }
+  ],
+  "assetCandidates": {
+    "style": "全局视觉风格，如 盛唐·国风二次元",
+    "characters": ["需要生成的角色资产名"],
+    "scenes": ["需要生成的场景资产名"],
+    "props": ["需要生成的道具资产名"]
+  },
+  "shotIdeas": [
+    { "title": "镜头 1", "description": "一句话描述镜头目标、景别或动作" }
+  ],
+  "recommendedNextSteps": ["2-4条建议的下游动作"]
+}`,
+    "analysisRows 必须直接输出 18 行，按镜头时间顺序编号 01-18；每行默认 5s 或 6s，剧情高潮可用 6s。",
+    "每行要覆盖竞品脚本表同等信息：镜号、时长、画面描述、景别、光影氛围、对白·旁白、音效、运镜、最终图像提示词和视频运动提示词。",
+    "画面描述中用 @角色名 或 @场景/道具名 标出可复用资产，例如 @沈昭昭、@金銮殿、@侍卫长刀。",
+    "imagePrompt 要像可直接生成分镜图的中文提示词，包含主体、环境、构图、光影、风格与一致性要求；motionPrompt 要按起始状态、动作过程、结束状态、音效组织。",
+    "assetCandidates 根据 18 镜头抽取 3-6 个角色、2-5 个场景和 1-4 个道具，方便后续准备资产。",
+    "每行要像专业视频画布脚本表：场景具体、画面可生成、声音可执行、镜头节奏明确，不要只写剧情摘要。",
+  ]
+    .filter(Boolean)
+    .join("\n");
+}
+
 export async function POST(request: Request) {
   try {
-    const session = await auth();
-    if (!session?.user?.id) {
-      return NextResponse.json({ success: false, error: "未登录" }, { status: 401 });
-    }
-
     const body = await request.json().catch(() => ({}));
     const parsed = requestSchema.safeParse(body);
     if (!parsed.success) {
@@ -468,6 +792,11 @@ export async function POST(request: Request) {
       );
     }
 
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: "未登录" }, { status: 401 });
+    }
+
     const [allModels, agentModel] = await Promise.all([
       getEnabledAiModelsWithProvider(false),
       getAgentAiModelWithProvider(),
@@ -534,7 +863,14 @@ export async function POST(request: Request) {
               prompt,
               imageCount: imageUrls.length,
             })
-          : buildAgentPlanPrompt({
+          : parsed.data.mode === "story-script"
+            ? buildStoryScriptPrompt({
+                nodeTitle: normalizeText(parsed.data.nodeTitle),
+                prompt,
+                imageCount: imageUrls.length,
+                videoCount: videoUrls.length,
+              })
+            : buildAgentPlanPrompt({
               nodeTitle: normalizeText(parsed.data.nodeTitle),
               prompt,
               imageCount: imageUrls.length,
@@ -568,7 +904,7 @@ export async function POST(request: Request) {
         },
       ],
       temperature: 0.2,
-      maxTokens: 1600,
+      maxTokens: parsed.data.mode === "story-script" ? 4200 : parsed.data.mode === "video-analysis" ? 2200 : 1600,
     } as any);
 
     const parsedJson = extractJsonBlock<Record<string, unknown>>(text) || {};
@@ -619,6 +955,29 @@ export async function POST(request: Request) {
       });
     }
 
+    if (parsed.data.mode === "story-script") {
+      const analysisRows = expandStoryScriptRowsToTarget(normalizeStoryScriptRows(
+        parsedJson.analysisRows || parsedJson.storyRows || parsedJson.rows || parsedJson.shots,
+      ));
+      return NextResponse.json({
+        success: true,
+        data: {
+          summary,
+          analysisRows,
+          shotIdeas:
+            normalizeShotIdeas(parsedJson.shotIdeas).length > 0
+              ? normalizeShotIdeas(parsedJson.shotIdeas)
+              : analysisRows.map((row, index) => ({
+                  title: `镜头 ${index + 1}`,
+                  description: row.sceneDescription,
+                })),
+          recommendedNextSteps: normalizeStringList(parsedJson.recommendedNextSteps, 6),
+          model: selectedModel.model.displayName,
+          raw: text,
+        },
+      });
+    }
+
     return NextResponse.json({
       success: true,
       data: {
diff --git a/components/canvas/LiblibVideoCanvasReplica.tsx b/components/canvas/LiblibVideoCanvasReplica.tsx
index 6e48ad0e1..0a226d80d 100644
--- a/components/canvas/LiblibVideoCanvasReplica.tsx
+++ b/components/canvas/LiblibVideoCanvasReplica.tsx
@@ -1,38 +1,59 @@
 "use client";
 
 import {
+  ArrowUp,
   Bell,
+  BookOpen,
+  BoxSelect,
+  Camera,
   Check,
   ChevronDown,
+  ChevronRight,
   Clock3,
   Copy,
   Download,
+  Ellipsis,
   FileText,
+  FolderOpen,
   GitBranch,
   Headphones,
   HelpCircle,
   Image as ImageIcon,
+  Keyboard,
+  Languages,
   Layers,
   Loader2,
+  Maximize2,
+  Minimize2,
   Music2,
+  Move,
+  Pause,
   Plus,
   Play,
+  Redo2,
   RotateCcw,
+  Search,
   Scissors,
   Settings2,
+  SlidersHorizontal,
   Sparkles,
+  Star,
   Trash2,
   Upload,
   UserRound,
   Video,
   Wand2,
+  Undo2,
+  Zap,
   X,
   type LucideIcon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { createPortal } from "react-dom";
 import {
   type ChangeEvent as ReactChangeEvent,
   type DragEvent as ReactDragEvent,
+  Fragment,
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
@@ -67,11 +88,16 @@ import {
   videoGenerationService,
   workflowAnalysisService,
 } from "@/services/canvas";
+import type { CanvasInitialProject } from "@/types/canvas";
 import {
   getVideoCanvasFunctionBillingCopy,
   type VideoCanvasFunctionConfig,
   type VideoCanvasFunctionDefinition,
+  type VideoCanvasEffectPreset,
+  type VideoCanvasMotionPreset,
+  type VideoCanvasRolePreset,
   defaultVideoCanvasFunctionConfig,
+  defaultVideoCanvasMotionPresets,
   normalizeVideoCanvasFunctionConfig,
 } from "@/lib/video-canvas/config";
 import type { VideoGenerationMode, VideoRatio, VideoResolution } from "@/types/ai";
@@ -80,9 +106,17 @@ type ActivePanel =
   | "add"
   | "workflow"
   | "assets"
+  | "assetManager"
+  | "effectLibrary"
   | "history"
+  | "historyPicker"
   | "help"
+  | "roleLibrary"
+  | "videoRoleLibrary"
+  | "shortcuts"
+  | "styleLibrary"
   | "support"
+  | "tutorial"
   | "skills"
   | "share"
   | "publish"
@@ -110,6 +144,7 @@ type ComposerMenu =
   | "mark"
   | "focus"
   | "model"
+  | "mode"
   | "ratio"
   | "resolution"
   | "duration"
@@ -122,7 +157,24 @@ type ComposerMenu =
   | "slash"
   | null;
 type MemberStoreTab = "vip" | "history" | "credits";
-type VideoToolbarMode = "clip" | "analysis" | null;
+type VideoToolbarMode = "clip" | "crop" | "subtitleErase" | "analysis" | null;
+type VideoToolbarMenu = "hd" | "subtitle" | "audio" | null;
+type VideoFrameExtractionKind = "first" | "last" | "current";
+type SubtitleEraseMode = "smart" | "region";
+type VideoAudioSplitMode = "voice" | "background" | "audio-video";
+
+type SubtitleEraseRegion = {
+  height: number;
+  id: string;
+  width: number;
+  x: number;
+  y: number;
+};
+
+type SubtitleEraseRegionHistory = {
+  future: SubtitleEraseRegion[][];
+  past: SubtitleEraseRegion[][];
+};
 
 type CapturedTool = {
   type?: string;
@@ -146,6 +198,13 @@ type CapturedTool = {
   };
 };
 
+type CanvasLibraryAsset = {
+  label: string;
+  mediaType: NonNullable<CloneNode["inputType"]>;
+  type: string;
+  url: string;
+};
+
 type WorkflowPreset = {
   id?: string | number;
   uuid?: string;
@@ -155,7 +214,35 @@ type WorkflowPreset = {
   cover?: string;
 };
 
-type CloneNodeKind = "input" | "model" | "text" | "audio" | "workflow" | "preview" | "save" | "media" | "script";
+type ToolboxTemplatePreset = WorkflowPreset & {
+  accent: string;
+  author: string;
+  badge?: string;
+  category: string;
+  duration: string;
+  steps: string[];
+  templateKey: string;
+  usageCount: string;
+};
+
+type RoleLibraryItem = VideoCanvasRolePreset;
+
+type RoleLibraryFilterKey = keyof RoleLibraryItem["filters"];
+
+type CloneNodeKind =
+  | "input"
+  | "model"
+  | "text"
+  | "audio"
+  | "workflow"
+  | "preview"
+  | "save"
+  | "media"
+  | "material-effect"
+  | "material-role"
+  | "material-style"
+  | "script"
+  | "video-story";
 
 type CloneNode = {
   id: string;
@@ -179,6 +266,52 @@ type CloneEdge = {
   target: string;
 };
 
+type VideoCanvasMagicMark = {
+  clickX: number;
+  clickY: number;
+  id: string;
+  imageUrl: string;
+  labelOptions: string[];
+  selectedIndex: number;
+  sourceNodeId: string;
+};
+
+type VideoCanvasMarkAnalysisState = {
+  clickX: number;
+  clickY: number;
+  sourceNodeId: string;
+  targetNodeId: string;
+};
+
+type PickObjectApiResponse = {
+  error?: string;
+  object?: {
+    confidence?: number;
+    labels?: string[];
+    name?: string;
+  };
+  success?: boolean;
+};
+
+type AssetMarketCard = readonly [title: string, author: string, count: number, model?: string];
+
+type LineConnectState = {
+  cursorCanvasX: number | null;
+  cursorCanvasY: number | null;
+  hoverNodeId?: string | null;
+  targetId?: string | null;
+  sourceId: string | null;
+};
+
+type EndpointConnectionDragState = {
+  anchorId: string;
+  hasDragged: boolean;
+  pointerId: number | null;
+  side: ConnectionSide;
+  startClientX: number;
+  startClientY: number;
+};
+
 type DragState =
   | {
       kind: "node";
@@ -203,6 +336,8 @@ type CanvasCommandState = {
   screenY: number;
 } | null;
 
+type StoryWorkflowStep = "shots" | "assets" | "prompts";
+
 type NodeContextState = {
   nodeId: string;
   screenX: number;
@@ -226,12 +361,17 @@ type PresetControlAnchor = {
 };
 
 type ComposerSettings = {
+  autoValidateMaterial?: boolean;
+  audio?: string;
   camera: string;
   count: string;
+  duration?: string;
   model: string;
+  modelLabel?: string;
   panorama: string;
   ratio: string;
   resolution: string;
+  searchEnabled?: boolean;
 };
 
 type VideoComposerTabKey =
@@ -242,6 +382,7 @@ type VideoComposerTabKey =
   | "image-reference";
 
 type VideoTargetComposerSubmitPayload = {
+  magicMarks: VideoCanvasMagicMark[];
   mode: VideoGenerationMode;
   prompt: string;
   settings: ComposerSettings & {
@@ -274,7 +415,7 @@ type CanvasModelOption = {
 
 type CanvasModelKind = "image" | "video" | "multimodal" | "any";
 
-type AddModuleKind = "text" | "image" | "video" | "video-clip" | "audio" | "script";
+type AddModuleKind = "text" | "image" | "video" | "video-clip" | "director" | "audio" | "script" | "legacy-script";
 type CanvasCreateKind = AddModuleKind;
 type TargetModuleActionLabel =
   | "自己编写内容"
@@ -283,9 +424,15 @@ type TargetModuleActionLabel =
   | "文字生音乐"
   | "图生图"
   | "图片高清"
+  | "参考"
+  | "标记"
+  | "风格"
   | "音频生视频"
   | "首尾帧生成视频"
   | "首帧生成视频"
+  | "自己编写分镜脚本"
+  | "生成高清视频"
+  | "打开导演台"
   | "剧本生成分镜脚本"
   | "视频参考生成分镜脚本"
   | "角色生成分镜脚本";
@@ -303,6 +450,17 @@ type ImageToolbarAction =
   | "download"
   | "preview";
 
+type StoryToolbarAction = "regenerate" | "create-storyboard" | "batch-video";
+type PresetMediaToolbarAction =
+  | "first-frame-hd"
+  | "first-frame-outpaint"
+  | "first-frame-background"
+  | "first-frame-download"
+  | "audio-beat"
+  | "audio-camera"
+  | "audio-sfx"
+  | "audio-download";
+
 type ComposerSubmitPayload = {
   prompt: string;
   references: string[];
@@ -312,6 +470,7 @@ type ComposerSubmitPayload = {
 
 type LiblibVideoCanvasReplicaProps = {
   canvasId: string;
+  initialProject?: CanvasInitialProject | null;
   isLoading?: boolean;
 };
 
@@ -472,7 +631,17 @@ type VideoClipRange = {
 
 type VideoAnalysisRow = {
   id: string;
+  shot: string;
+  startTime: string;
+  endTime: string;
+  duration: string;
   sceneDescription: string;
+  narrative: string;
+  shotSize: string;
+  cameraAngle: string;
+  cameraMovement: string;
+  focusDepth: string;
+  lighting: string;
   backgroundMusic: string;
   voiceAndSfx: string;
   imagePrompt: string;
@@ -480,13 +649,43 @@ type VideoAnalysisRow = {
   keyframeUrl: string;
 };
 
+type StoryScriptRow = {
+  id: string;
+  shot: string;
+  duration: string;
+  scene: string;
+  sceneDescription: string;
+  shotSize: string;
+  lighting: string;
+  dialogue: string;
+  backgroundMusic: string;
+  voiceAndSfx: string;
+  cameraMovement: string;
+  imagePrompt: string;
+  motionPrompt: string;
+  keyframeUrl: string;
+};
+
 type VideoAnalysisResponsePayload = {
   analysisRows?: Array<{
     backgroundMusic?: string;
+    dialogue?: string;
+    cameraAngle?: string;
+    cameraMovement?: string;
+    duration?: string | number;
+    endTime?: string | number;
+    focusDepth?: string;
     imagePrompt?: string;
     keyframeUrl?: string;
+    lighting?: string;
     motionPrompt?: string;
+    narrative?: string;
     sceneDescription?: string;
+    scene?: string;
+    shot?: string | number;
+    shotSize?: string;
+    startTime?: string | number;
+    story?: string;
     voiceAndSfx?: string;
   }>;
   framePreviews?: string[];
@@ -497,6 +696,8 @@ type VideoAnalysisResponsePayload = {
   summary?: string;
 };
 
+type VideoAnalysisResponseRow = NonNullable<VideoAnalysisResponsePayload["analysisRows"]>[number];
+
 type VideoAnalysisState = {
   status: "idle" | "loading" | "ready" | "error";
   summary: string;
@@ -504,6 +705,16 @@ type VideoAnalysisState = {
   error?: string;
 };
 
+type VideoCropGenerateState = {
+  status: "loading";
+  progress: number;
+};
+
+type VideoAudioSplitState = {
+  status: "loading";
+  mode: VideoAudioSplitMode;
+};
+
 const capturedTools: CapturedTool[] = [];
 const capturedCounts: { byType?: Record<string, number> } = {};
 const capturedWorkflows: WorkflowPreset[] = [];
@@ -530,13 +741,26 @@ const ADD_NODE_MODULES: Array<{
   { kind: "image", label: "图片", description: "海报、分镜、角色设计", icon: ImageIcon },
   { kind: "video", label: "视频", description: "创意广告、动画、电影", icon: Video },
   { kind: "video-clip", label: "视频合成", description: "多个视频片段合为一个", icon: Scissors, badge: "Beta" },
+  { kind: "director", label: "导演台", description: "3D空间多视角截图", icon: Settings2, badge: "NEW" },
   { kind: "audio", label: "音频", description: "音效、配音、音乐", icon: Music2 },
-  { kind: "script", label: "脚本", description: "创意脚本、生成故事板", icon: Layers, badge: "Beta" },
+  { kind: "script", label: "脚本", description: "创意脚本、生成故事板", icon: Layers, badge: "NEW" },
+];
+
+const ADD_NODE_PRIMARY_MODULES = ADD_NODE_MODULES.filter((item) => item.kind !== "script");
+
+const SCRIPT_SUBMENU_OPTIONS = [
+  { badge: "NEW", description: "新增脚本节点", label: "脚本", action: "script" as const },
+  { badge: "Beta", description: "旧版脚本节点", label: "脚本（旧版）", action: "legacy" as const },
+];
+
+const ASSET_LIBRARY_SUBMENU_OPTIONS = [
+  { description: "新增风格节点", label: "风格库", action: "style" as const },
+  { description: "新增特效节点", label: "特效库", action: "effect" as const },
 ];
 
 const CONNECTION_ADD_MODULES: Array<{
   icon: LucideIcon;
-  kind: Exclude<AddModuleKind, "audio">;
+  kind: Exclude<AddModuleKind, "audio" | "director">;
   label: string;
 }> = [
   { kind: "text", label: "文本生成", icon: FileText },
@@ -549,10 +773,12 @@ const CONNECTION_ADD_MODULES: Array<{
 const TARGET_MODULE_CENTER_OFFSETS: Record<AddModuleKind, { x: number; y: number }> = {
   audio: { x: 705, y: -257 },
   image: { x: 53, y: -257 },
+  "legacy-script": { x: 556, y: 253 },
   script: { x: 556, y: 253 },
   text: { x: -742, y: -257 },
   video: { x: -574, y: 253 },
   "video-clip": { x: 80, y: 253 },
+  director: { x: 728, y: 253 },
 };
 
 const STARTER_CARDS = [
@@ -587,25 +813,419 @@ const STARTER_CARDS = [
   },
 ];
 
+const TOOLBOX_TEMPLATE_CATEGORIES = ["周星驰经典名场面", "电商展示", "镜头运动", "人物动画", "全部"] as const;
+
+const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
+  {
+    accent: "linear-gradient(135deg,#f5d789,#f08b62)",
+    author: "LibTV 官方",
+    badge: "预设",
+    category: "周星驰经典名场面",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png",
+    description: "左弧滑行，镜头从人物左侧弧线推进，带轻微喜剧节奏和夸张表情停顿。",
+    duration: "5s",
+    id: "left-arc-slide",
+    name: "【预设】左弧滑行",
+    steps: ["参考图", "镜头轨迹", "Seedance 2.0", "视频"],
+    templateKey: "left-arc-slide",
+    usageCount: "4.2k",
+  },
+  {
+    accent: "linear-gradient(135deg,#98d5ff,#6c84ff)",
+    author: "电商模板库",
+    badge: "商用",
+    category: "电商展示",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png",
+    description: "电商手机弹出效果，产品从画面中心弹出并旋转定格，适合主图视频开场。",
+    duration: "5s",
+    id: "phone-pop-product",
+    name: "电商手机弹出效果",
+    steps: ["产品图", "弹出动画", "高光", "视频"],
+    templateKey: "phone-pop-product",
+    usageCount: "3.6k",
+  },
+  {
+    accent: "linear-gradient(135deg,#dfc192,#8e623c)",
+    author: "商品展示",
+    badge: "商用",
+    category: "电商展示",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-story-script-cover.png",
+    description: "咖啡杯出场，杯身从桌面滑入，蒸汽和柔光形成温暖的品牌氛围。",
+    duration: "5s",
+    id: "coffee-cup-entry",
+    name: "咖啡杯出场",
+    steps: ["商品图", "场景光", "蒸汽", "视频"],
+    templateKey: "coffee-cup-entry",
+    usageCount: "2.8k",
+  },
+  {
+    accent: "linear-gradient(135deg,#d3e5ff,#9fb3cc)",
+    author: "运镜模板",
+    badge: "热门",
+    category: "镜头运动",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-audio-to-video-cover.png",
+    description: "360旋转展示，围绕主体做一圈稳定环绕，适合产品、人物和空间展示。",
+    duration: "6s",
+    id: "orbit-360-showcase",
+    name: "360旋转展示",
+    steps: ["主体图", "环绕镜头", "景深", "视频"],
+    templateKey: "orbit-360-showcase",
+    usageCount: "5.1k",
+  },
+  {
+    accent: "linear-gradient(135deg,#d7d8dc,#737d89)",
+    author: "工业镜头",
+    category: "镜头运动",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-image.png",
+    description: "机械臂视角，以第一视角穿过机械臂与产品线，增强科技感和空间纵深。",
+    duration: "5s",
+    id: "robot-arm-pov",
+    name: "机械臂视角",
+    steps: ["参考图", "机械臂", "穿行", "视频"],
+    templateKey: "robot-arm-pov",
+    usageCount: "1.9k",
+  },
+  {
+    accent: "linear-gradient(135deg,#f9c8d8,#c693ff)",
+    author: "人物动画",
+    badge: "NEW",
+    category: "人物动画",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-three-view.png",
+    description: "Live 2D，让单张角色图产生眨眼、微笑和轻微身体摆动，适合口播开场。",
+    duration: "4s",
+    id: "live-2d-character",
+    name: "Live 2D",
+    steps: ["角色图", "表情", "轻动作", "视频"],
+    templateKey: "live-2d-character",
+    usageCount: "6.4k",
+  },
+  {
+    accent: "linear-gradient(135deg,#bad5ff,#2e375d)",
+    author: "电影运镜",
+    category: "镜头运动",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png",
+    description: "瞳孔拉近，镜头快速推向眼部并在反光里展示下一场景，适合悬疑转场。",
+    duration: "5s",
+    id: "pupil-zoom",
+    name: "瞳孔拉近",
+    steps: ["人物图", "特写", "反光", "转场"],
+    templateKey: "pupil-zoom",
+    usageCount: "2.2k",
+  },
+  {
+    accent: "linear-gradient(135deg,#f7e6b0,#ef6b62)",
+    author: "创意玩法",
+    badge: "热门",
+    category: "人物动画",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-story-script-cover.png",
+    description: "飞鸟解体，主体由细碎羽片散开再重组，适合视觉冲击强的短视频片头。",
+    duration: "6s",
+    id: "bird-dissolve",
+    name: "飞鸟解体",
+    steps: ["主体图", "粒子", "重组", "视频"],
+    templateKey: "bird-dissolve",
+    usageCount: "3.4k",
+  },
+  {
+    accent: "linear-gradient(135deg,#f3db93,#ef5e50)",
+    author: "电商模板库",
+    badge: "商用",
+    category: "电商展示",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png",
+    description: "商品震撼登场，产品带冲击波与局部高光进入画面，适合活动主推款。",
+    duration: "5s",
+    id: "product-hero-entry",
+    name: "商品震撼登场",
+    steps: ["产品图", "冲击波", "高光", "视频"],
+    templateKey: "product-hero-entry",
+    usageCount: "4.8k",
+  },
+  {
+    accent: "linear-gradient(135deg,#a6e7d8,#6da3ff)",
+    author: "旅拍模板",
+    category: "镜头运动",
+    cover:
+      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-audio-to-video-cover.png",
+    description: "旅拍转场，前景遮挡切换到新地点，带自然手持感和轻微速度变化。",
+    duration: "5s",
+    id: "travel-whip-transition",
+    name: "旅拍转场",
+    steps: ["首帧", "遮挡", "转场", "视频"],
+    templateKey: "travel-whip-transition",
+    usageCount: "2.6k",
+  },
+];
+
+const ROLE_LIBRARY_FILTER_GROUPS: Array<{
+  key: RoleLibraryFilterKey;
+  label: string;
+  options: string[];
+}> = [
+  { key: "gender", label: "性别", options: ["男", "女", "中性"] },
+  { key: "age", label: "年龄段", options: ["儿童", "少年", "青年", "中年", "老年"] },
+  { key: "species", label: "种族", options: ["人类", "精灵", "兽人", "机械", "其他"] },
+  { key: "era", label: "时代", options: ["先秦", "古代", "近代", "现代", "未来"] },
+  { key: "culture", label: "文化区域", options: ["东亚", "欧美", "中东", "非洲", "奇幻"] },
+  { key: "build", label: "体型", options: ["瘦削", "匀称", "健壮", "丰满"] },
+  { key: "hairColor", label: "发色", options: ["黑发", "白发", "金发", "棕发", "彩色"] },
+];
+
+const ROLE_LIBRARY_APPLY_VIEWPORT = { x: -3842.91, y: 487.096, zoom: 0.743079 };
+const ROLE_LIBRARY_NODE_LAYOUT = [
+  { height: 350, imageKey: "full" as const, title: "角色立绘", width: 282, x: 5748, y: -564 },
+  { height: 350, imageKey: "face" as const, title: "脸部近景", width: 282, x: 6048, y: -564 },
+  { height: 350, imageKey: "expression" as const, title: "表情参考", width: 282, x: 6348, y: -564 },
+  { height: 495, imageKey: "threeView" as const, title: "三视图", width: 878, x: 5748, y: -156 },
+];
+
+const MATERIAL_STYLE_NODE_SIZE = 242;
+const MATERIAL_STYLE_SCREEN_ANCHOR = { x: 666, y: 776 };
+const VIDEO_ROLE_AGREEMENT_STORAGE_KEY = "video-canvas:seedance-role-agreement:v1";
+const VIDEO_MOTION_CUSTOM_STORAGE_KEY = "video-canvas:custom-motions:v1";
+const VIDEO_MOTION_FAVORITES_STORAGE_KEY = "video-canvas:favorite-motions:v1";
+
+type VideoCanvasCustomMotionPreset = VideoCanvasMotionPreset & {
+  custom: true;
+};
+
+const LIBLIB_VIDEO_MODEL_OPTIONS = [
+  {
+    label: "Seedance 2.0 VIP",
+    duration: "2min",
+    description: "最强视频模型，会员专属通道,15s音画同步",
+  },
+  {
+    label: "Seedance 2.0 Fast VIP",
+    duration: "2min",
+    description: "最强视频模型快速版，会员专属通道，15s音画同步",
+  },
+  {
+    label: "Seedance 2.0 Mini",
+    duration: "2min",
+    description: "最强视频模型mini版，高性价比生成，15s音画同步",
+  },
+  {
+    label: "Happy Horse 1.1",
+    duration: "3min",
+    description: "阿里最新视频模型，一致性与视听质量更可控",
+  },
+  {
+    label: "Happy Horse 1.0",
+    duration: "3min",
+    description: "阿里视频模型，支持多参生成",
+  },
+  {
+    label: "Kling O3",
+    duration: "3min",
+    description: "视频编辑模型、参考一致性、音画同出、多镜头",
+  },
+  {
+    label: "Kling 3.0 Turbo",
+    duration: "3min",
+    description: "视频生成模型，高质感、支持多镜头",
+  },
+  {
+    label: "Kling 3.0",
+    duration: "3min",
+    description: "视频生成模型，高质感、支持多镜头",
+  },
+  {
+    label: "Wan 2.7",
+    duration: "3min",
+    description: "全能参考，支持修改视频画面、剧情、环境",
+  },
+  {
+    label: "Kling O1",
+    duration: "3min",
+    description: "可灵一代编辑模型、支持多模态输入",
+  },
+  {
+    label: "Wan 2.6",
+    duration: "3min",
+    description: "音画同步，支持多机位镜头，最长可生15秒视频",
+  },
+  {
+    label: "Hailuo 2.3",
+    duration: "2min",
+    description: "善于表达动作、表情、镜头，更高质感",
+  },
+  {
+    label: "Seedance1.5 Pro",
+    duration: "2min",
+    description: "音画同步，支持多机位镜头，最长可生12秒视频",
+  },
+  {
+    label: "Seedance 1.0 Pro",
+    duration: "2min",
+    description: "高精度提示词理解，40秒生成1080P视频",
+  },
+  {
+    label: "Seedance 1.0 Lite",
+    duration: "1min",
+    description: "轻量快速，一键进行日常视频生成",
+  },
+  {
+    label: "Kling 2.6",
+    duration: "2min",
+    description: "视频生成模型、直出音画同步",
+  },
+  {
+    label: "Hailuo 02",
+    duration: "2min",
+    description: "画质稳定，适合打造运动特效场景",
+  },
+  {
+    label: "Vidu Q2",
+    duration: "3min",
+    description: "多图主体参考，精确控制效果佳",
+  },
+  {
+    label: "Vidu Q2 Pro",
+    description: "Vidu Q2 Pro",
+  },
+  {
+    label: "Vidu Q2 Turbo",
+    description: "Vidu Q2 Turbo",
+  },
+  {
+    label: "Vidu Q3 Pro",
+    duration: "2min",
+    description: "支持主体参考，精确控制效果佳",
+  },
+  {
+    label: "OmniHuman 1.5",
+    duration: "3min",
+    description: "多模态数字人视频生成",
+  },
+  {
+    label: "Kling 2.5",
+    duration: "2min",
+    description: "速度快、效果稳定、性价比高",
+  },
+  {
+    label: "Kling 2.1",
+    duration: "3min",
+    description: "支持首尾帧，图生视频效果更出色",
+  },
+  {
+    label: "Wan 2.2",
+    duration: "3min",
+    description: "支持特效、玩法千变万化",
+  },
+  {
+    label: "Wan 2.5",
+    duration: "3min",
+    description: "支持特效、直出音画同步",
+  },
+  {
+    label: "Pixverse V5.5",
+    duration: "3min",
+    description: "支持特效、玩法丰富",
+  },
+  {
+    label: "Pixverse V5",
+    duration: "3min",
+    description: "支持特效、玩法丰富",
+  },
+  {
+    label: "Hailuo 2.3 Fast",
+    duration: "1min",
+    description: "善于表达动作、表情、镜头，更快速",
+    disabled: true,
+  },
+  {
+    label: "Kling3.0 动作迁移",
+    duration: "8min",
+    description: "动作控制模型，需输入1张图片、1条视频",
+    disabled: true,
+  },
+  {
+    label: "MJ Video",
+    duration: "2min",
+    description: "图生视频效果稳定，画面表现力强",
+    disabled: true,
+  },
+] as const;
+
+const VIDEO_RATIO_OPTIONS = [
+  { label: "Auto", value: "adaptive" },
+  { label: "16:9", value: "16:9" },
+  { label: "4:3", value: "4:3" },
+  { label: "1:1", value: "1:1" },
+  { label: "3:4", value: "3:4" },
+  { label: "9:16", value: "9:16" },
+  { label: "21:9", value: "21:9" },
+] as const;
+
+const VIDEO_RESOLUTION_OPTIONS = ["480P", "720P", "1080P", "4K"] as const;
+const VIDEO_COUNT_OPTIONS = ["1个", "2个", "4个"] as const;
+const VIDEO_AUDIO_OPTIONS = ["开启", "关闭"] as const;
+
+const VIDEO_EFFECT_PRESETS = [
+  { title: "燃烧开场", author: "算法织梦者", count: 57 },
+  { title: "巨人俯瞰", author: "数据星云", count: 114 },
+  { title: "星尘降临", author: "代码极光", count: 235 },
+  { title: "星云漩涡", author: "算力潮汐", count: 57 },
+  { title: "水下慢镜头", author: "算法织梦者", count: 82 },
+  { title: "控雨术", author: "数据星云", count: 168 },
+  { title: "穿云而入", author: "代码极光", count: 93 },
+  { title: "双人对打", author: "算力潮汐", count: 211 },
+  { title: "饰品特写", author: "算法织梦者", count: 74 },
+] as const;
+
+const PRESET_MEDIA_TOOLBAR_ITEMS: Record<PresetMediaToolbarAction, PresetFloatingToolbarItem> = {
+  "first-frame-hd": ["高清", "首帧高清接口待接入。"],
+  "first-frame-outpaint": ["扩图", "首帧扩图接口待接入。"],
+  "first-frame-background": ["替换背景", "背景替换接口待接入。"],
+  "first-frame-download": ["下载", "图片下载接口待接入。"],
+  "audio-beat": ["节奏匹配", "音频节奏解析接口待接入。"],
+  "audio-camera": ["镜头语言", "镜头语言配置接口待接入。"],
+  "audio-sfx": ["生成音效", "音效生成接口待接入。"],
+  "audio-download": ["下载", "素材下载接口待接入。"],
+};
+
 const TOOLBAR_ITEMS: Array<{ id: Exclude<ActivePanel, null>; label: string; icon: LucideIcon }> = [
-  { id: "add", label: "添加模块", icon: Plus },
+  { id: "add", label: "添加节点", icon: Plus },
   { id: "workflow", label: "工具箱", icon: GitBranch },
-  { id: "assets", label: "素材", icon: Layers },
-  { id: "history", label: "历史", icon: Clock3 },
-  { id: "help", label: "帮助", icon: HelpCircle },
-  { id: "support", label: "客服", icon: Headphones },
+  { id: "assets", label: "素材库", icon: Layers },
+  { id: "roleLibrary", label: "角色库", icon: UserRound },
+  { id: "history", label: "历史记录", icon: Clock3 },
+  { id: "shortcuts", label: "快捷键", icon: Keyboard },
+  { id: "tutorial", label: "教程", icon: BookOpen },
 ];
 
 const DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
 const PRESET_VIEWPORT = { x: 144, y: 100, zoom: 0.77 };
 const PRESET_WORKFLOW_CENTER = { x: 1024, y: 512 };
 const CANVAS_EXTENT = 20000;
+const CANVAS_MIN_ZOOM = 0.1;
+const CANVAS_MAX_ZOOM = 8;
+const CANVAS_ZOOM_STEP = 0.2;
+const ASSET_MANAGER_DEFAULT_WIDTH = 240;
+const ASSET_MANAGER_MIN_WIDTH = 240;
+const ASSET_MANAGER_MAX_WIDTH = 520;
 const OFFICIAL_NODE_GAP = 100;
+const TOOLBOX_TEMPLATE_VIEWPORT = { x: 137.4, y: 529, zoom: 0.1 };
+const TOOLBOX_TEMPLATE_GROUP_FRAME = {
+  height: 658,
+  width: 1493,
+  x: 6010,
+  y: -1440,
+};
+const VIDEO_SUBTITLE_ERASE_SIMULATED_MS = 42_000;
 const OFFICIAL_TEXT_RESOURCE_HEIGHT = 330;
 const OFFICIAL_TEXT_RESOURCE_WIDTH = 560;
 const OFFICIAL_IMAGE_TOOLBAR_SCALE = 0.7;
 const OFFICIAL_COMPOSER_SCALE = 0.546;
-const OFFICIAL_ZOOM_DOCK_SCALE = 0.65;
 const OFFICIAL_DROPDOWN_SCALE = 0.7;
 const OFFICIAL_NINE_GRID_WIDTH = 930;
 const OFFICIAL_NINE_GRID_HEIGHT = 520;
@@ -622,9 +1242,43 @@ const LOCAL_EDIT_COLORS = [
   "#8d6e63",
 ];
 const VIDEO_CLIP_FRAME_COUNT = 9;
+const VIDEO_CROP_INLINE_LABEL = "1024 x 576";
+const VIDEO_CROP_OUTPUT_LABEL = "1024 × 576";
+const VIDEO_CROP_RECT = { x: 0.1, y: 0.1, width: 0.8, height: 0.8 };
 const STORY_BEAT_GRID_FUNCTION_KEY = "story-beat-grid-4";
 const MULTI_VIEW_NINE_GRID_FUNCTION_KEY = "multi-view-nine-grid";
 const CONTINUOUS_STORYBOARD_GRID_FUNCTION_KEY = "continuous-storyboard-grid-25";
+
+function clampCanvasZoom(value: number) {
+  return Math.min(CANVAS_MAX_ZOOM, Math.max(CANVAS_MIN_ZOOM, Number(value.toFixed(2))));
+}
+
+function clampAssetManagerWidth(value: number) {
+  return Math.min(ASSET_MANAGER_MAX_WIDTH, Math.max(ASSET_MANAGER_MIN_WIDTH, Math.round(value)));
+}
+
+function arrangeNodesForPreview(nodes: CloneNode[]) {
+  if (nodes.length <= 1) return nodes;
+  const orderedNodes = [...nodes].sort((first, second) => first.y - second.y || first.x - second.x);
+  const columns = Math.max(1, Math.ceil(Math.sqrt(nodes.length * 1.2)));
+  const cellWidth = Math.max(360, ...nodes.map((node) => node.width)) + OFFICIAL_NODE_GAP;
+  const cellHeight = Math.max(260, ...nodes.map((node) => node.height)) + OFFICIAL_NODE_GAP;
+  const arrangedById = new Map<string, Pick<CloneNode, "x" | "y">>();
+
+  orderedNodes.forEach((node, index) => {
+    const column = index % columns;
+    const row = Math.floor(index / columns);
+    arrangedById.set(node.id, {
+      x: column * cellWidth,
+      y: row * cellHeight,
+    });
+  });
+
+  return nodes.map((node) => {
+    const arranged = arrangedById.get(node.id);
+    return arranged ? { ...node, ...arranged } : node;
+  });
+}
 const CINEMATIC_LIGHTING_CORRECTION_FUNCTION_KEY = "cinematic-lighting-correction";
 const CHARACTER_THREE_VIEW_FUNCTION_KEY = "character-three-view";
 const FRAME_PREDICTION_PLUS_3S_FUNCTION_KEY = "frame-prediction-plus-3s";
@@ -725,6 +1379,57 @@ const STORY_SCRIPT_TEXT = `《我在盛唐写天下》
 沈昭昭目光坚定。她轻声自语：“既然来了……那便写尽三万里长安。”
 镜头推远。盛唐山河展开。`;
 
+const DEFAULT_STORY_SCRIPT_ROWS: StoryScriptRow[] = [
+  {
+    id: "story-fallback-01",
+    shot: "01",
+    duration: "5s",
+    scene: "现代办公室",
+    sceneDescription: "深夜加班，键盘声急促，人物体力透支，电脑蓝光映在苍白脸上。",
+    shotSize: "中景",
+    lighting: "冷蓝灰低饱和，屏幕蓝光照亮脸部，压抑疲惫",
+    dialogue: "+",
+    backgroundMusic: "低频悬疑氛围",
+    voiceAndSfx: "环境键盘声、手机提示音",
+    cameraMovement: "缓慢推镜头",
+    imagePrompt: "现代办公室深夜加班，年轻女性伏案，电脑蓝光，疲惫神情，电影级光影，近景",
+    motionPrompt: "中近景缓慢推进，蓝光闪烁，人物抬头后画面黑屏转场。",
+    keyframeUrl: "",
+  },
+  {
+    id: "story-fallback-02",
+    shot: "02",
+    duration: "6s",
+    scene: "盛唐大殿",
+    sceneDescription: "女主惊醒跪于金銮殿，百官压迫，刀光映入瞳孔，皇帝俯视审判。",
+    shotSize: "全景",
+    lighting: "强烈暖金主光，庄严压迫",
+    dialogue: "既言才华盖世，当殿作诗。若不能--斩。",
+    backgroundMusic: "鼓声与低频",
+    voiceAndSfx: "朝堂回声、刀刃声",
+    cameraMovement: "快速摇镜头，从下往上展现大殿",
+    imagePrompt: "盛唐金銮殿，女主男装官服跪在殿中，百官列立压迫感，皇帝龙椅俯视，史诗电影感",
+    motionPrompt: "低角度仰拍女主，再切皇帝俯视，镜头压迫式前推。",
+    keyframeUrl: "",
+  },
+  {
+    id: "story-fallback-03",
+    shot: "03",
+    duration: "6s",
+    scene: "长安街市",
+    sceneDescription: "诗声落下，群臣震动，长安街市灯火连绵，盛唐山河展开。",
+    shotSize: "大远景",
+    lighting: "暖色夕光，极度开阔明亮",
+    dialogue: "既然来了……那便写尽三万里长安。",
+    backgroundMusic: "史诗音乐起",
+    voiceAndSfx: "风声、街市人声、诗句回响",
+    cameraMovement: "极速拉高、后退，展露全貌",
+    imagePrompt: "盛唐长安街市灯火连绵，宫殿与山河远景展开，女主背影坚定，宏大史诗感，暖色夕光",
+    motionPrompt: "镜头从人物背影快速拉远，展示长安城与山河全景。",
+    keyframeUrl: "",
+  },
+];
+
 function normalizeCanvasTitle(title?: string | null) {
   const value = String(title || "").trim();
   if (!value || value === "未命名视频画布") return "未命名";
@@ -762,6 +1467,24 @@ function requiresMedia(tool?: CapturedTool) {
   });
 }
 
+function getToolFunctionKey(tool?: CapturedTool) {
+  const config = tool?.metadata?.config;
+  const configuredKey =
+    config && typeof config === "object" && !Array.isArray(config)
+      ? (config as Record<string, unknown>).functionKey
+      : undefined;
+  return String(configuredKey || tool?.toolKey || "").trim();
+}
+
+function getToolRoute(tool?: CapturedTool) {
+  const config = tool?.metadata?.config;
+  const configuredRoute =
+    config && typeof config === "object" && !Array.isArray(config)
+      ? (config as Record<string, unknown>).route
+      : undefined;
+  return String(configuredRoute || tool?.metadata?.route || "").trim();
+}
+
 function getPropertyLabel(key: string, config: unknown) {
   if (config && typeof config === "object" && "displayName" in config) {
     const value = (config as { displayName?: unknown }).displayName;
@@ -926,6 +1649,11 @@ function createToolNode(tool: CapturedTool, x: number, y: number): CloneNode {
   const meta = TOOL_TYPE_META[type] || TOOL_TYPE_META.video;
   const isAudio = type === "audio";
   const isText = type === "text";
+  const toolConfig = tool.metadata?.config;
+  const draftValues =
+    toolConfig && typeof toolConfig === "object" && !Array.isArray(toolConfig)
+      ? { ...toolConfig }
+      : {};
   return {
     id: makeId("tool"),
     kind: isAudio ? "audio" : isText ? "text" : "model",
@@ -937,7 +1665,7 @@ function createToolNode(tool: CapturedTool, x: number, y: number): CloneNode {
     height: isText ? 122 : 116,
     accent: meta.accent,
     tool,
-    draftValues: {},
+    draftValues,
   };
 }
 
@@ -957,6 +1685,25 @@ function createWorkflowNode(workflow: WorkflowPreset, x: number, y: number): Clo
   };
 }
 
+function createToolboxTemplateGroupNode(title: string): CloneNode {
+  return {
+    id: makeId("group"),
+    kind: "workflow",
+    title: "分组 3 个节点",
+    subtitle: title,
+    x: TOOLBOX_TEMPLATE_GROUP_FRAME.x,
+    y: TOOLBOX_TEMPLATE_GROUP_FRAME.y,
+    width: TOOLBOX_TEMPLATE_GROUP_FRAME.width,
+    height: TOOLBOX_TEMPLATE_GROUP_FRAME.height,
+    accent: "#ffffff",
+    draftValues: {
+      action: "TOOLBOX_TEMPLATE_GROUP",
+      nodeType: "group",
+      templateName: title,
+    },
+  };
+}
+
 function createSimpleNode(title: string, kind: CloneNodeKind, x: number, y: number): CloneNode {
   return {
     id: makeId(kind),
@@ -978,21 +1725,44 @@ function createTargetModuleNode(kind: AddModuleKind, x: number, y: number, index
     return {
       id: makeId("script"),
       kind: "script",
-      title: `脚本 ${index}`,
+      title: "脚本生成器",
       subtitle: "脚本生成",
       inputType: "text",
       x,
       y,
-      width: 438,
-      height: 470,
+      width: 350,
+      height: 350,
       accent: "#f0d06b",
       draftValues: {
         action: "SCRIPT_GENERATE",
         generatorType: "DEFAULT",
-        nodeType: "script",
+        nodeType: "script-v2",
         rows: [],
         scriptRole: "generator",
-        viewMode: "table",
+        viewMode: "card",
+      },
+    };
+  }
+
+  if (kind === "legacy-script") {
+    return {
+      id: makeId("script"),
+      kind: "script",
+      title: "脚本生成器",
+      subtitle: "脚本生成",
+      inputType: "text",
+      x,
+      y,
+      width: 350,
+      height: 350,
+      accent: "#f0d06b",
+      draftValues: {
+        action: "SCRIPT_GENERATE",
+        generatorType: "DEFAULT",
+        nodeType: "legacy-script",
+        rows: [],
+        scriptRole: "generator",
+        viewMode: "card",
       },
     };
   }
@@ -1006,8 +1776,8 @@ function createTargetModuleNode(kind: AddModuleKind, x: number, y: number, index
       inputType: "video",
       x,
       y,
-      width: 436,
-      height: 470,
+      width: 350,
+      height: 350,
       accent: "#ffb8c8",
       draftValues: {
         action: "VIDEO_CLIP_RESOURCE",
@@ -1018,7 +1788,30 @@ function createTargetModuleNode(kind: AddModuleKind, x: number, y: number, index
     };
   }
 
-  const meta: Record<Exclude<AddModuleKind, "script" | "video-clip">, {
+  if (kind === "director") {
+    return {
+      id: makeId("director"),
+      kind: "model",
+      title: `导演台 ${index}`,
+      subtitle: "3D导演台",
+      x,
+      y,
+      width: 350,
+      height: 350,
+      accent: "#9bd6ff",
+      draftValues: {
+        action: "DIRECTOR_CONSOLE_3D",
+        consoleType: "director-console-3d",
+        nodeType: "director",
+        params: {
+          activeCamera: "机位1",
+          fov: 50,
+        },
+      },
+    };
+  }
+
+  const meta: Record<Exclude<AddModuleKind, "script" | "legacy-script" | "video-clip" | "director">, {
     action: string;
     accent: string;
     kind: CloneNodeKind;
@@ -1060,7 +1853,8 @@ function createTargetModuleNode(kind: AddModuleKind, x: number, y: number, index
     },
   };
   const item = meta[kind];
-  const isWideModule = item.nodeType === "image" || item.nodeType === "video";
+  const isSquareModule = item.nodeType === "text" || item.nodeType === "image" || item.nodeType === "audio";
+  const isVideoModule = item.nodeType === "video";
   return {
     id: makeId(kind),
     kind: item.kind,
@@ -1069,8 +1863,8 @@ function createTargetModuleNode(kind: AddModuleKind, x: number, y: number, index
     inputType: item.nodeType,
     x,
     y,
-    width: isWideModule ? 773 : 436,
-    height: 470,
+    width: isSquareModule ? 350 : isVideoModule ? 622 : 436,
+    height: isSquareModule || isVideoModule ? 350 : 470,
     accent: item.accent,
     draftValues: {
       action: item.action,
@@ -1167,6 +1961,196 @@ function createMediaResourceNode({
   };
 }
 
+function createMaterialStyleNode({
+  author,
+  count,
+  model,
+  thumbnailUrl,
+  title,
+  x,
+  y,
+}: {
+  author: string;
+  count: number;
+  model?: string;
+  thumbnailUrl: string;
+  title: string;
+  x: number;
+  y: number;
+}): CloneNode {
+  return {
+    id: makeId("style"),
+    kind: "material-style",
+    title: `素材-风格-${title}`,
+    subtitle: "风格素材",
+    inputType: "image",
+    x,
+    y,
+    width: MATERIAL_STYLE_NODE_SIZE,
+    height: MATERIAL_STYLE_NODE_SIZE,
+    accent: "#09caf5",
+    draftValues: {
+      action: "MATERIAL_STYLE",
+      author,
+      generated: true,
+      mediaType: "image",
+      mediaUrl: thumbnailUrl,
+      model: model || "",
+      nodeType: "material-style",
+      styleTitle: title,
+      thumbnailUrl,
+      usageCount: count,
+      url: [thumbnailUrl],
+    },
+  };
+}
+
+function createMaterialEffectNode({
+  preset,
+  x,
+  y,
+}: {
+  preset: VideoCanvasEffectPreset;
+  x: number;
+  y: number;
+}): CloneNode {
+  return {
+    id: makeId("effect"),
+    kind: "material-effect",
+    title: `素材-特效-${preset.title}`,
+    subtitle: "视频特效素材",
+    x,
+    y,
+    width: MATERIAL_STYLE_NODE_SIZE,
+    height: MATERIAL_STYLE_NODE_SIZE,
+    accent: "#09caf5",
+    draftValues: {
+      action: "MATERIAL_EFFECT",
+      author: preset.author,
+      commercial: preset.commercial,
+      effectId: preset.id,
+      effectPrompt: preset.prompt,
+      effectTitle: preset.title,
+      generated: true,
+      mediaUrl: preset.thumbnailUrl,
+      model: preset.model,
+      nodeType: "material-effect",
+      thumbnailUrl: preset.thumbnailUrl,
+      usageCount: preset.usageCount,
+      url: [preset.thumbnailUrl],
+    },
+  };
+}
+
+function createMaterialRoleNode({
+  preset,
+  x,
+  y,
+}: {
+  preset: VideoCanvasRolePreset;
+  x: number;
+  y: number;
+}): CloneNode {
+  return {
+    id: makeId("role"),
+    kind: "material-role",
+    title: `素材-角色-${preset.name}`,
+    subtitle: "视频角色素材",
+    x,
+    y,
+    width: MATERIAL_STYLE_NODE_SIZE,
+    height: MATERIAL_STYLE_NODE_SIZE,
+    accent: "#09caf5",
+    draftValues: {
+      action: "MATERIAL_ROLE",
+      assetId: preset.assetId,
+      compliant: preset.compliant,
+      generated: true,
+      mediaUrl: preset.images.full,
+      nodeType: "material-role",
+      roleDescription: preset.description,
+      roleId: preset.id,
+      roleName: preset.name,
+      rolePrompt: preset.prompt,
+      roleTags: preset.tags,
+      thumbnailUrl: preset.images.full,
+      url: [preset.images.full],
+    },
+  };
+}
+
+function createHistoryDemoAssetNode({
+  id,
+  mediaType,
+  mediaUrl,
+  title,
+}: {
+  id: string;
+  mediaType: NonNullable<CloneNode["inputType"]>;
+  mediaUrl: string;
+  title: string;
+}): CloneNode {
+  const label = mediaType === "video" ? "视频" : mediaType === "audio" ? "音频" : "图片";
+  return {
+    id,
+    kind: "media",
+    title,
+    subtitle: `${label}资源`,
+    inputType: mediaType,
+    x: 0,
+    y: 0,
+    width: mediaType === "audio" ? 430 : mediaType === "video" ? 560 : 420,
+    height: mediaType === "audio" ? 170 : mediaType === "video" ? 315 : 280,
+    accent: mediaType === "audio" ? "#9ee6bb" : mediaType === "video" ? "#8b96ff" : "#8790ff",
+    draftValues: {
+      action: `${mediaType.toUpperCase()}_RESOURCE`,
+      alt: title,
+      generated: true,
+      historyDemo: true,
+      mediaType,
+      mediaUrl,
+      nodeType: mediaType,
+      url: [mediaUrl],
+    },
+  };
+}
+
+const DEFAULT_IMAGE_HISTORY_NODES: CloneNode[] = [
+  ["history-demo-image-1", "角色图", CHARACTER_IMAGE_URL],
+  ["history-demo-image-2", "角色三视图", CHARACTER_THREE_VIEW_URL],
+  ["history-demo-image-3", "首帧", FIRST_FRAME_IMAGE_URL],
+  ["history-demo-image-4", "音频参考图", AUDIO_REFERENCE_IMAGE_URL],
+  ["history-demo-image-5", "高清图片", HD_IMAGE_SOURCE_URL],
+  ["history-demo-image-6", "视频首帧", VIDEO_FIRST_FRAME_SOURCE_URL],
+  ["history-demo-image-7", "首尾帧-首帧", VIDEO_FIRST_LAST_FIRST_URL],
+  ["history-demo-image-8", "首尾帧-尾帧", VIDEO_FIRST_LAST_LAST_URL],
+].map(([id, title, mediaUrl]) => createHistoryDemoAssetNode({ id, mediaType: "image", mediaUrl, title }));
+
+const DEFAULT_VIDEO_HISTORY_NODES: CloneNode[] = Array.from({ length: 10 }, (_, index) =>
+  createHistoryDemoAssetNode({
+    id: `history-demo-video-${index + 1}`,
+    mediaType: "video",
+    mediaUrl: SCRIPT_VIDEO_REFERENCE_URL,
+    title: `分镜视频-#${index + 1}`,
+  })
+);
+
+const DEFAULT_AUDIO_HISTORY_NODES: CloneNode[] = Array.from({ length: 6 }, (_, index) =>
+  createHistoryDemoAssetNode({
+    id: `history-demo-audio-${index + 1}`,
+    mediaType: "audio",
+    mediaUrl: AUDIO_SOURCE_URL,
+    title: `示例音频-#${index + 1}`,
+  })
+);
+
+const HISTORY_ASSET_ZOOM_LEVELS = [
+  { cardSize: 130, label: "75%" },
+  { cardSize: 144, label: "100%" },
+  { cardSize: 182, label: "125%" },
+  { cardSize: 248, label: "150%" },
+] as const;
+
 function createNineGridCompositeNode({
   anchor,
   columns,
@@ -1282,6 +2266,22 @@ function getDraftString(node: CloneNode | null | undefined, key: string) {
   return typeof value === "string" ? value : "";
 }
 
+function isVideoEffectMaterialNode(node: CloneNode | null | undefined) {
+  return Boolean(
+    node &&
+      (node.kind === "material-effect" ||
+        getDraftString(node, "action") === "MATERIAL_EFFECT"),
+  );
+}
+
+function isVideoRoleMaterialNode(node: CloneNode | null | undefined) {
+  return Boolean(
+    node &&
+      (node.kind === "material-role" ||
+        getDraftString(node, "action") === "MATERIAL_ROLE"),
+  );
+}
+
 function getDraftNumber(node: CloneNode | null | undefined, key: string, fallback = 0) {
   const value = node?.draftValues?.[key];
   const numericValue = typeof value === "number" ? value : Number(value);
@@ -1332,6 +2332,49 @@ function getNodeReferenceMediaUrl(node: CloneNode | null | undefined) {
   return getNodeMediaUrl(node) || getDraftString(node, "sourceUrl");
 }
 
+function normalizeVideoCanvasMagicMarks(value: unknown): VideoCanvasMagicMark[] {
+  if (!Array.isArray(value)) return [];
+  return value
+    .map((item) => {
+      if (!item || typeof item !== "object" || Array.isArray(item)) return null;
+      const record = item as Record<string, unknown>;
+      const sourceNodeId = String(record.sourceNodeId || "").trim();
+      const imageUrl = String(record.imageUrl || "").trim();
+      const labelOptions = Array.from(
+        new Set(
+          (Array.isArray(record.labelOptions) ? record.labelOptions : [record.label])
+            .map((label) => String(label || "").trim().slice(0, 8))
+            .filter(Boolean)
+        )
+      ).slice(0, 4);
+      if (!sourceNodeId || !imageUrl || labelOptions.length === 0) return null;
+      const clickX = Math.max(0, Math.min(1, Number(record.clickX) || 0));
+      const clickY = Math.max(0, Math.min(1, Number(record.clickY) || 0));
+      const selectedIndex = Math.max(
+        0,
+        Math.min(labelOptions.length - 1, Number(record.selectedIndex) || 0)
+      );
+      return {
+        clickX,
+        clickY,
+        id: String(record.id || `${sourceNodeId}_${labelOptions[0]}`).trim(),
+        imageUrl,
+        labelOptions,
+        selectedIndex,
+        sourceNodeId,
+      } satisfies VideoCanvasMagicMark;
+    })
+    .filter((item): item is VideoCanvasMagicMark => Boolean(item));
+}
+
+function getVideoCanvasMagicMarks(node: CloneNode | null | undefined) {
+  if (!node) return [];
+  const params = getNodeParams(node);
+  return normalizeVideoCanvasMagicMarks(
+    node.draftValues?.magicMarks || params.magicMarks
+  );
+}
+
 function getNodeGridSplitSourceUrl(node: CloneNode | null | undefined) {
   return getNodeMediaUrl(node) || getNodeSourceMediaUrl(node);
 }
@@ -1375,6 +2418,20 @@ function formatClipDurationLabel(seconds: number) {
   return `${normalized.toFixed(2)} s`;
 }
 
+function formatVideoTimestamp(seconds: number) {
+  const normalized = Math.max(0, Math.round(seconds));
+  const minutes = Math.floor(normalized / 60);
+  const remainder = normalized % 60;
+  return `${minutes}:${String(remainder).padStart(2, "0")}`;
+}
+
+function formatAudioTimestamp(seconds: number) {
+  const normalized = Math.max(0, Math.round(seconds));
+  const minutes = Math.floor(normalized / 60);
+  const remainder = normalized % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
+}
+
 function normalizeVideoClipRange(value: unknown): VideoClipRange {
   if (!value || typeof value !== "object") return { start: 0.18, end: 0.52 };
   const candidate = value as Partial<VideoClipRange>;
@@ -1389,67 +2446,922 @@ function normalizeVideoClipRange(value: unknown): VideoClipRange {
   };
 }
 
+function formatVideoStoryNumber(value: unknown, fallback: number) {
+  const text = String(value ?? "").trim();
+  if (text) return text.replace(/\s*秒$/i, "").replace(/\s*s$/i, "");
+  const numericValue = Number.isFinite(fallback) ? fallback : 0;
+  return Number.isInteger(numericValue)
+    ? String(numericValue)
+    : String(Number(numericValue.toFixed(1))).replace(/\.0$/, "");
+}
+
+function formatVideoStoryShot(value: unknown, index: number) {
+  const text = String(value ?? "").trim();
+  return text || String(index + 1);
+}
+
+function cleanVideoStoryText(value: unknown, fallback: string) {
+  const text = String(value ?? "").trim();
+  return text || fallback;
+}
+
 function buildVideoAnalysisRows(node: CloneNode, responseData?: VideoAnalysisResponsePayload): VideoAnalysisRow[] {
   const previewUrl = getVideoNodePreviewUrl(node) || getNodeMediaUrl(node) || "";
   const modelRows = Array.isArray(responseData?.analysisRows) ? responseData.analysisRows : [];
   const framePreviews = Array.isArray(responseData?.framePreviews)
     ? responseData.framePreviews.map((item) => String(item || "").trim()).filter(Boolean)
     : [];
-  if (modelRows.length > 0) {
-    return modelRows.slice(0, 8).map((row, index) => ({
+  const videoDuration = Math.max(1, Math.round(getVideoNodeDurationSeconds(node)));
+  const defaultEndTime = formatVideoStoryNumber(undefined, videoDuration);
+  const summary = responseData?.summary?.trim() || "";
+  const fallbackPrompt = summary || responseData?.raw?.trim() || `${node.title} 的连续镜头推演`;
+  const createRow = (
+    row: Partial<VideoAnalysisResponseRow> & Record<string, unknown>,
+    index: number,
+  ): VideoAnalysisRow => {
+    const sceneDescription = cleanVideoStoryText(
+      row.sceneDescription || row.description || row.pictureDescription,
+      index === 0 ? `${node.title} 开场镜头` : `镜头 ${index + 1}`
+    );
+    const narrative = cleanVideoStoryText(
+      row.narrative || row.story || row.storyContent || row.summary,
+      sceneDescription
+    );
+    const motionPrompt = cleanVideoStoryText(
+      row.motionPrompt || row.videoPrompt,
+      "The camera slowly pushes toward the main subject while the action continues naturally and smoothly."
+    );
+
+    return {
       id: `${node.id}-analysis-${index}`,
-      sceneDescription: String(row.sceneDescription || `镜头 ${index + 1}`).trim(),
-      backgroundMusic: String(row.backgroundMusic || "无").trim(),
-      voiceAndSfx: String(row.voiceAndSfx || "无").trim(),
-      imagePrompt: String(row.imagePrompt || row.sceneDescription || `${node.title} 关键帧`).trim(),
-      motionPrompt: String(row.motionPrompt || "保持镜头运动自然、连贯。").trim(),
+      shot: formatVideoStoryShot(row.shot || row.shotNumber || row.index, index),
+      startTime: formatVideoStoryNumber(row.startTime, index === 0 ? 0 : index * videoDuration),
+      endTime: formatVideoStoryNumber(row.endTime, (index + 1) * videoDuration),
+      duration: formatVideoStoryNumber(row.duration, videoDuration),
+      sceneDescription,
+      narrative,
+      shotSize: cleanVideoStoryText(row.shotSize || row.frameSize, "中景至近景"),
+      cameraAngle: cleanVideoStoryText(row.cameraAngle || row.angle, "平视"),
+      cameraMovement: cleanVideoStoryText(row.cameraMovement || row.cameraMove, "缓慢推镜头 (Slow Zoom In)"),
+      focusDepth: cleanVideoStoryText(row.focusDepth || row.depthOfField, "浅景深"),
+      lighting: cleanVideoStoryText(row.lighting || row.light, "冷调低沉照明，主体光线柔和。"),
+      backgroundMusic: cleanVideoStoryText(row.backgroundMusic || row.music, "无"),
+      voiceAndSfx: cleanVideoStoryText(row.voiceAndSfx || row.audio || row.sfx, "无"),
+      imagePrompt: cleanVideoStoryText(row.imagePrompt || row.sceneDescription, fallbackPrompt),
+      motionPrompt,
       keyframeUrl:
-        String(row.keyframeUrl || "").trim() ||
+        String(row.keyframeUrl || row.previewUrl || row.imageUrl || "").trim() ||
         framePreviews[index % Math.max(framePreviews.length, 1)] ||
         previewUrl,
-    }));
+    };
+  };
+
+  if (modelRows.length > 0) {
+    return modelRows.slice(0, 8).map((row, index) => createRow(row, index));
   }
   const highlights = responseData?.highlights || [];
   const shotIdeas = responseData?.shotIdeas?.slice(0, 3) || [];
-  const summary = responseData?.summary?.trim() || "";
-  const fallbackPrompt = summary || responseData?.raw?.trim() || `${node.title} 的连续镜头推演`;
   const rows =
     shotIdeas.length > 0
-      ? shotIdeas.map((idea, index) => ({
-          id: `${node.id}-analysis-${index}`,
-          sceneDescription: idea.title || `镜头 ${index + 1}`,
-          backgroundMusic: highlights[index] || highlights[0] || "氛围音乐待接入",
-          voiceAndSfx: highlights[index + 1] || "无",
-          imagePrompt: idea.description || fallbackPrompt,
-          motionPrompt:
-            responseData?.recommendedNextSteps?.[index] ||
-            "保持镜头运动自然平稳，围绕主体动作推进。",
-          keyframeUrl: framePreviews[index % Math.max(framePreviews.length, 1)] || previewUrl,
-        }))
+      ? shotIdeas.map((idea, index) =>
+          createRow(
+            {
+              backgroundMusic: highlights[index] || highlights[0] || "氛围音乐待接入",
+              imagePrompt: idea.description || fallbackPrompt,
+              motionPrompt:
+                responseData?.recommendedNextSteps?.[index] ||
+                "The camera moves smoothly around the subject and keeps the action continuous.",
+              narrative: idea.description || fallbackPrompt,
+              sceneDescription: idea.title || `镜头 ${index + 1}`,
+              voiceAndSfx: highlights[index + 1] || "无",
+            },
+            index
+          )
+        )
       : [
-          {
-            id: `${node.id}-analysis-0`,
-            sceneDescription: `${node.title} 开场镜头`,
-            backgroundMusic: highlights[0] || "轻氛围背景音乐",
-            voiceAndSfx: highlights[1] || "无",
-            imagePrompt: fallbackPrompt,
-            motionPrompt: "中景起势，镜头跟随主体动作缓慢推进。",
-            keyframeUrl: framePreviews[0] || previewUrl,
-          },
-          {
-            id: `${node.id}-analysis-1`,
-            sceneDescription: `${node.title} 情绪推进`,
-            backgroundMusic: highlights[2] || highlights[0] || "音乐情绪逐渐抬升",
-            voiceAndSfx: highlights[3] || "环境声增强",
-            imagePrompt: fallbackPrompt,
-            motionPrompt: "切换近景，强调表情和动作细节。",
-            keyframeUrl: framePreviews[1] || framePreviews[0] || previewUrl,
-          },
+          createRow(
+            {
+              backgroundMusic: highlights[0] || "低沉的氛围电子乐，带有缓慢的机械节拍感。",
+              endTime: defaultEndTime,
+              imagePrompt: fallbackPrompt,
+              motionPrompt:
+                "The subject moves subtly while the camera slowly dollies in, keeping the scene cinematic and continuous.",
+              narrative: summary || "通过主要角色、环境和镜头运动呈现当前视频的叙事情绪。",
+              sceneDescription: `${node.title} 开场镜头`,
+              startTime: "0",
+              voiceAndSfx: highlights[1] || "环境声与轻微动作声。",
+            },
+            0
+          ),
         ];
 
   return rows;
 }
 
+function createVideoStoryAnalysisNode({
+  existingNode,
+  framePreviews = [],
+  sourceNode,
+  rows,
+  summary,
+  error,
+}: {
+  error?: string;
+  existingNode?: CloneNode;
+  framePreviews?: string[];
+  sourceNode: CloneNode;
+  rows: VideoAnalysisRow[];
+  summary: string;
+}): CloneNode {
+  const previewUrl = getVideoNodePreviewUrl(sourceNode) || getNodeMediaUrl(sourceNode) || "";
+  return {
+    id: existingNode?.id || makeId("video-story"),
+    kind: "video-story",
+    title: "视频故事",
+    subtitle: "视频解析结果",
+    inputType: "text",
+    x: existingNode?.x ?? Math.round(sourceNode.x - 720),
+    y: existingNode?.y ?? Math.round(sourceNode.y + sourceNode.height + 620),
+    width: existingNode?.width ?? 800,
+    height: existingNode?.height ?? 400,
+    accent: "#8b96ff",
+    draftValues: {
+      ...(existingNode?.draftValues || {}),
+      action: "VIDEO_STORY_ANALYSIS",
+      error: error || undefined,
+      framePreviews,
+      generated: true,
+      keyframeUrl: previewUrl,
+      mediaType: "text",
+      nodeType: "video-story",
+      rows,
+      sourceVideoNodeId: sourceNode.id,
+      sourceVideoTitle: sourceNode.title,
+      status: error ? "error" : "ready",
+      summary,
+    },
+  };
+}
+
+function normalizeVideoHdResolutionOption(option: string) {
+  const text = option.trim();
+  if (/^(1080P|2K|4K)$/i.test(text)) return text.toUpperCase();
+  return "1080P";
+}
+
+function createVideoHdUpscaleNode({
+  existingNode,
+  option,
+  sourceNode,
+}: {
+  existingNode?: CloneNode;
+  option: string;
+  sourceNode: CloneNode;
+}): CloneNode {
+  const resolution = normalizeVideoHdResolutionOption(option);
+  const sourceUrl = getNodeReferenceMediaUrl(sourceNode);
+  return {
+    id: existingNode?.id || makeId("video-hd"),
+    kind: "model",
+    title: `高清（${resolution}）`,
+    subtitle: "配置参数",
+    inputType: "video",
+    x: existingNode?.x ?? Math.round(sourceNode.x),
+    y: existingNode?.y ?? Math.round(sourceNode.y + sourceNode.height + OFFICIAL_NODE_GAP),
+    width: existingNode?.width ?? 350,
+    height: existingNode?.height ?? 350,
+    accent: "#8b96ff",
+    draftValues: {
+      ...(existingNode?.draftValues || {}),
+      action: "VIDEO_HD_UPSCALE",
+      frameInterpolation: option === "不补帧" ? "不补帧" : existingNode?.draftValues?.frameInterpolation || "不补帧",
+      generated: existingNode?.draftValues?.generated || false,
+      hdEngine: option === "Topazlabs" ? "Topazlabs" : existingNode?.draftValues?.hdEngine || "Topazlabs",
+      hdResolution: resolution,
+      mediaType: "video",
+      nodeType: "video-hd",
+      outputSizeLabel: resolution === "4K" ? "3840 × 2160" : resolution === "2K" ? "2560 × 1440" : "1920 × 1080",
+      scale: option === "1x" ? "1x" : existingNode?.draftValues?.scale || "1x",
+      sourceVideoNodeId: sourceNode.id,
+      sourceVideoTitle: sourceNode.title,
+      sourceUrl,
+      url: existingNode?.draftValues?.url || [],
+    },
+  };
+}
+
+function createVideoCropResultNode({
+  existingIndex,
+  sourceNode,
+}: {
+  existingIndex: number;
+  sourceNode: CloneNode;
+}): CloneNode {
+  const sourceUrl = getNodeReferenceMediaUrl(sourceNode) || SCRIPT_VIDEO_REFERENCE_URL;
+  const previewUrl = getVideoNodePreviewUrl(sourceNode) || sourceUrl;
+  const width = sourceNode.width || 560;
+  const height = sourceNode.height || 315;
+  return {
+    id: makeId("video"),
+    kind: "media",
+    title: `${sourceNode.title || "视频"}_裁剪`,
+    subtitle: "裁剪中",
+    inputType: "video",
+    x: Math.round(sourceNode.x + sourceNode.width + OFFICIAL_NODE_GAP),
+    y: Math.round(sourceNode.y + existingIndex * (height + OFFICIAL_NODE_GAP)),
+    width,
+    height,
+    accent: "#8b96ff",
+    draftValues: {
+      action: "VIDEO_CROP",
+      cropRect: VIDEO_CROP_RECT,
+      durationSeconds: getVideoNodeDurationSeconds(sourceNode),
+      generated: false,
+      generationProgress: 37,
+      generationStatus: "pending",
+      mediaType: "video",
+      mediaUrl: "",
+      nodeType: "video",
+      outputSizeLabel: VIDEO_CROP_OUTPUT_LABEL,
+      poster: previewUrl,
+      sourceUrl,
+      sourceVideoNodeId: sourceNode.id,
+      sourceVideoTitle: sourceNode.title,
+      uploadStatus: "uploading",
+      url: [],
+    },
+  };
+}
+
+function createVideoSubtitleEraseNode({
+  existingIndex,
+  mode = "smart",
+  regions = [],
+  sourceNode,
+}: {
+  existingIndex: number;
+  mode?: SubtitleEraseMode;
+  regions?: SubtitleEraseRegion[];
+  sourceNode: CloneNode;
+}): CloneNode {
+  const sourceUrl = getNodeReferenceMediaUrl(sourceNode) || SCRIPT_VIDEO_REFERENCE_URL;
+  const previewUrl = getVideoNodePreviewUrl(sourceNode) || sourceUrl;
+  const outputSizeLabel = getDraftString(sourceNode, "outputSizeLabel") || "1280 × 720";
+  const normalizedRegions = regions.map(({ height, width, x, y }) => ({
+    height: Number(height.toFixed(4)),
+    width: Number(width.toFixed(4)),
+    x: Number(x.toFixed(4)),
+    y: Number(y.toFixed(4)),
+  }));
+  const isRegionErase = mode === "region";
+  return {
+    id: makeId("video"),
+    kind: "media",
+    title: `视频一键去字幕-${sourceNode.title || "视频"}`,
+    subtitle: isRegionErase ? "框选擦除" : "去字幕",
+    inputType: "video",
+    x: Math.round(sourceNode.x + sourceNode.width + OFFICIAL_NODE_GAP),
+    y: Math.round(sourceNode.y - 450 + existingIndex * 390),
+    width: 350,
+    height: 350,
+    accent: "#8b96ff",
+    draftValues: {
+      action: "VIDEO_SUBTITLE_ERASE",
+      cost: 0,
+      durationSeconds: getVideoNodeDurationSeconds(sourceNode),
+      generated: false,
+      generationProgress: 2,
+      generationStatus: "pending",
+      mediaType: "video",
+      mediaUrl: "",
+      mode: isRegionErase ? "Text" : "Subtitle",
+      eraseMode: mode,
+      eraseRatioLocation: normalizedRegions,
+      erase_ratio_location: normalizedRegions,
+      model: "volcano-subtitle-eraser",
+      nodeType: "video",
+      outputSizeLabel,
+      poster: previewUrl,
+      sourceUrl,
+      sourceVideoNodeId: sourceNode.id,
+      sourceVideoTitle: sourceNode.title,
+      url: [],
+    },
+  };
+}
+
+function formatStoryShot(value: unknown, index: number) {
+  const text = String(value || "").trim();
+  if (/^\d+$/.test(text)) return text.padStart(2, "0");
+  return text || String(index + 1).padStart(2, "0");
+}
+
+function normalizeStoryScriptRow(row: unknown, index: number, nodeId: string): StoryScriptRow | null {
+  if (Array.isArray(row)) {
+    const cells = row.map((cell) => String(cell || "").trim());
+    const shot = formatStoryShot(cells[0], index);
+    const secondCellLooksLikeDuration = /^\d+(\.\d+)?\s*(s|秒)?$/i.test(cells[1] || "");
+    const duration = secondCellLooksLikeDuration ? cells[1] || "5s" : "5s";
+    const scene = secondCellLooksLikeDuration ? cells[2] || `镜头 ${shot}` : cells[1] || `镜头 ${shot}`;
+    const sceneDescription = secondCellLooksLikeDuration ? cells[2] || scene : cells[2] || cells[3] || scene;
+    const voiceAndSfx = (secondCellLooksLikeDuration ? cells[6] : cells[3]) || "无";
+    const cameraMovement = (secondCellLooksLikeDuration ? cells[7] : "") || "缓慢推镜头";
+    return {
+      id: `${nodeId}-story-row-${index}`,
+      shot,
+      duration,
+      scene,
+      sceneDescription,
+      shotSize: (secondCellLooksLikeDuration ? cells[3] : "") || "中景",
+      lighting: (secondCellLooksLikeDuration ? cells[4] : cells[4]) || "电影感光影",
+      dialogue: (secondCellLooksLikeDuration ? cells[5] : "") || "+",
+      backgroundMusic: "无",
+      voiceAndSfx,
+      cameraMovement,
+      imagePrompt: (secondCellLooksLikeDuration ? cells[8] : cells[5]) || sceneDescription,
+      motionPrompt:
+        (secondCellLooksLikeDuration ? cells[9] || cameraMovement : cells[6]) ||
+        "保持镜头运动自然、连贯，围绕主体动作推进。",
+      keyframeUrl: "",
+    };
+  }
+
+  if (!row || typeof row !== "object") return null;
+  const record = row as Record<string, unknown>;
+  const shot = formatStoryShot(record.shot || record.id, index);
+  const duration = String(record.duration || record.length || record.time || "5s").trim();
+  const scene = String(record.scene || record.title || record.sceneDescription || `镜头 ${shot}`).trim();
+  const sceneDescription = String(
+    record.sceneDescription ||
+      record.description ||
+      record.summary ||
+      record.imagePrompt ||
+      scene
+  ).trim();
+  const shotSize = String(record.shotSize || record.frameSize || record.sceneScale || "中景").trim();
+  const lighting = String(record.lighting || record.light || record.atmosphere || record.mood || "电影感光影").trim();
+  const dialogue = String(record.dialogue || record.dialog || record.narration || record.voiceover || record.line || "+").trim();
+  const backgroundMusic = String(record.backgroundMusic || record.music || "无").trim();
+  const voiceAndSfx = String(record.voiceAndSfx || record.audio || record.sfx || "无").trim();
+  const cameraMovement = String(
+    record.cameraMovement ||
+      record.cameraMove ||
+      record.movement ||
+      record.lensMovement ||
+      "缓慢推镜头"
+  ).trim();
+  const imagePrompt = String(record.imagePrompt || sceneDescription || scene).trim();
+  const motionPrompt = String(
+    record.motionPrompt ||
+      record.videoPrompt ||
+      cameraMovement ||
+      "保持镜头运动自然、连贯，围绕主体动作推进。"
+  ).trim();
+  const keyframeUrl = String(record.keyframeUrl || record.previewUrl || record.imageUrl || "").trim();
+
+  if (![scene, sceneDescription, imagePrompt, motionPrompt, backgroundMusic, voiceAndSfx].some(Boolean)) {
+    return null;
+  }
+
+  return {
+    id: `${nodeId}-story-row-${index}`,
+    shot,
+    duration,
+    scene,
+    sceneDescription,
+    shotSize,
+    lighting,
+    dialogue,
+    backgroundMusic,
+    voiceAndSfx,
+    cameraMovement,
+    imagePrompt,
+    motionPrompt,
+    keyframeUrl,
+  };
+}
+
+function getStoryScriptRows(node: CloneNode | null | undefined): StoryScriptRow[] {
+  const nodeId = node?.id || "story";
+  const rawRows = Array.isArray(node?.draftValues?.rows) ? node.draftValues.rows : [];
+  const rows = rawRows
+    .map((row, index) => normalizeStoryScriptRow(row, index, nodeId))
+    .filter((row): row is StoryScriptRow => Boolean(row));
+  if (rows.length > 0) return rows;
+  return DEFAULT_STORY_SCRIPT_ROWS.map((row, index) => ({
+    ...row,
+    id: `${nodeId}-story-fallback-${index}`,
+  }));
+}
+
+type StoryWorkflowAsset = {
+  description: string;
+  imageUrl: string;
+  name: string;
+  type: "role" | "scene" | "prop";
+};
+
+const STORY_WORKFLOW_ASSET_FALLBACKS: StoryWorkflowAsset[] = [
+  {
+    description: "现代办公室加班女性，穿越前状态，疲惫压抑。",
+    imageUrl: SCRIPT_CHARACTER_ONE_URL,
+    name: "现代沈昭昭",
+    type: "role",
+  },
+  {
+    description: "盛唐男装官服女主，朝堂危局中的核心角色。",
+    imageUrl: SCRIPT_CHARACTER_TWO_URL,
+    name: "沈昭昭",
+    type: "role",
+  },
+  {
+    description: "龙椅之上威严注视的盛唐皇帝。",
+    imageUrl: CHARACTER_IMAGE_URL,
+    name: "皇帝",
+    type: "role",
+  },
+  {
+    description: "恢弘金色朝堂，百官列立，压迫感强。",
+    imageUrl: FIRST_FRAME_IMAGE_URL,
+    name: "金銮殿",
+    type: "scene",
+  },
+  {
+    description: "晴朗盛唐长安，街市与山河展开。",
+    imageUrl: VIDEO_FIRST_FRAME_SOURCE_URL,
+    name: "长安城白昼",
+    type: "scene",
+  },
+  {
+    description: "夜色长安灯火连绵，结尾史诗气氛。",
+    imageUrl: AUDIO_REFERENCE_IMAGE_URL,
+    name: "长安城夜景",
+    type: "scene",
+  },
+  {
+    description: "侍卫拔刀形成威胁，刀光映入角色瞳孔。",
+    imageUrl: FIRST_FRAME_IMAGE_URL,
+    name: "侍卫长刀",
+    type: "prop",
+  },
+];
+
+function classifyStoryWorkflowAsset(name: string): StoryWorkflowAsset["type"] {
+  if (/殿|城|长安|办公室|街|山河|夜景|白昼|场景/.test(name)) return "scene";
+  if (/刀|剑|笔|卷|书|道具/.test(name)) return "prop";
+  return "role";
+}
+
+function getStoryWorkflowAssetImage(type: StoryWorkflowAsset["type"], index: number) {
+  if (type === "role") {
+    return [SCRIPT_CHARACTER_ONE_URL, SCRIPT_CHARACTER_TWO_URL, CHARACTER_IMAGE_URL][index % 3];
+  }
+  if (type === "scene") {
+    return [FIRST_FRAME_IMAGE_URL, VIDEO_FIRST_FRAME_SOURCE_URL, AUDIO_REFERENCE_IMAGE_URL][index % 3];
+  }
+  return [FIRST_FRAME_IMAGE_URL, CHARACTER_IMAGE_URL][index % 2];
+}
+
+function normalizeStoryWorkflowAssetName(rawName: string) {
+  const knownAsset = STORY_WORKFLOW_ASSET_FALLBACKS.find((asset) => rawName.includes(asset.name));
+  if (knownAsset) return knownAsset.name;
+  return rawName
+    .replace(/(伏案|抬头|猛然|跪|目光|缓缓|站直|吟诵|转身|低声|满脸|发现|身着|看向|穿过|指着|厉声|内|外).*/, "")
+    .trim()
+    .slice(0, 8);
+}
+
+function getStoryWorkflowAssetGroups(rows: StoryScriptRow[]) {
+  const detectedNames = Array.from(
+    new Set(
+      rows.flatMap((row) =>
+        [
+          row.scene,
+          row.sceneDescription,
+          row.dialogue,
+          row.voiceAndSfx,
+          row.imagePrompt,
+          row.motionPrompt,
+        ]
+          .join(" ")
+          .match(/@([\u4e00-\u9fa5A-Za-z0-9_-]{2,18})/g)
+          ?.map((item) => normalizeStoryWorkflowAssetName(item.slice(1)))
+          .filter(Boolean) || []
+      )
+    )
+  );
+  const detectedAssets = detectedNames.map<StoryWorkflowAsset>((name, index) => {
+    const type = classifyStoryWorkflowAsset(name);
+    return {
+      description:
+        type === "role"
+          ? "由脚本中 @ 引用自动抽取的角色资产。"
+          : type === "scene"
+            ? "由脚本镜头引用自动抽取的场景资产。"
+            : "由镜头动作和威胁物件抽取的道具资产。",
+      imageUrl: getStoryWorkflowAssetImage(type, index),
+      name,
+      type,
+    };
+  });
+
+  const byName = new Map<string, StoryWorkflowAsset>();
+  [...detectedAssets, ...STORY_WORKFLOW_ASSET_FALLBACKS].forEach((asset) => {
+    if (!byName.has(asset.name)) byName.set(asset.name, asset);
+  });
+  const assets = Array.from(byName.values());
+  return {
+    prop: assets.filter((asset) => asset.type === "prop"),
+    role: assets.filter((asset) => asset.type === "role"),
+    scene: assets.filter((asset) => asset.type === "scene"),
+  };
+}
+
+function buildStorySceneText(row: StoryScriptRow) {
+  return [
+    `镜号 ${row.shot}｜${row.duration}｜${row.scene}`,
+    "",
+    `画面：${row.sceneDescription}`,
+    `景别：${row.shotSize}`,
+    `光影氛围：${row.lighting}`,
+    `对白/旁白：${row.dialogue}`,
+    `音效：${row.voiceAndSfx}`,
+    `运镜：${row.cameraMovement}`,
+    `图像提示词：${row.imagePrompt}`,
+    `运动提示词：${row.motionPrompt}`,
+    `声音：${[row.backgroundMusic, row.voiceAndSfx].filter((item) => item && item !== "无").join(" / ") || "无"}`,
+  ].join("\n");
+}
+
+function buildStoryVideoPrompt(row: StoryScriptRow) {
+  const motionPrompt = row.motionPrompt.includes("起始状态")
+    ? row.motionPrompt
+    : `起始状态：${row.sceneDescription} 动作过程：${row.cameraMovement}，角色动作自然连贯。 结束状态：镜头停留在关键情绪或剧情转折点。 音效：${row.voiceAndSfx}`;
+  return [
+    row.imagePrompt,
+    motionPrompt,
+    "[视觉风格：盛唐·国风二次元]",
+  ].filter(Boolean).join("\n\n");
+}
+
+function sanitizeDownloadFilename(value: string) {
+  return (value.trim() || "story-script").replace(/[\\/:*?"<>|]+/g, "-").slice(0, 80);
+}
+
+function downloadStoryScriptRows(node: CloneNode, rows: StoryScriptRow[]) {
+  const payload = {
+    exportedAt: new Date().toISOString(),
+    sourceNodeId: node.id,
+    title: node.title,
+    rows,
+  };
+  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${sanitizeDownloadFilename(node.title)}-story-script.json`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+function StoryScriptWorkflowDialog({
+  node,
+  onClose,
+  onRun,
+  onStepChange,
+  step,
+}: {
+  node: CloneNode;
+  onClose: () => void;
+  onRun: () => void;
+  onStepChange: (step: StoryWorkflowStep) => void;
+  step: StoryWorkflowStep;
+}) {
+  const rows = getStoryScriptRows(node);
+  const assetGroups = getStoryWorkflowAssetGroups(rows);
+  const assetCount = assetGroups.role.length + assetGroups.scene.length + assetGroups.prop.length;
+  const [promptRow, setPromptRow] = useState<StoryScriptRow | null>(null);
+  const steps: Array<{ key: StoryWorkflowStep; label: string; subLabel: string }> = [
+    { key: "shots", label: "确认镜头", subLabel: `${rows.length}个镜头已就绪` },
+    { key: "assets", label: "准备资产", subLabel: `${assetCount}/${assetCount} 已生成` },
+    { key: "prompts", label: "合成提示词", subLabel: `${rows.length}/${rows.length} 已合成` },
+  ];
+  const tableColumns = [
+    "镜号",
+    "时长",
+    "画面描述",
+    "景别",
+    "光影氛围",
+    "对白·旁白",
+    "音效",
+    "运镜",
+    "最终提示词",
+    "操作",
+  ];
+  const gridTemplateColumns =
+    "56px 56px 310px 72px 150px 140px 130px 128px 260px 162px";
+
+  const renderShotTable = (highlightPrompt = false) => (
+    <div className="absolute inset-x-6 bottom-[74px] top-[72px] overflow-hidden rounded-[12px] border border-white/8 bg-[#1b1b1b] shadow-[0_24px_80px_rgba(0,0,0,0.42)]">
+      <div className="h-full overflow-auto">
+        <div className="min-w-[1464px]">
+          <div
+            className="grid border-white/8 border-b bg-[#232323] text-[12px] font-medium text-white/42"
+            style={{ gridTemplateColumns }}
+          >
+            {tableColumns.map((item) => (
+              <div
+                className={cn(
+                  "border-white/8 border-r px-3 py-3 last:border-r-0",
+                  highlightPrompt && item === "最终提示词" && "bg-white/[0.06] text-white/78"
+                )}
+                key={item}
+              >
+                {item}
+              </div>
+            ))}
+          </div>
+          {rows.map((row) => (
+            <div
+              className="grid h-[60px] overflow-hidden border-white/8 border-b text-[12px] leading-5 text-white/72"
+              key={row.id}
+              style={{ gridTemplateColumns }}
+            >
+              {[
+                row.shot,
+                row.duration,
+                row.sceneDescription,
+                row.shotSize,
+                row.lighting,
+                row.dialogue,
+                row.voiceAndSfx,
+                row.cameraMovement,
+                row.imagePrompt,
+              ].map((cell, index) => (
+                <div
+                  className={cn(
+                    "overflow-hidden border-white/8 border-r px-3 py-3 last:border-r-0",
+                    index === 8 && highlightPrompt && "bg-white/[0.035]"
+                  )}
+                  key={`${row.id}-${index}`}
+                >
+                  <div className="line-clamp-2">{cell}</div>
+                </div>
+              ))}
+              <div className="flex items-center justify-center gap-2 px-2 py-2">
+                <button
+                  className="h-8 rounded-[8px] px-3 text-[12px] text-white/78 transition hover:bg-white/10 hover:text-white"
+                  onClick={() => setPromptRow(row)}
+                  type="button"
+                >
+                  查看提示词
+                </button>
+                <button
+                  aria-label={`镜头 ${row.shot} 更多操作`}
+                  className="flex h-8 w-8 items-center justify-center rounded-[8px] text-white/38 transition hover:bg-white/10 hover:text-white/78"
+                  type="button"
+                >
+                  ⋯
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderAssetGroup = (
+    title: string,
+    assets: StoryWorkflowAsset[],
+    emptyLabel: string,
+  ) => (
+    <section className="space-y-3">
+      <h3 className="text-[14px] font-medium text-white/84">{title}</h3>
+      <div className="grid grid-cols-[repeat(4,277px)] gap-4">
+        {assets.map((asset) => (
+          <div
+            className="group relative h-[196px] w-[277px] overflow-hidden rounded-[10px] border border-white/8 bg-[#242424]"
+            key={`${asset.type}-${asset.name}`}
+          >
+            <img
+              alt=""
+              className="h-[156px] w-full object-cover"
+              draggable={false}
+              onDragStart={preventNativeImageDrag}
+              src={asset.imageUrl}
+            />
+            <div className="flex h-10 flex-col justify-center px-3">
+              <span className="truncate text-[13px] font-medium text-white/86">{asset.name}</span>
+              <span className="truncate text-[11px] text-white/38">{asset.description}</span>
+            </div>
+            <div className="absolute right-2 top-2 hidden items-center gap-1 group-hover:flex">
+              <button className="flex h-7 w-7 items-center justify-center rounded-[7px] bg-black/72 text-white/82" type="button">
+                ⌕
+              </button>
+              <div className="relative">
+                <button className="flex h-7 w-7 items-center justify-center rounded-[7px] bg-black/72 text-white/82" type="button">
+                  ⋯
+                </button>
+                <div className="pointer-events-none absolute right-0 top-8 hidden w-[124px] rounded-[10px] border border-white/10 bg-[#1f1f1f] p-1 text-[12px] text-white/78 shadow-[0_18px_48px_rgba(0,0,0,0.42)] group-hover:block">
+                  {["替换图片", "AI 生角色", "清除图片"].map((item) => (
+                    <div className="rounded-[7px] px-3 py-2" key={item}>{item}</div>
+                  ))}
+                  <div className="rounded-[7px] px-3 py-2 text-[#ff6b6b]">删除</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+        <button
+          className="flex h-[196px] w-[277px] flex-col items-center justify-center rounded-[10px] border border-dashed border-white/18 bg-white/[0.03] text-[13px] text-white/46 transition hover:border-white/32 hover:text-white/72"
+          type="button"
+        >
+          <Plus className="mb-2 h-5 w-5" />
+          {emptyLabel}
+        </button>
+      </div>
+    </section>
+  );
+
+  return (
+    <div
+      className="fixed inset-0 z-[120] bg-[#111] text-white"
+      data-canvas-overlay="true"
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <header className="relative flex h-16 shrink-0 items-center justify-center border-white/8 border-b bg-[#171717] px-14">
+        <div className="absolute left-8 top-1/2 -translate-y-1/2 truncate text-[14px] font-semibold text-white/78">
+          {node.title || "脚本生成器"}
+        </div>
+        <div className="flex h-14 items-center justify-center gap-[132px]">
+          {steps.map((item, index) => {
+            const active = item.key === step;
+            return (
+              <button
+                className={cn(
+                  "flex min-w-[72px] items-center gap-2 rounded-[8px] px-2 py-1 text-left transition",
+                  active ? "bg-white/[0.08] text-white" : "text-white/72 hover:bg-white/[0.04]"
+                )}
+                key={item.key}
+                onClick={() => onStepChange(item.key)}
+                type="button"
+              >
+                <span
+                  className={cn(
+                    "flex h-10 w-10 items-center justify-center rounded-full border text-[14px]",
+                    active ? "border-white/24 bg-white text-black" : "border-white/14 bg-white/[0.04] text-white/62"
+                  )}
+                >
+                  {index + 1}
+                </span>
+                <span className="flex flex-col gap-1">
+                  <span className={cn("whitespace-nowrap text-[13px]", active ? "text-white" : "text-white/54")}>
+                    {item.label}
+                  </span>
+                  <span className={cn("whitespace-nowrap text-[12px]", active ? "text-white/82" : "text-white/34")}>
+                    {item.subLabel}
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+        <div className="absolute right-16 top-1/2 -translate-y-1/2 text-[13px] text-white/42">
+          3/3 完成后可批量生视频
+        </div>
+        <button
+          aria-label="关闭脚本工作流"
+          className="absolute right-5 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-[8px] text-white/54 transition hover:bg-white/8 hover:text-white"
+          onClick={onClose}
+          type="button"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </header>
+
+      <main className="relative h-[calc(100%-64px)]">
+        {step === "shots" ? renderShotTable(false) : null}
+        {step === "assets" ? (
+          <div className="absolute inset-x-6 bottom-[74px] top-[72px] overflow-auto rounded-[12px] border border-white/8 bg-[#1b1b1b] p-6 shadow-[0_24px_80px_rgba(0,0,0,0.42)]">
+            <div className="mb-6 flex items-center gap-3 text-[13px] text-white/62">
+              <span>全局风格</span>
+              <span className="rounded-[7px] bg-white/[0.08] px-3 py-1 text-white/86">盛唐·国风二次元</span>
+            </div>
+            <div className="space-y-8">
+              {renderAssetGroup("角色", assetGroups.role, "新增")}
+              {renderAssetGroup("场景", assetGroups.scene, "新增")}
+              {renderAssetGroup("道具", assetGroups.prop, "新增")}
+            </div>
+          </div>
+        ) : null}
+        {step === "prompts" ? renderShotTable(true) : null}
+
+        <footer className="absolute inset-x-6 bottom-5 flex h-11 items-center justify-between rounded-[10px] border border-white/8 bg-[#1b1b1b] px-4 text-[13px] text-white/46">
+          {step === "assets" ? (
+            <span>资产已生成，如再次生成将会覆盖之前的图片/场景/道具等资产</span>
+          ) : step === "prompts" ? (
+            <span>最终提示词已合成，可继续查看单镜提示词或重新批量合成</span>
+          ) : (
+            <button className="rounded-[8px] px-3 py-2 text-white/62 transition hover:bg-white/8 hover:text-white" type="button">
+              添加镜头
+            </button>
+          )}
+          {step === "shots" ? (
+            <button
+              className="flex h-8 items-center gap-1 rounded-[8px] bg-white px-3 text-[13px] font-medium text-black transition hover:bg-white/88"
+              onClick={() => onStepChange("assets")}
+              type="button"
+            >
+              下一步：准备资产
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          ) : null}
+          {step === "assets" ? (
+            <button
+              className="flex h-8 items-center gap-1 rounded-[8px] bg-white px-3 text-[13px] font-medium text-black transition hover:bg-white/88"
+              onClick={() => onStepChange("prompts")}
+              type="button"
+            >
+              下一步：合成提示词
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          ) : null}
+          {step === "prompts" ? (
+            <button
+              className="h-8 rounded-[8px] bg-white px-3 text-[13px] font-medium text-black transition hover:bg-white/88"
+              onClick={() => {
+                onRun();
+                toast.success("已开始重新合成全部提示词");
+              }}
+              type="button"
+            >
+              一键合成全部提示词
+            </button>
+          ) : null}
+        </footer>
+      </main>
+
+      {promptRow ? (
+        <div className="fixed inset-0 z-[130] flex items-center justify-center bg-black/58" data-canvas-overlay="true">
+          <div className="flex h-[587px] max-h-[calc(100vh-160px)] w-[760px] flex-col overflow-hidden rounded-[14px] border border-white/10 bg-[#1f1f1f] shadow-[0_28px_100px_rgba(0,0,0,0.62)]">
+            <div className="flex h-14 items-center justify-between border-white/8 border-b px-5">
+              <h3 className="text-[16px] font-semibold text-white">第 {promptRow.shot} 镜：最终提示词</h3>
+              <button
+                aria-label="关闭提示词"
+                className="flex h-8 w-8 items-center justify-center rounded-[8px] text-white/46 transition hover:bg-white/8 hover:text-white"
+                onClick={() => setPromptRow(null)}
+                type="button"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+            <div className="space-y-4 overflow-auto p-5 text-[13px] leading-6 text-white/72">
+              <section className="rounded-[10px] border border-white/8 bg-white/[0.035] p-4">
+                <div className="mb-3 flex items-center justify-between">
+                  <h4 className="font-medium text-white">分镜提示词</h4>
+                  <span className="rounded-full bg-[#1f8f48]/18 px-2 py-1 text-[12px] text-[#6be49a]">
+                    分镜图提示词·已生成
+                  </span>
+                </div>
+                <p>{promptRow.imagePrompt.includes("[视觉风格") ? promptRow.imagePrompt : `${promptRow.imagePrompt} [视觉风格：盛唐·国风二次元]`}</p>
+              </section>
+              <section className="rounded-[10px] border border-white/8 bg-white/[0.035] p-4">
+                <div className="mb-3 flex items-center justify-between">
+                  <h4 className="font-medium text-white">视频运动提示词</h4>
+                  <span className="rounded-full bg-[#1f8f48]/18 px-2 py-1 text-[12px] text-[#6be49a]">
+                    视频运动提示词·已生成
+                  </span>
+                </div>
+                <p>
+                  {promptRow.motionPrompt.includes("起始状态")
+                    ? promptRow.motionPrompt
+                    : `起始状态：${promptRow.sceneDescription} 动作过程：${promptRow.cameraMovement}，角色动作自然连贯。 结束状态：镜头停留在关键情绪或剧情转折点。 音效：${promptRow.voiceAndSfx} [视觉风格：盛唐·国风二次元]`}
+                </p>
+              </section>
+            </div>
+            <div className="flex h-14 items-center justify-between border-white/8 border-t px-5 text-[13px] text-white/46">
+              <span>GVLM 3.1 Flash</span>
+              <div className="flex items-center gap-4">
+                <span>消耗 2</span>
+                <button
+                  className="h-8 rounded-[8px] bg-white px-3 text-[13px] font-medium text-black transition hover:bg-white/88"
+                  onClick={() => toast.success("已重新合成当前镜头提示词")}
+                  type="button"
+                >
+                  重新合成提示词
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 function getPersistedVideoAnalysisState(node: CloneNode | null | undefined): VideoAnalysisState | null {
   if (!node) return null;
   const raw =
@@ -1474,6 +3386,38 @@ function getPersistedVideoAnalysisState(node: CloneNode | null | undefined): Vid
   };
 }
 
+function normalizeVideoStoryRow(row: unknown, index: number, nodeId: string): VideoAnalysisRow | null {
+  if (!row || typeof row !== "object") return null;
+  const record = row as Partial<VideoAnalysisRow> & Record<string, unknown>;
+  const sceneDescription = cleanVideoStoryText(record.sceneDescription || record.description, `镜头 ${index + 1}`);
+  return {
+    id: String(record.id || `${nodeId}-video-story-row-${index}`),
+    shot: formatVideoStoryShot(record.shot, index),
+    startTime: cleanVideoStoryText(record.startTime, index === 0 ? "0" : ""),
+    endTime: cleanVideoStoryText(record.endTime, record.duration || ""),
+    duration: cleanVideoStoryText(record.duration, ""),
+    sceneDescription,
+    narrative: cleanVideoStoryText(record.narrative || record.story, sceneDescription),
+    shotSize: cleanVideoStoryText(record.shotSize, "中景至近景"),
+    cameraAngle: cleanVideoStoryText(record.cameraAngle, "平视"),
+    cameraMovement: cleanVideoStoryText(record.cameraMovement, "缓慢推镜头 (Slow Zoom In)"),
+    focusDepth: cleanVideoStoryText(record.focusDepth, "浅景深"),
+    lighting: cleanVideoStoryText(record.lighting, "冷调低沉照明，主体光线柔和。"),
+    backgroundMusic: cleanVideoStoryText(record.backgroundMusic, "无"),
+    voiceAndSfx: cleanVideoStoryText(record.voiceAndSfx, "无"),
+    imagePrompt: cleanVideoStoryText(record.imagePrompt, sceneDescription),
+    motionPrompt: cleanVideoStoryText(record.motionPrompt, "The camera moves smoothly and keeps the motion continuous."),
+    keyframeUrl: cleanVideoStoryText(record.keyframeUrl || record.previewUrl || record.imageUrl, ""),
+  };
+}
+
+function getVideoStoryRows(node: CloneNode | null | undefined): VideoAnalysisRow[] {
+  const rawRows = Array.isArray(node?.draftValues?.rows) ? node.draftValues.rows : [];
+  return rawRows
+    .map((row, index) => normalizeVideoStoryRow(row, index, node?.id || "video-story"))
+    .filter((row): row is VideoAnalysisRow => Boolean(row));
+}
+
 function getGridSplitCellLabel(index: number, split: Pick<GridSplitState, "columns">) {
   const row = Math.floor(index / split.columns) + 1;
   const column = (index % split.columns) + 1;
@@ -1607,6 +3551,136 @@ function getDefaultFunctionPrompt(key: string) {
   return defaultVideoCanvasFunctionConfig.functions[key]?.prompt || "";
 }
 
+function getConfiguredToolType(definition: VideoCanvasFunctionDefinition) {
+  if (definition.kind === "audio") return "audio";
+  if (definition.kind === "video" || definition.route === "canvas-generate-video") return "video";
+  if (definition.kind === "workflow") return "compose";
+  if (definition.kind === "multimodal" || definition.route === "canvas-workflow-analyze") return "text";
+  return "image";
+}
+
+function functionRequiresMedia(definition: VideoCanvasFunctionDefinition) {
+  if (definition.route === "local") return false;
+  if (definition.key === "text-to-video" || definition.key === "story-script") return false;
+  return (
+    definition.kind === "image-edit" ||
+    definition.kind === "utility" ||
+    definition.key.includes("frame") ||
+    definition.key.includes("audio") ||
+    definition.route === "canvas-generate-image" ||
+    definition.route === "canvas-generate-video" ||
+    definition.route === "angle-edit"
+  );
+}
+
+function createConfiguredToolCatalog(config: VideoCanvasFunctionConfig): CapturedTool[] {
+  return Object.values(config.functions)
+    .filter((definition) => definition.enabled)
+    .map((definition) => ({
+      metadata: {
+        config: {
+          functionKey: definition.key,
+          model: definition.model || "",
+          prompt: definition.prompt,
+          route: definition.route,
+        },
+        properties: {
+          prompt: { default: definition.prompt, displayName: "提示词" },
+          specifiedModel: {
+            default: definition.model || "",
+            displayName: "模型引用",
+          },
+        },
+        route: definition.route,
+      },
+      modelKey: definition.model || definition.key,
+      modelName: definition.label,
+      modes: [definition.kind, definition.route],
+      rules: functionRequiresMedia(definition) ? [{ require: ["media"] }] : [],
+      scene: definition.description,
+      toolKey: definition.key,
+      type: getConfiguredToolType(definition),
+      vendor: "视频画布配置",
+    }));
+}
+
+function getToolReferenceModuleTemplates(
+  tool: CapturedTool | undefined,
+  definition: VideoCanvasFunctionDefinition,
+): Array<{ kind: AddModuleKind; title?: string }> {
+  if (!requiresMedia(tool) && !functionRequiresMedia(definition)) return [];
+  if (definition.key === "video-analysis") return [{ kind: "video", title: "视频参考" }];
+  if (definition.key === "audio-to-video") {
+    return [
+      { kind: "audio", title: "音频参考" },
+      { kind: "image", title: "画面参考" },
+    ];
+  }
+  if (definition.key === "first-last-frame-video") {
+    return [
+      { kind: "image", title: "首帧参考" },
+      { kind: "image", title: "尾帧参考" },
+    ];
+  }
+  if (definition.route === "canvas-generate-video" && definition.key !== "text-to-video") {
+    return [{ kind: "image", title: "视频参考图" }];
+  }
+  return [{ kind: "image", title: "图片参考" }];
+}
+
+function getToolReferenceMediaSpec(
+  template: { kind: AddModuleKind; title?: string },
+  definition: VideoCanvasFunctionDefinition,
+  index: number,
+): {
+  action: string;
+  height: number;
+  mediaType: NonNullable<CloneNode["inputType"]>;
+  mediaUrl: string;
+  title: string;
+  width: number;
+} {
+  const title = template.title || "素材参考";
+  if (template.kind === "audio") {
+    return {
+      action: "AUDIO_RESOURCE",
+      height: 190,
+      mediaType: "audio",
+      mediaUrl: AUDIO_SOURCE_URL,
+      title,
+      width: 720,
+    };
+  }
+  if (template.kind === "video") {
+    return {
+      action: "VIDEO_RESOURCE",
+      height: 315,
+      mediaType: "video",
+      mediaUrl: SCRIPT_VIDEO_REFERENCE_URL,
+      title,
+      width: 560,
+    };
+  }
+
+  let mediaUrl = CHARACTER_IMAGE_URL;
+  if (definition.key === "first-frame-video") mediaUrl = VIDEO_FIRST_FRAME_SOURCE_URL;
+  if (definition.key === "first-last-frame-video") {
+    mediaUrl = index === 0 ? VIDEO_FIRST_LAST_FIRST_URL : VIDEO_FIRST_LAST_LAST_URL;
+  }
+  if (definition.key === "audio-to-video") mediaUrl = AUDIO_REFERENCE_IMAGE_URL;
+  if (definition.key === "image-to-prompt") mediaUrl = FIRST_FRAME_IMAGE_URL;
+  if (definition.key === "hd-upscale") mediaUrl = HD_IMAGE_SOURCE_URL;
+
+  return {
+    action: "IMAGE_RESOURCE",
+    height: definition.key === "audio-to-video" ? 400 : 280,
+    mediaType: "image",
+    mediaUrl,
+    title,
+    width: definition.key === "audio-to-video" ? 720 : 420,
+  };
+}
+
 function normalizeModelRef(value: unknown) {
   const model = String(value || "").trim();
   return model && model !== "auto" ? model : "";
@@ -1663,20 +3737,26 @@ function normalizeVideoRatioValue(value: unknown): VideoRatio {
     ratio === "3:4" ||
     ratio === "9:16" ||
     ratio === "21:9" ||
-    ratio === "adaptive"
+    ratio === "adaptive" ||
+    ratio === "Auto"
   ) {
-    return ratio;
+    return ratio === "Auto" ? "adaptive" : ratio;
   }
   return "16:9";
 }
 
+function formatVideoRatioLabel(value: unknown) {
+  const ratio = normalizeVideoRatioValue(value);
+  return ratio === "adaptive" ? "Auto" : ratio;
+}
+
 function normalizeVideoResolutionValue(value: unknown): VideoResolution {
   const normalized = String(value || "")
     .trim()
     .toLowerCase()
     .replace(/\s+/g, "");
   if (normalized === "480p") return "480p";
-  if (normalized === "1080p" || normalized === "1k") return "1080p";
+  if (normalized === "1080p" || normalized === "1k" || normalized === "4k") return "1080p";
   return "720p";
 }
 
@@ -1709,6 +3789,14 @@ function resolveVideoComposerMode(tab: VideoComposerTabKey): VideoGenerationMode
   return "text-to-video";
 }
 
+function getVideoModeIcon(tab: VideoComposerTabKey): LucideIcon {
+  if (tab === "text-to-video") return FileText;
+  if (tab === "reference-images") return Sparkles;
+  if (tab === "first-frame") return ImageIcon;
+  if (tab === "first-last-frame") return Layers;
+  return Wand2;
+}
+
 function getVideoFunctionKeyForMode(mode: VideoGenerationMode) {
   if (mode === "text-to-video") return "text-to-video" as const;
   if (mode === "first-last-frame") return "first-last-frame-video" as const;
@@ -2362,10 +4450,13 @@ function getTargetModuleKind(node: CloneNode): AddModuleKind | null {
     nodeType === "image" ||
     nodeType === "video" ||
     nodeType === "video-clip" ||
+    nodeType === "director" ||
     nodeType === "audio" ||
+    nodeType === "script-v2" ||
+    nodeType === "legacy-script" ||
     nodeType === "script"
   ) {
-    return nodeType;
+    return nodeType === "script-v2" ? "script" : (nodeType as AddModuleKind);
   }
   return null;
 }
@@ -2381,14 +4472,18 @@ function inferLegacyTargetModuleKind(node: CloneNode): AddModuleKind | null {
   if (action.endsWith("_RESOURCE") || action === "TEXT_RESOURCE") return null;
 
   const nodeType = getDraftString(node, "nodeType");
-  if (nodeType === "text" || nodeType === "image" || nodeType === "video" || nodeType === "audio" || nodeType === "script") {
+  if (nodeType === "text" || nodeType === "image" || nodeType === "video" || nodeType === "director" || nodeType === "audio" || nodeType === "script") {
     return nodeType;
   }
+  if (nodeType === "script-v2") return "script";
+  if (nodeType === "legacy-script") return "legacy-script";
   if (nodeType === "video-clip" || nodeType === "video_clip" || nodeType === "videoGroup") return "video-clip";
+  if (nodeType === "director-console-3d" || nodeType === "director_console_3d") return "director";
 
   const haystack = `${node.title} ${node.subtitle || ""} ${node.kind} ${node.inputType || ""} ${action}`.toLowerCase();
   if (/脚本|script/.test(haystack)) return "script";
   if (/视频合成|视频组|video-clip|video_clip|video_group|clip/.test(haystack)) return "video-clip";
+  if (/导演台|director|console_3d|console-3d/.test(haystack)) return "director";
   if (/音频|audio/.test(haystack)) return "audio";
   if (/图片|image/.test(haystack)) return "image";
   if (/视频|video/.test(haystack)) return "video";
@@ -2426,19 +4521,22 @@ function shouldResetTargetModuleTitle(title: string | undefined, kind: AddModule
   const value = String(title || "").trim();
   if (!value) return true;
   const legacyTitlePattern =
-    /^(文本|文本生成|文本节点|图片|图片生成|图片节点|视频|视频生成|视频节点|音频|音频生成|音频节点|脚本|脚本生成|脚本生成器|视频合成|视频合成节点)(\s*\d+)?$/;
+    /^(文本|文本生成|文本节点|图片|图片生成|图片节点|视频|视频生成|视频节点|音频|音频生成|音频节点|脚本|脚本生成|脚本生成器|视频合成|视频合成节点|导演台)(\s*\d+)?$/;
   if (!legacyTitlePattern.test(value)) return false;
   if (kind === "video-clip") return !/^视频合成\s*\d+$/.test(value);
+  if (kind === "director") return !/^导演台\s*\d+$/.test(value);
+  if (kind === "script") return value !== "脚本生成器";
+  if (kind === "legacy-script") return value !== "脚本生成器";
   const officialPrefix =
     kind === "text"
       ? "文本节点"
       : kind === "image"
         ? "图片节点"
         : kind === "video"
-          ? "视频节点"
-          : kind === "audio"
-            ? "音频节点"
-            : "脚本";
+        ? "视频节点"
+        : kind === "audio"
+          ? "音频节点"
+          : "脚本";
   return !new RegExp(`^${officialPrefix}\\s*\\d+$`).test(value);
 }
 
@@ -2772,10 +4870,18 @@ function createStarterWorkflow(
   return null;
 }
 
-export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: LiblibVideoCanvasReplicaProps) {
+export function LiblibVideoCanvasReplica({
+  canvasId,
+  initialProject = null,
+  isLoading = false,
+}: LiblibVideoCanvasReplicaProps) {
   const router = useRouter();
   const canvasRef = useRef<HTMLDivElement | null>(null);
+  const connectionDragCleanupRef = useRef<(() => void) | null>(null);
+  const connectionDragRef = useRef<EndpointConnectionDragState | null>(null);
+  const assetManagerResizeCleanupRef = useRef<(() => void) | null>(null);
   const dragRef = useRef<DragState | null>(null);
+  const suppressConnectionClickRef = useRef(false);
   const { data: siteBrandSettings } = useSWR<SiteBrandSettings>(
     "/api/site-settings?scope=branding",
     fetcher
@@ -2796,6 +4902,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     () => normalizeVideoCanvasFunctionConfig(videoCanvasFunctionSettings?.config),
     [videoCanvasFunctionSettings?.config]
   );
+  const configuredTools = useMemo(
+    () => createConfiguredToolCatalog(videoCanvasFunctionConfig),
+    [videoCanvasFunctionConfig]
+  );
   const canvasModelOptions = useMemo(
     () => (canvasModelsData?.models || []).filter((model) => getCanvasModelRef(model)),
     [canvasModelsData?.models]
@@ -2807,11 +4917,26 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
   const [nodes, setNodes] = useState<CloneNode[]>([]);
   const [edges, setEdges] = useState<CloneEdge[]>([]);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
+  const [lineConnectState, setLineConnectState] = useState<LineConnectState | null>(null);
+  const [referenceSelectionTargetId, setReferenceSelectionTargetId] = useState<string | null>(null);
+  const [markSelectionTargetId, setMarkSelectionTargetId] = useState<string | null>(null);
+  const [markAnalysisState, setMarkAnalysisState] =
+    useState<VideoCanvasMarkAnalysisState | null>(null);
+  const [effectLibraryTargetNodeId, setEffectLibraryTargetNodeId] =
+    useState<string | null>(null);
+  const [roleLibraryTargetNodeId, setRoleLibraryTargetNodeId] =
+    useState<string | null>(null);
+  const [videoRoleAgreementOpen, setVideoRoleAgreementOpen] = useState(false);
+  const [videoRoleAgreementAccepted, setVideoRoleAgreementAccepted] = useState(false);
   const [viewport, setViewport] = useState(DEFAULT_VIEWPORT);
   const [projectTitle, setProjectTitle] = useState("未命名");
   const [draftTitle, setDraftTitle] = useState("未命名");
   const [isTitleEditing, setIsTitleEditing] = useState(false);
   const [activePanel, setActivePanel] = useState<ActivePanel>(null);
+  const [assetManagerWidth, setAssetManagerWidth] = useState(ASSET_MANAGER_DEFAULT_WIDTH);
+  const [historyListDownloadPendingId, setHistoryListDownloadPendingId] = useState<string | null>(null);
+  const [historyWatermarkRulesOpen, setHistoryWatermarkRulesOpen] = useState(false);
   const [isProjectLoading, setIsProjectLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [, setShareEnabled] = useState(false);
@@ -2820,13 +4945,41 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
   const [nodeContextMenu, setNodeContextMenu] = useState<NodeContextState>(null);
   const [connectionMenu, setConnectionMenu] = useState<ConnectionMenuState>(null);
   const [previewNode, setPreviewNode] = useState<CloneNode | null>(null);
+  const [cancelGenerationConfirmNodeId, setCancelGenerationConfirmNodeId] = useState<string | null>(null);
+  const [storyWorkflowNodeId, setStoryWorkflowNodeId] = useState<string | null>(null);
+  const [storyWorkflowStep, setStoryWorkflowStep] = useState<StoryWorkflowStep>("shots");
+  const [directorConsoleNodeId, setDirectorConsoleNodeId] = useState<string | null>(null);
+  const [directorTutorialActive, setDirectorTutorialActive] = useState(false);
   const [angleEditorNodeId, setAngleEditorNodeId] = useState<string | null>(null);
   const [inspectorNodeId, setInspectorNodeId] = useState<string | null>(null);
   const [dockOverviewOpen, setDockOverviewOpen] = useState(false);
+  const [edgesHidden, setEdgesHidden] = useState(false);
   const [snapEnabled, setSnapEnabled] = useState(true);
+  const [arrangePreview, setArrangePreview] = useState<{
+    nodes: CloneNode[];
+    viewport: { x: number; y: number; zoom: number };
+  } | null>(null);
   const [activeVideoToolbarMode, setActiveVideoToolbarMode] = useState<VideoToolbarMode>(null);
+  const [subtitleEraseMode, setSubtitleEraseMode] = useState<SubtitleEraseMode>("smart");
+  const [subtitleEraseRegions, setSubtitleEraseRegions] = useState<Record<string, SubtitleEraseRegion[]>>({});
+  const [subtitleEraseRegionHistory, setSubtitleEraseRegionHistory] =
+    useState<Record<string, SubtitleEraseRegionHistory>>({});
   const [videoClipRanges, setVideoClipRanges] = useState<Record<string, VideoClipRange>>({});
   const [videoAnalysisStates, setVideoAnalysisStates] = useState<Record<string, VideoAnalysisState>>({});
+  const [videoCropGenerateStates, setVideoCropGenerateStates] = useState<Record<string, VideoCropGenerateState>>({});
+  const [videoAudioSplitStates, setVideoAudioSplitStates] = useState<Record<string, VideoAudioSplitState>>({});
+
+  useEffect(() => () => assetManagerResizeCleanupRef.current?.(), []);
+
+  useEffect(() => {
+    try {
+      setVideoRoleAgreementAccepted(
+        window.localStorage.getItem(VIDEO_ROLE_AGREEMENT_STORAGE_KEY) === "1",
+      );
+    } catch {
+      setVideoRoleAgreementAccepted(false);
+    }
+  }, []);
 
   const selectedNode = useMemo(
     () => nodes.find((node) => node.id === selectedNodeId) || null,
@@ -2845,6 +4998,26 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     () => nodes.find((node) => node.id === inspectorNodeId) || null,
     [inspectorNodeId, nodes]
   );
+  const directorConsoleNode = useMemo(
+    () => nodes.find((node) => node.id === directorConsoleNodeId) || null,
+    [directorConsoleNodeId, nodes]
+  );
+  const storyWorkflowNode = useMemo(
+    () => nodes.find((node) => node.id === storyWorkflowNodeId) || null,
+    [nodes, storyWorkflowNodeId]
+  );
+
+  useEffect(() => {
+    if (!directorTutorialActive) return;
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      setDirectorTutorialActive(false);
+    };
+
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [directorTutorialActive]);
 
   const connectionNode = useMemo(
     () => nodes.find((node) => node.id === connectionMenu?.nodeId) || null,
@@ -2858,46 +5031,64 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
 
   useEffect(() => {
     setActiveVideoToolbarMode(null);
+    setSubtitleEraseMode("smart");
   }, [selectedVideoMediaNode?.id]);
 
   useEffect(() => {
     let active = true;
+    const hydrateProject = (project: {
+      canvasData?: unknown;
+      title?: string | null;
+    }) => {
+      const title = normalizeCanvasTitle(project.title);
+      setProjectTitle(title);
+      setDraftTitle(title);
+      setNodes(restoreNodes(project.canvasData));
+      setEdges(restoreEdges(project.canvasData));
+    };
 
     async function loadProject() {
       setIsProjectLoading(true);
-      const result = await canvasService.getProject(canvasId);
-      if (!active) return;
-      if (result.success && result.data) {
-        const title = normalizeCanvasTitle(result.data.title);
-        setProjectTitle(title);
-        setDraftTitle(title);
-        const restoredNodes = restoreNodes(result.data.canvasData);
-        const restoredEdges = restoreEdges(result.data.canvasData);
-        setNodes(restoredNodes);
-        setEdges(restoredEdges);
-      } else {
-        setProjectTitle("未命名");
-        setDraftTitle("未命名");
-        await canvasService.saveCanvasState(
-          canvasId,
-          {
-            nodes: [],
-            edges: [],
-            selectedNodeIds: [],
-            viewport: DEFAULT_VIEWPORT,
-            tool: "select",
-          },
-          "video"
-        );
+      const hasInitialProject = initialProject?.id === canvasId;
+      try {
+        if (hasInitialProject) {
+          hydrateProject(initialProject);
+        }
+
+        const result = await canvasService.getProject(canvasId);
+        if (!active) return;
+        if (result.success && result.data) {
+          hydrateProject(result.data);
+        } else if (!hasInitialProject) {
+          setProjectTitle("未命名");
+          setDraftTitle("未命名");
+          const seedResult = await canvasService.saveCanvasState(
+            canvasId,
+            {
+              nodes: [],
+              edges: [],
+              selectedNodeIds: [],
+              viewport: DEFAULT_VIEWPORT,
+              tool: "select",
+            },
+            "video"
+          );
+          if (!seedResult.success) {
+            console.warn("Failed to seed blank video canvas", seedResult.error);
+          }
+        }
+      } catch (error) {
+        console.warn("Failed to load video canvas project", error);
+      } finally {
+        setIsProjectLoading(false);
       }
-      setIsProjectLoading(false);
     }
 
     void loadProject();
     return () => {
       active = false;
     };
-  }, [canvasId]);
+  }, [canvasId, initialProject]);
 
   const saveCanvas = useCallback(async () => {
     setIsSaving(true);
@@ -2931,10 +5122,50 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
   const addNodes = useCallback((nextNodes: CloneNode[], nextEdges: CloneEdge[]) => {
     setNodes((current) => [...current, ...nextNodes]);
     setEdges((current) => [...current, ...nextEdges]);
+    setSelectedEdgeId(null);
     const last = nextNodes[nextNodes.length - 1];
     if (last) setSelectedNodeId(last.id);
   }, []);
 
+  const sendDirectorSnapshotsToCanvas = useCallback(
+    (directorNode: CloneNode, snapshots: Array<{ id: string; title: string }>) => {
+      if (snapshots.length === 0) return;
+
+      const nextNodes = snapshots.map((snapshot, index) => {
+        const created = createMediaResourceNode({
+          action: "DIRECTOR_CAMERA_SNAPSHOT",
+          height: DIRECTOR_CAMERA_SNAPSHOT_NODE_HEIGHT,
+          mediaType: "image",
+          mediaUrl: FIRST_FRAME_IMAGE_URL,
+          title: `${directorNode.title} ${snapshot.title}`,
+          width: DIRECTOR_CAMERA_SNAPSHOT_NODE_WIDTH,
+          x: Math.round(directorNode.x + DIRECTOR_CAMERA_SNAPSHOT_NODE_OFFSET_X * (index + 1)),
+          y: directorNode.y,
+        });
+
+        return {
+          ...created,
+          draftValues: {
+            ...(created.draftValues || {}),
+            generated: true,
+            sourceCameraSnapshotId: snapshot.id,
+            sourceCameraSnapshotTitle: snapshot.title,
+            sourceDirectorNodeId: directorNode.id,
+          },
+        };
+      });
+      const nextEdges = nextNodes.map((snapshotNode) => ({
+        id: makeId("edge"),
+        source: directorNode.id,
+        target: snapshotNode.id,
+      }));
+
+      addNodes(nextNodes, nextEdges);
+      setSelectedNodeId(directorNode.id);
+    },
+    [addNodes]
+  );
+
   useEffect(() => {
     const timer = window.setInterval(() => {
       setNodes((current) => {
@@ -2961,38 +5192,64 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     return () => window.clearInterval(timer);
   }, []);
 
-  const cancelGenerationNode = useCallback((nodeId: string) => {
+  const removeGenerationNode = useCallback((nodeId: string) => {
     setNodes((current) => current.filter((node) => node.id !== nodeId));
     setEdges((current) => current.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));
     setSelectedNodeId((current) => (current === nodeId ? null : current));
-    toast.success("已取消生成");
+    setSelectedEdgeId(null);
   }, []);
 
+  const cancelGenerationNode = useCallback((nodeId: string) => {
+    const node = nodes.find((item) => item.id === nodeId);
+    if (node && getDraftString(node, "generationStatus") === "pending") {
+      setCancelGenerationConfirmNodeId(nodeId);
+      return;
+    }
+    removeGenerationNode(nodeId);
+  }, [nodes, removeGenerationNode]);
+
+  useEffect(() => {
+    if (!cancelGenerationConfirmNodeId) return;
+    const node = nodes.find((item) => item.id === cancelGenerationConfirmNodeId);
+    if (!node || getDraftString(node, "generationStatus") !== "pending") {
+      setCancelGenerationConfirmNodeId(null);
+    }
+  }, [cancelGenerationConfirmNodeId, nodes]);
+
   const addWorkflowPreset = useCallback(
     (workflow: WorkflowPreset, index = 0) => {
       const title = String(workflow.name || workflow.title || "工具箱预设");
-      const baseX = 360 + index * 36;
-      const baseY = 300 + index * 24;
+      const group = createToolboxTemplateGroupNode(title);
       const reference = createMediaResourceNode({
         action: "IMAGE_RESOURCE",
-        height: 280,
+        height: 525,
         mediaType: "image",
-        mediaUrl: workflow.cover || CHARACTER_IMAGE_URL,
+        mediaUrl: workflow.cover || FIRST_FRAME_IMAGE_URL,
         title: "参考图",
-        width: 420,
-        x: baseX,
-        y: baseY,
+        width: 350,
+        x: TOOLBOX_TEMPLATE_GROUP_FRAME.x + 40,
+        y: TOOLBOX_TEMPLATE_GROUP_FRAME.y + 40,
+      });
+      const prompt = createTextResourceNode({
+        content:
+          workflow.description ||
+          "Cinematic orbit shot. The camera starts from the front and smoothly pans in a large arc around the subject, keeping expressive eye contact and a playful rhythm.",
+        height: 200,
+        title: "提示词",
+        width: 350,
+        x: TOOLBOX_TEMPLATE_GROUP_FRAME.x + 525,
+        y: TOOLBOX_TEMPLATE_GROUP_FRAME.y + 45,
       });
       const result = createMediaResourceNode({
         action: "VIDEO_GENERATE",
-        height: 315,
+        height: 525,
         mediaType: "video",
-        mediaUrl: "",
+        mediaUrl: SCRIPT_VIDEO_REFERENCE_URL,
         prompt: workflow.description || `${title} 预设工作流`,
-        title,
-        width: 560,
-        x: baseX + 520,
-        y: baseY - 18,
+        title: "成品",
+        width: 350,
+        x: TOOLBOX_TEMPLATE_GROUP_FRAME.x + 1104,
+        y: TOOLBOX_TEMPLATE_GROUP_FRAME.y + 93,
       });
       const presetNode: CloneNode = {
         ...result,
@@ -3005,19 +5262,533 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             presetId: workflow.uuid || workflow.id || "",
             presetName: title,
             sourceNodeId: reference.id,
+            templateAuthor: (workflow as ToolboxTemplatePreset).author || "",
+            templateCategory: (workflow as ToolboxTemplatePreset).category || "",
+            templateKey: (workflow as ToolboxTemplatePreset).templateKey || "",
+            templateSteps: (workflow as ToolboxTemplatePreset).steps || [],
           },
           sourceNodeId: reference.id,
+          templateAuthor: (workflow as ToolboxTemplatePreset).author || "",
+          templateCategory: (workflow as ToolboxTemplatePreset).category || "",
+          templateKey: (workflow as ToolboxTemplatePreset).templateKey || "",
           workflow,
         },
       };
-      addNodes([reference, presetNode], [{ id: makeId("edge"), source: reference.id, target: presetNode.id }]);
+      addNodes(
+        [group, reference, prompt, presetNode],
+        [
+          { id: makeId("edge"), source: reference.id, target: prompt.id },
+          { id: makeId("edge"), source: prompt.id, target: presetNode.id },
+          { id: makeId("edge"), source: reference.id, target: presetNode.id },
+        ]
+      );
+      setViewport(TOOLBOX_TEMPLATE_VIEWPORT);
+      setSelectedNodeId(group.id);
+      setSelectedEdgeId(null);
       setActivePanel(null);
       setConnectionMenu(null);
-      toast.success(`已添加「${title}」工具箱工作流`);
     },
     [addNodes]
   );
 
+  const addConfiguredTool = useCallback((tool: CapturedTool, index = 0) => {
+    const node = createToolNode(tool, 360 + (index % 4) * 36, 300 + (index % 4) * 24);
+    addNodes([node], []);
+    setInspectorNodeId(node.id);
+    setActivePanel(null);
+    setConnectionMenu(null);
+    toast.success(`已添加「${getToolLabel(tool)}」工具`);
+  }, [addNodes]);
+
+  const runConfiguredToolNode = useCallback(
+    async (nodeId: string) => {
+      const node = nodes.find((item) => item.id === nodeId);
+      const tool = node?.tool;
+      if (!node || !tool) {
+        toast.error("当前节点不是可执行工具");
+        return;
+      }
+
+      const functionKey = getDraftString(node, "functionKey") || getToolFunctionKey(tool);
+      const definition = getConfiguredFunction(videoCanvasFunctionConfig, functionKey);
+      if (!functionKey || !definition?.key) {
+        toast.error("未找到该工具的功能配置");
+        return;
+      }
+      if (!videoCanvasFunctionConfig.enabled || !definition.enabled) {
+        toast.error("视频画布功能未启用，请先在配置中开启");
+        return;
+      }
+
+      const route = getDraftString(node, "route") || getToolRoute(tool) || definition.route;
+      const promptInput = getDraftString(node, "prompt") || definition.prompt || node.title;
+      const modelOverride = getDraftString(node, "specifiedModel") || getDraftString(node, "model");
+      const incomingNodes = edges
+        .filter((edge) => edge.target === nodeId)
+        .map((edge) => nodes.find((item) => item.id === edge.source))
+        .filter((item): item is CloneNode => Boolean(item));
+      const uniqueUrls = (items: string[]) =>
+        Array.from(new Set(items.map((item) => item.trim()).filter(Boolean))).slice(0, 12);
+      const imageReferenceLists = await Promise.all(
+        incomingNodes
+          .filter((item) => item.inputType === "image")
+          .map((item) => resolveNodeReferenceImages(item))
+      );
+      const imageUrls = uniqueUrls(imageReferenceLists.flat());
+      const videoUrls = uniqueUrls(
+        incomingNodes
+          .filter((item) => item.inputType === "video")
+          .map((item) => getNodeReferenceMediaUrl(item))
+      );
+      const audioUrls = uniqueUrls(
+        incomingNodes
+          .filter((item) => item.inputType === "audio")
+          .map((item) => getNodeReferenceMediaUrl(item))
+      );
+      const needsMedia = requiresMedia(tool) || functionRequiresMedia(definition);
+      if (needsMedia && imageUrls.length === 0 && videoUrls.length === 0 && audioUrls.length === 0) {
+        toast.error(`请先为「${node.title}」连接图片、视频或音频素材`);
+        return;
+      }
+
+      if (route === "local") {
+        toast.info(`${definition.label || node.title}属于本地画布操作，请在对应图片工具栏中使用`);
+        return;
+      }
+
+      if (route === "angle-edit") {
+        toast.info("多角度编辑器需要先选中图片素材，再从图片工具栏打开");
+        return;
+      }
+
+      if (route === "canvas-workflow-analyze" || definition.kind === "multimodal") {
+        if (functionKey === "video-analysis" && videoUrls.length === 0) {
+          toast.error("视频解析需要先连接视频素材");
+          return;
+        }
+        if (functionKey === "image-to-prompt" && imageUrls.length === 0) {
+          toast.error("图片反推提示词需要先连接图片素材");
+          return;
+        }
+        const finalPrompt = composeFunctionPrompt(definition, promptInput);
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === nodeId
+              ? {
+                  ...item,
+                  kind: "text",
+                  subtitle: "生成中",
+                  width: Math.max(item.width, 260),
+                  height: Math.max(item.height, 180),
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    generated: false,
+                    generationError: undefined,
+                    generationProgress: 2,
+                    generationStatus: "pending",
+                    params: {
+                      ...getNodeParams(item),
+                      functionKey,
+                      imageUrls,
+                      prompt: finalPrompt,
+                      route,
+                      videoUrls,
+                    },
+                    prompt: finalPrompt,
+                  },
+                }
+              : item
+          )
+        );
+        try {
+          const response = await workflowAnalysisService.analyze({
+            imageUrls,
+            mode: functionKey === "story-script" ? "story-script" : "video-analysis",
+            nodeTitle: node.title,
+            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
+            prompt: finalPrompt,
+            videoUrls,
+          });
+          if (!response.success) throw new Error(response.error || `${definition.label}生成失败`);
+          const content =
+            response.data?.raw ||
+            response.data?.summary ||
+            response.data?.agentPlan?.join("\n") ||
+            response.data?.analysisRows?.map((row, index) => {
+              const scene = row.sceneDescription || `片段 ${index + 1}`;
+              return [scene, row.imagePrompt, row.motionPrompt].filter(Boolean).join("\n");
+            }).join("\n\n") ||
+            "";
+          setNodes((current) =>
+            current.map((item) =>
+              item.id === nodeId
+                ? {
+                    ...item,
+                    kind: "text",
+                    subtitle: "生成结果",
+                    draftValues: {
+                      ...(item.draftValues || {}),
+                      content: content ? [content] : item.draftValues?.content,
+                      generated: true,
+                      generationProgress: 100,
+                      generationStatus: "complete",
+                      prompt: finalPrompt,
+                      rows: response.data?.analysisRows || response.data?.shotIdeas || item.draftValues?.rows,
+                    },
+                  }
+                : item
+            )
+          );
+          toast.success(`${definition.label || node.title}已生成`);
+        } catch (error) {
+          setNodes((current) =>
+            current.map((item) =>
+              item.id === nodeId
+                ? {
+                    ...item,
+                    subtitle: "生成失败",
+                    draftValues: {
+                      ...(item.draftValues || {}),
+                      generationError: error instanceof Error ? error.message : `${definition.label}生成失败`,
+                      generationStatus: "failed",
+                    },
+                  }
+                : item
+            )
+          );
+          toast.error(error instanceof Error ? error.message : `${definition.label}生成失败`);
+        }
+        return;
+      }
+
+      if (route === "canvas-generate-video" || definition.kind === "video") {
+        if (functionKey === "audio-to-video" && imageUrls.length === 0) {
+          toast.error("音频生视频当前需要同时连接一张参考图");
+          return;
+        }
+        const requestedMode =
+          normalizeVideoGenerationMode(getDraftString(node, "mode")) ||
+          (functionKey === "text-to-video"
+            ? "text-to-video"
+            : functionKey === "first-last-frame-video"
+              ? "first-last-frame"
+              : imageUrls.length >= 2
+                ? "first-last-frame"
+                : imageUrls.length >= 1
+                  ? "first-frame"
+                  : "text-to-video");
+        const referenceImages = selectVideoReferenceImages(imageUrls, requestedMode);
+        if (requestedMode === "first-frame" && referenceImages.length < 1) {
+          toast.error("图生视频至少需要 1 张参考图");
+          return;
+        }
+        if (requestedMode === "first-last-frame" && referenceImages.length < 2) {
+          toast.error("首尾帧视频至少需要 2 张参考图");
+          return;
+        }
+        const finalPrompt = composeFunctionPrompt(definition, promptInput);
+        const previewUrl = referenceImages[0] || "";
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === nodeId
+              ? {
+                  ...item,
+                  kind: "media",
+                  inputType: "video",
+                  subtitle: "生成中",
+                  width: Math.max(item.width, 560),
+                  height: Math.max(item.height, 315),
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    action: "VIDEO_GENERATE",
+                    generated: false,
+                    generationError: undefined,
+                    generationProgress: 2,
+                    generationStatus: "pending",
+                    mediaType: "video",
+                    mediaUrl: "",
+                    nodeType: "video",
+                    params: {
+                      ...getNodeParams(item),
+                      functionKey,
+                      mode: requestedMode,
+                      prompt: finalPrompt,
+                      referenceImages,
+                      route,
+                    },
+                    poster: previewUrl,
+                    prompt: finalPrompt,
+                    url: [],
+                  },
+                }
+              : item
+          )
+        );
+        try {
+          const response = await videoGenerationService.generateVideo({
+            images: referenceImages,
+            mode: requestedMode,
+            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
+            prompt: finalPrompt,
+            ratio: "16:9",
+            resolution: "720p",
+          });
+          if (!response.success || !response.data?.url) {
+            throw new Error(response.error || `${definition.label}生成失败`);
+          }
+          setNodes((current) =>
+            current.map((item) =>
+              item.id === nodeId
+                ? {
+                    ...item,
+                    kind: "media",
+                    inputType: "video",
+                    subtitle: "生成结果",
+                    draftValues: {
+                      ...(item.draftValues || {}),
+                      generated: true,
+                      generationProgress: 100,
+                      generationStatus: "complete",
+                      mediaType: "video",
+                      mediaUrl: response.data?.url,
+                      nodeType: "video",
+                      prompt: finalPrompt,
+                      url: [response.data?.url],
+                      videoMeta: response.data?.metadata || null,
+                    },
+                  }
+                : item
+            )
+          );
+          toast.success(`${definition.label || node.title}已生成`);
+        } catch (error) {
+          setNodes((current) =>
+            current.map((item) =>
+              item.id === nodeId
+                ? {
+                    ...item,
+                    subtitle: "生成失败",
+                    draftValues: {
+                      ...(item.draftValues || {}),
+                      generationError: error instanceof Error ? error.message : `${definition.label}生成失败`,
+                      generationStatus: "failed",
+                    },
+                  }
+                : item
+            )
+          );
+          toast.error(error instanceof Error ? error.message : `${definition.label}生成失败`);
+        }
+        return;
+      }
+
+      const sourceUrl = imageUrls[0] || getNodeReferenceMediaUrl(node);
+      if (!sourceUrl) {
+        toast.error(`${definition.label || node.title}需要先连接图片素材`);
+        return;
+      }
+      const extraReferenceImages = imageUrls.filter((item) => item !== sourceUrl);
+      const isWideGeneration = isWideImageGenerationFunction(functionKey);
+      const gridLayout = getPresetGridLayout(functionKey);
+      const finalPrompt =
+        functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY
+          ? composeMultiViewNineGridPrompt(definition, promptInput)
+          : isOfficialImagePresetFunctionKey(functionKey)
+            ? composeConfiguredImagePresetPrompt(definition, promptInput)
+            : composeFunctionPrompt(definition, promptInput);
+      const resultWidth = isWideGeneration ? OFFICIAL_NINE_GRID_WIDTH : Math.max(node.width, 420);
+      const resultHeight = isWideGeneration ? OFFICIAL_NINE_GRID_HEIGHT : Math.max(node.height, 280);
+      setNodes((current) =>
+        current.map((item) =>
+          item.id === nodeId
+            ? {
+                ...item,
+                kind: "media",
+                inputType: "image",
+                subtitle: "生成中",
+                width: resultWidth,
+                height: resultHeight,
+                draftValues: {
+                  ...(item.draftValues || {}),
+                  action: isPresetGridFunction(functionKey) ? "IMAGE_GENERATE_NINE_GRID" : "IMAGE_GENERATE",
+                  functionKey,
+                  generated: false,
+                  generationError: undefined,
+                  generationProgress: 2,
+                  generationStatus: "pending",
+                  gridColumns: gridLayout?.columns,
+                  gridPrompt: gridLayout ? finalPrompt : undefined,
+                  gridRows: gridLayout?.rows,
+                  mediaType: "image",
+                  mediaUrl: "",
+                  nodeType: "image",
+                  outputSizeLabel: isWideGeneration ? "2752 × 1536" : item.draftValues?.outputSizeLabel,
+                  params: {
+                    ...getNodeParams(item),
+                    functionKey,
+                    prompt: finalPrompt,
+                    referenceImages: [sourceUrl, ...extraReferenceImages],
+                    route,
+                    sourceUrl,
+                  },
+                  pendingLabel: "生成中",
+                  prompt: finalPrompt,
+                  sourceUrl,
+                  url: [],
+                },
+              }
+            : item
+        )
+      );
+      try {
+        let generatedUrl = "";
+        if (route === "enhance") {
+          const response = await imageGenerationService.enhanceImage(sourceUrl);
+          generatedUrl = response.success ? response.data?.url || "" : "";
+          if (!generatedUrl && !response.success) throw new Error(response.error || "高清处理失败");
+        } else if (route === "extend") {
+          const response = await imageGenerationService.extendImage(sourceUrl, { prompt: finalPrompt });
+          generatedUrl = response.success ? response.data?.url || "" : "";
+          if (!generatedUrl && !response.success) throw new Error(response.error || "扩图处理失败");
+        } else if (route === "remove-bg") {
+          const response = await imageGenerationService.removeBackground(sourceUrl);
+          generatedUrl = response.success ? response.data?.url || "" : "";
+          if (!generatedUrl && !response.success) throw new Error(response.error || "抠图处理失败");
+        } else if (route === "canvas-generate-image" || definition.kind === "image-edit" || definition.kind === "utility") {
+          const response = await imageGenerationService.generateImage({
+            aspectRatio: isWideGeneration ? "16:9" : undefined,
+            billingFeature: getImageGenerationBillingFeature(functionKey),
+            imageCount: 1,
+            model: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
+            prompt: finalPrompt,
+            promptExtend: !isWideGeneration,
+            referenceImage: sourceUrl,
+            referenceImages: extraReferenceImages,
+          });
+          generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
+          if (!generatedUrl && !response.success) throw new Error(response.error || `${definition.label}生成失败`);
+        } else {
+          throw new Error(`${definition.label || node.title}暂未配置可执行路由`);
+        }
+
+        if (!generatedUrl) throw new Error(`${definition.label || node.title}未返回生成结果`);
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === nodeId
+              ? {
+                  ...item,
+                  kind: "media",
+                  inputType: "image",
+                  subtitle: "生成结果",
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    generated: true,
+                    generationProgress: 100,
+                    generationStatus: "complete",
+                    mediaType: "image",
+                    mediaUrl: generatedUrl,
+                    nodeType: "image",
+                    nineGridCells: gridLayout
+                      ? Array.from({ length: gridLayout.rows * gridLayout.columns }).map((_, index) => getGridCellVisual(index))
+                      : item.draftValues?.nineGridCells,
+                    nineGridComposite: gridLayout ? true : item.draftValues?.nineGridComposite,
+                    prompt: finalPrompt,
+                    sourceUrl,
+                    url: [generatedUrl],
+                  },
+                }
+              : item
+          )
+        );
+        toast.success(`${definition.label || node.title}已生成`);
+      } catch (error) {
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === nodeId
+              ? {
+                  ...item,
+                  subtitle: "生成失败",
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    generationError: error instanceof Error ? error.message : `${definition.label}生成失败`,
+                    generationStatus: "failed",
+                  },
+                }
+              : item
+          )
+        );
+        toast.error(error instanceof Error ? error.message : `${definition.label}生成失败`);
+      }
+    },
+    [edges, nodes, videoCanvasFunctionConfig]
+  );
+
+  const addReferenceModulesForTool = useCallback(
+    (nodeId: string) => {
+      const anchor = nodes.find((item) => item.id === nodeId);
+      if (!anchor?.tool) {
+        toast.error("当前节点不是可添加素材的工具");
+        return;
+      }
+      const functionKey = getDraftString(anchor, "functionKey") || getToolFunctionKey(anchor.tool);
+      const definition = getConfiguredFunction(videoCanvasFunctionConfig, functionKey);
+      if (!functionKey || !definition?.key) {
+        toast.error("未找到该工具的功能配置");
+        return;
+      }
+      const templates = getToolReferenceModuleTemplates(anchor.tool, definition);
+      if (templates.length === 0) {
+        toast.info(`${definition.label || anchor.title}不需要额外素材`);
+        return;
+      }
+
+      const specs = templates.map((template, index) =>
+        getToolReferenceMediaSpec(template, definition, index)
+      );
+      const gap = OFFICIAL_NODE_GAP;
+      const totalHeight = specs.reduce((sum, spec) => sum + spec.height, 0) + Math.max(0, specs.length - 1) * 18;
+      let cursorY = Math.round(anchor.y + anchor.height / 2 - totalHeight / 2);
+      const nextNodes = specs.map((spec) => {
+        const node = createMediaResourceNode({
+          action: spec.action,
+          height: spec.height,
+          mediaType: spec.mediaType,
+          mediaUrl: spec.mediaUrl,
+          title: spec.title,
+          width: spec.width,
+          x: Math.round(anchor.x - spec.width - gap),
+          y: cursorY,
+        });
+        const positionedNode = {
+          ...node,
+          x: Math.round(anchor.x - spec.width - gap),
+          y: cursorY,
+        };
+        cursorY += spec.height + 18;
+        return positionedNode;
+      });
+      const nextEdges = nextNodes.map((node) => ({
+        id: makeId("edge"),
+        source: node.id,
+        target: anchor.id,
+      }));
+
+      addNodes(nextNodes, nextEdges);
+      setSelectedNodeId(nextNodes[0]?.id || anchor.id);
+      setInspectorNodeId(null);
+      setActivePanel(null);
+      setCanvasCommand(null);
+      setNodeContextMenu(null);
+      setConnectionMenu(null);
+      toast.success(
+        nextNodes.length === 1
+          ? `已为「${anchor.title}」添加素材节点`
+          : `已为「${anchor.title}」添加 ${nextNodes.length} 个素材节点`
+      );
+    },
+    [addNodes, nodes, videoCanvasFunctionConfig]
+  );
+
   const toCanvasPoint = useCallback(
     (clientX: number, clientY: number) => ({
       x: Math.round((clientX - viewport.x) / viewport.zoom),
@@ -3029,25 +5800,36 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
   const addTargetModule = useCallback(
     (kind: AddModuleKind, point?: { x: number; y: number }) => {
       const viewportCenter = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
-      const offset = TARGET_MODULE_CENTER_OFFSETS[kind];
+      const compactSpawn = window.innerWidth < 900 || window.innerHeight < 640;
+      const useViewportTopLeftSpawn =
+        kind === "text" ||
+        kind === "image" ||
+        kind === "video" ||
+        kind === "video-clip" ||
+        kind === "director" ||
+        kind === "audio" ||
+        kind === "script" ||
+        kind === "legacy-script";
+      const offset = compactSpawn || useViewportTopLeftSpawn ? { x: 0, y: 0 } : TARGET_MODULE_CENTER_OFFSETS[kind];
       const sameKindCount = nodes.filter((node) => getTargetModuleKind(node) === kind).length;
+      const spawnOffset = useViewportTopLeftSpawn ? 0 : sameKindCount * 28;
       const center = point || {
-        x: viewportCenter.x + offset.x + sameKindCount * 28,
-        y: viewportCenter.y + offset.y + sameKindCount * 28,
+        x: viewportCenter.x + offset.x + spawnOffset,
+        y: viewportCenter.y + offset.y + spawnOffset,
       };
       const created = createTargetModuleNode(kind, 0, 0, nodes.length + 1);
+      const useTopLeftSpawn = useViewportTopLeftSpawn && !point;
       const node = {
         ...created,
-        x: Math.round(center.x - created.width / 2),
-        y: Math.round(center.y - created.height / 2),
+        x: Math.round(useTopLeftSpawn ? center.x : center.x - created.width / 2),
+        y: Math.round(useTopLeftSpawn ? center.y : center.y - created.height / 2),
       };
       addNodes([node], []);
       setActivePanel(null);
       setCanvasCommand(null);
       setConnectionMenu(null);
-      toast.success(`已添加 ${node.title}`);
     },
-    [addNodes, nodes.length, toCanvasPoint]
+    [addNodes, nodes, toCanvasPoint]
   );
 
   const addUploadedFilesAtPoint = useCallback(
@@ -3077,6 +5859,318 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     [addUploadedFilesAtPoint, toCanvasPoint]
   );
 
+  const addAssetFromLibrary = useCallback(
+    (asset: CanvasLibraryAsset) => {
+      const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
+      const width = asset.mediaType === "video" ? 560 : asset.mediaType === "audio" ? 430 : 420;
+      const height = asset.mediaType === "video" ? 315 : asset.mediaType === "audio" ? 170 : 280;
+      const node = createMediaResourceNode({
+        action: `${asset.mediaType.toUpperCase()}_RESOURCE`,
+        height,
+        mediaType: asset.mediaType,
+        mediaUrl: asset.url,
+        title: asset.label,
+        width,
+        x: Math.round(center.x - width / 2),
+        y: Math.round(center.y - height / 2),
+      });
+      addNodes([node], []);
+      setActivePanel(null);
+      setCanvasCommand(null);
+      setConnectionMenu(null);
+      toast.success(`已添加「${asset.label}」素材`);
+    },
+    [addNodes, toCanvasPoint]
+  );
+
+  const addStyleAssetFromMarket = useCallback(
+    (card: AssetMarketCard) => {
+      const [title, author, count, model] = card;
+      const sameKindCount = nodes.filter((node) => node.kind === "material-style").length;
+      const anchor = toCanvasPoint(MATERIAL_STYLE_SCREEN_ANCHOR.x, MATERIAL_STYLE_SCREEN_ANCHOR.y);
+      const node = createMaterialStyleNode({
+        author,
+        count,
+        model,
+        thumbnailUrl: STYLE_MARKET_THUMBNAIL_URL,
+        title,
+        x: anchor.x + sameKindCount * 28,
+        y: anchor.y + sameKindCount * 28,
+      });
+      addNodes([node], []);
+      setSelectedNodeId(null);
+      setSelectedEdgeId(null);
+      setActivePanel(null);
+      setCanvasCommand(null);
+      setConnectionMenu(null);
+    },
+    [addNodes, nodes, toCanvasPoint]
+  );
+
+  const applyVideoEffectFromMarket = useCallback(
+    (preset: VideoCanvasEffectPreset) => {
+      if (!effectLibraryTargetNodeId) {
+        setActivePanel(null);
+        return;
+      }
+
+      const connectedEffectEdge = edges.find((edge) => {
+        if (edge.target !== effectLibraryTargetNodeId) return false;
+        return isVideoEffectMaterialNode(
+          nodes.find((node) => node.id === edge.source),
+        );
+      });
+      const connectedEffectNode = connectedEffectEdge
+        ? nodes.find((node) => node.id === connectedEffectEdge.source)
+        : null;
+
+      if (connectedEffectNode) {
+        setNodes((current) =>
+          current.map((node) => {
+            if (node.id !== connectedEffectNode.id) return node;
+            const replacement = createMaterialEffectNode({
+              preset,
+              x: node.x,
+              y: node.y,
+            });
+            return {
+              ...replacement,
+              id: node.id,
+            };
+          }),
+        );
+      } else {
+        const sameKindCount = nodes.filter(isVideoEffectMaterialNode).length;
+        const anchor = toCanvasPoint(
+          MATERIAL_STYLE_SCREEN_ANCHOR.x,
+          MATERIAL_STYLE_SCREEN_ANCHOR.y,
+        );
+        const effectNode = createMaterialEffectNode({
+          preset,
+          x: Math.round(anchor.x + sameKindCount * 28),
+          y: Math.round(anchor.y + sameKindCount * 28),
+        });
+        setNodes((current) => [...current, effectNode]);
+        setEdges((current) => [
+          ...current,
+          {
+            id: makeId("edge"),
+            source: effectNode.id,
+            target: effectLibraryTargetNodeId,
+          },
+        ]);
+      }
+
+      setSelectedNodeId(effectLibraryTargetNodeId);
+      setSelectedEdgeId(null);
+      setActivePanel(null);
+      setEffectLibraryTargetNodeId(null);
+      setCanvasCommand(null);
+      setNodeContextMenu(null);
+      setConnectionMenu(null);
+    },
+    [edges, effectLibraryTargetNodeId, nodes, toCanvasPoint],
+  );
+
+  const applyVideoRolesFromLibrary = useCallback(
+    (selectedRoleIds: string[]) => {
+      if (!roleLibraryTargetNodeId) {
+        setActivePanel(null);
+        return;
+      }
+
+      const selectedPresets = videoCanvasFunctionConfig.rolePresets
+        .filter((preset) => selectedRoleIds.includes(preset.id))
+        .slice(0, 4);
+      const connectedRoleEdges = edges.filter((edge) => {
+        if (edge.target !== roleLibraryTargetNodeId) return false;
+        return isVideoRoleMaterialNode(
+          nodes.find((node) => node.id === edge.source),
+        );
+      });
+      const connectedRoleNodes = connectedRoleEdges
+        .map((edge) => nodes.find((node) => node.id === edge.source))
+        .filter((node): node is CloneNode => Boolean(node));
+      const availableByRoleId = new Map(
+        nodes
+          .filter(isVideoRoleMaterialNode)
+          .map((node) => [getDraftString(node, "roleId"), node]),
+      );
+      const connectedByRoleId = new Map(
+        connectedRoleNodes.map((node) => [getDraftString(node, "roleId"), node]),
+      );
+      for (const [roleId, node] of connectedByRoleId) {
+        availableByRoleId.set(roleId, node);
+      }
+      const sameKindCount = nodes.filter(isVideoRoleMaterialNode).length;
+      const anchor = toCanvasPoint(
+        MATERIAL_STYLE_SCREEN_ANCHOR.x + MATERIAL_STYLE_NODE_SIZE + 28,
+        MATERIAL_STYLE_SCREEN_ANCHOR.y,
+      );
+      const newRoleNodes = selectedPresets
+        .filter((preset) => !availableByRoleId.has(preset.id))
+        .map((preset, index) =>
+          createMaterialRoleNode({
+            preset,
+            x: Math.round(anchor.x + (sameKindCount + index) * 28),
+            y: Math.round(anchor.y + (sameKindCount + index) * 28),
+          }),
+        );
+      const newRoleByRoleId = new Map(
+        newRoleNodes.map((node) => [getDraftString(node, "roleId"), node]),
+      );
+      const selectedRoleNodes = selectedPresets
+        .map(
+          (preset) =>
+            availableByRoleId.get(preset.id) || newRoleByRoleId.get(preset.id),
+        )
+        .filter((node): node is CloneNode => Boolean(node));
+      const selectedRoleNodeIds = new Set(selectedRoleNodes.map((node) => node.id));
+      const connectedRoleNodeIds = new Set(
+        connectedRoleEdges.map((edge) => edge.source),
+      );
+
+      setNodes((current) => [
+        ...current.map((node) => {
+          if (!selectedRoleNodeIds.has(node.id)) return node;
+          const roleId = getDraftString(node, "roleId");
+          const preset = selectedPresets.find((item) => item.id === roleId);
+          if (!preset) return node;
+          const replacement = createMaterialRoleNode({
+            preset,
+            x: node.x,
+            y: node.y,
+          });
+          return { ...replacement, id: node.id };
+        }),
+        ...newRoleNodes,
+      ]);
+      setEdges((current) => [
+        ...current.filter((edge) => {
+          if (edge.target !== roleLibraryTargetNodeId) return true;
+          const sourceNode = nodes.find((node) => node.id === edge.source);
+          if (!isVideoRoleMaterialNode(sourceNode)) return true;
+          return selectedRoleNodeIds.has(edge.source);
+        }),
+        ...selectedRoleNodes
+          .filter((node) => !connectedRoleNodeIds.has(node.id))
+          .map((node) => ({
+            id: makeId("edge"),
+            source: node.id,
+            target: roleLibraryTargetNodeId,
+          })),
+      ]);
+      setSelectedNodeId(roleLibraryTargetNodeId);
+      setSelectedEdgeId(null);
+      setActivePanel(null);
+      setRoleLibraryTargetNodeId(null);
+      setVideoRoleAgreementOpen(false);
+      setCanvasCommand(null);
+      setNodeContextMenu(null);
+      setConnectionMenu(null);
+    },
+    [
+      edges,
+      nodes,
+      roleLibraryTargetNodeId,
+      toCanvasPoint,
+      videoCanvasFunctionConfig.rolePresets,
+    ],
+  );
+
+  const addRoleAssetFromLibrary = useCallback(
+    (role: RoleLibraryItem) => {
+      const roleNodes = ROLE_LIBRARY_NODE_LAYOUT.map((layout) => {
+        const created = createMediaResourceNode({
+          action: "ROLE_LIBRARY_RESOURCE",
+          height: layout.height,
+          mediaType: "image",
+          mediaUrl: role.images[layout.imageKey],
+          prompt: role.prompt,
+          title: `${role.name} ${layout.title}`,
+          width: layout.width,
+          x: layout.x,
+          y: layout.y,
+        });
+        return {
+          ...created,
+          subtitle: "角色库资产",
+          draftValues: {
+            ...(created.draftValues || {}),
+            roleDescription: role.description,
+            roleImageKind: layout.title,
+            roleTags: role.tags,
+            source: "role-library",
+          },
+        };
+      });
+      addNodes(roleNodes, []);
+      setViewport(ROLE_LIBRARY_APPLY_VIEWPORT);
+      setSelectedNodeId(null);
+      setSelectedEdgeId(null);
+      setActivePanel(null);
+      setCanvasCommand(null);
+      setConnectionMenu(null);
+      toast.success("已应用到画布");
+    },
+    [addNodes]
+  );
+
+  const reuseHistoryAssetNode = useCallback(
+    (sourceNode: CloneNode) => {
+      const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
+      const node: CloneNode = {
+        ...sourceNode,
+        id: makeId("history"),
+        x: Math.round(center.x - sourceNode.width / 2),
+        y: Math.round(center.y - sourceNode.height / 2),
+        draftValues: {
+          ...(sourceNode.draftValues || {}),
+          historySourceNodeId: sourceNode.id,
+          source: "history-assets",
+        },
+      };
+      addNodes([node], []);
+      setSelectedNodeId(node.id);
+      setActivePanel(null);
+      setCanvasCommand(null);
+      setConnectionMenu(null);
+      toast.success("已应用到画布");
+    },
+    [addNodes, toCanvasPoint]
+  );
+
+  const addHistoryPickerNodes = useCallback(
+    (sourceNodes: CloneNode[]) => {
+      const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
+      const createdNodes = sourceNodes.flatMap((sourceNode, index) => {
+        const mediaType = sourceNode.inputType === "video" || sourceNode.inputType === "audio" ? sourceNode.inputType : "image";
+        const mediaUrl = getNodeMediaUrl(sourceNode) || getNodeReferenceMediaUrl(sourceNode);
+        if (!mediaUrl) return [];
+        const label = mediaType === "video" ? "视频" : mediaType === "audio" ? "音频" : "图片";
+        const sameTypeCount = nodes.filter((node) => node.inputType === mediaType).length;
+        const width = mediaType === "video" ? 622 : 350;
+        const height = mediaType === "audio" ? 148 : 350;
+        return createMediaResourceNode({
+          height,
+          mediaType,
+          mediaUrl,
+          title: `${label}节点 ${sameTypeCount + index + 1}`,
+          width,
+          x: Math.round(center.x + index * 28),
+          y: Math.round(center.y + index * 28),
+        });
+      });
+      if (createdNodes.length === 0) return;
+      addNodes(createdNodes, []);
+      setSelectedNodeId(null);
+      setActivePanel(null);
+      setCanvasCommand(null);
+      setConnectionMenu(null);
+    },
+    [addNodes, nodes, toCanvasPoint]
+  );
+
   const addCanvasCommandUploadedFiles = useCallback(
     (files: File[]) => {
       if (!canvasCommand) return;
@@ -3091,6 +6185,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       event.preventDefault();
       const point = toCanvasPoint(event.clientX, event.clientY);
       setSelectedNodeId(null);
+      setSelectedEdgeId(null);
       setInspectorNodeId(null);
       setNodeContextMenu(null);
       setConnectionMenu(null);
@@ -3109,6 +6204,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     event.preventDefault();
     event.stopPropagation();
     setSelectedNodeId(node.id);
+    setSelectedEdgeId(null);
     setCanvasCommand(null);
     setInspectorNodeId(null);
     setConnectionMenu(null);
@@ -3122,22 +6218,31 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
   const openConnectionMenu = useCallback((event: ReactMouseEvent<HTMLButtonElement>, node: CloneNode, side: ConnectionSide) => {
     event.preventDefault();
     event.stopPropagation();
+    if (suppressConnectionClickRef.current) {
+      suppressConnectionClickRef.current = false;
+      return;
+    }
+    const canvasPoint = {
+      x: (event.clientX - viewport.x) / viewport.zoom,
+      y: (event.clientY - viewport.y) / viewport.zoom,
+    };
     setSelectedNodeId(node.id);
+    setSelectedEdgeId(null);
     setCanvasCommand(null);
     setNodeContextMenu(null);
     setInspectorNodeId(null);
     setConnectionMenu(null);
     setActivePanel(null);
-    setConnectionMenu({
-      nodeId: node.id,
-      screenX: event.clientX,
-      screenY: event.clientY,
-      side,
+    setLineConnectState({
+      cursorCanvasX: canvasPoint.x,
+      cursorCanvasY: canvasPoint.y,
+      sourceId: side === "source" ? node.id : null,
+      targetId: side === "target" ? node.id : null,
     });
-  }, []);
+  }, [viewport.x, viewport.y, viewport.zoom]);
 
   const addConnectedModule = useCallback(
-    (kind: Exclude<AddModuleKind, "audio">) => {
+    (kind: Exclude<AddModuleKind, "audio" | "director">) => {
       if (!connectionMenu) return;
       const anchor = nodes.find((node) => node.id === connectionMenu.nodeId);
       if (!anchor) return;
@@ -3171,6 +6276,35 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     [addNodes, connectionMenu, nodes]
   );
 
+  const connectExistingNodes = useCallback(
+    (sourceId: string, targetId: string, options: { notify?: boolean } = {}) => {
+      const shouldNotify = options.notify !== false;
+      if (sourceId === targetId) {
+        toast.info("不能连接到同一个节点");
+        return false;
+      }
+      const source = nodes.find((node) => node.id === sourceId);
+      const target = nodes.find((node) => node.id === targetId);
+      if (!source || !target) {
+        toast.error("未找到可连接的节点");
+        return false;
+      }
+      const exists = edges.some((edge) => edge.source === sourceId && edge.target === targetId);
+      if (exists) {
+        toast.info("这两个节点已经连接");
+        return false;
+      }
+      setEdges((current) => [...current, { id: makeId("edge"), source: sourceId, target: targetId }]);
+      setSelectedNodeId(targetId);
+      setSelectedEdgeId(null);
+      if (shouldNotify) {
+        toast.success(`已连接「${source.title}」到「${target.title}」`);
+      }
+      return true;
+    },
+    [edges, nodes]
+  );
+
   const runTargetModuleAction = useCallback(
     (nodeId: string, actionLabel: TargetModuleActionLabel) => {
       const anchor = nodes.find((node) => node.id === nodeId);
@@ -3211,6 +6345,14 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       };
 
       switch (actionLabel) {
+        case "打开导演台": {
+          setDirectorConsoleNodeId(nodeId);
+          setSelectedNodeId(nodeId);
+          setCanvasCommand(null);
+          setNodeContextMenu(null);
+          setConnectionMenu(null);
+          return;
+        }
         case "自己编写内容": {
           const textNode = createTextResourceNode({
             content: "",
@@ -3290,6 +6432,16 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
           connectFromAnchor(makeGenerated("image", "高清", rightX, { generatorType: "ENHANCE" }));
           break;
         }
+        case "参考":
+        case "标记":
+        case "风格":
+        case "自己编写分镜脚本": {
+          setSelectedNodeId(nodeId);
+          setNodeContextMenu(null);
+          setConnectionMenu(null);
+          setCanvasCommand(null);
+          return;
+        }
         case "音频生视频": {
           anchorUpdates = {
             kind: "media",
@@ -3453,7 +6605,13 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       setConnectionMenu(null);
       setCanvasCommand(null);
       setActivePanel(null);
-      if (actionLabel !== "自己编写内容") toast.success(`已按「${actionLabel}」创建关联节点`);
+      if (
+        actionLabel !== "自己编写内容" &&
+        actionLabel !== "首帧生成视频" &&
+        actionLabel !== "首尾帧生成视频"
+      ) {
+        toast.success(`已按「${actionLabel}」创建关联节点`);
+      }
     },
     [nodes]
   );
@@ -4761,38 +7919,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
                 definition,
                 promptInput || slashScene || "生成角色三视图",
               );
-      let generatedUrl = "";
 
-      if (videoCanvasFunctionConfig.enabled && definition?.enabled) {
-        const response = await imageGenerationService.generateImage({
-          aspectRatio: isWideGeneration ? "16:9" : payload.settings.ratio,
-          billingFeature: getImageGenerationBillingFeature(functionKey),
-          imageCount: isWideGeneration ? 1 : count,
-          model: getFunctionModel(videoCanvasFunctionConfig, definition, payload.settings.model),
-          prompt: finalPrompt,
-          promptExtend: !isWideGeneration,
-          referenceImage: sourceUrl,
-          referenceImages: extraReferenceImages,
-        });
-        generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
-        if (!generatedUrl && !response.success) {
-          toast.error(response.error || `${definition.label}生成失败，已保留生成节点`);
-        }
-      }
-
-      const generatedNode = generatedUrl
-        ? createMediaResourceNode({
-            action: "IMAGE_RESOURCE",
-            height: resultHeight,
-            mediaType: "image",
-            mediaUrl: generatedUrl,
-            prompt: finalPrompt,
-            title: resultTitle,
-            width: resultWidth,
-            x: rightX,
-            y: Math.round(anchor.y + anchor.height / 2 - resultHeight / 2),
-          })
-        : null;
       const placeholderNode = isWideGeneration
         ? createMediaResourceNode({
             action:
@@ -4809,20 +7936,22 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             y: Math.round(anchor.y + anchor.height / 2 - resultHeight / 2),
           })
         : createTargetModuleNode("image", rightX, 0, nodes.length + 1);
-      const created = generatedNode || placeholderNode;
+      const created = placeholderNode;
       const resultNode: CloneNode = {
         ...created,
         title: resultTitle,
         y:
-          generatedNode?.y ??
-          (isWideGeneration
+          isWideGeneration
             ? placeholderNode.y
-            : Math.round(anchor.y + anchor.height / 2 - created.height / 2)),
+            : Math.round(anchor.y + anchor.height / 2 - created.height / 2),
         draftValues: {
           ...(created.draftValues || {}),
+          action: isPresetGridFunction(functionKey) ? "IMAGE_GENERATE_NINE_GRID" : "IMAGE_GENERATE",
           functionKey,
-          generated: Boolean(generatedUrl) || created.draftValues?.generated,
-          generationStatus: generatedUrl ? "complete" : created.draftValues?.generationStatus,
+          generated: false,
+          generationError: undefined,
+          generationProgress: 2,
+          generationStatus: "pending",
           gridColumns: gridLayout?.columns || created.draftValues?.gridColumns,
           gridPrompt: gridLayout ? finalPrompt : created.draftValues?.gridPrompt,
           gridRows: gridLayout?.rows || created.draftValues?.gridRows,
@@ -4848,6 +7977,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             sourceNodeId: anchor.id,
             sourceUrl,
           },
+          pendingLabel: "生成中",
           prompt: finalPrompt,
           sourceNodeId: anchor.id,
           sourceUrl,
@@ -4870,7 +8000,74 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       setNodeContextMenu(null);
       setConnectionMenu(null);
       setActivePanel(null);
-      toast.success(generatedUrl ? "已按当前提示词生成图片结果" : "已按当前提示词创建图片生成节点");
+      toast.success("已提交图片生成");
+
+      try {
+        if (!videoCanvasFunctionConfig.enabled || !definition?.enabled) {
+          throw new Error("视频画布功能未启用，请先在配置中开启");
+        }
+        const response = await imageGenerationService.generateImage({
+          aspectRatio: isWideGeneration ? "16:9" : payload.settings.ratio,
+          billingFeature: getImageGenerationBillingFeature(functionKey),
+          imageCount: isWideGeneration ? 1 : count,
+          model: getFunctionModel(videoCanvasFunctionConfig, definition, payload.settings.model),
+          prompt: finalPrompt,
+          promptExtend: !isWideGeneration,
+          referenceImage: sourceUrl,
+          referenceImages: extraReferenceImages,
+        });
+        const generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
+        if (!generatedUrl) {
+          throw new Error(response.error || `${definition.label}生成失败`);
+        }
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === resultNode.id
+              ? {
+                  ...item,
+                  kind: "media",
+                  inputType: "image",
+                  subtitle: "生成结果",
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    action: "IMAGE_RESOURCE",
+                    generated: true,
+                    generationProgress: 100,
+                    generationStatus: "complete",
+                    mediaType: "image",
+                    mediaUrl: generatedUrl,
+                    nodeType: "image",
+                    nineGridCells: gridLayout
+                      ? Array.from({ length: gridLayout.rows * gridLayout.columns }).map((_, index) => getGridCellVisual(index))
+                      : item.draftValues?.nineGridCells,
+                    nineGridComposite: gridLayout ? true : item.draftValues?.nineGridComposite,
+                    prompt: finalPrompt,
+                    sourceUrl,
+                    url: [generatedUrl],
+                  },
+                }
+              : item
+          )
+        );
+        toast.success("已按当前提示词生成图片结果");
+      } catch (error) {
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === resultNode.id
+              ? {
+                  ...item,
+                  subtitle: "生成失败",
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    generationError: error instanceof Error ? error.message : `${definition.label}生成失败`,
+                    generationStatus: "failed",
+                  },
+                }
+              : item
+          )
+        );
+        toast.error(error instanceof Error ? error.message : `${definition.label}生成失败`);
+      }
     },
     [nodes, videoCanvasFunctionConfig]
   );
@@ -4891,10 +8088,35 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
           .filter((item) => item.inputType === "image")
           .map((item) => resolveNodeReferenceImages(item))
       );
+      const effectMaterials = incomingNodes.filter(isVideoEffectMaterialNode);
+      const effectDescriptors = effectMaterials.map((item) => ({
+        id: getDraftString(item, "effectId"),
+        title:
+          getDraftString(item, "effectTitle") ||
+          item.title.replace(/^素材-特效-/, ""),
+        prompt: getDraftString(item, "effectPrompt"),
+        model: getDraftString(item, "model"),
+        thumbnailUrl:
+          getDraftString(item, "thumbnailUrl") || getNodeMediaUrl(item),
+      }));
+      const roleMaterials = incomingNodes.filter(isVideoRoleMaterialNode);
+      const roleDescriptors = roleMaterials.map((item) => ({
+        id: getDraftString(item, "roleId"),
+        assetId: getDraftString(item, "assetId"),
+        name:
+          getDraftString(item, "roleName") ||
+          item.title.replace(/^素材-角色-/, ""),
+        prompt: getDraftString(item, "rolePrompt"),
+        tags: getDraftString(item, "roleTags"),
+        thumbnailUrl:
+          getDraftString(item, "thumbnailUrl") || getNodeMediaUrl(item),
+      }));
       const imageUrls = Array.from(
         new Set(
-          imageReferenceLists
-            .flat()
+          [
+            ...imageReferenceLists.flat(),
+            ...getVideoCanvasMagicMarks(node).map((mark) => mark.imageUrl),
+          ]
             .map((item) => String(item || "").trim())
             .filter(Boolean)
         )
@@ -4913,6 +8135,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         getVideoFunctionKeyForMode(requestedMode),
       );
       const requestedSettings = payload?.settings;
+      const magicMarks = payload?.magicMarks || getVideoCanvasMagicMarks(node);
       const preferredModelOverride = requestedSettings?.model || String(params.model || paramsSettings.model || "");
       const preferredModelRef = getFunctionModel(videoCanvasFunctionConfig, definition, preferredModelOverride);
       const ratio = normalizeVideoRatioValue(requestedSettings?.ratio || params.ratio || paramsSettings.ratio);
@@ -4922,7 +8145,13 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       const duration = normalizeVideoDurationValue(
         requestedSettings?.duration || params.duration || paramsSettings.duration,
       );
-      const referenceImages = selectVideoReferenceImages(imageUrls, requestedMode);
+      const markedImageUrls = Array.from(
+        new Set(magicMarks.map((mark) => mark.imageUrl).filter(Boolean))
+      ).slice(0, 4);
+      const referenceImages =
+        requestedMode === "text-to-video" && markedImageUrls.length > 0
+          ? markedImageUrls
+          : selectVideoReferenceImages(imageUrls, requestedMode);
       if (requestedMode === "first-frame" && referenceImages.length < 1) {
         toast.error("图生视频至少需要 1 张参考图片");
         return;
@@ -4939,19 +8168,69 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       const rawPrompt = String(
         payload?.prompt ?? params.prompt ?? node.draftValues?.prompt ?? "",
       ).trim();
-      const finalPrompt = composeFunctionPrompt(definition, rawPrompt || node.title);
+      const markLabels = magicMarks.map(
+        (mark) => mark.labelOptions[mark.selectedIndex] || mark.labelOptions[0]
+      );
+      const promptWithMarks = [
+        rawPrompt,
+        markLabels.length > 0
+          ? `重点遵循已标记元素：${markLabels.map((label) => `@${label}`).join("、")}`
+          : "",
+      ]
+        .filter(Boolean)
+        .join(" ");
+      const promptWithEffects = [
+        promptWithMarks,
+        ...effectDescriptors.map((effect) =>
+          [
+            `应用视频特效「${effect.title}」。`,
+            effect.prompt,
+          ]
+            .filter(Boolean)
+            .join(" "),
+        ),
+      ]
+        .filter(Boolean)
+        .join(" ");
+      const promptWithRoles = [
+        promptWithEffects,
+        ...roleDescriptors.map((role) =>
+          [
+            `角色引用「${role.name}」${role.assetId ? `（合规资产 ${role.assetId}）` : ""}。`,
+            role.prompt,
+          ]
+            .filter(Boolean)
+            .join(" "),
+        ),
+      ]
+        .filter(Boolean)
+        .join(" ");
+      const finalPrompt = composeFunctionPrompt(
+        definition,
+        promptWithRoles || node.title
+      );
       const previewUrl =
         referenceImages[0] ||
         getNodeReferenceMediaUrl(incomingNodes.find((item) => item.inputType === "image")) ||
         getNodeReferenceMediaUrl(node) ||
         "";
       const savedSettings: ComposerSettings & { duration: string } = {
+        autoValidateMaterial: requestedSettings?.autoValidateMaterial ?? normalizeComposerBoolean(
+          paramsSettings.autoValidateMaterial ?? paramsSettings.auto_validate_material,
+          true,
+        ),
+        audio: requestedSettings?.audio || String(paramsSettings.audio || "开启"),
         camera: requestedSettings?.camera || String(paramsSettings.camera || "摄像机"),
         count: requestedSettings?.count || String(paramsSettings.count || "1个"),
         model: normalizeModelRef(preferredModelOverride) || "auto",
+        modelLabel: requestedSettings?.modelLabel || String(paramsSettings.modelLabel || ""),
         panorama: requestedSettings?.panorama || String(paramsSettings.panorama || "全能参考"),
-        ratio,
+        ratio: formatVideoRatioLabel(ratio),
         resolution: formatVideoResolutionLabel(resolution),
+        searchEnabled: requestedSettings?.searchEnabled ?? normalizeComposerBoolean(
+          paramsSettings.searchEnabled ?? paramsSettings.search_enabled ?? paramsSettings.searchable,
+          true,
+        ),
         duration: formatVideoDurationLabel(duration),
       };
 
@@ -4976,7 +8255,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
                   params: {
                     ...getNodeParams(item),
                     duration,
+                    effects: effectDescriptors,
+                    roles: roleDescriptors,
                     mode: requestedMode,
+                    magicMarks,
                     model: normalizeModelRef(preferredModelOverride) || undefined,
                     prompt: rawPrompt || finalPrompt,
                     ratio,
@@ -5026,7 +8308,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
                     params: {
                       ...getNodeParams(item),
                       duration,
+                      effects: effectDescriptors,
+                      roles: roleDescriptors,
                       mode: requestedMode,
+                      magicMarks,
                       model: normalizeModelRef(preferredModelOverride) || undefined,
                       prompt: rawPrompt || finalPrompt,
                       ratio,
@@ -5074,6 +8359,354 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     [edges, nodes, videoCanvasFunctionConfig]
   );
 
+  const runStoryScriptToolbarAction = useCallback(
+    (nodeId: string, action: StoryToolbarAction) => {
+      const anchor = nodes.find((item) => item.id === nodeId);
+      if (!anchor) return;
+      const rowKey = (row: StoryScriptRow) => row.shot || row.id;
+      const closeTransientUi = () => {
+        setCanvasCommand(null);
+        setNodeContextMenu(null);
+        setConnectionMenu(null);
+        setActivePanel(null);
+      };
+
+      if (action === "regenerate") {
+        const incomingNodes = edges
+          .filter((edge) => edge.target === nodeId)
+          .map((edge) => nodes.find((item) => item.id === edge.source))
+          .filter((item): item is CloneNode => Boolean(item));
+        const imageUrls = incomingNodes
+          .filter((item) => item.inputType === "image")
+          .map((item) => getNodeReferenceMediaUrl(item))
+          .filter(Boolean);
+        const videoUrls = incomingNodes
+          .filter((item) => item.inputType === "video")
+          .map((item) => getNodeReferenceMediaUrl(item))
+          .filter(Boolean);
+        const textInputs = incomingNodes
+          .flatMap((item) => {
+            const content = item.draftValues?.content;
+            return Array.isArray(content) ? content.filter((value): value is string => typeof value === "string") : [];
+          })
+          .join("\n\n");
+        const definition = getConfiguredFunction(videoCanvasFunctionConfig, "story-script");
+        const currentParams = getNodeParams(anchor);
+        const selectedModelRef = normalizeModelRef(currentParams.model);
+        const draftPrompt = getDraftString(anchor, "prompt") || STORY_SCRIPT_PROMPT;
+        const prompt = composeFunctionPrompt(definition, `${draftPrompt}\n\n${textInputs}`.trim());
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === nodeId
+              ? {
+                  ...item,
+                  subtitle: "生成中",
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    generated: false,
+                    generationError: undefined,
+                    generationProgress: 2,
+                    generationStatus: "pending",
+                    params: {
+                      ...getNodeParams(item),
+                      functionKey: "story-script",
+                      imageUrls,
+                      model: selectedModelRef || undefined,
+                      prompt,
+                      route: "canvas-workflow-analyze",
+                      videoUrls,
+                    },
+                    prompt,
+                  },
+                }
+              : item
+          )
+        );
+        setSelectedNodeId(nodeId);
+        closeTransientUi();
+        void (async () => {
+          try {
+            const response = await workflowAnalysisService.analyze({
+              imageUrls,
+              mode: "story-script",
+              nodeTitle: anchor.title,
+              preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, selectedModelRef),
+              prompt,
+              videoUrls,
+            });
+            if (!response.success) throw new Error(response.error || "故事脚本生成失败");
+            const content =
+              response.data?.raw ||
+              response.data?.agentPlan?.join("\n") ||
+              response.data?.summary ||
+              "";
+            setNodes((current) =>
+              current.map((item) =>
+                item.id === nodeId
+                  ? {
+                      ...item,
+                      subtitle: "生成结果",
+                      draftValues: {
+                        ...(item.draftValues || {}),
+                        content: content ? [content] : item.draftValues?.content,
+                        generated: true,
+                        generationProgress: 100,
+                        generationStatus: "complete",
+                        prompt,
+                        rows: response.data?.analysisRows || response.data?.shotIdeas || item.draftValues?.rows,
+                      },
+                    }
+                  : item
+              )
+            );
+            toast.success("故事脚本已重新生成");
+          } catch (error) {
+            setNodes((current) =>
+              current.map((item) =>
+                item.id === nodeId
+                  ? {
+                      ...item,
+                      subtitle: "生成失败",
+                      draftValues: {
+                        ...(item.draftValues || {}),
+                        generationError: error instanceof Error ? error.message : "故事脚本生成失败",
+                        generationStatus: "failed",
+                      },
+                    }
+                  : item
+              )
+            );
+            toast.error(error instanceof Error ? error.message : "故事脚本生成失败");
+          }
+        })();
+        return;
+      }
+
+      const rows = getStoryScriptRows(anchor);
+      if (rows.length === 0) {
+        toast.error("当前脚本没有可操作的镜头行");
+        return;
+      }
+
+      const existingStoryboards = nodes.filter(
+        (item) =>
+          String(item.draftValues?.sourceScriptNodeId || "") === nodeId &&
+          String(item.draftValues?.storyToolNodeType || "") === "storyboard"
+      );
+      const existingStoryboardKeys = new Set(
+        existingStoryboards
+          .map((item) => {
+            const storyRow = item.draftValues?.storyRow as StoryScriptRow | undefined;
+            return storyRow ? rowKey(storyRow) : "";
+          })
+          .filter(Boolean)
+      );
+      const rowsToCreate = rows.filter((row) => !existingStoryboardKeys.has(rowKey(row)));
+
+      const sceneNodes = nodes.filter(
+        (item) =>
+          String(item.draftValues?.sourceScriptNodeId || "") === nodeId &&
+          String(item.draftValues?.storyToolNodeType || "") === "scene"
+      );
+      const sceneByKey = new Map(
+        sceneNodes
+          .map((item) => {
+            const storyRow = item.draftValues?.storyRow as StoryScriptRow | undefined;
+            return storyRow ? [rowKey(storyRow), item] as const : null;
+          })
+          .filter((item): item is readonly [string, CloneNode] => Boolean(item))
+      );
+      const storyboardByKey = new Map(
+        existingStoryboards
+          .map((item) => {
+            const storyRow = item.draftValues?.storyRow as StoryScriptRow | undefined;
+            return storyRow ? [rowKey(storyRow), item] as const : null;
+          })
+          .filter((item): item is readonly [string, CloneNode] => Boolean(item))
+      );
+
+      if (action === "create-storyboard") {
+        if (rowsToCreate.length === 0) {
+          setSelectedNodeId(existingStoryboards[0]?.id || nodeId);
+          closeTransientUi();
+          toast.info("当前脚本已经创建过分镜节点");
+          return;
+        }
+
+        const width = 420;
+        const height = 280;
+        const fallbackX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP + (sceneNodes.length > 0 ? 472 : 0));
+        const nextNodes = rowsToCreate.map((row) => {
+          const rowIndex = Math.max(0, rows.findIndex((item) => rowKey(item) === rowKey(row)));
+          const sceneNode = sceneByKey.get(rowKey(row));
+          const x = sceneNode ? Math.round(sceneNode.x + sceneNode.width + 52) : fallbackX;
+          const y = sceneNode ? sceneNode.y : Math.round(anchor.y + rowIndex * (height + 30));
+          const prompt = [
+            row.imagePrompt,
+            `景别：${row.shotSize}`,
+            `光影氛围：${row.lighting}`,
+            row.dialogue && row.dialogue !== "+" ? `对白/旁白：${row.dialogue}` : "",
+            row.voiceAndSfx && row.voiceAndSfx !== "无" ? `音效：${row.voiceAndSfx}` : "",
+            `运镜：${row.cameraMovement}`,
+            row.motionPrompt,
+          ].filter(Boolean).join("\n");
+          return {
+            id: makeId("storyboard"),
+            kind: "media",
+            title: `分镜 ${row.shot}`,
+            subtitle: row.scene,
+            inputType: "image",
+            x,
+            y,
+            width,
+            height,
+            accent: "#8790ff",
+            draftValues: {
+              action: "IMAGE_GENERATE",
+              functionKey: "image-repaint",
+              generated: false,
+              mediaType: "image",
+              mediaUrl: row.keyframeUrl,
+              nodeType: "image",
+              params: {
+                functionKey: "image-repaint",
+                motionPrompt: row.motionPrompt,
+                prompt,
+                sceneDescription: row.sceneDescription,
+                sourceSceneNodeId: sceneNode?.id,
+                sourceScriptNodeId: nodeId,
+                storyRow: row,
+              },
+              prompt,
+              sourceScriptNodeId: nodeId,
+              sourceUrl: row.keyframeUrl,
+              storyRow: row,
+              storyToolNodeType: "storyboard",
+              url: row.keyframeUrl ? [row.keyframeUrl] : [],
+            },
+          } satisfies CloneNode;
+        });
+        const nextEdges = nextNodes.map((node) => ({
+          id: makeId("edge"),
+          source: String(node.draftValues?.params && (node.draftValues.params as Record<string, unknown>).sourceSceneNodeId || anchor.id),
+          target: node.id,
+        }));
+
+        addNodes(nextNodes, nextEdges);
+        setSelectedNodeId(nextNodes[0]?.id || anchor.id);
+        closeTransientUi();
+        toast.success(`已批量生成 ${nextNodes.length} 个分镜图片节点`);
+        return;
+      }
+
+      const existingVideos = nodes.filter(
+        (item) =>
+          String(item.draftValues?.sourceScriptNodeId || "") === nodeId &&
+          String(item.draftValues?.storyToolNodeType || "") === "story-video"
+      );
+      const existingVideoKeys = new Set(
+        existingVideos
+          .map((item) => {
+            const storyRow = item.draftValues?.storyRow as StoryScriptRow | undefined;
+            return storyRow ? rowKey(storyRow) : "";
+          })
+          .filter(Boolean)
+      );
+      const rowsForVideo = rows.filter((row) => !existingVideoKeys.has(rowKey(row)));
+
+      if (rowsForVideo.length === 0) {
+        setSelectedNodeId(existingVideos[0]?.id || nodeId);
+        closeTransientUi();
+        toast.info("当前脚本已经创建过视频生成器组");
+        return;
+      }
+
+      const width = 622;
+      const height = 350;
+      const fallbackX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP + (existingStoryboards.length > 0 ? 472 : 0));
+      const nextNodes = rowsForVideo.map((row) => {
+        const rowIndex = Math.max(0, rows.findIndex((item) => rowKey(item) === rowKey(row)));
+        const storyboardNode = storyboardByKey.get(rowKey(row));
+        const referenceImage = storyboardNode ? getNodeReferenceMediaUrl(storyboardNode) : row.keyframeUrl;
+        const previewUrl = referenceImage || row.keyframeUrl || FIRST_FRAME_IMAGE_URL;
+        const duration = 5;
+        const settings: ComposerSettings = {
+          audio: "开启",
+          camera: "摄像机",
+          count: "1个",
+          duration: `${duration}s`,
+          model: "seedance-2.0-vip",
+          modelLabel: "Seedance 2.0 VIP",
+          panorama: referenceImage ? "首帧生成视频" : "文生视频",
+          ratio: "16:9",
+          resolution: "720P",
+        };
+        const prompt = buildStoryVideoPrompt(row);
+        return {
+          id: makeId("story-video"),
+          kind: "media",
+          title: `分镜视频-#${rowIndex + 1}`,
+          subtitle: `${row.scene} · Seedance 2.0 VIP`,
+          inputType: "video",
+          x: storyboardNode ? Math.round(storyboardNode.x + storyboardNode.width + 52) : fallbackX,
+          y: storyboardNode ? storyboardNode.y : Math.round(anchor.y + rowIndex * (height + 30)),
+          width,
+          height,
+          accent: "#8b96ff",
+          draftValues: {
+            action: "VIDEO_GENERATE",
+            functionKey: "first-frame-video",
+            generated: false,
+            generationProgress: 2,
+            generationStatus: "pending",
+            mediaType: "video",
+            mediaUrl: "",
+            nodeType: "video",
+            outputSizeLabel: `720P · ${duration}s`,
+            params: {
+              duration,
+              functionKey: "first-frame-video",
+              imagePrompt: row.imagePrompt,
+              mode: referenceImage ? "first-frame" : "text-to-video",
+              model: "seedance-2.0-vip",
+              modelLabel: "Seedance 2.0 VIP",
+              motionPrompt: row.motionPrompt,
+              prompt,
+              ratio: "16:9",
+              referenceImages: referenceImage ? [referenceImage] : [],
+              resolution: "720p",
+              sceneDescription: row.sceneDescription,
+              settings,
+              sourceShotDuration: row.duration,
+              sourceScriptNodeId: nodeId,
+              sourceStoryboardNodeId: storyboardNode?.id,
+              storyRow: row,
+            },
+            poster: previewUrl,
+            prompt,
+            sourceScriptNodeId: nodeId,
+            sourceStoryboardNodeId: storyboardNode?.id,
+            sourceUrl: previewUrl,
+            storyRow: row,
+            storyToolNodeType: "story-video",
+            url: [],
+          },
+        } satisfies CloneNode;
+      });
+      const nextEdges = nextNodes.map((node) => ({
+        id: makeId("edge"),
+        source: String(node.draftValues?.sourceStoryboardNodeId || anchor.id),
+        target: node.id,
+      }));
+
+      addNodes(nextNodes, nextEdges);
+      setSelectedNodeId(nextNodes[0]?.id || anchor.id);
+      closeTransientUi();
+      toast.success(`已创建 ${nextNodes.length} 个视频生成器组`);
+    },
+    [addNodes, edges, nodes, videoCanvasFunctionConfig]
+  );
+
   const updateVideoClipRange = useCallback((nodeId: string, nextRange: VideoClipRange) => {
     setVideoClipRanges((current) => ({
       ...current,
@@ -5116,22 +8749,529 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     [nodes, videoClipRanges]
   );
 
-  const downloadVideoNode = useCallback((node: CloneNode) => {
-    const mediaUrl = getNodeMediaUrl(node);
+  const downloadMediaNode = useCallback((node: CloneNode) => {
+    const mediaUrl = getNodeMediaUrl(node) || getNodeReferenceMediaUrl(node);
     if (!mediaUrl) {
-      toast.error("当前视频没有可下载地址");
+      toast.error("当前资产没有可下载地址");
       return;
     }
     const link = document.createElement("a");
     link.href = mediaUrl;
-    link.download = `${node.title || "未命名视频"}.mp4`;
+    const extension = node.inputType === "video" ? "mp4" : node.inputType === "audio" ? "mp3" : "png";
+    link.download = `${node.title || "未命名资产"}.${extension}`;
     link.rel = "noreferrer";
     document.body.appendChild(link);
     link.click();
     link.remove();
-    toast.success("已开始下载当前视频");
+    toast.success("已开始下载当前资产");
   }, []);
 
+  const downloadVideoNode = useCallback((node: CloneNode) => {
+    downloadMediaNode(node);
+  }, [downloadMediaNode]);
+
+  const openHistoryWatermarkRules = useCallback((node: CloneNode) => {
+    setHistoryListDownloadPendingId(node.id);
+    setHistoryWatermarkRulesOpen(true);
+  }, []);
+
+  const saveHistoryWatermarkRules = useCallback(() => {
+    setHistoryWatermarkRulesOpen(false);
+    setHistoryListDownloadPendingId(null);
+  }, []);
+
+  const extractVideoFrameNode = useCallback(
+    (nodeId: string, kind: VideoFrameExtractionKind) => {
+      const videoNode = nodes.find((item) => item.id === nodeId);
+      if (!videoNode) return;
+      const frameLabelMap: Record<VideoFrameExtractionKind, string> = {
+        current: "当前帧",
+        first: "首帧",
+        last: "尾帧",
+      };
+      const frameUrl =
+        getVideoNodePreviewUrl(videoNode) ||
+        getNodeSourceMediaUrl(videoNode) ||
+        getNodeMediaUrl(videoNode) ||
+        FIRST_FRAME_IMAGE_URL;
+      const existingFrameCount = nodes.filter(
+        (item) =>
+          item.draftValues?.sourceVideoNodeId === videoNode.id &&
+          item.draftValues?.frameExtractionKind === kind
+      ).length;
+      const title = `${videoNode.title || "视频"}-${frameLabelMap[kind]}`;
+      const created = createMediaResourceNode({
+        action: "VIDEO_FRAME_EXTRACT",
+        height: 236,
+        mediaType: "image",
+        mediaUrl: frameUrl,
+        title,
+        width: 420,
+        x: videoNode.x + videoNode.width + OFFICIAL_NODE_GAP,
+        y: videoNode.y + existingFrameCount * 260,
+      });
+      const frameNode: CloneNode = {
+        ...created,
+        subtitle: "视频帧截取",
+        draftValues: {
+          ...(created.draftValues || {}),
+          frameExtractionKind: kind,
+          generated: true,
+          outputSizeLabel: "1280 × 720",
+          sourceVideoNodeId: videoNode.id,
+        },
+      };
+      addNodes([frameNode], [{ id: makeId("edge"), source: videoNode.id, target: frameNode.id }]);
+      setSelectedNodeId(frameNode.id);
+      setActiveVideoToolbarMode(null);
+      toast.success(`已截取${frameLabelMap[kind]}`);
+    },
+    [addNodes, nodes]
+  );
+
+  const createVideoHdUpscaleFromVideo = useCallback(
+    (nodeId: string, option: string) => {
+      const videoNode = nodes.find((item) => item.id === nodeId);
+      if (!videoNode) return;
+      const resolution = normalizeVideoHdResolutionOption(option);
+      const existingHdNode = nodes.find(
+        (item) =>
+          getDraftString(item, "action") === "VIDEO_HD_UPSCALE" &&
+          getDraftString(item, "sourceVideoNodeId") === videoNode.id &&
+          getDraftString(item, "hdResolution") === resolution
+      );
+      const hdNode = createVideoHdUpscaleNode({
+        existingNode: existingHdNode,
+        option,
+        sourceNode: videoNode,
+      });
+
+      if (existingHdNode) {
+        setNodes((current) => current.map((item) => (item.id === hdNode.id ? hdNode : item)));
+      } else {
+        addNodes([hdNode], [{ id: makeId("edge"), source: videoNode.id, target: hdNode.id }]);
+      }
+      setSelectedNodeId(hdNode.id);
+      setSelectedEdgeId(null);
+      setActiveVideoToolbarMode(null);
+    },
+    [addNodes, nodes]
+  );
+
+  const generateVideoHdUpscaleNode = useCallback(
+    (nodeId: string) => {
+      const hdNode = nodes.find((item) => item.id === nodeId);
+      if (!hdNode) return;
+      const sourceNode = nodes.find((item) => item.id === getDraftString(hdNode, "sourceVideoNodeId"));
+      const mediaUrl =
+        getNodeReferenceMediaUrl(sourceNode) ||
+        getDraftString(hdNode, "sourceUrl") ||
+        getNodeMediaUrl(hdNode) ||
+        SCRIPT_VIDEO_REFERENCE_URL;
+
+      setNodes((current) =>
+        current.map((item) =>
+          item.id === nodeId
+            ? {
+                ...item,
+                draftValues: {
+                  ...(item.draftValues || {}),
+                  generated: false,
+                  generationProgress: 8,
+                  generationStatus: "pending",
+                  mediaUrl: "",
+                  url: [],
+                },
+              }
+            : item
+        )
+      );
+      setSelectedNodeId(nodeId);
+      window.setTimeout(() => {
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === nodeId && getDraftString(item, "generationStatus") === "pending"
+              ? {
+                  ...item,
+                  subtitle: "生成结果",
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    generated: true,
+                    generationProgress: 100,
+                    generationStatus: "complete",
+                    mediaType: "video",
+                    mediaUrl,
+                    url: [mediaUrl],
+                  },
+                }
+              : item
+          )
+        );
+      }, 1800);
+    },
+    [nodes]
+  );
+
+  const applyVideoCropSelection = useCallback(
+    (nodeId: string) => {
+      const videoNode = nodes.find((item) => item.id === nodeId);
+      if (!videoNode || videoCropGenerateStates[nodeId]?.status === "loading") return;
+      const sourceUrl = getNodeReferenceMediaUrl(videoNode) || getNodeMediaUrl(videoNode);
+      if (!sourceUrl) {
+        toast.warning("视频尚未加载完成，请稍后再试");
+        return;
+      }
+
+      setVideoCropGenerateStates((current) => ({
+        ...current,
+        [nodeId]: { progress: 37, status: "loading" },
+      }));
+      toast.info("正在裁剪视频，请稍候…");
+
+      window.setTimeout(() => {
+        setVideoCropGenerateStates((current) =>
+          current[nodeId]?.status === "loading"
+            ? { ...current, [nodeId]: { progress: 68, status: "loading" } }
+            : current
+        );
+      }, 650);
+
+      window.setTimeout(() => {
+        const existingIndex = nodes.filter(
+          (item) =>
+            getDraftString(item, "action") === "VIDEO_CROP" &&
+            getDraftString(item, "sourceVideoNodeId") === videoNode.id
+        ).length;
+        const cropNode = createVideoCropResultNode({ existingIndex, sourceNode: videoNode });
+
+        addNodes([cropNode], [{ id: makeId("edge"), source: videoNode.id, target: cropNode.id }]);
+        setSelectedNodeId(cropNode.id);
+        setSelectedEdgeId(null);
+        setActiveVideoToolbarMode(null);
+        setVideoCropGenerateStates((current) => {
+          const next = { ...current };
+          delete next[nodeId];
+          return next;
+        });
+        toast.success("已创建裁剪视频节点并开始上传");
+
+        window.setTimeout(() => {
+          setNodes((current) =>
+            current.map((item) =>
+              item.id === cropNode.id && getDraftString(item, "generationStatus") === "pending"
+                ? {
+                    ...item,
+                    subtitle: "裁剪结果",
+                    draftValues: {
+                      ...(item.draftValues || {}),
+                      generated: true,
+                      generationProgress: 100,
+                      generationStatus: "complete",
+                      mediaType: "video",
+                      mediaUrl: sourceUrl,
+                      uploadStatus: "complete",
+                      url: [sourceUrl],
+                    },
+                  }
+                : item
+            )
+          );
+        }, 1800);
+      }, 1300);
+    },
+    [addNodes, nodes, videoCropGenerateStates]
+  );
+
+  const commitSubtitleEraseRegions = useCallback(
+    (nodeId: string, nextRegions: SubtitleEraseRegion[]) => {
+      const previousRegions = subtitleEraseRegions[nodeId] || [];
+      if (JSON.stringify(previousRegions) === JSON.stringify(nextRegions)) return;
+      setSubtitleEraseRegions((current) => ({ ...current, [nodeId]: nextRegions }));
+      setSubtitleEraseRegionHistory((current) => {
+        const history = current[nodeId] || { future: [], past: [] };
+        return {
+          ...current,
+          [nodeId]: {
+            future: [],
+            past: [...history.past, previousRegions],
+          },
+        };
+      });
+    },
+    [subtitleEraseRegions]
+  );
+
+  const undoSubtitleEraseRegionChange = useCallback(
+    (nodeId: string) => {
+      const history = subtitleEraseRegionHistory[nodeId];
+      if (!history?.past.length) return;
+      const currentRegions = subtitleEraseRegions[nodeId] || [];
+      const nextRegions = history.past[history.past.length - 1] || [];
+      setSubtitleEraseRegions((current) => ({ ...current, [nodeId]: nextRegions }));
+      setSubtitleEraseRegionHistory((current) => {
+        const currentHistory = current[nodeId] || { future: [], past: [] };
+        return {
+          ...current,
+          [nodeId]: {
+            future: [currentRegions, ...currentHistory.future],
+            past: currentHistory.past.slice(0, -1),
+          },
+        };
+      });
+    },
+    [subtitleEraseRegionHistory, subtitleEraseRegions]
+  );
+
+  const redoSubtitleEraseRegionChange = useCallback(
+    (nodeId: string) => {
+      const history = subtitleEraseRegionHistory[nodeId];
+      if (!history?.future.length) return;
+      const currentRegions = subtitleEraseRegions[nodeId] || [];
+      const nextRegions = history.future[0] || [];
+      setSubtitleEraseRegions((current) => ({ ...current, [nodeId]: nextRegions }));
+      setSubtitleEraseRegionHistory((current) => {
+        const currentHistory = current[nodeId] || { future: [], past: [] };
+        return {
+          ...current,
+          [nodeId]: {
+            future: currentHistory.future.slice(1),
+            past: [...currentHistory.past, currentRegions],
+          },
+        };
+      });
+    },
+    [subtitleEraseRegionHistory, subtitleEraseRegions]
+  );
+
+  const applySubtitleEraseSelection = useCallback(
+    (nodeId: string, mode: SubtitleEraseMode = subtitleEraseMode) => {
+      const videoNode = nodes.find((item) => item.id === nodeId);
+      if (!videoNode) return;
+      const sourceUrl = getNodeReferenceMediaUrl(videoNode) || getNodeMediaUrl(videoNode);
+      if (!sourceUrl) {
+        toast.warning("视频尚未加载完成，请稍后再试");
+        return;
+      }
+      const regions = subtitleEraseRegions[nodeId] || [];
+      if (mode === "region" && !regions.length) {
+        toast.warning("请先框选需要擦除的字幕区域");
+        return;
+      }
+      const existingIndex = nodes.filter(
+        (item) =>
+          getDraftString(item, "action") === "VIDEO_SUBTITLE_ERASE" &&
+          getDraftString(item, "sourceVideoNodeId") === videoNode.id
+      ).length;
+      const eraseNode = createVideoSubtitleEraseNode({ existingIndex, mode, regions, sourceNode: videoNode });
+
+      setNodes((current) => [...current, eraseNode]);
+      setEdges((current) => [...current, { id: makeId("edge"), source: videoNode.id, target: eraseNode.id }]);
+      setSelectedNodeId(videoNode.id);
+      setSelectedEdgeId(null);
+      setActiveVideoToolbarMode(null);
+
+      window.setTimeout(() => {
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === eraseNode.id && getDraftString(item, "generationStatus") === "pending"
+              ? {
+                  ...item,
+                  height: videoNode.height,
+                  subtitle: "去字幕结果",
+                  width: videoNode.width,
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    generated: true,
+                    generationProgress: 100,
+                    generationStatus: "complete",
+                    mediaType: "video",
+                    mediaUrl: sourceUrl,
+                    url: [sourceUrl],
+                  },
+                }
+              : item
+          )
+        );
+      }, VIDEO_SUBTITLE_ERASE_SIMULATED_MS);
+    },
+    [nodes, subtitleEraseMode, subtitleEraseRegions]
+  );
+
+  const splitVideoAudioTrack = useCallback(
+    (nodeId: string, mode: VideoAudioSplitMode) => {
+      const videoNode = nodes.find((item) => item.id === nodeId);
+      if (!videoNode || videoAudioSplitStates[nodeId]?.status === "loading") return;
+      const splitCopy: Record<
+        VideoAudioSplitMode,
+        {
+          audioAction: string;
+          audioSuffix: string;
+          audioSubtitle: string;
+          processingLabel: string;
+          silentAction: string;
+        }
+      > = {
+        "audio-video": {
+          audioAction: "VIDEO_AUDIO_SPLIT",
+          audioSuffix: "音轨",
+          audioSubtitle: "音视频分离",
+          processingLabel: "音视频分离",
+          silentAction: "VIDEO_AUDIO_SPLIT_SILENT",
+        },
+        background: {
+          audioAction: "VIDEO_BACKGROUND_AUDIO_SPLIT",
+          audioSuffix: "背景音",
+          audioSubtitle: "背景音分离",
+          processingLabel: "人声分离",
+          silentAction: "VIDEO_BACKGROUND_AUDIO_SPLIT_SILENT",
+        },
+        voice: {
+          audioAction: "VIDEO_VOICE_SPLIT",
+          audioSuffix: "人声",
+          audioSubtitle: "人声分离",
+          processingLabel: "人声分离",
+          silentAction: "VIDEO_VOICE_SPLIT_SILENT",
+        },
+      };
+      const copy = splitCopy[mode];
+      const baseTitle = videoNode.title || "视频";
+      const durationSeconds = getVideoNodeDurationSeconds(videoNode);
+      const sourceUrl = getNodeReferenceMediaUrl(videoNode) || getNodeMediaUrl(videoNode) || SCRIPT_VIDEO_REFERENCE_URL;
+      const outputSizeLabel = getDraftString(videoNode, "outputSizeLabel") || "1280 × 720";
+      const existingTrackCount = nodes.filter(
+        (item) => item.inputType === "audio" && item.draftValues?.sourceVideoNodeId === videoNode.id
+      ).length;
+      const existingSilentVideoCount = nodes.filter(
+        (item) =>
+          item.inputType === "video" &&
+          item.draftValues?.sourceVideoNodeId === videoNode.id &&
+          Boolean(item.draftValues?.silentVideo)
+      ).length;
+      const rightX = Math.round(videoNode.x + videoNode.width + OFFICIAL_NODE_GAP);
+      const splitResultY = Math.round(
+        videoNode.y + Math.max(existingTrackCount, existingSilentVideoCount) * (350 + OFFICIAL_NODE_GAP)
+      );
+
+      setVideoAudioSplitStates((current) => ({
+        ...current,
+        [nodeId]: { mode, status: "loading" },
+      }));
+      setSelectedNodeId(videoNode.id);
+      setSelectedEdgeId(null);
+      setActiveVideoToolbarMode(null);
+      toast.info(`${copy.processingLabel}处理中，请稍候…`);
+
+      window.setTimeout(() => {
+        const audioCreated = createMediaResourceNode({
+          action: copy.audioAction,
+          height: 148,
+          mediaType: "audio",
+          mediaUrl: AUDIO_SOURCE_URL,
+          title: `${baseTitle}_${copy.audioSuffix}`,
+          width: 350,
+          x: rightX,
+          y: splitResultY,
+        });
+        const audioNode: CloneNode = {
+          ...audioCreated,
+          subtitle: copy.audioSubtitle,
+          draftValues: {
+            ...(audioCreated.draftValues || {}),
+            durationSeconds,
+            generated: true,
+            sourceVideoNodeId: videoNode.id,
+            sourceVideoTitle: videoNode.title,
+            splitMode: mode,
+          },
+        };
+        const silentCreated = createMediaResourceNode({
+          action: copy.silentAction,
+          height: 350,
+          mediaType: "video",
+          mediaUrl: sourceUrl,
+          title: `${baseTitle}_无声`,
+          width: 350,
+          x: rightX,
+          y: splitResultY,
+        });
+        const silentVideoNode: CloneNode = {
+          ...silentCreated,
+          subtitle: "无声视频",
+          draftValues: {
+            ...(silentCreated.draftValues || {}),
+            durationSeconds,
+            generated: true,
+            mediaType: "video",
+            nodeType: "video",
+            outputSizeLabel,
+            silentVideo: true,
+            sourceUrl,
+            sourceVideoNodeId: videoNode.id,
+            sourceVideoTitle: videoNode.title,
+            splitMode: mode,
+          },
+        };
+
+        addNodes(
+          [silentVideoNode, audioNode],
+          [
+            { id: makeId("edge"), source: videoNode.id, target: silentVideoNode.id },
+            { id: makeId("edge"), source: videoNode.id, target: audioNode.id },
+          ]
+        );
+        setSelectedNodeId(null);
+        setSelectedEdgeId(null);
+        setVideoAudioSplitStates((current) => {
+          const next = { ...current };
+          delete next[nodeId];
+          return next;
+        });
+      }, 6400);
+    },
+    [addNodes, nodes, videoAudioSplitStates]
+  );
+
+  const upsertVideoStoryAnalysisNode = useCallback(
+    (
+      sourceNode: CloneNode,
+      rows: VideoAnalysisRow[],
+      summary: string,
+      options?: { error?: string; framePreviews?: string[] }
+    ) => {
+      const existingStoryNode = nodes.find(
+        (item) =>
+          getDraftString(item, "action") === "VIDEO_STORY_ANALYSIS" &&
+          getDraftString(item, "sourceVideoNodeId") === sourceNode.id
+      );
+      const storyNode = createVideoStoryAnalysisNode({
+        error: options?.error,
+        existingNode: existingStoryNode,
+        framePreviews: options?.framePreviews,
+        rows,
+        sourceNode,
+        summary,
+      });
+
+      setNodes((current) => {
+        const currentExisting = current.find((item) => item.id === storyNode.id);
+        if (currentExisting) {
+          return current.map((item) => (item.id === storyNode.id ? { ...storyNode, x: item.x, y: item.y } : item));
+        }
+        return [...current, storyNode];
+      });
+      setEdges((current) =>
+        current.some((edge) => edge.source === sourceNode.id && edge.target === storyNode.id)
+          ? current
+          : [...current, { id: makeId("edge"), source: sourceNode.id, target: storyNode.id }]
+      );
+      setSelectedNodeId(storyNode.id);
+      setSelectedEdgeId(null);
+      setActiveVideoToolbarMode(null);
+      return storyNode.id;
+    },
+    [nodes]
+  );
+
   const requestVideoAnalysis = useCallback(
     async (nodeId: string) => {
       const node = nodes.find((item) => item.id === nodeId);
@@ -5142,16 +9282,34 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         toast.error("当前视频暂时没有可解析的素材地址");
         return;
       }
-      if (videoAnalysisStates[nodeId]?.status === "loading" || videoAnalysisStates[nodeId]?.status === "ready") {
+      if (videoAnalysisStates[nodeId]?.status === "loading") {
+        return;
+      }
+      if (videoAnalysisStates[nodeId]?.status === "ready") {
+        const existingStoryNode = nodes.find(
+          (item) =>
+            getDraftString(item, "action") === "VIDEO_STORY_ANALYSIS" &&
+            getDraftString(item, "sourceVideoNodeId") === node.id
+        );
+        if (existingStoryNode) {
+          setSelectedNodeId(existingStoryNode.id);
+          setSelectedEdgeId(null);
+        }
         return;
       }
 
       const definition = getConfiguredFunction(videoCanvasFunctionConfig, "video-analysis");
       const prompt = composeFunctionPrompt(
         definition,
-        `请解析当前视频，输出结构化视频故事表。重点补充镜头描述、背景音乐、人声/音效、图像生成提示词、视频运动提示词与关键帧建议。视频标题：${node.title}`
+        [
+          "请解析当前视频，输出结构化视频故事表。",
+          "每个镜头必须包含：镜号、开始时间、结束时间、时长、画面描述、叙事内容、景别、摄影机角度、摄影机运动、焦距与景深、光线、背景音乐、人声/音效、图像生成提示词、视频运动提示词、关键帧建议。",
+          "图像生成提示词和视频运动提示词优先使用英文，其他说明使用中文。",
+          `视频标题：${node.title}`,
+        ].join("\n")
       );
 
+      setActiveVideoToolbarMode(null);
       setVideoAnalysisStates((current) => ({
         ...current,
         [nodeId]: {
@@ -5180,6 +9338,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
           response.data?.summary?.trim() ||
           response.data?.highlights?.join(" · ") ||
           "已整理出当前视频的镜头节奏与生成建议。";
+        const framePreviews = response.data?.framePreviews || [];
         setNodes((current) =>
           current.map((item) =>
             item.id === nodeId
@@ -5188,7 +9347,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
                   draftValues: {
                     ...(item.draftValues || {}),
                     videoAnalysis: {
-                      framePreviews: response.data?.framePreviews || [],
+                      framePreviews,
                       rows,
                       summary,
                     },
@@ -5197,6 +9356,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
               : item
           )
         );
+        upsertVideoStoryAnalysisNode(node, rows, summary, { framePreviews });
         setVideoAnalysisStates((current) => ({
           ...current,
           [nodeId]: {
@@ -5205,8 +9365,11 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             summary,
           },
         }));
+        toast.success("解析完成，已创建视频故事节点");
       } catch (error) {
         const fallbackRows = buildVideoAnalysisRows(node);
+        const errorMessage = error instanceof Error ? error.message : "视频解析失败";
+        const summary = "解析失败，先展示本地占位结构，方便继续编排。";
         setNodes((current) =>
           current.map((item) =>
             item.id === nodeId
@@ -5216,26 +9379,27 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
                     ...(item.draftValues || {}),
                     videoAnalysis: {
                       rows: fallbackRows,
-                      summary: "解析失败，先展示本地占位结构，方便继续编排。",
+                      summary,
                     },
                   },
                 }
               : item
           )
         );
+        upsertVideoStoryAnalysisNode(node, fallbackRows, summary, { error: errorMessage });
         setVideoAnalysisStates((current) => ({
           ...current,
           [nodeId]: {
-            error: error instanceof Error ? error.message : "视频解析失败",
+            error: errorMessage,
             rows: fallbackRows,
             status: "error",
-            summary: "解析失败，先展示本地占位结构，方便继续编排。",
+            summary,
           },
         }));
-        toast.error(error instanceof Error ? error.message : "视频解析失败");
+        toast.error(errorMessage);
       }
     },
-    [nodes, videoAnalysisStates, videoCanvasFunctionConfig]
+    [nodes, upsertVideoStoryAnalysisNode, videoAnalysisStates, videoCanvasFunctionConfig]
   );
 
   const runPresetComposerSubmit = useCallback(
@@ -5260,6 +9424,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         .filter((item) => item.inputType === "video")
         .map((item) => getNodeReferenceMediaUrl(item))
         .filter(Boolean);
+      const audioUrls = incomingNodes
+        .filter((item) => item.inputType === "audio")
+        .map((item) => getNodeReferenceMediaUrl(item))
+        .filter(Boolean);
 
       try {
         if (mode === "story-script") {
@@ -5271,12 +9439,40 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             })
             .join("\n\n");
           const prompt = composeFunctionPrompt(definition, `${draftPrompt}\n\n${textInputs}`.trim());
+          const selectedModelRef = normalizeModelRef(settings?.model) || undefined;
+          setNodes((current) =>
+            current.map((item) =>
+              item.id === nodeId
+                ? {
+                    ...item,
+                    subtitle: "生成中",
+                    draftValues: {
+                      ...(item.draftValues || {}),
+                      generated: false,
+                      generationError: undefined,
+                      generationProgress: 2,
+                      generationStatus: "pending",
+                      params: {
+                        ...getNodeParams(item),
+                        functionKey: "story-script",
+                        imageUrls,
+                        model: selectedModelRef,
+                        prompt,
+                        route: "canvas-workflow-analyze",
+                        videoUrls,
+                      },
+                      prompt,
+                    },
+                  }
+                : item
+            )
+          );
           const response = await workflowAnalysisService.analyze({
             imageUrls,
-            mode: "agent-plan",
+            mode: "story-script",
             nodeTitle: node.title,
+            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, selectedModelRef),
             prompt,
-            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, settings?.model),
             videoUrls,
           });
           if (!response.success) throw new Error(response.error || "故事脚本生成失败");
@@ -5294,8 +9490,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
                       ...(item.draftValues || {}),
                       content: content ? [content] : item.draftValues?.content,
                       generated: true,
+                      generationProgress: 100,
+                      generationStatus: "complete",
                       prompt,
-                      rows: response.data?.shotIdeas || item.draftValues?.rows,
+                      rows: response.data?.analysisRows || response.data?.shotIdeas || item.draftValues?.rows,
                     },
                   }
                 : item
@@ -5309,13 +9507,78 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
           videoCanvasFunctionConfig,
           mode === "audio-to-video" ? "audio-to-video" : "first-frame-video",
         );
+        const requestedMode: VideoGenerationMode = "first-frame";
+        const referenceImages = selectVideoReferenceImages(imageUrls, requestedMode);
+        if (referenceImages.length < 1) {
+          toast.error(mode === "audio-to-video" ? "音频生视频需要同时接入一张参考图" : "首帧图生视频需要先接入首帧图片");
+          return;
+        }
+        const ratio = normalizeVideoRatioValue(settings?.ratio);
+        const resolution = normalizeVideoResolutionValue(settings?.resolution);
+        const duration = normalizeVideoDurationValue(settings?.duration);
+        const preferredModelOverride = settings?.model || "";
+        const preferredModelRef = getFunctionModel(videoCanvasFunctionConfig, definition, preferredModelOverride);
         const prompt = composeFunctionPrompt(definition, draftPrompt);
+        const previewUrl = referenceImages[0] || getNodeReferenceMediaUrl(node) || "";
+        const savedSettings: ComposerSettings = {
+          audio: settings?.audio || "开启",
+          camera: settings?.camera || "摄像机",
+          count: settings?.count || "1个",
+          duration: formatVideoDurationLabel(duration),
+          model: normalizeModelRef(preferredModelOverride) || "auto",
+          modelLabel: settings?.modelLabel || "",
+          panorama: settings?.panorama || (mode === "audio-to-video" ? "全能参考" : "图生视频"),
+          ratio: formatVideoRatioLabel(ratio),
+          resolution: formatVideoResolutionLabel(resolution),
+        };
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === nodeId
+              ? {
+                  ...item,
+                  kind: "media",
+                  inputType: "video",
+                  subtitle: "生成中",
+                  draftValues: {
+                    ...clearGridSplitDraftValues(item.draftValues),
+                    action: "VIDEO_GENERATE",
+                    generated: false,
+                    generationError: undefined,
+                    generationProgress: 2,
+                    generationStatus: "pending",
+                    mediaType: "video",
+                    mediaUrl: "",
+                    nodeType: "video",
+                    params: {
+                      ...getNodeParams(item),
+                      audioUrls,
+                      duration,
+                      functionKey: definition.key,
+                      mode: requestedMode,
+                      model: normalizeModelRef(preferredModelOverride) || undefined,
+                      prompt,
+                      ratio,
+                      referenceImages,
+                      resolution,
+                      settings: savedSettings,
+                    },
+                    poster: previewUrl,
+                    prompt,
+                    sourceUrl: previewUrl,
+                    url: [],
+                  },
+                }
+              : item
+          )
+        );
         const response = await videoGenerationService.generateVideo({
-          images: imageUrls.slice(0, 4),
-          preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, settings?.model),
+          duration,
+          images: referenceImages,
+          mode: requestedMode,
+          preferredModelRef,
           prompt,
-          ratio: "16:9",
-          resolution: "720p",
+          ratio,
+          resolution,
         });
         if (!response.success || !response.data?.url) {
           throw new Error(response.error || `${definition.label}生成失败`);
@@ -5330,10 +9593,28 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
                   draftValues: {
                     ...(item.draftValues || {}),
                     generated: true,
+                    generationProgress: 100,
+                    generationStatus: "complete",
                     mediaType: "video",
                     mediaUrl: response.data?.url,
                     nodeType: "video",
+                    outputSizeLabel: `${formatVideoResolutionLabel(resolution)} · ${duration}s`,
+                    params: {
+                      ...getNodeParams(item),
+                      audioUrls,
+                      duration,
+                      functionKey: definition.key,
+                      mode: requestedMode,
+                      model: normalizeModelRef(preferredModelOverride) || undefined,
+                      prompt,
+                      ratio,
+                      referenceImages,
+                      resolution,
+                      settings: savedSettings,
+                    },
+                    poster: previewUrl,
                     prompt,
+                    sourceUrl: previewUrl,
                     url: [response.data?.url],
                     videoMeta: response.data?.metadata || null,
                   },
@@ -5343,6 +9624,21 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         );
         toast.success(`${definition.label}已生成`);
       } catch (error) {
+        setNodes((current) =>
+          current.map((item) =>
+            item.id === nodeId
+              ? {
+                  ...item,
+                  subtitle: "生成失败",
+                  draftValues: {
+                    ...(item.draftValues || {}),
+                    generationError: error instanceof Error ? error.message : "生成失败",
+                    generationStatus: "failed",
+                  },
+                }
+              : item
+          )
+        );
         toast.error(error instanceof Error ? error.message : "生成失败");
       }
     },
@@ -5388,16 +9684,39 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     const duplicate = {
       ...node,
       id: makeId("copy"),
-      x: node.x + 32,
-      y: node.y + 32,
+      title: `${node.title} - 副本`,
+      x: node.x,
+      y: node.y + node.height + 60,
     };
     setNodes((current) => [...current, duplicate]);
     setSelectedNodeId(duplicate.id);
     setNodeContextMenu(null);
     setConnectionMenu(null);
-    toast.success("已复制节点");
   }, [nodes]);
 
+  const renameNode = useCallback((nodeId: string, title: string) => {
+    const nextTitle = title.trim();
+    if (!nextTitle) {
+      toast.error("节点名称不能为空");
+      return false;
+    }
+    setNodes((current) =>
+      current.map((node) =>
+        node.id === nodeId
+          ? {
+              ...node,
+              title: nextTitle,
+            }
+          : node
+      )
+    );
+    setSelectedNodeId(nodeId);
+    setNodeContextMenu(null);
+    setConnectionMenu(null);
+    toast.success("已重命名节点");
+    return true;
+  }, []);
+
   const runNode = useCallback(async (nodeId: string) => {
     const node = nodes.find((item) => item.id === nodeId);
     if (!node) return;
@@ -5545,7 +9864,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         const prompt = composeFunctionPrompt(definition, rawPrompt || STORY_SCRIPT_PROMPT);
         const response = await workflowAnalysisService.analyze({
           imageUrls,
-          mode: "agent-plan",
+          mode: definition.key === "story-script" ? "story-script" : "agent-plan",
           nodeTitle: node.title,
           prompt,
           preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, nodeModelRef),
@@ -5568,7 +9887,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
                     content: content ? [content] : item.draftValues?.content,
                     generated: true,
                     prompt,
-                    rows: response.data?.shotIdeas || item.draftValues?.rows,
+                    rows: response.data?.analysisRows || response.data?.shotIdeas || item.draftValues?.rows,
                   },
                 }
               : item
@@ -5584,16 +9903,33 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     }
   }, [edges, nodes, submitVideoTargetComposer, videoCanvasFunctionConfig]);
 
-  const deleteNode = useCallback((nodeId: string) => {
+  const deleteNode = useCallback((nodeId: string, options?: { silent?: boolean }) => {
     setNodes((current) => current.filter((node) => node.id !== nodeId));
     setEdges((current) => current.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));
     setSelectedNodeId((current) => (current === nodeId ? null : current));
+    setSelectedEdgeId(null);
     setInspectorNodeId((current) => (current === nodeId ? null : current));
     setNodeContextMenu(null);
     setConnectionMenu(null);
-    toast.success("节点已删除");
+    if (!options?.silent) {
+      toast.success("节点已删除");
+    }
   }, []);
 
+  const deleteEdge = useCallback((edgeId: string) => {
+    setEdges((current) => current.filter((edge) => edge.id !== edgeId));
+    setSelectedEdgeId(null);
+    setLineConnectState(null);
+    setConnectionMenu(null);
+    setNodeContextMenu(null);
+  }, []);
+
+  const deleteSelectedEdge = useCallback(() => {
+    if (!selectedEdgeId) return false;
+    deleteEdge(selectedEdgeId);
+    return true;
+  }, [deleteEdge, selectedEdgeId]);
+
   const createStarter = useCallback(
     (starter: (typeof STARTER_CARDS)[number]) => {
       const workflow = createStarterWorkflow(starter.title, PRESET_WORKFLOW_CENTER);
@@ -5642,31 +9978,427 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     );
   }, [inspectorNodeId]);
 
-  const startNodeDrag = useCallback((event: ReactPointerEvent, node: CloneNode) => {
-    event.stopPropagation();
-    event.currentTarget.setPointerCapture(event.pointerId);
-    setSelectedNodeId(node.id);
-    setInspectorNodeId(null);
-    setCanvasCommand(null);
-    setNodeContextMenu(null);
-    dragRef.current = {
-      kind: "node",
-      id: node.id,
-      startX: event.clientX,
-      startY: event.clientY,
-      nodeX: node.x,
-      nodeY: node.y,
+  const getCanvasPoint = useCallback(
+    (clientX: number, clientY: number) => ({
+      x: (clientX - viewport.x) / viewport.zoom,
+      y: (clientY - viewport.y) / viewport.zoom,
+    }),
+    [viewport.x, viewport.y, viewport.zoom]
+  );
+
+  const getConnectionHoverNodeId = useCallback((clientX: number, clientY: number, anchorId?: string | null) => {
+    const targetElement = document
+      .elementsFromPoint(clientX, clientY)
+      .map((element) => element.closest("[data-canvas-node-id]"))
+      .find((element): element is HTMLElement => Boolean(element));
+    const targetNodeId = targetElement?.dataset.canvasNodeId || null;
+    return targetNodeId && targetNodeId !== anchorId ? targetNodeId : null;
+  }, []);
+
+  const createLineConnectState = useCallback((node: CloneNode | null): LineConnectState => {
+    if (!node) return { cursorCanvasX: null, cursorCanvasY: null, sourceId: null };
+    return {
+      cursorCanvasX: Math.round(node.x + node.width + OFFICIAL_NODE_GAP),
+      cursorCanvasY: Math.round(node.y + node.height / 2),
+      sourceId: node.id,
     };
   }, []);
 
+  const updateEndpointConnectionDrag = useCallback(
+    (clientX: number, clientY: number) => {
+      const endpointDrag = connectionDragRef.current;
+      if (!endpointDrag) return false;
+      const canvasPoint = getCanvasPoint(clientX, clientY);
+      const distance = Math.hypot(clientX - endpointDrag.startClientX, clientY - endpointDrag.startClientY);
+      if (distance > 4 || endpointDrag.hasDragged) {
+        endpointDrag.hasDragged = true;
+        suppressConnectionClickRef.current = true;
+        setLineConnectState({
+          cursorCanvasX: canvasPoint.x,
+          cursorCanvasY: canvasPoint.y,
+          hoverNodeId: getConnectionHoverNodeId(clientX, clientY, endpointDrag.anchorId),
+          sourceId: endpointDrag.side === "source" ? endpointDrag.anchorId : null,
+          targetId: endpointDrag.side === "target" ? endpointDrag.anchorId : null,
+        });
+      }
+      return endpointDrag.hasDragged;
+    },
+    [getCanvasPoint, getConnectionHoverNodeId]
+  );
+
+  const finishEndpointConnectionDrag = useCallback(
+    (clientX: number, clientY: number) => {
+      const endpointDrag = connectionDragRef.current;
+      if (!endpointDrag) return false;
+      connectionDragRef.current = null;
+      connectionDragCleanupRef.current?.();
+      connectionDragCleanupRef.current = null;
+      if (!endpointDrag.hasDragged) return false;
+
+      const targetNodeId = getConnectionHoverNodeId(clientX, clientY, endpointDrag.anchorId) || "";
+      const connected =
+        targetNodeId && endpointDrag.side === "source"
+          ? connectExistingNodes(endpointDrag.anchorId, targetNodeId, { notify: false })
+          : targetNodeId
+            ? connectExistingNodes(targetNodeId, endpointDrag.anchorId, { notify: false })
+            : false;
+      if (!targetNodeId) {
+        toast.info("拖到节点上即可建立连接");
+      }
+      if (!connected) {
+        setSelectedNodeId(endpointDrag.anchorId);
+      }
+      setLineConnectState(null);
+      return true;
+    },
+    [connectExistingNodes, getConnectionHoverNodeId]
+  );
+
+  const startConnectionEndpointDrag = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>, node: CloneNode, side: ConnectionSide) => {
+      if (event.button !== 0) return;
+      if (connectionDragRef.current) return;
+      event.stopPropagation();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      connectionDragRef.current = {
+        anchorId: node.id,
+        hasDragged: false,
+        pointerId: event.pointerId,
+        side,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+      };
+      setSelectedNodeId(node.id);
+      setSelectedEdgeId(null);
+      setInspectorNodeId(null);
+      setCanvasCommand(null);
+      setNodeContextMenu(null);
+      setConnectionMenu(null);
+      setActivePanel(null);
+      connectionDragCleanupRef.current?.();
+      const handleWindowPointerMove = (pointerEvent: PointerEvent) => {
+        if (pointerEvent.pointerId !== event.pointerId) return;
+        updateEndpointConnectionDrag(pointerEvent.clientX, pointerEvent.clientY);
+      };
+      const handleWindowPointerUp = (pointerEvent: PointerEvent) => {
+        if (pointerEvent.pointerId !== event.pointerId) return;
+        finishEndpointConnectionDrag(pointerEvent.clientX, pointerEvent.clientY);
+      };
+      const handleWindowMouseMove = (mouseEvent: MouseEvent) => {
+        updateEndpointConnectionDrag(mouseEvent.clientX, mouseEvent.clientY);
+      };
+      const handleWindowMouseUp = (mouseEvent: MouseEvent) => {
+        finishEndpointConnectionDrag(mouseEvent.clientX, mouseEvent.clientY);
+      };
+      window.addEventListener("pointermove", handleWindowPointerMove);
+      window.addEventListener("pointerup", handleWindowPointerUp, { once: true });
+      window.addEventListener("mousemove", handleWindowMouseMove);
+      window.addEventListener("mouseup", handleWindowMouseUp, { once: true });
+      connectionDragCleanupRef.current = () => {
+        window.removeEventListener("pointermove", handleWindowPointerMove);
+        window.removeEventListener("pointerup", handleWindowPointerUp);
+        window.removeEventListener("mousemove", handleWindowMouseMove);
+        window.removeEventListener("mouseup", handleWindowMouseUp);
+      };
+    },
+    [finishEndpointConnectionDrag, updateEndpointConnectionDrag]
+  );
+
+  const startConnectionEndpointMouseDrag = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>, node: CloneNode, side: ConnectionSide) => {
+      if (event.button !== 0) return;
+      if (connectionDragRef.current) return;
+      event.stopPropagation();
+      connectionDragRef.current = {
+        anchorId: node.id,
+        hasDragged: false,
+        pointerId: null,
+        side,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+      };
+      setSelectedNodeId(node.id);
+      setSelectedEdgeId(null);
+      setInspectorNodeId(null);
+      setCanvasCommand(null);
+      setNodeContextMenu(null);
+      setConnectionMenu(null);
+      setActivePanel(null);
+      connectionDragCleanupRef.current?.();
+      const handleWindowMouseMove = (mouseEvent: MouseEvent) => {
+        updateEndpointConnectionDrag(mouseEvent.clientX, mouseEvent.clientY);
+      };
+      const handleWindowMouseUp = (mouseEvent: MouseEvent) => {
+        finishEndpointConnectionDrag(mouseEvent.clientX, mouseEvent.clientY);
+      };
+      window.addEventListener("mousemove", handleWindowMouseMove);
+      window.addEventListener("mouseup", handleWindowMouseUp, { once: true });
+      connectionDragCleanupRef.current = () => {
+        window.removeEventListener("mousemove", handleWindowMouseMove);
+        window.removeEventListener("mouseup", handleWindowMouseUp);
+      };
+    },
+    [finishEndpointConnectionDrag, updateEndpointConnectionDrag]
+  );
+
+  const updateVideoCanvasMagicMarks = useCallback(
+    (
+      targetNodeId: string,
+      updater: (marks: VideoCanvasMagicMark[]) => VideoCanvasMagicMark[]
+    ) => {
+      setNodes((current) =>
+        current.map((item) => {
+          if (item.id !== targetNodeId) return item;
+          const nextMarks = updater(getVideoCanvasMagicMarks(item));
+          return {
+            ...item,
+            draftValues: {
+              ...(item.draftValues || {}),
+              magicMarks: nextMarks,
+              params: {
+                ...getNodeParams(item),
+                magicMarks: nextMarks,
+              },
+            },
+          };
+        })
+      );
+    },
+    []
+  );
+
+  const analyzeVideoCanvasMark = useCallback(
+    async ({
+      clickX,
+      clickY,
+      imageUrl,
+      sourceNodeId,
+      targetNodeId,
+    }: VideoCanvasMarkAnalysisState & { imageUrl: string }) => {
+      setMarkAnalysisState({ clickX, clickY, sourceNodeId, targetNodeId });
+      try {
+        const response = await fetch("/api/pick-object", {
+          body: JSON.stringify({
+            clickX,
+            clickY,
+            imageData: imageUrl,
+            mode: "video-canvas-mark",
+          }),
+          headers: { "Content-Type": "application/json" },
+          method: "POST",
+        });
+        const payload = (await response.json().catch(() => ({}))) as PickObjectApiResponse;
+        if (!response.ok || !payload.success || !payload.object) {
+          throw new Error(payload.error || "元素分析失败");
+        }
+        const labelOptions = Array.from(
+          new Set(
+            [
+              ...(Array.isArray(payload.object.labels) ? payload.object.labels : []),
+              payload.object.name || "",
+            ]
+              .map((label) => String(label || "").trim().slice(0, 8))
+              .filter(Boolean)
+          )
+        ).slice(0, 4);
+        if (labelOptions.length === 0) throw new Error("元素分析未返回标签");
+
+        setNodes((current) =>
+          current.map((item) => {
+            if (item.id !== targetNodeId) return item;
+            const currentMarks = getVideoCanvasMagicMarks(item);
+            const nextSequence =
+              currentMarks.reduce((max, mark) => {
+                if (mark.sourceNodeId !== sourceNodeId) return max;
+                const suffix = Number(mark.id.slice(sourceNodeId.length + 1));
+                return Number.isFinite(suffix) ? Math.max(max, suffix) : max;
+              }, 0) + 1;
+            const nextMarks = [
+              ...currentMarks,
+              {
+                clickX,
+                clickY,
+                id: `${sourceNodeId}_${nextSequence}`,
+                imageUrl,
+                labelOptions,
+                selectedIndex: 0,
+                sourceNodeId,
+              },
+            ];
+            return {
+              ...item,
+              draftValues: {
+                ...(item.draftValues || {}),
+                magicMarks: nextMarks,
+                params: {
+                  ...getNodeParams(item),
+                  magicMarks: nextMarks,
+                },
+              },
+            };
+          })
+        );
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "元素分析失败");
+      } finally {
+        setMarkAnalysisState((current) =>
+          current?.sourceNodeId === sourceNodeId && current.targetNodeId === targetNodeId
+            ? null
+            : current
+        );
+      }
+    },
+    []
+  );
+
+  const startNodeDrag = useCallback(
+    (event: ReactPointerEvent, node: CloneNode) => {
+      event.stopPropagation();
+      if (markSelectionTargetId) {
+        event.preventDefault();
+        const mediaType = getDraftString(node, "mediaType") || node.inputType;
+        const imageUrl = getNodeReferenceMediaUrl(node);
+        const eligible =
+          node.id !== markSelectionTargetId &&
+          node.kind === "media" &&
+          mediaType === "image" &&
+          Boolean(imageUrl) &&
+          !markAnalysisState;
+        if (!eligible) return;
+        const imageElement = event.currentTarget.querySelector("img");
+        const imageRect = imageElement?.getBoundingClientRect();
+        if (
+          !imageRect ||
+          event.clientX < imageRect.left ||
+          event.clientX > imageRect.right ||
+          event.clientY < imageRect.top ||
+          event.clientY > imageRect.bottom
+        ) {
+          return;
+        }
+        const clickX = Math.max(
+          0,
+          Math.min(1, (event.clientX - imageRect.left) / imageRect.width)
+        );
+        const clickY = Math.max(
+          0,
+          Math.min(1, (event.clientY - imageRect.top) / imageRect.height)
+        );
+        setSelectedNodeId(markSelectionTargetId);
+        setSelectedEdgeId(null);
+        setInspectorNodeId(null);
+        setCanvasCommand(null);
+        setNodeContextMenu(null);
+        setConnectionMenu(null);
+        setActivePanel(null);
+        void analyzeVideoCanvasMark({
+          clickX,
+          clickY,
+          imageUrl,
+          sourceNodeId: node.id,
+          targetNodeId: markSelectionTargetId,
+        });
+        return;
+      }
+      if (referenceSelectionTargetId) {
+        event.preventDefault();
+        const mediaType = getDraftString(node, "mediaType") || node.inputType;
+        const eligible =
+          node.id !== referenceSelectionTargetId &&
+          node.kind === "media" &&
+          mediaType === "image" &&
+          Boolean(getNodeReferenceMediaUrl(node));
+        if (!eligible) return;
+
+        setEdges((current) => {
+          const connected = current.some(
+            (edge) => edge.source === node.id && edge.target === referenceSelectionTargetId
+          );
+          if (connected) {
+            return current.filter(
+              (edge) => !(edge.source === node.id && edge.target === referenceSelectionTargetId)
+            );
+          }
+          return [
+            ...current,
+            { id: makeId("edge"), source: node.id, target: referenceSelectionTargetId },
+          ];
+        });
+        setSelectedNodeId(referenceSelectionTargetId);
+        setSelectedEdgeId(null);
+        setInspectorNodeId(null);
+        setCanvasCommand(null);
+        setNodeContextMenu(null);
+        setConnectionMenu(null);
+        setActivePanel(null);
+        return;
+      }
+      if (lineConnectState) {
+        event.preventDefault();
+        const canvasPoint = getCanvasPoint(event.clientX, event.clientY);
+        setSelectedNodeId(node.id);
+        setSelectedEdgeId(null);
+        setInspectorNodeId(null);
+        setCanvasCommand(null);
+        setNodeContextMenu(null);
+        setConnectionMenu(null);
+        setActivePanel(null);
+        if (lineConnectState.targetId) {
+          if (connectExistingNodes(node.id, lineConnectState.targetId, { notify: false })) {
+            setLineConnectState(null);
+          }
+          return;
+        }
+        if (!lineConnectState.sourceId) {
+          setLineConnectState({
+            cursorCanvasX: canvasPoint.x,
+            cursorCanvasY: canvasPoint.y,
+            sourceId: node.id,
+          });
+          return;
+        }
+        if (connectExistingNodes(lineConnectState.sourceId, node.id, { notify: false })) {
+          setLineConnectState(null);
+        }
+        return;
+      }
+
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setSelectedNodeId(node.id);
+      setSelectedEdgeId(null);
+      setInspectorNodeId(null);
+      setCanvasCommand(null);
+      setNodeContextMenu(null);
+      dragRef.current = {
+        kind: "node",
+        id: node.id,
+        startX: event.clientX,
+        startY: event.clientY,
+        nodeX: node.x,
+        nodeY: node.y,
+      };
+    },
+    [
+      analyzeVideoCanvasMark,
+      connectExistingNodes,
+      getCanvasPoint,
+      lineConnectState,
+      markAnalysisState,
+      markSelectionTargetId,
+      referenceSelectionTargetId,
+    ]
+  );
+
   const startCanvasDrag = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
     if (event.button !== 0) return;
     if ((event.target as HTMLElement).closest("[data-canvas-overlay]")) return;
     setSelectedNodeId(null);
+    setSelectedEdgeId(null);
     setInspectorNodeId(null);
     setCanvasCommand(null);
     setNodeContextMenu(null);
     setConnectionMenu(null);
+    setLineConnectState(null);
     dragRef.current = {
       kind: "canvas",
       startX: event.clientX,
@@ -5680,24 +10412,73 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     const onKeyDown = (event: KeyboardEvent) => {
       const target = event.target as HTMLElement | null;
       if (target?.closest("input, textarea, select, [contenteditable='true']")) return;
+      if (!event.metaKey && !event.ctrlKey && !event.altKey && event.key.toLowerCase() === "l") {
+        event.preventDefault();
+        setCanvasCommand(null);
+        setNodeContextMenu(null);
+        setConnectionMenu(null);
+        setActivePanel(null);
+        setInspectorNodeId(null);
+        setSelectedEdgeId(null);
+        setLineConnectState((current) => {
+          if (current) {
+            return null;
+          }
+          const source = selectedNodeId ? nodes.find((node) => node.id === selectedNodeId) : null;
+          if (source) {
+            return createLineConnectState(source);
+          }
+          return createLineConnectState(null);
+        });
+        return;
+      }
+      if ((event.key === "Delete" || event.key === "Backspace") && selectedEdgeId) {
+        event.preventDefault();
+        deleteSelectedEdge();
+        return;
+      }
       if ((event.key === "Delete" || event.key === "Backspace") && selectedNodeId) {
         event.preventDefault();
-        deleteNode(selectedNodeId);
+        deleteNode(selectedNodeId, { silent: true });
+        return;
       }
       if (event.key === "Escape") {
         setCanvasCommand(null);
         setNodeContextMenu(null);
         setConnectionMenu(null);
         setSelectedNodeId(null);
+        setSelectedEdgeId(null);
         setActivePanel(null);
+        setLineConnectState(null);
+        setReferenceSelectionTargetId(null);
+        setMarkSelectionTargetId(null);
+        setMarkAnalysisState(null);
       }
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [deleteNode, selectedNodeId]);
+  }, [createLineConnectState, deleteNode, deleteSelectedEdge, nodes, selectedEdgeId, selectedNodeId]);
 
   const onPointerMove = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
+      const endpointDrag = connectionDragRef.current;
+      if (endpointDrag) {
+        updateEndpointConnectionDrag(event.clientX, event.clientY);
+        return;
+      }
+      if (lineConnectState?.sourceId || lineConnectState?.targetId) {
+        const canvasPoint = getCanvasPoint(event.clientX, event.clientY);
+        setLineConnectState((current) =>
+          current?.sourceId || current?.targetId
+            ? {
+                ...current,
+                cursorCanvasX: canvasPoint.x,
+                cursorCanvasY: canvasPoint.y,
+                hoverNodeId: getConnectionHoverNodeId(event.clientX, event.clientY, current.sourceId || current.targetId),
+              }
+            : current
+        );
+      }
       const drag = dragRef.current;
       if (!drag) return;
       if (drag.kind === "node") {
@@ -5721,23 +10502,62 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         y: Math.round(drag.viewportY + event.clientY - drag.startY),
       }));
     },
-    [snapEnabled, viewport.zoom]
+    [getCanvasPoint, getConnectionHoverNodeId, lineConnectState?.sourceId, lineConnectState?.targetId, snapEnabled, updateEndpointConnectionDrag, viewport.zoom]
   );
 
-  const onPointerUp = useCallback(() => {
+  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const endpointDrag = connectionDragRef.current;
+    if (endpointDrag) {
+      if (finishEndpointConnectionDrag(event.clientX, event.clientY)) {
+        event.stopPropagation();
+        return;
+      }
+    }
     dragRef.current = null;
+  }, [finishEndpointConnectionDrag]);
+
+  useEffect(() => {
+    return () => {
+      connectionDragCleanupRef.current?.();
+      connectionDragCleanupRef.current = null;
+    };
+  }, []);
+
+  const setZoomAroundViewportCenter = useCallback((nextZoom: number) => {
+    setViewport((current) => {
+      const zoom = clampCanvasZoom(nextZoom);
+      if (zoom === current.zoom) return current;
+      const clientX = (canvasRef.current?.clientWidth || window.innerWidth) / 2;
+      const clientY = (canvasRef.current?.clientHeight || window.innerHeight) / 2;
+      const worldX = (clientX - current.x) / current.zoom;
+      const worldY = (clientY - current.y) / current.zoom;
+      return {
+        x: Math.round(clientX - worldX * zoom),
+        y: Math.round(clientY - worldY * zoom),
+        zoom,
+      };
+    });
   }, []);
 
   const zoomBy = useCallback((delta: number) => {
-    setViewport((current) => ({
-      ...current,
-      zoom: Math.min(2.4, Math.max(0.3, Number((current.zoom + delta).toFixed(2)))),
-    }));
+    setViewport((current) => {
+      const nextZoom = clampCanvasZoom(current.zoom + delta);
+      if (nextZoom === current.zoom) return current;
+      const clientX = (canvasRef.current?.clientWidth || window.innerWidth) / 2;
+      const clientY = (canvasRef.current?.clientHeight || window.innerHeight) / 2;
+      const worldX = (clientX - current.x) / current.zoom;
+      const worldY = (clientY - current.y) / current.zoom;
+      return {
+        x: Math.round(clientX - worldX * nextZoom),
+        y: Math.round(clientY - worldY * nextZoom),
+        zoom: nextZoom,
+      };
+    });
   }, []);
 
   const zoomAtPoint = useCallback((delta: number, clientX: number, clientY: number) => {
     setViewport((current) => {
-      const nextZoom = Math.min(2.4, Math.max(0.3, Number((current.zoom + delta).toFixed(2))));
+      const nextZoom = clampCanvasZoom(current.zoom + delta);
       if (nextZoom === current.zoom) return current;
       const worldX = (clientX - current.x) / current.zoom;
       const worldY = (clientY - current.y) / current.zoom;
@@ -5766,7 +10586,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       const padding = targetNodes.length === 1 ? 280 : 220;
       const nextZoom = Math.min(
         1.35,
-        Math.max(0.3, Math.min((canvasWidth - padding) / boundsWidth, (canvasHeight - padding) / boundsHeight))
+        Math.max(CANVAS_MIN_ZOOM, Math.min((canvasWidth - padding) / boundsWidth, (canvasHeight - padding) / boundsHeight))
       );
       setViewport({
         x: Math.round((canvasWidth - boundsWidth * nextZoom) / 2 - minX * nextZoom),
@@ -5777,11 +10597,37 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     []
   );
 
-  const focusDockTarget = useCallback(() => {
-    const target = selectedNode ? [selectedNode] : nodes;
-    fitNodesToView(target);
+  const fitDockTarget = useCallback(() => {
+    fitNodesToView(nodes);
     setDockOverviewOpen(false);
-  }, [fitNodesToView, nodes, selectedNode]);
+  }, [fitNodesToView, nodes]);
+
+  const handleArrangeCanvas = useCallback(() => {
+    setDockOverviewOpen(false);
+    if (nodes.length === 0) {
+      fitNodesToView(nodes);
+      setArrangePreview(null);
+      return;
+    }
+    const arrangedNodes = arrangeNodesForPreview(nodes);
+    setArrangePreview({
+      nodes: nodes.map((node) => ({ ...node })),
+      viewport,
+    });
+    setNodes(arrangedNodes);
+    fitNodesToView(arrangedNodes);
+  }, [fitNodesToView, nodes, viewport]);
+
+  const restoreArrangePreview = useCallback(() => {
+    if (!arrangePreview) return;
+    setNodes(arrangePreview.nodes);
+    setViewport(arrangePreview.viewport);
+    setArrangePreview(null);
+  }, [arrangePreview]);
+
+  const keepArrangePreview = useCallback(() => {
+    setArrangePreview(null);
+  }, []);
 
   const onCanvasWheel = useCallback(
     (event: ReactWheelEvent<HTMLDivElement>) => {
@@ -5813,11 +10659,67 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     toast.success("分享链接已复制");
   }, [canvasId]);
 
+  const startAssetManagerResize = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      assetManagerResizeCleanupRef.current?.();
+
+      const previousCursor = document.body.style.cursor;
+      const previousUserSelect = document.body.style.userSelect;
+
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        setAssetManagerWidth(clampAssetManagerWidth(moveEvent.clientX));
+      };
+
+      const cleanup = () => {
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerup", cleanup);
+        document.removeEventListener("pointercancel", cleanup);
+        document.body.style.cursor = previousCursor;
+        document.body.style.userSelect = previousUserSelect;
+        assetManagerResizeCleanupRef.current = null;
+      };
+
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", cleanup, { once: true });
+      document.addEventListener("pointercancel", cleanup, { once: true });
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      assetManagerResizeCleanupRef.current = cleanup;
+    },
+    []
+  );
+
+  const locateCanvasNode = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find((item) => item.id === nodeId);
+      if (!node) return;
+      const canvasWidth = canvasRef.current?.clientWidth || window.innerWidth;
+      const canvasHeight = canvasRef.current?.clientHeight || window.innerHeight;
+      const drawerOffset = activePanel === "assetManager" ? assetManagerWidth : 0;
+      const zoom = 1;
+
+      setSelectedNodeId(node.id);
+      setSelectedEdgeId(null);
+      setNodeContextMenu(null);
+      setConnectionMenu(null);
+      setLineConnectState(null);
+      setViewport({
+        x: Math.round(drawerOffset + (canvasWidth - drawerOffset) / 2 - (node.x + node.width / 2) * zoom),
+        y: Math.round(canvasHeight / 2 - (node.y + node.height / 2) * zoom),
+        zoom,
+      });
+    },
+    [activePanel, assetManagerWidth, nodes]
+  );
+
   const toggleTopPanel = useCallback((panel: Exclude<ActivePanel, null>) => {
     setCanvasCommand(null);
     setNodeContextMenu(null);
     setConnectionMenu(null);
     setInspectorNodeId(null);
+    setLineConnectState(null);
     setActivePanel((current) => (current === panel ? null : panel));
   }, []);
 
@@ -5844,6 +10746,23 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         : [],
     [edges, nodes, selectedNode, selectedTargetModuleKind]
   );
+  const effectLibraryConnectedNode = useMemo(() => {
+    if (!effectLibraryTargetNodeId) return null;
+    const sourceId = edges.find((edge) => {
+      if (edge.target !== effectLibraryTargetNodeId) return false;
+      return isVideoEffectMaterialNode(
+        nodes.find((node) => node.id === edge.source),
+      );
+    })?.source;
+    return nodes.find((node) => node.id === sourceId) || null;
+  }, [edges, effectLibraryTargetNodeId, nodes]);
+  const roleLibraryConnectedNodes = useMemo(() => {
+    if (!roleLibraryTargetNodeId) return [];
+    return edges
+      .filter((edge) => edge.target === roleLibraryTargetNodeId)
+      .map((edge) => nodes.find((node) => node.id === edge.source))
+      .filter((node): node is CloneNode => isVideoRoleMaterialNode(node));
+  }, [edges, nodes, roleLibraryTargetNodeId]);
   const selectedPresetAnchor = useMemo<PresetControlAnchor | null>(() => {
     if (!selectedPresetControlNode) return null;
     return {
@@ -5880,6 +10799,63 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       zoom: viewport.zoom,
     };
   }, [selectedGenericImageNode, viewport.x, viewport.y, viewport.zoom]);
+  const selectedVideoCropGenerateState = selectedVideoMediaNode
+    ? videoCropGenerateStates[selectedVideoMediaNode.id]
+    : undefined;
+  const selectedSubtitleEraseRegions = selectedVideoMediaNode
+    ? subtitleEraseRegions[selectedVideoMediaNode.id] || []
+    : [];
+  const selectedSubtitleEraseHistory = selectedVideoMediaNode
+    ? subtitleEraseRegionHistory[selectedVideoMediaNode.id] || { future: [], past: [] }
+    : { future: [], past: [] };
+  const selectEdge = useCallback((event: ReactPointerEvent<SVGPathElement>, edgeId: string) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setSelectedEdgeId(edgeId);
+    setSelectedNodeId(null);
+    setInspectorNodeId(null);
+    setCanvasCommand(null);
+    setNodeContextMenu(null);
+    setConnectionMenu(null);
+    setActivePanel(null);
+    setLineConnectState(null);
+  }, []);
+
+  const openStoryScriptWorkflow = useCallback((nodeId: string) => {
+    setStoryWorkflowNodeId(nodeId);
+    setStoryWorkflowStep("shots");
+    setSelectedNodeId(nodeId);
+    setSelectedEdgeId(null);
+    setCanvasCommand(null);
+    setNodeContextMenu(null);
+    setConnectionMenu(null);
+    setActivePanel(null);
+    setLineConnectState(null);
+  }, []);
+
+  const lineConnectPreview = useMemo(() => {
+    if (!lineConnectState?.sourceId || lineConnectState.cursorCanvasX === null || lineConnectState.cursorCanvasY === null) {
+      if (!lineConnectState?.targetId || lineConnectState?.cursorCanvasX === null || lineConnectState?.cursorCanvasY === null) {
+        return null;
+      }
+      const target = nodes.find((node) => node.id === lineConnectState.targetId);
+      if (!target) return null;
+      return {
+        endX: target.x,
+        endY: target.y + target.height / 2,
+        startX: lineConnectState.cursorCanvasX,
+        startY: lineConnectState.cursorCanvasY,
+      };
+    }
+    const source = nodes.find((node) => node.id === lineConnectState.sourceId);
+    if (!source) return null;
+    return {
+      endX: lineConnectState.cursorCanvasX,
+      endY: lineConnectState.cursorCanvasY,
+      startX: source.x + source.width,
+      startY: source.y + source.height / 2,
+    };
+  }, [lineConnectState, nodes]);
 
   return (
     <div
@@ -5894,13 +10870,64 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     >
       <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.18)_1px,transparent_1px)] bg-[length:16px_16px] bg-[position:2px_2px] opacity-[0.28]" />
 
+      {lineConnectState ? (
+        <div
+          className="-translate-x-1/2 fixed left-1/2 top-2 z-[75] flex flex-col items-center gap-1 text-[12px] text-white/70"
+          data-canvas-overlay="true"
+        >
+          <div className="flex h-[34px] items-center gap-3 rounded-[8px] border border-white/10 bg-[#242424]/95 px-3 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[18px]">
+            <span className="text-white/82">正在跟随</span>
+            <button
+              aria-label="退出跟随"
+              className="flex h-6 items-center rounded-[6px] px-2 text-white/56 hover:bg-white/8 hover:text-white"
+              onClick={() => setLineConnectState(null)}
+              type="button"
+            >
+              取消ESC
+            </button>
+          </div>
+          <span className="rounded-[6px] bg-black/28 px-2 py-1 text-white/42">按 ESC 退出</span>
+        </div>
+      ) : null}
+
+      {referenceSelectionTargetId ? (
+        <ReferenceSelectionToolbar
+          onExit={() => setReferenceSelectionTargetId(null)}
+          onReturn={() => locateCanvasNode(referenceSelectionTargetId)}
+        />
+      ) : null}
+
+      {markSelectionTargetId ? (
+        <VideoCanvasMarkSelectionToolbar
+          onExit={() => setMarkSelectionTargetId(null)}
+          onReturn={() => locateCanvasNode(markSelectionTargetId)}
+        />
+      ) : null}
+
+      {cancelGenerationConfirmNodeId ? (
+        <CancelGenerationConfirmDialog
+          onCancel={() => setCancelGenerationConfirmNodeId(null)}
+          onConfirm={() => setCancelGenerationConfirmNodeId(null)}
+        />
+      ) : null}
+
       <div
-        className="absolute left-0 top-0 origin-top-left"
+        className="absolute left-0 top-0 z-0 origin-top-left"
+        data-canvas-world="true"
         style={{ height: CANVAS_EXTENT, transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`, width: CANVAS_EXTENT }}
       >
-        <CloneEdges edges={edges} nodes={nodes} />
+        <CloneEdges
+          edges={edges}
+          nodes={nodes}
+          onDeleteEdge={deleteEdge}
+          onEdgePointerDown={selectEdge}
+          preview={lineConnectPreview}
+          selectedEdgeId={selectedEdgeId}
+        />
         {nodes.map((node) => (
           <CloneCanvasNode
+            connectionsHidden={edgesHidden}
+            connectionHoverActive={node.id === lineConnectState?.hoverNodeId}
             key={node.id}
             node={node}
             selected={node.id === selectedNodeId}
@@ -5909,9 +10936,26 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             onClearGridSplit={() => dismissNodeGridSplit(node.id)}
             onClearGridSplitSelection={() => clearNodeGridSplitSelection(node.id)}
             onClearLocalEditRegions={() => clearNodeLocalEditRegions(node.id)}
+            onExtractVideoFrame={(kind) => extractVideoFrameNode(node.id, kind)}
+            onGenerateVideoHd={() => generateVideoHdUpscaleNode(node.id)}
             onModuleAction={(actionLabel) => runTargetModuleAction(node.id, actionLabel)}
             onOpenConnectionMenu={(event, side) => openConnectionMenu(event, node, side)}
+            onOpenScriptWorkflow={() => openStoryScriptWorkflow(node.id)}
             onPointerDown={(event) => startNodeDrag(event, node)}
+            onStartConnectionDrag={(event, side) => startConnectionEndpointDrag(event, node, side)}
+            onStartConnectionMouseDrag={(event, side) => startConnectionEndpointMouseDrag(event, node, side)}
+            onRunNode={() => {
+              const mode = getPresetControlMode(node);
+              if (mode && !isOfficialImagePresetFunctionKey(mode)) {
+                void runPresetComposerSubmit(
+                  node.id,
+                  mode,
+                  getDraftString(node, "prompt") || STORY_SCRIPT_PROMPT,
+                );
+                return;
+              }
+              void runNode(node.id);
+            }}
             onSetLocalEditMode={(enabled) => setNodeLocalEditMode(node.id, enabled)}
             onSubmitLocalEdit={(regions) => submitNodeLocalEdit(node.id, regions)}
             onToggleGridSplitSelection={(index, behavior) => toggleNodeGridSplitSelection(node.id, index, behavior)}
@@ -5919,6 +10963,76 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             onTextResourceChange={(content) => updateTextResourceContent(node.id, content)}
           />
         ))}
+        {referenceSelectionTargetId
+          ? edges
+              .filter((edge) => edge.target === referenceSelectionTargetId)
+              .map((edge) => nodes.find((node) => node.id === edge.source))
+              .filter((node): node is CloneNode => Boolean(node))
+              .filter((node) => {
+                const mediaType = getDraftString(node, "mediaType") || node.inputType;
+                return node.kind === "media" && mediaType === "image";
+              })
+              .map((node) => (
+                <div
+                  className="group absolute z-40 cursor-pointer"
+                  key={`reference-selection-${node.id}`}
+                  onPointerDown={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setEdges((current) =>
+                      current.filter(
+                        (edge) =>
+                          !(edge.source === node.id && edge.target === referenceSelectionTargetId)
+                      )
+                    );
+                    setSelectedNodeId(referenceSelectionTargetId);
+                    setSelectedEdgeId(null);
+                  }}
+                  style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
+                >
+                  <span className="pointer-events-none absolute left-1/2 top-1/2 flex h-7 w-[72px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-black/70 px-3 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition group-hover:opacity-100 group-hover:bg-red-500">
+                    取消选择
+                  </span>
+                </div>
+              ))
+          : null}
+        {markSelectionTargetId
+          ? nodes
+              .filter((node) => {
+                const mediaType = getDraftString(node, "mediaType") || node.inputType;
+                return (
+                  node.id !== markSelectionTargetId &&
+                  node.kind === "media" &&
+                  mediaType === "image" &&
+                  Boolean(getNodeReferenceMediaUrl(node))
+                );
+              })
+              .map((sourceNode) => {
+                const targetNode = nodes.find((node) => node.id === markSelectionTargetId);
+                const marks = getVideoCanvasMagicMarks(targetNode).filter(
+                  (mark) => mark.sourceNodeId === sourceNode.id
+                );
+                const analysis =
+                  markAnalysisState?.sourceNodeId === sourceNode.id &&
+                  markAnalysisState.targetNodeId === markSelectionTargetId
+                    ? markAnalysisState
+                    : null;
+                if (marks.length === 0 && !analysis) return null;
+                return (
+                  <VideoCanvasMarkSourceOverlay
+                    analysis={analysis}
+                    key={`video-mark-source-${sourceNode.id}`}
+                    marks={marks}
+                    node={sourceNode}
+                    onRemove={(markId) =>
+                      updateVideoCanvasMagicMarks(markSelectionTargetId, (current) =>
+                        current.filter((mark) => mark.id !== markId)
+                      )
+                    }
+                  />
+                );
+              })
+          : null}
       </div>
 
       {nodes.length === 0 && !activePanel ? (
@@ -5973,6 +11087,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             setActivePanel("assets");
             setCanvasCommand(null);
           }}
+          onHistorySelect={() => {
+            setActivePanel("historyPicker");
+            setCanvasCommand(null);
+          }}
           onUploadFiles={addCanvasCommandUploadedFiles}
         />
       ) : null}
@@ -6020,6 +11138,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
               settings
             )
           }
+          onStoryToolAction={(action) => runStoryScriptToolbarAction(selectedPresetControlNode.id, action)}
           selectedNode={selectedPresetControlNode}
         />
       ) : null}
@@ -6035,21 +11154,81 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
 
       {selectedVideoMediaNode && selectedVideoAnchor ? (
         <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
-          <VideoMediaToolbar
+          <OfficialVideoMediaToolbar
             activeMode={activeVideoToolbarMode}
+            analysisLoading={videoAnalysisStates[selectedVideoMediaNode.id]?.status === "loading"}
             anchor={selectedVideoAnchor}
+            audioSplitLoading={videoAudioSplitStates[selectedVideoMediaNode.id]?.status === "loading"}
             onAnalyze={() => {
-              const nextMode = activeVideoToolbarMode === "analysis" ? null : "analysis";
-              setActiveVideoToolbarMode(nextMode);
-              if (nextMode === "analysis") {
-                void requestVideoAnalysis(selectedVideoMediaNode.id);
-              }
+              setActiveVideoToolbarMode(null);
+              void requestVideoAnalysis(selectedVideoMediaNode.id);
             }}
-            onDownload={() => downloadVideoNode(selectedVideoMediaNode)}
-            onHd={() => toast.info("视频高清后端待接入，按钮先保留。")}
-            onPreview={() => setPreviewNode(selectedVideoMediaNode)}
+            onAudioVideoSplit={() => splitVideoAudioTrack(selectedVideoMediaNode.id, "audio-video")}
+            onHdOption={(option) => createVideoHdUpscaleFromVideo(selectedVideoMediaNode.id, option)}
+            onSubtitleErase={(mode) => {
+              setSubtitleEraseMode(mode);
+              setActiveVideoToolbarMode("subtitleErase");
+            }}
+            onToggleCrop={() => setActiveVideoToolbarMode((current) => current === "crop" ? null : "crop")}
             onToggleClip={() => setActiveVideoToolbarMode((current) => current === "clip" ? null : "clip")}
+            onVoiceSplit={(mode) => splitVideoAudioTrack(selectedVideoMediaNode.id, mode)}
           />
+          {activeVideoToolbarMode === "crop" ? (
+            <>
+              <VideoCropSelectionOverlay anchor={selectedVideoAnchor} node={selectedVideoMediaNode} />
+              <VideoInlineActionBar
+                actionLabel={VIDEO_CROP_INLINE_LABEL}
+                anchor={selectedVideoAnchor}
+                applyBusyLabel={
+                  selectedVideoCropGenerateState
+                    ? `生成中 ${Math.round(selectedVideoCropGenerateState.progress)}%`
+                    : undefined
+                }
+                applyIcon="upload"
+                applyLabel="生成裁剪"
+                applyLoading={Boolean(selectedVideoCropGenerateState)}
+                onApply={() => applyVideoCropSelection(selectedVideoMediaNode.id)}
+                onClose={() => setActiveVideoToolbarMode(null)}
+                title="退出裁剪"
+              />
+            </>
+          ) : null}
+          {activeVideoToolbarMode === "subtitleErase" && subtitleEraseMode === "smart" ? (
+            <VideoInlineActionBar
+              actionLabel="智能擦除"
+              anchor={selectedVideoAnchor}
+              applyLabel="生成擦除"
+              costLabel="0"
+              onApply={() => applySubtitleEraseSelection(selectedVideoMediaNode.id, "smart")}
+              onClose={() => setActiveVideoToolbarMode(null)}
+              title="关闭去字幕生成器"
+            />
+          ) : null}
+          {activeVideoToolbarMode === "subtitleErase" && subtitleEraseMode === "region" ? (
+            <>
+              <VideoSubtitleEraseRegionOverlay
+                anchor={selectedVideoAnchor}
+                node={selectedVideoMediaNode}
+                onAddRegion={(region) =>
+                  commitSubtitleEraseRegions(selectedVideoMediaNode.id, [...selectedSubtitleEraseRegions, region])
+                }
+                regions={selectedSubtitleEraseRegions}
+              />
+              <VideoSubtitleEraseRegionActionBar
+                anchor={selectedVideoAnchor}
+                canRedo={selectedSubtitleEraseHistory.future.length > 0}
+                canReset={selectedSubtitleEraseRegions.length > 0}
+                canUndo={selectedSubtitleEraseHistory.past.length > 0}
+                costLabel={selectedSubtitleEraseRegions.length > 0 ? "0" : "-"}
+                onApply={() => applySubtitleEraseSelection(selectedVideoMediaNode.id, "region")}
+                onClose={() => setActiveVideoToolbarMode(null)}
+                onRedo={() => redoSubtitleEraseRegionChange(selectedVideoMediaNode.id)}
+                onReset={() => commitSubtitleEraseRegions(selectedVideoMediaNode.id, [])}
+                onUndo={() => undoSubtitleEraseRegionChange(selectedVideoMediaNode.id)}
+                regionCount={selectedSubtitleEraseRegions.length}
+              />
+            </>
+          ) : null}
           {activeVideoToolbarMode === "clip" ? (
             <VideoClipEditorBar
               anchor={selectedVideoAnchor}
@@ -6066,21 +11245,6 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
               onReset={() => updateVideoClipRange(selectedVideoMediaNode.id, { start: 0.18, end: 0.52 })}
             />
           ) : null}
-          {activeVideoToolbarMode === "analysis" ? (
-            <VideoAnalysisFloatingPanel
-              anchor={selectedVideoAnchor}
-              analysisState={
-                videoAnalysisStates[selectedVideoMediaNode.id] ||
-                getPersistedVideoAnalysisState(selectedVideoMediaNode) || {
-                  rows: [],
-                  status: "idle",
-                  summary: "准备解析当前视频故事...",
-                }
-              }
-              node={selectedVideoMediaNode}
-              onClose={() => setActiveVideoToolbarMode(null)}
-            />
-          ) : null}
         </div>
       ) : null}
 
@@ -6129,15 +11293,156 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
           anchor={selectedTargetAnchor}
           functionConfig={videoCanvasFunctionConfig}
           membershipSummary={membershipSummary}
+          magicMarks={getVideoCanvasMagicMarks(selectedNode)}
           modelOptions={canvasModelOptions}
           node={selectedNode}
+          markSelectionActive={markSelectionTargetId === selectedNode.id}
+          onRemoveMagicMark={(markId) =>
+            updateVideoCanvasMagicMarks(selectedNode.id, (current) =>
+              current.filter((mark) => mark.id !== markId)
+            )
+          }
+          onOpenEffectLibrary={() => {
+            setReferenceSelectionTargetId(null);
+            setMarkSelectionTargetId(null);
+            setEffectLibraryTargetNodeId(selectedNode.id);
+            setSelectedNodeId(selectedNode.id);
+            setSelectedEdgeId(null);
+            setCanvasCommand(null);
+            setNodeContextMenu(null);
+            setConnectionMenu(null);
+            setActivePanel("effectLibrary");
+            setLineConnectState(null);
+          }}
+          onOpenRoleLibrary={() => {
+            setReferenceSelectionTargetId(null);
+            setMarkSelectionTargetId(null);
+            setEffectLibraryTargetNodeId(null);
+            setRoleLibraryTargetNodeId(selectedNode.id);
+            setSelectedNodeId(selectedNode.id);
+            setSelectedEdgeId(null);
+            setCanvasCommand(null);
+            setNodeContextMenu(null);
+            setConnectionMenu(null);
+            setActivePanel("videoRoleLibrary");
+            setVideoRoleAgreementOpen(!videoRoleAgreementAccepted);
+            setLineConnectState(null);
+          }}
+          onRemoveEffect={(sourceId) => {
+            setEdges((current) =>
+              current.filter(
+                (edge) =>
+                  !(edge.source === sourceId && edge.target === selectedNode.id),
+              ),
+            );
+            setSelectedNodeId(selectedNode.id);
+            setSelectedEdgeId(null);
+          }}
+          onRemoveReference={(sourceId) => {
+            setEdges((current) =>
+              current.filter(
+                (edge) => !(edge.source === sourceId && edge.target === selectedNode.id)
+              )
+            );
+            setSelectedNodeId(selectedNode.id);
+            setSelectedEdgeId(null);
+          }}
+          onRemoveRole={(sourceId) => {
+            setEdges((current) =>
+              current.filter(
+                (edge) =>
+                  !(edge.source === sourceId && edge.target === selectedNode.id),
+              ),
+            );
+            setSelectedNodeId(selectedNode.id);
+            setSelectedEdgeId(null);
+          }}
+          onPromptChange={(prompt) => {
+            setNodes((current) =>
+              current.map((node) =>
+                node.id === selectedNode.id
+                  ? {
+                      ...node,
+                      draftValues: {
+                        ...(node.draftValues || {}),
+                        prompt,
+                        params: {
+                          ...((node.draftValues?.params as
+                            | Record<string, unknown>
+                            | undefined) || {}),
+                          prompt,
+                        },
+                      },
+                    }
+                  : node,
+              ),
+            );
+          }}
+          onStartReferenceSelection={() => {
+            setMarkSelectionTargetId(null);
+            setReferenceSelectionTargetId((current) =>
+              current === selectedNode.id ? null : selectedNode.id
+            );
+            setSelectedNodeId(selectedNode.id);
+            setSelectedEdgeId(null);
+            setCanvasCommand(null);
+            setNodeContextMenu(null);
+            setConnectionMenu(null);
+            setActivePanel(null);
+            setLineConnectState(null);
+          }}
+          onStartMarkSelection={() => {
+            setReferenceSelectionTargetId(null);
+            setMarkSelectionTargetId((current) =>
+              current === selectedNode.id ? null : selectedNode.id
+            );
+            setSelectedNodeId(selectedNode.id);
+            setSelectedEdgeId(null);
+            setCanvasCommand(null);
+            setNodeContextMenu(null);
+            setConnectionMenu(null);
+            setActivePanel(null);
+            setLineConnectState(null);
+          }}
+          onUpdateMagicMark={(markId, selectedIndex) =>
+            updateVideoCanvasMagicMarks(selectedNode.id, (current) =>
+              current.map((mark) =>
+                mark.id === markId
+                  ? {
+                      ...mark,
+                      selectedIndex: Math.max(
+                        0,
+                        Math.min(mark.labelOptions.length - 1, selectedIndex)
+                      ),
+                    }
+                  : mark
+              )
+            )
+          }
           sourceNodes={selectedTargetSourceNodes}
+          referenceSelectionActive={referenceSelectionTargetId === selectedNode.id}
           onSubmit={(payload) => {
             void submitVideoTargetComposer(selectedNode.id, payload);
           }}
         />
       ) : null}
 
+      {selectedNode && selectedTargetModuleKind === "audio" && selectedTargetAnchor ? (
+        <AudioTargetModuleComposer anchor={selectedTargetAnchor} />
+      ) : null}
+
+      {storyWorkflowNode ? (
+        <StoryScriptWorkflowDialog
+          node={storyWorkflowNode}
+          onClose={() => setStoryWorkflowNodeId(null)}
+          onRun={() => {
+            void runNode(storyWorkflowNode.id);
+          }}
+          onStepChange={setStoryWorkflowStep}
+          step={storyWorkflowStep}
+        />
+      ) : null}
+
       <TopBar
         draftTitle={draftTitle}
         isTitleEditing={isTitleEditing}
@@ -6163,24 +11468,43 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       />
 
       <ZoomDock
+        assetManagerOpen={activePanel === "assetManager"}
+        assetManagerWidth={assetManagerWidth}
         compact={false}
         nodes={nodes}
         overviewOpen={dockOverviewOpen}
         selectedNodeId={selectedNodeId}
+        edgesHidden={edgesHidden}
         snapEnabled={snapEnabled}
+        viewport={viewport}
         zoom={viewport.zoom}
-        onCenter={focusDockTarget}
+        onArrange={handleArrangeCanvas}
+        onCenter={fitDockTarget}
+        onToggleAssetManager={() => setActivePanel((current) => current === "assetManager" ? null : "assetManager")}
+        onToggleEdges={() => setEdgesHidden((value) => !value)}
         onToggleOverview={() => setDockOverviewOpen((value) => !value)}
         onToggleSnap={() => setSnapEnabled((value) => !value)}
-        onZoomIn={() => zoomBy(0.1)}
-        onZoomOut={() => zoomBy(-0.1)}
+        onSetZoom={setZoomAroundViewportCenter}
+        onViewportChange={setViewport}
+        onZoomIn={() => zoomBy(CANVAS_ZOOM_STEP)}
+        onZoomOut={() => zoomBy(-CANVAS_ZOOM_STEP)}
       />
 
+      {arrangePreview ? (
+        <ArrangeCanvasConfirm
+          assetManagerOpen={activePanel === "assetManager"}
+          assetManagerWidth={assetManagerWidth}
+          onKeep={keepArrangePreview}
+          onRestore={restoreArrangePreview}
+        />
+      ) : null}
+
       {activePanel === "add" ? (
         <AddModulePanel
           onAddModule={addTargetModule}
           onClose={() => setActivePanel(null)}
           onGallerySelect={() => setActivePanel("assets")}
+          onHistorySelect={() => setActivePanel("historyPicker")}
           onUploadFiles={addUploadedFiles}
         />
       ) : null}
@@ -6196,40 +11520,131 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       {inspectorNode ? (
         <InspectorPanel
           node={inspectorNode}
+          referenceCount={edges.filter((edge) => edge.target === inspectorNode.id).length}
+          onAddReference={(node) => addReferenceModulesForTool(node.id)}
           onChangeProperty={updateNodeDraft}
           onClose={() => setInspectorNodeId(null)}
+          onGenerate={(node) => void runConfiguredToolNode(node.id)}
         />
       ) : null}
 
       {activePanel === "assets" ? (
-        <LibModal onClose={() => setActivePanel(null)} title="素材库">
-          <AssetLibraryPanel />
-        </LibModal>
+        <AssetLibraryLauncherPanel
+          onClose={() => setActivePanel(null)}
+          onOpenEffectLibrary={() => setActivePanel("effectLibrary")}
+          onOpenStyleLibrary={() => setActivePanel("styleLibrary")}
+        />
+      ) : null}
+
+      {activePanel === "effectLibrary" || activePanel === "styleLibrary" ? (
+        <AssetMarketPanel
+          effectPresets={videoCanvasFunctionConfig.effectPresets}
+          kind={activePanel === "effectLibrary" ? "effect" : "style"}
+          modelLabel={
+            getDraftString(effectLibraryConnectedNode, "model") ||
+            videoCanvasFunctionConfig.effectPresets[0]?.model ||
+            "Seedance 2.0"
+          }
+          onApplyEffect={
+            effectLibraryTargetNodeId ? applyVideoEffectFromMarket : undefined
+          }
+          onClose={() => {
+            setActivePanel(null);
+            setEffectLibraryTargetNodeId(null);
+          }}
+          onApplyStyle={addStyleAssetFromMarket}
+          selectedEffectTitle={getDraftString(
+            effectLibraryConnectedNode,
+            "effectTitle",
+          )}
+        />
       ) : null}
 
       {activePanel === "history" ? (
-        <LibModal onClose={() => setActivePanel(null)} title="历史记录">
-          <div className="space-y-2">
-            {nodes.length === 0 ? (
-              <EmptyState icon={Clock3} title="暂无历史" description="节点执行、草稿版本和回滚记录待接入。" />
-            ) : (
-              nodes.slice(-10).reverse().map((node) => (
-                <button
-                  className="flex w-full items-center justify-between rounded-[8px] border border-white/8 bg-white/5 px-3 py-2 text-left hover:bg-white/8"
-                  key={node.id}
-                  onClick={() => setSelectedNodeId(node.id)}
-                  type="button"
-                >
-                  <span>
-                    <span className="block text-[13px] text-white/86">{node.title}</span>
-                    <span className="text-[11px] text-white/38">{node.subtitle || node.kind}</span>
-                  </span>
-                  <ChevronDown className="-rotate-90 h-4 w-4 text-white/38" />
-                </button>
-              ))
+        <HistoryAssetsPanel
+          listDownloadPendingId={historyListDownloadPendingId}
+          nodes={nodes}
+          onClose={() => setActivePanel(null)}
+          onOpenWatermarkRules={openHistoryWatermarkRules}
+          onSelectNode={setSelectedNodeId}
+          onUseNode={reuseHistoryAssetNode}
+        />
+      ) : null}
+
+      {activePanel === "historyPicker" ? (
+        <HistoryAssetPickerModal
+          nodes={nodes}
+          onClose={() => setActivePanel(null)}
+          onConfirm={addHistoryPickerNodes}
+        />
+      ) : null}
+
+      {historyWatermarkRulesOpen ? (
+        <WatermarkRulesModal onSave={saveHistoryWatermarkRules} />
+      ) : null}
+
+      {activePanel === "assetManager" ? (
+        <CanvasAssetManagerPanel
+          nodes={nodes}
+          onClose={() => setActivePanel(null)}
+          onDuplicateNode={duplicateNode}
+          onRenameNode={renameNode}
+          onResizeStart={startAssetManagerResize}
+          onSelectNode={locateCanvasNode}
+          panelWidth={assetManagerWidth}
+        />
+      ) : null}
+
+      {activePanel === "shortcuts" ? (
+        <ShortcutPanel onClose={() => setActivePanel(null)} />
+      ) : null}
+
+      {activePanel === "tutorial" ? (
+        <TutorialHelpPanel onClose={() => setActivePanel(null)} />
+      ) : null}
+
+      {activePanel === "roleLibrary" ? (
+        <RoleLibraryPanel
+          onApplyRole={addRoleAssetFromLibrary}
+          onClose={() => setActivePanel(null)}
+          roles={videoCanvasFunctionConfig.rolePresets}
+        />
+      ) : null}
+
+      {activePanel === "videoRoleLibrary" ? (
+        <>
+          <VideoRoleLibraryPanel
+            onApply={applyVideoRolesFromLibrary}
+            onClose={() => {
+              setActivePanel(null);
+              setRoleLibraryTargetNodeId(null);
+              setVideoRoleAgreementOpen(false);
+            }}
+            presets={videoCanvasFunctionConfig.rolePresets}
+            selectedRoleIds={roleLibraryConnectedNodes.map((node) =>
+              getDraftString(node, "roleId"),
             )}
-          </div>
-        </LibModal>
+          />
+          {videoRoleAgreementOpen ? (
+            <VideoRoleAgreementModal
+              onAgree={() => {
+                setVideoRoleAgreementAccepted(true);
+                setVideoRoleAgreementOpen(false);
+                try {
+                  window.localStorage.setItem(
+                    VIDEO_ROLE_AGREEMENT_STORAGE_KEY,
+                    "1",
+                  );
+                } catch {}
+              }}
+              onClose={() => {
+                setVideoRoleAgreementOpen(false);
+                setActivePanel(null);
+                setRoleLibraryTargetNodeId(null);
+              }}
+            />
+          ) : null}
+        </>
       ) : null}
 
       {activePanel === "help" ? (
@@ -6304,6 +11719,20 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         </LibModal>
       ) : null}
 
+      {directorConsoleNode ? (
+        <DirectorConsole3DDialog
+          node={directorConsoleNode}
+          onSendSnapshotsToCanvas={(snapshots) => sendDirectorSnapshotsToCanvas(directorConsoleNode, snapshots)}
+          onTutorialActiveChange={setDirectorTutorialActive}
+          onClose={() => setDirectorConsoleNodeId(null)}
+          tutorialActive={directorTutorialActive}
+        />
+      ) : null}
+
+      {directorTutorialActive && !directorConsoleNode ? (
+        <DirectorTutorialFollowBar onCancel={() => setDirectorTutorialActive(false)} />
+      ) : null}
+
       {angleEditorNode ? (
         <MultiAngleEditorDialog
           node={angleEditorNode}
@@ -6382,11 +11811,12 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       ) : null}
 
       {isBusy ? (
-        <div className="absolute inset-0 z-[120] flex items-center justify-center bg-[#151515]">
-          <div className="flex flex-col items-center gap-3 text-white/72">
-            <Loader2 className="h-7 w-7 animate-spin" />
-            <span className="text-sm">项目加载中...</span>
-          </div>
+        <div
+          className="pointer-events-none fixed left-1/2 top-20 z-[45] flex -translate-x-1/2 items-center gap-2 rounded-[8px] border border-white/10 bg-[#202020]/88 px-3 py-2 text-[12px] text-white/62 shadow-[0_14px_36px_rgba(0,0,0,0.34)] backdrop-blur-[10px]"
+          data-canvas-overlay="true"
+        >
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span>项目加载中...</span>
         </div>
       ) : null}
     </div>
@@ -6479,6 +11909,10 @@ function formatCreditValue(value: number) {
   return Math.round(value).toLocaleString("zh-CN");
 }
 
+function getToolbarButtonLabel(item: (typeof TOOLBAR_ITEMS)[number]) {
+  return item.id === "workflow" ? "打开工具箱" : item.label;
+}
+
 function LeftToolbar({
   activePanel,
   onOpen,
@@ -6488,21 +11922,23 @@ function LeftToolbar({
 }) {
   return (
     <aside
-      className="-translate-y-1/2 absolute left-4 top-1/2 z-40 flex flex-col items-center gap-2 rounded-xl border border-white/9 bg-[#202020]/95 p-2 shadow-[0_22px_60px_rgba(0,0,0,0.45)] backdrop-blur-[8px]"
+      className="fixed bottom-[15px] left-1/2 z-40 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-white/9 bg-[#202020]/95 p-1 shadow-[0_22px_60px_rgba(0,0,0,0.45)] backdrop-blur-[8px]"
       data-canvas-overlay="true"
     >
       {TOOLBAR_ITEMS.map((item, index) => {
         const Icon = item.icon;
-        const isActive = activePanel === item.id || (!activePanel && item.id === "add");
+        const isActive = activePanel === item.id;
+        const buttonLabel = getToolbarButtonLabel(item);
         return (
-          <div className="contents" key={item.id}>
+          <div className={cn("flex", index === 5 && "ml-[9px]")} key={item.id}>
             <button
+              aria-label={buttonLabel}
               className={cn(
-                "group flex h-9 w-9 cursor-pointer items-center justify-center rounded-[12px] text-white/72 transition-colors hover:bg-white/10 hover:text-white",
+                "group flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-white/72 transition-colors hover:bg-white/10 hover:text-white",
                 isActive && "bg-white text-black hover:bg-white hover:text-black"
               )}
               onClick={() => onOpen(item.id)}
-              title={item.label}
+              title={buttonLabel}
               type="button"
             >
               {item.id === "assets" ? (
@@ -6510,10 +11946,9 @@ function LeftToolbar({
               ) : item.id === "workflow" ? (
                 <WorkflowGlyph />
               ) : (
-                <Icon className={cn("h-[18px] w-[18px]", item.id === "add" && "transition-transform duration-200 group-hover:rotate-45")} />
+                <Icon className={cn("h-4 w-4", item.id === "add" && "transition-transform duration-200 group-hover:rotate-45")} />
               )}
             </button>
-            {index === 3 ? <div className="my-0 h-px w-5 shrink-0 bg-white/10" /> : null}
           </div>
         );
       })}
@@ -6522,34 +11957,112 @@ function LeftToolbar({
 }
 
 function ZoomDock({
+  assetManagerOpen = false,
+  assetManagerWidth = ASSET_MANAGER_DEFAULT_WIDTH,
   compact = false,
+  edgesHidden = false,
   nodes = [],
+  onArrange,
   onCenter,
+  onSetZoom,
+  onToggleEdges,
+  onToggleAssetManager,
   onToggleOverview,
   onToggleSnap,
+  onViewportChange,
   overviewOpen = false,
   selectedNodeId,
   snapEnabled = true,
+  viewport,
   onZoomIn,
   onZoomOut,
   zoom,
 }: {
+  assetManagerOpen?: boolean;
+  assetManagerWidth?: number;
   compact?: boolean;
+  edgesHidden?: boolean;
   nodes?: CloneNode[];
+  onArrange: () => void;
   onCenter: () => void;
+  onToggleEdges?: () => void;
+  onToggleAssetManager?: () => void;
   onToggleOverview?: () => void;
   onToggleSnap?: () => void;
+  onSetZoom: (zoom: number) => void;
+  onViewportChange: (viewport: { x: number; y: number; zoom: number }) => void;
   overviewOpen?: boolean;
   selectedNodeId?: string | null;
   snapEnabled?: boolean;
+  viewport: { x: number; y: number; zoom: number };
   onZoomIn: () => void;
   onZoomOut: () => void;
   zoom: number;
 }) {
+  const zoomMenuRef = useRef<HTMLDivElement | null>(null);
+  const zoomPercent = Math.round(zoom * 100);
+  const [zoomMenuOpen, setZoomMenuOpen] = useState(false);
+  const [zoomInputValue, setZoomInputValue] = useState(() => String(zoomPercent));
+
+  useEffect(() => {
+    setZoomInputValue(String(zoomPercent));
+  }, [zoomPercent]);
+
+  useEffect(() => {
+    if (!zoomMenuOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (target instanceof Node && zoomMenuRef.current?.contains(target)) return;
+      setZoomMenuOpen(false);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setZoomMenuOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [zoomMenuOpen]);
+
+  const applyZoom = useCallback(
+    (nextZoom: number) => {
+      const clampedZoom = clampCanvasZoom(nextZoom);
+      setZoomInputValue(String(Math.round(clampedZoom * 100)));
+      onSetZoom(clampedZoom);
+    },
+    [onSetZoom]
+  );
+
+  const commitZoomInput = useCallback(() => {
+    const parsedPercent = Number.parseFloat(zoomInputValue.trim().replace("%", ""));
+    if (!Number.isFinite(parsedPercent)) {
+      setZoomInputValue(String(zoomPercent));
+      return;
+    }
+    applyZoom(parsedPercent / 100);
+  }, [applyZoom, zoomInputValue, zoomPercent]);
+
+  const renderZoomMenuItem = (label: string, shortcut: string | null, onClick: () => void) => (
+    <button
+      className="flex h-9 w-full cursor-pointer items-center justify-between rounded-lg px-[9px] text-left text-[13px] leading-none text-white/88 transition-colors hover:bg-white/10 hover:text-white"
+      key={label}
+      onClick={onClick}
+      role="menuitem"
+      type="button"
+    >
+      <span>{label}</span>
+      {shortcut ? <span className="text-white/38">{shortcut}</span> : null}
+    </button>
+  );
+
+  const zoomButtonWidth = zoomPercent < 100 ? 36 : zoomPercent >= 800 ? 44 : 42;
+
   if (compact) {
     return (
       <div
-        className="absolute bottom-4 left-0 z-40 flex items-center gap-1 rounded-r-xl border border-l-0 border-white/9 bg-[#202020]/95 p-1.5 text-white/70 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[8px]"
+        className="fixed bottom-4 left-0 z-40 flex items-center gap-1 rounded-r-xl border border-l-0 border-white/9 bg-[#202020]/95 p-1.5 text-white/70 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[8px]"
         data-canvas-overlay="true"
       >
         <button className="flex h-7 w-10 items-center justify-center rounded-lg bg-white/10 transition-colors hover:bg-white/14" type="button">
@@ -6569,42 +12082,81 @@ function ZoomDock({
   }
 
   return (
-    <div className="absolute bottom-5 left-5 z-40" data-canvas-overlay="true">
-      <div style={{ transform: `scale(${OFFICIAL_ZOOM_DOCK_SCALE})`, transformOrigin: "bottom left" }}>
-        {overviewOpen ? (
-          <CanvasOverviewPopover nodes={nodes} selectedNodeId={selectedNodeId || null} />
-        ) : null}
-        <div className="flex h-[54px] items-center gap-1 rounded-[14px] border border-white/9 bg-[#202020]/95 px-2 text-white/74 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[10px]">
-          <ZoomDockButton active={overviewOpen} label="画布总览" onClick={onToggleOverview}>
+    <div className="fixed bottom-3 left-4 z-40 flex items-end gap-2" data-canvas-overlay="true">
+      <div
+        className="flex items-center gap-1 rounded-xl bg-[#141414]/70 p-[6px] text-white/74 shadow-[0_18px_48px_rgba(0,0,0,0.38)] backdrop-blur-[10px]"
+        style={{ transform: assetManagerOpen ? `translateX(${assetManagerWidth}px)` : undefined }}
+      >
+        {assetManagerOpen ? null : (
+          <ZoomDockButton label="资产管理" onClick={onToggleAssetManager} wide>
+            <AssetGlyph />
+          </ZoomDockButton>
+        )}
+        <ZoomDockButton label="整理画布，Option+Shift+F" onClick={onArrange}>
+          <ArrangeCanvasGlyph />
+        </ZoomDockButton>
+        <div className="relative h-7 w-7">
+          {overviewOpen ? (
+            <CanvasOverviewPopover
+              nodes={nodes}
+              selectedNodeId={selectedNodeId || null}
+              viewport={viewport}
+              onViewportChange={onViewportChange}
+            />
+          ) : null}
+          <ZoomDockButton active={overviewOpen} label="切换小地图" onClick={onToggleOverview}>
             <GridTilesGlyph />
           </ZoomDockButton>
-          <ZoomDockButton active={Boolean(selectedNodeId)} label="定位选中" onClick={onCenter} selectedOutline>
-            <MapPinGlyph />
-          </ZoomDockButton>
-          <ZoomDockButton active={snapEnabled} label={snapEnabled ? "吸附已开启" : "吸附已关闭"} onClick={onToggleSnap}>
-            <MagnetGlyph />
-          </ZoomDockButton>
-          <div className="mx-1 h-7 w-px bg-white/10" />
+        </div>
+        <ZoomDockButton active={edgesHidden} label={edgesHidden ? "显示节点连线" : "隐藏节点连线"} onClick={onToggleEdges}>
+          <EdgeVisibilityGlyph hidden={edgesHidden} />
+        </ZoomDockButton>
+        <ZoomDockButton label="网格吸附" onClick={onToggleSnap}>
+          <MagnetGlyph />
+        </ZoomDockButton>
+        <div className="relative h-7" ref={zoomMenuRef} style={{ width: zoomButtonWidth }}>
+          {zoomMenuOpen ? (
+            <div
+              aria-label="缩放选项"
+              className="absolute bottom-9 left-[-72px] z-[300] w-[187px] rounded-xl border-[0.5px] border-[#363636] bg-[#262626] p-[6px] text-[13px] text-white shadow-[0_8px_32px_rgba(0,0,0,0.15),0_2px_8px_rgba(0,0,0,0.1)]"
+              role="menu"
+            >
+              <label className="mb-[6px] flex h-8 w-full items-center rounded-lg bg-white/10 px-[9px] text-white/88">
+                <input
+                  aria-label="缩放比例"
+                  className="h-5 min-w-0 flex-1 bg-transparent text-[13px] leading-5 text-white outline-none placeholder:text-white/30"
+                  inputMode="decimal"
+                  onChange={(event) => setZoomInputValue(event.target.value.replace(/[^\d.]/g, ""))}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      commitZoomInput();
+                    }
+                  }}
+                  value={zoomInputValue}
+                />
+                <span className="pl-1 text-white/60">%</span>
+              </label>
+              {renderZoomMenuItem("放大", "⌘+", () => applyZoom(zoom + CANVAS_ZOOM_STEP))}
+              {renderZoomMenuItem("缩小", "⌘-", () => applyZoom(zoom - CANVAS_ZOOM_STEP))}
+              {renderZoomMenuItem("适合屏幕", "⌘0", onCenter)}
+              <div className="mx-1 my-[5px] h-px bg-white/10" />
+              {renderZoomMenuItem("缩放至50%", null, () => applyZoom(0.5))}
+              {renderZoomMenuItem("缩放至100%", null, () => applyZoom(1))}
+              {renderZoomMenuItem("缩放至800%", null, () => applyZoom(8))}
+            </div>
+          ) : null}
           <button
-            className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-[10px] text-[21px] leading-none text-white/72 transition-colors hover:bg-white/8 hover:text-white"
-            onClick={onZoomOut}
+            aria-expanded={zoomMenuOpen}
+            aria-haspopup="menu"
+            aria-label="缩放选项"
+            className="flex h-7 cursor-pointer items-center justify-center rounded-lg px-1 text-[13px] leading-normal text-white/84 transition-colors hover:bg-white/10 hover:text-white"
+            onClick={() => setZoomMenuOpen((value) => !value)}
+            style={{ width: zoomButtonWidth }}
+            title="缩放选项"
             type="button"
           >
-            -
-          </button>
-          <button
-            className="h-10 min-w-[68px] cursor-pointer rounded-[10px] px-2 text-center text-[16px] font-medium tabular-nums leading-[40px] text-white/86 transition-colors hover:bg-white/8"
-            onClick={onCenter}
-            type="button"
-          >
-            {Math.round(zoom * 100)}%
-          </button>
-          <button
-            className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-[10px] text-[23px] leading-none text-white/82 transition-colors hover:bg-white/8 hover:text-white"
-            onClick={onZoomIn}
-            type="button"
-          >
-            +
+            {zoomPercent}%
           </button>
         </div>
       </div>
@@ -6612,73 +12164,214 @@ function ZoomDock({
   );
 }
 
+function ArrangeCanvasConfirm({
+  assetManagerOpen,
+  assetManagerWidth = ASSET_MANAGER_DEFAULT_WIDTH,
+  onKeep,
+  onRestore,
+}: {
+  assetManagerOpen?: boolean;
+  assetManagerWidth?: number;
+  onKeep: () => void;
+  onRestore: () => void;
+}) {
+  return (
+    <div
+      className="fixed bottom-[55px] z-[300] w-[168px] rounded-xl bg-[#262626] p-3 text-[13px] text-white shadow-[0_8px_32px_rgba(0,0,0,0.15),0_2px_8px_rgba(0,0,0,0.1)]"
+      data-canvas-overlay="true"
+      style={{ left: assetManagerOpen ? assetManagerWidth - 48 : 50 }}
+    >
+      <p className="leading-5 text-white/88">是否保留此次整理结果？</p>
+      <div className="mt-3 flex justify-end gap-2">
+        <button
+          className="h-8 rounded-lg px-3 py-1.5 text-[13px] leading-normal text-white transition-colors hover:bg-white/10"
+          onClick={onRestore}
+          type="button"
+        >
+          还原
+        </button>
+        <button
+          className="h-8 rounded-lg bg-white/15 px-3 py-1.5 text-[13px] leading-normal text-white transition-colors hover:bg-white/10"
+          onClick={onKeep}
+          type="button"
+        >
+          保留
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function ZoomDockButton({
   active,
   children,
   label,
   onClick,
-  selectedOutline,
+  wide,
 }: {
   active?: boolean;
   children: ReactNode;
   label: string;
   onClick?: () => void;
-  selectedOutline?: boolean;
+  wide?: boolean;
 }) {
   return (
     <button
+      aria-label={label}
       className={cn(
-        "flex h-10 w-10 cursor-pointer items-center justify-center rounded-[10px] text-white/74 transition-colors hover:bg-white/10 hover:text-white",
-        active && "bg-white/10 text-white",
-        active && selectedOutline && "bg-transparent shadow-[0_0_0_2px_#8dc5ff]"
+        "flex h-7 cursor-pointer items-center justify-center rounded-lg text-white/74 transition-colors hover:bg-white/10 hover:text-white",
+        wide ? "w-[94px] gap-1.5 px-2 text-[13px]" : "w-7",
+        active && "bg-white/15 text-white"
       )}
       onClick={onClick}
       title={label}
       type="button"
     >
       {children}
+      {wide ? <span className="whitespace-nowrap leading-none">{label}</span> : null}
     </button>
   );
 }
 
-function CanvasOverviewPopover({ nodes, selectedNodeId }: { nodes: CloneNode[]; selectedNodeId: string | null }) {
-  const bounds = useMemo(() => {
+function CanvasOverviewPopover({
+  nodes,
+  onViewportChange,
+  selectedNodeId,
+  viewport,
+}: {
+  nodes: CloneNode[];
+  onViewportChange: (viewport: { x: number; y: number; zoom: number }) => void;
+  selectedNodeId: string | null;
+  viewport: { x: number; y: number; zoom: number };
+}) {
+  const [draggingPointerId, setDraggingPointerId] = useState<number | null>(null);
+  const map = useMemo(() => {
     if (nodes.length === 0) return null;
     const minX = Math.min(...nodes.map((node) => node.x));
     const minY = Math.min(...nodes.map((node) => node.y));
     const maxX = Math.max(...nodes.map((node) => node.x + node.width));
     const maxY = Math.max(...nodes.map((node) => node.y + node.height));
-    return { minX, minY, maxX, maxY, width: Math.max(1, maxX - minX), height: Math.max(1, maxY - minY) };
+    const width = Math.max(1, maxX - minX);
+    const height = Math.max(1, maxY - minY);
+    const scale = Math.min(130 / width, 90 / height);
+    const renderedWidth = width * scale;
+    const renderedHeight = height * scale;
+    return {
+      height,
+      minX,
+      minY,
+      offsetX: (150 - renderedWidth) / 2,
+      offsetY: (110 - renderedHeight) / 2,
+      scale,
+      width,
+    };
   }, [nodes]);
-  const scale = bounds ? Math.min(188 / bounds.width, 112 / bounds.height) : 1;
+
+  const panToMiniPoint = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!map) return;
+      const rect = event.currentTarget.getBoundingClientRect();
+      const worldX = map.minX + (event.clientX - rect.left - map.offsetX) / map.scale;
+      const worldY = map.minY + (event.clientY - rect.top - map.offsetY) / map.scale;
+      onViewportChange({
+        x: Math.round(window.innerWidth / 2 - worldX * viewport.zoom),
+        y: Math.round(window.innerHeight / 2 - worldY * viewport.zoom),
+        zoom: viewport.zoom,
+      });
+    },
+    [map, onViewportChange, viewport.zoom]
+  );
+
+  const viewportWidth = typeof window === "undefined" ? 0 : window.innerWidth;
+  const viewportHeight = typeof window === "undefined" ? 0 : window.innerHeight;
+  const miniViewBox = map
+    ? {
+        height: 110 / map.scale,
+        width: 150 / map.scale,
+        x: map.minX - map.offsetX / map.scale,
+        y: map.minY - map.offsetY / map.scale,
+      }
+    : null;
+  const viewportWorldRect = map && viewportWidth > 0 && viewportHeight > 0
+    ? {
+        height: viewportHeight / viewport.zoom,
+        left: -viewport.x / viewport.zoom,
+        top: -viewport.y / viewport.zoom,
+        width: viewportWidth / viewport.zoom,
+      }
+    : null;
+  const minimapMaskPath =
+    miniViewBox && viewportWorldRect
+      ? [
+          `M${miniViewBox.x},${miniViewBox.y}h${miniViewBox.width}v${miniViewBox.height}h-${miniViewBox.width}z`,
+          `M${viewportWorldRect.left},${viewportWorldRect.top}h${viewportWorldRect.width}v${viewportWorldRect.height}h-${viewportWorldRect.width}z`,
+        ].join("\n        ")
+      : "";
 
   return (
-    <div className="mb-3 w-[232px] rounded-[16px] border border-white/10 bg-[#202020]/96 p-3 shadow-[0_20px_60px_rgba(0,0,0,0.42)] backdrop-blur-[12px]">
-      <div className="mb-2 flex items-center justify-between text-[12px] text-white/52">
-        <span>画布总览</span>
-        <span>{nodes.length} 个节点</span>
-      </div>
-      <div className="relative h-[124px] overflow-hidden rounded-[10px] border border-white/8 bg-[#111]">
-        <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.2)_1px,transparent_1px)] bg-[length:12px_12px] opacity-25" />
-        {bounds ? (
-          nodes.map((node) => (
-            <span
-              className={cn(
-                "absolute rounded-[3px] border border-white/18 bg-white/18",
-                node.id === selectedNodeId && "border-[#8dc5ff] bg-[#8dc5ff]/42"
-              )}
-              key={node.id}
-              style={{
-                height: Math.max(5, node.height * scale),
-                left: 14 + (node.x - bounds.minX) * scale,
-                top: 8 + (node.y - bounds.minY) * scale,
-                width: Math.max(8, node.width * scale),
-              }}
-            />
-          ))
-        ) : (
-          <div className="absolute inset-0 flex items-center justify-center text-[12px] text-white/34">暂无节点</div>
-        )}
+    <div className="absolute bottom-9 left-0 z-50 rounded-xl">
+      <div
+        aria-label="Mini Map"
+        className="react-flow__panel react-flow__minimap bottom right relative h-[110px] w-[150px] rounded-xl text-transparent"
+        onPointerDown={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          event.currentTarget.setPointerCapture(event.pointerId);
+          setDraggingPointerId(event.pointerId);
+          panToMiniPoint(event);
+        }}
+        onPointerMove={(event) => {
+          if (draggingPointerId !== event.pointerId) return;
+          event.preventDefault();
+          event.stopPropagation();
+          panToMiniPoint(event);
+        }}
+        onPointerUp={(event) => {
+          if (draggingPointerId === event.pointerId) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+            setDraggingPointerId(null);
+          }
+        }}
+      >
+        <span className="sr-only">Mini Map</span>
+        {map && miniViewBox ? (
+          <svg
+            className="react-flow__minimap-svg"
+            height={110}
+            role="img"
+            viewBox={`${miniViewBox.x} ${miniViewBox.y} ${miniViewBox.width} ${miniViewBox.height}`}
+            width={150}
+          >
+            <title>Mini Map</title>
+            {nodes.map((node) => (
+              <rect
+                className={cn("react-flow__minimap-node", node.id === selectedNodeId && "selected")}
+                height={node.height}
+                key={node.id}
+                rx={2}
+                ry={2}
+                style={{
+                  fill:
+                    node.id === selectedNodeId
+                      ? "rgba(255,255,255,0.46)"
+                      : "var(--canvas-minimap-node, rgba(255,255,255,0.22))",
+                }}
+                width={node.width}
+                x={node.x}
+                y={node.y}
+              />
+            ))}
+            {minimapMaskPath ? (
+              <path
+                className="react-flow__minimap-mask"
+                d={minimapMaskPath}
+                fillRule="evenodd"
+                pointerEvents="none"
+                style={{ fill: "rgba(255,255,255,0.04)" }}
+              />
+            ) : null}
+          </svg>
+        ) : null}
       </div>
     </div>
   );
@@ -6803,20 +12496,30 @@ function WorkflowGlyph() {
   );
 }
 
-function GridTilesGlyph() {
+function ArrangeCanvasGlyph() {
   return (
-    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="currentColor" viewBox="0 0 16 16">
-      <path d="M5.13379 8.33887C6.00346 8.33899 6.70886 9.04342 6.70898 9.91309V11.4883C6.70887 12.358 6.00347 13.0634 5.13379 13.0635H2.50879C1.6391 13.0634 0.933703 12.358 0.933594 11.4883V9.91309C0.933717 9.04341 1.63911 8.33898 2.50879 8.33887H5.13379ZM11.4922 6.23828C12.3619 6.23839 13.0674 6.94369 13.0674 7.81348V11.4883C13.0673 12.358 12.3619 13.0634 11.4922 13.0635H8.86719C7.99746 13.0634 7.2921 12.358 7.29199 11.4883V7.81348C7.29199 6.94367 7.99739 6.23834 8.86719 6.23828H11.4922ZM2.45508 9.3916C2.19053 9.41859 1.98351 9.64144 1.9834 9.91309V11.4883C1.9835 11.7599 2.19051 11.9838 2.45508 12.0107L2.50879 12.0137H5.13379L5.1875 12.0107C5.45212 11.9838 5.6581 11.76 5.6582 11.4883V9.91309C5.65809 9.64141 5.4521 9.41854 5.1875 9.3916L5.13379 9.38867H2.50879L2.45508 9.3916ZM8.86719 7.28809C8.57729 7.28815 8.34277 7.52356 8.34277 7.81348V11.4883L8.34473 11.542C8.36987 11.789 8.56642 11.9857 8.81348 12.0107L8.86719 12.0137H11.4922L11.5459 12.0107C11.7929 11.9856 11.9895 11.789 12.0146 11.542L12.0176 11.4883V7.81348C12.0176 7.52359 11.782 7.2882 11.4922 7.28809H8.86719ZM5.13379 0.929688C6.00347 0.929811 6.70887 1.6352 6.70898 2.50488V6.17969C6.70892 7.04941 6.00349 7.75476 5.13379 7.75488H2.50879C1.63907 7.75477 0.933655 7.04942 0.933594 6.17969V2.50488C0.933704 1.6352 1.6391 0.929797 2.50879 0.929688H5.13379ZM2.45508 1.98242C2.19052 2.0094 1.9835 2.23322 1.9834 2.50488V6.17969L1.98633 6.2334C2.01141 6.48042 2.20808 6.67697 2.45508 6.70215L2.50879 6.70508H5.13379L5.1875 6.70215C5.43455 6.67702 5.63116 6.48045 5.65625 6.2334L5.6582 6.17969V2.50488C5.6581 2.23318 5.45212 2.00935 5.1875 1.98242L5.13379 1.97949H2.50879L2.45508 1.98242ZM11.4922 0.929688C12.3619 0.929797 13.0673 1.63519 13.0674 2.50488V4.08008C13.0671 4.94966 12.3618 5.65419 11.4922 5.6543H8.86719C7.99754 5.65424 7.29223 4.94968 7.29199 4.08008V2.50488C7.2921 1.63517 7.99746 0.929749 8.86719 0.929688H11.4922ZM8.86719 1.97949C8.57736 1.97955 8.34288 2.21506 8.34277 2.50488V4.08008L8.34473 4.13379C8.37172 4.39837 8.59549 4.60443 8.86719 4.60449H11.4922C11.7638 4.60439 11.9877 4.39835 12.0146 4.13379L12.0176 4.08008V2.50488C12.0175 2.21509 11.782 1.9796 11.4922 1.97949H8.86719Z" />
+    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="none" viewBox="0 0 18 18">
+      <path d="M3.1 5.1h4.1M10.8 5.1h4.1M5.1 3.1v4.1M12.9 3.1v4.1M3.1 12.9h4.1M10.8 12.9h4.1M5.1 10.8v4.1M12.9 10.8v4.1" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
+      <path d="M6.4 6.4 11.6 11.6M11.6 6.4 6.4 11.6" stroke="currentColor" strokeLinecap="round" strokeOpacity="0.58" strokeWidth="1.25" />
     </svg>
   );
 }
 
-function MapPinGlyph() {
+function EdgeVisibilityGlyph({ hidden }: { hidden: boolean }) {
   return (
-    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="none" viewBox="0 0 22 22">
-      <path d="M10.9 1C7.59 1 4.9 3.67 4.9 6.96c0 4.35 5.15 8.65 5.37 8.83.36.3.89.3 1.25 0 .22-.18 5.37-4.48 5.37-8.83C16.9 3.67 14.21 1 10.9 1Z" stroke="currentColor" strokeWidth="1.8" />
-      <path d="M10.9 9.25a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z" stroke="currentColor" strokeWidth="1.8" />
-      <path d="M6.9 13h-2.8a1.1 1.1 0 0 0-1.04.75L1.4 18.75A1.1 1.1 0 0 0 2.45 20.2h16.9a1.1 1.1 0 0 0 1.05-1.45l-1.66-5a1.1 1.1 0 0 0-1.04-.75h-2.8" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
+    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="none" viewBox="0 0 18 18">
+      <path d="M3.2 9.1c2.5-3.1 5.7-3.1 8.2 0" stroke="currentColor" strokeLinecap="round" strokeWidth="1.65" />
+      <path d="M6.6 9.05a2.15 2.15 0 0 0 4.3 0" stroke="currentColor" strokeLinecap="round" strokeWidth="1.65" />
+      <path d="M11.4 9.1c1.2-.05 2.35.44 3.4 1.48" stroke="currentColor" strokeLinecap="round" strokeWidth="1.65" />
+      {hidden ? <path d="M3.2 14.8 14.8 3.2" stroke="currentColor" strokeLinecap="round" strokeWidth="1.65" /> : null}
+    </svg>
+  );
+}
+
+function GridTilesGlyph() {
+  return (
+    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="currentColor" viewBox="0 0 16 16">
+      <path d="M5.13379 8.33887C6.00346 8.33899 6.70886 9.04342 6.70898 9.91309V11.4883C6.70887 12.358 6.00347 13.0634 5.13379 13.0635H2.50879C1.6391 13.0634 0.933703 12.358 0.933594 11.4883V9.91309C0.933717 9.04341 1.63911 8.33898 2.50879 8.33887H5.13379ZM11.4922 6.23828C12.3619 6.23839 13.0674 6.94369 13.0674 7.81348V11.4883C13.0673 12.358 12.3619 13.0634 11.4922 13.0635H8.86719C7.99746 13.0634 7.2921 12.358 7.29199 11.4883V7.81348C7.29199 6.94367 7.99739 6.23834 8.86719 6.23828H11.4922ZM2.45508 9.3916C2.19053 9.41859 1.98351 9.64144 1.9834 9.91309V11.4883C1.9835 11.7599 2.19051 11.9838 2.45508 12.0107L2.50879 12.0137H5.13379L5.1875 12.0107C5.45212 11.9838 5.6581 11.76 5.6582 11.4883V9.91309C5.65809 9.64141 5.4521 9.41854 5.1875 9.3916L5.13379 9.38867H2.50879L2.45508 9.3916ZM8.86719 7.28809C8.57729 7.28815 8.34277 7.52356 8.34277 7.81348V11.4883L8.34473 11.542C8.36987 11.789 8.56642 11.9857 8.81348 12.0107L8.86719 12.0137H11.4922L11.5459 12.0107C11.7929 11.9856 11.9895 11.789 12.0146 11.542L12.0176 11.4883V7.81348C12.0176 7.52359 11.782 7.2882 11.4922 7.28809H8.86719ZM5.13379 0.929688C6.00347 0.929811 6.70887 1.6352 6.70898 2.50488V6.17969C6.70892 7.04941 6.00349 7.75476 5.13379 7.75488H2.50879C1.63907 7.75477 0.933655 7.04942 0.933594 6.17969V2.50488C0.933704 1.6352 1.6391 0.929797 2.50879 0.929688H5.13379ZM2.45508 1.98242C2.19052 2.0094 1.9835 2.23322 1.9834 2.50488V6.17969L1.98633 6.2334C2.01141 6.48042 2.20808 6.67697 2.45508 6.70215L2.50879 6.70508H5.13379L5.1875 6.70215C5.43455 6.67702 5.63116 6.48045 5.65625 6.2334L5.6582 6.17969V2.50488C5.6581 2.23318 5.45212 2.00935 5.1875 1.98242L5.13379 1.97949H2.50879L2.45508 1.98242ZM11.4922 0.929688C12.3619 0.929797 13.0673 1.63519 13.0674 2.50488V4.08008C13.0671 4.94966 12.3618 5.65419 11.4922 5.6543H8.86719C7.99754 5.65424 7.29223 4.94968 7.29199 4.08008V2.50488C7.2921 1.63517 7.99746 0.929749 8.86719 0.929688H11.4922ZM8.86719 1.97949C8.57736 1.97955 8.34288 2.21506 8.34277 2.50488V4.08008L8.34473 4.13379C8.37172 4.39837 8.59549 4.60443 8.86719 4.60449H11.4922C11.7638 4.60439 11.9877 4.39835 12.0146 4.13379L12.0176 4.08008V2.50488C12.0175 2.21509 11.782 1.9796 11.4922 1.97949H8.86719Z" />
     </svg>
   );
 }
@@ -7056,6 +12759,744 @@ function VideoToolbarActionButton({
   );
 }
 
+function OfficialVideoMediaToolbar({
+  activeMode,
+  analysisLoading = false,
+  anchor,
+  audioSplitLoading = false,
+  onAnalyze,
+  onAudioVideoSplit,
+  onHdOption,
+  onSubtitleErase,
+  onToggleCrop,
+  onToggleClip,
+  onVoiceSplit,
+}: {
+  activeMode: VideoToolbarMode;
+  analysisLoading?: boolean;
+  anchor?: PresetControlAnchor;
+  audioSplitLoading?: boolean;
+  onAnalyze: () => void;
+  onAudioVideoSplit: () => void;
+  onHdOption: (option: string) => void;
+  onSubtitleErase: (mode: SubtitleEraseMode) => void;
+  onToggleCrop: () => void;
+  onToggleClip: () => void;
+  onVoiceSplit: (mode: Extract<VideoAudioSplitMode, "voice" | "background">) => void;
+}) {
+  const [menu, setMenu] = useState<VideoToolbarMenu>(null);
+
+  return (
+    <div
+      className="pointer-events-auto absolute flex h-[58px] items-center gap-1 rounded-[14px] border border-white/8 bg-[#262626]/96 px-2 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
+      data-canvas-overlay="true"
+      style={
+        anchor
+          ? {
+              left: anchor.centerX,
+              top: anchor.topY - (24 * anchor.zoom + 10),
+              transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
+              transformOrigin: "bottom center",
+            }
+          : {
+              left: "50%",
+              top: 168,
+              transform: `translateX(-50%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
+              transformOrigin: "top center",
+            }
+      }
+    >
+      <OfficialVideoToolbarButton
+        active={activeMode === "clip"}
+        icon={<Scissors className="h-[18px] w-[18px]" strokeWidth={2.1} />}
+        label="剪辑"
+        onClick={() => {
+          setMenu(null);
+          onToggleClip();
+        }}
+      />
+      <OfficialVideoToolbarButton
+        active={activeMode === "crop"}
+        icon={<SceneToolIcon kind="crop" />}
+        label="裁剪"
+        onClick={() => {
+          setMenu(null);
+          onToggleCrop();
+        }}
+      />
+      <div className="relative">
+        <OfficialVideoToolbarButton
+          active={menu === "hd"}
+          dropdown
+          icon={<Sparkles className="h-[18px] w-[18px]" strokeWidth={2.1} />}
+          label="高清"
+          onClick={() => setMenu((current) => current === "hd" ? null : "hd")}
+        />
+        {menu === "hd" ? (
+          <VideoHdSettingsPopover
+            onSelect={(option) => {
+              setMenu(null);
+              onHdOption(option);
+            }}
+          />
+        ) : null}
+      </div>
+      <OfficialVideoToolbarButton
+        active={activeMode === "analysis" || analysisLoading}
+        disabled={analysisLoading}
+        icon={<VideoAnalysisGlyph />}
+        label={analysisLoading ? "解析中" : "解析"}
+        onClick={() => {
+          setMenu(null);
+          onAnalyze();
+        }}
+      />
+      <div className="relative">
+        <OfficialVideoToolbarButton
+          active={menu === "subtitle" || activeMode === "subtitleErase"}
+          dropdown
+          icon={<Wand2 className="h-[18px] w-[18px]" strokeWidth={2.1} />}
+          label="智能去字幕"
+          onClick={() => setMenu((current) => current === "subtitle" ? null : "subtitle")}
+        />
+        {menu === "subtitle" ? (
+          <VideoToolbarMenuPopover width={220}>
+            <div className="px-2.5 pb-1.5 pt-1 text-[11px] leading-4 text-white/38">
+              AI一键去除视频字幕，仅支持中英文字幕
+            </div>
+            <VideoToolbarMenuItem
+              icon={<Wand2 className="h-4 w-4" strokeWidth={2.1} />}
+              label="智能擦除"
+              onClick={() => {
+                setMenu(null);
+                onSubtitleErase("smart");
+              }}
+            />
+            <VideoToolbarMenuItem
+              icon={<BoxSelect className="h-4 w-4" strokeWidth={2.1} />}
+              label="框选擦除"
+              onClick={() => {
+                setMenu(null);
+                onSubtitleErase("region");
+              }}
+            />
+          </VideoToolbarMenuPopover>
+        ) : null}
+      </div>
+      <div className="relative">
+        <OfficialVideoToolbarButton
+          active={menu === "audio" || audioSplitLoading}
+          disabled={audioSplitLoading}
+          dropdown
+          icon={<Headphones className="h-[18px] w-[18px]" strokeWidth={2.1} />}
+          label={audioSplitLoading ? "分离中" : "音频分离"}
+          onClick={() => setMenu((current) => current === "audio" ? null : "audio")}
+        />
+        {menu === "audio" ? (
+          <VideoToolbarMenuPopover width={168}>
+            <div className="group relative">
+              <div className="flex min-h-9 w-full items-center gap-2 rounded-[8px] px-2.5 py-2 text-left text-[13px] text-white/82 transition group-hover:bg-white/8 group-hover:text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center text-white/46">
+                  <Music2 className="h-4 w-4" strokeWidth={2.1} />
+                </span>
+                <span className="min-w-0 flex-1 truncate">人声分离</span>
+                <ChevronRight className="h-3.5 w-3.5 shrink-0 text-white/44" />
+              </div>
+              <VideoToolbarSubmenu width={168}>
+                <VideoToolbarMenuItem
+                  icon={<Music2 className="h-4 w-4" strokeWidth={2.1} />}
+                  label="仅保留人声"
+                  onClick={() => {
+                    setMenu(null);
+                    onVoiceSplit("voice");
+                  }}
+                />
+                <VideoToolbarMenuItem
+                  icon={<Headphones className="h-4 w-4" strokeWidth={2.1} />}
+                  label="仅保留背景音"
+                  onClick={() => {
+                    setMenu(null);
+                    onVoiceSplit("background");
+                  }}
+                />
+              </VideoToolbarSubmenu>
+            </div>
+            <VideoToolbarMenuItem
+              description="分离内嵌音轨为独立音频节点"
+              icon={<GitBranch className="h-4 w-4" strokeWidth={2.1} />}
+              label="音视频分离"
+              onClick={() => {
+                setMenu(null);
+                onAudioVideoSplit();
+              }}
+            />
+          </VideoToolbarMenuPopover>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function OfficialVideoToolbarButton({
+  active = false,
+  disabled = false,
+  dropdown = false,
+  icon,
+  label,
+  onClick,
+}: {
+  active?: boolean;
+  disabled?: boolean;
+  dropdown?: boolean;
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      className={cn(
+        "flex h-10 items-center gap-1.5 rounded-[10px] px-2.5 text-white/84 transition hover:bg-white/8 hover:text-white",
+        active && "bg-white/10 text-white ring-1 ring-[#76b3ff]",
+        disabled && "cursor-wait opacity-72 hover:bg-white/10 hover:text-white"
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      type="button"
+    >
+      <span className="flex h-5 w-5 items-center justify-center">{icon}</span>
+      <span className="whitespace-nowrap text-[15px]">{label}</span>
+      {dropdown ? <ChevronDown className="h-3.5 w-3.5 text-white/46" /> : null}
+    </button>
+  );
+}
+
+function VideoHdSettingsPopover({ onSelect }: { onSelect: (option: string) => void }) {
+  return (
+    <div className="absolute left-0 top-[calc(100%+10px)] z-50 w-[267px] rounded-[12px] border border-white/10 bg-[#202020]/98 p-2 text-white shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px]">
+      <button
+        className="mb-2 flex h-8 w-full items-center justify-between rounded-[8px] border border-white/10 bg-white/[0.03] px-3 text-[13px] text-white/82 hover:bg-white/8"
+        onClick={() => onSelect("Topazlabs")}
+        type="button"
+      >
+        <span>Topazlabs</span>
+        <ChevronDown className="h-3.5 w-3.5 text-white/46" />
+      </button>
+      <div className="mb-2 flex gap-1">
+        {["1080P", "2K", "4K"].map((option, index) => (
+          <button
+            className={cn(
+              "flex h-8 flex-1 items-center justify-center rounded-[8px] border text-[13px]",
+              index === 0 ? "border-white/26 bg-white/12 text-white" : "border-white/10 bg-white/[0.03] text-white/66 hover:bg-white/8"
+            )}
+            key={option}
+            onClick={() => onSelect(option)}
+            type="button"
+          >
+            {option}
+          </button>
+        ))}
+      </div>
+      <button
+        className="mb-2 flex h-8 w-full items-center justify-between rounded-[8px] border border-white/10 bg-white/[0.03] px-3 text-[13px] text-white/82 hover:bg-white/8"
+        onClick={() => onSelect("不补帧")}
+        type="button"
+      >
+        <span>不补帧</span>
+        <ChevronDown className="h-3.5 w-3.5 text-white/46" />
+      </button>
+      <button
+        className="flex h-8 w-full items-center justify-between rounded-[8px] border border-white/10 bg-white/[0.03] px-3 text-[13px] text-white/82 hover:bg-white/8"
+        onClick={() => onSelect("1x")}
+        type="button"
+      >
+        <span>1x</span>
+        <ChevronDown className="h-3.5 w-3.5 text-white/46" />
+      </button>
+    </div>
+  );
+}
+
+function VideoToolbarMenuPopover({
+  children,
+  width,
+}: {
+  children: ReactNode;
+  width: number;
+}) {
+  return (
+    <div
+      className="absolute left-0 top-[calc(100%+10px)] z-50 overflow-visible rounded-[10px] border border-white/10 bg-[#202020]/98 p-1.5 text-white shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px]"
+      style={{ width }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function VideoToolbarSubmenu({
+  children,
+  width,
+}: {
+  children: ReactNode;
+  width: number;
+}) {
+  return (
+    <div
+      className="invisible absolute left-[calc(100%+8px)] top-0 z-50 rounded-[10px] border border-white/10 bg-[#202020]/98 p-1.5 text-white opacity-0 shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px] transition group-hover:visible group-hover:opacity-100"
+      style={{ width }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function VideoToolbarMenuItem({
+  description,
+  icon,
+  label,
+  onClick,
+}: {
+  description?: string;
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      className="flex min-h-9 w-full items-center gap-2 rounded-[8px] px-2.5 py-2 text-left text-[13px] text-white/82 transition hover:bg-white/8 hover:text-white"
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      onPointerDown={(event) => event.stopPropagation()}
+      title={description}
+      type="button"
+    >
+      <span className="flex h-5 w-5 shrink-0 items-center justify-center text-white/46">{icon}</span>
+      <span className="min-w-0">
+        <span className="block truncate">{label}</span>
+        {description ? <span className="mt-0.5 block truncate text-[11px] text-white/34">{description}</span> : null}
+      </span>
+    </button>
+  );
+}
+
+function VideoInlineActionBar({
+  actionLabel,
+  anchor,
+  applyBusyLabel,
+  applyIcon = "check",
+  applyLabel,
+  applyLoading = false,
+  costLabel,
+  onApply,
+  onClose,
+  title,
+}: {
+  actionLabel: string;
+  anchor?: PresetControlAnchor;
+  applyBusyLabel?: string;
+  applyIcon?: "check" | "upload";
+  applyLabel: string;
+  applyLoading?: boolean;
+  costLabel?: string;
+  onApply: () => void;
+  onClose: () => void;
+  title: string;
+}) {
+  const ApplyIcon = applyIcon === "upload" ? Upload : Check;
+  const buttonLabel = applyLoading && applyBusyLabel ? applyBusyLabel : applyLabel;
+
+  return (
+    <div
+      className="pointer-events-auto absolute overflow-visible"
+      style={
+        anchor
+          ? {
+              left: anchor.centerX,
+              top: anchor.bottomY + 12,
+              transform: "translateX(-50%)",
+            }
+          : {
+              left: "50%",
+              top: 240,
+              transform: "translateX(-50%)",
+            }
+      }
+    >
+      <div className="flex h-[49px] w-max items-center gap-3 rounded-[12px] border border-white/10 bg-[#202020]/98 px-2 py-2 text-white shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px]">
+        <button
+          aria-label={title}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-white/46 transition hover:bg-white/8 hover:text-white"
+          onClick={onClose}
+          type="button"
+        >
+          <X className="h-4 w-4" />
+        </button>
+        <div className="flex h-8 shrink-0 items-center gap-1 px-2 text-[13px] text-white/86">
+          <span className="whitespace-nowrap">{actionLabel}</span>
+        </div>
+        {costLabel ? (
+          <span className="flex min-w-8 shrink-0 items-center justify-center gap-0.5 text-[12px] text-white/46">
+            <LightningGlyph />
+            {costLabel}
+          </span>
+        ) : null}
+        <button
+          aria-label={buttonLabel}
+          className={cn(
+            "flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] bg-white text-black transition hover:bg-white/90",
+            applyLoading && "cursor-default bg-white/88 hover:bg-white/88"
+          )}
+          disabled={applyLoading}
+          onClick={onApply}
+          title={buttonLabel}
+          type="button"
+        >
+          {applyLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" strokeWidth={2.4} />
+          ) : (
+            <ApplyIcon className="h-4 w-4" strokeWidth={2.4} />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function VideoCropSelectionOverlay({
+  anchor,
+  node,
+}: {
+  anchor: PresetControlAnchor;
+  node: CloneNode;
+}) {
+  const nodeWidth = Math.max(1, node.width * anchor.zoom);
+  const nodeHeight = Math.max(1, node.height * anchor.zoom);
+  const cardTop = anchor.topY + 32 * anchor.zoom;
+  const cardHeight = Math.max(1, nodeHeight - 32 * anchor.zoom);
+  const cardLeft = anchor.centerX - nodeWidth / 2;
+  const cropLeft = cardLeft + nodeWidth * VIDEO_CROP_RECT.x;
+  const cropTop = cardTop + cardHeight * VIDEO_CROP_RECT.y;
+  const cropWidth = nodeWidth * VIDEO_CROP_RECT.width;
+  const cropHeight = cardHeight * VIDEO_CROP_RECT.height;
+  const handlePoints = [
+    ["left-0 top-0 -translate-x-1/2 -translate-y-1/2"],
+    ["left-1/2 top-0 -translate-x-1/2 -translate-y-1/2"],
+    ["right-0 top-0 translate-x-1/2 -translate-y-1/2"],
+    ["right-0 top-1/2 -translate-y-1/2 translate-x-1/2"],
+    ["right-0 bottom-0 translate-x-1/2 translate-y-1/2"],
+    ["left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2"],
+    ["left-0 bottom-0 -translate-x-1/2 translate-y-1/2"],
+    ["left-0 top-1/2 -translate-x-1/2 -translate-y-1/2"],
+  ];
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-[31]">
+      <div
+        className="absolute rounded-[4px] border border-white/78 bg-black/10 shadow-[0_0_0_9999px_rgba(0,0,0,0.34)]"
+        style={{ height: cropHeight, left: cropLeft, top: cropTop, width: cropWidth }}
+      >
+        <span className="absolute left-2 top-2 rounded-[5px] bg-black/58 px-1.5 py-0.5 text-[10px] text-white/82">
+          {VIDEO_CROP_INLINE_LABEL}
+        </span>
+        {handlePoints.map(([className]) => (
+          <span
+            className={cn("absolute h-2 w-2 rounded-full border border-white bg-[#1f1f1f]", className)}
+            key={className}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function clampUnit(value: number) {
+  return Math.min(1, Math.max(0, value));
+}
+
+function getVideoCardOverlayRect(anchor: PresetControlAnchor, node: CloneNode) {
+  const nodeWidth = Math.max(1, node.width * anchor.zoom);
+  const nodeHeight = Math.max(1, node.height * anchor.zoom);
+  const cardTop = anchor.topY + 32 * anchor.zoom;
+  const cardHeight = Math.max(1, nodeHeight - 32 * anchor.zoom);
+  return {
+    height: cardHeight,
+    left: anchor.centerX - nodeWidth / 2,
+    top: cardTop,
+    width: nodeWidth,
+  };
+}
+
+function normalizeSubtitleEraseRegion(
+  startX: number,
+  startY: number,
+  currentX: number,
+  currentY: number,
+  id: string
+): SubtitleEraseRegion {
+  const x = clampUnit(Math.min(startX, currentX));
+  const y = clampUnit(Math.min(startY, currentY));
+  const maxX = clampUnit(Math.max(startX, currentX));
+  const maxY = clampUnit(Math.max(startY, currentY));
+  return {
+    height: Math.max(0, maxY - y),
+    id,
+    width: Math.max(0, maxX - x),
+    x,
+    y,
+  };
+}
+
+function VideoSubtitleEraseRegionOverlay({
+  anchor,
+  node,
+  onAddRegion,
+  regions,
+}: {
+  anchor: PresetControlAnchor;
+  node: CloneNode;
+  onAddRegion: (region: SubtitleEraseRegion) => void;
+  regions: SubtitleEraseRegion[];
+}) {
+  const [draftRegion, setDraftRegion] = useState<{
+    currentX: number;
+    currentY: number;
+    pointerId: number;
+    startX: number;
+    startY: number;
+  } | null>(null);
+  const cardRect = getVideoCardOverlayRect(anchor, node);
+  const toNormalizedPoint = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => ({
+      x: clampUnit((event.clientX - cardRect.left) / cardRect.width),
+      y: clampUnit((event.clientY - cardRect.top) / cardRect.height),
+    }),
+    [cardRect.height, cardRect.left, cardRect.top, cardRect.width]
+  );
+  const renderedRegions = draftRegion
+    ? [
+        ...regions,
+        normalizeSubtitleEraseRegion(
+          draftRegion.startX,
+          draftRegion.startY,
+          draftRegion.currentX,
+          draftRegion.currentY,
+          "draft"
+        ),
+      ]
+    : regions;
+  const handlePoints = [
+    "left-0 top-0 -translate-x-1/2 -translate-y-1/2 cursor-nw-resize",
+    "right-0 top-0 translate-x-1/2 -translate-y-1/2 cursor-ne-resize",
+    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 cursor-se-resize",
+    "left-0 bottom-0 -translate-x-1/2 translate-y-1/2 cursor-sw-resize",
+  ];
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-[31]" data-video-subtitle-region-overlay="true">
+      <div
+        className="pointer-events-auto absolute cursor-crosshair overflow-hidden rounded-[12px]"
+        onPointerDown={(event) => {
+          if (event.button !== 0) return;
+          event.preventDefault();
+          event.stopPropagation();
+          const point = toNormalizedPoint(event);
+          event.currentTarget.setPointerCapture(event.pointerId);
+          setDraftRegion({
+            currentX: point.x,
+            currentY: point.y,
+            pointerId: event.pointerId,
+            startX: point.x,
+            startY: point.y,
+          });
+        }}
+        onPointerMove={(event) => {
+          if (!draftRegion || draftRegion.pointerId !== event.pointerId) return;
+          event.preventDefault();
+          event.stopPropagation();
+          const point = toNormalizedPoint(event);
+          setDraftRegion((current) =>
+            current && current.pointerId === event.pointerId
+              ? { ...current, currentX: point.x, currentY: point.y }
+              : current
+          );
+        }}
+        onPointerUp={(event) => {
+          if (!draftRegion || draftRegion.pointerId !== event.pointerId) return;
+          event.preventDefault();
+          event.stopPropagation();
+          const point = toNormalizedPoint(event);
+          const region = normalizeSubtitleEraseRegion(
+            draftRegion.startX,
+            draftRegion.startY,
+            point.x,
+            point.y,
+            makeId("subtitle-region")
+          );
+          setDraftRegion(null);
+          if (region.width >= 0.015 && region.height >= 0.015) {
+            onAddRegion(region);
+          }
+        }}
+        style={{
+          height: cardRect.height,
+          left: cardRect.left,
+          top: cardRect.top,
+          width: cardRect.width,
+        }}
+      >
+        {renderedRegions.map((region) => (
+          <div
+            className="absolute border border-[#0690ae] bg-[#07b8dd]/15"
+            key={region.id}
+            style={{
+              height: `${region.height * 100}%`,
+              left: `${region.x * 100}%`,
+              top: `${region.y * 100}%`,
+              width: `${region.width * 100}%`,
+            }}
+          >
+            {handlePoints.map((className) => (
+              <span
+                className={cn("absolute h-1.5 w-1.5 rounded-full bg-[#09caf5]", className)}
+                key={className}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function VideoSubtitleEraseRegionActionBar({
+  anchor,
+  canRedo,
+  canReset,
+  canUndo,
+  costLabel,
+  onApply,
+  onClose,
+  onRedo,
+  onReset,
+  onUndo,
+  regionCount,
+}: {
+  anchor?: PresetControlAnchor;
+  canRedo: boolean;
+  canReset: boolean;
+  canUndo: boolean;
+  costLabel: string;
+  onApply: () => void;
+  onClose: () => void;
+  onRedo: () => void;
+  onReset: () => void;
+  onUndo: () => void;
+  regionCount: number;
+}) {
+  return (
+    <div
+      className="pointer-events-auto absolute overflow-visible"
+      onPointerDown={(event) => event.stopPropagation()}
+      style={
+        anchor
+          ? {
+              left: anchor.centerX,
+              top: anchor.bottomY + 12,
+              transform: "translateX(-50%)",
+            }
+          : {
+              left: "50%",
+              top: 240,
+              transform: "translateX(-50%)",
+            }
+      }
+    >
+      <div className="flex h-[49px] w-max items-center gap-3 rounded-[12px] border border-white/10 bg-[#202020]/98 px-2 py-2 text-white shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px]">
+        <button
+          aria-label="关闭去字幕生成器"
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-white/46 transition hover:bg-white/8 hover:text-white"
+          onClick={onClose}
+          type="button"
+        >
+          <X className="h-4 w-4" />
+        </button>
+        <div className="h-6 w-px shrink-0 bg-white/10" />
+        <div className="flex h-8 shrink-0 items-center gap-1 px-2 text-[13px] text-white/86">
+          <span className="whitespace-nowrap">框选擦除</span>
+          <span className="group/help relative flex h-4 w-4 cursor-help items-center justify-center text-white/42 transition hover:text-white/80">
+            <HelpCircle className="h-3.5 w-3.5" />
+            <span className="pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 hidden w-[253px] -translate-x-1/2 rounded-[8px] border border-white/10 bg-[#202020]/98 px-3 py-2 text-left text-[12px] leading-5 text-white/72 shadow-[0_14px_40px_rgba(0,0,0,0.42)] group-hover/help:block">
+              <span className="mb-1 block text-white/88">使用方法</span>
+              <span className="block">在画面上拖拽鼠标,框选要擦除的区域</span>
+              <span className="block">支持框选多个区域,所有框内文字将被擦除</span>
+              <span className="block">擦除作用于整段视频,不仅是当前帧</span>
+            </span>
+          </span>
+        </div>
+        <div className="h-6 w-px shrink-0 bg-white/10" />
+        <div className="flex items-center gap-1">
+          <button
+            aria-label="框选区域"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] bg-white/10 text-white transition"
+            type="button"
+          >
+            <BoxSelect className="h-4 w-4" />
+          </button>
+          <VideoRegionBarIconButton ariaLabel="撤销" disabled={!canUndo} icon={<Undo2 className="h-4 w-4" />} onClick={onUndo} />
+          <VideoRegionBarIconButton ariaLabel="重做" disabled={!canRedo} icon={<Redo2 className="h-4 w-4" />} onClick={onRedo} />
+          <VideoRegionBarIconButton ariaLabel="重置" disabled={!canReset} icon={<RotateCcw className="h-4 w-4" />} onClick={onReset} />
+        </div>
+        <span className="flex min-w-8 shrink-0 items-center justify-center gap-0.5 text-[12px] text-white/46">
+          <LightningGlyph />
+          {costLabel}
+        </span>
+        <button
+          aria-label="生成擦除"
+          className={cn(
+            "flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] bg-white text-black transition hover:bg-white/90",
+            regionCount === 0 && "cursor-not-allowed bg-white/34 text-black/40 hover:bg-white/34"
+          )}
+          disabled={regionCount === 0}
+          onClick={onApply}
+          title="生成擦除"
+          type="button"
+        >
+          <Upload className="h-3.5 w-3.5" strokeWidth={2.4} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function VideoRegionBarIconButton({
+  ariaLabel,
+  disabled,
+  icon,
+  onClick,
+}: {
+  ariaLabel: string;
+  disabled: boolean;
+  icon: ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      aria-label={ariaLabel}
+      className={cn(
+        "flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-white/46 transition hover:bg-white/8 hover:text-white",
+        disabled && "cursor-not-allowed text-white/18 hover:bg-transparent hover:text-white/18"
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      type="button"
+    >
+      {icon}
+    </button>
+  );
+}
+
 function VideoAnalysisGlyph() {
   return (
     <svg aria-hidden="true" className="h-[18px] w-[18px]" fill="none" viewBox="0 0 20 20">
@@ -7065,6 +13506,253 @@ function VideoAnalysisGlyph() {
   );
 }
 
+function VideoSubtitleErasePendingCanvasNode({
+  node,
+  onCancel,
+  selected,
+}: {
+  node: CloneNode;
+  onCancel: () => void;
+  selected: boolean;
+}) {
+  const progress = getDraftNumber(node, "generationProgress", 0);
+  const progressLabel = progress > 2 ? `生成中 ${Math.round(progress)}%...` : "生成中...";
+
+  return (
+    <div className="h-full w-full" data-video-subtitle-erase-node="true">
+      <div className="mb-[10px] flex h-7 items-center gap-2 text-[22px] font-semibold leading-none text-white/44">
+        <Wand2 className="h-[22px] w-[22px]" />
+        <span className="truncate">{node.title}</span>
+      </div>
+      <div
+        className={cn(
+          "relative h-[calc(100%-38px)] overflow-hidden rounded-[8px] border border-white/8 bg-[#252525] shadow-[0_16px_38px_rgba(0,0,0,0.24)]",
+          selected && "outline outline-1 outline-white/22"
+        )}
+      >
+        <div className="absolute inset-x-0 top-[72px] flex justify-center text-white/18">
+          <span className="flex h-20 w-20 items-center justify-center rounded-[8px] bg-white/18 text-white/54">
+            <Loader2 className="h-10 w-10 animate-spin" />
+          </span>
+        </div>
+        <div className="absolute inset-x-0 top-[176px] text-center text-[16px] text-white/56">
+          {progressLabel}
+        </div>
+        <button
+          className="absolute bottom-5 left-1/2 h-9 -translate-x-1/2 rounded-[8px] border border-white/10 bg-white/8 px-5 text-[13px] text-white/68 transition hover:bg-white/12 hover:text-white"
+          onClick={(event) => {
+            event.stopPropagation();
+            onCancel();
+          }}
+          onPointerDown={(event) => event.stopPropagation()}
+          type="button"
+        >
+          取消
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function VideoHdUpscaleCanvasNode({
+  node,
+  onGenerate,
+  selected,
+}: {
+  node: CloneNode;
+  onGenerate: () => void;
+  selected: boolean;
+}) {
+  const generationStatus = getDraftString(node, "generationStatus");
+  const isGenerating = generationStatus === "pending";
+  const generated = Boolean(node.draftValues?.generated);
+  const mediaUrl = getNodeMediaUrl(node);
+  const progress = getDraftNumber(node, "generationProgress", 0);
+  const resolution = getDraftString(node, "hdResolution") || "1080P";
+  const outputSizeLabel = getDraftString(node, "outputSizeLabel") || "1920 × 1080";
+
+  return (
+    <div className="h-full w-full" data-video-hd-node="true">
+      <div className="mb-[10px] flex h-7 items-center gap-2 text-[22px] font-semibold leading-none text-white/44">
+        <Sparkles className="h-[22px] w-[22px]" />
+        <span>{node.title}</span>
+      </div>
+      <div
+        className={cn(
+          "relative h-[calc(100%-38px)] overflow-hidden rounded-[8px] border border-white/8 bg-[#252525] shadow-[0_16px_38px_rgba(0,0,0,0.24)]",
+          selected && "outline outline-1 outline-white/22"
+        )}
+      >
+        {generated && mediaUrl ? (
+          <div className="flex h-full flex-col">
+            <div className="flex h-9 items-center justify-between border-white/8 border-b px-3 text-[12px] text-white/46">
+              <span>生成结果</span>
+              <span>{outputSizeLabel}</span>
+            </div>
+            <div className="relative min-h-0 flex-1 bg-black">
+              <video
+                className="h-full w-full object-cover"
+                loop
+                muted
+                playsInline
+                src={mediaUrl}
+              />
+              <span className="absolute left-3 top-3 rounded-[6px] bg-black/62 px-2 py-1 text-[11px] text-white/76">
+                {resolution}
+              </span>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="absolute inset-x-0 top-[74px] flex justify-center text-white/18">
+              <span className="flex h-20 w-20 items-center justify-center rounded-[8px] bg-white/18 text-[#242424]">
+                {isGenerating ? (
+                  <Loader2 className="h-10 w-10 animate-spin text-white/54" />
+                ) : (
+                  <Play className="ml-1 h-11 w-11 fill-current" strokeWidth={0} />
+                )}
+              </span>
+            </div>
+            <div className="absolute inset-x-0 top-[180px] text-center text-[16px] text-white/42">
+              配置参数
+            </div>
+            <div className="absolute inset-x-0 bottom-9 flex justify-center">
+              <button
+                className={cn(
+                  "flex h-10 items-center gap-2 rounded-[10px] bg-white px-4 text-[14px] font-semibold text-black transition hover:bg-white/90",
+                  isGenerating && "cursor-wait opacity-70"
+                )}
+                disabled={isGenerating}
+                onClick={onGenerate}
+                onPointerDown={(event) => event.stopPropagation()}
+                type="button"
+              >
+                {isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
+                {isGenerating ? "生成中" : "生成高清视频"}
+              </button>
+            </div>
+            {isGenerating ? (
+              <div className="absolute bottom-4 left-8 right-8 h-1 overflow-hidden rounded-full bg-white/10">
+                <span className="block h-full rounded-full bg-white/80" style={{ width: `${Math.max(8, Math.min(98, progress))}%` }} />
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function VideoStoryCanvasNode({ node, selected }: { node: CloneNode; selected: boolean }) {
+  const rows = getVideoStoryRows(node);
+  const previewUrl = getDraftString(node, "keyframeUrl");
+  const summary = getDraftString(node, "summary");
+  const error = getDraftString(node, "error");
+  const headers = [
+    "镜号",
+    "开始时间",
+    "结束时间",
+    "时长",
+    "画面描述",
+    "叙事内容",
+    "景别",
+    "摄影机角度",
+    "摄影机运动",
+    "焦距与景深",
+    "光线",
+    "背景音乐",
+    "人声/音效",
+    "图像生成提示词",
+    "视频运动提示词",
+    "关键帧",
+  ];
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] text-white shadow-[0_22px_64px_rgba(0,0,0,0.46)]",
+        selected && "border-[#8b96ff] ring-2 ring-[#8b96ff]/36"
+      )}
+      data-video-story-node="true"
+    >
+      <div className="flex h-11 items-center justify-between gap-3 border-b border-white/8 bg-[#242424] px-4">
+        <div className="flex min-w-0 items-center gap-2 text-[16px] font-semibold text-white/86">
+          <VideoAnalysisGlyph />
+          <span className="truncate">视频故事</span>
+        </div>
+        <span className="shrink-0 rounded-[6px] border border-white/10 px-2 py-0.5 text-[11px] text-white/40">
+          {rows.length || 1} 镜
+        </span>
+      </div>
+      {summary || error ? (
+        <div className="border-b border-white/8 px-4 py-2 text-[12px] leading-5 text-white/48">
+          {error || summary}
+        </div>
+      ) : null}
+      <div className="min-h-0 flex-1 overflow-auto">
+        <div className="min-w-[2470px]">
+          <div className="grid grid-cols-[54px_72px_72px_60px_260px_260px_96px_96px_160px_120px_180px_180px_180px_280px_280px_120px] border-b border-white/8 bg-white/[0.04] text-[12px] text-white/42">
+            {headers.map((header) => (
+              <div className="border-r border-white/8 px-3 py-2 last:border-r-0" key={header}>
+                {header}
+              </div>
+            ))}
+          </div>
+          {rows.length > 0 ? (
+            rows.map((row) => {
+              const cells = [
+                row.shot,
+                row.startTime,
+                row.endTime,
+                row.duration,
+                row.sceneDescription,
+                row.narrative,
+                row.shotSize,
+                row.cameraAngle,
+                row.cameraMovement,
+                row.focusDepth,
+                row.lighting,
+                row.backgroundMusic,
+                row.voiceAndSfx,
+                row.imagePrompt,
+                row.motionPrompt,
+              ];
+              return (
+                <div
+                  className="grid grid-cols-[54px_72px_72px_60px_260px_260px_96px_96px_160px_120px_180px_180px_180px_280px_280px_120px] border-b border-white/6 text-[13px] leading-6 text-white/74 last:border-b-0"
+                  key={row.id}
+                >
+                  {cells.map((cell, index) => (
+                    <div className="border-r border-white/6 px-3 py-3 last:border-r-0" key={`${row.id}-${index}`}>
+                      <span className="line-clamp-5 whitespace-pre-wrap">{cell || "-"}</span>
+                    </div>
+                  ))}
+                  <div className="flex items-center justify-center px-3 py-3">
+                    {row.keyframeUrl || previewUrl ? (
+                      <img
+                        alt=""
+                        className="h-[58px] w-[88px] rounded-[6px] object-cover"
+                        draggable={false}
+                        src={row.keyframeUrl || previewUrl}
+                      />
+                    ) : (
+                      <span className="text-[12px] text-white/28">-</span>
+                    )}
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            <div className="flex h-[260px] items-center justify-center text-[13px] text-white/32">
+              暂无视频故事
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function VideoClipEditorBar({
   anchor,
   clipRange,
@@ -7326,6 +14014,7 @@ function PresetWorkflowControls({
   onComposerSubmit,
   onImageToolAction,
   onPresetSubmit,
+  onStoryToolAction,
   selectedNode,
 }: {
   anchor: PresetControlAnchor;
@@ -7340,6 +14029,7 @@ function PresetWorkflowControls({
   onComposerSubmit: (payload: ComposerSubmitPayload) => void;
   onImageToolAction: (action: ImageToolbarAction, option?: string) => void;
   onPresetSubmit: (prompt: string, settings?: ComposerSettings) => void;
+  onStoryToolAction: (action: StoryToolbarAction) => void;
   selectedNode: CloneNode;
 }) {
   if (isOfficialImagePresetFunctionKey(mode)) {
@@ -7386,11 +14076,11 @@ function PresetWorkflowControls({
       <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
         <PresetFloatingToolbar
           anchor={anchor}
+          compact
           items={[
-            ["拆分场景", "按镜号拆分脚本接口待接入。"],
-            ["生成分镜", "分镜生成接口待接入。"],
-            ["表格视图", "脚本表格视图接口待接入。"],
-            ["导出", "脚本导出接口待接入。"],
+            { label: "重新生成", onClick: () => onStoryToolAction("regenerate") },
+            { label: "批量生成分镜", onClick: () => onStoryToolAction("create-storyboard") },
+            { label: "批量生视频", onClick: () => onStoryToolAction("batch-video") },
           ]}
         />
         <PresetComposerPanel
@@ -7416,10 +14106,10 @@ function PresetWorkflowControls({
         <PresetFloatingToolbar
           anchor={anchor}
           items={[
-            ["高清", "首帧高清接口待接入。"],
-            ["扩图", "首帧扩图接口待接入。"],
-            ["替换背景", "背景替换接口待接入。"],
-            ["下载", "图片下载接口待接入。"],
+            PRESET_MEDIA_TOOLBAR_ITEMS["first-frame-hd"],
+            PRESET_MEDIA_TOOLBAR_ITEMS["first-frame-outpaint"],
+            PRESET_MEDIA_TOOLBAR_ITEMS["first-frame-background"],
+            PRESET_MEDIA_TOOLBAR_ITEMS["first-frame-download"],
           ]}
         />
         <PresetComposerPanel
@@ -7565,21 +14255,625 @@ function TextTargetModuleComposer({
   );
 }
 
+function AudioTargetModuleComposer({ anchor }: { anchor: PresetControlAnchor }) {
+  const [text, setText] = useState("");
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [expandedOpen, setExpandedOpen] = useState(false);
+  const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const [voiceModalOpen, setVoiceModalOpen] = useState(false);
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
+  const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 720;
+  const compactComposer = viewportWidth < 980 || viewportHeight < 620;
+  const composerWidth = compactComposer ? Math.max(320, viewportWidth - 24) : 660;
+  const composerHeight = settingsOpen ? 565 : 189;
+  const composerTop = compactComposer
+    ? Math.max(12, Math.min(anchor.bottomY + 12, viewportHeight - composerHeight - 12))
+    : anchor.bottomY + 12;
+
+  const insertToken = useCallback((token: string) => {
+    setText((current) => (current ? `${current} ${token}` : token));
+  }, []);
+
+  const renderQuickTools = () => (
+    <div className="flex items-center gap-1 pl-1 pt-1">
+      {[
+        ["<#>", "停顿"],
+        ["()", "语气词"],
+      ].map(([icon, label]) => (
+        <button
+          className="flex h-6 shrink-0 items-center gap-1 rounded bg-white/10 px-2 text-[13px] text-white/72 transition-colors hover:bg-white/14 hover:text-white"
+          key={label}
+          onClick={() => insertToken(icon)}
+          type="button"
+        >
+          <span>{icon}</span>
+          <span>{label}</span>
+        </button>
+      ))}
+    </div>
+  );
+
+  const renderControlRow = (label: string, value: string, progress: number) => (
+    <div className="flex h-8 cursor-auto items-center justify-between gap-4" key={label}>
+      <div className="flex min-w-0 max-w-[120px] flex-1 items-center">
+        <div className="flex items-center gap-1 text-[13px] text-white/72">{label}</div>
+      </div>
+      <div className="flex min-w-0 flex-1 items-center gap-4">
+        <div className="relative h-1.5 flex-1 rounded-full bg-white/16">
+          <div className="absolute left-0 top-0 h-full rounded-full bg-[#2f8cff]" style={{ width: `${progress}%` }} />
+          <div
+            className="absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-[0_1px_4px_rgba(0,0,0,0.4)]"
+            style={{ left: `${progress}%` }}
+          />
+        </div>
+        <div className="flex h-8 w-[68px] items-center justify-center rounded-lg bg-white/8 text-[13px] text-white/86">
+          {value}
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderAdvancedSettings = (expanded: boolean) => (
+    <div className={cn(expanded ? "shrink-0" : "", "px-4 pt-1 text-[13px] text-white/72")}>
+      <div className="h-36">
+        <div className="flex h-9 items-center justify-between py-2">
+          <span>基础调节</span>
+          <button className="rounded px-1 text-white/42 transition hover:text-white/78" type="button">
+            一键重置
+          </button>
+        </div>
+        <div className="flex flex-col gap-1 pb-1">
+          {renderControlRow("语速", "1.00", 50)}
+          {renderControlRow("声调", "0", 58)}
+          {renderControlRow("音量", "1.0", 20)}
+        </div>
+      </div>
+      <div className="h-[228px]">
+        <div className="flex h-9 items-center justify-between py-2">
+          <span>音色效果调节</span>
+          <ChevronDown className="h-4 w-4 rotate-180 text-white/55" />
+        </div>
+        <div className="flex flex-col gap-1 pb-1">
+          {renderControlRow("音高", "0", 58)}
+          {renderControlRow("强度", "0", 58)}
+          {renderControlRow("音色调节", "0", 58)}
+        </div>
+        <div className="mt-2 text-white/72">音效</div>
+        <div className="mt-2 grid h-8 grid-cols-5 overflow-hidden rounded-lg bg-white/8 p-0.5 text-[13px] text-white/42">
+          {["无", "空旷回音", "礼堂广播", "电话失真", "电音"].map((effect, index) => (
+            <button
+              className={cn(
+                "rounded-md transition-colors hover:text-white/72",
+                index === 0 ? "bg-white/14 text-white/88" : "text-white/42"
+              )}
+              key={effect}
+              type="button"
+            >
+              {effect}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  const audioModelOptions = [
+    ["Seed Audio 1.0", "多模态音频生成，支持人声、音效、音乐一体化创作"],
+    ["Minimax-speech-2.8-hd", "文字转语音，多元的情绪渲染"],
+    ["Minimax-speech-2.8-turbo", "文字转语音，快速生成自然的音频效果"],
+    ["Eleven V3", "文字转语音，提供高质量、可定制的语音"],
+    ["Eleven Music V3", "智能音乐生成，高质量音乐生成"],
+    ["Mureka V8", "智能音乐生成，兼具多元风格"],
+  ];
+
+  const renderModelMenu = () => (
+    <div className="absolute left-0 top-[calc(100%+1px)] z-[80] w-[369px] rounded-xl border border-white/10 bg-[#333]/95 p-1 shadow-[0_16px_36px_rgba(0,0,0,0.42)]">
+      <div className="tiny-scrollbar max-h-[400px] w-[360px] overflow-y-auto">
+        <div className="flex flex-col gap-1">
+          {audioModelOptions.map(([title, description], index) => (
+            <button
+              className={cn(
+                "group flex h-[52px] w-full items-center gap-2 rounded-xl p-2 text-left transition-colors",
+                title === "Minimax-speech-2.8-hd" ? "bg-white/15" : "hover:bg-white/8"
+              )}
+              key={title}
+              onClick={() => setModelMenuOpen(false)}
+              type="button"
+            >
+              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-white/8 text-white/70">
+                {index === 0 ? <Music2 className="h-4 w-4" /> : <BoxSelect className="h-4 w-4" />}
+              </span>
+              <span className="min-w-0 flex-1 overflow-hidden pr-1">
+                <span className="block truncate text-[14px] text-white/88">{title}</span>
+                <span className="block truncate text-[12px] text-white/42">{description}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  const voiceRows = [
+    ["青涩青年音色", "中文(普通话)", "男"],
+    ["精英青年音色", "中文(普通话)", "男"],
+    ["霸道青年音色", "中文(普通话)", "男"],
+    ["青年大学生音色", "中文(普通话)", "男"],
+    ["少女音色", "中文(普通话)", "女"],
+    ["御姐音色", "中文(普通话)", "女"],
+    ["成熟女性音色", "中文(普通话)", "女"],
+    ["甜美女性音色", "中文(普通话)", "女"],
+    ["青涩青年音色-beta", "中文(普通话)", "男"],
+  ];
+
+  const renderVoiceModal = () => (
+    <div className="fixed inset-0 z-[602] flex items-center justify-center" data-canvas-overlay="true">
+      <section className="h-[616px] w-[800px] overflow-hidden rounded-2xl border border-white/10 bg-[#262626] text-white shadow-[0_24px_60px_rgba(0,0,0,0.55)]">
+        <div className="flex h-[56px] items-center justify-between border-white/8 border-b px-4 py-3">
+          <div className="text-[15px] font-medium text-white/88">音色选择</div>
+          <button
+            className="flex size-8 items-center justify-center rounded-lg text-white/45 transition-colors hover:bg-white/8 hover:text-white/85"
+            onClick={() => setVoiceModalOpen(false)}
+            type="button"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="flex h-[56px] items-center justify-between gap-3 p-4 pb-0">
+          <div className="flex h-10 shrink-0 items-center gap-1 rounded-xl bg-white/8 p-1">
+            {["音色库", "我的音色", "收藏音色"].map((tab, index) => (
+              <button
+                className={cn(
+                  "min-w-[76px] whitespace-nowrap rounded-lg px-3 py-1.5 text-[13px] transition-colors",
+                  index === 0 ? "bg-white/15 text-white" : "text-white/45 hover:text-white/78"
+                )}
+                key={tab}
+                type="button"
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+          <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
+            <button className="flex h-10 items-center gap-1 rounded-xl bg-[#3CB5CC1A] px-3 text-[#07B8DD] transition-colors hover:bg-[#3CB5CC2A]" type="button">
+              <Music2 className="h-4 w-4" />
+              克隆新音色
+            </button>
+            <label className="flex h-10 w-[240px] items-center gap-2 rounded-xl bg-white/8 px-3 text-white/42">
+              <Search className="h-4 w-4" />
+              <input className="min-w-0 flex-1 bg-transparent text-sm text-white outline-none placeholder:text-white/42" placeholder="搜索音色库" />
+            </label>
+            <button className="flex h-10 items-center gap-2 rounded-xl bg-white/8 px-3 text-white/78 transition-colors hover:bg-white/12" type="button">
+              <SlidersHorizontal className="h-4 w-4" />
+              筛选
+            </button>
+          </div>
+        </div>
+        <div className="h-[450px] p-4">
+          <div className="tiny-scrollbar flex h-full flex-col gap-1 overflow-y-auto">
+            {voiceRows.map(([name, language, gender]) => {
+              const selected = name === "少女音色";
+              return (
+                <div
+                  className={cn(
+                    "group flex h-16 w-full items-center gap-3 rounded-xl p-3 transition-colors",
+                    selected ? "bg-white/15" : "bg-white/5 hover:bg-white/10"
+                  )}
+                  key={name}
+                >
+                  <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-white/8 text-white/72">
+                    <Music2 className="h-4 w-4" />
+                  </div>
+                  <div className="min-w-0 flex-1 text-[15px] text-white/88">{name}</div>
+                  <div className="flex shrink-0 items-center gap-1 text-[12px] text-white/42">
+                    <span>{language}</span>
+                    <span>{gender}</span>
+                  </div>
+                  <button
+                    className={cn(
+                      "h-8 rounded-full px-4 text-[13px] transition-colors",
+                      selected ? "bg-white/10 text-white/38" : "bg-white text-neutral-900 hover:bg-white/86"
+                    )}
+                    type="button"
+                  >
+                    {selected ? "已选" : "选择"}
+                  </button>
+                  <button className="flex size-8 items-center justify-center rounded-lg text-white/40 hover:bg-white/8 hover:text-white/78" type="button">
+                    <Star className="h-4 w-4" />
+                  </button>
+                  <button className="flex size-8 items-center justify-center rounded-lg text-white/40 hover:bg-white/8 hover:text-white/78" type="button">
+                    ...
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex h-[53px] items-center gap-4 border-white/8 border-t px-4 text-[13px] text-white/45">
+          <button className="flex size-7 items-center justify-center rounded-lg bg-white/14 text-white" type="button">1</button>
+          {["2", "3", "4", "5", "...", "17"].map((page) => (
+            <button className="px-1 transition-colors hover:text-white/80" key={page} type="button">{page}</button>
+          ))}
+          <button className="px-1 transition-colors hover:text-white/80" type="button">›</button>
+          <button className="ml-2 h-8 rounded-lg bg-white/8 px-3 text-white/58" type="button">20条/页</button>
+          <span>跳至</span>
+          <span className="h-8 w-10 rounded-lg bg-white/8" />
+          <span>页</span>
+          <span className="ml-auto">共 327 条</span>
+        </div>
+      </section>
+    </div>
+  );
+
+  const renderComposerSurface = (expanded: boolean) => {
+    const surfaceWidth = expanded ? 800 : 660;
+    const surfaceHeight = expanded ? 600 : composerHeight;
+    const topSectionClass = expanded ? "flex min-h-0 flex-1 flex-col gap-2 p-2" : "flex min-h-0 flex-col gap-2 p-2";
+    const textBoxClass = expanded ? "relative flex min-h-0 flex-1 gap-1" : "relative flex h-24 gap-1";
+
+    return (
+      <div
+        className="relative flex w-full flex-col gap-0 overflow-hidden rounded-2xl border border-white/8 bg-[#262626] text-white shadow-[0_18px_56px_rgba(0,0,0,0.42)]"
+        style={{ height: surfaceHeight, width: surfaceWidth }}
+      >
+        <div className={cn("flex w-full flex-col", expanded ? "min-h-0 flex-1 overflow-hidden" : "min-h-0")}>
+          <div className={topSectionClass}>
+            {renderQuickTools()}
+            <div className={textBoxClass}>
+              <div className={cn("relative flex-1 overflow-hidden rounded-xl p-2", expanded ? "min-h-0" : "min-h-20")}>
+                {!text ? (
+                  <div className="pointer-events-none absolute left-2 top-2 text-[13px] text-white/34">
+                    输入要合成的文本
+                  </div>
+                ) : null}
+                <textarea
+                  className="h-full w-full resize-none bg-transparent text-[13px] leading-5 text-white/78 outline-none"
+                  maxLength={50000}
+                  onChange={(event) => setText(event.target.value)}
+                  onPointerDown={(event) => event.stopPropagation()}
+                  value={text}
+                />
+              </div>
+            </div>
+            <div className="flex h-8 w-full items-center gap-1 text-[13px] text-white/64">
+              <div className="relative shrink-0">
+                <button
+                  className={cn(
+                    "flex h-8 w-auto items-center justify-between gap-1 rounded-lg px-2 py-1 transition-colors",
+                    modelMenuOpen ? "bg-white/10" : "bg-transparent hover:bg-white/8"
+                  )}
+                  onClick={() => setModelMenuOpen((current) => !current)}
+                  type="button"
+                >
+                  <Headphones className="h-3.5 w-3.5 shrink-0 text-white/82" />
+                  <span className="max-w-[170px] truncate">Minimax-speech-2.8-hd</span>
+                  <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/42" />
+                </button>
+                {modelMenuOpen ? renderModelMenu() : null}
+              </div>
+              <div className="min-w-0 flex-1" />
+              <div className="flex shrink-0 items-center gap-2">
+                <button
+                  className="flex h-8 max-w-[180px] shrink-0 items-center gap-1.5 rounded-lg bg-white/10 px-2 text-white/78 transition-colors hover:bg-white/14"
+                  onClick={() => {
+                    setModelMenuOpen(false);
+                    setVoiceModalOpen(true);
+                  }}
+                  title="切换音色"
+                  type="button"
+                >
+                  <Music2 className="h-3.5 w-3.5" />
+                  <span className="truncate">少女音色</span>
+                  <ChevronDown className="h-3.5 w-3.5 text-white/42" />
+                </button>
+                <button className="flex size-8 shrink-0 items-center justify-center rounded-lg text-white/58 transition-colors hover:bg-white/8 hover:text-white/86" title="翻译" type="button">
+                  <Languages className="h-4 w-4" />
+                </button>
+                <button
+                  className={cn(
+                    "mx-1 flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors",
+                    settingsOpen ? "bg-white/10 text-white" : "text-white/58 hover:bg-white/8 hover:text-white/86"
+                  )}
+                  onClick={() => setSettingsOpen((current) => !current)}
+                  title="基础调节"
+                  type="button"
+                >
+                  <SlidersHorizontal className="h-4 w-4" />
+                </button>
+                <span className="shrink-0 text-white/45">{text.length}/50000</span>
+                <div className="flex h-8 items-center gap-2 text-white/45">
+                  <Zap className="h-3.5 w-3.5" />
+                  <span>1</span>
+                </div>
+                <button className="flex size-8 shrink-0 items-center justify-center rounded-xl bg-white text-neutral-900 transition hover:bg-white/86" title="生成音频" type="button">
+                  <ArrowUp className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+          {settingsOpen ? renderAdvancedSettings(expanded) : null}
+        </div>
+        <button
+          className="absolute right-2 top-2 z-10 flex size-7 shrink-0 items-center justify-center rounded-lg bg-[#262626] text-white/50 transition-colors hover:bg-white/8 hover:text-white/85"
+          onClick={() => (expanded ? setExpandedOpen(false) : setExpandedOpen(true))}
+          title={expanded ? "收起" : "展开"}
+          type="button"
+        >
+          {expanded ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+        </button>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {expandedOpen ? (
+        <div className="fixed inset-0 z-[600] bg-black/50" data-canvas-overlay="true">
+          <div className="fixed left-1/2 top-1/2 z-[601] max-h-[90dvh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2">
+            {renderComposerSurface(true)}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "pointer-events-auto absolute z-[70]",
+            compactComposer ? "overflow-x-auto overflow-y-visible" : "overflow-visible"
+          )}
+          data-canvas-overlay="true"
+          style={{
+            height: composerHeight,
+            left: compactComposer ? 12 : anchor.centerX,
+            top: composerTop,
+            transform: compactComposer ? "none" : "translateX(-50%)",
+            transformOrigin: "top left",
+            width: composerWidth,
+          }}
+        >
+          {renderComposerSurface(false)}
+        </div>
+      )}
+      {voiceModalOpen ? renderVoiceModal() : null}
+    </>
+  );
+}
+
+function ReferenceSelectionToolbar({
+  onExit,
+  onReturn,
+}: {
+  onExit: () => void;
+  onReturn: () => void;
+}) {
+  return (
+    <div
+      className="pointer-events-auto absolute z-50"
+      data-canvas-overlay="true"
+      style={{ left: "50%", top: 80, transform: "translateX(-50%)" }}
+    >
+      <div className="flex h-[58px] w-[314px] items-center gap-[16px] rounded-[16px] border border-[#363636] bg-[#262626] p-[12px] shadow-[0_0_18px_rgba(255,255,255,0.08),0_14px_36px_rgba(0,0,0,0.34)] backdrop-blur-md">
+        <div className="flex h-[32px] w-[138px] items-center gap-[8px]">
+          <span className="flex size-[32px] shrink-0 items-center justify-center rounded-[8px] bg-white/10 text-white/85">
+            <Wand2 className="h-3.5 w-3.5" />
+          </span>
+          <span className="whitespace-nowrap text-[14px] font-semibold leading-[14px] text-white">
+            从画布选择参考
+          </span>
+        </div>
+        <div className="flex h-[32px] items-center gap-[8px]">
+          <button
+            className="flex h-[32px] w-[76px] items-center justify-center rounded-[8px] bg-white/15 px-[12px] text-[13px] text-white transition-opacity hover:opacity-80"
+            onClick={onReturn}
+            type="button"
+          >
+            返回节点
+          </button>
+          <button
+            className="flex h-[32px] w-[50px] items-center justify-center rounded-[8px] bg-white px-[12px] text-[13px] text-neutral-900 transition-opacity hover:opacity-80"
+            onClick={onExit}
+            type="button"
+          >
+            退出
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function VideoCanvasMarkSelectionToolbar({
+  onExit,
+  onReturn,
+}: {
+  onExit: () => void;
+  onReturn: () => void;
+}) {
+  return (
+    <div
+      className="pointer-events-auto absolute z-50"
+      data-canvas-overlay="true"
+      style={{ left: "50%", top: 80, transform: "translateX(-50%)" }}
+    >
+      <div className="flex h-[58px] w-[336px] items-center gap-[16px] rounded-[16px] border border-[#363636] bg-[#262626] p-[12px] shadow-[0_0_18px_rgba(255,255,255,0.08),0_14px_36px_rgba(0,0,0,0.34)] backdrop-blur-md">
+        <div className="flex h-[32px] w-[160px] items-center gap-[8px]">
+          <span className="flex size-[32px] shrink-0 items-center justify-center rounded-[8px] bg-white/10 text-white/85">
+            <Wand2 className="h-3.5 w-3.5" />
+          </span>
+          <span className="flex w-[120px] flex-col gap-[4px]">
+            <span className="whitespace-nowrap text-[14px] font-semibold leading-[14px] text-white">
+              元素选择模式
+            </span>
+            <span className="whitespace-nowrap text-[12px] leading-[12px] text-white/50">
+              点击图片选择局部元素
+            </span>
+          </span>
+        </div>
+        <div className="flex h-[32px] items-center gap-[8px]">
+          <button
+            className="flex h-[32px] w-[76px] items-center justify-center rounded-[8px] bg-white/15 px-[12px] text-[13px] text-white transition-opacity hover:opacity-80"
+            onClick={onReturn}
+            type="button"
+          >
+            返回节点
+          </button>
+          <button
+            className="flex h-[32px] w-[50px] items-center justify-center rounded-[8px] bg-white px-[12px] text-[13px] text-neutral-900 transition-opacity hover:opacity-80"
+            onClick={onExit}
+            type="button"
+          >
+            退出
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function VideoCanvasMarkSourceOverlay({
+  analysis,
+  marks,
+  node,
+  onRemove,
+}: {
+  analysis: VideoCanvasMarkAnalysisState | null;
+  marks: VideoCanvasMagicMark[];
+  node: CloneNode;
+  onRemove: (markId: string) => void;
+}) {
+  const [openMarkId, setOpenMarkId] = useState<string | null>(null);
+  const imageTop = 32;
+  const imageHeight = Math.max(1, node.height - imageTop);
+  const getPoint = (clickX: number, clickY: number) => ({
+    x: Math.max(14, Math.min(node.width - 14, clickX * node.width)),
+    y: imageTop + Math.max(0, Math.min(1, clickY)) * imageHeight,
+  });
+
+  return (
+    <div
+      className="pointer-events-none absolute z-40"
+      style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
+    >
+      {marks.map((mark) => {
+        const point = getPoint(mark.clickX, mark.clickY);
+        const label = mark.labelOptions[mark.selectedIndex] || mark.labelOptions[0];
+        const badgeTop = Math.max(imageTop, Math.min(node.height - 42, point.y - 42));
+        const guideHeight = Math.max(0, point.y - badgeTop - 34);
+        return (
+          <div
+            className="group pointer-events-auto absolute flex items-center gap-[4px]"
+            key={mark.id}
+            onPointerDown={(event) => event.stopPropagation()}
+            style={{ left: point.x, top: badgeTop, transform: "translateX(-50%)" }}
+          >
+            <button
+              className="flex h-[34px] items-center gap-1.5 whitespace-nowrap rounded-full border border-white/10 bg-[#2a2a2a] px-3 py-1.5 text-[14px] text-white shadow-lg transition hover:bg-[#333]"
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                setOpenMarkId((current) => current === mark.id ? null : mark.id);
+              }}
+              type="button"
+            >
+              <Sparkles className="h-[14px] w-[14px] text-white/80" />
+              <span>{label}</span>
+              {mark.labelOptions.length > 1 ? (
+                <ChevronDown className="h-[14px] w-[14px] text-white/60" />
+              ) : null}
+            </button>
+            {openMarkId === mark.id ? (
+              <div className="absolute left-1/2 top-[38px] z-[300] min-w-[120px] -translate-x-1/2 overflow-hidden rounded-[16px] border-[0.5px] border-[#525252] bg-[#1f1f1f]/95 p-1 shadow-[0_16px_42px_rgba(0,0,0,0.42)] backdrop-blur-[32px]">
+                <button
+                  className="flex h-8 w-full items-center justify-between gap-2 rounded-md px-2 text-left text-[14px] text-white hover:bg-white/10"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setOpenMarkId(null);
+                  }}
+                  type="button"
+                >
+                  <span>{label}</span>
+                  <span className="size-2 rounded-full bg-white/55" />
+                </button>
+              </div>
+            ) : null}
+            <button
+              aria-label={`移除标记 ${label}`}
+              className="flex size-6 scale-75 items-center justify-center rounded-full border border-white/10 bg-[#2a2a2a] text-white/60 opacity-0 shadow-lg transition-all hover:bg-[#3a3a3a] hover:text-white group-hover:scale-100 group-hover:opacity-100"
+              onPointerDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                setOpenMarkId(null);
+                onRemove(mark.id);
+              }}
+              type="button"
+            >
+              <X className="h-3 w-3" />
+            </button>
+            {guideHeight > 0 ? (
+              <span
+                className="pointer-events-none absolute left-1/2 top-[34px] w-px -translate-x-1/2 bg-white/55"
+                style={{ height: guideHeight }}
+              />
+            ) : null}
+          </div>
+        );
+      })}
+      {analysis ? (() => {
+        const point = getPoint(analysis.clickX, analysis.clickY);
+        return (
+          <span
+            className="absolute flex h-7 items-center gap-1.5 whitespace-nowrap rounded-full border border-white/10 bg-black/75 px-2.5 text-[12px] text-white/78 shadow-lg"
+            style={{ left: point.x, top: point.y, transform: "translate(-50%, -50%)" }}
+          >
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            分析中...
+          </span>
+        );
+      })() : null}
+    </div>
+  );
+}
+
 function VideoTargetModuleComposer({
   anchor,
   functionConfig,
+  magicMarks,
+  markSelectionActive,
   membershipSummary,
   modelOptions = [],
   node,
+  onOpenEffectLibrary,
+  onOpenRoleLibrary,
+  onRemoveEffect,
+  onRemoveMagicMark,
+  onRemoveReference,
+  onRemoveRole,
+  onPromptChange,
+  onStartMarkSelection,
+  onStartReferenceSelection,
   onSubmit,
+  onUpdateMagicMark,
+  referenceSelectionActive,
   sourceNodes,
 }: {
   anchor: PresetControlAnchor;
   functionConfig: VideoCanvasFunctionConfig;
+  magicMarks: VideoCanvasMagicMark[];
+  markSelectionActive: boolean;
   membershipSummary?: MembershipSummaryResponse;
   modelOptions?: CanvasModelOption[];
   node: CloneNode;
+  onOpenEffectLibrary: () => void;
+  onOpenRoleLibrary: () => void;
+  onRemoveEffect: (sourceId: string) => void;
+  onRemoveMagicMark: (markId: string) => void;
+  onRemoveReference: (sourceId: string) => void;
+  onRemoveRole: (sourceId: string) => void;
+  onPromptChange: (prompt: string) => void;
+  onStartMarkSelection: () => void;
+  onStartReferenceSelection: () => void;
   onSubmit: (payload: VideoTargetComposerSubmitPayload) => void;
+  onUpdateMagicMark: (markId: string, selectedIndex: number) => void;
+  referenceSelectionActive: boolean;
   sourceNodes: CloneNode[];
 }) {
   const params = (node.draftValues?.params || {}) as Record<string, unknown>;
@@ -7588,6 +14882,9 @@ function VideoTargetModuleComposer({
       ? (params.settings as Record<string, unknown>)
       : {};
   const imageSources = sourceNodes.filter((item) => item.inputType === "image");
+  const effectSources = sourceNodes.filter(isVideoEffectMaterialNode);
+  const roleSources = sourceNodes.filter(isVideoRoleMaterialNode);
+  const activeEffect = effectSources[0] || null;
   const referenceCount = imageSources.length;
   const savedMode = normalizeVideoGenerationMode(params.mode || paramsSettings.mode);
   const initialTab = (() => {
@@ -7599,6 +14896,11 @@ function VideoTargetModuleComposer({
   })();
   const initialPrompt = String(params.prompt || node.draftValues?.prompt || "").trim();
   const initialSettings: ComposerSettings & { duration: string } = {
+    autoValidateMaterial: normalizeComposerBoolean(
+      paramsSettings.autoValidateMaterial ?? paramsSettings.auto_validate_material,
+      true,
+    ),
+    audio: String(paramsSettings.audio || "开启"),
     camera: String(paramsSettings.camera || "摄像机"),
     count: String(paramsSettings.count || "1个"),
     model:
@@ -7607,20 +14909,33 @@ function VideoTargetModuleComposer({
         functionConfig,
         getConfiguredFunction(functionConfig, getVideoFunctionKeyForMode(resolveVideoComposerMode(initialTab))),
       ),
+    modelLabel: String(paramsSettings.modelLabel || "").trim() || "Seedance 2.0 VIP",
     panorama: String(paramsSettings.panorama || "全能参考"),
-    ratio: normalizeVideoRatioValue(params.ratio || paramsSettings.ratio),
+    ratio: formatVideoRatioLabel(params.ratio || paramsSettings.ratio),
     resolution: formatVideoResolutionLabel(params.resolution || paramsSettings.resolution),
+    searchEnabled: normalizeComposerBoolean(
+      paramsSettings.searchEnabled ?? paramsSettings.search_enabled ?? paramsSettings.searchable,
+      true,
+    ),
     duration: formatVideoDurationLabel(params.duration || paramsSettings.duration),
   };
   const [activeTab, setActiveTab] = useState<VideoComposerTabKey>(initialTab);
   const [menu, setMenu] = useState<ComposerMenu>(null);
+  const [assistMenu, setAssistMenu] = useState<"reference" | "mark" | "effects" | "motion" | "role" | null>(null);
+  const [advancedSettingsOpen, setAdvancedSettingsOpen] = useState(false);
   const [prompt, setPrompt] = useState(initialPrompt);
+  const [markMenuAnchor, setMarkMenuAnchor] = useState<{
+    id: string;
+    left: number;
+    top: number;
+  } | null>(null);
   const [settings, setSettings] = useState<ComposerSettings & { duration: string }>(initialSettings);
   const activeMode = resolveVideoComposerMode(activeTab);
   const activeDefinition = getConfiguredFunction(functionConfig, getVideoFunctionKeyForMode(activeMode));
   const activeModelFallback = normalizeModelRef(getFunctionModelValue(functionConfig, activeDefinition)) || "auto";
-  const activeMenu =
-    menu === "model" || menu === "ratio" || menu === "resolution" || menu === "duration" ? menu : null;
+  const showModelMenu = menu === "model";
+  const showModeMenu = menu === "mode";
+  const showSettingsMenu = menu === "settings";
   const activePromptPlaceholder =
     activeMode === "text-to-video"
       ? "描述视频画面、动作、情绪与镜头语言。"
@@ -7628,16 +14943,16 @@ function VideoTargetModuleComposer({
         ? "描述首帧到尾帧之间的动作变化、转场与镜头节奏。"
         : "补充参考图中的动作、镜头、节奏与氛围，让视频更准确。";
   const tabItems: Array<{ key: VideoComposerTabKey; label: string; enabled: boolean }> = [
-    { key: "text-to-video", label: "文生视频", enabled: true },
+    { key: "text-to-video", label: "文生视频", enabled: referenceCount === 0 },
     { key: "reference-images", label: "全能参考", enabled: referenceCount >= 1 },
     { key: "first-frame", label: "图生视频", enabled: referenceCount >= 1 },
-    { key: "first-last-frame", label: "首尾帧", enabled: referenceCount >= 2 },
+    { key: "first-last-frame", label: "首尾帧", enabled: referenceCount >= 1 },
     { key: "image-reference", label: "图片参考", enabled: referenceCount >= 1 },
   ];
   const referenceThumbnails = imageSources
     .map((item) => ({ id: item.id, title: item.title, url: getNodeReferenceMediaUrl(item) }))
     .filter((item) => item.url)
-    .slice(0, 4);
+    .slice(0, 10);
 
   useEffect(() => {
     setActiveTab(initialTab);
@@ -7680,184 +14995,574 @@ function VideoTargetModuleComposer({
       settings.resolution,
     ],
   );
+  const estimatedBillingDisplay = useMemo(
+    () =>
+      resolveVideoCanvasBillingDisplay({
+        duration: normalizeVideoDurationValue(settings.duration),
+        functionDefinition: activeDefinition,
+        modelKind: "video",
+        modelOptions,
+        modelRef: settings.model,
+        resolution: normalizeVideoResolutionValue(settings.resolution),
+      }),
+    [
+      activeDefinition,
+      modelOptions,
+      settings.duration,
+      settings.model,
+      settings.resolution,
+    ],
+  );
+  const visibleBillingDisplay = /^\d+$/.test(estimatedBillingDisplay.label)
+    ? estimatedBillingDisplay
+    : {
+        label: "135",
+        message: billingDisplay.message || "当前视频生成预计消耗 135 积分。",
+      };
+  const appendMotionPrompt = useCallback(
+    (snippet: string) => {
+      const trimmedSnippet = snippet.trim();
+      if (!trimmedSnippet) return;
+      const trimmedPrompt = prompt.trim();
+      const nextPrompt = trimmedPrompt
+        ? `${trimmedPrompt} ${trimmedSnippet}`
+        : trimmedSnippet;
+      setPrompt(nextPrompt);
+      onPromptChange(nextPrompt);
+      setAssistMenu(null);
+    },
+    [onPromptChange, prompt],
+  );
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
+  const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 720;
+  const compactComposer = viewportWidth < 980 || viewportHeight < 620;
+  const composerWidth = compactComposer ? Math.max(320, viewportWidth - 24) : 660;
+  const attachmentCount =
+    referenceThumbnails.length + (activeEffect ? 1 : 0) + roleSources.length;
+  const attachmentRows = attachmentCount > 0 ? Math.ceil(attachmentCount / 11) : 0;
+  const attachmentComposerHeight = attachmentRows > 0 ? 63 + (attachmentRows - 1) * 56 : 0;
+  const baseComposerHeight = (compactComposer ? 210 : 191) + attachmentComposerHeight;
+  const advancedComposerHeight = advancedSettingsOpen ? 116 : 0;
+  const composerHeight = baseComposerHeight + advancedComposerHeight;
+  const composerTop = compactComposer
+    ? Math.max(12, Math.min(anchor.bottomY + 12, viewportHeight - composerHeight - 12))
+    : anchor.bottomY + 12;
+  const allQuickActionItems: Array<{ icon: LucideIcon; key: "reference" | "mark" | "effects" | "role" | "motion"; label: string }> = [
+    { icon: Layers, key: "reference", label: "参考" },
+    { icon: BoxSelect, key: "mark", label: "标记" },
+    { icon: Sparkles, key: "effects", label: "特效" },
+    { icon: UserRound, key: "role", label: "角色库" },
+    { icon: Settings2, key: "motion", label: "运镜" },
+  ];
+  const quickActionItems = allQuickActionItems.filter((item) => {
+    if (activeEffect && item.key === "effects") return false;
+    if (activeTab === "first-frame") return item.key !== "role";
+    if (activeTab === "first-last-frame") {
+      return item.key === "reference" || item.key === "mark" || item.key === "role";
+    }
+    return true;
+  });
+  const promptPlaceholder =
+    activeMode === "text-to-video" ? "描述你想要生成的画面内容，@引用素材" : activePromptPlaceholder;
+  const activeTabLabel = tabItems.find((item) => item.key === activeTab)?.label || "文生视频";
+  const ActiveModeIcon = getVideoModeIcon(activeTab);
+  const activeModelButtonLabel = getVideoComposerModelShortLabel(getVideoComposerModelLabel(settings, modelOptions));
+  const activeModelButtonMinWidth =
+    activeModelButtonLabel === "2.0 Fast" ? 115 : activeModelButtonLabel === "2.0 Mini" ? 113 : 91;
+  const canSubmit = Boolean(
+    prompt.trim() ||
+      referenceCount > 0 ||
+      magicMarks.length > 0 ||
+      activeEffect ||
+      roleSources.length > 0,
+  );
 
   return (
     <div
-      className="pointer-events-auto absolute z-30 overflow-visible"
+      className={cn(
+        "pointer-events-auto absolute z-[70]",
+        compactComposer ? "overflow-x-auto overflow-y-visible" : "overflow-visible"
+      )}
       data-canvas-overlay="true"
       style={{
-        height: 260,
-        left: anchor.centerX,
-        top: anchor.bottomY + 18,
-        transform: "translateX(-50%)",
-        width: 1216,
+        height: composerHeight,
+        left: compactComposer ? 12 : anchor.centerX,
+        top: composerTop,
+        transform: compactComposer ? "none" : "translateX(-50%)",
+        transformOrigin: "top left",
+        width: composerWidth,
       }}
     >
-      <div className="relative h-[260px] w-[1216px] rounded-[16px] border border-white/8 bg-[#252525]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]">
-        {activeMenu ? (
-          <ComposerPopover
-            customOptions={
-              activeMenu === "resolution"
-                ? [
-                    { label: "480P", value: "480P" },
-                    { label: "720P", value: "720P" },
-                    { label: "1080P", value: "1080P" },
-                  ]
-                : activeMenu === "duration"
-                  ? [
-                      { label: "5s", value: "5s" },
-                      { label: "10s", value: "10s" },
-                    ]
-                  : undefined
-            }
-            menu={activeMenu}
-            modelKind={activeMenu === "model" ? "video" : "image"}
-            modelOptions={modelOptions}
-            onSelect={(option) => {
-              if (activeMenu === "model") {
-                setSettings((current) => ({ ...current, model: option }));
-              } else if (activeMenu === "ratio") {
-                setSettings((current) => ({ ...current, ratio: option }));
-              } else if (activeMenu === "resolution") {
-                setSettings((current) => ({ ...current, resolution: option }));
-              } else if (activeMenu === "duration") {
-                setSettings((current) => ({ ...current, duration: option }));
-              }
-              setMenu(null);
-            }}
-          />
-        ) : null}
-        <button
-          className="absolute right-6 top-5 text-[32px] text-white/38 hover:text-white/70"
-          onClick={() => toast.info("视频编辑器扩展视图待接入。")}
-          type="button"
-        >
-          ↗
-        </button>
-        <div className="flex items-center gap-3">
-          {tabItems.map((item) => (
-            <button
-              className={cn(
-                "h-[38px] rounded-[8px] border border-white/10 px-4 text-[18px] transition",
-                item.enabled
-                  ? item.key === activeTab
-                    ? "bg-white/10 text-white"
-                    : "text-white/56 hover:bg-white/6 hover:text-white/86"
-                  : "cursor-not-allowed text-white/22"
-              )}
-              key={item.key}
-              onClick={() => {
-                if (!item.enabled) {
-                  toast.info(item.key === "first-last-frame" ? "首尾帧模式至少需要 2 张参考图片。" : "请先接入参考图片。");
-                  return;
-                }
-                setActiveTab(item.key);
+      <div
+        className="relative overflow-visible rounded-[16px] border-[0.5px] border-[#363636] bg-[#262626] text-white shadow-[0_4px_10px_rgba(0,0,0,0.12)] transition-[height] duration-300"
+        style={{ height: composerHeight, width: composerWidth }}
+      >
+        <div className="relative shrink-0 p-[8px]" style={{ height: baseComposerHeight }}>
+          {showModelMenu ? (
+            <VideoModelPopover
+              currentLabel={getVideoComposerModelLabel(settings, modelOptions)}
+              modelOptions={modelOptions}
+              onSelect={(option) => {
                 setSettings((current) => ({
                   ...current,
-                  panorama: item.label,
+                  model: option.modelRef || current.model || "auto",
+                  modelLabel: option.label,
                 }));
+                setMenu(null);
+              }}
+            />
+          ) : null}
+          {showModeMenu ? (
+            <VideoModePopover
+              activeTab={activeTab}
+              items={tabItems}
+              leftOffset={16 + activeModelButtonMinWidth}
+              onSelect={(nextTab) => {
+                setActiveTab(nextTab);
+                setMenu(null);
+              }}
+            />
+          ) : null}
+          {showSettingsMenu ? (
+            <VideoParameterEditor
+              leftOffset={126 + activeModelButtonMinWidth}
+              settings={settings}
+              onChange={(updates) => setSettings((current) => ({ ...current, ...updates }))}
+            />
+          ) : null}
+          {assistMenu === "motion" ? (
+            <VideoMotionLibraryPanel
+              onClose={() => setAssistMenu(null)}
+              onSelect={appendMotionPrompt}
+              presets={functionConfig.motionPresets}
+            />
+          ) : null}
+          <div className="flex h-[26px] items-center gap-[4px]">
+            {quickActionItems.map(({ icon: Icon, key, label }) => (
+              <button
+                className={cn(
+                  "flex h-[26px] shrink-0 items-center justify-center gap-[2px] rounded-full px-[8px] py-[4px] text-white/64 transition hover:bg-white/10 hover:text-white",
+                  (assistMenu === key ||
+                    (key === "reference" && referenceSelectionActive) ||
+                    (key === "mark" && markSelectionActive)) &&
+                    "bg-white/10 text-white"
+                )}
+                key={key}
+                onClick={() => {
+                  if (key === "reference") {
+                    setAssistMenu(null);
+                    setMenu(null);
+                    onStartReferenceSelection();
+                    return;
+                  }
+                  if (key === "mark") {
+                    setAssistMenu(null);
+                    setMenu(null);
+                    setMarkMenuAnchor(null);
+                    onStartMarkSelection();
+                    return;
+                  }
+                  if (key === "effects") {
+                    setAssistMenu(null);
+                    setMenu(null);
+                    onOpenEffectLibrary();
+                    return;
+                  }
+                  if (key === "role") {
+                    setAssistMenu(null);
+                    setMenu(null);
+                    onOpenRoleLibrary();
+                    return;
+                  }
+                  setAssistMenu((current) => current === key ? null : key);
+                  setMenu(null);
+                }}
+                type="button"
+              >
+                <Icon className="h-[12px] w-[12px]" />
+                <span className="text-[12px] leading-[18px]">{label}</span>
+              </button>
+            ))}
+          </div>
+          {attachmentCount > 0 ? (
+            <div className="nopan mt-[8px] flex min-h-[55px] w-full min-w-0 flex-wrap items-start gap-[8px] pl-[4px]">
+              {referenceThumbnails.map((thumbnail, index) => (
+                <div className="group relative size-[48px] flex-none cursor-grab active:cursor-grabbing" key={thumbnail.id}>
+                  <div className="size-full overflow-hidden rounded-[12px] border-[0.5px] border-[#525252]">
+                    <img alt={thumbnail.title} className="size-full object-cover" src={thumbnail.url} />
+                  </div>
+                  {activeTab === "first-last-frame" ? (
+                    <span className="pointer-events-none absolute left-0 top-0 rounded-br-[5px] bg-black/70 px-1 py-0.5 text-[9px] leading-3 text-white/90">
+                      {index === 0 ? "首帧" : "尾帧"}
+                    </span>
+                  ) : (
+                    <span className="pointer-events-none absolute left-0 top-0 flex size-[16px] items-center justify-center rounded-full bg-black/70 text-[9px] text-white">
+                      {index + 1}
+                    </span>
+                  )}
+                  <button
+                    aria-label={`移除参考 ${index + 1}`}
+                    className="absolute right-0.5 top-0.5 z-20 flex size-[15px] items-center justify-center rounded-full border border-white bg-[#333] text-white opacity-0 transition-opacity group-hover:opacity-100"
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onRemoveReference(thumbnail.id);
+                    }}
+                    type="button"
+                  >
+                    <X className="h-2.5 w-2.5" />
+                  </button>
+                </div>
+              ))}
+              {activeEffect ? (
+                <div
+                  className="group relative size-[48px] flex-none cursor-pointer"
+                  data-video-effect-attachment={getDraftString(activeEffect, "effectId")}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onOpenEffectLibrary();
+                  }}
+                >
+                  <div className="relative size-full overflow-hidden rounded-[8px] border-[0.5px] border-[#525252] bg-[#1f1f1f]">
+                    <img
+                      alt={getDraftString(activeEffect, "effectTitle") || activeEffect.title}
+                      className="size-full object-cover"
+                      draggable={false}
+                      src={getDraftString(activeEffect, "thumbnailUrl") || getNodeMediaUrl(activeEffect)}
+                    />
+                    <span className="absolute inset-0 bg-black/35" />
+                    <span className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 text-white/80 transition-opacity group-hover:opacity-0">
+                      <Camera className="h-3 w-3" />
+                      <span className="text-[11px] leading-none">特效</span>
+                    </span>
+                    <span className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 text-white/80 opacity-0 transition-opacity group-hover:opacity-100">
+                      <RotateCcw className="h-3 w-3" />
+                      <span className="text-[11px] leading-none">替换</span>
+                    </span>
+                  </div>
+                  <button
+                    aria-label={`移除特效 ${getDraftString(activeEffect, "effectTitle") || activeEffect.title}`}
+                    className="absolute right-[-3px] top-[-5px] z-20 flex size-[15px] items-center justify-center rounded-full border border-white bg-[#333] text-white opacity-0 transition-opacity group-hover:opacity-100"
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onRemoveEffect(activeEffect.id);
+                    }}
+                    type="button"
+                  >
+                    <X className="h-2.5 w-2.5" />
+                  </button>
+                </div>
+              ) : null}
+              {roleSources.map((roleSource) => {
+                const roleName =
+                  getDraftString(roleSource, "roleName") ||
+                  roleSource.title.replace(/^素材-角色-/, "");
+                return (
+                  <div
+                    className="group relative size-[48px] flex-none cursor-pointer"
+                    data-video-role-attachment={getDraftString(roleSource, "roleId")}
+                    key={roleSource.id}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onOpenRoleLibrary();
+                    }}
+                  >
+                    <div className="relative size-full overflow-hidden rounded-[8px] border-[0.5px] border-[#525252] bg-[#1f1f1f]">
+                      <img
+                        alt={roleName}
+                        className="size-full object-cover object-top"
+                        draggable={false}
+                        src={
+                          getDraftString(roleSource, "thumbnailUrl") ||
+                          getNodeMediaUrl(roleSource)
+                        }
+                      />
+                      <span className="absolute inset-x-0 bottom-0 bg-black/68 py-0.5 text-center text-[9px] leading-3 text-white/90">
+                        角色
+                      </span>
+                      {getDraftString(roleSource, "assetId") ? (
+                        <span className="absolute left-1 top-1 flex size-[14px] items-center justify-center rounded-full bg-[#09caf5] text-black">
+                          <Check className="h-2.5 w-2.5" strokeWidth={3} />
+                        </span>
+                      ) : null}
+                    </div>
+                    <button
+                      aria-label={`移除角色 ${roleName}`}
+                      className="absolute right-[-3px] top-[-5px] z-20 flex size-[15px] items-center justify-center rounded-full border border-white bg-[#333] text-white opacity-0 transition-opacity group-hover:opacity-100"
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onRemoveRole(roleSource.id);
+                      }}
+                      type="button"
+                    >
+                      <X className="h-2.5 w-2.5" />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          ) : null}
+          <div
+            className="relative mt-3 h-[78px] rounded-[12px] bg-white/[0.03]"
+            data-video-prompt-editor="true"
+          >
+            {!prompt && magicMarks.length === 0 ? (
+              <div className="pointer-events-none absolute left-3 top-2 text-[14px] leading-6 text-white/42">
+                {promptPlaceholder}
+              </div>
+            ) : null}
+            <div
+              className="tiny-scrollbar h-full w-full overflow-y-auto bg-transparent px-3 py-2 text-[14px] leading-6 text-white/78 outline-none"
+              contentEditable
+              onInput={(event) => {
+                const clone = event.currentTarget.cloneNode(true) as HTMLElement;
+                clone.querySelectorAll("[data-magic-id]").forEach((element) => element.remove());
+                setPrompt((clone.textContent || "").replace(/\u00a0/g, " ").trim());
+              }}
+              onBlur={() => onPromptChange(prompt)}
+              onKeyDown={(event) => {
+                if (event.key !== "Backspace" || magicMarks.length === 0) return;
+                const selection = window.getSelection();
+                if (!selection?.rangeCount || !selection.isCollapsed) return;
+                const range = selection.getRangeAt(0);
+                if (!event.currentTarget.contains(range.endContainer)) return;
+                const after = range.cloneRange();
+                after.selectNodeContents(event.currentTarget);
+                after.setStart(range.endContainer, range.endOffset);
+                if (after.toString().trim()) return;
+                event.preventDefault();
+                const lastMark = magicMarks[magicMarks.length - 1];
+                onRemoveMagicMark(lastMark.id);
+                setMarkMenuAnchor(null);
+              }}
+              onPointerDown={(event) => event.stopPropagation()}
+              role="textbox"
+              suppressContentEditableWarning
+              tabIndex={0}
+            >
+              {prompt}
+              {magicMarks.length > 0 ? " " : null}
+              {magicMarks.map((mark) => {
+                const label = mark.labelOptions[mark.selectedIndex] || mark.labelOptions[0];
+                return (
+                  <span
+                    className="magic-chip mr-1 inline-flex h-6 cursor-pointer select-none items-center gap-1 whitespace-nowrap rounded-full border border-[#525252] bg-white/10 px-1.5 align-middle text-[12px] leading-4 text-white"
+                    contentEditable={false}
+                    data-magic-id={mark.id}
+                    data-magic-index={mark.selectedIndex}
+                    key={mark.id}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      if (mark.labelOptions.length < 2) {
+                        setMarkMenuAnchor(null);
+                        return;
+                      }
+                      const editor = event.currentTarget.closest(
+                        "[data-video-prompt-editor='true']"
+                      );
+                      const editorRect = editor?.getBoundingClientRect();
+                      const chipRect = event.currentTarget.getBoundingClientRect();
+                      if (!editorRect) return;
+                      setMarkMenuAnchor((current) =>
+                        current?.id === mark.id
+                          ? null
+                          : {
+                              id: mark.id,
+                              left: Math.max(
+                                0,
+                                Math.min(515, chipRect.left - editorRect.left)
+                              ),
+                              top: chipRect.bottom - editorRect.top + 4,
+                            }
+                      );
+                    }}
+                  >
+                    <img
+                      alt=""
+                      className="size-[14px] rounded-full object-cover"
+                      draggable={false}
+                      src={mark.imageUrl}
+                    />
+                    <span data-magic-label="true">{label}</span>
+                    {mark.labelOptions.length > 1 ? (
+                      <span className="ml-0.5 text-[12px] opacity-50">›</span>
+                    ) : null}
+                  </span>
+                );
+              })}
+            </div>
+            {markMenuAnchor ? (() => {
+              const mark = magicMarks.find((item) => item.id === markMenuAnchor.id);
+              if (!mark) return null;
+              return (
+                <div
+                  className="absolute z-[300] min-w-[120px] max-w-[220px] overflow-hidden rounded-[16px] border-[0.5px] border-[#525252] bg-[#1f1f1f]/95 p-1 shadow-[0_16px_42px_rgba(0,0,0,0.42)] backdrop-blur-[32px]"
+                  style={{ left: markMenuAnchor.left, top: markMenuAnchor.top }}
+                >
+                  <div className="tiny-scrollbar flex max-h-[200px] flex-col gap-0.5 overflow-y-auto">
+                    {mark.labelOptions.map((label, index) => (
+                      <button
+                        className={cn(
+                          "flex h-8 w-full items-center justify-between gap-2 rounded-md px-2 text-left text-[14px] transition-colors hover:bg-white/10",
+                          index === mark.selectedIndex ? "text-white" : "text-white/55"
+                        )}
+                        key={`${mark.id}-${label}`}
+                        onClick={() => {
+                          onUpdateMagicMark(mark.id, index);
+                          setMarkMenuAnchor(null);
+                        }}
+                        type="button"
+                      >
+                        <span>{label}</span>
+                        {index === mark.selectedIndex ? (
+                          <span className="size-2 rounded-full bg-white/55" />
+                        ) : null}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              );
+            })() : null}
+          </div>
+          <div className="absolute bottom-4 left-3 right-[58px] flex min-w-0 items-center gap-1 overflow-hidden text-[13px] text-white/62">
+            <button
+              className={cn(
+                "flex h-8 min-w-[91px] max-w-[240px] shrink-[2] items-center justify-between gap-1 rounded-lg bg-transparent px-2 py-1 transition-colors hover:bg-white/8 hover:text-white",
+                showModelMenu && "bg-white/10 text-white"
+              )}
+              onClick={() => {
+                setAssistMenu(null);
+                setMenu((current) => current === "model" ? null : "model");
+              }}
+              style={{ minWidth: activeModelButtonMinWidth }}
+              type="button"
+            >
+              <Video className="h-3.5 w-3.5 shrink-0" />
+              <span className="truncate">{activeModelButtonLabel}</span>
+              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/42" />
+            </button>
+            <button
+              className={cn(
+                "flex h-8 w-[106px] min-w-[106px] shrink-0 items-center justify-center gap-1 rounded-lg bg-transparent px-2 py-1 transition-colors hover:bg-white/8 hover:text-white",
+                showModeMenu && "bg-white/10 text-white"
+              )}
+              onClick={() => {
+                setAssistMenu(null);
+                setMenu((current) => current === "mode" ? null : "mode");
               }}
               type="button"
             >
-              {item.label}
+              <ActiveModeIcon className="h-4 w-4 shrink-0" />
+              <span className="min-w-0 truncate">{activeTabLabel}</span>
+              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/42" />
             </button>
-          ))}
-        </div>
-        <div className="mt-4 flex items-center gap-3">
-          {[
-            ["标记", "◎"],
-            ["运镜", "▣"],
-            ["角色库", "♙"],
-          ].map(([label, icon]) => (
             <button
-              className="flex h-[72px] w-[92px] flex-col items-center justify-center gap-1 rounded-[8px] border border-white/10 text-[16px] text-white/50 transition hover:bg-white/[0.07] hover:text-white/80"
-              key={label}
-              onClick={() => toast.info(`${label}参数后端待接入。`)}
+              className={cn(
+                "flex h-8 min-w-[204px] shrink items-center gap-1 rounded-lg bg-transparent px-2 py-1 transition-colors hover:bg-white/8 hover:text-white",
+                showSettingsMenu && "bg-white/10 text-white"
+              )}
+              onClick={() => {
+                setAssistMenu(null);
+                setMenu((current) => current === "settings" ? null : "settings");
+              }}
               type="button"
             >
-              <span className="text-[26px] leading-none">{icon}</span>
-              <span>{label}</span>
+              <span className="flex-none rounded-[2px] border-[1.5px] border-current h-[9px] w-4" />
+              <span className="truncate">{formatVideoParameterSummary(settings)} ·</span>
+              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/42" />
             </button>
-          ))}
-          {referenceThumbnails.length > 0 ? (
-            referenceThumbnails.map((thumbnail, index) => (
-              <div className="relative h-[72px] w-[86px] overflow-hidden rounded-[9px]" key={thumbnail.id}>
-                <img alt={thumbnail.title} className="h-full w-full object-cover" src={thumbnail.url} />
-                <span className="absolute right-1 top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-black/60 px-1 text-[12px]">
-                  {index + 1}
-                </span>
+            <div className="min-w-0 flex-1" />
+            <div className="flex shrink-0 items-center gap-1">
+              <button
+                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-white/74 transition-colors hover:bg-white/8 hover:text-white"
+                onClick={() => toast.info(prompt.trim() ? "提示词优化后端待接入。" : "请先输入提示词或添加参考素材。")}
+                title="提示词优化"
+                type="button"
+              >
+                <Sparkles className="h-4 w-4" />
+              </button>
+              <button
+                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-white/74 transition-colors hover:bg-white/8 hover:text-white"
+                onClick={() => toast.info(prompt.trim() ? "翻译提示词后端待接入。" : "请先输入提示词。")}
+                title="翻译提示词"
+                type="button"
+              >
+                <Languages className="h-4 w-4" />
+              </button>
+              <button
+                className={cn(
+                  "mx-1 flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors",
+                  advancedSettingsOpen ? "bg-white/10 text-white" : "text-white/86 hover:bg-white/8 hover:text-white"
+                )}
+                onClick={() => {
+                  setAssistMenu(null);
+                  setMenu(null);
+                  setAdvancedSettingsOpen((current) => !current);
+                }}
+                title="高级设置"
+                type="button"
+              >
+                <SlidersHorizontal className="h-4 w-4" />
+              </button>
+              <div className="flex h-8 min-w-[85px] shrink-0 items-center justify-end gap-1.5 text-white/42">
+                <Zap className="h-3.5 w-3.5 text-[#FFC65D]" />
+                <span className="min-w-5 text-center text-[12px] leading-[15px]">{visibleBillingDisplay.label}</span>
               </div>
-            ))
-          ) : (
-            <div className="flex h-[72px] min-w-[180px] items-center justify-center rounded-[9px] border border-dashed border-white/10 px-4 text-[14px] text-white/34">
-              接入图片参考后可直接图生视频
             </div>
+          </div>
+          <button
+            className="absolute bottom-4 right-3 flex h-9 w-9 items-center justify-center rounded-xl bg-white text-neutral-900 transition-[filter,opacity] hover:brightness-110 active:brightness-95 disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={!canSubmit}
+            onClick={() =>
+              onSubmit({
+                magicMarks,
+                mode: activeMode,
+                prompt,
+                settings: {
+                  ...settings,
+                  autoValidateMaterial: settings.autoValidateMaterial !== false,
+                  camera: settings.camera,
+                  count: settings.count,
+                  panorama: activeTabLabel || settings.panorama,
+                  searchEnabled: settings.searchEnabled !== false,
+                },
+                tab: activeTab,
+              })
+            }
+            title={canSubmit ? visibleBillingDisplay.message : "请输入提示词、添加参考素材、标记元素或视频特效"}
+            type="button"
+          >
+            <ArrowUp className="h-[18px] w-[18px]" aria-hidden="true" />
+          </button>
+        </div>
+        <div
+          className={cn(
+            "grid transition-[grid-template-rows] ease-in-out duration-300",
+            advancedSettingsOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
           )}
-        </div>
-        <textarea
-          className="mt-5 h-[62px] w-full resize-none bg-transparent text-[24px] leading-8 text-white/78 outline-none placeholder:text-white/46"
-          onChange={(event) => setPrompt(event.target.value)}
-          onPointerDown={(event) => event.stopPropagation()}
-          placeholder={activePromptPlaceholder}
-          value={prompt}
-        />
-        <div className="absolute bottom-5 left-5 right-[86px] flex items-center gap-7 overflow-hidden text-[22px] text-white/82">
-          <ComposerControl
-            active={menu === "model"}
-            dropdown
-            icon="▥"
-            label={getCanvasModelDisplayName(settings.model, modelOptions)}
-            onClick={() => setMenu((current) => current === "model" ? null : "model")}
-          />
-          <ComposerControl
-            active={menu === "ratio"}
-            dropdown
-            icon="▭"
-            label={settings.ratio}
-            onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")}
-          />
-          <ComposerControl
-            active={menu === "resolution"}
-            dropdown
-            label={settings.resolution}
-            onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")}
-          />
-          <ComposerControl
-            active={menu === "duration"}
-            dropdown
-            label={settings.duration}
-            onClick={() => setMenu((current) => current === "duration" ? null : "duration")}
-          />
-          <ComposerControl label="" icon="♬" muted onClick={() => toast.info("音频控制后端待接入。")} />
-          <ComposerControl label="文" onClick={() => toast.info("翻译接口待接入。")} />
-          <ComposerControl label="" icon="⌘" onClick={() => toast.info("高级视频参数后端待接入。")} />
-          <ComposerControl label="1个" dropdown onClick={() => toast.info("当前仅支持单次生成 1 个视频结果。")} />
-          <ComposerControl
-            label={billingDisplay.label}
-            icon="⚡"
-            muted
-            onClick={() => toast.info(billingDisplay.message)}
-          />
-        </div>
-        <button
-          className="absolute bottom-5 right-5 flex h-14 w-14 items-center justify-center rounded-[14px] bg-white text-[28px] leading-none text-black hover:bg-white/90"
-          onClick={() =>
-            onSubmit({
-              mode: activeMode,
-              prompt,
-              settings: {
-                ...settings,
-                camera: settings.camera,
-                count: "1个",
-                panorama: tabItems.find((item) => item.key === activeTab)?.label || settings.panorama,
-              },
-              tab: activeTab,
-            })
-          }
-          type="button"
         >
-          ⟳
-        </button>
+          <div className="min-h-0 overflow-hidden">
+            <div className="mx-2 border-white/8 border-t" />
+            <div className="mx-2 pt-3 text-xs font-bold text-neutral-500">高级设置</div>
+            <div className="flex flex-col gap-1 px-2 pb-2 pt-1">
+              <VideoAdvancedSwitchRow
+                checked={settings.searchEnabled !== false}
+                label="联网搜索"
+                onChange={(checked) => setSettings((current) => ({ ...current, searchEnabled: checked }))}
+              />
+              <VideoAdvancedSwitchRow
+                checked={settings.autoValidateMaterial !== false}
+                label="自动校验素材"
+                onChange={(checked) => setSettings((current) => ({ ...current, autoValidateMaterial: checked }))}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
@@ -7954,14 +15659,20 @@ function AudioToVideoComposerPanel({
 }) {
   const [prompt, setPrompt] = useState(AUDIO_TO_VIDEO_PROMPT);
   const [menu, setMenu] = useState<ComposerMenu>(null);
+  const [assistMenu, setAssistMenu] = useState<"reference" | "mark" | "effects" | "motion" | "role" | null>(null);
   const [settings, setSettings] = useState<ComposerSettings>({
+    audio: "开启",
     camera: "摄像机",
     count: "1个",
+    duration: "5s",
     model: normalizeModelRef(defaultModel) || "auto",
+    modelLabel: "Seedance 2.0 VIP",
     panorama: "全景",
     ratio: "16:9",
     resolution: "720P",
   });
+  const showModelMenu = menu === "model";
+  const showSettingsMenu = menu === "settings";
 
   useEffect(() => {
     setSettings((current) => ({ ...current, model: normalizeModelRef(defaultModel) || "auto" }));
@@ -7970,7 +15681,7 @@ function AudioToVideoComposerPanel({
   const billingDisplay = useMemo(
     () =>
       resolveVideoCanvasBillingDisplay({
-        duration: 5,
+        duration: normalizeVideoDurationValue(settings.duration),
         functionDefinition: billingDefinition,
         membershipSummary,
         modelKind: "video",
@@ -7978,20 +15689,40 @@ function AudioToVideoComposerPanel({
         modelRef: settings.model,
         resolution: normalizeVideoResolutionValue(settings.resolution),
       }),
-    [billingDefinition, membershipSummary, modelOptions, settings.model, settings.resolution],
+    [billingDefinition, membershipSummary, modelOptions, settings.duration, settings.model, settings.resolution],
   );
+  const appendPromptSnippet = useCallback((snippet: string) => {
+    setPrompt((current) => {
+      const trimmed = current.trim();
+      return trimmed ? `${trimmed}，${snippet}` : snippet;
+    });
+    setAssistMenu(null);
+  }, []);
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
+  const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 720;
+  const compactComposer = viewportWidth < 980 || viewportHeight < 620;
+  const composerWidth = compactComposer ? Math.max(320, viewportWidth - 24) : 1216;
+  const composerTop = anchor
+    ? compactComposer
+      ? Math.max(12, Math.min(anchor.bottomY + 18, viewportHeight - 260 - 12))
+      : anchor.bottomY + 18
+    : undefined;
 
   return (
     <div
-      className="pointer-events-auto absolute overflow-visible"
+      className={cn(
+        "pointer-events-auto absolute z-[70]",
+        compactComposer ? "overflow-x-auto overflow-y-visible" : "overflow-visible"
+      )}
       style={
         anchor
           ? {
               height: 260,
-              left: anchor.centerX,
-              top: anchor.bottomY + 18,
-              transform: "translateX(-50%)",
-              width: 1216,
+              left: compactComposer ? 12 : anchor.centerX,
+              top: composerTop,
+              transform: compactComposer ? "none" : "translateX(-50%)",
+              transformOrigin: "top left",
+              width: composerWidth,
             }
           : {
               bottom: 58,
@@ -8003,17 +15734,41 @@ function AudioToVideoComposerPanel({
       }
     >
       <div className="relative h-[260px] w-[1216px] rounded-[16px] border border-white/8 bg-[#252525]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]">
-        {menu === "model" ? (
-          <ComposerPopover
-            menu="model"
-            modelKind="video"
+        {showModelMenu ? (
+          <VideoModelPopover
+            currentLabel={getVideoComposerModelLabel(settings, modelOptions)}
             modelOptions={modelOptions}
             onSelect={(option) => {
-              setSettings((current) => ({ ...current, model: option }));
+              setSettings((current) => ({
+                ...current,
+                model: option.modelRef || current.model || "auto",
+                modelLabel: option.label,
+              }));
               setMenu(null);
             }}
           />
         ) : null}
+        {showSettingsMenu ? (
+          <VideoParameterEditor
+            settings={settings}
+            onChange={(updates) => setSettings((current) => ({ ...current, ...updates }))}
+          />
+        ) : null}
+        {assistMenu === "motion" ? (
+          <VideoMotionPresetPopover onSelect={appendPromptSnippet} />
+        ) : null}
+        {assistMenu === "effects" ? (
+          <VideoEffectPresetPopover onSelect={(title) => appendPromptSnippet(`加入${title}特效`)} />
+        ) : null}
+        {assistMenu === "role" ? (
+          <VideoRoleConsentPopover
+            onCancel={() => setAssistMenu(null)}
+            onUse={() => {
+              setAssistMenu(null);
+              toast.success("已进入公共角色库素材选择。");
+            }}
+          />
+        ) : null}
         <button className="absolute right-6 top-5 text-[32px] text-white/38 hover:text-white/70" onClick={() => toast.info("展开音频生视频编辑器待接入。")} type="button">↗</button>
         <div className="flex items-center gap-3">
           {["文生视频", "全能参考", "图生视频", "首尾帧", "图片参考"].map((tab, index) => (
@@ -8032,14 +15787,30 @@ function AudioToVideoComposerPanel({
         </div>
         <div className="mt-4 flex items-center gap-3">
           {[
-            ["标记", "◎"],
-            ["运镜", "▣"],
-            ["角色库", "♙"],
-          ].map(([label, icon]) => (
+            ["参考", "▦", "reference"],
+            ["标记", "◎", "mark"],
+            ["特效", "✦", "effects"],
+            ["角色库", "♙", "role"],
+            ["运镜", "▣", "motion"],
+          ].map(([label, icon, key]) => (
             <button
-              className="flex h-[72px] w-[92px] flex-col items-center justify-center gap-1 rounded-[8px] border border-white/10 text-[16px] text-white/50 transition hover:bg-white/[0.07] hover:text-white/80"
+              className={cn(
+                "flex h-[72px] w-[92px] flex-col items-center justify-center gap-1 rounded-[8px] border border-white/10 text-[16px] text-white/50 transition hover:bg-white/[0.07] hover:text-white/80",
+                assistMenu === key && "border-white/22 bg-white/10 text-white"
+              )}
               key={label}
-              onClick={() => toast.info(`${label}参数后端待接入。`)}
+              onClick={() => {
+                if (key === "reference") {
+                  toast.info("音频和图片参考已连接，可继续补充更多素材。");
+                  return;
+                }
+                if (key === "mark") {
+                  appendPromptSnippet("添加人物与构图标记");
+                  return;
+                }
+                setAssistMenu((current) => current === key ? null : (key as typeof assistMenu));
+                setMenu(null);
+              }}
               type="button"
             >
               <span className="text-[26px] leading-none">{icon}</span>
@@ -8062,15 +15833,12 @@ function AudioToVideoComposerPanel({
           value={prompt}
         />
         <div className="absolute bottom-5 left-5 right-[86px] flex items-center gap-7 overflow-hidden text-[22px] text-white/82">
-          <ComposerControl active={menu === "model"} label={getCanvasModelDisplayName(settings.model, modelOptions)} icon="▥" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
+          <ComposerControl active={menu === "model"} label={getVideoComposerModelLabel(settings, modelOptions)} icon="▥" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
           <span className="rounded-[5px] bg-[#f6c85f] px-1.5 py-0.5 text-[13px] font-bold text-[#2b2314]">VIP</span>
-          <ComposerControl label="16:9" icon="▭" onClick={() => toast.info("比例选择后端待接入。")} />
-          <ComposerControl label="720P" onClick={() => toast.info("清晰度选择后端待接入。")} />
-          <ComposerControl label="5s" onClick={() => toast.info("时长选择后端待接入。")} />
-          <ComposerControl label="" icon="♬" dropdown onClick={() => toast.info("音频参数后端待接入。")} />
+          <ComposerControl active={menu === "settings"} label={formatVideoParameterSummary(settings)} icon="▭" dropdown onClick={() => setMenu((current) => current === "settings" ? null : "settings")} />
+          <ComposerControl label="" icon="♬" muted={settings.audio !== "开启"} dropdown onClick={() => setSettings((current) => ({ ...current, audio: current.audio === "关闭" ? "开启" : "关闭" }))} />
           <ComposerControl label="文" onClick={() => toast.info("翻译接口待接入。")} />
           <ComposerControl label="" icon="⌘" onClick={() => toast.info("高级设置后端待接入。")} />
-          <ComposerControl label="1个" dropdown onClick={() => toast.info("生成数量后端待接入。")} />
           <ComposerControl
             label={billingDisplay.label}
             icon="⚡"
@@ -8347,10 +16115,10 @@ function AudioToVideoScene() {
     <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
       <PresetFloatingToolbar
         items={[
-          ["节奏匹配", "音频节奏解析接口待接入。"],
-          ["镜头语言", "镜头语言配置接口待接入。"],
-          ["生成音效", "音效生成接口待接入。"],
-          ["下载", "素材下载接口待接入。"],
+          PRESET_MEDIA_TOOLBAR_ITEMS["audio-beat"],
+          PRESET_MEDIA_TOOLBAR_ITEMS["audio-camera"],
+          PRESET_MEDIA_TOOLBAR_ITEMS["audio-sfx"],
+          PRESET_MEDIA_TOOLBAR_ITEMS["audio-download"],
         ]}
       />
       <div className="pointer-events-auto absolute left-1/2 top-[178px] flex -translate-x-1/2 items-start gap-[98px]">
@@ -8372,40 +16140,76 @@ function AudioToVideoScene() {
   );
 }
 
+type PresetFloatingToolbarItem =
+  | [string, string]
+  | {
+      label: string;
+      message?: string;
+      onClick?: () => void;
+    };
+
 function PresetFloatingToolbar({
   anchor,
+  compact = false,
   items,
 }: {
   anchor?: PresetControlAnchor;
-  items: Array<[string, string]>;
+  compact?: boolean;
+  items: PresetFloatingToolbarItem[];
 }) {
-	return (
-	  <div
-	    className="pointer-events-auto absolute flex h-[58px] items-center gap-2 rounded-[16px] border border-white/8 bg-[#262626]/96 px-4 text-white/78 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
-	    style={
-	      anchor
-	        ? {
-	            left: anchor.centerX,
-	            top: anchor.topY - (24 * anchor.zoom + 10),
-	            transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
-	            transformOrigin: "bottom center",
-	          }
-	        : { left: "50%", top: 94, transform: "translateX(-50%)" }
-	    }
-	  >
-      {items.map(([label, message]) => (
-        <button
-          className="flex h-10 items-center gap-2 rounded-[10px] px-3 text-[15px] hover:bg-white/8 hover:text-white"
-          key={label}
-          onClick={() => toast.info(message)}
-          type="button"
-        >
-          <span className="flex h-5 w-5 items-center justify-center rounded-[5px] border border-white/18 text-[11px] text-white/58">
-            {label.slice(0, 1)}
-          </span>
-          {label}
-        </button>
-      ))}
+  return (
+    <div
+      className={cn(
+        "pointer-events-auto absolute flex items-center border border-white/8 bg-[#262626]/96 text-white/78 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]",
+        compact
+          ? "h-[41px] w-[393px] gap-1 rounded-[8px] px-1"
+          : "h-[58px] gap-2 rounded-[16px] px-4"
+      )}
+      style={
+        anchor
+          ? {
+              left: anchor.centerX,
+              top: anchor.topY - (compact ? 10 : 24 * anchor.zoom + 10),
+              transform: compact
+                ? "translateX(-50%) translateY(-100%)"
+                : `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
+              transformOrigin: "bottom center",
+            }
+          : { left: "50%", top: 94, transform: "translateX(-50%)" }
+      }
+    >
+      {items.map((item) => {
+        const label = Array.isArray(item) ? item[0] : item.label;
+        const message = Array.isArray(item) ? item[1] : item.message;
+        const onClick = Array.isArray(item) ? undefined : item.onClick;
+        const compactWidth =
+          label === "批量生成分镜" ? 122 : label === "批量生视频" ? 109 : 96;
+        return (
+          <button
+            className={cn(
+              "flex items-center justify-center rounded-[8px] hover:bg-white/8 hover:text-white",
+              compact ? "h-8 text-[14px] font-medium" : "h-10 gap-2 rounded-[10px] px-3 text-[15px]"
+            )}
+            key={label}
+            onClick={() => {
+              if (onClick) {
+                onClick();
+                return;
+              }
+              if (message) toast.info(message);
+            }}
+            style={compact ? { width: compactWidth } : undefined}
+            type="button"
+          >
+            {!compact ? (
+              <span className="flex h-5 w-5 items-center justify-center rounded-[5px] border border-white/18 text-[11px] text-white/58">
+                {label.slice(0, 1)}
+              </span>
+            ) : null}
+            {label}
+          </button>
+        );
+      })}
     </div>
   );
 }
@@ -8590,12 +16394,14 @@ function PresetComposerPanel({
   const [draftPrompt, setDraftPrompt] = useState(prompt);
   const [settings, setSettings] = useState<ComposerSettings>({
     camera: "摄像机",
-    count: "1张",
+    count: modelKind === "video" ? "1个" : "1张",
+    duration: "5s",
     model: normalizeModelRef(defaultModel) || "auto",
     panorama: "全景",
     ratio: "16:9",
-    resolution: "2K",
+    resolution: modelKind === "video" ? "720P" : "2K",
   });
+  const activeMenu = menu === "model" || menu === "ratio" || menu === "resolution" ? menu : null;
 
   useEffect(() => {
     setDraftPrompt(prompt);
@@ -8615,9 +16421,9 @@ function PresetComposerPanel({
         modelKind,
         modelOptions,
         modelRef: settings.model,
-        resolution: modelKind === "video" ? "720p" : null,
+        resolution: modelKind === "video" ? normalizeVideoResolutionValue(settings.resolution) : null,
       }),
-    [billingDefinition, membershipSummary, modelKind, modelOptions, settings.model],
+    [billingDefinition, membershipSummary, modelKind, modelOptions, settings.model, settings.resolution],
   );
 
 	return (
@@ -8645,13 +16451,22 @@ function PresetComposerPanel({
 	      className="relative h-[238px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]"
 	      style={{ transform: `scale(${OFFICIAL_COMPOSER_SCALE})`, transformOrigin: "top left" }}
 	    >
-	      {menu === "model" ? (
+	      {activeMenu ? (
 	        <ComposerPopover
-	          menu="model"
+	          customOptions={
+	            activeMenu === "resolution" && modelKind === "video"
+	              ? [
+	                  { label: "480P", value: "480P" },
+	                  { label: "720P", value: "720P" },
+	                  { label: "1080P", value: "1080P" },
+	                ]
+	              : undefined
+	          }
+	          menu={activeMenu}
 	          modelKind={modelKind}
 	          modelOptions={modelOptions}
 	          onSelect={(option) => {
-	            setSettings((current) => ({ ...current, model: option }));
+	            setSettings((current) => ({ ...current, [activeMenu]: option }));
 	            setMenu(null);
 	          }}
 	        />
@@ -8673,10 +16488,10 @@ function PresetComposerPanel({
 	      />
 	      <div className="absolute bottom-5 left-5 right-[84px] flex items-center gap-6 overflow-hidden text-[17px] text-white/78">
 	        <ComposerControl active={menu === "model"} label={getCanvasModelDisplayName(settings.model, modelOptions)} icon="◉" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
-	        <ComposerControl label="16:9" icon="▭" dropdown onClick={() => toast.info("比例选择接口待接入。")} />
-	        <ComposerControl label="2K" dropdown onClick={() => toast.info("清晰度选择接口待接入。")} />
+	        <ComposerControl active={menu === "ratio"} label={settings.ratio} icon="▭" dropdown onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")} />
+	        <ComposerControl active={menu === "resolution"} label={settings.resolution} dropdown onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")} />
 	        <ComposerControl label="摄像机" icon="▣" onClick={() => toast.info("镜头配置接口待接入。")} />
-	        <ComposerControl label="1张" dropdown onClick={() => toast.info("生成数量接口待接入。")} />
+	        <ComposerControl label={settings.count} dropdown onClick={() => toast.info("当前仅支持单次生成 1 个结果。")} />
 	        <ComposerControl
             label={billingDisplay.label}
             icon="⚡"
@@ -9513,6 +17328,1192 @@ function ComposerSlashPopover({ onSelect }: { onSelect: (scene: string) => void
   );
 }
 
+function getVideoComposerModelLabel(settings: Pick<ComposerSettings, "model" | "modelLabel">, modelOptions: CanvasModelOption[]) {
+  const configuredLabel = settings.modelLabel?.trim();
+  if (configuredLabel) return configuredLabel;
+  const normalized = normalizeModelRef(settings.model);
+  if (!normalized) return "Seedance 2.0 VIP";
+  return getCanvasModelDisplayName(settings.model, modelOptions);
+}
+
+function getVideoComposerModelShortLabel(label: string) {
+  const normalized = label.trim();
+  if (normalized === "Seedance 2.0 VIP") return "2.0";
+  if (normalized === "Seedance 2.0 Fast VIP") return "2.0 Fast";
+  if (normalized === "Seedance 2.0 Mini") return "2.0 Mini";
+  if (normalized === "Seedance1.5 Pro") return "1.5 Pro";
+  if (normalized === "Seedance 1.0 Pro") return "1.0 Pro";
+  if (normalized === "Seedance 1.0 Lite") return "1.0 Lite";
+  return normalized || "2.0";
+}
+
+function normalizeComposerBoolean(value: unknown, fallback = true) {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "number") return value !== 0;
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    if (!normalized) return fallback;
+    if (["false", "0", "off", "关闭", "禁用", "否"].includes(normalized)) return false;
+    if (["true", "1", "on", "开启", "启用", "是"].includes(normalized)) return true;
+  }
+  return fallback;
+}
+
+function formatVideoParameterSummary(settings: Pick<ComposerSettings, "count" | "duration" | "ratio" | "resolution">) {
+  return [
+    formatVideoRatioLabel(settings.ratio),
+    settings.resolution || "720P",
+    settings.duration || "5s",
+    settings.count || "1个",
+  ].join(" · ");
+}
+
+function VideoModelPopover({
+  currentLabel,
+  modelOptions,
+  onSelect,
+}: {
+  currentLabel: string;
+  modelOptions: CanvasModelOption[];
+  onSelect: (option: { label: string; modelRef?: string }) => void;
+}) {
+  return (
+    <div
+      className="absolute bottom-[48px] left-2 z-[90] w-[369px] rounded-2xl border border-white/10 bg-[#2d2d2d]/95 p-1 shadow-[0_1px_3px_rgba(0,0,0,0.05),0_20px_25px_-5px_rgba(0,0,0,0.05),0_10px_10px_-5px_rgba(0,0,0,0.04)] backdrop-blur-[32px]"
+      role="dialog"
+    >
+      <div className="tiny-scrollbar max-h-[400px] w-[360px] overflow-y-auto">
+        <div className="flex flex-col gap-1">
+          {LIBLIB_VIDEO_MODEL_OPTIONS.map((option, index) => {
+            const selected = currentLabel === option.label || (!currentLabel && index === 0);
+            const disabled = "disabled" in option && option.disabled === true;
+            return (
+              <button
+                className={cn(
+                  "group flex h-[52px] w-full items-center gap-1 rounded-xl p-2 text-left text-white transition-colors duration-200",
+                  selected ? "bg-white/[0.15] hover:bg-white/[0.15]" : "hover:bg-white/10",
+                  disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                )}
+                data-selected={selected ? "true" : "false"}
+                disabled={disabled}
+                key={option.label}
+                onClick={() => onSelect({ label: option.label, modelRef: index === 0 ? "auto" : undefined })}
+                type="button"
+              >
+                <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-lg bg-white/8 text-white/45">
+                  <Video className="h-4 w-4" />
+                </span>
+                <span className="h-full min-w-0 flex-1 overflow-hidden pr-1">
+                  <span className="flex h-full flex-col justify-start transition-transform duration-200 translate-y-2 group-hover:translate-y-0 group-data-[selected=true]:translate-y-0">
+                    <span className="flex min-w-0 items-center gap-1.5 leading-4">
+                      <span className="truncate text-[14px] font-medium text-white/92">{option.label}</span>
+                      {"duration" in option && option.duration ? (
+                        <span className="shrink-0 text-[11px] leading-4 text-white/40">{option.duration}</span>
+                      ) : null}
+                    </span>
+                    <span className="mt-0.5 block truncate text-[12px] leading-4 text-white/45">
+                      {option.description}
+                    </span>
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function VideoModePopover({
+  activeTab,
+  items,
+  leftOffset,
+  onSelect,
+}: {
+  activeTab: VideoComposerTabKey;
+  items: Array<{ enabled: boolean; key: VideoComposerTabKey; label: string }>;
+  leftOffset: number;
+  onSelect: (tab: VideoComposerTabKey) => void;
+}) {
+  return (
+    <div
+      className="absolute bottom-[48px] z-[90] h-[229px] w-[197px] rounded-2xl border-[0.5px] border-[#363636] bg-[#2d2d2d]/95 p-2 shadow-[0_1px_3px_rgba(0,0,0,0.05),0_20px_25px_-5px_rgba(0,0,0,0.05),0_10px_10px_-5px_rgba(0,0,0,0.04)] backdrop-blur-[16px]"
+      role="dialog"
+      style={{ left: leftOffset }}
+    >
+      <div className="flex h-full flex-col gap-1">
+        <div className="flex h-8 shrink-0 items-center px-2 text-xs font-medium text-[#919191] opacity-80">
+          视频生成模式
+        </div>
+        {items.map((item) => {
+          const Icon = getVideoModeIcon(item.key);
+          const selected = activeTab === item.key;
+          return (
+            <button
+              className={cn(
+                "flex h-8 w-full shrink-0 items-center gap-2 rounded-lg px-2 text-left text-[16px] leading-[24.8px] text-[#f7f7f7] transition-colors duration-200",
+                selected ? "bg-white/[0.15]" : "hover:bg-white/10",
+                item.enabled ? "cursor-pointer" : "cursor-not-allowed opacity-40"
+              )}
+              data-selected={selected ? "true" : "false"}
+              disabled={!item.enabled}
+              key={item.key}
+              onClick={() => onSelect(item.key)}
+              type="button"
+            >
+              <Icon className="h-4 w-4 shrink-0" />
+              <span>{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function VideoParameterEditor({
+  leftOffset = 217,
+  onChange,
+  settings,
+}: {
+  leftOffset?: number;
+  onChange: (updates: Partial<ComposerSettings>) => void;
+  settings: ComposerSettings;
+}) {
+  const durationSeconds = normalizeVideoDurationValue(settings.duration);
+  const clampedDurationSeconds = Math.min(15, Math.max(4, durationSeconds));
+  const [durationDraft, setDurationDraft] = useState(String(clampedDurationSeconds));
+  const durationProgress = ((clampedDurationSeconds - 4) / 11) * 100;
+
+  useEffect(() => {
+    setDurationDraft(String(clampedDurationSeconds));
+  }, [clampedDurationSeconds]);
+
+  const commitDuration = useCallback(() => {
+    const parsed = Number.parseInt(durationDraft, 10);
+    const nextDuration = Number.isFinite(parsed)
+      ? Math.min(15, Math.max(4, parsed))
+      : clampedDurationSeconds;
+    setDurationDraft(String(nextDuration));
+    onChange({ duration: `${nextDuration}s` });
+  }, [clampedDurationSeconds, durationDraft, onChange]);
+
+  const updateDurationFromSlider = useCallback(
+    (value: string) => {
+      const nextDuration = Math.min(15, Math.max(4, Number.parseInt(value, 10) || 5));
+      setDurationDraft(String(nextDuration));
+      onChange({ duration: `${nextDuration}s` });
+    },
+    [onChange]
+  );
+
+  return (
+    <div
+      className="absolute bottom-[48px] z-[90] flex h-[445px] w-[341px] flex-col gap-2 rounded-2xl border-[0.5px] border-[#363636] bg-[#2d2d2d]/95 p-3 shadow-[0_1px_3px_rgba(0,0,0,0.05),0_20px_25px_-5px_rgba(0,0,0,0.05),0_10px_10px_-5px_rgba(0,0,0,0.04)] backdrop-blur-[32px]"
+      role="dialog"
+      style={{ left: leftOffset }}
+    >
+      <VideoParameterRow label="比例">
+        <VideoRatioOptions
+          selected={formatVideoRatioLabel(settings.ratio)}
+          onSelect={(label) => onChange({ ratio: label })}
+        />
+      </VideoParameterRow>
+      <VideoParameterRow label="清晰度">
+        <VideoSegmentedOptions
+          columns={4}
+          options={[...VIDEO_RESOLUTION_OPTIONS]}
+          selected={settings.resolution || "720P"}
+          onSelect={(resolution) => onChange({ resolution })}
+        />
+      </VideoParameterRow>
+      <VideoParameterRow label="视频时长">
+        <div className="flex h-5 items-center gap-2">
+          <div className="relative h-2 min-w-0 flex-1">
+            <span
+              className="pointer-events-none absolute left-1 right-1 top-1/2 h-1 -translate-y-1/2"
+              style={{
+                background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${durationProgress}%, rgba(145,145,145,0.3) ${durationProgress}%, rgba(145,145,145,0.3) 100%)`,
+              }}
+            />
+            <input
+              aria-label="视频时长"
+              className="absolute inset-0 h-2 w-full cursor-pointer appearance-none bg-transparent outline-none [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:mt-[-4px] [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[0.5px] [&::-webkit-slider-thumb]:border-[#262626] [&::-webkit-slider-thumb]:bg-white"
+              max={15}
+              min={4}
+              onChange={(event) => updateDurationFromSlider(event.target.value)}
+              step={1}
+              type="range"
+              value={clampedDurationSeconds}
+            />
+          </div>
+          <input
+            aria-label="视频时长秒数"
+            className="h-5 w-12 appearance-none rounded-md border-0 bg-white/10 px-1.5 py-0.5 text-center text-xs text-[#f7f7f7] outline-none transition-colors focus:bg-white/15 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            max={15}
+            min={4}
+            onBlur={commitDuration}
+            onChange={(event) => setDurationDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                commitDuration();
+              }
+            }}
+            step={1}
+            type="number"
+            value={durationDraft}
+          />
+          <span className="text-xs text-[#919191]">s</span>
+        </div>
+      </VideoParameterRow>
+      <VideoParameterRow label="生成音频" showHelp>
+        <VideoSegmentedOptions
+          columns={2}
+          options={[...VIDEO_AUDIO_OPTIONS]}
+          selected={settings.audio || "开启"}
+          onSelect={(audio) => onChange({ audio })}
+        />
+      </VideoParameterRow>
+      <VideoParameterRow label="生成数量">
+        <VideoSegmentedOptions
+          columns={3}
+          options={[...VIDEO_COUNT_OPTIONS]}
+          selected={settings.count || "1个"}
+          onSelect={(count) => onChange({ count })}
+        />
+      </VideoParameterRow>
+    </div>
+  );
+}
+
+function VideoAdvancedSwitchRow({
+  checked,
+  label,
+  onChange,
+}: {
+  checked: boolean;
+  label: string;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex h-9 items-center justify-between py-2">
+      <span className="text-sm text-white/90">{label}</span>
+      <button
+        aria-checked={checked}
+        className={cn(
+          "relative h-5 w-[38px] shrink-0 rounded-full transition-colors",
+          checked ? "bg-white" : "bg-white/25"
+        )}
+        onClick={() => onChange(!checked)}
+        role="switch"
+        type="button"
+      >
+        <span
+          className={cn(
+            "absolute left-[3px] top-[3px] h-3.5 w-3.5 rounded-full bg-neutral-950 transition-transform duration-150",
+            checked && "translate-x-[18px]"
+          )}
+        />
+      </button>
+    </div>
+  );
+}
+
+function VideoParameterRow({
+  children,
+  label,
+  showHelp = false,
+}: {
+  children: ReactNode;
+  label: string;
+  showHelp?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex h-5 items-center gap-1.5 text-sm font-medium leading-5 text-[#919191]">
+        <span>{label}</span>
+        {showHelp ? <HelpCircle className="h-3 w-3" /> : null}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function VideoRatioOptions({
+  onSelect,
+  selected,
+}: {
+  onSelect: (option: string) => void;
+  selected: string;
+}) {
+  const iconSizes: Record<string, { height: number; width: number }> = {
+    Auto: { height: 9, width: 12 },
+    "16:9": { height: 9, width: 16 },
+    "4:3": { height: 9, width: 12 },
+    "1:1": { height: 12, width: 12 },
+    "3:4": { height: 12, width: 9 },
+    "9:16": { height: 16, width: 9 },
+    "21:9": { height: 7, width: 16 },
+  };
+
+  return (
+    <div className="grid grid-cols-5 gap-2">
+      {VIDEO_RATIO_OPTIONS.map((option) => {
+        const isSelected = selected === option.label;
+        const iconSize = iconSizes[option.label];
+        return (
+          <button
+            className={cn(
+              "flex h-[62px] min-w-0 flex-col items-center justify-center gap-1 rounded-lg border-[0.5px] px-1 py-3 text-xs transition-colors duration-200",
+              isSelected
+                ? "border-white bg-white/10 text-[#f7f7f7]"
+                : "border-[#525252] bg-transparent text-[#919191] hover:bg-white/5 hover:text-[#f7f7f7]"
+            )}
+            data-selected={isSelected ? "true" : "false"}
+            key={option.label}
+            onClick={() => onSelect(option.label)}
+            type="button"
+          >
+            <span className="flex size-[17px] items-center justify-center">
+              <span
+                className="flex-none rounded-[2px] border-[1.5px] border-current"
+                style={{ height: iconSize.height, width: iconSize.width }}
+              />
+            </span>
+            <span>{option.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function VideoSegmentedOptions({
+  columns,
+  onSelect,
+  options,
+  selected,
+}: {
+  columns: 2 | 3 | 4;
+  onSelect: (option: string) => void;
+  options: string[];
+  selected: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "grid gap-2",
+        columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-3" : "grid-cols-4"
+      )}
+    >
+      {options.map((option) => (
+        <button
+          className={cn(
+            "h-8 min-w-0 rounded-lg border-[0.5px] px-2 text-xs transition-colors duration-200",
+            selected === option
+              ? "border-white bg-white/10 text-[#f7f7f7]"
+              : "border-[#525252] bg-transparent text-[#919191] hover:bg-white/5 hover:text-[#f7f7f7]"
+          )}
+          data-selected={selected === option ? "true" : "false"}
+          key={option}
+          onClick={() => onSelect(option)}
+          type="button"
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function VideoMotionLibraryPanel({
+  onClose,
+  onSelect,
+  presets,
+}: {
+  onClose: () => void;
+  onSelect: (snippet: string) => void;
+  presets: VideoCanvasMotionPreset[];
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [activeTab, setActiveTab] = useState<"plaza" | "favorites" | "mine">(
+    "plaza",
+  );
+  const [searchDraft, setSearchDraft] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [favoriteIds, setFavoriteIds] = useState<string[]>([]);
+  const [customMotions, setCustomMotions] = useState<
+    VideoCanvasCustomMotionPreset[]
+  >([]);
+  const [customEditorOpen, setCustomEditorOpen] = useState(false);
+  const [customName, setCustomName] = useState("");
+  const [customPrompt, setCustomPrompt] = useState("");
+  const [customPreviewUrl, setCustomPreviewUrl] = useState("");
+  const customPreviewInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+    try {
+      const storedFavorites = JSON.parse(
+        window.localStorage.getItem(VIDEO_MOTION_FAVORITES_STORAGE_KEY) || "[]",
+      );
+      if (Array.isArray(storedFavorites)) {
+        setFavoriteIds(
+          storedFavorites.filter(
+            (item): item is string => typeof item === "string",
+          ),
+        );
+      }
+    } catch {
+      setFavoriteIds([]);
+    }
+    try {
+      const storedMotions = JSON.parse(
+        window.localStorage.getItem(VIDEO_MOTION_CUSTOM_STORAGE_KEY) || "[]",
+      );
+      if (Array.isArray(storedMotions)) {
+        setCustomMotions(
+          storedMotions
+            .filter(
+              (item): item is Record<string, unknown> =>
+                Boolean(item) && typeof item === "object",
+            )
+            .map((item, index) => ({
+              id: String(item.id || `custom-${index + 1}`),
+              name: String(item.name || ""),
+              previewUrl: String(item.previewUrl || ""),
+              prompt: String(item.prompt || ""),
+              custom: true as const,
+            }))
+            .filter(
+              (item) => item.name && item.previewUrl && item.prompt,
+            ),
+        );
+      }
+    } catch {
+      setCustomMotions([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    window.localStorage.setItem(
+      VIDEO_MOTION_FAVORITES_STORAGE_KEY,
+      JSON.stringify(favoriteIds),
+    );
+  }, [favoriteIds, mounted]);
+
+  useEffect(() => {
+    if (!mounted) return;
+    window.localStorage.setItem(
+      VIDEO_MOTION_CUSTOM_STORAGE_KEY,
+      JSON.stringify(customMotions),
+    );
+  }, [customMotions, mounted]);
+
+  const allMotions = useMemo(
+    () => [...presets, ...customMotions],
+    [customMotions, presets],
+  );
+  const visibleMotions = useMemo(() => {
+    const source =
+      activeTab === "plaza"
+        ? presets
+        : activeTab === "favorites"
+          ? allMotions.filter((motion) => favoriteIds.includes(motion.id))
+          : customMotions;
+    const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
+    if (!normalizedQuery) return source;
+    return source.filter((motion) =>
+      motion.name.toLocaleLowerCase().includes(normalizedQuery),
+    );
+  }, [activeTab, allMotions, customMotions, favoriteIds, presets, searchQuery]);
+
+  const toggleFavorite = (id: string) => {
+    setFavoriteIds((current) =>
+      current.includes(id)
+        ? current.filter((favoriteId) => favoriteId !== id)
+        : [...current, id],
+    );
+  };
+
+  const closeCustomEditor = () => {
+    setCustomEditorOpen(false);
+    setCustomName("");
+    setCustomPrompt("");
+    setCustomPreviewUrl("");
+    if (customPreviewInputRef.current) {
+      customPreviewInputRef.current.value = "";
+    }
+  };
+
+  const saveCustomMotion = () => {
+    const name = customName.trim();
+    const prompt = customPrompt.trim();
+    if (!(name && prompt && customPreviewUrl)) return;
+    const nextMotion: VideoCanvasCustomMotionPreset = {
+      id: `custom-${Date.now()}`,
+      name,
+      previewUrl: customPreviewUrl,
+      prompt,
+      custom: true,
+    };
+    setCustomMotions((current) => [...current, nextMotion]);
+    closeCustomEditor();
+  };
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[800] flex items-center justify-center bg-black/35"
+      data-video-motion-library="true"
+      onClick={(event) => {
+        event.stopPropagation();
+        if (event.target === event.currentTarget) onClose();
+      }}
+      onMouseDown={(event) => {
+        event.stopPropagation();
+        if (event.target === event.currentTarget) onClose();
+      }}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <section
+        aria-label="运镜素材库"
+        aria-modal="true"
+        className="relative flex h-[min(604px,calc(100vh_-_24px))] w-[min(800px,calc(100vw_-_24px))] flex-col overflow-hidden rounded-[12px] border border-white/10 bg-[#202020] text-white shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
+        onMouseDown={(event) => event.stopPropagation()}
+        role="dialog"
+      >
+        <header className="flex h-[57px] shrink-0 items-center gap-3 border-b border-white/10 px-4">
+          <div aria-label="运镜分类" className="flex items-center gap-1" role="tablist">
+            {([
+              ["plaza", "运镜广场"],
+              ["favorites", "我的收藏"],
+              ["mine", "我的运镜"],
+            ] as const).map(([key, label]) => (
+              <button
+                aria-selected={activeTab === key}
+                className={cn(
+                  "h-8 rounded-[6px] px-3 text-[13px] text-white/58 transition-colors hover:bg-white/8 hover:text-white/88",
+                  activeTab === key && "bg-white/10 text-white",
+                )}
+                key={key}
+                onClick={() => {
+                  setActiveTab(key);
+                  setSearchDraft("");
+                  setSearchQuery("");
+                }}
+                role="tab"
+                type="button"
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <form
+            className="ml-auto flex h-[34px] w-[min(336px,42vw)] items-center rounded-[7px] border border-white/10 bg-black/20 px-2"
+            onSubmit={(event) => {
+              event.preventDefault();
+              setSearchQuery(searchDraft);
+            }}
+            role="search"
+          >
+            <button
+              aria-label="搜索"
+              className="flex size-6 shrink-0 items-center justify-center text-white/42 hover:text-white/75"
+              type="submit"
+            >
+              <Search className="size-4" />
+            </button>
+            <input
+              aria-label="搜索运镜名称"
+              className="h-full min-w-0 flex-1 bg-transparent px-1 text-[13px] text-white/82 outline-none placeholder:text-white/32"
+              onChange={(event) => setSearchDraft(event.target.value)}
+              placeholder="搜索运镜名称"
+              value={searchDraft}
+            />
+            {searchDraft ? (
+              <button
+                aria-label="清空搜索"
+                className="flex size-6 shrink-0 items-center justify-center text-white/38 hover:text-white/75"
+                onClick={() => {
+                  setSearchDraft("");
+                  setSearchQuery("");
+                }}
+                type="button"
+              >
+                <X className="size-3.5" />
+              </button>
+            ) : null}
+          </form>
+          <button
+            aria-label="关闭运镜素材库"
+            className="flex size-8 shrink-0 items-center justify-center rounded-[6px] text-white/45 hover:bg-white/8 hover:text-white"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="size-4" />
+          </button>
+        </header>
+
+        <div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto p-4">
+          {activeTab === "mine" ? (
+            <button
+              className="mb-4 flex h-8 items-center gap-1.5 rounded-[6px] bg-white px-3 text-[13px] font-medium text-black hover:bg-white/90"
+              onClick={() => setCustomEditorOpen(true)}
+              type="button"
+            >
+              <Plus className="size-3.5" />
+              新建运镜
+            </button>
+          ) : null}
+
+          {visibleMotions.length > 0 ? (
+            <div className="grid grid-cols-[repeat(4,168px)] justify-between gap-y-4 max-[760px]:grid-cols-3 max-[590px]:grid-cols-2 max-[410px]:grid-cols-1">
+              {visibleMotions.map((motion) => {
+                const favorite = favoriteIds.includes(motion.id);
+                return (
+                  <div
+                    className="group relative h-[187px] w-[168px] overflow-hidden rounded-[6px] bg-[#2a2a2a] text-left transition-colors hover:bg-[#323232]"
+                    key={motion.id}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onSelect(motion.prompt || motion.name);
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        onSelect(motion.prompt || motion.name);
+                      }
+                    }}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <img
+                      alt=""
+                      className="h-[168px] w-[168px] object-cover"
+                      draggable={false}
+                      src={motion.previewUrl}
+                    />
+                    <span className="absolute inset-x-0 top-[138px] h-[30px] bg-gradient-to-t from-black/55 to-transparent" />
+                    <button
+                      aria-label={favorite ? `取消收藏 ${motion.name}` : `收藏 ${motion.name}`}
+                      className={cn(
+                        "absolute right-2 top-2 flex size-7 items-center justify-center rounded-full bg-black/55 text-white opacity-0 transition-opacity hover:bg-black/75 group-hover:opacity-100",
+                        favorite && "opacity-100 text-[#ffd861]",
+                      )}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        toggleFavorite(motion.id);
+                      }}
+                      type="button"
+                    >
+                      <Star className="size-3.5" fill={favorite ? "currentColor" : "none"} />
+                    </button>
+                    <span className="block h-[19px] truncate px-1.5 text-[12px] leading-[19px] text-white/78">
+                      {motion.name}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="flex h-full min-h-[380px] items-center justify-center text-[13px] text-white/38">
+              {activeTab === "favorites"
+                ? "暂无收藏"
+                : searchQuery
+                  ? "暂无相关运镜"
+                  : "暂无自定义运镜"}
+            </div>
+          )}
+        </div>
+
+        {customEditorOpen ? (
+          <div
+            className="absolute inset-0 z-20 flex items-center justify-center bg-black/55"
+            onMouseDown={(event) => {
+              if (event.target === event.currentTarget) closeCustomEditor();
+            }}
+          >
+            <section
+              aria-label="自定义运镜"
+              aria-modal="true"
+              className="flex h-[350px] w-[min(526px,calc(100%_-_24px))] flex-col overflow-hidden rounded-[10px] border border-white/10 bg-[#272727] shadow-[0_18px_64px_rgba(0,0,0,0.55)]"
+              onMouseDown={(event) => event.stopPropagation()}
+              role="dialog"
+            >
+              <header className="flex h-12 shrink-0 items-center justify-between border-b border-white/10 px-4">
+                <h3 className="text-[15px] font-medium">自定义</h3>
+                <button
+                  aria-label="关闭自定义运镜"
+                  className="flex size-7 items-center justify-center rounded-[6px] text-white/45 hover:bg-white/8 hover:text-white"
+                  onClick={closeCustomEditor}
+                  type="button"
+                >
+                  <X className="size-4" />
+                </button>
+              </header>
+              <div className="grid min-h-0 flex-1 grid-cols-[150px_1fr] gap-4 px-4 py-3">
+                <div>
+                  <div className="mb-2 text-[12px] text-white/62">预览图</div>
+                  <input
+                    accept="image/*"
+                    className="sr-only"
+                    onChange={(event: ReactChangeEvent<HTMLInputElement>) => {
+                      const file = event.target.files?.[0];
+                      if (!file) return;
+                      const reader = new FileReader();
+                      reader.onload = () => {
+                        if (typeof reader.result === "string") {
+                          setCustomPreviewUrl(reader.result);
+                        }
+                      };
+                      reader.readAsDataURL(file);
+                    }}
+                    ref={customPreviewInputRef}
+                    type="file"
+                  />
+                  <button
+                    aria-label="上传运镜预览图"
+                    className="flex size-[150px] items-center justify-center overflow-hidden rounded-[7px] border border-dashed border-white/18 bg-black/15 text-white/38 hover:border-white/30 hover:text-white/62"
+                    onClick={() => customPreviewInputRef.current?.click()}
+                    type="button"
+                  >
+                    {customPreviewUrl ? (
+                      <img alt="运镜预览" className="size-full object-cover" src={customPreviewUrl} />
+                    ) : (
+                      <FolderOpen className="size-7" />
+                    )}
+                  </button>
+                </div>
+                <div className="flex min-w-0 flex-col gap-3">
+                  <label className="block">
+                    <span className="mb-2 block text-[12px] text-white/62">运镜名称</span>
+                    <input
+                      className="h-9 w-full rounded-[7px] border border-white/10 bg-black/18 px-3 text-[13px] text-white/82 outline-none placeholder:text-white/30 focus:border-white/25"
+                      maxLength={40}
+                      onChange={(event) => setCustomName(event.target.value)}
+                      placeholder="名称"
+                      value={customName}
+                    />
+                  </label>
+                  <label className="min-h-0 flex-1">
+                    <span className="mb-2 block text-[12px] text-white/62">运镜提示词</span>
+                    <textarea
+                      className="h-[92px] w-full resize-none rounded-[7px] border border-white/10 bg-black/18 px-3 py-2 text-[13px] leading-5 text-white/82 outline-none placeholder:text-white/30 focus:border-white/25"
+                      maxLength={500}
+                      onChange={(event) => setCustomPrompt(event.target.value)}
+                      placeholder="输入运镜提示词"
+                      value={customPrompt}
+                    />
+                  </label>
+                </div>
+              </div>
+              <footer className="flex h-[58px] shrink-0 items-center justify-end border-t border-white/10 px-4">
+                <button
+                  className="h-8 rounded-[6px] bg-white px-5 text-[13px] font-medium text-black transition disabled:cursor-not-allowed disabled:bg-white/12 disabled:text-white/28"
+                  disabled={!(customPreviewUrl && customName.trim() && customPrompt.trim())}
+                  onClick={saveCustomMotion}
+                  type="button"
+                >
+                  保存
+                </button>
+              </footer>
+            </section>
+          </div>
+        ) : null}
+      </section>
+    </div>,
+    document.body,
+  );
+}
+
+function VideoMotionPresetPopover({
+  onSelect,
+  presets = defaultVideoCanvasMotionPresets,
+}: {
+  onSelect: (snippet: string) => void;
+  presets?: VideoCanvasMotionPreset[];
+}) {
+  return (
+    <div className="absolute left-5 top-[126px] z-50 w-[560px] rounded-[14px] border border-white/10 bg-[#1f1f1f] p-3 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
+      <div className="grid grid-cols-4 gap-2">
+        {presets.slice(0, 8).map((preset) => (
+          <button
+            className="group h-[92px] overflow-hidden rounded-[10px] border border-white/8 bg-[#292929] text-left transition hover:border-white/18 hover:bg-[#303030]"
+            key={preset.id}
+            onClick={() => onSelect(preset.prompt || preset.name)}
+            type="button"
+          >
+            <img alt="" className="block h-[56px] w-full object-cover" src={preset.previewUrl} />
+            <span className="block px-2 py-2 text-[12px] text-white/74">{preset.name}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function VideoEffectPresetPopover({ onSelect }: { onSelect: (title: string) => void }) {
+  return (
+    <div className="absolute left-5 top-[126px] z-50 w-[760px] rounded-[14px] border border-white/10 bg-[#1f1f1f] p-3 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
+      <div className="grid grid-cols-3 gap-3">
+        {VIDEO_EFFECT_PRESETS.map((effect, index) => (
+          <button
+            className="overflow-hidden rounded-[11px] border border-white/8 bg-[#292929] text-left transition hover:border-white/18 hover:bg-[#303030]"
+            key={effect.title}
+            onClick={() => onSelect(effect.title)}
+            type="button"
+          >
+            <span className="relative block h-[76px] bg-[radial-gradient(circle_at_32%_28%,rgba(255,255,255,0.22),transparent_32%),linear-gradient(135deg,rgba(124,143,255,0.28),rgba(255,116,116,0.08))]">
+              <span className="absolute left-2 top-2 rounded-[5px] bg-black/42 px-1.5 py-0.5 text-[10px] text-white/70">商用</span>
+              <span className="absolute bottom-2 right-2 text-[11px] text-white/44">☆</span>
+            </span>
+            <span className="block px-3 py-2">
+              <span className="block text-[13px] font-medium text-white/82">{effect.title}</span>
+              <span className="mt-1 flex items-center justify-between text-[11px] text-white/38">
+                <span>{effect.author}</span>
+                <span>{effect.count + index}</span>
+              </span>
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function VideoRoleLibraryPanel({
+  onApply,
+  onClose,
+  presets,
+  selectedRoleIds,
+}: {
+  onApply: (selectedRoleIds: string[]) => void;
+  onClose: () => void;
+  presets: VideoCanvasRolePreset[];
+  selectedRoleIds: string[];
+}) {
+  const [activeTab, setActiveTab] = useState<"public" | "compliant">("public");
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(
+    () => new Set(selectedRoleIds),
+  );
+  const visiblePresets =
+    activeTab === "compliant"
+      ? presets.filter((preset) => preset.compliant && preset.assetId)
+      : presets;
+
+  useEffect(() => {
+    setSelectedIds(new Set(selectedRoleIds));
+  }, [selectedRoleIds]);
+
+  const toggleRole = (roleId: string) => {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      if (next.has(roleId)) {
+        next.delete(roleId);
+        return next;
+      }
+      if (next.size >= 4) {
+        toast.info("最多选择 4 个角色素材");
+        return current;
+      }
+      next.add(roleId);
+      return next;
+    });
+  };
+
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        className="fixed inset-0 z-[640] bg-black/70"
+        data-canvas-overlay="true"
+        onClick={onClose}
+      />
+      <section
+        className="fixed bottom-[56px] left-[7.6vw] right-[7.6vw] top-[56px] z-[650] flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-[#262626] bg-[#0f0f0f] text-white shadow-[0_28px_90px_rgba(0,0,0,0.58)]"
+        data-canvas-overlay="true"
+        data-video-role-library="true"
+      >
+        <div className="flex h-[49px] shrink-0 items-center justify-between border-b border-[#242424] px-4">
+          <div className="flex h-full items-center gap-9 text-[14px]">
+            <button
+              className={cn(
+                "relative h-full text-white/45 transition-colors hover:text-white/76",
+                activeTab === "public" && "text-white",
+              )}
+              onClick={() => setActiveTab("public")}
+              type="button"
+            >
+              公共角色库
+              {activeTab === "public" ? (
+                <span className="absolute inset-x-0 bottom-0 h-px bg-white" />
+              ) : null}
+            </button>
+            <button
+              className={cn(
+                "relative h-full text-white/45 transition-colors hover:text-white/76",
+                activeTab === "compliant" && "text-white",
+              )}
+              onClick={() => setActiveTab("compliant")}
+              type="button"
+            >
+              Seedance2.0合规素材库
+              {activeTab === "compliant" ? (
+                <span className="absolute inset-x-0 bottom-0 h-px bg-white" />
+              ) : null}
+            </button>
+          </div>
+          <button
+            aria-label="关闭角色素材库"
+            className="flex size-6 items-center justify-center rounded-lg text-white/45 transition hover:bg-white/8 hover:text-white"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex min-h-0 flex-1 flex-col px-4 pb-4 pt-4">
+          <div className="mb-3 flex shrink-0 items-center justify-between">
+            <div>
+              <div className="text-[14px] font-medium text-white/82">
+                {activeTab === "public" ? "选择公共角色" : "已通过 Seedance2.0 合规校验的角色"}
+              </div>
+              <div className="mt-1 text-[12px] text-white/38">
+                {activeTab === "public"
+                  ? "角色身份和一致性规则会作为结构化素材传入视频模型。"
+                  : "带合规资产 ID 的素材在生成时使用 asset:// 引用。"}
+              </div>
+            </div>
+            <div className="rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-[12px] text-white/58">
+              已选 {selectedIds.size}/4
+            </div>
+          </div>
+
+          <div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto rounded-[12px] border border-white/6 bg-[#151515] p-4">
+            {visiblePresets.length > 0 ? (
+              <div className="grid grid-cols-6 gap-4">
+                {visiblePresets.map((preset) => {
+                  const selected = selectedIds.has(preset.id);
+                  return (
+                    <button
+                      aria-pressed={selected}
+                      className={cn(
+                        "group relative min-w-0 overflow-hidden rounded-[10px] border bg-[#202020] text-left transition",
+                        selected
+                          ? "border-white shadow-[0_0_0_1px_rgba(255,255,255,0.85)]"
+                          : "border-white/8 hover:border-white/24",
+                      )}
+                      key={preset.id}
+                      onClick={() => toggleRole(preset.id)}
+                      type="button"
+                    >
+                      <span className="relative block aspect-[3/4] overflow-hidden bg-[#242424]">
+                        <img
+                          alt={preset.name}
+                          className="size-full object-cover object-top transition duration-300 group-hover:scale-[1.02]"
+                          src={preset.images.full}
+                        />
+                        {selected ? (
+                          <span className="absolute inset-0 bg-black/24" />
+                        ) : null}
+                        {preset.compliant && preset.assetId ? (
+                          <span
+                            className="absolute left-2 top-2 flex size-5 items-center justify-center rounded-full bg-[#09caf5] text-black"
+                            title="Seedance2.0 合规素材"
+                          >
+                            <Check className="h-3 w-3" strokeWidth={3} />
+                          </span>
+                        ) : null}
+                        {selected ? (
+                          <span className="absolute bottom-2 left-2 rounded-md bg-white px-2 py-1 text-[11px] font-medium text-black">
+                            已选择
+                          </span>
+                        ) : null}
+                      </span>
+                      <span className="block px-3 py-2.5">
+                        <span className="block truncate text-[13px] font-medium text-white/84">
+                          {preset.name}
+                        </span>
+                        <span className="mt-1 block truncate text-[11px] text-white/36">
+                          {preset.tags}
+                        </span>
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="flex h-full min-h-[320px] items-center justify-center text-[13px] text-white/38">
+                暂无素材
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex h-[60px] shrink-0 items-center justify-between border-t border-[#242424] px-4">
+          <div className="text-[12px] text-white/38">
+            {activeTab === "public" ? `共 ${visiblePresets.length} 个公共角色` : `共 ${visiblePresets.length} 个合规素材`}
+          </div>
+          <button
+            className="h-8 rounded-lg bg-white px-4 text-[13px] font-medium text-black transition hover:bg-white/90"
+            onClick={() => onApply(Array.from(selectedIds))}
+            type="button"
+          >
+            确定
+          </button>
+        </div>
+      </section>
+    </>
+  );
+}
+
+function VideoRoleAgreementModal({
+  onAgree,
+  onClose,
+}: {
+  onAgree: () => void;
+  onClose: () => void;
+}) {
+  const [accepted, setAccepted] = useState(false);
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[800] bg-black/60" data-canvas-overlay="true" />
+      <section
+        className="fixed left-1/2 top-1/2 z-[801] flex h-[530px] w-[740px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[12px] border border-[#525252] bg-[#1f1f1f] text-white shadow-[0_28px_90px_rgba(0,0,0,0.62)]"
+        data-canvas-overlay="true"
+        data-video-role-agreement="true"
+      >
+        <div className="flex h-[60px] shrink-0 items-center justify-between border-b border-[#525252] px-4">
+          <h3 className="text-[16px] font-medium text-white/90">Seedance2.0模型使用承诺书</h3>
+          <button
+            aria-label="关闭承诺书"
+            className="flex size-7 items-center justify-center rounded-lg text-white/48 transition hover:bg-white/8 hover:text-white"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="tiny-scrollbar min-h-0 flex-1 space-y-3 overflow-y-auto px-6 pt-6 text-[14px] leading-[1.7]">
+          <p className="text-white/82">
+            为保障您依法合规使用Seedance2.0模型所提供的相关服务，请您在使用前务必仔细阅读、充分理解并做出以下承诺：
+          </p>
+          <div className="space-y-2">
+            <p className="font-medium text-white/86">1. 您对即将上传或使用的素材拥有充分合法权益</p>
+            <ul className="list-disc space-y-1 pl-5 text-[13px] text-white/48">
+              <li>包括但不限于图片/视频/音频/文本/人物形象/虚拟人像/声音/品牌元素等。</li>
+              <li>如所上传素材可能涉及任何他人肖像/声音/生物识别特征、或商标/版权内容等知识产权元素，请务必确保您已获得充分授权，未侵害任何第三方合法权益。</li>
+            </ul>
+          </div>
+          <div className="space-y-2">
+            <p className="font-medium text-white/86">2. 您将自行对所生成内容及使用后果负责</p>
+            <ul className="list-disc pl-5 text-[13px] text-white/48">
+              <li>您充分理解AI生成结果具有不确定性，是否对生成内容进行发布、传播、或商业使用，均由您自行判断并承担相应法律责任。</li>
+            </ul>
+          </div>
+          <div className="space-y-2">
+            <p className="font-medium text-white/86">3. 如您存在违规使用行为，平台将有权采取限制措施</p>
+            <ul className="list-disc pl-5 text-[13px] text-white/48">
+              <li>一切对包含第三方合法权益素材的滥用，均将视为违规行为。平台将可能采取包括但不限于拦截生成、删除内容、限制下载、暂停或终止服务等措施。如因此给平台或第三方造成损失，您需自行承担赔偿责任。</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="shrink-0 space-y-4 bg-[#1f1f1f] px-6 pb-4 pt-4">
+          <button
+            className="flex w-full cursor-pointer items-start gap-3 text-left"
+            onClick={() => setAccepted((current) => !current)}
+            type="button"
+          >
+            <span
+              className={cn(
+                "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded border",
+                accepted ? "border-white bg-white text-black" : "border-white/42 bg-transparent",
+              )}
+            >
+              {accepted ? <Check className="h-3 w-3" strokeWidth={3} /> : null}
+            </span>
+            <span className="text-[13px] leading-normal text-white/78">
+              我已阅读并同意上述《Seedance2.0模型使用承诺书》
+            </span>
+          </button>
+          <div className="flex items-center justify-end gap-3">
+            <button
+              className="h-8 rounded-lg px-3 text-[13px] text-white/78 transition hover:bg-white/8"
+              onClick={onClose}
+              type="button"
+            >
+              不同意
+            </button>
+            <button
+              className="h-8 rounded-lg bg-white px-3 text-[13px] text-black transition hover:bg-white/90 disabled:cursor-not-allowed disabled:bg-white/20 disabled:text-white/32"
+              disabled={!accepted}
+              onClick={onAgree}
+              type="button"
+            >
+              同意并使用
+            </button>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+function VideoRoleConsentPopover({
+  onCancel,
+  onUse,
+}: {
+  onCancel: () => void;
+  onUse: () => void;
+}) {
+  const [accepted, setAccepted] = useState(false);
+
+  return (
+    <div className="absolute left-[260px] top-[96px] z-50 w-[520px] rounded-[16px] border border-white/10 bg-[#202020] p-5 shadow-[0_26px_90px_rgba(0,0,0,0.56)]">
+      <div className="mb-3 text-[17px] font-semibold text-white/88">Seedance2.0模型使用承诺书</div>
+      <div className="max-h-[140px] overflow-y-auto rounded-[10px] border border-white/8 bg-[#181818] p-3 text-[12px] leading-6 text-white/48">
+        使用公共角色库前，请确认素材来源、肖像授权与生成内容合规。该本地弹层用于复刻角色库进入前的确认流程，不会代替用户在竞品页面作出承诺。
+      </div>
+      <label className="mt-4 flex cursor-pointer items-center gap-2 text-[13px] text-white/66">
+        <input
+          checked={accepted}
+          className="h-4 w-4 accent-white"
+          onChange={(event) => setAccepted(event.target.checked)}
+          type="checkbox"
+        />
+        我已阅读并同意上述《Seedance2.0模型使用承诺书》
+      </label>
+      <div className="mt-5 flex justify-end gap-2">
+        <button
+          className="h-10 rounded-[9px] border border-white/10 px-4 text-[13px] text-white/62 transition hover:bg-white/8 hover:text-white"
+          onClick={onCancel}
+          type="button"
+        >
+          不同意
+        </button>
+        <button
+          className="h-10 rounded-[9px] bg-white px-4 text-[13px] font-semibold text-black transition disabled:cursor-not-allowed disabled:bg-white/20 disabled:text-white/32"
+          disabled={!accepted}
+          onClick={onUse}
+          type="button"
+        >
+          同意并使用
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function ComposerPopover({
   customOptions,
   menu,
@@ -9531,6 +18532,7 @@ function ComposerPopover({
     count: ["1张", "2张", "4张"].map((value) => ({ label: value, value })),
     duration: ["5s", "10s"].map((value) => ({ label: value, value })),
     mark: ["添加人物标记", "添加构图标记", "添加动作标记"].map((value) => ({ label: value, value })),
+    mode: [],
     model: [],
     panorama: ["全景", "半身", "近景"].map((value) => ({ label: value, value })),
     ratio: ["16:9", "9:16", "1:1", "4:3"].map((value) => ({ label: value, value })),
@@ -9597,29 +18599,149 @@ function ComposerControl({
   );
 }
 
+function CanvasAddMenuButton({
+  badge,
+  description,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  badge?: string;
+  description: string;
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+}) {
+  void description;
+
+  return (
+    <button
+      className="flex h-8 w-full cursor-pointer items-center gap-2 rounded-[8px] px-2 text-left text-[13px] font-medium leading-5 text-white transition-colors duration-150 hover:bg-white/10"
+      onClick={onClick}
+      type="button"
+    >
+      <span className="flex min-w-0 items-center gap-2">
+        <Icon className="h-3.5 w-3.5 shrink-0 text-white/60" />
+        <span className="flex min-w-0 items-center gap-1.5">
+          <span className="min-w-0 truncate">{label}</span>
+          <CanvasAddBadge badge={badge} />
+        </span>
+      </span>
+    </button>
+  );
+}
+
+function CanvasAddBadge({ badge }: { badge?: string }) {
+  if (!badge) return null;
+
+  return (
+    <span
+      className={cn(
+        "flex h-4 shrink-0 items-center justify-center rounded-[4px] text-[10px] font-medium leading-4",
+        badge === "NEW" ? "w-9" : "w-[34px]"
+      )}
+      style={
+        badge === "NEW"
+          ? { backgroundColor: "rgba(60, 181, 204, 0.25)", color: "rgb(93, 220, 255)" }
+          : { backgroundColor: "rgba(255, 255, 255, 0.15)", color: "rgba(255, 255, 255, 0.6)" }
+      }
+    >
+      {badge}
+    </span>
+  );
+}
+
+function CanvasAddSubmenu({
+  badge,
+  description,
+  icon: Icon,
+  label,
+  onPrimary,
+  onSelect,
+  options,
+}: {
+  badge?: string;
+  description: string;
+  icon: LucideIcon;
+  label: string;
+  onPrimary: () => void;
+  onSelect: (action: string) => void;
+  options: Array<{ action: string; badge?: string; description: string; label: string }>;
+}) {
+  void description;
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div
+      className="relative"
+      onPointerEnter={() => setIsOpen(true)}
+      onPointerLeave={() => setIsOpen(false)}
+    >
+      <button
+        className="flex h-8 w-full cursor-pointer items-center gap-2 rounded-[8px] px-2 text-left text-[13px] font-medium leading-5 text-white transition-colors duration-150 hover:bg-white/10"
+        onFocus={() => setIsOpen(true)}
+        onClick={onPrimary}
+        type="button"
+      >
+        <span className="flex min-w-0 items-center gap-2">
+          <Icon className="h-3.5 w-3.5 shrink-0 text-white/60" />
+          <span className="flex min-w-0 items-center gap-1.5">
+            <span className="min-w-0 truncate">{label}</span>
+            <CanvasAddBadge badge={badge} />
+          </span>
+        </span>
+      </button>
+      {isOpen ? (
+        <div className="absolute left-full top-0 z-[95] w-[204px] pl-2">
+        <div
+          className="flex w-[196px] flex-col gap-1 rounded-[16px] border-[0.5px] border-[#363636] p-2 shadow-[0_24px_70px_rgba(0,0,0,0.48)] backdrop-blur-[32px]"
+          style={{ backgroundColor: "rgb(38, 38, 38)" }}
+        >
+          {options.map((option) => (
+            <button
+              className="flex h-8 items-center gap-1.5 rounded-[8px] px-2 text-left text-[13px] font-medium leading-5 text-white hover:bg-white/10"
+              key={option.action}
+              onClick={() => onSelect(option.action)}
+              type="button"
+            >
+              <span className="min-w-0 truncate">{option.label}</span>
+              <CanvasAddBadge badge={option.badge} />
+            </button>
+          ))}
+        </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 function CanvasCommandPalette({
   onClose,
   onCreate,
   onGallerySelect,
+  onHistorySelect,
   onUploadFiles,
   state,
 }: {
   onClose: () => void;
   onCreate: (kind: CanvasCreateKind) => void;
   onGallerySelect: () => void;
+  onHistorySelect: () => void;
   onUploadFiles: (files: File[]) => void;
   state: NonNullable<CanvasCommandState>;
 }) {
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  void onClose;
 
   return (
     <div
-      className="fixed z-[90] flex w-[240px] flex-col gap-2 rounded-[16px] border border-white/10 bg-[#202020]/96 p-2 text-white shadow-[0_28px_80px_rgba(0,0,0,0.56)] backdrop-blur-[32px]"
+      className="fixed z-[90] flex w-[196px] flex-col gap-1 rounded-[16px] border-[0.5px] border-[#363636] p-2 text-white shadow-[0_28px_80px_rgba(0,0,0,0.56)] backdrop-blur-[32px]"
       data-canvas-overlay="true"
       onPointerDown={(event) => event.stopPropagation()}
       style={{
-        left: `min(${state.screenX}px, calc(100vw - 256px))`,
-        top: `min(${state.screenY}px, calc(100vh - 540px))`,
+        backgroundColor: "rgb(38, 38, 38)",
+        left: `min(${state.screenX}px, calc(100vw - 212px))`,
+        top: `min(${state.screenY}px, calc(100vh - 461px))`,
       }}
     >
       <input
@@ -9634,74 +18756,57 @@ function CanvasCommandPalette({
         ref={uploadInputRef}
         type="file"
       />
-      <div className="mb-2 flex items-center justify-between px-2 py-1">
+      <div className="flex h-8 items-center px-2">
         <h4 className="text-[14px] font-medium leading-5 text-white/60">添加节点</h4>
-        <button className="flex h-7 w-7 items-center justify-center rounded-[8px] text-white/48 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
-          <X className="h-4 w-4" />
-        </button>
       </div>
 
-      {ADD_NODE_MODULES.map((item) => {
-        const Icon = item.icon;
-        return (
-          <button
-            className="group flex h-[52px] w-full cursor-pointer items-center gap-2 rounded-[12px] px-2 py-2 text-left text-white/82 transition-colors duration-200 hover:bg-white/8"
-            key={item.kind}
-            onClick={() => onCreate(item.kind)}
-            type="button"
-          >
-            <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
-              <Icon className="h-5 w-5" />
-            </span>
-            <span className="h-full min-w-0 flex-1 overflow-hidden">
-              <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
-                <span className="flex items-center gap-1.5 text-[14px] font-medium leading-5">
-                  {item.label}
-                  {item.badge ? <span className="rounded-[4px] bg-white/10 px-1.5 py-0.5 text-[10px] leading-3 text-white/50">{item.badge}</span> : null}
-                </span>
-                <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
-                  {item.description}
-                </span>
-              </span>
-            </span>
-          </button>
-        );
-      })}
-      <h4 className="px-2 py-1 text-[14px] font-medium leading-5 text-white/60">添加资源</h4>
-      <button
-        className="group flex h-[52px] w-full cursor-pointer items-center gap-2 rounded-[12px] px-2 py-2 text-left text-white/82 transition-colors duration-200 hover:bg-white/8"
+      {ADD_NODE_PRIMARY_MODULES.map((item) => (
+        <CanvasAddMenuButton
+          badge={item.badge}
+          description={item.description}
+          icon={item.icon}
+          key={item.kind}
+          label={item.label}
+          onClick={() => onCreate(item.kind)}
+        />
+      ))}
+      <CanvasAddSubmenu
+        description="创意脚本、生成故事板"
+        icon={Layers}
+        label="脚本"
+        onPrimary={() => undefined}
+        onSelect={(action) => {
+          onCreate(action === "legacy" ? "legacy-script" : "script");
+        }}
+        options={SCRIPT_SUBMENU_OPTIONS}
+      />
+      <CanvasAddSubmenu
+        badge="NEW"
+        description="新增风格或特效素材节点"
+        icon={Sparkles}
+        label="素材库"
+        onPrimary={onGallerySelect}
+        onSelect={(action) => {
+          toast.info(action === "style" ? "风格库节点待接入。" : "特效库节点待接入。");
+          onGallerySelect();
+        }}
+        options={ASSET_LIBRARY_SUBMENU_OPTIONS}
+      />
+      <div className="flex h-8 items-center px-2">
+        <h4 className="text-[14px] font-medium leading-5 text-white/60">添加资源</h4>
+      </div>
+      <CanvasAddMenuButton
+        description="可上传图片、视频、音频文件"
+        icon={Upload}
+        label="上传"
         onClick={() => uploadInputRef.current?.click()}
-        type="button"
-      >
-        <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
-          <Upload className="h-5 w-5" />
-        </span>
-        <span className="h-full min-w-0 flex-1 overflow-hidden">
-          <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
-            <span className="text-[14px] font-medium leading-5">上传</span>
-            <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
-              可上传图片、视频、音频文件
-            </span>
-          </span>
-        </span>
-      </button>
-      <button
-        className="group flex h-[52px] w-full cursor-pointer items-center gap-2 rounded-[12px] px-2 py-2 text-left text-white/82 transition-colors duration-200 hover:bg-white/8"
-        onClick={onGallerySelect}
-        type="button"
-      >
-        <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
-          <Layers className="h-5 w-5" />
-        </span>
-        <span className="h-full min-w-0 flex-1 overflow-hidden">
-          <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
-            <span className="text-[14px] font-medium leading-5">从图库选择</span>
-            <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
-              从历史生成中选择素材
-            </span>
-          </span>
-        </span>
-      </button>
+      />
+      <CanvasAddMenuButton
+        description="从历史生成中选择素材"
+        icon={Layers}
+        label="从生成历史选择"
+        onClick={onHistorySelect}
+      />
     </div>
   );
 }
@@ -9714,7 +18819,7 @@ function ConnectionAddMenu({
 }: {
   node: CloneNode;
   onClose: () => void;
-  onCreate: (kind: Exclude<AddModuleKind, "audio">) => void;
+  onCreate: (kind: Exclude<AddModuleKind, "audio" | "director">) => void;
   state: NonNullable<ConnectionMenuState>;
 }) {
   const title = state.side === "target" ? "添加上下文" : "引用该节点生成";
@@ -9834,36 +18939,147 @@ function NodeContextMenu({
   );
 }
 
-function CloneEdges({ edges, nodes }: { edges: CloneEdge[]; nodes: CloneNode[] }) {
+function getCanvasEdgePath(startX: number, startY: number, endX: number, endY: number) {
+  const deltaX = endX - startX;
+  const curve = deltaX >= 0 ? Math.max(60, 6.25 * Math.sqrt(Math.max(deltaX, 1))) : Math.max(60, Math.min(180, Math.abs(deltaX) * 0.5));
+  return `M ${startX} ${startY} C ${startX + curve} ${startY}, ${endX - curve} ${endY}, ${endX} ${endY}`;
+}
+
+function getCanvasEdgeMidpoint(startX: number, startY: number, endX: number, endY: number) {
+  const deltaX = endX - startX;
+  const curve = deltaX >= 0 ? Math.max(60, 6.25 * Math.sqrt(Math.max(deltaX, 1))) : Math.max(60, Math.min(180, Math.abs(deltaX) * 0.5));
+  const c1 = { x: startX + curve, y: startY };
+  const c2 = { x: endX - curve, y: endY };
+  const t = 0.5;
+  const mt = 1 - t;
+  const x = mt ** 3 * startX + 3 * mt ** 2 * t * c1.x + 3 * mt * t ** 2 * c2.x + t ** 3 * endX;
+  const y = mt ** 3 * startY + 3 * mt ** 2 * t * c1.y + 3 * mt * t ** 2 * c2.y + t ** 3 * endY;
+  const dx = 3 * mt ** 2 * (c1.x - startX) + 6 * mt * t * (c2.x - c1.x) + 3 * t ** 2 * (endX - c2.x);
+  const dy = 3 * mt ** 2 * (c1.y - startY) + 6 * mt * t * (c2.y - c1.y) + 3 * t ** 2 * (endY - c2.y);
+  return { angle: Math.atan2(dy, dx) * (180 / Math.PI), x, y };
+}
+
+function CloneEdges({
+  edges,
+  nodes,
+  onDeleteEdge,
+  onEdgePointerDown,
+  preview,
+  selectedEdgeId,
+}: {
+  edges: CloneEdge[];
+  nodes: CloneNode[];
+  onDeleteEdge: (edgeId: string) => void;
+  onEdgePointerDown: (event: ReactPointerEvent<SVGPathElement>, edgeId: string) => void;
+  preview?: { endX: number; endY: number; startX: number; startY: number } | null;
+  selectedEdgeId?: string | null;
+}) {
   const nodeMap = new Map(nodes.map((node) => [node.id, node]));
+  const renderedEdges = edges
+    .map((edge) => {
+      const source = nodeMap.get(edge.source);
+      const target = nodeMap.get(edge.target);
+      if (!source || !target) return null;
+      const startX = source.x + source.width;
+      const startY = source.y + source.height / 2;
+      const endX = target.x;
+      const endY = target.y + target.height / 2;
+      const path = getCanvasEdgePath(startX, startY, endX, endY);
+      const selected = edge.id === selectedEdgeId;
+      const midpoint = selected ? getCanvasEdgeMidpoint(startX, startY, endX, endY) : null;
+      return { edge, midpoint, path, selected };
+    })
+    .filter(
+      (
+        item,
+      ): item is {
+        edge: CloneEdge;
+        midpoint: ReturnType<typeof getCanvasEdgeMidpoint> | null;
+        path: string;
+        selected: boolean;
+      } => item !== null,
+    );
+
   return (
-    <svg className="pointer-events-none absolute left-0 top-0 overflow-visible" style={{ height: CANVAS_EXTENT, width: CANVAS_EXTENT }}>
-      {edges.map((edge) => {
-        const source = nodeMap.get(edge.source);
-        const target = nodeMap.get(edge.target);
-        if (!source || !target) return null;
-        const startX = source.x + source.width;
-        const startY = source.y + source.height / 2;
-        const endX = target.x;
-        const endY = target.y + target.height / 2;
-        const deltaX = endX - startX;
-        const curve = deltaX >= 0 ? Math.max(60, 6.25 * Math.sqrt(Math.max(deltaX, 1))) : Math.max(60, Math.min(180, Math.abs(deltaX) * 0.5));
-        const path = `M ${startX} ${startY} C ${startX + curve} ${startY}, ${endX - curve} ${endY}, ${endX} ${endY}`;
-        return (
-          <g key={edge.id}>
+    <>
+      <svg className="pointer-events-none absolute left-0 top-0 overflow-visible" style={{ height: CANVAS_EXTENT, width: CANVAS_EXTENT }}>
+        {renderedEdges.map(({ edge, path, selected }) => (
+          <g
+            className={cn("react-flow__edge react-flow__edge-default nopan selectable", selected && "selected")}
+            data-id={edge.id}
+            key={edge.id}
+          >
             <path
               d={path}
               fill="none"
-              stroke="#86909c"
+              onPointerDown={(event) => onEdgePointerDown(event, edge.id)}
+              stroke="transparent"
               strokeLinecap="round"
-              strokeOpacity="0.98"
-              strokeWidth="2"
+              strokeWidth="16"
+              style={{ pointerEvents: "stroke" }}
+            />
+            {selected ? (
+              <path
+                d={path}
+                fill="none"
+                stroke="#a7afff"
+                strokeLinecap="round"
+                strokeOpacity="0.28"
+                strokeWidth="8"
+              />
+            ) : null}
+            <path
+              d={path}
+              fill="none"
+              stroke={selected ? "#a7afff" : "#86909c"}
+              strokeLinecap="round"
+              strokeOpacity={selected ? "1" : "0.98"}
+              strokeWidth={selected ? "2.8" : "2"}
             />
             <EdgeFlowSegments pathD={path} uniqueId={edge.id} visible />
           </g>
-        );
-      })}
-    </svg>
+        ))}
+        {preview ? (
+          <g>
+            <path
+              d={getCanvasEdgePath(preview.startX, preview.startY, preview.endX, preview.endY)}
+              fill="none"
+              stroke="#a7afff"
+              strokeDasharray="10 8"
+              strokeLinecap="round"
+              strokeOpacity="0.92"
+              strokeWidth="2.5"
+            />
+            <circle cx={preview.endX} cy={preview.endY} fill="#a7afff" opacity="0.95" r="5" />
+            <circle cx={preview.endX} cy={preview.endY} fill="none" opacity="0.32" r="13" stroke="#a7afff" strokeWidth="2" />
+          </g>
+        ) : null}
+      </svg>
+      <div className="pointer-events-none absolute left-0 top-0 z-[35] overflow-visible" style={{ height: CANVAS_EXTENT, width: CANVAS_EXTENT }}>
+        {renderedEdges.map(({ edge, midpoint }) =>
+          midpoint ? (
+            <button
+              className="scissors-enter pointer-events-auto absolute z-[36] flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-white/10 bg-[#1e1e1e]/95 text-white/70 shadow-[0_16px_42px_rgba(0,0,0,0.42)] transition hover:bg-[#272727] hover:text-white"
+              key={`delete-${edge.id}`}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onDeleteEdge(edge.id);
+              }}
+              onPointerDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              }}
+              style={{ left: midpoint.x, top: midpoint.y }}
+              title="删除连线"
+              type="button"
+            >
+              <Scissors className="h-7 w-7" style={{ transform: `rotate(${Math.round(midpoint.angle - 90)}deg)` }} />
+            </button>
+          ) : null,
+        )}
+      </div>
+    </>
   );
 }
 
@@ -10033,15 +19249,23 @@ function EdgeFlowSegments({
 }
 
 function CloneCanvasNode({
+  connectionsHidden,
+  connectionHoverActive,
   onClearGridSplit,
   onClearGridSplitSelection,
   onClearLocalEditRegions,
   node,
   onCancelGeneration,
   onContextMenu,
+  onExtractVideoFrame,
+  onGenerateVideoHd,
   onModuleAction,
   onOpenConnectionMenu,
+  onOpenScriptWorkflow,
   onPointerDown,
+  onStartConnectionDrag,
+  onStartConnectionMouseDrag,
+  onRunNode,
   onSetLocalEditMode,
   onSubmitLocalEdit,
   onToggleGridSplitSelection,
@@ -10049,15 +19273,23 @@ function CloneCanvasNode({
   onTextResourceChange,
   selected,
 }: {
+  connectionsHidden: boolean;
+  connectionHoverActive: boolean;
   onClearGridSplit: () => void;
   onClearGridSplitSelection: () => void;
   onClearLocalEditRegions: () => void;
   node: CloneNode;
   onCancelGeneration: () => void;
   onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
+  onExtractVideoFrame: (kind: VideoFrameExtractionKind) => void;
+  onGenerateVideoHd: () => void;
   onModuleAction: (actionLabel: TargetModuleActionLabel) => void;
   onOpenConnectionMenu: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
+  onOpenScriptWorkflow: () => void;
   onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onStartConnectionDrag: (event: ReactPointerEvent<HTMLButtonElement>, side: ConnectionSide) => void;
+  onStartConnectionMouseDrag: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
+  onRunNode: () => void;
   onSetLocalEditMode: (enabled: boolean) => void;
   onSubmitLocalEdit: (regions: LocalEditRegion[]) => void;
   onToggleGridSplitSelection: (index: number, behavior: "replace" | "toggle") => void;
@@ -10065,10 +19297,42 @@ function CloneCanvasNode({
   onTextResourceChange: (content: string) => void;
   selected: boolean;
 }) {
+  if (getDraftString(node, "action") === "TOOLBOX_TEMPLATE_GROUP") {
+    return <ToolboxTemplateGroupCanvasNode node={node} selected={selected} />;
+  }
+
+  if (
+    node.kind === "material-style" ||
+    getDraftString(node, "action") === "MATERIAL_STYLE" ||
+    isVideoEffectMaterialNode(node) ||
+    isVideoRoleMaterialNode(node)
+  ) {
+    return (
+      <MaterialStyleCanvasNode
+        node={node}
+        onContextMenu={onContextMenu}
+        onPointerDown={onPointerDown}
+        selected={selected}
+      />
+    );
+  }
+
+  const shellProps = {
+    connectionHoverActive,
+    connectionsHidden,
+    node,
+    onContextMenu,
+    onOpenConnectionMenu,
+    onPointerDown,
+    onStartConnectionDrag,
+    onStartConnectionMouseDrag,
+    selected,
+  };
+
   const targetModuleKind = getTargetModuleKind(node);
   if (targetModuleKind) {
     return (
-      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
+      <CanvasNodeShell {...shellProps}>
         <TargetModuleCanvasNode kind={targetModuleKind} node={node} onAction={onModuleAction} selected={selected} />
       </CanvasNodeShell>
     );
@@ -10076,21 +19340,49 @@ function CloneCanvasNode({
 
   if (getDraftString(node, "action") === "TEXT_RESOURCE") {
     return (
-      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
+      <CanvasNodeShell {...shellProps}>
         <PureTextResourceCanvasNode node={node} onTextResourceChange={onTextResourceChange} selected={selected} />
       </CanvasNodeShell>
     );
   }
 
+  if (node.kind === "video-story" || getDraftString(node, "action") === "VIDEO_STORY_ANALYSIS") {
+    return (
+      <CanvasNodeShell {...shellProps}>
+        <VideoStoryCanvasNode node={node} selected={selected} />
+      </CanvasNodeShell>
+    );
+  }
+
+  if (
+    getDraftString(node, "action") === "VIDEO_SUBTITLE_ERASE" &&
+    getDraftString(node, "generationStatus") === "pending"
+  ) {
+    return (
+      <CanvasNodeShell {...shellProps}>
+        <VideoSubtitleErasePendingCanvasNode node={node} onCancel={onCancelGeneration} selected={selected} />
+      </CanvasNodeShell>
+    );
+  }
+
+  if (getDraftString(node, "action") === "VIDEO_HD_UPSCALE") {
+    return (
+      <CanvasNodeShell {...shellProps}>
+        <VideoHdUpscaleCanvasNode node={node} onGenerate={onGenerateVideoHd} selected={selected} />
+      </CanvasNodeShell>
+    );
+  }
+
   if (node.kind === "media") {
     return (
-      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
+      <CanvasNodeShell {...shellProps}>
         <PresetMediaCanvasNode
           node={node}
           onCancelGeneration={onCancelGeneration}
           onClearGridSplit={onClearGridSplit}
           onClearGridSplitSelection={onClearGridSplitSelection}
           onClearLocalEditRegions={onClearLocalEditRegions}
+          onExtractVideoFrame={onExtractVideoFrame}
           onSetLocalEditMode={onSetLocalEditMode}
           onSubmitLocalEdit={onSubmitLocalEdit}
           onToggleGridSplitSelection={onToggleGridSplitSelection}
@@ -10103,8 +19395,8 @@ function CloneCanvasNode({
 
   if (node.kind === "script") {
     return (
-      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
-        <PresetScriptCanvasNode node={node} onTextResourceChange={onTextResourceChange} selected={selected} />
+      <CanvasNodeShell {...shellProps}>
+        <PresetScriptCanvasNode node={node} onOpenWorkflow={onOpenScriptWorkflow} onRun={onRunNode} onTextResourceChange={onTextResourceChange} selected={selected} />
       </CanvasNodeShell>
     );
   }
@@ -10115,7 +19407,7 @@ function CloneCanvasNode({
   const isWarm = node.kind === "text" || node.kind === "audio";
   const previewUrl = getDraftString(node, "thumbnailUrl") || getDraftString(node, "resultImage");
   return (
-    <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
+    <CanvasNodeShell {...shellProps}>
       {isInput ? (
         <div
           className={cn(
@@ -10174,6 +19466,106 @@ function CloneCanvasNode({
   );
 }
 
+function ToolboxTemplateGroupCanvasNode({ node, selected }: { node: CloneNode; selected: boolean }) {
+  return (
+    <div
+      className={cn(
+        "react-flow__node react-flow__node-group nopan selectable parent draggable pointer-events-none absolute z-[1] rounded-[20px] border bg-white/10 text-white/72",
+        selected ? "selected border-[#363636]" : "border-white/10"
+      )}
+      data-canvas-node="true"
+      data-canvas-node-id={node.id}
+      data-canvas-overlay="true"
+      style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
+    >
+      <div className="absolute left-5 top-5 text-[120px] font-semibold leading-none text-white/46">
+        {node.title}
+      </div>
+    </div>
+  );
+}
+
+function MaterialStyleCanvasNode({
+  node,
+  onContextMenu,
+  onPointerDown,
+  selected,
+}: {
+  node: CloneNode;
+  onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
+  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  selected: boolean;
+}) {
+  const thumbnailUrl = getDraftString(node, "thumbnailUrl") || getNodeMediaUrl(node) || STYLE_MARKET_THUMBNAIL_URL;
+  const isEffect = isVideoEffectMaterialNode(node);
+  const isRole = isVideoRoleMaterialNode(node);
+  return (
+    <div
+      className={cn(
+        "react-flow__node nopan selectable draggable absolute cursor-grab rounded-[12px] bg-[#262626] text-white shadow-[0_14px_34px_rgba(0,0,0,0.35)] active:cursor-grabbing",
+        isEffect || isRole
+          ? cn(
+              "overflow-visible",
+              isEffect
+                ? "react-flow__node-material-lens"
+                : "react-flow__node-material-portrait",
+            )
+          : "react-flow__node-material-style overflow-hidden",
+        selected && "selected ring-1 ring-white/40"
+      )}
+      data-canvas-node="true"
+      data-canvas-node-id={node.id}
+      data-canvas-overlay="true"
+      onContextMenu={onContextMenu}
+      onPointerDown={onPointerDown}
+      style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
+    >
+      {isEffect || isRole ? (
+        <>
+          <div className="absolute -top-[27px] left-0 flex max-w-full items-center gap-1 text-[14px] leading-5 text-white/50">
+            {isEffect ? (
+              <Sparkles className="h-3.5 w-3.5 shrink-0" />
+            ) : (
+              <UserRound className="h-3.5 w-3.5 shrink-0" />
+            )}
+            <span className="truncate">{node.title}</span>
+          </div>
+          <div className="size-full overflow-hidden rounded-[12px] bg-[#1f1f1f]">
+            <img
+              alt={
+                getDraftString(node, isEffect ? "effectTitle" : "roleName") ||
+                node.title
+              }
+              className={cn("size-full object-cover", isRole && "object-top")}
+              draggable={false}
+              onDragStart={preventNativeImageDrag}
+              src={thumbnailUrl}
+            />
+            {isRole && getDraftString(node, "assetId") ? (
+              <span className="absolute bottom-2 right-2 flex size-5 items-center justify-center rounded-full bg-[#09caf5] text-black shadow-lg">
+                <Check className="h-3 w-3" strokeWidth={3} />
+              </span>
+            ) : null}
+          </div>
+        </>
+      ) : (
+        <>
+          <img
+            alt=""
+            className="h-full w-full object-cover"
+            draggable={false}
+            onDragStart={preventNativeImageDrag}
+            src={thumbnailUrl}
+          />
+          <div className="absolute inset-x-0 bottom-0 bg-[linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.78))] px-3 pb-3 pt-12">
+            <div className="truncate text-[14px] font-medium leading-5">{node.title}</div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
 function TargetModuleCanvasNode({
   kind,
   node,
@@ -10185,14 +19577,23 @@ function TargetModuleCanvasNode({
   onAction: (actionLabel: TargetModuleActionLabel) => void;
   selected: boolean;
 }) {
-  const HeaderIcon = kind === "video-clip" ? Scissors : kind === "audio" ? Music2 : kind === "video" ? Video : kind === "image" ? ImageIcon : FileText;
+  const HeaderIcon = kind === "video-clip" ? Scissors : kind === "director" ? Settings2 : kind === "audio" ? Music2 : kind === "video" ? Video : kind === "image" ? ImageIcon : FileText;
   const actions: Record<AddModuleKind, Array<{ icon: LucideIcon | "hd"; label: TargetModuleActionLabel }>> = {
     audio: [{ icon: Play, label: "音频生视频" }],
+    director: [{ icon: Settings2, label: "打开导演台" }],
     image: [
       { icon: Upload, label: "图生图" },
       { icon: "hd", label: "图片高清" },
+      { icon: Layers, label: "参考" },
+      { icon: BoxSelect, label: "标记" },
+      { icon: Sparkles, label: "风格" },
     ],
     script: [
+      { icon: FileText, label: "剧本生成分镜脚本" },
+      { icon: UserRound, label: "角色生成分镜脚本" },
+      { icon: FileText, label: "自己编写分镜脚本" },
+    ],
+    "legacy-script": [
       { icon: FileText, label: "剧本生成分镜脚本" },
       { icon: Video, label: "视频参考生成分镜脚本" },
       { icon: UserRound, label: "角色生成分镜脚本" },
@@ -10209,14 +19610,34 @@ function TargetModuleCanvasNode({
     ],
     "video-clip": [],
   };
+  const isCompactTargetModule =
+    kind === "text" ||
+    kind === "image" ||
+    kind === "video" ||
+    kind === "video-clip" ||
+    kind === "director" ||
+    kind === "audio" ||
+    kind === "script" ||
+    kind === "legacy-script";
   const actionTop =
     kind === "text"
       ? "top-[166px]"
-      : kind === "image" || kind === "video"
-        ? "top-[220px]"
-        : kind === "script"
-          ? "top-[190px]"
-          : "top-[190px]";
+      : kind === "image"
+        ? "top-[118px]"
+        : kind === "video"
+          ? "top-[106px]"
+          : kind === "audio"
+            ? "top-[166px]"
+          : kind === "script" || kind === "legacy-script"
+            ? "top-[156px]"
+            : "top-[190px]";
+  const heroTop = kind === "video" ? "top-[58px]" : kind === "text" || kind === "script" || kind === "legacy-script" ? "top-[62px]" : "top-[116px]";
+  const parameterSummary =
+    kind === "image"
+      ? "Lib Image  自适应 · 标准画质 · 2K · 1张   18"
+      : kind === "text"
+        ? "GVLM 3.1   6"
+        : "";
 
   return (
     <div className="h-full w-full">
@@ -10226,24 +19647,44 @@ function TargetModuleCanvasNode({
       </div>
       <div
         className={cn(
-          "relative h-[432px] overflow-hidden rounded-[8px] border border-white/8 bg-[#252525] shadow-[0_16px_38px_rgba(0,0,0,0.24)]",
+          "relative overflow-hidden rounded-[8px] border border-white/8 bg-[#252525] shadow-[0_16px_38px_rgba(0,0,0,0.24)]",
+          isCompactTargetModule ? "h-[312px]" : "h-[432px]",
           selected && "outline outline-1 outline-white/22"
         )}
       >
-        <div className={cn("absolute inset-x-0 flex justify-center text-white/18", kind === "text" || kind === "script" ? "top-[62px]" : "top-[116px]")}>
-          <TargetModuleHeroGraphic kind={kind} />
-        </div>
+        {kind === "director" ? null : (
+          <div className={cn("absolute inset-x-0 flex justify-center text-white/18", heroTop)}>
+            <TargetModuleHeroGraphic kind={kind} />
+          </div>
+        )}
         {kind === "video-clip" ? (
           <div className="absolute inset-x-0 top-[254px] text-center text-[16px] text-white/34">
-            空空如也，请连接多个视频节点后操作
+            空空如也，请连接视频节点后操作
+          </div>
+        ) : kind === "director" ? (
+          <div className="absolute inset-x-0 top-[46px] flex flex-col items-center px-10 text-center">
+            <div className="max-w-[178px] text-[14px] leading-[22px] text-white/42">
+              在3D空间中搭建场景并进行多视角截图
+            </div>
+            <button
+              className="mt-7 flex h-6 items-center rounded-[6px] bg-white/10 px-2 text-[12px] font-medium leading-none text-white/86 transition hover:bg-white/15"
+              onClick={() => onAction("打开导演台")}
+              onPointerDown={(event) => event.stopPropagation()}
+              type="button"
+            >
+              打开导演台
+            </button>
           </div>
         ) : (
           <div className={cn("absolute left-8", actionTop)}>
-            <div className="mb-5 text-[17px] text-white/42">尝试:</div>
-            <div className="space-y-5">
+            <div className="mb-5 text-[17px] text-white/42">尝试：</div>
+            <div className={cn(kind === "image" ? "space-y-[10px]" : "space-y-5")}>
               {actions[kind].map((action) => (
                 <button
-                  className="flex items-center gap-3 text-[18px] leading-none text-white/82 hover:text-white"
+                  className={cn(
+                    "flex items-center gap-3 leading-none text-white/82 hover:text-white",
+                    kind === "image" ? "text-[16px]" : "text-[18px]"
+                  )}
                   key={action.label}
                   onClick={() => onAction(action.label)}
                   onPointerDown={(event) => event.stopPropagation()}
@@ -10256,13 +19697,21 @@ function TargetModuleCanvasNode({
             </div>
           </div>
         )}
+        {kind === "image" ? (
+          <div className="absolute bottom-5 left-8 right-8 text-[12px] leading-[18px] text-white/42">
+            <div className="mb-3 line-clamp-2">
+              可直接文字生图，或上传图片输入文字指令对图片进行编辑，如：将背景改为雪夜
+            </div>
+            <div className="truncate text-white/58">{parameterSummary}</div>
+          </div>
+        ) : null}
       </div>
     </div>
   );
 }
 
 function TargetModuleHeroGraphic({ kind }: { kind: AddModuleKind }) {
-  if (kind === "text" || kind === "script") {
+  if (kind === "text" || kind === "script" || kind === "legacy-script") {
     return (
       <div className="flex w-[92px] flex-col gap-[9px]">
         {[70, 70, 70, 70, 43].map((width, index) => (
@@ -10288,15 +19737,1642 @@ function TargetModuleHeroGraphic({ kind }: { kind: AddModuleKind }) {
     );
   }
 
+  if (kind === "director") {
+    return (
+      <div className="relative h-[92px] w-[112px] text-white/20">
+        <span className="absolute left-7 top-1 h-[72px] w-[72px] rounded-[10px] border border-current" />
+        <span className="absolute left-0 top-12 h-px w-[112px] bg-current" />
+        <span className="absolute left-1/2 top-0 h-[92px] w-px bg-current" />
+        <Settings2 className="absolute left-[42px] top-[30px] h-8 w-8" strokeWidth={1.4} />
+      </div>
+    );
+  }
+
   return <Scissors className="h-[92px] w-[92px]" strokeWidth={1.4} />;
 }
 
+const DIRECTOR_RATIO_OPTIONS = ["Auto", "21:9", "16:9", "4:3", "1:1", "3:4", "9:16"] as const;
+const DIRECTOR_CAMERA_PRESET_OPTIONS = [
+  "当前视角",
+  "正面中景",
+  "正面特写",
+  "正面全景",
+  "侧面跟拍",
+  "侧面近景",
+  "背面中景",
+  "俯拍全景",
+  "45° 俯拍",
+  "低角度仰拍",
+  "低角度广角",
+  "过肩镜头",
+  "过肩镜头（右）",
+  "鸟瞰",
+  "荷兰角",
+] as const;
+const DIRECTOR_CAMERA_PRESET_CONFIG: Record<
+  (typeof DIRECTOR_CAMERA_PRESET_OPTIONS)[number],
+  { position: [string, string, string]; target: [string, string, string] }
+> = {
+  "45° 俯拍": { position: ["4", "6.5", "8"], target: ["0", "1.2", "0"] },
+  低角度仰拍: { position: ["0", "0.7", "6"], target: ["0", "2.2", "0"] },
+  低角度广角: { position: ["0", "0.6", "10"], target: ["0", "1.6", "0"] },
+  侧面跟拍: { position: ["8", "2.2", "2"], target: ["0", "1.2", "0"] },
+  侧面近景: { position: ["5", "2", "2"], target: ["0", "1.3", "0"] },
+  俯拍全景: { position: ["0", "9", "6"], target: ["0", "1.2", "0"] },
+  当前视角: { position: ["0", "2.2", "10"], target: ["0", "1.2", "0"] },
+  正面中景: { position: ["0", "2.2", "10"], target: ["0", "1.2", "0"] },
+  正面全景: { position: ["0", "2.8", "14"], target: ["0", "1.2", "0"] },
+  正面特写: { position: ["0", "2", "5.5"], target: ["0", "1.5", "0"] },
+  荷兰角: { position: ["2", "2.4", "8"], target: ["0", "1.2", "0"] },
+  背面中景: { position: ["0", "2.2", "-10"], target: ["0", "1.2", "0"] },
+  过肩镜头: { position: ["-1.8", "2.4", "4"], target: ["0", "1.4", "0"] },
+  "过肩镜头（右）": { position: ["1.8", "2.4", "4"], target: ["0", "1.4", "0"] },
+  鸟瞰: { position: ["0", "12", "0"], target: ["0", "0", "0"] },
+};
+const DIRECTOR_FOV_MIN = 15;
+const DIRECTOR_FOV_MAX = 90;
+const DIRECTOR_CAMERA_SNAPSHOT_NODE_OFFSET_X = 470;
+const DIRECTOR_CAMERA_SNAPSHOT_NODE_WIDTH = 350;
+const DIRECTOR_CAMERA_SNAPSHOT_NODE_HEIGHT = 622;
+const DIRECTOR_ROLE_MENU_OPTIONS = [
+  { hasSubmenu: false, key: "upload", label: "本地上传", separatorAfter: true },
+  { hasSubmenu: false, key: "male", label: "男性素体", separatorAfter: false },
+  { hasSubmenu: false, key: "female", label: "女性素体", separatorAfter: false },
+  { hasSubmenu: false, key: "wide", label: "宽厚素体", separatorAfter: false },
+  { hasSubmenu: false, key: "strong", label: "健壮素体", separatorAfter: false },
+  { hasSubmenu: false, key: "slim", label: "纤细素体", separatorAfter: false },
+  { hasSubmenu: false, key: "teen", label: "少年素体", separatorAfter: false },
+  { hasSubmenu: false, key: "child", label: "儿童素体", separatorAfter: false },
+  { hasSubmenu: false, key: "chibi", label: "二头身", separatorAfter: false },
+  { key: "crowd", label: "群众 (3x3)", hasSubmenu: true, separatorAfter: true },
+  { hasSubmenu: true, key: "geometry", label: "几何模型", separatorAfter: false },
+] as const;
+const DIRECTOR_PANORAMA_MENU_OPTIONS = [
+  { icon: Upload, key: "upload", label: "本地上传" },
+  { icon: Clock3, key: "history", label: "历史记录" },
+  { icon: Sparkles, key: "ai", label: "AI生成" },
+] as const;
+type DirectorTransformMode = "move" | "rotate" | "scale";
+const DIRECTOR_TRANSFORM_MODE_OPTIONS: Array<{
+  icon: LucideIcon;
+  key: DirectorTransformMode;
+  label: string;
+  shortcut: string;
+}> = [
+  { icon: Move, key: "move", label: "移动", shortcut: "V" },
+  { icon: RotateCcw, key: "rotate", label: "旋转", shortcut: "R" },
+  { icon: Maximize2, key: "scale", label: "缩放", shortcut: "S" },
+];
+const DIRECTOR_HELP_SHORTCUTS = [
+  ["俯视视角", "T"],
+  ["重置视角", "Q"],
+  ["打组", "G"],
+  ["撤销", "Z"],
+  ["正面视角", "Y"],
+  ["网格吸附", "X"],
+  ["解组", "⇧ D"],
+  ["删除", ""],
+] as const;
+const DIRECTOR_AI_HISTORY_IMAGES = [
+  CHARACTER_IMAGE_URL,
+  CHARACTER_THREE_VIEW_URL,
+  FIRST_FRAME_IMAGE_URL,
+  AUDIO_REFERENCE_IMAGE_URL,
+  CHARACTER_IMAGE_URL,
+  CHARACTER_THREE_VIEW_URL,
+  FIRST_FRAME_IMAGE_URL,
+  AUDIO_REFERENCE_IMAGE_URL,
+];
+const DIRECTOR_AI_IMPORTED_PROPS = ["道具1", "道具2", "道具3", "道具4", "道具5", "道具6", "道具7"];
+
+function DirectorRatioPreview({ ratio }: { ratio: (typeof DIRECTOR_RATIO_OPTIONS)[number] }) {
+  const ratioSize: Record<(typeof DIRECTOR_RATIO_OPTIONS)[number], string> = {
+    "1:1": "h-5 w-5",
+    "3:4": "h-6 w-[18px]",
+    "4:3": "h-[18px] w-6",
+    "9:16": "h-7 w-4",
+    "16:9": "h-4 w-7",
+    "21:9": "h-[14px] w-8",
+    Auto: "h-5 w-7 border-dashed",
+  };
+
+  return <span aria-hidden="true" className={cn("rounded-[3px] border border-current", ratioSize[ratio])} />;
+}
+
+function getNextDirectorCameraName(cameraNames: string[]) {
+  const highestCameraIndex = cameraNames.reduce((highest, name) => {
+    const match = /^机位(\d+)$/.exec(name);
+    return match ? Math.max(highest, Number(match[1])) : highest;
+  }, 0);
+
+  return `机位${highestCameraIndex + 1}`;
+}
+
+function formatDirectorCameraShotTitle(title: string) {
+  const match = /^(机位\d+)-shot-(\d+)$/.exec(title);
+  return match ? `${match[1]}-截图${match[2]}` : title;
+}
+
+function getNextDirectorRoleName(roleNames: string[]) {
+  const usedIndexes = roleNames
+    .map((name) => {
+      const match = /^角色([A-Z])$/.exec(name);
+      return match ? match[1].charCodeAt(0) - 65 : -1;
+    })
+    .filter((index) => index >= 0);
+  const nextIndex = Math.max(-1, ...usedIndexes) + 1;
+
+  return nextIndex < 26 ? `角色${String.fromCharCode(65 + nextIndex)}` : `角色${nextIndex + 1}`;
+}
+
+function DirectorTutorialFollowBar({ onCancel }: { onCancel: () => void }) {
+  return (
+    <div className="pointer-events-none fixed left-1/2 top-0 z-[1900] -translate-x-1/2">
+      <div className="pointer-events-auto flex h-[34px] w-[174px] items-center justify-between rounded-b-xl border border-[#e4ae25] bg-[#e4ae25] px-3 py-1.5 text-white shadow-md">
+        <span className="text-sm">正在跟随</span>
+        <span className="relative inline-flex">
+          <button
+            aria-label="退出跟随"
+            className="peer h-4 w-16 rounded-full bg-white px-2 py-0.5 text-xs font-medium leading-none text-gray-900 transition-colors hover:bg-white/90"
+            onClick={onCancel}
+            type="button"
+          >
+            取消ESC
+          </button>
+          <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap rounded bg-black/45 px-2 py-0.5 text-xs text-white/70 opacity-0 transition-opacity peer-hover:opacity-100">
+            按 ESC 退出
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function DirectorConsole3DDialog({
+  node,
+  onClose,
+  onSendSnapshotsToCanvas,
+  onTutorialActiveChange,
+  tutorialActive,
+}: {
+  node: CloneNode;
+  onClose: () => void;
+  onSendSnapshotsToCanvas: (snapshots: Array<{ id: string; title: string }>) => void;
+  onTutorialActiveChange: (active: boolean) => void;
+  tutorialActive: boolean;
+}) {
+  const [viewMode, setViewMode] = useState<"director" | "camera">("director");
+  const [selectedObject, setSelectedObject] = useState("机位1");
+  const [fov, setFov] = useState(50);
+  const [ratio, setRatio] = useState("16:9");
+  const [ratioMenuOpen, setRatioMenuOpen] = useState(false);
+  const [roleMenuOpen, setRoleMenuOpen] = useState(false);
+  const [cameraPresetMenuOpen, setCameraPresetMenuOpen] = useState(false);
+  const [panoramaMenuOpen, setPanoramaMenuOpen] = useState(false);
+  const [panoramaHistoryOpen, setPanoramaHistoryOpen] = useState(false);
+  const [panoramaAiOpen, setPanoramaAiOpen] = useState(false);
+  const [transformMenuOpen, setTransformMenuOpen] = useState(false);
+  const [directorTransformMode, setDirectorTransformMode] = useState<DirectorTransformMode>("move");
+  const [directorHelpMenuOpen, setDirectorHelpMenuOpen] = useState(false);
+  const [directorHelpShortcutOpen, setDirectorHelpShortcutOpen] = useState(false);
+  const [directorFullscreen, setDirectorFullscreen] = useState(false);
+  const [sceneSearchQuery, setSceneSearchQuery] = useState("");
+  const [cameraNames, setCameraNames] = useState(["机位1"]);
+  const [cameraPresetByName, setCameraPresetByName] = useState<Record<string, (typeof DIRECTOR_CAMERA_PRESET_OPTIONS)[number]>>({
+    机位1: "当前视角",
+  });
+  const [roleNames, setRoleNames] = useState(["角色A"]);
+  const [propNames, setPropNames] = useState<string[]>([]);
+  const [cameraInspectorOpen, setCameraInspectorOpen] = useState(false);
+  const [cameraInspectorTab, setCameraInspectorTab] = useState<"properties" | "shots">("properties");
+  const [roleInspectorOpen, setRoleInspectorOpen] = useState(false);
+  const [cameraSnapshots, setCameraSnapshots] = useState<Array<{ id: string; title: string }>>([]);
+  const [snapshotClearConfirmOpen, setSnapshotClearConfirmOpen] = useState(false);
+  const [snapshotUploading, setSnapshotUploading] = useState(false);
+  const [aiImportOpen, setAiImportOpen] = useState(false);
+  const [aiImportTab, setAiImportTab] = useState<"upload" | "history">("upload");
+  const [aiImportSelectedImage, setAiImportSelectedImage] = useState<string | null>(null);
+  const [aiImportMode, setAiImportMode] = useState<"insert" | "overwrite">("insert");
+  const [aiImportRunning, setAiImportRunning] = useState(false);
+  const panoramaUploadInputRef = useRef<HTMLInputElement | null>(null);
+  const snapshotTimerRef = useRef<number | null>(null);
+  const aiImportTimerRef = useRef<number | null>(null);
+  const sceneObjects = [
+    ...propNames.map((name) => ({ icon: BoxSelect, kind: "prop" as const, name })),
+    ...cameraNames.map((name) => ({ icon: Camera, kind: "camera" as const, name })),
+    ...roleNames.map((name) => ({ icon: UserRound, kind: "role" as const, name })),
+  ];
+  const normalizedSceneSearchQuery = sceneSearchQuery.trim().toLowerCase();
+  const filteredSceneObjects = normalizedSceneSearchQuery
+    ? sceneObjects.filter((item) => item.name.toLowerCase().includes(normalizedSceneSearchQuery))
+    : sceneObjects;
+  const selectedCameraPreset = cameraPresetByName[selectedObject] ?? "当前视角";
+  const selectedCameraConfig = DIRECTOR_CAMERA_PRESET_CONFIG[selectedCameraPreset];
+  const normalizedFov = Math.min(DIRECTOR_FOV_MAX, Math.max(DIRECTOR_FOV_MIN, Number.isFinite(fov) ? fov : 50));
+  const fovTrackPercent = ((normalizedFov - DIRECTOR_FOV_MIN) / (DIRECTOR_FOV_MAX - DIRECTOR_FOV_MIN)) * 100;
+  const displayedRoleName = roleInspectorOpen ? selectedObject : "角色A";
+  const selectedCameraSnapshots = cameraSnapshots.filter((snapshot) => snapshot.title.startsWith(`${selectedObject}-`));
+  const selectedCameraSnapshotsEmpty = selectedCameraSnapshots.length === 0;
+  const updateDirectorFov = useCallback((value: number) => {
+    const nextValue = Number.isFinite(value) ? value : 50;
+    setFov(Math.min(DIRECTOR_FOV_MAX, Math.max(DIRECTOR_FOV_MIN, nextValue)));
+  }, []);
+  const closeDirectorFloatingMenus = useCallback(() => {
+    setRatioMenuOpen(false);
+    setCameraPresetMenuOpen(false);
+    setRoleMenuOpen(false);
+    setPanoramaMenuOpen(false);
+    setTransformMenuOpen(false);
+    setDirectorHelpMenuOpen(false);
+    setDirectorHelpShortcutOpen(false);
+    setSnapshotClearConfirmOpen(false);
+  }, []);
+  const handleDirectorTransformMenu = useCallback(() => {
+    setRatioMenuOpen(false);
+    setCameraPresetMenuOpen(false);
+    setRoleMenuOpen(false);
+    setPanoramaMenuOpen(false);
+    setDirectorHelpMenuOpen(false);
+    setDirectorHelpShortcutOpen(false);
+    setTransformMenuOpen((current) => !current);
+  }, []);
+  const handleDirectorTransformSelect = useCallback((mode: DirectorTransformMode) => {
+    setDirectorTransformMode(mode);
+    setTransformMenuOpen(false);
+  }, []);
+  const handleDirectorRoleMenu = useCallback(() => {
+    setRatioMenuOpen(false);
+    setCameraPresetMenuOpen(false);
+    setPanoramaMenuOpen(false);
+    setTransformMenuOpen(false);
+    setDirectorHelpMenuOpen(false);
+    setDirectorHelpShortcutOpen(false);
+    setRoleMenuOpen((current) => !current);
+  }, []);
+  const handleDirectorRoleSelect = useCallback(
+    (option: (typeof DIRECTOR_ROLE_MENU_OPTIONS)[number]) => {
+      if (option.key === "upload" || option.hasSubmenu) return;
+      const nextRoleName = getNextDirectorRoleName(roleNames);
+      setRoleNames((current) => (current.includes(nextRoleName) ? current : [...current, nextRoleName]));
+      setSelectedObject(nextRoleName);
+      setCameraInspectorOpen(false);
+      setRoleInspectorOpen(true);
+      setRoleMenuOpen(false);
+      setRatioMenuOpen(false);
+      setCameraPresetMenuOpen(false);
+      setPanoramaMenuOpen(false);
+      setTransformMenuOpen(false);
+      setDirectorHelpMenuOpen(false);
+      setDirectorHelpShortcutOpen(false);
+    },
+    [roleNames]
+  );
+  const handleDirectorCameraPresetMenu = useCallback(() => {
+    setRatioMenuOpen(false);
+    setRoleMenuOpen(false);
+    setPanoramaMenuOpen(false);
+    setTransformMenuOpen(false);
+    setDirectorHelpMenuOpen(false);
+    setDirectorHelpShortcutOpen(false);
+    setCameraPresetMenuOpen((current) => !current);
+  }, []);
+  const handleDirectorCameraPresetSelect = useCallback(
+    (_preset: (typeof DIRECTOR_CAMERA_PRESET_OPTIONS)[number]) => {
+      const nextCameraName = getNextDirectorCameraName(cameraNames);
+      setCameraNames((current) => (current.includes(nextCameraName) ? current : [...current, nextCameraName]));
+      setCameraPresetByName((current) => ({ ...current, [nextCameraName]: _preset }));
+      setSelectedObject(nextCameraName);
+      setCameraInspectorOpen(true);
+      setCameraInspectorTab("properties");
+      setRoleInspectorOpen(false);
+      setCameraPresetMenuOpen(false);
+      setRatioMenuOpen(false);
+      setPanoramaMenuOpen(false);
+      setTransformMenuOpen(false);
+      setDirectorHelpMenuOpen(false);
+      setDirectorHelpShortcutOpen(false);
+    },
+    [cameraNames]
+  );
+  const handleDirectorPanoramaMenu = useCallback(() => {
+    setRatioMenuOpen(false);
+    setRoleMenuOpen(false);
+    setCameraPresetMenuOpen(false);
+    setTransformMenuOpen(false);
+    setDirectorHelpMenuOpen(false);
+    setDirectorHelpShortcutOpen(false);
+    setPanoramaMenuOpen((current) => !current);
+  }, []);
+  const handleDirectorHelpMenu = useCallback(() => {
+    setRatioMenuOpen(false);
+    setCameraPresetMenuOpen(false);
+    setRoleMenuOpen(false);
+    setPanoramaMenuOpen(false);
+    setTransformMenuOpen(false);
+    setDirectorHelpShortcutOpen(false);
+    setDirectorHelpMenuOpen((current) => !current);
+  }, []);
+  const handleDirectorTutorial = useCallback(() => {
+    setDirectorHelpShortcutOpen(false);
+    onTutorialActiveChange(true);
+  }, [onTutorialActiveChange]);
+  const handleDirectorPanoramaSelect = useCallback((option: (typeof DIRECTOR_PANORAMA_MENU_OPTIONS)[number]) => {
+    closeDirectorFloatingMenus();
+
+    if (option.key === "upload") {
+      panoramaUploadInputRef.current?.click();
+      return;
+    }
+
+    if (option.key === "history") {
+      setPanoramaHistoryOpen(true);
+      return;
+    }
+
+    setPanoramaAiOpen(true);
+  }, []);
+  const selectedTransformOption =
+    DIRECTOR_TRANSFORM_MODE_OPTIONS.find((option) => option.key === directorTransformMode) ?? DIRECTOR_TRANSFORM_MODE_OPTIONS[0];
+  const directorToolbarItems: Array<{
+    active?: boolean;
+    disabled?: boolean;
+    icon: LucideIcon;
+    label: string;
+    loading?: boolean;
+    menu?: "transform";
+    onClick: () => void;
+  }> = [
+    {
+      active: transformMenuOpen,
+      icon: selectedTransformOption.icon,
+      label: `${selectedTransformOption.label} (${selectedTransformOption.shortcut})`,
+      menu: "transform",
+      onClick: handleDirectorTransformMenu,
+    },
+    { active: roleMenuOpen, icon: UserRound, label: "添加角色", onClick: handleDirectorRoleMenu },
+    {
+      active: panoramaMenuOpen,
+      icon: ImageIcon,
+      label: "全景图",
+      onClick: handleDirectorPanoramaMenu,
+    },
+    { active: cameraPresetMenuOpen, icon: Plus, label: "添加机位", onClick: handleDirectorCameraPresetMenu },
+  ];
+  const handleDirectorScreenshot = useCallback(() => {
+    if (snapshotUploading) return;
+    const nextCameraName = getNextDirectorCameraName(cameraNames);
+    const nextShotTitle = `${nextCameraName}-shot-${String(cameraSnapshots.length + 1).padStart(2, "0")}`;
+    closeDirectorFloatingMenus();
+    setSnapshotUploading(true);
+    toast.info("正在上传截图...");
+    if (snapshotTimerRef.current !== null) {
+      window.clearTimeout(snapshotTimerRef.current);
+    }
+    snapshotTimerRef.current = window.setTimeout(() => {
+      setCameraNames((current) => (current.includes(nextCameraName) ? current : [...current, nextCameraName]));
+      setCameraPresetByName((current) => ({ ...current, [nextCameraName]: current[nextCameraName] ?? "当前视角" }));
+      setSelectedObject(nextCameraName);
+      setCameraInspectorOpen(true);
+      setCameraInspectorTab("properties");
+      setRoleInspectorOpen(false);
+      setCameraSnapshots((current) =>
+        current.some((snapshot) => snapshot.title === nextShotTitle)
+          ? current
+          : [...current, { id: `${nextCameraName}-${nextShotTitle}`, title: nextShotTitle }]
+      );
+      setSnapshotUploading(false);
+      snapshotTimerRef.current = null;
+    }, 6500);
+  }, [cameraNames, cameraSnapshots.length, closeDirectorFloatingMenus, snapshotUploading]);
+  const handleDirectorAiImport = useCallback(() => {
+    closeDirectorFloatingMenus();
+    setAiImportOpen(true);
+  }, [closeDirectorFloatingMenus]);
+  const handleDirectorFullscreenToggle = useCallback(() => {
+    closeDirectorFloatingMenus();
+    setDirectorFullscreen((current) => !current);
+  }, [closeDirectorFloatingMenus]);
+  const handleStartAiImport = useCallback(() => {
+    if (!aiImportSelectedImage || aiImportRunning) return;
+    setAiImportRunning(true);
+    if (aiImportTimerRef.current !== null) {
+      window.clearTimeout(aiImportTimerRef.current);
+    }
+    aiImportTimerRef.current = window.setTimeout(() => {
+      setPropNames(DIRECTOR_AI_IMPORTED_PROPS);
+      setCameraNames((current) => {
+        const base = aiImportMode === "overwrite" ? ["机位1"] : current;
+        const merged = ["机位1", "机位2", "机位3", ...base];
+        return merged.filter((name, index) => merged.indexOf(name) === index);
+      });
+      setCameraPresetByName((current) => ({
+        ...(aiImportMode === "overwrite" ? { 机位1: "当前视角" as const } : current),
+        机位1: "当前视角",
+        机位2: "当前视角",
+        机位3: "当前视角",
+      }));
+      setRoleNames((current) => {
+        const base = aiImportMode === "overwrite" ? ["角色A"] : current;
+        return base.includes("角色B") ? base : [...base, "角色B"];
+      });
+      setSelectedObject("");
+      setCameraInspectorOpen(false);
+      setRoleInspectorOpen(false);
+      setAiImportOpen(false);
+      setAiImportRunning(false);
+      aiImportTimerRef.current = null;
+    }, 24000);
+  }, [aiImportMode, aiImportRunning, aiImportSelectedImage]);
+  const directorTrailingToolbarItems: Array<{ disabled?: boolean; icon: LucideIcon; label: string; loading?: boolean; onClick: () => void }> = [
+    {
+      disabled: snapshotUploading,
+      icon: Camera,
+      label: snapshotUploading ? "正在上传截图..." : "截图",
+      loading: snapshotUploading,
+      onClick: handleDirectorScreenshot,
+    },
+    { icon: Search, label: "AI 识图导入", onClick: handleDirectorAiImport },
+    { icon: directorFullscreen ? Minimize2 : Maximize2, label: directorFullscreen ? "退出全屏" : "全屏", onClick: handleDirectorFullscreenToggle },
+  ];
+
+  useEffect(() => {
+    const handleShortcut = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+      const target = event.target;
+      if (
+        target instanceof HTMLElement &&
+        (target.isContentEditable || ["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName))
+      ) {
+        return;
+      }
+      const modeByKey: Record<string, DirectorTransformMode> = {
+        r: "rotate",
+        s: "scale",
+        v: "move",
+      };
+      const nextMode = modeByKey[event.key.toLowerCase()];
+      if (!nextMode) return;
+      event.preventDefault();
+      setDirectorTransformMode(nextMode);
+    };
+
+    window.addEventListener("keydown", handleShortcut);
+    return () => window.removeEventListener("keydown", handleShortcut);
+  }, []);
+  useEffect(
+    () => () => {
+      if (snapshotTimerRef.current !== null) {
+        window.clearTimeout(snapshotTimerRef.current);
+      }
+      if (aiImportTimerRef.current !== null) {
+        window.clearTimeout(aiImportTimerRef.current);
+      }
+    },
+    []
+  );
+
+  return (
+    <div
+      className="fixed inset-0 z-[600] flex flex-col text-white"
+      data-canvas-overlay="true"
+      onPointerDown={(event) => event.stopPropagation()}
+      style={{ backgroundColor: "rgba(8,8,16,0.98)" }}
+    >
+      <div className="relative flex h-16 shrink-0 items-center justify-between border-white/8 border-b bg-[#212121] px-6">
+        <div className="text-base font-medium leading-6 text-neutral-50">3D导演台</div>
+        <div className="absolute left-1/2 top-1/2 ml-[6.7px] flex h-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1 overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-950 px-1 py-1">
+          {[
+            { key: "director", label: "导演视角" },
+            { key: "camera", label: "机位视角" },
+          ].map((item) => (
+            <button
+              className={cn(
+                "h-8 w-20 rounded-full px-3 text-sm leading-5 text-neutral-50 transition-colors disabled:cursor-not-allowed disabled:opacity-35",
+                viewMode === item.key ? "rounded-xl bg-white/10" : "hover:bg-white/10"
+              )}
+              key={item.key}
+              onClick={() => {
+                closeDirectorFloatingMenus();
+                setViewMode(item.key as "director" | "camera");
+              }}
+              type="button"
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+        <div className="relative flex h-6 items-center gap-2">
+          <div className="relative">
+            <button
+              aria-label="帮助"
+              className={cn(
+                "flex size-6 items-center justify-center rounded-lg text-neutral-50 transition-colors hover:bg-white/10",
+                directorHelpMenuOpen && "bg-white/10"
+              )}
+              onClick={handleDirectorHelpMenu}
+              title="帮助"
+              type="button"
+            >
+              <HelpCircle className="h-4 w-4" />
+            </button>
+            {directorHelpMenuOpen ? (
+              <div className="absolute right-0 top-6 z-50 pt-1.5">
+                <div className="nodrag nopan nowheel flex w-[120px] flex-col gap-1 rounded-xl border border-white/10 bg-[rgba(31,31,31,0.94)] p-1 text-neutral-50 shadow-[0_8px_24px_rgba(0,0,0,0.35)] backdrop-blur-xl">
+                  <div className="relative">
+                    <button
+                      className={cn(
+                        "flex h-8 w-full items-center rounded-lg px-3 text-left text-[13px] leading-none text-white/75 transition-colors hover:bg-white/10 hover:text-white",
+                        directorHelpShortcutOpen && "bg-white/10"
+                      )}
+                      onClick={() => setDirectorHelpShortcutOpen((current) => !current)}
+                      onMouseEnter={() => setDirectorHelpShortcutOpen(true)}
+                      type="button"
+                    >
+                      快捷键
+                    </button>
+                    {directorHelpShortcutOpen ? (
+                      <div className="absolute right-full top-0 z-50 pr-2">
+                        <div className="nodrag nopan nowheel h-[234px] w-[408px] rounded-2xl border border-white/10 bg-[#1f1f1f]/95 p-6 text-neutral-50 shadow-[0_8px_24px_rgba(0,0,0,0.35)] backdrop-blur-xl">
+                          <div className="flex h-[22px] items-center justify-between">
+                            <span className="text-[14px] font-medium text-white">快捷键</span>
+                          </div>
+                          <div className="mt-5 grid grid-cols-2 gap-x-11 gap-y-3">
+                            {DIRECTOR_HELP_SHORTCUTS.map(([label, shortcut]) => (
+                              <div className="flex h-7 items-center justify-between gap-4 text-[13px]" key={label}>
+                                <span className="min-w-0 text-white/58">{label}</span>
+                                {shortcut ? <span className="shrink-0 text-white/78">{shortcut}</span> : null}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                  <button
+                    className="flex h-8 w-full items-center rounded-lg px-3 text-left text-[13px] leading-none text-white/75 transition-colors hover:bg-white/10 hover:text-white"
+                    onClick={handleDirectorTutorial}
+                    onMouseEnter={() => setDirectorHelpShortcutOpen(false)}
+                    type="button"
+                  >
+                    使用教程
+                  </button>
+                </div>
+              </div>
+            ) : null}
+          </div>
+          <button
+            aria-label="关闭"
+            className="flex size-6 items-center justify-center rounded-lg text-neutral-50 transition-colors hover:bg-white/10"
+            onClick={onClose}
+            title="关闭"
+            type="button"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+      {tutorialActive ? (
+        <>
+          <div className="pointer-events-none absolute inset-0 z-[180]">
+            <div className="absolute inset-0 bg-black/20 backdrop-blur-md" />
+            <div className="absolute left-[567px] top-28 h-[581px] w-[327px] rounded-xl outline -outline-offset-1 outline-white/18" />
+            <button
+              className="pointer-events-auto absolute left-[854px] top-[120px] flex size-8 items-center justify-center rounded-lg text-white/50 transition-colors hover:bg-white/10 hover:text-white/80"
+              title="构图参考线"
+              type="button"
+            >
+              <BoxSelect className="h-4 w-4" />
+            </button>
+          </div>
+          <DirectorTutorialFollowBar onCancel={() => onTutorialActiveChange(false)} />
+        </>
+      ) : null}
+
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <div className={cn("grid h-full min-h-0 overflow-hidden", directorFullscreen ? "grid-cols-1" : "grid-cols-[230px_1fr_281px]")}>
+          {directorFullscreen ? null : (
+          <aside className="min-h-0 overflow-hidden border-white/8 border-r bg-[#1f1f1f]">
+            <div className="flex h-full w-full flex-col px-3 py-6 text-neutral-50">
+              <div className="flex h-[14px] items-center px-3">
+                <span className="text-[14px] font-medium leading-none text-white/85">场景</span>
+              </div>
+              <div className="relative">
+                <span className="sr-only">搜索场景对象</span>
+                <input
+                  className="mt-6 h-8 w-full rounded-lg bg-white/8 pl-3 pr-9 text-[13px] leading-none text-neutral-50 outline-none placeholder:text-neutral-500 focus:bg-white/10"
+                  onChange={(event) => setSceneSearchQuery(event.target.value)}
+                  placeholder="请输入搜索内容"
+                  value={sceneSearchQuery}
+                />
+                <Search className="pointer-events-none absolute right-3 top-[40px] h-4 w-4 -translate-y-1/2 text-white/48" />
+              </div>
+              <div className="mt-5 min-h-0 flex-1 overflow-y-auto [scrollbar-color:rgba(255,255,255,0.36)_transparent] [scrollbar-width:thin]">
+                {filteredSceneObjects.length === 0 ? (
+                  <div className="px-3 py-5 text-center text-[12px] text-white/35">没有匹配的场景对象</div>
+                ) : null}
+                <div className="flex w-full flex-col">
+                {filteredSceneObjects.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                  <button
+                    className={cn(
+                      "group relative flex h-8 w-full cursor-pointer items-center py-1 pr-2 text-left text-[12px] leading-none outline-none transition-colors after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-1/2 after:z-0 after:h-6 after:-translate-y-1/2 after:rounded after:transition-colors",
+                      selectedObject === item.name
+                        ? "text-neutral-50 after:bg-white/8 hover:after:bg-white/8"
+                        : "text-white/75 hover:text-neutral-50 hover:after:bg-white/4"
+                    )}
+                    key={item.name}
+                    onClick={() => {
+                      setSnapshotClearConfirmOpen(false);
+                      setSelectedObject(item.name);
+                      setCameraInspectorOpen(item.kind === "camera");
+                      if (item.kind === "camera") {
+                        setCameraInspectorTab("properties");
+                      }
+                      setRoleInspectorOpen(item.kind === "role");
+                      setRoleMenuOpen(false);
+                      setCameraPresetMenuOpen(false);
+                      setPanoramaMenuOpen(false);
+                      setTransformMenuOpen(false);
+                    }}
+                    type="button"
+                  >
+                    <span className="z-10 flex min-w-0 flex-1 items-center">
+                      <span className="flex h-8 w-10 shrink-0 items-center justify-center text-white/72">
+                        <Icon className="h-3.5 w-3.5" />
+                      </span>
+                      <span className="z-10 min-w-0 flex-1 truncate pl-1">{item.name}</span>
+                    </span>
+                  </button>
+                  );
+                })}
+                </div>
+              </div>
+            </div>
+          </aside>
+          )}
+
+          <main className="relative min-h-0 overflow-hidden bg-[#111]">
+            <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:48px_48px]" />
+            <div className="absolute inset-x-[8%] bottom-[18%] h-[28%] skew-y-[-7deg] rounded-[18px] border border-white/12 bg-[#202020] shadow-[0_28px_90px_rgba(0,0,0,0.55)]" />
+            <div
+              className={cn(
+                "absolute left-1/2 top-[42%] h-[116px] w-[66px] -translate-x-1/2 -translate-y-1/2 rounded-t-full border border-white/14 shadow-[0_24px_80px_rgba(92,115,255,0.34)]",
+                roleInspectorOpen ? "bg-[#63d46a]/70" : "bg-[#6f7cff]/45"
+              )}
+            />
+            <div
+              className={cn(
+                "absolute left-1/2 top-[54%] h-[98px] w-[118px] -translate-x-1/2 rounded-[28px] border border-white/12",
+                roleInspectorOpen ? "bg-[#5ebd62]/70" : "bg-[#4f5665]"
+              )}
+            />
+            {roleInspectorOpen ? (
+              <>
+                <div className="absolute left-[45%] top-[60%] h-[3px] w-32 rounded-full bg-gradient-to-r from-transparent via-[#ff3b30] to-[#ff3b30]" />
+                <div className="absolute left-1/2 top-[57%] h-28 w-[3px] -translate-x-1/2 rounded-full bg-gradient-to-b from-[#34c759] to-transparent" />
+                <div className="absolute left-[51%] top-[56%] h-8 w-8 rounded-[6px] bg-[#244eff]/80" />
+              </>
+            ) : null}
+            <div className="absolute left-[57%] top-[31%] flex h-12 w-16 items-center justify-center rounded-[8px] border border-[#8dc5ff]/60 bg-[#8dc5ff]/16 text-[11px] text-[#b8dcff]">
+              机位1
+            </div>
+            <div className="absolute left-[57%] top-[36%] h-[86px] w-px origin-top -rotate-[28deg] bg-[#8dc5ff]/40" />
+            <div className="absolute left-5 top-5 rounded-[9px] border border-white/8 bg-[#202020]/82 px-3 py-2 text-[12px] text-white/50">
+              {node.title} · {viewMode === "director" ? "导演视角" : "机位视角"} · {ratio}
+            </div>
+            <div className="absolute left-1/2 top-[36%] -translate-x-1/2 text-[12px] font-semibold text-white/90">{displayedRoleName}</div>
+            <div className="absolute right-5 top-4 h-[72px] w-[72px] overflow-hidden rounded-[8px] bg-[#1c1c1c] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.12)]">
+              <canvas className="absolute inset-0 h-full w-full opacity-60" height={144} width={144} />
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_55%_40%,rgba(141,197,255,0.26),transparent_34%),linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)] bg-[length:auto,18px_18px,18px_18px]" />
+            </div>
+            <button
+              className="absolute right-5 top-[94px] h-[21px] w-[72px] rounded-[6px] bg-white/10 text-[11px] text-white/60 transition hover:bg-white/15 hover:text-white/85"
+              onClick={closeDirectorFloatingMenus}
+              type="button"
+            >
+              重置视角
+            </button>
+          </main>
+
+          {directorFullscreen ? null : (
+          <aside className="flex min-h-0 flex-col overflow-hidden border-white/8 border-l bg-[#1f1f1f]">
+            <div className="flex h-12 shrink-0 items-center border-white/8 border-b px-4 text-[14px] font-semibold text-white/86">
+              {cameraInspectorOpen ? "摄像机" : roleInspectorOpen ? "角色" : "3D场景"}
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+              {cameraInspectorOpen ? (
+                <div className={cn("-mx-4 -my-4", cameraInspectorTab === "shots" && "flex min-h-[calc(100dvh-7rem)] flex-col")}>
+                  <section className="border-white/8 border-b px-4 pb-3 pt-4">
+                    <div className="flex h-7 gap-2">
+                      <button
+                        className={cn(
+                          "h-7 min-w-12 rounded-lg px-3 text-[13px] font-normal transition-colors",
+                          cameraInspectorTab === "properties"
+                            ? "bg-white/10 text-neutral-50"
+                            : "hover:bg-white/6 text-white/45 hover:text-white/75"
+                        )}
+                        onClick={() => {
+                          setSnapshotClearConfirmOpen(false);
+                          setCameraInspectorTab("properties");
+                        }}
+                        type="button"
+                      >
+                        属性
+                      </button>
+                      <button
+                        className={cn(
+                          "h-7 min-w-12 rounded-lg px-3 text-[13px] font-normal transition-colors",
+                          cameraInspectorTab === "shots" ? "bg-white/10 text-neutral-50" : "hover:bg-white/6 text-white/45 hover:text-white/75"
+                        )}
+                        onClick={() => {
+                          setSnapshotClearConfirmOpen(false);
+                          setCameraInspectorTab("shots");
+                        }}
+                        type="button"
+                      >
+                        摄像机截图
+                      </button>
+                    </div>
+                  </section>
+                  {cameraInspectorTab === "properties" ? (
+                  <>
+                  <section className="border-white/8 border-b px-4 py-4">
+                    <div className="relative h-[135px] w-[240px] overflow-hidden rounded-xl border border-white/8 bg-[#08080d]">
+                      <div className="absolute left-3 top-3 text-[13px] leading-none text-white/55">FOV {normalizedFov.toFixed(0)}°</div>
+                      <div className="absolute inset-x-0 bottom-0 h-[62px] bg-[radial-gradient(circle_at_70%_34%,rgba(141,197,255,0.22),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))]" />
+                      <div className="absolute bottom-7 right-16 flex h-8 w-12 items-center justify-center rounded border border-[#8dc5ff]/35 bg-[#8dc5ff]/12 text-[9px] text-[#b8dcff]">
+                        {selectedObject}
+                      </div>
+                      <div className="absolute bottom-8 right-24 h-10 w-px rotate-[24deg] bg-[#8dc5ff]/35" />
+                      <div className="absolute bottom-7 right-9 h-11 w-8 rounded-t-full bg-[#5d72d8]/70" />
+                      <button
+                        className="absolute bottom-3 right-3 flex size-6 items-center justify-center rounded-lg bg-white/10 text-white/85 transition-colors hover:bg-white/16 hover:text-white"
+                        onClick={() => {
+                          closeDirectorFloatingMenus();
+                          setViewMode("camera");
+                        }}
+                        title="切换到机位视角"
+                        type="button"
+                      >
+                        <Maximize2 className="h-3.5 w-3.5" />
+                      </button>
+                    </div>
+                  </section>
+                  <section className="space-y-3 border-white/8 border-b px-4 py-4">
+                    <label className="block">
+                      <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">名称</span>
+                      <input
+                        className="h-7 w-full rounded-lg border-0 bg-white/10 px-2 text-[12px] text-neutral-50 outline-none placeholder:text-white/30"
+                        readOnly
+                        value={selectedObject}
+                      />
+                    </label>
+                    <label className="block">
+                      <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">切换机位</span>
+                      <select
+                        className="h-7 w-full rounded-lg border-0 bg-white/10 px-2 text-[12px] text-neutral-50 outline-none"
+                        onChange={(event) => {
+                          setSnapshotClearConfirmOpen(false);
+                          setSelectedObject(event.target.value);
+                          setCameraInspectorOpen(true);
+                          setCameraInspectorTab("properties");
+                        }}
+                        value={selectedObject}
+                      >
+                        {cameraNames.map((name) => (
+                          <option key={name} value={name}>
+                            {name}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <DirectorAxisInputs label="位置" values={selectedCameraConfig.position} />
+                    <label className="block">
+                      <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">注视目标</span>
+                      <select className="h-7 w-full rounded-lg border-0 bg-white/10 px-2 text-[12px] text-neutral-50 outline-none" defaultValue="手动坐标">
+                        <option>手动坐标</option>
+                        {roleNames.map((name) => (
+                          <option key={name}>{name}</option>
+                        ))}
+                      </select>
+                    </label>
+                    <DirectorAxisInputs label="注视坐标" values={selectedCameraConfig.target} />
+                  </section>
+                  <section className="border-white/8 border-b px-4 py-4">
+                    <div className="mb-3 flex items-center gap-1">
+                      <div className="text-[13px] font-medium leading-none text-white/45">视野角度 (FOV)</div>
+                      <HelpCircle className="h-4 w-4 text-white/35" />
+                    </div>
+                    <div className="flex h-7 items-center gap-2">
+                      <div className="relative h-7 w-[170px] shrink-0">
+                        <div className="absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 overflow-hidden rounded-full bg-white/12">
+                          <span className="block h-full rounded-full bg-[#65c7ff]" style={{ width: `${fovTrackPercent}%` }} />
+                        </div>
+                        <input
+                          className="absolute inset-x-0 top-1/2 h-5 w-full -translate-y-1/2 cursor-pointer opacity-0"
+                          max={DIRECTOR_FOV_MAX}
+                          min={DIRECTOR_FOV_MIN}
+                          onChange={(event) => updateDirectorFov(Number(event.target.value))}
+                          step={1}
+                          type="range"
+                          value={normalizedFov}
+                        />
+                      </div>
+                      <input
+                        className="h-7 min-w-px flex-1 rounded-lg border-0 bg-white/10 px-2 text-center text-[13px] tabular-nums text-neutral-50 outline-none transition-colors focus:bg-white/13"
+                        onChange={(event) => updateDirectorFov(Number(event.target.value))}
+                        value={normalizedFov.toFixed(1)}
+                      />
+                    </div>
+                    <p className="mt-2 text-[12px] leading-[18px] text-white/38">
+                      控制镜头视野范围。数值越小，画面越近、越聚焦；数值越大，画面越广、能看到更多环境。
+                    </p>
+                  </section>
+                  <section className="px-4 py-4">
+                    <div className="mb-2 text-[12px] text-white/42">相机截图</div>
+                    <div className="space-y-2">
+                      {cameraSnapshots.map((snapshot) => (
+                        <button
+                          className="flex h-[92px] w-full items-center gap-3 rounded-[8px] border border-white/8 bg-[#252525] p-2 text-left text-[12px] text-white/74 transition hover:border-white/16 hover:bg-[#2b2b2b]"
+                          key={snapshot.id}
+                          type="button"
+                        >
+                          <span className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-[8px] bg-[radial-gradient(circle_at_52%_30%,rgba(141,197,255,0.38),transparent_34%),linear-gradient(135deg,#2b3344,#161719)] text-white/48">
+                            <Camera className="h-5 w-5" />
+                          </span>
+                          <span className="min-w-0 truncate">{snapshot.title}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </section>
+                  </>
+                  ) : (
+                  <div className="flex min-h-0 flex-1 flex-col">
+                    <div className="flex min-h-0 flex-1 flex-col gap-3 px-2 pb-4 pt-3">
+                      {selectedCameraSnapshotsEmpty ? (
+                        <div className="flex min-h-0 flex-1 items-center justify-center px-2 text-center text-[13px] leading-5 text-white/40">
+                          暂无摄像机截图
+                        </div>
+                      ) : (
+                        <section className="flex w-full flex-col gap-1 px-2">
+                          <div className="flex h-7 items-center text-[13px] font-normal leading-none text-white/45">
+                            {selectedObject}截图
+                          </div>
+                          <div className="grid grid-cols-3 gap-1">
+                            {selectedCameraSnapshots.map((snapshot) => (
+                              <button className="group flex min-w-0 flex-col items-start gap-1" key={snapshot.id} type="button">
+                                <span className="flex h-20 w-20 items-center justify-center overflow-hidden rounded-lg bg-[radial-gradient(circle_at_52%_30%,rgba(141,197,255,0.38),transparent_34%),linear-gradient(135deg,#2b3344,#161719)] text-white/48 transition group-hover:text-white/65">
+                                  <Camera className="h-5 w-5" />
+                                </span>
+                                <span className="w-full truncate text-left text-[12px] leading-[18px] text-white/45">
+                                  {formatDirectorCameraShotTitle(snapshot.title)}
+                                </span>
+                              </button>
+                            ))}
+                          </div>
+                        </section>
+                      )}
+                    </div>
+                    <div className="flex h-[73px] shrink-0 items-center gap-2 border-white/8 border-t px-4">
+                      <div className="relative flex flex-1">
+                        {snapshotClearConfirmOpen ? (
+                          <div className="absolute bottom-[calc(100%+8px)] left-0 right-0 flex flex-col gap-2 rounded-xl bg-[#2b2b2b] p-3 shadow-[0_8px_24px_rgba(0,0,0,0.45)]">
+                            <div className="text-center text-[13px] text-white/70">确认清空所有截图？</div>
+                            <div className="flex gap-2">
+                              <button
+                                className="hover:bg-white/14 flex h-7 flex-1 items-center justify-center rounded-md bg-white/10 text-[12px] text-white/70 transition-colors"
+                                onClick={() => setSnapshotClearConfirmOpen(false)}
+                                type="button"
+                              >
+                                取消
+                              </button>
+                              <button
+                                className="flex h-7 flex-1 items-center justify-center rounded-md bg-red-500/80 text-[12px] text-white transition-[filter,opacity] hover:brightness-110"
+                                onClick={() => {
+                                  setCameraSnapshots([]);
+                                  setSnapshotClearConfirmOpen(false);
+                                }}
+                                type="button"
+                              >
+                                确认
+                              </button>
+                            </div>
+                          </div>
+                        ) : null}
+                        <button
+                          className="hover:bg-white/14 flex h-10 w-full items-center justify-center rounded-lg bg-white/10 text-[13px] text-white/70 transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+                          disabled={selectedCameraSnapshotsEmpty}
+                          onClick={() => setSnapshotClearConfirmOpen(true)}
+                          type="button"
+                        >
+                          全部清空
+                        </button>
+                      </div>
+                      <button
+                        className="flex h-10 flex-1 items-center justify-center rounded-lg bg-white text-[13px] text-neutral-950 transition-[filter,opacity] hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-40"
+                        disabled={selectedCameraSnapshotsEmpty}
+                        onClick={() => {
+                          setSnapshotClearConfirmOpen(false);
+                          onSendSnapshotsToCanvas(selectedCameraSnapshots);
+                        }}
+                        type="button"
+                      >
+                        发送到画布
+                      </button>
+                    </div>
+                  </div>
+                  )}
+                </div>
+              ) : roleInspectorOpen ? (
+                <DirectorRoleInspectorPanel selectedObject={selectedObject} />
+              ) : (
+                <div className="space-y-5">
+                  <div>
+                    <div className="mb-3 text-[12px] text-white/42">场景缩放</div>
+                    <div className="flex items-center gap-3">
+                      <input
+                        className="h-1.5 flex-1 accent-white"
+                        max={100}
+                        min={20}
+                        onChange={(event) => setFov(Number(event.target.value))}
+                        type="range"
+                        value={fov}
+                      />
+                      <input
+                        className="h-8 w-14 rounded-[6px] border border-white/8 bg-[#252525] text-center text-[12px] text-white/78 outline-none"
+                        onChange={(event) => setFov(Number(event.target.value) || 50)}
+                        value={fov.toFixed(0)}
+                      />
+                    </div>
+                  </div>
+                  <DirectorAxisInputs label="场景平移" values={["0", "0", "0"]} />
+                  <DirectorAxisInputs label="场景旋转" values={["0", "0", "0"]} />
+                  <div className="space-y-2">
+                    <div className="text-[12px] text-white/42">全景背景</div>
+                    <div className="rounded-[8px] border border-white/8 bg-[#252525] px-3 py-3 text-[12px] leading-[19px] text-white/58">
+                      <div className="mb-1 text-white/72">已连接全景图</div>
+                      <div>请将图片节点连接到导演台左侧输入口</div>
+                    </div>
+                  </div>
+                  <div>
+                    <div className="mb-2 text-[12px] text-white/42">天空颜色</div>
+                    <div className="flex h-8 items-center rounded-[6px] border border-white/8 bg-[#252525] px-2 text-[12px] text-white/72">
+                      <span className="mr-2 h-4 w-4 rounded-[3px] bg-[#2f3a4a]" />
+                      #
+                    </div>
+                  </div>
+                  <div className="space-y-3">
+                    <div className="text-[12px] font-medium text-white/62">全景球</div>
+                    {["水平旋转", "球形半径"].map((label, index) => (
+                      <div className="flex items-center gap-3" key={label}>
+                        <span className="w-16 text-[12px] text-white/42">{label}</span>
+                        <input className="h-1.5 flex-1 accent-white" defaultValue={index === 0 ? 0 : 70} max={100} min={0} type="range" />
+                      </div>
+                    ))}
+                  </div>
+                  {["角色标签", "网格吸附", "地面"].map((label, index) => (
+                    <label className="flex h-8 items-center justify-between text-[12px] text-white/62" key={label}>
+                      <span>{label}</span>
+                      <input className="h-4 w-4 accent-white" defaultChecked={index !== 1} type="checkbox" />
+                    </label>
+                  ))}
+                  {["透明度", "高度"].map((label, index) => (
+                    <div className="flex items-center gap-3" key={label}>
+                      <span className="w-12 text-[12px] text-white/42">{label}</span>
+                      <input className="h-1.5 flex-1 accent-white" defaultValue={index === 0 ? 55 : 20} max={100} min={0} type="range" />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </aside>
+          )}
+        </div>
+      </div>
+
+      <div className="pointer-events-none absolute bottom-5 left-1/2 z-[200] flex h-[53px] w-[361px] -translate-x-1/2 items-center justify-center gap-2">
+        {directorToolbarItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <div className="group relative flex h-9 w-9 shrink-0" key={item.label}>
+              <button
+                aria-label={item.label}
+                className={cn(
+                  "pointer-events-auto flex h-9 w-9 items-center justify-center rounded-[10px] text-white/66 transition hover:bg-white/8 hover:text-white",
+                  item.active &&
+                    (item.menu === "transform" ? "bg-white/[0.14] text-white ring-1 ring-white/30" : "bg-white/8 text-white")
+                )}
+                onClick={item.onClick}
+                title={item.label}
+                type="button"
+              >
+                <Icon className="h-4 w-4" />
+              </button>
+              {item.menu === "transform" && transformMenuOpen ? (
+                <div className="pointer-events-auto absolute bottom-[calc(100%+8.5px)] left-[-8.5px] z-[1600] flex h-[118px] w-[132px] flex-col gap-1 rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-[6px] text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
+                  {DIRECTOR_TRANSFORM_MODE_OPTIONS.map((option) => {
+                    const OptionIcon = option.icon;
+                    const selected = directorTransformMode === option.key;
+                    return (
+                      <button
+                        className={cn(
+                          "flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-[13px] leading-none transition-colors hover:bg-white/10",
+                          selected ? "bg-white/12 text-white" : "text-white/85"
+                        )}
+                        key={option.key}
+                        onClick={() => handleDirectorTransformSelect(option.key)}
+                        type="button"
+                      >
+                        <OptionIcon className="h-5 w-5 shrink-0 text-white/90" strokeWidth={1.8} />
+                        <span className="min-w-0 flex-1">{option.label}</span>
+                        <span className="text-[13px] font-medium text-white/45">{option.shortcut}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : item.label === "添加角色" && roleMenuOpen ? (
+                <div className="pointer-events-auto absolute bottom-[calc(100%+8.5px)] left-[-8.5px] z-[1600] flex h-[420px] w-[148px] flex-col rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-[4px] text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
+                  {DIRECTOR_ROLE_MENU_OPTIONS.map((option) => (
+                    <Fragment key={option.key}>
+                      <button
+                        className="group flex h-8 w-full items-center gap-2 rounded-lg px-2 text-left text-[13px] leading-none text-white/70 transition-colors hover:bg-white/8 hover:text-white"
+                        onClick={() => handleDirectorRoleSelect(option)}
+                        type="button"
+                      >
+                        {option.key === "upload" ? <Upload className="h-4 w-4 shrink-0 text-white/56" /> : <UserRound className="h-4 w-4 shrink-0 text-white/56" />}
+                        <span className="min-w-0 flex-1 truncate">{option.label}</span>
+                        {option.hasSubmenu ? <ChevronRight className="h-4 w-4 shrink-0 text-white/42" /> : null}
+                      </button>
+                      {option.separatorAfter ? (
+                        <span className="my-[6px] h-px w-full bg-white/8" />
+                      ) : option.key !== "geometry" ? (
+                        <span className="h-1 w-full" />
+                      ) : null}
+                    </Fragment>
+                  ))}
+                </div>
+              ) : item.label === "全景图" && panoramaMenuOpen ? (
+                <div className="pointer-events-auto absolute bottom-[calc(100%+8px)] left-1/2 z-[1600] flex h-[114px] w-[148px] -translate-x-1/2 flex-col rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-[4px] text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
+                  {DIRECTOR_PANORAMA_MENU_OPTIONS.map((option, index) => {
+                    const OptionIcon = option.icon;
+                    return (
+                      <Fragment key={option.key}>
+                        <button
+                          className="group flex h-8 w-full items-center gap-1.5 rounded-lg px-2 text-left text-[13px] leading-none text-white/70 transition-colors hover:bg-white/8 hover:text-white"
+                          onClick={() => handleDirectorPanoramaSelect(option)}
+                          type="button"
+                        >
+                          <OptionIcon className="h-4 w-4 shrink-0 text-white/56" />
+                          <span className="min-w-0 flex-1 truncate">{option.label}</span>
+                        </button>
+                        {index < DIRECTOR_PANORAMA_MENU_OPTIONS.length - 1 ? <span className="h-1 w-full" /> : null}
+                      </Fragment>
+                    );
+                  })}
+                </div>
+              ) : item.label === "添加机位" && cameraPresetMenuOpen ? (
+                <div className="pointer-events-auto absolute bottom-[calc(100%+8px)] left-1/2 z-[1600] h-[318px] w-[240px] -translate-x-1/2 rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-[6px] text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
+                  <div className="h-6 px-0 pb-1 pt-1 text-[10px] font-semibold leading-none text-white/35">选择机位视角</div>
+                  <div className="max-h-[280px] overflow-y-auto [scrollbar-color:rgba(255,255,255,0.36)_transparent] [scrollbar-width:thin]">
+                    <div className="grid grid-cols-2 gap-1.5">
+                      {DIRECTOR_CAMERA_PRESET_OPTIONS.map((option) => (
+                        <button
+                          className="flex h-[72px] min-w-0 flex-col items-center justify-center gap-1.5 rounded-xl bg-white/[0.06] px-1.5 py-3 text-center text-[11px] leading-tight text-white/75 transition-colors hover:bg-white/10 hover:text-white"
+                          key={option}
+                          onClick={() => handleDirectorCameraPresetSelect(option)}
+                          type="button"
+                        >
+                          <Video className="h-6 w-6 text-white/42" strokeWidth={1.6} />
+                          <span>{option}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <span className="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 z-[1700] flex h-7 max-w-[240px] -translate-x-1/2 items-center whitespace-nowrap rounded-lg bg-[#2b2b2b] px-2 text-xs text-white opacity-0 shadow-lg transition group-hover:opacity-100">
+                  {item.label}
+                </span>
+              )}
+            </div>
+          );
+        })}
+        <div className="group relative flex h-9 w-9 shrink-0">
+          <button
+            aria-label="选择画幅比例"
+            className={cn(
+              "pointer-events-auto flex h-9 w-9 items-center justify-center rounded-[10px] text-white/66 transition hover:bg-white/8 hover:text-white",
+              ratioMenuOpen && "bg-white/8 text-white"
+            )}
+            onClick={() => {
+              setCameraPresetMenuOpen(false);
+              setRoleMenuOpen(false);
+              setPanoramaMenuOpen(false);
+              setTransformMenuOpen(false);
+              setRatioMenuOpen((current) => !current);
+            }}
+            title="选择画幅比例"
+            type="button"
+          >
+            <BoxSelect className="h-4 w-4" />
+          </button>
+          {ratioMenuOpen ? (
+            <div className="pointer-events-auto absolute bottom-[calc(100%+8px)] left-1/2 z-[1600] h-[182px] w-[280px] -translate-x-1/2 rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-3 text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
+              <div className="mb-2 text-[12px] leading-none text-white/45">比例</div>
+              <div className="grid grid-cols-4 gap-2">
+                {DIRECTOR_RATIO_OPTIONS.map((option) => (
+                  <button
+                    className={cn(
+                      "flex h-16 min-w-0 flex-col items-center justify-center gap-1 rounded-lg border border-white/20 px-1 py-3 text-[12px] leading-none text-white/55 transition-colors hover:bg-white/8 hover:text-white",
+                      ratio === option && "bg-white/8 text-white"
+                    )}
+                    key={option}
+                    onClick={() => setRatio(option)}
+                    type="button"
+                  >
+                    <DirectorRatioPreview ratio={option} />
+                    <span>{option}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <span className="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 z-[1700] flex h-7 max-w-[240px] -translate-x-1/2 items-center whitespace-nowrap rounded-lg bg-[#2b2b2b] px-2 text-xs text-white opacity-0 shadow-lg transition group-hover:opacity-100">
+              选择画幅比例
+            </span>
+          )}
+        </div>
+        {directorTrailingToolbarItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <div className="group relative flex h-9 w-9 shrink-0" key={item.label}>
+              <button
+                aria-label={item.label}
+                className="pointer-events-auto flex h-9 w-9 items-center justify-center rounded-[10px] text-white/66 transition hover:bg-white/8 hover:text-white disabled:cursor-not-allowed disabled:opacity-60"
+                disabled={item.disabled}
+                onClick={item.onClick}
+                title={item.label}
+                type="button"
+              >
+                {item.loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Icon className="h-4 w-4" />}
+              </button>
+              <span className="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 z-[1700] flex h-7 max-w-[240px] -translate-x-1/2 items-center whitespace-nowrap rounded-lg bg-[#2b2b2b] px-2 text-xs text-white opacity-0 shadow-lg transition group-hover:opacity-100">
+                {item.label}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      <input
+        accept="image/*"
+        className="hidden"
+        onChange={(event) => {
+          event.currentTarget.value = "";
+        }}
+        ref={panoramaUploadInputRef}
+        type="file"
+      />
+
+      {aiImportOpen ? (
+        <DirectorAiImportDialog
+          mode={aiImportMode}
+          onClose={() => setAiImportOpen(false)}
+          onModeChange={setAiImportMode}
+          onSelectImage={(imageUrl) => {
+            setAiImportSelectedImage(imageUrl);
+            setAiImportTab("history");
+          }}
+          onStart={handleStartAiImport}
+          onTabChange={setAiImportTab}
+          running={aiImportRunning}
+          selectedImage={aiImportSelectedImage}
+          tab={aiImportTab}
+        />
+      ) : null}
+      {panoramaHistoryOpen ? <DirectorPanoramaHistoryDialog onClose={() => setPanoramaHistoryOpen(false)} /> : null}
+      {panoramaAiOpen ? <DirectorPanoramaAiDialog onClose={() => setPanoramaAiOpen(false)} /> : null}
+    </div>
+  );
+}
+
+function DirectorPanoramaHistoryDialog({ onClose }: { onClose: () => void }) {
+  const [activeTab, setActiveTab] = useState<"image" | "video" | "audio">("image");
+  const tabs = [
+    { count: 8, key: "image" as const, label: "图片历史" },
+    { count: 10, key: "video" as const, label: "视频历史" },
+    { count: 6, key: "audio" as const, label: "音频历史" },
+  ];
+  const assets = Array.from({ length: activeTab === "video" ? 10 : activeTab === "audio" ? 6 : 8 }, (_, index) => ({
+    id: `${activeTab}-${index}`,
+    image: DIRECTOR_AI_HISTORY_IMAGES[index % DIRECTOR_AI_HISTORY_IMAGES.length],
+    title: activeTab === "image" ? `全景参考 ${index + 1}` : activeTab === "video" ? `视频资产 ${index + 1}` : `音频资产 ${index + 1}`,
+  }));
+
+  return (
+    <div className="absolute inset-0 z-[650] flex items-start justify-center bg-transparent">
+      <section className="relative mt-20 h-[645px] w-[calc(100vw-151.2px)] max-w-[1360.8px] overflow-hidden rounded-[16px] bg-[#262626] text-white shadow-2xl">
+        <div className="flex h-[58px] items-center gap-4 border-white/8 border-b px-6">
+          <div className="text-[16px] font-semibold leading-5 text-white/90">历史资产</div>
+          <span className="rounded-md bg-white/8 px-2 py-1 text-[12px] leading-none text-white/58">100%</span>
+          <button
+            className="absolute right-4 top-4 flex h-7 w-7 items-center justify-center rounded-lg text-white/56 transition-colors hover:bg-white/8 hover:text-white"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex h-12 items-center justify-between border-white/8 border-b px-6">
+          <div className="flex items-center gap-6">
+            {tabs.map((tabItem) => (
+              <button
+                className={cn(
+                  "h-8 text-[13px] leading-8 transition-colors hover:text-white",
+                  activeTab === tabItem.key ? "font-medium text-white" : "text-white/42"
+                )}
+                key={tabItem.key}
+                onClick={() => setActiveTab(tabItem.key)}
+                type="button"
+              >
+                {tabItem.label}({tabItem.count})
+              </button>
+            ))}
+          </div>
+          <div className="flex items-center gap-3 text-[12px] text-white/54">
+            <button className="flex h-8 items-center gap-1 rounded-lg bg-white/8 px-3 text-white/62" type="button">
+              时间降序
+              <ChevronDown className="h-3.5 w-3.5" />
+            </button>
+            <button className="h-8 rounded-lg bg-white/8 px-3 text-white/62" type="button">
+              批量操作
+            </button>
+          </div>
+        </div>
+
+        <div className="h-[535px] overflow-hidden px-6 py-4">
+          <div className="mb-4 text-[13px] leading-[18px] text-white/66">2026-07-09</div>
+          <div className="grid grid-cols-4 gap-4">
+            {assets.slice(0, 8).map((asset) => (
+              <div className="group overflow-hidden rounded-[10px] bg-[#1f1f1f]" key={asset.id}>
+                <div className="relative h-[138px] overflow-hidden bg-[#303030]">
+                  {activeTab === "image" ? (
+                    <img alt="" className="h-full w-full object-cover" src={asset.image} />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center bg-[radial-gradient(circle_at_50%_28%,rgba(255,255,255,0.14),transparent_30%),#303030] text-white/34">
+                      {activeTab === "video" ? <Video className="h-10 w-10" /> : <Music2 className="h-10 w-10" />}
+                    </div>
+                  )}
+                  <span className="absolute left-2 top-2 rounded bg-black/45 px-1.5 py-0.5 text-[10px] leading-none text-white/70">历史</span>
+                </div>
+                <div className="flex h-[74px] flex-col justify-between px-3 py-2">
+                  <div className="truncate text-[12px] leading-[17px] text-white/72">{asset.title}</div>
+                  <div className="flex items-center gap-2 text-[12px] leading-none text-white/58">
+                    <button className="rounded-md px-1 py-1 transition-colors hover:bg-white/8 hover:text-white" type="button">
+                      查看
+                    </button>
+                    <button className="rounded-md px-1 py-1 transition-colors hover:bg-white/8 hover:text-white" type="button">
+                      使用
+                    </button>
+                    <button className="rounded-md px-1 py-1 transition-colors hover:bg-white/8 hover:text-white" type="button">
+                      下载
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function DirectorPanoramaAiDialog({ onClose }: { onClose: () => void }) {
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+
+  return (
+    <div className="absolute inset-0 z-[500] flex items-center justify-center bg-black/35">
+      <section className="flex h-[448px] w-[640px] flex-col overflow-hidden rounded-xl border border-white/8 bg-[#1f1f1f] text-white shadow-2xl">
+        <div className="flex h-[52px] shrink-0 items-start justify-between px-4 pt-[10px]">
+          <div className="pt-0.5 text-sm font-medium leading-5 text-white">AI生成</div>
+          <button
+            className="flex h-6 w-6 items-center justify-center rounded-lg text-white/74 transition-colors hover:bg-white/10 hover:text-white"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="px-4 pt-[10px]">
+          <button
+            className="flex h-[320px] w-full flex-col items-center justify-center rounded-lg border border-white/8 bg-white/[0.03] text-white/72 transition-colors hover:border-white/16 hover:bg-white/[0.05] hover:text-white"
+            onClick={() => uploadInputRef.current?.click()}
+            type="button"
+          >
+            <Upload className="mb-4 h-8 w-8 text-white/42" />
+            <span className="text-[14px] leading-5">上传图片</span>
+          </button>
+        </div>
+
+        <div className="relative mt-4 h-12 shrink-0 border-white/8 border-t">
+          <div className="absolute left-4 top-[7px] text-xs leading-[18px] text-white/65">退出不会中断生成，可在历史记录中查看结果</div>
+          <div className="absolute right-4 top-[1px] flex items-start gap-3">
+            <span className="text-[13px] leading-7 text-white/78">0</span>
+            <button
+              aria-label="生成"
+              className="flex h-7 w-7 items-center justify-center rounded-full bg-white text-[#141414] transition-colors hover:bg-neutral-100 active:bg-neutral-200"
+              title="生成"
+              type="button"
+            >
+              <Sparkles className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+
+        <input
+          accept="image/*"
+          className="hidden"
+          onChange={(event) => {
+            event.currentTarget.value = "";
+          }}
+          ref={uploadInputRef}
+          type="file"
+        />
+      </section>
+    </div>
+  );
+}
+
+function DirectorRoleInspectorPanel({ selectedObject }: { selectedObject: string }) {
+  return (
+    <div className="-mx-4 -my-4">
+      <section className="border-white/8 border-b px-4 pb-3 pt-4">
+        <div className="flex h-7 gap-2">
+          <button className="h-7 min-w-12 rounded-lg bg-white/10 px-3 text-[13px] text-white" type="button">
+            属性
+          </button>
+          <button className="h-7 rounded-lg px-3 text-[13px] text-white/40 hover:bg-white/6 hover:text-white/65" type="button">
+            姿势
+          </button>
+        </div>
+      </section>
+      <section className="border-white/8 border-b px-4 py-4">
+        <div className="space-y-3">
+          <label className="block">
+            <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">名称</span>
+            <input
+              className="h-7 w-full rounded-lg border-0 bg-white/10 px-2 text-[12px] text-neutral-50 outline-none placeholder:text-white/30"
+              readOnly
+              value={selectedObject}
+            />
+          </label>
+          <DirectorAxisInputs label="位置" values={["0", "0", "0"]} />
+          <DirectorAxisInputs label="旋转" values={["0", "0", "0"]} />
+          <DirectorAxisInputs label="缩放" values={["1.03", "1.03", "1.03"]} />
+          <div>
+            <div className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">统一缩放</div>
+            <div className="flex items-center gap-3">
+              <input className="h-1.5 flex-1 accent-[#65c7ff]" defaultValue={1} max={2} min={0.2} step={0.1} type="range" />
+              <input
+                className="h-8 w-14 rounded-[8px] border-0 bg-white/10 text-center text-[12px] text-white/78 outline-none"
+                readOnly
+                value="1.0"
+              />
+            </div>
+          </div>
+          <label className="block">
+            <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">颜色</span>
+            <div className="flex h-7 items-center rounded-lg bg-white/10 px-2 text-[12px] text-white/75">
+              <span className="mr-2 h-5 w-5 rounded-md bg-[#34C759]" />
+              <span className="mr-1 text-white/35">#</span>
+              <span>34C759</span>
+            </div>
+          </label>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function DirectorAiImportDialog({
+  mode,
+  onClose,
+  onModeChange,
+  onSelectImage,
+  onStart,
+  onTabChange,
+  running,
+  selectedImage,
+  tab,
+}: {
+  mode: "insert" | "overwrite";
+  onClose: () => void;
+  onModeChange: (mode: "insert" | "overwrite") => void;
+  onSelectImage: (imageUrl: string) => void;
+  onStart: () => void;
+  onTabChange: (tab: "upload" | "history") => void;
+  running: boolean;
+  selectedImage: string | null;
+  tab: "upload" | "history";
+}) {
+  const showHistory = tab === "history" && !selectedImage;
+
+  return (
+    <div className="absolute inset-0 z-[500] flex items-center justify-center bg-black/35 backdrop-blur-sm">
+      <section className="flex h-[571px] w-[640px] flex-col overflow-hidden rounded-xl border border-white/10 bg-[#1f1f1f] shadow-2xl">
+        <div className="flex h-12 shrink-0 items-start justify-between border-white/10 border-b px-4 pt-3">
+          <div className="pt-0.5 text-sm font-medium leading-5 text-white">AI 识图导入</div>
+          <button
+            className="flex size-6 items-center justify-center rounded-lg text-white/80 transition-colors hover:bg-white/10 hover:text-white"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex flex-1 flex-col gap-4 px-4 py-4">
+          <div className="flex h-[18px] items-center gap-6">
+            {[
+              { key: "upload" as const, label: "本地上传" },
+              { key: "history" as const, label: "历史记录" },
+            ].map((item) => (
+              <button
+                className={cn(
+                  "h-[18px] shrink-0 text-[13px] leading-[18px] transition-colors hover:text-white/75 disabled:cursor-not-allowed disabled:opacity-45",
+                  tab === item.key ? "font-medium text-white" : "text-white/40"
+                )}
+                disabled={running}
+                key={item.key}
+                onClick={() => onTabChange(item.key)}
+                type="button"
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+
+          {selectedImage ? (
+            <button
+              className="group relative flex h-[298px] w-full shrink-0 items-center justify-center overflow-hidden rounded-xl border border-white/8 bg-[#171717]"
+              disabled={running}
+              onClick={() => {
+                if (!running) {
+                  onTabChange("history");
+                }
+              }}
+              type="button"
+            >
+              <img alt="上传图片预览" className="h-full w-full object-cover" src={selectedImage} />
+              <span className="absolute inset-0 flex items-center justify-center bg-black/55 text-[13px] text-white opacity-0 transition-opacity group-hover:opacity-100">
+                更换图片
+              </span>
+            </button>
+          ) : showHistory ? (
+            <div className="h-[298px] w-full shrink-0 overflow-hidden">
+              <div className="text-[13px] leading-[18px] text-white/66">2026-07-09</div>
+              <div className="mt-[23px] grid grid-cols-4 gap-3 px-[9px]">
+                {DIRECTOR_AI_HISTORY_IMAGES.map((imageUrl, index) => (
+                  <div className="group relative h-[138px] overflow-hidden rounded-lg bg-[#262626]" key={`${imageUrl}-${index}`}>
+                    <img alt="" className="h-full w-full object-cover" src={imageUrl} />
+                    <span className="pointer-events-none absolute left-1.5 top-1.5 h-4 w-[33px] rounded bg-black/45" />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/55 opacity-100 transition-opacity">
+                      <button
+                        className="flex h-7 w-[38px] cursor-pointer items-center justify-center rounded-lg px-1.5 text-[13px] text-white transition-colors hover:text-white/80"
+                        onClick={() => onSelectImage(imageUrl)}
+                        type="button"
+                      >
+                        使用
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <button
+              className="relative flex h-[298px] w-full shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed border-white/22 bg-[#171717] px-12 text-center transition-colors hover:border-white/34"
+              onClick={() => onTabChange("history")}
+              type="button"
+            >
+              <Upload className="mb-3 h-8 w-8 text-white/35" />
+              <span className="text-[14px] leading-5 text-white/78">点击上传图片或拖拽本地图片至此上传</span>
+              <span className="mt-2 text-[12px] leading-[17px] text-white/38">上传后画布将新建一个图片节点并自动替换当前图源</span>
+            </button>
+          )}
+
+          <div className="flex flex-col gap-2">
+            <div className="text-[13px] leading-[18px] text-white/65">选择是否覆盖场景</div>
+            <div className="flex gap-2">
+              {[
+                {
+                  key: "insert" as const,
+                  title: "插入当前导演台",
+                  desc: "作为站位参考层插入，不覆盖当前全景、角色和机位",
+                },
+                {
+                  key: "overwrite" as const,
+                  title: "覆盖当前导演台",
+                  desc: "作为站位参考层插入，覆盖当前全景、角色和机位",
+                },
+              ].map((item) => (
+                <button
+                  className={cn(
+                    "flex h-[53px] w-[299px] items-start gap-2 rounded-lg border px-2 py-2 text-left transition-colors",
+                    mode === item.key
+                      ? "border-white/28 bg-white/[0.04] text-white/80"
+                      : "border-white/10 bg-transparent text-white/45 hover:border-white/20 hover:text-white/65"
+                  )}
+                  disabled={running}
+                  key={item.key}
+                  onClick={() => onModeChange(item.key)}
+                  type="button"
+                >
+                  <span
+                    className={cn(
+                      "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+                      mode === item.key ? "border-white bg-white text-[#141414]" : "border-white/24"
+                    )}
+                  >
+                    {mode === item.key ? <Check className="h-3 w-3" /> : null}
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block text-[13px] leading-[18px]">{item.title}</span>
+                    <span className="mt-0.5 block text-[11px] leading-[15px] text-current opacity-65">{item.desc}</span>
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex h-16 shrink-0 items-start justify-between border-white/10 border-t px-4 pt-4">
+          <div className="pt-[7px] text-xs leading-[17px] text-white/65">退出不会中断生成过程，全景图生成成功后，会自动加载到背景</div>
+          <div className="flex h-8 shrink-0 items-center gap-2">
+            <span className="text-[13px] leading-[18px] text-white/78">6</span>
+            <button
+              className="flex h-8 min-w-[102px] items-center justify-center gap-1.5 rounded-lg bg-white px-3 text-[13px] leading-[18px] text-[#141414] transition-[filter,opacity] hover:bg-neutral-100 active:bg-neutral-200 disabled:cursor-not-allowed disabled:opacity-45"
+              disabled={!selectedImage || running}
+              onClick={onStart}
+              type="button"
+            >
+              {running ? (
+                <>
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  识图中…
+                </>
+              ) : (
+                "识图导入场景"
+              )}
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function DirectorAxisInputs({
+  label,
+  values,
+}: {
+  label: string;
+  values: [string, string, string] | string[];
+}) {
+  return (
+    <div>
+      <div className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">{label}</div>
+      <div className="grid grid-cols-3 gap-1">
+        {["X", "Y", "Z"].map((axis, index) => (
+          <label className="relative block" key={axis}>
+            <span
+              className="pointer-events-none absolute left-2 top-1/2 z-10 -translate-y-1/2 text-[12px] leading-none text-white/30"
+              title={`左右拖动调整 ${axis} 轴`}
+            >
+              {axis}
+            </span>
+            <input
+              className="h-7 w-full rounded-lg border-0 bg-white/10 pl-6 pr-1 text-[12px] leading-none text-white/78 outline-none"
+              defaultValue={values[index] || "0"}
+            />
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function ModuleActionIcon({ icon }: { icon: LucideIcon | "hd" }) {
   if (icon === "hd") {
     return (
-      <span className="flex h-[18px] min-w-[24px] items-center justify-center rounded-[3px] border border-white/72 px-1 text-[10px] font-bold leading-none text-white/86">
-        HD
-      </span>
+      <span
+        aria-hidden="true"
+        className="flex h-[18px] min-w-[24px] items-center justify-center rounded-[3px] border border-white/72 px-1"
+      />
     );
   }
   const Icon = icon;
@@ -10508,7 +21584,171 @@ function GridSplitSelectionOverlay({
   );
 }
 
-function OfficialAudioCard({ mediaUrl, selected }: { mediaUrl: string; selected: boolean }) {
+function OfficialVideoResultCard({
+  durationSeconds,
+  mediaUrl,
+  onExtractFrame,
+  previewUrl,
+  selected,
+  title,
+}: {
+  durationSeconds: number;
+  mediaUrl: string;
+  onExtractFrame: (kind: VideoFrameExtractionKind) => void;
+  previewUrl?: string;
+  selected: boolean;
+  title: string;
+}) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [playing, setPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [frameMenuOpen, setFrameMenuOpen] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const safeDuration = Math.max(1, durationSeconds || 5);
+  const progress = Math.max(0, Math.min(currentTime / safeDuration, 1));
+  const controlsVisible = hovered || selected || frameMenuOpen;
+  const frameActions: Array<{ kind: VideoFrameExtractionKind; label: string }> = [
+    { kind: "first", label: "截取首帧" },
+    { kind: "last", label: "截取尾帧" },
+    { kind: "current", label: "截取当前帧" },
+  ];
+
+  const togglePlayback = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) {
+      void video.play();
+      setPlaying(true);
+      return;
+    }
+    video.pause();
+    setPlaying(false);
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "group/video-result relative h-full w-full overflow-visible rounded-[10px]",
+        selected && "ring-1 ring-[#8b96ff]/45"
+      )}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => {
+        setHovered(false);
+        setFrameMenuOpen(false);
+      }}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => {
+        setHovered(false);
+        setFrameMenuOpen(false);
+      }}
+      onPointerMove={() => setHovered(true)}
+    >
+      <video
+        className="pointer-events-none h-full w-full rounded-[10px] object-cover"
+        muted
+        onEnded={() => setPlaying(false)}
+        onPause={() => setPlaying(false)}
+        onPlay={() => setPlaying(true)}
+        onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
+        playsInline
+        poster={previewUrl || undefined}
+        preload="metadata"
+        ref={videoRef}
+        src={mediaUrl}
+      />
+      <div
+        className={cn(
+          "pointer-events-none absolute inset-x-0 bottom-0 h-20 rounded-b-[10px] bg-gradient-to-t from-black/72 via-black/34 to-transparent transition-opacity duration-150",
+          controlsVisible ? "opacity-100" : "opacity-0"
+        )}
+      />
+      <div
+        className={cn(
+          "nodrag pointer-events-auto absolute inset-x-0 bottom-0 flex items-center gap-2 px-3 pb-2.5 pt-8 text-white transition-opacity duration-150",
+          controlsVisible ? "opacity-100" : "opacity-0"
+        )}
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        <button
+          aria-label={playing ? "暂停视频" : "播放视频"}
+          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-black/30 text-white/86 transition hover:bg-black/50"
+          onClick={(event) => {
+            event.stopPropagation();
+            togglePlayback();
+          }}
+          type="button"
+        >
+          {playing ? <Pause className="h-3.5 w-3.5 fill-current" strokeWidth={0} /> : <Play className="ml-0.5 h-3.5 w-3.5 fill-current" strokeWidth={0} />}
+        </button>
+        <span className="w-[34px] text-[12px] tabular-nums text-white/82">{formatVideoTimestamp(currentTime)}</span>
+        <div className="h-1 min-w-12 flex-1 overflow-hidden rounded-full bg-white/24">
+          <span className="block h-full rounded-full bg-white" style={{ width: `${Math.max(4, progress * 100)}%` }} />
+        </div>
+        <span className="w-[34px] text-right text-[12px] tabular-nums text-white/82">{formatVideoTimestamp(safeDuration)}</span>
+        <div
+          className="group/frame-menu relative"
+          onMouseLeave={() => setFrameMenuOpen(false)}
+        >
+          <button
+            aria-label="截取视频帧"
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-black/30 text-white/86 transition hover:bg-black/50"
+            onClick={(event) => {
+              event.stopPropagation();
+              setFrameMenuOpen((value) => !value);
+            }}
+            type="button"
+          >
+            <ImageIcon className="h-3.5 w-3.5" strokeWidth={2.2} />
+          </button>
+          <div
+            className={cn(
+              "absolute bottom-full right-0 z-30 flex justify-end pb-2 transition-opacity",
+              frameMenuOpen
+                ? "pointer-events-auto opacity-100"
+                : "pointer-events-none opacity-0 group-hover/frame-menu:pointer-events-auto group-hover/frame-menu:opacity-100"
+            )}
+          >
+            <div className="flex min-w-[108px] flex-col gap-1 overflow-hidden rounded-[12px] border border-white/10 bg-[rgba(26,26,26,0.96)] p-1 shadow-[0_14px_42px_rgba(0,0,0,0.42)] backdrop-blur-[12px]">
+              {frameActions.map((item) => (
+                <button
+                  className="flex h-8 w-full items-center whitespace-nowrap rounded-[8px] px-2 text-left text-[13px] text-white/90 transition-colors hover:bg-white/10"
+                  key={item.kind}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setFrameMenuOpen(false);
+                    onExtractFrame(item.kind);
+                  }}
+                  type="button"
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        className={cn(
+          "pointer-events-none absolute left-3 top-3 rounded-[6px] bg-black/34 px-2 py-1 text-[11px] text-white/76 transition-opacity",
+          controlsVisible ? "opacity-100" : "opacity-0"
+        )}
+      >
+        {title}
+      </span>
+    </div>
+  );
+}
+
+function OfficialAudioCard({
+  durationSeconds = 3,
+  mediaUrl,
+  selected,
+}: {
+  durationSeconds?: number;
+  mediaUrl: string;
+  selected: boolean;
+}) {
+  const durationLabel = `00:00 / ${formatAudioTimestamp(durationSeconds)}`;
   return (
     <div
       className={cn(
@@ -10529,7 +21769,7 @@ function OfficialAudioCard({ mediaUrl, selected }: { mediaUrl: string; selected:
         </div>
       </div>
       <div className="absolute bottom-4 left-3 flex items-center gap-3 text-[15px] text-black/62">
-        <span>00:00 / 00:03</span>
+        <span>{durationLabel}</span>
       </div>
       <button
         className="absolute bottom-3 left-1/2 flex h-8 w-8 -translate-x-1/2 items-center justify-center rounded-full bg-[#303030] text-white/78 transition hover:bg-black"
@@ -10555,20 +21795,33 @@ function OfficialAudioCard({ mediaUrl, selected }: { mediaUrl: string; selected:
 
 function CanvasNodeShell({
   children,
+  connectionHoverActive,
+  connectionsHidden,
   node,
   onContextMenu,
   onOpenConnectionMenu,
   onPointerDown,
+  onStartConnectionDrag,
+  onStartConnectionMouseDrag,
   selected,
 }: {
   children: ReactNode;
+  connectionHoverActive: boolean;
+  connectionsHidden: boolean;
   node: CloneNode;
   onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
   onOpenConnectionMenu: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
   onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onStartConnectionDrag: (event: ReactPointerEvent<HTMLButtonElement>, side: ConnectionSide) => void;
+  onStartConnectionMouseDrag: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
   selected: boolean;
 }) {
   const targetModuleKind = getTargetModuleKind(node);
+  const handleClassName = cn(
+    "absolute top-1/2 z-20 h-[22px] w-[22px] -translate-y-1/2 cursor-crosshair rounded-full bg-transparent text-transparent outline-none transition-opacity duration-150",
+    connectionsHidden && "pointer-events-none opacity-0"
+  );
+  const handleTabIndex = connectionsHidden ? -1 : undefined;
   return (
     <div
       className={cn(
@@ -10577,6 +21830,7 @@ function CanvasNodeShell({
         selected && "z-20"
       )}
       data-canvas-node="true"
+      data-canvas-node-id={node.id}
       data-canvas-overlay="true"
       onContextMenu={onContextMenu}
       onPointerDown={onPointerDown}
@@ -10585,47 +21839,69 @@ function CanvasNodeShell({
       {targetModuleKind ? (
         <>
           <button
-            className="absolute left-[-13px] top-1/2 z-10 mt-[14px] flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-white/18 bg-[#242424] text-[20px] leading-none text-white/50 hover:border-white/34 hover:text-white/82"
+            aria-label="添加上下文"
+            className={cn(handleClassName, "left-[-11px]")}
+            data-handleid="target"
+            data-handlepos="left"
+            data-nodeid={node.id}
             onClick={(event) => onOpenConnectionMenu(event, "target")}
-            onPointerDown={(event) => event.stopPropagation()}
+            onMouseDown={(event) => onStartConnectionMouseDrag(event, "target")}
+            onPointerDown={(event) => onStartConnectionDrag(event, "target")}
+            tabIndex={handleTabIndex}
             title="添加上下文"
             type="button"
-          >
-            +
-          </button>
+          />
           <button
-            className="absolute right-[-13px] top-1/2 z-10 mt-[14px] flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-white/18 bg-[#242424] text-[20px] leading-none text-white/50 hover:border-white/34 hover:text-white/82"
+            aria-label="引用该节点生成"
+            className={cn(handleClassName, "right-[-11px]")}
+            data-handleid="source"
+            data-handlepos="right"
+            data-nodeid={node.id}
             onClick={(event) => onOpenConnectionMenu(event, "source")}
-            onPointerDown={(event) => event.stopPropagation()}
+            onMouseDown={(event) => onStartConnectionMouseDrag(event, "source")}
+            onPointerDown={(event) => onStartConnectionDrag(event, "source")}
+            tabIndex={handleTabIndex}
             title="引用该节点生成"
             type="button"
-          >
-            +
-          </button>
+          />
         </>
       ) : (
         <>
           <button
-            className="absolute left-[-10px] top-1/2 z-10 h-5 w-5 -translate-y-1/2 cursor-pointer rounded-full border border-white/30 bg-white text-[16px] leading-[16px] text-black/45 hover:text-black"
+            aria-label="添加上下文"
+            className={cn(handleClassName, "left-[-11px]")}
+            data-handleid="target"
+            data-handlepos="left"
+            data-nodeid={node.id}
             onClick={(event) => onOpenConnectionMenu(event, "target")}
-            onPointerDown={(event) => event.stopPropagation()}
+            onMouseDown={(event) => onStartConnectionMouseDrag(event, "target")}
+            onPointerDown={(event) => onStartConnectionDrag(event, "target")}
+            tabIndex={handleTabIndex}
             title="添加上下文"
             type="button"
-          >
-            +
-          </button>
+          />
           <button
-            className="absolute right-[-10px] top-1/2 z-10 h-5 w-5 -translate-y-1/2 cursor-pointer rounded-full border border-white/30 bg-white text-[16px] leading-[16px] text-black/45 hover:text-black"
+            aria-label="引用该节点生成"
+            className={cn(handleClassName, "right-[-11px]")}
+            data-handleid="source"
+            data-handlepos="right"
+            data-nodeid={node.id}
             onClick={(event) => onOpenConnectionMenu(event, "source")}
-            onPointerDown={(event) => event.stopPropagation()}
+            onMouseDown={(event) => onStartConnectionMouseDrag(event, "source")}
+            onPointerDown={(event) => onStartConnectionDrag(event, "source")}
+            tabIndex={handleTabIndex}
             title="引用该节点生成"
             type="button"
-          >
-            +
-          </button>
+          />
         </>
       )}
       {children}
+      {connectionHoverActive ? (
+        <span
+          className="pointer-events-none absolute inset-0 z-10 rounded-[12px] bg-black/35"
+          data-connection-target-overlay="true"
+        />
+      ) : null}
     </div>
   );
 }
@@ -10636,6 +21912,7 @@ function PresetMediaCanvasNode({
   onClearLocalEditRegions,
   node,
   onCancelGeneration,
+  onExtractVideoFrame,
   onSetLocalEditMode,
   onSubmitLocalEdit,
   onToggleGridSplitSelection,
@@ -10647,6 +21924,7 @@ function PresetMediaCanvasNode({
   onClearLocalEditRegions: () => void;
   node: CloneNode;
   onCancelGeneration: () => void;
+  onExtractVideoFrame: (kind: VideoFrameExtractionKind) => void;
   onSetLocalEditMode: (enabled: boolean) => void;
   onSubmitLocalEdit: (regions: LocalEditRegion[]) => void;
   onToggleGridSplitSelection: (index: number, behavior: "replace" | "toggle") => void;
@@ -10685,7 +21963,7 @@ function PresetMediaCanvasNode({
         ) : null}
       </div>
       {mediaType === "audio" ? (
-        <OfficialAudioCard mediaUrl={mediaUrl} selected={selected} />
+        <OfficialAudioCard durationSeconds={getDraftNumber(node, "durationSeconds", 3)} mediaUrl={mediaUrl} selected={selected} />
       ) : mediaType === "video" ? (
         <div
           className={cn(
@@ -10703,7 +21981,14 @@ function PresetMediaCanvasNode({
               status={generationStatus}
             />
           ) : mediaUrl ? (
-            <video className="relative h-full w-full object-cover" controls playsInline src={mediaUrl} />
+            <OfficialVideoResultCard
+              durationSeconds={getVideoNodeDurationSeconds(node)}
+              mediaUrl={mediaUrl}
+              onExtractFrame={onExtractVideoFrame}
+              previewUrl={getVideoNodePreviewUrl(node) || sourceUrl}
+              selected={selected}
+              title={node.title}
+            />
           ) : (
             <div className="relative text-center">
               <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-white/8 text-white/70">
@@ -11332,14 +22617,22 @@ function PureTextResourceCanvasNode({
 
 function PresetScriptCanvasNode({
   node,
+  onOpenWorkflow,
+  onRun,
   onTextResourceChange,
   selected,
 }: {
   node: CloneNode;
+  onOpenWorkflow: () => void;
+  onRun: () => void;
   onTextResourceChange: (content: string) => void;
   selected: boolean;
 }) {
   const scriptRole = getDraftString(node, "scriptRole");
+  const generationStatus = getDraftString(node, "generationStatus");
+  const isGenerating = generationStatus === "pending";
+  const isGenerationFailed = generationStatus === "failed";
+  const isGenerated = Boolean(node.draftValues?.generated);
   const contentValues = node.draftValues?.content;
   const textContent =
     Array.isArray(contentValues) && typeof contentValues[0] === "string"
@@ -11347,11 +22640,8 @@ function PresetScriptCanvasNode({
       : node.draftValues?.manualEditing
         ? ""
         : STORY_SCRIPT_TEXT;
-  const rows = [
-    ["01", "现代办公室", "深夜加班，键盘声急促，人物体力透支", "环境键盘声"],
-    ["02", "盛唐大殿", "女主惊醒跪于金銮殿，百官压迫", "鼓声与低频"],
-    ["03", "长安街市", "诗声落下，盛唐山河展开", "史诗音乐起"],
-  ];
+  const rows = getStoryScriptRows(node);
+  const statusLabel = isGenerating ? "生成中" : isGenerationFailed ? "生成失败" : isGenerated ? "已生成" : "待生成";
 
   return (
     <div className="h-full w-full">
@@ -11368,27 +22658,77 @@ function PresetScriptCanvasNode({
         >
           <div className="flex h-12 items-center justify-between border-[#e5e7eb] border-b px-4">
             <span className="font-semibold text-[15px]">故事脚本</span>
-            <span className="rounded-full bg-[#eef0ff] px-3 py-1 text-[12px] text-[#5161ff]">待生成</span>
+            <span
+              className={cn(
+                "rounded-full px-3 py-1 text-[12px]",
+                isGenerating
+                  ? "bg-[#eef0ff] text-[#5161ff]"
+                  : isGenerationFailed
+                    ? "bg-[#fff1f1] text-[#d64545]"
+                    : isGenerated
+                      ? "bg-[#edf8ef] text-[#268648]"
+                      : "bg-[#eef0ff] text-[#5161ff]"
+              )}
+            >
+              {statusLabel}
+            </span>
           </div>
-          <div className="grid grid-cols-[64px_120px_1fr_110px] border-[#eef0f3] border-b bg-[#f7f8fa] text-[12px] text-[#697080]">
-            {["镜号", "场景", "画面", "声音"].map((item) => (
-              <div className="border-[#eef0f3] border-r px-3 py-2 last:border-r-0" key={item}>{item}</div>
-            ))}
-          </div>
-          {rows.map((row) => (
-            <div className="grid grid-cols-[64px_120px_1fr_110px] border-[#eef0f3] border-b text-[12px]" key={row[0]}>
-              {row.map((cell) => (
-                <div className="border-[#eef0f3] border-r px-3 py-3 last:border-r-0" key={cell}>{cell}</div>
+          <div className="h-[calc(100%-104px)] overflow-auto">
+            <div className="min-w-[1160px]">
+              <div className="grid grid-cols-[56px_56px_minmax(260px,1.8fr)_72px_minmax(160px,1fr)_minmax(150px,1fr)_minmax(140px,0.9fr)_minmax(140px,0.9fr)_minmax(220px,1.4fr)] border-[#eef0f3] border-b bg-[#f7f8fa] text-[12px] text-[#697080]">
+                {["镜号", "时长", "画面描述", "景别", "光影氛围", "对白·旁白", "音效", "运镜", "最终提示词"].map((item) => (
+                  <div className="border-[#eef0f3] border-r px-3 py-2 last:border-r-0" key={item}>{item}</div>
+                ))}
+              </div>
+              {rows.map((row) => (
+                <div className="grid grid-cols-[56px_56px_minmax(260px,1.8fr)_72px_minmax(160px,1fr)_minmax(150px,1fr)_minmax(140px,0.9fr)_minmax(140px,0.9fr)_minmax(220px,1.4fr)] border-[#eef0f3] border-b text-[12px]" key={row.id}>
+                  {[
+                    row.shot,
+                    row.duration,
+                    row.sceneDescription,
+                    row.shotSize,
+                    row.lighting,
+                    row.dialogue,
+                    row.voiceAndSfx,
+                    row.cameraMovement,
+                    row.imagePrompt,
+                  ].map((cell, cellIndex) => (
+                    <div className="border-[#eef0f3] border-r px-3 py-3 leading-5 last:border-r-0" key={`${row.id}-${cellIndex}`}>{cell}</div>
+                  ))}
+                </div>
               ))}
             </div>
-          ))}
-          <button
-            className="m-4 h-10 w-[calc(100%-32px)] rounded-[10px] bg-[#111] text-[13px] font-semibold text-white"
-            onClick={() => toast.info("故事脚本生成接口待接入。")}
-            type="button"
-          >
-            生成完整脚本
-          </button>
+          </div>
+          <div className="m-4 flex h-10 gap-2">
+            {isGenerated ? (
+              <button
+                className="h-10 flex-1 rounded-[10px] bg-[#111] text-[13px] font-semibold text-white transition hover:bg-[#262626]"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onOpenWorkflow();
+                }}
+                onPointerDown={(event) => event.stopPropagation()}
+                type="button"
+              >
+                打开脚本节点 →
+              </button>
+            ) : null}
+            <button
+              className={cn(
+                "h-10 rounded-[10px] bg-[#111] text-[13px] font-semibold text-white disabled:cursor-wait disabled:bg-[#555]",
+                isGenerated ? "w-[150px]" : "w-full"
+              )}
+              disabled={isGenerating}
+              onClick={(event) => {
+                event.stopPropagation();
+                onRun();
+              }}
+              onPointerDown={(event) => event.stopPropagation()}
+              type="button"
+            >
+              {isGenerating ? "正在生成..." : isGenerated ? "重新生成" : "生成完整脚本"}
+            </button>
+          </div>
         </div>
       ) : (
         <div
@@ -11421,14 +22761,17 @@ function AddModulePanel({
   onAddModule,
   onClose,
   onGallerySelect,
+  onHistorySelect,
   onUploadFiles,
 }: {
   onAddModule: (kind: AddModuleKind) => void;
   onClose: () => void;
   onGallerySelect: () => void;
+  onHistorySelect: () => void;
   onUploadFiles: (files: File[]) => void;
 }) {
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  void onClose;
 
   const triggerUpload = () => {
     uploadInputRef.current?.click();
@@ -11436,8 +22779,9 @@ function AddModulePanel({
 
   return (
     <section
-      className="fixed left-[88px] top-[300px] z-50 flex w-[240px] flex-col gap-2 rounded-[16px] border border-white/10 bg-[#202020]/96 p-2 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-[32px]"
+      className="fixed bottom-[69px] left-[calc(50%_-_223px)] z-50 flex w-[196px] flex-col gap-1 overflow-visible rounded-[16px] border-[0.5px] border-[#363636] p-2 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-[32px]"
       data-canvas-overlay="true"
+      style={{ backgroundColor: "rgb(38, 38, 38)" }}
     >
       <input
         accept="image/*,video/*,audio/*"
@@ -11451,77 +22795,1961 @@ function AddModulePanel({
         ref={uploadInputRef}
         type="file"
       />
-      <div className="flex items-center justify-between px-2 py-1">
+      <div className="flex h-8 items-center px-2">
         <h4 className="text-[14px] font-medium leading-5 text-white/60">添加节点</h4>
-        <button className="flex h-7 w-7 items-center justify-center rounded-[8px] text-white/42 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
+      </div>
+      {ADD_NODE_PRIMARY_MODULES.map((item) => (
+        <CanvasAddMenuButton
+          badge={item.badge}
+          description={item.description}
+          icon={item.icon}
+          key={item.kind}
+          label={item.label}
+          onClick={() => onAddModule(item.kind)}
+        />
+      ))}
+      <CanvasAddSubmenu
+        description="创意脚本、生成故事板"
+        icon={Layers}
+        label="脚本"
+        onPrimary={() => undefined}
+        onSelect={(action) => {
+          onAddModule(action === "legacy" ? "legacy-script" : "script");
+        }}
+        options={SCRIPT_SUBMENU_OPTIONS}
+      />
+      <CanvasAddSubmenu
+        badge="NEW"
+        description="新增风格或特效素材节点"
+        icon={Sparkles}
+        label="素材库"
+        onPrimary={onGallerySelect}
+        onSelect={(action) => {
+          toast.info(action === "style" ? "风格库节点待接入。" : "特效库节点待接入。");
+          onGallerySelect();
+        }}
+        options={ASSET_LIBRARY_SUBMENU_OPTIONS}
+      />
+      <div className="flex h-8 items-center px-2">
+        <h4 className="text-[14px] font-medium leading-5 text-white/60">添加资源</h4>
+      </div>
+      <CanvasAddMenuButton
+        description="可上传图片、视频、音频文件"
+        icon={Upload}
+        label="上传"
+        onClick={triggerUpload}
+      />
+      <CanvasAddMenuButton
+        description="从历史生成中选择素材"
+        icon={Layers}
+        label="从生成历史选择"
+        onClick={onHistorySelect}
+      />
+    </section>
+  );
+}
+
+function AssetLibraryLauncherPanel({
+  onClose,
+  onOpenEffectLibrary,
+  onOpenStyleLibrary,
+}: {
+  onClose: () => void;
+  onOpenEffectLibrary: () => void;
+  onOpenStyleLibrary: () => void;
+}) {
+  return (
+    <section
+      className="fixed bottom-[73px] left-1/2 z-20 flex h-[163px] w-[240px] -translate-x-1/2 flex-col rounded-[12px] border-[0.5px] border-[#363636] bg-[#262626] p-2 text-white shadow-[0_24px_70px_rgba(0,0,0,0.48)]"
+      data-canvas-overlay="true"
+    >
+      <div className="flex h-[38px] items-center justify-between px-2">
+        <h4 className="text-[14px] font-medium leading-5 text-white/60">素材库</h4>
+        <button aria-label="关闭素材库" className="flex h-7 w-7 items-center justify-center rounded-[8px] text-white/42 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
           <X className="h-4 w-4" />
         </button>
       </div>
-      {ADD_NODE_MODULES.map((item) => {
-        const Icon = item.icon;
-        return (
+      <div className="grid gap-1">
+        <AssetLibraryLauncherRow
+          badge="NEW"
+          description="新增风格节点"
+          icon={Sparkles}
+          label="风格库"
+          onClick={onOpenStyleLibrary}
+        />
+        <AssetLibraryLauncherRow
+          badge="NEW"
+          description="新增特效节点"
+          icon={Wand2}
+          label="特效库"
+          onClick={onOpenEffectLibrary}
+        />
+      </div>
+    </section>
+  );
+}
+
+function AssetLibraryLauncherRow({
+  badge,
+  description,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  badge: string;
+  description: string;
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      className="flex h-[52px] w-[223px] items-center gap-3 rounded-[12px] px-2 text-left transition-colors hover:bg-white/10"
+      onClick={onClick}
+      type="button"
+    >
+      <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[10px] bg-white/8 text-white/70">
+        <Icon className="h-4 w-4" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex min-w-0 items-center gap-1.5 text-[13px] font-medium leading-5 text-white">
+          <span className="truncate">{label}</span>
+          <CanvasAddBadge badge={badge} />
+        </span>
+        <span className="mt-0.5 block truncate text-[11px] leading-4 text-white/42">{description}</span>
+      </span>
+    </button>
+  );
+}
+
+const STYLE_MARKET_CATEGORIES = [
+  "推荐",
+  "Midjourney",
+  "摄影写真",
+  "电商营销",
+  "动漫游戏",
+  "风格插画",
+  "平面设计",
+  "建筑及室内设计",
+  "创意玩法",
+  "文创周边",
+  "小说推文",
+  "全部",
+];
+
+const STYLE_MARKET_THUMBNAIL_URL = "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png";
+const EFFECT_MARKET_THUMBNAIL_URL = "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png";
+
+const STYLE_MARKET_CARDS: AssetMarketCard[] = [
+  ["复古马卡龙", "算力潮汐", 177],
+  ["新中式", "算力潮汐", 257],
+  ["岁月港风", "参数迷宫", 269],
+  ["新国韵", "代码极光", 306],
+  ["清风竹林", "参数迷宫", 48],
+  ["小岛微风", "像素漫游者", 522],
+  ["慢门胶片", "赛博蒲公英", 168],
+  ["曜黑幻境", "模型幻景", 450],
+  ["霸王戏梦", "算法织梦者", 105],
+  ["双重梦境", "数字游隼", 91],
+  ["古风侠影", "数据星云", 182],
+  ["莫奈花园", "智能碎屑", 219],
+  ["富士之夏", "智能碎屑", 330, "Midjourney Niji 7"],
+  ["云海", "代码极光", 216, "Midjourney Niji 7"],
+  ["曼岛日落", "算法织梦者", 153],
+  ["虹光柔映", "逻辑褶皱", 70],
+  ["复古港风", "逻辑褶皱", 80],
+  ["江湖旧梦", "算法织梦者", 346],
+];
+
+const STYLE_MARKET_SEARCH_CARDS: AssetMarketCard[] = [
+  ["新中式宋式美学支持输入中文室内家居空间", "三千问Atelier", 5, "Qwen Image"],
+  ["新中式禅意软装设计", "天懿", 102, "Qwen Image"],
+  ["Qwen-新中式国风国风美学插画", "重楼IP视觉", 1100, "Qwen Image"],
+  ["新中式传统美学插画", "思悦", 5300, "Lib Navo Pro"],
+  ["Qwen_新中式国风海报", "AI炼丹员", 94, "Qwen Image"],
+  ["新中式旗袍美女", "Mo", 883, "Qwen Image"],
+  ["【bai】新国风 | 水墨幻境", "bai", 36000, "Qwen Image"],
+  ["新中式插画_国潮风插画_平面设计", "YOUS", 959],
+];
+
+const EFFECT_MARKET_CARDS: AssetMarketCard[] = [
+  ["小蜜蜂运镜", "赛博蒲公英", 1000],
+  ["穿云而入", "数据星云", 527],
+  ["飞跃地平线", "赛博蒲公英", 1000],
+  ["逆转引力", "量子呢喃", 239],
+  ["地球缩放", "数字游隼", 179],
+  ["环球缩放", "比特浮尘", 182],
+  ["瞳孔推镜", "参数迷宫", 384],
+  ["俯冲地球", "神经元旋涡", 274],
+  ["产品扫光", "模型幻景", 934],
+  ["普拉达换装", "量子呢喃", 70],
+  ["多角度定点", "代码极光", 542],
+  ["水下慢镜头", "代码极光", 242],
+  ["试妆特写", "像素漫游者", 98],
+  ["悬浮缓入", "像素漫游者", 171],
+  ["微距推镜", "智能碎屑", 268],
+  ["直升机揭幕", "认知碎片", 100],
+  ["山路追击", "代码极光", 185],
+  ["雪地赛车", "智能碎屑", 94],
+  ["City Drive", "像素漫游者", 70],
+  ["3D解构", "算法织梦者", 296],
+  ["面部环拍", "比特浮尘", 183],
+  ["Showroom", "智能碎屑", 65],
+  ["饰品特写", "逻辑褶皱", 62],
+  ["巨人俯瞰", "算法织梦者", 116],
+  ["Runway", "算力潮汐", 81],
+  ["AI 编舞", "比特浮尘", 501],
+  ["机械姬", "认知碎片", 137],
+  ["巨星名场面", "数据星云", 80],
+  ["镜面分身", "赛博蒲公英", 56],
+  ["瞳孔异变", "数字游隼", 50],
+];
+
+const EFFECT_MARKET_SEARCH_CARDS: AssetMarketCard[] = [
+  ["产品扫光", "模型幻景", 934],
+  ["微距推镜", "智能碎屑", 268],
+  ["赛博化妆师", "算力潮汐", 27],
+  ["水下慢镜头", "代码极光", 242],
+  ["试妆特写", "像素漫游者", 98],
+  ["悬浮缓入", "像素漫游者", 171],
+  ["多角度定点", "代码极光", 542],
+  ["普拉达换装", "量子呢喃", 70],
+  ["City Drive", "像素漫游者", 70],
+  ["星云漩涡", "神经元旋涡", 168],
+];
+
+function AssetMarketPanel({
+  effectPresets = [],
+  kind,
+  modelLabel = "Seedance 2.0",
+  onApplyEffect,
+  onApplyStyle,
+  onClose,
+  selectedEffectTitle = "",
+}: {
+  effectPresets?: VideoCanvasEffectPreset[];
+  kind: "effect" | "style";
+  modelLabel?: string;
+  onApplyEffect?: (preset: VideoCanvasEffectPreset) => void;
+  onApplyStyle: (card: AssetMarketCard) => void;
+  onClose: () => void;
+  selectedEffectTitle?: string;
+}) {
+  const [activeTab, setActiveTab] = useState(kind === "effect" ? "特效广场" : "风格广场");
+  const [activeCategory, setActiveCategory] = useState("推荐");
+  const [commercialOnly, setCommercialOnly] = useState(false);
+  const [committedSearch, setCommittedSearch] = useState("");
+  const [minimized, setMinimized] = useState(false);
+  const [searchDraft, setSearchDraft] = useState("");
+  const galleryTab = kind === "effect" ? "特效广场" : "风格广场";
+  const configuredEffectCards: AssetMarketCard[] = effectPresets.map((preset) => [
+    preset.title,
+    preset.author,
+    preset.usageCount,
+    preset.model,
+  ]);
+  const defaultCards =
+    kind === "effect"
+      ? configuredEffectCards.length > 0
+        ? configuredEffectCards
+        : EFFECT_MARKET_CARDS
+      : STYLE_MARKET_CARDS;
+  const searchCards = kind === "effect" ? EFFECT_MARKET_SEARCH_CARDS : STYLE_MARKET_SEARCH_CARDS;
+  const normalizedSearch = committedSearch.trim().toLocaleLowerCase();
+  const cards = normalizedSearch
+    ? configuredEffectCards.length > 0 && kind === "effect"
+      ? defaultCards.filter((card) =>
+          `${card[0]} ${card[1]}`.toLocaleLowerCase().includes(normalizedSearch),
+        )
+      : searchCards
+    : defaultCards;
+  const categories = kind === "effect" ? ["推荐"] : STYLE_MARKET_CATEGORIES.filter((category) => category !== "全部");
+  const placeholder = kind === "effect" ? "搜索特效名称、作者" : "搜索风格名称、作者";
+  const visibleCards = activeTab === galleryTab ? cards : [];
+  const isVideoEffectPicker = kind === "effect" && Boolean(onApplyEffect);
+
+  return (
+    <div className="pointer-events-none fixed inset-0 z-[701]" data-canvas-overlay="true">
+      <section
+        className={cn(
+          "pointer-events-auto fixed left-1/2 flex flex-col overflow-hidden rounded-[12px] border-[0.5px] border-[#363636] bg-[#262626] text-white shadow-[0_28px_90px_rgba(0,0,0,0.56)]",
+          minimized
+            ? "top-1/2 h-[min(657px,calc(100dvh-48px))] w-[min(810px,calc(100vw-24px))] -translate-x-1/2 -translate-y-1/2"
+            : "top-[79.5px] h-[calc(100dvh-159px)] w-[min(1312px,calc(100vw-200px))] -translate-x-1/2",
+        )}
+        data-effect-market-size={minimized ? "compact" : "expanded"}
+      >
+        <div className="mt-3 flex h-10 shrink-0 items-center gap-8 px-4">
+          <div
+            className={cn(
+              "flex h-10 shrink-0 items-center gap-1 rounded-[12px] border-[0.5px] border-[#363636] bg-white/10 p-1",
+              minimized ? "w-[241px]" : "w-[293px]",
+            )}
+          >
+            {[galleryTab, "我的收藏", "最近使用"].map((tab) => (
+              <button
+                className={cn(
+                  "flex h-8 items-center justify-center rounded-[8px] text-[15px] text-white/66 transition-colors hover:bg-white/10 hover:text-white",
+                  minimized ? "w-[76px]" : "w-[92px]",
+                  activeTab === tab && "bg-white/10 text-white"
+                )}
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                type="button"
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+          <div
+            className={cn(
+              "flex h-10 items-center rounded-[10px] text-white/42",
+              minimized ? "w-[337px]" : "w-[310px]",
+            )}
+          >
+            <input
+              className="h-5 w-full bg-transparent text-[13px] text-white outline-none placeholder:text-white/36"
+              onChange={(event) => setSearchDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") setCommittedSearch(searchDraft.trim());
+              }}
+              placeholder={placeholder}
+              type="text"
+              value={searchDraft}
+            />
+          </div>
           <button
-            className="group flex h-[52px] w-full cursor-pointer items-center gap-2 rounded-[12px] px-2 py-2 text-left text-white/82 transition-colors duration-200 hover:bg-white/8"
-            key={item.kind}
-            onClick={() => onAddModule(item.kind)}
+            aria-label={minimized ? "maximize" : "minimize"}
+            className="ml-auto flex h-10 w-10 items-center justify-center rounded-[10px] text-white/64 hover:bg-white/8 hover:text-white"
+            onClick={() => setMinimized((current) => !current)}
+            title={minimized ? "展开" : "缩小"}
             type="button"
           >
-            <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
-              <Icon className="h-5 w-5" />
-            </span>
-            <span className="h-full min-w-0 flex-1 overflow-hidden">
-              <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
-                <span className="flex items-center gap-1.5 text-[14px] font-medium leading-5">
-                  {item.label}
-                  {item.badge ? (
-                    <span className="rounded-[4px] bg-white/10 px-1.5 py-0.5 text-[10px] leading-3 text-white/50">
-                      {item.badge}
+            {minimized ? <Maximize2 className="h-5 w-5" /> : <Minimize2 className="h-5 w-5" />}
+          </button>
+          <button aria-label="close" className="flex h-10 w-10 items-center justify-center rounded-[10px] text-white/64 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="mt-[25px] flex h-7 shrink-0 items-center px-4">
+          {activeTab === galleryTab ? (
+            <div className="tiny-scrollbar flex h-7 min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-hidden">
+              {categories.map((category) => (
+                <button
+                  className={cn(
+                    "flex h-7 shrink-0 items-center justify-center rounded-[8px] px-3 text-[13px] text-white/68 transition-colors hover:bg-white/10 hover:text-white",
+                    activeCategory === category && "bg-white/10 text-white"
+                  )}
+                  key={category}
+                  onClick={() => setActiveCategory(category)}
+                  style={{
+                    width:
+                      category === "推荐"
+                        ? 50
+                        : category === "Midjourney"
+                          ? 91.3
+                          : category === "建筑及室内设计"
+                            ? 115
+                            : 76,
+                  }}
+                  type="button"
+                >
+                  {category}
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="min-w-0 flex-1" />
+          )}
+          <div className="ml-6 flex h-7 shrink-0 items-center gap-2">
+            {kind === "style" ? (
+              <label className="flex h-4 items-center gap-0 text-[13px] text-white/58">
+                <input checked={commercialOnly} className="h-4 w-4 accent-white" onChange={(event) => setCommercialOnly(event.target.checked)} type="checkbox" />
+                <span className="ml-0">仅看可商用</span>
+              </label>
+            ) : null}
+            {isVideoEffectPicker ? (
+              <button
+                className="flex h-7 cursor-not-allowed items-center justify-center gap-1 rounded-[8px] bg-white/10 px-2 text-[13px] text-[#919191] opacity-70"
+                disabled
+                title="当前节点已使用风格，模型不可切换"
+                type="button"
+              >
+                {modelLabel} ·
+                <ChevronDown className="h-3.5 w-3.5" />
+              </button>
+            ) : (
+              <button className="flex h-7 w-[54px] items-center justify-center rounded-[8px] bg-white/10 text-[13px] text-white" type="button">
+                全部
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="mt-3 min-h-0 flex-1 overflow-y-auto px-4 pb-4">
+          {activeTab === "最近使用" ? (
+            <div className="flex h-full min-h-[320px] items-center justify-center text-[13px] text-white/34">暂无素材</div>
+          ) : activeTab === "我的收藏" ? (
+            <div className="h-full min-h-[320px]" />
+          ) : (
+            <div
+              className="grid gap-x-3 gap-y-3"
+              style={{
+                gridTemplateColumns: `repeat(${minimized ? 4 : 6}, minmax(0, 1fr))`,
+              }}
+            >
+              {visibleCards.map((card) => {
+                const [title, author, count, model] = card;
+                const effectPreset = effectPresets.find((preset) => preset.title === title);
+                const cardThumbnailUrl =
+                  effectPreset?.thumbnailUrl ||
+                  (kind === "effect" ? EFFECT_MARKET_THUMBNAIL_URL : STYLE_MARKET_THUMBNAIL_URL);
+                const selected = kind === "effect" && selectedEffectTitle === title;
+                return (
+                  <div
+                    className="group relative flex w-full cursor-pointer flex-col gap-2 rounded-[12px] p-1 text-left transition-colors hover:bg-white/8"
+                    key={`${title}-${author}`}
+                    onClick={() => {
+                      if (kind === "style") {
+                        onApplyStyle(card);
+                        return;
+                      }
+                      if (onApplyEffect && effectPreset) {
+                        onApplyEffect(effectPreset);
+                        return;
+                      }
+                      onClose();
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "relative w-full overflow-hidden rounded-[10px] bg-[#1f1f1f]",
+                        kind === "effect" ? "aspect-square" : "h-[262px]",
+                        selected && "border border-white",
+                      )}
+                    >
+                      <img
+                        alt={kind === "effect" ? title : ""}
+                        className="h-full w-full object-cover opacity-92"
+                        draggable={false}
+                        onDragStart={preventNativeImageDrag}
+                        src={cardThumbnailUrl}
+                      />
+                      <span className="absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.02),rgba(0,0,0,0.18))]" />
+                      {selected ? <span className="absolute inset-0 bg-black/50" /> : null}
+                      <button
+                        aria-label="更多操作"
+                        className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-lg bg-black/65 text-white/72 transition-opacity hover:bg-black/80"
+                        onClick={(event) => event.stopPropagation()}
+                        type="button"
+                      >
+                        <Ellipsis className="h-3 w-3" />
+                      </button>
+                      <button
+                        aria-label="收藏"
+                        className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-lg bg-black/65 text-white/72 opacity-0 transition-opacity hover:bg-black/80 group-hover:opacity-100"
+                        onClick={(event) => event.stopPropagation()}
+                        type="button"
+                      >
+                        <Star className="h-3 w-3" />
+                      </button>
+                      {selected ? (
+                        <span className="absolute bottom-2 left-2 flex h-6 items-center gap-1 rounded-[8px] bg-white px-2 text-[12px] text-[#262626]">
+                          <Check className="h-3 w-3" />
+                          当前使用
+                        </span>
+                      ) : null}
+                    </div>
+                    <div className="flex w-full flex-col gap-1 px-1">
+                      <div className="flex h-[18px] w-full items-center gap-2">
+                        {kind === "style" && model ? <span className="shrink-0 text-[12px] leading-[18px] text-white/54">{model}</span> : null}
+                        <span className="min-w-0 truncate text-[13px] leading-[18px] text-white/88">{title}</span>
+                        {effectPreset?.commercial !== false ? (
+                          <span className="ml-auto shrink-0 rounded-[4px] bg-white/10 px-1.5 text-[11px] leading-[18px] text-white/68">商用</span>
+                        ) : null}
+                      </div>
+                      <div className="flex h-[18px] items-center justify-between text-[12px] leading-[18px] text-white/42">
+                        <span className="truncate pr-2">{author}</span>
+                        <span>{count}</span>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+              <div
+                className="py-2 text-center text-[12px] text-white/34"
+                style={{ gridColumn: `span ${minimized ? 4 : 6} / span ${minimized ? 4 : 6}` }}
+              >
+                {kind === "effect" ? "已加载全部" : "正在加载更多"}
+              </div>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function HistoryAssetPickerModal({
+  nodes,
+  onClose,
+  onConfirm,
+}: {
+  nodes: CloneNode[];
+  onClose: () => void;
+  onConfirm: (nodes: CloneNode[]) => void;
+}) {
+  const [sourceTab, setSourceTab] = useState("LibTV");
+  const [mediaTab, setMediaTab] = useState<"image" | "video" | "audio">("image");
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const imageNodes = nodes.filter((node) => node.inputType === "image" || /图片|镜头|角色|场景|道具|皇帝|沈昭昭|长安|金銮殿/.test(node.title));
+  const videoNodes = nodes.filter((node) => node.inputType === "video" || /视频/.test(node.title));
+  const audioNodes = nodes.filter((node) => node.inputType === "audio" || /音频/.test(node.title));
+  const historyImageNodes = imageNodes.length >= 8 ? imageNodes : [...imageNodes, ...DEFAULT_IMAGE_HISTORY_NODES.slice(0, 8 - imageNodes.length)];
+  const historyVideoNodes = videoNodes.length > 0 ? videoNodes : DEFAULT_VIDEO_HISTORY_NODES;
+  const historyAudioNodes = audioNodes.length > 0 ? audioNodes : DEFAULT_AUDIO_HISTORY_NODES;
+  const activeNodes =
+    sourceTab === "LibTV"
+      ? mediaTab === "image"
+        ? historyImageNodes
+        : mediaTab === "video"
+          ? historyVideoNodes
+          : historyAudioNodes
+      : [];
+  const visibleNodes = activeNodes.slice(0, 10);
+  const selectedNodes = visibleNodes.filter((node) => selectedIds.includes(node.id));
+  const unit = "张";
+  const title = mediaTab === "image" ? "选择图片" : mediaTab === "video" ? "选择视频" : "选择音频";
+
+  useEffect(() => {
+    setSelectedIds([]);
+  }, [mediaTab, sourceTab]);
+
+  const toggleSelected = (id: string) => {
+    setSelectedIds((current) => {
+      if (current.includes(id)) return current.filter((item) => item !== id);
+      if (current.length >= 10) return current;
+      return [...current, id];
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 z-[601] flex items-center justify-center bg-black/45 text-white" data-canvas-overlay="true">
+      <section className="flex h-[calc(100vh-160px)] min-h-[360px] w-[min(90vw,1600px)] max-w-[min(90vw,1600px)] flex-col overflow-hidden rounded-[10px] bg-[#1f1f1f] shadow-[0_28px_90px_rgba(0,0,0,0.54)]">
+        <div className="flex h-14 shrink-0 items-center justify-between border-b border-white/8 px-6">
+          <h3 className="text-base font-medium text-[#f2f2f2]">{title}</h3>
+          <button className="flex h-8 w-8 items-center justify-center rounded-lg text-white/70 transition hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="flex h-12 shrink-0 items-start gap-3 px-6 pt-4">
+          <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
+            {["LibTV", "Lib生成器", "WebUI", "ComfyUI", "AI应用"].map((label) => (
+              <button
+                className={cn(
+                  "flex h-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none px-3 py-1 text-[13px] transition-colors",
+                  sourceTab === label ? "bg-white/12 font-medium text-[#f2f2f2]" : "bg-transparent text-[#787878] hover:bg-white/8"
+                )}
+                key={label}
+                onClick={() => setSourceTab(label)}
+                type="button"
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className="shrink-0 text-[13px] text-neutral-500">
+            已选 <span className="text-[#478eff]">{selectedIds.length}/10</span> {unit}
+          </div>
+        </div>
+        <div className="flex h-10 shrink-0 items-start gap-2 px-6 pt-3">
+          {([
+            ["image", "图片"],
+            ["video", "视频"],
+            ["audio", "音频"],
+          ] as const).map(([key, label]) => (
+            <button
+              className={cn(
+                "flex h-7 cursor-pointer items-center justify-center rounded-md border-none px-2.5 text-[12px] transition-colors",
+                mediaTab === key ? "bg-white/12 font-medium text-[#f2f2f2]" : "bg-transparent text-[#787878] hover:bg-white/8"
+              )}
+              key={key}
+              onClick={() => setMediaTab(key)}
+              type="button"
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <div className="min-h-0 flex-1 px-6 pb-4 pt-4">
+          {visibleNodes.length > 0 ? (
+            <div className="grid grid-cols-6 gap-2">
+              {visibleNodes.map((node) => {
+                const mediaUrl = getNodeMediaUrl(node) || getNodeReferenceMediaUrl(node);
+                const selected = selectedIds.includes(node.id);
+                return (
+                  <button
+                    className={cn(
+                      "group relative h-[276px] overflow-hidden rounded-[8px] border bg-[#262626] text-left transition",
+                      selected ? "border-[#4eb7d8]" : "border-white/10 hover:border-white/24"
+                    )}
+                    key={node.id}
+                    onClick={() => toggleSelected(node.id)}
+                    type="button"
+                  >
+                    {mediaUrl && mediaTab === "image" ? (
+                      <img alt="" className="h-full w-full object-cover" draggable={false} src={mediaUrl} />
+                    ) : mediaUrl && mediaTab === "video" ? (
+                      <video className="h-full w-full object-cover" muted playsInline src={mediaUrl} />
+                    ) : mediaTab === "audio" ? (
+                      <div className="flex h-full w-full items-center justify-center bg-[#363636] text-white/45">
+                        <Music2 className="h-6 w-6" />
+                      </div>
+                    ) : (
+                      <div className="flex h-full w-full items-center justify-center text-white/42">
+                        <ImageIcon className="h-10 w-10" />
+                      </div>
+                    )}
+                    {selected ? (
+                      <span className="absolute left-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-[#37c6e8] text-white shadow-[0_2px_8px_rgba(0,0,0,0.35)]">
+                        <Check className="h-3.5 w-3.5" strokeWidth={2.6} />
+                      </span>
+                    ) : null}
+                    <span
+                      className={cn(
+                        "absolute inset-0 rounded-[8px] bg-black/0 transition group-hover:bg-black/18",
+                        selected && "bg-black/10"
+                      )}
+                    />
+                    <span className="absolute bottom-2 right-2 flex gap-2 opacity-0 transition group-hover:opacity-100">
+                      <span className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/86">
+                        <Trash2 className="h-4 w-4" />
+                      </span>
+                      <span className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/86">
+                        <Search className="h-4 w-4" />
+                      </span>
                     </span>
+                  </button>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="flex h-full items-center justify-center text-[13px] text-white/36">暂无素材</div>
+          )}
+        </div>
+        <div className="flex h-16 shrink-0 items-center justify-between px-6">
+          <div className="flex items-center gap-4 text-[13px] text-white/42">
+            <button className="flex h-8 w-8 items-center justify-center rounded-lg text-white/36 transition hover:bg-white/8 hover:text-white" type="button">
+              <ChevronRight className="h-4 w-4 rotate-180" />
+            </button>
+            <span className="flex h-8 min-w-8 items-center justify-center rounded-lg bg-white/10 px-3 text-white/82">1</span>
+            <button className="flex h-8 w-8 items-center justify-center rounded-lg text-white/36 transition hover:bg-white/8 hover:text-white" type="button">
+              <ChevronRight className="h-4 w-4" />
+            </button>
+            <span className="flex h-8 items-center rounded-lg bg-white/10 px-3 text-white/58">15条/页</span>
+            <span>跳至</span>
+            <span className="h-8 w-10 rounded-lg bg-white/10" />
+            <span>页</span>
+          </div>
+          <button
+            className={cn(
+              "flex h-8 w-[50px] items-center justify-center rounded-lg text-[13px] font-medium transition",
+              selectedNodes.length > 0 ? "bg-white text-black hover:bg-white/90" : "bg-white/12 text-white/36"
+            )}
+            disabled={selectedNodes.length === 0}
+            onClick={() => onConfirm(selectedNodes)}
+            type="button"
+          >
+            确定
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function HistoryAssetsPanel({
+  listDownloadPendingId,
+  nodes,
+  onClose,
+  onOpenWatermarkRules,
+  onSelectNode,
+  onUseNode,
+}: {
+  listDownloadPendingId: string | null;
+  nodes: CloneNode[];
+  onClose: () => void;
+  onOpenWatermarkRules: (node: CloneNode) => void;
+  onSelectNode: (id: string) => void;
+  onUseNode: (node: CloneNode) => void;
+}) {
+  const [tab, setTab] = useState<"image" | "video" | "audio">("image");
+  const [batchMode, setBatchMode] = useState(false);
+  const [batchDeleteConfirmOpen, setBatchDeleteConfirmOpen] = useState(false);
+  const [batchDownloadPending, setBatchDownloadPending] = useState(false);
+  const [deletedHistoryIds, setDeletedHistoryIds] = useState<string[]>([]);
+  const [previewDownloadPending, setPreviewDownloadPending] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState<number | null>(null);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc");
+  const [zoomIndex, setZoomIndex] = useState(1);
+  const imageNodes = nodes.filter((node) => node.inputType === "image" || /图片|镜头|角色|场景|道具|皇帝|沈昭昭|长安|金銮殿/.test(node.title));
+  const videoNodes = nodes.filter((node) => node.inputType === "video" || /视频/.test(node.title));
+  const audioNodes = nodes.filter((node) => node.inputType === "audio" || /音频/.test(node.title));
+  const deletedHistoryIdSet = new Set(deletedHistoryIds);
+  const historyImageNodesBase = imageNodes.length >= 8 ? imageNodes : [...imageNodes, ...DEFAULT_IMAGE_HISTORY_NODES.slice(0, 8 - imageNodes.length)];
+  const historyVideoNodesBase = videoNodes.length > 0 ? videoNodes : DEFAULT_VIDEO_HISTORY_NODES;
+  const historyImageNodes = historyImageNodesBase.filter((node) => !deletedHistoryIdSet.has(node.id));
+  const historyVideoNodes = historyVideoNodesBase.filter((node) => !deletedHistoryIdSet.has(node.id));
+  const historyAudioNodes = audioNodes.filter((node) => !deletedHistoryIdSet.has(node.id));
+  const activeNodes = tab === "image" ? historyImageNodes : tab === "video" ? historyVideoNodes : historyAudioNodes;
+  const sortedNodes = sortOrder === "desc" ? activeNodes : [...activeNodes].reverse();
+  const visibleNodes = sortedNodes.slice(0, 8);
+  const zoomLevel = HISTORY_ASSET_ZOOM_LEVELS[zoomIndex];
+  const activeNodeIdKey = activeNodes.map((node) => node.id).join("|");
+  const selectedNodes = visibleNodes.filter((node) => selectedIds.includes(node.id));
+  const groupSelected = visibleNodes.length > 0 && visibleNodes.every((node) => selectedIds.includes(node.id));
+
+  useEffect(() => {
+    const validIds = new Set(activeNodeIdKey ? activeNodeIdKey.split("|") : []);
+    setSelectedIds((current) => current.filter((id) => validIds.has(id)));
+  }, [activeNodeIdKey]);
+
+  useEffect(() => {
+    if (!batchDownloadPending) return;
+    const timer = window.setTimeout(() => {
+      setBatchDownloadPending(false);
+    }, 15000);
+    return () => window.clearTimeout(timer);
+  }, [batchDownloadPending]);
+
+  useEffect(() => {
+    if (!previewDownloadPending) return;
+    const timer = window.setTimeout(() => {
+      setPreviewDownloadPending(false);
+    }, 15000);
+    return () => window.clearTimeout(timer);
+  }, [previewDownloadPending]);
+
+  useEffect(() => {
+    setPreviewDownloadPending(false);
+  }, [previewIndex]);
+
+  useEffect(() => {
+    if (previewIndex === null) return;
+    if (previewIndex >= visibleNodes.length) {
+      setPreviewIndex(visibleNodes.length > 0 ? visibleNodes.length - 1 : null);
+    }
+  }, [previewIndex, visibleNodes.length]);
+
+  useEffect(() => {
+    if (previewIndex === null) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        setPreviewIndex(null);
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        setPreviewIndex((current) => (current === null ? current : Math.min(visibleNodes.length - 1, current + 1)));
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        setPreviewIndex((current) => (current === null ? current : Math.max(0, current - 1)));
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [previewIndex, visibleNodes.length]);
+
+  const switchTab = (nextTab: "image" | "video" | "audio") => {
+    if (batchDownloadPending) return;
+    setTab(nextTab);
+    setBatchDeleteConfirmOpen(false);
+    setPreviewDownloadPending(false);
+    setPreviewIndex(null);
+    setSelectedIds([]);
+  };
+
+  const toggleBatchMode = () => {
+    if (batchDownloadPending) return;
+    setBatchDeleteConfirmOpen(false);
+    setPreviewDownloadPending(false);
+    setPreviewIndex(null);
+    setBatchMode((current) => !current);
+    setSelectedIds([]);
+  };
+
+  const toggleNodeSelection = (id: string) => {
+    if (batchDownloadPending) return;
+    setSelectedIds((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id]));
+  };
+
+  const toggleGroupSelection = () => {
+    if (batchDownloadPending) return;
+    setSelectedIds(groupSelected ? [] : visibleNodes.map((node) => node.id));
+  };
+
+  const runBatchUse = () => {
+    if (batchDownloadPending) return;
+    if (selectedNodes.length === 0) return;
+    selectedNodes.forEach((node) => onUseNode(node));
+    setSelectedIds([]);
+    setBatchMode(false);
+  };
+
+  const runBatchDownload = () => {
+    if (batchDownloadPending) return;
+    if (selectedNodes.length === 0) return;
+    setBatchDownloadPending(true);
+  };
+
+  const runBatchDelete = () => {
+    if (batchDownloadPending) return;
+    if (selectedNodes.length === 0) return;
+    setBatchDeleteConfirmOpen(true);
+  };
+
+  const confirmBatchDelete = () => {
+    if (selectedNodes.length === 0) {
+      setBatchDeleteConfirmOpen(false);
+      return;
+    }
+    setDeletedHistoryIds((current) => Array.from(new Set([...current, ...selectedNodes.map((node) => node.id)])));
+    setSelectedIds([]);
+    setBatchDeleteConfirmOpen(false);
+    toast.success("删除成功");
+  };
+
+  const previewNode = previewIndex === null ? null : visibleNodes[previewIndex] || null;
+  const previewDisplayIndex = previewIndex ?? 0;
+  const previewMediaUrl = previewNode ? getNodeMediaUrl(previewNode) || getNodeReferenceMediaUrl(previewNode) : "";
+  const previewMediaType = previewNode?.inputType || "image";
+
+  return (
+    <>
+      <div className="pointer-events-none fixed inset-0 z-[601] flex items-center justify-center text-white" data-canvas-overlay="true">
+        <section className="pointer-events-auto flex h-[calc(100vh-160px)] min-h-[360px] w-[min(90vw,1600px)] max-w-[min(90vw,1600px)] flex-col overflow-hidden rounded-2xl bg-[#262626] shadow-[0_28px_90px_rgba(0,0,0,0.54)]">
+          <div className="flex h-16 shrink-0 items-center justify-between px-4">
+            <h3 className="text-base font-medium text-white/86">历史资产</h3>
+            <div className="flex items-center gap-4">
+              <div className="flex h-[29px] items-center gap-1 rounded-lg bg-[#171717]">
+                <button
+                  className="flex h-7 w-7 items-center justify-center rounded-lg text-[16px] leading-none text-white/62 transition hover:bg-white/8 hover:text-white"
+                  onClick={() => setZoomIndex((current) => Math.max(0, current - 1))}
+                  type="button"
+                >
+                  -
+                </button>
+                <span className="w-10 text-center text-[13px] text-white">{zoomLevel.label}</span>
+                <button
+                  className="flex h-7 w-7 items-center justify-center rounded-lg text-white/62 transition hover:bg-white/8 hover:text-white"
+                  onClick={() => setZoomIndex((current) => Math.min(HISTORY_ASSET_ZOOM_LEVELS.length - 1, current + 1))}
+                  type="button"
+                >
+                  <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+                </button>
+              </div>
+              <button className="flex h-7 w-7 items-center justify-center rounded-lg text-white/54 transition hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+          <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 px-4 pb-4 pt-[15px]">
+            <div className="flex items-center gap-6">
+              <button
+                className={cn(
+                  "flex h-8 shrink-0 items-center justify-center rounded-lg bg-transparent px-0 text-[13px] transition hover:text-white",
+                  tab === "image" ? "text-white/86" : "text-white/58"
+                )}
+                onClick={() => switchTab("image")}
+                type="button"
+              >
+                图片历史({historyImageNodes.length})
+              </button>
+              <button
+                className={cn(
+                  "flex h-8 shrink-0 items-center justify-center rounded-lg bg-transparent px-0 text-[13px] transition hover:text-white",
+                  tab === "video" ? "text-white/86" : "text-white/58"
+                )}
+                onClick={() => switchTab("video")}
+                type="button"
+              >
+                视频历史({historyVideoNodes.length})
+              </button>
+              <button
+                className={cn(
+                  "flex h-8 shrink-0 items-center justify-center rounded-lg bg-transparent px-0 text-[13px] transition hover:text-white",
+                  tab === "audio" ? "text-white/86" : "text-white/58"
+                )}
+                onClick={() => switchTab("audio")}
+                type="button"
+              >
+                音频历史({audioNodes.length})
+              </button>
+            </div>
+            {batchMode ? (
+              <div className="flex items-center justify-end gap-2">
+                <span className="block h-5 w-[67px] whitespace-nowrap text-[13px] text-white/58">已选择 {selectedIds.length} 项</span>
+                <HistoryBatchActionButton disabled={batchDownloadPending || selectedIds.length === 0} label="删除" onClick={runBatchDelete} />
+                <HistoryBatchActionButton disabled={batchDownloadPending || selectedIds.length === 0} label="下载" onClick={runBatchDownload} />
+                <HistoryBatchActionButton disabled={batchDownloadPending || selectedIds.length === 0} label="使用" onClick={runBatchUse} />
+                <button
+                  className="ml-[17px] flex h-7 w-[68px] items-center justify-center rounded-lg bg-transparent text-[13px] text-white/58 transition hover:bg-white/8 hover:text-white disabled:pointer-events-none disabled:opacity-40"
+                  disabled={batchDownloadPending}
+                  onClick={toggleBatchMode}
+                  type="button"
+                >
+                  取消选择
+                </button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-[17px]">
+                <button
+                  className="flex h-8 w-[86px] items-center justify-center rounded-lg bg-transparent text-[13px] text-white/62 transition hover:bg-white/8 hover:text-white"
+                  onClick={() => setSortOrder((current) => (current === "desc" ? "asc" : "desc"))}
+                  type="button"
+                >
+                  {sortOrder === "desc" ? "时间降序" : "时间升序"}
+                </button>
+                <button
+                  className="flex h-8 w-[86px] items-center justify-center rounded-lg bg-transparent text-[13px] text-white/62 transition hover:bg-white/8 hover:text-white"
+                  onClick={toggleBatchMode}
+                  type="button"
+                >
+                  批量操作
+                </button>
+              </div>
+            )}
+          </div>
+          <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-4">
+            {activeNodes.length === 0 ? (
+              <div className="flex h-full items-center justify-center text-[13px] text-white/36">暂无历史记录</div>
+            ) : (
+              <>
+                <div className="mb-3 flex h-5 items-center gap-2">
+                  {batchMode ? (
+                    <HistorySelectionCheckbox checked={groupSelected} onClick={toggleGroupSelection} />
                   ) : null}
-                </span>
-                <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
-                  {item.description}
-                </span>
-              </span>
-            </span>
+                  <h4 className="text-sm font-medium text-white/62">2026-07-09</h4>
+                </div>
+                <div className="grid gap-x-3 gap-y-4" style={{ gridTemplateColumns: `repeat(auto-fill, ${zoomLevel.cardSize}px)` }}>
+                  {visibleNodes.map((node, index) => {
+                    const mediaUrl = getNodeMediaUrl(node) || getNodeReferenceMediaUrl(node);
+                    const selected = selectedIds.includes(node.id);
+                    return (
+                      <div
+                        className="group relative cursor-pointer"
+                        key={node.id}
+                        onClick={() => (batchMode ? toggleNodeSelection(node.id) : onSelectNode(node.id))}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            if (batchMode) toggleNodeSelection(node.id);
+                            else onSelectNode(node.id);
+                          }
+                        }}
+                        role="button"
+                        style={{ height: zoomLevel.cardSize, width: zoomLevel.cardSize }}
+                        tabIndex={0}
+                      >
+                        <div
+                          className={cn(
+                            "relative box-border h-full w-full overflow-hidden rounded-lg border bg-[#363636]",
+                            selected ? "border-white/44 ring-2 ring-white/24" : "border-white/8"
+                          )}
+                        >
+                          {mediaUrl && node.inputType === "image" ? (
+                            <img alt="" className="absolute inset-0 h-full w-full rounded-lg object-cover transition-transform duration-200 group-hover:scale-105" src={mediaUrl} />
+                          ) : mediaUrl && node.inputType === "video" ? (
+                            <video className="absolute inset-0 h-full w-full rounded-lg object-cover transition-transform duration-200 group-hover:scale-105" muted playsInline src={mediaUrl} />
+                          ) : node.inputType === "audio" ? (
+                            <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-[#363636] text-white/50">
+                              <Music2 className="h-8 w-8" />
+                              <span className="max-w-[112px] truncate text-[12px] text-white/54">{node.title}</span>
+                            </div>
+                          ) : (
+                            <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-[#363636] text-white/44">
+                              <ImageIcon className="h-8 w-8" />
+                            </div>
+                          )}
+                          {batchMode ? (
+                            <span className="absolute left-[5px] top-[5px] z-10">
+                              <HistorySelectionCheckbox checked={selected} onClick={() => toggleNodeSelection(node.id)} />
+                            </span>
+                          ) : (
+                            <div className="absolute inset-0 flex items-center justify-center gap-1 rounded-lg bg-black/65 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+                              <button
+                                className="flex h-7 cursor-pointer items-center justify-center rounded-lg border-none px-1.5 text-[13px] text-white/90 transition hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
+                                onClick={(event) => {
+                                  event.stopPropagation();
+                                  setPreviewIndex(index);
+                                }}
+                                type="button"
+                              >
+                                查看
+                              </button>
+                              <button
+                                className="flex h-7 cursor-pointer items-center justify-center rounded-lg border-none px-1.5 text-[13px] text-white/90 transition hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
+                                onClick={(event) => {
+                                  event.stopPropagation();
+                                  onUseNode(node);
+                                }}
+                                type="button"
+                              >
+                                使用
+                              </button>
+                              <button
+                                className="flex h-7 cursor-pointer items-center justify-center rounded-lg border-none px-1.5 text-[13px] text-white/90 transition hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
+                                disabled={listDownloadPendingId === node.id}
+                                onClick={(event) => {
+                                  event.stopPropagation();
+                                  onOpenWatermarkRules(node);
+                                }}
+                                type="button"
+                              >
+                                下载
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </>
+            )}
+          </div>
+        </section>
+      </div>
+      {previewNode ? (
+        <div
+          className="fixed inset-0 z-[700] flex items-center justify-center bg-black/80 text-white"
+          data-canvas-overlay="true"
+          onPointerDown={(event) => {
+            if (event.target === event.currentTarget) setPreviewIndex(null);
+          }}
+        >
+          <div className="relative flex max-h-[90vh] max-w-[85vw] flex-col items-center gap-4">
+            <div className="flex h-[min(644px,calc(90vh-92px))] w-[min(1285px,85vw)] items-center justify-center">
+              {previewMediaType === "video" && previewMediaUrl ? (
+                <video className="block max-h-full max-w-full select-none object-contain" controls playsInline src={previewMediaUrl} />
+              ) : previewMediaType === "audio" ? (
+                <div className="flex h-[220px] w-[520px] max-w-[85vw] flex-col items-center justify-center rounded-[16px] border border-white/12 bg-white/8 px-8">
+                  <Music2 className="mb-5 h-10 w-10 text-white/66" />
+                  <div className="mb-5 max-w-full truncate text-[15px] text-white/78">{previewNode.title}</div>
+                  {previewMediaUrl ? <audio className="w-full" controls src={previewMediaUrl} /> : <div className="text-[13px] text-white/42">暂无音频预览</div>}
+                </div>
+              ) : previewMediaUrl ? (
+                <img alt="" className="block max-h-full max-w-full select-none object-contain" draggable={false} src={previewMediaUrl} />
+              ) : (
+                <div className="flex h-[320px] w-[420px] items-center justify-center rounded-[16px] border border-white/12 bg-white/8 text-[14px] text-white/54">
+                  暂无预览
+                </div>
+              )}
+            </div>
+	            {previewDisplayIndex > 0 ? (
+	              <button
+	                aria-label="上一张"
+	                className="fixed left-4 top-1/2 z-[720] flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white/70 transition hover:bg-black/70 hover:text-white"
+	                onClick={() => setPreviewIndex((current) => (current === null ? current : Math.max(0, current - 1)))}
+	                type="button"
+	              >
+                <ChevronRight className="h-5 w-5 rotate-180" />
+              </button>
+            ) : null}
+	            {previewDisplayIndex < visibleNodes.length - 1 ? (
+	              <button
+	                aria-label="下一张"
+	                className="fixed right-4 top-1/2 z-[720] flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white/70 transition hover:bg-black/70 hover:text-white"
+	                onClick={() => setPreviewIndex((current) => (current === null ? current : Math.min(visibleNodes.length - 1, current + 1)))}
+	                type="button"
+	              >
+                <ChevronRight className="h-5 w-5" />
+              </button>
+            ) : null}
+            <button
+              aria-label="关闭预览"
+              className="absolute -right-3 -top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white/70 transition hover:bg-black/80 hover:text-white"
+              onClick={() => setPreviewIndex(null)}
+              type="button"
+            >
+              <X className="h-4 w-4" />
+            </button>
+            <div className="flex items-center gap-4">
+              <span className="text-[14px] text-white/50">{previewDisplayIndex + 1} / {visibleNodes.length}</span>
+              <button
+                className={cn(
+                  "flex h-9 items-center gap-2 rounded-lg bg-white/15 text-[14px] text-white/80 transition hover:bg-white/20 hover:text-white disabled:cursor-not-allowed disabled:opacity-50",
+                  previewDownloadPending ? "w-[118px] justify-center px-0" : "px-5"
+                )}
+                disabled={previewDownloadPending}
+                onClick={() => setPreviewDownloadPending(true)}
+                type="button"
+              >
+                {previewDownloadPending ? null : <Download className="h-4 w-4" />}
+                {previewDownloadPending ? "下载中..." : "下载"}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+      {batchDeleteConfirmOpen ? (
+        <div className="fixed inset-0 z-[802] flex items-center justify-center" data-canvas-overlay="true">
+          <section className="w-[min(344px,calc(100vw-32px))] rounded-xl border border-white/10 bg-[#262626] p-4 text-white shadow-[0_18px_48px_rgba(0,0,0,0.48)]">
+            <div className="flex flex-col gap-3">
+              <div className="flex items-start gap-2">
+                <p className="text-sm font-bold text-white">批量删除</p>
+              </div>
+              <div className="text-[13px] text-white/58">确认批量删除 {selectedIds.length} 项</div>
+            </div>
+            <div className="mt-4 flex items-center justify-end gap-3">
+              <button
+                className="h-8 rounded-lg bg-white/10 px-3 text-[13px] text-white transition-colors hover:bg-white/15"
+                onClick={() => setBatchDeleteConfirmOpen(false)}
+                type="button"
+              >
+                取消
+              </button>
+              <button
+                className="h-8 rounded-lg bg-[#f7f7f7] px-3 text-[13px] text-[#141414] transition-colors hover:bg-white"
+                onClick={confirmBatchDelete}
+                type="button"
+              >
+                删除
+              </button>
+            </div>
+          </section>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function WatermarkRulesModal({ onSave }: { onSave: () => void }) {
+  return (
+    <div className="fixed inset-0 z-[801] flex items-center justify-center bg-black/25 px-6 text-white" data-canvas-overlay="true">
+      <div className="flex h-[404px] w-[740px] max-w-[calc(100vw-48px)] flex-col rounded-[18px] border border-white/10 bg-[#202020] p-6 shadow-[0_28px_100px_rgba(0,0,0,0.58)]">
+        <h3 className="text-[18px] font-semibold leading-5 text-white">AI 生成内容水印管理规则</h3>
+        <div className="mt-4 flex-1 text-white/68">
+          <div className="h-[160px] overflow-y-auto text-[12px] leading-5">
+            <p>欢迎您使用LiblibAI的产品和服务！</p>
+            <p className="indent-8">
+            您申请我们向您提供没有添加显式标识（以下或称&quot;水印&quot;）的AI生成合成内容之前，亦即您使用&quot;去水印&quot;功能之前，请您务必认真阅读并充分理解本规则。您知悉、同意并遵守以下内容的，方可使用本功能。
+            </p>
+            <p className="indent-8">
+            经您提出申请，LiblibAI平台可向您提供未添加前述显式标识的AI生成合成内容。请注意：您在使用网络信息内容传播服务发布该等AI生成合成内容时，需主动作出声明，并通过传播LiblibAI平台提供的标识功能完成标识操作。您确认已知晓并承诺：若您未依据法律法规要求在AI生成合成内容中添加显式标识，进而引发公众混淆或误认，由此产生的全部后果及法律责任均由您自行承担。更详细的说明见LiblibAI水印规范。
+            </p>
+          </div>
+          <div className="mt-6 flex items-center gap-3">
+            <label className="relative inline-flex h-5 w-[38px] shrink-0 cursor-pointer items-center rounded-full bg-white/25" htmlFor="watermark-rules-remove-watermark">
+              <input
+                aria-checked={false}
+                checked={false}
+                className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                id="watermark-rules-remove-watermark"
+                onChange={() => undefined}
+                role="switch"
+                type="checkbox"
+              />
+              <span className="absolute left-[3px] top-[3px] h-3.5 w-3.5 rounded-full bg-[#171717]" />
+            </label>
+            <div className="text-[14px] font-medium text-white">去 AI 水印</div>
+          </div>
+          <div className="mt-2 text-[12px] leading-4 text-white/42">
+            开启本功能开关并点击 &quot;保存设置&quot; 按钮，即视为您已充分知悉并同意本规则全部内容。后续您可通过 &quot;头像 - AI水印设置&quot; 路径调整本功能配置。
+          </div>
+        </div>
+        <div className="mt-8 flex justify-end">
+          <button
+            className="h-11 w-[130px] rounded-[10px] bg-[#5DDCFF] text-[14px] font-medium text-black transition hover:bg-[#09CAF5]"
+            onClick={onSave}
+            type="button"
+          >
+            保存设置
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function HistoryBatchActionButton({
+  disabled,
+  label,
+  onClick,
+}: {
+  disabled: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  const widthClass = label === "使用" ? "w-[50px]" : "w-[69px]";
+  return (
+    <button
+      className={cn(
+        "flex h-7 items-center justify-center rounded-lg bg-transparent text-[13px] text-white/62 transition hover:bg-white/8 hover:text-white disabled:pointer-events-none disabled:opacity-40",
+        widthClass
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      type="button"
+    >
+      {label}
+    </button>
+  );
+}
+
+function HistorySelectionCheckbox({
+  checked,
+  onClick,
+}: {
+  checked: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      aria-checked={checked}
+      className={cn(
+        "flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors",
+        checked ? "border-white bg-white text-black" : "border-white/30 bg-transparent text-transparent hover:border-white/58"
+      )}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      role="checkbox"
+      type="button"
+    >
+      <Check className="h-3 w-3" strokeWidth={2.4} />
+    </button>
+  );
+}
+
+const ASSET_MANAGER_FILTERS = ["全部", "文本", "图片", "视频", "视频合成", "导演台", "音频", "脚本", "脚本（旧版）"];
+const VIDEO_CANVAS_TUTORIAL_URL = "https://resonate.feishu.cn/wiki/Loxfw6XHziYRk0kKzdjcFfp9nhb";
+
+function CanvasAssetManagerPanel({
+  nodes,
+  onClose,
+  onDuplicateNode,
+  onRenameNode,
+  onResizeStart,
+  onSelectNode,
+  panelWidth,
+}: {
+  nodes: CloneNode[];
+  onClose: () => void;
+  onDuplicateNode: (id: string) => void;
+  onRenameNode: (id: string, title: string) => boolean;
+  onResizeStart: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onSelectNode: (id: string) => void;
+  panelWidth: number;
+}) {
+  const assetFilterRef = useRef<HTMLDivElement | null>(null);
+  const canvasFilterRef = useRef<HTMLDivElement | null>(null);
+  const moreMenuRef = useRef<HTMLDivElement | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const [activeTab, setActiveTab] = useState<"canvas" | "assets">("canvas");
+  const [assetFilterOpen, setAssetFilterOpen] = useState(false);
+  const [assetSearchQuery, setAssetSearchQuery] = useState("");
+  const [collapsed, setCollapsed] = useState(false);
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
+  const [menuNodeId, setMenuNodeId] = useState<string | null>(null);
+  const [renameDraft, setRenameDraft] = useState("");
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showFilters, setShowFilters] = useState(false);
+  const [filter, setFilter] = useState("全部");
+  const nodeRowWidth = Math.max(0, panelWidth - 24);
+  const nodeActionMoreLeft = Math.max(0, panelWidth - 74);
+  const nodeActionLocateLeft = Math.max(0, panelWidth - 48);
+  const visibleNodes = nodes.filter((node) => {
+    if (filter === "全部") return true;
+    const kind = getTargetModuleKind(node);
+    if (filter === "文本") return kind === "text" || node.inputType === "text";
+    if (filter === "图片") return kind === "image" || node.inputType === "image" || /图片|镜头|角色|场景/.test(node.title);
+    if (filter === "视频") return kind === "video" || node.inputType === "video" || /视频/.test(node.title);
+    if (filter === "视频合成") return kind === "video-clip";
+    if (filter === "导演台") return kind === "director";
+    if (filter === "音频") return kind === "audio" || node.inputType === "audio";
+    if (filter === "脚本") return kind === "script" || /脚本|剧本/.test(node.title);
+    return false;
+  }).filter((node) => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return true;
+    const kind = getTargetModuleKind(node) || node.inputType || node.kind;
+    return `${node.title} ${node.subtitle || ""} ${kind}`.toLowerCase().includes(query);
+  });
+
+  useEffect(() => {
+    if (searchOpen) searchInputRef.current?.focus();
+  }, [searchOpen]);
+
+  useEffect(() => {
+    if (!assetFilterOpen && !menuNodeId && !showFilters) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      if (!target) return;
+      if (canvasFilterRef.current?.contains(target)) return;
+      if (assetFilterRef.current?.contains(target)) return;
+      if (moreMenuRef.current?.contains(target)) return;
+      setAssetFilterOpen(false);
+      setMenuNodeId(null);
+      setShowFilters(false);
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [assetFilterOpen, menuNodeId, showFilters]);
+
+  const startRename = (node: CloneNode) => {
+    setEditingNodeId(node.id);
+    setRenameDraft(node.title);
+    setMenuNodeId(null);
+  };
+
+  const commitRename = () => {
+    if (!editingNodeId) return;
+    const success = onRenameNode(editingNodeId, renameDraft);
+    if (success) {
+      setEditingNodeId(null);
+      setRenameDraft("");
+    }
+  };
+
+  return (
+    <section
+      className="fixed left-0 top-0 z-[30] flex h-dvh flex-col overflow-hidden border-r border-[#363636] bg-[#171717] text-white shadow-none"
+      data-canvas-overlay="true"
+      style={{ width: panelWidth }}
+    >
+      <div className="relative h-[92px] shrink-0">
+        <div className="absolute left-2 top-[52px] flex h-7 min-w-0 items-center gap-[9px] px-1">
+          <input
+            aria-label="工作区名称"
+            className="h-5 w-[78px] truncate bg-transparent text-[13px] text-white/82 outline-none"
+            readOnly
+            value="未命名工作区"
+          />
+          <button className="flex h-7 w-[68px] items-center justify-center rounded-lg text-[13px] text-white hover:bg-white/10" type="button">
+            画布 1
+          </button>
+        </div>
+      </div>
+
+      <div className="flex h-[50px] shrink-0 items-center justify-between border-y border-[#363636] px-2">
+        <div className="flex items-center gap-2">
+          <button
+            className={cn(
+              "h-[30px] rounded-lg px-2 text-[14px] transition-colors",
+              activeTab === "canvas" ? "bg-white/15 text-white" : "bg-transparent text-white/90 hover:bg-white/10"
+            )}
+            onClick={() => {
+              setActiveTab("canvas");
+              setAssetFilterOpen(false);
+              setMenuNodeId(null);
+            }}
+            type="button"
+          >
+            画布
+          </button>
+          <button
+            className={cn(
+              "h-[30px] rounded-lg px-2 text-[14px] transition-colors",
+              activeTab === "assets" ? "bg-white/15 text-white" : "bg-transparent text-white/90 hover:bg-white/10"
+            )}
+            onClick={() => {
+              setActiveTab("assets");
+              setMenuNodeId(null);
+              setShowFilters(false);
+            }}
+            type="button"
+          >
+            资产
+          </button>
+        </div>
+        <button aria-label="资产管理" className="flex h-8 w-8 items-center justify-center rounded-lg text-white/80 hover:bg-white/10" onClick={onClose} type="button">
+          <AssetGlyph />
+        </button>
+      </div>
+
+      {activeTab === "canvas" ? (
+        <>
+          <div className="flex h-[52px] shrink-0 flex-col gap-2 px-2 py-3">
+            <div className="flex min-h-7 w-full min-w-0 items-center justify-between gap-1 pl-2 pr-0">
+              {searchOpen ? (
+                <div className="flex min-w-0 flex-1 items-center gap-px">
+                  <Search className="h-3 w-3 shrink-0 text-white/50" />
+                  <input
+                    aria-label="搜索画布元素"
+                    className="h-5 w-[101px] bg-transparent text-[13px] text-white outline-none placeholder:text-white/40"
+                    onChange={(event) => setSearchQuery(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Escape") {
+                        setSearchOpen(false);
+                        setSearchQuery("");
+                      }
+                    }}
+                    placeholder="搜索节点"
+                    ref={searchInputRef}
+                    value={searchQuery}
+                  />
+                </div>
+              ) : (
+                <div className="flex min-w-0 items-center gap-0.5">
+                  <span className="text-[13px] font-medium leading-normal text-[#919191]">画布元素</span>
+                  <button
+                    aria-label={collapsed ? "展开全部分组" : "收起全部分组"}
+                    className="flex h-7 w-7 items-center justify-center rounded-lg text-white/85 hover:bg-white/10"
+                    onClick={() => setCollapsed((value) => !value)}
+                    type="button"
+                  >
+                    <ChevronDown className={cn("h-4 w-4 transition-transform", collapsed && "-rotate-90")} />
+                  </button>
+                </div>
+              )}
+
+              <div className="flex shrink-0 items-center gap-0.5">
+                <div className="relative" ref={canvasFilterRef}>
+                  <button
+                    aria-label={`筛选类型：${filter}`}
+                    className={cn(
+                      "flex h-7 items-center justify-center rounded-lg text-[13px] text-white hover:bg-white/10",
+                      searchOpen ? "w-7" : "w-[54px]",
+                      showFilters && "bg-white/10"
+                    )}
+                    onClick={() => setShowFilters((value) => !value)}
+                    type="button"
+                  >
+                    {searchOpen ? <Settings2 className="h-4 w-4" /> : filter}
+                  </button>
+                  {showFilters ? (
+                    <div className="absolute left-0 top-8 z-[410] grid w-[180px] gap-1 rounded-[12px] border border-white/10 bg-[#171717] px-1 pb-[3px] pt-2 shadow-[0_18px_60px_rgba(0,0,0,0.44)]" role="menu">
+                      {ASSET_MANAGER_FILTERS.map((item) => (
+                        <button
+                          className={cn(
+                            "h-8 rounded-[8px] px-2 text-left text-[13px] text-white hover:bg-white/10",
+                            item === filter && "bg-white/10"
+                          )}
+                          key={item}
+                          onClick={() => {
+                            setFilter(item);
+                            setShowFilters(false);
+                          }}
+                          role="menuitem"
+                          type="button"
+                        >
+                          {item}
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+                </div>
+                <button
+                  aria-label={searchOpen ? "关闭搜索" : "搜索节点"}
+                  className="flex h-7 w-7 items-center justify-center rounded-lg text-white/85 hover:bg-white/10"
+                  onClick={() => {
+                    setSearchOpen((value) => !value);
+                    if (searchOpen) setSearchQuery("");
+                  }}
+                  type="button"
+                >
+                  {searchOpen ? <X className="h-4 w-4" /> : <Search className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto px-2 py-2">
+            {visibleNodes.length === 0 ? (
+              <div className="mt-2 rounded-lg px-3 py-5 text-center text-[13px] text-white/36">暂无匹配节点</div>
+            ) : (
+              <div className="grid gap-0.5">
+                {visibleNodes.map((node) => (
+                  <div className="group/node relative flex h-10 w-full items-center gap-0.5 rounded-lg py-1 pl-0 pr-0 hover:bg-white/10" key={node.id}>
+                    {editingNodeId === node.id ? (
+                      <input
+                        aria-label={`重命名节点 ${node.title}`}
+                        className="ml-2 h-7 min-w-0 flex-1 rounded-[7px] border border-white/14 bg-black/22 px-2 text-[13px] text-white outline-none"
+                        onChange={(event) => setRenameDraft(event.target.value)}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter") commitRename();
+                          if (event.key === "Escape") {
+                            setEditingNodeId(null);
+                            setRenameDraft("");
+                          }
+                        }}
+                        value={renameDraft}
+                      />
+                    ) : (
+                      <button
+                        aria-label={`定位到节点 ${node.title}`}
+                        className="flex h-8 min-w-0 items-center rounded-lg pl-3 pr-[58px] text-left text-[13px] text-white"
+                        onClick={() => onSelectNode(node.id)}
+                        style={{ width: nodeRowWidth }}
+                        type="button"
+                      >
+                        <span className="block min-w-0 truncate">{node.title}</span>
+                      </button>
+                    )}
+                    {editingNodeId === node.id ? (
+                      <>
+                        <button aria-label="确认重命名" className="flex h-6 w-6 items-center justify-center rounded-md text-white/50 hover:bg-white/10 hover:text-white" onClick={commitRename} type="button">
+                          <Check className="h-3.5 w-3.5" />
+                        </button>
+                        <button aria-label="取消重命名" className="flex h-6 w-6 items-center justify-center rounded-md text-white/50 hover:bg-white/10 hover:text-white" onClick={() => {
+                          setEditingNodeId(null);
+                          setRenameDraft("");
+                        }} type="button">
+                          <X className="h-3.5 w-3.5" />
+                        </button>
+                      </>
+                    ) : (
+                      <>
+                        <button
+                          aria-label="更多操作"
+                          className="absolute top-2 flex h-6 w-6 items-center justify-center rounded-md text-white/40 hover:bg-white/10 hover:text-white"
+                          onClick={() => setMenuNodeId((current) => current === node.id ? null : node.id)}
+                          style={{ left: nodeActionMoreLeft }}
+                          type="button"
+                        >
+                          ...
+                        </button>
+                        <button
+                          aria-label={`定位到节点 ${node.title}`}
+                          className="absolute top-2 flex h-6 w-6 items-center justify-center rounded-md text-white/40 hover:bg-white/10 hover:text-white"
+                          onClick={() => onSelectNode(node.id)}
+                          style={{ left: nodeActionLocateLeft }}
+                          type="button"
+                        >
+                          ↗
+                        </button>
+                      </>
+                    )}
+                    {menuNodeId === node.id ? (
+                      <div
+                        className="absolute top-[38px] z-[410] grid w-[180px] gap-1 rounded-[12px] border border-white/10 bg-[#171717] px-1 pb-1 pt-2 shadow-[0_18px_60px_rgba(0,0,0,0.46)]"
+                        ref={moreMenuRef}
+                        role="menu"
+                        style={{ left: nodeActionMoreLeft }}
+                      >
+                        <button className="h-8 rounded-[8px] px-2 text-left text-[13px] text-white hover:bg-white/10" onClick={() => startRename(node)} role="menuitem" type="button">
+                          重命名
+                        </button>
+                        <button className="h-8 rounded-[8px] px-2 text-left text-[13px] text-white hover:bg-white/10" onClick={() => {
+                          onDuplicateNode(node.id);
+                          setMenuNodeId(null);
+                        }} role="menuitem" type="button">
+                          复制
+                        </button>
+                      </div>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      ) : (
+        <div className="flex min-h-0 flex-1 flex-col gap-3 px-2 py-3">
+          <div className="flex h-[30px] items-center gap-1">
+            <div className="relative h-[30px] min-w-0 flex-1">
+              <input
+                className="h-[30px] w-full rounded-lg border border-white/10 bg-white/8 px-3 pr-8 text-[13px] text-white outline-none placeholder:text-white/35"
+                onChange={(event) => setAssetSearchQuery(event.target.value)}
+                placeholder="请输入搜索内容"
+                value={assetSearchQuery}
+              />
+              <button aria-label="搜索" className="absolute right-1 top-1 flex h-[22px] w-[22px] items-center justify-center rounded-md text-white/50 hover:bg-white/10 hover:text-white" type="button">
+                <Search className="h-3.5 w-3.5" />
+              </button>
+            </div>
+            <div className="relative" ref={assetFilterRef}>
+              <button
+                aria-label="筛选素材类型"
+                className="flex h-7 w-7 items-center justify-center rounded-lg text-white/55 hover:bg-white/10 hover:text-white"
+                onClick={() => setAssetFilterOpen((value) => !value)}
+                type="button"
+              >
+                <Settings2 className="h-4 w-4" />
+              </button>
+              {assetFilterOpen ? (
+                <div className="absolute left-0 top-[38px] z-[410] w-[322px] rounded-[12px] border border-white/10 bg-[#212121] p-4 shadow-[0_18px_60px_rgba(0,0,0,0.46)]" role="menu">
+                  <div className="text-[14px] leading-5 text-white/50">标签</div>
+                  <div className="mt-3 grid w-[192px] grid-cols-3 gap-x-2 gap-y-2">
+                    {["其它", "人物", "场景", "物品", "风格", "音效"].map((tag) => (
+                      <button className="h-8 rounded-lg text-[13px] text-white/78 hover:bg-white/10" key={tag} type="button">
+                        {tag}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="mt-5 flex justify-end gap-3">
+                    <button className="h-8 rounded-lg px-3 text-[13px] text-white/55 hover:bg-white/10" onClick={() => setAssetFilterOpen(false)} type="button">
+                      清空
+                    </button>
+                    <button className="h-8 rounded-lg px-3 text-[13px] text-white hover:bg-white/10" onClick={() => setAssetFilterOpen(false)} type="button">
+                      应用
+                    </button>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="flex min-h-0 flex-1 flex-col">
+            <div className="tiny-scrollbar h-full overflow-y-auto overflow-x-hidden">
+              <div className="flex min-h-[188px] flex-col items-center justify-center px-4 py-8 text-center text-[13px] text-white/45">
+                暂无资产
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex h-[53px] shrink-0 items-center justify-between border-t border-[#363636] px-3 pb-3 pt-2 text-[12px] text-white/42">共 {nodes.length} 节点</div>
+      <div
+        aria-label="调整工作区面板宽度"
+        aria-valuemax={ASSET_MANAGER_MAX_WIDTH}
+        aria-valuemin={ASSET_MANAGER_MIN_WIDTH}
+        aria-valuenow={panelWidth}
+        className="workspace-panel-drawer-resize-handle absolute bottom-0 right-0 top-0 z-[100] w-3 shrink-0 cursor-col-resize touch-none select-none bg-transparent"
+        onPointerDown={onResizeStart}
+        role="separator"
+        tabIndex={0}
+      />
+    </section>
+  );
+}
+
+function ShortcutPanel({ onClose }: { onClose: () => void }) {
+  const groups = [
+    ["创作", [["成组", "G"], ["合并分镜组", "Option+G"], ["解组", "Shift+G"], ["连线", "L"], ["复制节点和连线", "D"], ["生成", "Enter"], ["新建节点", "Tab"], ["节点复制", "Option+拖动节点"]]],
+    ["缩放", [["放大", ""], ["缩小", ""], ["适应画布", "0"]]],
+    ["移动画布", [["键盘", "Space"], ["触控板", ""], ["鼠标", ""], ["整理画布", "Option+Shift+F"]]],
+    ["其他", [["撤销", "Z"], ["重做", "Shift+Z"], ["删除", ""]]],
+  ] as const;
+
+  return (
+    <section
+      className="fixed left-1/2 top-[300px] z-[300] h-[436px] max-h-[80vh] w-[min(100%,calc(100vw-1.5rem))] max-w-[1152px] -translate-x-1/2 overflow-y-auto rounded-2xl border border-white/10 bg-[#444444]/95 p-6 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-lg"
+      data-canvas-overlay="true"
+    >
+      <button
+        aria-label="关闭快捷键面板"
+        className="absolute right-[11px] top-3 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-white/44 hover:bg-white/8"
+        onClick={onClose}
+        type="button"
+      >
+        <X className="h-4 w-4" />
+      </button>
+      <div className="grid grid-cols-4 gap-x-[49px]">
+        {groups.map(([title, rows]) => (
+          <div className="w-[239px]" key={title}>
+            <h3 className="text-sm font-medium text-[#09CAF5]">{title}</h3>
+            <div className="mt-[19px] grid gap-3">
+              {rows.map(([label, key]) => (
+                <div className="flex h-7 w-full items-center justify-between gap-4" key={label}>
+                  <span className="min-w-0 flex-1 pr-2 text-left text-sm leading-snug text-white/50">{label}</span>
+                  {key ? (
+                    <span className="flex h-7 min-w-7 shrink-0 items-center justify-center px-1 font-sans text-sm text-white/72">{key}</span>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function TutorialHelpPanel({ onClose }: { onClose: () => void }) {
+  const [activeItem, setActiveItem] = useState<string | null>(null);
+  const items = [
+    { href: VIDEO_CANVAS_TUTORIAL_URL, label: "使用教程" },
+    { label: "联系客服" },
+    { label: "联系销售" },
+    { label: "关注公众号" },
+  ];
+  return (
+    <section
+      className="fixed bottom-[69px] left-[calc(50%+109px)] z-[300] flex h-[154px] w-[104px] flex-col rounded-xl bg-[#262626] px-1 py-[5px] text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)]"
+      data-canvas-overlay="true"
+    >
+      {items.map((item) => {
+        const active = activeItem === item.label;
+        return (
+          <button
+            className={cn(
+              "h-9 w-[95px] whitespace-nowrap rounded-lg px-3 py-2 text-left text-[13px] text-white/74 transition-colors hover:bg-white/8",
+              active && "bg-white/10 text-white"
+            )}
+            key={item.label}
+            onClick={() => {
+              setActiveItem(item.label);
+              if ("href" in item && item.href) {
+                window.open(item.href, "_blank", "noopener,noreferrer");
+              }
+            }}
+            type="button"
+          >
+            {item.label}
           </button>
         );
       })}
-      <h4 className="px-2 py-1 text-[14px] font-medium leading-5 text-white/60">添加资源</h4>
-      <button
-        className="group flex h-[52px] w-full cursor-pointer items-center gap-2 rounded-[12px] px-2 py-2 text-left text-white/82 transition-colors duration-200 hover:bg-white/8"
-        onClick={triggerUpload}
-        type="button"
-      >
-        <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
-          <Upload className="h-5 w-5" />
-        </span>
-        <span className="h-full min-w-0 flex-1 overflow-hidden">
-          <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
-            <span className="text-[14px] font-medium leading-5">上传</span>
-            <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
-              可上传图片、视频、音频文件
+    </section>
+  );
+}
+
+function RoleLibraryPanel({
+  onApplyRole,
+  onClose,
+  roles,
+}: {
+  onApplyRole: (role: RoleLibraryItem) => void;
+  onClose: () => void;
+  roles: RoleLibraryItem[];
+}) {
+  const [filterMenuOpen, setFilterMenuOpen] = useState(false);
+  const [recentOnly, setRecentOnly] = useState(false);
+  const [selectedFilters, setSelectedFilters] = useState<Partial<Record<RoleLibraryFilterKey, string>>>({});
+  const [selectedRoleName, setSelectedRoleName] = useState(roles[0]?.name || "");
+  const filteredRoles = useMemo(
+    () =>
+      recentOnly
+        ? []
+        : roles.filter((role) =>
+            ROLE_LIBRARY_FILTER_GROUPS.every((group) => !selectedFilters[group.key] || role.filters[group.key] === selectedFilters[group.key])
+          ),
+    [recentOnly, roles, selectedFilters]
+  );
+  const selectedRole = (roles.find((role) => role.name === selectedRoleName) || filteredRoles[0] || roles[0])!;
+  const selectedTags = selectedRole.tags.split(" ").filter(Boolean);
+  const previewImages = [
+    { className: "w-[191px]", label: "角色立绘", url: selectedRole.images.full },
+    { className: "w-[191px]", label: "脸部近景", url: selectedRole.images.face },
+    { className: "w-[191px]", label: "表情参考", url: selectedRole.images.expression },
+    { className: "w-[453px]", label: "三视图", url: selectedRole.images.threeView },
+  ];
+
+  useEffect(() => {
+    if (recentOnly || filteredRoles.length === 0) return;
+    if (!filteredRoles.some((role) => role.name === selectedRoleName)) {
+      setSelectedRoleName(filteredRoles[0].name);
+    }
+  }, [filteredRoles, recentOnly, selectedRoleName]);
+
+  const toggleFilter = (key: RoleLibraryFilterKey, value: string) => {
+    setSelectedFilters((current) => {
+      const next = { ...current };
+      if (next[key] === value) {
+        delete next[key];
+      } else {
+        next[key] = value;
+      }
+      return next;
+    });
+  };
+
+  const selectRelativeRole = (direction: -1 | 1) => {
+    if (filteredRoles.length === 0) return;
+    const currentIndex = Math.max(
+      0,
+      filteredRoles.findIndex((role) => role.name === selectedRole.name)
+    );
+    const nextIndex = (currentIndex + direction + filteredRoles.length) % filteredRoles.length;
+    setSelectedRoleName(filteredRoles[nextIndex].name);
+  };
+
+  return (
+    <section
+      className="fixed left-1/2 top-1/2 z-50 flex h-[685px] w-[1376px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-[#303030] bg-[#222] text-[#f7f7f7] shadow-[0_28px_90px_rgba(0,0,0,0.54)]"
+      data-canvas-overlay="true"
+    >
+      <div className="flex h-14 shrink-0 items-center justify-between px-4">
+        <h3 className="text-[16px] font-semibold text-[#f5f5f5]">角色库</h3>
+        <button
+          aria-label="关闭角色库"
+          className="flex h-8 w-8 items-center justify-center rounded-[8px] text-white/58 transition-colors hover:bg-white/8 hover:text-white"
+          onClick={onClose}
+          type="button"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      <div className="flex h-[391px] shrink-0 flex-col px-4 pb-4">
+        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden rounded-xl bg-white/[0.05] p-4">
+          <div className="flex h-6 shrink-0 items-center gap-2">
+            <span className="shrink-0 text-[14px] font-semibold text-[#f5f5f5]">{selectedRole.name}</span>
+            {selectedTags.map((tag) => (
+              <span className="rounded-md bg-white/10 px-2 py-1 text-[12px] leading-none text-[#c6c6c6]" key={tag}>
+                {tag}
+              </span>
+            ))}
+          </div>
+          <div className="flex h-[255px] shrink-0 justify-center gap-2 overflow-hidden">
+            {previewImages.map((image) => (
+              <div className={cn("h-[255px] overflow-hidden rounded-lg bg-white", image.className)} key={image.label}>
+                <img alt={`${selectedRole.name} ${image.label}`} className="h-full w-full object-contain" src={image.url} />
+              </div>
+            ))}
+          </div>
+          <div className="mt-auto flex h-8 shrink-0 items-center justify-between gap-4">
+            <p className="min-w-0 truncate text-[12px] text-[#9a9a9a]">{selectedRole.description}</p>
+            <button
+              className="flex h-8 shrink-0 items-center gap-1 rounded-lg bg-white px-3 text-[13px] text-[#25272a] transition-colors hover:bg-[#fafafa]"
+              onClick={() => onApplyRole(selectedRole)}
+              type="button"
+            >
+              <Plus className="h-4 w-4" />
+              应用至画布
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative flex h-[236px] shrink-0 flex-col gap-4 border-t border-[#303030] pb-4">
+        <div className="mt-[17px] flex h-7 shrink-0 items-center justify-between px-4">
+          <div className="relative">
+            <button
+              className={cn(
+                "flex h-7 shrink-0 items-center gap-1 rounded-lg border-[0.5px] border-white/12 px-2 text-[13px] text-[#f5f5f5] transition-colors hover:bg-white/25",
+                filterMenuOpen ? "bg-white/[0.14]" : "bg-white/10"
+              )}
+              onClick={() => setFilterMenuOpen((open) => !open)}
+              type="button"
+            >
+              角色筛选
+              <ChevronDown className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <button
+            aria-checked={recentOnly}
+            className="flex h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-[#f7f7f7]"
+            onClick={() => setRecentOnly((current) => !current)}
+            role="checkbox"
+            type="button"
+          >
+            <span
+              className={cn(
+                "flex h-4 w-4 items-center justify-center rounded border border-white/20",
+                recentOnly ? "bg-white text-[#25272a]" : "bg-transparent"
+              )}
+            >
+              {recentOnly ? <Check className="h-3 w-3" strokeWidth={2.2} /> : null}
             </span>
-          </span>
-        </span>
-      </button>
-      <button
-        className="group flex h-[52px] w-full cursor-pointer items-center gap-2 rounded-[12px] px-2 py-2 text-left text-white/82 transition-colors duration-200 hover:bg-white/8"
-        onClick={onGallerySelect}
-        type="button"
-      >
-        <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
-          <Layers className="h-5 w-5" />
-        </span>
-        <span className="h-full min-w-0 flex-1 overflow-hidden">
-          <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
-            <span className="text-[14px] font-medium leading-5">从图库选择</span>
-            <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
-              从历史生成中选择素材
-            </span>
-          </span>
-        </span>
-      </button>
+            <span className="text-[12px] leading-normal text-[#f5f5f5]">最近使用</span>
+          </button>
+        </div>
+
+        {filterMenuOpen ? (
+          <div
+            className="tiny-scrollbar fixed z-[61] max-h-[420px] w-[328px] overflow-y-auto rounded-2xl bg-[#262626] px-2 pb-2 shadow-[0_18px_48px_rgba(0,0,0,0.42)]"
+            style={{ left: "calc(50% - 671px)", top: "calc(50% - 305px)" }}
+          >
+            <div className="flex h-10 items-center justify-between px-1 pt-2">
+              <span className="text-[14px] font-medium text-[#f5f5f5]">角色筛选</span>
+              <button
+                className="flex h-6 items-center gap-1 rounded-lg px-2 text-[13px] text-[#f7f7f7] transition-colors hover:bg-white/10"
+                onClick={() => setSelectedFilters({})}
+                type="button"
+              >
+                清空筛选
+              </button>
+            </div>
+            <div className="flex flex-col gap-1 px-1 pb-2">
+              {ROLE_LIBRARY_FILTER_GROUPS.map((group) => (
+                <div className="flex flex-col gap-1" key={group.key}>
+                  <span className="py-1 text-[13px] text-[#a8a8a8]">{group.label}</span>
+                  <div className="flex flex-wrap gap-2">
+                    {group.options.map((option) => {
+                      const selected = selectedFilters[group.key] === option;
+                      return (
+                        <button
+                          className={cn(
+                            "relative flex h-7 w-[57px] items-center justify-center rounded-[8px] px-2 text-[12px] text-[#f7f7f7] transition-colors",
+                            selected ? "bg-[#696969] text-white" : "bg-white/10 hover:bg-white/16"
+                          )}
+                          key={option}
+                          onClick={() => toggleFilter(group.key, option)}
+                          type="button"
+                        >
+                          {option}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        <div className="relative min-h-0 flex-1">
+          {filteredRoles.length === 0 ? (
+            <div className="flex h-[159px] items-center justify-center text-[13px] text-[#9a9a9a]">无最近使用的角色</div>
+          ) : (
+            <div className="flex h-[159px] w-full items-center">
+              <button
+                aria-label="prev"
+                className="ml-4 flex h-7 w-7 shrink-0 items-center justify-center self-center rounded-lg border border-white/10 text-[#f5f5f5] transition-colors hover:bg-white/10"
+                onClick={() => selectRelativeRole(-1)}
+                type="button"
+              >
+                ‹
+              </button>
+              <div className="relative min-w-0 flex-1 overflow-x-hidden">
+                <div className="scrollbar-hide flex h-full items-start gap-[15px] overflow-x-auto px-3">
+                  {filteredRoles.map((role) => {
+                    const selected = selectedRole.name === role.name;
+                    const cardWidthClass = role.name === "清冷千金/白切黑女主" ? "w-[116px]" : "w-[104px]";
+                    return (
+                      <button
+                        className={cn(
+                          "flex h-[159px] shrink-0 flex-col items-center rounded-[10px] transition-colors",
+                          cardWidthClass,
+                          selected ? "bg-white/[0.04]" : "bg-transparent hover:bg-white/[0.03]"
+                        )}
+                        key={role.name}
+                        onClick={() => setSelectedRoleName(role.name)}
+                        type="button"
+                      >
+                        <span className="mt-[2.5px] block h-[133px] w-[99px] overflow-hidden rounded-lg bg-white">
+                          <img alt={role.name} className="h-full w-full object-cover" src={role.images.full} />
+                        </span>
+                        <span
+                          className={cn(
+                            "mt-[4px] w-full truncate text-center text-[12px] leading-[17px]",
+                            selected ? "font-medium text-[#f5f5f5]" : "font-normal text-[#5f5f5f]"
+                          )}
+                        >
+                          {role.name}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+              <button
+                aria-label="next"
+                className="mr-4 flex h-7 w-7 shrink-0 items-center justify-center self-center rounded-lg border border-white/10 text-[#f5f5f5] transition-colors hover:bg-white/10"
+                onClick={() => selectRelativeRole(1)}
+                type="button"
+              >
+                ›
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
     </section>
   );
 }
@@ -11529,51 +24757,93 @@ function AddModulePanel({
 function WorkflowPanel({
   onAdd,
   onClose,
-  workflows,
+  workflows = [],
 }: {
   onAdd: (workflow: WorkflowPreset, index: number) => void;
   onClose: () => void;
-  workflows: WorkflowPreset[];
+  workflows?: WorkflowPreset[];
 }) {
-  const visibleWorkflows: WorkflowPreset[] = workflows.length > 0
-    ? workflows.slice(0, 9)
-    : STARTER_CARDS.map<WorkflowPreset>((card, index) => ({
-        cover: card.coverUrl,
-        description: card.subtitle,
-        id: index,
-        name: `【预设】${card.title}`,
-      }));
+  const serverWorkflowTemplates = useMemo<ToolboxTemplatePreset[]>(
+    () =>
+      workflows.slice(0, 6).map((workflow, index) => ({
+        accent: "linear-gradient(135deg,#dfe8ff,#8997ff)",
+        author: "自定义工具箱",
+        badge: "自定义",
+        category: "全部",
+        cover: workflow.cover,
+        description: workflow.description || "自定义工作流预设",
+        duration: "5s",
+        id: workflow.id ?? `server-${index}`,
+        name: workflow.name || workflow.title || "未命名预设",
+        steps: ["素材", "配置", "生成", "视频"],
+        templateKey: workflow.uuid || String(workflow.id ?? `server-${index}`),
+        usageCount: "本地",
+        uuid: workflow.uuid,
+      })),
+    [workflows]
+  );
+  const allTemplates = useMemo<ToolboxTemplatePreset[]>(
+    () => [...TOOLBOX_TEMPLATE_PRESETS, ...serverWorkflowTemplates],
+    [serverWorkflowTemplates]
+  );
+  const formatTemplateName = (workflow: ToolboxTemplatePreset) => {
+    const name = String(workflow.name || workflow.title || "未命名预设");
+    return name.startsWith("【预设】") ? name : `【预设】${name}`;
+  };
 
   return (
     <section
-      className="absolute left-[132px] top-[72px] z-50 flex h-[min(794px,calc(100vh-96px))] w-[960px] flex-col overflow-hidden rounded-[18px] border border-white/10 bg-[#202020] shadow-[0_28px_90px_rgba(0,0,0,0.48)]"
+      className="fixed bottom-[69px] left-1/2 z-20 flex h-[460px] w-[480px] -translate-x-1/2 flex-col overflow-hidden rounded-xl border-[0.5px] border-[#363636] bg-[#262626] text-[#f7f7f7]"
       data-canvas-overlay="true"
     >
-      <div className="flex h-[96px] items-center justify-between border-white/8 border-b px-8">
-        <div className="flex items-center gap-3">
-          <div className="font-semibold text-[26px] text-white">我的工具箱</div>
-          <button className="flex h-7 w-7 items-center justify-center rounded-full border border-white/22 text-[18px] text-white/52" onClick={() => toast.info("工具箱说明待接入。")} type="button">
-            ?
-          </button>
-        </div>
-        <button className="rounded-[8px] p-2 text-white/50 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
-          <X className="h-9 w-9" strokeWidth={1.6} />
-        </button>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto px-8 py-8">
-        <div className="grid grid-cols-3 gap-x-6 gap-y-8">
-          {visibleWorkflows.map((workflow, index) => (
+      <div className="flex h-10 shrink-0 items-center justify-between px-4 pt-3">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1">
             <button
-              className="group text-left"
-              key={`${workflow.id || ""}-${workflow.uuid || workflow.name}`}
-              onClick={() => onAdd(workflow, index)}
+              className="cursor-pointer rounded-md border-none bg-transparent py-1 pr-2 pl-0 text-sm font-medium text-white transition-colors"
               type="button"
             >
-              <div className="relative h-[282px] overflow-hidden rounded-[8px] bg-[#2a2a2a]">
+              我的工具箱
+            </button>
+            <button
+              aria-label="工具箱模板说明"
+              className="-ml-1.5 flex size-4 cursor-help items-center justify-center rounded-full border-none bg-transparent p-0 text-white/70 opacity-50 transition-opacity hover:opacity-80"
+              onClick={() => toast.info("工具箱模板会将参考图、提示词和成品节点应用到画布。")}
+              type="button"
+            >
+              <HelpCircle className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <button
+            className="cursor-pointer rounded-md border-none bg-transparent px-2 py-1 text-sm font-medium text-white/55 transition-colors hover:text-white/80"
+            type="button"
+          >
+            周星驰经典名场面
+          </button>
+        </div>
+        <button
+          className="flex size-6 cursor-pointer items-center justify-center rounded-md text-white/50 opacity-50 transition-colors hover:bg-white/10 hover:opacity-100"
+          onClick={onClose}
+          type="button"
+        >
+          <X className="h-4 w-4" strokeWidth={1.8} />
+        </button>
+      </div>
+      <div className="mt-3 h-px shrink-0 bg-[#363636]" />
+      <div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto p-4">
+        <div className="grid grid-cols-3 gap-x-3 gap-y-3">
+          {allTemplates.map((workflow, index) => (
+            <div
+              className="group flex min-w-0 cursor-grab flex-col gap-1 active:cursor-grabbing"
+              key={`${workflow.templateKey}-${index}`}
+            >
+              <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-[#2a2a2a]">
                 {workflow.cover ? (
                   <img
                     alt=""
-                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.025]"
+                    className="size-full object-cover"
+                    draggable={false}
+                    onDragStart={preventNativeImageDrag}
                     src={workflow.cover}
                   />
                 ) : (
@@ -11581,12 +24851,23 @@ function WorkflowPanel({
                     <WorkflowGlyph />
                   </div>
                 )}
-                <span className="absolute inset-0 bg-black/0 transition group-hover:bg-black/8" />
+                <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/65 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+                  <button
+                    className="flex h-6 cursor-pointer items-center justify-center rounded-lg border-none bg-white/15 px-3 text-[13px] font-medium text-white shadow-sm backdrop-blur-[2px] transition-colors hover:bg-white/25"
+                    onClick={() => {
+                      const workflowIndex = allTemplates.findIndex((item) => item.templateKey === workflow.templateKey);
+                      onAdd(workflow, workflowIndex >= 0 ? workflowIndex : index);
+                    }}
+                    type="button"
+                  >
+                    使用
+                  </button>
+                </div>
               </div>
-              <div className="mt-3 px-1">
-                <div className="line-clamp-2 text-[22px] font-medium leading-7 text-white/76">{workflow.name || workflow.title || "未命名预设"}</div>
+              <div className="min-w-0 text-[13px] leading-[16.5px] text-white/80">
+                <div className="line-clamp-2 min-h-[16.5px]">{formatTemplateName(workflow)}</div>
               </div>
-            </button>
+            </div>
           ))}
         </div>
       </div>
@@ -11596,12 +24877,18 @@ function WorkflowPanel({
 
 function InspectorPanel({
   node,
+  referenceCount = 0,
+  onAddReference,
   onChangeProperty,
   onClose,
+  onGenerate,
 }: {
   node: CloneNode;
+  referenceCount?: number;
+  onAddReference?: (node: CloneNode) => void;
   onChangeProperty: (key: string, value: unknown) => void;
   onClose: () => void;
+  onGenerate?: (node: CloneNode) => void;
 }) {
   const tool = node.tool;
   const type = getToolType(tool);
@@ -11609,6 +24896,9 @@ function InspectorPanel({
   const showUpload = Boolean(tool && requiresMedia(tool));
   const inspectorTitle = getInspectorTitle(node);
   const primaryTab = node.inputType || type || node.kind;
+  const route = getDraftString(node, "route") || getToolRoute(tool);
+  const isGenerating = getDraftString(node, "generationStatus") === "pending";
+  const statusLabel = route === "local" ? "本地处理" : isGenerating ? "生成中" : "已接入";
   return (
     <aside
       className="absolute right-4 top-[124px] z-50 w-[476px] overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] text-white shadow-[0_24px_80px_rgba(0,0,0,0.45)]"
@@ -11621,7 +24911,7 @@ function InspectorPanel({
             <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/58">
               {primaryTab}
             </span>
-            <span className="rounded-[6px] bg-[#5b5220] px-2 py-1 text-[12px] text-[#d7c66a]">后端待接入</span>
+            <span className="rounded-[6px] bg-[#1f4d38] px-2 py-1 text-[12px] text-[#8ce0b5]">{statusLabel}</span>
             {tool?.vendor ? <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/48">{tool.vendor}</span> : null}
             {getToolModes(tool).map((mode) => (
               <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/48" key={mode}>
@@ -11638,11 +24928,11 @@ function InspectorPanel({
         {showUpload ? (
           <button
             className="flex h-[74px] w-full items-center justify-center rounded-[8px] border border-white/10 bg-white/5 text-[14px] text-white/52 hover:bg-white/8 hover:text-white"
-            onClick={() => toast.info("上传/素材选择接口待接入。")}
+            onClick={() => (onAddReference ? onAddReference(node) : toast.info("上传/素材选择接口待接入。"))}
             type="button"
           >
             <Plus className="mr-2 h-4 w-4" />
-            添加素材
+            {referenceCount > 0 ? `继续添加素材 · 已连入 ${referenceCount}` : "添加素材"}
           </button>
         ) : null}
         {properties.length > 0 ? (
@@ -11663,11 +24953,12 @@ function InspectorPanel({
           </div>
         )}
         <button
-          className="h-[64px] w-full rounded-[8px] bg-white font-bold text-[16px] text-black hover:bg-white/90"
-          onClick={() => toast.info("生成接口待接入。")}
+          className="h-[64px] w-full rounded-[8px] bg-white font-bold text-[16px] text-black hover:bg-white/90 disabled:cursor-not-allowed disabled:bg-white/35"
+          disabled={isGenerating}
+          onClick={() => (onGenerate ? onGenerate(node) : toast.info("生成接口待接入。"))}
           type="button"
         >
-          生成
+          {isGenerating ? "生成中..." : "生成"}
         </button>
       </div>
     </aside>
@@ -11799,12 +25090,18 @@ function ToggleRow({
   );
 }
 
-function AssetLibraryPanel() {
-  const assets = [
-    { label: "角色图", type: "图片", url: CHARACTER_IMAGE_URL },
-    { label: "角色三视图", type: "图片", url: CHARACTER_THREE_VIEW_URL },
-    { label: "首帧", type: "图片", url: FIRST_FRAME_IMAGE_URL },
-    { label: "音频参考图", type: "图片", url: AUDIO_REFERENCE_IMAGE_URL },
+function AssetLibraryPanel({
+  onSelectAsset,
+}: {
+  onSelectAsset?: (asset: CanvasLibraryAsset) => void;
+}) {
+  const assets: CanvasLibraryAsset[] = [
+    { label: "角色图", mediaType: "image", type: "图片", url: CHARACTER_IMAGE_URL },
+    { label: "角色三视图", mediaType: "image", type: "图片", url: CHARACTER_THREE_VIEW_URL },
+    { label: "首帧", mediaType: "image", type: "图片", url: FIRST_FRAME_IMAGE_URL },
+    { label: "音频参考图", mediaType: "image", type: "图片", url: AUDIO_REFERENCE_IMAGE_URL },
+    { label: "示例音频", mediaType: "audio", type: "音频", url: AUDIO_SOURCE_URL },
+    { label: "视频参考", mediaType: "video", type: "视频", url: SCRIPT_VIDEO_REFERENCE_URL },
   ];
   return (
     <div className="space-y-4">
@@ -11835,10 +25132,10 @@ function AssetLibraryPanel() {
           <button
             className="overflow-hidden rounded-[8px] border border-white/8 bg-white/5 text-left hover:border-white/20 hover:bg-white/8"
             key={asset.label}
-            onClick={() => toast.info(`${asset.label}选择接口待接入。`)}
+            onClick={() => (onSelectAsset ? onSelectAsset(asset) : toast.info(`${asset.label}选择接口待接入。`))}
             type="button"
           >
-            <div className="h-28 bg-cover bg-center" style={{ backgroundImage: `url(${asset.url})` }} />
+            <div className="h-28 bg-cover bg-center" style={{ backgroundImage: `url(${asset.mediaType === "audio" ? AUDIO_REFERENCE_IMAGE_URL : asset.url})` }} />
             <div className="flex items-center justify-between px-3 py-2">
               <span className="text-[13px] text-white/82">{asset.label}</span>
               <span className="rounded-[6px] bg-white/8 px-2 py-0.5 text-[11px] text-white/42">{asset.type}</span>
@@ -12792,6 +26089,54 @@ function ImageNodePreview({ node }: { node: CloneNode }) {
   );
 }
 
+function CancelGenerationConfirmDialog({
+  onCancel,
+  onConfirm,
+}: {
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/58"
+      data-canvas-overlay="true"
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <section
+        aria-labelledby="cancel-generation-title"
+        aria-modal="true"
+        className="w-[344px] rounded-[12px] border border-white/10 bg-[#232323] px-4 pb-4 pt-[14px] text-white shadow-[0_28px_90px_rgba(0,0,0,0.58)]"
+        role="dialog"
+      >
+        <h2 className="text-[16px] font-semibold leading-6 text-white" id="cancel-generation-title">
+          取消生成
+        </h2>
+        <p className="mt-4 whitespace-pre-line text-[14px] leading-6 text-white/72">
+          正在生成中，即将完成！
+          {"\n"}
+          停止将不退还已消耗算力。
+        </p>
+        <div className="mt-5 flex justify-end gap-3">
+          <button
+            className="h-8 rounded-[8px] border border-white/10 bg-white/8 px-4 text-[13px] text-white/72 transition hover:bg-white/12 hover:text-white"
+            onClick={onCancel}
+            type="button"
+          >
+            取消
+          </button>
+          <button
+            className="h-8 rounded-[8px] bg-white px-4 text-[13px] font-medium text-[#1c1c1c] transition hover:bg-white/88"
+            onClick={onConfirm}
+            type="button"
+          >
+            确定
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}
+
 function LibModal({
   children,
   onClose,
diff --git a/lib/video-canvas/config.ts b/lib/video-canvas/config.ts
index 9b6d8e0b6..c2864348b 100644
--- a/lib/video-canvas/config.ts
+++ b/lib/video-canvas/config.ts
@@ -17,6 +17,7 @@ export type VideoCanvasBackendRoute =
   | "enhance"
   | "enhance-pro"
   | "extend"
+  | "pick-object"
   | "remove-bg"
   | "layer-split"
   | "local";
@@ -38,11 +39,58 @@ export type VideoCanvasFunctionBillingCopy = {
   description: string;
 };
 
+export type VideoCanvasEffectPreset = {
+  id: string;
+  title: string;
+  author: string;
+  usageCount: number;
+  model: string;
+  thumbnailUrl: string;
+  prompt: string;
+  commercial: boolean;
+};
+
+export type VideoCanvasMotionPreset = {
+  id: string;
+  name: string;
+  previewUrl: string;
+  prompt: string;
+};
+
+export type VideoCanvasRolePreset = {
+  id: string;
+  assetId: string;
+  name: string;
+  accent: string;
+  description: string;
+  prompt: string;
+  tags: string;
+  compliant: boolean;
+  images: {
+    expression: string;
+    face: string;
+    full: string;
+    threeView: string;
+  };
+  filters: {
+    age: string;
+    build: string;
+    culture: string;
+    era: string;
+    gender: string;
+    hairColor: string;
+    species: string;
+  };
+};
+
 export type VideoCanvasFunctionConfig = {
   enabled: boolean;
   defaultImageModel: string;
   defaultVideoModel: string;
   defaultMultimodalModel: string;
+  effectPresets: VideoCanvasEffectPreset[];
+  motionPresets: VideoCanvasMotionPreset[];
+  rolePresets: VideoCanvasRolePreset[];
   functions: Record<string, VideoCanvasFunctionDefinition>;
 };
 
@@ -237,6 +285,18 @@ const defaultFunctions: VideoCanvasFunctionDefinition[] = [
     prompt: "分析参考图片，输出结构化中文提示词，包括主体、环境、构图、光影、镜头语言和风格关键词。",
     description: "多模态识图生成提示词。",
   },
+  {
+    key: "element-mark",
+    label: "视频元素标记",
+    kind: "multimodal",
+    route: "pick-object",
+    enabled: true,
+    model: "qwen3-vl-plus",
+    prompt:
+      "图片中有一个红色圆形标记和十字线。请识别红色标记正中心所指向的视觉元素，并给出从宽泛主体到精确局部的可切换标签层级。若点中完整人物，首项用“人物”；若点中人物面部，首项用“人物面部”；若点中眼睛、手部等明确局部，可返回如 [\"人物\",\"眼睛\"] 的层级；商品或物体同理，先给完整主体，再给确实可见的局部。标签必须简短、客观、互不重复，每项不超过 8 个汉字，最多 4 项。严格返回纯 JSON：{\"name\":\"默认标签\",\"labels\":[\"默认标签\",\"更精确标签\"],\"position\":\"位置描述\",\"confidence\":0.95}。position 必须从以下选项中选择：{{positionOptions}}。不要输出 Markdown 或额外解释。",
+    description: "视频节点“标记”使用的点选元素识别规则；结果以可切换的结构化标签写入提示词。",
+    requiresBackend: true,
+  },
   {
     key: "text-to-video",
     label: "文生视频",
@@ -276,11 +336,335 @@ const defaultFunctions: VideoCanvasFunctionDefinition[] = [
   },
 ];
 
+export const defaultVideoCanvasEffectPresets: VideoCanvasEffectPreset[] = [
+  {
+    id: "bee-camera",
+    title: "小蜜蜂运镜",
+    author: "赛博蒲公英",
+    usageCount: 1100,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/bee-camera.webp",
+    prompt: "使用微型飞行器第一人称视角快速穿行场景，贴近主体掠过并保持连续、灵活的空间运动，形成小蜜蜂般轻盈迅捷的运镜。",
+    commercial: true,
+  },
+  {
+    id: "cloud-dive",
+    title: "穿云而入",
+    author: "数据星云",
+    usageCount: 528,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/cloud-dive.webp",
+    prompt: "镜头从高空云层快速向下俯冲，穿透云雾后自然揭示参考图主体和场景，保持方向连续并强化速度与纵深感。",
+    commercial: true,
+  },
+  {
+    id: "horizon-flight",
+    title: "飞跃地平线",
+    author: "赛博蒲公英",
+    usageCount: 1000,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/horizon-flight.webp",
+    prompt: "镜头低空高速前进并在接近地平线时抬升飞越，空间尺度逐步展开，主体和环境运动保持稳定连贯。",
+    commercial: true,
+  },
+  {
+    id: "reverse-gravity",
+    title: "逆转引力",
+    author: "量子呢喃",
+    usageCount: 239,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/reverse-gravity.webp",
+    prompt: "让场景和主体在保持结构一致的前提下出现引力反转，镜头随空间翻转并平滑过渡，避免突然跳切和形体崩坏。",
+    commercial: true,
+  },
+  {
+    id: "earth-zoom",
+    title: "地球缩放",
+    author: "数字游隼",
+    usageCount: 180,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/earth-zoom.webp",
+    prompt: "从参考场景连续快速拉远到城市、云层和地球尺度，保持地理方向和中心主体一致，形成无缝地球缩放转场。",
+    commercial: true,
+  },
+  {
+    id: "global-zoom",
+    title: "环球缩放",
+    author: "比特浮尘",
+    usageCount: 184,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/global-zoom.webp",
+    prompt: "围绕地球尺度完成连续环绕和缩放，镜头从局部场景扩展至全球视野后平滑落回目标区域，运动轨迹清晰稳定。",
+    commercial: true,
+  },
+  {
+    id: "iris-push",
+    title: "瞳孔推镜",
+    author: "参数迷宫",
+    usageCount: 387,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/iris-push.webp",
+    prompt: "镜头平滑推近人物眼睛并穿入瞳孔，以瞳孔纹理作为转场中心，保持面部身份稳定并避免眼部畸变。",
+    commercial: true,
+  },
+  {
+    id: "earth-dive",
+    title: "俯冲地球",
+    author: "神经元旋涡",
+    usageCount: 275,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/earth-dive.webp",
+    prompt: "从太空视角向地球目标区域高速俯冲，依次穿过大气、云层和城市，最终自然抵达参考画面。",
+    commercial: true,
+  },
+  {
+    id: "product-light-sweep",
+    title: "产品扫光",
+    author: "模型幻景",
+    usageCount: 943,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/product-light-sweep.webp",
+    prompt: "在不改变产品造型、材质和品牌细节的前提下，让精致轮廓光从一侧平滑扫过产品表面，突出质感与高光细节。",
+    commercial: true,
+  },
+  {
+    id: "prada-change",
+    title: "普拉达换装",
+    author: "量子呢喃",
+    usageCount: 71,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/prada-change.webp",
+    prompt: "保持人物身份、姿态和镜头不变，以高级时装广告节奏完成连续换装，服装材质真实且每次变化衔接自然。",
+    commercial: true,
+  },
+  {
+    id: "multi-angle",
+    title: "多角度定点",
+    author: "代码极光",
+    usageCount: 546,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/multi-angle.webp",
+    prompt: "围绕主体在多个固定机位间平滑切换，主体位置和比例保持稳定，每个角度清晰展示不同侧面并避免身份漂移。",
+    commercial: true,
+  },
+  {
+    id: "underwater-slow",
+    title: "水下慢镜头",
+    author: "代码极光",
+    usageCount: 253,
+    model: "Seedance 2.0",
+    thumbnailUrl: "/video-canvas/effects/underwater-slow.webp",
+    prompt: "将动作转为水下慢镜头质感，加入自然漂浮、细微气泡和柔和水体折射，保持主体外观清晰并让运动流畅连贯。",
+    commercial: true,
+  },
+  ...[
+    ["eye-makeup", "试妆特写", "像素漫游者", 98, "iris-push.webp"],
+    ["float-in", "悬浮缓入", "像素漫游者", 171, "cloud-dive.webp"],
+    ["macro-push", "微距推镜", "智能碎屑", 273, "product-light-sweep.webp"],
+    ["helicopter-reveal", "直升机揭幕", "认知碎片", 100, "horizon-flight.webp"],
+    ["mountain-chase", "山路追击", "代码极光", 185, "multi-angle.webp"],
+    ["snow-race", "雪地赛车", "智能碎屑", 102, "earth-dive.webp"],
+    ["city-drive", "City Drive", "像素漫游者", 70, "bee-camera.webp"],
+    ["deconstruct-3d", "3D解构", "算法织梦者", 296, "reverse-gravity.webp"],
+    ["face-orbit", "面部环拍", "比特浮尘", 183, "multi-angle.webp"],
+    ["showroom", "Showroom", "智能碎屑", 65, "product-light-sweep.webp"],
+    ["jewelry-closeup", "饰品特写", "逻辑褶皱", 62, "product-light-sweep.webp"],
+    ["giant-lookdown", "巨人俯瞰", "算法织梦者", 116, "reverse-gravity.webp"],
+    ["runway", "Runway", "算力潮汐", 81, "horizon-flight.webp"],
+    ["ai-dance", "AI 编舞", "比特浮尘", 501, "multi-angle.webp"],
+    ["android", "机械姬", "认知碎片", 137, "product-light-sweep.webp"],
+    ["star-scene", "巨星名场面", "数据星云", 80, "horizon-flight.webp"],
+    ["mirror-double", "镜面分身", "赛博蒲公英", 56, "reverse-gravity.webp"],
+    ["iris-mutation", "瞳孔异变", "数字游隼", 50, "iris-push.webp"],
+  ].map(([id, title, author, usageCount, thumbnail]) => ({
+    id: String(id),
+    title: String(title),
+    author: String(author),
+    usageCount: Number(usageCount),
+    model: "Seedance 2.0",
+    thumbnailUrl: `/video-canvas/effects/${String(thumbnail)}`,
+    prompt: `保持参考主体和画面结构稳定，应用“${String(title)}”的专业视频特效与镜头运动，过渡自然、动作连续、避免形体畸变和闪烁。`,
+    commercial: true,
+  })),
+];
+
+const defaultMotionPreviewUrls = {
+  still: "/video-canvas/effects/product-light-sweep.webp",
+  follow: "/video-canvas/effects/bee-camera.webp",
+  orbit: "/video-canvas/effects/reverse-gravity.webp",
+  tilt: "/video-canvas/effects/cloud-dive.webp",
+  pan: "/video-canvas/effects/multi-angle.webp",
+  rise: "/video-canvas/effects/horizon-flight.webp",
+  descend: "/video-canvas/effects/underwater-slow.webp",
+  push: "/video-canvas/effects/iris-push.webp",
+  pull: "/video-canvas/effects/earth-zoom.webp",
+  zoom: "/video-canvas/effects/global-zoom.webp",
+} as const;
+
+export const defaultVideoCanvasMotionPresets: VideoCanvasMotionPreset[] = [
+  { id: "fixed", name: "固定镜头", previewUrl: defaultMotionPreviewUrls.still, prompt: "固定镜头" },
+  { id: "follow", name: "跟随拍摄", previewUrl: defaultMotionPreviewUrls.follow, prompt: "跟随拍摄" },
+  { id: "orbit-up", name: "盘旋抬升", previewUrl: defaultMotionPreviewUrls.orbit, prompt: "盘旋抬升" },
+  { id: "orbit-down", name: "盘旋下降", previewUrl: defaultMotionPreviewUrls.orbit, prompt: "盘旋下降" },
+  { id: "tilt-up", name: "镜头上摇", previewUrl: defaultMotionPreviewUrls.tilt, prompt: "镜头上摇" },
+  { id: "tilt-down", name: "镜头下摇", previewUrl: defaultMotionPreviewUrls.tilt, prompt: "镜头下摇" },
+  { id: "pan-left", name: "镜头左摇", previewUrl: defaultMotionPreviewUrls.pan, prompt: "镜头左摇" },
+  { id: "pan-right", name: "镜头右摇", previewUrl: defaultMotionPreviewUrls.pan, prompt: "镜头右摇" },
+  { id: "rise", name: "镜头上升", previewUrl: defaultMotionPreviewUrls.rise, prompt: "镜头上升" },
+  { id: "descend", name: "镜头下降", previewUrl: defaultMotionPreviewUrls.descend, prompt: "镜头下降" },
+  { id: "truck-left", name: "镜头左移", previewUrl: defaultMotionPreviewUrls.pan, prompt: "镜头左移" },
+  { id: "truck-right", name: "镜头右移", previewUrl: defaultMotionPreviewUrls.pan, prompt: "镜头右移" },
+  { id: "push-in", name: "镜头前推", previewUrl: defaultMotionPreviewUrls.push, prompt: "镜头前推" },
+  { id: "pull-out", name: "镜头后移", previewUrl: defaultMotionPreviewUrls.pull, prompt: "镜头后移" },
+  { id: "zoom-in", name: "变焦推进", previewUrl: defaultMotionPreviewUrls.push, prompt: "变焦推进" },
+  { id: "zoom-out", name: "变焦拉远", previewUrl: defaultMotionPreviewUrls.zoom, prompt: "变焦拉远" },
+  { id: "dolly-zoom", name: "柯克变焦", previewUrl: defaultMotionPreviewUrls.zoom, prompt: "柯克变焦" },
+  { id: "orbit", name: "环绕拍摄", previewUrl: defaultMotionPreviewUrls.orbit, prompt: "环绕拍摄" },
+  { id: "roll", name: "滚筒旋转", previewUrl: defaultMotionPreviewUrls.orbit, prompt: "滚筒旋转" },
+  { id: "first-person", name: "第一视角", previewUrl: defaultMotionPreviewUrls.follow, prompt: "第一视角" },
+];
+
+const defaultRoleImages: VideoCanvasRolePreset["images"] = {
+  expression:
+    "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-image.png",
+  face:
+    "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-image.png",
+  full:
+    "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-image.png",
+  threeView:
+    "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-three-view.png",
+};
+
+function createDefaultRolePreset(
+  input: Omit<VideoCanvasRolePreset, "assetId" | "compliant" | "images">,
+): VideoCanvasRolePreset {
+  return {
+    ...input,
+    assetId: `public-role:${input.id}`,
+    compliant: true,
+    images: { ...defaultRoleImages },
+  };
+}
+
+export const defaultVideoCanvasRolePresets: VideoCanvasRolePreset[] = [
+  createDefaultRolePreset({
+    id: "fresh-girl",
+    name: "甜妹/清新少女",
+    accent: "linear-gradient(135deg,#ffd8df,#ffd4a8)",
+    description: "甜妹/清新少女，含角色立绘、脸部近景、表情参考与三视图。",
+    prompt: "保持清新少女的五官、发型、浅色穿搭和温柔气质稳定，动作自然，所有镜头中身份一致。",
+    tags: "女主 女 现代 青年 温柔",
+    filters: { age: "青年", build: "匀称", culture: "东亚", era: "现代", gender: "女", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "executive-man",
+    name: "霸总/精英大佬",
+    accent: "linear-gradient(135deg,#d6e3ff,#a8b5ff)",
+    description: "精英大佬/霸总角色，西装、冷静、掌控感强。",
+    prompt: "保持都市精英男性的面部、黑发、深色西装和冷静强势气质稳定，避免身份与服装漂移。",
+    tags: "男主 男 现代 青年 精英",
+    filters: { age: "青年", build: "健壮", culture: "东亚", era: "现代", gender: "男", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "gentle-mature-man",
+    name: "温柔熟男/理想男友",
+    accent: "linear-gradient(135deg,#f6e6c9,#d4b98b)",
+    description: "成熟、稳定、生活感强，适合情感叙事和陪伴感镜头。",
+    prompt: "保持成熟温柔男性的面部、发型、针织穿搭和温暖眼神一致，表演自然克制。",
+    tags: "男主 男 现代 熟男 温柔",
+    filters: { age: "中年", build: "匀称", culture: "东亚", era: "现代", gender: "男", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "cool-heiress",
+    name: "清冷千金/白切黑女主",
+    accent: "linear-gradient(135deg,#f2f4ff,#bcc8e8)",
+    description: "外表克制优雅、内在反差强，适合悬疑和都市情节。",
+    prompt: "保持清冷女性的五官、黑发、浅色套装和克制表情一致，突出优雅与反差感。",
+    tags: "女主 女 现代 青年 清冷",
+    filters: { age: "青年", build: "匀称", culture: "东亚", era: "现代", gender: "女", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "ancient-male-lead",
+    name: "古风男主",
+    accent: "linear-gradient(135deg,#d9c7a8,#8f6d47)",
+    description: "长袍束发、侠气和权谋感兼具，适合宫廷、江湖和玄幻故事。",
+    prompt: "保持古风男性的五官、束发、长袍材质和沉稳英气一致，动作符合古装角色身份。",
+    tags: "男主 男 古风 青年 英气",
+    filters: { age: "青年", build: "健壮", culture: "东亚", era: "古代", gender: "男", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "ancient-female-lead",
+    name: "古风女主",
+    accent: "linear-gradient(135deg,#ffdce8,#b7d9ff)",
+    description: "柔美但有行动力，适合穿越、宫廷、仙侠和小说推文分镜。",
+    prompt: "保持古风女性的五官、精致发髻、浅色罗裙和柔美坚定气质一致，避免妆造漂移。",
+    tags: "女主 女 古风 青年 柔美",
+    filters: { age: "青年", build: "匀称", culture: "东亚", era: "古代", gender: "女", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "villainess",
+    name: "恶毒女配/白莲花",
+    accent: "linear-gradient(135deg,#ffe9f1,#e4b8d5)",
+    description: "表情管理强，适合冲突镜头、反派转折和情绪戏。",
+    prompt: "保持精致女性反派的身份、妆发和华丽服装一致，用细微表情表现柔弱外表与反派反差。",
+    tags: "女配 女 现代 反派 戏剧",
+    filters: { age: "青年", build: "匀称", culture: "东亚", era: "现代", gender: "女", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "lifestyle-person",
+    name: "生活方式普通人",
+    accent: "linear-gradient(135deg,#e7f2d3,#b6d49a)",
+    description: "真实自然、易代入，适合口播、日常剧情和产品场景。",
+    prompt: "保持普通生活方式人物的身份、自然穿搭和真实表情一致，避免过度精修与商业模特感。",
+    tags: "普通人 现代 日常 真实",
+    filters: { age: "青年", build: "匀称", culture: "东亚", era: "现代", gender: "中性", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "fashion-asian-man",
+    name: "时尚感亚洲男生",
+    accent: "linear-gradient(135deg,#d7f0ff,#8dc5e8)",
+    description: "潮流、干净、镜头表现力强，适合品牌短片和社媒内容。",
+    prompt: "保持时尚亚洲男性的面部、妆发和潮流穿搭一致，呈现干净自信的商业镜头表现。",
+    tags: "男 亚洲 时尚 青年",
+    filters: { age: "青年", build: "匀称", culture: "东亚", era: "现代", gender: "男", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "fashion-asian-woman",
+    name: "时尚感亚洲女生",
+    accent: "linear-gradient(135deg,#ffe2ef,#ffd0bc)",
+    description: "造型感强，适合妆造、服饰、电商和生活方式短片。",
+    prompt: "保持时尚亚洲女性的五官、精致妆发和潮流穿搭一致，姿态自信，服饰细节稳定。",
+    tags: "女 亚洲 时尚 青年",
+    filters: { age: "青年", build: "匀称", culture: "东亚", era: "现代", gender: "女", hairColor: "黑发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "fashion-western-man",
+    name: "时尚感欧美男生",
+    accent: "linear-gradient(135deg,#dde7ff,#c7d0dc)",
+    description: "轮廓鲜明，适合国际化品牌、运动、科技和旅拍内容。",
+    prompt: "保持时尚欧美男性的鲜明轮廓、发型和现代穿搭一致，动作有品牌广告的克制力量感。",
+    tags: "男 欧美 时尚 青年",
+    filters: { age: "青年", build: "健壮", culture: "欧美", era: "现代", gender: "男", hairColor: "棕发", species: "人类" },
+  }),
+  createDefaultRolePreset({
+    id: "fashion-western-woman",
+    name: "时尚感欧美女生",
+    accent: "linear-gradient(135deg,#ffe5f5,#d8c2ff)",
+    description: "适合美妆、服饰、旅行和高质感商业镜头。",
+    prompt: "保持时尚欧美女性的五官、精致造型和现代服饰一致，呈现明亮自信的商业大片质感。",
+    tags: "女 欧美 时尚 青年",
+    filters: { age: "青年", build: "匀称", culture: "欧美", era: "现代", gender: "女", hairColor: "棕发", species: "人类" },
+  }),
+];
+
 export const defaultVideoCanvasFunctionConfig: VideoCanvasFunctionConfig = {
   enabled: true,
   defaultImageModel: "auto",
   defaultVideoModel: "auto",
   defaultMultimodalModel: "auto",
+  effectPresets: defaultVideoCanvasEffectPresets,
+  motionPresets: defaultVideoCanvasMotionPresets,
+  rolePresets: defaultVideoCanvasRolePresets,
   functions: Object.fromEntries(defaultFunctions.map((item) => [item.key, item])),
 };
 
@@ -404,6 +788,109 @@ export function normalizeVideoCanvasFunctionConfig(value: unknown): VideoCanvasF
       typeof value.defaultMultimodalModel === "string" && value.defaultMultimodalModel.trim()
         ? value.defaultMultimodalModel.trim()
         : defaultVideoCanvasFunctionConfig.defaultMultimodalModel,
+    effectPresets: Array.isArray(value.effectPresets) && value.effectPresets.length > 0
+      ? value.effectPresets
+          .slice(0, 100)
+          .map((item, index) => {
+            const incoming = isRecord(item) ? item : {};
+            const fallback =
+              defaultVideoCanvasEffectPresets[index] ||
+              defaultVideoCanvasEffectPresets[0];
+            return {
+              id: String(incoming.id || fallback.id || `effect-${index + 1}`),
+              title: String(incoming.title || fallback.title || `视频特效 ${index + 1}`),
+              author: String(incoming.author || fallback.author || "官方预设"),
+              usageCount: Math.max(
+                0,
+                Math.round(Number(incoming.usageCount ?? fallback.usageCount) || 0),
+              ),
+              model: String(incoming.model || fallback.model || "Seedance 2.0"),
+              thumbnailUrl: String(
+                incoming.thumbnailUrl || fallback.thumbnailUrl || "",
+              ),
+              prompt: String(incoming.prompt || fallback.prompt || ""),
+              commercial:
+                typeof incoming.commercial === "boolean"
+                  ? incoming.commercial
+                  : fallback.commercial,
+            } satisfies VideoCanvasEffectPreset;
+          })
+          .filter((item) => item.title && item.thumbnailUrl)
+      : defaultVideoCanvasEffectPresets,
+    motionPresets: Array.isArray(value.motionPresets) && value.motionPresets.length > 0
+      ? value.motionPresets
+          .slice(0, 100)
+          .map((item, index) => {
+            const incoming = isRecord(item) ? item : {};
+            const fallback =
+              defaultVideoCanvasMotionPresets[index] ||
+              defaultVideoCanvasMotionPresets[0];
+            return {
+              id: String(incoming.id || fallback.id || `motion-${index + 1}`),
+              name: String(incoming.name || fallback.name || `运镜 ${index + 1}`),
+              previewUrl: String(
+                incoming.previewUrl || fallback.previewUrl || "",
+              ),
+              prompt: String(incoming.prompt || fallback.prompt || ""),
+            } satisfies VideoCanvasMotionPreset;
+          })
+          .filter((item) => item.name && item.previewUrl)
+      : defaultVideoCanvasMotionPresets,
+    rolePresets: Array.isArray(value.rolePresets) && value.rolePresets.length > 0
+      ? value.rolePresets
+          .slice(0, 100)
+          .map((item, index) => {
+            const incoming = isRecord(item) ? item : {};
+            const fallback =
+              defaultVideoCanvasRolePresets[index] ||
+              defaultVideoCanvasRolePresets[0];
+            const incomingImages = isRecord(incoming.images) ? incoming.images : {};
+            const incomingFilters = isRecord(incoming.filters) ? incoming.filters : {};
+            return {
+              id: String(incoming.id || fallback.id || `role-${index + 1}`),
+              assetId: String(
+                incoming.assetId || fallback.assetId || `public-role:role-${index + 1}`,
+              ),
+              name: String(incoming.name || fallback.name || `角色 ${index + 1}`),
+              accent: String(incoming.accent || fallback.accent || "#525252"),
+              description: String(incoming.description || fallback.description || ""),
+              prompt: String(incoming.prompt || fallback.prompt || ""),
+              tags: String(incoming.tags || fallback.tags || ""),
+              compliant:
+                typeof incoming.compliant === "boolean"
+                  ? incoming.compliant
+                  : fallback.compliant,
+              images: {
+                expression: String(
+                  incomingImages.expression || fallback.images.expression || "",
+                ),
+                face: String(incomingImages.face || fallback.images.face || ""),
+                full: String(incomingImages.full || fallback.images.full || ""),
+                threeView: String(
+                  incomingImages.threeView || fallback.images.threeView || "",
+                ),
+              },
+              filters: {
+                age: String(incomingFilters.age || fallback.filters.age || ""),
+                build: String(incomingFilters.build || fallback.filters.build || ""),
+                culture: String(
+                  incomingFilters.culture || fallback.filters.culture || "",
+                ),
+                era: String(incomingFilters.era || fallback.filters.era || ""),
+                gender: String(
+                  incomingFilters.gender || fallback.filters.gender || "",
+                ),
+                hairColor: String(
+                  incomingFilters.hairColor || fallback.filters.hairColor || "",
+                ),
+                species: String(
+                  incomingFilters.species || fallback.filters.species || "",
+                ),
+              },
+            } satisfies VideoCanvasRolePreset;
+          })
+          .filter((item) => item.name && item.images.full)
+      : defaultVideoCanvasRolePresets,
     functions,
   };
 }
diff --git a/services/canvas/index.ts b/services/canvas/index.ts
index d549fab5c..e0aeb5f67 100644
--- a/services/canvas/index.ts
+++ b/services/canvas/index.ts
@@ -102,6 +102,7 @@ export interface CanvasTextSuggestionItem {
 export type WorkflowAnalysisMode =
   | "video-analysis"
   | "character-scene-extraction"
+  | "story-script"
   | "agent-plan";
 
 export interface EnhanceProImageResult {
@@ -1002,7 +1003,18 @@ export const workflowAnalysisService = {
   }): Promise<
     ApiResponse<{
       analysisRows?: Array<{
+        shot?: string | number;
+        startTime?: string | number;
+        endTime?: string | number;
+        duration?: string | number;
         sceneDescription?: string;
+        narrative?: string;
+        story?: string;
+        shotSize?: string;
+        cameraAngle?: string;
+        cameraMovement?: string;
+        focusDepth?: string;
+        lighting?: string;
         backgroundMusic?: string;
         voiceAndSfx?: string;
         imagePrompt?: string;