@cut-workbench/workbench 0.1.0 → 0.3.0

package/dist/index.js

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