@mulmoclaude/mulmoscript-plugin 4.3.0 → 4.4.0

package/dist/vue.cjs

@@ -119,22 +119,20 @@ function beatMayHaveMovie(beat) {
 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/beat-editor`'s
-*  `BeatListEditor` instead of the per-beat list UI (#1575).
-*  Empty / missing `beats[]` returns false — there's nothing to edit
-*  as a deck, fall through to the existing UI which renders an empty
-*  state. Mixed scripts (any non-`slide` beat) also return false; that
-*  case is deferred to a future phase. */
-function isAllSlideDeck(script) {
+/** Whether the beat editor has anything to edit.
+*
+*  Any beat type, not just `slide`: `@mulmocast/beat-editor` renders and edits all eight
+*  (`textSlide` / `markdown` / `chart` / `mermaid` / `image` / `movie` / `slide` /
+*  `html_tailwind`). The all-slide test this replaces was a limit of the OLD iframe deck
+*  editor, which only understood decks — it stayed in place through the migration and kept a
+*  markdown script read-only for no reason.
+*
+*  Empty / missing `beats[]` is false: there is nothing to edit, and the per-beat list already
+*  renders an empty state. */
+function hasEditableBeats(script) {
 	if (!isRecord(script)) return false;
 	const { beats } = script;
-	if (!Array.isArray(beats) || beats.length === 0) return false;
-	return beats.every((beat) => {
-		if (!isRecord(beat)) return false;
-		const { image } = beat;
-		return isRecord(image) && image.type === "slide";
-	});
+	return Array.isArray(beats) && beats.length > 0;
 }
 /** Resolve the beat the View should render at `index`: the user's
 *  in-place edit (`overrides`) wins over the on-disk beat, and an
@@ -608,7 +606,7 @@ var DECK_SAVE_DEBOUNCE_MS = 300;
 */
 var EDITOR_ORIGIN = `deck-editor-${Math.random().toString(36).slice(2)}`;
 function useDeckEditor({ api, filePath, effectiveScript, commitScript }) {
-	const isDeck = (0, vue.computed)(() => isAllSlideDeck(effectiveScript.value));
+	const canEditBeats = (0, vue.computed)(() => hasEditableBeats(effectiveScript.value));
 	const deckScriptInput = (0, vue.computed)(() => effectiveScript.value);
 	let deckSaveTimer = null;
 	let pendingDeckScript = null;
@@ -658,7 +656,7 @@ function useDeckEditor({ api, filePath, effectiveScript, commitScript }) {
 		});
 	}
 	return {
-		isDeck,
+		canEditBeats,
 		deckScriptInput,
 		onDeckUpdate,
 		flushPendingDeckSave,
@@ -672,6 +670,8 @@ function useDeckEditor({ api, filePath, effectiveScript, commitScript }) {
 var useT = (0, gui_chat_protocol_vue.createUseT)({
 	de: {
 		beatCount: (count) => count === 1 ? `${count} Beat` : `${count} Beats`,
+		editTab: "Bearbeiten",
+		mediaTab: "Medien",
 		movie: "Video",
 		generating: "Wird generiert…",
 		rendering: "Wird gerendert…",
@@ -704,6 +704,8 @@ var useT = (0, gui_chat_protocol_vue.createUseT)({
 	},
 	en: {
 		beatCount: (count) => count === 1 ? `${count} beat` : `${count} beats`,
+		editTab: "Edit",
+		mediaTab: "Media",
 		movie: "Movie",
 		generating: "Generating…",
 		rendering: "Rendering…",
@@ -736,6 +738,8 @@ var useT = (0, gui_chat_protocol_vue.createUseT)({
 	},
 	es: {
 		beatCount: (count) => count === 1 ? `${count} beat` : `${count} beats`,
+		editTab: "Editar",
+		mediaTab: "Medios",
 		movie: "Vídeo",
 		generating: "Generando…",
 		rendering: "Renderizando…",
@@ -768,6 +772,8 @@ var useT = (0, gui_chat_protocol_vue.createUseT)({
 	},
 	fr: {
 		beatCount: (count) => count === 1 ? `${count} beat` : `${count} beats`,
+		editTab: "Éditer",
+		mediaTab: "Médias",
 		movie: "Film",
 		generating: "Génération…",
 		rendering: "Rendu…",
@@ -800,6 +806,8 @@ var useT = (0, gui_chat_protocol_vue.createUseT)({
 	},
 	ja: {
 		beatCount: (count) => `${count} ビート`,
+		editTab: "編集",
+		mediaTab: "メディア",
 		movie: "動画",
 		generating: "生成中…",
 		rendering: "レンダリング中…",
@@ -832,6 +840,8 @@ var useT = (0, gui_chat_protocol_vue.createUseT)({
 	},
 	ko: {
 		beatCount: (count) => `${count}개 비트`,
+		editTab: "편집",
+		mediaTab: "미디어",
 		movie: "영상",
 		generating: "생성 중…",
 		rendering: "렌더링 중…",
@@ -864,6 +874,8 @@ var useT = (0, gui_chat_protocol_vue.createUseT)({
 	},
 	"pt-BR": {
 		beatCount: (count) => count === 1 ? `${count} beat` : `${count} beats`,
+		editTab: "Editar",
+		mediaTab: "Mídia",
 		movie: "Vídeo",
 		generating: "Gerando…",
 		rendering: "Renderizando…",
@@ -896,6 +908,8 @@ var useT = (0, gui_chat_protocol_vue.createUseT)({
 	},
 	zh: {
 		beatCount: (count) => `${count} 个 beat`,
+		editTab: "编辑",
+		mediaTab: "媒体",
 		movie: "视频",
 		generating: "生成中…",
 		rendering: "渲染中…",
@@ -1325,115 +1339,120 @@ 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 = { class: "flex gap-3 items-stretch" };
-var _hoisted_15 = [
+var _hoisted_14 = {
+	key: 2,
+	class: "flex shrink-0 gap-1 px-2 pt-1 text-[11px]"
+};
+var _hoisted_15 = { class: "flex gap-3 items-stretch" };
+var _hoisted_16 = [
 	"onDragover",
 	"onDragleave",
 	"onDrop"
 ];
-var _hoisted_16 = ["data-testid"];
-var _hoisted_17 = ["src", "data-testid"];
-var _hoisted_18 = [
+var _hoisted_17 = ["data-testid"];
+var _hoisted_18 = ["src", "data-testid"];
+var _hoisted_19 = [
 	"title",
 	"aria-label",
 	"data-testid",
 	"onClick"
 ];
-var _hoisted_19 = [
+var _hoisted_20 = [
 	"src",
 	"alt",
 	"onClick"
 ];
-var _hoisted_20 = [
+var _hoisted_21 = [
 	"title",
 	"aria-label",
 	"data-testid",
 	"onClick"
 ];
-var _hoisted_21 = {
+var _hoisted_22 = {
 	key: 0,
 	class: "animate-spin w-5 h-5",
 	viewBox: "0 0 24 24",
 	fill: "none"
 };
-var _hoisted_22 = {
+var _hoisted_23 = {
 	key: 1,
 	class: "material-icons text-3xl"
 };
-var _hoisted_23 = ["disabled", "onClick"];
-var _hoisted_24 = {
+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_25 = { class: "text-xs text-green-500" };
-var _hoisted_26 = {
+var _hoisted_26 = { class: "text-xs text-green-500" };
+var _hoisted_27 = {
 	key: 1,
 	class: "text-xs text-red-400 text-center"
 };
-var _hoisted_27 = {
+var _hoisted_28 = {
 	key: 0,
 	class: "text-xs text-gray-400 text-center italic leading-relaxed px-1"
 };
-var _hoisted_28 = {
+var _hoisted_29 = {
 	key: 1,
 	class: "text-xs text-gray-300"
 };
-var _hoisted_29 = {
+var _hoisted_30 = {
 	key: 2,
 	class: "absolute inset-0 flex items-center justify-center bg-blue-50/80 pointer-events-none"
 };
-var _hoisted_30 = { class: "text-xs text-blue-500 font-medium" };
-var _hoisted_31 = {
+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_32 = ["onClick"];
-var _hoisted_33 = { class: "flex flex-col flex-1 min-w-0 px-2 py-1.5" };
-var _hoisted_34 = { class: "text-sm text-gray-800 leading-relaxed" };
-var _hoisted_35 = { class: "flex justify-between mt-auto pt-1" };
-var _hoisted_36 = { class: "flex items-center gap-1" };
-var _hoisted_37 = {
+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_38 = ["onClick"];
-var _hoisted_39 = ["title"];
-var _hoisted_40 = ["disabled", "onClick"];
-var _hoisted_41 = ["onClick"];
-var _hoisted_42 = [
+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_43 = {
+var _hoisted_44 = {
 	key: 0,
 	class: "border-t border-gray-100"
 };
-var _hoisted_44 = ["onUpdate:modelValue", "data-testid"];
-var _hoisted_45 = { class: "flex items-center justify-end gap-2 px-2 pb-2" };
-var _hoisted_46 = {
+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_47 = [
+var _hoisted_48 = [
 	"disabled",
 	"data-testid",
 	"onClick"
 ];
-var _hoisted_48 = {
+var _hoisted_49 = {
 	key: 0,
 	class: "flex items-center justify-center h-32 text-gray-400 text-sm"
 };
-var _hoisted_49 = { class: "bottom-bar-wrapper" };
-var _hoisted_50 = { class: "editor-actions" };
-var _hoisted_51 = ["disabled"];
-var _hoisted_52 = ["title"];
-var _hoisted_53 = { class: "material-icons" };
+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 BEAT_TAB_BASE = "rounded px-2 py-0.5 font-sans";
 var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "View",
 	props: { selectedResult: {} },
@@ -1600,12 +1619,27 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 				}
 			});
 		}
-		const { isDeck, deckScriptInput, onDeckUpdate, flushPendingDeckSave, watchForeignWrites } = useDeckEditor({
+		const { canEditBeats, deckScriptInput, onDeckUpdate, flushPendingDeckSave, watchForeignWrites } = useDeckEditor({
 			api,
 			filePath,
 			effectiveScript,
 			commitScript
 		});
+		/**
+		* Which pane the beats are shown in.
+		*
+		* `edit` is the beat editor — every beat type, edited in place. `media` is the per-beat list,
+		* which is the only place audio / image / movie generation lives. A script with nothing to edit
+		* has only the list, so the switch is hidden and this is ignored.
+		*
+		* `media` is the default because opening the script is what triggers rendering each beat's
+		* image: the auto-render on mount lives in that list, so defaulting to `edit` silently stopped
+		* thumbnails from being produced at all. Someone who wants to edit clicks once; nobody has to
+		* click to get the previews they always got.
+		*/
+		const beatPane = (0, vue.ref)("media");
+		const showBeatEditor = (0, vue.computed)(() => canEditBeats.value && beatPane.value === "edit");
+		const beatPaneTabClass = (active) => [BEAT_TAB_BASE, active ? "bg-gray-700 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"];
 		const unsubscribeForeignWrites = watchForeignWrites(() => {
 			refreshScriptFromDisk();
 		});
@@ -2062,7 +2096,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 					"onDownloadPdf"
 				])]),
 				(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)),
+					_cache[5] || (_cache[5] = (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",
@@ -2102,8 +2136,19 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 					"onCharDrop",
 					"onRenderCharacter"
 				])) : (0, vue.createCommentVNode)("", true),
-				(0, vue.unref)(isDeck) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-					key: 2,
+				(0, vue.unref)(canEditBeats) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_14, [(0, vue.createElementVNode)("button", {
+					type: "button",
+					class: (0, vue.normalizeClass)(beatPaneTabClass(beatPane.value === "edit")),
+					"data-testid": "mulmo-script-tab-edit",
+					onClick: _cache[1] || (_cache[1] = ($event) => beatPane.value = "edit")
+				}, (0, vue.toDisplayString)((0, vue.unref)(m).editTab), 3), (0, vue.createElementVNode)("button", {
+					type: "button",
+					class: (0, vue.normalizeClass)(beatPaneTabClass(beatPane.value === "media")),
+					"data-testid": "mulmo-script-tab-media",
+					onClick: _cache[2] || (_cache[2] = ($event) => beatPane.value = "media")
+				}, (0, vue.toDisplayString)((0, vue.unref)(m).mediaTab), 3)])) : (0, vue.createCommentVNode)("", true),
+				showBeatEditor.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 3,
 					class: "flex-1 overflow-hidden",
 					"data-testid": "mulmo-script-deck-editor",
 					onFocusout: onDeckFocusOut
@@ -2111,7 +2156,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 					beats: deckBeats.value,
 					"onUpdate:beats": onDeckBeatsUpdate
 				}, null, 8, ["beats"])], 32)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-					key: 3,
+					key: 4,
 					ref_key: "beatListEl",
 					ref: beatListEl,
 					class: "flex-1 overflow-y-auto p-2 space-y-1.5"
@@ -2119,7 +2164,7 @@ 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_14, [(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),
@@ -2128,27 +2173,27 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 						(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_16),
+						}, (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_17), (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) => (0, vue.unref)(closeBeatMovie)(index), ["stop"])
-						}, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("span", { class: "material-icons text-sm" }, "close", -1)])], 8, _hoisted_18)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+						}, [..._cache[6] || (_cache[6] = [(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_19)) : (0, vue.createCommentVNode)("", true),
+							}, 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",
@@ -2156,7 +2201,7 @@ var View_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.def
 								"aria-label": (0, vue.unref)(m).play,
 								"data-testid": `mulmo-script-beat-movie-play-${index}`,
 								onClick: (0, vue.withModifiers)(($event) => (0, vue.unref)(playBeatMovie)(index), ["stop"])
-							}, [(0, vue.unref)(beatMovieLoading)[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_21, [..._cache[5] || (_cache[5] = [(0, vue.createElementVNode)("circle", {
+							}, [(0, vue.unref)(beatMovieLoading)[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_22, [..._cache[7] || (_cache[7] = [(0, vue.createElementVNode)("circle", {
 								class: "opacity-25",
 								cx: "12",
 								cy: "12",
@@ -2167,13 +2212,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_22, "play_arrow"))], 8, _hoisted_20)) : (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: (0, vue.unref)(movieGenerating),
 								onClick: (0, vue.withModifiers)(($event) => regenerateBeat(index), ["stop"])
-							}, " ↺ ", 8, _hoisted_23)) : !renderedImages[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_24, [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", {
+							}, " ↺ ", 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[8] || (_cache[8] = (0, vue.createElementVNode)("svg", {
 								class: "animate-spin w-4 h-4 text-green-400",
 								viewBox: "0 0 24 24",
 								fill: "none"
@@ -2188,15 +2233,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_25, (0, vue.toDisplayString)((0, vue.unref)(m).rendering), 1)], 64)) : renderState[index] === "error" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_26, (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_27, (0, vue.toDisplayString)(effectiveBeat$1(index).imagePrompt), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_28, (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_29, [(0, vue.createElementVNode)("span", _hoisted_30, (0, vue.toDisplayString)((0, vue.unref)(m).drop), 1)])) : !renderedImages[index] && renderState[index] !== "rendering" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_31, (0, vue.toDisplayString)((0, vue.unref)(m).orDropImage), 1)) : (0, vue.createCommentVNode)("", true),
+						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_32)) : (0, vue.createCommentVNode)("", true)
-					], 42, _hoisted_15), (0, vue.createElementVNode)("div", _hoisted_33, [(0, vue.createElementVNode)("span", _hoisted_34, (0, vue.toDisplayString)(effectiveBeat$1(index).text), 1), (0, vue.createElementVNode)("div", _hoisted_35, [(0, vue.createElementVNode)("div", _hoisted_36, [audioState[index] === "generating" || (0, vue.unref)(movieGenerating) && !beatAudios[index] && effectiveBeat$1(index).text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_37, [..._cache[7] || (_cache[7] = [(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[9] || (_cache[9] = [(0, vue.createElementVNode)("circle", {
 						class: "opacity-25",
 						cx: "12",
 						cy: "12",
@@ -2211,24 +2256,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_38)) : 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_39), effectiveBeat$1(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: (0, vue.unref)(movieGenerating),
 						onClick: ($event) => generateAudio(index)
-					}, " ↺ ", 8, _hoisted_40)) : (0, vue.createCommentVNode)("", true)], 64)) : effectiveBeat$1(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_41)) : (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[8] || (_cache[8] = [(0, vue.createElementVNode)("svg", {
+					}, [..._cache[10] || (_cache[10] = [(0, vue.createElementVNode)("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						class: "w-3.5 h-3.5",
 						viewBox: "0 0 24 24",
@@ -2237,36 +2282,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_42)])])]), sourceOpen[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_43, [(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$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_44), [[vue.vModelText, sourceText[index]]]), (0, vue.createElementVNode)("div", _hoisted_45, [beatSaveErrors[index] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_46, (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", {
+					}, 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_47)])])) : (0, vue.createCommentVNode)("", true)]);
-				}), 128)), beats.value.length === 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_48, (0, vue.toDisplayString)((0, vue.unref)(m).noBeats), 1)) : (0, vue.createCommentVNode)("", true)], 512)),
-				(0, vue.createElementVNode)("div", _hoisted_49, [(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[2] || (_cache[2] = ($event) => onSourceToggle($event.target.open))
+					onToggle: _cache[4] || (_cache[4] = ($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[1] || (_cache[1] = ($event) => editableSource.value = $event),
+						"onUpdate:modelValue": _cache[3] || (_cache[3] = ($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_50, [(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_51), (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)])
@@ -2274,9 +2319,9 @@ 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_53, (0, vue.toDisplayString)((0, vue.unref)(copied) ? "check" : "content_copy"), 1)], 8, _hoisted_52), [[vue.vShow, !editing.value]])]),
+				}, [(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,
+					key: 5,
 					lightbox: lightbox.value,
 					"beat-count": beats.value.length,
 					"beat-texts": beatTexts.value,
@@ -2312,7 +2357,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-d78be72d"]]);
+var View_default = /*#__PURE__*/ _plugin_vue_export_helper_default(View_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f9957eaf"]]);
 //#endregion
 //#region src/vue/Preview.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {