@proveanything/smartlinks-utils-ui 1.13.0 → 1.13.2

package/dist/{chunk-PSVYUVZC.js → chunk-AWWWHHLL.js}

@@ -1,7 +1,8 @@
 import { assertStylesLoaded } from './chunk-OLYC54YT.js';
 import { cn } from './chunk-L7FQ52F5.js';
-import React7, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React7, { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
 import * as SL from '@proveanything/smartlinks';
+import { createPortal } from 'react-dom';
 import { Filter, Search, LayoutGrid, List, X, Loader2, AlertCircle, Tag, ImageOff, Wand2, Maximize2, Clipboard, Pencil, Check, Upload, Link, MicOff, Mic, ChevronDown, ChevronRight, Sparkles, Image as Image$1, Plus, FileIcon, Film, Music, FileText, AppWindow, MoreVertical, Trash2 } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -55,13 +56,13 @@ function useAssets({ scope, accept, pageSize, appId, listAppId }) {
   useEffect(() => {
     fetchAssets();
   }, [fetchAssets]);
-  const upload = useCallback(async (file, onProgress) => {
+  const upload = useCallback(async (file, onProgress, scopeOverride) => {
     setUploading(true);
     setUploadProgress(0);
     try {
       const result = await SL.asset.upload({
         file,
-        scope,
+        scope: scopeOverride || scope,
         name: file.name,
         admin: true,
         ...appId ? { appId } : {},
@@ -70,7 +71,7 @@ function useAssets({ scope, accept, pageSize, appId, listAppId }) {
           onProgress?.(pct);
         }
       });
-      if (mountedRef.current) {
+      if (mountedRef.current && !scopeOverride) {
         setAssets((prev) => [result, ...prev]);
       }
       return result;
@@ -84,7 +85,7 @@ function useAssets({ scope, accept, pageSize, appId, listAppId }) {
       }
     }
   }, [scope, appId]);
-  const uploadFromUrl = useCallback(async (url, name) => {
+  const uploadFromUrl = useCallback(async (url, name, scopeOverride) => {
     setUploading(true);
     setUploadProgress(0);
     try {
@@ -93,7 +94,7 @@ function useAssets({ scope, accept, pageSize, appId, listAppId }) {
       const blob = await response.blob();
       const fileName = name || url.split("/").pop()?.split("?")[0] || "imported-file";
       const file = new File([blob], fileName, { type: blob.type });
-      return await upload(file);
+      return await upload(file, void 0, scopeOverride);
     } catch (err) {
       if (mountedRef.current) setError(err?.message || "URL import failed");
       return null;
@@ -110,12 +111,12 @@ function useAssets({ scope, accept, pageSize, appId, listAppId }) {
     try {
       const result = await SL.asset.uploadFromUrl({
         url,
-        scope,
+        scope: opts?.scopeOverride || scope,
         metadata: { name: opts?.name, ...opts?.metadata || {} },
         ...appId ? { appId } : {},
         admin: true
       });
-      if (mountedRef.current) {
+      if (mountedRef.current && !opts?.scopeOverride) {
         setAssets((prev) => [result, ...prev]);
       }
       return result;
@@ -352,13 +353,54 @@ var AppBadge = ({ appId, appName, size = "sm" }) => {
 var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolute" }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
+  const btnRef = useRef(null);
+  const menuRef = useRef(null);
+  const [pos, setPos] = useState(null);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (!ref.current?.contains(e.target)) setOpen(false);
+      const t = e.target;
+      if (ref.current?.contains(t)) return;
+      if (menuRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
     };
     document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const update = () => {
+      const el = btnRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const menuW = menuRef.current?.offsetWidth ?? 160;
+      const menuH = menuRef.current?.offsetHeight ?? 160;
+      const margin = 8;
+      let left = Math.min(window.innerWidth - menuW - margin, r.right - menuW);
+      left = Math.max(margin, left);
+      let top = r.bottom + 4;
+      if (top + menuH > window.innerHeight - margin) {
+        top = Math.max(margin, r.top - menuH - 4);
+      }
+      setPos({ top, left });
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
   }, [open]);
   if (!onRename && !onReplace && !onEditTags && !onDelete) return null;
   return /* @__PURE__ */ jsxs(
@@ -366,7 +408,7 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolut
     {
       ref,
       className: cn(
-        position === "absolute" ? "absolute bottom-1.5 right-1.5" : "relative flex-shrink-0"
+        position === "absolute" ? "absolute top-1.5 right-1.5 z-10" : "relative flex-shrink-0"
       ),
       onClick: (e) => e.stopPropagation(),
       onDoubleClick: (e) => e.stopPropagation(),
@@ -374,6 +416,7 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolut
         /* @__PURE__ */ jsx(
           "button",
           {
+            ref: btnRef,
             type: "button",
             onClick: (e) => {
               e.stopPropagation();
@@ -381,91 +424,96 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolut
             },
             className: cn(
               "w-6 h-6 rounded-full flex items-center justify-center transition-all",
-              "bg-background/90 border border-border text-foreground hover:bg-background shadow-sm",
-              position === "absolute" && "opacity-0 group-hover:opacity-100",
-              open && "opacity-100"
+              "bg-background/90 border border-border text-foreground hover:bg-background shadow-sm"
             ),
             title: "Asset actions",
             "aria-label": "Asset actions",
             children: /* @__PURE__ */ jsx(MoreVertical, { className: "w-3 h-3" })
           }
         ),
-        open && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "absolute bottom-full right-0 mb-1 z-20 min-w-[140px] rounded-md border border-border bg-popover text-popover-foreground shadow-md py-1",
-            role: "menu",
-            children: [
-              onRename && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: "menuitem",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setOpen(false);
-                    onRename();
-                  },
-                  className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent",
-                  children: [
-                    /* @__PURE__ */ jsx(Pencil, { className: "w-3 h-3" }),
-                    " Rename"
-                  ]
-                }
-              ),
-              onReplace && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: "menuitem",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setOpen(false);
-                    onReplace();
-                  },
-                  className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent",
-                  children: [
-                    /* @__PURE__ */ jsx(Upload, { className: "w-3 h-3" }),
-                    " Replace file"
-                  ]
-                }
-              ),
-              onEditTags && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: "menuitem",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setOpen(false);
-                    onEditTags();
-                  },
-                  className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent",
-                  children: [
-                    /* @__PURE__ */ jsx(Tag, { className: "w-3 h-3" }),
-                    " Edit tags"
-                  ]
-                }
-              ),
-              onDelete && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: "menuitem",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setOpen(false);
-                    onDelete();
-                  },
-                  className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs text-destructive hover:bg-destructive/10",
-                  children: [
-                    /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" }),
-                    " Delete"
-                  ]
-                }
-              )
-            ]
-          }
+        open && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: menuRef,
+              className: "fixed z-[1000] min-w-[160px] rounded-md border border-border bg-popover text-popover-foreground shadow-lg py-1",
+              style: pos ? { top: pos.top, left: pos.left } : { visibility: "hidden", top: 0, left: 0 },
+              role: "menu",
+              onClick: (e) => e.stopPropagation(),
+              onMouseDown: (e) => e.stopPropagation(),
+              children: [
+                onRename && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setOpen(false);
+                      onRename();
+                    },
+                    className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent",
+                    children: [
+                      /* @__PURE__ */ jsx(Pencil, { className: "w-3 h-3" }),
+                      " Rename"
+                    ]
+                  }
+                ),
+                onReplace && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setOpen(false);
+                      onReplace();
+                    },
+                    className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent",
+                    children: [
+                      /* @__PURE__ */ jsx(Upload, { className: "w-3 h-3" }),
+                      " Replace file"
+                    ]
+                  }
+                ),
+                onEditTags && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setOpen(false);
+                      onEditTags();
+                    },
+                    className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent",
+                    children: [
+                      /* @__PURE__ */ jsx(Tag, { className: "w-3 h-3" }),
+                      " Edit tags"
+                    ]
+                  }
+                ),
+                onDelete && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setOpen(false);
+                      onDelete();
+                    },
+                    className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs text-destructive hover:bg-destructive/10",
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" }),
+                      " Delete"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          document.body
         )
       ]
     }
@@ -545,7 +593,7 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
             ] })
           ] })
         ] }),
-        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" }) }),
+        selected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center z-10", children: /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-primary-foreground" }) }),
         /* @__PURE__ */ jsx(
           CardMenu,
           {
@@ -2025,8 +2073,25 @@ var GlobalUploadToggle = ({ checked, onChange, appName }) => /* @__PURE__ */ jsx
     /* @__PURE__ */ jsx("span", { className: "block", children: checked ? `Asset will be available to every app in this collection.` : `Asset will be tagged to ${appName}. Tick to share with every app in the collection instead.` })
   ] })
 ] });
-var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedIds, onToggleSelect, onDoubleClickSelect, onDelete, allowDelete, emptyText, listAppId, currentAppId, currentAppName, getAppName }) => {
-  const { assets, loading, error, refresh, remove, updateAsset, replaceFile } = useAssets({ scope, accept, pageSize, listAppId });
+var AttachToContextToggle = ({ checked, onChange, contextLabel }) => /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2 text-xs text-muted-foreground cursor-pointer select-none p-2 rounded-md border border-border bg-muted/30", children: [
+  /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      checked,
+      onChange: (e) => onChange(e.target.checked),
+      className: "mt-0.5 cursor-pointer"
+    }
+  ),
+  /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+      "Attach to ",
+      contextLabel
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "block", children: checked ? `Asset will be tagged to ${contextLabel}.` : `Asset will be added to the collection (available everywhere). Tick to attach it to ${contextLabel} instead.` })
+  ] })
+] });
+var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize, viewMode, search, selectedIds, onToggleSelect, onDoubleClickSelect, onDelete, allowDelete, emptyText, listAppId: _listAppId, requireProductId, currentAppId, currentAppName, getAppName, assets, loading, error, refresh, remove, updateAsset, replaceFile }) => {
   const replaceInputRef = React7.useRef(null);
   const replaceTargetRef = React7.useRef(null);
   const handleRename = useCallback(async (asset2) => {
@@ -2085,6 +2150,10 @@ var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedI
   const filteredAssets = useMemo(() => {
     const q = search.trim().toLowerCase();
     return assets.filter((a) => {
+      if (requireProductId) {
+        const pid = a.productId || a.metadata?.productId || (a.scope?.type === "product" ? a.scope?.productId : void 0);
+        if (pid !== requireProductId) return false;
+      }
       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;
@@ -2097,7 +2166,7 @@ var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedI
       }
       return true;
     });
-  }, [assets, search, activeLabels]);
+  }, [assets, search, activeLabels, requireProductId]);
   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" }) });
   }
@@ -2158,9 +2227,9 @@ var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedI
         onToggleSelect,
         onDoubleClickSelect,
         onDelete: allowDelete ? handleDeleteWithConfirm : void 0,
-        onRename: allowDelete ? handleRename : void 0,
-        onReplace: allowDelete ? handleReplace : void 0,
-        onEditTags: allowDelete ? handleEditTags : void 0,
+        onRename: handleRename,
+        onReplace: handleReplace,
+        onEditTags: handleEditTags,
         allowDelete,
         currentAppId,
         currentAppName,
@@ -2246,13 +2315,55 @@ var AssetPickerContent = ({
     }
     return scope;
   }, [scope, productScope, scopeTab, hasProductScope]);
-  const { assets, upload, uploadFromUrl, uploadFromRemoteUrl, uploading, uploadProgress } = useAssets({
+  const collectionScope = useMemo(() => {
+    const cId = scope.collectionId;
+    return cId ? { type: "collection", collectionId: cId } : null;
+  }, [scope]);
+  const contextScope = useMemo(() => {
+    if (scope.type === "proof") return scope;
+    if (scope.type === "product") return scope;
+    if (productScope) {
+      return { type: "product", collectionId: productScope.collectionId, productId: productScope.productId };
+    }
+    return null;
+  }, [scope, productScope]);
+  const contextLabel = contextScope?.type === "proof" ? "this proof" : "this product";
+  const hasContext = !!contextScope && !!collectionScope;
+  const [attachToContext, setAttachToContext] = useState(true);
+  const uploadScope = useMemo(() => {
+    if (hasContext) return attachToContext ? contextScope : collectionScope;
+    return activeScope;
+  }, [hasContext, attachToContext, contextScope, collectionScope, activeScope]);
+  const {
+    assets,
+    loading: assetsLoading,
+    error: assetsError,
+    refresh: refreshAssets,
+    upload,
+    uploadFromUrl,
+    uploadFromRemoteUrl,
+    remove,
+    updateAsset,
+    replaceFile,
+    uploading,
+    uploadProgress
+  } = useAssets({
     scope: activeScope,
     accept: acceptProp,
     pageSize,
     appId: uploadGlobal ? void 0 : appId,
     listAppId
   });
+  const reconcileAfterUpload = useCallback(async (uploadedScope) => {
+    if (hasProductScope) {
+      const desiredTab = uploadedScope.type === "product" ? "product" : "collection";
+      if (desiredTab !== scopeTab) {
+        setScopeTab(desiredTab);
+        return;
+      }
+    }
+    await refreshAssets();
+  }, [hasProductScope, scopeTab, refreshAssets]);
   const toSelection = useCallback((asset2) => ({
     id: asset2.id,
     url: asset2.url,
@@ -2289,34 +2400,46 @@ var AssetPickerContent = ({
     });
   }, [multiple, onSelect, onConfirm, toSelection]);
   const handleUploadFiles = useCallback(async (files) => {
+    const targetScope = uploadScope;
+    const sameAsActive = targetScope === activeScope;
     for (const file of files) {
-      const result = await upload(file);
+      const result = await upload(file, void 0, sameAsActive ? void 0 : targetScope);
       if (result && !multiple) {
         setSelectedIds(/* @__PURE__ */ new Set([result.id]));
         onSelect?.(toSelection(result));
       }
     }
     setTab("browse");
-  }, [upload, multiple, onSelect, toSelection]);
+    await reconcileAfterUpload(targetScope);
+  }, [upload, multiple, onSelect, toSelection, uploadScope, activeScope, reconcileAfterUpload]);
   const handleUrlImport = useCallback(async (url, name) => {
-    const result = await uploadFromUrl(url, name);
+    const targetScope = uploadScope;
+    const sameAsActive = targetScope === activeScope;
+    const result = await uploadFromUrl(url, name, sameAsActive ? void 0 : targetScope);
     if (result) {
       setTab("browse");
       if (!multiple) {
         setSelectedIds(/* @__PURE__ */ new Set([result.id]));
         onSelect?.(toSelection(result));
       }
+      await reconcileAfterUpload(targetScope);
     }
     return result;
-  }, [uploadFromUrl, multiple, onSelect, toSelection]);
+  }, [uploadFromUrl, multiple, onSelect, toSelection, uploadScope, activeScope, reconcileAfterUpload]);
   const handleRemoteIngest = useCallback(async (url, name) => {
-    const result = await uploadFromRemoteUrl(url, { name });
+    const targetScope = uploadScope;
+    const sameAsActive = targetScope === activeScope;
+    const result = await uploadFromRemoteUrl(url, {
+      name,
+      ...sameAsActive ? {} : { scopeOverride: targetScope }
+    });
     if (result && !multiple) {
       setSelectedIds(/* @__PURE__ */ new Set([result.id]));
       onSelect?.(toSelection(result));
     }
+    if (result) await reconcileAfterUpload(targetScope);
     return result;
-  }, [uploadFromRemoteUrl, multiple, onSelect, toSelection]);
+  }, [uploadFromRemoteUrl, multiple, onSelect, toSelection, uploadScope, activeScope, reconcileAfterUpload]);
   const handleDelete = useCallback(async (assetId) => {
     setSelectedIds((prev) => {
       const next = new Set(prev);
@@ -2501,13 +2624,29 @@ var AssetPickerContent = ({
         allowDelete,
         emptyText,
         listAppId,
+        requireProductId: hasProductScope && scopeTab === "product" ? productScope.productId : void 0,
         currentAppId: appId,
         currentAppName: resolvedAppName,
-        getAppName
+        getAppName,
+        assets,
+        loading: assetsLoading,
+        error: assetsError,
+        refresh: refreshAssets,
+        remove,
+        updateAsset,
+        replaceFile
       },
       `${activeScope.type}-${activeScope.productId || ""}-${effectiveAccept || "all"}-${listAppId || "no-app-filter"}`
     ),
     tab === "upload" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasContext && /* @__PURE__ */ jsx(
+        AttachToContextToggle,
+        {
+          checked: attachToContext,
+          onChange: setAttachToContext,
+          contextLabel
+        }
+      ),
       hasAppFilter && /* @__PURE__ */ jsx(
         GlobalUploadToggle,
         {
@@ -2529,6 +2668,14 @@ var AssetPickerContent = ({
       )
     ] }),
     tab === "url" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasContext && /* @__PURE__ */ jsx(
+        AttachToContextToggle,
+        {
+          checked: attachToContext,
+          onChange: setAttachToContext,
+          contextLabel
+        }
+      ),
       hasAppFilter && /* @__PURE__ */ jsx(
         GlobalUploadToggle,
         {
@@ -2546,6 +2693,14 @@ var AssetPickerContent = ({
       )
     ] }),
     tab === "ai" && aiEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasContext && /* @__PURE__ */ jsx(
+        AttachToContextToggle,
+        {
+          checked: attachToContext,
+          onChange: setAttachToContext,
+          contextLabel
+        }
+      ),
       hasAppFilter && /* @__PURE__ */ jsx(
         GlobalUploadToggle,
         {
@@ -2564,6 +2719,14 @@ var AssetPickerContent = ({
       )
     ] }),
     tab === "stock" && stockEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasContext && /* @__PURE__ */ jsx(
+        AttachToContextToggle,
+        {
+          checked: attachToContext,
+          onChange: setAttachToContext,
+          contextLabel
+        }
+      ),
       hasAppFilter && /* @__PURE__ */ jsx(
         GlobalUploadToggle,
         {
@@ -2673,5 +2836,5 @@ var AssetPicker = (props) => {
 assertStylesLoaded();
 
 export { ASSET_MIME_FILTERS, AssetPicker, useAppRegistry, useAssets };
-//# sourceMappingURL=chunk-PSVYUVZC.js.map
-//# sourceMappingURL=chunk-PSVYUVZC.js.map
+//# sourceMappingURL=chunk-AWWWHHLL.js.map
+//# sourceMappingURL=chunk-AWWWHHLL.js.map