@haklex/rich-renderer-image 0.58.0 → 0.59.0

package/dist/index.mjs

@@ -1,15 +1,16 @@
-import { A as root, B as sizeSliderWrap, D as resizeHandleLeft, E as resizeHandle, F as sizePanelRow, I as sizePxInput, L as sizeReadout, M as sizeEquiv, N as sizeOption, O as resizeHandleRight, P as sizePanel, R as sizeSlider, T as replaceUploadArea, V as sizeValueField, _ as frameEditMode, a as editFieldIcon, b as imageState, c as editPlaceholder, d as editToolbarButtonActive, f as editToolbarButtonDanger, g as frame, i as editField, j as semanticClassNames, k as resizeHandleVisible, l as editToolbar, m as editTrigger, o as editInput, p as editToolbarVisible, r as controlPanel, s as editPanel, t as ImageRenderer, u as editToolbarButton, v as image, x as imageVisible, y as imageDragging, z as sizeSliderTick } from "./ImageRenderer-B3TgOJEU.js";
+import { A as textButton, C as resizeHandleRight, D as sizeButton, E as semanticClassNames, F as widthRow, M as toolbarSeparator, O as sizeChevron, S as resizeHandleLeft, T as root, _ as inspectorLabel, a as editToolbarVisible, c as footerNote, d as image, f as imageDragging, g as inspectorField, h as inspector, i as editToolbar, j as toolbarGroup, l as frame, m as imageVisible, o as editTrigger, p as imageState, r as editPlaceholder, t as ImageRenderer, u as frameEditMode, w as resizeHandleVisible, x as resizeHandle } from "./ImageRenderer-BwCsVAhc.js";
 import { $createImageNode, $isImageNode, computeImageDisplayPixels, convertImageDisplaySize, imageDisplayCssVars, imageDisplayDataAttr, imageDisplaySizeAfterResize, resolveImageDisplaySize, sanitizeImageDisplayWidth, sanitizeImageFixedPx } from "@haklex/rich-editor/nodes";
 import { useRendererMode } from "@haklex/rich-editor/static";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { Provider, atom, createStore, useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { computeImageMeta, decodeThumbHash } from "@haklex/rich-editor/renderers";
+import { $createNodeSelection, $getNearestNodeFromDOMNode, $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, UNDO_COMMAND } from "lexical";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ActionBar, ActionButton, Popover, PopoverPanel, PopoverTrigger, SegmentedControl } from "@haklex/rich-editor-ui";
-import { $getNearestNodeFromDOMNode, $getNodeByKey, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, REDO_COMMAND, UNDO_COMMAND } from "lexical";
-import { AlignCenterVertical, AlignEndVertical, AlignStartVertical, ArrowLeftToLine, ArrowRightToLine, Captions, CopyPlus, Download, ExternalLink, ImageIcon, Loader2, Replace, Scaling, Trash2, Type, Upload } from "lucide-react";
-import { resolvePreprocessTargets, useImagePreprocess, useImageUpload } from "@haklex/rich-editor/plugins";
+import { AlignCenterVertical, AlignEndVertical, AlignStartVertical, ArrowLeftToLine, ArrowRightToLine, ChevronDown, CopyPlus, Download, Ellipsis, ExternalLink, ImageIcon, Replace, Trash2 } from "lucide-react";
+import { ActionButton, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Field, Kbd, Popover, PopoverBody, PopoverFooter, PopoverHeader, PopoverPanel, PopoverTrigger, SegmentedControl, TextInput, TooltipContent, TooltipRoot, TooltipTrigger, toast, updateToast, useLiveEdit } from "@haklex/rich-editor-ui";
+import { defaultImageUpload, getImageEditor, presentImageDialog, resolvePreprocessTargets, useImagePreprocess, useImageUpload } from "@haklex/rich-editor/plugins";
+import { usePortalTheme } from "@haklex/rich-style-token";
 //#region src/atoms.ts
 function getCaptionText(altText, caption) {
 	if (caption) return caption;
@@ -36,15 +37,6 @@ var layoutOpenAtom = atom(false);
 var resizingAtom = atom(false);
 var toolbarVisibleAtom = atom((get) => get(hoveringAtom) || get(metaOpenAtom) || get(replaceOpenAtom) || get(sizeOpenAtom) || get(layoutOpenAtom) || get(resizingAtom));
 var focusCaptionOnOpenAtom = atom(false);
-var editSrcAtom = atom("");
-var editAltTextAtom = atom("");
-var editCaptionAtom = atom("");
-var replaceModeAtom = atom("upload");
-var replaceUrlAtom = atom("");
-var replacePreviewAtom = atom(null);
-var replaceMetaAtom = atom(null);
-var replaceLoadingAtom = atom(false);
-var replaceErrorAtom = atom(null);
 var wrapperRefAtom = atom({ current: null });
 var fileInputRefAtom = atom({ current: null });
 var placeholderUrlAtom = atom((get) => {
@@ -75,6 +67,7 @@ var frameStyleAtom = atom((get) => {
 //#endregion
 //#region src/ImageEditContext.tsx
 function ImageEditProvider({ props, children }) {
+	const [editor] = useLexicalComposerContext();
 	const wrapperRef = useRef(null);
 	const fileInputRef = useRef(null);
 	const [store] = useState(() => {
@@ -90,13 +83,10 @@ function ImageEditProvider({ props, children }) {
 		s.set(fixedWidthAtom, props.fixedWidth);
 		s.set(fixedHeightAtom, props.fixedHeight);
 		s.set(layoutAtom, props.layout);
-		s.set(editSrcAtom, props.src);
-		s.set(editAltTextAtom, props.altText);
-		s.set(editCaptionAtom, props.caption || "");
 		s.set(wrapperRefAtom, wrapperRef);
 		s.set(fileInputRefAtom, fileInputRef);
 		s.set(loadStateAtom, props.src ? "loading" : "error");
-		s.set(replaceOpenAtom, !props.src);
+		s.set(replaceOpenAtom, !props.src && !!props.autoOpenOnMount);
 		return s;
 	});
 	useEffect(() => {
@@ -125,56 +115,49 @@ function ImageEditProvider({ props, children }) {
 		props.fixedHeight,
 		props.layout
 	]);
-	useEffect(() => {
-		store.set(editSrcAtom, props.src);
-		store.set(editAltTextAtom, props.altText);
-		store.set(editCaptionAtom, props.caption || "");
-	}, [
-		store,
-		props.src,
-		props.altText,
-		props.caption
-	]);
 	useEffect(() => {
 		store.set(loadStateAtom, props.src ? "loading" : "error");
-		if (!props.src) store.set(replaceOpenAtom, true);
 	}, [store, props.src]);
+	useEffect(() => {
+		if (!props.autoOpenOnMount) return;
+		const wrapper = wrapperRef.current;
+		if (!wrapper) return;
+		editor.update(() => {
+			const node = $getNearestNodeFromDOMNode(wrapper);
+			if ($isImageNode(node)) node.setShouldAutoOpenOnMount(false);
+		}, { tag: [HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG] });
+	}, [editor, props.autoOpenOnMount]);
 	return /* @__PURE__ */ jsx(Provider, {
 		store,
 		children
 	});
 }
 //#endregion
-//#region src/useImageActions.ts
-function isSafeImageSrc(src) {
-	return !/^(?:javascript\s*:|vbscript\s*:|data\s*:(?!image\/))/i.test(src);
-}
-function readAsDataUrl(file) {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader();
-		reader.onload = () => resolve(String(reader.result));
-		reader.onerror = () => reject(reader.error ?? /* @__PURE__ */ new Error("File read failed"));
-		reader.readAsDataURL(file);
-	});
-}
-function loadImageByUrl(src) {
-	return new Promise((resolve, reject) => {
-		const image = new Image();
-		image.onload = () => {
-			resolve({
-				width: image.naturalWidth || image.width,
-				height: image.naturalHeight || image.height
-			});
-		};
-		image.onerror = () => reject(/* @__PURE__ */ new Error("Image load failed"));
-		image.src = src;
-	});
+//#region src/ToolbarButton.tsx
+var stopMouseDown = (event) => {
+	event.preventDefault();
+	event.stopPropagation();
+};
+function ToolbarButton({ children, label, icon = true, ...props }) {
+	return /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(ActionButton, {
+			"aria-label": label,
+			icon,
+			size: "md",
+			onMouseDown: stopMouseDown,
+			...props
+		}),
+		children
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "top",
+		children: label
+	})] });
 }
+//#endregion
+//#region src/useImageActions.ts
 function useImageActions() {
 	const store = useStore();
 	const [editor] = useLexicalComposerContext();
-	const uploadImage = useImageUpload();
-	const preprocess = useImagePreprocess();
 	const withImageNode = useCallback((updater) => {
 		const wrapperRef = store.get(wrapperRefAtom);
 		if (!wrapperRef.current) return;
@@ -185,23 +168,7 @@ function useImageActions() {
 	}, [editor, store]);
 	const closeReplacePanel = useCallback(() => {
 		store.set(replaceOpenAtom, false);
-		store.set(replaceModeAtom, "upload");
-		store.set(replaceUrlAtom, "");
-		store.set(replacePreviewAtom, null);
-		store.set(replaceMetaAtom, null);
-		store.set(replaceLoadingAtom, false);
-		store.set(replaceErrorAtom, null);
 	}, [store]);
-	const commitMeta = useCallback(() => {
-		const editSrc = store.get(editSrcAtom).trim();
-		if (!editSrc || !isSafeImageSrc(editSrc)) return;
-		withImageNode((node) => {
-			node.setSrc(editSrc);
-			node.setAltText(store.get(editAltTextAtom).trim());
-			node.setCaption(store.get(editCaptionAtom).trim() || void 0);
-		});
-		store.set(metaOpenAtom, false);
-	}, [store, withImageNode]);
 	const handleDelete = useCallback(() => {
 		const wrapperRef = store.get(wrapperRefAtom);
 		if (!wrapperRef.current) return;
@@ -257,75 +224,7 @@ function useImageActions() {
 		});
 	}, [withImageNode]);
 	return {
-		commitMeta,
 		closeReplacePanel,
-		handleReplaceFile: useCallback(async (picked) => {
-			if (!picked || !picked.type.startsWith("image/")) return;
-			const [file] = await resolvePreprocessTargets([picked], "replace", preprocess?.ref.current ?? null);
-			if (!file) return;
-			store.set(replaceLoadingAtom, true);
-			store.set(replaceErrorAtom, null);
-			try {
-				const fallbackUploader = async (nextFile) => ({
-					src: await readAsDataUrl(nextFile),
-					altText: nextFile.name
-				});
-				const uploader = uploadImage ?? fallbackUploader;
-				const [result, meta] = await Promise.all([uploader(file), computeImageMeta(file)]);
-				withImageNode((node) => {
-					node.setSrc(result.src);
-					node.setAltText(result.altText ?? file.name);
-					node.setDimensions(result.width ?? meta.width, result.height ?? meta.height);
-					node.setThumbhash(result.thumbhash ?? meta.thumbhash);
-				});
-				closeReplacePanel();
-			} catch {
-				store.set(replaceErrorAtom, "Failed to replace image");
-			} finally {
-				store.set(replaceLoadingAtom, false);
-			}
-		}, [
-			closeReplacePanel,
-			preprocess,
-			store,
-			uploadImage,
-			withImageNode
-		]),
-		handlePreviewUrl: useCallback(async () => {
-			const url = store.get(replaceUrlAtom).trim();
-			if (!url || !isSafeImageSrc(url)) {
-				store.set(replaceErrorAtom, "Invalid image URL");
-				return;
-			}
-			store.set(replaceLoadingAtom, true);
-			store.set(replaceErrorAtom, null);
-			try {
-				const meta = await loadImageByUrl(url);
-				store.set(replacePreviewAtom, url);
-				store.set(replaceMetaAtom, meta);
-			} catch {
-				store.set(replacePreviewAtom, null);
-				store.set(replaceMetaAtom, null);
-				store.set(replaceErrorAtom, "Image URL could not be loaded");
-			} finally {
-				store.set(replaceLoadingAtom, false);
-			}
-		}, [store]),
-		handleReplaceByUrl: useCallback(() => {
-			const preview = store.get(replacePreviewAtom);
-			if (!preview || !isSafeImageSrc(preview)) return;
-			const meta = store.get(replaceMetaAtom);
-			withImageNode((node) => {
-				node.setSrc(preview);
-				node.setDimensions(meta?.width, meta?.height);
-				node.setThumbhash(void 0);
-			});
-			closeReplacePanel();
-		}, [
-			closeReplacePanel,
-			store,
-			withImageNode
-		]),
 		handleReplaceOpenChange: useCallback((nextOpen) => {
 			store.set(replaceOpenAtom, nextOpen);
 			if (!nextOpen) closeReplacePanel();
@@ -339,87 +238,158 @@ function useImageActions() {
 	};
 }
 //#endregion
-//#region src/EditMetaPopover.tsx
-function EditMetaPopover() {
-	const editSrc = useAtomValue(editSrcAtom);
-	const setEditSrc = useSetAtom(editSrcAtom);
-	const editAltText = useAtomValue(editAltTextAtom);
-	const setEditAltText = useSetAtom(editAltTextAtom);
-	const editCaption = useAtomValue(editCaptionAtom);
-	const setEditCaption = useSetAtom(editCaptionAtom);
-	const setMetaOpen = useSetAtom(metaOpenAtom);
-	const { commitMeta } = useImageActions();
-	const captionInputRef = useRef(null);
-	const focusCaptionOnOpen = useAtomValue(focusCaptionOnOpenAtom);
-	const setFocusCaptionOnOpen = useSetAtom(focusCaptionOnOpenAtom);
-	useEffect(() => {
-		if (focusCaptionOnOpen && captionInputRef.current) {
-			captionInputRef.current.focus();
-			captionInputRef.current.select();
-			setFocusCaptionOnOpen(false);
-		}
-	}, [focusCaptionOnOpen, setFocusCaptionOnOpen]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: `${editField} ${semanticClassNames.editField}`,
-			children: [/* @__PURE__ */ jsx(ImageIcon, {
-				className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
-				size: 14
-			}), /* @__PURE__ */ jsx("input", {
-				className: `${editInput} ${semanticClassNames.editInput}`,
-				placeholder: "Image URL",
-				type: "url",
-				value: editSrc,
-				onChange: (event) => setEditSrc(event.target.value)
-			})]
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: `${editField} ${semanticClassNames.editField}`,
-			children: [/* @__PURE__ */ jsx(Type, {
-				className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
-				size: 14
-			}), /* @__PURE__ */ jsx("input", {
-				className: `${editInput} ${semanticClassNames.editInput}`,
-				placeholder: "Alt text",
-				type: "text",
-				value: editAltText,
-				onChange: (event) => setEditAltText(event.target.value)
-			})]
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: `${editField} ${semanticClassNames.editField}`,
-			children: [/* @__PURE__ */ jsx(Captions, {
-				className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
-				size: 14
-			}), /* @__PURE__ */ jsx("input", {
-				className: `${editInput} ${semanticClassNames.editInput}`,
-				placeholder: "Caption (optional)",
-				ref: captionInputRef,
-				type: "text",
-				value: editCaption,
-				onChange: (event) => setEditCaption(event.target.value)
-			})]
-		}),
-		/* @__PURE__ */ jsxs(ActionBar, { children: [/* @__PURE__ */ jsx(ActionButton, {
-			onClick: () => setMetaOpen(false),
-			children: "Close"
-		}), /* @__PURE__ */ jsx(ActionButton, {
-			variant: "accent",
-			onClick: commitMeta,
-			children: "Save"
-		})] })
-	] });
+//#region src/ImageActionsMenu.tsx
+function ImageActionsMenu({ onOpenChange }) {
+	const [editor] = useLexicalComposerContext();
+	const { handleDuplicate, handleOpen, handleDownload, handleDelete } = useImageActions();
+	const deleteImage = () => {
+		handleDelete();
+		toast({
+			title: "Image deleted",
+			action: {
+				label: "Undo",
+				onClick: () => editor.dispatchCommand(UNDO_COMMAND, void 0)
+			}
+		});
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		onOpenChange: (open) => onOpenChange?.(open),
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(ActionButton, {
+				icon: true,
+				"aria-label": "More actions",
+				size: "md",
+				onMouseDown: stopMouseDown
+			}),
+			children: /* @__PURE__ */ jsx(Ellipsis, {})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "end",
+			children: [
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: handleDuplicate,
+					children: [/* @__PURE__ */ jsx(CopyPlus, {}), "Duplicate"]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: handleOpen,
+					children: [/* @__PURE__ */ jsx(ExternalLink, {}), "Open original"]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: handleDownload,
+					children: [/* @__PURE__ */ jsx(Download, {}), "Download"]
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					shortcut: "Backspace",
+					variant: "destructive",
+					onClick: deleteImage,
+					children: [/* @__PURE__ */ jsx(Trash2, {}), "Delete"]
+				})
+			]
+		})]
+	});
 }
 //#endregion
-//#region src/history-shortcuts.ts
-function getEditorHistoryShortcut(event, options = {}) {
-	if (options.isDirty) return null;
-	if (event.altKey) return null;
-	if (!event.metaKey && !event.ctrlKey) return null;
-	const key = event.key.toLowerCase();
-	if (key === "z") return event.shiftKey ? "redo" : "undo";
-	if (key === "y" && event.ctrlKey && !event.metaKey && !event.shiftKey) return "redo";
-	return null;
+//#region src/EditMetaPopover.tsx
+var UNSAFE_SRC_RE = /^(?:javascript\s*:|vbscript\s*:|data\s*:(?!image\/))/i;
+function isSafeImageSrc(src) {
+	return src.trim() !== "" && !UNSAFE_SRC_RE.test(src.trim());
+}
+function ImageInspector({ focus, menu, onApply, onKeyDown, onOpenChange, open, renderWidth, trigger, values }) {
+	const id = useId();
+	const altRef = useRef(null);
+	const captionRef = useRef(null);
+	const [altText, setAltText] = useState(values.altText);
+	const [caption, setCaption] = useState(values.caption);
+	const [src, setSrc] = useState(values.src);
+	const { apply, revert } = useLiveEdit(values, open, onApply);
+	useEffect(() => {
+		if (!open) return;
+		setAltText(values.altText);
+		setCaption(values.caption);
+		setSrc(values.src);
+	}, [open]);
+	const srcInvalid = !isSafeImageSrc(src);
+	const initialFocus = focus === "caption" ? captionRef : focus === "alt" ? altRef : void 0;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (nextOpen, details) => {
+			if (!nextOpen && details?.reason === "escape-key") revert();
+			onOpenChange(nextOpen);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: trigger }), /* @__PURE__ */ jsxs(PopoverPanel, {
+			flush: true,
+			className: `${inspector} ${semanticClassNames.inspector}`,
+			initialFocus,
+			side: "bottom",
+			size: "md",
+			onKeyDown,
+			children: [
+				/* @__PURE__ */ jsx(PopoverHeader, {
+					actions: menu,
+					icon: /* @__PURE__ */ jsx(ImageIcon, {}),
+					title: "Image"
+				}),
+				/* @__PURE__ */ jsxs(PopoverBody, { children: [
+					renderWidth?.((size) => apply({ size })),
+					/* @__PURE__ */ jsx(Field, {
+						id: `${id}-alt`,
+						label: "Alt text",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							id: `${id}-alt`,
+							placeholder: "Describe the image",
+							ref: altRef,
+							value: altText,
+							onChange: (event) => {
+								setAltText(event.target.value);
+								apply({ altText: event.target.value });
+							}
+						})
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						hint: "Optional",
+						id: `${id}-caption`,
+						label: "Caption",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							id: `${id}-caption`,
+							ref: captionRef,
+							value: caption,
+							onChange: (event) => {
+								setCaption(event.target.value);
+								apply({ caption: event.target.value });
+							}
+						})
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						error: srcInvalid ? "Enter an image URL" : void 0,
+						id: `${id}-src`,
+						label: "Source URL",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							"aria-describedby": srcInvalid ? `${id}-src-error` : void 0,
+							id: `${id}-src`,
+							invalid: srcInvalid,
+							type: "url",
+							value: src,
+							onChange: (event) => {
+								setSrc(event.target.value);
+								if (isSafeImageSrc(event.target.value)) apply({ src: event.target.value.trim() });
+							}
+						})
+					})
+				] }),
+				/* @__PURE__ */ jsxs(PopoverFooter, {
+					hint: "Changes apply as you type",
+					children: [/* @__PURE__ */ jsx(Kbd, {
+						keys: "Esc",
+						size: "sm",
+						tone: "muted"
+					}), /* @__PURE__ */ jsx("span", {
+						className: footerNote,
+						children: "revert"
+					})]
+				})
+			]
+		})]
+	});
 }
 //#endregion
 //#region src/image-metrics.ts
@@ -472,6 +442,7 @@ function applyImageSizePreview(trigger, layout, next) {
 }
 //#endregion
 //#region src/ImageSizeControl.tsx
+var inspectorFocusAtom = atom(null);
 var SIZE_PRESETS = [
 	25,
 	50,
@@ -481,219 +452,238 @@ var SIZE_PRESETS = [
 var SIZE_MIN = 10;
 var SIZE_MAX = 100;
 var SNAP_THRESHOLD = 3;
-var MODE_BUTTONS = [
-	[
-		"percent",
-		"%",
-		"Percent of content width"
-	],
-	[
-		"fixed-width",
-		"W",
-		"Fixed width"
-	],
-	[
-		"fixed-height",
-		"H",
-		"Fixed height"
-	]
+var WIDTH_MODES = [
+	{
+		value: "auto",
+		label: "Auto"
+	},
+	{
+		value: "percent",
+		label: "%"
+	},
+	{
+		value: "px",
+		label: "px"
+	}
 ];
 function snapToPreset(value) {
 	for (const preset of SIZE_PRESETS) if (Math.abs(value - preset) <= SNAP_THRESHOLD) return preset;
 	return value;
 }
-function tickLeft(preset) {
-	return `calc(6px + ${(preset - SIZE_MIN) / 90} * (100% - 12px))`;
+function formatImageSize(size) {
+	switch (size.mode) {
+		case "percent": return `${size.value}%`;
+		case "fixed-width":
+		case "fixed-height": return `${size.px}px`;
+		default: return "Auto";
+	}
 }
-var toolbarButtonClass$1 = `${editToolbarButton} ${semanticClassNames.editToolbarButton}`;
-var stopMouseDown$1 = (e) => {
-	e.preventDefault();
-	e.stopPropagation();
-};
-function ImageSizeControl() {
-	const store = useStore();
-	const [sizeOpen, setSizeOpen] = useAtom(sizeOpenAtom);
+function useImageDisplaySize() {
 	const displayWidth = useAtomValue(displayWidthAtom);
 	const fixedWidth = useAtomValue(fixedWidthAtom);
 	const fixedHeight = useAtomValue(fixedHeightAtom);
-	const intrinsicWidth = useAtomValue(widthAtom);
-	const intrinsicHeight = useAtomValue(heightAtom);
-	const { handleSetDisplaySize } = useImageActions();
-	const [dragValue, setDragValue] = useState(null);
-	const [fixedDraft, setFixedDraft] = useState(null);
-	const size = resolveImageDisplaySize({
+	return useMemo(() => resolveImageDisplaySize({
 		displayWidth,
 		fixedWidth,
 		fixedHeight
-	});
-	useEffect(() => {
-		setDragValue(null);
-		setFixedDraft(null);
-	}, [
+	}), [
 		displayWidth,
 		fixedWidth,
 		fixedHeight
 	]);
-	const ctx = readImageDisplayContext(store.get(wrapperRefAtom).current, intrinsicWidth, intrinsicHeight);
-	const committedPixels = ctx ? computeImageDisplayPixels(size, ctx) : {};
-	const committedPercent = size.mode === "percent" ? size.value : ctx && committedPixels.widthPx ? sanitizeImageDisplayWidth(committedPixels.widthPx / ctx.containerWidth * 100) : void 0;
-	const previewSize = dragValue === null ? size : size.mode === "fixed-width" || size.mode === "fixed-height" ? ctx ? convertImageDisplaySize({
-		mode: "percent",
-		value: dragValue
-	}, size.mode, ctx) : size : {
-		mode: "percent",
-		value: dragValue
-	};
-	const previewPixels = ctx ? computeImageDisplayPixels(previewSize, {
-		...ctx,
-		renderedWidth: dragValue !== null ? void 0 : ctx.renderedWidth,
-		renderedHeight: dragValue !== null ? void 0 : ctx.renderedHeight
-	}) : {};
-	const previewPercent = dragValue ?? (ctx && previewPixels.widthPx ? sanitizeImageDisplayWidth(previewPixels.widthPx / ctx.containerWidth * 100) : committedPercent);
-	const applyPreview = (next) => {
-		const trigger = store.get(wrapperRefAtom).current;
-		if (trigger) applyImageSizePreview(trigger, store.get(layoutAtom), next);
-	};
+}
+function useImageInspectorApply() {
+	const [editor] = useLexicalComposerContext();
+	const store = useStore();
+	return useCallback((patch, merge) => {
+		const wrapper = store.get(wrapperRefAtom).current;
+		if (!wrapper) return;
+		editor.update(() => {
+			const node = $getNearestNodeFromDOMNode(wrapper);
+			if (!$isImageNode(node)) return;
+			if (patch.src !== void 0) node.setSrc(patch.src);
+			if (patch.altText !== void 0) node.setAltText(patch.altText);
+			if (patch.caption !== void 0) node.setCaption(patch.caption || void 0);
+			if (patch.size) node.applyDisplaySize(patch.size);
+		}, { tag: merge ? [HISTORY_MERGE_TAG, "skip-scroll-into-view"] : "skip-scroll-into-view" });
+	}, [editor, store]);
+}
+function ImageWidthControl({ size, onChange }) {
+	const id = useId();
+	const store = useStore();
+	const intrinsicWidth = useAtomValue(widthAtom);
+	const intrinsicHeight = useAtomValue(heightAtom);
+	const [dragValue, setDragValue] = useState(null);
+	const [pxDraft, setPxDraft] = useState(null);
+	useEffect(() => {
+		setDragValue(null);
+		setPxDraft(null);
+	}, [size]);
+	const readContext = () => readImageDisplayContext(store.get(wrapperRefAtom).current, intrinsicWidth, intrinsicHeight);
+	const mode = size.mode === "auto" ? "auto" : size.mode === "percent" ? "percent" : "px";
 	const switchMode = (to) => {
-		if (to === size.mode) return;
+		if (to === mode) return;
 		if (to === "auto") {
-			handleSetDisplaySize({ mode: "auto" });
+			onChange({ mode: "auto" });
 			return;
 		}
-		if (!ctx) return;
-		handleSetDisplaySize(convertImageDisplaySize(size, to, ctx));
-	};
-	const commitSlider = () => {
-		if (dragValue === null) return;
-		if (size.mode === "fixed-width" || size.mode === "fixed-height") {
-			if (dragValue === committedPercent || !ctx) return;
-			handleSetDisplaySize(convertImageDisplaySize({
+		const ctx = readContext();
+		if (to === "percent") {
+			onChange(ctx ? convertImageDisplaySize(size, "percent", ctx) : {
 				mode: "percent",
-				value: dragValue
-			}, size.mode, ctx));
+				value: 100
+			});
 			return;
 		}
-		if (dragValue === (displayWidth ?? SIZE_MAX)) return;
-		handleSetDisplaySize({
-			mode: "percent",
-			value: dragValue
-		});
-	};
-	const handleSliderChange = (event) => {
-		const next = snapToPreset(Number(event.target.value));
-		setDragValue(next);
-		if (size.mode === "fixed-width" || size.mode === "fixed-height") {
-			if (!ctx) return;
-			applyPreview(convertImageDisplaySize({
-				mode: "percent",
-				value: next
-			}, size.mode, ctx));
+		if (ctx) {
+			onChange(convertImageDisplaySize(size, "fixed-width", ctx));
 			return;
 		}
-		applyPreview({
+		const px = sanitizeImageFixedPx(intrinsicWidth);
+		if (px) onChange({
+			mode: "fixed-width",
+			px
+		});
+	};
+	const preview = (next) => {
+		const wrapper = store.get(wrapperRefAtom).current;
+		if (wrapper) applyImageSizePreview(wrapper, store.get(layoutAtom), next);
+	};
+	const committedPercent = (() => {
+		if (size.mode === "percent") return size.value;
+		const ctx = readContext();
+		if (!ctx) return void 0;
+		const { widthPx } = computeImageDisplayPixels(size, ctx);
+		return widthPx ? sanitizeImageDisplayWidth(widthPx / ctx.containerWidth * 100) : void 0;
+	})();
+	const percent = dragValue ?? committedPercent ?? SIZE_MAX;
+	const fill = `${(percent - SIZE_MIN) / 90 * 100}%`;
+	const commitSlider = () => {
+		if (dragValue === null || dragValue === committedPercent) return;
+		onChange({
 			mode: "percent",
-			value: next
+			value: dragValue
 		});
 	};
-	const value = dragValue ?? committedPercent ?? SIZE_MAX;
-	const fill = `${(value - SIZE_MIN) / 90 * 100}%`;
 	const fixedPx = size.mode === "fixed-width" || size.mode === "fixed-height" ? size.px : void 0;
-	return /* @__PURE__ */ jsxs(Popover, {
-		open: sizeOpen,
-		onOpenChange: setSizeOpen,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			className: toolbarButtonClass$1,
-			title: "Image size",
-			onMouseDown: stopMouseDown$1,
-			children: /* @__PURE__ */ jsx(Scaling, { size: 14 })
-		}), /* @__PURE__ */ jsxs(PopoverPanel, {
-			className: sizePanel,
-			side: "bottom",
-			sideOffset: 8,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: sizePanelRow,
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						className: `${sizeOption} ${size.mode === "auto" ? editToolbarButtonActive : ""}`.trim(),
-						title: "Natural size",
-						type: "button",
-						onMouseDown: stopMouseDown$1,
-						onClick: () => {
-							handleSetDisplaySize({ mode: "auto" });
-							setSizeOpen(false);
-						},
-						children: "Auto"
-					}),
-					MODE_BUTTONS.map(([mode, label, title]) => /* @__PURE__ */ jsx("button", {
-						className: `${sizeOption} ${size.mode === mode ? editToolbarButtonActive : ""}`.trim(),
-						title,
-						type: "button",
-						onClick: () => switchMode(mode),
-						onMouseDown: stopMouseDown$1,
-						children: label
-					}, mode)),
-					/* @__PURE__ */ jsxs("span", {
-						className: sizeReadout,
-						children: [size.mode === "fixed-width" || size.mode === "fixed-height" ? /* @__PURE__ */ jsx("input", {
-							autoComplete: "off",
-							className: `${sizeValueField} ${sizePxInput}`,
-							inputMode: "numeric",
-							spellCheck: false,
-							"aria-label": size.mode === "fixed-width" ? "Image width in pixels" : "Image height in pixels",
-							value: fixedDraft ?? (previewSize.mode === "fixed-width" || previewSize.mode === "fixed-height" ? String(previewSize.px) : String(fixedPx ?? "")),
-							onMouseDown: (e) => e.stopPropagation(),
-							onBlur: () => {
-								const px = sanitizeImageFixedPx(Number(fixedDraft ?? fixedPx));
-								if (px && (size.mode === "fixed-width" || size.mode === "fixed-height")) handleSetDisplaySize({
-									mode: size.mode,
-									px
-								});
-								setFixedDraft(null);
-							},
-							onChange: (event) => {
-								setFixedDraft(event.target.value);
-								const px = sanitizeImageFixedPx(Number(event.target.value));
-								if (px && (size.mode === "fixed-width" || size.mode === "fixed-height")) applyPreview({
-									mode: size.mode,
-									px
-								});
-							}
-						}) : /* @__PURE__ */ jsx("span", {
-							className: sizeValueField,
-							children: previewSize.mode === "percent" ? `${previewSize.value}%` : "Auto"
-						}), /* @__PURE__ */ jsx("span", {
-							className: sizeEquiv,
-							children: previewSize.mode === "percent" ? previewPixels.widthPx ? `${previewPixels.widthPx}px` : "\xA0" : previewSize.mode === "auto" ? "\xA0" : previewPercent ? `${previewPercent}%` : "\xA0"
-						})]
-					})
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: sizePanelRow,
-				children: /* @__PURE__ */ jsxs("span", {
-					className: sizeSliderWrap,
-					children: [/* @__PURE__ */ jsx("input", {
-						"aria-label": "Image width, percent of content width",
-						className: sizeSlider,
-						max: SIZE_MAX,
-						min: SIZE_MIN,
-						step: 1,
-						style: { "--fill": fill },
-						type: "range",
-						value,
-						onBlur: commitSlider,
-						onChange: handleSliderChange,
-						onKeyUp: commitSlider,
-						onMouseDown: (e) => e.stopPropagation(),
-						onPointerUp: commitSlider
-					}), SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsx("span", {
-						className: sizeSliderTick,
-						style: { left: tickLeft(preset) }
-					}, preset))]
+	const pxLabel = size.mode === "fixed-height" ? "Height in pixels" : "Width in pixels";
+	return /* @__PURE__ */ jsxs("div", {
+		className: inspectorField,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: inspectorLabel,
+			id: `${id}-label`,
+			children: "Width"
+		}), /* @__PURE__ */ jsxs("div", {
+			"aria-labelledby": `${id}-label`,
+			className: widthRow,
+			role: "group",
+			children: [
+				/* @__PURE__ */ jsx(SegmentedControl, {
+					items: WIDTH_MODES,
+					value: mode,
+					onChange: switchMode
+				}),
+				mode === "percent" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+					"aria-label": "Width, percent of content width",
+					className: "_1n94osfu",
+					max: SIZE_MAX,
+					min: SIZE_MIN,
+					step: 1,
+					style: { "--fill": fill },
+					type: "range",
+					value: percent,
+					onBlur: commitSlider,
+					onKeyUp: commitSlider,
+					onPointerUp: commitSlider,
+					onChange: (event) => {
+						const next = snapToPreset(Number(event.target.value));
+						setDragValue(next);
+						preview({
+							mode: "percent",
+							value: next
+						});
+					}
+				}), /* @__PURE__ */ jsx("span", {
+					className: "_1n94osf15",
+					children: `${percent}%`
+				})] }),
+				mode === "px" && /* @__PURE__ */ jsxs("span", {
+					className: "_1n94osf17",
+					children: [/* @__PURE__ */ jsx(TextInput, {
+						"aria-label": pxLabel,
+						autoComplete: "off",
+						inputMode: "numeric",
+						invalid: pxDraft !== null && sanitizeImageFixedPx(Number(pxDraft)) === void 0,
+						spellCheck: false,
+						value: pxDraft ?? String(fixedPx ?? ""),
+						onChange: (event) => {
+							setPxDraft(event.target.value);
+							const px = sanitizeImageFixedPx(Number(event.target.value));
+							if (px && (size.mode === "fixed-width" || size.mode === "fixed-height")) onChange({
+								mode: size.mode,
+								px
+							});
+						}
+					}), /* @__PURE__ */ jsx("span", {
+						className: "_1n94osf18",
+						children: "px"
+					})]
+				}),
+				mode === "auto" && /* @__PURE__ */ jsx("span", {
+					className: "_1n94osf16",
+					children: "Natural size"
 				})
-			})]
+			]
 		})]
 	});
 }
+function ImageSizeControl() {
+	const [open, setOpen] = useAtom(metaOpenAtom);
+	const [focus, setFocus] = useAtom(inspectorFocusAtom);
+	const [focusCaption, setFocusCaption] = useAtom(focusCaptionOnOpenAtom);
+	const src = useAtomValue(srcAtom);
+	const altText = useAtomValue(altTextAtom);
+	const caption = useAtomValue(captionAtom);
+	const size = useImageDisplaySize();
+	const onApply = useImageInspectorApply();
+	const values = useMemo(() => ({
+		src,
+		altText,
+		caption: caption ?? "",
+		size
+	}), [
+		src,
+		altText,
+		caption,
+		size
+	]);
+	return /* @__PURE__ */ jsx(ImageInspector, {
+		focus: focusCaption ? "caption" : focus,
+		menu: /* @__PURE__ */ jsx(ImageActionsMenu, {}),
+		open,
+		renderWidth: (apply) => /* @__PURE__ */ jsx(ImageWidthControl, {
+			size,
+			onChange: apply
+		}),
+		values,
+		trigger: /* @__PURE__ */ jsxs(ActionButton, {
+			"aria-label": `Image size, ${formatImageSize(size)}`,
+			className: sizeButton,
+			size: "md",
+			onClick: () => setFocus(null),
+			onMouseDown: stopMouseDown,
+			children: [/* @__PURE__ */ jsx("span", { children: formatImageSize(size) }), /* @__PURE__ */ jsx(ChevronDown, { className: sizeChevron })]
+		}),
+		onApply,
+		onOpenChange: (nextOpen) => {
+			setOpen(nextOpen);
+			if (!nextOpen) {
+				setFocus(null);
+				setFocusCaption(false);
+			}
+		}
+	});
+}
 //#endregion
 //#region src/ImageLayoutControls.tsx
 var LAYOUT_OPTIONS = [
@@ -723,286 +713,216 @@ var LAYOUT_OPTIONS = [
 		Icon: ArrowRightToLine
 	}
 ];
-var toolbarButtonClass = `${editToolbarButton} ${semanticClassNames.editToolbarButton}`;
-var stopMouseDown = (e) => {
-	e.preventDefault();
-	e.stopPropagation();
-};
 function ImageLayoutControl() {
-	const [layoutOpen, setLayoutOpen] = useAtom(layoutOpenAtom);
 	const layout = useAtomValue(layoutAtom);
 	const { handleSetLayout } = useImageActions();
-	const current = LAYOUT_OPTIONS.find((option) => option.value === layout) ?? LAYOUT_OPTIONS[0];
-	return /* @__PURE__ */ jsxs(Popover, {
-		open: layoutOpen,
-		onOpenChange: setLayoutOpen,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			className: toolbarButtonClass,
-			title: "Image layout",
-			onMouseDown: stopMouseDown,
-			children: /* @__PURE__ */ jsx(current.Icon, { size: 14 })
-		}), /* @__PURE__ */ jsx(PopoverPanel, {
-			className: controlPanel,
-			side: "bottom",
-			sideOffset: 8,
-			children: LAYOUT_OPTIONS.map(({ value, label, Icon }) => /* @__PURE__ */ jsx("button", {
-				className: `${toolbarButtonClass} ${layout === value ? editToolbarButtonActive : ""}`.trim(),
-				title: label,
-				type: "button",
-				onMouseDown: stopMouseDown,
-				onClick: () => {
-					handleSetLayout(value);
-					setLayoutOpen(false);
-				},
-				children: /* @__PURE__ */ jsx(Icon, { size: 14 })
-			}, value ?? "center"))
-		})]
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "Image layout",
+		className: toolbarGroup,
+		role: "group",
+		children: LAYOUT_OPTIONS.map(({ value, label, Icon }) => /* @__PURE__ */ jsx(ToolbarButton, {
+			"aria-pressed": layout === value,
+			label,
+			onClick: () => {
+				if (layout !== value) handleSetLayout(value);
+			},
+			children: /* @__PURE__ */ jsx(Icon, {})
+		}, value ?? "center"))
 	});
 }
 //#endregion
 //#region src/ReplacePanel.tsx
-var replaceModeItems = [{
-	value: "upload",
-	label: "Upload"
-}, {
-	value: "url",
-	label: "URL"
-}];
-function ReplacePanel() {
-	const replaceMode = useAtomValue(replaceModeAtom);
-	const setReplaceMode = useSetAtom(replaceModeAtom);
-	const replaceUrl = useAtomValue(replaceUrlAtom);
-	const setReplaceUrl = useSetAtom(replaceUrlAtom);
-	const replacePreview$1 = useAtomValue(replacePreviewAtom);
-	const replaceError = useAtomValue(replaceErrorAtom);
-	const replaceLoading = useAtomValue(replaceLoadingAtom);
-	const fileInputRef = useAtomValue(fileInputRefAtom);
-	const { handleReplaceFile, handlePreviewUrl, handleReplaceByUrl } = useImageActions();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(SegmentedControl, {
-			fullWidth: true,
-			items: replaceModeItems,
-			value: replaceMode,
-			onChange: setReplaceMode
-		}),
-		replaceMode === "upload" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-			accept: "image/*",
-			ref: fileInputRef,
-			style: { display: "none" },
-			type: "file",
-			onChange: (event) => {
-				const file = event.currentTarget.files?.[0] ?? null;
-				handleReplaceFile(file);
-				event.currentTarget.value = "";
+var ERROR_TOAST_DURATION = 6e3;
+function useReplaceImageDialog() {
+	const [editor] = useLexicalComposerContext();
+	const store = useStore();
+	const uploadImage = useImageUpload();
+	const preprocess = useImagePreprocess();
+	const portalTheme = usePortalTheme();
+	const openRef = useRef(false);
+	return useCallback(async () => {
+		if (openRef.current) return;
+		openRef.current = true;
+		const wrapper = store.get(wrapperRefAtom).current;
+		const withNode = (updater) => {
+			if (!wrapper) return;
+			editor.update(() => {
+				const node = $getNearestNodeFromDOMNode(wrapper);
+				if ($isImageNode(node)) updater(node);
+			}, { tag: "skip-scroll-into-view" });
+		};
+		try {
+			const imageEditor = getImageEditor(preprocess);
+			const entry = (await presentImageDialog({
+				editor: imageEditor,
+				mode: "replace",
+				portalClassName: portalTheme.className,
+				theme: portalTheme.theme
+			}))?.[0];
+			if (!entry) return;
+			if (entry.kind === "url") {
+				withNode((node) => {
+					node.setSrc(entry.src);
+					node.setDimensions(entry.width, entry.height);
+					node.setThumbhash(void 0);
+				});
+				return;
 			}
-		}), /* @__PURE__ */ jsx("button", {
-			className: `${replaceUploadArea} ${semanticClassNames.replaceUploadArea}`,
-			type: "button",
-			onClick: () => fileInputRef.current?.click(),
-			children: replaceLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { size: 16 }), /* @__PURE__ */ jsx("span", { children: "Uploading image..." })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Upload, { size: 16 }), /* @__PURE__ */ jsx("span", { children: "Click to upload image" })] })
-		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			className: `${editField} ${semanticClassNames.editField}`,
-			children: [/* @__PURE__ */ jsx(ImageIcon, {
-				className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
-				size: 14
-			}), /* @__PURE__ */ jsx("input", {
-				className: `${editInput} ${semanticClassNames.editInput}`,
-				placeholder: "https://example.com/image.jpg",
-				type: "url",
-				value: replaceUrl,
-				onChange: (event) => setReplaceUrl(event.target.value),
-				onKeyDown: (event) => {
-					if (event.key === "Enter") {
-						event.preventDefault();
-						handlePreviewUrl();
-					}
+			const [file] = imageEditor ? [entry.file] : await resolvePreprocessTargets([entry.file], "replace", preprocess?.ref.current ?? null);
+			if (!file) return;
+			const upload = async () => {
+				const id = toast({
+					title: "Uploading image…",
+					tone: "loading"
+				});
+				try {
+					const uploader = uploadImage ?? defaultImageUpload;
+					const [result, meta] = await Promise.all([uploader(file), computeImageMeta(file)]);
+					withNode((node) => {
+						node.setSrc(result.src);
+						node.setAltText(result.altText ?? file.name);
+						node.setDimensions(result.width ?? meta.width, result.height ?? meta.height);
+						node.setThumbhash(result.thumbhash ?? meta.thumbhash);
+					});
+					updateToast(id, {
+						title: "Image replaced",
+						tone: "success"
+					});
+				} catch (err) {
+					console.error("[ImageReplace]", err);
+					updateToast(id, {
+						action: {
+							label: "Retry",
+							onClick: () => void upload()
+						},
+						duration: ERROR_TOAST_DURATION,
+						title: "Image replace failed",
+						tone: "error"
+					});
 				}
-			})]
-		}), /* @__PURE__ */ jsxs(ActionBar, { children: [/* @__PURE__ */ jsx(ActionButton, {
-			disabled: replaceLoading || !replaceUrl.trim(),
-			onClick: handlePreviewUrl,
-			children: "Preview"
-		}), /* @__PURE__ */ jsx(ActionButton, {
-			disabled: !replacePreview$1,
-			variant: "accent",
-			onClick: handleReplaceByUrl,
-			children: "Apply"
-		})] })] }),
-		replaceError && /* @__PURE__ */ jsx("span", {
-			className: `_1n94osfy ${semanticClassNames.panelHint}`,
-			children: replaceError
-		}),
-		replacePreview$1 && /* @__PURE__ */ jsx("div", {
-			className: `_1n94osfx ${semanticClassNames.replacePreview}`,
-			children: /* @__PURE__ */ jsx("img", {
-				alt: "Replace preview",
-				src: replacePreview$1
-			})
-		})
-	] });
+			};
+			await upload();
+		} finally {
+			openRef.current = false;
+		}
+	}, [
+		editor,
+		portalTheme,
+		preprocess,
+		store,
+		uploadImage
+	]);
+}
+//#endregion
+//#region src/useImageSelection.ts
+function useImageSelected() {
+	const [editor] = useLexicalComposerContext();
+	const store = useStore();
+	const [selected, setSelected] = useState(false);
+	useEffect(() => {
+		const wrapper = store.get(wrapperRefAtom).current;
+		if (!wrapper) return;
+		const readSelected = () => editor.read(() => {
+			const selection = $getSelection();
+			if (!$isNodeSelection(selection)) return false;
+			const node = $getNearestNodeFromDOMNode(wrapper);
+			return node !== null && selection.has(node.getKey());
+		});
+		const sync = () => {
+			const next = readSelected();
+			setSelected(next);
+			if (next) wrapper.dataset.selected = "";
+			else delete wrapper.dataset.selected;
+		};
+		const handleClick = (event) => {
+			if (event.target?.closest(`.${semanticClassNames.editToolbar}`)) return;
+			editor.update(() => {
+				const node = $getNearestNodeFromDOMNode(wrapper);
+				if (!node) return;
+				const selection = $createNodeSelection();
+				selection.add(node.getKey());
+				$setSelection(selection);
+			}, { tag: "skip-scroll-into-view" });
+		};
+		sync();
+		wrapper.addEventListener("click", handleClick);
+		const unregister = editor.registerUpdateListener(sync);
+		return () => {
+			wrapper.removeEventListener("click", handleClick);
+			unregister();
+			delete wrapper.dataset.selected;
+		};
+	}, [editor, store]);
+	return selected;
 }
 //#endregion
 //#region src/ImageEditToolbar.tsx
+function ToolbarSeparator() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: toolbarSeparator
+	});
+}
 function ImageEditToolbar() {
-	const [editor] = useLexicalComposerContext();
 	const toolbarVisible = useAtomValue(toolbarVisibleAtom);
-	const metaOpen = useAtomValue(metaOpenAtom);
+	const selected = useImageSelected();
+	const [menuOpen, setMenuOpen] = useState(false);
 	const setMetaOpen = useSetAtom(metaOpenAtom);
-	const replaceOpen = useAtomValue(replaceOpenAtom);
-	const src = useAtomValue(srcAtom);
-	const altText = useAtomValue(altTextAtom);
-	const caption = useAtomValue(captionAtom);
-	const editSrc = useAtomValue(editSrcAtom);
-	const editAltText = useAtomValue(editAltTextAtom);
-	const editCaption = useAtomValue(editCaptionAtom);
-	const replaceUrl = useAtomValue(replaceUrlAtom);
-	const replacePreview = useAtomValue(replacePreviewAtom);
-	const { handleReplaceOpenChange, handleOpen, handleDuplicate, handleDownload, handleDelete } = useImageActions();
-	const dispatchHistoryShortcut = (shortcut) => {
-		editor.dispatchCommand(shortcut === "undo" ? UNDO_COMMAND : REDO_COMMAND, void 0);
-	};
-	const handleMetaPanelKeyDown = (event) => {
-		const shortcut = getEditorHistoryShortcut(event, { isDirty: editSrc !== src || editAltText !== altText || editCaption !== (caption || "") });
-		if (!shortcut) return;
-		event.preventDefault();
-		event.stopPropagation();
-		dispatchHistoryShortcut(shortcut);
-	};
-	const handleReplacePanelKeyDown = (event) => {
-		const shortcut = getEditorHistoryShortcut(event, { isDirty: replaceUrl !== "" || replacePreview !== null });
-		if (!shortcut) return;
-		event.preventDefault();
-		event.stopPropagation();
-		dispatchHistoryShortcut(shortcut);
-	};
+	const setInspectorFocus = useSetAtom(inspectorFocusAtom);
+	const openReplaceDialog = useReplaceImageDialog();
+	const visible = toolbarVisible || selected || menuOpen;
 	return /* @__PURE__ */ jsxs("div", {
-		className: `${editToolbar} ${semanticClassNames.editToolbar} ${toolbarVisible ? `${editToolbarVisible} ${semanticClassNames.editToolbarVisible}` : ""}`,
+		"aria-label": "Image",
+		className: `${editToolbar} ${semanticClassNames.editToolbar} ${visible ? `${editToolbarVisible} ${semanticClassNames.editToolbarVisible}` : ""}`,
+		role: "toolbar",
 		children: [
 			/* @__PURE__ */ jsx(ImageSizeControl, {}),
+			/* @__PURE__ */ jsx(ToolbarSeparator, {}),
 			/* @__PURE__ */ jsx(ImageLayoutControl, {}),
-			/* @__PURE__ */ jsxs(Popover, {
-				open: metaOpen,
-				onOpenChange: (nextOpen) => {
-					setMetaOpen(nextOpen);
-					if (nextOpen) handleReplaceOpenChange(false);
-				},
-				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-					className: `${editToolbarButton} ${semanticClassNames.editToolbarButton}`,
-					title: "Edit details",
-					onMouseDown: (e) => {
-						e.preventDefault();
-						e.stopPropagation();
-					},
-					children: /* @__PURE__ */ jsx(Type, { size: 14 })
-				}), /* @__PURE__ */ jsx(PopoverPanel, {
-					className: editPanel,
-					side: "bottom",
-					sideOffset: 8,
-					onKeyDown: handleMetaPanelKeyDown,
-					children: /* @__PURE__ */ jsx(EditMetaPopover, {})
-				})]
-			}),
-			/* @__PURE__ */ jsxs(Popover, {
-				open: replaceOpen,
-				onOpenChange: (nextOpen) => {
-					handleReplaceOpenChange(nextOpen);
-					if (nextOpen) setMetaOpen(false);
-				},
-				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-					className: `${editToolbarButton} ${semanticClassNames.editToolbarButton}`,
-					title: "Replace image",
-					onMouseDown: (e) => {
-						e.preventDefault();
-						e.stopPropagation();
-					},
-					children: /* @__PURE__ */ jsx(Replace, { size: 14 })
-				}), /* @__PURE__ */ jsx(PopoverPanel, {
-					className: editPanel,
-					side: "bottom",
-					sideOffset: 8,
-					onKeyDown: handleReplacePanelKeyDown,
-					children: /* @__PURE__ */ jsx(ReplacePanel, {})
-				})]
-			}),
-			/* @__PURE__ */ jsx("button", {
-				className: `${editToolbarButton} ${semanticClassNames.editToolbarButton}`,
-				title: "Duplicate",
-				type: "button",
-				onClick: handleDuplicate,
-				onMouseDown: (e) => {
-					e.preventDefault();
-					e.stopPropagation();
-				},
-				children: /* @__PURE__ */ jsx(CopyPlus, { size: 14 })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				className: `${editToolbarButton} ${semanticClassNames.editToolbarButton}`,
-				title: "Open source",
-				type: "button",
-				onClick: handleOpen,
-				onMouseDown: (e) => {
-					e.preventDefault();
-					e.stopPropagation();
+			/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				className: textButton,
+				icon: false,
+				label: "Alt text",
+				onClick: () => {
+					setInspectorFocus("alt");
+					setMetaOpen(true);
 				},
-				children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+				children: "Alt"
 			}),
-			/* @__PURE__ */ jsx("button", {
-				className: `${editToolbarButton} ${semanticClassNames.editToolbarButton}`,
-				title: "Download",
-				type: "button",
-				onClick: handleDownload,
-				onMouseDown: (e) => {
-					e.preventDefault();
-					e.stopPropagation();
-				},
-				children: /* @__PURE__ */ jsx(Download, { size: 14 })
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: "Replace image",
+				onClick: () => void openReplaceDialog(),
+				children: /* @__PURE__ */ jsx(Replace, {})
 			}),
-			/* @__PURE__ */ jsx("button", {
-				className: `${editToolbarButton} ${semanticClassNames.editToolbarButton} ${editToolbarButtonDanger} ${semanticClassNames.editToolbarButtonDanger}`,
-				title: "Remove image",
-				type: "button",
-				onClick: handleDelete,
-				onMouseDown: (e) => {
-					e.preventDefault();
-					e.stopPropagation();
-				},
-				children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
-			})
+			/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+			/* @__PURE__ */ jsx(ImageActionsMenu, { onOpenChange: setMenuOpen })
 		]
 	});
 }
 //#endregion
 //#region src/ReplacePopover.tsx
 function ReplacePopover() {
-	const [editor] = useLexicalComposerContext();
-	const replaceOpen = useAtomValue(replaceOpenAtom);
-	const replaceUrl = useAtomValue(replaceUrlAtom);
-	const replacePreview = useAtomValue(replacePreviewAtom);
-	const { handleReplaceOpenChange } = useImageActions();
-	const handlePanelKeyDown = (event) => {
-		const shortcut = getEditorHistoryShortcut(event, { isDirty: replaceUrl !== "" || replacePreview !== null });
-		if (!shortcut) return;
-		event.preventDefault();
-		event.stopPropagation();
-		editor.dispatchCommand(shortcut === "undo" ? UNDO_COMMAND : REDO_COMMAND, void 0);
-	};
-	return /* @__PURE__ */ jsxs(Popover, {
-		open: replaceOpen,
-		onOpenChange: handleReplaceOpenChange,
-		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
-			className: `${editPlaceholder} ${semanticClassNames.editPlaceholder}`,
-			onMouseDown: (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-			},
-			children: [/* @__PURE__ */ jsx(ImageIcon, { size: 24 }), /* @__PURE__ */ jsx("span", { children: "Click to add image" })]
-		}), /* @__PURE__ */ jsx(PopoverPanel, {
-			className: editPanel,
-			side: "bottom",
-			sideOffset: 8,
-			onKeyDown: handlePanelKeyDown,
-			children: /* @__PURE__ */ jsx(ReplacePanel, {})
-		})]
+	const [replaceOpen, setReplaceOpen] = useAtom(replaceOpenAtom);
+	const openReplaceDialog = useReplaceImageDialog();
+	useEffect(() => {
+		if (!replaceOpen) return;
+		setReplaceOpen(false);
+		openReplaceDialog();
+	}, [
+		openReplaceDialog,
+		replaceOpen,
+		setReplaceOpen
+	]);
+	return /* @__PURE__ */ jsxs("button", {
+		className: `${editPlaceholder} ${semanticClassNames.editPlaceholder}`,
+		type: "button",
+		onClick: () => void openReplaceDialog(),
+		onMouseDown: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+		},
+		children: [/* @__PURE__ */ jsx(ImageIcon, { size: 24 }), /* @__PURE__ */ jsx("span", { children: "Click to add image" })]
 	});
 }
 //#endregion