@byline/richtext-lexical 0.9.3

package/dist/field/plugins/inline-image-plugin/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ *
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ */
+import type * as React from 'react';
+import { type LexicalCommand, type NodeKey } from 'lexical';
+import type { InlineImageAttributes } from '../../nodes/inline-image-node/types';
+export type InsertInlineImagePayload = Readonly<InlineImageAttributes>;
+export type UpdateInlineImagePayload = Readonly<{
+    nodeKey: NodeKey;
+    attributes: InlineImageAttributes;
+}>;
+export type OpenInlineImageModalPayload = Readonly<{
+    nodeKey?: NodeKey;
+}> | null;
+/**
+ * Asks the InlineImagePlugin to open its modal. Pass `null` (or omit
+ * `nodeKey`) for insert mode; pass a `nodeKey` to edit an existing node
+ * with its current attributes pre-filled.
+ */
+export declare const OPEN_INLINE_IMAGE_MODAL_COMMAND: LexicalCommand<OpenInlineImageModalPayload>;
+/** Inserts a new InlineImageNode at the current selection. */
+export declare const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand<InsertInlineImagePayload>;
+/** Updates the InlineImageNode identified by `nodeKey` in place. */
+export declare const UPDATE_INLINE_IMAGE_COMMAND: LexicalCommand<UpdateInlineImagePayload>;
+export declare function InlineImagePlugin({ collection }: {
+    collection: string;
+}): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/field/plugins/inline-image-plugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/plugins/inline-image-plugin/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAKnC,OAAO,EAQL,KAAK,cAAc,EAEnB,KAAK,OAAO,EACb,MAAM,SAAS,CAAA;AAQhB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAGhF,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAA;AACtE,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,qBAAqB,CAAA;CAClC,CAAC,CAAA;AACF,MAAM,MAAM,2BAA2B,GAAG,QAAQ,CAAC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,GAAG,IAAI,CAAA;AAEhF;;;;GAIG;AACH,eAAO,MAAM,+BAA+B,EAAE,cAAc,CAAC,2BAA2B,CACtC,CAAA;AAElD,8DAA8D;AAC9D,eAAO,MAAM,2BAA2B,EAAE,cAAc,CAAC,wBAAwB,CAEhF,CAAA;AAED,oEAAoE;AACpE,eAAO,MAAM,2BAA2B,EAAE,cAAc,CAAC,wBAAwB,CAEhF,CAAA;AA0CD,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiG3F"}

package/dist/field/plugins/inline-image-plugin/index.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $wrapNodeInElement, mergeRegister } from "@lexical/utils";
+import { $createParagraphNode, $getNodeByKey, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, createCommand } from "lexical";
+import { $createInlineImageNode, $isInlineImageNode, InlineImageNode } from "../../nodes/inline-image-node/index.js";
+import { InlineImageModal } from "./inline-image-modal.js";
+const OPEN_INLINE_IMAGE_MODAL_COMMAND = createCommand('OPEN_INLINE_IMAGE_MODAL_COMMAND');
+const INSERT_INLINE_IMAGE_COMMAND = createCommand('INSERT_INLINE_IMAGE_COMMAND');
+const UPDATE_INLINE_IMAGE_COMMAND = createCommand('UPDATE_INLINE_IMAGE_COMMAND');
+const CLOSED_STATE = {
+    mode: 'insert',
+    open: false,
+    nodeKey: null,
+    initialData: void 0
+};
+function readNodeAsInitialData(editor, nodeKey) {
+    let data;
+    editor.getEditorState().read(()=>{
+        const node = $getNodeByKey(nodeKey);
+        if (!$isInlineImageNode(node)) return;
+        data = {
+            documentRelation: node.getRelation(),
+            src: node.getSrc(),
+            altText: node.getAltText(),
+            position: node.getPosition(),
+            showCaption: node.getShowCaption()
+        };
+    });
+    return data;
+}
+function InlineImagePlugin({ collection }) {
+    const [editor] = useLexicalComposerContext();
+    const [modalState, setModalState] = useState(CLOSED_STATE);
+    useEffect(()=>{
+        if (!editor.hasNodes([
+            InlineImageNode
+        ])) throw new Error('InlineImagePlugin: InlineImageNode not registered on editor');
+        return mergeRegister(editor.registerCommand(OPEN_INLINE_IMAGE_MODAL_COMMAND, (payload)=>{
+            const nodeKey = payload?.nodeKey;
+            if (null != nodeKey) {
+                const initialData = readNodeAsInitialData(editor, nodeKey);
+                setModalState({
+                    mode: 'edit',
+                    open: true,
+                    nodeKey,
+                    initialData
+                });
+            } else setModalState({
+                mode: 'insert',
+                open: true,
+                nodeKey: null,
+                initialData: void 0
+            });
+            return true;
+        }, COMMAND_PRIORITY_NORMAL), editor.registerCommand(INSERT_INLINE_IMAGE_COMMAND, (payload)=>{
+            const imageNode = $createInlineImageNode(payload);
+            $insertNodes([
+                imageNode
+            ]);
+            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(UPDATE_INLINE_IMAGE_COMMAND, ({ nodeKey, attributes })=>{
+            const node = $getNodeByKey(nodeKey);
+            if ($isInlineImageNode(node)) {
+                node.update(attributes);
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [
+        editor
+    ]);
+    const handleSubmit = useCallback((data)=>{
+        if (null == data.documentRelation) return;
+        const attributes = {
+            ...data.documentRelation,
+            src: data.src,
+            altText: data.altText,
+            position: data.position,
+            width: data.width,
+            height: data.height,
+            showCaption: data.showCaption
+        };
+        if ('edit' === modalState.mode && null != modalState.nodeKey) editor.dispatchCommand(UPDATE_INLINE_IMAGE_COMMAND, {
+            nodeKey: modalState.nodeKey,
+            attributes
+        });
+        else editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, attributes);
+    }, [
+        editor,
+        modalState.mode,
+        modalState.nodeKey
+    ]);
+    const handleClose = useCallback(()=>{
+        setModalState(CLOSED_STATE);
+    }, []);
+    return /*#__PURE__*/ jsx(InlineImageModal, {
+        isOpen: modalState.open,
+        collection: collection,
+        data: modalState.initialData,
+        onSubmit: handleSubmit,
+        onClose: handleClose
+    });
+}
+export { INSERT_INLINE_IMAGE_COMMAND, InlineImagePlugin, OPEN_INLINE_IMAGE_MODAL_COMMAND, UPDATE_INLINE_IMAGE_COMMAND };

package/dist/field/plugins/inline-image-plugin/inline-image-modal.css

@@ -0,0 +1,25 @@
+.inline-image-plugin--modal-image {
+  margin-bottom: 2rem;
+}
+
+.inline-image-plugin--modal-media-display {
+  margin-bottom: 2em;
+}
+
+.inline-image-plugin--modal-alt-text {
+  margin-bottom: 1em;
+}
+
+.inline-image-plugin--modal-position {
+  margin-bottom: 2em;
+}
+
+.inline-image-plugin--modal-show-caption {
+  margin-bottom: 1em;
+}
+
+.inline-image-plugin--modal-actions {
+  gap: 12px;
+  display: flex;
+}
+

package/dist/field/plugins/inline-image-plugin/inline-image-modal.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type * as React from 'react';
+import type { InlineImageModalProps } from './types';
+export declare const InlineImageModal: React.FC<InlineImageModalProps>;
+//# sourceMappingURL=inline-image-modal.d.ts.map

package/dist/field/plugins/inline-image-plugin/inline-image-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-image-modal.d.ts","sourceRoot":"","sources":["../../../../src/field/plugins/inline-image-plugin/inline-image-modal.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAyBnC,OAAO,KAAK,EAAmB,qBAAqB,EAAE,MAAM,SAAS,CAAA;AA4BrE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0P5D,CAAA"}

package/dist/field/plugins/inline-image-plugin/inline-image-modal.js

@@ -0,0 +1,271 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { getCollectionDefinition } from "@byline/core";
+import { RelationPicker } from "@byline/ui";
+import { Button, Checkbox, CloseIcon, ErrorText, IconButton, Input, Label, Modal, RadioGroup, RadioGroupItem } from "@infonomic/uikit/react";
+import { useEditorConfig } from "../../config/editor-config-context.js";
+import { useModalFormState } from "../../shared/useModalFormState.js";
+import { isAltTextValid, positionOptions } from "./fields.js";
+import { deriveImageSizes, getPreferredSize } from "./utils.js";
+function emptyState() {
+    return {
+        documentRelation: null,
+        altText: '',
+        position: 'full',
+        showCaption: false
+    };
+}
+function fromInlineImageData(data) {
+    if (!data) return emptyState();
+    return {
+        documentRelation: data.documentRelation ?? null,
+        altText: data.altText ?? '',
+        position: data.position ?? 'full',
+        showCaption: data.showCaption ?? false
+    };
+}
+const InlineImageModal = ({ isOpen, collection, data: dataFromProps, onSubmit, onClose })=>{
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [altError, setAltError] = useState(null);
+    const [imageError, setImageError] = useState(null);
+    const { config: editorSettings } = useEditorConfig();
+    const [state, setState] = useModalFormState(isOpen, ()=>fromInlineImageData(dataFromProps), ()=>{
+        setAltError(null);
+        setImageError(null);
+    });
+    const targetDef = getCollectionDefinition(collection);
+    const pickedImage = useMemo(()=>{
+        const img = state.documentRelation?.document?.image;
+        return img ?? null;
+    }, [
+        state.documentRelation
+    ]);
+    const pickedThumbUrl = useMemo(()=>{
+        if (!pickedImage?.storageUrl) return null;
+        if ('image/svg+xml' === pickedImage.mimeType) return pickedImage.storageUrl;
+        if (pickedImage.thumbnailGenerated) return pickedImage.storageUrl.replace(/\.[^.]+$/, '-thumbnail.avif');
+        return pickedImage.storageUrl;
+    }, [
+        pickedImage
+    ]);
+    const pickedTitle = useMemo(()=>{
+        const title = state.documentRelation?.document?.title;
+        return 'string' == typeof title && title.length > 0 ? title : null;
+    }, [
+        state.documentRelation
+    ]);
+    const handlePickerSelect = (selection)=>{
+        setPickerOpen(false);
+        const fields = selection.record?.fields ?? {};
+        const image = fields.image;
+        const title = 'string' == typeof fields.title ? fields.title : void 0;
+        const altTextFromMedia = 'string' == typeof fields.altText ? fields.altText : void 0;
+        const sizes = image ? deriveImageSizes(image) : [];
+        setState((s)=>{
+            const document = {};
+            if (title) document.title = title;
+            if (altTextFromMedia) document.altText = altTextFromMedia;
+            if (image) document.image = image;
+            if (sizes.length > 0) document.sizes = sizes;
+            return {
+                ...s,
+                documentRelation: {
+                    targetDocumentId: selection.targetDocumentId,
+                    targetCollectionId: selection.targetCollectionId,
+                    targetCollectionPath: collection,
+                    document: Object.keys(document).length > 0 ? document : void 0
+                },
+                altText: s.altText.length > 0 ? s.altText : altTextFromMedia ?? ''
+            };
+        });
+        setImageError(null);
+    };
+    const handleSave = ()=>{
+        if (!state.documentRelation || !pickedImage) return void setImageError('Pick an image');
+        if (!isAltTextValid(state.altText)) return void setAltError('Alt text is required');
+        const preferred = getPreferredSize(state.position, pickedImage);
+        const persistedRelation = editorSettings.embedRelationsOnSave ? state.documentRelation : {
+            targetDocumentId: state.documentRelation.targetDocumentId,
+            targetCollectionId: state.documentRelation.targetCollectionId,
+            targetCollectionPath: state.documentRelation.targetCollectionPath
+        };
+        const data = {
+            documentRelation: persistedRelation,
+            src: preferred?.url ?? pickedImage.storageUrl ?? '',
+            altText: state.altText.trim(),
+            position: state.position,
+            width: preferred?.width,
+            height: preferred?.height,
+            showCaption: state.showCaption
+        };
+        onSubmit(data);
+        onClose();
+    };
+    if (!isOpen) return null;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Modal, {
+                isOpen: isOpen,
+                onDismiss: onClose,
+                closeOnOverlayClick: false,
+                children: /*#__PURE__*/ jsxs(Modal.Container, {
+                    style: {
+                        maxWidth: '520px',
+                        width: '100%'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Modal.Header, {
+                            className: "flex items-center justify-between pt-4 mb-2",
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: "m-0 text-xl",
+                                    children: "Inline image"
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    "aria-label": "Close",
+                                    size: "xs",
+                                    onClick: onClose,
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        width: "15px",
+                                        height: "15px",
+                                        svgClassName: "white-icon"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Modal.Content, {
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "flex flex-col gap-4",
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex flex-col gap-2",
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text-sm font-medium",
+                                                children: "Image"
+                                            }),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "flex items-center gap-3",
+                                                children: [
+                                                    pickedThumbUrl ? /*#__PURE__*/ jsx("img", {
+                                                        src: pickedThumbUrl,
+                                                        alt: pickedTitle ?? '',
+                                                        className: "w-18 h-18 object-cover rounded border border-gray-700"
+                                                    }) : /*#__PURE__*/ jsx("div", {
+                                                        className: "w-18 h-18 flex items-center justify-center bg-gray-800 rounded border border-gray-700 text-xs text-gray-500",
+                                                        children: "—"
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Button, {
+                                                        size: "sm",
+                                                        className: "min-w-[70px]",
+                                                        variant: "outlined",
+                                                        intent: "noeffect",
+                                                        type: "button",
+                                                        onClick: ()=>setPickerOpen(true),
+                                                        children: state.documentRelation ? 'Change image…' : `Pick ${targetDef?.labels.singular ?? 'image'}…`
+                                                    }),
+                                                    pickedTitle && /*#__PURE__*/ jsx("span", {
+                                                        className: "text-sm text-gray-200 truncate",
+                                                        children: pickedTitle
+                                                    })
+                                                ]
+                                            }),
+                                            imageError && /*#__PURE__*/ jsx(ErrorText, {
+                                                id: "image-error",
+                                                text: imageError
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Input, {
+                                        id: "inline-image-alt",
+                                        name: "altText",
+                                        label: "Alt text",
+                                        required: true,
+                                        placeholder: "Describe the image for screen readers",
+                                        value: state.altText,
+                                        error: null != altError,
+                                        errorText: altError ?? void 0,
+                                        onChange: (e)=>{
+                                            setAltError(null);
+                                            setState((s)=>({
+                                                    ...s,
+                                                    altText: e.target.value
+                                                }));
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex flex-col gap-2 mb-3",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Label, {
+                                                htmlFor: "inline-image-position",
+                                                id: "inline-image-position-label",
+                                                className: "text-sm font-medium",
+                                                label: "Position"
+                                            }),
+                                            /*#__PURE__*/ jsx(RadioGroup, {
+                                                id: "inline-image-position",
+                                                name: "position",
+                                                "aria-labelledby": "inline-image-position-label",
+                                                direction: "row",
+                                                value: state.position ?? 'full',
+                                                onValueChange: (value)=>setState((s)=>({
+                                                            ...s,
+                                                            position: value
+                                                        })),
+                                                children: positionOptions.map((opt)=>/*#__PURE__*/ jsx(RadioGroupItem, {
+                                                        id: `inline-image-position-${opt.value}`,
+                                                        value: String(opt.value),
+                                                        label: opt.label
+                                                    }, String(opt.value)))
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Checkbox, {
+                                        id: "inline-image-caption",
+                                        name: "showCaption",
+                                        label: "Show caption",
+                                        checked: state.showCaption,
+                                        onCheckedChange: (checked)=>setState((s)=>({
+                                                    ...s,
+                                                    showCaption: true === checked
+                                                }))
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Modal.Actions, {
+                            className: "flex gap-3",
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "noeffect",
+                                    type: "button",
+                                    onClick: onClose,
+                                    className: "min-w-[70px]",
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "primary",
+                                    type: "button",
+                                    onClick: handleSave,
+                                    className: "min-w-[70px]",
+                                    children: "Save"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(RelationPicker, {
+                targetCollectionPath: collection,
+                targetDefinition: targetDef,
+                isOpen: pickerOpen,
+                onSelect: handlePickerSelect,
+                onDismiss: ()=>setPickerOpen(false)
+            })
+        ]
+    });
+};
+export { InlineImageModal };

package/dist/field/plugins/inline-image-plugin/populate.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { LexicalNodeVisitor } from '../../lexical-populate-shared';
+export declare const inlineImageVisitor: LexicalNodeVisitor;
+//# sourceMappingURL=populate.d.ts.map

package/dist/field/plugins/inline-image-plugin/populate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"populate.d.ts","sourceRoot":"","sources":["../../../../src/field/plugins/inline-image-plugin/populate.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAgBH,OAAO,KAAK,EAAmB,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAExF,eAAO,MAAM,kBAAkB,EAAE,kBAuBhC,CAAA"}

package/dist/field/plugins/inline-image-plugin/populate.js

@@ -0,0 +1,28 @@
+import { deriveImageSizes } from "./utils.js";
+const inlineImageVisitor = {
+    match (node) {
+        if ('inline-image' !== node.type) return null;
+        const collectionPath = node.targetCollectionPath;
+        const documentId = node.targetDocumentId;
+        if (!collectionPath || !documentId) return null;
+        return {
+            node,
+            collectionPath,
+            documentId,
+            apply (target) {
+                const targetFields = target.fields ?? {};
+                const image = targetFields.image;
+                const sizes = image ? deriveImageSizes(image) : [];
+                const next = {
+                    ...node.document ?? {}
+                };
+                if ('string' == typeof targetFields.title) next.title = targetFields.title;
+                if ('string' == typeof targetFields.altText) next.altText = targetFields.altText;
+                if (null != image) next.image = image;
+                if (sizes.length > 0) next.sizes = sizes;
+                node.document = next;
+            }
+        };
+    }
+};
+export { inlineImageVisitor };

package/dist/field/plugins/inline-image-plugin/types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { DocumentRelation } from '../../nodes/document-relation';
+import type { Position } from '../../nodes/inline-image-node/types';
+/**
+ * The form-shape carried into / out of the inline image modal. Mirrors
+ * `InlineImageAttributes` minus the Lexical-managed bits (`key`, `caption:
+ * LexicalEditor`) — those don't belong in form state. The document-reference
+ * envelope is carried as an optional nested `DocumentRelation` here (rather
+ * than spread flat) because the modal needs a single null/non-null state to
+ * represent "user hasn't picked a document yet".
+ */
+export interface InlineImageData {
+    documentRelation: DocumentRelation | null;
+    src: string;
+    altText?: string;
+    position?: Position;
+    width?: number | string;
+    height?: number | string;
+    showCaption?: boolean;
+}
+export interface InlineImageModalProps {
+    /** Modal visibility — driven by the plugin's open/close commands. */
+    isOpen: boolean;
+    /** The collection path the picker should target — typically `'media'`. */
+    collection: string;
+    /** Pre-filled data when the modal opens in edit mode; undefined for insert. */
+    data?: InlineImageData;
+    onSubmit: (data: InlineImageData) => void;
+    onClose: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/field/plugins/inline-image-plugin/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/field/plugins/inline-image-plugin/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AACrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAA;AAEnE;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe;IAC9B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,qEAAqE;IACrE,MAAM,EAAE,OAAO,CAAA;IACf,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAA;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB"}

package/dist/field/plugins/inline-image-plugin/types.js

@@ -0,0 +1 @@
+export { };

package/dist/field/plugins/inline-image-plugin/utils.d.ts

@@ -0,0 +1,42 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { StoredFileValue } from '@byline/core';
+import type { Position } from '../../nodes/inline-image-node/types';
+export interface PreferredSize {
+    url: string;
+    width?: number;
+    height?: number;
+}
+/**
+ * Choose a sensible image URL + dimensions for the editor preview given the
+ * picked media's `image` field and the user's chosen position. Reads
+ * directly from `image.variants` (persisted on the file value at upload
+ * time). SVGs return the original `storageUrl`; missing/empty variants
+ * fall back to the original.
+ */
+export declare function getPreferredSize(position: Position, image: StoredFileValue | null | undefined): PreferredSize | null;
+/**
+ * One denormalised image variant — the renderer-facing shape used by the
+ * inline-image node and richtext after-read hook. Mirrors the persisted
+ * `PersistedVariant` with `storageUrl` renamed to `url` for renderer
+ * ergonomics.
+ */
+export interface DerivedImageSize {
+    name: string;
+    url: string;
+    width?: number;
+    height?: number;
+    format: string;
+}
+/**
+ * Map a `StoredFileValue.variants` array into the renderer shape. SVGs and
+ * variant-less images return `[]` so renderers fall back to
+ * `image.storageUrl`.
+ */
+export declare function deriveImageSizes(image: StoredFileValue | null | undefined): DerivedImageSize[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/field/plugins/inline-image-plugin/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/field/plugins/inline-image-plugin/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAA;AAsBnE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,GACxC,aAAa,GAAG,IAAI,CA0BtB;AAED;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,GAAG,gBAAgB,EAAE,CAiB9F"}

package/dist/field/plugins/inline-image-plugin/utils.js

@@ -0,0 +1,46 @@
+function variantFor(position) {
+    switch(position){
+        case 'left':
+        case 'right':
+            return 'card';
+        case 'wide':
+            return 'desktop';
+        default:
+            return 'tablet';
+    }
+}
+function getPreferredSize(position, image) {
+    if (image?.storageUrl == null) return null;
+    if ('image/svg+xml' === image.mimeType) return {
+        url: image.storageUrl,
+        width: image.imageWidth,
+        height: image.imageHeight
+    };
+    const wanted = variantFor(position);
+    const match = image.variants?.find((v)=>v.name === wanted);
+    if (match?.storageUrl) return {
+        url: match.storageUrl,
+        width: match.width ?? image.imageWidth,
+        height: match.height ?? image.imageHeight
+    };
+    return {
+        url: image.storageUrl,
+        width: image.imageWidth,
+        height: image.imageHeight
+    };
+}
+function deriveImageSizes(image) {
+    if (!image?.storageUrl) return [];
+    if ('image/svg+xml' === image.mimeType) return [];
+    if (!image.variants || 0 === image.variants.length) return [];
+    const out = [];
+    for (const variant of image.variants)if (variant.storageUrl) out.push({
+        name: variant.name,
+        url: variant.storageUrl,
+        width: variant.width,
+        height: variant.height,
+        format: variant.format ?? 'avif'
+    });
+    return out;
+}
+export { deriveImageSizes, getPreferredSize };

package/dist/field/plugins/layout-plugin/insert-layout-modal.css

@@ -0,0 +1,20 @@
+.insert-layout-modal-container {
+  min-width: 340px;
+  max-width: 600px;
+}
+
+.insert-layout-modal-select {
+  margin: 2rem 0 0;
+}
+
+@media screen and (min-width: 640px) {
+  .insert-layout-modal-select {
+    width: 100%;
+    margin: 1rem 0 .5rem;
+  }
+
+  .insert-layout-modal-actions {
+    margin: 0;
+  }
+}
+