@proveanything/smartlinks-utils-ui 0.2.13 → 0.3.1

package/dist/{chunk-XA5J6CZL.js → chunk-YVZKCCYQ.js}

@@ -1,7 +1,7 @@
 import { cn } from './chunk-L7FQ52F5.js';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import * as SL from '@proveanything/smartlinks';
-import { Filter, Search, LayoutGrid, List, X, Loader2, AlertCircle, ImageOff, Clipboard, Pencil, Check, Upload, Link, MicOff, Mic, ChevronDown, ChevronRight, Sparkles, Image, Trash2, FileIcon, Film, Music, FileText } from 'lucide-react';
+import { Filter, Search, LayoutGrid, List, X, Loader2, AlertCircle, ImageOff, Clipboard, Pencil, Check, Upload, Link, MicOff, Mic, ChevronDown, ChevronRight, Sparkles, Image, Trash2, FileIcon, Film, Music, FileText, AppWindow } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/AssetPicker/types.ts
@@ -13,7 +13,7 @@ var ASSET_MIME_FILTERS = [
   { value: "document", label: "Documents", prefix: "application/" },
   { value: "pdf", label: "PDFs", prefix: "application/pdf" }
 ];
-function useAssets({ scope, accept, pageSize }) {
+function useAssets({ scope, accept, pageSize, appId, listAppId }) {
   const [assets, setAssets] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -33,7 +33,11 @@ function useAssets({ scope, accept, pageSize }) {
       const result = await SL.asset.list({
         scope,
         mimeTypePrefix: accept,
-        limit: pageSize
+        limit: pageSize,
+        // Only filter by appId when explicitly requested. When listAppId is undefined,
+        // we list every asset in the scope — even if uploads are still being stamped
+        // with `appId`. This is what powers the "All in collection" pill.
+        ...listAppId ? { appId: listAppId } : {}
       });
       if (mountedRef.current) {
         setAssets(result);
@@ -46,7 +50,7 @@ function useAssets({ scope, accept, pageSize }) {
     } finally {
       if (mountedRef.current) setLoading(false);
     }
-  }, [scope.type, scope.collectionId, scope.productId, scope.proofId, accept, pageSize]);
+  }, [scope.type, scope.collectionId, scope.productId, scope.proofId, accept, pageSize, listAppId]);
   useEffect(() => {
     fetchAssets();
   }, [fetchAssets]);
@@ -59,6 +63,7 @@ function useAssets({ scope, accept, pageSize }) {
         scope,
         name: file.name,
         admin: true,
+        ...appId ? { appId } : {},
         onProgress: (pct) => {
           setUploadProgress(pct);
           onProgress?.(pct);
@@ -77,7 +82,7 @@ function useAssets({ scope, accept, pageSize }) {
         setUploadProgress(0);
       }
     }
-  }, [scope]);
+  }, [scope, appId]);
   const uploadFromUrl = useCallback(async (url, name) => {
     setUploading(true);
     setUploadProgress(0);
@@ -105,7 +110,9 @@ function useAssets({ scope, accept, pageSize }) {
       const result = await SL.asset.uploadFromUrl({
         url,
         scope,
-        metadata: { name: opts?.name, ...opts?.metadata || {} }
+        metadata: { name: opts?.name, ...opts?.metadata || {} },
+        ...appId ? { appId } : {},
+        admin: true
       });
       if (mountedRef.current) {
         setAssets((prev) => [result, ...prev]);
@@ -120,7 +127,7 @@ function useAssets({ scope, accept, pageSize }) {
         setUploadProgress(0);
       }
     }
-  }, [scope]);
+  }, [scope, appId]);
   const remove = useCallback(async (assetId) => {
     try {
       await SL.asset.remove({ assetId, scope });
@@ -146,6 +153,82 @@ function useAssets({ scope, accept, pageSize }) {
     uploadProgress
   };
 }
+var cache = /* @__PURE__ */ new Map();
+async function loadApps(collectionId) {
+  const existing = cache.get(collectionId);
+  if (existing?.data) return existing.data;
+  if (existing?.promise) return existing.promise;
+  const promise = (async () => {
+    try {
+      const result = await SL.collection.getAppsConfig(collectionId);
+      const apps = Array.isArray(result?.apps) ? result.apps : Array.isArray(result) ? result : [];
+      const mapped = apps.map((a) => ({
+        id: a.id,
+        name: a.name || a.id,
+        faIcon: a.faIcon,
+        hidden: a.hidden,
+        category: a.category
+      }));
+      cache.set(collectionId, { data: mapped });
+      return mapped;
+    } catch (err) {
+      cache.set(collectionId, { error: err?.message || "Failed to load apps", data: [] });
+      return [];
+    }
+  })();
+  cache.set(collectionId, { promise });
+  return promise;
+}
+function useAppRegistry(collectionId) {
+  const [apps, setApps] = useState(
+    () => collectionId ? cache.get(collectionId)?.data ?? [] : []
+  );
+  const [loading, setLoading] = useState(() => {
+    if (!collectionId) return false;
+    return !cache.get(collectionId)?.data;
+  });
+  useEffect(() => {
+    let cancelled = false;
+    if (!collectionId) {
+      setApps([]);
+      setLoading(false);
+      return () => {
+        cancelled = true;
+      };
+    }
+    const cached = cache.get(collectionId)?.data;
+    if (cached) {
+      setApps(cached);
+      setLoading(false);
+      return () => {
+        cancelled = true;
+      };
+    }
+    setLoading(true);
+    loadApps(collectionId).then((data) => {
+      if (cancelled) return;
+      setApps(data);
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [collectionId]);
+  const lookup = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const a of apps) m.set(a.id, a);
+    return m;
+  }, [apps]);
+  const getApp = useCallback(
+    (appId) => appId ? lookup.get(appId) : void 0,
+    [lookup]
+  );
+  const getAppName = useCallback(
+    (appId) => appId ? lookup.get(appId)?.name ?? appId : "",
+    [lookup]
+  );
+  return { apps, loading, getAppName, getApp };
+}
 function getIcon(mimeType) {
   if (!mimeType) return FileIcon;
   if (mimeType.startsWith("image/")) return Image;
@@ -166,9 +249,32 @@ function getThumbnail(asset2) {
   if (asset2.mimeType?.startsWith("image/")) return asset2.url;
   return null;
 }
-var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete }) => {
+function getAssetAppId(asset2) {
+  return asset2.appId || asset2.metadata?.appId || asset2.metadata?.app || void 0;
+}
+var AppBadge = ({ appId, appName, size = "sm" }) => {
+  const label = appName && appName !== appId ? appName : appId;
+  const tooltip = appName && appName !== appId ? `Uploaded by app: ${appName} (${appId})` : `Uploaded by app: ${appId}`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-0.5 rounded-full bg-muted text-muted-foreground border border-border max-w-full truncate",
+        size === "xs" ? "px-1 py-0 text-[9px]" : "px-1.5 py-0.5 text-[10px]"
+      ),
+      title: tooltip,
+      children: [
+        /* @__PURE__ */ jsx(AppWindow, { className: cn(size === "xs" ? "w-2 h-2" : "w-2.5 h-2.5", "flex-shrink-0") }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+};
+var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete, currentAppId, getAppName }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
+  const ownerAppId = getAssetAppId(asset2);
+  const showAppBadge = !!currentAppId && !!ownerAppId && ownerAppId !== currentAppId;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -205,7 +311,8 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
           /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: [
             formatSize(asset2.size),
             asset2.mimeType && ` \u2022 ${asset2.mimeType.split("/")[1]?.toUpperCase() || asset2.mimeType}`
-          ] })
+          ] }),
+          showAppBadge && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(AppBadge, { appId: ownerAppId, appName: getAppName?.(ownerAppId), size: "xs" }) })
         ] }),
         selected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-primary-foreground" }) }),
         allowDelete && onDelete && /* @__PURE__ */ jsx(
@@ -225,9 +332,11 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
     }
   );
 };
-var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete }) => {
+var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete, currentAppId, getAppName }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
+  const ownerAppId = getAssetAppId(asset2);
+  const showAppBadge = !!currentAppId && !!ownerAppId && ownerAppId !== currentAppId;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -252,7 +361,10 @@ var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
       children: [
         /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded bg-muted flex items-center justify-center overflow-hidden flex-shrink-0", children: thumb ? /* @__PURE__ */ jsx("img", { src: thumb, alt: asset2.name, className: "w-full h-full object-cover", loading: "lazy" }) : /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 text-muted-foreground" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate text-foreground", children: asset2.cleanName || asset2.name || asset2.id }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate text-foreground", children: asset2.cleanName || asset2.name || asset2.id }),
+            showAppBadge && /* @__PURE__ */ jsx(AppBadge, { appId: ownerAppId, appName: getAppName?.(ownerAppId) })
+          ] }),
           /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
             formatSize(asset2.size),
             asset2.mimeType && ` \u2022 ${asset2.mimeType}`
@@ -283,7 +395,9 @@ var AssetGrid = ({
   onToggleSelect,
   onDoubleClickSelect,
   onDelete,
-  allowDelete
+  allowDelete,
+  currentAppId,
+  getAppName
 }) => {
   if (assets.length === 0) return null;
   if (viewMode === "list") {
@@ -295,7 +409,9 @@ var AssetGrid = ({
         onToggle: () => onToggleSelect(asset2),
         onDoubleClick: onDoubleClickSelect ? () => onDoubleClickSelect(asset2) : void 0,
         onDelete: allowDelete && onDelete ? () => onDelete(asset2.id) : void 0,
-        allowDelete
+        allowDelete,
+        currentAppId,
+        getAppName
       },
       asset2.id
     )) });
@@ -308,7 +424,9 @@ var AssetGrid = ({
       onToggle: () => onToggleSelect(asset2),
       onDoubleClick: onDoubleClickSelect ? () => onDoubleClickSelect(asset2) : void 0,
       onDelete: allowDelete && onDelete ? () => onDelete(asset2.id) : void 0,
-      allowDelete
+      allowDelete,
+      currentAppId,
+      getAppName
     },
     asset2.id
   )) });
@@ -1179,8 +1297,8 @@ var StockPhotoSearch = ({
     }) })
   ] });
 };
-var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedIds, onToggleSelect, onDoubleClickSelect, onDelete, allowDelete, emptyText }) => {
-  const { assets, loading, error, refresh } = useAssets({ scope, accept, pageSize });
+var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedIds, onToggleSelect, onDoubleClickSelect, onDelete, allowDelete, emptyText, listAppId, currentAppId, currentAppName, getAppName }) => {
+  const { assets, loading, error, refresh } = useAssets({ scope, accept, pageSize, listAppId });
   const filteredAssets = useMemo(() => {
     if (!search.trim()) return assets;
     const q = search.toLowerCase();
@@ -1214,13 +1332,19 @@ var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedI
       onToggleSelect,
       onDoubleClickSelect,
       onDelete: allowDelete ? onDelete : void 0,
-      allowDelete
+      allowDelete,
+      currentAppId,
+      currentAppName,
+      getAppName
     }
   );
 };
 var AssetPickerContent = ({
   scope,
   productScope,
+  appId,
+  appName,
+  defaultAppFilter = "app",
   allowUpload = true,
   allowUrlImport = true,
   allowAIGenerate,
@@ -1236,10 +1360,19 @@ var AssetPickerContent = ({
   pageSize = 50,
   onConfirm
 }) => {
+  const [appFilter, setAppFilter] = useState(defaultAppFilter);
+  const hasAppFilter = !!appId;
+  const [otherAppFilter, setOtherAppFilter] = useState("");
+  const collectionIdForRegistry = scope.collectionId;
+  const { apps: registryApps, getAppName } = useAppRegistry(collectionIdForRegistry);
+  const resolvedAppName = appName || (appId ? getAppName(appId) : void 0);
+  const listAppId = hasAppFilter ? appFilter === "app" ? appId : otherAppFilter || void 0 : void 0;
   const { assets, upload, uploadFromUrl, uploadFromRemoteUrl, uploading, uploadProgress } = useAssets({
     scope,
     accept: acceptProp,
-    pageSize
+    pageSize,
+    appId,
+    listAppId
   });
   const [tab, setTab] = useState("browse");
   const [viewMode, setViewMode] = useState(defaultView);
@@ -1444,6 +1577,58 @@ var AssetPickerContent = ({
         }
       )
     ] }),
+    tab === "browse" && hasAppFilter && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-muted rounded-md p-0.5", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setAppFilter("app");
+              setOtherAppFilter("");
+            },
+            className: cn(
+              "px-2.5 py-1 text-xs font-medium rounded transition-colors",
+              appFilter === "app" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            title: `Show only assets uploaded by ${resolvedAppName || appId}`,
+            children: resolvedAppName || appId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAppFilter("all"),
+            className: cn(
+              "px-2.5 py-1 text-xs font-medium rounded transition-colors",
+              appFilter === "all" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            title: "Show every asset in the collection, regardless of which app uploaded it",
+            children: "All in collection"
+          }
+        )
+      ] }),
+      appFilter === "all" && registryApps.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Filter, { className: "w-3.5 h-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: otherAppFilter,
+            onChange: (e) => setOtherAppFilter(e.target.value),
+            className: "text-xs py-1 pl-1 pr-5 rounded-md border border-border bg-transparent text-foreground focus:outline-none focus:ring-1 focus:ring-ring appearance-none cursor-pointer",
+            title: "Narrow to assets uploaded by a specific app",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Any app" }),
+              registryApps.filter((a) => !a.hidden).map((a) => /* @__PURE__ */ jsxs("option", { value: a.id, children: [
+                a.name,
+                a.id !== appId ? "" : " (this app)"
+              ] }, a.id))
+            ]
+          }
+        )
+      ] })
+    ] }),
     tab === "browse" && /* @__PURE__ */ jsx(
       ScopedAssetBrowser,
       {
@@ -1457,9 +1642,13 @@ var AssetPickerContent = ({
         onDoubleClickSelect: handleDoubleClickSelect,
         onDelete: handleDelete,
         allowDelete,
-        emptyText
+        emptyText,
+        listAppId,
+        currentAppId: appId,
+        currentAppName: resolvedAppName,
+        getAppName
       },
-      `${activeScope.type}-${activeScope.productId || ""}-${effectiveAccept || "all"}`
+      `${activeScope.type}-${activeScope.productId || ""}-${effectiveAccept || "all"}-${listAppId || "no-app-filter"}`
     ),
     tab === "upload" && /* @__PURE__ */ jsx(
       UploadZone,
@@ -1582,6 +1771,6 @@ var AssetPicker = (props) => {
   ] });
 };
 
-export { ASSET_MIME_FILTERS, AssetPicker, useAssets };
-//# sourceMappingURL=chunk-XA5J6CZL.js.map
-//# sourceMappingURL=chunk-XA5J6CZL.js.map
+export { ASSET_MIME_FILTERS, AssetPicker, useAppRegistry, useAssets };
+//# sourceMappingURL=chunk-YVZKCCYQ.js.map
+//# sourceMappingURL=chunk-YVZKCCYQ.js.map