@adminide-stack/yantra-mobile 12.0.69-alpha.9 → 12.0.69

package/lib/features/canvas/CanvasLibrarySheet.js

@@ -0,0 +1,355 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {useState,useEffect,useMemo,useRef}from'react';import {StyleSheet,View,Text,Pressable,TextInput,ScrollView,Image,useWindowDimensions,Animated}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {deleteStorageFile,listStorageLibraryPage,createStorageDownloadUrl}from'./storageLibrary.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 fileNameFromSrc(src) {
+  const path = src.split("?")[0];
+  try {
+    return decodeURIComponent(path.slice(path.lastIndexOf("/") + 1)) || "";
+  } catch (e) {
+    return path.slice(path.lastIndexOf("/") + 1);
+  }
+}
+function itemFileName(item) {
+  const fromUrl = fileNameFromSrc(item.src);
+  if (fromUrl && /\.[a-z0-9]{2,5}$/i.test(fromUrl)) return fromUrl;
+  return item.generatedAssetName || fromUrl || item.type;
+}
+function LibrarySkeletons() {
+  const {
+    width
+  } = useWindowDimensions();
+  const tile = Math.max(120, Math.floor((width - 48) / 2));
+  const pulse = useRef(new Animated.Value(0.4)).current;
+  useEffect(() => {
+    const loop = Animated.loop(Animated.sequence([Animated.timing(pulse, {
+      toValue: 1,
+      duration: 650,
+      useNativeDriver: true
+    }), Animated.timing(pulse, {
+      toValue: 0.35,
+      duration: 650,
+      useNativeDriver: true
+    })]));
+    loop.start();
+    return () => loop.stop();
+  }, [pulse]);
+  return /* @__PURE__ */ jsx(View, { style: styles.grid, children: Array.from({
+    length: 12
+  }, (_, i) => /* @__PURE__ */ jsx(Animated.View, { style: [styles.skeleton, {
+    width: tile,
+    height: tile,
+    opacity: pulse
+  }] }, i)) });
+}
+const FILTERS = [{
+  id: "all",
+  label: "All"
+}, {
+  id: "image",
+  label: "Images"
+}, {
+  id: "video",
+  label: "Video"
+}, {
+  id: "audio",
+  label: "Audio"
+}];
+function StorageTile({
+  file,
+  runAction,
+  onPick,
+  onDelete
+}) {
+  const [url, setUrl] = useState(file.url);
+  return /* @__PURE__ */ jsxs(View, { style: styles.tile, children: [
+    /* @__PURE__ */ jsxs(Pressable, { onPress: () => onPick(__spreadProps(__spreadValues({}, file), {
+      url
+    })), style: styles.tileHit, accessibilityRole: "button", children: [
+      file.kind === "image" ? /* @__PURE__ */ jsx(Image, { source: {
+        uri: url
+      }, style: styles.thumb, onError: () => {
+        if (!runAction) return;
+        void createStorageDownloadUrl(runAction, file.objectKey || file.url).then(setUrl).catch(() => void 0);
+      } }) : /* @__PURE__ */ jsx(View, { style: [styles.thumb, styles.thumbIcon], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: file.kind === "video" ? "play" : "music", size: 28, color: "#f8fafc" }) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.tileName, numberOfLines: 1, children: file.name })
+    ] }),
+    file.fileInfoId && onDelete ? /* @__PURE__ */ jsx(Pressable, { onPress: () => onDelete(file), style: styles.deleteBtn, accessibilityRole: "button", accessibilityLabel: `Delete ${file.name}`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 16, color: "#b91c1c" }) }) : null
+  ] });
+}
+function CanvasLibraryPanel({
+  title,
+  boards,
+  boardId,
+  runAction,
+  onClose,
+  onPlace,
+  onPickStorage
+}) {
+  const [filter, setFilter] = useState("all");
+  const [query, setQuery] = useState("");
+  const [storage, setStorage] = useState(null);
+  const [storageError, setStorageError] = useState(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const useStorage = !boardId;
+  const refreshStorage = (skip = 0, append = false) => {
+    if (!runAction) return;
+    if (append) setLoadingMore(true);
+    else setStorageError(null);
+    void listStorageLibraryPage(runAction, {
+      limit: 40,
+      skip
+    }).then((page) => {
+      setStorage((prev) => append && prev ? [...prev, ...page.files] : page.files);
+      setHasMore(page.hasMore);
+    }).catch((err) => {
+      if (!append) setStorageError(err instanceof Error ? err.message : "Could not load library");
+    }).finally(() => setLoadingMore(false));
+  };
+  useEffect(() => {
+    if (!useStorage || !runAction) {
+      setStorage(null);
+      return void 0;
+    }
+    refreshStorage(0, false);
+    return void 0;
+  }, [runAction, useStorage]);
+  const boardItems = useMemo(() => {
+    const source = boardId ? boards.filter((b) => b.channelId === boardId) : boards;
+    const rows = [];
+    const q = query.trim().toLowerCase();
+    for (const board of source) {
+      for (const item of board.board.items) {
+        if (filter !== "all" && item.type !== filter) continue;
+        const name = itemFileName(item).toLowerCase();
+        if (q && !name.includes(q)) continue;
+        rows.push(item);
+      }
+    }
+    return rows;
+  }, [boardId, boards, filter, query]);
+  const storageItems = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return (storage != null ? storage : []).filter((file) => {
+      if (filter !== "all" && file.kind !== filter) return false;
+      if (q && !file.name.toLowerCase().includes(q)) return false;
+      return true;
+    });
+  }, [filter, query, storage]);
+  const waiting = useStorage && Boolean(runAction) && storage === null && !storageError;
+  const showStorageGrid = useStorage && storage !== null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#64748b" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.filters, children: FILTERS.map((f) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setFilter(f.id), style: [styles.chip, filter === f.id && styles.chipOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, filter === f.id && styles.chipLabelOn], children: f.label }) }, f.id)) }),
+      /* @__PURE__ */ jsxs(View, { style: styles.search, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 14, color: "#94a3b8" }),
+        /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: "Search by name...", placeholderTextColor: "#94a3b8", style: styles.searchInput })
+      ] })
+    ] }),
+    waiting ? /* @__PURE__ */ jsx(ScrollView, { style: styles.body, contentContainerStyle: styles.gridWrap, children: /* @__PURE__ */ jsx(LibrarySkeletons, {}) }) : storageError ? /* @__PURE__ */ jsxs(View, { style: styles.empty, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.emptyTitle, children: "Couldn\u2019t load library" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.emptyDetail, children: storageError })
+    ] }) : (showStorageGrid ? storageItems.length : boardItems.length) === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.empty, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.emptyTitle, children: "Nothing here yet" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.emptyDetail, children: "Generate or upload media and it will show up in this library." })
+    ] }) : showStorageGrid ? /* @__PURE__ */ jsxs(ScrollView, { style: styles.body, contentContainerStyle: styles.grid, children: [
+      storageItems.map((file) => /* @__PURE__ */ jsx(StorageTile, { file, runAction, onPick: (picked) => onPickStorage == null ? void 0 : onPickStorage(picked.kind, picked.url, picked.name), onDelete: (target) => {
+        if (!runAction || !target.fileInfoId) return;
+        void deleteStorageFile(runAction, target.fileInfoId).then(() => setStorage((prev) => (prev != null ? prev : []).filter((f) => f.id !== target.id))).catch(() => void 0);
+      } }, file.id)),
+      hasMore ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+        var _a;
+        return refreshStorage((_a = storage == null ? void 0 : storage.length) != null ? _a : 0, true);
+      }, disabled: loadingMore, style: styles.loadMore, children: /* @__PURE__ */ jsx(Text, { style: styles.loadMoreLabel, children: loadingMore ? "Loading\u2026" : "Load more" }) }) : null
+    ] }) : /* @__PURE__ */ jsx(ScrollView, { style: styles.body, contentContainerStyle: styles.grid, children: boardItems.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onPlace(item), style: styles.tile, accessibilityRole: "button", children: [
+      item.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
+        uri: item.src
+      }, style: styles.thumb }) : /* @__PURE__ */ jsx(View, { style: [styles.thumb, styles.thumbIcon], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: item.type === "video" ? "play" : "music", size: 28, color: "#f8fafc" }) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.tileName, numberOfLines: 1, children: itemFileName(item) })
+    ] }, item.id)) })
+  ] });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    height: 48,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#e2e8f0"
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  toolbar: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  },
+  filters: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 6
+  },
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 999,
+    backgroundColor: "#f1f5f9",
+    alignSelf: "center"
+  },
+  chipOn: {
+    backgroundColor: "#0f172a"
+  },
+  chipLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#64748b"
+  },
+  chipLabelOn: {
+    color: "#f8fafc"
+  },
+  search: {
+    flexGrow: 1,
+    flexBasis: 160,
+    minWidth: 140,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#e2e8f0",
+    paddingHorizontal: 10,
+    backgroundColor: "#ffffff",
+    height: 32
+  },
+  searchInput: {
+    flex: 1,
+    paddingVertical: 0,
+    fontSize: 12,
+    color: "#0f172a"
+  },
+  body: {
+    flex: 1,
+    minHeight: 0
+  },
+  empty: {
+    flex: 1,
+    paddingHorizontal: 28,
+    paddingVertical: 40,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  emptyTitle: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  emptyDetail: {
+    marginTop: 6,
+    fontSize: 13,
+    color: "#64748b",
+    textAlign: "center"
+  },
+  gridWrap: {
+    paddingBottom: 16
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 8
+  },
+  tile: {
+    width: "48%",
+    flexGrow: 1,
+    flexBasis: "47%",
+    borderRadius: 10,
+    overflow: "hidden",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#e2e8f0",
+    backgroundColor: "#fff"
+  },
+  tileHit: {
+    flex: 1
+  },
+  deleteBtn: {
+    position: "absolute",
+    top: 6,
+    right: 6,
+    padding: 4,
+    backgroundColor: "rgba(255,255,255,0.9)",
+    borderRadius: 8
+  },
+  loadMore: {
+    width: "100%",
+    marginTop: 8,
+    paddingVertical: 12,
+    alignItems: "center",
+    borderRadius: 10,
+    backgroundColor: "#f1f5f9"
+  },
+  loadMoreLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  skeleton: {
+    borderRadius: 8,
+    backgroundColor: "#e2e8f0",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#e2e8f0"
+  },
+  thumb: {
+    width: "100%",
+    aspectRatio: 1,
+    borderRadius: 8,
+    backgroundColor: "#e2e8f0"
+  },
+  thumbIcon: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#0f172a"
+  },
+  tileName: {
+    marginTop: 6,
+    fontSize: 11,
+    color: "#475569",
+    paddingHorizontal: 6,
+    paddingBottom: 6
+  }
+});export{CanvasLibraryPanel};//# sourceMappingURL=CanvasLibrarySheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasLibrarySheet.js","sources":["../../../src/features/canvas/CanvasLibrarySheet.tsx"],"sourcesContent":["/**\n * Native twin of canvas-surface Library / This-chat panels.\n * Your library reads yantra-storage (filenames like the web grid).\n * This chat still lists items on the open board.\n */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    Animated,\n    Image,\n    Pressable,\n    ScrollView,\n    StyleSheet,\n    Text,\n    TextInput,\n    View,\n    useWindowDimensions,\n} from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport type { CanvasItem } from './canvasCore';\nimport type { CanvasBoardSummary } from './surfaceIndex';\nimport {\n    createStorageDownloadUrl,\n    deleteStorageFile,\n    listStorageLibraryPage,\n    type StorageFile,\n    type StorageKind,\n} from './storageLibrary';\nimport type { RunMediaAction } from './videoEditor/mediaActions';\n\nfunction fileNameFromSrc(src: string): string {\n    const path = src.split('?')[0];\n    try {\n        return decodeURIComponent(path.slice(path.lastIndexOf('/') + 1)) || '';\n    } catch {\n        return path.slice(path.lastIndexOf('/') + 1);\n    }\n}\n\nfunction itemFileName(item: CanvasItem): string {\n    const fromUrl = fileNameFromSrc(item.src);\n    if (fromUrl && /\\.[a-z0-9]{2,5}$/i.test(fromUrl)) return fromUrl;\n    return item.generatedAssetName || fromUrl || item.type;\n}\n\ntype Filter = 'all' | StorageKind;\n\n/** Web `TileSkeletons` — square muted tiles that pulse while LIST_FILES runs. */\nfunction LibrarySkeletons() {\n    const { width } = useWindowDimensions();\n    const tile = Math.max(120, Math.floor((width - 48) / 2));\n    const pulse = useRef(new Animated.Value(0.4)).current;\n    useEffect(() => {\n        const loop = Animated.loop(\n            Animated.sequence([\n                Animated.timing(pulse, { toValue: 1, duration: 650, useNativeDriver: true }),\n                Animated.timing(pulse, { toValue: 0.35, duration: 650, useNativeDriver: true }),\n            ]),\n        );\n        loop.start();\n        return () => loop.stop();\n    }, [pulse]);\n    return (\n        <View style={styles.grid}>\n            {Array.from({ length: 12 }, (_, i) => (\n                <Animated.View key={i} style={[styles.skeleton, { width: tile, height: tile, opacity: pulse }]} />\n            ))}\n        </View>\n    );\n}\n\nconst FILTERS: ReadonlyArray<{ id: Filter; label: string }> = [\n    { id: 'all', label: 'All' },\n    { id: 'image', label: 'Images' },\n    { id: 'video', label: 'Video' },\n    { id: 'audio', label: 'Audio' },\n];\n\nfunction StorageTile({\n    file,\n    runAction,\n    onPick,\n    onDelete,\n}: {\n    file: StorageFile;\n    runAction?: RunMediaAction;\n    onPick: (file: StorageFile) => void;\n    onDelete?: (file: StorageFile) => void;\n}) {\n    const [url, setUrl] = useState(file.url);\n    return (\n        <View style={styles.tile}>\n            <Pressable onPress={() => onPick({ ...file, url })} style={styles.tileHit} accessibilityRole=\"button\">\n                {file.kind === 'image' ? (\n                    <Image\n                        source={{ uri: url }}\n                        style={styles.thumb}\n                        onError={() => {\n                            if (!runAction) return;\n                            void createStorageDownloadUrl(runAction, file.objectKey || file.url)\n                                .then(setUrl)\n                                .catch(() => undefined);\n                        }}\n                    />\n                ) : (\n                    <View style={[styles.thumb, styles.thumbIcon]}>\n                        <MaterialCommunityIcons\n                            name={file.kind === 'video' ? 'play' : 'music'}\n                            size={28}\n                            color=\"#f8fafc\"\n                        />\n                    </View>\n                )}\n                <Text style={styles.tileName} numberOfLines={1}>\n                    {file.name}\n                </Text>\n            </Pressable>\n            {file.fileInfoId && onDelete ? (\n                <Pressable\n                    onPress={() => onDelete(file)}\n                    style={styles.deleteBtn}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel={`Delete ${file.name}`}\n                >\n                    <MaterialCommunityIcons name=\"trash-can-outline\" size={16} color=\"#b91c1c\" />\n                </Pressable>\n            ) : null}\n        </View>\n    );\n}\n\nexport function CanvasLibraryPanel({\n    title,\n    boards,\n    boardId,\n    runAction,\n    onClose,\n    onPlace,\n    onPickStorage,\n}: {\n    title: string;\n    boards: CanvasBoardSummary[];\n    boardId?: string | null;\n    runAction?: RunMediaAction;\n    onClose: () => void;\n    onPlace: (item: CanvasItem) => void;\n    onPickStorage?: (kind: StorageKind, url: string, name: string) => void;\n}) {\n    const [filter, setFilter] = useState<Filter>('all');\n    const [query, setQuery] = useState('');\n    const [storage, setStorage] = useState<StorageFile[] | null>(null);\n    const [storageError, setStorageError] = useState<string | null>(null);\n    const [hasMore, setHasMore] = useState(false);\n    const [loadingMore, setLoadingMore] = useState(false);\n    const useStorage = !boardId;\n\n    const refreshStorage = (skip = 0, append = false) => {\n        if (!runAction) return;\n        if (append) setLoadingMore(true);\n        else setStorageError(null);\n        void listStorageLibraryPage(runAction, { limit: 40, skip })\n            .then((page) => {\n                setStorage((prev) => (append && prev ? [...prev, ...page.files] : page.files));\n                setHasMore(page.hasMore);\n            })\n            .catch((err: unknown) => {\n                if (!append) setStorageError(err instanceof Error ? err.message : 'Could not load library');\n            })\n            .finally(() => setLoadingMore(false));\n    };\n\n    useEffect(() => {\n        if (!useStorage || !runAction) {\n            setStorage(null);\n            return undefined;\n        }\n        refreshStorage(0, false);\n        return undefined;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [runAction, useStorage]);\n\n    const boardItems = useMemo(() => {\n        const source = boardId ? boards.filter((b) => b.channelId === boardId) : boards;\n        const rows: CanvasItem[] = [];\n        const q = query.trim().toLowerCase();\n        for (const board of source) {\n            for (const item of board.board.items) {\n                if (filter !== 'all' && item.type !== filter) continue;\n                const name = itemFileName(item).toLowerCase();\n                if (q && !name.includes(q)) continue;\n                rows.push(item);\n            }\n        }\n        return rows;\n    }, [boardId, boards, filter, query]);\n\n    const storageItems = useMemo(() => {\n        const q = query.trim().toLowerCase();\n        return (storage ?? []).filter((file) => {\n            if (filter !== 'all' && file.kind !== filter) return false;\n            if (q && !file.name.toLowerCase().includes(q)) return false;\n            return true;\n        });\n    }, [filter, query, storage]);\n\n    const waiting = useStorage && Boolean(runAction) && storage === null && !storageError;\n    const showStorageGrid = useStorage && storage !== null;\n\n    return (\n        <View style={styles.root}>\n            <View style={styles.header}>\n                <Text style={styles.title}>{title}</Text>\n                <Pressable onPress={onClose} hitSlop={10} accessibilityRole=\"button\" accessibilityLabel=\"Close\">\n                    <MaterialCommunityIcons name=\"close\" size={18} color=\"#64748b\" />\n                </Pressable>\n            </View>\n            <View style={styles.toolbar}>\n                <View style={styles.filters}>\n                    {FILTERS.map((f) => (\n                        <Pressable\n                            key={f.id}\n                            onPress={() => setFilter(f.id)}\n                            style={[styles.chip, filter === f.id && styles.chipOn]}\n                        >\n                            <Text style={[styles.chipLabel, filter === f.id && styles.chipLabelOn]}>{f.label}</Text>\n                        </Pressable>\n                    ))}\n                </View>\n                <View style={styles.search}>\n                    <MaterialCommunityIcons name=\"magnify\" size={14} color=\"#94a3b8\" />\n                    <TextInput\n                        value={query}\n                        onChangeText={setQuery}\n                        placeholder=\"Search by name...\"\n                        placeholderTextColor=\"#94a3b8\"\n                        style={styles.searchInput}\n                    />\n                </View>\n            </View>\n            {waiting ? (\n                <ScrollView style={styles.body} contentContainerStyle={styles.gridWrap}>\n                    <LibrarySkeletons />\n                </ScrollView>\n            ) : storageError ? (\n                <View style={styles.empty}>\n                    <Text style={styles.emptyTitle}>Couldn’t load library</Text>\n                    <Text style={styles.emptyDetail}>{storageError}</Text>\n                </View>\n            ) : (showStorageGrid ? storageItems.length : boardItems.length) === 0 ? (\n                <View style={styles.empty}>\n                    <Text style={styles.emptyTitle}>Nothing here yet</Text>\n                    <Text style={styles.emptyDetail}>\n                        Generate or upload media and it will show up in this library.\n                    </Text>\n                </View>\n            ) : showStorageGrid ? (\n                <ScrollView style={styles.body} contentContainerStyle={styles.grid}>\n                    {storageItems.map((file) => (\n                        <StorageTile\n                            key={file.id}\n                            file={file}\n                            runAction={runAction}\n                            onPick={(picked) => onPickStorage?.(picked.kind, picked.url, picked.name)}\n                            onDelete={(target) => {\n                                if (!runAction || !target.fileInfoId) return;\n                                void deleteStorageFile(runAction, target.fileInfoId)\n                                    .then(() => setStorage((prev) => (prev ?? []).filter((f) => f.id !== target.id)))\n                                    .catch(() => undefined);\n                            }}\n                        />\n                    ))}\n                    {hasMore ? (\n                        <Pressable\n                            onPress={() => refreshStorage(storage?.length ?? 0, true)}\n                            disabled={loadingMore}\n                            style={styles.loadMore}\n                        >\n                            <Text style={styles.loadMoreLabel}>{loadingMore ? 'Loading…' : 'Load more'}</Text>\n                        </Pressable>\n                    ) : null}\n                </ScrollView>\n            ) : (\n                <ScrollView style={styles.body} contentContainerStyle={styles.grid}>\n                    {boardItems.map((item) => (\n                        <Pressable\n                            key={item.id}\n                            onPress={() => onPlace(item)}\n                            style={styles.tile}\n                            accessibilityRole=\"button\"\n                        >\n                            {item.type === 'image' ? (\n                                <Image source={{ uri: item.src }} style={styles.thumb} />\n                            ) : (\n                                <View style={[styles.thumb, styles.thumbIcon]}>\n                                    <MaterialCommunityIcons\n                                        name={item.type === 'video' ? 'play' : 'music'}\n                                        size={28}\n                                        color=\"#f8fafc\"\n                                    />\n                                </View>\n                            )}\n                            <Text style={styles.tileName} numberOfLines={1}>\n                                {itemFileName(item)}\n                            </Text>\n                        </Pressable>\n                    ))}\n                </ScrollView>\n            )}\n        </View>\n    );\n}\n\nconst styles = StyleSheet.create({\n    root: { flex: 1, minHeight: 0 },\n    header: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        paddingHorizontal: 16,\n        height: 48,\n        borderBottomWidth: StyleSheet.hairlineWidth,\n        borderBottomColor: '#e2e8f0',\n    },\n    title: { fontSize: 14, fontWeight: '600', color: '#0f172a' },\n    toolbar: {\n        flexGrow: 0,\n        flexShrink: 0,\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n        alignItems: 'center',\n        gap: 8,\n        paddingHorizontal: 16,\n        paddingVertical: 10,\n    },\n    filters: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 6 },\n    chip: {\n        paddingHorizontal: 12,\n        paddingVertical: 4,\n        borderRadius: 999,\n        backgroundColor: '#f1f5f9',\n        alignSelf: 'center',\n    },\n    chipOn: { backgroundColor: '#0f172a' },\n    chipLabel: { fontSize: 12, fontWeight: '600', color: '#64748b' },\n    chipLabelOn: { color: '#f8fafc' },\n    search: {\n        flexGrow: 1,\n        flexBasis: 160,\n        minWidth: 140,\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 6,\n        borderRadius: 999,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: '#e2e8f0',\n        paddingHorizontal: 10,\n        backgroundColor: '#ffffff',\n        height: 32,\n    },\n    searchInput: { flex: 1, paddingVertical: 0, fontSize: 12, color: '#0f172a' },\n    body: { flex: 1, minHeight: 0 },\n    empty: { flex: 1, paddingHorizontal: 28, paddingVertical: 40, alignItems: 'center', justifyContent: 'center' },\n    emptyTitle: { fontSize: 15, fontWeight: '600', color: '#0f172a' },\n    emptyDetail: { marginTop: 6, fontSize: 13, color: '#64748b', textAlign: 'center' },\n    gridWrap: { paddingBottom: 16 },\n    grid: { flexDirection: 'row', flexWrap: 'wrap', paddingHorizontal: 16, paddingBottom: 16, gap: 8 },\n    tile: {\n        width: '48%',\n        flexGrow: 1,\n        flexBasis: '47%',\n        borderRadius: 10,\n        overflow: 'hidden',\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: '#e2e8f0',\n        backgroundColor: '#fff',\n    },\n    tileHit: { flex: 1 },\n    deleteBtn: {\n        position: 'absolute',\n        top: 6,\n        right: 6,\n        padding: 4,\n        backgroundColor: 'rgba(255,255,255,0.9)',\n        borderRadius: 8,\n    },\n    loadMore: {\n        width: '100%',\n        marginTop: 8,\n        paddingVertical: 12,\n        alignItems: 'center',\n        borderRadius: 10,\n        backgroundColor: '#f1f5f9',\n    },\n    loadMoreLabel: { fontSize: 13, fontWeight: '600', color: '#0f172a' },\n    skeleton: {\n        borderRadius: 8,\n        backgroundColor: '#e2e8f0',\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: '#e2e8f0',\n    },\n    thumb: { width: '100%', aspectRatio: 1, borderRadius: 8, backgroundColor: '#e2e8f0' },\n    thumbIcon: { alignItems: 'center', justifyContent: 'center', backgroundColor: '#0f172a' },\n    tileName: { marginTop: 6, fontSize: 11, color: '#475569', paddingHorizontal: 6, paddingBottom: 6 },\n});\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/CanvasLooksPanel.js

@@ -0,0 +1,184 @@
+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({
+  runAction,
+  apolloClient,
+  token,
+  indexUrl,
+  onRecreate,
+  onClose
+}) {
+  const [query, setQuery] = useState("");
+  const [search, setSearch] = useState("");
+  const [looks, setLooks] = useState([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(null);
+  const load = useCallback(async (offset, append) => {
+    if (!runAction && !apolloClient && !(token && indexUrl)) {
+      setError("Looks need a signed-in session.");
+      return;
+    }
+    if (append) setLoadingMore(true);
+    else setLoading(true);
+    setError(null);
+    try {
+      const page = await listStudioLooks(runAction, {
+        query: search || void 0,
+        offset,
+        limit: LOOKS_PAGE_SIZE
+      }, {
+        client: apolloClient,
+        token,
+        indexUrl
+      });
+      setLooks((prev) => append ? [...prev, ...page.looks] : page.looks);
+      setHasMore(page.hasMore);
+      if (!append && page.looks.length === 0) {
+        setError(null);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      if (!append) setLooks([]);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [apolloClient, indexUrl, runAction, search, token]);
+  useEffect(() => {
+    void load(0, false);
+  }, [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__ */ 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" })
+    ] }),
+    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: ({
+      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" })
+      ] })
+    ] }) })
+  ] });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 280
+  },
+  head: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingBottom: 8
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: "700",
+    color: "#0f172a"
+  },
+  search: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginHorizontal: 16,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: "#e2e8f0",
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    backgroundColor: "#fff"
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 13,
+    paddingVertical: 8,
+    color: "#0f172a"
+  },
+  error: {
+    paddingHorizontal: 16,
+    color: "#b91c1c",
+    fontSize: 12,
+    marginBottom: 6
+  },
+  empty: {
+    textAlign: "center",
+    color: "#64748b",
+    paddingVertical: 24,
+    fontSize: 13
+  },
+  list: {
+    paddingHorizontal: 12,
+    paddingBottom: 16
+  },
+  row: {
+    gap: 8
+  },
+  card: {
+    flex: 1,
+    marginBottom: 8,
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#e2e8f0",
+    overflow: "hidden",
+    backgroundColor: "#fff"
+  },
+  cover: {
+    width: "100%",
+    height: 96,
+    backgroundColor: "#f1f5f9"
+  },
+  coverFallback: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  name: {
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  recreate: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    alignSelf: "flex-start",
+    margin: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: "#ea580c"
+  },
+  recreateLabel: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#fff7ed"
+  },
+  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

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

@@ -0,0 +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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"}