npm - @adminide-stack/yantra-mobile - Versions diffs - 12.0.131 → 12.0.132 - Mend

@adminide-stack/yantra-mobile 12.0.131 → 12.0.132

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/lib/features/canvas/home/HeroComposer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useMemo,useState,useCallback}from'react';import {View,Text,Modal,TextInput,ScrollView,ActivityIndicator,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {Pressable,pressedStyle,Segmented,RADIUS,SPACE,TYPE}from'../canvasUi.js';import {HeroMonitor}from'./HeroMonitor.js';import {DirectorSheet,DirectorPill}from'../generator/DirectorSheet.js';import {EMPTY_DIRECTION,directedPrompt}from'../generator/direction.js';import {heroShots,heroAspectOf,nextIn,heroSettings,HERO_ASPECTS,HERO_RESOLUTIONS}from'./heroShots.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx}from'react/jsx-runtime';import {useMemo,useState,useCallback}from'react';import {View,Text,Modal,TextInput,ActivityIndicator,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {Pressable,pressedStyle,Segmented,RADIUS,SPACE,TYPE}from'../canvasUi.js';import {HeroMonitor}from'./HeroMonitor.js';import {DirectorSheet}from'../generator/DirectorSheet.js';import {EMPTY_DIRECTION,directedPrompt}from'../generator/direction.js';import {heroShots,heroAspectOf,nextIn,heroSettings,HERO_ASPECTS,HERO_RESOLUTIONS}from'./heroShots.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -32,8 +32,10 @@ function HeroComposer({
   playing,
   onStartWithPrompt,
   onPickReference,
-  onBrowseTemplates
+  onBrowseTemplates,
+  headerActions
 }) {
+  var _a;
   const theme = useCanvasTheme();
   const styles = makeStyles(theme);
   const shots = useMemo(() => heroShots(featuredLooks, showcase, PHONE_SHOTS), [featuredLooks, showcase]);
@@ -46,7 +48,7 @@ function HeroComposer({
   const [product, setProduct] = useState(null);
   const [attaching, setAttaching] = useState(false);
   const [direction, setDirection] = useState(EMPTY_DIRECTION);
-  const [directing, setDirecting] = useState(false);
+  const [directing, setDirecting] = useState(null);
   const index = shots.length ? shot % shots.length : 0;
   const ready = Boolean(draft.trim());
   const applyShot = useCallback((s) => {
@@ -72,38 +74,31 @@ function HeroComposer({
     onStartWithPrompt(sent, heroSettings(mode, aspect, resolution, product));
   };
   return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.title, accessibilityRole: "header", children: "Direct the shot" }),
-      onBrowseTemplates ? /* @__PURE__ */ jsxs(Pressable, { onPress: onBrowseTemplates, hitSlop: 8, style: ({
-        pressed
-      }) => [styles.templatesLink, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Start from a template", testID: "hero-browse-templates", children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.templatesLinkLabel, children: "Templates" }),
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-right", size: 14, color: theme.mutedForeground })
-      ] }) : null
-    ] }),
-    /* @__PURE__ */ jsx(HeroMonitor, { shots, index, onCut: setShot, paused: ready || focused, playing, still: mode === "image", aspect, resolution, slate: draft, onUseShot: applyShot }),
-    directing ? /* @__PURE__ */ jsx(Modal, { transparent: true, animationType: "slide", visible: true, onRequestClose: () => setDirecting(false), children: /* @__PURE__ */ jsx(View, { style: styles.sheetHost, children: /* @__PURE__ */ jsx(DirectorSheet, { value: direction, onChange: setDirection, onClose: () => setDirecting(false), prompt: draft }) }) }) : null,
+    headerActions ? /* @__PURE__ */ jsx(View, { style: styles.actions, children: headerActions }) : null,
+    /* @__PURE__ */ jsx(HeroMonitor, { shots, index, onCut: setShot, paused: ready || focused, playing, still: mode === "image", aspect, resolution, slate: draft }),
+    /* @__PURE__ */ jsx(Text, { style: styles.headline, accessibilityRole: "header", children: "Direct the shot." }),
+    /* @__PURE__ */ jsx(Text, { style: styles.lede, children: "Every choice you make shows up on the monitor before you spend a run on it." }),
+    onBrowseTemplates ? /* @__PURE__ */ jsxs(Pressable, { onPress: onBrowseTemplates, hitSlop: 8, style: ({
+      pressed
+    }) => [styles.templatesLink, pressedStyle(pressed)], accessibilityRole: "button", testID: "hero-browse-templates", children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-dashboard-outline", size: 16, color: theme.foreground }),
+      /* @__PURE__ */ jsx(Text, { style: styles.templatesLinkLabel, children: "Start from a template" }),
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-right", size: 15, color: theme.mutedForeground })
+    ] }) : null,
+    directing ? /* @__PURE__ */ jsx(Modal, { transparent: true, animationType: "slide", visible: true, onRequestClose: () => setDirecting(null), children: /* @__PURE__ */ jsx(View, { style: styles.sheetHost, children: /* @__PURE__ */ jsx(DirectorSheet, { initialTab: directing, value: direction, onChange: setDirection, onClose: () => setDirecting(null), prompt: draft }) }) }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.composer, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.promptWell, children: [
-        /* @__PURE__ */ jsx(TextInput, { value: draft, onChangeText: setDraft, onFocus: () => setFocused(true), onBlur: () => setFocused(false), placeholder: mode === "video" ? PLACEHOLDER : "A ceramic mug on a sunlit table, soft morning light", placeholderTextColor: theme.tint(0.32), multiline: true, style: styles.prompt, accessibilityLabel: "Describe the shot", testID: "hero-prompt" }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: submit, disabled: !ready, style: ({
+      /* @__PURE__ */ jsx(Segmented, { options: MODES, value: mode, onChange: setMode, style: styles.modes }),
+      /* @__PURE__ */ jsx(TextInput, { value: draft, onChangeText: setDraft, onFocus: () => setFocused(true), onBlur: () => setFocused(false), placeholder: ((_a = shots[index]) == null ? void 0 : _a.title) || (mode === "video" ? PLACEHOLDER : "A ceramic mug on a sunlit table"), placeholderTextColor: theme.tint(0.32), multiline: true, style: styles.prompt, accessibilityLabel: "Describe the shot", testID: "hero-prompt" }),
+      shots[index] ? (
+        // Web's "Tab: use this shot's prompt", as a tap on a phone.
+        /* @__PURE__ */ jsxs(Pressable, { onPress: () => applyShot(shots[index]), hitSlop: 6, style: ({
           pressed
-        }) => [styles.send, !ready && styles.sendIdle, pressedStyle(pressed && ready)], accessibilityRole: "button", accessibilityLabel: mode === "video" ? "Generate video" : "Generate image", accessibilityState: {
-          disabled: !ready
-        }, testID: "hero-generate", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-up", size: 20, color: theme.primaryForeground }) })
-      ] }),
-      /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.optionsScroll, contentContainerStyle: styles.options, keyboardShouldPersistTaps: "handled", children: [
-        /* @__PURE__ */ jsx(Segmented, { options: MODES, value: mode, onChange: setMode }),
-        /* @__PURE__ */ jsxs(Pressable, { onPress: () => setAspect(nextIn(HERO_ASPECTS, aspect)), style: ({
-          pressed
-        }) => [styles.pill, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Aspect ratio ${aspect}. Tap to change`, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "aspect-ratio", size: 15, color: theme.mutedForeground }),
-          /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: aspect })
-        ] }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setResolution(nextIn(HERO_RESOLUTIONS, resolution)), style: ({
-          pressed
-        }) => [styles.pill, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Resolution ${resolution}. Tap to change`, children: /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: resolution }) }),
-        mode === "video" ? /* @__PURE__ */ jsx(DirectorPill, { value: direction, onPress: () => setDirecting(true) }) : null,
+        }) => [styles.useShot, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Use this shot's prompt: ${shots[index].title}`, children: [
+          /* @__PURE__ */ jsx(View, { style: styles.useShotKey, children: /* @__PURE__ */ jsx(Text, { style: styles.useShotKeyText, children: "Tap" }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.useShotLabel, children: "Use this shot's prompt" })
+        ] })
+      ) : null,
+      /* @__PURE__ */ jsxs(View, { style: styles.chips, children: [
         product ? /* @__PURE__ */ jsxs(View, { style: styles.pill, children: [
           /* @__PURE__ */ jsx(Image, { source: {
             uri: product
@@ -115,7 +110,30 @@ function HeroComposer({
         }) => [styles.pill, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Add a product reference image", children: [
           attaching ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.mutedForeground }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 15, color: theme.mutedForeground }),
           /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: "Product" })
-        ] }) : null
+        ] }) : null,
+        mode === "video" ? [["Film setup", "movie-open-outline", "film"], ["Camera", "camera-iris", "camera"], ["Palette", "palette-outline", "look"], ["Lighting", "white-balance-sunny", "look"]].map(([label, icon, tab]) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setDirecting(tab), style: ({
+          pressed
+        }) => [styles.pill, styles.pillDashed, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: label, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 16, color: theme.mutedForeground }),
+          /* @__PURE__ */ jsx(Text, { style: styles.pillLabelSoft, children: label })
+        ] }, label)) : null
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setAspect(nextIn(HERO_ASPECTS, aspect)), hitSlop: 6, style: ({
+          pressed
+        }) => [styles.barOption, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Aspect ratio ${aspect}. Tap to change`, children: /* @__PURE__ */ jsx(Text, { style: styles.barLabel, children: aspect }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setResolution(nextIn(HERO_RESOLUTIONS, resolution)), hitSlop: 6, style: ({
+          pressed
+        }) => [styles.barOption, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Resolution ${resolution}. Tap to change`, children: /* @__PURE__ */ jsx(Text, { style: styles.barLabel, children: resolution }) }),
+        /* @__PURE__ */ jsx(View, { style: styles.spacer }),
+        /* @__PURE__ */ jsxs(Pressable, { onPress: submit, disabled: !ready, style: ({
+          pressed
+        }) => [styles.generate, ready ? styles.generateReady : null, pressedStyle(pressed && ready)], accessibilityRole: "button", accessibilityLabel: mode === "video" ? "Generate video" : "Generate image", accessibilityState: {
+          disabled: !ready
+        }, testID: "hero-generate", children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.generateLabel, ready && styles.generateLabelReady], children: "Generate" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-right", size: 16, color: ready ? theme.primaryForeground : theme.mutedForeground })
+        ] })
       ] })
     ] })
   ] });
@@ -128,71 +146,100 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   sheetHost: {
     flex: 1
   },
-  titleRow: {
+  actions: {
     flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: SPACE.md
+    justifyContent: "flex-end",
+    gap: SPACE.sm,
+    marginBottom: -4
   },
-  title: __spreadProps(__spreadValues({}, TYPE.heading), {
+  headline: {
+    fontSize: 36,
+    lineHeight: 40,
+    fontWeight: "800",
+    letterSpacing: -1,
     color: theme.foreground,
-    flexShrink: 1
+    marginTop: SPACE.sm
+  },
+  lede: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: theme.mutedForeground,
+    marginTop: -4
   }),
   templatesLink: {
     flexDirection: "row",
     alignItems: "center",
-    gap: SPACE.xs,
+    gap: SPACE.xs + 2,
+    alignSelf: "flex-start",
     minHeight: 32
   },
   templatesLinkLabel: __spreadProps(__spreadValues({}, TYPE.label), {
-    color: theme.mutedForeground
+    fontSize: 14,
+    color: theme.foreground
   }),
+  // A raised card, as the web composer: white on the page, hairline edge, soft shadow.
   composer: {
-    gap: SPACE.sm,
-    padding: SPACE.sm,
+    gap: SPACE.md,
+    padding: SPACE.md,
     borderRadius: RADIUS.xl,
-    backgroundColor: theme.card
+    backgroundColor: theme.surface,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0 : 0.06,
+    shadowRadius: 14,
+    shadowOffset: {
+      width: 0,
+      height: 6
+    },
+    elevation: theme.isDark ? 0 : 2
   },
-  promptWell: {
-    flexDirection: "row",
-    alignItems: "flex-end",
-    gap: SPACE.sm,
-    paddingLeft: SPACE.md,
-    paddingRight: SPACE.xs + 2,
-    paddingVertical: SPACE.xs + 2,
-    borderRadius: RADIUS.lg,
-    backgroundColor: theme.isDark ? theme.secondary : theme.surface
+  modes: {
+    alignSelf: "flex-start"
   },
   prompt: __spreadProps(__spreadValues({}, TYPE.body), {
-    flex: 1,
-    minHeight: 64,
-    maxHeight: 160,
-    paddingTop: SPACE.sm,
-    paddingBottom: SPACE.sm,
+    fontSize: 16,
+    minHeight: 96,
+    maxHeight: 180,
+    paddingHorizontal: SPACE.md,
+    paddingTop: SPACE.md,
+    paddingBottom: SPACE.md,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.card,
     color: theme.foreground,
     textAlignVertical: "top"
   }),
-  send: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+  chips: {
+    flexDirection: "row",
+    flexWrap: "wrap",
     alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.primary
-  },
-  // Stays lime so the main action is always findable; dimmed until there is a prompt.
-  sendIdle: {
-    opacity: 0.4
+    gap: SPACE.sm
   },
-  optionsScroll: {
-    flexGrow: 0
+  pillDashed: {
+    borderStyle: "dashed"
   },
-  options: {
+  pillLabelSoft: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.mutedForeground
+  }),
+  useShot: {
     flexDirection: "row",
     alignItems: "center",
     gap: SPACE.sm,
-    paddingHorizontal: 2
+    alignSelf: "flex-start",
+    marginTop: -4
+  },
+  useShotKey: {
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: 2,
+    borderRadius: RADIUS.sm,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.borderStrong
   },
+  useShotKeyText: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.mutedForeground
+  }),
+  useShotLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    color: theme.mutedForeground
+  }),
   pill: {
     flexDirection: "row",
     alignItems: "center",
@@ -200,7 +247,9 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
     minHeight: 36,
     paddingHorizontal: SPACE.md,
     borderRadius: RADIUS.pill,
-    backgroundColor: theme.isDark ? theme.secondary : theme.surface
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.borderStrong,
+    backgroundColor: theme.surface
   },
   refThumb: {
     width: 20,
@@ -208,7 +257,47 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
     borderRadius: 5
   },
   pillLabel: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontVariant: ["tabular-nums"],
     color: theme.foreground
-  })
+  }),
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.md,
+    paddingTop: SPACE.md,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: theme.border
+  },
+  barOption: {
+    minHeight: 36,
+    justifyContent: "center",
+    paddingHorizontal: SPACE.xs
+  },
+  barLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 14,
+    fontVariant: ["tabular-nums"],
+    color: theme.mutedForeground
+  }),
+  spacer: {
+    flex: 1
+  },
+  generate: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm,
+    minHeight: 44,
+    paddingHorizontal: SPACE.lg + 2,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.card
+  },
+  // Lime once there is a prompt: the one main action, as web turns it on.
+  generateReady: {
+    backgroundColor: theme.primary
+  },
+  generateLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 15,
+    color: theme.mutedForeground
+  }),
+  generateLabelReady: {
+    color: theme.primaryForeground
+  }
 }));export{HeroComposer};//# sourceMappingURL=HeroComposer.js.map

package/lib/features/canvas/home/HeroComposer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeroComposer.js","sources":["../../../../src/features/canvas/home/HeroComposer.tsx"],"sourcesContent":["/*\n \"Direct the shot\" - the home hero, native twin of canvas-surface\n * `CanvasHome.tsx` (hero + composer). The monitor previews what the composer\n * will make; Generate opens a fresh canvas with the generator seeded from it.\n \n Monitor looping shots (HeroMonitor), \"Use this shot\" copies a prompt\n * Composer image / video, the prompt, a product reference, aspect and\n * resolution pills, Generate\n \n Film / camera / palette / lighting ride the \"Direct\" pill (generator/DirectorSheet)\n * and are applied to the prompt on Generate, as web CanvasHome does. The\n * character picker and model chip are not here yet.\n /\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { ActivityIndicator, Modal, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { Image } from 'expo-image';\nimport type { StudioLook } from '../studioLooks';\nimport type { ShowcaseClip } from '../seedanceShowcase';\nimport { useCanvasTheme, themedStyles, type CanvasPalette } from '../canvasTheme';\nimport { Pressable, RADIUS, SPACE, Segmented, TYPE, pressedStyle } from '../canvasUi';\nimport { HeroMonitor } from './HeroMonitor';\nimport { DirectorPill, DirectorSheet } from '../generator/DirectorSheet';\nimport { EMPTY_DIRECTION, directedPrompt, type Direction } from '../generator/direction';\nimport {\n HERO_ASPECTS,\n HERO_RESOLUTIONS,\n heroAspectOf,\n heroSettings,\n heroShots,\n nextIn,\n type HeroAspect,\n type HeroMode,\n type HeroResolution,\n type HeroSettings,\n type HeroShot,\n} from './heroShots';\n\nconst MODES = [\n { id: 'image' as const, label: 'Image' },\n { id: 'video' as const, label: 'Video' },\n];\nconst PLACEHOLDER = 'A slow push-in on a ceramic mug on a sunlit table, steam curling, shallow focus';\n/* The monitor's four thumbs on a phone; it cycles only what it shows. /\nconst PHONE_SHOTS = 4;\n\nexport function HeroComposer({\n featuredLooks,\n showcase,\n playing,\n onStartWithPrompt,\n onPickReference,\n onBrowseTemplates,\n}: {\n featuredLooks: readonly StudioLook[];\n showcase: readonly ShowcaseClip[];\n /* The home playback governor: true while the hero is the region on screen. /\n playing: boolean;\n onStartWithPrompt: (prompt: string, settings: HeroSettings) => void;\n /* Picks an image from the device and answers its uploaded URL (null when cancelled). /\n onPickReference?: () => Promise<string \| null>;\n onBrowseTemplates?: () => void;\n}) {\n const theme = useCanvasTheme();\n const styles = makeStyles(theme);\n const shots = useMemo(() => heroShots(featuredLooks, showcase, PHONE_SHOTS), [featuredLooks, showcase]);\n const [shot, setShot] = useState(0);\n const [mode, setMode] = useState<HeroMode>('video');\n const [draft, setDraft] = useState('');\n const [focused, setFocused] = useState(false);\n const [aspect, setAspect] = useState<HeroAspect>('16:9');\n const [resolution, setResolution] = useState<HeroResolution>('720p');\n const [product, setProduct] = useState<string \| null>(null);\n const [attaching, setAttaching] = useState(false);\n const [direction, setDirection] = useState<Direction>(EMPTY_DIRECTION);\n const [directing, setDirecting] = useState(false);\n const index = shots.length ? shot % shots.length : 0;\n const ready = Boolean(draft.trim());\n\n const applyShot = useCallback((s: HeroShot) => {\n setDraft(s.prompt);\n setMode('video');\n const fit = heroAspectOf(s.aspect);\n if (fit) setAspect(fit);\n }, []);\n\n const attach = async () => {\n if (!onPickReference \|\| attaching) return;\n setAttaching(true);\n try {\n const url = await onPickReference();\n if (url) setProduct(url);\n } finally {\n setAttaching(false);\n }\n };\n\n const submit = () => {\n const text = draft.trim();\n if (!text) return;\n // Web CanvasHome: applyCinematic(draft, composeCameraPhrase(camera), cine). Video only.\n const sent = mode === 'video' ? directedPrompt(text, direction) : text;\n onStartWithPrompt(sent, heroSettings(mode, aspect, resolution, product));\n };\n\n return (\n <View style={styles.root}>\n <View style={styles.titleRow}>\n <Text style={styles.title} accessibilityRole=\"header\">\n Direct the shot\n </Text>\n {onBrowseTemplates ? (\n <Pressable\n onPress={onBrowseTemplates}\n hitSlop={8}\n style={({ pressed }) => [styles.templatesLink, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel=\"Start from a template\"\n testID=\"hero-browse-templates\"\n >\n <Text style={styles.templatesLinkLabel}>Templates</Text>\n <MaterialCommunityIcons name=\"arrow-right\" size={14} color={theme.mutedForeground} />\n </Pressable>\n ) : null}\n </View>\n\n <HeroMonitor\n shots={shots}\n index={index}\n onCut={setShot}\n paused={ready \|\| focused}\n playing={playing}\n still={mode === 'image'}\n aspect={aspect}\n resolution={resolution}\n slate={draft}\n onUseShot={applyShot}\n />\n\n {directing ? (\n <Modal transparent animationType=\"slide\" visible onRequestClose={() => setDirecting(false)}>\n <View style={styles.sheetHost}>\n <DirectorSheet\n value={direction}\n onChange={setDirection}\n onClose={() => setDirecting(false)}\n prompt={draft}\n />\n </View>\n </Modal>\n ) : null}\n\n <View style={styles.composer}>\n {/ The prompt carries its own send, like the home prompt bar. /}\n <View style={styles.promptWell}>\n <TextInput\n value={draft}\n onChangeText={setDraft}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n placeholder={\n mode === 'video' ? PLACEHOLDER : 'A ceramic mug on a sunlit table, soft morning light'\n }\n placeholderTextColor={theme.tint(0.32)}\n multiline\n style={styles.prompt}\n accessibilityLabel=\"Describe the shot\"\n testID=\"hero-prompt\"\n />\n <Pressable\n onPress={submit}\n disabled={!ready}\n style={({ pressed }) => [\n styles.send,\n !ready && styles.sendIdle,\n pressedStyle(pressed && ready),\n ]}\n accessibilityRole=\"button\"\n accessibilityLabel={mode === 'video' ? 'Generate video' : 'Generate image'}\n accessibilityState={{ disabled: !ready }}\n testID=\"hero-generate\"\n >\n <MaterialCommunityIcons name=\"arrow-up\" size={20} color={theme.primaryForeground} />\n </Pressable>\n </View>\n\n {/ Every setting in one row: what it makes, its frame, and how it is shot. */}\n <ScrollView\n horizontal\n showsHorizontalScrollIndicator={false}\n style={styles.optionsScroll}\n contentContainerStyle={styles.options}\n keyboardShouldPersistTaps=\"handled\"\n >\n <Segmented options={MODES} value={mode} onChange={setMode} />\n <Pressable\n onPress={() => setAspect(nextIn(HERO_ASPECTS, aspect))}\n style={({ pressed }) => [styles.pill, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel={`Aspect ratio ${aspect}. Tap to change`}\n >\n <MaterialCommunityIcons name=\"aspect-ratio\" size={15} color={theme.mutedForeground} />\n <Text style={styles.pillLabel}>{aspect}</Text>\n </Pressable>\n <Pressable\n onPress={() => setResolution(nextIn(HERO_RESOLUTIONS, resolution))}\n style={({ pressed }) => [styles.pill, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel={`Resolution ${resolution}. Tap to change`}\n >\n <Text style={styles.pillLabel}>{resolution}</Text>\n </Pressable>\n {mode === 'video' ? <DirectorPill value={direction} onPress={() => setDirecting(true)} /> : null}\n {product ? (\n <View style={styles.pill}>\n <Image source={{ uri: product }} style={styles.refThumb} contentFit=\"cover\" />\n <Text style={styles.pillLabel}>Product</Text>\n <Pressable\n onPress={() => setProduct(null)}\n hitSlop={10}\n accessibilityRole=\"button\"\n accessibilityLabel=\"Remove product reference\"\n >\n <MaterialCommunityIcons name=\"close\" size={14} color={theme.mutedForeground} />\n </Pressable>\n </View>\n ) : onPickReference ? (\n <Pressable\n onPress={() => void attach()}\n disabled={attaching}\n style={({ pressed }) => [styles.pill, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel=\"Add a product reference image\"\n >\n {attaching ? (\n <ActivityIndicator size=\"small\" color={theme.mutedForeground} />\n ) : (\n <MaterialCommunityIcons name=\"image-plus\" size={15} color={theme.mutedForeground} />\n )}\n <Text style={styles.pillLabel}>Product</Text>\n </Pressable>\n ) : null}\n </ScrollView>\n </View>\n </View>\n );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n StyleSheet.create({\n root: { gap: SPACE.md, marginBottom: SPACE.xl },\n sheetHost: { flex: 1 },\n titleRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: SPACE.md },\n title: { ...TYPE.heading, color: theme.foreground, flexShrink: 1 },\n templatesLink: { flexDirection: 'row', alignItems: 'center', gap: SPACE.xs, minHeight: 32 },\n templatesLinkLabel: { ...TYPE.label, color: theme.mutedForeground },\n composer: {\n gap: SPACE.sm,\n padding: SPACE.sm,\n borderRadius: RADIUS.xl,\n backgroundColor: theme.card,\n },\n promptWell: {\n flexDirection: 'row',\n alignItems: 'flex-end',\n gap: SPACE.sm,\n paddingLeft: SPACE.md,\n paddingRight: SPACE.xs + 2,\n paddingVertical: SPACE.xs + 2,\n borderRadius: RADIUS.lg,\n backgroundColor: theme.isDark ? theme.secondary : theme.surface,\n },\n prompt: {\n ...TYPE.body,\n flex: 1,\n minHeight: 64,\n maxHeight: 160,\n paddingTop: SPACE.sm,\n paddingBottom: SPACE.sm,\n color: theme.foreground,\n textAlignVertical: 'top',\n },\n send: {\n width: 40,\n height: 40,\n borderRadius: 20,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.primary,\n },\n // Stays lime so the main action is always findable; dimmed until there is a prompt.\n sendIdle: { opacity: 0.4 },\n optionsScroll: { flexGrow: 0 },\n options: { flexDirection: 'row', alignItems: 'center', gap: SPACE.sm, paddingHorizontal: 2 },\n pill: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: SPACE.xs + 2,\n minHeight: 36,\n paddingHorizontal: SPACE.md,\n borderRadius: RADIUS.pill,\n backgroundColor: theme.isDark ? theme.secondary : theme.surface,\n },\n refThumb: { width: 20, height: 20, borderRadius: 5 },\n pillLabel: { ...TYPE.label, fontVariant: ['tabular-nums'], color: theme.foreground },\n }),\n);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"HeroComposer.js","sources":["../../../../src/features/canvas/home/HeroComposer.tsx"],"sourcesContent":["/*\n \"Direct the shot\" - the home hero, native twin of canvas-surface\n * `CanvasHome.tsx` (hero + composer). The monitor previews what the composer\n * will make; Generate opens a fresh canvas with the generator seeded from it.\n \n Monitor looping shots (HeroMonitor), \"Use this shot\" copies a prompt\n * Composer image / video, the prompt, a product reference, aspect and\n * resolution pills, Generate\n \n Film / camera / palette / lighting ride the \"Direct\" pill (generator/DirectorSheet)\n * and are applied to the prompt on Generate, as web CanvasHome does. The\n * character picker and model chip are not here yet.\n /\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { ActivityIndicator, Modal, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { Image } from 'expo-image';\nimport type { StudioLook } from '../studioLooks';\nimport type { ShowcaseClip } from '../seedanceShowcase';\nimport { useCanvasTheme, themedStyles, type CanvasPalette } from '../canvasTheme';\nimport { Pressable, RADIUS, SPACE, Segmented, TYPE, pressedStyle } from '../canvasUi';\nimport { HeroMonitor } from './HeroMonitor';\nimport { DirectorSheet, type DirectorTab } from '../generator/DirectorSheet';\nimport { EMPTY_DIRECTION, directedPrompt, type Direction } from '../generator/direction';\nimport {\n HERO_ASPECTS,\n HERO_RESOLUTIONS,\n heroAspectOf,\n heroSettings,\n heroShots,\n nextIn,\n type HeroAspect,\n type HeroMode,\n type HeroResolution,\n type HeroSettings,\n type HeroShot,\n} from './heroShots';\n\nconst MODES = [\n { id: 'image' as const, label: 'Image' },\n { id: 'video' as const, label: 'Video' },\n];\nconst PLACEHOLDER = 'A slow push-in on a ceramic mug on a sunlit table, steam curling, shallow focus';\n/* The monitor's four thumbs on a phone; it cycles only what it shows. /\nconst PHONE_SHOTS = 4;\n\nexport function HeroComposer({\n featuredLooks,\n showcase,\n playing,\n onStartWithPrompt,\n onPickReference,\n onBrowseTemplates,\n headerActions,\n}: {\n featuredLooks: readonly StudioLook[];\n showcase: readonly ShowcaseClip[];\n /* The home playback governor: true while the hero is the region on screen. /\n playing: boolean;\n onStartWithPrompt: (prompt: string, settings: HeroSettings) => void;\n /* Picks an image from the device and answers its uploaded URL (null when cancelled). /\n onPickReference?: () => Promise<string \| null>;\n onBrowseTemplates?: () => void;\n /* Round buttons beside the headline (AI Chat, theme); the hero is the top of home. /\n headerActions?: React.ReactNode;\n}) {\n const theme = useCanvasTheme();\n const styles = makeStyles(theme);\n const shots = useMemo(() => heroShots(featuredLooks, showcase, PHONE_SHOTS), [featuredLooks, showcase]);\n const [shot, setShot] = useState(0);\n const [mode, setMode] = useState<HeroMode>('video');\n const [draft, setDraft] = useState('');\n const [focused, setFocused] = useState(false);\n const [aspect, setAspect] = useState<HeroAspect>('16:9');\n const [resolution, setResolution] = useState<HeroResolution>('720p');\n const [product, setProduct] = useState<string \| null>(null);\n const [attaching, setAttaching] = useState(false);\n const [direction, setDirection] = useState<Direction>(EMPTY_DIRECTION);\n const [directing, setDirecting] = useState<DirectorTab \| null>(null);\n const index = shots.length ? shot % shots.length : 0;\n const ready = Boolean(draft.trim());\n\n const applyShot = useCallback((s: HeroShot) => {\n setDraft(s.prompt);\n setMode('video');\n const fit = heroAspectOf(s.aspect);\n if (fit) setAspect(fit);\n }, []);\n\n const attach = async () => {\n if (!onPickReference \|\| attaching) return;\n setAttaching(true);\n try {\n const url = await onPickReference();\n if (url) setProduct(url);\n } finally {\n setAttaching(false);\n }\n };\n\n const submit = () => {\n const text = draft.trim();\n if (!text) return;\n // Web CanvasHome: applyCinematic(draft, composeCameraPhrase(camera), cine). Video only.\n const sent = mode === 'video' ? directedPrompt(text, direction) : text;\n onStartWithPrompt(sent, heroSettings(mode, aspect, resolution, product));\n };\n\n return (\n <View style={styles.root}>\n {headerActions ? <View style={styles.actions}>{headerActions}</View> : null}\n\n {/ Web CanvasHome on a phone: the monitor first, then the headline and the composer. */}\n <HeroMonitor\n shots={shots}\n index={index}\n onCut={setShot}\n paused={ready \|\| focused}\n playing={playing}\n still={mode === 'image'}\n aspect={aspect}\n resolution={resolution}\n slate={draft}\n />\n\n <Text style={styles.headline} accessibilityRole=\"header\">\n Direct the shot.\n </Text>\n <Text style={styles.lede}>Every choice you make shows up on the monitor before you spend a run on it.</Text>\n {onBrowseTemplates ? (\n <Pressable\n onPress={onBrowseTemplates}\n hitSlop={8}\n style={({ pressed }) => [styles.templatesLink, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n testID=\"hero-browse-templates\"\n >\n <MaterialCommunityIcons name=\"view-dashboard-outline\" size={16} color={theme.foreground} />\n <Text style={styles.templatesLinkLabel}>Start from a template</Text>\n <MaterialCommunityIcons name=\"arrow-right\" size={15} color={theme.mutedForeground} />\n </Pressable>\n ) : null}\n\n {directing ? (\n <Modal transparent animationType=\"slide\" visible onRequestClose={() => setDirecting(null)}>\n <View style={styles.sheetHost}>\n <DirectorSheet\n initialTab={directing}\n value={direction}\n onChange={setDirection}\n onClose={() => setDirecting(null)}\n prompt={draft}\n />\n </View>\n </Modal>\n ) : null}\n\n <View style={styles.composer}>\n <Segmented options={MODES} value={mode} onChange={setMode} style={styles.modes} />\n <TextInput\n value={draft}\n onChangeText={setDraft}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n placeholder={\n shots[index]?.title \|\| (mode === 'video' ? PLACEHOLDER : 'A ceramic mug on a sunlit table')\n }\n placeholderTextColor={theme.tint(0.32)}\n multiline\n style={styles.prompt}\n accessibilityLabel=\"Describe the shot\"\n testID=\"hero-prompt\"\n />\n {shots[index] ? (\n // Web's \"Tab: use this shot's prompt\", as a tap on a phone.\n <Pressable\n onPress={() => applyShot(shots[index])}\n hitSlop={6}\n style={({ pressed }) => [styles.useShot, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel={`Use this shot's prompt: ${shots[index].title}`}\n >\n <View style={styles.useShotKey}>\n <Text style={styles.useShotKeyText}>Tap</Text>\n </View>\n <Text style={styles.useShotLabel}>Use this shot's prompt</Text>\n </Pressable>\n ) : null}\n <View style={styles.chips}>\n {product ? (\n <View style={styles.pill}>\n <Image source={{ uri: product }} style={styles.refThumb} contentFit=\"cover\" />\n <Text style={styles.pillLabel}>Product</Text>\n <Pressable\n onPress={() => setProduct(null)}\n hitSlop={10}\n accessibilityRole=\"button\"\n accessibilityLabel=\"Remove product reference\"\n >\n <MaterialCommunityIcons name=\"close\" size={14} color={theme.mutedForeground} />\n </Pressable>\n </View>\n ) : onPickReference ? (\n <Pressable\n onPress={() => void attach()}\n disabled={attaching}\n style={({ pressed }) => [styles.pill, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel=\"Add a product reference image\"\n >\n {attaching ? (\n <ActivityIndicator size=\"small\" color={theme.mutedForeground} />\n ) : (\n <MaterialCommunityIcons name=\"image-plus\" size={15} color={theme.mutedForeground} />\n )}\n <Text style={styles.pillLabel}>Product</Text>\n </Pressable>\n ) : null}\n {mode === 'video'\n ? (\n [\n ['Film setup', 'movie-open-outline', 'film'],\n ['Camera', 'camera-iris', 'camera'],\n ['Palette', 'palette-outline', 'look'],\n ['Lighting', 'white-balance-sunny', 'look'],\n ] as const\n ).map(([label, icon, tab]) => (\n <Pressable\n key={label}\n onPress={() => setDirecting(tab)}\n style={({ pressed }) => [styles.pill, styles.pillDashed, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel={label}\n >\n <MaterialCommunityIcons name={icon} size={16} color={theme.mutedForeground} />\n <Text style={styles.pillLabelSoft}>{label}</Text>\n </Pressable>\n ))\n : null}\n </View>\n <View style={styles.bar}>\n <Pressable\n onPress={() => setAspect(nextIn(HERO_ASPECTS, aspect))}\n hitSlop={6}\n style={({ pressed }) => [styles.barOption, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel={`Aspect ratio ${aspect}. Tap to change`}\n >\n <Text style={styles.barLabel}>{aspect}</Text>\n </Pressable>\n <Pressable\n onPress={() => setResolution(nextIn(HERO_RESOLUTIONS, resolution))}\n hitSlop={6}\n style={({ pressed }) => [styles.barOption, pressedStyle(pressed)]}\n accessibilityRole=\"button\"\n accessibilityLabel={`Resolution ${resolution}. Tap to change`}\n >\n <Text style={styles.barLabel}>{resolution}</Text>\n </Pressable>\n <View style={styles.spacer} />\n <Pressable\n onPress={submit}\n disabled={!ready}\n style={({ pressed }) => [\n styles.generate,\n ready ? styles.generateReady : null,\n pressedStyle(pressed && ready),\n ]}\n accessibilityRole=\"button\"\n accessibilityLabel={mode === 'video' ? 'Generate video' : 'Generate image'}\n accessibilityState={{ disabled: !ready }}\n testID=\"hero-generate\"\n >\n <Text style={[styles.generateLabel, ready && styles.generateLabelReady]}>Generate</Text>\n <MaterialCommunityIcons\n name=\"arrow-right\"\n size={16}\n color={ready ? theme.primaryForeground : theme.mutedForeground}\n />\n </Pressable>\n </View>\n </View>\n </View>\n );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n StyleSheet.create({\n root: { gap: SPACE.md, marginBottom: SPACE.xl },\n sheetHost: { flex: 1 },\n actions: { flexDirection: 'row', justifyContent: 'flex-end', gap: SPACE.sm, marginBottom: -SPACE.xs },\n headline: {\n fontSize: 36,\n lineHeight: 40,\n fontWeight: '800',\n letterSpacing: -1,\n color: theme.foreground,\n marginTop: SPACE.sm,\n },\n lede: { ...TYPE.body, color: theme.mutedForeground, marginTop: -SPACE.xs },\n templatesLink: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: SPACE.xs + 2,\n alignSelf: 'flex-start',\n minHeight: 32,\n },\n templatesLinkLabel: { ...TYPE.label, fontSize: 14, color: theme.foreground },\n // A raised card, as the web composer: white on the page, hairline edge, soft shadow.\n composer: {\n gap: SPACE.md,\n padding: SPACE.md,\n borderRadius: RADIUS.xl,\n backgroundColor: theme.surface,\n borderWidth: StyleSheet.hairlineWidth,\n borderColor: theme.border,\n shadowColor: '#000',\n shadowOpacity: theme.isDark ? 0 : 0.06,\n shadowRadius: 14,\n shadowOffset: { width: 0, height: 6 },\n elevation: theme.isDark ? 0 : 2,\n },\n modes: { alignSelf: 'flex-start' },\n prompt: {\n ...TYPE.body,\n fontSize: 16,\n minHeight: 96,\n maxHeight: 180,\n paddingHorizontal: SPACE.md,\n paddingTop: SPACE.md,\n paddingBottom: SPACE.md,\n borderRadius: RADIUS.lg,\n backgroundColor: theme.card,\n color: theme.foreground,\n textAlignVertical: 'top',\n },\n chips: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: SPACE.sm },\n pillDashed: { borderStyle: 'dashed' },\n pillLabelSoft: { ...TYPE.label, color: theme.mutedForeground },\n useShot: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: SPACE.sm,\n alignSelf: 'flex-start',\n marginTop: -SPACE.xs,\n },\n useShotKey: {\n paddingHorizontal: SPACE.sm,\n paddingVertical: 2,\n borderRadius: RADIUS.sm,\n borderWidth: StyleSheet.hairlineWidth,\n borderColor: theme.borderStrong,\n },\n useShotKeyText: { ...TYPE.caption, color: theme.mutedForeground },\n useShotLabel: { ...TYPE.caption, fontWeight: '400', color: theme.mutedForeground },\n pill: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: SPACE.xs + 2,\n minHeight: 36,\n paddingHorizontal: SPACE.md,\n borderRadius: RADIUS.pill,\n borderWidth: StyleSheet.hairlineWidth,\n borderColor: theme.borderStrong,\n backgroundColor: theme.surface,\n },\n refThumb: { width: 20, height: 20, borderRadius: 5 },\n pillLabel: { ...TYPE.label, color: theme.foreground },\n bar: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: SPACE.md,\n paddingTop: SPACE.md,\n borderTopWidth: StyleSheet.hairlineWidth,\n borderTopColor: theme.border,\n },\n barOption: { minHeight: 36, justifyContent: 'center', paddingHorizontal: SPACE.xs },\n barLabel: { ...TYPE.label, fontSize: 14, fontVariant: ['tabular-nums'], color: theme.mutedForeground },\n spacer: { flex: 1 },\n generate: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: SPACE.sm,\n minHeight: 44,\n paddingHorizontal: SPACE.lg + 2,\n borderRadius: RADIUS.md,\n backgroundColor: theme.card,\n },\n // Lime once there is a prompt: the one main action, as web turns it on.\n generateReady: { backgroundColor: theme.primary },\n generateLabel: { ...TYPE.label, fontSize: 15, color: theme.mutedForeground },\n generateLabelReady: { color: theme.primaryForeground },\n }),\n);\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/home/HeroMonitor.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect,useCallback}from'react';import {View,Text,StyleSheet,Linking}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {Skeleton,RADIUS,Pressable,pressedStyle,SPACE,TYPE}from'../canvasUi.js';import {LoopingVideo}from'./LoopingVideo.js';import {HERO_CUT_MS,cropInset,heroTimecode}from'./heroShots.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect,useCallback}from'react';import {View,Text,StyleSheet,Linking}from'react-native';import {Image}from'expo-image';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {Skeleton,RADIUS,Pressable,SPACE,TYPE}from'../canvasUi.js';import {LoopingVideo}from'./LoopingVideo.js';import {HERO_CUT_MS,cropInset,heroTimecode}from'./heroShots.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -27,8 +27,7 @@ function HeroMonitor({
   still,
   aspect,
   resolution,
-  slate,
-  onUseShot
+  slate
 }) {
   const theme = useCanvasTheme();
   const styles = makeStyles(theme);
@@ -99,28 +98,29 @@ function HeroMonitor({
         /* @__PURE__ */ jsx(Text, { style: styles.mono, children: resolution })
       ] }),
       /* @__PURE__ */ jsx(View, { style: styles.slate, pointerEvents: "none", children: /* @__PURE__ */ jsx(Text, { style: styles.slateText, numberOfLines: 2, children: slate.trim() || shot.title }) }),
-      /* @__PURE__ */ jsxs(Pressable, { onPress: () => onUseShot(shot), style: ({
-        pressed
-      }) => [styles.useShot, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Use this shot's prompt: ${shot.title}`, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-copy", size: 13, color: "#fafafa" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.useShotLabel, children: "Use shot" })
-      ] })
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.corner, styles.cornerTL] }),
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.corner, styles.cornerTR] }),
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.corner, styles.cornerBL] }),
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.corner, styles.cornerBR] }),
+      /* @__PURE__ */ jsx(View, { style: styles.lens, pointerEvents: "none", children: /* @__PURE__ */ jsx(Text, { style: styles.lensText, children: "Auto lens" }) })
     ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.dots, children: shots.slice(0, PHONE_THUMBS).map((s, i) => {
+    /* @__PURE__ */ jsx(View, { style: styles.thumbs, children: shots.slice(0, PHONE_THUMBS).map((s, i) => {
       const on = i === index;
-      return /* @__PURE__ */ jsx(Pressable, { onPress: () => onCut(i), hitSlop: 8, style: [styles.dotHit], accessibilityRole: "button", accessibilityLabel: s.title, accessibilityState: {
+      return /* @__PURE__ */ jsx(Pressable, { onPress: () => onCut(i), style: [styles.thumb, on && styles.thumbOn], accessibilityRole: "button", accessibilityLabel: s.title, accessibilityState: {
         selected: on
-      }, children: /* @__PURE__ */ jsx(View, { style: [styles.pager, on && styles.pagerOn] }) }, s.id);
+      }, children: s.poster ? /* @__PURE__ */ jsx(Image, { source: {
+        uri: s.poster
+      }, style: [StyleSheet.absoluteFill, !on && styles.thumbDim], contentFit: "cover" }) : null }, s.id);
     }) }),
-    shot.credit ? (
-      // The clip's licence asks for credit: one quiet line, only for those clips.
-      /* @__PURE__ */ jsx(Pressable, { onPress: openCredit, hitSlop: 6, accessibilityRole: "link", accessibilityLabel: `${shot.title} by ${shot.credit.author}, ${shot.credit.license}. Open the original post`, children: /* @__PURE__ */ jsx(Text, { style: styles.creditText, numberOfLines: 1, children: `${shot.credit.author} \xB7 ${shot.credit.license}` }) })
-    ) : null
+    /* @__PURE__ */ jsxs(View, { children: [
+      shot.credit ? /* @__PURE__ */ jsx(Pressable, { onPress: openCredit, hitSlop: 6, accessibilityRole: "link", accessibilityLabel: `${shot.title} by ${shot.credit.author}, ${shot.credit.license}. Open the original post`, children: /* @__PURE__ */ jsx(Text, { style: [styles.caption, styles.captionLink], numberOfLines: 1, children: `${shot.title} \xB7 ${shot.credit.author} \xB7 ${shot.credit.license}` }) }) : /* @__PURE__ */ jsx(Text, { style: styles.caption, numberOfLines: 1, children: `Studio look \xB7 ${shot.title}` }),
+      /* @__PURE__ */ jsx(Text, { style: styles.caption, children: "Cuts every 7s, pauses while you type" })
+    ] })
   ] });
 }
 const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
-    gap: SPACE.xs + 2
+    gap: SPACE.sm + 2
   },
   loadingFrame: {
     width: "100%",
@@ -143,7 +143,7 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   topBar: {
     position: "absolute",
     top: SPACE.sm,
-    left: SPACE.sm,
+    alignSelf: "center",
     flexDirection: "row",
     alignItems: "center",
     gap: SPACE.sm,
@@ -182,44 +182,73 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   slateText: __spreadProps(__spreadValues({}, TYPE.caption), {
     color: "#fafafa"
   }),
-  dots: {
+  thumbs: {
     flexDirection: "row",
-    justifyContent: "center",
-    gap: SPACE.xs
+    gap: SPACE.sm
   },
-  dotHit: {
-    paddingVertical: SPACE.xs,
-    paddingHorizontal: 2
+  thumb: {
+    flex: 1,
+    aspectRatio: 16 / 10,
+    borderRadius: RADIUS.md,
+    overflow: "hidden",
+    backgroundColor: theme.card,
+    borderWidth: 2,
+    borderColor: "transparent"
   },
-  pager: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    backgroundColor: theme.borderStrong
+  thumbOn: {
+    borderColor: theme.foreground
   },
-  pagerOn: {
-    width: 18,
-    backgroundColor: theme.foreground
+  thumbDim: {
+    opacity: 0.7
   },
-  creditText: __spreadProps(__spreadValues({}, TYPE.caption), {
-    textAlign: "center",
-    color: theme.mutedForeground,
-    textDecorationLine: "underline"
+  caption: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    lineHeight: 18,
+    color: theme.mutedForeground
   }),
-  useShot: {
+  captionLink: {
+    textDecorationLine: "underline"
+  },
+  corner: {
+    position: "absolute",
+    width: 18,
+    height: 18,
+    borderColor: "rgba(255,255,255,0.75)"
+  },
+  cornerTL: {
+    top: SPACE.md,
+    left: SPACE.md,
+    borderTopWidth: 1.5,
+    borderLeftWidth: 1.5
+  },
+  cornerTR: {
+    top: SPACE.md,
+    right: SPACE.md,
+    borderTopWidth: 1.5,
+    borderRightWidth: 1.5
+  },
+  cornerBL: {
+    bottom: SPACE.md,
+    left: SPACE.md,
+    borderBottomWidth: 1.5,
+    borderLeftWidth: 1.5
+  },
+  cornerBR: {
+    bottom: SPACE.md,
+    right: SPACE.md,
+    borderBottomWidth: 1.5,
+    borderRightWidth: 1.5
+  },
+  lens: {
     position: "absolute",
-    top: SPACE.sm,
     right: SPACE.sm,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.xs,
-    minHeight: 30,
-    paddingHorizontal: SPACE.sm + 2,
-    borderRadius: RADIUS.pill,
+    bottom: SPACE.sm,
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: SPACE.xs,
+    borderRadius: RADIUS.sm,
     backgroundColor: "rgba(0,0,0,0.5)"
   },
-  useShotLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
-    fontWeight: "600",
+  lensText: __spreadProps(__spreadValues({}, TYPE.caption), {
     color: "#fafafa"
   })
 }));export{HeroMonitor};//# sourceMappingURL=HeroMonitor.js.map