@haklex/rich-renderer-image 0.22.1 → 0.24.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;AAoBvC,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAsDA"}
+{"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,2CA4DA"}

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;AAgCxE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}
+{"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAoCxE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}

package/dist/ImageEditToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditToolbar.d.ts","sourceRoot":"","sources":["../src/ImageEditToolbar.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,gBAAgB,4CA0J/B"}
+{"version":3,"file":"ImageEditToolbar.d.ts","sourceRoot":"","sources":["../src/ImageEditToolbar.tsx"],"names":[],"mappings":"AA0BA,wBAAgB,gBAAgB,4CA6J/B"}

package/dist/ImageLayoutControls.d.ts

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

package/dist/ImageLayoutControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageLayoutControls.d.ts","sourceRoot":"","sources":["../src/ImageLayoutControls.tsx"],"names":[],"mappings":"AAyDA,wBAAgB,gBAAgB,4CA6F/B;AAED,wBAAgB,kBAAkB,4CAmCjC"}

package/dist/{ImageRenderer-BihkEC_w.js → ImageRenderer-ew0e3cUJ.js}

@@ -25,7 +25,8 @@ var semanticClassNames = {
 	editInput: "rr-image-edit-input",
 	replaceUploadArea: "rr-image-replace-upload-area",
 	replacePreview: "rr-image-replace-preview",
-	panelHint: "rr-image-panel-hint"
+	panelHint: "rr-image-panel-hint",
+	resizeHandle: "rr-image-resize-handle"
 };
 var root = "_1n94osf0";
 var image = "_1n94osf2";
@@ -54,6 +55,17 @@ var editInput = "_1n94osfu";
 var replaceUploadArea = "_1n94osfv";
 var replacePreview = "_1n94osfw";
 var panelHint = "_1n94osfx";
+var resizeHandle = "_1n94osfy";
+var resizeHandleLeft = "_1n94osfz";
+var resizeHandleRight = "_1n94osf10";
+var resizeHandleVisible = "_1n94osf11";
+var controlPanel = "_1n94osf12";
+var sizeSliderWrap = "_1n94osf13";
+var sizeSlider = "_1n94osf14";
+var sizeSliderTick = "_1n94osf15";
+var sizeValue = "_1n94osf16";
+var sizeOption = "_1n94osf17";
+var editToolbarButtonActive = "_1n94osf18";
 //#endregion
 //#region src/ImageRenderer.tsx
 var frameStateSemanticClass = {
@@ -66,7 +78,7 @@ 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, onActivate, ref }) {
+function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbhash, accent, displayWidth, layout, onActivate, ref }) {
 	const [state, setState] = useState("loading");
 	const imgRef = useRef(null);
 	const captionText = useMemo(() => getCaptionText(altText, caption$1), [altText, caption$1]);
@@ -89,9 +101,12 @@ function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbh
 		e.preventDefault();
 		activate();
 	};
+	const figureStyle = displayWidth ? { "--rich-image-display-width": `${displayWidth}%` } : void 0;
 	return /* @__PURE__ */ jsxs("figure", {
 		className: `${root} ${semanticClassNames.root}`,
+		"data-layout": layout,
 		ref,
+		style: figureStyle,
 		children: [/* @__PURE__ */ jsxs("div", {
 			"aria-label": interactive ? `Open image: ${altText || "image"}` : void 0,
 			className: `${frame} ${interactive ? "" : frameStatic} ${semanticClassNames.frame} ${imageState[state]} ${frameStateSemanticClass[state]}`.trim(),
@@ -130,4 +145,4 @@ function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbh
 	});
 }
 //#endregion
-export { root as C, replaceUploadArea as S, imageState as _, editInput as a, panelHint as b, editToolbar as c, editToolbarVisible as d, editTrigger as f, image as g, frameEditMode as h, editFieldIcon as i, editToolbarButton as l, frame as m, caption as n, editPanel as o, errorBadge as p, editField as r, editPlaceholder as s, ImageRenderer as t, editToolbarButtonDanger as u, imageVisible as v, semanticClassNames as w, replacePreview as x, loader as y };
+export { semanticClassNames as A, replacePreview as C, resizeHandleRight as D, resizeHandleLeft as E, sizeValue as F, sizeSlider as M, sizeSliderTick as N, resizeHandleVisible as O, sizeSliderWrap as P, panelHint as S, resizeHandle as T, frameEditMode as _, editFieldIcon as a, imageVisible as b, editPlaceholder as c, editToolbarButtonActive as d, editToolbarButtonDanger as f, frame as g, errorBadge as h, editField as i, sizeOption as j, root 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, replaceUploadArea as w, loader as x, imageState as y };

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, onActivate, ref, }: ImageRendererInteractiveProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ImageRenderer({ src, altText, width, height, caption, thumbhash, accent, displayWidth, layout, onActivate, ref, }: ImageRendererInteractiveProps): import("react/jsx-runtime").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,UAAU,EACV,GAAG,GACJ,EAAE,6BAA6B,kDA8E/B"}
+{"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,kDAuF/B"}

package/dist/ResizeHandles.d.ts

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

package/dist/ResizeHandles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandles.d.ts","sourceRoot":"","sources":["../src/ResizeHandles.tsx"],"names":[],"mappings":"AAMA,wBAAgB,aAAa,4CAiB5B"}

package/dist/atoms.d.ts

@@ -1,3 +1,4 @@
+import { ImageLayout } from '@haklex/rich-editor/nodes';
 import { CSSProperties, RefObject } from 'react';
 export type ImageLoadState = 'loading' | 'loaded' | 'error';
 export type ReplaceMode = 'upload' | 'url';
@@ -22,6 +23,12 @@ export declare const thumbhashAtom: import('jotai').PrimitiveAtom<string | undef
 export declare const accentAtom: import('jotai').PrimitiveAtom<string | undefined> & {
     init: string | undefined;
 };
+export declare const displayWidthAtom: import('jotai').PrimitiveAtom<number | undefined> & {
+    init: number | undefined;
+};
+export declare const layoutAtom: import('jotai').PrimitiveAtom<ImageLayout | undefined> & {
+    init: ImageLayout | undefined;
+};
 export declare const loadStateAtom: import('jotai').PrimitiveAtom<ImageLoadState> & {
     init: ImageLoadState;
 };
@@ -34,6 +41,15 @@ export declare const metaOpenAtom: import('jotai').PrimitiveAtom<boolean> & {
 export declare const replaceOpenAtom: import('jotai').PrimitiveAtom<boolean> & {
     init: boolean;
 };
+export declare const sizeOpenAtom: import('jotai').PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+export declare const layoutOpenAtom: import('jotai').PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+export declare const resizingAtom: import('jotai').PrimitiveAtom<boolean> & {
+    init: boolean;
+};
 export declare const toolbarVisibleAtom: import('jotai').Atom<boolean>;
 export declare const focusCaptionOnOpenAtom: import('jotai').PrimitiveAtom<boolean> & {
     init: boolean;

package/dist/atoms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.d.ts","sourceRoot":"","sources":["../src/atoms.ts"],"names":[],"mappings":"AAEA,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;AAGrD,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,kBAAkB,+BAE9B,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,qCAgBzB,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,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,qCAgBzB,CAAC"}

package/dist/index.mjs

@@ -1,14 +1,14 @@
-import { C as root, S as replaceUploadArea, _ as imageState, a as editInput, c as editToolbar, d as editToolbarVisible, f as editTrigger, g as image, h as frameEditMode, i as editFieldIcon, l as editToolbarButton, m as frame, o as editPanel, r as editField, s as editPlaceholder, t as ImageRenderer, u as editToolbarButtonDanger, v as imageVisible, w as semanticClassNames } from "./ImageRenderer-BihkEC_w.js";
+import { A as semanticClassNames, D as resizeHandleRight, E as resizeHandleLeft, F as sizeValue, M as sizeSlider, N as sizeSliderTick, O as resizeHandleVisible, P as sizeSliderWrap, T as resizeHandle, _ as frameEditMode, a as editFieldIcon, b as imageVisible, c as editPlaceholder, d as editToolbarButtonActive, f as editToolbarButtonDanger, g as frame, i as editField, j as sizeOption, k as root, 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, w as replaceUploadArea, y as imageState } from "./ImageRenderer-ew0e3cUJ.js";
 import { useRendererMode } from "@haklex/rich-editor/static";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { Provider, atom, createStore, useAtomValue, useSetAtom, useStore } from "jotai";
+import { Provider, atom, createStore, useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { computeImageMeta, decodeThumbHash } from "@haklex/rich-editor/renderers";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ActionBar, ActionButton, Popover, PopoverPanel, PopoverTrigger, SegmentedControl } from "@haklex/rich-editor-ui";
 import { $getNearestNodeFromDOMNode, REDO_COMMAND, UNDO_COMMAND } from "lexical";
-import { Captions, Copy, Download, ExternalLink, ImageIcon, Loader2, Replace, Trash2, Type, Upload } from "lucide-react";
-import { $createImageNode, $isImageNode } from "@haklex/rich-editor/nodes";
+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) {
@@ -23,11 +23,16 @@ var heightAtom = atom();
 var captionAtom = atom();
 var thumbhashAtom = atom();
 var accentAtom = atom();
+var displayWidthAtom = atom();
+var layoutAtom = atom();
 var loadStateAtom = atom("loading");
 var hoveringAtom = atom(false);
 var metaOpenAtom = atom(false);
 var replaceOpenAtom = atom(false);
-var toolbarVisibleAtom = atom((get) => get(hoveringAtom) || get(metaOpenAtom) || get(replaceOpenAtom));
+var sizeOpenAtom = atom(false);
+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("");
@@ -74,6 +79,8 @@ function ImageEditProvider({ props, children }) {
 		s.set(captionAtom, props.caption);
 		s.set(thumbhashAtom, props.thumbhash);
 		s.set(accentAtom, props.accent);
+		s.set(displayWidthAtom, props.displayWidth);
+		s.set(layoutAtom, props.layout);
 		s.set(editSrcAtom, props.src);
 		s.set(editAltTextAtom, props.altText);
 		s.set(editCaptionAtom, props.caption || "");
@@ -91,6 +98,8 @@ function ImageEditProvider({ props, children }) {
 		store.set(captionAtom, props.caption);
 		store.set(thumbhashAtom, props.thumbhash);
 		store.set(accentAtom, props.accent);
+		store.set(displayWidthAtom, props.displayWidth);
+		store.set(layoutAtom, props.layout);
 	}, [
 		store,
 		props.src,
@@ -99,7 +108,9 @@ function ImageEditProvider({ props, children }) {
 		props.height,
 		props.caption,
 		props.thumbhash,
-		props.accent
+		props.accent,
+		props.displayWidth,
+		props.layout
 	]);
 	useEffect(() => {
 		store.set(editSrcAtom, props.src);
@@ -156,7 +167,7 @@ function useImageActions() {
 		editor.update(() => {
 			const node = $getNearestNodeFromDOMNode(wrapperRef.current);
 			if ($isImageNode(node)) updater(node);
-		});
+		}, { tag: "skip-scroll-into-view" });
 	}, [editor, store]);
 	const closeReplacePanel = useCallback(() => {
 		store.set(replaceOpenAtom, false);
@@ -212,11 +223,23 @@ function useImageActions() {
 				height: node.getHeight(),
 				caption: node.getCaption(),
 				thumbhash: node.getThumbhash(),
-				accent: node.getAccent()
+				accent: node.getAccent(),
+				displayWidth: node.getDisplayWidth(),
+				layout: node.getLayout()
 			});
 			node.insertAfter(copy);
 		});
 	}, [withImageNode]);
+	const handleSetDisplayWidth = useCallback((width) => {
+		withImageNode((node) => {
+			node.setDisplayWidth(width);
+		});
+	}, [withImageNode]);
+	const handleSetLayout = useCallback((layout) => {
+		withImageNode((node) => {
+			node.setLayout(layout);
+		});
+	}, [withImageNode]);
 	return {
 		commitMeta,
 		closeReplacePanel,
@@ -291,7 +314,9 @@ function useImageActions() {
 		handleOpen,
 		handleDuplicate,
 		handleDownload,
-		handleDelete
+		handleDelete,
+		handleSetDisplayWidth,
+		handleSetLayout
 	};
 }
 //#endregion
@@ -378,6 +403,168 @@ function getEditorHistoryShortcut(event, options = {}) {
 	return null;
 }
 //#endregion
+//#region src/ImageLayoutControls.tsx
+var SIZE_PRESETS = [
+	25,
+	50,
+	75,
+	100
+];
+var SIZE_MIN = 10;
+var SIZE_MAX = 100;
+var SNAP_THRESHOLD = 3;
+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) / (SIZE_MAX - SIZE_MIN)} * (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: "Float left, text wraps right",
+		Icon: ArrowLeftToLine
+	},
+	{
+		value: "float-right",
+		label: "Float right, text wraps left",
+		Icon: ArrowRightToLine
+	}
+];
+var toolbarButtonClass = `${editToolbarButton} ${semanticClassNames.editToolbarButton}`;
+var stopMouseDown = (e) => {
+	e.preventDefault();
+	e.stopPropagation();
+};
+function ImageSizeControl() {
+	const store = useStore();
+	const [sizeOpen, setSizeOpen] = useAtom(sizeOpenAtom);
+	const displayWidth = useAtomValue(displayWidthAtom);
+	const { handleSetDisplayWidth } = useImageActions();
+	const [dragValue, setDragValue] = useState(null);
+	useEffect(() => {
+		setDragValue(null);
+	}, [displayWidth]);
+	const value = dragValue ?? displayWidth ?? SIZE_MAX;
+	const applyPreview = (percent) => {
+		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}%`);
+	};
+	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);
+	};
+	const fill = `${(value - SIZE_MIN) / (SIZE_MAX - SIZE_MIN) * 100}%`;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: sizeOpen,
+		onOpenChange: setSizeOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			className: toolbarButtonClass,
+			title: "Image size",
+			onMouseDown: stopMouseDown,
+			children: /* @__PURE__ */ jsx(Scaling, { size: 14 })
+		}), /* @__PURE__ */ jsxs(PopoverPanel, {
+			className: controlPanel,
+			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", {
+					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: commit,
+						onChange: handleSliderChange,
+						onKeyUp: commit,
+						onMouseDown: (e) => e.stopPropagation(),
+						onPointerUp: commit
+					}), 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}%`
+				})
+			]
+		})]
+	});
+}
+function ImageLayoutControl() {
+	const [layoutOpen, setLayoutOpen] = useAtom(layoutOpenAtom);
+	const layout = useAtomValue(layoutAtom);
+	const { handleSetLayout } = useImageActions();
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: layoutOpen,
+		onOpenChange: setLayoutOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			className: toolbarButtonClass,
+			title: "Image layout",
+			onMouseDown: stopMouseDown,
+			children: /* @__PURE__ */ jsx((LAYOUT_OPTIONS.find((option) => option.value === layout) ?? LAYOUT_OPTIONS[0]).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"))
+		})]
+	});
+}
+//#endregion
 //#region src/ReplacePanel.tsx
 var replaceModeItems = [{
 	value: "upload",
@@ -495,6 +682,8 @@ function ImageEditToolbar() {
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${editToolbar} ${semanticClassNames.editToolbar} ${toolbarVisible ? `${editToolbarVisible} ${semanticClassNames.editToolbarVisible}` : ""}`,
 		children: [
+			/* @__PURE__ */ jsx(ImageSizeControl, {}),
+			/* @__PURE__ */ jsx(ImageLayoutControl, {}),
 			/* @__PURE__ */ jsxs(Popover, {
 				open: metaOpen,
 				onOpenChange: (nextOpen) => {
@@ -541,25 +730,25 @@ function ImageEditToolbar() {
 			}),
 			/* @__PURE__ */ jsx("button", {
 				className: `${editToolbarButton} ${semanticClassNames.editToolbarButton}`,
-				title: "Open source",
+				title: "Duplicate",
 				type: "button",
-				onClick: handleOpen,
+				onClick: handleDuplicate,
 				onMouseDown: (e) => {
 					e.preventDefault();
 					e.stopPropagation();
 				},
-				children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+				children: /* @__PURE__ */ jsx(CopyPlus, { size: 14 })
 			}),
 			/* @__PURE__ */ jsx("button", {
 				className: `${editToolbarButton} ${semanticClassNames.editToolbarButton}`,
-				title: "Duplicate",
+				title: "Open source",
 				type: "button",
-				onClick: handleDuplicate,
+				onClick: handleOpen,
 				onMouseDown: (e) => {
 					e.preventDefault();
 					e.stopPropagation();
 				},
-				children: /* @__PURE__ */ jsx(Copy, { size: 14 })
+				children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
 			}),
 			/* @__PURE__ */ jsx("button", {
 				className: `${editToolbarButton} ${semanticClassNames.editToolbarButton}`,
@@ -621,6 +810,84 @@ function ReplacePopover() {
 	});
 }
 //#endregion
+//#region src/useImageResize.ts
+var MOVE_THRESHOLD_PX = 3;
+function useImageResize() {
+	const store = useStore();
+	const [editor] = useLexicalComposerContext();
+	const finishRef = useRef(null);
+	useEffect(() => () => finishRef.current?.(false), []);
+	return { handlePointerDown: useCallback((event, side) => {
+		const trigger = store.get(wrapperRefAtom).current;
+		if (!trigger) return;
+		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);
+		const startWidth = frame.getBoundingClientRect().width;
+		if (!containerWidth || containerWidth <= 0 || !startWidth) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const layout = store.get(layoutAtom);
+		const factor = layout === void 0 ? 2 : 1;
+		const isFloat = layout === "float-left" || layout === "float-right";
+		const startX = event.clientX;
+		const handle = event.currentTarget;
+		try {
+			handle.setPointerCapture(event.pointerId);
+		} catch {}
+		store.set(resizingAtom, true);
+		const prevUserSelect = document.body.style.userSelect;
+		document.body.style.userSelect = "none";
+		let percent = sanitizeImageDisplayWidth(startWidth / containerWidth * 100) ?? 100;
+		let moved = false;
+		const handleMove = (moveEvent) => {
+			const rawDelta = moveEvent.clientX - startX;
+			if (!moved && Math.abs(rawDelta) < MOVE_THRESHOLD_PX) return;
+			moved = true;
+			percent = sanitizeImageDisplayWidth((startWidth + (side === "left" ? -rawDelta : rawDelta) * factor) / containerWidth * 100) ?? percent;
+			if (isFloat && blockWrapper) blockWrapper.style.width = `${percent}%`;
+			else figure.style.setProperty("--rich-image-display-width", `${percent}%`);
+		};
+		const finish = (commit) => {
+			if (finishRef.current !== finish) return;
+			finishRef.current = null;
+			handle.removeEventListener("pointermove", handleMove);
+			handle.removeEventListener("pointerup", handleEnd);
+			handle.removeEventListener("pointercancel", handleEnd);
+			document.body.style.userSelect = prevUserSelect;
+			store.set(resizingAtom, false);
+			if (!commit || !moved) return;
+			editor.update(() => {
+				const node = $getNearestNodeFromDOMNode(trigger);
+				if ($isImageNode(node)) node.setDisplayWidth(percent);
+			}, { tag: "skip-scroll-into-view" });
+		};
+		const handleEnd = () => finish(true);
+		finishRef.current = finish;
+		handle.addEventListener("pointermove", handleMove);
+		handle.addEventListener("pointerup", handleEnd);
+		handle.addEventListener("pointercancel", handleEnd);
+	}, [editor, store]) };
+}
+//#endregion
+//#region src/ResizeHandles.tsx
+function ResizeHandles() {
+	const visible = useAtomValue(toolbarVisibleAtom);
+	const { handlePointerDown } = useImageResize();
+	const visibleClass = visible ? resizeHandleVisible : "";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: `${resizeHandle} ${resizeHandleLeft} ${visibleClass} ${semanticClassNames.resizeHandle}`.trim(),
+		onPointerDown: (e) => handlePointerDown(e, "left")
+	}), /* @__PURE__ */ jsx("span", {
+		className: `${resizeHandle} ${resizeHandleRight} ${visibleClass} ${semanticClassNames.resizeHandle}`.trim(),
+		onPointerDown: (e) => handlePointerDown(e, "right")
+	})] });
+}
+//#endregion
 //#region src/ImageEditRenderer.tsx
 var frameStateSemanticClass = {
 	loading: semanticClassNames.frameLoading,
@@ -653,6 +920,8 @@ function ImageEditContent() {
 	const setMetaOpen = useSetAtom(metaOpenAtom);
 	const setReplaceOpen = useSetAtom(replaceOpenAtom);
 	const setFocusCaptionOnOpen = useSetAtom(focusCaptionOnOpenAtom);
+	const displayWidth = useAtomValue(displayWidthAtom);
+	const layout = useAtomValue(layoutAtom);
 	const handleCaptionClick = useCallback((e) => {
 		e.stopPropagation();
 		const scrollY = window.scrollY;
@@ -667,6 +936,7 @@ function ImageEditContent() {
 		setReplaceOpen,
 		setFocusCaptionOnOpen
 	]);
+	const figureStyle = displayWidth ? { "--rich-image-display-width": `${displayWidth}%` } : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${editTrigger} ${semanticClassNames.editTrigger}`,
 		ref: wrapperRef,
@@ -674,6 +944,8 @@ function ImageEditContent() {
 		onMouseLeave: () => setHovering(false),
 		children: [src ? /* @__PURE__ */ jsxs("figure", {
 			className: `${root} ${semanticClassNames.root}`,
+			"data-layout": layout,
+			style: figureStyle,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: `${frame} ${semanticClassNames.frame} ${frameEditMode} ${imageState[loadState]} ${frameStateSemanticClass[loadState]}`.trim(),
 				style: frameStyle,
@@ -692,7 +964,8 @@ function ImageEditContent() {
 					loadState === "error" && /* @__PURE__ */ jsx("span", {
 						className: `_1n94osfc ${semanticClassNames.errorBadge}`,
 						children: "Image failed to load"
-					})
+					}),
+					/* @__PURE__ */ jsx(ResizeHandles, {})
 				]
 			}), captionText && /* @__PURE__ */ jsx("figcaption", {
 				className: `_1n94osfd ${semanticClassNames.caption}`,

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 _1n94osf1{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 _1n94osfa{to{transform:rotate(360deg)}}@keyframes _1n94osfi{0%{opacity:0}to{opacity:1}}._1n94osf0{text-align:center;margin:1.25rem 0}._1n94osf2{opacity:0;width:100%;max-width:100%;height:auto;display:block;border-radius:0!important}._1n94osf6{opacity:1;animation:.42s _1n94osf1}._1n94osf7{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}._1n94osf7:hover{transform:translateY(-1px)}._1n94osf8{cursor:default}._1n94osf8:hover{transform:none}._1n94osf9{cursor:default}._1n94osf9:hover{transform:none}._1n94osfb{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 _1n94osfa;position:absolute}._1n94osfc{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%)}._1n94osfd{color:var(--rc-text-tertiary);font-size:var(--rc-font-size-md);margin-top:.5rem;line-height:1.5}._1n94osfe{margin:var(--rc-space-md) 0;text-align:center}._1n94osff{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}._1n94osfg{opacity:0;transition:opacity .3s}._1n94osfh{opacity:1;transition:opacity .3s}._1n94osfj{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfi;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}._1n94osfk{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 _1n94osfi;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}._1n94osfl{cursor:default;display:block;position:relative}._1n94osfm{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}._1n94osfm:hover{border-color:var(--rc-accent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 8%, transparent)}._1n94osfn{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%)}._1n94osfo{opacity:1;pointer-events:auto}._1n94osfp{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}._1n94osfp:hover{color:var(--rc-text);background-color:var(--rc-fill-secondary)}._1n94osfq:hover{color:var(--rc-alert-caution);background-color:color-mix(in srgb, var(--rc-alert-caution) 12%, transparent)}._1n94osfr{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}._1n94osfs{background-color:var(--rc-bg-secondary);border-radius:6px;align-items:center;gap:8px;min-width:0;padding:6px 10px;display:flex}._1n94osft{color:var(--rc-text-secondary);flex-shrink:0}._1n94osfu{-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}._1n94osfu::placeholder{color:var(--rc-text-secondary)}._1n94osfv{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}._1n94osfv: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)}._1n94osfw{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}._1n94osfw img{object-fit:cover;width:100%;max-height:188px;display:block}._1n94osfx{color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);align-items:center;gap:.4rem;display:inline-flex}
+: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 _1n94osf1{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 _1n94osfa{to{transform:rotate(360deg)}}@keyframes _1n94osfi{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,50%);margin:.25rem 1.5rem 1rem 0}._1n94osf0[data-layout=float-right]{float:right;width:var(--rich-image-display-width,50%);margin:.25rem 0 1rem 1.5rem}.rich-image-wrapper[data-layout^=float] ._1n94osf0{float:none;width:auto;margin:0}._1n94osf2{opacity:0;width:100%;max-width:100%;height:auto;display:block;border-radius:0!important}._1n94osf6{opacity:1;animation:.42s _1n94osf1}._1n94osf7{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}._1n94osf7:hover{transform:translateY(-1px)}._1n94osf8{cursor:default}._1n94osf8:hover{transform:none}._1n94osf9{cursor:default}._1n94osf9:hover{transform:none}._1n94osfb{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 _1n94osfa;position:absolute}._1n94osfc{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%)}._1n94osfd{color:var(--rc-text-tertiary);font-size:var(--rc-font-size-md);margin-top:.5rem;line-height:1.5}._1n94osfe{margin:var(--rc-space-md) 0;text-align:center}._1n94osff{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}._1n94osfg{opacity:0;transition:opacity .3s}._1n94osfh{opacity:1;transition:opacity .3s}._1n94osfj{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfi;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}._1n94osfk{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 _1n94osfi;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}._1n94osfl{cursor:default;display:block;position:relative}._1n94osfm{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}._1n94osfm:hover{border-color:var(--rc-accent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 8%, transparent)}._1n94osfn{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%)}._1n94osfo{opacity:1;pointer-events:auto}._1n94osfp{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}._1n94osfp:hover{color:var(--rc-text);background-color:var(--rc-fill-secondary)}._1n94osfq:hover{color:var(--rc-alert-caution);background-color:color-mix(in srgb, var(--rc-alert-caution) 12%, transparent)}._1n94osfr{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}._1n94osfs{background-color:var(--rc-bg-secondary);border-radius:6px;align-items:center;gap:8px;min-width:0;padding:6px 10px;display:flex}._1n94osft{color:var(--rc-text-secondary);flex-shrink:0}._1n94osfu{-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}._1n94osfu::placeholder{color:var(--rc-text-secondary)}._1n94osfv{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}._1n94osfv: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)}._1n94osfw{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}._1n94osfw img{object-fit:cover;width:100%;max-height:188px;display:block}._1n94osfx{color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);align-items:center;gap:.4rem;display:inline-flex}._1n94osfy{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}._1n94osfz{left:6px}._1n94osf10{right:6px}._1n94osf11{opacity:1}._1n94osf12{font-family:var(--rc-font-family);z-index:30;align-items:center;gap:4px;padding:4px;display:flex}._1n94osf12._1n94osf12{width:-moz-fit-content;width:fit-content}._1n94osf13{align-items:center;width:132px;height:24px;display:flex;position:relative}._1n94osf14{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%;height:24px;margin:0}._1n94osf14::-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}._1n94osf14::-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}._1n94osf14::-moz-range-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf14::-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}._1n94osf15{background-color:var(--rc-bg);pointer-events:none;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;transform:translate(-50%,-50%)}._1n94osf16{text-align:right;min-width:34px;font-size:var(--rc-font-size-xs);font-variant-numeric:tabular-nums;color:var(--rc-text-secondary)}._1n94osf17{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}._1n94osf17:hover,._1n94osf18{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-BihkEC_w.js";
+import { t as ImageRenderer } from "./ImageRenderer-ew0e3cUJ.js";
 export { ImageRenderer };

package/dist/styles.css.d.ts

@@ -21,6 +21,7 @@ export declare const semanticClassNames: {
     readonly replaceUploadArea: "rr-image-replace-upload-area";
     readonly replacePreview: "rr-image-replace-preview";
     readonly panelHint: "rr-image-panel-hint";
+    readonly resizeHandle: "rr-image-resize-handle";
 };
 export declare const root: string;
 export declare const image: string;
@@ -59,4 +60,15 @@ export declare const editInput: string;
 export declare const replaceUploadArea: string;
 export declare const replacePreview: string;
 export declare const panelHint: string;
+export declare const resizeHandle: string;
+export declare const resizeHandleLeft: string;
+export declare const resizeHandleRight: string;
+export declare const resizeHandleVisible: string;
+export declare const controlPanel: string;
+export declare const sizeSliderWrap: string;
+export declare const sizeSlider: string;
+export declare const sizeSliderTick: string;
+export declare const sizeValue: 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;;;;;;;;;;;;;;;;;;;;;;;CAuBrB,CAAC;AAEX,eAAO,MAAM,IAAI,QAGf,CAAC;AAaH,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"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAC;AAEX,eAAO,MAAM,IAAI,QAsCf,CAAC;AAsBH,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"}

package/dist/useImageActions.d.ts

@@ -1,3 +1,4 @@
+import { ImageLayout } from '@haklex/rich-editor/nodes';
 export declare function useImageActions(): {
     commitMeta: () => void;
     closeReplacePanel: () => void;
@@ -9,5 +10,7 @@ export declare function useImageActions(): {
     handleDuplicate: () => void;
     handleDownload: () => void;
     handleDelete: () => void;
+    handleSetDisplayWidth: (width?: number) => 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":"AAoDA,wBAAgB,eAAe;;;8BA+Ed,IAAI,GAAG,IAAI;;;wCA6Db,OAAO;;;;;EAmBrB"}
+{"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"}

package/dist/useImageResize.d.ts

@@ -0,0 +1,5 @@
+export type ResizeSide = 'left' | 'right';
+export declare function useImageResize(): {
+    handlePointerDown: (event: React.PointerEvent<HTMLElement>, side: ResizeSide) => void;
+};
+//# sourceMappingURL=useImageResize.d.ts.map

package/dist/useImageResize.d.ts.map

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-image",
-  "version": "0.22.1",
+  "version": "0.24.0",
   "description": "Image renderer with blurhash",
   "repository": {
     "type": "git",
@@ -46,9 +46,9 @@
     "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "@haklex/rich-editor-ui": "0.22.1",
-    "@haklex/rich-style-token": "0.22.1",
-    "@haklex/rich-editor": "0.22.1"
+    "@haklex/rich-editor": "0.24.0",
+    "@haklex/rich-editor-ui": "0.24.0",
+    "@haklex/rich-style-token": "0.24.0"
   },
   "publishConfig": {
     "access": "public"