@formicoidea/labre-core 0.43.1 → 0.46.0

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

@@ -1,7 +1,11 @@
+import { menu, popMenu, popupTargetFromElement, } from '../../../affine-components/context-menu/index.js';
 import { FrameworkBackgroundElementModel } from '../../../affine-model/index.js';
-import { commandMoreAction, ToolbarModuleExtension, toolbarModuleKey, } from '../../../affine-shared/services/index.js';
-import { BlockFlavourIdentifier } from '../../../std/index.js';
+import { ActionPlacement, ToolbarModuleExtension, toolbarModuleKey, translateKey, } from '../../../affine-shared/services/index.js';
+import { BlockFlavourIdentifier, getRegisteredCommands, runCommand, } from '../../../std/index.js';
+import { signal } from '@preact/signals-core';
 import { html } from 'lit';
+import { DEFAULT_BOARD_SVG_EXPORT_OPTIONS, } from './parts.js';
+import { EXPORT_SVG_CONFIRM, EXPORT_SVG_OPTION_FRAMEWORK, EXPORT_SVG_OPTION_SHAPES, EXPORT_SVG_OPTION_TEXTS, } from './translations.js';
 /**
  * A sheet with an arrow leaving it: the board, on its way out of the editor.
  *
@@ -27,15 +31,113 @@ const ExportSvgIcon = html `<svg
 const EXPORT_SVG_COMMAND_ID = 'export.svg';
 const EXPORT_SVG_LABEL_KEY = 'com.labre.command.export.svg';
 const EXPORT_SVG_LABEL_FALLBACK = 'Export SVG';
+// `z.z-` and not `z.`: a framework's own export (`z.export-owm`,
+// `z.export-xml`, `z.export-mermaid`) is the format that says what the board
+// MEANS, and it reads first. The picture reads last, under everything, which
+// is also where a reader looks for it.
+const EXPORT_SVG_ACTION_ID = 'z.z-export-svg';
+/** The same `source` the row's own entries report (`commandMoreAction`). */
+const INVOCATION = {
+    surface: 'contextual-toolbar',
+    source: 'toolbar:general',
+};
+const findCommand = (std) => getRegisteredCommands(std).find(command => command.id === EXPORT_SVG_COMMAND_ID);
+/**
+ * The reader's last choice, per editor and for the session only: it is a
+ * habit of the person exporting, not a property of the document, so it is
+ * neither stored in the document nor in the browser. Per editor rather than
+ * per module so two editors on one page do not answer for each other.
+ */
+const lastChoice = new WeakMap();
+const SWITCHES = [
+    ['framework', EXPORT_SVG_OPTION_FRAMEWORK],
+    ['shapes', EXPORT_SVG_OPTION_SHAPES],
+    ['texts', EXPORT_SVG_OPTION_TEXTS],
+];
+/**
+ * The options menu: three switches and Export, anchored on the "⋮" whose menu
+ * it replaces. Built from the library's menu primitives (`menu.toggleSwitch`,
+ * as the HTML embed's settings do) rather than a modal of its own.
+ *
+ * The choice lives in a signal read through `menu.dynamic`, so a row redrawn
+ * after a flip says the CURRENT value: `toggleSwitch` hands its row click the
+ * `on` it was built with, and a static `on` would undo a flip when the reader
+ * then clicked the row's words.
+ */
+function openExportSvgOptions(std, command, item) {
+    const more = item.closest('editor-menu-button');
+    more?.hide();
+    const choice = signal({
+        ...(lastChoice.get(std) ?? DEFAULT_BOARD_SVG_EXPORT_OPTIONS),
+    });
+    popMenu(popupTargetFromElement(more ?? item), {
+        options: {
+            items: [
+                menu.group({
+                    items: [
+                        menu.dynamic(() => SWITCHES.map(([part, wording]) => menu.toggleSwitch({
+                            name: translateKey(std, ...wording),
+                            on: choice.value[part],
+                            onChange: on => {
+                                choice.value = { ...choice.peek(), [part]: on };
+                            },
+                            testId: `export-svg-option-${part}`,
+                        }))),
+                    ],
+                }),
+                menu.group({
+                    items: [
+                        menu.action({
+                            name: translateKey(std, ...EXPORT_SVG_CONFIRM),
+                            prefix: ExportSvgIcon,
+                            testId: 'export-svg-confirm',
+                            select: () => {
+                                const options = { ...choice.peek() };
+                                lastChoice.set(std, options);
+                                runCommand(std, command, INVOCATION, options);
+                            },
+                        }),
+                    ],
+                }),
+            ],
+        },
+    });
+}
+/**
+ * The "⋮" entry. It invokes the registered command like `commandMoreAction`
+ * does — one behaviour, one availability rule, one usage record per export —
+ * but asks for the options first, so it draws its own line: a menu line's
+ * `run` is handed no element to anchor a popup on.
+ */
+const exportSvgMoreAction = {
+    id: EXPORT_SVG_ACTION_ID,
+    placement: ActionPlacement.More,
+    when: (ctx) => {
+        const command = findCommand(ctx.std);
+        return command !== undefined && (command.when?.(ctx.std) ?? true);
+    },
+    content: (ctx) => {
+        const label = translateKey(ctx.std, EXPORT_SVG_LABEL_KEY, EXPORT_SVG_LABEL_FALLBACK);
+        return html `
+      <editor-menu-action
+        data-testid="z-export-svg"
+        data-toolbar-action-id=${EXPORT_SVG_ACTION_ID}
+        aria-label=${label}
+        @click=${(event) => {
+            const command = findCommand(ctx.std);
+            if (!command)
+                return;
+            openExportSvgOptions(ctx.std, command, event.currentTarget);
+        }}
+      >
+        ${ExportSvgIcon}
+        <span class="label">${label}</span>
+      </editor-menu-action>
+    `;
+    },
+};
 export const exportSvgToolbarConfig = {
-    actions: [
-        commandMoreAction(
-        // `z.z-` and not `z.`: a framework's own export (`z.export-owm`,
-        // `z.export-xml`, `z.export-mermaid`) is the format that says what the
-        // board MEANS, and it reads first. The picture reads last, under
-        // everything, which is also where a reader looks for it.
-        'z.z-export-svg', EXPORT_SVG_COMMAND_ID, EXPORT_SVG_LABEL_KEY, EXPORT_SVG_LABEL_FALLBACK, ExportSvgIcon),
-    ],
+    actions: [exportSvgMoreAction],
     // The module says "a board is selected"; the command's own `when` says the
     // same thing from the registry side, and the two are deliberately both there
     // — the entry is drawn from the module and the behaviour is guarded by the

package/dist/_pkgs/affine-block-surface/extensions/export-svg/translations.d.ts

@@ -0,0 +1,13 @@
+import type { ChromeWording } from '../../../affine-shared/services/index.js';
+/**
+ * The words of the "Export SVG" options menu (ADR 0025, amendment of
+ * 2026-10-04), one switch per part of the picture, and the one sentence said
+ * when the switches leave nothing to draw. The command's own label and
+ * description are declared on its descriptor.
+ */
+export declare const EXPORT_SVG_OPTION_FRAMEWORK: ChromeWording;
+export declare const EXPORT_SVG_OPTION_SHAPES: ChromeWording;
+export declare const EXPORT_SVG_OPTION_TEXTS: ChromeWording;
+export declare const EXPORT_SVG_CONFIRM: ChromeWording;
+export declare const EXPORT_SVG_NOTHING_TO_EXPORT: ChromeWording;
+export declare const EXPORT_SVG_WORDINGS: readonly ChromeWording[];

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

@@ -0,0 +1,33 @@
+/**
+ * The words of the "Export SVG" options menu (ADR 0025, amendment of
+ * 2026-10-04), one switch per part of the picture, and the one sentence said
+ * when the switches leave nothing to draw. The command's own label and
+ * description are declared on its descriptor.
+ */
+export const EXPORT_SVG_OPTION_FRAMEWORK = [
+    'com.labre.export.svg.option.framework',
+    'Framework elements',
+];
+export const EXPORT_SVG_OPTION_SHAPES = [
+    'com.labre.export.svg.option.shapes',
+    'Other shapes and strokes',
+];
+export const EXPORT_SVG_OPTION_TEXTS = [
+    'com.labre.export.svg.option.texts',
+    'Other texts',
+];
+export const EXPORT_SVG_CONFIRM = [
+    'com.labre.export.svg.confirm',
+    'Export',
+];
+export const EXPORT_SVG_NOTHING_TO_EXPORT = [
+    'com.labre.export.svg.nothing',
+    'Nothing to export: the options leave nothing of this board to draw.',
+];
+export const EXPORT_SVG_WORDINGS = [
+    EXPORT_SVG_OPTION_FRAMEWORK,
+    EXPORT_SVG_OPTION_SHAPES,
+    EXPORT_SVG_OPTION_TEXTS,
+    EXPORT_SVG_CONFIRM,
+    EXPORT_SVG_NOTHING_TO_EXPORT,
+];

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

@@ -1,4 +1,5 @@
 export * from './audit.js';
+export * from './canvas-grid/index.js';
 export * from './clipboard-config.js';
 export * from './crud-extension.js';
 export * from './dom-element-renderer.js';
@@ -20,11 +21,13 @@ export * from './reading.js';
 export * from './reading-toolbar.js';
 export * from './reading-widget.js';
 export * from './record-action.js';
+export * from './selection-pane/index.js';
 export * from './spotlight.js';
 export * from './surface-middleware.js';
 export * from './svg-sketch.js';
 export * from './svg-sketch-translations.js';
 export * from './tags-toolbar.js';
+export * from './user-layers/index.js';
 export * from './validation.js';
 export * from './validation-toolbar.js';
 export * from './violation-detail-widget.js';

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

@@ -1,4 +1,5 @@
 export * from './audit.js';
+export * from './canvas-grid/index.js';
 export * from './clipboard-config.js';
 export * from './crud-extension.js';
 export * from './dom-element-renderer.js';
@@ -20,11 +21,13 @@ export * from './reading.js';
 export * from './reading-toolbar.js';
 export * from './reading-widget.js';
 export * from './record-action.js';
+export * from './selection-pane/index.js';
 export * from './spotlight.js';
 export * from './surface-middleware.js';
 export * from './svg-sketch.js';
 export * from './svg-sketch-translations.js';
 export * from './tags-toolbar.js';
+export * from './user-layers/index.js';
 export * from './validation.js';
 export * from './validation-toolbar.js';
 export * from './violation-detail-widget.js';

package/dist/_pkgs/affine-block-surface/extensions/reading-widget.d.ts

@@ -130,13 +130,20 @@ export declare class ReadingProposalWidget extends EditorAnchoredPanel {
      */
     private _renderValueFlow;
     /**
-     * Where the subject sits along the frame's phase axis.
+     * The zone of the frame the subject sits in — Wardley's evolution phase, a
+     * Core Domain Chart's quadrant, a BPMN lane — under the framework's own
+     * heading (`frame.label`), or the engine's default for a profile that names
+     * none (`readingFrameWording`).
      *
-     * Absent ENTIRELY — not "no phase to read" — for a framework that declares no
-     * frame. The empty state below is about a component that could have been on a
-     * map and is not; telling the author of a BPMN task that it is "not on a
-     * framework background" would be answering a question their notation never
-     * asks.
+     * Absent ENTIRELY — not "no zone to read" — for a framework that declares no
+     * frame. The empty state below is about an artefact that could have been on
+     * a frame and is not, in the framework's own words (`frame.none`) or the
+     * default ones.
+     *
+     * The zone is named the way the board names it: the user's words when they
+     * wrote some (a renamed quadrant, a lane's name), the vocabulary otherwise,
+     * and "Unnamed" for a zone the board paints but never writes on — never the
+     * zone's id, which is not a word anyone drew.
      */
     private _renderPhase;
     private _renderNaming;

package/dist/_pkgs/affine-block-surface/extensions/reading-widget.js

@@ -40,7 +40,7 @@ import { css, html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 import { EditorAnchoredPanel, editorAnchoredPanelStyles, } from './editor-anchored-panel.js';
-import { PivotRecordPickerProvider, ReadingManager, readingRelationDefs, readRecord, readValueFlows, } from './reading.js';
+import { PivotRecordPickerProvider, ReadingManager, readingFrameWording, readingRelationDefs, readRecord, readValueFlows, } from './reading.js';
 export const READING_PROPOSAL_WIDGET = 'affine-reading-proposal-widget';
 /** The two commands the confirmations drive. Spelled once. */
 const TAG_SET_ID = 'tag.set';
@@ -514,21 +514,37 @@ let ReadingProposalWidget = (() => {
           </div>`)}`);
         }
         /**
-         * Where the subject sits along the frame's phase axis.
+         * The zone of the frame the subject sits in — Wardley's evolution phase, a
+         * Core Domain Chart's quadrant, a BPMN lane — under the framework's own
+         * heading (`frame.label`), or the engine's default for a profile that names
+         * none (`readingFrameWording`).
          *
-         * Absent ENTIRELY — not "no phase to read" — for a framework that declares no
-         * frame. The empty state below is about a component that could have been on a
-         * map and is not; telling the author of a BPMN task that it is "not on a
-         * framework background" would be answering a question their notation never
-         * asks.
+         * Absent ENTIRELY — not "no zone to read" — for a framework that declares no
+         * frame. The empty state below is about an artefact that could have been on
+         * a frame and is not, in the framework's own words (`frame.none`) or the
+         * default ones.
+         *
+         * The zone is named the way the board names it: the user's words when they
+         * wrote some (a renamed quadrant, a lane's name), the vocabulary otherwise,
+         * and "Unnamed" for a zone the board paints but never writes on — never the
+         * zone's id, which is not a word anyone drew.
          */
         _renderPhase(reading, profile) {
             if (!profile.frame)
                 return nothing;
+            const { label, none } = readingFrameWording(profile.frame);
             const { phase } = reading;
-            return this._field('reading-phase', translateKey(this.std, 'com.labre.reading.field.phase', 'Evolution phase'), phase
+            const words = !phase
+                ? ''
+                : phase.name !== undefined
+                    ? phase.name.trim()
+                    : phase.labelKey !== undefined
+                        ? translateKey(this.std, phase.labelKey, phase.labelFallback ?? phase.labelKey)
+                        : (phase.labelFallback ?? '');
+            return this._field('reading-phase', translateKey(this.std, label.labelKey, label.labelFallback), phase
                 ? html `<div class="reading-value" data-zone-id=${phase.zoneId}>
-              ${translateKey(this.std, phase.labelKey ?? phase.zoneId, phase.labelFallback ?? phase.zoneId)}
+              ${words ||
+                    translateKey(this.std, 'com.labre.reading.zone.unnamed', 'Unnamed')}
             </div>
             ${phase.inTransitionBand
                     ? html `<div class="reading-note" data-testid="reading-phase-band">
@@ -537,7 +553,7 @@ let ReadingProposalWidget = (() => {
                 </div>`
                     : nothing}`
                 : html `<div class="reading-empty" data-testid="reading-phase-none">
-            ${translateKey(this.std, 'com.labre.reading.phase.none', 'Not on a framework background — no phase to read.')}
+            ${translateKey(this.std, none.labelKey, none.labelFallback)}
           </div>`);
         }
         _renderNaming(reading) {

package/dist/_pkgs/affine-block-surface/extensions/reading.d.ts

@@ -1,4 +1,4 @@
-import { type TagDef } from '../../affine-shared/services/index.js';
+import { type ChromeWording, type TagDef } from '../../affine-shared/services/index.js';
 import { LifeCycleWatcher, type BlockStdScope, type FrameworkId } from '../../std/index.js';
 import type { RoleDefs, RoleId } from '../../std/gfx/index.js';
 import { GfxPrimitiveElementModel } from '../../std/gfx/index.js';
@@ -92,6 +92,14 @@ export interface ReadingRelationSideLabel {
     /** The framework's own English wording, for a host that ships no catalogue. */
     labelFallback: string;
 }
+/**
+ * One wording a framework declares for the frame field of the panel: key plus
+ * its own English, so a host with no catalogue still reads a real phrase.
+ */
+export interface ReadingFrameWording {
+    labelKey: string;
+    labelFallback: string;
+}
 /**
  * The typed edge a reading walks, and the two words the framework reads it
  * with.
@@ -185,13 +193,41 @@ export interface ReadingProfile {
      * reads them in, so the first is the question the artefact answers first.
      */
     alsoRelations?: readonly ReadingRelationDef[];
-    /** The frame the phase is read from. */
+    /**
+     * The frame the subject's ZONE is read from — Wardley's evolution phase, a
+     * Core Domain Chart's quadrant, a BPMN pool's lane.
+     */
     frame?: {
         backgroundRole: RoleId;
         /** The declaration itself, carried as data exactly like `roles` is. */
         background: FrameworkBackgroundDef;
-        /** Which plot axis the zones are laid along. */
-        axis: 'x' | 'y';
+        /**
+         * The plot axis the zones are laid ALONG, for a frame read in one
+         * dimension: Wardley's phases are columns of the evolution axis, so only
+         * the `x` position matters and a component in the top or bottom margin of
+         * the plot still has a phase.
+         *
+         * Absent, the frame is read in TWO dimensions: the subject is in the zone
+         * whose rectangle holds its centre — a quadrant, a lane — and nowhere when
+         * none does. A 2D frame has no transition band.
+         */
+        axis?: 'x' | 'y';
+        /**
+         * The panel's heading for the field — "Evolution phase", "Zone", "Lane".
+         * The framework's own word, like a relation's sides: the panel used to
+         * hard-code Wardley's, which a chart or a pool would have worn too.
+         *
+         * Optional because a 0.43 profile has no such field and a minor release
+         * never breaks a host: absent, the panel reads
+         * {@link READING_FRAME_DEFAULT_WORDING}, which is what 0.43 showed for
+         * every frame (`readingFrameWording`).
+         */
+        label?: ReadingFrameWording;
+        /**
+         * What the field says when the subject sits in no zone of any frame.
+         * Optional for the reason {@link label} is, with the same default.
+         */
+        none?: ReadingFrameWording;
     };
     /**
      * Which properties of the PIVOT RECORD the reading may compare itself
@@ -207,6 +243,21 @@ export interface ReadingProfile {
         phase?: string;
     };
 }
+/** The default frame wording, as the rows the key manifest walks. */
+export declare const READING_FRAME_WORDINGS: readonly ChromeWording[];
+/** The default frame wording, as a profile's `frame.label` / `frame.none`. */
+export declare const READING_FRAME_DEFAULT_WORDING: Readonly<{
+    label: ReadingFrameWording;
+    none: ReadingFrameWording;
+}>;
+/**
+ * The two wordings the panel reads a frame with: the framework's own where it
+ * declares them, {@link READING_FRAME_DEFAULT_WORDING} where it does not.
+ */
+export declare function readingFrameWording(frame: NonNullable<ReadingProfile['frame']>): {
+    label: ReadingFrameWording;
+    none: ReadingFrameWording;
+};
 /** Where the other end of a typed edge sits, relative to the subject. */
 export type ReadingRelationSide = 'consumer' | 'supplier';
 /**
@@ -271,12 +322,24 @@ export interface ReadingRelation {
      */
     contradictsGeometry: boolean;
 }
-/** Where the subject sits along the frame's phase axis. */
+/**
+ * The zone of the frame the subject sits in: a phase along an axis, or a
+ * region of the plane (see `ReadingProfile.frame.axis`).
+ */
 export interface ReadingPhase {
-    /** The declared zone id, e.g. `product`. */
+    /** The zone id, e.g. `product`, or `lane:<id>` for an instance zone. */
     zoneId: string;
+    /** The declared zone's vocabulary, absent on a zone the board never names. */
     labelKey?: string;
     labelFallback?: string;
+    /**
+     * The words the USER wrote for this zone, which is what the board paints in
+     * place of the vocabulary: a renamed zone label stored on the frame (the
+     * declaration's `label.prop`), or a lane's name. Wins over
+     * {@link labelKey} exactly as it does on the canvas (`backgroundLabelText`),
+     * so the panel and the board never name one zone two ways.
+     */
+    name?: string;
     /**
      * The subject sits in the band around a zone transition — Wardley's zone of
      * punctuated equilibrium, declared by the background as
@@ -331,6 +394,19 @@ export interface ElementReading {
     /** `undefined` with no nature, no convention for it, or no name to judge. */
     naming: ReadingNaming | undefined;
 }
+/**
+ * The subject's NAME.
+ *
+ * Its own text first, then — because a framework artefact on this canvas is a
+ * composite — the text of the sibling carrying the profile's label role. That
+ * is the same fact `tags-toolbar.ts` works around from the other direction: one
+ * click selects the group, the role lives on the circle, and the name lives on
+ * a free text beside it.
+ *
+ * Exported for the selection pane, which names its rows the same way (ADR 0031
+ * §12): one rule for "what is this element called", not two.
+ */
+export declare function readName(element: GfxPrimitiveElementModel, profile: Pick<ReadingProfile, 'labelRole' | 'roles'>): string;
 /** What the reading needs to know that is not in the document. */
 export interface ReadingOptions {
     /**

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

@@ -8,7 +8,49 @@ import { effect, signal } from '@preact/signals-core';
 // reading is a one-way read of pure declaration data that must never pull a
 // canvas in.
 import { backgroundPlot, } from '../framework-background/def.js';
-import { backgroundTransitionBands, containingFrame, } from '../framework-background/facts.js';
+import { backgroundPlotRatios, backgroundTransitionBands, backgroundZoneAt, backgroundZones, containingFrame, } from '../framework-background/facts.js';
+/**
+ * The frame wording of a profile that declares none — the heading and the
+ * empty state 0.43 showed for every frame, before a framework could name its
+ * own.
+ *
+ * Owned by the ENGINE rather than by Wardley, whose words they also are,
+ * because a host profile written against 0.43 reads with them too: declared in
+ * a framework bundle, they would vanish from a host that does not install it.
+ * Wardley's profile declares no wording and inherits these.
+ *
+ * Spelled as `[key, English]` rows, the form the key manifest walks and its
+ * drift check pairs with this declaration, then read as a profile's wording.
+ */
+const READING_FRAME_DEFAULT_LABEL = [
+    'com.labre.reading.field.phase',
+    'Evolution phase',
+];
+const READING_FRAME_DEFAULT_NONE = [
+    'com.labre.reading.phase.none',
+    'Not on a framework background — no phase to read.',
+];
+/** The default frame wording, as the rows the key manifest walks. */
+export const READING_FRAME_WORDINGS = [
+    READING_FRAME_DEFAULT_LABEL,
+    READING_FRAME_DEFAULT_NONE,
+];
+const asFrameWording = ([labelKey, labelFallback,]) => ({ labelKey, labelFallback });
+/** The default frame wording, as a profile's `frame.label` / `frame.none`. */
+export const READING_FRAME_DEFAULT_WORDING = {
+    label: asFrameWording(READING_FRAME_DEFAULT_LABEL),
+    none: asFrameWording(READING_FRAME_DEFAULT_NONE),
+};
+/**
+ * The two wordings the panel reads a frame with: the framework's own where it
+ * declares them, {@link READING_FRAME_DEFAULT_WORDING} where it does not.
+ */
+export function readingFrameWording(frame) {
+    return {
+        label: frame.label ?? READING_FRAME_DEFAULT_WORDING.label,
+        none: frame.none ?? READING_FRAME_DEFAULT_WORDING.none,
+    };
+}
 /**
  * Every relation table a profile declares, in reading order.
  *
@@ -102,8 +144,11 @@ function groupMembers(element) {
  * is the same fact `tags-toolbar.ts` works around from the other direction: one
  * click selects the group, the role lives on the circle, and the name lives on
  * a free text beside it.
+ *
+ * Exported for the selection pane, which names its rows the same way (ADR 0031
+ * §12): one rule for "what is this element called", not two.
  */
-function readName(element, profile) {
+export function readName(element, profile) {
     const own = ownText(element);
     if (own)
         return own;
@@ -168,13 +213,37 @@ function frameOf(element, elements, profile) {
         roleIsA(candidate.role, frame.backgroundRole, profile.roles)), candidate => candidate.elementBound);
 }
 /**
- * The phase, read from the position and the frame's DECLARED zones.
+ * How a zone is named, as the BOARD names it: the user's own words first — a
+ * renamed label stored on the frame, a lane's name — then the vocabulary.
  *
- * Two facts, both taken from the declaration and never from a number in this
- * file: which zone the subject's centre falls in, and whether it is inside the
- * band around a transition. The second is the "zone of punctuated equilibrium"
- * — the frontier is a region, not a coordinate — and a component sitting in one
- * is a different statement from a component sitting in a phase.
+ * The same precedence `backgroundLabelText` paints with, minus the translation:
+ * the reading carries the key and the panel resolves it, so the record and the
+ * drift comparison keep working on the vocabulary.
+ */
+function zoneWording(zone, model) {
+    const label = zone.label;
+    const stored = label?.prop !== undefined ? model[label.prop] : undefined;
+    const name = stored !== undefined && stored !== null ? String(stored) : zone.name;
+    return {
+        ...(label?.labelKey !== undefined ? { labelKey: label.labelKey } : {}),
+        ...(label?.fallback !== undefined ? { labelFallback: label.fallback } : {}),
+        ...(name !== undefined ? { name } : {}),
+    };
+}
+/**
+ * The zone, read from the position and the zones the frame INSTANCE has
+ * ({@link backgroundZones}: the framework's in the instance's variant, then the
+ * instance's own).
+ *
+ * Along an axis (Wardley), two facts, both taken from the declaration and never
+ * from a number in this file: which zone the subject's centre falls in, and
+ * whether it is inside the band around a transition. The second is the "zone of
+ * punctuated equilibrium" — the frontier is a region, not a coordinate — and a
+ * component sitting in one is a different statement from a component sitting in
+ * a phase.
+ *
+ * In the plane (no `axis`: a Core Domain Chart, a BPMN pool), the zone whose
+ * rectangle holds the centre, through the helper the audit uses, and no band.
  */
 function readPhase(element, elements, profile) {
     const frame = profile.frame;
@@ -185,11 +254,25 @@ function readPhase(element, elements, profile) {
         return undefined;
     const def = frame.background;
     const bound = background.elementBound;
+    const model = background;
+    const zones = backgroundZones(def, model);
+    const axis = frame.axis;
+    if (axis === undefined) {
+        const at = backgroundPlotRatios(def, bound, element.elementBound);
+        const zone = at === null ? undefined : backgroundZoneAt(zones, at);
+        if (!zone)
+            return undefined;
+        return {
+            zoneId: zone.id,
+            ...zoneWording(zone, model),
+            inTransitionBand: false,
+        };
+    }
     const plot = backgroundPlot(def, bound.w, bound.h);
     const [cx, cy] = centreOf(element.elementBound);
-    const along = frame.axis === 'x' ? cx : cy;
-    const origin = frame.axis === 'x' ? bound.x + plot.x0 : bound.y + plot.y0;
-    const span = frame.axis === 'x' ? plot.width : plot.height;
+    const along = axis === 'x' ? cx : cy;
+    const origin = axis === 'x' ? bound.x + plot.x0 : bound.y + plot.y0;
+    const span = axis === 'x' ? plot.width : plot.height;
     if (!(span > 0))
         return undefined;
     const ratio = (along - origin) / span;
@@ -198,25 +281,20 @@ function readPhase(element, elements, profile) {
     // phase it is visibly not in.
     if (ratio < 0 || ratio > 1)
         return undefined;
-    const zone = (def.zones ?? []).find(({ rect }) => {
-        const start = frame.axis === 'x' ? rect.x : rect.y;
-        const size = frame.axis === 'x' ? rect.w : rect.h;
+    const zone = zones.find(({ rect }) => {
+        const start = axis === 'x' ? rect.x : rect.y;
+        const size = axis === 'x' ? rect.w : rect.h;
         // Half-open, so a component exactly on a divider reads as the phase it is
         // entering — the same side the band below reports as the frontier.
         return ratio >= start && (ratio < start + size || start + size >= 1);
     });
     if (!zone)
         return undefined;
-    const bands = backgroundTransitionBands(def, bound)[frame.axis];
+    const bands = backgroundTransitionBands(def, bound)[axis];
     const band = bands.find(({ min, max }) => along >= min && along <= max);
     return {
         zoneId: zone.id,
-        ...(zone.label?.labelKey !== undefined
-            ? { labelKey: zone.label.labelKey }
-            : {}),
-        ...(zone.label?.fallback !== undefined
-            ? { labelFallback: zone.label.fallback }
-            : {}),
+        ...zoneWording(zone, model),
         inTransitionBand: band !== undefined,
         ...(band !== undefined ? { bandId: band.id } : {}),
     };