@formicoidea/labre-core 0.31.0 → 0.32.0

package/dist/_pkgs/affine-block-database/properties/paste-url.js

@@ -0,0 +1,98 @@
+import { isValidUrl, normalizeUrl } from '../../affine-shared/utils/index.js';
+const URL_SCHEME_IN_TOKEN_REGEXP = /(?:https?:\/\/|ftp:\/\/|sftp:\/\/|mailto:|tel:|www\.)/i;
+const URL_LEADING_DELIMITER_REGEXP = /^[-([{<'"~]+/;
+const URL_TRAILING_DELIMITER_REGEXP = /[)\]}>.,;:!?'"]+$/;
+function appendUrlTextSegment(segments, segment) {
+    if (!segment.text)
+        return;
+    const last = segments[segments.length - 1];
+    if (last && !last.link && !segment.link) {
+        last.text += segment.text;
+        return;
+    }
+    segments.push(segment);
+}
+function splitTokenByUrl(token, baseUrl) {
+    const schemeMatch = token.match(URL_SCHEME_IN_TOKEN_REGEXP);
+    const schemeIndex = schemeMatch?.index;
+    if (typeof schemeIndex === 'number' && schemeIndex > 0) {
+        return [
+            { text: token.slice(0, schemeIndex) },
+            ...splitTokenByUrl(token.slice(schemeIndex), baseUrl),
+        ];
+    }
+    const leading = token.match(URL_LEADING_DELIMITER_REGEXP)?.[0] ?? '';
+    const withoutLeading = token.slice(leading.length);
+    const trailing = withoutLeading.match(URL_TRAILING_DELIMITER_REGEXP)?.[0] ?? '';
+    const core = trailing
+        ? withoutLeading.slice(0, withoutLeading.length - trailing.length)
+        : withoutLeading;
+    if (core && isValidUrl(core, baseUrl)) {
+        const segments = [];
+        appendUrlTextSegment(segments, { text: leading });
+        appendUrlTextSegment(segments, { text: core, link: normalizeUrl(core) });
+        appendUrlTextSegment(segments, { text: trailing });
+        return segments;
+    }
+    return [{ text: token }];
+}
+/**
+ * Split pasted plain text into mixed segments, where only the URL segments
+ * carry link metadata. Text like `see https://example.com, then stop` keeps its
+ * prose as prose and linkifies only the address, punctuation excluded.
+ */
+export function splitTextByUrl(text, baseUrl = location.origin) {
+    const chunks = text.match(/\s+|\S+/g);
+    if (!chunks) {
+        return [];
+    }
+    const segments = [];
+    chunks.forEach(chunk => {
+        if (/^\s+$/.test(chunk)) {
+            appendUrlTextSegment(segments, { text: chunk });
+            return;
+        }
+        splitTokenByUrl(chunk, baseUrl).forEach(segment => {
+            appendUrlTextSegment(segments, segment);
+        });
+    });
+    return segments;
+}
+/**
+ * Describe a paste for the database cells: the segments to insert, plus the
+ * single URL the whole paste amounts to (if any), which is the only case where
+ * a doc link may be resolved instead.
+ */
+export function analyzeTextForUrlPaste(text) {
+    const segments = splitTextByUrl(text);
+    const firstSegment = segments[0];
+    const singleUrl = segments.length === 1 && firstSegment?.link && firstSegment.text === text
+        ? firstSegment.link
+        : undefined;
+    return {
+        segments,
+        singleUrl,
+    };
+}
+export function insertUrlTextSegments(inlineEditor, inlineRange, segments) {
+    let index = inlineRange.index;
+    let replacedSelection = false;
+    segments.forEach(segment => {
+        if (!segment.text)
+            return;
+        const attributes = segment.link
+            ? { link: segment.link }
+            : undefined;
+        inlineEditor.insertText({
+            index,
+            // Only the first insertion replaces what the user had selected.
+            length: replacedSelection ? 0 : inlineRange.length,
+        }, segment.text, attributes);
+        replacedSelection = true;
+        index += segment.text.length;
+    });
+    inlineEditor.setInlineRange({
+        index,
+        length: 0,
+    });
+}

package/dist/_pkgs/affine-block-database/properties/rich-text/cell-renderer.js

@@ -1,6 +1,6 @@
 import { DefaultInlineManagerExtension } from '../../../affine-inline-preset/index.js';
 import { ParseDocUrlProvider, TelemetryProvider, } from '../../../affine-shared/services/index.js';
-import { getViewportElement, isValidUrl, } from '../../../affine-shared/utils/index.js';
+import { getViewportElement } from '../../../affine-shared/utils/index.js';
 import { BaseCellRenderer, createFromBaseCellRenderer, createIcon, } from '../../../data-view/index.js';
 import { IS_MAC } from '../../../global/env/index.js';
 import { Text } from '../../../store/index.js';
@@ -8,6 +8,7 @@ import { computed, effect, signal } from '@preact/signals-core';
 import { ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 import { EditorHostKey } from '../../context/host-context.js';
+import { analyzeTextForUrlPaste, insertUrlTextSegments } from '../paste-url.js';
 import { richTextCellStyle, richTextContainerStyle, } from './cell-renderer-css.js';
 import { richTextPropertyModelConfig } from './define.js';
 function toggleStyle(inlineEditor, attrs) {
@@ -197,9 +198,12 @@ export class RichTextCell extends BaseCellRenderer {
                 ?.replace(/\r?\n|\r/g, '\n');
             if (!text)
                 return;
-            if (isValidUrl(text)) {
+            const { segments, singleUrl } = analyzeTextForUrlPaste(text);
+            if (singleUrl) {
                 const std = this.std;
-                const result = std?.getOptional(ParseDocUrlProvider)?.parseDocUrl(text);
+                const result = std
+                    ?.getOptional(ParseDocUrlProvider)
+                    ?.parseDocUrl(singleUrl);
                 if (result) {
                     const text = ' ';
                     inlineEditor.insertText(inlineRange, text, {
@@ -224,24 +228,10 @@ export class RichTextCell extends BaseCellRenderer {
                         segment: 'database',
                         parentFlavour: 'affine:database',
                     });
+                    return;
                 }
-                else {
-                    inlineEditor.insertText(inlineRange, text, {
-                        link: text,
-                    });
-                    inlineEditor.setInlineRange({
-                        index: inlineRange.index + text.length,
-                        length: 0,
-                    });
-                }
-            }
-            else {
-                inlineEditor.insertText(inlineRange, text);
-                inlineEditor.setInlineRange({
-                    index: inlineRange.index + text.length,
-                    length: 0,
-                });
             }
+            insertUrlTextSegments(inlineEditor, inlineRange, segments);
         };
         this.insertDelta = (delta) => {
             const inlineEditor = this.inlineEditor$.value;

package/dist/_pkgs/affine-block-database/properties/title/text.js

@@ -34,7 +34,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { DefaultInlineManagerExtension } from '../../../affine-inline-preset/index.js';
 import { ParseDocUrlProvider, TelemetryProvider, } from '../../../affine-shared/services/index.js';
-import { getViewportElement, isValidUrl, } from '../../../affine-shared/utils/index.js';
+import { getViewportElement } from '../../../affine-shared/utils/index.js';
 import { BaseCellRenderer } from '../../../data-view/index.js';
 import { IS_MAC } from '../../../global/env/index.js';
 import { LinkedPageIcon } from '@blocksuite/icons/lit';
@@ -44,6 +44,7 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 import { EditorHostKey } from '../../context/host-context.js';
 import { getSingleDocIdFromText } from '../../utils/title-doc.js';
+import { analyzeTextForUrlPaste, insertUrlTextSegments } from '../paste-url.js';
 import { headerAreaIconStyle, titleCellStyle, titleRichTextStyle, } from './cell-renderer-css.js';
 let HeaderAreaTextCell = (() => {
     let _classSuper = BaseCellRenderer;
@@ -106,7 +107,10 @@ let HeaderAreaTextCell = (() => {
                 if (this.richText.value) {
                     this.disposables.addFromEvent(this.richText.value, 'copy', this._onCopy);
                     this.disposables.addFromEvent(this.richText.value, 'cut', this._onCut);
-                    this.disposables.addFromEvent(this.richText.value, 'paste', this._onPaste);
+                    this.disposables.addFromEvent(this.richText.value, 'paste', this._onPaste, 
+                    // Capture: the cell must claim the paste before the rich text's own
+                    // handler turns it into a document paste.
+                    true);
                     const inlineEditor = this.inlineEditor;
                     if (inlineEditor) {
                         this.disposables.add(inlineEditor.slots.keydown.subscribe(this._handleKeyDown));
@@ -194,8 +198,12 @@ let HeaderAreaTextCell = (() => {
             this._onPaste = (e) => {
                 const inlineEditor = this.inlineEditor;
                 const inlineRange = inlineEditor?.getInlineRange();
-                if (!inlineRange)
+                if (!inlineEditor || !inlineRange)
                     return;
+                // The cell owns the paste: stop it before the document clipboard sees it,
+                // whichever branch below ends up handling the payload.
+                e.preventDefault();
+                e.stopPropagation();
                 if (e.clipboardData) {
                     try {
                         const getDeltas = (snapshot) => {
@@ -219,14 +227,15 @@ let HeaderAreaTextCell = (() => {
                     ?.replace(/\r?\n|\r/g, '\n');
                 if (!text)
                     return;
-                e.preventDefault();
-                e.stopPropagation();
-                if (isValidUrl(text)) {
+                const { segments, singleUrl } = analyzeTextForUrlPaste(text);
+                if (singleUrl) {
                     const std = this.std;
-                    const result = std?.getOptional(ParseDocUrlProvider)?.parseDocUrl(text);
+                    const result = std
+                        ?.getOptional(ParseDocUrlProvider)
+                        ?.parseDocUrl(singleUrl);
                     if (result) {
                         const text = ' ';
-                        inlineEditor?.insertText(inlineRange, text, {
+                        inlineEditor.insertText(inlineRange, text, {
                             reference: {
                                 type: 'LinkedPage',
                                 pageId: result.docId,
@@ -237,7 +246,7 @@ let HeaderAreaTextCell = (() => {
                                 },
                             },
                         });
-                        inlineEditor?.setInlineRange({
+                        inlineEditor.setInlineRange({
                             index: inlineRange.index + text.length,
                             length: 0,
                         });
@@ -248,24 +257,10 @@ let HeaderAreaTextCell = (() => {
                             segment: 'database',
                             parentFlavour: 'affine:database',
                         });
+                        return;
                     }
-                    else {
-                        inlineEditor?.insertText(inlineRange, text, {
-                            link: text,
-                        });
-                        inlineEditor?.setInlineRange({
-                            index: inlineRange.index + text.length,
-                            length: 0,
-                        });
-                    }
-                }
-                else {
-                    inlineEditor?.insertText(inlineRange, text);
-                    inlineEditor?.setInlineRange({
-                        index: inlineRange.index + text.length,
-                        length: 0,
-                    });
                 }
+                insertUrlTextSegments(inlineEditor, inlineRange, segments);
             };
             this.insertDelta = (delta) => {
                 const inlineEditor = this.inlineEditor;

package/dist/_pkgs/affine-block-database/views/index.js

@@ -2,6 +2,7 @@ import { viewConverts, viewPresets } from '../../data-view/view-presets/index.js
 export const databaseBlockViews = [
     viewPresets.tableViewMeta,
     viewPresets.kanbanViewMeta,
+    viewPresets.calendarViewMeta,
 ];
 export const databaseBlockViewMap = Object.fromEntries(databaseBlockViews.map(view => [view.type, view]));
 export const databaseBlockViewConverts = [...viewConverts];

package/dist/_pkgs/affine-block-edgeless-text/edgeless-text-block.js

@@ -81,6 +81,15 @@ let EdgelessTextBlockComponent = (() => {
       font-weight: var(--edgeless-text-font-weight);
       text-align: var(--edgeless-text-text-align);
     }
+
+    /*
+     * Locking a text block is meant to stop accidental edits, not to stop
+     * navigation, so links stay reachable inside otherwise inert content.
+     */
+    .edgeless-text-block-container .locked-content a[href] {
+      pointer-events: auto;
+      cursor: pointer;
+    }
   `; }
         _updateH() {
             const bound = Bound.deserialize(this.model.xywh);
@@ -263,6 +272,7 @@ let EdgelessTextBlockComponent = (() => {
         style=${styleMap(containerStyle)}
       >
         <div
+          class=${!editing && this.model.isLocked() ? 'locked-content' : ''}
           style=${styleMap({
                 pointerEvents: editing ? 'auto' : 'none',
                 userSelect: editing ? 'auto' : 'none',

package/dist/_pkgs/affine-block-edgeless-text/edgeless-toolbar/config.d.ts

@@ -15,6 +15,9 @@ export declare const edgelessTextToolbarConfig: {
     }, {
         readonly id: "e.alignment";
         readonly content: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => import("lit-html").TemplateResult<1> | null;
+    }, {
+        readonly id: "d.text-size";
+        readonly content: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => import("lit-html").TemplateResult<1> | null;
     }];
     readonly when: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => boolean;
 };

package/dist/_pkgs/affine-block-edgeless-text/edgeless-toolbar/config.js

@@ -1,10 +1,57 @@
+import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
 import { createTextActions } from '../../affine-gfx-text/index.js';
 import { EdgelessTextBlockModel } from '../../affine-model/index.js';
 import { ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
+import { getMostCommonValue } from '../../affine-shared/utils/index.js';
+import { Bound } from '../../global/gfx/index.js';
 import { BlockFlavourIdentifier } from '../../std/index.js';
+import { signal } from '@preact/signals-core';
+import { html } from 'lit';
+import { boundForScale, scaleFromSize, sizeFromScale, } from './font-size.js';
+const FONT_SIZE_LIST = [
+    { value: 16 },
+    { value: 24 },
+    { value: 32 },
+    { value: 40 },
+    { value: 64 },
+    { value: 128 },
+];
 export const edgelessTextToolbarConfig = {
     // No need to adjust element bounds, which updates itself using ResizeObserver
-    actions: createTextActions(EdgelessTextBlockModel, 'edgeless-text'),
+    actions: [
+        ...createTextActions(EdgelessTextBlockModel, 'edgeless-text'),
+        {
+            // The shared `d.font-size` action is disabled for edgeless text (the
+            // model has no `fontSize` prop); this one drives `scale` instead, the
+            // same prop ratio-locked corner resizing writes.
+            id: 'd.text-size',
+            content(ctx) {
+                const models = ctx.getSurfaceModelsByType(EdgelessTextBlockModel);
+                if (!models.length)
+                    return null;
+                const size$ = signal(sizeFromScale(getMostCommonValue(models.map(model => model.props), 'scale') ?? 1));
+                const onPick = (e) => {
+                    e.stopPropagation();
+                    const scale = scaleFromSize(e.detail);
+                    const crud = ctx.std.get(EdgelessCRUDIdentifier);
+                    for (const model of models) {
+                        const bound = boundForScale(Bound.deserialize(model.xywh), model.props.scale, scale);
+                        crud.updateElement(model.id, {
+                            scale,
+                            xywh: bound.serialize(),
+                        });
+                    }
+                };
+                return html `<affine-size-dropdown-menu
+          @select=${onPick}
+          .label="${'Font size'}"
+          .sizes=${FONT_SIZE_LIST}
+          .size$=${size$}
+          .minSize=${1}
+        ></affine-size-dropdown-menu>`;
+            },
+        },
+    ],
     when: ctx => ctx.getSurfaceModelsByType(EdgelessTextBlockModel).length > 0,
 };
 export const edgelessTextToolbarExtension = ToolbarModuleExtension({

package/dist/_pkgs/affine-block-edgeless-text/edgeless-toolbar/font-size.d.ts

@@ -0,0 +1,17 @@
+import { Bound } from '../../global/gfx/index.js';
+/**
+ * An edgeless text block has no `fontSize` prop — its visual text size is
+ * `scale` applied to the page base font size (`--affine-font-base`, 15px).
+ * The toolbar size selector converts between that scale and the pixel size
+ * users actually reason about.
+ */
+export declare const EDGELESS_TEXT_BASE_FONT_SIZE = 15;
+export declare function sizeFromScale(scale: number): number;
+export declare function scaleFromSize(size: number): number;
+/**
+ * Rescale a block bound the same way corner (ratio-locked) resizing does:
+ * top-left anchored, width and height proportional to the scale. This keeps
+ * the real layout size (`w / scale`) untouched, so the text wrapping does not
+ * change — only the rendered size does.
+ */
+export declare function boundForScale(bound: Bound, oldScale: number, newScale: number): Bound;

package/dist/_pkgs/affine-block-edgeless-text/edgeless-toolbar/font-size.js

@@ -0,0 +1,24 @@
+import { Bound } from '../../global/gfx/index.js';
+/**
+ * An edgeless text block has no `fontSize` prop — its visual text size is
+ * `scale` applied to the page base font size (`--affine-font-base`, 15px).
+ * The toolbar size selector converts between that scale and the pixel size
+ * users actually reason about.
+ */
+export const EDGELESS_TEXT_BASE_FONT_SIZE = 15;
+export function sizeFromScale(scale) {
+    return Math.round(scale * EDGELESS_TEXT_BASE_FONT_SIZE);
+}
+export function scaleFromSize(size) {
+    return size / EDGELESS_TEXT_BASE_FONT_SIZE;
+}
+/**
+ * Rescale a block bound the same way corner (ratio-locked) resizing does:
+ * top-left anchored, width and height proportional to the scale. This keeps
+ * the real layout size (`w / scale`) untouched, so the text wrapping does not
+ * change — only the rendered size does.
+ */
+export function boundForScale(bound, oldScale, newScale) {
+    const ratio = newScale / oldScale;
+    return new Bound(bound.x, bound.y, bound.w * ratio, bound.h * ratio);
+}

package/dist/_pkgs/affine-block-embed-doc/common/doc-trashed.d.ts

@@ -0,0 +1,9 @@
+import type { Store } from '../../store/index.js';
+/**
+ * Whether the host has moved this doc to its trash.
+ *
+ * A trashed doc is still in the workspace and still loads, so a card pointing
+ * at it has to ask: cards render a trashed doc as deleted, the same way they
+ * render a doc that has left the workspace altogether.
+ */
+export declare function isDocTrashed(doc: Store | null | undefined): boolean;

package/dist/_pkgs/affine-block-embed-doc/common/doc-trashed.js

@@ -0,0 +1,10 @@
+/**
+ * Whether the host has moved this doc to its trash.
+ *
+ * A trashed doc is still in the workspace and still loads, so a card pointing
+ * at it has to ask: cards render a trashed doc as deleted, the same way they
+ * render a doc that has left the workspace altogether.
+ */
+export function isDocTrashed(doc) {
+    return !!doc?.meta?.trash;
+}

package/dist/_pkgs/affine-block-embed-doc/embed-linked-doc-block/embed-linked-doc-block.js

@@ -54,6 +54,7 @@ import { when } from 'lit/directives/when.js';
 import throttle from 'lodash-es/throttle.js';
 import { filter } from 'rxjs/operators';
 import * as Y from 'yjs';
+import { isDocTrashed } from '../common/doc-trashed.js';
 import { renderLinkedDocInCard } from '../common/render-linked-doc.js';
 import { SyncedDocErrorIcon } from '../embed-synced-doc-block/styles.js';
 import { styles } from './styles.js';
@@ -167,9 +168,6 @@ let EmbedLinkedDocBlockComponent = (() => {
                     });
                 }, RENDER_CARD_THROTTLE_MS)));
                 this._setDocUpdatedAt();
-                this.disposables.add(this.store.workspace.slots.docListUpdated.subscribe(() => {
-                    this._setDocUpdatedAt();
-                }));
                 if (this._referenceToNode) {
                     this._linkedDocMode = this.model.props.params?.mode ?? 'page';
                 }
@@ -192,6 +190,12 @@ let EmbedLinkedDocBlockComponent = (() => {
                     });
                 }
             }));
+            // Subscribed whether or not the doc exists right now: the doc list is also
+            // what tells the card that its target was trashed, restored or recreated.
+            this.disposables.add(this.store.workspace.slots.docListUpdated.subscribe(() => {
+                this._setDocUpdatedAt();
+                this.refreshData();
+            }));
             this._trackCitationDeleteEvent();
         }
         getInitialState() {
@@ -437,7 +441,7 @@ let EmbedLinkedDocBlockComponent = (() => {
             };
             this._renderEmbedView = () => {
                 const linkedDoc = this.linkedDoc;
-                const isDeleted = !linkedDoc;
+                const isDeleted = !linkedDoc || isDocTrashed(linkedDoc);
                 const isLoading = this._loading;
                 const isError = this.isError;
                 const isEmpty = this._isDocEmpty() && this.isBannerEmpty;

package/dist/_pkgs/affine-block-embed-doc/embed-synced-doc-block/embed-synced-doc-block.d.ts

@@ -8,6 +8,10 @@ import type { EmbedSyncedDocCard } from './components/embed-synced-doc-card.js';
 export declare class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSyncedDocModel> {
     static styles: import("lit").CSSResult;
     private _cachedBounds;
+    /** Whether the nested editor has been rendered at least once. */
+    private _hasRenderedSyncedView;
+    /** Whether the fit effect below has already been installed. */
+    private _hasInitedFitEffect;
     private readonly _initEdgelessFitEffect;
     private readonly _pageFilter;
     protected _buildPreviewSpec: (name: "preview-page" | "preview-edgeless") => import("../../store/index.js").ExtensionType[];

package/dist/_pkgs/affine-block-embed-doc/embed-synced-doc-block/embed-synced-doc-block.js

@@ -52,6 +52,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import * as Y from 'yjs';
+import { isDocTrashed } from '../common/doc-trashed.js';
 import { blockStyles } from './styles.js';
 let EmbedSyncedDocBlockComponent = (() => {
     let _classDecorators = [Peekable({
@@ -97,6 +98,10 @@ let EmbedSyncedDocBlockComponent = (() => {
             super(...arguments);
             // Caches total bounds, includes all blocks and elements.
             this._cachedBounds = null;
+            /** Whether the nested editor has been rendered at least once. */
+            this._hasRenderedSyncedView = false;
+            /** Whether the fit effect below has already been installed. */
+            this._hasInitedFitEffect = false;
             this._initEdgelessFitEffect = () => {
                 const fitToContent = () => {
                     if (this.isPageMode)
@@ -336,7 +341,11 @@ let EmbedSyncedDocBlockComponent = (() => {
                     ?.docLinkClicked.next({ ...event, pageId, host: this.host });
             };
             this.refreshData = () => {
-                this._load().catch(e => {
+                this._load()
+                    .then(() => {
+                    this._isEmptySyncedDoc = isEmptyDoc(this.syncedDoc, this.editorMode);
+                })
+                    .catch(e => {
                     console.error(e);
                     this._error = true;
                 });
@@ -444,7 +453,7 @@ let EmbedSyncedDocBlockComponent = (() => {
             this._deleted = false;
             this._cycle = false;
             const syncedDoc = this.syncedDoc;
-            if (!syncedDoc) {
+            if (!syncedDoc || isDocTrashed(syncedDoc)) {
                 this._deleted = true;
                 this._loading = false;
                 return;
@@ -506,6 +515,7 @@ let EmbedSyncedDocBlockComponent = (() => {
             this._setDocUpdatedAt();
             this.disposables.add(this.store.workspace.slots.docListUpdated.subscribe(() => {
                 this._setDocUpdatedAt();
+                this.refreshData();
             }));
             if (!this.linkedMode) {
                 const docMode = this.std.get(DocModeProvider);
@@ -529,7 +539,6 @@ let EmbedSyncedDocBlockComponent = (() => {
                     this._selectBlock();
                 }
             });
-            this._initEdgelessFitEffect();
         }
         renderBlock() {
             delete this.dataset.nestedEditor;
@@ -549,11 +558,21 @@ let EmbedSyncedDocBlockComponent = (() => {
           ></affine-embed-synced-doc-card>
         `);
             }
+            this._hasRenderedSyncedView = true;
             return this._renderSyncedView();
         }
         updated(changedProperties) {
             super.updated(changedProperties);
             this.syncedDocCard?.requestUpdate();
+            // The fit effect reads the nested viewport's cached bounding rect, which
+            // only the viewport's own resize observer invalidates. Installing it here,
+            // after the nested editor has rendered and registered that observer, is
+            // what keeps the first resize after a zoom change from fitting to a stale
+            // size.
+            if (!this._hasInitedFitEffect && this._hasRenderedSyncedView) {
+                this._hasInitedFitEffect = true;
+                this._initEdgelessFitEffect();
+            }
         }
         #_cycle_accessor_storage;
         get _cycle() { return this.#_cycle_accessor_storage; }

package/dist/_pkgs/affine-block-frame/frame-manager.d.ts

@@ -36,6 +36,19 @@ export declare class EdgelessFrameManager extends GfxExtension {
     private _addChildrenToLegacyFrame;
     private _addFrameBlock;
     private _watchElementAdded;
+    /**
+     * Whether `element` fully encloses `frame`.
+     *
+     * A frame always renders behind everything it owns (`compare` short-circuits
+     * on the ancestor relationship, ignoring indexes) and "bring to front" only
+     * reorders top-level siblings — a grouped child is no longer one. So if a
+     * frame auto-adopted an element that encloses it (a Wardley map background
+     * the frame was drawn on top of, matched only because its center happened to
+     * fall inside the frame), the frame would be permanently buried behind its
+     * own child with no way to raise it. Such a backdrop must never become frame
+     * content. Mirrors the existing frame-inside-frame guard for canvas elements.
+     */
+    private _enclosesFrame;
     /**
      * Adopt an element that was just created inside the frame's bounds.
      *

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

@@ -1,4 +1,5 @@
 import { Overlay } from '../affine-block-surface/index.js';
+import { FrameworkBackgroundElementModel } from '../affine-model/index.js';
 import { EditPropsStore } from '../affine-shared/services/index.js';
 import { DisposableGroup } from '../global/disposable/index.js';
 import { BlockSuiteError, ErrorCode } from '../global/exceptions/index.js';
@@ -186,8 +187,10 @@ export class EdgelessFrameManager extends GfxExtension {
                         element.hasChild(frame)) {
                         return;
                     }
-                    // Only add elements that aren't already grouped and have a valid frame
-                    if (!element.group && frame) {
+                    // Only add elements that aren't already grouped and have a valid
+                    // frame, and never let the frame swallow a backdrop that encloses
+                    // it (e.g. a Wardley map background the frame was drawn on top of).
+                    if (!element.group && frame && !this._enclosesFrame(element, frame)) {
                         this._adoptNewlyCreatedElement(frame, element);
                     }
                 });
@@ -204,6 +207,12 @@ export class EdgelessFrameManager extends GfxExtension {
                     payload.model.containsBound(frame.elementBound)) {
                     return;
                 }
+                // A block that encloses the frame is a backdrop, not frame content —
+                // adopting it would bury the frame behind its own child (see
+                // `_enclosesFrame`).
+                if (this._enclosesFrame(payload.model, frame)) {
+                    return;
+                }
                 if (payload.isLocal) {
                     this._adoptNewlyCreatedElement(frame, payload.model);
                 }
@@ -216,6 +225,27 @@ export class EdgelessFrameManager extends GfxExtension {
             }
         }));
     }
+    /**
+     * Whether `element` fully encloses `frame`.
+     *
+     * A frame always renders behind everything it owns (`compare` short-circuits
+     * on the ancestor relationship, ignoring indexes) and "bring to front" only
+     * reorders top-level siblings — a grouped child is no longer one. So if a
+     * frame auto-adopted an element that encloses it (a Wardley map background
+     * the frame was drawn on top of, matched only because its center happened to
+     * fall inside the frame), the frame would be permanently buried behind its
+     * own child with no way to raise it. Such a backdrop must never become frame
+     * content. Mirrors the existing frame-inside-frame guard for canvas elements.
+     */
+    _enclosesFrame(element, frame) {
+        // A framework background is never frame content, whatever its geometry:
+        // the geometric test below has a hole (a frame TALLER than the map
+        // satisfies center-in-frame adoption without being fully enclosed), and
+        // since PF2 the model says outright what the geometry only hinted at.
+        if (element instanceof FrameworkBackgroundElementModel)
+            return true;
+        return element.elementBound.contains(frame.elementBound);
+    }
     /**
      * Adopt an element that was just created inside the frame's bounds.
      *

package/dist/_pkgs/affine-block-latex/styles.js

@@ -8,7 +8,12 @@ export const latexBlockStyles = css `
     height: 100%;
     padding: 10px 24px;
     flex-direction: column;
-    align-items: center;
+    /**
+     * The rendered formula must span the container so a wide equation can be
+     * scrolled through (overflow-x below); centring shrank it to its content
+     * and pushed the overflow out of reach.
+     */
+    align-items: stretch;
     justify-content: center;
     border-radius: 4px;
     overflow-x: auto;