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

package/lib/features/canvas/CanvasGeneratePanel.js

@@ -1,4 +1,4 @@
-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;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect}from'react';import {View,ScrollView,Text,TextInput,ActivityIndicator,StyleSheet}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';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Segmented,Pressable,pressedStyle,SPACE,RADIUS,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -55,6 +55,8 @@ function CanvasGeneratePanel({
   onPromoQueued,
   pickStill
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [mode, setMode] = useState("image");
   const [prompt, setPrompt] = useState("");
   const [aspect, setAspect] = useState("16:9");
@@ -208,7 +210,7 @@ function CanvasGeneratePanel({
       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;
     }
     if (mode === "clips") {
@@ -245,7 +247,7 @@ function CanvasGeneratePanel({
       if (lane !== mode) {
         pendingCommand.current = cmd;
         switchMode(lane);
-        setNotice(`Switched to ${lane} for ${cmd.label} \u2014 check the inputs and press Generate.`);
+        setNotice(`Switched to ${lane} for ${cmd.label}. Check the inputs and press Generate.`);
         return;
       }
       const missing = missingFor(cmd, lane, has);
@@ -299,7 +301,7 @@ function CanvasGeneratePanel({
       } : {})
     }).then(() => {
       onPromoQueued == null ? void 0 : onPromoQueued();
-      setNotice("Production queued \u2014 track it under More \u2192 Tasks");
+      setNotice("Production queued. Track it under More > Tasks");
       return "";
     }) : (async () => {
       const first = startFrame && !footage && videoCaps.canStartFrame ? await ensureFetchableMediaUrl(runAction, startFrame) : void 0;
@@ -330,49 +332,53 @@ function CanvasGeneratePanel({
   const canGo = mode === "slides" || mode === "clips" ? clipUrl.trim().length > 0 || mode === "slides" : prompt.trim().length > 0;
   return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
     /* @__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: () => 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);
-      }) }),
+      /* @__PURE__ */ jsx(Segmented, { options: MODES, value: mode, onChange: switchMode, style: styles.tabs }),
       mode === "video" && (seedItem == null ? void 0 : seedItem.type) === "video" && !restyle ? /* @__PURE__ */ jsxs(View, { style: styles.frameBox, children: [
         /* @__PURE__ */ jsxs(Text, { style: styles.hint, children: [
           "Continuation frame \xB7 ",
           frameSec.toFixed(1),
           "s"
         ] }),
-        /* @__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: [
+        /* @__PURE__ */ jsx(View, { style: styles.pills, children: [0.5, 1, 2, 3, 5].map((sec) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setFrameSec(sec), style: ({
+          pressed
+        }) => [styles.pill, frameSec === sec && styles.pillOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsxs(Text, { style: [styles.pillLabel, frameSec === sec && styles.pillLabelOn], children: [
           sec,
           "s"
         ] }) }, sec)) })
       ] }) : null,
       mode === "image" || mode === "video" || mode === "audio" ? /* @__PURE__ */ jsxs(View, { style: styles.pills, children: [
-        /* @__PURE__ */ jsxs(Pressable, { onPress: () => setShowModels((v) => !v), style: styles.pill, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 14, color: "#64748b" }),
+        /* @__PURE__ */ jsxs(Pressable, { onPress: () => setShowModels((v) => !v), style: ({
+          pressed
+        }) => [styles.pill, pressedStyle(pressed)], children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 14, color: theme.mutedForeground }),
           /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, numberOfLines: 1, children: (modelInfo == null ? void 0 : modelInfo.label) || selectedModel || "Model\u2026" }),
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 14, color: "#64748b" })
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 14, color: theme.mutedForeground })
         ] }),
         mode !== "audio" ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
           const i = aspectChoices.indexOf(aspect);
           setAspect(aspectChoices[(i < 0 ? 0 : i + 1) % aspectChoices.length]);
-        }, style: styles.pill, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "rectangle-outline", size: 14, color: "#64748b" }),
+        }, style: ({
+          pressed
+        }) => [styles.pill, pressedStyle(pressed)], children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "rectangle-outline", size: 14, color: theme.mutedForeground }),
           /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: aspect }),
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 14, color: "#64748b" })
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 14, color: theme.mutedForeground })
         ] }) : null,
         durations.length > 0 ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
           const opts = [0, ...durations];
           const i = opts.indexOf(videoDuration);
           setVideoDuration(opts[(i + 1) % opts.length]);
-        }, style: styles.pill, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "clock-outline", size: 14, color: "#64748b" }),
+        }, style: ({
+          pressed
+        }) => [styles.pill, pressedStyle(pressed)], children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "clock-outline", size: 14, color: theme.mutedForeground }),
           /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: videoDuration ? `${videoDuration}s` : "Auto" })
         ] }) : 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" })
+        /* @__PURE__ */ jsxs(Pressable, { onPress: () => setTemplatesOpen((v) => !v), style: ({
+          pressed
+        }) => [styles.pill, templatesOpen && styles.pillOn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Browse prompt templates", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 14, color: templatesOpen ? theme.background : theme.foreground }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, templatesOpen && styles.pillLabelOn], children: "Templates" })
         ] })
       ] }) : null,
       templatesOpen && (mode === "image" || mode === "video" || mode === "audio") ? /* @__PURE__ */ jsx(CanvasTemplatesPanel, { open: true, runAction, defaultLane: mode, onPick: (template) => {
@@ -392,25 +398,37 @@ function CanvasGeneratePanel({
           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)) })
+        /* @__PURE__ */ jsx(ReferenceStrip, { label: "Other references", hint: "Keep a look, character or product, 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: () => {
+      showModels && models.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.menu, children: models.map((m) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
         setSelectedModel(m.id);
         setShowModels(false);
-      }, style: styles.menuRow, children: /* @__PURE__ */ jsx(Text, { style: styles.menuLabel, children: m.label || m.id }) }, m.id)) }) : null,
+      }, style: ({
+        pressed
+      }) => [styles.menuRow, m.id === selectedModel && styles.menuRowOn, pressedStyle(pressed)], children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.menuLabel, numberOfLines: 1, children: m.label || m.id }),
+        m.id === selectedModel ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check", size: 18, color: theme.foreground }) : null
+      ] }, m.id)) }) : null,
       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: [
-          s,
-          "s"
-        ] }) }, s)),
-        PROMO_ASPECT_RATIOS.map((value) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setAspect(value), style: [styles.pill, aspect === value && styles.pillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: value }) }, value))
-      ] }) : 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,
+      }, style: ({
+        pressed
+      }) => [styles.pill, promoPreset === p.id && styles.pillOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, promoPreset === p.id && styles.pillLabelOn], children: p.name }) }, p.id)) }) : null,
+      mode === "promo" ? /* @__PURE__ */ jsx(View, { style: styles.pills, children: PROMO_DURATIONS.map((s) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setPromoDuration(s), style: ({
+        pressed
+      }) => [styles.pill, promoDuration === s && styles.pillOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsxs(Text, { style: [styles.pillLabel, promoDuration === s && styles.pillLabelOn], children: [
+        s,
+        "s"
+      ] }) }, s)) }) : null,
+      mode === "promo" ? /* @__PURE__ */ jsx(Segmented, { options: PROMO_ASPECT_RATIOS.map((value) => ({
+        id: value,
+        label: value
+      })), value: aspect, onChange: setAspect, style: styles.segmented }) : 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: ({
+        pressed
+      }) => [styles.pill, promoPlaybook === p.id && styles.pillOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, promoPlaybook === p.id && styles.pillLabelOn], 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 ? {
@@ -418,19 +436,24 @@ function CanvasGeneratePanel({
         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)) }),
-        /* @__PURE__ */ jsxs(View, { style: styles.pills, children: [
-          CLIP_ASPECT_RATIOS.map((value) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setClipAspect(value), style: [styles.pill, clipAspect === value && styles.pillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: value }) }, value)),
-          CLIP_RESOLUTIONS.map((value) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setClipRes(value), style: [styles.pill, clipRes === value && styles.pillOn], children: /* @__PURE__ */ jsxs(Text, { style: styles.pillLabel, children: [
-            value,
-            "p"
-          ] }) }, value))
-        ] })
-      ] }) : 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__ */ jsx(TextInput, { value: clipUrl, onChangeText: setClipUrl, placeholder: "Paste a video URL\u2026", placeholderTextColor: theme.mutedForeground, autoCapitalize: "none", style: styles.field }),
+        /* @__PURE__ */ jsx(View, { style: styles.pills, children: CLIP_COUNT_CHOICES.map((n) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setClipCount(n), style: ({
+          pressed
+        }) => [styles.pill, clipCount === n && styles.pillOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, clipCount === n && styles.pillLabelOn], children: n }) }, n)) }),
+        /* @__PURE__ */ jsx(Segmented, { options: CLIP_ASPECT_RATIOS.map((value) => ({
+          id: value,
+          label: value
+        })), value: clipAspect, onChange: setClipAspect, style: styles.segmented }),
+        /* @__PURE__ */ jsx(Segmented, { options: CLIP_RESOLUTIONS.map((value) => ({
+          id: value,
+          label: `${value}p`
+        })), value: clipRes, onChange: setClipRes, style: styles.segmented })
+      ] }) : mode === "slides" ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Opens the slides studio, the same as Generate, then Slides, on the web." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, placeholder: mode === "image" || mode === "video" ? `${placeholder} Type / for effects` : placeholder, placeholderTextColor: theme.mutedForeground, 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: ({
+          pressed
+        }) => [styles.pill, pressedStyle(pressed)], accessibilityRole: "button", accessibilityHint: cmd.blurb, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: cmd.icon, size: 14, color: theme.foreground }),
           /* @__PURE__ */ jsxs(Text, { style: styles.pillLabel, children: [
             "/",
             cmd.id
@@ -445,7 +468,9 @@ function CanvasGeneratePanel({
       }, children: /* @__PURE__ */ jsx(NativeDictationBar, { isDark: false, onInterim: () => void 0, onTranscriptionComplete: (text) => {
         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" }) }),
+      }, onCancel: () => setDictating(false), onFallback: () => setDictating(false) }) }) : /* @__PURE__ */ jsx(Pressable, { onPress: () => setDictating(true), style: ({
+        pressed
+      }) => [styles.mic, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Dictate", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "microphone-outline", size: 20, color: theme.foreground }) }),
       mode === "promo" && onPromoDesigned && !lookupPromoPreset(promoPreset).produceOnly ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
         if (!runAction || busy || !prompt.trim()) return;
         setBusy(true);
@@ -467,15 +492,19 @@ function CanvasGeneratePanel({
         } : {}), 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: [
+      }, disabled: busy || !prompt.trim(), style: ({
+        pressed
+      }) => [styles.designCta, (busy || !prompt.trim()) && styles.ctaOff, pressedStyle(pressed && !busy)], 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: ({
+        pressed
+      }) => [styles.cta, (busy || !canGo && mode !== "slides") && styles.ctaOff, pressedStyle(pressed && !busy)], accessibilityRole: "button", children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.primaryForeground }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: cta }),
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-right", size: 18, color: "#fff7ed" })
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-right", size: 18, color: theme.primaryForeground })
       ] }) })
     ] })
   ] });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1
   },
@@ -483,170 +512,153 @@ const styles = StyleSheet.create({
     flexGrow: 0
   },
   body: {
-    paddingHorizontal: 16,
-    paddingBottom: 12,
-    gap: 12
+    paddingHorizontal: SPACE.lg,
+    paddingBottom: SPACE.md,
+    gap: SPACE.lg
   },
   tabs: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6
-  },
-  tab: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 999
-  },
-  tabOn: {
-    backgroundColor: "#fde8d8"
-  },
-  tabLabel: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: "#64748b"
+    flexGrow: 0,
+    alignSelf: "flex-start",
+    maxWidth: "100%"
   },
-  tabLabelOn: {
-    color: "#9a3412"
+  segmented: {
+    flexGrow: 0,
+    alignSelf: "flex-start"
   },
   pills: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 8
+    gap: SPACE.sm - 2
   },
   pill: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 7,
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: "#e2e8f0",
-    backgroundColor: "#ffffff",
-    maxWidth: 180
+    gap: SPACE.sm - 2,
+    minHeight: 36,
+    paddingHorizontal: SPACE.md + 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card,
+    maxWidth: 200
   },
   pillOn: {
-    backgroundColor: "#fde8d8",
-    borderColor: "#fde8d8"
+    backgroundColor: theme.foreground
   },
-  pillLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: "#334155"
+  pillLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    flexShrink: 1,
+    color: theme.foreground
+  }),
+  pillLabelOn: {
+    color: theme.background
   },
   frameBox: {
-    gap: 8
+    gap: SPACE.sm
   },
   refBlock: {
-    gap: 8
+    gap: SPACE.md
   },
   slotRow: {
     flexDirection: "row",
-    gap: 8
-  },
-  rowLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: "#334155"
+    gap: SPACE.sm + 2
   },
+  rowLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
   menu: {
-    borderWidth: 1,
-    borderColor: "#e2e8f0",
-    borderRadius: 12,
-    backgroundColor: "#ffffff",
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.card,
+    padding: SPACE.xs,
     overflow: "hidden"
   },
   menuRow: {
-    paddingHorizontal: 12,
-    paddingVertical: 10
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm,
+    minHeight: HIT,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.md
   },
-  menuLabel: {
-    fontSize: 13,
-    color: "#0f172a"
+  menuRowOn: {
+    backgroundColor: theme.isDark ? theme.secondary : theme.surface
   },
+  menuLabel: __spreadProps(__spreadValues({}, TYPE.body), {
+    flex: 1,
+    color: theme.foreground
+  }),
   prompt: {
-    minHeight: 120,
+    minHeight: 128,
     flexGrow: 1,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: "#e2e8f0",
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    backgroundColor: "#ffffff",
-    color: "#0f172a",
+    borderRadius: RADIUS.xl,
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.md + 2,
+    paddingBottom: SPACE.md + 2,
+    backgroundColor: theme.card,
+    color: theme.foreground,
     fontSize: 15,
+    lineHeight: 21,
     textAlignVertical: "top"
   },
   field: {
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    backgroundColor: "#f8fafc",
-    color: "#0f172a",
-    fontSize: 14
-  },
-  hint: {
-    fontSize: 13,
-    color: "#64748b",
-    paddingVertical: 8
-  },
-  notice: {
-    paddingHorizontal: 16,
-    paddingBottom: 8,
-    fontSize: 12,
-    color: "#b91c1c"
+    minHeight: HIT + 4,
+    borderRadius: RADIUS.xl,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md,
+    backgroundColor: theme.card,
+    color: theme.foreground,
+    fontSize: 15
   },
+  hint: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    color: theme.mutedForeground,
+    paddingVertical: SPACE.sm
+  }),
+  notice: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    paddingHorizontal: SPACE.lg,
+    paddingBottom: SPACE.sm,
+    color: theme.destructiveText
+  }),
   designCta: {
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "#fdba74",
-    backgroundColor: "#fff7ed"
-  },
-  designCtaLabel: {
-    fontSize: 13,
-    fontWeight: "700",
-    color: "#9a3412"
+    minHeight: HIT + 4,
+    justifyContent: "center",
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
   },
+  designCtaLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 15,
+    color: theme.foreground
+  }),
   actions: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 12,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#e2e8f0"
+    gap: SPACE.sm + 2,
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.sm,
+    paddingBottom: SPACE.md
   },
   mic: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    borderWidth: 1,
-    borderColor: "#e2e8f0",
+    width: HIT + 4,
+    height: HIT + 4,
+    borderRadius: (HIT + 4) / 2,
+    backgroundColor: theme.card,
     alignItems: "center",
     justifyContent: "center"
   },
   cta: {
     flex: 1,
-    height: 44,
-    borderRadius: 12,
-    backgroundColor: "#c2410c",
+    height: HIT + 4,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.primary,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: 8
+    gap: SPACE.sm
   },
   ctaOff: {
-    opacity: 0.45
+    opacity: 0.4
   },
-  ctaLabel: {
+  ctaLabel: __spreadProps(__spreadValues({}, TYPE.label), {
     fontSize: 15,
-    fontWeight: "700",
-    color: "#fff7ed"
-  }
-});export{CanvasGeneratePanel};//# sourceMappingURL=CanvasGeneratePanel.js.map
+    color: theme.primaryForeground
+  })
+}));export{CanvasGeneratePanel};//# sourceMappingURL=CanvasGeneratePanel.js.map