@mulmoclaude/mulmoscript-plugin 0.2.3 → 1.1.0

package/dist/vue.js

@@ -1,24 +1,28 @@
-import { a as pluginCore, d as TOOL_DEFINITION, f as TOOL_NAME } from "./plugin-BQyzxkui.js";
+import { a as pluginCore, d as errorMessage, f as TOOL_DEFINITION, p as TOOL_NAME } from "./plugin-CXhOP_xU.js";
 import { t as GENERATION_EVENT } from "./contract-vY0niHkh.js";
 import { mulmoBeatSchema, mulmoScriptSchema } from "@mulmocast/types";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderList, toDisplayString, unref, vModelText, vShow, watch, withDirectives, withModifiers } from "vue";
-import { PLUGIN_RUNTIME_KEY, useRuntime } from "gui-chat-protocol/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderList, toDisplayString, unref, vModelText, vShow, watch, withDirectives, withModifiers } from "vue";
+import { createUseT, useRuntime } from "gui-chat-protocol/vue";
 //#region src/vue/support.ts
 function isRecord(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-/** Canonical unknown-caught-value → human-readable string. Non-Error
-*  objects with a `details` (gRPC convention) or `message` string field
-*  have that field surfaced. */
-function errorMessage(err, fallback) {
-	if (err instanceof Error) return err.message;
-	if (err !== null && typeof err === "object") {
-		const obj = err;
-		if (typeof obj.details === "string" && obj.details) return obj.details;
-		if (typeof obj.message === "string" && obj.message) return obj.message;
-	}
-	if (fallback !== void 0) return fallback;
-	return String(err);
+/** Read a dropped image File as a base64 data URL, the form the upload
+*  dispatches expect. Shared by the beat and character drop handlers.
+*  `readAsDataURL` always yields a string on load; the non-string reject
+*  is an unreachable guard kept so the resolve type stays `string` without
+*  a cast. */
+function readFileAsDataUrl(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => {
+			const { result } = reader;
+			if (typeof result === "string") resolve(result);
+			else reject(/* @__PURE__ */ new Error("FileReader did not return a data URL string"));
+		};
+		reader.onerror = reject;
+		reader.readAsDataURL(file);
+	});
 }
 /** Clipboard failures (permissions, insecure context) are swallowed on
 *  purpose: the UI just leaves the "Copied!" hint off, which is what
@@ -100,6 +104,16 @@ function beatMayHaveMovie(beat) {
 	if (beat.moviePrompt) return true;
 	return beat.image?.type === "html_tailwind" && Boolean(beat.image.animation);
 }
+/**
+* True for a beat whose image merely REFERENCES another beat's image
+* (`image: { type: "beat", id }` — mulmoBeatReferenceMediaSchema). Such a
+* beat owns no asset of its own, so there is nothing to generate for it:
+* the View hides the Generate button (offering it produced a render that
+* could never succeed on its own terms).
+*/
+function isBeatImageReference(beat) {
+	return beat.image?.type === "beat";
+}
 /** Pure check: is every beat in the script a `slide`-typed beat?
 *  When true, the View mounts `@mulmocast/deck-web`'s
 *  `MulmoScriptDeckEditor` instead of the per-beat list UI (#1575).
@@ -117,6 +131,74 @@ function isAllSlideDeck(script) {
 		return isRecord(image) && image.type === "slide";
 	});
 }
+/** Resolve the beat the View should render at `index`: the user's
+*  in-place edit (`overrides`) wins over the on-disk beat, and an
+*  out-of-range index yields an empty beat so callers can read
+*  `.text` / `.image` without a guard. */
+function effectiveBeat(overrides, beats, index) {
+	return overrides[index] ?? beats[index] ?? {};
+}
+var BEAT_TOOLTIP_MAX_CHARS = 80;
+/** Beat-strip hover tooltip: the beat text, truncated with an ellipsis
+*  past the cap. Missing text yields an empty string. Text of exactly
+*  the cap length is returned whole (only a longer string is cut). */
+function beatTooltip(text) {
+	const value = text ?? "";
+	return value.length > BEAT_TOOLTIP_MAX_CHARS ? `${value.slice(0, BEAT_TOOLTIP_MAX_CHARS)}…` : value;
+}
+/** The prompt for a character image, or "" when the key or its prompt
+*  is absent — the character strip renders the empty string as no
+*  caption rather than `undefined`. */
+function characterPrompt(images, key) {
+	return images?.[key]?.prompt ?? "";
+}
+/** Is the in-editor JSON for a beat currently valid? A missing entry
+*  (source editor never opened) validates the empty string, which is
+*  not parseable JSON, so it reports invalid rather than throwing. */
+function isValidBeat(source, schema) {
+	return validateBeatJSON(source ?? "", schema);
+}
+/** Stale-response guard: a per-beat / per-character response is stale
+*  once the View has navigated to a different result, i.e. the current
+*  file path no longer matches the one captured when the call was made.
+*  Keeping the direction pinned matters — an inverted check would let
+*  script A's late responses write into script B's state. */
+function staleSince(currentFilePath, requestedFilePath) {
+	return currentFilePath !== requestedFilePath;
+}
+var JSON_INDENT = 2;
+/** Pretty-print a script (or any value) as the source-editor / clipboard
+*  text — two-space indent, matching what the beat and disk views emit. */
+function scriptSourceText(value) {
+	return JSON.stringify(value, null, JSON_INDENT);
+}
+/** Basename for a download `<a download>` attribute, falling back when
+*  the path has no basename. Mirrors the exact existing behaviour, and
+*  it has a sharp edge: `.pop()` returns "" (not undefined) for a
+*  trailing slash or empty path, and `??` does NOT replace "", so those
+*  yield an empty filename rather than the fallback. Server paths always
+*  carry a basename, so this never bites in practice — pinned so a later
+*  reader doesn't "simplify" `??` to `||` and change behaviour. */
+function downloadFilename(path, fallback) {
+	return path.split("/").pop() ?? fallback;
+}
+/** Narrow a script-supplied silent-beat duration to a safe positive number.
+*  Zero / negative / NaN / Infinity / non-number collapse the auto-advance
+*  timer to an immediate fire, which races the Play loop through every silent
+*  beat in a single tick (#1365) — fall back to the default so a run of silent
+*  beats stays watchable. The script's own valid `duration` always wins. */
+function resolveSilentAdvanceSeconds(raw, defaultSec) {
+	return typeof raw === "number" && Number.isFinite(raw) && raw > 0 ? raw : defaultSec;
+}
+/** Delete every own enumerable key of each record, in place. Used to reset the
+*  View's per-beat / per-character reactive maps between scripts — passing the
+*  reactive proxies mutates them so the template re-renders empty. Replaces a
+*  wall of hand-rolled `Object.keys(map).forEach(delete)` loops. */
+function clearReactiveRecords(...records) {
+	records.forEach((record) => {
+		Object.keys(record).forEach((key) => Reflect.deleteProperty(record, key));
+	});
+}
 //#endregion
 //#region src/vue/transport.ts
 var GENERATION_EVENT_KINDS = /* @__PURE__ */ new Set([
@@ -185,8 +267,337 @@ function useHostAdapter() {
 	return inject(MULMOSCRIPT_HOST_ADAPTER_KEY, EMPTY_ADAPTER);
 }
 //#endregion
-//#region src/lang/index.ts
-var MESSAGES = {
+//#region src/vue/composables/useMediaExport.ts
+function useMediaExport({ api, adapter, filePath, chatSessionId }) {
+	const movieGenerating = ref(false);
+	const movieDownloading = ref(false);
+	const moviePath = ref(null);
+	const movieError = ref(null);
+	const pdfGenerating = ref(false);
+	const pdfDownloading = ref(false);
+	const pdfPath = ref(null);
+	async function generateMovie() {
+		const requestedFilePath = filePath.value;
+		movieGenerating.value = true;
+		movieError.value = null;
+		const response = await api.call("generateMovie", {
+			filePath: requestedFilePath,
+			chatSessionId: chatSessionId.value
+		});
+		if (filePath.value !== requestedFilePath) return;
+		movieGenerating.value = false;
+		if (!response.ok) {
+			movieError.value = response.error;
+			return;
+		}
+		moviePath.value = response.data.moviePath;
+	}
+	async function generatePdf() {
+		const requestedFilePath = filePath.value;
+		pdfGenerating.value = true;
+		const response = await api.call("generatePdf", {
+			filePath: requestedFilePath,
+			chatSessionId: chatSessionId.value
+		});
+		if (filePath.value !== requestedFilePath) return;
+		pdfGenerating.value = false;
+		if (!response.ok) {
+			alert(response.error);
+			return;
+		}
+		pdfPath.value = response.data.pdfPath;
+	}
+	async function refreshMoviePath() {
+		const requestedFilePath = filePath.value;
+		if (!requestedFilePath) return;
+		const response = await api.call("movieStatus", { filePath: requestedFilePath });
+		if (filePath.value !== requestedFilePath) return;
+		if (response.ok && response.data.moviePath) moviePath.value = response.data.moviePath;
+	}
+	async function refreshPdfPath() {
+		const requestedFilePath = filePath.value;
+		if (!requestedFilePath) return;
+		const response = await api.call("pdfStatus", { filePath: requestedFilePath });
+		if (filePath.value !== requestedFilePath) return;
+		if (response.ok && response.data.pdfPath) pdfPath.value = response.data.pdfPath;
+	}
+	async function downloadMedia(kind, sourcePath, fallbackName, downloading) {
+		const fetchMediaBlob = adapter.fetchMediaBlob;
+		if (!fetchMediaBlob || !sourcePath || downloading.value) return;
+		downloading.value = true;
+		let objectUrl = null;
+		try {
+			const blob = await fetchMediaBlob(kind === "movie" ? { moviePath: sourcePath } : { pdfPath: sourcePath });
+			objectUrl = URL.createObjectURL(blob);
+			clickDownloadAnchor(objectUrl, downloadFilename(sourcePath, fallbackName));
+		} catch (err) {
+			alert(errorMessage(err));
+		} finally {
+			if (objectUrl) URL.revokeObjectURL(objectUrl);
+			downloading.value = false;
+		}
+	}
+	function downloadMovie() {
+		return downloadMedia("movie", moviePath.value, "movie.mp4", movieDownloading);
+	}
+	function downloadPdf() {
+		return downloadMedia("pdf", pdfPath.value, "deck.pdf", pdfDownloading);
+	}
+	function resetMedia() {
+		moviePath.value = null;
+		pdfPath.value = null;
+		movieGenerating.value = false;
+		pdfGenerating.value = false;
+		movieError.value = null;
+	}
+	return {
+		moviePath,
+		movieGenerating,
+		movieDownloading,
+		movieError,
+		pdfPath,
+		pdfGenerating,
+		pdfDownloading,
+		generateMovie,
+		downloadMovie,
+		refreshMoviePath,
+		generatePdf,
+		downloadPdf,
+		refreshPdfPath,
+		resetMedia
+	};
+}
+function clickDownloadAnchor(href, filename) {
+	const anchor = document.createElement("a");
+	anchor.href = href;
+	anchor.download = filename;
+	document.body.appendChild(anchor);
+	anchor.click();
+	anchor.remove();
+}
+//#endregion
+//#region src/vue/composables/useBeatMovie.ts
+function useBeatMovie({ api, adapter, filePath }) {
+	const beatMovies = reactive({});
+	const beatMovieUrls = reactive({});
+	const beatMovieOpen = reactive({});
+	const beatMovieLoading = reactive({});
+	const staleSince$3 = (requestedFilePath) => staleSince(filePath.value, requestedFilePath);
+	async function loadExistingBeatMovie(index) {
+		const requestedFilePath = filePath.value;
+		const response = await api.call("beatMovie", {
+			filePath: requestedFilePath,
+			beatIndex: index
+		});
+		if (staleSince$3(requestedFilePath)) return;
+		if (response.ok && response.data.moviePath) beatMovies[index] = response.data.moviePath;
+	}
+	async function playBeatMovie(index) {
+		const fetchMediaBlob = adapter.fetchMediaBlob;
+		if (!fetchMediaBlob || !beatMovies[index] || beatMovieLoading[index]) return;
+		if (beatMovieUrls[index]) {
+			beatMovieOpen[index] = true;
+			return;
+		}
+		beatMovieLoading[index] = true;
+		try {
+			const blob = new Blob([await fetchMediaBlob({ moviePath: beatMovies[index] })], { type: "video/mp4" });
+			beatMovieUrls[index] = URL.createObjectURL(blob);
+			beatMovieOpen[index] = true;
+		} catch (err) {
+			alert(errorMessage(err));
+		} finally {
+			Reflect.deleteProperty(beatMovieLoading, index);
+		}
+	}
+	function closeBeatMovie(index) {
+		Reflect.deleteProperty(beatMovieOpen, index);
+	}
+	function invalidateBeatMovie(index) {
+		if (beatMovieUrls[index]) URL.revokeObjectURL(beatMovieUrls[index]);
+		[
+			beatMovies,
+			beatMovieUrls,
+			beatMovieOpen
+		].forEach((map) => Reflect.deleteProperty(map, index));
+	}
+	function resetBeatMovies() {
+		Object.values(beatMovieUrls).forEach((url) => URL.revokeObjectURL(url));
+		clearReactiveRecords(beatMovies, beatMovieUrls, beatMovieOpen, beatMovieLoading);
+	}
+	return {
+		beatMovies,
+		beatMovieUrls,
+		beatMovieOpen,
+		beatMovieLoading,
+		loadExistingBeatMovie,
+		playBeatMovie,
+		closeBeatMovie,
+		invalidateBeatMovie,
+		resetBeatMovies
+	};
+}
+//#endregion
+//#region src/vue/composables/useCharacterImages.ts
+function useCharacterImages({ api, filePath, chatSessionId, getImages }) {
+	const charRenderState = reactive({});
+	const charImages = reactive({});
+	const charErrors = reactive({});
+	const charDragOver = reactive({});
+	const staleSince$2 = (requestedFilePath) => staleSince(filePath.value, requestedFilePath);
+	const characterKeys = computed(() => {
+		const imgs = getImages() ?? {};
+		return Object.keys(imgs).filter((key) => imgs[key]?.type === "imagePrompt");
+	});
+	function characterPrompt$1(key) {
+		return characterPrompt(getImages(), key);
+	}
+	function onCharDragOver(event, key) {
+		if (!event.dataTransfer?.types.includes("Files")) return;
+		event.preventDefault();
+		charDragOver[key] = true;
+	}
+	function onCharDragLeave(key) {
+		charDragOver[key] = false;
+	}
+	async function onCharDrop(event, key) {
+		event.preventDefault();
+		charDragOver[key] = false;
+		const file = event.dataTransfer?.files[0];
+		if (!file || !file.type.startsWith("image/")) return;
+		charRenderState[key] = "rendering";
+		Reflect.deleteProperty(charErrors, key);
+		let imageData;
+		try {
+			imageData = await readFileAsDataUrl(file);
+		} catch (err) {
+			charErrors[key] = errorMessage(err);
+			charRenderState[key] = "error";
+			return;
+		}
+		const requestedFilePath = filePath.value;
+		const response = await api.call("uploadCharacterImage", {
+			filePath: requestedFilePath,
+			key,
+			imageData
+		});
+		if (staleSince$2(requestedFilePath)) return;
+		if (!response.ok) {
+			charErrors[key] = response.error || "Upload failed";
+			charRenderState[key] = "error";
+			return;
+		}
+		charImages[key] = response.data.image ?? "";
+		charRenderState[key] = "done";
+	}
+	async function loadExistingCharacterImage(key) {
+		const requestedFilePath = filePath.value;
+		const response = await api.call("characterImage", {
+			filePath: requestedFilePath,
+			key
+		});
+		if (staleSince$2(requestedFilePath)) return;
+		if (response.ok && response.data.image) {
+			charImages[key] = response.data.image;
+			charRenderState[key] = "done";
+		}
+	}
+	function refreshMissingCharacterImages() {
+		getMissingCharacterKeys(characterKeys.value, charImages, charRenderState).forEach((key) => loadExistingCharacterImage(key));
+	}
+	async function renderCharacter(key, force) {
+		const requestedFilePath = filePath.value;
+		charRenderState[key] = "rendering";
+		Reflect.deleteProperty(charErrors, key);
+		const response = await api.call("renderCharacter", {
+			filePath: requestedFilePath,
+			key,
+			force,
+			chatSessionId: chatSessionId.value
+		});
+		if (staleSince$2(requestedFilePath)) return;
+		if (!response.ok) {
+			charErrors[key] = response.error || "Render failed";
+			charRenderState[key] = "error";
+			return;
+		}
+		charImages[key] = response.data.image ?? "";
+		charRenderState[key] = "done";
+	}
+	async function generateAllCharacters() {
+		await Promise.all(characterKeys.value.filter((key) => charRenderState[key] !== "rendering").map((key) => renderCharacter(key, false)));
+	}
+	function resetCharacters() {
+		clearReactiveRecords(charRenderState, charImages, charErrors, charDragOver);
+	}
+	return {
+		charRenderState,
+		charImages,
+		charErrors,
+		charDragOver,
+		characterKeys,
+		characterPrompt: characterPrompt$1,
+		onCharDragOver,
+		onCharDragLeave,
+		onCharDrop,
+		loadExistingCharacterImage,
+		refreshMissingCharacterImages,
+		renderCharacter,
+		generateAllCharacters,
+		resetCharacters
+	};
+}
+//#endregion
+//#region src/vue/composables/useDeckEditor.ts
+var DECK_SAVE_DEBOUNCE_MS = 300;
+function useDeckEditor({ api, filePath, effectiveScript, commitScript }) {
+	const isDeck = computed(() => isAllSlideDeck(effectiveScript.value));
+	const deckScriptInput = computed(() => effectiveScript.value);
+	let deckSaveTimer = null;
+	let pendingDeckScript = null;
+	function scheduleDeckSave(next) {
+		pendingDeckScript = next;
+		if (deckSaveTimer) clearTimeout(deckSaveTimer);
+		deckSaveTimer = setTimeout(() => {
+			flushDeckSave();
+		}, DECK_SAVE_DEBOUNCE_MS);
+	}
+	async function flushDeckSave() {
+		deckSaveTimer = null;
+		const next = pendingDeckScript;
+		pendingDeckScript = null;
+		if (!next || !filePath.value) return;
+		const response = await api.call("updateScript", {
+			filePath: filePath.value,
+			script: next
+		});
+		if (!response.ok) {
+			console.error("[presentMulmoScript] deck save failed:", response.error);
+			return;
+		}
+		commitScript(next);
+	}
+	function onDeckUpdate(next) {
+		scheduleDeckSave(next);
+	}
+	function flushPendingDeckSave() {
+		if (deckSaveTimer) {
+			clearTimeout(deckSaveTimer);
+			flushDeckSave();
+		}
+	}
+	return {
+		isDeck,
+		deckScriptInput,
+		onDeckUpdate,
+		flushPendingDeckSave
+	};
+}
+/** Reactive message bundle for the active host locale. The plugin carries its
+*  own translations (no host i18n dependency); it reads the locale off the
+*  injected `BrowserPluginRuntime.locale` ref and falls back to English.
+*  Same pattern as @mulmoclaude/html-plugin. */
+var useT = createUseT({
 	de: {
 		beatCount: (count) => count === 1 ? `${count} Beat` : `${count} Beats`,
 		movie: "Video",
@@ -443,267 +854,519 @@ var MESSAGES = {
 		close: "关闭",
 		cancel: "取消"
 	}
-};
-function isSupportedLocale(value) {
-	return Object.hasOwn(MESSAGES, value);
-}
-/** Reactive message bundle for the active host locale. The plugin carries its
-*  own translations (no host i18n dependency); it reads the locale off the
-*  injected `BrowserPluginRuntime.locale` ref and falls back to English.
-*  Same pattern as @mulmoclaude/html-plugin. */
-function useT() {
-	const locale = inject(PLUGIN_RUNTIME_KEY, void 0)?.locale ?? ref("en");
-	return computed(() => isSupportedLocale(locale.value) ? MESSAGES[locale.value] : MESSAGES.en);
-}
+});
 //#endregion
-//#region src/vue/View.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = { class: "h-full bg-white flex flex-col overflow-hidden" };
-var _hoisted_2$1 = { class: "flex items-start justify-between px-6 py-4 border-b border-gray-100 shrink-0" };
-var _hoisted_3$1 = { class: "min-w-0 flex-1" };
-var _hoisted_4 = {
-	class: "text-lg font-semibold text-gray-800 truncate",
-	"data-testid": "mulmo-script-title"
-};
-var _hoisted_5 = {
+//#region src/vue/components/BeatLightbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = ["title"];
+var _hoisted_2$4 = { class: "flex items-center gap-4" };
+var _hoisted_3$4 = ["disabled"];
+var _hoisted_4$3 = { class: "flex flex-col items-center" };
+var _hoisted_5$3 = ["src"];
+var _hoisted_6$3 = {
 	key: 0,
-	class: "text-sm text-gray-500 mt-0.5 truncate",
-	"data-testid": "mulmo-script-description"
-};
-var _hoisted_6 = { class: "flex items-center gap-3 mt-1 text-xs text-gray-400" };
-var _hoisted_7 = { key: 0 };
-var _hoisted_8 = {
-	key: 1,
-	class: "truncate"
+	class: "relative w-full h-1"
 };
-var _hoisted_9 = { class: "ml-4 shrink-0 flex items-center gap-2" };
-var _hoisted_10 = [
-	"disabled",
-	"title",
-	"aria-label"
-];
-var _hoisted_11 = ["disabled"];
-var _hoisted_12 = ["title", "aria-label"];
-var _hoisted_13 = ["disabled"];
-var _hoisted_14 = {
+var _hoisted_7$3 = { class: "flex gap-1 h-full" };
+var _hoisted_8$3 = ["onClick"];
+var _hoisted_9$3 = {
 	key: 0,
-	class: "animate-spin w-4 h-4 shrink-0",
-	viewBox: "0 0 24 24",
-	fill: "none"
+	class: "absolute bottom-full mb-2 left-1/2 -translate-x-1/2 z-20 px-2 py-1 rounded bg-black/90 text-white text-xs leading-tight w-48 max-h-[53px] overflow-hidden opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity"
 };
-var _hoisted_15 = { key: 1 };
-var _hoisted_16 = ["disabled"];
-var _hoisted_17 = ["title", "aria-label"];
-var _hoisted_18 = ["disabled"];
-var _hoisted_19 = {
+var _hoisted_10$3 = ["disabled"];
+var _hoisted_11$3 = {
 	key: 0,
-	class: "animate-spin w-4 h-4 shrink-0",
-	viewBox: "0 0 24 24",
-	fill: "none"
+	class: "relative w-screen flex justify-center px-16"
 };
-var _hoisted_20 = { key: 1 };
-var _hoisted_21 = {
+var _hoisted_12$3 = {
 	key: 0,
-	"data-testid": "mulmo-script-movie-error-chip",
-	class: "bg-red-50 border border-red-200 text-red-800 text-xs px-3 py-2 mx-4 mt-3 mb-1 rounded flex items-start gap-2"
-};
-var _hoisted_22 = { class: "flex-1 min-w-0" };
-var _hoisted_23 = { class: "font-medium" };
-var _hoisted_24 = { class: "break-words whitespace-pre-wrap mt-0.5" };
-var _hoisted_25 = ["disabled"];
-var _hoisted_26 = {
-	key: 1,
-	class: "border-b border-gray-100 shrink-0 px-4 py-3"
+	class: "max-w-[80vw] text-center text-white leading-relaxed text-[clamp(0.8rem,1.76vw,1.6rem)]"
 };
-var _hoisted_27 = { class: "flex items-center justify-between mb-2" };
-var _hoisted_28 = { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" };
-var _hoisted_29 = ["disabled"];
-var _hoisted_30 = { class: "flex gap-3 flex-wrap" };
-var _hoisted_31 = [
+//#endregion
+//#region src/vue/components/BeatLightbox.vue
+var BeatLightbox_default = /* @__PURE__ */ defineComponent({
+	__name: "BeatLightbox",
+	props: {
+		lightbox: {},
+		beatCount: {},
+		beatTexts: {},
+		hasPrev: { type: Boolean },
+		hasNext: { type: Boolean },
+		playingAudioIndex: {},
+		audioProgress: {},
+		hasCurrentAudio: { type: Boolean }
+	},
+	emits: [
+		"close",
+		"move",
+		"jump",
+		"playAudio"
+	],
+	setup(__props, { emit: __emit }) {
+		const m = useT();
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "fixed inset-0 z-50 bg-black/80 overflow-y-auto",
+				onClick: _cache[5] || (_cache[5] = ($event) => emit("close"))
+			}, [createElementVNode("button", {
+				class: "fixed top-2 right-4 z-10 text-white/60 hover:text-white text-3xl leading-none",
+				title: unref(m).close,
+				onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("close"), ["stop"]))
+			}, "✕", 8, _hoisted_1$4), createElementVNode("div", {
+				class: "flex flex-col items-center gap-4 pt-4 pb-8",
+				onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+			}, [createElementVNode("div", _hoisted_2$4, [
+				!__props.lightbox.isCharacter ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "text-white/60 hover:text-white disabled:opacity-20 text-5xl leading-none",
+					disabled: !__props.hasPrev,
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("move", -1))
+				}, " ‹ ", 8, _hoisted_3$4)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4$3, [createElementVNode("img", {
+					src: __props.lightbox.src,
+					class: "max-w-[80vw] max-h-[85vh] object-contain rounded shadow-2xl"
+				}, null, 8, _hoisted_5$3), !__props.lightbox.isCharacter && __props.beatCount > 1 ? (openBlock(), createElementBlock("div", _hoisted_6$3, [createElementVNode("div", _hoisted_7$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.beatCount, (i) => {
+					return openBlock(), createElementBlock("div", {
+						key: i - 1,
+						class: normalizeClass(["group flex-1 cursor-pointer relative transition-colors", i - 1 === __props.lightbox.index ? "bg-white/80 hover:bg-white" : i - 1 < __props.lightbox.index ? "bg-white/40 hover:bg-white/60" : "bg-white/20 hover:bg-white/40"]),
+						onClick: ($event) => emit("jump", i - 1)
+					}, [_cache[6] || (_cache[6] = createElementVNode("span", { class: "absolute -inset-y-3 inset-x-0" }, null, -1)), unref(beatTooltip)(__props.beatTexts[i - 1]) ? (openBlock(), createElementBlock("div", _hoisted_9$3, toDisplayString(unref(beatTooltip)(__props.beatTexts[i - 1])), 1)) : createCommentVNode("", true)], 10, _hoisted_8$3);
+				}), 128))]), __props.playingAudioIndex !== null && __props.playingAudioIndex === __props.lightbox.index ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "absolute top-1/2 w-3.5 h-3.5 rounded-full bg-white shadow ring-2 ring-black/30 -translate-y-1/2 -translate-x-1/2 pointer-events-none",
+					style: normalizeStyle({ left: `${(__props.lightbox.index + __props.audioProgress) / __props.beatCount * 100}%` })
+				}, null, 4)) : createCommentVNode("", true)])) : createCommentVNode("", true)]),
+				!__props.lightbox.isCharacter ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					class: "text-white/60 hover:text-white disabled:opacity-20 text-5xl leading-none",
+					disabled: !__props.hasNext,
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("move", 1))
+				}, " › ", 8, _hoisted_10$3)) : createCommentVNode("", true)
+			]), __props.lightbox.text || __props.hasCurrentAudio ? (openBlock(), createElementBlock("div", _hoisted_11$3, [__props.lightbox.text ? (openBlock(), createElementBlock("p", _hoisted_12$3, toDisplayString(__props.lightbox.text), 1)) : createCommentVNode("", true), __props.hasCurrentAudio ? (openBlock(), createElementBlock("button", {
+				key: 1,
+				class: "absolute top-0 right-4 text-sm px-3 py-1 rounded border border-white/60 text-white/60 hover:bg-white/20",
+				onClick: _cache[3] || (_cache[3] = ($event) => emit("playAudio", __props.lightbox.index))
+			}, toDisplayString(__props.playingAudioIndex === __props.lightbox.index ? unref(m).stop : unref(m).play), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true)])]);
+		};
+	}
+});
+//#endregion
+//#region src/vue/components/CharacterStrip.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = { class: "border-b border-gray-100 shrink-0 px-4 py-3" };
+var _hoisted_2$3 = { class: "flex items-center justify-between mb-2" };
+var _hoisted_3$3 = { class: "text-xs font-semibold text-gray-500 uppercase tracking-wide" };
+var _hoisted_4$2 = ["disabled"];
+var _hoisted_5$2 = { class: "flex gap-3 flex-wrap" };
+var _hoisted_6$2 = [
 	"onDragover",
 	"onDragleave",
 	"onDrop"
 ];
-var _hoisted_32 = [
+var _hoisted_7$2 = [
 	"src",
 	"alt",
 	"onClick"
 ];
-var _hoisted_33 = {
+var _hoisted_8$2 = {
 	key: 1,
 	class: "animate-spin w-4 h-4 text-green-400",
 	viewBox: "0 0 24 24",
 	fill: "none"
 };
-var _hoisted_34 = {
+var _hoisted_9$2 = {
 	key: 2,
 	class: "text-xs text-red-400 text-center px-1"
 };
-var _hoisted_35 = {
+var _hoisted_10$2 = {
 	key: 3,
 	class: "text-xs text-gray-300 text-center px-1 leading-tight"
 };
-var _hoisted_36 = {
+var _hoisted_11$2 = {
 	key: 4,
 	class: "absolute bottom-0 inset-x-0 text-center text-xs text-gray-400 bg-white/70 py-0.5 pointer-events-none"
 };
-var _hoisted_37 = {
+var _hoisted_12$2 = {
 	key: 5,
 	class: "absolute inset-0 flex items-center justify-center bg-blue-50/80 pointer-events-none"
 };
-var _hoisted_38 = { class: "text-xs text-blue-500 font-medium" };
-var _hoisted_39 = ["disabled", "onClick"];
-var _hoisted_40 = {
+var _hoisted_13$1 = { class: "text-xs text-blue-500 font-medium" };
+var _hoisted_14$1 = ["disabled", "onClick"];
+var _hoisted_15$1 = {
 	key: 0,
 	class: "inline-block animate-spin"
 };
-var _hoisted_41 = { key: 1 };
-var _hoisted_42 = ["disabled", "onClick"];
-var _hoisted_43 = {
+var _hoisted_16$1 = { key: 1 };
+var _hoisted_17$1 = ["disabled", "onClick"];
+var _hoisted_18$1 = {
 	key: 0,
 	class: "animate-spin w-3 h-3",
 	viewBox: "0 0 24 24",
 	fill: "none"
 };
-var _hoisted_44 = { key: 1 };
-var _hoisted_45 = { class: "text-xs text-gray-600 text-center truncate w-full" };
-var _hoisted_46 = {
+var _hoisted_19$1 = { key: 1 };
+var _hoisted_20$1 = { class: "text-xs text-gray-600 text-center truncate w-full" };
+//#endregion
+//#region src/vue/components/CharacterStrip.vue
+var CharacterStrip_default = /* @__PURE__ */ defineComponent({
+	__name: "CharacterStrip",
+	props: {
+		characterKeys: {},
+		images: {},
+		thumbnails: {},
+		renderState: {},
+		errors: {},
+		dragOver: {},
+		movieGenerating: { type: Boolean },
+		anyBeatRendering: { type: Boolean }
+	},
+	emits: [
+		"generateAll",
+		"charDragOver",
+		"charDragLeave",
+		"charDrop",
+		"openLightbox",
+		"renderCharacter"
+	],
+	setup(__props, { emit: __emit }) {
+		const m = useT();
+		const props = __props;
+		const emit = __emit;
+		const busy = computed(() => props.movieGenerating || props.anyBeatRendering);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$3, [createElementVNode("div", _hoisted_2$3, [createElementVNode("span", _hoisted_3$3, toDisplayString(unref(m).characters), 1), createElementVNode("button", {
+				class: "px-2 py-0.5 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50",
+				disabled: busy.value || __props.characterKeys.every((key) => __props.renderState[key] === "rendering"),
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("generateAll"))
+			}, toDisplayString(unref(m).generateAll), 9, _hoisted_4$2)]), createElementVNode("div", _hoisted_5$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.characterKeys, (key) => {
+				return openBlock(), createElementBlock("div", {
+					key,
+					class: "flex flex-col items-center gap-1 w-36"
+				}, [createElementVNode("div", {
+					class: normalizeClass(["relative w-36 h-36 rounded-lg border overflow-hidden bg-gray-50 flex items-center justify-center transition-colors", __props.dragOver[key] ? "border-blue-400 bg-blue-50" : "border-gray-200"]),
+					onDragover: ($event) => emit("charDragOver", $event, key),
+					onDragleave: ($event) => emit("charDragLeave", key),
+					onDrop: ($event) => emit("charDrop", $event, key)
+				}, [
+					__props.thumbnails[key] ? (openBlock(), createElementBlock("img", {
+						key: 0,
+						src: __props.thumbnails[key],
+						class: "w-full h-full object-cover cursor-zoom-in",
+						alt: key,
+						onClick: ($event) => emit("openLightbox", key)
+					}, null, 8, _hoisted_7$2)) : __props.renderState[key] === "rendering" ? (openBlock(), createElementBlock("svg", _hoisted_8$2, [..._cache[1] || (_cache[1] = [createElementVNode("circle", {
+						class: "opacity-25",
+						cx: "12",
+						cy: "12",
+						r: "10",
+						stroke: "currentColor",
+						"stroke-width": "4"
+					}, null, -1), createElementVNode("path", {
+						class: "opacity-75",
+						fill: "currentColor",
+						d: "M4 12a8 8 0 018-8v8H4z"
+					}, null, -1)])])) : __props.renderState[key] === "error" ? (openBlock(), createElementBlock("span", _hoisted_9$2, toDisplayString(__props.errors[key]), 1)) : (openBlock(), createElementBlock("span", _hoisted_10$2, toDisplayString(unref(characterPrompt)(__props.images, key)), 1)),
+					!__props.dragOver[key] ? (openBlock(), createElementBlock("div", _hoisted_11$2, toDisplayString(unref(m).orDropImage), 1)) : createCommentVNode("", true),
+					__props.dragOver[key] ? (openBlock(), createElementBlock("div", _hoisted_12$2, [createElementVNode("span", _hoisted_13$1, toDisplayString(unref(m).drop), 1)])) : createCommentVNode("", true),
+					__props.thumbnails[key] && __props.renderState[key] !== "rendering" ? (openBlock(), createElementBlock("button", {
+						key: 6,
+						class: normalizeClass(["absolute top-0.5 right-0.5 px-1 py-0.5 text-xs rounded border bg-white", busy.value ? "border-yellow-400 text-yellow-500 cursor-not-allowed" : "border-gray-400 text-gray-600 hover:bg-gray-50"]),
+						disabled: busy.value,
+						onClick: withModifiers(($event) => emit("renderCharacter", key, true), ["stop"])
+					}, [busy.value ? (openBlock(), createElementBlock("span", _hoisted_15$1, "↺")) : (openBlock(), createElementBlock("span", _hoisted_16$1, "↺"))], 10, _hoisted_14$1)) : !__props.thumbnails[key] && __props.renderState[key] !== "rendering" ? (openBlock(), createElementBlock("button", {
+						key: 7,
+						class: normalizeClass(["absolute top-0.5 right-0.5 px-1 py-0.5 text-xs rounded border bg-white", busy.value ? "border-yellow-400 text-yellow-500 cursor-not-allowed" : "border-blue-400 text-blue-600 hover:bg-blue-50"]),
+						disabled: busy.value,
+						onClick: withModifiers(($event) => emit("renderCharacter", key, false), ["stop"])
+					}, [busy.value ? (openBlock(), createElementBlock("svg", _hoisted_18$1, [..._cache[2] || (_cache[2] = [createElementVNode("circle", {
+						class: "opacity-25",
+						cx: "12",
+						cy: "12",
+						r: "10",
+						stroke: "currentColor",
+						"stroke-width": "4"
+					}, null, -1), createElementVNode("path", {
+						class: "opacity-75",
+						fill: "currentColor",
+						d: "M4 12a8 8 0 018-8v8H4z"
+					}, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_19$1, toDisplayString(unref(m).gen), 1))], 10, _hoisted_17$1)) : createCommentVNode("", true)
+				], 42, _hoisted_6$2), createElementVNode("span", _hoisted_20$1, toDisplayString(key), 1)]);
+			}), 128))])]);
+		};
+	}
+});
+//#endregion
+//#region src/vue/components/MulmoScriptToolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "ml-4 shrink-0 flex items-center gap-2" };
+var _hoisted_2$2 = [
+	"disabled",
+	"title",
+	"aria-label"
+];
+var _hoisted_3$2 = ["disabled"];
+var _hoisted_4$1 = ["title", "aria-label"];
+var _hoisted_5$1 = ["disabled"];
+var _hoisted_6$1 = {
+	key: 0,
+	class: "animate-spin w-4 h-4 shrink-0",
+	viewBox: "0 0 24 24",
+	fill: "none"
+};
+var _hoisted_7$1 = { key: 1 };
+var _hoisted_8$1 = ["disabled"];
+var _hoisted_9$1 = ["title", "aria-label"];
+var _hoisted_10$1 = ["disabled"];
+var _hoisted_11$1 = {
+	key: 0,
+	class: "animate-spin w-4 h-4 shrink-0",
+	viewBox: "0 0 24 24",
+	fill: "none"
+};
+var _hoisted_12$1 = { key: 1 };
+//#endregion
+//#region src/vue/components/MulmoScriptToolbar.vue
+var MulmoScriptToolbar_default = /* @__PURE__ */ defineComponent({
+	__name: "MulmoScriptToolbar",
+	props: {
+		moviePath: {},
+		movieGenerating: { type: Boolean },
+		movieDownloading: { type: Boolean },
+		isPlayReady: { type: Boolean },
+		canFetchMedia: { type: Boolean },
+		pdfPath: {},
+		pdfGenerating: { type: Boolean },
+		pdfDownloading: { type: Boolean }
+	},
+	emits: [
+		"play",
+		"generateMovie",
+		"downloadMovie",
+		"generatePdf",
+		"downloadPdf"
+	],
+	setup(__props, { emit: __emit }) {
+		const m = useT();
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [
+				__props.moviePath && !__props.movieGenerating ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "h-8 w-8 flex items-center justify-center rounded border border-green-600 text-green-600 hover:bg-green-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+					disabled: !__props.isPlayReady,
+					title: unref(m).playPresentation,
+					"aria-label": unref(m).playPresentation,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("play"))
+				}, [..._cache[7] || (_cache[7] = [createElementVNode("span", { class: "material-icons text-base" }, "play_arrow", -1)])], 8, _hoisted_2$2)) : createCommentVNode("", true),
+				__props.moviePath && !__props.movieGenerating && __props.canFetchMedia ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					class: "h-8 px-2.5 flex items-center gap-1 rounded bg-green-600 hover:bg-green-700 text-white text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-colors",
+					disabled: __props.movieDownloading,
+					"data-testid": "mulmo-script-download-movie-button",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("downloadMovie"))
+				}, [_cache[8] || (_cache[8] = createElementVNode("span", { class: "material-icons text-base" }, "download", -1)), createElementVNode("span", null, toDisplayString(unref(m).movie), 1)], 8, _hoisted_3$2)) : createCommentVNode("", true),
+				__props.moviePath && !__props.movieGenerating ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					class: "h-8 w-8 flex items-center justify-center rounded border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors",
+					title: unref(m).regenerateMovie,
+					"aria-label": unref(m).regenerateMovie,
+					"data-testid": "mulmo-script-regenerate-movie-button",
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("generateMovie"))
+				}, [..._cache[9] || (_cache[9] = [createElementVNode("span", { class: "material-icons text-base" }, "refresh", -1)])], 8, _hoisted_4$1)) : (openBlock(), createElementBlock("button", {
+					key: 3,
+					class: "h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-200 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+					disabled: __props.movieGenerating,
+					"data-testid": "mulmo-script-generate-movie-button",
+					onClick: _cache[3] || (_cache[3] = ($event) => emit("generateMovie"))
+				}, [__props.movieGenerating ? (openBlock(), createElementBlock("svg", _hoisted_6$1, [..._cache[10] || (_cache[10] = [createElementVNode("circle", {
+					class: "opacity-25",
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					"stroke-width": "4"
+				}, null, -1), createElementVNode("path", {
+					class: "opacity-75",
+					fill: "currentColor",
+					d: "M4 12a8 8 0 018-8v8H4z"
+				}, null, -1)])])) : createCommentVNode("", true), __props.movieGenerating ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(unref(m).generating), 1)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [_cache[11] || (_cache[11] = createElementVNode("span", { class: "material-icons text-sm" }, "refresh", -1)), createElementVNode("span", null, toDisplayString(unref(m).movie), 1)], 64))], 8, _hoisted_5$1)),
+				__props.pdfPath && !__props.pdfGenerating && __props.canFetchMedia ? (openBlock(), createElementBlock("button", {
+					key: 4,
+					class: "h-8 px-2.5 flex items-center gap-1 rounded bg-red-600 hover:bg-red-700 text-white text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-colors",
+					disabled: __props.pdfDownloading,
+					"data-testid": "mulmo-script-download-pdf-button",
+					onClick: _cache[4] || (_cache[4] = ($event) => emit("downloadPdf"))
+				}, [_cache[12] || (_cache[12] = createElementVNode("span", { class: "material-icons text-base" }, "download", -1)), createElementVNode("span", null, toDisplayString(unref(m).pdf), 1)], 8, _hoisted_8$1)) : createCommentVNode("", true),
+				__props.pdfPath && !__props.pdfGenerating ? (openBlock(), createElementBlock("button", {
+					key: 5,
+					class: "h-8 w-8 flex items-center justify-center rounded border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors",
+					title: unref(m).regeneratePdf,
+					"aria-label": unref(m).regeneratePdf,
+					"data-testid": "mulmo-script-regenerate-pdf-button",
+					onClick: _cache[5] || (_cache[5] = ($event) => emit("generatePdf"))
+				}, [..._cache[13] || (_cache[13] = [createElementVNode("span", { class: "material-icons text-base" }, "refresh", -1)])], 8, _hoisted_9$1)) : (openBlock(), createElementBlock("button", {
+					key: 6,
+					class: "h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-200 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+					disabled: __props.pdfGenerating,
+					"data-testid": "mulmo-script-generate-pdf-button",
+					onClick: _cache[6] || (_cache[6] = ($event) => emit("generatePdf"))
+				}, [__props.pdfGenerating ? (openBlock(), createElementBlock("svg", _hoisted_11$1, [..._cache[14] || (_cache[14] = [createElementVNode("circle", {
+					class: "opacity-25",
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					"stroke-width": "4"
+				}, null, -1), createElementVNode("path", {
+					class: "opacity-75",
+					fill: "currentColor",
+					d: "M4 12a8 8 0 018-8v8H4z"
+				}, null, -1)])])) : createCommentVNode("", true), __props.pdfGenerating ? (openBlock(), createElementBlock("span", _hoisted_12$1, toDisplayString(unref(m).generatingPdf), 1)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [_cache[15] || (_cache[15] = createElementVNode("span", { class: "material-icons text-sm" }, "picture_as_pdf", -1)), createElementVNode("span", null, toDisplayString(unref(m).pdf), 1)], 64))], 8, _hoisted_10$1))
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/vue/View.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "h-full bg-white flex flex-col overflow-hidden" };
+var _hoisted_2$1 = { class: "flex items-start justify-between px-6 py-4 border-b border-gray-100 shrink-0" };
+var _hoisted_3$1 = { class: "min-w-0 flex-1" };
+var _hoisted_4 = {
+	class: "text-lg font-semibold text-gray-800 truncate",
+	"data-testid": "mulmo-script-title"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "text-sm text-gray-500 mt-0.5 truncate",
+	"data-testid": "mulmo-script-description"
+};
+var _hoisted_6 = { class: "flex items-center gap-3 mt-1 text-xs text-gray-400" };
+var _hoisted_7 = { key: 0 };
+var _hoisted_8 = {
+	key: 1,
+	class: "truncate"
+};
+var _hoisted_9 = {
+	key: 0,
+	"data-testid": "mulmo-script-movie-error-chip",
+	class: "bg-red-50 border border-red-200 text-red-800 text-xs px-3 py-2 mx-4 mt-3 mb-1 rounded flex items-start gap-2"
+};
+var _hoisted_10 = { class: "flex-1 min-w-0" };
+var _hoisted_11 = { class: "font-medium" };
+var _hoisted_12 = { class: "break-words whitespace-pre-wrap mt-0.5" };
+var _hoisted_13 = ["disabled"];
+var _hoisted_14 = {
 	key: 2,
 	class: "flex-1 overflow-hidden",
 	"data-testid": "mulmo-script-deck-editor"
 };
-var _hoisted_47 = { class: "flex gap-3 items-stretch" };
-var _hoisted_48 = [
+var _hoisted_15 = { class: "flex gap-3 items-stretch" };
+var _hoisted_16 = [
 	"onDragover",
 	"onDragleave",
 	"onDrop"
 ];
-var _hoisted_49 = ["src", "data-testid"];
-var _hoisted_50 = [
+var _hoisted_17 = ["data-testid"];
+var _hoisted_18 = ["src", "data-testid"];
+var _hoisted_19 = [
 	"title",
 	"aria-label",
 	"data-testid",
 	"onClick"
 ];
-var _hoisted_51 = [
+var _hoisted_20 = [
 	"src",
 	"alt",
 	"onClick"
 ];
-var _hoisted_52 = [
+var _hoisted_21 = [
 	"title",
 	"aria-label",
 	"data-testid",
 	"onClick"
 ];
-var _hoisted_53 = {
+var _hoisted_22 = {
 	key: 0,
 	class: "animate-spin w-5 h-5",
 	viewBox: "0 0 24 24",
 	fill: "none"
 };
-var _hoisted_54 = {
+var _hoisted_23 = {
 	key: 1,
 	class: "material-icons text-3xl"
 };
-var _hoisted_55 = ["disabled", "onClick"];
-var _hoisted_56 = {
+var _hoisted_24 = ["disabled", "onClick"];
+var _hoisted_25 = {
 	key: 3,
 	class: "w-full aspect-video flex flex-col items-center justify-center gap-1 p-2"
 };
-var _hoisted_57 = { class: "text-xs text-green-500" };
-var _hoisted_58 = {
+var _hoisted_26 = { class: "text-xs text-green-500" };
+var _hoisted_27 = {
 	key: 1,
 	class: "text-xs text-red-400 text-center"
 };
-var _hoisted_59 = {
+var _hoisted_28 = {
 	key: 0,
 	class: "text-xs text-gray-400 text-center italic leading-relaxed px-1"
 };
-var _hoisted_60 = {
+var _hoisted_29 = {
 	key: 1,
 	class: "text-xs text-gray-300"
 };
-var _hoisted_61 = {
+var _hoisted_30 = {
 	key: 2,
 	class: "absolute inset-0 flex items-center justify-center bg-blue-50/80 pointer-events-none"
 };
-var _hoisted_62 = { class: "text-xs text-blue-500 font-medium" };
-var _hoisted_63 = {
+var _hoisted_31 = { class: "text-xs text-blue-500 font-medium" };
+var _hoisted_32 = {
 	key: 3,
 	class: "absolute bottom-0 inset-x-0 text-center text-xs text-gray-400 bg-white/70 py-0.5 pointer-events-none"
 };
-var _hoisted_64 = ["onClick"];
-var _hoisted_65 = { class: "flex flex-col flex-1 min-w-0 px-2 py-1.5" };
-var _hoisted_66 = { class: "text-sm text-gray-800 leading-relaxed" };
-var _hoisted_67 = { class: "flex justify-between mt-auto pt-1" };
-var _hoisted_68 = { class: "flex items-center gap-1" };
-var _hoisted_69 = {
+var _hoisted_33 = ["onClick"];
+var _hoisted_34 = { class: "flex flex-col flex-1 min-w-0 px-2 py-1.5" };
+var _hoisted_35 = { class: "text-sm text-gray-800 leading-relaxed" };
+var _hoisted_36 = { class: "flex justify-between mt-auto pt-1" };
+var _hoisted_37 = { class: "flex items-center gap-1" };
+var _hoisted_38 = {
 	key: 0,
 	class: "animate-spin w-3 h-3 text-green-400",
 	viewBox: "0 0 24 24",
 	fill: "none"
 };
-var _hoisted_70 = ["onClick"];
-var _hoisted_71 = ["title"];
-var _hoisted_72 = ["disabled", "onClick"];
-var _hoisted_73 = ["onClick"];
-var _hoisted_74 = [
+var _hoisted_39 = ["onClick"];
+var _hoisted_40 = ["title"];
+var _hoisted_41 = ["disabled", "onClick"];
+var _hoisted_42 = ["onClick"];
+var _hoisted_43 = [
 	"title",
 	"data-testid",
 	"onClick"
 ];
-var _hoisted_75 = {
+var _hoisted_44 = {
 	key: 0,
 	class: "border-t border-gray-100"
 };
-var _hoisted_76 = ["onUpdate:modelValue", "data-testid"];
-var _hoisted_77 = { class: "flex items-center justify-end gap-2 px-2 pb-2" };
-var _hoisted_78 = {
+var _hoisted_45 = ["onUpdate:modelValue", "data-testid"];
+var _hoisted_46 = { class: "flex items-center justify-end gap-2 px-2 pb-2" };
+var _hoisted_47 = {
 	key: 0,
 	class: "text-xs text-red-600",
 	role: "alert"
 };
-var _hoisted_79 = [
+var _hoisted_48 = [
 	"disabled",
 	"data-testid",
 	"onClick"
 ];
-var _hoisted_80 = {
+var _hoisted_49 = {
 	key: 0,
 	class: "flex items-center justify-center h-32 text-gray-400 text-sm"
 };
-var _hoisted_81 = { class: "bottom-bar-wrapper" };
-var _hoisted_82 = { class: "editor-actions" };
-var _hoisted_83 = ["disabled"];
-var _hoisted_84 = ["title"];
-var _hoisted_85 = { class: "material-icons" };
-var _hoisted_86 = ["title"];
-var _hoisted_87 = { class: "flex items-center gap-4" };
-var _hoisted_88 = ["disabled"];
-var _hoisted_89 = { class: "flex flex-col items-center" };
-var _hoisted_90 = ["src"];
-var _hoisted_91 = {
-	key: 0,
-	class: "relative w-full h-1"
-};
-var _hoisted_92 = { class: "flex gap-1 h-full" };
-var _hoisted_93 = ["onClick"];
-var _hoisted_94 = {
-	key: 0,
-	class: "absolute bottom-full mb-2 left-1/2 -translate-x-1/2 z-20 px-2 py-1 rounded bg-black/90 text-white text-xs leading-tight w-48 max-h-[53px] overflow-hidden opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity"
-};
-var _hoisted_95 = ["disabled"];
-var _hoisted_96 = {
-	key: 0,
-	class: "relative w-screen flex justify-center px-16"
-};
-var _hoisted_97 = {
-	key: 0,
-	class: "max-w-[80vw] text-center text-white leading-relaxed text-[clamp(0.8rem,1.76vw,1.6rem)]"
-};
+var _hoisted_50 = { class: "bottom-bar-wrapper" };
+var _hoisted_51 = { class: "editor-actions" };
+var _hoisted_52 = ["disabled"];
+var _hoisted_53 = ["title"];
+var _hoisted_54 = { class: "material-icons" };
 var SILENT_BEAT_DEFAULT_SEC = 3;
 var MS_PER_SECOND = 1e3;
-var DECK_SAVE_DEBOUNCE_MS = 300;
 var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "View",
 	props: { selectedResult: {} },
@@ -728,39 +1391,34 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		const beatSaveErrors = reactive({});
 		const beatSaving = reactive({});
 		const localOverrides = reactive({});
-		const movieGenerating = ref(false);
-		const movieDownloading = ref(false);
-		const moviePath = ref(null);
-		const movieError = ref(null);
-		const pdfGenerating = ref(false);
-		const pdfDownloading = ref(false);
-		const pdfPath = ref(null);
 		const beatAudios = reactive({});
 		const audioState = reactive({});
 		const audioErrors = reactive({});
-		const beatMovies = reactive({});
-		const beatMovieUrls = reactive({});
-		const beatMovieOpen = reactive({});
-		const beatMovieLoading = reactive({});
 		const playingAudio = ref(null);
 		const silentPlaybackTimer = ref(null);
 		const audioProgress = ref(0);
 		const beatListEl = ref(null);
 		const lightbox = ref(null);
-		const charRenderState = reactive({});
-		const charImages = reactive({});
-		const charErrors = reactive({});
-		const charDragOver = reactive({});
 		const beatDragOver = reactive({});
 		const anyBeatRendering = computed(() => Object.values(renderState).some((state) => state === "rendering"));
-		const characterKeys = computed(() => {
-			const imgs = script.value.imageParams?.images ?? {};
-			return Object.keys(imgs).filter((key) => imgs[key]?.type === "imagePrompt");
-		});
 		const chatSessionId = computed(() => adapter.chatSessionId?.value);
-		function characterPrompt(key) {
-			return script.value.imageParams?.images?.[key]?.prompt ?? "";
-		}
+		const { moviePath, movieGenerating, movieDownloading, movieError, pdfPath, pdfGenerating, pdfDownloading, generateMovie, downloadMovie, refreshMoviePath, generatePdf, downloadPdf, refreshPdfPath, resetMedia } = useMediaExport({
+			api,
+			adapter,
+			filePath,
+			chatSessionId
+		});
+		const { beatMovies, beatMovieUrls, beatMovieOpen, beatMovieLoading, loadExistingBeatMovie, playBeatMovie, closeBeatMovie, invalidateBeatMovie, resetBeatMovies } = useBeatMovie({
+			api,
+			adapter,
+			filePath
+		});
+		const { charRenderState, charImages, charErrors, charDragOver, characterKeys, onCharDragOver, onCharDragLeave, onCharDrop, loadExistingCharacterImage, refreshMissingCharacterImages, renderCharacter, generateAllCharacters, resetCharacters } = useCharacterImages({
+			api,
+			filePath,
+			chatSessionId,
+			getImages: () => script.value.imageParams?.images
+		});
 		function stopPlayingAudio() {
 			stopAllPlayback();
 		}
@@ -768,7 +1426,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			stopPlayingAudio();
 			lightbox.value = {
 				src: renderedImages[index],
-				text: effectiveBeat(index).text,
+				text: effectiveBeat$1(index).text,
 				index
 			};
 		}
@@ -779,7 +1437,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		const isPlayReady = computed(() => {
 			if (beats.value.length === 0) return false;
 			if (!renderedImages[0]) return false;
-			if (effectiveBeat(0).text && !beatAudios[0]) return false;
+			if (effectiveBeat$1(0).text && !beatAudios[0]) return false;
 			return true;
 		});
 		function playPresentation() {
@@ -800,19 +1458,19 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		}
 		function playBeat(index) {
 			stopAllPlayback();
-			if (!Boolean(effectiveBeat(index).text)) {
+			if (!Boolean(effectiveBeat$1(index).text)) {
 				scheduleSilentAdvance(index);
 				return;
 			}
 			if (beatAudios[index]) playAudio(index);
 		}
 		function scheduleSilentAdvance(index) {
-			const raw = effectiveBeat(index).duration;
+			const seconds = resolveSilentAdvanceSeconds(effectiveBeat$1(index).duration, SILENT_BEAT_DEFAULT_SEC);
 			const timer = setTimeout(() => {
 				if (silentPlaybackTimer.value?.index !== index) return;
 				silentPlaybackTimer.value = null;
 				if (lightbox.value?.index === index) advanceFromBeat(index);
-			}, (typeof raw === "number" && Number.isFinite(raw) && raw > 0 ? raw : SILENT_BEAT_DEFAULT_SEC) * MS_PER_SECOND);
+			}, seconds * MS_PER_SECOND);
 			silentPlaybackTimer.value = {
 				index,
 				timer
@@ -834,6 +1492,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			for (let i = lightbox.value.index + 1; i < beats.value.length; i++) if (renderedImages[i]) return true;
 			return false;
 		});
+		const beatTexts = computed(() => beats.value.map((_, index) => effectiveBeat$1(index).text));
 		function jumpToBeat(index) {
 			if (!lightbox.value) return;
 			if (index === lightbox.value.index) return;
@@ -842,10 +1501,6 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			openLightbox(index);
 			if (wasPlaying) playBeat(index);
 		}
-		function beatTooltip(index) {
-			const text = effectiveBeat(index).text ?? "";
-			return text.length > 80 ? `${text.slice(0, 80)}…` : text;
-		}
 		function lightboxMove(delta) {
 			if (!lightbox.value) return;
 			const total = beats.value.length;
@@ -868,31 +1523,8 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			...script.value,
 			beats: beats.value.map((beat, i) => localOverrides[i] ?? beat)
 		}));
-		const scriptSourceText = computed(() => JSON.stringify(effectiveScript.value, null, 2));
-		const isDeck = computed(() => isAllSlideDeck(effectiveScript.value));
-		const deckScriptInput = computed(() => effectiveScript.value);
-		let deckSaveTimer = null;
-		let pendingDeckScript = null;
-		function scheduleDeckSave(next) {
-			pendingDeckScript = next;
-			if (deckSaveTimer) clearTimeout(deckSaveTimer);
-			deckSaveTimer = setTimeout(() => {
-				flushDeckSave();
-			}, DECK_SAVE_DEBOUNCE_MS);
-		}
-		async function flushDeckSave() {
-			deckSaveTimer = null;
-			const next = pendingDeckScript;
-			pendingDeckScript = null;
-			if (!next || !filePath.value) return;
-			const response = await api.call("updateScript", {
-				filePath: filePath.value,
-				script: next
-			});
-			if (!response.ok) {
-				console.error("[presentMulmoScript] deck save failed:", response.error);
-				return;
-			}
+		const scriptSourceText$1 = computed(() => scriptSourceText(effectiveScript.value));
+		function commitScript(next) {
 			emit("updateResult", {
 				...props.selectedResult,
 				data: {
@@ -901,14 +1533,14 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				}
 			});
 		}
-		function onDeckUpdate(next) {
-			scheduleDeckSave(next);
-		}
+		const { isDeck, deckScriptInput, onDeckUpdate, flushPendingDeckSave } = useDeckEditor({
+			api,
+			filePath,
+			effectiveScript,
+			commitScript
+		});
 		onBeforeUnmount(() => {
-			if (deckSaveTimer) {
-				clearTimeout(deckSaveTimer);
-				flushDeckSave();
-			}
+			flushPendingDeckSave();
 			resetBeatMovies();
 			unsubscribeGenerationEvents();
 		});
@@ -925,11 +1557,11 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		async function onSourceToggle(open) {
 			editing.value = open;
 			if (open) {
-				let text = scriptSourceText.value;
+				let text = scriptSourceText$1.value;
 				if (filePath.value) {
 					const response = await api.call("save", { filePath: filePath.value });
 					const diskScript = response.ok ? response.data.script : void 0;
-					if (diskScript) text = JSON.stringify(diskScript, null, 2);
+					if (diskScript) text = scriptSourceText(diskScript);
 				}
 				editableSource.value = text;
 				loadedSource.value = text;
@@ -954,31 +1586,25 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				alert(response.error || "Update failed");
 				return;
 			}
-			emit("updateResult", {
-				...props.selectedResult,
-				data: {
-					...props.selectedResult.data,
-					script: parsed
-				}
-			});
+			commitScript(parsed);
 			if (sourceDetails.value) sourceDetails.value.open = false;
 			await initializeScript();
 		}
 		async function copyText() {
-			await copy(scriptSourceText.value);
+			await copy(scriptSourceText$1.value);
 		}
-		function effectiveBeat(index) {
-			return localOverrides[index] ?? beats.value[index] ?? {};
+		function effectiveBeat$1(index) {
+			return effectiveBeat(localOverrides, beats.value, index);
 		}
 		function toggleSource(index) {
 			if (!sourceOpen[index]) {
-				sourceText[index] = JSON.stringify(effectiveBeat(index), null, 2);
+				sourceText[index] = scriptSourceText(effectiveBeat$1(index));
 				Reflect.deleteProperty(beatSaveErrors, index);
 			}
 			sourceOpen[index] = !sourceOpen[index];
 		}
-		function isValidBeat(index) {
-			return validateBeatJSON(sourceText[index] ?? "", mulmoBeatSchema);
+		function isValidBeat$1(index) {
+			return isValidBeat(sourceText[index], mulmoBeatSchema);
 		}
 		async function updateBeat(index) {
 			let beat;
@@ -991,8 +1617,8 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				};
 				return;
 			}
-			const prevImage = JSON.stringify(effectiveBeat(index).image);
-			const prevText = effectiveBeat(index).text;
+			const prevImage = JSON.stringify(effectiveBeat$1(index).image);
+			const prevText = effectiveBeat$1(index).text;
 			const requestedFilePath = filePath.value;
 			Reflect.deleteProperty(beatSaveErrors, index);
 			beatSaving[index] = true;
@@ -1001,7 +1627,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				beatIndex: index,
 				beat
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			Reflect.deleteProperty(beatSaving, index);
 			if (!response.ok) {
 				beatSaveErrors[index] = {
@@ -1032,7 +1658,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				beatIndex: index,
 				chatSessionId: chatSessionId.value
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			if (!response.ok) {
 				renderErrors[index] = response.error || "Render failed";
 				renderState[index] = "error";
@@ -1041,7 +1667,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			renderedImages[index] = response.data.image ?? "";
 			renderState[index] = "done";
 			refreshMissingCharacterImages();
-			if (beatMayHaveMovie(effectiveBeat(index))) loadExistingBeatMovie(index);
+			if (beatMayHaveMovie(effectiveBeat$1(index))) loadExistingBeatMovie(index);
 		}
 		async function regenerateBeat(index) {
 			const requestedFilePath = filePath.value;
@@ -1054,7 +1680,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				force: true,
 				chatSessionId: chatSessionId.value
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			if (!response.ok) {
 				renderErrors[index] = response.error || "Render failed";
 				renderState[index] = "error";
@@ -1062,10 +1688,10 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			}
 			renderedImages[index] = response.data.image ?? "";
 			renderState[index] = "done";
-			if (beatMayHaveMovie(effectiveBeat(index))) loadExistingBeatMovie(index);
+			if (beatMayHaveMovie(effectiveBeat$1(index))) loadExistingBeatMovie(index);
 		}
-		function staleSince(requestedFilePath) {
-			return filePath.value !== requestedFilePath;
+		function staleSince$1(requestedFilePath) {
+			return staleSince(filePath.value, requestedFilePath);
 		}
 		async function loadExistingBeatImage(index) {
 			const requestedFilePath = filePath.value;
@@ -1073,7 +1699,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				filePath: requestedFilePath,
 				beatIndex: index
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			if (response.ok && response.data.image) {
 				renderedImages[index] = response.data.image;
 				renderState[index] = "done";
@@ -1085,61 +1711,12 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				filePath: requestedFilePath,
 				beatIndex: index
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			if (response.ok && response.data.audio) {
 				beatAudios[index] = response.data.audio;
 				audioState[index] = "done";
 			}
 		}
-		async function loadExistingBeatMovie(index) {
-			const requestedFilePath = filePath.value;
-			const response = await api.call("beatMovie", {
-				filePath: requestedFilePath,
-				beatIndex: index
-			});
-			if (staleSince(requestedFilePath)) return;
-			if (response.ok && response.data.moviePath) beatMovies[index] = response.data.moviePath;
-		}
-		async function playBeatMovie(index) {
-			const fetchMediaBlob = adapter.fetchMediaBlob;
-			if (!fetchMediaBlob || !beatMovies[index] || beatMovieLoading[index]) return;
-			if (beatMovieUrls[index]) {
-				beatMovieOpen[index] = true;
-				return;
-			}
-			beatMovieLoading[index] = true;
-			try {
-				const blob = new Blob([await fetchMediaBlob({ moviePath: beatMovies[index] })], { type: "video/mp4" });
-				beatMovieUrls[index] = URL.createObjectURL(blob);
-				beatMovieOpen[index] = true;
-			} catch (err) {
-				alert(errorMessage(err));
-			} finally {
-				Reflect.deleteProperty(beatMovieLoading, index);
-			}
-		}
-		function closeBeatMovie(index) {
-			Reflect.deleteProperty(beatMovieOpen, index);
-		}
-		function invalidateBeatMovie(index) {
-			if (beatMovieUrls[index]) URL.revokeObjectURL(beatMovieUrls[index]);
-			[
-				beatMovies,
-				beatMovieUrls,
-				beatMovieOpen
-			].forEach((map) => Reflect.deleteProperty(map, index));
-		}
-		function resetBeatMovies() {
-			Object.values(beatMovieUrls).forEach((url) => URL.revokeObjectURL(url));
-			[
-				beatMovies,
-				beatMovieUrls,
-				beatMovieOpen,
-				beatMovieLoading
-			].forEach((map) => {
-				Object.keys(map).forEach((key) => Reflect.deleteProperty(map, key));
-			});
-		}
 		async function generateAudio(index) {
 			const requestedFilePath = filePath.value;
 			audioState[index] = "generating";
@@ -1149,7 +1726,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				beatIndex: index,
 				chatSessionId: chatSessionId.value
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			if (!response.ok) {
 				audioErrors[index] = response.error || "Audio generation failed";
 				audioState[index] = "error";
@@ -1202,12 +1779,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			Reflect.deleteProperty(renderErrors, index);
 			let imageData;
 			try {
-				imageData = await new Promise((resolve, reject) => {
-					const reader = new FileReader();
-					reader.onload = () => resolve(reader.result);
-					reader.onerror = reject;
-					reader.readAsDataURL(file);
-				});
+				imageData = await readFileAsDataUrl(file);
 			} catch (err) {
 				renderErrors[index] = errorMessage(err);
 				renderState[index] = "error";
@@ -1219,7 +1791,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				beatIndex: index,
 				imageData
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			if (!response.ok) {
 				renderErrors[index] = response.error || "Upload failed";
 				renderState[index] = "error";
@@ -1228,49 +1800,6 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			renderedImages[index] = response.data.image ?? "";
 			renderState[index] = "done";
 		}
-		function onCharDragOver(event, key) {
-			if (!event.dataTransfer?.types.includes("Files")) return;
-			event.preventDefault();
-			charDragOver[key] = true;
-		}
-		function onCharDragLeave(key) {
-			charDragOver[key] = false;
-		}
-		async function onCharDrop(event, key) {
-			event.preventDefault();
-			charDragOver[key] = false;
-			const file = event.dataTransfer?.files[0];
-			if (!file || !file.type.startsWith("image/")) return;
-			charRenderState[key] = "rendering";
-			Reflect.deleteProperty(charErrors, key);
-			let imageData;
-			try {
-				imageData = await new Promise((resolve, reject) => {
-					const reader = new FileReader();
-					reader.onload = () => resolve(reader.result);
-					reader.onerror = reject;
-					reader.readAsDataURL(file);
-				});
-			} catch (err) {
-				charErrors[key] = errorMessage(err);
-				charRenderState[key] = "error";
-				return;
-			}
-			const requestedFilePath = filePath.value;
-			const response = await api.call("uploadCharacterImage", {
-				filePath: requestedFilePath,
-				key,
-				imageData
-			});
-			if (staleSince(requestedFilePath)) return;
-			if (!response.ok) {
-				charErrors[key] = response.error || "Upload failed";
-				charRenderState[key] = "error";
-				return;
-			}
-			charImages[key] = response.data.image ?? "";
-			charRenderState[key] = "done";
-		}
 		function openCharacterLightbox(key) {
 			stopAllPlayback();
 			lightbox.value = {
@@ -1280,43 +1809,6 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				isCharacter: true
 			};
 		}
-		async function loadExistingCharacterImage(key) {
-			const requestedFilePath = filePath.value;
-			const response = await api.call("characterImage", {
-				filePath: requestedFilePath,
-				key
-			});
-			if (staleSince(requestedFilePath)) return;
-			if (response.ok && response.data.image) {
-				charImages[key] = response.data.image;
-				charRenderState[key] = "done";
-			}
-		}
-		function refreshMissingCharacterImages() {
-			getMissingCharacterKeys(characterKeys.value, charImages, charRenderState).forEach((key) => loadExistingCharacterImage(key));
-		}
-		async function renderCharacter(key, force) {
-			const requestedFilePath = filePath.value;
-			charRenderState[key] = "rendering";
-			Reflect.deleteProperty(charErrors, key);
-			const response = await api.call("renderCharacter", {
-				filePath: requestedFilePath,
-				key,
-				force,
-				chatSessionId: chatSessionId.value
-			});
-			if (staleSince(requestedFilePath)) return;
-			if (!response.ok) {
-				charErrors[key] = response.error || "Render failed";
-				charRenderState[key] = "error";
-				return;
-			}
-			charImages[key] = response.data.image ?? "";
-			charRenderState[key] = "done";
-		}
-		async function generateAllCharacters() {
-			await Promise.all(characterKeys.value.filter((key) => charRenderState[key] !== "rendering").map((key) => renderCharacter(key, false)));
-		}
 		async function hydrateBeatImage(beat, index, hasCharacters, autoRenderTypes) {
 			await loadExistingBeatImage(index);
 			if (renderedImages[index]) return;
@@ -1358,39 +1850,16 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			const diskScript = response.data.script;
 			if (!diskScript) return;
 			if (isSameScript(diskScript, script.value)) return;
-			emit("updateResult", {
-				...props.selectedResult,
-				data: {
-					...props.selectedResult.data,
-					script: diskScript
-				}
-			});
+			commitScript(diskScript);
 		}
 		async function initializeScript() {
 			stopAllPlayback();
 			lightbox.value = null;
 			if (beatListEl.value) beatListEl.value.scrollTop = 0;
-			Object.keys(renderState).forEach((key) => Reflect.deleteProperty(renderState, key));
-			Object.keys(renderedImages).forEach((key) => Reflect.deleteProperty(renderedImages, key));
-			Object.keys(renderErrors).forEach((key) => Reflect.deleteProperty(renderErrors, key));
-			Object.keys(sourceOpen).forEach((key) => Reflect.deleteProperty(sourceOpen, key));
-			Object.keys(sourceText).forEach((key) => Reflect.deleteProperty(sourceText, key));
-			Object.keys(beatSaveErrors).forEach((key) => Reflect.deleteProperty(beatSaveErrors, key));
-			Object.keys(beatSaving).forEach((key) => Reflect.deleteProperty(beatSaving, key));
-			Object.keys(localOverrides).forEach((key) => Reflect.deleteProperty(localOverrides, key));
-			Object.keys(beatAudios).forEach((key) => Reflect.deleteProperty(beatAudios, key));
-			Object.keys(audioState).forEach((key) => Reflect.deleteProperty(audioState, key));
-			Object.keys(audioErrors).forEach((key) => Reflect.deleteProperty(audioErrors, key));
-			Object.keys(charRenderState).forEach((key) => Reflect.deleteProperty(charRenderState, key));
-			Object.keys(charImages).forEach((key) => Reflect.deleteProperty(charImages, key));
-			Object.keys(charErrors).forEach((key) => Reflect.deleteProperty(charErrors, key));
-			Object.keys(beatDragOver).forEach((key) => Reflect.deleteProperty(beatDragOver, key));
+			clearReactiveRecords(renderState, renderedImages, renderErrors, sourceOpen, sourceText, beatSaveErrors, beatSaving, localOverrides, beatAudios, audioState, audioErrors, beatDragOver);
+			resetCharacters();
 			resetBeatMovies();
-			moviePath.value = null;
-			pdfPath.value = null;
-			movieGenerating.value = false;
-			pdfGenerating.value = false;
-			movieError.value = null;
+			resetMedia();
 			if (sourceDetails.value) sourceDetails.value.open = false;
 			await refreshScriptFromDisk();
 			const AUTO_RENDER_TYPES = [
@@ -1449,7 +1918,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			if (entry.kind === "beatImage") {
 				const idx = Number(entry.key);
 				await loadExistingBeatImage(idx);
-				if (beatMayHaveMovie(effectiveBeat(idx))) await loadExistingBeatMovie(idx);
+				if (beatMayHaveMovie(effectiveBeat$1(idx))) await loadExistingBeatMovie(idx);
 				if (renderState[idx] === "rendering") Reflect.deleteProperty(renderState, idx);
 				refreshMissingCharacterImages();
 			} else if (entry.kind === "beatAudio") {
@@ -1467,95 +1936,6 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				await refreshPdfPath();
 			}
 		}
-		async function refreshMoviePath() {
-			const requestedFilePath = filePath.value;
-			if (!requestedFilePath) return;
-			const response = await api.call("movieStatus", { filePath: requestedFilePath });
-			if (filePath.value !== requestedFilePath) return;
-			if (response.ok && response.data.moviePath) moviePath.value = response.data.moviePath;
-		}
-		async function generateMovie() {
-			const requestedFilePath = filePath.value;
-			movieGenerating.value = true;
-			movieError.value = null;
-			const response = await api.call("generateMovie", {
-				filePath: requestedFilePath,
-				chatSessionId: chatSessionId.value
-			});
-			if (filePath.value !== requestedFilePath) return;
-			movieGenerating.value = false;
-			if (!response.ok) {
-				movieError.value = response.error;
-				return;
-			}
-			moviePath.value = response.data.moviePath;
-		}
-		async function downloadMovie() {
-			const fetchMediaBlob = adapter.fetchMediaBlob;
-			if (!fetchMediaBlob || !moviePath.value || movieDownloading.value) return;
-			movieDownloading.value = true;
-			let objectUrl = null;
-			try {
-				const blob = await fetchMediaBlob({ moviePath: moviePath.value });
-				objectUrl = URL.createObjectURL(blob);
-				const filename = moviePath.value.split("/").pop() ?? "movie.mp4";
-				const anchor = document.createElement("a");
-				anchor.href = objectUrl;
-				anchor.download = filename;
-				document.body.appendChild(anchor);
-				anchor.click();
-				anchor.remove();
-			} catch (err) {
-				alert(errorMessage(err));
-			} finally {
-				if (objectUrl) URL.revokeObjectURL(objectUrl);
-				movieDownloading.value = false;
-			}
-		}
-		async function refreshPdfPath() {
-			const requestedFilePath = filePath.value;
-			if (!requestedFilePath) return;
-			const response = await api.call("pdfStatus", { filePath: requestedFilePath });
-			if (filePath.value !== requestedFilePath) return;
-			if (response.ok && response.data.pdfPath) pdfPath.value = response.data.pdfPath;
-		}
-		async function generatePdf() {
-			const requestedFilePath = filePath.value;
-			pdfGenerating.value = true;
-			const response = await api.call("generatePdf", {
-				filePath: requestedFilePath,
-				chatSessionId: chatSessionId.value
-			});
-			if (filePath.value !== requestedFilePath) return;
-			pdfGenerating.value = false;
-			if (!response.ok) {
-				alert(response.error);
-				return;
-			}
-			pdfPath.value = response.data.pdfPath;
-		}
-		async function downloadPdf() {
-			const fetchMediaBlob = adapter.fetchMediaBlob;
-			if (!fetchMediaBlob || !pdfPath.value || pdfDownloading.value) return;
-			pdfDownloading.value = true;
-			let objectUrl = null;
-			try {
-				const blob = await fetchMediaBlob({ pdfPath: pdfPath.value });
-				objectUrl = URL.createObjectURL(blob);
-				const filename = pdfPath.value.split("/").pop() ?? "deck.pdf";
-				const anchor = document.createElement("a");
-				anchor.href = objectUrl;
-				anchor.download = filename;
-				document.body.appendChild(anchor);
-				anchor.click();
-				anchor.remove();
-			} catch (err) {
-				alert(errorMessage(err));
-			} finally {
-				if (objectUrl) URL.revokeObjectURL(objectUrl);
-				pdfDownloading.value = false;
-			}
-		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$1, [
 				createElementVNode("div", _hoisted_2$1, [createElementVNode("div", _hoisted_3$1, [
@@ -1566,153 +1946,80 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 						script.value.lang ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(script.value.lang), 1)) : createCommentVNode("", true),
 						filePath.value ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(filePath.value), 1)) : createCommentVNode("", true)
 					])
-				]), createElementVNode("div", _hoisted_9, [
-					moviePath.value && !movieGenerating.value ? (openBlock(), createElementBlock("button", {
-						key: 0,
-						class: "h-8 w-8 flex items-center justify-center rounded border border-green-600 text-green-600 hover:bg-green-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
-						disabled: !isPlayReady.value,
-						title: unref(m).playPresentation,
-						"aria-label": unref(m).playPresentation,
-						onClick: playPresentation
-					}, [..._cache[6] || (_cache[6] = [createElementVNode("span", { class: "material-icons text-base" }, "play_arrow", -1)])], 8, _hoisted_10)) : createCommentVNode("", true),
-					moviePath.value && !movieGenerating.value && canFetchMedia.value ? (openBlock(), createElementBlock("button", {
-						key: 1,
-						class: "h-8 px-2.5 flex items-center gap-1 rounded bg-green-600 hover:bg-green-700 text-white text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-colors",
-						disabled: movieDownloading.value,
-						"data-testid": "mulmo-script-download-movie-button",
-						onClick: downloadMovie
-					}, [_cache[7] || (_cache[7] = createElementVNode("span", { class: "material-icons text-base" }, "download", -1)), createElementVNode("span", null, toDisplayString(unref(m).movie), 1)], 8, _hoisted_11)) : createCommentVNode("", true),
-					moviePath.value && !movieGenerating.value ? (openBlock(), createElementBlock("button", {
-						key: 2,
-						class: "h-8 w-8 flex items-center justify-center rounded border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors",
-						title: unref(m).regenerateMovie,
-						"aria-label": unref(m).regenerateMovie,
-						"data-testid": "mulmo-script-regenerate-movie-button",
-						onClick: generateMovie
-					}, [..._cache[8] || (_cache[8] = [createElementVNode("span", { class: "material-icons text-base" }, "refresh", -1)])], 8, _hoisted_12)) : (openBlock(), createElementBlock("button", {
-						key: 3,
-						class: "h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-200 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
-						disabled: movieGenerating.value,
-						"data-testid": "mulmo-script-generate-movie-button",
-						onClick: generateMovie
-					}, [movieGenerating.value ? (openBlock(), createElementBlock("svg", _hoisted_14, [..._cache[9] || (_cache[9] = [createElementVNode("circle", {
-						class: "opacity-25",
-						cx: "12",
-						cy: "12",
-						r: "10",
-						stroke: "currentColor",
-						"stroke-width": "4"
-					}, null, -1), createElementVNode("path", {
-						class: "opacity-75",
-						fill: "currentColor",
-						d: "M4 12a8 8 0 018-8v8H4z"
-					}, null, -1)])])) : createCommentVNode("", true), movieGenerating.value ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(unref(m).generating), 1)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [_cache[10] || (_cache[10] = createElementVNode("span", { class: "material-icons text-sm" }, "refresh", -1)), createElementVNode("span", null, toDisplayString(unref(m).movie), 1)], 64))], 8, _hoisted_13)),
-					pdfPath.value && !pdfGenerating.value && canFetchMedia.value ? (openBlock(), createElementBlock("button", {
-						key: 4,
-						class: "h-8 px-2.5 flex items-center gap-1 rounded bg-red-600 hover:bg-red-700 text-white text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-colors",
-						disabled: pdfDownloading.value,
-						"data-testid": "mulmo-script-download-pdf-button",
-						onClick: downloadPdf
-					}, [_cache[11] || (_cache[11] = createElementVNode("span", { class: "material-icons text-base" }, "download", -1)), createElementVNode("span", null, toDisplayString(unref(m).pdf), 1)], 8, _hoisted_16)) : createCommentVNode("", true),
-					pdfPath.value && !pdfGenerating.value ? (openBlock(), createElementBlock("button", {
-						key: 5,
-						class: "h-8 w-8 flex items-center justify-center rounded border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors",
-						title: unref(m).regeneratePdf,
-						"aria-label": unref(m).regeneratePdf,
-						"data-testid": "mulmo-script-regenerate-pdf-button",
-						onClick: generatePdf
-					}, [..._cache[12] || (_cache[12] = [createElementVNode("span", { class: "material-icons text-base" }, "refresh", -1)])], 8, _hoisted_17)) : (openBlock(), createElementBlock("button", {
-						key: 6,
-						class: "h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-200 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
-						disabled: pdfGenerating.value,
-						"data-testid": "mulmo-script-generate-pdf-button",
-						onClick: generatePdf
-					}, [pdfGenerating.value ? (openBlock(), createElementBlock("svg", _hoisted_19, [..._cache[13] || (_cache[13] = [createElementVNode("circle", {
-						class: "opacity-25",
-						cx: "12",
-						cy: "12",
-						r: "10",
-						stroke: "currentColor",
-						"stroke-width": "4"
-					}, null, -1), createElementVNode("path", {
-						class: "opacity-75",
-						fill: "currentColor",
-						d: "M4 12a8 8 0 018-8v8H4z"
-					}, null, -1)])])) : createCommentVNode("", true), pdfGenerating.value ? (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(unref(m).generatingPdf), 1)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [_cache[14] || (_cache[14] = createElementVNode("span", { class: "material-icons text-sm" }, "picture_as_pdf", -1)), createElementVNode("span", null, toDisplayString(unref(m).pdf), 1)], 64))], 8, _hoisted_18))
+				]), createVNode(MulmoScriptToolbar_default, {
+					"movie-path": unref(moviePath),
+					"movie-generating": unref(movieGenerating),
+					"movie-downloading": unref(movieDownloading),
+					"is-play-ready": isPlayReady.value,
+					"can-fetch-media": canFetchMedia.value,
+					"pdf-path": unref(pdfPath),
+					"pdf-generating": unref(pdfGenerating),
+					"pdf-downloading": unref(pdfDownloading),
+					onPlay: playPresentation,
+					onGenerateMovie: unref(generateMovie),
+					onDownloadMovie: unref(downloadMovie),
+					onGeneratePdf: unref(generatePdf),
+					onDownloadPdf: unref(downloadPdf)
+				}, null, 8, [
+					"movie-path",
+					"movie-generating",
+					"movie-downloading",
+					"is-play-ready",
+					"can-fetch-media",
+					"pdf-path",
+					"pdf-generating",
+					"pdf-downloading",
+					"onGenerateMovie",
+					"onDownloadMovie",
+					"onGeneratePdf",
+					"onDownloadPdf"
 				])]),
-				movieError.value ? (openBlock(), createElementBlock("div", _hoisted_21, [
-					_cache[15] || (_cache[15] = createElementVNode("span", { class: "material-icons text-base shrink-0 mt-px" }, "error_outline", -1)),
-					createElementVNode("div", _hoisted_22, [createElementVNode("div", _hoisted_23, toDisplayString(unref(m).movieGenerationFailed), 1), createElementVNode("div", _hoisted_24, toDisplayString(movieError.value), 1)]),
+				unref(movieError) ? (openBlock(), createElementBlock("div", _hoisted_9, [
+					_cache[3] || (_cache[3] = createElementVNode("span", { class: "material-icons text-base shrink-0 mt-px" }, "error_outline", -1)),
+					createElementVNode("div", _hoisted_10, [createElementVNode("div", _hoisted_11, toDisplayString(unref(m).movieGenerationFailed), 1), createElementVNode("div", _hoisted_12, toDisplayString(unref(movieError)), 1)]),
 					createElementVNode("button", {
 						class: "shrink-0 h-7 px-2 text-xs rounded border border-red-300 text-red-700 hover:bg-red-100 disabled:opacity-50",
-						disabled: movieGenerating.value,
+						disabled: unref(movieGenerating),
 						"data-testid": "mulmo-script-movie-retry-button",
-						onClick: generateMovie
-					}, toDisplayString(unref(m).retry), 9, _hoisted_25)
+						onClick: _cache[0] || (_cache[0] = (...args) => unref(generateMovie) && unref(generateMovie)(...args))
+					}, toDisplayString(unref(m).retry), 9, _hoisted_13)
 				])) : createCommentVNode("", true),
-				characterKeys.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_26, [createElementVNode("div", _hoisted_27, [createElementVNode("span", _hoisted_28, toDisplayString(unref(m).characters), 1), createElementVNode("button", {
-					class: "px-2 py-0.5 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50",
-					disabled: movieGenerating.value || anyBeatRendering.value || characterKeys.value.every((key) => charRenderState[key] === "rendering"),
-					onClick: generateAllCharacters
-				}, toDisplayString(unref(m).generateAll), 9, _hoisted_29)]), createElementVNode("div", _hoisted_30, [(openBlock(true), createElementBlock(Fragment, null, renderList(characterKeys.value, (key) => {
-					return openBlock(), createElementBlock("div", {
-						key,
-						class: "flex flex-col items-center gap-1 w-36"
-					}, [createElementVNode("div", {
-						class: normalizeClass(["relative w-36 h-36 rounded-lg border overflow-hidden bg-gray-50 flex items-center justify-center transition-colors", charDragOver[key] ? "border-blue-400 bg-blue-50" : "border-gray-200"]),
-						onDragover: ($event) => onCharDragOver($event, key),
-						onDragleave: ($event) => onCharDragLeave(key),
-						onDrop: ($event) => onCharDrop($event, key)
-					}, [
-						charImages[key] ? (openBlock(), createElementBlock("img", {
-							key: 0,
-							src: charImages[key],
-							class: "w-full h-full object-cover cursor-zoom-in",
-							alt: key,
-							onClick: ($event) => openCharacterLightbox(key)
-						}, null, 8, _hoisted_32)) : charRenderState[key] === "rendering" ? (openBlock(), createElementBlock("svg", _hoisted_33, [..._cache[16] || (_cache[16] = [createElementVNode("circle", {
-							class: "opacity-25",
-							cx: "12",
-							cy: "12",
-							r: "10",
-							stroke: "currentColor",
-							"stroke-width": "4"
-						}, null, -1), createElementVNode("path", {
-							class: "opacity-75",
-							fill: "currentColor",
-							d: "M4 12a8 8 0 018-8v8H4z"
-						}, null, -1)])])) : charRenderState[key] === "error" ? (openBlock(), createElementBlock("span", _hoisted_34, toDisplayString(charErrors[key]), 1)) : (openBlock(), createElementBlock("span", _hoisted_35, toDisplayString(characterPrompt(key)), 1)),
-						!charDragOver[key] ? (openBlock(), createElementBlock("div", _hoisted_36, toDisplayString(unref(m).orDropImage), 1)) : createCommentVNode("", true),
-						charDragOver[key] ? (openBlock(), createElementBlock("div", _hoisted_37, [createElementVNode("span", _hoisted_38, toDisplayString(unref(m).drop), 1)])) : createCommentVNode("", true),
-						charImages[key] && charRenderState[key] !== "rendering" ? (openBlock(), createElementBlock("button", {
-							key: 6,
-							class: normalizeClass(["absolute top-0.5 right-0.5 px-1 py-0.5 text-xs rounded border bg-white", movieGenerating.value || anyBeatRendering.value ? "border-yellow-400 text-yellow-500 cursor-not-allowed" : "border-gray-400 text-gray-600 hover:bg-gray-50"]),
-							disabled: movieGenerating.value || anyBeatRendering.value,
-							onClick: withModifiers(($event) => renderCharacter(key, true), ["stop"])
-						}, [movieGenerating.value || anyBeatRendering.value ? (openBlock(), createElementBlock("span", _hoisted_40, "↺")) : (openBlock(), createElementBlock("span", _hoisted_41, "↺"))], 10, _hoisted_39)) : !charImages[key] && charRenderState[key] !== "rendering" ? (openBlock(), createElementBlock("button", {
-							key: 7,
-							class: normalizeClass(["absolute top-0.5 right-0.5 px-1 py-0.5 text-xs rounded border bg-white", movieGenerating.value || anyBeatRendering.value ? "border-yellow-400 text-yellow-500 cursor-not-allowed" : "border-blue-400 text-blue-600 hover:bg-blue-50"]),
-							disabled: movieGenerating.value || anyBeatRendering.value,
-							onClick: withModifiers(($event) => renderCharacter(key, false), ["stop"])
-						}, [movieGenerating.value || anyBeatRendering.value ? (openBlock(), createElementBlock("svg", _hoisted_43, [..._cache[17] || (_cache[17] = [createElementVNode("circle", {
-							class: "opacity-25",
-							cx: "12",
-							cy: "12",
-							r: "10",
-							stroke: "currentColor",
-							"stroke-width": "4"
-						}, null, -1), createElementVNode("path", {
-							class: "opacity-75",
-							fill: "currentColor",
-							d: "M4 12a8 8 0 018-8v8H4z"
-						}, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_44, toDisplayString(unref(m).gen), 1))], 10, _hoisted_42)) : createCommentVNode("", true)
-					], 42, _hoisted_31), createElementVNode("span", _hoisted_45, toDisplayString(key), 1)]);
-				}), 128))])])) : createCommentVNode("", true),
-				isDeck.value ? (openBlock(), createElementBlock("div", _hoisted_46, [createVNode(unref(MulmoScriptDeckEditor), {
-					script: deckScriptInput.value,
+				unref(characterKeys).length > 0 ? (openBlock(), createBlock(CharacterStrip_default, {
+					key: 1,
+					"character-keys": unref(characterKeys),
+					images: script.value.imageParams?.images,
+					thumbnails: unref(charImages),
+					"render-state": unref(charRenderState),
+					errors: unref(charErrors),
+					"drag-over": unref(charDragOver),
+					"movie-generating": unref(movieGenerating),
+					"any-beat-rendering": anyBeatRendering.value,
+					onGenerateAll: unref(generateAllCharacters),
+					onCharDragOver: unref(onCharDragOver),
+					onCharDragLeave: unref(onCharDragLeave),
+					onCharDrop: unref(onCharDrop),
+					onOpenLightbox: openCharacterLightbox,
+					onRenderCharacter: unref(renderCharacter)
+				}, null, 8, [
+					"character-keys",
+					"images",
+					"thumbnails",
+					"render-state",
+					"errors",
+					"drag-over",
+					"movie-generating",
+					"any-beat-rendering",
+					"onGenerateAll",
+					"onCharDragOver",
+					"onCharDragLeave",
+					"onCharDrop",
+					"onRenderCharacter"
+				])) : createCommentVNode("", true),
+				unref(isDeck) ? (openBlock(), createElementBlock("div", _hoisted_14, [createVNode(unref(MulmoScriptDeckEditor), {
+					script: unref(deckScriptInput),
 					layout: "compact",
-					"onUpdate:script": onDeckUpdate
-				}, null, 8, ["script"])])) : (openBlock(), createElementBlock("div", {
+					"onUpdate:script": unref(onDeckUpdate)
+				}, null, 8, ["script", "onUpdate:script"])])) : (openBlock(), createElementBlock("div", {
 					key: 3,
 					ref_key: "beatListEl",
 					ref: beatListEl,
@@ -1721,40 +2028,44 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 					return openBlock(), createElementBlock("div", {
 						key: index,
 						class: "rounded-lg border border-gray-200 overflow-hidden"
-					}, [createElementVNode("div", _hoisted_47, [createElementVNode("div", {
+					}, [createElementVNode("div", _hoisted_15, [createElementVNode("div", {
 						class: normalizeClass(["relative shrink-0 w-[45%] overflow-hidden bg-gray-50 transition-colors", beatDragOver[index] ? "bg-blue-50" : ""]),
 						onDragover: ($event) => onBeatDragOver($event, index),
 						onDragleave: ($event) => onBeatDragLeave(index),
 						onDrop: ($event) => onBeatDrop($event, index)
 					}, [
-						beatMovieOpen[index] && beatMovieUrls[index] ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("video", {
-							src: beatMovieUrls[index],
+						createElementVNode("div", {
+							class: "absolute top-1.5 left-1.5 z-10 px-1.5 py-0.5 rounded bg-black/55 text-white text-xs font-medium leading-none pointer-events-none",
+							"data-testid": `mulmo-script-beat-number-${index}`
+						}, toDisplayString(index + 1), 9, _hoisted_17),
+						unref(beatMovieOpen)[index] && unref(beatMovieUrls)[index] ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("video", {
+							src: unref(beatMovieUrls)[index],
 							class: "w-full object-contain",
 							controls: "",
 							autoplay: "",
 							"data-testid": `mulmo-script-beat-movie-player-${index}`
-						}, null, 8, _hoisted_49), createElementVNode("button", {
+						}, null, 8, _hoisted_18), createElementVNode("button", {
 							class: "absolute top-1.5 right-1.5 flex items-center justify-center w-6 h-6 rounded border border-gray-400 text-gray-600 bg-white hover:bg-gray-50",
 							title: unref(m).close,
 							"aria-label": unref(m).close,
 							"data-testid": `mulmo-script-beat-movie-close-${index}`,
-							onClick: withModifiers(($event) => closeBeatMovie(index), ["stop"])
-						}, [..._cache[18] || (_cache[18] = [createElementVNode("span", { class: "material-icons text-sm" }, "close", -1)])], 8, _hoisted_50)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							onClick: withModifiers(($event) => unref(closeBeatMovie)(index), ["stop"])
+						}, [..._cache[4] || (_cache[4] = [createElementVNode("span", { class: "material-icons text-sm" }, "close", -1)])], 8, _hoisted_19)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 							renderedImages[index] ? (openBlock(), createElementBlock("img", {
 								key: 0,
 								src: renderedImages[index],
 								class: "w-full object-contain cursor-zoom-in",
 								alt: `Beat ${index + 1}`,
 								onClick: ($event) => openLightbox(index)
-							}, null, 8, _hoisted_51)) : createCommentVNode("", true),
-							renderedImages[index] && beatMovies[index] && canFetchMedia.value ? (openBlock(), createElementBlock("button", {
+							}, null, 8, _hoisted_20)) : createCommentVNode("", true),
+							renderedImages[index] && unref(beatMovies)[index] && canFetchMedia.value ? (openBlock(), createElementBlock("button", {
 								key: 1,
 								class: "absolute inset-0 m-auto w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70",
 								title: unref(m).play,
 								"aria-label": unref(m).play,
 								"data-testid": `mulmo-script-beat-movie-play-${index}`,
-								onClick: withModifiers(($event) => playBeatMovie(index), ["stop"])
-							}, [beatMovieLoading[index] ? (openBlock(), createElementBlock("svg", _hoisted_53, [..._cache[19] || (_cache[19] = [createElementVNode("circle", {
+								onClick: withModifiers(($event) => unref(playBeatMovie)(index), ["stop"])
+							}, [unref(beatMovieLoading)[index] ? (openBlock(), createElementBlock("svg", _hoisted_22, [..._cache[5] || (_cache[5] = [createElementVNode("circle", {
 								class: "opacity-25",
 								cx: "12",
 								cy: "12",
@@ -1765,13 +2076,13 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 								class: "opacity-75",
 								fill: "currentColor",
 								d: "M4 12a8 8 0 018-8v8H4z"
-							}, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_54, "play_arrow"))], 8, _hoisted_52)) : createCommentVNode("", true),
+							}, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_23, "play_arrow"))], 8, _hoisted_21)) : createCommentVNode("", true),
 							renderedImages[index] && renderState[index] !== "rendering" ? (openBlock(), createElementBlock("button", {
 								key: 2,
 								class: "absolute top-1.5 right-1.5 flex items-center gap-1 px-2 py-0.5 text-xs rounded border border-gray-400 text-gray-600 bg-white hover:bg-gray-50 disabled:opacity-60 disabled:cursor-not-allowed",
-								disabled: movieGenerating.value,
+								disabled: unref(movieGenerating),
 								onClick: withModifiers(($event) => regenerateBeat(index), ["stop"])
-							}, " ↺ ", 8, _hoisted_55)) : !renderedImages[index] ? (openBlock(), createElementBlock("div", _hoisted_56, [renderState[index] === "rendering" || movieGenerating.value && !renderedImages[index] && effectiveBeat(index).imagePrompt ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[20] || (_cache[20] = createElementVNode("svg", {
+							}, " ↺ ", 8, _hoisted_24)) : !renderedImages[index] ? (openBlock(), createElementBlock("div", _hoisted_25, [renderState[index] === "rendering" || unref(movieGenerating) && !renderedImages[index] && effectiveBeat$1(index).imagePrompt ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[6] || (_cache[6] = createElementVNode("svg", {
 								class: "animate-spin w-4 h-4 text-green-400",
 								viewBox: "0 0 24 24",
 								fill: "none"
@@ -1786,15 +2097,15 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 								class: "opacity-75",
 								fill: "currentColor",
 								d: "M4 12a8 8 0 018-8v8H4z"
-							})], -1)), createElementVNode("span", _hoisted_57, toDisplayString(unref(m).rendering), 1)], 64)) : renderState[index] === "error" ? (openBlock(), createElementBlock("span", _hoisted_58, toDisplayString(renderErrors[index]), 1)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [effectiveBeat(index).imagePrompt ? (openBlock(), createElementBlock("span", _hoisted_59, toDisplayString(effectiveBeat(index).imagePrompt), 1)) : (openBlock(), createElementBlock("span", _hoisted_60, toDisplayString(beat.image?.type ?? "—"), 1))], 64))])) : createCommentVNode("", true)
+							})], -1)), createElementVNode("span", _hoisted_26, toDisplayString(unref(m).rendering), 1)], 64)) : renderState[index] === "error" ? (openBlock(), createElementBlock("span", _hoisted_27, toDisplayString(renderErrors[index]), 1)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [effectiveBeat$1(index).imagePrompt ? (openBlock(), createElementBlock("span", _hoisted_28, toDisplayString(effectiveBeat$1(index).imagePrompt), 1)) : (openBlock(), createElementBlock("span", _hoisted_29, toDisplayString(beat.image?.type ?? "—"), 1))], 64))])) : createCommentVNode("", true)
 						], 64)),
-						beatDragOver[index] ? (openBlock(), createElementBlock("div", _hoisted_61, [createElementVNode("span", _hoisted_62, toDisplayString(unref(m).drop), 1)])) : !renderedImages[index] && renderState[index] !== "rendering" ? (openBlock(), createElementBlock("div", _hoisted_63, toDisplayString(unref(m).orDropImage), 1)) : createCommentVNode("", true),
-						!renderedImages[index] && renderState[index] !== "rendering" && !movieGenerating.value ? (openBlock(), createElementBlock("button", {
+						beatDragOver[index] ? (openBlock(), createElementBlock("div", _hoisted_30, [createElementVNode("span", _hoisted_31, toDisplayString(unref(m).drop), 1)])) : !renderedImages[index] && renderState[index] !== "rendering" ? (openBlock(), createElementBlock("div", _hoisted_32, toDisplayString(unref(m).orDropImage), 1)) : createCommentVNode("", true),
+						!renderedImages[index] && renderState[index] !== "rendering" && !unref(movieGenerating) && !unref(isBeatImageReference)(effectiveBeat$1(index)) ? (openBlock(), createElementBlock("button", {
 							key: 4,
 							class: "absolute top-1.5 right-1.5 flex items-center gap-1 px-2 py-0.5 text-xs rounded border border-blue-400 text-blue-600 bg-white hover:bg-blue-50",
 							onClick: ($event) => renderBeat(index)
-						}, toDisplayString(unref(m).generate), 9, _hoisted_64)) : createCommentVNode("", true)
-					], 42, _hoisted_48), createElementVNode("div", _hoisted_65, [createElementVNode("span", _hoisted_66, toDisplayString(effectiveBeat(index).text), 1), createElementVNode("div", _hoisted_67, [createElementVNode("div", _hoisted_68, [audioState[index] === "generating" || movieGenerating.value && !beatAudios[index] && effectiveBeat(index).text ? (openBlock(), createElementBlock("svg", _hoisted_69, [..._cache[21] || (_cache[21] = [createElementVNode("circle", {
+						}, toDisplayString(unref(m).generate), 9, _hoisted_33)) : createCommentVNode("", true)
+					], 42, _hoisted_16), createElementVNode("div", _hoisted_34, [createElementVNode("span", _hoisted_35, toDisplayString(effectiveBeat$1(index).text), 1), createElementVNode("div", _hoisted_36, [createElementVNode("div", _hoisted_37, [audioState[index] === "generating" || unref(movieGenerating) && !beatAudios[index] && effectiveBeat$1(index).text ? (openBlock(), createElementBlock("svg", _hoisted_38, [..._cache[7] || (_cache[7] = [createElementVNode("circle", {
 						class: "opacity-25",
 						cx: "12",
 						cy: "12",
@@ -1809,24 +2120,24 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 						key: 1,
 						class: normalizeClass(["text-xs px-2 py-0.5 rounded border", playingAudio.value?.index === index ? "border-red-400 text-red-600 hover:bg-red-50" : "border-green-400 text-green-600 hover:bg-green-50"]),
 						onClick: ($event) => playAudio(index)
-					}, toDisplayString(playingAudio.value?.index === index ? unref(m).stop : unref(m).play), 11, _hoisted_70)) : audioErrors[index] ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("span", {
+					}, toDisplayString(playingAudio.value?.index === index ? unref(m).stop : unref(m).play), 11, _hoisted_39)) : audioErrors[index] ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("span", {
 						class: "text-xs text-red-400 truncate min-w-0 max-w-[20rem]",
 						title: audioErrors[index]
-					}, toDisplayString(unref(m).errPrefix) + " " + toDisplayString(audioErrors[index]), 9, _hoisted_71), effectiveBeat(index).text ? (openBlock(), createElementBlock("button", {
+					}, toDisplayString(unref(m).errPrefix) + " " + toDisplayString(audioErrors[index]), 9, _hoisted_40), effectiveBeat$1(index).text ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						class: "text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50",
-						disabled: movieGenerating.value,
+						disabled: unref(movieGenerating),
 						onClick: ($event) => generateAudio(index)
-					}, " ↺ ", 8, _hoisted_72)) : createCommentVNode("", true)], 64)) : effectiveBeat(index).text ? (openBlock(), createElementBlock("button", {
+					}, " ↺ ", 8, _hoisted_41)) : createCommentVNode("", true)], 64)) : effectiveBeat$1(index).text ? (openBlock(), createElementBlock("button", {
 						key: 3,
 						class: "text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-500 hover:bg-gray-50",
 						onClick: ($event) => generateAudio(index)
-					}, toDisplayString(unref(m).generateAudio), 9, _hoisted_73)) : createCommentVNode("", true)]), createElementVNode("button", {
+					}, toDisplayString(unref(m).generateAudio), 9, _hoisted_42)) : createCommentVNode("", true)]), createElementVNode("button", {
 						class: "text-gray-400 hover:text-gray-600",
 						title: sourceOpen[index] ? "Hide source" : "Show source",
 						"data-testid": `mulmo-script-beat-source-toggle-${index}`,
 						onClick: ($event) => toggleSource(index)
-					}, [..._cache[22] || (_cache[22] = [createElementVNode("svg", {
+					}, [..._cache[8] || (_cache[8] = [createElementVNode("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						class: "w-3.5 h-3.5",
 						viewBox: "0 0 24 24",
@@ -1835,36 +2146,36 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 						"stroke-width": "2",
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round"
-					}, [createElementVNode("polyline", { points: "16 18 22 12 16 6" }), createElementVNode("polyline", { points: "8 6 2 12 8 18" })], -1)])], 8, _hoisted_74)])])]), sourceOpen[index] ? (openBlock(), createElementBlock("div", _hoisted_75, [withDirectives(createElementVNode("textarea", {
+					}, [createElementVNode("polyline", { points: "16 18 22 12 16 6" }), createElementVNode("polyline", { points: "8 6 2 12 8 18" })], -1)])], 8, _hoisted_43)])])]), sourceOpen[index] ? (openBlock(), createElementBlock("div", _hoisted_44, [withDirectives(createElementVNode("textarea", {
 						"onUpdate:modelValue": ($event) => sourceText[index] = $event,
-						class: normalizeClass(["w-full text-xs text-gray-600 bg-gray-50 p-2 font-mono resize-none", isValidBeat(index) ? "outline-none" : "outline outline-2 outline-red-400"]),
+						class: normalizeClass(["w-full text-xs text-gray-600 bg-gray-50 p-2 font-mono resize-none", isValidBeat$1(index) ? "outline-none" : "outline outline-2 outline-red-400"]),
 						rows: "8",
 						spellcheck: "false",
 						"data-testid": `mulmo-script-beat-source-textarea-${index}`
-					}, null, 10, _hoisted_76), [[vModelText, sourceText[index]]]), createElementVNode("div", _hoisted_77, [beatSaveErrors[index] ? (openBlock(), createElementBlock("span", _hoisted_78, toDisplayString(beatSaveErrors[index].kind === "invalidJson" ? unref(m).saveErrorInvalidJson(beatSaveErrors[index].error) : unref(m).saveErrorSaveFailed(beatSaveErrors[index].error)), 1)) : createCommentVNode("", true), createElementVNode("button", {
-						class: normalizeClass(["px-2 py-1 text-xs rounded border", isValidBeat(index) && !beatSaving[index] ? "border-blue-400 text-blue-600 hover:bg-blue-50 cursor-pointer" : "border-gray-200 text-gray-300 cursor-not-allowed"]),
-						disabled: !isValidBeat(index) || !!beatSaving[index],
+					}, null, 10, _hoisted_45), [[vModelText, sourceText[index]]]), createElementVNode("div", _hoisted_46, [beatSaveErrors[index] ? (openBlock(), createElementBlock("span", _hoisted_47, toDisplayString(beatSaveErrors[index].kind === "invalidJson" ? unref(m).saveErrorInvalidJson(beatSaveErrors[index].error) : unref(m).saveErrorSaveFailed(beatSaveErrors[index].error)), 1)) : createCommentVNode("", true), createElementVNode("button", {
+						class: normalizeClass(["px-2 py-1 text-xs rounded border", isValidBeat$1(index) && !beatSaving[index] ? "border-blue-400 text-blue-600 hover:bg-blue-50 cursor-pointer" : "border-gray-200 text-gray-300 cursor-not-allowed"]),
+						disabled: !isValidBeat$1(index) || !!beatSaving[index],
 						"data-testid": `mulmo-script-beat-update-button-${index}`,
 						onClick: ($event) => updateBeat(index)
-					}, toDisplayString(beatSaving[index] ? unref(m).saving : unref(m).update), 11, _hoisted_79)])])) : createCommentVNode("", true)]);
-				}), 128)), beats.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_80, toDisplayString(unref(m).noBeats), 1)) : createCommentVNode("", true)], 512)),
-				createElementVNode("div", _hoisted_81, [createElementVNode("details", {
+					}, toDisplayString(beatSaving[index] ? unref(m).saving : unref(m).update), 11, _hoisted_48)])])) : createCommentVNode("", true)]);
+				}), 128)), beats.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_49, toDisplayString(unref(m).noBeats), 1)) : createCommentVNode("", true)], 512)),
+				createElementVNode("div", _hoisted_50, [createElementVNode("details", {
 					ref_key: "sourceDetails",
 					ref: sourceDetails,
 					class: "script-source",
-					onToggle: _cache[1] || (_cache[1] = ($event) => onSourceToggle($event.target.open))
+					onToggle: _cache[2] || (_cache[2] = ($event) => onSourceToggle($event.target.open))
 				}, [
 					createElementVNode("summary", null, toDisplayString(unref(m).editSource), 1),
 					withDirectives(createElementVNode("textarea", {
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editableSource.value = $event),
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => editableSource.value = $event),
 						class: normalizeClass(["script-editor", { "script-editor-invalid": sourceChanged.value && !sourceValid.value }]),
 						spellcheck: "false"
 					}, null, 2), [[vModelText, editableSource.value]]),
-					createElementVNode("div", _hoisted_82, [createElementVNode("button", {
+					createElementVNode("div", _hoisted_51, [createElementVNode("button", {
 						class: "apply-btn",
 						disabled: !sourceChanged.value || !sourceValid.value,
 						onClick: applySource
-					}, toDisplayString(unref(m).applyChanges), 9, _hoisted_83), createElementVNode("button", {
+					}, toDisplayString(unref(m).applyChanges), 9, _hoisted_52), createElementVNode("button", {
 						class: "cancel-btn",
 						onClick: cancelSourceEdit
 					}, toDisplayString(unref(m).cancel), 1)])
@@ -1872,50 +2183,31 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 					class: "copy-btn",
 					title: unref(copied) ? "Copied!" : "Copy",
 					onClick: copyText
-				}, [createElementVNode("span", _hoisted_85, toDisplayString(unref(copied) ? "check" : "content_copy"), 1)], 8, _hoisted_84), [[vShow, !editing.value]])]),
-				lightbox.value ? (openBlock(), createElementBlock("div", {
+				}, [createElementVNode("span", _hoisted_54, toDisplayString(unref(copied) ? "check" : "content_copy"), 1)], 8, _hoisted_53), [[vShow, !editing.value]])]),
+				lightbox.value ? (openBlock(), createBlock(BeatLightbox_default, {
 					key: 4,
-					class: "fixed inset-0 z-50 bg-black/80 overflow-y-auto",
-					onClick: closeLightbox
-				}, [createElementVNode("button", {
-					class: "fixed top-2 right-4 z-10 text-white/60 hover:text-white text-3xl leading-none",
-					title: unref(m).close,
-					onClick: withModifiers(closeLightbox, ["stop"])
-				}, "✕", 8, _hoisted_86), createElementVNode("div", {
-					class: "flex flex-col items-center gap-4 pt-4 pb-8",
-					onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"]))
-				}, [createElementVNode("div", _hoisted_87, [
-					!lightbox.value.isCharacter ? (openBlock(), createElementBlock("button", {
-						key: 0,
-						class: "text-white/60 hover:text-white disabled:opacity-20 text-5xl leading-none",
-						disabled: !hasPrev.value,
-						onClick: _cache[2] || (_cache[2] = ($event) => lightboxMove(-1))
-					}, " ‹ ", 8, _hoisted_88)) : createCommentVNode("", true),
-					createElementVNode("div", _hoisted_89, [createElementVNode("img", {
-						src: lightbox.value.src,
-						class: "max-w-[80vw] max-h-[85vh] object-contain rounded shadow-2xl"
-					}, null, 8, _hoisted_90), !lightbox.value.isCharacter && beats.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_91, [createElementVNode("div", _hoisted_92, [(openBlock(true), createElementBlock(Fragment, null, renderList(beats.value.length, (i) => {
-						return openBlock(), createElementBlock("div", {
-							key: i - 1,
-							class: normalizeClass(["group flex-1 cursor-pointer relative transition-colors", i - 1 === lightbox.value.index ? "bg-white/80 hover:bg-white" : i - 1 < lightbox.value.index ? "bg-white/40 hover:bg-white/60" : "bg-white/20 hover:bg-white/40"]),
-							onClick: ($event) => jumpToBeat(i - 1)
-						}, [_cache[23] || (_cache[23] = createElementVNode("span", { class: "absolute -inset-y-3 inset-x-0" }, null, -1)), beatTooltip(i - 1) ? (openBlock(), createElementBlock("div", _hoisted_94, toDisplayString(beatTooltip(i - 1)), 1)) : createCommentVNode("", true)], 10, _hoisted_93);
-					}), 128))]), playingAudio.value && playingAudio.value.index === lightbox.value.index ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: "absolute top-1/2 w-3.5 h-3.5 rounded-full bg-white shadow ring-2 ring-black/30 -translate-y-1/2 -translate-x-1/2 pointer-events-none",
-						style: normalizeStyle({ left: `${(lightbox.value.index + audioProgress.value) / beats.value.length * 100}%` })
-					}, null, 4)) : createCommentVNode("", true)])) : createCommentVNode("", true)]),
-					!lightbox.value.isCharacter ? (openBlock(), createElementBlock("button", {
-						key: 1,
-						class: "text-white/60 hover:text-white disabled:opacity-20 text-5xl leading-none",
-						disabled: !hasNext.value,
-						onClick: _cache[3] || (_cache[3] = ($event) => lightboxMove(1))
-					}, " › ", 8, _hoisted_95)) : createCommentVNode("", true)
-				]), lightbox.value.text || beatAudios[lightbox.value.index] ? (openBlock(), createElementBlock("div", _hoisted_96, [lightbox.value.text ? (openBlock(), createElementBlock("p", _hoisted_97, toDisplayString(lightbox.value.text), 1)) : createCommentVNode("", true), beatAudios[lightbox.value.index] ? (openBlock(), createElementBlock("button", {
-					key: 1,
-					class: "absolute top-0 right-4 text-sm px-3 py-1 rounded border border-white/60 text-white/60 hover:bg-white/20",
-					onClick: _cache[4] || (_cache[4] = ($event) => playAudio(lightbox.value.index))
-				}, toDisplayString(playingAudio.value?.index === lightbox.value.index ? unref(m).stop : unref(m).play), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true)])])) : createCommentVNode("", true)
+					lightbox: lightbox.value,
+					"beat-count": beats.value.length,
+					"beat-texts": beatTexts.value,
+					"has-prev": hasPrev.value,
+					"has-next": hasNext.value,
+					"playing-audio-index": playingAudio.value?.index ?? null,
+					"audio-progress": audioProgress.value,
+					"has-current-audio": Boolean(beatAudios[lightbox.value.index]),
+					onClose: closeLightbox,
+					onMove: lightboxMove,
+					onJump: jumpToBeat,
+					onPlayAudio: playAudio
+				}, null, 8, [
+					"lightbox",
+					"beat-count",
+					"beat-texts",
+					"has-prev",
+					"has-next",
+					"playing-audio-index",
+					"audio-progress",
+					"has-current-audio"
+				])) : createCommentVNode("", true)
 			]);
 		};
 	}
@@ -1929,7 +2221,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/vue/View.vue
-var View_default = /*#__PURE__*/ _plugin_vue_export_helper_default(View_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c28ee15a"]]);
+var View_default = /*#__PURE__*/ _plugin_vue_export_helper_default(View_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3776a73b"]]);
 //#endregion
 //#region src/vue/Preview.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {