@formicoidea/labre-core 0.42.0 → 0.45.0

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

@@ -25,6 +25,21 @@ export type Menu<T> = {
     tooltip?: string;
     /** {@link tooltip}, for the translation seam. */
     tooltipWording?: ChromeWording;
+    /**
+     * The accessible name of the MENU shell (`aria-label` on
+     * `editor-menu-button`) — its own key, never a composition (#390).
+     *
+     * Before this field the shell's name was sewn together as
+     * `` `${resolvedLabel.toLowerCase()}-menu` ``, which was a stable
+     * identifier while `label` was English and became half-translated
+     * ("changer le type de forme-menu") the day `label` joined the seam. The
+     * precedent is `ROOT_ALIGNMENT_MENU_ARIA` (`blocks/root`): a menu's aria is
+     * a wording of its own.
+     *
+     * Left out, the name is composed from the ENGLISH {@link label}, so a
+     * caller that declares nothing keeps exactly the identifier it had.
+     */
+    menuAriaWording?: ChromeWording;
     items: MenuItem<T>[];
     currentValue: T;
     onPick: (value: T) => void;

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

@@ -7,6 +7,6 @@ export declare function renderCurrentMenuItemWith<T, F extends keyof MenuItem<T>
  * resolved through `std` when the caller has one, else its `key` literal.
  */
 export declare function resolveMenuItemLabel<T>(items: MenuItem<T>[], currentValue: T, std?: BlockStdScope): string | undefined;
-export declare function renderMenu<T>({ label, labelWording, tooltip, tooltipWording, icon, items, currentValue, onPick, std, }: Menu<T>): import("lit-html").TemplateResult<1>;
+export declare function renderMenu<T>({ label, labelWording, tooltip, tooltipWording, menuAriaWording, icon, items, currentValue, onPick, std, }: Menu<T>): import("lit-html").TemplateResult<1>;
 export declare function renderMenuItems<T>(items: MenuItem<T>[], currentValue: T, onPick: (value: T) => void, std?: BlockStdScope): unknown;
 export declare function getRootBlock(ctx: ToolbarContext): BlockComponent | null;

package/dist/_pkgs/affine-widget-edgeless-toolbar/config/utils.js

@@ -18,14 +18,19 @@ export function resolveMenuItemLabel(items, currentValue, std) {
         ? translateKey(std, ...item.keyWording)
         : item.key;
 }
-export function renderMenu({ label, labelWording, tooltip, tooltipWording, icon, items, currentValue, onPick, std, }) {
+export function renderMenu({ label, labelWording, tooltip, tooltipWording, menuAriaWording, icon, items, currentValue, onPick, std, }) {
     const resolvedLabel = labelWording && std ? translateKey(std, ...labelWording) : label;
     const resolvedTooltip = tooltipWording && std
         ? translateKey(std, ...tooltipWording)
         : (tooltip ?? resolvedLabel);
+    // Composed from the ENGLISH `label`, never `resolvedLabel` (#390): sewing
+    // `-menu` onto a translated word produced "changer le type de forme-menu".
+    const menuAria = menuAriaWording && std
+        ? translateKey(std, ...menuAriaWording)
+        : `${label.toLowerCase()}-menu`;
     return html `
     <editor-menu-button
-      aria-label="${`${resolvedLabel.toLowerCase()}-menu`}"
+      aria-label="${menuAria}"
       .button=${html `
         <editor-icon-button
           aria-label="${resolvedLabel}"

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/panel/font-family-panel.d.ts

@@ -1,9 +1,27 @@
 import { FontFamily } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 export declare class EdgelessFontFamilyPanel extends LitElement {
     static styles: import("lit").CSSResult;
+    /**
+     * The families the host configured: those with at least one face in its
+     * `FontConfig` (#396). Read from the config itself rather than from
+     * `document.fonts`, which the font loader fills a few seconds late for every
+     * non-critical family.
+     *
+     * `null` when no config is registered (the seam is absent, or empty, which
+     * the font loader also treats as absent): every family is offered, as before
+     * the seam narrowed the list. None of them has a file then, so each paints
+     * with the same fallback anyway.
+     */
+    private _configuredFamilies;
     private _onSelect;
+    private _unavailableLabel;
     render(): unknown;
     accessor onSelect: ((value: FontFamily) => void) | undefined;
+    /** Set by the caller that has one (`gfx/text`'s `createTextActions`): it
+     * carries the host's `FontConfig` and translations. Optional, so the panel
+     * still renders (every family, in English) when created with none. */
+    accessor std: BlockStdScope | undefined;
     accessor value: FontFamily;
 }

package/dist/_pkgs/affine-widget-edgeless-toolbar/panel/font-family-panel.js

@@ -34,15 +34,20 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { TextUtils } from '../../affine-block-surface/index.js';
 import { FontFamily, FontFamilyList } from '../../affine-model/index.js';
+import { fillPlaceholders, FontConfigIdentifier, translateKey, } from '../../affine-shared/services/index.js';
 import { DoneIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE } from '../translations.js';
 let EdgelessFontFamilyPanel = (() => {
     let _classSuper = LitElement;
     let _onSelect_decorators;
     let _onSelect_initializers = [];
     let _onSelect_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
@@ -50,8 +55,10 @@ let EdgelessFontFamilyPanel = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _onSelect_decorators = [property({ attribute: false })];
+            _std_decorators = [property({ attribute: false })];
             _value_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _onSelect_decorators, { kind: "accessor", name: "onSelect", static: false, private: false, access: { has: obj => "onSelect" in obj, get: obj => obj.onSelect, set: (obj, value) => { obj.onSelect = value; } }, metadata: _metadata }, _onSelect_initializers, _onSelect_extraInitializers);
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -67,26 +74,59 @@ let EdgelessFontFamilyPanel = (() => {
       width: 100%;
     }
   `; }
+        /**
+         * The families the host configured: those with at least one face in its
+         * `FontConfig` (#396). Read from the config itself rather than from
+         * `document.fonts`, which the font loader fills a few seconds late for every
+         * non-critical family.
+         *
+         * `null` when no config is registered (the seam is absent, or empty, which
+         * the font loader also treats as absent): every family is offered, as before
+         * the seam narrowed the list. None of them has a file then, so each paints
+         * with the same fallback anyway.
+         */
+        _configuredFamilies() {
+            const config = this.std?.getOptional(FontConfigIdentifier);
+            if (!config || config.length === 0)
+                return null;
+            return new Set(config.map(face => face.font));
+        }
         _onSelect(value) {
             this.value = value;
             if (this.onSelect) {
                 this.onSelect(value);
             }
         }
+        _unavailableLabel(name) {
+            return this.std
+                ? translateKey(this.std, ...EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE, {
+                    name,
+                })
+                : fillPlaceholders(EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE[1], { name });
+        }
         render() {
-            return repeat(FontFamilyList, item => item[0], ([font, name]) => {
-                const active = this.value === font;
+            const configured = this._configuredFamilies();
+            // The current family stays listed even when the host no longer ships it:
+            // the element keeps it (and paints the fallback), so the picker names it
+            // rather than pretend the text has none. Greyed and never picked from
+            // here, so nothing rewrites the stored value behind the user's back.
+            const families = FontFamilyList.filter(([font]) => !configured || configured.has(font) || font === this.value);
+            return repeat(families, item => item[0], ([font, name]) => {
+                const unavailable = !!configured && !configured.has(font);
+                const current = this.value === font;
                 return html `
           <edgeless-tool-icon-button
             data-font="${name}"
             style="font-family: ${TextUtils.wrapFontFamily(font)}"
             .iconContainerPadding=${[4, 8]}
             .justify=${'space-between'}
-            .active=${active}
+            .active=${current && !unavailable}
+            .disabled=${unavailable}
             .iconSize=${'20px'}
-            @click=${() => this._onSelect(font)}
+            @click=${unavailable ? nothing : () => this._onSelect(font)}
           >
-            ${name} ${active ? DoneIcon() : nothing}
+            ${unavailable ? this._unavailableLabel(name) : name}
+            ${current ? DoneIcon() : nothing}
           </edgeless-tool-icon-button>
         `;
             });
@@ -94,7 +134,13 @@ let EdgelessFontFamilyPanel = (() => {
         #onSelect_accessor_storage = __runInitializers(this, _onSelect_initializers, undefined);
         get onSelect() { return this.#onSelect_accessor_storage; }
         set onSelect(value) { this.#onSelect_accessor_storage = value; }
-        #value_accessor_storage = (__runInitializers(this, _onSelect_extraInitializers), __runInitializers(this, _value_initializers, FontFamily.Inter));
+        #std_accessor_storage = (__runInitializers(this, _onSelect_extraInitializers), __runInitializers(this, _std_initializers, undefined));
+        /** Set by the caller that has one (`gfx/text`'s `createTextActions`): it
+         * carries the host's `FontConfig` and translations. Optional, so the panel
+         * still renders (every family, in English) when created with none. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _value_initializers, FontFamily.Inter));
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
         constructor() {

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 {};