@formicoidea/labre-core 0.56.0 → 0.58.0

package/architecture/likec4.config.json

@@ -1,3 +1,3 @@
-{
-  "name": "blocksuite"
-}
+{
+  "name": "blocksuite"
+}

package/dist/_pkgs/affine-block-surface/extensions/reading-toolbar.js

@@ -58,18 +58,18 @@ const READ_LABEL_FALLBACK = 'Read this component';
  * Drawn inline like its neighbours: this package does not depend on
  * `@blocksuite/icons` and one glyph is not worth a new dependency.
  */
-const ReadIcon = html `<svg
-  width="20"
-  height="20"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z" />
-  <circle cx="12" cy="12" r="3" />
+const ReadIcon = html `<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z" />
+  <circle cx="12" cy="12" r="3" />
 </svg>`;
 /** The command this module drives. Spelled once. */
 const ELEMENT_READ_ID = 'element.read';

package/dist/_pkgs/affine-components/highlight-dropdown-menu/highlight-duotone-icon.js

@@ -1,14 +1,14 @@
 import { HighLightDuotoneIcon } from '@blocksuite/icons/lit';
 import { css, LitElement } from 'lit';
 export class HighlightDuotoneIcon extends LitElement {
-    static { this.styles = css `
-    svg {
-      display: flex;
-      font-size: 20px;
-    }
-    svg > path:nth-child(1) {
-      fill: var(--color, unset);
-    }
+    static { this.styles = css `
+    svg {
+      display: flex;
+      font-size: 20px;
+    }
+    svg > path:nth-child(1) {
+      fill: var(--color, unset);
+    }
   `; }
     render() {
         return HighLightDuotoneIcon();

package/dist/_pkgs/affine-components/highlight-dropdown-menu/text-duotone-icon.js

@@ -1,17 +1,17 @@
 import { TextBackgroundDuotoneIcon } from '@blocksuite/icons/lit';
 import { css, LitElement } from 'lit';
 export class TextDuotoneIcon extends LitElement {
-    static { this.styles = css `
-    svg {
-      display: flex;
-      font-size: 20px;
-    }
-    svg > path:nth-child(1) {
-      fill: var(--background, unset);
-    }
-    svg > path:nth-child(3) {
-      fill: var(--color, unset);
-    }
+    static { this.styles = css `
+    svg {
+      display: flex;
+      font-size: 20px;
+    }
+    svg > path:nth-child(1) {
+      fill: var(--background, unset);
+    }
+    svg > path:nth-child(3) {
+      fill: var(--color, unset);
+    }
   `; }
     render() {
         return TextBackgroundDuotoneIcon();

package/dist/_pkgs/affine-fragment-doc-title/title-band/title-band.d.ts

@@ -1,5 +1,5 @@
 import { type BlockStdScope, ShadowlessElement } from '../../std/index.js';
-import { nothing, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 export declare const LABRE_TITLE_BAND = "labre-title-band";
 declare const TitleBand_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 /**
@@ -67,6 +67,8 @@ export declare class TitleBand extends TitleBand_base {
     private _renderTools;
     private _renderSheet;
     private _renderNotShown;
+    private readonly _stdProvider;
+    willUpdate(changed: PropertyValues<this>): void;
     connectedCallback(): void;
     render(): TemplateResult<1> | typeof nothing;
     accessor std: BlockStdScope | null;

package/dist/_pkgs/affine-fragment-doc-title/title-band/title-band.js

@@ -37,10 +37,11 @@ import { DOC_UNTITLED, FeatureFlagService, formatLocale, PropertiesPanelProvider
 import { stopPropagation } from '../../affine-shared/utils/index.js';
 import { createStandaloneCell, StandaloneCellMetaProvider, } from '../../data-view/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
-import { ShadowlessElement } from '../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../std/index.js';
+import { ContextProvider } from '@lit/context';
 import { LinkedPageIcon, PlusIcon, SidebarIcon, ToggleDownIcon, ToggleRightIcon, } from '@blocksuite/icons/lit';
 import { computed, signal } from '@preact/signals-core';
-import { css, html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { TITLE_BAND_ADD, TITLE_BAND_COLLAPSE, TITLE_BAND_EMPTY, TITLE_BAND_EXPAND, TITLE_BAND_LABEL, TITLE_BAND_LOADING, TITLE_BAND_NOT_SHOWN, TITLE_BAND_OPEN_PANEL, TITLE_BAND_SHOW_HERE, } from '../translations.js';
@@ -629,6 +630,11 @@ let TitleBand = (() => {
             })}
     </div>`;
         }
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            if (changed.has('std') && this.std)
+                this._stdProvider.setValue(this.std);
+        }
         connectedCallback() {
             super.connectedCallback();
             // The band lives inside the title and inside the note: a key or a press
@@ -697,6 +703,13 @@ let TitleBand = (() => {
                 }
                 this._openPanel();
             };
+            // The band is drawn in the title, outside `editor-host`, so its cells find
+            // no `stdContext` to consume and their tag menu and date picker spoke
+            // English under a French host (recette 1, 2026-10-22). The band hands them
+            // its own scope.
+            this._stdProvider = new ContextProvider(this, {
+                context: stdContext,
+            });
             this.#std_accessor_storage = __runInitializers(this, _std_initializers, null);
             this.#docId_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _docId_initializers, ''));
             this.#surface_accessor_storage = (__runInitializers(this, _docId_extraInitializers), __runInitializers(this, _surface_initializers, 'page'));

package/dist/_pkgs/affine-fragment-frame-panel/body/frame-panel-body.js

@@ -64,13 +64,13 @@ function reorderCommand() {
 const styles = css `
   .frame-list-container {
     display: flex;
-    align-items: start;
+    align-items: stretch;
     box-sizing: border-box;
     flex-direction: column;
     width: 100%;
     gap: 16px;
     position: relative;
-    margin: 0 8px;
+    padding: 0 8px;
   }
 
   .no-frame-container {
@@ -101,8 +101,8 @@ const styles = css `
     background-color: var(--affine-blue-600);
     position: absolute;
     contain: layout size;
-    width: 284px;
-    left: 0;
+    left: 8px;
+    right: 8px;
   }
 
   /*

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card-title.d.ts

@@ -1,24 +1,37 @@
 import type { FrameBlockModel } from '../../affine-model/index.js';
-import { ShadowlessElement } from '../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../std/index.js';
 import { type PropertyValues } from 'lit';
 export declare const AFFINE_FRAME_CARD_TITLE = "affine-frame-card-title";
 declare const FrameCardTitle_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
+/**
+ * A card's number and name. A double-click on the name renames the frame in
+ * place (recette 1, P0-1.4): Enter or leaving the field saves, Escape cancels.
+ *
+ * The field is a plain input committed once, through `canvas.frame.rename`
+ * (the selection pane's own rename): the read-only refusal, the empty and
+ * unchanged no-ops and the one undo step are the command's. It used to be a
+ * rich text bound live to the stored title, which wrote on every key — an
+ * Escape could not take a keystroke back. The descriptor is imported, not
+ * looked up in the registry, so the rename works in page mode too.
+ */
 export declare class FrameCardTitle extends FrameCardTitle_base {
     static styles: import("lit").CSSResult;
     private readonly _clearTitleDisposables;
-    private readonly _mountTitleEditor;
     private _titleDisposables;
     private readonly _updateElement;
+    private readonly _startEditing;
+    private _commit;
+    private readonly _onKeydown;
     private _setFrameDisposables;
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    private _renderName;
     render(): import("lit-html").TemplateResult<1>;
     updated(_changedProperties: PropertyValues): void;
+    private accessor _editing;
+    private accessor _input;
     accessor cardIndex: number;
     accessor frame: FrameBlockModel;
-    accessor titleContainer: HTMLElement;
-    accessor titleContentElement: HTMLElement;
-    accessor titleIndexElement: HTMLElement;
+    accessor std: BlockStdScope;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card-title.js

@@ -32,12 +32,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { selectionPaneCommands } from '../../affine-block-surface/index.js';
+import { TOOLBAR_RENAME, translateKey } from '../../affine-shared/services/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
-import { ShadowlessElement } from '../../std/index.js';
+import { runCommand, ShadowlessElement, } from '../../std/index.js';
 import { css, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { FrameCardTitleEditor } from './frame-card-title-editor.js';
+import { property, query, state } from 'lit/decorators.js';
 const styles = css `
   .frame-card-title-container {
     display: flex;
@@ -82,42 +83,90 @@ const styles = css `
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1;
+    min-width: 0;
+  }
+
+  .frame-card-title-container .card-title-input {
+    flex: 1;
+    min-width: 0;
+    height: 20px;
+    box-sizing: border-box;
+    padding: 0 4px;
+    border: 1px solid var(--affine-primary-color);
+    border-radius: 4px;
+    background: var(--affine-background-primary-color);
+    box-shadow: var(--affine-active-shadow);
+    color: var(--affine-text-primary-color);
+    font: inherit;
+    line-height: 18px;
+    outline: none;
   }
 `;
 export const AFFINE_FRAME_CARD_TITLE = 'affine-frame-card-title';
+/** How the panel invokes the registry, like its reorder and the pane's rows. */
+const PANEL_INVOCATION = {
+    surface: 'contextual-toolbar',
+    source: 'toolbar:general',
+};
+function renameCommand() {
+    const command = selectionPaneCommands.find(c => c.id === 'canvas.frame.rename');
+    if (!command)
+        throw new Error('frame panel: no canvas.frame.rename');
+    return command;
+}
+/**
+ * A card's number and name. A double-click on the name renames the frame in
+ * place (recette 1, P0-1.4): Enter or leaving the field saves, Escape cancels.
+ *
+ * The field is a plain input committed once, through `canvas.frame.rename`
+ * (the selection pane's own rename): the read-only refusal, the empty and
+ * unchanged no-ops and the one undo step are the command's. It used to be a
+ * rich text bound live to the stored title, which wrote on every key — an
+ * Escape could not take a keystroke back. The descriptor is imported, not
+ * looked up in the registry, so the rename works in page mode too.
+ */
 let FrameCardTitle = (() => {
     let _classSuper = WithDisposable(ShadowlessElement);
+    let __editing_decorators;
+    let __editing_initializers = [];
+    let __editing_extraInitializers = [];
+    let __input_decorators;
+    let __input_initializers = [];
+    let __input_extraInitializers = [];
     let _cardIndex_decorators;
     let _cardIndex_initializers = [];
     let _cardIndex_extraInitializers = [];
     let _frame_decorators;
     let _frame_initializers = [];
     let _frame_extraInitializers = [];
-    let _titleContainer_decorators;
-    let _titleContainer_initializers = [];
-    let _titleContainer_extraInitializers = [];
-    let _titleContentElement_decorators;
-    let _titleContentElement_initializers = [];
-    let _titleContentElement_extraInitializers = [];
-    let _titleIndexElement_decorators;
-    let _titleIndexElement_initializers = [];
-    let _titleIndexElement_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     return class FrameCardTitle extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __editing_decorators = [state()];
+            __input_decorators = [query('.card-title-input')];
             _cardIndex_decorators = [property({ attribute: false })];
             _frame_decorators = [property({ attribute: false })];
-            _titleContainer_decorators = [query('.frame-card-title-container')];
-            _titleContentElement_decorators = [query('.frame-card-title-container .card-title')];
-            _titleIndexElement_decorators = [query('.frame-card-title-container .card-index')];
+            _std_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, __editing_decorators, { kind: "accessor", name: "_editing", static: false, private: false, access: { has: obj => "_editing" in obj, get: obj => obj._editing, set: (obj, value) => { obj._editing = value; } }, metadata: _metadata }, __editing_initializers, __editing_extraInitializers);
+            __esDecorate(this, null, __input_decorators, { kind: "accessor", name: "_input", static: false, private: false, access: { has: obj => "_input" in obj, get: obj => obj._input, set: (obj, value) => { obj._input = value; } }, metadata: _metadata }, __input_initializers, __input_extraInitializers);
             __esDecorate(this, null, _cardIndex_decorators, { kind: "accessor", name: "cardIndex", static: false, private: false, access: { has: obj => "cardIndex" in obj, get: obj => obj.cardIndex, set: (obj, value) => { obj.cardIndex = value; } }, metadata: _metadata }, _cardIndex_initializers, _cardIndex_extraInitializers);
             __esDecorate(this, null, _frame_decorators, { kind: "accessor", name: "frame", static: false, private: false, access: { has: obj => "frame" in obj, get: obj => obj.frame, set: (obj, value) => { obj.frame = value; } }, metadata: _metadata }, _frame_initializers, _frame_extraInitializers);
-            __esDecorate(this, null, _titleContainer_decorators, { kind: "accessor", name: "titleContainer", static: false, private: false, access: { has: obj => "titleContainer" in obj, get: obj => obj.titleContainer, set: (obj, value) => { obj.titleContainer = value; } }, metadata: _metadata }, _titleContainer_initializers, _titleContainer_extraInitializers);
-            __esDecorate(this, null, _titleContentElement_decorators, { kind: "accessor", name: "titleContentElement", static: false, private: false, access: { has: obj => "titleContentElement" in obj, get: obj => obj.titleContentElement, set: (obj, value) => { obj.titleContentElement = value; } }, metadata: _metadata }, _titleContentElement_initializers, _titleContentElement_extraInitializers);
-            __esDecorate(this, null, _titleIndexElement_decorators, { kind: "accessor", name: "titleIndexElement", static: false, private: false, access: { has: obj => "titleIndexElement" in obj, get: obj => obj.titleIndexElement, set: (obj, value) => { obj.titleIndexElement = value; } }, metadata: _metadata }, _titleIndexElement_initializers, _titleIndexElement_extraInitializers);
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = styles; }
+        _commit(input) {
+            if (!this._editing)
+                return;
+            this._editing = false;
+            runCommand(this.std, renameCommand(), PANEL_INVOCATION, {
+                id: this.frame.id,
+                title: input.value,
+            });
+        }
         _setFrameDisposables(title) {
             this._clearTitleDisposables();
             title.observe(this._updateElement);
@@ -128,13 +177,39 @@ let FrameCardTitle = (() => {
                 },
             });
         }
-        connectedCallback() {
-            super.connectedCallback();
-        }
         disconnectedCallback() {
             super.disconnectedCallback();
             this._clearTitleDisposables();
         }
+        _renderName() {
+            const name = this.frame.props.title.toString();
+            if (!this._editing) {
+                return html `<div
+        class="card-title"
+        data-testid="frame-card-title"
+        title=${name}
+        @click=${(e) => e.stopPropagation()}
+        @dblclick=${this._startEditing}
+      >
+        ${name}
+      </div>`;
+            }
+            return html `<input
+      class="card-title-input"
+      data-testid="frame-card-title-input"
+      aria-label=${translateKey(this.std, ...TOOLBAR_RENAME)}
+      .value=${name}
+      @click=${(e) => e.stopPropagation()}
+      @dblclick=${(e) => e.stopPropagation()}
+      @select=${(e) => {
+                // The field's own text selection bubbles a native select event, which
+                // the card's own select listener would read as a frame pick.
+                e.stopPropagation();
+            }}
+      @keydown=${this._onKeydown}
+      @blur=${(e) => this._commit(e.target)}
+    />`;
+        }
         render() {
             return html `<div class="frame-card-title-container">
       <div
@@ -144,61 +219,70 @@ let FrameCardTitle = (() => {
       >
         ${this.cardIndex + 1}
       </div>
-      <div class="card-title">
-        <span
-          @click=${(e) => e.stopPropagation()}
-          @dblclick=${this._mountTitleEditor}
-          >${this.frame.props.title}</span
-        >
-      </div>
+      ${this._renderName()}
     </div>`;
         }
         updated(_changedProperties) {
             if (_changedProperties.has('frame')) {
                 this._setFrameDisposables(this.frame.props.title.yText);
             }
+            if (_changedProperties.has('_editing') && this._editing) {
+                this._input?.focus();
+                this._input?.select();
+            }
         }
+        #_editing_accessor_storage;
+        get _editing() { return this.#_editing_accessor_storage; }
+        set _editing(value) { this.#_editing_accessor_storage = value; }
+        #_input_accessor_storage;
+        get _input() { return this.#_input_accessor_storage; }
+        set _input(value) { this.#_input_accessor_storage = value; }
         #cardIndex_accessor_storage;
         get cardIndex() { return this.#cardIndex_accessor_storage; }
         set cardIndex(value) { this.#cardIndex_accessor_storage = value; }
         #frame_accessor_storage;
         get frame() { return this.#frame_accessor_storage; }
         set frame(value) { this.#frame_accessor_storage = value; }
-        #titleContainer_accessor_storage;
-        get titleContainer() { return this.#titleContainer_accessor_storage; }
-        set titleContainer(value) { this.#titleContainer_accessor_storage = value; }
-        #titleContentElement_accessor_storage;
-        get titleContentElement() { return this.#titleContentElement_accessor_storage; }
-        set titleContentElement(value) { this.#titleContentElement_accessor_storage = value; }
-        #titleIndexElement_accessor_storage;
-        get titleIndexElement() { return this.#titleIndexElement_accessor_storage; }
-        set titleIndexElement(value) { this.#titleIndexElement_accessor_storage = value; }
+        #std_accessor_storage;
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         constructor() {
             super(...arguments);
             this._clearTitleDisposables = () => {
                 this._titleDisposables?.dispose();
                 this._titleDisposables = null;
             };
-            this._mountTitleEditor = (e) => {
-                e.stopPropagation();
-                const titleEditor = new FrameCardTitleEditor();
-                titleEditor.frameModel = this.frame;
-                titleEditor.titleContentElement = this.titleContentElement;
-                const left = this.titleIndexElement.offsetWidth + 6;
-                titleEditor.left = left;
-                titleEditor.maxWidth = this.titleContainer.offsetWidth - left - 6;
-                this.titleContainer.append(titleEditor);
-            };
             this._titleDisposables = null;
             this._updateElement = () => {
                 this.requestUpdate();
             };
-            this.#cardIndex_accessor_storage = __runInitializers(this, _cardIndex_initializers, void 0);
+            this._startEditing = (e) => {
+                e.stopPropagation();
+                if (this.std.store.readonly)
+                    return;
+                this._editing = true;
+            };
+            this._onKeydown = (e) => {
+                // The canvas and the host's panel bind keys (Backspace, Escape closes a
+                // panel): a key typed into the name reaches neither.
+                e.stopPropagation();
+                if (e.isComposing)
+                    return;
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    this._commit(e.currentTarget);
+                }
+                else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    this._editing = false;
+                }
+            };
+            this.#_editing_accessor_storage = __runInitializers(this, __editing_initializers, false);
+            this.#_input_accessor_storage = (__runInitializers(this, __editing_extraInitializers), __runInitializers(this, __input_initializers, null));
+            this.#cardIndex_accessor_storage = (__runInitializers(this, __input_extraInitializers), __runInitializers(this, _cardIndex_initializers, void 0));
             this.#frame_accessor_storage = (__runInitializers(this, _cardIndex_extraInitializers), __runInitializers(this, _frame_initializers, void 0));
-            this.#titleContainer_accessor_storage = (__runInitializers(this, _frame_extraInitializers), __runInitializers(this, _titleContainer_initializers, void 0));
-            this.#titleContentElement_accessor_storage = (__runInitializers(this, _titleContainer_extraInitializers), __runInitializers(this, _titleContentElement_initializers, void 0));
-            this.#titleIndexElement_accessor_storage = (__runInitializers(this, _titleContentElement_extraInitializers), __runInitializers(this, _titleIndexElement_initializers, void 0));
-            __runInitializers(this, _titleIndexElement_extraInitializers);
+            this.#std_accessor_storage = (__runInitializers(this, _frame_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+            __runInitializers(this, _std_extraInitializers);
         }
     };
 })();

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card.js

@@ -42,11 +42,16 @@ const styles = css `
     display: block;
   }
 
+  /*
+    The card takes the panel's width and its preview the frame's proportions
+    (recette 1, P0-1.2): widening the sidebar grows every card, so fewer fit
+    on screen. No fixed size anywhere; a ghost gets its width from the card it
+    copies.
+  */
   .frame-card-container {
     display: flex;
     flex-direction: column;
-    width: 284px;
-    height: 198px;
+    width: 100%;
     gap: 8px;
 
     position: relative;
@@ -55,7 +60,6 @@ const styles = css `
   .frame-card-body {
     display: flex;
     width: 100%;
-    height: 170px;
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
@@ -67,8 +71,15 @@ const styles = css `
     position: relative;
   }
 
+  /* A ring, not a thicker border: the preview inside keeps its width. */
   .frame-card-container.selected .frame-card-body {
-    border: 2px solid var(--affine-primary-color);
+    border-color: var(--affine-primary-color);
+    box-shadow: 0 0 0 1px var(--affine-primary-color);
+  }
+
+  .frame-card-body > frame-preview {
+    border-radius: 7px;
+    overflow: hidden;
   }
 
   .frame-card-container.dragging {
@@ -84,6 +95,11 @@ const styles = css `
     display: none;
   }
 
+  /* The copy stacked behind draws no preview: it keeps a card's shape. */
+  .frame-card-container.dragging .frame-card-body {
+    aspect-ratio: 16 / 9;
+  }
+
   .frame-card-container.dragging .dragging-card-number {
     position: absolute;
     bottom: 0;
@@ -228,6 +244,7 @@ let FrameCard = (() => {
                 : html `<affine-frame-card-title
             .cardIndex=${this.cardIndex}
             .frame=${this.frame}
+            .std=${this.std}
           ></affine-frame-card-title>`}
       <div
         class="frame-card-body"
@@ -240,6 +257,7 @@ let FrameCard = (() => {
                 : html `<frame-preview
               .frame=${this.frame}
               .std=${this.std}
+              .fluid=${true}
             ></frame-preview>`}
         ${this._DraggingCardNumber()}
       </div>

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-preview.d.ts

@@ -13,6 +13,7 @@ export declare class FramePreview extends FramePreview_base {
     private _runtimePreviewExt;
     private get _viewExtensionManager();
     private get _previewSpec();
+    private _resizeObserver;
     private readonly _updateFrameViewportWH;
     get _originalDoc(): Store;
     private _initPreviewDoc;
@@ -22,10 +23,21 @@ export declare class FramePreview extends FramePreview_base {
     private _setFrameDisposables;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** A fluid preview follows its own width: the panel's, as it is resized. */
+    private _observeWidth;
+    willUpdate(changed: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     updated(_changedProperties: PropertyValues): void;
     accessor std: BlockStdScope;
+    /** The width a fluid preview measured on itself; `0` until laid out. */
+    private accessor _containerWidth;
     accessor fillScreen: boolean;
+    /**
+     * Take the container's width and the frame's proportions (recette 1,
+     * P0-1.2): the box grows and shrinks with the panel, never taller than
+     * wide, and `surfaceWidth` / `surfaceHeight` are computed, not read.
+     */
+    accessor fluid: boolean;
     accessor frame: FrameBlockModel;
     accessor frameViewportWH: {
         width: number;