@formicoidea/labre-core 0.31.0 → 0.33.0

package/dist/_pkgs/affine-components/open-doc-dropdown-menu/dropdown-menu.d.ts

@@ -17,6 +17,7 @@ export declare class OpenDocDropdownMenu extends OpenDocDropdownMenu_base {
         when?: ((cx: ToolbarContext) => boolean) | boolean;
         active?: ((cx: ToolbarContext) => boolean) | boolean;
         placement?: import("../../affine-shared/services/index.js").ActionPlacement;
+        priority?: number;
     } & {
         label?: string;
         showLabel?: boolean;

package/dist/_pkgs/affine-components/peek/peekable.js

@@ -1,7 +1,7 @@
 import { NoteBlockModel } from '../../affine-model/index.js';
 import { DocModeProvider } from '../../affine-shared/services/index.js';
 import { isInsideEdgelessEditor, matchModels, } from '../../affine-shared/utils/index.js';
-import { GfxBlockElementModel, GfxControllerIdentifier, } from '../../std/gfx/index.js';
+import { GfxBlockElementModel, GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { PeekableController } from './controller.js';
 const symbol = Symbol('peekable');
 export const isPeekable = (e) => {

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

@@ -17,7 +17,7 @@ import { LitElement, type TemplateResult } from 'lit';
  */
 export declare class Portal extends LitElement {
     private _portalRoot;
-    createRenderRoot(): ShadowRoot | HTMLDivElement;
+    createRenderRoot(): HTMLDivElement | ShadowRoot;
     disconnectedCallback(): void;
     render(): TemplateResult | undefined;
     accessor container: HTMLElement;

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

@@ -3,6 +3,7 @@ export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
 export { 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';
 export { darkToolbarStyles, lightToolbarStyles } from './styles.js';
 export { EditorToolbar } from './toolbar.js';

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

@@ -8,6 +8,7 @@ export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
 export { 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';
 export { darkToolbarStyles, lightToolbarStyles } from './styles.js';
 export { EditorToolbar } from './toolbar.js';

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

@@ -32,7 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { panelBaseStyle, scrollbarStyle, } from '../../affine-shared/styles/index.js';
+import { panelBaseStyle, scrollbarStyle } from '../../affine-shared/styles/index.js';
 import { createButtonPopper, } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement, } from 'lit';
@@ -235,6 +235,7 @@ export class EditorMenuAction extends LitElement {
       color: var(--affine-text-primary-color);
       font-weight: 400;
       min-height: 30px; // 22 + 8
+      user-select: none;
     }
 
     :host(:hover),

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

@@ -0,0 +1,55 @@
+import { type TemplateResult } from 'lit';
+/**
+ * The **one-of-many picker** every toolbar in this editor uses: a chevron
+ * button that opens a row of icons, one of which is lit because it is what the
+ * selection currently is.
+ *
+ * "Switch shape type" is the one everybody knows; the framework morph dropdown
+ * is the same object. It lives HERE, in the shared component package, and not
+ * where it was first written (`@labre/affine-widget-edgeless-toolbar`) for a
+ * dependency reason that is not going away: that widget package depends on
+ * `@labre/affine-block-surface`, so nothing in the surface package — which is
+ * where the generic, framework-parameterized toolbar modules live — can import
+ * from it without closing a cycle. This package is below both, which is why the
+ * toolbar's buttons, its menu shells and its chevron already live here.
+ *
+ * The edgeless-toolbar copy is deliberately untouched by the change that added
+ * this file: it is what the shape toolbar and its neighbours already call, and
+ * collapsing the two is a follow-up whose blast radius is every shape entry in
+ * the editor rather than one new dropdown. Until then the two are the same
+ * markup twice — knowingly, and named here so the follow-up is findable.
+ *
+ * ## Names
+ *
+ * `PickerMenu` / `PickerMenuItem` rather than `Menu` / `MenuItem`: this package
+ * already exports a `MenuItem`, and it is a different thing entirely (a line in
+ * the "⋮" overflow menu, with a label and an action). Two types called
+ * `MenuItem` in one entry point is a trap, not a convenience.
+ */
+/** One option: what it is worth, what it looks like, what it is called. */
+export type PickerMenuItem<T> = {
+    /** Tooltip and accessible name. */
+    key?: string;
+    value: T;
+    icon?: TemplateResult;
+    disabled?: boolean;
+};
+export type PickerMenu<T> = {
+    label: string;
+    icon?: TemplateResult;
+    tooltip?: string;
+    items: PickerMenuItem<T>[];
+    currentValue: T;
+    onPick: (value: T) => void;
+    /**
+     * `data-testid` for the host element and, suffixed with `-option`, for each
+     * line. Optional: the shape toolbar's picker has never needed one, and a
+     * framework module that wants to be reachable from an integration spec says
+     * so rather than making every caller carry an attribute it does not use.
+     */
+    testId?: string;
+};
+/** 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 renderPickerMenuItems<T>(items: PickerMenuItem<T>[], currentValue: T, onPick: (value: T) => void, testId?: string): unknown;

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

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { EditorChevronDown } from './chevron-down.js';
+/** The field of the item that currently matches — its icon, usually. */
+export function renderCurrentPickerItemWith(items, currentValue, field) {
+    return items.find(({ value }) => value === currentValue)?.[field];
+}
+export function renderPickerMenu({ label, tooltip, icon, items, currentValue, onPick, testId, }) {
+    return html `
+    <editor-menu-button
+      data-testid=${ifDefined(testId)}
+      aria-label="${`${label.toLowerCase()}-menu`}"
+      .button=${html `
+        <editor-icon-button
+          data-testid=${ifDefined(testId ? `${testId}-button` : undefined)}
+          aria-label="${label}"
+          .tooltip="${tooltip ?? label}"
+        >
+          ${icon ?? renderCurrentPickerItemWith(items, currentValue, 'icon')}
+          ${EditorChevronDown}
+        </editor-icon-button>
+      `}
+    >
+      ${renderPickerMenuItems(items, currentValue, onPick, testId)}
+    </editor-menu-button>
+  `;
+}
+export function renderPickerMenuItems(items, currentValue, onPick, testId) {
+    // Keyed by `value`: the option list is rebuilt on every selection change, and
+    // an unkeyed repeat would recycle one kind's button into another's rather
+    // than moving it — which is what makes an icon and its tooltip disagree.
+    return repeat(items, item => item.value, ({ key, value, icon, disabled }) => html `
+      <editor-icon-button
+        data-testid=${ifDefined(testId ? `${testId}-option` : undefined)}
+        data-value=${ifDefined(typeof value === 'string' ? value : undefined)}
+        aria-label="${ifDefined(key)}"
+        .disabled=${ifDefined(disabled)}
+        .tooltip="${ifDefined(key)}"
+        .active="${currentValue === value}"
+        .activeMode="${'background'}"
+        @click=${() => onPick(value)}
+      >
+        ${icon}
+      </editor-icon-button>
+    `);
+}

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

@@ -6,14 +6,13 @@ export class EditorToolbar extends WithDisposable(LitElement) {
     static { this.styles = css `
     ${panelBaseStyle(':host')}
     :host {
-      min-height: 36px;
+      /* ONE line, always: the toolbar's height never depends on the selection,
+         so it never moves under the cursor. When the row runs out of room the
+         widget spends its entries — icon only first, then into the "⋮" menu —
+         rather than growing a second row (PO arbitration of 02/08/2026). */
+      height: 36px;
       box-sizing: content-box;
-      /* ponytail: wrap to a second row instead of overflowing on mobile. The
-         width is capped to availableWidth by floating-ui's size middleware;
-         wrapping (not scrolling) keeps the "More" dropdown clickable — it is a
-         descendant of this toolbar, so an overflow container would clip it. */
-      flex-wrap: wrap;
-      row-gap: 4px;
+      flex-wrap: nowrap;
     }
 
     :host([data-without-bg]) {
@@ -24,9 +23,11 @@ export class EditorToolbar extends WithDisposable(LitElement) {
 
     ::slotted(*) {
       display: flex;
-      /* fixed row height (not 100%) so each item stays one row tall when the
-         toolbar wraps to multiple rows */
-      height: 36px;
+      height: 100%;
+      /* Entries keep their natural width: squashing them into the row would
+         hide the overflow the widget has to measure, and a button squeezed to
+         half a word is worse than the same button in the "⋮" menu. */
+      flex-shrink: 0;
       justify-content: center;
       align-items: center;
       gap: 8px;

package/dist/_pkgs/affine-foundation/view.js

@@ -1,7 +1,7 @@
 import { FileDropExtension } from '../affine-components/drop-indicator/index.js';
 import { PeekViewExtension, } from '../affine-components/peek/index.js';
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
-import { AutoClearSelectionService, BlockCommentManager, BlockLifecycleTelemetryWatcher, CitationService, DefaultOpenDocExtension, DNDAPIExtension, DocDisplayMetaService, DocModeService, EditPropsStore, EmbedOptionService, FileSizeLimitService, FontConfigExtension, fontConfigSchema, FontLoaderService, LinkPreviewCache, LinkPreviewCacheConfigSchema, LinkPreviewCacheExtension, LinkPreviewService, PageViewportServiceExtension, TelemetryExtension, ThemeService, ToolbarRegistryExtension, } from '../affine-shared/services/index.js';
+import { AutoClearSelectionService, BlockCommentManager, BlockLifecycleTelemetryWatcher, CitationService, DefaultOpenDocExtension, DNDAPIExtension, DocDisplayMetaService, DocModeService, EditPropsStore, EmbedOptionService, FileSizeLimitService, FontConfigExtension, fontConfigSchema, FontLoaderService, LinkPreviewCache, LinkPreviewCacheConfigSchema, LinkPreviewCacheExtension, LinkPreviewService, PageViewportServiceExtension, PivotMaterialityPublisher, TelemetryExtension, ThemeService, ToolbarRegistryExtension, } from '../affine-shared/services/index.js';
 import { InteractivityManager, ToolController } from '../std/gfx/index.js';
 import { z } from 'zod';
 import { clipboardConfigs } from './clipboard.js';
@@ -47,7 +47,16 @@ export class FoundationViewExtension extends ViewExtensionProvider {
         ]);
         context.register(clipboardConfigs);
         if (this.isEdgeless(context.scope)) {
-            context.register([InteractivityManager, ToolController]);
+            context.register([
+                InteractivityManager,
+                ToolController,
+                // Inert without a host `PivotPropertiesProvider` that implements the
+                // write-back; see ADR 0006 § 4. NOT flag-gated: reflecting a bound
+                // element's qualification onto its record is a property of the
+                // document, not a piece of framework tooling, and it must keep working
+                // for a board whose framework flag is off.
+                PivotMaterialityPublisher,
+            ]);
         }
         const fontConfig = options?.fontConfig;
         if (fontConfig) {

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

@@ -33,12 +33,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { EdgelessFrameManager } from '../../affine-block-frame/index.js';
-import { DocModeProvider, EditPropsStore, } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement } from '../../std/index.js';
-import { generateKeyBetweenV2, GfxControllerIdentifier, } from '../../std/gfx/index.js';
+import { generateKeyBetweenV2, GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';

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

@@ -32,9 +32,9 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { PresentTool, } from '../../affine-block-frame/index.js';
+import { PresentTool } from '../../affine-block-frame/index.js';
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
-import { DocModeProvider, EditPropsStore, } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
 import { createButtonPopper } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { WithDisposable } from '../../global/lit/index.js';

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

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
-import { DocModeProvider, EditPropsStore, } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';

package/dist/_pkgs/affine-fragment-outline/mobile-outline-panel.js

@@ -37,7 +37,7 @@ import { DocModeProvider } from '../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../affine-shared/theme/index.js';
 import { matchModels } from '../affine-shared/utils/index.js';
 import { SignalWatcher, WithDisposable } from '../global/lit/index.js';
-import { PropTypes, requiredProperties, } from '../std/index.js';
+import { PropTypes, requiredProperties } from '../std/index.js';
 import { signal } from '@preact/signals-core';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

package/dist/_pkgs/affine-gfx-brush/index.d.ts

@@ -3,5 +3,6 @@ export * from './brush-tool.js';
 export * from './element-renderer.js';
 export * from './eraser-tool.js';
 export * from './highlighter-tool.js';
+export * from './renderer/index.js';
 export * from './toolbar/configs/index.js';
 export * from './toolbar/senior-tool.js';

package/dist/_pkgs/affine-gfx-brush/index.js

@@ -3,5 +3,6 @@ export * from './brush-tool.js';
 export * from './element-renderer.js';
 export * from './eraser-tool.js';
 export * from './highlighter-tool.js';
+export * from './renderer/index.js';
 export * from './toolbar/configs/index.js';
 export * from './toolbar/senior-tool.js';

package/dist/_pkgs/affine-gfx-brush/renderer/dom/brush.d.ts

@@ -0,0 +1 @@
+export declare const BrushDomRendererExtension: import("../../../store/index.js").ExtensionType;

package/dist/_pkgs/affine-gfx-brush/renderer/dom/brush.js

@@ -0,0 +1,11 @@
+import { DomElementRendererExtension, } from '../../../affine-block-surface/index.js';
+import { DefaultTheme } from '../../../affine-model/index.js';
+import { renderBrushLikeDom } from './shared.js';
+export const BrushDomRendererExtension = DomElementRendererExtension('brush', (model, domElement, renderer) => {
+    renderBrushLikeDom({
+        model,
+        domElement,
+        renderer,
+        color: renderer.getColorValue(model.color, DefaultTheme.black, true),
+    });
+});

package/dist/_pkgs/affine-gfx-brush/renderer/dom/highlighter.d.ts

@@ -0,0 +1 @@
+export declare const HighlighterDomRendererExtension: import("../../../store/index.js").ExtensionType;

package/dist/_pkgs/affine-gfx-brush/renderer/dom/highlighter.js

@@ -0,0 +1,11 @@
+import { DomElementRendererExtension, } from '../../../affine-block-surface/index.js';
+import { DefaultTheme } from '../../../affine-model/index.js';
+import { renderBrushLikeDom } from './shared.js';
+export const HighlighterDomRendererExtension = DomElementRendererExtension('highlighter', (model, domElement, renderer) => {
+    renderBrushLikeDom({
+        model,
+        domElement,
+        renderer,
+        color: renderer.getColorValue(model.color, DefaultTheme.hightlighterColor, true),
+    });
+});

package/dist/_pkgs/affine-gfx-brush/renderer/dom/index.d.ts

@@ -0,0 +1,2 @@
+export { BrushDomRendererExtension } from './brush.js';
+export { HighlighterDomRendererExtension } from './highlighter.js';

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

@@ -0,0 +1,2 @@
+export { BrushDomRendererExtension } from './brush.js';
+export { HighlighterDomRendererExtension } from './highlighter.js';

package/dist/_pkgs/affine-gfx-brush/renderer/dom/shared.d.ts

@@ -0,0 +1,14 @@
+import type { DomRenderer } from '../../../affine-block-surface/index.js';
+import type { BrushElementModel, HighlighterElementModel } from '../../../affine-model/index.js';
+type BrushLikeModel = BrushElementModel | HighlighterElementModel;
+/**
+ * Paints a brush or highlighter stroke into its host element. The z-index is
+ * owned by `DomRenderer`, which reads it from the layer manager.
+ */
+export declare function renderBrushLikeDom({ color, domElement, model, renderer, }: {
+    color: string;
+    domElement: HTMLElement;
+    model: BrushLikeModel;
+    renderer: DomRenderer;
+}): void;
+export {};

package/dist/_pkgs/affine-gfx-brush/renderer/dom/shared.js

@@ -0,0 +1,54 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * The nodes a stroke host already owns, kept across renders. Rebuilding the
+ * `<svg>` on every frame allocated one element per stroke per pan or zoom;
+ * the attributes are cheap to overwrite in place.
+ */
+const retainedBrushDom = new WeakMap();
+function clearBrushLikeDom(domElement) {
+    retainedBrushDom.delete(domElement);
+    domElement.replaceChildren();
+}
+function getRetainedBrushDom(domElement) {
+    const existing = retainedBrushDom.get(domElement);
+    if (existing) {
+        return existing;
+    }
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.style.position = 'absolute';
+    svg.style.left = '0';
+    svg.style.top = '0';
+    svg.style.overflow = 'visible';
+    svg.style.pointerEvents = 'none';
+    const path = document.createElementNS(SVG_NS, 'path');
+    path.setAttribute('stroke', 'none');
+    svg.append(path);
+    const retained = { svg, path };
+    retainedBrushDom.set(domElement, retained);
+    domElement.replaceChildren(svg);
+    return retained;
+}
+/**
+ * Paints a brush or highlighter stroke into its host element. The z-index is
+ * owned by `DomRenderer`, which reads it from the layer manager.
+ */
+export function renderBrushLikeDom({ color, domElement, model, renderer, }) {
+    const { zoom } = renderer.viewport;
+    const [, , w, h] = model.deserializedXYWH;
+    if (w <= 0 || h <= 0 || !model.commands) {
+        clearBrushLikeDom(domElement);
+        return;
+    }
+    const { path, svg } = getRetainedBrushDom(domElement);
+    svg.style.width = `${w * zoom}px`;
+    svg.style.height = `${h * zoom}px`;
+    svg.style.transform = model.rotate === 0 ? '' : `rotate(${model.rotate}deg)`;
+    svg.style.transformOrigin = model.rotate === 0 ? '' : 'center';
+    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+    path.setAttribute('d', model.commands);
+    path.setAttribute('fill', color);
+    domElement.style.width = `${w * zoom}px`;
+    domElement.style.height = `${h * zoom}px`;
+    domElement.style.overflow = 'visible';
+    domElement.style.pointerEvents = 'none';
+}

package/dist/_pkgs/affine-gfx-brush/renderer/index.d.ts

@@ -0,0 +1 @@
+export * from './dom/index.js';

package/dist/_pkgs/affine-gfx-brush/renderer/index.js

@@ -0,0 +1,4 @@
+// The canvas (2d context) renderers still live in `../element-renderer.ts`
+// (brush) and in `@labre/affine-gfx-shape` (highlighter); only the DOM
+// variants are collected here.
+export * from './dom/index.js';

package/dist/_pkgs/affine-gfx-brush/toolbar/components/pen/pen-tool-button.js

@@ -1,5 +1,5 @@
 import { keepColor } from '../../../../affine-components/color-picker/index.js';
-import { EditPropsStore, ThemeProvider, } from '../../../../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider } from '../../../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../../../global/lit/index.js';
 import { computed, signal } from '@preact/signals-core';

package/dist/_pkgs/affine-gfx-brush/view.d.ts

@@ -1,4 +1,18 @@
 import { type ViewExtensionContext, ViewExtensionProvider } from '../affine-ext-loader/index.js';
+/**
+ * Brush / highlighter rendering — ALWAYS registered, independent of any flag.
+ * Disabling `brush` hides only the pen senior button and the tools it opens
+ * (see {@link BrushViewExtension}); strokes already drawn must still paint,
+ * stay selectable and keep their contextual toolbar. See `docs/adr/0009`.
+ */
+export declare class BrushRenderViewExtension extends ViewExtensionProvider {
+    name: string;
+    setup(context: ViewExtensionContext): void;
+}
+/**
+ * Pen creation tooling — flag-gated (`brush`): the senior toolbar button and
+ * the brush / highlighter / eraser tools it opens.
+ */
 export declare class BrushViewExtension extends ViewExtensionProvider {
     name: string;
     effect(): void;

package/dist/_pkgs/affine-gfx-brush/view.js

@@ -4,8 +4,36 @@ import { effects } from './effects.js';
 import { BrushElementRendererExtension } from './element-renderer.js';
 import { EraserTool } from './eraser-tool.js';
 import { HighlighterTool } from './highlighter-tool.js';
+import { BrushDomRendererExtension, HighlighterDomRendererExtension, } from './renderer/index.js';
 import { brushToolbarExtension, highlighterToolbarExtension, } from './toolbar/configs/index.js';
 import { penSeniorTool } from './toolbar/senior-tool.js';
+/**
+ * Brush / highlighter rendering — ALWAYS registered, independent of any flag.
+ * Disabling `brush` hides only the pen senior button and the tools it opens
+ * (see {@link BrushViewExtension}); strokes already drawn must still paint,
+ * stay selectable and keep their contextual toolbar. See `docs/adr/0009`.
+ */
+export class BrushRenderViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-brush-render-gfx';
+    }
+    setup(context) {
+        super.setup(context);
+        context.register(BrushElementRendererExtension);
+        // DOM variants of the same two strokes. The canvas renderer for the
+        // highlighter still ships with `@labre/affine-gfx-shape`; both providers
+        // are always-on, so the pair stays complete whatever the `brush` flag says.
+        context.register(BrushDomRendererExtension);
+        context.register(HighlighterDomRendererExtension);
+        context.register(brushToolbarExtension);
+        context.register(highlighterToolbarExtension);
+    }
+}
+/**
+ * Pen creation tooling — flag-gated (`brush`): the senior toolbar button and
+ * the brush / highlighter / eraser tools it opens.
+ */
 export class BrushViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);
@@ -13,6 +41,7 @@ export class BrushViewExtension extends ViewExtensionProvider {
     }
     effect() {
         super.effect();
+        // Defines the pen/eraser tool buttons and the pen menu — tooling only.
         effects();
     }
     setup(context) {
@@ -20,9 +49,6 @@ export class BrushViewExtension extends ViewExtensionProvider {
         context.register(BrushTool);
         context.register(EraserTool);
         context.register(HighlighterTool);
-        context.register(BrushElementRendererExtension);
-        context.register(brushToolbarExtension);
-        context.register(highlighterToolbarExtension);
         context.register(penSeniorTool);
     }
 }

package/dist/_pkgs/affine-gfx-connector/connector-manager.js

@@ -1,6 +1,6 @@
 import { AStarRunner, Overlay } from '../affine-block-surface/index.js';
 import { ConnectorElementModel, ConnectorMode, DEFAULT_POLYGON_VERTICES, GroupElementModel, ShapeElementModel, ShapeType, } from '../affine-model/index.js';
-import { EditPropsStore, ThemeProvider, } from '../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider } from '../affine-shared/services/index.js';
 import { BlockSuiteError } from '../global/exceptions/index.js';
 import { almostEqual, Bound, getBezierCurveBoundingBox, getBezierParameters, getBoundFromPoints, getBoundWithRotation, getPointFromBoundsWithRotation, isOverlap, isVecZero, lineIntersects, PI2, PointLocation, polygonCentroid, sign, toRadian, Vec, } from '../global/gfx/index.js';
 import { assertType } from '../global/utils/index.js';
@@ -212,11 +212,12 @@ export function getAnchors(ele, includeCenterAnchor = true) {
     // getLineIntersections.
     if (ele.centerAnchorOnly) {
         const centerPoint = getPointFromBoundsWithRotation({ ...bound, rotate }, bound.center);
-        return [{ point: new PointLocation(centerPoint), coord: [0.5, 0.5] }];
+        return [
+            { point: new PointLocation(centerPoint), coord: [0.5, 0.5] },
+        ];
     }
     // For polygon shapes, generate anchors at each vertex and edge midpoint
-    if (ele instanceof ShapeElementModel &&
-        ele.shapeType === ShapeType.Polygon) {
+    if (ele instanceof ShapeElementModel && ele.shapeType === ShapeType.Polygon) {
         const verts = ele.vertices ?? DEFAULT_POLYGON_VERTICES;
         for (let i = 0; i < verts.length; i++) {
             const curr = verts[i];
@@ -240,10 +241,7 @@ export function getAnchors(ele, includeCenterAnchor = true) {
                 coord: vertCoord,
             });
             // --- Edge midpoint anchor ---
-            const midCoord = [
-                (curr[0] + next[0]) / 2,
-                (curr[1] + next[1]) / 2,
-            ];
+            const midCoord = [(curr[0] + next[0]) / 2, (curr[1] + next[1]) / 2];
             const midAbs = [
                 bound.x + midCoord[0] * bound.w,
                 bound.y + midCoord[1] * bound.h,
@@ -985,6 +983,17 @@ export class ConnectorPathGenerator extends PathGenerator {
             getElementById: elementGetter ?? (() => null),
         });
         const points = path ?? instance._generateConnectorPath(connector) ?? [];
+        // Degraded state: no resolvable endpoints (an endpoint references a
+        // missing element and has no fallback position). Keep the last bound and
+        // paint nothing rather than derive a bbox from an empty point set.
+        if (points.length === 0) {
+            if (connector.path.length > 0) {
+                connector.updatingPath = true;
+                connector.path = [];
+                connector.updatingPath = false;
+            }
+            return;
+        }
         const bound = connector.mode === ConnectorMode.Curve
             ? getBezierCurveBoundingBox(getBezierParameters(points))
             : getBoundFromPoints(points);
@@ -1052,6 +1061,11 @@ export class ConnectorPathGenerator extends PathGenerator {
             const start = this._getConnectorEndElement(connector, 'source');
             const end = this._getConnectorEndElement(connector, 'target');
             const [startPoint, endPoint] = this._computeStartEndPoint(connector);
+            // _computeStartEndPoint returns [] when an endpoint cannot be resolved
+            // (e.g. its element is gone and no position is stored) — bail out
+            // instead of feeding undefined points to the orthogonal router.
+            if (!startPoint || !endPoint)
+                return [];
             const startBound = start
                 ? Bound.from(getBoundWithRotation(rBound(start)))
                 : null;
@@ -1076,9 +1090,12 @@ export class ConnectorPathGenerator extends PathGenerator {
         let startPoint = null;
         let endPoint = null;
         if (source.id || target.id) {
-            if (!source.position && !target.position) {
-                const start = this._getConnectorEndElement(connector, 'source');
-                const end = this._getConnectorEndElement(connector, 'target');
+            const start = this._getConnectorEndElement(connector, 'source');
+            const end = this._getConnectorEndElement(connector, 'target');
+            // An endpoint id may reference an element that no longer exists.
+            // Only take the anchor-to-anchor shortcut when both resolve; otherwise
+            // degrade through _getConnectionPoint (stored position or empty path).
+            if (start && end && !source.position && !target.position) {
                 const sb = Bound.deserialize(start.xywh);
                 const eb = Bound.deserialize(end.xywh);
                 startPoint = getNearestConnectableAnchor(start, eb.center);
@@ -1150,9 +1167,16 @@ export class ConnectorPathGenerator extends PathGenerator {
     }
     _generateStraightConnectorPath(connector) {
         const { source, target } = connector;
-        if (source.id && !source.position && target.id && !target.position) {
-            const start = this._getConnectorEndElement(connector, 'source');
-            const end = this._getConnectorEndElement(connector, 'target');
+        const start = this._getConnectorEndElement(connector, 'source');
+        const end = this._getConnectorEndElement(connector, 'target');
+        // Same degraded state as in _generateCurveConnectorPath: an endpoint id
+        // whose element is gone falls through to _getConnectionPoint.
+        if (source.id &&
+            !source.position &&
+            target.id &&
+            !target.position &&
+            start &&
+            end) {
             const sb = Bound.deserialize(start.xywh);
             const eb = Bound.deserialize(end.xywh);
             const startPoint = getNearestConnectableAnchor(start, eb.center);
@@ -1215,8 +1239,7 @@ export class ConnectorPathGenerator extends PathGenerator {
     _isPointAtShapeCenter(connectable, point) {
         const bound = Bound.deserialize(connectable.xywh);
         const center = getPointFromBoundsWithRotation({ ...bound, rotate: connectable.rotate }, bound.center);
-        return (almostEqual(point[0], center[0], 1) &&
-            almostEqual(point[1], center[1], 1));
+        return (almostEqual(point[0], center[0], 1) && almostEqual(point[1], center[1], 1));
     }
     _getConnectionPoint(connector, type) {
         const connection = connector[type];