@adminide-stack/yantra-mobile 12.0.129-alpha.0 → 12.0.129

package/lib/features/canvas/SetStudioExperience.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useCallback}from'react';import {View,Text,ScrollView,TextInput,FlatList,Image,ActivityIndicator,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useSafeAreaInsets}from'react-native-safe-area-context';import {friendlyMediaError,resultUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl,deriveAgentEndpoint}from'./videoEditor/remoteMediaClient.js';import {generateWorld3D,generateObject3D,renderSetStill}from'./video3d.js';import {MOVES,frameCount,cameraPath}from'./set/cameraPath.js';import {newSet,MESH_TARGET_HEIGHT_M,newObjectId,vec3}from'./set/setProject.js';import {SetViewportWebView}from'./set/SetViewportWebView.js';import {KIT_ENTRIES}from'./set/supplyLibrary.js';import {tidySet,updateObjects,removeObjects,placeObjects,uniqueName}from'./set/agent/setOps.js';import {runSetTurn}from'./set/agent/setTurn.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Pressable,pressedStyle,SPACE,RADIUS,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useCallback}from'react';import {View,Text,ScrollView,TextInput,Image,FlatList,ActivityIndicator,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useSafeAreaInsets}from'react-native-safe-area-context';import {friendlyMediaError,resultUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl,deriveAgentEndpoint}from'./videoEditor/remoteMediaClient.js';import {generateWorld3D,generateObject3D,renderSetStill}from'./video3d.js';import {runTrackedGeneration}from'./generationTasks.js';import {MOVES,frameCount,cameraPath}from'./set/cameraPath.js';import {newSet,lightingOf,focalLengthFromFov,MESH_TARGET_HEIGHT_M,fovFromFocalLength,SET_ASPECTS,newObjectId,vec3}from'./set/setProject.js';import {viewportWorld,BUILD_SUGGESTIONS,WORLD_PRESETS,BACKDROP_COLORS,LENSES,withAxis,patchWorld,patchLighting,animateRenderParams}from'./set/setPresets.js';import {NumberField,SliderRow,SwatchRow,ToggleRow}from'./editorControls.js';import {SetViewportWebView}from'./set/SetViewportWebView.js';import {KIT_ENTRIES}from'./set/supplyLibrary.js';import {tidySet,updateObjects,removeObjects,placeObjects,uniqueName}from'./set/agent/setOps.js';import {runSetTurn}from'./set/agent/setTurn.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {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;
@@ -69,6 +69,8 @@ function SetStudioExperience({
   const [busy, setBusy] = useState(null);
   const [error, setError] = useState(null);
   const [lastPreview, setLastPreview] = useState(null);
+  const [lastRender, setLastRender] = useState(null);
+  const [motion, setMotion] = useState("");
   const frameWaiters = useRef([]);
   const viewportApi = useRef(null);
   const commit = useCallback((next) => {
@@ -124,13 +126,38 @@ function SetStudioExperience({
     commit(removeObjects(projectRef.current, [selected.id]).project);
     setSelectedId(null);
   };
+  const setAxis = (field, axis, value) => {
+    if (!selected || selected.locked) return;
+    const next = withAxis(selected[field], axis, value);
+    if (field === "position") editSelected({
+      id: selected.id,
+      position: __spreadProps(__spreadValues({}, next), {
+        y: Math.max(0, next.y)
+      })
+    });
+    else if (field === "rotation") {
+      const cur = projectRef.current;
+      commit(__spreadProps(__spreadValues({}, cur), {
+        objects: cur.objects.map((o) => o.id === selected.id ? __spreadProps(__spreadValues({}, o), {
+          rotation: next
+        }) : o)
+      }));
+    } else if (next.x > 0 && next.y > 0 && next.z > 0) editSelected({
+      id: selected.id,
+      scaleXyz: next
+    });
+  };
+  const setWorldPatch = (patch) => commit(patchWorld(projectRef.current, patch));
+  const setLightPatch = (patch) => commit(patchLighting(projectRef.current, patch));
+  const lighting = lightingOf(project);
+  const focal = focalLengthFromFov(project.camera.fov);
   const agentStills = useMemo(() => stills.map((s) => ({
     id: s.id,
     src: s.src,
     label: s.label
   })), [stills]);
-  const describeSet = async () => {
-    const text = brief.trim();
+  const describeSet = async (override) => {
+    const text = (override != null ? override : brief).trim();
     if (!text) return;
     if (!token || !indexUrl) return setError("Describe the set needs a signed-in session. Reopen the canvas and try again.");
     setBusy("Reading the brief\u2026");
@@ -220,23 +247,25 @@ function SetStudioExperience({
     }
     return uploadMedia(dataUrl);
   };
-  const runWorld = async () => {
+  const runWorld = async (override) => {
     if (!runAction) return setError("3D needs a live connector.");
+    const prompt = (override != null ? override : worldPrompt).trim();
+    if (!prompt) return;
     setBusy("Generating world\u2026");
     setError(null);
     try {
       const world = await generateWorld3D(runAction, {
-        prompt: worldPrompt.trim()
+        prompt
       });
       commit(__spreadProps(__spreadValues({}, projectRef.current), {
         world: __spreadProps(__spreadValues({}, projectRef.current.world), {
           imageUrl: world.imageUrl,
-          prompt: worldPrompt.trim(),
+          prompt,
           model: world.model
         })
       }));
       setLastPreview(world.imageUrl);
-      onPlace("image", world.imageUrl, `World \xB7 ${worldPrompt.slice(0, 24)}`);
+      onPlace("image", world.imageUrl, `World \xB7 ${prompt.slice(0, 24)}`);
       setTab("view");
     } catch (err) {
       setError(friendlyMediaError(err, "3D world"));
@@ -309,6 +338,7 @@ function SetStudioExperience({
         aspect: project.aspect
       });
       setLastPreview(url);
+      setLastRender(url);
       onPlace("image", url, `Set render \xB7 ${look.slice(0, 24)}`);
     } catch (err) {
       setError(friendlyMediaError(err, "set render"));
@@ -316,6 +346,34 @@ function SetStudioExperience({
       setBusy(null);
     }
   };
+  const runAnimate = async () => {
+    if (!runAction) return setError("Animate needs a live connector.");
+    if (!lastRender) return;
+    setBusy("Animating the render\u2026");
+    setError(null);
+    try {
+      const url = await runTrackedGeneration({
+        run: runAction,
+        connector: "yantra-video-generation",
+        action: "YANTRA_VIDEO_GENERATION_GENERATE",
+        params: animateRenderParams({
+          stillUrl: unwrapProxyUrl(lastRender),
+          motion,
+          aspect: project.aspect
+        }),
+        mode: "video",
+        prompt: motion || `Animate ${project.title}`,
+        boardId: null,
+        title: `Animated \xB7 ${project.title}`
+      });
+      setLastPreview(url);
+      onPlace("video", url, `Animated \xB7 ${project.title}`);
+    } catch (err) {
+      setError(friendlyMediaError(err, "animation"));
+    } finally {
+      setBusy(null);
+    }
+  };
   const runMove = async () => {
     var _a2;
     if (!runAction) return setError("Moves need a live connector.");
@@ -363,7 +421,7 @@ function SetStudioExperience({
         pressed
       }) => [styles.headBtn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "undo", size: 22, color: past.length ? theme.edInk : theme.edInk3 }) })
     ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.viewport, children: /* @__PURE__ */ jsx(SetViewportWebView, { worldUrl, propUrl: project.objects.length ? void 0 : propUrl, camera: project.camera, objects: project.objects, lighting: project.lighting, onFrame, onLoadError: (what) => setError(what === "world" ? "The world backdrop would not load. Generate it again." : "The 3D object would not load. Generate it again."), webRef: viewportApi }) }),
+    /* @__PURE__ */ jsx(View, { style: styles.viewport, children: /* @__PURE__ */ jsx(SetViewportWebView, { worldUrl, propUrl: project.objects.length ? void 0 : propUrl, camera: project.camera, objects: project.objects, lighting: project.lighting, world: viewportWorld(project.world), onFrame, onLoadError: (what) => setError(what === "world" ? "The world backdrop would not load. Generate it again." : "The 3D object would not load. Generate it again."), webRef: viewportApi }) }),
     /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.tabs, children: [["set", "Set"], ["view", "View"], ["world", "World"], ["object", "Object"], ["render", "Render"], ["move", "Move"]].map(([id, label]) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setTab(id), style: ({
       pressed
     }) => [styles.tab, pressedStyle(pressed)], children: [
@@ -376,6 +434,12 @@ function SetStudioExperience({
         /* @__PURE__ */ jsx(Pressable, { onPress: () => void describeSet(), style: ({
           pressed
         }) => [styles.cta, (!brief.trim() || Boolean(busy)) && styles.ctaOff, pressedStyle(pressed)], disabled: !brief.trim() || Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: project.objects.length ? "Ask the set agent" : "Describe the set" }) }),
+        /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.suggestRow, keyboardShouldPersistTaps: "handled", children: BUILD_SUGGESTIONS.map((s) => /* @__PURE__ */ jsx(Pressable, { disabled: Boolean(busy), onPress: () => {
+          setBrief(s.text);
+          void describeSet(s.text);
+        }, accessibilityHint: s.text, style: ({
+          pressed
+        }) => [styles.chip, Boolean(busy) && styles.ctaOff, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: s.label }) }, s.label)) }),
         steps.length ? /* @__PURE__ */ jsx(View, { style: styles.steps, children: steps.map((step, i) => /* @__PURE__ */ jsxs(Text, { style: styles.step, numberOfLines: 1, children: [
           step.label,
           step.detail ? ` \xB7 ${step.detail}` : ""
@@ -421,6 +485,10 @@ function SetStudioExperience({
           }), "Smaller"]].map(([icon, onPress, label]) => /* @__PURE__ */ jsx(Pressable, { onPress, style: ({
             pressed
           }) => [styles.iconBtn, pressedStyle(pressed)], accessibilityLabel: label, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 20, color: theme.edInk }) }, label)) }),
+          [["position", "Position (m)"], ["rotation", "Rotation (deg)"], ["scale", "Scale"]].map(([field, label]) => /* @__PURE__ */ jsxs(View, { style: styles.vecRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.vecLabel, children: label }),
+            /* @__PURE__ */ jsx(View, { style: styles.vecFields, children: ["x", "y", "z"].map((axis) => /* @__PURE__ */ jsx(NumberField, { label: axis.toUpperCase(), value: selected[field][axis], disabled: selected.locked, onChange: (v) => setAxis(field, axis, v) }, `${selected.id}-${field}-${axis}`)) })
+          ] }, field)),
           /* @__PURE__ */ jsxs(View, { style: styles.moveRow, children: [
             /* @__PURE__ */ jsx(Pressable, { onPress: () => editSelected({
               id: selected.id,
@@ -457,10 +525,50 @@ function SetStudioExperience({
       ] }) : null,
       tab === "view" ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Drag to orbit. Use World / Object / Render / Move for the shot." }) : null,
       tab === "world" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(TextInput, { value: worldPrompt, onChangeText: setWorldPrompt, style: styles.input, multiline: true, placeholderTextColor: theme.edInk3 }),
+        /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "A 360 environment wrapped around the set. The camera turns inside it; it cannot move into it." }),
+        worldUrl ? /* @__PURE__ */ jsxs(View, { style: styles.worldCard, children: [
+          /* @__PURE__ */ jsx(Image, { source: {
+            uri: worldUrl
+          }, style: styles.worldThumb }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => setWorldPatch({
+            imageUrl: void 0,
+            prompt: void 0,
+            model: void 0
+          }), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Back to the plain backdrop" }) })
+        ] }) : null,
+        /* @__PURE__ */ jsx(TextInput, { value: worldPrompt, onChangeText: setWorldPrompt, style: styles.input, multiline: true, placeholder: "A rain-slicked Tokyo alley at night", placeholderTextColor: theme.edInk3 }),
         /* @__PURE__ */ jsx(Pressable, { onPress: () => void runWorld(), style: ({
           pressed
-        }) => [styles.cta, Boolean(busy) && styles.ctaOff, pressedStyle(pressed)], disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Generate world" }) })
+        }) => [styles.cta, (Boolean(busy) || !worldPrompt.trim()) && styles.ctaOff, pressedStyle(pressed)], disabled: Boolean(busy) || !worldPrompt.trim(), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: worldUrl ? "Replace world" : "Generate world" }) }),
+        /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: WORLD_PRESETS.map((preset) => /* @__PURE__ */ jsx(Pressable, { disabled: Boolean(busy), onPress: () => {
+          setWorldPrompt(preset.prompt);
+          void runWorld(preset.prompt);
+        }, style: ({
+          pressed
+        }) => [styles.chip, Boolean(busy) && styles.ctaOff, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: preset.label }) }, preset.label)) }),
+        worldUrl ? /* @__PURE__ */ jsx(SliderRow, { label: "Turn the world", value: project.world.rotationDeg, min: 0, max: 360, format: (v) => `${Math.round(v)}\xB0`, onChange: (rotationDeg) => setWorldPatch({
+          rotationDeg
+        }) }) : /* @__PURE__ */ jsx(SwatchRow, { label: "Backdrop", colors: BACKDROP_COLORS, value: project.world.background, onChange: (background) => setWorldPatch({
+          background
+        }) }),
+        /* @__PURE__ */ jsx(ToggleRow, { label: "Ground plane and grid", value: project.world.showGround, onChange: (showGround) => setWorldPatch({
+          showGround
+        }) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Key light" }),
+        /* @__PURE__ */ jsx(SliderRow, { label: "Direction", value: lighting.keyAzimuthDeg, min: 0, max: 360, format: (v) => `${Math.round(v)}\xB0`, onChange: (keyAzimuthDeg) => setLightPatch({
+          keyAzimuthDeg
+        }) }),
+        /* @__PURE__ */ jsx(SliderRow, { label: "Height", value: lighting.keyElevationDeg, min: 5, max: 88, format: (v) => `${Math.round(v)}\xB0`, onChange: (keyElevationDeg) => setLightPatch({
+          keyElevationDeg
+        }) }),
+        /* @__PURE__ */ jsx(SliderRow, { label: "Strength", value: lighting.keyIntensity, min: 0, max: 6, step: 0.1, onChange: (keyIntensity) => setLightPatch({
+          keyIntensity
+        }) }),
+        /* @__PURE__ */ jsx(SliderRow, { label: "Fill", value: lighting.ambientIntensity, min: 0, max: 2, step: 0.05, onChange: (ambientIntensity) => setLightPatch({
+          ambientIntensity
+        }) })
       ] }) : null,
       tab === "object" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(FlatList, { horizontal: true, data: stills, keyExtractor: (item) => item.id, renderItem: ({
@@ -476,10 +584,48 @@ function SetStudioExperience({
         }) => [styles.cta, Boolean(busy) && styles.ctaOff, pressedStyle(pressed)], disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Generate object" }) })
       ] }) : null,
       tab === "render" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Lens" }),
+        /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: LENSES.map((mm) => /* @__PURE__ */ jsx(Pressable, { onPress: () => commit(__spreadProps(__spreadValues({}, projectRef.current), {
+          camera: __spreadProps(__spreadValues({}, projectRef.current.camera), {
+            fov: fovFromFocalLength(mm)
+          })
+        })), style: ({
+          pressed
+        }) => [styles.chip, focal === mm && styles.chipOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, focal === mm && styles.chipLabelOn], children: [
+          mm,
+          "mm"
+        ] }) }, mm)) }),
+        /* @__PURE__ */ jsxs(Text, { style: styles.hint, children: [
+          "Currently ",
+          focal,
+          "mm equivalent."
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Frame" }),
+        /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: SET_ASPECTS.map((aspect) => /* @__PURE__ */ jsx(Pressable, { onPress: () => commit(__spreadProps(__spreadValues({}, projectRef.current), {
+          aspect
+        })), style: ({
+          pressed
+        }) => [styles.chip, project.aspect === aspect && styles.chipOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, project.aspect === aspect && styles.chipLabelOn], children: aspect }) }, aspect)) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Render the shot" }),
         /* @__PURE__ */ jsx(TextInput, { value: look, onChangeText: setLook, style: styles.input, multiline: true, placeholderTextColor: theme.edInk3 }),
         /* @__PURE__ */ jsx(Pressable, { onPress: () => void runRender(), style: ({
           pressed
-        }) => [styles.cta, Boolean(busy) && styles.ctaOff, pressedStyle(pressed)], disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Render still" }) })
+        }) => [styles.cta, Boolean(busy) && styles.ctaOff, pressedStyle(pressed)], disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Render still" }) }),
+        lastRender ? /* @__PURE__ */ jsxs(View, { style: styles.editor, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.editorTitle, children: "Last render" }),
+          /* @__PURE__ */ jsx(Image, { source: {
+            uri: lastRender
+          }, style: styles.renderThumb, resizeMode: "cover" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Also added to the board." }),
+          /* @__PURE__ */ jsx(TextInput, { value: motion, onChangeText: setMotion, style: styles.input, multiline: true, placeholder: "How it should move: candles flicker, someone leans in", placeholderTextColor: theme.edInk3, accessibilityLabel: "Motion prompt" }),
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => void runAnimate(), disabled: Boolean(busy), style: ({
+            pressed
+          }) => [styles.softCta, Boolean(busy) && styles.ctaOff, pressedStyle(pressed)], children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-play-outline", size: 18, color: theme.edInk }),
+            /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Animate this render" })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Turns the finished still into footage. The motion is the video model's, not your camera path. Use Move when the move itself has to be exact." })
+        ] }) : null
       ] }) : null,
       tab === "move" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: MOVES.map((m) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setMove(m.kind), style: ({
@@ -648,6 +794,48 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   chipHidden: {
     opacity: 0.45
   },
+  suggestRow: {
+    gap: SPACE.sm,
+    paddingBottom: SPACE.md
+  },
+  vecRow: {
+    marginBottom: SPACE.sm
+  },
+  vecLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2,
+    marginBottom: SPACE.xs
+  }),
+  vecFields: {
+    flexDirection: "row",
+    gap: SPACE.sm
+  },
+  worldCard: {
+    gap: SPACE.sm,
+    marginBottom: SPACE.md,
+    alignItems: "flex-start"
+  },
+  worldThumb: {
+    width: "100%",
+    height: 72,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
+  },
+  renderThumb: {
+    width: "100%",
+    aspectRatio: 16 / 9,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaisedHi
+  },
+  softCta: {
+    flexDirection: "row",
+    gap: SPACE.sm,
+    minHeight: 44,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaisedHi,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: SPACE.sm
+  },
   chipDanger: {
     backgroundColor: theme.edDangerSoft
   },