@formicoidea/labre-core 0.31.0 → 0.32.0

package/dist/_pkgs/affine-widget-edgeless-selected-rect/edgeless-auto-complete.d.ts

@@ -12,6 +12,12 @@ export declare class EdgelessAutoComplete extends EdgelessAutoComplete_base {
     private readonly _onPointerDown;
     private _pathGenerator;
     private _timer;
+    /**
+     * Whether `this.current` is a thing the auto-complete knows how to clone: a
+     * shape (subclasses included) or a note block. Deliberately says nothing
+     * about the selection — the drag-out path consults it *after* clearing the
+     * selection to open the shape picker.
+     */
     get canShowAutoComplete(): boolean;
     get connectionOverlay(): ConnectionOverlay;
     get crud(): import("../affine-block-surface/index.js").EdgelessCRUDExtension;
@@ -30,10 +36,18 @@ export declare class EdgelessAutoComplete extends EdgelessAutoComplete_base {
     private _showNextShape;
     connectedCallback(): void;
     firstUpdated(): void;
+    /**
+     * The single predicate the arrows are rendered on. It must stay stricter
+     * than, or equal to, what the click handlers can actually do: an arrow the
+     * click cannot honour is a crash waiting to happen (see
+     * `createEdgelessElement`). Hence the identity check — `current` is a
+     * property set by the selected-rect on the previous render, so it can lag
+     * behind the selection by a frame, and it is `current`, not the selection,
+     * that the click acts on.
+     */
     private _canAutoComplete;
     removeOverlay(): void;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
-    private accessor _isHover;
     private accessor _isMoving;
     accessor current: ShapeElementModel | NoteBlockModel;
     accessor edgeless: BlockComponent;

package/dist/_pkgs/affine-widget-edgeless-selected-rect/edgeless-auto-complete.js

@@ -37,7 +37,7 @@ import { ConnectorPathGenerator, } from '../affine-gfx-connector/index.js';
 import { mountShapeTextEditor } from '../affine-gfx-shape/index.js';
 import { DEFAULT_NOTE_HEIGHT, DefaultTheme, LayoutType, MindmapElementModel, ShapeElementModel, shapeMethods, } from '../affine-model/index.js';
 import { ToolbarRegistryIdentifier } from '../affine-shared/services/index.js';
-import { handleNativeRangeAtPoint } from '../affine-shared/utils/index.js';
+import { handleNativeRangeAtPoint, toClientCoord, } from '../affine-shared/utils/index.js';
 import { DisposableGroup } from '../global/disposable/index.js';
 import { Vec } from '../global/gfx/index.js';
 import { WithDisposable } from '../global/lit/index.js';
@@ -77,9 +77,6 @@ class AutoCompleteOverlay extends Overlay {
 }
 let EdgelessAutoComplete = (() => {
     let _classSuper = WithDisposable(LitElement);
-    let __isHover_decorators;
-    let __isHover_initializers = [];
-    let __isHover_extraInitializers = [];
     let __isMoving_decorators;
     let __isMoving_initializers = [];
     let __isMoving_extraInitializers = [];
@@ -98,7 +95,6 @@ let EdgelessAutoComplete = (() => {
     return class EdgelessAutoComplete extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __isHover_decorators = [state()];
             __isMoving_decorators = [state()];
             _current_decorators = [property({ attribute: false })];
             _edgeless_decorators = [property({ attribute: false })];
@@ -106,7 +102,6 @@ let EdgelessAutoComplete = (() => {
             _std_decorators = [consume({
                     context: stdContext,
                 })];
-            __esDecorate(this, null, __isHover_decorators, { kind: "accessor", name: "_isHover", static: false, private: false, access: { has: obj => "_isHover" in obj, get: obj => obj._isHover, set: (obj, value) => { obj._isHover = value; } }, metadata: _metadata }, __isHover_initializers, __isHover_extraInitializers);
             __esDecorate(this, null, __isMoving_decorators, { kind: "accessor", name: "_isMoving", static: false, private: false, access: { has: obj => "_isMoving" in obj, get: obj => obj._isMoving, set: (obj, value) => { obj._isMoving = value; } }, metadata: _metadata }, __isMoving_initializers, __isMoving_extraInitializers);
             __esDecorate(this, null, _current_decorators, { kind: "accessor", name: "current", static: false, private: false, access: { has: obj => "current" in obj, get: obj => obj.current, set: (obj, value) => { obj.current = value; } }, metadata: _metadata }, _current_initializers, _current_extraInitializers);
             __esDecorate(this, null, _edgeless_decorators, { kind: "accessor", name: "edgeless", static: false, private: false, access: { has: obj => "edgeless" in obj, get: obj => obj.edgeless, set: (obj, value) => { obj.edgeless = value; } }, metadata: _metadata }, _edgeless_initializers, _edgeless_extraInitializers);
@@ -195,6 +190,12 @@ let EdgelessAutoComplete = (() => {
         get _surface() {
             return getSurfaceBlock(this.std.store);
         }
+        /**
+         * Whether `this.current` is a thing the auto-complete knows how to clone: a
+         * shape (subclasses included) or a note block. Deliberately says nothing
+         * about the selection — the drag-out path consults it *after* clearing the
+         * selection to open the shape picker.
+         */
         get canShowAutoComplete() {
             const { current } = this;
             return isShape(current) || isNoteBlock(current);
@@ -283,11 +284,18 @@ let EdgelessAutoComplete = (() => {
         _createAutoCompletePanel(e, connector) {
             if (!this.canShowAutoComplete)
                 return;
-            const position = this.gfx.viewport.toModelCoord(e.clientX, e.clientY);
+            // `clientX`/`clientY` are window coordinates: read them as such, or the
+            // panel opens at the viewport's own offset away from the pointer.
+            const position = this.gfx.viewport.toModelCoordFromClientCoord([
+                e.clientX,
+                e.clientY,
+            ]);
             const autoCompletePanel = new EdgelessAutoCompletePanel(position, this.edgeless, this.current, connector);
             this.edgeless.append(autoCompletePanel);
         }
         _generateElementOnClick(type) {
+            if (!this.canShowAutoComplete)
+                return;
             const { store } = this.edgeless;
             const bound = this._computeNextBound(type);
             const id = createEdgelessElement(this.edgeless, this.current, bound);
@@ -309,7 +317,11 @@ let EdgelessAutoComplete = (() => {
                 if (!model) {
                     return;
                 }
-                const [x, y] = this.gfx.viewport.toViewCoord(bound.center[0], bound.y + DEFAULT_NOTE_HEIGHT / 2);
+                // `handleNativeRangeAtPoint` hands the point to
+                // `document.caretRangeFromPoint`, which speaks client coordinates: the
+                // viewport's own offset in the window has to be there, or the caret is
+                // placed by that offset away from the note that was just created.
+                const [x, y] = toClientCoord(this.gfx.viewport, bound.center[0], bound.y + DEFAULT_NOTE_HEIGHT / 2);
                 requestAnimationFrame(() => {
                     handleNativeRangeAtPoint(x, y);
                 });
@@ -524,7 +536,7 @@ let EdgelessAutoComplete = (() => {
             this._initOverlay();
         }
         firstUpdated() {
-            const { _disposables, edgeless, gfx } = this;
+            const { _disposables, gfx } = this;
             _disposables.add(this.gfx.selection.slots.updated.subscribe(() => {
                 this._autoCompleteOverlay.linePoints = [];
                 this._autoCompleteOverlay.renderShape = null;
@@ -533,16 +545,6 @@ let EdgelessAutoComplete = (() => {
                 this.requestUpdate();
             }));
             _disposables.add(() => this.removeOverlay());
-            _disposables.add(edgeless.host.event.add('pointerMove', ctx => {
-                const evt = ctx.get('pointerState');
-                const [x, y] = gfx.viewport.toModelCoord(evt.x, evt.y);
-                const elm = gfx.getElementByPoint(x, y);
-                if (!elm) {
-                    this._isHover = false;
-                    return;
-                }
-                this._isHover = elm === this.current ? true : false;
-            }));
             this.edgeless.handleEvent('dragStart', () => {
                 this._isMoving = true;
             });
@@ -550,11 +552,20 @@ let EdgelessAutoComplete = (() => {
                 this._isMoving = false;
             });
         }
+        /**
+         * The single predicate the arrows are rendered on. It must stay stricter
+         * than, or equal to, what the click handlers can actually do: an arrow the
+         * click cannot honour is a crash waiting to happen (see
+         * `createEdgelessElement`). Hence the identity check — `current` is a
+         * property set by the selected-rect on the previous render, so it can lag
+         * behind the selection by a frame, and it is `current`, not the selection,
+         * that the click acts on.
+         */
         _canAutoComplete() {
-            const selection = this.gfx.selection;
-            return (selection.selectedElements.length === 1 &&
-                (selection.selectedElements[0] instanceof ShapeElementModel ||
-                    isNoteBlock(selection.selectedElements[0])));
+            const selected = this.gfx.selection.selectedElements;
+            return (selected.length === 1 &&
+                selected[0] === this.current &&
+                this.canShowAutoComplete);
         }
         removeOverlay() {
             this._timer && clearTimeout(this._timer);
@@ -564,13 +575,11 @@ let EdgelessAutoComplete = (() => {
             surface.renderer.removeOverlay(this._autoCompleteOverlay);
         }
         render() {
-            const isShape = this.current instanceof ShapeElementModel;
-            const isMindMap = this.current.group instanceof MindmapElementModel;
-            if (this._isMoving ||
-                (this._isHover && !isShape && !this._canAutoComplete())) {
+            if (this._isMoving || !this._canAutoComplete()) {
                 this.removeOverlay();
                 return nothing;
             }
+            const isMindMap = this.current.group instanceof MindmapElementModel;
             const { selectedRect } = this;
             return html `<div
       class="edgeless-auto-complete-container"
@@ -585,9 +594,6 @@ let EdgelessAutoComplete = (() => {
       ${isMindMap ? this._renderMindMapButtons() : this._renderArrow()}
     </div>`;
         }
-        #_isHover_accessor_storage;
-        get _isHover() { return this.#_isHover_accessor_storage; }
-        set _isHover(value) { this.#_isHover_accessor_storage = value; }
         #_isMoving_accessor_storage;
         get _isMoving() { return this.#_isMoving_accessor_storage; }
         set _isMoving(value) { this.#_isMoving_accessor_storage = value; }
@@ -650,8 +656,7 @@ let EdgelessAutoComplete = (() => {
                 });
             };
             this._timer = null;
-            this.#_isHover_accessor_storage = __runInitializers(this, __isHover_initializers, true);
-            this.#_isMoving_accessor_storage = (__runInitializers(this, __isHover_extraInitializers), __runInitializers(this, __isMoving_initializers, false));
+            this.#_isMoving_accessor_storage = __runInitializers(this, __isMoving_initializers, false);
             this.#current_accessor_storage = (__runInitializers(this, __isMoving_extraInitializers), __runInitializers(this, _current_initializers, void 0));
             this.#edgeless_accessor_storage = (__runInitializers(this, _current_extraInitializers), __runInitializers(this, _edgeless_initializers, void 0));
             this.#selectedRect_accessor_storage = (__runInitializers(this, _edgeless_extraInitializers), __runInitializers(this, _selectedRect_initializers, void 0));

package/dist/_pkgs/affine-widget-edgeless-selected-rect/edgeless-element-link.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { RefNodeSlotsProvider } from '../affine-inline-reference/index.js';
-import { requestThrottledConnectedFrame } from '../affine-shared/utils/index.js';
+import { overlayScale, requestThrottledConnectedFrame, toOverlayCoord, } from '../affine-shared/utils/index.js';
 import { WidgetComponent } from '../std/index.js';
 import { GfxControllerIdentifier, GfxPrimitiveElementModel, } from '../std/gfx/index.js';
 import { OpenInNewIcon, RightSidebarIcon } from '@blocksuite/icons/lit';
@@ -72,12 +72,13 @@ let EdgelessElementLinkWidget = (() => {
                 }
                 const bound = el.elementBound;
                 const { viewport } = this.gfx;
-                const [left, top] = viewport.toViewCoord(bound.x, bound.y);
+                const [left, top] = toOverlayCoord(viewport, bound.x, bound.y);
+                const scale = overlayScale(viewport);
                 this._rect = {
                     left,
                     top,
-                    width: bound.w * viewport.zoom,
-                    height: bound.h * viewport.zoom,
+                    width: bound.w * scale,
+                    height: bound.h * scale,
                 };
             }, this));
             this._open = (e) => {

package/dist/_pkgs/affine-widget-edgeless-selected-rect/edgeless-selected-rect.js

@@ -36,7 +36,7 @@ import {} from '../affine-block-frame/index.js';
 import { EdgelessLegacySlotIdentifier, OverlayIdentifier, } from '../affine-block-surface/index.js';
 import { ConnectorElementModel, } from '../affine-model/index.js';
 import { unsafeCSSVarV2 } from '../affine-shared/theme/index.js';
-import { getSelectedRect, requestThrottledConnectedFrame, stopPropagation, } from '../affine-shared/utils/index.js';
+import { getSelectedRect, overlayScale, requestThrottledConnectedFrame, stopPropagation, toOverlayCoord, } from '../affine-shared/utils/index.js';
 import { deserializeXYWH } from '../global/gfx/index.js';
 import { WidgetComponent } from '../std/index.js';
 import { GfxControllerIdentifier, InteractivityIdentifier, } from '../std/gfx/index.js';
@@ -523,13 +523,14 @@ let EdgelessSelectedRectWidget = (() => {
                 borderStyle: 'solid',
             });
             this._updateSelectedRect = (__runInitializers(this, __selectedRect_extraInitializers), requestThrottledConnectedFrame(() => {
-                const { zoom, selection, gfx } = this;
+                const { selection, gfx } = this;
                 const elements = selection.selectedElements;
                 // in surface
                 const rect = getSelectedRect(elements);
-                // in viewport
-                const [left, top] = gfx.viewport.toViewCoord(rect.left, rect.top);
-                const [width, height] = [rect.width * zoom, rect.height * zoom];
+                // in viewport, inside the container the host may have scaled
+                const [left, top] = toOverlayCoord(gfx.viewport, rect.left, rect.top);
+                const scale = overlayScale(gfx.viewport);
+                const [width, height] = [rect.width * scale, rect.height * scale];
                 let rotate = 0;
                 if (elements.length === 1 && elements[0].rotate) {
                     rotate = elements[0].rotate;
@@ -571,7 +572,15 @@ let EdgelessSelectedRectWidget = (() => {
             }
             _disposables.add(this.store.slots.blockUpdated.subscribe(this._updateOnElementChange));
             _disposables.add(selection.slots.updated.subscribe(this._updateOnSelectionChange));
-            _disposables.add(this._slots.readonlyUpdated.subscribe(() => this.requestUpdate()));
+            _disposables.add(
+            // `_updateHandles` already refuses on readonly, but it only ran on
+            // selection change: a board switched to readonly while something was
+            // selected kept its 8 resize handles — and dragging one of them wrote
+            // `xywh`. Recompute on the flip, in both directions.
+            this._slots.readonlyUpdated.subscribe(() => {
+                this._updateHandles();
+                this.requestUpdate();
+            }));
             _disposables.add(this._slots.elementResizeEnd.subscribe(() => (this._isResizing = false)));
             if (this._interaction) {
                 _disposables.add(this._interaction.activeInteraction$.subscribe(val => {
@@ -686,15 +695,16 @@ let EdgelessSelectedRectWidget = (() => {
                 !elements.some(e => e instanceof ConnectorElementModel)) {
                 handles.push(repeat(elements, element => element.id, element => {
                     const [modelX, modelY, w, h] = deserializeXYWH(element.xywh);
-                    const [x, y] = gfx.viewport.toViewCoord(modelX, modelY);
+                    const [x, y] = toOverlayCoord(gfx.viewport, modelX, modelY);
+                    const scale = overlayScale(gfx.viewport);
                     const { left, top, borderWidth } = this._selectedRect;
                     const style = {
                         position: 'absolute',
                         boxSizing: 'border-box',
                         left: `${x - left - borderWidth}px`,
                         top: `${y - top - borderWidth}px`,
-                        width: `${w * this.zoom}px`,
-                        height: `${h * this.zoom}px`,
+                        width: `${w * scale}px`,
+                        height: `${h * scale}px`,
                         transform: `rotate(${element.rotate}deg)`,
                         border: `1px solid var(--affine-primary-color)`,
                     };

package/dist/_pkgs/affine-widget-edgeless-selected-rect/utils.d.ts

@@ -2,7 +2,7 @@ import { type Options, Overlay, type RoughCanvas } from '../affine-block-surface
 import { type NoteBlockModel, ShapeElementModel, type ShapeName, type ShapeStyle } from '../affine-model/index.js';
 import { Bound, type XYWH } from '../global/gfx/index.js';
 import type { BlockComponent } from '../std/index.js';
-import type { CursorType, GfxController, ResizeHandle, StandardCursor } from '../std/gfx/index.js';
+import type { CursorType, GfxController, GfxModel, ResizeHandle, StandardCursor } from '../std/gfx/index.js';
 export declare enum Direction {
     Right = 0,
     Bottom = 1,
@@ -49,7 +49,21 @@ export declare function getPosition(type: Direction): {
 };
 export declare function isShape(element: unknown): element is ShapeElementModel;
 export declare function capitalizeFirstLetter(str: string): string;
-export declare function createEdgelessElement(edgeless: BlockComponent, current: ShapeElementModel | NoteBlockModel, bound: Bound): string | null;
+/**
+ * Clone `current` one bound further along, so an auto-complete arrow can drop a
+ * sibling of what is selected.
+ *
+ * Only two kinds of thing can be cloned this way: a shape (any
+ * `ShapeElementModel`, subclasses included — a wardley node, an EDGY node, a
+ * BPMN node) and a note block. Everything else on the canvas — a group, a free
+ * text label, a connector, a framework background — has no `props` bag at all,
+ * and reading one blindly is what used to throw
+ * `Cannot read properties of undefined (reading 'background')` the moment an
+ * arrow was offered on a selected wardley component (which selects the *group*
+ * wrapping node + label, not the node). We return `null` instead: the caller
+ * already treats a falsy id as "nothing to complete".
+ */
+export declare function createEdgelessElement(edgeless: BlockComponent, current: GfxModel, bound: Bound): string | null;
 export declare function createShapeElement(edgeless: BlockComponent, current: ShapeElementModel | NoteBlockModel, targetType: TARGET_SHAPE_TYPE): string | null;
 export declare function generateCursorUrl(angle: number | undefined, handle: ResizeHandle, fallback?: StandardCursor): CursorType;
 export declare function getRotatedResizeCursor(option: {

package/dist/_pkgs/affine-widget-edgeless-selected-rect/utils.js

@@ -1,4 +1,4 @@
-import { EdgelessCRUDIdentifier, Overlay, } from '../affine-block-surface/index.js';
+import { EdgelessCRUDIdentifier, isNoteBlock, Overlay, } from '../affine-block-surface/index.js';
 import { ShapeFactory } from '../affine-gfx-shape/index.js';
 import { getShapeRadius, getShapeType, GroupElementModel, ShapeElementModel, } from '../affine-model/index.js';
 import { BlockSuiteError, ErrorCode } from '../global/exceptions/index.js';
@@ -203,6 +203,20 @@ export function isShape(element) {
 export function capitalizeFirstLetter(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
 }
+/**
+ * Clone `current` one bound further along, so an auto-complete arrow can drop a
+ * sibling of what is selected.
+ *
+ * Only two kinds of thing can be cloned this way: a shape (any
+ * `ShapeElementModel`, subclasses included — a wardley node, an EDGY node, a
+ * BPMN node) and a note block. Everything else on the canvas — a group, a free
+ * text label, a connector, a framework background — has no `props` bag at all,
+ * and reading one blindly is what used to throw
+ * `Cannot read properties of undefined (reading 'background')` the moment an
+ * arrow was offered on a selected wardley component (which selects the *group*
+ * wrapping node + label, not the node). We return `null` instead: the caller
+ * already treats a falsy id as "nothing to complete".
+ */
 export function createEdgelessElement(edgeless, current, bound) {
     const crud = edgeless.std.get(EdgelessCRUDIdentifier);
     let id;
@@ -217,7 +231,7 @@ export function createEdgelessElement(edgeless, current, bound) {
             return null;
         element = crud.getElementById(id);
     }
-    else {
+    else if (isNoteBlock(current)) {
         const { store } = edgeless;
         id = store.addBlock('affine:note', {
             background: current.props.background,
@@ -236,6 +250,9 @@ export function createEdgelessElement(edgeless, current, bound) {
         store.addBlock('affine:paragraph', {}, note.id);
         element = note;
     }
+    else {
+        return null;
+    }
     if (!element) {
         throw new BlockSuiteError(ErrorCode.GfxBlockElementError, 'Element is not found after creation');
     }

package/dist/_pkgs/affine-widget-edgeless-toolbar/index.d.ts

@@ -4,4 +4,5 @@ export * from './create-popper.js';
 export * from './draggable/index.js';
 export * from './edgeless-toolbar.js';
 export * from './extension/index.js';
+export * from './menu/command-menu.js';
 export * from './mixins/index.js';

package/dist/_pkgs/affine-widget-edgeless-toolbar/index.js

@@ -4,4 +4,5 @@ export * from './create-popper.js';
 export * from './draggable/index.js';
 export * from './edgeless-toolbar.js';
 export * from './extension/index.js';
+export * from './menu/command-menu.js';
 export * from './mixins/index.js';

package/dist/_pkgs/affine-widget-edgeless-toolbar/menu/command-menu.d.ts

@@ -0,0 +1,38 @@
+import { type CommandDescriptor, type CommandOwner } from '../../std/index.js';
+import { type CSSResultGroup, LitElement } from 'lit';
+declare const EdgelessCommandMenu_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../index.js").EdgelessToolbarToolClass>;
+/**
+ * The senior button sub-menu, rendered FROM the command registry.
+ *
+ * Before PF3 each framework hand-wrote this popover with a literal button per
+ * artefact, an inline English tooltip and its own `_track()` helper — which is
+ * how Wardley's menu drifted to 13 artefacts against 7 in the shortcut
+ * manifest, and how cynefin-estuarine ended up emitting no telemetry at all.
+ * There is now exactly one renderer, and it enumerates
+ * `getCommandsForSurface(std, owner, 'senior-menu')`. A framework subclass
+ * declares its owner and its tool type, nothing else. See `docs/adr/0008`.
+ */
+export declare abstract class EdgelessCommandMenu extends EdgelessCommandMenu_base {
+    /**
+     * Typed as a group so a subclass can extend rather than replace it — the DDD
+     * palettes narrow `--labre-command-menu-gap`.
+     */
+    static styles: CSSResultGroup;
+    /** Which framework's commands this popover shows. */
+    protected abstract owner: CommandOwner;
+    get commands(): CommandDescriptor[];
+    private _invoke;
+    /**
+     * What the button says on hover: its label, plus — when the command declares
+     * one — the sentence that tells the user what its GESTURE means.
+     *
+     * That second line is M1 of `docs/adr/0010`: a link tool whose drag decides
+     * the orientation of a persisted relation has to SAY so, or the direction it
+     * writes is a by-product rather than a statement. The library still puts no
+     * words in a framework's mouth — both halves are the framework's own keys and
+     * fallbacks, resolved through the host's catalogue.
+     */
+    private _tooltip;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/_pkgs/affine-widget-edgeless-toolbar/menu/command-menu.js

@@ -0,0 +1,99 @@
+import { translateKey } from '../../affine-shared/services/index.js';
+import { getCommandIcon, getCommandsForSurface, runCommand, } from '../../std/index.js';
+import { css, html, LitElement } from 'lit';
+import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
+/**
+ * The senior button sub-menu, rendered FROM the command registry.
+ *
+ * Before PF3 each framework hand-wrote this popover with a literal button per
+ * artefact, an inline English tooltip and its own `_track()` helper — which is
+ * how Wardley's menu drifted to 13 artefacts against 7 in the shortcut
+ * manifest, and how cynefin-estuarine ended up emitting no telemetry at all.
+ * There is now exactly one renderer, and it enumerates
+ * `getCommandsForSurface(std, owner, 'senior-menu')`. A framework subclass
+ * declares its owner and its tool type, nothing else. See `docs/adr/0008`.
+ */
+export class EdgelessCommandMenu extends EdgelessToolbarToolMixin(LitElement) {
+    /**
+     * Typed as a group so a subclass can extend rather than replace it — the DDD
+     * palettes narrow `--labre-command-menu-gap`.
+     */
+    static { this.styles = css `
+    :host {
+      display: flex;
+      z-index: -1;
+      justify-content: center;
+    }
+    .menu-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .button-group-container {
+      display: flex;
+      align-items: center;
+      gap: var(--labre-command-menu-gap, 14px);
+      fill: var(--affine-icon-color);
+    }
+    .button-group-container svg {
+      width: 24px;
+      height: 24px;
+    }
+  `; }
+    get commands() {
+        return getCommandsForSurface(this.edgeless.std, this.owner, 'senior-menu');
+    }
+    _invoke(command) {
+        // The ONE emission point: no `_track()` helper anywhere in the menus.
+        runCommand(this.edgeless.std, command, {
+            surface: 'senior-menu',
+            source: 'toolbar:general',
+        });
+    }
+    /**
+     * What the button says on hover: its label, plus — when the command declares
+     * one — the sentence that tells the user what its GESTURE means.
+     *
+     * That second line is M1 of `docs/adr/0010`: a link tool whose drag decides
+     * the orientation of a persisted relation has to SAY so, or the direction it
+     * writes is a by-product rather than a statement. The library still puts no
+     * words in a framework's mouth — both halves are the framework's own keys and
+     * fallbacks, resolved through the host's catalogue.
+     */
+    _tooltip(command) {
+        const label = translateKey(this.edgeless.std, command.labelKey, command.labelFallback);
+        const { descriptionKey, descriptionFallback } = command;
+        if (!descriptionKey && !descriptionFallback)
+            return label;
+        const hint = descriptionKey
+            ? translateKey(this.edgeless.std, descriptionKey, descriptionFallback)
+            : descriptionFallback;
+        // A key with no catalogue entry and no fallback resolves to itself — show
+        // the label alone rather than a raw i18n key under it.
+        if (!hint || hint === descriptionKey)
+            return label;
+        // Inline, not a class: the template is rendered inside the icon button's
+        // own shadow root, where this component's stylesheet does not reach.
+        return html `${label}<span
+        style="display:block;max-width:220px;margin-top:2px;opacity:0.75;font-size:11px;line-height:1.35;white-space:normal"
+        >${hint}</span
+      >`;
+    }
+    render() {
+        const std = this.edgeless.std;
+        return html `
+      <edgeless-slide-menu>
+        <div class="menu-content">
+          <div class="button-group-container">
+            ${this.commands.map(command => html `<edgeless-tool-icon-button
+                .tooltip=${this._tooltip(command)}
+                @click=${() => this._invoke(command)}
+              >
+                ${getCommandIcon(std, command.iconKey)}
+              </edgeless-tool-icon-button>`)}
+          </div>
+        </div>
+      </edgeless-slide-menu>
+    `;
+    }
+}

package/dist/_pkgs/affine-widget-frame-title/edgeless-frame-title-editor.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { FrameBlockModel } from '../affine-model/index.js';
+import { toOverlayCoord } from '../affine-shared/utils/index.js';
 import { Bound } from '../global/gfx/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { ShadowlessElement } from '../std/index.js';
@@ -152,7 +153,9 @@ let EdgelessFrameTitleEditor = (() => {
                 return nothing;
             const viewport = this.gfx.viewport;
             const bound = Bound.deserialize(this.frameModel.xywh);
-            const [x, y] = viewport.toViewCoord(bound.x, bound.y);
+            // The editor is mounted inside the container the host may have scaled, so
+            // it is placed the way the title it replaces is, not in screen pixels.
+            const [x, y] = toOverlayCoord(viewport, bound.x, bound.y);
             const isInner = this.gfx.grid.has(this.frameModel.elementBound, true, true, model => model !== this.frameModel && model instanceof FrameBlockModel);
             const frameTitleWidget = this.edgeless.std.view.getWidget(AFFINE_FRAME_TITLE_WIDGET, this.frameModel.id);
             if (!frameTitleWidget)