@formicoidea/labre-core 0.53.0 → 0.55.0

package/dist/_pkgs/affine-block-surface/renderer/canvas-renderer.js

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../affine-model/index.js';
+import { ColorScheme, ConnectorElementModel, FrameworkBackgroundElementModel, } from '../../affine-model/index.js';
 import { FeatureFlagService } from '../../affine-shared/services/index.js';
 import { requestConnectedFrame } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
@@ -9,9 +9,26 @@ import last from 'lodash-es/last.js';
 import { Subject } from 'rxjs';
 import { ElementRendererIdentifier } from '../extensions/element-renderer.js';
 import { RoughCanvas } from '../utils/rough/canvas.js';
+import { NotationDarkPaletteIdentifier, NotationTint, } from './notation-tint.js';
 import { isPainted } from './paint-predicate.js';
+/** The stored fill an element paints as its body, if it paints one. */
+function paperOf(element) {
+    const { filled, fillColor } = element;
+    return filled && typeof fillColor === 'string' && fillColor
+        ? fillColor
+        : null;
+}
 const STACKING_CANVAS_PADDING = 32;
 export class CanvasRenderer {
+    /**
+     * The dark notation table while a NOTATION element is being painted on a
+     * dark canvas, `null` otherwise (light scheme, a neutral element, outside a
+     * paint). Painters read it through `notationColor` and
+     * {@link getColorValue}; see `notation-tint.ts` and ADR 0039.
+     */
+    get notationTint() {
+        return this._notationTint;
+    }
     get stackingCanvas() {
         return this._stackingCanvas;
     }
@@ -44,6 +61,11 @@ export class CanvasRenderer {
         };
         this.stackingCanvasUpdated = new Subject();
         this.usePlaceholder = false;
+        /** Set by {@link withColorScheme} for the length of one paint. */
+        this._schemeOverride = null;
+        /** Built on the first dark paint, from the registered framework entries. */
+        this._darkTint = null;
+        this._notationTint = null;
         this._lastDebugSnapshot = {
             canvasMemoryBytes: 0,
             canvasMemorySnapshots: [],
@@ -72,6 +94,7 @@ export class CanvasRenderer {
         if (options.enableStackingCanvas) {
             this._initStackingCanvas(options.onStackingCanvasCreated);
         }
+        this._surface = options.surfaceModel;
         this._watchSurface(options.surfaceModel);
     }
     /**
@@ -440,6 +463,9 @@ export class CanvasRenderer {
             this.grid.search(bound, {
                 filter: ['canvas', 'local'],
             });
+        const tint = this._tintForPass();
+        let boards = null;
+        const papers = [];
         for (const element of elements) {
             const display = isPainted(element, this._gfx.localVisibility);
             if (display && intersects(getBoundWithRotation(element), bound)) {
@@ -463,7 +489,24 @@ export class CanvasRenderer {
                     ctx.globalAlpha = element.opacity ?? 1;
                     const dx = element.x - bound.x;
                     const dy = element.y - bound.y;
-                    renderFn(element, ctx, matrix.translate(dx, dy), this, rc, bound);
+                    if (tint) {
+                        // Every board of the surface, not of this pass: a stacking canvas
+                        // paints one layer, and the board may sit in another.
+                        boards ??= this._surface.elementModels.filter((e) => e instanceof FrameworkBackgroundElementModel);
+                        this._notationTint =
+                            this._isNotation(element, boards) &&
+                                !this._sitsOnKeptPaper(element, papers, tint)
+                                ? tint
+                                : null;
+                        if (paperOf(element))
+                            papers.push(element);
+                    }
+                    try {
+                        renderFn(element, ctx, matrix.translate(dx, dy), this, rc, bound);
+                    }
+                    finally {
+                        this._notationTint = null;
+                    }
                     ctx.restore();
                 }
             }
@@ -557,13 +600,103 @@ export class CanvasRenderer {
         this._renderByBound(ctx, matrix, rc, bound, surfaceElements);
     }
     getColorScheme() {
-        return this.provider.getColorScheme?.() ?? ColorScheme.Light;
+        return (this._schemeOverride ??
+            this.provider.getColorScheme?.() ??
+            ColorScheme.Light);
+    }
+    /**
+     * A stored colour, resolved for the scheme in force.
+     *
+     * While a notation element is painted on a dark canvas, a PLAIN stored value
+     * (a string: what every framework writes) goes through the dark notation
+     * table as `use`; a `{ light, dark }` pair already knows its dark side and
+     * is never tinted, nor is a fallback (ADR 0039).
+     */
+    getColorValue(color, fallback, real, use = 'ink') {
+        const value = this.provider.getColorValue?.(color, fallback, real, this._schemeOverride ?? undefined) ?? 'transparent';
+        return this._notationTint && typeof color === 'string' && color
+            ? this._notationTint.resolve(value, use)
+            : value;
     }
-    getColorValue(color, fallback, real) {
-        return (this.provider.getColorValue?.(color, fallback, real) ?? 'transparent');
+    /**
+     * The colour of words drawn on a fill of the same element: tinted like any
+     * ink, unless the fill is painted as stored, in which case the words keep
+     * the colour they were chosen for on it ("ink follows its paper", ADR 0039).
+     * `fill` is `null` when the element draws no fill.
+     */
+    getInkColorValue(color, fallback, fill) {
+        const tint = this._notationTint;
+        if (tint && typeof fill === 'string' && fill && tint.keepsInkOn(fill)) {
+            return (this.provider.getColorValue?.(color, fallback, true, this._schemeOverride ?? undefined) ?? 'transparent');
+        }
+        return this.getColorValue(color, fallback, true);
     }
     getPropertyValue(property) {
-        return this.provider.getPropertyValue?.(property) ?? '';
+        return (this.provider.getPropertyValue?.(property, this._schemeOverride ?? undefined) ?? '');
+    }
+    /**
+     * Paint with `scheme` whatever the canvas shows. The SVG export paints
+     * light: a file is printed on white and read back by colour (ADR 0039).
+     */
+    withColorScheme(scheme, paint) {
+        const previous = this._schemeOverride;
+        this._schemeOverride = scheme;
+        try {
+            return paint();
+        }
+        finally {
+            this._schemeOverride = previous;
+        }
+    }
+    /**
+     * "Ink follows its paper" for words that are elements of their own (a C4
+     * title, an Event Storming label): text with no fill of its own, drawn on
+     * the topmost filled element under it that keeps its stored fill, keeps its
+     * stored colour too (ADR 0039). `papers` are the filled elements painted
+     * before it in this pass, in z-order.
+     */
+    _sitsOnKeptPaper(element, papers, tint) {
+        if (paperOf(element))
+            return false;
+        const bound = element.elementBound;
+        for (let i = papers.length - 1; i >= 0; i--) {
+            const paper = papers[i];
+            if (paper.elementBound.contains(bound)) {
+                return tint.keepsInkOn(paperOf(paper));
+            }
+        }
+        return false;
+    }
+    /** The dark table when this pass paints dark, else `null`. */
+    _tintForPass() {
+        if (this.getColorScheme() !== ColorScheme.Dark)
+            return null;
+        this._darkTint ??= new NotationTint([
+            ...this.std.provider.getAll(NotationDarkPaletteIdentifier).values(),
+        ]);
+        return this._darkTint;
+    }
+    /**
+     * Whether an element is part of a notation, read off the document as the
+     * colour carousel reads it (ADR 0027): its own role or its being a board,
+     * else (a connector) a role at either end, else a framework board it sits
+     * inside. A neutral element anywhere else is painted exactly as stored.
+     */
+    _isNotation(element, boards) {
+        if (element.role)
+            return true;
+        // A board is notation whether or not it stamps a role (Cynefin does not).
+        if (element instanceof FrameworkBackgroundElementModel)
+            return true;
+        if (element instanceof ConnectorElementModel) {
+            for (const end of [element.source?.id, element.target?.id]) {
+                const model = end ? this._gfx.getElementById(end) : null;
+                if (model?.role)
+                    return true;
+            }
+        }
+        const bound = element.elementBound;
+        return boards.some(board => board !== element && board.elementBound.contains(bound));
     }
     getDebugMetrics() {
         return {

package/dist/_pkgs/affine-block-surface/renderer/notation-tint.d.ts

@@ -0,0 +1,92 @@
+import type { FrameworkId } from '../../std/index.js';
+import type { ExtensionType } from '../../store/index.js';
+/**
+ * The dark variant of the framework notations, resolved AT RENDER TIME
+ * (ADR 0039).
+ *
+ * A notation element stores plain colour values (`'#438dd5'`, the scale's
+ * `'#1f2328'`). On a dark canvas those values are not rewritten: the painter
+ * asks this table what to paint instead, so the document, the undo stack, the
+ * sync and every reader of a stored colour see exactly what they saw before.
+ *
+ * The rule is "the paper inverts, the hues stay":
+ *
+ * - the shared neutrals ({@link NOTATION_NEUTRALS}) map key for key onto
+ *   {@link NOTATION_NEUTRALS_DARK};
+ * - a framework adds the few values of its own that would vanish on the dark
+ *   card (a stencil ink, a near-black label, a pale wash behind words) through
+ *   {@link NotationDarkPaletteExtension};
+ * - everything else, every hue of a standard included, is painted as stored.
+ *   EDGY's facets, the C4 ladder, a BPMN end event and a colour typed by hand
+ *   all stay what they are.
+ *
+ * White is the one value with two jobs: as a SURFACE (a node body, the board
+ * card) it is the paper and inverts; as an INK (white words on a C4 person,
+ * EDGY's white pictos) it stays. Hence the two uses below.
+ */
+/** What a colour is painted as: a line or words, or a surface. */
+export type NotationColorUse = 'ink' | 'fill';
+/**
+ * One framework's dark entries, light value → dark value. Keys are `#rrggbb`
+ * (any case); a stored `#rrggbbaa` keeps its alpha.
+ *
+ * `kept` lists the swatches of the framework's palette that deliberately have
+ * no dark entry (a standard's hue that reads on the dark card as it is), so a
+ * swatch added later without a decision fails `notation-dark-palettes`.
+ */
+export type NotationDarkPalette = {
+    framework: FrameworkId;
+    colors: Readonly<Record<string, string>>;
+    kept?: readonly string[];
+};
+/**
+ * Multi-instance, keyed by framework, like `FrameworkPaletteIdentifier`: two
+ * registrations for one framework collide at set-up.
+ */
+export declare const NotationDarkPaletteIdentifier: import("../../global/di/types.js").ServiceIdentifier<NotationDarkPalette> & (<U extends NotationDarkPalette = NotationDarkPalette>(variant: import("../../global/di/types.js").ServiceVariant) => import("../../global/di/types.js").ServiceIdentifier<U>);
+/**
+ * Register a framework's dark entries. Call it from the ALWAYS-ON render view
+ * extension, beside the renderers: painting a stored document is content, so
+ * it never depends on the framework's flag (ADR 0009).
+ */
+export declare function NotationDarkPaletteExtension(palette: NotationDarkPalette): ExtensionType;
+/**
+ * A resolved dark table: the neutrals plus every registered framework's
+ * entries. Pure; the canvas renderer builds one per editor and hands it to
+ * the painters of notation elements only.
+ */
+export declare class NotationTint {
+    private readonly _inks;
+    private readonly _surfaces;
+    /**
+     * `palettes` in any order. A light value two frameworks map differently is
+     * a declaration bug; the first one wins here and
+     * `notation-dark-palettes.unit.spec.ts` names it.
+     */
+    constructor(palettes?: readonly NotationDarkPalette[]);
+    /**
+     * What to paint for a stored or declared `value`. Anything that is not a
+     * hex literal (`rgba(…)`, `transparent`, a variable) is returned untouched.
+     */
+    resolve(value: string, use?: NotationColorUse): string;
+    /**
+     * Whether words drawn on this fill keep their stored colour ("ink follows
+     * its paper"): true when the fill is painted as stored and is opaque enough
+     * to be what the words sit on. A fill that inverts, or a wash below half
+     * opacity, puts the words on the dark card, so they invert too.
+     *
+     * This is what keeps black words on a C4 component and dark words on an
+     * Event Storming sticky readable while the same black on the bare card turns
+     * light.
+     */
+    keepsInkOn(fill: string): boolean;
+}
+/**
+ * The colour a painter of a notation element should use for a CONSTANT it
+ * holds (a board's declared wash, a glyph's stencil ink).
+ *
+ * `renderer` is optional and duck-typed on purpose: a unit test drives a
+ * painter with a bare stub, or with no renderer at all, and both must paint
+ * the value as given.
+ */
+export declare function notationColor(renderer: unknown, value: string, use?: NotationColorUse): string;

package/dist/_pkgs/affine-block-surface/renderer/notation-tint.js

@@ -0,0 +1,113 @@
+import { NOTATION_NEUTRALS, NOTATION_NEUTRALS_DARK, } from '../../affine-shared/consts/index.js';
+import { createIdentifier } from '../../global/di/index.js';
+/**
+ * Multi-instance, keyed by framework, like `FrameworkPaletteIdentifier`: two
+ * registrations for one framework collide at set-up.
+ */
+export const NotationDarkPaletteIdentifier = createIdentifier('NotationDarkPalette');
+/**
+ * Register a framework's dark entries. Call it from the ALWAYS-ON render view
+ * extension, beside the renderers: painting a stored document is content, so
+ * it never depends on the framework's flag (ADR 0009).
+ */
+export function NotationDarkPaletteExtension(palette) {
+    return {
+        setup: di => {
+            di.addImpl(NotationDarkPaletteIdentifier(palette.framework), () => palette);
+        },
+    };
+}
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+/** `#rgb` / `#rrggbb` / `#rrggbbaa` → lower-case `#rrggbb` and the alpha tail. */
+function splitHex(value) {
+    const match = HEX.exec(value.trim());
+    if (!match)
+        return null;
+    const digits = match[1].toLowerCase();
+    if (digits.length === 3) {
+        return { rgb: `#${[...digits].map(d => d + d).join('')}`, alpha: '' };
+    }
+    return { rgb: `#${digits.slice(0, 6)}`, alpha: digits.slice(6) };
+}
+function normalised(table) {
+    const out = new Map();
+    for (const [light, dark] of Object.entries(table)) {
+        const key = splitHex(light);
+        if (key)
+            out.set(key.rgb, dark.toLowerCase());
+    }
+    return out;
+}
+const NEUTRAL_KEYS = Object.keys(NOTATION_NEUTRALS);
+/** The scale, light → dark, minus the card: white is a surface only. */
+const NEUTRAL_INKS = Object.fromEntries(NEUTRAL_KEYS.filter(key => key !== 'cardFill').map(key => [
+    NOTATION_NEUTRALS[key],
+    NOTATION_NEUTRALS_DARK[key],
+]));
+/**
+ * A resolved dark table: the neutrals plus every registered framework's
+ * entries. Pure; the canvas renderer builds one per editor and hands it to
+ * the painters of notation elements only.
+ */
+export class NotationTint {
+    /**
+     * `palettes` in any order. A light value two frameworks map differently is
+     * a declaration bug; the first one wins here and
+     * `notation-dark-palettes.unit.spec.ts` names it.
+     */
+    constructor(palettes = []) {
+        this._inks = normalised(NEUTRAL_INKS);
+        for (const palette of palettes) {
+            for (const [light, dark] of normalised(palette.colors)) {
+                if (!this._inks.has(light))
+                    this._inks.set(light, dark);
+            }
+        }
+        this._surfaces = normalised({
+            [NOTATION_NEUTRALS.cardFill]: NOTATION_NEUTRALS_DARK.cardFill,
+        });
+    }
+    /**
+     * What to paint for a stored or declared `value`. Anything that is not a
+     * hex literal (`rgba(…)`, `transparent`, a variable) is returned untouched.
+     */
+    resolve(value, use = 'ink') {
+        const parts = splitHex(value);
+        if (!parts)
+            return value;
+        const dark = (use === 'fill' ? this._surfaces.get(parts.rgb) : undefined) ??
+            this._inks.get(parts.rgb);
+        return dark ? dark + parts.alpha : value;
+    }
+    /**
+     * Whether words drawn on this fill keep their stored colour ("ink follows
+     * its paper"): true when the fill is painted as stored and is opaque enough
+     * to be what the words sit on. A fill that inverts, or a wash below half
+     * opacity, puts the words on the dark card, so they invert too.
+     *
+     * This is what keeps black words on a C4 component and dark words on an
+     * Event Storming sticky readable while the same black on the bare card turns
+     * light.
+     */
+    keepsInkOn(fill) {
+        const parts = splitHex(fill);
+        if (!parts)
+            return false;
+        if (parts.alpha && Number.parseInt(parts.alpha, 16) < 128)
+            return false;
+        return this.resolve(fill, 'fill') === fill;
+    }
+}
+/**
+ * The colour a painter of a notation element should use for a CONSTANT it
+ * holds (a board's declared wash, a glyph's stencil ink).
+ *
+ * `renderer` is optional and duck-typed on purpose: a unit test drives a
+ * painter with a bare stub, or with no renderer at all, and both must paint
+ * the value as given.
+ */
+export function notationColor(renderer, value, use = 'ink') {
+    const tint = renderer
+        ?.notationTint;
+    return tint ? tint.resolve(value, use) : value;
+}

package/dist/_pkgs/affine-block-surface/surface-block.js

@@ -152,9 +152,9 @@ let SurfaceBlockComponent = (() => {
                 gridManager: gfx.grid,
                 provider: {
                     generateColorProperty: (color, fallback) => themeService.generateColorProperty(color, fallback, themeService.edgelessTheme),
-                    getColorValue: (color, fallback, real) => themeService.getColorValue(color, fallback, real, themeService.edgelessTheme),
+                    getColorValue: (color, fallback, real, theme) => themeService.getColorValue(color, fallback, real, theme ?? themeService.edgelessTheme),
                     getColorScheme: () => themeService.edgelessTheme,
-                    getPropertyValue: (property) => themeService.getCssVariableColor(property, themeService.edgelessTheme),
+                    getPropertyValue: (property, theme) => themeService.getCssVariableColor(property, theme ?? themeService.edgelessTheme),
                     selectedElements: () => gfx.selection.selectedIds,
                 },
                 surfaceModel: this.model,

package/dist/_pkgs/affine-components/color-picker/styles.js

@@ -76,7 +76,7 @@ export const COLOR_PICKER_STYLE = css `
     box-sizing: border-box;
 
     font-weight: 400;
-    color: #8e8d91;
+    color: var(--affine-text-secondary-color);
   }
   .modes .mode.light button {
     background: white;

package/dist/_pkgs/affine-components/context-menu/input.js

@@ -77,7 +77,8 @@ let MenuInput = (() => {
 
     .affine-menu-input:focus {
       border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/primaryBorder')};
-      box-shadow: 0px 0px 0px 2px rgba(28, 158, 228, 0.3);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
     }
   `; }
         complete() {

package/dist/_pkgs/affine-components/context-menu/menu-renderer.d.ts

@@ -34,6 +34,11 @@ export declare class MobileMenuComponent extends MobileMenuComponent_base implem
     getFirstFocusableElement(): HTMLElement | null;
     getFocusableElements(): HTMLElement[];
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Back, title, "Done": the two ends share what the title leaves, so the
+     * title stays centred, and "Done" is never cut, whatever its translation
+     * ("Terminé" overflowed the 50px it had).
+     */
     renderTitle(): import("lit-html").TemplateResult<1>;
     accessor menu: Menu;
 }
@@ -48,6 +53,8 @@ export type PopupTarget = {
     targetRect: ReferenceElement;
     root: HTMLElement;
     popupStart: () => () => void;
+    /** The element the popup opens from, when there is one. */
+    element?: HTMLElement;
 };
 export declare const popupTargetFromElement: (element: HTMLElement) => PopupTarget;
 export declare const createPopup: (target: PopupTarget, content: HTMLElement, options?: {

package/dist/_pkgs/affine-components/context-menu/menu-renderer.js

@@ -40,7 +40,7 @@ import { ArrowLeftBigIcon, ArrowLeftSmallIcon, CloseIcon, SearchIcon, } from '@b
 import { ShadowlessElement, stdContext } from '../../std/index.js';
 import { RANGE_SYNC_EXCLUDE_ATTR } from '../../std/inline/index.js';
 import { autoPlacement, autoUpdate, computePosition, offset, shift, } from '@floating-ui/dom';
-import { consume } from '@lit/context';
+import { consume, ContextEvent, ContextProvider } from '@lit/context';
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
@@ -299,17 +299,22 @@ let MobileMenuComponent = (() => {
         get std() { return this.#std_accessor_storage; }
         set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
+    /* A bottom action sheet, not a full-screen page: the view stays visible
+       above it and a tap on the scrim closes it (popMobileMenu). */
     mobile-menu {
-      height: 100%;
+      max-height: 85%;
       font-family: var(--affine-font-family);
       display: flex;
       flex-direction: column;
       user-select: none;
       width: 100%;
       background-color: ${unsafeCSSVarV2('layer/background/secondary')};
-      padding: calc(8px + env(safe-area-inset-top, 0px)) 8px
-        calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
+      padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
       position: absolute;
+      left: 0;
+      bottom: 0;
+      border-radius: 12px 12px 0 0;
+      box-shadow: var(--affine-overlay-shadow);
       z-index: 999;
       color: ${unsafeCSSVarV2('text/primary')};
     }
@@ -339,6 +344,11 @@ let MobileMenuComponent = (() => {
       <div class="mobile-menu-body">${result}</div>
     `;
         }
+        /**
+         * Back, title, "Done": the two ends share what the title leaves, so the
+         * title stays centred, and "Done" is never cut, whatever its translation
+         * ("Terminé" overflowed the 50px it had).
+         */
         renderTitle() {
             const title = this.menu.options.title;
             return html `
@@ -346,7 +356,7 @@ let MobileMenuComponent = (() => {
         style="display:flex;align-items:center;height: 44px;"
         @mouseenter="${() => this.menu.closeSubMenu()}"
       >
-        <div style="width: 50px;flex-shrink: 0;margin-left: 10px;">
+        <div style="flex: 1 1 0;min-width: 50px;margin-left: 10px;">
           ${title?.onBack
                 ? html ` <div
                 @click="${() => {
@@ -365,27 +375,33 @@ let MobileMenuComponent = (() => {
         </div>
         <div
           style="
-          flex:1;
+          flex: 0 1 auto;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
           font-size: 17px;
           font-style: normal;
           font-weight: 500;
           line-height: 22px;
           color: var(--affine-text-primary-color);
-          display: flex;
-          justify-content: center;
+          text-align: center;
 "
         >
           ${title?.text}
         </div>
         <div
           @click="${this.onClose}"
+          data-testid="mobile-menu-done"
           style="
           display:flex;
+          justify-content: flex-end;
           font-weight: 500;
           font-size: 17px;
           color: ${unsafeCSSVarV2('button/primary')};
-          width: 50px;
-          flex-shrink: 0;
+          flex: 1 1 0;
+          min-width: max-content;
+          white-space: nowrap;
           margin-right: 10px;
          "
         >
@@ -452,6 +468,7 @@ export const popupTargetFromElement = (element) => {
             },
         },
         root: getDefaultModalRoot(element),
+        element,
         popupStart: () => {
             if (!count) {
                 isActive = element.classList.contains('active');
@@ -509,9 +526,32 @@ export const createPopup = (target, content, options) => {
     };
     return close;
 };
-const popMobileMenu = (options) => {
+/** The editor an element sits in, asked the way a `@consume` asks. */
+const stdAround = (element) => {
+    let std;
+    element?.dispatchEvent(new ContextEvent(stdContext, element, value => {
+        std = value;
+    }));
+    return std;
+};
+/**
+ * A phone's sheet hangs from the body, out of the editor's DOM, where nothing
+ * provides `std`: its modal provides the editor of the element it opens from,
+ * so the sheet's "Done" and whatever it renders speak the host's catalogue,
+ * and a sub-menu opened from it finds the same editor again.
+ */
+const popMobileMenu = (options, target) => {
     const model = createModal(document.body);
+    const std = stdAround(target?.element);
+    if (std) {
+        new ContextProvider(model, { context: stdContext, initialValue: std });
+    }
     model.style.position = 'fixed';
+    model.style.background = 'var(--affine-v2-layer-background-mobile-modal)';
+    model.addEventListener('click', e => {
+        if (e.target === model)
+            menu.close();
+    });
     const menu = new Menu({
         ...options,
         onClose: () => {
@@ -530,13 +570,13 @@ const popMobileMenu = (options) => {
         menu,
         reopen: () => {
             menu.close();
-            popMobileMenu(options);
+            popMobileMenu(options, target);
         },
     };
 };
 export const popMenu = (target, props) => {
     if (IS_MOBILE) {
-        return popMobileMenu(props.options);
+        return popMobileMenu(props.options, target);
     }
     const popupEnd = target.popupStart();
     const onClose = () => {

package/dist/_pkgs/affine-components/drop-indicator/file-drop-manager.js

@@ -1,4 +1,5 @@
 import { NoteBlockModel } from '../../affine-model/index.js';
+import { pageDropVerdict } from '../../affine-shared/services/index.js';
 import { calcDropTarget, getClosestBlockComponentByPoint, isInsidePageEditor, matchModels, } from '../../affine-shared/utils/index.js';
 import { createIdentifier } from '../../global/di/index.js';
 import { Point } from '../../global/gfx/index.js';
@@ -59,7 +60,21 @@ export class FileDropExtension extends LifeCycleWatcher {
             this.point$.value = null;
         };
         this.onDragOver = (event) => {
+            // A page the host refuses here (`PageDropProvider`): no drop line, and
+            // no preventDefault, so the browser shows its no-drop cursor and never
+            // fires the drop.
+            const verdict = pageDropVerdict(this.std, event.dataTransfer);
+            if (verdict === 'refuse') {
+                if (event.dataTransfer)
+                    event.dataTransfer.dropEffect = 'none';
+                this.onDragLeave();
+                return;
+            }
             event.preventDefault();
+            // The host's drag allows 'move' only: say so, or the drop never fires.
+            if (verdict === 'accept' && event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
             if (this.shouldIgnoreEvent(event))
                 return;
             this.updatePoint(event);

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

@@ -18,8 +18,10 @@ const shapeRenderers = {
     polygon,
 };
 export const shape = (model, ctx, matrix, renderer, rc) => {
-    const color = renderer.getColorValue(model.color, DefaultTheme.shapeTextColor, true);
-    const fillColor = renderer.getColorValue(model.fillColor, DefaultTheme.shapeFillColor, true);
+    // A notation body is a surface: on a dark canvas a white one inverts with
+    // the paper, and the words on it follow their paper (ADR 0039).
+    const fillColor = renderer.getColorValue(model.fillColor, DefaultTheme.shapeFillColor, true, 'fill');
+    const color = renderer.getInkColorValue(model.color, DefaultTheme.shapeTextColor, model.filled ? model.fillColor : null);
     const strokeColor = renderer.getColorValue(model.strokeColor, DefaultTheme.shapeStrokeColor, true);
     const colors = { color, fillColor, strokeColor };
     shapeRenderers[model.shapeType](model, ctx, matrix, renderer, rc, colors);

package/dist/_pkgs/affine-inline-link/link-node/link-popup/styles.js

@@ -34,7 +34,7 @@ const editLinkStyle = css `
   .affine-link-edit-popover input::placeholder {
     color: var(--affine-placeholder-color);
   }
-  input:focus {
+  link-popup input:focus {
     outline: none;
   }
   .affine-link-edit-popover input:focus ~ label,