@formicoidea/labre-core 0.43.1 → 0.45.0

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

@@ -1,4 +1,4 @@
-import { EdgelessCRUDIdentifier, isNoteBlock, Overlay, } from '../affine-block-surface/index.js';
+import { applyCreationLayer, EdgelessCRUDIdentifier, isNoteBlock, Overlay, sourceLayerOf, } from '../affine-block-surface/index.js';
 import { ShapeFactory } from '../affine-gfx-shape/index.js';
 import { getShapeRadius, getShapeType, GroupElementModel, ShapeElementModel, } from '../affine-model/index.js';
 import { getChromeAccentColor } from '../affine-shared/services/index.js';
@@ -230,6 +230,9 @@ export function createEdgelessElement(edgeless, current, bound) {
             ...current.serialize(),
             text: new Y.Text(),
             xywh: bound.serialize(),
+            // `serialize()` names no layer for a default-layer shape: ask for the
+            // source's explicitly, or the clone lands in the active layer.
+            layer: sourceLayerOf(current),
         });
         if (!id)
             return null;
@@ -237,12 +240,16 @@ export function createEdgelessElement(edgeless, current, bound) {
     }
     else if (isNoteBlock(current)) {
         const { store } = edgeless;
-        id = store.addBlock('affine:note', {
+        const props = {
             background: current.props.background,
             displayMode: current.props.displayMode,
             edgeless: current.props.edgeless,
             xywh: bound.serialize(),
-        }, edgeless.model.id);
+            // Beside its source, not in the viewer's active layer (ADR 0031 §6).
+            layer: sourceLayerOf(current),
+        };
+        applyCreationLayer(edgeless.std, props);
+        id = store.addBlock('affine:note', props, edgeless.model.id);
         const note = store.getBlock(id)?.model;
         if (!note) {
             throw new BlockSuiteError(ErrorCode.GfxBlockElementError, 'Note block is not found after creation');

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

@@ -35,9 +35,11 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { EDITOR_ANCHORED_PANEL_Z_INDEX } from '../../affine-block-surface/index.js';
 import { TOUCH_TARGET_MIN_PX } from '../../affine-shared/consts/index.js';
 import { CATALOGUE_OTHER, translateKey } from '../../affine-shared/services/index.js';
+import { panelHeaderStyles } from '../../affine-shared/styles/index.js';
 import { IS_MAC } from '../../global/env/index.js';
 import { getCommandIcon, CommandUsageIdentifier, getCommandsForSurface, isCommandAvailable, normalizeLegacyCombo, rankCommandsByUsage, runCommand, ShortcutOverrideIdentifier, WidgetComponent, WidgetViewExtension, } from '../../std/index.js';
 import { GfxControllerIdentifier } from '../../std/gfx/index.js';
+import { CloseIcon } from '@blocksuite/icons/lit';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { state } from 'lit/decorators.js';
 import { literal, unsafeStatic } from 'lit/static-html.js';
@@ -218,49 +220,13 @@ let EdgelessArtefactCatalogueWidget = (() => {
       outline-offset: -2px;
     }
 
-    .artefact-catalogue-head {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      padding: 8px 8px 8px 16px;
-      border-bottom: 1px solid var(--affine-border-color);
-      font-weight: 600;
-    }
-
-    .artefact-catalogue-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
     /*
-      A close button a finger can hit. Square at the touch minimum rather than
-      the 6px-padded × the anchored panels use: this one is the only way out of
-      a full-height surface on a tablet, where there is no Escape key.
+      The header row, its title and its close button are the frame panel's,
+      shared with the selection pane through panelHeaderStyles. The close is
+      the frame panel's 20px icon button, no longer the touch-sized ×: one
+      header design across the side panels was the product owner's call.
     */
-    .artefact-catalogue-close {
-      flex: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: ${unsafeCSS(TOUCH_TARGET_MIN_PX)}px;
-      height: ${unsafeCSS(TOUCH_TARGET_MIN_PX)}px;
-      border: none;
-      border-radius: 8px;
-      background: transparent;
-      color: var(--affine-text-secondary-color);
-      font-family: inherit;
-      font-size: 20px;
-      line-height: 1;
-      cursor: pointer;
-    }
-
-    .artefact-catalogue-close:hover,
-    .artefact-catalogue-close:focus-visible {
-      background: var(--affine-hover-color);
-      color: var(--affine-text-primary-color);
-    }
+    ${panelHeaderStyles}
 
     .artefact-catalogue-body {
       flex: 1;
@@ -536,6 +502,7 @@ let EdgelessArtefactCatalogueWidget = (() => {
             // prose, and a host with a catalogue always wins.
             const frameworkLabel = translateKey(this.std, `com.labre.framework.${owner}`, humanizeCategory(owner));
             const catalogueTitle = translateKey(this.std, 'com.labre.catalogue.title', 'Artefacts');
+            const closeLabel = translateKey(this.std, 'com.labre.catalogue.close', 'Close');
             return html `<div
       class="artefact-catalogue-panel"
       role="dialog"
@@ -547,17 +514,26 @@ let EdgelessArtefactCatalogueWidget = (() => {
       @pointerup=${this._swallow}
       @click=${this._swallow}
     >
-      <div class="artefact-catalogue-head">
-        <span class="artefact-catalogue-title">${frameworkLabel}</span>
-        <button
-          class="artefact-catalogue-close"
-          type="button"
+      <div
+        class="artefact-catalogue-head affine-panel-header"
+        data-testid="artefact-catalogue-header"
+      >
+        <span
+          class="artefact-catalogue-title affine-panel-header-title"
+          data-testid="artefact-catalogue-title"
+          >${frameworkLabel}</span
+        >
+        <edgeless-tool-icon-button
+          class="artefact-catalogue-close affine-panel-header-button"
           data-testid="artefact-catalogue-close"
-          aria-label=${translateKey(this.std, 'com.labre.catalogue.close', 'Close')}
+          aria-label=${closeLabel}
+          .tooltip=${closeLabel}
+          .tipPosition=${'top'}
+          .activeMode=${'background'}
           @click=${this.closePanel}
         >
-          ×
-        </button>
+          ${CloseIcon({ width: '20px', height: '20px' })}
+        </edgeless-tool-icon-button>
       </div>
       <div
         class="artefact-catalogue-body"

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

@@ -6,6 +6,8 @@ import { EdgelessSlideMenu } from './menu/slide-menu.js';
 import { ToolbarArrowUpIcon } from './menu/toolbar-arrow-up-icon.js';
 import { EdgelessFontFamilyPanel } from './panel/font-family-panel.js';
 import { EdgelessFontWeightAndStylePanel } from './panel/font-weight-and-style-panel.js';
+import { EdgelessSelectionPaneToolButton } from './selection-pane/selection-pane-tool.js';
+import { EdgelessSelectionPaneWidget } from './selection-pane/selection-pane-widget.js';
 export declare function effects(): void;
 declare global {
     interface HTMLElementTagNameMap {
@@ -17,5 +19,7 @@ declare global {
         'edgeless-font-family-panel': EdgelessFontFamilyPanel;
         'edgeless-slide-menu': EdgelessSlideMenu;
         'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
+        'edgeless-selection-pane-widget': EdgelessSelectionPaneWidget;
+        'edgeless-selection-pane-tool-button': EdgelessSelectionPaneToolButton;
     }
 }

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

@@ -6,6 +6,8 @@ import { EdgelessSlideMenu } from './menu/slide-menu.js';
 import { ToolbarArrowUpIcon } from './menu/toolbar-arrow-up-icon.js';
 import { EdgelessFontFamilyPanel } from './panel/font-family-panel.js';
 import { EdgelessFontWeightAndStylePanel } from './panel/font-weight-and-style-panel.js';
+import { EdgelessSelectionPaneToolButton, SELECTION_PANE_TOOL_BUTTON, } from './selection-pane/selection-pane-tool.js';
+import { EDGELESS_SELECTION_PANE_WIDGET, EdgelessSelectionPaneWidget, } from './selection-pane/selection-pane-widget.js';
 export function effects() {
     customElements.define(EDGELESS_TOOLBAR_WIDGET, EdgelessToolbarWidget);
     customElements.define(EDGELESS_ARTEFACT_CATALOGUE_WIDGET, EdgelessArtefactCatalogueWidget);
@@ -15,4 +17,6 @@ export function effects() {
     customElements.define('edgeless-font-family-panel', EdgelessFontFamilyPanel);
     customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
     customElements.define('toolbar-arrow-up-icon', ToolbarArrowUpIcon);
+    customElements.define(EDGELESS_SELECTION_PANE_WIDGET, EdgelessSelectionPaneWidget);
+    customElements.define(SELECTION_PANE_TOOL_BUTTON, EdgelessSelectionPaneToolButton);
 }

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

@@ -12,3 +12,7 @@ export * from './menu/command-menu.js';
 export * from './menu/senior-menu-selection.js';
 export * from './mixins/index.js';
 export * from './placement/index.js';
+export * from './selection-pane/labels.js';
+export * from './selection-pane/selection-pane-default.js';
+export * from './selection-pane/selection-pane-tool.js';
+export * from './selection-pane/selection-pane-widget.js';

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

@@ -12,3 +12,7 @@ export * from './menu/command-menu.js';
 export * from './menu/senior-menu-selection.js';
 export * from './mixins/index.js';
 export * from './placement/index.js';
+export * from './selection-pane/labels.js';
+export * from './selection-pane/selection-pane-default.js';
+export * from './selection-pane/selection-pane-tool.js';
+export * from './selection-pane/selection-pane-widget.js';

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

@@ -0,0 +1,61 @@
+import type { SelectionPaneNode } from '../../affine-block-surface/index.js';
+/**
+ * Where a row dragged in the selection pane lands — the pure half of the
+ * pane's drag, kept apart from the DOM so the rule reads in one place.
+ *
+ * The pane shows a FLAT list of rows, and a gap between two of them can mean
+ * several places at once: the gap under a group's last member is also the gap
+ * after the group. A drag only ever moves a row inside its own sibling list
+ * (a layer row among the layers, an element among the rows of its group or
+ * layer — dropping INTO a layer is the layer header's business), so the gap is
+ * read as the one slot it offers in THAT list, or as none.
+ */
+/** A visible row, as the drop rule reads it. */
+export interface PaneDropRow {
+    node: SelectionPaneNode;
+    depth: number;
+    /** The row it is listed under, `''` at the top level. */
+    parent: string;
+}
+/** The sibling lists of the tree BEFORE any filter, keyed by parent id. */
+export interface PaneLists {
+    readonly lists: ReadonlyMap<string, readonly SelectionPaneNode[]>;
+    readonly parentOf: ReadonlyMap<string, string>;
+}
+export declare function paneLists(full: readonly SelectionPaneNode[]): PaneLists;
+/** A place in one sibling list. */
+export interface PaneSlot {
+    /** The list's parent id, `''` at the top level. */
+    parent: string;
+    /** Position in the FULL list, 0 being the top. */
+    index: number;
+    /** How deep that list's rows sit, for the drop line's indent. */
+    depth: number;
+}
+/**
+ * The slot that the visible gap `gap` — between `rows[gap - 1]` and
+ * `rows[gap]` — offers in the list `parent`, or `null`.
+ *
+ * The gap is "before" the row under it when that row is in the list; else
+ * "after" the row above it, or after any ancestor of that row whose subtree
+ * ends at this gap (dropping under a group's last member, or a layer's, means
+ * after the group or the layer). Positions are read in the FULL list, so a
+ * filtered view never computes a neighbour it is not showing.
+ */
+export declare function paneSlotAtGap(rows: readonly PaneDropRow[], gap: number, parent: string, { lists, parentOf }: PaneLists): PaneSlot | null;
+/**
+ * What a drop at `index` of `list` writes for the dragged row `dragId`: the
+ * model it lands directly ABOVE (`null` = the bottom of its stack), or `null`
+ * when the slot is refused.
+ *
+ * `stackOf(id)` names the model that stands for a row in the dragged row's
+ * own stack — itself, or the frame it belongs to when the dragged row is a
+ * loose element and that row is a frame's member (a frame's members paint
+ * together, right above it) — or `undefined` for a row that is not in that
+ * stack at all. A slot is refused when neither neighbour is in the stack, or
+ * when both stand for the same model: the inside of a frame's block of rows,
+ * where a loose element cannot be put.
+ */
+export declare function paneDropAbove(list: readonly SelectionPaneNode[], index: number, dragId: string, stackOf: (id: string) => string | undefined): {
+    above: string | null;
+} | null;

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

@@ -0,0 +1,91 @@
+export function paneLists(full) {
+    const lists = new Map();
+    const parentOf = new Map();
+    const walk = (list, parent) => {
+        lists.set(parent, list);
+        for (const node of list) {
+            parentOf.set(node.id, parent);
+            if (node.children)
+                walk(node.children, node.id);
+        }
+    };
+    walk(full, '');
+    return { lists, parentOf };
+}
+/**
+ * The slot that the visible gap `gap` — between `rows[gap - 1]` and
+ * `rows[gap]` — offers in the list `parent`, or `null`.
+ *
+ * The gap is "before" the row under it when that row is in the list; else
+ * "after" the row above it, or after any ancestor of that row whose subtree
+ * ends at this gap (dropping under a group's last member, or a layer's, means
+ * after the group or the layer). Positions are read in the FULL list, so a
+ * filtered view never computes a neighbour it is not showing.
+ */
+export function paneSlotAtGap(rows, gap, parent, { lists, parentOf }) {
+    const list = lists.get(parent);
+    if (!list)
+        return null;
+    const above = rows[gap - 1];
+    const below = rows[gap];
+    const depthOf = (id) => rows.find(row => row.node.id === id)?.depth;
+    if (below && below.parent === parent) {
+        const index = list.findIndex(node => node.id === below.node.id);
+        if (index !== -1)
+            return { parent, index, depth: below.depth };
+    }
+    if (!above || below?.parent === above.node.id)
+        return null;
+    // The ancestors the row under the gap is still inside: the gap does not
+    // end their subtree.
+    const open = new Set();
+    for (let id = below?.parent ?? ''; id !== ''; id = parentOf.get(id) ?? '') {
+        open.add(id);
+    }
+    let id = above.node.id;
+    let listedIn = above.parent;
+    for (;;) {
+        if (listedIn === parent) {
+            const index = list.findIndex(node => node.id === id);
+            const depth = depthOf(id);
+            if (index === -1 || depth === undefined)
+                return null;
+            return { parent, index: index + 1, depth };
+        }
+        if (listedIn === '' || open.has(listedIn))
+            return null;
+        id = listedIn;
+        listedIn = parentOf.get(id) ?? '';
+    }
+}
+/**
+ * What a drop at `index` of `list` writes for the dragged row `dragId`: the
+ * model it lands directly ABOVE (`null` = the bottom of its stack), or `null`
+ * when the slot is refused.
+ *
+ * `stackOf(id)` names the model that stands for a row in the dragged row's
+ * own stack — itself, or the frame it belongs to when the dragged row is a
+ * loose element and that row is a frame's member (a frame's members paint
+ * together, right above it) — or `undefined` for a row that is not in that
+ * stack at all. A slot is refused when neither neighbour is in the stack, or
+ * when both stand for the same model: the inside of a frame's block of rows,
+ * where a loose element cannot be put.
+ */
+export function paneDropAbove(list, index, dragId, stackOf) {
+    const before = list.slice(0, index).filter(node => node.id !== dragId);
+    const after = list.slice(index).filter(node => node.id !== dragId);
+    const upper = before.length
+        ? stackOf(before[before.length - 1].id)
+        : undefined;
+    const lower = after.length ? stackOf(after[0].id) : undefined;
+    if (upper === undefined && lower === undefined)
+        return null;
+    if (upper !== undefined && upper === lower)
+        return null;
+    for (const node of after) {
+        const model = stackOf(node.id);
+        if (model !== undefined)
+            return { above: model };
+    }
+    return { above: null };
+}

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

@@ -0,0 +1,17 @@
+import type { BlockStdScope } from '../../std/index.js';
+import { type GfxModel } from '../../std/gfx/index.js';
+import type { TemplateResult } from 'lit';
+/** The type wording of a row: its kind, translated. */
+export declare function selectionPaneTypeLabel(std: BlockStdScope, type: string): string;
+/**
+ * The wording of a row, read off the model at render time (ADR 0031 §12: the
+ * headless tree carries ids only).
+ *
+ * In order: a group's or a frame's own stored title; then an element's own
+ * text, or its label sibling's — `readName`, the very rule the reversed
+ * reading names an artefact by, so a Wardley component reads as its label and
+ * not as "Shape"; then its role's wording; then its kind.
+ */
+export declare function selectionPaneRowLabel(std: BlockStdScope, model: GfxModel): string;
+/** The icon of a row, by element type or block flavour. */
+export declare function selectionPaneRowIcon(type: string): TemplateResult;

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

@@ -0,0 +1,95 @@
+import { ReadingManager, readingProfileFor, readName, } from '../../affine-block-surface/index.js';
+import { FrameBlockModel, GroupElementModel } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
+import { findRoleDef, GfxBlockElementModel, GfxPrimitiveElementModel, RoleVocabularyIdentifier, } from '../../std/gfx/index.js';
+import { AttachmentIcon, BookmarkIcon, ConnectorCIcon, EmbedWebIcon, FrameIcon, GroupIcon, ImageIcon, MindmapIcon, PageIcon, PenIcon, ShapeIcon, TextIcon, } from '@blocksuite/icons/lit';
+import { SELECTION_PANE_TYPE_ELEMENT, SELECTION_PANE_TYPE_EMBED, SELECTION_PANE_TYPE_WORDINGS, } from '../translations.js';
+/** For an element no reading profile governs: its own text, no label sibling. */
+const NO_PROFILE = { roles: {} };
+/**
+ * Every key of the library starts with it. A host catalogue that echoes a key
+ * it does not hold (i18next's default) is not a wording either.
+ */
+const KEY_PREFIX = 'com.labre.';
+/** The type wording of a row: its kind, translated. */
+export function selectionPaneTypeLabel(std, type) {
+    const wording = SELECTION_PANE_TYPE_WORDINGS[type] ??
+        (type.startsWith('affine:embed-')
+            ? SELECTION_PANE_TYPE_EMBED
+            : SELECTION_PANE_TYPE_ELEMENT);
+    return translateKey(std, ...wording);
+}
+/**
+ * The wording of a row, read off the model at render time (ADR 0031 §12: the
+ * headless tree carries ids only).
+ *
+ * In order: a group's or a frame's own stored title; then an element's own
+ * text, or its label sibling's — `readName`, the very rule the reversed
+ * reading names an artefact by, so a Wardley component reads as its label and
+ * not as "Shape"; then its role's wording; then its kind.
+ */
+export function selectionPaneRowLabel(std, model) {
+    if (model instanceof GroupElementModel) {
+        const title = model.title.toString().trim();
+        if (title)
+            return title;
+    }
+    else if (model instanceof FrameBlockModel) {
+        const title = model.props.title.toString().trim();
+        if (title)
+            return title;
+    }
+    else if (model instanceof GfxPrimitiveElementModel) {
+        const profiles = std.getOptional(ReadingManager)?.profiles ?? [];
+        const profile = readingProfileFor(model, profiles) ?? NO_PROFILE;
+        const name = readName(model, profile);
+        if (name)
+            return name;
+        const vocabularies = [
+            ...std.provider.getAll(RoleVocabularyIdentifier).values(),
+        ];
+        const role = findRoleDef(vocabularies, model.role);
+        if (role?.labelKey) {
+            // `''`, not the key, when the role ships no wording: `translateKey`
+            // defaults its fallback to the key, and a row once printed
+            // `com.labre.wardley.role.…` that way. No wording reads as the kind.
+            const wording = translateKey(std, role.labelKey, role.labelFallback ?? '');
+            if (wording && !wording.startsWith(KEY_PREFIX))
+                return wording;
+        }
+    }
+    const type = model instanceof GfxBlockElementModel
+        ? model.flavour
+        : model.type;
+    return selectionPaneTypeLabel(std, type);
+}
+/** The icon of a row, by element type or block flavour. */
+export function selectionPaneRowIcon(type) {
+    switch (type) {
+        case 'connector':
+            return ConnectorCIcon();
+        case 'text':
+        case 'affine:edgeless-text':
+        case 'affine:latex':
+            return TextIcon();
+        case 'group':
+            return GroupIcon();
+        case 'mindmap':
+            return MindmapIcon();
+        case 'brush':
+        case 'highlighter':
+            return PenIcon();
+        case 'affine:frame':
+            return FrameIcon();
+        case 'affine:note':
+            return PageIcon();
+        case 'affine:image':
+            return ImageIcon();
+        case 'affine:attachment':
+            return AttachmentIcon();
+        case 'affine:bookmark':
+            return BookmarkIcon();
+        default:
+            return type.startsWith('affine:embed-') ? EmbedWebIcon() : ShapeIcon();
+    }
+}

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

@@ -0,0 +1,10 @@
+import type { ExtensionType } from '../../store/index.js';
+/**
+ * The DEFAULT `SelectionPaneProvider`: the library's own left panel.
+ *
+ * Mirrors `artefactCatalogueDefaultExtension` line for line: registered next
+ * to the widget, unconditionally (the pane is core chrome, and nothing it
+ * lists is a flag's business), with `di.addImpl` so a host's
+ * `SelectionPaneExtension(service | null)` — `di.override` — always wins.
+ */
+export declare const selectionPaneDefaultExtension: ExtensionType;

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

@@ -0,0 +1,31 @@
+import { SelectionPaneProvider, } from '../../affine-shared/services/index.js';
+import { StdIdentifier } from '../../std/index.js';
+import { EDGELESS_SELECTION_PANE_WIDGET, } from './selection-pane-widget.js';
+/**
+ * The widget, found on the editor host — or `null` before it has mounted.
+ * A DOM lookup for the reason `artefact-catalogue-default.ts` gives: lit
+ * creates and destroys the widget as the root block renders.
+ */
+function paneWidget(std) {
+    return (std.host.querySelector(EDGELESS_SELECTION_PANE_WIDGET) ?? null);
+}
+/**
+ * The DEFAULT `SelectionPaneProvider`: the library's own left panel.
+ *
+ * Mirrors `artefactCatalogueDefaultExtension` line for line: registered next
+ * to the widget, unconditionally (the pane is core chrome, and nothing it
+ * lists is a flag's business), with `di.addImpl` so a host's
+ * `SelectionPaneExtension(service | null)` — `di.override` — always wins.
+ */
+export const selectionPaneDefaultExtension = {
+    setup: di => {
+        di.addImpl(SelectionPaneProvider, provider => {
+            const std = provider.get(StdIdentifier);
+            const service = {
+                open: () => paneWidget(std)?.openPanel(),
+                close: () => paneWidget(std)?.closePanel(),
+            };
+            return service;
+        });
+    },
+};

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+export declare const SELECTION_PANE_TOOL_BUTTON = "edgeless-selection-pane-tool-button";
+declare const EdgelessSelectionPaneToolButton_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../index.js").QuickToolMixinClass>;
+/**
+ * The edgeless toolbar's entry to the selection pane: a quick tool, placed and
+ * styled like the undo and frame ones. An action, not a tool mode, so `type`
+ * is empty; it reads as active while the library's own pane is open.
+ */
+export declare class EdgelessSelectionPaneToolButton extends EdgelessSelectionPaneToolButton_base {
+    static styles: import("lit").CSSResult;
+    type: never[];
+    private _onClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * Shown only while `SelectionPaneProvider` answers: `SelectionPaneExtension(null)`
+ * removes the button with the pane, because a control that opens nothing is a
+ * lie. Not hidden on a read-only document — the pane is how a reader finds
+ * what is on it.
+ *
+ * The `menu` entry is what the toolbar moves into its "more tools" menu when a
+ * narrow editor leaves no room for the button; a quick tool without one is
+ * dropped there, which is how the pane once went missing below ~800 px.
+ */
+export declare const selectionPaneQuickTool: import("../../store/index.js").ExtensionType;
+export {};

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

@@ -0,0 +1,82 @@
+import { SelectionPaneModel, selectionPaneCommands, } from '../../affine-block-surface/index.js';
+import { SelectionPaneProvider, translateKey, } from '../../affine-shared/services/index.js';
+import { menu } from '../../affine-components/context-menu/index.js';
+import { SignalWatcher } from '../../global/lit/index.js';
+import { runCommand } from '../../std/index.js';
+import { LayerIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement } from 'lit';
+import { QuickToolExtension } from '../extension/index.js';
+import { QuickToolMixin } from '../mixins/index.js';
+import { SELECTION_PANE_TITLE } from '../translations.js';
+export const SELECTION_PANE_TOOL_BUTTON = 'edgeless-selection-pane-tool-button';
+/**
+ * The button and its "more tools" entry both run `canvas.selectionPane.toggle`
+ * rather than calling the seam, so `SelectionPaneOpened` is emitted in ONE
+ * place whichever surface opened the pane.
+ */
+function toggleSelectionPane(std) {
+    const toggle = selectionPaneCommands.find(command => command.id === 'canvas.selectionPane.toggle');
+    if (!toggle)
+        return;
+    runCommand(std, toggle, {
+        surface: 'contextual-toolbar',
+        source: 'toolbar:general',
+    });
+}
+/**
+ * The edgeless toolbar's entry to the selection pane: a quick tool, placed and
+ * styled like the undo and frame ones. An action, not a tool mode, so `type`
+ * is empty; it reads as active while the library's own pane is open.
+ */
+export class EdgelessSelectionPaneToolButton extends QuickToolMixin(SignalWatcher(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.type = [];
+    }
+    static { this.styles = css `
+    .selection-pane-icon,
+    .selection-pane-icon > svg {
+      width: 24px;
+      height: 24px;
+    }
+  `; }
+    _onClick() {
+        toggleSelectionPane(this.edgeless.std);
+    }
+    render() {
+        const { std } = this.edgeless;
+        const open = std.getOptional(SelectionPaneModel)?.open$.value ?? false;
+        return html `<edgeless-tool-icon-button
+      .iconContainerPadding="${6}"
+      .tooltip="${translateKey(std, ...SELECTION_PANE_TITLE)}"
+      .tooltipOffset=${17}
+      .active=${open}
+      class="edgeless-selection-pane-tool-button"
+      data-testid="selection-pane-tool-button"
+      @click=${this._onClick}
+    >
+      <span class="selection-pane-icon">${LayerIcon()}</span>
+    </edgeless-tool-icon-button>`;
+    }
+}
+/**
+ * Shown only while `SelectionPaneProvider` answers: `SelectionPaneExtension(null)`
+ * removes the button with the pane, because a control that opens nothing is a
+ * lie. Not hidden on a read-only document — the pane is how a reader finds
+ * what is on it.
+ *
+ * The `menu` entry is what the toolbar moves into its "more tools" menu when a
+ * narrow editor leaves no room for the button; a quick tool without one is
+ * dropped there, which is how the pane once went missing below ~800 px.
+ */
+export const selectionPaneQuickTool = QuickToolExtension('selection-pane', ({ block }) => ({
+    content: html `<edgeless-selection-pane-tool-button
+      .edgeless=${block}
+    ></edgeless-selection-pane-tool-button>`,
+    menu: menu.action({
+        name: translateKey(block.std, ...SELECTION_PANE_TITLE),
+        prefix: LayerIcon(),
+        select: () => toggleSelectionPane(block.std),
+    }),
+    enable: !!block.std.getOptional(SelectionPaneProvider),
+}));