@formicoidea/labre-core 0.55.0 → 0.57.0

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/_pkgs/store/model/store/query.js

@@ -2,11 +2,23 @@ import isMatch from 'lodash.ismatch';
 export function runQuery(query, block) {
     const blockViewType = getBlockViewType(query, block);
     block.blockViewType = blockViewType;
-    if (blockViewType !== 'hidden') {
+    if (blockViewType !== 'hidden' && canHideBlocks(query)) {
         const queryMode = query.mode;
         setAncestorsToDisplayIfHidden(queryMode, block);
     }
 }
+/**
+ * A loose query hides a block only through a `viewType: 'hidden'` entry, so
+ * without one no ancestor can be hidden and the walk below is a no-op. The
+ * walk costs one O(n) `getParent` per ancestor, which made opening a store
+ * with the default query quadratic in the block count (#507, guard
+ * `__tests__/query.unit.spec.ts`).
+ */
+function canHideBlocks(query) {
+    if (query.mode !== 'loose')
+        return true;
+    return query.match.some(entry => entry.viewType === 'hidden');
+}
 function getBlockViewType(query, block) {
     const flavour = block.model.flavour;
     const id = block.model.id;

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.55.0",
+  "version": "0.57.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -904,7 +904,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "architecture"
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.0",

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 };