@cut-workbench/workbench 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1,90 +1,76 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-// \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
+const require_format = require("./format--DhqHMgX.cjs");
 let react_dom_client = require("react-dom/client");
 let react = require("react");
-react = __toESM(react, 1);
+react = require_format.__toESM(react, 1);
 let _cut_workbench_core_engine = require("@cut-workbench/core/engine");
 let _cut_workbench_core = require("@cut-workbench/core");
 let _cut_workbench_react = require("@cut-workbench/react");
-let clsx = require("clsx");
-let tailwind_merge = require("tailwind-merge");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let class_variance_authority = require("class-variance-authority");
 let radix_ui = require("radix-ui");
 let sonner = require("sonner");
 let react_dropzone = require("react-dropzone");
-let _cut_workbench_core_lab = require("@cut-workbench/core/lab");
 let zustand_vanilla = require("zustand/vanilla");
-// src/lib/cn.ts
-/**
-* 合并 className：tailwind-merge 负责消解冲突，clsx 负责条件拼接。
-*/
-function cn(...inputs) {
-	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
-}
 // src/components/layout/AppShell.tsx
 /**
-* 三栏 + 底部时间轴骨架。
+* 工作台骨架：顶栏 + 上半区（素材 / 预览 / 属性）+ 底部通栏时间轴。
+*
+* ```
+* ┌───────────────────────────────────────────┐
+* │ 顶栏                                      │
+* ├──────────┬──────────────┬─────────────────┤
+* │ 素材库   │ 预览         │ 属性            │  上半区
+* ├──────────┴──────────────┴─────────────────┤
+* │ 时间轴（横跨整行）                        │  下栏
+* └───────────────────────────────────────────┘
+* ```
+*
+* 时间轴必须是**通栏**的：它曾被塞进中间列，于是左右面板一拉宽就把时间轴
+* 挤窄，工具条上的按钮直接溢出到属性面板上（实测右栏拉宽时溢出 203px）。
+* 与此同时，几乎所有 NLE 都是「轨道占满底部一条」，通栏也更符合预期。
 *
-* 布局用 inline style 的像素宽度做「受控」尺寸，配合 PanelResizer 的拖拽回写；
-* 这样不会因为 tailwind 的动态 class 被 purge 掉而失效。
+* 尺寸一律用 inline style 的像素值（受控），配合 PanelResizer 的拖拽回写；
+* 不用 tailwind 动态 class，避免被 purge 掉导致尺寸失效。
 */
 function AppShell({ topBar, left, center, right, timeline, leftWidth, rightWidth, timelineHeight, leftResizer, rightResizer, timelineResizer, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex h-full min-h-0 flex-col bg-background", className),
-		children: [topBar, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex min-h-0 flex-1",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-					className: "flex min-h-0 shrink-0 flex-col border-r bg-card/40",
-					style: { width: leftWidth },
-					children: left
-				}),
-				leftResizer,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
-					className: "flex min-w-0 flex-1 flex-col",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "flex min-h-0 flex-1 flex-col",
-							children: center
-						}),
-						timelineResizer,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-							className: "flex min-h-0 shrink-0 flex-col border-t bg-timeline-bg",
-							style: { height: timelineHeight },
-							children: timeline
-						})
-					]
-				}),
-				rightResizer,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-					className: "flex min-h-0 shrink-0 flex-col border-l bg-card/40",
-					style: { width: rightWidth },
-					children: right
-				})
-			]
-		})]
+		className: require_format.cn("flex h-full min-h-0 flex-col bg-background", className),
+		children: [
+			topBar,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("main", {
+						className: "flex min-h-[220px] min-w-0 flex-1 flex-col overflow-hidden",
+						"data-panel": "preview",
+						children: center
+					}),
+					rightResizer,
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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
@@ -120,7 +106,7 @@ function Button({ className, variant = "default", size = "default", asChild = fa
 		"data-slot": "button",
 		"data-variant": variant,
 		"data-size": size,
-		className: cn(buttonVariants({
+		className: require_format.cn(buttonVariants({
 			variant,
 			size,
 			className
@@ -134,7 +120,7 @@ function Separator({ className, orientation = "horizontal", decorative = true, .
 		"data-slot": "separator",
 		decorative,
 		orientation,
-		className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+		className: require_format.cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
 		...props
 	});
 }
@@ -213,33 +199,12 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Tooltip.Content, {
 			"data-slot": "tooltip-content",
 			sideOffset,
-			className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+			className: require_format.cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
 			...props,
 			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })]
 		})
 	});
 }
-// src/components/ui/badge.tsx
-var badgeVariants = (0, class_variance_authority.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 ? radix_ui.Slot.Root : "span";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
-		"data-slot": "badge",
-		"data-variant": variant,
-		className: cn(badgeVariants({ variant }), className),
-		...props
-	});
-}
 // src/components/ui/popover.tsx
 function Popover({ ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Popover.Root, {
@@ -261,7 +226,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
 			"data-slot": "popover-content",
 			align,
 			sideOffset,
-			className: cn("z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+			className: require_format.cn("z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
 			...props
 		})
 	});
@@ -272,7 +237,7 @@ function CapabilityBadge({ info }) {
 	const { status, report, summary } = info;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, {
 		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Badge, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_format.Badge, {
 			variant: "outline",
 			className: "cursor-pointer gap-1 text-[11px] font-normal select-none",
 			children: [status === "checking" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-3 animate-spin" }) : status === "ready" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "size-3 text-success" }) : status === "degraded" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { className: "size-3 text-warning" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, { className: "size-3 text-destructive" }), summary]
@@ -387,10 +352,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 = (0, _cut_workbench_react.useEditor)((s) => s.project.name);
+	const renameProject = (0, _cut_workbench_react.useEditor)((s) => s.renameProject);
 	const dirty = (0, _cut_workbench_react.useEditor)((s) => s.dirty);
 	const undo = (0, _cut_workbench_react.useEditor)((s) => s.undo);
 	const redo = (0, _cut_workbench_react.useEditor)((s) => s.redo);
@@ -402,44 +374,49 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 	const clipCount = (0, _cut_workbench_react.useEditor)((s) => s.project.clips.length);
 	const projectWidth = (0, _cut_workbench_react.useEditor)((s) => s.project.width);
 	const projectHeight = (0, _cut_workbench_react.useEditor)((s) => s.project.height);
-	const branding = brand === null ? null : brand ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2 pr-2",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex size-7 items-center justify-center rounded-md bg-primary text-primary-foreground",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clapperboard, { className: "size-4" })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ProjectTitle, {
+		name: projectName,
+		dirty,
+		placeholder: text.untitledProject,
+		editable: editableTitle,
+		onRename: renameProject
+	});
+	const statusNode = status === null ? null : status ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "hidden text-xs text-muted-foreground sm:inline",
+		children: [
+			clipCount > 0 ? `${clipCount} 个片段` : text.emptyProject,
+			" ·",
+			" ",
+			(0, _cut_workbench_core.ratioLabel)(projectWidth, projectHeight)
+		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Separator, {
+			branding != null && projectTitle != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
 				orientation: "vertical",
 				className: "h-5"
 			}),
+			projectTitle,
+			statusNode,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex min-w-0 items-center gap-1.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "truncate text-sm font-medium",
-					children: projectName
-				}), dirty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "size-1.5 rounded-full bg-primary",
-					title: "未保存"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "hidden text-xs text-muted-foreground sm:inline",
-				children: [
-					clipCount > 0 ? `${clipCount} 个片段` : "空工程",
-					" · ",
-					(0, _cut_workbench_core.ratioLabel)(projectWidth, projectHeight)
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "ml-auto flex items-center gap-1",
+				className: "ml-auto flex shrink-0 items-center gap-1",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
@@ -448,10 +425,10 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							size: "icon-sm",
 							onClick: undo,
 							disabled: !canUndo,
-							"aria-label": "撤销",
+							"aria-label": text.undo,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Undo2, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "撤销 (Ctrl+Z)" })] }),
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipContent, { children: [text.undo, " (Ctrl+Z)"] })] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -459,10 +436,10 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							size: "icon-sm",
 							onClick: redo,
 							disabled: !canRedo,
-							"aria-label": "重做",
+							"aria-label": text.redo,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Redo2, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "重做 (Ctrl+Shift+Z)" })] }),
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipContent, { children: [text.redo, " (Ctrl+Shift+Z)"] })] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
 						orientation: "vertical",
 						className: "mx-1 h-5"
@@ -473,29 +450,29 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							variant: "ghost",
 							size: "icon-sm",
 							onClick: onOpenProject,
-							"aria-label": "加载工程",
+							"aria-label": text.open,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FolderOpen, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "加载已保存工程" })] }),
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: text.open })] }),
 					onSaveProject != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "ghost",
 							size: "icon-sm",
 							onClick: onSaveProject,
-							"aria-label": "保存工程",
+							"aria-label": text.save,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Save, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "保存工程到本地" })] }),
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: text.save })] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 						variant: "ghost",
 						size: "sm",
 						className: "gap-1.5",
-						"aria-label": "画布设置",
+						"aria-label": text.canvasSettings,
 						onClick: () => openDialog("projectSettings"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "hidden md:inline",
-							children: "画布设置"
+							children: text.canvasSettings
 						})]
 					}),
 					showLab && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
@@ -505,21 +482,67 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 						onClick: () => setRoute(route === "lab" ? "editor" : "lab"),
 						children: [route === "lab" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Video, { className: "size-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FlaskConical, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "hidden md:inline",
-							children: route === "lab" ? "返回编辑器" : "能力实验室"
+							children: route === "lab" ? text.backToEditor : text.showLab
 						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapabilityBadge, { info: capability }),
+					showCapabilityBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapabilityBadge, { info: capability }),
+					actions,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 						size: "sm",
 						className: "ml-1 gap-1.5",
 						onClick: onExport,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, { className: "size-4" }), "导出"]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, { className: "size-4" }), text.export]
 					})
 				]
 			})
 		]
 	});
 }
+/**
+* 工程名展示（可选双击重命名）。
+*
+* 重命名走编辑器 store 的 `renameProject`，因此会进撤销栈、并标记 dirty ——
+* 直接改 DOM 或本地 state 会让「保存了什么」和「看到什么」对不上。
+*/
+function ProjectTitle({ name, dirty, placeholder, editable, onRename }) {
+	const [editing, setEditing] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(name);
+	const commit = () => {
+		setEditing(false);
+		const next = draft.trim();
+		if (next.length > 0 && next !== name) onRename(next);
+	};
+	if (editing) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 items-center gap-1.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_format.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__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "size-1.5 shrink-0 rounded-full bg-primary",
+			title: "未保存"
+		})]
+	});
+}
 // src/components/layout/use-panel-resize.ts
 /**
 * 面板拖拽调整。内部用 rAF 节流，松手才把最终值写回 store（避免每帧重渲染整棵树）。
@@ -598,44 +621,8 @@ function PanelResizer({ orientation, value, min, max, invert, onChange, classNam
 		"aria-orientation": isVertical ? "vertical" : "horizontal",
 		"aria-label": label,
 		onPointerDown,
-		className: cn("group relative z-20 shrink-0 touch-none transition-colors", isVertical ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize", dragging ? "bg-primary/60" : "bg-border hover:bg-primary/40", className),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "card-title",
-		className: cn("leading-none font-semibold", className),
-		...props
-	});
-}
-function CardDescription({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "card-description",
-		className: cn("text-sm text-muted-foreground", className),
-		...props
-	});
-}
-function CardContent({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "card-content",
-		className: cn("px-6", className),
-		...props
+		className: require_format.cn("group relative z-20 shrink-0 touch-none transition-colors", isVertical ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize", dragging ? "bg-primary/60" : "bg-border hover:bg-primary/40", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_format.cn("absolute", isVertical ? "-left-1 -right-1 inset-y-0" : "-top-1 -bottom-1 inset-x-0") })
 	});
 }
 // src/components/common/LoadingOverlay.tsx
@@ -643,7 +630,7 @@ function CardContent({ className, ...props }) {
 function LoadingOverlay({ visible, title = "处理中…", description, progress, className, fullscreen, children }) {
 	if (!visible) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm", fullscreen ? "fixed inset-0" : "absolute inset-0", className),
+		className: require_format.cn("z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm", fullscreen ? "fixed inset-0" : "absolute inset-0", className),
 		role: "status",
 		"aria-live": "polite",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -705,7 +692,12 @@ var CHECKS = [
 		hint: "绿幕抠像（可选）"
 	}
 ];
-/** 不满足运行条件时的阻断页：逐项说明缺失能力，不做静默降级 */
+/**
+* 不满足运行条件时的阻断页：逐项说明缺失能力，不做静默降级。
+*
+* 「依赖没装」与「浏览器不支持」要分开呈现 —— 前者是宿主的构建问题（可执行
+* 安装命令解决），后者只能换浏览器。混在一起会让人对着一条装包报错去升浏览器。
+*/
 function UnsupportedBrowser({ report, loading, error }) {
 	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "relative flex min-h-screen items-center justify-center bg-background",
@@ -715,23 +707,46 @@ function UnsupportedBrowser({ report, loading, error }) {
 			fullscreen: false
 		})
 	});
+	const missing = report?.missingDependencies ?? [];
+	const dependenciesMissing = missing.length > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex min-h-screen items-center justify-center bg-background p-6",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_format.Card, {
 			className: "w-full max-w-2xl",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_format.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2 text-destructive",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertOctagon, { className: "size-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertOctagon, { className: "size-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_format.CardTitle, {
 					className: "text-base",
-					children: "当前浏览器无法运行本应用"
+					children: dependenciesMissing ? "缺少引擎依赖" : "当前浏览器无法运行本应用"
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "text-sm text-muted-foreground",
-				children: "WebAV 依赖 WebCodecs 与 OPFS，仅支持 Chromium 内核浏览器。请使用最新版 Chrome 或 Edge（非无痕模式）重新打开。"
-			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardContent, {
+				children: dependenciesMissing ? "工作台的预览与导出依赖 WebAV（@webav/av-cliper、@webav/av-canvas）。当前项目里没有解析到它们。" : "WebAV 依赖 WebCodecs 与 OPFS，仅支持 Chromium 内核浏览器。请使用最新版 Chrome 或 Edge（非无痕模式）重新打开。"
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_format.CardContent, {
 				className: "space-y-4",
 				children: [
-					report != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					dependenciesMissing && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-2 rounded-md border border-destructive/40 bg-destructive/5 p-3",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "text-xs font-medium text-destructive",
+								children: ["未解析到：", missing.join("、")]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-xs text-muted-foreground",
+								children: "在宿主项目里执行："
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+								className: "overflow-x-auto rounded bg-muted px-3 py-2 text-xs",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: _cut_workbench_core_engine.ENGINE_DEPENDENCIES_INSTALL_COMMAND })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-xs text-muted-foreground",
+								children: "安装后需要重新跑一次构建 —— 缺失依赖只在构建期解析，浏览器里刷新页面没用。"
+							})
+						]
+					}),
+					report != null && !dependenciesMissing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "grid gap-2 sm:grid-cols-2",
 						children: CHECKS.map((check) => {
 							const value = report[check.key];
@@ -801,7 +816,7 @@ var Toaster = (props) => {
 function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 		"data-slot": "textarea",
-		className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className),
+		className: require_format.cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className),
 		...props
 	});
 }
@@ -809,7 +824,7 @@ function Textarea({ className, ...props }) {
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Label.Root, {
 		"data-slot": "label",
-		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: require_format.cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
 		...props
 	});
 }
@@ -817,7 +832,7 @@ function Label({ className, ...props }) {
 function ScrollArea({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.ScrollArea.Root, {
 		"data-slot": "scroll-area",
-		className: cn("relative", className),
+		className: require_format.cn("relative", className),
 		...props,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.Viewport, {
@@ -834,7 +849,7 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.ScrollAreaScrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation,
-		className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+		className: require_format.cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.ScrollAreaThumb, {
 			"data-slot": "scroll-area-thumb",
@@ -873,7 +888,7 @@ function DialogPortal({ ...props }) {
 function DialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Overlay, {
 		"data-slot": "dialog-overlay",
-		className: cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
+		className: require_format.cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
 		...props
 	});
 }
@@ -882,7 +897,7 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 		"data-slot": "dialog-portal",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Content, {
 			"data-slot": "dialog-content",
-			className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg", className),
+			className: require_format.cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg", className),
 			...props,
 			children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Close, {
 				"data-slot": "dialog-close",
@@ -898,14 +913,14 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "dialog-header",
-		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+		className: require_format.cn("flex flex-col gap-2 text-center sm:text-left", className),
 		...props
 	});
 }
 function DialogFooter({ className, showCloseButton = false, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-slot": "dialog-footer",
-		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		className: require_format.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
 			asChild: true,
@@ -919,14 +934,14 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Title, {
 		"data-slot": "dialog-title",
-		className: cn("text-lg leading-none font-semibold", className),
+		className: require_format.cn("text-lg leading-none font-semibold", className),
 		...props
 	});
 }
 function DialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Description, {
 		"data-slot": "dialog-description",
-		className: cn("text-sm text-muted-foreground", className),
+		className: require_format.cn("text-sm text-muted-foreground", className),
 		...props
 	});
 }
@@ -955,7 +970,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Content, {
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
-		className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		className: require_format.cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
 		...props
 	}) });
 }
@@ -964,7 +979,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		className: require_format.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
 		...props
 	});
 }
@@ -972,14 +987,14 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Label, {
 		"data-slot": "dropdown-menu-label",
 		"data-inset": inset,
-		className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
+		className: require_format.cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
 		...props
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Separator, {
 		"data-slot": "dropdown-menu-separator",
-		className: cn("-mx-1 my-1 h-px bg-border", className),
+		className: require_format.cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
 }
@@ -987,7 +1002,7 @@ function DropdownMenuSeparator({ className, ...props }) {
 /** 统一空态：图标 + 标题 + 说明 + 可选操作 */
 function EmptyState({ icon: Icon, title, description, action, className, compact }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex flex-col items-center justify-center gap-2 text-center", compact ? "px-4 py-6" : "px-6 py-12", className),
+		className: require_format.cn("flex flex-col items-center justify-center gap-2 text-center", compact ? "px-4 py-6" : "px-6 py-12", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground",
@@ -1005,41 +1020,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 (0, _cut_workbench_core.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"],
@@ -1080,12 +1060,12 @@ function DropZone({ onFiles, disabled, className, compact }) {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...getRootProps(),
-		className: cn("group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed text-center transition-colors", compact ? "px-3 py-2.5" : "px-4 py-8", isDragActive ? "border-primary bg-primary/10" : "border-border hover:border-primary/60 hover:bg-muted/40", disabled && "pointer-events-none opacity-50", className),
+		className: require_format.cn("group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed text-center transition-colors", compact ? "px-3 py-2.5" : "px-4 py-8", isDragActive ? "border-primary bg-primary/10" : "border-border hover:border-primary/60 hover:bg-muted/40", disabled && "pointer-events-none opacity-50", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...getInputProps() }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2 text-sm font-medium",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: cn("text-muted-foreground", compact ? "size-3.5" : "size-4") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: compact ? "导入素材" : isDragActive ? "松开以导入" : "拖入文件，或点击选择" })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: require_format.cn("text-muted-foreground", compact ? "size-3.5" : "size-4") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: compact ? "导入素材" : isDragActive ? "松开以导入" : "拖入文件，或点击选择" })]
 			}),
 			!compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "text-xs text-muted-foreground",
@@ -1107,7 +1087,7 @@ function DropZone({ onFiles, disabled, className, compact }) {
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "skeleton",
-		className: cn("animate-pulse rounded-md bg-accent", className),
+		className: require_format.cn("animate-pulse rounded-md bg-accent", className),
 		...props
 	});
 }
@@ -1156,7 +1136,7 @@ function MediaCard({ asset, selected, missing, onSelect, onAddToTimeline, onShow
 		onKeyDown: (e) => {
 			if (e.key === "Enter") onAddToTimeline();
 		},
-		className: cn("group relative flex cursor-pointer flex-col gap-1.5 rounded-lg border p-1.5 text-left transition-colors outline-none", missing ? "border-warning/50 bg-warning/5" : selected ? "border-primary bg-primary/10 ring-1 ring-primary/40" : "border-border bg-card hover:border-primary/40 hover:bg-muted/40 focus-visible:border-primary"),
+		className: require_format.cn("group relative flex cursor-pointer flex-col gap-1.5 rounded-lg border p-1.5 text-left transition-colors outline-none", missing ? "border-warning/50 bg-warning/5" : selected ? "border-primary bg-primary/10 ring-1 ring-primary/40" : "border-border bg-card hover:border-primary/40 hover:bg-muted/40 focus-visible:border-primary"),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative aspect-video w-full overflow-hidden rounded-md bg-muted",
@@ -1177,7 +1157,7 @@ function MediaCard({ asset, selected, missing, onSelect, onAddToTimeline, onShow
 							opacity: .9
 						})
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: cn("flex size-full items-center justify-center", kind.tone),
+						className: require_format.cn("flex size-full items-center justify-center", kind.tone),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-7" })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -1224,7 +1204,7 @@ function MediaCard({ asset, selected, missing, onSelect, onAddToTimeline, onShow
 					children: asset.name
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 					className: "truncate text-[10px] text-muted-foreground",
-					children: [asset.kind === "audio" ? `${formatBytes(asset.size)} · 48kHz 双声道` : asset.kind === "text" || asset.kind === "subtitle" ? `${formatResolution(asset.width, asset.height)}` : `${formatResolution(asset.width, asset.height)} · ${formatBytes(asset.size)}`, asset.hasAudio ? " · 含音轨" : ""]
+					children: [asset.kind === "audio" ? `${require_format.formatBytes(asset.size)} · 48kHz 双声道` : asset.kind === "text" || asset.kind === "subtitle" ? `${require_format.formatResolution(asset.width, asset.height)}` : `${require_format.formatResolution(asset.width, asset.height)} · ${require_format.formatBytes(asset.size)}`, asset.hasAudio ? " · 含音轨" : ""]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
@@ -1266,7 +1246,7 @@ function MediaGrid({ assets, selectedAssetId, missingAssetIds = [], progress, on
 		className: "grid grid-cols-2 gap-2.5 p-2.5",
 		children: [
 			progress.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("flex flex-col gap-1.5 rounded-lg border border-dashed p-1.5", item.error != null && "border-destructive/50 bg-destructive/5"),
+				className: require_format.cn("flex flex-col gap-1.5 rounded-lg border border-dashed p-1.5", item.error != null && "border-destructive/50 bg-destructive/5"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "aspect-video w-full rounded-md" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -1505,11 +1485,11 @@ function MediaLibraryPanel({ onAddToTimeline, onRemoveAsset }) {
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 								label: "分辨率",
-								value: formatResolution(metaAsset.width, metaAsset.height)
+								value: require_format.formatResolution(metaAsset.width, metaAsset.height)
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 								label: "大小",
-								value: metaAsset.kind === "text" ? "—" : formatBytes(metaAsset.size)
+								value: metaAsset.kind === "text" ? "—" : require_format.formatBytes(metaAsset.size)
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 								label: "音轨",
@@ -2305,7 +2285,7 @@ function PreviewStage({ attachRef, width, height, emptyHint, onCapture, onFullsc
 	const scaleY = height > 0 ? box.h / height : 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: outerRef,
-		className: cn("relative flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-stage-bg", className),
+		className: require_format.cn("relative flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-stage-bg", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative shrink-0 overflow-hidden rounded-md bg-black shadow-2xl ring-1 ring-border",
 			style: {
@@ -2366,14 +2346,14 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
 		value,
 		min,
 		max,
-		className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+		className: require_format.cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Slider.Track, {
 			"data-slot": "slider-track",
-			className: cn("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
+			className: require_format.cn("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Slider.Range, {
 				"data-slot": "slider-range",
-				className: cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+				className: require_format.cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
 			})
 		}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Slider.Thumb, {
 			"data-slot": "slider-thumb",
@@ -2388,7 +2368,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
 */
 function Timecode({ us, showMs = true, className, muted, title }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: cn("font-mono text-xs tabular-nums", muted && "text-muted-foreground", className),
+		className: require_format.cn("font-mono text-xs tabular-nums", muted && "text-muted-foreground", className),
 		title: title ?? `${us} µs`,
 		children: (0, _cut_workbench_core.formatTimecode)(us, showMs)
 	});
@@ -2400,15 +2380,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 = (0, react.useRef)(null);
+	const [width, setWidth] = (0, react.useState)(0);
+	/**
+	* 用容器宽度而不是 CSS 媒体查询。
+	*
+	* 预览面板宽度由左侧拖拽决定，和视口宽度无关 —— 用户把两侧拉宽时，
+	* 视口一点没变，`max-[560px]:hidden` 这类媒体查询不会触发，时间码照样被压扁。
+	*/
+	(0, react.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__ */ (0, react_jsx_runtime.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: require_format.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-0.5",
+				className: "flex shrink-0 items-center gap-0.5",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					!ultraCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "ghost",
@@ -2450,7 +2466,7 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.StepForward, { className: "size-3.5" })
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "下一帧 (→)" })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					!ultraCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "ghost",
@@ -2464,23 +2480,19 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mx-2 flex items-baseline gap-1",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
-						us: currentUs,
-						className: "text-[13px] font-medium"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-xs text-muted-foreground",
-						children: "/"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
-						us: durationUs,
-						muted: true
-					})
-				]
+				className: require_format.cn("mx-2 flex shrink-0 items-baseline gap-1 whitespace-nowrap", ultraCompact && "mx-1", micro && "hidden"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
+					us: currentUs,
+					className: "text-[13px] font-medium"
+				}), !tight && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-muted-foreground",
+					children: "/"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
+					us: durationUs,
+					muted: true
+				})] })]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			!ultraCompact && /* @__PURE__ */ (0, react_jsx_runtime.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,
@@ -2492,14 +2504,14 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 				"aria-label": "播放进度"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-1",
+				className: require_format.cn("flex shrink-0 items-center gap-1", compact && "ml-auto", micro && "hidden"),
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					!compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "flex items-center rounded-md border p-0.5",
 						children: RATES.map((rate) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							onClick: () => onRateChange(rate),
-							className: cn("rounded px-1.5 py-0.5 text-[11px] tabular-nums transition-colors", playbackRate === rate ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"),
+							className: require_format.cn("rounded px-1.5 py-0.5 text-[11px] tabular-nums transition-colors", playbackRate === rate ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"),
 							title: rate !== 1 ? "变速预览（不会改变导出结果）" : "正常速度",
 							children: [rate, "×"]
 						}, rate))
@@ -2514,7 +2526,7 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 							children: masterVolume > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Volume2, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.VolumeX, { className: "size-3.5" })
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: masterVolume > 0 ? "静音预览" : "取消静音" })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
+					full && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
 						className: "w-20",
 						min: 0,
 						max: 1,
@@ -2798,143 +2810,148 @@ var DEFAULT_BITRATE = 8e6;
 /** 时间轴顶部工具条：分割 / 复制 / 删除 / 吸附开关 / 缩放 / 加轨道 */
 function TimelineToolbar({ playheadUs, durationUs, pxPerSecond, selectionCount, magnetEnabled, onToggleMagnet, onSplit, onDuplicate, onRemove, onZoomIn, onZoomOut, onZoomToFit, onAddTrack, canZoomIn, canZoomOut }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex h-9 shrink-0 items-center gap-1 border-b bg-card/60 px-2",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onSplit,
-					"aria-label": "分割",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Scissors, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "在播放头分割 (S)" })] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onDuplicate,
-					disabled: selectionCount === 0,
-					"aria-label": "复制片段",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "复制片段 (Ctrl+D)" })] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onRemove,
-					disabled: selectionCount === 0,
-					"aria-label": "删除片段",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "删除片段 (Delete)" })] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					variant: magnetEnabled ? "secondary" : "ghost",
-					size: "icon-sm",
-					onClick: onToggleMagnet,
-					"aria-label": "吸附",
-					"aria-pressed": magnetEnabled,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Magnet, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "吸附对齐（阈值 15px）" })] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-0.5",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-							variant: "ghost",
-							size: "icon-sm",
-							onClick: onZoomOut,
-							disabled: !canZoomOut,
-							"aria-label": "缩小",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, { className: "size-3.5" })
-						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "缩小 (-)" })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "w-11 text-center font-mono text-[10px] text-muted-foreground tabular-nums",
-						children: Math.round(pxPerSecond)
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onSplit,
+						"aria-label": "分割",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Scissors, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "在播放头分割 (S)" })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onDuplicate,
+						disabled: selectionCount === 0,
+						"aria-label": "复制片段",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "复制片段 (Ctrl+D)" })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onRemove,
+						disabled: selectionCount === 0,
+						"aria-label": "删除片段",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "删除片段 (Delete)" })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						variant: magnetEnabled ? "secondary" : "ghost",
+						size: "icon-sm",
+						onClick: onToggleMagnet,
+						"aria-label": "吸附",
+						"aria-pressed": magnetEnabled,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Magnet, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "吸附对齐（阈值 15px）" })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-0.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: onZoomOut,
+								disabled: !canZoomOut,
+								"aria-label": "缩小",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, { className: "size-3.5" })
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "缩小 (-)" })] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "w-11 text-center font-mono text-[10px] text-muted-foreground tabular-nums",
+							children: Math.round(pxPerSecond)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: onZoomIn,
+								disabled: !canZoomIn,
+								"aria-label": "放大",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, { className: "size-3.5" })
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "放大 (+)" })] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "ghost",
-							size: "icon-sm",
-							onClick: onZoomIn,
-							disabled: !canZoomIn,
-							"aria-label": "放大",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, { className: "size-3.5" })
+							size: "xs",
+							onClick: onZoomToFit,
+							className: "text-[10px]",
+							children: "适应"
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "放大 (+)" })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-0.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 						variant: "ghost",
 						size: "xs",
-						onClick: onZoomToFit,
-						className: "text-[10px]",
-						children: "适应"
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-0.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-					variant: "ghost",
-					size: "xs",
-					onClick: () => onAddTrack("visual"),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-3" }), "视频轨"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-					variant: "ghost",
-					size: "xs",
-					onClick: () => onAddTrack("audio"),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-3" }), "音频轨"]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "ml-auto flex items-center gap-2 text-[11px] text-muted-foreground",
-				children: [
-					selectionCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "rounded bg-primary/15 px-1.5 py-0.5 text-primary",
-						children: ["已选 ", selectionCount]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "size-3" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "tabular-nums",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
-								us: playheadUs,
-								className: "text-foreground"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "mx-1",
-								children: "/"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
-								us: durationUs,
-								muted: true
-							})
-						]
-					})
-				]
-			})
-		]
+						onClick: () => onAddTrack("visual"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-3" }), "视频轨"]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onAddTrack("audio"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-3" }), "音频轨"]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "rounded bg-primary/15 px-1.5 py-0.5 text-primary",
+					children: ["已选 ", selectionCount]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "size-3" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "tabular-nums whitespace-nowrap",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
+							us: playheadUs,
+							className: "text-foreground"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "mx-1",
+							children: "/"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
+							us: durationUs,
+							muted: true
+						})
+					]
+				})
+			]
+		})]
 	});
 }
 // src/features/timeline/components/Ruler.tsx
@@ -2951,14 +2968,14 @@ function Ruler({ pxPerSecond, widthPx, playheadPx, scrollLeftPx, className }) {
 		widthPx
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("relative shrink-0 cursor-ew-resize border-b bg-timeline-bg select-none", className),
+		className: require_format.cn("relative shrink-0 cursor-ew-resize border-b bg-timeline-bg select-none", className),
 		style: {
 			height: 28,
 			width: widthPx
 		},
 		children: [
 			ticks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: cn("absolute bottom-0 w-px", tick.major ? "h-2 bg-muted-foreground/50" : "h-1 bg-muted-foreground/25"),
+				className: require_format.cn("absolute bottom-0 w-px", tick.major ? "h-2 bg-muted-foreground/50" : "h-1 bg-muted-foreground/25"),
 				style: { left: tick.px }
 			}, `${tick.us}-${tick.major ? "M" : "m"}`)),
 			ticks.filter((t) => t.major).map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -2986,7 +3003,7 @@ function Ruler({ pxPerSecond, widthPx, playheadPx, scrollLeftPx, className }) {
 */
 var TrackHeader = (0, react.memo)(function TrackHeader({ track, onToggleMute, onToggleLock, onToggleHidden, onRemove }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex items-center gap-1 border-r border-b border-timeline-grid px-2", track.kind === "audio" ? "bg-clip-audio/10" : "bg-clip-video/10", track.hidden && "opacity-60"),
+		className: require_format.cn("flex items-center gap-1 border-r border-b border-timeline-grid px-2", track.kind === "audio" ? "bg-clip-audio/10" : "bg-clip-video/10", track.hidden && "opacity-60"),
 		style: { height: 56 },
 		"data-track-header": true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3041,7 +3058,7 @@ function IconToggle({ active, onClick, label, icon: Icon }) {
 			onClick,
 			"aria-label": label,
 			"aria-pressed": active,
-			className: cn("flex size-[18px] items-center justify-center rounded transition-colors", active ? "bg-primary/20 text-primary" : "text-muted-foreground hover:text-foreground"),
+			className: require_format.cn("flex size-[18px] items-center justify-center rounded transition-colors", active ? "bg-primary/20 text-primary" : "text-muted-foreground hover:text-foreground"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-3" })
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: label })] });
@@ -3132,7 +3149,7 @@ var ClipBlock = (0, react.memo)(function ClipBlock({ clip, asset, pxPerSecond, s
 			handlers.beginMove(event, clip);
 		},
 		onDoubleClick: () => handlers.seekTo(clip),
-		className: cn("group absolute top-1 bottom-1 overflow-hidden rounded-md border text-left select-none transition-shadow", KIND_BG[kind], selected ? "ring-2 ring-primary ring-offset-1 ring-offset-timeline-bg" : "hover:brightness-110", locked ? "cursor-not-allowed opacity-70" : "cursor-grab active:cursor-grabbing"),
+		className: require_format.cn("group absolute top-1 bottom-1 overflow-hidden rounded-md border text-left select-none transition-shadow", KIND_BG[kind], selected ? "ring-2 ring-primary ring-offset-1 ring-offset-timeline-bg" : "hover:brightness-110", locked ? "cursor-not-allowed opacity-70" : "cursor-grab active:cursor-grabbing"),
 		style: {
 			left: leftPx,
 			width: widthPx,
@@ -3211,7 +3228,7 @@ function ContextMenuPortal({ ...props }) {
 function ContextMenuContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Content, {
 		"data-slot": "context-menu-content",
-		className: cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		className: require_format.cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
 		...props
 	}) });
 }
@@ -3220,21 +3237,21 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		className: require_format.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
 		...props
 	});
 }
 function ContextMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Separator, {
 		"data-slot": "context-menu-separator",
-		className: cn("-mx-1 my-1 h-px bg-border", className),
+		className: require_format.cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
 }
 function ContextMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-slot": "context-menu-shortcut",
-		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		className: require_format.cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
 		...props
 	});
 }
@@ -3291,14 +3308,14 @@ function ClipContextMenu({ children, onSplit, onDuplicate, onRemove, onShowInfo,
 /** 播放头：一条竖线 + 顶部把手，跨过所有轨道 */
 function Playhead({ px, playing, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("pointer-events-none absolute top-0 bottom-0 z-20 w-px", className),
+		className: require_format.cn("pointer-events-none absolute top-0 bottom-0 z-20 w-px", className),
 		style: { left: px },
 		"aria-hidden": true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("absolute inset-y-0 -left-px w-0.5 bg-playhead", playing && "shadow-[0_0_6px_var(--cw-playhead)]"),
+			className: require_format.cn("absolute inset-y-0 -left-px w-0.5 bg-playhead", playing && "shadow-[0_0_6px_var(--cw-playhead)]"),
 			style: { top: 24 }
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("absolute -translate-x-1/2 rounded-sm bg-playhead", playing ? "size-3 rotate-45" : "h-2.5 w-2.5 rotate-45"),
+			className: require_format.cn("absolute -translate-x-1/2 rounded-sm bg-playhead", playing ? "size-3 rotate-45" : "h-2.5 w-2.5 rotate-45"),
 			style: { top: 14 }
 		})]
 	});
@@ -3307,7 +3324,7 @@ function Playhead({ px, playing, className }) {
 /** 框选矩形 */
 function Marquee({ x1, y1, x2, y2, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("pointer-events-none absolute z-40 rounded-sm border border-primary/70 bg-primary/15", className),
+		className: require_format.cn("pointer-events-none absolute z-40 rounded-sm border border-primary/70 bg-primary/15", className),
 		style: {
 			left: Math.min(x1, x2),
 			top: Math.min(y1, y2),
@@ -3898,7 +3915,7 @@ function Timeline() {
 		splitClip
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(TimelineToolbar, {
 				playheadUs,
@@ -3918,7 +3935,7 @@ function Timeline() {
 				canZoomOut: zoom.canZoomOut
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "thin-scrollbar flex shrink-0 flex-col overflow-y-auto border-r",
 					style: { width: 150 },
@@ -3982,7 +3999,7 @@ function Timeline() {
 									"data-timeline-tracks": true,
 									children: [
 										project.tracks.map((track, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: cn("relative border-b border-timeline-grid", track.kind === "audio" ? "bg-timeline-track/30" : "bg-timeline-track/50", track.hidden && "opacity-40"),
+											className: require_format.cn("relative border-b border-timeline-grid", track.kind === "audio" ? "bg-timeline-track/30" : "bg-timeline-track/50", track.hidden && "opacity-40"),
 											style: { height: 56 },
 											"data-track-row": track.id,
 											children: [
@@ -4053,7 +4070,7 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
 		"data-slot": "tabs",
 		"data-orientation": orientation,
 		orientation,
-		className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
+		className: require_format.cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
 		...props
 	});
 }
@@ -4068,21 +4085,21 @@ function TabsList({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.List, {
 		"data-slot": "tabs-list",
 		"data-variant": variant,
-		className: cn(tabsListVariants({ variant }), className),
+		className: require_format.cn(tabsListVariants({ variant }), className),
 		...props
 	});
 }
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
+		className: require_format.cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
 		...props
 	});
 }
 function TabsContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Content, {
 		"data-slot": "tabs-content",
-		className: cn("flex-1 outline-none", className),
+		className: require_format.cn("flex-1 outline-none", className),
 		...props
 	});
 }
@@ -4091,7 +4108,7 @@ function Input({ className, type, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		type,
 		"data-slot": "input",
-		className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "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", className),
+		className: require_format.cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "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", className),
 		...props
 	});
 }
@@ -4112,7 +4129,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Trigger, {
 		"data-slot": "select-trigger",
 		"data-size": size,
-		className: cn("flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: require_format.cn("flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
 		...props,
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Icon, {
 			asChild: true,
@@ -4126,14 +4143,14 @@ function SelectContent({ className, children, position = "item-aligned", align =
 		container: container ?? void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Content, {
 			"data-slot": "select-content",
-			className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+			className: require_format.cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
 			position,
 			align,
 			...props,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollUpButton, {}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Viewport, {
-					className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
+					className: require_format.cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
 					children
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollDownButton, {})
@@ -4144,7 +4161,7 @@ function SelectContent({ className, children, position = "item-aligned", align =
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Item, {
 		"data-slot": "select-item",
-		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		className: require_format.cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-slot": "select-item-indicator",
@@ -4156,7 +4173,7 @@ function SelectItem({ className, children, ...props }) {
 function SelectScrollUpButton({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.ScrollUpButton, {
 		"data-slot": "select-scroll-up-button",
-		className: cn("flex cursor-default items-center justify-center py-1", className),
+		className: require_format.cn("flex cursor-default items-center justify-center py-1", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUpIcon, { className: "size-4" })
 	});
@@ -4164,7 +4181,7 @@ function SelectScrollUpButton({ className, ...props }) {
 function SelectScrollDownButton({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.ScrollDownButton, {
 		"data-slot": "select-scroll-down-button",
-		className: cn("flex cursor-default items-center justify-center py-1", className),
+		className: require_format.cn("flex cursor-default items-center justify-center py-1", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "size-4" })
 	});
@@ -4173,7 +4190,7 @@ function SelectScrollDownButton({ className, ...props }) {
 /** 属性面板的一行：标签 + 控件（标签在左，控件占满剩余宽度） */
 function Field({ label, hint, children, className, htmlFor }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex items-center gap-2", className),
+		className: require_format.cn("flex items-center gap-2", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
 				htmlFor,
@@ -4194,7 +4211,7 @@ function Field({ label, hint, children, className, htmlFor }) {
 /** 属性分组 */
 function Section({ title, children, action, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: cn("space-y-2", className),
+		className: require_format.cn("space-y-2", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
@@ -4389,7 +4406,7 @@ function VideoProps({ clip, onPatch, onPatchTransform, onPatchSize }) {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
 						type: "number",
 						className: "h-7 text-xs tabular-nums",
-						value: formatSeconds(clip.startUs),
+						value: require_format.formatSeconds(clip.startUs),
 						step: .1,
 						min: 0,
 						onChange: (e) => {
@@ -4403,7 +4420,7 @@ function VideoProps({ clip, onPatch, onPatchTransform, onPatchSize }) {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
 						type: "number",
 						className: "h-7 text-xs tabular-nums",
-						value: formatSeconds(clip.durationUs),
+						value: require_format.formatSeconds(clip.durationUs),
 						step: .1,
 						min: .1,
 						onChange: (e) => {
@@ -4510,7 +4527,7 @@ function AudioProps({ clip, onPatch }) {
 				className: "text-[10px] text-muted-foreground",
 				children: [
 					"片段时长 ",
-					formatSeconds(clip.durationUs),
+					require_format.formatSeconds(clip.durationUs),
 					"s，淡入使用 setAnimation 线性插值。"
 				]
 			})
@@ -4765,7 +4782,7 @@ function SubtitleProps({ clip, onPatch, onRebuild }) {
 			className: "text-[10px] text-muted-foreground",
 			children: [
 				"片段时长 ",
-				formatSeconds(clip.durationUs),
+				require_format.formatSeconds(clip.durationUs),
 				"s",
 				cues.length > 0 && ` · 最后一条结束于 ${(cues[cues.length - 1].endMs / 1e3).toFixed(2)}s`
 			]
@@ -5037,7 +5054,7 @@ function InspectorPanel() {
 								title: asset.name,
 								children: asset.name
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_format.Badge, {
 								variant: "outline",
 								className: "text-[10px]",
 								children: KIND_LABEL[asset.kind]
@@ -5060,7 +5077,7 @@ function InspectorPanel() {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
 							(0, _cut_workbench_core.formatDuration)(clip.durationUs),
 							" · ",
-							formatResolution(asset.width, asset.height)
+							require_format.formatResolution(asset.width, asset.height)
 						] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
 							"入点 ",
 							(clip.inPointUs / 1e6).toFixed(2),
@@ -5165,11 +5182,11 @@ function Switch({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Switch.Root, {
 		"data-slot": "switch",
 		"data-size": size,
-		className: cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className),
+		className: require_format.cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Switch.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground")
+			className: require_format.cn("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground")
 		})
 	});
 }
@@ -5177,7 +5194,7 @@ function Switch({ className, size = "default", ...props }) {
 function Progress({ className, value, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Progress.Root, {
 		"data-slot": "progress",
-		className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
+		className: require_format.cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Progress.Indicator, {
 			"data-slot": "progress-indicator",
@@ -5855,7 +5872,7 @@ function ExportDialog() {
 									className: "flex justify-between",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "预估大小" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "font-mono tabular-nums",
-										children: formatBytes(estimatedBytes)
+										children: require_format.formatBytes(estimatedBytes)
 									})]
 								}),
 								hasTextClips && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -5892,10 +5909,10 @@ function ExportDialog() {
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "size-3.5" }),
 									"导出完成 · 耗时 ",
-									formatElapsed(state.result.elapsedMs / 1e3),
+									require_format.formatElapsed(state.result.elapsedMs / 1e3),
 									" ·",
 									" ",
-									formatBytes(state.result.blob.size),
+									require_format.formatBytes(state.result.blob.size),
 									state.result.mode === "main" && "（主线程）"
 								]
 							}),
@@ -5958,7 +5975,7 @@ function ExportProgress({ progress, label = "正在合成…", className }) {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-3 animate-spin" }), label]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "font-mono tabular-nums",
-				children: formatPercent(progress)
+				children: require_format.formatPercent(progress)
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Progress, { value: progress * 100 })]
 	});
@@ -6034,7 +6051,7 @@ function CanvasSettingsBody({ onDone }) {
 								setDraftW(String(preset.width));
 								setDraftH(String(preset.height));
 							},
-							className: cn("flex flex-col items-center gap-1 rounded-md border px-2 py-2 text-[11px] transition-colors", activePreset?.id === preset.id ? "border-primary bg-primary/10 text-foreground" : "text-muted-foreground hover:border-primary/50 hover:text-foreground"),
+							className: require_format.cn("flex flex-col items-center gap-1 rounded-md border px-2 py-2 text-[11px] transition-colors", activePreset?.id === preset.id ? "border-primary bg-primary/10 text-foreground" : "text-muted-foreground hover:border-primary/50 hover:text-foreground"),
 							title: preset.hint,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "block rounded-[2px] border border-current opacity-70",
@@ -6095,7 +6112,7 @@ function CanvasSettingsBody({ onDone }) {
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								onClick: () => setMode("scale"),
-								className: cn("rounded-md border px-2.5 py-2 text-left text-[11px] transition-colors", mode === "scale" ? "border-primary bg-primary/10" : "text-muted-foreground hover:border-primary/50"),
+								className: require_format.cn("rounded-md border px-2.5 py-2 text-left text-[11px] transition-colors", mode === "scale" ? "border-primary bg-primary/10" : "text-muted-foreground hover:border-primary/50"),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "block font-medium text-foreground",
 									children: "随画布缩放"
@@ -6106,7 +6123,7 @@ function CanvasSettingsBody({ onDone }) {
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								onClick: () => setMode("keep"),
-								className: cn("rounded-md border px-2.5 py-2 text-left text-[11px] transition-colors", mode === "keep" ? "border-primary bg-primary/10" : "text-muted-foreground hover:border-primary/50"),
+								className: require_format.cn("rounded-md border px-2.5 py-2 text-left text-[11px] transition-colors", mode === "keep" ? "border-primary bg-primary/10" : "text-muted-foreground hover:border-primary/50"),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "block font-medium text-foreground",
 									children: "保持原位置"
@@ -6414,1173 +6431,6 @@ function useCapabilityInfo() {
 		summary: (0, _cut_workbench_core_engine.summarizeCapabilities)(report)
 	};
 }
-// src/features/lab/components/LabCard.tsx
-/** Lab 卡片外壳：标题 + 用到的 API + （不可用时的原因） */
-function LabCard({ title, description, apis, children, unavailable, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
-		className: cn("flex flex-col", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardHeader, {
-			className: "gap-1",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "flex size-6 items-center justify-center rounded bg-primary/10 text-primary",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FlaskConical, { className: "size-3.5" })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
-						className: "text-sm",
-						children: title
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardDescription, {
-					className: "text-xs",
-					children: description
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex flex-wrap gap-1 pt-1",
-					children: apis.map((api) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
-						variant: "outline",
-						className: "font-mono text-[10px] font-normal text-muted-foreground",
-						children: api
-					}, api))
-				})
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContent, {
-			className: "flex flex-1 flex-col gap-2.5",
-			children: unavailable != null ? /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useRef)([]);
-	return (0, react.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] = (0, react.useState)(null);
-	return {
-		busy,
-		run: (0, react.useCallback)(async (label, task) => {
-			setBusy(label);
-			try {
-				return await task();
-			} catch (err) {
-				const message = err instanceof Error ? err.message : String(err);
-				console.error(err);
-				sonner.toast.error("操作失败", { description: message });
-				return null;
-			} finally {
-				setBusy(null);
-			}
-		}, [])
-	};
-}
-// src/features/lab/components/shared.tsx
-/**
-* Lab 共享的可视组件。
-*
-* 只导出组件（React Fast Refresh 要求单文件只导出组件）；
-* 工具函数与 hook 放在 `../hooks/use-lab-action`。
-*/
-/** 文件选择按钮 */
-function FilePickButton({ label, accept, multiple, onFiles, disabled }) {
-	const inputRef = (0, react.useRef)(null);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "max-w-full truncate",
-			children: label
-		})
-	})] });
-}
-/** 结果预览：视频 + 下载 */
-function ResultPreview({ blob, filename }) {
-	const download = useDownload();
-	const [url] = (0, react.useState)(() => URL.createObjectURL(blob));
-	(0, react.useEffect)(() => () => URL.revokeObjectURL(url), [url]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-1.5",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-			src: url,
-			controls: true,
-			className: "w-full rounded-md border bg-stage-bg",
-			style: { maxHeight: 200 }
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground",
-				children: [(blob.size / 1024 / 1024).toFixed(2), " MB"]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-3 animate-spin" }), label]
-	});
-}
-/** 简易滑杆 */
-function SliderRow({ label, value, min, max, step, format, onChange }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex justify-between text-[10px] text-muted-foreground",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-mono tabular-nums",
-				children: format ? format(value) : value.toFixed(2)
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)([]);
-	const [infos, setInfos] = (0, react.useState)([]);
-	const [result, setResult] = (0, react.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 (0, _cut_workbench_core_lab.readMp4Info)(file));
-			return list;
-		});
-		if (detected != null) setInfos(detected);
-	};
-	const handleConcat = async () => {
-		const output = await run("正在无损拼接…", () => (0, _cut_workbench_core_lab.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__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "无损拼接",
-		description: "直接把多个 MP4 的样本拼在一起，不重编码，速度极快。要求规格完全一致。",
-		apis: ["fastConcatMP4", "MP4Clip.getFileHeaderBinData"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("ul", {
-				className: "space-y-1 text-[10px] text-muted-foreground",
-				children: files.map((file, index) => {
-					const info = infos[index];
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-						className: "flex justify-between gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "truncate",
-							children: file.name
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "shrink-0 font-mono",
-							children: info != null ? `${formatResolution(info.width, info.height)} · ${(0, _cut_workbench_core.formatDuration)(info.durationUs)} · ${info.codec}` : "检测中…"
-						})]
-					}, `${file.name}-${index}`);
-				})
-			}),
-			mismatch && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-start gap-1.5 rounded-md bg-warning/10 p-2 text-[10px] text-warning",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), "检测到规格不一致，拼接会失败并给出具体原因（fastConcatMP4 的硬性要求）。"]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "concat.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/RemuxLab.tsx
-/**
-* Lab 2：配音。
-*
-* `mixinMP4AndAudio` 只重编码音频轨，视频轨原样复制 —— 因此速度快、画质无损。
-*/
-function RemuxLab() {
-	const [video, setVideo] = (0, react.useState)(null);
-	const [audio, setAudio] = (0, react.useState)(null);
-	const [volume, setVolume] = (0, react.useState)(1);
-	const [loop, setLoop] = (0, react.useState)(true);
-	const [result, setResult] = (0, react.useState)(null);
-	const { busy, run } = useLabAction();
-	const handleMix = async () => {
-		if (video == null || audio == null) return;
-		const output = await run("正在混合音频…", () => (0, _cut_workbench_core_lab.mixAudioIntoMp4)(video, audio, volume, loop));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "视频配音",
-		description: "把音轨混入 MP4：只重编码音频，视频轨不动，画质零损失。",
-		apis: ["mixinMP4AndAudio"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: video == null ? "选择视频（MP4）" : video.name,
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setVideo(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: audio == null ? "选择音频（MP3/WAV/M4A）" : audio.name,
-				accept: "audio/*",
-				onFiles: (files) => {
-					setAudio(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "音量",
-				value: volume,
-				min: 0,
-				max: 2,
-				step: .05,
-				format: (v) => `${Math.round(v * 100)}%`,
-				onChange: setVolume
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "flex items-center gap-2 text-[11px] text-muted-foreground",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "checkbox",
-					checked: loop,
-					onChange: (e) => setLoop(e.target.checked),
-					className: "accent-primary"
-				}), "音频短于视频时循环填充"]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(_cut_workbench_core_lab.isWebGL2Available);
-	const [file, setFile] = (0, react.useState)(null);
-	const [similarity, setSimilarity] = (0, react.useState)(.4);
-	const [smoothness, setSmoothness] = (0, react.useState)(.1);
-	const [spill, setSpill] = (0, react.useState)(.1);
-	const [timeUs, setTimeUs] = (0, react.useState)(0);
-	const [durationUs, setDurationUs] = (0, react.useState)(0);
-	const canvasRef = (0, react.useRef)(null);
-	const clipRef = (0, react.useRef)(null);
-	const { busy, run } = useLabAction();
-	(0, react.useEffect)(() => {
-		return () => {
-			clipRef.current?.destroy();
-			clipRef.current = null;
-		};
-	}, []);
-	const render = (0, react.useCallback)(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await (0, _cut_workbench_core_lab.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 (0, _cut_workbench_core_lab.createMp4Clip)(picked);
-		});
-		if (result == null) return;
-		clipRef.current = result.clip;
-		setFile(picked);
-		setDurationUs(result.meta.duration);
-		setTimeUs(Math.min(result.meta.duration / 2, 1e6));
-		sonner.toast.success("已载入视频，拖动参数查看抠像效果");
-	};
-	(0, react.useEffect)(() => {
-		if (clipRef.current == null || busy != null) return;
-		render();
-	}, [busy, render]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "绿幕抠像",
-		description: "用 WebGL2 实时扣除背景色，通过 tickInterceptor 作用到整段视频。",
-		apis: ["createChromakey", "MP4Clip.tickInterceptor"],
-		unavailable: webgl2 ? null : "当前设备不支持 WebGL2，createChromakey 无法运行。",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: file?.name ?? "选择绿幕视频（MP4）",
-				accept: "video/mp4",
-				onFiles: (files) => void handleFile(files),
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative overflow-hidden rounded-md border bg-stage-bg",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
-					ref: canvasRef,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				}), file == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "pointer-events-none absolute inset-0 flex h-24 items-center justify-center text-[10px] text-muted-foreground",
-					children: "选择视频后显示抠像结果"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "相似度 similarity",
-				value: similarity,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSimilarity
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "平滑度 smoothness",
-				value: smoothness,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSmoothness
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "饱和度 spill",
-				value: spill,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSpill
-			}),
-			durationUs > 0 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			/* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(SAMPLE_SRT);
-	const [timeUs, setTimeUs] = (0, react.useState)(0);
-	const [playing, setPlaying] = (0, react.useState)(false);
-	const [result, setResult] = (0, react.useState)(null);
-	const { busy, run } = useLabAction();
-	const canvasRef = (0, react.useRef)(null);
-	const clipRef = (0, react.useRef)(null);
-	const rafRef = (0, react.useRef)(null);
-	const cues = (0, _cut_workbench_core.parseSrt)(srt);
-	const durationUs = cues.length > 0 ? cues[cues.length - 1].endMs * 1e3 : 0;
-	(0, react.useEffect)(() => {
-		clipRef.current?.destroy();
-		if (cues.length === 0) {
-			clipRef.current = null;
-			return;
-		}
-		try {
-			clipRef.current = (0, _cut_workbench_core_lab.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 = (0, react.useCallback)(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await (0, _cut_workbench_core_lab.renderSubtitleFrame)(clip, timeUs, canvas);
-	}, [timeUs]);
-	(0, react.useEffect)(() => {
-		draw();
-	}, [draw]);
-	(0, react.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("正在烧录字幕…", () => (0, _cut_workbench_core_lab.burnSubtitles)(srt, width, height, durationUs));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "字幕烧录",
-		description: "SRT 解析后逐帧绘制到画面，最终编码进视频流（硬字幕）。",
-		apis: ["EmbedSubtitlesClip", "Combinator"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
-					ref: canvasRef,
-					width: 640,
-					height: 360,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "size-3" }), playing ? "停止" : "预览"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "text-[10px] text-muted-foreground",
-					children: [
-						cues.length,
-						" 条 · ",
-						(timeUs / 1e6).toFixed(2),
-						"s / ",
-						(durationUs / 1e6).toFixed(2),
-						"s"
-					]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "subtitles.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/TrackSplitLab.tsx
-/**
-* Lab 5：轨道拆分。
-*
-* `splitTrack()` 从一个 MP4Clip 派生出「纯视频」与「纯音频」两个 clip，
-* 它们与源共享样本表，因此内存开销很小。
-*/
-function TrackSplitLab() {
-	const [file, setFile] = (0, react.useState)(null);
-	const [result, setResult] = (0, react.useState)(null);
-	const { busy, run } = useLabAction();
-	const cleanupRef = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		return () => cleanupRef.current?.();
-	}, []);
-	const handleSplit = async () => {
-		if (file == null) return;
-		cleanupRef.current?.();
-		const output = await run("正在拆分轨道…", () => (0, _cut_workbench_core_lab.splitMp4Tracks)(file));
-		setResult(output);
-		cleanupRef.current = () => {
-			output?.videoClip?.destroy();
-			output?.audioClip?.destroy();
-		};
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "轨道拆分",
-		description: "把一个 MP4 拆成纯视频轨与纯音频轨两个独立 IClip，用于分别编辑。",
-		apis: ["MP4Clip.splitTrack"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: file?.name ?? "选择 MP4",
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setFile(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Split, { className: "size-3" }), "拆分轨道"]
-			}),
-			busy != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "grid gap-1.5 text-[10px]",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrackResult, {
-						label: "视频轨",
-						present: result.videoMeta != null,
-						detail: result.videoMeta != null ? `${result.videoMeta.width}×${result.videoMeta.height} · ${(0, _cut_workbench_core.formatDuration)(result.videoMeta.duration)}` : "源文件无视频轨"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrackResult, {
-						label: "音频轨",
-						present: result.audioMeta != null,
-						detail: result.audioMeta != null ? `48kHz 双声道 · ${(0, _cut_workbench_core.formatDuration)(result.audioMeta.duration)}` : "源文件无音频轨"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "pt-1 leading-relaxed text-muted-foreground",
-						children: "拆分出的 clip 与源共享样本表，可分别创建 Sprite 放到不同轨道；两者在时间轴上对齐即等于原片。"
-					})
-				]
-			})
-		]
-	});
-}
-function TrackResult({ label, present, detail }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center justify-between gap-2 rounded-md border px-2 py-1.5",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: present ? "text-foreground" : "text-muted-foreground",
-			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(null);
-	const [frames, setFrames] = (0, react.useState)([]);
-	const [width, setWidth] = (0, react.useState)(120);
-	const { busy, run } = useLabAction();
-	(0, react.useEffect)(() => {
-		return () => {
-			for (const frame of frames) URL.revokeObjectURL(frame.url);
-		};
-	}, [frames]);
-	const handleExtract = async () => {
-		if (file == null) return;
-		const output = await run("正在抽取关键帧…", () => (0, _cut_workbench_core_lab.extractKeyframes)(file, width));
-		if (output != null) setFrames(output);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "缩略图抽帧",
-		description: "按关键帧抽取缩略图，可用于时间轴缩略图带或场景切分预览。",
-		apis: ["MP4Clip.thumbnails"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: file?.name ?? "选择 MP4",
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setFile(files[0] ?? null);
-					setFrames([]);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-						className: "text-[10px] text-muted-foreground",
-						children: "宽度"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			frames.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "text-[10px] text-muted-foreground",
-				children: [
-					"共 ",
-					frames.length,
-					" 张关键帧"
-				]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "thin-scrollbar grid max-h-52 grid-cols-3 gap-1.5 overflow-auto",
-				children: frames.map((frame, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
-					className: "space-y-0.5",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-						src: frame.url,
-						alt: "",
-						className: "w-full rounded border object-cover",
-						loading: "lazy"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
-						className: "font-mono text-[9px] text-muted-foreground tabular-nums",
-						children: (0, _cut_workbench_core.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] = (0, react.useState)("demo");
-	const [recording, setRecording] = (0, react.useState)(false);
-	const [paused, setPaused] = (0, react.useState)(false);
-	const [bytes, setBytes] = (0, react.useState)(0);
-	const [state, setState] = (0, react.useState)("inactive");
-	const [result, setResult] = (0, react.useState)(null);
-	const [previewStream, setPreviewStream] = (0, react.useState)(null);
-	const videoRef = (0, react.useRef)(null);
-	const recorderRef = (0, react.useRef)(null);
-	const demoRef = (0, react.useRef)(null);
-	const cameraRef = (0, react.useRef)(null);
-	const { run } = useLabAction();
-	(0, react.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 = (0, react.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);
-	}, []);
-	(0, react.useEffect)(() => cleanup, [cleanup]);
-	const acquireStream = async () => {
-		cleanup();
-		if (mode === "demo") {
-			const demo = (0, _cut_workbench_core_lab.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);
-			sonner.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 (0, _cut_workbench_core_lab.fixRecordedDuration)(raw);
-		});
-		setRecording(false);
-		setPaused(false);
-		setState(recorder.state());
-		recorderRef.current = null;
-		if (output != null) {
-			setResult(output);
-			sonner.toast.success(`录制完成 · ${(output.size / 1024 / 1024).toFixed(2)} MB`);
-		}
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "屏幕 / 画布录制",
-		description: "用 AVRecorder 把 MediaStream 实时编码为 MP4。可录制程序化画布或摄像头。",
-		apis: ["AVCanvas.captureStream", "AVRecorder.start/pause/resume/stop"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex gap-1.5",
-				children: ["demo", "camera"].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-					ref: videoRef,
-					muted: true,
-					playsInline: true,
-					className: "block w-full",
-					style: { maxHeight: 170 }
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center gap-1.5",
-				children: [!recording ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Circle, { className: "size-3 fill-current" }), "开始录制"]
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pause, { className: "size-3" }), paused ? "继续" : "暂停"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "size-3" }), "停止"]
-				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "ml-auto font-mono text-[10px] text-muted-foreground tabular-nums",
-					children: [
-						(bytes / 1024 / 1024).toFixed(2),
-						" MB · ",
-						(0, _cut_workbench_core_lab.formatRecorderState)(state)
-					]
-				})]
-			}),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "recording.mp4"
-			})
-		]
-	});
-}
-/** 适配 RecorderHandle（隔离 AVRecorder 细节） */
-function createRecorderAdapter(stream, onChunk) {
-	const recorder = new _cut_workbench_core_lab.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] = (0, react.useState)(5);
-	const [timeUs, setTimeUs] = (0, react.useState)(0);
-	const [playing, setPlaying] = (0, react.useState)(false);
-	const [result, setResult] = (0, react.useState)(null);
-	const canvasRef = (0, react.useRef)(null);
-	const clipRef = (0, react.useRef)(null);
-	const rafRef = (0, react.useRef)(null);
-	const { busy, run } = useLabAction();
-	const durationUs = Math.round(durationSec * 1e6);
-	(0, react.useEffect)(() => {
-		clipRef.current?.destroy();
-		try {
-			clipRef.current = new _cut_workbench_core_lab.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 = (0, react.useCallback)(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await (0, _cut_workbench_core_lab.renderClipFrameToCanvas)(clip, timeUs, canvas);
-	}, [timeUs]);
-	(0, react.useEffect)(() => {
-		draw();
-	}, [draw]);
-	(0, react.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…", () => (0, _cut_workbench_core_lab.exportCustomClip)(clip, durationUs));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "自定义 IClip",
-		description: "纯程序化渲染的 Clip（帧计数器），不依赖任何媒体文件，证明接口可扩展。",
-		apis: [
-			"IClip.tick",
-			"IClip.clone",
-			"IClip.split",
-			"Combinator"
-		],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
-					ref: canvasRef,
-					width: 640,
-					height: 360,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "size-3" }), playing ? "停止" : "预览"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "font-mono text-[10px] text-muted-foreground tabular-nums",
-					children: [
-						(0, _cut_workbench_core.formatTimecode)(timeUs),
-						" / ",
-						(0, _cut_workbench_core.formatTimecode)(durationUs)
-					]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "custom-clip.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/LabPage.tsx
-/**
-* 能力实验室：每个 WebAV 高级 API 一个可独立运行的卡片。
-*
-* 与主编辑器共享同一套能力探测结果，因此这里不再重复检测。
-*/
-function LabPage() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "mx-auto max-w-7xl space-y-4 p-4",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-				className: "space-y-1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FlaskConical, { className: "size-4 text-primary" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-						className: "text-sm font-semibold",
-						children: "能力实验室"
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-xs text-muted-foreground",
-					children: "覆盖 av-cliper / av-canvas / av-recorder 的进阶 API。每个卡片可独立运行，失败时给出可读原因。"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConcatenateLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RemuxLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChromakeyLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubtitleLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrackSplitLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThumbnailLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecorderLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomClipLab, {})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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
 /**
 * 工作台容器：把「三栏骨架 + 顶栏 + 弹窗」组装成一个可配置组件。
@@ -7592,11 +6442,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 = (0, react.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 = (0, _cut_workbench_react.useCutEditor)();
 	const capability = useCapabilityInfo();
 	const leftWidth = useUi((s) => s.leftWidth);
@@ -7660,10 +6521,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,
@@ -7690,7 +6559,17 @@ function CutWorkbench({ slots, className, onSaveProject, onOpenProject, enforceC
 			toolbar,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "min-h-0 flex-1 overflow-auto",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabPage, {})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+					fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex h-full items-center justify-center",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingOverlay, {
+							visible: true,
+							title: "正在加载能力实验室…",
+							fullscreen: false
+						})
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabPage, {})
+				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExportDialog, {}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CanvasSettingsDialog, {
@@ -8768,6 +7647,7 @@ function initCutWorkbench(container, options = {}) {
 		}, (0, react.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);