@formicoidea/labre-core 0.45.0 → 0.46.0

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

@@ -24,8 +24,9 @@ export declare const EDGELESS_SELECTION_PANE_WIDGET = "edgeless-selection-pane-w
  * (shift / ctrl / cmd adds or removes it, like on the canvas), the padlock
  * locks that row alone, a double-click renames a group or a frame (a frame is
  * a row at its place in the stack, ADR 0031 amendments), and a drag moves a row
- * among its siblings. Every write goes through `runCommand`, so the read-only
- * refusal and the undo step live in one place.
+ * — or, pressed on a selected row, the whole selection of one stack — among
+ * its siblings (the side panels' one drag, ADR 0034). Every write goes through
+ * `runCommand`, so the read-only refusal and the undo step live in one place.
  */
 export declare class EdgelessSelectionPaneWidget extends WidgetComponent<RootBlockModel> {
     static styles: import("lit").CSSResult;
@@ -36,19 +37,22 @@ export declare class EdgelessSelectionPaneWidget extends WidgetComponent<RootBlo
     private accessor _filter;
     /** The group row being renamed, or `null`. */
     private accessor _renaming;
-    /** Where the dragged row would land. */
+    /** Where the dragged rows would land; `null` while refused. */
     private accessor _drop;
     /** Where the dragged row's ghost is drawn, in the panel's own box. */
     private accessor _ghost;
     /** Bumped when the canvas selection changes, so the rows repaint. */
     private accessor _selectionRevision;
-    private _drag;
+    /** The drag under way, from its pick-up to its end. */
+    private accessor _drag;
+    /** The last row pressed: what a pick-up picks up. */
+    private _pressed;
+    /** The side panels' one reorder gesture, wired in `_wire()`. */
+    private _reorder;
     /** The rows of the last render, top first: what a drag hit-tests. */
     private _visibleRows;
     /** The sibling lists before the filter: what a drop is computed in. */
     private _lists;
-    /** A drag ends with a click on the row it started on; that click is not one. */
-    private _swallowNextClick;
     get paneOpen(): boolean;
     private get _gfx();
     private _setOpen;
@@ -109,7 +113,21 @@ export declare class EdgelessSelectionPaneWidget extends WidgetComponent<RootBlo
     private _onRowContextMenu;
     private _commitRename;
     private readonly _onRenameKeydown;
+    private _createReorderDrag;
+    private _panel;
+    private _paneBody;
+    /** The rows on screen, top first, with the rows they draw. */
+    private _shownRows;
     private _onRowPointerDown;
+    /**
+     * The press became a drag. A canvas row picked up is selected, as the frame
+     * panel selects a card — unless it already is, and then the whole selection
+     * moves with it, as in the frame panel: every selected row the pane lists.
+     * Rows that are not all in the pressed row's stack and list have no one
+     * place to land, so every drop of theirs is refused, honestly, with a
+     * `not-allowed` cursor rather than a line that would write nothing.
+     */
+    private _pickUp;
     /**
      * Which model stands for a row in the dragged row's own stack — the stack
      * `canvas.element.reorder` restacks it in, the models sharing its raw
@@ -119,20 +137,18 @@ export declare class EdgelessSelectionPaneWidget extends WidgetComponent<RootBlo
      * mindmap node moves with its mindmap).
      */
     private _stackOf;
-    /** Where a release at `(clientX, clientY)` would land the dragged row. */
+    /**
+     * Where a release over the gap `gap` (the controller's count of rows whose
+     * middle is above the pointer, at `clientY`) would land the dragged rows,
+     * or `null` to refuse it.
+     */
     private _dropAt;
-    private _moveGhost;
-    private readonly _onDocumentPointerMove;
-    /** A canvas row picked up is selected, as the frame panel selects a card. */
-    private _pickUp;
-    private readonly _onDocumentPointerUp;
     /**
      * One write per gesture, through the command: `layer` for a drop into a
-     * layer, one `index` for a slot. The command writes nothing when the slot
-     * is where the row already is, and a refused drop never reaches it.
+     * layer, one restack for a slot. The command writes nothing when the slot
+     * is where the rows already are, and a refused drop never reaches it.
      */
     private _commitDrop;
-    private _endDrag;
     private _renderGhost;
     private _renderDropIndicator;
     private _filterName;

package/dist/_pkgs/affine-widget-edgeless-toolbar/selection-pane/selection-pane-widget.js

@@ -36,7 +36,8 @@ import { CanvasActiveLayer, EDITOR_ANCHORED_PANEL_Z_INDEX, filterSelectionPaneTr
 import { menu, popMenu, popupTargetFromElement, } from '../../affine-components/context-menu/index.js';
 import { FrameBlockModel, MindmapElementModel, } from '../../affine-model/index.js';
 import { TOOLBAR_LOCK, TOOLBAR_RENAME, translateKey, } from '../../affine-shared/services/index.js';
-import { panelDragStarted, panelHeaderStyles, } from '../../affine-shared/styles/index.js';
+import { panelHeaderStyles } from '../../affine-shared/styles/index.js';
+import { createPanelReorderDrag, } from '../../affine-shared/utils/index.js';
 import { runCommand, WidgetComponent, WidgetViewExtension, } from '../../std/index.js';
 import { DEFAULT_LAYER_ID, GfxBlockElementModel, GfxControllerIdentifier, } from '../../std/gfx/index.js';
 import { ArrowDownSmallIcon, ArrowRightSmallIcon, CloseIcon, DeleteIcon, FilterIcon, InvisibleIcon, LayerIcon, LockIcon, MoreHorizontalIcon, PlusIcon, UnlockIcon, ViewIcon, } from '@blocksuite/icons/lit';
@@ -100,8 +101,9 @@ function rawGroupOf(model) {
  * (shift / ctrl / cmd adds or removes it, like on the canvas), the padlock
  * locks that row alone, a double-click renames a group or a frame (a frame is
  * a row at its place in the stack, ADR 0031 amendments), and a drag moves a row
- * among its siblings. Every write goes through `runCommand`, so the read-only
- * refusal and the undo step live in one place.
+ * — or, pressed on a selected row, the whole selection of one stack — among
+ * its siblings (the side panels' one drag, ADR 0034). Every write goes through
+ * `runCommand`, so the read-only refusal and the undo step live in one place.
  */
 let EdgelessSelectionPaneWidget = (() => {
     let _classSuper = WidgetComponent;
@@ -126,6 +128,9 @@ let EdgelessSelectionPaneWidget = (() => {
     let __selectionRevision_decorators;
     let __selectionRevision_initializers = [];
     let __selectionRevision_extraInitializers = [];
+    let __drag_decorators;
+    let __drag_initializers = [];
+    let __drag_extraInitializers = [];
     return class EdgelessSelectionPaneWidget extends _classSuper {
         constructor() {
             super(...arguments);
@@ -136,13 +141,15 @@ let EdgelessSelectionPaneWidget = (() => {
             this.#_drop_accessor_storage = (__runInitializers(this, __renaming_extraInitializers), __runInitializers(this, __drop_initializers, null));
             this.#_ghost_accessor_storage = (__runInitializers(this, __drop_extraInitializers), __runInitializers(this, __ghost_initializers, null));
             this.#_selectionRevision_accessor_storage = (__runInitializers(this, __ghost_extraInitializers), __runInitializers(this, __selectionRevision_initializers, 0));
-            this._drag = (__runInitializers(this, __selectionRevision_extraInitializers), null);
+            this.#_drag_accessor_storage = (__runInitializers(this, __selectionRevision_extraInitializers), __runInitializers(this, __drag_initializers, null));
+            /** The last row pressed: what a pick-up picks up. */
+            this._pressed = (__runInitializers(this, __drag_extraInitializers), null);
+            /** The side panels' one reorder gesture, wired in `_wire()`. */
+            this._reorder = null;
             /** The rows of the last render, top first: what a drag hit-tests. */
             this._visibleRows = [];
             /** The sibling lists before the filter: what a drop is computed in. */
             this._lists = paneLists([]);
-            /** A drag ends with a click on the row it started on; that click is not one. */
-            this._swallowNextClick = false;
             /** Put the pane away. Writes nothing but its own state. */
             this.closePanel = () => {
                 this._setOpen(false);
@@ -158,9 +165,8 @@ let EdgelessSelectionPaneWidget = (() => {
                 if (this._renaming)
                     return;
                 event.stopPropagation();
-                // The frame panel's drag has no cancel: Escape waits for the release.
-                if (this._drag?.dragging)
-                    return;
+                // Escape during a drag never gets here: the drag controller cancels the
+                // drag and stops it in the capture phase, so the pane stays open.
                 this.closePanel();
             };
             /** Same capture as the catalogue: a wheel over the pane scrolls the pane. */
@@ -186,33 +192,6 @@ let EdgelessSelectionPaneWidget = (() => {
                     this._renaming = null;
                 }
             };
-            this._onDocumentPointerMove = (event) => {
-                const drag = this._drag;
-                if (!drag)
-                    return;
-                if (!drag.dragging) {
-                    if (!panelDragStarted(drag, { x: event.clientX, y: event.clientY })) {
-                        return;
-                    }
-                    drag.dragging = true;
-                    this._pickUp(drag);
-                }
-                this._moveGhost(event);
-                this._drop = this._dropAt(event.clientX, event.clientY);
-            };
-            this._onDocumentPointerUp = (event) => {
-                const drag = this._drag;
-                if (drag?.dragging) {
-                    this._swallowNextClick = true;
-                    // A click only follows when the press and the release land on the same
-                    // row; otherwise nothing would ever clear the flag.
-                    setTimeout(() => (this._swallowNextClick = false), 0);
-                    const drop = this._dropAt(event.clientX, event.clientY);
-                    if (drop)
-                        this._commitDrop(drag, drop);
-                }
-                this._endDrag();
-            };
             this._openFilterMenu = (event) => {
                 const targets = selectionPaneFilterTargets(this.std);
                 popMenu(popupTargetFromElement(event.currentTarget), {
@@ -258,6 +237,7 @@ let EdgelessSelectionPaneWidget = (() => {
             __drop_decorators = [state()];
             __ghost_decorators = [state()];
             __selectionRevision_decorators = [state()];
+            __drag_decorators = [state()];
             __esDecorate(this, null, __open_decorators, { kind: "accessor", name: "_open", static: false, private: false, access: { has: obj => "_open" in obj, get: obj => obj._open, set: (obj, value) => { obj._open = value; } }, metadata: _metadata }, __open_initializers, __open_extraInitializers);
             __esDecorate(this, null, __collapsed_decorators, { kind: "accessor", name: "_collapsed", static: false, private: false, access: { has: obj => "_collapsed" in obj, get: obj => obj._collapsed, set: (obj, value) => { obj._collapsed = value; } }, metadata: _metadata }, __collapsed_initializers, __collapsed_extraInitializers);
             __esDecorate(this, null, __filter_decorators, { kind: "accessor", name: "_filter", static: false, private: false, access: { has: obj => "_filter" in obj, get: obj => obj._filter, set: (obj, value) => { obj._filter = value; } }, metadata: _metadata }, __filter_initializers, __filter_extraInitializers);
@@ -265,6 +245,7 @@ let EdgelessSelectionPaneWidget = (() => {
             __esDecorate(this, null, __drop_decorators, { kind: "accessor", name: "_drop", static: false, private: false, access: { has: obj => "_drop" in obj, get: obj => obj._drop, set: (obj, value) => { obj._drop = value; } }, metadata: _metadata }, __drop_initializers, __drop_extraInitializers);
             __esDecorate(this, null, __ghost_decorators, { kind: "accessor", name: "_ghost", static: false, private: false, access: { has: obj => "_ghost" in obj, get: obj => obj._ghost, set: (obj, value) => { obj._ghost = value; } }, metadata: _metadata }, __ghost_initializers, __ghost_extraInitializers);
             __esDecorate(this, null, __selectionRevision_decorators, { kind: "accessor", name: "_selectionRevision", static: false, private: false, access: { has: obj => "_selectionRevision" in obj, get: obj => obj._selectionRevision, set: (obj, value) => { obj._selectionRevision = value; } }, metadata: _metadata }, __selectionRevision_initializers, __selectionRevision_extraInitializers);
+            __esDecorate(this, null, __drag_decorators, { kind: "accessor", name: "_drag", static: false, private: false, access: { has: obj => "_drag" in obj, get: obj => obj._drag, set: (obj, value) => { obj._drag = value; } }, metadata: _metadata }, __drag_initializers, __drag_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = css `
@@ -372,8 +353,8 @@ let EdgelessSelectionPaneWidget = (() => {
       color: var(--affine-primary-color);
     }
 
-    /* The row being dragged stays in place, dimmed, like the frame panel's
-       placeholder card; its ghost follows the pointer. */
+    /* The rows being dragged stay in place, dimmed, like the frame panel's
+       placeholder cards; the pressed row's ghost follows the pointer. */
     .selection-pane-row[data-dragging] {
       opacity: 0.5;
     }
@@ -403,10 +384,10 @@ let EdgelessSelectionPaneWidget = (() => {
     }
 
     /*
-      The frame panel's drag mask: over the whole viewport for the length of
-      the drag, so the cursor says "grabbing" or "not-allowed" wherever the
-      pointer is (the panel's rule above hands it down) and the canvas under
-      it takes no hover.
+      The drag mask, created by the drag controller (createPanelReorderDrag):
+      over the whole viewport for the length of the drag, so the cursor —
+      set inline by the controller, "grabbing" or "not-allowed" — speaks
+      wherever the pointer is, and the canvas under it takes no hover.
     */
     .selection-pane-drag-mask {
       position: fixed;
@@ -439,6 +420,24 @@ let EdgelessSelectionPaneWidget = (() => {
       flex: initial;
     }
 
+    /* How many rows move with the ghost: the frame panel's card count. */
+    .selection-pane-drag-count {
+      flex: none;
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 20px;
+      height: 20px;
+      padding: 0 4px;
+      box-sizing: border-box;
+      border-radius: 10px;
+      background: var(--affine-black);
+      color: var(--affine-white);
+      font-size: 12px;
+      line-height: 20px;
+    }
+
     /* A row dragged onto a layer moves into it (ADR 0031 §5). */
     .selection-pane-row[data-drop='into'] {
       outline: 2px solid var(--affine-primary-color);
@@ -581,7 +580,7 @@ let EdgelessSelectionPaneWidget = (() => {
         get _renaming() { return this.#_renaming_accessor_storage; }
         set _renaming(value) { this.#_renaming_accessor_storage = value; }
         #_drop_accessor_storage;
-        /** Where the dragged row would land. */
+        /** Where the dragged rows would land; `null` while refused. */
         get _drop() { return this.#_drop_accessor_storage; }
         set _drop(value) { this.#_drop_accessor_storage = value; }
         #_ghost_accessor_storage;
@@ -592,6 +591,10 @@ let EdgelessSelectionPaneWidget = (() => {
         /** Bumped when the canvas selection changes, so the rows repaint. */
         get _selectionRevision() { return this.#_selectionRevision_accessor_storage; }
         set _selectionRevision(value) { this.#_selectionRevision_accessor_storage = value; }
+        #_drag_accessor_storage;
+        /** The drag under way, from its pick-up to its end. */
+        get _drag() { return this.#_drag_accessor_storage; }
+        set _drag(value) { this.#_drag_accessor_storage = value; }
         get paneOpen() {
             return this._open;
         }
@@ -619,11 +622,15 @@ let EdgelessSelectionPaneWidget = (() => {
             const subscription = this._gfx.selection.slots.updated.subscribe(() => {
                 this._selectionRevision++;
             });
+            const reorder = this._createReorderDrag();
+            this._reorder = reorder;
             this._disposables.add(() => {
                 host.removeEventListener('keydown', this._onHostKeydown, true);
                 host.removeEventListener('wheel', this._onHostWheel, true);
                 subscription.unsubscribe();
-                this._endDrag();
+                reorder.dispose();
+                if (this._reorder === reorder)
+                    this._reorder = null;
             });
         }
         connectedCallback() {
@@ -700,10 +707,9 @@ let EdgelessSelectionPaneWidget = (() => {
             this._collapsed = next;
         }
         _onRowClick(event, node) {
-            if (this._swallowNextClick) {
-                this._swallowNextClick = false;
+            // A drag ends with a click on the row it started on; that click is not one.
+            if (this._reorder?.consumeSwallowedClick())
                 return;
-            }
             // A layer row is not on the canvas: a click makes it the active layer,
             // where this viewer's new elements land (session only, never stored).
             if (node.kind === 'layer') {
@@ -832,31 +838,106 @@ let EdgelessSelectionPaneWidget = (() => {
         }
         /* ── Drag to reorder ────────────────────────────────────────────────── */
         /*
-         * The frame panel's model (`fragments/frame-panel`): a press becomes a drag
-         * past its threshold and picks the row up, selecting it; the row stays in
-         * place, dimmed; a copy of it at its own width follows the pointer; a mask
-         * over the viewport carries the cursor; a line marks the gap a release would
-         * land in, and a gap the row cannot go to shows no line and a `not-allowed`
-         * cursor. Escape does nothing until the release. A read-only document never
-         * starts one.
+         * The gesture is the side panels' one controller (`createPanelReorderDrag`,
+         * `@labre/affine-shared/utils`, ADR 0034), shared with the frame panel:
+         * threshold, read-only refusal, mask and cursor, Escape and `pointercancel`
+         * as cancels, the swallowed click. What is the pane's own is below: which
+         * rows move (the pressed row, or the whole selection of one stack), where a
+         * gap lands them in their stack, the ghost and the line, and the write.
          */
+        _createReorderDrag() {
+            return createPanelReorderDrag({
+                readonly: () => this.std.store.readonly,
+                rows: () => this._shownRows().map(({ element }) => element),
+                bounds: () => this._paneBody(),
+                onPickUp: () => this._pickUp(),
+                dropAt: (gap, point) => this._dropAt(gap, point.clientY),
+                onMove: (drop, point) => {
+                    this._drop = drop;
+                    const panel = this._panel();
+                    if (!panel)
+                        return;
+                    const box = panel.getBoundingClientRect();
+                    this._ghost = {
+                        x: point.clientX - box.left,
+                        y: point.clientY - box.top,
+                    };
+                },
+                onDrop: drop => this._commitDrop(drop),
+                onEnd: () => {
+                    this._drag = null;
+                    this._drop = null;
+                    this._ghost = null;
+                },
+                mask: {
+                    host: () => this._panel(),
+                    className: 'selection-pane-drag-mask',
+                    testId: 'selection-pane-drag-mask',
+                },
+                stateHost: () => this._panel(),
+            });
+        }
+        _panel() {
+            return (this.shadowRoot?.querySelector('[data-testid="selection-pane-panel"]') ?? null);
+        }
+        _paneBody() {
+            return (this.shadowRoot?.querySelector('[data-testid="selection-pane-body"]') ?? null);
+        }
+        /** The rows on screen, top first, with the rows they draw. */
+        _shownRows() {
+            const body = this._paneBody();
+            if (!body)
+                return [];
+            const byId = new Map(this._visibleRows.map(row => [row.node.id, row]));
+            return Array.from(body.querySelectorAll('[data-testid="selection-pane-row"], [data-testid="selection-pane-layer"]')).flatMap(element => {
+                const row = byId.get(element.dataset.id ?? '');
+                return row ? [{ element, row }] : [];
+            });
+        }
         _onRowPointerDown(event, row) {
-            if (event.button !== 0 || this.std.store.readonly)
-                return;
             const target = event.target;
             if (target.closest('button, input'))
                 return;
-            this._drag = {
-                id: row.node.id,
-                kind: row.node.kind,
-                parent: row.parent,
-                x: event.clientX,
-                y: event.clientY,
+            this._pressed = {
+                row,
                 width: event.currentTarget.getBoundingClientRect().width,
-                dragging: false,
             };
-            document.addEventListener('pointermove', this._onDocumentPointerMove, true);
-            document.addEventListener('pointerup', this._onDocumentPointerUp, true);
+            this._reorder?.press(event);
+        }
+        /**
+         * The press became a drag. A canvas row picked up is selected, as the frame
+         * panel selects a card — unless it already is, and then the whole selection
+         * moves with it, as in the frame panel: every selected row the pane lists.
+         * Rows that are not all in the pressed row's stack and list have no one
+         * place to land, so every drop of theirs is refused, honestly, with a
+         * `not-allowed` cursor rather than a line that would write nothing.
+         */
+        _pickUp() {
+            const pressed = this._pressed;
+            if (!pressed)
+                return;
+            const { node, parent } = pressed.row;
+            const drag = {
+                id: node.id,
+                kind: node.kind,
+                parent,
+                width: pressed.width,
+                moving: new Set([node.id]),
+                refused: false,
+            };
+            if (node.kind !== 'layer') {
+                const { selection } = this._gfx;
+                if (selection.selectedIds.includes(node.id)) {
+                    const listed = selection.selectedIds.filter(id => this._lists.parentOf.has(id));
+                    drag.moving = new Set([node.id, ...listed]);
+                    const stackOf = this._stackOf(drag);
+                    drag.refused = [...drag.moving].some(id => this._lists.parentOf.get(id) !== parent || stackOf?.(id) !== id);
+                }
+                else {
+                    selection.set({ elements: [node.id], editing: false });
+                }
+            }
+            this._drag = drag;
         }
         /**
          * Which model stands for a row in the dragged row's own stack — the stack
@@ -887,24 +968,16 @@ let EdgelessSelectionPaneWidget = (() => {
                 return undefined;
             };
         }
-        /** Where a release at `(clientX, clientY)` would land the dragged row. */
-        _dropAt(clientX, clientY) {
+        /**
+         * Where a release over the gap `gap` (the controller's count of rows whose
+         * middle is above the pointer, at `clientY`) would land the dragged rows,
+         * or `null` to refuse it.
+         */
+        _dropAt(gap, clientY) {
             const drag = this._drag;
-            const body = this.shadowRoot?.querySelector('[data-testid="selection-pane-body"]');
-            if (!drag || !body)
+            if (!drag || drag.refused)
                 return null;
-            const box = body.getBoundingClientRect();
-            if (clientX < box.left ||
-                clientX > box.right ||
-                clientY < box.top ||
-                clientY > box.bottom) {
-                return { kind: 'refused' };
-            }
-            const byId = new Map(this._visibleRows.map(row => [row.node.id, row]));
-            const shown = Array.from(body.querySelectorAll('[data-testid="selection-pane-row"], [data-testid="selection-pane-layer"]')).flatMap(element => {
-                const row = byId.get(element.dataset.id ?? '');
-                return row ? [{ element, row }] : [];
-            });
+            const shown = this._shownRows();
             // A canvas row over a layer's header moves INTO that layer (§5).
             if (drag.kind !== 'layer') {
                 const header = shown.find(({ element, row }) => {
@@ -916,23 +989,16 @@ let EdgelessSelectionPaneWidget = (() => {
                 if (header)
                     return { kind: 'into', id: header.row.node.id };
             }
-            // The gap: past the middle of a row is below it.
-            let gap = 0;
-            for (const { element } of shown) {
-                const rect = element.getBoundingClientRect();
-                if (clientY > rect.top + rect.height / 2)
-                    gap++;
-            }
             const stackOf = this._stackOf(drag);
             const slot = stackOf
                 ? paneSlotAtGap(shown.map(({ row }) => row), gap, drag.parent, this._lists)
                 : null;
             const list = slot ? this._lists.lists.get(slot.parent) : undefined;
             const landing = slot && list && stackOf
-                ? paneDropAbove(list, slot.index, drag.id, stackOf)
+                ? paneDropAbove(list, slot.index, drag.moving, stackOf)
                 : null;
             if (!slot || !landing)
-                return { kind: 'refused' };
+                return null;
             const under = shown[gap]?.element;
             const last = shown[shown.length - 1]?.element;
             const top = under
@@ -947,57 +1013,30 @@ let EdgelessSelectionPaneWidget = (() => {
                 left: 8 + slot.depth * INDENT_PX,
             };
         }
-        _moveGhost(event) {
-            const panel = this.shadowRoot?.querySelector('[data-testid="selection-pane-panel"]');
-            if (!panel)
-                return;
-            const box = panel.getBoundingClientRect();
-            this._ghost = { x: event.clientX - box.left, y: event.clientY - box.top };
-        }
-        /** A canvas row picked up is selected, as the frame panel selects a card. */
-        _pickUp(drag) {
-            if (drag.kind === 'layer')
-                return;
-            const { selection } = this._gfx;
-            if (selection.selectedIds.includes(drag.id))
-                return;
-            selection.set({ elements: [drag.id], editing: false });
-        }
         /**
          * One write per gesture, through the command: `layer` for a drop into a
-         * layer, one `index` for a slot. The command writes nothing when the slot
-         * is where the row already is, and a refused drop never reaches it.
+         * layer, one restack for a slot. The command writes nothing when the slot
+         * is where the rows already are, and a refused drop never reaches it.
          */
-        _commitDrop(drag, drop) {
-            if (drop.kind === 'refused')
+        _commitDrop(drop) {
+            const drag = this._drag;
+            if (!drag)
                 return;
+            const ids = [...drag.moving];
             if (drop.kind === 'into') {
-                this._run('canvas.layer.moveElements', {
-                    ids: [drag.id],
-                    layerId: drop.id,
-                });
+                this._run('canvas.layer.moveElements', { ids, layerId: drop.id });
                 return;
             }
             if (drag.kind === 'layer') {
                 this._run('canvas.layer.reorder', { id: drag.id, above: drop.above });
                 return;
             }
-            this._run('canvas.element.reorder', { id: drag.id, above: drop.above });
-        }
-        _endDrag() {
-            document.removeEventListener('pointermove', this._onDocumentPointerMove, true);
-            document.removeEventListener('pointerup', this._onDocumentPointerUp, true);
-            const wasDragging = this._drag?.dragging;
-            this._drag = null;
-            this._drop = null;
-            this._ghost = null;
-            if (wasDragging)
-                this.requestUpdate();
+            this._run('canvas.element.reorder', { ids, above: drop.above });
         }
         _renderGhost() {
             const drag = this._drag;
             const at = this._ghost;
-            if (!drag?.dragging || !at)
+            if (!drag || !at)
                 return nothing;
             const style = styleMap({
                 transform: `translate(${at.x - 16}px, ${at.y - 8}px)`,
@@ -1021,6 +1060,7 @@ let EdgelessSelectionPaneWidget = (() => {
             const type = model instanceof GfxBlockElementModel
                 ? model.flavour
                 : model.type;
+            const count = drag.moving.size;
             return html `<div
       class="selection-pane-drag-ghost"
       data-testid="selection-pane-drag-ghost"
@@ -1030,11 +1070,18 @@ let EdgelessSelectionPaneWidget = (() => {
       <span class="selection-pane-label"
         >${selectionPaneRowLabel(this.std, model)}</span
       >
+      ${count > 1
+                ? html `<span
+            class="selection-pane-drag-count"
+            data-testid="selection-pane-drag-count"
+            >${count}</span
+          >`
+                : nothing}
     </div>`;
         }
         _renderDropIndicator() {
             const drop = this._drop;
-            if (!this._drag?.dragging || drop?.kind !== 'slot')
+            if (!this._drag || drop?.kind !== 'slot')
                 return nothing;
             return html `<div
       class="selection-pane-drop-indicator"
@@ -1070,7 +1117,7 @@ let EdgelessSelectionPaneWidget = (() => {
             const drop = this._drop?.kind === 'into' && this._drop.id === node.id
                 ? 'into'
                 : undefined;
-            const dragging = this._drag?.dragging && this._drag.id === node.id;
+            const dragging = this._drag?.moving.has(node.id) ?? false;
             return html `<div
         class="selection-pane-row selection-pane-layer-row"
         role="treeitem"
@@ -1185,7 +1232,7 @@ let EdgelessSelectionPaneWidget = (() => {
             const drop = this._drop?.kind === 'into' && this._drop.id === node.id
                 ? 'into'
                 : undefined;
-            const dragging = this._drag?.dragging && this._drag.id === node.id;
+            const dragging = this._drag?.moving.has(node.id) ?? false;
             return html `<div
       class="selection-pane-row"
       role="treeitem"
@@ -1303,24 +1350,19 @@ let EdgelessSelectionPaneWidget = (() => {
             this._visibleRows = rows;
             this._lists = paneLists(full);
             const title = translateKey(this.std, ...SELECTION_PANE_TITLE);
-            const dragState = this._drag?.dragging
-                ? this._drop && this._drop.kind !== 'refused'
-                    ? 'valid'
-                    : 'invalid'
-                : undefined;
             // `pointermove` too: the editor turns every move over the host into a
             // cursor selection, and a selection with nothing recoverable in it makes
             // the range binding focus the host — which blurred a layer's rename field
             // the moment the pointer moved (a group's survived only because its click
             // had selected it). The pane's own drag listens on the document, in the
-            // capture phase, so it still sees every move.
+            // capture phase, so it still sees every move. Its `data-drag` and its
+            // mask are the drag controller's, set outside this template.
             return html `<div
       class="selection-pane-panel"
       role="dialog"
       tabindex="-1"
       aria-label=${title}
       data-testid="selection-pane-panel"
-      data-drag=${dragState ?? nothing}
       @pointerdown=${this._swallow}
       @pointerup=${this._swallow}
       @pointermove=${this._swallow}
@@ -1366,12 +1408,6 @@ let EdgelessSelectionPaneWidget = (() => {
             </div>`}
         ${this._renderDropIndicator()}
       </div>
-      ${this._drag?.dragging
-                ? html `<div
-            class="selection-pane-drag-mask"
-            data-testid="selection-pane-drag-mask"
-          ></div>`
-                : nothing}
       ${this._renderGhost()}
     </div>`;
         }

package/dist/_pkgs/std/scope/std-scope.d.ts

@@ -18,7 +18,7 @@ export interface BlockStdOptions {
     extensions: ExtensionType[];
 }
 export declare class BlockStdScope {
-    static internalExtensions: (typeof ViewStore | typeof UIEventDispatcher | typeof RangeManager | typeof CommandManager | typeof GridManager | typeof LayerManager | typeof ServiceManager | typeof ElementHighlightManager | typeof GfxSelectionManager | typeof SurfaceMiddlewareExtension | typeof ViewManager)[];
+    static internalExtensions: (typeof ViewStore | typeof UIEventDispatcher | typeof RangeManager | typeof CommandManager | typeof ElementHighlightManager | typeof GridManager | typeof GfxSelectionManager | typeof SurfaceMiddlewareExtension | typeof ViewManager | typeof LayerManager | typeof ServiceManager)[];
     readonly container: Container;
     readonly store: Store;
     readonly provider: ServiceProvider;

package/dist/commands.js

@@ -1,3 +1,4 @@
+import { frameCommands } from './_pkgs/affine-block-frame/index.js';
 import { copyLinkCommands, coreCommands, pivotCommands, readingCommands, tagCommands, } from './_pkgs/affine-block-root/index.js';
 import { auditCommands, canvasGridCommands, exportSvgCommands, mapQualityCommands, selectionPaneCommands, userLayerCommands, } from './_pkgs/affine-block-surface/index.js';
 import { edgeDirectionCommands } from './_pkgs/affine-gfx-connector/index.js';
@@ -55,6 +56,7 @@ export function getCommands(flags) {
         ...mapQualityCommands,
         ...exportSvgCommands,
         ...selectionPaneCommands,
+        ...frameCommands,
         ...canvasGridCommands,
         ...userLayerCommands,
         ...edgeDirectionCommands,