@cut-workbench/workbench 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,68 +1,75 @@
+import { a as formatResolution, c as CardContent, d as CardTitle, f as Badge, i as formatPercent, n as formatDuration, o as formatSeconds, p as cn, r as formatElapsed, s as Card, t as formatBytes, u as CardHeader } from "./format-CV2aoZZC.js";
 import { createRoot } from "react-dom/client";
 import * as React from "react";
-import { createContext, createElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { PreviewCanvas, UnsupportedFileError, checkExportSupport, computeTimelineEnd, createEditor, createSubtitleAsset, createTextAsset, detectEnvironment, exportProject, fixFMP4DurationStream, importFile, isEnvironmentUsable, loadAudioClipForAsset, loadPcmForAsset, summarizeCapabilities } from "@cut-workbench/core/engine";
-import { ASPECT_PRESETS, DEFAULT_STILL_DURATION_US, EMPTY_SNAP, RESIZE_HANDLES, buildTicks, buildWaveformPath, clamp, computeSnapWithHysteresis, createClip, createIndexedDbStorage, createMemoryStorage, createWebBridge, deserializeProject, formatDuration, formatTimecode, getClipEnd, getProjectDuration, getTrack, getTrackEnd, handleCursor, handleLocalOffset, normalizeAngle, normalizeSize, parseSrt, parseSrtDurationUs, pxToUs, ratioLabel, resizeTransform, sameTransform, usToPx, usToSec } from "@cut-workbench/core";
+import { Suspense, createContext, createElement, lazy, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { ENGINE_DEPENDENCIES_INSTALL_COMMAND, PreviewCanvas, UnsupportedFileError, checkExportSupport, computeTimelineEnd, createEditor, createSubtitleAsset, createTextAsset, detectEnvironment, exportProject, fixFMP4DurationStream, importFile, isEnvironmentUsable, loadAudioClipForAsset, loadPcmForAsset, summarizeCapabilities } from "@cut-workbench/core/engine";
+import { ASPECT_PRESETS, DEFAULT_STILL_DURATION_US, EMPTY_SNAP, RESIZE_HANDLES, buildTicks, buildWaveformPath, clamp, computeSnapWithHysteresis, createClip, createIndexedDbStorage, createMemoryStorage, createWebBridge, deserializeProject, formatTimecode, getClipEnd, getProjectDuration, getTrack, getTrackEnd, handleCursor, handleLocalOffset, normalizeAngle, normalizeSize, parseSrt, parseSrtDurationUs, pxToUs, ratioLabel, resizeTransform, sameTransform, usToPx, usToSec } from "@cut-workbench/core";
 import { CutEditorProvider, useCutEditor, useEditor, useHistory } from "@cut-workbench/react";
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertOctagon, AlertTriangle, Camera, CheckCircle2, CheckIcon, ChevronDownIcon, ChevronUpIcon, Circle, CircleCheckIcon, Clapperboard, Copy, Download, Eye, EyeOff, Film, FlaskConical, FlipHorizontal2, FlipVertical2, FolderOpen, Image, Info, InfoIcon, Layers, Link2, Link2Off, Loader2, Loader2Icon, Lock, LockOpen, Magnet, Maximize2, Monitor, Music, OctagonXIcon, Pause, Play, Plus, Redo2, RotateCcw, RotateCw, Save, Scissors, Settings2, SkipBack, SkipForward, Split, Square, StepBack, StepForward, Subtitles, Trash2, TriangleAlertIcon, Type, Undo2, Upload, Video, Volume2, VolumeX, Wrench, X, XCircle, XIcon, ZoomIn, ZoomOut } from "lucide-react";
+import { AlertOctagon, AlertTriangle, Camera, CheckCircle2, CheckIcon, ChevronDownIcon, ChevronUpIcon, CircleCheckIcon, Copy, Download, Eye, EyeOff, Film, FlaskConical, FlipHorizontal2, FlipVertical2, FolderOpen, Image, Info, InfoIcon, Layers, Link2, Link2Off, Loader2, Loader2Icon, Lock, LockOpen, Magnet, Maximize2, Monitor, Music, OctagonXIcon, Pause, Play, Plus, Redo2, RotateCcw, RotateCw, Save, Scissors, Settings2, SkipBack, SkipForward, StepBack, StepForward, Subtitles, Trash2, TriangleAlertIcon, Type, Undo2, Upload, Video, Volume2, VolumeX, Wrench, X, XCircle, XIcon, ZoomIn, ZoomOut } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { ContextMenu, Dialog, DropdownMenu, Label, Popover, Progress, ScrollArea, Select, Separator, Slider, Slot, Switch, Tabs, Tooltip } from "radix-ui";
 import { Toaster, toast } from "sonner";
 import { useDropzone } from "react-dropzone";
-import { AVRecorder, FrameCounterClip, burnSubtitles, concatMp4, createDemoCanvasStream, createMp4Clip, createSubtitlePreviewClip, exportCustomClip, extractKeyframes, fixRecordedDuration, formatRecorderState, isWebGL2Available, mixAudioIntoMp4, readMp4Info, renderChromakeyFrame, renderClipFrameToCanvas, renderSubtitleFrame, splitMp4Tracks } from "@cut-workbench/core/lab";
 import { createStore } from "zustand/vanilla";
-// src/lib/cn.ts
-/**
-* 合并 className：tailwind-merge 负责消解冲突，clsx 负责条件拼接。
-*/
-function cn(...inputs) {
-	return twMerge(clsx(inputs));
-}
 // src/components/layout/AppShell.tsx
 /**
-* 三栏 + 底部时间轴骨架。
+* 工作台骨架：顶栏 + 上半区（素材 / 预览 / 属性）+ 底部通栏时间轴。
+*
+* ```
+* ┌───────────────────────────────────────────┐
+* │ 顶栏                                      │
+* ├──────────┬──────────────┬─────────────────┤
+* │ 素材库   │ 预览         │ 属性            │  上半区
+* ├──────────┴──────────────┴─────────────────┤
+* │ 时间轴（横跨整行）                        │  下栏
+* └───────────────────────────────────────────┘
+* ```
 *
-* 布局用 inline style 的像素宽度做「受控」尺寸，配合 PanelResizer 的拖拽回写；
-* 这样不会因为 tailwind 的动态 class 被 purge 掉而失效。
+* 时间轴必须是**通栏**的：它曾被塞进中间列，于是左右面板一拉宽就把时间轴
+* 挤窄，工具条上的按钮直接溢出到属性面板上（实测右栏拉宽时溢出 203px）。
+* 与此同时，几乎所有 NLE 都是「轨道占满底部一条」，通栏也更符合预期。
+*
+* 尺寸一律用 inline style 的像素值（受控），配合 PanelResizer 的拖拽回写；
+* 不用 tailwind 动态 class，避免被 purge 掉导致尺寸失效。
 */
 function AppShell({ topBar, left, center, right, timeline, leftWidth, rightWidth, timelineHeight, leftResizer, rightResizer, timelineResizer, className }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex h-full min-h-0 flex-col bg-background", className),
-		children: [topBar, /* @__PURE__ */ jsxs("div", {
-			className: "flex min-h-0 flex-1",
-			children: [
-				/* @__PURE__ */ jsx("aside", {
-					className: "flex min-h-0 shrink-0 flex-col border-r bg-card/40",
-					style: { width: leftWidth },
-					children: left
-				}),
-				leftResizer,
-				/* @__PURE__ */ jsxs("main", {
-					className: "flex min-w-0 flex-1 flex-col",
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "flex min-h-0 flex-1 flex-col",
-							children: center
-						}),
-						timelineResizer,
-						/* @__PURE__ */ jsx("section", {
-							className: "flex min-h-0 shrink-0 flex-col border-t bg-timeline-bg",
-							style: { height: timelineHeight },
-							children: timeline
-						})
-					]
-				}),
-				rightResizer,
-				/* @__PURE__ */ jsx("aside", {
-					className: "flex min-h-0 shrink-0 flex-col border-l bg-card/40",
-					style: { width: rightWidth },
-					children: right
-				})
-			]
-		})]
+		children: [
+			topBar,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+				children: [
+					/* @__PURE__ */ jsx("aside", {
+						className: "flex min-h-[220px] shrink-0 flex-col overflow-hidden border-r bg-card/40",
+						style: { width: leftWidth },
+						"data-panel": "media",
+						children: left
+					}),
+					leftResizer,
+					/* @__PURE__ */ jsx("main", {
+						className: "flex min-h-[220px] min-w-0 flex-1 flex-col overflow-hidden",
+						"data-panel": "preview",
+						children: center
+					}),
+					rightResizer,
+					/* @__PURE__ */ jsx("aside", {
+						className: "flex min-h-[220px] shrink-0 flex-col overflow-hidden border-l bg-card/40",
+						style: { width: rightWidth },
+						"data-panel": "inspector",
+						children: right
+					})
+				]
+			}),
+			timelineResizer,
+			/* @__PURE__ */ jsx("section", {
+				className: "flex min-h-0 shrink-0 flex-col overflow-hidden border-t bg-timeline-bg",
+				style: { height: timelineHeight },
+				"data-panel": "timeline",
+				children: timeline
+			})
+		]
 	});
 }
 // src/components/ui/button.tsx
@@ -197,27 +204,6 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
 		})
 	});
 }
-// src/components/ui/badge.tsx
-var badgeVariants = cva("inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3", {
-	variants: { variant: {
-		default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-		secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-		destructive: "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-		outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-		ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-		link: "text-primary underline-offset-4 [a&]:hover:underline"
-	} },
-	defaultVariants: { variant: "default" }
-});
-function Badge({ className, variant = "default", asChild = false, ...props }) {
-	const Comp = asChild ? Slot.Root : "span";
-	return /* @__PURE__ */ jsx(Comp, {
-		"data-slot": "badge",
-		"data-variant": variant,
-		className: cn(badgeVariants({ variant }), className),
-		...props
-	});
-}
 // src/components/ui/popover.tsx
 function Popover$1({ ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
@@ -365,10 +351,17 @@ var DEFAULT_CONFIG = {
 * - 品牌区可替换（`brand`），不强制显示项目名；
 * - 保存/打开是可选回调，宿主不提供就不渲染按钮；
 * - 「视图切换（编辑器/实验室）」只在开启 lab 特性时显示。
+*
+* 可自定义的层次（由浅到深）：
+* 1. **文案**：`labels` 覆盖工程名占位、能力徽标等；
+* 2. **局部**：`brand` / `title` / `status` / `actions` / `showCapabilityBadge`
+*    逐块替换；
+* 3. **整条**：`slots.topBar`（传 `null` 表示完全不要顶栏）。
 */
 /** 顶栏：品牌 / 工程名 / 撤销重做 / 保存 / 导出 / 能力徽标 / 视图切换 */
-function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject, brand, showLab = false }) {
+function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject, brand, title, status, actions, showCapabilityBadge = true, showLab = false, editableTitle = false, labels }) {
 	const projectName = useEditor((s) => s.project.name);
+	const renameProject = useEditor((s) => s.renameProject);
 	const dirty = useEditor((s) => s.dirty);
 	const undo = useEditor((s) => s.undo);
 	const redo = useEditor((s) => s.redo);
@@ -380,44 +373,49 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 	const clipCount = useEditor((s) => s.project.clips.length);
 	const projectWidth = useEditor((s) => s.project.width);
 	const projectHeight = useEditor((s) => s.project.height);
-	const branding = brand === null ? null : brand ?? /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 pr-2",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex size-7 items-center justify-center rounded-md bg-primary text-primary-foreground",
-			children: /* @__PURE__ */ jsx(Clapperboard, { className: "size-4" })
-		}), /* @__PURE__ */ jsx("span", {
-			className: "text-sm font-semibold tracking-tight",
-			children: "Cut Workbench"
-		})]
+	const text = {
+		untitledProject: "未命名工程",
+		emptyProject: "空工程",
+		export: "导出",
+		canvasSettings: "画布设置",
+		showLab: "能力实验室",
+		backToEditor: "返回编辑器",
+		save: "保存工程",
+		open: "加载工程",
+		undo: "撤销",
+		redo: "重做",
+		...labels
+	};
+	const branding = brand == null ? null : brand;
+	const projectTitle = title === null ? null : title ?? /* @__PURE__ */ jsx(ProjectTitle, {
+		name: projectName,
+		dirty,
+		placeholder: text.untitledProject,
+		editable: editableTitle,
+		onRename: renameProject
+	});
+	const statusNode = status === null ? null : status ?? /* @__PURE__ */ jsxs("span", {
+		className: "hidden text-xs text-muted-foreground sm:inline",
+		children: [
+			clipCount > 0 ? `${clipCount} 个片段` : text.emptyProject,
+			" ·",
+			" ",
+			ratioLabel(projectWidth, projectHeight)
+		]
 	});
 	return /* @__PURE__ */ jsxs("header", {
-		className: "flex h-12 shrink-0 items-center gap-2 border-b bg-card px-3",
+		className: "flex h-12 shrink-0 items-center gap-2 overflow-hidden border-b bg-card px-3",
+		"data-workbench-toolbar": true,
 		children: [
 			branding,
-			branding != null && /* @__PURE__ */ jsx(Separator$1, {
+			branding != null && projectTitle != null && /* @__PURE__ */ jsx(Separator$1, {
 				orientation: "vertical",
 				className: "h-5"
 			}),
+			projectTitle,
+			statusNode,
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "truncate text-sm font-medium",
-					children: projectName
-				}), dirty && /* @__PURE__ */ jsx("span", {
-					className: "size-1.5 rounded-full bg-primary",
-					title: "未保存"
-				})]
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				className: "hidden text-xs text-muted-foreground sm:inline",
-				children: [
-					clipCount > 0 ? `${clipCount} 个片段` : "空工程",
-					" · ",
-					ratioLabel(projectWidth, projectHeight)
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "ml-auto flex items-center gap-1",
+				className: "ml-auto flex shrink-0 items-center gap-1",
 				children: [
 					/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 						asChild: true,
@@ -426,10 +424,10 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							size: "icon-sm",
 							onClick: undo,
 							disabled: !canUndo,
-							"aria-label": "撤销",
+							"aria-label": text.undo,
 							children: /* @__PURE__ */ jsx(Undo2, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: "撤销 (Ctrl+Z)" })] }),
+					}), /* @__PURE__ */ jsxs(TooltipContent, { children: [text.undo, " (Ctrl+Z)"] })] }),
 					/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Button, {
@@ -437,10 +435,10 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							size: "icon-sm",
 							onClick: redo,
 							disabled: !canRedo,
-							"aria-label": "重做",
+							"aria-label": text.redo,
 							children: /* @__PURE__ */ jsx(Redo2, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: "重做 (Ctrl+Shift+Z)" })] }),
+					}), /* @__PURE__ */ jsxs(TooltipContent, { children: [text.redo, " (Ctrl+Shift+Z)"] })] }),
 					/* @__PURE__ */ jsx(Separator$1, {
 						orientation: "vertical",
 						className: "mx-1 h-5"
@@ -451,29 +449,29 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							variant: "ghost",
 							size: "icon-sm",
 							onClick: onOpenProject,
-							"aria-label": "加载工程",
+							"aria-label": text.open,
 							children: /* @__PURE__ */ jsx(FolderOpen, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: "加载已保存工程" })] }),
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: text.open })] }),
 					onSaveProject != null && /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Button, {
 							variant: "ghost",
 							size: "icon-sm",
 							onClick: onSaveProject,
-							"aria-label": "保存工程",
+							"aria-label": text.save,
 							children: /* @__PURE__ */ jsx(Save, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: "保存工程到本地" })] }),
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: text.save })] }),
 					/* @__PURE__ */ jsxs(Button, {
 						variant: "ghost",
 						size: "sm",
 						className: "gap-1.5",
-						"aria-label": "画布设置",
+						"aria-label": text.canvasSettings,
 						onClick: () => openDialog("projectSettings"),
 						children: [/* @__PURE__ */ jsx(Monitor, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 							className: "hidden md:inline",
-							children: "画布设置"
+							children: text.canvasSettings
 						})]
 					}),
 					showLab && /* @__PURE__ */ jsxs(Button, {
@@ -483,21 +481,67 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 						onClick: () => setRoute(route === "lab" ? "editor" : "lab"),
 						children: [route === "lab" ? /* @__PURE__ */ jsx(Video, { className: "size-4" }) : /* @__PURE__ */ jsx(FlaskConical, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 							className: "hidden md:inline",
-							children: route === "lab" ? "返回编辑器" : "能力实验室"
+							children: route === "lab" ? text.backToEditor : text.showLab
 						})]
 					}),
-					/* @__PURE__ */ jsx(CapabilityBadge, { info: capability }),
+					showCapabilityBadge && /* @__PURE__ */ jsx(CapabilityBadge, { info: capability }),
+					actions,
 					/* @__PURE__ */ jsxs(Button, {
 						size: "sm",
 						className: "ml-1 gap-1.5",
 						onClick: onExport,
-						children: [/* @__PURE__ */ jsx(Download, { className: "size-4" }), "导出"]
+						children: [/* @__PURE__ */ jsx(Download, { className: "size-4" }), text.export]
 					})
 				]
 			})
 		]
 	});
 }
+/**
+* 工程名展示（可选双击重命名）。
+*
+* 重命名走编辑器 store 的 `renameProject`，因此会进撤销栈、并标记 dirty ——
+* 直接改 DOM 或本地 state 会让「保存了什么」和「看到什么」对不上。
+*/
+function ProjectTitle({ name, dirty, placeholder, editable, onRename }) {
+	const [editing, setEditing] = useState(false);
+	const [draft, setDraft] = useState(name);
+	const commit = () => {
+		setEditing(false);
+		const next = draft.trim();
+		if (next.length > 0 && next !== name) onRename(next);
+	};
+	if (editing) return /* @__PURE__ */ jsx("input", {
+		autoFocus: true,
+		value: draft,
+		onChange: (e) => setDraft(e.target.value),
+		onBlur: commit,
+		onKeyDown: (e) => {
+			if (e.key === "Enter") commit();
+			if (e.key === "Escape") {
+				setDraft(name);
+				setEditing(false);
+			}
+		},
+		className: "h-7 w-48 min-w-0 rounded border bg-background px-1.5 text-sm outline-none focus:ring-1 focus:ring-ring",
+		"aria-label": "工程名称"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-center gap-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("truncate text-sm font-medium", editable && "cursor-text"),
+			title: editable ? "双击重命名" : name.length > 0 ? name : placeholder,
+			onDoubleClick: editable ? () => {
+				setDraft(name.length > 0 ? name : "");
+				setEditing(true);
+			} : void 0,
+			children: name.length > 0 ? name : placeholder
+		}), dirty && /* @__PURE__ */ jsx("span", {
+			className: "size-1.5 shrink-0 rounded-full bg-primary",
+			title: "未保存"
+		})]
+	});
+}
 // src/components/layout/use-panel-resize.ts
 /**
 * 面板拖拽调整。内部用 rAF 节流，松手才把最终值写回 store（避免每帧重渲染整棵树）。
@@ -580,42 +624,6 @@ function PanelResizer({ orientation, value, min, max, invert, onChange, classNam
 		children: /* @__PURE__ */ jsx("div", { className: cn("absolute", isVertical ? "-left-1 -right-1 inset-y-0" : "-top-1 -bottom-1 inset-x-0") })
 	});
 }
-// src/components/ui/card.tsx
-function Card({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card",
-		className: cn("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", className),
-		...props
-	});
-}
-function CardHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card-header",
-		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
-		...props
-	});
-}
-function CardTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card-title",
-		className: cn("leading-none font-semibold", className),
-		...props
-	});
-}
-function CardDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card-description",
-		className: cn("text-sm text-muted-foreground", className),
-		...props
-	});
-}
-function CardContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card-content",
-		className: cn("px-6", className),
-		...props
-	});
-}
 // src/components/common/LoadingOverlay.tsx
 /** 全屏/局部遮罩加载态，用于导出、批量导入等长任务 */
 function LoadingOverlay({ visible, title = "处理中…", description, progress, className, fullscreen, children }) {
@@ -683,7 +691,12 @@ var CHECKS = [
 		hint: "绿幕抠像（可选）"
 	}
 ];
-/** 不满足运行条件时的阻断页：逐项说明缺失能力，不做静默降级 */
+/**
+* 不满足运行条件时的阻断页：逐项说明缺失能力，不做静默降级。
+*
+* 「依赖没装」与「浏览器不支持」要分开呈现 —— 前者是宿主的构建问题（可执行
+* 安装命令解决），后者只能换浏览器。混在一起会让人对着一条装包报错去升浏览器。
+*/
 function UnsupportedBrowser({ report, loading, error }) {
 	if (loading) return /* @__PURE__ */ jsx("div", {
 		className: "relative flex min-h-screen items-center justify-center bg-background",
@@ -693,6 +706,8 @@ function UnsupportedBrowser({ report, loading, error }) {
 			fullscreen: false
 		})
 	});
+	const missing = report?.missingDependencies ?? [];
+	const dependenciesMissing = missing.length > 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex min-h-screen items-center justify-center bg-background p-6",
 		children: /* @__PURE__ */ jsxs(Card, {
@@ -701,15 +716,36 @@ function UnsupportedBrowser({ report, loading, error }) {
 				className: "flex items-center gap-2 text-destructive",
 				children: [/* @__PURE__ */ jsx(AlertOctagon, { className: "size-5" }), /* @__PURE__ */ jsx(CardTitle, {
 					className: "text-base",
-					children: "当前浏览器无法运行本应用"
+					children: dependenciesMissing ? "缺少引擎依赖" : "当前浏览器无法运行本应用"
 				})]
 			}), /* @__PURE__ */ jsx("p", {
 				className: "text-sm text-muted-foreground",
-				children: "WebAV 依赖 WebCodecs 与 OPFS，仅支持 Chromium 内核浏览器。请使用最新版 Chrome 或 Edge（非无痕模式）重新打开。"
+				children: dependenciesMissing ? "工作台的预览与导出依赖 WebAV（@webav/av-cliper、@webav/av-canvas）。当前项目里没有解析到它们。" : "WebAV 依赖 WebCodecs 与 OPFS，仅支持 Chromium 内核浏览器。请使用最新版 Chrome 或 Edge（非无痕模式）重新打开。"
 			})] }), /* @__PURE__ */ jsxs(CardContent, {
 				className: "space-y-4",
 				children: [
-					report != null && /* @__PURE__ */ jsx("div", {
+					dependenciesMissing && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2 rounded-md border border-destructive/40 bg-destructive/5 p-3",
+						children: [
+							/* @__PURE__ */ jsxs("p", {
+								className: "text-xs font-medium text-destructive",
+								children: ["未解析到：", missing.join("、")]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-xs text-muted-foreground",
+								children: "在宿主项目里执行："
+							}),
+							/* @__PURE__ */ jsx("pre", {
+								className: "overflow-x-auto rounded bg-muted px-3 py-2 text-xs",
+								children: /* @__PURE__ */ jsx("code", { children: ENGINE_DEPENDENCIES_INSTALL_COMMAND })
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-xs text-muted-foreground",
+								children: "安装后需要重新跑一次构建 —— 缺失依赖只在构建期解析，浏览器里刷新页面没用。"
+							})
+						]
+					}),
+					report != null && !dependenciesMissing && /* @__PURE__ */ jsx("div", {
 						className: "grid gap-2 sm:grid-cols-2",
 						children: CHECKS.map((check) => {
 							const value = report[check.key];
@@ -983,41 +1019,6 @@ function EmptyState({ icon: Icon, title, description, action, className, compact
 		]
 	});
 }
-// src/lib/format.ts
-/** 字节数 → 人类可读 */
-function formatBytes(bytes) {
-	if (bytes < 1024) return `${bytes} B`;
-	const units = [
-		"KB",
-		"MB",
-		"GB"
-	];
-	let value = bytes / 1024;
-	let i = 0;
-	while (value >= 1024 && i < units.length - 1) {
-		value /= 1024;
-		i += 1;
-	}
-	return `${value.toFixed(value >= 100 ? 0 : 1)} ${units[i]}`;
-}
-/** 像素尺寸 → `1920×1080` */
-function formatResolution(width, height) {
-	if (!width || !height) return "—";
-	return `${width}×${height}`;
-}
-/** 秒数 → `12.3s` */
-function formatElapsed(seconds) {
-	if (seconds < 60) return `${seconds.toFixed(1)}s`;
-	return `${Math.floor(seconds / 60)}m ${Math.round(seconds % 60)}s`;
-}
-/** 微秒 → 秒（保留一位小数，用于表单展示） */
-function formatSeconds(us) {
-	return usToSec(us).toFixed(2);
-}
-/** 百分比 0~1 → `42%` */
-function formatPercent(ratio) {
-	return `${Math.round(ratio * 100)}%`;
-}
 // src/features/media-library/components/DropZone.tsx
 var ACCEPT = {
 	"video/mp4": [".mp4", ".m4v"],
@@ -2378,15 +2379,51 @@ var RATES = [
 	1.5,
 	2
 ];
+/**
+* 紧凑档位（按容器宽度，不是视口 —— 预览列宽由拖拽决定）。
+*
+* 阈值来自实测的控件总宽：完整形态约 680px，`< 700` 先去音量滑杆与速率、
+* `< 560` 再去时间码的「总时长」与进度条、`< 420` 再去跳首尾。
+* 只靠 `shrink-0` + `overflow:hidden` 会在 650px 左右把时间码裁掉，
+* 且**没有任何报错**，只有截图能看出来 —— 所以这里显式分级。
+*/
+var FULL_PX = 700;
+var COMPACT_PX = 620;
+var TIGHT_PX = 520;
+var ULTRA_COMPACT_PX = 420;
+/** 低于此宽度连时间码都放不下：只留播放/逐帧，横向可滚 */
+var MICRO_PX = 200;
 /** 播放控制条：逐帧 / 跳首尾 / 播放 / 时间码 / 速率 / 音量 */
 function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playbackRate, disabled, onToggle, onJumpStart, onJumpEnd, onStepFrame, onSeek, onVolumeChange, onRateChange, className }) {
+	const rootRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	/**
+	* 用容器宽度而不是 CSS 媒体查询。
+	*
+	* 预览面板宽度由左侧拖拽决定，和视口宽度无关 —— 用户把两侧拉宽时，
+	* 视口一点没变，`max-[560px]:hidden` 这类媒体查询不会触发，时间码照样被压扁。
+	*/
+	useEffect(() => {
+		const el = rootRef.current;
+		if (el == null) return;
+		const ro = new ResizeObserver(() => setWidth(el.clientWidth));
+		ro.observe(el);
+		setWidth(el.clientWidth);
+		return () => ro.disconnect();
+	}, []);
+	const compact = width > 0 && width < COMPACT_PX;
+	const tight = width > 0 && width < TIGHT_PX;
+	const ultraCompact = width > 0 && width < ULTRA_COMPACT_PX;
+	const micro = width > 0 && width < MICRO_PX;
+	const full = width === 0 || width >= FULL_PX;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex h-11 shrink-0 items-center gap-1.5 border-t bg-card/60 px-3", className),
+		ref: rootRef,
+		className: cn("flex h-11 shrink-0 items-center gap-1.5 overflow-hidden border-t bg-card/60", ultraCompact ? "px-1.5" : "px-3", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-0.5",
+				className: "flex shrink-0 items-center gap-0.5",
 				children: [
-					/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					!ultraCompact && /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Button, {
 							variant: "ghost",
@@ -2428,7 +2465,7 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 							children: /* @__PURE__ */ jsx(StepForward, { className: "size-3.5" })
 						})
 					}), /* @__PURE__ */ jsx(TooltipContent, { children: "下一帧 (→)" })] }),
-					/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					!ultraCompact && /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Button, {
 							variant: "ghost",
@@ -2442,23 +2479,19 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mx-2 flex items-baseline gap-1",
-				children: [
-					/* @__PURE__ */ jsx(Timecode, {
-						us: currentUs,
-						className: "text-[13px] font-medium"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-xs text-muted-foreground",
-						children: "/"
-					}),
-					/* @__PURE__ */ jsx(Timecode, {
-						us: durationUs,
-						muted: true
-					})
-				]
+				className: cn("mx-2 flex shrink-0 items-baseline gap-1 whitespace-nowrap", ultraCompact && "mx-1", micro && "hidden"),
+				children: [/* @__PURE__ */ jsx(Timecode, {
+					us: currentUs,
+					className: "text-[13px] font-medium"
+				}), !tight && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: "/"
+				}), /* @__PURE__ */ jsx(Timecode, {
+					us: durationUs,
+					muted: true
+				})] })]
 			}),
-			/* @__PURE__ */ jsx("input", {
+			!ultraCompact && /* @__PURE__ */ jsx("input", {
 				type: "range",
 				className: "mx-1 h-1 min-w-16 flex-1 cursor-pointer appearance-none rounded-full bg-muted accent-primary",
 				min: 0,
@@ -2470,9 +2503,9 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 				"aria-label": "播放进度"
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1",
+				className: cn("flex shrink-0 items-center gap-1", compact && "ml-auto", micro && "hidden"),
 				children: [
-					/* @__PURE__ */ jsx("div", {
+					!compact && /* @__PURE__ */ jsx("div", {
 						className: "flex items-center rounded-md border p-0.5",
 						children: RATES.map((rate) => /* @__PURE__ */ jsxs("button", {
 							type: "button",
@@ -2492,7 +2525,7 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 							children: masterVolume > 0 ? /* @__PURE__ */ jsx(Volume2, { className: "size-3.5" }) : /* @__PURE__ */ jsx(VolumeX, { className: "size-3.5" })
 						})
 					}), /* @__PURE__ */ jsx(TooltipContent, { children: masterVolume > 0 ? "静音预览" : "取消静音" })] }),
-					/* @__PURE__ */ jsx(Slider$1, {
+					full && /* @__PURE__ */ jsx(Slider$1, {
 						className: "w-20",
 						min: 0,
 						max: 1,
@@ -2776,143 +2809,148 @@ var DEFAULT_BITRATE = 8e6;
 /** 时间轴顶部工具条：分割 / 复制 / 删除 / 吸附开关 / 缩放 / 加轨道 */
 function TimelineToolbar({ playheadUs, durationUs, pxPerSecond, selectionCount, magnetEnabled, onToggleMagnet, onSplit, onDuplicate, onRemove, onZoomIn, onZoomOut, onZoomToFit, onAddTrack, canZoomIn, canZoomOut }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-9 shrink-0 items-center gap-1 border-b bg-card/60 px-2",
-		children: [
-			/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onSplit,
-					"aria-label": "分割",
-					children: /* @__PURE__ */ jsx(Scissors, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: "在播放头分割 (S)" })] }),
-			/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onDuplicate,
-					disabled: selectionCount === 0,
-					"aria-label": "复制片段",
-					children: /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: "复制片段 (Ctrl+D)" })] }),
-			/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onRemove,
-					disabled: selectionCount === 0,
-					"aria-label": "删除片段",
-					children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: "删除片段 (Delete)" })] }),
-			/* @__PURE__ */ jsx(Separator$1, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Button, {
-					variant: magnetEnabled ? "secondary" : "ghost",
-					size: "icon-sm",
-					onClick: onToggleMagnet,
-					"aria-label": "吸附",
-					"aria-pressed": magnetEnabled,
-					children: /* @__PURE__ */ jsx(Magnet, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: "吸附对齐（阈值 15px）" })] }),
-			/* @__PURE__ */ jsx(Separator$1, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-0.5",
-				children: [
-					/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							size: "icon-sm",
-							onClick: onZoomOut,
-							disabled: !canZoomOut,
-							"aria-label": "缩小",
-							children: /* @__PURE__ */ jsx(ZoomOut, { className: "size-3.5" })
-						})
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: "缩小 (-)" })] }),
-					/* @__PURE__ */ jsx("span", {
-						className: "w-11 text-center font-mono text-[10px] text-muted-foreground tabular-nums",
-						children: Math.round(pxPerSecond)
-					}),
-					/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Button, {
+		className: "thin-scrollbar @container flex h-9 shrink-0 items-center gap-1 overflow-x-auto overflow-y-hidden border-b bg-card/60 px-2",
+		role: "toolbar",
+		"aria-label": "时间轴工具",
+		"data-timeline-toolbar": true,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onSplit,
+						"aria-label": "分割",
+						children: /* @__PURE__ */ jsx(Scissors, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: "在播放头分割 (S)" })] }),
+				/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onDuplicate,
+						disabled: selectionCount === 0,
+						"aria-label": "复制片段",
+						children: /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: "复制片段 (Ctrl+D)" })] }),
+				/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onRemove,
+						disabled: selectionCount === 0,
+						"aria-label": "删除片段",
+						children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: "删除片段 (Delete)" })] }),
+				/* @__PURE__ */ jsx(Separator$1, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: magnetEnabled ? "secondary" : "ghost",
+						size: "icon-sm",
+						onClick: onToggleMagnet,
+						"aria-label": "吸附",
+						"aria-pressed": magnetEnabled,
+						children: /* @__PURE__ */ jsx(Magnet, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: "吸附对齐（阈值 15px）" })] }),
+				/* @__PURE__ */ jsx(Separator$1, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-0.5",
+					children: [
+						/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: onZoomOut,
+								disabled: !canZoomOut,
+								"aria-label": "缩小",
+								children: /* @__PURE__ */ jsx(ZoomOut, { className: "size-3.5" })
+							})
+						}), /* @__PURE__ */ jsx(TooltipContent, { children: "缩小 (-)" })] }),
+						/* @__PURE__ */ jsx("span", {
+							className: "w-11 text-center font-mono text-[10px] text-muted-foreground tabular-nums",
+							children: Math.round(pxPerSecond)
+						}),
+						/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: onZoomIn,
+								disabled: !canZoomIn,
+								"aria-label": "放大",
+								children: /* @__PURE__ */ jsx(ZoomIn, { className: "size-3.5" })
+							})
+						}), /* @__PURE__ */ jsx(TooltipContent, { children: "放大 (+)" })] }),
+						/* @__PURE__ */ jsx(Button, {
 							variant: "ghost",
-							size: "icon-sm",
-							onClick: onZoomIn,
-							disabled: !canZoomIn,
-							"aria-label": "放大",
-							children: /* @__PURE__ */ jsx(ZoomIn, { className: "size-3.5" })
+							size: "xs",
+							onClick: onZoomToFit,
+							className: "text-[10px]",
+							children: "适应"
 						})
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: "放大 (+)" })] }),
-					/* @__PURE__ */ jsx(Button, {
+					]
+				}),
+				/* @__PURE__ */ jsx(Separator$1, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-0.5",
+					children: [/* @__PURE__ */ jsxs(Button, {
 						variant: "ghost",
 						size: "xs",
-						onClick: onZoomToFit,
-						className: "text-[10px]",
-						children: "适应"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(Separator$1, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-0.5",
-				children: [/* @__PURE__ */ jsxs(Button, {
-					variant: "ghost",
-					size: "xs",
-					onClick: () => onAddTrack("visual"),
-					children: [/* @__PURE__ */ jsx(Plus, { className: "size-3" }), "视频轨"]
-				}), /* @__PURE__ */ jsxs(Button, {
-					variant: "ghost",
-					size: "xs",
-					onClick: () => onAddTrack("audio"),
-					children: [/* @__PURE__ */ jsx(Plus, { className: "size-3" }), "音频轨"]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "ml-auto flex items-center gap-2 text-[11px] text-muted-foreground",
-				children: [
-					selectionCount > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "rounded bg-primary/15 px-1.5 py-0.5 text-primary",
-						children: ["已选 ", selectionCount]
-					}),
-					/* @__PURE__ */ jsx(Info, { className: "size-3" }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "tabular-nums",
-						children: [
-							/* @__PURE__ */ jsx(Timecode, {
-								us: playheadUs,
-								className: "text-foreground"
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "mx-1",
-								children: "/"
-							}),
-							/* @__PURE__ */ jsx(Timecode, {
-								us: durationUs,
-								muted: true
-							})
-						]
-					})
-				]
-			})
-		]
+						onClick: () => onAddTrack("visual"),
+						children: [/* @__PURE__ */ jsx(Plus, { className: "size-3" }), "视频轨"]
+					}), /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onAddTrack("audio"),
+						children: [/* @__PURE__ */ jsx(Plus, { className: "size-3" }), "音频轨"]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "ml-auto hidden shrink-0 items-center gap-2 pl-2 text-[11px] text-muted-foreground @[720px]:flex",
+			children: [
+				selectionCount > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "rounded bg-primary/15 px-1.5 py-0.5 text-primary",
+					children: ["已选 ", selectionCount]
+				}),
+				/* @__PURE__ */ jsx(Info, { className: "size-3" }),
+				/* @__PURE__ */ jsxs("span", {
+					className: "tabular-nums whitespace-nowrap",
+					children: [
+						/* @__PURE__ */ jsx(Timecode, {
+							us: playheadUs,
+							className: "text-foreground"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "mx-1",
+							children: "/"
+						}),
+						/* @__PURE__ */ jsx(Timecode, {
+							us: durationUs,
+							muted: true
+						})
+					]
+				})
+			]
+		})]
 	});
 }
 // src/features/timeline/components/Ruler.tsx
@@ -3876,7 +3914,7 @@ function Timeline() {
 		splitClip
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-0 flex-1 flex-col",
+		className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
 		children: [
 			/* @__PURE__ */ jsx(TimelineToolbar, {
 				playheadUs,
@@ -3896,7 +3934,7 @@ function Timeline() {
 				canZoomOut: zoom.canZoomOut
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "relative flex min-h-0 flex-1",
+				className: "relative flex min-h-0 min-w-0 flex-1 overflow-hidden",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "thin-scrollbar flex shrink-0 flex-col overflow-y-auto border-r",
 					style: { width: 150 },
@@ -6392,1176 +6430,9 @@ function useCapabilityInfo() {
 		summary: summarizeCapabilities(report)
 	};
 }
-// src/features/lab/components/LabCard.tsx
-/** Lab 卡片外壳：标题 + 用到的 API + （不可用时的原因） */
-function LabCard({ title, description, apis, children, unavailable, className }) {
-	return /* @__PURE__ */ jsxs(Card, {
-		className: cn("flex flex-col", className),
-		children: [/* @__PURE__ */ jsxs(CardHeader, {
-			className: "gap-1",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "flex size-6 items-center justify-center rounded bg-primary/10 text-primary",
-						children: /* @__PURE__ */ jsx(FlaskConical, { className: "size-3.5" })
-					}), /* @__PURE__ */ jsx(CardTitle, {
-						className: "text-sm",
-						children: title
-					})]
-				}),
-				/* @__PURE__ */ jsx(CardDescription, {
-					className: "text-xs",
-					children: description
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "flex flex-wrap gap-1 pt-1",
-					children: apis.map((api) => /* @__PURE__ */ jsx(Badge, {
-						variant: "outline",
-						className: "font-mono text-[10px] font-normal text-muted-foreground",
-						children: api
-					}, api))
-				})
-			]
-		}), /* @__PURE__ */ jsx(CardContent, {
-			className: "flex flex-1 flex-col gap-2.5",
-			children: unavailable != null ? /* @__PURE__ */ jsx("div", {
-				className: "rounded-md border border-dashed border-warning/40 bg-warning/5 p-3 text-xs text-warning",
-				children: unavailable
-			}) : children
-		})]
-	});
-}
-// src/features/lab/hooks/use-lab-action.ts
-/** 生成可下载链接（Lab 通用） */
-function useDownload() {
-	const urlsRef = useRef([]);
-	return useCallback((blob, filename) => {
-		const url = URL.createObjectURL(blob);
-		urlsRef.current.push(url);
-		const link = document.createElement("a");
-		link.href = url;
-		link.download = filename;
-		document.body.appendChild(link);
-		link.click();
-		link.remove();
-		window.setTimeout(() => URL.revokeObjectURL(url), 15e3);
-	}, []);
-}
-/** 带 busy 状态的异步执行器：统一错误 toast，禁止静默吞异常 */
-function useLabAction() {
-	const [busy, setBusy] = useState(null);
-	return {
-		busy,
-		run: useCallback(async (label, task) => {
-			setBusy(label);
-			try {
-				return await task();
-			} catch (err) {
-				const message = err instanceof Error ? err.message : String(err);
-				console.error(err);
-				toast.error("操作失败", { description: message });
-				return null;
-			} finally {
-				setBusy(null);
-			}
-		}, [])
-	};
-}
-// src/features/lab/components/shared.tsx
+// src/CutWorkbench.tsx
 /**
-* Lab 共享的可视组件。
-*
-* 只导出组件（React Fast Refresh 要求单文件只导出组件）；
-* 工具函数与 hook 放在 `../hooks/use-lab-action`。
-*/
-/** 文件选择按钮 */
-function FilePickButton({ label, accept, multiple, onFiles, disabled }) {
-	const inputRef = useRef(null);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-		ref: inputRef,
-		type: "file",
-		accept,
-		multiple,
-		className: "hidden",
-		onChange: (e) => {
-			const files = Array.from(e.target.files ?? []);
-			if (files.length > 0) onFiles(files);
-			e.target.value = "";
-		}
-	}), /* @__PURE__ */ jsx("button", {
-		type: "button",
-		disabled,
-		onClick: () => inputRef.current?.click(),
-		className: "flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-3 py-3.5 text-xs text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
-		children: /* @__PURE__ */ jsx("span", {
-			className: "max-w-full truncate",
-			children: label
-		})
-	})] });
-}
-/** 结果预览：视频 + 下载 */
-function ResultPreview({ blob, filename }) {
-	const download = useDownload();
-	const [url] = useState(() => URL.createObjectURL(blob));
-	useEffect(() => () => URL.revokeObjectURL(url), [url]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-1.5",
-		children: [/* @__PURE__ */ jsx("video", {
-			src: url,
-			controls: true,
-			className: "w-full rounded-md border bg-stage-bg",
-			style: { maxHeight: 200 }
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground",
-				children: [(blob.size / 1024 / 1024).toFixed(2), " MB"]
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => download(blob, filename),
-				className: "rounded-md bg-primary px-2 py-1 text-[11px] text-primary-foreground hover:bg-primary/90",
-				children: "下载"
-			})]
-		})]
-	});
-}
-/** 忙碌提示 */
-function Busy({ label }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground",
-		children: [/* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }), label]
-	});
-}
-/** 简易滑杆 */
-function SliderRow({ label, value, min, max, step, format, onChange }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-1",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex justify-between text-[10px] text-muted-foreground",
-			children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
-				className: "font-mono tabular-nums",
-				children: format ? format(value) : value.toFixed(2)
-			})]
-		}), /* @__PURE__ */ jsx("input", {
-			type: "range",
-			min,
-			max,
-			step,
-			value,
-			onChange: (e) => onChange(Number(e.target.value)),
-			className: "h-1 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
-		})]
-	});
-}
-// src/features/lab/components/ConcatenateLab.tsx
-/**
-* Lab 1：无损拼接。
-*
-* 用 `fastConcatMP4` 直接拼接多个 MP4 的样本，不重编码。
-* 前提是编码 / 分辨率 / 采样率完全一致；不一致时本 Lab 会先预检并给出具体差异。
-*/
-function ConcatenateLab() {
-	const [files, setFiles] = useState([]);
-	const [infos, setInfos] = useState([]);
-	const [result, setResult] = useState(null);
-	const { busy, run } = useLabAction();
-	const handleFiles = async (picked) => {
-		setFiles(picked);
-		setResult(null);
-		setInfos([]);
-		const detected = await run("正在读取文件信息…", async () => {
-			const list = [];
-			for (const file of picked) list.push(await readMp4Info(file));
-			return list;
-		});
-		if (detected != null) setInfos(detected);
-	};
-	const handleConcat = async () => {
-		const output = await run("正在无损拼接…", () => concatMp4(files));
-		if (output != null) {
-			setResult(output.blob);
-			setInfos(output.infos);
-		}
-	};
-	const first = infos[0];
-	const mismatch = first != null && infos.some((info) => info.width !== first.width || info.height !== first.height || info.codec !== first.codec || info.audioSampleRate !== first.audioSampleRate);
-	return /* @__PURE__ */ jsxs(LabCard, {
-		title: "无损拼接",
-		description: "直接把多个 MP4 的样本拼在一起，不重编码，速度极快。要求规格完全一致。",
-		apis: ["fastConcatMP4", "MP4Clip.getFileHeaderBinData"],
-		children: [
-			/* @__PURE__ */ jsx(FilePickButton, {
-				label: files.length > 0 ? `已选 ${files.length} 个文件（重新选择）` : "选择 2 个以上 MP4",
-				accept: "video/mp4",
-				multiple: true,
-				onFiles: (picked) => void handleFiles(picked),
-				disabled: busy != null
-			}),
-			files.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "space-y-1 text-[10px] text-muted-foreground",
-				children: files.map((file, index) => {
-					const info = infos[index];
-					return /* @__PURE__ */ jsxs("li", {
-						className: "flex justify-between gap-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: file.name
-						}), /* @__PURE__ */ jsx("span", {
-							className: "shrink-0 font-mono",
-							children: info != null ? `${formatResolution(info.width, info.height)} · ${formatDuration(info.durationUs)} · ${info.codec}` : "检测中…"
-						})]
-					}, `${file.name}-${index}`);
-				})
-			}),
-			mismatch && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-start gap-1.5 rounded-md bg-warning/10 p-2 text-[10px] text-warning",
-				children: [/* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), "检测到规格不一致，拼接会失败并给出具体原因（fastConcatMP4 的硬性要求）。"]
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				disabled: files.length < 2 || busy != null,
-				onClick: () => void handleConcat(),
-				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: "开始拼接"
-			}),
-			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ jsx(ResultPreview, {
-				blob: result,
-				filename: "concat.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/RemuxLab.tsx
-/**
-* Lab 2：配音。
-*
-* `mixinMP4AndAudio` 只重编码音频轨，视频轨原样复制 —— 因此速度快、画质无损。
-*/
-function RemuxLab() {
-	const [video, setVideo] = useState(null);
-	const [audio, setAudio] = useState(null);
-	const [volume, setVolume] = useState(1);
-	const [loop, setLoop] = useState(true);
-	const [result, setResult] = useState(null);
-	const { busy, run } = useLabAction();
-	const handleMix = async () => {
-		if (video == null || audio == null) return;
-		const output = await run("正在混合音频…", () => mixAudioIntoMp4(video, audio, volume, loop));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ jsxs(LabCard, {
-		title: "视频配音",
-		description: "把音轨混入 MP4：只重编码音频，视频轨不动，画质零损失。",
-		apis: ["mixinMP4AndAudio"],
-		children: [
-			/* @__PURE__ */ jsx(FilePickButton, {
-				label: video == null ? "选择视频（MP4）" : video.name,
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setVideo(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ jsx(FilePickButton, {
-				label: audio == null ? "选择音频（MP3/WAV/M4A）" : audio.name,
-				accept: "audio/*",
-				onFiles: (files) => {
-					setAudio(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ jsx(SliderRow, {
-				label: "音量",
-				value: volume,
-				min: 0,
-				max: 2,
-				step: .05,
-				format: (v) => `${Math.round(v * 100)}%`,
-				onChange: setVolume
-			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "flex items-center gap-2 text-[11px] text-muted-foreground",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					checked: loop,
-					onChange: (e) => setLoop(e.target.checked),
-					className: "accent-primary"
-				}), "音频短于视频时循环填充"]
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				disabled: video == null || audio == null || busy != null,
-				onClick: () => void handleMix(),
-				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: "开始混合"
-			}),
-			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ jsx(ResultPreview, {
-				blob: result,
-				filename: "mixin.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/ChromakeyLab.tsx
-/**
-* Lab 3：绿幕抠像。
-*
-* `createChromakey` 返回一个函数，把 VideoFrame 转成去背后的 ImageBitmap。
-* 配合 `MP4Clip.tickInterceptor` 即可对整段视频生效（导出时同样有效）。
-*
-* ⚠️ 依赖 WebGL2；不支持时本卡片隐藏操作、仅显示原因。
-*/
-/**
-* 抠像结果的兜底底色：读取主题令牌，而不是写死 `#101018`。
-*
-* 抠像后的 VideoFrame 带透明通道，需要一层底色才能看清；用 `--cw-stage-bg`
-* 让 Lab 预览区与工作台舞台保持一致，宿主换主题时一起变。
-* 取不到时退回深色（纯逻辑环境 / 未包 `.cw-root`）。
-*/
-function readStageBackground() {
-	if (typeof document === "undefined") return "#101018";
-	const root = document.querySelector(".cw-root");
-	if (root == null) return "#101018";
-	const value = getComputedStyle(root).getPropertyValue("--cw-stage-bg").trim();
-	return value.length > 0 ? value : "#101018";
-}
-function ChromakeyLab() {
-	const [webgl2] = useState(isWebGL2Available);
-	const [file, setFile] = useState(null);
-	const [similarity, setSimilarity] = useState(.4);
-	const [smoothness, setSmoothness] = useState(.1);
-	const [spill, setSpill] = useState(.1);
-	const [timeUs, setTimeUs] = useState(0);
-	const [durationUs, setDurationUs] = useState(0);
-	const canvasRef = useRef(null);
-	const clipRef = useRef(null);
-	const { busy, run } = useLabAction();
-	useEffect(() => {
-		return () => {
-			clipRef.current?.destroy();
-			clipRef.current = null;
-		};
-	}, []);
-	const render = useCallback(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await renderChromakeyFrame(clip, timeUs, {
-			similarity,
-			smoothness,
-			spill,
-			keyColor: [
-				0,
-				255,
-				0
-			]
-		}, canvas, readStageBackground());
-	}, [
-		similarity,
-		smoothness,
-		spill,
-		timeUs
-	]);
-	const handleFile = async (files) => {
-		const picked = files[0];
-		if (picked == null) return;
-		const result = await run("正在解析视频…", async () => {
-			clipRef.current?.destroy();
-			return await createMp4Clip(picked);
-		});
-		if (result == null) return;
-		clipRef.current = result.clip;
-		setFile(picked);
-		setDurationUs(result.meta.duration);
-		setTimeUs(Math.min(result.meta.duration / 2, 1e6));
-		toast.success("已载入视频，拖动参数查看抠像效果");
-	};
-	useEffect(() => {
-		if (clipRef.current == null || busy != null) return;
-		render();
-	}, [busy, render]);
-	return /* @__PURE__ */ jsxs(LabCard, {
-		title: "绿幕抠像",
-		description: "用 WebGL2 实时扣除背景色，通过 tickInterceptor 作用到整段视频。",
-		apis: ["createChromakey", "MP4Clip.tickInterceptor"],
-		unavailable: webgl2 ? null : "当前设备不支持 WebGL2，createChromakey 无法运行。",
-		children: [
-			/* @__PURE__ */ jsx(FilePickButton, {
-				label: file?.name ?? "选择绿幕视频（MP4）",
-				accept: "video/mp4",
-				onFiles: (files) => void handleFile(files),
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative overflow-hidden rounded-md border bg-stage-bg",
-				children: [/* @__PURE__ */ jsx("canvas", {
-					ref: canvasRef,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				}), file == null && /* @__PURE__ */ jsx("div", {
-					className: "pointer-events-none absolute inset-0 flex h-24 items-center justify-center text-[10px] text-muted-foreground",
-					children: "选择视频后显示抠像结果"
-				})]
-			}),
-			/* @__PURE__ */ jsx(SliderRow, {
-				label: "相似度 similarity",
-				value: similarity,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSimilarity
-			}),
-			/* @__PURE__ */ jsx(SliderRow, {
-				label: "平滑度 smoothness",
-				value: smoothness,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSmoothness
-			}),
-			/* @__PURE__ */ jsx(SliderRow, {
-				label: "饱和度 spill",
-				value: spill,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSpill
-			}),
-			durationUs > 0 && /* @__PURE__ */ jsx(SliderRow, {
-				label: "取帧时间",
-				value: timeUs,
-				min: 0,
-				max: Math.max(1, durationUs - 1),
-				step: 1e5,
-				format: (v) => `${(v / 1e6).toFixed(2)}s`,
-				onChange: setTimeUs
-			}),
-			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
-			/* @__PURE__ */ jsx("p", {
-				className: "text-[10px] leading-relaxed text-muted-foreground",
-				children: "keyColor 固定为纯绿 (0,255,0)。实际项目中可读取首帧像素自动取色。"
-			})
-		]
-	});
-}
-// src/features/lab/components/SubtitleLab.tsx
-var SAMPLE_SRT = `1
-00:00:00,000 --> 00:00:02,000
-这是第一句字幕
-
-2
-00:00:02,000 --> 00:00:04,000
-第二句会带描边
-
-3
-00:00:04,000 --> 00:00:06,000
-EmbedSubtitlesClip 烧录进画面
-`;
-/**
-* Lab 4：字幕烧录。
-*
-* `EmbedSubtitlesClip` 本身就是一个 IClip：tick 返回带字幕的 VideoFrame。
-* 因此既能放进 Combinator 导出，也能直接逐帧预览。
-*/
-function SubtitleLab() {
-	const [srt, setSrt] = useState(SAMPLE_SRT);
-	const [timeUs, setTimeUs] = useState(0);
-	const [playing, setPlaying] = useState(false);
-	const [result, setResult] = useState(null);
-	const { busy, run } = useLabAction();
-	const canvasRef = useRef(null);
-	const clipRef = useRef(null);
-	const rafRef = useRef(null);
-	const cues = parseSrt(srt);
-	const durationUs = cues.length > 0 ? cues[cues.length - 1].endMs * 1e3 : 0;
-	useEffect(() => {
-		clipRef.current?.destroy();
-		if (cues.length === 0) {
-			clipRef.current = null;
-			return;
-		}
-		try {
-			clipRef.current = createSubtitlePreviewClip(srt, 640, 360);
-		} catch (err) {
-			console.warn("[SubtitleLab] create failed", err);
-			clipRef.current = null;
-		}
-		return () => {
-			clipRef.current?.destroy();
-			clipRef.current = null;
-		};
-	}, [cues.length, srt]);
-	const draw = useCallback(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await renderSubtitleFrame(clip, timeUs, canvas);
-	}, [timeUs]);
-	useEffect(() => {
-		draw();
-	}, [draw]);
-	useEffect(() => {
-		if (!playing) return;
-		let last = performance.now();
-		let current = timeUs;
-		const tick = () => {
-			const now = performance.now();
-			current += (now - last) * 1e3;
-			last = now;
-			if (durationUs > 0 && current >= durationUs) {
-				setTimeUs(durationUs);
-				setPlaying(false);
-				return;
-			}
-			setTimeUs(current);
-			rafRef.current = requestAnimationFrame(tick);
-		};
-		rafRef.current = requestAnimationFrame(tick);
-		return () => {
-			if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
-		};
-	}, [playing, durationUs]);
-	const handleBurn = async () => {
-		const width = 1280;
-		const height = 720;
-		const output = await run("正在烧录字幕…", () => burnSubtitles(srt, width, height, durationUs));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ jsxs(LabCard, {
-		title: "字幕烧录",
-		description: "SRT 解析后逐帧绘制到画面，最终编码进视频流（硬字幕）。",
-		apis: ["EmbedSubtitlesClip", "Combinator"],
-		children: [
-			/* @__PURE__ */ jsx("textarea", {
-				value: srt,
-				onChange: (e) => setSrt(e.target.value),
-				rows: 5,
-				className: "w-full rounded-md border bg-transparent p-2 font-mono text-[10px] outline-none focus-visible:border-ring",
-				placeholder: "粘贴 SRT 内容"
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ jsx("canvas", {
-					ref: canvasRef,
-					width: 640,
-					height: 360,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => setPlaying((p) => !p),
-					disabled: cues.length === 0,
-					className: "flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-[11px] disabled:opacity-50",
-					children: [playing ? /* @__PURE__ */ jsx(Square, { className: "size-3" }) : /* @__PURE__ */ jsx(Play, { className: "size-3" }), playing ? "停止" : "预览"]
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "text-[10px] text-muted-foreground",
-					children: [
-						cues.length,
-						" 条 · ",
-						(timeUs / 1e6).toFixed(2),
-						"s / ",
-						(durationUs / 1e6).toFixed(2),
-						"s"
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsx(SliderRow, {
-				label: "时间",
-				value: timeUs,
-				min: 0,
-				max: Math.max(1, durationUs),
-				step: 1e4,
-				format: (v) => `${(v / 1e6).toFixed(2)}s`,
-				onChange: (v) => {
-					setPlaying(false);
-					setTimeUs(v);
-				}
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				disabled: cues.length === 0 || busy != null,
-				onClick: () => void handleBurn(),
-				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: "烧录并导出 MP4"
-			}),
-			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ jsx(ResultPreview, {
-				blob: result,
-				filename: "subtitles.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/TrackSplitLab.tsx
-/**
-* Lab 5：轨道拆分。
-*
-* `splitTrack()` 从一个 MP4Clip 派生出「纯视频」与「纯音频」两个 clip，
-* 它们与源共享样本表，因此内存开销很小。
-*/
-function TrackSplitLab() {
-	const [file, setFile] = useState(null);
-	const [result, setResult] = useState(null);
-	const { busy, run } = useLabAction();
-	const cleanupRef = useRef(null);
-	useEffect(() => {
-		return () => cleanupRef.current?.();
-	}, []);
-	const handleSplit = async () => {
-		if (file == null) return;
-		cleanupRef.current?.();
-		const output = await run("正在拆分轨道…", () => splitMp4Tracks(file));
-		setResult(output);
-		cleanupRef.current = () => {
-			output?.videoClip?.destroy();
-			output?.audioClip?.destroy();
-		};
-	};
-	return /* @__PURE__ */ jsxs(LabCard, {
-		title: "轨道拆分",
-		description: "把一个 MP4 拆成纯视频轨与纯音频轨两个独立 IClip，用于分别编辑。",
-		apis: ["MP4Clip.splitTrack"],
-		children: [
-			/* @__PURE__ */ jsx(FilePickButton, {
-				label: file?.name ?? "选择 MP4",
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setFile(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				disabled: file == null || busy != null,
-				onClick: () => void handleSplit(),
-				className: "flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: [/* @__PURE__ */ jsx(Split, { className: "size-3" }), "拆分轨道"]
-			}),
-			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ jsxs("div", {
-				className: "grid gap-1.5 text-[10px]",
-				children: [
-					/* @__PURE__ */ jsx(TrackResult, {
-						label: "视频轨",
-						present: result.videoMeta != null,
-						detail: result.videoMeta != null ? `${result.videoMeta.width}×${result.videoMeta.height} · ${formatDuration(result.videoMeta.duration)}` : "源文件无视频轨"
-					}),
-					/* @__PURE__ */ jsx(TrackResult, {
-						label: "音频轨",
-						present: result.audioMeta != null,
-						detail: result.audioMeta != null ? `48kHz 双声道 · ${formatDuration(result.audioMeta.duration)}` : "源文件无音频轨"
-					}),
-					/* @__PURE__ */ jsx("p", {
-						className: "pt-1 leading-relaxed text-muted-foreground",
-						children: "拆分出的 clip 与源共享样本表，可分别创建 Sprite 放到不同轨道；两者在时间轴上对齐即等于原片。"
-					})
-				]
-			})
-		]
-	});
-}
-function TrackResult({ label, present, detail }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between gap-2 rounded-md border px-2 py-1.5",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: present ? "text-foreground" : "text-muted-foreground",
-			children: label
-		}), /* @__PURE__ */ jsx("span", {
-			className: present ? "font-mono text-success" : "text-muted-foreground",
-			children: present ? detail : detail
-		})]
-	});
-}
-// src/features/lab/components/ThumbnailLab.tsx
-/**
-* Lab 6：缩略图抽帧。
-*
-* `MP4Clip.thumbnails()` 默认每个关键帧生成一张；也可以传 step 按固定间隔取。
-* 这里展示全部关键帧与时间戳。
-*/
-function ThumbnailLab() {
-	const [file, setFile] = useState(null);
-	const [frames, setFrames] = useState([]);
-	const [width, setWidth] = useState(120);
-	const { busy, run } = useLabAction();
-	useEffect(() => {
-		return () => {
-			for (const frame of frames) URL.revokeObjectURL(frame.url);
-		};
-	}, [frames]);
-	const handleExtract = async () => {
-		if (file == null) return;
-		const output = await run("正在抽取关键帧…", () => extractKeyframes(file, width));
-		if (output != null) setFrames(output);
-	};
-	return /* @__PURE__ */ jsxs(LabCard, {
-		title: "缩略图抽帧",
-		description: "按关键帧抽取缩略图，可用于时间轴缩略图带或场景切分预览。",
-		apis: ["MP4Clip.thumbnails"],
-		children: [
-			/* @__PURE__ */ jsx(FilePickButton, {
-				label: file?.name ?? "选择 MP4",
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setFile(files[0] ?? null);
-					setFrames([]);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsx("label", {
-						className: "text-[10px] text-muted-foreground",
-						children: "宽度"
-					}),
-					/* @__PURE__ */ jsx("input", {
-						type: "number",
-						min: 40,
-						max: 480,
-						step: 20,
-						value: width,
-						onChange: (e) => setWidth(Number(e.target.value)),
-						className: "h-6 w-16 rounded border bg-transparent px-1.5 text-[11px]"
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						disabled: file == null || busy != null,
-						onClick: () => void handleExtract(),
-						className: "ml-auto rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-						children: "抽取"
-					})
-				]
-			}),
-			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
-			frames.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", {
-				className: "text-[10px] text-muted-foreground",
-				children: [
-					"共 ",
-					frames.length,
-					" 张关键帧"
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "thin-scrollbar grid max-h-52 grid-cols-3 gap-1.5 overflow-auto",
-				children: frames.map((frame, index) => /* @__PURE__ */ jsxs("figure", {
-					className: "space-y-0.5",
-					children: [/* @__PURE__ */ jsx("img", {
-						src: frame.url,
-						alt: "",
-						className: "w-full rounded border object-cover",
-						loading: "lazy"
-					}), /* @__PURE__ */ jsx("figcaption", {
-						className: "font-mono text-[9px] text-muted-foreground tabular-nums",
-						children: formatTimecode(frame.ts)
-					})]
-				}, `${frame.ts}-${index}`))
-			})] })
-		]
-	});
-}
-// src/features/lab/components/RecorderLab.tsx
-/**
-* Lab 7：屏幕 / 画布录制。
-*
-* `AVRecorder` 接收任意 MediaStream 并输出 MP4（H.264 + AAC）。
-* 这里提供两种源：
-* - 程序化画布（Canvas.captureStream，无需授权）；
-* - 摄像头（getUserMedia，需要用户授权）。
-*/
-function RecorderLab() {
-	const [mode, setMode] = useState("demo");
-	const [recording, setRecording] = useState(false);
-	const [paused, setPaused] = useState(false);
-	const [bytes, setBytes] = useState(0);
-	const [state, setState] = useState("inactive");
-	const [result, setResult] = useState(null);
-	const [previewStream, setPreviewStream] = useState(null);
-	const videoRef = useRef(null);
-	const recorderRef = useRef(null);
-	const demoRef = useRef(null);
-	const cameraRef = useRef(null);
-	const { run } = useLabAction();
-	useEffect(() => {
-		const video = videoRef.current;
-		if (video == null) return;
-		video.srcObject = previewStream;
-		if (previewStream != null) video.play().catch(() => void 0);
-		return () => {
-			if (video.srcObject === previewStream) video.srcObject = null;
-		};
-	}, [previewStream]);
-	const cleanup = useCallback(() => {
-		demoRef.current?.stop();
-		demoRef.current = null;
-		cameraRef.current?.getTracks().forEach((t) => t.stop());
-		cameraRef.current = null;
-		recorderRef.current?.dispose();
-		recorderRef.current = null;
-		setPreviewStream(null);
-	}, []);
-	useEffect(() => cleanup, [cleanup]);
-	const acquireStream = async () => {
-		cleanup();
-		if (mode === "demo") {
-			const demo = createDemoCanvasStream(1280, 720);
-			demoRef.current = demo;
-			setPreviewStream(demo.stream);
-			return demo.stream;
-		}
-		try {
-			const stream = await navigator.mediaDevices.getUserMedia({
-				video: true,
-				audio: true
-			});
-			cameraRef.current = stream;
-			setPreviewStream(stream);
-			return stream;
-		} catch (err) {
-			const message = err instanceof Error ? err.message : String(err);
-			toast.error("无法访问摄像头", { description: message });
-			return null;
-		}
-	};
-	const handleStart = async () => {
-		const stream = await acquireStream();
-		if (stream == null) return;
-		setBytes(0);
-		setResult(null);
-		const recorder = createRecorderAdapter(stream, (total) => setBytes(total));
-		recorderRef.current = recorder;
-		recorder.start();
-		setRecording(true);
-		setPaused(false);
-		setState(recorder.state());
-	};
-	const handlePauseToggle = () => {
-		const recorder = recorderRef.current;
-		if (recorder == null) return;
-		if (paused) {
-			recorder.resume();
-			setPaused(false);
-		} else {
-			recorder.pause();
-			setPaused(true);
-		}
-		setState(recorder.state());
-	};
-	const handleStop = async () => {
-		const recorder = recorderRef.current;
-		if (recorder == null) return;
-		const output = await run("正在封装 MP4…", async () => {
-			const raw = await recorder.stop();
-			return fixRecordedDuration(raw);
-		});
-		setRecording(false);
-		setPaused(false);
-		setState(recorder.state());
-		recorderRef.current = null;
-		if (output != null) {
-			setResult(output);
-			toast.success(`录制完成 · ${(output.size / 1024 / 1024).toFixed(2)} MB`);
-		}
-	};
-	return /* @__PURE__ */ jsxs(LabCard, {
-		title: "屏幕 / 画布录制",
-		description: "用 AVRecorder 把 MediaStream 实时编码为 MP4。可录制程序化画布或摄像头。",
-		apis: ["AVCanvas.captureStream", "AVRecorder.start/pause/resume/stop"],
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "flex gap-1.5",
-				children: ["demo", "camera"].map((item) => /* @__PURE__ */ jsx("button", {
-					type: "button",
-					disabled: recording,
-					onClick: () => setMode(item),
-					className: `flex-1 rounded-md border px-2 py-1 text-[11px] disabled:opacity-50 ${mode === item ? "border-primary bg-primary/10 text-primary" : "text-muted-foreground"}`,
-					children: item === "demo" ? "动态画布" : "摄像头"
-				}, item))
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ jsx("video", {
-					ref: videoRef,
-					muted: true,
-					playsInline: true,
-					className: "block w-full",
-					style: { maxHeight: 170 }
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center gap-1.5",
-				children: [!recording ? /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => void handleStart(),
-					className: "flex items-center gap-1 rounded-md bg-destructive px-2.5 py-1 text-[11px] text-destructive-foreground",
-					children: [/* @__PURE__ */ jsx(Circle, { className: "size-3 fill-current" }), "开始录制"]
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: handlePauseToggle,
-					className: "flex items-center gap-1 rounded-md bg-secondary px-2.5 py-1 text-[11px]",
-					children: [paused ? /* @__PURE__ */ jsx(Play, { className: "size-3" }) : /* @__PURE__ */ jsx(Pause, { className: "size-3" }), paused ? "继续" : "暂停"]
-				}), /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => void handleStop(),
-					className: "flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-[11px] text-primary-foreground",
-					children: [/* @__PURE__ */ jsx(Square, { className: "size-3" }), "停止"]
-				})] }), /* @__PURE__ */ jsxs("span", {
-					className: "ml-auto font-mono text-[10px] text-muted-foreground tabular-nums",
-					children: [
-						(bytes / 1024 / 1024).toFixed(2),
-						" MB · ",
-						formatRecorderState(state)
-					]
-				})]
-			}),
-			result != null && /* @__PURE__ */ jsx(ResultPreview, {
-				blob: result,
-				filename: "recording.mp4"
-			})
-		]
-	});
-}
-/** 适配 RecorderHandle（隔离 AVRecorder 细节） */
-function createRecorderAdapter(stream, onChunk) {
-	const recorder = new AVRecorder(stream, { expectFPS: 30 });
-	const chunks = [];
-	let total = 0;
-	return {
-		start: () => {
-			const readable = recorder.start(300);
-			(async () => {
-				const reader = readable.getReader();
-				for (;;) try {
-					const { done, value } = await reader.read();
-					if (done) break;
-					if (value != null) {
-						chunks.push(new Uint8Array(value));
-						total += value.byteLength;
-						onChunk(total);
-					}
-				} catch {
-					break;
-				}
-			})();
-		},
-		pause: () => recorder.pause(),
-		resume: () => recorder.resume(),
-		stop: async () => {
-			await recorder.stop();
-			return new Blob(chunks, { type: "video/mp4" });
-		},
-		state: () => recorder.state,
-		dispose: () => {
-			stream.getTracks().forEach((t) => t.stop());
-		}
-	};
-}
-// src/features/lab/components/CustomClipLab.tsx
-/**
-* Lab 8：自定义 IClip。
-*
-* `FrameCounterClip` 是本项目实现的 IClip：不依赖任何媒体文件，
-* 逐帧用 OffscreenCanvas 画出帧号 / 进度条 / 色相变化。
-*
-* 它证明 IClip 接口（tick / ready / meta / clone / split / destroy）可以被任意扩展，
-* 且能直接被 Combinator 编码成 MP4。
-*/
-function CustomClipLab() {
-	const [durationSec, setDurationSec] = useState(5);
-	const [timeUs, setTimeUs] = useState(0);
-	const [playing, setPlaying] = useState(false);
-	const [result, setResult] = useState(null);
-	const canvasRef = useRef(null);
-	const clipRef = useRef(null);
-	const rafRef = useRef(null);
-	const { busy, run } = useLabAction();
-	const durationUs = Math.round(durationSec * 1e6);
-	useEffect(() => {
-		clipRef.current?.destroy();
-		try {
-			clipRef.current = new FrameCounterClip(640, 360, durationUs, 30);
-		} catch (err) {
-			console.warn("[CustomClipLab] create failed", err);
-			clipRef.current = null;
-		}
-		return () => {
-			clipRef.current?.destroy();
-			clipRef.current = null;
-		};
-	}, [durationUs]);
-	const draw = useCallback(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await renderClipFrameToCanvas(clip, timeUs, canvas);
-	}, [timeUs]);
-	useEffect(() => {
-		draw();
-	}, [draw]);
-	useEffect(() => {
-		if (!playing) return;
-		let last = performance.now();
-		let current = timeUs;
-		const tick = () => {
-			const now = performance.now();
-			current += (now - last) * 1e3;
-			last = now;
-			if (current >= durationUs) {
-				setTimeUs(durationUs - 1);
-				setPlaying(false);
-				return;
-			}
-			setTimeUs(current);
-			rafRef.current = requestAnimationFrame(tick);
-		};
-		rafRef.current = requestAnimationFrame(tick);
-		return () => {
-			if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
-		};
-	}, [playing, durationUs]);
-	const handleExport = async () => {
-		const clip = clipRef.current;
-		if (clip == null) return;
-		const output = await run("正在编码自定义 Clip…", () => exportCustomClip(clip, durationUs));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ jsxs(LabCard, {
-		title: "自定义 IClip",
-		description: "纯程序化渲染的 Clip（帧计数器），不依赖任何媒体文件，证明接口可扩展。",
-		apis: [
-			"IClip.tick",
-			"IClip.clone",
-			"IClip.split",
-			"Combinator"
-		],
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ jsx("canvas", {
-					ref: canvasRef,
-					width: 640,
-					height: 360,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => {
-						if (!playing && timeUs >= durationUs - 1) setTimeUs(0);
-						setPlaying((p) => !p);
-					},
-					className: "flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-[11px]",
-					children: [playing ? /* @__PURE__ */ jsx(Square, { className: "size-3" }) : /* @__PURE__ */ jsx(Play, { className: "size-3" }), playing ? "停止" : "预览"]
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "font-mono text-[10px] text-muted-foreground tabular-nums",
-					children: [
-						formatTimecode(timeUs),
-						" / ",
-						formatTimecode(durationUs)
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsx(SliderRow, {
-				label: "时间",
-				value: timeUs,
-				min: 0,
-				max: Math.max(1, durationUs - 1),
-				step: 1e4,
-				format: (v) => `${(v / 1e6).toFixed(2)}s`,
-				onChange: (v) => {
-					setPlaying(false);
-					setTimeUs(v);
-				}
-			}),
-			/* @__PURE__ */ jsx(SliderRow, {
-				label: "时长",
-				value: durationSec,
-				min: 1,
-				max: 20,
-				step: .5,
-				format: (v) => `${v.toFixed(1)}s`,
-				onChange: (v) => {
-					setPlaying(false);
-					setDurationSec(v);
-					setTimeUs(0);
-				}
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				disabled: busy != null,
-				onClick: () => void handleExport(),
-				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: "编码为 MP4"
-			}),
-			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ jsx(ResultPreview, {
-				blob: result,
-				filename: "custom-clip.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/LabPage.tsx
-/**
-* 能力实验室：每个 WebAV 高级 API 一个可独立运行的卡片。
-*
-* 与主编辑器共享同一套能力探测结果，因此这里不再重复检测。
-*/
-function LabPage() {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-auto max-w-7xl space-y-4 p-4",
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "space-y-1",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx(FlaskConical, { className: "size-4 text-primary" }), /* @__PURE__ */ jsx("h1", {
-						className: "text-sm font-semibold",
-						children: "能力实验室"
-					})]
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-xs text-muted-foreground",
-					children: "覆盖 av-cliper / av-canvas / av-recorder 的进阶 API。每个卡片可独立运行，失败时给出可读原因。"
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3",
-				children: [
-					/* @__PURE__ */ jsx(ConcatenateLab, {}),
-					/* @__PURE__ */ jsx(RemuxLab, {}),
-					/* @__PURE__ */ jsx(ChromakeyLab, {}),
-					/* @__PURE__ */ jsx(SubtitleLab, {}),
-					/* @__PURE__ */ jsx(TrackSplitLab, {}),
-					/* @__PURE__ */ jsx(ThumbnailLab, {}),
-					/* @__PURE__ */ jsx(RecorderLab, {}),
-					/* @__PURE__ */ jsx(CustomClipLab, {})
-				]
-			}),
-			/* @__PURE__ */ jsx("footer", {
-				className: "border-t pt-3 text-[10px] leading-relaxed text-muted-foreground",
-				children: "说明：所有输出均为 MP4（H.264 + AAC 48kHz 双声道）。WebAV 生成的是 fMP4 分片， 部分播放器需「修复时长」；浏览器本地处理，文件不会上传。"
-			})
-		]
-	});
-}
-// src/CutWorkbench.tsx
-/**
-* 工作台容器：把「三栏骨架 + 顶栏 + 弹窗」组装成一个可配置组件。
+* 工作台容器：把「三栏骨架 + 顶栏 + 弹窗」组装成一个可配置组件。
 *
 * 与旧 `App` 的区别：
 * - 不自己创建编辑器（由外层 Provider 注入），因此支持多实例；
@@ -7570,11 +6441,22 @@ function LabPage() {
 * - 不强制能力阻断页（宿主可自行决定）。
 */
 /**
+* Lab 的懒加载器。
+*
+* ⚠️ 用**字面量**模块说明符做动态 import，而不是先从 `./features/lab` 拿组件：
+* 前者会被打包成 external（`import('@cut-workbench/workbench/lab')`），由宿主
+* 打包器解析；后者会把 lab 整棵子树（含 `@webav/av-recorder`）拉回本包的模块图。
+*
+* 解析到 lab 还是 stub，由宿主的 `resolve.alias` 决定 —— 这是移除 lab 的
+* 唯一可靠方式（运行时开关删不掉已产出的 chunk，见 src/lab.ts 顶部说明）。
+*/
+var LabPage = lazy(() => import("@cut-workbench/workbench/lab").then((m) => ({ default: m.LabPage })));
+/**
 * 工作台主体。
 *
 * 必须在 `<WorkbenchProvider>` + `<CutEditorProvider>` 之内使用。
 */
-function CutWorkbench({ slots, className, onSaveProject, onOpenProject, enforceCapability = true }) {
+function CutWorkbench({ slots, toolbar: toolbarOptions, className, onSaveProject, onOpenProject, enforceCapability = true }) {
 	const editor = useCutEditor();
 	const capability = useCapabilityInfo();
 	const leftWidth = useUi((s) => s.leftWidth);
@@ -7638,10 +6520,18 @@ function CutWorkbench({ slots, className, onSaveProject, onOpenProject, enforceC
 			onExport: handleExport,
 			onSaveProject: onSaveProject != null ? handleSave : void 0,
 			onOpenProject: onOpenProject != null ? handleOpen : void 0,
+			brand: toolbarOptions?.brand,
+			title: toolbarOptions?.title,
+			status: toolbarOptions?.status,
+			actions: toolbarOptions?.actions,
+			showCapabilityBadge: toolbarOptions?.showCapabilityBadge,
+			editableTitle: toolbarOptions?.editableTitle,
+			labels: toolbarOptions?.labels,
 			showLab: config.features.lab
 		});
 	}, [
 		slots?.topBar,
+		toolbarOptions,
 		capability,
 		handleExport,
 		handleSave,
@@ -7668,7 +6558,17 @@ function CutWorkbench({ slots, className, onSaveProject, onOpenProject, enforceC
 			toolbar,
 			/* @__PURE__ */ jsx("div", {
 				className: "min-h-0 flex-1 overflow-auto",
-				children: /* @__PURE__ */ jsx(LabPage, {})
+				children: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx("div", {
+						className: "flex h-full items-center justify-center",
+						children: /* @__PURE__ */ jsx(LoadingOverlay, {
+							visible: true,
+							title: "正在加载能力实验室…",
+							fullscreen: false
+						})
+					}),
+					children: /* @__PURE__ */ jsx(LabPage, {})
+				})
 			}),
 			/* @__PURE__ */ jsx(ExportDialog, {}),
 			/* @__PURE__ */ jsx(CanvasSettingsDialog, {
@@ -8746,6 +7646,7 @@ function initCutWorkbench(container, options = {}) {
 		}, createElement(CutWorkbench, {
 			className: options.className ?? "h-full w-full",
 			enforceCapability: options.enforceCapability ?? true,
+			toolbar: options.toolbar,
 			onSaveProject: () => void instance.saveProject(),
 			onOpenProject: async () => {
 				const saved = await storage.load(namespace);