@cut-workbench/workbench 0.1.0 → 0.2.0

package/dist/lab.js

@@ -0,0 +1,1177 @@
+import { a as formatResolution, c as CardContent, d as CardTitle, f as Badge, l as CardDescription, n as formatDuration, p as cn, s as Card, u as CardHeader } from "./format-CV2aoZZC.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { formatTimecode, parseSrt } from "@cut-workbench/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Circle, FlaskConical, Loader2, Pause, Play, Split, Square } from "lucide-react";
+import { toast } from "sonner";
+import { AVRecorder, FrameCounterClip, burnSubtitles, concatMp4, createDemoCanvasStream, createMp4Clip, createSubtitlePreviewClip, exportCustomClip, extractKeyframes, fixRecordedDuration, formatRecorderState, isWebGL2Available, mixAudioIntoMp4, readMp4Info, renderChromakeyFrame, renderClipFrameToCanvas, renderSubtitleFrame, splitMp4Tracks } from "@cut-workbench/core/lab";
+// src/features/lab/components/LabCard.tsx
+/** Lab 卡片外壳：标题 + 用到的 API + （不可用时的原因） */
+function LabCard({ title, description, apis, children, unavailable, className }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("flex flex-col", className),
+		children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: "gap-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex size-6 items-center justify-center rounded bg-primary/10 text-primary",
+						children: /* @__PURE__ */ jsx(FlaskConical, { className: "size-3.5" })
+					}), /* @__PURE__ */ jsx(CardTitle, {
+						className: "text-sm",
+						children: title
+					})]
+				}),
+				/* @__PURE__ */ jsx(CardDescription, {
+					className: "text-xs",
+					children: description
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1 pt-1",
+					children: apis.map((api) => /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						className: "font-mono text-[10px] font-normal text-muted-foreground",
+						children: api
+					}, api))
+				})
+			]
+		}), /* @__PURE__ */ jsx(CardContent, {
+			className: "flex flex-1 flex-col gap-2.5",
+			children: unavailable != null ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-md border border-dashed border-warning/40 bg-warning/5 p-3 text-xs text-warning",
+				children: unavailable
+			}) : children
+		})]
+	});
+}
+// src/features/lab/hooks/use-lab-action.ts
+/** 生成可下载链接（Lab 通用） */
+function useDownload() {
+	const urlsRef = useRef([]);
+	return useCallback((blob, filename) => {
+		const url = URL.createObjectURL(blob);
+		urlsRef.current.push(url);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = filename;
+		document.body.appendChild(link);
+		link.click();
+		link.remove();
+		window.setTimeout(() => URL.revokeObjectURL(url), 15e3);
+	}, []);
+}
+/** 带 busy 状态的异步执行器：统一错误 toast，禁止静默吞异常 */
+function useLabAction() {
+	const [busy, setBusy] = useState(null);
+	return {
+		busy,
+		run: useCallback(async (label, task) => {
+			setBusy(label);
+			try {
+				return await task();
+			} catch (err) {
+				const message = err instanceof Error ? err.message : String(err);
+				console.error(err);
+				toast.error("操作失败", { description: message });
+				return null;
+			} finally {
+				setBusy(null);
+			}
+		}, [])
+	};
+}
+// src/features/lab/components/shared.tsx
+/**
+* Lab 共享的可视组件。
+*
+* 只导出组件（React Fast Refresh 要求单文件只导出组件）；
+* 工具函数与 hook 放在 `../hooks/use-lab-action`。
+*/
+/** 文件选择按钮 */
+function FilePickButton({ label, accept, multiple, onFiles, disabled }) {
+	const inputRef = useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		ref: inputRef,
+		type: "file",
+		accept,
+		multiple,
+		className: "hidden",
+		onChange: (e) => {
+			const files = Array.from(e.target.files ?? []);
+			if (files.length > 0) onFiles(files);
+			e.target.value = "";
+		}
+	}), /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled,
+		onClick: () => inputRef.current?.click(),
+		className: "flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-3 py-3.5 text-xs text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "max-w-full truncate",
+			children: label
+		})
+	})] });
+}
+/** 结果预览：视频 + 下载 */
+function ResultPreview({ blob, filename }) {
+	const download = useDownload();
+	const [url] = useState(() => URL.createObjectURL(blob));
+	useEffect(() => () => URL.revokeObjectURL(url), [url]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1.5",
+		children: [/* @__PURE__ */ jsx("video", {
+			src: url,
+			controls: true,
+			className: "w-full rounded-md border bg-stage-bg",
+			style: { maxHeight: 200 }
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground",
+				children: [(blob.size / 1024 / 1024).toFixed(2), " MB"]
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => download(blob, filename),
+				className: "rounded-md bg-primary px-2 py-1 text-[11px] text-primary-foreground hover:bg-primary/90",
+				children: "下载"
+			})]
+		})]
+	});
+}
+/** 忙碌提示 */
+function Busy({ label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }), label]
+	});
+}
+/** 简易滑杆 */
+function SliderRow({ label, value, min, max, step, format, onChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between text-[10px] text-muted-foreground",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
+				className: "font-mono tabular-nums",
+				children: format ? format(value) : value.toFixed(2)
+			})]
+		}), /* @__PURE__ */ jsx("input", {
+			type: "range",
+			min,
+			max,
+			step,
+			value,
+			onChange: (e) => onChange(Number(e.target.value)),
+			className: "h-1 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
+		})]
+	});
+}
+// src/features/lab/components/ConcatenateLab.tsx
+/**
+* Lab 1：无损拼接。
+*
+* 用 `fastConcatMP4` 直接拼接多个 MP4 的样本，不重编码。
+* 前提是编码 / 分辨率 / 采样率完全一致；不一致时本 Lab 会先预检并给出具体差异。
+*/
+function ConcatenateLab() {
+	const [files, setFiles] = useState([]);
+	const [infos, setInfos] = useState([]);
+	const [result, setResult] = useState(null);
+	const { busy, run } = useLabAction();
+	const handleFiles = async (picked) => {
+		setFiles(picked);
+		setResult(null);
+		setInfos([]);
+		const detected = await run("正在读取文件信息…", async () => {
+			const list = [];
+			for (const file of picked) list.push(await readMp4Info(file));
+			return list;
+		});
+		if (detected != null) setInfos(detected);
+	};
+	const handleConcat = async () => {
+		const output = await run("正在无损拼接…", () => concatMp4(files));
+		if (output != null) {
+			setResult(output.blob);
+			setInfos(output.infos);
+		}
+	};
+	const first = infos[0];
+	const mismatch = first != null && infos.some((info) => info.width !== first.width || info.height !== first.height || info.codec !== first.codec || info.audioSampleRate !== first.audioSampleRate);
+	return /* @__PURE__ */ jsxs(LabCard, {
+		title: "无损拼接",
+		description: "直接把多个 MP4 的样本拼在一起，不重编码，速度极快。要求规格完全一致。",
+		apis: ["fastConcatMP4", "MP4Clip.getFileHeaderBinData"],
+		children: [
+			/* @__PURE__ */ jsx(FilePickButton, {
+				label: files.length > 0 ? `已选 ${files.length} 个文件（重新选择）` : "选择 2 个以上 MP4",
+				accept: "video/mp4",
+				multiple: true,
+				onFiles: (picked) => void handleFiles(picked),
+				disabled: busy != null
+			}),
+			files.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "space-y-1 text-[10px] text-muted-foreground",
+				children: files.map((file, index) => {
+					const info = infos[index];
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex justify-between gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: file.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 font-mono",
+							children: info != null ? `${formatResolution(info.width, info.height)} · ${formatDuration(info.durationUs)} · ${info.codec}` : "检测中…"
+						})]
+					}, `${file.name}-${index}`);
+				})
+			}),
+			mismatch && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-1.5 rounded-md bg-warning/10 p-2 text-[10px] text-warning",
+				children: [/* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), "检测到规格不一致，拼接会失败并给出具体原因（fastConcatMP4 的硬性要求）。"]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: files.length < 2 || busy != null,
+				onClick: () => void handleConcat(),
+				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
+				children: "开始拼接"
+			}),
+			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
+			result != null && /* @__PURE__ */ jsx(ResultPreview, {
+				blob: result,
+				filename: "concat.mp4"
+			})
+		]
+	});
+}
+// src/features/lab/components/RemuxLab.tsx
+/**
+* Lab 2：配音。
+*
+* `mixinMP4AndAudio` 只重编码音频轨，视频轨原样复制 —— 因此速度快、画质无损。
+*/
+function RemuxLab() {
+	const [video, setVideo] = useState(null);
+	const [audio, setAudio] = useState(null);
+	const [volume, setVolume] = useState(1);
+	const [loop, setLoop] = useState(true);
+	const [result, setResult] = useState(null);
+	const { busy, run } = useLabAction();
+	const handleMix = async () => {
+		if (video == null || audio == null) return;
+		const output = await run("正在混合音频…", () => mixAudioIntoMp4(video, audio, volume, loop));
+		if (output != null) setResult(output);
+	};
+	return /* @__PURE__ */ jsxs(LabCard, {
+		title: "视频配音",
+		description: "把音轨混入 MP4：只重编码音频，视频轨不动，画质零损失。",
+		apis: ["mixinMP4AndAudio"],
+		children: [
+			/* @__PURE__ */ jsx(FilePickButton, {
+				label: video == null ? "选择视频（MP4）" : video.name,
+				accept: "video/mp4",
+				onFiles: (files) => {
+					setVideo(files[0] ?? null);
+					setResult(null);
+				},
+				disabled: busy != null
+			}),
+			/* @__PURE__ */ jsx(FilePickButton, {
+				label: audio == null ? "选择音频（MP3/WAV/M4A）" : audio.name,
+				accept: "audio/*",
+				onFiles: (files) => {
+					setAudio(files[0] ?? null);
+					setResult(null);
+				},
+				disabled: busy != null
+			}),
+			/* @__PURE__ */ jsx(SliderRow, {
+				label: "音量",
+				value: volume,
+				min: 0,
+				max: 2,
+				step: .05,
+				format: (v) => `${Math.round(v * 100)}%`,
+				onChange: setVolume
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-2 text-[11px] text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: loop,
+					onChange: (e) => setLoop(e.target.checked),
+					className: "accent-primary"
+				}), "音频短于视频时循环填充"]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: video == null || audio == null || busy != null,
+				onClick: () => void handleMix(),
+				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
+				children: "开始混合"
+			}),
+			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
+			result != null && /* @__PURE__ */ jsx(ResultPreview, {
+				blob: result,
+				filename: "mixin.mp4"
+			})
+		]
+	});
+}
+// src/features/lab/components/ChromakeyLab.tsx
+/**
+* Lab 3：绿幕抠像。
+*
+* `createChromakey` 返回一个函数，把 VideoFrame 转成去背后的 ImageBitmap。
+* 配合 `MP4Clip.tickInterceptor` 即可对整段视频生效（导出时同样有效）。
+*
+* ⚠️ 依赖 WebGL2；不支持时本卡片隐藏操作、仅显示原因。
+*/
+/**
+* 抠像结果的兜底底色：读取主题令牌，而不是写死 `#101018`。
+*
+* 抠像后的 VideoFrame 带透明通道，需要一层底色才能看清；用 `--cw-stage-bg`
+* 让 Lab 预览区与工作台舞台保持一致，宿主换主题时一起变。
+* 取不到时退回深色（纯逻辑环境 / 未包 `.cw-root`）。
+*/
+function readStageBackground() {
+	if (typeof document === "undefined") return "#101018";
+	const root = document.querySelector(".cw-root");
+	if (root == null) return "#101018";
+	const value = getComputedStyle(root).getPropertyValue("--cw-stage-bg").trim();
+	return value.length > 0 ? value : "#101018";
+}
+function ChromakeyLab() {
+	const [webgl2] = useState(isWebGL2Available);
+	const [file, setFile] = useState(null);
+	const [similarity, setSimilarity] = useState(.4);
+	const [smoothness, setSmoothness] = useState(.1);
+	const [spill, setSpill] = useState(.1);
+	const [timeUs, setTimeUs] = useState(0);
+	const [durationUs, setDurationUs] = useState(0);
+	const canvasRef = useRef(null);
+	const clipRef = useRef(null);
+	const { busy, run } = useLabAction();
+	useEffect(() => {
+		return () => {
+			clipRef.current?.destroy();
+			clipRef.current = null;
+		};
+	}, []);
+	const render = useCallback(async () => {
+		const clip = clipRef.current;
+		const canvas = canvasRef.current;
+		if (clip == null || canvas == null) return;
+		await renderChromakeyFrame(clip, timeUs, {
+			similarity,
+			smoothness,
+			spill,
+			keyColor: [
+				0,
+				255,
+				0
+			]
+		}, canvas, readStageBackground());
+	}, [
+		similarity,
+		smoothness,
+		spill,
+		timeUs
+	]);
+	const handleFile = async (files) => {
+		const picked = files[0];
+		if (picked == null) return;
+		const result = await run("正在解析视频…", async () => {
+			clipRef.current?.destroy();
+			return await createMp4Clip(picked);
+		});
+		if (result == null) return;
+		clipRef.current = result.clip;
+		setFile(picked);
+		setDurationUs(result.meta.duration);
+		setTimeUs(Math.min(result.meta.duration / 2, 1e6));
+		toast.success("已载入视频，拖动参数查看抠像效果");
+	};
+	useEffect(() => {
+		if (clipRef.current == null || busy != null) return;
+		render();
+	}, [busy, render]);
+	return /* @__PURE__ */ jsxs(LabCard, {
+		title: "绿幕抠像",
+		description: "用 WebGL2 实时扣除背景色，通过 tickInterceptor 作用到整段视频。",
+		apis: ["createChromakey", "MP4Clip.tickInterceptor"],
+		unavailable: webgl2 ? null : "当前设备不支持 WebGL2，createChromakey 无法运行。",
+		children: [
+			/* @__PURE__ */ jsx(FilePickButton, {
+				label: file?.name ?? "选择绿幕视频（MP4）",
+				accept: "video/mp4",
+				onFiles: (files) => void handleFile(files),
+				disabled: busy != null
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative overflow-hidden rounded-md border bg-stage-bg",
+				children: [/* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					className: "block w-full",
+					style: { maxHeight: 180 }
+				}), file == null && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute inset-0 flex h-24 items-center justify-center text-[10px] text-muted-foreground",
+					children: "选择视频后显示抠像结果"
+				})]
+			}),
+			/* @__PURE__ */ jsx(SliderRow, {
+				label: "相似度 similarity",
+				value: similarity,
+				min: 0,
+				max: 1,
+				step: .01,
+				format: (v) => v.toFixed(2),
+				onChange: setSimilarity
+			}),
+			/* @__PURE__ */ jsx(SliderRow, {
+				label: "平滑度 smoothness",
+				value: smoothness,
+				min: 0,
+				max: 1,
+				step: .01,
+				format: (v) => v.toFixed(2),
+				onChange: setSmoothness
+			}),
+			/* @__PURE__ */ jsx(SliderRow, {
+				label: "饱和度 spill",
+				value: spill,
+				min: 0,
+				max: 1,
+				step: .01,
+				format: (v) => v.toFixed(2),
+				onChange: setSpill
+			}),
+			durationUs > 0 && /* @__PURE__ */ jsx(SliderRow, {
+				label: "取帧时间",
+				value: timeUs,
+				min: 0,
+				max: Math.max(1, durationUs - 1),
+				step: 1e5,
+				format: (v) => `${(v / 1e6).toFixed(2)}s`,
+				onChange: setTimeUs
+			}),
+			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[10px] leading-relaxed text-muted-foreground",
+				children: "keyColor 固定为纯绿 (0,255,0)。实际项目中可读取首帧像素自动取色。"
+			})
+		]
+	});
+}
+// src/features/lab/components/SubtitleLab.tsx
+var SAMPLE_SRT = `1
+00:00:00,000 --> 00:00:02,000
+这是第一句字幕
+
+2
+00:00:02,000 --> 00:00:04,000
+第二句会带描边
+
+3
+00:00:04,000 --> 00:00:06,000
+EmbedSubtitlesClip 烧录进画面
+`;
+/**
+* Lab 4：字幕烧录。
+*
+* `EmbedSubtitlesClip` 本身就是一个 IClip：tick 返回带字幕的 VideoFrame。
+* 因此既能放进 Combinator 导出，也能直接逐帧预览。
+*/
+function SubtitleLab() {
+	const [srt, setSrt] = useState(SAMPLE_SRT);
+	const [timeUs, setTimeUs] = useState(0);
+	const [playing, setPlaying] = useState(false);
+	const [result, setResult] = useState(null);
+	const { busy, run } = useLabAction();
+	const canvasRef = useRef(null);
+	const clipRef = useRef(null);
+	const rafRef = useRef(null);
+	const cues = parseSrt(srt);
+	const durationUs = cues.length > 0 ? cues[cues.length - 1].endMs * 1e3 : 0;
+	useEffect(() => {
+		clipRef.current?.destroy();
+		if (cues.length === 0) {
+			clipRef.current = null;
+			return;
+		}
+		try {
+			clipRef.current = createSubtitlePreviewClip(srt, 640, 360);
+		} catch (err) {
+			console.warn("[SubtitleLab] create failed", err);
+			clipRef.current = null;
+		}
+		return () => {
+			clipRef.current?.destroy();
+			clipRef.current = null;
+		};
+	}, [cues.length, srt]);
+	const draw = useCallback(async () => {
+		const clip = clipRef.current;
+		const canvas = canvasRef.current;
+		if (clip == null || canvas == null) return;
+		await renderSubtitleFrame(clip, timeUs, canvas);
+	}, [timeUs]);
+	useEffect(() => {
+		draw();
+	}, [draw]);
+	useEffect(() => {
+		if (!playing) return;
+		let last = performance.now();
+		let current = timeUs;
+		const tick = () => {
+			const now = performance.now();
+			current += (now - last) * 1e3;
+			last = now;
+			if (durationUs > 0 && current >= durationUs) {
+				setTimeUs(durationUs);
+				setPlaying(false);
+				return;
+			}
+			setTimeUs(current);
+			rafRef.current = requestAnimationFrame(tick);
+		};
+		rafRef.current = requestAnimationFrame(tick);
+		return () => {
+			if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+		};
+	}, [playing, durationUs]);
+	const handleBurn = async () => {
+		const width = 1280;
+		const height = 720;
+		const output = await run("正在烧录字幕…", () => burnSubtitles(srt, width, height, durationUs));
+		if (output != null) setResult(output);
+	};
+	return /* @__PURE__ */ jsxs(LabCard, {
+		title: "字幕烧录",
+		description: "SRT 解析后逐帧绘制到画面，最终编码进视频流（硬字幕）。",
+		apis: ["EmbedSubtitlesClip", "Combinator"],
+		children: [
+			/* @__PURE__ */ jsx("textarea", {
+				value: srt,
+				onChange: (e) => setSrt(e.target.value),
+				rows: 5,
+				className: "w-full rounded-md border bg-transparent p-2 font-mono text-[10px] outline-none focus-visible:border-ring",
+				placeholder: "粘贴 SRT 内容"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden rounded-md border bg-stage-bg",
+				children: /* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					width: 640,
+					height: 360,
+					className: "block w-full",
+					style: { maxHeight: 180 }
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setPlaying((p) => !p),
+					disabled: cues.length === 0,
+					className: "flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-[11px] disabled:opacity-50",
+					children: [playing ? /* @__PURE__ */ jsx(Square, { className: "size-3" }) : /* @__PURE__ */ jsx(Play, { className: "size-3" }), playing ? "停止" : "预览"]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-[10px] text-muted-foreground",
+					children: [
+						cues.length,
+						" 条 · ",
+						(timeUs / 1e6).toFixed(2),
+						"s / ",
+						(durationUs / 1e6).toFixed(2),
+						"s"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(SliderRow, {
+				label: "时间",
+				value: timeUs,
+				min: 0,
+				max: Math.max(1, durationUs),
+				step: 1e4,
+				format: (v) => `${(v / 1e6).toFixed(2)}s`,
+				onChange: (v) => {
+					setPlaying(false);
+					setTimeUs(v);
+				}
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: cues.length === 0 || busy != null,
+				onClick: () => void handleBurn(),
+				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
+				children: "烧录并导出 MP4"
+			}),
+			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
+			result != null && /* @__PURE__ */ jsx(ResultPreview, {
+				blob: result,
+				filename: "subtitles.mp4"
+			})
+		]
+	});
+}
+// src/features/lab/components/TrackSplitLab.tsx
+/**
+* Lab 5：轨道拆分。
+*
+* `splitTrack()` 从一个 MP4Clip 派生出「纯视频」与「纯音频」两个 clip，
+* 它们与源共享样本表，因此内存开销很小。
+*/
+function TrackSplitLab() {
+	const [file, setFile] = useState(null);
+	const [result, setResult] = useState(null);
+	const { busy, run } = useLabAction();
+	const cleanupRef = useRef(null);
+	useEffect(() => {
+		return () => cleanupRef.current?.();
+	}, []);
+	const handleSplit = async () => {
+		if (file == null) return;
+		cleanupRef.current?.();
+		const output = await run("正在拆分轨道…", () => splitMp4Tracks(file));
+		setResult(output);
+		cleanupRef.current = () => {
+			output?.videoClip?.destroy();
+			output?.audioClip?.destroy();
+		};
+	};
+	return /* @__PURE__ */ jsxs(LabCard, {
+		title: "轨道拆分",
+		description: "把一个 MP4 拆成纯视频轨与纯音频轨两个独立 IClip，用于分别编辑。",
+		apis: ["MP4Clip.splitTrack"],
+		children: [
+			/* @__PURE__ */ jsx(FilePickButton, {
+				label: file?.name ?? "选择 MP4",
+				accept: "video/mp4",
+				onFiles: (files) => {
+					setFile(files[0] ?? null);
+					setResult(null);
+				},
+				disabled: busy != null
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				disabled: file == null || busy != null,
+				onClick: () => void handleSplit(),
+				className: "flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
+				children: [/* @__PURE__ */ jsx(Split, { className: "size-3" }), "拆分轨道"]
+			}),
+			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
+			result != null && /* @__PURE__ */ jsxs("div", {
+				className: "grid gap-1.5 text-[10px]",
+				children: [
+					/* @__PURE__ */ jsx(TrackResult, {
+						label: "视频轨",
+						present: result.videoMeta != null,
+						detail: result.videoMeta != null ? `${result.videoMeta.width}×${result.videoMeta.height} · ${formatDuration(result.videoMeta.duration)}` : "源文件无视频轨"
+					}),
+					/* @__PURE__ */ jsx(TrackResult, {
+						label: "音频轨",
+						present: result.audioMeta != null,
+						detail: result.audioMeta != null ? `48kHz 双声道 · ${formatDuration(result.audioMeta.duration)}` : "源文件无音频轨"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "pt-1 leading-relaxed text-muted-foreground",
+						children: "拆分出的 clip 与源共享样本表，可分别创建 Sprite 放到不同轨道；两者在时间轴上对齐即等于原片。"
+					})
+				]
+			})
+		]
+	});
+}
+function TrackResult({ label, present, detail }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-2 rounded-md border px-2 py-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: present ? "text-foreground" : "text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: present ? "font-mono text-success" : "text-muted-foreground",
+			children: present ? detail : detail
+		})]
+	});
+}
+// src/features/lab/components/ThumbnailLab.tsx
+/**
+* Lab 6：缩略图抽帧。
+*
+* `MP4Clip.thumbnails()` 默认每个关键帧生成一张；也可以传 step 按固定间隔取。
+* 这里展示全部关键帧与时间戳。
+*/
+function ThumbnailLab() {
+	const [file, setFile] = useState(null);
+	const [frames, setFrames] = useState([]);
+	const [width, setWidth] = useState(120);
+	const { busy, run } = useLabAction();
+	useEffect(() => {
+		return () => {
+			for (const frame of frames) URL.revokeObjectURL(frame.url);
+		};
+	}, [frames]);
+	const handleExtract = async () => {
+		if (file == null) return;
+		const output = await run("正在抽取关键帧…", () => extractKeyframes(file, width));
+		if (output != null) setFrames(output);
+	};
+	return /* @__PURE__ */ jsxs(LabCard, {
+		title: "缩略图抽帧",
+		description: "按关键帧抽取缩略图，可用于时间轴缩略图带或场景切分预览。",
+		apis: ["MP4Clip.thumbnails"],
+		children: [
+			/* @__PURE__ */ jsx(FilePickButton, {
+				label: file?.name ?? "选择 MP4",
+				accept: "video/mp4",
+				onFiles: (files) => {
+					setFile(files[0] ?? null);
+					setFrames([]);
+				},
+				disabled: busy != null
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] text-muted-foreground",
+						children: "宽度"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "number",
+						min: 40,
+						max: 480,
+						step: 20,
+						value: width,
+						onChange: (e) => setWidth(Number(e.target.value)),
+						className: "h-6 w-16 rounded border bg-transparent px-1.5 text-[11px]"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: file == null || busy != null,
+						onClick: () => void handleExtract(),
+						className: "ml-auto rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
+						children: "抽取"
+					})
+				]
+			}),
+			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
+			frames.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", {
+				className: "text-[10px] text-muted-foreground",
+				children: [
+					"共 ",
+					frames.length,
+					" 张关键帧"
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "thin-scrollbar grid max-h-52 grid-cols-3 gap-1.5 overflow-auto",
+				children: frames.map((frame, index) => /* @__PURE__ */ jsxs("figure", {
+					className: "space-y-0.5",
+					children: [/* @__PURE__ */ jsx("img", {
+						src: frame.url,
+						alt: "",
+						className: "w-full rounded border object-cover",
+						loading: "lazy"
+					}), /* @__PURE__ */ jsx("figcaption", {
+						className: "font-mono text-[9px] text-muted-foreground tabular-nums",
+						children: formatTimecode(frame.ts)
+					})]
+				}, `${frame.ts}-${index}`))
+			})] })
+		]
+	});
+}
+// src/features/lab/components/RecorderLab.tsx
+/**
+* Lab 7：屏幕 / 画布录制。
+*
+* `AVRecorder` 接收任意 MediaStream 并输出 MP4（H.264 + AAC）。
+* 这里提供两种源：
+* - 程序化画布（Canvas.captureStream，无需授权）；
+* - 摄像头（getUserMedia，需要用户授权）。
+*/
+function RecorderLab() {
+	const [mode, setMode] = useState("demo");
+	const [recording, setRecording] = useState(false);
+	const [paused, setPaused] = useState(false);
+	const [bytes, setBytes] = useState(0);
+	const [state, setState] = useState("inactive");
+	const [result, setResult] = useState(null);
+	const [previewStream, setPreviewStream] = useState(null);
+	const videoRef = useRef(null);
+	const recorderRef = useRef(null);
+	const demoRef = useRef(null);
+	const cameraRef = useRef(null);
+	const { run } = useLabAction();
+	useEffect(() => {
+		const video = videoRef.current;
+		if (video == null) return;
+		video.srcObject = previewStream;
+		if (previewStream != null) video.play().catch(() => void 0);
+		return () => {
+			if (video.srcObject === previewStream) video.srcObject = null;
+		};
+	}, [previewStream]);
+	const cleanup = useCallback(() => {
+		demoRef.current?.stop();
+		demoRef.current = null;
+		cameraRef.current?.getTracks().forEach((t) => t.stop());
+		cameraRef.current = null;
+		recorderRef.current?.dispose();
+		recorderRef.current = null;
+		setPreviewStream(null);
+	}, []);
+	useEffect(() => cleanup, [cleanup]);
+	const acquireStream = async () => {
+		cleanup();
+		if (mode === "demo") {
+			const demo = createDemoCanvasStream(1280, 720);
+			demoRef.current = demo;
+			setPreviewStream(demo.stream);
+			return demo.stream;
+		}
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({
+				video: true,
+				audio: true
+			});
+			cameraRef.current = stream;
+			setPreviewStream(stream);
+			return stream;
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			toast.error("无法访问摄像头", { description: message });
+			return null;
+		}
+	};
+	const handleStart = async () => {
+		const stream = await acquireStream();
+		if (stream == null) return;
+		setBytes(0);
+		setResult(null);
+		const recorder = createRecorderAdapter(stream, (total) => setBytes(total));
+		recorderRef.current = recorder;
+		recorder.start();
+		setRecording(true);
+		setPaused(false);
+		setState(recorder.state());
+	};
+	const handlePauseToggle = () => {
+		const recorder = recorderRef.current;
+		if (recorder == null) return;
+		if (paused) {
+			recorder.resume();
+			setPaused(false);
+		} else {
+			recorder.pause();
+			setPaused(true);
+		}
+		setState(recorder.state());
+	};
+	const handleStop = async () => {
+		const recorder = recorderRef.current;
+		if (recorder == null) return;
+		const output = await run("正在封装 MP4…", async () => {
+			const raw = await recorder.stop();
+			return fixRecordedDuration(raw);
+		});
+		setRecording(false);
+		setPaused(false);
+		setState(recorder.state());
+		recorderRef.current = null;
+		if (output != null) {
+			setResult(output);
+			toast.success(`录制完成 · ${(output.size / 1024 / 1024).toFixed(2)} MB`);
+		}
+	};
+	return /* @__PURE__ */ jsxs(LabCard, {
+		title: "屏幕 / 画布录制",
+		description: "用 AVRecorder 把 MediaStream 实时编码为 MP4。可录制程序化画布或摄像头。",
+		apis: ["AVCanvas.captureStream", "AVRecorder.start/pause/resume/stop"],
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex gap-1.5",
+				children: ["demo", "camera"].map((item) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: recording,
+					onClick: () => setMode(item),
+					className: `flex-1 rounded-md border px-2 py-1 text-[11px] disabled:opacity-50 ${mode === item ? "border-primary bg-primary/10 text-primary" : "text-muted-foreground"}`,
+					children: item === "demo" ? "动态画布" : "摄像头"
+				}, item))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden rounded-md border bg-stage-bg",
+				children: /* @__PURE__ */ jsx("video", {
+					ref: videoRef,
+					muted: true,
+					playsInline: true,
+					className: "block w-full",
+					style: { maxHeight: 170 }
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: [!recording ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => void handleStart(),
+					className: "flex items-center gap-1 rounded-md bg-destructive px-2.5 py-1 text-[11px] text-destructive-foreground",
+					children: [/* @__PURE__ */ jsx(Circle, { className: "size-3 fill-current" }), "开始录制"]
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: handlePauseToggle,
+					className: "flex items-center gap-1 rounded-md bg-secondary px-2.5 py-1 text-[11px]",
+					children: [paused ? /* @__PURE__ */ jsx(Play, { className: "size-3" }) : /* @__PURE__ */ jsx(Pause, { className: "size-3" }), paused ? "继续" : "暂停"]
+				}), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => void handleStop(),
+					className: "flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-[11px] text-primary-foreground",
+					children: [/* @__PURE__ */ jsx(Square, { className: "size-3" }), "停止"]
+				})] }), /* @__PURE__ */ jsxs("span", {
+					className: "ml-auto font-mono text-[10px] text-muted-foreground tabular-nums",
+					children: [
+						(bytes / 1024 / 1024).toFixed(2),
+						" MB · ",
+						formatRecorderState(state)
+					]
+				})]
+			}),
+			result != null && /* @__PURE__ */ jsx(ResultPreview, {
+				blob: result,
+				filename: "recording.mp4"
+			})
+		]
+	});
+}
+/** 适配 RecorderHandle（隔离 AVRecorder 细节） */
+function createRecorderAdapter(stream, onChunk) {
+	const recorder = new AVRecorder(stream, { expectFPS: 30 });
+	const chunks = [];
+	let total = 0;
+	return {
+		start: () => {
+			const readable = recorder.start(300);
+			(async () => {
+				const reader = readable.getReader();
+				for (;;) try {
+					const { done, value } = await reader.read();
+					if (done) break;
+					if (value != null) {
+						chunks.push(new Uint8Array(value));
+						total += value.byteLength;
+						onChunk(total);
+					}
+				} catch {
+					break;
+				}
+			})();
+		},
+		pause: () => recorder.pause(),
+		resume: () => recorder.resume(),
+		stop: async () => {
+			await recorder.stop();
+			return new Blob(chunks, { type: "video/mp4" });
+		},
+		state: () => recorder.state,
+		dispose: () => {
+			stream.getTracks().forEach((t) => t.stop());
+		}
+	};
+}
+// src/features/lab/components/CustomClipLab.tsx
+/**
+* Lab 8：自定义 IClip。
+*
+* `FrameCounterClip` 是本项目实现的 IClip：不依赖任何媒体文件，
+* 逐帧用 OffscreenCanvas 画出帧号 / 进度条 / 色相变化。
+*
+* 它证明 IClip 接口（tick / ready / meta / clone / split / destroy）可以被任意扩展，
+* 且能直接被 Combinator 编码成 MP4。
+*/
+function CustomClipLab() {
+	const [durationSec, setDurationSec] = useState(5);
+	const [timeUs, setTimeUs] = useState(0);
+	const [playing, setPlaying] = useState(false);
+	const [result, setResult] = useState(null);
+	const canvasRef = useRef(null);
+	const clipRef = useRef(null);
+	const rafRef = useRef(null);
+	const { busy, run } = useLabAction();
+	const durationUs = Math.round(durationSec * 1e6);
+	useEffect(() => {
+		clipRef.current?.destroy();
+		try {
+			clipRef.current = new FrameCounterClip(640, 360, durationUs, 30);
+		} catch (err) {
+			console.warn("[CustomClipLab] create failed", err);
+			clipRef.current = null;
+		}
+		return () => {
+			clipRef.current?.destroy();
+			clipRef.current = null;
+		};
+	}, [durationUs]);
+	const draw = useCallback(async () => {
+		const clip = clipRef.current;
+		const canvas = canvasRef.current;
+		if (clip == null || canvas == null) return;
+		await renderClipFrameToCanvas(clip, timeUs, canvas);
+	}, [timeUs]);
+	useEffect(() => {
+		draw();
+	}, [draw]);
+	useEffect(() => {
+		if (!playing) return;
+		let last = performance.now();
+		let current = timeUs;
+		const tick = () => {
+			const now = performance.now();
+			current += (now - last) * 1e3;
+			last = now;
+			if (current >= durationUs) {
+				setTimeUs(durationUs - 1);
+				setPlaying(false);
+				return;
+			}
+			setTimeUs(current);
+			rafRef.current = requestAnimationFrame(tick);
+		};
+		rafRef.current = requestAnimationFrame(tick);
+		return () => {
+			if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+		};
+	}, [playing, durationUs]);
+	const handleExport = async () => {
+		const clip = clipRef.current;
+		if (clip == null) return;
+		const output = await run("正在编码自定义 Clip…", () => exportCustomClip(clip, durationUs));
+		if (output != null) setResult(output);
+	};
+	return /* @__PURE__ */ jsxs(LabCard, {
+		title: "自定义 IClip",
+		description: "纯程序化渲染的 Clip（帧计数器），不依赖任何媒体文件，证明接口可扩展。",
+		apis: [
+			"IClip.tick",
+			"IClip.clone",
+			"IClip.split",
+			"Combinator"
+		],
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden rounded-md border bg-stage-bg",
+				children: /* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					width: 640,
+					height: 360,
+					className: "block w-full",
+					style: { maxHeight: 180 }
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						if (!playing && timeUs >= durationUs - 1) setTimeUs(0);
+						setPlaying((p) => !p);
+					},
+					className: "flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-[11px]",
+					children: [playing ? /* @__PURE__ */ jsx(Square, { className: "size-3" }) : /* @__PURE__ */ jsx(Play, { className: "size-3" }), playing ? "停止" : "预览"]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "font-mono text-[10px] text-muted-foreground tabular-nums",
+					children: [
+						formatTimecode(timeUs),
+						" / ",
+						formatTimecode(durationUs)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(SliderRow, {
+				label: "时间",
+				value: timeUs,
+				min: 0,
+				max: Math.max(1, durationUs - 1),
+				step: 1e4,
+				format: (v) => `${(v / 1e6).toFixed(2)}s`,
+				onChange: (v) => {
+					setPlaying(false);
+					setTimeUs(v);
+				}
+			}),
+			/* @__PURE__ */ jsx(SliderRow, {
+				label: "时长",
+				value: durationSec,
+				min: 1,
+				max: 20,
+				step: .5,
+				format: (v) => `${v.toFixed(1)}s`,
+				onChange: (v) => {
+					setPlaying(false);
+					setDurationSec(v);
+					setTimeUs(0);
+				}
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: busy != null,
+				onClick: () => void handleExport(),
+				className: "rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground disabled:opacity-50",
+				children: "编码为 MP4"
+			}),
+			busy != null && /* @__PURE__ */ jsx(Busy, { label: busy }),
+			result != null && /* @__PURE__ */ jsx(ResultPreview, {
+				blob: result,
+				filename: "custom-clip.mp4"
+			})
+		]
+	});
+}
+// src/features/lab/components/LabPage.tsx
+/**
+* 能力实验室：每个 WebAV 高级 API 一个可独立运行的卡片。
+*
+* 与主编辑器共享同一套能力探测结果，因此这里不再重复检测。
+*/
+function LabPage() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-7xl space-y-4 p-4",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(FlaskConical, { className: "size-4 text-primary" }), /* @__PURE__ */ jsx("h1", {
+						className: "text-sm font-semibold",
+						children: "能力实验室"
+					})]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: "覆盖 av-cliper / av-canvas / av-recorder 的进阶 API。每个卡片可独立运行，失败时给出可读原因。"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3",
+				children: [
+					/* @__PURE__ */ jsx(ConcatenateLab, {}),
+					/* @__PURE__ */ jsx(RemuxLab, {}),
+					/* @__PURE__ */ jsx(ChromakeyLab, {}),
+					/* @__PURE__ */ jsx(SubtitleLab, {}),
+					/* @__PURE__ */ jsx(TrackSplitLab, {}),
+					/* @__PURE__ */ jsx(ThumbnailLab, {}),
+					/* @__PURE__ */ jsx(RecorderLab, {}),
+					/* @__PURE__ */ jsx(CustomClipLab, {})
+				]
+			}),
+			/* @__PURE__ */ jsx("footer", {
+				className: "border-t pt-3 text-[10px] leading-relaxed text-muted-foreground",
+				children: "说明：所有输出均为 MP4（H.264 + AAC 48kHz 双声道）。WebAV 生成的是 fMP4 分片， 部分播放器需「修复时长」；浏览器本地处理，文件不会上传。"
+			})
+		]
+	});
+}
+export { LabPage };
+
+//# sourceMappingURL=lab.js.map