@proveanything/smartlinks-utils-ui 1.0.0 → 1.0.1

package/dist/{chunk-ZTUZPAHD.js → chunk-PQD2B6DA.js}

@@ -2,7 +2,7 @@ import { assertStylesLoaded } from './chunk-OLYC54YT.js';
 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, AppWindow } from 'lucide-react';
+import { Filter, Search, LayoutGrid, List, X, Loader2, AlertCircle, Tag, 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
@@ -130,8 +130,13 @@ function useAssets({ scope, accept, pageSize, appId, listAppId }) {
     }
   }, [scope, appId]);
   const remove = useCallback(async (assetId) => {
+    const collectionId = scope.collectionId;
     try {
-      await SL.asset.remove({ assetId, scope });
+      if (collectionId && SL.asset.deleteAdmin) {
+        await SL.asset.deleteAdmin({ collectionId, assetId });
+      } else {
+        await SL.asset.remove({ assetId, scope });
+      }
       if (mountedRef.current) {
         setAssets((prev) => prev.filter((a) => a.id !== assetId));
       }
@@ -141,6 +146,75 @@ function useAssets({ scope, accept, pageSize, appId, listAppId }) {
       return false;
     }
   }, [scope]);
+  const restore = useCallback(async (assetId) => {
+    const collectionId = scope.collectionId;
+    if (!collectionId) {
+      if (mountedRef.current) setError("Restore requires a collection scope");
+      return null;
+    }
+    try {
+      const result = await SL.asset.restoreAdmin(collectionId, assetId);
+      if (mountedRef.current) {
+        setAssets((prev) => {
+          const exists = prev.some((a) => a.id === assetId);
+          return exists ? prev.map((a) => a.id === assetId ? result : a) : [result, ...prev];
+        });
+      }
+      return result;
+    } catch (err) {
+      if (mountedRef.current) setError(err?.message || "Restore failed");
+      return null;
+    }
+  }, [scope]);
+  const replaceFile = useCallback(async (assetId, file, onProgress) => {
+    const collectionId = scope.collectionId;
+    if (!collectionId) {
+      if (mountedRef.current) setError("Replace requires a collection scope");
+      return null;
+    }
+    setUploading(true);
+    setUploadProgress(0);
+    try {
+      const result = await SL.asset.replaceFile({
+        collectionId,
+        assetId,
+        file,
+        onProgress: (pct) => {
+          setUploadProgress(pct);
+          onProgress?.(pct);
+        }
+      });
+      if (mountedRef.current) {
+        setAssets((prev) => prev.map((a) => a.id === assetId ? result : a));
+      }
+      return result;
+    } catch (err) {
+      if (mountedRef.current) setError(err?.message || "Replace failed");
+      return null;
+    } finally {
+      if (mountedRef.current) {
+        setUploading(false);
+        setUploadProgress(0);
+      }
+    }
+  }, [scope]);
+  const updateAsset = useCallback(async (assetId, patch) => {
+    const collectionId = scope.collectionId;
+    if (!collectionId) {
+      if (mountedRef.current) setError("Update requires a collection scope");
+      return null;
+    }
+    try {
+      const result = await SL.asset.updateAdmin({ collectionId, assetId, ...patch });
+      if (mountedRef.current) {
+        setAssets((prev) => prev.map((a) => a.id === assetId ? result : a));
+      }
+      return result;
+    } catch (err) {
+      if (mountedRef.current) setError(err?.message || "Update failed");
+      return null;
+    }
+  }, [scope]);
   return {
     assets,
     loading,
@@ -150,6 +224,9 @@ function useAssets({ scope, accept, pageSize, appId, listAppId }) {
     uploadFromUrl,
     uploadFromRemoteUrl,
     remove,
+    restore,
+    replaceFile,
+    updateAsset,
     uploading,
     uploadProgress
   };
@@ -244,6 +321,7 @@ function formatSize(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 function getThumbnail(asset2) {
+  if (asset2.thumbnail) return asset2.thumbnail;
   if (asset2.thumbnails?.x200) return asset2.thumbnails.x200;
   if (asset2.thumbnails?.x100) return asset2.thumbnails.x100;
   if (asset2.thumbnails?.x512) return asset2.thumbnails.x512;
@@ -251,7 +329,7 @@ function getThumbnail(asset2) {
   return null;
 }
 function getAssetAppId(asset2) {
-  return asset2.appId || asset2.metadata?.appId || asset2.metadata?.app || void 0;
+  return asset2.app || asset2.appId || asset2.metadata?.appId || asset2.metadata?.app || void 0;
 }
 var AppBadge = ({ appId, appName, size = "sm" }) => {
   const label = appName && appName !== appId ? appName : appId;
@@ -271,11 +349,12 @@ var AppBadge = ({ appId, appName, size = "sm" }) => {
     }
   );
 };
-var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete, currentAppId, getAppName }) => {
+var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
   const ownerAppId = getAssetAppId(asset2);
   const showAppBadge = !!currentAppId && !!ownerAppId && ownerAppId !== currentAppId;
+  const labels = asset2.labels || [];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -313,7 +392,36 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
             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" }) })
+          showAppBadge && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(AppBadge, { appId: ownerAppId, appName: getAppName?.(ownerAppId), size: "xs" }) }),
+          labels.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap gap-0.5", children: [
+            labels.slice(0, 3).map((lbl) => {
+              const active = !!activeLabels?.has(lbl);
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onToggleLabel?.(lbl);
+                  },
+                  className: cn(
+                    "inline-flex items-center gap-0.5 rounded-full border px-1 py-0 text-[9px] max-w-full truncate transition-colors",
+                    active ? "bg-primary text-primary-foreground border-primary" : "bg-muted text-muted-foreground border-border hover:bg-muted/70"
+                  ),
+                  title: `Filter by label: ${lbl}`,
+                  children: [
+                    /* @__PURE__ */ jsx(Tag, { className: "w-2 h-2 flex-shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: lbl })
+                  ]
+                },
+                lbl
+              );
+            }),
+            labels.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground", children: [
+              "+",
+              labels.length - 3
+            ] })
+          ] })
         ] }),
         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(
@@ -333,11 +441,12 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
     }
   );
 };
-var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete, currentAppId, getAppName }) => {
+var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
   const ownerAppId = getAssetAppId(asset2);
   const showAppBadge = !!currentAppId && !!ownerAppId && ownerAppId !== currentAppId;
+  const labels = asset2.labels || [];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -369,7 +478,30 @@ var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
           /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
             formatSize(asset2.size),
             asset2.mimeType && ` \u2022 ${asset2.mimeType}`
-          ] })
+          ] }),
+          labels.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: labels.map((lbl) => {
+            const active = !!activeLabels?.has(lbl);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleLabel?.(lbl);
+                },
+                className: cn(
+                  "inline-flex items-center gap-0.5 rounded-full border px-1.5 py-0 text-[10px] transition-colors",
+                  active ? "bg-primary text-primary-foreground border-primary" : "bg-muted text-muted-foreground border-border hover:bg-muted/70"
+                ),
+                title: `Filter by label: ${lbl}`,
+                children: [
+                  /* @__PURE__ */ jsx(Tag, { className: "w-2.5 h-2.5 flex-shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: lbl })
+                ]
+              },
+              lbl
+            );
+          }) })
         ] }),
         selected && /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-primary-foreground" }) }),
         allowDelete && onDelete && /* @__PURE__ */ jsx(
@@ -398,7 +530,9 @@ var AssetGrid = ({
   onDelete,
   allowDelete,
   currentAppId,
-  getAppName
+  getAppName,
+  activeLabels,
+  onToggleLabel
 }) => {
   if (assets.length === 0) return null;
   if (viewMode === "list") {
@@ -412,7 +546,9 @@ var AssetGrid = ({
         onDelete: allowDelete && onDelete ? () => onDelete(asset2.id) : void 0,
         allowDelete,
         currentAppId,
-        getAppName
+        getAppName,
+        activeLabels,
+        onToggleLabel
       },
       asset2.id
     )) });
@@ -427,7 +563,9 @@ var AssetGrid = ({
       onDelete: allowDelete && onDelete ? () => onDelete(asset2.id) : void 0,
       allowDelete,
       currentAppId,
-      getAppName
+      getAppName,
+      activeLabels,
+      onToggleLabel
     },
     asset2.id
   )) });
@@ -1375,13 +1513,41 @@ var GlobalUploadToggle = ({ checked, onChange, appName }) => /* @__PURE__ */ jsx
 ] });
 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 [activeLabels, setActiveLabels] = useState(/* @__PURE__ */ new Set());
+  const toggleLabel = useCallback((label) => {
+    setActiveLabels((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  }, []);
+  const clearLabels = useCallback(() => setActiveLabels(/* @__PURE__ */ new Set()), []);
+  const allLabels = useMemo(() => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const a of assets) {
+      for (const lbl of a.labels || []) {
+        counts.set(lbl, (counts.get(lbl) || 0) + 1);
+      }
+    }
+    return Array.from(counts.entries()).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([label, count]) => ({ label, count }));
+  }, [assets]);
   const filteredAssets = useMemo(() => {
-    if (!search.trim()) return assets;
-    const q = search.toLowerCase();
-    return assets.filter(
-      (a) => (a.name || "").toLowerCase().includes(q) || (a.cleanName || "").toLowerCase().includes(q) || (a.mimeType || "").toLowerCase().includes(q)
-    );
-  }, [assets, search]);
+    const q = search.trim().toLowerCase();
+    return assets.filter((a) => {
+      if (q) {
+        const hit = (a.name || "").toLowerCase().includes(q) || (a.cleanName || "").toLowerCase().includes(q) || (a.mimeType || "").toLowerCase().includes(q) || (a.labels || []).some((l) => l.toLowerCase().includes(q));
+        if (!hit) return false;
+      }
+      if (activeLabels.size > 0) {
+        const labels = new Set(a.labels || []);
+        for (const need of activeLabels) {
+          if (!labels.has(need)) return false;
+        }
+      }
+      return true;
+    });
+  }, [assets, search, activeLabels]);
   if (loading && assets.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 text-muted-foreground animate-spin" }) });
   }
@@ -1392,28 +1558,65 @@ var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedI
       /* @__PURE__ */ jsx("button", { type: "button", onClick: refresh, className: "ml-auto underline text-xs", children: "Retry" })
     ] });
   }
-  if (filteredAssets.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    allLabels.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+      /* @__PURE__ */ jsx(Tag, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
+      allLabels.slice(0, 12).map(({ label, count }) => {
+        const active = activeLabels.has(label);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggleLabel(label),
+            className: cn(
+              "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] transition-colors",
+              active ? "bg-primary text-primary-foreground border-primary" : "bg-muted text-muted-foreground border-border hover:bg-muted/70"
+            ),
+            title: active ? `Remove "${label}" from filter` : `Filter by "${label}"`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+              /* @__PURE__ */ jsx("span", { className: "opacity-70", children: count })
+            ]
+          },
+          label
+        );
+      }),
+      activeLabels.size > 0 && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: clearLabels,
+          className: "inline-flex items-center gap-0.5 text-[11px] text-muted-foreground hover:text-foreground",
+          title: "Clear label filter",
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "w-3 h-3" }),
+            " clear"
+          ]
+        }
+      )
+    ] }),
+    filteredAssets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-muted-foreground", children: [
       /* @__PURE__ */ jsx(ImageOff, { className: "w-8 h-8 mb-2" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm", children: emptyText || "No assets found" }),
-      search && /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: "Try adjusting your search" })
-    ] });
-  }
-  return /* @__PURE__ */ jsx(
-    AssetGrid,
-    {
-      assets: filteredAssets,
-      viewMode,
-      selectedIds,
-      onToggleSelect,
-      onDoubleClickSelect,
-      onDelete: allowDelete ? onDelete : void 0,
-      allowDelete,
-      currentAppId,
-      currentAppName,
-      getAppName
-    }
-  );
+      (search || activeLabels.size > 0) && /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: "Try adjusting your filters" })
+    ] }) : /* @__PURE__ */ jsx(
+      AssetGrid,
+      {
+        assets: filteredAssets,
+        viewMode,
+        selectedIds,
+        onToggleSelect,
+        onDoubleClickSelect,
+        onDelete: allowDelete ? onDelete : void 0,
+        allowDelete,
+        currentAppId,
+        currentAppName,
+        getAppName,
+        activeLabels,
+        onToggleLabel: toggleLabel
+      }
+    )
+  ] });
 };
 var AssetPickerContent = ({
   scope,
@@ -1484,6 +1687,10 @@ var AssetPickerContent = ({
     mimeType: asset2.mimeType,
     size: asset2.size,
     metadata: asset2.metadata,
+    thumbnail: asset2.thumbnail ?? null,
+    app: asset2.app ?? null,
+    labels: asset2.labels,
+    // Deprecated — kept for backward-compat with hosts still reading `thumbnails`.
     thumbnails: asset2.thumbnails
   }), []);
   const handleToggleSelect = useCallback((asset2) => {
@@ -1892,5 +2099,5 @@ var AssetPicker = (props) => {
 assertStylesLoaded();
 
 export { ASSET_MIME_FILTERS, AssetPicker, useAppRegistry, useAssets };
-//# sourceMappingURL=chunk-ZTUZPAHD.js.map
-//# sourceMappingURL=chunk-ZTUZPAHD.js.map
+//# sourceMappingURL=chunk-PQD2B6DA.js.map
+//# sourceMappingURL=chunk-PQD2B6DA.js.map