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

package/lib/features/canvas/CanvasExperience.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect,useCallback}from'react';import {StyleSheet,useColorScheme,Image,View,Text,Pressable,ActivityIndicator}from'react-native';import {NativeCanvasViewer}from'./NativeCanvasViewer.js';import {CanvasBoardsGrid}from'./CanvasBoardsGrid.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';import {VideoEditorExperience}from'./VideoEditorExperience.js';import {ImageEditorExperience}from'./ImageEditorExperience.js';import {AudioEditorExperience}from'./AudioEditorExperience.js';import {friendlyMediaError}from'./videoEditor/mediaActions.js';import {createRemoteRunAction,createRemoteUploadMedia,proxiedMediaUrl,unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {renderExportSpec}from'./videoEditor/exportRenderer.js';import {startExportTask}from'./videoEditor/exportTask.js';import {useCanvasTask,ExportTaskCard}from'./videoEditor/ExportTaskCard.js';import {markTaskDelivered,dismissTask}from'./canvasTasks.js';import {getCachedCanvasBoards,fetchMyCanvasBoards,pushCanvasBoard}from'./surfaceIndex.js';import {useMediaSigning,useBoardMediaRefresh,applySrcRenewals}from'./useBoardMediaRefresh.js';import {readCachedCanvasBoards,writeCachedCanvasBoards}from'./canvasBoardsCatalog.js';import {hydrateCanvasBoardsSnapshot,persistCanvasBoardsSnapshot}from'./canvasBoardsSnapshot.js';import {boardSignature,mediaItemsFor,buildBoardState,reconcileDismissed,newBoardId,emptyBoardState,dimsForAspect,mediaKey}from'./canvasCore.js';import {visibleCreateGroups}from'./createTiles.js';import {parseDesignLink,parseMediaLink,parseCreateTileLink}from'./deepLinks.js';import {promoProjectToTimeline}from'./promoProjectImport.js';import {loadTemplateTimeline}from'./templateImport/loadTemplate.js';import {CanvasToolDock}from'./CanvasToolDock.js';import {describeSession}from'./sessionIdentity.js';import {DesignExperience}from'../design/DesignExperience.js';import {fetchMyDesigns}from'../design/designIndex.js';import {VideoGeneratorExperience}from'./VideoGeneratorExperience.js';import {VideoEditExperience}from'./VideoEditExperience.js';import {VideoClipsExperience}from'./VideoClipsExperience.js';import {FrameExtractorExperience}from'./FrameExtractorExperience.js';import {MoodboardExperience}from'./MoodboardExperience.js';import {SetStudioExperience}from'./SetStudioExperience.js';import {configureServerTasks}from'./serverTasks.js';import {setCanvasTasksHost}from'./canvasTaskSync.js';import {InfluencerStudioExperience}from'./InfluencerStudioExperience.js';import {CameraRecorderExperience}from'./recorder/CameraRecorderExperience.js';import {listStudioLooks}from'./studioLooks.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect,useCallback}from'react';import {Image,View,Text,ActivityIndicator,StyleSheet}from'react-native';import {NativeCanvasViewer}from'./NativeCanvasViewer.js';import {CanvasBoardsGrid}from'./CanvasBoardsGrid.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';import {VideoEditorExperience}from'./VideoEditorExperience.js';import {ImageEditorExperience}from'./ImageEditorExperience.js';import {AudioEditorExperience}from'./AudioEditorExperience.js';import {friendlyMediaError}from'./videoEditor/mediaActions.js';import {createRemoteRunAction,createRemoteUploadMedia,proxiedMediaUrl,unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {renderExportSpec}from'./videoEditor/exportRenderer.js';import {startExportTask}from'./videoEditor/exportTask.js';import {useCanvasTask,ExportTaskCard}from'./videoEditor/ExportTaskCard.js';import {markTaskDelivered,dismissTask}from'./canvasTasks.js';import {getCachedCanvasBoards,fetchMyCanvasBoards,pushCanvasBoard}from'./surfaceIndex.js';import {useMediaSigning,useBoardMediaRefresh,applySrcRenewals}from'./useBoardMediaRefresh.js';import {readCachedCanvasBoards,writeCachedCanvasBoards}from'./canvasBoardsCatalog.js';import {hydrateCanvasBoardsSnapshot,persistCanvasBoardsSnapshot}from'./canvasBoardsSnapshot.js';import {boardSignature,mediaItemsFor,buildBoardState,reconcileDismissed,newBoardId,emptyBoardState,dimsForAspect,mediaKey}from'./canvasCore.js';import {visibleCreateGroups}from'./createTiles.js';import {parseDesignLink,parseMediaLink,parseCreateTileLink}from'./deepLinks.js';import {promoProjectToTimeline}from'./promoProjectImport.js';import {loadTemplateTimeline}from'./templateImport/loadTemplate.js';import {CanvasToolDock}from'./CanvasToolDock.js';import {describeSession}from'./sessionIdentity.js';import {DesignExperience}from'../design/DesignExperience.js';import {fetchMyDesigns}from'../design/designIndex.js';import {VideoGeneratorExperience}from'./VideoGeneratorExperience.js';import {VideoEditExperience}from'./VideoEditExperience.js';import {VideoClipsExperience}from'./VideoClipsExperience.js';import {FrameExtractorExperience}from'./FrameExtractorExperience.js';import {MoodboardExperience}from'./MoodboardExperience.js';import {SetStudioExperience}from'./SetStudioExperience.js';import {configureServerTasks}from'./serverTasks.js';import {setCanvasTasksHost}from'./canvasTaskSync.js';import {InfluencerStudioExperience}from'./InfluencerStudioExperience.js';import {CameraRecorderExperience}from'./recorder/CameraRecorderExperience.js';import {listStudioLooks}from'./studioLooks.js';import {CanvasThemeProvider,useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Pressable,pressedStyle,ActionButton,RADIUS,SPACE,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -65,7 +65,7 @@ function withTombstones(prev, next) {
   else delete out.dismissed;
   return out;
 }
-function CanvasExperience({
+function CanvasExperienceBody({
   token,
   indexUrl,
   channelId,
@@ -87,7 +87,9 @@ function CanvasExperience({
   testID
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const isDark = useColorScheme() === "dark";
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
+  const isDark = theme.isDark;
   const effectiveRunAction = useMemo(() => runMediaAction != null ? runMediaAction : token && indexUrl ? createRemoteRunAction(token, indexUrl) : void 0, [runMediaAction, token, indexUrl]);
   useMemo(() => configureServerTasks({
     token,
@@ -799,9 +801,11 @@ function CanvasExperience({
       }, onBackground: () => setExportTaskId(null) }) }) : exporting ? /* @__PURE__ */ jsx(View, { style: styles.exportOverlay, children: /* @__PURE__ */ jsx(View, { style: styles.exportCard, children: exporting.error ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { style: styles.exportError, children: "Export failed" }),
         /* @__PURE__ */ jsx(Text, { style: styles.exportStage, numberOfLines: 4, children: exporting.error }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setExporting(null), style: styles.exportDismiss, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.exportDismissLabel, children: "Dismiss" }) })
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setExporting(null), style: ({
+          pressed
+        }) => [styles.exportDismiss, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.exportDismissLabel, children: "Dismiss" }) })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F7F7FA" }),
+        /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk }),
         /* @__PURE__ */ jsx(Text, { style: styles.exportStage, children: exporting.stage })
       ] }) }) }) : null
     ] });
@@ -866,7 +870,7 @@ function CanvasExperience({
       indexUrl
     } : void 0 }) }),
     uploadStatus ? /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles.uploadToast, children: [
-      mediaBusy ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: "#2563eb" }) : null,
+      mediaBusy ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.info }) : null,
       /* @__PURE__ */ jsx(Text, { style: styles.uploadToastText, numberOfLines: 2, children: uploadStatus })
     ] }) : null
   ] });
@@ -881,177 +885,155 @@ function Notice({
   onRetry,
   retryLabel = "Try again"
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   return /* @__PURE__ */ jsxs(View, { style: styles.center, children: [
-    /* @__PURE__ */ jsx(Text, { style: [styles.title, isDark && styles.textLight], children: title }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.title, isDark && styles.textLight], accessibilityRole: "header", children: title }),
     /* @__PURE__ */ jsx(Text, { style: [styles.detail, isDark && styles.textMuted], children: detail }),
     fine ? /* @__PURE__ */ jsx(Text, { style: styles.fine, children: fine }) : null,
-    onPrimary ? /* @__PURE__ */ jsx(Pressable, { onPress: onPrimary, style: styles.primaryCta, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.primaryCtaLabel, children: primaryLabel != null ? primaryLabel : "Create" }) }) : null,
-    onRetry ? /* @__PURE__ */ jsx(Pressable, { onPress: onRetry, style: styles.retry, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: retryLabel }) }) : null
+    onPrimary || onRetry ? /* @__PURE__ */ jsxs(View, { style: styles.noticeActions, children: [
+      onPrimary ? /* @__PURE__ */ jsx(ActionButton, { label: primaryLabel != null ? primaryLabel : "Create", onPress: onPrimary }) : null,
+      onRetry ? /* @__PURE__ */ jsx(ActionButton, { label: retryLabel, onPress: onRetry, variant: onPrimary ? "secondary" : "primary" }) : null
+    ] }) : null
   ] });
 }
-const styles = StyleSheet.create({
-  primaryCta: {
-    marginTop: 16,
-    paddingHorizontal: 22,
-    paddingVertical: 11,
-    borderRadius: 11,
-    backgroundColor: "#2563eb"
-  },
-  primaryCtaLabel: {
-    color: "#ffffff",
-    fontSize: 14,
-    fontWeight: "600"
+function CanvasExperience(props) {
+  const hostMode = props.isDark == null ? null : props.isDark ? "dark" : "light";
+  return /* @__PURE__ */ jsx(CanvasThemeProvider, { mode: hostMode, children: /* @__PURE__ */ jsx(CanvasExperienceBody, __spreadValues({}, props)) });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  noticeActions: {
+    marginTop: SPACE.xl,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: SPACE.sm
   },
   fill: {
     flex: 1
   },
   gridLoading: {
     position: "absolute",
-    top: 12,
-    right: 16,
+    top: SPACE.md,
+    right: SPACE.lg,
     zIndex: 4
   },
   center: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    padding: 24
-  },
-  title: {
-    fontSize: 15,
-    fontWeight: "600",
-    color: "#0f172a",
-    marginBottom: 6
-  },
-  detail: {
-    fontSize: 13,
-    color: "#64748b",
-    textAlign: "center"
+    paddingHorizontal: SPACE.xxl,
+    paddingVertical: SPACE.xl,
+    backgroundColor: theme.background
   },
-  fine: {
-    marginTop: 10,
-    fontSize: 11,
-    color: "#94a3b8",
+  title: __spreadProps(__spreadValues({}, TYPE.title), {
+    fontSize: 19,
+    lineHeight: 24,
+    color: theme.foreground,
     textAlign: "center",
-    paddingHorizontal: 20,
-    lineHeight: 15
-  },
+    marginBottom: SPACE.sm
+  }),
+  detail: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: theme.mutedForeground,
+    textAlign: "center",
+    maxWidth: 320
+  }),
+  fine: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    marginTop: SPACE.md,
+    color: theme.mutedForeground,
+    textAlign: "center",
+    maxWidth: 300
+  }),
   spaced: {
-    marginTop: 10
+    marginTop: SPACE.md - 2
   },
   textLight: {
-    color: "#f8fafc"
+    color: theme.foreground
   },
   textMuted: {
-    color: "#94a3b8"
-  },
-  retry: {
-    marginTop: 16,
-    paddingHorizontal: 18,
-    paddingVertical: 10,
-    borderRadius: 10,
-    backgroundColor: "#2563eb"
-  },
-  retryLabel: {
-    color: "#ffffff",
-    fontSize: 13,
-    fontWeight: "600"
+    color: theme.mutedForeground
   },
   backPill: {
     position: "absolute",
-    top: 12,
-    left: 12,
+    top: SPACE.md,
+    left: SPACE.md,
     zIndex: 40,
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
+    gap: SPACE.sm - 2,
     maxWidth: 220,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    borderRadius: 12,
-    backgroundColor: "#ffffff",
-    borderWidth: 1,
-    borderColor: "rgba(15,23,42,0.08)",
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    elevation: 2
-  },
-  backLabel: {
-    fontSize: 15,
-    fontWeight: "600",
-    color: "#475569"
+    minHeight: 40,
+    paddingHorizontal: SPACE.md + 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
   },
+  backLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
   uploadToast: {
     position: "absolute",
-    top: 56,
-    left: 16,
-    right: 16,
+    top: 60,
+    left: SPACE.lg,
+    right: SPACE.lg,
     zIndex: 60,
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    borderRadius: 14,
-    backgroundColor: "#ffffff",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(15,23,42,0.08)",
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.12,
-    shadowRadius: 16,
+    gap: SPACE.md - 2,
+    minHeight: 48,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md - 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.isDark ? theme.card : theme.surface,
+    borderWidth: theme.isDark ? StyleSheet.hairlineWidth : 0,
+    borderColor: theme.border,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0.4 : 0.12,
+    shadowRadius: 18,
     shadowOffset: {
       width: 0,
-      height: 4
+      height: 6
     },
-    elevation: 6
+    elevation: 8
   },
-  uploadToastText: {
-    flex: 1,
+  uploadToastText: __spreadProps(__spreadValues({}, TYPE.label), {
     fontSize: 14,
-    fontWeight: "600",
-    color: "#0f172a"
-  },
+    flex: 1,
+    color: theme.foreground
+  }),
   exportOverlay: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     backgroundColor: "rgba(0,0,0,0.65)",
     alignItems: "center",
     justifyContent: "center",
-    padding: 32
+    padding: SPACE.xxl
   }),
   exportCard: {
-    minWidth: 220,
+    minWidth: 240,
     maxWidth: 320,
     alignItems: "center",
-    gap: 10,
-    backgroundColor: "#17171C",
-    borderRadius: 16,
-    paddingVertical: 20,
-    paddingHorizontal: 24
+    gap: SPACE.md,
+    backgroundColor: theme.edPanel,
+    borderRadius: RADIUS.xl,
+    paddingVertical: SPACE.xl,
+    paddingHorizontal: SPACE.xl
   },
-  exportStage: {
-    fontSize: 13,
-    color: "#CBD5E1",
+  exportStage: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    color: theme.edInk2,
     textAlign: "center"
-  },
-  exportError: {
-    fontSize: 15,
-    fontWeight: "600",
-    color: "#F87171"
-  },
+  }),
+  exportError: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.edDanger
+  }),
   exportDismiss: {
-    marginTop: 4,
-    backgroundColor: "#26262E",
-    borderRadius: 16,
-    paddingHorizontal: 14,
-    paddingVertical: 8
+    marginTop: SPACE.xs,
+    minHeight: 40,
+    justifyContent: "center",
+    backgroundColor: theme.edRaisedHi,
+    borderRadius: RADIUS.pill,
+    paddingHorizontal: SPACE.lg + 2
   },
-  exportDismissLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#F7F7FA"
-  }
-});export{CanvasExperience,CanvasExperience as default};//# sourceMappingURL=CanvasExperience.js.map
+  exportDismissLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk
+  })
+}));export{CanvasExperience,CanvasExperience as default};//# sourceMappingURL=CanvasExperience.js.map