@cut-workbench/workbench 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -1,90 +1,76 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-// \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
+const require_notify = require("./notify-CMNwDFGw.cjs");
 let react_dom_client = require("react-dom/client");
 let react = require("react");
-react = __toESM(react, 1);
+react = require_notify.__toESM(react, 1);
 let _cut_workbench_core_engine = require("@cut-workbench/core/engine");
 let _cut_workbench_core = require("@cut-workbench/core");
 let _cut_workbench_react = require("@cut-workbench/react");
-let clsx = require("clsx");
-let tailwind_merge = require("tailwind-merge");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let class_variance_authority = require("class-variance-authority");
 let radix_ui = require("radix-ui");
 let sonner = require("sonner");
 let react_dropzone = require("react-dropzone");
-let _cut_workbench_core_lab = require("@cut-workbench/core/lab");
 let zustand_vanilla = require("zustand/vanilla");
-// src/lib/cn.ts
-/**
-* 合并 className：tailwind-merge 负责消解冲突，clsx 负责条件拼接。
-*/
-function cn(...inputs) {
-	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
-}
 // src/components/layout/AppShell.tsx
 /**
-* 三栏 + 底部时间轴骨架。
+* 工作台骨架：顶栏 + 上半区（素材 / 预览 / 属性）+ 底部通栏时间轴。
+*
+* ```
+* ┌───────────────────────────────────────────┐
+* │ 顶栏                                      │
+* ├──────────┬──────────────┬─────────────────┤
+* │ 素材库   │ 预览         │ 属性            │  上半区
+* ├──────────┴──────────────┴─────────────────┤
+* │ 时间轴（横跨整行）                        │  下栏
+* └───────────────────────────────────────────┘
+* ```
+*
+* 时间轴必须是**通栏**的：它曾被塞进中间列，于是左右面板一拉宽就把时间轴
+* 挤窄，工具条上的按钮直接溢出到属性面板上（实测右栏拉宽时溢出 203px）。
+* 与此同时，几乎所有 NLE 都是「轨道占满底部一条」，通栏也更符合预期。
 *
-* 布局用 inline style 的像素宽度做「受控」尺寸，配合 PanelResizer 的拖拽回写；
-* 这样不会因为 tailwind 的动态 class 被 purge 掉而失效。
+* 尺寸一律用 inline style 的像素值（受控），配合 PanelResizer 的拖拽回写；
+* 不用 tailwind 动态 class，避免被 purge 掉导致尺寸失效。
 */
 function AppShell({ topBar, left, center, right, timeline, leftWidth, rightWidth, timelineHeight, leftResizer, rightResizer, timelineResizer, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex h-full min-h-0 flex-col bg-background", className),
-		children: [topBar, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex min-h-0 flex-1",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-					className: "flex min-h-0 shrink-0 flex-col border-r bg-card/40",
-					style: { width: leftWidth },
-					children: left
-				}),
-				leftResizer,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
-					className: "flex min-w-0 flex-1 flex-col",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "flex min-h-0 flex-1 flex-col",
-							children: center
-						}),
-						timelineResizer,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-							className: "flex min-h-0 shrink-0 flex-col border-t bg-timeline-bg",
-							style: { height: timelineHeight },
-							children: timeline
-						})
-					]
-				}),
-				rightResizer,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-					className: "flex min-h-0 shrink-0 flex-col border-l bg-card/40",
-					style: { width: rightWidth },
-					children: right
-				})
-			]
-		})]
+		className: require_notify.cn("flex h-full min-h-0 flex-col bg-background", className),
+		children: [
+			topBar,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+						className: "flex min-h-[220px] shrink-0 flex-col overflow-hidden border-r bg-card/40",
+						style: { width: leftWidth },
+						"data-panel": "media",
+						children: left
+					}),
+					leftResizer,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+						className: "flex min-h-[220px] min-w-0 flex-1 flex-col overflow-hidden",
+						"data-panel": "preview",
+						children: center
+					}),
+					rightResizer,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+						className: "flex min-h-[220px] shrink-0 flex-col overflow-hidden border-l bg-card/40",
+						style: { width: rightWidth },
+						"data-panel": "inspector",
+						children: right
+					})
+				]
+			}),
+			timelineResizer,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				className: "flex min-h-0 shrink-0 flex-col overflow-hidden border-t bg-timeline-bg",
+				style: { height: timelineHeight },
+				"data-panel": "timeline",
+				children: timeline
+			})
+		]
 	});
 }
 // src/components/ui/button.tsx
@@ -120,7 +106,7 @@ function Button({ className, variant = "default", size = "default", asChild = fa
 		"data-slot": "button",
 		"data-variant": variant,
 		"data-size": size,
-		className: cn(buttonVariants({
+		className: require_notify.cn(buttonVariants({
 			variant,
 			size,
 			className
@@ -134,7 +120,7 @@ function Separator({ className, orientation = "horizontal", decorative = true, .
 		"data-slot": "separator",
 		decorative,
 		orientation,
-		className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+		className: require_notify.cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
 		...props
 	});
 }
@@ -213,33 +199,12 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Tooltip.Content, {
 			"data-slot": "tooltip-content",
 			sideOffset,
-			className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+			className: require_notify.cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
 			...props,
 			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })]
 		})
 	});
 }
-// src/components/ui/badge.tsx
-var badgeVariants = (0, class_variance_authority.cva)("inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3", {
-	variants: { variant: {
-		default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-		secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-		destructive: "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-		outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-		ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-		link: "text-primary underline-offset-4 [a&]:hover:underline"
-	} },
-	defaultVariants: { variant: "default" }
-});
-function Badge({ className, variant = "default", asChild = false, ...props }) {
-	const Comp = asChild ? radix_ui.Slot.Root : "span";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
-		"data-slot": "badge",
-		"data-variant": variant,
-		className: cn(badgeVariants({ variant }), className),
-		...props
-	});
-}
 // src/components/ui/popover.tsx
 function Popover({ ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Popover.Root, {
@@ -261,7 +226,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
 			"data-slot": "popover-content",
 			align,
 			sideOffset,
-			className: cn("z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+			className: require_notify.cn("z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
 			...props
 		})
 	});
@@ -272,7 +237,7 @@ function CapabilityBadge({ info }) {
 	const { status, report, summary } = info;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, {
 		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Badge, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_notify.Badge, {
 			variant: "outline",
 			className: "cursor-pointer gap-1 text-[11px] font-normal select-none",
 			children: [status === "checking" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-3 animate-spin" }) : status === "ready" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "size-3 text-success" }) : status === "degraded" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { className: "size-3 text-warning" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, { className: "size-3 text-destructive" }), summary]
@@ -341,44 +306,6 @@ function Row$1({ label, ok, optional }) {
 		})]
 	});
 }
-// src/context.tsx
-/**
-* 工作台自身的 Context：UI 状态（面板尺寸 / 缩放 / 对话框）+ 宿主桥。
-*
-* 与 `@cut-workbench/react` 的编辑器 Context 分开：编辑器是「数据与引擎」，
-* 这里是「某一次挂载的布局与交互」。两者生命周期可以不同（例如宿主切换项目时
-* 复用同一个编辑器、只重建 UI）。
-*/
-var WorkbenchContext = (0, react.createContext)(null);
-function useWorkbench() {
-	const value = (0, react.useContext)(WorkbenchContext);
-	if (value == null) throw new Error("[cut-workbench] 缺少 <WorkbenchProvider>：组件必须挂在工作台内部");
-	return value;
-}
-/** 订阅 UI 状态（带 selector） */
-function useUi(selector) {
-	const { ui } = useWorkbench();
-	return (0, react.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）。
@@ -387,59 +314,71 @@ var DEFAULT_CONFIG = {
 * - 品牌区可替换（`brand`），不强制显示项目名；
 * - 保存/打开是可选回调，宿主不提供就不渲染按钮；
 * - 「视图切换（编辑器/实验室）」只在开启 lab 特性时显示。
+*
+* 可自定义的层次（由浅到深）：
+* 1. **文案**：`labels` 覆盖工程名占位、能力徽标等；
+* 2. **局部**：`brand` / `title` / `status` / `actions` / `showCapabilityBadge`
+*    逐块替换；
+* 3. **整条**：`slots.topBar`（传 `null` 表示完全不要顶栏）。
 */
 /** 顶栏：品牌 / 工程名 / 撤销重做 / 保存 / 导出 / 能力徽标 / 视图切换 */
-function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject, brand, showLab = false }) {
+function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject, brand, title, status, actions, showCapabilityBadge = true, showLab = false, editableTitle = false, labels }) {
 	const projectName = (0, _cut_workbench_react.useEditor)((s) => s.project.name);
+	const renameProject = (0, _cut_workbench_react.useEditor)((s) => s.renameProject);
 	const dirty = (0, _cut_workbench_react.useEditor)((s) => s.dirty);
 	const undo = (0, _cut_workbench_react.useEditor)((s) => s.undo);
 	const redo = (0, _cut_workbench_react.useEditor)((s) => s.redo);
 	const canUndo = (0, _cut_workbench_react.useHistory)((s) => s.past.length > 0);
 	const canRedo = (0, _cut_workbench_react.useHistory)((s) => s.future.length > 0);
-	const route = useUi((s) => s.route);
-	const setRoute = useUi((s) => s.setRoute);
-	const openDialog = useUi((s) => s.openDialog);
+	const route = require_notify.useUi((s) => s.route);
+	const setRoute = require_notify.useUi((s) => s.setRoute);
+	const openDialog = require_notify.useUi((s) => s.openDialog);
 	const clipCount = (0, _cut_workbench_react.useEditor)((s) => s.project.clips.length);
 	const projectWidth = (0, _cut_workbench_react.useEditor)((s) => s.project.width);
 	const projectHeight = (0, _cut_workbench_react.useEditor)((s) => s.project.height);
-	const branding = brand === null ? null : brand ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2 pr-2",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex size-7 items-center justify-center rounded-md bg-primary text-primary-foreground",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clapperboard, { className: "size-4" })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-sm font-semibold tracking-tight",
-			children: "Cut Workbench"
-		})]
+	const text = {
+		untitledProject: "未命名工程",
+		emptyProject: "空工程",
+		export: "导出",
+		canvasSettings: "画布设置",
+		showLab: "能力实验室",
+		backToEditor: "返回编辑器",
+		save: "保存工程",
+		open: "加载工程",
+		undo: "撤销",
+		redo: "重做",
+		...labels
+	};
+	const branding = brand == null ? null : brand;
+	const projectTitle = title === null ? null : title ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProjectTitle, {
+		name: projectName,
+		dirty,
+		placeholder: text.untitledProject,
+		editable: editableTitle,
+		onRename: renameProject
+	});
+	const statusNode = status === null ? null : status ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "hidden text-xs text-muted-foreground sm:inline",
+		children: [
+			clipCount > 0 ? `${clipCount} 个片段` : text.emptyProject,
+			" ·",
+			" ",
+			(0, _cut_workbench_core.ratioLabel)(projectWidth, projectHeight)
+		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-		className: "flex h-12 shrink-0 items-center gap-2 border-b bg-card px-3",
+		className: "flex h-12 shrink-0 items-center gap-2 overflow-hidden border-b bg-card px-3",
+		"data-workbench-toolbar": true,
 		children: [
 			branding,
-			branding != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+			branding != null && projectTitle != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
 				orientation: "vertical",
 				className: "h-5"
 			}),
+			projectTitle,
+			statusNode,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex min-w-0 items-center gap-1.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "truncate text-sm font-medium",
-					children: projectName
-				}), dirty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "size-1.5 rounded-full bg-primary",
-					title: "未保存"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "hidden text-xs text-muted-foreground sm:inline",
-				children: [
-					clipCount > 0 ? `${clipCount} 个片段` : "空工程",
-					" · ",
-					(0, _cut_workbench_core.ratioLabel)(projectWidth, projectHeight)
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "ml-auto flex items-center gap-1",
+				className: "ml-auto flex shrink-0 items-center gap-1",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
@@ -448,10 +387,10 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							size: "icon-sm",
 							onClick: undo,
 							disabled: !canUndo,
-							"aria-label": "撤销",
+							"aria-label": text.undo,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Undo2, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "撤销 (Ctrl+Z)" })] }),
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipContent, { children: [text.undo, " (Ctrl+Z)"] })] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -459,10 +398,10 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							size: "icon-sm",
 							onClick: redo,
 							disabled: !canRedo,
-							"aria-label": "重做",
+							"aria-label": text.redo,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Redo2, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "重做 (Ctrl+Shift+Z)" })] }),
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipContent, { children: [text.redo, " (Ctrl+Shift+Z)"] })] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
 						orientation: "vertical",
 						className: "mx-1 h-5"
@@ -473,29 +412,29 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 							variant: "ghost",
 							size: "icon-sm",
 							onClick: onOpenProject,
-							"aria-label": "加载工程",
+							"aria-label": text.open,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FolderOpen, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "加载已保存工程" })] }),
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: text.open })] }),
 					onSaveProject != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "ghost",
 							size: "icon-sm",
 							onClick: onSaveProject,
-							"aria-label": "保存工程",
+							"aria-label": text.save,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Save, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "保存工程到本地" })] }),
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: text.save })] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 						variant: "ghost",
 						size: "sm",
 						className: "gap-1.5",
-						"aria-label": "画布设置",
+						"aria-label": text.canvasSettings,
 						onClick: () => openDialog("projectSettings"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "hidden md:inline",
-							children: "画布设置"
+							children: text.canvasSettings
 						})]
 					}),
 					showLab && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
@@ -505,21 +444,67 @@ function WorkbenchToolbar({ capability, onExport, onSaveProject, onOpenProject,
 						onClick: () => setRoute(route === "lab" ? "editor" : "lab"),
 						children: [route === "lab" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Video, { className: "size-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FlaskConical, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "hidden md:inline",
-							children: route === "lab" ? "返回编辑器" : "能力实验室"
+							children: route === "lab" ? text.backToEditor : text.showLab
 						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapabilityBadge, { info: capability }),
+					showCapabilityBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapabilityBadge, { info: capability }),
+					actions,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 						size: "sm",
 						className: "ml-1 gap-1.5",
 						onClick: onExport,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, { className: "size-4" }), "导出"]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, { className: "size-4" }), text.export]
 					})
 				]
 			})
 		]
 	});
 }
+/**
+* 工程名展示（可选双击重命名）。
+*
+* 重命名走编辑器 store 的 `renameProject`，因此会进撤销栈、并标记 dirty ——
+* 直接改 DOM 或本地 state 会让「保存了什么」和「看到什么」对不上。
+*/
+function ProjectTitle({ name, dirty, placeholder, editable, onRename }) {
+	const [editing, setEditing] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(name);
+	const commit = () => {
+		setEditing(false);
+		const next = draft.trim();
+		if (next.length > 0 && next !== name) onRename(next);
+	};
+	if (editing) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		autoFocus: true,
+		value: draft,
+		onChange: (e) => setDraft(e.target.value),
+		onBlur: commit,
+		onKeyDown: (e) => {
+			if (e.key === "Enter") commit();
+			if (e.key === "Escape") {
+				setDraft(name);
+				setEditing(false);
+			}
+		},
+		className: "h-7 w-48 min-w-0 rounded border bg-background px-1.5 text-sm outline-none focus:ring-1 focus:ring-ring",
+		"aria-label": "工程名称"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 items-center gap-1.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_notify.cn("truncate text-sm font-medium", editable && "cursor-text"),
+			title: editable ? "双击重命名" : name.length > 0 ? name : placeholder,
+			onDoubleClick: editable ? () => {
+				setDraft(name.length > 0 ? name : "");
+				setEditing(true);
+			} : void 0,
+			children: name.length > 0 ? name : placeholder
+		}), dirty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "size-1.5 shrink-0 rounded-full bg-primary",
+			title: "未保存"
+		})]
+	});
+}
 // src/components/layout/use-panel-resize.ts
 /**
 * 面板拖拽调整。内部用 rAF 节流，松手才把最终值写回 store（避免每帧重渲染整棵树）。
@@ -598,44 +583,8 @@ function PanelResizer({ orientation, value, min, max, invert, onChange, classNam
 		"aria-orientation": isVertical ? "vertical" : "horizontal",
 		"aria-label": label,
 		onPointerDown,
-		className: cn("group relative z-20 shrink-0 touch-none transition-colors", isVertical ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize", dragging ? "bg-primary/60" : "bg-border hover:bg-primary/40", className),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: cn("absolute", isVertical ? "-left-1 -right-1 inset-y-0" : "-top-1 -bottom-1 inset-x-0") })
-	});
-}
-// src/components/ui/card.tsx
-function Card({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "card",
-		className: cn("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", className),
-		...props
-	});
-}
-function CardHeader({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "card-header",
-		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
-		...props
-	});
-}
-function CardTitle({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "card-title",
-		className: cn("leading-none font-semibold", className),
-		...props
-	});
-}
-function CardDescription({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "card-description",
-		className: cn("text-sm text-muted-foreground", className),
-		...props
-	});
-}
-function CardContent({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "card-content",
-		className: cn("px-6", className),
-		...props
+		className: require_notify.cn("group relative z-20 shrink-0 touch-none transition-colors", isVertical ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize", dragging ? "bg-primary/60" : "bg-border hover:bg-primary/40", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_notify.cn("absolute", isVertical ? "-left-1 -right-1 inset-y-0" : "-top-1 -bottom-1 inset-x-0") })
 	});
 }
 // src/components/common/LoadingOverlay.tsx
@@ -643,7 +592,7 @@ function CardContent({ className, ...props }) {
 function LoadingOverlay({ visible, title = "处理中…", description, progress, className, fullscreen, children }) {
 	if (!visible) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm", fullscreen ? "fixed inset-0" : "absolute inset-0", className),
+		className: require_notify.cn("z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm", fullscreen ? "fixed inset-0" : "absolute inset-0", className),
 		role: "status",
 		"aria-live": "polite",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -705,7 +654,12 @@ var CHECKS = [
 		hint: "绿幕抠像（可选）"
 	}
 ];
-/** 不满足运行条件时的阻断页：逐项说明缺失能力，不做静默降级 */
+/**
+* 不满足运行条件时的阻断页：逐项说明缺失能力，不做静默降级。
+*
+* 「依赖没装」与「浏览器不支持」要分开呈现 —— 前者是宿主的构建问题（可执行
+* 安装命令解决），后者只能换浏览器。混在一起会让人对着一条装包报错去升浏览器。
+*/
 function UnsupportedBrowser({ report, loading, error }) {
 	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "relative flex min-h-screen items-center justify-center bg-background",
@@ -715,23 +669,46 @@ function UnsupportedBrowser({ report, loading, error }) {
 			fullscreen: false
 		})
 	});
+	const missing = report?.missingDependencies ?? [];
+	const dependenciesMissing = missing.length > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex min-h-screen items-center justify-center bg-background p-6",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_notify.Card, {
 			className: "w-full max-w-2xl",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_notify.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2 text-destructive",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertOctagon, { className: "size-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertOctagon, { className: "size-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_notify.CardTitle, {
 					className: "text-base",
-					children: "当前浏览器无法运行本应用"
+					children: dependenciesMissing ? "缺少引擎依赖" : "当前浏览器无法运行本应用"
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "text-sm text-muted-foreground",
-				children: "WebAV 依赖 WebCodecs 与 OPFS，仅支持 Chromium 内核浏览器。请使用最新版 Chrome 或 Edge（非无痕模式）重新打开。"
-			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardContent, {
+				children: dependenciesMissing ? "工作台的预览与导出依赖 WebAV（@webav/av-cliper、@webav/av-canvas）。当前项目里没有解析到它们。" : "WebAV 依赖 WebCodecs 与 OPFS，仅支持 Chromium 内核浏览器。请使用最新版 Chrome 或 Edge（非无痕模式）重新打开。"
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_notify.CardContent, {
 				className: "space-y-4",
 				children: [
-					report != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					dependenciesMissing && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-2 rounded-md border border-destructive/40 bg-destructive/5 p-3",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "text-xs font-medium text-destructive",
+								children: ["未解析到：", missing.join("、")]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-xs text-muted-foreground",
+								children: "在宿主项目里执行："
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+								className: "overflow-x-auto rounded bg-muted px-3 py-2 text-xs",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: _cut_workbench_core_engine.ENGINE_DEPENDENCIES_INSTALL_COMMAND })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-xs text-muted-foreground",
+								children: "安装后需要重新跑一次构建 —— 缺失依赖只在构建期解析，浏览器里刷新页面没用。"
+							})
+						]
+					}),
+					report != null && !dependenciesMissing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "grid gap-2 sm:grid-cols-2",
 						children: CHECKS.map((check) => {
 							const value = report[check.key];
@@ -801,7 +778,7 @@ var Toaster = (props) => {
 function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 		"data-slot": "textarea",
-		className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className),
+		className: require_notify.cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className),
 		...props
 	});
 }
@@ -809,7 +786,7 @@ function Textarea({ className, ...props }) {
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Label.Root, {
 		"data-slot": "label",
-		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: require_notify.cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
 		...props
 	});
 }
@@ -817,7 +794,7 @@ function Label({ className, ...props }) {
 function ScrollArea({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.ScrollArea.Root, {
 		"data-slot": "scroll-area",
-		className: cn("relative", className),
+		className: require_notify.cn("relative", className),
 		...props,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.Viewport, {
@@ -834,7 +811,7 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.ScrollAreaScrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation,
-		className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+		className: require_notify.cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.ScrollAreaThumb, {
 			"data-slot": "scroll-area-thumb",
@@ -873,7 +850,7 @@ function DialogPortal({ ...props }) {
 function DialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Overlay, {
 		"data-slot": "dialog-overlay",
-		className: cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
+		className: require_notify.cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
 		...props
 	});
 }
@@ -882,7 +859,7 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 		"data-slot": "dialog-portal",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Content, {
 			"data-slot": "dialog-content",
-			className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg", className),
+			className: require_notify.cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg", className),
 			...props,
 			children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Close, {
 				"data-slot": "dialog-close",
@@ -898,14 +875,14 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "dialog-header",
-		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+		className: require_notify.cn("flex flex-col gap-2 text-center sm:text-left", className),
 		...props
 	});
 }
 function DialogFooter({ className, showCloseButton = false, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-slot": "dialog-footer",
-		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		className: require_notify.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
 			asChild: true,
@@ -919,14 +896,14 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Title, {
 		"data-slot": "dialog-title",
-		className: cn("text-lg leading-none font-semibold", className),
+		className: require_notify.cn("text-lg leading-none font-semibold", className),
 		...props
 	});
 }
 function DialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Description, {
 		"data-slot": "dialog-description",
-		className: cn("text-sm text-muted-foreground", className),
+		className: require_notify.cn("text-sm text-muted-foreground", className),
 		...props
 	});
 }
@@ -955,7 +932,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Content, {
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
-		className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		className: require_notify.cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
 		...props
 	}) });
 }
@@ -964,7 +941,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		className: require_notify.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
 		...props
 	});
 }
@@ -972,14 +949,14 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Label, {
 		"data-slot": "dropdown-menu-label",
 		"data-inset": inset,
-		className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
+		className: require_notify.cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
 		...props
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Separator, {
 		"data-slot": "dropdown-menu-separator",
-		className: cn("-mx-1 my-1 h-px bg-border", className),
+		className: require_notify.cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
 }
@@ -987,7 +964,7 @@ function DropdownMenuSeparator({ className, ...props }) {
 /** 统一空态：图标 + 标题 + 说明 + 可选操作 */
 function EmptyState({ icon: Icon, title, description, action, className, compact }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex flex-col items-center justify-center gap-2 text-center", compact ? "px-4 py-6" : "px-6 py-12", className),
+		className: require_notify.cn("flex flex-col items-center justify-center gap-2 text-center", compact ? "px-4 py-6" : "px-6 py-12", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground",
@@ -1005,43 +982,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 (0, _cut_workbench_core.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 = (0, _cut_workbench_react.useCutEditor)();
+	const clips = editor.runtime.clips;
+	const store = editor.store;
+	const [progress, setProgress] = (0, react.useState)([]);
+	const [importing, setImporting] = (0, react.useState)(false);
+	const addAsset = (0, _cut_workbench_react.useEditor)((s) => s.addAsset);
+	const replaceAsset = (0, _cut_workbench_react.useEditor)((s) => s.replaceAsset);
+	const clearMissing = (0, _cut_workbench_react.useEditor)((s) => s.clearMissing);
+	const selectAsset = (0, _cut_workbench_react.useEditor)((s) => s.selectAsset);
+	const beginImport = require_notify.useUi((s) => s.beginImport);
+	const endImport = require_notify.useUi((s) => s.endImport);
+	const { bridge } = require_notify.useWorkbench();
+	return {
+		importing,
+		progress,
+		importFiles: (0, react.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 (0, _cut_workbench_core_engine.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 _cut_workbench_core_engine.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);
+				require_notify.notify(bridge, {
+					level: "success",
+					title: reconnected > 0 ? `已导入 ${imported.length} 个素材（其中 ${reconnected} 个重连到已有片段）` : `已导入 ${imported.length} 个素材`
+				});
+			}
+			if (failures.length > 0) require_notify.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",
@@ -1064,28 +1162,51 @@ 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 } = (0, react_dropzone.useDropzone)({
+	const { bridge } = require_notify.useWorkbench();
+	const { getRootProps, getInputProps, isDragActive } = (0, react_dropzone.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 = (0, react.useCallback)(() => {
+		if (disabled) return;
+		pickMediaFiles(bridge, {
+			accept: ACCEPT,
+			multiple: true,
+			description: "选择要导入的素材"
+		}).then((files) => {
+			if (files.length > 0) onFiles(files);
+		});
+	}, [
+		bridge,
+		disabled,
+		onFiles
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...getRootProps(),
-		className: cn("group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed text-center transition-colors", compact ? "px-3 py-2.5" : "px-4 py-8", isDragActive ? "border-primary bg-primary/10" : "border-border hover:border-primary/60 hover:bg-muted/40", disabled && "pointer-events-none opacity-50", className),
+		onClick: handleClick,
+		"data-drop-zone": "",
+		className: require_notify.cn("group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed text-center transition-colors", compact ? "px-3 py-2.5" : "px-4 py-8", isDragActive ? "border-primary bg-primary/10" : "border-border hover:border-primary/60 hover:bg-muted/40", disabled && "pointer-events-none opacity-50", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...getInputProps() }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2 text-sm font-medium",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: cn("text-muted-foreground", compact ? "size-3.5" : "size-4") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: compact ? "导入素材" : isDragActive ? "松开以导入" : "拖入文件，或点击选择" })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: require_notify.cn("text-muted-foreground", compact ? "size-3.5" : "size-4") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: compact ? "导入素材" : isDragActive ? "松开以导入" : "拖入文件，或点击选择" })]
 			}),
 			!compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "text-xs text-muted-foreground",
@@ -1096,7 +1217,7 @@ function DropZone({ onFiles, disabled, className, compact }) {
 				className: "sr-only",
 				onClick: (e) => {
 					e.stopPropagation();
-					open();
+					handleClick();
 				},
 				children: "选择文件"
 			})
@@ -1107,7 +1228,7 @@ function DropZone({ onFiles, disabled, className, compact }) {
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "skeleton",
-		className: cn("animate-pulse rounded-md bg-accent", className),
+		className: require_notify.cn("animate-pulse rounded-md bg-accent", className),
 		...props
 	});
 }
@@ -1156,7 +1277,7 @@ function MediaCard({ asset, selected, missing, onSelect, onAddToTimeline, onShow
 		onKeyDown: (e) => {
 			if (e.key === "Enter") onAddToTimeline();
 		},
-		className: cn("group relative flex cursor-pointer flex-col gap-1.5 rounded-lg border p-1.5 text-left transition-colors outline-none", missing ? "border-warning/50 bg-warning/5" : selected ? "border-primary bg-primary/10 ring-1 ring-primary/40" : "border-border bg-card hover:border-primary/40 hover:bg-muted/40 focus-visible:border-primary"),
+		className: require_notify.cn("group relative flex cursor-pointer flex-col gap-1.5 rounded-lg border p-1.5 text-left transition-colors outline-none", missing ? "border-warning/50 bg-warning/5" : selected ? "border-primary bg-primary/10 ring-1 ring-primary/40" : "border-border bg-card hover:border-primary/40 hover:bg-muted/40 focus-visible:border-primary"),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative aspect-video w-full overflow-hidden rounded-md bg-muted",
@@ -1177,7 +1298,7 @@ function MediaCard({ asset, selected, missing, onSelect, onAddToTimeline, onShow
 							opacity: .9
 						})
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: cn("flex size-full items-center justify-center", kind.tone),
+						className: require_notify.cn("flex size-full items-center justify-center", kind.tone),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-7" })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -1224,7 +1345,7 @@ function MediaCard({ asset, selected, missing, onSelect, onAddToTimeline, onShow
 					children: asset.name
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 					className: "truncate text-[10px] text-muted-foreground",
-					children: [asset.kind === "audio" ? `${formatBytes(asset.size)} · 48kHz 双声道` : asset.kind === "text" || asset.kind === "subtitle" ? `${formatResolution(asset.width, asset.height)}` : `${formatResolution(asset.width, asset.height)} · ${formatBytes(asset.size)}`, asset.hasAudio ? " · 含音轨" : ""]
+					children: [asset.kind === "audio" ? `${require_notify.formatBytes(asset.size)} · 48kHz 双声道` : asset.kind === "text" || asset.kind === "subtitle" ? `${require_notify.formatResolution(asset.width, asset.height)}` : `${require_notify.formatResolution(asset.width, asset.height)} · ${require_notify.formatBytes(asset.size)}`, asset.hasAudio ? " · 含音轨" : ""]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
@@ -1266,7 +1387,7 @@ function MediaGrid({ assets, selectedAssetId, missingAssetIds = [], progress, on
 		className: "grid grid-cols-2 gap-2.5 p-2.5",
 		children: [
 			progress.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("flex flex-col gap-1.5 rounded-lg border border-dashed p-1.5", item.error != null && "border-destructive/50 bg-destructive/5"),
+				className: require_notify.cn("flex flex-col gap-1.5 rounded-lg border border-dashed p-1.5", item.error != null && "border-destructive/50 bg-destructive/5"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "aspect-video w-full rounded-md" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -1317,122 +1438,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 = (0, _cut_workbench_react.useCutEditor)();
-	const clips = editor.runtime.clips;
-	const store = editor.store;
-	const [progress, setProgress] = (0, react.useState)([]);
-	const [importing, setImporting] = (0, react.useState)(false);
-	const addAsset = (0, _cut_workbench_react.useEditor)((s) => s.addAsset);
-	const replaceAsset = (0, _cut_workbench_react.useEditor)((s) => s.replaceAsset);
-	const clearMissing = (0, _cut_workbench_react.useEditor)((s) => s.clearMissing);
-	const selectAsset = (0, _cut_workbench_react.useEditor)((s) => s.selectAsset);
-	const beginImport = useUi((s) => s.beginImport);
-	const endImport = useUi((s) => s.endImport);
-	return {
-		importing,
-		progress,
-		importFiles: (0, react.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 (0, _cut_workbench_core_engine.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 _cut_workbench_core_engine.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);
-				sonner.toast.success(reconnected > 0 ? `已导入 ${imported.length} 个素材（其中 ${reconnected} 个重连到已有片段）` : `已导入 ${imported.length} 个素材`);
-			}
-			if (failures.length > 0) sonner.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 = (0, _cut_workbench_react.useEditor)((s) => s.assets);
-	const selectedAssetId = (0, _cut_workbench_react.useEditor)((s) => s.selectedAssetId);
-	const missingAssetIds = (0, _cut_workbench_react.useEditor)((s) => s.missingAssetIds);
+function MediaLibraryPanel({ onAddToTimeline, onRemoveAsset }) {
+	const assets = (0, _cut_workbench_react.useEditor)((s) => s.assets);
+	const selectedAssetId = (0, _cut_workbench_react.useEditor)((s) => s.selectedAssetId);
+	const missingAssetIds = (0, _cut_workbench_react.useEditor)((s) => s.missingAssetIds);
 	const selectAsset = (0, _cut_workbench_react.useEditor)((s) => s.selectAsset);
 	const { importing, progress, importFiles } = useMediaImport();
 	const [metaAssetId, setMetaAssetId] = (0, react.useState)(null);
@@ -1505,11 +1525,11 @@ function MediaLibraryPanel({ onAddToTimeline, onRemoveAsset }) {
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 								label: "分辨率",
-								value: formatResolution(metaAsset.width, metaAsset.height)
+								value: require_notify.formatResolution(metaAsset.width, metaAsset.height)
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 								label: "大小",
-								value: metaAsset.kind === "text" ? "—" : formatBytes(metaAsset.size)
+								value: metaAsset.kind === "text" ? "—" : require_notify.formatBytes(metaAsset.size)
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 								label: "音轨",
@@ -1585,6 +1605,7 @@ function CreateTextDialog({ open, onOpenChange, onCreated }) {
 	const projectWidth = (0, _cut_workbench_react.useEditor)((s) => s.project.width);
 	const projectHeight = (0, _cut_workbench_react.useEditor)((s) => s.project.height);
 	const addAsset = (0, _cut_workbench_react.useEditor)((s) => s.addAsset);
+	const { bridge } = require_notify.useWorkbench();
 	const handleCreate = () => {
 		const { asset } = (0, _cut_workbench_core_engine.createTextAsset)({
 			registry: editor.runtime.clips,
@@ -1595,7 +1616,10 @@ function CreateTextDialog({ open, onOpenChange, onCreated }) {
 		addAsset(asset);
 		onCreated(asset.id);
 		onOpenChange(false);
-		sonner.toast.success("已创建文字素材");
+		require_notify.notify(bridge, {
+			level: "success",
+			title: "已创建文字素材"
+		});
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
 		open,
@@ -1629,10 +1653,15 @@ function CreateSubtitleDialog({ open, onOpenChange, onCreated }) {
 	const projectWidth = (0, _cut_workbench_react.useEditor)((s) => s.project.width);
 	const projectHeight = (0, _cut_workbench_react.useEditor)((s) => s.project.height);
 	const addAsset = (0, _cut_workbench_react.useEditor)((s) => s.addAsset);
+	const { bridge } = require_notify.useWorkbench();
 	const handleCreate = () => {
 		const durationUs = (0, _cut_workbench_core.parseSrtDurationUs)(srt);
 		if (durationUs <= 0) {
-			sonner.toast.error("SRT 解析失败", { description: "请检查时间轴格式：00:00:00,000 --> 00:00:02,000" });
+			require_notify.notify(bridge, {
+				level: "error",
+				title: "SRT 解析失败",
+				description: "请检查时间轴格式：00:00:00,000 --> 00:00:02,000"
+			});
 			return;
 		}
 		const { asset } = (0, _cut_workbench_core_engine.createSubtitleAsset)({
@@ -1645,7 +1674,10 @@ function CreateSubtitleDialog({ open, onOpenChange, onCreated }) {
 		addAsset(asset);
 		onCreated(asset.id);
 		onOpenChange(false);
-		sonner.toast.success("已创建字幕素材");
+		require_notify.notify(bridge, {
+			level: "success",
+			title: "已创建字幕素材"
+		});
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
 		open,
@@ -1671,11 +1703,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);
-	sonner.toast.error(fallback, { description: message });
+	require_notify.notify(void 0, {
+		level: "error",
+		title: fallback,
+		description: message
+	});
 }
 // src/features/preview/hooks/useAvCanvas.ts
 /**
@@ -2305,7 +2348,7 @@ function PreviewStage({ attachRef, width, height, emptyHint, onCapture, onFullsc
 	const scaleY = height > 0 ? box.h / height : 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: outerRef,
-		className: cn("relative flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-stage-bg", className),
+		className: require_notify.cn("relative flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-stage-bg", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative shrink-0 overflow-hidden rounded-md bg-black shadow-2xl ring-1 ring-border",
 			style: {
@@ -2366,14 +2409,14 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
 		value,
 		min,
 		max,
-		className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+		className: require_notify.cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Slider.Track, {
 			"data-slot": "slider-track",
-			className: cn("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
+			className: require_notify.cn("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Slider.Range, {
 				"data-slot": "slider-range",
-				className: cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+				className: require_notify.cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
 			})
 		}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Slider.Thumb, {
 			"data-slot": "slider-thumb",
@@ -2388,7 +2431,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
 */
 function Timecode({ us, showMs = true, className, muted, title }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: cn("font-mono text-xs tabular-nums", muted && "text-muted-foreground", className),
+		className: require_notify.cn("font-mono text-xs tabular-nums", muted && "text-muted-foreground", className),
 		title: title ?? `${us} µs`,
 		children: (0, _cut_workbench_core.formatTimecode)(us, showMs)
 	});
@@ -2400,15 +2443,51 @@ var RATES = [
 	1.5,
 	2
 ];
+/**
+* 紧凑档位（按容器宽度，不是视口 —— 预览列宽由拖拽决定）。
+*
+* 阈值来自实测的控件总宽：完整形态约 680px，`< 700` 先去音量滑杆与速率、
+* `< 560` 再去时间码的「总时长」与进度条、`< 420` 再去跳首尾。
+* 只靠 `shrink-0` + `overflow:hidden` 会在 650px 左右把时间码裁掉，
+* 且**没有任何报错**，只有截图能看出来 —— 所以这里显式分级。
+*/
+var FULL_PX = 700;
+var COMPACT_PX = 620;
+var TIGHT_PX = 520;
+var ULTRA_COMPACT_PX = 420;
+/** 低于此宽度连时间码都放不下：只留播放/逐帧，横向可滚 */
+var MICRO_PX = 200;
 /** 播放控制条：逐帧 / 跳首尾 / 播放 / 时间码 / 速率 / 音量 */
 function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playbackRate, disabled, onToggle, onJumpStart, onJumpEnd, onStepFrame, onSeek, onVolumeChange, onRateChange, className }) {
+	const rootRef = (0, react.useRef)(null);
+	const [width, setWidth] = (0, react.useState)(0);
+	/**
+	* 用容器宽度而不是 CSS 媒体查询。
+	*
+	* 预览面板宽度由左侧拖拽决定，和视口宽度无关 —— 用户把两侧拉宽时，
+	* 视口一点没变，`max-[560px]:hidden` 这类媒体查询不会触发，时间码照样被压扁。
+	*/
+	(0, react.useEffect)(() => {
+		const el = rootRef.current;
+		if (el == null) return;
+		const ro = new ResizeObserver(() => setWidth(el.clientWidth));
+		ro.observe(el);
+		setWidth(el.clientWidth);
+		return () => ro.disconnect();
+	}, []);
+	const compact = width > 0 && width < COMPACT_PX;
+	const tight = width > 0 && width < TIGHT_PX;
+	const ultraCompact = width > 0 && width < ULTRA_COMPACT_PX;
+	const micro = width > 0 && width < MICRO_PX;
+	const full = width === 0 || width >= FULL_PX;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex h-11 shrink-0 items-center gap-1.5 border-t bg-card/60 px-3", className),
+		ref: rootRef,
+		className: require_notify.cn("flex h-11 shrink-0 items-center gap-1.5 overflow-hidden border-t bg-card/60", ultraCompact ? "px-1.5" : "px-3", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-0.5",
+				className: "flex shrink-0 items-center gap-0.5",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					!ultraCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "ghost",
@@ -2450,7 +2529,7 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.StepForward, { className: "size-3.5" })
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "下一帧 (→)" })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					!ultraCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "ghost",
@@ -2464,23 +2543,19 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mx-2 flex items-baseline gap-1",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
-						us: currentUs,
-						className: "text-[13px] font-medium"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-xs text-muted-foreground",
-						children: "/"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
-						us: durationUs,
-						muted: true
-					})
-				]
+				className: require_notify.cn("mx-2 flex shrink-0 items-baseline gap-1 whitespace-nowrap", ultraCompact && "mx-1", micro && "hidden"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
+					us: currentUs,
+					className: "text-[13px] font-medium"
+				}), !tight && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-muted-foreground",
+					children: "/"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
+					us: durationUs,
+					muted: true
+				})] })]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			!ultraCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				type: "range",
 				className: "mx-1 h-1 min-w-16 flex-1 cursor-pointer appearance-none rounded-full bg-muted accent-primary",
 				min: 0,
@@ -2492,14 +2567,14 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 				"aria-label": "播放进度"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-1",
+				className: require_notify.cn("flex shrink-0 items-center gap-1", compact && "ml-auto", micro && "hidden"),
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					!compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "flex items-center rounded-md border p-0.5",
 						children: RATES.map((rate) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							onClick: () => onRateChange(rate),
-							className: cn("rounded px-1.5 py-0.5 text-[11px] tabular-nums transition-colors", playbackRate === rate ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"),
+							className: require_notify.cn("rounded px-1.5 py-0.5 text-[11px] tabular-nums transition-colors", playbackRate === rate ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"),
 							title: rate !== 1 ? "变速预览（不会改变导出结果）" : "正常速度",
 							children: [rate, "×"]
 						}, rate))
@@ -2514,7 +2589,7 @@ function PlaybackControls({ playing, currentUs, durationUs, masterVolume, playba
 							children: masterVolume > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Volume2, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.VolumeX, { className: "size-3.5" })
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: masterVolume > 0 ? "静音预览" : "取消静音" })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
+					full && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
 						className: "w-20",
 						min: 0,
 						max: 1,
@@ -2563,6 +2638,7 @@ function PreviewPanel() {
 	const setMasterVolume = (0, _cut_workbench_react.useEditor)((s) => s.setMasterVolume);
 	const playheadUs = (0, _cut_workbench_react.useEditor)((s) => s.playheadUs);
 	const selectedClipIds = (0, _cut_workbench_react.useEditor)((s) => s.selectedClipIds);
+	const { bridge } = require_notify.useWorkbench();
 	const canvas = useAvCanvas({
 		width: project.width,
 		height: project.height
@@ -2573,12 +2649,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) sonner.toast.warning(`${missing.length} 个片段缺少源文件，已跳过预览`, {
+		if (missing.length > 0) require_notify.notify(bridge, {
+			level: "warning",
+			title: `${missing.length} 个片段缺少源文件，已跳过预览`,
 			description: "刷新后素材二进制不会保留，请重新导入相同文件",
 			duration: 8e3
 		});
-		if (other.length > 0) sonner.toast.error("部分片段无法载入预览", { description: Array.from(new Set(other.map((e) => e.message))).slice(0, 3).join("\n") });
-	}, []);
+		if (other.length > 0) require_notify.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,
@@ -2714,12 +2796,18 @@ function PreviewPanel() {
 	const handleCapture = (0, react.useCallback)(() => {
 		const dataUrl = canvas.captureImage();
 		if (dataUrl == null) {
-			sonner.toast.error("截图失败：画布尚未就绪");
+			require_notify.notify(bridge, {
+				level: "error",
+				title: "截图失败：画布尚未就绪"
+			});
 			return;
 		}
 		downloadDataUrl(dataUrl, `frame-${Date.now()}.png`);
-		sonner.toast.success("已导出当前帧");
-	}, [canvas]);
+		require_notify.notify(bridge, {
+			level: "success",
+			title: "已导出当前帧"
+		});
+	}, [bridge, canvas]);
 	const handleFullscreen = () => {
 		const el = canvas.containerRef.current?.parentElement;
 		if (el == null) return;
@@ -2798,143 +2886,148 @@ var DEFAULT_BITRATE = 8e6;
 /** 时间轴顶部工具条：分割 / 复制 / 删除 / 吸附开关 / 缩放 / 加轨道 */
 function TimelineToolbar({ playheadUs, durationUs, pxPerSecond, selectionCount, magnetEnabled, onToggleMagnet, onSplit, onDuplicate, onRemove, onZoomIn, onZoomOut, onZoomToFit, onAddTrack, canZoomIn, canZoomOut }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex h-9 shrink-0 items-center gap-1 border-b bg-card/60 px-2",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onSplit,
-					"aria-label": "分割",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Scissors, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "在播放头分割 (S)" })] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onDuplicate,
-					disabled: selectionCount === 0,
-					"aria-label": "复制片段",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "复制片段 (Ctrl+D)" })] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: onRemove,
-					disabled: selectionCount === 0,
-					"aria-label": "删除片段",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "删除片段 (Delete)" })] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					variant: magnetEnabled ? "secondary" : "ghost",
-					size: "icon-sm",
-					onClick: onToggleMagnet,
-					"aria-label": "吸附",
-					"aria-pressed": magnetEnabled,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Magnet, { className: "size-3.5" })
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "吸附对齐（阈值 15px）" })] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-0.5",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-							variant: "ghost",
-							size: "icon-sm",
-							onClick: onZoomOut,
-							disabled: !canZoomOut,
-							"aria-label": "缩小",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, { className: "size-3.5" })
-						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "缩小 (-)" })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "w-11 text-center font-mono text-[10px] text-muted-foreground tabular-nums",
-						children: Math.round(pxPerSecond)
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+		className: "thin-scrollbar @container flex h-9 shrink-0 items-center gap-1 overflow-x-auto overflow-y-hidden border-b bg-card/60 px-2",
+		role: "toolbar",
+		"aria-label": "时间轴工具",
+		"data-timeline-toolbar": true,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onSplit,
+						"aria-label": "分割",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Scissors, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "在播放头分割 (S)" })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onDuplicate,
+						disabled: selectionCount === 0,
+						"aria-label": "复制片段",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "复制片段 (Ctrl+D)" })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: onRemove,
+						disabled: selectionCount === 0,
+						"aria-label": "删除片段",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "删除片段 (Delete)" })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						variant: magnetEnabled ? "secondary" : "ghost",
+						size: "icon-sm",
+						onClick: onToggleMagnet,
+						"aria-label": "吸附",
+						"aria-pressed": magnetEnabled,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Magnet, { className: "size-3.5" })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "吸附对齐（阈值 15px）" })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-0.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: onZoomOut,
+								disabled: !canZoomOut,
+								"aria-label": "缩小",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, { className: "size-3.5" })
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "缩小 (-)" })] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "w-11 text-center font-mono text-[10px] text-muted-foreground tabular-nums",
+							children: Math.round(pxPerSecond)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: onZoomIn,
+								disabled: !canZoomIn,
+								"aria-label": "放大",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, { className: "size-3.5" })
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "放大 (+)" })] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "ghost",
-							size: "icon-sm",
-							onClick: onZoomIn,
-							disabled: !canZoomIn,
-							"aria-label": "放大",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, { className: "size-3.5" })
+							size: "xs",
+							onClick: onZoomToFit,
+							className: "text-[10px]",
+							children: "适应"
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: "放大 (+)" })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+					orientation: "vertical",
+					className: "mx-1 h-4"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-0.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 						variant: "ghost",
 						size: "xs",
-						onClick: onZoomToFit,
-						className: "text-[10px]",
-						children: "适应"
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
-				orientation: "vertical",
-				className: "mx-1 h-4"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-0.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-					variant: "ghost",
-					size: "xs",
-					onClick: () => onAddTrack("visual"),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-3" }), "视频轨"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-					variant: "ghost",
-					size: "xs",
-					onClick: () => onAddTrack("audio"),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-3" }), "音频轨"]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "ml-auto flex items-center gap-2 text-[11px] text-muted-foreground",
-				children: [
-					selectionCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "rounded bg-primary/15 px-1.5 py-0.5 text-primary",
-						children: ["已选 ", selectionCount]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "size-3" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "tabular-nums",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
-								us: playheadUs,
-								className: "text-foreground"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "mx-1",
-								children: "/"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
-								us: durationUs,
-								muted: true
-							})
-						]
-					})
-				]
-			})
-		]
+						onClick: () => onAddTrack("visual"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-3" }), "视频轨"]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onAddTrack("audio"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-3" }), "音频轨"]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "ml-auto hidden shrink-0 items-center gap-2 pl-2 text-[11px] text-muted-foreground @[720px]:flex",
+			children: [
+				selectionCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "rounded bg-primary/15 px-1.5 py-0.5 text-primary",
+					children: ["已选 ", selectionCount]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "size-3" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "tabular-nums whitespace-nowrap",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
+							us: playheadUs,
+							className: "text-foreground"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "mx-1",
+							children: "/"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timecode, {
+							us: durationUs,
+							muted: true
+						})
+					]
+				})
+			]
+		})]
 	});
 }
 // src/features/timeline/components/Ruler.tsx
@@ -2951,14 +3044,14 @@ function Ruler({ pxPerSecond, widthPx, playheadPx, scrollLeftPx, className }) {
 		widthPx
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("relative shrink-0 cursor-ew-resize border-b bg-timeline-bg select-none", className),
+		className: require_notify.cn("relative shrink-0 cursor-ew-resize border-b bg-timeline-bg select-none", className),
 		style: {
 			height: 28,
 			width: widthPx
 		},
 		children: [
 			ticks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: cn("absolute bottom-0 w-px", tick.major ? "h-2 bg-muted-foreground/50" : "h-1 bg-muted-foreground/25"),
+				className: require_notify.cn("absolute bottom-0 w-px", tick.major ? "h-2 bg-muted-foreground/50" : "h-1 bg-muted-foreground/25"),
 				style: { left: tick.px }
 			}, `${tick.us}-${tick.major ? "M" : "m"}`)),
 			ticks.filter((t) => t.major).map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -2986,7 +3079,7 @@ function Ruler({ pxPerSecond, widthPx, playheadPx, scrollLeftPx, className }) {
 */
 var TrackHeader = (0, react.memo)(function TrackHeader({ track, onToggleMute, onToggleLock, onToggleHidden, onRemove }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex items-center gap-1 border-r border-b border-timeline-grid px-2", track.kind === "audio" ? "bg-clip-audio/10" : "bg-clip-video/10", track.hidden && "opacity-60"),
+		className: require_notify.cn("flex items-center gap-1 border-r border-b border-timeline-grid px-2", track.kind === "audio" ? "bg-clip-audio/10" : "bg-clip-video/10", track.hidden && "opacity-60"),
 		style: { height: 56 },
 		"data-track-header": true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3041,7 +3134,7 @@ function IconToggle({ active, onClick, label, icon: Icon }) {
 			onClick,
 			"aria-label": label,
 			"aria-pressed": active,
-			className: cn("flex size-[18px] items-center justify-center rounded transition-colors", active ? "bg-primary/20 text-primary" : "text-muted-foreground hover:text-foreground"),
+			className: require_notify.cn("flex size-[18px] items-center justify-center rounded transition-colors", active ? "bg-primary/20 text-primary" : "text-muted-foreground hover:text-foreground"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-3" })
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: label })] });
@@ -3132,7 +3225,7 @@ var ClipBlock = (0, react.memo)(function ClipBlock({ clip, asset, pxPerSecond, s
 			handlers.beginMove(event, clip);
 		},
 		onDoubleClick: () => handlers.seekTo(clip),
-		className: cn("group absolute top-1 bottom-1 overflow-hidden rounded-md border text-left select-none transition-shadow", KIND_BG[kind], selected ? "ring-2 ring-primary ring-offset-1 ring-offset-timeline-bg" : "hover:brightness-110", locked ? "cursor-not-allowed opacity-70" : "cursor-grab active:cursor-grabbing"),
+		className: require_notify.cn("group absolute top-1 bottom-1 overflow-hidden rounded-md border text-left select-none transition-shadow", KIND_BG[kind], selected ? "ring-2 ring-primary ring-offset-1 ring-offset-timeline-bg" : "hover:brightness-110", locked ? "cursor-not-allowed opacity-70" : "cursor-grab active:cursor-grabbing"),
 		style: {
 			left: leftPx,
 			width: widthPx,
@@ -3211,7 +3304,7 @@ function ContextMenuPortal({ ...props }) {
 function ContextMenuContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Content, {
 		"data-slot": "context-menu-content",
-		className: cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		className: require_notify.cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
 		...props
 	}) });
 }
@@ -3220,21 +3313,21 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		className: require_notify.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
 		...props
 	});
 }
 function ContextMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Separator, {
 		"data-slot": "context-menu-separator",
-		className: cn("-mx-1 my-1 h-px bg-border", className),
+		className: require_notify.cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
 }
 function ContextMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-slot": "context-menu-shortcut",
-		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		className: require_notify.cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
 		...props
 	});
 }
@@ -3291,14 +3384,14 @@ function ClipContextMenu({ children, onSplit, onDuplicate, onRemove, onShowInfo,
 /** 播放头：一条竖线 + 顶部把手，跨过所有轨道 */
 function Playhead({ px, playing, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("pointer-events-none absolute top-0 bottom-0 z-20 w-px", className),
+		className: require_notify.cn("pointer-events-none absolute top-0 bottom-0 z-20 w-px", className),
 		style: { left: px },
 		"aria-hidden": true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("absolute inset-y-0 -left-px w-0.5 bg-playhead", playing && "shadow-[0_0_6px_var(--cw-playhead)]"),
+			className: require_notify.cn("absolute inset-y-0 -left-px w-0.5 bg-playhead", playing && "shadow-[0_0_6px_var(--cw-playhead)]"),
 			style: { top: 24 }
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("absolute -translate-x-1/2 rounded-sm bg-playhead", playing ? "size-3 rotate-45" : "h-2.5 w-2.5 rotate-45"),
+			className: require_notify.cn("absolute -translate-x-1/2 rounded-sm bg-playhead", playing ? "size-3 rotate-45" : "h-2.5 w-2.5 rotate-45"),
 			style: { top: 14 }
 		})]
 	});
@@ -3307,7 +3400,7 @@ function Playhead({ px, playing, className }) {
 /** 框选矩形 */
 function Marquee({ x1, y1, x2, y2, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("pointer-events-none absolute z-40 rounded-sm border border-primary/70 bg-primary/15", className),
+		className: require_notify.cn("pointer-events-none absolute z-40 rounded-sm border border-primary/70 bg-primary/15", className),
 		style: {
 			left: Math.min(x1, x2),
 			top: Math.min(y1, y2),
@@ -3325,10 +3418,10 @@ function Marquee({ x1, y1, x2, y2, className }) {
 * 调整回去，视觉上内容不会乱跳。
 */
 function useTimelineZoom(containerRef) {
-	const uiApi = useUiStoreApi();
-	const pxPerSecond = useUi((s) => s.pxPerSecond);
-	const setPxPerSecond = useUi((s) => s.setPxPerSecond);
-	const setScrollLeftPx = useUi((s) => s.setScrollLeftPx);
+	const uiApi = require_notify.useUiStoreApi();
+	const pxPerSecond = require_notify.useUi((s) => s.pxPerSecond);
+	const setPxPerSecond = require_notify.useUi((s) => s.setPxPerSecond);
+	const setScrollLeftPx = require_notify.useUi((s) => s.setScrollLeftPx);
 	const applyZoom = (0, react.useCallback)((nextPps, anchorClientX) => {
 		const container = containerRef.current;
 		const prevPps = uiApi.getState().pxPerSecond;
@@ -3653,7 +3746,7 @@ function useTimelineDrag({ pxPerSecond, contentLeftPx, resolveTrackAt, snapEnabl
 */
 function Timeline() {
 	const editor = (0, _cut_workbench_react.useCutEditor)();
-	const uiApi = useUiStoreApi();
+	const uiApi = require_notify.useUiStoreApi();
 	const project = (0, _cut_workbench_react.useEditor)((s) => s.project);
 	const assets = (0, _cut_workbench_react.useEditor)((s) => s.assets);
 	const selectedClipIds = (0, _cut_workbench_react.useEditor)((s) => s.selectedClipIds);
@@ -3898,7 +3991,7 @@ function Timeline() {
 		splitClip
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex min-h-0 flex-1 flex-col",
+		className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineToolbar, {
 				playheadUs,
@@ -3918,7 +4011,7 @@ function Timeline() {
 				canZoomOut: zoom.canZoomOut
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative flex min-h-0 flex-1",
+				className: "relative flex min-h-0 min-w-0 flex-1 overflow-hidden",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "thin-scrollbar flex shrink-0 flex-col overflow-y-auto border-r",
 					style: { width: 150 },
@@ -3982,7 +4075,7 @@ function Timeline() {
 									"data-timeline-tracks": true,
 									children: [
 										project.tracks.map((track, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: cn("relative border-b border-timeline-grid", track.kind === "audio" ? "bg-timeline-track/30" : "bg-timeline-track/50", track.hidden && "opacity-40"),
+											className: require_notify.cn("relative border-b border-timeline-grid", track.kind === "audio" ? "bg-timeline-track/30" : "bg-timeline-track/50", track.hidden && "opacity-40"),
 											style: { height: 56 },
 											"data-track-row": track.id,
 											children: [
@@ -4053,7 +4146,7 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
 		"data-slot": "tabs",
 		"data-orientation": orientation,
 		orientation,
-		className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
+		className: require_notify.cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
 		...props
 	});
 }
@@ -4068,21 +4161,21 @@ function TabsList({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.List, {
 		"data-slot": "tabs-list",
 		"data-variant": variant,
-		className: cn(tabsListVariants({ variant }), className),
+		className: require_notify.cn(tabsListVariants({ variant }), className),
 		...props
 	});
 }
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
+		className: require_notify.cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
 		...props
 	});
 }
 function TabsContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Content, {
 		"data-slot": "tabs-content",
-		className: cn("flex-1 outline-none", className),
+		className: require_notify.cn("flex-1 outline-none", className),
 		...props
 	});
 }
@@ -4091,7 +4184,7 @@ function Input({ className, type, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		type,
 		"data-slot": "input",
-		className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
+		className: require_notify.cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
 		...props
 	});
 }
@@ -4112,7 +4205,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Trigger, {
 		"data-slot": "select-trigger",
 		"data-size": size,
-		className: cn("flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: require_notify.cn("flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
 		...props,
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Icon, {
 			asChild: true,
@@ -4126,14 +4219,14 @@ function SelectContent({ className, children, position = "item-aligned", align =
 		container: container ?? void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Content, {
 			"data-slot": "select-content",
-			className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+			className: require_notify.cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
 			position,
 			align,
 			...props,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollUpButton, {}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Viewport, {
-					className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
+					className: require_notify.cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
 					children
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollDownButton, {})
@@ -4144,7 +4237,7 @@ function SelectContent({ className, children, position = "item-aligned", align =
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Item, {
 		"data-slot": "select-item",
-		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		className: require_notify.cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-slot": "select-item-indicator",
@@ -4156,7 +4249,7 @@ function SelectItem({ className, children, ...props }) {
 function SelectScrollUpButton({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.ScrollUpButton, {
 		"data-slot": "select-scroll-up-button",
-		className: cn("flex cursor-default items-center justify-center py-1", className),
+		className: require_notify.cn("flex cursor-default items-center justify-center py-1", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUpIcon, { className: "size-4" })
 	});
@@ -4164,7 +4257,7 @@ function SelectScrollUpButton({ className, ...props }) {
 function SelectScrollDownButton({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.ScrollDownButton, {
 		"data-slot": "select-scroll-down-button",
-		className: cn("flex cursor-default items-center justify-center py-1", className),
+		className: require_notify.cn("flex cursor-default items-center justify-center py-1", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "size-4" })
 	});
@@ -4173,7 +4266,7 @@ function SelectScrollDownButton({ className, ...props }) {
 /** 属性面板的一行：标签 + 控件（标签在左，控件占满剩余宽度） */
 function Field({ label, hint, children, className, htmlFor }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex items-center gap-2", className),
+		className: require_notify.cn("flex items-center gap-2", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
 				htmlFor,
@@ -4194,7 +4287,7 @@ function Field({ label, hint, children, className, htmlFor }) {
 /** 属性分组 */
 function Section({ title, children, action, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: cn("space-y-2", className),
+		className: require_notify.cn("space-y-2", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
@@ -4389,7 +4482,7 @@ function VideoProps({ clip, onPatch, onPatchTransform, onPatchSize }) {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
 						type: "number",
 						className: "h-7 text-xs tabular-nums",
-						value: formatSeconds(clip.startUs),
+						value: require_notify.formatSeconds(clip.startUs),
 						step: .1,
 						min: 0,
 						onChange: (e) => {
@@ -4403,7 +4496,7 @@ function VideoProps({ clip, onPatch, onPatchTransform, onPatchSize }) {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
 						type: "number",
 						className: "h-7 text-xs tabular-nums",
-						value: formatSeconds(clip.durationUs),
+						value: require_notify.formatSeconds(clip.durationUs),
 						step: .1,
 						min: .1,
 						onChange: (e) => {
@@ -4510,7 +4603,7 @@ function AudioProps({ clip, onPatch }) {
 				className: "text-[10px] text-muted-foreground",
 				children: [
 					"片段时长 ",
-					formatSeconds(clip.durationUs),
+					require_notify.formatSeconds(clip.durationUs),
 					"s，淡入使用 setAnimation 线性插值。"
 				]
 			})
@@ -4765,7 +4858,7 @@ function SubtitleProps({ clip, onPatch, onRebuild }) {
 			className: "text-[10px] text-muted-foreground",
 			children: [
 				"片段时长 ",
-				formatSeconds(clip.durationUs),
+				require_notify.formatSeconds(clip.durationUs),
 				"s",
 				cues.length > 0 && ` · 最后一条结束于 ${(cues[cues.length - 1].endMs / 1e3).toFixed(2)}s`
 			]
@@ -5037,7 +5130,7 @@ function InspectorPanel() {
 								title: asset.name,
 								children: asset.name
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_notify.Badge, {
 								variant: "outline",
 								className: "text-[10px]",
 								children: KIND_LABEL[asset.kind]
@@ -5060,7 +5153,7 @@ function InspectorPanel() {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
 							(0, _cut_workbench_core.formatDuration)(clip.durationUs),
 							" · ",
-							formatResolution(asset.width, asset.height)
+							require_notify.formatResolution(asset.width, asset.height)
 						] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
 							"入点 ",
 							(clip.inPointUs / 1e6).toFixed(2),
@@ -5165,11 +5258,11 @@ function Switch({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Switch.Root, {
 		"data-slot": "switch",
 		"data-size": size,
-		className: cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className),
+		className: require_notify.cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Switch.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground")
+			className: require_notify.cn("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground")
 		})
 	});
 }
@@ -5177,7 +5270,7 @@ function Switch({ className, size = "default", ...props }) {
 function Progress({ className, value, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Progress.Root, {
 		"data-slot": "progress",
-		className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
+		className: require_notify.cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Progress.Indicator, {
 			"data-slot": "progress-indicator",
@@ -5708,8 +5801,8 @@ var FPS_OPTIONS = [
 * 所有重活都在 Worker 里；这里只负责 UI 与状态机。
 */
 function ExportDialog() {
-	const open = useUi((s) => s.dialog === "export");
-	const closeDialog = useUi((s) => s.closeDialog);
+	const open = require_notify.useUi((s) => s.dialog === "export");
+	const closeDialog = require_notify.useUi((s) => s.closeDialog);
 	const project = (0, _cut_workbench_react.useEditor)((s) => s.project);
 	const assets = (0, _cut_workbench_react.useEditor)((s) => s.assets);
 	const [preset, setPreset] = (0, react.useState)("1080p");
@@ -5855,7 +5948,7 @@ function ExportDialog() {
 									className: "flex justify-between",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "预估大小" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "font-mono tabular-nums",
-										children: formatBytes(estimatedBytes)
+										children: require_notify.formatBytes(estimatedBytes)
 									})]
 								}),
 								hasTextClips && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -5892,10 +5985,10 @@ function ExportDialog() {
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "size-3.5" }),
 									"导出完成 · 耗时 ",
-									formatElapsed(state.result.elapsedMs / 1e3),
+									require_notify.formatElapsed(state.result.elapsedMs / 1e3),
 									" ·",
 									" ",
-									formatBytes(state.result.blob.size),
+									require_notify.formatBytes(state.result.blob.size),
 									state.result.mode === "main" && "（主线程）"
 								]
 							}),
@@ -5958,7 +6051,7 @@ function ExportProgress({ progress, label = "正在合成…", className }) {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-3 animate-spin" }), label]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "font-mono tabular-nums",
-				children: formatPercent(progress)
+				children: require_notify.formatPercent(progress)
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Progress, { value: progress * 100 })]
 	});
@@ -6034,7 +6127,7 @@ function CanvasSettingsBody({ onDone }) {
 								setDraftW(String(preset.width));
 								setDraftH(String(preset.height));
 							},
-							className: cn("flex flex-col items-center gap-1 rounded-md border px-2 py-2 text-[11px] transition-colors", activePreset?.id === preset.id ? "border-primary bg-primary/10 text-foreground" : "text-muted-foreground hover:border-primary/50 hover:text-foreground"),
+							className: require_notify.cn("flex flex-col items-center gap-1 rounded-md border px-2 py-2 text-[11px] transition-colors", activePreset?.id === preset.id ? "border-primary bg-primary/10 text-foreground" : "text-muted-foreground hover:border-primary/50 hover:text-foreground"),
 							title: preset.hint,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "block rounded-[2px] border border-current opacity-70",
@@ -6095,7 +6188,7 @@ function CanvasSettingsBody({ onDone }) {
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								onClick: () => setMode("scale"),
-								className: cn("rounded-md border px-2.5 py-2 text-left text-[11px] transition-colors", mode === "scale" ? "border-primary bg-primary/10" : "text-muted-foreground hover:border-primary/50"),
+								className: require_notify.cn("rounded-md border px-2.5 py-2 text-left text-[11px] transition-colors", mode === "scale" ? "border-primary bg-primary/10" : "text-muted-foreground hover:border-primary/50"),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "block font-medium text-foreground",
 									children: "随画布缩放"
@@ -6106,7 +6199,7 @@ function CanvasSettingsBody({ onDone }) {
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								onClick: () => setMode("keep"),
-								className: cn("rounded-md border px-2.5 py-2 text-left text-[11px] transition-colors", mode === "keep" ? "border-primary bg-primary/10" : "text-muted-foreground hover:border-primary/50"),
+								className: require_notify.cn("rounded-md border px-2.5 py-2 text-left text-[11px] transition-colors", mode === "keep" ? "border-primary bg-primary/10" : "text-muted-foreground hover:border-primary/50"),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "block font-medium text-foreground",
 									children: "保持原位置"
@@ -6168,16 +6261,23 @@ function useAddToTimeline() {
 	const assets = (0, _cut_workbench_react.useEditor)((s) => s.assets);
 	const playheadUs = (0, _cut_workbench_react.useEditor)((s) => s.playheadUs);
 	const addClip = (0, _cut_workbench_react.useEditor)((s) => s.addClip);
+	const { bridge } = require_notify.useWorkbench();
 	return (0, react.useCallback)((assetId) => {
 		const asset = assets.find((a) => a.id === assetId);
 		if (!asset) {
-			sonner.toast.error("素材不存在，可能已被删除");
+			require_notify.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) {
-			sonner.toast.error("没有可用轨道");
+			require_notify.notify(bridge, {
+				level: "error",
+				title: "没有可用轨道"
+			});
 			return;
 		}
 		const trackEnd = (0, _cut_workbench_core.getTrackEnd)(project, track.id);
@@ -6210,6 +6310,7 @@ function useAddToTimeline() {
 	}, [
 		addClip,
 		assets,
+		bridge,
 		playheadUs,
 		project
 	]);
@@ -6246,1340 +6347,173 @@ 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 = (0, _cut_workbench_react.useCutEditor)();
-	const uiApi = useUiStoreApi();
-	const handler = (0, react.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((0, _cut_workbench_core.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((0, _cut_workbench_core.clamp)(ui.pxPerSecond * 1.25, 10, 500));
-				break;
-			}
-			case "-":
-			case "_": {
-				event.preventDefault();
-				const ui = uiApi.getState();
-				ui.setPxPerSecond((0, _cut_workbench_core.clamp)(ui.pxPerSecond / 1.25, 10, 500));
-				break;
-			}
-			case "Escape": editor.store.getState().selectClips([]);
-		}
-	}, []);
-	(0, react.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] = (0, react.useState)({
-		report: cached,
-		loading: cached == null,
-		error: null
-	});
-	(0, react.useEffect)(() => {
-		if (cached != null) return;
-		let cancelled = false;
-		(0, _cut_workbench_core_engine.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: (0, _cut_workbench_core_engine.summarizeCapabilities)(report)
-	};
-}
-// src/features/lab/components/LabCard.tsx
-/** Lab 卡片外壳：标题 + 用到的 API + （不可用时的原因） */
-function LabCard({ title, description, apis, children, unavailable, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
-		className: cn("flex flex-col", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardHeader, {
-			className: "gap-1",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "flex size-6 items-center justify-center rounded bg-primary/10 text-primary",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FlaskConical, { className: "size-3.5" })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
-						className: "text-sm",
-						children: title
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardDescription, {
-					className: "text-xs",
-					children: description
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex flex-wrap gap-1 pt-1",
-					children: apis.map((api) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
-						variant: "outline",
-						className: "font-mono text-[10px] font-normal text-muted-foreground",
-						children: api
-					}, api))
-				})
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContent, {
-			className: "flex flex-1 flex-col gap-2.5",
-			children: unavailable != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "rounded-md border border-dashed border-warning/40 bg-warning/5 p-3 text-xs text-warning",
-				children: unavailable
-			}) : children
-		})]
-	});
-}
-// src/features/lab/hooks/use-lab-action.ts
-/** 生成可下载链接（Lab 通用） */
-function useDownload() {
-	const urlsRef = (0, react.useRef)([]);
-	return (0, react.useCallback)((blob, filename) => {
-		const url = URL.createObjectURL(blob);
-		urlsRef.current.push(url);
-		const link = document.createElement("a");
-		link.href = url;
-		link.download = filename;
-		document.body.appendChild(link);
-		link.click();
-		link.remove();
-		window.setTimeout(() => URL.revokeObjectURL(url), 15e3);
-	}, []);
-}
-/** 带 busy 状态的异步执行器：统一错误 toast，禁止静默吞异常 */
-function useLabAction() {
-	const [busy, setBusy] = (0, react.useState)(null);
-	return {
-		busy,
-		run: (0, react.useCallback)(async (label, task) => {
-			setBusy(label);
-			try {
-				return await task();
-			} catch (err) {
-				const message = err instanceof Error ? err.message : String(err);
-				console.error(err);
-				sonner.toast.error("操作失败", { description: message });
-				return null;
-			} finally {
-				setBusy(null);
-			}
-		}, [])
-	};
-}
-// src/features/lab/components/shared.tsx
-/**
-* Lab 共享的可视组件。
-*
-* 只导出组件（React Fast Refresh 要求单文件只导出组件）；
-* 工具函数与 hook 放在 `../hooks/use-lab-action`。
-*/
-/** 文件选择按钮 */
-function FilePickButton({ label, accept, multiple, onFiles, disabled }) {
-	const inputRef = (0, react.useRef)(null);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-		ref: inputRef,
-		type: "file",
-		accept,
-		multiple,
-		className: "hidden",
-		onChange: (e) => {
-			const files = Array.from(e.target.files ?? []);
-			if (files.length > 0) onFiles(files);
-			e.target.value = "";
-		}
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		disabled,
-		onClick: () => inputRef.current?.click(),
-		className: "flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-3 py-3.5 text-xs text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "max-w-full truncate",
-			children: label
-		})
-	})] });
-}
-/** 结果预览：视频 + 下载 */
-function ResultPreview({ blob, filename }) {
-	const download = useDownload();
-	const [url] = (0, react.useState)(() => URL.createObjectURL(blob));
-	(0, react.useEffect)(() => () => URL.revokeObjectURL(url), [url]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-1.5",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-			src: url,
-			controls: true,
-			className: "w-full rounded-md border bg-stage-bg",
-			style: { maxHeight: 200 }
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground",
-				children: [(blob.size / 1024 / 1024).toFixed(2), " MB"]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				onClick: () => download(blob, filename),
-				className: "rounded-md bg-primary px-2 py-1 text-[11px] text-primary-foreground hover:bg-primary/90",
-				children: "下载"
-			})]
-		})]
-	});
-}
-/** 忙碌提示 */
-function Busy({ label }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-3 animate-spin" }), label]
-	});
-}
-/** 简易滑杆 */
-function SliderRow({ label, value, min, max, step, format, onChange }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex justify-between text-[10px] text-muted-foreground",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-mono tabular-nums",
-				children: format ? format(value) : value.toFixed(2)
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			type: "range",
-			min,
-			max,
-			step,
-			value,
-			onChange: (e) => onChange(Number(e.target.value)),
-			className: "h-1 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
-		})]
-	});
-}
-// src/features/lab/components/ConcatenateLab.tsx
-/**
-* Lab 1：无损拼接。
-*
-* 用 `fastConcatMP4` 直接拼接多个 MP4 的样本，不重编码。
-* 前提是编码 / 分辨率 / 采样率完全一致；不一致时本 Lab 会先预检并给出具体差异。
-*/
-function ConcatenateLab() {
-	const [files, setFiles] = (0, react.useState)([]);
-	const [infos, setInfos] = (0, react.useState)([]);
-	const [result, setResult] = (0, react.useState)(null);
-	const { busy, run } = useLabAction();
-	const handleFiles = async (picked) => {
-		setFiles(picked);
-		setResult(null);
-		setInfos([]);
-		const detected = await run("正在读取文件信息…", async () => {
-			const list = [];
-			for (const file of picked) list.push(await (0, _cut_workbench_core_lab.readMp4Info)(file));
-			return list;
-		});
-		if (detected != null) setInfos(detected);
-	};
-	const handleConcat = async () => {
-		const output = await run("正在无损拼接…", () => (0, _cut_workbench_core_lab.concatMp4)(files));
-		if (output != null) {
-			setResult(output.blob);
-			setInfos(output.infos);
-		}
-	};
-	const first = infos[0];
-	const mismatch = first != null && infos.some((info) => info.width !== first.width || info.height !== first.height || info.codec !== first.codec || info.audioSampleRate !== first.audioSampleRate);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "无损拼接",
-		description: "直接把多个 MP4 的样本拼在一起，不重编码，速度极快。要求规格完全一致。",
-		apis: ["fastConcatMP4", "MP4Clip.getFileHeaderBinData"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: files.length > 0 ? `已选 ${files.length} 个文件（重新选择）` : "选择 2 个以上 MP4",
-				accept: "video/mp4",
-				multiple: true,
-				onFiles: (picked) => void handleFiles(picked),
-				disabled: busy != null
-			}),
-			files.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				className: "space-y-1 text-[10px] text-muted-foreground",
-				children: files.map((file, index) => {
-					const info = infos[index];
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-						className: "flex justify-between gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "truncate",
-							children: file.name
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "shrink-0 font-mono",
-							children: info != null ? `${formatResolution(info.width, info.height)} · ${(0, _cut_workbench_core.formatDuration)(info.durationUs)} · ${info.codec}` : "检测中…"
-						})]
-					}, `${file.name}-${index}`);
-				})
-			}),
-			mismatch && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-start gap-1.5 rounded-md bg-warning/10 p-2 text-[10px] text-warning",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), "检测到规格不一致，拼接会失败并给出具体原因（fastConcatMP4 的硬性要求）。"]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				disabled: files.length < 2 || busy != null,
-				onClick: () => void handleConcat(),
-				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: "开始拼接"
-			}),
-			busy != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "concat.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/RemuxLab.tsx
-/**
-* Lab 2：配音。
-*
-* `mixinMP4AndAudio` 只重编码音频轨，视频轨原样复制 —— 因此速度快、画质无损。
-*/
-function RemuxLab() {
-	const [video, setVideo] = (0, react.useState)(null);
-	const [audio, setAudio] = (0, react.useState)(null);
-	const [volume, setVolume] = (0, react.useState)(1);
-	const [loop, setLoop] = (0, react.useState)(true);
-	const [result, setResult] = (0, react.useState)(null);
-	const { busy, run } = useLabAction();
-	const handleMix = async () => {
-		if (video == null || audio == null) return;
-		const output = await run("正在混合音频…", () => (0, _cut_workbench_core_lab.mixAudioIntoMp4)(video, audio, volume, loop));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "视频配音",
-		description: "把音轨混入 MP4：只重编码音频，视频轨不动，画质零损失。",
-		apis: ["mixinMP4AndAudio"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: video == null ? "选择视频（MP4）" : video.name,
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setVideo(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: audio == null ? "选择音频（MP3/WAV/M4A）" : audio.name,
-				accept: "audio/*",
-				onFiles: (files) => {
-					setAudio(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "音量",
-				value: volume,
-				min: 0,
-				max: 2,
-				step: .05,
-				format: (v) => `${Math.round(v * 100)}%`,
-				onChange: setVolume
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "flex items-center gap-2 text-[11px] text-muted-foreground",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "checkbox",
-					checked: loop,
-					onChange: (e) => setLoop(e.target.checked),
-					className: "accent-primary"
-				}), "音频短于视频时循环填充"]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				disabled: video == null || audio == null || busy != null,
-				onClick: () => void handleMix(),
-				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: "开始混合"
-			}),
-			busy != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "mixin.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/ChromakeyLab.tsx
-/**
-* Lab 3：绿幕抠像。
-*
-* `createChromakey` 返回一个函数，把 VideoFrame 转成去背后的 ImageBitmap。
-* 配合 `MP4Clip.tickInterceptor` 即可对整段视频生效（导出时同样有效）。
-*
-* ⚠️ 依赖 WebGL2；不支持时本卡片隐藏操作、仅显示原因。
-*/
-/**
-* 抠像结果的兜底底色：读取主题令牌，而不是写死 `#101018`。
-*
-* 抠像后的 VideoFrame 带透明通道，需要一层底色才能看清；用 `--cw-stage-bg`
-* 让 Lab 预览区与工作台舞台保持一致，宿主换主题时一起变。
-* 取不到时退回深色（纯逻辑环境 / 未包 `.cw-root`）。
-*/
-function readStageBackground() {
-	if (typeof document === "undefined") return "#101018";
-	const root = document.querySelector(".cw-root");
-	if (root == null) return "#101018";
-	const value = getComputedStyle(root).getPropertyValue("--cw-stage-bg").trim();
-	return value.length > 0 ? value : "#101018";
-}
-function ChromakeyLab() {
-	const [webgl2] = (0, react.useState)(_cut_workbench_core_lab.isWebGL2Available);
-	const [file, setFile] = (0, react.useState)(null);
-	const [similarity, setSimilarity] = (0, react.useState)(.4);
-	const [smoothness, setSmoothness] = (0, react.useState)(.1);
-	const [spill, setSpill] = (0, react.useState)(.1);
-	const [timeUs, setTimeUs] = (0, react.useState)(0);
-	const [durationUs, setDurationUs] = (0, react.useState)(0);
-	const canvasRef = (0, react.useRef)(null);
-	const clipRef = (0, react.useRef)(null);
-	const { busy, run } = useLabAction();
-	(0, react.useEffect)(() => {
-		return () => {
-			clipRef.current?.destroy();
-			clipRef.current = null;
-		};
-	}, []);
-	const render = (0, react.useCallback)(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await (0, _cut_workbench_core_lab.renderChromakeyFrame)(clip, timeUs, {
-			similarity,
-			smoothness,
-			spill,
-			keyColor: [
-				0,
-				255,
-				0
-			]
-		}, canvas, readStageBackground());
-	}, [
-		similarity,
-		smoothness,
-		spill,
-		timeUs
-	]);
-	const handleFile = async (files) => {
-		const picked = files[0];
-		if (picked == null) return;
-		const result = await run("正在解析视频…", async () => {
-			clipRef.current?.destroy();
-			return await (0, _cut_workbench_core_lab.createMp4Clip)(picked);
-		});
-		if (result == null) return;
-		clipRef.current = result.clip;
-		setFile(picked);
-		setDurationUs(result.meta.duration);
-		setTimeUs(Math.min(result.meta.duration / 2, 1e6));
-		sonner.toast.success("已载入视频，拖动参数查看抠像效果");
-	};
-	(0, react.useEffect)(() => {
-		if (clipRef.current == null || busy != null) return;
-		render();
-	}, [busy, render]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "绿幕抠像",
-		description: "用 WebGL2 实时扣除背景色，通过 tickInterceptor 作用到整段视频。",
-		apis: ["createChromakey", "MP4Clip.tickInterceptor"],
-		unavailable: webgl2 ? null : "当前设备不支持 WebGL2，createChromakey 无法运行。",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: file?.name ?? "选择绿幕视频（MP4）",
-				accept: "video/mp4",
-				onFiles: (files) => void handleFile(files),
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative overflow-hidden rounded-md border bg-stage-bg",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
-					ref: canvasRef,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				}), file == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "pointer-events-none absolute inset-0 flex h-24 items-center justify-center text-[10px] text-muted-foreground",
-					children: "选择视频后显示抠像结果"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "相似度 similarity",
-				value: similarity,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSimilarity
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "平滑度 smoothness",
-				value: smoothness,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSmoothness
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "饱和度 spill",
-				value: spill,
-				min: 0,
-				max: 1,
-				step: .01,
-				format: (v) => v.toFixed(2),
-				onChange: setSpill
-			}),
-			durationUs > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "取帧时间",
-				value: timeUs,
-				min: 0,
-				max: Math.max(1, durationUs - 1),
-				step: 1e5,
-				format: (v) => `${(v / 1e6).toFixed(2)}s`,
-				onChange: setTimeUs
-			}),
-			busy != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-[10px] leading-relaxed text-muted-foreground",
-				children: "keyColor 固定为纯绿 (0,255,0)。实际项目中可读取首帧像素自动取色。"
-			})
-		]
-	});
-}
-// src/features/lab/components/SubtitleLab.tsx
-var SAMPLE_SRT = `1
-00:00:00,000 --> 00:00:02,000
-这是第一句字幕
-
-2
-00:00:02,000 --> 00:00:04,000
-第二句会带描边
-
-3
-00:00:04,000 --> 00:00:06,000
-EmbedSubtitlesClip 烧录进画面
-`;
-/**
-* Lab 4：字幕烧录。
-*
-* `EmbedSubtitlesClip` 本身就是一个 IClip：tick 返回带字幕的 VideoFrame。
-* 因此既能放进 Combinator 导出，也能直接逐帧预览。
-*/
-function SubtitleLab() {
-	const [srt, setSrt] = (0, react.useState)(SAMPLE_SRT);
-	const [timeUs, setTimeUs] = (0, react.useState)(0);
-	const [playing, setPlaying] = (0, react.useState)(false);
-	const [result, setResult] = (0, react.useState)(null);
-	const { busy, run } = useLabAction();
-	const canvasRef = (0, react.useRef)(null);
-	const clipRef = (0, react.useRef)(null);
-	const rafRef = (0, react.useRef)(null);
-	const cues = (0, _cut_workbench_core.parseSrt)(srt);
-	const durationUs = cues.length > 0 ? cues[cues.length - 1].endMs * 1e3 : 0;
-	(0, react.useEffect)(() => {
-		clipRef.current?.destroy();
-		if (cues.length === 0) {
-			clipRef.current = null;
-			return;
-		}
-		try {
-			clipRef.current = (0, _cut_workbench_core_lab.createSubtitlePreviewClip)(srt, 640, 360);
-		} catch (err) {
-			console.warn("[SubtitleLab] create failed", err);
-			clipRef.current = null;
-		}
-		return () => {
-			clipRef.current?.destroy();
-			clipRef.current = null;
-		};
-	}, [cues.length, srt]);
-	const draw = (0, react.useCallback)(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await (0, _cut_workbench_core_lab.renderSubtitleFrame)(clip, timeUs, canvas);
-	}, [timeUs]);
-	(0, react.useEffect)(() => {
-		draw();
-	}, [draw]);
-	(0, react.useEffect)(() => {
-		if (!playing) return;
-		let last = performance.now();
-		let current = timeUs;
-		const tick = () => {
-			const now = performance.now();
-			current += (now - last) * 1e3;
-			last = now;
-			if (durationUs > 0 && current >= durationUs) {
-				setTimeUs(durationUs);
-				setPlaying(false);
-				return;
-			}
-			setTimeUs(current);
-			rafRef.current = requestAnimationFrame(tick);
-		};
-		rafRef.current = requestAnimationFrame(tick);
-		return () => {
-			if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
-		};
-	}, [playing, durationUs]);
-	const handleBurn = async () => {
-		const width = 1280;
-		const height = 720;
-		const output = await run("正在烧录字幕…", () => (0, _cut_workbench_core_lab.burnSubtitles)(srt, width, height, durationUs));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "字幕烧录",
-		description: "SRT 解析后逐帧绘制到画面，最终编码进视频流（硬字幕）。",
-		apis: ["EmbedSubtitlesClip", "Combinator"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-				value: srt,
-				onChange: (e) => setSrt(e.target.value),
-				rows: 5,
-				className: "w-full rounded-md border bg-transparent p-2 font-mono text-[10px] outline-none focus-visible:border-ring",
-				placeholder: "粘贴 SRT 内容"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
-					ref: canvasRef,
-					width: 640,
-					height: 360,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: () => setPlaying((p) => !p),
-					disabled: cues.length === 0,
-					className: "flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-[11px] disabled:opacity-50",
-					children: [playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "size-3" }), playing ? "停止" : "预览"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "text-[10px] text-muted-foreground",
-					children: [
-						cues.length,
-						" 条 · ",
-						(timeUs / 1e6).toFixed(2),
-						"s / ",
-						(durationUs / 1e6).toFixed(2),
-						"s"
-					]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "时间",
-				value: timeUs,
-				min: 0,
-				max: Math.max(1, durationUs),
-				step: 1e4,
-				format: (v) => `${(v / 1e6).toFixed(2)}s`,
-				onChange: (v) => {
-					setPlaying(false);
-					setTimeUs(v);
-				}
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				disabled: cues.length === 0 || busy != null,
-				onClick: () => void handleBurn(),
-				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: "烧录并导出 MP4"
-			}),
-			busy != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "subtitles.mp4"
-			})
-		]
-	});
-}
-// src/features/lab/components/TrackSplitLab.tsx
-/**
-* Lab 5：轨道拆分。
-*
-* `splitTrack()` 从一个 MP4Clip 派生出「纯视频」与「纯音频」两个 clip，
-* 它们与源共享样本表，因此内存开销很小。
-*/
-function TrackSplitLab() {
-	const [file, setFile] = (0, react.useState)(null);
-	const [result, setResult] = (0, react.useState)(null);
-	const { busy, run } = useLabAction();
-	const cleanupRef = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		return () => cleanupRef.current?.();
-	}, []);
-	const handleSplit = async () => {
-		if (file == null) return;
-		cleanupRef.current?.();
-		const output = await run("正在拆分轨道…", () => (0, _cut_workbench_core_lab.splitMp4Tracks)(file));
-		setResult(output);
-		cleanupRef.current = () => {
-			output?.videoClip?.destroy();
-			output?.audioClip?.destroy();
-		};
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "轨道拆分",
-		description: "把一个 MP4 拆成纯视频轨与纯音频轨两个独立 IClip，用于分别编辑。",
-		apis: ["MP4Clip.splitTrack"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: file?.name ?? "选择 MP4",
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setFile(files[0] ?? null);
-					setResult(null);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				type: "button",
-				disabled: file == null || busy != null,
-				onClick: () => void handleSplit(),
-				className: "flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Split, { className: "size-3" }), "拆分轨道"]
-			}),
-			busy != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "grid gap-1.5 text-[10px]",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrackResult, {
-						label: "视频轨",
-						present: result.videoMeta != null,
-						detail: result.videoMeta != null ? `${result.videoMeta.width}×${result.videoMeta.height} · ${(0, _cut_workbench_core.formatDuration)(result.videoMeta.duration)}` : "源文件无视频轨"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrackResult, {
-						label: "音频轨",
-						present: result.audioMeta != null,
-						detail: result.audioMeta != null ? `48kHz 双声道 · ${(0, _cut_workbench_core.formatDuration)(result.audioMeta.duration)}` : "源文件无音频轨"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "pt-1 leading-relaxed text-muted-foreground",
-						children: "拆分出的 clip 与源共享样本表，可分别创建 Sprite 放到不同轨道；两者在时间轴上对齐即等于原片。"
-					})
-				]
-			})
-		]
-	});
-}
-function TrackResult({ label, present, detail }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center justify-between gap-2 rounded-md border px-2 py-1.5",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: present ? "text-foreground" : "text-muted-foreground",
-			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: present ? "font-mono text-success" : "text-muted-foreground",
-			children: present ? detail : detail
-		})]
-	});
-}
-// src/features/lab/components/ThumbnailLab.tsx
-/**
-* Lab 6：缩略图抽帧。
-*
-* `MP4Clip.thumbnails()` 默认每个关键帧生成一张；也可以传 step 按固定间隔取。
-* 这里展示全部关键帧与时间戳。
-*/
-function ThumbnailLab() {
-	const [file, setFile] = (0, react.useState)(null);
-	const [frames, setFrames] = (0, react.useState)([]);
-	const [width, setWidth] = (0, react.useState)(120);
-	const { busy, run } = useLabAction();
-	(0, react.useEffect)(() => {
-		return () => {
-			for (const frame of frames) URL.revokeObjectURL(frame.url);
-		};
-	}, [frames]);
-	const handleExtract = async () => {
-		if (file == null) return;
-		const output = await run("正在抽取关键帧…", () => (0, _cut_workbench_core_lab.extractKeyframes)(file, width));
-		if (output != null) setFrames(output);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "缩略图抽帧",
-		description: "按关键帧抽取缩略图，可用于时间轴缩略图带或场景切分预览。",
-		apis: ["MP4Clip.thumbnails"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickButton, {
-				label: file?.name ?? "选择 MP4",
-				accept: "video/mp4",
-				onFiles: (files) => {
-					setFile(files[0] ?? null);
-					setFrames([]);
-				},
-				disabled: busy != null
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-						className: "text-[10px] text-muted-foreground",
-						children: "宽度"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						type: "number",
-						min: 40,
-						max: 480,
-						step: 20,
-						value: width,
-						onChange: (e) => setWidth(Number(e.target.value)),
-						className: "h-6 w-16 rounded border bg-transparent px-1.5 text-[11px]"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						disabled: file == null || busy != null,
-						onClick: () => void handleExtract(),
-						className: "ml-auto rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-						children: "抽取"
-					})
-				]
-			}),
-			busy != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			frames.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "text-[10px] text-muted-foreground",
-				children: [
-					"共 ",
-					frames.length,
-					" 张关键帧"
-				]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "thin-scrollbar grid max-h-52 grid-cols-3 gap-1.5 overflow-auto",
-				children: frames.map((frame, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
-					className: "space-y-0.5",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-						src: frame.url,
-						alt: "",
-						className: "w-full rounded border object-cover",
-						loading: "lazy"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
-						className: "font-mono text-[9px] text-muted-foreground tabular-nums",
-						children: (0, _cut_workbench_core.formatTimecode)(frame.ts)
-					})]
-				}, `${frame.ts}-${index}`))
-			})] })
-		]
-	});
-}
-// src/features/lab/components/RecorderLab.tsx
-/**
-* Lab 7：屏幕 / 画布录制。
+* |---|---|
+* | 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] = (0, react.useState)("demo");
-	const [recording, setRecording] = (0, react.useState)(false);
-	const [paused, setPaused] = (0, react.useState)(false);
-	const [bytes, setBytes] = (0, react.useState)(0);
-	const [state, setState] = (0, react.useState)("inactive");
-	const [result, setResult] = (0, react.useState)(null);
-	const [previewStream, setPreviewStream] = (0, react.useState)(null);
-	const videoRef = (0, react.useRef)(null);
-	const recorderRef = (0, react.useRef)(null);
-	const demoRef = (0, react.useRef)(null);
-	const cameraRef = (0, react.useRef)(null);
-	const { run } = useLabAction();
-	(0, react.useEffect)(() => {
-		const video = videoRef.current;
-		if (video == null) return;
-		video.srcObject = previewStream;
-		if (previewStream != null) video.play().catch(() => void 0);
-		return () => {
-			if (video.srcObject === previewStream) video.srcObject = null;
-		};
-	}, [previewStream]);
-	const cleanup = (0, react.useCallback)(() => {
-		demoRef.current?.stop();
-		demoRef.current = null;
-		cameraRef.current?.getTracks().forEach((t) => t.stop());
-		cameraRef.current = null;
-		recorderRef.current?.dispose();
-		recorderRef.current = null;
-		setPreviewStream(null);
-	}, []);
-	(0, react.useEffect)(() => cleanup, [cleanup]);
-	const acquireStream = async () => {
-		cleanup();
-		if (mode === "demo") {
-			const demo = (0, _cut_workbench_core_lab.createDemoCanvasStream)(1280, 720);
-			demoRef.current = demo;
-			setPreviewStream(demo.stream);
-			return demo.stream;
+function useKeyboardShortcuts() {
+	const editor = (0, _cut_workbench_react.useCutEditor)();
+	const uiApi = require_notify.useUiStoreApi();
+	const handler = (0, react.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);
-			sonner.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 (0, _cut_workbench_core_lab.fixRecordedDuration)(raw);
-		});
-		setRecording(false);
-		setPaused(false);
-		setState(recorder.state());
-		recorderRef.current = null;
-		if (output != null) {
-			setResult(output);
-			sonner.toast.success(`录制完成 · ${(output.size / 1024 / 1024).toFixed(2)} MB`);
+		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((0, _cut_workbench_core.clamp)(ui.pxPerSecond * factor, 10, 500));
+			return;
 		}
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "屏幕 / 画布录制",
-		description: "用 AVRecorder 把 MediaStream 实时编码为 MP4。可录制程序化画布或摄像头。",
-		apis: ["AVCanvas.captureStream", "AVRecorder.start/pause/resume/stop"],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex gap-1.5",
-				children: ["demo", "camera"].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					disabled: recording,
-					onClick: () => setMode(item),
-					className: `flex-1 rounded-md border px-2 py-1 text-[11px] disabled:opacity-50 ${mode === item ? "border-primary bg-primary/10 text-primary" : "text-muted-foreground"}`,
-					children: item === "demo" ? "动态画布" : "摄像头"
-				}, item))
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-					ref: videoRef,
-					muted: true,
-					playsInline: true,
-					className: "block w-full",
-					style: { maxHeight: 170 }
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center gap-1.5",
-				children: [!recording ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: () => void handleStart(),
-					className: "flex items-center gap-1 rounded-md bg-destructive px-2.5 py-1 text-[11px] text-destructive-foreground",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Circle, { className: "size-3 fill-current" }), "开始录制"]
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: handlePauseToggle,
-					className: "flex items-center gap-1 rounded-md bg-secondary px-2.5 py-1 text-[11px]",
-					children: [paused ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pause, { className: "size-3" }), paused ? "继续" : "暂停"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: () => void handleStop(),
-					className: "flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-[11px] text-primary-foreground",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "size-3" }), "停止"]
-				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "ml-auto font-mono text-[10px] text-muted-foreground tabular-nums",
-					children: [
-						(bytes / 1024 / 1024).toFixed(2),
-						" MB · ",
-						(0, _cut_workbench_core_lab.formatRecorderState)(state)
-					]
-				})]
-			}),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "recording.mp4"
-			})
-		]
-	});
-}
-/** 适配 RecorderHandle（隔离 AVRecorder 细节） */
-function createRecorderAdapter(stream, onChunk) {
-	const recorder = new _cut_workbench_core_lab.AVRecorder(stream, { expectFPS: 30 });
-	const chunks = [];
-	let total = 0;
-	return {
-		start: () => {
-			const readable = recorder.start(300);
-			(async () => {
-				const reader = readable.getReader();
-				for (;;) try {
-					const { done, value } = await reader.read();
-					if (done) break;
-					if (value != null) {
-						chunks.push(new Uint8Array(value));
-						total += value.byteLength;
-						onChunk(total);
-					}
-				} catch {
-					break;
-				}
-			})();
-		},
-		pause: () => recorder.pause(),
-		resume: () => recorder.resume(),
-		stop: async () => {
-			await recorder.stop();
-			return new Blob(chunks, { type: "video/mp4" });
-		},
-		state: () => recorder.state,
-		dispose: () => {
-			stream.getTracks().forEach((t) => t.stop());
+		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((0, _cut_workbench_core.clamp)(ui.pxPerSecond * 1.25, 10, 500));
+				break;
+			}
+			case "-":
+			case "_": {
+				event.preventDefault();
+				const ui = uiApi.getState();
+				ui.setPxPerSecond((0, _cut_workbench_core.clamp)(ui.pxPerSecond / 1.25, 10, 500));
+				break;
+			}
+			case "Escape": editor.store.getState().selectClips([]);
 		}
-	};
+	}, []);
+	(0, react.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] = (0, react.useState)(5);
-	const [timeUs, setTimeUs] = (0, react.useState)(0);
-	const [playing, setPlaying] = (0, react.useState)(false);
-	const [result, setResult] = (0, react.useState)(null);
-	const canvasRef = (0, react.useRef)(null);
-	const clipRef = (0, react.useRef)(null);
-	const rafRef = (0, react.useRef)(null);
-	const { busy, run } = useLabAction();
-	const durationUs = Math.round(durationSec * 1e6);
-	(0, react.useEffect)(() => {
-		clipRef.current?.destroy();
-		try {
-			clipRef.current = new _cut_workbench_core_lab.FrameCounterClip(640, 360, durationUs, 30);
-		} catch (err) {
-			console.warn("[CustomClipLab] create failed", err);
-			clipRef.current = null;
-		}
-		return () => {
-			clipRef.current?.destroy();
-			clipRef.current = null;
-		};
-	}, [durationUs]);
-	const draw = (0, react.useCallback)(async () => {
-		const clip = clipRef.current;
-		const canvas = canvasRef.current;
-		if (clip == null || canvas == null) return;
-		await (0, _cut_workbench_core_lab.renderClipFrameToCanvas)(clip, timeUs, canvas);
-	}, [timeUs]);
-	(0, react.useEffect)(() => {
-		draw();
-	}, [draw]);
+function useCapability() {
+	const [state, setState] = (0, react.useState)({
+		report: cached,
+		loading: cached == null,
+		error: null
+	});
 	(0, react.useEffect)(() => {
-		if (!playing) return;
-		let last = performance.now();
-		let current = timeUs;
-		const tick = () => {
-			const now = performance.now();
-			current += (now - last) * 1e3;
-			last = now;
-			if (current >= durationUs) {
-				setTimeUs(durationUs - 1);
-				setPlaying(false);
-				return;
-			}
-			setTimeUs(current);
-			rafRef.current = requestAnimationFrame(tick);
-		};
-		rafRef.current = requestAnimationFrame(tick);
+		if (cached != null) return;
+		let cancelled = false;
+		(0, _cut_workbench_core_engine.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…", () => (0, _cut_workbench_core_lab.exportCustomClip)(clip, durationUs));
-		if (output != null) setResult(output);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabCard, {
-		title: "自定义 IClip",
-		description: "纯程序化渲染的 Clip（帧计数器），不依赖任何媒体文件，证明接口可扩展。",
-		apis: [
-			"IClip.tick",
-			"IClip.clone",
-			"IClip.split",
-			"Combinator"
-		],
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "overflow-hidden rounded-md border bg-stage-bg",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
-					ref: canvasRef,
-					width: 640,
-					height: 360,
-					className: "block w-full",
-					style: { maxHeight: 180 }
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: () => {
-						if (!playing && timeUs >= durationUs - 1) setTimeUs(0);
-						setPlaying((p) => !p);
-					},
-					className: "flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-[11px]",
-					children: [playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "size-3" }), playing ? "停止" : "预览"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "font-mono text-[10px] text-muted-foreground tabular-nums",
-					children: [
-						(0, _cut_workbench_core.formatTimecode)(timeUs),
-						" / ",
-						(0, _cut_workbench_core.formatTimecode)(durationUs)
-					]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "时间",
-				value: timeUs,
-				min: 0,
-				max: Math.max(1, durationUs - 1),
-				step: 1e4,
-				format: (v) => `${(v / 1e6).toFixed(2)}s`,
-				onChange: (v) => {
-					setPlaying(false);
-					setTimeUs(v);
-				}
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRow, {
-				label: "时长",
-				value: durationSec,
-				min: 1,
-				max: 20,
-				step: .5,
-				format: (v) => `${v.toFixed(1)}s`,
-				onChange: (v) => {
-					setPlaying(false);
-					setDurationSec(v);
-					setTimeUs(0);
-				}
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				disabled: busy != null,
-				onClick: () => void handleExport(),
-				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
-				children: "编码为 MP4"
-			}),
-			busy != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Busy, { label: busy }),
-			result != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultPreview, {
-				blob: result,
-				filename: "custom-clip.mp4"
-			})
-		]
-	});
+	}, []);
+	return state;
 }
-// src/features/lab/components/LabPage.tsx
-/**
-* 能力实验室：每个 WebAV 高级 API 一个可独立运行的卡片。
-*
-* 与主编辑器共享同一套能力探测结果，因此这里不再重复检测。
-*/
-function LabPage() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "mx-auto max-w-7xl space-y-4 p-4",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-				className: "space-y-1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FlaskConical, { className: "size-4 text-primary" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-						className: "text-sm font-semibold",
-						children: "能力实验室"
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-xs text-muted-foreground",
-					children: "覆盖 av-cliper / av-canvas / av-recorder 的进阶 API。每个卡片可独立运行，失败时给出可读原因。"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConcatenateLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RemuxLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChromakeyLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubtitleLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrackSplitLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThumbnailLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecorderLab, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomClipLab, {})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-				className: "border-t pt-3 text-[10px] leading-relaxed text-muted-foreground",
-				children: "说明：所有输出均为 MP4（H.264 + AAC 48kHz 双声道）。WebAV 生成的是 fMP4 分片， 部分播放器需「修复时长」；浏览器本地处理，文件不会上传。"
-			})
-		]
-	});
+// src/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: (0, _cut_workbench_core_engine.summarizeCapabilities)(report)
+	};
 }
 // src/CutWorkbench.tsx
 /**
@@ -7592,24 +6526,35 @@ function LabPage() {
 * - 不强制能力阻断页（宿主可自行决定）。
 */
 /**
+* Lab 的懒加载器。
+*
+* ⚠️ 用**字面量**模块说明符做动态 import，而不是先从 `./features/lab` 拿组件：
+* 前者会被打包成 external（`import('@cut-workbench/workbench/lab')`），由宿主
+* 打包器解析；后者会把 lab 整棵子树（含 `@webav/av-recorder`）拉回本包的模块图。
+*
+* 解析到 lab 还是 stub，由宿主的 `resolve.alias` 决定 —— 这是移除 lab 的
+* 唯一可靠方式（运行时开关删不掉已产出的 chunk，见 src/lab.ts 顶部说明）。
+*/
+var LabPage = (0, react.lazy)(() => import("@cut-workbench/workbench/lab").then((m) => ({ default: m.LabPage })));
+/**
 * 工作台主体。
 *
 * 必须在 `<WorkbenchProvider>` + `<CutEditorProvider>` 之内使用。
 */
-function CutWorkbench({ slots, className, onSaveProject, onOpenProject, enforceCapability = true }) {
+function CutWorkbench({ slots, toolbar: toolbarOptions, className, onSaveProject, onOpenProject, enforceCapability = true }) {
 	const editor = (0, _cut_workbench_react.useCutEditor)();
 	const capability = useCapabilityInfo();
-	const leftWidth = useUi((s) => s.leftWidth);
-	const rightWidth = useUi((s) => s.rightWidth);
-	const timelineHeight = useUi((s) => s.timelineHeight);
-	const setLeftWidth = useUi((s) => s.setLeftWidth);
-	const setRightWidth = useUi((s) => s.setRightWidth);
-	const setTimelineHeight = useUi((s) => s.setTimelineHeight);
-	const openDialog = useUi((s) => s.openDialog);
-	const closeDialog = useUi((s) => s.closeDialog);
-	const dialog = useUi((s) => s.dialog);
-	const { config, theme } = useWorkbench();
-	const route = useUi((s) => s.route);
+	const leftWidth = require_notify.useUi((s) => s.leftWidth);
+	const rightWidth = require_notify.useUi((s) => s.rightWidth);
+	const timelineHeight = require_notify.useUi((s) => s.timelineHeight);
+	const setLeftWidth = require_notify.useUi((s) => s.setLeftWidth);
+	const setRightWidth = require_notify.useUi((s) => s.setRightWidth);
+	const setTimelineHeight = require_notify.useUi((s) => s.setTimelineHeight);
+	const openDialog = require_notify.useUi((s) => s.openDialog);
+	const closeDialog = require_notify.useUi((s) => s.closeDialog);
+	const dialog = require_notify.useUi((s) => s.dialog);
+	const { config, theme } = require_notify.useWorkbench();
+	const route = require_notify.useUi((s) => s.route);
 	const addToTimeline = useAddToTimeline();
 	const removeAsset = (0, _cut_workbench_react.useEditor)((s) => s.removeAsset);
 	const [busy, setBusy] = (0, react.useState)(null);
@@ -7660,10 +6605,18 @@ function CutWorkbench({ slots, className, onSaveProject, onOpenProject, enforceC
 			onExport: handleExport,
 			onSaveProject: onSaveProject != null ? handleSave : void 0,
 			onOpenProject: onOpenProject != null ? handleOpen : void 0,
+			brand: toolbarOptions?.brand,
+			title: toolbarOptions?.title,
+			status: toolbarOptions?.status,
+			actions: toolbarOptions?.actions,
+			showCapabilityBadge: toolbarOptions?.showCapabilityBadge,
+			editableTitle: toolbarOptions?.editableTitle,
+			labels: toolbarOptions?.labels,
 			showLab: config.features.lab
 		});
 	}, [
 		slots?.topBar,
+		toolbarOptions,
 		capability,
 		handleExport,
 		handleSave,
@@ -7690,7 +6643,17 @@ function CutWorkbench({ slots, className, onSaveProject, onOpenProject, enforceC
 			toolbar,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "min-h-0 flex-1 overflow-auto",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabPage, {})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+					fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex h-full items-center justify-center",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingOverlay, {
+							visible: true,
+							title: "正在加载能力实验室…",
+							fullscreen: false
+						})
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabPage, {})
+				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExportDialog, {}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CanvasSettingsDialog, {
@@ -8638,11 +7601,15 @@ function CutWorkbenchProvider({ children, bridge, theme = "dark", tokens, config
 	(0, _cut_workbench_react.useCutEditor)();
 	const [ui] = (0, react.useState)(() => createUiStore());
 	const resolvedBridge = (0, react.useMemo)(() => bridge ?? createDefaultBridge(), [bridge]);
+	(0, react.useEffect)(() => {
+		require_notify.setDefaultBridge(resolvedBridge);
+		return () => require_notify.setDefaultBridge(null);
+	}, [resolvedBridge]);
 	const mergedConfig = (0, react.useMemo)(() => ({
-		...DEFAULT_CONFIG,
+		...require_notify.DEFAULT_CONFIG,
 		...config,
 		features: {
-			...DEFAULT_CONFIG.features,
+			...require_notify.DEFAULT_CONFIG.features,
 			...config?.features ?? {}
 		}
 	}), [config]);
@@ -8671,7 +7638,7 @@ function CutWorkbenchProvider({ children, bridge, theme = "dark", tokens, config
 		resolvedTheme,
 		portalContainer
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkbenchContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_notify.WorkbenchContext.Provider, {
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalContainerProvider, {
 			container: portalContainer,
@@ -8768,6 +7735,7 @@ function initCutWorkbench(container, options = {}) {
 		}, (0, react.createElement)(CutWorkbench, {
 			className: options.className ?? "h-full w-full",
 			enforceCapability: options.enforceCapability ?? true,
+			toolbar: options.toolbar,
 			onSaveProject: () => void instance.saveProject(),
 			onOpenProject: async () => {
 				const saved = await storage.load(namespace);
@@ -8923,8 +7891,8 @@ exports.ClipBlock = ClipBlock;
 exports.ClipContextMenu = ClipContextMenu;
 exports.CutWorkbench = CutWorkbench;
 exports.CutWorkbenchProvider = CutWorkbenchProvider;
-exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
-exports.DEFAULT_FEATURES = DEFAULT_FEATURES;
+exports.DEFAULT_CONFIG = require_notify.DEFAULT_CONFIG;
+exports.DEFAULT_FEATURES = require_notify.DEFAULT_FEATURES;
 exports.DropZone = DropZone;
 exports.EmptyState = EmptyState;
 exports.ExportDialog = ExportDialog;
@@ -8972,8 +7940,8 @@ exports.useExport = useExport;
 exports.useHostDarkClass = useHostDarkClass;
 exports.useMediaImport = useMediaImport;
 exports.usePortalContainer = usePortalContainer;
-exports.useUi = useUi;
-exports.useUiStoreApi = useUiStoreApi;
-exports.useWorkbench = useWorkbench;
+exports.useUi = require_notify.useUi;
+exports.useUiStoreApi = require_notify.useUiStoreApi;
+exports.useWorkbench = require_notify.useWorkbench;
 
 //# sourceMappingURL=index.cjs.map