@proveanything/smartlinks-utils-ui 0.1.0 → 0.1.1

package/dist/chunk-V7JHAER7.js

@@ -1,920 +0,0 @@
-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-blue-500 bg-blue-50 dark:bg-blue-950/30" : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
-      ),
-      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-gray-100 dark:bg-gray-800 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-gray-400 dark:text-gray-500" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium truncate text-gray-700 dark:text-gray-300", title: asset2.name, children: asset2.cleanName || asset2.name || asset2.id }),
-          /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-gray-400 dark:text-gray-500 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-blue-500 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-white" }) }),
-        allowDelete && onDelete && /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "absolute top-2 left-2 w-6 h-6 rounded-full bg-red-500/80 hover:bg-red-600 text-white 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-blue-500 bg-blue-50 dark:bg-blue-950/30" : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
-      ),
-      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-gray-100 dark:bg-gray-800 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-gray-400" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate text-gray-700 dark:text-gray-300", children: asset2.cleanName || asset2.name || asset2.id }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: [
-            formatSize(asset2.size),
-            asset2.mimeType && ` \u2022 ${asset2.mimeType}`
-          ] })
-        ] }),
-        selected && /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-white" }) }),
-        allowDelete && onDelete && /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "w-6 h-6 rounded-full bg-red-500/80 hover:bg-red-600 text-white 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-blue-400 dark:border-blue-500 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-gray-200 dark:border-gray-700"
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-md bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsx(Clipboard, { className: "w-6 h-6 text-gray-400" }) }),
-      /* @__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-gray-300 dark:border-gray-600 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 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-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 rounded hover:bg-gray-100 dark:hover:bg-gray-800 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-gray-400 dark:text-gray-500", 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-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 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-blue-500 text-white hover:bg-blue-600 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-blue-400 bg-blue-50 dark:bg-blue-950/30" : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500",
-        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-blue-500 animate-spin" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-            "Uploading\u2026 ",
-            uploadProgress > 0 ? `${Math.round(uploadProgress)}%` : ""
-          ] }),
-          uploadProgress > 0 && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "h-full bg-blue-500 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-gray-400 dark:text-gray-500" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-            "Drop files here, ",
-            /* @__PURE__ */ jsx("span", { className: "text-blue-500 underline", children: "browse" }),
-            ", or paste from clipboard"
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-gray-400 dark:text-gray-500 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-gray-400 dark:text-gray-500", 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-gray-400" }),
-      /* @__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-gray-400 dark:placeholder:text-gray-500",
-            "focus:outline-none focus:ring-2 focus:ring-blue-500",
-            error ? "border-red-400 dark:border-red-500" : "border-gray-300 dark:border-gray-600"
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "submit",
-        disabled: !url.trim() || importing,
-        className: cn(
-          "px-3 py-2 text-sm font-medium rounded-md transition-colors",
-          "bg-blue-500 text-white hover:bg-blue-600",
-          "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-red-500 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-gray-400 animate-spin" }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-md bg-red-50 dark:bg-red-950/30 text-red-600 dark:text-red-400 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-gray-400 dark:text-gray-500", 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-gray-100 dark:bg-gray-800 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-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-          ),
-          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-gray-400" }),
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            value: mimeFilter,
-            onChange: (e) => setMimeFilter(e.target.value),
-            className: "text-xs py-1 pl-1 pr-5 rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500 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-gray-400" }),
-        /* @__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-gray-300 dark:border-gray-600 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 w-36"
-          }
-        )
-      ] }),
-      tab === "browse" && /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5 bg-gray-100 dark:bg-gray-800 rounded p-0.5", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setViewMode("grid"),
-            className: cn("p-1 rounded", viewMode === "grid" ? "bg-white dark:bg-gray-700 shadow-sm" : ""),
-            title: "Grid view",
-            children: /* @__PURE__ */ jsx(LayoutGrid, { className: "w-3.5 h-3.5 text-gray-600 dark:text-gray-400" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setViewMode("list"),
-            className: cn("p-1 rounded", viewMode === "list" ? "bg-white dark:bg-gray-700 shadow-sm" : ""),
-            title: "List view",
-            children: /* @__PURE__ */ jsx(List, { className: "w-3.5 h-3.5 text-gray-600 dark:text-gray-400" })
-          }
-        )
-      ] })
-    ] }),
-    tab === "browse" && hasProductScope && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 border-b border-gray-200 dark:border-gray-700", 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-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-          ),
-          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-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-          ),
-          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-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", 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-blue-500 text-white hover:bg-blue-600",
-            "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-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden mx-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Select Asset" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
-            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-gray-500" })
-          }
-        )
-      ] }),
-      /* @__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-V7JHAER7.js.map
-//# sourceMappingURL=chunk-V7JHAER7.js.map