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

package/lib/features/canvas/CanvasToolDock.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {StyleSheet,View,Pressable,Text,ScrollView}from'react-native';import {useSafeAreaInsets}from'react-native-safe-area-context';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useKeyboardLiftHeight}from'../../components/KeyboardComposerDock.js';import {CanvasGeneratePanel}from'./CanvasGeneratePanel.js';import {CanvasEditToolsPanel}from'./CanvasEditToolsPanel.js';import {CanvasLibraryPanel}from'./CanvasLibrarySheet.js';import {CanvasLooksPanel}from'./CanvasLooksPanel.js';import {CanvasTasksPanel}from'./CanvasTasksPanel.js';import {LIBRARY_PICK}from'./generatorReferences.js';import {hydrateCanvasTasks,runningTaskCount,subscribeCanvasTasks,resumePromoTasks}from'./canvasTasks.js';import {nearestAspect}from'./studioLooks.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect}from'react';import {View,Text,ScrollView,StyleSheet}from'react-native';import {useSafeAreaInsets}from'react-native-safe-area-context';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useKeyboardLiftHeight}from'../../components/KeyboardComposerDock.js';import {CanvasGeneratePanel}from'./CanvasGeneratePanel.js';import {CanvasEditToolsPanel}from'./CanvasEditToolsPanel.js';import {CanvasLibraryPanel}from'./CanvasLibrarySheet.js';import {CanvasLooksPanel}from'./CanvasLooksPanel.js';import {CanvasTasksPanel}from'./CanvasTasksPanel.js';import {LIBRARY_PICK}from'./generatorReferences.js';import {hydrateCanvasTasks,runningTaskCount,subscribeCanvasTasks,resumePromoTasks}from'./canvasTasks.js';import {nearestAspect}from'./studioLooks.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;
@@ -112,6 +112,8 @@ function CanvasToolDock({
   token,
   indexUrl
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const insets = useSafeAreaInsets();
   const keyboardHeight = useKeyboardLiftHeight();
   const hideTabs = dockHidden || keyboardHeight > 40;
@@ -196,9 +198,11 @@ function CanvasToolDock({
           bottom: hideTabs ? keyboardHeight : 0
         }], children: [
           /* @__PURE__ */ jsx(View, { style: styles.handle }),
-          title ? /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: title }) : null,
+          title ? /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, accessibilityRole: "header", children: title }) : null,
           sheet === "generate" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(View, { style: styles.segment, accessibilityLabel: "Create or edit", children: ["create", "edit"].map((id) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setGeneratorTab(id), style: [styles.segmentTab, generatorTab === id && styles.segmentTabOn], accessibilityRole: "tab", accessibilityState: {
+            /* @__PURE__ */ jsx(View, { style: styles.segment, accessibilityLabel: "Create or edit", children: ["create", "edit"].map((id) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setGeneratorTab(id), style: ({
+              pressed
+            }) => [styles.segmentTab, generatorTab === id && styles.segmentTabOn, pressedStyle(pressed)], accessibilityRole: "tab", accessibilityState: {
               selected: generatorTab === id
             }, children: /* @__PURE__ */ jsx(Text, { style: [styles.segmentLabel, generatorTab === id && styles.segmentLabelOn], children: id === "create" ? "Create" : "Edit" }) }, id)) }),
             generatorTab === "edit" ? seedItem && (seedItem.type === "image" || seedItem.type === "video") ? /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", children: /* @__PURE__ */ jsx(CanvasEditToolsPanel, { item: seedItem, runAction, showTitle: false, initialTool: lastEditTool.current, onToolChange: (tool) => {
@@ -237,9 +241,11 @@ function CanvasToolDock({
             /* @__PURE__ */ jsx(View, { style: styles.uploadStrip, children: UPLOAD_SOURCES.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
               setSheet(null);
               onUpload(item.id);
-            }, disabled: busy, style: [styles.uploadTile, busy && styles.tabMuted], accessibilityRole: "button", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: item.icon, size: 20, color: "#0f172a" }),
-              /* @__PURE__ */ jsx(Text, { style: styles.uploadTileLabel, numberOfLines: 1, children: item.label })
+            }, disabled: busy, style: ({
+              pressed
+            }) => [styles.uploadTile, busy && styles.tabMuted, pressedStyle(pressed)], accessibilityRole: "button", children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: item.icon, size: 22, color: theme.foreground }),
+              /* @__PURE__ */ jsx(Text, { style: styles.uploadTileLabel, numberOfLines: 2, children: item.label })
             ] }, item.id)) }),
             /* @__PURE__ */ jsx(CanvasLibraryPanel, { title: "On this board", boards, boardId, runAction, onClose: () => setSheet(null), onPlace: (item) => {
               onPlace(item);
@@ -249,28 +255,36 @@ function CanvasToolDock({
               setSheet(null);
             } })
           ] }) : null,
-          sheet === "studios" ? STUDIOS.map((studio) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+          sheet === "studios" ? /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.studioGrid, children: STUDIOS.map((studio) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
             setSheet(null);
             onStudio(studio.id);
-          }, style: styles.row, accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: studio.icon, size: 20, color: "#0f172a" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: studio.label })
-          ] }, studio.id)) : null,
+          }, style: ({
+            pressed
+          }) => [styles.studioTile, pressedStyle(pressed)], accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(View, { style: styles.studioIcon, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: studio.icon, size: 22, color: theme.foreground }) }),
+            /* @__PURE__ */ jsx(Text, { style: styles.studioLabel, numberOfLines: 1, children: studio.label })
+          ] }, studio.id)) }) : null,
           sheet === "more" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(Pressable, { onPress: () => setSheet("looks"), style: styles.row, accessibilityRole: "button", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-filter-outline", size: 20, color: "#0f172a" }),
+            /* @__PURE__ */ jsxs(Pressable, { onPress: () => setSheet("looks"), style: ({
+              pressed
+            }) => [styles.row, pressedStyle(pressed)], accessibilityRole: "button", children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-filter-outline", size: 20, color: theme.foreground }),
               /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: "Looks" })
             ] }),
-            /* @__PURE__ */ jsxs(Pressable, { onPress: () => setSheet("tasks"), style: styles.row, accessibilityRole: "button", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "playlist-check", size: 20, color: "#0f172a" }),
+            /* @__PURE__ */ jsxs(Pressable, { onPress: () => setSheet("tasks"), style: ({
+              pressed
+            }) => [styles.row, pressedStyle(pressed)], accessibilityRole: "button", children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "playlist-check", size: 20, color: theme.foreground }),
               /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: "Tasks" }),
               taskBadge > 0 ? /* @__PURE__ */ jsx(View, { style: styles.badge, children: /* @__PURE__ */ jsx(Text, { style: styles.badgeLabel, children: taskBadge }) }) : null
             ] }),
             /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
               setSheet(null);
               onRecord == null ? void 0 : onRecord("camera-video");
-            }, style: styles.row, accessibilityRole: "button", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "record-circle-outline", size: 20, color: "#0f172a" }),
+            }, style: ({
+              pressed
+            }) => [styles.row, pressedStyle(pressed)], accessibilityRole: "button", children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "record-circle-outline", size: 20, color: theme.foreground }),
               /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: "Record" })
             ] })
           ] }) : null,
@@ -279,24 +293,27 @@ function CanvasToolDock({
         ] })
       ] }) : null
     ] }),
-    hideTabs ? null : /* @__PURE__ */ jsx(View, { style: [styles.tabBar, {
-      paddingBottom: Math.max(insets.bottom, 8)
-    }], children: TABS.map((tab) => {
+    hideTabs ? null : /* @__PURE__ */ jsx(View, { style: [styles.tabDock, {
+      paddingBottom: Math.max(insets.bottom, SPACE.sm)
+    }], children: /* @__PURE__ */ jsx(View, { style: styles.tabBar, children: TABS.map((tab) => {
       const active = sheet === tab.id || tab.id === "more" && (sheet === "more" || sheet === "looks" || sheet === "tasks");
       const disabled = false;
-      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onTab(tab.id), disabled, accessibilityRole: "button", accessibilityLabel: tab.label, style: [styles.tab, active && styles.tabOn, disabled], children: [
-        /* @__PURE__ */ jsxs(View, { children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tab.icon, size: 18, color: active ? "#0f172a" : "#64748b" }),
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onTab(tab.id), disabled, accessibilityRole: "button", accessibilityLabel: tab.label, style: ({
+        pressed
+      }) => [styles.tab, disabled, pressedStyle(pressed)], children: [
+        /* @__PURE__ */ jsxs(View, { style: [styles.tabIcon, active && styles.tabOn], children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tab.icon, size: 20, color: active ? theme.foreground : theme.mutedForeground }),
           tab.id === "more" && taskBadge > 0 ? /* @__PURE__ */ jsx(View, { style: styles.tabBadge, children: /* @__PURE__ */ jsx(Text, { style: styles.tabBadgeLabel, children: taskBadge }) }) : null
         ] }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.tabLabel, active && styles.tabLabelOn], children: tab.label })
+        /* @__PURE__ */ jsx(Text, { style: [styles.tabLabel, active && styles.tabLabelOn], numberOfLines: 1, children: tab.label })
       ] }, tab.id);
-    }) })
+    }) }) })
   ] });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
-    flex: 1
+    flex: 1,
+    backgroundColor: theme.background
   },
   fill: {
     flex: 1
@@ -304,77 +321,79 @@ const styles = StyleSheet.create({
   hidden: {
     display: "none"
   },
-  hint: {
-    padding: 16,
-    fontSize: 13,
-    color: "#64748b"
-  },
+  hint: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    color: theme.mutedForeground,
+    paddingHorizontal: SPACE.lg + 4,
+    paddingVertical: SPACE.xl,
+    textAlign: "center"
+  }),
   segment: {
     flexDirection: "row",
     gap: 2,
-    marginHorizontal: 16,
-    marginBottom: 10,
+    marginHorizontal: SPACE.lg + 4,
+    marginBottom: SPACE.md,
     padding: 3,
-    borderRadius: 999,
-    backgroundColor: "#f1f5f9"
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
   },
   segmentTab: {
     flex: 1,
     alignItems: "center",
-    paddingVertical: 6,
-    borderRadius: 999
+    justifyContent: "center",
+    minHeight: 36,
+    borderRadius: RADIUS.pill
   },
   segmentTabOn: {
-    backgroundColor: "#ffffff",
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.08,
+    backgroundColor: theme.isDark ? theme.secondary : theme.surface,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0 : 0.08,
     shadowRadius: 4,
     shadowOffset: {
       width: 0,
       height: 1
     },
-    elevation: 1
-  },
-  segmentLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#64748b"
+    elevation: theme.isDark ? 0 : 1
   },
+  segmentLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.mutedForeground
+  }),
   segmentLabelOn: {
-    color: "#0f172a"
+    color: theme.foreground
   },
   pickLayer: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     zIndex: 5,
-    backgroundColor: "#ffffff"
+    backgroundColor: theme.surface
   }),
   uploadStrip: {
     flexDirection: "row",
-    gap: 8,
-    paddingHorizontal: 16,
-    paddingBottom: 8
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.lg + 4,
+    paddingTop: SPACE.xs,
+    paddingBottom: SPACE.md
   },
   uploadTile: {
     flex: 1,
     alignItems: "center",
-    gap: 4,
-    paddingVertical: 10,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderStyle: "dashed",
-    borderColor: "#cbd5e1"
-  },
-  uploadTileLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: "#334155"
+    justifyContent: "center",
+    gap: SPACE.sm - 2,
+    minHeight: 76,
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: SPACE.md,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.card
   },
+  uploadTileLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    textAlign: "center",
+    color: theme.foreground
+  }),
   plane: {
     flex: 1,
     overflow: "hidden"
   },
   backdrop: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     zIndex: 10,
-    backgroundColor: "rgba(15,23,42,0.2)"
+    backgroundColor: theme.isDark ? "rgba(0,0,0,0.45)" : "rgba(10,10,10,0.22)"
   }),
   sheet: {
     position: "absolute",
@@ -384,116 +403,165 @@ const styles = StyleSheet.create({
     flex: 0,
     flexDirection: "column",
     overflow: "hidden",
-    borderTopLeftRadius: 18,
-    borderTopRightRadius: 18,
-    backgroundColor: "#ffffff",
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#e2e8f0",
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.12,
-    shadowRadius: 20,
+    borderTopLeftRadius: RADIUS.xl + 4,
+    borderTopRightRadius: RADIUS.xl + 4,
+    backgroundColor: theme.surface,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0.4 : 0.1,
+    shadowRadius: 24,
     shadowOffset: {
       width: 0,
-      height: -4
+      height: -6
     },
-    elevation: 8
+    elevation: 12
   },
   handle: {
     alignSelf: "center",
-    width: 36,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: "#e2e8f0",
-    marginTop: 8,
-    marginBottom: 4
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: theme.borderStrong,
+    marginTop: SPACE.sm,
+    marginBottom: SPACE.sm
   },
-  sheetTitle: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: "#0f172a",
-    paddingHorizontal: 16,
-    paddingBottom: 8
+  sheetTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground,
+    paddingHorizontal: SPACE.lg + 4,
+    paddingTop: SPACE.xs,
+    paddingBottom: SPACE.md
+  }),
+  studioGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.lg + 4,
+    paddingBottom: SPACE.xl
+  },
+  studioTile: {
+    width: "31.5%",
+    flexGrow: 1,
+    alignItems: "center",
+    gap: SPACE.sm,
+    paddingVertical: SPACE.lg,
+    paddingHorizontal: SPACE.sm,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.card
+  },
+  studioIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.isDark ? theme.secondary : theme.surface
   },
+  studioLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12
+    gap: SPACE.md + 2,
+    minHeight: HIT + 8,
+    marginHorizontal: SPACE.md,
+    paddingHorizontal: SPACE.sm + 2,
+    borderRadius: RADIUS.md
   },
   rowMuted: {
     opacity: 0.45
   },
-  rowLabel: {
-    fontSize: 15,
+  rowLabel: __spreadProps(__spreadValues({}, TYPE.body), {
     fontWeight: "500",
-    color: "#0f172a"
-  },
-  rowLabelMuted: {
-    fontSize: 15,
+    color: theme.foreground
+  }),
+  rowLabelMuted: __spreadProps(__spreadValues({}, TYPE.body), {
     fontWeight: "500",
-    color: "#94a3b8"
+    color: theme.mutedForeground
+  }),
+  tabDock: {
+    paddingHorizontal: SPACE.md,
+    paddingTop: SPACE.sm,
+    backgroundColor: theme.background,
+    zIndex: 20
   },
   tabBar: {
     flexDirection: "row",
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#e2e8f0",
-    backgroundColor: "#ffffff",
-    paddingTop: 6,
-    paddingHorizontal: 4,
-    zIndex: 20
+    alignItems: "center",
+    padding: SPACE.xs + 2,
+    borderRadius: RADIUS.xl + 4,
+    backgroundColor: theme.isDark ? theme.card : theme.surface,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0.35 : 0.08,
+    shadowRadius: 16,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 6
   },
   tab: {
     flex: 1,
     alignItems: "center",
-    gap: 2,
-    paddingVertical: 4,
-    borderRadius: 12
+    justifyContent: "center",
+    gap: 3,
+    minHeight: HIT + 8,
+    paddingVertical: SPACE.xs
+  },
+  tabIcon: {
+    width: 48,
+    height: 28,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
   },
   tabOn: {
-    backgroundColor: "#f1f5f9"
+    backgroundColor: theme.isDark ? theme.secondary : theme.card
   },
   tabMuted: {
     opacity: 0.45
   },
   tabLabel: {
-    fontSize: 9.5,
-    fontWeight: "600",
-    color: "#64748b"
+    fontSize: 11,
+    lineHeight: 14,
+    fontWeight: "500",
+    color: theme.mutedForeground
   },
   tabLabelOn: {
-    color: "#0f172a"
+    fontWeight: "600",
+    color: theme.foreground
   },
   badge: {
     marginLeft: "auto",
-    minWidth: 18,
-    height: 18,
-    borderRadius: 9,
-    backgroundColor: "#ea580c",
+    minWidth: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: theme.primary,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 5
+    paddingHorizontal: 6
   },
   badgeLabel: {
-    fontSize: 10,
+    fontSize: 12,
     fontWeight: "700",
-    color: "#fff7ed"
+    color: theme.primaryForeground
   },
   tabBadge: {
     position: "absolute",
-    top: -4,
-    right: -8,
-    minWidth: 14,
-    height: 14,
-    borderRadius: 7,
-    backgroundColor: "#ea580c",
+    top: -2,
+    right: 4,
+    minWidth: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: theme.primary,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 3
+    paddingHorizontal: 4
   },
   tabBadgeLabel: {
-    fontSize: 9,
+    fontSize: 10,
     fontWeight: "700",
-    color: "#fff7ed"
+    color: theme.primaryForeground
   }
-});export{CanvasToolDock};//# sourceMappingURL=CanvasToolDock.js.map
+}));export{CanvasToolDock};//# sourceMappingURL=CanvasToolDock.js.map