@cut-workbench/workbench 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as formatResolution, c as CardContent, d as CardTitle, f as Badge, i as formatPercent, n as formatDuration, o as formatSeconds, p as cn, r as formatElapsed, s as Card, t as formatBytes, u as CardHeader } from "./format-CV2aoZZC.js";
+import { _ as useUi, a as formatElapsed, b as Badge, c as formatSeconds, f as CardHeader, g as WorkbenchContext, h as DEFAULT_FEATURES, i as formatDuration, l as Card, m as DEFAULT_CONFIG, n as setDefaultBridge, o as formatPercent, p as CardTitle, r as formatBytes, s as formatResolution, t as notify, u as CardContent, v as useUiStoreApi, x as cn, y as useWorkbench } from "./notify-CEwFQgjC.js";
 import { createRoot } from "react-dom/client";
 import * as React from "react";
 import { Suspense, createContext, createElement, lazy, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AlertOctagon, AlertTriangle, Camera, CheckCircle2, CheckIcon, ChevronDownIcon, ChevronUpIcon, CircleCheckIcon, Copy, Download, Eye, EyeOff, Film, FlaskConical, FlipHorizontal2, FlipVertical2, FolderOpen, Image, Info, InfoIcon, Layers, Link2, Link2Off, Loader2, Loader2Icon, Lock, LockOpen, Magnet, Maximize2, Monitor, Music, OctagonXIcon, Pause, Play, Plus, Redo2, RotateCcw, RotateCw, Save, Scissors, Settings2, SkipBack, SkipForward, StepBack, StepForward, Subtitles, Trash2, TriangleAlertIcon, Type, Undo2, Upload, Video, Volume2, VolumeX, Wrench, X, XCircle, XIcon, ZoomIn, ZoomOut } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { ContextMenu, Dialog, DropdownMenu, Label, Popover, Progress, ScrollArea, Select, Separator, Slider, Slot, Switch, Tabs, Tooltip } from "radix-ui";
-import { Toaster, toast } from "sonner";
+import { Toaster } from "sonner";
 import { useDropzone } from "react-dropzone";
 import { createStore } from "zustand/vanilla";
 // src/components/layout/AppShell.tsx
@@ -305,44 +305,6 @@ function Row$1({ label, ok, optional }) {
 		})]
 	});
 }
-// src/context.tsx
-/**
-* 工作台自身的 Context：UI 状态（面板尺寸 / 缩放 / 对话框）+ 宿主桥。
-*
-* 与 `@cut-workbench/react` 的编辑器 Context 分开：编辑器是「数据与引擎」，
-* 这里是「某一次挂载的布局与交互」。两者生命周期可以不同（例如宿主切换项目时
-* 复用同一个编辑器、只重建 UI）。
-*/
-var WorkbenchContext = createContext(null);
-function useWorkbench() {
-	const value = useContext(WorkbenchContext);
-	if (value == null) throw new Error("[cut-workbench] 缺少 <WorkbenchProvider>：组件必须挂在工作台内部");
-	return value;
-}
-/** 订阅 UI 状态（带 selector） */
-function useUi(selector) {
-	const { ui } = useWorkbench();
-	return useSyncExternalStore(ui.subscribe, () => selector(ui.getState()), () => selector(ui.getState()));
-}
-/** 取 UI store 本体（事件回调里读写用） */
-function useUiStoreApi() {
-	return useWorkbench().ui;
-}
-/** 默认功能开关 */
-var DEFAULT_FEATURES = {
-	mediaLibrary: true,
-	preview: true,
-	timeline: true,
-	inspector: true,
-	export: true,
-	canvasSettings: true,
-	lab: false
-};
-var DEFAULT_CONFIG = {
-	features: DEFAULT_FEATURES,
-	keyboard: "global",
-	resizable: true
-};
 // src/components/layout/WorkbenchToolbar.tsx
 /**
 * 内置顶栏（WorkbenchToolbar）。
@@ -1019,8 +981,164 @@ function EmptyState({ icon: Icon, title, description, action, className, compact
 		]
 	});
 }
+// 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();
+	});
+}
+/**
+* @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);
+}
+// 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;
+}
+/**
+* 批量导入素材。
+*
+* - 串行处理，避免同时开辟多个解码器把内存打爆；
+* - 单个文件失败只影响自身，最后汇总 toast；
+* - 进度写在本地 state（不放进 store，避免高频更新引起全局重渲染）；
+* - 若与「缺失源文件」的素材同名同类型，则重连而不是新增。
+*/
+function useMediaImport() {
+	const editor = useCutEditor();
+	const clips = editor.runtime.clips;
+	const store = editor.store;
+	const [progress, setProgress] = useState([]);
+	const [importing, setImporting] = useState(false);
+	const addAsset = useEditor((s) => s.addAsset);
+	const replaceAsset = useEditor((s) => s.replaceAsset);
+	const clearMissing = useEditor((s) => s.clearMissing);
+	const selectAsset = useEditor((s) => s.selectAsset);
+	const beginImport = useUi((s) => s.beginImport);
+	const endImport = useUi((s) => s.endImport);
+	const { bridge } = useWorkbench();
+	return {
+		importing,
+		progress,
+		importFiles: useCallback(async (files) => {
+			if (files.length === 0) return [];
+			setImporting(true);
+			beginImport();
+			setProgress(files.map((f) => ({
+				name: f.name,
+				progress: 0
+			})));
+			const imported = [];
+			const failures = [];
+			let reconnected = 0;
+			for (let i = 0; i < files.length; i += 1) {
+				const file = files[i];
+				if (!file) continue;
+				try {
+					const reconnectId = findReconnectableAssetId(store.getState(), file, clips);
+					const result = await importFile(clips, file, (p) => {
+						setProgress((prev) => prev.map((item, index) => index === i ? {
+							...item,
+							progress: p
+						} : item));
+					});
+					if (reconnectId != null) {
+						clips.replaceAssetSource(reconnectId, file, result.master ?? null);
+						replaceAsset(reconnectId, result.asset);
+						clearMissing(reconnectId);
+						imported.push({
+							...result.asset,
+							id: reconnectId
+						});
+						reconnected += 1;
+					} else {
+						addAsset(result.asset);
+						imported.push(result.asset);
+					}
+				} catch (err) {
+					const message = err instanceof UnsupportedFileError ? err.message : err instanceof Error ? err.message : String(err);
+					failures.push(`${file.name}：${message}`);
+					setProgress((prev) => prev.map((item, index) => index === i ? {
+						...item,
+						error: message
+					} : item));
+				}
+			}
+			setImporting(false);
+			endImport();
+			if (imported.length > 0) {
+				selectAsset(imported[0]?.id ?? null);
+				notify(bridge, {
+					level: "success",
+					title: reconnected > 0 ? `已导入 ${imported.length} 个素材（其中 ${reconnected} 个重连到已有片段）` : `已导入 ${imported.length} 个素材`
+				});
+			}
+			if (failures.length > 0) notify(bridge, {
+				level: "error",
+				title: `${failures.length} 个文件导入失败`,
+				description: failures.slice(0, 3).join("\n"),
+				duration: 8e3
+			});
+			window.setTimeout(() => setProgress([]), 3e3);
+			return imported;
+		}, [
+			addAsset,
+			beginImport,
+			bridge,
+			clearMissing,
+			endImport,
+			replaceAsset,
+			selectAsset
+		])
+	};
+}
 // src/features/media-library/components/DropZone.tsx
-var ACCEPT = {
+/** react-dropzone 用的 MIME → 扩展名映射 */
+var DROPZONE_ACCEPT = {
 	"video/mp4": [".mp4", ".m4v"],
 	"audio/*": [
 		".mp3",
@@ -1043,22 +1161,45 @@ var ACCEPT = {
 /**
 * 拖拽 / 点击导入区域。
 *
+* 两条入口：
+* - **拖拽**：走 react-dropzone（宿主无法介入，这是浏览器原生行为）；
+* - **点击**：优先走 `HostBridge.files.pickFiles` —— 宿主可能不用系统文件
+*   对话框，而是从自己的素材库 / 云端 / URL 导入。宿主返回 `null`（不接管）
+*   时才回退到内置 `<input type=file>`。
+*
 * 注意：react-dropzone 的 accept 只做初筛，真正按 MIME + 扩展名校验在
 * core/media/file-reader，从而保证「拖入 .webm 得到明确错误」而不是被静默拒绝。
 */
 function DropZone({ onFiles, disabled, className, compact }) {
-	const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+	const { bridge } = useWorkbench();
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
 		onDrop: (accepted) => {
 			if (accepted.length > 0) onFiles(accepted);
 		},
-		noClick: compact,
-		noKeyboard: compact,
+		noClick: true,
+		noKeyboard: true,
 		multiple: true,
 		disabled,
-		accept: ACCEPT
-	});
+		accept: DROPZONE_ACCEPT
+	});
+	const handleClick = useCallback(() => {
+		if (disabled) return;
+		pickMediaFiles(bridge, {
+			accept: ACCEPT,
+			multiple: true,
+			description: "选择要导入的素材"
+		}).then((files) => {
+			if (files.length > 0) onFiles(files);
+		});
+	}, [
+		bridge,
+		disabled,
+		onFiles
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		...getRootProps(),
+		onClick: handleClick,
+		"data-drop-zone": "",
 		className: cn("group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed text-center transition-colors", compact ? "px-3 py-2.5" : "px-4 py-8", isDragActive ? "border-primary bg-primary/10" : "border-border hover:border-primary/60 hover:bg-muted/40", disabled && "pointer-events-none opacity-50", className),
 		children: [
 			/* @__PURE__ */ jsx("input", { ...getInputProps() }),
@@ -1075,7 +1216,7 @@ function DropZone({ onFiles, disabled, className, compact }) {
 				className: "sr-only",
 				onClick: (e) => {
 					e.stopPropagation();
-					open();
+					handleClick();
 				},
 				children: "选择文件"
 			})
@@ -1296,107 +1437,6 @@ 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;
-}
-/**
-* 批量导入素材。
-*
-* - 串行处理，避免同时开辟多个解码器把内存打爆；
-* - 单个文件失败只影响自身，最后汇总 toast；
-* - 进度写在本地 state（不放进 store，避免高频更新引起全局重渲染）；
-* - 若与「缺失源文件」的素材同名同类型，则重连而不是新增。
-*/
-function useMediaImport() {
-	const editor = useCutEditor();
-	const clips = editor.runtime.clips;
-	const store = editor.store;
-	const [progress, setProgress] = useState([]);
-	const [importing, setImporting] = useState(false);
-	const addAsset = useEditor((s) => s.addAsset);
-	const replaceAsset = useEditor((s) => s.replaceAsset);
-	const clearMissing = useEditor((s) => s.clearMissing);
-	const selectAsset = useEditor((s) => s.selectAsset);
-	const beginImport = useUi((s) => s.beginImport);
-	const endImport = useUi((s) => s.endImport);
-	return {
-		importing,
-		progress,
-		importFiles: useCallback(async (files) => {
-			if (files.length === 0) return [];
-			setImporting(true);
-			beginImport();
-			setProgress(files.map((f) => ({
-				name: f.name,
-				progress: 0
-			})));
-			const imported = [];
-			const failures = [];
-			let reconnected = 0;
-			for (let i = 0; i < files.length; i += 1) {
-				const file = files[i];
-				if (!file) continue;
-				try {
-					const reconnectId = findReconnectableAssetId(store.getState(), file, clips);
-					const result = await importFile(clips, file, (p) => {
-						setProgress((prev) => prev.map((item, index) => index === i ? {
-							...item,
-							progress: p
-						} : item));
-					});
-					if (reconnectId != null) {
-						clips.replaceAssetSource(reconnectId, file, result.master ?? null);
-						replaceAsset(reconnectId, result.asset);
-						clearMissing(reconnectId);
-						imported.push({
-							...result.asset,
-							id: reconnectId
-						});
-						reconnected += 1;
-					} else {
-						addAsset(result.asset);
-						imported.push(result.asset);
-					}
-				} catch (err) {
-					const message = err instanceof UnsupportedFileError ? err.message : err instanceof Error ? err.message : String(err);
-					failures.push(`${file.name}：${message}`);
-					setProgress((prev) => prev.map((item, index) => index === i ? {
-						...item,
-						error: message
-					} : item));
-				}
-			}
-			setImporting(false);
-			endImport();
-			if (imported.length > 0) {
-				selectAsset(imported[0]?.id ?? null);
-				toast.success(reconnected > 0 ? `已导入 ${imported.length} 个素材（其中 ${reconnected} 个重连到已有片段）` : `已导入 ${imported.length} 个素材`);
-			}
-			if (failures.length > 0) toast.error(`${failures.length} 个文件导入失败`, {
-				description: failures.slice(0, 3).join("\n"),
-				duration: 8e3
-			});
-			window.setTimeout(() => setProgress([]), 3e3);
-			return imported;
-		}, [
-			addAsset,
-			beginImport,
-			clearMissing,
-			endImport,
-			replaceAsset,
-			selectAsset
-		])
-	};
-}
 // src/features/media-library/components/MediaLibraryPanel.tsx
 var KIND_LABEL$1 = {
 	video: "视频",
@@ -1564,6 +1604,7 @@ function CreateTextDialog({ open, onOpenChange, onCreated }) {
 	const projectWidth = useEditor((s) => s.project.width);
 	const projectHeight = useEditor((s) => s.project.height);
 	const addAsset = useEditor((s) => s.addAsset);
+	const { bridge } = useWorkbench();
 	const handleCreate = () => {
 		const { asset } = createTextAsset({
 			registry: editor.runtime.clips,
@@ -1574,7 +1615,10 @@ function CreateTextDialog({ open, onOpenChange, onCreated }) {
 		addAsset(asset);
 		onCreated(asset.id);
 		onOpenChange(false);
-		toast.success("已创建文字素材");
+		notify(bridge, {
+			level: "success",
+			title: "已创建文字素材"
+		});
 	};
 	return /* @__PURE__ */ jsx(Dialog$1, {
 		open,
@@ -1608,10 +1652,15 @@ function CreateSubtitleDialog({ open, onOpenChange, onCreated }) {
 	const projectWidth = useEditor((s) => s.project.width);
 	const projectHeight = useEditor((s) => s.project.height);
 	const addAsset = useEditor((s) => s.addAsset);
+	const { bridge } = useWorkbench();
 	const handleCreate = () => {
 		const durationUs = parseSrtDurationUs(srt);
 		if (durationUs <= 0) {
-			toast.error("SRT 解析失败", { description: "请检查时间轴格式：00:00:00,000 --> 00:00:02,000" });
+			notify(bridge, {
+				level: "error",
+				title: "SRT 解析失败",
+				description: "请检查时间轴格式：00:00:00,000 --> 00:00:02,000"
+			});
 			return;
 		}
 		const { asset } = createSubtitleAsset({
@@ -1624,7 +1673,10 @@ function CreateSubtitleDialog({ open, onOpenChange, onCreated }) {
 		addAsset(asset);
 		onCreated(asset.id);
 		onOpenChange(false);
-		toast.success("已创建字幕素材");
+		notify(bridge, {
+			level: "success",
+			title: "已创建字幕素材"
+		});
 	};
 	return /* @__PURE__ */ jsx(Dialog$1, {
 		open,
@@ -1650,11 +1702,22 @@ function CreateSubtitleDialog({ open, onOpenChange, onCreated }) {
 	});
 }
 // src/hooks/use-toast-safe.ts
-/** 统一把异常转成可见提示，禁止静默吞掉 */
+/**
+* 把异常转成可见提示，禁止静默吞掉。
+*
+* 这是**非 hook** 版本，供事件回调 / 非组件代码调用（例如 `useAvCanvas` 的
+* 初始化失败）。它拿不到 React context，因此走 `notify` 注册的默认桥：
+* `WorkbenchProvider` 挂载时会把 `bridge` 注册进来，宿主实现了 `notify`
+* 就交给宿主，否则退回库内 toast。
+*/
 function reportError(error, fallback = "操作失败") {
 	const message = error instanceof Error ? error.message : String(error);
 	console.error(error);
-	toast.error(fallback, { description: message });
+	notify(void 0, {
+		level: "error",
+		title: fallback,
+		description: message
+	});
 }
 // src/features/preview/hooks/useAvCanvas.ts
 /**
@@ -2574,6 +2637,7 @@ function PreviewPanel() {
 	const setMasterVolume = useEditor((s) => s.setMasterVolume);
 	const playheadUs = useEditor((s) => s.playheadUs);
 	const selectedClipIds = useEditor((s) => s.selectedClipIds);
+	const { bridge } = useWorkbench();
 	const canvas = useAvCanvas({
 		width: project.width,
 		height: project.height
@@ -2584,12 +2648,18 @@ function PreviewPanel() {
 		if (errors.length === 0) return;
 		const missing = errors.filter((e) => e.message.startsWith("素材文件未载入"));
 		const other = errors.filter((e) => !e.message.startsWith("素材文件未载入"));
-		if (missing.length > 0) toast.warning(`${missing.length} 个片段缺少源文件，已跳过预览`, {
+		if (missing.length > 0) notify(bridge, {
+			level: "warning",
+			title: `${missing.length} 个片段缺少源文件，已跳过预览`,
 			description: "刷新后素材二进制不会保留，请重新导入相同文件",
 			duration: 8e3
 		});
-		if (other.length > 0) toast.error("部分片段无法载入预览", { description: Array.from(new Set(other.map((e) => e.message))).slice(0, 3).join("\n") });
-	}, []);
+		if (other.length > 0) notify(bridge, {
+			level: "error",
+			title: "部分片段无法载入预览",
+			description: Array.from(new Set(other.map((e) => e.message))).slice(0, 3).join("\n")
+		});
+	}, [bridge]);
 	const clock = usePlaybackClock({
 		project,
 		assets,
@@ -2725,12 +2795,18 @@ function PreviewPanel() {
 	const handleCapture = useCallback(() => {
 		const dataUrl = canvas.captureImage();
 		if (dataUrl == null) {
-			toast.error("截图失败：画布尚未就绪");
+			notify(bridge, {
+				level: "error",
+				title: "截图失败：画布尚未就绪"
+			});
 			return;
 		}
 		downloadDataUrl(dataUrl, `frame-${Date.now()}.png`);
-		toast.success("已导出当前帧");
-	}, [canvas]);
+		notify(bridge, {
+			level: "success",
+			title: "已导出当前帧"
+		});
+	}, [bridge, canvas]);
 	const handleFullscreen = () => {
 		const el = canvas.containerRef.current?.parentElement;
 		if (el == null) return;
@@ -6184,16 +6260,23 @@ function useAddToTimeline() {
 	const assets = useEditor((s) => s.assets);
 	const playheadUs = useEditor((s) => s.playheadUs);
 	const addClip = useEditor((s) => s.addClip);
+	const { bridge } = useWorkbench();
 	return useCallback((assetId) => {
 		const asset = assets.find((a) => a.id === assetId);
 		if (!asset) {
-			toast.error("素材不存在，可能已被删除");
+			notify(bridge, {
+				level: "error",
+				title: "素材不存在，可能已被删除"
+			});
 			return;
 		}
 		const kindIsAudio = asset.kind === "audio";
 		const track = project.tracks.find((t) => t.kind === (kindIsAudio ? "audio" : "visual")) ?? project.tracks[0];
 		if (!track) {
-			toast.error("没有可用轨道");
+			notify(bridge, {
+				level: "error",
+				title: "没有可用轨道"
+			});
 			return;
 		}
 		const trackEnd = getTrackEnd(project, track.id);
@@ -6226,6 +6309,7 @@ function useAddToTimeline() {
 	}, [
 		addClip,
 		assets,
+		bridge,
 		playheadUs,
 		project
 	]);
@@ -7516,6 +7600,10 @@ function CutWorkbenchProvider({ children, bridge, theme = "dark", tokens, config
 	useCutEditor();
 	const [ui] = useState(() => createUiStore());
 	const resolvedBridge = useMemo(() => bridge ?? createDefaultBridge(), [bridge]);
+	useEffect(() => {
+		setDefaultBridge(resolvedBridge);
+		return () => setDefaultBridge(null);
+	}, [resolvedBridge]);
 	const mergedConfig = useMemo(() => ({
 		...DEFAULT_CONFIG,
 		...config,