@adminide-stack/yantra-mobile 12.0.121 → 12.0.123-alpha.0

package/lib/features/canvas/VideoEditorExperience.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useMemo,useRef,useEffect,useCallback}from'react';import {StyleSheet,useWindowDimensions,Platform,Alert,View,Text,Pressable,FlatList,ActivityIndicator,TextInput,ScrollView}from'react-native';import {KeyboardAwareScreen,KeyboardLiftSpacer}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {GestureHandlerRootView,Gesture,GestureDetector}from'react-native-gesture-handler';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {getVideoPreviewRenderer}from'./videoRenderer.js';import {friendlyMediaError,resultUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {clipFromItem,emptyTimeline,timelineDuration,updateClip,clipFromColor,textClipAt,newSegment,buildExportSpec,removeClip,moveClip,trimClip,SPEED_PRESETS,SPEED_CURVES,TEXT_PRESETS,updateText,removeText,MOTION_MOVES,MOTION_STRENGTHS,CLIP_TRANSITIONS,moveIdOf,kenBurnsFor,DEFAULT_IMAGE_SEC,clipTimelineSec}from'./videoEditor/editorModel.js';import {filterById,FILTER_PRESETS}from'./videoEditor/filters.js';import {useSafeInsets}from'./withRemoteSafeArea.js';import {buildVideoGenerateParams,STATIC_VIDEO_MODELS}from'./generationModels.js';import {mapDesignCorpus,playableTemplatePreviewUrl}from'./canvasChatTemplates.js';import {config}from'../../config/env-config.js';import {useStudioCatalogTemplates}from'./useStudioCatalogTemplates.js';import {DESIGN_PROMPT_TEMPLATES}from'./designPromptTemplates.js';import {templateHasUsableConfig,loadTemplateTimeline}from'./templateImport/loadTemplate.js';import {loadVideoProjects,projectHasWork,newVideoProjectId,snapshotProject,upsertVideoProject,persistVideoProjects,relativeProjectTime}from'./videoEditor/videoProjectsStore.js';import {AgentCutPane}from'./videoEditor/agent/AgentCutPane.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useMemo,useRef,useCallback,useEffect}from'react';import {StyleSheet,useWindowDimensions,Platform,Alert,View,Text,Pressable,FlatList,ActivityIndicator,TextInput,ScrollView}from'react-native';import {KeyboardAwareScreen,KeyboardLiftSpacer}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {GestureHandlerRootView,Gesture,GestureDetector}from'react-native-gesture-handler';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {getVideoPreviewRenderer}from'./videoRenderer.js';import {friendlyMediaError,resultUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {clipFromItem,emptyTimeline,timelineDuration,updateClip,clipFromColor,textClipAt,newSegment,buildExportSpec,removeClip,moveClip,trimClip,SPEED_PRESETS,SPEED_CURVES,TEXT_PRESETS,updateText,removeText,MOTION_MOVES,MOTION_STRENGTHS,CLIP_TRANSITIONS,moveIdOf,kenBurnsFor,DEFAULT_IMAGE_SEC,clipTimelineSec}from'./videoEditor/editorModel.js';import {filterById,FILTER_PRESETS}from'./videoEditor/filters.js';import {useSafeInsets}from'./withRemoteSafeArea.js';import {STATIC_VIDEO_MODELS,buildVideoGenerateParams}from'./generationModels.js';import {mapDesignCorpus,playableTemplatePreviewUrl}from'./canvasChatTemplates.js';import {config}from'../../config/env-config.js';import {useStudioCatalogTemplates}from'./useStudioCatalogTemplates.js';import {DESIGN_PROMPT_TEMPLATES}from'./designPromptTemplates.js';import {templateHasUsableConfig,loadTemplateTimeline}from'./templateImport/loadTemplate.js';import {loadVideoProjects,projectHasWork,newVideoProjectId,snapshotProject,upsertVideoProject,persistVideoProjects,relativeProjectTime}from'./videoEditor/videoProjectsStore.js';import {AgentCutPane}from'./videoEditor/agent/AgentCutPane.js';import {canvasForRatio,canvasForAspect}from'./videoEditor/compileTimeline.js';import {reflowSceneChildren,sceneSpans,stampScene,layerInView}from'./videoEditor/sceneLayers.js';import {BlurBoxOverlay}from'./videoEditor/BlurBoxOverlay.js';import {ToolsDrawer}from'./videoEditor/tools/ToolsDrawer.js';import {staleMediaUrls,withRenewedUrls}from'./videoEditor/renewLinks.js';import {ensureFetchableMediaUrl}from'./mediaUrls.js';import {ProduceVideoSheet}from'./videoEditor/produce/ProduceVideoSheet.js';import {sceneFootagePatch,produceScenes,produceJob,runProduce}from'./videoEditor/produce/produceScenes.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -90,6 +90,11 @@ const SEGMENT_KINDS = [{
   label: "Trim",
   hint: "Skip this range in playback and export",
   icon: "content-cut"
+}, {
+  kind: "blur",
+  label: "Blur",
+  hint: "Blur a box (a face, a plate) for this range",
+  icon: "blur"
 }];
 const SCENE_COLORS = ["#101014", "#f4f4f5", "#1d4ed8", "#7c2d12"];
 const SPEED_CURVE_LABEL = {
@@ -186,7 +191,7 @@ function VideoEditorExperience({
   indexUrl,
   initialRailTab
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const insets = useSafeInsets();
   const {
     width: windowWidth
@@ -195,7 +200,8 @@ function VideoEditorExperience({
   const [deviceMedia, setDeviceMedia] = useState([]);
   const [logoSrc, setLogoSrc] = useState(initialLogoSrc != null ? initialLogoSrc : null);
   const media = useMemo(() => [...deviceMedia, ...items].filter((i) => i.type === "image" || i.type === "video" || i.type === "audio"), [items, deviceMedia]);
-  const [timeline, setTimeline] = useState(() => {
+  const sourceSecRef = useRef({});
+  const [timeline, setTimelineRaw] = useState(() => {
     if (initialTimeline && (initialTimeline.clips.length > 0 || initialTimeline.texts.length > 0)) {
       return initialTimeline;
     }
@@ -212,7 +218,28 @@ function VideoEditorExperience({
       texts: []
     };
   });
+  const setTimeline = useCallback((update) => {
+    if (typeof update !== "function") {
+      setTimelineRaw(update);
+      return;
+    }
+    setTimelineRaw((prev) => reflowSceneChildren(prev, update(prev), sourceSecRef.current));
+  }, []);
   const [selectedClipId, setSelectedClipId] = useState((_b = (_a = timeline.clips[0]) == null ? void 0 : _a.id) != null ? _b : null);
+  useEffect(() => {
+    if (!runAction) return void 0;
+    const stale = staleMediaUrls(timeline);
+    if (!stale.length) return void 0;
+    let live = true;
+    void Promise.all(stale.map(async (url) => [url, await ensureFetchableMediaUrl(runAction, url).catch(() => url)])).then((pairs) => {
+      if (!live) return;
+      const fresh = new Map(pairs.filter(([a, b]) => a !== b));
+      if (fresh.size) setTimelineRaw((prev) => withRenewedUrls(prev, fresh));
+    });
+    return () => {
+      live = false;
+    };
+  }, [runAction]);
   const [selectedTextId, setSelectedTextId] = useState(null);
   const [tab, setTab] = useState("media");
   const [railTab, setRailTab] = useState(() => {
@@ -233,9 +260,12 @@ function VideoEditorExperience({
   const [aiBusy, setAiBusy] = useState(false);
   const [usingTemplateId, setUsingTemplateId] = useState(null);
   const [notice, setNotice] = useState(null);
+  const [toolsOpen, setToolsOpen] = useState(false);
+  const [produceOpen, setProduceOpen] = useState(false);
   const [playing, setPlaying] = useState(false);
   const [playhead, setPlayhead] = useState(0);
   const [sourceSec, setSourceSec] = useState({});
+  sourceSecRef.current = sourceSec;
   const [scrub, setScrub] = useState({
     sec: 0,
     nonce: 0
@@ -353,13 +383,18 @@ function VideoEditorExperience({
   const openSavedProject = useCallback((row) => {
     var _a2, _b2, _c2, _d2;
     flushProject();
-    setTimeline({
+    setTimeline(__spreadProps(__spreadValues(__spreadValues({
       clips: [...row.timeline.clips],
       texts: [...row.timeline.texts],
-      segments: row.timeline.segments ? [...row.timeline.segments] : [],
+      segments: row.timeline.segments ? [...row.timeline.segments] : []
+    }, row.timeline.sceneAudio ? {
+      sceneAudio: [...row.timeline.sceneAudio]
+    } : {}), row.timeline.aspect ? {
+      aspect: row.timeline.aspect
+    } : {}), {
       voiceover: (_a2 = row.timeline.voiceover) != null ? _a2 : null,
       soundtrack: (_b2 = row.timeline.soundtrack) != null ? _b2 : null
-    });
+    }));
     setLogoSrc(row.logoSrc);
     setActiveProjectId(row.id);
     activeIdRef.current = row.id;
@@ -429,16 +464,24 @@ function VideoEditorExperience({
   }, []);
   const addBlankScene = useCallback(() => {
     const clip = clipFromColor("#101014");
-    const title = textClipAt(0, {
+    const title = __spreadProps(__spreadValues({}, textClipAt(0, {
       text: "Build your own scene",
       x: 0.5,
       y: 0.46
+    })), {
+      sceneId: clip.id
     });
     setDirty(true);
-    setTimeline((t) => __spreadProps(__spreadValues({}, t), {
-      clips: [...t.clips, clip],
-      texts: [...t.texts, title]
-    }));
+    setTimeline((t) => {
+      var _a2, _b2;
+      const startSec = (_b2 = (_a2 = sceneSpans(t.clips, sourceSecRef.current).at(-1)) == null ? void 0 : _a2.endSec) != null ? _b2 : 0;
+      return __spreadProps(__spreadValues({}, t), {
+        clips: [...t.clips, clip],
+        texts: [...t.texts, __spreadProps(__spreadValues({}, title), {
+          startSec
+        })]
+      });
+    });
     setSelectedClipId(clip.id);
     setSelectedTextId(title.id);
     setRailTab(null);
@@ -478,7 +521,9 @@ function VideoEditorExperience({
     try {
       const imported = await loadTemplateTimeline(row);
       setDirty(true);
-      setTimeline(imported.timeline);
+      setTimeline(__spreadValues(__spreadValues({}, imported.timeline), imported.aspect ? {
+        aspect: imported.aspect
+      } : {}));
       setSelectedClipId((_b2 = (_a2 = imported.timeline.clips[0]) == null ? void 0 : _a2.id) != null ? _b2 : null);
       setSelectedTextId((_d2 = (_c2 = imported.timeline.texts[0]) == null ? void 0 : _c2.id) != null ? _d2 : null);
       if (imported.logoSrc) setLogoSrc(imported.logoSrc);
@@ -493,7 +538,7 @@ function VideoEditorExperience({
   const addText = useCallback((preset) => {
     const text = textClipAt(playhead, preset);
     setTimeline((t) => __spreadProps(__spreadValues({}, t), {
-      texts: [...t.texts, text]
+      texts: [...t.texts, stampScene(text, t.clips, sourceSecRef.current)]
     }));
     setSelectedTextId(text.id);
     setTab("text");
@@ -618,6 +663,91 @@ function VideoEditorExperience({
     }
     audioRecorder.start().then(() => setMicTakeOn(true)).catch((err) => setRecordError(friendlyMediaError(err, "record")));
   }, [audioRecorder, uploadMedia, micTakeOn]);
+  const addSceneAudio = useCallback((audio) => {
+    if (!selectedClipId) return;
+    setDirty(true);
+    setTimeline((t) => {
+      var _a2, _b2, _c2, _d2;
+      const span = sceneSpans(t.clips, sourceSecRef.current).find((s) => s.id === selectedClipId);
+      const own = ((_a2 = t.sceneAudio) != null ? _a2 : []).filter((a) => a.sceneId === selectedClipId);
+      const startSec = Math.max((_b2 = span == null ? void 0 : span.startSec) != null ? _b2 : 0, ...own.map((a) => {
+        var _a3;
+        return a.startSec + ((_a3 = a.durationSec) != null ? _a3 : 0);
+      }));
+      return __spreadProps(__spreadValues({}, t), {
+        sceneAudio: [...(_c2 = t.sceneAudio) != null ? _c2 : [], {
+          id: `sa-${Date.now().toString(36)}`,
+          audioUrl: audio.audioUrl,
+          startSec,
+          durationSec: null,
+          volume: 1,
+          label: (_d2 = audio.label) == null ? void 0 : _d2.slice(0, 60),
+          sceneId: selectedClipId
+        }]
+      });
+    });
+  }, [selectedClipId, setTimeline]);
+  const selectedBlur = ((_e = timeline.segments) != null ? _e : []).find((s) => s.id === selectedSegmentId && s.kind === "blur");
+  const patchBlur = useCallback((patch) => {
+    if (!selectedSegmentId) return;
+    setDirty(true);
+    setTimeline((t) => {
+      var _a2;
+      return __spreadProps(__spreadValues({}, t), {
+        segments: ((_a2 = t.segments) != null ? _a2 : []).map((s) => s.id === selectedSegmentId && s.blur ? __spreadProps(__spreadValues({}, s), {
+          blur: __spreadValues(__spreadValues({}, s.blur), patch)
+        }) : s)
+      });
+    });
+  }, [selectedSegmentId, setTimeline]);
+  const applyFootage = useCallback((sceneId, footage) => {
+    setDirty(true);
+    setSourceSec((prev) => __spreadProps(__spreadValues({}, prev), {
+      [sceneId]: footage.sourceSec
+    }));
+    setTimeline((t) => {
+      const scene = t.clips.find((c) => c.id === sceneId);
+      if (!scene) return t;
+      return updateClip(t, sceneId, sceneFootagePatch(scene, footage, sourceSecRef.current[sceneId]));
+    });
+  }, [setTimeline]);
+  const produceAspect = useMemo(() => {
+    const c = canvasForRatio(timeline.aspect);
+    return !c ? "16:9" : c.height > c.width ? "9:16" : c.height === c.width ? "1:1" : "16:9";
+  }, [timeline.aspect]);
+  const filmScenes = useCallback((sceneIds) => {
+    var _a2;
+    if (!runAction) return;
+    const jobs = produceScenes(timelineRef.current, sourceSecRef.current).filter((s) => sceneIds.includes(s.sceneId)).map((s) => {
+      var _a3, _b2;
+      return produceJob(s, (_b2 = (_a3 = STATIC_VIDEO_MODELS[0]) == null ? void 0 : _a3.supportedDurationsSeconds) != null ? _b2 : [4, 6, 8]);
+    });
+    if (!jobs.length) return;
+    setNotice(`Filming ${jobs.length} scene${jobs.length === 1 ? "" : "s"} - they land in place in a few minutes.`);
+    void runProduce(jobs, runAction, {
+      aspectRatio: produceAspect,
+      model: (_a2 = STATIC_VIDEO_MODELS[0]) == null ? void 0 : _a2.id,
+      onStatus: (sceneId, status) => {
+        if (status.state === "done") applyFootage(sceneId, status.footage);
+        if (status.state === "failed") setNotice(status.message);
+      }
+    });
+  }, [runAction, produceAspect, applyFootage]);
+  const addLibraryMedia = useCallback((asset) => {
+    const id = `lib-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+    setDeviceMedia((prev) => [{
+      id,
+      type: asset.type,
+      src: asset.src,
+      x: 0,
+      y: 0,
+      width: 640,
+      height: 360,
+      zIndex: 1,
+      generatedAssetName: asset.name
+    }, ...prev]);
+    return id;
+  }, []);
   const dropSegment = useCallback((kind) => {
     if (timeline.clips.length === 0) {
       setNotice("Add a scene first \u2014 segments sit across the cut.");
@@ -627,7 +757,7 @@ function VideoEditorExperience({
     setTimeline((t) => {
       var _a2;
       return __spreadProps(__spreadValues({}, t), {
-        segments: [...(_a2 = t.segments) != null ? _a2 : [], seg]
+        segments: [...(_a2 = t.segments) != null ? _a2 : [], stampScene(seg, t.clips, sourceSecRef.current)]
       });
     });
     setSelectedSegmentId(seg.id);
@@ -706,15 +836,23 @@ function VideoEditorExperience({
     }
   }, [selectedClipId]);
   const exportTimeline = useCallback(() => {
+    var _a2;
     if (timeline.clips.length === 0) {
       setNotice("Add clips to the timeline first.");
       return;
     }
     flushProject();
     setRailTab(null);
-    if (onExport) onExport(buildExportSpec(timeline));
+    const first = timeline.clips[0];
+    const firstItem = media.find((m) => m.id === first.itemId);
+    const canvas = (_a2 = canvasForRatio(timeline.aspect)) != null ? _a2 : firstItem ? canvasForAspect(firstItem.width, firstItem.height) : void 0;
+    if (onExport) onExport(buildExportSpec(timeline, __spreadValues({
+      sourceSec
+    }, canvas ? {
+      canvas
+    } : {})));
     else setNotice("Export renders through the yantra-video service - not wired in this host yet.");
-  }, [flushProject, timeline, onExport]);
+  }, [flushProject, timeline, onExport, media, sourceSec]);
   const previewPlay = useCallback(() => {
     if (timeline.clips.length === 0) {
       setNotice("Add a clip from Media, then tap Preview.");
@@ -724,7 +862,7 @@ function VideoEditorExperience({
     setPlaying((on) => !on);
   }, [timeline.clips.length]);
   const VideoPreview = getVideoPreviewRenderer();
-  const selectedFilter = filterById((_e = selected == null ? void 0 : selected.filter) != null ? _e : "none");
+  const selectedFilter = filterById((_f = selected == null ? void 0 : selected.filter) != null ? _f : "none");
   const selectedSource = selected ? sourceSec[selected.id] : void 0;
   const projectList = useMemo(() => {
     if (activeProjectId && projectRows.some((row) => row.id === activeProjectId)) return projectRows;
@@ -736,504 +874,538 @@ function VideoEditorExperience({
       updatedAt: Date.now()
     }, ...projectRows];
   }, [activeProjectId, localTitle, timeline, logoSrc, projectRows]);
-  return /* @__PURE__ */ jsx(GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ jsxs(KeyboardAwareScreen, { style: styles.root, testID: "video-editor", children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.headerCopy, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.headerProject, numberOfLines: 1, children: localTitle }),
-        /* @__PURE__ */ jsxs(Text, { style: styles.headerSaved, children: [
-          dirty ? "Unsaved" : "Saved",
-          /* @__PURE__ */ jsx(Text, { style: styles.headerSavedDim, children: " \xB7 30 fps MP4" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: previewPlay, disabled: timeline.clips.length === 0, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: playing ? "Pause preview" : "Preview", style: timeline.clips.length === 0 ? styles.disabled : styles.headerGhostBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.headerGhost, children: playing ? "Pause" : "Preview" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: exportTimeline, disabled: timeline.clips.length === 0, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Export video", accessibilityHint: timeline.clips.length === 0 ? "Add a scene or clip before exporting" : void 0, style: [styles.exportBtn, timeline.clips.length === 0 ? styles.disabled : null], children: /* @__PURE__ */ jsx(Text, { style: styles.exportBtnLabel, children: "Export" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-        flushProject();
-        dismissKeyboard();
-        onClose();
-      }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#E8E8EE" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.workspace, children: [
-      railTab || recordOpen ? /* @__PURE__ */ jsxs(View, { style: [styles.sheet, railTab === "templates" && !recordOpen ? styles.sheetTall : null], children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.sheetHead, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: recordOpen ? "Record" : (_g = (_f = TABS.find((entry) => entry.id === railTab)) == null ? void 0 : _f.label) != null ? _g : "Tools" }),
-          railTab === "projects" && !recordOpen ? /* @__PURE__ */ jsxs(Pressable, { onPress: startNewProject, style: styles.sheetNewBtn, accessibilityRole: "button", accessibilityLabel: "New project", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 14, color: "#101013" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.sheetNewBtnLabel, children: "New" })
-          ] }) : null,
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-            setRailTab(null);
-            setRecordOpen(false);
-            setMicTakeOn(false);
-          }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close tools", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#F2F2F5" }) })
+  return /* @__PURE__ */ jsxs(GestureHandlerRootView, { style: styles.root, children: [
+    /* @__PURE__ */ jsx(ToolsDrawer, { visible: toolsOpen, onClose: () => setToolsOpen(false), media, selectedSrc: (_g = selected == null ? void 0 : selected.src) != null ? _g : null, runAction, uploadMedia, onAddMedia: (url, type, name) => {
+      setDeviceMedia((prev) => [{
+        id: `tool-${Date.now().toString(36)}`,
+        type,
+        src: url,
+        x: 0,
+        y: 0,
+        width: 640,
+        height: 360,
+        zIndex: 1,
+        generatedAssetName: name
+      }, ...prev]);
+      setNotice(`${name} added to the library`);
+    } }),
+    /* @__PURE__ */ jsx(ProduceVideoSheet, { visible: produceOpen, onClose: () => setProduceOpen(false), timeline, sourceSec, aspectRatio: produceAspect, runAction, onFootage: applyFootage }),
+    /* @__PURE__ */ jsxs(KeyboardAwareScreen, { style: styles.root, testID: "video-editor", children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.headerCopy, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.headerProject, numberOfLines: 1, children: localTitle }),
+          /* @__PURE__ */ jsxs(Text, { style: styles.headerSaved, children: [
+            dirty ? "Unsaved" : "Saved",
+            /* @__PURE__ */ jsx(Text, { style: styles.headerSavedDim, children: " \xB7 30 fps MP4" })
+          ] })
         ] }),
-        railTab === "templates" && !recordOpen ? /* @__PURE__ */ jsx(View, { style: styles.templateSheetBody, children: /* @__PURE__ */ jsx(FlatList, { data: templateGrid, keyExtractor: (pair) => pair.map((row) => row.id).join(":"), keyboardShouldPersistTaps: "handled", style: styles.templateList, contentContainerStyle: styles.templateListInner, extraData: `${templatesLoadingMore}:${templates.length}`, ListHeaderComponent: /* @__PURE__ */ jsxs(View, { style: styles.templatesPane, children: [
-          /* @__PURE__ */ jsxs(View, { style: styles.searchField, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 20, color: "#8A8A94" }),
-            /* @__PURE__ */ jsx(TextInput, { value: templateQuery, onChangeText: setTemplateQuery, placeholder: "Search templates\u2026", placeholderTextColor: "#6A6A74", style: styles.searchInput, autoCorrect: false, autoCapitalize: "none", autoFocus: false, returnKeyType: "search", accessibilityLabel: "Search templates", onSubmitEditing: () => setTemplateSearch(templateQuery.trim()) }),
-            templateQuery.length > 0 ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-              setTemplateQuery("");
-              setTemplateSearch("");
-              dismissKeyboard();
-            }, style: styles.searchClear, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Clear search", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close-circle", size: 18, color: "#8A8A94" }) }) : null
+        timeline.clips.some((c) => c.fillColor) ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setProduceOpen(true), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Produce video - film the colour scenes", style: styles.headerGhostBtn, testID: "video-editor-produce", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-play-outline", size: 18, color: "#F7F7FA" }) }) : null,
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setToolsOpen(true), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Tools", style: styles.headerGhostBtn, testID: "video-editor-tools", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "toolbox-outline", size: 18, color: "#F7F7FA" }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: previewPlay, disabled: timeline.clips.length === 0, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: playing ? "Pause preview" : "Preview", style: timeline.clips.length === 0 ? styles.disabled : styles.headerGhostBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.headerGhost, children: playing ? "Pause" : "Preview" }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: exportTimeline, disabled: timeline.clips.length === 0, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Export video", accessibilityHint: timeline.clips.length === 0 ? "Add a scene or clip before exporting" : void 0, style: [styles.exportBtn, timeline.clips.length === 0 ? styles.disabled : null], children: /* @__PURE__ */ jsx(Text, { style: styles.exportBtnLabel, children: "Export" }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+          flushProject();
+          dismissKeyboard();
+          onClose();
+        }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#E8E8EE" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: styles.workspace, children: [
+        railTab || recordOpen ? /* @__PURE__ */ jsxs(View, { style: [styles.sheet, railTab === "templates" && !recordOpen ? styles.sheetTall : null], children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.sheetHead, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: recordOpen ? "Record" : (_i = (_h = TABS.find((entry) => entry.id === railTab)) == null ? void 0 : _h.label) != null ? _i : "Tools" }),
+            railTab === "projects" && !recordOpen ? /* @__PURE__ */ jsxs(Pressable, { onPress: startNewProject, style: styles.sheetNewBtn, accessibilityRole: "button", accessibilityLabel: "New project", children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 14, color: "#101013" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.sheetNewBtnLabel, children: "New" })
+            ] }) : null,
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+              setRailTab(null);
+              setRecordOpen(false);
+              setMicTakeOn(false);
+            }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close tools", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#F2F2F5" }) })
           ] }),
-          templatesLoading && templates.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles.emptyPanel, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: "#E8E8EE" }) }) : templates.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyPanel, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 22, color: "#6A6A74" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "No templates" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: templateSearch ? "No templates match that search." : "The studio catalog is empty in this environment." })
-          ] }) : null
-        ] }), ListFooterComponent: templates.length === 0 ? null : /* @__PURE__ */ jsx(View, { style: styles.templateLoadBar, children: /* @__PURE__ */ jsx(Pressable, { onPress: loadMoreTemplates, disabled: templatesLoadingMore, style: [styles.loadMoreBtn, templatesLoadingMore ? styles.disabled : null], accessibilityRole: "button", accessibilityLabel: "Load more templates", children: templatesLoadingMore ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#101013" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 20, color: "#101013" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.loadMoreBtnLabel, children: "Load more" })
-        ] }) }) }), renderItem: ({
-          item: pair
-        }) => /* @__PURE__ */ jsxs(View, { style: styles.templateRow, children: [
-          pair.map((row) => /* @__PURE__ */ jsx(TemplateCatalogCard, { row, generating: aiBusy, using: usingTemplateId === row.id, onGenerate: (item) => generateAiScene(item.prompt, {
-            stayOnTemplates: true,
-            aspect: item.aspect
-          }), onPreview: previewStudioTemplate, onUse: (item) => void useStudioTemplate(item) }, row.id)),
-          pair.length < templateCols ? /* @__PURE__ */ jsx(View, { style: {
-            flex: 1
-          } }) : null
-        ] }) }) }) : /* @__PURE__ */ jsx(ScrollView, { style: styles.sidePaneScroll, contentContainerStyle: styles.sidePaneInner, keyboardShouldPersistTaps: "always", children: /* @__PURE__ */ jsx(View, { style: styles.panel, children: recordOpen ? /* @__PURE__ */ jsxs(View, { style: styles.recordPane, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Web records the screen, a window, or the camera, then drops the take on the timeline. On the phone that is camera, mic, or the library \u2014 screen capture stays on desktop." }),
-          recordError ? /* @__PURE__ */ jsx(Text, { style: styles.recordError, children: recordError }) : null,
-          [{
-            id: "camera-video",
-            icon: "video-outline",
-            label: "Record video",
-            hint: "Rear camera, up to 2 minutes"
-          }, {
-            id: "camera-photo",
-            icon: "camera-outline",
-            label: "Take photo",
-            hint: "Still lands as a scene"
-          }, {
-            id: "library",
-            icon: "image-multiple-outline",
-            label: "Photo Library",
-            hint: "Same as Open Media"
-          }, {
-            id: "file",
-            icon: "folder-outline",
-            label: "Choose file",
-            hint: "Video, image, or audio"
-          }].map((row) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => captureFromRecord(row.id), disabled: recordOn || !onPickLocalMedia, style: [styles.recordRow, (recordOn || !onPickLocalMedia) && styles.disabled], accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: row.icon, size: 22, color: "#F2F2F5" }),
-            /* @__PURE__ */ jsxs(View, { style: styles.segmentMenuCopy, children: [
-              /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuLabel, children: row.label }),
-              /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuHint, children: row.hint })
-            ] })
-          ] }, row.id)),
-          /* @__PURE__ */ jsxs(Pressable, { onPress: toggleMicTake, disabled: !audioRecorder, style: [styles.recordRow, !audioRecorder && styles.disabled], accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: micTakeOn ? "stop-circle-outline" : "microphone-outline", size: 22, color: micTakeOn ? "#F87171" : "#F2F2F5" }),
-            /* @__PURE__ */ jsxs(View, { style: styles.segmentMenuCopy, children: [
-              /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuLabel, children: micTakeOn ? "Stop voice take" : "Record voice" }),
-              /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuHint, children: audioRecorder ? "Adds a voiceover on the Audio lane" : "Host microphone is not wired in this build" })
+          railTab === "templates" && !recordOpen ? /* @__PURE__ */ jsx(View, { style: styles.templateSheetBody, children: /* @__PURE__ */ jsx(FlatList, { data: templateGrid, keyExtractor: (pair) => pair.map((row) => row.id).join(":"), keyboardShouldPersistTaps: "handled", style: styles.templateList, contentContainerStyle: styles.templateListInner, extraData: `${templatesLoadingMore}:${templates.length}`, ListHeaderComponent: /* @__PURE__ */ jsxs(View, { style: styles.templatesPane, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.searchField, children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 20, color: "#8A8A94" }),
+              /* @__PURE__ */ jsx(TextInput, { value: templateQuery, onChangeText: setTemplateQuery, placeholder: "Search templates\u2026", placeholderTextColor: "#6A6A74", style: styles.searchInput, autoCorrect: false, autoCapitalize: "none", autoFocus: false, returnKeyType: "search", accessibilityLabel: "Search templates", onSubmitEditing: () => setTemplateSearch(templateQuery.trim()) }),
+              templateQuery.length > 0 ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+                setTemplateQuery("");
+                setTemplateSearch("");
+                dismissKeyboard();
+              }, style: styles.searchClear, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Clear search", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close-circle", size: 18, color: "#8A8A94" }) }) : null
+            ] }),
+            templatesLoading && templates.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles.emptyPanel, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: "#E8E8EE" }) }) : templates.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyPanel, children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 22, color: "#6A6A74" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "No templates" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: templateSearch ? "No templates match that search." : "The studio catalog is empty in this environment." })
+            ] }) : null
+          ] }), ListFooterComponent: templates.length === 0 ? null : /* @__PURE__ */ jsx(View, { style: styles.templateLoadBar, children: /* @__PURE__ */ jsx(Pressable, { onPress: loadMoreTemplates, disabled: templatesLoadingMore, style: [styles.loadMoreBtn, templatesLoadingMore ? styles.disabled : null], accessibilityRole: "button", accessibilityLabel: "Load more templates", children: templatesLoadingMore ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#101013" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 20, color: "#101013" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.loadMoreBtnLabel, children: "Load more" })
+          ] }) }) }), renderItem: ({
+            item: pair
+          }) => /* @__PURE__ */ jsxs(View, { style: styles.templateRow, children: [
+            pair.map((row) => /* @__PURE__ */ jsx(TemplateCatalogCard, { row, generating: aiBusy, using: usingTemplateId === row.id, onGenerate: (item) => generateAiScene(item.prompt, {
+              stayOnTemplates: true,
+              aspect: item.aspect
+            }), onPreview: previewStudioTemplate, onUse: (item) => void useStudioTemplate(item) }, row.id)),
+            pair.length < templateCols ? /* @__PURE__ */ jsx(View, { style: {
+              flex: 1
+            } }) : null
+          ] }) }) }) : /* @__PURE__ */ jsx(ScrollView, { style: styles.sidePaneScroll, contentContainerStyle: styles.sidePaneInner, keyboardShouldPersistTaps: "always", children: /* @__PURE__ */ jsx(View, { style: styles.panel, children: recordOpen ? /* @__PURE__ */ jsxs(View, { style: styles.recordPane, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Web records the screen, a window, or the camera, then drops the take on the timeline. On the phone that is camera, mic, or the library \u2014 screen capture stays on desktop." }),
+            recordError ? /* @__PURE__ */ jsx(Text, { style: styles.recordError, children: recordError }) : null,
+            [{
+              id: "camera-video",
+              icon: "video-outline",
+              label: "Record video",
+              hint: "Rear camera, up to 2 minutes"
+            }, {
+              id: "camera-photo",
+              icon: "camera-outline",
+              label: "Take photo",
+              hint: "Still lands as a scene"
+            }, {
+              id: "library",
+              icon: "image-multiple-outline",
+              label: "Photo Library",
+              hint: "Same as Open Media"
+            }, {
+              id: "file",
+              icon: "folder-outline",
+              label: "Choose file",
+              hint: "Video, image, or audio"
+            }].map((row) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => captureFromRecord(row.id), disabled: recordOn || !onPickLocalMedia, style: [styles.recordRow, (recordOn || !onPickLocalMedia) && styles.disabled], accessibilityRole: "button", children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: row.icon, size: 22, color: "#F2F2F5" }),
+              /* @__PURE__ */ jsxs(View, { style: styles.segmentMenuCopy, children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuLabel, children: row.label }),
+                /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuHint, children: row.hint })
+              ] })
+            ] }, row.id)),
+            /* @__PURE__ */ jsxs(Pressable, { onPress: toggleMicTake, disabled: !audioRecorder, style: [styles.recordRow, !audioRecorder && styles.disabled], accessibilityRole: "button", children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: micTakeOn ? "stop-circle-outline" : "microphone-outline", size: 22, color: micTakeOn ? "#F87171" : "#F2F2F5" }),
+              /* @__PURE__ */ jsxs(View, { style: styles.segmentMenuCopy, children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuLabel, children: micTakeOn ? "Stop voice take" : "Record voice" }),
+                /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuHint, children: audioRecorder ? "Adds a voiceover on the Audio lane" : "Host microphone is not wired in this build" })
+              ] })
             ] })
-          ] })
-        ] }) : railTab === "media" ? /* @__PURE__ */ jsxs(View, { style: styles.mediaPane, children: [
-          onPickLocalMedia ? /* @__PURE__ */ jsx(View, { style: styles.pickRow, children: [{
-            id: "library",
-            icon: "image-multiple-outline",
-            label: "Photos"
-          }, {
-            id: "camera",
-            icon: "camera-outline",
-            label: "Camera"
-          }, {
-            id: "file",
-            icon: "folder-outline",
-            label: "Files"
-          }].map((source) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => pickIntoLibrary(source.id), disabled: mediaBusy, style: [styles.pickBtn, mediaBusy && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Upload from ${source.label}`, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: source.icon, size: 18, color: "#E8E8EE" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.pickBtnLabel, children: source.label })
-          ] }, source.id)) }) : null,
-          media.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyPanel, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 22, color: "#6A6A74" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "No media yet" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Upload from this phone, or tap a clip from this canvas to add it to the timeline." })
-          ] }) : /* @__PURE__ */ jsx(View, { style: styles.mediaGrid, children: media.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
-            if (item.type === "audio") {
-              setTimeline((t) => __spreadProps(__spreadValues({}, t), {
-                soundtrack: {
-                  audioUrl: item.src,
-                  mode: "mix",
-                  title: item.generatedAssetName || "Audio"
-                }
-              }));
-              setRailTab("music");
-              setTab("music");
-              return;
-            }
-            addClip(item);
-          }, style: styles.mediaTile, children: [
-            item.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
-              uri: item.src
-            }, style: styles.mediaThumb, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.mediaThumb, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: item.type === "audio" ? "music" : "play", size: 18, color: "#9A9AA5" }) }),
-            /* @__PURE__ */ jsx(View, { style: styles.mediaAdd, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 12, color: "#0A0A0C" }) })
-          ] }, item.id)) })
-        ] }) : railTab === "projects" ? /* @__PURE__ */ jsxs(View, { style: styles.projectsPane, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "A project is a saved timeline. Create one, then add clips from Media." }),
-          /* @__PURE__ */ jsxs(Pressable, { onPress: startNewProject, style: styles.solidBtn, accessibilityRole: "button", accessibilityLabel: "New project", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#101013" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.solidBtnLabel, children: "Create project" })
-          ] }),
-          /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: dirty ? "Unsaved changes \u2014 saves as soon as you edit." : projectHasWork(timeline) ? "All changes saved" : "Saves as soon as you edit." }),
-          projectList.map((row) => {
-            const current = row.id === "__current__" || row.id === activeProjectId;
-            const clips = row.timeline.clips.length;
-            const isDraft = row.id === "__current__";
-            return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
-              if (isDraft) return;
-              openSavedProject(row);
-            }, style: [styles.projectRow, current && styles.projectRowOn], children: [
-              renameId === row.id ? /* @__PURE__ */ jsx(TextInput, { value: renameDraft, onChangeText: setRenameDraft, onSubmitEditing: () => {
-                const title = renameDraft.trim() || "Untitled project";
-                const next = upsertVideoProject(projectRows, __spreadProps(__spreadValues({}, row), {
-                  title
+          ] }) : railTab === "media" ? /* @__PURE__ */ jsxs(View, { style: styles.mediaPane, children: [
+            onPickLocalMedia ? /* @__PURE__ */ jsx(View, { style: styles.pickRow, children: [{
+              id: "library",
+              icon: "image-multiple-outline",
+              label: "Photos"
+            }, {
+              id: "camera",
+              icon: "camera-outline",
+              label: "Camera"
+            }, {
+              id: "file",
+              icon: "folder-outline",
+              label: "Files"
+            }].map((source) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => pickIntoLibrary(source.id), disabled: mediaBusy, style: [styles.pickBtn, mediaBusy && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Upload from ${source.label}`, children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: source.icon, size: 18, color: "#E8E8EE" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.pickBtnLabel, children: source.label })
+            ] }, source.id)) }) : null,
+            media.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyPanel, children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 22, color: "#6A6A74" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "No media yet" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Upload from this phone, or tap a clip from this canvas to add it to the timeline." })
+            ] }) : /* @__PURE__ */ jsx(View, { style: styles.mediaGrid, children: media.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+              if (item.type === "audio") {
+                setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+                  soundtrack: {
+                    audioUrl: item.src,
+                    mode: "mix",
+                    title: item.generatedAssetName || "Audio"
+                  }
                 }));
-                persistVideoProjects(next);
-                setProjectRows(next);
-                if (row.id === activeProjectId) setLocalTitle(title);
-                setRenameId(null);
-              }, autoFocus: true, style: styles.renameInput }) : /* @__PURE__ */ jsxs(View, { style: styles.projectRowCopy, children: [
-                /* @__PURE__ */ jsx(Text, { style: styles.projectRowTitle, numberOfLines: 1, children: row.title }),
-                /* @__PURE__ */ jsxs(Text, { style: styles.projectRowMeta, children: [
-                  clips,
-                  " clip",
-                  clips === 1 ? "" : "s",
-                  " \xB7",
-                  " ",
-                  relativeProjectTime(row.updatedAt)
-                ] })
-              ] }),
-              !isDraft ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-                  setRenameId(row.id);
-                  setRenameDraft(row.title);
-                }, hitSlop: 8, accessibilityLabel: "Rename project", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "pencil-outline", size: 16, color: "#8B8B96" }) }),
-                /* @__PURE__ */ jsx(Pressable, { onPress: () => deleteSavedProject(row.id), hitSlop: 8, accessibilityLabel: "Delete project", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 16, color: "#FF6B6B" }) })
-              ] }) : /* @__PURE__ */ jsx(Text, { style: styles.projectRowMeta, children: "Current" })
-            ] }, row.id);
-          })
-        ] }) : tab === "ai" ? /* @__PURE__ */ jsxs(View, { children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Create with AI" }),
-          /* @__PURE__ */ jsx(TextInput, { value: aiPrompt, onChangeText: setAiPrompt, placeholder: "Continue the scene\u2026", placeholderTextColor: "#5A5A66", style: styles.textInput, multiline: true }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => generateAiScene(), disabled: aiBusy || !aiPrompt.trim(), style: [styles.chip, styles.chipActive, styles.chipWide], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: aiBusy ? "Generating\u2026" : "Generate scene" }) })
-        ] }) : railTab === "elements" ? /* @__PURE__ */ jsxs(View, { children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Blank scene" }),
-          /* @__PURE__ */ jsx(View, { style: styles.panelRow, children: SCENE_COLORS.map((color) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-            const clip = clipFromColor(color);
-            setDirty(true);
-            setTimeline((t) => __spreadProps(__spreadValues({}, t), {
-              clips: [...t.clips, clip]
-            }));
-            setSelectedClipId(clip.id);
-            setNotice("Blank scene added");
-          }, style: [styles.sceneSwatch, {
-            backgroundColor: color
-          }], accessibilityRole: "button", accessibilityLabel: `Add blank scene ${color}` }, color)) }),
-          /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Adds a colored still at the end of the timeline \u2014 hold duration in clip tools." })
-        ] }) : railTab === "logo" ? /* @__PURE__ */ jsxs(View, { children: [
-          logoSrc ? /* @__PURE__ */ jsx(Image, { source: {
-            uri: logoSrc
-          }, style: styles.logoPreview, contentFit: "contain" }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "A brand mark that rides every frame and exports with the video." }),
-          /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
-            /* @__PURE__ */ jsx(Pressable, { onPress: pickLogo, disabled: mediaBusy, style: [styles.chip, styles.chipActive, mediaBusy && styles.disabled], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: logoSrc ? "Replace logo" : "Upload logo" }) }),
-            logoSrc ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setLogoSrc(null), style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" }) }) : null
-          ] })
-        ] }) : tab === "trim" ? selected ? /* @__PURE__ */ jsx(TrimPanel, { clip: selected, sourceSec: selectedSource, onTrim: (start, end) => patchSelected(trimClip(selected, start, end)), onImageDuration: (sec) => patchSelected({
-          durationSec: sec
-        }), onMove: (dir) => setTimeline((t) => moveClip(t, selected.id, dir)), onRemove: () => {
-          setTimeline((t) => removeClip(t, selected.id));
-          setSelectedClipId(null);
-        }, canMoveLeft: selectedIndex > 0, canMoveRight: selectedIndex >= 0 && selectedIndex < timeline.clips.length - 1 }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Pick a clip on the timeline to change its timing, trim, motion, look and audio." }) : tab === "filter" && selected ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: FILTER_PRESETS.map((preset) => {
-          const active = selected.filter === preset.id;
-          return /* @__PURE__ */ jsxs(Pressable, { onPress: () => patchSelected({
-            filter: preset.id
-          }), style: styles.filterTile, accessibilityRole: "button", accessibilityState: {
-            selected: active
-          }, children: [
-            /* @__PURE__ */ jsxs(View, { style: [styles.filterThumb, active && styles.filterThumbActive], children: [
-              selected.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
-                uri: selected.src
-              }, style: StyleSheet.absoluteFill, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.mediaThumbVideo] }),
-              preset.overlays.map(([color, opacity]) => /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, {
-                backgroundColor: color,
-                opacity
-              }] }, `${color}-${opacity}`)),
-              preset.id === "none" ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "cancel", size: 18, color: "#9A9AA5", style: styles.filterNoneGlyph }) : null
+                setRailTab("music");
+                setTab("music");
+                return;
+              }
+              addClip(item);
+            }, style: styles.mediaTile, children: [
+              item.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
+                uri: item.src
+              }, style: styles.mediaThumb, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.mediaThumb, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: item.type === "audio" ? "music" : "play", size: 18, color: "#9A9AA5" }) }),
+              /* @__PURE__ */ jsx(View, { style: styles.mediaAdd, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 12, color: "#0A0A0C" }) })
+            ] }, item.id)) })
+          ] }) : railTab === "projects" ? /* @__PURE__ */ jsxs(View, { style: styles.projectsPane, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "A project is a saved timeline. Create one, then add clips from Media." }),
+            /* @__PURE__ */ jsxs(Pressable, { onPress: startNewProject, style: styles.solidBtn, accessibilityRole: "button", accessibilityLabel: "New project", children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#101013" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.solidBtnLabel, children: "Create project" })
             ] }),
-            /* @__PURE__ */ jsx(Text, { style: [styles.filterLabel, active && styles.filterLabelActive], children: preset.label })
-          ] }, preset.id);
-        }) }) : tab === "speed" && selected ? /* @__PURE__ */ jsxs(View, { children: [
-          /* @__PURE__ */ jsx(View, { style: styles.panelRow, children: SPEED_PRESETS.map((speed) => {
-            const active = selected.speed === speed;
-            return /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
-              speed
-            }), style: [styles.chip, active && styles.chipActive], accessibilityRole: "button", accessibilityState: {
-              selected: active
-            }, children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, active && styles.chipLabelActive], children: [
-              speed,
-              "\xD7"
-            ] }) }, speed);
-          }) }),
-          /* @__PURE__ */ jsx(View, { style: styles.panelRow, children: SPEED_CURVES.map((curve) => {
-            const active = selected.speedCurve === curve;
-            return /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
-              speedCurve: curve
-            }), style: [styles.chip, active && styles.chipActive], accessibilityRole: "button", accessibilityState: {
-              selected: active
-            }, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, active && styles.chipLabelActive], children: SPEED_CURVE_LABEL[curve] }) }, curve);
-          }) }),
-          selected.speedCurve !== "constant" ? /* @__PURE__ */ jsxs(Text, { style: styles.panelHint, children: [
-            "Curves render on export; preview plays ",
-            selected.speed,
-            "\xD7."
-          ] }) : null
-        ] }) : railTab === "text" ? /* @__PURE__ */ jsxs(View, { children: [
-          /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: TEXT_PRESETS.map((preset) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => addText({
-            text: preset.text,
-            x: preset.x,
-            y: preset.y
-          }), style: styles.textPreset, accessibilityRole: "button", accessibilityLabel: `Add ${preset.label}`, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.textPresetSample, numberOfLines: 1, children: preset.text }),
-            /* @__PURE__ */ jsx(Text, { style: styles.textPresetLabel, children: preset.label })
-          ] }, preset.id)) }),
-          /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Lands at the playhead. Tap the preview to edit, drag to place." }),
-          selectedText ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(TextInput, { value: selectedText.text, onChangeText: (text) => setTimeline((t) => updateText(t, selectedText.id, {
-              text
-            })), style: styles.textInput, placeholder: "Title", placeholderTextColor: "#5A5A66", selectionColor: "#8B7CFF", selectTextOnFocus: true, returnKeyType: "done", onSubmitEditing: dismissKeyboard }),
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: dirty ? "Unsaved changes \u2014 saves as soon as you edit." : projectHasWork(timeline) ? "All changes saved" : "Saves as soon as you edit." }),
+            projectList.map((row) => {
+              const current = row.id === "__current__" || row.id === activeProjectId;
+              const clips = row.timeline.clips.length;
+              const isDraft = row.id === "__current__";
+              return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+                if (isDraft) return;
+                openSavedProject(row);
+              }, style: [styles.projectRow, current && styles.projectRowOn], children: [
+                renameId === row.id ? /* @__PURE__ */ jsx(TextInput, { value: renameDraft, onChangeText: setRenameDraft, onSubmitEditing: () => {
+                  const title = renameDraft.trim() || "Untitled project";
+                  const next = upsertVideoProject(projectRows, __spreadProps(__spreadValues({}, row), {
+                    title
+                  }));
+                  persistVideoProjects(next);
+                  setProjectRows(next);
+                  if (row.id === activeProjectId) setLocalTitle(title);
+                  setRenameId(null);
+                }, autoFocus: true, style: styles.renameInput }) : /* @__PURE__ */ jsxs(View, { style: styles.projectRowCopy, children: [
+                  /* @__PURE__ */ jsx(Text, { style: styles.projectRowTitle, numberOfLines: 1, children: row.title }),
+                  /* @__PURE__ */ jsxs(Text, { style: styles.projectRowMeta, children: [
+                    clips,
+                    " clip",
+                    clips === 1 ? "" : "s",
+                    " \xB7",
+                    " ",
+                    relativeProjectTime(row.updatedAt)
+                  ] })
+                ] }),
+                !isDraft ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+                    setRenameId(row.id);
+                    setRenameDraft(row.title);
+                  }, hitSlop: 8, accessibilityLabel: "Rename project", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "pencil-outline", size: 16, color: "#8B8B96" }) }),
+                  /* @__PURE__ */ jsx(Pressable, { onPress: () => deleteSavedProject(row.id), hitSlop: 8, accessibilityLabel: "Delete project", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 16, color: "#FF6B6B" }) })
+                ] }) : /* @__PURE__ */ jsx(Text, { style: styles.projectRowMeta, children: "Current" })
+              ] }, row.id);
+            })
+          ] }) : tab === "ai" ? /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Create with AI" }),
+            /* @__PURE__ */ jsx(TextInput, { value: aiPrompt, onChangeText: setAiPrompt, placeholder: "Continue the scene\u2026", placeholderTextColor: "#5A5A66", style: styles.textInput, multiline: true }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => generateAiScene(), disabled: aiBusy || !aiPrompt.trim(), style: [styles.chip, styles.chipActive, styles.chipWide], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: aiBusy ? "Generating\u2026" : "Generate scene" }) })
+          ] }) : railTab === "elements" ? /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Blank scene" }),
+            /* @__PURE__ */ jsx(View, { style: styles.panelRow, children: SCENE_COLORS.map((color) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+              const clip = clipFromColor(color);
+              setDirty(true);
+              setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+                clips: [...t.clips, clip]
+              }));
+              setSelectedClipId(clip.id);
+              setNotice("Blank scene added");
+            }, style: [styles.sceneSwatch, {
+              backgroundColor: color
+            }], accessibilityRole: "button", accessibilityLabel: `Add blank scene ${color}` }, color)) }),
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Adds a colored still at the end of the timeline \u2014 hold duration in clip tools." })
+          ] }) : railTab === "logo" ? /* @__PURE__ */ jsxs(View, { children: [
+            logoSrc ? /* @__PURE__ */ jsx(Image, { source: {
+              uri: logoSrc
+            }, style: styles.logoPreview, contentFit: "contain" }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "A brand mark that rides every frame and exports with the video." }),
             /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
-              /* @__PURE__ */ jsx(Stepper, { label: "Start", value: `${selectedText.startSec.toFixed(1)}s`, onLess: () => setTimeline((t) => updateText(t, selectedText.id, {
-                startSec: Math.max(0, selectedText.startSec - 0.5)
-              })), onMore: () => setTimeline((t) => updateText(t, selectedText.id, {
-                startSec: selectedText.startSec + 0.5
-              })) }),
-              /* @__PURE__ */ jsx(Stepper, { label: "For", value: `${selectedText.durationSec.toFixed(1)}s`, onLess: () => setTimeline((t) => updateText(t, selectedText.id, {
-                durationSec: Math.max(0.5, selectedText.durationSec - 0.5)
-              })), onMore: () => setTimeline((t) => updateText(t, selectedText.id, {
-                durationSec: selectedText.durationSec + 0.5
-              })) }),
-              /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-                setTimeline((t) => removeText(t, selectedText.id));
-                setSelectedTextId(null);
-              }, style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" }) })
+              /* @__PURE__ */ jsx(Pressable, { onPress: pickLogo, disabled: mediaBusy, style: [styles.chip, styles.chipActive, mediaBusy && styles.disabled], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: logoSrc ? "Replace logo" : "Upload logo" }) }),
+              logoSrc ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setLogoSrc(null), style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" }) }) : null
             ] })
-          ] }) : null
-        ] }) : railTab === "music" ? /* @__PURE__ */ jsx(SoundtrackPanel, { runAction, soundtrack: (_h = timeline.soundtrack) != null ? _h : null, totalSec: total.knownSec, onSoundtrack: (soundtrack) => setTimeline((t) => __spreadProps(__spreadValues({}, t), {
-          soundtrack
-        })), onNotice: setNotice }) : railTab === "voiceover" ? /* @__PURE__ */ jsx(VoicePanel, { runAction, uploadMedia, audioRecorder, voiceover: (_i = timeline.voiceover) != null ? _i : null, selectedClip: selected, onVoiceover: (voiceover) => setTimeline((t) => __spreadProps(__spreadValues({}, t), {
-          voiceover
-        })), onNotice: setNotice }) : railTab === "agent" ? /* @__PURE__ */ jsx(AgentCutPane, { timeline, setTimeline, token, indexUrl }) : railTab === "captions" ? /* @__PURE__ */ jsxs(View, { children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Captions" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "One captions lane \u2014 add at the playhead, then tap a row to edit." }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-            const preset = TEXT_PRESETS.find((p) => p.id === "caption");
-            addText(preset ? {
+          ] }) : tab === "trim" ? selected ? /* @__PURE__ */ jsx(TrimPanel, { clip: selected, sourceSec: selectedSource, onTrim: (start, end) => patchSelected(trimClip(selected, start, end)), onImageDuration: (sec) => patchSelected({
+            durationSec: sec
+          }), onMove: (dir) => setTimeline((t) => moveClip(t, selected.id, dir)), onRemove: () => {
+            setTimeline((t) => removeClip(t, selected.id));
+            setSelectedClipId(null);
+          }, canMoveLeft: selectedIndex > 0, canMoveRight: selectedIndex >= 0 && selectedIndex < timeline.clips.length - 1 }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Pick a clip on the timeline to change its timing, trim, motion, look and audio." }) : tab === "filter" && selected ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: FILTER_PRESETS.map((preset) => {
+            const active = selected.filter === preset.id;
+            return /* @__PURE__ */ jsxs(Pressable, { onPress: () => patchSelected({
+              filter: preset.id
+            }), style: styles.filterTile, accessibilityRole: "button", accessibilityState: {
+              selected: active
+            }, children: [
+              /* @__PURE__ */ jsxs(View, { style: [styles.filterThumb, active && styles.filterThumbActive], children: [
+                selected.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
+                  uri: selected.src
+                }, style: StyleSheet.absoluteFill, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.mediaThumbVideo] }),
+                preset.overlays.map(([color, opacity]) => /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, {
+                  backgroundColor: color,
+                  opacity
+                }] }, `${color}-${opacity}`)),
+                preset.id === "none" ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "cancel", size: 18, color: "#9A9AA5", style: styles.filterNoneGlyph }) : null
+              ] }),
+              /* @__PURE__ */ jsx(Text, { style: [styles.filterLabel, active && styles.filterLabelActive], children: preset.label })
+            ] }, preset.id);
+          }) }) : tab === "speed" && selected ? /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(View, { style: styles.panelRow, children: SPEED_PRESETS.map((speed) => {
+              const active = selected.speed === speed;
+              return /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
+                speed
+              }), style: [styles.chip, active && styles.chipActive], accessibilityRole: "button", accessibilityState: {
+                selected: active
+              }, children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, active && styles.chipLabelActive], children: [
+                speed,
+                "\xD7"
+              ] }) }, speed);
+            }) }),
+            /* @__PURE__ */ jsx(View, { style: styles.panelRow, children: SPEED_CURVES.map((curve) => {
+              const active = selected.speedCurve === curve;
+              return /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
+                speedCurve: curve
+              }), style: [styles.chip, active && styles.chipActive], accessibilityRole: "button", accessibilityState: {
+                selected: active
+              }, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, active && styles.chipLabelActive], children: SPEED_CURVE_LABEL[curve] }) }, curve);
+            }) }),
+            selected.speedCurve !== "constant" ? /* @__PURE__ */ jsxs(Text, { style: styles.panelHint, children: [
+              "Curves render on export; preview plays ",
+              selected.speed,
+              "\xD7."
+            ] }) : null
+          ] }) : railTab === "text" ? /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: TEXT_PRESETS.map((preset) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => addText({
               text: preset.text,
               x: preset.x,
               y: preset.y
-            } : {
-              text: "Caption",
-              x: 0.5,
-              y: 0.86
-            });
-          }, style: [styles.chip, styles.chipActive, styles.chipWide], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: "Add caption at playhead" }) }),
-          timeline.texts.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "No captions yet." }) : timeline.texts.map((row) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
-            setSelectedTextId(row.id);
-            setTab("text");
-          }, style: styles.captionRow, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.captionRowText, numberOfLines: 1, children: row.text || "Caption" }),
-            /* @__PURE__ */ jsxs(Text, { style: styles.captionRowMeta, children: [
-              row.startSec.toFixed(1),
-              "s"
+            }), style: styles.textPreset, accessibilityRole: "button", accessibilityLabel: `Add ${preset.label}`, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.textPresetSample, numberOfLines: 1, children: preset.text }),
+              /* @__PURE__ */ jsx(Text, { style: styles.textPresetLabel, children: preset.label })
+            ] }, preset.id)) }),
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Lands at the playhead. Tap the preview to edit, drag to place." }),
+            selectedText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(TextInput, { value: selectedText.text, onChangeText: (text) => setTimeline((t) => updateText(t, selectedText.id, {
+                text
+              })), style: styles.textInput, placeholder: "Title", placeholderTextColor: "#5A5A66", selectionColor: "#8B7CFF", selectTextOnFocus: true, returnKeyType: "done", onSubmitEditing: dismissKeyboard }),
+              /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+                /* @__PURE__ */ jsx(Stepper, { label: "Start", value: `${selectedText.startSec.toFixed(1)}s`, onLess: () => setTimeline((t) => updateText(t, selectedText.id, {
+                  startSec: Math.max(0, selectedText.startSec - 0.5)
+                })), onMore: () => setTimeline((t) => updateText(t, selectedText.id, {
+                  startSec: selectedText.startSec + 0.5
+                })) }),
+                /* @__PURE__ */ jsx(Stepper, { label: "For", value: `${selectedText.durationSec.toFixed(1)}s`, onLess: () => setTimeline((t) => updateText(t, selectedText.id, {
+                  durationSec: Math.max(0.5, selectedText.durationSec - 0.5)
+                })), onMore: () => setTimeline((t) => updateText(t, selectedText.id, {
+                  durationSec: selectedText.durationSec + 0.5
+                })) }),
+                /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+                  setTimeline((t) => removeText(t, selectedText.id));
+                  setSelectedTextId(null);
+                }, style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" }) })
+              ] })
+            ] }) : null
+          ] }) : railTab === "music" ? /* @__PURE__ */ jsx(SoundtrackPanel, { runAction, soundtrack: (_j = timeline.soundtrack) != null ? _j : null, totalSec: total.knownSec, onSoundtrack: (soundtrack) => setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+            soundtrack
+          })), onNotice: setNotice }) : railTab === "voiceover" ? /* @__PURE__ */ jsx(VoicePanel, { runAction, uploadMedia, audioRecorder, voiceover: (_k = timeline.voiceover) != null ? _k : null, selectedClip: selected, onVoiceover: (voiceover) => setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+            voiceover
+          })), onSceneAudio: addSceneAudio, onNotice: setNotice }) : railTab === "agent" ? /* @__PURE__ */ jsx(AgentCutPane, { timeline, setTimeline, token, indexUrl, runAction, uploadMedia, onAddMedia: addLibraryMedia, onFilm: filmScenes }) : railTab === "captions" ? /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Captions" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "One captions lane \u2014 add at the playhead, then tap a row to edit." }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+              const preset = TEXT_PRESETS.find((p) => p.id === "caption");
+              addText(preset ? {
+                text: preset.text,
+                x: preset.x,
+                y: preset.y
+              } : {
+                text: "Caption",
+                x: 0.5,
+                y: 0.86
+              });
+            }, style: [styles.chip, styles.chipActive, styles.chipWide], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: "Add caption at playhead" }) }),
+            timeline.texts.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "No captions yet." }) : timeline.texts.map((row) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+              setSelectedTextId(row.id);
+              setTab("text");
+            }, style: styles.captionRow, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.captionRowText, numberOfLines: 1, children: row.text || "Caption" }),
+              /* @__PURE__ */ jsxs(Text, { style: styles.captionRowMeta, children: [
+                row.startSec.toFixed(1),
+                "s"
+              ] })
+            ] }, row.id))
+          ] }) : railTab === "audio" ? /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "AI audio" }),
+            /* @__PURE__ */ jsx(TextInput, { value: audioPrompt, onChangeText: setAudioPrompt, placeholder: "Music or narration prompt\u2026", placeholderTextColor: "#5A5A66", style: styles.textInput, multiline: true }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: generateAiAudio, disabled: audioBusy || !audioPrompt.trim(), style: [styles.chip, styles.chipActive, styles.chipWide], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: audioBusy ? "Generating\u2026" : "Generate" }) }),
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Lands in the media library \u2014 tap it there to add to the timeline. Mood music with auto-duck lives under Music." })
+          ] }) : tab === "segment" ? /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Segment" }),
+            (selectedBlur == null ? void 0 : selectedBlur.blur) ? /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+              /* @__PURE__ */ jsx(Stepper, { label: "Blur", value: `${selectedBlur.blur.radius}px`, onLess: () => patchBlur({
+                radius: Math.max(1, selectedBlur.blur.radius - 1)
+              }), onMore: () => patchBlur({
+                radius: Math.min(40, selectedBlur.blur.radius + 1)
+              }) }),
+              /* @__PURE__ */ jsx(Pressable, { onPress: () => setTimeline((t) => {
+                var _a2;
+                return __spreadProps(__spreadValues({}, t), {
+                  segments: ((_a2 = t.segments) != null ? _a2 : []).filter((s) => s.id !== selectedBlur.id)
+                });
+              }), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Remove" }) }),
+              /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Drag the box on the preview; pull its corner to resize." })
+            ] }) : null,
+            selectedSegmentId && ((_l = timeline.segments) != null ? _l : []).find((s) => s.id === selectedSegmentId) ? /* @__PURE__ */ jsxs(Text, { style: styles.panelEmpty, children: [
+              (_n = ((_m = timeline.segments) != null ? _m : []).find((s) => s.id === selectedSegmentId)) == null ? void 0 : _n.name,
+              " ",
+              "\xB7 2s range at the playhead. Hide the segment lane to switch it off."
+            ] }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Speed, zoom, crop, trim or blur a 2s range at the playhead." })
+          ] }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Pick a clip on the timeline to change its timing, trim, motion, look and audio." }) }) })
+        ] }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.stageCol, children: [
+          /* @__PURE__ */ jsx(View, { style: styles.stageWell, onTouchStart: dismissKeyboard, children: /* @__PURE__ */ jsx(View, { style: styles.stage, children: selected === null ? /* @__PURE__ */ jsxs(View, { style: styles.stageEmptyCopy, children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "filmstrip-box-multiple", size: 32, color: "#6A6A74" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "Start a scene" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Drop in a photo, a camera take, or a blank card \u2014 the same doors as the web studio." }),
+            /* @__PURE__ */ jsxs(View, { style: styles.stageEmptyActions, children: [
+              /* @__PURE__ */ jsxs(Pressable, { onPress: addBlankScene, style: styles.solidBtn, accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: [
+                /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#101013" }),
+                /* @__PURE__ */ jsx(Text, { style: styles.solidBtnLabel, children: "Blank scene" })
+              ] }),
+              /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+                setRailTab("media");
+                setTab("media");
+              }, style: styles.ghostBtn, accessibilityRole: "button", children: [
+                /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 16, color: "#F2F2F5" }),
+                /* @__PURE__ */ jsx(Text, { style: styles.ghostBtnLabel, children: "Open Media" })
+              ] })
             ] })
-          ] }, row.id))
-        ] }) : railTab === "audio" ? /* @__PURE__ */ jsxs(View, { children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "AI audio" }),
-          /* @__PURE__ */ jsx(TextInput, { value: audioPrompt, onChangeText: setAudioPrompt, placeholder: "Music or narration prompt\u2026", placeholderTextColor: "#5A5A66", style: styles.textInput, multiline: true }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: generateAiAudio, disabled: audioBusy || !audioPrompt.trim(), style: [styles.chip, styles.chipActive, styles.chipWide], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: audioBusy ? "Generating\u2026" : "Generate" }) }),
-          /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Lands in the media library \u2014 tap it there to add to the timeline. Mood music with auto-duck lives under Music." })
-        ] }) : tab === "segment" ? /* @__PURE__ */ jsxs(View, { children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Segment" }),
-          selectedSegmentId && ((_j = timeline.segments) != null ? _j : []).find((s) => s.id === selectedSegmentId) ? /* @__PURE__ */ jsxs(Text, { style: styles.panelEmpty, children: [
-            (_l = ((_k = timeline.segments) != null ? _k : []).find((s) => s.id === selectedSegmentId)) == null ? void 0 : _l.name,
-            " ",
-            "\xB7 2s range at the playhead. Hide the segment lane to switch it off."
-          ] }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Speed, zoom, crop or trim a 2s range at the playhead." })
-        ] }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Pick a clip on the timeline to change its timing, trim, motion, look and audio." }) }) })
-      ] }) : null,
-      /* @__PURE__ */ jsxs(View, { style: styles.stageCol, children: [
-        /* @__PURE__ */ jsx(View, { style: styles.stageWell, onTouchStart: dismissKeyboard, children: /* @__PURE__ */ jsx(View, { style: styles.stage, children: selected === null ? /* @__PURE__ */ jsxs(View, { style: styles.stageEmptyCopy, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "filmstrip-box-multiple", size: 32, color: "#6A6A74" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "Start a scene" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Drop in a photo, a camera take, or a blank card \u2014 the same doors as the web studio." }),
-          /* @__PURE__ */ jsxs(View, { style: styles.stageEmptyActions, children: [
-            /* @__PURE__ */ jsxs(Pressable, { onPress: addBlankScene, style: styles.solidBtn, accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#101013" }),
-              /* @__PURE__ */ jsx(Text, { style: styles.solidBtnLabel, children: "Blank scene" })
-            ] }),
-            /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
-              setRailTab("media");
-              setTab("media");
-            }, style: styles.ghostBtn, accessibilityRole: "button", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 16, color: "#F2F2F5" }),
-              /* @__PURE__ */ jsx(Text, { style: styles.ghostBtnLabel, children: "Open Media" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            selected.type === "video" && VideoPreview ? /* @__PURE__ */ jsx(VideoPreview, { src: selected.src, playing, rate: selected.speed, volume: selected.volume, muted: selected.muted, trimStartSec: selected.trimStartSec, trimEndSec: selected.trimEndSec, scrubToSec: scrub.sec, scrubNonce: scrub.nonce, onTime: onPreviewTime }) : selected.type === "video" ? /* @__PURE__ */ jsxs(View, { style: styles.stageEmpty, children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play-circle-outline", size: 40, color: "#4A4A55" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Video preview needs the host's player - editing still works." })
+            ] }) : /* @__PURE__ */ jsx(Image, { source: {
+              uri: selected.src
+            }, style: StyleSheet.absoluteFill, contentFit: "contain" }),
+            selectedFilter.overlays.map(([color, opacity]) => /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, {
+              backgroundColor: color,
+              opacity
+            }] }, `${color}-${opacity}`)),
+            (selectedBlur == null ? void 0 : selectedBlur.blur) && tab === "segment" ? /* @__PURE__ */ jsx(BlurBoxOverlay, { box: selectedBlur.blur, onChange: (box) => patchBlur(box) }) : null,
+            timeline.texts.filter((t) => layerInView(t, selected.id)).map((t) => /* @__PURE__ */ jsx(DraggableText, { text: t.text, x: t.x, y: t.y, active: t.id === selectedTextId, onSelect: () => {
+              setSelectedTextId(t.id);
+              setTab("text");
+            }, onMove: (x, y) => setTimeline((tl) => updateText(tl, t.id, {
+              x,
+              y
+            })) }, t.id)),
+            logoSrc ? /* @__PURE__ */ jsx(Image, { source: {
+              uri: logoSrc
+            }, style: styles.logoOverlay, contentFit: "contain", pointerEvents: "none" }) : null,
+            /* @__PURE__ */ jsxs(View, { style: styles.stageToolbar, children: [
+              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "animate" ? null : "animate"), style: [styles.stagePill, selected.kenBurns && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Animate" }) }),
+              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "look" ? null : "look"), style: [styles.stagePill, selected.filter !== "none" && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Look" }) }),
+              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "transition" ? null : "transition"), style: [styles.stagePill, selected.transitionIn && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Transition" }) })
             ] })
-          ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          selected.type === "video" && VideoPreview ? /* @__PURE__ */ jsx(VideoPreview, { src: selected.src, playing, rate: selected.speed, volume: selected.volume, muted: selected.muted, trimStartSec: selected.trimStartSec, trimEndSec: selected.trimEndSec, scrubToSec: scrub.sec, scrubNonce: scrub.nonce, onTime: onPreviewTime }) : selected.type === "video" ? /* @__PURE__ */ jsxs(View, { style: styles.stageEmpty, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play-circle-outline", size: 40, color: "#4A4A55" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Video preview needs the host's player - editing still works." })
-          ] }) : /* @__PURE__ */ jsx(Image, { source: {
-            uri: selected.src
-          }, style: StyleSheet.absoluteFill, contentFit: "contain" }),
-          selectedFilter.overlays.map(([color, opacity]) => /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, {
-            backgroundColor: color,
-            opacity
-          }] }, `${color}-${opacity}`)),
-          timeline.texts.map((t) => /* @__PURE__ */ jsx(DraggableText, { text: t.text, x: t.x, y: t.y, active: t.id === selectedTextId, onSelect: () => {
-            setSelectedTextId(t.id);
+          ] }) }) }),
+          selected && stageTool ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.stageToolRow, children: [
+            stageTool === "animate" ? MOTION_MOVES.map((m) => {
+              const on = moveIdOf(selected.kenBurns) === m.id;
+              return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+                var _a2, _b2, _c2, _d2;
+                return patchSelected({
+                  kenBurns: kenBurnsFor(m.id, Math.max((_b2 = (_a2 = selected.kenBurns) == null ? void 0 : _a2.zoomStart) != null ? _b2 : 1.3, (_d2 = (_c2 = selected.kenBurns) == null ? void 0 : _c2.zoomEnd) != null ? _d2 : 1.3))
+                });
+              }, style: [styles.chip, on && styles.chipActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelActive], children: m.label }) }, m.id);
+            }) : null,
+            stageTool === "animate" && selected.kenBurns ? MOTION_STRENGTHS.map((s) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
+              kenBurns: kenBurnsFor(moveIdOf(selected.kenBurns), s.zoom)
+            }), style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: s.label }) }, s.id)) : null,
+            stageTool === "look" ? FILTER_PRESETS.map((preset) => {
+              const on = selected.filter === preset.id;
+              return /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
+                filter: preset.id
+              }), style: [styles.chip, on && styles.chipActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelActive], children: preset.label }) }, preset.id);
+            }) : null,
+            stageTool === "transition" ? CLIP_TRANSITIONS.map((fx) => {
+              var _a2;
+              const on = ((_a2 = selected.transitionIn) == null ? void 0 : _a2.effect) === fx;
+              return /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
+                transitionIn: on ? null : {
+                  effect: fx,
+                  durationMs: 1e3
+                }
+              }), style: [styles.chip, on && styles.chipActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelActive], children: fx }) }, fx);
+            }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx(TimelineTrack, { timeline, selectedClipId, selectedTextId, selectedSegmentId, segmentMenuOpen, playing, playhead, totalSec: total.knownSec, onTogglePlay: previewPlay, onSkipStart: () => {
+            setPlaying(false);
+            setPlayhead(0);
+            setScrub((s) => ({
+              sec: 0,
+              nonce: s.nonce + 1
+            }));
+          }, onSkipEnd: () => {
+            setPlaying(false);
+            setPlayhead(total.knownSec);
+            setScrub((s) => ({
+              sec: total.knownSec,
+              nonce: s.nonce + 1
+            }));
+          }, onToggleSegmentMenu: () => setSegmentMenuOpen((v) => !v), onAddSegment: dropSegment, onSelectSegment: (id) => {
+            setSelectedSegmentId(id);
+            setTab("segment");
+          }, compact: timeline.clips.length === 0, onAddScene: addBlankScene, onLayers: () => {
+            setRailTab("elements");
+            setTab("elements");
+          }, onSelectClip: (id) => {
+            setSelectedClipId(id);
+            setPlaying(false);
+            setStageTool(null);
+            setRailTab(null);
+          }, onSelectText: (id) => {
+            setSelectedTextId(id);
+            setRailTab("text");
             setTab("text");
-          }, onMove: (x, y) => setTimeline((tl) => updateText(tl, t.id, {
-            x,
-            y
-          })) }, t.id)),
-          logoSrc ? /* @__PURE__ */ jsx(Image, { source: {
-            uri: logoSrc
-          }, style: styles.logoOverlay, contentFit: "contain", pointerEvents: "none" }) : null,
-          /* @__PURE__ */ jsxs(View, { style: styles.stageToolbar, children: [
-            /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "animate" ? null : "animate"), style: [styles.stagePill, selected.kenBurns && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Animate" }) }),
-            /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "look" ? null : "look"), style: [styles.stagePill, selected.filter !== "none" && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Look" }) }),
-            /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "transition" ? null : "transition"), style: [styles.stagePill, selected.transitionIn && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Transition" }) })
-          ] })
-        ] }) }) }),
-        selected && stageTool ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.stageToolRow, children: [
-          stageTool === "animate" ? MOTION_MOVES.map((m) => {
-            const on = moveIdOf(selected.kenBurns) === m.id;
-            return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-              var _a2, _b2, _c2, _d2;
-              return patchSelected({
-                kenBurns: kenBurnsFor(m.id, Math.max((_b2 = (_a2 = selected.kenBurns) == null ? void 0 : _a2.zoomStart) != null ? _b2 : 1.3, (_d2 = (_c2 = selected.kenBurns) == null ? void 0 : _c2.zoomEnd) != null ? _d2 : 1.3))
-              });
-            }, style: [styles.chip, on && styles.chipActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelActive], children: m.label }) }, m.id);
-          }) : null,
-          stageTool === "animate" && selected.kenBurns ? MOTION_STRENGTHS.map((s) => /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
-            kenBurns: kenBurnsFor(moveIdOf(selected.kenBurns), s.zoom)
-          }), style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: s.label }) }, s.id)) : null,
-          stageTool === "look" ? FILTER_PRESETS.map((preset) => {
-            const on = selected.filter === preset.id;
-            return /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
-              filter: preset.id
-            }), style: [styles.chip, on && styles.chipActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelActive], children: preset.label }) }, preset.id);
-          }) : null,
-          stageTool === "transition" ? CLIP_TRANSITIONS.map((fx) => {
-            var _a2;
-            const on = ((_a2 = selected.transitionIn) == null ? void 0 : _a2.effect) === fx;
-            return /* @__PURE__ */ jsx(Pressable, { onPress: () => patchSelected({
-              transitionIn: on ? null : {
-                effect: fx,
-                durationMs: 1e3
-              }
-            }), style: [styles.chip, on && styles.chipActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelActive], children: fx }) }, fx);
-          }) : null
-        ] }) : null,
-        /* @__PURE__ */ jsx(TimelineTrack, { timeline, selectedClipId, selectedTextId, selectedSegmentId, segmentMenuOpen, playing, playhead, totalSec: total.knownSec, onTogglePlay: previewPlay, onSkipStart: () => {
-          setPlaying(false);
-          setPlayhead(0);
-          setScrub((s) => ({
-            sec: 0,
-            nonce: s.nonce + 1
-          }));
-        }, onSkipEnd: () => {
-          setPlaying(false);
-          setPlayhead(total.knownSec);
-          setScrub((s) => ({
-            sec: total.knownSec,
-            nonce: s.nonce + 1
-          }));
-        }, onToggleSegmentMenu: () => setSegmentMenuOpen((v) => !v), onAddSegment: dropSegment, onSelectSegment: (id) => {
-          setSelectedSegmentId(id);
-          setTab("segment");
-        }, compact: timeline.clips.length === 0, onAddScene: addBlankScene, onLayers: () => {
-          setRailTab("elements");
-          setTab("elements");
-        }, onSelectClip: (id) => {
-          setSelectedClipId(id);
-          setPlaying(false);
-          setStageTool(null);
-          setRailTab(null);
-        }, onSelectText: (id) => {
-          setSelectedTextId(id);
-          setRailTab("text");
-          setTab("text");
-        } }),
-        selected && !railTab ? /* @__PURE__ */ jsxs(View, { style: styles.clipInspector, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.clipInspectorTitle, numberOfLines: 1, children: selected.name }),
-          /* @__PURE__ */ jsx(TrimPanel, { clip: selected, sourceSec: selectedSource, onTrim: (start, end) => patchSelected(trimClip(selected, start, end)), onImageDuration: (sec) => patchSelected({
-            durationSec: sec
-          }), onMove: (dir) => setTimeline((t) => moveClip(t, selected.id, dir)), onRemove: () => {
-            setTimeline((t) => removeClip(t, selected.id));
-            setSelectedClipId(null);
-          }, canMoveLeft: selectedIndex > 0, canMoveRight: selectedIndex >= 0 && selectedIndex < timeline.clips.length - 1 })
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.dock, contentContainerStyle: [styles.dockInner, {
-        paddingBottom: Math.max(insets.bottom, 8)
-      }], keyboardShouldPersistTaps: "handled", children: [
-        /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
-          setRailTab(null);
-          setRecordError(null);
-          setRecordOpen((open) => !open);
-        }, style: [styles.dockTab, styles.dockRecord, recordOpen && styles.dockRecordOn], accessibilityRole: "button", accessibilityLabel: "Record", accessibilityState: {
-          selected: recordOpen
-        }, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "record-circle", size: 22, color: recordOpen || recordOn ? "#F87171" : "#8B8B96" }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.dockLabel, recordOpen && styles.dockRecordLabel], children: "Record" })
+          } }),
+          selected && !railTab ? /* @__PURE__ */ jsxs(View, { style: styles.clipInspector, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.clipInspectorTitle, numberOfLines: 1, children: selected.name }),
+            /* @__PURE__ */ jsx(TrimPanel, { clip: selected, sourceSec: selectedSource, onTrim: (start, end) => patchSelected(trimClip(selected, start, end)), onImageDuration: (sec) => patchSelected({
+              durationSec: sec
+            }), onMove: (dir) => setTimeline((t) => moveClip(t, selected.id, dir)), onRemove: () => {
+              setTimeline((t) => removeClip(t, selected.id));
+              setSelectedClipId(null);
+            }, canMoveLeft: selectedIndex > 0, canMoveRight: selectedIndex >= 0 && selectedIndex < timeline.clips.length - 1 })
+          ] }) : null
         ] }),
-        /* @__PURE__ */ jsx(View, { style: styles.dockRule }),
-        TABS.map((entry) => {
-          const active = railTab === entry.id;
-          return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
-            setRecordOpen(false);
-            setRailTab((cur) => cur === entry.id ? null : entry.id);
-            setTab(entry.id);
-          }, style: [styles.dockTab, active && styles.dockTabOn], accessibilityRole: "tab", accessibilityState: {
-            selected: active
-          }, accessibilityLabel: entry.label, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 20, color: active ? "#F2F2F5" : "#8B8B96" }),
-            /* @__PURE__ */ jsx(Text, { style: [styles.dockLabel, active && styles.dockLabelOn], children: entry.label })
-          ] }, entry.id);
-        })
-      ] }),
-      templatePreview ? /* @__PURE__ */ jsxs(View, { style: styles.templatePreviewOverlay, children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.templatePreviewBar, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewKicker, children: "Template preview" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewBarTitle, numberOfLines: 1, children: templatePreview.title }),
-          templatePreview.aspect ? /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewAspect, children: templatePreview.aspect }) : null,
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => setTemplatePreview(null), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close template preview", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#F2F2F5" }) })
+        /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.dock, contentContainerStyle: [styles.dockInner, {
+          paddingBottom: Math.max(insets.bottom, 8)
+        }], keyboardShouldPersistTaps: "handled", children: [
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+            setRailTab(null);
+            setRecordError(null);
+            setRecordOpen((open) => !open);
+          }, style: [styles.dockTab, styles.dockRecord, recordOpen && styles.dockRecordOn], accessibilityRole: "button", accessibilityLabel: "Record", accessibilityState: {
+            selected: recordOpen
+          }, children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "record-circle", size: 22, color: recordOpen || recordOn ? "#F87171" : "#8B8B96" }),
+            /* @__PURE__ */ jsx(Text, { style: [styles.dockLabel, recordOpen && styles.dockRecordLabel], children: "Record" })
+          ] }),
+          /* @__PURE__ */ jsx(View, { style: styles.dockRule }),
+          TABS.map((entry) => {
+            const active = railTab === entry.id;
+            return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+              setRecordOpen(false);
+              setRailTab((cur) => cur === entry.id ? null : entry.id);
+              setTab(entry.id);
+            }, style: [styles.dockTab, active && styles.dockTabOn], accessibilityRole: "tab", accessibilityState: {
+              selected: active
+            }, accessibilityLabel: entry.label, children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 20, color: active ? "#F2F2F5" : "#8B8B96" }),
+              /* @__PURE__ */ jsx(Text, { style: [styles.dockLabel, active && styles.dockLabelOn], children: entry.label })
+            ] }, entry.id);
+          })
         ] }),
-        /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewHint, children: "Not part of your video \u2014 Generate adds a fresh clip" }),
-        /* @__PURE__ */ jsx(View, { style: styles.templatePreviewMedia, children: templatePreview.kind === "video" ? /* @__PURE__ */ jsx(TemplateWebPreview, { src: templatePreview.src, poster: templatePreview.poster }) : /* @__PURE__ */ jsx(Image, { source: {
-          uri: templatePreview.poster || templatePreview.src
-        }, style: styles.templatePreviewImage, contentFit: "contain", recyclingKey: templatePreview.src }) })
-      ] }) : null
-    ] }),
-    notice ? /* @__PURE__ */ jsxs(View, { style: styles.notice, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: notice }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => setNotice(null), hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: styles.noticeDismiss, children: "OK" }) })
-    ] }) : null,
-    mediaBusy || aiBusy ? /* @__PURE__ */ jsx(View, { style: styles.busyOverlay, pointerEvents: "auto", children: /* @__PURE__ */ jsxs(View, { style: styles.busyCard, children: [
-      /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F7F7FA" }),
-      /* @__PURE__ */ jsx(Text, { style: styles.busyTitle, children: aiBusy ? "Generating scene" : mediaBusy ? "Uploading" : "Working" }),
-      /* @__PURE__ */ jsx(Text, { style: styles.busyDetail, children: aiBusy ? "This can take a minute. Keep the editor open." : uploadStatus || "Preparing your media\u2026" }),
-      mediaBusy ? /* @__PURE__ */ jsx(View, { style: styles.busyTrack, children: /* @__PURE__ */ jsx(View, { style: styles.busyTrackFill }) }) : null
-    ] }) }) : null,
-    /* @__PURE__ */ jsx(KeyboardLiftSpacer, {})
-  ] }) });
+        templatePreview ? /* @__PURE__ */ jsxs(View, { style: styles.templatePreviewOverlay, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.templatePreviewBar, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewKicker, children: "Template preview" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewBarTitle, numberOfLines: 1, children: templatePreview.title }),
+            templatePreview.aspect ? /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewAspect, children: templatePreview.aspect }) : null,
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => setTemplatePreview(null), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close template preview", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#F2F2F5" }) })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewHint, children: "Not part of your video \u2014 Generate adds a fresh clip" }),
+          /* @__PURE__ */ jsx(View, { style: styles.templatePreviewMedia, children: templatePreview.kind === "video" ? /* @__PURE__ */ jsx(TemplateWebPreview, { src: templatePreview.src, poster: templatePreview.poster }) : /* @__PURE__ */ jsx(Image, { source: {
+            uri: templatePreview.poster || templatePreview.src
+          }, style: styles.templatePreviewImage, contentFit: "contain", recyclingKey: templatePreview.src }) })
+        ] }) : null
+      ] }),
+      notice ? /* @__PURE__ */ jsxs(View, { style: styles.notice, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: notice }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setNotice(null), hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: styles.noticeDismiss, children: "OK" }) })
+      ] }) : null,
+      mediaBusy || aiBusy ? /* @__PURE__ */ jsx(View, { style: styles.busyOverlay, pointerEvents: "auto", children: /* @__PURE__ */ jsxs(View, { style: styles.busyCard, children: [
+        /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F7F7FA" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.busyTitle, children: aiBusy ? "Generating scene" : mediaBusy ? "Uploading" : "Working" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.busyDetail, children: aiBusy ? "This can take a minute. Keep the editor open." : uploadStatus || "Preparing your media\u2026" }),
+        mediaBusy ? /* @__PURE__ */ jsx(View, { style: styles.busyTrack, children: /* @__PURE__ */ jsx(View, { style: styles.busyTrackFill }) }) : null
+      ] }) }) : null,
+      /* @__PURE__ */ jsx(KeyboardLiftSpacer, {})
+    ] })
+  ] });
 }
 function formatSec(sec) {
   const m = Math.floor(sec / 60);
@@ -1297,9 +1469,11 @@ function TimelineTrack({
   onSkipStart,
   onSkipEnd
 }) {
-  var _a;
-  const segments = (_a = timeline.segments) != null ? _a : [];
-  const hasAudio = Boolean(timeline.voiceover || timeline.soundtrack);
+  var _a, _b;
+  const segments = ((_a = timeline.segments) != null ? _a : []).filter((seg) => layerInView(seg, selectedClipId));
+  const texts = timeline.texts.filter((t) => layerInView(t, selectedClipId));
+  const sceneAudio = ((_b = timeline.sceneAudio) != null ? _b : []).filter((a) => layerInView(a, selectedClipId));
+  const hasAudio = Boolean(timeline.voiceover || timeline.soundtrack || sceneAudio.length);
   return /* @__PURE__ */ jsxs(View, { style: [styles.timeline, compact && styles.timelineCompact], children: [
     /* @__PURE__ */ jsxs(View, { style: styles.timelineBar, children: [
       /* @__PURE__ */ jsx(Pressable, { onPress: onLayers, hitSlop: 6, style: styles.timelineIconBtn, accessibilityRole: "button", accessibilityLabel: "Open layers", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "layers-outline", size: 20, color: "#F2F2F5" }) }),
@@ -1361,12 +1535,12 @@ function TimelineTrack({
         ] }),
         /* @__PURE__ */ jsx(View, { style: styles.laneBody })
       ] }),
-      compact && timeline.texts.length === 0 ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
+      compact && texts.length === 0 ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
         /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
           /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "format-title", size: 14, color: "#8B8B96" }),
           /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Text" })
         ] }),
-        /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.laneBody, children: /* @__PURE__ */ jsx(View, { style: styles.textTrack, children: timeline.texts.map((t) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onSelectText(t.id), style: [styles.textPill, t.id === selectedTextId && styles.textPillActive], children: [
+        /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.laneBody, children: /* @__PURE__ */ jsx(View, { style: styles.textTrack, children: texts.map((t) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onSelectText(t.id), style: [styles.textPill, t.id === selectedTextId && styles.textPillActive], children: [
           /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "format-text", size: 11, color: "#F7F7FA" }),
           /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.textPillLabel, children: t.text })
         ] }, t.id)) }) })
@@ -1384,7 +1558,11 @@ function TimelineTrack({
           timeline.soundtrack ? /* @__PURE__ */ jsxs(View, { style: styles.voTrack, children: [
             /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 11, color: "#DCD6FF" }),
             /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.voTrackLabel, children: timeline.soundtrack.title || "Soundtrack" })
-          ] }) : null
+          ] }) : null,
+          sceneAudio.map((a) => /* @__PURE__ */ jsxs(View, { style: styles.voTrack, children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "waveform", size: 11, color: "#DCD6FF" }),
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.voTrackLabel, children: a.label || "Scene audio" })
+          ] }, a.id))
         ] })
       ] }),
       compact && segments.length === 0 ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
@@ -1511,9 +1689,11 @@ function VoicePanel({
   voiceover,
   selectedClip,
   onVoiceover,
+  onSceneAudio,
   onNotice
 }) {
   var _a;
+  const [sceneOnly, setSceneOnly] = useState(false);
   const [voices, setVoices] = useState([]);
   const [voice, setVoice] = useState(null);
   const [text, setText] = useState((_a = voiceover == null ? void 0 : voiceover.text) != null ? _a : "");
@@ -1620,6 +1800,14 @@ function VoicePanel({
     } : {})).then((result) => {
       var _a2;
       const audioUrl = resultUrl(result, "SPEAK");
+      if (sceneOnly && selectedClip && onSceneAudio) {
+        onSceneAudio({
+          audioUrl,
+          label: (voice == null ? void 0 : voice.label) ? `${voice.label} \xB7 ${text.trim()}` : text.trim()
+        });
+        onNotice("Narration added to this scene - it moves with the scene.");
+        return;
+      }
       onVoiceover({
         audioUrl,
         mode: (_a2 = voiceover == null ? void 0 : voiceover.mode) != null ? _a2 : "mix",
@@ -1647,6 +1835,9 @@ function VoicePanel({
         /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, recording === "dictate" && styles.chipDanger], children: recording === "dictate" ? "Stop" : "Speak" })
       ] }) : null,
       (selectedClip == null ? void 0 : selectedClip.type) === "video" ? /* @__PURE__ */ jsx(Pressable, { onPress: transcribeClip, style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: busy === "Transcribing" ? "Transcribing\u2026" : "From clip" }) }) : null,
+      onSceneAudio && selectedClip ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setSceneOnly((v) => !v), style: [styles.chip, sceneOnly && styles.chipActive], accessibilityRole: "switch", accessibilityState: {
+        checked: sceneOnly
+      }, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, sceneOnly && styles.chipLabelActive], children: "This scene only" }) }) : null,
       /* @__PURE__ */ jsx(Pressable, { onPress: generate, disabled: !text.trim() || busy !== null, style: [styles.chip, styles.chipActive, (!text.trim() || busy !== null) && styles.chipDisabled], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: busy === "Generating" ? "Generating\u2026" : voiceover ? "Regenerate" : "Generate voiceover" }) })
     ] }),
     canRecord ? /* @__PURE__ */ jsxs(View, { style: styles.cloneBox, children: [