@adminide-stack/yantra-mobile 12.0.125-alpha.1 → 12.0.126

package/lib/features/canvas/VideoGeneratorExperience.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {StyleSheet,View,Pressable,Text,ActivityIndicator,ScrollView,TextInput}from'react-native';import {useSafeInsets}from'./withRemoteSafeArea.js';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {useKeyboardLiftHeight,KeyboardAwareScreen,KeyboardComposerDock,COMPOSER_INPUT_NATIVE_ID}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {resultUrl,friendlyMediaError,generationImageUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {STATIC_VIDEO_MODELS,normalizeModels,promptAudioModels,videoDurationOptions,buildVideoGenerateParams}from'./generationModels.js';import {DEFAULT_PROMO_PRESET,lookupPromoPreset,defaultNarration,EMPTY_PROMO_CONTEXT,defaultPromoQuality,PROMO_PRESETS,PROMO_DURATIONS,PROMO_PLAYBOOKS,PROMO_ASPECT_RATIOS,designPromoProject,PROMO_CONNECTOR,producePromoVideo}from'./promoVideo.js';import {PromoContextFields,PromoProductionFields}from'./PromoContextFields.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect}from'react';import {View,Text,StyleSheet,ActivityIndicator,ScrollView,TextInput}from'react-native';import {useSafeInsets}from'./withRemoteSafeArea.js';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {useKeyboardLiftHeight,KeyboardAwareScreen,KeyboardComposerDock,COMPOSER_INPUT_NATIVE_ID}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {resultUrl,friendlyMediaError,generationImageUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {STATIC_VIDEO_MODELS,normalizeModels,promptAudioModels,videoDurationOptions,buildVideoGenerateParams}from'./generationModels.js';import {DEFAULT_PROMO_PRESET,lookupPromoPreset,defaultNarration,EMPTY_PROMO_CONTEXT,defaultPromoQuality,PROMO_PRESETS,PROMO_DURATIONS,PROMO_PLAYBOOKS,PROMO_ASPECT_RATIOS,designPromoProject,PROMO_CONNECTOR,producePromoVideo}from'./promoVideo.js';import {PromoContextFields,PromoProductionFields}from'./PromoContextFields.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Pressable,pressedStyle,Segmented,RADIUS,SPACE,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,6 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const HSCROLL = {
+  flexGrow: 0
+};
 const ASPECTS = ["16:9", "9:16", "1:1"];
 function VideoGeneratorExperience({
   mode = "video",
@@ -28,6 +31,8 @@ function VideoGeneratorExperience({
   onGenerated,
   onPromoDesigned
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const imageReference = (mode === "video" || mode === "promo") && (item == null ? void 0 : item.type) === "image" ? unwrapProxyUrl(item.src) : null;
   const [referenceUrl, setReferenceUrl] = useState(imageReference);
   const [videoSourceUrl, setVideoSourceUrl] = useState(restyle && (item == null ? void 0 : item.type) === "video" ? unwrapProxyUrl(item.src) : null);
@@ -78,7 +83,7 @@ function VideoGeneratorExperience({
       setReferenceUrl(resultUrl(result, "YANTRA_VIDEO_EDIT_THUMBNAIL"));
     }).catch((err) => {
       if (cancelled) return;
-      setNotice(`Could not capture a still from this clip \u2014 generating without a reference.
+      setNotice(`Could not capture a still from this clip, so generating without a reference.
 
 ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
     }).finally(() => {
@@ -121,7 +126,7 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
     const text = prompt.trim();
     if (!text || busy || capturing) return;
     if (!runAction) {
-      setNotice("Generation needs the host connector \u2014 not wired in this host.");
+      setNotice("Generation needs the host connector, which this host has not wired up.");
       return;
     }
     setBusy(true);
@@ -178,23 +183,23 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
     });
   };
   const title = mode === "image" ? "Create image" : mode === "audio" ? "Create audio" : mode === "promo" ? "Marketing video" : restyle ? "Restyle this clip" : (item == null ? void 0 : item.type) === "video" ? "Continue this clip" : "Create video";
-  const hint = mode === "image" ? "Describe the image you want on this board." : mode === "audio" ? "Describe the audio you want on this board." : mode === "promo" ? (item == null ? void 0 : item.type) === "video" ? "This clip is the footage. Describe the promo you want cut from it." : "Describe the marketing video \u2014 brand, offer, and who it is for." : restyle ? "This footage is the source. Describe how it should look after the restyle." : (item == null ? void 0 : item.type) === "video" ? "The new clip starts from a still of this video. Describe what happens next." : (item == null ? void 0 : item.type) === "image" ? "This image is the reference. Describe the motion you want." : "Describe the video you want on this board.";
+  const hint = mode === "image" ? "Describe the image you want on this board." : mode === "audio" ? "Describe the audio you want on this board." : mode === "promo" ? (item == null ? void 0 : item.type) === "video" ? "This clip is the footage. Describe the promo you want cut from it." : "Describe the marketing video: brand, offer, and who it is for." : restyle ? "This footage is the source. Describe how it should look after the restyle." : (item == null ? void 0 : item.type) === "video" ? "The new clip starts from a still of this video. Describe what happens next." : (item == null ? void 0 : item.type) === "image" ? "This image is the reference. Describe the motion you want." : "Describe the video you want on this board.";
   const stageIcon = mode === "image" ? "image-outline" : mode === "audio" ? "microphone-outline" : mode === "promo" ? "bullhorn-outline" : "video-outline";
   return /* @__PURE__ */ jsxs(KeyboardAwareScreen, { style: styles.root, testID: "media-generator", children: [
     /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
       /* @__PURE__ */ jsx(Pressable, { onPress: () => {
         dismissKeyboard();
         onClose();
-      }, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#F7F7FA" }) }),
+      }, hitSlop: 4, style: ({
+        pressed
+      }) => [styles.headerButton, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Close", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 20, color: theme.foreground }) }),
       /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, children: title }),
-      /* @__PURE__ */ jsx(View, { style: {
-        width: 22
-      } })
+      /* @__PURE__ */ jsx(View, { style: styles.headerSpacer })
     ] }),
-    /* @__PURE__ */ jsxs(Pressable, { style: styles.stage, onPress: dismissKeyboard, accessible: false, children: [
+    /* @__PURE__ */ jsxs(Pressable, { style: [styles.stage, mode === "promo" && styles.stageCompact], onPress: dismissKeyboard, accessible: false, children: [
       referenceUrl ? /* @__PURE__ */ jsx(Image, { source: {
         uri: referenceUrl
-      }, style: StyleSheet.absoluteFill, contentFit: "contain" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: stageIcon, size: 56, color: "#2A2440" }),
+      }, style: StyleSheet.absoluteFill, contentFit: "contain" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: stageIcon, size: 48, color: "rgba(255,255,255,0.22)" }),
       (busy || capturing) && /* @__PURE__ */ jsxs(View, { style: styles.busyVeil, children: [
         /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F7F7FA" }),
         /* @__PURE__ */ jsx(Text, { style: styles.busyLabel, children: capturing ? "Capturing frame\u2026" : promoProgress || `Generating ${mode === "promo" ? "promo" : mode}\u2026` })
@@ -206,51 +211,93 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
         frameSec.toFixed(1),
         "s"
       ] }),
-      /* @__PURE__ */ jsx(View, { style: styles.aspectRow, children: [0.5, 1, 2, 3, 5].map((sec) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setFrameSec(sec), style: [styles.chip, frameSec === sec && styles.chipOn], children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, frameSec === sec && styles.chipLabelOn], children: [
+      /* @__PURE__ */ jsx(View, { style: styles.aspectRow, children: [0.5, 1, 2, 3, 5].map((sec) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setFrameSec(sec), style: ({
+        pressed
+      }) => [styles.chip, frameSec === sec && styles.chipOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, frameSec === sec && styles.chipLabelOn], children: [
         sec,
         "s"
       ] }) }, sec)) })
     ] }) : null,
     keyboardOpen ? null : /* @__PURE__ */ jsx(Pressable, { onPress: dismissKeyboard, accessible: false, children: /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) }),
-    mode === "promo" && !keyboardOpen ? /* @__PURE__ */ jsxs(View, { style: styles.promoBlock, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.aspectRow, children: PROMO_PRESETS.map((preset) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-        setPromoPreset(preset.id);
-        setPromoDuration(preset.defaultDurationSeconds);
-        setPromoNarration(defaultNarration(preset.id));
-        setPromoQuality(defaultPromoQuality(preset.id));
-      }, style: [styles.chip, promoPreset === preset.id && styles.chipOn], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, promoPreset === preset.id && styles.chipLabelOn], children: preset.name }) }, preset.id)) }),
-      /* @__PURE__ */ jsx(View, { style: styles.aspectRow, children: PROMO_DURATIONS.map((secs) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setPromoDuration(secs), style: [styles.chip, promoDuration === secs && styles.chipOn], accessibilityRole: "button", children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, promoDuration === secs && styles.chipLabelOn], children: [
-        secs,
-        "s"
-      ] }) }, secs)) }),
-      /* @__PURE__ */ jsxs(View, { style: styles.aspectRow, children: [
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setPromoCaptions((v) => !v), style: [styles.chip, promoCaptions && styles.chipOn], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, promoCaptions && styles.chipLabelOn], children: "Captions" }) }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setPromoNarration((v) => !v), style: [styles.chip, promoNarration && styles.chipOn], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, promoNarration && styles.chipLabelOn], children: "Narration" }) })
-      ] }),
-      /* @__PURE__ */ jsx(View, { style: styles.aspectRow, children: PROMO_PLAYBOOKS.map((p) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setPromoPlaybook(p.id), style: [styles.chip, promoPlaybook === p.id && styles.chipOn], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, promoPlaybook === p.id && styles.chipLabelOn], children: p.name }) }, p.id || "default")) }),
-      /* @__PURE__ */ jsx(PromoContextFields, { value: promoContext, onChange: (patch) => setPromoContext((prev) => __spreadValues(__spreadValues({}, prev), patch)), logoUrl: promoLogoUrl, onPickLogo: (item == null ? void 0 : item.type) === "image" ? () => setPromoLogoUrl(unwrapProxyUrl(item.src)) : void 0, onClearLogo: () => setPromoLogoUrl(null) }),
-      /* @__PURE__ */ jsx(PromoProductionFields, __spreadValues({ quality: promoQuality, onQuality: setPromoQuality, narrator: promoNarrator, onNarrator: setPromoNarrator, useCases: promoUseCases, onUseCases: setPromoUseCases }, onPromoDesigned && !lookupPromoPreset(promoPreset).produceOnly ? {
-        designModel: promoDesignModel,
-        onDesignModel: setPromoDesignModel
-      } : {}))
-    ] }) : null,
-    mode !== "promo" && models.length > 0 && !keyboardOpen ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.aspectRow, children: models.map((model) => {
+    mode === "promo" && !keyboardOpen ? (
+      // Promo has many settings: they scroll in their own region, grouped and labelled,
+      // so the wall of chips becomes a short form.
+      /* @__PURE__ */ jsxs(ScrollView, { style: styles.promoScroll, contentContainerStyle: styles.promoBlock, keyboardShouldPersistTaps: "handled", children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.groupLabel, children: "Format" }),
+        /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.railRow, children: PROMO_PRESETS.map((preset) => {
+          const on = promoPreset === preset.id;
+          return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+            setPromoPreset(preset.id);
+            setPromoDuration(preset.defaultDurationSeconds);
+            setPromoNarration(defaultNarration(preset.id));
+            setPromoQuality(defaultPromoQuality(preset.id));
+          }, style: ({
+            pressed
+          }) => [styles.presetCard, on && styles.presetCardOn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityState: {
+            selected: on
+          }, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.presetHead, children: [
+              /* @__PURE__ */ jsx(Text, { style: [styles.presetName, on && styles.presetNameOn], numberOfLines: 1, children: preset.name }),
+              on ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check-circle", size: 16, color: theme.background }) : null
+            ] }),
+            /* @__PURE__ */ jsx(Text, { style: [styles.presetDesc, on && styles.presetDescOn], numberOfLines: 3, children: preset.description })
+          ] }, preset.id);
+        }) }),
+        /* @__PURE__ */ jsx(View, { style: styles.groupRow, children: /* @__PURE__ */ jsxs(View, { style: styles.groupCol, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.groupLabel, children: "Length" }),
+          /* @__PURE__ */ jsx(Segmented, { options: PROMO_DURATIONS.map((secs) => ({
+            id: String(secs),
+            label: `${secs}s`
+          })), value: String(promoDuration), onChange: (id) => setPromoDuration(Number(id)), style: styles.padded })
+        ] }) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.groupLabel, children: "Style" }),
+        /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.railRow, children: PROMO_PLAYBOOKS.map((p) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setPromoPlaybook(p.id), style: ({
+          pressed
+        }) => [styles.chip, promoPlaybook === p.id && styles.chipOn, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, promoPlaybook === p.id && styles.chipLabelOn], children: p.name }) }, p.id || "default")) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.groupLabel, children: "Extras" }),
+        /* @__PURE__ */ jsx(View, { style: styles.railRowWrap, children: [["Captions", promoCaptions, () => setPromoCaptions((v) => !v)], ["Narration", promoNarration, () => setPromoNarration((v) => !v)]].map(([label, on, toggle]) => /* @__PURE__ */ jsxs(Pressable, { onPress: toggle, style: ({
+          pressed
+        }) => [styles.chip, styles.toggleChip, on && styles.chipOn, pressedStyle(pressed)], accessibilityRole: "switch", accessibilityState: {
+          checked: on
+        }, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: on ? "check" : "plus", size: 16, color: on ? theme.background : theme.mutedForeground }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelOn], children: label })
+        ] }, label)) }),
+        /* @__PURE__ */ jsxs(View, { style: styles.promoFields, children: [
+          /* @__PURE__ */ jsx(PromoContextFields, { value: promoContext, onChange: (patch) => setPromoContext((prev) => __spreadValues(__spreadValues({}, prev), patch)), logoUrl: promoLogoUrl, onPickLogo: (item == null ? void 0 : item.type) === "image" ? () => setPromoLogoUrl(unwrapProxyUrl(item.src)) : void 0, onClearLogo: () => setPromoLogoUrl(null) }),
+          /* @__PURE__ */ jsx(PromoProductionFields, __spreadValues({ quality: promoQuality, onQuality: setPromoQuality, narrator: promoNarrator, onNarrator: setPromoNarrator, useCases: promoUseCases, onUseCases: setPromoUseCases }, onPromoDesigned && !lookupPromoPreset(promoPreset).produceOnly ? {
+            designModel: promoDesignModel,
+            onDesignModel: setPromoDesignModel
+          } : {}))
+        ] })
+      ] })
+    ) : null,
+    mode !== "promo" && models.length > 0 && !keyboardOpen ? /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.aspectRow, children: models.map((model) => {
       const blocked = Boolean(videoSourceUrl) && !model.supportsVideoInput;
-      return /* @__PURE__ */ jsx(Pressable, { onPress: () => !blocked && setSelectedModel(model.id), disabled: blocked, style: [styles.chip, selectedModel === model.id && styles.chipOn, blocked && styles.chipBlocked], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, selectedModel === model.id && styles.chipLabelOn, blocked && styles.chipLabelBlocked], numberOfLines: 1, children: model.label || model.id }) }, model.id);
+      return /* @__PURE__ */ jsx(Pressable, { onPress: () => !blocked && setSelectedModel(model.id), disabled: blocked, style: ({
+        pressed
+      }) => [styles.chip, selectedModel === model.id && styles.chipOn, blocked && styles.chipBlocked, pressedStyle(pressed && !blocked)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, selectedModel === model.id && styles.chipLabelOn, blocked && styles.chipLabelBlocked], numberOfLines: 1, children: model.label || model.id }) }, model.id);
     }) }) : null,
     mode === "video" && durationChoices.length > 0 && !keyboardOpen ? /* @__PURE__ */ jsxs(View, { style: styles.aspectRow, children: [
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => setVideoDuration(0), style: [styles.chip, videoDuration === 0 && styles.chipOn], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, videoDuration === 0 && styles.chipLabelOn], children: (selectedModelInfo == null ? void 0 : selectedModelInfo.defaultDurationSeconds) ? `Auto (${selectedModelInfo.defaultDurationSeconds}s)` : "Auto" }) }),
-      durationChoices.map((secs) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setVideoDuration(secs), style: [styles.chip, videoDuration === secs && styles.chipOn], accessibilityRole: "button", children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, videoDuration === secs && styles.chipLabelOn], children: [
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => setVideoDuration(0), style: ({
+        pressed
+      }) => [styles.chip, videoDuration === 0 && styles.chipOn, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, videoDuration === 0 && styles.chipLabelOn], children: (selectedModelInfo == null ? void 0 : selectedModelInfo.defaultDurationSeconds) ? `Auto (${selectedModelInfo.defaultDurationSeconds}s)` : "Auto" }) }),
+      durationChoices.map((secs) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setVideoDuration(secs), style: ({
+        pressed
+      }) => [styles.chip, videoDuration === secs && styles.chipOn, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, videoDuration === secs && styles.chipLabelOn], children: [
         secs,
         "s"
       ] }) }, secs))
     ] }) : null,
-    mode !== "audio" ? /* @__PURE__ */ jsx(View, { style: styles.aspectRow, children: (mode === "promo" ? PROMO_ASPECT_RATIOS : ASPECTS).map((value) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setAspect(value), style: [styles.chip, aspect === value && styles.chipOn], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, aspect === value && styles.chipLabelOn], children: value }) }, value)) }) : null,
+    mode !== "audio" ? /* @__PURE__ */ jsx(View, { style: styles.segmentRow, children: /* @__PURE__ */ jsx(Segmented, { options: (mode === "promo" ? PROMO_ASPECT_RATIOS : ASPECTS).map((value) => ({
+      id: value,
+      label: value
+    })), value: aspect, onChange: (value) => setAspect(value), style: styles.segmented }) }) : null,
     /* @__PURE__ */ jsx(KeyboardComposerDock, { closedInset: insets.bottom, onSwipeUp: () => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }, children: /* @__PURE__ */ jsxs(View, { style: styles.composer, children: [
-      /* @__PURE__ */ jsx(TextInput, { ref: inputRef, nativeID: COMPOSER_INPUT_NATIVE_ID, value: prompt, onChangeText: setPrompt, placeholder: mode === "image" ? "Describe the image\u2026" : mode === "audio" ? "Describe the audio\u2026" : mode === "promo" ? "Describe the promo\u2026" : "Describe the video\u2026", placeholderTextColor: "#7A7A88", style: styles.input, multiline: true, editable: !busy }),
+    }, children: /* @__PURE__ */ jsx(View, { style: styles.composer, children: /* @__PURE__ */ jsxs(View, { style: styles.composerField, children: [
+      /* @__PURE__ */ jsx(TextInput, { ref: inputRef, nativeID: COMPOSER_INPUT_NATIVE_ID, value: prompt, onChangeText: setPrompt, placeholder: mode === "image" ? "Describe the image\u2026" : mode === "audio" ? "Describe the audio\u2026" : mode === "promo" ? "Describe the promo\u2026" : "Describe the video\u2026", placeholderTextColor: theme.mutedForeground, style: styles.input, multiline: true, editable: !busy }),
       mode === "promo" && onPromoDesigned && !lookupPromoPreset(promoPreset).produceOnly ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
         if (!runAction || busy || !prompt.trim()) return;
         setBusy(true);
@@ -271,163 +318,269 @@ ${err instanceof Error ? err.message : String(err)}`.slice(0, 280));
         } : {}), promoDesignModel ? {
           model: promoDesignModel
         } : {})).then((designed) => onPromoDesigned(designed)).catch((err) => setNotice(friendlyMediaError(err, "promo design"))).finally(() => setBusy(false));
-      }, disabled: busy || capturing || !prompt.trim(), style: [styles.designSend, (!prompt.trim() || busy || capturing) && styles.sendDisabled], accessibilityRole: "button", accessibilityLabel: "Design editable cut", children: /* @__PURE__ */ jsx(Text, { style: styles.designSendLabel, children: "Design" }) }) : null,
-      /* @__PURE__ */ jsx(Pressable, { onPress: generate, disabled: busy || capturing || !prompt.trim(), style: [styles.send, (!prompt.trim() || busy || capturing) && styles.sendDisabled], accessibilityRole: "button", accessibilityLabel: `Generate ${mode}`, children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#0A0A0C" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-right", size: 20, color: "#0A0A0C" }) })
-    ] }) }),
+      }, disabled: busy || capturing || !prompt.trim(), style: ({
+        pressed
+      }) => [styles.designSend, (!prompt.trim() || busy || capturing) && styles.sendDisabled, pressedStyle(pressed && !busy)], accessibilityRole: "button", accessibilityLabel: "Design editable cut", children: /* @__PURE__ */ jsx(Text, { style: styles.designSendLabel, children: "Design" }) }) : null,
+      /* @__PURE__ */ jsx(Pressable, { onPress: generate, disabled: busy || capturing || !prompt.trim(), style: ({
+        pressed
+      }) => [styles.send, (!prompt.trim() || busy || capturing) && styles.sendDisabled, pressedStyle(pressed && !busy)], accessibilityRole: "button", accessibilityLabel: `Generate ${mode}`, children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.primaryForeground }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-up", size: 20, color: theme.primaryForeground }) })
+    ] }) }) }),
     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
   ] });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: "#0A0A0C"
+    backgroundColor: theme.background
   },
   header: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm
   },
-  headerTitle: {
-    color: "#F7F7FA",
-    fontSize: 15,
-    fontWeight: "600"
+  headerButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.card
+  },
+  headerSpacer: {
+    width: 40
   },
+  headerTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground
+  }),
   stage: {
     flex: 1,
-    marginHorizontal: 14,
-    borderRadius: 18,
-    backgroundColor: "#0F0F14",
+    marginHorizontal: SPACE.lg,
+    marginTop: SPACE.xs,
+    borderRadius: RADIUS.xl,
+    backgroundColor: "#0F0F12",
+    // media stage stays dark
     overflow: "hidden",
     alignItems: "center",
     justifyContent: "center"
   },
+  // Promo's settings need the height; its stage is a strip that still shows a reference or progress.
+  stageCompact: {
+    flex: 0,
+    height: 120
+  },
+  promoScroll: {
+    flex: 1
+  },
+  groupLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.mutedForeground,
+    paddingHorizontal: SPACE.lg,
+    marginTop: SPACE.lg,
+    marginBottom: SPACE.sm
+  }),
+  groupRow: {
+    flexDirection: "row"
+  },
+  groupCol: {
+    flex: 1
+  },
+  padded: {
+    marginHorizontal: SPACE.lg
+  },
+  railRow: {
+    paddingHorizontal: SPACE.lg,
+    gap: SPACE.sm
+  },
+  railRowWrap: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.lg
+  },
+  toggleChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs + 2
+  },
+  presetCard: {
+    width: 176,
+    minHeight: 96,
+    padding: SPACE.md,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.card,
+    gap: SPACE.xs
+  },
+  presetCardOn: {
+    backgroundColor: theme.foreground
+  },
+  presetHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: SPACE.xs
+  },
+  presetName: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 14,
+    color: theme.foreground,
+    flexShrink: 1
+  }),
+  presetNameOn: {
+    color: theme.background
+  },
+  presetDesc: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    lineHeight: 16,
+    color: theme.mutedForeground
+  }),
+  presetDescOn: {
+    color: theme.isDark ? "#3f3f46" : "#d4d4d8"
+  },
+  promoFields: {
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.lg,
+    paddingBottom: SPACE.xl
+  },
   busyVeil: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     alignItems: "center",
     justifyContent: "center",
-    gap: 10,
+    gap: SPACE.md,
     backgroundColor: "rgba(10, 10, 12, 0.55)"
   }),
-  busyLabel: {
-    color: "#E8E8EE",
-    fontSize: 12.5
-  },
-  hint: {
-    color: "#9A9AA5",
-    fontSize: 12.5,
-    paddingHorizontal: 18,
-    paddingTop: 12
-  },
+  busyLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: "#fafafa"
+  }),
+  hint: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    lineHeight: 20,
+    color: theme.mutedForeground,
+    paddingHorizontal: SPACE.xl - 4,
+    paddingTop: SPACE.md + 2
+  }),
   frameScrub: {
-    paddingTop: 8,
-    gap: 4
-  },
-  frameScrubLabel: {
-    color: "#9A9AA5",
-    fontSize: 11,
-    paddingHorizontal: 18
+    paddingTop: SPACE.md,
+    gap: SPACE.xs
   },
+  frameScrubLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground,
+    paddingHorizontal: SPACE.lg
+  }),
   promoBlock: {
-    paddingTop: 4
+    paddingBottom: SPACE.lg
   },
   aspectRow: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 8,
-    paddingHorizontal: 16,
-    paddingTop: 10
+    gap: SPACE.sm - 2,
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.md - 2
+  },
+  segmentRow: {
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.md
+  },
+  segmented: {
+    flexGrow: 0,
+    alignSelf: "flex-start"
   },
   chip: {
-    paddingHorizontal: 12,
-    paddingVertical: 7,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24"
+    minHeight: 36,
+    justifyContent: "center",
+    paddingHorizontal: SPACE.md + 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
   },
   chipOn: {
-    backgroundColor: "#8B7CFF"
+    backgroundColor: theme.foreground
   },
   chipBlocked: {
     opacity: 0.4
   },
-  chipLabel: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
-    fontWeight: "500"
-  },
+  chipLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
   chipLabelOn: {
-    color: "#0A0A0C"
+    color: theme.background
   },
   chipLabelBlocked: {
-    color: "#7A7A88"
+    color: theme.mutedForeground
   },
+  // The keyboard dock does not stretch its child: without a width the row collapses to the send button.
   composer: {
+    alignSelf: "stretch",
+    width: "100%",
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.md,
+    paddingBottom: SPACE.sm
+  },
+  composerField: {
     flexDirection: "row",
     alignItems: "flex-end",
-    gap: 10,
-    paddingHorizontal: 14,
-    paddingTop: 12,
-    paddingBottom: 8
+    gap: SPACE.sm,
+    minHeight: 56,
+    paddingLeft: SPACE.lg,
+    paddingRight: SPACE.sm - 2,
+    paddingVertical: SPACE.sm - 2,
+    borderRadius: RADIUS.xl,
+    backgroundColor: theme.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border
   },
   input: {
     flex: 1,
-    minHeight: 44,
-    maxHeight: 120,
-    borderRadius: 12,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    backgroundColor: "#1F1F24",
-    color: "#F7F7FA",
-    fontSize: 15
+    minHeight: HIT,
+    maxHeight: 132,
+    paddingTop: SPACE.md - 1,
+    paddingBottom: SPACE.md - 1,
+    color: theme.foreground,
+    fontSize: 15,
+    lineHeight: 21
   },
   send: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    backgroundColor: "#8B7CFF",
+    width: HIT,
+    height: HIT,
+    borderRadius: HIT / 2,
+    backgroundColor: theme.primary,
     alignItems: "center",
     justifyContent: "center"
   },
   designSend: {
-    paddingHorizontal: 12,
-    height: 44,
-    borderRadius: 22,
-    backgroundColor: "#FDE8D8",
+    paddingHorizontal: SPACE.md + 2,
+    height: HIT,
+    borderRadius: HIT / 2,
+    backgroundColor: theme.isDark ? theme.secondary : theme.surface,
     alignItems: "center",
     justifyContent: "center"
   },
-  designSendLabel: {
-    fontSize: 13,
-    fontWeight: "700",
-    color: "#9a3412"
-  },
+  designSendLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
   sendDisabled: {
     opacity: 0.4
   },
   notice: {
     position: "absolute",
-    left: 20,
-    right: 20,
-    bottom: 24,
+    left: SPACE.lg,
+    right: SPACE.lg,
+    bottom: SPACE.xl,
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-    paddingHorizontal: 14,
-    paddingVertical: 11,
-    borderRadius: 12,
-    backgroundColor: "rgba(248, 250, 252, 0.96)"
+    gap: SPACE.md,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.foreground
   },
-  noticeText: {
+  noticeText: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
     flex: 1,
-    color: "#0f172a",
-    fontSize: 13
-  },
-  noticeDismiss: {
-    color: "#6C5CE7",
-    fontSize: 13,
-    fontWeight: "600"
-  }
-});export{VideoGeneratorExperience};//# sourceMappingURL=VideoGeneratorExperience.js.map
+    color: theme.background
+  }),
+  noticeDismiss: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 14,
+    color: theme.background
+  })
+}));export{VideoGeneratorExperience};//# sourceMappingURL=VideoGeneratorExperience.js.map