@formicoidea/labre-core 0.43.1 → 0.46.0

package/dist/_pkgs/affine-shared/utils/canvas-export-colors.js

@@ -0,0 +1,127 @@
+/**
+ * The colour functions html2canvas 1.4.1 cannot parse. Its parser knows hex,
+ * `rgb[a]()`, `hsl[a]()` and keywords and THROWS on anything else, aborting
+ * the whole export. `color(` is what Chrome computes `color-mix(in srgb, …)`
+ * to; `color-mix` and `light-dark` are here for a computed value that keeps
+ * them. `color-mix` precedes `color` so the longer name wins.
+ */
+const MODERN_COLOR_FUNCTION = /\b(?:oklch|oklab|lch|lab|hwb|color-mix|color|light-dark)\(/gi;
+/**
+ * Every computed property html2canvas reads a colour from. Shorthands are
+ * absent on purpose: html2canvas reads the longhands.
+ */
+const COLOR_PROPERTIES = [
+    'color',
+    'background-color',
+    'background-image',
+    'border-top-color',
+    'border-right-color',
+    'border-bottom-color',
+    'border-left-color',
+    'outline-color',
+    'text-decoration-color',
+    '-webkit-text-stroke-color',
+    'text-shadow',
+    'box-shadow',
+    'caret-color',
+    'fill',
+    'stroke',
+];
+let probe;
+const resolved = new Map();
+/**
+ * The browser's own reading of a colour, through a 1×1 canvas: paint it, read
+ * the pixel back. Reading `fillStyle` back is not enough — recent engines keep
+ * the modern syntax there. Cached per string, since a theme repeats a handful
+ * of colours across every node. Where no 2D context exists the colour comes
+ * back unchanged: there is nothing to rasterise with either.
+ */
+const resolveColorThroughCanvas = color => {
+    const cached = resolved.get(color);
+    if (cached !== undefined)
+        return cached;
+    probe ??= Object.assign(document.createElement('canvas'), {
+        width: 1,
+        height: 1,
+    }).getContext('2d', { willReadFrequently: true });
+    if (!probe)
+        return color;
+    probe.clearRect(0, 0, 1, 1);
+    probe.fillStyle = color;
+    probe.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = probe.getImageData(0, 0, 1, 1).data;
+    const legacy = a === 255
+        ? `rgb(${r}, ${g}, ${b})`
+        : `rgba(${r}, ${g}, ${b}, ${Number((a / 255).toFixed(3))})`;
+    resolved.set(color, legacy);
+    return legacy;
+};
+/**
+ * `value` with every modern colour function in it replaced by what `resolve`
+ * makes of it — the whole of `oklch(0.7 0.1 200)`, or each colour of a
+ * `box-shadow` list. A value with none comes back as the same string. Also
+ * what the `backgroundColor` option of html2canvas goes through.
+ */
+export function toLegacyColors(value, resolve = resolveColorThroughCanvas) {
+    MODERN_COLOR_FUNCTION.lastIndex = 0;
+    let match = MODERN_COLOR_FUNCTION.exec(value);
+    if (!match)
+        return value;
+    let out = '';
+    let from = 0;
+    while (match) {
+        // Balanced parentheses: `color-mix()` nests whole colours.
+        let end = match.index + match[0].length;
+        for (let depth = 1; end < value.length && depth > 0; end++) {
+            if (value[end] === '(')
+                depth++;
+            else if (value[end] === ')')
+                depth--;
+        }
+        out +=
+            value.slice(from, match.index) + resolve(value.slice(match.index, end));
+        from = end;
+        MODERN_COLOR_FUNCTION.lastIndex = end;
+        match = MODERN_COLOR_FUNCTION.exec(value);
+    }
+    return out + value.slice(from);
+}
+/**
+ * Rewrites, inline on the html2canvas CLONE, every computed colour html2canvas
+ * would choke on, so a host theme in `oklch()` (or the library's own
+ * `color-mix()`) cannot abort a PNG/PDF export or a "copy as image". Call it
+ * first in every `onclone`.
+ *
+ * html2canvas parses the computed style of the captured subtree AND of the
+ * clone's `<html>` and `<body>` (their background), so those two are covered
+ * too; shadow roots are already flattened into the clone by then. The resolved
+ * value is written over whatever produced it — a CSS variable, a stylesheet
+ * rule — as an `!important` inline declaration, which is what the computed
+ * style then reports. Every value is read before any is written, so the
+ * cascade is recomputed once rather than once per node.
+ */
+export function normalizeCanvasExportColors(documentClone, subtree, resolve = resolveColorThroughCanvas) {
+    const view = documentClone.defaultView ?? window;
+    const nodes = new Set([
+        documentClone.documentElement,
+        documentClone.body,
+        subtree,
+        ...subtree.querySelectorAll('*'),
+    ]);
+    const writes = [];
+    for (const node of nodes) {
+        const style = node?.style;
+        if (!node || !style)
+            continue;
+        const computed = view.getComputedStyle(node);
+        for (const property of COLOR_PROPERTIES) {
+            const value = computed.getPropertyValue(property);
+            const legacy = toLegacyColors(value, resolve);
+            if (legacy !== value)
+                writes.push([style, property, legacy]);
+        }
+    }
+    for (const [style, property, legacy] of writes) {
+        style.setProperty(property, legacy, 'important');
+    }
+}

package/dist/_pkgs/affine-shared/utils/file/filesys.d.ts

@@ -55,17 +55,14 @@ export declare function getImageFilesFromLocal(): Promise<File[]>;
 /**
  * A name a file system will accept, minus the extension.
  *
- * The sanitiser the framework exports each wrote for themselves
- * (`wardleySafeFilename`, `c4SafeFilename`, BPMN's) — same five steps, same
- * 120-character ceiling — lifted here for the callers that belong to no
- * framework at all. The generic SVG export (ADR 0025) is the first of them: it
- * writes a file for ELEVEN kinds of board, so it has no framework's fallback to
- * borrow and takes one as a parameter instead.
- *
- * The three framework copies stay where they are: each is part of an
- * interchange capability with its own format id and its own declared fallback
- * (`map`, `board`, `process`), and rewriting them to call this one would touch
- * three exported APIs for no behaviour change.
+ * Every file the library writes is named through it: the generic SVG export
+ * (ADR 0025), which writes a file for every kind of board and so takes its
+ * fallback as a parameter, and the framework interchanges, whose exported
+ * sanitisers (`wardleySafeFilename`, `c4SafeFilename`, `bpmnSafeFilename`,
+ * `umlSafeFilename`) keep their names and signatures and only supply their own
+ * fallback word. They were verbatim copies of this rule;
+ * `safe-filename-parity.unit.spec.ts` in `packages/affine/all` holds every one
+ * to it, because what a downloaded file is called is visible behaviour.
  */
 export declare function safeFilename(raw: string | undefined, fallback: string): string;
 export declare function downloadBlob(blob: Blob, name: string): void;

package/dist/_pkgs/affine-shared/utils/file/filesys.js

@@ -191,17 +191,14 @@ export async function getImageFilesFromLocal() {
 /**
  * A name a file system will accept, minus the extension.
  *
- * The sanitiser the framework exports each wrote for themselves
- * (`wardleySafeFilename`, `c4SafeFilename`, BPMN's) — same five steps, same
- * 120-character ceiling — lifted here for the callers that belong to no
- * framework at all. The generic SVG export (ADR 0025) is the first of them: it
- * writes a file for ELEVEN kinds of board, so it has no framework's fallback to
- * borrow and takes one as a parameter instead.
- *
- * The three framework copies stay where they are: each is part of an
- * interchange capability with its own format id and its own declared fallback
- * (`map`, `board`, `process`), and rewriting them to call this one would touch
- * three exported APIs for no behaviour change.
+ * Every file the library writes is named through it: the generic SVG export
+ * (ADR 0025), which writes a file for every kind of board and so takes its
+ * fallback as a parameter, and the framework interchanges, whose exported
+ * sanitisers (`wardleySafeFilename`, `c4SafeFilename`, `bpmnSafeFilename`,
+ * `umlSafeFilename`) keep their names and signatures and only supply their own
+ * fallback word. They were verbatim copies of this rule;
+ * `safe-filename-parity.unit.spec.ts` in `packages/affine/all` holds every one
+ * to it, because what a downloaded file is called is visible behaviour.
  */
 export function safeFilename(raw, fallback) {
     const safe = (raw ?? '')

package/dist/_pkgs/affine-shared/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './auto-scroll.js';
 export * from './button-popper.js';
+export * from './canvas-export-colors.js';
 export * from './collapsed/index.js';
 export * from './computing.js';
 export * from './dnd/index.js';
@@ -13,9 +14,11 @@ export * from './fractional-indexing.js';
 export * from './image.js';
 export * from './insert.js';
 export * from './is-abort-error.js';
+export * from './label-mode.js';
 export * from './link-preview-refresh.js';
 export * from './math.js';
 export * from './model/index.js';
+export * from './panel-reorder-drag.js';
 export * from './popper-position.js';
 export * from './print-to-pdf.js';
 export * from './reference.js';

package/dist/_pkgs/affine-shared/utils/index.js

@@ -1,5 +1,6 @@
 export * from './auto-scroll.js';
 export * from './button-popper.js';
+export * from './canvas-export-colors.js';
 export * from './collapsed/index.js';
 export * from './computing.js';
 export * from './dnd/index.js';
@@ -13,9 +14,11 @@ export * from './fractional-indexing.js';
 export * from './image.js';
 export * from './insert.js';
 export * from './is-abort-error.js';
+export * from './label-mode.js';
 export * from './link-preview-refresh.js';
 export * from './math.js';
 export * from './model/index.js';
+export * from './panel-reorder-drag.js';
 export * from './popper-position.js';
 export * from './print-to-pdf.js';
 export * from './reference.js';

package/dist/_pkgs/affine-shared/utils/label-mode.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Whether a catalogue symbol can carry its name INSIDE it, or the name must
+ * GRAVITATE around it (rule R38, `docs/add-a-framework/02-framework-rules.md`;
+ * ADR 0029).
+ *
+ * The rule has one criterion, the symbol's size: a normal-size text — 18 model
+ * units, the size Wardley's prominent labels and BPMN's inner text use — of two
+ * five-letter words must fit legibly inside the shape at its canonical creation
+ * size, without enlarging it. If it does not, the label is a free text element
+ * grouped with the symbol (R16) instead of the shape's own `text`.
+ *
+ * The test is arithmetic on the preset, so a framework's spec can assert its
+ * label mode for every kind without a canvas:
+ *
+ *  - the inner box is the shape minus the native shape text insets
+ *    (`SHAPE_TEXT_VERTICAL_PADDING` = 10, `SHAPE_TEXT_PADDING` = 20 in
+ *    `@labre/affine-model`, the defaults below);
+ *  - a non-rectangular silhouette only offers the rectangle inscribed in it:
+ *    ≈ 1/√2 of each side for an ellipse (0.7), half of each side for a diamond;
+ *  - the probe is "Hello World" (two five-letter words and a space), set on one
+ *    line or broken into two lines of five letters; it fits if either layout
+ *    fits.
+ *
+ * Average advance 0.5 em: Inter's advances for the probe itself ("Hello World"
+ * ≈ 5.4 em) average 0.49 em, which is what decides a 140-wide annotation at 18
+ * units — a generic 0.55 em prose average would reject a box the probe
+ * visibly fits. Line height 1.2 em, the renderer's default for single-spaced
+ * canvas text.
+ *
+ * ponytail: no real font metrics — a fixed per-glyph average and a fixed line
+ * height, so a shape within a few units of the threshold may be judged wrongly
+ * for a font other than Inter. The upgrade is to measure the probe with the
+ * shape renderer's `wrapText` / `getLineHeight` in a browser-mode spec.
+ */
+export interface InscribedLabelProbe {
+    /** Canonical creation width, model units. */
+    w: number;
+    /** Canonical creation height, model units. */
+    h: number;
+    /** Native shape type: `ellipse`, `diamond`, `rect`, or a polygon name. */
+    shapeType: string;
+    /** Reference size of the fit test, not a mandate for the label's own size. */
+    fontSize?: number;
+    /** `[vertical, horizontal]` inset, as the native shape pads its text. */
+    padding?: [number, number];
+}
+export declare const fitsInscribedLabel: ({ w, h, shapeType, fontSize, padding, }: InscribedLabelProbe) => boolean;

package/dist/_pkgs/affine-shared/utils/label-mode.js

@@ -0,0 +1,55 @@
+/**
+ * Whether a catalogue symbol can carry its name INSIDE it, or the name must
+ * GRAVITATE around it (rule R38, `docs/add-a-framework/02-framework-rules.md`;
+ * ADR 0029).
+ *
+ * The rule has one criterion, the symbol's size: a normal-size text — 18 model
+ * units, the size Wardley's prominent labels and BPMN's inner text use — of two
+ * five-letter words must fit legibly inside the shape at its canonical creation
+ * size, without enlarging it. If it does not, the label is a free text element
+ * grouped with the symbol (R16) instead of the shape's own `text`.
+ *
+ * The test is arithmetic on the preset, so a framework's spec can assert its
+ * label mode for every kind without a canvas:
+ *
+ *  - the inner box is the shape minus the native shape text insets
+ *    (`SHAPE_TEXT_VERTICAL_PADDING` = 10, `SHAPE_TEXT_PADDING` = 20 in
+ *    `@labre/affine-model`, the defaults below);
+ *  - a non-rectangular silhouette only offers the rectangle inscribed in it:
+ *    ≈ 1/√2 of each side for an ellipse (0.7), half of each side for a diamond;
+ *  - the probe is "Hello World" (two five-letter words and a space), set on one
+ *    line or broken into two lines of five letters; it fits if either layout
+ *    fits.
+ *
+ * Average advance 0.5 em: Inter's advances for the probe itself ("Hello World"
+ * ≈ 5.4 em) average 0.49 em, which is what decides a 140-wide annotation at 18
+ * units — a generic 0.55 em prose average would reject a box the probe
+ * visibly fits. Line height 1.2 em, the renderer's default for single-spaced
+ * canvas text.
+ *
+ * ponytail: no real font metrics — a fixed per-glyph average and a fixed line
+ * height, so a shape within a few units of the threshold may be judged wrongly
+ * for a font other than Inter. The upgrade is to measure the probe with the
+ * shape renderer's `wrapText` / `getLineHeight` in a browser-mode spec.
+ */
+/** The probe: two five-letter words, as in "Hello World". */
+const PROBE_WORD_LENGTH = 5;
+const PROBE_ONE_LINE_LENGTH = 2 * PROBE_WORD_LENGTH + 1;
+/** Average Inter advance over the probe, in em. */
+const AVERAGE_ADVANCE_EM = 0.5;
+const LINE_HEIGHT_EM = 1.2;
+/** Share of each side of the inner box a silhouette leaves usable. */
+const INSCRIBED_FACTOR = Object.assign(Object.create(null), { ellipse: 0.7, diamond: 0.5 });
+export const fitsInscribedLabel = ({ w, h, shapeType, fontSize = 18, padding = [10, 20], }) => {
+    const factor = INSCRIBED_FACTOR[shapeType] ?? 1;
+    const innerW = (w - 2 * padding[1]) * factor;
+    const innerH = (h - 2 * padding[0]) * factor;
+    if (innerW <= 0 || innerH <= 0)
+        return false;
+    const advance = AVERAGE_ADVANCE_EM * fontSize;
+    const lineHeight = LINE_HEIGHT_EM * fontSize;
+    const oneLine = PROBE_ONE_LINE_LENGTH * advance <= innerW && lineHeight <= innerH;
+    if (oneLine)
+        return true;
+    return PROBE_WORD_LENGTH * advance <= innerW && 2 * lineHeight <= innerH;
+};

package/dist/_pkgs/affine-shared/utils/model/merge-to-code-model.js

@@ -18,7 +18,13 @@ export function mergeToCodeModel(models) {
     })
         .filter(Boolean)
         .join('\n');
-    models.forEach(model => doc.deleteBlock(model));
+    // Add first and delete only once the code block exists: `addBlock` returns
+    // an id even when the parent rejected the flavour (a callout only takes
+    // paragraphs and lists), and deleting first lost the text (#418).
     const id = doc.addBlock('affine:code', { text: new Text(text) }, parent, index);
+    if (!doc.getModelById(id)) {
+        return null;
+    }
+    models.forEach(model => doc.deleteBlock(model));
     return id;
 }

package/dist/_pkgs/affine-shared/utils/model/transform-model.js

@@ -12,7 +12,12 @@ export function transformModel(model, flavour, props) {
     const index = parent.children.indexOf(model);
     // Sometimes the new block can not be added due to some reason, e.g. invalid schema check.
     // So we need to try to add the new block first, and if it fails, we will not delete the old block.
+    // `addBlock` returns an id even when the schema check threw (`transact`
+    // swallows it), so only `getModelById` proves the block exists (#418).
     const id = doc.addBlock(flavour, blockProps, parent, index);
+    if (!doc.getModelById(id)) {
+        return null;
+    }
     doc.deleteBlock(model, {
         deleteChildren: false,
     });

package/dist/_pkgs/affine-shared/utils/panel-reorder-drag.d.ts

@@ -0,0 +1,85 @@
+/**
+ * The ONE drag-to-reorder gesture of the side panels (ADR 0034):
+ * the frame panel's cards and the selection pane's rows.
+ *
+ * Why it exists: the two panels each wrote their own drag and the two
+ * drifted. The frame panel's (`fragments/frame-panel/src/utils/drag.ts`, now
+ * deleted) ran on mouse events, never refused a read-only document, drew the
+ * drop line at 0 for a drop after the last card, and had no way out but the
+ * release. The selection pane's (hand-written in `selection-pane-widget.ts`)
+ * ran on pointer events, refused read-only and showed a `not-allowed` cursor,
+ * and swallowed Escape. Only the threshold was shared, and a comment held the
+ * rest together. Both panels now hand this controller what is theirs — the
+ * rows, the drop rule, the ghost, the write — and it owns the gesture:
+ *
+ * - pointer events, listened to on the document in the CAPTURE phase from the
+ *   press to the end, so a panel that stops its own events' propagation (the
+ *   pane does, to keep the canvas out of them) still sees every move;
+ * - a read-only document never starts one: the press adds no listener;
+ * - a press becomes a drag past {@link panelDragStarted} — called here and
+ *   nowhere else — and only then is anything picked up;
+ * - over the whole viewport, a mask carries the cursor: `grabbing` over a gap
+ *   that takes the drop, `not-allowed` elsewhere (its geometry stays in each
+ *   panel's stylesheet, the controller sets the cursor and nothing else);
+ * - Escape or `pointercancel` CANCELS: nothing is written, the release that
+ *   follows writes nothing, and the Escape does not reach the panel (which
+ *   would close it);
+ * - the click that follows a release or a cancel is not a click: the panel
+ *   asks {@link PanelReorderDrag.consumeSwallowedClick} in its click handler.
+ *
+ * Multi-selection is the panel's business: `onPickUp` decides what moves,
+ * `dropAt` skips the rows that move with it.
+ */
+/** A pointer position, in client coordinates. */
+export interface PanelDragPoint {
+    clientX: number;
+    clientY: number;
+}
+export interface PanelReorderDragOptions<Drop> {
+    /** Read at the press: a read-only document never starts a drag. */
+    readonly: () => boolean;
+    /** The rows, top first, read LIVE at every move. */
+    rows: () => readonly HTMLElement[];
+    /** The box a drop must land in; outside it, or `null`, refuses. */
+    bounds: () => HTMLElement | null;
+    /** The press became a drag: select what moves, build the ghost. */
+    onPickUp: (press: PanelDragPoint) => void;
+    /**
+     * What a release at the gap `gap` — before `rows()[gap]`, `rows().length`
+     * after the last — would do, or `null` to refuse it.
+     */
+    dropAt: (gap: number, point: PanelDragPoint) => Drop | null;
+    /** Every move of a drag: draw the ghost at `ghost`, the line for `drop`. */
+    onMove: (drop: Drop | null, ghost: PanelDragPoint) => void;
+    /** The release, over a gap that takes it. Before `onEnd`. */
+    onDrop: (drop: Drop) => void;
+    /** A drag ended — dropped, refused, cancelled or disposed. Always last. */
+    onEnd: () => void;
+    /** The cursor mask: appended to `host()` on pick-up, removed at the end. */
+    mask: {
+        host: () => ParentNode | null;
+        className: string;
+        testId?: string;
+    };
+    /** Carries `data-drag="valid" | "invalid"` while a drag is live. */
+    stateHost?: () => HTMLElement | null;
+}
+export interface PanelReorderDrag {
+    /** Hand it the row's `pointerdown`. */
+    press(event: PointerEvent): void;
+    /**
+     * Whether the click being handled follows a drag's release or cancel —
+     * answered `true` once, then `false`.
+     */
+    consumeSwallowedClick(): boolean;
+    /** Whether a press has become a drag that has not ended yet. */
+    readonly dragging: boolean;
+    /** Ends a live drag (`onEnd`, nothing written) and removes the listeners. */
+    dispose(): void;
+}
+/**
+ * The gap a pointer at `clientY` is over: how many rows have their middle
+ * above it. `0` is before the first row, `rects.length` after the last.
+ */
+export declare function panelReorderGap(rects: readonly DOMRect[], clientY: number): number;
+export declare function createPanelReorderDrag<Drop>(options: PanelReorderDragOptions<Drop>): PanelReorderDrag;

package/dist/_pkgs/affine-shared/utils/panel-reorder-drag.js

@@ -0,0 +1,162 @@
+import { panelDragStarted } from '../styles/panel-header.js';
+/**
+ * The gap a pointer at `clientY` is over: how many rows have their middle
+ * above it. `0` is before the first row, `rects.length` after the last.
+ */
+export function panelReorderGap(rects, clientY) {
+    let gap = 0;
+    for (const rect of rects) {
+        if (clientY > rect.top + rect.height / 2)
+            gap++;
+    }
+    return gap;
+}
+export function createPanelReorderDrag(options) {
+    let start = null;
+    let dragging = false;
+    let listening = null;
+    let mask = null;
+    let swallowClick = false;
+    const point = (event) => ({
+        clientX: event.clientX,
+        clientY: event.clientY,
+    });
+    const resolve = (at) => {
+        const bounds = options.bounds();
+        if (!bounds)
+            return null;
+        const box = bounds.getBoundingClientRect();
+        if (at.clientX < box.left ||
+            at.clientX > box.right ||
+            at.clientY < box.top ||
+            at.clientY > box.bottom) {
+            return null;
+        }
+        const rects = options.rows().map(row => row.getBoundingClientRect());
+        return options.dropAt(panelReorderGap(rects, at.clientY), at);
+    };
+    const show = (drop) => {
+        if (mask)
+            mask.style.cursor = drop ? 'grabbing' : 'not-allowed';
+        const host = options.stateHost?.();
+        if (host)
+            host.dataset.drag = drop ? 'valid' : 'invalid';
+    };
+    const unlisten = () => {
+        if (!listening)
+            return;
+        listening.removeEventListener('pointermove', onPointerMove, true);
+        listening.removeEventListener('pointerup', onPointerUp, true);
+        listening.removeEventListener('pointercancel', onPointerCancel, true);
+        listening.removeEventListener('keydown', onKeydown, true);
+        listening = null;
+    };
+    /** Back to idle; `onEnd` only when something was picked up. */
+    const finish = () => {
+        unlisten();
+        start = null;
+        if (!dragging)
+            return;
+        dragging = false;
+        mask?.remove();
+        mask = null;
+        const host = options.stateHost?.();
+        if (host)
+            delete host.dataset.drag;
+        options.onEnd();
+    };
+    const cancel = () => {
+        if (dragging)
+            swallowClick = true;
+        finish();
+    };
+    const pickUp = (event) => {
+        dragging = true;
+        const host = options.mask.host();
+        if (host) {
+            const doc = event.target?.ownerDocument ?? document;
+            mask = doc.createElement('div');
+            mask.className = options.mask.className;
+            if (options.mask.testId)
+                mask.dataset.testid = options.mask.testId;
+            mask.style.cursor = 'grabbing';
+            host.append(mask);
+        }
+        options.onPickUp({ clientX: start.x, clientY: start.y });
+    };
+    function onPointerMove(event) {
+        if (!start)
+            return;
+        if (!dragging) {
+            if (!panelDragStarted(start, { x: event.clientX, y: event.clientY })) {
+                return;
+            }
+            pickUp(event);
+        }
+        const at = point(event);
+        const drop = resolve(at);
+        show(drop);
+        options.onMove(drop, at);
+    }
+    function onPointerUp(event) {
+        if (!dragging) {
+            // A press that never became a drag: the click that follows is a click.
+            finish();
+            return;
+        }
+        const drop = resolve(point(event));
+        swallowClick = true;
+        try {
+            if (drop !== null)
+                options.onDrop(drop);
+        }
+        finally {
+            finish();
+        }
+    }
+    function onPointerCancel() {
+        cancel();
+    }
+    function onKeydown(event) {
+        if (event.key !== 'Escape')
+            return;
+        if (!dragging) {
+            // A press still under the threshold: forget it, and let the Escape do
+            // what it does in the panel.
+            finish();
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        cancel();
+    }
+    return {
+        press(event) {
+            // Any new press clears a click left armed by a release or a cancel
+            // that no click followed (released over another element).
+            swallowClick = false;
+            if (event.button !== 0 || start)
+                return;
+            if (options.readonly())
+                return;
+            start = { x: event.clientX, y: event.clientY };
+            const doc = event.target?.ownerDocument ?? document;
+            doc.addEventListener('pointermove', onPointerMove, true);
+            doc.addEventListener('pointerup', onPointerUp, true);
+            doc.addEventListener('pointercancel', onPointerCancel, true);
+            doc.addEventListener('keydown', onKeydown, true);
+            listening = doc;
+        },
+        consumeSwallowedClick() {
+            const swallowed = swallowClick;
+            swallowClick = false;
+            return swallowed;
+        },
+        get dragging() {
+            return dragging;
+        },
+        dispose() {
+            finish();
+        },
+    };
+}

package/dist/_pkgs/affine-widget-edgeless-selected-rect/utils.js

@@ -1,4 +1,4 @@
-import { EdgelessCRUDIdentifier, isNoteBlock, Overlay, } from '../affine-block-surface/index.js';
+import { applyCreationLayer, EdgelessCRUDIdentifier, isNoteBlock, Overlay, sourceLayerOf, } from '../affine-block-surface/index.js';
 import { ShapeFactory } from '../affine-gfx-shape/index.js';
 import { getShapeRadius, getShapeType, GroupElementModel, ShapeElementModel, } from '../affine-model/index.js';
 import { getChromeAccentColor } from '../affine-shared/services/index.js';
@@ -230,6 +230,9 @@ export function createEdgelessElement(edgeless, current, bound) {
             ...current.serialize(),
             text: new Y.Text(),
             xywh: bound.serialize(),
+            // `serialize()` names no layer for a default-layer shape: ask for the
+            // source's explicitly, or the clone lands in the active layer.
+            layer: sourceLayerOf(current),
         });
         if (!id)
             return null;
@@ -237,12 +240,16 @@ export function createEdgelessElement(edgeless, current, bound) {
     }
     else if (isNoteBlock(current)) {
         const { store } = edgeless;
-        id = store.addBlock('affine:note', {
+        const props = {
             background: current.props.background,
             displayMode: current.props.displayMode,
             edgeless: current.props.edgeless,
             xywh: bound.serialize(),
-        }, edgeless.model.id);
+            // Beside its source, not in the viewer's active layer (ADR 0031 §6).
+            layer: sourceLayerOf(current),
+        };
+        applyCreationLayer(edgeless.std, props);
+        id = store.addBlock('affine:note', props, edgeless.model.id);
         const note = store.getBlock(id)?.model;
         if (!note) {
             throw new BlockSuiteError(ErrorCode.GfxBlockElementError, 'Note block is not found after creation');