@formicoidea/labre-core 0.34.1 → 0.35.0

package/dist/_pkgs/affine-block-surface/extensions/editor-anchored-panel.d.ts

@@ -89,7 +89,19 @@ export declare abstract class EditorAnchoredPanel extends WidgetComponent<RootBl
     protected anchorBox(): AnchoredPanelBox;
     /**
      * The panel's frame: the box, the dialog semantics and the pointer
-     * swallowing. The subclass passes its own body and nothing else.
+     * swallowing. The subclass passes its own two halves and nothing else.
+     *
+     * ## Why the header is a parameter and not a line of the body
+     *
+     * Because the split is the whole fix. Both panels rendered their title as the
+     * first node of a body that was itself the scrolling box, so a reading long
+     * enough to scroll scrolled its own title away. Making the header an argument
+     * is what forces a consumer to say which of its markup stays put — a default
+     * would have quietly kept the old behaviour for whoever forgot.
+     *
+     * The header is where a panel puts its title and, if it has one, the actions
+     * that belong beside it: Map quality's close button rides there and stays
+     * reachable however far the checklist runs.
      *
      * Deliberately NOT `aria-modal`: it promises everything behind the dialog is
      * inert, and these panels promise the opposite — the canvas stays usable
@@ -105,7 +117,11 @@ export declare abstract class EditorAnchoredPanel extends WidgetComponent<RootBl
         variant: string;
         /** The element the panel is about, when it is about one. */
         elementId?: string;
-    }, body: unknown): TemplateResult;
+    }, 
+    /** Pinned: the title, and whatever must stay beside it. */
+    header: unknown, 
+    /** Scrolled: everything the panel has to say. */
+    body: unknown): TemplateResult;
     /**
      * Click-away, Escape, and the two things that move the bar under the panel.
      *

package/dist/_pkgs/affine-block-surface/extensions/editor-anchored-panel.js

@@ -31,8 +31,9 @@ import { styleMap } from 'lit/directives/style-map.js';
  * ## What is shared, and what is not
  *
  * Shared: the host geometry and its layer, the panel's box and chrome, the
- * click-away and Escape contracts, and the re-measure wiring. Not shared: a
- * single line of CONTENT — each panel renders its own body into
+ * pinned header over a scrolling body, the click-away and Escape contracts, and
+ * the re-measure wiring. Not shared: a single line of CONTENT — each panel
+ * passes its own header and body to
  * {@link EditorAnchoredPanel.renderAnchoredPanel}, and neither knows the other
  * exists.
  */
@@ -91,6 +92,32 @@ const PANEL_MIN_HEIGHT = 160;
  * wants.
  */
 export const EDITOR_ANCHORED_PANEL_Z_INDEX = 'calc(var(--affine-z-index-popover, 1000) + 10)';
+/**
+ * The corner radius of the senior button bar, which this panel wears too.
+ *
+ * `edgeless-toolbar` rounds at 16 and so, since #199, does every menu that
+ * slides out of it. The panel is the same family of chrome floating over the
+ * same bar; at 8 it read as a foreign box parked above the toolbar.
+ */
+const PANEL_RADIUS = 16;
+/**
+ * The inset between the panel's border and the words inside it.
+ *
+ * It has to clear the corner arc, not merely look comfortable: an inner
+ * rectangle inset by less than `r × (1 − 1/√2)` ≈ 4.7px has its own corners cut
+ * by a 16px radius. Every inset below is at or above that, which is why the
+ * scrolling box never bleeds into the rounded edge.
+ */
+const PANEL_INLINE_PADDING = 16;
+/**
+ * The width of the scrollbar the body reserves, and the width the thumb takes.
+ *
+ * Reserved permanently (`scrollbar-gutter: stable`) rather than appearing with
+ * the overflow: the panel's content is recomputed on every board change, so a
+ * gutter that came and went would shift the text sideways under the reader
+ * while they are reading it.
+ */
+const PANEL_SCROLLBAR_WIDTH = 8;
 /**
  * The host geometry, the layer and the panel's chrome — the half of the pattern
  * that is CSS.
@@ -123,12 +150,27 @@ export const editorAnchoredPanelStyles = css `
     pointer-events: none;
   }
 
+  /*
+    The FRAME, and nothing that scrolls.
+
+    \`overflow: hidden\` rather than \`overflow-y: auto\`: the panel owns the
+    rounded corners, so it is the box that must clip — and a box that clips is
+    the only one whose children can be trusted not to paint over the arc. The
+    scrolling moved one level in, to \`.editor-anchored-panel-body\`, which is
+    what pins the header.
+
+    A column, because \`max-height\` has to be shared: the header takes what it
+    needs and the body takes the rest. The measured maximum
+    ({@link EditorAnchoredPanel.anchorBox}) therefore still means what it says —
+    the whole panel, header included, never exceeds it.
+  */
   .editor-anchored-panel {
     position: absolute;
     box-sizing: border-box;
-    overflow-y: auto;
-    padding: 12px;
-    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: ${unsafeCSS(PANEL_RADIUS)}px;
     border: 1px solid var(--affine-border-color);
     background: var(--affine-background-overlay-panel-color, #fff);
     box-shadow: var(--affine-shadow-2);
@@ -138,6 +180,73 @@ export const editorAnchoredPanelStyles = css `
     line-height: 1.4;
     pointer-events: auto;
   }
+
+  /*
+    The header stays. It is the sentence that says what the panel is about, and
+    a title that scrolls out of its own panel leaves the reader looking at a
+    list of values with nothing naming them.
+
+    \`flex: 0 0 auto\` so a long title wraps rather than being squeezed, and the
+    bottom border so the body visibly passes UNDER it instead of appearing to
+    end mid-air.
+  */
+  .editor-anchored-panel-header {
+    flex: 0 0 auto;
+    padding: 12px ${unsafeCSS(PANEL_INLINE_PADDING)}px 8px;
+    border-bottom: 1px solid var(--affine-border-color);
+  }
+
+  /*
+    The one box that scrolls.
+
+    \`min-height: 0\` is belt-and-braces, not load-bearing: a flex child's
+    automatic minimum size is its content, but \`overflow-y: auto\` already
+    resets it to zero (CSS flexbox § 4.5) — the suite stays green with the
+    line removed (lead's mutation probe). Spelled out anyway so the shrink
+    survives the day someone moves the overflow off this box.
+
+    The right inset is split — \`padding-right\` plus the reserved gutter — so
+    the text sits the same distance from both edges while the scrollbar keeps a
+    lane of its own. The bottom inset is a MARGIN rather than padding: padding
+    is inside the scrolling box, so the scrollbar would run down to it and into
+    the bottom arc; a margin ends the scrolling box early and leaves the corner
+    to the frame.
+  */
+  .editor-anchored-panel-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    padding: 12px ${unsafeCSS(PANEL_INLINE_PADDING - PANEL_SCROLLBAR_WIDTH)}px 0
+      ${unsafeCSS(PANEL_INLINE_PADDING)}px;
+    margin-bottom: 12px;
+  }
+
+  /*
+    The house scrollbar: thin, invisible at rest, and only drawn while the
+    pointer is over the box it belongs to. Same values as \`table-block-css\`
+    and the data-view scrollers, so the editor has one scrollbar and not three.
+  */
+  .editor-anchored-panel-body::-webkit-scrollbar {
+    width: ${unsafeCSS(PANEL_SCROLLBAR_WIDTH)}px;
+  }
+
+  .editor-anchored-panel-body::-webkit-scrollbar-thumb {
+    border-radius: ${unsafeCSS(PANEL_SCROLLBAR_WIDTH / 2)}px;
+    background-color: transparent;
+  }
+
+  .editor-anchored-panel-body::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  .editor-anchored-panel-body:hover::-webkit-scrollbar-thumb {
+    background-color: var(--affine-black-30);
+  }
+
+  .editor-anchored-panel-body:hover::-webkit-scrollbar-track {
+    background-color: var(--affine-hover-color);
+  }
 `;
 /**
  * The base every editor-anchored info panel extends.
@@ -233,7 +342,19 @@ export class EditorAnchoredPanel extends WidgetComponent {
     }
     /**
      * The panel's frame: the box, the dialog semantics and the pointer
-     * swallowing. The subclass passes its own body and nothing else.
+     * swallowing. The subclass passes its own two halves and nothing else.
+     *
+     * ## Why the header is a parameter and not a line of the body
+     *
+     * Because the split is the whole fix. Both panels rendered their title as the
+     * first node of a body that was itself the scrolling box, so a reading long
+     * enough to scroll scrolled its own title away. Making the header an argument
+     * is what forces a consumer to say which of its markup stays put — a default
+     * would have quietly kept the old behaviour for whoever forgot.
+     *
+     * The header is where a panel puts its title and, if it has one, the actions
+     * that belong beside it: Map quality's close button rides there and stays
+     * reachable however far the checklist runs.
      *
      * Deliberately NOT `aria-modal`: it promises everything behind the dialog is
      * inert, and these panels promise the opposite — the canvas stays usable
@@ -242,7 +363,11 @@ export class EditorAnchoredPanel extends WidgetComponent {
      * screen reader, and trapping Tab from a host that is still interactive would
      * be the library taking something that is not its to take.
      */
-    renderAnchoredPanel(options, body) {
+    renderAnchoredPanel(options, 
+    /** Pinned: the title, and whatever must stay beside it. */
+    header, 
+    /** Scrolled: everything the panel has to say. */
+    body) {
         const { left, width, bottom, maxHeight } = this.anchorBox();
         return html `<div
       class="editor-anchored-panel ${options.variant}"
@@ -261,7 +386,15 @@ export class EditorAnchoredPanel extends WidgetComponent {
       @pointerup=${this.swallow}
       @click=${this.swallow}
     >
-      ${body}
+      <div
+        class="editor-anchored-panel-header"
+        data-testid="anchored-panel-header"
+      >
+        ${header}
+      </div>
+      <div class="editor-anchored-panel-body" data-testid="anchored-panel-body">
+        ${body}
+      </div>
     </div>`;
     }
     /**

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

@@ -149,14 +149,9 @@ let MapQualityWidget = (() => {
         static { this.styles = [
             editorAnchoredPanelStyles,
             css `
-      /* The box, the layer and the anchoring come from the shared pattern; this
-       is the panel's own stacking of sections inside it. */
-      .map-quality-panel {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-      }
-
+      /* The box, the layer, the anchoring AND the column of header over body
+         all come from the shared pattern now — what is left here is the two
+         rows this panel puts inside those two slots. */
       .map-quality-head {
         display: flex;
         align-items: center;
@@ -449,20 +444,19 @@ let MapQualityWidget = (() => {
                 elementId: element.id,
                 label: title,
             }, html `<div class="map-quality-head">
-          <span>${title}</span>
-          <button
-            class="map-quality-close"
-            type="button"
-            data-testid="map-quality-close"
-            aria-label=${translateKey(this.std, 'com.labre.validation.map-quality.close', 'Close')}
-            @pointerdown=${this.swallow}
-            @pointerup=${this.swallow}
-            @click=${this._close}
-          >
-            ×
-          </button>
-        </div>
-        ${this._renderNudges(element)}`);
+        <span>${title}</span>
+        <button
+          class="map-quality-close"
+          type="button"
+          data-testid="map-quality-close"
+          aria-label=${translateKey(this.std, 'com.labre.validation.map-quality.close', 'Close')}
+          @pointerdown=${this.swallow}
+          @pointerup=${this.swallow}
+          @click=${this._close}
+        >
+          ×
+        </button>
+      </div>`, this._renderNudges(element));
         }
     };
 })();

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

@@ -121,6 +121,13 @@ export declare class ReadingProposalWidget extends EditorAnchoredPanel {
      * cannot choose a document, so with no picker there is nothing to offer and
      * the affordance is HIDDEN rather than disabled — the `QuickSearchProvider`
      * precedent, and the same rule `queryPivotProperties` follows.
+     *
+     * "Linked" is the TOLERANT question (`resolvePivotBinding`): the reading is
+     * resolved on the element carrying the role, but a host is free to have
+     * stamped the composite a plain click selects, and a component that is bound
+     * must never be reported as unlinked. Offering the link is the strict
+     * question by construction — the button only shows when nothing in the chain
+     * is bound, and it still stamps the role-carrying element.
      */
     private _renderRecord;
     /** The drift line: informative, never blocking, with one way to settle it. */
@@ -138,6 +145,17 @@ export declare class ReadingProposalWidget extends EditorAnchoredPanel {
      * board, and the seam has no field for it: the drift line reports it so the
      * user can settle it on whichever side is wrong, and the library does not
      * invent a transport for a fact the host never agreed to receive.
+     *
+     * The patch is built on the element that CARRIES the binding, not on the one
+     * the reading was resolved for. They are the same element in every ordinary
+     * case; they differ only when the composite is what a host bound, and there
+     * the resolved element is the only honest choice. `elementId` is half of the
+     * occurrence key (`pivotDocId` + `elementId`) that the materiality publisher
+     * tracks and RETRACTS on: publishing under the role-carrying element's id,
+     * against a record it does not itself point at, would create an occurrence
+     * no watcher ever tracked and therefore none can ever retract — host data
+     * left attributed to an occurrence that does not exist, which is exactly the
+     * leak ADR 0006 § 4.3 forbids.
      */
     private readonly _updateRecord;
     render(): TemplateResult | typeof nothing;

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

@@ -34,7 +34,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { buildOccurrencePatch, getUniverseRegistry, publishOccurrenceMaterialities, translateKey, } from '../../affine-shared/services/index.js';
 import { getRegisteredCommands, runCommand, WidgetViewExtension, } from '../../std/index.js';
-import { isPivotBound } from '../../std/gfx/index.js';
+import { resolvePivotBinding } from '../../std/gfx/index.js';
 import { effect } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
@@ -157,13 +157,27 @@ let ReadingProposalWidget = (() => {
              * board, and the seam has no field for it: the drift line reports it so the
              * user can settle it on whichever side is wrong, and the library does not
              * invent a transport for a fact the host never agreed to receive.
+             *
+             * The patch is built on the element that CARRIES the binding, not on the one
+             * the reading was resolved for. They are the same element in every ordinary
+             * case; they differ only when the composite is what a host bound, and there
+             * the resolved element is the only honest choice. `elementId` is half of the
+             * occurrence key (`pivotDocId` + `elementId`) that the materiality publisher
+             * tracks and RETRACTS on: publishing under the role-carrying element's id,
+             * against a record it does not itself point at, would create an occurrence
+             * no watcher ever tracked and therefore none can ever retract — host data
+             * left attributed to an occurrence that does not exist, which is exactly the
+             * leak ADR 0006 § 4.3 forbids.
              */
             this._updateRecord = (elementId, pivotDocId) => (event) => {
                 event.stopPropagation();
                 const element = this.gfx.surface?.getElementById(elementId);
                 if (!element)
                     return;
-                publishOccurrenceMaterialities(this.std, buildOccurrencePatch(element, pivotDocId));
+                const bound = resolvePivotBinding(element);
+                if (!bound || bound.pivotDocId !== pivotDocId)
+                    return;
+                publishOccurrenceMaterialities(this.std, buildOccurrencePatch(bound, pivotDocId));
                 // The disagreement has been answered; the next local change re-checks it
                 // from scratch, so nothing here has to remember it.
                 const manager = this._manager;
@@ -180,11 +194,14 @@ let ReadingProposalWidget = (() => {
         static { this.styles = [
             editorAnchoredPanelStyles,
             css `
+      /* Pinned by the shared frame, which owns its padding; all this adds is
+         the weight that makes it read as a title. */
       .reading-title {
         font-weight: 600;
-        margin-bottom: 8px;
       }
 
+      /* The first field sits directly under the pinned header, so the rule that
+         separates two fields would draw a second line against the header's. */
       .reading-field + .reading-field {
         margin-top: 10px;
         padding-top: 10px;
@@ -484,13 +501,20 @@ let ReadingProposalWidget = (() => {
          * cannot choose a document, so with no picker there is nothing to offer and
          * the affordance is HIDDEN rather than disabled — the `QuickSearchProvider`
          * precedent, and the same rule `queryPivotProperties` follows.
+         *
+         * "Linked" is the TOLERANT question (`resolvePivotBinding`): the reading is
+         * resolved on the element carrying the role, but a host is free to have
+         * stamped the composite a plain click selects, and a component that is bound
+         * must never be reported as unlinked. Offering the link is the strict
+         * question by construction — the button only shows when nothing in the chain
+         * is bound, and it still stamps the role-carrying element.
          */
         _renderRecord(reading, writable) {
             const surface = this.gfx.surface;
             const element = surface?.getElementById(reading.elementId);
             if (!element)
                 return nothing;
-            const bound = isPivotBound(element);
+            const bound = resolvePivotBinding(element) !== undefined;
             const picker = this.std.getOptional(PivotRecordPickerProvider);
             return this._field('reading-record', translateKey(this.std, 'com.labre.reading.field.record', 'Record'), html `<div class="reading-value">
           ${bound
@@ -573,14 +597,13 @@ let ReadingProposalWidget = (() => {
                 elementId,
                 label: translateKey(this.std, 'com.labre.reading.panel.label', 'Proposed record'),
             }, html `<div class="reading-title">
-          ${translateKey(this.std, 'com.labre.reading.panel.title', 'What this map says about this component')}
-        </div>
-        ${this._renderNodeType(reading, profile)}
-        ${this._renderNature(reading, profile, record, writable)}
-        ${this._renderRelations(reading)} ${this._renderValueFlow(reading)}
-        ${this._renderPhase(reading)} ${this._renderNaming(reading)}
-        ${this._renderRecord(reading, writable)}
-        ${writable ? this._renderDrift(reading) : nothing}`);
+        ${translateKey(this.std, 'com.labre.reading.panel.title', 'What this map says about this component')}
+      </div>`, html `${this._renderNodeType(reading, profile)}
+      ${this._renderNature(reading, profile, record, writable)}
+      ${this._renderRelations(reading)} ${this._renderValueFlow(reading)}
+      ${this._renderPhase(reading)} ${this._renderNaming(reading)}
+      ${this._renderRecord(reading, writable)}
+      ${writable ? this._renderDrift(reading) : nothing}`);
         }
     };
 })();

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

@@ -364,6 +364,14 @@ export interface ReadingDrift {
  * fields, a dangling record, a still-loading one — and the caller shows the
  * local reading alone. That is the `queryPivotProperties` contract: "this
  * editor has no host data layer" is not an error to put in front of a user.
+ *
+ * The binding is resolved through {@link resolvePivotBinding} rather than read
+ * off `element` directly: a business framework draws its artefacts as
+ * composites, and a host that stamped the GROUP a click selects — rather than
+ * the circle that carries the role — is still describing this component. The
+ * whole record side of the reading therefore starts from the RESOLVED binding,
+ * drift included, so a panel and a drift line can never disagree about which
+ * record they are talking about.
  */
 export declare function readRecord(std: BlockStdScope, element: GfxPrimitiveElementModel, profile: ReadingProfile): RecordReading | undefined;
 /**

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

@@ -1,7 +1,7 @@
 import { getUniverseRegistry, hostLanguage, queryPivotProperties, } from '../../affine-shared/services/index.js';
 import { createIdentifier } from '../../global/di/index.js';
 import { LifeCycleWatcher, } from '../../std/index.js';
-import { GfxControllerIdentifier, GfxPrimitiveElementModel, isPivotBound, readElementTags, roleIsA, } from '../../std/gfx/index.js';
+import { GfxControllerIdentifier, GfxPrimitiveElementModel, readElementTags, resolvePivotBinding, roleIsA, } from '../../std/gfx/index.js';
 import { effect, signal } from '@preact/signals-core';
 // Straight at the two leaf modules rather than at the barrel, for the reason
 // `validation.ts` states: `index.js` also re-exports the RENDERER, and a
@@ -458,14 +458,23 @@ function propertyStrings(snapshot, key) {
  * fields, a dangling record, a still-loading one — and the caller shows the
  * local reading alone. That is the `queryPivotProperties` contract: "this
  * editor has no host data layer" is not an error to put in front of a user.
+ *
+ * The binding is resolved through {@link resolvePivotBinding} rather than read
+ * off `element` directly: a business framework draws its artefacts as
+ * composites, and a host that stamped the GROUP a click selects — rather than
+ * the circle that carries the role — is still describing this component. The
+ * whole record side of the reading therefore starts from the RESOLVED binding,
+ * drift included, so a panel and a drift line can never disagree about which
+ * record they are talking about.
  */
 export function readRecord(std, element, profile) {
-    if (!isPivotBound(element))
+    const bound = resolvePivotBinding(element);
+    if (!bound)
         return undefined;
     const keys = profile.recordKeys;
     if (!keys?.nature && !keys?.phase)
         return undefined;
-    const state = queryPivotProperties(std, element.pivotDocId);
+    const state = queryPivotProperties(std, bound.pivotDocId);
     if (!state)
         return undefined;
     const current = state.value;
@@ -482,7 +491,7 @@ export function readRecord(std, element, profile) {
         ? resolveRecordNature(getUniverseRegistry(std).tag(tagId), raw)
         : { resolved: [], unknown: [] };
     return {
-        pivotDocId: element.pivotDocId,
+        pivotDocId: bound.pivotDocId,
         ...(resolved.length ? { nature: resolved } : {}),
         ...(unknown.length ? { unknownNature: unknown } : {}),
         ...(phase.length ? { phase: phase[0] } : {}),
@@ -732,8 +741,10 @@ export class ReadingManager extends LifeCycleWatcher {
         if (!surface || !element)
             return;
         // Only a LINKED element can drift: without a record there is nothing to
-        // disagree with, and the reading is just a reading.
-        if (!isPivotBound(element)) {
+        // disagree with, and the reading is just a reading. "Linked" is the same
+        // tolerant question the panel asks — a binding carried by the composite is
+        // this component's binding (`resolvePivotBinding`).
+        if (!resolvePivotBinding(element)) {
             if (this.drift$.value?.elementId === elementId)
                 this.drift$.value = null;
             return;

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

@@ -48,7 +48,14 @@ const TAG_SET_ID = 'tag.set';
  * ids already written on an element go unread until the flag comes back, which
  * costs nothing, because they were never needed to load or paint anything.
  */
-/** The tick on a selected value, drawn inline like the neighbouring modules'. */
+/**
+ * The tick on a selected value, drawn inline like the neighbouring modules'.
+ *
+ * Inline because this package does not depend on `@blocksuite/icons`, and to
+ * the RIGHT of the label, rendered only when the value is on: `data-option` on
+ * the row gives it the house geometry and the primary colour (`menu-button.ts`),
+ * the same one the Regular/Semibold menu uses.
+ */
 const CheckIcon = html `<svg
   width="20"
   height="20"
@@ -188,6 +195,7 @@ function renderSection(ctx, target, def) {
         const on = selected.includes(value.id);
         const valueLabel = value.label || value.id;
         return html `<editor-menu-action
+      data-option
       data-testid="element-tag-option"
       data-tag-id=${def.id}
       data-value-id=${value.id}
@@ -196,8 +204,8 @@ function renderSection(ctx, target, def) {
       aria-pressed=${on}
       @click=${() => toggleValue(ctx, target, def, value.id)}
     >
-      ${on ? CheckIcon : html `<span style="width: 20px;"></span>`}
       <span class="label">${valueLabel}</span>
+      ${on ? CheckIcon : nothing}
     </editor-menu-action>`;
     });
     return html `<div

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

@@ -9,6 +9,9 @@ import { ValidationManager } from './validation.js';
  * `@blocksuite/icons`, which this package does not depend on and which is not
  * worth a new dependency for one glyph — the same call the framework toolbars
  * already make for their own icons.
+ *
+ * It sits at the END of the row and only when the profile is in force:
+ * `data-option` gives the row the native geometry and the primary colour.
  */
 const CheckIcon = html `<svg
   width="20"
@@ -136,6 +139,10 @@ function renderSection(label, testid, items) {
 function renderMapQualitySection(ctx, element) {
     const label = translateKey(ctx.std, 'com.labre.validation.map-quality.open', 'Map quality…');
     return renderSection(translateKey(ctx.std, 'com.labre.validation.map-quality.section', 'Map quality'), 'validation-map-quality-section', [
+        // No `data-option`, and no spacer: this row OPENS something, it is not
+        // one of N choices. It held a 20 px gutter only to line its label up with
+        // the profile rows above, whose tick used to sit on the left; the tick
+        // has moved right, so the gutter is gone from both.
         html `<editor-menu-action
         data-testid="validation-map-quality-open"
         aria-label=${label}
@@ -143,7 +150,6 @@ function renderMapQualitySection(ctx, element) {
             ctx.std.getOptional(ValidationManager)?.openMapQuality(element);
         }}
       >
-        <span style="width: 20px;"></span>
         <span class="label">${label}</span>
       </editor-menu-action>`,
     ]);
@@ -159,6 +165,7 @@ function renderSections(ctx, target, quality) {
         const options = profiles.map(profile => {
             const selected = profile.id === active?.id;
             return html `<editor-menu-action
+        data-option
         data-testid="validation-profile-option"
         data-profile-id=${profile.id}
         data-selected=${selected ? 'true' : nothing}
@@ -166,10 +173,10 @@ function renderSections(ctx, target, quality) {
         aria-pressed=${selected}
         @click=${() => pickProfile(ctx, element, profile)}
       >
-        ${selected ? CheckIcon : html `<span style="width: 20px;"></span>`}
         <span class="label"
           >${translateKey(ctx.std, profile.labelKey, profile.fallback)}</span
         >
+        ${selected ? CheckIcon : nothing}
       </editor-menu-action>`;
         });
         sections.push(renderSection(translateKey(ctx.std, 'com.labre.validation.profile.section', 'Profile'), 'validation-profile-section', options));

package/dist/_pkgs/affine-block-surface/framework-background/def.d.ts

@@ -382,12 +382,13 @@ export interface BackgroundSurfaceDef {
 /**
  * A filled strip of FIXED width, painted over one margin of the card.
  *
- * The width of a band IS the margin it covers
- * ({@link BackgroundGeometry.margin}), never a second number: the margin is
+ * The thickness of a band IS the margin it covers
+ * ({@link BackgroundGeometry.margin}) — `margin.left` for a `'left'` band,
+ * `margin.top` for a `'top'` one — never a second number: the margin is
  * already the room the plot gives up to the furniture, and letting a
- * declaration state a different width would be two numbers that must agree and
- * one day will not. An element narrower than its own margin clamps the band to
- * the element, which is the only case where the two can disagree.
+ * declaration state a different thickness would be two numbers that must agree
+ * and one day will not. An element smaller than its own margin clamps the band
+ * to the element, which is the only case where the two can disagree.
  *
  * A band is part of the CARD, not a layer over it: it is painted over the
  * card's fill and under its border, so the frame keeps outlining the whole
@@ -395,16 +396,18 @@ export interface BackgroundSurfaceDef {
  * them, and anchored in plot ratios — the plot edge is the band's inner edge,
  * so `x: 0` with a negative `dx` walks back INTO the band.
  *
- * Named consumer: the BPMN pool, a lane whose participant name is written up a
+ * Named consumers: the BPMN pool, a lane whose participant name is written up a
  * filled band along its left edge, with a {@link divider} between that band and
- * the flow area.
+ * the flow area; and the C4 board, whose diagram title is written across a
+ * header strip along its top edge.
  *
- * Only `'left'` for now — same philosophy as the wash direction
- * ({@link BackgroundWashDef.stops}): the union grows the day a framework asks
- * for a top or a right band, not in anticipation of one.
+ * `'left'` and `'top'` — the two a framework has actually asked for. The union
+ * grows the day one asks for a right or a bottom band, not in anticipation of
+ * one, which is the same philosophy the wash direction follows
+ * ({@link BackgroundWashDef.stops}).
  */
 export interface BackgroundSideBandDef {
-    side: 'left';
+    side: 'left' | 'top';
     /** Tint over the whole strip. Absent means the card shows through. */
     fill?: BackgroundColor;
     /** The line between the band and the plot. Absent means none. */

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

@@ -162,15 +162,19 @@ export function createFrameworkBackgroundRenderer(def) {
         // down to the operation.
         const bands = def.chrome?.sideBands;
         if (bands?.length) {
-            // The band IS the margin strip, clamped to an element narrower than its
-            // own margin — the one case where the two can disagree.
-            const bandWidth = Math.min(x0, w);
             for (const band of bands) {
-                if (bandWidth <= 0)
+                const top = band.side === 'top';
+                // The band IS the margin strip it covers, clamped to an element smaller
+                // than its own margin — the one case where the two can disagree.
+                const thickness = top ? Math.min(y0, h) : Math.min(x0, w);
+                if (thickness <= 0)
                     continue;
                 if (band.fill) {
                     ctx.fillStyle = color(band.fill);
-                    ctx.fillRect(0, 0, bandWidth, h);
+                    if (top)
+                        ctx.fillRect(0, 0, w, thickness);
+                    else
+                        ctx.fillRect(0, 0, thickness, h);
                 }
                 const divider = band.divider;
                 if (divider) {
@@ -178,8 +182,11 @@ export function createFrameworkBackgroundRenderer(def) {
                     ctx.lineWidth = divider.width;
                     if (divider.dash?.length)
                         ctx.setLineDash([...divider.dash]);
-                    // Full height: the strip a margin gives up runs the whole side.
-                    line(bandWidth, 0, bandWidth, h);
+                    // The full span: the strip a margin gives up runs the whole side.
+                    if (top)
+                        line(0, thickness, w, thickness);
+                    else
+                        line(thickness, 0, thickness, h);
                     if (divider.dash?.length)
                         ctx.setLineDash([]);
                 }