@proveanything/smartlinks-utils-ui 1.13.8 → 1.13.11

package/dist/{chunk-E3GQ6LNZ.js → chunk-7RWLFKHC.js}

@@ -1,9 +1,9 @@
 import { assertStylesLoaded } from './chunk-OLYC54YT.js';
 import { cn } from './chunk-L7FQ52F5.js';
-import React8, { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
+import React9, { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as SL from '@proveanything/smartlinks';
-import { Filter, Search, LayoutGrid, List, Loader2, AlertCircle, Tag, X, ImageOff, Wand2, Maximize2, Clipboard, Pencil, Crop, Check, Upload, Link, MicOff, Mic, ChevronDown, ChevronRight, Sparkles, Image as Image$1, RotateCcw, RotateCw, FlipHorizontal, FlipVertical, RefreshCw, Plus, AlertTriangle, FileIcon, Film, Music, FileText, AppWindow, MoreVertical, Trash2 } from 'lucide-react';
+import { Filter, Search, LayoutGrid, List, Loader2, AlertCircle, Tag, X, ImageOff, Wand2, Maximize2, Clipboard, Pencil, Crop, Check, Upload, Link, MicOff, Mic, ChevronDown, ChevronRight, Sparkles, Image as Image$1, RotateCcw, RotateCw, FlipHorizontal, FlipVertical, RefreshCw, Plus, Copy, ExternalLink, AlertTriangle, Wrench, CheckCircle2, Trash2, FileIcon, Film, Music, FileText, AppWindow, MoreVertical, Info } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/AssetPicker/types.ts
@@ -350,7 +350,7 @@ var AppBadge = ({ appId, appName, size = "sm" }) => {
     }
   );
 };
-var CardMenu = ({ onRename, onReplace, onEditTags, onEditImage, onDelete, position = "absolute" }) => {
+var CardMenu = ({ onRename, onReplace, onEditTags, onEditImage, onShowDetails, onDelete, position = "absolute" }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const btnRef = useRef(null);
@@ -402,7 +402,7 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onEditImage, onDelete, positi
       window.removeEventListener("scroll", update, true);
     };
   }, [open]);
-  if (!onRename && !onReplace && !onEditTags && !onEditImage && !onDelete) return null;
+  if (!onRename && !onReplace && !onEditTags && !onEditImage && !onShowDetails && !onDelete) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -446,6 +446,23 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onEditImage, onDelete, positi
               onClick: (e) => e.stopPropagation(),
               onMouseDown: (e) => e.stopPropagation(),
               children: [
+                onShowDetails && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setOpen(false);
+                      onShowDetails();
+                    },
+                    className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent",
+                    children: [
+                      /* @__PURE__ */ jsx(Info, { className: "w-3 h-3" }),
+                      " Details"
+                    ]
+                  }
+                ),
                 onRename && /* @__PURE__ */ jsxs(
                   "button",
                   {
@@ -540,7 +557,7 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onEditImage, onDelete, positi
     }
   );
 };
-var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, onEditImage, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
+var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, onEditImage, onShowDetails, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
   const ownerAppId = getAssetAppId(asset2);
@@ -622,6 +639,7 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
             onReplace,
             onEditTags,
             onEditImage,
+            onShowDetails,
             onDelete: allowDelete ? onDelete : void 0
           }
         )
@@ -629,7 +647,7 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
     }
   );
 };
-var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, onEditImage, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
+var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, onEditImage, onShowDetails, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
   const ownerAppId = getAssetAppId(asset2);
@@ -699,6 +717,7 @@ var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
             onReplace,
             onEditTags,
             onEditImage,
+            onShowDetails,
             onDelete: allowDelete ? onDelete : void 0,
             position: "inline"
           }
@@ -718,6 +737,7 @@ var AssetGrid = ({
   onReplace,
   onEditTags,
   onEditImage,
+  onShowDetails,
   allowDelete,
   currentAppId,
   getAppName,
@@ -738,6 +758,7 @@ var AssetGrid = ({
         onReplace: onReplace ? () => onReplace(asset2) : void 0,
         onEditTags: onEditTags ? () => onEditTags(asset2) : void 0,
         onEditImage: onEditImage ? () => onEditImage(asset2) : void 0,
+        onShowDetails: onShowDetails ? () => onShowDetails(asset2) : void 0,
         allowDelete,
         currentAppId,
         getAppName,
@@ -759,6 +780,7 @@ var AssetGrid = ({
       onReplace: onReplace ? () => onReplace(asset2) : void 0,
       onEditTags: onEditTags ? () => onEditTags(asset2) : void 0,
       onEditImage: onEditImage ? () => onEditImage(asset2) : void 0,
+      onShowDetails: onShowDetails ? () => onShowDetails(asset2) : void 0,
       allowDelete,
       currentAppId,
       getAppName,
@@ -779,6 +801,51 @@ function isProcessableImage(file) {
   if (file.type === "image/svg+xml" || file.type === "image/gif") return false;
   return true;
 }
+async function sniffImageMime(file) {
+  try {
+    const head = new Uint8Array(await file.slice(0, 16).arrayBuffer());
+    if (head.length < 4) return null;
+    if (head[0] === 137 && head[1] === 80 && head[2] === 78 && head[3] === 71) {
+      return { mime: "image/png", ext: "png" };
+    }
+    if (head[0] === 255 && head[1] === 216 && head[2] === 255) {
+      return { mime: "image/jpeg", ext: "jpg" };
+    }
+    if (head[0] === 71 && head[1] === 73 && head[2] === 70 && head[3] === 56) {
+      return { mime: "image/gif", ext: "gif" };
+    }
+    if (head[0] === 82 && head[1] === 73 && head[2] === 70 && head[3] === 70 && head[8] === 87 && head[9] === 69 && head[10] === 66 && head[11] === 80) {
+      return { mime: "image/webp", ext: "webp" };
+    }
+    if (head[0] === 66 && head[1] === 77) {
+      return { mime: "image/bmp", ext: "bmp" };
+    }
+    if (head[4] === 102 && head[5] === 116 && head[6] === 121 && head[7] === 112) {
+      const brand = String.fromCharCode(head[8], head[9], head[10], head[11]);
+      if (brand === "avif" || brand === "avis") return { mime: "image/avif", ext: "avif" };
+      if (brand === "heic" || brand === "heix" || brand === "mif1" || brand === "msf1") {
+        return { mime: "image/heic", ext: "heic" };
+      }
+    }
+    if (head[0] === 60) {
+      const text = new TextDecoder().decode(head);
+      if (/^<\?xml|^<svg/i.test(text)) return { mime: "image/svg+xml", ext: "svg" };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+async function normalizeFileType(file, fallbackBaseName) {
+  const declaredType = (file.type || "").toLowerCase();
+  const hasExt = /\.[a-z0-9]+$/i.test(file.name);
+  if (declaredType.startsWith("image/") && hasExt) return file;
+  const sniffed = await sniffImageMime(file);
+  if (!sniffed) return file;
+  const base = (fallbackBaseName || file.name.replace(/\.[^.]+$/, "") || "image").trim() || "image";
+  const newName = `${base}.${sniffed.ext}`;
+  return new File([file], newName, { type: sniffed.mime, lastModified: file.lastModified });
+}
 async function loadImage(file) {
   const url = URL.createObjectURL(file);
   const img = new Image();
@@ -1350,18 +1417,22 @@ var UploadZone = ({
       if (!items) return;
       for (const item of Array.from(items)) {
         if (item.kind === "file") {
-          const file = item.getAsFile();
-          if (!file) continue;
-          if (accept && !file.type.startsWith(accept.replace("*", ""))) continue;
+          const raw = item.getAsFile();
+          if (!raw) continue;
           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, origSize: file.size });
-          setFileName(defaultName);
-          setEditingName(false);
-          getImageDimensions(file).then((dims) => {
-            if (dims) setPastedFile((prev) => prev && prev.file === file ? { ...prev, origDims: dims } : prev);
-          });
+          const defaultBase = !raw.name || raw.name === "image.png" || raw.name === "image" ? `pasted-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[T:]/g, "-")}` : raw.name.replace(/\.[^.]+$/, "");
+          void (async () => {
+            const file = await normalizeFileType(raw, defaultBase);
+            if (accept && file.type && !file.type.startsWith(accept.replace("*", ""))) return;
+            const previewUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : "";
+            const nameForDisplay = file.name.replace(/\.[^.]+$/, "") || defaultBase;
+            setPastedFile({ file, previewUrl, name: nameForDisplay, origSize: file.size });
+            setFileName(nameForDisplay);
+            setEditingName(false);
+            getImageDimensions(file).then((dims) => {
+              if (dims) setPastedFile((prev) => prev && prev.file === file ? { ...prev, origDims: dims } : prev);
+            });
+          })();
           return;
         }
       }
@@ -1410,7 +1481,8 @@ var UploadZone = ({
     e.stopPropagation();
     setDragOver(false);
   }, []);
-  const presentForRename = useCallback((file) => {
+  const presentForRename = useCallback(async (raw) => {
+    const file = await normalizeFileType(raw);
     const previewUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : "";
     const defaultName = file.name.replace(/\.[^.]+$/, "") || "file";
     setPastedFile({ file, previewUrl, name: defaultName, origSize: file.size });
@@ -1426,7 +1498,7 @@ var UploadZone = ({
     setDragOver(false);
     const files = Array.from(e.dataTransfer.files);
     if (files.length === 1 && !multiple) {
-      presentForRename(files[0]);
+      void presentForRename(files[0]);
     } else if (files.length > 0) {
       void handleBatchFiles(multiple ? files : [files[0]]);
     }
@@ -1434,21 +1506,22 @@ var UploadZone = ({
   const handleInputChange = useCallback((e) => {
     const files = Array.from(e.target.files || []);
     if (files.length === 1 && !multiple) {
-      presentForRename(files[0]);
+      void presentForRename(files[0]);
     } else if (files.length > 0) {
       void handleBatchFiles(multiple ? files : [files[0]]);
     }
     e.target.value = "";
   }, [onFiles, multiple, presentForRename]);
   const handleBatchFiles = useCallback(async (files) => {
+    const normalized = await Promise.all(files.map((f) => normalizeFileType(f)));
     if (!autoOptimize) {
-      onFiles(files);
+      onFiles(normalized);
       return;
     }
     setOptimizing(true);
     try {
       const out = [];
-      for (const f of files) {
+      for (const f of normalized) {
         if (isProcessableImage(f)) {
           const r = await processImage(f, {
             maxDimension: optConfig.maxDimension,
@@ -1668,12 +1741,8 @@ var UploadZone = ({
       onDragEnter: handleDragIn,
       onDragLeave: handleDragOut,
       onDrop: handleDrop,
-      onClick: () => inputRef.current?.click(),
-      role: "button",
+      onClick: () => zoneRef.current?.focus(),
       tabIndex: 0,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
-      },
       children: [
         /* @__PURE__ */ jsx(
           "input",
@@ -1699,8 +1768,20 @@ var UploadZone = ({
         ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 py-2", children: [
           /* @__PURE__ */ jsx(Upload, { className: "w-6 h-6 text-muted-foreground" }),
           /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-            "Drop files here, ",
-            /* @__PURE__ */ jsx("span", { className: "text-primary underline", children: "browse" }),
+            "Drop files here,",
+            " ",
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  inputRef.current?.click();
+                },
+                className: "text-primary underline hover:no-underline focus:outline-none focus:ring-1 focus:ring-ring rounded",
+                children: "browse"
+              }
+            ),
             ", or paste from clipboard"
           ] }),
           /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground flex items-center gap-1", children: [
@@ -2329,6 +2410,10 @@ var StockPhotoSearch = ({
     }
   }, [query, orientation, collectionId]);
   const handlePick = useCallback((photo) => {
+    setStaged((prev) => {
+      if (prev?.previewUrl) URL.revokeObjectURL(prev.previewUrl);
+      return null;
+    });
     const baseName = `stock-${(photo.alt || query.trim() || "photo").slice(0, 60).replace(/\s+/g, "-")}`;
     setStaged({ photo, name: baseName, file: null, previewUrl: null });
   }, [query]);
@@ -2543,7 +2628,7 @@ var StockPhotoSearch = ({
               {
                 type: "button",
                 onClick: () => handlePick(photo),
-                disabled: !!staged || saving,
+                disabled: isStaged || saving,
                 className: cn(
                   "absolute inset-0 flex items-center justify-center text-xs font-medium",
                   "bg-background/80 opacity-0 group-hover:opacity-100 transition-opacity",
@@ -2717,8 +2802,359 @@ var TagEditor = ({ initial, suggestions, assetName, onCancel, onSave }) => {
     }
   );
 };
+function getIcon2(mimeType) {
+  if (!mimeType) return FileIcon;
+  if (mimeType.startsWith("image/")) return Image$1;
+  if (mimeType.startsWith("video/")) return Film;
+  if (mimeType.startsWith("audio/")) return Music;
+  return FileText;
+}
+function formatSize2(bytes) {
+  if (bytes == null) return "\u2014";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+function formatAge(iso) {
+  if (!iso) return "\u2014";
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return iso;
+  const diff = Date.now() - t;
+  const day = 24 * 60 * 60 * 1e3;
+  if (diff < 6e4) return "just now";
+  if (diff < 36e5) return `${Math.floor(diff / 6e4)} min ago`;
+  if (diff < day) return `${Math.floor(diff / 36e5)} h ago`;
+  if (diff < 30 * day) return `${Math.floor(diff / day)} d ago`;
+  if (diff < 365 * day) return `${Math.floor(diff / (30 * day))} mo ago`;
+  return `${Math.floor(diff / (365 * day))} y ago`;
+}
+function isUnknownMime(asset2) {
+  const m = (asset2.mimeType || "").toLowerCase();
+  if (!m || m === "application/octet-stream" || m === "unknown" || m.endsWith("/unknown")) return true;
+  const name = (asset2.name || asset2.cleanName || "").toLowerCase();
+  if (/\.unknown(\?|$)/.test(name)) return true;
+  return false;
+}
+function getThumbnailUrl(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;
+  return null;
+}
+async function probeSize(url) {
+  try {
+    const res = await fetch(url, { method: "HEAD" });
+    const len = res.headers.get("content-length");
+    return len ? Number(len) : null;
+  } catch {
+    return null;
+  }
+}
+function probeImageDimensions(url) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve({ w: img.naturalWidth, h: img.naturalHeight });
+    img.onerror = () => resolve(null);
+    img.src = url;
+  });
+}
+var Row = ({ label, value, mono }) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 py-1", children: [
+  /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: label }),
+  /* @__PURE__ */ jsx("span", { className: cn("text-xs text-foreground text-right truncate", mono && "font-mono"), children: value })
+] });
+var AssetDetails = ({
+  asset: asset2,
+  onClose,
+  onRename,
+  onReplace,
+  onEditTags,
+  onEditImage,
+  onDelete,
+  onFix
+}) => {
+  const Icon = getIcon2(asset2.mimeType);
+  const thumbUrl = getThumbnailUrl(asset2);
+  const isImage = (asset2.mimeType || "").startsWith("image/");
+  const unknownMime = isUnknownMime(asset2);
+  const missingThumbnail = !thumbUrl && isImage;
+  const [dims, setDims] = useState(null);
+  const [thumbDims, setThumbDims] = useState(null);
+  const [thumbBytes, setThumbBytes] = useState(null);
+  const [sourceMimeProbe, setSourceMimeProbe] = useState(null);
+  const [fixing, setFixing] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      if (isImage) {
+        const d = await probeImageDimensions(asset2.url);
+        if (!cancelled) setDims(d);
+      }
+      if (thumbUrl) {
+        const [d, b] = await Promise.all([probeImageDimensions(thumbUrl), probeSize(thumbUrl)]);
+        if (cancelled) return;
+        setThumbDims(d);
+        setThumbBytes(b);
+      }
+      if (unknownMime) {
+        try {
+          const res = await fetch(asset2.url);
+          if (!res.ok) return;
+          const blob = await res.blob();
+          const file = new File([blob], asset2.name || "file", { type: blob.type });
+          const sniffed = await sniffImageMime(file);
+          if (!cancelled) setSourceMimeProbe(sniffed);
+        } catch {
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [asset2.id, asset2.url, thumbUrl, isImage, unknownMime]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [onClose]);
+  const copyId = () => {
+    try {
+      navigator.clipboard?.writeText(asset2.id);
+    } catch {
+    }
+  };
+  const handleFix = async () => {
+    if (!onFix || fixing) return;
+    setFixing(true);
+    try {
+      await onFix(asset2);
+    } finally {
+      setFixing(false);
+    }
+  };
+  if (typeof document === "undefined") return null;
+  const warnings = [];
+  if (unknownMime) {
+    const suggestion = sourceMimeProbe ? ` Detected as ${sourceMimeProbe.mime}.` : "";
+    warnings.push({ kind: "mime", text: `File type is missing or unknown.${suggestion}` });
+  }
+  if (missingThumbnail) warnings.push({ kind: "thumb", text: "Thumbnail has not been generated." });
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-[2147483646] flex items-center justify-center p-4",
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50", onClick: onClose }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": "Asset details",
+              className: "relative w-full max-w-lg max-h-[90vh] overflow-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-xl",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-between gap-2 px-4 py-3 border-b border-border bg-popover", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold truncate", children: asset2.cleanName || asset2.name || "Asset details" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      className: "p-1 rounded hover:bg-accent text-muted-foreground",
+                      "aria-label": "Close",
+                      children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-28 h-28 rounded-md bg-muted flex items-center justify-center overflow-hidden flex-shrink-0 border border-border", children: thumbUrl ? /* @__PURE__ */ jsx("img", { src: thumbUrl, alt: "", className: "w-full h-full object-cover" }) : isImage ? /* @__PURE__ */ jsx("img", { src: asset2.url, alt: "", className: "w-full h-full object-cover", onError: () => {
+                    } }) : /* @__PURE__ */ jsx(Icon, { className: "w-10 h-10 text-muted-foreground" }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", title: asset2.name, children: asset2.cleanName || asset2.name || asset2.id }),
+                      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground truncate", title: asset2.id, children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: copyId, className: "inline-flex items-center gap-1 hover:text-foreground", children: [
+                        /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3" }),
+                        " ",
+                        asset2.id
+                      ] }) }),
+                      /* @__PURE__ */ jsxs(
+                        "a",
+                        {
+                          href: asset2.url,
+                          target: "_blank",
+                          rel: "noreferrer",
+                          className: "mt-1 inline-flex items-center gap-1 text-[11px] text-primary hover:underline",
+                          children: [
+                            /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3" }),
+                            " Open original"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  warnings.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-amber-500/40 bg-amber-500/10 p-3 space-y-2", children: [
+                    warnings.map((w, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs text-foreground", children: [
+                      /* @__PURE__ */ jsx(AlertTriangle, { className: "w-3.5 h-3.5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" }),
+                      /* @__PURE__ */ jsx("span", { children: w.text })
+                    ] }, i)),
+                    onFix && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleFix,
+                        disabled: fixing,
+                        className: cn(
+                          "mt-1 inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md",
+                          "bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+                        ),
+                        title: "Re-saves the file with the correct type so the backend regenerates the thumbnail.",
+                        children: [
+                          fixing ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ jsx(Wrench, { className: "w-3 h-3" }),
+                          fixing ? "Fixing\u2026" : "Fix file type & thumbnail"
+                        ]
+                      }
+                    )
+                  ] }),
+                  warnings.length === 0 && isImage && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-emerald-700 dark:text-emerald-400", children: [
+                    /* @__PURE__ */ jsx(CheckCircle2, { className: "w-3.5 h-3.5" }),
+                    " File type and thumbnail look healthy."
+                  ] }),
+                  /* @__PURE__ */ jsxs("section", { children: [
+                    /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1", children: "File" }),
+                    /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border divide-y divide-border px-3", children: [
+                      /* @__PURE__ */ jsx(Row, { label: "Type", value: asset2.mimeType || /* @__PURE__ */ jsx("span", { className: "text-amber-600 dark:text-amber-400", children: "unknown" }), mono: true }),
+                      /* @__PURE__ */ jsx(Row, { label: "Size", value: formatSize2(asset2.size) }),
+                      /* @__PURE__ */ jsx(Row, { label: "Dimensions", value: dims ? `${dims.w} \xD7 ${dims.h}` : isImage ? "\u2014" : "n/a" }),
+                      /* @__PURE__ */ jsx(Row, { label: "Uploaded", value: formatAge(asset2.createdAt) }),
+                      asset2.app && /* @__PURE__ */ jsx(Row, { label: "App", value: asset2.app, mono: true }),
+                      asset2.labels && asset2.labels.length > 0 && /* @__PURE__ */ jsx(Row, { label: "Labels", value: asset2.labels.join(", ") })
+                    ] })
+                  ] }),
+                  isImage && /* @__PURE__ */ jsxs("section", { children: [
+                    /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1", children: "Thumbnail" }),
+                    /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border divide-y divide-border px-3", children: [
+                      /* @__PURE__ */ jsx(
+                        Row,
+                        {
+                          label: "Status",
+                          value: thumbUrl ? /* @__PURE__ */ jsx("span", { className: "text-emerald-700 dark:text-emerald-400", children: "Generated" }) : /* @__PURE__ */ jsx("span", { className: "text-amber-600 dark:text-amber-400", children: "Missing" })
+                        }
+                      ),
+                      thumbUrl && /* @__PURE__ */ jsx(Row, { label: "Dimensions", value: thumbDims ? `${thumbDims.w} \xD7 ${thumbDims.h}` : "\u2014" }),
+                      thumbUrl && /* @__PURE__ */ jsx(Row, { label: "Size", value: formatSize2(thumbBytes) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("section", { className: "flex flex-wrap gap-2 pt-1 border-t border-border", children: [
+                    onEditImage && (asset2.mimeType || "").startsWith("image/") && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onClose();
+                          onEditImage(asset2);
+                        },
+                        className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-md border border-border bg-background hover:bg-accent",
+                        children: [
+                          /* @__PURE__ */ jsx(Crop, { className: "w-3 h-3" }),
+                          " Edit image"
+                        ]
+                      }
+                    ),
+                    onRename && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onClose();
+                          onRename(asset2);
+                        },
+                        className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-md border border-border bg-background hover:bg-accent",
+                        children: [
+                          /* @__PURE__ */ jsx(Pencil, { className: "w-3 h-3" }),
+                          " Rename"
+                        ]
+                      }
+                    ),
+                    onReplace && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onClose();
+                          onReplace(asset2);
+                        },
+                        className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-md border border-border bg-background hover:bg-accent",
+                        children: [
+                          /* @__PURE__ */ jsx(Upload, { className: "w-3 h-3" }),
+                          " Replace file"
+                        ]
+                      }
+                    ),
+                    onEditTags && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onClose();
+                          onEditTags(asset2);
+                        },
+                        className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-md border border-border bg-background hover:bg-accent",
+                        children: [
+                          /* @__PURE__ */ jsx(Tag, { className: "w-3 h-3" }),
+                          " Edit tags"
+                        ]
+                      }
+                    ),
+                    onDelete && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onClose();
+                          onDelete(asset2);
+                        },
+                        className: "ml-auto inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-md border border-destructive/40 text-destructive bg-background hover:bg-destructive/10",
+                        children: [
+                          /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" }),
+                          " Delete"
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+async function buildFixFile(asset2) {
+  try {
+    const res = await fetch(asset2.url);
+    if (!res.ok) return null;
+    const blob = await res.blob();
+    const baseName = (asset2.cleanName || asset2.name || "file").replace(/\.[^.]+$/, "") || "file";
+    const raw = new File([blob], asset2.name || baseName, { type: blob.type || "" });
+    const normalised = await normalizeFileType(raw, baseName);
+    return normalised;
+  } catch {
+    return null;
+  }
+}
 var InlineConfirm = ({ open, title, body, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive, onConfirm, onCancel }) => {
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -2823,8 +3259,8 @@ var AttachToContextToggle = ({ checked, onChange, contextLabel }) => /* @__PURE_
   ] })
 ] });
 var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize, viewMode, search, selectedIds, onToggleSelect, onDoubleClickSelect, onDelete, allowDelete, emptyText, listAppId: _listAppId, currentAppId, currentAppName, getAppName, assets, loading, error, refresh, remove, updateAsset, replaceFile }) => {
-  const replaceInputRef = React8.useRef(null);
-  const replaceTargetRef = React8.useRef(null);
+  const replaceInputRef = React9.useRef(null);
+  const replaceTargetRef = React9.useRef(null);
   const handleRename = useCallback(async (asset2) => {
     const current = asset2.cleanName || asset2.name || "";
     const next = window.prompt("Rename asset", current);
@@ -2880,6 +3316,16 @@ var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize,
     await updateAsset(tagEditorAsset.id, { labels: next });
     setTagEditorAsset(null);
   }, [tagEditorAsset, updateAsset]);
+  const [detailsAsset, setDetailsAsset] = useState(null);
+  const handleShowDetails = useCallback((asset2) => {
+    setDetailsAsset(asset2);
+  }, []);
+  const handleFixAsset = useCallback(async (asset2) => {
+    const fixed = await buildFixFile(asset2);
+    if (!fixed) return;
+    const result = await replaceFile(asset2.id, fixed);
+    if (result) setDetailsAsset(result);
+  }, [replaceFile]);
   const [activeLabels, setActiveLabels] = useState(/* @__PURE__ */ new Set());
   const toggleLabel = useCallback((label) => {
     setActiveLabels((prev) => {
@@ -2979,6 +3425,7 @@ var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize,
         onReplace: handleReplace,
         onEditTags: handleEditTags,
         onEditImage: handleEditImage,
+        onShowDetails: handleShowDetails,
         allowDelete,
         currentAppId,
         currentAppName,
@@ -3024,6 +3471,19 @@ var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize,
         onSave: handleSaveTags
       }
     ),
+    detailsAsset && /* @__PURE__ */ jsx(
+      AssetDetails,
+      {
+        asset: detailsAsset,
+        onClose: () => setDetailsAsset(null),
+        onRename: handleRename,
+        onReplace: handleReplace,
+        onEditTags: handleEditTags,
+        onEditImage: handleEditImage,
+        onDelete: allowDelete ? (a) => handleDeleteWithConfirm(a.id) : void 0,
+        onFix: handleFixAsset
+      }
+    ),
     /* @__PURE__ */ jsx(
       InlineConfirm,
       {
@@ -3228,11 +3688,14 @@ var AssetPickerContent = ({
       name,
       ...sameAsActive ? {} : { scopeOverride: targetScope }
     });
-    if (result && !multiple) {
-      setSelectedIds(/* @__PURE__ */ new Set([result.id]));
-      onSelect?.(toSelection(result));
+    if (result) {
+      setTab("browse");
+      if (!multiple) {
+        setSelectedIds(/* @__PURE__ */ new Set([result.id]));
+        onSelect?.(toSelection(result));
+      }
+      await reconcileAfterUpload(targetScope);
     }
-    if (result) await reconcileAfterUpload(targetScope);
     return result;
   }, [uploadFromRemoteUrl, multiple, onSelect, toSelection, uploadScope, activeScope, reconcileAfterUpload]);
   const handleDelete = useCallback(async (assetId) => {
@@ -3634,5 +4097,5 @@ var AssetPicker = (props) => {
 assertStylesLoaded();
 
 export { ASSET_MIME_FILTERS, AssetPicker, useAppRegistry, useAssets };
-//# sourceMappingURL=chunk-E3GQ6LNZ.js.map
-//# sourceMappingURL=chunk-E3GQ6LNZ.js.map
+//# sourceMappingURL=chunk-7RWLFKHC.js.map
+//# sourceMappingURL=chunk-7RWLFKHC.js.map