@formicoidea/labre-core 0.56.0 → 0.57.0

package/architecture/code.c4

@@ -3467,7 +3467,7 @@ model {
   assembly.all -[uses]-> features.inlines.preset '6 imports'
   assembly.all -[uses]-> features.inlines.reference '6 imports'
   assembly.all -[uses]-> features.rich-text '3 imports, 1 type-only'
-  assembly.all -[uses]-> features.shared '14 imports'
+  assembly.all -[uses]-> features.shared '15 imports'
   assembly.all -[uses]-> features.widgets.drag-handle '4 imports'
   assembly.all -[uses]-> features.widgets.edgeless-auto-connect '4 imports'
   assembly.all -[uses]-> features.widgets.edgeless-dragging-area '3 imports'
@@ -3765,14 +3765,13 @@ model {
   features.fragments.doc-title -[uses]-> framework.store '1 import, 1 type-only'
   features.fragments.doc-title -[uses]-> model_.model_ '1 import'
   features.fragments.frame-panel -[uses]-> features.blocks.frame '2 imports'
-  features.fragments.frame-panel -[uses]-> features.blocks.surface '2 imports'
+  features.fragments.frame-panel -[uses]-> features.blocks.surface '3 imports'
   features.fragments.frame-panel -[uses]-> features.ext-loader '2 imports'
-  features.fragments.frame-panel -[uses]-> features.rich-text '1 import, 1 type-only'
-  features.fragments.frame-panel -[uses]-> features.shared '8 imports'
-  features.fragments.frame-panel -[uses]-> framework.global_ '14 imports'
-  features.fragments.frame-panel -[uses]-> framework.std '11 imports, 2 type-only'
+  features.fragments.frame-panel -[uses]-> features.shared '9 imports'
+  features.fragments.frame-panel -[uses]-> framework.global_ '13 imports'
+  features.fragments.frame-panel -[uses]-> framework.std '10 imports, 2 type-only'
   features.fragments.frame-panel -[uses]-> framework.store '2 imports, 2 type-only'
-  features.fragments.frame-panel -[uses]-> model_.model_ '5 imports, 5 type-only'
+  features.fragments.frame-panel -[uses]-> model_.model_ '4 imports, 4 type-only'
   features.fragments.outline -[uses]-> features.blocks.note '1 import'
   features.fragments.outline -[uses]-> features.ext-loader '1 import'
   features.fragments.outline -[uses]-> features.fragments.doc-title '1 import'
@@ -4471,6 +4470,7 @@ model {
   assembly.all.src -[imports]-> features.inlines.reference.src '1 import'
   assembly.all.src -[imports]-> features.rich-text.src '1 import, 1 type-only'
   assembly.all.src -[imports]-> features.shared.services '2 imports'
+  assembly.all.src -[imports]-> features.shared.utils '1 import'
   assembly.all.src -[imports]-> features.widgets.drag-handle.src '1 import'
   assembly.all.src -[imports]-> features.widgets.edgeless-auto-connect.src '1 import'
   assembly.all.src -[imports]-> features.widgets.edgeless-selected-rect.src '1 import'
@@ -5957,16 +5957,16 @@ model {
   features.fragments.frame-panel.body -[imports]-> framework.std.src '1 import'
   features.fragments.frame-panel.body -[imports]-> framework.store.src '1 import, 1 type-only'
   features.fragments.frame-panel.body -[imports]-> model_.model_.src '1 import, 1 type-only'
+  features.fragments.frame-panel.card -[imports]-> features.blocks.surface.src '1 import'
   features.fragments.frame-panel.card -[imports]-> features.ext-loader.src '1 import'
-  features.fragments.frame-panel.card -[imports]-> features.rich-text.src '1 import, 1 type-only'
-  features.fragments.frame-panel.card -[imports]-> features.shared.services '1 import'
+  features.fragments.frame-panel.card -[imports]-> features.shared.services '2 imports'
   features.fragments.frame-panel.card -[imports]-> framework.global_.disposable '2 imports'
   features.fragments.frame-panel.card -[imports]-> framework.global_.gfx '1 import'
-  features.fragments.frame-panel.card -[imports]-> framework.global_.lit '4 imports'
+  features.fragments.frame-panel.card -[imports]-> framework.global_.lit '3 imports'
   features.fragments.frame-panel.card -[imports]-> framework.std.gfx '1 import'
-  features.fragments.frame-panel.card -[imports]-> framework.std.src '4 imports'
+  features.fragments.frame-panel.card -[imports]-> framework.std.src '3 imports'
   features.fragments.frame-panel.card -[imports]-> framework.store.src '1 import, 1 type-only'
-  features.fragments.frame-panel.card -[imports]-> model_.model_.src '4 imports, 4 type-only'
+  features.fragments.frame-panel.card -[imports]-> model_.model_.src '3 imports, 3 type-only'
   features.fragments.frame-panel.header -[imports]-> features.blocks.frame.src '1 import'
   features.fragments.frame-panel.header -[imports]-> features.blocks.surface.src '2 imports'
   features.fragments.frame-panel.header -[imports]-> features.fragments.frame-panel.src '2 imports'
@@ -5979,7 +5979,7 @@ model {
   features.fragments.frame-panel.header -[imports]-> framework.std.src '2 imports, 2 type-only'
   features.fragments.frame-panel.src -[imports]-> features.ext-loader.src '1 import'
   features.fragments.frame-panel.src -[imports]-> features.fragments.frame-panel.body '1 import'
-  features.fragments.frame-panel.src -[imports]-> features.fragments.frame-panel.card '4 imports'
+  features.fragments.frame-panel.src -[imports]-> features.fragments.frame-panel.card '3 imports'
   features.fragments.frame-panel.src -[imports]-> features.fragments.frame-panel.header '2 imports'
   features.fragments.frame-panel.src -[imports]-> features.shared.services '1 import'
   features.fragments.frame-panel.src -[imports]-> framework.global_.lit '1 import'

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;

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

@@ -45,9 +45,15 @@ import { property, query, state } from 'lit/decorators.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import debounce from 'lodash-es/debounce.js';
+import { fluidPreviewSize } from './preview-size.js';
 const DEFAULT_PREVIEW_CONTAINER_WIDTH = 280;
 const DEFAULT_PREVIEW_CONTAINER_HEIGHT = 166;
 const styles = css `
+  frame-preview[data-fluid] {
+    display: block;
+    width: 100%;
+  }
+
   .frame-preview-container {
     display: block;
     width: 100%;
@@ -89,9 +95,15 @@ let FramePreview = (() => {
     let _std_decorators;
     let _std_initializers = [];
     let _std_extraInitializers = [];
+    let __containerWidth_decorators;
+    let __containerWidth_initializers = [];
+    let __containerWidth_extraInitializers = [];
     let _fillScreen_decorators;
     let _fillScreen_initializers = [];
     let _fillScreen_extraInitializers = [];
+    let _fluid_decorators;
+    let _fluid_initializers = [];
+    let _fluid_extraInitializers = [];
     let _frame_decorators;
     let _frame_initializers = [];
     let _frame_extraInitializers = [];
@@ -111,14 +123,18 @@ let FramePreview = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _std_decorators = [property({ attribute: false })];
+            __containerWidth_decorators = [state()];
             _fillScreen_decorators = [state()];
+            _fluid_decorators = [property({ attribute: false })];
             _frame_decorators = [property({ attribute: false })];
             _frameViewportWH_decorators = [state()];
             _previewEditor_decorators = [query('editor-host')];
             _surfaceHeight_decorators = [property({ attribute: false })];
             _surfaceWidth_decorators = [property({ attribute: false })];
             __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);
+            __esDecorate(this, null, __containerWidth_decorators, { kind: "accessor", name: "_containerWidth", static: false, private: false, access: { has: obj => "_containerWidth" in obj, get: obj => obj._containerWidth, set: (obj, value) => { obj._containerWidth = value; } }, metadata: _metadata }, __containerWidth_initializers, __containerWidth_extraInitializers);
             __esDecorate(this, null, _fillScreen_decorators, { kind: "accessor", name: "fillScreen", static: false, private: false, access: { has: obj => "fillScreen" in obj, get: obj => obj.fillScreen, set: (obj, value) => { obj.fillScreen = value; } }, metadata: _metadata }, _fillScreen_initializers, _fillScreen_extraInitializers);
+            __esDecorate(this, null, _fluid_decorators, { kind: "accessor", name: "fluid", static: false, private: false, access: { has: obj => "fluid" in obj, get: obj => obj.fluid, set: (obj, value) => { obj.fluid = value; } }, metadata: _metadata }, _fluid_initializers, _fluid_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, _frameViewportWH_decorators, { kind: "accessor", name: "frameViewportWH", static: false, private: false, access: { has: obj => "frameViewportWH" in obj, get: obj => obj.frameViewportWH, set: (obj, value) => { obj.frameViewportWH = value; } }, metadata: _metadata }, _frameViewportWH_initializers, _frameViewportWH_extraInitializers);
             __esDecorate(this, null, _previewEditor_decorators, { kind: "accessor", name: "previewEditor", static: false, private: false, access: { has: obj => "previewEditor" in obj, get: obj => obj.previewEditor, set: (obj, value) => { obj.previewEditor = value; } }, metadata: _metadata }, _previewEditor_initializers, _previewEditor_extraInitializers);
@@ -157,9 +173,13 @@ let FramePreview = (() => {
                             payload.view.model.flavour !== 'affine:page') {
                             return;
                         }
+                        // Every size, not only the first: a fluid preview follows its
+                        // panel's width, and the mini editor's viewport settles on the new
+                        // size (debounced) after the box has changed — fitting then is what
+                        // keeps the frame filling it. The subject completes with the
+                        // viewport, which ends the subscription.
                         const viewport = std.get(GfxControllerIdentifier).viewport;
-                        const subscription = viewport.sizeUpdated.subscribe(() => {
-                            subscription.unsubscribe();
+                        viewport.sizeUpdated.subscribe(() => {
                             refreshViewport();
                         });
                     });
@@ -219,14 +239,50 @@ let FramePreview = (() => {
             this._initPreviewDoc();
             this._updateFrameViewportWH();
             this._setFrameDisposables(this.frame);
+            this._observeWidth();
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this._clearFrameDisposables();
+            this._resizeObserver?.disconnect();
+            this._resizeObserver = null;
+        }
+        /** A fluid preview follows its own width: the panel's, as it is resized. */
+        _observeWidth() {
+            this._resizeObserver?.disconnect();
+            this._resizeObserver = null;
+            if (!this.fluid || typeof ResizeObserver === 'undefined')
+                return;
+            this._resizeObserver = new ResizeObserver(([entry]) => {
+                if (!entry)
+                    return;
+                const width = Math.floor(entry.contentRect.width);
+                if (width !== this._containerWidth)
+                    this._containerWidth = width;
+            });
+            this._resizeObserver.observe(this);
+        }
+        willUpdate(changed) {
+            if (changed.has('fluid')) {
+                this.toggleAttribute('data-fluid', this.fluid);
+                if (this.isConnected)
+                    this._observeWidth();
+            }
+            // The box was only read at connect and on a frame's own update, so a host
+            // that resized it after mounting kept the old scale.
+            if (changed.has('fluid') ||
+                changed.has('_containerWidth') ||
+                changed.has('surfaceWidth') ||
+                changed.has('surfaceHeight') ||
+                changed.has('fillScreen')) {
+                this._updateFrameViewportWH();
+            }
         }
         render() {
             const { frame } = this;
-            const noContent = !frame || !frame.xywh;
+            // A fluid preview builds its mini editor once it knows its width, never
+            // at the default box first.
+            const noContent = !frame || !frame.xywh || (this.fluid && this._containerWidth === 0);
             return html `<div class="frame-preview-container">
       ${noContent ? nothing : this._renderSurfaceContent()}
     </div>`;
@@ -242,9 +298,21 @@ let FramePreview = (() => {
         #std_accessor_storage;
         get std() { return this.#std_accessor_storage; }
         set std(value) { this.#std_accessor_storage = value; }
+        #_containerWidth_accessor_storage;
+        /** The width a fluid preview measured on itself; `0` until laid out. */
+        get _containerWidth() { return this.#_containerWidth_accessor_storage; }
+        set _containerWidth(value) { this.#_containerWidth_accessor_storage = value; }
         #fillScreen_accessor_storage;
         get fillScreen() { return this.#fillScreen_accessor_storage; }
         set fillScreen(value) { this.#fillScreen_accessor_storage = value; }
+        #fluid_accessor_storage;
+        /**
+         * 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.
+         */
+        get fluid() { return this.#fluid_accessor_storage; }
+        set fluid(value) { this.#fluid_accessor_storage = value; }
         #frame_accessor_storage;
         get frame() { return this.#frame_accessor_storage; }
         set frame(value) { this.#frame_accessor_storage = value; }
@@ -278,8 +346,14 @@ let FramePreview = (() => {
             this._frameDisposables = null;
             this._previewDoc = null;
             this._runtimePreviewExt = [];
+            this._resizeObserver = null;
             this._updateFrameViewportWH = () => {
                 const [, , w, h] = deserializeXYWH(this.frame.xywh);
+                if (this.fluid) {
+                    const box = fluidPreviewSize(this._containerWidth, w, h);
+                    this.surfaceWidth = box.width;
+                    this.surfaceHeight = box.height;
+                }
                 let scale = 1;
                 if (this.fillScreen) {
                     scale = Math.max(this.surfaceWidth / w, this.surfaceHeight / h);
@@ -293,8 +367,10 @@ let FramePreview = (() => {
                 };
             };
             this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
-            this.#fillScreen_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _fillScreen_initializers, false));
-            this.#frame_accessor_storage = (__runInitializers(this, _fillScreen_extraInitializers), __runInitializers(this, _frame_initializers, void 0));
+            this.#_containerWidth_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, __containerWidth_initializers, 0));
+            this.#fillScreen_accessor_storage = (__runInitializers(this, __containerWidth_extraInitializers), __runInitializers(this, _fillScreen_initializers, false));
+            this.#fluid_accessor_storage = (__runInitializers(this, _fillScreen_extraInitializers), __runInitializers(this, _fluid_initializers, false));
+            this.#frame_accessor_storage = (__runInitializers(this, _fluid_extraInitializers), __runInitializers(this, _frame_initializers, void 0));
             this.#frameViewportWH_accessor_storage = (__runInitializers(this, _frame_extraInitializers), __runInitializers(this, _frameViewportWH_initializers, {
                 width: 0,
                 height: 0,

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

@@ -0,0 +1,9 @@
+/**
+ * The box of a fluid frame preview (recette 1, P0-1.2): the container's width,
+ * the frame's proportions, never taller than it is wide. A frame without an
+ * area gets a square box; a container not laid out yet gets no box at all.
+ */
+export declare function fluidPreviewSize(containerWidth: number, frameWidth: number, frameHeight: number): {
+    width: number;
+    height: number;
+};

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

@@ -0,0 +1,20 @@
+/**
+ * A portrait frame previewed at the panel's full width would be taller than
+ * the sidebar is wide many times over and push every other card off screen:
+ * past a square, the box stops growing and the frame is contained in it.
+ */
+const MAX_HEIGHT_PER_WIDTH = 1;
+/**
+ * The box of a fluid frame preview (recette 1, P0-1.2): the container's width,
+ * the frame's proportions, never taller than it is wide. A frame without an
+ * area gets a square box; a container not laid out yet gets no box at all.
+ */
+export function fluidPreviewSize(containerWidth, frameWidth, frameHeight) {
+    const width = Math.max(0, Math.floor(containerWidth));
+    if (width === 0)
+        return { width: 0, height: 0 };
+    const ratio = frameWidth > 0 && frameHeight > 0
+        ? Math.min(frameHeight / frameWidth, MAX_HEIGHT_PER_WIDTH)
+        : MAX_HEIGHT_PER_WIDTH;
+    return { width, height: Math.round(width * ratio) };
+}

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

@@ -1,14 +1,12 @@
 import { AFFINE_FRAME_PANEL_BODY, FramePanelBody, } from './body/frame-panel-body.js';
 import { AFFINE_FRAME_CARD, FrameCard } from './card/frame-card.js';
 import { AFFINE_FRAME_CARD_TITLE, FrameCardTitle, } from './card/frame-card-title.js';
-import { AFFINE_FRAME_TITLE_EDITOR, FrameCardTitleEditor, } from './card/frame-card-title-editor.js';
 import { AFFINE_FRAME_PREVIEW, FramePreview } from './card/frame-preview.js';
 import { AFFINE_FRAME_PANEL, FramePanel } from './frame-panel.js';
 import { AFFINE_FRAME_PANEL_HEADER, FramePanelHeader, } from './header/frame-panel-header.js';
 import { AFFINE_FRAMES_SETTING_MENU, FramesSettingMenu, } from './header/frames-setting-menu.js';
 export function effects() {
     customElements.define(AFFINE_FRAME_PANEL, FramePanel);
-    customElements.define(AFFINE_FRAME_TITLE_EDITOR, FrameCardTitleEditor);
     customElements.define(AFFINE_FRAME_CARD, FrameCard);
     customElements.define(AFFINE_FRAME_CARD_TITLE, FrameCardTitle);
     customElements.define(AFFINE_FRAME_PANEL_BODY, FramePanelBody);

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

@@ -68,6 +68,8 @@ const styles = css `
 
     overflow: auto;
     overflow-x: hidden;
+    /* A scrollbar appearing must not narrow the fluid cards it scrolls. */
+    scrollbar-gutter: stable;
     scrollbar-width: thin; /* For Firefox */
     scrollbar-color: transparent transparent; /* For Firefox */
   }

package/dist/host-panels.d.ts

@@ -54,8 +54,9 @@ import { type BlockStdScope, type CommandFile } from './_pkgs/std/index.js';
  */
 export { type AnyCommandDescriptor, type CommandFile, type CommandInvocation, type CommandOwner, type CommandSurface, getCommandIcon, getCommandsForSurface, getRegisteredCommands, runCommand, runCommandAsync, } from './_pkgs/std/index.js';
 export { armArtefact } from './_pkgs/affine-widget-edgeless-toolbar/index.js';
-export { type SelectionPaneNode, selectionPaneTree, } from './_pkgs/affine-block-surface/index.js';
+export { type SelectionPaneNode, selectionPaneCommands, selectionPaneTree, } from './_pkgs/affine-block-surface/index.js';
 export { frameCommands, type ReorderFramesParams, reorderFramesParams, } from './_pkgs/affine-block-frame/index.js';
+export { createPanelReorderDrag, type PanelDragPoint, type PanelReorderDrag, type PanelReorderDragOptions, panelReorderGap, } from './_pkgs/affine-shared/utils/index.js';
 export { formatPropertyValue, isPropertyValueEmpty, } from './_pkgs/affine-fragment-doc-title/index.js';
 export type { PropertiesPanelRequest, PropertiesPanelService, TitleBandNotShownPage, TitleBandProperty, TitleBandService, TitleBandSheetState, } from './_pkgs/affine-shared/services/index.js';
 export { ThreadMarksExtension } from './_pkgs/affine-shared/services/index.js';
@@ -89,9 +90,12 @@ export declare function fitToModel(std: BlockStdScope, id: string, padding?: [nu
  * thumbnail renders one through `ExportManager` instead.
  *
  * Returns the element ready to be appended; `width` and `height` are the
- * preview box in CSS pixels (the panel's card is 280 × 166), `fillScreen`
- * covers the box instead of containing the frame. One mini editor per
- * preview: mount only the cards on screen. The element is defined by the
+ * preview box in CSS pixels, `fillScreen` covers the box instead of
+ * containing the frame. `fluid` (0.57) replaces the fixed box: the preview
+ * takes its container's width and the frame's proportions, never taller than
+ * wide, and follows the container as it is resized — the library's own panel
+ * cards draw it that way (recette 1, P0-1.2); `width` and `height` are then
+ * ignored. One mini editor per preview: mount only the cards on screen. The element is defined by the
  * frame panel's view extension, so it renders nothing in an assembly where the
  * `frame` flag is off (ADR 0009) — the same assembly where there is no frame
  * to preview.
@@ -100,6 +104,7 @@ export declare function createFramePreview(std: BlockStdScope, frame: FrameBlock
     width?: number;
     height?: number;
     fillScreen?: boolean;
+    fluid?: boolean;
 }): FramePreview;
 /**
  * One entry of the current view's own actions — what a host draws in the

package/dist/host-panels.js

@@ -57,8 +57,18 @@ import { frameworkDescriptor } from './frameworks.js';
  */
 export { getCommandIcon, getCommandsForSurface, getRegisteredCommands, runCommand, runCommandAsync, } from './_pkgs/std/index.js';
 export { armArtefact } from './_pkgs/affine-widget-edgeless-toolbar/index.js';
-export { selectionPaneTree, } from './_pkgs/affine-block-surface/index.js';
+export { selectionPaneCommands, selectionPaneTree, } from './_pkgs/affine-block-surface/index.js';
 export { frameCommands, reorderFramesParams, } from './_pkgs/affine-block-frame/index.js';
+/*
+ * The side panels' one drag-to-reorder gesture (ADR 0034 §6), the one the
+ * library's frame panel and selection pane run: a host's slide list hands it
+ * its rows, its drop rule and its write (`canvas.frame.reorder`), and gets the
+ * threshold, the read-only refusal, the cursor mask, Escape and
+ * `pointercancel` as cancels and the swallowed click. A factory, not a class:
+ * the controller it returns is the host's, disposed with its panel. DOM types
+ * only, so a React panel types it without Lit (recette 1, P0-1.3).
+ */
+export { createPanelReorderDrag, panelReorderGap, } from './_pkgs/affine-shared/utils/index.js';
 /*
  * The properties panel (ADR 0035 §9b and §11). The editor asks the host to
  * show it through `PropertiesPanelExtension` and feeds the title band through
@@ -124,9 +134,12 @@ export function fitToModel(std, id, padding = [0, 0, 0, 0]) {
  * thumbnail renders one through `ExportManager` instead.
  *
  * Returns the element ready to be appended; `width` and `height` are the
- * preview box in CSS pixels (the panel's card is 280 × 166), `fillScreen`
- * covers the box instead of containing the frame. One mini editor per
- * preview: mount only the cards on screen. The element is defined by the
+ * preview box in CSS pixels, `fillScreen` covers the box instead of
+ * containing the frame. `fluid` (0.57) replaces the fixed box: the preview
+ * takes its container's width and the frame's proportions, never taller than
+ * wide, and follows the container as it is resized — the library's own panel
+ * cards draw it that way (recette 1, P0-1.2); `width` and `height` are then
+ * ignored. One mini editor per preview: mount only the cards on screen. The element is defined by the
  * frame panel's view extension, so it renders nothing in an assembly where the
  * `frame` flag is off (ADR 0009) — the same assembly where there is no frame
  * to preview.
@@ -141,6 +154,8 @@ export function createFramePreview(std, frame, options = {}) {
         preview.surfaceHeight = options.height;
     if (options.fillScreen !== undefined)
         preview.fillScreen = options.fillScreen;
+    if (options.fluid !== undefined)
+        preview.fluid = options.fluid;
     return preview;
 }
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-core",
   "description": "Labre editor — the full BlockSuite-derived editor as one package.",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",

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

@@ -1,25 +0,0 @@
-import type { FrameBlockModel } from '../../affine-model/index.js';
-import type { RichText } from '../../affine-rich-text/index.js';
-import { ShadowlessElement } from '../../std/index.js';
-export declare const AFFINE_FRAME_TITLE_EDITOR = "affine-frame-card-title-editor";
-declare const FrameCardTitleEditor_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
-export declare class FrameCardTitleEditor extends FrameCardTitleEditor_base {
-    static styles: import("lit").CSSResult;
-    private readonly _isComposing;
-    get inlineEditor(): import("../../affine-shared/types/index.js").AffineInlineEditor | null;
-    private _unmount;
-    firstUpdated(): void;
-    getUpdateComplete(): Promise<boolean>;
-    render(): import("lit-html").TemplateResult<1>;
-    accessor frameModel: FrameBlockModel;
-    accessor left: number;
-    accessor maxWidth: number;
-    accessor richText: RichText;
-    accessor titleContentElement: HTMLElement;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [AFFINE_FRAME_TITLE_EDITOR]: FrameCardTitleEditor;
-    }
-}
-export {};

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

@@ -1,181 +0,0 @@
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import { WithDisposable } from '../../global/lit/index.js';
-import { ShadowlessElement } from '../../std/index.js';
-import { css, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-const styles = css `
-  frame-card-title-editor rich-text .nowrap-lines::-webkit-scrollbar {
-    display: none;
-  }
-`;
-export const AFFINE_FRAME_TITLE_EDITOR = 'affine-frame-card-title-editor';
-let FrameCardTitleEditor = (() => {
-    let _classSuper = WithDisposable(ShadowlessElement);
-    let _frameModel_decorators;
-    let _frameModel_initializers = [];
-    let _frameModel_extraInitializers = [];
-    let _left_decorators;
-    let _left_initializers = [];
-    let _left_extraInitializers = [];
-    let _maxWidth_decorators;
-    let _maxWidth_initializers = [];
-    let _maxWidth_extraInitializers = [];
-    let _richText_decorators;
-    let _richText_initializers = [];
-    let _richText_extraInitializers = [];
-    let _titleContentElement_decorators;
-    let _titleContentElement_initializers = [];
-    let _titleContentElement_extraInitializers = [];
-    return class FrameCardTitleEditor extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _frameModel_decorators = [property({ attribute: false })];
-            _left_decorators = [property({ attribute: false })];
-            _maxWidth_decorators = [property({ attribute: false })];
-            _richText_decorators = [query('rich-text')];
-            _titleContentElement_decorators = [property({ attribute: false })];
-            __esDecorate(this, null, _frameModel_decorators, { kind: "accessor", name: "frameModel", static: false, private: false, access: { has: obj => "frameModel" in obj, get: obj => obj.frameModel, set: (obj, value) => { obj.frameModel = value; } }, metadata: _metadata }, _frameModel_initializers, _frameModel_extraInitializers);
-            __esDecorate(this, null, _left_decorators, { kind: "accessor", name: "left", static: false, private: false, access: { has: obj => "left" in obj, get: obj => obj.left, set: (obj, value) => { obj.left = value; } }, metadata: _metadata }, _left_initializers, _left_extraInitializers);
-            __esDecorate(this, null, _maxWidth_decorators, { kind: "accessor", name: "maxWidth", static: false, private: false, access: { has: obj => "maxWidth" in obj, get: obj => obj.maxWidth, set: (obj, value) => { obj.maxWidth = value; } }, metadata: _metadata }, _maxWidth_initializers, _maxWidth_extraInitializers);
-            __esDecorate(this, null, _richText_decorators, { kind: "accessor", name: "richText", static: false, private: false, access: { has: obj => "richText" in obj, get: obj => obj.richText, set: (obj, value) => { obj.richText = value; } }, metadata: _metadata }, _richText_initializers, _richText_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);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static { this.styles = styles; }
-        get inlineEditor() {
-            return this.richText.inlineEditor;
-        }
-        _unmount() {
-            // dispose in advance to avoid execute `this.remove()` twice
-            this.disposables.dispose();
-            this.remove();
-            this.titleContentElement.style.display = 'block';
-        }
-        firstUpdated() {
-            this.updateComplete
-                .then(() => {
-                if (this.inlineEditor === null)
-                    return;
-                this.titleContentElement.style.display = 'none';
-                this.inlineEditor.selectAll();
-                this.inlineEditor.slots.renderComplete.subscribe(() => {
-                    this.requestUpdate();
-                });
-                const inlineEditorContainer = this.inlineEditor.rootElement;
-                if (!inlineEditorContainer)
-                    return;
-                this.disposables.addFromEvent(inlineEditorContainer, 'blur', () => {
-                    this._unmount();
-                });
-                this.disposables.addFromEvent(inlineEditorContainer, 'click', e => {
-                    e.stopPropagation();
-                });
-                this.disposables.addFromEvent(inlineEditorContainer, 'dblclick', e => {
-                    e.stopPropagation();
-                });
-                this.disposables.addFromEvent(inlineEditorContainer, 'keydown', e => {
-                    e.stopPropagation();
-                    if (e.key === 'Enter' && !this._isComposing) {
-                        this._unmount();
-                    }
-                });
-            })
-                .catch(console.error);
-        }
-        async getUpdateComplete() {
-            const result = await super.getUpdateComplete();
-            await this.richText?.updateComplete;
-            return result;
-        }
-        render() {
-            const inlineEditorStyle = styleMap({
-                transformOrigin: 'top left',
-                borderRadius: '4px',
-                maxWidth: `${this.maxWidth}px`,
-                maxHeight: '20px',
-                width: 'fit-content',
-                height: '20px',
-                fontSize: 'var(--affine-font-sm)',
-                lineHeight: '20px',
-                position: 'absolute',
-                left: `${this.left}px`,
-                top: '0px',
-                minWidth: '8px',
-                background: 'var(--affine-background-primary-color)',
-                border: '1px solid var(--affine-primary-color)',
-                color: 'var(--affine-text-primary-color)',
-                boxShadow: '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)',
-                zIndex: '1',
-                display: 'block',
-            });
-            return html `<rich-text
-      .yText=${this.frameModel.props.title.yText}
-      .enableFormat=${false}
-      .enableAutoScrollHorizontally=${true}
-      .enableUndoRedo=${false}
-      .wrapText=${false}
-      style=${inlineEditorStyle}
-    ></rich-text>`;
-        }
-        #frameModel_accessor_storage;
-        get frameModel() { return this.#frameModel_accessor_storage; }
-        set frameModel(value) { this.#frameModel_accessor_storage = value; }
-        #left_accessor_storage;
-        get left() { return this.#left_accessor_storage; }
-        set left(value) { this.#left_accessor_storage = value; }
-        #maxWidth_accessor_storage;
-        get maxWidth() { return this.#maxWidth_accessor_storage; }
-        set maxWidth(value) { this.#maxWidth_accessor_storage = value; }
-        #richText_accessor_storage;
-        get richText() { return this.#richText_accessor_storage; }
-        set richText(value) { this.#richText_accessor_storage = value; }
-        #titleContentElement_accessor_storage;
-        get titleContentElement() { return this.#titleContentElement_accessor_storage; }
-        set titleContentElement(value) { this.#titleContentElement_accessor_storage = value; }
-        constructor() {
-            super(...arguments);
-            this._isComposing = false;
-            this.#frameModel_accessor_storage = __runInitializers(this, _frameModel_initializers, void 0);
-            this.#left_accessor_storage = (__runInitializers(this, _frameModel_extraInitializers), __runInitializers(this, _left_initializers, void 0));
-            this.#maxWidth_accessor_storage = (__runInitializers(this, _left_extraInitializers), __runInitializers(this, _maxWidth_initializers, void 0));
-            this.#richText_accessor_storage = (__runInitializers(this, _maxWidth_extraInitializers), __runInitializers(this, _richText_initializers, void 0));
-            this.#titleContentElement_accessor_storage = (__runInitializers(this, _richText_extraInitializers), __runInitializers(this, _titleContentElement_initializers, void 0));
-            __runInitializers(this, _titleContentElement_extraInitializers);
-        }
-    };
-})();
-export { FrameCardTitleEditor };