@parhelia/core 0.4.12818 → 0.4.12871

package/dist/editor/ai-image-editor/AiImageEditorDialog.js

@@ -7,9 +7,8 @@ import { Button } from "../../components/ui/button";
 import { CloseButton } from "../../components/ui/close-button";
 import { Textarea } from "../../components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
-import DialogButtons from "../ui/DialogButtons";
 import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
-import { Check, ChevronDown, Cpu, X, Upload, Loader2, Image as ImageIcon, FolderOpen, FolderPlus, Lightbulb, Sparkles, Search, Plus, } from "lucide-react";
+import { AlertCircle, ArrowUp, Check, ChevronDown, Cpu, X, Upload, Loader2, Image as ImageIcon, ImagePlus, FolderOpen, FolderPlus, Lightbulb, Sparkles, Search, } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { useEditContext, useEditContextRef } from "../client/editContext";
 import { closeAgent, startSuggestionAgent, awaitAgentResponse, } from "../services/agentService";
@@ -52,13 +51,94 @@ export function formatFolderPath(path) {
     }
     return segments.join(" / ");
 }
+const MODEL_NAME_ACRONYMS = {
+    ai: "AI",
+    gpt: "GPT",
+    hd: "HD",
+    sd: "SD",
+    sdxl: "SDXL",
+    xl: "XL",
+};
+/**
+ * Turns an API model id into a readable name, dropping the provider prefix:
+ * "google/gemini-3.1-flash-image" -> "Gemini 3.1 Flash Image",
+ * "gpt-image-1-mini" -> "GPT Image 1 Mini".
+ * Names that already read as display names (contain spaces) stay unchanged.
+ */
+export function formatImageModelName(name) {
+    const trimmed = (name || "").trim();
+    if (!trimmed || /\s/.test(trimmed))
+        return trimmed;
+    const modelPart = trimmed.slice(trimmed.lastIndexOf("/") + 1);
+    const words = modelPart.split(/[-_]+/).filter(Boolean);
+    if (words.length === 0)
+        return trimmed;
+    return words
+        .map((word) => {
+        const acronym = MODEL_NAME_ACRONYMS[word.toLowerCase()];
+        if (acronym)
+            return acronym;
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+        .join(" ");
+}
+/**
+ * One-line message for a failed service call. A bare summary such as
+ * "Forbidden" says nothing, so the details are appended when they add to it.
+ */
+export function describeServiceError(result, fallback) {
+    const summary = result.summary?.trim();
+    const details = result.details?.trim();
+    if (summary && details && details !== summary) {
+        return `${summary}: ${details}`;
+    }
+    return summary || details || fallback;
+}
+/** Label for the submit shortcut, matching the platform's modifier key. */
+function getSubmitShortcutLabel() {
+    if (typeof navigator === "undefined")
+        return "Ctrl+Enter";
+    return /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent)
+        ? "⌘Enter"
+        : "Ctrl+Enter";
+}
+/**
+ * Ratios every configured image provider can honour. OpenRouter passes them
+ * through; the OpenAI client maps them to its closest fixed size.
+ */
+export const ASPECT_RATIO_OPTIONS = [
+    { value: "1:1", description: "Square", ratio: 1 },
+    { value: "4:3", description: "Landscape", ratio: 4 / 3 },
+    { value: "3:2", description: "Landscape", ratio: 3 / 2 },
+    { value: "16:9", description: "Wide", ratio: 16 / 9 },
+    { value: "3:4", description: "Portrait", ratio: 3 / 4 },
+    { value: "2:3", description: "Portrait", ratio: 2 / 3 },
+    { value: "9:16", description: "Tall", ratio: 9 / 16 },
+];
+/** Landscape is the safer default for web imagery when nothing else is known. */
+const DEFAULT_ASPECT_RATIO = "3:2";
+/** The option closest to a width / height ratio, or undefined for no ratio. */
+export function nearestAspectRatio(ratio) {
+    if (!ratio || !Number.isFinite(ratio) || ratio <= 0)
+        return undefined;
+    let best;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    for (const option of ASPECT_RATIO_OPTIONS) {
+        const distance = Math.abs(Math.log(option.ratio / ratio));
+        if (distance < bestDistance) {
+            best = option;
+            bestDistance = distance;
+        }
+    }
+    return best;
+}
 const IMAGE_MODEL_STORAGE_KEY = "aiImageEditor.selectedModelId";
 const AI_IMAGE_EDITOR_OVERLAY_ID = "ai-image-editor";
 /** /sitecore/media library */
 const MEDIA_LIBRARY_ROOT_ID = "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1";
 /** Media Folder template */
 const MEDIA_FOLDER_TEMPLATE_ID = "FE5DD826-48C6-436D-B87A-7C4210C7413B";
-export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fieldDescriptor, initialPrompt = "", originalRawValue, variantName, currentImageSrc, currentMediaItemId, }, ref) => {
+export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fieldDescriptor, initialPrompt = "", originalRawValue, variantName, currentImageSrc, currentMediaItemId, lockedAspectRatio, }, ref) => {
     const editContext = useEditContext();
     const editContextRef = useEditContextRef();
     const itemsRepository = editContext?.itemsRepository;
@@ -80,14 +160,59 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
     const [uploading, setUploading] = useState(false);
     const [browsingMedia, setBrowsingMedia] = useState(false);
     const initialImageLoadedRef = useRef(false);
-    // Prompt state
-    const [modifyPrompt, setModifyPrompt] = useState(initialPrompt);
-    const [generatePrompt, setGeneratePrompt] = useState("");
+    // One prompt for both modes: text typed before adding an image carries
+    // over as the edit instruction instead of being hidden.
+    const [prompt, setPrompt] = useState(initialPrompt);
+    const promptRef = useRef(null);
     // Image model state
     const [imageModels, setImageModels] = useState([]);
     const [selectedImageModelId, setSelectedImageModelId] = useState("");
     const [imageModelsLoading, setImageModelsLoading] = useState(false);
+    // Why the model list is empty (request failed or nothing configured for
+    // this user); bumping the reload key fetches the list again.
+    const [imageModelsError, setImageModelsError] = useState(null);
+    const [imageModelsReloadKey, setImageModelsReloadKey] = useState(0);
     const [imageModelPopoverOpen, setImageModelPopoverOpen] = useState(false);
+    // Output aspect ratio: the variant's lock wins, then the source image's
+    // own ratio in edit mode, then a landscape default. A manual choice is
+    // never overridden by a later automatic one.
+    const lockedAspectRatioOption = useMemo(() => nearestAspectRatio(lockedAspectRatio), [lockedAspectRatio]);
+    const [aspectRatio, setAspectRatio] = useState(() => lockedAspectRatioOption?.value ?? DEFAULT_ASPECT_RATIO);
+    const aspectRatioManuallySetRef = useRef(false);
+    const [aspectRatioPopoverOpen, setAspectRatioPopoverOpen] = useState(false);
+    const [addImagePopoverOpen, setAddImagePopoverOpen] = useState(false);
+    // True once the field's current image has been fetched (or that fetch
+    // failed), so the dialog knows whether it is editing or generating.
+    const [initialImageSettled, setInitialImageSettled] = useState(false);
+    useEffect(() => {
+        if (!lockedAspectRatioOption || aspectRatioManuallySetRef.current)
+            return;
+        setAspectRatio(lockedAspectRatioOption.value);
+    }, [lockedAspectRatioOption]);
+    const firstImageUrl = images[0]?.thumbnailUrl;
+    useEffect(() => {
+        if (!firstImageUrl ||
+            lockedAspectRatioOption ||
+            aspectRatioManuallySetRef.current ||
+            typeof Image === "undefined") {
+            return;
+        }
+        let cancelled = false;
+        const probe = new Image();
+        probe.onload = () => {
+            if (cancelled || aspectRatioManuallySetRef.current)
+                return;
+            const option = nearestAspectRatio(probe.naturalHeight > 0
+                ? probe.naturalWidth / probe.naturalHeight
+                : undefined);
+            if (option)
+                setAspectRatio(option.value);
+        };
+        probe.src = firstImageUrl;
+        return () => {
+            cancelled = true;
+        };
+    }, [firstImageUrl, lockedAspectRatioOption]);
     // Suggestion state
     const [suggesting, setSuggesting] = useState(false);
     // Submission state
@@ -167,7 +292,8 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
     ]);
     const imageModelOptions = useMemo(() => imageModels.map((model) => ({
         value: model.id,
-        label: model.name || model.id,
+        label: formatImageModelName(model.name || model.id),
+        rawName: model.name || model.id,
         description: model.providerName
             ? model.isDefault
                 ? `${model.providerName} - Default`
@@ -192,6 +318,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
         let cancelled = false;
         const loadImageModels = async () => {
             setImageModelsLoading(true);
+            setImageModelsError(null);
             try {
                 const result = await getImageModels();
                 if (cancelled)
@@ -199,9 +326,13 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
                 if (result.type !== "success" || !result.data) {
                     setImageModels([]);
                     setSelectedImageModelId("");
+                    setImageModelsError(describeServiceError(result, "Could not load image models"));
                     return;
                 }
                 const models = result.data.models ?? [];
+                if (models.length === 0) {
+                    setImageModelsError("No image models are available to your account");
+                }
                 const defaultModelId = result.data.defaultModelId ||
                     models.find((model) => model.isDefault)?.id ||
                     models[0]?.id ||
@@ -218,6 +349,9 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
                     console.error("[AiImageEditorDialog] Failed to load models:", err);
                     setImageModels([]);
                     setSelectedImageModelId("");
+                    setImageModelsError(err instanceof Error && err.message
+                        ? `Could not load image models: ${err.message}`
+                        : "Could not load image models");
                 }
             }
             finally {
@@ -230,7 +364,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
         return () => {
             cancelled = true;
         };
-    }, [open]);
+    }, [open, imageModelsReloadKey]);
     useEffect(() => {
         if (selectedImageModelId &&
             imageModels.some((model) => model.id === selectedImageModelId)) {
@@ -308,7 +442,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
     }, [editContext, handleFileUpload]);
     // Search media library with generated description
     const handleSearchMedia = useCallback(async () => {
-        if (!editContext?.selectMedia || !generatePrompt.trim())
+        if (!editContext?.selectMedia || !prompt.trim())
             return;
         setBrowsingMedia(true);
         setError(null);
@@ -317,7 +451,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
             const mediaId = await editContext.selectMedia({
                 selectedIdPath: "",
                 mode: "images",
-                initialSearchTerm: generatePrompt.trim(),
+                initialSearchTerm: prompt.trim(),
             });
             if (!mediaId) {
                 setBrowsingMedia(false);
@@ -350,7 +484,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
         finally {
             setBrowsingMedia(false);
         }
-    }, [editContext, handleFileUpload, generatePrompt]);
+    }, [editContext, handleFileUpload, prompt]);
     // Delete an uploaded image
     const handleDeleteImage = useCallback(async (imageId) => {
         setImages((prev) => {
@@ -385,20 +519,39 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
             handleFileUpload(files);
         }
     }, [handleFileUpload]);
-    // Drag and drop handlers
+    // Drag and drop: the whole dialog is the drop target. dragenter/dragleave
+    // fire for every child the pointer crosses, so a depth counter tells a
+    // real leave from a hop between children.
+    const dragDepthRef = useRef(0);
+    const isFileDrag = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
+    const handleDragEnter = useCallback((e) => {
+        if (!isFileDrag(e))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        dragDepthRef.current += 1;
+        setIsDragOver(true);
+    }, []);
     const handleDragOver = useCallback((e) => {
+        if (!isFileDrag(e))
+            return;
         e.preventDefault();
         e.stopPropagation();
         setIsDragOver(true);
     }, []);
     const handleDragLeave = useCallback((e) => {
+        if (!isFileDrag(e))
+            return;
         e.preventDefault();
         e.stopPropagation();
-        setIsDragOver(false);
+        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+        if (dragDepthRef.current === 0)
+            setIsDragOver(false);
     }, []);
     const handleDrop = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
+        dragDepthRef.current = 0;
         setIsDragOver(false);
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
             // Filter to only image files
@@ -424,8 +577,8 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
     }, []);
     // Submit the prompt to start the backend image job (no agent)
     const handleSubmit = useCallback(async () => {
-        const isModifyMode = images.length > 0;
-        const activePrompt = isModifyMode ? modifyPrompt : generatePrompt;
+        const withSourceImages = images.length > 0;
+        const activePrompt = prompt;
         if (!activePrompt.trim())
             return;
         if (!fieldDescriptor) {
@@ -443,7 +596,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
         setSubmitting(true);
         setError(null);
         try {
-            const sourceImages = isModifyMode
+            const sourceImages = withSourceImages
                 ? await Promise.all(images.map(async (img) => {
                     if (!img.file)
                         throw new Error(`Missing image file: ${img.fileName}`);
@@ -463,10 +616,11 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
                 variantName,
                 pageItemId: editContext.page?.item?.id,
                 targetFolderId,
+                aspectRatio: aspectRatio || undefined,
                 sourceImages,
             }, editContext.sessionId);
             if (response.type !== "success") {
-                setError(response.summary || "Failed to start image job");
+                setError(describeServiceError(response, "Failed to start image job"));
                 setSubmitting(false);
                 return;
             }
@@ -480,8 +634,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
         }
     }, [
         images,
-        modifyPrompt,
-        generatePrompt,
+        prompt,
         fieldDescriptor,
         variantName,
         editContext,
@@ -490,6 +643,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
         onClose,
         targetFolderId,
         selectedImageModelId,
+        aspectRatio,
     ]);
     // Handle suggesting a description based on context
     const handleSuggestDescription = useCallback(async () => {
@@ -530,11 +684,11 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
                 addSocketMessageListener: editContext.addSocketMessageListener,
                 timeout: 60000,
                 onContentUpdate: (content) => {
-                    setGeneratePrompt(extractSuggestionFromFence(content));
+                    setPrompt(extractSuggestionFromFence(content));
                 },
             });
             if (result.success) {
-                setGeneratePrompt(extractSuggestionFromFence(result.content));
+                setPrompt(extractSuggestionFromFence(result.content));
             }
             else {
                 setError(result.error || "Failed to get suggestion");
@@ -567,7 +721,7 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
         try {
             const result = await executeCreateItem({ id: parentId, language: targetFolderLanguage, version: 0 }, MEDIA_FOLDER_TEMPLATE_ID, name, editContext?.sessionId);
             if (result.type !== "success" || !result.data?.id) {
-                setNewFolderError(result.summary || "Failed to create folder");
+                setNewFolderError(describeServiceError(result, "Failed to create folder"));
                 return;
             }
             const createdId = result.data.id;
@@ -654,6 +808,13 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
     useEffect(() => {
         if (!open) {
             initialImageLoadedRef.current = false;
+            aspectRatioManuallySetRef.current = false;
+            dragDepthRef.current = 0;
+            setIsDragOver(false);
+            setInitialImageSettled(false);
+            setAspectRatioPopoverOpen(false);
+            setAddImagePopoverOpen(false);
+            setAspectRatio(lockedAspectRatioOption?.value ?? DEFAULT_ASPECT_RATIO);
             targetFolderManuallySelectedRef.current = false;
             setTargetFolderInitialized(false);
             setTargetFolderIsPersonal(false);
@@ -873,129 +1034,213 @@ export const AiImageEditorDialog = forwardRef(({ open, onClose, onComplete, fiel
             }
             finally {
                 setUploading(false);
+                setInitialImageSettled(true);
             }
         };
         loadCurrentImage();
     }, [open, currentImageSrc, currentMediaItemId, handleFileUpload]);
-    // Preset prompts for common operations
-    const presetPrompts = [
-        {
-            label: "Enhance",
-            prompt: "Enhance this image to improve quality and clarity",
-        },
-        {
-            label: "Remove Background",
-            prompt: "Remove the background from this image",
-        },
-        { label: "Upscale", prompt: "Upscale this image to higher resolution" },
-        {
-            label: "Fix Lighting",
-            prompt: "Improve the lighting and color balance of this image",
-        },
+    // Starters for edit mode. Each one is an opening the user completes, so
+    // the chips teach how to phrase an edit instead of promising operations
+    // (background removal, upscaling) that a re-rendering pipeline with JPEG
+    // output cannot deliver.
+    const editStarters = [
+        { label: "Change background", prompt: "Change the background to " },
+        { label: "Change lighting", prompt: "Change the lighting to " },
+        { label: "Remove something", prompt: "Remove the " },
+        { label: "Change style", prompt: "Render this image in the style of " },
     ];
-    const canSubmit = (images.length > 0 ? modifyPrompt.trim() : generatePrompt.trim()) &&
-        !!targetFolderId &&
-        !submitting &&
-        !uploading;
+    const applyStarter = (starter) => {
+        setPrompt(starter.prompt);
+        const textarea = promptRef.current;
+        if (!textarea)
+            return;
+        requestAnimationFrame(() => {
+            textarea.focus({ preventScroll: true });
+            const end = textarea.value.length;
+            textarea.setSelectionRange(end, end);
+        });
+    };
+    const expectsSourceImage = !!(currentImageSrc || currentMediaItemId);
+    // A dialog opened on an existing image is an edit from the first frame,
+    // so the title does not flip once the image has been fetched.
+    const isModifyMode = images.length > 0 || (expectsSourceImage && !initialImageSettled);
+    const hasPrompt = prompt.trim().length > 0;
+    const canSubmit = hasPrompt && !!targetFolderId && !submitting && !uploading;
+    const submitShortcutLabel = getSubmitShortcutLabel();
+    const submitLabel = isModifyMode ? "Edit image" : "Generate image";
+    const submitHint = !targetFolderInitialized
+        ? "Loading the target folder..."
+        : !targetFolderId
+            ? "Choose a folder to save the image first"
+            : uploading
+                ? "Loading the current image..."
+                : !hasPrompt
+                    ? isModifyMode
+                        ? "Describe the change first"
+                        : "Describe the image first"
+                    : `${submitLabel} · ${submitShortcutLabel}`;
+    const canBrowseMedia = !!editContext?.selectMedia;
+    const selectedAspectRatioOption = ASPECT_RATIO_OPTIONS.find((option) => option.value === aspectRatio) ??
+        ASPECT_RATIO_OPTIONS[0];
+    const aspectRatioFromVariant = !!lockedAspectRatioOption &&
+        lockedAspectRatioOption.value === aspectRatio;
+    // Ctrl/Cmd+Enter submits from the prompt, like the other AI dialogs
+    const handlePromptKeyDown = (e) => {
+        if (e.key !== "Enter" || !(e.ctrlKey || e.metaKey))
+            return;
+        if (e.nativeEvent.isComposing)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (canSubmit)
+            void handleSubmit();
+    };
+    const toolbarButtonClassName = "text-neutral-grey-50 hover:text-neutral-grey-100 hover:bg-neutral-grey-5 h-7 gap-1.5 px-2";
+    const popoverRowClassName = (isSelected) => cn("flex w-full cursor-pointer items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-xs transition-colors focus-visible:outline-none", isSelected
+        ? "bg-neutral-grey-5 text-neutral-grey-100 hover:bg-neutral-grey-10 focus-visible:bg-neutral-grey-10"
+        : "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 focus-visible:bg-neutral-grey-5 focus-visible:text-neutral-grey-100");
     const renderImageModelPopover = () => {
-        if (!showImageModelSelector)
-            return null;
-        const tooltipLabel = selectedImageModelOption
+        if (!showImageModelSelector) {
+            if (!imageModelsError)
+                return null;
+            const reason = imageModelsError.replace(/\.+$/, "");
+            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "xs", className: cn(toolbarButtonClassName, "text-feedback-red hover:text-feedback-red max-w-[220px]"), disabled: submitting, "aria-label": `${reason}. Retry`, onClick: () => setImageModelsReloadKey((key) => key + 1), "data-testid": "ai-image-models-error", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5", strokeWidth: 1 }), _jsx("span", { className: "truncate", children: "No image models" })] }) }), _jsxs(TooltipContent, { side: "top", sideOffset: 6, children: [reason, ". Click to retry."] })] }));
+        }
+        const ariaLabel = selectedImageModelOption
             ? `Image model: ${selectedImageModelOption.label}`
             : "Choose image model";
+        const tooltipLabel = selectedImageModelOption
+            ? `Image model: ${selectedImageModelOption.rawName}`
+            : "Choose image model";
         const visibleLabel = imageModelsLoading
             ? "Loading model..."
             : selectedImageModelOption?.label || "Choose image model";
-        return (_jsxs(Popover, { open: imageModelPopoverOpen, onOpenChange: setImageModelPopoverOpen, enableIframeClickDetection: false, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "xs", className: "text-neutral-grey-50 hover:text-neutral-grey-100 h-7 max-w-[220px] gap-1.5 px-2 hover:bg-white", disabled: submitting, "aria-label": tooltipLabel, "data-testid": "ai-image-model-selector", children: [imageModelsLoading ? (_jsx(Loader2, { strokeWidth: 1, className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Cpu, { className: "h-3.5 w-3.5", strokeWidth: 1 })), _jsx("span", { className: "truncate", title: visibleLabel, children: visibleLabel }), _jsx(ChevronDown, { className: `h-3.5 w-3.5 transition-transform ${imageModelPopoverOpen ? "rotate-180" : ""}`, strokeWidth: 1, "aria-hidden": "true", "data-testid": "ai-image-model-selector-chevron" })] }) }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: tooltipLabel })] }), _jsxs(PopoverContent, { className: "w-64 p-1.5", align: "end", side: "top", sideOffset: 8, children: [_jsx("div", { className: "text-neutral-grey-50 px-2 py-1 text-[10px] font-medium tracking-wider", children: "Image model" }), imageModelsLoading ? (_jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-2 px-2 py-2 text-xs", children: [_jsx(Loader2, { strokeWidth: 1, className: "h-3.5 w-3.5 animate-spin" }), "Loading models..."] })) : (_jsx("div", { className: "space-y-0.5", children: imageModelOptions.map((option) => {
+        return (_jsxs(Popover, { open: imageModelPopoverOpen, onOpenChange: setImageModelPopoverOpen, enableIframeClickDetection: false, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "xs", className: cn(toolbarButtonClassName, "max-w-[220px]"), disabled: submitting, "aria-label": ariaLabel, "data-testid": "ai-image-model-selector", children: [imageModelsLoading ? (_jsx(Loader2, { strokeWidth: 1, className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Cpu, { className: "h-3.5 w-3.5", strokeWidth: 1 })), _jsx("span", { className: "truncate", children: visibleLabel }), _jsx(ChevronDown, { className: `h-3.5 w-3.5 transition-transform ${imageModelPopoverOpen ? "rotate-180" : ""}`, strokeWidth: 1, "aria-hidden": "true", "data-testid": "ai-image-model-selector-chevron" })] }) }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: tooltipLabel })] }), _jsxs(PopoverContent, { className: "w-64 p-1.5", align: "start", side: "bottom", sideOffset: 6, children: [_jsx("div", { className: "text-neutral-grey-50 px-2 py-1 text-[10px] font-medium tracking-wider", children: "Image model" }), imageModelsLoading ? (_jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-2 px-2 py-2 text-xs", children: [_jsx(Loader2, { strokeWidth: 1, className: "h-3.5 w-3.5 animate-spin" }), "Loading models..."] })) : (_jsx("div", { className: "space-y-0.5", children: imageModelOptions.map((option) => {
                                 const isSelected = selectedImageModelId === option.value;
-                                return (_jsxs("button", { type: "button", onClick: () => {
+                                return (_jsxs("button", { type: "button", title: option.rawName, onClick: () => {
                                         setSelectedImageModelId(option.value);
                                         setImageModelPopoverOpen(false);
-                                    }, className: `flex w-full cursor-pointer items-start gap-2 rounded-[4px] px-2 py-1.5 text-left text-xs transition-colors focus-visible:outline-none ${isSelected
-                                        ? "bg-neutral-grey-5 text-neutral-grey-100 hover:bg-neutral-grey-10 focus-visible:bg-neutral-grey-10"
-                                        : "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 focus-visible:bg-neutral-grey-5 focus-visible:text-neutral-grey-100"}`, children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", children: option.label }), option.description && (_jsx("span", { className: "text-neutral-grey-50 mt-0.5 block truncate text-[10px]", children: option.description }))] }), _jsx(Check, { className: `mt-0.5 h-3.5 w-3.5 shrink-0 ${isSelected ? "opacity-100" : "opacity-0"}`, strokeWidth: 1 })] }, option.value));
+                                    }, className: cn(popoverRowClassName(isSelected), "items-start"), children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", children: option.label }), option.description && (_jsx("span", { className: "text-neutral-grey-50 mt-0.5 block truncate text-[10px]", children: option.description }))] }), _jsx(Check, { className: `mt-0.5 h-3.5 w-3.5 shrink-0 ${isSelected ? "opacity-100" : "opacity-0"}`, strokeWidth: 1 })] }, option.value));
                             }) }))] })] }));
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => !isOpen && handleCancel(), children: _jsxs(DialogContent, { className: "flex max-w-2xl flex-col overflow-hidden border-none p-0 shadow-2xl", style: { height: "auto", maxHeight: "90vh" }, onPaste: handlePaste, children: [_jsx(StyledDialogTitle, { icon: _jsx(Sparkles, { strokeWidth: 1 }), title: "AI image editor", subtitle: "Describe what you want to create, or upload images to modify" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain px-6 pb-4", children: _jsxs("div", { className: "flex flex-col gap-4 pt-6", children: [error && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red rounded border p-3 text-sm", children: error })), images.length === 0 && (_jsxs("div", { className: "bg-neutral-grey-5 relative space-y-3 rounded-xl p-4", children: [fieldDescriptor && (_jsxs(Button, { variant: "ghost", size: "sm", className: "text-highlight-100 hover:bg-highlight-10 hover:text-highlight-100 absolute top-4 right-4 z-10 h-7 gap-1.5 px-2 text-xs", onClick: (e) => {
+    const renderAspectRatioGlyph = (ratio) => {
+        const width = ratio >= 1 ? 14 : Math.round(14 * ratio);
+        const height = ratio >= 1 ? Math.round(14 / ratio) : 14;
+        return (_jsx("span", { "aria-hidden": "true", className: "flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: _jsx("span", { className: "rounded-[2px] border border-current", style: { width, height } }) }));
+    };
+    const renderAspectRatioPopover = () => {
+        const variantLabel = variantName
+            ? `the ${variantName} variant`
+            : "the picture variant";
+        const tooltipLabel = aspectRatioFromVariant
+            ? `Aspect ratio ${aspectRatio} (${selectedAspectRatioOption.description}), from ${variantLabel}`
+            : `Aspect ratio ${aspectRatio} (${selectedAspectRatioOption.description})`;
+        return (_jsxs(Popover, { open: aspectRatioPopoverOpen, onOpenChange: setAspectRatioPopoverOpen, enableIframeClickDetection: false, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "xs", className: toolbarButtonClassName, disabled: submitting, "aria-label": `Aspect ratio: ${aspectRatio}`, "data-testid": "ai-image-aspect-ratio", children: [renderAspectRatioGlyph(selectedAspectRatioOption.ratio), _jsx("span", { children: aspectRatio }), _jsx(ChevronDown, { className: `h-3.5 w-3.5 transition-transform ${aspectRatioPopoverOpen ? "rotate-180" : ""}`, strokeWidth: 1, "aria-hidden": "true" })] }) }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: tooltipLabel })] }), _jsxs(PopoverContent, { className: "w-56 p-1.5", align: "start", side: "bottom", sideOffset: 6, children: [_jsx("div", { className: "text-neutral-grey-50 px-2 py-1 text-[10px] font-medium tracking-wider", children: "Aspect ratio" }), _jsx("div", { className: "space-y-0.5", children: ASPECT_RATIO_OPTIONS.map((option) => {
+                                const isSelected = option.value === aspectRatio;
+                                const isVariantRatio = lockedAspectRatioOption?.value === option.value;
+                                return (_jsxs("button", { type: "button", onClick: () => {
+                                        aspectRatioManuallySetRef.current = true;
+                                        setAspectRatio(option.value);
+                                        setAspectRatioPopoverOpen(false);
+                                    }, className: popoverRowClassName(isSelected), "data-testid": `ai-image-aspect-ratio-${option.value.replace(":", "x")}`, children: [renderAspectRatioGlyph(option.ratio), _jsx("span", { className: "w-9 shrink-0 font-medium", children: option.value }), _jsxs("span", { className: "text-neutral-grey-50 min-w-0 flex-1 truncate text-[10px]", children: [option.description, isVariantRatio ? " · variant" : ""] }), _jsx(Check, { className: `h-3.5 w-3.5 shrink-0 ${isSelected ? "opacity-100" : "opacity-0"}`, strokeWidth: 1 })] }, option.value));
+                            }) })] })] }));
+    };
+    const renderAddImageMenu = () => {
+        const busy = uploading || browsingMedia;
+        const triggerContent = (_jsxs(_Fragment, { children: [busy ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 })) : (_jsx(ImagePlus, { className: "h-3.5 w-3.5", strokeWidth: 1 })), "Add reference image"] }));
+        if (!canBrowseMedia) {
+            return (_jsx(Button, { type: "button", variant: "ghost", size: "xs", className: toolbarButtonClassName, onClick: () => fileInputRef.current?.click(), disabled: submitting || busy, "data-testid": "ai-image-add-reference", children: triggerContent }));
+        }
+        return (_jsxs(Popover, { open: addImagePopoverOpen, onOpenChange: setAddImagePopoverOpen, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "xs", className: toolbarButtonClassName, disabled: submitting || busy, "data-testid": "ai-image-add-reference", children: triggerContent }) }), _jsxs(PopoverContent, { className: "w-60 p-1.5", align: "start", side: "bottom", sideOffset: 6, children: [_jsxs("div", { className: "space-y-0.5", children: [_jsxs("button", { type: "button", onClick: () => {
+                                        setAddImagePopoverOpen(false);
+                                        fileInputRef.current?.click();
+                                    }, className: popoverRowClassName(false), "data-testid": "ai-image-upload", children: [_jsx(Upload, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1 }), "Upload from computer"] }), _jsxs("button", { type: "button", onClick: () => {
+                                        setAddImagePopoverOpen(false);
+                                        void handleBrowseMedia();
+                                    }, className: popoverRowClassName(false), "data-testid": "ai-image-browse-media", children: [_jsx(FolderOpen, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1 }), "Browse media library"] })] }), _jsx("div", { className: "text-neutral-grey-50 px-2 pt-1.5 pb-1 text-[10px]", children: "You can also paste or drop images anywhere in this dialog." })] })] }));
+    };
+    const renderTargetFolderPicker = () => (_jsxs(Popover, { open: targetFolderPickerOpen, onOpenChange: handleTargetFolderPickerOpenChange, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-highlight-100 hover:text-highlight-100-hover shrink-0 font-medium underline-offset-2 transition-colors hover:underline disabled:cursor-default disabled:opacity-50 disabled:hover:no-underline", disabled: !targetFolderInitialized || submitting, "aria-busy": !targetFolderInitialized, "data-testid": "ai-image-target-folder-trigger", children: targetFolderId ? "Change" : "Choose folder" }) }), _jsxs(PopoverContent, { ref: targetFolderPickerContentRef, className: "pointer-events-auto z-[110] w-[min(520px,calc(100vw-2rem))] p-2", align: "start", side: "top", sideOffset: 8, "aria-label": "Select folder", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 pl-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("div", { className: "bg-highlight-10 text-highlight-100 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg", children: _jsx(FolderOpen, { className: "h-4 w-4", strokeWidth: 1 }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "text-neutral-grey-100 text-xs font-medium", children: "Select folder" }), _jsx("span", { className: "text-neutral-grey-50 text-2xs truncate", title: folderPickerSelection?.path, children: folderPickerSelection
+                                                    ? `Highlighted: ${formatFolderPath(folderPickerSelection.path)}`
+                                                    : "Pick a media folder for the generated image" })] })] }), _jsx(CloseButton, { label: "Close folder picker", showTooltip: false, onClick: () => handleTargetFolderPickerOpenChange(false), "data-testid": "ai-image-target-folder-close" })] }), _jsx("div", { className: "border-border-default h-[360px] overflow-auto overscroll-contain rounded-lg border bg-white p-1", children: _jsx(ContentTree, { rootItemIds: folderPickerRootItemIds, selectionMode: "single", selectedItemIds: folderPickerSelectedItemIds, templateIds: folderPickerTemplateIds, hideRootNodes: true, expandIdPath: folderPickerSelection?.idPath ??
+                                targetFolderExpandIdPath ??
+                                "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
+                                const node = selection[0];
+                                if (!node?.id)
+                                    return;
+                                setFolderPickerSelection({
+                                    id: node.id,
+                                    name: node.displayName || node.name || "",
+                                    path: node.path || "",
+                                    idPath: node.idPath,
+                                    canCreate: node.canCreate !== false,
+                                });
+                            }, renderNode: (node, defaultRenderer) => node.data?.canCreate ===
+                                false ? (_jsx("span", { className: "opacity-50", title: "You cannot save images into this folder", children: defaultRenderer(node) })) : (defaultRenderer(node)), language: targetFolderLanguage, includeItemPath: true, database: "master" }) }), _jsx("div", { className: "border-border-default mt-2 border-t pt-2", children: creatingFolder ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { autoFocus: true, value: newFolderName, onChange: (e) => setNewFolderName(e.target.value), onKeyDown: (e) => {
+                                                if (e.key === "Enter") {
+                                                    e.preventDefault();
+                                                    handleCreateFolder();
+                                                }
+                                                else if (e.key === "Escape") {
+                                                    e.stopPropagation();
+                                                    setCreatingFolder(false);
+                                                    setNewFolderName("");
+                                                    setNewFolderError(null);
+                                                }
+                                            }, placeholder: "Folder name", className: "h-8 flex-1 text-xs", disabled: newFolderSubmitting, "data-testid": "ai-image-new-folder-name" }), _jsxs(Button, { size: "sm", onClick: handleCreateFolder, disabled: !newFolderName.trim() || newFolderSubmitting, "data-testid": "ai-image-new-folder-create", children: [newFolderSubmitting ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 })) : null, "Create"] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                                setCreatingFolder(false);
+                                                setNewFolderName("");
+                                                setNewFolderError(null);
+                                            }, disabled: newFolderSubmitting, children: "Cancel" })] }), newFolderError && (_jsx("div", { className: "text-feedback-red mt-1 text-xs", children: newFolderError }))] })) : (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "min-w-0 gap-1.5", onClick: () => {
+                                                    setCreatingFolder(true);
+                                                    setNewFolderError(null);
+                                                }, disabled: !folderPickerCanCreate, "data-testid": "ai-image-new-folder", children: [_jsx(FolderPlus, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1 }), _jsx("span", { className: "shrink-0", children: "New folder" }), _jsxs("span", { className: "text-neutral-grey-50 truncate font-normal", children: ["in", " ", folderPickerSelection
+                                                                ? folderPickerSelection.name ||
+                                                                    folderPickerSelection.path.split("/").pop() ||
+                                                                    "selected folder"
+                                                                : "Media Library"] })] }) }), _jsx(TooltipContent, { side: "bottom", sideOffset: 6, children: folderPickerCanCreate
+                                                ? folderPickerSelection
+                                                    ? "Create a subfolder inside the highlighted folder"
+                                                    : "Create a folder at the Media Library root"
+                                                : folderPickerSelection
+                                                    ? "You cannot create folders in the highlighted folder"
+                                                    : "You cannot create folders at the Media Library root. Select a folder first." })] }), _jsx(Button, { size: "sm", className: "shrink-0", onClick: handleSelectTargetFolder, disabled: !folderPickerSelection?.canCreate, "data-testid": "ai-image-target-folder-select", children: "Select folder" })] })) })] })] }));
+    return (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => !isOpen && handleCancel(), children: _jsxs(DialogContent, { className: "flex max-w-2xl flex-col overflow-hidden border-none p-0 shadow-2xl", style: { height: "auto", maxHeight: "90vh" }, onPaste: handlePaste, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onOpenAutoFocus: (e) => {
+                const textarea = promptRef.current;
+                if (!textarea)
+                    return;
+                e.preventDefault();
+                textarea.focus({ preventScroll: true });
+                const end = textarea.value.length;
+                textarea.setSelectionRange(end, end);
+            }, children: [_jsx(StyledDialogTitle, { icon: _jsx(Sparkles, { strokeWidth: 1 }), title: isModifyMode ? "Edit image" : "Generate image" }), isDragOver && (_jsx("div", { className: "border-highlight-100 bg-highlight-10/90 text-highlight-100 pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-[inherit] border-2 border-dashed text-sm font-medium", "data-testid": "ai-image-drop-overlay", children: "Drop images to add them as references" })), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain px-6 py-5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [error && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red rounded-lg border p-3 text-sm", children: error })), _jsxs("div", { className: cn("border-border-default relative min-w-0 rounded-[12px] border bg-white transition-colors duration-200", isDragOver && "border-highlight-100"), "data-testid": "ai-image-composer", children: [_jsx(Textarea, { ref: promptRef, value: prompt, onChange: (e) => setPrompt(e.target.value), onKeyDown: handlePromptKeyDown, placeholder: isModifyMode
+                                            ? "E.g., Remove the background, change the lighting, add a person on the left..."
+                                            : "Describe the image you want to create...", "aria-label": isModifyMode
+                                            ? "Describe how to change the images"
+                                            : "Describe the image to create", className: "max-h-60 min-h-[96px] w-full resize-none overflow-y-auto rounded-none border-0 bg-transparent px-4 pt-3.5 pb-2 text-sm shadow-none focus-visible:border-0 focus-visible:shadow-none focus-visible:ring-0", disabled: submitting, "data-testid": "ai-image-prompt", "data-mode": isModifyMode ? "modify" : "generate" }), images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 px-4 pb-2", "data-testid": "ai-image-reference-strip", children: images.map((img) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "border-border-default bg-neutral-grey-5 relative h-16 w-16 overflow-hidden rounded-lg border", children: [img.loading ? (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(Loader2, { className: "text-neutral-grey-50 h-5 w-5 animate-spin", strokeWidth: 1 }) })) : img.thumbnailUrl ? (_jsx("img", { src: img.thumbnailUrl, alt: img.fileName, className: "h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "text-neutral-grey-50 h-6 w-6", strokeWidth: 1 }) })), _jsx("button", { type: "button", onClick: () => handleDeleteImage(img.id), className: "bg-neutral-grey-100/70 hover:bg-neutral-grey-100 absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full text-white transition-colors disabled:opacity-50", title: "Remove image", "aria-label": `Remove ${img.fileName}`, disabled: submitting, children: _jsx(X, { className: "h-3 w-3", strokeWidth: 1.5 }) })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, className: "max-w-xs break-words", children: img.fileName })] }, img.id))) })), _jsxs("div", { className: "flex flex-wrap items-center gap-1 px-2 pt-1 pb-2", children: [renderImageModelPopover(), renderAspectRatioPopover(), renderAddImageMenu(), _jsx("div", { className: "ml-auto flex items-center gap-1", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex", children: _jsx("button", { type: "button", onClick: () => void handleSubmit(), disabled: !canSubmit, "aria-label": submitLabel, "aria-keyshortcuts": "Control+Enter Meta+Enter", "data-testid": "ai-image-submit", className: cn("flex h-7 w-7 items-center justify-center rounded-[6px] transition-colors duration-200", canSubmit
+                                                                        ? "bg-neutral-grey-100 hover:bg-neutral-grey-100/90 text-white"
+                                                                        : "bg-neutral-grey-5 text-neutral-grey-50 cursor-not-allowed"), children: submitting ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 })) : (_jsx(ArrowUp, { className: "h-4 w-4", strokeWidth: 1 })) }) }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: submitHint })] }) })] })] }), isModifyMode ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5", "data-testid": "ai-image-edit-starters", children: editStarters.map((starter) => (_jsx("button", { type: "button", onClick: (e) => {
+                                        e.stopPropagation();
+                                        applyStarter(starter);
+                                    }, className: "border-border-default text-neutral-grey-50 hover:border-highlight-100 hover:text-highlight-100 text-2xs rounded-full border bg-white px-2.5 py-0.5 transition-colors disabled:opacity-50", disabled: submitting, children: starter.label }, starter.label))) })) : ((fieldDescriptor || canBrowseMedia) && (_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1", children: [fieldDescriptor && (_jsxs("button", { type: "button", onClick: (e) => {
                                             e.stopPropagation();
                                             handleSuggestDescription();
-                                        }, disabled: suggesting || submitting, children: [suggesting ? (_jsx(Loader2, { strokeWidth: 1, className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Lightbulb, { strokeWidth: 1, className: "h-3.5 w-3.5" })), suggesting ? "Suggesting..." : "Suggest"] })), _jsx(Textarea, { value: generatePrompt, onChange: (e) => setGeneratePrompt(e.target.value), placeholder: "Describe the image you want to create...", className: `resize-none border-none bg-transparent p-0 shadow-none focus-visible:!shadow-none focus-visible:ring-0 ${fieldDescriptor ? "min-h-[104px] pr-24" : "min-h-[64px]"}`, disabled: submitting }), showImageModelSelector && (_jsx("div", { className: "flex justify-end", children: renderImageModelPopover() }))] })), _jsxs("div", { ref: dropZoneRef, onDragOver: handleDragOver, onDragEnter: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, className: `relative rounded-lg border-2 border-dashed p-4 transition-colors ${isDragOver
-                                    ? "border-highlight-100 bg-highlight-10"
-                                    : "border-border-default bg-white"}`, children: [images.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-neutral-grey-100 mb-[18px] text-sm", children: isDragOver
-                                                    ? "Drop images here"
-                                                    : "Modify these images or add more:" }), _jsxs("div", { className: "mb-4 flex flex-wrap gap-3", children: [images.map((img) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { tabIndex: 0, className: "group border-border-default relative h-20 w-20 overflow-hidden rounded-lg border bg-white", children: [img.loading ? (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(Loader2, { className: "text-neutral-grey-50 h-6 w-6 animate-spin", strokeWidth: 1 }) })) : img.thumbnailUrl ? (_jsx("img", { src: img.thumbnailUrl, alt: img.fileName, className: "h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "text-neutral-grey-50 h-8 w-8", strokeWidth: 1 }) })), _jsx("button", { onClick: () => handleDeleteImage(img.id), className: "bg-neutral-grey-100/50 absolute top-1 right-1 rounded-full p-1 opacity-0 transition-opacity group-hover:opacity-100", title: "Remove image", children: _jsx(X, { className: "h-3 w-3 text-white", strokeWidth: 1 }) })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, className: "max-w-xs break-words", children: img.fileName })] }, img.id))), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), className: "border-border-default text-neutral-grey-50 hover:border-highlight-100 hover:text-highlight-100 hover:bg-highlight-10 flex h-20 w-20 items-center justify-center rounded-lg border border-dashed bg-white transition-colors disabled:cursor-not-allowed disabled:opacity-50", disabled: uploading || submitting, "aria-label": "Upload image", children: uploading ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin", strokeWidth: 1 })) : (_jsx(Plus, { className: "h-5 w-5", strokeWidth: 1 })) }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: "Upload image" })] })] })] })), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx("div", { className: "text-neutral-grey-50 text-sm", children: images.length === 0
-                                                    ? isDragOver
-                                                        ? "Drop images here"
-                                                        : "Or, drag & drop images here to modify:"
-                                                    : "" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileInputRef.current?.click(), disabled: uploading, children: [uploading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 })) : (_jsx(Upload, { className: "h-3.5 w-3.5", strokeWidth: 1 })), "Upload image"] }), editContext?.selectMedia && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handleBrowseMedia, disabled: browsingMedia, children: [_jsx(FolderOpen, { className: "h-3.5 w-3.5", strokeWidth: 1 }), "Browse media library"] }), images.length === 0 && generatePrompt.trim() && (_jsxs(Button, { variant: "outline", size: "sm", onClick: handleSearchMedia, disabled: browsingMedia, children: [_jsx(Search, { className: "h-3.5 w-3.5", strokeWidth: 1 }), "Search"] }))] }))] }), _jsx("input", { ref: fileInputRef, type: "file", className: "hidden", accept: "image/*", multiple: true, onChange: (e) => {
-                                                    const files = e.target.files
-                                                        ? Array.from(e.target.files)
-                                                        : null;
-                                                    e.target.value = "";
-                                                    handleFileUpload(files);
-                                                } })] })] }), images.length > 0 && (_jsxs("div", { className: "bg-neutral-grey-5 space-y-3 rounded-xl p-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-neutral-grey-100 text-sm font-medium", children: "Enhance & Modify" }) }) }), _jsx(Textarea, { value: modifyPrompt, onChange: (e) => setModifyPrompt(e.target.value), placeholder: "E.g., Remove the background, improve lighting, upscale...", className: "min-h-[64px] resize-none border-none bg-transparent p-0 shadow-none focus-visible:!shadow-none focus-visible:ring-0", disabled: submitting }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx("div", { className: "flex flex-1 flex-wrap gap-1", children: presetPrompts.map((preset) => (_jsx("button", { onClick: (e) => {
-                                                        e.stopPropagation();
-                                                        setModifyPrompt(preset.prompt);
-                                                    }, className: `text-2xs rounded-full border px-2 py-0.5 transition-colors ${modifyPrompt === preset.prompt
-                                                        ? "border-highlight-100 bg-highlight-100 text-white"
-                                                        : "border-border-default text-neutral-grey-50 hover:border-highlight-100 hover:text-highlight-100 bg-white"}`, disabled: submitting, children: preset.label }, preset.label))) }), renderImageModelPopover()] })] })), _jsxs("div", { className: cn("rounded-xl border bg-white p-4 transition-colors", targetFolderId
-                                    ? "border-border-default"
-                                    : "border-feedback-orange/30"), "data-testid": "ai-image-target-folder-card", children: [_jsx("div", { className: "text-neutral-grey-50 text-2xs mb-2", children: "Save generated image to" }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx("div", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", targetFolderId
-                                                            ? "bg-highlight-10 text-highlight-100"
-                                                            : "bg-feedback-orange-light text-feedback-orange"), children: _jsx(FolderOpen, { className: "h-4.5 w-4.5", strokeWidth: 1 }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "text-neutral-grey-100 truncate text-sm font-medium", "data-testid": "ai-image-target-folder-name", children: targetFolderInitialized
-                                                                            ? targetFolderName ||
-                                                                                (targetFolderId ? "Selected folder" : "No folder selected")
-                                                                            : "Loading folder..." }), targetFolderIsPersonal && targetFolderId && (_jsx("span", { className: "bg-highlight-10 text-highlight-100 text-2xs shrink-0 rounded-full px-2 py-0.5 font-medium", "data-testid": "ai-image-target-folder-personal-badge", children: "Your media folder" }))] }), targetFolderPath ? (_jsx("div", { className: "text-neutral-grey-50 truncate text-xs", title: targetFolderPath, children: formatFolderPath(targetFolderPath) })) : (_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "Choose where the generated image is saved" }))] })] }), _jsxs(Popover, { open: targetFolderPickerOpen, onOpenChange: handleTargetFolderPickerOpenChange, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "shrink-0", disabled: !targetFolderInitialized, "aria-busy": !targetFolderInitialized, "data-testid": "ai-image-target-folder-trigger", children: [!targetFolderInitialized ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 })) : null, !targetFolderInitialized
-                                                                    ? "Loading"
-                                                                    : targetFolderId
-                                                                        ? "Change folder"
-                                                                        : "Select"] }) }), _jsxs(PopoverContent, { ref: targetFolderPickerContentRef, className: "pointer-events-auto z-[110] w-[520px] p-2", align: "end", "aria-label": "Select folder", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 pl-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("div", { className: "bg-highlight-10 text-highlight-100 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg", children: _jsx(FolderOpen, { className: "h-4 w-4", strokeWidth: 1 }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "text-neutral-grey-100 text-xs font-medium", children: "Select folder" }), _jsx("span", { className: "text-neutral-grey-50 text-2xs truncate", title: folderPickerSelection?.path, children: folderPickerSelection
-                                                                                            ? `Highlighted: ${formatFolderPath(folderPickerSelection.path)}`
-                                                                                            : "Pick a media folder for the generated image" })] })] }), _jsx(CloseButton, { label: "Close folder picker", showTooltip: false, onClick: () => handleTargetFolderPickerOpenChange(false), "data-testid": "ai-image-target-folder-close" })] }), _jsx("div", { className: "border-border-default h-[360px] overflow-auto overscroll-contain rounded-lg border bg-white p-1", children: _jsx(ContentTree, { rootItemIds: folderPickerRootItemIds, selectionMode: "single", selectedItemIds: folderPickerSelectedItemIds, templateIds: folderPickerTemplateIds, hideRootNodes: true, expandIdPath: folderPickerSelection?.idPath ??
-                                                                        targetFolderExpandIdPath ??
-                                                                        "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
-                                                                        const node = selection[0];
-                                                                        if (!node?.id)
-                                                                            return;
-                                                                        setFolderPickerSelection({
-                                                                            id: node.id,
-                                                                            name: node.displayName || node.name || "",
-                                                                            path: node.path || "",
-                                                                            idPath: node.idPath,
-                                                                            canCreate: node.canCreate !== false,
-                                                                        });
-                                                                    }, renderNode: (node, defaultRenderer) => node.data
-                                                                        ?.canCreate === false ? (_jsx("span", { className: "opacity-50", title: "You cannot save images into this folder", children: defaultRenderer(node) })) : (defaultRenderer(node)), language: targetFolderLanguage, includeItemPath: true, database: "master" }) }), _jsx("div", { className: "border-border-default mt-2 border-t pt-2", children: creatingFolder ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { autoFocus: true, value: newFolderName, onChange: (e) => setNewFolderName(e.target.value), onKeyDown: (e) => {
-                                                                                        if (e.key === "Enter") {
-                                                                                            e.preventDefault();
-                                                                                            handleCreateFolder();
-                                                                                        }
-                                                                                        else if (e.key === "Escape") {
-                                                                                            e.stopPropagation();
-                                                                                            setCreatingFolder(false);
-                                                                                            setNewFolderName("");
-                                                                                            setNewFolderError(null);
-                                                                                        }
-                                                                                    }, placeholder: "Folder name", className: "h-8 flex-1 text-xs", disabled: newFolderSubmitting, "data-testid": "ai-image-new-folder-name" }), _jsxs(Button, { size: "sm", onClick: handleCreateFolder, disabled: !newFolderName.trim() || newFolderSubmitting, "data-testid": "ai-image-new-folder-create", children: [newFolderSubmitting ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 })) : null, "Create"] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
-                                                                                        setCreatingFolder(false);
-                                                                                        setNewFolderName("");
-                                                                                        setNewFolderError(null);
-                                                                                    }, disabled: newFolderSubmitting, children: "Cancel" })] }), newFolderError && (_jsx("div", { className: "text-feedback-red mt-1 text-xs", children: newFolderError }))] })) : (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "min-w-0 gap-1.5", onClick: () => {
-                                                                                            setCreatingFolder(true);
-                                                                                            setNewFolderError(null);
-                                                                                        }, disabled: !folderPickerCanCreate, "data-testid": "ai-image-new-folder", children: [_jsx(FolderPlus, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1 }), _jsx("span", { className: "shrink-0", children: "New folder" }), _jsxs("span", { className: "text-neutral-grey-50 truncate font-normal", children: ["in", " ", folderPickerSelection
-                                                                                                        ? folderPickerSelection.name ||
-                                                                                                            folderPickerSelection.path
-                                                                                                                .split("/")
-                                                                                                                .pop() ||
-                                                                                                            "selected folder"
-                                                                                                        : "Media Library"] })] }) }), _jsx(TooltipContent, { side: "bottom", sideOffset: 6, children: folderPickerCanCreate
-                                                                                        ? folderPickerSelection
-                                                                                            ? "Create a subfolder inside the highlighted folder"
-                                                                                            : "Create a folder at the Media Library root"
-                                                                                        : folderPickerSelection
-                                                                                            ? "You cannot create folders in the highlighted folder"
-                                                                                            : "You cannot create folders at the Media Library root. Select a folder first." })] }), _jsx(Button, { size: "sm", className: "shrink-0", onClick: handleSelectTargetFolder, disabled: !folderPickerSelection?.canCreate, "data-testid": "ai-image-target-folder-select", children: "Select folder" })] })) })] })] })] }), targetFolderInitialized && !targetFolderId && (_jsx("div", { className: "bg-feedback-orange-light text-feedback-orange mt-3 rounded-lg px-3 py-2 text-xs", children: "Select a target folder to enable generation." }))] })] }) }), _jsxs(DialogButtons, { className: "bg-white", children: [_jsx(Button, { variant: "outline", onClick: handleCancel, disabled: submitting, children: "Cancel" }), _jsx(Button, { onClick: handleSubmit, disabled: !canSubmit, className: "min-w-[100px] gap-1", children: submitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), "Generating..."] })) : (_jsx(_Fragment, { children: "Generate Image" })) })] })] }) }));
+                                        }, disabled: suggesting || submitting, className: "text-highlight-100 hover:text-highlight-100-hover inline-flex items-center gap-1.5 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-60", "data-testid": "ai-image-describe", children: [suggesting ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 })) : (_jsx(Lightbulb, { className: "h-3.5 w-3.5", strokeWidth: 1 })), suggesting
+                                                ? "Describing..."
+                                                : "Describe from page context"] })), canBrowseMedia && (_jsxs("button", { type: "button", onClick: handleSearchMedia, disabled: browsingMedia || !hasPrompt, className: "text-neutral-grey-50 hover:text-highlight-100 disabled:hover:text-neutral-grey-50 inline-flex items-center gap-1.5 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-60", title: hasPrompt
+                                            ? "Find media library images matching the description"
+                                            : "Describe the image first to search the media library", "data-testid": "ai-image-search-media", children: [_jsx(Search, { className: "h-3.5 w-3.5", strokeWidth: 1 }), browsingMedia
+                                                ? "Opening the media library..."
+                                                : "Search the media library for this description"] }))] }))), _jsx("input", { ref: fileInputRef, type: "file", className: "hidden", accept: "image/*", multiple: true, onChange: (e) => {
+                                    const files = e.target.files
+                                        ? Array.from(e.target.files)
+                                        : null;
+                                    e.target.value = "";
+                                    handleFileUpload(files);
+                                } })] }) }), _jsxs("div", { className: "border-border-default flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-t bg-white px-6 py-3", "data-testid": "ai-image-target-folder-card", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-xs", children: [_jsx(FolderOpen, { className: cn("h-4 w-4 shrink-0", targetFolderId
+                                        ? "text-neutral-grey-50"
+                                        : "text-feedback-orange"), strokeWidth: 1 }), targetFolderId ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-neutral-grey-50 shrink-0", children: "Saving to" }), _jsx("span", { className: "text-neutral-grey-100 truncate font-medium", title: targetFolderPath, "data-testid": "ai-image-target-folder-name", children: formatFolderPath(targetFolderPath) ||
+                                                targetFolderName ||
+                                                "Selected folder" }), targetFolderIsPersonal && (_jsx("span", { className: "bg-highlight-10 text-highlight-100 text-2xs shrink-0 rounded-full px-2 py-0.5 font-medium", "data-testid": "ai-image-target-folder-personal-badge", children: "Your folder" }))] })) : !targetFolderInitialized ? (_jsx("span", { className: "text-neutral-grey-50", children: "Loading folder..." })) : (_jsx("span", { className: "text-feedback-orange", "data-testid": "ai-image-target-folder-name", children: "No folder selected" })), renderTargetFolderPicker()] }), _jsx(Button, { variant: "outline", size: "sm", onClick: handleCancel, disabled: submitting, children: "Cancel" })] })] }) }));
 });
 AiImageEditorDialog.displayName = "AiImageEditorDialog";
 export default AiImageEditorDialog;