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

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 {StyleSheet,View,Pressable,Text,ScrollView,TextInput,FlatList,Image,ActivityIndicator}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';var __defProp = Object.defineProperty;
+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;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,7 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const HSCROLL = {
+  flexGrow: 0
+};
 const NUDGE_M = 0.25;
+const TAB_ICONS = {
+  set: "auto-fix",
+  view: "rotate-3d-variant",
+  world: "earth",
+  object: "cube-outline",
+  render: "camera-iris",
+  move: "movie-open-outline"
+};
 const LIFT_M = 0.1;
 const TURN_DEG = 15;
 const GROW = 1.15;
@@ -31,6 +42,8 @@ function SetStudioExperience({
   indexUrl
 }) {
   var _a, _b;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const insets = useSafeAreaInsets();
   const stills = useMemo(() => boardItems.filter((item) => item.type === "image").map((item) => ({
     id: item.id,
@@ -342,23 +355,36 @@ function SetStudioExperience({
     paddingBottom: insets.bottom + 8
   }], children: [
     /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
-      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#e2e8f0" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, style: ({
+        pressed
+      }) => [styles.headBtn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: theme.edInk }) }),
       /* @__PURE__ */ jsx(Text, { style: styles.title, children: "3D set" }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: undo, hitSlop: 10, disabled: past.length === 0 || Boolean(busy), accessibilityLabel: "Undo", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "undo", size: 22, color: past.length ? "#e2e8f0" : "#3f3f46" }) })
+      /* @__PURE__ */ jsx(Pressable, { onPress: undo, hitSlop: 10, disabled: past.length === 0 || Boolean(busy), accessibilityLabel: "Undo", style: ({
+        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(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.tabs, children: [["set", "Set"], ["view", "View"], ["world", "World"], ["object", "Object"], ["render", "Render"], ["move", "Move"]].map(([id, label]) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setTab(id), style: [styles.tab, tab === id && styles.tabOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.tabLabel, tab === id && styles.tabLabelOn], children: label }) }, id)) }),
-    /* @__PURE__ */ jsxs(ScrollView, { style: styles.body, keyboardShouldPersistTaps: "handled", children: [
+    /* @__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: [
+      /* @__PURE__ */ jsx(View, { style: [styles.tabIcon, tab === id && styles.tabIconOn], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: TAB_ICONS[id], size: 22, color: tab === id ? theme.edInk : theme.edInk3 }) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.tabLabel, tab === id && styles.tabLabelOn], children: label })
+    ] }, id)) }),
+    /* @__PURE__ */ jsxs(ScrollView, { style: styles.body, contentContainerStyle: styles.bodyContent, keyboardShouldPersistTaps: "handled", children: [
       tab === "set" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(TextInput, { value: brief, onChangeText: setBrief, style: styles.input, multiline: true, placeholderTextColor: "#7A7A88", placeholder: project.objects.length ? 'Change it: "lower the camera", "add a second figure"\u2026' : 'Describe the set: "a barista behind a caf\xE9 counter at dawn"', accessibilityLabel: "Describe the set" }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => void describeSet(), style: [styles.cta, (!brief.trim() || Boolean(busy)) && styles.ctaOff], 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(TextInput, { value: brief, onChangeText: setBrief, style: styles.input, multiline: true, placeholderTextColor: theme.edInk3, placeholder: project.objects.length ? 'Change it: "lower the camera", "add a second figure"\u2026' : 'Describe the set: "a barista behind a caf\xE9 counter at dawn"', accessibilityLabel: "Describe the set" }),
+        /* @__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" }) }),
         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}` : ""
         ] }, `${i}-${step.label}`)) }) : null,
         agentReply ? /* @__PURE__ */ jsx(Text, { style: styles.reply, children: agentReply }) : null,
         /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Pieces" }),
-        project.objects.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Nothing on the set yet. Describe it above, or add a piece." }) : /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: project.objects.map((o) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setSelectedId(o.id === selectedId ? null : o.id), style: [styles.chip, o.id === selectedId && styles.chipOn, o.hidden && styles.chipHidden], children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, o.id === selectedId && styles.chipLabelOn], children: [
+        project.objects.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Nothing on the set yet. Describe it above, or add a piece." }) : /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: project.objects.map((o) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setSelectedId(o.id === selectedId ? null : o.id), style: ({
+          pressed
+        }) => [styles.chip, o.id === selectedId && styles.chipOn, o.hidden && styles.chipHidden, pressedStyle(pressed)], children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, o.id === selectedId && styles.chipLabelOn], children: [
           o.locked ? "\u{1F512} " : "",
           o.name
         ] }) }, o.id)) }),
@@ -392,25 +418,37 @@ function SetStudioExperience({
               y: selected.scale.y / GROW,
               z: selected.scale.z / GROW
             }
-          }), "Smaller"]].map(([icon, onPress, label]) => /* @__PURE__ */ jsx(Pressable, { onPress, style: styles.iconBtn, accessibilityLabel: label, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 18, color: "#F7F7FA" }) }, label)) }),
+          }), "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)) }),
           /* @__PURE__ */ jsxs(View, { style: styles.moveRow, children: [
             /* @__PURE__ */ jsx(Pressable, { onPress: () => editSelected({
               id: selected.id,
               hidden: !selected.hidden
-            }), style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: selected.hidden ? "Show" : "Hide" }) }),
+            }), style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: selected.hidden ? "Show" : "Hide" }) }),
             /* @__PURE__ */ jsx(Pressable, { onPress: () => editSelected({
               id: selected.id,
               locked: !selected.locked
-            }), style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: selected.locked ? "Unlock" : "Lock" }) }),
+            }), style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: selected.locked ? "Unlock" : "Lock" }) }),
             /* @__PURE__ */ jsx(Pressable, { onPress: () => {
               var _a2;
               return (_a2 = viewportApi.current) == null ? void 0 : _a2.frameObject(selected.id);
-            }, style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Frame" }) }),
-            /* @__PURE__ */ jsx(Pressable, { onPress: deleteSelected, style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.danger], children: "Delete" }) })
+            }, style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Frame" }) }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: deleteSelected, style: ({
+              pressed
+            }) => [styles.chip, styles.chipDanger, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.danger], children: "Delete" }) })
           ] })
         ] }) : null,
         /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Add a piece" }),
-        /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: KIT_ENTRIES.map((entry) => /* @__PURE__ */ jsx(Pressable, { onPress: () => addKit(entry.id), style: styles.chip, children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: entry.label }) }, entry.id)) }),
+        /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: KIT_ENTRIES.map((entry) => /* @__PURE__ */ jsx(Pressable, { onPress: () => addKit(entry.id), style: ({
+          pressed
+        }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: entry.label }) }, entry.id)) }),
         /* @__PURE__ */ jsxs(Text, { style: styles.hint, children: [
           "Generated meshes are normalised to ",
           MESH_TARGET_HEIGHT_M,
@@ -419,215 +457,259 @@ 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: "#7A7A88" }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => void runWorld(), style: styles.cta, disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Generate world" }) })
+        /* @__PURE__ */ jsx(TextInput, { value: worldPrompt, onChangeText: setWorldPrompt, style: styles.input, multiline: true, 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" }) })
       ] }) : null,
       tab === "object" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(FlatList, { horizontal: true, data: stills, keyExtractor: (item) => item.id, renderItem: ({
           item
-        }) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setPropUrl(item.src), style: [styles.thumbWrap, propUrl === item.src && styles.thumbOn], children: /* @__PURE__ */ jsx(Image, { source: {
+        }) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setPropUrl(item.src), style: ({
+          pressed
+        }) => [styles.thumbWrap, propUrl === item.src && styles.thumbOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Image, { source: {
           uri: item.src
         }, style: styles.thumb }) }) }),
-        /* @__PURE__ */ jsx(TextInput, { value: objectPrompt, onChangeText: setObjectPrompt, style: styles.input, multiline: true, placeholderTextColor: "#7A7A88", placeholder: "Optional mesh prompt" }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => void runObject(), style: styles.cta, disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Generate object" }) })
+        /* @__PURE__ */ jsx(TextInput, { value: objectPrompt, onChangeText: setObjectPrompt, style: styles.input, multiline: true, placeholderTextColor: theme.edInk3, placeholder: "Optional mesh prompt" }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => void runObject(), style: ({
+          pressed
+        }) => [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(TextInput, { value: look, onChangeText: setLook, style: styles.input, multiline: true, placeholderTextColor: "#7A7A88" }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => void runRender(), style: styles.cta, disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Render still" }) })
+        /* @__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" }) })
       ] }) : 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: [styles.chip, move === m.kind && styles.chipOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, move === m.kind && styles.chipLabelOn], children: m.label }) }, m.kind)) }),
-        /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: [2, 3, 4, 6].map((sec) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setDuration(sec), style: [styles.chip, duration === sec && styles.chipOn], children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, duration === sec && styles.chipLabelOn], children: [
+        /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: MOVES.map((m) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setMove(m.kind), style: ({
+          pressed
+        }) => [styles.chip, move === m.kind && styles.chipOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, move === m.kind && styles.chipLabelOn], children: m.label }) }, m.kind)) }),
+        /* @__PURE__ */ jsx(View, { style: styles.moveRow, children: [2, 3, 4, 6].map((sec) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setDuration(sec), style: ({
+          pressed
+        }) => [styles.chip, duration === sec && styles.chipOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsxs(Text, { style: [styles.chipLabel, duration === sec && styles.chipLabelOn], children: [
           sec,
           "s"
         ] }) }, sec)) }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => void runMove(), style: styles.cta, disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Render move" }) })
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => void runMove(), style: ({
+          pressed
+        }) => [styles.cta, Boolean(busy) && styles.ctaOff, pressedStyle(pressed)], disabled: Boolean(busy), children: /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Render move" }) })
       ] }) : null,
       busy ? /* @__PURE__ */ jsxs(View, { style: styles.busyRow, children: [
-        /* @__PURE__ */ jsx(ActivityIndicator, { color: "#C4B5FD" }),
+        /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk2 }),
         /* @__PURE__ */ jsx(Text, { style: styles.progress, children: busy })
       ] }) : null,
       error ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: error }) : null
     ] })
   ] });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: "#0B0B0E"
+    backgroundColor: theme.edBg
   },
   head: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 16,
-    marginBottom: 6
-  },
-  title: {
-    fontSize: 17,
-    fontWeight: "700",
-    color: "#F7F7FA"
+    paddingHorizontal: SPACE.sm,
+    minHeight: HIT + SPACE.xs,
+    marginBottom: SPACE.xs
+  },
+  headBtn: {
+    width: HIT,
+    height: HIT,
+    borderRadius: HIT / 2,
+    alignItems: "center",
+    justifyContent: "center"
   },
+  title: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.edInk
+  }),
   viewport: {
-    height: 240,
-    marginHorizontal: 12,
-    borderRadius: 12,
-    overflow: "hidden"
+    height: 260,
+    marginHorizontal: SPACE.md,
+    borderRadius: RADIUS.lg,
+    overflow: "hidden",
+    backgroundColor: "#050506"
   },
   tabs: {
-    paddingHorizontal: 12,
-    gap: 8,
-    paddingVertical: 10
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: SPACE.sm,
+    gap: SPACE.xs
   },
   tab: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24"
+    minWidth: 60,
+    alignItems: "center",
+    gap: SPACE.xs,
+    paddingVertical: SPACE.xs
+  },
+  tabIcon: {
+    width: 48,
+    height: 34,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  tabOn: {
-    backgroundColor: "#8B7CFF"
+  tabIconOn: {
+    backgroundColor: theme.edRaisedHi
   },
   tabLabel: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
-    fontWeight: "600"
+    fontSize: 11,
+    lineHeight: 14,
+    fontWeight: "500",
+    color: theme.edInk3
   },
   tabLabelOn: {
-    color: "#0A0A0C"
+    color: theme.edInk,
+    fontWeight: "600"
   },
   body: {
     flex: 1,
-    paddingHorizontal: 12
+    backgroundColor: theme.edPanel,
+    borderTopLeftRadius: RADIUS.xl,
+    borderTopRightRadius: RADIUS.xl
   },
-  hint: {
-    color: "#7A7A88",
-    fontSize: 13,
-    marginBottom: 8
+  bodyContent: {
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.lg,
+    paddingBottom: SPACE.xl
   },
-  input: {
-    minHeight: 64,
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    backgroundColor: "#1F1F24",
-    color: "#F7F7FA",
-    marginBottom: 10,
+  hint: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    fontSize: 13,
+    lineHeight: 18,
+    color: theme.edInk3,
+    marginBottom: SPACE.sm
+  }),
+  input: __spreadProps(__spreadValues({}, TYPE.body), {
+    minHeight: 76,
+    borderRadius: RADIUS.md,
+    paddingHorizontal: SPACE.md + 2,
+    paddingVertical: SPACE.md,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk,
+    marginBottom: SPACE.md,
     textAlignVertical: "top"
-  },
+  }),
   cta: {
-    paddingVertical: 12,
-    borderRadius: 12,
-    backgroundColor: "#F7F7FA",
+    minHeight: 48,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.primary,
     alignItems: "center",
-    marginBottom: 10
-  },
-  ctaLabel: {
-    fontWeight: "700",
-    color: "#0f172a"
+    justifyContent: "center",
+    marginBottom: SPACE.md
   },
+  ctaLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 15,
+    color: theme.primaryForeground
+  }),
   ctaOff: {
-    opacity: 0.5
+    opacity: 0.45
   },
   steps: {
-    gap: 2,
-    marginBottom: 8
-  },
-  step: {
-    color: "#A5A5B4",
-    fontSize: 11.5
-  },
-  reply: {
-    color: "#E4E4EC",
-    fontSize: 13,
-    lineHeight: 18,
-    marginBottom: 10
-  },
-  section: {
-    color: "#F7F7FA",
-    fontSize: 12,
-    fontWeight: "700",
-    marginTop: 6,
-    marginBottom: 8
-  },
+    gap: SPACE.xs,
+    marginBottom: SPACE.sm
+  },
+  step: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    color: theme.edInk2
+  }),
+  reply: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    lineHeight: 20,
+    color: theme.edInk,
+    marginBottom: SPACE.md
+  }),
+  section: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
+    marginTop: SPACE.md,
+    marginBottom: SPACE.sm
+  }),
   editor: {
-    padding: 10,
-    borderRadius: 12,
-    backgroundColor: "#16161B",
-    marginBottom: 10,
-    gap: 4
-  },
-  editorTitle: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
-    fontWeight: "600",
-    marginBottom: 6
-  },
+    padding: SPACE.md,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.edRaised,
+    marginBottom: SPACE.md,
+    gap: SPACE.xs
+  },
+  editorTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
+    marginBottom: SPACE.sm
+  }),
   iconBtn: {
-    width: 38,
-    height: 38,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24",
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: theme.edRaisedHi,
     alignItems: "center",
     justifyContent: "center"
   },
   chipHidden: {
     opacity: 0.45
   },
+  chipDanger: {
+    backgroundColor: theme.edDangerSoft
+  },
   danger: {
-    color: "#FCA5A5"
+    color: theme.edDanger
   },
   thumbWrap: {
-    width: 64,
-    height: 64,
-    borderRadius: 8,
+    width: 68,
+    height: 68,
+    borderRadius: RADIUS.md,
     overflow: "hidden",
-    marginRight: 8,
+    marginRight: SPACE.sm,
+    marginBottom: SPACE.md,
     borderWidth: 2,
-    borderColor: "transparent"
+    borderColor: "transparent",
+    backgroundColor: theme.edRaised
   },
   thumbOn: {
-    borderColor: "#8B7CFF"
+    borderColor: theme.edInk
   },
   thumb: {
     width: "100%",
-    height: "100%"
+    height: "100%",
+    borderRadius: RADIUS.md - 2
   },
   moveRow: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 8,
-    marginBottom: 10
+    gap: SPACE.sm,
+    marginBottom: SPACE.md
   },
   chip: {
-    paddingHorizontal: 10,
-    paddingVertical: 7,
-    borderRadius: 8,
-    backgroundColor: "#1F1F24"
+    minHeight: 36,
+    paddingHorizontal: SPACE.md + 2,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.edRaisedHi
   },
   chipOn: {
-    backgroundColor: "#8B7CFF"
-  },
-  chipLabel: {
-    color: "#F7F7FA",
-    fontSize: 12
+    backgroundColor: theme.edInk
   },
+  chipLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk
+  }),
   chipLabelOn: {
-    color: "#0A0A0C"
+    color: theme.edOnInk
   },
   busyRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    marginTop: 6
-  },
-  progress: {
-    color: "#C4B5FD",
-    fontSize: 12
-  },
-  error: {
-    color: "#FECACA",
-    fontSize: 12,
-    marginTop: 8
-  }
-});export{SetStudioExperience};//# sourceMappingURL=SetStudioExperience.js.map
+    gap: SPACE.sm,
+    marginTop: SPACE.sm
+  },
+  progress: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2
+  }),
+  error: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edDanger,
+    marginTop: SPACE.sm,
+    padding: SPACE.md,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edDangerSoft
+  })
+}));export{SetStudioExperience};//# sourceMappingURL=SetStudioExperience.js.map