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

package/lib/features/canvas/CanvasBoardsGrid.js

@@ -1,4 +1,6 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useMemo,useEffect,useCallback}from'react';import {StyleSheet,useWindowDimensions,View,Text,Pressable,ScrollView,FlatList}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {isUnsetBoardTitle}from'./canvasCore.js';import {CANVAS_BOARD_PAGE_SIZE}from'./canvasBoardsCatalog.js';import {mergeWork,availableFilters,matchesFilter,WORK_FILTERS,designNoun,pageCount,boardCover,videoCoverFrame}from'./homeWork.js';import {resultUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useMemo,useEffect,useCallback}from'react';import {useWindowDimensions,View,Text,ScrollView,FlatList,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {isUnsetBoardTitle}from'./canvasCore.js';import {CANVAS_BOARD_PAGE_SIZE}from'./canvasBoardsCatalog.js';import {mergeWork,availableFilters,matchesFilter,WORK_FILTERS,designNoun,pageCount,boardCover,videoCoverFrame}from'./homeWork.js';import {resultUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {renewMediaUrl,useMediaSource}from'./useMediaSource.js';import {useCanvasTheme,themedStyles,CanvasThemeToggle}from'./canvasTheme.js';import {Pressable,pressedStyle,SectionHeader,Segmented,RADIUS,SPACE,CoverPlaceholder,Skeleton,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,19 +16,72 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const MINUTE = 6e4;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
-const GUTTER = 16;
-const TILE_RADIUS = 12;
-const THUMB_HEIGHT = 140;
+const GUTTER = SPACE.lg;
+const COVER_STALL_MS = 12e3;
 function relativeTime(ts) {
   const diff = Date.now() - ts;
   if (diff < HOUR) return `${Math.max(1, Math.round(diff / MINUTE))}m ago`;
   if (diff < DAY) return `${Math.round(diff / HOUR)}h ago`;
   if (diff < 30 * DAY) return `${Math.round(diff / DAY)}d ago`;
-  return new Date(ts).toLocaleDateString();
+  return new Date(ts).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
 }
+const LANE_HUES = {
+  image: {
+    light: ["#fef3c7", "#b45309"],
+    dark: ["rgba(251,191,36,0.14)", "#fcd34d"]
+  },
+  video: {
+    light: ["#ffe4e6", "#be123c"],
+    dark: ["rgba(251,113,133,0.14)", "#fda4af"]
+  },
+  audio: {
+    light: ["#e0f2fe", "#0369a1"],
+    dark: ["rgba(56,189,248,0.14)", "#7dd3fc"]
+  },
+  slides: {
+    light: ["#ede9fe", "#6d28d9"],
+    dark: ["rgba(167,139,250,0.16)", "#c4b5fd"]
+  },
+  clips: {
+    light: ["#d1fae5", "#047857"],
+    dark: ["rgba(52,211,153,0.14)", "#6ee7b7"]
+  },
+  promo: {
+    light: ["#ffedd5", "#c2410c"],
+    dark: ["rgba(251,146,60,0.14)", "#fdba74"]
+  }
+};
+const FORMAT_SHAPE = {
+  social: {
+    w: 1,
+    h: 1
+  },
+  carousel: {
+    w: 4,
+    h: 5,
+    stack: true
+  },
+  flyer: {
+    w: 3,
+    h: 4
+  },
+  logo: {
+    w: 1,
+    h: 1,
+    round: true
+  },
+  tshirt: {
+    w: 5,
+    h: 6
+  }
+};
 function CanvasBoardsGrid({
   boards,
   onOpen,
@@ -40,12 +95,16 @@ function CanvasBoardsGrid({
   onRecreateLook,
   runAction
 }) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
   const {
     width
   } = useWindowDimensions();
   const tileWidth = Math.max(140, (width - GUTTER * 3) / 2);
+  const laneWidth = (width - GUTTER * 2 - SPACE.sm * 2) / 3;
   const [visible, setVisible] = useState(CANVAS_BOARD_PAGE_SIZE);
   const [filter, setFilter] = useState("all");
+  const renew = useMemo(() => renewMediaUrl(runAction), [runAction]);
   const work = useMemo(() => mergeWork(boards, designs), [boards, designs]);
   const filters = useMemo(() => availableFilters(work), [work]);
   const active = filters.includes(filter) ? filter : "all";
@@ -63,77 +122,87 @@ function CanvasBoardsGrid({
   }))], [shown, visible]);
   const rows = useMemo(() => {
     const chunked = [];
-    for (let i = 0; i < tiles.length; i += 2) {
-      chunked.push(tiles.slice(i, i + 2));
-    }
+    for (let i = 0; i < tiles.length; i += 2) chunked.push(tiles.slice(i, i + 2));
     return chunked;
   }, [tiles]);
   const loadMore = useCallback(() => {
-    setVisible((count) => {
-      if (count >= shown.length) return count;
-      return Math.min(count + CANVAS_BOARD_PAGE_SIZE, shown.length);
-    });
+    setVisible((count) => count >= shown.length ? count : Math.min(count + CANVAS_BOARD_PAGE_SIZE, shown.length));
   }, [shown.length]);
+  const group = (id) => createGroups.find((g) => g.id === id);
+  const generate = group("generate");
+  const edit = group("edit");
+  const designGroup = group("design");
+  const lane = (tile) => {
+    const hue = LANE_HUES[tile.id];
+    const [wash, ink] = hue ? theme.isDark ? hue.dark : hue.light : [theme.card, theme.foreground];
+    return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onCreate == null ? void 0 : onCreate(tile.action, tile.id), style: ({
+      pressed
+    }) => [styles.lane, {
+      width: laneWidth,
+      backgroundColor: wash
+    }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `${tile.label}: ${tile.hint}`, testID: `create-tile-${tile.id}`, children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tile.icon, size: 24, color: ink }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.laneLabel, {
+        color: theme.isDark ? theme.foreground : ink
+      }], numberOfLines: 2, children: tile.label })
+    ] }, tile.id);
+  };
   const header = /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-    onCreate && createGroups.length > 0 ? /* @__PURE__ */ jsxs(View, { style: styles.createBlock, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.createHead, children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.flexShrink, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.createTitle, children: "Create" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.createSub, children: "Generate, edit, or start a blank design." })
-        ] }),
-        onAskAgent ? /* @__PURE__ */ jsxs(Pressable, { onPress: onAskAgent, style: styles.askAgentBtn, accessibilityRole: "button", accessibilityLabel: "AI Chat", children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 14, color: "#64748b" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.askAgentLabel, children: "AI Chat" })
-        ] }) : null
-      ] }),
-      createGroups.map((group) => /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles.groupTitle, {
-          color: group.accent.fg,
-          borderBottomColor: group.accent.bg
-        }], children: group.title }),
-        /* @__PURE__ */ jsx(View, { style: styles.groupTiles, children: group.tiles.map((tile) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onCreate(tile.action, tile.id), style: [styles.createTile, {
-          width: tileWidth
-        }], accessibilityRole: "button", accessibilityLabel: `${tile.label}: ${tile.hint}`, testID: `create-tile-${tile.id}`, children: [
-          /* @__PURE__ */ jsx(View, { style: [styles.createIcon, {
-            backgroundColor: group.accent.bg
-          }], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tile.icon, size: 18, color: group.accent.fg }) }),
-          /* @__PURE__ */ jsxs(View, { style: styles.flexShrink, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.createLabel, numberOfLines: 1, children: tile.label }),
-            /* @__PURE__ */ jsx(Text, { style: styles.createHint, numberOfLines: 2, children: tile.hint })
-          ] })
-        ] }, tile.id)) })
-      ] }, group.id))
+    /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.title, accessibilityRole: "header", children: "Create" }),
+      /* @__PURE__ */ jsx(CanvasThemeToggle, { size: 20, style: styles.toggle })
+    ] }),
+    onAskAgent ? /* @__PURE__ */ jsxs(Pressable, { onPress: onAskAgent, style: ({
+      pressed
+    }) => [styles.prompt, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Ask AI Chat to make something", children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 20, color: theme.mutedForeground }),
+      /* @__PURE__ */ jsx(Text, { style: styles.promptText, numberOfLines: 1, children: "Describe what you want to make" }),
+      /* @__PURE__ */ jsx(View, { style: styles.promptGo, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-up", size: 18, color: theme.primaryForeground }) })
+    ] }) : null,
+    onCreate && generate ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Generate with AI" }),
+      /* @__PURE__ */ jsx(View, { style: styles.lanes, children: generate.tiles.map(lane) })
+    ] }) : null,
+    onCreate && designGroup ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Design" }),
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.bleed, contentContainerStyle: styles.railContent, children: designGroup.tiles.map((tile) => /* @__PURE__ */ jsx(FormatTile, { tile, onPress: () => onCreate(tile.action, tile.id) }, tile.id)) })
     ] }) : null,
-    featuredLooks.length > 0 && onRecreateLook ? /* @__PURE__ */ jsxs(View, { style: styles.composerBlock, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.studioLabel, children: "Looks" }),
-      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.studioRow, children: featuredLooks.map((look) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onRecreateLook(look), style: styles.lookChip, accessibilityRole: "button", accessibilityLabel: `Recreate ${look.name}`, children: [
+    onCreate && edit ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Edit & produce" }),
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.bleed, contentContainerStyle: styles.railContent, children: edit.tiles.map((tile) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onCreate(tile.action, tile.id), style: ({
+        pressed
+      }) => [styles.tool, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `${tile.label}: ${tile.hint}`, testID: `create-tile-${tile.id}`, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tile.icon, size: 18, color: theme.foreground }),
+        /* @__PURE__ */ jsx(Text, { style: styles.toolLabel, children: tile.label })
+      ] }, tile.id)) })
+    ] }) : null,
+    featuredLooks.length > 0 && onRecreateLook ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Looks", detail: "Recreate a studio style" }),
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.bleed, contentContainerStyle: styles.railContent, children: featuredLooks.map((look) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onRecreateLook(look), style: ({
+        pressed
+      }) => [styles.look, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Recreate ${look.name}`, children: [
         look.cover ? /* @__PURE__ */ jsx(Image, { source: {
           uri: look.cover
-        }, style: styles.lookCover, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.lookCover, styles.lookCoverFallback], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 18, color: "#94a3b8" }) }),
-        /* @__PURE__ */ jsx(Text, { style: styles.lookName, numberOfLines: 2, children: look.name })
+        }, style: styles.fill, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.fill, styles.centered], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 22, color: theme.mutedForeground }) }),
+        /* @__PURE__ */ jsx(View, { style: styles.lookCaption, children: /* @__PURE__ */ jsx(Text, { style: styles.lookName, numberOfLines: 2, children: look.name }) })
       ] }, look.id)) })
     ] }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.workHead, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.workTitle, children: "Your work" }),
-      filters.length > 0 ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.studioRow, children: WORK_FILTERS.filter((f) => filters.includes(f.id)).map((f) => {
-        const on = f.id === active;
-        return /* @__PURE__ */ jsx(Pressable, { onPress: () => setFilter(f.id), style: [styles.filterChip, on && styles.filterChipOn], accessibilityRole: "button", accessibilityState: {
-          selected: on
-        }, children: /* @__PURE__ */ jsx(Text, { style: [styles.filterLabel, on && styles.filterLabelOn], children: f.label }) }, f.id);
-      }) }) : null
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Your work", detail: work.length > 0 ? String(work.length) : void 0, style: styles.noMargin }),
+      filters.length > 0 ? /* @__PURE__ */ jsx(Segmented, { options: WORK_FILTERS.filter((f) => filters.includes(f.id)), value: active, onChange: setFilter, style: styles.segmented }) : null
     ] })
   ] });
   const renderTile = (item) => {
     var _a, _b;
     if (item.kind === "new") {
-      return /* @__PURE__ */ jsxs(Pressable, { onPress: onNewCanvas, style: [styles.tile, styles.tileDashed, {
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: onNewCanvas, style: ({
+        pressed
+      }) => [{
         width: tileWidth
-      }], accessibilityRole: "button", accessibilityLabel: "New canvas", children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.thumb, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 28, color: "#64748b" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.dashHint, children: "Start a blank canvas" })
-        ] }),
-        /* @__PURE__ */ jsx(View, { style: styles.meta, children: /* @__PURE__ */ jsx(Text, { style: styles.metaTitle, children: "New canvas" }) })
+      }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "New canvas", children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.cover, styles.coverNew], children: /* @__PURE__ */ jsx(View, { style: styles.newPlus, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 24, color: theme.primaryForeground }) }) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workTitle, children: "New canvas" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workMeta, children: "Start blank" })
       ] });
     }
     const {
@@ -146,69 +215,102 @@ function CanvasBoardsGrid({
       const noun = designNoun(design.doc);
       const title2 = ((_a = design.title) == null ? void 0 : _a.trim()) || `Untitled ${noun.toLowerCase()}`;
       const meta = [noun, pageCount(design.doc), relativeTime(design.savedAt)].filter(Boolean).join(" \xB7 ");
-      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpenDesign == null ? void 0 : onOpenDesign(design.channelId), style: [styles.tile, {
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpenDesign == null ? void 0 : onOpenDesign(design.channelId), style: ({
+        pressed
+      }) => [{
         width: tileWidth
-      }], accessibilityRole: "button", accessibilityLabel: `Open ${noun.toLowerCase()} ${title2}`, children: [
-        /* @__PURE__ */ jsx(View, { style: styles.thumb, children: /* @__PURE__ */ jsx(DesignThumb, { doc: design.doc, maxWidth: tileWidth - 24 }) }),
-        /* @__PURE__ */ jsxs(View, { style: styles.meta, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.metaTitle, numberOfLines: 1, children: title2 }),
-          /* @__PURE__ */ jsx(Text, { style: styles.metaSub, numberOfLines: 1, children: meta })
-        ] })
+      }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Open ${noun.toLowerCase()} ${title2}`, children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.cover, styles.centered], children: /* @__PURE__ */ jsx(DesignThumb, { doc: design.doc, maxWidth: tileWidth - SPACE.xl * 2, maxHeight: tileWidth - SPACE.xl * 2 }) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workTitle, numberOfLines: 1, children: title2 }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workMeta, numberOfLines: 1, children: meta })
       ] });
     }
     const {
       board
     } = entry;
     const cover = boardCover(board.board.items);
-    const title = !isUnsetBoardTitle(board.title) ? board.title : ((_b = board.board.items.find((it) => it.generatedAssetName)) == null ? void 0 : _b.generatedAssetName) || "Untitled";
-    return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpen(board.channelId), style: [styles.tile, {
+    const title = !isUnsetBoardTitle(board.title) ? board.title : ((_b = board.board.items.find((it) => it.generatedAssetName)) == null ? void 0 : _b.generatedAssetName) || "Untitled canvas";
+    return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpen(board.channelId), style: ({
+      pressed
+    }) => [{
       width: tileWidth
-    }], accessibilityRole: "button", children: [
-      /* @__PURE__ */ jsx(View, { style: styles.thumb, children: cover ? /* @__PURE__ */ jsx(BoardCover, { item: cover, runAction }, cover.src) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 28, color: "#94a3b8" }) }),
-      /* @__PURE__ */ jsxs(View, { style: styles.meta, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.metaTitle, numberOfLines: 1, children: title }),
-        /* @__PURE__ */ jsxs(Text, { style: styles.metaSub, children: [
-          "Canvas \xB7 ",
-          board.itemCount,
-          " item",
-          board.itemCount === 1 ? "" : "s",
-          " \xB7",
-          " ",
-          relativeTime(board.savedAt)
-        ] })
-      ] })
+    }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Open canvas ${title}`, children: [
+      /* @__PURE__ */ jsxs(View, { style: [styles.cover, styles.centered], children: [
+        cover ? /* @__PURE__ */ jsx(BoardCover, { item: cover, seed: board.channelId, runAction, renew }, cover.src) : /* @__PURE__ */ jsx(CoverPlaceholder, { seed: board.channelId, icon: "image-multiple-outline" }),
+        board.itemCount > 1 ? /* @__PURE__ */ jsx(View, { style: styles.countBadge, pointerEvents: "none", children: /* @__PURE__ */ jsx(Text, { style: styles.countBadgeText, children: board.itemCount }) }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Text, { style: styles.workTitle, numberOfLines: 1, children: title }),
+      /* @__PURE__ */ jsx(Text, { style: styles.workMeta, numberOfLines: 1, children: `Canvas \xB7 ${relativeTime(board.savedAt)}` })
     ] });
   };
-  return /* @__PURE__ */ jsxs(View, { style: styles.plane, children: [
-    /* @__PURE__ */ jsx(DotGrid, {}),
-    work.length === 0 ? /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.emptyWrap, showsVerticalScrollIndicator: false, children: [
-      header,
-      /* @__PURE__ */ jsxs(View, { style: styles.emptyCard, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.emptyTitle, children: "Your canvases will appear here" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.emptyDetail, children: "Every chat gets its own canvas. Generate an image, video, or audio and it lands on this board \u2014 come back here to reach the ones from your other chats." }),
-        /* @__PURE__ */ jsxs(Pressable, { onPress: onNewCanvas, style: styles.emptyCta, accessibilityRole: "button", children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#f8fafc" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.emptyCtaLabel, children: "New canvas" })
-        ] })
+  return /* @__PURE__ */ jsx(View, { style: styles.plane, children: work.length === 0 ? /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.list, showsVerticalScrollIndicator: false, children: [
+    header,
+    /* @__PURE__ */ jsxs(View, { style: styles.empty, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.emptyIcon, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-multiple-outline", size: 26, color: theme.foreground }) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.emptyTitle, children: "Nothing here yet" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.emptyDetail, children: "Every chat gets its own canvas. Generate an image, video or audio and it lands here." }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: onNewCanvas, style: ({
+        pressed
+      }) => [styles.emptyCta, pressedStyle(pressed)], accessibilityRole: "button", children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 18, color: theme.primaryForeground }),
+        /* @__PURE__ */ jsx(Text, { style: styles.emptyCtaLabel, children: "New canvas" })
       ] })
-    ] }) : /* @__PURE__ */ jsx(FlatList, { data: rows, keyExtractor: (pair) => pair.map((item) => item.id).join(":"), contentContainerStyle: styles.gridList, showsVerticalScrollIndicator: false, onEndReached: loadMore, onEndReachedThreshold: 0.4, ListHeaderComponent: header, renderItem: ({
-      item: pair
-    }) => /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-      pair.map((entry) => /* @__PURE__ */ jsx(View, { children: renderTile(entry) }, entry.id)),
-      pair.length < 2 ? /* @__PURE__ */ jsx(View, { style: {
-        width: tileWidth
-      } }) : null
-    ] }) })
+    ] })
+  ] }) : /* @__PURE__ */ jsx(FlatList, { data: rows, keyExtractor: (pair) => pair.map((item) => item.id).join(":"), contentContainerStyle: styles.list, showsVerticalScrollIndicator: false, onEndReached: loadMore, onEndReachedThreshold: 0.4, ListHeaderComponent: header, renderItem: ({
+    item: pair
+  }) => /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    pair.map((entry) => /* @__PURE__ */ jsx(View, { children: renderTile(entry) }, entry.id)),
+    pair.length < 2 ? /* @__PURE__ */ jsx(View, { style: {
+      width: tileWidth
+    } }) : null
+  ] }) }) });
+}
+function FormatTile({
+  tile,
+  onPress
+}) {
+  var _a;
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const shape = (_a = FORMAT_SHAPE[tile.id]) != null ? _a : {
+    w: 1,
+    h: 1
+  };
+  const box = 56;
+  const scale = box / Math.max(shape.w, shape.h);
+  const pageW = shape.w * scale;
+  const pageH = shape.h * scale;
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
+    pressed
+  }) => [styles.format, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `${tile.label}: ${tile.hint}`, testID: `create-tile-${tile.id}`, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.formatWell, children: [
+      shape.stack ? /* @__PURE__ */ jsx(View, { style: [styles.formatPage, styles.formatPageBack, {
+        width: pageW,
+        height: pageH
+      }] }) : null,
+      /* @__PURE__ */ jsx(View, { style: [styles.formatPage, {
+        width: pageW,
+        height: pageH
+      }, shape.round && {
+        borderRadius: pageW / 2
+      }], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tile.icon, size: 18, color: theme.mutedForeground }) })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { style: styles.formatLabel, numberOfLines: 1, children: tile.label })
   ] });
 }
 function BoardCover({
   item,
-  runAction
+  seed,
+  runAction,
+  renew
 }) {
-  const [failed, setFailed] = useState(false);
-  const [frame, setFrame] = useState(item.type === "video" ? void 0 : item.src);
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const isVideo = item.type === "video";
+  const [frame, setFrame] = useState(isVideo ? void 0 : item.src);
+  const [loaded, setLoaded] = useState(false);
   useEffect(() => {
-    if (item.type !== "video") return void 0;
+    if (!isVideo) return void 0;
     if (!runAction) {
       setFrame(null);
       return void 0;
@@ -220,34 +322,62 @@ function BoardCover({
     return () => {
       live = false;
     };
-  }, [item.src, item.type, runAction]);
-  const isVideo = item.type === "video";
-  if (failed || frame === null) {
-    return /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: isVideo ? "movie-outline" : "image-off-outline", size: 28, color: "#94a3b8" });
+  }, [item.src, isVideo, runAction]);
+  const media = useMediaSource(frame != null ? frame : "", "image", renew);
+  const [stalled, setStalled] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    setStalled(false);
+    const timer = setTimeout(() => setStalled(true), COVER_STALL_MS);
+    return () => clearTimeout(timer);
+  }, [media.key]);
+  if (frame === null || media.phase === "broken") {
+    return /* @__PURE__ */ jsx(CoverPlaceholder, { seed, icon: isVideo ? "play" : "image-outline", label: isVideo ? "Video" : void 0 });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    loaded && media.phase === "ok" ? null : stalled ? /* @__PURE__ */ jsx(CoverPlaceholder, { seed, icon: isVideo ? "play" : "image-outline" }) : /* @__PURE__ */ jsx(Skeleton, {}),
     frame ? /* @__PURE__ */ jsx(Image, { source: {
-      uri: frame
-    }, style: styles.thumbImage, contentFit: "cover", onError: () => setFailed(true) }) : null,
-    isVideo ? /* @__PURE__ */ jsx(View, { style: styles.playBadge, pointerEvents: "none", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 18, color: "#f8fafc" }) }) : null
+      uri: media.src
+    }, style: styles.fill, contentFit: "cover", transition: 200, onLoad: () => setLoaded(true), onError: media.onError }, media.key) : null,
+    isVideo && loaded ? /* @__PURE__ */ jsx(View, { style: styles.playBadge, pointerEvents: "none", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 16, color: "#fafafa" }) }) : null
   ] });
 }
 function DesignThumb({
   doc,
-  maxWidth
+  maxWidth,
+  maxHeight
 }) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
   const page = doc.pages[0];
   if (!page || !(page.width > 0) || !(page.height > 0)) {
-    return /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "shape-outline", size: 28, color: "#94a3b8" });
+    return /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "shape-outline", size: 28, color: theme.mutedForeground });
   }
-  const maxH = THUMB_HEIGHT - 24;
-  const scale = Math.min(maxWidth / page.width, maxH / page.height);
+  const scale = Math.min(maxWidth / page.width, maxHeight / page.height);
   const layers = [...page.layers].sort((a, b) => a.zIndex - b.zIndex);
   return /* @__PURE__ */ jsx(View, { style: [styles.designPage, {
     width: page.width * scale,
     height: page.height * scale,
     backgroundColor: page.background || "#ffffff"
-  }], pointerEvents: "none", children: layers.map((layer) => /* @__PURE__ */ jsx(DesignThumbLayer, { layer, scale }, layer.id)) });
+  }], pointerEvents: "none", children: layers.length === 0 ? (
+    // An untouched page: a faint layout sketch (title, lines, picture) instead of a blank sheet.
+    /* @__PURE__ */ jsxs(View, { style: styles.sketch, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.sketchBar, {
+        width: "62%",
+        height: "9%"
+      }] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.sketchBar, {
+        width: "86%",
+        height: "5%"
+      }] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.sketchBar, {
+        width: "70%",
+        height: "5%"
+      }] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.sketchBar, styles.sketchBlock], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 16, color: "#b4b4bb" }) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.blankPage, children: designNoun(doc) })
+    ] })
+  ) : layers.map((layer) => /* @__PURE__ */ jsx(DesignThumbLayer, { layer, scale }, layer.id)) });
 }
 function DesignThumbLayer({
   layer,
@@ -280,326 +410,303 @@ function DesignThumbLayer({
     textAlign: layer.align
   }], numberOfLines: 3, children: layer.text });
 }
-function DotGrid() {
-  return /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.dots, children: Array.from({
-    length: 18
-  }).map((_, row) => /* @__PURE__ */ jsx(View, { style: styles.dotRow, children: Array.from({
-    length: 16
-  }).map((__, col) => /* @__PURE__ */ jsx(View, { style: styles.dotCell, children: /* @__PURE__ */ jsx(View, { style: styles.dot }) }, col)) }, row)) });
-}
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   plane: {
     flex: 1,
-    backgroundColor: "#eef1f4",
-    overflow: "hidden"
+    backgroundColor: theme.background
   },
-  dots: __spreadValues({}, StyleSheet.absoluteFillObject),
-  dotRow: {
-    flexDirection: "row",
-    height: 22
+  list: {
+    paddingHorizontal: GUTTER,
+    paddingTop: SPACE.sm,
+    paddingBottom: SPACE.xxl
+  },
+  header: {
+    alignSelf: "stretch",
+    width: "100%"
   },
-  dotCell: {
-    width: 22,
-    height: 22,
+  titleRow: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "space-between",
+    marginBottom: SPACE.md
+  },
+  title: __spreadProps(__spreadValues({}, TYPE.display), {
+    color: theme.foreground
+  }),
+  toggle: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.card
   },
-  dot: {
-    width: 2,
-    height: 2,
-    borderRadius: 1,
-    backgroundColor: "rgba(15,23,42,0.14)"
+  prompt: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.md,
+    minHeight: 56,
+    paddingLeft: SPACE.lg,
+    paddingRight: SPACE.sm,
+    borderRadius: RADIUS.xl,
+    backgroundColor: theme.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border,
+    marginBottom: SPACE.xl
   },
-  emptyWrap: {
-    flexGrow: 1,
+  promptText: __spreadProps(__spreadValues({}, TYPE.body), {
+    flex: 1,
+    color: theme.mutedForeground
+  }),
+  promptGo: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
     alignItems: "center",
-    padding: GUTTER,
-    paddingBottom: 32
+    justifyContent: "center",
+    backgroundColor: theme.primary
   },
-  emptyCard: {
-    width: "100%",
-    maxWidth: 420,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: "rgba(15,23,42,0.08)",
-    backgroundColor: "rgba(255,255,255,0.96)",
-    paddingHorizontal: 28,
-    paddingVertical: 36,
+  section: {
+    marginBottom: SPACE.xl
+  },
+  bleed: {
+    marginHorizontal: -16
+  },
+  railContent: {
+    paddingHorizontal: GUTTER,
+    gap: SPACE.sm
+  },
+  lanes: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.sm
+  },
+  lane: {
+    height: 92,
+    borderRadius: RADIUS.lg,
+    padding: SPACE.md,
+    justifyContent: "space-between"
+  },
+  laneLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    lineHeight: 17
+  }),
+  format: {
+    width: 84,
     alignItems: "center",
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.06,
-    shadowRadius: 16,
-    shadowOffset: {
-      width: 0,
-      height: 8
-    },
-    elevation: 2
+    gap: SPACE.sm
   },
-  emptyTitle: {
-    fontSize: 20,
-    fontWeight: "600",
-    color: "#0f172a",
-    textAlign: "center"
+  formatWell: {
+    width: 84,
+    height: 84,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.card,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  emptyDetail: {
-    marginTop: 8,
-    fontSize: 14,
-    lineHeight: 20,
-    color: "#64748b",
-    textAlign: "center"
+  formatPage: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 4,
+    backgroundColor: theme.isDark ? theme.secondary : theme.surface,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.borderStrong
   },
-  emptyCta: {
-    marginTop: 22,
+  formatPageBack: {
+    position: "absolute",
+    transform: [{
+      translateX: 6
+    }, {
+      translateY: -6
+    }],
+    opacity: 0.6
+  },
+  formatLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.foreground
+  }),
+  tool: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    backgroundColor: "#0f172a",
-    paddingHorizontal: 20,
-    paddingVertical: 11,
-    borderRadius: 999
-  },
-  emptyCtaLabel: {
-    color: "#f8fafc",
-    fontSize: 14,
-    fontWeight: "600"
+    gap: SPACE.sm,
+    minHeight: 44,
+    paddingHorizontal: SPACE.lg - 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
+  },
+  toolLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
+  look: {
+    width: 136,
+    height: 176,
+    borderRadius: RADIUS.lg,
+    overflow: "hidden",
+    backgroundColor: theme.card
+  },
+  lookCaption: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingHorizontal: SPACE.md - 2,
+    paddingVertical: SPACE.sm + 2,
+    backgroundColor: "rgba(10,10,10,0.55)"
+  },
+  lookName: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: "#fafafa"
+  }),
+  workHead: {
+    gap: SPACE.md,
+    marginBottom: SPACE.lg
   },
-  gridList: {
-    padding: GUTTER,
-    paddingBottom: 32
+  noMargin: {
+    marginBottom: 0
+  },
+  segmented: {
+    flexGrow: 0,
+    alignSelf: "flex-start"
   },
   row: {
     flexDirection: "row",
     gap: GUTTER,
-    marginBottom: GUTTER
+    marginBottom: SPACE.xl - 4
   },
-  tile: {
-    borderRadius: TILE_RADIUS,
+  cover: {
+    aspectRatio: 1,
+    borderRadius: RADIUS.lg,
     overflow: "hidden",
-    backgroundColor: "#ffffff",
-    borderWidth: 1,
-    borderColor: "rgba(15,23,42,0.08)",
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.05,
-    shadowRadius: 8,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    elevation: 1
+    backgroundColor: theme.card,
+    marginBottom: SPACE.sm
   },
-  tileDashed: {
+  coverNew: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1.5,
     borderStyle: "dashed",
-    backgroundColor: "rgba(255,255,255,0.7)"
+    borderColor: theme.borderStrong,
+    backgroundColor: "transparent"
   },
-  thumb: {
-    height: THUMB_HEIGHT,
+  newPlus: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#f1f5f9",
-    overflow: "hidden",
-    gap: 8
+    backgroundColor: theme.primary
+  },
+  centered: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fill: __spreadValues({}, StyleSheet.absoluteFillObject),
+  workTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 14,
+    color: theme.foreground
+  }),
+  workMeta: __spreadProps(__spreadValues({}, TYPE.caption), {
+    marginTop: 1,
+    color: theme.mutedForeground
+  }),
+  countBadge: {
+    position: "absolute",
+    top: SPACE.sm,
+    right: SPACE.sm,
+    minWidth: 24,
+    height: 24,
+    paddingHorizontal: 7,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(10,10,10,0.55)"
+  },
+  countBadgeText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#fafafa"
   },
-  thumbImage: __spreadValues({}, StyleSheet.absoluteFillObject),
   playBadge: {
     position: "absolute",
-    right: 8,
-    bottom: 8,
+    left: SPACE.sm,
+    bottom: SPACE.sm,
     width: 28,
     height: 28,
     borderRadius: 14,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "rgba(15,23,42,0.55)"
+    backgroundColor: "rgba(10,10,10,0.55)"
   },
   designPage: {
     overflow: "hidden",
-    borderRadius: 2,
-    shadowColor: "#0f172a",
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
+    borderRadius: 3,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0 : 0.1,
+    shadowRadius: 6,
     shadowOffset: {
       width: 0,
-      height: 1
+      height: 2
     },
-    elevation: 1
+    elevation: 2
   },
-  dashHint: {
-    fontSize: 12,
-    color: "#64748b"
+  // The sketch sits on the design's own (usually white) page, so its ink is fixed, not themed.
+  sketch: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    padding: "10%",
+    gap: 6
+  }),
+  sketchBar: {
+    borderRadius: 3,
+    backgroundColor: "#ececef"
   },
-  header: {
-    alignSelf: "stretch",
+  sketchBlock: {
+    flex: 1,
     width: "100%",
-    marginBottom: 4
-  },
-  createBlock: {
-    marginBottom: 16
-  },
-  createHead: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: 12,
-    marginBottom: 12
-  },
-  createTitle: {
-    fontSize: 22,
-    fontWeight: "600",
-    color: "#0f172a"
-  },
-  createSub: {
-    marginTop: 2,
-    fontSize: 13,
-    color: "#64748b"
-  },
-  flexShrink: {
-    flexShrink: 1
-  },
-  group: {
-    marginBottom: 14
-  },
-  groupTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    paddingBottom: 6,
-    marginBottom: 8,
-    borderBottomWidth: 1
-  },
-  groupTiles: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    columnGap: GUTTER,
-    rowGap: 4
-  },
-  createTile: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 10,
-    minHeight: 48,
-    paddingVertical: 6
-  },
-  createIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
+    marginTop: 4,
     alignItems: "center",
     justifyContent: "center"
   },
-  createLabel: {
-    fontSize: 14,
+  blankPage: {
+    fontSize: 10,
     fontWeight: "600",
-    color: "#0f172a"
-  },
-  createHint: {
-    marginTop: 1,
-    fontSize: 11,
-    lineHeight: 14,
-    color: "#64748b"
-  },
-  composerBlock: {
-    marginBottom: 16,
-    gap: 8
-  },
-  lookChip: {
-    width: 112,
-    borderRadius: 12,
-    overflow: "hidden",
-    backgroundColor: "#ffffff",
-    borderWidth: 1,
-    borderColor: "rgba(15,23,42,0.08)"
-  },
-  lookCover: {
-    width: "100%",
-    height: 72,
-    backgroundColor: "#f1f5f9"
+    color: "#a1a1aa",
+    textAlign: "center"
   },
-  lookCoverFallback: {
+  empty: {
     alignItems: "center",
-    justifyContent: "center"
-  },
-  lookName: {
-    paddingHorizontal: 8,
-    paddingVertical: 8,
-    fontSize: 11,
-    fontWeight: "600",
-    color: "#0f172a"
-  },
-  workHead: {
-    gap: 8,
-    marginBottom: 12
-  },
-  workTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#0f172a"
-  },
-  filterChip: {
-    backgroundColor: "#ffffff",
-    borderWidth: 1,
-    borderColor: "rgba(15,23,42,0.1)",
-    borderRadius: 999,
-    paddingHorizontal: 14,
-    paddingVertical: 7
-  },
-  filterChipOn: {
-    backgroundColor: "#0f172a",
-    borderColor: "#0f172a"
-  },
-  filterLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#0f172a"
-  },
-  filterLabelOn: {
-    color: "#f8fafc"
-  },
-  studioLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    letterSpacing: 0.6,
-    textTransform: "uppercase",
-    color: "#64748b",
-    flexShrink: 1
-  },
-  askAgentBtn: {
-    flexDirection: "row",
+    paddingVertical: SPACE.xxl,
+    paddingHorizontal: SPACE.xl,
+    borderRadius: RADIUS.xl,
+    backgroundColor: theme.card
+  },
+  emptyIcon: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
     alignItems: "center",
-    gap: 4,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#e2e8f0",
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    backgroundColor: "#ffffff",
-    flexShrink: 0
-  },
-  askAgentLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: "#64748b"
-  },
-  studioRow: {
-    flexDirection: "row",
-    gap: 8,
-    paddingBottom: 4
-  },
-  meta: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "rgba(15,23,42,0.08)",
-    paddingHorizontal: 12,
-    paddingVertical: 10
+    justifyContent: "center",
+    backgroundColor: theme.background,
+    marginBottom: SPACE.md
   },
-  metaTitle: {
+  emptyTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground,
+    textAlign: "center"
+  }),
+  emptyDetail: __spreadProps(__spreadValues({}, TYPE.body), {
     fontSize: 14,
-    fontWeight: "600",
-    color: "#0f172a"
-  },
-  metaSub: {
-    marginTop: 2,
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.4,
-    textTransform: "uppercase",
-    color: "#94a3b8"
-  }
-});export{CanvasBoardsGrid};//# sourceMappingURL=CanvasBoardsGrid.js.map
+    marginTop: SPACE.xs,
+    color: theme.mutedForeground,
+    textAlign: "center",
+    maxWidth: 300
+  }),
+  emptyCta: {
+    marginTop: SPACE.lg + 2,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm,
+    minHeight: 44,
+    paddingHorizontal: SPACE.xl - 4,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.primary
+  },
+  emptyCtaLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 15,
+    color: theme.primaryForeground
+  })
+}));export{CanvasBoardsGrid};//# sourceMappingURL=CanvasBoardsGrid.js.map