@adminide-stack/yantra-mobile 12.0.125-alpha.1 → 12.0.126

package/lib/features/canvas/CanvasLooksPanel.js

@@ -1,4 +1,23 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useCallback,useEffect}from'react';import {StyleSheet,View,Text,Pressable,TextInput,ActivityIndicator,FlatList,Image}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {listStudioLooks,LOOKS_PAGE_SIZE}from'./studioLooks.js';function CanvasLooksPanel({
+import {jsxs,jsx}from'react/jsx-runtime';import {useMemo,useState,useCallback,useEffect}from'react';import {View,Text,TextInput,ActivityIndicator,FlatList,Image,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {listStudioLooks,LOOKS_PAGE_SIZE}from'./studioLooks.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {IconButton,Pressable,pressedStyle,RADIUS,SPACE,HIT,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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function CanvasLooksPanel({
   runAction,
   apolloClient,
   token,
@@ -6,6 +25,8 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useCallback,useEffect}
   onRecreate,
   onClose
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [query, setQuery] = useState("");
   const [search, setSearch] = useState("");
   const [looks, setLooks] = useState([]);
@@ -49,136 +70,139 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useCallback,useEffect}
   }, [load]);
   return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.title, children: "Looks" }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 8, accessibilityLabel: "Close looks", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 20, color: "#64748b" }) })
+      /* @__PURE__ */ jsx(Text, { style: styles.title, accessibilityRole: "header", children: "Looks" }),
+      /* @__PURE__ */ jsx(IconButton, { icon: "close", label: "Close looks", tone: "filled", size: 36, onPress: onClose })
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.search, children: [
-      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 16, color: "#94a3b8" }),
-      /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, onSubmitEditing: () => setSearch(query.trim()), placeholder: "Search looks\u2026", placeholderTextColor: "#94a3b8", style: styles.searchInput, returnKeyType: "search" })
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 18, color: theme.mutedForeground }),
+      /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, onSubmitEditing: () => setSearch(query.trim()), placeholder: "Search looks\u2026", placeholderTextColor: theme.mutedForeground, style: styles.searchInput, returnKeyType: "search" })
     ] }),
     error ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: error }) : null,
-    loading && looks.length === 0 ? /* @__PURE__ */ jsx(ActivityIndicator, { style: {
-      marginTop: 24
-    }, color: "#ea580c" }) : /* @__PURE__ */ jsx(FlatList, { data: looks, keyExtractor: (item) => item.id, numColumns: 2, columnWrapperStyle: styles.row, contentContainerStyle: styles.list, ListEmptyComponent: /* @__PURE__ */ jsx(Text, { style: styles.empty, children: search ? "No looks match." : "No looks yet." }), ListFooterComponent: hasMore ? /* @__PURE__ */ jsx(Pressable, { onPress: () => void load(looks.length, true), disabled: loadingMore, style: styles.more, children: loadingMore ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#0f172a" }) : /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: "Load more" }) }) : null, renderItem: ({
+    loading && looks.length === 0 ? /* @__PURE__ */ jsx(ActivityIndicator, { style: styles.spinner, color: theme.mutedForeground }) : /* @__PURE__ */ jsx(FlatList, { data: looks, keyExtractor: (item) => item.id, numColumns: 2, columnWrapperStyle: styles.row, contentContainerStyle: styles.list, ListEmptyComponent: /* @__PURE__ */ jsx(Text, { style: styles.empty, children: search ? "No looks match." : "No looks yet." }), ListFooterComponent: hasMore ? /* @__PURE__ */ jsx(Pressable, { onPress: () => void load(looks.length, true), disabled: loadingMore, style: ({
+      pressed
+    }) => [styles.more, pressedStyle(pressed)], children: loadingMore ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.foreground }) : /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: "Load more" }) }) : null, renderItem: ({
       item
     }) => /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
       item.cover ? /* @__PURE__ */ jsx(Image, { source: {
         uri: item.cover
-      }, style: styles.cover }) : /* @__PURE__ */ jsx(View, { style: [styles.cover, styles.coverFallback], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 22, color: "#94a3b8" }) }),
-      /* @__PURE__ */ jsx(Text, { style: styles.name, numberOfLines: 2, children: item.name }),
-      /* @__PURE__ */ jsxs(Pressable, { onPress: () => onRecreate(item), style: styles.recreate, accessibilityRole: "button", accessibilityLabel: `Recreate ${item.name}`, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 13, color: "#fff7ed" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.recreateLabel, children: "Recreate" })
+      }, style: styles.cover }) : /* @__PURE__ */ jsx(View, { style: [styles.cover, styles.coverFallback], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 28, color: theme.mutedForeground }) }),
+      /* @__PURE__ */ jsxs(View, { style: styles.caption, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.name, numberOfLines: 2, children: item.name }),
+        /* @__PURE__ */ jsxs(Pressable, { onPress: () => onRecreate(item), hitSlop: 6, style: ({
+          pressed
+        }) => [styles.recreate, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Recreate ${item.name}`, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 14, color: "#0a0a0a" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.recreateLabel, children: "Recreate" })
+        ] })
       ] })
     ] }) })
   ] });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
     minHeight: 280
   },
+  spinner: {
+    marginTop: SPACE.xl
+  },
   head: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingBottom: 8
-  },
-  title: {
-    fontSize: 15,
-    fontWeight: "700",
-    color: "#0f172a"
+    paddingHorizontal: SPACE.lg + 4,
+    paddingBottom: SPACE.md
   },
+  title: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground
+  }),
   search: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    marginHorizontal: 16,
-    marginBottom: 8,
-    borderWidth: 1,
-    borderColor: "#e2e8f0",
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    backgroundColor: "#fff"
-  },
-  searchInput: {
+    gap: SPACE.sm,
+    minHeight: HIT,
+    marginHorizontal: SPACE.lg + 4,
+    marginBottom: SPACE.md,
+    borderRadius: RADIUS.pill,
+    paddingHorizontal: SPACE.lg - 2,
+    backgroundColor: theme.card
+  },
+  searchInput: __spreadProps(__spreadValues({}, TYPE.body), {
     flex: 1,
-    fontSize: 13,
-    paddingVertical: 8,
-    color: "#0f172a"
-  },
-  error: {
-    paddingHorizontal: 16,
-    color: "#b91c1c",
-    fontSize: 12,
-    marginBottom: 6
-  },
-  empty: {
+    paddingVertical: SPACE.sm + 2,
+    color: theme.foreground
+  }),
+  error: __spreadProps(__spreadValues({}, TYPE.caption), {
+    paddingHorizontal: SPACE.lg + 4,
+    color: theme.destructiveText,
+    marginBottom: SPACE.sm
+  }),
+  empty: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
     textAlign: "center",
-    color: "#64748b",
-    paddingVertical: 24,
-    fontSize: 13
-  },
+    color: theme.mutedForeground,
+    paddingVertical: SPACE.xxl
+  }),
   list: {
-    paddingHorizontal: 12,
-    paddingBottom: 16
+    paddingHorizontal: SPACE.lg + 4,
+    paddingBottom: SPACE.xl
   },
   row: {
-    gap: 8
+    gap: SPACE.sm + 2
   },
   card: {
     flex: 1,
-    marginBottom: 8,
-    borderRadius: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#e2e8f0",
+    aspectRatio: 4 / 5,
+    marginBottom: SPACE.sm + 2,
+    borderRadius: RADIUS.lg,
     overflow: "hidden",
-    backgroundColor: "#fff"
-  },
-  cover: {
-    width: "100%",
-    height: 96,
-    backgroundColor: "#f1f5f9"
+    backgroundColor: theme.card
   },
+  cover: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    backgroundColor: theme.card
+  }),
   coverFallback: {
     alignItems: "center",
     justifyContent: "center"
   },
-  name: {
-    paddingHorizontal: 8,
-    paddingTop: 8,
-    fontSize: 12,
-    fontWeight: "600",
-    color: "#0f172a"
-  },
+  caption: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.md - 2,
+    paddingTop: SPACE.sm + 2,
+    paddingBottom: SPACE.md - 2,
+    backgroundColor: "rgba(10,10,10,0.55)"
+  },
+  name: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: "#fafafa"
+  }),
   recreate: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 4,
+    gap: SPACE.xs + 1,
     alignSelf: "flex-start",
-    margin: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 8,
-    backgroundColor: "#ea580c"
-  },
-  recreateLabel: {
-    fontSize: 11,
-    fontWeight: "700",
-    color: "#fff7ed"
+    minHeight: 30,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.pill,
+    backgroundColor: "rgba(255,255,255,0.92)"
   },
+  recreateLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "600",
+    color: "#0a0a0a"
+  }),
   more: {
     alignSelf: "center",
-    marginVertical: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 10,
-    backgroundColor: "#f1f5f9"
-  },
-  moreLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#0f172a"
-  }
-});export{CanvasLooksPanel};//# sourceMappingURL=CanvasLooksPanel.js.map
+    minHeight: HIT,
+    justifyContent: "center",
+    marginVertical: SPACE.sm,
+    paddingHorizontal: SPACE.xl,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
+  },
+  moreLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground
+  })
+}));export{CanvasLooksPanel};//# sourceMappingURL=CanvasLooksPanel.js.map

package/lib/features/canvas/CanvasLooksPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasLooksPanel.js","sources":["../../../src/features/canvas/CanvasLooksPanel.tsx"],"sourcesContent":["/**\n * Looks gallery — native twin of canvas-surface LooksBrowser.\n * Recreate seeds the Generate video lane with the look's prompt + aspect.\n */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { ActivityIndicator, FlatList, Image, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport type { RunMediaAction } from './videoEditor/mediaActions';\nimport { LOOKS_PAGE_SIZE, listStudioLooks, type StudioLook } from './studioLooks';\nimport type { StudioCatalogClient } from './useStudioCatalogTemplates';\n\nexport function CanvasLooksPanel({\n    runAction,\n    apolloClient,\n    token,\n    indexUrl,\n    onRecreate,\n    onClose,\n}: {\n    runAction?: RunMediaAction;\n    apolloClient?: StudioCatalogClient | null;\n    token?: string | null;\n    indexUrl?: string | null;\n    onRecreate: (look: StudioLook) => void;\n    onClose: () => void;\n}) {\n    const [query, setQuery] = useState('');\n    const [search, setSearch] = useState('');\n    const [looks, setLooks] = useState<StudioLook[]>([]);\n    const [hasMore, setHasMore] = useState(false);\n    const [loading, setLoading] = useState(false);\n    const [loadingMore, setLoadingMore] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n\n    const load = useCallback(\n        async (offset: number, append: boolean) => {\n            if (!runAction && !apolloClient && !(token && indexUrl)) {\n                setError('Looks need a signed-in session.');\n                return;\n            }\n            if (append) setLoadingMore(true);\n            else setLoading(true);\n            setError(null);\n            try {\n                const page = await listStudioLooks(\n                    runAction,\n                    {\n                        query: search || undefined,\n                        offset,\n                        limit: LOOKS_PAGE_SIZE,\n                    },\n                    { client: apolloClient, token, indexUrl },\n                );\n                setLooks((prev) => (append ? [...prev, ...page.looks] : page.looks));\n                setHasMore(page.hasMore);\n                if (!append && page.looks.length === 0) {\n                    setError(null);\n                }\n            } catch (err: unknown) {\n                setError(err instanceof Error ? err.message : String(err));\n                if (!append) setLooks([]);\n            } finally {\n                setLoading(false);\n                setLoadingMore(false);\n            }\n        },\n        [apolloClient, indexUrl, runAction, search, token],\n    );\n\n    useEffect(() => {\n        void load(0, false);\n    }, [load]);\n\n    return (\n        <View style={styles.root}>\n            <View style={styles.head}>\n                <Text style={styles.title}>Looks</Text>\n                <Pressable onPress={onClose} hitSlop={8} accessibilityLabel=\"Close looks\">\n                    <MaterialCommunityIcons name=\"close\" size={20} color=\"#64748b\" />\n                </Pressable>\n            </View>\n            <View style={styles.search}>\n                <MaterialCommunityIcons name=\"magnify\" size={16} color=\"#94a3b8\" />\n                <TextInput\n                    value={query}\n                    onChangeText={setQuery}\n                    onSubmitEditing={() => setSearch(query.trim())}\n                    placeholder=\"Search looks…\"\n                    placeholderTextColor=\"#94a3b8\"\n                    style={styles.searchInput}\n                    returnKeyType=\"search\"\n                />\n            </View>\n            {error ? <Text style={styles.error}>{error}</Text> : null}\n            {loading && looks.length === 0 ? (\n                <ActivityIndicator style={{ marginTop: 24 }} color=\"#ea580c\" />\n            ) : (\n                <FlatList\n                    data={looks}\n                    keyExtractor={(item) => item.id}\n                    numColumns={2}\n                    columnWrapperStyle={styles.row}\n                    contentContainerStyle={styles.list}\n                    ListEmptyComponent={\n                        <Text style={styles.empty}>{search ? 'No looks match.' : 'No looks yet.'}</Text>\n                    }\n                    ListFooterComponent={\n                        hasMore ? (\n                            <Pressable\n                                onPress={() => void load(looks.length, true)}\n                                disabled={loadingMore}\n                                style={styles.more}\n                            >\n                                {loadingMore ? (\n                                    <ActivityIndicator color=\"#0f172a\" />\n                                ) : (\n                                    <Text style={styles.moreLabel}>Load more</Text>\n                                )}\n                            </Pressable>\n                        ) : null\n                    }\n                    renderItem={({ item }) => (\n                        <View style={styles.card}>\n                            {item.cover ? (\n                                <Image source={{ uri: item.cover }} style={styles.cover} />\n                            ) : (\n                                <View style={[styles.cover, styles.coverFallback]}>\n                                    <MaterialCommunityIcons name=\"movie-open-outline\" size={22} color=\"#94a3b8\" />\n                                </View>\n                            )}\n                            <Text style={styles.name} numberOfLines={2}>\n                                {item.name}\n                            </Text>\n                            <Pressable\n                                onPress={() => onRecreate(item)}\n                                style={styles.recreate}\n                                accessibilityRole=\"button\"\n                                accessibilityLabel={`Recreate ${item.name}`}\n                            >\n                                <MaterialCommunityIcons name=\"auto-fix\" size={13} color=\"#fff7ed\" />\n                                <Text style={styles.recreateLabel}>Recreate</Text>\n                            </Pressable>\n                        </View>\n                    )}\n                />\n            )}\n        </View>\n    );\n}\n\nconst styles = StyleSheet.create({\n    root: { flex: 1, minHeight: 280 },\n    head: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        paddingHorizontal: 16,\n        paddingBottom: 8,\n    },\n    title: { fontSize: 15, fontWeight: '700', color: '#0f172a' },\n    search: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 6,\n        marginHorizontal: 16,\n        marginBottom: 8,\n        borderWidth: 1,\n        borderColor: '#e2e8f0',\n        borderRadius: 10,\n        paddingHorizontal: 10,\n        backgroundColor: '#fff',\n    },\n    searchInput: { flex: 1, fontSize: 13, paddingVertical: 8, color: '#0f172a' },\n    error: { paddingHorizontal: 16, color: '#b91c1c', fontSize: 12, marginBottom: 6 },\n    empty: { textAlign: 'center', color: '#64748b', paddingVertical: 24, fontSize: 13 },\n    list: { paddingHorizontal: 12, paddingBottom: 16 },\n    row: { gap: 8 },\n    card: {\n        flex: 1,\n        marginBottom: 8,\n        borderRadius: 12,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: '#e2e8f0',\n        overflow: 'hidden',\n        backgroundColor: '#fff',\n    },\n    cover: { width: '100%', height: 96, backgroundColor: '#f1f5f9' },\n    coverFallback: { alignItems: 'center', justifyContent: 'center' },\n    name: { paddingHorizontal: 8, paddingTop: 8, fontSize: 12, fontWeight: '600', color: '#0f172a' },\n    recreate: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 4,\n        alignSelf: 'flex-start',\n        margin: 8,\n        paddingHorizontal: 10,\n        paddingVertical: 6,\n        borderRadius: 8,\n        backgroundColor: '#ea580c',\n    },\n    recreateLabel: { fontSize: 11, fontWeight: '700', color: '#fff7ed' },\n    more: {\n        alignSelf: 'center',\n        marginVertical: 8,\n        paddingHorizontal: 16,\n        paddingVertical: 10,\n        borderRadius: 10,\n        backgroundColor: '#f1f5f9',\n    },\n    moreLabel: { fontSize: 13, fontWeight: '600', color: '#0f172a' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CanvasLooksPanel.js","sources":["../../../src/features/canvas/CanvasLooksPanel.tsx"],"sourcesContent":["/**\n * Looks gallery — native twin of canvas-surface LooksBrowser.\n * Recreate seeds the Generate video lane with the look's prompt + aspect.\n */\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ActivityIndicator, FlatList, Image, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport type { RunMediaAction } from './videoEditor/mediaActions';\nimport { LOOKS_PAGE_SIZE, listStudioLooks, type StudioLook } from './studioLooks';\nimport type { StudioCatalogClient } from './useStudioCatalogTemplates';\nimport { useCanvasTheme, themedStyles, type CanvasPalette } from './canvasTheme';\nimport { Pressable, HIT, IconButton, RADIUS, SPACE, TYPE, pressedStyle } from './canvasUi';\n\nexport function CanvasLooksPanel({\n    runAction,\n    apolloClient,\n    token,\n    indexUrl,\n    onRecreate,\n    onClose,\n}: {\n    runAction?: RunMediaAction;\n    apolloClient?: StudioCatalogClient | null;\n    token?: string | null;\n    indexUrl?: string | null;\n    onRecreate: (look: StudioLook) => void;\n    onClose: () => void;\n}) {\n    const theme = useCanvasTheme();\n    const styles = useMemo(() => makeStyles(theme), [theme]);\n    const [query, setQuery] = useState('');\n    const [search, setSearch] = useState('');\n    const [looks, setLooks] = useState<StudioLook[]>([]);\n    const [hasMore, setHasMore] = useState(false);\n    const [loading, setLoading] = useState(false);\n    const [loadingMore, setLoadingMore] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n\n    const load = useCallback(\n        async (offset: number, append: boolean) => {\n            if (!runAction && !apolloClient && !(token && indexUrl)) {\n                setError('Looks need a signed-in session.');\n                return;\n            }\n            if (append) setLoadingMore(true);\n            else setLoading(true);\n            setError(null);\n            try {\n                const page = await listStudioLooks(\n                    runAction,\n                    {\n                        query: search || undefined,\n                        offset,\n                        limit: LOOKS_PAGE_SIZE,\n                    },\n                    { client: apolloClient, token, indexUrl },\n                );\n                setLooks((prev) => (append ? [...prev, ...page.looks] : page.looks));\n                setHasMore(page.hasMore);\n                if (!append && page.looks.length === 0) {\n                    setError(null);\n                }\n            } catch (err: unknown) {\n                setError(err instanceof Error ? err.message : String(err));\n                if (!append) setLooks([]);\n            } finally {\n                setLoading(false);\n                setLoadingMore(false);\n            }\n        },\n        [apolloClient, indexUrl, runAction, search, token],\n    );\n\n    useEffect(() => {\n        void load(0, false);\n    }, [load]);\n\n    return (\n        <View style={styles.root}>\n            <View style={styles.head}>\n                <Text style={styles.title} accessibilityRole=\"header\">\n                    Looks\n                </Text>\n                <IconButton icon=\"close\" label=\"Close looks\" tone=\"filled\" size={36} onPress={onClose} />\n            </View>\n            <View style={styles.search}>\n                <MaterialCommunityIcons name=\"magnify\" size={18} color={theme.mutedForeground} />\n                <TextInput\n                    value={query}\n                    onChangeText={setQuery}\n                    onSubmitEditing={() => setSearch(query.trim())}\n                    placeholder=\"Search looks…\"\n                    placeholderTextColor={theme.mutedForeground}\n                    style={styles.searchInput}\n                    returnKeyType=\"search\"\n                />\n            </View>\n            {error ? <Text style={styles.error}>{error}</Text> : null}\n            {loading && looks.length === 0 ? (\n                <ActivityIndicator style={styles.spinner} color={theme.mutedForeground} />\n            ) : (\n                <FlatList\n                    data={looks}\n                    keyExtractor={(item) => item.id}\n                    numColumns={2}\n                    columnWrapperStyle={styles.row}\n                    contentContainerStyle={styles.list}\n                    ListEmptyComponent={\n                        <Text style={styles.empty}>{search ? 'No looks match.' : 'No looks yet.'}</Text>\n                    }\n                    ListFooterComponent={\n                        hasMore ? (\n                            <Pressable\n                                onPress={() => void load(looks.length, true)}\n                                disabled={loadingMore}\n                                style={({ pressed }) => [styles.more, pressedStyle(pressed)]}\n                            >\n                                {loadingMore ? (\n                                    <ActivityIndicator color={theme.foreground} />\n                                ) : (\n                                    <Text style={styles.moreLabel}>Load more</Text>\n                                )}\n                            </Pressable>\n                        ) : null\n                    }\n                    renderItem={({ item }) => (\n                        <View style={styles.card}>\n                            {item.cover ? (\n                                <Image source={{ uri: item.cover }} style={styles.cover} />\n                            ) : (\n                                <View style={[styles.cover, styles.coverFallback]}>\n                                    <MaterialCommunityIcons\n                                        name=\"movie-open-outline\"\n                                        size={28}\n                                        color={theme.mutedForeground}\n                                    />\n                                </View>\n                            )}\n                            <View style={styles.caption}>\n                                <Text style={styles.name} numberOfLines={2}>\n                                    {item.name}\n                                </Text>\n                                <Pressable\n                                    onPress={() => onRecreate(item)}\n                                    hitSlop={6}\n                                    style={({ pressed }) => [styles.recreate, pressedStyle(pressed)]}\n                                    accessibilityRole=\"button\"\n                                    accessibilityLabel={`Recreate ${item.name}`}\n                                >\n                                    <MaterialCommunityIcons name=\"auto-fix\" size={14} color=\"#0a0a0a\" />\n                                    <Text style={styles.recreateLabel}>Recreate</Text>\n                                </Pressable>\n                            </View>\n                        </View>\n                    )}\n                />\n            )}\n        </View>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        root: { flex: 1, minHeight: 280 },\n        spinner: { marginTop: SPACE.xl },\n        head: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            paddingHorizontal: SPACE.lg + 4,\n            paddingBottom: SPACE.md,\n        },\n        title: { ...TYPE.title, color: theme.foreground },\n        search: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: SPACE.sm,\n            minHeight: HIT,\n            marginHorizontal: SPACE.lg + 4,\n            marginBottom: SPACE.md,\n            borderRadius: RADIUS.pill,\n            paddingHorizontal: SPACE.lg - 2,\n            backgroundColor: theme.card,\n        },\n        searchInput: { ...TYPE.body, flex: 1, paddingVertical: SPACE.sm + 2, color: theme.foreground },\n        error: {\n            ...TYPE.caption,\n            paddingHorizontal: SPACE.lg + 4,\n            color: theme.destructiveText,\n            marginBottom: SPACE.sm,\n        },\n        empty: {\n            ...TYPE.body,\n            fontSize: 14,\n            textAlign: 'center',\n            color: theme.mutedForeground,\n            paddingVertical: SPACE.xxl,\n        },\n        list: { paddingHorizontal: SPACE.lg + 4, paddingBottom: SPACE.xl },\n        row: { gap: SPACE.sm + 2 },\n        card: {\n            flex: 1,\n            aspectRatio: 4 / 5,\n            marginBottom: SPACE.sm + 2,\n            borderRadius: RADIUS.lg,\n            overflow: 'hidden',\n            backgroundColor: theme.card,\n        },\n        cover: { ...StyleSheet.absoluteFillObject, backgroundColor: theme.card },\n        coverFallback: { alignItems: 'center', justifyContent: 'center' },\n        caption: {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            gap: SPACE.sm,\n            paddingHorizontal: SPACE.md - 2,\n            paddingTop: SPACE.sm + 2,\n            paddingBottom: SPACE.md - 2,\n            backgroundColor: 'rgba(10,10,10,0.55)',\n        },\n        name: { ...TYPE.label, color: '#fafafa' },\n        recreate: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: SPACE.xs + 1,\n            alignSelf: 'flex-start',\n            minHeight: 30,\n            paddingHorizontal: SPACE.md,\n            borderRadius: RADIUS.pill,\n            backgroundColor: 'rgba(255,255,255,0.92)',\n        },\n        recreateLabel: { ...TYPE.caption, fontWeight: '600', color: '#0a0a0a' },\n        more: {\n            alignSelf: 'center',\n            minHeight: HIT,\n            justifyContent: 'center',\n            marginVertical: SPACE.sm,\n            paddingHorizontal: SPACE.xl,\n            borderRadius: RADIUS.pill,\n            backgroundColor: theme.card,\n        },\n        moreLabel: { ...TYPE.label, color: theme.foreground },\n    }),\n);\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/CanvasModelPicker.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {StyleSheet,Platform,View,Pressable,Text,ScrollView}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {groupCanvasChatModels}from'./canvasAgentChat.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx}from'react/jsx-runtime';import {useMemo}from'react';import {View,StyleSheet,Text,ScrollView,Platform}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {groupCanvasChatModels}from'./canvasAgentChat.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Pressable,pressedStyle,SPACE,RADIUS,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -24,15 +24,18 @@ function CanvasModelPicker({
   onClose,
   title = "Select model"
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const selected = models.find((m) => m.id === selectedId);
   const groups = groupCanvasChatModels(models);
   return /* @__PURE__ */ jsxs(View, { style: styles.scrim, pointerEvents: "auto", children: [
     /* @__PURE__ */ jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: onClose, accessibilityLabel: "Close model picker" }),
     /* @__PURE__ */ jsxs(View, { style: styles.sheet, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chip", size: 16, color: "#64748b" }),
         /* @__PURE__ */ jsx(Text, { style: styles.headTitle, children: title }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityLabel: "Close model picker", style: styles.close, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#64748b" }) })
+        /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityLabel: "Close model picker", style: ({
+          pressed
+        }) => [styles.close, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: theme.foreground }) })
       ] }),
       selected ? /* @__PURE__ */ jsxs(View, { style: styles.selectedBar, children: [
         /* @__PURE__ */ jsx(Text, { style: styles.selectedKicker, children: "Selected" }),
@@ -45,132 +48,129 @@ function CanvasModelPicker({
         /* @__PURE__ */ jsx(Text, { style: styles.groupLabel, children: group }),
         options.map((m) => {
           const active = m.id === selectedId;
-          return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+          return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
             onSelect(m.id);
             onClose();
-          }, style: [styles.row, active && styles.rowOn], accessibilityRole: "button", accessibilityState: {
+          }, style: ({
+            pressed
+          }) => [styles.row, active && styles.rowOn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityState: {
             selected: active
-          }, children: /* @__PURE__ */ jsxs(View, { style: styles.rowBody, children: [
-            /* @__PURE__ */ jsxs(View, { style: styles.rowTitleLine, children: [
+          }, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.rowBody, children: [
               /* @__PURE__ */ jsx(Text, { style: styles.rowTitle, numberOfLines: 1, children: m.title }),
-              active ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check", size: 16, color: "#0f172a" }) : null
+              m.description ? /* @__PURE__ */ jsx(Text, { style: styles.rowDesc, numberOfLines: 1, children: m.description }) : /* @__PURE__ */ jsx(Text, { style: styles.rowId, numberOfLines: 1, children: m.id })
             ] }),
-            /* @__PURE__ */ jsx(Text, { style: styles.rowId, numberOfLines: 1, children: m.id }),
-            m.description ? /* @__PURE__ */ jsx(Text, { style: styles.rowDesc, numberOfLines: 2, children: m.description }) : null
-          ] }) }, m.id);
+            /* @__PURE__ */ jsx(View, { style: [styles.check, active && styles.checkOn], children: active ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check", size: 14, color: theme.background }) : null })
+          ] }, m.id);
         })
       ] }, group)) })
     ] })
   ] });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   scrim: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     zIndex: 40,
     elevation: 40,
-    backgroundColor: "rgba(0,0,0,0.4)",
+    backgroundColor: "rgba(0,0,0,0.45)",
     justifyContent: "center",
-    padding: 16
+    padding: SPACE.lg
   }),
   sheet: {
     maxHeight: "80%",
-    borderRadius: 16,
-    backgroundColor: "#fff",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#e2e8f0",
+    borderRadius: RADIUS.xl,
+    backgroundColor: theme.surface,
     overflow: "hidden"
   },
   head: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#e2e8f0"
+    gap: SPACE.sm,
+    paddingLeft: SPACE.xl - 4,
+    paddingRight: SPACE.sm,
+    paddingTop: SPACE.md,
+    paddingBottom: SPACE.xs
   },
-  headTitle: {
+  headTitle: __spreadProps(__spreadValues({}, TYPE.title), {
     flex: 1,
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#0f172a"
-  },
+    color: theme.foreground
+  }),
   close: {
-    padding: 4
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.card
   },
   selectedBar: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    backgroundColor: "#f8fafc",
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#e2e8f0"
-  },
-  selectedKicker: {
-    fontSize: 11,
-    fontWeight: "600",
-    letterSpacing: 0.6,
-    textTransform: "uppercase",
-    color: "#64748b"
+    gap: SPACE.xs + 2,
+    paddingHorizontal: SPACE.xl - 4,
+    paddingBottom: SPACE.sm
   },
-  selectedTitle: {
+  selectedKicker: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.mutedForeground
+  }),
+  selectedTitle: __spreadProps(__spreadValues({}, TYPE.caption), {
     flex: 1,
-    fontSize: 14,
-    fontWeight: "500",
-    color: "#0f172a"
-  },
+    fontWeight: "600",
+    color: theme.foreground
+  }),
   list: {
-    maxHeight: 420
+    maxHeight: 440
   },
   listBody: {
-    padding: 8,
-    paddingBottom: 16
+    paddingHorizontal: SPACE.sm,
+    paddingBottom: SPACE.md
   },
   group: {
-    marginBottom: 8
-  },
-  groupLabel: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    fontSize: 11,
-    fontWeight: "600",
-    letterSpacing: 0.6,
-    textTransform: "uppercase",
-    color: "#94a3b8"
+    marginTop: SPACE.sm
   },
+  groupLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.xs + 2,
+    color: theme.mutedForeground
+  }),
   row: {
-    borderRadius: 10,
-    paddingHorizontal: 12,
-    paddingVertical: 8
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.md,
+    minHeight: HIT + 12,
+    borderRadius: RADIUS.md + 2,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm + 2
   },
   rowOn: {
-    backgroundColor: "#f1f5f9"
+    backgroundColor: theme.card
   },
   rowBody: {
     minWidth: 0,
     flex: 1
   },
-  rowTitleLine: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  rowTitle: {
-    flex: 1,
-    fontSize: 14,
+  rowTitle: __spreadProps(__spreadValues({}, TYPE.body), {
     fontWeight: "600",
-    color: "#0f172a"
-  },
+    color: theme.foreground
+  }),
   rowId: {
     marginTop: 2,
     fontSize: 11,
     fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
-    color: "#94a3b8"
+    color: theme.mutedForeground
   },
-  rowDesc: {
+  rowDesc: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
     marginTop: 2,
-    fontSize: 12,
-    color: "#94a3b8"
+    color: theme.mutedForeground
+  }),
+  check: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkOn: {
+    backgroundColor: theme.foreground
   }
-});export{CanvasModelPicker};//# sourceMappingURL=CanvasModelPicker.js.map
+}));export{CanvasModelPicker};//# sourceMappingURL=CanvasModelPicker.js.map