@proveanything/smartlinks-utils-ui 1.0.1 → 1.13.1

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

@@ -1,8 +1,8 @@
 import { assertStylesLoaded } from './chunk-OLYC54YT.js';
 import { cn } from './chunk-L7FQ52F5.js';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React7, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import * as SL from '@proveanything/smartlinks';
-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 { 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';
 
 // src/components/AssetPicker/types.ts
@@ -309,7 +309,7 @@ function useAppRegistry(collectionId) {
 }
 function getIcon(mimeType) {
   if (!mimeType) return FileIcon;
-  if (mimeType.startsWith("image/")) return Image;
+  if (mimeType.startsWith("image/")) return Image$1;
   if (mimeType.startsWith("video/")) return Film;
   if (mimeType.startsWith("audio/")) return Music;
   return FileText;
@@ -349,7 +349,129 @@ var AppBadge = ({ appId, appName, size = "sm" }) => {
     }
   );
 };
-var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
+var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolute" }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (!ref.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  if (!onRename && !onReplace && !onEditTags && !onDelete) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        position === "absolute" ? "absolute bottom-1.5 right-1.5" : "relative flex-shrink-0"
+      ),
+      onClick: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen((o) => !o);
+            },
+            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"
+            ),
+            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"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
   const ownerAppId = getAssetAppId(asset2);
@@ -424,24 +546,20 @@ 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" }) }),
-        allowDelete && onDelete && /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx(
+          CardMenu,
           {
-            type: "button",
-            className: "absolute top-2 left-2 w-6 h-6 rounded-full bg-destructive/80 hover:bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete();
-            },
-            title: "Delete asset",
-            children: /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" })
+            onRename,
+            onReplace,
+            onEditTags,
+            onDelete: allowDelete ? onDelete : void 0
           }
         )
       ]
     }
   );
 };
-var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
+var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
   const ownerAppId = getAssetAppId(asset2);
@@ -504,17 +622,14 @@ var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
           }) })
         ] }),
         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(
-          "button",
+        /* @__PURE__ */ jsx(
+          CardMenu,
           {
-            type: "button",
-            className: "w-6 h-6 rounded-full bg-destructive/80 hover:bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0",
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete();
-            },
-            title: "Delete",
-            children: /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" })
+            onRename,
+            onReplace,
+            onEditTags,
+            onDelete: allowDelete ? onDelete : void 0,
+            position: "inline"
           }
         )
       ]
@@ -528,6 +643,9 @@ var AssetGrid = ({
   onToggleSelect,
   onDoubleClickSelect,
   onDelete,
+  onRename,
+  onReplace,
+  onEditTags,
   allowDelete,
   currentAppId,
   getAppName,
@@ -544,6 +662,9 @@ var AssetGrid = ({
         onToggle: () => onToggleSelect(asset2),
         onDoubleClick: onDoubleClickSelect ? () => onDoubleClickSelect(asset2) : void 0,
         onDelete: allowDelete && onDelete ? () => onDelete(asset2.id) : void 0,
+        onRename: onRename ? () => onRename(asset2) : void 0,
+        onReplace: onReplace ? () => onReplace(asset2) : void 0,
+        onEditTags: onEditTags ? () => onEditTags(asset2) : void 0,
         allowDelete,
         currentAppId,
         getAppName,
@@ -561,6 +682,9 @@ var AssetGrid = ({
       onToggle: () => onToggleSelect(asset2),
       onDoubleClick: onDoubleClickSelect ? () => onDoubleClickSelect(asset2) : void 0,
       onDelete: allowDelete && onDelete ? () => onDelete(asset2.id) : void 0,
+      onRename: onRename ? () => onRename(asset2) : void 0,
+      onReplace: onReplace ? () => onReplace(asset2) : void 0,
+      onEditTags: onEditTags ? () => onEditTags(asset2) : void 0,
       allowDelete,
       currentAppId,
       getAppName,
@@ -570,18 +694,144 @@ var AssetGrid = ({
     asset2.id
   )) });
 };
+
+// src/components/AssetPicker/imageProcessing.ts
+var WEBP_CANDIDATES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/jpg", "image/bmp"]);
+function isWebpCandidate(file) {
+  return WEBP_CANDIDATES.has(file.type.toLowerCase());
+}
+function isProcessableImage(file) {
+  if (!file.type.startsWith("image/")) return false;
+  if (file.type === "image/svg+xml" || file.type === "image/gif") return false;
+  return true;
+}
+async function loadImage(file) {
+  const url = URL.createObjectURL(file);
+  const img = new Image();
+  img.decoding = "async";
+  await new Promise((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = () => reject(new Error("Failed to decode image"));
+    img.src = url;
+  });
+  return { img, url };
+}
+async function getImageDimensions(file) {
+  if (!isProcessableImage(file)) return null;
+  try {
+    const { img, url } = await loadImage(file);
+    const out = { width: img.naturalWidth, height: img.naturalHeight };
+    URL.revokeObjectURL(url);
+    return out;
+  } catch {
+    return null;
+  }
+}
+async function processImage(file, opts = {}) {
+  const toWebp = opts.toWebp ?? isWebpCandidate(file);
+  const maxDim = opts.maxDimension ?? 2048;
+  const quality = opts.quality ?? 0.85;
+  const fallback = {
+    file,
+    changed: false,
+    originalSize: file.size,
+    newSize: file.size,
+    width: 0,
+    height: 0
+  };
+  if (!isProcessableImage(file)) return fallback;
+  let img;
+  let url;
+  try {
+    ({ img, url } = await loadImage(file));
+  } catch {
+    return fallback;
+  }
+  try {
+    const w = img.naturalWidth;
+    const h = img.naturalHeight;
+    const longest = Math.max(w, h);
+    const needsResize = maxDim > 0 && longest > maxDim;
+    const needsReencode = toWebp && file.type !== "image/webp";
+    if (!needsResize && !needsReencode) {
+      return { ...fallback, width: w, height: h };
+    }
+    const scale = needsResize ? maxDim / longest : 1;
+    const targetW = Math.round(w * scale);
+    const targetH = Math.round(h * scale);
+    const canvas = document.createElement("canvas");
+    canvas.width = targetW;
+    canvas.height = targetH;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return { ...fallback, width: w, height: h };
+    ctx.drawImage(img, 0, 0, targetW, targetH);
+    const outType = needsReencode ? "image/webp" : file.type;
+    const blob = await new Promise(
+      (resolve) => canvas.toBlob((b) => resolve(b), outType, quality)
+    );
+    if (!blob) return { ...fallback, width: w, height: h };
+    const base = file.name.replace(/\.[^.]+$/, "") || "image";
+    const ext = needsReencode ? "webp" : file.name.match(/\.([^.]+)$/)?.[1] || "png";
+    const newName = `${base}.${ext}`;
+    const newFile = new File([blob], newName, { type: outType });
+    return {
+      file: newFile,
+      changed: true,
+      originalSize: file.size,
+      newSize: newFile.size,
+      width: targetW,
+      height: targetH
+    };
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
 var UploadZone = ({
   onFiles,
   accept,
   multiple,
   uploading,
   uploadProgress = 0,
-  className
+  className,
+  imageOptimization
 }) => {
+  const optConfig = useMemo(() => {
+    if (imageOptimization === false) return { forced: "off" };
+    if (imageOptimization === true) return { forced: "on", maxDimension: 2048, quality: 0.85 };
+    if (typeof imageOptimization === "object" && imageOptimization) {
+      return {
+        forced: imageOptimization.userToggleable === false ? imageOptimization.defaultEnabled === false ? "off" : "on" : null,
+        defaultEnabled: imageOptimization.defaultEnabled ?? true,
+        maxDimension: imageOptimization.maxDimension ?? 2048,
+        quality: imageOptimization.quality ?? 0.85
+      };
+    }
+    return { forced: null, defaultEnabled: true, maxDimension: 2048, quality: 0.85 };
+  }, [imageOptimization]);
   const [dragOver, setDragOver] = useState(false);
   const [pastedFile, setPastedFile] = useState(null);
   const [editingName, setEditingName] = useState(false);
   const [fileName, setFileName] = useState("");
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [autoOptimizeUser, setAutoOptimizeUser] = useState(() => {
+    if (optConfig.forced) return optConfig.forced === "on";
+    try {
+      const v = localStorage.getItem("smartlinks.assetPicker.autoOptimize");
+      if (v !== null) return v === "1";
+    } catch {
+    }
+    return optConfig.defaultEnabled ?? true;
+  });
+  const autoOptimize = optConfig.forced ? optConfig.forced === "on" : autoOptimizeUser;
+  const showOptimizeToggle = optConfig.forced === null;
+  const setAutoOptimizePersist = useCallback((v) => {
+    setAutoOptimizeUser(v);
+    try {
+      localStorage.setItem("smartlinks.assetPicker.autoOptimize", v ? "1" : "0");
+    } catch {
+    }
+  }, []);
+  const [optimizing, setOptimizing] = useState(false);
   const inputRef = useRef(null);
   const nameInputRef = useRef(null);
   const zoneRef = useRef(null);
@@ -606,9 +856,12 @@ var UploadZone = ({
           e.preventDefault();
           const previewUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : "";
           const defaultName = file.name === "image.png" ? `pasted-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[T:]/g, "-")}` : file.name.replace(/\.[^.]+$/, "");
-          setPastedFile({ file, previewUrl, name: defaultName });
+          setPastedFile({ file, previewUrl, name: defaultName, origSize: file.size });
           setFileName(defaultName);
           setEditingName(false);
+          getImageDimensions(file).then((dims) => {
+            if (dims) setPastedFile((prev) => prev && prev.file === file ? { ...prev, origDims: dims } : prev);
+          });
           return;
         }
       }
@@ -616,15 +869,28 @@ var UploadZone = ({
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
   }, [uploading, accept]);
-  const handleConfirmPaste = useCallback(() => {
+  const handleConfirmPaste = useCallback(async () => {
     if (!pastedFile) return;
-    const ext = pastedFile.file.name.includes(".") ? pastedFile.file.name.split(".").pop() : "png";
+    let working = pastedFile.file;
+    if (autoOptimize && isProcessableImage(working)) {
+      setOptimizing(true);
+      try {
+        const result = await processImage(working, {
+          maxDimension: optConfig.maxDimension,
+          quality: optConfig.quality
+        });
+        if (result.changed) working = result.file;
+      } finally {
+        setOptimizing(false);
+      }
+    }
+    const ext = working.name.includes(".") ? working.name.split(".").pop() : "png";
     const finalName = `${fileName.trim() || "pasted-image"}.${ext}`;
-    const renamedFile = new File([pastedFile.file], finalName, { type: pastedFile.file.type });
+    const renamedFile = new File([working], finalName, { type: working.type });
     onFiles([renamedFile]);
     if (pastedFile.previewUrl) URL.revokeObjectURL(pastedFile.previewUrl);
     setPastedFile(null);
-  }, [pastedFile, fileName, onFiles]);
+  }, [pastedFile, fileName, onFiles, autoOptimize, optConfig]);
   const handleCancelPaste = useCallback(() => {
     if (pastedFile?.previewUrl) URL.revokeObjectURL(pastedFile.previewUrl);
     setPastedFile(null);
@@ -647,9 +913,12 @@ var UploadZone = ({
   const presentForRename = useCallback((file) => {
     const previewUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : "";
     const defaultName = file.name.replace(/\.[^.]+$/, "") || "file";
-    setPastedFile({ file, previewUrl, name: defaultName });
+    setPastedFile({ file, previewUrl, name: defaultName, origSize: file.size });
     setFileName(defaultName);
     setEditingName(false);
+    getImageDimensions(file).then((dims) => {
+      if (dims) setPastedFile((prev) => prev && prev.file === file ? { ...prev, origDims: dims } : prev);
+    });
   }, []);
   const handleDrop = useCallback((e) => {
     e.preventDefault();
@@ -659,7 +928,7 @@ var UploadZone = ({
     if (files.length === 1 && !multiple) {
       presentForRename(files[0]);
     } else if (files.length > 0) {
-      onFiles(multiple ? files : [files[0]]);
+      void handleBatchFiles(multiple ? files : [files[0]]);
     }
   }, [onFiles, multiple, presentForRename]);
   const handleInputChange = useCallback((e) => {
@@ -667,87 +936,189 @@ var UploadZone = ({
     if (files.length === 1 && !multiple) {
       presentForRename(files[0]);
     } else if (files.length > 0) {
-      onFiles(multiple ? files : [files[0]]);
+      void handleBatchFiles(multiple ? files : [files[0]]);
     }
     e.target.value = "";
   }, [onFiles, multiple, presentForRename]);
+  const handleBatchFiles = useCallback(async (files) => {
+    if (!autoOptimize) {
+      onFiles(files);
+      return;
+    }
+    setOptimizing(true);
+    try {
+      const out = [];
+      for (const f of files) {
+        if (isProcessableImage(f)) {
+          const r = await processImage(f, {
+            maxDimension: optConfig.maxDimension,
+            quality: optConfig.quality
+          });
+          out.push(r.changed ? r.file : f);
+        } else {
+          out.push(f);
+        }
+      }
+      onFiles(out);
+    } finally {
+      setOptimizing(false);
+    }
+  }, [autoOptimize, onFiles, optConfig]);
+  const fmtKB = (n) => n >= 1024 * 1024 ? `${(n / 1024 / 1024).toFixed(1)} MB` : `${(n / 1024).toFixed(1)} KB`;
+  const optimizeToggle = showOptimizeToggle ? /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground cursor-pointer select-none", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: autoOptimize,
+        onChange: (e) => setAutoOptimizePersist(e.target.checked),
+        className: "cursor-pointer"
+      }
+    ),
+    /* @__PURE__ */ jsx(Wand2, { className: "w-3 h-3" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Optimize for web (WebP, max ",
+      optConfig.maxDimension ?? 2048,
+      "px)"
+    ] })
+  ] }) : null;
   if (pastedFile) {
-    return /* @__PURE__ */ jsx("div", { className: cn(
+    const willOptimize = autoOptimize && isProcessableImage(pastedFile.file);
+    return /* @__PURE__ */ jsxs("div", { className: cn(
       "border-2 border-solid border-primary rounded-lg p-4 transition-colors",
       className
-    ), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-      pastedFile.previewUrl ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: pastedFile.previewUrl,
-          alt: "Pasted content",
-          className: "max-h-32 max-w-full rounded-md object-contain border border-border"
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-md bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Clipboard, { className: "w-6 h-6 text-muted-foreground" }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 w-full max-w-xs", children: editingName ? /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: nameInputRef,
-          type: "text",
-          value: fileName,
-          onChange: (e) => setFileName(e.target.value),
-          onKeyDown: (e) => {
-            if (e.key === "Enter") {
-              setEditingName(false);
-              handleConfirmPaste();
-            }
-            if (e.key === "Escape") setEditingName(false);
-          },
-          onBlur: () => setEditingName(false),
-          className: "flex-1 px-2 py-1 text-sm rounded border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring text-center",
-          placeholder: "File name"
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setEditingName(true),
-          className: "flex items-center gap-1 mx-auto px-2 py-1 text-sm text-muted-foreground hover:text-foreground rounded hover:bg-accent transition-colors",
-          title: "Rename",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate max-w-[200px]", children: fileName }),
-            /* @__PURE__ */ jsx(Pencil, { className: "w-3 h-3 flex-shrink-0 opacity-50" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
-        pastedFile.file.type,
-        " \xB7 ",
-        (pastedFile.file.size / 1024).toFixed(1),
-        " KB"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxs(
+    ), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+        pastedFile.previewUrl ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            onClick: handleCancelPaste,
-            className: "px-3 py-1.5 text-xs font-medium rounded-md border border-border text-muted-foreground hover:bg-accent transition-colors flex items-center gap-1",
+            onClick: () => setLightboxOpen(true),
+            className: "group relative w-24 h-24 rounded-md border border-border bg-muted overflow-hidden flex items-center justify-center",
+            title: "Click to preview full size",
             children: [
-              /* @__PURE__ */ jsx(X, { className: "w-3 h-3" }),
-              " Cancel"
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: pastedFile.previewUrl,
+                  alt: "Pasted content",
+                  className: "w-full h-full object-cover",
+                  loading: "lazy",
+                  decoding: "async"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4 text-white" }) })
             ]
           }
-        ),
-        /* @__PURE__ */ jsxs(
+        ) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-md bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Clipboard, { className: "w-6 h-6 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 w-full max-w-xs", children: editingName ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: nameInputRef,
+            type: "text",
+            value: fileName,
+            onChange: (e) => setFileName(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                setEditingName(false);
+                handleConfirmPaste();
+              }
+              if (e.key === "Escape") setEditingName(false);
+            },
+            onBlur: () => setEditingName(false),
+            className: "flex-1 px-2 py-1 text-sm rounded border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring text-center",
+            placeholder: "File name"
+          }
+        ) : /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            onClick: handleConfirmPaste,
-            className: "px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1",
+            onClick: () => setEditingName(true),
+            className: "flex items-center gap-1 mx-auto px-2 py-1 text-sm text-muted-foreground hover:text-foreground rounded hover:bg-accent transition-colors",
+            title: "Rename",
             children: [
-              /* @__PURE__ */ jsx(Check, { className: "w-3 h-3" }),
-              " Upload"
+              /* @__PURE__ */ jsx("span", { className: "truncate max-w-[200px]", children: fileName }),
+              /* @__PURE__ */ jsx(Pencil, { className: "w-3 h-3 flex-shrink-0 opacity-50" })
             ]
           }
-        )
-      ] })
-    ] }) });
+        ) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground text-center", children: [
+          pastedFile.file.type,
+          " \xB7 ",
+          fmtKB(pastedFile.origSize),
+          pastedFile.origDims && ` \xB7 ${pastedFile.origDims.width}\xD7${pastedFile.origDims.height}`,
+          willOptimize && pastedFile.origDims && (pastedFile.origDims.width > 2048 || pastedFile.origDims.height > 2048 || pastedFile.file.type !== "image/webp") && /* @__PURE__ */ jsxs("span", { className: "block text-primary mt-0.5", children: [
+            /* @__PURE__ */ jsx(Wand2, { className: "w-3 h-3 inline -mt-0.5 mr-1" }),
+            "Will be optimized to WebP",
+            pastedFile.origDims.width > 2048 || pastedFile.origDims.height > 2048 ? ", max 2048px" : ""
+          ] })
+        ] }),
+        isProcessableImage(pastedFile.file) && optimizeToggle,
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleCancelPaste,
+              className: "px-3 py-1.5 text-xs font-medium rounded-md border border-border text-muted-foreground hover:bg-accent transition-colors flex items-center gap-1",
+              disabled: optimizing,
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "w-3 h-3" }),
+                " Cancel"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleConfirmPaste,
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1",
+              disabled: optimizing,
+              children: [
+                optimizing ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "w-3 h-3" }),
+                optimizing ? "Optimizing\u2026" : "Upload"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      lightboxOpen && pastedFile.previewUrl && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "fixed inset-0 z-[100] bg-black/80 flex items-center justify-center p-6",
+          onClick: () => setLightboxOpen(false),
+          onMouseDown: (e) => e.stopPropagation(),
+          onTouchStart: (e) => e.stopPropagation(),
+          role: "dialog",
+          "aria-label": "Image preview",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setLightboxOpen(false);
+                },
+                className: "absolute top-4 right-4 p-2 rounded-md bg-white/10 hover:bg-white/20 text-white",
+                "aria-label": "Close preview",
+                children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: pastedFile.previewUrl,
+                alt: "Full preview",
+                className: "max-w-full max-h-full object-contain",
+                onClick: (e) => e.stopPropagation()
+              }
+            )
+          ]
+        }
+      )
+    ] });
   }
   return /* @__PURE__ */ jsxs(
     "div",
@@ -782,13 +1153,10 @@ var UploadZone = ({
             className: "hidden"
           }
         ),
-        uploading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-2", children: [
+        uploading || optimizing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-2", children: [
           /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 text-primary animate-spin" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-            "Uploading\u2026 ",
-            uploadProgress > 0 ? `${Math.round(uploadProgress)}%` : ""
-          ] }),
-          uploadProgress > 0 && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs h-1.5 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: optimizing ? "Optimizing\u2026" : `Uploading\u2026 ${uploadProgress > 0 ? `${Math.round(uploadProgress)}%` : ""}` }),
+          !optimizing && uploadProgress > 0 && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs h-1.5 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
             "div",
             {
               className: "h-full bg-primary rounded-full transition-all duration-300",
@@ -809,7 +1177,15 @@ var UploadZone = ({
           accept && /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
             "Accepts: ",
             accept
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "mt-2 pt-2 border-t border-border/50 w-full flex justify-center",
+              onClick: (e) => e.stopPropagation(),
+              children: optimizeToggle
+            }
+          )
         ] })
       ]
     }
@@ -1461,7 +1837,7 @@ var StockPhotoSearch = ({
                     /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5" }),
                     " Saved"
                   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(Image, { className: "w-3.5 h-3.5" }),
+                    /* @__PURE__ */ jsx(Image$1, { className: "w-3.5 h-3.5" }),
                     " Save"
                   ] })
                 }
@@ -1496,6 +1872,144 @@ var StockPhotoSearch = ({
     }) })
   ] });
 };
+var TagEditor = ({ initial, suggestions, assetName, onCancel, onSave }) => {
+  const [labels, setLabels] = useState(() => Array.from(new Set(initial.map((l) => l.trim()).filter(Boolean))));
+  const [input, setInput] = useState("");
+  const [saving, setSaving] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  const filteredSuggestions = useMemo(() => {
+    const q = input.trim().toLowerCase();
+    const have = new Set(labels.map((l) => l.toLowerCase()));
+    return suggestions.filter((s) => !have.has(s.toLowerCase())).filter((s) => !q || s.toLowerCase().includes(q)).slice(0, 8);
+  }, [suggestions, input, labels]);
+  const addLabel = (raw) => {
+    const v = raw.trim();
+    if (!v) return;
+    setLabels((prev) => prev.some((p) => p.toLowerCase() === v.toLowerCase()) ? prev : [...prev, v]);
+    setInput("");
+  };
+  const removeLabel = (label) => {
+    setLabels((prev) => prev.filter((l) => l !== label));
+  };
+  const handleKey = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addLabel(input);
+    } else if (e.key === "Backspace" && !input && labels.length > 0) {
+      setLabels((prev) => prev.slice(0, -1));
+    }
+  };
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await onSave(labels);
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/60",
+      onClick: onCancel,
+      onMouseDown: (e) => e.stopPropagation(),
+      onTouchStart: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "w-[min(28rem,92vw)] rounded-lg bg-background border border-border shadow-xl p-4 flex flex-col gap-3",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Tag, { className: "w-4 h-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-foreground truncate", children: [
+                "Edit tags",
+                assetName ? ` \u2014 ${assetName}` : ""
+              ] }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancel, className: "ml-auto p-1 rounded hover:bg-muted", "aria-label": "Close", children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-muted-foreground" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 p-2 rounded-md border border-border min-h-[2.5rem]", children: [
+              labels.map((label) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "inline-flex items-center gap-1 rounded-full bg-primary/10 text-primary border border-primary/30 px-2 py-0.5 text-xs",
+                  children: [
+                    label,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => removeLabel(label),
+                        className: "opacity-70 hover:opacity-100",
+                        "aria-label": `Remove ${label}`,
+                        children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+                      }
+                    )
+                  ]
+                },
+                label
+              )),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  value: input,
+                  onChange: (e) => setInput(e.target.value),
+                  onKeyDown: handleKey,
+                  placeholder: labels.length === 0 ? "Add a tag and press Enter\u2026" : "Add another\u2026",
+                  className: "flex-1 min-w-[8rem] bg-transparent text-sm focus:outline-none text-foreground"
+                }
+              )
+            ] }),
+            filteredSuggestions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground self-center mr-1", children: "Suggestions:" }),
+              filteredSuggestions.map((s) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => addLabel(s),
+                  className: cn(
+                    "inline-flex items-center gap-0.5 rounded-full border border-border bg-muted text-muted-foreground hover:bg-muted/70 px-2 py-0.5 text-[11px]"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "w-2.5 h-2.5" }),
+                    s
+                  ]
+                },
+                s
+              ))
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onCancel,
+                  className: "px-3 py-1.5 text-xs rounded-md border border-border text-foreground hover:bg-muted",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleSave,
+                  disabled: saving,
+                  className: "px-3 py-1.5 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
+                  children: saving ? "Saving\u2026" : "Save tags"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
 var GlobalUploadToggle = ({ checked, onChange, appName }) => /* @__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",
@@ -1511,8 +2025,44 @@ 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 } = useAssets({ scope, accept, pageSize, listAppId });
+var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedIds, onToggleSelect, onDoubleClickSelect, onDelete, allowDelete, emptyText, listAppId, requireProductId, currentAppId, currentAppName, getAppName }) => {
+  const { assets, loading, error, refresh, remove, updateAsset, replaceFile } = useAssets({ scope, accept, pageSize, listAppId });
+  const replaceInputRef = React7.useRef(null);
+  const replaceTargetRef = React7.useRef(null);
+  const handleRename = useCallback(async (asset2) => {
+    const current = asset2.cleanName || asset2.name || "";
+    const next = window.prompt("Rename asset", current);
+    if (next === null) return;
+    const trimmed = next.trim();
+    if (!trimmed || trimmed === current) return;
+    await updateAsset(asset2.id, { name: trimmed });
+  }, [updateAsset]);
+  const handleReplace = useCallback((asset2) => {
+    replaceTargetRef.current = asset2.id;
+    replaceInputRef.current?.click();
+  }, []);
+  const handleReplaceFiles = useCallback(async (e) => {
+    const file = e.target.files?.[0];
+    const assetId = replaceTargetRef.current;
+    e.target.value = "";
+    replaceTargetRef.current = null;
+    if (!file || !assetId) return;
+    await replaceFile(assetId, file);
+  }, [replaceFile]);
+  const handleDeleteWithConfirm = useCallback(async (assetId) => {
+    if (!window.confirm("Delete this asset? It can be restored from the asset manager within 30 days.")) return;
+    const ok = await remove(assetId);
+    if (ok) onDelete?.(assetId);
+  }, [remove, onDelete]);
+  const [tagEditorAsset, setTagEditorAsset] = useState(null);
+  const handleEditTags = useCallback((asset2) => {
+    setTagEditorAsset(asset2);
+  }, []);
+  const handleSaveTags = useCallback(async (next) => {
+    if (!tagEditorAsset) return;
+    await updateAsset(tagEditorAsset.id, { labels: next });
+    setTagEditorAsset(null);
+  }, [tagEditorAsset, updateAsset]);
   const [activeLabels, setActiveLabels] = useState(/* @__PURE__ */ new Set());
   const toggleLabel = useCallback((label) => {
     setActiveLabels((prev) => {
@@ -1535,6 +2085,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;
@@ -1547,7 +2101,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" }) });
   }
@@ -1607,7 +2161,10 @@ var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedI
         selectedIds,
         onToggleSelect,
         onDoubleClickSelect,
-        onDelete: allowDelete ? onDelete : void 0,
+        onDelete: allowDelete ? handleDeleteWithConfirm : void 0,
+        onRename: handleRename,
+        onReplace: handleReplace,
+        onEditTags: handleEditTags,
         allowDelete,
         currentAppId,
         currentAppName,
@@ -1615,6 +2172,25 @@ var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedI
         activeLabels,
         onToggleLabel: toggleLabel
       }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: replaceInputRef,
+        type: "file",
+        className: "hidden",
+        onChange: handleReplaceFiles
+      }
+    ),
+    tagEditorAsset && /* @__PURE__ */ jsx(
+      TagEditor,
+      {
+        initial: tagEditorAsset.labels || [],
+        suggestions: allLabels.map((l) => l.label),
+        assetName: tagEditorAsset.cleanName || tagEditorAsset.name,
+        onCancel: () => setTagEditorAsset(null),
+        onSave: handleSaveTags
+      }
     )
   ] });
 };
@@ -1637,7 +2213,8 @@ var AssetPickerContent = ({
   defaultView = "grid",
   emptyText,
   pageSize = 50,
-  onConfirm
+  onConfirm,
+  imageOptimization
 }) => {
   const [appFilter, setAppFilter] = useState(defaultAppFilter);
   const hasAppFilter = !!appId;
@@ -1647,13 +2224,6 @@ var AssetPickerContent = ({
   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,
-    appId: uploadGlobal ? void 0 : appId,
-    listAppId
-  });
   const [tab, setTab] = useState("browse");
   const [viewMode, setViewMode] = useState(defaultView);
   const [search, setSearch] = useState("");
@@ -1663,7 +2233,7 @@ var AssetPickerContent = ({
     return new Set(Array.isArray(value) ? value : [value]);
   });
   const hasProductScope = !!productScope;
-  const [scopeTab, setScopeTab] = useState("collection");
+  const [scopeTab, setScopeTab] = useState(hasProductScope ? "product" : "collection");
   const effectiveAccept = useMemo(() => {
     if (acceptProp) return acceptProp;
     const entry = ASSET_MIME_FILTERS.find((f) => f.value === mimeFilter);
@@ -1680,6 +2250,13 @@ var AssetPickerContent = ({
     }
     return scope;
   }, [scope, productScope, scopeTab, hasProductScope]);
+  const { assets, upload, uploadFromUrl, uploadFromRemoteUrl, uploading, uploadProgress } = useAssets({
+    scope: activeScope,
+    accept: acceptProp,
+    pageSize,
+    appId: uploadGlobal ? void 0 : appId,
+    listAppId
+  });
   const toSelection = useCallback((asset2) => ({
     id: asset2.id,
     url: asset2.url,
@@ -1928,6 +2505,7 @@ var AssetPickerContent = ({
         allowDelete,
         emptyText,
         listAppId,
+        requireProductId: hasProductScope && scopeTab === "product" ? productScope.productId : void 0,
         currentAppId: appId,
         currentAppName: resolvedAppName,
         getAppName
@@ -1950,7 +2528,8 @@ var AssetPickerContent = ({
           accept: acceptProp,
           multiple,
           uploading,
-          uploadProgress
+          uploadProgress,
+          imageOptimization
         }
       )
     ] }),
@@ -2099,5 +2678,5 @@ var AssetPicker = (props) => {
 assertStylesLoaded();
 
 export { ASSET_MIME_FILTERS, AssetPicker, useAppRegistry, useAssets };
-//# sourceMappingURL=chunk-PQD2B6DA.js.map
-//# sourceMappingURL=chunk-PQD2B6DA.js.map
+//# sourceMappingURL=chunk-HKL24TFC.js.map
+//# sourceMappingURL=chunk-HKL24TFC.js.map