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

package/lib/features/canvas/CanvasGeneratePanel.js

@@ -1,4 +1,6 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useEffect}from'react';import {StyleSheet,View,ScrollView,Pressable,Text,Image,TextInput,ActivityIndicator}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {resultUrl,friendlyMediaError,generationImageUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {STATIC_IMAGE_MODELS,normalizeModels,promptAudioModels,STATIC_VIDEO_MODELS,generationCapabilities,videoDurationOptions,buildVideoGenerateParams}from'./generationModels.js';import {DEFAULT_PROMO_PRESET,EMPTY_PROMO_CONTEXT,PROMO_PRESETS,PROMO_DURATIONS,PROMO_ASPECT_RATIOS,PROMO_PLAYBOOKS,designPromoProject,PROMO_CONNECTOR}from'./promoVideo.js';import {PromoContextFields}from'./PromoContextFields.js';import {startPromoTask}from'./canvasTasks.js';import {CLIP_COUNT_CHOICES,CLIP_ASPECT_RATIOS,CLIP_RESOLUTIONS,buildClipRunParams,parseClipRunResult}from'./videoClips.js';import {NativeDictationBar}from'../audio-input/NativeDictationBar.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {StyleSheet,View,ScrollView,Pressable,Text,TextInput,ActivityIndicator}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {resultUrl,friendlyMediaError,generationImageUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {STATIC_IMAGE_MODELS,normalizeModels,promptAudioModels,STATIC_VIDEO_MODELS,generationCapabilities,videoReferenceCap,modelThatReadsImages,videoDurationOptions,buildVideoGenerateParams}from'./generationModels.js';import {MAX_REFERENCE_IMAGES,PROMO_MAX_REFERENCES,addReference,imageLaneCall}from'./generatorReferences.js';import {modelForCommand,parseCommandLine,matchCommands,laneForCommand,findCommand,missingFor,MISSING_LABEL,VIDEO_INPUT_MODEL,commandPrompt}from'./generatorCommands.js';import {ReferenceStrip,StillRoleSwitch,FrameSlot}from'./GeneratorReferenceSlots.js';import {CanvasTemplatesPanel}from'./CanvasTemplatesPanel.js';import {nearestAspect}from'./studioLooks.js';import {ensureFetchableMediaUrls,ensureFetchableMediaUrl}from'./mediaUrls.js';import {DEFAULT_PROMO_PRESET,EMPTY_PROMO_CONTEXT,defaultPromoQuality,PROMO_PRESETS,PROMO_DURATIONS,PROMO_ASPECT_RATIOS,PROMO_PLAYBOOKS,lookupPromoPreset,designPromoProject,PROMO_CONNECTOR}from'./promoVideo.js';import {PromoContextFields,PromoProductionFields}from'./PromoContextFields.js';import {startPromoTask}from'./canvasTasks.js';import {CLIP_COUNT_CHOICES,CLIP_ASPECT_RATIOS,CLIP_RESOLUTIONS,buildClipRunParams,parseClipRunResult}from'./videoClips.js';import {NativeDictationBar}from'../audio-input/NativeDictationBar.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;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const ASPECTS = ["16:9", "9:16", "1:1"];
 const MODES = [{
   id: "image",
@@ -49,7 +52,8 @@ function CanvasGeneratePanel({
   onSlides,
   onGenerated,
   onPromoDesigned,
-  onPromoQueued
+  onPromoQueued,
+  pickStill
 }) {
   const [mode, setMode] = useState("image");
   const [prompt, setPrompt] = useState("");
@@ -73,6 +77,22 @@ function CanvasGeneratePanel({
   const [clipRes, setClipRes] = useState("720");
   const [frameSec, setFrameSec] = useState(1);
   const [frameUrl, setFrameUrl] = useState(null);
+  const seedStill = (seedItem == null ? void 0 : seedItem.type) === "image" ? unwrapProxyUrl(seedItem.src) : null;
+  const [imageStills, setImageStills] = useState(seedStill ? [seedStill] : []);
+  const [stillRole, setStillRole] = useState("source");
+  const [startFrame, setStartFrame] = useState(seedStill);
+  const [endFrame, setEndFrame] = useState(null);
+  const [videoRefs, setVideoRefs] = useState([]);
+  const [picking, setPicking] = useState(null);
+  const [templatesOpen, setTemplatesOpen] = useState(false);
+  const [promoQuality, setPromoQuality] = useState(defaultPromoQuality(DEFAULT_PROMO_PRESET));
+  const [promoNarrator, setPromoNarrator] = useState("");
+  const [promoUseCases, setPromoUseCases] = useState("");
+  const [promoDesignModel, setPromoDesignModel] = useState("");
+  const pendingCommand = useRef(null);
+  useEffect(() => {
+    if (frameUrl) setStartFrame(frameUrl);
+  }, [frameUrl]);
   useEffect(() => {
     if (!(lookSeed == null ? void 0 : lookSeed.prompt)) return;
     setMode("video");
@@ -104,14 +124,16 @@ function CanvasGeneratePanel({
     let cancelled = false;
     const job = mode === "image" ? runAction("yantra-image-generation", "YANTRA_GEMINI_IMAGE_LIST_MODELS", {}) : mode === "audio" ? runAction("yantra-audio", "YANTRA_AUDIO_LIST_MODELS", {}) : runAction("yantra-video-generation", "YANTRA_VIDEO_GENERATION_LIST_MODELS", {});
     job.then((result) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       if (cancelled) return;
       let list = normalizeModels(result);
       if (mode === "audio") list = promptAudioModels(list);
       if (mode === "video" && list.length === 0) list = STATIC_VIDEO_MODELS;
       if (mode === "image" && list.length === 0) list = STATIC_IMAGE_MODELS;
       setModels(list);
-      setSelectedModel((_b = (_a = list[0]) == null ? void 0 : _a.id) != null ? _b : "");
+      const cmd = pendingCommand.current;
+      pendingCommand.current = null;
+      setSelectedModel(cmd ? modelForCommand(cmd, list, (_b = (_a = list[0]) == null ? void 0 : _a.id) != null ? _b : "") : (_d = (_c = list[0]) == null ? void 0 : _c.id) != null ? _d : "");
     }).catch(() => {
       if (cancelled) return;
       if (mode === "video") {
@@ -128,11 +150,59 @@ function CanvasGeneratePanel({
   }, [mode, runAction]);
   const modelInfo = models.find((m) => m.id === selectedModel);
   const videoCaps = generationCapabilities(modelInfo);
+  const refCap = videoReferenceCap(models, selectedModel);
+  const footageSrc = (seedItem == null ? void 0 : seedItem.type) === "video" ? unwrapProxyUrl(seedItem.src) : void 0;
+  const hasStill = mode === "image" ? imageStills.length > 0 : Boolean(startFrame || imageStills[0]);
+  const commandLine = parseCommandLine(prompt);
+  const commandSuggestions = (commandLine == null ? void 0 : commandLine.typing) && (mode === "image" || mode === "video") ? matchCommands(commandLine.token) : [];
+  useEffect(() => {
+    const attached = mode === "image" ? imageStills.length > 0 : mode === "video" && Boolean(startFrame);
+    if (!attached) return;
+    const alt = modelThatReadsImages(models, selectedModel);
+    if (alt) setSelectedModel(alt);
+  }, [mode, imageStills.length, startFrame, models, selectedModel]);
+  const switchMode = (id) => {
+    setMode(id);
+    setShowModels(false);
+    if (id === "image") {
+      setAspect("16:9");
+      setModels(STATIC_IMAGE_MODELS);
+      setSelectedModel(STATIC_IMAGE_MODELS[0].id);
+    } else if (id === "video") {
+      setAspect("16:9");
+      setModels(STATIC_VIDEO_MODELS);
+      setSelectedModel(STATIC_VIDEO_MODELS[0].id);
+    }
+  };
+  const applyCommand = (cmd) => {
+    setPrompt(`/${cmd.id} `);
+    const lane = laneForCommand(cmd, {
+      footage: Boolean(footageSrc)
+    });
+    if (lane !== mode) {
+      pendingCommand.current = cmd;
+      switchMode(lane);
+    } else {
+      setSelectedModel(modelForCommand(cmd, models, selectedModel));
+    }
+  };
+  const pickInto = (target) => pickStill ? (source) => {
+    setPicking(target);
+    pickStill(target, source).then((url) => {
+      if (!url) return;
+      const clean = unwrapProxyUrl(url);
+      if (target === "reference") setImageStills((p) => addReference(p, clean, MAX_REFERENCE_IMAGES));
+      else if (target === "startFrame") setStartFrame(clean);
+      else if (target === "endFrame") setEndFrame(clean);
+      else if (target === "videoReference") setVideoRefs((p) => addReference(p, clean, refCap));
+      else setPromoRefs((p) => addReference(p, clean, PROMO_MAX_REFERENCES));
+    }).catch((err) => setNotice(err instanceof Error ? err.message : "Could not add that image")).finally(() => setPicking(null));
+  } : void 0;
   const aspectChoices = mode === "video" ? videoCaps.aspects : [...ASPECTS];
   const durations = mode === "video" ? videoDurationOptions(modelInfo) : [];
   const noun = mode === "promo" ? "marketing video" : mode === "slides" ? "slides" : mode;
   const generate = () => {
-    var _a;
+    var _a, _b;
     if (mode === "slides") {
       onSlides();
       return;
@@ -162,53 +232,91 @@ function CanvasGeneratePanel({
       }).catch((err) => setNotice(friendlyMediaError(err, "video clips"))).finally(() => setBusy(false));
       return;
     }
-    const text = prompt.trim();
-    if (!text || busy) return;
+    const raw = prompt.trim();
+    if (!raw || busy) return;
+    const cmd = mode === "image" || mode === "video" ? findCommand(raw) : void 0;
+    let model = selectedModel || void 0;
+    if (cmd) {
+      const has = {
+        still: hasStill,
+        footage: Boolean(footageSrc)
+      };
+      const lane = laneForCommand(cmd, has);
+      if (lane !== mode) {
+        pendingCommand.current = cmd;
+        switchMode(lane);
+        setNotice(`Switched to ${lane} for ${cmd.label} \u2014 check the inputs and press Generate.`);
+        return;
+      }
+      const missing = missingFor(cmd, lane, has);
+      if (missing) {
+        setNotice(`${cmd.label} needs ${MISSING_LABEL[missing]}`);
+        return;
+      }
+      model = has.footage && lane === "video" ? (_b = (_a = models.find((m) => m.supportsVideoInput)) == null ? void 0 : _a.id) != null ? _b : VIDEO_INPUT_MODEL : modelForCommand(cmd, models, selectedModel);
+    }
+    const text = cmd ? commandPrompt(raw) : raw;
     setBusy(true);
     setNotice(null);
-    const referenceImageUrl = (seedItem == null ? void 0 : seedItem.type) === "image" || mode === "video" && (seedItem == null ? void 0 : seedItem.type) === "video" && !restyle ? void 0 : (seedItem == null ? void 0 : seedItem.type) === "image" ? unwrapProxyUrl(seedItem.src) : void 0;
-    const still = (seedItem == null ? void 0 : seedItem.type) === "image" ? unwrapProxyUrl(seedItem.src) : void 0;
-    const footage = restyle && (seedItem == null ? void 0 : seedItem.type) === "video" ? unwrapProxyUrl(seedItem.src) : void 0;
-    const job = mode === "image" ? runAction("yantra-image-generation", "YANTRA_GEMINI_IMAGE_GENERATE", __spreadValues({
+    const footage = mode === "video" && footageSrc && (restyle || cmd && cmd.needs !== "image") ? footageSrc : void 0;
+    const promoRequest = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
       prompt: text,
+      preset: promoPreset,
+      durationSeconds: promoDuration,
       aspectRatio: aspect
-    }, selectedModel ? {
-      model: selectedModel
-    } : {})).then((result) => generationImageUrl(result)) : mode === "audio" ? runAction("yantra-audio", "YANTRA_AUDIO_RUN_PROMPT", __spreadValues({
+    }, promoRefs.length ? {
+      referenceImageUrls: promoRefs
+    } : {}), footageSrc ? {
+      sourceVideoUrl: footageSrc
+    } : {}), promoLogoUrl ? {
+      logoUrl: promoLogoUrl
+    } : {}), promoContext), promoPlaybook ? {
+      stylePlaybook: promoPlaybook
+    } : {});
+    const job = mode === "image" ? (async () => {
+      const stills = await ensureFetchableMediaUrls(runAction, imageStills);
+      const call = imageLaneCall({
+        prompt: text,
+        aspectRatio: aspect,
+        model,
+        stills,
+        role: cmd ? "source" : stillRole
+      });
+      return generationImageUrl(await runAction("yantra-image-generation", call.action, call.params));
+    })() : mode === "audio" ? runAction("yantra-audio", "YANTRA_AUDIO_RUN_PROMPT", __spreadValues({
       prompt: text
-    }, selectedModel ? {
-      model: selectedModel
+    }, model ? {
+      model
     } : {})).then((result) => resultUrl(result, "YANTRA_AUDIO_RUN_PROMPT")) : mode === "promo" ? startPromoTask(runAction, {
       boardId: boardId || "global",
       brief: text,
-      request: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
-        prompt: text,
-        preset: promoPreset,
-        durationSeconds: promoDuration,
-        aspectRatio: aspect
-      }, promoRefs.length ? {
-        referenceImageUrls: promoRefs
-      } : still ? {
-        referenceImageUrls: [still]
-      } : {}), (seedItem == null ? void 0 : seedItem.type) === "video" ? {
-        sourceVideoUrl: unwrapProxyUrl(seedItem.src)
-      } : {}), promoLogoUrl ? {
-        logoUrl: promoLogoUrl
-      } : {}), promoContext), promoPlaybook ? {
-        stylePlaybook: promoPlaybook
+      request: __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, promoRequest), {
+        quality: promoQuality
+      }), promoNarrator ? {
+        narratorVoice: promoNarrator
+      } : {}), promoUseCases.trim() ? {
+        useCases: promoUseCases
       } : {})
     }).then(() => {
       onPromoQueued == null ? void 0 : onPromoQueued();
       setNotice("Production queued \u2014 track it under More \u2192 Tasks");
       return "";
-    }) : runAction("yantra-video-generation", "YANTRA_VIDEO_GENERATION_GENERATE", buildVideoGenerateParams({
-      prompt: text,
-      aspectRatio: aspect,
-      model: selectedModel || void 0,
-      durationSeconds: videoDuration || void 0,
-      referenceImageUrl: (_a = frameUrl != null ? frameUrl : still) != null ? _a : referenceImageUrl,
-      referenceVideoUrl: footage
-    })).then((result) => generationMediaUrl(result));
+    }) : (async () => {
+      const first = startFrame && !footage && videoCaps.canStartFrame ? await ensureFetchableMediaUrl(runAction, startFrame) : void 0;
+      const last = endFrame && videoCaps.canEndFrame ? await ensureFetchableMediaUrl(runAction, endFrame) : void 0;
+      const refs = await ensureFetchableMediaUrls(runAction, videoRefs.slice(0, refCap));
+      const result = await runAction("yantra-video-generation", "YANTRA_VIDEO_GENERATION_GENERATE", buildVideoGenerateParams({
+        prompt: text,
+        aspectRatio: aspect,
+        model,
+        durationSeconds: videoDuration || void 0,
+        referenceImageUrl: first,
+        referenceEndImageUrl: last,
+        styleReferenceUrls: refs,
+        referenceVideoUrl: footage
+      }));
+      return generationMediaUrl(result);
+    })();
     job.then((url) => {
       if (url) onGenerated(url, {
         prompt: text,
@@ -224,19 +332,7 @@ function CanvasGeneratePanel({
     /* @__PURE__ */ jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", contentContainerStyle: styles.body, children: [
       /* @__PURE__ */ jsx(View, { style: styles.tabs, children: MODES.map((tab) => {
         const on = mode === tab.id;
-        return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
-          setMode(tab.id);
-          setShowModels(false);
-          if (tab.id === "image") {
-            setAspect("16:9");
-            setModels(STATIC_IMAGE_MODELS);
-            setSelectedModel(STATIC_IMAGE_MODELS[0].id);
-          } else if (tab.id === "video") {
-            setAspect("16:9");
-            setModels(STATIC_VIDEO_MODELS);
-            setSelectedModel(STATIC_VIDEO_MODELS[0].id);
-          }
-        }, style: [styles.tab, on && styles.tabOn], children: [
+        return /* @__PURE__ */ jsxs(Pressable, { onPress: () => switchMode(tab.id), style: [styles.tab, on && styles.tabOn], children: [
           on ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tab.icon, size: 14, color: "#9a3412" }) : null,
           /* @__PURE__ */ jsx(Text, { style: [styles.tabLabel, on && styles.tabLabelOn], children: tab.label })
         ] }, tab.id);
@@ -247,9 +343,6 @@ function CanvasGeneratePanel({
           frameSec.toFixed(1),
           "s"
         ] }),
-        frameUrl ? /* @__PURE__ */ jsx(Image, { source: {
-          uri: frameUrl
-        }, style: styles.framePreview }) : null,
         /* @__PURE__ */ jsx(View, { style: styles.pills, children: [0.5, 1, 2, 3, 5].map((sec) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setFrameSec(sec), style: [styles.pill, frameSec === sec && styles.pillOn], children: /* @__PURE__ */ jsxs(Text, { style: styles.pillLabel, children: [
           sec,
           "s"
@@ -276,7 +369,30 @@ function CanvasGeneratePanel({
         }, style: styles.pill, children: [
           /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "clock-outline", size: 14, color: "#64748b" }),
           /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: videoDuration ? `${videoDuration}s` : "Auto" })
-        ] }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxs(Pressable, { onPress: () => setTemplatesOpen((v) => !v), style: [styles.pill, templatesOpen && styles.pillOn], accessibilityRole: "button", accessibilityLabel: "Browse prompt templates", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 14, color: "#64748b" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: "Templates" })
+        ] })
+      ] }) : null,
+      templatesOpen && (mode === "image" || mode === "video" || mode === "audio") ? /* @__PURE__ */ jsx(CanvasTemplatesPanel, { open: true, runAction, defaultLane: mode, onPick: (template) => {
+        if (template.kind !== mode) switchMode(template.kind);
+        const fit = template.kind === "video" && template.aspect ? nearestAspect(template.aspect, ["16:9", "9:16"]) : void 0;
+        if (fit) setAspect(fit);
+        setPrompt(template.prompt || template.description || template.title);
+        setTemplatesOpen(false);
+      } }) : null,
+      mode === "image" ? /* @__PURE__ */ jsxs(View, { style: styles.refBlock, children: [
+        /* @__PURE__ */ jsx(ReferenceStrip, { label: "Images", hint: "Attach a still to edit it, or to guide a new image", urls: imageStills, cap: MAX_REFERENCE_IMAGES, busy: picking === "reference", onPick: pickInto("reference"), onRemove: (url) => setImageStills((p) => p.filter((u) => u !== url)) }),
+        imageStills.length > 0 ? /* @__PURE__ */ jsx(StillRoleSwitch, { value: stillRole, onChange: setStillRole }) : null
+      ] }) : null,
+      mode === "video" && !(restyle && footageSrc) ? /* @__PURE__ */ jsxs(View, { style: styles.refBlock, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: "Reference" }),
+        /* @__PURE__ */ jsxs(View, { style: styles.slotRow, children: [
+          videoCaps.canStartFrame ? /* @__PURE__ */ jsx(FrameSlot, { label: "First frame", dot: "#10b981", url: startFrame, busy: picking === "startFrame", onPick: pickInto("startFrame"), onClear: () => setStartFrame(null) }) : null,
+          videoCaps.canEndFrame ? /* @__PURE__ */ jsx(FrameSlot, { label: "Last frame", dot: "#f43f5e", url: endFrame, busy: picking === "endFrame", onPick: pickInto("endFrame"), onClear: () => setEndFrame(null) }) : null
+        ] }),
+        /* @__PURE__ */ jsx(ReferenceStrip, { label: "Other references", hint: "Keep a look, character or product \u2014 without opening on it", urls: videoRefs.slice(0, refCap), cap: refCap, busy: picking === "videoReference", onPick: pickInto("videoReference"), onRemove: (url) => setVideoRefs((p) => p.filter((u) => u !== url)) })
       ] }) : null,
       showModels && models.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.menu, children: models.map((m) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
         setSelectedModel(m.id);
@@ -285,6 +401,7 @@ function CanvasGeneratePanel({
       mode === "promo" ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, contentContainerStyle: styles.pills, children: PROMO_PRESETS.map((p) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
         setPromoPreset(p.id);
         setPromoDuration(p.defaultDurationSeconds);
+        setPromoQuality(defaultPromoQuality(p.id));
       }, style: [styles.pill, promoPreset === p.id && styles.pillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: p.name }) }, p.id)) }) : null,
       mode === "promo" ? /* @__PURE__ */ jsxs(View, { style: styles.pills, children: [
         PROMO_DURATIONS.map((s) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setPromoDuration(s), style: [styles.pill, promoDuration === s && styles.pillOn], children: /* @__PURE__ */ jsxs(Text, { style: styles.pillLabel, children: [
@@ -295,6 +412,11 @@ function CanvasGeneratePanel({
       ] }) : null,
       mode === "promo" ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, contentContainerStyle: styles.pills, children: PROMO_PLAYBOOKS.map((p) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setPromoPlaybook(p.id), style: [styles.pill, promoPlaybook === p.id && styles.pillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: p.name }) }, p.id || "default")) }) : null,
       mode === "promo" ? /* @__PURE__ */ jsx(PromoContextFields, { value: promoContext, onChange: (patch) => setPromoContext((prev) => __spreadValues(__spreadValues({}, prev), patch)), logoUrl: promoLogoUrl, onPickLogo: (seedItem == null ? void 0 : seedItem.type) === "image" ? () => setPromoLogoUrl(unwrapProxyUrl(seedItem.src)) : void 0, onClearLogo: () => setPromoLogoUrl(null) }) : null,
+      mode === "promo" ? /* @__PURE__ */ jsx(ReferenceStrip, { label: "Reference images", hint: "Product shots or stills the promo should feature", urls: promoRefs, cap: PROMO_MAX_REFERENCES, busy: picking === "promoReference", onPick: pickInto("promoReference"), onRemove: (url) => setPromoRefs((p) => p.filter((u) => u !== url)) }) : null,
+      mode === "promo" ? /* @__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 === "clips" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(TextInput, { value: clipUrl, onChangeText: setClipUrl, placeholder: "Paste a video URL\u2026", placeholderTextColor: "#94a3b8", autoCapitalize: "none", style: styles.field }),
         /* @__PURE__ */ jsx(View, { style: styles.pills, children: CLIP_COUNT_CHOICES.map((n) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setClipCount(n), style: [styles.pill, clipCount === n && styles.pillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: n }) }, n)) }),
@@ -305,7 +427,16 @@ function CanvasGeneratePanel({
             "p"
           ] }) }, value))
         ] })
-      ] }) : mode === "slides" ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Opens the slides studio \u2014 same as web Generate \u2192 Slides." }) : /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, placeholder, placeholderTextColor: "#94a3b8", multiline: true, style: styles.prompt })
+      ] }) : mode === "slides" ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Opens the slides studio \u2014 same as web Generate \u2192 Slides." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, placeholder: mode === "image" || mode === "video" ? `${placeholder} Type / for effects` : placeholder, placeholderTextColor: "#94a3b8", multiline: true, style: styles.prompt }),
+        commandSuggestions.length > 0 ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, keyboardShouldPersistTaps: "handled", showsHorizontalScrollIndicator: false, style: styles.hScroll, contentContainerStyle: styles.pills, children: commandSuggestions.map((cmd) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => applyCommand(cmd), style: styles.pill, accessibilityRole: "button", accessibilityHint: cmd.blurb, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: cmd.icon, size: 14, color: "#9a3412" }),
+          /* @__PURE__ */ jsxs(Text, { style: styles.pillLabel, children: [
+            "/",
+            cmd.id
+          ] })
+        ] }, cmd.id)) }) : null
+      ] })
     ] }),
     notice ? /* @__PURE__ */ jsx(Text, { style: styles.notice, children: notice }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
@@ -315,13 +446,12 @@ function CanvasGeneratePanel({
         setDictating(false);
         setPrompt((prev) => (prev ? `${prev.trim()} ${text}` : text).trim());
       }, onCancel: () => setDictating(false), onFallback: () => setDictating(false) }) }) : /* @__PURE__ */ jsx(Pressable, { onPress: () => setDictating(true), style: styles.mic, accessibilityRole: "button", accessibilityLabel: "Dictate", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "microphone-outline", size: 20, color: "#64748b" }) }),
-      mode === "promo" && onPromoDesigned ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+      mode === "promo" && onPromoDesigned && !lookupPromoPreset(promoPreset).produceOnly ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
         if (!runAction || busy || !prompt.trim()) return;
         setBusy(true);
         setNotice(null);
-        const still = (seedItem == null ? void 0 : seedItem.type) === "image" ? unwrapProxyUrl(seedItem.src) : void 0;
-        const refs = promoRefs.length ? promoRefs : still ? [still] : [];
-        designPromoProject((action, params) => runAction(PROMO_CONNECTOR, action, params), __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+        const refs = promoRefs;
+        designPromoProject((action, params) => runAction(PROMO_CONNECTOR, action, params), __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
           prompt: prompt.trim(),
           preset: promoPreset,
           durationSeconds: promoDuration,
@@ -334,6 +464,8 @@ function CanvasGeneratePanel({
           logoUrl: promoLogoUrl
         } : {}), promoContext), promoPlaybook ? {
           stylePlaybook: promoPlaybook
+        } : {}), promoDesignModel ? {
+          model: promoDesignModel
         } : {})).then((designed) => onPromoDesigned(designed)).catch((err) => setNotice(friendlyMediaError(err, "promo design"))).finally(() => setBusy(false));
       }, disabled: busy || !prompt.trim(), style: [styles.designCta, (busy || !prompt.trim()) && styles.ctaOff], accessibilityRole: "button", accessibilityLabel: "Design editable cut", children: /* @__PURE__ */ jsx(Text, { style: styles.designCtaLabel, children: "Design cut" }) }) : null,
       /* @__PURE__ */ jsx(Pressable, { onPress: generate, disabled: busy || !canGo && mode !== "slides", style: [styles.cta, (busy || !canGo && mode !== "slides") && styles.ctaOff], accessibilityRole: "button", children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#fff7ed" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -408,11 +540,17 @@ const styles = StyleSheet.create({
   frameBox: {
     gap: 8
   },
-  framePreview: {
-    width: "100%",
-    height: 140,
-    borderRadius: 12,
-    backgroundColor: "#f1f5f9"
+  refBlock: {
+    gap: 8
+  },
+  slotRow: {
+    flexDirection: "row",
+    gap: 8
+  },
+  rowLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#334155"
   },
   menu: {
     borderWidth: 1,