@mulmoclaude/mulmoscript-plugin 1.0.0 → 1.1.0

package/dist/vue.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_plugin = require("./plugin-Bi986Wga.cjs");
+const require_plugin = require("./plugin-BLp8tSYt.cjs");
 const require_contract = require("./contract-DxKVCRQk.cjs");
 let _mulmocast_types = require("@mulmocast/types");
 let vue = require("vue");
@@ -11,18 +11,22 @@ let gui_chat_protocol_vue = require("gui-chat-protocol/vue");
 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
@@ -104,6 +108,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).
@@ -121,6 +135,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([
@@ -155,7 +237,7 @@ function useMulmoScriptTransport() {
 		} catch (err) {
 			return {
 				ok: false,
-				error: errorMessage(err)
+				error: require_plugin.errorMessage(err)
 			};
 		}
 		if (!isRecord(result) || result.ok !== true) return {
@@ -188,6 +270,333 @@ var EMPTY_ADAPTER = {};
 function useHostAdapter() {
 	return (0, vue.inject)(MULMOSCRIPT_HOST_ADAPTER_KEY, EMPTY_ADAPTER);
 }
+//#endregion
+//#region src/vue/composables/useMediaExport.ts
+function useMediaExport({ api, adapter, filePath, chatSessionId }) {
+	const movieGenerating = (0, vue.ref)(false);
+	const movieDownloading = (0, vue.ref)(false);
+	const moviePath = (0, vue.ref)(null);
+	const movieError = (0, vue.ref)(null);
+	const pdfGenerating = (0, vue.ref)(false);
+	const pdfDownloading = (0, vue.ref)(false);
+	const pdfPath = (0, vue.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(require_plugin.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 = (0, vue.reactive)({});
+	const beatMovieUrls = (0, vue.reactive)({});
+	const beatMovieOpen = (0, vue.reactive)({});
+	const beatMovieLoading = (0, vue.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(require_plugin.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 = (0, vue.reactive)({});
+	const charImages = (0, vue.reactive)({});
+	const charErrors = (0, vue.reactive)({});
+	const charDragOver = (0, vue.reactive)({});
+	const staleSince$2 = (requestedFilePath) => staleSince(filePath.value, requestedFilePath);
+	const characterKeys = (0, vue.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] = require_plugin.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 = (0, vue.computed)(() => isAllSlideDeck(effectiveScript.value));
+	const deckScriptInput = (0, vue.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.
@@ -451,254 +860,517 @@ var useT = (0, gui_chat_protocol_vue.createUseT)({
 	}
 });
 //#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__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: "fixed inset-0 z-50 bg-black/80 overflow-y-auto",
+				onClick: _cache[5] || (_cache[5] = ($event) => emit("close"))
+			}, [(0, vue.createElementVNode)("button", {
+				class: "fixed top-2 right-4 z-10 text-white/60 hover:text-white text-3xl leading-none",
+				title: (0, vue.unref)(m).close,
+				onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(($event) => emit("close"), ["stop"]))
+			}, "✕", 8, _hoisted_1$4), (0, vue.createElementVNode)("div", {
+				class: "flex flex-col items-center gap-4 pt-4 pb-8",
+				onClick: _cache[4] || (_cache[4] = (0, vue.withModifiers)(() => {}, ["stop"]))
+			}, [(0, vue.createElementVNode)("div", _hoisted_2$4, [
+				!__props.lightbox.isCharacter ? ((0, vue.openBlock)(), (0, vue.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)) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("div", _hoisted_4$3, [(0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$3, [(0, vue.createElementVNode)("div", _hoisted_7$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.beatCount, (i) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: i - 1,
+						class: (0, vue.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] = (0, vue.createElementVNode)("span", { class: "absolute -inset-y-3 inset-x-0" }, null, -1)), (0, vue.unref)(beatTooltip)(__props.beatTexts[i - 1]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_9$3, (0, vue.toDisplayString)((0, vue.unref)(beatTooltip)(__props.beatTexts[i - 1])), 1)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_8$3);
+				}), 128))]), __props.playingAudioIndex !== null && __props.playingAudioIndex === __props.lightbox.index ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.normalizeStyle)({ left: `${(__props.lightbox.index + __props.audioProgress) / __props.beatCount * 100}%` })
+				}, null, 4)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)]),
+				!__props.lightbox.isCharacter ? ((0, vue.openBlock)(), (0, vue.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)) : (0, vue.createCommentVNode)("", true)
+			]), __props.lightbox.text || __props.hasCurrentAudio ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_11$3, [__props.lightbox.text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_12$3, (0, vue.toDisplayString)(__props.lightbox.text), 1)) : (0, vue.createCommentVNode)("", true), __props.hasCurrentAudio ? ((0, vue.openBlock)(), (0, vue.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))
+			}, (0, vue.toDisplayString)(__props.playingAudioIndex === __props.lightbox.index ? (0, vue.unref)(m).stop : (0, vue.unref)(m).play), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.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__ */ (0, vue.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 = (0, vue.computed)(() => props.movieGenerating || props.anyBeatRendering);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$3, [(0, vue.createElementVNode)("div", _hoisted_2$3, [(0, vue.createElementVNode)("span", _hoisted_3$3, (0, vue.toDisplayString)((0, vue.unref)(m).characters), 1), (0, vue.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"))
+			}, (0, vue.toDisplayString)((0, vue.unref)(m).generateAll), 9, _hoisted_4$2)]), (0, vue.createElementVNode)("div", _hoisted_5$2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.characterKeys, (key) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key,
+					class: "flex flex-col items-center gap-1 w-36"
+				}, [(0, vue.createElementVNode)("div", {
+					class: (0, vue.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] ? ((0, vue.openBlock)(), (0, vue.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" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_8$2, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("circle", {
+						class: "opacity-25",
+						cx: "12",
+						cy: "12",
+						r: "10",
+						stroke: "currentColor",
+						"stroke-width": "4"
+					}, null, -1), (0, vue.createElementVNode)("path", {
+						class: "opacity-75",
+						fill: "currentColor",
+						d: "M4 12a8 8 0 018-8v8H4z"
+					}, null, -1)])])) : __props.renderState[key] === "error" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_9$2, (0, vue.toDisplayString)(__props.errors[key]), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_10$2, (0, vue.toDisplayString)((0, vue.unref)(characterPrompt)(__props.images, key)), 1)),
+					!__props.dragOver[key] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_11$2, (0, vue.toDisplayString)((0, vue.unref)(m).orDropImage), 1)) : (0, vue.createCommentVNode)("", true),
+					__props.dragOver[key] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_12$2, [(0, vue.createElementVNode)("span", _hoisted_13$1, (0, vue.toDisplayString)((0, vue.unref)(m).drop), 1)])) : (0, vue.createCommentVNode)("", true),
+					__props.thumbnails[key] && __props.renderState[key] !== "rendering" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+						key: 6,
+						class: (0, vue.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: (0, vue.withModifiers)(($event) => emit("renderCharacter", key, true), ["stop"])
+					}, [busy.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_15$1, "↺")) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_16$1, "↺"))], 10, _hoisted_14$1)) : !__props.thumbnails[key] && __props.renderState[key] !== "rendering" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+						key: 7,
+						class: (0, vue.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: (0, vue.withModifiers)(($event) => emit("renderCharacter", key, false), ["stop"])
+					}, [busy.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_18$1, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
+						class: "opacity-25",
+						cx: "12",
+						cy: "12",
+						r: "10",
+						stroke: "currentColor",
+						"stroke-width": "4"
+					}, null, -1), (0, vue.createElementVNode)("path", {
+						class: "opacity-75",
+						fill: "currentColor",
+						d: "M4 12a8 8 0 018-8v8H4z"
+					}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_19$1, (0, vue.toDisplayString)((0, vue.unref)(m).gen), 1))], 10, _hoisted_17$1)) : (0, vue.createCommentVNode)("", true)
+				], 42, _hoisted_6$2), (0, vue.createElementVNode)("span", _hoisted_20$1, (0, vue.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__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$2, [
+				__props.moviePath && !__props.movieGenerating ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(m).playPresentation,
+					"aria-label": (0, vue.unref)(m).playPresentation,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("play"))
+				}, [..._cache[7] || (_cache[7] = [(0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "play_arrow", -1)])], 8, _hoisted_2$2)) : (0, vue.createCommentVNode)("", true),
+				__props.moviePath && !__props.movieGenerating && __props.canFetchMedia ? ((0, vue.openBlock)(), (0, vue.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] = (0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "download", -1)), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(m).movie), 1)], 8, _hoisted_3$2)) : (0, vue.createCommentVNode)("", true),
+				__props.moviePath && !__props.movieGenerating ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(m).regenerateMovie,
+					"aria-label": (0, vue.unref)(m).regenerateMovie,
+					"data-testid": "mulmo-script-regenerate-movie-button",
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("generateMovie"))
+				}, [..._cache[9] || (_cache[9] = [(0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "refresh", -1)])], 8, _hoisted_4$1)) : ((0, vue.openBlock)(), (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_6$1, [..._cache[10] || (_cache[10] = [(0, vue.createElementVNode)("circle", {
+					class: "opacity-25",
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					"stroke-width": "4"
+				}, null, -1), (0, vue.createElementVNode)("path", {
+					class: "opacity-75",
+					fill: "currentColor",
+					d: "M4 12a8 8 0 018-8v8H4z"
+				}, null, -1)])])) : (0, vue.createCommentVNode)("", true), __props.movieGenerating ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7$1, (0, vue.toDisplayString)((0, vue.unref)(m).generating), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [_cache[11] || (_cache[11] = (0, vue.createElementVNode)("span", { class: "material-icons text-sm" }, "refresh", -1)), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(m).movie), 1)], 64))], 8, _hoisted_5$1)),
+				__props.pdfPath && !__props.pdfGenerating && __props.canFetchMedia ? ((0, vue.openBlock)(), (0, vue.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] = (0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "download", -1)), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(m).pdf), 1)], 8, _hoisted_8$1)) : (0, vue.createCommentVNode)("", true),
+				__props.pdfPath && !__props.pdfGenerating ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(m).regeneratePdf,
+					"aria-label": (0, vue.unref)(m).regeneratePdf,
+					"data-testid": "mulmo-script-regenerate-pdf-button",
+					onClick: _cache[5] || (_cache[5] = ($event) => emit("generatePdf"))
+				}, [..._cache[13] || (_cache[13] = [(0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "refresh", -1)])], 8, _hoisted_9$1)) : ((0, vue.openBlock)(), (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_11$1, [..._cache[14] || (_cache[14] = [(0, vue.createElementVNode)("circle", {
+					class: "opacity-25",
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					"stroke-width": "4"
+				}, null, -1), (0, vue.createElementVNode)("path", {
+					class: "opacity-75",
+					fill: "currentColor",
+					d: "M4 12a8 8 0 018-8v8H4z"
+				}, null, -1)])])) : (0, vue.createCommentVNode)("", true), __props.pdfGenerating ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_12$1, (0, vue.toDisplayString)((0, vue.unref)(m).generatingPdf), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [_cache[15] || (_cache[15] = (0, vue.createElementVNode)("span", { class: "material-icons text-sm" }, "picture_as_pdf", -1)), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.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__*/ (0, vue.defineComponent)({
 	__name: "View",
 	props: { selectedResult: {} },
@@ -723,39 +1395,34 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 		const beatSaveErrors = (0, vue.reactive)({});
 		const beatSaving = (0, vue.reactive)({});
 		const localOverrides = (0, vue.reactive)({});
-		const movieGenerating = (0, vue.ref)(false);
-		const movieDownloading = (0, vue.ref)(false);
-		const moviePath = (0, vue.ref)(null);
-		const movieError = (0, vue.ref)(null);
-		const pdfGenerating = (0, vue.ref)(false);
-		const pdfDownloading = (0, vue.ref)(false);
-		const pdfPath = (0, vue.ref)(null);
 		const beatAudios = (0, vue.reactive)({});
 		const audioState = (0, vue.reactive)({});
 		const audioErrors = (0, vue.reactive)({});
-		const beatMovies = (0, vue.reactive)({});
-		const beatMovieUrls = (0, vue.reactive)({});
-		const beatMovieOpen = (0, vue.reactive)({});
-		const beatMovieLoading = (0, vue.reactive)({});
 		const playingAudio = (0, vue.ref)(null);
 		const silentPlaybackTimer = (0, vue.ref)(null);
 		const audioProgress = (0, vue.ref)(0);
 		const beatListEl = (0, vue.ref)(null);
 		const lightbox = (0, vue.ref)(null);
-		const charRenderState = (0, vue.reactive)({});
-		const charImages = (0, vue.reactive)({});
-		const charErrors = (0, vue.reactive)({});
-		const charDragOver = (0, vue.reactive)({});
 		const beatDragOver = (0, vue.reactive)({});
 		const anyBeatRendering = (0, vue.computed)(() => Object.values(renderState).some((state) => state === "rendering"));
-		const characterKeys = (0, vue.computed)(() => {
-			const imgs = script.value.imageParams?.images ?? {};
-			return Object.keys(imgs).filter((key) => imgs[key]?.type === "imagePrompt");
-		});
 		const chatSessionId = (0, vue.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();
 		}
@@ -763,7 +1430,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			stopPlayingAudio();
 			lightbox.value = {
 				src: renderedImages[index],
-				text: effectiveBeat(index).text,
+				text: effectiveBeat$1(index).text,
 				index
 			};
 		}
@@ -774,7 +1441,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 		const isPlayReady = (0, vue.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() {
@@ -795,19 +1462,19 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 		}
 		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
@@ -829,6 +1496,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			for (let i = lightbox.value.index + 1; i < beats.value.length; i++) if (renderedImages[i]) return true;
 			return false;
 		});
+		const beatTexts = (0, vue.computed)(() => beats.value.map((_, index) => effectiveBeat$1(index).text));
 		function jumpToBeat(index) {
 			if (!lightbox.value) return;
 			if (index === lightbox.value.index) return;
@@ -837,10 +1505,6 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			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;
@@ -863,31 +1527,8 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			...script.value,
 			beats: beats.value.map((beat, i) => localOverrides[i] ?? beat)
 		}));
-		const scriptSourceText = (0, vue.computed)(() => JSON.stringify(effectiveScript.value, null, 2));
-		const isDeck = (0, vue.computed)(() => isAllSlideDeck(effectiveScript.value));
-		const deckScriptInput = (0, vue.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 = (0, vue.computed)(() => scriptSourceText(effectiveScript.value));
+		function commitScript(next) {
 			emit("updateResult", {
 				...props.selectedResult,
 				data: {
@@ -896,14 +1537,14 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				}
 			});
 		}
-		function onDeckUpdate(next) {
-			scheduleDeckSave(next);
-		}
+		const { isDeck, deckScriptInput, onDeckUpdate, flushPendingDeckSave } = useDeckEditor({
+			api,
+			filePath,
+			effectiveScript,
+			commitScript
+		});
 		(0, vue.onBeforeUnmount)(() => {
-			if (deckSaveTimer) {
-				clearTimeout(deckSaveTimer);
-				flushDeckSave();
-			}
+			flushPendingDeckSave();
 			resetBeatMovies();
 			unsubscribeGenerationEvents();
 		});
@@ -920,11 +1561,11 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 		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;
@@ -938,7 +1579,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			try {
 				parsed = JSON.parse(editableSource.value);
 			} catch (err) {
-				alert(errorMessage(err));
+				alert(require_plugin.errorMessage(err));
 				return;
 			}
 			const response = await api.call("updateScript", {
@@ -949,31 +1590,25 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				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] ?? "", _mulmocast_types.mulmoBeatSchema);
+		function isValidBeat$1(index) {
+			return isValidBeat(sourceText[index], _mulmocast_types.mulmoBeatSchema);
 		}
 		async function updateBeat(index) {
 			let beat;
@@ -982,12 +1617,12 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			} catch (err) {
 				beatSaveErrors[index] = {
 					kind: "invalidJson",
-					error: errorMessage(err)
+					error: require_plugin.errorMessage(err)
 				};
 				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;
@@ -996,7 +1631,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				beatIndex: index,
 				beat
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			Reflect.deleteProperty(beatSaving, index);
 			if (!response.ok) {
 				beatSaveErrors[index] = {
@@ -1027,7 +1662,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				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";
@@ -1036,7 +1671,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			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;
@@ -1049,7 +1684,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				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";
@@ -1057,10 +1692,10 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			}
 			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;
@@ -1068,7 +1703,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				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";
@@ -1080,61 +1715,12 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				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";
@@ -1144,7 +1730,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				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";
@@ -1197,14 +1783,9 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			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);
+				renderErrors[index] = require_plugin.errorMessage(err);
 				renderState[index] = "error";
 				return;
 			}
@@ -1214,7 +1795,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				beatIndex: index,
 				imageData
 			});
-			if (staleSince(requestedFilePath)) return;
+			if (staleSince$1(requestedFilePath)) return;
 			if (!response.ok) {
 				renderErrors[index] = response.error || "Upload failed";
 				renderState[index] = "error";
@@ -1223,49 +1804,6 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			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 = {
@@ -1275,43 +1813,6 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				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;
@@ -1353,39 +1854,16 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			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 = [
@@ -1444,7 +1922,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 			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") {
@@ -1462,95 +1940,6 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [
 				(0, vue.createElementVNode)("div", _hoisted_2$1, [(0, vue.createElementVNode)("div", _hoisted_3$1, [
@@ -1561,153 +1950,80 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 						script.value.lang ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7, (0, vue.toDisplayString)(script.value.lang), 1)) : (0, vue.createCommentVNode)("", true),
 						filePath.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_8, (0, vue.toDisplayString)(filePath.value), 1)) : (0, vue.createCommentVNode)("", true)
 					])
-				]), (0, vue.createElementVNode)("div", _hoisted_9, [
-					moviePath.value && !movieGenerating.value ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(m).playPresentation,
-						"aria-label": (0, vue.unref)(m).playPresentation,
-						onClick: playPresentation
-					}, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "play_arrow", -1)])], 8, _hoisted_10)) : (0, vue.createCommentVNode)("", true),
-					moviePath.value && !movieGenerating.value && canFetchMedia.value ? ((0, vue.openBlock)(), (0, vue.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] = (0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "download", -1)), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(m).movie), 1)], 8, _hoisted_11)) : (0, vue.createCommentVNode)("", true),
-					moviePath.value && !movieGenerating.value ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(m).regenerateMovie,
-						"aria-label": (0, vue.unref)(m).regenerateMovie,
-						"data-testid": "mulmo-script-regenerate-movie-button",
-						onClick: generateMovie
-					}, [..._cache[8] || (_cache[8] = [(0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "refresh", -1)])], 8, _hoisted_12)) : ((0, vue.openBlock)(), (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_14, [..._cache[9] || (_cache[9] = [(0, vue.createElementVNode)("circle", {
-						class: "opacity-25",
-						cx: "12",
-						cy: "12",
-						r: "10",
-						stroke: "currentColor",
-						"stroke-width": "4"
-					}, null, -1), (0, vue.createElementVNode)("path", {
-						class: "opacity-75",
-						fill: "currentColor",
-						d: "M4 12a8 8 0 018-8v8H4z"
-					}, null, -1)])])) : (0, vue.createCommentVNode)("", true), movieGenerating.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_15, (0, vue.toDisplayString)((0, vue.unref)(m).generating), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [_cache[10] || (_cache[10] = (0, vue.createElementVNode)("span", { class: "material-icons text-sm" }, "refresh", -1)), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(m).movie), 1)], 64))], 8, _hoisted_13)),
-					pdfPath.value && !pdfGenerating.value && canFetchMedia.value ? ((0, vue.openBlock)(), (0, vue.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] = (0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "download", -1)), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(m).pdf), 1)], 8, _hoisted_16)) : (0, vue.createCommentVNode)("", true),
-					pdfPath.value && !pdfGenerating.value ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(m).regeneratePdf,
-						"aria-label": (0, vue.unref)(m).regeneratePdf,
-						"data-testid": "mulmo-script-regenerate-pdf-button",
-						onClick: generatePdf
-					}, [..._cache[12] || (_cache[12] = [(0, vue.createElementVNode)("span", { class: "material-icons text-base" }, "refresh", -1)])], 8, _hoisted_17)) : ((0, vue.openBlock)(), (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_19, [..._cache[13] || (_cache[13] = [(0, vue.createElementVNode)("circle", {
-						class: "opacity-25",
-						cx: "12",
-						cy: "12",
-						r: "10",
-						stroke: "currentColor",
-						"stroke-width": "4"
-					}, null, -1), (0, vue.createElementVNode)("path", {
-						class: "opacity-75",
-						fill: "currentColor",
-						d: "M4 12a8 8 0 018-8v8H4z"
-					}, null, -1)])])) : (0, vue.createCommentVNode)("", true), pdfGenerating.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_20, (0, vue.toDisplayString)((0, vue.unref)(m).generatingPdf), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [_cache[14] || (_cache[14] = (0, vue.createElementVNode)("span", { class: "material-icons text-sm" }, "picture_as_pdf", -1)), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(m).pdf), 1)], 64))], 8, _hoisted_18))
+				]), (0, vue.createVNode)(MulmoScriptToolbar_default, {
+					"movie-path": (0, vue.unref)(moviePath),
+					"movie-generating": (0, vue.unref)(movieGenerating),
+					"movie-downloading": (0, vue.unref)(movieDownloading),
+					"is-play-ready": isPlayReady.value,
+					"can-fetch-media": canFetchMedia.value,
+					"pdf-path": (0, vue.unref)(pdfPath),
+					"pdf-generating": (0, vue.unref)(pdfGenerating),
+					"pdf-downloading": (0, vue.unref)(pdfDownloading),
+					onPlay: playPresentation,
+					onGenerateMovie: (0, vue.unref)(generateMovie),
+					onDownloadMovie: (0, vue.unref)(downloadMovie),
+					onGeneratePdf: (0, vue.unref)(generatePdf),
+					onDownloadPdf: (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_21, [
-					_cache[15] || (_cache[15] = (0, vue.createElementVNode)("span", { class: "material-icons text-base shrink-0 mt-px" }, "error_outline", -1)),
-					(0, vue.createElementVNode)("div", _hoisted_22, [(0, vue.createElementVNode)("div", _hoisted_23, (0, vue.toDisplayString)((0, vue.unref)(m).movieGenerationFailed), 1), (0, vue.createElementVNode)("div", _hoisted_24, (0, vue.toDisplayString)(movieError.value), 1)]),
+				(0, vue.unref)(movieError) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_9, [
+					_cache[3] || (_cache[3] = (0, vue.createElementVNode)("span", { class: "material-icons text-base shrink-0 mt-px" }, "error_outline", -1)),
+					(0, vue.createElementVNode)("div", _hoisted_10, [(0, vue.createElementVNode)("div", _hoisted_11, (0, vue.toDisplayString)((0, vue.unref)(m).movieGenerationFailed), 1), (0, vue.createElementVNode)("div", _hoisted_12, (0, vue.toDisplayString)((0, vue.unref)(movieError)), 1)]),
 					(0, vue.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: (0, vue.unref)(movieGenerating),
 						"data-testid": "mulmo-script-movie-retry-button",
-						onClick: generateMovie
-					}, (0, vue.toDisplayString)((0, vue.unref)(m).retry), 9, _hoisted_25)
+						onClick: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(generateMovie) && (0, vue.unref)(generateMovie)(...args))
+					}, (0, vue.toDisplayString)((0, vue.unref)(m).retry), 9, _hoisted_13)
 				])) : (0, vue.createCommentVNode)("", true),
-				characterKeys.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_26, [(0, vue.createElementVNode)("div", _hoisted_27, [(0, vue.createElementVNode)("span", _hoisted_28, (0, vue.toDisplayString)((0, vue.unref)(m).characters), 1), (0, vue.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
-				}, (0, vue.toDisplayString)((0, vue.unref)(m).generateAll), 9, _hoisted_29)]), (0, vue.createElementVNode)("div", _hoisted_30, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(characterKeys.value, (key) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-						key,
-						class: "flex flex-col items-center gap-1 w-36"
-					}, [(0, vue.createElementVNode)("div", {
-						class: (0, vue.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] ? ((0, vue.openBlock)(), (0, vue.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" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_33, [..._cache[16] || (_cache[16] = [(0, vue.createElementVNode)("circle", {
-							class: "opacity-25",
-							cx: "12",
-							cy: "12",
-							r: "10",
-							stroke: "currentColor",
-							"stroke-width": "4"
-						}, null, -1), (0, vue.createElementVNode)("path", {
-							class: "opacity-75",
-							fill: "currentColor",
-							d: "M4 12a8 8 0 018-8v8H4z"
-						}, null, -1)])])) : charRenderState[key] === "error" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_34, (0, vue.toDisplayString)(charErrors[key]), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_35, (0, vue.toDisplayString)(characterPrompt(key)), 1)),
-						!charDragOver[key] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_36, (0, vue.toDisplayString)((0, vue.unref)(m).orDropImage), 1)) : (0, vue.createCommentVNode)("", true),
-						charDragOver[key] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_37, [(0, vue.createElementVNode)("span", _hoisted_38, (0, vue.toDisplayString)((0, vue.unref)(m).drop), 1)])) : (0, vue.createCommentVNode)("", true),
-						charImages[key] && charRenderState[key] !== "rendering" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
-							key: 6,
-							class: (0, vue.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: (0, vue.withModifiers)(($event) => renderCharacter(key, true), ["stop"])
-						}, [movieGenerating.value || anyBeatRendering.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_40, "↺")) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_41, "↺"))], 10, _hoisted_39)) : !charImages[key] && charRenderState[key] !== "rendering" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
-							key: 7,
-							class: (0, vue.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: (0, vue.withModifiers)(($event) => renderCharacter(key, false), ["stop"])
-						}, [movieGenerating.value || anyBeatRendering.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_43, [..._cache[17] || (_cache[17] = [(0, vue.createElementVNode)("circle", {
-							class: "opacity-25",
-							cx: "12",
-							cy: "12",
-							r: "10",
-							stroke: "currentColor",
-							"stroke-width": "4"
-						}, null, -1), (0, vue.createElementVNode)("path", {
-							class: "opacity-75",
-							fill: "currentColor",
-							d: "M4 12a8 8 0 018-8v8H4z"
-						}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_44, (0, vue.toDisplayString)((0, vue.unref)(m).gen), 1))], 10, _hoisted_42)) : (0, vue.createCommentVNode)("", true)
-					], 42, _hoisted_31), (0, vue.createElementVNode)("span", _hoisted_45, (0, vue.toDisplayString)(key), 1)]);
-				}), 128))])])) : (0, vue.createCommentVNode)("", true),
-				isDeck.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_46, [(0, vue.createVNode)((0, vue.unref)(MulmoScriptDeckEditor), {
-					script: deckScriptInput.value,
+				(0, vue.unref)(characterKeys).length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(CharacterStrip_default, {
+					key: 1,
+					"character-keys": (0, vue.unref)(characterKeys),
+					images: script.value.imageParams?.images,
+					thumbnails: (0, vue.unref)(charImages),
+					"render-state": (0, vue.unref)(charRenderState),
+					errors: (0, vue.unref)(charErrors),
+					"drag-over": (0, vue.unref)(charDragOver),
+					"movie-generating": (0, vue.unref)(movieGenerating),
+					"any-beat-rendering": anyBeatRendering.value,
+					onGenerateAll: (0, vue.unref)(generateAllCharacters),
+					onCharDragOver: (0, vue.unref)(onCharDragOver),
+					onCharDragLeave: (0, vue.unref)(onCharDragLeave),
+					onCharDrop: (0, vue.unref)(onCharDrop),
+					onOpenLightbox: openCharacterLightbox,
+					onRenderCharacter: (0, vue.unref)(renderCharacter)
+				}, null, 8, [
+					"character-keys",
+					"images",
+					"thumbnails",
+					"render-state",
+					"errors",
+					"drag-over",
+					"movie-generating",
+					"any-beat-rendering",
+					"onGenerateAll",
+					"onCharDragOver",
+					"onCharDragLeave",
+					"onCharDrop",
+					"onRenderCharacter"
+				])) : (0, vue.createCommentVNode)("", true),
+				(0, vue.unref)(isDeck) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_14, [(0, vue.createVNode)((0, vue.unref)(MulmoScriptDeckEditor), {
+					script: (0, vue.unref)(deckScriptInput),
 					layout: "compact",
-					"onUpdate:script": onDeckUpdate
-				}, null, 8, ["script"])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					"onUpdate:script": (0, vue.unref)(onDeckUpdate)
+				}, null, 8, ["script", "onUpdate:script"])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					key: 3,
 					ref_key: "beatListEl",
 					ref: beatListEl,
@@ -1716,40 +2032,44 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 						key: index,
 						class: "rounded-lg border border-gray-200 overflow-hidden"
-					}, [(0, vue.createElementVNode)("div", _hoisted_47, [(0, vue.createElementVNode)("div", {
+					}, [(0, vue.createElementVNode)("div", _hoisted_15, [(0, vue.createElementVNode)("div", {
 						class: (0, vue.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] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createElementVNode)("video", {
-							src: beatMovieUrls[index],
+						(0, vue.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}`
+						}, (0, vue.toDisplayString)(index + 1), 9, _hoisted_17),
+						(0, vue.unref)(beatMovieOpen)[index] && (0, vue.unref)(beatMovieUrls)[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createElementVNode)("video", {
+							src: (0, vue.unref)(beatMovieUrls)[index],
 							class: "w-full object-contain",
 							controls: "",
 							autoplay: "",
 							"data-testid": `mulmo-script-beat-movie-player-${index}`
-						}, null, 8, _hoisted_49), (0, vue.createElementVNode)("button", {
+						}, null, 8, _hoisted_18), (0, vue.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: (0, vue.unref)(m).close,
 							"aria-label": (0, vue.unref)(m).close,
 							"data-testid": `mulmo-script-beat-movie-close-${index}`,
-							onClick: (0, vue.withModifiers)(($event) => closeBeatMovie(index), ["stop"])
-						}, [..._cache[18] || (_cache[18] = [(0, vue.createElementVNode)("span", { class: "material-icons text-sm" }, "close", -1)])], 8, _hoisted_50)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+							onClick: (0, vue.withModifiers)(($event) => (0, vue.unref)(closeBeatMovie)(index), ["stop"])
+						}, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("span", { class: "material-icons text-sm" }, "close", -1)])], 8, _hoisted_19)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
 							renderedImages[index] ? ((0, vue.openBlock)(), (0, vue.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)) : (0, vue.createCommentVNode)("", true),
-							renderedImages[index] && beatMovies[index] && canFetchMedia.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+							}, null, 8, _hoisted_20)) : (0, vue.createCommentVNode)("", true),
+							renderedImages[index] && (0, vue.unref)(beatMovies)[index] && canFetchMedia.value ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(m).play,
 								"aria-label": (0, vue.unref)(m).play,
 								"data-testid": `mulmo-script-beat-movie-play-${index}`,
-								onClick: (0, vue.withModifiers)(($event) => playBeatMovie(index), ["stop"])
-							}, [beatMovieLoading[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_53, [..._cache[19] || (_cache[19] = [(0, vue.createElementVNode)("circle", {
+								onClick: (0, vue.withModifiers)(($event) => (0, vue.unref)(playBeatMovie)(index), ["stop"])
+							}, [(0, vue.unref)(beatMovieLoading)[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_22, [..._cache[5] || (_cache[5] = [(0, vue.createElementVNode)("circle", {
 								class: "opacity-25",
 								cx: "12",
 								cy: "12",
@@ -1760,13 +2080,13 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 								class: "opacity-75",
 								fill: "currentColor",
 								d: "M4 12a8 8 0 018-8v8H4z"
-							}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_54, "play_arrow"))], 8, _hoisted_52)) : (0, vue.createCommentVNode)("", true),
+							}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_23, "play_arrow"))], 8, _hoisted_21)) : (0, vue.createCommentVNode)("", true),
 							renderedImages[index] && renderState[index] !== "rendering" ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(movieGenerating),
 								onClick: (0, vue.withModifiers)(($event) => regenerateBeat(index), ["stop"])
-							}, " ↺ ", 8, _hoisted_55)) : !renderedImages[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_56, [renderState[index] === "rendering" || movieGenerating.value && !renderedImages[index] && effectiveBeat(index).imagePrompt ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [_cache[20] || (_cache[20] = (0, vue.createElementVNode)("svg", {
+							}, " ↺ ", 8, _hoisted_24)) : !renderedImages[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_25, [renderState[index] === "rendering" || (0, vue.unref)(movieGenerating) && !renderedImages[index] && effectiveBeat$1(index).imagePrompt ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [_cache[6] || (_cache[6] = (0, vue.createElementVNode)("svg", {
 								class: "animate-spin w-4 h-4 text-green-400",
 								viewBox: "0 0 24 24",
 								fill: "none"
@@ -1781,15 +2101,15 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 								class: "opacity-75",
 								fill: "currentColor",
 								d: "M4 12a8 8 0 018-8v8H4z"
-							})], -1)), (0, vue.createElementVNode)("span", _hoisted_57, (0, vue.toDisplayString)((0, vue.unref)(m).rendering), 1)], 64)) : renderState[index] === "error" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_58, (0, vue.toDisplayString)(renderErrors[index]), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [effectiveBeat(index).imagePrompt ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_59, (0, vue.toDisplayString)(effectiveBeat(index).imagePrompt), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_60, (0, vue.toDisplayString)(beat.image?.type ?? "—"), 1))], 64))])) : (0, vue.createCommentVNode)("", true)
+							})], -1)), (0, vue.createElementVNode)("span", _hoisted_26, (0, vue.toDisplayString)((0, vue.unref)(m).rendering), 1)], 64)) : renderState[index] === "error" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_27, (0, vue.toDisplayString)(renderErrors[index]), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [effectiveBeat$1(index).imagePrompt ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_28, (0, vue.toDisplayString)(effectiveBeat$1(index).imagePrompt), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_29, (0, vue.toDisplayString)(beat.image?.type ?? "—"), 1))], 64))])) : (0, vue.createCommentVNode)("", true)
 						], 64)),
-						beatDragOver[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_61, [(0, vue.createElementVNode)("span", _hoisted_62, (0, vue.toDisplayString)((0, vue.unref)(m).drop), 1)])) : !renderedImages[index] && renderState[index] !== "rendering" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_63, (0, vue.toDisplayString)((0, vue.unref)(m).orDropImage), 1)) : (0, vue.createCommentVNode)("", true),
-						!renderedImages[index] && renderState[index] !== "rendering" && !movieGenerating.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+						beatDragOver[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_30, [(0, vue.createElementVNode)("span", _hoisted_31, (0, vue.toDisplayString)((0, vue.unref)(m).drop), 1)])) : !renderedImages[index] && renderState[index] !== "rendering" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_32, (0, vue.toDisplayString)((0, vue.unref)(m).orDropImage), 1)) : (0, vue.createCommentVNode)("", true),
+						!renderedImages[index] && renderState[index] !== "rendering" && !(0, vue.unref)(movieGenerating) && !(0, vue.unref)(isBeatImageReference)(effectiveBeat$1(index)) ? ((0, vue.openBlock)(), (0, vue.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)
-						}, (0, vue.toDisplayString)((0, vue.unref)(m).generate), 9, _hoisted_64)) : (0, vue.createCommentVNode)("", true)
-					], 42, _hoisted_48), (0, vue.createElementVNode)("div", _hoisted_65, [(0, vue.createElementVNode)("span", _hoisted_66, (0, vue.toDisplayString)(effectiveBeat(index).text), 1), (0, vue.createElementVNode)("div", _hoisted_67, [(0, vue.createElementVNode)("div", _hoisted_68, [audioState[index] === "generating" || movieGenerating.value && !beatAudios[index] && effectiveBeat(index).text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_69, [..._cache[21] || (_cache[21] = [(0, vue.createElementVNode)("circle", {
+						}, (0, vue.toDisplayString)((0, vue.unref)(m).generate), 9, _hoisted_33)) : (0, vue.createCommentVNode)("", true)
+					], 42, _hoisted_16), (0, vue.createElementVNode)("div", _hoisted_34, [(0, vue.createElementVNode)("span", _hoisted_35, (0, vue.toDisplayString)(effectiveBeat$1(index).text), 1), (0, vue.createElementVNode)("div", _hoisted_36, [(0, vue.createElementVNode)("div", _hoisted_37, [audioState[index] === "generating" || (0, vue.unref)(movieGenerating) && !beatAudios[index] && effectiveBeat$1(index).text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_38, [..._cache[7] || (_cache[7] = [(0, vue.createElementVNode)("circle", {
 						class: "opacity-25",
 						cx: "12",
 						cy: "12",
@@ -1804,24 +2124,24 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 						key: 1,
 						class: (0, vue.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)
-					}, (0, vue.toDisplayString)(playingAudio.value?.index === index ? (0, vue.unref)(m).stop : (0, vue.unref)(m).play), 11, _hoisted_70)) : audioErrors[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createElementVNode)("span", {
+					}, (0, vue.toDisplayString)(playingAudio.value?.index === index ? (0, vue.unref)(m).stop : (0, vue.unref)(m).play), 11, _hoisted_39)) : audioErrors[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createElementVNode)("span", {
 						class: "text-xs text-red-400 truncate min-w-0 max-w-[20rem]",
 						title: audioErrors[index]
-					}, (0, vue.toDisplayString)((0, vue.unref)(m).errPrefix) + " " + (0, vue.toDisplayString)(audioErrors[index]), 9, _hoisted_71), effectiveBeat(index).text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					}, (0, vue.toDisplayString)((0, vue.unref)(m).errPrefix) + " " + (0, vue.toDisplayString)(audioErrors[index]), 9, _hoisted_40), effectiveBeat$1(index).text ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.unref)(movieGenerating),
 						onClick: ($event) => generateAudio(index)
-					}, " ↺ ", 8, _hoisted_72)) : (0, vue.createCommentVNode)("", true)], 64)) : effectiveBeat(index).text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					}, " ↺ ", 8, _hoisted_41)) : (0, vue.createCommentVNode)("", true)], 64)) : effectiveBeat$1(index).text ? ((0, vue.openBlock)(), (0, vue.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)
-					}, (0, vue.toDisplayString)((0, vue.unref)(m).generateAudio), 9, _hoisted_73)) : (0, vue.createCommentVNode)("", true)]), (0, vue.createElementVNode)("button", {
+					}, (0, vue.toDisplayString)((0, vue.unref)(m).generateAudio), 9, _hoisted_42)) : (0, vue.createCommentVNode)("", true)]), (0, vue.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] = [(0, vue.createElementVNode)("svg", {
+					}, [..._cache[8] || (_cache[8] = [(0, vue.createElementVNode)("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						class: "w-3.5 h-3.5",
 						viewBox: "0 0 24 24",
@@ -1830,36 +2150,36 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 						"stroke-width": "2",
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round"
-					}, [(0, vue.createElementVNode)("polyline", { points: "16 18 22 12 16 6" }), (0, vue.createElementVNode)("polyline", { points: "8 6 2 12 8 18" })], -1)])], 8, _hoisted_74)])])]), sourceOpen[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_75, [(0, vue.withDirectives)((0, vue.createElementVNode)("textarea", {
+					}, [(0, vue.createElementVNode)("polyline", { points: "16 18 22 12 16 6" }), (0, vue.createElementVNode)("polyline", { points: "8 6 2 12 8 18" })], -1)])], 8, _hoisted_43)])])]), sourceOpen[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_44, [(0, vue.withDirectives)((0, vue.createElementVNode)("textarea", {
 						"onUpdate:modelValue": ($event) => sourceText[index] = $event,
-						class: (0, vue.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: (0, vue.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), [[vue.vModelText, sourceText[index]]]), (0, vue.createElementVNode)("div", _hoisted_77, [beatSaveErrors[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_78, (0, vue.toDisplayString)(beatSaveErrors[index].kind === "invalidJson" ? (0, vue.unref)(m).saveErrorInvalidJson(beatSaveErrors[index].error) : (0, vue.unref)(m).saveErrorSaveFailed(beatSaveErrors[index].error)), 1)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("button", {
-						class: (0, vue.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), [[vue.vModelText, sourceText[index]]]), (0, vue.createElementVNode)("div", _hoisted_46, [beatSaveErrors[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_47, (0, vue.toDisplayString)(beatSaveErrors[index].kind === "invalidJson" ? (0, vue.unref)(m).saveErrorInvalidJson(beatSaveErrors[index].error) : (0, vue.unref)(m).saveErrorSaveFailed(beatSaveErrors[index].error)), 1)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("button", {
+						class: (0, vue.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)
-					}, (0, vue.toDisplayString)(beatSaving[index] ? (0, vue.unref)(m).saving : (0, vue.unref)(m).update), 11, _hoisted_79)])])) : (0, vue.createCommentVNode)("", true)]);
-				}), 128)), beats.value.length === 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_80, (0, vue.toDisplayString)((0, vue.unref)(m).noBeats), 1)) : (0, vue.createCommentVNode)("", true)], 512)),
-				(0, vue.createElementVNode)("div", _hoisted_81, [(0, vue.createElementVNode)("details", {
+					}, (0, vue.toDisplayString)(beatSaving[index] ? (0, vue.unref)(m).saving : (0, vue.unref)(m).update), 11, _hoisted_48)])])) : (0, vue.createCommentVNode)("", true)]);
+				}), 128)), beats.value.length === 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_49, (0, vue.toDisplayString)((0, vue.unref)(m).noBeats), 1)) : (0, vue.createCommentVNode)("", true)], 512)),
+				(0, vue.createElementVNode)("div", _hoisted_50, [(0, vue.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))
 				}, [
 					(0, vue.createElementVNode)("summary", null, (0, vue.toDisplayString)((0, vue.unref)(m).editSource), 1),
 					(0, vue.withDirectives)((0, vue.createElementVNode)("textarea", {
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editableSource.value = $event),
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => editableSource.value = $event),
 						class: (0, vue.normalizeClass)(["script-editor", { "script-editor-invalid": sourceChanged.value && !sourceValid.value }]),
 						spellcheck: "false"
 					}, null, 2), [[vue.vModelText, editableSource.value]]),
-					(0, vue.createElementVNode)("div", _hoisted_82, [(0, vue.createElementVNode)("button", {
+					(0, vue.createElementVNode)("div", _hoisted_51, [(0, vue.createElementVNode)("button", {
 						class: "apply-btn",
 						disabled: !sourceChanged.value || !sourceValid.value,
 						onClick: applySource
-					}, (0, vue.toDisplayString)((0, vue.unref)(m).applyChanges), 9, _hoisted_83), (0, vue.createElementVNode)("button", {
+					}, (0, vue.toDisplayString)((0, vue.unref)(m).applyChanges), 9, _hoisted_52), (0, vue.createElementVNode)("button", {
 						class: "cancel-btn",
 						onClick: cancelSourceEdit
 					}, (0, vue.toDisplayString)((0, vue.unref)(m).cancel), 1)])
@@ -1867,50 +2187,31 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 					class: "copy-btn",
 					title: (0, vue.unref)(copied) ? "Copied!" : "Copy",
 					onClick: copyText
-				}, [(0, vue.createElementVNode)("span", _hoisted_85, (0, vue.toDisplayString)((0, vue.unref)(copied) ? "check" : "content_copy"), 1)], 8, _hoisted_84), [[vue.vShow, !editing.value]])]),
-				lightbox.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				}, [(0, vue.createElementVNode)("span", _hoisted_54, (0, vue.toDisplayString)((0, vue.unref)(copied) ? "check" : "content_copy"), 1)], 8, _hoisted_53), [[vue.vShow, !editing.value]])]),
+				lightbox.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(BeatLightbox_default, {
 					key: 4,
-					class: "fixed inset-0 z-50 bg-black/80 overflow-y-auto",
-					onClick: closeLightbox
-				}, [(0, vue.createElementVNode)("button", {
-					class: "fixed top-2 right-4 z-10 text-white/60 hover:text-white text-3xl leading-none",
-					title: (0, vue.unref)(m).close,
-					onClick: (0, vue.withModifiers)(closeLightbox, ["stop"])
-				}, "✕", 8, _hoisted_86), (0, vue.createElementVNode)("div", {
-					class: "flex flex-col items-center gap-4 pt-4 pb-8",
-					onClick: _cache[5] || (_cache[5] = (0, vue.withModifiers)(() => {}, ["stop"]))
-				}, [(0, vue.createElementVNode)("div", _hoisted_87, [
-					!lightbox.value.isCharacter ? ((0, vue.openBlock)(), (0, vue.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)) : (0, vue.createCommentVNode)("", true),
-					(0, vue.createElementVNode)("div", _hoisted_89, [(0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_91, [(0, vue.createElementVNode)("div", _hoisted_92, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(beats.value.length, (i) => {
-						return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-							key: i - 1,
-							class: (0, vue.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] = (0, vue.createElementVNode)("span", { class: "absolute -inset-y-3 inset-x-0" }, null, -1)), beatTooltip(i - 1) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_94, (0, vue.toDisplayString)(beatTooltip(i - 1)), 1)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_93);
-					}), 128))]), playingAudio.value && playingAudio.value.index === lightbox.value.index ? ((0, vue.openBlock)(), (0, vue.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: (0, vue.normalizeStyle)({ left: `${(lightbox.value.index + audioProgress.value) / beats.value.length * 100}%` })
-					}, null, 4)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)]),
-					!lightbox.value.isCharacter ? ((0, vue.openBlock)(), (0, vue.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)) : (0, vue.createCommentVNode)("", true)
-				]), lightbox.value.text || beatAudios[lightbox.value.index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_96, [lightbox.value.text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_97, (0, vue.toDisplayString)(lightbox.value.text), 1)) : (0, vue.createCommentVNode)("", true), beatAudios[lightbox.value.index] ? ((0, vue.openBlock)(), (0, vue.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))
-				}, (0, vue.toDisplayString)(playingAudio.value?.index === lightbox.value.index ? (0, vue.unref)(m).stop : (0, vue.unref)(m).play), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)])])) : (0, vue.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"
+				])) : (0, vue.createCommentVNode)("", true)
 			]);
 		};
 	}
@@ -1924,7 +2225,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 = {