@formicoidea/labre-core 0.55.0 → 0.57.0

package/architecture/likec4.config.json

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

package/architecture/model.c4

@@ -0,0 +1,128 @@
+// Hand-written half of the library's architecture map (ADR 0040): the
+// element and relationship kinds, and the views. Every element and relation
+// lives in code.c4, generated by `yarn architecture`; a view here selects
+// them by predicate (kind, scope, wildcard), never by naming a package or a
+// folder, so a new package shows up without touching this file. A scoped
+// view names its layer or family: a new packages/affine/<kind> folder (a new
+// family) needs a new family view here.
+specification {
+  element layer {
+    notation 'Layer: uses the layers below it, never above'
+    style {
+      color slate
+      opacity 10%
+      border dashed
+    }
+  }
+  element family {
+    notation 'Package family: packages/affine/<kind>'
+    style {
+      color slate
+      opacity 20%
+    }
+  }
+  element package {
+    notation 'Workspace package'
+    style {
+      color primary
+    }
+  }
+  element folder {
+    notation 'Folder under the package src/'
+    style {
+      color secondary
+      size small
+    }
+  }
+  relationship uses {
+    notation 'Package imports package (count of importing/imported file pairs)'
+    color primary
+  }
+  relationship imports {
+    notation 'Folder imports folder (count of importing/imported file pairs)'
+    color gray
+    line dotted
+  }
+}
+
+views {
+  // A view of packages excludes `imports` (folder to folder): those
+  // relations stay in the model for the relationship browser and the MCP
+  // tools, but would double every package edge on the diagram.
+  view index {
+    title 'blocksuite-labre: layers'
+    description 'Four layers, one direction, and the tooling above them. Click a layer to zoom.'
+    include *
+    exclude * -> * where kind is imports
+    autoLayout BottomTop
+  }
+
+  view layer-framework of framework {
+    title 'framework/*'
+    include *
+    exclude * -> * where kind is imports
+  }
+
+  // A layer of one package shows that package's folders instead.
+  view layer-model of model_ {
+    title 'affine/model'
+    description 'The file format, folder by folder.'
+    include model_.**
+  }
+
+  view layer-features of features {
+    title 'affine/* features'
+    description 'Package families and standalone feature packages.'
+    include *
+    exclude * -> * where kind is imports
+  }
+
+  // A family view shows its packages and the edges among them only: the
+  // edges to every package outside the family flatten the diagram.
+  view family-blocks of features.blocks {
+    title 'affine/blocks'
+    include features.blocks.*
+    exclude * -> * where kind is imports
+    autoLayout LeftRight
+  }
+
+  view family-fragments of features.fragments {
+    title 'affine/fragments'
+    include features.fragments.*
+    exclude * -> * where kind is imports
+    autoLayout LeftRight
+  }
+
+  view family-gfx of features.gfx {
+    title 'affine/gfx'
+    include features.gfx.*
+    exclude * -> * where kind is imports
+    autoLayout LeftRight
+  }
+
+  view family-inlines of features.inlines {
+    title 'affine/inlines'
+    include features.inlines.*
+    exclude * -> * where kind is imports
+    autoLayout LeftRight
+  }
+
+  view family-widgets of features.widgets {
+    title 'affine/widgets'
+    include features.widgets.*
+    exclude * -> * where kind is imports
+    autoLayout LeftRight
+  }
+
+  view layer-assembly of assembly {
+    title 'affine/all'
+    description 'The assembly, folder by folder.'
+    include assembly.**
+  }
+
+  view layer-tooling of tooling {
+    title 'tooling'
+    include *
+    exclude * -> * where kind is imports
+  }
+}

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;