@formicoidea/labre-core 0.45.0 → 0.46.0

package/dist/_pkgs/affine-block-surface/extensions/selection-pane/commands.d.ts

@@ -1,19 +1,17 @@
 import type { AnyCommandDescriptor } from '../../../std/index.js';
 import { z } from 'zod';
 export declare const reorderElementParams: z.ZodObject<{
-    /** The element or gfx block to move. */
-    id: z.ZodString;
-    /**
-     * The model it lands directly ABOVE, stacked with it; `null` puts it at the
-     * bottom of its stack.
-     */
+    id: z.ZodOptional<z.ZodString>;
+    ids: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     above: z.ZodNullable<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    id: string;
     above: string | null;
+    id?: string | undefined;
+    ids?: string[] | undefined;
 }, {
-    id: string;
     above: string | null;
+    id?: string | undefined;
+    ids?: string[] | undefined;
 }>;
 export type ReorderElementParams = z.infer<typeof reorderElementParams>;
 export declare const lockElementsParams: z.ZodObject<{

package/dist/_pkgs/affine-block-surface/extensions/selection-pane/commands.js

@@ -1,7 +1,7 @@
 import { CanvasLocalVisibility, SelectionPaneProvider, TelemetryProvider, } from '../../../affine-shared/services/index.js';
 import { GfxControllerIdentifier } from '../../../std/gfx/index.js';
 import { z } from 'zod';
-import { renamePaneFrame, renamePaneGroup, reorderPaneElement, setPaneElementsHiddenForEveryone, setPaneElementsLocked, } from './actions.js';
+import { renamePaneFrame, renamePaneGroup, reorderPaneElements, setPaneElementsHiddenForEveryone, setPaneElementsLocked, } from './actions.js';
 import { setUserLayersHiddenForEveryone } from '../user-layers/actions.js';
 import { SelectionPaneModel } from './tree.js';
 /**
@@ -68,13 +68,20 @@ const toggleSelectionPane = {
         });
     },
 };
+/*
+ * "An `id` or a non-empty `ids`" is checked in `run`, not with a zod `refine`:
+ * a refined schema is a `ZodEffects`, which `describeCommandParams` cannot
+ * project, so the agent manifest would lose the whole parameter contract.
+ */
 export const reorderElementParams = z.object({
-    /** The element or gfx block to move. */
-    id: z.string().min(1),
-    /**
-     * The model it lands directly ABOVE, stacked with it; `null` puts it at the
-     * bottom of its stack.
-     */
+    // The element or gfx block to move.
+    id: z.string().min(1).optional(),
+    // Several models of ONE stack, moved as a block in their current relative
+    // order (the selection pane's multi-row drag, ADR 0034). Added beside `id`,
+    // which stays: a caller passing `id` alone is unchanged.
+    ids: z.array(z.string().min(1)).optional(),
+    // The model they land directly ABOVE, stacked with them; `null` puts them
+    // at the bottom of their stack.
     above: z.string().min(1).nullable(),
 });
 const reorderElement = {
@@ -97,7 +104,13 @@ const reorderElement = {
             console.error('canvas.element.reorder: invalid params', parsed.error);
             return;
         }
-        reorderPaneElement(std, parsed.data.id, parsed.data.above);
+        const { id, ids = [], above } = parsed.data;
+        const moving = id === undefined ? ids : [id, ...ids];
+        if (!moving.length) {
+            console.error('canvas.element.reorder: needs an id or ids');
+            return;
+        }
+        reorderPaneElements(std, moving, above);
     },
 };
 export const lockElementsParams = z.object({

package/dist/_pkgs/affine-block-surface/extensions/selection-pane/index.d.ts

@@ -1,3 +1,3 @@
-export { filterSelectionPaneTree, renamePaneFrame, renamePaneGroup, reorderPaneElement, type SelectionPaneFilterTarget, selectionPaneFilterMembers, selectionPaneFilterTargets, setPaneElementsHiddenForEveryone, setPaneElementsLocked, } from './actions.js';
+export { filterSelectionPaneTree, renamePaneFrame, renamePaneGroup, reorderPaneElement, reorderPaneElements, type SelectionPaneFilterTarget, selectionPaneFilterMembers, selectionPaneFilterTargets, setPaneElementsHiddenForEveryone, setPaneElementsLocked, } from './actions.js';
 export { type HideForEveryoneParams, hideForEveryoneParams, type HideLocalParams, hideLocalParams, type LockElementsParams, lockElementsParams, type RenameGroupParams, renameGroupParams, type ReorderElementParams, reorderElementParams, selectionPaneCommands, } from './commands.js';
 export { buildSelectionPaneTree, DEFAULT_LAYER_ID, paneContainerOf, paneLayersOf, type SelectionPaneLayers, type SelectionPaneNode, SelectionPaneModel, selectionPaneTree, } from './tree.js';

package/dist/_pkgs/affine-block-surface/extensions/selection-pane/index.js

@@ -1,3 +1,3 @@
-export { filterSelectionPaneTree, renamePaneFrame, renamePaneGroup, reorderPaneElement, selectionPaneFilterMembers, selectionPaneFilterTargets, setPaneElementsHiddenForEveryone, setPaneElementsLocked, } from './actions.js';
+export { filterSelectionPaneTree, renamePaneFrame, renamePaneGroup, reorderPaneElement, reorderPaneElements, selectionPaneFilterMembers, selectionPaneFilterTargets, setPaneElementsHiddenForEveryone, setPaneElementsLocked, } from './actions.js';
 export { hideForEveryoneParams, hideLocalParams, lockElementsParams, renameGroupParams, reorderElementParams, selectionPaneCommands, } from './commands.js';
 export { buildSelectionPaneTree, DEFAULT_LAYER_ID, paneContainerOf, paneLayersOf, SelectionPaneModel, selectionPaneTree, } from './tree.js';

package/dist/_pkgs/affine-components/portal/portal.d.ts

@@ -17,7 +17,7 @@ import { LitElement, type TemplateResult } from 'lit';
  */
 export declare class Portal extends LitElement {
     private _portalRoot;
-    createRenderRoot(): HTMLDivElement | ShadowRoot;
+    createRenderRoot(): ShadowRoot | HTMLDivElement;
     disconnectedCallback(): void;
     render(): TemplateResult | undefined;
     accessor container: HTMLElement;

package/dist/_pkgs/affine-foundation/view.d.ts

@@ -23,13 +23,13 @@ declare const optionsSchema: z.ZodObject<{
         style: z.ZodString;
     }, "strip", z.ZodTypeAny, {
         style: string;
-        font: string;
         url: string;
+        font: string;
         weight: string;
     }, {
         style: string;
-        font: string;
         url: string;
+        font: string;
         weight: string;
     }>, "many">>;
     telemetry: z.ZodOptional<z.ZodType<TelemetryService, z.ZodTypeDef, TelemetryService>>;
@@ -42,8 +42,8 @@ declare const optionsSchema: z.ZodObject<{
     } | undefined;
     fontConfig?: {
         style: string;
-        font: string;
         url: string;
+        font: string;
         weight: string;
     }[] | undefined;
     telemetry?: TelemetryService | undefined;
@@ -56,8 +56,8 @@ declare const optionsSchema: z.ZodObject<{
     } | undefined;
     fontConfig?: {
         style: string;
-        font: string;
         url: string;
+        font: string;
         weight: string;
     }[] | undefined;
     telemetry?: TelemetryService | undefined;
@@ -87,13 +87,13 @@ export declare class FoundationViewExtension extends ViewExtensionProvider<Found
             style: z.ZodString;
         }, "strip", z.ZodTypeAny, {
             style: string;
-            font: string;
             url: string;
+            font: string;
             weight: string;
         }, {
             style: string;
-            font: string;
             url: string;
+            font: string;
             weight: string;
         }>, "many">>;
         telemetry: z.ZodOptional<z.ZodType<TelemetryService, z.ZodTypeDef, TelemetryService>>;
@@ -106,8 +106,8 @@ export declare class FoundationViewExtension extends ViewExtensionProvider<Found
         } | undefined;
         fontConfig?: {
             style: string;
-            font: string;
             url: string;
+            font: string;
             weight: string;
         }[] | undefined;
         telemetry?: TelemetryService | undefined;
@@ -120,8 +120,8 @@ export declare class FoundationViewExtension extends ViewExtensionProvider<Found
         } | undefined;
         fontConfig?: {
             style: string;
-            font: string;
             url: string;
+            font: string;
             weight: string;
         }[] | undefined;
         telemetry?: TelemetryService | undefined;

package/dist/_pkgs/affine-fragment-frame-panel/body/frame-panel-body.d.ts

@@ -11,8 +11,15 @@ export declare class FramePanelBody extends FramePanelBody_base {
      */
     private readonly _clickBlank;
     private _docDisposables;
-    private _frameElementHeight;
     private _frameItems;
+    /** The side panels' one reorder gesture (ADR 0034), made on connect. */
+    private _reorder;
+    /** The card a press landed on: what a pick-up picks up. */
+    private _pressed;
+    /** The dragged cards' copies following the pointer, top one last. */
+    private _ghosts;
+    /** The list's `gap`, read once at the pick-up: the drop line sits in it. */
+    private _listGap;
     private _indicatorTranslateY;
     private _lastEdgelessRootId;
     private get _gfx();
@@ -20,10 +27,36 @@ export declare class FramePanelBody extends FramePanelBody_base {
     private readonly _updateFrameItems;
     get frames(): FrameBlockModel[];
     get viewportPadding(): [number, number, number, number];
+    private _createReorderDrag;
+    /** The cards on screen, in presentation order. */
+    private _cards;
+    /** A press on a card: the controller decides whether it becomes a drag. */
     private _drag;
+    /**
+     * The press became a drag. The pressed card is selected if it was not
+     * (shift adds it to the selection), and every selected card moves: their
+     * copies — the last two, the top one counting them — follow the pointer,
+     * and the cards themselves stay in place as placeholders.
+     */
+    private _pickUp;
+    /**
+     * A release at the gap `gap` puts the selected cards right before the first
+     * card at or after it that does not move, or at the end. The line sits in
+     * the middle of the list's gap: above the card under the gap, or under the
+     * last card — the frame panel's own drag used to draw that last one at 0.
+     */
+    private _dropAt;
     private _fitToElement;
     private _renderEmptyContent;
     private _renderFrameList;
+    /**
+     * Move the selected cards, as one block, right before the frame `before`
+     * (`null` = at the end; `_dropAt` picks it). The write is
+     * `canvas.frame.reorder` (ADR 0034): the read-only refusal, the no-op check
+     * and the one undo step live in its action, run through the imported
+     * descriptor so the panel reorders in page mode too, where the command is
+     * not registered.
+     */
     private _reorderFrames;
     private _setDocDisposables;
     private _updateFrames;
@@ -34,7 +67,6 @@ export declare class FramePanelBody extends FramePanelBody_base {
     updated(_changedProperties: PropertyValues): void;
     private accessor _dragging;
     private accessor _selected;
-    accessor domHost: Document | HTMLElement;
     accessor editorHost: EditorHost;
     accessor fitPadding: number[];
     accessor frameListContainer: HTMLElement;

package/dist/_pkgs/affine-fragment-frame-panel/body/frame-panel-body.js

@@ -32,20 +32,35 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { EdgelessFrameManager } from '../../affine-block-frame/index.js';
+import { EdgelessFrameManager, frameCommands } from '../../affine-block-frame/index.js';
 import { DocModeProvider, EditPropsStore, translateKey, } from '../../affine-shared/services/index.js';
+import { createPanelReorderDrag, } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
-import { ShadowlessElement } from '../../std/index.js';
-import { generateKeyBetweenV2, GfxControllerIdentifier } from '../../std/gfx/index.js';
+import { runCommand, ShadowlessElement, } from '../../std/index.js';
+import { GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { FrameCard, } from '../card/frame-card.js';
 import { FRAME_PANEL_EMPTY_PLACEHOLDER } from '../translations.js';
-import { startDragging } from '../utils/drag.js';
 const compare = EdgelessFrameManager.framePresentationComparator;
+/**
+ * How the panel invokes the registry: from the editor's chrome, on the cards
+ * it names, like the selection pane's rows.
+ */
+const PANEL_INVOCATION = {
+    surface: 'contextual-toolbar',
+    source: 'toolbar:general',
+};
+function reorderCommand() {
+    const command = frameCommands.find(c => c.id === 'canvas.frame.reorder');
+    if (!command)
+        throw new Error('frame panel: no canvas.frame.reorder');
+    return command;
+}
 const styles = css `
   .frame-list-container {
     display: flex;
@@ -89,6 +104,19 @@ const styles = css `
     width: 284px;
     left: 0;
   }
+
+  /*
+    The drag mask, created by the drag controller (createPanelReorderDrag):
+    over the whole viewport for the length of the drag, so its cursor — set
+    inline by the controller, "grabbing" or "not-allowed" — speaks wherever
+    the pointer is. The dragged cards are appended after it, so they paint
+    over it.
+  */
+  .frame-panel-drag-mask {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--affine-z-index-popover, 0) + 3);
+  }
 `;
 export const AFFINE_FRAME_PANEL_BODY = 'affine-frame-panel-body';
 let FramePanelBody = (() => {
@@ -99,9 +127,6 @@ let FramePanelBody = (() => {
     let __selected_decorators;
     let __selected_initializers = [];
     let __selected_extraInitializers = [];
-    let _domHost_decorators;
-    let _domHost_initializers = [];
-    let _domHost_extraInitializers = [];
     let _editorHost_decorators;
     let _editorHost_initializers = [];
     let _editorHost_extraInitializers = [];
@@ -119,14 +144,12 @@ let FramePanelBody = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             __dragging_decorators = [state()];
             __selected_decorators = [state()];
-            _domHost_decorators = [property({ attribute: false })];
             _editorHost_decorators = [property({ attribute: false })];
             _fitPadding_decorators = [property({ attribute: false })];
             _frameListContainer_decorators = [query('.frame-list-container')];
             _insertIndex_decorators = [property({ attribute: false })];
             __esDecorate(this, null, __dragging_decorators, { kind: "accessor", name: "_dragging", static: false, private: false, access: { has: obj => "_dragging" in obj, get: obj => obj._dragging, set: (obj, value) => { obj._dragging = value; } }, metadata: _metadata }, __dragging_initializers, __dragging_extraInitializers);
             __esDecorate(this, null, __selected_decorators, { kind: "accessor", name: "_selected", static: false, private: false, access: { has: obj => "_selected" in obj, get: obj => obj._selected, set: (obj, value) => { obj._selected = value; } }, metadata: _metadata }, __selected_initializers, __selected_extraInitializers);
-            __esDecorate(this, null, _domHost_decorators, { kind: "accessor", name: "domHost", static: false, private: false, access: { has: obj => "domHost" in obj, get: obj => obj.domHost, set: (obj, value) => { obj.domHost = value; } }, metadata: _metadata }, _domHost_initializers, _domHost_extraInitializers);
             __esDecorate(this, null, _editorHost_decorators, { kind: "accessor", name: "editorHost", static: false, private: false, access: { has: obj => "editorHost" in obj, get: obj => obj.editorHost, set: (obj, value) => { obj.editorHost = value; } }, metadata: _metadata }, _editorHost_initializers, _editorHost_extraInitializers);
             __esDecorate(this, null, _fitPadding_decorators, { kind: "accessor", name: "fitPadding", static: false, private: false, access: { has: obj => "fitPadding" in obj, get: obj => obj.fitPadding, set: (obj, value) => { obj.fitPadding = value; } }, metadata: _metadata }, _fitPadding_initializers, _fitPadding_extraInitializers);
             __esDecorate(this, null, _frameListContainer_decorators, { kind: "accessor", name: "frameListContainer", static: false, private: false, access: { has: obj => "frameListContainer" in obj, get: obj => obj.frameListContainer, set: (obj, value) => { obj.frameListContainer = value; } }, metadata: _metadata }, _frameListContainer_initializers, _frameListContainer_extraInitializers);
@@ -148,53 +171,129 @@ let FramePanelBody = (() => {
                 ? [0, 0, 0, 0].map((val, idx) => Number.isFinite(this.fitPadding[idx]) ? this.fitPadding[idx] : val)
                 : [0, 0, 0, 0];
         }
-        _drag(e) {
-            if (!this._selected.length)
-                return;
-            this._dragging = true;
-            const framesMap = this._frameItems.reduce((map, frame) => {
-                map.set(frame.frame.id, {
-                    ...frame,
-                });
-                return map;
-            }, new Map());
-            const selected = this._selected.slice();
-            const draggedFramesInfo = selected.map(id => {
-                const frame = framesMap.get(id);
-                return {
-                    frame: frame.frame,
-                    element: this.renderRoot.querySelector(`[data-frame-id="${frame.frame.id}"]`),
-                    cardIndex: frame.cardIndex,
-                    frameIndex: frame.frameIndex,
-                };
-            });
-            const width = draggedFramesInfo[0].element.clientWidth;
-            this._frameElementHeight = draggedFramesInfo[0].element.offsetHeight;
-            startDragging(draggedFramesInfo, {
-                width,
-                container: this,
-                document: this.ownerDocument,
-                domHost: this.domHost ?? this.ownerDocument,
-                start: {
-                    x: e.detail.clientX,
-                    y: e.detail.clientY,
+        /* ── Drag to reorder ────────────────────────────────────────────────── */
+        /*
+         * The gesture is the side panels' one controller (`createPanelReorderDrag`,
+         * `@labre/affine-shared/utils`, ADR 0034), shared with the selection pane:
+         * pointer events, the 5px threshold, the read-only refusal, the mask and
+         * its cursor, Escape and `pointercancel` as cancels, the swallowed click.
+         * What is the panel's own is below: the selected cards move together, their
+         * copies follow the pointer, a line marks the gap, and the write is
+         * `canvas.frame.reorder`.
+         */
+        _createReorderDrag() {
+            return createPanelReorderDrag({
+                readonly: () => this.editorHost.store.readonly,
+                rows: () => this._cards(),
+                bounds: () => this,
+                onPickUp: press => this._pickUp(press),
+                dropAt: gap => this._dropAt(gap),
+                onMove: (drop, point) => {
+                    for (const ghost of this._ghosts) {
+                        ghost.pos = { x: point.clientX, y: point.clientY };
+                    }
+                    this._indicatorTranslateY = drop?.lineY ?? 0;
+                    this.insertIndex = drop?.gap;
+                    this.requestUpdate();
                 },
-                framePanelBody: this,
-                frameListContainer: this.frameListContainer,
-                frameElementHeight: this._frameElementHeight,
-                onDragEnd: insertIdx => {
+                onDrop: drop => this._reorderFrames(this._selected.slice(), drop.before),
+                onEnd: () => {
+                    this._ghosts.forEach(ghost => ghost.remove());
+                    this._ghosts = [];
+                    this._pressed = null;
                     this._dragging = false;
                     this.insertIndex = undefined;
-                    if (insertIdx === undefined || this._frameItems.length <= 1)
-                        return;
-                    this._reorderFrames(selected, framesMap, insertIdx);
+                    this._updateFrames();
                 },
-                onDragMove: (idx, indicatorTranslateY) => {
-                    this.insertIndex = idx;
-                    this._indicatorTranslateY = indicatorTranslateY ?? 0;
+                mask: {
+                    host: () => this,
+                    className: 'frame-panel-drag-mask',
+                    testId: 'frame-panel-drag-mask',
                 },
             });
         }
+        /** The cards on screen, in presentation order. */
+        _cards() {
+            const list = this.frameListContainer;
+            if (!list)
+                return [];
+            return Array.from(list.querySelectorAll(':scope > affine-frame-card'));
+        }
+        /** A press on a card: the controller decides whether it becomes a drag. */
+        _drag(e) {
+            const { event } = e.detail;
+            this._pressed = {
+                card: e.currentTarget,
+                shiftKey: event.shiftKey,
+            };
+            this._reorder?.press(event);
+        }
+        /**
+         * The press became a drag. The pressed card is selected if it was not
+         * (shift adds it to the selection), and every selected card moves: their
+         * copies — the last two, the top one counting them — follow the pointer,
+         * and the cards themselves stay in place as placeholders.
+         */
+        _pickUp(press) {
+            const card = this._pressed?.card;
+            if (!card?.frame)
+                return;
+            const id = card.frame.id;
+            if (!this._selected.includes(id)) {
+                this._selected = this._pressed?.shiftKey ? [...this._selected, id] : [id];
+                this._gfx.selection.set({ elements: this._selected, editing: false });
+            }
+            const list = this.frameListContainer;
+            this._listGap = list ? parseFloat(getComputedStyle(list).gap) || 0 : 0;
+            const items = new Map(this._frameItems.map(item => [item.frame.id, item]));
+            const dragged = this._selected.flatMap(selected => {
+                const item = items.get(selected);
+                return item ? [item] : [];
+            });
+            const width = this.renderRoot.querySelector(`[data-frame-id="${dragged[0]?.frame.id}"]`)?.clientWidth ?? card.clientWidth;
+            this._ghosts = dragged.slice(-2).map((item, idx, arr) => {
+                const ghost = new FrameCard();
+                ghost.frame = item.frame;
+                ghost.cardIndex = item.cardIndex;
+                ghost.frameIndex = item.frameIndex;
+                ghost.status = 'dragging';
+                ghost.stackOrder = arr.length - 1 - idx;
+                ghost.pos = { x: press.clientX, y: press.clientY };
+                ghost.width = width;
+                ghost.std = this.editorHost.std;
+                if (ghost.stackOrder === 0) {
+                    ghost.dataset.testid = 'frame-panel-drag-ghost';
+                    if (dragged.length > 1)
+                        ghost.draggingCardNumber = dragged.length;
+                }
+                return ghost;
+            });
+            this.renderRoot.append(...this._ghosts);
+            this._dragging = true;
+        }
+        /**
+         * A release at the gap `gap` puts the selected cards right before the first
+         * card at or after it that does not move, or at the end. The line sits in
+         * the middle of the list's gap: above the card under the gap, or under the
+         * last card — the frame panel's own drag used to draw that last one at 0.
+         */
+        _dropAt(gap) {
+            const cards = this._cards();
+            const last = cards[cards.length - 1];
+            if (!last)
+                return null;
+            const moving = new Set(this._selected);
+            const before = cards
+                .slice(gap)
+                .map(card => card.frame?.id)
+                .find(id => id !== undefined && !moving.has(id)) ?? null;
+            const half = this._listGap / 2;
+            const under = cards[gap];
+            const lineY = under
+                ? under.offsetTop - half
+                : last.offsetTop + last.offsetHeight + half;
+            return { gap, before, lineY };
+        }
         _fitToElement(e) {
             const { block } = e.detail;
             const bound = Bound.deserialize(block.xywh);
@@ -246,6 +345,7 @@ let FramePanelBody = (() => {
       ${this.insertIndex !== undefined
                 ? html `<div
             class="insert-indicator"
+            data-testid="frame-panel-drop-indicator"
             style=${`transform: translateY(${this._indicatorTranslateY}px)`}
           ></div>`
                 : nothing}
@@ -253,37 +353,41 @@ let FramePanelBody = (() => {
     </div>`;
             return frameList;
         }
-        _reorderFrames(selected, framesMap, insertIndex) {
-            if (insertIndex >= 0 && insertIndex <= this._frameItems.length) {
-                const frames = Array.from(framesMap.values()).map(frameItem => frameItem.frame);
-                const selectedFrames = selected
-                    .map(id => framesMap.get(id))
-                    .map(frameItem => frameItem.frame)
-                    .sort(compare);
-                // update selected frames index
-                // make the indexes larger than the frame before and smaller than the frame after
-                let before = frames[insertIndex - 1]?.props.presentationIndex || null;
-                const after = frames[insertIndex]?.props.presentationIndex || null;
-                selectedFrames.forEach(frame => {
-                    const newIndex = generateKeyBetweenV2(before, after);
-                    frame.store.updateBlock(frame, {
-                        presentationIndex: newIndex,
-                    });
-                    before = newIndex;
-                });
-                this.editorHost.store.captureSync();
-                this._updateFrames();
-            }
+        /**
+         * Move the selected cards, as one block, right before the frame `before`
+         * (`null` = at the end; `_dropAt` picks it). The write is
+         * `canvas.frame.reorder` (ADR 0034): the read-only refusal, the no-op check
+         * and the one undo step live in its action, run through the imported
+         * descriptor so the panel reorders in page mode too, where the command is
+         * not registered.
+         */
+        _reorderFrames(selected, before) {
+            if (!selected.length)
+                return;
+            runCommand(this.editorHost.std, reorderCommand(), PANEL_INVOCATION, {
+                ids: selected,
+                before,
+            });
+            this._updateFrames();
         }
         _setDocDisposables(doc) {
             this._clearDocDisposables();
             this._docDisposables = new DisposableGroup();
-            this._docDisposables.add(doc.slots.blockUpdated.subscribe(({ type, flavour }) => {
-                if (flavour === 'affine:frame' && type !== 'update') {
-                    requestAnimationFrame(() => {
-                        this._updateFrames();
-                    });
+            this._docDisposables.add(doc.slots.blockUpdated.subscribe(payload => {
+                if (payload.flavour !== 'affine:frame')
+                    return;
+                // A frame added or deleted changes the cards; of the updates, only a
+                // new presentation order does. The panel is not the order's only
+                // writer — an undo, a host's slide panel running
+                // `canvas.frame.reorder`, a remote peer — and it went stale on all
+                // three until reopened.
+                if (payload.type === 'update' &&
+                    payload.props.key !== 'presentationIndex') {
+                    return;
                 }
+                requestAnimationFrame(() => {
+                    this._updateFrames();
+                });
             }));
         }
         _updateFrames() {
@@ -316,10 +420,13 @@ let FramePanelBody = (() => {
         connectedCallback() {
             super.connectedCallback();
             this._updateFrameItems();
+            this._reorder = this._createReorderDrag();
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this._clearDocDisposables();
+            this._reorder?.dispose();
+            this._reorder = null;
         }
         firstUpdated() {
             const disposables = this.disposables;
@@ -354,9 +461,6 @@ let FramePanelBody = (() => {
         // Store the ids of the selected frames
         get _selected() { return this.#_selected_accessor_storage; }
         set _selected(value) { this.#_selected_accessor_storage = value; }
-        #domHost_accessor_storage;
-        get domHost() { return this.#domHost_accessor_storage; }
-        set domHost(value) { this.#domHost_accessor_storage = value; }
         #editorHost_accessor_storage;
         get editorHost() { return this.#editorHost_accessor_storage; }
         set editorHost(value) { this.#editorHost_accessor_storage = value; }
@@ -392,11 +496,21 @@ let FramePanelBody = (() => {
                 });
             };
             this._docDisposables = null;
-            this._frameElementHeight = 0;
             this._frameItems = [];
+            /** The side panels' one reorder gesture (ADR 0034), made on connect. */
+            this._reorder = null;
+            /** The card a press landed on: what a pick-up picks up. */
+            this._pressed = null;
+            /** The dragged cards' copies following the pointer, top one last. */
+            this._ghosts = [];
+            /** The list's `gap`, read once at the pick-up: the drop line sits in it. */
+            this._listGap = 0;
             this._indicatorTranslateY = 0;
             this._lastEdgelessRootId = '';
             this._selectFrame = (e) => {
+                // A drag ends with a click on the card it started on; that click is not one.
+                if (this._reorder?.consumeSwallowedClick())
+                    return;
                 const { selected, id, multiselect } = e.detail;
                 if (!selected) {
                     // de-select frame
@@ -422,8 +536,7 @@ let FramePanelBody = (() => {
             };
             this.#_dragging_accessor_storage = __runInitializers(this, __dragging_initializers, false);
             this.#_selected_accessor_storage = (__runInitializers(this, __dragging_extraInitializers), __runInitializers(this, __selected_initializers, []));
-            this.#domHost_accessor_storage = (__runInitializers(this, __selected_extraInitializers), __runInitializers(this, _domHost_initializers, void 0));
-            this.#editorHost_accessor_storage = (__runInitializers(this, _domHost_extraInitializers), __runInitializers(this, _editorHost_initializers, void 0));
+            this.#editorHost_accessor_storage = (__runInitializers(this, __selected_extraInitializers), __runInitializers(this, _editorHost_initializers, void 0));
             this.#fitPadding_accessor_storage = (__runInitializers(this, _editorHost_extraInitializers), __runInitializers(this, _fitPadding_initializers, void 0));
             this.#frameListContainer_accessor_storage = (__runInitializers(this, _fitPadding_extraInitializers), __runInitializers(this, _frameListContainer_initializers, void 0));
             this.#insertIndex_accessor_storage = (__runInitializers(this, _frameListContainer_extraInitializers), __runInitializers(this, _insertIndex_initializers, undefined));

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card.d.ts

@@ -11,11 +11,9 @@ export type SelectEvent = CustomEvent<{
     index: number;
     multiselect: boolean;
 }>;
+/** A press on a card's body, handed to the panel's drag controller. */
 export type DragEvent = CustomEvent<{
-    clientX: number;
-    clientY: number;
-    pageX: number;
-    pageY: number;
+    event: PointerEvent;
 }>;
 export type FitViewEvent = CustomEvent<{
     block: FrameBlockModel;
@@ -24,6 +22,11 @@ export declare const AFFINE_FRAME_CARD = "affine-frame-card";
 declare const FrameCard_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class FrameCard extends FrameCard_base {
     static styles: import("lit").CSSResult;
+    /**
+     * Hand the press to the panel body: the threshold, the selection and the
+     * drag itself belong to the side panels' one controller, which the body
+     * holds (`createPanelReorderDrag`, ADR 0034).
+     */
     private _dispatchDragEvent;
     private _dispatchFitViewEvent;
     private _dispatchSelectEvent;