@formicoidea/labre-core 0.42.0 → 0.45.0

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

@@ -11,5 +11,63 @@ 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;
+/** The pane's title, and the toolbar button's tooltip. */
+export declare const SELECTION_PANE_TITLE: ChromeWording;
+/**
+ * The catalogue's own "Close": the same word on the same kind of side panel,
+ * so one key (L7 dedupe: one chrome word, one key). The manifest already
+ * declares it for the catalogue, so it is not listed again below.
+ */
+export declare const SELECTION_PANE_CLOSE: ChromeWording;
+/** What the pane says on a canvas with nothing on it, or nothing filtered. */
+export declare const SELECTION_PANE_EMPTY: ChromeWording;
+export declare const SELECTION_PANE_FILTER: ChromeWording;
+/** The filter entry that shows every element again. */
+export declare const SELECTION_PANE_FILTER_ALL: ChromeWording;
+/** A frame offered by the filter; `{{name}}` is the frame's own title. */
+export declare const SELECTION_PANE_FILTER_FRAME: ChromeWording;
+/**
+ * Under a layer whose members the frame filter all leaves out: how many rows
+ * it holds. `{{count}}` is the number; the host pluralises.
+ */
+export declare const SELECTION_PANE_LAYER_FILTERED: ChromeWording;
+/** The eye of a visible row: hide it for this viewer only (ADR 0031 §8). */
+export declare const SELECTION_PANE_HIDE: ChromeWording;
+/** The eye of a row this viewer hid: show it again. */
+export declare const SELECTION_PANE_SHOW: ChromeWording;
+/**
+ * A row's menu entry that hides it for EVERYONE (ADR 0031 §7): written to
+ * the document, painted with the theme's warning tokens.
+ */
+export declare const SELECTION_PANE_HIDE_FOR_EVERYONE: ChromeWording;
+/** The same entry on a row hidden for everyone: show it to everyone again. */
+export declare const SELECTION_PANE_SHOW_FOR_EVERYONE: ChromeWording;
+/** The pane's head button that adds a user layer (ADR 0031 §2). */
+export declare const SELECTION_PANE_NEW_LAYER: ChromeWording;
+/** The hint on the active layer's row: where new elements land. */
+export declare const SELECTION_PANE_ACTIVE_LAYER: ChromeWording;
+/**
+ * A layer row's menu entry that deletes the layer WITH its members, in one
+ * undo step (ADR 0031 §10). Absent on the default layer.
+ */
+export declare const SELECTION_PANE_DELETE_LAYER: ChromeWording;
+/** The menu of a row, opened by a right click or its "more" button. */
+export declare const SELECTION_PANE_ROW_MENU: ChromeWording;
+/** The padlock of a locked row; the unlocked one reads `TOOLBAR_LOCK`. */
+export declare const SELECTION_PANE_UNLOCK: ChromeWording;
+export declare const SELECTION_PANE_EXPAND: ChromeWording;
+export declare const SELECTION_PANE_COLLAPSE: ChromeWording;
+/** One wording per element type and gfx block flavour the library ships. */
+export declare const SELECTION_PANE_TYPE_WORDINGS: Readonly<Record<string, ChromeWording>>;
+/** Every `affine:embed-*` flavour: the iframe embed's own word. */
+export declare const SELECTION_PANE_TYPE_EMBED: ChromeWording;
+/** A kind the library does not ship: a framework's own element type. */
+export declare const SELECTION_PANE_TYPE_ELEMENT: 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

@@ -1,4 +1,4 @@
-import { ICON_BUTTON_COMING_SOON, } from '../affine-shared/services/index.js';
+import { ATTACHMENT_LABEL, ICON_BUTTON_COMING_SOON, IMAGE_LABEL, TOOL_NAME_FRAME, TOOL_NAME_NOTE, } from '../affine-shared/services/index.js';
 /**
  * The generic edgeless toolbar's own wordings — not a specific tool's, the
  * toolbar chrome itself. `STYLE_GENERAL`/`STYLE_SCRIBBLED` (`config/consts.ts`'s
@@ -14,7 +14,177 @@ 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)',
+];
+/* ── Selection pane (ADR 0031) ────────────────────────────────────────── */
+/** The pane's title, and the toolbar button's tooltip. */
+export const SELECTION_PANE_TITLE = [
+    'com.labre.selection-pane.title',
+    'Selection pane',
+];
+/**
+ * The catalogue's own "Close": the same word on the same kind of side panel,
+ * so one key (L7 dedupe: one chrome word, one key). The manifest already
+ * declares it for the catalogue, so it is not listed again below.
+ */
+export const SELECTION_PANE_CLOSE = [
+    'com.labre.catalogue.close',
+    'Close',
+];
+/** What the pane says on a canvas with nothing on it, or nothing filtered. */
+export const SELECTION_PANE_EMPTY = [
+    'com.labre.selection-pane.empty',
+    'Nothing on the canvas',
+];
+export const SELECTION_PANE_FILTER = [
+    'com.labre.selection-pane.filter',
+    'Filter',
+];
+/** The filter entry that shows every element again. */
+export const SELECTION_PANE_FILTER_ALL = [
+    'com.labre.selection-pane.filter.all',
+    'All elements',
+];
+/** A frame offered by the filter; `{{name}}` is the frame's own title. */
+export const SELECTION_PANE_FILTER_FRAME = [
+    'com.labre.selection-pane.filter.frame',
+    'Frame: {{name}}',
+];
+/**
+ * Under a layer whose members the frame filter all leaves out: how many rows
+ * it holds. `{{count}}` is the number; the host pluralises.
+ */
+export const SELECTION_PANE_LAYER_FILTERED = [
+    'com.labre.selection-pane.layer.filtered',
+    '{{count}} hidden by the filter',
+];
+/** The eye of a visible row: hide it for this viewer only (ADR 0031 §8). */
+export const SELECTION_PANE_HIDE = [
+    'com.labre.selection-pane.hide',
+    'Hide for me',
+];
+/** The eye of a row this viewer hid: show it again. */
+export const SELECTION_PANE_SHOW = [
+    'com.labre.selection-pane.show',
+    'Show',
+];
+/**
+ * A row's menu entry that hides it for EVERYONE (ADR 0031 §7): written to
+ * the document, painted with the theme's warning tokens.
+ */
+export const SELECTION_PANE_HIDE_FOR_EVERYONE = [
+    'com.labre.selection-pane.hide-for-everyone',
+    'Hide for everyone',
+];
+/** The same entry on a row hidden for everyone: show it to everyone again. */
+export const SELECTION_PANE_SHOW_FOR_EVERYONE = [
+    'com.labre.selection-pane.show-for-everyone',
+    'Show for everyone',
+];
+/** The pane's head button that adds a user layer (ADR 0031 §2). */
+export const SELECTION_PANE_NEW_LAYER = [
+    'com.labre.selection-pane.new-layer',
+    'New layer',
+];
+/** The hint on the active layer's row: where new elements land. */
+export const SELECTION_PANE_ACTIVE_LAYER = [
+    'com.labre.selection-pane.active-layer',
+    'New elements go into this layer',
+];
+/**
+ * A layer row's menu entry that deletes the layer WITH its members, in one
+ * undo step (ADR 0031 §10). Absent on the default layer.
+ */
+export const SELECTION_PANE_DELETE_LAYER = [
+    'com.labre.selection-pane.delete-layer',
+    'Delete layer',
+];
+/** The menu of a row, opened by a right click or its "more" button. */
+export const SELECTION_PANE_ROW_MENU = [
+    'com.labre.selection-pane.row-menu',
+    'More actions',
+];
+/** The padlock of a locked row; the unlocked one reads `TOOLBAR_LOCK`. */
+export const SELECTION_PANE_UNLOCK = [
+    'com.labre.selection-pane.unlock',
+    'Unlock',
+];
+export const SELECTION_PANE_EXPAND = [
+    'com.labre.selection-pane.expand',
+    'Expand',
+];
+export const SELECTION_PANE_COLLAPSE = [
+    'com.labre.selection-pane.collapse',
+    'Collapse',
+];
+/**
+ * The wording of a row whose element carries no text and no role: its KIND.
+ *
+ * The kinds the pane is the first to name get their own keys below; the
+ * others reuse the word their tool, slash entry or label already declares (L7
+ * dedupe: one chrome word, one key), restated here with the owner's exact
+ * fallback because this package cannot import every owner's table.
+ */
+const SELECTION_PANE_OWN_TYPE_WORDINGS = {
+    shape: ['com.labre.selection-pane.type.shape', 'Shape'],
+    text: ['com.labre.selection-pane.type.text', 'Text'],
+    group: ['com.labre.selection-pane.type.group', 'Group'],
+    brush: ['com.labre.selection-pane.type.brush', 'Drawing'],
+    'affine:bookmark': ['com.labre.selection-pane.type.bookmark', 'Link'],
+    'affine:latex': ['com.labre.selection-pane.type.latex', 'Equation'],
+};
+/** One wording per element type and gfx block flavour the library ships. */
+export const SELECTION_PANE_TYPE_WORDINGS = {
+    ...SELECTION_PANE_OWN_TYPE_WORDINGS,
+    'affine:edgeless-text': SELECTION_PANE_OWN_TYPE_WORDINGS.text,
+    connector: ['com.labre.connector.toolbar.connector', 'Connector'],
+    mindmap: ['com.labre.surface-ref.type.mindmap', 'Mind map'],
+    highlighter: ['com.labre.highlight.label', 'Highlight'],
+    'affine:frame': TOOL_NAME_FRAME,
+    'affine:note': TOOL_NAME_NOTE,
+    'affine:image': IMAGE_LABEL,
+    'affine:attachment': ATTACHMENT_LABEL,
+};
+/** Every `affine:embed-*` flavour: the iframe embed's own word. */
+export const SELECTION_PANE_TYPE_EMBED = [
+    'com.labre.embed.iframe.slash.name',
+    'Embed',
+];
+/** A kind the library does not ship: a framework's own element type. */
+export const SELECTION_PANE_TYPE_ELEMENT = [
+    'com.labre.selection-pane.type.element',
+    'Element',
+];
 /** 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,
+    SELECTION_PANE_TITLE,
+    SELECTION_PANE_EMPTY,
+    SELECTION_PANE_FILTER,
+    SELECTION_PANE_FILTER_ALL,
+    SELECTION_PANE_FILTER_FRAME,
+    SELECTION_PANE_LAYER_FILTERED,
+    SELECTION_PANE_HIDE,
+    SELECTION_PANE_SHOW,
+    SELECTION_PANE_HIDE_FOR_EVERYONE,
+    SELECTION_PANE_SHOW_FOR_EVERYONE,
+    SELECTION_PANE_ROW_MENU,
+    SELECTION_PANE_NEW_LAYER,
+    SELECTION_PANE_ACTIVE_LAYER,
+    SELECTION_PANE_DELETE_LAYER,
+    SELECTION_PANE_UNLOCK,
+    SELECTION_PANE_EXPAND,
+    SELECTION_PANE_COLLAPSE,
+    // Only the kinds this pane names first; the reused words are declared by
+    // their owners.
+    ...Object.values(SELECTION_PANE_OWN_TYPE_WORDINGS),
+    SELECTION_PANE_TYPE_ELEMENT,
 ];

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

@@ -4,6 +4,9 @@ import { edgelessArtefactCatalogueWidget } from './catalogue/artefact-catalogue-
 import { edgelessToolbarWidget } from './edgeless-toolbar.js';
 import { effects } from './effects.js';
 import { ArtefactPlacementTool } from './placement/artefact-placement-tool.js';
+import { selectionPaneDefaultExtension } from './selection-pane/selection-pane-default.js';
+import { selectionPaneQuickTool } from './selection-pane/selection-pane-tool.js';
+import { edgelessSelectionPaneWidget } from './selection-pane/selection-pane-widget.js';
 export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);
@@ -28,6 +31,13 @@ export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
             // chrome driven by whatever commands are registered, so a framework whose
             // flag is off simply never arms it. See `docs/adr/0009`.
             context.register(ArtefactPlacementTool);
+            // The selection pane (ADR 0031), on the catalogue's terms: its panel,
+            // the default implementation of its seam, and its toolbar entry, all
+            // unconditional. A host replaces or switches it off through
+            // `SelectionPaneExtension`; nothing it lists is a flag's business.
+            context.register(edgelessSelectionPaneWidget);
+            context.register(selectionPaneDefaultExtension);
+            context.register(selectionPaneQuickTool);
         }
     }
 }

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-note-slicer/note-slicer.js

@@ -32,7 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { EdgelessLegacySlotIdentifier, getSurfaceComponent, isNoteBlock, } from '../affine-block-surface/index.js';
+import { applyCreationLayer, EdgelessLegacySlotIdentifier, getSurfaceComponent, isNoteBlock, sourceLayerOf, } from '../affine-block-surface/index.js';
 import { DEFAULT_NOTE_HEIGHT, } from '../affine-model/index.js';
 import { EDGELESS_BLOCK_CHILD_PADDING } from '../affine-shared/consts/index.js';
 import { TelemetryProvider } from '../affine-shared/services/index.js';
@@ -192,13 +192,17 @@ let NoteSlicer = (() => {
             const [x, , width] = deserializeXYWH(xywh);
             const sliceVerticalPos = this._divingLinePositions[this._activeSlicerIndex].y;
             const newY = this.gfx.viewport.toModelCoord(x, sliceVerticalPos)[1];
-            const newNoteId = this.store.addBlock('affine:note', {
+            const props = {
                 background,
                 displayMode,
                 xywh: serializeXYWH(x, newY + NEW_NOTE_GAP, width, DEFAULT_NOTE_HEIGHT),
                 index: originalIndex + 1,
                 edgeless: restOfEdgeless,
-            }, doc.root?.id, originalNoteIndex ? originalNoteIndex + 1 : undefined);
+                // The split-off half stays in its note's layer (ADR 0031 §6).
+                layer: sourceLayerOf(this._anchorNote),
+            };
+            applyCreationLayer(this.std, props);
+            const newNoteId = this.store.addBlock('affine:note', props, doc.root?.id, originalNoteIndex ? originalNoteIndex + 1 : undefined);
             doc.moveBlocks(resetBlocks, doc.getModelById(newNoteId));
             this._activeSlicerIndex = 0;
             this._selection.set({

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

package/dist/_pkgs/data-view/view-presets/kanban/pc/cell.js

@@ -156,7 +156,7 @@ let KanbanCell = (() => {
                 ? '1px solid var(--affine-primary-color)'
                 : '';
             this.style.boxShadow = this.isEditing$.value
-                ? '0px 0px 0px 2px rgba(30, 150, 235, 0.30)'
+                ? '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)'
                 : '';
             return html ` ${this.renderIcon()}
     ${renderUniLit(view, props, {

package/dist/_pkgs/data-view/view-presets/kanban/pc/controller/drag.js

@@ -172,7 +172,8 @@ const createDropPreview = () => {
     div.style.height = '2px';
     div.style.borderRadius = '1px';
     div.style.backgroundColor = 'var(--affine-primary-color)';
-    div.style.boxShadow = '0px 0px 8px 0px rgba(30, 150, 235, 0.35)';
+    div.style.boxShadow =
+        '0px 0px 8px 0px color-mix(in srgb, var(--affine-primary-color) 35%, transparent)';
     return {
         display(group, self, card) {
             const target = card ?? group.querySelector('.add-card');

package/dist/_pkgs/data-view/view-presets/table/pc/controller/drag.js

@@ -156,7 +156,8 @@ const createDropPreview = () => {
     div.style.height = '2px';
     div.style.borderRadius = '1px';
     div.style.backgroundColor = 'var(--affine-primary-color)';
-    div.style.boxShadow = '0px 0px 8px 0px rgba(30, 150, 235, 0.35)';
+    div.style.boxShadow =
+        '0px 0px 8px 0px color-mix(in srgb, var(--affine-primary-color) 35%, transparent)';
     return {
         display(x, y, width) {
             document.body.append(div);

package/dist/_pkgs/data-view/view-presets/table/pc/controller/selection.js

@@ -967,7 +967,7 @@ let SelectionElement = (() => {
                 ? 'dashed'
                 : 'solid';
             div.style.boxShadow = isEditing
-                ? '0px 0px 0px 2px rgba(30, 150, 235, 0.30)'
+                ? '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)'
                 : 'unset';
             div.style.display = 'block';
             dragToFill.style.left = `${x + w}px`;

package/dist/_pkgs/data-view/view-presets/table/pc/header/vertical-indicator.js

@@ -101,7 +101,8 @@ let TableVerticalIndicator = (() => {
     }
 
     .with-shadow.vertical-indicator::after {
-      box-shadow: 0px 0px 8px 0px rgba(30, 150, 235, 0.35);
+      box-shadow: 0px 0px 8px 0px
+        color-mix(in srgb, var(--affine-primary-color) 35%, transparent);
     }
   `; }
         render() {

package/dist/_pkgs/data-view/view-presets/table/pc/row/row-select-checkbox.js

@@ -122,7 +122,9 @@ let RowSelectCheckbox = (() => {
             return html `
       <div class="${classString}">
         ${this.isSelected$.value
-                ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+                ? CheckBoxCheckSolidIcon({
+                    style: `color:var(--affine-primary-color)`,
+                })
                 : CheckBoxUnIcon()}
       </div>
     `;

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/drag.js

@@ -177,7 +177,8 @@ const createDropPreview = () => {
     div.style.height = '2px';
     div.style.borderRadius = '1px';
     div.style.backgroundColor = 'var(--affine-primary-color)';
-    div.style.boxShadow = '0px 0px 8px 0px rgba(30, 150, 235, 0.35)';
+    div.style.boxShadow =
+        '0px 0px 8px 0px color-mix(in srgb, var(--affine-primary-color) 35%, transparent)';
     return {
         display(x, y, width) {
             document.body.append(div);