@proveanything/smartlinks-utils-ui 0.1.1 → 0.1.4

package/dist/chunk-WOCLZGRB.js

@@ -0,0 +1,920 @@
+import { cn } from './chunk-L7FQ52F5.js';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import * as SL from '@proveanything/smartlinks';
+import { Filter, Search, LayoutGrid, List, X, Loader2, AlertCircle, ImageOff, Clipboard, Pencil, Check, Upload, Link, Trash2, FileIcon, Image, Film, Music, FileText } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/AssetPicker/types.ts
+var ASSET_MIME_FILTERS = [
+  { value: "all", label: "All files" },
+  { value: "image", label: "Images", prefix: "image/" },
+  { value: "video", label: "Videos", prefix: "video/" },
+  { value: "audio", label: "Audio", prefix: "audio/" },
+  { value: "document", label: "Documents", prefix: "application/" },
+  { value: "pdf", label: "PDFs", prefix: "application/pdf" }
+];
+function useAssets({ scope, accept, admin, pageSize }) {
+  const [assets, setAssets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const fetchAssets = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await SL.asset.list({
+        scope,
+        mimeTypePrefix: accept,
+        limit: pageSize
+      });
+      if (mountedRef.current) {
+        setAssets(result);
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err?.message || "Failed to load assets");
+        setAssets([]);
+      }
+    } finally {
+      if (mountedRef.current) setLoading(false);
+    }
+  }, [scope.type, scope.collectionId, scope.productId, scope.proofId, accept, pageSize]);
+  useEffect(() => {
+    fetchAssets();
+  }, [fetchAssets]);
+  const upload = useCallback(async (file, onProgress) => {
+    setUploading(true);
+    setUploadProgress(0);
+    try {
+      const result = await SL.asset.upload({
+        file,
+        scope,
+        name: file.name,
+        admin,
+        onProgress: (pct) => {
+          setUploadProgress(pct);
+          onProgress?.(pct);
+        }
+      });
+      if (mountedRef.current) {
+        setAssets((prev) => [result, ...prev]);
+      }
+      return result;
+    } catch (err) {
+      if (mountedRef.current) setError(err?.message || "Upload failed");
+      return null;
+    } finally {
+      if (mountedRef.current) {
+        setUploading(false);
+        setUploadProgress(0);
+      }
+    }
+  }, [scope, admin]);
+  const uploadFromUrl = useCallback(async (url, name) => {
+    setUploading(true);
+    setUploadProgress(0);
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`Failed to fetch: ${response.statusText}`);
+      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);
+    } catch (err) {
+      if (mountedRef.current) setError(err?.message || "URL import failed");
+      return null;
+    } finally {
+      if (mountedRef.current) {
+        setUploading(false);
+        setUploadProgress(0);
+      }
+    }
+  }, [upload]);
+  const remove = useCallback(async (assetId) => {
+    try {
+      await SL.asset.remove({ assetId, scope });
+      if (mountedRef.current) {
+        setAssets((prev) => prev.filter((a) => a.id !== assetId));
+      }
+      return true;
+    } catch (err) {
+      if (mountedRef.current) setError(err?.message || "Delete failed");
+      return false;
+    }
+  }, [scope]);
+  return {
+    assets,
+    loading,
+    error,
+    refresh: fetchAssets,
+    upload,
+    uploadFromUrl,
+    remove,
+    uploading,
+    uploadProgress
+  };
+}
+function getIcon(mimeType) {
+  if (!mimeType) return FileIcon;
+  if (mimeType.startsWith("image/")) return Image;
+  if (mimeType.startsWith("video/")) return Film;
+  if (mimeType.startsWith("audio/")) return Music;
+  return FileText;
+}
+function formatSize(bytes) {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function getThumbnail(asset2) {
+  if (asset2.thumbnails?.x200) return asset2.thumbnails.x200;
+  if (asset2.thumbnails?.x100) return asset2.thumbnails.x100;
+  if (asset2.thumbnails?.x512) return asset2.thumbnails.x512;
+  if (asset2.mimeType?.startsWith("image/")) return asset2.url;
+  return null;
+}
+var AssetGridItem = ({ asset: asset2, selected, onToggle, onDelete, allowDelete }) => {
+  const thumb = getThumbnail(asset2);
+  const Icon = getIcon(asset2.mimeType);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative rounded-lg border-2 cursor-pointer transition-all overflow-hidden",
+        "hover:shadow-md",
+        selected ? "border-primary bg-primary/10" : "border-border hover:border-ring"
+      ),
+      onClick: onToggle,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "aspect-square bg-muted flex items-center justify-center overflow-hidden", children: thumb ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: thumb,
+            alt: asset2.name || asset2.id,
+            className: "w-full h-full object-cover",
+            loading: "lazy"
+          }
+        ) : /* @__PURE__ */ jsx(Icon, { className: "w-8 h-8 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium truncate text-foreground", title: asset2.name, children: asset2.cleanName || asset2.name || asset2.id }),
+          /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: [
+            formatSize(asset2.size),
+            asset2.mimeType && ` \u2022 ${asset2.mimeType.split("/")[1]?.toUpperCase() || asset2.mimeType}`
+          ] })
+        ] }),
+        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",
+          {
+            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" })
+          }
+        )
+      ]
+    }
+  );
+};
+var AssetListItem = ({ asset: asset2, selected, onToggle, onDelete, allowDelete }) => {
+  const thumb = getThumbnail(asset2);
+  const Icon = getIcon(asset2.mimeType);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group flex items-center gap-3 p-2 rounded-lg border cursor-pointer transition-all",
+        "hover:shadow-sm",
+        selected ? "border-primary bg-primary/10" : "border-border hover:border-ring"
+      ),
+      onClick: onToggle,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded bg-muted flex items-center justify-center overflow-hidden flex-shrink-0", children: thumb ? /* @__PURE__ */ jsx("img", { src: thumb, alt: asset2.name, className: "w-full h-full object-cover", loading: "lazy" }) : /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate text-foreground", children: asset2.cleanName || asset2.name || asset2.id }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            formatSize(asset2.size),
+            asset2.mimeType && ` \u2022 ${asset2.mimeType}`
+          ] })
+        ] }),
+        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",
+          {
+            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" })
+          }
+        )
+      ]
+    }
+  );
+};
+var AssetGrid = ({
+  assets,
+  viewMode,
+  selectedIds,
+  onToggleSelect,
+  onDelete,
+  allowDelete
+}) => {
+  if (assets.length === 0) return null;
+  if (viewMode === "list") {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-1", children: assets.map((asset2) => /* @__PURE__ */ jsx(
+      AssetListItem,
+      {
+        asset: asset2,
+        selected: selectedIds.has(asset2.id),
+        onToggle: () => onToggleSelect(asset2),
+        onDelete: allowDelete && onDelete ? () => onDelete(asset2.id) : void 0,
+        allowDelete
+      },
+      asset2.id
+    )) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2", children: assets.map((asset2) => /* @__PURE__ */ jsx(
+    AssetGridItem,
+    {
+      asset: asset2,
+      selected: selectedIds.has(asset2.id),
+      onToggle: () => onToggleSelect(asset2),
+      onDelete: allowDelete && onDelete ? () => onDelete(asset2.id) : void 0,
+      allowDelete
+    },
+    asset2.id
+  )) });
+};
+var UploadZone = ({
+  onFiles,
+  accept,
+  multiple,
+  uploading,
+  uploadProgress = 0,
+  className
+}) => {
+  const [dragOver, setDragOver] = useState(false);
+  const [pastedFile, setPastedFile] = useState(null);
+  const [editingName, setEditingName] = useState(false);
+  const [fileName, setFileName] = useState("");
+  const inputRef = useRef(null);
+  const nameInputRef = useRef(null);
+  const zoneRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (pastedFile?.previewUrl) URL.revokeObjectURL(pastedFile.previewUrl);
+    };
+  }, [pastedFile]);
+  useEffect(() => {
+    if (editingName) nameInputRef.current?.select();
+  }, [editingName]);
+  useEffect(() => {
+    const handlePaste = (e) => {
+      if (uploading) return;
+      const items = e.clipboardData?.items;
+      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;
+          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 });
+          setFileName(defaultName);
+          setEditingName(false);
+          return;
+        }
+      }
+    };
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [uploading, accept]);
+  const handleConfirmPaste = useCallback(() => {
+    if (!pastedFile) return;
+    const ext = pastedFile.file.name.includes(".") ? pastedFile.file.name.split(".").pop() : "png";
+    const finalName = `${fileName.trim() || "pasted-image"}.${ext}`;
+    const renamedFile = new File([pastedFile.file], finalName, { type: pastedFile.file.type });
+    onFiles([renamedFile]);
+    if (pastedFile.previewUrl) URL.revokeObjectURL(pastedFile.previewUrl);
+    setPastedFile(null);
+  }, [pastedFile, fileName, onFiles]);
+  const handleCancelPaste = useCallback(() => {
+    if (pastedFile?.previewUrl) URL.revokeObjectURL(pastedFile.previewUrl);
+    setPastedFile(null);
+    setEditingName(false);
+  }, [pastedFile]);
+  const handleDrag = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDragIn = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(true);
+  }, []);
+  const handleDragOut = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      onFiles(multiple ? files : [files[0]]);
+    }
+  }, [onFiles, multiple]);
+  const handleInputChange = useCallback((e) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      onFiles(multiple ? files : [files[0]]);
+    }
+    e.target.value = "";
+  }, [onFiles, multiple]);
+  if (pastedFile) {
+    return /* @__PURE__ */ jsx("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",
+        {
+          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(
+          "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",
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "w-3 h-3" }),
+              " Cancel"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "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",
+            children: [
+              /* @__PURE__ */ jsx(Check, { className: "w-3 h-3" }),
+              " Upload"
+            ]
+          }
+        )
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: zoneRef,
+      className: cn(
+        "relative border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors",
+        dragOver ? "border-primary bg-primary/5" : "border-border hover:border-ring",
+        uploading && "pointer-events-none opacity-70",
+        className
+      ),
+      onDrag: handleDrag,
+      onDragOver: handleDragIn,
+      onDragEnter: handleDragIn,
+      onDragLeave: handleDragOut,
+      onDrop: handleDrop,
+      onClick: () => inputRef.current?.click(),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            onChange: handleInputChange,
+            className: "hidden"
+          }
+        ),
+        uploading ? /* @__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(
+            "div",
+            {
+              className: "h-full bg-primary rounded-full transition-all duration-300",
+              style: { width: `${uploadProgress}%` }
+            }
+          ) })
+        ] }) : /* @__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" }),
+            ", or paste from clipboard"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Clipboard, { className: "w-3 h-3" }),
+            " Ctrl+V / \u2318V to paste"
+          ] }),
+          accept && /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
+            "Accepts: ",
+            accept
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var UrlImport = ({
+  onImport,
+  importing,
+  className
+}) => {
+  const [url, setUrl] = useState("");
+  const [error, setError] = useState("");
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!url.trim()) return;
+    try {
+      new URL(url.trim());
+    } catch {
+      setError("Please enter a valid URL");
+      return;
+    }
+    setError("");
+    const result = await onImport(url.trim());
+    if (result) setUrl("");
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn("flex gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ jsx(Link, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: url,
+          onChange: (e) => {
+            setUrl(e.target.value);
+            setError("");
+          },
+          placeholder: "https://example.com/image.png",
+          disabled: importing,
+          className: cn(
+            "w-full pl-8 pr-3 py-2 text-sm rounded-md border bg-transparent",
+            "placeholder:text-muted-foreground",
+            "focus:outline-none focus:ring-2 focus:ring-ring",
+            error ? "border-destructive" : "border-border"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "submit",
+        disabled: !url.trim() || importing,
+        className: cn(
+          "px-3 py-2 text-sm font-medium rounded-md transition-colors",
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          "flex items-center gap-1.5"
+        ),
+        children: [
+          importing ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : null,
+          "Import"
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1 absolute", children: error })
+  ] });
+};
+var ScopedAssetBrowser = ({ scope, accept, admin, pageSize, viewMode, search, selectedIds, onToggleSelect, onDelete, allowDelete, emptyText }) => {
+  const { assets, loading, error, refresh } = useAssets({ scope, accept, admin, pageSize });
+  const filteredAssets = useMemo(() => {
+    if (!search.trim()) return assets;
+    const q = search.toLowerCase();
+    return assets.filter(
+      (a) => (a.name || "").toLowerCase().includes(q) || (a.cleanName || "").toLowerCase().includes(q) || (a.mimeType || "").toLowerCase().includes(q)
+    );
+  }, [assets, search]);
+  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" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-md bg-destructive/10 text-destructive text-sm", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+      error,
+      /* @__PURE__ */ jsx("button", { onClick: refresh, className: "ml-auto underline text-xs", children: "Retry" })
+    ] });
+  }
+  if (filteredAssets.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(ImageOff, { className: "w-8 h-8 mb-2" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: emptyText || "No assets found" }),
+      search && /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: "Try adjusting your search" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    AssetGrid,
+    {
+      assets: filteredAssets,
+      viewMode,
+      selectedIds,
+      onToggleSelect,
+      onDelete: admin && allowDelete ? onDelete : void 0,
+      allowDelete: admin && allowDelete
+    }
+  );
+};
+var AssetPickerContent = ({
+  scope,
+  productScope,
+  allowUpload = true,
+  allowUrlImport = true,
+  multiple = false,
+  accept: acceptProp,
+  showTypeFilter,
+  value,
+  onSelect,
+  admin = false,
+  allowDelete = false,
+  defaultView = "grid",
+  emptyText,
+  pageSize = 50,
+  onConfirm
+}) => {
+  const { assets, upload, uploadFromUrl, uploading, uploadProgress } = useAssets({
+    scope,
+    accept: acceptProp,
+    admin,
+    pageSize
+  });
+  const [tab, setTab] = useState("browse");
+  const [viewMode, setViewMode] = useState(defaultView);
+  const [search, setSearch] = useState("");
+  const [mimeFilter, setMimeFilter] = useState("all");
+  const [selectedIds, setSelectedIds] = useState(() => {
+    if (!value) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(value) ? value : [value]);
+  });
+  const hasProductScope = !!productScope;
+  const [scopeTab, setScopeTab] = useState("collection");
+  const effectiveAccept = useMemo(() => {
+    if (acceptProp) return acceptProp;
+    const entry = ASSET_MIME_FILTERS.find((f) => f.value === mimeFilter);
+    return entry?.prefix;
+  }, [acceptProp, mimeFilter]);
+  const shouldShowFilter = showTypeFilter ?? !acceptProp;
+  const activeScope = useMemo(() => {
+    if (hasProductScope && scopeTab === "product") {
+      return { type: "product", collectionId: productScope.collectionId, productId: productScope.productId };
+    }
+    return scope;
+  }, [scope, productScope, scopeTab, hasProductScope]);
+  const toSelection = useCallback((asset2) => ({
+    id: asset2.id,
+    url: asset2.url,
+    name: asset2.name,
+    mimeType: asset2.mimeType,
+    size: asset2.size,
+    metadata: asset2.metadata,
+    thumbnails: asset2.thumbnails
+  }), []);
+  const handleToggleSelect = useCallback((asset2) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(asset2.id)) {
+        next.delete(asset2.id);
+      } else {
+        if (!multiple) next.clear();
+        next.add(asset2.id);
+      }
+      if (!onConfirm) {
+        const sel = toSelection(asset2);
+        if (multiple) {
+          if (next.has(asset2.id)) {
+            onSelect?.([sel]);
+          }
+        } else {
+          onSelect?.(next.has(asset2.id) ? sel : { id: "", url: "", name: "" });
+        }
+      }
+      return next;
+    });
+  }, [multiple, onSelect, onConfirm, toSelection]);
+  const handleUploadFiles = useCallback(async (files) => {
+    for (const file of files) {
+      const result = await upload(file);
+      if (result && !multiple) {
+        setSelectedIds(/* @__PURE__ */ new Set([result.id]));
+        onSelect?.(toSelection(result));
+      }
+    }
+    setTab("browse");
+  }, [upload, multiple, onSelect, toSelection]);
+  const handleUrlImport = useCallback(async (url) => {
+    const result = await uploadFromUrl(url);
+    if (result) {
+      setTab("browse");
+      if (!multiple) {
+        setSelectedIds(/* @__PURE__ */ new Set([result.id]));
+        onSelect?.(toSelection(result));
+      }
+    }
+    return result;
+  }, [uploadFromUrl, multiple, onSelect, toSelection]);
+  const handleDelete = useCallback(async (assetId) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(assetId);
+      return next;
+    });
+  }, []);
+  const handleConfirm = useCallback(() => {
+    const selectedAssets = assets.filter((a) => selectedIds.has(a.id)).map(toSelection);
+    onConfirm?.(selectedAssets);
+  }, [assets, selectedIds, onConfirm, toSelection]);
+  const tabs = [
+    { key: "browse", label: "Browse", show: true },
+    { key: "upload", label: "Upload", show: allowUpload },
+    { key: "url", label: "URL", show: allowUrlImport }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "smartlinks-ui-asset-picker-content flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1 bg-muted rounded-md p-0.5", children: tabs.filter((t) => t.show).map((t) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setTab(t.key),
+          className: cn(
+            "px-2.5 py-1 text-xs font-medium rounded transition-colors flex items-center gap-1",
+            tab === t.key ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: t.label
+        },
+        t.key
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      tab === "browse" && shouldShowFilter && /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Filter, { className: "w-3.5 h-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: mimeFilter,
+            onChange: (e) => setMimeFilter(e.target.value),
+            className: "text-xs py-1 pl-1 pr-5 rounded-md border border-border bg-transparent text-foreground focus:outline-none focus:ring-1 focus:ring-ring appearance-none cursor-pointer",
+            children: ASSET_MIME_FILTERS.map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.label }, f.value))
+          }
+        )
+      ] }),
+      tab === "browse" && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: "Search\u2026",
+            className: "pl-7 pr-2 py-1 text-xs rounded-md border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring w-36"
+          }
+        )
+      ] }),
+      tab === "browse" && /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5 bg-muted rounded p-0.5", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setViewMode("grid"),
+            className: cn("p-1 rounded", viewMode === "grid" ? "bg-background shadow-sm" : ""),
+            title: "Grid view",
+            children: /* @__PURE__ */ jsx(LayoutGrid, { className: "w-3.5 h-3.5 text-muted-foreground" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setViewMode("list"),
+            className: cn("p-1 rounded", viewMode === "list" ? "bg-background shadow-sm" : ""),
+            title: "List view",
+            children: /* @__PURE__ */ jsx(List, { className: "w-3.5 h-3.5 text-muted-foreground" })
+          }
+        )
+      ] })
+    ] }),
+    tab === "browse" && hasProductScope && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 border-b border-border", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setScopeTab("collection"),
+          className: cn(
+            "px-3 py-1.5 text-xs font-medium border-b-2 transition-colors -mb-px",
+            scopeTab === "collection" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
+          ),
+          children: "Collection Assets"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setScopeTab("product"),
+          className: cn(
+            "px-3 py-1.5 text-xs font-medium border-b-2 transition-colors -mb-px",
+            scopeTab === "product" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
+          ),
+          children: "Product Assets"
+        }
+      )
+    ] }),
+    tab === "browse" && /* @__PURE__ */ jsx(
+      ScopedAssetBrowser,
+      {
+        scope: activeScope,
+        accept: effectiveAccept,
+        admin,
+        pageSize,
+        viewMode,
+        search,
+        selectedIds,
+        onToggleSelect: handleToggleSelect,
+        onDelete: handleDelete,
+        allowDelete,
+        emptyText
+      },
+      `${activeScope.type}-${activeScope.productId || ""}-${effectiveAccept || "all"}`
+    ),
+    tab === "upload" && /* @__PURE__ */ jsx(
+      UploadZone,
+      {
+        onFiles: handleUploadFiles,
+        accept: acceptProp,
+        multiple,
+        uploading,
+        uploadProgress
+      }
+    ),
+    tab === "url" && /* @__PURE__ */ jsx(
+      UrlImport,
+      {
+        onImport: handleUrlImport,
+        importing: uploading
+      }
+    ),
+    onConfirm && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-2 border-t border-border", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        selectedIds.size,
+        " selected"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleConfirm,
+          disabled: selectedIds.size === 0,
+          className: cn(
+            "px-4 py-1.5 text-sm font-medium rounded-md transition-colors",
+            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          ),
+          children: "Confirm"
+        }
+      )
+    ] })
+  ] });
+};
+var PickerDialog = ({ open, onClose, children }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-2xl max-h-[80vh] bg-background rounded-xl shadow-2xl border border-border flex flex-col overflow-hidden mx-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Select Asset" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1 rounded hover:bg-accent transition-colors",
+            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-muted-foreground" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children })
+    ] })
+  ] });
+};
+var AssetPicker = (props) => {
+  const { mode = "inline", open: controlledOpen, onClose, trigger, onSelect, multiple, className } = props;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const handleOpen = useCallback(() => {
+    setInternalOpen(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setInternalOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const handleConfirm = useCallback((selections) => {
+    if (multiple) {
+      onSelect?.(selections);
+    } else {
+      onSelect?.(selections[0] || { id: "", url: "", name: "" });
+    }
+    handleClose();
+  }, [onSelect, multiple, handleClose]);
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsx("div", { className: cn("smartlinks-ui-asset-picker", className), children: /* @__PURE__ */ jsx(AssetPickerContent, { ...props }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger && /* @__PURE__ */ jsx("span", { onClick: handleOpen, className: "cursor-pointer", children: trigger }),
+    /* @__PURE__ */ jsx(PickerDialog, { open: isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx(AssetPickerContent, { ...props, onConfirm: handleConfirm }) })
+  ] });
+};
+
+export { ASSET_MIME_FILTERS, AssetPicker, useAssets };
+//# sourceMappingURL=chunk-WOCLZGRB.js.map
+//# sourceMappingURL=chunk-WOCLZGRB.js.map