@formicoidea/labre-core 0.42.0 → 0.43.1

package/dist/_pkgs/affine-shared/services/translation-service/chrome.js

@@ -52,6 +52,21 @@ export const TOAST_NO_LINK_FOUND = [
     'com.labre.toast.no-link-found',
     'No link found',
 ];
+/**
+ * What the `doc.copyLink` command says once the document's URL is on the
+ * clipboard.
+ *
+ * Its own wording rather than {@link TOAST_COPIED_TO_CLIPBOARD}: that one
+ * reports a SLICE copy (blocks, elements, an image) and this one reports a
+ * link, and the two are told apart by nothing else on screen. Its own wording
+ * rather than the inline link toolbar's "Copied link to clipboard" too — that
+ * key belongs to `@labre/affine-inline-link` and names the `href` a delta
+ * already carried, not a document address the host just generated.
+ */
+export const TOAST_LINK_COPIED = [
+    'com.labre.toast.link-copied',
+    'Link copied',
+];
 /* ── Toolbars and menus ───────────────────────────────────────────────── */
 export const TOOLBAR_BRING_TO_FRONT = [
     'com.labre.toolbar.bring-to-front',
@@ -739,6 +754,40 @@ export const PALETTE_NAME_MEDIUM_GREY = [
     'com.labre.palette-name.medium-grey',
     'MediumGrey',
 ];
+/*
+ * The `Heavy` row (`DefaultTheme.Palettes`, seven colours and no grey). It was
+ * missing from the table until #390 — the row rendered its raw `Palette.key`
+ * next to translated neighbours. The exhaustiveness test in
+ * `packages/affine/all` now compares this table to the theme.
+ */
+export const PALETTE_NAME_HEAVY_RED = [
+    'com.labre.palette-name.heavy-red',
+    'HeavyRed',
+];
+export const PALETTE_NAME_HEAVY_ORANGE = [
+    'com.labre.palette-name.heavy-orange',
+    'HeavyOrange',
+];
+export const PALETTE_NAME_HEAVY_YELLOW = [
+    'com.labre.palette-name.heavy-yellow',
+    'HeavyYellow',
+];
+export const PALETTE_NAME_HEAVY_GREEN = [
+    'com.labre.palette-name.heavy-green',
+    'HeavyGreen',
+];
+export const PALETTE_NAME_HEAVY_BLUE = [
+    'com.labre.palette-name.heavy-blue',
+    'HeavyBlue',
+];
+export const PALETTE_NAME_HEAVY_PURPLE = [
+    'com.labre.palette-name.heavy-purple',
+    'HeavyPurple',
+];
+export const PALETTE_NAME_HEAVY_MAGENTA = [
+    'com.labre.palette-name.heavy-magenta',
+    'HeavyMagenta',
+];
 /**
  * Keyed by the exact `Palette.key` string the default theme's tables produce
  * (`buildPalettes`, `packages/affine/model/src/themes/{default,utils}.ts`) —
@@ -773,7 +822,30 @@ export const PALETTE_NAME_WORDINGS = {
     MediumPurple: PALETTE_NAME_MEDIUM_PURPLE,
     MediumMagenta: PALETTE_NAME_MEDIUM_MAGENTA,
     MediumGrey: PALETTE_NAME_MEDIUM_GREY,
+    HeavyRed: PALETTE_NAME_HEAVY_RED,
+    HeavyOrange: PALETTE_NAME_HEAVY_ORANGE,
+    HeavyYellow: PALETTE_NAME_HEAVY_YELLOW,
+    HeavyGreen: PALETTE_NAME_HEAVY_GREEN,
+    HeavyBlue: PALETTE_NAME_HEAVY_BLUE,
+    HeavyPurple: PALETTE_NAME_HEAVY_PURPLE,
+    HeavyMagenta: PALETTE_NAME_HEAVY_MAGENTA,
 };
+/* ── Menu shells' accessible names (#390) ─────────────────────────────────
+ *
+ * The `aria-label` of an `editor-menu-button` is a wording of its OWN, never
+ * `` `${translatedLabel}-menu` `` — sewing a suffix onto a translated word
+ * gave "changer le type de forme-menu" to a French host. The precedent is
+ * `ROOT_ALIGNMENT_MENU_ARIA` (`blocks/root`). The fallbacks are the exact
+ * identifiers the composition produced in English, so a catalogue-less
+ * playground reads what it always read.
+ *
+ * This one is HERE and not in a package because three toolbars draw a menu
+ * called "Style" (shape, mindmap, connector) — one shared word, one key.
+ */
+export const MENU_ARIA_STYLE = [
+    'com.labre.menu-aria.style',
+    'style-menu',
+];
 /* ── Clipboard size-limit toasts (adapters/clipboard/utils.ts) ────────── */
 export const CHROME_CLIPBOARD_FILE_TOO_LARGE = [
     'com.labre.clipboard.file-too-large',
@@ -1089,6 +1161,7 @@ export const CHROME_WORDINGS = [
     TOAST_NOTE_REMOVED_FROM_PAGE,
     TOAST_FRAME_INSERTED_INTO_PAGE,
     TOAST_NO_LINK_FOUND,
+    TOAST_LINK_COPIED,
     TOOLBAR_BRING_TO_FRONT,
     TOOLBAR_SEND_TO_BACK,
     TOOLBAR_COPY,
@@ -1240,4 +1313,12 @@ export const CHROME_WORDINGS = [
     PALETTE_NAME_MEDIUM_PURPLE,
     PALETTE_NAME_MEDIUM_MAGENTA,
     PALETTE_NAME_MEDIUM_GREY,
+    PALETTE_NAME_HEAVY_RED,
+    PALETTE_NAME_HEAVY_ORANGE,
+    PALETTE_NAME_HEAVY_YELLOW,
+    PALETTE_NAME_HEAVY_GREEN,
+    PALETTE_NAME_HEAVY_BLUE,
+    PALETTE_NAME_HEAVY_PURPLE,
+    PALETTE_NAME_HEAVY_MAGENTA,
+    MENU_ARIA_STYLE,
 ];

package/dist/_pkgs/affine-widget-edgeless-dragging-area/edgeless-dragging-area-rect.js

@@ -10,11 +10,11 @@ export class EdgelessDraggingAreaRectWidget extends WidgetComponent {
     static { this.styles = css `
     .affine-edgeless-dragging-area {
       position: absolute;
-      background: ${unsafeCSS(cssVarV2('edgeless/selection/selectionMarqueeBackground', '#1E96EB14'))};
+      background: ${unsafeCSS(cssVarV2('edgeless/selection/selectionMarqueeBackground'))};
       box-sizing: border-box;
       border-width: 1px;
       border-style: solid;
-      border-color: ${unsafeCSS(cssVarV2('edgeless/selection/selectionMarqueeBorder', '#1E96EB'))};
+      border-color: ${unsafeCSS(cssVarV2('edgeless/selection/selectionMarqueeBorder'))};
 
       z-index: 1;
       pointer-events: none;

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

@@ -1,6 +1,7 @@
 import { EdgelessCRUDIdentifier, isNoteBlock, Overlay, } 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';
 import { BlockSuiteError, ErrorCode } from '../global/exceptions/index.js';
 import { Bound, normalizeDegAngle } from '../global/gfx/index.js';
 import { assertType } from '../global/utils/index.js';
@@ -33,7 +34,10 @@ export class AutoCompleteTextOverlay extends AutoCompleteTargetOverlay {
     render(ctx, _rc) {
         const [x, y, w, h] = this.xywh;
         ctx.globalAlpha = 0.4;
-        ctx.strokeStyle = '#1e96eb';
+        // The accent read from the theme, not a literal: a canvas context cannot
+        // take a `var(…)`, so the token is resolved here (DESIGN.md, The Borrowed
+        // Blue Rule).
+        ctx.strokeStyle = getChromeAccentColor(this.gfx.std);
         ctx.lineWidth = 1;
         ctx.strokeRect(x, y, w, h);
         // fill text placeholder

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/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/translations.d.ts

@@ -11,5 +11,11 @@ import { type ChromeWording } from '../affine-shared/services/index.js';
  */
 export declare const EDGELESS_TOOLBAR_COMING_SOON: ChromeWording;
 export declare const EDGELESS_TOOLBAR_MORE_TOOLS: ChromeWording;
+/**
+ * A family the element still carries but the host no longer configures
+ * (#396): the font picker keeps its name, greyed, with this mark. `{{name}}`
+ * is the family name, a proper name the host does not translate.
+ */
+export declare const EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE: ChromeWording;
 /** Every wording this package declares, in the order it renders them. */
 export declare const EDGELESS_TOOLBAR_WORDINGS: readonly ChromeWording[];

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

@@ -14,7 +14,17 @@ export const EDGELESS_TOOLBAR_MORE_TOOLS = [
     'com.labre.edgeless-toolbar.more-tools',
     'More Tools',
 ];
+/**
+ * A family the element still carries but the host no longer configures
+ * (#396): the font picker keeps its name, greyed, with this mark. `{{name}}`
+ * is the family name, a proper name the host does not translate.
+ */
+export const EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE = [
+    'com.labre.edgeless-toolbar.font-family-unavailable',
+    '{{name}} (unavailable)',
+];
 /** Every wording this package declares, in the order it renders them. */
 export const EDGELESS_TOOLBAR_WORDINGS = [
     EDGELESS_TOOLBAR_MORE_TOOLS,
+    EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE,
 ];

package/dist/_pkgs/affine-widget-frame-title/edgeless-frame-title-editor.js

@@ -78,7 +78,8 @@ let EdgelessFrameTitleEditor = (() => {
       outline: none;
       z-index: 1;
       border: 1px solid var(--affine-primary-color);
-      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
       overflow: hidden;
       font-family: var(--affine-font-family);
     }

package/dist/_pkgs/affine-widget-slash-menu/translations.d.ts

@@ -53,12 +53,19 @@ export declare const SLASH_MENU_DELETE_DESCRIPTION: ChromeWording;
  * '<n>_<Name>@<i>'`, the `<Name>` between `_` and `@`):
  *
  * - `Basic` — callout, latex, note (paragraph/heading/list/quote/divider).
+ * - `List`, `Style` — note again, but written as TEMPLATE literals
+ *   (`` `1_List@${index++}` ``, `` `2_Style@${index++}` ``,
+ *   `blocks/note/src/configs/slash-menu.ts`), which is why the first
+ *   inventory — a grep for `group: '` — missed both (#390).
  * - `Content & Media` — attachment, bookmark, image, latex, the generic embed
  *   (iframe) block, and (postponed, `blocks/table`) table.
  * - `Page` — the linked-doc embed block.
  * - `Edgeless Element` — surface-ref.
  * - `Date`, `Actions` — this package's own groups (`./config.ts`).
  *
+ * The inventory covers template literals too: the `<Name>` is read between the
+ * `_` and the `@`, whichever way the group string was built.
+ *
  * NOT included: `Database`, used only by the postponed `blocks/database` and
  * `blocks/data-view` — the PO's decision excludes those surfaces, and
  * `Database` has no other user today. A framework or a later lot that adds a
@@ -67,6 +74,15 @@ export declare const SLASH_MENU_DELETE_DESCRIPTION: ChromeWording;
  * of this existed.
  */
 export declare const SLASH_MENU_GROUP_BASIC: ChromeWording;
+export declare const SLASH_MENU_GROUP_LIST: ChromeWording;
+/**
+ * An ALIAS, not a new key: `STYLE_MENU_LABEL` already carries the word
+ * `Style` in the chrome table, and a second key with the same fallback would
+ * fail the "un mot chrome, une clé" test. Listed in the group table below,
+ * NOT in `SLASH_MENU_WORDINGS` — an alias is walked once, from
+ * `CHROME_WORDINGS`, exactly like `SLASH_MENU_COPY` / `_DUPLICATE`.
+ */
+export declare const SLASH_MENU_GROUP_STYLE: ChromeWording;
 export declare const SLASH_MENU_GROUP_CONTENT_MEDIA: ChromeWording;
 export declare const SLASH_MENU_GROUP_PAGE: ChromeWording;
 export declare const SLASH_MENU_GROUP_EDGELESS_ELEMENT: ChromeWording;

package/dist/_pkgs/affine-widget-slash-menu/translations.js

@@ -1,4 +1,4 @@
-import { TOOLBAR_COPY, TOOLBAR_DELETE, TOOLBAR_DUPLICATE, TOOLBAR_MOVE_DOWN, TOOLBAR_MOVE_UP, } from '../affine-shared/services/index.js';
+import { STYLE_MENU_LABEL, TOOLBAR_COPY, TOOLBAR_DELETE, TOOLBAR_DUPLICATE, TOOLBAR_MOVE_DOWN, TOOLBAR_MOVE_UP, } from '../affine-shared/services/index.js';
 /**
  * The slash menu's own wordings — one `ChromeWording` per static config
  * literal (`name`, `description`, a tooltip's `caption`) that
@@ -91,12 +91,19 @@ export const SLASH_MENU_DELETE_DESCRIPTION = [
  * '<n>_<Name>@<i>'`, the `<Name>` between `_` and `@`):
  *
  * - `Basic` — callout, latex, note (paragraph/heading/list/quote/divider).
+ * - `List`, `Style` — note again, but written as TEMPLATE literals
+ *   (`` `1_List@${index++}` ``, `` `2_Style@${index++}` ``,
+ *   `blocks/note/src/configs/slash-menu.ts`), which is why the first
+ *   inventory — a grep for `group: '` — missed both (#390).
  * - `Content & Media` — attachment, bookmark, image, latex, the generic embed
  *   (iframe) block, and (postponed, `blocks/table`) table.
  * - `Page` — the linked-doc embed block.
  * - `Edgeless Element` — surface-ref.
  * - `Date`, `Actions` — this package's own groups (`./config.ts`).
  *
+ * The inventory covers template literals too: the `<Name>` is read between the
+ * `_` and the `@`, whichever way the group string was built.
+ *
  * NOT included: `Database`, used only by the postponed `blocks/database` and
  * `blocks/data-view` — the PO's decision excludes those surfaces, and
  * `Database` has no other user today. A framework or a later lot that adds a
@@ -108,6 +115,18 @@ export const SLASH_MENU_GROUP_BASIC = [
     'com.labre.slash-menu.group.basic',
     'Basic',
 ];
+export const SLASH_MENU_GROUP_LIST = [
+    'com.labre.slash-menu.group.list',
+    'List',
+];
+/**
+ * An ALIAS, not a new key: `STYLE_MENU_LABEL` already carries the word
+ * `Style` in the chrome table, and a second key with the same fallback would
+ * fail the "un mot chrome, une clé" test. Listed in the group table below,
+ * NOT in `SLASH_MENU_WORDINGS` — an alias is walked once, from
+ * `CHROME_WORDINGS`, exactly like `SLASH_MENU_COPY` / `_DUPLICATE`.
+ */
+export const SLASH_MENU_GROUP_STYLE = STYLE_MENU_LABEL;
 export const SLASH_MENU_GROUP_CONTENT_MEDIA = [
     'com.labre.slash-menu.group.content-media',
     'Content & Media',
@@ -131,6 +150,8 @@ export const SLASH_MENU_GROUP_ACTIONS = [
 /** The group table, keyed by the raw group name `parseGroup` extracts. */
 const SLASH_MENU_GROUP_WORDINGS = {
     Basic: SLASH_MENU_GROUP_BASIC,
+    List: SLASH_MENU_GROUP_LIST,
+    Style: SLASH_MENU_GROUP_STYLE,
     'Content & Media': SLASH_MENU_GROUP_CONTENT_MEDIA,
     Page: SLASH_MENU_GROUP_PAGE,
     'Edgeless Element': SLASH_MENU_GROUP_EDGELESS_ELEMENT,
@@ -167,6 +188,7 @@ export const SLASH_MENU_WORDINGS = [
     SLASH_MENU_COPY_DUPLICATE_CAPTION,
     SLASH_MENU_DELETE_DESCRIPTION,
     SLASH_MENU_GROUP_BASIC,
+    SLASH_MENU_GROUP_LIST,
     SLASH_MENU_GROUP_CONTENT_MEDIA,
     SLASH_MENU_GROUP_PAGE,
     SLASH_MENU_GROUP_EDGELESS_ELEMENT,

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

@@ -23,6 +23,21 @@ export const sideMap = new Map([
     // has only one shape element
     ['affine:surface:shape', { top: 26, bottom: -26 }],
 ]);
+/**
+ * The narrowest room the row is ever told it has.
+ *
+ * A cap is a `max-width`: below the width of what the row cannot give up, it
+ * stops being an instruction and becomes a guillotine — the entries past it are
+ * painted outside the row's own background, over the document. A floor keeps
+ * that from ever happening on a number nobody meant.
+ *
+ * 120px is a minimal row, drawn: three icon buttons — the "⋮" plus the two
+ * entries a menu is worth opening for — at {@link MENU_BUTTON_WIDTH} each, the
+ * two 8px gaps between them, one separator and its gap, and the row's own 6px
+ * of padding on either side. 109px, rounded up to leave the border its half
+ * pixel and the eye a little air.
+ */
+const MIN_TOOLBAR_WIDTH = 120;
 export function autoUpdatePosition(signal, toolbar, referenceElement, flavour, placement, sideOptions, options = { elementResize: false }, 
 /**
  * Called whenever the room the row has just changed. This is the only place
@@ -51,22 +66,32 @@ onAvailableWidth) {
         }
         : {
             placement,
+            // ORDER MATTERS, and `size` comes LAST of the four — after `inline`,
+            // after `shift`, after `flip` — which is the order floating-ui
+            // documents for it and the order this row needs.
+            //
+            // `size` asks the question "how much room is there", and it has two
+            // different answers depending on whether a `shift` has already run:
+            //
+            // - **after `shift`** (`middlewareData.shift.enabled.x`): the room is
+            //   `maximumClippingWidth` — the clipping box, less the padding. Which
+            //   is the truth: it is where the row may be drawn, and `shift` will
+            //   slide the row to fit inside it.
+            // - **before `shift`**, on an UNALIGNED placement (`'top'`, which is
+            //   what a text selection's row uses), floating-ui falls back to
+            //   `width - 2 × overflow` — the row's own width, less twice what a
+            //   row CENTRED on the selection would stick out by. That number is
+            //   not room at all. It is fine while the centred row fits, and the
+            //   moment it would stick out by one pixel it collapses below the
+            //   row's width and the entries start leaving for the "⋮" — with 900px
+            //   of empty editor next to them, because `shift` was about to slide
+            //   the row back in anyway. Worse, it is computed from a width `size`
+            //   itself has just capped, so each `reset` makes it smaller: the
+            //   format bar measured 75px of "room" inside a 420px window.
+            //
+            // See the cap's only reader, `availableWidthOf`.
             middleware: [
                 offset(10 + offsetY),
-                size({
-                    padding: 10,
-                    apply: ({ elements, availableWidth }) => {
-                        elements.floating.style.width = 'fit-content';
-                        // The room the row has. The toolbar never wraps and never
-                        // scrolls: past this width its entries give way, in the order
-                        // they declared, into the "⋮" menu — see `ToolbarFitter`.
-                        const capped = `${availableWidth}px`;
-                        if (elements.floating.style.maxWidth !== capped) {
-                            elements.floating.style.maxWidth = capped;
-                            onAvailableWidth?.();
-                        }
-                    },
-                }),
                 isInline ? inline() : undefined,
                 shift(state => ({
                     padding: {
@@ -88,6 +113,20 @@ onAvailableWidth) {
                 // 25/08/2026, third video: the map background's row). Horizontal
                 // placement belongs to `shift`, which slides — it never teleports.
                 flip({ padding: 10, crossAxis: false, flipAlignment: false }),
+                size({
+                    padding: 10,
+                    apply: ({ elements, availableWidth }) => {
+                        elements.floating.style.width = 'fit-content';
+                        // The room the row has. The toolbar never wraps and never
+                        // scrolls: past this width its entries give way, in the order
+                        // they declared, into the "⋮" menu — see `ToolbarFitter`.
+                        const capped = `${Math.max(availableWidth, MIN_TOOLBAR_WIDTH)}px`;
+                        if (elements.floating.style.maxWidth !== capped) {
+                            elements.floating.style.maxWidth = capped;
+                            onAvailableWidth?.();
+                        }
+                    },
+                }),
                 hide(),
             ],
         };
@@ -599,6 +638,10 @@ const MAX_FIT_ROUNDS = 3;
  * keeps its natural width under it, while an `inner` toolbar is pinned to the
  * exact width of the block it sits on. Anything else — a row nothing has
  * positioned yet — has all the room in the world and collapses nothing.
+ *
+ * The cap is the clipping box less its padding, never the row's own width: see
+ * the middleware order in {@link autoUpdatePosition}. It is floored at
+ * {@link MIN_TOOLBAR_WIDTH}.
  */
 function availableWidthOf(toolbar) {
     const max = Number.parseFloat(toolbar.style.maxWidth);

package/dist/_pkgs/data-view/core/detail/field.js

@@ -129,7 +129,8 @@ let RecordField = (() => {
     }
 
     .field-content.is-editing {
-      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
     }
 
     .field-content.is-focus {

package/dist/_pkgs/data-view/core/filter/literal/define.js

@@ -83,7 +83,9 @@ export const allLiteralConfig = [
                     items: type.element.data?.map(tag => {
                         const selected = set.has(tag.id);
                         const prefix = selected
-                            ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+                            ? CheckBoxCheckSolidIcon({
+                                style: `color:var(--affine-primary-color)`,
+                            })
                             : CheckBoxUnIcon();
                         return menu.action({
                             name: tag.value,

package/dist/_pkgs/data-view/core/group-by/renderer/boolean-group.js

@@ -15,7 +15,7 @@ export class BooleanGroupView extends BaseGroup {
     render() {
         return html ` <div class="data-view-group-title-boolean-view">
       ${this.value
-            ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+            ? CheckBoxCheckSolidIcon({ style: `color:var(--affine-primary-color)` })
             : CheckBoxUnIcon()}
     </div>`;
     }

package/dist/_pkgs/data-view/property-presets/checkbox/cell-renderer.js

@@ -40,6 +40,12 @@ import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
 import { checkboxPropertyModelConfig } from './define.js';
+/**
+ * The chrome accent, reached through its token rather than written as a hex:
+ * the six-dot burst is chrome, so it has to follow the host's theme (DESIGN.md,
+ * The Borrowed Blue Rule).
+ */
+const ACCENT = 'var(--affine-primary-color)';
 const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {}) => {
     const sparkingEl = document.createElement('div');
     sparkingEl.classList.add('affine-check-animation');
@@ -56,7 +62,7 @@ const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {}) => {
     refElement.append(sparkingEl);
     await sparkingEl.animate([
         {
-            boxShadow: '0 -18px 0 -8px #1e96eb, 16px -8px 0 -8px #1e96eb, 16px 8px 0 -8px #1e96eb, 0 18px 0 -8px #1e96eb, -16px 8px 0 -8px #1e96eb, -16px -8px 0 -8px #1e96eb',
+            boxShadow: `0 -18px 0 -8px ${ACCENT}, 16px -8px 0 -8px ${ACCENT}, 16px 8px 0 -8px ${ACCENT}, 0 18px 0 -8px ${ACCENT}, -16px 8px 0 -8px ${ACCENT}, -16px -8px 0 -8px ${ACCENT}`,
         },
     ], { duration: 240, easing: 'ease', fill: 'forwards' }).finished;
     await sparkingEl.animate([
@@ -120,7 +126,7 @@ let CheckboxCell = (() => {
         render() {
             const checked = this.value ?? false;
             const icon = checked
-                ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+                ? CheckBoxCheckSolidIcon({ style: `color:var(--affine-primary-color)` })
                 : CheckBoxUnIcon();
             return html ` <div class="affine-database-checkbox-container">
       <div