@proveanything/smartlinks-utils-ui 0.1.13 → 0.3.0

package/dist/{chunk-ECAGO3HU.js → chunk-XA5J6CZL.js}

@@ -1,7 +1,7 @@
 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 { Filter, Search, LayoutGrid, List, X, Loader2, AlertCircle, ImageOff, Clipboard, Pencil, Check, Upload, Link, MicOff, Mic, ChevronDown, ChevronRight, Sparkles, Image, Trash2, FileIcon, Film, Music, FileText } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/AssetPicker/types.ts
@@ -98,6 +98,29 @@ function useAssets({ scope, accept, pageSize }) {
       }
     }
   }, [upload]);
+  const uploadFromRemoteUrl = useCallback(async (url, opts) => {
+    setUploading(true);
+    setUploadProgress(0);
+    try {
+      const result = await SL.asset.uploadFromUrl({
+        url,
+        scope,
+        metadata: { name: opts?.name, ...opts?.metadata || {} }
+      });
+      if (mountedRef.current) {
+        setAssets((prev) => [result, ...prev]);
+      }
+      return result;
+    } catch (err) {
+      if (mountedRef.current) setError(err?.message || "Remote URL ingest failed");
+      return null;
+    } finally {
+      if (mountedRef.current) {
+        setUploading(false);
+        setUploadProgress(0);
+      }
+    }
+  }, [scope]);
   const remove = useCallback(async (assetId) => {
     try {
       await SL.asset.remove({ assetId, scope });
@@ -117,6 +140,7 @@ function useAssets({ scope, accept, pageSize }) {
     refresh: fetchAssets,
     upload,
     uploadFromUrl,
+    uploadFromRemoteUrl,
     remove,
     uploading,
     uploadProgress
@@ -187,6 +211,7 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
         allowDelete && onDelete && /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             className: "absolute top-2 left-2 w-6 h-6 rounded-full bg-destructive/80 hover:bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
             onClick: (e) => {
               e.stopPropagation();
@@ -237,6 +262,7 @@ var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
         allowDelete && onDelete && /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             className: "w-6 h-6 rounded-full bg-destructive/80 hover:bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0",
             onClick: (e) => {
               e.stopPropagation();
@@ -411,6 +437,7 @@ var UploadZone = ({
       ) : /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           onClick: () => setEditingName(true),
           className: "flex items-center gap-1 mx-auto px-2 py-1 text-sm text-muted-foreground hover:text-foreground rounded hover:bg-accent transition-colors",
           title: "Rename",
@@ -430,6 +457,7 @@ var UploadZone = ({
         /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             onClick: handleCancelPaste,
             className: "px-3 py-1.5 text-xs font-medium rounded-md border border-border text-muted-foreground hover:bg-accent transition-colors flex items-center gap-1",
             children: [
@@ -441,6 +469,7 @@ var UploadZone = ({
         /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             onClick: handleConfirmPaste,
             className: "px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1",
             children: [
@@ -525,8 +554,9 @@ var UrlImport = ({
 }) => {
   const [url, setUrl] = useState("");
   const [error, setError] = useState("");
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = useCallback(async (e) => {
+    e?.preventDefault();
+    e?.stopPropagation();
     if (!url.trim()) return;
     try {
       new URL(url.trim());
@@ -537,8 +567,8 @@ var UrlImport = ({
     setError("");
     const result = await onImport(url.trim());
     if (result) setUrl("");
-  };
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn("flex gap-2", className), children: [
+  }, [url, onImport]);
+  return /* @__PURE__ */ jsxs("div", { 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(
@@ -550,6 +580,13 @@ var UrlImport = ({
             setUrl(e.target.value);
             setError("");
           },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.stopPropagation();
+              handleSubmit();
+            }
+          },
           placeholder: "https://example.com/image.png",
           disabled: importing,
           className: cn(
@@ -564,7 +601,8 @@ var UrlImport = ({
     /* @__PURE__ */ jsxs(
       "button",
       {
-        type: "submit",
+        type: "button",
+        onClick: handleSubmit,
         disabled: !url.trim() || importing,
         className: cn(
           "px-3 py-2 text-sm font-medium rounded-md transition-colors",
@@ -581,6 +619,566 @@ var UrlImport = ({
     error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1 absolute", children: error })
   ] });
 };
+var ASPECT_PRESETS = [
+  { key: "square", label: "Square", hint: "1:1", size: "1024x1024" },
+  { key: "landscape", label: "Landscape", hint: "7:4", size: "1792x1024" },
+  { key: "portrait", label: "Portrait", hint: "4:7", size: "1024x1792" },
+  { key: "wide", label: "Wide", hint: "16:9", size: "1536x864" },
+  { key: "tall", label: "Tall", hint: "9:16", size: "864x1536" }
+];
+var QUALITY_OPTIONS = [
+  { value: "standard", label: "Standard" },
+  { value: "hd", label: "HD" }
+];
+var STYLE_OPTIONS = [
+  { value: "vivid", label: "Vivid" },
+  { value: "natural", label: "Natural" }
+];
+function extractImageUrl(response) {
+  if (!response) return null;
+  if (typeof response === "string") return response;
+  if (response.url) return response.url;
+  if (response.imageUrl) return response.imageUrl;
+  if (response.image_url) return response.image_url;
+  if (Array.isArray(response.data) && response.data[0]?.url) return response.data[0].url;
+  if (Array.isArray(response.images) && response.images[0]?.url) return response.images[0].url;
+  if (response.b64_json) return `data:image/png;base64,${response.b64_json}`;
+  if (Array.isArray(response.data) && response.data[0]?.b64_json) {
+    return `data:image/png;base64,${response.data[0].b64_json}`;
+  }
+  return null;
+}
+var AIImageGenerate = ({
+  collectionId,
+  onSave,
+  saving,
+  className
+}) => {
+  const [prompt, setPrompt] = useState("");
+  const [aspect, setAspect] = useState("square");
+  const [quality, setQuality] = useState("standard");
+  const [style, setStyle] = useState("vivid");
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [provider, setProvider] = useState("");
+  const [model, setModel] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [error, setError] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [saved, setSaved] = useState(false);
+  const SpeechRecognitionCtor = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
+  const voiceSupported = !!SpeechRecognitionCtor;
+  const recognitionRef = useRef(null);
+  const baseTextRef = useRef("");
+  const [listening, setListening] = useState(false);
+  const [voiceError, setVoiceError] = useState(null);
+  useEffect(() => {
+    return () => {
+      try {
+        recognitionRef.current?.stop();
+      } catch {
+      }
+      recognitionRef.current = null;
+    };
+  }, []);
+  const startListening = useCallback(() => {
+    if (!voiceSupported) return;
+    setVoiceError(null);
+    try {
+      const rec = new SpeechRecognitionCtor();
+      rec.continuous = true;
+      rec.interimResults = true;
+      rec.lang = typeof navigator !== "undefined" && navigator.language || "en-US";
+      baseTextRef.current = prompt ? prompt.replace(/\s+$/, "") + " " : "";
+      rec.onresult = (event) => {
+        let finalText = "";
+        let interimText = "";
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const r = event.results[i];
+          if (r.isFinal) finalText += r[0].transcript;
+          else interimText += r[0].transcript;
+        }
+        if (finalText) {
+          baseTextRef.current = (baseTextRef.current + finalText).replace(/\s+$/, "") + " ";
+          setPrompt(baseTextRef.current);
+        } else {
+          setPrompt(baseTextRef.current + interimText);
+        }
+      };
+      rec.onerror = (e) => {
+        const code = e?.error || "unknown";
+        if (code === "not-allowed" || code === "service-not-allowed") {
+          setVoiceError("Microphone permission denied.");
+        } else if (code === "no-speech") {
+          setVoiceError("No speech detected.");
+        } else if (code !== "aborted") {
+          setVoiceError(`Voice input error: ${code}`);
+        }
+      };
+      rec.onend = () => {
+        setListening(false);
+      };
+      recognitionRef.current = rec;
+      rec.start();
+      setListening(true);
+    } catch (err) {
+      setVoiceError(err?.message || "Could not start voice input");
+      setListening(false);
+    }
+  }, [voiceSupported, prompt, SpeechRecognitionCtor]);
+  const stopListening = useCallback(() => {
+    try {
+      recognitionRef.current?.stop();
+    } catch {
+    }
+    setListening(false);
+  }, []);
+  const toggleListening = useCallback(() => {
+    if (listening) stopListening();
+    else startListening();
+  }, [listening, startListening, stopListening]);
+  const handleGenerate = useCallback(async () => {
+    if (!prompt.trim() || !collectionId) return;
+    setGenerating(true);
+    setError(null);
+    setPreviewUrl(null);
+    setSaved(false);
+    try {
+      const sizeValue = ASPECT_PRESETS.find((a) => a.key === aspect)?.size || "1024x1024";
+      const params = {
+        prompt: prompt.trim(),
+        size: sizeValue,
+        quality,
+        style
+      };
+      if (provider.trim()) params.provider = provider.trim();
+      if (model.trim()) params.model = model.trim();
+      const res = await SL.ai.generateImage(collectionId, params);
+      const url = extractImageUrl(res);
+      if (!url) {
+        setError("AI did not return an image URL.");
+      } else {
+        setPreviewUrl(url);
+      }
+    } catch (err) {
+      setError(err?.message || "Image generation failed");
+    } finally {
+      setGenerating(false);
+    }
+  }, [prompt, aspect, quality, style, provider, model, collectionId]);
+  const handleSave = useCallback(async () => {
+    if (!previewUrl) return;
+    const trimmed = prompt.trim().slice(0, 60).replace(/\s+/g, "-") || "ai-image";
+    const result = await onSave(previewUrl, `ai-${trimmed}.png`);
+    if (result) {
+      setSaved(true);
+      setTimeout(() => {
+        setPreviewUrl(null);
+        setSaved(false);
+      }, 1500);
+    }
+  }, [previewUrl, prompt, onSave]);
+  if (!collectionId) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-md bg-muted text-muted-foreground text-sm", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+      "AI image generation requires a collection scope."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: "Prompt" }),
+        voiceSupported && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: toggleListening,
+            disabled: generating,
+            title: listening ? "Stop dictation" : "Dictate prompt",
+            className: cn(
+              "flex items-center gap-1 px-2 py-0.5 text-[11px] rounded-md border transition-colors",
+              listening ? "border-destructive text-destructive bg-destructive/10 animate-pulse" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted"
+            ),
+            children: [
+              listening ? /* @__PURE__ */ jsx(MicOff, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(Mic, { className: "w-3 h-3" }),
+              listening ? "Listening\u2026" : "Voice"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: prompt,
+            onChange: (e) => setPrompt(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                handleGenerate();
+              }
+            },
+            placeholder: "A serene mountain lake at golden hour, photorealistic, 35mm film\u2026",
+            rows: 3,
+            disabled: generating,
+            className: "w-full px-3 py-2 text-sm rounded-md border border-border bg-transparent placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+          }
+        ),
+        listening && /* @__PURE__ */ jsxs("span", { className: "absolute top-2 right-2 flex items-center gap-1 text-[10px] text-destructive", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-destructive animate-pulse" }),
+          "REC"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground", children: [
+        "Tip: \u2318/Ctrl + Enter to generate",
+        voiceSupported ? " \xB7 click Voice to dictate" : ""
+      ] }),
+      voiceError && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", children: voiceError })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: "Aspect ratio" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: ASPECT_PRESETS.map((a) => {
+        const active = aspect === a.key;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAspect(a.key),
+            disabled: generating,
+            className: cn(
+              "px-2.5 py-1 text-xs rounded-md border transition-colors flex items-center gap-1",
+              active ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: a.label }),
+              /* @__PURE__ */ jsx("span", { className: cn("text-[10px]", active ? "opacity-80" : "opacity-60"), children: a.hint })
+            ]
+          },
+          a.key
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: "Quality" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: quality,
+            onChange: (e) => setQuality(e.target.value),
+            disabled: generating,
+            className: "text-sm py-2 px-2 rounded-md border border-border bg-transparent text-foreground focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer",
+            children: QUALITY_OPTIONS.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: "Style" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: style,
+            onChange: (e) => setStyle(e.target.value),
+            disabled: generating,
+            className: "text-sm py-2 px-2 rounded-md border border-border bg-transparent text-foreground focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer",
+            children: STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setAdvancedOpen((v) => !v),
+          className: "self-start flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground transition-colors",
+          children: [
+            advancedOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" }),
+            "Advanced"
+          ]
+        }
+      ),
+      advancedOpen && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 p-2 rounded-md border border-border bg-muted/20", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[11px] font-medium text-foreground", children: "Provider" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: provider,
+              onChange: (e) => setProvider(e.target.value),
+              placeholder: "e.g. openai, google, stability",
+              disabled: generating,
+              className: "text-xs py-1.5 px-2 rounded-md border border-border bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[11px] font-medium text-foreground", children: "Model" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: model,
+              onChange: (e) => setModel(e.target.value),
+              placeholder: "e.g. gpt-image-1, imagen-3",
+              disabled: generating,
+              className: "text-xs py-1.5 px-2 rounded-md border border-border bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "col-span-2 text-[10px] text-muted-foreground", children: "Leave blank to use the platform default. Quality and Style options may be ignored by some providers." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleGenerate,
+        disabled: !prompt.trim() || generating,
+        className: cn(
+          "px-4 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: [
+          generating ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { className: "w-3.5 h-3.5" }),
+          generating ? "Generating\u2026" : "Generate"
+        ]
+      }
+    ) }),
+    error && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2.5 rounded-md bg-destructive/10 text-destructive text-xs", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+      error
+    ] }),
+    previewUrl && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border border-border rounded-md p-3 bg-muted/30", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative rounded overflow-hidden bg-background flex items-center justify-center", style: { minHeight: "12rem" }, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: previewUrl,
+          alt: prompt,
+          className: "max-w-full max-h-80 object-contain"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setPreviewUrl(null);
+              setSaved(false);
+            },
+            disabled: saving,
+            className: "px-3 py-1.5 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+            children: "Discard"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleSave,
+            disabled: saving || saved,
+            className: cn(
+              "px-3 py-1.5 text-xs font-medium rounded-md transition-colors flex items-center gap-1.5",
+              saved ? "bg-primary text-primary-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
+              "disabled:opacity-70 disabled:cursor-not-allowed"
+            ),
+            children: [
+              saving ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : saved ? /* @__PURE__ */ jsx(Check, { className: "w-3 h-3" }) : null,
+              saved ? "Saved" : saving ? "Saving\u2026" : "Save to library"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var ORIENTATIONS = [
+  { value: "", label: "Any shape" },
+  { value: "landscape", label: "Landscape" },
+  { value: "portrait", label: "Portrait" },
+  { value: "squarish", label: "Square" }
+];
+function getThumb(p) {
+  return p.thumbUrl || p.thumbnailUrl || p.thumbnail || p.previewUrl || p.urls?.small || p.urls?.thumb || p.src?.medium || p.src?.small || p.url;
+}
+function getFullUrl(p) {
+  return p.urls?.full || p.urls?.regular || p.src?.original || p.src?.large || p.url;
+}
+var StockPhotoSearch = ({
+  collectionId,
+  onSave,
+  saving,
+  className
+}) => {
+  const [query, setQuery] = useState("");
+  const [orientation, setOrientation] = useState("");
+  const [searching, setSearching] = useState(false);
+  const [error, setError] = useState(null);
+  const [results, setResults] = useState([]);
+  const [savedUrl, setSavedUrl] = useState(null);
+  const [pendingUrl, setPendingUrl] = useState(null);
+  const handleSearch = useCallback(async () => {
+    if (!query.trim() || !collectionId) return;
+    setSearching(true);
+    setError(null);
+    setResults([]);
+    setSavedUrl(null);
+    try {
+      const params = {
+        query: query.trim(),
+        per_page: 24
+      };
+      if (orientation) params.orientation = orientation;
+      const res = await SL.ai.searchPhotos(collectionId, params);
+      const list = Array.isArray(res) ? res : res?.photos || res?.results || [];
+      setResults(list);
+      if (list.length === 0) {
+        setError("No photos matched your search.");
+      }
+    } catch (err) {
+      setError(err?.message || "Stock photo search failed");
+    } finally {
+      setSearching(false);
+    }
+  }, [query, orientation, collectionId]);
+  const handleSave = useCallback(async (photo) => {
+    const fullUrl = getFullUrl(photo);
+    setPendingUrl(fullUrl);
+    const namePart = (photo.alt || query.trim() || "stock-photo").slice(0, 60).replace(/\s+/g, "-");
+    const result = await onSave(fullUrl, `stock-${namePart}.jpg`);
+    setPendingUrl(null);
+    if (result) {
+      setSavedUrl(fullUrl);
+      setTimeout(() => setSavedUrl(null), 1500);
+    }
+  }, [onSave, query]);
+  if (!collectionId) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-md bg-muted text-muted-foreground text-sm", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+      "Stock photo search requires a collection scope."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-[12rem]", children: [
+        /* @__PURE__ */ jsx(Search, { 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: query,
+            onChange: (e) => setQuery(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                handleSearch();
+              }
+            },
+            placeholder: "Search free stock photos\u2026",
+            disabled: searching,
+            className: "w-full pl-8 pr-3 py-2 text-sm rounded-md border border-border bg-transparent placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: orientation,
+          onChange: (e) => setOrientation(e.target.value),
+          disabled: searching,
+          className: "text-sm py-2 px-2 rounded-md border border-border bg-transparent text-foreground focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer",
+          children: ORIENTATIONS.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleSearch,
+          disabled: !query.trim() || searching,
+          className: cn(
+            "px-4 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: [
+            searching ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Search, { className: "w-3.5 h-3.5" }),
+            searching ? "Searching\u2026" : "Search"
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2.5 rounded-md bg-destructive/10 text-destructive text-xs", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+      error
+    ] }),
+    results.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2", children: results.map((photo, i) => {
+      const thumb = getThumb(photo);
+      const full = getFullUrl(photo);
+      const isPending = pendingUrl === full;
+      const isSaved = savedUrl === full;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative aspect-square rounded-md overflow-hidden border border-border bg-muted/30",
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumb,
+                alt: photo.alt || "",
+                loading: "lazy",
+                className: "w-full h-full object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSave(photo),
+                disabled: !!pendingUrl || 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",
+                  "text-foreground gap-1.5",
+                  (isPending || isSaved) && "opacity-100"
+                ),
+                children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }),
+                  " Saving\u2026"
+                ] }) : isSaved ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5" }),
+                  " Saved"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Image, { className: "w-3.5 h-3.5" }),
+                  " Save"
+                ] })
+              }
+            ),
+            photo.photographer && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 inset-x-0 px-1.5 py-0.5 text-[10px] text-background bg-foreground/60 truncate", children: photo.photographerUrl ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: photo.photographerUrl,
+                target: "_blank",
+                rel: "noreferrer noopener",
+                onClick: (e) => e.stopPropagation(),
+                className: "hover:underline",
+                children: photo.photographer
+              }
+            ) : photo.photographer })
+          ]
+        },
+        `${full}-${i}`
+      );
+    }) })
+  ] });
+};
 var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedIds, onToggleSelect, onDoubleClickSelect, onDelete, allowDelete, emptyText }) => {
   const { assets, loading, error, refresh } = useAssets({ scope, accept, pageSize });
   const filteredAssets = useMemo(() => {
@@ -597,7 +1195,7 @@ var ScopedAssetBrowser = ({ scope, accept, pageSize, viewMode, search, selectedI
     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" })
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: refresh, className: "ml-auto underline text-xs", children: "Retry" })
     ] });
   }
   if (filteredAssets.length === 0) {
@@ -625,6 +1223,8 @@ var AssetPickerContent = ({
   productScope,
   allowUpload = true,
   allowUrlImport = true,
+  allowAIGenerate,
+  allowStockPhotos,
   multiple = false,
   accept: acceptProp,
   showTypeFilter,
@@ -636,7 +1236,7 @@ var AssetPickerContent = ({
   pageSize = 50,
   onConfirm
 }) => {
-  const { assets, upload, uploadFromUrl, uploading, uploadProgress } = useAssets({
+  const { assets, upload, uploadFromUrl, uploadFromRemoteUrl, uploading, uploadProgress } = useAssets({
     scope,
     accept: acceptProp,
     pageSize
@@ -657,6 +1257,10 @@ var AssetPickerContent = ({
     return entry?.prefix;
   }, [acceptProp, mimeFilter]);
   const shouldShowFilter = showTypeFilter ?? !acceptProp;
+  const collectionId = scope.collectionId;
+  const acceptsImages = !acceptProp || acceptProp.startsWith("image");
+  const aiEnabled = (allowAIGenerate ?? acceptsImages) && !!collectionId;
+  const stockEnabled = (allowStockPhotos ?? acceptsImages) && !!collectionId;
   const activeScope = useMemo(() => {
     if (hasProductScope && scopeTab === "product") {
       return { type: "product", collectionId: productScope.collectionId, productId: productScope.productId };
@@ -715,6 +1319,14 @@ var AssetPickerContent = ({
     }
     return result;
   }, [uploadFromUrl, multiple, onSelect, toSelection]);
+  const handleRemoteIngest = useCallback(async (url, name) => {
+    const result = await uploadFromRemoteUrl(url, { name });
+    if (result && !multiple) {
+      setSelectedIds(/* @__PURE__ */ new Set([result.id]));
+      onSelect?.(toSelection(result));
+    }
+    return result;
+  }, [uploadFromRemoteUrl, multiple, onSelect, toSelection]);
   const handleDelete = useCallback(async (assetId) => {
     setSelectedIds((prev) => {
       const next = new Set(prev);
@@ -738,13 +1350,16 @@ var AssetPickerContent = ({
   const tabs = [
     { key: "browse", label: "Browse", show: true },
     { key: "upload", label: "Upload", show: allowUpload },
-    { key: "url", label: "URL", show: allowUrlImport }
+    { key: "url", label: "URL", show: allowUrlImport },
+    { key: "ai", label: "AI Generate", show: aiEnabled },
+    { key: "stock", label: "Stock", show: stockEnabled }
   ];
   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",
         {
+          type: "button",
           onClick: () => setTab(t.key),
           className: cn(
             "px-2.5 py-1 text-xs font-medium rounded transition-colors flex items-center gap-1",
@@ -784,6 +1399,7 @@ var AssetPickerContent = ({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => setViewMode("grid"),
             className: cn("p-1 rounded", viewMode === "grid" ? "bg-background shadow-sm" : ""),
             title: "Grid view",
@@ -793,6 +1409,7 @@ var AssetPickerContent = ({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => setViewMode("list"),
             className: cn("p-1 rounded", viewMode === "list" ? "bg-background shadow-sm" : ""),
             title: "List view",
@@ -805,6 +1422,7 @@ var AssetPickerContent = ({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: () => setScopeTab("collection"),
           className: cn(
             "px-3 py-1.5 text-xs font-medium border-b-2 transition-colors -mb-px",
@@ -816,6 +1434,7 @@ var AssetPickerContent = ({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: () => setScopeTab("product"),
           className: cn(
             "px-3 py-1.5 text-xs font-medium border-b-2 transition-colors -mb-px",
@@ -859,6 +1478,22 @@ var AssetPickerContent = ({
         importing: uploading
       }
     ),
+    tab === "ai" && aiEnabled && /* @__PURE__ */ jsx(
+      AIImageGenerate,
+      {
+        collectionId,
+        onSave: handleRemoteIngest,
+        saving: uploading
+      }
+    ),
+    tab === "stock" && stockEnabled && /* @__PURE__ */ jsx(
+      StockPhotoSearch,
+      {
+        collectionId,
+        onSave: handleRemoteIngest,
+        saving: 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,
@@ -868,6 +1503,7 @@ var AssetPickerContent = ({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: handleConfirm,
           disabled: selectedIds.size === 0,
           className: cn(
@@ -891,20 +1527,31 @@ var PickerDialog = ({ open, onClose, maxWidth, children }) => {
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-h-[85vh] bg-background rounded-xl shadow-2xl border border-border flex flex-col overflow-hidden mx-4", style: { maxWidth: maxWidth || "56rem" }, 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 min-h-0 overflow-y-auto p-4", children })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative z-10 w-full max-h-[85vh] bg-background rounded-xl shadow-2xl border border-border flex flex-col overflow-hidden mx-4",
+        style: { maxWidth: maxWidth || "56rem" },
+        onClick: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation(),
+        onTouchStart: (e) => e.stopPropagation(),
+        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",
+              {
+                type: "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 min-h-0 overflow-y-auto p-4", children })
+        ]
+      }
+    )
   ] });
 };
 var AssetPicker = (props) => {
@@ -936,5 +1583,5 @@ var AssetPicker = (props) => {
 };
 
 export { ASSET_MIME_FILTERS, AssetPicker, useAssets };
-//# sourceMappingURL=chunk-ECAGO3HU.js.map
-//# sourceMappingURL=chunk-ECAGO3HU.js.map
+//# sourceMappingURL=chunk-XA5J6CZL.js.map
+//# sourceMappingURL=chunk-XA5J6CZL.js.map