@formicoidea/labre-core 0.53.0 → 0.55.0

package/dist/_pkgs/affine-block-data-view/data-view-block.js

@@ -85,7 +85,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent {
             style="display:flex;align-items:center;justify-content: space-between;gap: 12px"
             class="database-header-bar"
           >
-            <div style="flex:1">
+            <div style="flex:1;min-width:0">
               ${renderUniLit(widgetPresets.viewBar, props)}
             </div>
             ${renderUniLit(this.toolsWidget, props)}

package/dist/_pkgs/affine-block-database/components/title/index.js

@@ -32,6 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { DOC_UNTITLED, translateKey } from '../../../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../../../affine-shared/theme/index.js';
 import { stopPropagation } from '../../../affine-shared/utils/index.js';
 import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
@@ -112,7 +113,7 @@ let DatabaseTitle = (() => {
     }
 
     .affine-database-title [data-title-empty='true']::before {
-      content: 'Untitled';
+      content: attr(data-untitled);
       position: absolute;
       pointer-events: none;
       color: var(--affine-text-primary-color);
@@ -152,12 +153,16 @@ let DatabaseTitle = (() => {
                 height: isEmpty ? 'auto' : 0,
                 opacity: isEmpty && !this.isFocus$.value ? 1 : 0,
             });
+            const std = this.database?.std;
+            // A base is a page: its empty title is the page's "Untitled" (P7).
+            const untitled = std ? translateKey(std, ...DOC_UNTITLED) : DOC_UNTITLED[1];
             return html ` <div
       class="${classList}"
       data-title-empty="${isEmpty}"
       data-title-focus="${this.isFocus$.value}"
+      data-untitled="${untitled}"
     >
-      <div class="text" style="${untitledStyle}">Untitled</div>
+      <div class="text" style="${untitledStyle}">${untitled}</div>
       <div class="text">${this.text$.value}</div>
       <textarea
         .disabled="${this.readonly$.value}"

package/dist/_pkgs/affine-block-database/database-block-styles.js

@@ -46,14 +46,22 @@ export const databaseTitleRowStyles = css({
     marginBottom: '8px',
     alignItems: 'center',
 });
+// Too narrow for the tabs and the tools side by side (a phone, P7), the tools
+// drop to a line of their own, on the right, instead of squeezing the
+// current view's tab to its icon.
 export const databaseToolbarRowStyles = css({
     display: 'flex',
+    flexWrap: 'wrap',
     alignItems: 'center',
     justifyContent: 'space-between',
     gap: '12px',
+    '& data-view-header-tools': {
+        marginLeft: 'auto',
+    },
 });
 export const databaseViewBarContainerStyles = css({
-    flex: 1,
+    flex: '1 1 200px',
+    minWidth: 0,
 });
 export const databaseContentStyles = css({
     position: 'relative',

package/dist/_pkgs/affine-block-embed-doc/page-drop/page-drop.d.ts

@@ -0,0 +1,70 @@
+import { type PageDrop } from '../../affine-shared/services/index.js';
+import { type IVec } from '../../global/gfx/index.js';
+import { type BlockStdScope, LifeCycleWatcher } from '../../std/index.js';
+import type { BlockModel, Store } from '../../store/index.js';
+/** The drop line in a note: a block and which side of it. */
+export interface PageDropLine {
+    model: BlockModel;
+    placement: 'before' | 'after';
+}
+/**
+ * Where a dropped page's card goes (labre P7, ADR-0045 §7 amended
+ * 2026-10-16), mirroring "Show here" (`fragments/doc-title`, `show-here.ts`):
+ *
+ * - on a drop line in a note (page view, or a note on the canvas): a block
+ *   beside the line's block, climbing out of whatever cannot hold a card (a
+ *   list item, a callout) to the first parent that can;
+ * - on the canvas, off any note: a canvas card centred on the drop point,
+ *   through the CRUD `addBlock`, which stamps the viewer's active layer
+ *   (ADR 0031 §6), then selected;
+ * - in the page view with no line (dropped under the content): the end of
+ *   the last note.
+ *
+ * The caller owns the undo step (`captureSync` around it). Returns the new
+ * card's id, or `null` when nothing was written (read-only, no root).
+ */
+export declare function placePageCard(std: BlockStdScope, pageId: string, at: {
+    canvas: boolean;
+    line: PageDropLine | null;
+    point: IVec;
+}): string | null;
+/**
+ * The drop line under a client point, as the editor's own file drop draws it
+ * (`FileDropExtension.dropTarget$`): none on the canvas itself or on a block
+ * that sits on it, only inside a note.
+ */
+export declare function dropLineAt(std: BlockStdScope, clientX: number, clientY: number): PageDropLine | null;
+/**
+ * Hangs the host's `undo` / `redo` on the undo step that holds the card (the
+ * last one, the caller having opened it with `captureSync`), so one Mod+Z
+ * removes the card AND puts back what the host did. Yjs gives a popped step's
+ * twin (the redo step an undo creates, and back) a fresh `meta`: the hooks are
+ * carried over at each pop. A step whose card was already gone (removed by
+ * another peer) changes nothing, so Yjs skips it and the host's hooks are not
+ * called: the page stays where the drop put it, nothing is lost.
+ */
+export declare function rideUndoStep(store: Store, drop: PageDrop): void;
+/** The `stack-item-popped` half of {@link rideUndoStep}. */
+export declare function runUndoHooks(store: Store, event: {
+    stackItem: {
+        meta: Map<unknown, unknown>;
+    };
+    type: 'undo' | 'redo';
+}): void;
+/**
+ * The whole drop: ask the host, place the card in one undo step, hang the
+ * host's hooks on it. A drop the host turns down, or a card that cannot be
+ * placed, writes nothing (the host's own change is undone at once).
+ */
+export declare function dropPage(std: BlockStdScope, event: Pick<DragEvent, 'dataTransfer' | 'clientX' | 'clientY'>, canvas: boolean): string | null;
+/**
+ * Mounts the page drop on the editor: a native drop the host accepts places
+ * the page's card, and the history runs the host's hooks with the card's
+ * undo step. Without a `PageDropProvider` nothing changes: `dropPage` returns
+ * at the verdict.
+ */
+export declare class PageDropWatcher extends LifeCycleWatcher {
+    static readonly key = "labre-page-drop-watcher";
+    private readonly _onPopped;
+    mounted(): void;
+}

package/dist/_pkgs/affine-block-embed-doc/page-drop/page-drop.js

@@ -0,0 +1,196 @@
+import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
+import { EMBED_CARD_HEIGHT, EMBED_CARD_WIDTH, } from '../../affine-shared/consts/index.js';
+import { PageDropProvider, pageDropVerdict, TelemetryProvider, } from '../../affine-shared/services/index.js';
+import { calcDropTarget, getClosestBlockComponentByPoint, getLastNoteBlock, isInsideEdgelessEditor, matchModels, } from '../../affine-shared/utils/index.js';
+import { Bound, Point } from '../../global/gfx/index.js';
+import { LifeCycleWatcher } from '../../std/index.js';
+import { GfxControllerIdentifier, SurfaceBlockModel } from '../../std/gfx/index.js';
+const LINKED_DOC = 'affine:embed-linked-doc';
+/** The canvas card's style, the one "Show here" and "Linked doc" insert. */
+const CANVAS_STYLE = 'vertical';
+/** Where the host's `undo` / `redo` ride on the card's undo step. */
+const UNDO_HOOKS = 'labre:page-drop';
+/**
+ * Where a dropped page's card goes (labre P7, ADR-0045 §7 amended
+ * 2026-10-16), mirroring "Show here" (`fragments/doc-title`, `show-here.ts`):
+ *
+ * - on a drop line in a note (page view, or a note on the canvas): a block
+ *   beside the line's block, climbing out of whatever cannot hold a card (a
+ *   list item, a callout) to the first parent that can;
+ * - on the canvas, off any note: a canvas card centred on the drop point,
+ *   through the CRUD `addBlock`, which stamps the viewer's active layer
+ *   (ADR 0031 §6), then selected;
+ * - in the page view with no line (dropped under the content): the end of
+ *   the last note.
+ *
+ * The caller owns the undo step (`captureSync` around it). Returns the new
+ * card's id, or `null` when nothing was written (read-only, no root).
+ */
+export function placePageCard(std, pageId, at) {
+    const { store } = std;
+    if (store.readonly || !store.root || !pageId)
+        return null;
+    let id = null;
+    if (at.line)
+        id = insertBeside(store, pageId, at.line);
+    else if (at.canvas)
+        id = insertOnCanvas(std, pageId, at.point);
+    else
+        id = insertAtEnd(store, pageId);
+    if (id) {
+        std.getOptional(TelemetryProvider)?.track('BlockCreated', {
+            blockType: LINKED_DOC,
+        });
+    }
+    return id;
+}
+function insertBeside(store, pageId, line) {
+    let model = line.model;
+    let placement = line.placement;
+    while (model) {
+        const parent = store.getParent(model);
+        if (!parent)
+            return null;
+        if (store.schema.safeValidate(LINKED_DOC, parent.flavour)) {
+            return (store.addSiblingBlocks(model, [{ flavour: LINKED_DOC, pageId }], placement)[0] ?? null);
+        }
+        // Out of a list item or a callout: the card goes after the container.
+        model = parent;
+        placement = 'after';
+    }
+    return null;
+}
+function insertAtEnd(store, pageId) {
+    const root = store.root;
+    if (!root)
+        return null;
+    const noteId = getLastNoteBlock(store)?.id ?? store.addBlock('affine:note', {}, root.id);
+    return store.addBlock(LINKED_DOC, { pageId }, noteId);
+}
+function insertOnCanvas(std, pageId, point) {
+    const gfx = std.get(GfxControllerIdentifier);
+    const surface = gfx.surface;
+    if (!surface)
+        return null;
+    const xywh = Bound.fromCenter(gfx.viewport.toModelCoordFromClientCoord(point), EMBED_CARD_WIDTH[CANVAS_STYLE], EMBED_CARD_HEIGHT[CANVAS_STYLE]).serialize();
+    const id = std
+        .get(EdgelessCRUDIdentifier)
+        .addBlock(LINKED_DOC, { pageId, xywh, style: CANVAS_STYLE }, surface);
+    gfx.selection.set({ elements: [id], editing: false });
+    return id;
+}
+/**
+ * The drop line under a client point, as the editor's own file drop draws it
+ * (`FileDropExtension.dropTarget$`): none on the canvas itself or on a block
+ * that sits on it, only inside a note.
+ */
+export function dropLineAt(std, clientX, clientY) {
+    const point = new Point(clientX, clientY);
+    const element = getClosestBlockComponentByPoint(point);
+    if (!element)
+        return null;
+    const model = element.model;
+    if (matchModels(std.store.getParent(model), [SurfaceBlockModel]))
+        return null;
+    const target = calcDropTarget(point, model, element);
+    if (!target)
+        return null;
+    const placement = target.placement === 'before' ? 'before' : 'after';
+    return { model: target.modelState.model, placement };
+}
+/**
+ * Hangs the host's `undo` / `redo` on the undo step that holds the card (the
+ * last one, the caller having opened it with `captureSync`), so one Mod+Z
+ * removes the card AND puts back what the host did. Yjs gives a popped step's
+ * twin (the redo step an undo creates, and back) a fresh `meta`: the hooks are
+ * carried over at each pop. A step whose card was already gone (removed by
+ * another peer) changes nothing, so Yjs skips it and the host's hooks are not
+ * called: the page stays where the drop put it, nothing is lost.
+ */
+export function rideUndoStep(store, drop) {
+    if (!drop.undo && !drop.redo)
+        return;
+    store.history.undoManager.undoStack.at(-1)?.meta.set(UNDO_HOOKS, drop);
+}
+/** The `stack-item-popped` half of {@link rideUndoStep}. */
+export function runUndoHooks(store, event) {
+    const drop = event.stackItem.meta.get(UNDO_HOOKS);
+    if (!drop)
+        return;
+    const manager = store.history.undoManager;
+    const twin = event.type === 'undo' ? manager.redoStack.at(-1) : manager.undoStack.at(-1);
+    twin?.meta.set(UNDO_HOOKS, drop);
+    if (event.type === 'undo')
+        drop.undo?.();
+    else
+        drop.redo?.();
+}
+/**
+ * Drops already placed: an editor nested in another (a synced page's
+ * content) sees the same bubbling event as its host, and one drop is one card.
+ */
+const handled = new WeakSet();
+/**
+ * The whole drop: ask the host, place the card in one undo step, hang the
+ * host's hooks on it. A drop the host turns down, or a card that cannot be
+ * placed, writes nothing (the host's own change is undone at once).
+ */
+export function dropPage(std, event, canvas) {
+    const { dataTransfer } = event;
+    if (!dataTransfer || dataTransfer.files.length > 0)
+        return null;
+    if (handled.has(event))
+        return null;
+    if (pageDropVerdict(std, dataTransfer) !== 'accept')
+        return null;
+    const service = std.getOptional(PageDropProvider);
+    if (!service)
+        return null;
+    const { store } = std;
+    const line = dropLineAt(std, event.clientX, event.clientY);
+    handled.add(event);
+    const drop = service.drop({ dataTransfer, docId: store.id });
+    if (!drop)
+        return null;
+    store.captureSync();
+    const id = placePageCard(std, drop.pageId, {
+        canvas,
+        line,
+        point: [event.clientX, event.clientY],
+    });
+    if (!id) {
+        drop.undo?.();
+        return null;
+    }
+    rideUndoStep(store, drop);
+    store.captureSync();
+    return id;
+}
+/**
+ * Mounts the page drop on the editor: a native drop the host accepts places
+ * the page's card, and the history runs the host's hooks with the card's
+ * undo step. Without a `PageDropProvider` nothing changes: `dropPage` returns
+ * at the verdict.
+ */
+export class PageDropWatcher extends LifeCycleWatcher {
+    constructor() {
+        super(...arguments);
+        this._onPopped = (event) => runUndoHooks(this.std.store, event);
+    }
+    static { this.key = 'labre-page-drop-watcher'; }
+    mounted() {
+        super.mounted();
+        const { std } = this;
+        std.event.disposables.add(std.event.add('nativeDrop', context => {
+            const event = context.get('dndState').raw;
+            // Never `return true`: that would stop the dispatch before the file
+            // drop's own handler, which clears the drop line it drew.
+            if (dropPage(std, event, isInsideEdgelessEditor(std.host))) {
+                event.preventDefault();
+            }
+        }));
+        const manager = std.store.history.undoManager;
+        manager.on('stack-item-popped', this._onPopped);
+        std.event.disposables.add(() => manager.off('stack-item-popped', this._onPopped));
+    }
+}

package/dist/_pkgs/affine-block-embed-doc/view.js

@@ -3,6 +3,7 @@ import { effects } from './effects.js';
 import { EdgelessClipboardEmbedLinkedDocConfig, EmbedLinkedDocInteraction, EmbedLinkedDocViewExtensions, } from './embed-linked-doc-block/index.js';
 import { EdgelessClipboardEmbedSyncedDocConfig, EmbedSyncedDocViewExtensions, } from './embed-synced-doc-block/index.js';
 import { EmbedSyncedDocInteraction } from './embed-synced-doc-block/configs/edgeless-interaction.js';
+import { PageDropWatcher } from './page-drop/page-drop.js';
 export class EmbedDocViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);
@@ -16,6 +17,8 @@ export class EmbedDocViewExtension extends ViewExtensionProvider {
         super.setup(context);
         context.register(EmbedLinkedDocViewExtensions);
         context.register(EmbedSyncedDocViewExtensions);
+        // Pages dragged in from the host (PageDropProvider), both views.
+        context.register(PageDropWatcher);
         const isEdgeless = this.isEdgeless(context.scope);
         if (isEdgeless) {
             context.register([

package/dist/_pkgs/affine-block-frame/frame-template.d.ts

@@ -48,6 +48,17 @@ export declare class FrameTemplateWatcher extends LifeCycleWatcher {
     mounted(): void;
     unmounted(): void;
 }
+interface NoticeAction {
+    key: string;
+    label: string;
+    onClick: () => void;
+}
+/**
+ * The success notification's « View », when the host can show its templates
+ * (labre P7): it calls `showTemplates` and nothing else. Absent, the
+ * notification has no action, as before 0.54.
+ */
+export declare function templateViewAction(std: BlockStdScope, service: FrameTemplateService): NoticeAction | undefined;
 /**
  * "Save as template": serialize the frame and hand it to the host. Reads the
  * document and writes nothing to it, so a read-only viewer may save too: the

package/dist/_pkgs/affine-block-frame/frame-template.js

@@ -4,7 +4,7 @@ import { ConnectorElementModel, } from '../affine-model/index.js';
 import { FrameTemplateProvider, NotificationProvider, translateKey, } from '../affine-shared/services/index.js';
 import { LifeCycleWatcher } from '../std/index.js';
 import { GfxBlockElementModel } from '../std/gfx/index.js';
-import { FRAME_TOAST_TEMPLATE_SAVE_FAILED, FRAME_TOAST_TEMPLATE_SAVED, } from './translations.js';
+import { FRAME_TOAST_TEMPLATE_SAVE_FAILED, FRAME_TOAST_TEMPLATE_SAVED, FRAME_TOAST_TEMPLATE_VIEW, } from './translations.js';
 /**
  * Narrow a transformer to one frame's members: the surface keeps only the
  * elements and child blocks in `ids` — the surface transformer's own
@@ -160,15 +160,35 @@ export class FrameTemplateWatcher extends LifeCycleWatcher {
 }
 /** Frames whose save is in flight, per document: a double click saves once. */
 const saving = new Set();
-function tell(std, wording, success) {
+function tell(std, wording, success, action) {
     const text = translateKey(std, ...wording);
     const notification = std.getOptional(NotificationProvider);
     if (notification) {
-        notification.notify({ title: text, accent: success ? 'success' : 'error' });
+        notification.notify({
+            title: text,
+            accent: success ? 'success' : 'error',
+            ...(action ? { actions: [action] } : {}),
+        });
         return;
     }
+    // The plain toast has no button: without a notification service the
+    // action is dropped, and the template is still where the host keeps it.
     toast(std.host, text);
 }
+/**
+ * The success notification's « View », when the host can show its templates
+ * (labre P7): it calls `showTemplates` and nothing else. Absent, the
+ * notification has no action, as before 0.54.
+ */
+export function templateViewAction(std, service) {
+    if (!service.showTemplates)
+        return undefined;
+    return {
+        key: 'frame-template-view',
+        label: translateKey(std, ...FRAME_TOAST_TEMPLATE_VIEW),
+        onClick: () => service.showTemplates?.(),
+    };
+}
 /**
  * "Save as template": serialize the frame and hand it to the host. Reads the
  * document and writes nothing to it, so a read-only viewer may save too: the
@@ -195,7 +215,7 @@ export async function saveFrameAsTemplate(std, frame) {
             title: snapshot.meta.title,
             snapshot,
         });
-        tell(std, FRAME_TOAST_TEMPLATE_SAVED, true);
+        tell(std, FRAME_TOAST_TEMPLATE_SAVED, true, templateViewAction(std, service));
     }
     catch (error) {
         console.error(error);

package/dist/_pkgs/affine-block-frame/translations.d.ts

@@ -41,6 +41,9 @@ export declare const FRAME_TOOLBAR_UNGROUP: ChromeWording;
 export declare const FRAME_TOOLBAR_SAVE_AS_TEMPLATE: ChromeWording;
 export declare const FRAME_TOAST_TEMPLATE_SAVED: ChromeWording;
 export declare const FRAME_TOAST_TEMPLATE_SAVE_FAILED: ChromeWording;
+/** The success notification's action, when the host can show its templates
+ *  (`FrameTemplateService.showTemplates`). */
+export declare const FRAME_TOAST_TEMPLATE_VIEW: ChromeWording;
 export declare const FRAME_TOOLBAR_BACKGROUND: ChromeWording;
 export declare const FRAME_PRESENT_TOOL_TOOLTIP: ChromeWording;
 export declare const FRAME_PRESENT_PREVIOUS: ChromeWording;

package/dist/_pkgs/affine-block-frame/translations.js

@@ -61,6 +61,12 @@ export const FRAME_TOAST_TEMPLATE_SAVE_FAILED = [
     'com.labre.frame.toast.template-save-failed',
     'The frame could not be saved as a template',
 ];
+/** The success notification's action, when the host can show its templates
+ *  (`FrameTemplateService.showTemplates`). */
+export const FRAME_TOAST_TEMPLATE_VIEW = [
+    'com.labre.frame.toast.template-view',
+    'View',
+];
 export const FRAME_TOOLBAR_BACKGROUND = [
     'com.labre.frame.toolbar.background',
     'Background',
@@ -132,6 +138,7 @@ export const FRAME_CHROME_WORDINGS = [
     FRAME_TOOLBAR_BACKGROUND,
     FRAME_TOAST_TEMPLATE_SAVED,
     FRAME_TOAST_TEMPLATE_SAVE_FAILED,
+    FRAME_TOAST_TEMPLATE_VIEW,
     FRAME_PRESENT_TOOL_TOOLTIP,
     FRAME_PRESENT_PREVIOUS,
     FRAME_PRESENT_NEXT,

package/dist/_pkgs/affine-block-surface/extensions/export-svg/render.js

@@ -1,4 +1,4 @@
-import { FrameworkBackgroundElementModel } from '../../../affine-model/index.js';
+import { ColorScheme, FrameworkBackgroundElementModel, } from '../../../affine-model/index.js';
 import { createIdentifier } from '../../../global/di/index.js';
 import { Bound } from '../../../global/gfx/index.js';
 import { GfxBlockElementModel, GfxControllerIdentifier, GfxPrimitiveElementModel, } from '../../../std/gfx/index.js';
@@ -149,10 +149,16 @@ export function renderCanvasSvg(std) {
  * `bound`, one model per pass, each inside a group carrying its markers (ADR
  * 0032 §6), in the canvas' own z-order: a text block is painted at its layer
  * index, between the elements it sits between on screen.
+ *
+ * Always in the LIGHT scheme, whatever the canvas shows (ADR 0039): the file
+ * is printed on white, read back by the SVG importer by its stored colours
+ * (rule R33), and a `{ light, dark }` pair painted on its dark side would turn
+ * a black stroke white on a white page. The PNG export, a picture of the
+ * screen, keeps the scheme in force.
  */
 function paintSvg(std, renderer, elements, texts, bound) {
     const gfx = std.get(GfxControllerIdentifier);
-    return runWithRecordingPath2D(() => {
+    return renderer.withColorScheme(ColorScheme.Light, () => runWithRecordingPath2D(() => {
         const { ctx, canvas, serialize, markRoot, markedGroup } = createSvgContext(bound.w, bound.h);
         const rc = new RoughCanvas(canvas);
         markRoot();
@@ -174,7 +180,7 @@ function paintSvg(std, renderer, elements, texts, bound) {
             });
         }
         return { svg: serialize(), bound };
-    });
+    }));
 }
 /**
  * What an element's group says about it in the file (ADR 0032 §6): its id, its

package/dist/_pkgs/affine-block-surface/framework-background/renderer.js

@@ -1,4 +1,5 @@
 import { TranslationProvider } from '../../affine-shared/services/index.js';
+import { notationColor, } from '../renderer/notation-tint.js';
 import { backgroundColor, backgroundInstanceZoneBand, backgroundInstanceZones, backgroundPlot, backgroundPoint, BROKEN_BACKGROUND_COLOR, DEFAULT_BACKGROUND_SURFACE, warnBrokenBackgroundColor, } from './def.js';
 import { backgroundInVariant, backgroundLabelText, backgroundTexts, backgroundVisible, } from './labels.js';
 /**
@@ -106,12 +107,15 @@ export function createFrameworkBackgroundRenderer(def) {
     const palette = def.chrome?.palette;
     const family = def.chrome?.fontFamily ?? DEFAULT_FONT_FAMILY;
     const surface = def.chrome?.surface ?? DEFAULT_BACKGROUND_SURFACE;
-    const color = (c) => backgroundColor(c, palette);
+    const declared = (c) => backgroundColor(c, palette);
     const texts = backgroundTexts(def);
     // The DECLARATION of the instance partition — how it stacks, how it is drawn.
     // What it contains is the model's business and is read on every paint.
     const instanceZonesDef = def.instanceZones;
     return (model, ctx, matrix, renderer) => {
+        // A board is chrome painted at render time, so on a dark canvas every
+        // declared colour goes through the dark notation table (ADR 0039).
+        const color = (c, use = 'ink') => notationColor(renderer, declared(c), use);
         const props = model;
         const visible = (prop) => backgroundVisible(prop, props);
         // Which READING of the frame this instance is showing. Washes, zones and
@@ -175,7 +179,7 @@ export function createFrameworkBackgroundRenderer(def) {
         // neither its fill nor its frame is painted.
         const carded = cardPath();
         if (carded && surface.fill) {
-            ctx.fillStyle = color(surface.fill);
+            ctx.fillStyle = color(surface.fill, 'fill');
             ctx.fill();
         }
         // The side bands sit BETWEEN the fill and the border: a band is part of the
@@ -194,7 +198,7 @@ export function createFrameworkBackgroundRenderer(def) {
                 if (thickness <= 0)
                     continue;
                 if (band.fill) {
-                    ctx.fillStyle = color(band.fill);
+                    ctx.fillStyle = color(band.fill, 'fill');
                     if (top)
                         ctx.fillRect(0, 0, w, thickness);
                     else
@@ -236,7 +240,7 @@ export function createFrameworkBackgroundRenderer(def) {
                 if (!visible(wash.visibleProp))
                     continue;
                 const gradient = ctx.createLinearGradient(x0, 0, x1, 0);
-                const hex = color(wash.color);
+                const hex = color(wash.color, 'fill');
                 for (const [offset, alpha] of wash.stops) {
                     gradient.addColorStop(offset, rgba(hex, alpha));
                 }
@@ -252,7 +256,7 @@ export function createFrameworkBackgroundRenderer(def) {
                 continue;
             if (!visible(zone.fillVisibleProp))
                 continue;
-            ctx.fillStyle = color(zone.fill);
+            ctx.fillStyle = color(zone.fill, 'fill');
             ctx.fillRect(x0 + zone.rect.x * pw, y0 + zone.rect.y * ph, zone.rect.w * pw, zone.rect.h * ph);
         }
         // The partition THIS element carries, resolved once per paint: alone on

package/dist/_pkgs/affine-block-surface/index.d.ts

@@ -4,6 +4,7 @@ export { SurfaceElementModel, SurfaceGroupLikeModel, } from './element-model/bas
 export { CanvasElementType } from './element-model/index.js';
 export { CanvasRenderer } from './renderer/canvas-renderer.js';
 export { DomRenderer } from './renderer/dom-renderer.js';
+export * from './renderer/notation-tint.js';
 export { isPainted } from './renderer/paint-predicate.js';
 export { ElementHighlightOverlay } from './renderer/element-highlight-overlay.js';
 export type { ElementRenderer } from './renderer/elements/index.js';

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

@@ -6,6 +6,7 @@ export { SurfaceElementModel, SurfaceGroupLikeModel, } from './element-model/bas
 export { CanvasElementType } from './element-model/index.js';
 export { CanvasRenderer } from './renderer/canvas-renderer.js';
 export { DomRenderer } from './renderer/dom-renderer.js';
+export * from './renderer/notation-tint.js';
 export { isPainted } from './renderer/paint-predicate.js';
 export { ElementHighlightOverlay } from './renderer/element-highlight-overlay.js';
 export * from './renderer/elements/type.js';

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

@@ -5,12 +5,14 @@ import type { GfxLocalElementModel, GridManager, LayerManager, SurfaceBlockModel
 import { Subject } from 'rxjs';
 import type { SurfaceElementModel } from '../element-model/base.js';
 import { RoughCanvas } from '../utils/rough/canvas.js';
+import { type NotationColorUse, NotationTint } from './notation-tint.js';
 import type { Overlay } from './overlay.js';
 type EnvProvider = {
     generateColorProperty: (color: Color, fallback?: Color) => string;
     getColorScheme: () => ColorScheme;
-    getColorValue: (color: Color, fallback?: Color, real?: boolean) => string;
-    getPropertyValue: (property: string) => string;
+    /** `theme` absent: the scheme in force. */
+    getColorValue: (color: Color, fallback?: Color, real?: boolean, theme?: ColorScheme) => string;
+    getPropertyValue: (property: string, theme?: ColorScheme) => string;
     selectedElements?: () => string[];
 };
 type RendererOptions = {
@@ -96,6 +98,19 @@ export declare class CanvasRenderer {
     }>;
     usePlaceholder: boolean;
     viewport: Viewport;
+    private readonly _surface;
+    /** Set by {@link withColorScheme} for the length of one paint. */
+    private _schemeOverride;
+    /** Built on the first dark paint, from the registered framework entries. */
+    private _darkTint;
+    private _notationTint;
+    /**
+     * 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(): NotationTint | null;
     get stackingCanvas(): HTMLCanvasElement[];
     constructor(options: RendererOptions);
     /**
@@ -144,8 +159,45 @@ export declare class CanvasRenderer {
      */
     renderBoundTo(ctx: CanvasRenderingContext2D, rc: RoughCanvas, bound: IBound, surfaceElements?: SurfaceElementModel[]): void;
     getColorScheme(): ColorScheme;
-    getColorValue(color: Color, fallback?: Color, real?: boolean): string;
+    /**
+     * 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: Color, fallback?: Color, real?: boolean, use?: NotationColorUse): string;
+    /**
+     * 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: Color, fallback: Color, fill: Color | null): string;
     getPropertyValue(property: string): string;
+    /**
+     * 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<T>(scheme: ColorScheme, paint: () => T): T;
+    /**
+     * "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.
+     */
+    private _sitsOnKeptPaper;
+    /** The dark table when this pass paints dark, else `null`. */
+    private _tintForPass;
+    /**
+     * 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.
+     */
+    private _isNotation;
     getDebugMetrics(): CanvasRendererDebugMetrics;
     resetDebugMetrics(): void;
     refresh(target?: RefreshTarget): void;