@formicoidea/labre-core 0.50.0 → 0.51.0

package/dist/_pkgs/affine-block-frame/translations.js

@@ -1,4 +1,4 @@
-import { TOOLBAR_INSERT_INTO_PAGE, TOOLBAR_UNGROUP, } from '../affine-shared/services/index.js';
+import { SAVE_AS_TEMPLATE, TOOLBAR_INSERT_INTO_PAGE, TOOLBAR_UNGROUP, } from '../affine-shared/services/index.js';
 /**
  * The frame's own seed: the default title a newly created frame is stamped
  * with (`Frame 3`), written into the document at creation
@@ -48,6 +48,19 @@ export const FRAME_TOAST_INSERTED_MESSAGE = [
     'Frame has been inserted into page',
 ];
 export const FRAME_TOOLBAR_UNGROUP = TOOLBAR_UNGROUP;
+/**
+ * "Save as template" (the `FrameTemplateProvider` seam): the button, then
+ * the notification that says how the host's save went.
+ */
+export const FRAME_TOOLBAR_SAVE_AS_TEMPLATE = SAVE_AS_TEMPLATE;
+export const FRAME_TOAST_TEMPLATE_SAVED = [
+    'com.labre.frame.toast.template-saved',
+    'Frame saved as a template',
+];
+export const FRAME_TOAST_TEMPLATE_SAVE_FAILED = [
+    'com.labre.frame.toast.template-save-failed',
+    'The frame could not be saved as a template',
+];
 export const FRAME_TOOLBAR_BACKGROUND = [
     'com.labre.frame.toolbar.background',
     'Background',
@@ -117,6 +130,8 @@ export const FRAME_CHROME_WORDINGS = [
     FRAME_DENSE_MENU_SLIDE,
     FRAME_TOAST_INSERTED_MESSAGE,
     FRAME_TOOLBAR_BACKGROUND,
+    FRAME_TOAST_TEMPLATE_SAVED,
+    FRAME_TOAST_TEMPLATE_SAVE_FAILED,
     FRAME_PRESENT_TOOL_TOOLTIP,
     FRAME_PRESENT_PREVIOUS,
     FRAME_PRESENT_NEXT,

package/dist/_pkgs/affine-block-frame/view.js

@@ -8,6 +8,7 @@ import { effects } from './effects.js';
 import { FrameBlockInteraction } from './frame-block.js';
 import { FrameHighlightManager } from './frame-highlight-manager.js';
 import { FrameBlockSpec } from './frame-spec.js';
+import { FrameTemplateWatcher } from './frame-template.js';
 import { FrameTool } from './frame-tool.js';
 import { frameToolbarExtension } from './frame-toolbar.js';
 import { edgelessNavigatorBgWidget } from './present/navigator-bg-widget.js';
@@ -33,6 +34,11 @@ export class FrameViewExtension extends ViewExtensionProvider {
             context.register(edgelessNavigatorBgWidget);
             context.register(EdgelessClipboardFrameConfig);
             context.register(FrameBlockInteraction);
+            // One watcher per editor a viewer edits in: a preview mounted on the
+            // same store would report the same deletion a second time.
+            if (!this.isPreview(context.scope)) {
+                context.register(FrameTemplateWatcher);
+            }
             // The presentation order's one write (ADR 0034). The frame panel also
             // mounts in page mode: it runs the imported descriptor, not this
             // registration, so its reorder works in both modes. `canvas.present`

package/dist/_pkgs/affine-block-image/asset-picker.d.ts

@@ -0,0 +1,63 @@
+import { type ImageBlockModel, type ImageBlockProps } from '../affine-model/index.js';
+import { type AssetRef } from '../affine-shared/services/index.js';
+import { type IVec } from '../global/gfx/index.js';
+import type { BlockStdScope } from '../std/index.js';
+import type { BlockModel } from '../store/index.js';
+/**
+ * Images from the host's asset library (`AssetPickerProvider`, labre P4): the
+ * block references a blob the host already stores, by its `sourceId`. Nothing
+ * here calls `BlobSource.set`; the bytes are read once, through the store's
+ * blob sources, only to measure an image whose ref carries no size.
+ *
+ * Without a host every entry point keeps the system file chooser and the
+ * upload path of `utils.ts`. Pasting and dropping never come here.
+ */
+type Size = {
+    width: number;
+    height: number;
+};
+/**
+ * Adds one image block per image ref next to `targetModel`, as one undo
+ * step. Refs that are not `image/*`, or whose size cannot be read, are
+ * skipped. Nothing is written on a read-only document.
+ */
+export declare function addSiblingImageBlocksFromAssets(std: BlockStdScope, assets: readonly AssetRef[], targetModel: BlockModel, placement?: 'after' | 'before'): Promise<string[]>;
+/**
+ * The canvas counterpart of {@link addSiblingImageBlocksFromAssets}: places
+ * the images like `addImages` does (around `point`, active layer, selected).
+ */
+export declare function addImagesFromAssets(std: BlockStdScope, assets: readonly AssetRef[], options: {
+    point?: IVec;
+    maxWidth?: number;
+    shouldTransformPoint?: boolean;
+}): Promise<string[]>;
+/**
+ * The props that swap `model`'s picture for one of `natural` size while it
+ * keeps its displayed width and follows the new ratio. On the canvas the
+ * frame keeps its top-left corner and width; in a page the block keeps its
+ * `width` (an image still at its natural size, `width` unset, stays so).
+ */
+export declare function replacementProps(model: ImageBlockModel, asset: Pick<AssetRef, 'sourceId' | 'size'>, natural: Size): Partial<ImageBlockProps>;
+/**
+ * Swaps the picture of one image block for `asset`, keeping its displayed
+ * width and its caption, in one undo step. `false` when nothing was written:
+ * a read-only document, the same blob, a ref that is not an image, a size
+ * that cannot be read, or a block deleted meanwhile.
+ */
+export declare function replaceImage(std: BlockStdScope, model: ImageBlockModel, asset: AssetRef): Promise<boolean>;
+/**
+ * The image entries of the slash menu and of the mobile keyboard toolbar:
+ * the host's asset dialog when there is one, the system file chooser
+ * otherwise (the upload path, unchanged).
+ */
+export declare function pickAndAddSiblingImageBlocks(std: BlockStdScope, targetModel: BlockModel, placement?: 'after' | 'before'): Promise<string[]>;
+/** The canvas's image button: the host's asset dialog, or the file chooser. */
+export declare function pickAndAddImages(std: BlockStdScope, options: {
+    maxWidth?: number;
+}): Promise<string[]>;
+/**
+ * The image toolbar's "Replace": only with a host (`false` otherwise, and
+ * the toolbar does not offer it), one ref, `mode: 'replace'`.
+ */
+export declare function pickAndReplaceImage(std: BlockStdScope, model: ImageBlockModel): Promise<boolean>;
+export {};

package/dist/_pkgs/affine-block-image/asset-picker.js

@@ -0,0 +1,183 @@
+import { toast } from '../affine-components/toast/index.js';
+import { ImageBlockSchema, } from '../affine-model/index.js';
+import { AssetPickerProvider, translateKey, } from '../affine-shared/services/index.js';
+import { getImageFilesFromLocal, readImageSize, } from '../affine-shared/utils/index.js';
+import { Bound } from '../global/gfx/index.js';
+import { IMAGE_TOAST_READ_SIZE_FAILED } from './translations.js';
+import { addImages, addSiblingImageBlocks, placeImagesOnCanvas, } from './utils.js';
+function isSize(width = 0, height = 0) {
+    return width > 0 && height > 0;
+}
+async function naturalSize(store, asset) {
+    const { width = 0, height = 0 } = asset;
+    if (isSize(width, height))
+        return { width, height };
+    const blob = await store.blobSync.get(asset.sourceId);
+    if (!blob)
+        return null;
+    // `readImageSize` trusts the MIME type; a blob source may not keep it.
+    const typed = blob.type ? blob : new Blob([blob], { type: asset.type });
+    const size = await readImageSize(typed);
+    return isSize(size.width, size.height) ? size : null;
+}
+async function imagePropsFrom(std, assets) {
+    const images = assets.filter(asset => asset.type.startsWith('image/'));
+    const sized = await Promise.all(images.map(async (asset) => {
+        const size = await naturalSize(std.store, asset);
+        return size
+            ? { sourceId: asset.sourceId, size: asset.size, ...size }
+            : null;
+    }));
+    const props = sized.filter((p) => p !== null);
+    if (props.length < images.length) {
+        toast(std.host, translateKey(std, ...IMAGE_TOAST_READ_SIZE_FAILED));
+    }
+    return props;
+}
+/**
+ * Adds one image block per image ref next to `targetModel`, as one undo
+ * step. Refs that are not `image/*`, or whose size cannot be read, are
+ * skipped. Nothing is written on a read-only document.
+ */
+export async function addSiblingImageBlocksFromAssets(std, assets, targetModel, placement = 'after') {
+    if (std.store.readonly)
+        return [];
+    const props = await imagePropsFrom(std, assets);
+    // Re-checked: the document may have turned read-only while measuring.
+    if (!props.length || std.store.readonly)
+        return [];
+    const flavour = ImageBlockSchema.model.flavour;
+    std.store.captureSync();
+    return std.store.addSiblingBlocks(targetModel, props.map(p => ({ ...p, flavour })), placement);
+}
+/**
+ * The canvas counterpart of {@link addSiblingImageBlocksFromAssets}: places
+ * the images like `addImages` does (around `point`, active layer, selected).
+ */
+export async function addImagesFromAssets(std, assets, options) {
+    if (std.store.readonly)
+        return [];
+    const props = await imagePropsFrom(std, assets);
+    if (!props.length || std.store.readonly)
+        return [];
+    std.store.captureSync();
+    return placeImagesOnCanvas(std, props, options);
+}
+/**
+ * The props that swap `model`'s picture for one of `natural` size while it
+ * keeps its displayed width and follows the new ratio. On the canvas the
+ * frame keeps its top-left corner and width; in a page the block keeps its
+ * `width` (an image still at its natural size, `width` unset, stays so).
+ */
+export function replacementProps(model, asset, natural) {
+    const ratio = natural.height / natural.width;
+    const props = {
+        sourceId: asset.sourceId,
+        size: asset.size,
+    };
+    if (model.parent?.flavour === 'affine:surface') {
+        const bound = Bound.deserialize(model.props.xywh);
+        bound.h = bound.w * ratio;
+        props.xywh = bound.serialize();
+        props.width = natural.width;
+        props.height = natural.height;
+        return props;
+    }
+    const width = model.props.width ?? 0;
+    if (width > 0) {
+        props.width = width;
+        props.height = width * ratio;
+    }
+    return props;
+}
+/**
+ * Swaps the picture of one image block for `asset`, keeping its displayed
+ * width and its caption, in one undo step. `false` when nothing was written:
+ * a read-only document, the same blob, a ref that is not an image, a size
+ * that cannot be read, or a block deleted meanwhile.
+ */
+export async function replaceImage(std, model, asset) {
+    const { store } = model;
+    if (store.readonly)
+        return false;
+    if (!asset.type.startsWith('image/'))
+        return false;
+    if (asset.sourceId === model.props.sourceId$.peek())
+        return false;
+    const natural = await naturalSize(store, asset);
+    if (!natural) {
+        toast(std.host, translateKey(std, ...IMAGE_TOAST_READ_SIZE_FAILED));
+        return false;
+    }
+    if (store.readonly || !store.getBlock(model.id))
+        return false;
+    store.captureSync();
+    store.transact(() => {
+        store.updateBlock(model, replacementProps(model, asset, natural));
+        // A crop is a window on the picture it was drawn on (ADR 0037).
+        if (model.props.crop)
+            delete model.props.crop;
+    });
+    return true;
+}
+function pickRequest(std, request) {
+    const picker = std.getOptional(AssetPickerProvider);
+    if (!picker)
+        return null;
+    return picker.pick({ ...request, docId: std.store.id });
+}
+/**
+ * The image entries of the slash menu and of the mobile keyboard toolbar:
+ * the host's asset dialog when there is one, the system file chooser
+ * otherwise (the upload path, unchanged).
+ */
+export async function pickAndAddSiblingImageBlocks(std, targetModel, placement = 'after') {
+    const picked = pickRequest(std, {
+        kind: 'image',
+        mode: 'insert',
+        multiple: true,
+    });
+    if (!picked) {
+        const files = await getImageFilesFromLocal();
+        return addSiblingImageBlocks(std, files, targetModel, placement);
+    }
+    const assets = await picked;
+    if (!assets?.length)
+        return [];
+    return addSiblingImageBlocksFromAssets(std, assets, targetModel, placement);
+}
+/** The canvas's image button: the host's asset dialog, or the file chooser. */
+export async function pickAndAddImages(std, options) {
+    const picked = pickRequest(std, {
+        kind: 'image',
+        mode: 'insert',
+        multiple: true,
+    });
+    if (!picked) {
+        const files = await getImageFilesFromLocal();
+        return addImages(std, files, options);
+    }
+    const assets = await picked;
+    if (!assets?.length)
+        return [];
+    return addImagesFromAssets(std, assets, options);
+}
+/**
+ * The image toolbar's "Replace": only with a host (`false` otherwise, and
+ * the toolbar does not offer it), one ref, `mode: 'replace'`.
+ */
+export async function pickAndReplaceImage(std, model) {
+    if (model.store.readonly)
+        return false;
+    const picked = pickRequest(std, {
+        kind: 'image',
+        mode: 'replace',
+        multiple: false,
+    });
+    if (!picked)
+        return false;
+    const [asset] = (await picked) ?? [];
+    if (!asset)
+        return false;
+    return replaceImage(std, model, asset);
+}

package/dist/_pkgs/affine-block-image/commands/insert-images.d.ts

@@ -1,5 +1,10 @@
 import type { Command } from '../../std/index.js';
 import type { BlockModel } from '../../store/index.js';
+/**
+ * Inserts images next to the selection: from the host's asset dialog
+ * (`AssetPickerProvider`) when there is one, from the system file chooser
+ * otherwise.
+ */
 export declare const insertImagesCommand: Command<{
     selectedModels?: BlockModel[];
     removeEmptyLine?: boolean;

package/dist/_pkgs/affine-block-image/commands/insert-images.js

@@ -1,5 +1,9 @@
-import { getImageFilesFromLocal } from '../../affine-shared/utils/index.js';
-import { addSiblingImageBlocks } from '../utils.js';
+import { pickAndAddSiblingImageBlocks } from '../asset-picker.js';
+/**
+ * Inserts images next to the selection: from the host's asset dialog
+ * (`AssetPickerProvider`) when there is one, from the system file chooser
+ * otherwise.
+ */
 export const insertImagesCommand = (ctx, next) => {
     const { selectedModels, placement, removeEmptyLine, std } = ctx;
     if (!selectedModels?.length)
@@ -8,12 +12,8 @@ export const insertImagesCommand = (ctx, next) => {
         ? selectedModels[0]
         : selectedModels[selectedModels.length - 1];
     return next({
-        insertedImageIds: getImageFilesFromLocal()
-            .then(files => addSiblingImageBlocks(std, files, targetModel, placement))
-            .then(result => {
-            if (result.length &&
-                removeEmptyLine &&
-                targetModel.text?.length === 0) {
+        insertedImageIds: pickAndAddSiblingImageBlocks(std, targetModel, placement).then(result => {
+            if (result.length && removeEmptyLine && targetModel.text?.length === 0) {
                 std.store.deleteBlock(targetModel);
             }
             return result;

package/dist/_pkgs/affine-block-image/components/page-image-block.d.ts

@@ -7,6 +7,17 @@ export declare class ImageBlockPageComponent extends ImageBlockPageComponent_bas
     static styles: import("lit").CSSResult;
     resizeable$: import("@preact/signals-core").ReadonlySignal<boolean>;
     private _isDragging;
+    /** The source's pixel size once loaded: the crop's aspect needs it. */
+    private accessor _loadedNatural;
+    private readonly _onLoad;
+    /**
+     * The box of a cropped page image (ADR 0037). `width`/`height` stay the
+     * displayed size of the WHOLE picture, so the box is the crop's share of it
+     * and cropping keeps the picture's scale. While the size is unknown (no
+     * stored size, image not loaded yet) the image is drawn whole: an empty
+     * box would never load a lazy image.
+     */
+    private _croppedBox;
     private get _doc();
     private get _host();
     private get _model();

package/dist/_pkgs/affine-block-image/components/page-image-block.js

@@ -40,16 +40,20 @@ import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { BlockSelection, ShadowlessElement, TextSelection } from '../../std/index.js';
 import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
+import { croppedImageStyle } from '../crop/crop-controller.js';
 import { ImageResizeManager } from '../image-resize-manager.js';
 import { IMAGE_LABEL, IMAGE_TOAST_DOWNLOAD_FAILED } from '../translations.js';
 import { shouldResizeImage } from '../utils.js';
 import { ImageSelectedRect } from './image-selected-rect.js';
 let ImageBlockPageComponent = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let __loadedNatural_decorators;
+    let __loadedNatural_initializers = [];
+    let __loadedNatural_extraInitializers = [];
     let _block_decorators;
     let _block_initializers = [];
     let _block_extraInitializers = [];
@@ -62,9 +66,11 @@ let ImageBlockPageComponent = (() => {
     return class ImageBlockPageComponent extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __loadedNatural_decorators = [state()];
             _block_decorators = [property({ attribute: false })];
             _state_decorators = [property({ attribute: false })];
             _resizeImg_decorators = [query('.resizable-img')];
+            __esDecorate(this, null, __loadedNatural_decorators, { kind: "accessor", name: "_loadedNatural", static: false, private: false, access: { has: obj => "_loadedNatural" in obj, get: obj => obj._loadedNatural, set: (obj, value) => { obj._loadedNatural = value; } }, metadata: _metadata }, __loadedNatural_initializers, __loadedNatural_extraInitializers);
             __esDecorate(this, null, _block_decorators, { kind: "accessor", name: "block", static: false, private: false, access: { has: obj => "block" in obj, get: obj => obj.block, set: (obj, value) => { obj.block = value; } }, metadata: _metadata }, _block_initializers, _block_extraInitializers);
             __esDecorate(this, null, _state_decorators, { kind: "accessor", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
             __esDecorate(this, null, _resizeImg_decorators, { kind: "accessor", name: "resizeImg", static: false, private: false, access: { has: obj => "resizeImg" in obj, get: obj => obj.resizeImg, set: (obj, value) => { obj.resizeImg = value; } }, metadata: _metadata }, _resizeImg_initializers, _resizeImg_extraInitializers);
@@ -115,10 +121,44 @@ let ImageBlockPageComponent = (() => {
       height: 100%;
     }
 
+    affine-page-image .labre-image-crop-window {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+    }
+
     affine-page-image .comment-highlighted {
       outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
     }
   `; }
+        #_loadedNatural_accessor_storage;
+        /** The source's pixel size once loaded: the crop's aspect needs it. */
+        get _loadedNatural() { return this.#_loadedNatural_accessor_storage; }
+        set _loadedNatural(value) { this.#_loadedNatural_accessor_storage = value; }
+        /**
+         * The box of a cropped page image (ADR 0037). `width`/`height` stay the
+         * displayed size of the WHOLE picture, so the box is the crop's share of it
+         * and cropping keeps the picture's scale. While the size is unknown (no
+         * stored size, image not loaded yet) the image is drawn whole: an empty
+         * box would never load a lazy image.
+         */
+        _croppedBox(imageSize) {
+            const crop = this.block.cropController.crop$.value;
+            if (!crop)
+                return null;
+            const { width, height } = this._model.props;
+            const natural = width && height ? { width, height } : this._loadedNatural;
+            if (!natural)
+                return null;
+            const aspect = (crop.w * natural.width) / (crop.h * natural.height);
+            const boxWidth = this._isDragging
+                ? imageSize.width
+                : `${natural.width * crop.w}px`;
+            return {
+                crop,
+                style: { width: boxWidth, aspectRatio: `${aspect}` },
+            };
+        }
         get _doc() {
             return this.block.store;
         }
@@ -326,6 +366,7 @@ let ImageBlockPageComponent = (() => {
         }
         render() {
             const imageSize = this._normalizeImageSize();
+            const cropped = this._croppedBox(imageSize);
             const imageSelectedRect = this.resizeable$.value
                 ? ImageSelectedRect(this._doc.readonly)
                 : null;
@@ -339,18 +380,31 @@ let ImageBlockPageComponent = (() => {
                 'resizable-img': true,
                 'comment-highlighted': this.block.isCommentHighlighted,
             })}
-        style=${styleMap(imageSize)}
+        style=${styleMap(cropped ? cropped.style : imageSize)}
       >
-        <img
-          class="drag-target"
-          draggable="false"
-          loading="lazy"
-          src=${blobUrl}
-          alt=${caption}
-          @error=${this._handleError}
-        />
-
-        ${imageSelectedRect}
+        ${cropped
+                ? html `<div class="labre-image-crop-window">
+              <img
+                class="drag-target"
+                draggable="false"
+                loading="lazy"
+                src=${blobUrl}
+                alt=${caption}
+                style=${croppedImageStyle(cropped.crop)}
+                @load=${this._onLoad}
+                @error=${this._handleError}
+              />
+            </div>`
+                : html `<img
+              class="drag-target"
+              draggable="false"
+              loading="lazy"
+              src=${blobUrl}
+              alt=${caption}
+              @load=${this._onLoad}
+              @error=${this._handleError}
+            />`}
+        ${imageSelectedRect} ${this.block.cropController.renderOverlay(blobUrl)}
       </div>
 
       ${when(loading, () => html `<div class="loading">${icon}</div>`)}
@@ -377,6 +431,21 @@ let ImageBlockPageComponent = (() => {
             super(...arguments);
             this.resizeable$ = computed(() => this.block.resizeable$.value);
             this._isDragging = false;
+            this.#_loadedNatural_accessor_storage = __runInitializers(this, __loadedNatural_initializers, null);
+            this._onLoad = (__runInitializers(this, __loadedNatural_extraInitializers), (event) => {
+                const img = event.currentTarget;
+                if (!img.naturalWidth || !img.naturalHeight)
+                    return;
+                const loaded = this._loadedNatural;
+                if (loaded?.width === img.naturalWidth &&
+                    loaded.height === img.naturalHeight) {
+                    return;
+                }
+                this._loadedNatural = {
+                    width: img.naturalWidth,
+                    height: img.naturalHeight,
+                };
+            });
             this.#block_accessor_storage = __runInitializers(this, _block_initializers, void 0);
             this.#state_accessor_storage = (__runInitializers(this, _block_extraInitializers), __runInitializers(this, _state_initializers, void 0));
             this.#resizeImg_accessor_storage = (__runInitializers(this, _state_extraInitializers), __runInitializers(this, _resizeImg_initializers, void 0));

package/dist/_pkgs/affine-block-image/configs/replace-action.d.ts

@@ -0,0 +1,9 @@
+import type { ImageBlockModel } from '../../affine-model/index.js';
+import { type ToolbarAction, type ToolbarContext } from '../../affine-shared/services/index.js';
+/**
+ * "Replace" on the image toolbar, page and canvas alike: opens the host's
+ * asset dialog in `replace` mode and swaps the picture in place
+ * (`replaceImage`). It exists only with an `AssetPickerProvider` and on a
+ * writable document: without a host there is no library to pick from.
+ */
+export declare function imageReplaceToolbarAction(getModel: (ctx: ToolbarContext) => ImageBlockModel | null): ToolbarAction;

package/dist/_pkgs/affine-block-image/configs/replace-action.js

@@ -0,0 +1,27 @@
+import { AssetPickerProvider, } from '../../affine-shared/services/index.js';
+import { ReplaceIcon } from '@blocksuite/icons/lit';
+import { pickAndReplaceImage } from '../asset-picker.js';
+import { IMAGE_TOOLBAR_REPLACE } from '../translations.js';
+/**
+ * "Replace" on the image toolbar, page and canvas alike: opens the host's
+ * asset dialog in `replace` mode and swaps the picture in place
+ * (`replaceImage`). It exists only with an `AssetPickerProvider` and on a
+ * writable document: without a host there is no library to pick from.
+ */
+export function imageReplaceToolbarAction(getModel) {
+    return {
+        id: 'a.replace',
+        tooltip: 'Replace',
+        tooltipWording: IMAGE_TOOLBAR_REPLACE,
+        icon: ReplaceIcon(),
+        when: ctx => !ctx.readonly &&
+            !!ctx.std.getOptional(AssetPickerProvider) &&
+            getModel(ctx) !== null,
+        run(ctx) {
+            const model = getModel(ctx);
+            if (!model)
+                return;
+            pickAndReplaceImage(ctx.std, model).catch(console.error);
+        },
+    };
+}

package/dist/_pkgs/affine-block-image/configs/toolbar.js

@@ -2,10 +2,12 @@ import { ImageBlockModel } from '../../affine-model/index.js';
 import { ActionPlacement, blockCommentToolbarButton, TOOLBAR_CAPTION, TOOLBAR_COPY, TOOLBAR_DELETE, TOOLBAR_DOWNLOAD, TOOLBAR_DUPLICATE, ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
 import { BookmarkIcon, CaptionIcon, CopyIcon, DeleteIcon, DownloadIcon, DuplicateIcon, } from '@blocksuite/icons/lit';
 import { BlockFlavourIdentifier } from '../../std/index.js';
+import { imageCropToolbarAction } from '../crop/crop-toolbar.js';
 import { ImageBlockComponent } from '../image-block.js';
 import { ImageEdgelessBlockComponent } from '../image-edgeless-block.js';
 import { IMAGE_TOOLBAR_TURN_INTO_CARD_VIEW } from '../translations.js';
 import { duplicate } from '../utils.js';
+import { imageReplaceToolbarAction } from './replace-action.js';
 const trackBaseProps = {
     category: 'image',
     type: 'card view',
@@ -22,6 +24,7 @@ const builtinToolbarConfig = {
                 block?.download();
             },
         },
+        imageReplaceToolbarAction(ctx => ctx.getCurrentBlockByType(ImageBlockComponent)?.model ?? null),
         {
             id: 'b.caption',
             tooltip: 'Caption',
@@ -36,6 +39,7 @@ const builtinToolbarConfig = {
                 });
             },
         },
+        imageCropToolbarAction(ctx => ctx.getCurrentBlockByType(ImageBlockComponent)),
         {
             id: 'c.comment',
             ...blockCommentToolbarButton,
@@ -117,6 +121,7 @@ const builtinSurfaceToolbarConfig = {
                 block?.download();
             },
         },
+        imageReplaceToolbarAction(ctx => ctx.getCurrentBlockByType(ImageEdgelessBlockComponent)?.model ?? null),
         {
             id: 'b.caption',
             tooltip: 'Caption',
@@ -131,6 +136,7 @@ const builtinSurfaceToolbarConfig = {
                 });
             },
         },
+        imageCropToolbarAction(ctx => ctx.getCurrentBlockByType(ImageEdgelessBlockComponent)),
         {
             id: 'c.comment',
             ...blockCommentToolbarButton,

package/dist/_pkgs/affine-block-image/crop/crop-controller.d.ts

@@ -0,0 +1,46 @@
+import { type ImageBlockModel, type ImageCrop, type ImageCropMask } from '../../affine-model/index.js';
+import { nothing } from 'lit';
+import { type CropRect } from './crop-math.js';
+/** What the controller needs from the block it serves, page or canvas. */
+export interface CroppableImageBlock {
+    readonly model: ImageBlockModel;
+    querySelector<E extends Element = Element>(selectors: string): E | null;
+}
+/**
+ * The « Rogner » state of one image block (ADR 0037), shared by the page and
+ * the canvas components: which preset the crop frame is open on, if any, and
+ * the gestures that write. The frame is local UI and never stored.
+ */
+export declare class ImageCropController {
+    private readonly _block;
+    private readonly _onCanvas;
+    /** The mask the crop frame is open on, `null` when it is closed. */
+    readonly editing$: import("@preact/signals-core").Signal<"free" | "16:9" | "4:3" | "1:1" | null>;
+    readonly crop$: import("@preact/signals-core").ReadonlySignal<ImageCrop | undefined>;
+    constructor(_block: CroppableImageBlock, _onCanvas: boolean);
+    /**
+     * The source's proportions: the loaded `<img>`'s pixel size, else what the
+     * block stores. Only the ratio matters to the crop, and an SVG without an
+     * intrinsic size loads with none: a canvas box is the cropped share of the
+     * whole picture, a page `width`/`height` is the whole picture.
+     */
+    natural(): {
+        width: number;
+        height: number;
+    } | null;
+    /**
+     * Open the frame on a preset. A ratio preset first writes its largest
+     * centred window — unless the crop already uses that preset, which keeps
+     * the author's adjustment. Free opens on the current crop and writes
+     * nothing until a drag.
+     */
+    choose(mask: ImageCropMask): void;
+    commit(rect: CropRect, mask?: "free" | "16:9" | "4:3" | "1:1"): boolean;
+    /** « Image d'origine »: removes the crop; the bytes never changed. */
+    restoreOriginal(): boolean;
+    stop(): void;
+    /** The frame, or nothing when it is closed or the page is readonly. */
+    renderOverlay(src: string | null | undefined, rotate?: number): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+/** Inline styles of an `<img>` showing `crop` of its source in its box. */
+export declare function croppedImageStyle(crop: ImageCrop): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/style-map.js").StyleMapDirective>;