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

package/lib/features/canvas/NativeCanvasViewer.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import React__default,{createContext,useState,useEffect,useRef,useMemo,useCallback,useContext}from'react';import {StyleSheet,useWindowDimensions,Alert,Clipboard,Share,View,Text,TextInput}from'react-native';import {Gesture,GestureHandlerRootView,Pressable,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedReaction,runOnJS,useAnimatedStyle}from'react-native-reanimated';import {Image}from'expo-image';import {MaterialCommunityIcons}from'@expo/vector-icons';import {getVideoItemRenderer}from'./videoRenderer.js';import {spreadStackedItems,coerceUploadSizedItem,paintOrder,applyItemFrame,MAX_ZOOM,MIN_ZOOM,removeItem,boardBounds,resizeFrame}from'./canvasCore.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';import {ensureItemShareLink,shareableMediaUrl}from'./linksRpc.js';import {renewMediaUrl,useMediaSource,mediaPhaseLabel}from'./useMediaSource.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import React__default,{createContext,useMemo,useState,useEffect,useRef,useCallback,useContext}from'react';import {useWindowDimensions,Alert,Clipboard,Share,View,Text,StyleSheet,TextInput}from'react-native';import {Gesture,GestureHandlerRootView,Pressable,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedReaction,runOnJS,useAnimatedStyle}from'react-native-reanimated';import {Image}from'expo-image';import {MaterialCommunityIcons}from'@expo/vector-icons';import {getVideoItemRenderer}from'./videoRenderer.js';import {spreadStackedItems,coerceUploadSizedItem,paintOrder,applyItemFrame,MAX_ZOOM,MIN_ZOOM,removeItem,boardBounds,resizeFrame}from'./canvasCore.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';import {ensureItemShareLink,shareableMediaUrl}from'./linksRpc.js';import {renewMediaUrl,useMediaSource,mediaPhaseLabel}from'./useMediaSource.js';import {CanvasThemeProvider,useCanvasTheme,themedStyles}from'./canvasTheme.js';import {SPACE,RADIUS,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -24,6 +24,8 @@ const SELECTION_COLOR = "#3b82f6";
 function MediaGlyph({
   item
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   return /* @__PURE__ */ jsxs(View, { style: [StyleSheet.absoluteFill, styles.mediaTile], accessibilityLabel: `Canvas ${item.type}`, children: [
     /* @__PURE__ */ jsx(Text, { style: styles.mediaTileGlyph, children: item.type === "video" ? "\u25B6" : "\u266A" }),
     item.generatedAssetName ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.mediaTileLabel, children: item.generatedAssetName }) : null
@@ -64,11 +66,13 @@ function ImageItemContent({
   item
 }) {
   var _a;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const renew = useContext(MediaRenewContext);
   const media = useMediaSource(item.src, "image", renew);
   const status = mediaPhaseLabel(media.phase);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    media.phase === "broken" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.mediaTile], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-off-outline", size: 28, color: "#94a3b8" }) }) : /* @__PURE__ */ jsx(Image, { source: {
+    media.phase === "broken" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.mediaTile], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-off-outline", size: 28, color: theme.mutedForeground }) }) : /* @__PURE__ */ jsx(Image, { source: {
       uri: media.src
     }, style: [StyleSheet.absoluteFill, styles.itemImage], contentFit: "cover", transition: 120, onError: media.onError, accessibilityLabel: (_a = item.generatedAssetName) != null ? _a : "Canvas image" }, media.key),
     status ? /* @__PURE__ */ jsx(View, { style: styles.mediaStatus, pointerEvents: "none", children: /* @__PURE__ */ jsx(Text, { style: styles.mediaStatusLabel, children: status }) }) : null
@@ -98,6 +102,8 @@ function ItemHoverToolbar({
   onShareLink,
   onChromeTouch
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [moreOpen, setMoreOpen] = useState(false);
   const [promptOpen, setPromptOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
@@ -117,7 +123,7 @@ function ItemHoverToolbar({
             setMoreOpen(false);
             setPromptOpen((v) => !v);
           }, style: styles.hoverBtn, accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "pencil-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "pencil-outline", size: 18, color: theme.inkSoft }),
             /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, numberOfLines: 1, children: "Edit Image" })
           ] }),
           /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
@@ -125,7 +131,7 @@ function ItemHoverToolbar({
             setPromptOpen(false);
             onAction == null ? void 0 : onAction("edit-image", item);
           }, style: styles.hoverBtn, accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 18, color: theme.inkSoft }),
             /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Editor" })
           ] }),
           /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
@@ -133,7 +139,7 @@ function ItemHoverToolbar({
             setPromptOpen(false);
             onAction == null ? void 0 : onAction("mark-edit", item);
           }, style: styles.hoverBtn, accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "marker", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "marker", size: 18, color: theme.inkSoft }),
             /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Mark & edit" })
           ] })
         ] }) : null,
@@ -141,14 +147,14 @@ function ItemHoverToolbar({
           setMoreOpen(false);
           onAction == null ? void 0 : onAction("edit-video", item);
         }, style: styles.hoverBtn, accessibilityRole: "button", children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 20, color: "#64748b" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 18, color: theme.inkSoft }),
           /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Edit Video" })
         ] }) : null,
         item.type === "audio" ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
           setMoreOpen(false);
           onAction == null ? void 0 : onAction("edit-audio", item);
         }, style: styles.hoverBtn, accessibilityRole: "button", children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 20, color: "#64748b" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 18, color: theme.inkSoft }),
           /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Edit Audio" })
         ] }) : null,
         /* @__PURE__ */ jsx(View, { style: styles.hoverDivider }),
@@ -157,8 +163,8 @@ function ItemHoverToolbar({
           onAction == null ? void 0 : onAction("create-video", item);
         }, style: styles.hoverBtn, accessibilityRole: "button", children: [
           /* @__PURE__ */ jsxs(View, { children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video-outline", size: 20, color: "#64748b" }),
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "star-four-points", size: 8, color: "#94a3b8", style: styles.hoverSparkle })
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video-outline", size: 18, color: theme.inkSoft }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "star-four-points", size: 8, color: theme.inkSoft, style: styles.hoverSparkle })
           ] }),
           /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Create Video" })
         ] }),
@@ -166,14 +172,14 @@ function ItemHoverToolbar({
           setMoreOpen(false);
           onAction == null ? void 0 : onAction("restyle-video", item);
         }, style: styles.hoverBtn, accessibilityRole: "button", children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 20, color: "#64748b" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 18, color: theme.inkSoft }),
           /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Restyle" })
         ] }) : null,
         item.type === "image" || item.type === "video" ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
           setMoreOpen(false);
           onAction == null ? void 0 : onAction("promo-video", item);
         }, style: styles.hoverBtn, accessibilityRole: "button", children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "bullhorn-outline", size: 20, color: "#64748b" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "bullhorn-outline", size: 18, color: theme.inkSoft }),
           /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Promo" })
         ] }) : null,
         item.type === "video" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -182,45 +188,47 @@ function ItemHoverToolbar({
             setMoreOpen(false);
             onAction == null ? void 0 : onAction("trim-video", item);
           }, style: styles.hoverBtn, accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 18, color: theme.inkSoft }),
             /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Clips" })
           ] })
         ] }) : null,
         /* @__PURE__ */ jsx(View, { style: styles.hoverDivider }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: download, style: styles.hoverIconBtn, accessibilityRole: "button", accessibilityLabel: "Download", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "download-outline", size: 20, color: "#94a3b8" }) })
+        /* @__PURE__ */ jsx(Pressable, { onPress: download, style: styles.hoverIconBtn, accessibilityRole: "button", accessibilityLabel: "Download", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "download-outline", size: 18, color: theme.inkSoft }) })
       ] }) }),
       /* @__PURE__ */ jsx(View, { style: styles.hoverDivider }),
       /* @__PURE__ */ jsxs(View, { style: styles.moreWrap, children: [
         /* @__PURE__ */ jsx(Pressable, { onPress: () => {
           setPromptOpen(false);
           setMoreOpen((v) => !v);
-        }, style: styles.hoverIconBtn, accessibilityRole: "button", accessibilityLabel: "More", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "dots-vertical", size: 20, color: "#94a3b8" }) }),
+        }, style: styles.hoverIconBtn, accessibilityRole: "button", accessibilityLabel: "More", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "dots-vertical", size: 20, color: theme.inkSoft }) }),
         moreOpen ? /* @__PURE__ */ jsxs(View, { style: styles.moreMenu, children: [
           /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
             setMoreOpen(false);
             onRemove();
           }, style: styles.moreRow, accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 18, color: theme.inkSoft }),
             /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: "Remove" })
           ] }),
           /* @__PURE__ */ jsxs(Pressable, { onPress: download, style: styles.moreRow, accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "download-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "download-outline", size: 18, color: theme.inkSoft }),
             /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: "Download" })
           ] }),
           onShareLink ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
             setMoreOpen(false);
             onShareLink();
           }, style: styles.moreRow, accessibilityRole: "button", children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "link-variant", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "link-variant", size: 18, color: theme.inkSoft }),
             /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: item.share ? "Copy share link" : "Create share link" })
           ] }) : null
         ] }) : null
       ] })
     ] }),
-    promptOpen && item.type === "image" ? /* @__PURE__ */ jsx(View, { style: styles.editPrompt, children: /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, placeholder: "Describe how to edit this image\u2026", placeholderTextColor: "#94a3b8", multiline: true, style: styles.editPromptInput }) }) : null
+    promptOpen && item.type === "image" ? /* @__PURE__ */ jsx(View, { style: styles.editPrompt, children: /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, placeholder: "Describe how to edit this image\u2026", placeholderTextColor: theme.mutedForeground, multiline: true, style: styles.editPromptInput }) }) : null
   ] }) }) });
 }
 function DotGrid() {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   return /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.dots, children: Array.from({
     length: 40
   }).map((_, row) => /* @__PURE__ */ jsx(View, { style: styles.dotRow, children: Array.from({
@@ -238,6 +246,8 @@ function SelectedItem({
   onShareLink,
   onChromeTouch
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const fx = useSharedValue(item.x);
   const fy = useSharedValue(item.y);
   const fw = useSharedValue(item.width);
@@ -347,7 +357,7 @@ function SelectedItem({
     showToolbar ? /* @__PURE__ */ jsx(ItemHoverToolbar, { item, onAction, onRemove, onShareLink, onChromeTouch }) : null
   ] });
 }
-function NativeCanvasViewer({
+function NativeCanvasViewerBody({
   board,
   onItemPress,
   onBoardChange,
@@ -365,6 +375,8 @@ function NativeCanvasViewer({
   testID
 }) {
   var _a;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const {
     width: winW,
     height: winH
@@ -572,25 +584,23 @@ function NativeCanvasViewer({
     }, children: [
       onBoardsPress ? /* @__PURE__ */ jsxs(View, { style: styles.boardHeader, children: [
         /* @__PURE__ */ jsxs(Pressable, { onPress: onBoardsPress, accessibilityRole: "button", accessibilityLabel: "Boards", style: styles.boardsBtn, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 16, color: "#64748b" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 18, color: theme.foreground }),
           /* @__PURE__ */ jsx(Text, { style: styles.boardsLabel, children: "Boards" })
         ] }),
-        /* @__PURE__ */ jsx(View, { style: styles.headerRule }),
-        /* @__PURE__ */ jsxs(Text, { style: styles.itemCount, children: [
+        /* @__PURE__ */ jsxs(Text, { style: styles.itemCount, numberOfLines: 1, children: [
           items.length,
           " ",
           items.length === 1 ? "item" : "items"
         ] }),
         /* @__PURE__ */ jsxs(View, { style: styles.headerZoom, children: [
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1 / 1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom out", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.zoomBtnGlyph, children: "\u2212" }) }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: fitBoard, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Fit board", children: /* @__PURE__ */ jsxs(Text, { style: styles.zoomPct, children: [
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1 / 1.25), hitSlop: 6, accessibilityRole: "button", accessibilityLabel: "Zoom out", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 18, color: theme.inkSoft }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: fitBoard, hitSlop: 6, accessibilityRole: "button", accessibilityLabel: "Fit board", children: /* @__PURE__ */ jsxs(Text, { style: styles.zoomPct, children: [
             zoomPct,
             "%"
           ] }) }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom in", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.zoomBtnGlyph, children: "+" }) })
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1.25), hitSlop: 6, accessibilityRole: "button", accessibilityLabel: "Zoom in", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 18, color: theme.inkSoft }) })
         ] }),
-        /* @__PURE__ */ jsx(View, { style: styles.headerRule }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setAgentOpen(true), style: styles.askAgentBtn, accessibilityRole: "button", accessibilityLabel: "Ask agent", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 16, color: "#64748b" }) })
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setAgentOpen(true), style: styles.askAgentBtn, accessibilityRole: "button", accessibilityLabel: "Ask agent", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 18, color: theme.foreground }) })
       ] }) : null,
       /* @__PURE__ */ jsxs(View, { style: styles.canvasPlane, onLayout: (e) => {
         const {
@@ -610,16 +620,17 @@ function NativeCanvasViewer({
           setSelectedId(null);
         }, onShareLink: shareLinks && shareableMediaUrl(item.src) ? () => void handleShareLink(item.id) : void 0, onChromeTouch: armChromeTouch }, item.id) : /* @__PURE__ */ jsx(StaticItem, { item, onTap: handleSelect }, item.id)) }) }) }) }),
         items.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyHint, pointerEvents: "none", children: [
+          /* @__PURE__ */ jsx(View, { style: styles.emptyHintIcon, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 24, color: theme.foreground }) }),
           /* @__PURE__ */ jsx(Text, { style: styles.emptyHintTitle, children: "Your canvas is empty" }),
           /* @__PURE__ */ jsx(Text, { style: styles.emptyHintDetail, children: "Tap Generate below for an image, video, audio, slides, clips or a promo." })
         ] }) : null,
         controls && !onBoardsPress ? /* @__PURE__ */ jsxs(View, { style: styles.zoomHud, pointerEvents: "box-none", children: [
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1 / 1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom out", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.zoomBtnGlyph, children: "\u2212" }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1 / 1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom out", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 18, color: theme.inkSoft }) }),
           /* @__PURE__ */ jsx(Pressable, { onPress: fitBoard, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Fit board", children: /* @__PURE__ */ jsxs(Text, { style: styles.zoomPct, children: [
             zoomPct,
             "%"
           ] }) }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom in", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.zoomBtnGlyph, children: "+" }) })
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom in", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 18, color: theme.inkSoft }) })
         ] }) : null
       ] }),
       /* @__PURE__ */ jsx(CanvasAgentChatPane, { visible: agentOpen, onClose: () => setAgentOpen(false), runAction, boardItems: items, selectedItem: (_a = items.find((it) => it.id === selectedId)) != null ? _a : null, onGenerated: (url, meta) => onAgentGenerated == null ? void 0 : onAgentGenerated(url, meta), onReplace: (itemId, url) => onAgentReplace == null ? void 0 : onAgentReplace(itemId, url), onOpenItem: (itemId) => {
@@ -629,14 +640,17 @@ function NativeCanvasViewer({
     ] })
   );
 }
+function NativeCanvasViewer(props) {
+  return /* @__PURE__ */ jsx(CanvasThemeProvider, { children: /* @__PURE__ */ jsx(NativeCanvasViewerBody, __spreadValues({}, props)) });
+}
 function initialZoomFor(_board, _viewportWidth, _viewportHeight) {
   return 1;
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   viewport: {
     flex: 1,
     overflow: "hidden",
-    backgroundColor: "#eef1f4"
+    backgroundColor: theme.isDark ? theme.background : theme.muted
   },
   canvasPlane: {
     flex: 1,
@@ -645,78 +659,76 @@ const styles = StyleSheet.create({
   emptyHint: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 32,
-    paddingTop: 8,
+    paddingHorizontal: SPACE.xxl,
+    paddingTop: SPACE.sm,
     paddingBottom: 72
   }),
-  emptyHintTitle: {
-    fontSize: 14,
-    fontWeight: "500",
-    color: "#0f172a",
-    marginBottom: 6
-  },
-  emptyHintDetail: {
-    fontSize: 12,
-    color: "#64748b",
+  emptyHintTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground,
     textAlign: "center",
-    maxWidth: 280,
-    lineHeight: 17
+    marginBottom: SPACE.xs
+  }),
+  emptyHintIcon: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.surface,
+    marginBottom: SPACE.md
   },
+  emptyHintDetail: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    lineHeight: 20,
+    color: theme.mutedForeground,
+    textAlign: "center",
+    maxWidth: 280
+  }),
   boardHeader: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    backgroundColor: "#ffffff",
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#e2e8f0",
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm,
+    backgroundColor: theme.background,
     zIndex: 50
   },
   boardsBtn: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 6
-  },
-  boardsLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: "#64748b"
-  },
-  headerRule: {
-    width: StyleSheet.hairlineWidth,
-    height: 16,
-    backgroundColor: "#e2e8f0"
-  },
-  itemCount: {
-    fontSize: 11,
-    color: "#94a3b8",
+    gap: SPACE.sm - 2,
+    minHeight: 40,
+    paddingHorizontal: SPACE.md + 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
+  },
+  boardsLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
+  itemCount: __spreadProps(__spreadValues({}, TYPE.caption), {
+    flexShrink: 1,
+    color: theme.mutedForeground,
     fontVariant: ["tabular-nums"]
-  },
+  }),
   headerZoom: {
     marginLeft: "auto",
     flexDirection: "row",
     alignItems: "center",
-    gap: 2,
-    flexShrink: 0
+    flexShrink: 0,
+    minHeight: 40,
+    paddingHorizontal: SPACE.xs,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
   },
   askAgentBtn: {
     alignItems: "center",
     justifyContent: "center",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#e2e8f0",
-    borderRadius: 8,
-    width: 36,
-    height: 32,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: theme.card,
     flexShrink: 0
   },
-  askAgentLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: "#64748b"
-  },
   plane: {
     position: "absolute",
     left: 0,
@@ -727,38 +739,36 @@ const styles = StyleSheet.create({
   },
   itemImage: {
     borderRadius: 8,
-    backgroundColor: "#e2e8f0"
+    backgroundColor: theme.border
   },
   mediaStatus: {
     position: "absolute",
-    left: 8,
-    bottom: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 6,
-    backgroundColor: "rgba(15,23,42,0.7)"
-  },
-  mediaStatusLabel: {
+    left: SPACE.sm,
+    bottom: SPACE.sm,
+    paddingHorizontal: SPACE.sm + 2,
+    paddingVertical: SPACE.xs,
+    borderRadius: RADIUS.pill,
+    backgroundColor: "rgba(10,10,10,0.6)"
+  },
+  mediaStatusLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
     fontSize: 11,
+    lineHeight: 14,
     fontWeight: "600",
-    color: "#f8fafc"
-  },
+    color: "#fafafa"
+  }),
   zoomHud: {
     position: "absolute",
-    top: 12,
-    right: 12,
+    top: SPACE.md,
+    right: SPACE.md,
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 14,
-    backgroundColor: "#ffffff",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#e2e8f0",
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
+    minHeight: 40,
+    paddingHorizontal: SPACE.xs,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.isDark ? theme.card : theme.surface,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0.3 : 0.08,
+    shadowRadius: 10,
     shadowOffset: {
       width: 0,
       height: 2
@@ -776,7 +786,7 @@ const styles = StyleSheet.create({
     height: 22,
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
-    backgroundColor: "rgba(15, 23, 42, 0.35)",
+    backgroundColor: "rgba(10,10,10,0.35)",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
@@ -792,11 +802,11 @@ const styles = StyleSheet.create({
   dots: __spreadValues({}, StyleSheet.absoluteFillObject),
   dotRow: {
     flexDirection: "row",
-    height: 22
+    height: 24
   },
   dotCell: {
-    width: 22,
-    height: 22,
+    width: 24,
+    height: 24,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -804,7 +814,7 @@ const styles = StyleSheet.create({
     width: 2,
     height: 2,
     borderRadius: 1,
-    backgroundColor: "rgba(15,23,42,0.14)"
+    backgroundColor: theme.tint(theme.isDark ? 0.1 : 0.08)
   },
   hoverWrap: {
     position: "absolute",
@@ -812,7 +822,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: "100%",
     alignItems: "center",
-    marginBottom: 4,
+    marginBottom: SPACE.sm,
     zIndex: 50,
     overflow: "visible"
   },
@@ -825,20 +835,20 @@ const styles = StyleSheet.create({
     alignItems: "center",
     maxWidth: "100%",
     overflow: "visible",
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderRadius: 14,
-    backgroundColor: "#ffffff",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(15,23,42,0.08)",
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.12,
-    shadowRadius: 16,
+    paddingHorizontal: SPACE.xs + 2,
+    paddingVertical: SPACE.xs,
+    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
   },
   hoverActions: {
     flexShrink: 1,
@@ -857,51 +867,53 @@ const styles = StyleSheet.create({
     zIndex: 80
   },
   editPrompt: {
-    marginTop: 8,
+    marginTop: SPACE.sm,
     width: 280,
-    borderRadius: 16,
-    backgroundColor: "#ffffff",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(15,23,42,0.08)",
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.1,
-    shadowRadius: 16,
+    borderRadius: RADIUS.lg + 2,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md,
+    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: 8
+      height: 6
     },
-    elevation: 6
+    elevation: 8
   },
-  editPromptInput: {
-    minHeight: 44,
-    fontSize: 15,
-    color: "#334155",
+  editPromptInput: __spreadProps(__spreadValues({}, TYPE.body), {
+    minHeight: HIT,
+    color: theme.foreground,
     padding: 0
-  },
+  }),
   hoverBtn: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 9
+    gap: SPACE.sm - 2,
+    minHeight: 40,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.pill
   },
   hoverIconBtn: {
-    paddingHorizontal: 10,
-    paddingVertical: 9
-  },
-  hoverLabel: {
-    fontSize: 15,
-    fontWeight: "600",
-    color: "#334155"
+    minWidth: 40,
+    minHeight: 40,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 20
   },
+  hoverLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 14,
+    color: theme.foreground
+  }),
   hoverDivider: {
     width: StyleSheet.hairlineWidth,
-    alignSelf: "stretch",
-    backgroundColor: "#e2e8f0",
-    marginVertical: 4,
-    marginHorizontal: 2
+    height: 20,
+    alignSelf: "center",
+    backgroundColor: theme.borderStrong,
+    marginHorizontal: SPACE.xs
   },
   hoverSparkle: {
     position: "absolute",
@@ -912,50 +924,49 @@ const styles = StyleSheet.create({
     position: "absolute",
     top: "100%",
     right: 0,
-    marginTop: 8,
+    marginTop: SPACE.sm,
     zIndex: 90,
-    minWidth: 176,
-    borderRadius: 10,
-    backgroundColor: "#ffffff",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(15,23,42,0.08)",
-    paddingVertical: 4,
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.12,
-    shadowRadius: 12,
+    minWidth: 200,
+    borderRadius: RADIUS.lg,
+    padding: SPACE.xs + 2,
+    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
   },
   moreRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10
+    gap: SPACE.md - 2,
+    minHeight: HIT,
+    paddingHorizontal: SPACE.md - 2,
+    borderRadius: RADIUS.md
   },
-  moreLabel: {
+  moreLabel: __spreadProps(__spreadValues({}, TYPE.body), {
     fontSize: 14,
-    color: "#334155"
-  },
+    fontWeight: "500",
+    color: theme.foreground
+  }),
   zoomBtn: {
-    paddingHorizontal: 8,
-    paddingVertical: 2
-  },
-  zoomBtnGlyph: {
-    fontSize: 20,
-    color: "#334155",
-    fontWeight: "500"
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  zoomPct: {
-    fontSize: 15,
-    color: "#0f172a",
+  zoomPct: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground,
     fontVariant: ["tabular-nums"],
-    minWidth: 52,
+    minWidth: 48,
     textAlign: "center"
-  },
+  }),
   selectionRing: {
     borderColor: SELECTION_COLOR
   },
@@ -975,33 +986,33 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     backgroundColor: "#3b82f6",
     borderWidth: 1,
-    borderColor: "#ffffff"
+    borderColor: theme.surface
   },
   mediaTile: {
     borderRadius: 8,
-    backgroundColor: "#0f172a",
+    backgroundColor: "#18181b",
     alignItems: "center",
     justifyContent: "center",
-    padding: 8
+    padding: SPACE.sm
   },
   mediaTileGlyph: {
-    color: "#f8fafc",
+    color: "#fafafa",
     fontSize: 28,
-    marginBottom: 4
+    marginBottom: SPACE.xs
   },
-  mediaTileLabel: {
-    color: "#cbd5e1",
+  mediaTileLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
     fontSize: 11,
+    color: "#a1a1aa",
     maxWidth: "90%"
-  },
+  }),
   empty: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#f8fafc"
+    backgroundColor: theme.muted
   },
   emptyText: {
-    color: "#64748b",
+    color: theme.mutedForeground,
     fontSize: 14
   }
-});export{NativeCanvasViewer,initialZoomFor};//# sourceMappingURL=NativeCanvasViewer.js.map
+}));export{NativeCanvasViewer,initialZoomFor};//# sourceMappingURL=NativeCanvasViewer.js.map