@formicoidea/labre-core 0.43.1 → 0.46.0

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;

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

@@ -32,7 +32,6 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { on, once } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement } from '../../std/index.js';
 import { css, html, nothing } from 'lit';
@@ -168,33 +167,19 @@ let FrameCard = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = styles; }
+        /**
+         * 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).
+         */
         _dispatchDragEvent(e) {
             e.preventDefault();
             if (e.button !== 0)
                 return;
-            const { clientX: startX, clientY: startY } = e;
-            const disposeDragStart = on(this.ownerDocument, 'mousemove', e => {
-                if (Math.abs(startX - e.clientX) < 5 &&
-                    Math.abs(startY - e.clientY) < 5) {
-                    return;
-                }
-                if (this.status !== 'selected') {
-                    this._dispatchSelectEvent(e);
-                }
-                const event = new CustomEvent('drag', {
-                    detail: {
-                        clientX: e.clientX,
-                        clientY: e.clientY,
-                        pageX: e.pageX,
-                        pageY: e.pageY,
-                    },
-                });
-                this.dispatchEvent(event);
-                disposeDragStart();
-            });
-            once(this.ownerDocument, 'mouseup', () => {
-                disposeDragStart();
+            const event = new CustomEvent('drag', {
+                detail: { event: e },
             });
+            this.dispatchEvent(event);
         }
         _dispatchFitViewEvent(e) {
             e.stopPropagation();
@@ -248,7 +233,7 @@ let FrameCard = (() => {
         class="frame-card-body"
         @click=${this._dispatchSelectEvent}
         @dblclick=${this._dispatchFitViewEvent}
-        @mousedown=${this._dispatchDragEvent}
+        @pointerdown=${this._dispatchDragEvent}
       >
         ${this.status === 'dragging' && stackOrder !== 0
                 ? nothing

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

@@ -3,7 +3,7 @@ import { LitElement, type PropertyValues } from 'lit';
 export declare const AFFINE_FRAME_PANEL_HEADER = "affine-frame-panel-header";
 declare const FramePanelHeader_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class FramePanelHeader extends FramePanelHeader_base {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     private readonly _clearEdgelessDisposables;
     private _edgelessDisposables;
     private get _gfx();

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

@@ -35,6 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { PresentTool } from '../../affine-block-frame/index.js';
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
 import { DocModeProvider, EditPropsStore, translateKey, } from '../../affine-shared/services/index.js';
+import { panelHeaderStyles } from '../../affine-shared/styles/index.js';
 import { createButtonPopper } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
@@ -50,16 +51,6 @@ const styles = css `
     justify-content: start;
   }
 
-  .frame-panel-header {
-    display: flex;
-    width: 100%;
-    height: 36px;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: 0 8px;
-  }
-
   .all-frames-setting {
     display: flex;
     align-items: center;
@@ -69,22 +60,9 @@ const styles = css `
     margin: 8px 4px;
   }
 
-  .all-frames-setting-button svg {
-    color: var(--affine-icon-secondary);
-  }
-
-  .all-frames-setting-button:hover svg,
-  .all-frames-setting-button.active svg {
-    color: var(--affine-icon-color);
-  }
-
   .all-frames-setting-label {
     width: 68px;
     height: 22px;
-    font-size: var(--affine-font-sm);
-    font-weight: 500;
-    line-height: 22px;
-    color: var(--light-text-color-text-secondary-color, #8e8d91);
   }
 
   .frames-setting-container {
@@ -158,7 +136,9 @@ let FramePanelHeader = (() => {
             __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);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static { this.styles = styles; }
+        // The header row, title and icon button are every side panel's: they live in
+        // panelHeaderStyles so the selection pane and the catalogue draw the same.
+        static { this.styles = [panelHeaderStyles, styles]; }
         get _gfx() {
             return this.editorHost.std.get(GfxControllerIdentifier);
         }
@@ -194,13 +174,14 @@ let FramePanelHeader = (() => {
         }
         render() {
             const { std } = this.editorHost;
-            return html `<div class="frame-panel-header">
+            return html `<div class="frame-panel-header affine-panel-header">
       <div class="all-frames-setting">
-        <span class="all-frames-setting-label"
+        <span class="all-frames-setting-label affine-panel-header-title"
           >${translateKey(std, ...FRAME_PANEL_ALL_FRAMES_LABEL)}</span
         >
         <edgeless-tool-icon-button
-          class="all-frames-setting-button ${this._settingPopperShow
+          class="all-frames-setting-button affine-panel-header-button ${this
+                ._settingPopperShow
                 ? 'active'
                 : ''}"
           .tooltip=${this._settingPopperShow

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

@@ -1 +1,3 @@
+export * from './card/frame-preview.js';
 export * from './frame-panel.js';
+export * from './header/frame-panel-header.js';

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

@@ -1 +1,3 @@
+export * from './card/frame-preview.js';
 export * from './frame-panel.js';
+export * from './header/frame-panel-header.js';

package/dist/_pkgs/affine-gfx-connector/element-renderer/connector-dom/index.js

@@ -1,3 +1,4 @@
+import { textDecorationLine } from '../../../affine-gfx-text/index.js';
 import { ConnectorMode, DefaultTheme, } from '../../../affine-model/index.js';
 import { PointLocation, SVGPathBuilder } from '../../../global/gfx/index.js';
 import { isConnectorWithLabel } from '../../connector-manager.js';
@@ -207,7 +208,7 @@ function renderConnectorLabel(model, retained, renderer, zoom, slot) {
         return;
     }
     const [lx, ly, lw, lh] = content.xywh;
-    const { labelStyle: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, }, } = model;
+    const { labelStyle: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, textDecoration, }, } = model;
     const labelElement = getOrCreateLabelElement(retained, slot);
     labelElement.style.position = 'absolute';
     labelElement.style.left = `${lx * zoom}px`;
@@ -231,6 +232,7 @@ function renderConnectorLabel(model, retained, renderer, zoom, slot) {
     labelElement.style.fontStyle = fontStyle;
     labelElement.style.fontFamily = fontFamily;
     labelElement.style.textAlign = textAlign;
+    labelElement.style.textDecorationLine = textDecorationLine(textDecoration);
     labelElement.style.lineHeight = '1.2';
     labelElement.style.whiteSpace = 'pre-wrap';
     labelElement.style.wordWrap = 'break-word';

package/dist/_pkgs/affine-gfx-connector/element-renderer/index.js

@@ -1,5 +1,5 @@
 import { ElementRendererExtension, } from '../../affine-block-surface/index.js';
-import { getFontString, getLineHeight, getTextWidth, isRTL, wrapTextDeltas, } from '../../affine-gfx-text/index.js';
+import { alphabeticBaselineOffset, getFontString, getLineHeight, getTextWidth, isRTL, paintTextDecoration, wrapTextDeltas, } from '../../affine-gfx-text/index.js';
 import { ConnectorMode, DefaultTheme, } from '../../affine-model/index.js';
 import { getBezierParameters, } from '../../global/gfx/index.js';
 import { deltaInsertsToChunks } from '../../std/inline/index.js';
@@ -170,7 +170,7 @@ function renderEndpoint(model, location, ctx, rc, end, style, stroke) {
  * which pair of fields the function reached into.
  */
 function renderLabel(label, ctx, matrix, renderer) {
-    const { text, xywh, style: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign }, constraints: { hasMaxWidth, maxWidth }, } = label;
+    const { text, xywh, style: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, textDecoration, }, constraints: { hasMaxWidth, maxWidth }, } = label;
     const font = getFontString({
         fontStyle,
         fontWeight,
@@ -193,7 +193,8 @@ function renderLabel(label, ctx, matrix, renderer) {
     ctx.font = font;
     ctx.textAlign = textAlign;
     ctx.textBaseline = 'middle';
-    ctx.fillStyle = renderer.getColorValue(color, DefaultTheme.black, true);
+    const fill = renderer.getColorValue(color, DefaultTheme.black, true);
+    ctx.fillStyle = fill;
     let textMaxWidth = textAlign === 'center' ? 0 : getMaxTextWidth(lines, font);
     if (hasMaxWidth && maxWidth > 0) {
         textMaxWidth = Math.min(textMaxWidth, textMaxWidth);
@@ -219,7 +220,23 @@ function renderLabel(label, ctx, matrix, renderer) {
                         : rtl
                             ? 0.5
                             : -0.5);
-            ctx.fillText(str, x + cx, index * lineHeight - textHeight + cy);
+            const lineY = index * lineHeight - textHeight + cy;
+            ctx.fillText(str, x + cx, lineY);
+            if (textDecoration) {
+                // Painted on the `middle` baseline; the line hangs off the alphabetic
+                // one, measured below it.
+                paintTextDecoration(ctx, {
+                    decoration: textDecoration,
+                    lineText: str,
+                    font,
+                    x: x + cx,
+                    baselineY: lineY + alphabeticBaselineOffset(font, 'middle'),
+                    fontFamily,
+                    fontSize,
+                    fontWeight,
+                    color: fill,
+                });
+            }
             if (shouldTemporarilyAttach) {
                 ctx.canvas.remove();
             }