@inshapardaz/likhari-react 0.1.6 → 0.1.7-dev.75

package/dist/image/ImageCropDialog.d.ts

@@ -0,0 +1,22 @@
+export interface ImageCropDialogValue {
+    src: string;
+    width: number | null;
+    height: number | null;
+}
+export interface ImageCropDialogProps {
+    opened: boolean;
+    /** The embedded image being edited — only images with pixels of their own
+     * (not linked ones) can be cropped, rotated or resized here. */
+    initial: {
+        src: string;
+        width: number | null;
+        height: number | null;
+    };
+    onSubmit: (value: ImageCropDialogValue) => void;
+    onClose: () => void;
+}
+/** Crop, rotate, flip and resize dialog for an embedded image, reached from
+ * its context menu. Edits that change pixels are re-embedded as a data URI,
+ * or stored through the host's `onImageUpload` when there is one. */
+export declare function ImageCropDialog({ opened, initial, onSubmit, onClose }: ImageCropDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageCropDialog.d.ts.map

package/dist/image/ImageCropDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropDialog.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB;oEACgE;IAChE,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAqBD;;qEAEqE;AACrE,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,oBAAoB,+BAqK3F"}

package/dist/image/ImageCropDialog.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Alert, Button, Checkbox, Divider, Group, Modal, NumberInput, Stack, Text } from '@mantine/core';
+import { normalizeImageUrl } from './imageUrl.js';
+import { dataUrlBytes, dataUrlToFile, fitDimension, mimeFromSrc } from './imageEdit.js';
+import { ImageCropper } from './ImageCropper.js';
+import { useImageOptions } from './ImageOptionsContext.js';
+import { useUiStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
+/** Natural pixel size of an image URL (for the aspect ratio and size presets). */
+function useNaturalSize(src) {
+    const [size, setSize] = useState(null);
+    useEffect(() => {
+        setSize(null);
+        if (!src)
+            return;
+        let cancelled = false;
+        const img = new Image();
+        img.onload = () => {
+            if (!cancelled && img.naturalWidth)
+                setSize({ width: img.naturalWidth, height: img.naturalHeight });
+        };
+        img.src = src;
+        return () => {
+            cancelled = true;
+        };
+    }, [src]);
+    return size;
+}
+/** Crop, rotate, flip and resize dialog for an embedded image, reached from
+ * its context menu. Edits that change pixels are re-embedded as a data URI,
+ * or stored through the host's `onImageUpload` when there is one. */
+export function ImageCropDialog({ opened, initial, onSubmit, onClose }) {
+    const strings = useUiStrings();
+    const portalTarget = usePortalTarget();
+    const { maxSizeMB, onImageUpload } = useImageOptions();
+    const [pixelSrc, setPixelSrc] = useState(null);
+    const [width, setWidth] = useState(null);
+    const [height, setHeight] = useState(null);
+    const [lockAspect, setLockAspect] = useState(true);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (!opened)
+            return;
+        setPixelSrc(null);
+        setWidth(initial.width);
+        setHeight(initial.height);
+        setLockAspect(true);
+        setError(null);
+        setBusy(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [opened]);
+    const effectiveSrc = pixelSrc ?? initial.src;
+    const natural = useNaturalSize(effectiveSrc);
+    const resetSize = () => {
+        setWidth(null);
+        setHeight(null);
+    };
+    const onSizeChange = (changed, value) => {
+        const n = typeof value === 'number' ? value : null;
+        if (n === null) {
+            changed === 'width' ? setWidth(null) : setHeight(null);
+            return;
+        }
+        if (lockAspect && natural) {
+            const fitted = fitDimension(changed, n, natural.width, natural.height);
+            setWidth(fitted.width);
+            setHeight(fitted.height);
+        }
+        else {
+            changed === 'width' ? setWidth(n) : setHeight(n);
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        try {
+            let src = effectiveSrc;
+            if (pixelSrc) {
+                if (dataUrlBytes(pixelSrc) > maxSizeMB * 1024 * 1024) {
+                    setError(strings.imageCropDialog.errors.largerThan(maxSizeMB));
+                    return;
+                }
+                if (onImageUpload) {
+                    setBusy(true);
+                    const ext = mimeFromSrc(pixelSrc).split('/')[1];
+                    src = await onImageUpload(dataUrlToFile(pixelSrc, `image.${ext}`));
+                    if (!normalizeImageUrl(src)) {
+                        setError(strings.imageCropDialog.errors.uploadUnusable);
+                        return;
+                    }
+                }
+            }
+            onSubmit({ src, width, height });
+        }
+        catch (err) {
+            // ImageCropper's own pixel-edit error message (imageEdit.ts,
+            // applyPixelOp) is shown as-is when present — see the note in
+            // ImageDialog.tsx for why that pure utility's messages stay English.
+            setError(err instanceof Error ? err.message : strings.imageCropDialog.errors.couldNotSave);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: strings.imageCropDialog.title, centered: true, size: "lg", portalProps: { target: portalTarget }, children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "md", children: [_jsx(ImageCropper, { src: effectiveSrc, canReset: pixelSrc !== null, onApply: (edited) => {
+                            setPixelSrc(edited);
+                            resetSize();
+                        }, onReset: () => {
+                            setPixelSrc(null);
+                            setWidth(initial.width);
+                            setHeight(initial.height);
+                        } }), _jsx(Divider, { label: strings.imageCropDialog.sizeLabel, labelPosition: "left" }), _jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { grow: true, align: "flex-end", children: [_jsx(NumberInput, { label: strings.imageCropDialog.widthLabel, min: 1, max: 10000, hideControls: true, placeholder: natural ? String(natural.width) : strings.imageCropDialog.autoPlaceholder, value: width ?? '', onChange: (v) => onSizeChange('width', v) }), _jsx(NumberInput, { label: strings.imageCropDialog.heightLabel, min: 1, max: 10000, hideControls: true, placeholder: natural ? String(natural.height) : strings.imageCropDialog.autoPlaceholder, value: height ?? '', onChange: (v) => onSizeChange('height', v) })] }), _jsx(Checkbox, { label: strings.imageCropDialog.keepProportions, checked: lockAspect, onChange: (e) => setLockAspect(e.currentTarget.checked) }), _jsxs(Group, { gap: "xs", children: [[25, 50, 75, 100].map((pct) => (_jsxs(Button, { size: "xs", variant: "default", disabled: !natural, onClick: () => {
+                                            if (!natural)
+                                                return;
+                                            setWidth(Math.round((natural.width * pct) / 100));
+                                            setHeight(Math.round((natural.height * pct) / 100));
+                                        }, children: [pct, "%"] }, pct))), _jsx(Button, { size: "xs", variant: "subtle", onClick: resetSize, children: strings.imageCropDialog.originalSize })] }), _jsx(Text, { size: "xs", c: "dimmed", children: strings.imageCropDialog.dragHint(natural) })] }), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: strings.common.cancel }), _jsx(Button, { type: "submit", loading: busy, children: strings.common.save })] })] }) }) }));
+}

package/dist/image/ImageCropper.d.ts

@@ -0,0 +1,15 @@
+export interface ImageCropperProps {
+    /** The image as it is now (original, or already edited). */
+    src: string;
+    /** Called with the edited image as a data URI. */
+    onApply: (edited: string) => void;
+    /** Whether there are edits to undo. */
+    canReset: boolean;
+    onReset: () => void;
+}
+/** Rotate, flip and crop. Drag on the preview to choose the area to keep, then
+ * drag its handles to resize it or drag inside it to move it, then "Apply crop".
+ * Each operation re-renders the pixels, so it needs an image the canvas may read
+ * (an embedded image). */
+export declare function ImageCropper({ src, onApply, canReset, onReset, }: ImageCropperProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageCropper.d.ts.map

package/dist/image/ImageCropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropper.tsx"],"names":[],"mappings":"AAgDA,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;0BAG0B;AAC1B,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,iBAAiB,+BA0OnB"}

package/dist/image/ImageCropper.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, } from "react";
+import { ActionIcon, Alert, Button, Group, SegmentedControl, Stack, Text, Tooltip, } from "@mantine/core";
+import { IconCrop, IconFlipHorizontal, IconFlipVertical, IconRestore, IconRotate2, IconRotateClockwise2, } from "@tabler/icons-react";
+import { applyPixelOp } from "./imageEdit.js";
+import { MIN_CROP, moveRect, rectFromDrag, resizeRect, } from "./cropMath.js";
+import { usePortalTarget } from "../PortalTargetContext.js";
+const ASPECTS = {
+    free: null,
+    "1:1": 1,
+    "4:3": 4 / 3,
+    "16:9": 16 / 9,
+};
+const HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+const clamp = (v) => Math.min(Math.max(v, 0), 1);
+/** Rotate, flip and crop. Drag on the preview to choose the area to keep, then
+ * drag its handles to resize it or drag inside it to move it, then "Apply crop".
+ * Each operation re-renders the pixels, so it needs an image the canvas may read
+ * (an embedded image). */
+export function ImageCropper({ src, onApply, canReset, onReset, }) {
+    const portalTarget = usePortalTarget();
+    const imgRef = useRef(null);
+    const drag = useRef(null);
+    const [rect, setRect] = useState(null);
+    const [aspect, setAspect] = useState("free");
+    const [natural, setNatural] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const run = async (op) => {
+        setBusy(true);
+        setError(null);
+        try {
+            onApply(await applyPixelOp(src, op));
+            setRect(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Could not edit the image");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const pointer = (event) => {
+        const box = imgRef.current?.getBoundingClientRect();
+        if (!box || !box.width || !box.height)
+            return null;
+        return {
+            point: {
+                x: clamp((event.clientX - box.left) / box.width),
+                y: clamp((event.clientY - box.top) / box.height),
+            },
+            box: { width: box.width, height: box.height },
+        };
+    };
+    const onDown = (event) => {
+        const p = pointer(event);
+        if (!p)
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const target = event.target;
+        const handle = target.dataset.handle;
+        if (handle && rect) {
+            drag.current = { mode: "resize", handle, origin: rect };
+        }
+        else if (target.dataset.move && rect) {
+            drag.current = { mode: "move", start: p.point, origin: rect };
+        }
+        else {
+            drag.current = { mode: "new", anchor: p.point };
+            setRect({ x: p.point.x, y: p.point.y, w: 0, h: 0 });
+        }
+    };
+    const onMove = (event) => {
+        const current = drag.current;
+        const p = pointer(event);
+        if (!current || !p)
+            return;
+        const ratio = ASPECTS[aspect];
+        if (current.mode === "new")
+            setRect(rectFromDrag(current.anchor, p.point, ratio, p.box));
+        else if (current.mode === "move")
+            setRect(moveRect(current.origin, p.point.x - current.start.x, p.point.y - current.start.y));
+        else
+            setRect(resizeRect(current.origin, current.handle, p.point, ratio, p.box));
+    };
+    const onUp = () => {
+        const wasNew = drag.current?.mode === "new";
+        drag.current = null;
+        // A click without a drag isn't a selection.
+        if (wasNew)
+            setRect((r) => (r && (r.w < MIN_CROP || r.h < MIN_CROP) ? null : r));
+    };
+    const selectionSize = rect && natural && rect.w > 0 && rect.h > 0
+        ? `${Math.max(1, Math.round(rect.w * natural.width))} × ${Math.max(1, Math.round(rect.h * natural.height))} px`
+        : null;
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { gap: "xs", children: [_jsx(Tooltip, { label: "Rotate left", portalProps: { target: portalTarget }, children: _jsx(ActionIcon, { variant: "default", "aria-label": "Rotate left", disabled: busy, onClick: () => run({ type: "rotate", direction: "ccw" }), children: _jsx(IconRotate2, { size: 16 }) }) }), _jsx(Tooltip, { label: "Rotate right", portalProps: { target: portalTarget }, children: _jsx(ActionIcon, { variant: "default", "aria-label": "Rotate right", disabled: busy, onClick: () => run({ type: "rotate", direction: "cw" }), children: _jsx(IconRotateClockwise2, { size: 16 }) }) }), _jsx(Tooltip, { label: "Flip horizontally", portalProps: { target: portalTarget }, children: _jsx(ActionIcon, { variant: "default", "aria-label": "Flip horizontally", disabled: busy, onClick: () => run({ type: "flip", axis: "horizontal" }), children: _jsx(IconFlipHorizontal, { size: 16 }) }) }), _jsx(Tooltip, { label: "Flip vertically", portalProps: { target: portalTarget }, children: _jsx(ActionIcon, { variant: "default", "aria-label": "Flip vertically", disabled: busy, onClick: () => run({ type: "flip", axis: "vertical" }), children: _jsx(IconFlipVertical, { size: 16 }) }) }), _jsx(Button, { ml: "auto", size: "xs", variant: "subtle", leftSection: _jsx(IconRestore, { size: 14 }), disabled: !canReset || busy, onClick: () => {
+                            setRect(null);
+                            setError(null);
+                            onReset();
+                        }, children: "Undo edits" })] }), _jsxs(Group, { gap: "xs", align: "center", children: [_jsx(Text, { size: "sm", children: "Crop shape" }), _jsx(SegmentedControl, { size: "xs", value: aspect, onChange: (v) => {
+                            setAspect(v);
+                            setRect(null);
+                        }, data: [
+                            { value: "free", label: "Free" },
+                            { value: "1:1", label: "1:1" },
+                            { value: "4:3", label: "4:3" },
+                            { value: "16:9", label: "16:9" },
+                        ] })] }), _jsx("div", { className: "likhari-cropper-stage", onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, onPointerCancel: onUp, children: _jsxs("div", { className: "likhari-cropper-frame", children: [_jsx("img", { ref: imgRef, src: src, alt: "", draggable: false, className: "likhari-cropper-image", onLoad: (e) => setNatural({
+                                width: e.currentTarget.naturalWidth,
+                                height: e.currentTarget.naturalHeight,
+                            }) }), rect && rect.w > 0 && rect.h > 0 && (_jsx("div", { className: "likhari-cropper-selection", "data-move": "true", style: {
+                                left: `${rect.x * 100}%`,
+                                top: `${rect.y * 100}%`,
+                                width: `${rect.w * 100}%`,
+                                height: `${rect.h * 100}%`,
+                            }, children: HANDLES.map((handle) => (_jsx("span", { className: "likhari-cropper-handle", "data-handle": handle }, handle))) }))] }) }), _jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "xs", c: "dimmed", children: selectionSize
+                            ? `Selection: ${selectionSize}. Drag the handles to resize it, or drag inside to move it.`
+                            : "Drag on the image to choose the area to keep." }), _jsx(Button, { size: "xs", leftSection: _jsx(IconCrop, { size: 14 }), disabled: !rect || busy, loading: busy, onClick: () => rect && run({ type: "crop", rect }), children: "Apply crop" })] }), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error }))] }));
+}

package/dist/image/ImageDialog.d.ts

@@ -0,0 +1,37 @@
+import type { ImageLinkType } from './ImageNode.js';
+export interface ImageDialogValue {
+    src: string;
+    altText: string;
+    /** null = no caption */
+    caption: string | null;
+    linkType: ImageLinkType;
+    /** Whether the pixels changed (a new URL/upload, or a conversion) — the
+     * display size no longer matches, so the caller should reset it to auto. */
+    sourceChanged: boolean;
+}
+export interface ImageDialogProps {
+    /** `insert`: pick an image. `edit`: also change its source, alt text and caption. */
+    mode: 'insert' | 'edit';
+    opened: boolean;
+    /** The image being edited (edit mode). */
+    initial?: {
+        src: string;
+        altText: string;
+        caption: string | null;
+        linkType: ImageLinkType;
+    };
+    /** What to do as the dialog opens: focus the caption field, or start converting
+     * a linked image to an embedded one. */
+    intent?: 'caption' | 'convert';
+    onSubmit: (image: ImageDialogValue) => void;
+    onClose: () => void;
+}
+/**
+ * Insert-image dialog (UI spec §6) and, in edit mode, the image's details:
+ * replace the source (URL or upload), alt text, caption, and — for a linked
+ * image — convert it to an embedded one. Cropping, rotating and resizing an
+ * embedded image is a separate dialog (`ImageCropDialog`), reached from the
+ * image's context menu once it has pixels of its own to edit.
+ */
+export declare function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }: ImageDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageDialog.d.ts.map

package/dist/image/ImageDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB;gFAC4E;IAC5E,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qFAAqF;IACrF,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,EAAE,aAAa,CAAA;KAAE,CAAC;IAC5F;4CACwC;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAaD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BAwQjG"}

package/dist/image/ImageDialog.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Alert, Button, Checkbox, FileInput, Group, Modal, SegmentedControl, Stack, Text, TextInput } from '@mantine/core';
+import { IconPhotoDown } from '@tabler/icons-react';
+import { ACCEPTED_IMAGE_TYPES, normalizeImageUrl, validateImageFile } from './imageUrl.js';
+import { dataUrlBytes, dataUrlToFile, fetchImageAsDataUrl, mimeFromSrc } from './imageEdit.js';
+import { useImageOptions } from './ImageOptionsContext.js';
+import { useUiStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
+function readAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(new Error('READ_FAILED'));
+        reader.readAsDataURL(file);
+    });
+}
+/**
+ * Insert-image dialog (UI spec §6) and, in edit mode, the image's details:
+ * replace the source (URL or upload), alt text, caption, and — for a linked
+ * image — convert it to an embedded one. Cropping, rotating and resizing an
+ * embedded image is a separate dialog (`ImageCropDialog`), reached from the
+ * image's context menu once it has pixels of its own to edit.
+ */
+export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }) {
+    const strings = useUiStrings();
+    const portalTarget = usePortalTarget();
+    const { allowLinked, allowEmbedded, allowCaption, maxSizeMB, onImageUpload, fetchImage } = useImageOptions();
+    const editing = mode === 'edit' && initial !== undefined;
+    const defaultSource = editing ? 'keep' : allowLinked ? 'linked' : 'embedded';
+    const [source, setSource] = useState(defaultSource);
+    const [url, setUrl] = useState('');
+    const [embedCopy, setEmbedCopy] = useState(false);
+    const [file, setFile] = useState(null);
+    const [fileSrc, setFileSrc] = useState(null);
+    const [altText, setAltText] = useState('');
+    const [caption, setCaption] = useState('');
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [converting, setConverting] = useState(false);
+    useEffect(() => {
+        if (!opened)
+            return;
+        setSource(defaultSource);
+        setUrl('');
+        setEmbedCopy(false);
+        setFile(null);
+        setFileSrc(null);
+        setAltText(initial?.altText ?? '');
+        setCaption(initial?.caption ?? '');
+        setError(null);
+        setBusy(false);
+        setConverting(false);
+        if (intent === 'convert' && initial?.linkType === 'linked')
+            void convert(initial.src);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [opened]);
+    const baseSrc = source === 'keep' ? (initial?.src ?? null) : source === 'linked' ? normalizeImageUrl(url) : fileSrc;
+    const effectiveLinkType = source === 'keep' ? (initial?.linkType ?? 'linked') : source === 'linked' ? 'linked' : 'embedded';
+    const convertedFromUrl = source === 'embedded' && fileSrc !== null && file === null;
+    const changeSource = (next) => {
+        setSource(next);
+        setFile(null);
+        setFileSrc(null);
+        setError(null);
+    };
+    const changeFile = async (next) => {
+        setFile(next);
+        setFileSrc(null);
+        setError(null);
+        if (!next)
+            return;
+        const problem = validateImageFile(next, maxSizeMB);
+        if (problem) {
+            setError(problem);
+            return;
+        }
+        try {
+            setFileSrc(await readAsDataUrl(next));
+        }
+        catch {
+            setError(strings.imageDialog.errors.couldNotReadFile);
+        }
+    };
+    /** Downloads a linked image and switches the dialog to its embedded copy. */
+    const convert = async (src) => {
+        if (!src)
+            return;
+        setConverting(true);
+        setError(null);
+        try {
+            const dataUrl = await fetchImageAsDataUrl(src, fetchImage);
+            if (dataUrlBytes(dataUrl) > maxSizeMB * 1024 * 1024)
+                throw new Error(strings.imageDialog.errors.largerThan(maxSizeMB));
+            setSource('embedded');
+            setFile(null);
+            setFileSrc(dataUrl);
+        }
+        catch (err) {
+            // fetchImageAsDataUrl's own errors (network/CORS failures, unsupported
+            // type) are English (packages/react/src/image/imageEdit.ts) — shown
+            // as-is since threading locale into that pure utility isn't worth the
+            // refactor here; only the size-limit message above is ours to localize.
+            setError(err instanceof Error ? err.message : strings.imageDialog.errors.couldNotConvert);
+        }
+        finally {
+            setConverting(false);
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        if (!baseSrc) {
+            setError(source === 'linked'
+                ? strings.imageDialog.errors.enterUrl
+                : source === 'embedded'
+                    ? strings.imageDialog.errors.chooseFile
+                    : strings.imageDialog.errors.noImage);
+            return;
+        }
+        try {
+            let src = baseSrc;
+            let linkType = effectiveLinkType;
+            // Pixels the document doesn't reference yet (an upload, or a downloaded
+            // copy of a linked image) are stored: through the host's handler, or
+            // embedded as a data URI.
+            let newPixels = source === 'embedded' ? fileSrc : null;
+            if (!newPixels && source === 'linked' && embedCopy) {
+                setBusy(true);
+                newPixels = await fetchImageAsDataUrl(baseSrc, fetchImage);
+            }
+            if (newPixels) {
+                if (dataUrlBytes(newPixels) > maxSizeMB * 1024 * 1024) {
+                    setError(strings.imageDialog.errors.largerThan(maxSizeMB));
+                    return;
+                }
+                linkType = 'embedded';
+                if (onImageUpload) {
+                    setBusy(true);
+                    const ext = mimeFromSrc(newPixels).split('/')[1];
+                    const upload = !file ? dataUrlToFile(newPixels, `image.${ext}`) : file;
+                    src = await onImageUpload(upload);
+                    if (!normalizeImageUrl(src)) {
+                        setError(strings.imageDialog.errors.uploadUnusable);
+                        return;
+                    }
+                }
+                else {
+                    src = newPixels;
+                }
+            }
+            onSubmit({
+                src,
+                altText: altText.trim(),
+                caption: allowCaption ? caption.trim() || null : (initial?.caption ?? null),
+                linkType,
+                sourceChanged: source !== 'keep',
+            });
+        }
+        catch (err) {
+            // fetchImageAsDataUrl's own network/CORS error message (imageEdit.ts)
+            // is shown as-is when present — see note in `convert` above.
+            setError(err instanceof Error ? err.message : strings.imageDialog.errors.couldNotSave);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const convertButton = (_jsx(Button, { size: "xs", variant: "light", leftSection: _jsx(IconPhotoDown, { size: 14 }), loading: converting, disabled: !baseSrc, onClick: () => convert(baseSrc), children: strings.imageDialog.convertButton }));
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: editing ? strings.imageDialog.titleEdit : strings.imageDialog.titleInsert, centered: true, size: "sm", portalProps: { target: portalTarget }, children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "sm", children: [(editing || (allowLinked && allowEmbedded)) && (_jsx(SegmentedControl, { fullWidth: true, value: source, onChange: (v) => changeSource(v), data: [
+                            ...(editing ? [{ value: 'keep', label: strings.imageDialog.currentImage }] : []),
+                            ...(allowLinked ? [{ value: 'linked', label: strings.imageDialog.fromUrl }] : []),
+                            ...(allowEmbedded ? [{ value: 'embedded', label: strings.imageDialog.upload }] : []),
+                        ] })), source === 'keep' && (_jsxs(Stack, { gap: 6, children: [_jsx(Text, { size: "sm", c: "dimmed", lineClamp: 2, style: { wordBreak: 'break-all' }, children: initial?.linkType === 'embedded' ? strings.imageDialog.embeddedInDocument : strings.imageDialog.linkedFrom(initial?.src ?? '') }), initial?.linkType === 'linked' && allowEmbedded && (_jsxs(Group, { gap: "xs", children: [convertButton, _jsx(Text, { size: "xs", c: "dimmed", children: strings.imageDialog.convertHint })] }))] })), source === 'linked' && (_jsxs(_Fragment, { children: [_jsx(TextInput, { label: strings.imageDialog.imageUrlLabel, placeholder: strings.imageDialog.imageUrlPlaceholder, value: url, onChange: (e) => setUrl(e.currentTarget.value), "data-autofocus": intent !== 'caption' ? true : undefined }), allowEmbedded && (_jsx(Checkbox, { label: strings.imageDialog.embedCopyLabel, description: strings.imageDialog.embedCopyDescription, checked: embedCopy, onChange: (e) => setEmbedCopy(e.currentTarget.checked) }))] })), source === 'embedded' &&
+                        (convertedFromUrl ? (_jsx(Text, { size: "sm", c: "dimmed", children: strings.imageDialog.convertedFromUrl })) : (_jsx(FileInput, { label: strings.imageDialog.fileLabel, placeholder: strings.imageDialog.filePlaceholder, accept: ACCEPTED_IMAGE_TYPES.join(','), value: file, onChange: changeFile, description: strings.imageDialog.fileDescription(maxSizeMB, !onImageUpload) }))), _jsx(TextInput, { label: strings.imageDialog.altTextLabel, description: strings.imageDialog.altTextDescription, value: altText, onChange: (e) => setAltText(e.currentTarget.value) }), allowCaption && (_jsx(TextInput, { label: strings.imageDialog.captionLabel, description: strings.imageDialog.captionDescription, value: caption, onChange: (e) => setCaption(e.currentTarget.value), "data-autofocus": intent === 'caption' ? true : undefined })), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: strings.common.cancel }), _jsx(Button, { type: "submit", loading: busy, children: editing ? strings.common.save : strings.common.insert })] })] }) }) }));
+}

package/dist/image/ImageNode.d.ts

@@ -0,0 +1,64 @@
+import type { ReactElement } from 'react';
+import { DecoratorNode, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from 'lexical';
+/** How the image's bytes are held: an external URL, or embedded in the
+ * document (a base64 data URI, or a URL returned by the host's upload handler). */
+export type ImageLinkType = 'linked' | 'embedded';
+export interface ImagePayload {
+    src: string;
+    altText?: string;
+    /** null = no caption; '' = caption enabled but empty */
+    caption?: string | null;
+    linkType: ImageLinkType;
+    width?: number | null;
+    height?: number | null;
+    key?: NodeKey;
+}
+export type SerializedImageNode = Spread<{
+    src: string;
+    altText: string;
+    caption: string | null;
+    linkType: ImageLinkType;
+    width: number | null;
+    height: number | null;
+}, SerializedLexicalNode>;
+/**
+ * Block-level image (editor-architecture-design.md §3.5). The caption is a
+ * plain string (null = no caption) edited through the image's right-click menu
+ * / edit dialog — not the nested sub-editor the architecture doc leaves open —
+ * which keeps every edit in the parent editor's undo history.
+ */
+export declare class ImageNode extends DecoratorNode<ReactElement> {
+    __src: string;
+    __altText: string;
+    __caption: string | null;
+    __linkType: ImageLinkType;
+    __width: number | null;
+    __height: number | null;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(json: SerializedImageNode): ImageNode;
+    constructor(src: string, altText?: string, caption?: string | null, linkType?: ImageLinkType, width?: number | null, height?: number | null, key?: NodeKey);
+    exportJSON(): SerializedImageNode;
+    /** `<figure><img><figcaption>` — the figure/figcaption semantics from spec §4.7. */
+    exportDOM(): DOMExportOutput;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    isInline(): false;
+    getSrc(): string;
+    getAltText(): string;
+    getCaption(): string | null;
+    getLinkType(): ImageLinkType;
+    getWidth(): number | null;
+    getHeight(): number | null;
+    setCaption(caption: string | null): this;
+    setAltText(altText: string): this;
+    /** Points the node at new image data (a replaced URL/upload, or edited pixels). */
+    setSource(src: string, linkType: ImageLinkType): this;
+    /** Display size in px; null = the image's natural size. */
+    setDimensions(width: number | null, height: number | null): this;
+    getTextContent(): string;
+    decorate(): ReactElement;
+}
+export declare function $createImageNode({ src, altText, caption, linkType, width, height, key }: ImagePayload): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
+//# sourceMappingURL=ImageNode.d.ts.map

package/dist/image/ImageNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageNode.d.ts","sourceRoot":"","sources":["../../src/image/ImageNode.tsx"],"names":[],"mappings":"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"}