@formicoidea/labre-core 0.42.0 → 0.45.0

package/dist/_pkgs/affine-components/filterable-list/index.js

@@ -126,19 +126,25 @@ let FilterableListComponent = (() => {
             });
         }
         _filterItems() {
-            const searchFilter = !this._filterText
-                ? this.options.items
-                : this.options.items.filter(item => item.name.startsWith(this._filterText.toLowerCase()) ||
-                    item.aliases?.some(alias => alias.startsWith(this._filterText.toLowerCase())));
-            return searchFilter.sort((a, b) => {
-                const isActiveA = this.options.active?.(a);
-                const isActiveB = this.options.active?.(b);
+            const query = this._filterText.toLowerCase();
+            // A copy: the caller's array is its own state (the language button keeps
+            // its most-recently-used order in it), so sorting must not reorder it.
+            const ranked = this.options.items
+                .map(item => ({ item, rank: matchRank(item, query) }))
+                .filter(entry => entry.rank !== -1);
+            return ranked
+                .sort((a, b) => {
+                const isActiveA = this.options.active?.(a.item);
+                const isActiveB = this.options.active?.(b.item);
                 if (isActiveA && !isActiveB)
                     return -1;
                 if (!isActiveA && isActiveB)
                     return 1;
-                return this.listFilter?.(a, b) ?? 0;
-            });
+                if (a.rank !== b.rank)
+                    return a.rank - b.rank;
+                return this.listFilter?.(a.item, b.item) ?? 0;
+            })
+                .map(entry => entry.item);
         }
         _scrollFocusedItemIntoView() {
             this.updateComplete
@@ -256,6 +262,21 @@ let FilterableListComponent = (() => {
     };
 })();
 export { FilterableListComponent };
+/**
+ * Prefix match on both sides lowercased: 0 for a name or alias hit, 1 for a
+ * hit on the display label only (it sorts after an id hit), -1 for no match.
+ * An empty query matches everything at rank 0.
+ */
+function matchRank(item, query) {
+    if (!query)
+        return 0;
+    const hits = (value) => !!value && value.toLowerCase().startsWith(query);
+    if (hits(item.name) || item.aliases?.some(hits))
+        return 0;
+    if (hits(item.label))
+        return 1;
+    return -1;
+}
 export function showPopFilterableList({ options, filter, abortController = new AbortController(), referenceElement, container, maxHeight = 440, portalStyles, }) {
     const portalPadding = {
         top: PAGE_HEADER_HEIGHT + 12,

package/dist/_pkgs/affine-components/icons/ai.js

@@ -9,11 +9,11 @@ export const AIStarIcon = html `<svg
   <g clip-path="url(#clip0_7444_26654)">
     <path
       d="M9.40033 4.57585C9.36627 4.27519 9.11207 4.04792 8.80948 4.04761C8.50689 4.0473 8.25223 4.27405 8.21756 4.57465C7.99211 6.52928 7.40771 7.90373 6.46492 8.84651C5.52213 9.7893 4.14769 10.3737 2.19305 10.5991C1.89246 10.6338 1.66571 10.8885 1.66602 11.1911C1.66633 11.4937 1.8936 11.7479 2.19426 11.7819C4.11659 11.9997 5.52025 12.5838 6.48542 13.5315C7.44696 14.4757 8.04356 15.8498 8.21597 17.7908C8.24327 18.0981 8.50096 18.3337 8.80954 18.3333C9.11813 18.333 9.37528 18.0969 9.40189 17.7894C9.56714 15.8804 10.1632 14.4774 11.1295 13.5111C12.0958 12.5448 13.4988 11.9487 15.4078 11.7835C15.7153 11.7569 15.9514 11.4997 15.9517 11.1911C15.9521 10.8825 15.7165 10.6249 15.4092 10.5976C13.4683 10.4252 12.0941 9.82855 11.15 8.86701C10.2022 7.90184 9.61807 6.49818 9.40033 4.57585Z"
-      fill="#1E96EB"
+      fill="var(--affine-primary-color)"
     />
     <path
       d="M15.7849 1.87208C15.7717 1.75516 15.6728 1.66678 15.5551 1.66666C15.4375 1.66654 15.3384 1.75472 15.3249 1.87162C15.2373 2.63175 15.01 3.16626 14.6434 3.5329C14.2767 3.89954 13.7422 4.1268 12.9821 4.21448C12.8652 4.22796 12.777 4.327 12.7771 4.44467C12.7772 4.56234 12.8656 4.6612 12.9826 4.67445C13.7301 4.75912 14.276 4.9863 14.6513 5.35485C15.0253 5.72203 15.2573 6.25642 15.3243 7.01121C15.335 7.13075 15.4352 7.22235 15.5552 7.22221C15.6752 7.22208 15.7752 7.13025 15.7855 7.01069C15.8498 6.26831 16.0816 5.72268 16.4574 5.3469C16.8332 4.97111 17.3788 4.73932 18.1212 4.67505C18.2407 4.6647 18.3325 4.5647 18.3327 4.44469C18.3328 4.32469 18.2412 4.22448 18.1217 4.21386C17.3669 4.14681 16.8325 3.9148 16.4653 3.54087C16.0968 3.16552 15.8696 2.61966 15.7849 1.87208Z"
-      fill="#1E96EB"
+      fill="var(--affine-primary-color)"
     />
   </g>
   <defs>
@@ -46,7 +46,7 @@ export const AIStopIcon = html `<svg
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M17.0827 10C17.0827 13.912 13.9114 17.0834 9.99935 17.0834C6.08733 17.0834 2.91602 13.912 2.91602 10C2.91602 6.088 6.08733 2.91669 9.99935 2.91669C13.9114 2.91669 17.0827 6.088 17.0827 10ZM18.3327 10C18.3327 14.6024 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6024 1.66602 10C1.66602 5.39765 5.39698 1.66669 9.99935 1.66669C14.6017 1.66669 18.3327 5.39765 18.3327 10ZM8.33268 6.66669C7.41221 6.66669 6.66602 7.41288 6.66602 8.33335V11.6667C6.66602 12.5872 7.41221 13.3334 8.33268 13.3334H11.666C12.5865 13.3334 13.3327 12.5872 13.3327 11.6667V8.33335C13.3327 7.41288 12.5865 6.66669 11.666 6.66669H8.33268Z"
-      fill="#1E96EB"
+      fill="var(--affine-primary-color)"
     />
   </g>
   <defs>

package/dist/_pkgs/affine-components/icons/index.d.ts

@@ -1,6 +1,5 @@
 export * from './ai.js';
 export * from './file-icons.js';
-export * from './file-icons-rc.js';
 export * from './import-export.js';
 export * from './list.js';
 export * from './loading.js';

package/dist/_pkgs/affine-components/icons/index.js

@@ -1,6 +1,5 @@
 export * from './ai.js';
 export * from './file-icons.js';
-export * from './file-icons-rc.js';
 export * from './import-export.js';
 export * from './list.js';
 export * from './loading.js';

package/dist/_pkgs/affine-components/icons/list.js

@@ -1,3 +1,9 @@
+/**
+ * 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)';
 export const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {}) => {
     const sparkingEl = document.createElement('div');
     sparkingEl.classList.add('affine-check-animation');
@@ -14,7 +20,7 @@ export 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([

package/dist/_pkgs/affine-components/icons/text.d.ts

@@ -29,6 +29,7 @@ export declare const DividerIcon: import("lit-html").TemplateResult<1>;
 export declare const BoldIcon: import("lit-html").TemplateResult<1>;
 export declare const ItalicIcon: import("lit-html").TemplateResult<1>;
 export declare const UnderlineIcon: import("lit-html").TemplateResult<1>;
+export declare const OverlineIcon: import("lit-html").TemplateResult<1>;
 export declare const StrikethroughIcon: import("lit-html").TemplateResult<1>;
 export declare const CodeIcon: import("lit-html").TemplateResult<1>;
 export declare const LinkIcon: import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-components/icons/text.js

@@ -97,6 +97,17 @@ export const UnderlineIcon = icons.UnderLineIcon({
     width: '20',
     height: '20',
 });
+/**
+ * The icon set ships no overline, so it is drawn here: the underline icon's
+ * own letter and rule, the rule moved above the letter (ADR 0030).
+ */
+const OverlineSVG = svg `<path
+  fill="currentColor"
+  fill-rule="evenodd"
+  clip-rule="evenodd"
+  d="M4.458 3.064a.808.808 0 0 0 0 1.616h15.084a.808.808 0 1 0 0-1.616zM7.744 7.968a.808.808 0 1 0-1.616 0v7.003a5.656 5.656 0 1 0 11.313 0V7.968a.808.808 0 1 0-1.616 0v7.003a4.04 4.04 0 1 1-8.08 0z"
+/>`;
+export const OverlineIcon = icon(OverlineSVG, 20);
 export const StrikethroughIcon = icons.StrikeThroughIcon({
     width: '20',
     height: '20',

package/dist/_pkgs/affine-components/size-dropdown-menu/dropdown-menu.js

@@ -218,9 +218,14 @@ let SizeDropdownMenu = (() => {
             const { sizes, format, type, icon, resolvedLabel: label, size$: { value: size }, } = this;
             const isCheckType = type === 'check';
             const placeholder = format?.(Math.trunc(size)) ?? Math.trunc(size);
+            // `class` is STATIC. It used to be `${label.toLowerCase()}-menu`, which
+            // made a CSS class depend on the host's language the day `label` joined
+            // the translation seam (#390) — `échelle-menu` in French. Nothing in the
+            // repo selects it (checked across the styles and both test suites): it is
+            // the stable identifier it was always meant to be.
             return html `
       <editor-menu-button
-        class="${`${label.toLowerCase()}-menu`}"
+        class="size-menu"
         .contentPadding="${'8px'}"
         .button=${html `
           <editor-icon-button

package/dist/_pkgs/affine-components/toolbar/index.d.ts

@@ -1,7 +1,7 @@
 export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
-export { EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
+export { EDITOR_MENU_TOGGLE, EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
 export { MenuContext } from './menu-context.js';
 export { type PickerMenu, type PickerMenuItem, renderCurrentPickerItemWith, renderPickerMenu, renderPickerMenuItems, } from './picker-menu.js';
 export { EditorToolbarSeparator } from './separator.js';

package/dist/_pkgs/affine-components/toolbar/index.js

@@ -6,7 +6,7 @@ import { Tooltip } from './tooltip.js';
 export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
-export { EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
+export { EDITOR_MENU_TOGGLE, EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
 export { MenuContext } from './menu-context.js';
 export { renderCurrentPickerItemWith, renderPickerMenu, renderPickerMenuItems, } from './picker-menu.js';
 export { EditorToolbarSeparator } from './separator.js';

package/dist/_pkgs/affine-components/toolbar/menu-button.d.ts

@@ -1,5 +1,12 @@
 import { type ButtonPopperOptions } from '../../affine-shared/utils/index.js';
 import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * A panel in a toolbar opened or closed, announced across shadow boundaries.
+ *
+ * `detail` is whether it is now open, and the deepest element of
+ * `composedPath()` is the button it belongs to.
+ */
+export declare const EDITOR_MENU_TOGGLE = "editor-menu-toggle";
 declare const EditorMenuButton_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EditorMenuButton extends EditorMenuButton_base {
     static styles: import("lit").CSSResult;

package/dist/_pkgs/affine-components/toolbar/menu-button.js

@@ -37,6 +37,13 @@ import { createButtonPopper, } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement, } from 'lit';
 import { property, query } from 'lit/decorators.js';
+/**
+ * A panel in a toolbar opened or closed, announced across shadow boundaries.
+ *
+ * `detail` is whether it is now open, and the deepest element of
+ * `composedPath()` is the button it belongs to.
+ */
+export const EDITOR_MENU_TOGGLE = 'editor-menu-toggle';
 let EditorMenuButton = (() => {
     let _classSuper = WithDisposable(LitElement);
     let __content_decorators;
@@ -97,6 +104,20 @@ let EditorMenuButton = (() => {
                     else {
                         delete this.dataset.open;
                     }
+                    // Said again, out loud, for whoever is holding this button — the row
+                    // it sits on has to know, and `data-open` alone cannot tell it: a
+                    // picker keeps its menu button inside its OWN shadow root, where no
+                    // `querySelector` and no `MutationObserver` of the row's reaches. This
+                    // one bubbles AND is composed, so it crosses every boundary between
+                    // here and the row. See `EditorToolbar`, which stops clipping while a
+                    // panel is open. The `toggle` event above is deliberately left as it
+                    // is: it does not bubble, and things listen for it by that name.
+                    this.dispatchEvent(new CustomEvent(EDITOR_MENU_TOGGLE, {
+                        detail: opened,
+                        bubbles: true,
+                        cancelable: false,
+                        composed: true,
+                    }));
                 },
                 mainAxis: 0,
                 offsetHeight: 6 * 4,
@@ -184,6 +205,15 @@ export class EditorMenuContent extends LitElement {
     .content-wrapper {
       overscroll-behavior: contain;
       overflow-y: auto;
+      /* Spelled out because CSS Overflow computes a visible axis to auto as
+       * soon as the other one is not visible: the overflow-y above would
+       * silently make this popup scrollable SIDEWAYS too. Anything animated by
+       * a positive translateX inside it — the palette carousel's incoming page,
+       * see color-picker/palette-carousel.ts — then grows the scrollable
+       * region for the length of the animation and flashes a horizontal
+       * scrollbar (issue #392). Not clip: combined with overflow-y: auto the
+       * spec falls it back to hidden anyway. */
+      overflow-x: hidden;
       padding: var(--content-padding, 0 6px);
     }
 

package/dist/_pkgs/affine-components/toolbar/picker-menu.d.ts

@@ -38,6 +38,21 @@ export type PickerMenu<T> = {
     label: string;
     icon?: TemplateResult;
     tooltip?: string;
+    /**
+     * The accessible name of the MENU shell (`aria-label` on
+     * `editor-menu-button`), which the caller supplies whole (#390).
+     *
+     * It used to be sewn together here as `` `${label.toLowerCase()}-menu` ``.
+     * That was a stable identifier while {@link label} was an English literal;
+     * once the caller started handing over a TRANSLATED label it became half a
+     * sentence in each language ("changer le type de forme-menu"). A menu's
+     * accessible name is its own wording, never a composition — the precedent
+     * is `ROOT_ALIGNMENT_MENU_ARIA` in `blocks/root`.
+     *
+     * Left out, the name is composed from {@link label} as before, so a caller
+     * that still passes an English literal is unaffected.
+     */
+    menuAria?: string;
     items: PickerMenuItem<T>[];
     currentValue: T;
     onPick: (value: T) => void;
@@ -51,5 +66,5 @@ export type PickerMenu<T> = {
 };
 /** The field of the item that currently matches — its icon, usually. */
 export declare function renderCurrentPickerItemWith<T, F extends keyof PickerMenuItem<T>>(items: PickerMenuItem<T>[], currentValue: T, field: F): PickerMenuItem<T>[F] | undefined;
-export declare function renderPickerMenu<T>({ label, tooltip, icon, items, currentValue, onPick, testId, }: PickerMenu<T>): TemplateResult<1>;
+export declare function renderPickerMenu<T>({ label, tooltip, menuAria, icon, items, currentValue, onPick, testId, }: PickerMenu<T>): TemplateResult<1>;
 export declare function renderPickerMenuItems<T>(items: PickerMenuItem<T>[], currentValue: T, onPick: (value: T) => void, testId?: string): unknown;

package/dist/_pkgs/affine-components/toolbar/picker-menu.js

@@ -6,11 +6,11 @@ import { EditorChevronDown } from './chevron-down.js';
 export function renderCurrentPickerItemWith(items, currentValue, field) {
     return items.find(({ value }) => value === currentValue)?.[field];
 }
-export function renderPickerMenu({ label, tooltip, icon, items, currentValue, onPick, testId, }) {
+export function renderPickerMenu({ label, tooltip, menuAria, icon, items, currentValue, onPick, testId, }) {
     return html `
     <editor-menu-button
       data-testid=${ifDefined(testId)}
-      aria-label="${`${label.toLowerCase()}-menu`}"
+      aria-label="${menuAria ?? `${label.toLowerCase()}-menu`}"
       .button=${html `
         <editor-icon-button
           data-testid=${ifDefined(testId ? `${testId}-button` : undefined)}

package/dist/_pkgs/affine-components/toolbar/toolbar.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 declare const EditorToolbar_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EditorToolbar extends EditorToolbar_base {
+    #private;
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-components/toolbar/toolbar.js

@@ -2,6 +2,7 @@ import { panelBaseStyle } from '../../affine-shared/styles/index.js';
 import { stopPropagation } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement } from 'lit';
+import { EDITOR_MENU_TOGGLE } from './menu-button.js';
 export class EditorToolbar extends WithDisposable(LitElement) {
     static { this.styles = css `
     ${panelBaseStyle(':host')}
@@ -13,6 +14,27 @@ export class EditorToolbar extends WithDisposable(LitElement) {
       height: 36px;
       box-sizing: content-box;
       flex-wrap: nowrap;
+      /* And never outside its own background. The row's width is a max-width
+         the positioner writes; entries keep their natural width (below), so a
+         row that has nothing left to give up would otherwise paint its last
+         icons over the document, past the border and the shadow — which is
+         what a 420px window used to show.
+
+         Clipped on the X axis alone: overflow-x hidden would make the row a
+         scroll container on BOTH axes (a visible paired with a hidden computes
+         to auto) and swallow the dropdown panels, which are positioned inside
+         the row and hang above and below it. */
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
+    /* ...except while one of those panels is open. A clipping box is also what
+       floating-ui fits a panel into, so left in place the rule above would
+       squeeze a 176px menu into the width of the row that opened it — or, for
+       a dropdown at one end of the row, cut half of it off. See
+       syncOpenMenus below, which is what raises this attribute. */
+    :host([data-menu-open]) {
+      overflow: visible;
     }
 
     :host([data-without-bg]) {
@@ -35,6 +57,38 @@ export class EditorToolbar extends WithDisposable(LitElement) {
       fill: currentColor;
     }
   `; }
+    /** The panels open in this row right now, whatever opened them. */
+    #openMenus = new Set();
+    /**
+     * Says, on the row itself, whether one of its panels is open.
+     *
+     * Why an attribute at all: the row cannot ask the question in CSS. `:host()`
+     * takes a COMPOUND selector and `:has()` is not one, so
+     * `:host(:has([data-open]))` is not a rule browsers honour (Chromium
+     * 2026-09: it matches from the document, never from inside the shadow root).
+     *
+     * Why not a `querySelector` for `data-open`, which the buttons do raise:
+     * because it answers only for the buttons the row holds DIRECTLY. A colour
+     * picker keeps its menu button inside its own shadow root, where neither a
+     * `querySelector` nor a `MutationObserver` of this row can see it — and that
+     * is the row whose panel the clip was cutting in half
+     * (`framework-palette-carousel.spec.ts`). {@link EDITOR_MENU_TOGGLE} is
+     * composed, so it crosses every boundary, and it is raised before the panel
+     * is ever positioned.
+     *
+     * A panel whose button is taken off the row by a re-render never says it
+     * closed, so the set is swept of anything no longer in a document.
+     */
+    #syncOpenMenus() {
+        for (const menu of this.#openMenus) {
+            if (!menu.isConnected)
+                this.#openMenus.delete(menu);
+        }
+        if (this.#openMenus.size > 0)
+            this.dataset.menuOpen = 'true';
+        else
+            delete this.dataset.menuOpen;
+    }
     connectedCallback() {
         super.connectedCallback();
         this._disposables.addFromEvent(this, 'pointerdown', (e) => {
@@ -44,6 +98,19 @@ export class EditorToolbar extends WithDisposable(LitElement) {
         this._disposables.addFromEvent(this, 'wheel', stopPropagation, {
             passive: false,
         });
+        this._disposables.addFromEvent(this, EDITOR_MENU_TOGGLE, (e) => {
+            // The deepest element of the path, not `target`: a composed event that
+            // crosses a shadow boundary is retargeted to the host it came out of,
+            // and one host may hold more than one panel.
+            const menu = e.composedPath()[0];
+            if (!(menu instanceof Element))
+                return;
+            if (e.detail)
+                this.#openMenus.add(menu);
+            else
+                this.#openMenus.delete(menu);
+            this.#syncOpenMenus();
+        });
     }
     render() {
         return html `<slot></slot>`;

package/dist/_pkgs/affine-fragment-adapter-panel/adapter-panel.d.ts

@@ -1,5 +1,5 @@
-import type { BlockStdScope } from '../../std/index.js';
-import type { Store, TransformerMiddleware } from '../../store/index.js';
+import type { BlockStdScope } from '../std/index.js';
+import type { Store, TransformerMiddleware } from '../store/index.js';
 import { LitElement, type PropertyValues } from 'lit';
 export declare const AFFINE_ADAPTER_PANEL = "affine-adapter-panel";
 declare const AdapterPanel_base: typeof LitElement & import("../global/utils/types.js").Constructor<import("../global/lit/with-disposable.js").DisposableClass>;

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

@@ -138,7 +138,7 @@ let FrameCardTitleEditor = (() => {
                 background: 'var(--affine-background-primary-color)',
                 border: '1px solid var(--affine-primary-color)',
                 color: 'var(--affine-text-primary-color)',
-                boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30)',
+                boxShadow: '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)',
                 zIndex: '1',
                 display: 'block',
             });

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

@@ -32,6 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { panelDragStarted } from '../../affine-shared/styles/index.js';
 import { on, once } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement } from '../../std/index.js';
@@ -69,7 +70,7 @@ const styles = css `
   }
 
   .frame-card-container.selected .frame-card-body {
-    border: 2px solid var(--light-brand-color, #1e96eb);
+    border: 2px solid var(--affine-primary-color);
   }
 
   .frame-card-container.dragging {
@@ -174,8 +175,7 @@ let FrameCard = (() => {
                 return;
             const { clientX: startX, clientY: startY } = e;
             const disposeDragStart = on(this.ownerDocument, 'mousemove', e => {
-                if (Math.abs(startX - e.clientX) < 5 &&
-                    Math.abs(startY - e.clientY) < 5) {
+                if (!panelDragStarted({ x: startX, y: startY }, { x: e.clientX, y: e.clientY })) {
                     return;
                 }
                 if (this.status !== 'selected') {

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

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

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

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

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

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

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

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

package/dist/_pkgs/affine-gfx-brush/toolbar/components/eraser/icons.js

@@ -45,7 +45,7 @@ export const EdgelessEraserLightIcon = html `<svg
   />
   <path
     d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
-    fill="#1E96EB"
+    fill="var(--affine-primary-color)"
   />
   <path
     d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"

package/dist/_pkgs/affine-gfx-connector/direction/direction-reveal.d.ts

@@ -41,11 +41,20 @@ import { type TypedEdge } from './typed-edge.js';
  * a `@local()` field. The reveal is session state and leaves with the pointer.
  */
 /**
- * The one colour the reveal is drawn in — the house primary, i.e. the colour of
+ * The one colour the reveal is drawn in — the chrome accent, i.e. the colour of
  * an affordance rather than of ink. Deliberately NOT the framework's palette:
  * the label is the tool talking about the drawing, not part of the drawing.
+ *
+ * A TOKEN, not a hex: the chip is rendered in the DOM (`direction-widget.ts`),
+ * so it follows whatever the host sets `--affine-primary-color` to. The accent
+ * is AFFiNE's and due to be replaced — DESIGN.md, The Borrowed Blue Rule.
+ *
+ * It is the colour of EVERY typed edge of every framework: no role declares a
+ * `chipColor` any more (PO recette of 23/09/2026, after one that did produced
+ * two blues on one map). `affine/all/src/__tests__/direction-chip-accent.unit.spec.ts`
+ * reads the mounted vocabularies and keeps it that way.
  */
-export declare const EDGE_DIRECTION_COLOR = "#1e96eb";
+export declare const EDGE_DIRECTION_COLOR = "var(--affine-primary-color)";
 /**
  * Where the label sits on a typed edge, and how it is turned.
  *

package/dist/_pkgs/affine-gfx-connector/direction/direction-reveal.js

@@ -40,11 +40,20 @@ import { asTypedEdge, edgeIsBound, roleVocabularies, } from './typed-edge.js';
  * a `@local()` field. The reveal is session state and leaves with the pointer.
  */
 /**
- * The one colour the reveal is drawn in — the house primary, i.e. the colour of
+ * The one colour the reveal is drawn in — the chrome accent, i.e. the colour of
  * an affordance rather than of ink. Deliberately NOT the framework's palette:
  * the label is the tool talking about the drawing, not part of the drawing.
+ *
+ * A TOKEN, not a hex: the chip is rendered in the DOM (`direction-widget.ts`),
+ * so it follows whatever the host sets `--affine-primary-color` to. The accent
+ * is AFFiNE's and due to be replaced — DESIGN.md, The Borrowed Blue Rule.
+ *
+ * It is the colour of EVERY typed edge of every framework: no role declares a
+ * `chipColor` any more (PO recette of 23/09/2026, after one that did produced
+ * two blues on one map). `affine/all/src/__tests__/direction-chip-accent.unit.spec.ts`
+ * reads the mounted vocabularies and keeps it that way.
  */
-export const EDGE_DIRECTION_COLOR = '#1e96eb';
+export const EDGE_DIRECTION_COLOR = 'var(--affine-primary-color)';
 const pathOf = (model) => {
     const path = model.absolutePath;
     return Array.isArray(path) && path.length >= 2 ? path : null;

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

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