@formicoidea/labre-core 0.31.0 → 0.33.0

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

@@ -39,7 +39,7 @@ import { mountShapeTextEditor, SHAPE_OVERLAY_HEIGHT, SHAPE_OVERLAY_WIDTH, ShapeC
 import { insertEdgelessTextCommand, mountTextElementEditor, } from '../affine-gfx-text/index.js';
 import { DEFAULT_NOTE_WIDTH, DefaultTheme, FontFamily, FontStyle, FontWeight, getShapeName, GroupElementModel, NoteBlockModel, ShapeStyle, TextElementModel, } from '../affine-model/index.js';
 import { EditPropsStore, FeatureFlagService, ThemeProvider, } from '../affine-shared/services/index.js';
-import { captureEventTarget, matchModels, } from '../affine-shared/utils/index.js';
+import { captureEventTarget, matchModels, overlayScale, overlayViewportSize, toOverlayCoord, } from '../affine-shared/utils/index.js';
 import { Bound, clamp, normalizeDegAngle, serializeXYWH, toDegree, Vec, } from '../global/gfx/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { FrameIcon, PageIcon } from '@blocksuite/icons/lit';
@@ -369,11 +369,16 @@ let EdgelessAutoCompletePanel = (() => {
         }
         _getPanelPosition() {
             const { viewport } = this.gfx;
-            const { boundingClientRect: viewportRect, zoom } = viewport;
-            const result = this._getTargetXYWH(PANEL_WIDTH / zoom, PANEL_HEIGHT / zoom);
+            // The panel is appended to the edgeless container, so its `left`/`top`
+            // live in that container's space — already scaled by the host, the way a
+            // gfx block's placement is. Both the panel's own size and the edges it is
+            // kept away from have to be stated there too, or the clamp fires against
+            // screen pixels the panel is not measured in.
+            const scale = overlayScale(viewport);
+            const result = this._getTargetXYWH(PANEL_WIDTH / scale, PANEL_HEIGHT / scale);
             const pos = result ? result.xywh.slice(0, 2) : this.position;
-            const coord = viewport.toViewCoord(pos[0], pos[1]);
-            const { width, height } = viewportRect;
+            const coord = toOverlayCoord(viewport, pos[0], pos[1]);
+            const [width, height] = overlayViewportSize(viewport);
             coord[0] = clamp(coord[0], 20, width - 20 - PANEL_WIDTH);
             coord[1] = clamp(coord[1], 20, height - 20 - PANEL_HEIGHT);
             return coord;

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/catalogue/artefact-catalogue-default.d.ts

@@ -0,0 +1,14 @@
+import type { ExtensionType } from '../../store/index.js';
+/**
+ * The DEFAULT `ArtefactCatalogueProvider`: the library's own left sidepanel.
+ *
+ * Registered next to the widget itself (`EdgelessToolbarViewExtension`), and
+ * unconditionally — a catalogue is core chrome, not a framework's tooling. ADR
+ * 0009's gating is carried by the frameworks: a framework whose flag is off
+ * shows no senior button, so its owner is never passed to `open`, and the panel
+ * simply never opens for it.
+ *
+ * `di.addImpl`, so a host's `ArtefactCatalogueExtension(service)` — which uses
+ * `di.override` — wins whatever the registration order.
+ */
+export declare const artefactCatalogueDefaultExtension: ExtensionType;

package/dist/_pkgs/affine-widget-edgeless-toolbar/catalogue/artefact-catalogue-default.js

@@ -0,0 +1,40 @@
+import { ArtefactCatalogueProvider, } from '../../affine-shared/services/index.js';
+import { StdIdentifier } from '../../std/index.js';
+import { EDGELESS_ARTEFACT_CATALOGUE_WIDGET, } from './artefact-catalogue-widget.js';
+/**
+ * The widget, found on the editor host — or `null` before it has mounted, and
+ * on a page-mode editor where it is not registered at all.
+ *
+ * A DOM lookup rather than a reference held at registration time, because the
+ * widget is created and destroyed by lit as the root block renders: the same
+ * lookup `EditorAnchoredPanel` makes for the toolbar it measures against. A
+ * `null` here is not an error — it is a catalogue nobody can open yet, and the
+ * `open` below is then a no-op rather than a throw in a menu click handler.
+ */
+function catalogueWidget(std) {
+    return (std.host.querySelector(EDGELESS_ARTEFACT_CATALOGUE_WIDGET) ?? null);
+}
+/**
+ * The DEFAULT `ArtefactCatalogueProvider`: the library's own left sidepanel.
+ *
+ * Registered next to the widget itself (`EdgelessToolbarViewExtension`), and
+ * unconditionally — a catalogue is core chrome, not a framework's tooling. ADR
+ * 0009's gating is carried by the frameworks: a framework whose flag is off
+ * shows no senior button, so its owner is never passed to `open`, and the panel
+ * simply never opens for it.
+ *
+ * `di.addImpl`, so a host's `ArtefactCatalogueExtension(service)` — which uses
+ * `di.override` — wins whatever the registration order.
+ */
+export const artefactCatalogueDefaultExtension = {
+    setup: di => {
+        di.addImpl(ArtefactCatalogueProvider, provider => {
+            const std = provider.get(StdIdentifier);
+            const service = {
+                open: owner => catalogueWidget(std)?.openFor(owner),
+                close: () => catalogueWidget(std)?.closePanel(),
+            };
+            return service;
+        });
+    },
+};

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

@@ -0,0 +1,158 @@
+import type { RootBlockModel } from '../../affine-model/index.js';
+import { type CommandOwner, WidgetComponent } from '../../std/index.js';
+import { nothing } from 'lit';
+export declare const EDGELESS_ARTEFACT_CATALOGUE_WIDGET = "edgeless-artefact-catalogue-widget";
+/**
+ * The **artefact catalogue** sidepanel (PF6).
+ *
+ * A framework's senior sub-menu is a row of icons, and a row of icons stops
+ * working somewhere around fourteen. The BPMN pack is the first framework to
+ * pass that line, so the sub-menu shows the thirteen the ranking put first and
+ * hands the rest to this panel: everything the owner declares on the
+ * `'catalogue'` surface, grouped by the categories the framework itself
+ * declared, with the label and the chord spelled out instead of guessed from a
+ * glyph.
+ *
+ * ## Left, full height, inside the editor
+ *
+ * Not a popover, not a modal. It is a column down the left edge of the editor
+ * host — the side no toolbar occupies — the canvas stays live to its right, and
+ * a click on the canvas puts it away. Twenty artefacts want a list you scroll,
+ * and a list you scroll wants height; a floating box would have had to choose
+ * between covering the board and showing four rows at a time.
+ *
+ * ## Not an `EditorAnchoredPanel`
+ *
+ * The shared base (ADR 0011) exists for panels pinned ABOVE the senior button
+ * bar and measured against it: its host is bottom-left and zero-sized, and
+ * `anchorBox()` returns a `bottom` and a width read off the bar. None of that
+ * is expressible for a full-height column, so the geometry is this file's own —
+ * but the WISDOM is not reinvented. The layer constant is imported from there
+ * rather than copied, and the host is zero-WIDTH for the same reason its host is
+ * zero-sized (`.widgets-container > * { pointer-events: auto }` is an outer-tree
+ * rule that beats `:host { pointer-events: none }`, so a host with a real box
+ * would swallow canvas clicks down the whole left side of the board). The
+ * click-away, the Escape-on-`std.host` scope and the disconnect cleanup are the
+ * same contracts, replicated in about thirty lines.
+ *
+ * ## What closing does, and does not
+ *
+ * X, Escape and click-away all close, on the FIRST gesture, and none of them
+ * touches the active senior tool: the panel is a way of reaching a command, not
+ * a mode. Invoking a row closes it too — the PO's default is one tap and back
+ * to the canvas.
+ *
+ * ## Who opens it
+ *
+ * `ArtefactCatalogueProvider`. This widget registers itself as the DEFAULT
+ * implementation ({@link artefactCatalogueDefaultExtension}); a host with its
+ * own sidebar registers `ArtefactCatalogueExtension(service)`, whose
+ * `di.override` wins, and this panel is then never asked to open.
+ */
+export declare class EdgelessArtefactCatalogueWidget extends WidgetComponent<RootBlockModel> {
+    static styles: import("lit").CSSResult;
+    /** Which framework's catalogue is on screen, or `null` when it is away. */
+    private accessor _owner;
+    /** The owner the body was last scrolled to the top for. */
+    private _scrolledFor;
+    get catalogueOpen(): boolean;
+    /**
+     * Show `owner`'s catalogue. Called through `ArtefactCatalogueProvider`, never
+     * from another widget's DOM — the sub-menu that opens it lives in a different
+     * tree, and the seam is what keeps a host's own sidebar substitutable.
+     */
+    openFor(owner: CommandOwner): void;
+    /**
+     * Put the panel away. Deliberately writes NOTHING but its own state: the
+     * senior tool the user armed before opening the catalogue is still armed
+     * after, whichever gesture closed it.
+     */
+    readonly closePanel: () => void;
+    /** Keep a gesture inside the panel from reaching the canvas behind it. */
+    private readonly _swallow;
+    private readonly _onDocumentPointerDown;
+    /**
+     * Escape is listened for on the EDITOR HOST, not on `document`: a host
+     * application keeps its own global Escape, and with the catalogue open the
+     * key dismisses the catalogue rather than clearing the canvas selection
+     * behind it. Same scope and same reasoning as `EditorAnchoredPanel`.
+     */
+    private readonly _onHostKeydown;
+    /**
+     * A wheel OVER THE PANEL scrolls the panel, never the board.
+     *
+     * Same bug and same fix as the violation bubble (PR #103, PO 02/08):
+     * `EdgelessRootBlock` takes `wheel` off the event dispatcher on the editor
+     * host and `preventDefault()`s unconditionally before panning — so a wheel
+     * over the catalogue's overflowing list panned the canvas instead of
+     * scrolling the twenty artefacts under the pointer (PO recette, 27/08/2026).
+     * One CAPTURE-phase listener on the host stops the event before the
+     * dispatcher sees it; no `preventDefault`, because the default action IS the
+     * panel scrolling.
+     *
+     * Narrower than the bubble's freeze, deliberately: the bubble owns the wheel
+     * everywhere while open (a reading gesture); the catalogue only claims the
+     * wheel over its own box — `composedPath` gate — and the canvas to its right
+     * keeps panning, because furnishing a diagram means looking around it.
+     */
+    private readonly _onHostWheel;
+    /**
+     * Idempotent, and called from both `firstUpdated` and a later
+     * `connectedCallback`: `WithDisposable` throws the group away on disconnect
+     * while lit runs `firstUpdated` exactly once.
+     */
+    private _wire;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    /**
+     * On open: the panel takes the focus and the list starts at the top.
+     *
+     * The focus is what makes the panel reachable from a keyboard and audible to
+     * a screen reader — it carries the dialog's label, so the framework's name is
+     * read before the first artefact. `preventScroll` because the host is a
+     * zero-width box at the editor's origin and the browser would otherwise
+     * scroll the editor to "reveal" it.
+     *
+     * The scroll reset matters on the second open: a user who scrolled to the
+     * bottom of BPMN's twenty artefacts, closed, and opened the panel again for
+     * another framework would otherwise land mid-list with no idea what is above.
+     */
+    updated(): void;
+    /**
+     * The commands this panel draws: the owner's `'catalogue'` surface, minus the
+     * ones whose preconditions do not hold.
+     *
+     * Unavailable commands are DROPPED, not greyed out. A disabled row in a list
+     * of twenty is noise a reader has to step over on every pass, and the panel
+     * has no room to say why it is disabled; a command that comes back when the
+     * selection changes simply reappears.
+     */
+    private _commands;
+    /**
+     * The chord this command answers to on this platform, as the user would type
+     * it — or `null` for the many commands that ship keyless (and stay bindable).
+     *
+     * The host's override table is consulted, so a rebound command shows what it
+     * is actually bound to rather than what it shipped with, and a `'disabled'`
+     * entry shows nothing at all.
+     */
+    private _chord;
+    /**
+     * Run the command. The panel STAYS OPEN.
+     *
+     * `runCommand` is the one bottleneck (ADR 0008): the telemetry and the usage
+     * measure are emitted there, and `surface: 'catalogue'` is what makes this
+     * panel distinguishable from the sub-menu in the numbers.
+     *
+     * Staying open is the PO's call (recette, 27/08/2026), reversing the first
+     * default: a catalogue is where a user furnishes a diagram, and furnishing is
+     * several artefacts in a row — closing after each one turned that into
+     * open-click-reopen. The exits are unchanged and all one gesture: ×, Escape,
+     * or a click on the canvas.
+     */
+    private _invoke;
+    private _groupLabel;
+    private _renderEntry;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+export declare const edgelessArtefactCatalogueWidget: import("../../store/index.js").ExtensionType;