@adminide-stack/yantra-mobile 12.0.69-alpha.9 → 12.0.70-alpha.0

package/lib/features/canvas/VideoEditorExperience.js

@@ -0,0 +1,3050 @@
+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;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function nextProjectTitle(rows, currentTitle) {
+  const used = new Set(rows.map((row) => row.title.trim()));
+  used.add(currentTitle.trim());
+  if (!used.has("Untitled project")) return "Untitled project";
+  let n = 2;
+  while (used.has(`Untitled project ${n}`)) n += 1;
+  return `Untitled project ${n}`;
+}
+const TABS = [{
+  id: "projects",
+  icon: "folder-open-outline",
+  label: "Projects"
+}, {
+  id: "media",
+  icon: "image-plus",
+  label: "Media"
+}, {
+  id: "templates",
+  icon: "view-grid-outline",
+  label: "Templates"
+}, {
+  id: "text",
+  icon: "format-title",
+  label: "Text"
+}, {
+  id: "elements",
+  icon: "shape-outline",
+  label: "Elements"
+}, {
+  id: "music",
+  icon: "music",
+  label: "Music"
+}, {
+  id: "voiceover",
+  icon: "microphone-outline",
+  label: "Voiceover"
+}, {
+  id: "captions",
+  icon: "closed-caption",
+  label: "Captions"
+}, {
+  id: "audio",
+  icon: "waveform",
+  label: "Audio"
+}, {
+  id: "logo",
+  icon: "postage-stamp",
+  label: "Logo"
+}, {
+  id: "agent",
+  icon: "robot-outline",
+  label: "AI cut"
+}];
+const SEGMENT_KINDS = [{
+  kind: "speed",
+  label: "Speed",
+  hint: "Play this range faster or slower",
+  icon: "speedometer"
+}, {
+  kind: "zoom",
+  label: "Zoom",
+  hint: "Punch in on a spot for this range",
+  icon: "magnify-plus-outline"
+}, {
+  kind: "crop",
+  label: "Crop",
+  hint: "Show only a region for this range",
+  icon: "crop"
+}, {
+  kind: "trim",
+  label: "Trim",
+  hint: "Skip this range in playback and export",
+  icon: "content-cut"
+}];
+const SCENE_COLORS = ["#101014", "#f4f4f5", "#1d4ed8", "#7c2d12"];
+const SPEED_CURVE_LABEL = {
+  constant: "Constant",
+  "ease-in": "Ease in",
+  "ease-out": "Ease out",
+  pulse: "Pulse"
+};
+function loadEditorWebView() {
+  try {
+    return require("react-native-webview").WebView;
+  } catch (e) {
+    return null;
+  }
+}
+function canvasDocumentBase() {
+  const raw = (config.CANVAS_SURFACE_URL || "").trim();
+  if (/^https:\/\//i.test(raw) && !/localhost/i.test(raw)) {
+    return raw.endsWith("/") ? raw : `${raw}/`;
+  }
+  const template = config.SURFACE_URL_TEMPLATE || "https://{slug}-surface.yantra-app-v1.cdebase.dev/";
+  return template.replace("{slug}", "canvas").replace(/\/?$/, "/");
+}
+function htmlVideoPage(src, poster) {
+  const esc = (value) => value.replace(/&/g, "&").replace(/"/g, """);
+  const posterAttr = poster ? ` poster="${esc(poster)}"` : "";
+  return `<!DOCTYPE html><html><head>
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
+<style>html,body{margin:0;height:100%;background:#000}video{width:100%;height:100%;object-fit:contain;background:#000}</style>
+</head><body>
+<video src="${esc(src)}"${posterAttr} autoplay loop controls playsinline webkit-playsinline></video>
+</body></html>`;
+}
+function TemplateWebPreview({
+  src,
+  poster
+}) {
+  const WebView = loadEditorWebView();
+  const playable = playableTemplatePreviewUrl(src);
+  if (!playable || !WebView) {
+    return poster ? /* @__PURE__ */ jsx(Image, { source: {
+      uri: poster
+    }, style: styles.templatePreviewImage, contentFit: "contain" }) : null;
+  }
+  return /* @__PURE__ */ jsx(WebView, { source: {
+    html: htmlVideoPage(playable, poster),
+    baseUrl: canvasDocumentBase()
+  }, style: styles.templateWebView, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, javaScriptEnabled: true, allowsFullscreenVideo: true, originWhitelist: ["*"], mixedContentMode: "always", setSupportMultipleWindows: false, scrollEnabled: false });
+}
+function TemplateCatalogCard({
+  row,
+  generating,
+  using,
+  onGenerate,
+  onPreview,
+  onUse
+}) {
+  const canPreview = Boolean(row.coverVideo || row.cover);
+  const canUse = Boolean(onUse && templateHasUsableConfig(row));
+  return /* @__PURE__ */ jsxs(View, { style: styles.templateCard, children: [
+    row.cover ? /* @__PURE__ */ jsx(Image, { source: {
+      uri: row.cover
+    }, style: styles.templateCover, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.templateCover, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 22, color: "#9A9AA5" }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.templateTitle, numberOfLines: 2, children: row.title }),
+    /* @__PURE__ */ jsxs(View, { style: styles.templateActions, children: [
+      canUse ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => onUse == null ? void 0 : onUse(row), disabled: using || generating, style: [styles.templateGenerate, (using || generating) && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Use template ${row.title}`, children: [
+        using ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F2F2F5", size: "small" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "layers-outline", size: 13, color: "#F2F2F5" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.templateGenerateLabel, numberOfLines: 1, children: "Use" })
+      ] }) : /* @__PURE__ */ jsxs(Pressable, { onPress: () => onGenerate(row), disabled: generating || !row.prompt.trim(), style: [styles.templateGenerate, (generating || !row.prompt.trim()) && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Generate ${row.title}`, children: [
+        generating ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F2F2F5", size: "small" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 13, color: "#F2F2F5" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.templateGenerateLabel, numberOfLines: 1, children: "Generate" })
+      ] }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: () => onPreview(row), disabled: !canPreview, style: [styles.templatePreviewBtn, !canPreview && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Preview ${row.title}`, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 13, color: "#D8D8E0" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewLabel, numberOfLines: 1, children: "Preview" })
+      ] })
+    ] })
+  ] });
+}
+function VideoEditorExperience({
+  items,
+  seedItemId,
+  onClose,
+  onExport,
+  onPickLocalMedia,
+  runAction,
+  uploadMedia,
+  audioRecorder,
+  apolloClient,
+  projectTitle,
+  initialTimeline,
+  initialLogoSrc,
+  token,
+  indexUrl,
+  initialRailTab
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const insets = useSafeInsets();
+  const {
+    width: windowWidth
+  } = useWindowDimensions();
+  const templateCols = windowWidth >= 700 ? 3 : 2;
+  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(() => {
+    if (initialTimeline && (initialTimeline.clips.length > 0 || initialTimeline.texts.length > 0)) {
+      return initialTimeline;
+    }
+    const bin = items.filter((i) => i.type === "image" || i.type === "video");
+    if (seedItemId) {
+      const seed = bin.find((i) => i.id === seedItemId);
+      return {
+        clips: seed ? [clipFromItem(seed)] : [],
+        texts: []
+      };
+    }
+    return {
+      clips: [],
+      texts: []
+    };
+  });
+  const [selectedClipId, setSelectedClipId] = useState((_b = (_a = timeline.clips[0]) == null ? void 0 : _a.id) != null ? _b : null);
+  const [selectedTextId, setSelectedTextId] = useState(null);
+  const [tab, setTab] = useState("media");
+  const [railTab, setRailTab] = useState(() => {
+    const seed = initialRailTab;
+    if (seed === "agent" || seed === "media" || seed === "projects") return seed;
+    return null;
+  });
+  const [recordOn, setRecordOn] = useState(false);
+  const [recordOpen, setRecordOpen] = useState(false);
+  const [recordError, setRecordError] = useState(null);
+  const [micTakeOn, setMicTakeOn] = useState(false);
+  const [segmentMenuOpen, setSegmentMenuOpen] = useState(false);
+  const [selectedSegmentId, setSelectedSegmentId] = useState(null);
+  const [audioPrompt, setAudioPrompt] = useState("");
+  const [audioBusy, setAudioBusy] = useState(false);
+  const [stageTool, setStageTool] = useState(null);
+  const [aiPrompt, setAiPrompt] = useState("");
+  const [aiBusy, setAiBusy] = useState(false);
+  const [usingTemplateId, setUsingTemplateId] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const [playing, setPlaying] = useState(false);
+  const [playhead, setPlayhead] = useState(0);
+  const [sourceSec, setSourceSec] = useState({});
+  const [scrub, setScrub] = useState({
+    sec: 0,
+    nonce: 0
+  });
+  const [dirty, setDirty] = useState(false);
+  const [mediaBusy, setMediaBusy] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState(null);
+  const [templateQuery, setTemplateQuery] = useState("");
+  const [templateSearch, setTemplateSearch] = useState("");
+  const [templatePreview, setTemplatePreview] = useState(null);
+  const pickLock = useRef(false);
+  const [projectRows, setProjectRows] = useState([]);
+  const [activeProjectId, setActiveProjectId] = useState(null);
+  const [localTitle, setLocalTitle] = useState(() => (projectTitle == null ? void 0 : projectTitle.trim()) || "Untitled project");
+  const [renameId, setRenameId] = useState(null);
+  const [renameDraft, setRenameDraft] = useState("");
+  const timelineRef = useRef(timeline);
+  timelineRef.current = timeline;
+  const titleRef = useRef(localTitle);
+  titleRef.current = localTitle;
+  const logoRef = useRef(logoSrc);
+  logoRef.current = logoSrc;
+  const activeIdRef = useRef(activeProjectId);
+  activeIdRef.current = activeProjectId;
+  const rowsRef = useRef(projectRows);
+  rowsRef.current = projectRows;
+  useEffect(() => {
+    let live = true;
+    void loadVideoProjects().then((rows) => {
+      if (live) setProjectRows(rows);
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (timeline.clips.length === 0 && playing) setPlaying(false);
+  }, [timeline.clips.length, playing]);
+  const flushProject = useCallback(() => {
+    var _a2;
+    const current = timelineRef.current;
+    if (!projectHasWork(current)) return;
+    const id = (_a2 = activeIdRef.current) != null ? _a2 : newVideoProjectId();
+    if (!activeIdRef.current) {
+      activeIdRef.current = id;
+      setActiveProjectId(id);
+    }
+    const snap = snapshotProject(id, titleRef.current, current, logoRef.current);
+    const next = upsertVideoProject(rowsRef.current, snap);
+    rowsRef.current = next;
+    setProjectRows(next);
+    persistVideoProjects(next);
+    setDirty(false);
+  }, []);
+  useEffect(() => {
+    if (!dirty || !projectHasWork(timeline)) return void 0;
+    const handle = setTimeout(() => flushProject(), 800);
+    return () => clearTimeout(handle);
+  }, [dirty, timeline, localTitle, logoSrc, flushProject]);
+  const applyNewProject = useCallback((name) => {
+    var _a2;
+    dismissKeyboard();
+    setRenameId(null);
+    const current = timelineRef.current;
+    let rows = rowsRef.current;
+    if (projectHasWork(current) || activeIdRef.current) {
+      const id = (_a2 = activeIdRef.current) != null ? _a2 : newVideoProjectId();
+      rows = upsertVideoProject(rows, snapshotProject(id, titleRef.current, current, logoRef.current));
+    }
+    const title = name.trim() || nextProjectTitle(rows, titleRef.current);
+    const newId = newVideoProjectId();
+    const blank = emptyTimeline();
+    rows = upsertVideoProject(rows, snapshotProject(newId, title, blank, null));
+    rowsRef.current = rows;
+    persistVideoProjects(rows);
+    setProjectRows(rows);
+    timelineRef.current = blank;
+    logoRef.current = null;
+    activeIdRef.current = newId;
+    titleRef.current = title;
+    setTimeline(blank);
+    setLogoSrc(null);
+    setSelectedClipId(null);
+    setSelectedTextId(null);
+    setActiveProjectId(newId);
+    setLocalTitle(title);
+    setDirty(false);
+    setPlaying(false);
+    setPlayhead(0);
+    setStageTool(null);
+    setRailTab("projects");
+    setTab("projects");
+    setNotice(`Created \u201C${title}\u201D. Tap Open Media to add clips.`);
+  }, []);
+  const startNewProject = useCallback(() => {
+    const suggested = nextProjectTitle(rowsRef.current, titleRef.current);
+    if (Platform.OS === "ios") {
+      Alert.prompt("New project", "Name this cut, then add clips from Media.", [{
+        text: "Cancel",
+        style: "cancel"
+      }, {
+        text: "Create",
+        onPress: (value) => applyNewProject(value || suggested)
+      }], "plain-text", suggested);
+      return;
+    }
+    Alert.alert("New project", `Create \u201C${suggested}\u201D?`, [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Create",
+      onPress: () => applyNewProject(suggested)
+    }]);
+  }, [applyNewProject]);
+  const openSavedProject = useCallback((row) => {
+    var _a2, _b2, _c2, _d2;
+    flushProject();
+    setTimeline({
+      clips: [...row.timeline.clips],
+      texts: [...row.timeline.texts],
+      segments: row.timeline.segments ? [...row.timeline.segments] : [],
+      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;
+    setLocalTitle(row.title);
+    setSelectedClipId((_d2 = (_c2 = row.timeline.clips[0]) == null ? void 0 : _c2.id) != null ? _d2 : null);
+    setSelectedTextId(null);
+    setDirty(false);
+    setPlaying(false);
+    setRailTab(null);
+  }, [flushProject]);
+  const deleteSavedProject = useCallback((id) => {
+    const next = rowsRef.current.filter((row) => row.id !== id);
+    rowsRef.current = next;
+    setProjectRows(next);
+    persistVideoProjects(next);
+    if (activeIdRef.current !== id) return;
+    setTimeline(emptyTimeline());
+    setLogoSrc(null);
+    setSelectedClipId(null);
+    setSelectedTextId(null);
+    setActiveProjectId(null);
+    activeIdRef.current = null;
+    setLocalTitle("Untitled project");
+    setDirty(false);
+    setRailTab(null);
+  }, []);
+  useEffect(() => {
+    const handle = setTimeout(() => setTemplateSearch(templateQuery.trim()), templateQuery.trim() ? 300 : 0);
+    return () => clearTimeout(handle);
+  }, [templateQuery]);
+  const videoCorpus = useMemo(() => mapDesignCorpus("video", DESIGN_PROMPT_TEMPLATES), []);
+  const {
+    templates,
+    loading: templatesLoading,
+    loadingMore: templatesLoadingMore,
+    loadMore: fetchMoreTemplates
+  } = useStudioCatalogTemplates(templateSearch, apolloClient, runAction, videoCorpus);
+  const loadMoreTemplates = useCallback(() => {
+    fetchMoreTemplates();
+  }, [fetchMoreTemplates]);
+  const templateGrid = useMemo(() => {
+    const rows = [];
+    for (let i = 0; i < templates.length; i += templateCols) {
+      rows.push(templates.slice(i, i + templateCols));
+    }
+    return rows;
+  }, [templateCols, templates]);
+  const selected = (_c = timeline.clips.find((c) => c.id === selectedClipId)) != null ? _c : null;
+  const selectedIndex = selected ? timeline.clips.indexOf(selected) : -1;
+  const selectedText = (_d = timeline.texts.find((t) => t.id === selectedTextId)) != null ? _d : null;
+  const total = timelineDuration(timeline.clips);
+  const patchSelected = useCallback((patch) => {
+    if (!selectedClipId) return;
+    setDirty(true);
+    setTimeline((t) => updateClip(t, selectedClipId, patch));
+  }, [selectedClipId]);
+  const addClip = useCallback((item) => {
+    const clip = clipFromItem(item);
+    setDirty(true);
+    setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+      clips: [...t.clips, clip]
+    }));
+    setSelectedClipId(clip.id);
+    setSelectedTextId(null);
+    setRailTab(null);
+    setNotice("Added to the timeline");
+  }, []);
+  const addBlankScene = useCallback(() => {
+    const clip = clipFromColor("#101014");
+    const title = textClipAt(0, {
+      text: "Build your own scene",
+      x: 0.5,
+      y: 0.46
+    });
+    setDirty(true);
+    setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+      clips: [...t.clips, clip],
+      texts: [...t.texts, title]
+    }));
+    setSelectedClipId(clip.id);
+    setSelectedTextId(title.id);
+    setRailTab(null);
+    setNotice("Blank scene added \u2014 edit the title or open Media.");
+  }, []);
+  const previewStudioTemplate = useCallback((row) => {
+    const sample = playableTemplatePreviewUrl(row.coverVideo);
+    if (sample) {
+      setPlaying(false);
+      setTemplatePreview({
+        src: sample,
+        poster: row.cover,
+        title: row.title,
+        kind: "video",
+        aspect: row.aspect
+      });
+      return;
+    }
+    if (row.cover) {
+      setPlaying(false);
+      setTemplatePreview({
+        src: row.cover,
+        poster: row.cover,
+        title: row.title,
+        kind: "image",
+        aspect: row.aspect
+      });
+      return;
+    }
+    setNotice("This template has no sample to preview.");
+  }, []);
+  const useStudioTemplate = useCallback(async (row) => {
+    var _a2, _b2, _c2, _d2;
+    if (!templateHasUsableConfig(row) || usingTemplateId) return;
+    setUsingTemplateId(row.id);
+    setNotice(null);
+    try {
+      const imported = await loadTemplateTimeline(row);
+      setDirty(true);
+      setTimeline(imported.timeline);
+      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);
+      setRailTab(null);
+      setNotice(`Loaded \u201C${imported.title}\u201D \xB7 ${imported.scenes} scene${imported.scenes === 1 ? "" : "s"} (${imported.aspect})`);
+    } catch (err) {
+      setNotice(err instanceof Error ? err.message : "Could not load the template");
+    } finally {
+      setUsingTemplateId(null);
+    }
+  }, [usingTemplateId]);
+  const addText = useCallback((preset) => {
+    const text = textClipAt(playhead, preset);
+    setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+      texts: [...t.texts, text]
+    }));
+    setSelectedTextId(text.id);
+    setTab("text");
+  }, [playhead]);
+  const pickIntoLibrary = useCallback((source) => {
+    if (!onPickLocalMedia || pickLock.current) return;
+    pickLock.current = true;
+    onPickLocalMedia((message) => {
+      setMediaBusy(true);
+      setUploadStatus(message);
+    }, source).then((picked) => {
+      if (picked.length === 0) return;
+      setDeviceMedia((prev) => [...picked, ...prev]);
+      const visual = picked.find((p) => p.type === "image" || p.type === "video");
+      if (visual && timelineRef.current.clips.length === 0) {
+        addClip(visual);
+        return;
+      }
+      setRailTab("media");
+      setTab("media");
+      setNotice(picked.length === 1 ? "In Media \u2014 tap it to add to the timeline" : `${picked.length} items in Media \u2014 tap one to add`);
+    }).catch((err) => {
+      setNotice(friendlyMediaError(err, "media pick"));
+    }).finally(() => {
+      pickLock.current = false;
+      setMediaBusy(false);
+      setUploadStatus(null);
+    });
+  }, [onPickLocalMedia, addClip]);
+  const pickLogo = useCallback(() => {
+    if (!onPickLocalMedia || pickLock.current) return;
+    pickLock.current = true;
+    onPickLocalMedia((message) => {
+      setMediaBusy(true);
+      setUploadStatus(message);
+    }, "library").then((picked) => {
+      const image = picked.find((p) => p.type === "image");
+      if (image) {
+        setLogoSrc(image.src);
+        setDeviceMedia((prev) => [...picked, ...prev]);
+      } else if (picked.length) {
+        setNotice("Pick an image for the logo.");
+      }
+    }).catch((err) => {
+      setNotice(friendlyMediaError(err, "logo pick"));
+    }).finally(() => {
+      pickLock.current = false;
+      setMediaBusy(false);
+      setUploadStatus(null);
+    });
+  }, [onPickLocalMedia]);
+  const captureFromRecord = useCallback((source) => {
+    if (!onPickLocalMedia) {
+      setRecordError("Recording needs the host camera and library seam.");
+      return;
+    }
+    if (pickLock.current) return;
+    pickLock.current = true;
+    setRecordOn(true);
+    setRecordError(null);
+    onPickLocalMedia((message) => {
+      setMediaBusy(true);
+      setUploadStatus(message);
+    }, source).then((picked) => {
+      var _a2;
+      if (picked.length === 0) return;
+      setDeviceMedia((prev) => [...picked, ...prev]);
+      const visual = picked.find((p) => p.type === "image" || p.type === "video");
+      if (visual) {
+        addClip(visual);
+        setRecordOpen(false);
+        return;
+      }
+      if (((_a2 = picked[0]) == null ? void 0 : _a2.type) === "audio") {
+        setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+          soundtrack: {
+            audioUrl: picked[0].src,
+            mode: "mix",
+            title: picked[0].generatedAssetName || "Recording"
+          }
+        }));
+        setDirty(true);
+        setRecordOpen(false);
+        setNotice("Recording added as the soundtrack.");
+        return;
+      }
+      setNotice("Saved in Media \u2014 tap it to add to the timeline.");
+    }).catch((err) => {
+      setRecordError(friendlyMediaError(err, "record"));
+    }).finally(() => {
+      pickLock.current = false;
+      setRecordOn(false);
+      setMediaBusy(false);
+      setUploadStatus(null);
+    });
+  }, [onPickLocalMedia, addClip]);
+  const toggleMicTake = useCallback(() => {
+    if (!audioRecorder || !uploadMedia) {
+      setRecordError("Microphone recording needs the host recorder. Use Voiceover after opening that tab.");
+      return;
+    }
+    if (micTakeOn) {
+      audioRecorder.stop().then(async (uri) => {
+        setMicTakeOn(false);
+        if (!uri) return;
+        const url = await uploadMedia(uri);
+        setTimeline((t) => __spreadProps(__spreadValues({}, t), {
+          voiceover: {
+            audioUrl: url,
+            mode: "mix",
+            voiceLabel: "Recorded take"
+          }
+        }));
+        setDirty(true);
+        setRecordOpen(false);
+        setNotice("Voice take added under Audio.");
+      }).catch((err) => {
+        setMicTakeOn(false);
+        setRecordError(friendlyMediaError(err, "record"));
+      });
+      return;
+    }
+    audioRecorder.start().then(() => setMicTakeOn(true)).catch((err) => setRecordError(friendlyMediaError(err, "record")));
+  }, [audioRecorder, uploadMedia, micTakeOn]);
+  const dropSegment = useCallback((kind) => {
+    if (timeline.clips.length === 0) {
+      setNotice("Add a scene first \u2014 segments sit across the cut.");
+      return;
+    }
+    const seg = newSegment(kind, playhead, Math.max(total.knownSec, 2));
+    setTimeline((t) => {
+      var _a2;
+      return __spreadProps(__spreadValues({}, t), {
+        segments: [...(_a2 = t.segments) != null ? _a2 : [], seg]
+      });
+    });
+    setSelectedSegmentId(seg.id);
+    setSegmentMenuOpen(false);
+    setDirty(true);
+  }, [playhead, timeline.clips.length, total.knownSec]);
+  const generateAiAudio = useCallback(() => {
+    const prompt = audioPrompt.trim();
+    if (!runAction || !prompt || audioBusy) return;
+    setAudioBusy(true);
+    runAction("yantra-audio", "YANTRA_AUDIO_RUN_PROMPT", {
+      prompt,
+      model: "fal-ai/elevenlabs/music",
+      durationSec: 15,
+      format: "mp3"
+    }).then((result) => {
+      const url = resultUrl(result, "RUN_PROMPT");
+      setDeviceMedia((prev) => [{
+        id: `audio-${Date.now()}`,
+        type: "audio",
+        src: url,
+        x: 0,
+        y: 0,
+        width: 1,
+        height: 1,
+        zIndex: 0,
+        generatedAssetName: prompt.slice(0, 28)
+      }, ...prev]);
+      setRailTab("media");
+      setTab("media");
+      setAudioPrompt("");
+    }).catch((err) => setNotice(friendlyMediaError(err, "AI audio"))).finally(() => setAudioBusy(false));
+  }, [audioBusy, audioPrompt, runAction]);
+  const generateAiScene = useCallback((promptOverride, opts) => {
+    var _a2;
+    const prompt = (promptOverride != null ? promptOverride : aiPrompt).trim();
+    if (!runAction || !prompt || aiBusy) return;
+    setAiBusy(true);
+    setNotice(null);
+    setTemplatePreview(null);
+    const still = (selected == null ? void 0 : selected.type) === "image" ? selected.src : void 0;
+    const aspect = (opts == null ? void 0 : opts.aspect) === "9:16" || (opts == null ? void 0 : opts.aspect) === "16:9" || (opts == null ? void 0 : opts.aspect) === "1:1" ? opts.aspect : promptOverride ? "9:16" : "16:9";
+    runAction("yantra-video-generation", "YANTRA_VIDEO_GENERATION_GENERATE", buildVideoGenerateParams(__spreadProps(__spreadValues({
+      prompt,
+      aspectRatio: aspect
+    }, promptOverride ? {} : {
+      model: (_a2 = STATIC_VIDEO_MODELS[0]) == null ? void 0 : _a2.id
+    }), {
+      referenceImageUrl: still
+    }))).then((result) => {
+      const url = generationMediaUrl(result);
+      addClip({
+        id: `ai-${Date.now()}`,
+        type: "video",
+        src: url,
+        x: 0,
+        y: 0,
+        width: 640,
+        height: 360,
+        zIndex: 1,
+        generatedAssetName: `Scene \xB7 ${prompt.slice(0, 24)}`
+      });
+      setAiPrompt("");
+      if (!(opts == null ? void 0 : opts.stayOnTemplates)) {
+        setRailTab("media");
+        setTab("media");
+      }
+    }).catch((err) => setNotice(friendlyMediaError(err, "AI scene"))).finally(() => setAiBusy(false));
+  }, [addClip, aiBusy, aiPrompt, runAction, selected]);
+  const onPreviewTime = useCallback((currentSec, durationSec) => {
+    setPlayhead(currentSec);
+    if (selectedClipId && durationSec > 0) {
+      setSourceSec((prev) => prev[selectedClipId] === durationSec ? prev : __spreadProps(__spreadValues({}, prev), {
+        [selectedClipId]: durationSec
+      }));
+    }
+  }, [selectedClipId]);
+  const exportTimeline = useCallback(() => {
+    if (timeline.clips.length === 0) {
+      setNotice("Add clips to the timeline first.");
+      return;
+    }
+    flushProject();
+    setRailTab(null);
+    if (onExport) onExport(buildExportSpec(timeline));
+    else setNotice("Export renders through the yantra-video service - not wired in this host yet.");
+  }, [flushProject, timeline, onExport]);
+  const previewPlay = useCallback(() => {
+    if (timeline.clips.length === 0) {
+      setNotice("Add a clip from Media, then tap Preview.");
+      return;
+    }
+    setRailTab(null);
+    setPlaying((on) => !on);
+  }, [timeline.clips.length]);
+  const VideoPreview = getVideoPreviewRenderer();
+  const selectedFilter = filterById((_e = selected == null ? void 0 : selected.filter) != null ? _e : "none");
+  const selectedSource = selected ? sourceSec[selected.id] : void 0;
+  const projectList = useMemo(() => {
+    if (activeProjectId && projectRows.some((row) => row.id === activeProjectId)) return projectRows;
+    return [{
+      id: "__current__",
+      title: localTitle,
+      timeline,
+      logoSrc,
+      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" }) })
+        ] }),
+        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
+                }));
+                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
+            ] }),
+            /* @__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__ */ 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: (_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 ? {
+              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" }),
+          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}`)),
+          timeline.texts.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" }) })
+          ] })
+        ] }) }) }),
+        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" })
+        ] }),
+        /* @__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__ */ 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);
+  const s = sec - m * 60;
+  return `${m}:${s.toFixed(1).padStart(4, "0")}`;
+}
+function DraggableText({
+  text,
+  x,
+  y,
+  active,
+  onSelect,
+  onMove
+}) {
+  const stage = useRef({
+    w: 1,
+    h: 1
+  });
+  const start = useRef({
+    x,
+    y
+  });
+  const pan = Gesture.Pan().runOnJS(true).onStart(() => {
+    start.current = {
+      x,
+      y
+    };
+    onSelect();
+  }).onUpdate((e) => {
+    onMove(Math.min(1, Math.max(0, start.current.x + e.translationX / stage.current.w)), Math.min(1, Math.max(0, start.current.y + e.translationY / stage.current.h)));
+  });
+  const tap = Gesture.Tap().runOnJS(true).onEnd(onSelect);
+  return /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "box-none", onLayout: (e) => {
+    stage.current = {
+      w: Math.max(1, e.nativeEvent.layout.width),
+      h: Math.max(1, e.nativeEvent.layout.height)
+    };
+  }, children: /* @__PURE__ */ jsx(GestureDetector, { gesture: Gesture.Race(pan, tap), children: /* @__PURE__ */ jsx(View, { style: [styles.stageText, active && styles.stageTextActive, {
+    left: `${x * 100}%`,
+    top: `${y * 100}%`
+  }], children: /* @__PURE__ */ jsx(Text, { style: styles.stageTextLabel, children: text }) }) }) });
+}
+function TimelineTrack({
+  timeline,
+  selectedClipId,
+  selectedTextId,
+  selectedSegmentId,
+  segmentMenuOpen,
+  compact,
+  onToggleSegmentMenu,
+  onAddSegment,
+  onSelectSegment,
+  onAddScene,
+  onLayers,
+  onSelectClip,
+  onSelectText,
+  playing,
+  playhead,
+  totalSec,
+  onTogglePlay,
+  onSkipStart,
+  onSkipEnd
+}) {
+  var _a;
+  const segments = (_a = timeline.segments) != null ? _a : [];
+  const hasAudio = Boolean(timeline.voiceover || timeline.soundtrack);
+  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" }) }),
+      /* @__PURE__ */ jsx(View, { style: styles.timelineRule }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onAddScene, hitSlop: 6, style: styles.timelineIconBtn, accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 22, color: "#F2F2F5" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onToggleSegmentMenu, hitSlop: 6, style: [styles.timelineIconBtn, segmentMenuOpen && styles.dockTabOn], accessibilityRole: "button", accessibilityLabel: "Add segment (speed, zoom, crop, trim)", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-split-horizontal", size: 20, color: "#F2F2F5" }) }),
+      /* @__PURE__ */ jsx(View, { style: styles.headerSpacer }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onSkipStart, hitSlop: 8, style: styles.transportBtn, accessibilityLabel: "Skip to start", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "skip-previous", size: 24, color: "#F2F2F5" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onTogglePlay, style: styles.transportPlay, accessibilityLabel: playing ? "Pause" : "Play", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: playing ? "pause" : "play", size: 26, color: "#101013" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onSkipEnd, hitSlop: 8, style: styles.transportBtn, accessibilityLabel: "Skip to end", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "skip-next", size: 24, color: "#F2F2F5" }) }),
+      /* @__PURE__ */ jsxs(Text, { style: styles.transportTime, children: [
+        formatSec(playhead),
+        /* @__PURE__ */ jsxs(Text, { style: styles.transportTimeDim, children: [
+          " / ",
+          formatSec(totalSec)
+        ] })
+      ] })
+    ] }),
+    segmentMenuOpen ? /* @__PURE__ */ jsxs(View, { style: styles.segmentMenu, children: [
+      SEGMENT_KINDS.map((entry) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onAddSegment(entry.kind), style: styles.segmentMenuRow, accessibilityRole: "button", accessibilityLabel: entry.label, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 16, color: "#A9A9B4" }),
+        /* @__PURE__ */ jsxs(View, { style: styles.segmentMenuCopy, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuLabel, children: entry.label }),
+          /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuHint, children: entry.hint })
+        ] })
+      ] }, entry.kind)),
+      /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Drops a 2s range at the playhead, across scenes. Playback and export honour it." })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(ScrollView, { showsVerticalScrollIndicator: false, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video", size: 14, color: "#8B8B96" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Video" })
+        ] }),
+        /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.laneBody, children: /* @__PURE__ */ jsx(View, { style: styles.clipTrack, children: timeline.clips.length === 0 ? /* @__PURE__ */ jsxs(Pressable, { onPress: onAddScene, style: styles.clipTrackEmpty, accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#8B8B96" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.clipTrackEmptyLabel, children: "Blank scene" })
+        ] }) : timeline.clips.map((clip, index) => {
+          const active = clip.id === selectedClipId;
+          const sec = clipTimelineSec(clip);
+          return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onSelectClip(clip.id), style: [styles.clipBlock, active && styles.clipBlockActive], children: [
+            clip.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
+              uri: clip.src
+            }, style: StyleSheet.absoluteFill, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 14, color: "#9A9AA5" }) }),
+            /* @__PURE__ */ jsxs(View, { style: styles.clipMeta, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.clipMetaText, children: index + 1 }),
+              /* @__PURE__ */ jsxs(Text, { style: styles.clipMetaText, children: [
+                sec === null ? "video" : `${Math.round(sec * 10) / 10}s`,
+                clip.speed !== 1 ? ` \xB7 ${clip.speed}\xD7` : ""
+              ] })
+            ] })
+          ] }, clip.id);
+        }) }) })
+      ] }),
+      compact ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 14, color: "#9A9AA5" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Overlay" })
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.laneBody })
+      ] }),
+      compact && timeline.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(MaterialCommunityIcons, { name: "format-text", size: 11, color: "#F7F7FA" }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.textPillLabel, children: t.text })
+        ] }, t.id)) }) })
+      ] }),
+      compact && !hasAudio ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 14, color: "#9A9AA5" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Audio" })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.laneBody, children: [
+          timeline.voiceover ? /* @__PURE__ */ jsxs(View, { style: styles.voTrack, children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "account-voice", size: 11, color: "#DCD6FF" }),
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.voTrackLabel, children: timeline.voiceover.voiceLabel || "Voiceover" })
+          ] }) : null,
+          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
+        ] })
+      ] }),
+      compact && segments.length === 0 ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-split-horizontal", size: 14, color: "#8B8B96" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Segment" })
+        ] }),
+        /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.laneBody, children: /* @__PURE__ */ jsx(View, { style: styles.textTrack, children: segments.map((seg) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onSelectSegment(seg.id), style: [styles.textPill, seg.id === selectedSegmentId && styles.textPillActive], children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.textPillLabel, children: seg.name }) }, seg.id)) }) })
+      ] })
+    ] })
+  ] });
+}
+function TrimPanel({
+  clip,
+  sourceSec,
+  onTrim,
+  onImageDuration,
+  onMove,
+  onRemove,
+  canMoveLeft,
+  canMoveRight
+}) {
+  var _a, _b;
+  const [trackW, setTrackW] = useState(1);
+  const source = sourceSec && sourceSec > 0 ? sourceSec : null;
+  const end = (_a = clip.trimEndSec) != null ? _a : source;
+  const pxPerSec = source ? trackW / source : 0;
+  const dragStart = useRef(0);
+  const startHandle = Gesture.Pan().runOnJS(true).onStart(() => {
+    dragStart.current = clip.trimStartSec;
+  }).onUpdate((e) => {
+    if (!source) return;
+    onTrim(Math.min(source, dragStart.current + e.translationX / pxPerSec), clip.trimEndSec);
+  });
+  const endHandle = Gesture.Pan().runOnJS(true).onStart(() => {
+    dragStart.current = end != null ? end : 0;
+  }).onUpdate((e) => {
+    if (!source) return;
+    onTrim(clip.trimStartSec, Math.min(source, Math.max(0.1, dragStart.current + e.translationX / pxPerSec)));
+  });
+  return /* @__PURE__ */ jsxs(View, { children: [
+    clip.type === "image" ? /* @__PURE__ */ jsx(View, { style: styles.panelRow, children: /* @__PURE__ */ jsx(Stepper, { label: "Hold for", value: `${(_b = clip.durationSec) != null ? _b : DEFAULT_IMAGE_SEC}s`, onLess: () => {
+      var _a2;
+      return onImageDuration(Math.max(1, ((_a2 = clip.durationSec) != null ? _a2 : DEFAULT_IMAGE_SEC) - 1));
+    }, onMore: () => {
+      var _a2;
+      return onImageDuration(Math.min(30, ((_a2 = clip.durationSec) != null ? _a2 : DEFAULT_IMAGE_SEC) + 1));
+    } }) }) : source === null ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Play the clip once so its length is known, then trim." }) : /* @__PURE__ */ jsxs(View, { style: styles.trimTrack, onLayout: (e) => setTrackW(Math.max(1, e.nativeEvent.layout.width)), children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.trimWindow, {
+        left: clip.trimStartSec * pxPerSec,
+        width: Math.max(8, ((end != null ? end : source) - clip.trimStartSec) * pxPerSec)
+      }] }),
+      /* @__PURE__ */ jsx(GestureDetector, { gesture: startHandle, children: /* @__PURE__ */ jsx(View, { style: [styles.trimHandle, {
+        left: clip.trimStartSec * pxPerSec - 10
+      }], hitSlop: 12, children: /* @__PURE__ */ jsx(View, { style: styles.trimHandleBar }) }) }),
+      /* @__PURE__ */ jsx(GestureDetector, { gesture: endHandle, children: /* @__PURE__ */ jsx(View, { style: [styles.trimHandle, {
+        left: (end != null ? end : source) * pxPerSec - 10
+      }], hitSlop: 12, children: /* @__PURE__ */ jsx(View, { style: styles.trimHandleBar }) }) }),
+      /* @__PURE__ */ jsxs(Text, { style: styles.trimReadout, children: [
+        clip.trimStartSec.toFixed(1),
+        "s \u2013 ",
+        (end != null ? end : source).toFixed(1),
+        "s of ",
+        source.toFixed(1),
+        "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+      /* @__PURE__ */ jsx(IconChip, { icon: "arrow-left", disabled: !canMoveLeft, onPress: () => onMove(-1), label: "Move left" }),
+      /* @__PURE__ */ jsx(IconChip, { icon: "arrow-right", disabled: !canMoveRight, onPress: () => onMove(1), label: "Move right" }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: onRemove, style: styles.chip, accessibilityRole: "button", children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 14, color: "#FF6B6B" }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" })
+      ] })
+    ] })
+  ] });
+}
+function IconChip({
+  icon,
+  label,
+  disabled,
+  onPress
+}) {
+  return /* @__PURE__ */ jsx(Pressable, { onPress, disabled, style: [styles.chip, disabled && styles.chipDisabled], accessibilityRole: "button", accessibilityLabel: label, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 14, color: "#F7F7FA" }) });
+}
+function Stepper({
+  label,
+  value,
+  onLess,
+  onMore
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles.stepper, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.stepperLabel, children: label }),
+    /* @__PURE__ */ jsx(Pressable, { onPress: onLess, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} less`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 15, color: "#F7F7FA" }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.stepperValue, children: value }),
+    /* @__PURE__ */ jsx(Pressable, { onPress: onMore, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} more`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 15, color: "#F7F7FA" }) })
+  ] });
+}
+function parseVoices(result) {
+  var _a, _b, _c, _d, _e, _f;
+  const raw = Array.isArray(result.voices) ? result.voices : Array.isArray(result) ? result : [];
+  const out = [];
+  for (const entry of raw) {
+    if (!entry || typeof entry !== "object") continue;
+    const e = entry;
+    const id = (_c = (_b = (_a = e.id) != null ? _a : e.profileId) != null ? _b : e.voice) != null ? _c : e.name;
+    if (!id) continue;
+    const name = String((_e = (_d = e.name) != null ? _d : e.label) != null ? _e : id);
+    const kind = String((_f = e.kind) != null ? _f : "preset");
+    if (kind === "profile" && name.startsWith("preset:")) continue;
+    out.push({
+      id: String(id),
+      label: name,
+      profile: kind === "profile",
+      engine: typeof e.engine === "string" ? e.engine : void 0
+    });
+  }
+  return out;
+}
+function VoicePanel({
+  runAction,
+  uploadMedia,
+  audioRecorder,
+  voiceover,
+  selectedClip,
+  onVoiceover,
+  onNotice
+}) {
+  var _a;
+  const [voices, setVoices] = useState([]);
+  const [voice, setVoice] = useState(null);
+  const [text, setText] = useState((_a = voiceover == null ? void 0 : voiceover.text) != null ? _a : "");
+  const [instruct, setInstruct] = useState("");
+  const [busy, setBusy] = useState(null);
+  const [recording, setRecording] = useState(null);
+  const [cloneName, setCloneName] = useState("");
+  const [cloneSample, setCloneSample] = useState(null);
+  const canRecord = Boolean(audioRecorder && uploadMedia && runAction);
+  const toggleRecord = (purpose) => {
+    if (!audioRecorder || !uploadMedia || !runAction) return;
+    if (recording === purpose) {
+      setRecording(null);
+      setBusy("Processing recording");
+      audioRecorder.stop().then(async (uri) => {
+        var _a2, _b;
+        if (!uri) throw new Error("Nothing was recorded.");
+        const url = await uploadMedia(uri);
+        const result = await runAction("yantra-voicebox", "YANTRA_VOICEBOX_TRANSCRIBE", {
+          audioUrl: url
+        });
+        const transcript = (_b = (_a2 = result.text) != null ? _a2 : result.transcript) != null ? _b : typeof result.output === "string" ? result.output : "";
+        if (purpose === "dictate") {
+          if (!transcript) throw new Error("Could not hear any words in that.");
+          setText(transcript);
+          onNotice("Heard you - pick a voice and Generate to say it as them.");
+        } else {
+          setCloneSample({
+            url,
+            referenceText: transcript
+          });
+          onNotice(transcript ? "Sample ready - check the transcript matches what you said, then create your voice." : "Sample uploaded, but transcription was empty - type what you said, then create.");
+        }
+      }).catch((err) => onNotice(friendlyMediaError(err, "voice transcription"))).finally(() => setBusy(null));
+      return;
+    }
+    if (recording !== null) return;
+    audioRecorder.start().then(() => setRecording(purpose)).catch((err) => onNotice(friendlyMediaError(err, "voice recording")));
+  };
+  const createCloneVoice = () => {
+    if (!runAction || !cloneSample || !cloneName.trim() || !cloneSample.referenceText.trim() || busy) return;
+    setBusy("Creating your voice");
+    runAction("yantra-voicebox", "YANTRA_VOICEBOX_CLONE_VOICE", {
+      name: cloneName.trim(),
+      sampleUrl: cloneSample.url,
+      referenceText: cloneSample.referenceText.trim()
+    }).then(async () => {
+      const result = await runAction("yantra-voicebox", "YANTRA_VOICEBOX_LIST_VOICES", {});
+      const parsed = parseVoices(result);
+      setVoices(parsed);
+      const mine = parsed.find((v) => v.profile && v.label === cloneName.trim());
+      if (mine) setVoice(mine);
+      setCloneSample(null);
+      setCloneName("");
+      onNotice("Your voice is ready - it is selected, Generate speaks as you.");
+    }).catch((err) => onNotice(friendlyMediaError(err, "voice cloning"))).finally(() => setBusy(null));
+  };
+  useEffect(() => {
+    if (!runAction) return;
+    let cancelled = false;
+    runAction("yantra-voicebox", "YANTRA_VOICEBOX_LIST_VOICES", {}).then((result) => {
+      if (cancelled) return;
+      const parsed = parseVoices(result);
+      setVoices(parsed);
+      setVoice((prev) => {
+        var _a2;
+        return (_a2 = prev != null ? prev : parsed[0]) != null ? _a2 : null;
+      });
+    }).catch(() => {
+      if (!cancelled) setVoices([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [runAction]);
+  if (!runAction) {
+    return /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Voiceover needs the host connector - not wired in this host." });
+  }
+  const transcribeClip = () => {
+    if (!selectedClip || selectedClip.type !== "video" || busy) return;
+    setBusy("Transcribing");
+    runAction("yantra-voicebox", "YANTRA_VOICEBOX_TRANSCRIBE", {
+      audioUrl: selectedClip.src
+    }).then((result) => {
+      var _a2, _b;
+      const t = (_b = (_a2 = result.text) != null ? _a2 : result.transcript) != null ? _b : typeof result.output === "string" ? result.output : void 0;
+      if (!t) throw new Error("No transcript came back.");
+      setText(t);
+    }).catch((err) => onNotice(friendlyMediaError(err, "transcription"))).finally(() => setBusy(null));
+  };
+  const generate = () => {
+    if (!text.trim() || busy) return;
+    setBusy("Generating");
+    runAction("yantra-voicebox", "YANTRA_VOICEBOX_SPEAK", __spreadValues(__spreadValues({
+      text: text.trim()
+    }, voice ? voice.profile ? {
+      profileId: voice.id
+    } : __spreadValues({
+      voice: voice.id
+    }, voice.engine ? {
+      engine: voice.engine
+    } : {}) : {}), instruct.trim() ? {
+      instruct: instruct.trim()
+    } : {})).then((result) => {
+      var _a2;
+      const audioUrl = resultUrl(result, "SPEAK");
+      onVoiceover({
+        audioUrl,
+        mode: (_a2 = voiceover == null ? void 0 : voiceover.mode) != null ? _a2 : "mix",
+        voiceLabel: voice == null ? void 0 : voice.label,
+        text: text.trim()
+      });
+      onNotice("Voiceover ready - it plays under the whole timeline on export.");
+    }).catch((err) => onNotice(friendlyMediaError(err, "voiceover"))).finally(() => setBusy(null));
+  };
+  return /* @__PURE__ */ jsxs(ScrollView, { style: styles.voiceScroll, keyboardShouldPersistTaps: "handled", children: [
+    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: voices.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Loading voices\u2026" }) : voices.map((v) => {
+      const active = (voice == null ? void 0 : voice.id) === v.id;
+      return /* @__PURE__ */ jsx(Pressable, { onPress: () => setVoice(v), style: [styles.chip, active && styles.chipActive], accessibilityRole: "button", accessibilityState: {
+        selected: active
+      }, children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, active && styles.chipLabelActive], children: [
+        v.profile ? "\u2605 " : "",
+        v.label
+      ] }) }, `${v.profile ? "p" : "v"}-${v.id}`);
+    }) }),
+    /* @__PURE__ */ jsx(TextInput, { value: instruct, onChangeText: setInstruct, placeholder: "Direction (optional) - calm, warm, excited\u2026", placeholderTextColor: "#5A5A66", style: styles.voiceInstruct, selectionColor: "#8B7CFF" }),
+    /* @__PURE__ */ jsx(TextInput, { value: text, onChangeText: setText, placeholder: "What should the voice say?", placeholderTextColor: "#5A5A66", style: styles.voiceText, selectionColor: "#8B7CFF", multiline: true }),
+    /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+      canRecord ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => toggleRecord("dictate"), style: [styles.chip, recording === "dictate" && styles.chipRecording], accessibilityRole: "button", accessibilityLabel: recording === "dictate" ? "Stop recording" : "Speak instead of typing", children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: recording === "dictate" ? "stop-circle-outline" : "microphone", size: 14, color: recording === "dictate" ? "#FF8484" : "#F7F7FA" }),
+        /* @__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,
+      /* @__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: [
+      /* @__PURE__ */ jsx(Text, { style: styles.cloneTitle, children: "MY VOICE" }),
+      cloneSample === null ? /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+        /* @__PURE__ */ jsxs(Pressable, { onPress: () => toggleRecord("clone"), style: [styles.chip, recording === "clone" && styles.chipRecording], accessibilityRole: "button", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: recording === "clone" ? "stop-circle-outline" : "microphone-plus", size: 14, color: recording === "clone" ? "#FF8484" : "#F7F7FA" }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, recording === "clone" && styles.chipDanger], children: recording === "clone" ? "Stop" : "Record a sample" })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: styles.cloneHint, children: "Read a sentence or two, naturally." })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TextInput, { value: cloneName, onChangeText: setCloneName, placeholder: "Name this voice - e.g. Me", placeholderTextColor: "#5A5A66", style: styles.voiceInstruct, selectionColor: "#8B7CFF" }),
+        /* @__PURE__ */ jsx(TextInput, { value: cloneSample.referenceText, onChangeText: (referenceText) => setCloneSample(__spreadProps(__spreadValues({}, cloneSample), {
+          referenceText
+        })), placeholder: "What you said in the sample", placeholderTextColor: "#5A5A66", style: styles.voiceText, selectionColor: "#8B7CFF", multiline: true }),
+        /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+          /* @__PURE__ */ jsx(Pressable, { onPress: createCloneVoice, disabled: !cloneName.trim() || !cloneSample.referenceText.trim() || busy !== null, style: [styles.chip, styles.chipActive, (!cloneName.trim() || !cloneSample.referenceText.trim() || busy !== null) && styles.chipDisabled], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: busy === "Creating your voice" ? "Creating\u2026" : "Create my voice" }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => setCloneSample(null), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Discard" }) })
+        ] })
+      ] })
+    ] }) : null,
+    voiceover ? /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+      ["mix", "replace"].map((mode) => {
+        const active = voiceover.mode === mode;
+        return /* @__PURE__ */ jsx(Pressable, { onPress: () => onVoiceover(__spreadProps(__spreadValues({}, voiceover), {
+          mode
+        })), style: [styles.chip, active && styles.chipActive], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, active && styles.chipLabelActive], children: mode === "mix" ? "Mix under audio" : "Replace audio" }) }, mode);
+      }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => onVoiceover(null), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" }) })
+    ] }) : null
+  ] });
+}
+function SoundtrackPanel({
+  runAction,
+  soundtrack,
+  totalSec,
+  onSoundtrack,
+  onNotice
+}) {
+  const [prompt, setPrompt] = useState("");
+  const [busy, setBusy] = useState(false);
+  const generate = useCallback(async () => {
+    const styleText = prompt.trim();
+    if (!styleText || !runAction || busy) return;
+    setBusy(true);
+    try {
+      const durationSec = Math.min(120, Math.max(10, Math.ceil(totalSec || 15)));
+      const result = await runAction("yantra-audio", "YANTRA_AUDIO_RUN_PROMPT", {
+        prompt: styleText,
+        model: "fal-ai/elevenlabs/music",
+        durationSec,
+        format: "mp3"
+      });
+      onSoundtrack({
+        audioUrl: resultUrl(result, "RUN_PROMPT"),
+        mode: "mix",
+        title: styleText
+      });
+    } catch (err) {
+      onNotice(friendlyMediaError(err, "soundtrack"));
+    } finally {
+      setBusy(false);
+    }
+  }, [prompt, runAction, busy, totalSec, onSoundtrack, onNotice]);
+  if (!runAction) return null;
+  return /* @__PURE__ */ jsx(View, { style: styles.soundtrackSection, children: soundtrack ? /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 14, color: "#8B7CFF" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.soundtrackTitle, numberOfLines: 1, children: soundtrack.title || "Soundtrack" }),
+    ["mix", "replace"].map((mode) => {
+      const active = soundtrack.mode === mode;
+      return /* @__PURE__ */ jsx(Pressable, { onPress: () => onSoundtrack(__spreadProps(__spreadValues({}, soundtrack), {
+        mode
+      })), style: [styles.chip, active && styles.chipActive], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, active && styles.chipLabelActive], children: mode === "mix" ? "Mix under audio" : "Replace audio" }) }, mode);
+    }),
+    /* @__PURE__ */ jsx(Pressable, { onPress: () => onSoundtrack(null), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" }) })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
+      /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, style: [styles.textInput, styles.soundtrackInput], placeholder: "Soundtrack style - e.g. energetic Punjabi hip hop, heavy bassline", placeholderTextColor: "#5A5A66", selectionColor: "#8B7CFF", returnKeyType: "done", editable: !busy }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => void generate(), disabled: busy || !prompt.trim(), style: [styles.chip, prompt.trim() && !busy ? styles.chipActive : null], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, prompt.trim() && !busy ? styles.chipLabelActive : null], children: busy ? "Composing\u2026" : "Generate" }) })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "An original track is composed for the whole cut - describe genre, mood, and energy." })
+  ] }) });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: "#101013"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    height: 52,
+    paddingHorizontal: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#26262c",
+    backgroundColor: "#17171b"
+  },
+  headerCopy: {
+    flex: 1,
+    minWidth: 0,
+    gap: 2
+  },
+  headerProject: {
+    color: "#F2F2F5",
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  headerSaved: {
+    color: "#C8C8D0",
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  headerSavedDim: {
+    color: "#8B8B96",
+    fontWeight: "500"
+  },
+  headerGhostBtn: {
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    minHeight: 44,
+    justifyContent: "center"
+  },
+  headerGhost: {
+    color: "#E8E8EE",
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  headerSpacer: {
+    flex: 1,
+    minWidth: 8
+  },
+  exportBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: 8,
+    backgroundColor: "#E8E8EE"
+  },
+  exportBtnLabel: {
+    color: "#101013",
+    fontSize: 13,
+    fontWeight: "700"
+  },
+  projectsPane: {
+    gap: 10
+  },
+  projectActions: {
+    flexDirection: "row",
+    gap: 8
+  },
+  solidBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    minHeight: 44,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    backgroundColor: "#F2F2F5"
+  },
+  solidBtnLabel: {
+    color: "#101013",
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  projectRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#32323a",
+    backgroundColor: "#1a1a20"
+  },
+  projectRowOn: {
+    borderColor: "#5B6CFF",
+    backgroundColor: "#1c2440"
+  },
+  projectRowCopy: {
+    flex: 1,
+    minWidth: 0,
+    gap: 2
+  },
+  projectRowTitle: {
+    color: "#F2F2F5",
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  projectRowMeta: {
+    color: "#8B8B96",
+    fontSize: 11
+  },
+  renameInput: {
+    flex: 1,
+    color: "#F2F2F5",
+    fontSize: 14,
+    paddingVertical: 4,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#5B6CFF"
+  },
+  stageEmptyCopy: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    paddingHorizontal: 28
+  },
+  stageEmptyActions: {
+    width: "100%",
+    maxWidth: 280,
+    gap: 8,
+    marginTop: 4
+  },
+  ghostBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    minHeight: 44,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#3A3A44",
+    backgroundColor: "#1A1A20"
+  },
+  ghostBtnLabel: {
+    color: "#F2F2F5",
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  disabled: {
+    opacity: 0.35
+  },
+  workspace: {
+    flex: 1,
+    minHeight: 0,
+    position: "relative"
+  },
+  sheet: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 76,
+    maxHeight: 360,
+    zIndex: 40,
+    backgroundColor: "#17171b",
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#2c2c34",
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOpacity: 0.35,
+    shadowRadius: 16,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    elevation: 12
+  },
+  sheetTall: {
+    maxHeight: 480,
+    height: 480
+  },
+  templateSheetBody: {
+    flex: 1,
+    minHeight: 0
+  },
+  sheetHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 14,
+    height: 44,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#26262c"
+  },
+  sheetTitle: {
+    color: "#F2F2F5",
+    fontSize: 15,
+    fontWeight: "600",
+    flex: 1
+  },
+  sheetNewBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 10,
+    height: 30,
+    borderRadius: 8,
+    backgroundColor: "#F2F2F5"
+  },
+  sheetNewBtnLabel: {
+    color: "#101013",
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  dock: {
+    flexGrow: 0,
+    flexShrink: 0,
+    maxHeight: 76,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#26262c",
+    backgroundColor: "#141418"
+  },
+  dockInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 8,
+    gap: 6,
+    paddingTop: 8
+  },
+  dockTab: {
+    minWidth: 68,
+    alignItems: "center",
+    gap: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 6,
+    borderRadius: 12
+  },
+  dockTabOn: {
+    backgroundColor: "#243a5e"
+  },
+  recordPane: {
+    gap: 8
+  },
+  recordRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 52,
+    paddingHorizontal: 10,
+    borderRadius: 12,
+    backgroundColor: "#1A1A20",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#32323A"
+  },
+  recordError: {
+    color: "#FECACA",
+    fontSize: 13,
+    lineHeight: 18,
+    padding: 10,
+    borderRadius: 10,
+    backgroundColor: "rgba(248, 113, 113, 0.12)"
+  },
+  dockRecord: {
+    minWidth: 72
+  },
+  dockRecordOn: {
+    backgroundColor: "rgba(248, 113, 113, 0.16)"
+  },
+  dockRecordLabel: {
+    color: "#FECACA"
+  },
+  dockRule: {
+    width: StyleSheet.hairlineWidth,
+    height: 28,
+    backgroundColor: "#32323A",
+    marginHorizontal: 4
+  },
+  dockLabel: {
+    color: "#8B8B96",
+    fontSize: 10,
+    fontWeight: "600"
+  },
+  dockLabelOn: {
+    color: "#F2F2F5"
+  },
+  captionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#26262c"
+  },
+  captionRowText: {
+    flex: 1,
+    color: "#F2F2F5",
+    fontSize: 14
+  },
+  captionRowMeta: {
+    color: "#8B8B96",
+    fontSize: 11,
+    fontVariant: ["tabular-nums"]
+  },
+  sidePaneScroll: {
+    maxHeight: 268
+  },
+  sidePaneInner: {
+    paddingBottom: 20
+  },
+  stageCol: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: "#101013"
+  },
+  stageWell: {
+    flex: 1,
+    backgroundColor: "#08080a",
+    padding: 10,
+    minHeight: 0,
+    position: "relative"
+  },
+  stage: {
+    flex: 1,
+    overflow: "hidden",
+    backgroundColor: "#000000",
+    borderRadius: 2
+  },
+  stageEmpty: {
+    flex: 1,
+    position: "relative"
+  },
+  stageEmptyTitle: {
+    color: "#E8E8EE",
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  stageEmptyDetail: {
+    color: "#7A7A88",
+    fontSize: 12.5,
+    textAlign: "center",
+    lineHeight: 18
+  },
+  stageText: {
+    position: "absolute",
+    transform: [{
+      translateX: -60
+    }, {
+      translateY: -14
+    }],
+    maxWidth: 160,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 8,
+    backgroundColor: "rgba(10, 10, 12, 0.55)",
+    borderWidth: 1,
+    borderColor: "transparent"
+  },
+  stageTextActive: {
+    borderColor: "#8B7CFF"
+  },
+  stageTextLabel: {
+    color: "#F7F7FA",
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  transport: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    paddingVertical: 8
+  },
+  transportDisabled: {
+    opacity: 0.3
+  },
+  transportTime: {
+    color: "#F7F7FA",
+    fontSize: 12.5,
+    fontVariant: ["tabular-nums"]
+  },
+  transportTimeDim: {
+    color: "#7A7A88"
+  },
+  timeline: {
+    height: 200,
+    flexGrow: 0,
+    flexShrink: 0,
+    backgroundColor: "#17171b",
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#26262c"
+  },
+  timelineCompact: {
+    height: 128
+  },
+  timelineBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 52,
+    paddingHorizontal: 6,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#26262c"
+  },
+  timelineIconBtn: {
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  transportBtn: {
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  transportPlay: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: "#F2F2F5",
+    alignItems: "center",
+    justifyContent: "center",
+    marginHorizontal: 4
+  },
+  timelineRule: {
+    width: StyleSheet.hairlineWidth,
+    height: 16,
+    backgroundColor: "#26262c",
+    marginHorizontal: 4
+  },
+  segmentMenu: {
+    paddingHorizontal: 10,
+    paddingBottom: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#26262c",
+    gap: 2
+  },
+  segmentMenuRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 6
+  },
+  segmentMenuCopy: {
+    flex: 1,
+    minWidth: 0
+  },
+  segmentMenuLabel: {
+    color: "#F2F2F5",
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  segmentMenuHint: {
+    color: "#8B8B96",
+    fontSize: 11
+  },
+  timelineBarActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  laneRow: {
+    flexDirection: "row",
+    height: 56,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#26262c"
+  },
+  laneGutter: {
+    width: 108,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 8,
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderRightColor: "#26262c",
+    backgroundColor: "#17171b"
+  },
+  laneBody: {
+    flex: 1,
+    minWidth: 0
+  },
+  laneLabelRow: {
+    paddingBottom: 4
+  },
+  laneLabel: {
+    color: "#9A9AA5",
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    textTransform: "uppercase"
+  },
+  textTrack: {
+    flexDirection: "row",
+    gap: 6,
+    marginBottom: 6
+  },
+  textPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    paddingHorizontal: 9,
+    paddingVertical: 4,
+    borderRadius: 7,
+    backgroundColor: "#2A2440",
+    borderWidth: 1,
+    borderColor: "transparent",
+    maxWidth: 150
+  },
+  textPillActive: {
+    borderColor: "#8B7CFF"
+  },
+  textPillLabel: {
+    color: "#DCD6FF",
+    fontSize: 11.5
+  },
+  clipTrack: {
+    flexDirection: "row",
+    gap: 6,
+    minHeight: 56
+  },
+  clipTrackEmpty: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    margin: 8,
+    paddingHorizontal: 12,
+    height: 40,
+    borderRadius: 8,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#3A3A44",
+    borderStyle: "dashed",
+    backgroundColor: "#1A1A20"
+  },
+  clipTrackEmptyLabel: {
+    color: "#8B8B96",
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  clipBlock: {
+    width: 96,
+    height: 56,
+    borderRadius: 9,
+    overflow: "hidden",
+    backgroundColor: "#16161A",
+    borderWidth: 1.5,
+    borderColor: "transparent"
+  },
+  clipBlockActive: {
+    borderColor: "#8B7CFF"
+  },
+  clipMeta: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    backgroundColor: "rgba(10, 10, 12, 0.6)"
+  },
+  clipMetaText: {
+    color: "#E8E8EE",
+    fontSize: 9.5,
+    fontVariant: ["tabular-nums"]
+  },
+  panel: {
+    flex: 1,
+    minHeight: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 10
+  },
+  mediaPane: {
+    gap: 12
+  },
+  pickRow: {
+    flexDirection: "row",
+    gap: 8
+  },
+  pickBtn: {
+    flex: 1,
+    alignItems: "center",
+    gap: 6,
+    paddingVertical: 12,
+    borderRadius: 12,
+    backgroundColor: "#222228",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#32323a"
+  },
+  pickBtnLabel: {
+    color: "#E8E8EE",
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  dropzone: {
+    alignItems: "center",
+    gap: 4,
+    paddingVertical: 22,
+    paddingHorizontal: 10,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: "rgba(255,255,255,0.18)",
+    backgroundColor: "#16161A"
+  },
+  dropzoneTitle: {
+    color: "#F7F7FA",
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  dropzoneHint: {
+    color: "#7A7A88",
+    fontSize: 11,
+    textAlign: "center"
+  },
+  mediaGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    paddingBottom: 16
+  },
+  panelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 4
+  },
+  panelEmpty: {
+    color: "#7A7A88",
+    fontSize: 13
+  },
+  panelHint: {
+    color: "#7A7A88",
+    fontSize: 11.5,
+    marginTop: 6
+  },
+  panelBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 8
+  },
+  panelBarTitle: {
+    color: "#C8C8D0",
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    textTransform: "uppercase"
+  },
+  panelBarBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 5
+  },
+  panelBarBtnLabel: {
+    color: "#F7F7FA",
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  emptyPanel: {
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: 8,
+    paddingVertical: 16,
+    paddingHorizontal: 12
+  },
+  templatesPane: {
+    gap: 10,
+    paddingBottom: 12
+  },
+  generateField: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    minHeight: 88,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 12,
+    paddingBottom: 10,
+    gap: 10,
+    borderRadius: 12,
+    backgroundColor: "#141418",
+    borderWidth: 1,
+    borderColor: "#2E2E38"
+  },
+  generateIcon: {
+    marginTop: 2
+  },
+  generateInput: {
+    flex: 1,
+    color: "#F2F2F5",
+    fontSize: 16,
+    lineHeight: 22,
+    minHeight: 64,
+    padding: 0
+  },
+  generateBtn: {
+    minHeight: 44,
+    borderRadius: 12,
+    backgroundColor: "#8B7CFF",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  generateBtnLabel: {
+    color: "#0A0A0C",
+    fontSize: 15,
+    fontWeight: "700"
+  },
+  searchField: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 44,
+    marginTop: 4,
+    paddingLeft: 12,
+    paddingRight: 8,
+    gap: 8,
+    borderRadius: 12,
+    backgroundColor: "#141418",
+    borderWidth: 1,
+    borderColor: "#2E2E38"
+  },
+  searchInput: {
+    flex: 1,
+    color: "#F2F2F5",
+    fontSize: 16,
+    paddingVertical: 10
+  },
+  searchClear: {
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  templateList: {
+    flex: 1
+  },
+  templateListInner: {
+    paddingHorizontal: 12,
+    paddingBottom: 16
+  },
+  templateRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8,
+    marginBottom: 10
+  },
+  templateGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  templateCard: {
+    flex: 1,
+    gap: 6,
+    minWidth: 0
+  },
+  templateCover: {
+    width: "100%",
+    aspectRatio: 16 / 9,
+    borderRadius: 8,
+    backgroundColor: "#121216"
+  },
+  templateTitle: {
+    color: "#E8E8EE",
+    fontSize: 12,
+    fontWeight: "600",
+    minHeight: 32
+  },
+  templateActions: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    gap: 6
+  },
+  templateGenerate: {
+    flex: 1,
+    minHeight: 32,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    borderRadius: 8,
+    backgroundColor: "#2A2A32",
+    borderWidth: 1,
+    borderColor: "#3A3A44",
+    paddingHorizontal: 4
+  },
+  templateGenerateLabel: {
+    color: "#F2F2F5",
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  templatePreviewBtn: {
+    flex: 1,
+    minHeight: 32,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    borderRadius: 8,
+    backgroundColor: "#141418",
+    borderWidth: 1,
+    borderColor: "#2E2E38",
+    paddingHorizontal: 4
+  },
+  templatePreviewLabel: {
+    color: "#D8D8E0",
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  templatePreviewOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 76,
+    zIndex: 60,
+    backgroundColor: "rgba(8,8,10,0.94)",
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+    gap: 6
+  },
+  templatePreviewBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  templatePreviewKicker: {
+    color: "#F2F2F5",
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.3,
+    backgroundColor: "rgba(255,255,255,0.15)",
+    overflow: "hidden",
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 99
+  },
+  templatePreviewBarTitle: {
+    flex: 1,
+    color: "rgba(255,255,255,0.85)",
+    fontSize: 13
+  },
+  templatePreviewAspect: {
+    color: "rgba(255,255,255,0.7)",
+    fontSize: 11,
+    backgroundColor: "rgba(255,255,255,0.1)",
+    overflow: "hidden",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  templatePreviewHint: {
+    color: "rgba(255,255,255,0.5)",
+    fontSize: 11
+  },
+  templatePreviewMedia: {
+    flex: 1,
+    minHeight: 220,
+    overflow: "hidden",
+    backgroundColor: "#000",
+    borderRadius: 4
+  },
+  templatePreviewMediaFill: {
+    flex: 1,
+    minHeight: 220
+  },
+  templateWebView: {
+    flex: 1,
+    minHeight: 220,
+    backgroundColor: "#000"
+  },
+  templatePreviewImage: {
+    width: "100%",
+    height: "100%",
+    minHeight: 220
+  },
+  templateFooter: {
+    height: 8
+  },
+  templateLoadBar: {
+    width: "100%",
+    paddingTop: 10,
+    paddingBottom: 16,
+    backgroundColor: "#17171b"
+  },
+  loadMoreBtn: {
+    width: "100%",
+    minHeight: 48,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    borderRadius: 12,
+    backgroundColor: "#E8E8EE"
+  },
+  loadMoreBtnPressed: {
+    opacity: 0.88
+  },
+  loadMoreBtnLabel: {
+    color: "#101013",
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  templateFooterHint: {
+    color: "#6A6A74",
+    fontSize: 11,
+    textAlign: "center",
+    paddingVertical: 8
+  },
+  clipInspector: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#26262c",
+    backgroundColor: "#141418",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    gap: 6
+  },
+  clipInspectorTitle: {
+    color: "#F2F2F5",
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  busyOverlay: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    zIndex: 80,
+    backgroundColor: "rgba(8,8,10,0.62)",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 28
+  }),
+  busyCard: {
+    width: "100%",
+    maxWidth: 320,
+    borderRadius: 16,
+    backgroundColor: "#1c1c22",
+    paddingHorizontal: 20,
+    paddingVertical: 22,
+    alignItems: "center",
+    gap: 10
+  },
+  busyTitle: {
+    color: "#F7F7FA",
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  busyDetail: {
+    color: "#A9A9B4",
+    fontSize: 13,
+    textAlign: "center",
+    lineHeight: 18
+  },
+  busyTrack: {
+    marginTop: 6,
+    width: "100%",
+    height: 4,
+    borderRadius: 99,
+    backgroundColor: "#2c2c34",
+    overflow: "hidden"
+  },
+  busyTrackFill: {
+    width: "62%",
+    height: "100%",
+    borderRadius: 99,
+    backgroundColor: "#7C8CFF"
+  },
+  sceneSwatch: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(255,255,255,0.12)"
+  },
+  logoPreview: {
+    height: 48,
+    width: "100%",
+    marginBottom: 8
+  },
+  logoOverlay: {
+    position: "absolute",
+    right: 10,
+    bottom: 10,
+    width: 72,
+    height: 28
+  },
+  stageToolbar: {
+    position: "absolute",
+    left: 10,
+    right: 10,
+    bottom: 10,
+    flexDirection: "row",
+    gap: 6,
+    justifyContent: "center"
+  },
+  stagePill: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 999,
+    backgroundColor: "rgba(10,10,12,0.72)"
+  },
+  stagePillOn: {
+    backgroundColor: "#8B7CFF"
+  },
+  stagePillLabel: {
+    color: "#F7F7FA",
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  stageToolRow: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    gap: 6,
+    flexDirection: "row"
+  },
+  textPreset: {
+    minWidth: 108,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 10,
+    backgroundColor: "#16161A",
+    borderWidth: 1,
+    borderColor: "rgba(255,255,255,0.08)"
+  },
+  textPresetSample: {
+    color: "#F7F7FA",
+    fontSize: 15,
+    fontWeight: "700"
+  },
+  textPresetLabel: {
+    color: "#7A7A88",
+    fontSize: 11,
+    marginTop: 4
+  },
+  voiceScroll: {
+    maxHeight: 240
+  },
+  voiceInstruct: {
+    color: "#F7F7FA",
+    fontSize: 13,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 9,
+    backgroundColor: "#16161A",
+    marginTop: 6
+  },
+  voiceText: {
+    minHeight: 64,
+    color: "#F7F7FA",
+    fontSize: 13.5,
+    lineHeight: 19,
+    padding: 12,
+    borderRadius: 9,
+    backgroundColor: "#16161A",
+    marginTop: 8,
+    textAlignVertical: "top"
+  },
+  chipRecording: {
+    backgroundColor: "rgba(255, 132, 132, 0.16)"
+  },
+  cloneBox: {
+    marginTop: 10,
+    paddingTop: 10,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "rgba(255,255,255,0.08)",
+    gap: 4
+  },
+  cloneTitle: {
+    color: "#8B7CFF",
+    fontSize: 10.5,
+    fontWeight: "700",
+    letterSpacing: 0.8,
+    marginBottom: 2
+  },
+  cloneHint: {
+    color: "#7A7A88",
+    fontSize: 11.5,
+    flexShrink: 1
+  },
+  voTrack: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingVertical: 4,
+    paddingHorizontal: 2,
+    marginBottom: 4
+  },
+  voTrackLabel: {
+    color: "#DCD6FF",
+    fontSize: 11
+  },
+  mediaTile: {
+    width: 84,
+    height: 56
+  },
+  devicePick: {
+    borderRadius: 10,
+    borderWidth: 1.5,
+    borderColor: "#2A2440",
+    borderStyle: "dashed",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3
+  },
+  devicePickLabel: {
+    color: "#8B7CFF",
+    fontSize: 10,
+    fontWeight: "600"
+  },
+  mediaThumb: {
+    width: 84,
+    height: 56,
+    borderRadius: 8,
+    backgroundColor: "#16161A"
+  },
+  mediaThumbVideo: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#16161A"
+  },
+  mediaAdd: {
+    position: "absolute",
+    right: 3,
+    top: 3,
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: "#8B7CFF",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  filterTile: {
+    alignItems: "center",
+    gap: 5,
+    width: 62
+  },
+  filterThumb: {
+    width: 56,
+    height: 56,
+    borderRadius: 10,
+    overflow: "hidden",
+    backgroundColor: "#16161A",
+    borderWidth: 1.5,
+    borderColor: "transparent"
+  },
+  filterThumbActive: {
+    borderColor: "#8B7CFF"
+  },
+  filterNoneGlyph: {
+    position: "absolute",
+    alignSelf: "center",
+    top: 19
+  },
+  filterLabel: {
+    color: "#9A9AA5",
+    fontSize: 10.5
+  },
+  filterLabelActive: {
+    color: "#F7F7FA",
+    fontWeight: "600"
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 9,
+    backgroundColor: "#1F1F24"
+  },
+  chipWide: {
+    alignSelf: "flex-start"
+  },
+  chipActive: {
+    backgroundColor: "#8B7CFF"
+  },
+  chipDisabled: {
+    opacity: 0.35
+  },
+  chipLabel: {
+    color: "#F7F7FA",
+    fontSize: 12.5,
+    fontWeight: "500"
+  },
+  chipLabelActive: {
+    color: "#0A0A0C"
+  },
+  chipDanger: {
+    color: "#FF6B6B"
+  },
+  textInput: {
+    color: "#F7F7FA",
+    fontSize: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+    borderRadius: 9,
+    backgroundColor: "#16161A"
+  },
+  soundtrackSection: {
+    marginTop: 10
+  },
+  soundtrackInput: {
+    flex: 1,
+    minWidth: 0
+  },
+  soundtrackTitle: {
+    flexShrink: 1,
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#F7F7FA"
+  },
+  stepper: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 9,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 9,
+    backgroundColor: "#1F1F24"
+  },
+  stepperLabel: {
+    color: "#9A9AA5",
+    fontSize: 11.5
+  },
+  stepperValue: {
+    color: "#F7F7FA",
+    fontSize: 12.5,
+    fontVariant: ["tabular-nums"],
+    minWidth: 34,
+    textAlign: "center"
+  },
+  trimTrack: {
+    height: 40,
+    borderRadius: 8,
+    backgroundColor: "#16161A",
+    justifyContent: "center",
+    marginBottom: 4
+  },
+  trimWindow: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    borderRadius: 8,
+    backgroundColor: "rgba(139, 124, 255, 0.28)",
+    borderWidth: 1.5,
+    borderColor: "#8B7CFF"
+  },
+  trimHandle: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: 20,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  trimHandleBar: {
+    width: 4,
+    height: 22,
+    borderRadius: 2,
+    backgroundColor: "#F7F7FA"
+  },
+  trimReadout: {
+    color: "#9A9AA5",
+    fontSize: 10.5,
+    textAlign: "center",
+    fontVariant: ["tabular-nums"]
+  },
+  toolbarScroll: {
+    flexGrow: 0,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "rgba(255,255,255,0.08)"
+  },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    paddingBottom: 10
+  },
+  toolbarTab: {
+    alignItems: "center",
+    gap: 3,
+    minWidth: 56,
+    paddingHorizontal: 6
+  },
+  toolbarLabel: {
+    color: "#C8C8D0",
+    fontSize: 10
+  },
+  toolbarLabelActive: {
+    color: "#8B7CFF",
+    fontWeight: "600"
+  },
+  notice: {
+    position: "absolute",
+    left: 20,
+    right: 20,
+    bottom: 84,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    borderRadius: 12,
+    backgroundColor: "rgba(248, 250, 252, 0.96)"
+  },
+  noticeText: {
+    flex: 1,
+    color: "#0f172a",
+    fontSize: 13
+  },
+  noticeDismiss: {
+    color: "#6C5CE7",
+    fontSize: 13,
+    fontWeight: "600"
+  }
+});export{VideoEditorExperience,VideoEditorExperience as default};//# sourceMappingURL=VideoEditorExperience.js.map