@proveanything/smartlinks-utils-ui 1.13.5 → 1.13.7

package/dist/{chunk-N2FPPTHH.js → chunk-WLN4WW7K.js}

@@ -1,9 +1,9 @@
 import { assertStylesLoaded } from './chunk-OLYC54YT.js';
 import { cn } from './chunk-L7FQ52F5.js';
-import React7, { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
+import React8, { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as SL from '@proveanything/smartlinks';
-import { Filter, Search, LayoutGrid, List, Loader2, AlertCircle, Tag, X, ImageOff, Wand2, Maximize2, Clipboard, Pencil, Check, Upload, Link, MicOff, Mic, ChevronDown, ChevronRight, Sparkles, Image as Image$1, Plus, AlertTriangle, FileIcon, Film, Music, FileText, AppWindow, MoreVertical, Trash2 } from 'lucide-react';
+import { Filter, Search, LayoutGrid, List, Loader2, AlertCircle, Tag, X, ImageOff, Wand2, Maximize2, Clipboard, Pencil, Crop, Check, Upload, Link, MicOff, Mic, ChevronDown, ChevronRight, Sparkles, Image as Image$1, RotateCcw, RotateCw, FlipHorizontal, FlipVertical, RefreshCw, Plus, AlertTriangle, FileIcon, Film, Music, FileText, AppWindow, MoreVertical, Trash2 } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/AssetPicker/types.ts
@@ -350,7 +350,7 @@ var AppBadge = ({ appId, appName, size = "sm" }) => {
     }
   );
 };
-var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolute" }) => {
+var CardMenu = ({ onRename, onReplace, onEditTags, onEditImage, onDelete, position = "absolute" }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const btnRef = useRef(null);
@@ -402,7 +402,7 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolut
       window.removeEventListener("scroll", update, true);
     };
   }, [open]);
-  if (!onRename && !onReplace && !onEditTags && !onDelete) return null;
+  if (!onRename && !onReplace && !onEditTags && !onEditImage && !onDelete) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -480,6 +480,23 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolut
                     ]
                   }
                 ),
+                onEditImage && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setOpen(false);
+                      onEditImage();
+                    },
+                    className: "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent",
+                    children: [
+                      /* @__PURE__ */ jsx(Crop, { className: "w-3 h-3" }),
+                      " Edit image"
+                    ]
+                  }
+                ),
                 onEditTags && /* @__PURE__ */ jsxs(
                   "button",
                   {
@@ -523,7 +540,7 @@ var CardMenu = ({ onRename, onReplace, onEditTags, onDelete, position = "absolut
     }
   );
 };
-var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
+var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, onEditImage, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
   const ownerAppId = getAssetAppId(asset2);
@@ -604,6 +621,7 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
             onRename,
             onReplace,
             onEditTags,
+            onEditImage,
             onDelete: allowDelete ? onDelete : void 0
           }
         )
@@ -611,7 +629,7 @@ var AssetGridItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
     }
   );
 };
-var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
+var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelete, onRename, onReplace, onEditTags, onEditImage, allowDelete, currentAppId, getAppName, activeLabels, onToggleLabel }) => {
   const thumb = getThumbnail(asset2);
   const Icon = getIcon(asset2.mimeType);
   const ownerAppId = getAssetAppId(asset2);
@@ -680,6 +698,7 @@ var AssetListItem = ({ asset: asset2, selected, onToggle, onDoubleClick, onDelet
             onRename,
             onReplace,
             onEditTags,
+            onEditImage,
             onDelete: allowDelete ? onDelete : void 0,
             position: "inline"
           }
@@ -698,6 +717,7 @@ var AssetGrid = ({
   onRename,
   onReplace,
   onEditTags,
+  onEditImage,
   allowDelete,
   currentAppId,
   getAppName,
@@ -717,6 +737,7 @@ var AssetGrid = ({
         onRename: onRename ? () => onRename(asset2) : void 0,
         onReplace: onReplace ? () => onReplace(asset2) : void 0,
         onEditTags: onEditTags ? () => onEditTags(asset2) : void 0,
+        onEditImage: onEditImage ? () => onEditImage(asset2) : void 0,
         allowDelete,
         currentAppId,
         getAppName,
@@ -737,6 +758,7 @@ var AssetGrid = ({
       onRename: onRename ? () => onRename(asset2) : void 0,
       onReplace: onReplace ? () => onReplace(asset2) : void 0,
       onEditTags: onEditTags ? () => onEditTags(asset2) : void 0,
+      onEditImage: onEditImage ? () => onEditImage(asset2) : void 0,
       allowDelete,
       currentAppId,
       getAppName,
@@ -838,6 +860,431 @@ async function processImage(file, opts = {}) {
     URL.revokeObjectURL(url);
   }
 }
+var ASPECTS = [
+  { key: "free", label: "Free", ratio: null },
+  { key: "1:1", label: "1:1", ratio: 1 },
+  { key: "4:3", label: "4:3", ratio: 4 / 3 },
+  { key: "3:4", label: "3:4", ratio: 3 / 4 },
+  { key: "16:9", label: "16:9", ratio: 16 / 9 },
+  { key: "9:16", label: "9:16", ratio: 9 / 16 }
+];
+function loadImage2(file) {
+  const url = URL.createObjectURL(file);
+  const img = new Image();
+  return new Promise((resolve, reject) => {
+    img.onload = () => resolve({ img, url });
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to decode"));
+    };
+    img.src = url;
+  });
+}
+var ImageEditor = ({
+  file,
+  initialName,
+  maxDimension = 2048,
+  quality = 0.85,
+  toWebp,
+  onCancel,
+  onConfirm
+}) => {
+  const [img, setImg] = useState(null);
+  const [imgUrl, setImgUrl] = useState(null);
+  const [rotation, setRotation] = useState(0);
+  const [flipH, setFlipH] = useState(false);
+  const [flipV, setFlipV] = useState(false);
+  const [aspect, setAspect] = useState("free");
+  const [crop, setCrop] = useState(null);
+  const [resizeMax, setResizeMax] = useState(maxDimension || 0);
+  const [name, setName] = useState(initialName || file.name.replace(/\.[^.]+$/, ""));
+  const [busy, setBusy] = useState(false);
+  const stageRef = useRef(null);
+  const dragStateRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    loadImage2(file).then(({ img: img2, url }) => {
+      if (cancelled) {
+        URL.revokeObjectURL(url);
+        return;
+      }
+      setImg(img2);
+      setImgUrl(url);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [file]);
+  useEffect(() => () => {
+    if (imgUrl) URL.revokeObjectURL(imgUrl);
+  }, [imgUrl]);
+  const rotated = rotation === 90 || rotation === 270;
+  const effW = img ? rotated ? img.naturalHeight : img.naturalWidth : 0;
+  const effH = img ? rotated ? img.naturalWidth : img.naturalHeight : 0;
+  useEffect(() => {
+    if (!img) return;
+    setCrop(null);
+  }, [img, rotation]);
+  const ratio = ASPECTS.find((a) => a.key === aspect)?.ratio || null;
+  const beginCrop = useCallback(() => {
+    if (!effW || !effH) return;
+    if (ratio) {
+      let w = effW, h = effW / ratio;
+      if (h > effH) {
+        h = effH;
+        w = effH * ratio;
+      }
+      setCrop({ x: (effW - w) / 2, y: (effH - h) / 2, w, h });
+    } else {
+      const w = effW * 0.8;
+      const h = effH * 0.8;
+      setCrop({ x: (effW - w) / 2, y: (effH - h) / 2, w, h });
+    }
+  }, [effW, effH, ratio]);
+  useEffect(() => {
+    if (!crop || !ratio) return;
+    let { x, y, w, h } = crop;
+    h = w / ratio;
+    if (y + h > effH) h = effH - y;
+    w = h * ratio;
+    if (x + w > effW) {
+      w = effW - x;
+      h = w / ratio;
+    }
+    setCrop({ x, y, w, h });
+  }, [aspect]);
+  const onPointerDown = useCallback((mode) => (e) => {
+    if (!crop || !stageRef.current) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.target.setPointerCapture(e.pointerId);
+    const rect = stageRef.current.getBoundingClientRect();
+    dragStateRef.current = {
+      mode,
+      startX: e.clientX,
+      startY: e.clientY,
+      startCrop: { ...crop },
+      stageW: rect.width,
+      stageH: rect.height
+    };
+  }, [crop]);
+  const onPointerMove = useCallback((e) => {
+    const ds = dragStateRef.current;
+    if (!ds || !crop) return;
+    const scaleX = effW / ds.stageW;
+    const scaleY = effH / ds.stageH;
+    const dx = (e.clientX - ds.startX) * scaleX;
+    const dy = (e.clientY - ds.startY) * scaleY;
+    let { x, y, w, h } = ds.startCrop;
+    const clampX = (v) => Math.max(0, Math.min(effW, v));
+    const clampY = (v) => Math.max(0, Math.min(effH, v));
+    if (ds.mode === "move") {
+      x = clampX(x + dx);
+      y = clampY(y + dy);
+      if (x + w > effW) x = effW - w;
+      if (y + h > effH) y = effH - h;
+    } else {
+      let x2 = x + w, y2 = y + h;
+      if (ds.mode?.includes("w")) x = clampX(x + dx);
+      if (ds.mode?.includes("e")) x2 = clampX(x2 + dx);
+      if (ds.mode?.includes("n")) y = clampY(y + dy);
+      if (ds.mode?.includes("s")) y2 = clampY(y2 + dy);
+      w = Math.max(8, x2 - x);
+      h = Math.max(8, y2 - y);
+      if (ratio) {
+        const sign = ds.mode === "nw" || ds.mode === "ne" || ds.mode === "n" ? -1 : 1;
+        const newH = w / ratio;
+        if (sign < 0) {
+          y = y + h - newH;
+          if (y < 0) {
+            y = 0;
+            h = ds.startCrop.y + ds.startCrop.h;
+            w = h * ratio;
+          } else h = newH;
+        } else {
+          h = newH;
+          if (y + h > effH) {
+            h = effH - y;
+            w = h * ratio;
+          }
+        }
+      }
+    }
+    setCrop({ x, y, w, h });
+  }, [crop, effW, effH, ratio]);
+  const onPointerUp = useCallback((e) => {
+    dragStateRef.current = null;
+    try {
+      e.target.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  }, []);
+  const handleApply = useCallback(async () => {
+    if (!img) return;
+    setBusy(true);
+    try {
+      const baseW = effW;
+      const baseH = effH;
+      const work = document.createElement("canvas");
+      work.width = baseW;
+      work.height = baseH;
+      const wctx = work.getContext("2d");
+      if (!wctx) throw new Error("canvas unsupported");
+      wctx.save();
+      wctx.translate(baseW / 2, baseH / 2);
+      wctx.rotate(rotation * Math.PI / 180);
+      wctx.scale(flipH ? -1 : 1, flipV ? -1 : 1);
+      wctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
+      wctx.restore();
+      const c = crop || { x: 0, y: 0, w: baseW, h: baseH };
+      let outW = Math.round(c.w);
+      let outH = Math.round(c.h);
+      if (resizeMax > 0) {
+        const longest = Math.max(outW, outH);
+        if (longest > resizeMax) {
+          const s = resizeMax / longest;
+          outW = Math.round(outW * s);
+          outH = Math.round(outH * s);
+        }
+      }
+      const out = document.createElement("canvas");
+      out.width = outW;
+      out.height = outH;
+      const octx = out.getContext("2d");
+      if (!octx) throw new Error("canvas unsupported");
+      octx.drawImage(work, c.x, c.y, c.w, c.h, 0, 0, outW, outH);
+      const useWebp = toWebp ?? file.type !== "image/webp";
+      const outType = useWebp ? "image/webp" : file.type || "image/png";
+      const blob = await new Promise((r) => out.toBlob((b) => r(b), outType, quality));
+      if (!blob) throw new Error("encode failed");
+      const ext = useWebp ? "webp" : file.name.match(/\.([^.]+)$/)?.[1] || "png";
+      const trimmed = (name.trim() || "image").replace(/\.[^.]+$/, "");
+      const newFile = new File([blob], `${trimmed}.${ext}`, { type: outType });
+      onConfirm(newFile, trimmed);
+    } finally {
+      setBusy(false);
+    }
+  }, [img, crop, effW, effH, rotation, flipH, flipV, resizeMax, file, toWebp, quality, name, onConfirm]);
+  const reset = useCallback(() => {
+    setRotation(0);
+    setFlipH(false);
+    setFlipV(false);
+    setCrop(null);
+    setAspect("free");
+    setResizeMax(maxDimension || 0);
+  }, [maxDimension]);
+  const cropStyle = useMemo(() => {
+    if (!crop || !effW || !effH) return null;
+    return {
+      left: `${crop.x / effW * 100}%`,
+      top: `${crop.y / effH * 100}%`,
+      width: `${crop.w / effW * 100}%`,
+      height: `${crop.h / effH * 100}%`
+    };
+  }, [crop, effW, effH]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[2147483646] flex items-center justify-center p-4 bg-black/60",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Edit image",
+        onMouseDown: (e) => e.stopPropagation(),
+        onTouchStart: (e) => e.stopPropagation(),
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-3xl max-h-[90vh] flex flex-col rounded-lg border border-border bg-popover text-popover-foreground shadow-xl overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-border", children: [
+            /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Crop, { className: "w-4 h-4" }),
+              " Edit image"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                className: "p-1 rounded hover:bg-accent",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 flex items-center justify-center bg-muted/30 p-3 overflow-auto", children: !img ? /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 animate-spin text-muted-foreground" }) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: stageRef,
+              className: "relative select-none touch-none",
+              style: {
+                aspectRatio: `${effW} / ${effH}`,
+                maxWidth: "100%",
+                maxHeight: "60vh",
+                width: "min(100%, 60vh * (var(--ar)))",
+                // CSS var fallback — explicit width/height managed by aspect-ratio + maxes
+                ["--ar"]: `${effW / effH}`
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: imgUrl,
+                    alt: "",
+                    draggable: false,
+                    className: "block w-full h-full object-contain pointer-events-none",
+                    style: {
+                      transform: `rotate(${rotation}deg) scale(${flipH ? -1 : 1}, ${flipV ? -1 : 1})`,
+                      transformOrigin: "center"
+                    }
+                  }
+                ),
+                cropStyle && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
+                    /* @__PURE__ */ jsx("div", { className: "absolute bg-black/50", style: { left: 0, top: 0, right: 0, height: cropStyle.top } }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute bg-black/50", style: { left: 0, bottom: 0, right: 0, top: `calc(${cropStyle.top} + ${cropStyle.height})` } }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute bg-black/50", style: { left: 0, top: cropStyle.top, width: cropStyle.left, height: cropStyle.height } }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute bg-black/50", style: { right: 0, top: cropStyle.top, left: `calc(${cropStyle.left} + ${cropStyle.width})`, height: cropStyle.height } })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute border-2 border-primary cursor-move",
+                      style: cropStyle,
+                      onPointerDown: onPointerDown("move"),
+                      onPointerMove,
+                      onPointerUp,
+                      children: ["nw", "ne", "sw", "se"].map((h) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "absolute w-3 h-3 bg-primary border border-background rounded-sm",
+                            h === "nw" && "-top-1.5 -left-1.5 cursor-nwse-resize",
+                            h === "ne" && "-top-1.5 -right-1.5 cursor-nesw-resize",
+                            h === "sw" && "-bottom-1.5 -left-1.5 cursor-nesw-resize",
+                            h === "se" && "-bottom-1.5 -right-1.5 cursor-nwse-resize"
+                          ),
+                          onPointerDown: onPointerDown(h),
+                          onPointerMove,
+                          onPointerUp
+                        },
+                        h
+                      ))
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-4 py-2 border-t border-border", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("button", { type: "button", title: "Rotate left", onClick: () => setRotation((r) => (r + 270) % 360), className: "p-1.5 rounded border border-border hover:bg-accent", children: /* @__PURE__ */ jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }),
+                /* @__PURE__ */ jsx("button", { type: "button", title: "Rotate right", onClick: () => setRotation((r) => (r + 90) % 360), className: "p-1.5 rounded border border-border hover:bg-accent", children: /* @__PURE__ */ jsx(RotateCw, { className: "w-3.5 h-3.5" }) }),
+                /* @__PURE__ */ jsx("button", { type: "button", title: "Flip horizontal", onClick: () => setFlipH((v) => !v), className: cn("p-1.5 rounded border border-border hover:bg-accent", flipH && "bg-accent"), children: /* @__PURE__ */ jsx(FlipHorizontal, { className: "w-3.5 h-3.5" }) }),
+                /* @__PURE__ */ jsx("button", { type: "button", title: "Flip vertical", onClick: () => setFlipV((v) => !v), className: cn("p-1.5 rounded border border-border hover:bg-accent", flipV && "bg-accent"), children: /* @__PURE__ */ jsx(FlipVertical, { className: "w-3.5 h-3.5" }) })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "Crop:" }),
+                ASPECTS.map((a) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setAspect(a.key);
+                      if (!crop) beginCrop();
+                    },
+                    className: cn(
+                      "px-2 py-0.5 text-[11px] rounded border transition-colors",
+                      aspect === a.key && crop ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:bg-accent"
+                    ),
+                    children: a.label
+                  },
+                  a.key
+                )),
+                !crop && /* @__PURE__ */ jsx("button", { type: "button", onClick: beginCrop, className: "px-2 py-0.5 text-[11px] rounded border border-border text-muted-foreground hover:bg-accent", children: "Start crop" }),
+                crop && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCrop(null), className: "px-2 py-0.5 text-[11px] rounded border border-border text-muted-foreground hover:bg-accent", children: "Clear crop" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border" }),
+              /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+                "Max edge:",
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    min: 0,
+                    step: 64,
+                    value: resizeMax,
+                    onChange: (e) => setResizeMax(Math.max(0, parseInt(e.target.value || "0", 10))),
+                    className: "w-20 px-1.5 py-0.5 text-xs rounded border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "px ",
+                  resizeMax === 0 && "(off)"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("button", { type: "button", onClick: reset, className: "ml-auto inline-flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground", children: [
+                /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3" }),
+                " Reset"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: name,
+                  onChange: (e) => setName(e.target.value),
+                  placeholder: "File name",
+                  className: "flex-1 px-2 py-1 text-xs rounded border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onCancel,
+                  disabled: busy,
+                  className: "px-3 py-1 text-xs rounded border border-border text-muted-foreground hover:bg-accent",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleApply,
+                  disabled: busy || !img,
+                  className: "px-3 py-1 text-xs rounded bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 inline-flex items-center gap-1",
+                  children: [
+                    busy ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "w-3 h-3" }),
+                    "Apply"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    document.body
+  );
+};
+async function urlToFile(url, name) {
+  const res = await fetch(url, { mode: "cors" });
+  const blob = await res.blob();
+  const ext = (name.match(/\.([^.]+)$/)?.[1] || (blob.type.split("/")[1] || "png")).toLowerCase();
+  const finalName = /\.[^.]+$/.test(name) ? name : `${name}.${ext}`;
+  return new File([blob], finalName, { type: blob.type || "image/png" });
+}
+function isEditableImage(mimeType) {
+  if (!mimeType) return false;
+  if (!mimeType.startsWith("image/")) return false;
+  if (mimeType === "image/svg+xml" || mimeType === "image/gif") return false;
+  return true;
+}
 var UploadZone = ({
   onFiles,
   accept,
@@ -884,6 +1331,7 @@ var UploadZone = ({
     }
   }, []);
   const [optimizing, setOptimizing] = useState(false);
+  const [editing, setEditing] = useState(false);
   const inputRef = useRef(null);
   const nameInputRef = useRef(null);
   const zoneRef = useRef(null);
@@ -1107,6 +1555,19 @@ var UploadZone = ({
         ] }),
         isProcessableImage(pastedFile.file) && optimizeToggle,
         /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          isEditableImage(pastedFile.file.type) && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setEditing(true),
+              className: "px-3 py-1.5 text-xs font-medium rounded-md border border-border text-muted-foreground hover:bg-accent transition-colors flex items-center gap-1",
+              disabled: optimizing,
+              children: [
+                /* @__PURE__ */ jsx(Crop, { className: "w-3 h-3" }),
+                " Edit"
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "button",
             {
@@ -1135,6 +1596,26 @@ var UploadZone = ({
           )
         ] })
       ] }),
+      editing && /* @__PURE__ */ jsx(
+        ImageEditor,
+        {
+          file: pastedFile.file,
+          initialName: fileName,
+          maxDimension: optConfig.maxDimension ?? 2048,
+          quality: optConfig.quality ?? 0.85,
+          onCancel: () => setEditing(false),
+          onConfirm: (newFile, newName) => {
+            if (pastedFile.previewUrl) URL.revokeObjectURL(pastedFile.previewUrl);
+            const previewUrl = URL.createObjectURL(newFile);
+            setPastedFile({ file: newFile, previewUrl, name: newName, origSize: newFile.size });
+            setFileName(newName);
+            getImageDimensions(newFile).then((dims) => {
+              if (dims) setPastedFile((prev) => prev && prev.file === newFile ? { ...prev, origDims: dims } : prev);
+            });
+            setEditing(false);
+          }
+        }
+      ),
       lightboxOpen && pastedFile.previewUrl && /* @__PURE__ */ jsxs(
         "div",
         {
@@ -1364,6 +1845,7 @@ function extractImageUrl(response) {
 var AIImageGenerate = ({
   collectionId,
   onSave,
+  onSaveFile,
   saving,
   className
 }) => {
@@ -1379,6 +1861,13 @@ var AIImageGenerate = ({
   const [previewUrl, setPreviewUrl] = useState(null);
   const [saved, setSaved] = useState(false);
   const [customName, setCustomName] = useState("");
+  const [editing, setEditing] = useState(false);
+  const [editedFile, setEditedFile] = useState(null);
+  const [editedPreview, setEditedPreview] = useState(null);
+  const [preparingEdit, setPreparingEdit] = useState(false);
+  useEffect(() => () => {
+    if (editedPreview) URL.revokeObjectURL(editedPreview);
+  }, [editedPreview]);
   const SpeechRecognitionCtor = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
   const voiceSupported = !!SpeechRecognitionCtor;
   const recognitionRef = useRef(null);
@@ -1483,16 +1972,40 @@ var AIImageGenerate = ({
     if (!previewUrl) return;
     const custom = customName.trim();
     const fileName = custom ? /\.[a-z0-9]{2,5}$/i.test(custom) ? custom : `${custom}.png` : `ai-${prompt.trim().slice(0, 60).replace(/\s+/g, "-") || "ai-image"}.png`;
-    const result = await onSave(previewUrl, fileName);
+    let result;
+    if (editedFile && onSaveFile) {
+      result = await onSaveFile(editedFile, fileName);
+    } else {
+      result = await onSave(previewUrl, fileName);
+    }
     if (result) {
       setSaved(true);
       setTimeout(() => {
         setPreviewUrl(null);
         setSaved(false);
         setCustomName("");
+        if (editedPreview) URL.revokeObjectURL(editedPreview);
+        setEditedFile(null);
+        setEditedPreview(null);
       }, 1500);
     }
-  }, [previewUrl, prompt, customName, onSave]);
+  }, [previewUrl, prompt, customName, onSave, onSaveFile, editedFile, editedPreview]);
+  const startEdit = useCallback(async () => {
+    if (!previewUrl) return;
+    setPreparingEdit(true);
+    try {
+      const baseName = customName.trim() || `ai-${prompt.trim().slice(0, 40).replace(/\s+/g, "-") || "image"}`;
+      const file = editedFile || await urlToFile(previewUrl, `${baseName}.png`);
+      if (!editedFile) {
+        setEditedFile(file);
+      }
+      setEditing(true);
+    } catch {
+      setError("Could not load image for editing.");
+    } finally {
+      setPreparingEdit(false);
+    }
+  }, [previewUrl, customName, prompt, editedFile]);
   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" }),
@@ -1669,14 +2182,17 @@ var AIImageGenerate = ({
       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: "relative rounded overflow-hidden bg-background flex items-center justify-center", style: { minHeight: "12rem" }, children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: editedPreview || previewUrl,
+            alt: prompt,
+            className: "max-w-full max-h-80 object-contain"
+          }
+        ),
+        editedPreview && /* @__PURE__ */ jsx("span", { className: "absolute top-1 left-1 px-1.5 py-0.5 text-[10px] rounded bg-primary text-primary-foreground", children: "Edited" })
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx("label", { className: "text-[11px] font-medium text-foreground", children: "Name (optional)" }),
         /* @__PURE__ */ jsx(
@@ -1692,6 +2208,19 @@ var AIImageGenerate = ({
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: startEdit,
+            disabled: saving || saved || preparingEdit,
+            className: "px-3 py-1.5 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors inline-flex items-center gap-1",
+            children: [
+              preparingEdit ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ jsx(Crop, { className: "w-3 h-3" }),
+              "Edit"
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -1699,6 +2228,9 @@ var AIImageGenerate = ({
             onClick: () => {
               setPreviewUrl(null);
               setSaved(false);
+              if (editedPreview) URL.revokeObjectURL(editedPreview);
+              setEditedFile(null);
+              setEditedPreview(null);
             },
             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",
@@ -1722,7 +2254,22 @@ var AIImageGenerate = ({
             ]
           }
         )
-      ] })
+      ] }),
+      editing && editedFile && /* @__PURE__ */ jsx(
+        ImageEditor,
+        {
+          file: editedFile,
+          initialName: customName.trim() || `ai-${prompt.trim().slice(0, 40).replace(/\s+/g, "-") || "image"}`,
+          onCancel: () => setEditing(false),
+          onConfirm: (file, name) => {
+            if (editedPreview) URL.revokeObjectURL(editedPreview);
+            setEditedFile(file);
+            setEditedPreview(URL.createObjectURL(file));
+            setCustomName(name);
+            setEditing(false);
+          }
+        }
+      )
     ] })
   ] });
 };
@@ -1741,6 +2288,7 @@ function getFullUrl(p) {
 var StockPhotoSearch = ({
   collectionId,
   onSave,
+  onSaveFile,
   saving,
   className
 }) => {
@@ -1749,15 +2297,19 @@ var StockPhotoSearch = ({
   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 [nameOverrides, setNameOverrides] = useState({});
+  const [staged, setStaged] = useState(null);
+  const [preparingEdit, setPreparingEdit] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [savedFlash, setSavedFlash] = useState(false);
+  useEffect(() => () => {
+    if (staged?.previewUrl) URL.revokeObjectURL(staged.previewUrl);
+  }, [staged]);
   const handleSearch = useCallback(async () => {
     if (!query.trim() || !collectionId) return;
     setSearching(true);
     setError(null);
     setResults([]);
-    setSavedUrl(null);
+    setSavedFlash(false);
     try {
       const params = {
         query: query.trim(),
@@ -1776,18 +2328,42 @@ var StockPhotoSearch = ({
       setSearching(false);
     }
   }, [query, orientation, collectionId]);
-  const handleSave = useCallback(async (photo) => {
-    const fullUrl = getFullUrl(photo);
-    setPendingUrl(fullUrl);
-    const override = (nameOverrides[fullUrl] || "").trim();
-    const fileName = override ? /\.[a-z0-9]{2,5}$/i.test(override) ? override : `${override}.jpg` : `stock-${(photo.alt || query.trim() || "stock-photo").slice(0, 60).replace(/\s+/g, "-")}.jpg`;
-    const result = await onSave(fullUrl, fileName);
-    setPendingUrl(null);
+  const handlePick = useCallback((photo) => {
+    const baseName = `stock-${(photo.alt || query.trim() || "photo").slice(0, 60).replace(/\s+/g, "-")}`;
+    setStaged({ photo, name: baseName, file: null, previewUrl: null });
+  }, [query]);
+  const handleConfirmSave = useCallback(async () => {
+    if (!staged) return;
+    const fullUrl = getFullUrl(staged.photo);
+    const trimmed = staged.name.trim() || "stock-photo";
+    const fileName = /\.[a-z0-9]{2,5}$/i.test(trimmed) ? trimmed : `${trimmed}.${staged.file ? "webp" : "jpg"}`;
+    let result;
+    if (staged.file && onSaveFile) {
+      result = await onSaveFile(staged.file, fileName);
+    } else {
+      result = await onSave(fullUrl, fileName);
+    }
     if (result) {
-      setSavedUrl(fullUrl);
-      setTimeout(() => setSavedUrl(null), 1500);
+      setSavedFlash(true);
+      if (staged.previewUrl) URL.revokeObjectURL(staged.previewUrl);
+      setStaged(null);
+      setTimeout(() => setSavedFlash(false), 1500);
+    }
+  }, [staged, onSave, onSaveFile]);
+  const handleStartEdit = useCallback(async () => {
+    if (!staged) return;
+    setPreparingEdit(true);
+    try {
+      const fullUrl = getFullUrl(staged.photo);
+      const file = staged.file || await urlToFile(fullUrl, `${staged.name || "stock-photo"}.jpg`);
+      setStaged((prev) => prev ? { ...prev, file } : prev);
+      setEditing(true);
+    } catch {
+      setError("Could not load image for editing.");
+    } finally {
+      setPreparingEdit(false);
     }
-  }, [onSave, query, nameOverrides]);
+  }, [staged]);
   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" }),
@@ -1850,74 +2426,151 @@ var StockPhotoSearch = ({
       /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
       error
     ] }),
+    savedFlash && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2 rounded-md bg-primary/10 text-primary text-xs", children: [
+      /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5" }),
+      " Saved to library."
+    ] }),
+    staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border border-border rounded-md p-3 bg-muted/30", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative rounded overflow-hidden bg-background flex items-center justify-center", style: { minHeight: "12rem" }, children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: staged.previewUrl || getThumb(staged.photo),
+            alt: staged.photo.alt || "",
+            className: "max-w-full max-h-80 object-contain"
+          }
+        ),
+        staged.previewUrl && /* @__PURE__ */ jsx("span", { className: "absolute top-1 left-1 px-1.5 py-0.5 text-[10px] rounded bg-primary text-primary-foreground", children: "Edited" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-[11px] font-medium text-foreground", children: "Name" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: staged.name,
+            onChange: (e) => setStaged((prev) => prev ? { ...prev, name: e.target.value } : prev),
+            disabled: !!saving,
+            className: "w-full px-2 py-1.5 text-xs rounded-md border border-border bg-transparent placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          }
+        )
+      ] }),
+      staged.photo.photographer && !staged.previewUrl && /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
+        "Photo by ",
+        staged.photo.photographerUrl ? /* @__PURE__ */ jsx("a", { href: staged.photo.photographerUrl, target: "_blank", rel: "noreferrer noopener", className: "underline", children: staged.photo.photographer }) : staged.photo.photographer
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleStartEdit,
+            disabled: !!saving || preparingEdit,
+            className: "px-3 py-1.5 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors inline-flex items-center gap-1",
+            children: [
+              preparingEdit ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ jsx(Crop, { className: "w-3 h-3" }),
+              "Edit"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (staged.previewUrl) URL.revokeObjectURL(staged.previewUrl);
+              setStaged(null);
+            },
+            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 inline-flex items-center gap-1",
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "w-3 h-3" }),
+              " Discard"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleConfirmSave,
+            disabled: !!saving,
+            className: "px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-70 inline-flex items-center gap-1.5",
+            children: [
+              saving ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "w-3 h-3" }),
+              saving ? "Saving\u2026" : "Save to library"
+            ]
+          }
+        )
+      ] }),
+      editing && staged.file && /* @__PURE__ */ jsx(
+        ImageEditor,
+        {
+          file: staged.file,
+          initialName: staged.name,
+          onCancel: () => setEditing(false),
+          onConfirm: (file, name) => {
+            setStaged((prev) => {
+              if (!prev) return prev;
+              if (prev.previewUrl) URL.revokeObjectURL(prev.previewUrl);
+              return { ...prev, file, previewUrl: URL.createObjectURL(file), name };
+            });
+            setEditing(false);
+          }
+        }
+      )
+    ] }),
     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(
+      const isStaged = staged?.photo && getFullUrl(staged.photo) === full;
+      return /* @__PURE__ */ jsx(
         "div",
         {
           className: "flex flex-col gap-1",
-          children: [
-            /* @__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$1, { 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 })
-            ] }),
+          children: /* @__PURE__ */ jsxs("div", { className: "group relative aspect-square rounded-md overflow-hidden border border-border bg-muted/30", children: [
             /* @__PURE__ */ jsx(
-              "input",
+              "img",
               {
-                type: "text",
-                value: nameOverrides[full] || "",
-                onChange: (e) => setNameOverrides((prev) => ({ ...prev, [full]: e.target.value })),
-                placeholder: "Optional name",
-                disabled: isPending || saving,
-                className: "w-full px-1.5 py-1 text-[11px] rounded-md border border-border bg-transparent placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                src: thumb,
+                alt: photo.alt || "",
+                loading: "lazy",
+                className: "w-full h-full object-cover"
               }
-            )
-          ]
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handlePick(photo),
+                disabled: !!staged || 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",
+                  isStaged && "opacity-100"
+                ),
+                children: isStaged ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5" }),
+                  " Selected"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Image$1, { className: "w-3.5 h-3.5" }),
+                  " Pick"
+                ] })
+              }
+            ),
+            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}`
       );
@@ -2063,7 +2716,7 @@ var TagEditor = ({ initial, suggestions, assetName, onCancel, onSave }) => {
   );
 };
 var InlineConfirm = ({ open, title, body, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive, onConfirm, onCancel }) => {
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -2168,8 +2821,8 @@ var AttachToContextToggle = ({ checked, onChange, contextLabel }) => /* @__PURE_
   ] })
 ] });
 var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize, viewMode, search, selectedIds, onToggleSelect, onDoubleClickSelect, onDelete, allowDelete, emptyText, listAppId: _listAppId, currentAppId, currentAppName, getAppName, assets, loading, error, refresh, remove, updateAsset, replaceFile }) => {
-  const replaceInputRef = React7.useRef(null);
-  const replaceTargetRef = React7.useRef(null);
+  const replaceInputRef = React8.useRef(null);
+  const replaceTargetRef = React8.useRef(null);
   const handleRename = useCallback(async (asset2) => {
     const current = asset2.cleanName || asset2.name || "";
     const next = window.prompt("Rename asset", current);
@@ -2182,6 +2835,21 @@ var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize,
     replaceTargetRef.current = asset2.id;
     replaceInputRef.current?.click();
   }, []);
+  const [editAsset, setEditAsset] = useState(null);
+  const [editFile, setEditFile] = useState(null);
+  const [editLoading, setEditLoading] = useState(false);
+  const handleEditImage = useCallback(async (asset2) => {
+    if (!isEditableImage(asset2.mimeType || void 0)) return;
+    setEditLoading(true);
+    try {
+      const file = await urlToFile(asset2.url, asset2.cleanName || asset2.name || "image");
+      setEditFile(file);
+      setEditAsset(asset2);
+    } catch {
+    } finally {
+      setEditLoading(false);
+    }
+  }, []);
   const handleReplaceFiles = useCallback(async (e) => {
     const file = e.target.files?.[0];
     const assetId = replaceTargetRef.current;
@@ -2308,6 +2976,7 @@ var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize,
         onRename: handleRename,
         onReplace: handleReplace,
         onEditTags: handleEditTags,
+        onEditImage: handleEditImage,
         allowDelete,
         currentAppId,
         currentAppName,
@@ -2325,6 +2994,24 @@ var ScopedAssetBrowser = ({ scope: _scope, accept: _accept, pageSize: _pageSize,
         onChange: handleReplaceFiles
       }
     ),
+    editAsset && editFile && /* @__PURE__ */ jsx(
+      ImageEditor,
+      {
+        file: editFile,
+        initialName: editAsset.cleanName || editAsset.name || "image",
+        onCancel: () => {
+          setEditAsset(null);
+          setEditFile(null);
+        },
+        onConfirm: async (file) => {
+          const target = editAsset;
+          setEditAsset(null);
+          setEditFile(null);
+          if (target) await replaceFile(target.id, file);
+        }
+      }
+    ),
+    editLoading && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[2147483645] flex items-center justify-center bg-black/30 pointer-events-none", children: /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 animate-spin text-primary" }) }),
     tagEditorAsset && /* @__PURE__ */ jsx(
       TagEditor,
       {
@@ -2503,6 +3190,21 @@ var AssetPickerContent = ({
     setTab("browse");
     await reconcileAfterUpload(targetScope);
   }, [upload, multiple, onSelect, toSelection, uploadScope, activeScope, reconcileAfterUpload]);
+  const handleSaveEditedFile = useCallback(async (file, name) => {
+    const finalFile = name && name.trim() ? new File([file], /\.[^.]+$/.test(name) ? name : `${name}.${file.name.split(".").pop() || "webp"}`, { type: file.type }) : file;
+    const targetScope = uploadScope;
+    const sameAsActive = targetScope === activeScope;
+    const result = await upload(finalFile, void 0, sameAsActive ? void 0 : targetScope);
+    if (result) {
+      setTab("browse");
+      if (!multiple) {
+        setSelectedIds(/* @__PURE__ */ new Set([result.id]));
+        onSelect?.(toSelection(result));
+      }
+      await reconcileAfterUpload(targetScope);
+    }
+    return result;
+  }, [upload, uploadScope, activeScope, multiple, onSelect, toSelection, reconcileAfterUpload]);
   const handleUrlImport = useCallback(async (url, name) => {
     const targetScope = uploadScope;
     const sameAsActive = targetScope === activeScope;
@@ -2587,7 +3289,7 @@ var AssetPickerContent = ({
         )
       ] }),
       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(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2595,7 +3297,7 @@ var AssetPickerContent = ({
             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"
+            className: "pl-8 pr-2 py-1 text-xs rounded-md border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring w-36"
           }
         )
       ] }),
@@ -2804,6 +3506,7 @@ var AssetPickerContent = ({
         {
           collectionId,
           onSave: handleRemoteIngest,
+          onSaveFile: handleSaveEditedFile,
           saving: uploading
         }
       )
@@ -2830,6 +3533,7 @@ var AssetPickerContent = ({
         {
           collectionId,
           onSave: handleRemoteIngest,
+          onSaveFile: handleSaveEditedFile,
           saving: uploading
         }
       )
@@ -2928,5 +3632,5 @@ var AssetPicker = (props) => {
 assertStylesLoaded();
 
 export { ASSET_MIME_FILTERS, AssetPicker, useAppRegistry, useAssets };
-//# sourceMappingURL=chunk-N2FPPTHH.js.map
-//# sourceMappingURL=chunk-N2FPPTHH.js.map
+//# sourceMappingURL=chunk-WLN4WW7K.js.map
+//# sourceMappingURL=chunk-WLN4WW7K.js.map