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

package/lib/features/canvas/CanvasBoardsGrid.js

@@ -1,4 +1,4 @@
-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;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useMemo,useEffect,useCallback,useRef}from'react';import {StyleSheet,useWindowDimensions,View,Text,ScrollView,FlatList,Linking}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {DesignPageView}from'../design/render/DesignPageView.js';import {isUnsetBoardTitle}from'./canvasCore.js';import {CANVAS_BOARD_PAGE_SIZE}from'./canvasBoardsCatalog.js';import {mergeWork,availableFilters,matchesFilter,collapsedWorkCount,WORK_FILTERS,showAllLabel,WORK_ARTIFACTS,studioNoun,designNoun,pageCount,boardCover,videoCoverFrame}from'./homeWork.js';import {HeroComposer}from'./home/HeroComposer.js';import {LookDetail}from'./home/LookDetail.js';import {LoopingVideo}from'./home/LoopingVideo.js';import {pickPlayingRegion,centredIndex}from'./home/heroShots.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,Skeleton,CoverPlaceholder,TYPE}from'./canvasUi.js';import {docPreviewLines}from'../docs/blocks.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -59,6 +59,11 @@ const LANE_HUES = {
   }
 };
 const FORMAT_SHAPE = {
+  presentation: {
+    w: 16,
+    h: 9,
+    stack: true
+  },
   social: {
     w: 1,
     h: 1
@@ -72,28 +77,77 @@ const FORMAT_SHAPE = {
     w: 3,
     h: 4
   },
+  "business-card": {
+    w: 7,
+    h: 4,
+    stack: true
+  },
   logo: {
     w: 1,
     h: 1,
     round: true
   },
+  banner: {
+    w: 3,
+    h: 1
+  },
+  brochure: {
+    w: 11,
+    h: 8.5,
+    stack: true
+  },
+  branding: {
+    w: 8.5,
+    h: 11
+  },
+  doc: {
+    w: 8.5,
+    h: 11
+  },
+  custom: {
+    w: 5,
+    h: 4
+  },
   tshirt: {
     w: 5,
     h: 6
   }
 };
+const TEMPLATE_HEIGHT = 176;
+const TEMPLATE_SKELETON_RATIOS = [210 / 297, 16 / 9];
+const SHOWCASE_WIDTH = 248;
 function CanvasBoardsGrid({
   boards,
   onOpen,
   onNewCanvas,
   designs = [],
   onOpenDesign,
+  studioDesigns = [],
+  onOpenStudioDesign,
+  docs = [],
+  onOpenDoc,
   onAskAgent,
   createGroups = [],
   onCreate,
   featuredLooks = [],
   onRecreateLook,
-  runAction
+  onOpenCategory,
+  templateRails,
+  onOpenTemplate,
+  onSeeAllTemplates,
+  onRetryTemplates,
+  showcase = [],
+  onUseShowcasePrompt,
+  runAction,
+  onStartWithPrompt,
+  onPickReference,
+  onBrowseTemplates,
+  studioMore = false,
+  studioError = null,
+  onRetryStudioDesigns,
+  onExpandWork,
+  currentSessionId,
+  onOpenSession
 }) {
   const theme = useCanvasTheme();
   const styles = makeStyles(theme);
@@ -103,31 +157,108 @@ function CanvasBoardsGrid({
   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 [expanded, setExpanded] = useState(false);
   const [filter, setFilter] = useState("all");
+  const [lookIndex, setLookIndex] = useState(-1);
   const renew = useMemo(() => renewMediaUrl(runAction), [runAction]);
-  const work = useMemo(() => mergeWork(boards, designs), [boards, designs]);
+  const work = useMemo(() => mergeWork(boards, designs, studioDesigns, docs), [boards, designs, studioDesigns, docs]);
   const filters = useMemo(() => availableFilters(work), [work]);
   const active = filters.includes(filter) ? filter : "all";
   const shown = useMemo(() => work.filter((item) => matchesFilter(item, active)), [work, active]);
   useEffect(() => {
     setVisible(CANVAS_BOARD_PAGE_SIZE);
-  }, [boards, designs, active]);
-  const tiles = useMemo(() => [{
+  }, [boards, designs, studioDesigns, docs, active]);
+  const startSession = currentSessionId && onOpenSession && (active === "all" || active === "canvases") && !boards.some((b) => b.channelId === currentSessionId) ? currentSessionId : null;
+  const lead = useMemo(() => [{
     kind: "new",
     id: "__new__"
-  }, ...shown.slice(0, visible).map((entry) => ({
-    kind: "work",
-    id: `${entry.type}:${entry.id}`,
-    work: entry
-  }))], [shown, visible]);
+  }, ...startSession ? [{
+    kind: "start",
+    id: "__start__",
+    sessionId: startSession
+  }] : []], [startSession]);
+  const collapsedCount = collapsedWorkCount(2);
+  const totalTiles = lead.length + shown.length;
+  const tiles = useMemo(() => {
+    const limit = expanded ? visible : Math.max(0, collapsedCount - lead.length);
+    return [...lead, ...shown.slice(0, limit).map((entry) => ({
+      kind: "work",
+      id: `${entry.type}:${entry.id}`,
+      work: entry
+    }))];
+  }, [lead, shown, visible, expanded, collapsedCount]);
+  const toggleExpanded = useCallback(() => {
+    setExpanded((was) => {
+      onExpandWork == null ? void 0 : onExpandWork(!was);
+      return !was;
+    });
+    setVisible(CANVAS_BOARD_PAGE_SIZE);
+  }, [onExpandWork]);
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const regions = useRef({
+    hero: {
+      top: 0,
+      height: 0
+    },
+    showcase: {
+      top: 0,
+      height: 0
+    }
+  });
+  const viewport = useRef({
+    top: 0,
+    height: windowHeight
+  });
+  const [playing, setPlaying] = useState(null);
+  const [showcaseIndex, setShowcaseIndex] = useState(0);
+  const govern = useCallback(() => {
+    const next = pickPlayingRegion(Object.keys(regions.current).map((id) => __spreadValues({
+      id
+    }, regions.current[id])), viewport.current.top, viewport.current.height);
+    setPlaying((prev) => prev === next ? prev : next);
+  }, []);
+  const measure = (id) => (e) => {
+    const {
+      y,
+      height
+    } = e.nativeEvent.layout;
+    regions.current[id] = {
+      top: y + SPACE.sm,
+      height
+    };
+    govern();
+  };
+  const onListScroll = useCallback((e) => {
+    const {
+      contentOffset,
+      layoutMeasurement
+    } = e.nativeEvent;
+    viewport.current = {
+      top: contentOffset.y,
+      height: layoutMeasurement.height
+    };
+    govern();
+  }, [govern]);
+  const onShowcaseScroll = (e) => {
+    const {
+      contentOffset,
+      layoutMeasurement
+    } = e.nativeEvent;
+    const next = centredIndex(contentOffset.x, layoutMeasurement.width, SHOWCASE_WIDTH, SPACE.sm, GUTTER, showcase.length);
+    setShowcaseIndex((prev) => prev === next ? prev : next);
+  };
+  const playingNow = lookIndex >= 0 ? null : playing;
   const rows = useMemo(() => {
     const chunked = [];
     for (let i = 0; i < tiles.length; i += 2) chunked.push(tiles.slice(i, i + 2));
     return chunked;
   }, [tiles]);
   const loadMore = useCallback(() => {
+    if (!expanded) return;
     setVisible((count) => count >= shown.length ? count : Math.min(count + CANVAS_BOARD_PAGE_SIZE, shown.length));
-  }, [shown.length]);
+  }, [shown.length, expanded]);
   const group = (id) => createGroups.find((g) => g.id === id);
   const generate = group("generate");
   const edit = group("edit");
@@ -150,22 +281,33 @@ function CanvasBoardsGrid({
   const header = /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
     /* @__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 })
+      /* @__PURE__ */ jsxs(View, { style: styles.titleActions, children: [
+        onAskAgent && onStartWithPrompt ? (
+          // The hero is the prompt box; AI Chat stays one tap away without a second box.
+          /* @__PURE__ */ jsx(Pressable, { onPress: onAskAgent, style: ({
+            pressed
+          }) => [styles.toggle, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Open AI Chat", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 20, color: theme.foreground }) })
+        ) : null,
+        /* @__PURE__ */ jsx(CanvasThemeToggle, { size: 20, style: styles.toggle })
+      ] })
     ] }),
-    onAskAgent ? /* @__PURE__ */ jsxs(Pressable, { onPress: onAskAgent, style: ({
+    onAskAgent && !onStartWithPrompt ? /* @__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,
+    onStartWithPrompt ? /* @__PURE__ */ jsx(View, { onLayout: measure("hero"), children: /* @__PURE__ */ jsx(HeroComposer, { featuredLooks, showcase, playing: playingNow === "hero", onStartWithPrompt, onPickReference, onBrowseTemplates }) }) : 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)) })
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.bleed, contentContainerStyle: styles.railContent, children: designGroup.tiles.map((tile) => /* @__PURE__ */ jsx(FormatTile, { tile, onPress: () => {
+        if (!(onOpenCategory == null ? void 0 : onOpenCategory(tile.id))) onCreate(tile.action, tile.id);
+      } }, tile.id)) })
     ] }) : null,
     onCreate && edit ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
       /* @__PURE__ */ jsx(SectionHeader, { title: "Edit & produce" }),
@@ -178,22 +320,44 @@ function CanvasBoardsGrid({
     ] }) : 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: ({
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.bleed, contentContainerStyle: styles.railContent, children: featuredLooks.map((look, i) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setLookIndex(i), style: ({
         pressed
-      }) => [styles.look, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Recreate ${look.name}`, children: [
+      }) => [styles.look, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Open look ${look.name}`, children: [
         look.cover ? /* @__PURE__ */ jsx(Image, { source: {
           uri: look.cover
-        }, 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 }) }),
+        }, style: StyleSheet.absoluteFill, 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,
+    templateRails && onOpenTemplate ? /* @__PURE__ */ jsx(TemplateRails, { state: templateRails, onOpenTemplate, onSeeAll: onSeeAllTemplates, onRetry: onRetryTemplates }) : null,
+    showcase.length > 0 && onUseShowcasePrompt ? /* @__PURE__ */ jsxs(View, { style: styles.section, onLayout: measure("showcase"), children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Made with Seedance 2.0" }),
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.bleed, contentContainerStyle: styles.railContent, onScroll: onShowcaseScroll, scrollEventThrottle: 100, children: showcase.map((clip, i) => /* @__PURE__ */ jsx(ShowcaseTile, { clip, playing: playingNow === "showcase" && i === showcaseIndex, onUse: () => onUseShowcasePrompt(clip) }, clip.id)) })
+    ] }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.workHead, children: [
       /* @__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
-    ] })
+    ] }),
+    studioError ? /* @__PURE__ */ jsxs(View, { style: styles.railError, accessibilityRole: "alert", children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.railErrorText, children: "Couldn't load your designs." }),
+      onRetryStudioDesigns ? /* @__PURE__ */ jsxs(Pressable, { onPress: onRetryStudioDesigns, hitSlop: 8, style: ({
+        pressed
+      }) => [styles.retry, pressedStyle(pressed)], accessibilityRole: "button", children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "refresh", size: 16, color: theme.foreground }),
+        /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: "Retry" })
+      ] }) : null
+    ] }) : null
   ] });
+  const footer = totalTiles > collapsedCount || expanded ? /* @__PURE__ */ jsxs(View, { style: styles.workFooter, children: [
+    /* @__PURE__ */ jsx(Pressable, { onPress: toggleExpanded, style: ({
+      pressed
+    }) => [styles.showAll, pressedStyle(pressed)], accessibilityRole: "button", accessibilityState: {
+      expanded
+    }, testID: "your-work-show-all", children: /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: expanded ? "Show less" : showAllLabel(shown.length, studioMore) }) }),
+    expanded && studioMore ? /* @__PURE__ */ jsx(Text, { style: styles.workNote, children: `Showing your ${WORK_ARTIFACTS.expanded} most recent designs of each kind.` }) : null
+  ] }) : null;
   const renderTile = (item) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (item.kind === "new") {
       return /* @__PURE__ */ jsxs(Pressable, { onPress: onNewCanvas, style: ({
         pressed
@@ -205,15 +369,59 @@ function CanvasBoardsGrid({
         /* @__PURE__ */ jsx(Text, { style: styles.workMeta, children: "Start blank" })
       ] });
     }
+    if (item.kind === "start") {
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpenSession == null ? void 0 : onOpenSession(item.sessionId), style: ({
+        pressed
+      }) => [{
+        width: tileWidth
+      }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Open this chat's canvas", children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.cover, styles.coverNew], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 26, color: theme.mutedForeground }) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workTitle, children: "This chat's canvas" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workMeta, children: "Canvas \xB7 Start creating here" })
+      ] });
+    }
     const {
       work: entry
     } = item;
+    if (entry.type === "doc") {
+      const title2 = ((_a = entry.doc.title) == null ? void 0 : _a.trim()) || "Untitled doc";
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpenDoc == null ? void 0 : onOpenDoc(entry.doc.id), style: ({
+        pressed
+      }) => [{
+        width: tileWidth
+      }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Open doc ${title2}`, children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.cover, styles.centered], children: /* @__PURE__ */ jsx(DocPaper, { blocks: entry.doc.doc.blocks, title: title2, height: tileWidth - SPACE.lg * 2 }) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workTitle, numberOfLines: 1, children: title2 }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workMeta, numberOfLines: 1, children: `Doc \xB7 ${relativeTime(entry.doc.updatedAt)}` })
+      ] });
+    }
+    if (entry.type === "studio") {
+      const {
+        doc,
+        title: title2
+      } = entry.studio;
+      const page = doc.pages[0];
+      const frame = tileWidth - SPACE.xl * 2;
+      const ratio = doc.pageHeight / doc.pageWidth;
+      const pageW = ratio > 1 ? frame / ratio : frame;
+      const noun = studioNoun(entry.studio);
+      const meta = [noun, doc.pages.length > 1 ? `${doc.pages.length} pages` : "", relativeTime(entry.studio.updatedAt)].filter(Boolean).join(" \xB7 ");
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpenStudioDesign == null ? void 0 : onOpenStudioDesign(entry.studio.id), style: ({
+        pressed
+      }) => [{
+        width: tileWidth
+      }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Open ${noun.toLowerCase()} ${title2}`, children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.cover, styles.centered], children: page ? /* @__PURE__ */ jsx(DesignPageView, { doc, page, width: pageW }) : null }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workTitle, numberOfLines: 1, children: title2 || "Untitled design" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.workMeta, numberOfLines: 1, children: meta })
+      ] });
+    }
     if (entry.type === "design") {
       const {
         design
       } = entry;
       const noun = designNoun(design.doc);
-      const title2 = ((_a = design.title) == null ? void 0 : _a.trim()) || `Untitled ${noun.toLowerCase()}`;
+      const title2 = ((_b = design.title) == null ? void 0 : _b.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: ({
         pressed
@@ -229,7 +437,7 @@ function CanvasBoardsGrid({
       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 canvas";
+    const title = !isUnsetBoardTitle(board.title) ? board.title : ((_c = board.board.items.find((it) => it.generatedAssetName)) == null ? void 0 : _c.generatedAssetName) || "Untitled canvas";
     return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpen(board.channelId), style: ({
       pressed
     }) => [{
@@ -243,27 +451,117 @@ function CanvasBoardsGrid({
       /* @__PURE__ */ jsx(Text, { style: styles.workMeta, numberOfLines: 1, children: `Canvas \xB7 ${relativeTime(board.savedAt)}` })
     ] });
   };
-  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" })
+  return /* @__PURE__ */ jsxs(View, { style: styles.plane, children: [
+    work.length === 0 ? /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.list, showsVerticalScrollIndicator: false, onScroll: onListScroll, scrollEventThrottle: 100, 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.list, showsVerticalScrollIndicator: false, onEndReached: loadMore, onEndReachedThreshold: 0.4, onScroll: onListScroll, scrollEventThrottle: 100, ListHeaderComponent: header, ListFooterComponent: footer, 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
+    ] }) }),
+    onRecreateLook ? /* @__PURE__ */ jsx(LookDetail, { looks: featuredLooks, index: lookIndex, onIndexChange: setLookIndex, onRecreate: (look) => {
+      setLookIndex(-1);
+      onRecreateLook(look);
+    }, onClose: () => setLookIndex(-1) }) : null
+  ] });
+}
+function TemplateRails({
+  state,
+  onOpenTemplate,
+  onSeeAll,
+  onRetry
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const count = state.rows[0].length + state.rows[1].length;
+  const pending = state.status === "loading";
+  if (state.status === "ready" && count === 0) return null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+    /* @__PURE__ */ jsx(SectionHeader, { title: "Templates for you", action: onSeeAll ? "See all" : void 0, onAction: onSeeAll }),
+    state.status === "failed" ? /* @__PURE__ */ jsxs(View, { style: styles.railError, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.railErrorText, children: count ? "Some templates couldn't load." : "Templates couldn't load." }),
+      onRetry ? /* @__PURE__ */ jsxs(Pressable, { onPress: onRetry, hitSlop: 8, style: ({
+        pressed
+      }) => [styles.retry, pressedStyle(pressed)], accessibilityRole: "button", children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "refresh", size: 16, color: theme.foreground }),
+        /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: "Retry" })
+      ] }) : null
+    ] }) : null,
+    state.rows.map((row, index) => row.length || pending ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: [styles.bleed, index === 0 && styles.templateRowGap], contentContainerStyle: styles.railContent, children: [
+      row.map((card) => /* @__PURE__ */ jsx(TemplateCover, { card, onPress: () => onOpenTemplate(card.id) }, card.id)),
+      pending ? Array.from({
+        length: row.length ? 2 : 4
+      }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { radius: RADIUS.md, style: {
+        width: Math.round(TEMPLATE_HEIGHT * TEMPLATE_SKELETON_RATIOS[(i + index) % TEMPLATE_SKELETON_RATIOS.length]),
+        height: TEMPLATE_HEIGHT
+      } }, `skeleton-${i}`)) : null
+    ] }, index) : null)
+  ] });
+}
+function TemplateCover({
+  card,
+  onPress
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [loaded, setLoaded] = useState(false);
+  const width = Math.min(Math.round(TEMPLATE_HEIGHT * card.pageWidth / card.pageHeight), TEMPLATE_HEIGHT * 2);
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
+    pressed
+  }) => [styles.templateCover, {
+    width,
+    height: TEMPLATE_HEIGHT
+  }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Use template ${card.title}`, children: [
+    loaded ? null : /* @__PURE__ */ jsx(Skeleton, {}),
+    /* @__PURE__ */ jsx(Image, { source: {
+      uri: card.coverUrl
+    }, style: StyleSheet.absoluteFill, contentFit: "contain", transition: 150, onLoad: () => setLoaded(true) })
+  ] });
+}
+function ShowcaseTile({
+  clip,
+  playing,
+  onUse
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const openSource = () => {
+    void Linking.openURL(clip.sourceUrl).catch(() => void 0);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.showcase, children: [
+    /* @__PURE__ */ jsxs(Pressable, { onPress: onUse, style: ({
+      pressed
+    }) => [styles.showcasePoster, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Use the prompt from ${clip.title}`, children: [
+      /* @__PURE__ */ jsx(CoverPlaceholder, { seed: clip.id, icon: "play" }),
+      /* @__PURE__ */ jsx(LoopingVideo, { src: clip.hls, poster: clip.poster, playing }),
+      playing ? null : /* @__PURE__ */ jsx(View, { style: styles.playBadge, pointerEvents: "none", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 16, color: "#fafafa" }) })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { style: styles.workTitle, numberOfLines: 1, children: clip.title }),
+    /* @__PURE__ */ jsxs(Pressable, { onPress: openSource, hitSlop: 6, style: styles.credit, accessibilityRole: "link", accessibilityLabel: `By ${clip.author}, ${clip.license}. Open the original post`, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.creditText, numberOfLines: 1, children: `By ${clip.author} \xB7 CC BY 4.0` }),
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "open-in-new", size: 12, color: theme.mutedForeground })
+    ] }),
+    /* @__PURE__ */ jsxs(Pressable, { onPress: onUse, style: ({
+      pressed
+    }) => [styles.usePrompt, pressedStyle(pressed)], accessibilityRole: "button", children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 14, color: theme.foreground }),
+      /* @__PURE__ */ jsx(Text, { style: styles.usePromptLabel, children: "Use this prompt" })
     ] })
-  ] }) : /* @__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,
@@ -338,7 +636,7 @@ function BoardCover({
     loaded && media.phase === "ok" ? null : stalled ? /* @__PURE__ */ jsx(CoverPlaceholder, { seed, icon: isVideo ? "play" : "image-outline" }) : /* @__PURE__ */ jsx(Skeleton, {}),
     frame ? /* @__PURE__ */ jsx(Image, { source: {
       uri: media.src
-    }, style: styles.fill, contentFit: "cover", transition: 200, onLoad: () => setLoaded(true), onError: media.onError }, media.key) : null,
+    }, style: StyleSheet.absoluteFill, 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
   ] });
 }
@@ -410,6 +708,66 @@ function DesignThumbLayer({
     textAlign: layer.align
   }], numberOfLines: 3, children: layer.text });
 }
+function DocPaper({
+  blocks,
+  title,
+  height
+}) {
+  const lines = docPreviewLines(blocks, 7);
+  const width = Math.round(height * 8.5 / 11);
+  return /* @__PURE__ */ jsxs(View, { style: [docPaperStyles.page, {
+    width,
+    height
+  }], pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx(Text, { style: docPaperStyles.title, numberOfLines: 1, children: title }),
+    lines.length ? lines.map((line, i) => /* @__PURE__ */ jsx(Text, { style: line.heading ? docPaperStyles.heading : docPaperStyles.line, numberOfLines: 2, children: line.text }, i)) : (
+      // A new doc has no words yet; ruled lines say "page" without inventing text.
+      [92, 100, 84, 96, 70].map((w, i) => /* @__PURE__ */ jsx(View, { style: [docPaperStyles.rule, {
+        width: `${w}%`
+      }] }, i))
+    )
+  ] });
+}
+const docPaperStyles = StyleSheet.create({
+  page: {
+    backgroundColor: "#ffffff",
+    borderRadius: 3,
+    padding: 10,
+    gap: 5,
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    elevation: 2
+  },
+  title: {
+    fontSize: 10,
+    lineHeight: 13,
+    fontWeight: "700",
+    color: "#171717"
+  },
+  heading: {
+    fontSize: 8,
+    lineHeight: 11,
+    fontWeight: "600",
+    color: "#262626"
+  },
+  line: {
+    fontSize: 8,
+    lineHeight: 11,
+    color: "#525252"
+  },
+  rule: {
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "#e5e5e5",
+    marginTop: 4
+  }
+});
 const makeStyles = themedStyles((theme) => StyleSheet.create({
   plane: {
     flex: 1,
@@ -433,6 +791,11 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   title: __spreadProps(__spreadValues({}, TYPE.display), {
     color: theme.foreground
   }),
+  titleActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm
+  },
   toggle: {
     width: 40,
     height: 40,
@@ -469,7 +832,9 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   section: {
     marginBottom: SPACE.xl
   },
+  // flexGrow 0: a horizontal ScrollView otherwise swells into any spare height.
   bleed: {
+    flexGrow: 0,
     marginHorizontal: -16
   },
   railContent: {
@@ -554,10 +919,97 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   lookName: __spreadProps(__spreadValues({}, TYPE.label), {
     color: "#fafafa"
   }),
+  templateRowGap: {
+    marginBottom: SPACE.md
+  },
+  templateCover: {
+    borderRadius: RADIUS.md,
+    overflow: "hidden",
+    backgroundColor: theme.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border
+  },
+  railError: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: SPACE.md,
+    marginBottom: SPACE.md
+  },
+  railErrorText: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    color: theme.mutedForeground
+  }),
+  retry: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs + 2,
+    minHeight: 36,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
+  },
+  retryLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
+  showcase: {
+    width: SHOWCASE_WIDTH
+  },
+  showcasePoster: {
+    width: SHOWCASE_WIDTH,
+    height: Math.round(SHOWCASE_WIDTH * 9 / 16),
+    borderRadius: RADIUS.lg,
+    overflow: "hidden",
+    backgroundColor: theme.card,
+    marginBottom: SPACE.sm
+  },
+  credit: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs,
+    marginTop: 1,
+    alignSelf: "flex-start"
+  },
+  creditText: __spreadProps(__spreadValues({}, TYPE.caption), {
+    flexShrink: 1,
+    color: theme.mutedForeground,
+    textDecorationLine: "underline"
+  }),
+  usePrompt: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: SPACE.xs + 2,
+    minHeight: 36,
+    marginTop: SPACE.sm,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
+  },
+  usePromptLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  }),
   workHead: {
     gap: SPACE.md,
     marginBottom: SPACE.lg
   },
+  workFooter: {
+    alignItems: "center",
+    gap: SPACE.sm,
+    marginTop: SPACE.xs
+  },
+  showAll: {
+    minHeight: 40,
+    justifyContent: "center",
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.md,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.borderStrong
+  },
+  workNote: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.mutedForeground,
+    textAlign: "center"
+  }),
   noMargin: {
     marginBottom: 0
   },