@adminide-stack/yantra-mobile 12.0.131 → 12.0.132-alpha.0

package/lib/features/canvas/home/HeroMonitor.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroMonitor.js","sources":["../../../../src/features/canvas/home/HeroMonitor.tsx"],"sourcesContent":["/**\n * The home hero's viewfinder - native twin of canvas-surface `HeroMonitor.tsx`.\n * Loops the current shot (a featured look's cover video, else a Seedance clip),\n * cuts to the next every 7s unless held, and previews the composer's framing:\n * the chosen aspect masks the 16:9 monitor, the top bar reads REC or STILL,\n * the aspect and the resolution. \"Use this shot\" hands its prompt to the composer.\n */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Linking, StyleSheet, Text, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { Image } from 'expo-image';\nimport { useCanvasTheme, themedStyles, type CanvasPalette } from '../canvasTheme';\nimport { Pressable, RADIUS, SPACE, Skeleton, TYPE, pressedStyle } from '../canvasUi';\nimport { LoopingVideo } from './LoopingVideo';\nimport { HERO_CUT_MS, cropInset, heroTimecode, type HeroShot } from './heroShots';\n\n/** Thumbs on a phone (web shows four below `sm`). */\nconst PHONE_THUMBS = 4;\n\nexport function HeroMonitor({\n    shots,\n    index,\n    onCut,\n    paused,\n    playing,\n    still,\n    aspect,\n    resolution,\n    slate,\n    onUseShot,\n}: {\n    shots: readonly HeroShot[];\n    index: number;\n    onCut: (index: number) => void;\n    /** Holds the current shot instead of cutting to the next. */\n    paused: boolean;\n    /** The playback governor's say: false shows the poster only. */\n    playing: boolean;\n    still: boolean;\n    aspect: string;\n    resolution: string;\n    /** The composer's draft, written on the slate. */\n    slate: string;\n    onUseShot: (shot: HeroShot) => void;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const shot = shots[index];\n    const [time, setTime] = useState(0);\n    const [width, setWidth] = useState(0);\n    const lastTick = useRef(0);\n\n    useEffect(() => setTime(0), [shot?.id]);\n\n    useEffect(() => {\n        if (paused || shots.length < 2) return undefined;\n        const timer = setTimeout(() => onCut((index + 1) % shots.length), HERO_CUT_MS);\n        return () => clearTimeout(timer);\n    }, [paused, index, shots.length, onCut]);\n\n    // The player reports at 4Hz; a whole-second readout is all a phone needs to re-render for.\n    const onTime = useCallback((seconds: number) => {\n        if (Math.abs(seconds - lastTick.current) < 0.9) return;\n        lastTick.current = seconds;\n        setTime(seconds);\n    }, []);\n\n    if (!shot) {\n        return (\n            <View style={styles.root} accessibilityLabel=\"Loading shots\">\n                <Skeleton radius={RADIUS.lg} style={styles.loadingFrame} />\n            </View>\n        );\n    }\n\n    const height = width ? Math.round((width * 9) / 16) : 0;\n    const { x, y } = cropInset(aspect, 16 / 9);\n    const openCredit = () => {\n        if (shot.credit) void Linking.openURL(shot.credit.sourceUrl).catch(() => undefined);\n    };\n\n    return (\n        <View style={styles.root}>\n            <View\n                style={[styles.frame, height ? { height } : styles.frameFallback]}\n                onLayout={(e) => setWidth(e.nativeEvent.layout.width)}\n                accessibilityLabel={`Monitor: ${shot.title}`}\n            >\n                <LoopingVideo\n                    key={shot.id}\n                    src={shot.video}\n                    poster={shot.poster}\n                    playing={playing && !still}\n                    onTime={onTime}\n                />\n                {/* The chosen framing, as matte bars over the 16:9 monitor. */}\n                {y > 0 ? (\n                    <>\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, left: 0, right: 0, height: `${y * 100}%` }]}\n                        />\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { bottom: 0, left: 0, right: 0, height: `${y * 100}%` }]}\n                        />\n                    </>\n                ) : null}\n                {x > 0 ? (\n                    <>\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, bottom: 0, left: 0, width: `${x * 100}%` }]}\n                        />\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, bottom: 0, right: 0, width: `${x * 100}%` }]}\n                        />\n                    </>\n                ) : null}\n                <View style={styles.topBar} pointerEvents=\"none\">\n                    <View style={[styles.dot, still ? styles.dotStill : styles.dotRec]} />\n                    <Text style={styles.mono}>{still ? 'STILL' : 'REC'}</Text>\n                    <Text style={styles.mono}>{heroTimecode(time)}</Text>\n                    <Text style={styles.mono}>{aspect}</Text>\n                    <Text style={styles.mono}>{resolution}</Text>\n                </View>\n                <View style={styles.slate} pointerEvents=\"none\">\n                    <Text style={styles.slateText} numberOfLines={2}>\n                        {slate.trim() || shot.title}\n                    </Text>\n                </View>\n                <Pressable\n                    onPress={() => onUseShot(shot)}\n                    style={({ pressed }) => [styles.useShot, pressedStyle(pressed)]}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel={`Use this shot's prompt: ${shot.title}`}\n                >\n                    <MaterialCommunityIcons name=\"content-copy\" size={13} color=\"#fafafa\" />\n                    <Text style={styles.useShotLabel}>Use shot</Text>\n                </Pressable>\n            </View>\n\n            {/* Dots instead of a thumbnail strip: the shots stay reachable without a second row of pictures. */}\n            <View style={styles.dots}>\n                {shots.slice(0, PHONE_THUMBS).map((s, i) => {\n                    const on = i === index;\n                    return (\n                        <Pressable\n                            key={s.id}\n                            onPress={() => onCut(i)}\n                            hitSlop={8}\n                            style={[styles.dotHit]}\n                            accessibilityRole=\"button\"\n                            accessibilityLabel={s.title}\n                            accessibilityState={{ selected: on }}\n                        >\n                            <View style={[styles.pager, on && styles.pagerOn]} />\n                        </Pressable>\n                    );\n                })}\n            </View>\n\n            {shot.credit ? (\n                // The clip's licence asks for credit: one quiet line, only for those clips.\n                <Pressable\n                    onPress={openCredit}\n                    hitSlop={6}\n                    accessibilityRole=\"link\"\n                    accessibilityLabel={`${shot.title} by ${shot.credit.author}, ${shot.credit.license}. Open the original post`}\n                >\n                    <Text style={styles.creditText} numberOfLines={1}>\n                        {`${shot.credit.author} · ${shot.credit.license}`}\n                    </Text>\n                </Pressable>\n            ) : null}\n        </View>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        root: { gap: SPACE.xs + 2 },\n        loadingFrame: { width: '100%', aspectRatio: 16 / 9 },\n        frame: {\n            width: '100%',\n            borderRadius: RADIUS.lg,\n            overflow: 'hidden',\n            // The monitor is always a dark well: footage reads on black in either theme.\n            backgroundColor: '#000000',\n        },\n        frameFallback: { aspectRatio: 16 / 9 },\n        matte: { position: 'absolute', backgroundColor: 'rgba(0,0,0,0.62)' },\n        topBar: {\n            position: 'absolute',\n            top: SPACE.sm,\n            left: SPACE.sm,\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: SPACE.sm,\n            paddingHorizontal: SPACE.sm,\n            paddingVertical: SPACE.xs,\n            borderRadius: RADIUS.sm,\n            backgroundColor: 'rgba(0,0,0,0.45)',\n        },\n        dot: { width: 7, height: 7, borderRadius: 4 },\n        dotRec: { backgroundColor: '#ef4444' },\n        dotStill: { backgroundColor: '#fafafa' },\n        mono: { fontSize: 11, lineHeight: 14, fontVariant: ['tabular-nums'], color: '#fafafa' },\n        slate: {\n            position: 'absolute',\n            left: SPACE.sm,\n            bottom: SPACE.sm,\n            maxWidth: '70%',\n            paddingHorizontal: SPACE.sm,\n            paddingVertical: SPACE.xs + 2,\n            borderRadius: RADIUS.sm,\n            backgroundColor: 'rgba(0,0,0,0.55)',\n        },\n        slateText: { ...TYPE.caption, color: '#fafafa' },\n        dots: { flexDirection: 'row', justifyContent: 'center', gap: SPACE.xs },\n        dotHit: { paddingVertical: SPACE.xs, paddingHorizontal: 2 },\n        pager: { width: 6, height: 6, borderRadius: 3, backgroundColor: theme.borderStrong },\n        pagerOn: { width: 18, backgroundColor: theme.foreground },\n        creditText: {\n            ...TYPE.caption,\n            textAlign: 'center',\n            color: theme.mutedForeground,\n            textDecorationLine: 'underline',\n        },\n        useShot: {\n            position: 'absolute',\n            top: SPACE.sm,\n            right: SPACE.sm,\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: SPACE.xs,\n            minHeight: 30,\n            paddingHorizontal: SPACE.sm + 2,\n            borderRadius: RADIUS.pill,\n            backgroundColor: 'rgba(0,0,0,0.5)',\n        },\n        useShotLabel: { ...TYPE.caption, fontWeight: '600', color: '#fafafa' },\n    }),\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"HeroMonitor.js","sources":["../../../../src/features/canvas/home/HeroMonitor.tsx"],"sourcesContent":["/**\n * The home hero's viewfinder - native twin of canvas-surface `HeroMonitor.tsx`.\n * Loops the current shot (a featured look's cover video, else a Seedance clip),\n * cuts to the next every 7s unless held, and previews the composer's framing:\n * the chosen aspect masks the 16:9 monitor, the top bar reads REC or STILL,\n * the aspect and the resolution. \"Use this shot\" hands its prompt to the composer.\n */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Linking, StyleSheet, Text, View } from 'react-native';\nimport { Image } from 'expo-image';\nimport { useCanvasTheme, themedStyles, type CanvasPalette } from '../canvasTheme';\nimport { Pressable, RADIUS, SPACE, Skeleton, TYPE, pressedStyle } from '../canvasUi';\nimport { LoopingVideo } from './LoopingVideo';\nimport { HERO_CUT_MS, cropInset, heroTimecode, type HeroShot } from './heroShots';\n\n/** Thumbs on a phone (web shows four below `sm`). */\nconst PHONE_THUMBS = 4;\n\nexport function HeroMonitor({\n    shots,\n    index,\n    onCut,\n    paused,\n    playing,\n    still,\n    aspect,\n    resolution,\n    slate,\n}: {\n    shots: readonly HeroShot[];\n    index: number;\n    onCut: (index: number) => void;\n    /** Holds the current shot instead of cutting to the next. */\n    paused: boolean;\n    /** The playback governor's say: false shows the poster only. */\n    playing: boolean;\n    still: boolean;\n    aspect: string;\n    resolution: string;\n    /** The composer's draft, written on the slate. */\n    slate: string;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const shot = shots[index];\n    const [time, setTime] = useState(0);\n    const [width, setWidth] = useState(0);\n    const lastTick = useRef(0);\n\n    useEffect(() => setTime(0), [shot?.id]);\n\n    useEffect(() => {\n        if (paused || shots.length < 2) return undefined;\n        const timer = setTimeout(() => onCut((index + 1) % shots.length), HERO_CUT_MS);\n        return () => clearTimeout(timer);\n    }, [paused, index, shots.length, onCut]);\n\n    // The player reports at 4Hz; a whole-second readout is all a phone needs to re-render for.\n    const onTime = useCallback((seconds: number) => {\n        if (Math.abs(seconds - lastTick.current) < 0.9) return;\n        lastTick.current = seconds;\n        setTime(seconds);\n    }, []);\n\n    if (!shot) {\n        return (\n            <View style={styles.root} accessibilityLabel=\"Loading shots\">\n                <Skeleton radius={RADIUS.lg} style={styles.loadingFrame} />\n            </View>\n        );\n    }\n\n    const height = width ? Math.round((width * 9) / 16) : 0;\n    const { x, y } = cropInset(aspect, 16 / 9);\n    const openCredit = () => {\n        if (shot.credit) void Linking.openURL(shot.credit.sourceUrl).catch(() => undefined);\n    };\n\n    return (\n        <View style={styles.root}>\n            <View\n                style={[styles.frame, height ? { height } : styles.frameFallback]}\n                onLayout={(e) => setWidth(e.nativeEvent.layout.width)}\n                accessibilityLabel={`Monitor: ${shot.title}`}\n            >\n                <LoopingVideo\n                    key={shot.id}\n                    src={shot.video}\n                    poster={shot.poster}\n                    playing={playing && !still}\n                    onTime={onTime}\n                />\n                {/* The chosen framing, as matte bars over the 16:9 monitor. */}\n                {y > 0 ? (\n                    <>\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, left: 0, right: 0, height: `${y * 100}%` }]}\n                        />\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { bottom: 0, left: 0, right: 0, height: `${y * 100}%` }]}\n                        />\n                    </>\n                ) : null}\n                {x > 0 ? (\n                    <>\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, bottom: 0, left: 0, width: `${x * 100}%` }]}\n                        />\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, bottom: 0, right: 0, width: `${x * 100}%` }]}\n                        />\n                    </>\n                ) : null}\n                <View style={styles.topBar} pointerEvents=\"none\">\n                    <View style={[styles.dot, still ? styles.dotStill : styles.dotRec]} />\n                    <Text style={styles.mono}>{still ? 'STILL' : 'REC'}</Text>\n                    <Text style={styles.mono}>{heroTimecode(time)}</Text>\n                    <Text style={styles.mono}>{aspect}</Text>\n                    <Text style={styles.mono}>{resolution}</Text>\n                </View>\n                <View style={styles.slate} pointerEvents=\"none\">\n                    <Text style={styles.slateText} numberOfLines={2}>\n                        {slate.trim() || shot.title}\n                    </Text>\n                </View>\n                {/* Viewfinder corner marks and the lens readout, as the web monitor draws them. */}\n                <View pointerEvents=\"none\" style={[styles.corner, styles.cornerTL]} />\n                <View pointerEvents=\"none\" style={[styles.corner, styles.cornerTR]} />\n                <View pointerEvents=\"none\" style={[styles.corner, styles.cornerBL]} />\n                <View pointerEvents=\"none\" style={[styles.corner, styles.cornerBR]} />\n                <View style={styles.lens} pointerEvents=\"none\">\n                    <Text style={styles.lensText}>Auto lens</Text>\n                </View>\n            </View>\n\n            <View style={styles.thumbs}>\n                {shots.slice(0, PHONE_THUMBS).map((s, i) => {\n                    const on = i === index;\n                    return (\n                        <Pressable\n                            key={s.id}\n                            onPress={() => onCut(i)}\n                            style={[styles.thumb, on && styles.thumbOn]}\n                            accessibilityRole=\"button\"\n                            accessibilityLabel={s.title}\n                            accessibilityState={{ selected: on }}\n                        >\n                            {s.poster ? (\n                                <Image\n                                    source={{ uri: s.poster }}\n                                    style={[StyleSheet.absoluteFill, !on && styles.thumbDim]}\n                                    contentFit=\"cover\"\n                                />\n                            ) : null}\n                        </Pressable>\n                    );\n                })}\n            </View>\n\n            <View>\n                {shot.credit ? (\n                    <Pressable\n                        onPress={openCredit}\n                        hitSlop={6}\n                        accessibilityRole=\"link\"\n                        accessibilityLabel={`${shot.title} by ${shot.credit.author}, ${shot.credit.license}. Open the original post`}\n                    >\n                        <Text style={[styles.caption, styles.captionLink]} numberOfLines={1}>\n                            {`${shot.title} · ${shot.credit.author} · ${shot.credit.license}`}\n                        </Text>\n                    </Pressable>\n                ) : (\n                    <Text style={styles.caption} numberOfLines={1}>\n                        {`Studio look · ${shot.title}`}\n                    </Text>\n                )}\n                <Text style={styles.caption}>Cuts every 7s, pauses while you type</Text>\n            </View>\n        </View>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        root: { gap: SPACE.sm + 2 },\n        loadingFrame: { width: '100%', aspectRatio: 16 / 9 },\n        frame: {\n            width: '100%',\n            borderRadius: RADIUS.lg,\n            overflow: 'hidden',\n            // The monitor is always a dark well: footage reads on black in either theme.\n            backgroundColor: '#000000',\n        },\n        frameFallback: { aspectRatio: 16 / 9 },\n        matte: { position: 'absolute', backgroundColor: 'rgba(0,0,0,0.62)' },\n        topBar: {\n            position: 'absolute',\n            top: SPACE.sm,\n            alignSelf: 'center',\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: SPACE.sm,\n            paddingHorizontal: SPACE.sm,\n            paddingVertical: SPACE.xs,\n            borderRadius: RADIUS.sm,\n            backgroundColor: 'rgba(0,0,0,0.45)',\n        },\n        dot: { width: 7, height: 7, borderRadius: 4 },\n        dotRec: { backgroundColor: '#ef4444' },\n        dotStill: { backgroundColor: '#fafafa' },\n        mono: { fontSize: 11, lineHeight: 14, fontVariant: ['tabular-nums'], color: '#fafafa' },\n        slate: {\n            position: 'absolute',\n            left: SPACE.sm,\n            bottom: SPACE.sm,\n            maxWidth: '70%',\n            paddingHorizontal: SPACE.sm,\n            paddingVertical: SPACE.xs + 2,\n            borderRadius: RADIUS.sm,\n            backgroundColor: 'rgba(0,0,0,0.55)',\n        },\n        slateText: { ...TYPE.caption, color: '#fafafa' },\n        thumbs: { flexDirection: 'row', gap: SPACE.sm },\n        thumb: {\n            flex: 1,\n            aspectRatio: 16 / 10,\n            borderRadius: RADIUS.md,\n            overflow: 'hidden',\n            backgroundColor: theme.card,\n            borderWidth: 2,\n            borderColor: 'transparent',\n        },\n        thumbOn: { borderColor: theme.foreground },\n        thumbDim: { opacity: 0.7 },\n        caption: { ...TYPE.caption, fontWeight: '400', lineHeight: 18, color: theme.mutedForeground },\n        captionLink: { textDecorationLine: 'underline' },\n        corner: { position: 'absolute', width: 18, height: 18, borderColor: 'rgba(255,255,255,0.75)' },\n        cornerTL: { top: SPACE.md, left: SPACE.md, borderTopWidth: 1.5, borderLeftWidth: 1.5 },\n        cornerTR: { top: SPACE.md, right: SPACE.md, borderTopWidth: 1.5, borderRightWidth: 1.5 },\n        cornerBL: { bottom: SPACE.md, left: SPACE.md, borderBottomWidth: 1.5, borderLeftWidth: 1.5 },\n        cornerBR: { bottom: SPACE.md, right: SPACE.md, borderBottomWidth: 1.5, borderRightWidth: 1.5 },\n        lens: {\n            position: 'absolute',\n            right: SPACE.sm,\n            bottom: SPACE.sm,\n            paddingHorizontal: SPACE.sm,\n            paddingVertical: SPACE.xs,\n            borderRadius: RADIUS.sm,\n            backgroundColor: 'rgba(0,0,0,0.5)',\n        },\n        lensText: { ...TYPE.caption, color: '#fafafa' },\n    }),\n);\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/home/TemplatesGallery.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useState,useMemo,useEffect}from'react';import {ScrollView,Text,View,StyleSheet,useWindowDimensions,TextInput,ActivityIndicator,FlatList}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {mapDesignCorpus,loadCanvasTemplateLane}from'../canvasChatTemplates.js';import {DESIGN_PROMPT_TEMPLATES}from'../designPromptTemplates.js';import {DesignCategoryGallery}from'../DesignCategoryGallery.js';import {designCategoryFor}from'../designCategories.js';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {Pressable,pressedStyle,IconButton,RADIUS,SPACE,TYPE}from'../canvasUi.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useMemo,useEffect,useCallback}from'react';import {useWindowDimensions,View,Text,ScrollView,TextInput,FlatList,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {loadCanvasTemplateLane,CANVAS_AUDIO_TEMPLATES,mapDesignCorpus}from'../canvasChatTemplates.js';import {DESIGN_PROMPT_TEMPLATES}from'../designPromptTemplates.js';import {listStudioLooks}from'../studioLooks.js';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {Pressable,pressedStyle,IconButton,RADIUS,SPACE,Skeleton,TYPE}from'../canvasUi.js';import {LookDetail}from'./LookDetail.js';import {gallerySourceInfo,createGalleryReader,readGalleryPage,appendGalleryTemplates,galleryCountLabel,galleryEmptyText,TEMPLATES_GALLERY_SOURCES,searchPlaceholder}from'./templatesGallerySources.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,60 +17,20 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const HOME_GALLERY_SOURCES = [{
-  id: "video",
-  label: "Video"
-}, {
-  id: "slides",
-  label: "Presentations",
-  category: "presentation"
-}, {
-  id: "flyers",
-  label: "Flyers",
-  category: "flyer"
-}];
 const GUTTER = SPACE.lg;
-const SEARCH_DEBOUNCE_MS = 350;
+const SEARCH_DEBOUNCE_MS = 250;
+function corpusFor(lane) {
+  return lane === "audio" ? CANVAS_AUDIO_TEMPLATES : mapDesignCorpus(lane, DESIGN_PROMPT_TEMPLATES);
+}
 function TemplatesGallery({
   initialSource = "video",
   runAction,
   loadDesignCatalog,
+  looksOptions,
   onClose,
-  onUseVideoTemplate,
-  onBlank,
-  onOpenTemplate
-}) {
-  const theme = useCanvasTheme();
-  const styles = makeStyles(theme);
-  const [source, setSource] = useState(initialSource);
-  const entry = HOME_GALLERY_SOURCES.find((s) => s.id === source);
-  const category = (entry == null ? void 0 : entry.category) ? designCategoryFor(entry.category) : null;
-  const chips = /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.chipScroll, contentContainerStyle: styles.chips, children: HOME_GALLERY_SOURCES.map((s) => {
-    const on = s.id === source;
-    return /* @__PURE__ */ jsx(Pressable, { onPress: () => setSource(s.id), style: ({
-      pressed
-    }) => [styles.chip, on && styles.chipOn, pressedStyle(pressed)], accessibilityRole: "tab", accessibilityState: {
-      selected: on
-    }, testID: `gallery-source-${s.id}`, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelOn], children: s.label }) }, s.id);
-  }) });
-  if (category) {
-    return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
-      chips,
-      /* @__PURE__ */ jsx(View, { style: styles.fill, children: /* @__PURE__ */ jsx(DesignCategoryGallery, { category, load: loadDesignCatalog, onClose, onBlank, onOpenTemplate }, category.id) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.title, accessibilityRole: "header", children: "Templates" }),
-      /* @__PURE__ */ jsx(IconButton, { icon: "close", label: "Close templates", tone: "filled", size: 36, onPress: onClose })
-    ] }),
-    chips,
-    /* @__PURE__ */ jsx(VideoTemplates, { runAction, onUse: onUseVideoTemplate })
-  ] });
-}
-function VideoTemplates({
-  runAction,
-  onUse
+  onOpenTemplate,
+  onRecreateLook,
+  onUsePrompt
 }) {
   const theme = useCanvasTheme();
   const styles = makeStyles(theme);
@@ -78,58 +38,203 @@ function VideoTemplates({
     width
   } = useWindowDimensions();
   const column = (width - GUTTER * 2 - SPACE.md) / 2;
-  const corpus = useMemo(() => mapDesignCorpus("video", DESIGN_PROMPT_TEMPLATES), []);
+  const [source, setSource] = useState(initialSource);
+  const info = gallerySourceInfo(source);
   const [query, setQuery] = useState("");
   const [search, setSearch] = useState("");
-  const [rows, setRows] = useState([]);
+  const [items, setItems] = useState([]);
+  const [next, setNext] = useState(null);
   const [status, setStatus] = useState("loading");
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [moreFailed, setMoreFailed] = useState(false);
   const [read, setRead] = useState(0);
+  const [lookIndex, setLookIndex] = useState(-1);
+  const readSeq = useRef(0);
+  const list = useRef(null);
+  const optsRef = useRef({
+    runAction,
+    loadDesignCatalog,
+    looksOptions
+  });
+  optsRef.current = {
+    runAction,
+    loadDesignCatalog,
+    looksOptions
+  };
+  const readPage = useMemo(() => createGalleryReader({
+    loadDesign: (group, opts) => {
+      const load = optsRef.current.loadDesignCatalog;
+      return load ? load(group, opts) : Promise.resolve({
+        cards: [],
+        hasMore: false,
+        fetched: 0
+      });
+    },
+    listLooks: (params) => {
+      var _a;
+      return listStudioLooks(optsRef.current.runAction, params, (_a = optsRef.current.looksOptions) != null ? _a : {});
+    },
+    loadLane: (lane, q) => loadCanvasTemplateLane(lane, q, optsRef.current.runAction, corpusFor(lane))
+  }), []);
   useEffect(() => {
     const timer = setTimeout(() => setSearch(query.trim()), SEARCH_DEBOUNCE_MS);
     return () => clearTimeout(timer);
   }, [query]);
   useEffect(() => {
-    let live = true;
+    const seq = ++readSeq.current;
     setStatus("loading");
-    loadCanvasTemplateLane("video", search || void 0, runAction, corpus).then((list) => {
-      if (!live) return;
-      setRows(list);
+    setMoreFailed(false);
+    setLoadingMore(false);
+    readGalleryPage(readPage, source, search || void 0, 0).then((page) => {
+      var _a;
+      if (seq !== readSeq.current) return;
+      setItems(appendGalleryTemplates([], page.items));
+      setNext(page.next);
       setStatus("ready");
+      (_a = list.current) == null ? void 0 : _a.scrollToOffset({
+        offset: 0,
+        animated: false
+      });
     }).catch(() => {
-      if (live) setStatus("failed");
+      if (seq !== readSeq.current) return;
+      setItems([]);
+      setNext(null);
+      setStatus("failed");
     });
-    return () => {
-      live = false;
-    };
-  }, [search, runAction, corpus, read]);
-  return /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.search, children: [
-      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 18, color: theme.mutedForeground }),
-      /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: "Search video templates", placeholderTextColor: theme.mutedForeground, style: styles.searchInput, autoCorrect: false, returnKeyType: "search" })
+  }, [readPage, source, search, read]);
+  const loadMore = useCallback((retry = false) => {
+    if (status !== "ready" || next === null || loadingMore || moreFailed && !retry) return;
+    setMoreFailed(false);
+    const seq = readSeq.current;
+    setLoadingMore(true);
+    readGalleryPage(readPage, source, search || void 0, next).then((page) => {
+      if (seq !== readSeq.current) return;
+      setItems((shown) => appendGalleryTemplates(shown, page.items));
+      setNext(page.next);
+    }).catch(() => {
+      if (seq === readSeq.current) setMoreFailed(true);
+    }).finally(() => {
+      if (seq === readSeq.current) setLoadingMore(false);
+    });
+  }, [readPage, source, search, status, next, loadingMore, moreFailed]);
+  const looks = useMemo(() => items.map((t) => t.look).filter((l) => Boolean(l)), [items]);
+  const pick = (t) => {
+    if (t.design) {
+      onOpenTemplate == null ? void 0 : onOpenTemplate(t.design);
+      return;
+    }
+    if (t.look) {
+      setLookIndex(looks.findIndex((l) => {
+        var _a;
+        return l.id === ((_a = t.look) == null ? void 0 : _a.id);
+      }));
+      return;
+    }
+    if ((t.source === "image" || t.source === "audio") && t.prompt) onUsePrompt(t.source, t.prompt);
+  };
+  const chooseSource = (id) => {
+    if (id === source) return;
+    readSeq.current += 1;
+    setSource(id);
+    setQuery("");
+    setSearch("");
+    setItems([]);
+    setNext(null);
+    setStatus("loading");
+  };
+  const count = status === "ready" ? galleryCountLabel(items.length, next !== null) : "";
+  const coverHeight = Math.min(column * 1.5, column / info.coverAspect);
+  const placeholders = (n) => /* @__PURE__ */ jsx(View, { style: styles.skeletonGrid, children: Array.from({
+    length: n
+  }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { style: {
+    width: column,
+    height: coverHeight
+  }, radius: RADIUS.md }, i)) });
+  const empty = status === "loading" ? placeholders(6) : status === "failed" ? /* @__PURE__ */ jsxs(View, { style: styles.message, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.messageText, children: "Templates couldn't load." }),
+    /* @__PURE__ */ jsxs(Pressable, { onPress: () => setRead((n) => n + 1), 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" })
+    ] })
+  ] }) : /* @__PURE__ */ jsx(View, { style: styles.message, children: /* @__PURE__ */ jsx(Text, { style: styles.messageText, children: galleryEmptyText(info.label, search) }) });
+  const footer = next === null || items.length === 0 ? null : moreFailed ? /* @__PURE__ */ jsxs(View, { style: styles.message, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.messageText, children: "More templates couldn't load." }),
+    /* @__PURE__ */ jsxs(Pressable, { onPress: () => loadMore(true), 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: "Try again" })
+    ] })
+  ] }) : placeholders(2);
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.headText, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.title, accessibilityRole: "header", numberOfLines: 1, children: "Templates" }),
+          count ? /* @__PURE__ */ jsx(Text, { style: styles.count, children: count }) : null
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: "Pick a template, then make it yours" })
+      ] }),
+      /* @__PURE__ */ jsx(IconButton, { icon: "close", label: "Close templates", tone: "filled", size: 36, onPress: onClose })
     ] }),
-    status === "loading" && rows.length === 0 ? /* @__PURE__ */ jsx(ActivityIndicator, { style: styles.status, color: theme.mutedForeground }) : status === "failed" ? /* @__PURE__ */ jsxs(View, { style: styles.statusRow, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Templates couldn't load." }),
-      /* @__PURE__ */ jsxs(Pressable, { onPress: () => setRead((n) => n + 1), style: ({
+    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.chipScroll, contentContainerStyle: styles.chips, children: TEMPLATES_GALLERY_SOURCES.map((s) => {
+      const on = s.id === source;
+      return /* @__PURE__ */ jsx(Pressable, { onPress: () => chooseSource(s.id), style: ({
         pressed
-      }) => [styles.retry, pressedStyle(pressed)], accessibilityRole: "button", children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "refresh", size: 16, color: theme.foreground }),
-        /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Retry" })
-      ] })
-    ] }) : /* @__PURE__ */ jsx(FlatList, { data: rows, keyExtractor: (t) => t.id, numColumns: 2, columnWrapperStyle: styles.row, contentContainerStyle: styles.list, keyboardShouldPersistTaps: "handled", ListEmptyComponent: /* @__PURE__ */ jsx(Text, { style: styles.hint, children: search ? `No templates match "${search}".` : "No templates here yet." }), renderItem: ({
+      }) => [styles.chip, on && styles.chipOn, pressedStyle(pressed)], accessibilityRole: "tab", accessibilityState: {
+        selected: on
+      }, testID: `gallery-source-${s.id}`, children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, on && styles.chipLabelOn], children: s.label }) }, s.id);
+    }) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.searchBox, children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 20, color: theme.mutedForeground }),
+      /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: searchPlaceholder(info.label), placeholderTextColor: theme.mutedForeground, style: styles.searchInput, autoCorrect: false, returnKeyType: "search", accessibilityLabel: "Search templates" }),
+      query ? /* @__PURE__ */ jsx(IconButton, { icon: "close", label: "Clear search", onPress: () => setQuery(""), size: 32 }) : null
+    ] }),
+    /* @__PURE__ */ jsx(FlatList, { ref: list, data: items, keyExtractor: (t) => t.id, numColumns: 2, columnWrapperStyle: styles.columns, contentContainerStyle: styles.list, style: [styles.fill, status === "loading" && items.length > 0 && styles.stale], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", keyboardDismissMode: "on-drag", ListEmptyComponent: empty, ListFooterComponent: footer, onEndReached: () => loadMore(), onEndReachedThreshold: 0.6, renderItem: ({
       item
-    }) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onUse(item), style: ({
-      pressed
-    }) => [{
-      width: column
-    }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Use template ${item.title}`, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.cover, children: [
-        item.cover ? /* @__PURE__ */ jsx(Image, { source: {
-          uri: item.cover
-        }, style: StyleSheet.absoluteFill, contentFit: "cover" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 22, color: theme.mutedForeground }),
-        item.aspect ? /* @__PURE__ */ jsx(View, { style: styles.aspect, children: /* @__PURE__ */ jsx(Text, { style: styles.aspectLabel, children: item.aspect }) }) : null
-      ] }),
-      /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, numberOfLines: 2, children: item.title })
-    ] }) })
+    }) => /* @__PURE__ */ jsx(TemplateCover, { template: item, width: column, height: coverHeight, fit: item.design ? "contain" : "cover", onPress: () => pick(item) }) }, `grid:${source}`),
+    /* @__PURE__ */ jsx(LookDetail, { looks, index: lookIndex, onIndexChange: setLookIndex, onRecreate: (look) => {
+      setLookIndex(-1);
+      onRecreateLook(look);
+    }, onClose: () => setLookIndex(-1) })
+  ] });
+}
+function TemplateCover({
+  template,
+  width,
+  height,
+  fit,
+  onPress
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [loaded, setLoaded] = useState(false);
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
+    pressed
+  }) => [styles.card, {
+    width,
+    height
+  }, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Use template ${template.title}`, children: [
+    template.cover ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      loaded ? null : /* @__PURE__ */ jsx(Skeleton, {}),
+      /* @__PURE__ */ jsx(Image, { source: {
+        uri: template.cover
+      }, style: StyleSheet.absoluteFill, contentFit: fit, transition: 150, onLoad: () => setLoaded(true) })
+    ] }) : /* @__PURE__ */ jsx(View, { style: styles.noCover, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: template.source === "audio" ? "music-note-outline" : "view-dashboard-outline", size: 28, color: theme.mutedForeground }) }),
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles.band, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.fade, {
+        backgroundColor: "rgba(0,0,0,0.12)"
+      }] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.fade, {
+        backgroundColor: "rgba(0,0,0,0.3)"
+      }] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.fade, {
+        backgroundColor: "rgba(0,0,0,0.5)"
+      }] }),
+      /* @__PURE__ */ jsx(View, { style: styles.bandBody, children: /* @__PURE__ */ jsx(Text, { style: styles.bandTitle, numberOfLines: 2, children: template.title }) })
+    ] })
   ] });
 }
 const makeStyles = themedStyles((theme) => StyleSheet.create({
@@ -140,16 +245,38 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   fill: {
     flex: 1
   },
+  stale: {
+    opacity: 0.6
+  },
   head: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
+    gap: SPACE.md,
     paddingHorizontal: GUTTER,
     paddingTop: SPACE.md,
-    paddingBottom: SPACE.sm
+    paddingBottom: SPACE.xs
+  },
+  headText: {
+    flex: 1,
+    minWidth: 0
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: SPACE.sm
   },
   title: __spreadProps(__spreadValues({}, TYPE.heading), {
-    color: theme.foreground
+    color: theme.foreground,
+    flexShrink: 1
+  }),
+  count: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.mutedForeground,
+    fontVariant: ["tabular-nums"]
+  }),
+  subtitle: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    marginTop: 2,
+    color: theme.mutedForeground
   }),
   // flexGrow 0: a horizontal ScrollView otherwise swells into any spare height.
   chipScroll: {
@@ -176,78 +303,86 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   chipLabelOn: {
     color: theme.background
   },
-  search: {
+  searchBox: {
     flexDirection: "row",
     alignItems: "center",
     gap: SPACE.sm,
+    minHeight: 44,
     marginHorizontal: GUTTER,
+    marginTop: SPACE.xs,
     marginBottom: SPACE.md,
-    paddingHorizontal: SPACE.md,
-    minHeight: 44,
-    borderRadius: RADIUS.md,
-    backgroundColor: theme.card
+    paddingLeft: SPACE.md,
+    paddingRight: SPACE.xs,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border
   },
   searchInput: __spreadProps(__spreadValues({}, TYPE.body), {
     flex: 1,
-    color: theme.foreground,
-    paddingVertical: SPACE.sm
+    paddingVertical: SPACE.sm,
+    color: theme.foreground
   }),
-  status: {
-    marginTop: SPACE.xl
+  list: {
+    paddingHorizontal: GUTTER,
+    paddingBottom: SPACE.xxl
   },
-  statusRow: {
+  columns: {
+    gap: SPACE.md,
+    marginBottom: SPACE.md
+  },
+  skeletonGrid: {
     flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.md
+  },
+  card: {
+    borderRadius: RADIUS.md,
+    overflow: "hidden",
+    backgroundColor: theme.card
+  },
+  noCover: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     alignItems: "center",
+    justifyContent: "center"
+  }),
+  band: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  fade: {
+    height: 6
+  },
+  bandBody: {
+    backgroundColor: "rgba(0,0,0,0.72)",
+    paddingHorizontal: SPACE.md,
+    paddingTop: SPACE.xs,
+    paddingBottom: SPACE.md - 2
+  },
+  bandTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+    lineHeight: 18,
+    color: "#ffffff"
+  }),
+  message: {
+    alignItems: "flex-start",
     gap: SPACE.md,
-    paddingHorizontal: GUTTER
+    paddingVertical: SPACE.lg
   },
-  hint: __spreadProps(__spreadValues({}, TYPE.body), {
+  messageText: __spreadProps(__spreadValues({}, TYPE.body), {
     fontSize: 14,
-    color: theme.mutedForeground,
-    paddingHorizontal: GUTTER
+    color: theme.mutedForeground
   }),
   retry: {
     flexDirection: "row",
     alignItems: "center",
     gap: SPACE.xs + 2,
-    minHeight: 36,
-    paddingHorizontal: SPACE.md,
+    minHeight: 40,
+    paddingHorizontal: SPACE.lg - 2,
     borderRadius: RADIUS.pill,
     backgroundColor: theme.card
   },
-  list: {
-    paddingHorizontal: GUTTER,
-    paddingBottom: SPACE.xxl
-  },
-  row: {
-    gap: SPACE.md,
-    marginBottom: SPACE.lg
-  },
-  cover: {
-    width: "100%",
-    aspectRatio: 16 / 9,
-    borderRadius: RADIUS.md,
-    overflow: "hidden",
-    backgroundColor: theme.card,
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: SPACE.xs + 2
-  },
-  aspect: {
-    position: "absolute",
-    right: SPACE.xs + 2,
-    bottom: SPACE.xs + 2,
-    paddingHorizontal: SPACE.xs + 2,
-    paddingVertical: 2,
-    borderRadius: 6,
-    backgroundColor: "rgba(10,10,10,0.55)"
-  },
-  aspectLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: "#fafafa"
-  },
-  cardTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+  retryLabel: __spreadProps(__spreadValues({}, TYPE.label), {
     color: theme.foreground
   })
-}));export{HOME_GALLERY_SOURCES,TemplatesGallery};//# sourceMappingURL=TemplatesGallery.js.map
+}));export{TemplatesGallery};//# sourceMappingURL=TemplatesGallery.js.map