@haklex/rich-renderer-image 0.35.0 → 0.36.0

package/dist/ImageEditContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditContext.d.ts","sourceRoot":"","sources":["../src/ImageEditContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvC,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA4DA"}
+{"version":3,"file":"ImageEditContext.d.ts","sourceRoot":"","sources":["../src/ImageEditContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBvC,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAkEA"}

package/dist/ImageEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAqCxE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,+BAQ1D"}
+{"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAuCxE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,+BAQ1D"}

package/dist/ImageLayoutControls.d.ts

@@ -1,3 +1,3 @@
-export declare function ImageSizeControl(): import("react").JSX.Element;
+export { ImageSizeControl } from './ImageSizeControl';
 export declare function ImageLayoutControl(): import("react").JSX.Element;
 //# sourceMappingURL=ImageLayoutControls.d.ts.map

package/dist/ImageLayoutControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageLayoutControls.d.ts","sourceRoot":"","sources":["../src/ImageLayoutControls.tsx"],"names":[],"mappings":"AAyDA,wBAAgB,gBAAgB,gCA6F/B;AAED,wBAAgB,kBAAkB,gCAmCjC"}
+{"version":3,"file":"ImageLayoutControls.d.ts","sourceRoot":"","sources":["../src/ImageLayoutControls.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAiBtD,wBAAgB,kBAAkB,gCAmCjC"}

package/dist/{ImageRenderer-BUWdit_Y.js → ImageRenderer-B3TgOJEU.js}

@@ -1,3 +1,4 @@
+import { imageDisplayCssVars, imageDisplayDataAttr, resolveImageDisplaySize } from "@haklex/rich-editor/nodes";
 import { vars } from "@haklex/rich-editor/static";
 import { useMemo, useRef, useState } from "react";
 import { decodeThumbHash } from "@haklex/rich-editor/renderers";
@@ -61,12 +62,17 @@ var resizeHandleLeft = "_1n94osf10";
 var resizeHandleRight = "_1n94osf11";
 var resizeHandleVisible = "_1n94osf12";
 var controlPanel = "_1n94osf13";
-var sizeSliderWrap = "_1n94osf14";
-var sizeSlider = "_1n94osf15";
-var sizeSliderTick = "_1n94osf16";
-var sizeValue = "_1n94osf17";
-var sizeOption = "_1n94osf18";
-var editToolbarButtonActive = "_1n94osf19";
+var sizePanel = "_1n94osf14";
+var sizePanelRow = "_1n94osf15";
+var sizeReadout = "_1n94osf16";
+var sizeSliderWrap = "_1n94osf17";
+var sizeSlider = "_1n94osf18";
+var sizeSliderTick = "_1n94osf19";
+var sizeValueField = "_1n94osf1a";
+var sizePxInput = "_1n94osf1b";
+var sizeEquiv = "_1n94osf1c";
+var sizeOption = "_1n94osf1d";
+var editToolbarButtonActive = "_1n94osf1e";
 //#endregion
 //#region src/ImageRenderer.tsx
 var frameStateSemanticClass = {
@@ -79,19 +85,26 @@ function getCaptionText(altText, caption) {
 	if (!altText) return void 0;
 	if (altText.startsWith("!") || altText.startsWith("¡")) return altText.slice(1);
 }
-function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbhash, accent, displayWidth, layout, onActivate, ref }) {
+function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbhash, accent, displayWidth, fixedWidth, fixedHeight, layout, onActivate, ref }) {
 	const [state, setState] = useState("loading");
 	const imgRef = useRef(null);
 	const captionText = useMemo(() => getCaptionText(altText, caption$1), [altText, caption$1]);
 	const placeholderUrl = useMemo(() => thumbhash ? decodeThumbHash(thumbhash) : void 0, [thumbhash]);
 	if (!src) return null;
 	const interactive = Boolean(onActivate);
+	const displaySize = resolveImageDisplaySize({
+		displayWidth,
+		fixedWidth,
+		fixedHeight
+	});
+	const fillsFigure = displaySize.mode === "percent" || displaySize.mode === "fixed-width";
 	const frameStyle = {
 		backgroundColor: state !== "loaded" && !placeholderUrl ? accent || vars.color.bgTertiary : "transparent",
 		backgroundImage: placeholderUrl && state !== "loaded" ? `url(${placeholderUrl})` : void 0,
 		backgroundSize: "cover",
-		width: displayWidth !== void 0 ? "100%" : width ? Math.min(width, 1200) : void 0,
+		width: fillsFigure ? "100%" : width ? Math.min(width, 1200) : void 0,
 		maxWidth: "100%",
+		maxHeight: displaySize.mode === "fixed-height" ? `${displaySize.px}px` : void 0,
 		...width && height ? { aspectRatio: `${width} / ${height}` } : {}
 	};
 	const activate = () => {
@@ -102,9 +115,10 @@ function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbh
 		e.preventDefault();
 		activate();
 	};
-	const figureStyle = displayWidth ? { "--rich-image-display-width": `${displayWidth}%` } : void 0;
+	const figureStyle = imageDisplayCssVars(displaySize);
 	return /* @__PURE__ */ jsxs("figure", {
 		className: `${root} ${semanticClassNames.root}`,
+		"data-display": imageDisplayDataAttr(displaySize),
 		"data-layout": layout,
 		ref,
 		style: figureStyle,
@@ -125,11 +139,16 @@ function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbh
 					loading: "lazy",
 					ref: imgRef,
 					src,
-					style: width && height ? {
+					width,
+					style: displaySize.mode === "fixed-height" ? {
+						width: "auto",
+						height: "auto",
+						maxWidth: "100%",
+						maxHeight: "100%"
+					} : width && height ? {
 						height: "100%",
 						objectFit: "cover"
 					} : void 0,
-					width,
 					onError: () => setState("error"),
 					onLoad: () => setState("loaded")
 				}),
@@ -146,4 +165,4 @@ function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbh
 	});
 }
 //#endregion
-export { root as A, panelHint as C, resizeHandleLeft as D, resizeHandle as E, sizeSliderWrap as F, sizeValue as I, sizeOption as M, sizeSlider as N, resizeHandleRight as O, sizeSliderTick as P, loader as S, replaceUploadArea as T, frameEditMode as _, editFieldIcon as a, imageState as b, editPlaceholder as c, editToolbarButtonActive as d, editToolbarButtonDanger as f, frame as g, errorBadge as h, editField as i, semanticClassNames as j, resizeHandleVisible as k, editToolbar as l, editTrigger as m, caption as n, editInput as o, editToolbarVisible as p, controlPanel as r, editPanel as s, ImageRenderer as t, editToolbarButton as u, image as v, replacePreview as w, imageVisible as x, imageDragging as y };
+export { root as A, sizeSliderWrap as B, panelHint as C, resizeHandleLeft as D, resizeHandle as E, sizePanelRow as F, sizePxInput as I, sizeReadout as L, sizeEquiv as M, sizeOption as N, resizeHandleRight as O, sizePanel as P, sizeSlider as R, loader as S, replaceUploadArea as T, sizeValueField as V, frameEditMode as _, editFieldIcon as a, imageState as b, editPlaceholder as c, editToolbarButtonActive as d, editToolbarButtonDanger as f, frame as g, errorBadge as h, editField as i, semanticClassNames as j, resizeHandleVisible as k, editToolbar as l, editTrigger as m, caption as n, editInput as o, editToolbarVisible as p, controlPanel as r, editPanel as s, ImageRenderer as t, editToolbarButton as u, image as v, replacePreview as w, imageVisible as x, imageDragging as y, sizeSliderTick as z };

package/dist/ImageRenderer.d.ts

@@ -4,5 +4,5 @@ export interface ImageRendererInteractiveProps extends ImageRendererProps {
     onActivate?: (target: HTMLElement) => void;
     ref?: Ref<HTMLElement>;
 }
-export declare function ImageRenderer({ src, altText, width, height, caption, thumbhash, accent, displayWidth, layout, onActivate, ref, }: ImageRendererInteractiveProps): import("react").JSX.Element | null;
+export declare function ImageRenderer({ src, altText, width, height, caption, thumbhash, accent, displayWidth, fixedWidth, fixedHeight, layout, onActivate, ref, }: ImageRendererInteractiveProps): import("react").JSX.Element | null;
 //# sourceMappingURL=ImageRenderer.d.ts.map

package/dist/ImageRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../src/ImageRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEzF,OAAO,KAAK,EAAgC,GAAG,EAAE,MAAM,OAAO,CAAC;AAsB/D,MAAM,WAAW,6BAA8B,SAAQ,kBAAkB;IACvE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,SAAS,EACT,MAAM,EACN,YAAY,EACZ,MAAM,EACN,UAAU,EACV,GAAG,GACJ,EAAE,6BAA6B,sCAuF/B"}
+{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../src/ImageRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEzF,OAAO,KAAK,EAAgC,GAAG,EAAE,MAAM,OAAO,CAAC;AAsB/D,MAAM,WAAW,6BAA8B,SAAQ,kBAAkB;IACvE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,SAAS,EACT,MAAM,EACN,YAAY,EACZ,UAAU,EACV,WAAW,EACX,MAAM,EACN,UAAU,EACV,GAAG,GACJ,EAAE,6BAA6B,sCA+F/B"}

package/dist/ImageSizeControl.d.ts

@@ -0,0 +1,2 @@
+export declare function ImageSizeControl(): import("react").JSX.Element;
+//# sourceMappingURL=ImageSizeControl.d.ts.map

package/dist/ImageSizeControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSizeControl.d.ts","sourceRoot":"","sources":["../src/ImageSizeControl.tsx"],"names":[],"mappings":"AAwDA,wBAAgB,gBAAgB,gCA8M/B"}

package/dist/atoms.d.ts

@@ -26,6 +26,12 @@ export declare const accentAtom: import('jotai').PrimitiveAtom<string | undefine
 export declare const displayWidthAtom: import('jotai').PrimitiveAtom<number | undefined> & {
     init: number | undefined;
 };
+export declare const fixedWidthAtom: import('jotai').PrimitiveAtom<number | undefined> & {
+    init: number | undefined;
+};
+export declare const fixedHeightAtom: import('jotai').PrimitiveAtom<number | undefined> & {
+    init: number | undefined;
+};
 export declare const layoutAtom: import('jotai').PrimitiveAtom<ImageLayout | undefined> & {
     init: ImageLayout | undefined;
 };

package/dist/atoms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.d.ts","sourceRoot":"","sources":["../src/atoms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAY3C,eAAO,MAAM,OAAO;;CAAW,CAAC;AAChC,eAAO,MAAM,WAAW;;CAAW,CAAC;AACpC,eAAO,MAAM,SAAS;;CAA6B,CAAC;AACpD,eAAO,MAAM,UAAU;;CAA6B,CAAC;AACrD,eAAO,MAAM,WAAW;;CAA6B,CAAC;AACtD,eAAO,MAAM,aAAa;;CAA6B,CAAC;AACxD,eAAO,MAAM,UAAU;;CAA6B,CAAC;AACrD,eAAO,MAAM,gBAAgB;;CAA6B,CAAC;AAC3D,eAAO,MAAM,UAAU;;CAAkC,CAAC;AAG1D,eAAO,MAAM,aAAa;;CAAkC,CAAC;AAC7D,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,eAAe;;CAAc,CAAC;AAC3C,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,cAAc;;CAAc,CAAC;AAC1C,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,kBAAkB,+BAQ9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;CAAc,CAAC;AAGlD,eAAO,MAAM,WAAW;;CAAW,CAAC;AACpC,eAAO,MAAM,eAAe;;CAAW,CAAC;AACxC,eAAO,MAAM,eAAe;;CAAW,CAAC;AAGxC,eAAO,MAAM,eAAe;;CAA8B,CAAC;AAC3D,eAAO,MAAM,cAAc;;CAAW,CAAC;AACvC,eAAO,MAAM,kBAAkB;;CAA4B,CAAC;AAC5D,eAAO,MAAM,eAAe;WACnB,MAAM;YACL,MAAM;;;eADP,MAAM;gBACL,MAAM;;CACD,CAAC;AAChB,eAAO,MAAM,kBAAkB;;CAAc,CAAC;AAC9C,eAAO,MAAM,gBAAgB;;CAA4B,CAAC;AAG1D,eAAO,MAAM,cAAc;;CAEzB,CAAC;AACH,eAAO,MAAM,gBAAgB;;CAE3B,CAAC;AAGH,eAAO,MAAM,kBAAkB,0CAG7B,CAAC;AAEH,eAAO,MAAM,eAAe,0CAAoE,CAAC;AAEjG,eAAO,MAAM,cAAc,qCAiBzB,CAAC"}
+{"version":3,"file":"atoms.d.ts","sourceRoot":"","sources":["../src/atoms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAY3C,eAAO,MAAM,OAAO;;CAAW,CAAC;AAChC,eAAO,MAAM,WAAW;;CAAW,CAAC;AACpC,eAAO,MAAM,SAAS;;CAA6B,CAAC;AACpD,eAAO,MAAM,UAAU;;CAA6B,CAAC;AACrD,eAAO,MAAM,WAAW;;CAA6B,CAAC;AACtD,eAAO,MAAM,aAAa;;CAA6B,CAAC;AACxD,eAAO,MAAM,UAAU;;CAA6B,CAAC;AACrD,eAAO,MAAM,gBAAgB;;CAA6B,CAAC;AAC3D,eAAO,MAAM,cAAc;;CAA6B,CAAC;AACzD,eAAO,MAAM,eAAe;;CAA6B,CAAC;AAC1D,eAAO,MAAM,UAAU;;CAAkC,CAAC;AAG1D,eAAO,MAAM,aAAa;;CAAkC,CAAC;AAC7D,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,eAAe;;CAAc,CAAC;AAC3C,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,cAAc;;CAAc,CAAC;AAC1C,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,kBAAkB,+BAQ9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;CAAc,CAAC;AAGlD,eAAO,MAAM,WAAW;;CAAW,CAAC;AACpC,eAAO,MAAM,eAAe;;CAAW,CAAC;AACxC,eAAO,MAAM,eAAe;;CAAW,CAAC;AAGxC,eAAO,MAAM,eAAe;;CAA8B,CAAC;AAC3D,eAAO,MAAM,cAAc;;CAAW,CAAC;AACvC,eAAO,MAAM,kBAAkB;;CAA4B,CAAC;AAC5D,eAAO,MAAM,eAAe;WACnB,MAAM;YACL,MAAM;;;eADP,MAAM;gBACL,MAAM;;CACD,CAAC;AAChB,eAAO,MAAM,kBAAkB;;CAAc,CAAC;AAC9C,eAAO,MAAM,gBAAgB;;CAA4B,CAAC;AAG1D,eAAO,MAAM,cAAc;;CAEzB,CAAC;AACH,eAAO,MAAM,gBAAgB;;CAE3B,CAAC;AAGH,eAAO,MAAM,kBAAkB,0CAG7B,CAAC;AAEH,eAAO,MAAM,eAAe,0CAAoE,CAAC;AAEjG,eAAO,MAAM,cAAc,qCAqBzB,CAAC"}

package/dist/image-metrics.d.ts

@@ -0,0 +1,5 @@
+import { ImageDisplayConvertContext, ImageDisplaySize } from '@haklex/rich-editor/nodes';
+export declare function measureImageContainerWidth(trigger: HTMLElement): number | undefined;
+export declare function readImageDisplayContext(trigger: HTMLElement | null, intrinsicWidth?: number, intrinsicHeight?: number): ImageDisplayConvertContext | undefined;
+export declare function applyImageSizePreview(trigger: HTMLElement, layout: string | undefined, next: ImageDisplaySize): void;
+//# sourceMappingURL=image-metrics.d.ts.map

package/dist/image-metrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-metrics.d.ts","sourceRoot":"","sources":["../src/image-metrics.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,0BAA0B,EAE/B,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAInC,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAUnF;AAED,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,cAAc,CAAC,EAAE,MAAM,EACvB,eAAe,CAAC,EAAE,MAAM,GACvB,0BAA0B,GAAG,SAAS,CAaxC;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,IAAI,EAAE,gBAAgB,QA+BvB"}

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import { A as root, D as resizeHandleLeft, E as resizeHandle, F as sizeSliderWrap, I as sizeValue, M as sizeOption, N as sizeSlider, O as resizeHandleRight, P as sizeSliderTick, T as replaceUploadArea, _ 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 } from "./ImageRenderer-BUWdit_Y.js";
+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 { $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";
@@ -8,7 +9,6 @@ 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 { $createImageNode, $isImageNode, sanitizeImageDisplayWidth } from "@haklex/rich-editor/nodes";
 import { useImageUpload } from "@haklex/rich-editor/plugins";
 //#region src/atoms.ts
 function getCaptionText(altText, caption) {
@@ -24,6 +24,8 @@ var captionAtom = atom();
 var thumbhashAtom = atom();
 var accentAtom = atom();
 var displayWidthAtom = atom();
+var fixedWidthAtom = atom();
+var fixedHeightAtom = atom();
 var layoutAtom = atom();
 var loadStateAtom = atom("loading");
 var hoveringAtom = atom(false);
@@ -57,12 +59,16 @@ var frameStyleAtom = atom((get) => {
 	const width = get(widthAtom);
 	const height = get(heightAtom);
 	const displayWidth = get(displayWidthAtom);
+	const fixedWidth = get(fixedWidthAtom);
+	const fixedHeight = get(fixedHeightAtom);
+	const fillsFigure = displayWidth !== void 0 || fixedWidth !== void 0;
 	return {
 		backgroundColor: loadState !== "loaded" && !placeholderUrl ? accent || "#f5f5f5" : "transparent",
 		backgroundImage: placeholderUrl && loadState !== "loaded" ? `url(${placeholderUrl})` : void 0,
 		backgroundSize: "cover",
-		width: displayWidth !== void 0 ? "100%" : width ? Math.min(width, 1200) : void 0,
+		width: fillsFigure ? "100%" : width ? Math.min(width, 1200) : void 0,
 		maxWidth: "100%",
+		maxHeight: fixedHeight !== void 0 ? `${fixedHeight}px` : void 0,
 		...width && height ? { aspectRatio: `${width} / ${height}` } : {}
 	};
 });
@@ -81,6 +87,8 @@ function ImageEditProvider({ props, children }) {
 		s.set(thumbhashAtom, props.thumbhash);
 		s.set(accentAtom, props.accent);
 		s.set(displayWidthAtom, props.displayWidth);
+		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);
@@ -100,6 +108,8 @@ function ImageEditProvider({ props, children }) {
 		store.set(thumbhashAtom, props.thumbhash);
 		store.set(accentAtom, props.accent);
 		store.set(displayWidthAtom, props.displayWidth);
+		store.set(fixedWidthAtom, props.fixedWidth);
+		store.set(fixedHeightAtom, props.fixedHeight);
 		store.set(layoutAtom, props.layout);
 	}, [
 		store,
@@ -111,6 +121,8 @@ function ImageEditProvider({ props, children }) {
 		props.thumbhash,
 		props.accent,
 		props.displayWidth,
+		props.fixedWidth,
+		props.fixedHeight,
 		props.layout
 	]);
 	useEffect(() => {
@@ -226,14 +238,16 @@ function useImageActions() {
 				thumbhash: node.getThumbhash(),
 				accent: node.getAccent(),
 				displayWidth: node.getDisplayWidth(),
+				fixedWidth: node.getFixedWidth(),
+				fixedHeight: node.getFixedHeight(),
 				layout: node.getLayout()
 			});
 			node.insertAfter(copy);
 		});
 	}, [withImageNode]);
-	const handleSetDisplayWidth = useCallback((width) => {
+	const handleSetDisplaySize = useCallback((size) => {
 		withImageNode((node) => {
-			node.setDisplayWidth(width);
+			node.applyDisplaySize(size);
 		});
 	}, [withImageNode]);
 	const handleSetLayout = useCallback((layout) => {
@@ -316,7 +330,7 @@ function useImageActions() {
 		handleDuplicate,
 		handleDownload,
 		handleDelete,
-		handleSetDisplayWidth,
+		handleSetDisplaySize,
 		handleSetLayout
 	};
 }
@@ -404,7 +418,56 @@ function getEditorHistoryShortcut(event, options = {}) {
 	return null;
 }
 //#endregion
-//#region src/ImageLayoutControls.tsx
+//#region src/image-metrics.ts
+function measureImageContainerWidth(trigger) {
+	const container = trigger.closest(".rich-image-wrapper")?.parentElement ?? trigger.parentElement;
+	if (!container) return void 0;
+	const style = getComputedStyle(container);
+	const width = container.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
+	return width > 0 ? width : void 0;
+}
+function readImageDisplayContext(trigger, intrinsicWidth, intrinsicHeight) {
+	if (!trigger) return void 0;
+	const containerWidth = measureImageContainerWidth(trigger);
+	if (!containerWidth) return void 0;
+	const rect = trigger.querySelector(`.${semanticClassNames.frame}`)?.getBoundingClientRect();
+	return {
+		containerWidth,
+		intrinsicWidth,
+		intrinsicHeight,
+		renderedWidth: rect?.width,
+		renderedHeight: rect?.height
+	};
+}
+function applyImageSizePreview(trigger, layout, next) {
+	const figure = trigger.querySelector("figure");
+	const isFloat = layout === "float-left" || layout === "float-right";
+	const blockWrapper = trigger.closest(".rich-image-wrapper");
+	figure?.style.removeProperty("--rich-image-display-width");
+	figure?.style.removeProperty("--rich-image-display-height");
+	const vars = imageDisplayCssVars(next);
+	if (figure && vars) for (const [key, value] of Object.entries(vars)) figure.style.setProperty(key, value);
+	if (!isFloat || !blockWrapper) return;
+	if (next.mode === "percent") {
+		blockWrapper.style.width = `${next.value}%`;
+		blockWrapper.style.maxWidth = "";
+		return;
+	}
+	if (next.mode === "fixed-width") {
+		blockWrapper.style.width = `${next.px}px`;
+		blockWrapper.style.maxWidth = "100%";
+		return;
+	}
+	if (next.mode === "fixed-height") {
+		blockWrapper.style.width = "auto";
+		blockWrapper.style.maxWidth = "100%";
+		return;
+	}
+	blockWrapper.style.width = "";
+	blockWrapper.style.maxWidth = "";
+}
+//#endregion
+//#region src/ImageSizeControl.tsx
 var SIZE_PRESETS = [
 	25,
 	50,
@@ -414,6 +477,23 @@ 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"
+	]
+];
 function snapToPreset(value) {
 	for (const preset of SIZE_PRESETS) if (Math.abs(value - preset) <= SNAP_THRESHOLD) return preset;
 	return value;
@@ -421,35 +501,8 @@ function snapToPreset(value) {
 function tickLeft(preset) {
 	return `calc(6px + ${(preset - SIZE_MIN) / 90} * (100% - 12px))`;
 }
-var LAYOUT_OPTIONS = [
-	{
-		value: void 0,
-		label: "Center",
-		Icon: AlignCenterVertical
-	},
-	{
-		value: "align-left",
-		label: "Align left",
-		Icon: AlignStartVertical
-	},
-	{
-		value: "align-right",
-		label: "Align right",
-		Icon: AlignEndVertical
-	},
-	{
-		value: "float-left",
-		label: "Wrap left",
-		Icon: ArrowLeftToLine
-	},
-	{
-		value: "float-right",
-		label: "Wrap right",
-		Icon: ArrowRightToLine
-	}
-];
-var toolbarButtonClass = `${editToolbarButton} ${semanticClassNames.editToolbarButton}`;
-var stopMouseDown = (e) => {
+var toolbarButtonClass$1 = `${editToolbarButton} ${semanticClassNames.editToolbarButton}`;
+var stopMouseDown$1 = (e) => {
 	e.preventDefault();
 	e.stopPropagation();
 };
@@ -457,56 +510,162 @@ function ImageSizeControl() {
 	const store = useStore();
 	const [sizeOpen, setSizeOpen] = useAtom(sizeOpenAtom);
 	const displayWidth = useAtomValue(displayWidthAtom);
-	const { handleSetDisplayWidth } = useImageActions();
+	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({
+		displayWidth,
+		fixedWidth,
+		fixedHeight
+	});
 	useEffect(() => {
 		setDragValue(null);
-	}, [displayWidth]);
-	const value = dragValue ?? displayWidth ?? SIZE_MAX;
-	const applyPreview = (percent) => {
+		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) return;
-		const layout = store.get(layoutAtom);
-		if (layout === "float-left" || layout === "float-right") {
-			const blockWrapper = trigger.closest(".rich-image-wrapper");
-			if (blockWrapper) blockWrapper.style.width = `${percent}%`;
-		} else trigger.querySelector("figure")?.style.setProperty("--rich-image-display-width", `${percent}%`);
+		if (trigger) applyImageSizePreview(trigger, store.get(layoutAtom), next);
+	};
+	const switchMode = (to) => {
+		if (to === size.mode) return;
+		if (to === "auto") {
+			handleSetDisplaySize({ 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({
+				mode: "percent",
+				value: dragValue
+			}, size.mode, ctx));
+			return;
+		}
+		if (dragValue === (displayWidth ?? SIZE_MAX)) return;
+		handleSetDisplaySize({
+			mode: "percent",
+			value: dragValue
+		});
 	};
 	const handleSliderChange = (event) => {
 		const next = snapToPreset(Number(event.target.value));
 		setDragValue(next);
-		applyPreview(next);
-	};
-	const commit = () => {
-		if (dragValue === null || dragValue === (displayWidth ?? SIZE_MAX)) return;
-		handleSetDisplayWidth(dragValue);
+		if (size.mode === "fixed-width" || size.mode === "fixed-height") {
+			if (!ctx) return;
+			applyPreview(convertImageDisplaySize({
+				mode: "percent",
+				value: next
+			}, size.mode, ctx));
+			return;
+		}
+		applyPreview({
+			mode: "percent",
+			value: next
+		});
 	};
+	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,
+			className: toolbarButtonClass$1,
 			title: "Image size",
-			onMouseDown: stopMouseDown,
+			onMouseDown: stopMouseDown$1,
 			children: /* @__PURE__ */ jsx(Scaling, { size: 14 })
 		}), /* @__PURE__ */ jsxs(PopoverPanel, {
-			className: controlPanel,
+			className: sizePanel,
 			side: "bottom",
 			sideOffset: 8,
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					className: `${sizeOption} ${displayWidth === void 0 ? editToolbarButtonActive : ""}`.trim(),
-					title: "Natural size",
-					type: "button",
-					onMouseDown: stopMouseDown,
-					onClick: () => {
-						handleSetDisplayWidth(void 0);
-						setSizeOpen(false);
-					},
-					children: "Auto"
-				}),
-				/* @__PURE__ */ jsxs("span", {
+			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",
@@ -517,24 +676,54 @@ function ImageSizeControl() {
 						style: { "--fill": fill },
 						type: "range",
 						value,
-						onBlur: commit,
+						onBlur: commitSlider,
 						onChange: handleSliderChange,
-						onKeyUp: commit,
+						onKeyUp: commitSlider,
 						onMouseDown: (e) => e.stopPropagation(),
-						onPointerUp: commit
+						onPointerUp: commitSlider
 					}), SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsx("span", {
 						className: sizeSliderTick,
 						style: { left: tickLeft(preset) }
 					}, preset))]
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: sizeValue,
-					children: displayWidth === void 0 && dragValue === null ? "Auto" : `${value}%`
 				})
-			]
+			})]
 		})]
 	});
 }
+//#endregion
+//#region src/ImageLayoutControls.tsx
+var LAYOUT_OPTIONS = [
+	{
+		value: void 0,
+		label: "Center",
+		Icon: AlignCenterVertical
+	},
+	{
+		value: "align-left",
+		label: "Align left",
+		Icon: AlignStartVertical
+	},
+	{
+		value: "align-right",
+		label: "Align right",
+		Icon: AlignEndVertical
+	},
+	{
+		value: "float-left",
+		label: "Wrap left",
+		Icon: ArrowLeftToLine
+	},
+	{
+		value: "float-right",
+		label: "Wrap right",
+		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);
@@ -826,10 +1015,8 @@ function useImageResize() {
 		const frame = trigger.querySelector(`.${semanticClassNames.frame}`);
 		const figure = trigger.querySelector("figure");
 		const blockWrapper = trigger.closest(".rich-image-wrapper");
-		const container = blockWrapper?.parentElement ?? trigger.parentElement;
-		if (!frame || !figure || !container) return;
-		const containerStyle = getComputedStyle(container);
-		const containerWidth = container.clientWidth - Number.parseFloat(containerStyle.paddingLeft) - Number.parseFloat(containerStyle.paddingRight);
+		if (!frame || !figure) return;
+		const containerWidth = measureImageContainerWidth(trigger);
 		const startWidth = frame.getBoundingClientRect().width;
 		if (!containerWidth || containerWidth <= 0 || !startWidth) return;
 		event.preventDefault();
@@ -845,17 +1032,42 @@ function useImageResize() {
 		store.set(resizingAtom, true);
 		const prevUserSelect = document.body.style.userSelect;
 		document.body.style.userSelect = "none";
-		let percent = sanitizeImageDisplayWidth(startWidth / containerWidth * 100) ?? 100;
+		const startHeight = frame.getBoundingClientRect().height;
+		const aspect = startWidth > 0 && startHeight > 0 ? startHeight / startWidth : void 0;
+		const currentMode = resolveImageDisplaySize({
+			displayWidth: store.get(displayWidthAtom),
+			fixedWidth: store.get(fixedWidthAtom),
+			fixedHeight: store.get(fixedHeightAtom)
+		}).mode;
+		let nextSize = imageDisplaySizeAfterResize(currentMode, startWidth, startHeight, containerWidth);
 		let moved = false;
+		const applyPreview = (size) => {
+			const vars = imageDisplayCssVars(size);
+			figure.style.removeProperty("--rich-image-display-width");
+			figure.style.removeProperty("--rich-image-display-height");
+			if (vars) for (const [key, value] of Object.entries(vars)) figure.style.setProperty(key, value);
+			if (isFloat && blockWrapper) {
+				if (size.mode === "percent") {
+					blockWrapper.style.width = `${size.value}%`;
+					blockWrapper.style.maxWidth = "";
+				} else if (size.mode === "fixed-width") {
+					blockWrapper.style.width = `${size.px}px`;
+					blockWrapper.style.maxWidth = "100%";
+				} else if (size.mode === "fixed-height") {
+					blockWrapper.style.width = "auto";
+					blockWrapper.style.maxWidth = "100%";
+				}
+			}
+		};
 		const handleMove = (moveEvent) => {
 			const rawDelta = moveEvent.clientX - startX;
 			if (!moved && Math.abs(rawDelta) < MOVE_THRESHOLD_PX) return;
 			moved = true;
 			const outward = side === "left" ? -rawDelta : rawDelta;
 			const nextWidth = startWidth + outward * factor;
-			percent = sanitizeImageDisplayWidth(nextWidth / containerWidth * 100) ?? percent;
-			if (isFloat && blockWrapper) blockWrapper.style.width = `${percent}%`;
-			else figure.style.setProperty("--rich-image-display-width", `${percent}%`);
+			const nextHeight = aspect ? nextWidth * aspect : startHeight;
+			nextSize = imageDisplaySizeAfterResize(currentMode, nextWidth, nextHeight, containerWidth);
+			applyPreview(nextSize);
 		};
 		const finish = (commit) => {
 			if (finishRef.current !== finish) return;
@@ -868,7 +1080,7 @@ function useImageResize() {
 			if (!commit || !moved) return;
 			editor.update(() => {
 				const node = $getNearestNodeFromDOMNode(trigger);
-				if ($isImageNode(node)) node.setDisplayWidth(percent);
+				if ($isImageNode(node)) node.applyDisplaySize(nextSize);
 			}, { tag: "skip-scroll-into-view" });
 		};
 		const handleEnd = () => finish(true);
@@ -1105,7 +1317,14 @@ function ImageEditContent() {
 	const setReplaceOpen = useSetAtom(replaceOpenAtom);
 	const setFocusCaptionOnOpen = useSetAtom(focusCaptionOnOpenAtom);
 	const displayWidth = useAtomValue(displayWidthAtom);
+	const fixedWidth = useAtomValue(fixedWidthAtom);
+	const fixedHeight = useAtomValue(fixedHeightAtom);
 	const layout = useAtomValue(layoutAtom);
+	const displaySize = resolveImageDisplaySize({
+		displayWidth,
+		fixedWidth,
+		fixedHeight
+	});
 	const dragLayoutProps = useImageDragLayout();
 	const handleCaptionClick = useCallback((e) => {
 		e.stopPropagation();
@@ -1121,7 +1340,7 @@ function ImageEditContent() {
 		setReplaceOpen,
 		setFocusCaptionOnOpen
 	]);
-	const figureStyle = displayWidth ? { "--rich-image-display-width": `${displayWidth}%` } : void 0;
+	const figureStyle = imageDisplayCssVars(displaySize);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${editTrigger} ${semanticClassNames.editTrigger}`,
 		ref: wrapperRef,
@@ -1129,6 +1348,7 @@ function ImageEditContent() {
 		onMouseLeave: () => setHovering(false),
 		children: [src ? /* @__PURE__ */ jsxs("figure", {
 			className: `${root} ${semanticClassNames.root}`,
+			"data-display": imageDisplayDataAttr(displaySize),
 			"data-layout": layout,
 			style: figureStyle,
 			...dragLayoutProps,
@@ -1143,6 +1363,12 @@ function ImageEditContent() {
 						loading: "lazy",
 						src,
 						width,
+						style: displaySize.mode === "fixed-height" ? {
+							width: "auto",
+							height: "auto",
+							maxWidth: "100%",
+							maxHeight: "100%"
+						} : void 0,
 						onError: () => setLoadState("error"),
 						onLoad: () => setLoadState("loaded")
 					}),

package/dist/rich-renderer-image.css

@@ -1,2 +1,2 @@
-:root{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}:root.dark,[data-theme=dark]{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}._7eow1s0{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._7eow1s1{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.8;--rc-line-height-tight:1.4;--rc-font-family:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._7eow1s2{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#a3a3a3;--rc-quote-bg:#fafafa;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:none;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:2px;--rc-space-sm:4px;--rc-space-md:10px;--rc-space-lg:16px;--rc-space-xl:20px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:14px;--rc-font-size-small:12px;--rc-line-height:1.5;--rc-line-height-tight:1.3;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:3px;--rc-radius-md:6px;--rc-radius-lg:12px}.dark ._7eow1s0,[data-theme=dark] ._7eow1s0,.dark._7eow1s0,[data-theme=dark]._7eow1s0,.dark ._7eow1s1,[data-theme=dark] ._7eow1s1,.dark._7eow1s1,[data-theme=dark]._7eow1s1,.dark ._7eow1s2,[data-theme=dark] ._7eow1s2,.dark._7eow1s2,[data-theme=dark]._7eow1s2{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}@keyframes _1n94osf2{0%{opacity:.16;-webkit-mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 150% 0/400% no-repeat;mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 150% 0/400% no-repeat}to{opacity:1;-webkit-mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 0/400% no-repeat;mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 0/400% no-repeat}}@keyframes _1n94osfb{to{transform:rotate(360deg)}}@keyframes _1n94osfj{0%{opacity:0}to{opacity:1}}._1n94osf0{text-align:center;width:var(--rich-image-display-width,auto);max-width:100%;margin:1.25rem auto}._1n94osf0[data-layout=align-left]{text-align:left;margin-left:0;margin-right:auto}._1n94osf0[data-layout=align-right]{text-align:right;margin-left:auto;margin-right:0}._1n94osf0[data-layout=float-left]{float:left;width:var(--rich-image-display-width,42%);margin:.125rem 1.25rem .875rem 0}._1n94osf0[data-layout=float-right]{float:right;width:var(--rich-image-display-width,42%);margin:.125rem 0 .875rem 1.25rem}.rich-image-wrapper[data-layout^=float] ._1n94osf0{float:none;width:auto;margin:0}._1n94osf1{opacity:.4}.rich-editor__content[data-rich-image-drop-side]{cursor:move}.rich-editor__content[data-rich-image-drop-side=left]{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--rc-accent) 70%, transparent)}.rich-editor__content[data-rich-image-drop-side=right]{box-shadow:inset -3px 0 0 color-mix(in srgb, var(--rc-accent) 70%, transparent)}._1n94osf3{opacity:0;width:100%;max-width:100%;height:auto;display:block;border-radius:0!important}._1n94osf7{opacity:1;animation:.42s _1n94osf2}._1n94osf8{border-radius:var(--rc-radius-md);cursor:zoom-in;justify-content:center;align-items:center;min-height:3rem;transition:transform .25s;display:inline-flex;position:relative;overflow:hidden}._1n94osf8:hover{transform:translateY(-1px)}._1n94osf9{cursor:default}._1n94osf9:hover{transform:none}._1n94osfa{cursor:default}._1n94osfa:hover{transform:none}._1n94osfc{border:2px solid color-mix(in srgb, var(--rc-text-secondary) 45%, transparent);border-top-color:color-mix(in srgb, var(--rc-text) 65%, transparent);border-radius:50%;width:1.65rem;height:1.65rem;animation:.75s linear infinite _1n94osfb;position:absolute}._1n94osfd{white-space:nowrap;font-size:var(--rc-font-size-sm);letter-spacing:-.005em;color:#fff;-webkit-backdrop-filter:blur(20px)saturate(180%);background:#ff3b30a6;border-radius:6px;padding:.3rem .7rem;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._1n94osfe{color:var(--rc-text-tertiary);font-size:var(--rc-font-size-md);margin-top:.5rem;line-height:1.5}._1n94osff{margin:var(--rc-space-md) 0;text-align:center}._1n94osfg{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}._1n94osfh{opacity:0;transition:opacity .3s}._1n94osfi{opacity:1;transition:opacity .3s}._1n94osfk{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfj;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}._1n94osfl{object-fit:contain;border-radius:0;max-width:90vw;max-height:90vh}.rich-image{margin:var(--rc-space-md) 0;text-align:center}.rich-image figcaption{font-size:var(--rc-font-size-md);color:var(--rc-text-secondary);margin-top:var(--rc-space-sm);line-height:var(--rc-line-height-tight)}.rich-image-container{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}.rich-image-hidden{opacity:0;transition:opacity .3s}.rich-image-visible{opacity:1;transition:opacity .3s}.rich-image-zoom-overlay{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfj;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.rich-image-zoom-img{object-fit:contain;border-radius:0;max-width:90vw;max-height:90vh}._1n94osfm{cursor:default;display:block;position:relative}._1n94osfn{border:2px dashed var(--rc-border);border-radius:var(--rc-radius-md);color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:2rem;transition:border-color .2s,color .2s,background-color .2s;display:flex}._1n94osfn:hover{border-color:var(--rc-accent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 8%, transparent)}._1n94osfo{z-index:20;border:1px solid var(--rc-border);background:color-mix(in srgb, var(--rc-bg) 96%, transparent);box-shadow:var(--rc-shadow-top-bar);opacity:0;pointer-events:none;border-radius:10px;align-items:center;gap:4px;padding:4px;transition:opacity .15s;display:inline-flex;position:absolute;top:-2.5rem;left:50%;transform:translate(-50%)}._1n94osfp{opacity:1;pointer-events:auto}._1n94osfq{width:30px;height:30px;color:var(--rc-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:inline-flex}._1n94osfq:hover{color:var(--rc-text);background-color:var(--rc-fill-secondary)}._1n94osfr:hover{color:var(--rc-alert-caution);background-color:color-mix(in srgb, var(--rc-alert-caution) 12%, transparent)}._1n94osfs{width:360px;font-size:var(--rc-font-size-base);font-family:var(--rc-font-family);z-index:30;flex-direction:column;gap:8px;padding:12px;display:flex;position:relative}._1n94osft{background-color:var(--rc-bg-secondary);border-radius:6px;align-items:center;gap:8px;min-width:0;padding:6px 10px;display:flex}._1n94osfu{color:var(--rc-text-secondary);flex-shrink:0}._1n94osfv{-webkit-appearance:none;appearance:none;color:inherit;font-size:var(--rc-font-size-sm);background-color:#0000;border:none;outline:none;flex:1;min-width:0;padding:0}._1n94osfv::placeholder{color:var(--rc-text-secondary)}._1n94osfw{border-radius:var(--rc-radius-md);border:1.5px dashed var(--rc-border);min-height:138px;color:var(--rc-text-secondary);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.45rem;transition:border-color .15s,background-color .15s;display:flex}._1n94osfw:hover{border-color:color-mix(in srgb, var(--rc-accent) 45%, transparent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 7%, transparent)}._1n94osfx{border-radius:var(--rc-radius-md);border:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 2%, transparent);overflow:hidden}._1n94osfx img{object-fit:cover;width:100%;max-height:188px;display:block}._1n94osfy{color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);align-items:center;gap:.4rem;display:inline-flex}._1n94osfz{cursor:ew-resize;touch-action:none;opacity:0;z-index:10;background:#ffffffeb;border:1px solid #0000002e;border-radius:9999px;width:6px;height:36px;max-height:50%;transition:opacity .15s;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 3px #00000040}._1n94osf10{left:6px}._1n94osf11{right:6px}._1n94osf12{opacity:1}._1n94osf13{font-family:var(--rc-font-family);z-index:30;align-items:center;gap:4px;padding:4px;display:flex}._1n94osf13._1n94osf13{width:-moz-fit-content;width:fit-content}._1n94osf14{align-items:center;width:132px;height:24px;display:flex;position:relative}._1n94osf15{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%;height:24px;margin:0}._1n94osf15::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf15::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--rc-bg);border:1px solid var(--rc-border);cursor:ew-resize;border-radius:50%;width:12px;height:12px;margin-top:-4.5px;box-shadow:0 1px 3px #0003}._1n94osf15::-moz-range-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf15::-moz-range-thumb{-webkit-appearance:none;appearance:none;background-color:var(--rc-bg);border:1px solid var(--rc-border);cursor:ew-resize;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 3px #0003}._1n94osf16{background-color:var(--rc-bg);pointer-events:none;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;transform:translate(-50%,-50%)}._1n94osf17{text-align:right;min-width:34px;font-size:var(--rc-font-size-xs);font-variant-numeric:tabular-nums;color:var(--rc-text-secondary)}._1n94osf18{height:26px;color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0 8px;font-weight:500;transition:background-color .15s,color .15s;display:inline-flex}._1n94osf18:hover,._1n94osf19{color:var(--rc-text);background-color:var(--rc-fill-secondary)}@media (max-width:640px){._1n94osf0[data-layout=float-left],._1n94osf0[data-layout=float-right]{float:none;width:auto;margin:1.25rem auto}}
+:root{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}:root.dark,[data-theme=dark]{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}._7eow1s0{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._7eow1s1{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.8;--rc-line-height-tight:1.4;--rc-font-family:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._7eow1s2{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#a3a3a3;--rc-quote-bg:#fafafa;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:none;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:2px;--rc-space-sm:4px;--rc-space-md:10px;--rc-space-lg:16px;--rc-space-xl:20px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:14px;--rc-font-size-small:12px;--rc-line-height:1.5;--rc-line-height-tight:1.3;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:3px;--rc-radius-md:6px;--rc-radius-lg:12px}.dark ._7eow1s0,[data-theme=dark] ._7eow1s0,.dark._7eow1s0,[data-theme=dark]._7eow1s0,.dark ._7eow1s1,[data-theme=dark] ._7eow1s1,.dark._7eow1s1,[data-theme=dark]._7eow1s1,.dark ._7eow1s2,[data-theme=dark] ._7eow1s2,.dark._7eow1s2,[data-theme=dark]._7eow1s2{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}@keyframes _1n94osf2{0%{opacity:.16;-webkit-mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 150% 0/400% no-repeat;mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 150% 0/400% no-repeat}to{opacity:1;-webkit-mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 0/400% no-repeat;mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 0/400% no-repeat}}@keyframes _1n94osfb{to{transform:rotate(360deg)}}@keyframes _1n94osfj{0%{opacity:0}to{opacity:1}}._1n94osf0{text-align:center;width:var(--rich-image-display-width,auto);max-width:100%;max-height:var(--rich-image-display-height,none);margin:1.25rem auto}._1n94osf0[data-layout=align-left]{text-align:left;margin-left:0;margin-right:auto}._1n94osf0[data-layout=align-right]{text-align:right;margin-left:auto;margin-right:0}._1n94osf0[data-layout=float-left]{float:left;width:var(--rich-image-display-width,42%);margin:.125rem 1.25rem .875rem 0}._1n94osf0[data-layout=float-right]{float:right;width:var(--rich-image-display-width,42%);margin:.125rem 0 .875rem 1.25rem}._1n94osf0[data-display=fixed-height],._1n94osf0[data-layout=float-left][data-display=fixed-height],._1n94osf0[data-layout=float-right][data-display=fixed-height]{width:auto}.rich-image-wrapper[data-layout^=float] ._1n94osf0{float:none;width:auto;margin:0}._1n94osf1{opacity:.4}.rich-editor__content[data-rich-image-drop-side]{cursor:move}.rich-editor__content[data-rich-image-drop-side=left]{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--rc-accent) 70%, transparent)}.rich-editor__content[data-rich-image-drop-side=right]{box-shadow:inset -3px 0 0 color-mix(in srgb, var(--rc-accent) 70%, transparent)}._1n94osf3{opacity:0;width:100%;max-width:100%;height:auto;display:block;border-radius:0!important}._1n94osf7{opacity:1;animation:.42s _1n94osf2}._1n94osf8{border-radius:var(--rc-radius-md);cursor:zoom-in;justify-content:center;align-items:center;min-height:3rem;transition:transform .25s;display:inline-flex;position:relative;overflow:hidden}._1n94osf8:hover{transform:translateY(-1px)}._1n94osf9{cursor:default}._1n94osf9:hover{transform:none}._1n94osfa{cursor:default}._1n94osfa:hover{transform:none}._1n94osf0[data-display=fixed-height] ._1n94osf3{width:auto;max-width:100%;height:auto;max-height:var(--rich-image-display-height)}._1n94osf0[data-display=fixed-height] ._1n94osf8{width:auto;max-width:100%;max-height:var(--rich-image-display-height)}._1n94osfc{border:2px solid color-mix(in srgb, var(--rc-text-secondary) 45%, transparent);border-top-color:color-mix(in srgb, var(--rc-text) 65%, transparent);border-radius:50%;width:1.65rem;height:1.65rem;animation:.75s linear infinite _1n94osfb;position:absolute}._1n94osfd{white-space:nowrap;font-size:var(--rc-font-size-sm);letter-spacing:-.005em;color:#fff;-webkit-backdrop-filter:blur(20px)saturate(180%);background:#ff3b30a6;border-radius:6px;padding:.3rem .7rem;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._1n94osfe{color:var(--rc-text-tertiary);font-size:var(--rc-font-size-md);margin-top:.5rem;line-height:1.5}._1n94osff{margin:var(--rc-space-md) 0;text-align:center}._1n94osfg{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}._1n94osfh{opacity:0;transition:opacity .3s}._1n94osfi{opacity:1;transition:opacity .3s}._1n94osfk{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfj;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}._1n94osfl{object-fit:contain;border-radius:0;max-width:90vw;max-height:90vh}.rich-image{margin:var(--rc-space-md) 0;text-align:center}.rich-image figcaption{font-size:var(--rc-font-size-md);color:var(--rc-text-secondary);margin-top:var(--rc-space-sm);line-height:var(--rc-line-height-tight)}.rich-image-container{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}.rich-image-hidden{opacity:0;transition:opacity .3s}.rich-image-visible{opacity:1;transition:opacity .3s}.rich-image-zoom-overlay{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfj;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.rich-image-zoom-img{object-fit:contain;border-radius:0;max-width:90vw;max-height:90vh}._1n94osfm{cursor:default;display:block;position:relative}._1n94osfn{border:2px dashed var(--rc-border);border-radius:var(--rc-radius-md);color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:2rem;transition:border-color .2s,color .2s,background-color .2s;display:flex}._1n94osfn:hover{border-color:var(--rc-accent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 8%, transparent)}._1n94osfo{z-index:20;border:1px solid var(--rc-border);background:color-mix(in srgb, var(--rc-bg) 96%, transparent);box-shadow:var(--rc-shadow-top-bar);opacity:0;pointer-events:none;border-radius:10px;align-items:center;gap:4px;padding:4px;transition:opacity .15s;display:inline-flex;position:absolute;top:-2.5rem;left:50%;transform:translate(-50%)}._1n94osfp{opacity:1;pointer-events:auto}._1n94osfq{width:30px;height:30px;color:var(--rc-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:inline-flex}._1n94osfq:hover{color:var(--rc-text);background-color:var(--rc-fill-secondary)}._1n94osfr:hover{color:var(--rc-alert-caution);background-color:color-mix(in srgb, var(--rc-alert-caution) 12%, transparent)}._1n94osfs{width:360px;font-size:var(--rc-font-size-base);font-family:var(--rc-font-family);z-index:30;flex-direction:column;gap:8px;padding:12px;display:flex;position:relative}._1n94osft{background-color:var(--rc-bg-secondary);border-radius:6px;align-items:center;gap:8px;min-width:0;padding:6px 10px;display:flex}._1n94osfu{color:var(--rc-text-secondary);flex-shrink:0}._1n94osfv{-webkit-appearance:none;appearance:none;color:inherit;font-size:var(--rc-font-size-sm);background-color:#0000;border:none;outline:none;flex:1;min-width:0;padding:0}._1n94osfv::placeholder{color:var(--rc-text-secondary)}._1n94osfw{border-radius:var(--rc-radius-md);border:1.5px dashed var(--rc-border);min-height:138px;color:var(--rc-text-secondary);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.45rem;transition:border-color .15s,background-color .15s;display:flex}._1n94osfw:hover{border-color:color-mix(in srgb, var(--rc-accent) 45%, transparent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 7%, transparent)}._1n94osfx{border-radius:var(--rc-radius-md);border:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 2%, transparent);overflow:hidden}._1n94osfx img{object-fit:cover;width:100%;max-height:188px;display:block}._1n94osfy{color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);align-items:center;gap:.4rem;display:inline-flex}._1n94osfz{cursor:ew-resize;touch-action:none;opacity:0;z-index:10;background:#ffffffeb;border:1px solid #0000002e;border-radius:9999px;width:6px;height:36px;max-height:50%;transition:opacity .15s;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 3px #00000040}._1n94osf10{left:6px}._1n94osf11{right:6px}._1n94osf12{opacity:1}._1n94osf13{font-family:var(--rc-font-family);z-index:30;align-items:center;gap:4px;padding:4px;display:flex}._1n94osf13._1n94osf13{width:-moz-fit-content;width:fit-content}._1n94osf14{font-family:var(--rc-font-family);z-index:30;flex-direction:column;align-items:stretch;gap:2px;padding:4px;display:flex}._1n94osf14._1n94osf14{width:272px}._1n94osf15{align-items:center;gap:4px;min-height:26px;display:flex}._1n94osf16{flex-shrink:0;align-items:center;gap:6px;margin-left:auto;padding-left:8px;display:flex}._1n94osf17{flex:1;align-items:center;height:24px;display:flex;position:relative}._1n94osf18{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%;height:24px;margin:0}._1n94osf18::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf18::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--rc-bg);border:1px solid var(--rc-border);cursor:ew-resize;border-radius:50%;width:12px;height:12px;margin-top:-4.5px;box-shadow:0 1px 3px #0003}._1n94osf18::-moz-range-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf18::-moz-range-thumb{-webkit-appearance:none;appearance:none;background-color:var(--rc-bg);border:1px solid var(--rc-border);cursor:ew-resize;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 3px #0003}._1n94osf19{background-color:var(--rc-bg);pointer-events:none;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;transform:translate(-50%,-50%)}._1n94osf1a{box-sizing:border-box;border:1px solid var(--rc-border);background-color:var(--rc-bg-secondary);width:52px;height:26px;color:var(--rc-text);font-size:var(--rc-font-size-xs);font-variant-numeric:tabular-nums;text-align:center;border-radius:6px;justify-content:center;align-items:center;line-height:24px;display:inline-flex;overflow:hidden}._1n94osf1b{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;outline:none;min-width:0;padding:0}._1n94osf1b:focus{border-color:var(--rc-text-secondary)}._1n94osf1c{box-sizing:border-box;text-align:right;width:48px;font-size:var(--rc-font-size-xs);font-variant-numeric:tabular-nums;color:var(--rc-text-tertiary)}._1n94osf1d{height:26px;color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0 8px;font-weight:500;transition:background-color .15s,color .15s;display:inline-flex}._1n94osf1d:hover,._1n94osf1e{color:var(--rc-text);background-color:var(--rc-fill-secondary)}@media (max-width:640px){._1n94osf0[data-layout=float-left],._1n94osf0[data-layout=float-right]{float:none;width:auto;margin:1.25rem auto}}
 /*$vite$:1*/

package/dist/static.mjs

@@ -1,2 +1,2 @@
-import { t as ImageRenderer } from "./ImageRenderer-BUWdit_Y.js";
+import { t as ImageRenderer } from "./ImageRenderer-B3TgOJEU.js";
 export { ImageRenderer };

package/dist/styles.css.d.ts

@@ -66,10 +66,15 @@ export declare const resizeHandleLeft: string;
 export declare const resizeHandleRight: string;
 export declare const resizeHandleVisible: string;
 export declare const controlPanel: string;
+export declare const sizePanel: string;
+export declare const sizePanelRow: string;
+export declare const sizeReadout: string;
 export declare const sizeSliderWrap: string;
 export declare const sizeSlider: string;
 export declare const sizeSliderTick: string;
-export declare const sizeValue: string;
+export declare const sizeValueField: string;
+export declare const sizePxInput: string;
+export declare const sizeEquiv: string;
 export declare const sizeOption: string;
 export declare const editToolbarButtonActive: string;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAC;AAIX,eAAO,MAAM,IAAI,QAsCf,CAAC;AAWH,eAAO,MAAM,aAAa,QAExB,CAAC;AAyBH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAEH,eAAO,MAAM,UAAU,gDAIrB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAOxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAIH,eAAO,MAAM,MAAM,QAQjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAerB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;CAO5B,CAAC;AAgCX,eAAO,MAAM,WAAW,QAA2B,CAAC;AACpD,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAC9D,eAAO,MAAM,aAAa,QAA6B,CAAC;AACxD,eAAO,MAAM,cAAc,QAA8B,CAAC;AA0B1D,eAAO,MAAM,kBAAkB,QAAkC,CAAC;AAClE,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAU9D,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,eAAe,QAoB1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAiBtB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAkB5B,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAOlC,CAAC;AAEH,eAAO,MAAM,SAAS,QAUpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,SAAS,QAepB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAmB5B,CAAC;AAEH,eAAO,MAAM,cAAc,QAKzB,CAAC;AASH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,YAAY,QAgBvB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAAqB,CAAC;AACnD,eAAO,MAAM,iBAAiB,QAAsB,CAAC;AAErD,eAAO,MAAM,mBAAmB,QAE9B,CAAC;AAEH,eAAO,MAAM,YAAY,QAOvB,CAAC;AAQH,eAAO,MAAM,cAAc,QAMzB,CAAC;AAaH,eAAO,MAAM,UAAU,QAwBrB,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,UAAU,QAoBrB,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAGlC,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAC;AAIX,eAAO,MAAM,IAAI,QA8Cf,CAAC;AAWH,eAAO,MAAM,aAAa,QAExB,CAAC;AAyBH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAEH,eAAO,MAAM,UAAU,gDAIrB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAOxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAiBH,eAAO,MAAM,MAAM,QAQjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAerB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;CAO5B,CAAC;AAgCX,eAAO,MAAM,WAAW,QAA2B,CAAC;AACpD,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAC9D,eAAO,MAAM,aAAa,QAA6B,CAAC;AACxD,eAAO,MAAM,cAAc,QAA8B,CAAC;AA0B1D,eAAO,MAAM,kBAAkB,QAAkC,CAAC;AAClE,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAU9D,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,eAAe,QAoB1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAiBtB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAkB5B,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAOlC,CAAC;AAEH,eAAO,MAAM,SAAS,QAUpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,SAAS,QAepB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAmB5B,CAAC;AAEH,eAAO,MAAM,cAAc,QAKzB,CAAC;AASH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,YAAY,QAgBvB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAAqB,CAAC;AACnD,eAAO,MAAM,iBAAiB,QAAsB,CAAC;AAErD,eAAO,MAAM,mBAAmB,QAE9B,CAAC;AAEH,eAAO,MAAM,YAAY,QAOvB,CAAC;AAQH,eAAO,MAAM,SAAS,QAQpB,CAAC;AAMH,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,cAAc,QAMzB,CAAC;AAaH,eAAO,MAAM,UAAU,QAwBrB,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,cAAc,QAgBzB,CAAC;AAEH,eAAO,MAAM,WAAW,QAWtB,CAAC;AAEH,eAAO,MAAM,SAAS,QAOpB,CAAC;AAEH,eAAO,MAAM,UAAU,QAoBrB,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAGlC,CAAC"}

package/dist/useImageActions.d.ts

@@ -1,4 +1,4 @@
-import { ImageLayout } from '@haklex/rich-editor/nodes';
+import { ImageDisplaySize, ImageLayout } from '@haklex/rich-editor/nodes';
 export declare function useImageActions(): {
     commitMeta: () => void;
     closeReplacePanel: () => void;
@@ -10,7 +10,7 @@ export declare function useImageActions(): {
     handleDuplicate: () => void;
     handleDownload: () => void;
     handleDelete: () => void;
-    handleSetDisplayWidth: (width?: number) => void;
+    handleSetDisplaySize: (size: ImageDisplaySize) => void;
     handleSetLayout: (layout?: ImageLayout) => void;
 };
 //# sourceMappingURL=useImageActions.d.ts.map

package/dist/useImageActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useImageActions.d.ts","sourceRoot":"","sources":["../src/useImageActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAqD7D,wBAAgB,eAAe;;;8BAwGd,IAAI,GAAG,IAAI;;;wCA6Db,OAAO;;;;;oCA/ET,MAAM;+BASL,WAAW;EA2FxB"}
+{"version":3,"file":"useImageActions.d.ts","sourceRoot":"","sources":["../src/useImageActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAqD/E,wBAAgB,eAAe;;;8BA0Gd,IAAI,GAAG,IAAI;;;wCA6Db,OAAO;;;;;iCA/EX,gBAAgB;+BASb,WAAW;EA2FxB"}

package/dist/useImageResize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useImageResize.d.ts","sourceRoot":"","sources":["../src/useImageResize.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAI1C,wBAAgB,cAAc;+BAQlB,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,QAAQ,UAAU;EAqF5D"}
+{"version":3,"file":"useImageResize.d.ts","sourceRoot":"","sources":["../src/useImageResize.ts"],"names":[],"mappings":"AAsBA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAI1C,wBAAgB,cAAc;+BAQlB,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,QAAQ,UAAU;EA+G5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-image",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Image renderer with blurhash",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "react-dom": "^19.2.8",
     "typescript": "^7.0.2",
     "unplugin-dts": "^1.0.3",
-    "vite": "^8.2.0"
+    "vite": "^8.2.1"
   },
   "peerDependencies": {
     "@lexical/react": "^0.49.0",
@@ -45,9 +45,9 @@
     "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "@haklex/rich-editor": "^0.35.0",
-    "@haklex/rich-editor-ui": "^0.35.0",
-    "@haklex/rich-style-token": "^0.35.0"
+    "@haklex/rich-editor": "^0.36.0",
+    "@haklex/rich-style-token": "^0.36.0",
+    "@haklex/rich-editor-ui": "^0.36.0"
   },
   "publishConfig": {
     "access": "public"