diff --git a/components/canvas/LiblibVideoCanvasReplica.tsx b/components/canvas/LiblibVideoCanvasReplica.tsx
index 206a1a972..cce12b360 100644
--- a/components/canvas/LiblibVideoCanvasReplica.tsx
+++ b/components/canvas/LiblibVideoCanvasReplica.tsx
@@ -15,10 +15,8 @@ import {
   Music2,
   Plus,
   Play,
-  Save,
   Scissors,
   Settings2,
-  Share2,
   Sparkles,
   Trash2,
   Upload,
@@ -238,6 +236,41 @@ type SiteBrandSettings = {
   siteLogoDark?: string | null;
 };
 
+type MembershipSummaryResponse = {
+  summary?: {
+    currentCredits?: number | null;
+  };
+};
+
+type GridCellVisual = {
+  fit?: "cover" | "contain";
+  objectPosition?: string;
+  scale?: number;
+  translateX?: number;
+  translateY?: number;
+};
+
+type GridCropRect = {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+};
+
+type GridSplitSpec = {
+  columns: number;
+  detected: boolean;
+  rects: GridCropRect[];
+  rows: number;
+};
+
+type AngleEditorSettings = {
+  horizontalAngle: number;
+  promptEnabled: boolean;
+  verticalAngle: number;
+  zoom: number;
+};
+
 const capturedTools = ((capturedCanvasModules as any).tools || []) as CapturedTool[];
 const capturedCounts = (capturedCanvasModules as any).counts || {};
 const capturedWorkflows = ((capturedCanvasModules as any).workflows || []) as WorkflowPreset[];
@@ -323,7 +356,7 @@ const STARTER_CARDS = [
 
 const TOOLBAR_ITEMS: Array<{ id: Exclude<ActivePanel, null>; label: string; icon: LucideIcon }> = [
   { id: "add", label: "添加模块", icon: Plus },
-  { id: "workflow", label: "工作流", icon: GitBranch },
+  { id: "workflow", label: "工具箱", icon: GitBranch },
   { id: "assets", label: "素材", icon: Layers },
   { id: "history", label: "历史", icon: Clock3 },
   { id: "help", label: "帮助", icon: HelpCircle },
@@ -338,10 +371,23 @@ const OFFICIAL_NODE_GAP = 100;
 const OFFICIAL_TEXT_RESOURCE_HEIGHT = 232;
 const OFFICIAL_TEXT_RESOURCE_WIDTH = 350;
 const OFFICIAL_IMAGE_TOOLBAR_SCALE = 0.7;
-const OFFICIAL_COMPOSER_SCALE = 0.6;
+const OFFICIAL_COMPOSER_SCALE = 1;
 const PROMPT_COMPOSER_BASE_WIDTH = 895;
 const PROMPT_COMPOSER_BASE_HEIGHT = 286;
 const PRESET_COMPOSER_BASE_HEIGHT = 238;
+const MULTI_VIEW_NINE_GRID_PROMPT =
+  "以选中图片为角色/主体参考，生成多视角 3x3 九宫格分镜图。保持主体一致，九个镜头包含远景、全身、侧身、背面、半身、近景、局部细节等视角，使用清晰黑色分割线分隔每一格，白色或干净背景。";
+const NINE_GRID_CELL_VISUALS: GridCellVisual[] = [
+  { fit: "contain", objectPosition: "50% 50%", scale: 0.62 },
+  { fit: "contain", objectPosition: "58% 50%", scale: 0.74, translateX: -10 },
+  { fit: "contain", objectPosition: "68% 50%", scale: 0.86, translateX: -18 },
+  { objectPosition: "34% 24%", scale: 1.4, translateX: 8, translateY: 8 },
+  { objectPosition: "52% 28%", scale: 1.55, translateY: 5 },
+  { objectPosition: "66% 26%", scale: 1.72, translateX: -8, translateY: 2 },
+  { objectPosition: "20% 72%", scale: 2.08, translateX: 22, translateY: -12 },
+  { objectPosition: "52% 68%", scale: 1.24, translateY: -4 },
+  { objectPosition: "70% 64%", scale: 1.46, translateX: -14, translateY: -6 },
+];
 
 const TARGET_AVATAR =
   "https://liblibai-online.liblib.cloud/web/1656e2f1b3c74f1ba823b610f1b2cbdf/0c3eb5e2-1dc0-405c-a823-07b2570237f8.jpg?x-oss-process=image/resize,w_100,m_lfit/format,webp";
@@ -950,6 +996,73 @@ function createMediaResourceNode({
   };
 }
 
+function createNineGridCompositeNode({
+  anchor,
+  columns,
+  option,
+  rows,
+  sourceUrl,
+  x,
+  y,
+}: {
+  anchor: CloneNode;
+  columns: number;
+  option?: string;
+  rows: number;
+  sourceUrl: string;
+  x: number;
+  y: number;
+}): CloneNode {
+  const cellCount = rows * columns;
+  const title =
+    cellCount === 9
+      ? "多机位九宫格"
+      : option?.trim() || `${cellCount}宫格`;
+  const gridPrompt =
+    cellCount === 9 && (!option || /多|9|九/.test(option))
+      ? MULTI_VIEW_NINE_GRID_PROMPT
+      : `基于选中图片生成 ${columns}x${rows} 宫格分镜图，使用黑色分割线分隔每一格。`;
+
+  return {
+    id: makeId("image"),
+    kind: "media",
+    title,
+    subtitle: "生成结果",
+    inputType: "image",
+    x,
+    y,
+    width: 560,
+    height: 347,
+    accent: "#8790ff",
+    draftValues: {
+      action: "IMAGE_GENERATE_NINE_GRID",
+      generated: true,
+      gridColumns: columns,
+      gridPrompt,
+      gridRows: rows,
+      mediaType: "image",
+      nineGridCells: Array.from({ length: cellCount }).map((_, index) => getGridCellVisual(index)),
+      nineGridComposite: true,
+      nodeType: "image",
+      outputSizeLabel: cellCount === 9 ? "2752 × 1536" : "",
+      params: {
+        columns,
+        mode: "grid",
+        option: option || "",
+        prompt: gridPrompt,
+        rows,
+        sourceNodeId: anchor.id,
+        sourceUrl,
+      },
+      prompt: gridPrompt,
+      sourceNodeId: anchor.id,
+      sourceUrl,
+      toolbarOption: option || "",
+      url: [],
+    },
+  };
+}
+
 function createTextResourceNode({
   content,
   height = OFFICIAL_TEXT_RESOURCE_HEIGHT,
@@ -1002,6 +1115,198 @@ function preventNativeImageDrag(event: ReactDragEvent<HTMLImageElement>) {
   event.preventDefault();
 }
 
+function normalizeGridOption(option?: string) {
+  const text = String(option || "").trim();
+  const tileCount =
+    /25\s*宫格|5\s*[x×]\s*5|25/.test(text)
+      ? 25
+      : /16\s*宫格|4\s*[x×]\s*4|16/.test(text)
+        ? 16
+        : /4\s*宫格|2\s*[x×]\s*2|四/.test(text)
+          ? 4
+          : 9;
+  const columns = tileCount === 4 ? 2 : tileCount === 16 ? 4 : tileCount === 25 ? 5 : 3;
+  const rows = Math.ceil(tileCount / columns);
+  return { columns, rows, tileCount };
+}
+
+function getGridCellVisual(index: number): GridCellVisual {
+  return NINE_GRID_CELL_VISUALS[index % NINE_GRID_CELL_VISUALS.length];
+}
+
+function getNodeSourceMediaUrl(node: CloneNode | null | undefined) {
+  return getDraftString(node, "sourceUrl") || getNodeMediaUrl(node);
+}
+
+function createEqualGridRects(rows: number, columns: number): GridCropRect[] {
+  return Array.from({ length: rows * columns }).map((_, index) => {
+    const column = index % columns;
+    const row = Math.floor(index / columns);
+    return {
+      height: 1 / rows,
+      width: 1 / columns,
+      x: column / columns,
+      y: row / rows,
+    };
+  });
+}
+
+function buildGridRectsFromLines({
+  columns,
+  height,
+  horizontalLines,
+  rows,
+  verticalLines,
+  width,
+}: {
+  columns: number;
+  height: number;
+  horizontalLines: number[];
+  rows: number;
+  verticalLines: number[];
+  width: number;
+}): GridCropRect[] {
+  const lineMargin = Math.max(1, Math.round(Math.min(width, height) * 0.0015));
+  const xBounds = [0, ...verticalLines, width];
+  const yBounds = [0, ...horizontalLines, height];
+  const rects: GridCropRect[] = [];
+
+  for (let row = 0; row < rows; row += 1) {
+    for (let column = 0; column < columns; column += 1) {
+      const left = column === 0 ? xBounds[column] : xBounds[column] + lineMargin;
+      const right = column === columns - 1 ? xBounds[column + 1] : xBounds[column + 1] - lineMargin;
+      const top = row === 0 ? yBounds[row] : yBounds[row] + lineMargin;
+      const bottom = row === rows - 1 ? yBounds[row + 1] : yBounds[row + 1] - lineMargin;
+      rects.push({
+        height: Math.max((bottom - top) / height, 0.02),
+        width: Math.max((right - left) / width, 0.02),
+        x: Math.max(left / width, 0),
+        y: Math.max(top / height, 0),
+      });
+    }
+  }
+
+  return rects;
+}
+
+function getLineScore(data: Uint8ClampedArray, width: number, height: number, axis: "x" | "y", index: number) {
+  const limit = axis === "x" ? height : width;
+  const step = Math.max(1, Math.floor(limit / 260));
+  let score = 0;
+  let samples = 0;
+
+  for (let point = 0; point < limit; point += step) {
+    const x = axis === "x" ? index : point;
+    const y = axis === "x" ? point : index;
+    const offset = (y * width + x) * 4;
+    const alpha = data[offset + 3] / 255;
+    if (alpha < 0.1) continue;
+    const luminance = data[offset] * 0.299 + data[offset + 1] * 0.587 + data[offset + 2] * 0.114;
+    score += luminance < 96 ? ((96 - luminance) / 96) * alpha : 0;
+    samples += 1;
+  }
+
+  return samples > 0 ? score / samples : 0;
+}
+
+function findGridDividerLines(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  count: number,
+  axis: "x" | "y"
+) {
+  const size = axis === "x" ? width : height;
+  const otherSize = axis === "x" ? height : width;
+  const lines: number[] = [];
+  let detectedCount = 0;
+
+  for (let divider = 1; divider < count; divider += 1) {
+    const expected = (divider / count) * size;
+    const searchRadius = Math.max(8, Math.round(size * 0.08));
+    const from = Math.max(1, Math.round(expected - searchRadius));
+    const to = Math.min(size - 2, Math.round(expected + searchRadius));
+    let bestIndex = Math.round(expected);
+    let bestScore = 0;
+
+    for (let index = from; index <= to; index += 1) {
+      const score =
+        getLineScore(data, width, height, axis, index - 1) * 0.25 +
+        getLineScore(data, width, height, axis, index) * 0.5 +
+        getLineScore(data, width, height, axis, index + 1) * 0.25;
+      if (score > bestScore) {
+        bestScore = score;
+        bestIndex = index;
+      }
+    }
+
+    const minimumScore = otherSize > 0 ? 0.18 : 0.22;
+    if (bestScore >= minimumScore) {
+      detectedCount += 1;
+      lines.push(bestIndex);
+    } else {
+      lines.push(Math.round(expected));
+    }
+  }
+
+  return {
+    detected: detectedCount === Math.max(0, count - 1),
+    lines,
+  };
+}
+
+async function detectGridSplitFromImage(url: string, rows: number, columns: number): Promise<GridSplitSpec | null> {
+  if (!url || typeof window === "undefined") return null;
+
+  try {
+    const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+      const nextImage = new Image();
+      if (!url.startsWith("blob:") && !url.startsWith("data:")) {
+        nextImage.crossOrigin = "anonymous";
+        nextImage.referrerPolicy = "no-referrer";
+      }
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("image-load-failed"));
+      nextImage.src = url;
+    });
+    const naturalWidth = image.naturalWidth || image.width;
+    const naturalHeight = image.naturalHeight || image.height;
+    if (!naturalWidth || !naturalHeight) return null;
+
+    const maxSide = 980;
+    const scale = Math.min(1, maxSide / Math.max(naturalWidth, naturalHeight));
+    const width = Math.max(1, Math.round(naturalWidth * scale));
+    const height = Math.max(1, Math.round(naturalHeight * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (!context) return null;
+
+    context.drawImage(image, 0, 0, width, height);
+    const imageData = context.getImageData(0, 0, width, height);
+    const verticalResult = findGridDividerLines(imageData.data, width, height, columns, "x");
+    const horizontalResult = findGridDividerLines(imageData.data, width, height, rows, "y");
+    const rects = buildGridRectsFromLines({
+      columns,
+      height,
+      horizontalLines: horizontalResult.lines,
+      rows,
+      verticalLines: verticalResult.lines,
+      width,
+    });
+
+    return {
+      columns,
+      detected: verticalResult.detected && horizontalResult.detected,
+      rects,
+      rows,
+    };
+  } catch (_error) {
+    return null;
+  }
+}
+
 function getPresetMode(node: CloneNode | null | undefined): ActiveStarterScene {
   const value = getDraftString(node, "targetPreset");
   if (
@@ -1016,7 +1321,7 @@ function getPresetMode(node: CloneNode | null | undefined): ActiveStarterScene {
 }
 
 function isOfficialImageControlNode(node: CloneNode | null | undefined): node is CloneNode {
-  return !!node && node.kind === "media" && node.inputType === "image" && !!getNodeMediaUrl(node);
+  return !!node && (node.kind === "media" || node.kind === "script") && !!getPresetMode(node);
 }
 
 function getTargetModuleKind(node: CloneNode): AddModuleKind | null {
@@ -1317,29 +1622,29 @@ function createStarterWorkflow(
 
   if (starterTitle === "音频生视频") {
     const preset = "audio-to-video";
-    const leftX = Math.round(center.x - 510);
-    const leftY = Math.round(center.y - 320);
+    const leftX = Math.round(center.x - 900);
+    const leftY = Math.round(center.y - 370);
     const audio = createPresetMediaNode({
       action: "AUDIO_RESOURCE",
-      height: 158,
+      height: 190,
       mediaType: "audio",
       mediaUrl: AUDIO_SOURCE_URL,
       preset,
       title: "音频",
-      width: 430,
+      width: 720,
       x: leftX,
       y: leftY,
     });
     const image = createPresetMediaNode({
       action: "IMAGE_RESOURCE",
-      height: 252,
+      height: 400,
       mediaType: "image",
       mediaUrl: AUDIO_REFERENCE_IMAGE_URL,
       preset,
       title: "图片",
-      width: 430,
+      width: 720,
       x: leftX,
-      y: leftY + 190,
+      y: leftY + 300,
     });
     const right = createPresetMediaNode({
       action: "VIDEO_GENERATE",
@@ -1349,9 +1654,9 @@ function createStarterWorkflow(
       preset,
       prompt: AUDIO_TO_VIDEO_PROMPT,
       title: "视频",
-      width: 560,
-      x: Math.round(center.x + 100),
-      y: Math.round(center.y - 320),
+      width: 760,
+      x: Math.round(center.x + 90),
+      y: Math.round(center.y - 300),
     });
     return { nodes: [audio, image, right], edges: makePresetEdges([audio, image], right), selectedId: right.id };
   }
@@ -1380,6 +1685,9 @@ 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 [angleEditorNodeId, setAngleEditorNodeId] = useState<string | null>(null);
+  const [dockOverviewOpen, setDockOverviewOpen] = useState(false);
+  const [snapEnabled, setSnapEnabled] = useState(true);
 
   const selectedNode = useMemo(
     () => nodes.find((node) => node.id === selectedNodeId) || null,
@@ -1396,6 +1704,11 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     [connectionMenu?.nodeId, nodes]
   );
 
+  const angleEditorNode = useMemo(
+    () => nodes.find((node) => node.id === angleEditorNodeId) || null,
+    [angleEditorNodeId, nodes]
+  );
+
   useEffect(() => {
     let active = true;
 
@@ -1473,11 +1786,50 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
 
   const addWorkflowPreset = useCallback(
     (workflow: WorkflowPreset, index = 0) => {
-      const node = createWorkflowNode(workflow, 440 + index * 24, 350 + index * 18);
-      addNodes([node], []);
+      const title = String(workflow.name || workflow.title || "工具箱预设");
+      const baseX = 360 + index * 36;
+      const baseY = 300 + index * 24;
+      const reference = createMediaResourceNode({
+        action: "IMAGE_RESOURCE",
+        height: 280,
+        mediaType: "image",
+        mediaUrl: workflow.cover || CHARACTER_IMAGE_URL,
+        title: "参考图",
+        width: 420,
+        x: baseX,
+        y: baseY,
+      });
+      const result = createMediaResourceNode({
+        action: "VIDEO_GENERATE",
+        height: 315,
+        mediaType: "video",
+        mediaUrl: "",
+        prompt: workflow.description || `${title} 预设工作流`,
+        title,
+        width: 560,
+        x: baseX + 520,
+        y: baseY - 18,
+      });
+      const presetNode: CloneNode = {
+        ...result,
+        subtitle: "工具箱工作流",
+        draftValues: {
+          ...(result.draftValues || {}),
+          generated: true,
+          params: {
+            prompt: workflow.description || `${title} 预设工作流`,
+            presetId: workflow.uuid || workflow.id || "",
+            presetName: title,
+            sourceNodeId: reference.id,
+          },
+          sourceNodeId: reference.id,
+          workflow,
+        },
+      };
+      addNodes([reference, presetNode], [{ id: makeId("edge"), source: reference.id, target: presetNode.id }]);
       setActivePanel(null);
       setConnectionMenu(null);
-      toast.success("已添加工作流");
+      toast.success(`已添加「${title}」工具箱工作流`);
     },
     [addNodes]
   );
@@ -1761,8 +2113,8 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             kind: "media",
             title: "音频",
             subtitle: "音频资源",
-            width: 430,
-            height: 170,
+            width: 720,
+            height: 190,
             inputType: "audio",
           };
           draftUpdates = {
@@ -1773,15 +2125,20 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
             nodeType: "audio",
             url: [AUDIO_SOURCE_URL],
           };
-          const video = makeGenerated("video", "视频", rightX, { params: { prompt: AUDIO_TO_VIDEO_PROMPT } });
+          const video = {
+            ...makeGenerated("video", "视频", Math.round(anchor.x + 720 + OFFICIAL_NODE_GAP), { params: { prompt: AUDIO_TO_VIDEO_PROMPT } }),
+            width: 760,
+            height: 430,
+            y: Math.round(anchor.y + 70),
+          };
           const image = createMediaResourceNode({
             mediaType: "image",
             mediaUrl: AUDIO_REFERENCE_IMAGE_URL,
             title: "图片",
-            width: 430,
-            height: 252,
+            width: 720,
+            height: 400,
             x: anchor.x,
-            y: Math.round(anchor.y + 170 + OFFICIAL_NODE_GAP),
+            y: Math.round(anchor.y + 300),
           });
           nextNodes.push(video, image);
           nextEdges.push(
@@ -1920,10 +2277,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
   );
 
   const runSelectedImageToolAction = useCallback(
-    (nodeId: string, action: ImageToolbarAction, option?: string) => {
+    async (nodeId: string, action: ImageToolbarAction, option?: string) => {
       const anchor = nodes.find((node) => node.id === nodeId);
       if (!anchor) return;
-      const sourceUrl = getNodeMediaUrl(anchor) || CHARACTER_IMAGE_URL;
+      const sourceUrl = getNodeSourceMediaUrl(anchor) || CHARACTER_IMAGE_URL;
 
       if (action === "download") {
         if (!sourceUrl) {
@@ -1986,55 +2343,118 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         return;
       }
 
+      if (action === "orbit") {
+        setSelectedNodeId(anchor.id);
+        setAngleEditorNodeId(anchor.id);
+        setCanvasCommand(null);
+        setNodeContextMenu(null);
+        setConnectionMenu(null);
+        setActivePanel(null);
+        return;
+      }
+
       const rightX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP);
       const centerY = (height: number) => Math.round(anchor.y + anchor.height / 2 - height / 2);
       const nextNodes: CloneNode[] = [];
       const nextEdges: CloneEdge[] = [];
 
       if (action === "crop") {
-        const parsed = Number.parseInt(option || "9", 10);
-        const tileCount = Number.isFinite(parsed) && parsed > 0 ? parsed : 9;
-        const columns = Math.ceil(Math.sqrt(tileCount));
-        const tileSize = 180;
+        const { columns, rows, tileCount } = normalizeGridOption(option);
+        const tileSize = tileCount === 25 ? 142 : tileCount === 16 ? 156 : 180;
         const gap = 26;
-        const rows = Math.ceil(tileCount / columns);
         const startY = Math.round(anchor.y + anchor.height / 2 - (rows * tileSize + (rows - 1) * gap) / 2);
+        const isSyntheticGrid = Boolean(anchor.draftValues?.nineGridComposite);
+        const anchorMediaUrl = getNodeMediaUrl(anchor);
+        const detectedSplit =
+          !isSyntheticGrid && anchorMediaUrl
+            ? await detectGridSplitFromImage(anchorMediaUrl, rows, columns)
+            : null;
+        const rects =
+          detectedSplit?.rects && detectedSplit.rects.length >= tileCount
+            ? detectedSplit.rects
+            : createEqualGridRects(rows, columns);
+        const sourceVisuals = Array.isArray(anchor.draftValues?.nineGridCells)
+          ? (anchor.draftValues?.nineGridCells as GridCellVisual[])
+          : [];
 
         Array.from({ length: tileCount }).forEach((_, index) => {
           const tile = createMediaResourceNode({
             action: "IMAGE_RESOURCE",
             height: tileSize,
             mediaType: "image",
-            mediaUrl: sourceUrl,
+            mediaUrl: isSyntheticGrid ? sourceUrl : anchorMediaUrl || sourceUrl,
             prompt: option || "宫格切分",
-            title: `切分 ${index + 1}`,
+            title: `镜头 ${String(index + 1).padStart(2, "0")}`,
             width: tileSize,
             x: rightX + (index % columns) * (tileSize + gap),
             y: startY + Math.floor(index / columns) * (tileSize + gap),
           });
-          nextNodes.push(tile);
+          nextNodes.push({
+            ...tile,
+            subtitle: "宫格切片",
+            draftValues: {
+              ...(tile.draftValues || {}),
+              cropTile: {
+                columns,
+                detectedDivider: Boolean(detectedSplit?.detected),
+                index,
+                rect: rects[index],
+                rows,
+                sourceCompositeNodeId: anchor.id,
+                sourceMode: isSyntheticGrid ? "synthetic-grid" : "detected-lines",
+              },
+              gridCellVisual: isSyntheticGrid ? sourceVisuals[index] || getGridCellVisual(index) : undefined,
+              sourceNodeId: anchor.id,
+              sourceUrl,
+            },
+          });
           nextEdges.push({ id: makeId("edge"), source: anchor.id, target: tile.id });
         });
 
         setNodes((current) => [...current, ...nextNodes]);
         setEdges((current) => [...current, ...nextEdges]);
-        setSelectedNodeId(anchor.id);
+        setSelectedNodeId(nextNodes[0]?.id || anchor.id);
         setCanvasCommand(null);
         setNodeContextMenu(null);
         setConnectionMenu(null);
         setActivePanel(null);
-        toast.success(`已创建「${option || "宫格切分"}」结果节点`);
+        toast.success(
+          detectedSplit?.detected
+            ? `已识别黑色分割线并切分为 ${tileCount} 张图片`
+            : `已按 ${columns}x${rows} 宫格切分为 ${tileCount} 张图片`
+        );
         return;
       }
 
-      const labels: Record<Exclude<ImageToolbarAction, "annotate" | "rotate" | "download" | "preview" | "crop">, string> = {
+      const labels: Record<Exclude<ImageToolbarAction, "annotate" | "rotate" | "download" | "preview" | "crop" | "orbit">, string> = {
         grid: "九宫格",
         hd: "高清",
         lighting: "打光",
-        orbit: "多角度",
         panorama: "720 全景",
       };
       const title = labels[action];
+      if (action === "grid") {
+        const { columns, rows } = normalizeGridOption(option || "9宫格");
+        const gridNode = createNineGridCompositeNode({
+          anchor,
+          columns,
+          option,
+          rows,
+          sourceUrl,
+          x: rightX,
+          y: centerY(347),
+        });
+        setNodes((current) => [...current, gridNode]);
+        setEdges((current) => [...current, { id: makeId("edge"), source: anchor.id, target: gridNode.id }]);
+        setSelectedNodeId(gridNode.id);
+        setCanvasCommand(null);
+        setNodeContextMenu(null);
+        setConnectionMenu(null);
+        setActivePanel(null);
+        toast.success("已按预设提示词生成多机位九宫格结果图");
+        return;
+      }
+
       const created = createTargetModuleNode("image", rightX, 0, nodes.length + 1);
       const prompt = option?.trim() || title;
       const resultNode: CloneNode = {
@@ -2303,10 +2723,13 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       if (drag.kind === "node") {
         const dx = (event.clientX - drag.startX) / viewport.zoom;
         const dy = (event.clientY - drag.startY) / viewport.zoom;
+        const gridSize = snapEnabled ? 8 : 1;
+        const nextX = Math.round((drag.nodeX + dx) / gridSize) * gridSize;
+        const nextY = Math.round((drag.nodeY + dy) / gridSize) * gridSize;
         setNodes((current) =>
           current.map((node) =>
             node.id === drag.id
-              ? { ...node, x: Math.round(drag.nodeX + dx), y: Math.round(drag.nodeY + dy) }
+              ? { ...node, x: nextX, y: nextY }
               : node
           )
         );
@@ -2318,7 +2741,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         y: Math.round(drag.viewportY + event.clientY - drag.startY),
       }));
     },
-    [viewport.zoom]
+    [snapEnabled, viewport.zoom]
   );
 
   const onPointerUp = useCallback(() => {
@@ -2346,6 +2769,40 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
     });
   }, []);
 
+  const fitNodesToView = useCallback(
+    (targetNodes: CloneNode[]) => {
+      if (targetNodes.length === 0) {
+        setViewport(DEFAULT_VIEWPORT);
+        return;
+      }
+      const canvasWidth = canvasRef.current?.clientWidth || window.innerWidth;
+      const canvasHeight = canvasRef.current?.clientHeight || window.innerHeight;
+      const minX = Math.min(...targetNodes.map((node) => node.x));
+      const minY = Math.min(...targetNodes.map((node) => node.y));
+      const maxX = Math.max(...targetNodes.map((node) => node.x + node.width));
+      const maxY = Math.max(...targetNodes.map((node) => node.y + node.height));
+      const boundsWidth = Math.max(1, maxX - minX);
+      const boundsHeight = Math.max(1, maxY - minY);
+      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))
+      );
+      setViewport({
+        x: Math.round((canvasWidth - boundsWidth * nextZoom) / 2 - minX * nextZoom),
+        y: Math.round((canvasHeight - boundsHeight * nextZoom) / 2 - minY * nextZoom),
+        zoom: Number(nextZoom.toFixed(2)),
+      });
+    },
+    []
+  );
+
+  const focusDockTarget = useCallback(() => {
+    const target = selectedNode ? [selectedNode] : nodes;
+    fitNodesToView(target);
+    setDockOverviewOpen(false);
+  }, [fitNodesToView, nodes, selectedNode]);
+
   const onCanvasWheel = useCallback(
     (event: ReactWheelEvent<HTMLDivElement>) => {
       const target = event.target as HTMLElement;
@@ -2520,16 +2977,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
 
       <TopBar
         draftTitle={draftTitle}
-        isSaving={isSaving}
         isTitleEditing={isTitleEditing}
         onAccount={() => toggleTopPanel("account")}
-        onBell={() => toggleTopPanel("notifications")}
         onCommitTitle={commitTitle}
         onDraftTitleChange={setDraftTitle}
-        onMember={() => toggleTopPanel("member")}
-        onSave={saveCanvas}
-        onShare={() => toggleTopPanel("share")}
-        onSkills={() => toggleTopPanel("skills")}
         onStartTitleEdit={() => setIsTitleEditing(true)}
         projectTitle={projectTitle}
         routerBack={() => router.push("/")}
@@ -2550,8 +3001,14 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
 
       <ZoomDock
         compact={false}
+        nodes={nodes}
+        overviewOpen={dockOverviewOpen}
+        selectedNodeId={selectedNodeId}
+        snapEnabled={snapEnabled}
         zoom={viewport.zoom}
-        onCenter={() => setViewport(DEFAULT_VIEWPORT)}
+        onCenter={focusDockTarget}
+        onToggleOverview={() => setDockOverviewOpen((value) => !value)}
+        onToggleSnap={() => setSnapEnabled((value) => !value)}
         onZoomIn={() => zoomBy(0.1)}
         onZoomOut={() => zoomBy(-0.1)}
       />
@@ -2679,6 +3136,37 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
         </LibModal>
       ) : null}
 
+      {angleEditorNode ? (
+        <MultiAngleEditorDialog
+          node={angleEditorNode}
+          onApply={(settings) => {
+            setNodes((current) =>
+              current.map((node) =>
+                node.id === angleEditorNode.id
+                  ? {
+                      ...node,
+                      draftValues: {
+                        ...(node.draftValues || {}),
+                        angleSettings: settings,
+                        params: {
+                          ...((node.draftValues?.params as Record<string, unknown> | undefined) || {}),
+                          horizontal_angle: settings.horizontalAngle,
+                          prompt: settings.promptEnabled ? "按自定义多角度参数生成视角变化" : "",
+                          vertical_angle: settings.verticalAngle,
+                          zoom: settings.zoom,
+                        },
+                      },
+                    }
+                  : node
+              )
+            );
+            setAngleEditorNodeId(null);
+            toast.success("已应用多角度参数，生成接口待接入。");
+          }}
+          onClose={() => setAngleEditorNodeId(null)}
+        />
+      ) : 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">
@@ -2693,16 +3181,10 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
 
 function TopBar({
   draftTitle,
-  isSaving,
   isTitleEditing,
   onAccount,
-  onBell,
   onCommitTitle,
   onDraftTitleChange,
-  onMember,
-  onSave,
-  onShare,
-  onSkills,
   onStartTitleEdit,
   projectTitle,
   routerBack,
@@ -2711,16 +3193,10 @@ function TopBar({
   siteName,
 }: {
   draftTitle: string;
-  isSaving: boolean;
   isTitleEditing: boolean;
   onAccount: () => void;
-  onBell: () => void;
   onCommitTitle: () => void;
   onDraftTitleChange: (value: string) => void;
-  onMember: () => void;
-  onSave: () => void;
-  onShare: () => void;
-  onSkills: () => void;
   onStartTitleEdit: () => void;
   projectTitle: string;
   routerBack: () => void;
@@ -2728,6 +3204,9 @@ function TopBar({
   siteLogoDark?: string | null;
   siteName?: string | null;
 }) {
+  const { data: membershipSummary } = useSWR<MembershipSummaryResponse>("/api/user/membership-summary", fetcher);
+  const credits = Math.max(0, Number(membershipSummary?.summary?.currentCredits ?? 0));
+
   return (
     <header className="pointer-events-none absolute left-0 right-0 top-4 z-40 flex h-12 items-center justify-between pl-2 pr-4">
       <div className="pointer-events-auto flex items-center gap-3">
@@ -2762,51 +3241,28 @@ function TopBar({
       </div>
 
       <div className="pointer-events-auto flex items-center gap-2">
-        <TopButton onClick={onSkills}>LibTV Skills</TopButton>
-        <TopButton onClick={onSave} title="保存">
-          {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-        </TopButton>
-        <TopButton onClick={onShare} title="分享">
-          <Share2 className="h-4 w-4" />
-        </TopButton>
-        <TopButton className="relative" onClick={onBell} title="通知">
-          <span className="absolute right-px top-px h-[5px] w-[5px] rounded-full bg-[#f53f3f]" />
-          <Bell className="h-4 w-4" />
-        </TopButton>
-        <TopButton className="gap-1 px-3 text-[#05dff6]" onClick={onMember}>
-          <StoreGlyph />
-          会员超市
-        </TopButton>
-        <MemberDealPill onAccount={onAccount} onMember={onMember} />
+        <button
+          className="flex h-10 cursor-pointer items-center gap-2 rounded-xl border border-white/8 bg-[#202020]/95 px-3 text-[13px] text-white/78 shadow-[0_12px_30px_rgba(0,0,0,0.28)] transition hover:bg-[#2a2a2a] hover:text-white"
+          onClick={onAccount}
+          title="账户"
+          type="button"
+        >
+          <span className="flex items-center gap-1.5 text-white/74">
+            <span className="text-[#e3c55d]">⚡</span>
+            <span className="font-medium tabular-nums">{formatCreditValue(credits)}</span>
+          </span>
+          <span className="flex h-7 w-7 items-center justify-center overflow-hidden rounded-[9px] bg-gradient-to-br from-[#4e65f0] to-[#1d244b] text-white shadow-[inset_0_0_12px_rgba(255,255,255,0.2)]">
+            <UserRound className="h-4 w-4" />
+          </span>
+        </button>
       </div>
     </header>
   );
 }
 
-function TopButton({
-  children,
-  className,
-  onClick,
-  title,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  onClick: () => void;
-  title?: string;
-}) {
-  return (
-    <button
-      className={cn(
-        "flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-xl border border-white/8 bg-[#202020] px-3 text-[13px] font-normal text-white/72 shadow-[0_12px_30px_rgba(0,0,0,0.28)] transition hover:bg-[#2a2a2a] hover:text-white",
-        className
-      )}
-      onClick={onClick}
-      title={title}
-      type="button"
-    >
-      {children}
-    </button>
-  );
+function formatCreditValue(value: number) {
+  if (!Number.isFinite(value)) return "0";
+  return Math.round(value).toLocaleString("zh-CN");
 }
 
 function LeftToolbar({
@@ -2853,13 +3309,25 @@ function LeftToolbar({
 
 function ZoomDock({
   compact = false,
+  nodes = [],
   onCenter,
+  onToggleOverview,
+  onToggleSnap,
+  overviewOpen = false,
+  selectedNodeId,
+  snapEnabled = true,
   onZoomIn,
   onZoomOut,
   zoom,
 }: {
   compact?: boolean;
+  nodes?: CloneNode[];
   onCenter: () => void;
+  onToggleOverview?: () => void;
+  onToggleSnap?: () => void;
+  overviewOpen?: boolean;
+  selectedNodeId?: string | null;
+  snapEnabled?: boolean;
   onZoomIn: () => void;
   onZoomOut: () => void;
   zoom: number;
@@ -2887,28 +3355,115 @@ function ZoomDock({
   }
 
   return (
-    <div
-      className="absolute bottom-4 left-4 z-40 flex items-center gap-1 rounded-xl border 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"
+    <div className="absolute bottom-5 left-5 z-40" data-canvas-overlay="true">
+      {overviewOpen ? (
+        <CanvasOverviewPopover nodes={nodes} selectedNodeId={selectedNodeId || null} />
+      ) : null}
+      <div className="flex h-[72px] items-center gap-2 rounded-[18px] border border-white/9 bg-[#202020]/95 px-3 text-white/74 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[10px]">
+        <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-2 h-8 w-px bg-white/10" />
+        <button
+          className="flex h-12 w-12 cursor-pointer items-center justify-center rounded-[12px] text-[24px] leading-none text-white/72 transition-colors hover:bg-white/8 hover:text-white"
+          onClick={onZoomOut}
+          type="button"
+        >
+          -
+        </button>
+        <button
+          className="h-12 min-w-[86px] cursor-pointer rounded-[12px] px-2 text-center text-[20px] font-medium tabular-nums leading-[48px] text-white/86 transition-colors hover:bg-white/8"
+          onClick={onCenter}
+          type="button"
+        >
+          {Math.round(zoom * 100)}%
+        </button>
+        <button
+          className="flex h-12 w-12 cursor-pointer items-center justify-center rounded-[12px] text-[28px] leading-none text-white/82 transition-colors hover:bg-white/8 hover:text-white"
+          onClick={onZoomIn}
+          type="button"
+        >
+          +
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ZoomDockButton({
+  active,
+  children,
+  label,
+  onClick,
+  selectedOutline,
+}: {
+  active?: boolean;
+  children: ReactNode;
+  label: string;
+  onClick?: () => void;
+  selectedOutline?: boolean;
+}) {
+  return (
+    <button
+      className={cn(
+        "flex h-12 w-12 cursor-pointer items-center justify-center rounded-[12px] 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]"
+      )}
+      onClick={onClick}
+      title={label}
+      type="button"
     >
-      <button className="flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-white/10" type="button">
-        <GridTilesGlyph />
-      </button>
-      <button className="flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-white/10" type="button">
-        <MapPinGlyph />
-      </button>
-      <button className="flex h-7 w-7 items-center justify-center rounded-lg bg-white/10 transition-colors hover:bg-white/14" type="button">
-        <MagnetGlyph />
-      </button>
-      <button className="flex h-7 w-7 items-center justify-center rounded-lg text-[18px] leading-none transition-colors hover:bg-white/10" onClick={onZoomOut} type="button">
-        -
-      </button>
-      <button className="h-7 min-w-[58px] rounded-lg px-1 text-[13px] leading-normal transition-colors hover:bg-white/10" onClick={onCenter} type="button">
-        {Math.round(zoom * 100)}%
-      </button>
-      <button className="flex h-7 w-7 items-center justify-center rounded-lg text-[18px] leading-none transition-colors hover:bg-white/10" onClick={onZoomIn} type="button">
-        +
-      </button>
+      {children}
+    </button>
+  );
+}
+
+function CanvasOverviewPopover({ nodes, selectedNodeId }: { nodes: CloneNode[]; selectedNodeId: string | null }) {
+  const bounds = 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) };
+  }, [nodes]);
+  const scale = bounds ? Math.min(188 / bounds.width, 112 / bounds.height) : 1;
+
+  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>
     </div>
   );
 }
@@ -3018,29 +3573,6 @@ function LightningGlyph() {
   );
 }
 
-function MemberDealPill({ onAccount, onMember }: { onAccount: () => void; onMember: () => void }) {
-  return (
-    <div className="flex h-10 items-center gap-2 rounded-xl border border-white/8 bg-[#202020] px-3 py-[6px] text-[12px] text-white/76 shadow-[0_12px_30px_rgba(0,0,0,0.28)]">
-      <button className="relative flex cursor-pointer items-center gap-1 rounded-[8px] px-0.5 hover:text-white" onClick={onMember} type="button">
-        <span className="absolute -top-5 left-0 z-10 flex h-4 whitespace-nowrap rounded-md rounded-bl-none bg-[#FAD6A4] px-2 py-0.5 text-center text-[10px] leading-[12px] text-[#0D0D0D]">
-          限时 39 折
-        </span>
-        <DiamondGlyph />
-        <span>
-          会员特惠<span className="font-[800]">39折</span>
-        </span>
-      </button>
-      <button className="flex cursor-pointer items-center gap-1 rounded-[8px] px-0.5 hover:text-white" onClick={onMember} type="button">
-        <LightningGlyph />
-        <span>100</span>
-      </button>
-      <button className="rounded-full" onClick={onAccount} type="button">
-        <img alt="avatar" className="h-7 w-7 rounded-full object-cover" src={TARGET_AVATAR} />
-      </button>
-    </div>
-  );
-}
-
 function AssetGlyph() {
   return (
     <svg aria-hidden="true" className="h-[18px] w-[18px]" fill="none" viewBox="0 0 18 18">
@@ -3169,23 +3701,7 @@ function PresetWorkflowControls({
 
   return (
     <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
-      <PresetFloatingToolbar
-        anchor={anchor}
-        items={[
-          ["节奏匹配", "音频节奏解析接口待接入。"],
-          ["镜头语言", "镜头语言配置接口待接入。"],
-          ["生成音效", "音效生成接口待接入。"],
-          ["下载", "素材下载接口待接入。"],
-        ]}
-      />
-      <PresetComposerPanel
-        anchor={anchor}
-        credit="32"
-        prompt={AUDIO_TO_VIDEO_PROMPT}
-        submitMessage="音频生视频接口待接入。"
-        thumbnailUrl={AUDIO_REFERENCE_IMAGE_URL}
-        title="音频生视频"
-      />
+      <AudioToVideoComposerPanel anchor={anchor} />
     </div>
   );
 }
@@ -3227,7 +3743,10 @@ function CharacterPresetToolbar({
 	        }
 	      >
         <SceneTool active={toolbarMenu === "panorama"} kind="panorama" label="全景" badge="NEW" onClick={() => setToolbarMenu((current) => current === "panorama" ? null : "panorama")} />
-        <SceneTool active={toolbarMenu === "orbit"} kind="orbit" label="多角度" onClick={() => setToolbarMenu((current) => current === "orbit" ? null : "orbit")} />
+        <SceneTool active={false} kind="orbit" label="多角度" onClick={() => {
+          setToolbarMenu(null);
+          onToolAction("orbit");
+        }} />
         <SceneTool active={toolbarMenu === "lighting"} kind="lighting" label="打光" onClick={() => setToolbarMenu((current) => current === "lighting" ? null : "lighting")} />
         <SceneTool active={toolbarMenu === "grid"} kind="grid" label="九宫格" dropdown onClick={() => setToolbarMenu((current) => current === "grid" ? null : "grid")} />
         <SceneTool active={toolbarMenu === "hd"} kind="hd" label="高清" dropdown onClick={() => setToolbarMenu((current) => current === "hd" ? null : "hd")} />
@@ -3260,6 +3779,256 @@ function CharacterPresetToolbar({
   );
 }
 
+function AudioToVideoComposerPanel({ anchor }: { anchor?: PresetControlAnchor }) {
+  return (
+    <div
+      className="pointer-events-auto absolute overflow-visible"
+      style={
+        anchor
+          ? {
+              height: 260,
+              left: anchor.centerX,
+              top: anchor.bottomY + 18,
+              transform: "translateX(-50%)",
+              width: 1216,
+            }
+          : {
+              bottom: 58,
+              height: 260,
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: 1216,
+            }
+      }
+    >
+      <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)]">
+        <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) => (
+            <button
+              className={cn(
+                "h-[38px] rounded-[8px] border border-white/10 px-4 text-[18px] text-white/48",
+                index === 1 && "bg-white/8 text-white"
+              )}
+              key={tab}
+              onClick={() => toast.info(`${tab}模式后端待接入。`)}
+              type="button"
+            >
+              {tab}
+            </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}参数后端待接入。`)}
+              type="button"
+            >
+              <span className="text-[26px] leading-none">{icon}</span>
+              <span>{label}</span>
+            </button>
+          ))}
+          <div className="relative h-[72px] w-[86px] overflow-hidden rounded-[9px]">
+            <img alt="图片参考" className="h-full w-full object-cover" src={AUDIO_REFERENCE_IMAGE_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]">1</span>
+          </div>
+          <div className="relative flex h-[72px] w-[86px] items-center justify-center rounded-[9px] bg-white/12">
+            <Music2 className="h-9 w-9 text-white" />
+            <span className="absolute mt-[-44px] ml-[52px] flex h-5 min-w-5 items-center justify-center rounded-full bg-black/60 px-1 text-[12px]">2</span>
+          </div>
+        </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"
+          defaultValue={AUDIO_TO_VIDEO_PROMPT}
+          placeholder="根据上传的音频生成对应场景画面，镜头语言、节奏、音乐匹配情绪变化，电影级质感。"
+        />
+        <div className="absolute bottom-5 left-5 right-[86px] flex items-center gap-7 overflow-hidden text-[22px] text-white/82">
+          <ComposerControl label="Seedance 2.0" icon="▥" dropdown onClick={() => toast.info("视频模型选择后端待接入。")} />
+          <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 label="文" onClick={() => toast.info("翻译接口待接入。")} />
+          <ComposerControl label="" icon="⌘" onClick={() => toast.info("高级设置后端待接入。")} />
+          <ComposerControl label="1个" dropdown onClick={() => toast.info("生成数量后端待接入。")} />
+          <ComposerControl label="108 / 135" icon="⚡" muted onClick={() => toast.info("积分估算接入本地积分系统。")} />
+        </div>
+        <button
+          className="absolute bottom-5 right-5 flex h-14 w-14 items-center justify-center rounded-[14px] bg-white text-[34px] leading-none text-black hover:bg-white/90"
+          onClick={() => toast.info("音频生视频生成接口待接入。")}
+          type="button"
+        >
+          ↑
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function MultiAngleEditorDialog({
+  node,
+  onApply,
+  onClose,
+}: {
+  node: CloneNode;
+  onApply: (settings: AngleEditorSettings) => void;
+  onClose: () => void;
+}) {
+  const initialSettings = (node.draftValues?.angleSettings || {}) as Partial<AngleEditorSettings>;
+  const [activeTab, setActiveTab] = useState("自定义");
+  const [horizontalAngle, setHorizontalAngle] = useState(Number(initialSettings.horizontalAngle ?? 0));
+  const [verticalAngle, setVerticalAngle] = useState(Number(initialSettings.verticalAngle ?? 0));
+  const [zoom, setZoom] = useState(Number(initialSettings.zoom ?? 50));
+  const [promptEnabled, setPromptEnabled] = useState(Boolean(initialSettings.promptEnabled));
+  const sourceUrl = getNodeMediaUrl(node) || getNodeSourceMediaUrl(node) || CHARACTER_THREE_VIEW_URL;
+  const tabs = ["自定义", "鱼眼视角", "倾斜视角", "正面俯拍", "正面仰拍", "全景俯拍", "背面视角"];
+
+  const reset = () => {
+    setActiveTab("自定义");
+    setHorizontalAngle(0);
+    setVerticalAngle(0);
+    setZoom(50);
+    setPromptEnabled(false);
+  };
+
+  return (
+    <div className="fixed inset-0 z-[130] flex items-center justify-center bg-black/30" data-canvas-overlay="true">
+      <div className="relative h-[768px] w-[1200px] overflow-hidden rounded-[18px] border border-white/10 bg-[#202020] px-8 py-8 text-white shadow-[0_28px_90px_rgba(0,0,0,0.58)]">
+        <div className="flex items-start justify-between">
+          <h2 className="text-[30px] font-semibold tracking-[0] text-white">多角度编辑器</h2>
+          <button
+            className="-mr-2 -mt-2 flex h-12 w-12 cursor-pointer items-center justify-center rounded-[8px] text-white/50 transition hover:bg-white/8 hover:text-white"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="h-9 w-9" strokeWidth={1.7} />
+          </button>
+        </div>
+
+        <div className="mt-8 flex gap-4">
+          {tabs.map((tab) => (
+            <button
+              className={cn(
+                "h-14 min-w-[148px] cursor-pointer rounded-[10px] border border-white/8 px-6 text-[21px] font-medium text-white/45 transition hover:bg-white/8 hover:text-white/80",
+                activeTab === tab && "border-transparent bg-white/14 text-white"
+              )}
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              type="button"
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-6 flex gap-8">
+          <div className="relative flex h-[480px] w-[480px] shrink-0 items-center justify-center overflow-hidden rounded-[18px] bg-[#323232]">
+            <div className="absolute h-[300px] w-[300px] rounded-full border border-white/24" />
+            <div className="absolute h-[300px] w-[300px] rounded-full border border-white/14 [clip-path:ellipse(34%_50%_at_50%_50%)]" />
+            <div className="absolute h-[300px] w-[300px] rounded-full border border-white/14 [clip-path:ellipse(50%_22%_at_50%_50%)]" />
+            <div className="absolute h-[240px] w-[300px] rounded-full border border-white/14" />
+            <div className="absolute h-[165px] w-[300px] rounded-full border border-white/12" />
+            <div className="absolute h-px w-[308px] bg-white/16" />
+            <div className="absolute h-[308px] w-px bg-white/16" />
+            <button className="absolute top-10 text-[32px] text-white/42" onClick={() => setVerticalAngle((value) => Math.min(45, value + 5))} type="button">⌃</button>
+            <button className="absolute bottom-9 text-[32px] text-white/42" onClick={() => setVerticalAngle((value) => Math.max(-45, value - 5))} type="button">⌄</button>
+            <button className="absolute left-10 text-[42px] text-white/42" onClick={() => setHorizontalAngle((value) => Math.max(-180, value - 10))} type="button">‹</button>
+            <button className="absolute right-10 text-[42px] text-white/42" onClick={() => setHorizontalAngle((value) => Math.min(180, value + 10))} type="button">›</button>
+            <div className="relative h-[124px] w-[124px] overflow-hidden rounded-[10px] border border-white/50 bg-white shadow-[0_14px_34px_rgba(0,0,0,0.32)]">
+              <img alt="多角度参考图" className="h-full w-full object-contain" draggable={false} onDragStart={preventNativeImageDrag} src={sourceUrl} />
+            </div>
+          </div>
+
+          <div className="min-w-0 flex-1 pt-4">
+            <AngleSlider label="水平环绕" max={180} min={-180} onChange={setHorizontalAngle} suffix="°" value={horizontalAngle} />
+            <AngleSlider label="垂直俯仰" max={45} min={-45} onChange={setVerticalAngle} suffix="°" value={verticalAngle} />
+            <AngleSlider label="景别缩放" max={100} min={0} onChange={setZoom} value={zoom} valueLabel={zoom < 35 ? "远景" : zoom > 70 ? "近景" : "中景"} />
+            <div className="mt-10 flex items-center gap-8">
+              <span className="w-[120px] text-[26px] text-white/42">提示词</span>
+              <button
+                aria-pressed={promptEnabled}
+                className={cn(
+                  "relative h-[30px] w-[54px] cursor-pointer rounded-full bg-white/14 transition",
+                  promptEnabled && "bg-[#5f78ff]"
+                )}
+                onClick={() => setPromptEnabled((value) => !value)}
+                type="button"
+              >
+                <span
+                  className="absolute top-1 h-[22px] w-[22px] rounded-full bg-white shadow-[0_2px_8px_rgba(0,0,0,0.22)] transition-all"
+                  style={{ left: promptEnabled ? 28 : 4 }}
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <button
+          className="absolute bottom-8 left-14 flex h-12 cursor-pointer items-center gap-3 rounded-[10px] px-2 text-[24px] text-white/38 transition hover:bg-white/8 hover:text-white/70"
+          onClick={reset}
+          type="button"
+        >
+          ↺
+          <span>重置参数</span>
+        </button>
+        <div className="absolute bottom-8 right-8 flex items-center gap-5">
+          <span className="flex items-center gap-2 text-[22px] text-white/56">
+            <span className="text-white/44">⚡</span>
+            1
+          </span>
+          <button
+            className="flex h-[64px] w-[64px] cursor-pointer items-center justify-center rounded-[14px] bg-white text-[42px] leading-none text-black transition hover:bg-white/90"
+            onClick={() => onApply({ horizontalAngle, promptEnabled, verticalAngle, zoom })}
+            type="button"
+          >
+            ↑
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AngleSlider({
+  label,
+  max,
+  min,
+  onChange,
+  suffix = "",
+  value,
+  valueLabel,
+}: {
+  label: string;
+  max: number;
+  min: number;
+  onChange: (value: number) => void;
+  suffix?: string;
+  value: number;
+  valueLabel?: string;
+}) {
+  return (
+    <div className="mb-10 grid grid-cols-[128px_1fr_86px] items-center gap-6">
+      <span className="text-[26px] text-white/42">{label}</span>
+      <input
+        className="h-[4px] w-full accent-white"
+        max={max}
+        min={min}
+        onChange={(event) => onChange(Number(event.target.value))}
+        type="range"
+        value={value}
+      />
+      <span className="text-right text-[26px] text-white/82">{valueLabel || `${Math.round(value)}${suffix}`}</span>
+    </div>
+  );
+}
+
 function ImageToolbarActionGlyph({ action }: { action: Extract<ImageToolbarAction, "annotate" | "rotate" | "download" | "preview"> }) {
   if (action === "annotate") {
     return (
@@ -3557,37 +4326,13 @@ function VideoResultPanel({ label }: { label: string }) {
 
 function AudioResourcePanel() {
   return (
-    <div className="w-[430px]">
+    <div className="w-[720px]">
       <div className="mb-2 flex items-center gap-1 text-[20px] font-semibold text-white/50">
         <Music2 className="h-5 w-5" />
         音频
       </div>
-      <div className="rounded-[10px] border border-white/12 bg-[#f4f5f7] p-4 text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]">
-        <div className="flex items-center gap-4">
-          <button
-            className="flex h-12 w-12 items-center justify-center rounded-full bg-[#111] text-white"
-            onClick={() => toast.info("音频播放控制待接入。")}
-            type="button"
-          >
-            ▶
-          </button>
-          <div className="min-w-0 flex-1">
-            <div className="truncate text-[14px] font-semibold">情绪配乐.mp3</div>
-            <div className="mt-1 text-[12px] text-[#697080]">音频生视频参考素材</div>
-          </div>
-          <a className="rounded-[8px] px-2 py-1 text-[12px] text-[#4f5cff] hover:bg-black/5" href={AUDIO_SOURCE_URL} rel="noreferrer" target="_blank">
-            试听
-          </a>
-        </div>
-        <div className="mt-4 flex h-12 items-end gap-1">
-          {Array.from({ length: 38 }).map((_, index) => (
-            <span
-              className="flex-1 rounded-full bg-[#7b86ff]"
-              key={index}
-              style={{ height: `${18 + ((index * 17) % 28)}px`, opacity: 0.34 + ((index % 5) * 0.12) }}
-            />
-          ))}
-        </div>
+      <div className="h-[158px]">
+        <OfficialAudioCard mediaUrl={AUDIO_SOURCE_URL} selected={false} />
       </div>
     </div>
   );
@@ -3853,13 +4598,13 @@ function SceneToolbarPopover({
   if (menu === "grid") {
     return (
       <div
-        className="pointer-events-auto absolute z-40 flex w-[180px] -translate-x-1/2 flex-col p-1.5 font-sans"
+        className="pointer-events-auto absolute z-40 flex w-[360px] -translate-x-1/2 flex-col p-3 font-sans"
         role="menu"
         style={{ ...officialPopoverStyle, ...popoverSurfaceStyle }}
       >
         {nineGridOptions.map((option) => (
           <button
-            className="flex w-full cursor-pointer items-center gap-3 rounded-[8px] px-2 py-2.5 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12"
+            className="flex h-[70px] w-full cursor-pointer items-center gap-7 rounded-[10px] px-5 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12"
             key={option}
             onClick={() => onSelect?.(option)}
             onPointerDown={(event) => event.stopPropagation()}
@@ -3867,7 +4612,7 @@ function SceneToolbarPopover({
             type="button"
           >
             <NineGridPresetGlyph />
-            <span className="min-w-0 flex-1 truncate text-[14px] font-normal leading-snug text-white/86">
+            <span className="min-w-0 flex-1 truncate text-[25px] font-normal leading-snug text-white/86">
               {option}
             </span>
           </button>
@@ -3879,14 +4624,14 @@ function SceneToolbarPopover({
   if (menu === "hd") {
     return (
       <div
-        className="pointer-events-auto absolute z-40 flex w-[120px] -translate-x-1/2 flex-col gap-1 p-1 font-sans"
+        className="pointer-events-auto absolute z-40 flex w-[240px] -translate-x-1/2 flex-col gap-1.5 p-2 font-sans"
         role="menu"
         style={{ ...officialPopoverStyle, ...popoverSurfaceStyle }}
       >
         {hdToolOptions.map((option) => (
           <button
             className={cn(
-              "flex h-8 w-full shrink-0 items-center gap-2 rounded-[8px] px-2 text-left text-[13px] font-normal leading-snug text-white/86 transition-colors",
+              "flex h-[56px] w-full shrink-0 items-center gap-5 rounded-[10px] px-4 text-left text-[25px] font-normal leading-snug text-white/86 transition-colors",
               option.active ? "bg-white/16" : "hover:bg-white/8 active:bg-white/12"
             )}
             key={option.key}
@@ -3906,37 +4651,37 @@ function SceneToolbarPopover({
   if (menu === "crop") {
     return (
       <div
-        className="pointer-events-auto absolute z-40 flex w-[150px] -translate-x-1/2 flex-col p-1.5 font-sans"
+        className="pointer-events-auto absolute z-40 flex w-[300px] -translate-x-1/2 flex-col p-3 font-sans"
         role="menu"
         style={{ ...officialPopoverStyle, ...popoverSurfaceStyle }}
       >
         {cropOptions.map((option) => (
           <button
-            className="flex w-full cursor-pointer items-center rounded-[8px] px-3 py-2.5 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12"
+            className="flex h-[70px] w-full cursor-pointer items-center rounded-[10px] px-5 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12"
             key={option.type}
             onClick={() => onSelect?.(option.label)}
             onPointerDown={(event) => event.stopPropagation()}
             role="menuitem"
             type="button"
           >
-            <span className="min-w-0 truncate text-[14px] font-normal leading-snug text-white/86">
+            <span className="min-w-0 truncate text-[25px] font-normal leading-snug text-white/86">
               {option.label}
             </span>
           </button>
         ))}
-        <div className="mx-2 my-0.5 h-px bg-white/12" />
+        <div className="mx-4 my-2 h-px bg-white/12" />
         <div onMouseEnter={() => setCustomGridOpen(true)} onMouseLeave={() => setCustomGridOpen(false)}>
           <button
             className={cn(
-              "flex w-full cursor-pointer items-center justify-between rounded-[8px] px-3 py-2.5 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12",
+              "flex h-[70px] w-full cursor-pointer items-center justify-between rounded-[10px] px-5 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12",
               customGridOpen && "bg-white/8"
             )}
             onPointerDown={(event) => event.stopPropagation()}
             role="menuitem"
             type="button"
           >
-            <span className="min-w-0 truncate text-[14px] font-normal leading-snug text-white/86">自定义</span>
-            <ChevronDown className="h-3 w-3 shrink-0 -rotate-90 text-white/60" />
+            <span className="min-w-0 truncate text-[25px] font-normal leading-snug text-white/86">自定义</span>
+            <ChevronDown className="h-5 w-5 shrink-0 -rotate-90 text-white/60" />
           </button>
           {customGridOpen ? (
             <div
@@ -3975,7 +4720,7 @@ function SceneToolbarPopover({
 
 function NineGridPresetGlyph() {
   return (
-    <svg aria-hidden="true" className="h-5 w-5 shrink-0 text-white/46" fill="none" viewBox="0 0 20 20">
+    <svg aria-hidden="true" className="h-8 w-8 shrink-0 text-white/46" fill="none" viewBox="0 0 20 20">
       <path d="M3 7.2 10 3.4l7 3.8-7 3.8-7-3.8Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.5" />
       <path d="m3 10.2 7 3.8 7-3.8M3 13.2l7 3.8 7-3.8" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
     </svg>
@@ -3985,7 +4730,7 @@ function NineGridPresetGlyph() {
 function ImageToolMenuGlyph({ tool }: { tool: string }) {
   if (tool === "upscale") {
     return (
-      <span className="flex h-[14px] min-w-[21px] items-center justify-center rounded-[3px] border border-white/34 text-[9px] font-bold leading-none text-white/46">
+      <span className="flex h-[24px] min-w-[36px] items-center justify-center rounded-[4px] border border-white/34 text-[14px] font-bold leading-none text-white/46">
         HD
       </span>
     );
@@ -3993,7 +4738,7 @@ function ImageToolMenuGlyph({ tool }: { tool: string }) {
 
   if (tool === "outpaint") {
     return (
-      <svg aria-hidden="true" className="h-[14px] w-[14px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
+      <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
         <path d="M1.8 5V1.8H5M9 1.8h3.2V5M12.2 9v3.2H9M5 12.2H1.8V9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.4" />
       </svg>
     );
@@ -4001,7 +4746,7 @@ function ImageToolMenuGlyph({ tool }: { tool: string }) {
 
   if (tool === "repaint") {
     return (
-      <svg aria-hidden="true" className="h-[14px] w-[14px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
+      <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
         <path d="M3 10.8 10.8 3l1.2 1.2-7.8 7.8H3v-1.2Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.3" />
       </svg>
     );
@@ -4009,7 +4754,7 @@ function ImageToolMenuGlyph({ tool }: { tool: string }) {
 
   if (tool === "erase") {
     return (
-      <svg aria-hidden="true" className="h-[14px] w-[14px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
+      <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
         <path d="m2.5 8.5 5.8-5.8 3 3-5.8 5.8H3.2L2.5 8.5Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.3" />
         <path d="M6.2 11.5h5" stroke="currentColor" strokeLinecap="round" strokeWidth="1.3" />
       </svg>
@@ -4018,7 +4763,7 @@ function ImageToolMenuGlyph({ tool }: { tool: string }) {
 
   if (tool === "removeBg") {
     return (
-      <svg aria-hidden="true" className="h-[14px] w-[14px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
+      <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
         <path d="M2 2h10v10H2V2Z" stroke="currentColor" strokeWidth="1.2" />
         <path d="M2 12 12 2M2 8l6-6M6 12l6-6" stroke="currentColor" strokeWidth="1.1" />
       </svg>
@@ -4026,7 +4771,7 @@ function ImageToolMenuGlyph({ tool }: { tool: string }) {
   }
 
   return (
-    <svg aria-hidden="true" className="h-[14px] w-[14px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
+    <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
       <path d="M4 1.8v8.2h8.2M1.8 4h8.2v8.2" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.3" />
     </svg>
   );
@@ -4742,21 +5487,6 @@ function CloneEdges({ edges, nodes }: { edges: CloneEdge[]; nodes: CloneNode[] }
   const nodeMap = new Map(nodes.map((node) => [node.id, node]));
   return (
     <svg className="pointer-events-none absolute left-0 top-0 overflow-visible" style={{ height: CANVAS_EXTENT, width: CANVAS_EXTENT }}>
-      <defs>
-        <linearGradient id="libtv-edge-flow" x1="0%" x2="100%" y1="0%" y2="0%">
-          <stop offset="0%" stopColor="#34a7ff" stopOpacity="0" />
-          <stop offset="36%" stopColor="#39adff" stopOpacity="0.95" />
-          <stop offset="68%" stopColor="#73c9ff" stopOpacity="1" />
-          <stop offset="100%" stopColor="#b9ecff" stopOpacity="0" />
-        </linearGradient>
-        <filter colorInterpolationFilters="sRGB" height="240%" id="libtv-edge-glow" width="240%" x="-70%" y="-70%">
-          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="3" />
-          <feMerge>
-            <feMergeNode in="blur" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
       {edges.map((edge) => {
         const source = nodeMap.get(edge.source);
         const target = nodeMap.get(edge.target);
@@ -4765,38 +5495,20 @@ function CloneEdges({ edges, nodes }: { edges: CloneEdge[]; nodes: CloneNode[] }
         const startY = source.y + source.height / 2;
         const endX = target.x;
         const endY = target.y + target.height / 2;
-        const curve = Math.max(90, Math.abs(endX - startX) * 0.42);
+        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}>
             <path
               d={path}
               fill="none"
-              stroke="#ffffff"
+              stroke="#86909c"
               strokeLinecap="round"
-              strokeOpacity="0.62"
-              strokeWidth="2.6"
+              strokeOpacity="0.98"
+              strokeWidth="2"
             />
-            <path
-              d={path}
-              fill="none"
-              filter="url(#libtv-edge-glow)"
-              stroke="#2f9fff"
-              strokeLinecap="round"
-              strokeOpacity="0.34"
-              strokeWidth="5.4"
-            />
-            <path
-              d={path}
-              fill="none"
-              filter="url(#libtv-edge-glow)"
-              stroke="url(#libtv-edge-flow)"
-              strokeDasharray="42 190"
-              strokeLinecap="round"
-              strokeWidth="4.2"
-            >
-              <animate attributeName="stroke-dashoffset" dur="1.55s" from="0" repeatCount="indefinite" to="-232" />
-            </path>
+            <EdgeFlowSegments pathD={path} uniqueId={edge.id} visible />
           </g>
         );
       })}
@@ -4804,6 +5516,171 @@ function CloneEdges({ edges, nodes }: { edges: CloneEdge[]; nodes: CloneNode[] }
   );
 }
 
+type EdgePoint = { x: number; y: number };
+
+function getPointAtSampledLength(points: EdgePoint[], totalLength: number, length: number): EdgePoint {
+  const safeLength = Math.max(0, Math.min(totalLength, length));
+  const index = (points.length - 1) * Math.max(0, Math.min(1, safeLength / totalLength));
+  const leftIndex = Math.floor(index);
+  const ratio = index - leftIndex;
+  if (leftIndex >= points.length - 1) return points[points.length - 1];
+  const left = points[leftIndex];
+  const right = points[leftIndex + 1];
+  return {
+    x: left.x + ratio * (right.x - left.x),
+    y: left.y + ratio * (right.y - left.y),
+  };
+}
+
+function parseSimpleEdgePath(pathD: string): { points: EdgePoint[]; totalLength: number } | null {
+  const line = pathD.match(/M\s*([\d.eE+-]+)\s*[, ]\s*([\d.eE+-]+)\s*L\s*([\d.eE+-]+)\s*[, ]\s*([\d.eE+-]+)/i);
+  const cubic = pathD.match(/M\s*([\d.eE+-]+)\s*[, ]\s*([\d.eE+-]+)\s*C\s*[\d.eE+-]+\s*[, ]\s*[\d.eE+-]+\s+[\d.eE+-]+\s*[, ]\s*[\d.eE+-]+\s+([\d.eE+-]+)\s*[, ]\s*([\d.eE+-]+)/i);
+  const match = line || cubic;
+  if (!match) return null;
+  const x1 = Number.parseFloat(match[1]);
+  const y1 = Number.parseFloat(match[2]);
+  const x2 = Number.parseFloat(match[3]);
+  const y2 = Number.parseFloat(match[4]);
+  const totalLength = Math.hypot(x2 - x1, y2 - y1);
+  if (totalLength <= 0) return null;
+  const points = Array.from({ length: 81 }, (_, index) => {
+    const ratio = index / 80;
+    return { x: x1 + ratio * (x2 - x1), y: y1 + ratio * (y2 - y1) };
+  });
+  return { points, totalLength };
+}
+
+function sampleEdgePath(pathD: string): { points: EdgePoint[]; totalLength: number } | null {
+  if (typeof document === "undefined") return null;
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", pathD);
+  try {
+    const totalLength = path.getTotalLength();
+    if (totalLength <= 0.5) return parseSimpleEdgePath(pathD);
+    const points = Array.from({ length: 81 }, (_, index) => {
+      const point = path.getPointAtLength((index / 80) * totalLength);
+      return { x: point.x, y: point.y };
+    });
+    return { points, totalLength };
+  } catch {
+    return parseSimpleEdgePath(pathD);
+  }
+}
+
+function EdgeFlowSegments({
+  glowScale = 1,
+  pathD,
+  strokeWidth = 4,
+  uniqueId,
+  visible,
+}: {
+  glowScale?: number;
+  pathD: string;
+  strokeWidth?: number;
+  uniqueId: string;
+  visible?: boolean;
+}) {
+  const [progress, setProgress] = useState(0);
+  const sampledPath = useMemo(() => sampleEdgePath(pathD), [pathD]);
+  const safeId = useMemo(() => `libtv-edge-flow-${uniqueId.replace(/[^a-zA-Z0-9_-]/g, "-")}`, [uniqueId]);
+  const bounds = useMemo(() => {
+    const points = sampledPath?.points || [];
+    if (points.length === 0) return { height: 100, width: 100, x: 0, y: 0 };
+    const padding = 20 * glowScale;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    points.forEach((point) => {
+      minX = Math.min(minX, point.x);
+      minY = Math.min(minY, point.y);
+      maxX = Math.max(maxX, point.x);
+      maxY = Math.max(maxY, point.y);
+    });
+    return {
+      height: maxY - minY + padding * 2,
+      width: maxX - minX + padding * 2,
+      x: minX - padding,
+      y: minY - padding,
+    };
+  }, [glowScale, sampledPath?.points]);
+
+  useEffect(() => {
+    if (!visible || !sampledPath) return;
+    let frame = 0;
+    const start = performance.now();
+    const tick = () => {
+      setProgress(((performance.now() - start) / 3000) % 1);
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [sampledPath, visible]);
+
+  if (!visible || !sampledPath) return null;
+
+  const { points, totalLength } = sampledPath;
+  const segmentLength = Math.max(0.12 * totalLength, 2);
+  const filterId = `${safeId}-filter`;
+
+  return (
+    <g className="edge-flow-segments" style={{ pointerEvents: "none" }}>
+      <defs>
+        <filter
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+          height={bounds.height}
+          id={filterId}
+          width={bounds.width}
+          x={bounds.x}
+          y={bounds.y}
+        >
+          <feGaussianBlur in="SourceGraphic" result="blurOuter" stdDeviation={4 * glowScale} />
+          <feFlood floodColor="rgba(100, 180, 255, 0.45)" result="floodOuter" />
+          <feComposite in="blurOuter" in2="floodOuter" operator="in" result="glowOuter" />
+          <feGaussianBlur in="SourceGraphic" result="blurInner" stdDeviation={1.5 * glowScale} />
+          <feFlood floodColor="rgba(150, 210, 255, 0.7)" result="floodInner" />
+          <feComposite in="blurInner" in2="floodInner" operator="in" result="glowInner" />
+          <feMerge>
+            <feMergeNode in="glowOuter" />
+            <feMergeNode in="glowInner" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      {Array.from({ length: 3 }, (_, index) => {
+        const startLength = ((progress + index / 3) % 1) * totalLength;
+        const start = getPointAtSampledLength(points, totalLength, startLength);
+        const end = getPointAtSampledLength(points, totalLength, startLength + segmentLength);
+        const segmentPath = Array.from({ length: 13 }, (__, segmentIndex) => {
+          const point = getPointAtSampledLength(points, totalLength, startLength + (segmentLength * segmentIndex) / 12);
+          return segmentIndex === 0 ? `M ${point.x},${point.y}` : `L ${point.x},${point.y}`;
+        }).join(" ");
+        const gradientId = `${safeId}-grad-${index}`;
+        return (
+          <g key={index}>
+            <defs>
+              <linearGradient gradientUnits="userSpaceOnUse" id={gradientId} x1={start.x} x2={end.x} y1={start.y} y2={end.y}>
+                <stop offset="0%" stopColor="rgba(100, 180, 255, 0)" />
+                <stop offset="100%" stopColor="rgba(100, 180, 255, 0.9)" />
+              </linearGradient>
+            </defs>
+            <path
+              d={segmentPath}
+              fill="none"
+              filter={`url(#${filterId})`}
+              stroke={`url(#${gradientId})`}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={strokeWidth}
+            />
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
 function CloneCanvasNode({
   node,
   onContextMenu,
@@ -5040,6 +5917,180 @@ function ModuleActionIcon({ icon }: { icon: LucideIcon | "hd" }) {
   return <Icon className="h-[18px] w-[18px] shrink-0 text-white/86" strokeWidth={2} />;
 }
 
+function normalizeGridCellVisual(value: unknown): GridCellVisual {
+  const record = value && typeof value === "object" ? (value as Record<string, unknown>) : {};
+  const fit = record.fit === "contain" ? "contain" : "cover";
+  return {
+    fit,
+    objectPosition: typeof record.objectPosition === "string" ? record.objectPosition : "50% 50%",
+    scale: Number.isFinite(Number(record.scale)) ? Number(record.scale) : 1,
+    translateX: Number.isFinite(Number(record.translateX)) ? Number(record.translateX) : 0,
+    translateY: Number.isFinite(Number(record.translateY)) ? Number(record.translateY) : 0,
+  };
+}
+
+function normalizeGridCropTile(value: unknown) {
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  const rows = Math.max(1, Math.round(Number(record.rows || 1)));
+  const columns = Math.max(1, Math.round(Number(record.columns || 1)));
+  const index = Math.max(0, Math.round(Number(record.index || 0)));
+  const rawRect = record.rect && typeof record.rect === "object" ? (record.rect as Record<string, unknown>) : null;
+  const fallbackRect = createEqualGridRects(rows, columns)[index] || createEqualGridRects(rows, columns)[0];
+  const rect: GridCropRect = rawRect
+    ? {
+        height: Math.min(1, Math.max(0.02, Number(rawRect.height ?? fallbackRect.height))),
+        width: Math.min(1, Math.max(0.02, Number(rawRect.width ?? fallbackRect.width))),
+        x: Math.min(0.98, Math.max(0, Number(rawRect.x ?? fallbackRect.x))),
+        y: Math.min(0.98, Math.max(0, Number(rawRect.y ?? fallbackRect.y))),
+      }
+    : fallbackRect;
+
+  return {
+    columns,
+    detectedDivider: Boolean(record.detectedDivider),
+    index,
+    rect,
+    rows,
+    sourceMode: String(record.sourceMode || ""),
+  };
+}
+
+function GridCellImage({
+  alt,
+  src,
+  visual,
+}: {
+  alt: string;
+  src: string;
+  visual: GridCellVisual;
+}) {
+  const normalized = normalizeGridCellVisual(visual);
+  return (
+    <img
+      alt={alt}
+      className="pointer-events-none h-full w-full"
+      draggable={false}
+      onDragStart={preventNativeImageDrag}
+      src={src}
+      style={{
+        objectFit: normalized.fit,
+        objectPosition: normalized.objectPosition,
+        transform: `scale(${normalized.scale}) translate(${normalized.translateX}%, ${normalized.translateY}%)`,
+      }}
+    />
+  );
+}
+
+function NineGridCompositePreview({ node, sourceUrl }: { node: CloneNode; sourceUrl: string }) {
+  const rows = Math.max(1, Math.round(Number(node.draftValues?.gridRows || 3)));
+  const columns = Math.max(1, Math.round(Number(node.draftValues?.gridColumns || 3)));
+  const cellCount = rows * columns;
+  const visuals = Array.isArray(node.draftValues?.nineGridCells)
+    ? (node.draftValues?.nineGridCells as GridCellVisual[])
+    : [];
+
+  return (
+    <div
+      className="absolute inset-0 grid bg-[#161616]"
+      style={{
+        gap: 1.5,
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+      }}
+    >
+      {Array.from({ length: cellCount }).map((_, index) => (
+        <div className="relative overflow-hidden bg-white" key={`${node.id}-grid-cell-${index}`}>
+          {sourceUrl ? (
+            <GridCellImage
+              alt={`${node.title} ${index + 1}`}
+              src={sourceUrl}
+              visual={visuals[index] || getGridCellVisual(index)}
+            />
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CroppedGridTileImage({
+  alt,
+  cropTile,
+  rotation,
+  src,
+}: {
+  alt: string;
+  cropTile: NonNullable<ReturnType<typeof normalizeGridCropTile>>;
+  rotation: number;
+  src: string;
+}) {
+  const { rect } = cropTile;
+  return (
+    <div className="absolute inset-0 overflow-hidden bg-white" style={{ transform: `rotate(${rotation}deg)` }}>
+      <img
+        alt={alt}
+        className="pointer-events-none absolute max-w-none"
+        draggable={false}
+        onDragStart={preventNativeImageDrag}
+        src={src}
+        style={{
+          height: `${100 / rect.height}%`,
+          left: `${-(rect.x / rect.width) * 100}%`,
+          objectFit: "fill",
+          top: `${-(rect.y / rect.height) * 100}%`,
+          width: `${100 / rect.width}%`,
+        }}
+      />
+    </div>
+  );
+}
+
+function OfficialAudioCard({ mediaUrl, selected }: { mediaUrl: string; selected: boolean }) {
+  return (
+    <div
+      className={cn(
+        "relative h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/12 bg-[#f5f6f9] text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
+        selected && "outline outline-2 outline-white/70"
+      )}
+    >
+      <div className="absolute left-3 right-3 top-3 h-[74px] overflow-hidden rounded-[8px] bg-[#343434]">
+        <span className="absolute left-0 top-0 h-full w-[3px] bg-[#f23a52]" />
+        <div className="absolute bottom-3 left-4 right-4 flex h-[42px] items-end gap-[5px]">
+          {Array.from({ length: 34 }).map((_, index) => (
+            <span
+              className="w-[4px] rounded-full bg-white/24"
+              key={index}
+              style={{ height: `${12 + ((index * 13) % 30)}px` }}
+            />
+          ))}
+        </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>
+      </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"
+        onClick={() => toast.info("音频播放控制待接入。")}
+        type="button"
+      >
+        <Play className="ml-0.5 h-4 w-4 fill-current" strokeWidth={0} />
+      </button>
+      {mediaUrl ? (
+        <a
+          className="absolute right-3 top-4 flex h-7 w-7 items-center justify-center rounded-[6px] bg-black/18 text-[14px] text-white/78 hover:bg-black/28"
+          href={mediaUrl}
+          onPointerDown={(event) => event.stopPropagation()}
+          rel="noreferrer"
+          target="_blank"
+        >
+          ↥
+        </a>
+      ) : null}
+    </div>
+  );
+}
+
 function CanvasNodeShell({
   children,
   node,
@@ -5120,52 +6171,31 @@ function CanvasNodeShell({
 function PresetMediaCanvasNode({ node, selected }: { node: CloneNode; selected: boolean }) {
   const mediaType = getDraftString(node, "mediaType") || node.inputType || "image";
   const mediaUrl = getNodeMediaUrl(node);
+  const sourceUrl = getNodeSourceMediaUrl(node);
   const generated = Boolean(node.draftValues?.generated);
   const annotationMode = Boolean(node.draftValues?.annotationMode);
   const rotation = Number(node.draftValues?.rotation || 0);
+  const outputSizeLabel = getDraftString(node, "outputSizeLabel");
+  const isNineGridComposite = Boolean(node.draftValues?.nineGridComposite);
+  const cropTile = normalizeGridCropTile(node.draftValues?.cropTile);
+  const gridCellVisual = node.draftValues?.gridCellVisual
+    ? normalizeGridCellVisual(node.draftValues?.gridCellVisual)
+    : null;
   const Icon = mediaType === "audio" ? Music2 : mediaType === "video" ? Video : ImageIcon;
 
   return (
     <div className="h-full w-full">
-      <div className="mb-2 flex h-6 items-center gap-1 text-[20px] font-semibold text-white/50">
-        <Icon className="h-5 w-5" />
-        {node.title}
+      <div className="mb-2 flex h-6 items-center justify-between gap-3 text-[20px] font-semibold text-white/50">
+        <span className="flex min-w-0 items-center gap-1">
+          <Icon className="h-5 w-5 shrink-0" />
+          <span className="truncate">{node.title}</span>
+        </span>
+        {outputSizeLabel ? (
+          <span className="shrink-0 text-[14px] font-medium text-white/34">{outputSizeLabel}</span>
+        ) : null}
       </div>
       {mediaType === "audio" ? (
-        <div
-          className={cn(
-            "h-[calc(100%-32px)] rounded-[10px] border border-white/12 bg-[#f4f5f7] p-4 text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
-            selected && "outline outline-2 outline-[#8b96ff]"
-          )}
-        >
-          <div className="flex items-center gap-4">
-            <button
-              className="flex h-12 w-12 items-center justify-center rounded-full bg-[#111] text-white"
-              onClick={() => toast.info("音频播放控制待接入。")}
-              type="button"
-            >
-              ▶
-            </button>
-            <div className="min-w-0 flex-1">
-              <div className="truncate text-[14px] font-semibold">情绪配乐.mp3</div>
-              <div className="mt-1 text-[12px] text-[#697080]">音频生视频参考素材</div>
-            </div>
-            {mediaUrl ? (
-              <a className="rounded-[8px] px-2 py-1 text-[12px] text-[#4f5cff] hover:bg-black/5" href={mediaUrl} rel="noreferrer" target="_blank">
-                试听
-              </a>
-            ) : null}
-          </div>
-          <div className="mt-4 flex h-12 items-end gap-1">
-            {Array.from({ length: 38 }).map((_, index) => (
-              <span
-                className="flex-1 rounded-full bg-[#7b86ff]"
-                key={index}
-                style={{ height: `${18 + ((index * 17) % 28)}px`, opacity: 0.34 + ((index % 5) * 0.12) }}
-              />
-            ))}
-          </div>
-        </div>
+        <OfficialAudioCard mediaUrl={mediaUrl} selected={selected} />
       ) : mediaType === "video" ? (
         <div
           className={cn(
@@ -5200,7 +6230,13 @@ function PresetMediaCanvasNode({ node, selected }: { node: CloneNode; selected:
             selected && "outline outline-2 outline-[#8b96ff]"
           )}
         >
-          {mediaUrl ? (
+          {isNineGridComposite ? (
+            <NineGridCompositePreview node={node} sourceUrl={sourceUrl || mediaUrl} />
+          ) : cropTile && mediaUrl && gridCellVisual ? (
+            <GridCellImage alt={node.title} src={mediaUrl} visual={gridCellVisual} />
+          ) : cropTile && mediaUrl ? (
+            <CroppedGridTileImage alt={node.title} cropTile={cropTile} rotation={rotation} src={mediaUrl} />
+          ) : mediaUrl ? (
             <img
               alt={node.title}
               className={cn("pointer-events-none h-full w-full", node.title === "角色三视图" ? "object-contain" : "object-cover")}
@@ -5438,38 +6474,56 @@ function WorkflowPanel({
   onClose: () => void;
   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}`,
+      }));
+
   return (
     <section
-      className="absolute left-[88px] top-[110px] z-50 flex h-[min(720px,calc(100vh-140px))] w-[420px] flex-col overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] shadow-[0_28px_90px_rgba(0,0,0,0.48)]"
+      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)]"
       data-canvas-overlay="true"
     >
-      <div className="flex items-center justify-between border-white/8 border-b p-4">
-        <div>
-          <div className="font-semibold text-[16px]">工作流</div>
-          <div className="mt-1 text-[12px] text-white/42">{workflows.length} 个预设</div>
+      <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-4 w-4" />
+          <X className="h-9 w-9" strokeWidth={1.6} />
         </button>
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto p-3">
-        <div className="grid gap-3">
-          {workflows.map((workflow, index) => (
+      <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) => (
             <button
-              className="group overflow-hidden rounded-[8px] border border-white/8 bg-[#2a2a2a] text-left hover:border-white/18 hover:bg-[#323232]"
+              className="group text-left"
               key={`${workflow.id || ""}-${workflow.uuid || workflow.name}`}
               onClick={() => onAdd(workflow, index)}
               type="button"
             >
-              {workflow.cover ? (
-                <div
-                  className="h-24 bg-cover bg-center"
-                  style={{ backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0.74), rgba(0,0,0,0.18)), url(${workflow.cover})` }}
-                />
-              ) : null}
-              <div className="p-3">
-                <div className="font-medium text-white">{workflow.name || workflow.title || "未命名"}</div>
-                <div className="mt-1 line-clamp-2 text-[12px] text-white/46">{workflow.description || "LibTV workflow"}</div>
+              <div className="relative h-[282px] overflow-hidden rounded-[8px] bg-[#2a2a2a]">
+                {workflow.cover ? (
+                  <img
+                    alt=""
+                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.025]"
+                    src={workflow.cover}
+                  />
+                ) : (
+                  <div className="flex h-full items-center justify-center bg-white/6 text-white/24">
+                    <WorkflowGlyph />
+                  </div>
+                )}
+                <span className="absolute inset-0 bg-black/0 transition group-hover:bg-black/8" />
+              </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>
             </button>
           ))}
@@ -5742,7 +6796,7 @@ function SkillsAccessPanel() {
         <div className="flex items-center justify-between">
           <div>
             <div className="font-semibold text-[15px] text-white">OpenAPI Access Key</div>
-            <div className="mt-1 text-[12px] text-white/42">用于 LibTV Skills 调用、模型能力和自动化任务。</div>
+            <div className="mt-1 text-[12px] text-white/42">用于接口调用、模型能力和自动化任务。</div>
           </div>
           <button
             className="h-9 rounded-[8px] bg-white px-3 text-[12px] font-semibold text-black hover:bg-white/90"
@@ -5785,10 +6839,10 @@ function SkillsAccessModal({ onClose }: { onClose: () => void }) {
                 · 安装使用请戳
                 <button
                   className="ml-1 text-[#2f8bff] underline-offset-2 hover:underline"
-                  onClick={() => toast.info("LibTV Skills 文档入口待接入。")}
+                  onClick={() => toast.info("接口文档入口待接入。")}
                   type="button"
                 >
-                  LibTV Skills
+                  接口文档
                 </button>
               </p>
             </div>
@@ -5877,7 +6931,7 @@ function MemberStoreModal({ onClose }: { onClose: () => void }) {
 
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/62 backdrop-blur-[3px]" data-canvas-overlay="true">
-      <button aria-label="关闭会员超市" className="absolute inset-0 cursor-default" onClick={onClose} type="button" />
+      <button aria-label="关闭积分中心" className="absolute inset-0 cursor-default" onClick={onClose} type="button" />
       <div className="relative flex max-h-[86dvh] w-[980px] max-w-[calc(100vw-32px)] overflow-hidden rounded-[16px] border border-white/12 bg-[#1f1f1f] text-white shadow-[0_30px_100px_rgba(0,0,0,0.62)]">
         <div className="w-[244px] shrink-0 border-white/8 border-r bg-[#171717] p-5">
           <div className="flex items-center gap-2">
@@ -5885,13 +6939,13 @@ function MemberStoreModal({ onClose }: { onClose: () => void }) {
               <StoreGlyph />
             </span>
             <div>
-              <div className="text-[18px] font-semibold">会员超市</div>
-              <div className="mt-0.5 text-[12px] text-white/42">超低价会员超市</div>
+              <div className="text-[18px] font-semibold">积分中心</div>
+              <div className="mt-0.5 text-[12px] text-white/42">积分套餐与模型资源</div>
             </div>
           </div>
           <div className="mt-5 rounded-[12px] border border-[#ffc65d]/20 bg-[#2a2418] p-3">
-            <div className="text-[12px] text-[#fad6a4]">限时 39 折</div>
-            <div className="mt-1 text-[22px] font-bold leading-tight">会员特惠39折</div>
+            <div className="text-[12px] text-[#fad6a4]">积分余额</div>
+            <div className="mt-1 text-[22px] font-bold leading-tight">可用积分套餐</div>
             <div className="mt-2 text-[12px] leading-5 text-white/52">会员专属模型超市，顶级模型囤货必选。</div>
           </div>
           <div className="mt-4 space-y-1">
@@ -6098,7 +7152,7 @@ function NotificationsPopover({ onClose }: { onClose: () => void }) {
           {[
             ["生成任务", "任务状态、进度轮询和失败原因接口待接入。"],
             ["系统通知", "审核、账户和平台消息接口待接入。"],
-            ["会员活动", "限时 39 折，会员超市模型积分卡活动待接入。"],
+            ["积分提醒", "积分套餐与模型资源入口待接入。"],
           ].map(([title, description]) => (
             <button
               className="mb-2 w-full rounded-[10px] border border-white/8 bg-white/5 p-3 text-left hover:bg-white/8"
@@ -6117,6 +7171,9 @@ function NotificationsPopover({ onClose }: { onClose: () => void }) {
 }
 
 function AccountPopover({ onClose }: { onClose: () => void }) {
+  const { data: membershipSummary } = useSWR<MembershipSummaryResponse>("/api/user/membership-summary", fetcher);
+  const credits = formatCreditValue(Math.max(0, Number(membershipSummary?.summary?.currentCredits ?? 0)));
+
   return (
     <div className="fixed inset-0 z-[70]" data-canvas-overlay="true">
       <button aria-label="关闭账号菜单" className="absolute inset-0 cursor-default bg-transparent" onClick={onClose} type="button" />
@@ -6165,7 +7222,7 @@ function AccountPopover({ onClose }: { onClose: () => void }) {
           </div>
 
           <div className="mt-4 grid grid-cols-2 gap-2">
-            <AccountMetricCard className="col-span-2" label="积分余额" value="100" suffix="点" accent />
+            <AccountMetricCard className="col-span-2" label="积分余额" value={credits} suffix="点" accent />
             <AccountMetricCard label="加速余额" value="0" suffix="次" />
             <AccountMetricCard label="存储空间" value="0G" suffix="/ 3G" />
           </div>
@@ -6247,9 +7304,9 @@ function SupportPanel() {
   return (
     <div className="space-y-3">
       {[
-        ["使用教程", "打开 LibTV 视频画布教程。"],
-        ["联系客服", "提交工单或联系在线客服。"],
-        ["问题反馈", "反馈画布、生成和支付问题。"],
+        ["使用教程", "打开视频画布使用教程。"],
+        ["联系开发者", "提交需求或联系开发者。"],
+        ["优化反馈", "反馈画布、生成和支付问题。"],
       ].map(([title, description]) => (
         <button
           className="w-full rounded-[8px] border border-white/8 bg-white/5 p-3 text-left hover:bg-white/8"
@@ -6268,9 +7325,15 @@ function SupportPanel() {
 function ImageNodePreview({ node }: { node: CloneNode }) {
   const mediaType = getDraftString(node, "mediaType") || node.inputType || "image";
   const url = getNodeMediaUrl(node);
+  const sourceUrl = getNodeSourceMediaUrl(node);
   const rotation = Number(node.draftValues?.rotation || 0);
+  const isNineGridComposite = Boolean(node.draftValues?.nineGridComposite);
+  const cropTile = normalizeGridCropTile(node.draftValues?.cropTile);
+  const gridCellVisual = node.draftValues?.gridCellVisual
+    ? normalizeGridCellVisual(node.draftValues?.gridCellVisual)
+    : null;
 
-  if (!url) {
+  if (!url && !isNineGridComposite) {
     return (
       <div className="flex h-[420px] items-center justify-center rounded-[8px] border border-white/8 bg-white/5 text-[14px] text-white/42">
         当前节点暂无可预览素材
@@ -6282,6 +7345,18 @@ function ImageNodePreview({ node }: { node: CloneNode }) {
     <div className="rounded-[8px] border border-white/8 bg-[#111] p-3">
       {mediaType === "video" ? (
         <video className="max-h-[72vh] w-full rounded-[6px] object-contain" controls playsInline src={url} />
+      ) : isNineGridComposite ? (
+        <div className="relative aspect-video max-h-[72vh] w-full overflow-hidden rounded-[6px] bg-white">
+          <NineGridCompositePreview node={node} sourceUrl={sourceUrl || url} />
+        </div>
+      ) : cropTile && url && gridCellVisual ? (
+        <div className="relative aspect-square max-h-[72vh] w-full overflow-hidden rounded-[6px] bg-white">
+          <GridCellImage alt={node.title} src={url} visual={gridCellVisual} />
+        </div>
+      ) : cropTile && url ? (
+        <div className="relative aspect-square max-h-[72vh] w-full overflow-hidden rounded-[6px] bg-white">
+          <CroppedGridTileImage alt={node.title} cropTile={cropTile} rotation={rotation} src={url} />
+        </div>
       ) : (
         <img
           alt={node.title}