@formicoidea/labre-core 0.30.1 → 0.32.0

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

@@ -0,0 +1,590 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+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 { effect } from '@preact/signals-core';
+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, 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';
+const PIVOT_BIND_ID = 'pivot.bind';
+/**
+ * How the panel names each side of a parent-child relation, keyed under
+ * `com.labre.reading.relations.`. Chrome, and only chrome.
+ *
+ * Exported because it is DATA: the translation-key manifest walks it rather
+ * than restating the two wordings, which a source scan could not check — the
+ * key is built as a template literal and the fallback reaches `translateKey`
+ * through a local helper.
+ */
+export const RELATION_SIDE_FALLBACK = {
+    consumers: 'Consumers (above)',
+    suppliers: 'Suppliers (below)',
+};
+/**
+ * **The proposal panel** — what the tool reads of one component, offered for
+ * confirmation (MF3).
+ *
+ * It opens on a click and on nothing else: `ReadingManager.open$` is written by
+ * the `element.read` command, which the element's own toolbar and the palette
+ * invoke. Rendering it costs the document nothing — every line is a function of
+ * the board, recomputed at render time, and there is no code path from a render
+ * to a write. The invariant has a test of its own: opening and closing this
+ * panel a hundred times leaves the document byte-identical.
+ *
+ * ## What a confirmation is
+ *
+ * The two writes a user can ask for are the two EXISTING promotion commands:
+ * `tag.set` for a nature and `pivot.bind` for the link to a record. The panel
+ * owns neither — it invokes them through the registry, exactly as
+ * `tags-toolbar.ts` does, so one gesture stays one telemetry event, one undo
+ * step and one read-only guard, wherever it was triggered from.
+ *
+ * A confirmation appears only where there is something to confirm: a value the
+ * RECORD carries and the element does not. The library never proposes a nature
+ * of its own — no derivation, no inference from the name, from the shape or
+ * from the position. An unqualified component with no record simply reads as
+ * unqualified, and the panel says so.
+ *
+ * ## Drift
+ *
+ * A bound element whose drawing has moved away from its record gets one extra
+ * line, informative and non-blocking, with the way to bring the record up to
+ * date: the existing materiality publisher, fire-and-forget, host-side. Nothing
+ * is refused, nothing is blocked and nothing is written to the DOCUMENT — the
+ * board is always right about itself.
+ *
+ * ## Where it sits
+ *
+ * **Anchored to the EDITOR, above the senior button bar and at its width** —
+ * the PO's recette of 02/08/2026 and its second pass, now the shared contract
+ * of ADR 0011. It shipped as a bubble floating beside the element and came back
+ * with two faults: it rendered BEHIND the contextual toolbar, and a paragraph
+ * of prose is not a thing to read out of the corner of a shape. The first pass
+ * made it a bottom-centre panel at a fixed 480px; the second replaced that
+ * arbitrary measure with the toolbar's own, so the two boxes share their left
+ * and right edges. All of that geometry — and the layer above every toolbar
+ * that goes with it — lives in {@link EditorAnchoredPanel}; what is left here
+ * is the reading itself.
+ *
+ * The mechanics that are easy to get wrong are the base class's too: a
+ * zero-sized host so the canvas stays clickable, the pointer pair swallowed on
+ * the panel itself, Escape listened for on the EDITOR HOST rather than on
+ * `document`, and click-away that observes without swallowing.
+ */
+let ReadingProposalWidget = (() => {
+    let _classSuper = EditorAnchoredPanel;
+    let __revision_decorators;
+    let __revision_initializers = [];
+    let __revision_extraInitializers = [];
+    return class ReadingProposalWidget extends _classSuper {
+        constructor() {
+            super(...arguments);
+            this.#_revision_accessor_storage = __runInitializers(this, __revision_initializers, 0);
+            this._elementSubscription = (__runInitializers(this, __revision_extraInitializers), null);
+            this._confirmNature = (elementId, tag, values) => (event) => {
+                event.stopPropagation();
+                this._run(TAG_SET_ID, { tag, values, elementIds: [elementId] });
+                this._revision++;
+            };
+            this._linkRecord = (elementId) => (event) => {
+                event.stopPropagation();
+                const picker = this.std.getOptional(PivotRecordPickerProvider);
+                if (!picker)
+                    return;
+                // `Promise.resolve().then(...)` rather than calling `pick` directly: the
+                // contract says a picker MUST NOT throw, and this `.catch` is the only line
+                // of defence behind that sentence. A picker that throws SYNCHRONOUSLY
+                // escapes a `.catch` on its return value entirely — it never returns one —
+                // and surfaces as an unhandled error out of a lit event handler. Wrapping
+                // the CALL folds both failures onto the same behaviour as a cancel.
+                Promise.resolve()
+                    .then(() => picker.pick(this.std, elementId))
+                    .then(pivotDocId => {
+                    // A cancelled picker writes nothing — the whole point of the rung.
+                    if (!pivotDocId)
+                        return;
+                    this._run(PIVOT_BIND_ID, { pivotDocId, elementIds: [elementId] });
+                    this._revision++;
+                })
+                    .catch(error => {
+                    console.error('PivotRecordPicker.pick threw', error);
+                });
+            };
+            /**
+             * Announce the occurrence's current materialities to the host — the existing
+             * fire-and-forget publisher, and no new channel.
+             *
+             * What crosses is what the seam carries: the occurrence's role and its
+             * type-3 tags (`OccurrenceMaterialityPatch`). A PHASE is a reading of the
+             * 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.
+             */
+            this._updateRecord = (elementId, pivotDocId) => (event) => {
+                event.stopPropagation();
+                const element = this.gfx.surface?.getElementById(elementId);
+                if (!element)
+                    return;
+                publishOccurrenceMaterialities(this.std, buildOccurrencePatch(element, 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;
+                if (manager)
+                    manager.drift$.value = null;
+            };
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __revision_decorators = [state()];
+            __esDecorate(this, null, __revision_decorators, { kind: "accessor", name: "_revision", static: false, private: false, access: { has: obj => "_revision" in obj, get: obj => obj._revision, set: (obj, value) => { obj._revision = value; } }, metadata: _metadata }, __revision_initializers, __revision_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = [
+            editorAnchoredPanelStyles,
+            css `
+    .reading-title {
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .reading-field + .reading-field {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid var(--affine-border-color);
+    }
+
+    .reading-label {
+      color: var(--affine-text-secondary-color);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .reading-value {
+      overflow-wrap: anywhere;
+    }
+
+    .reading-empty {
+      color: var(--affine-text-secondary-color);
+      font-style: italic;
+    }
+
+    .reading-note {
+      margin-top: 2px;
+      color: var(--affine-text-secondary-color);
+      font-size: 13px;
+      overflow-wrap: anywhere;
+    }
+
+    .reading-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .reading-action {
+      padding: 2px 8px;
+      border-radius: 4px;
+      border: 1px solid var(--affine-border-color);
+      background: transparent;
+      color: var(--affine-text-secondary-color);
+      font-family: inherit;
+      font-size: 12px;
+      cursor: pointer;
+    }
+
+    .reading-action:hover {
+      background: var(--affine-hover-color);
+      color: var(--affine-text-primary-color);
+    }
+
+    .reading-action:focus-visible {
+      outline: 2px solid var(--affine-primary-color);
+      outline-offset: 1px;
+    }
+    `,
+        ]; }
+        #_revision_accessor_storage;
+        /** Bumped to force a re-render; the reading itself is never stored. */
+        get _revision() { return this.#_revision_accessor_storage; }
+        set _revision(value) { this.#_revision_accessor_storage = value; }
+        get _manager() {
+            return this.std.getOptional(ReadingManager) ?? null;
+        }
+        get panelOpen() {
+            return Boolean(this._manager?.open$.value);
+        }
+        closePanel() {
+            this._manager?.close();
+        }
+        _wire() {
+            const { _disposables, gfx } = this;
+            const manager = this._manager;
+            if (manager) {
+                // `effect` runs once on creation, and that first run happens INSIDE the
+                // widget's own first update — bumping state there is the "scheduled an
+                // update after an update completed" lit warns about, for a render that is
+                // already happening. Every later run is a real change and is wanted.
+                let primed = false;
+                _disposables.add(effect(() => {
+                    // Read both signals so the panel follows an open/close and a drift.
+                    void manager.open$.value;
+                    void manager.drift$.value;
+                    if (!primed) {
+                        primed = true;
+                        return;
+                    }
+                    this._revision++;
+                }));
+            }
+            // Click-away, Escape, and the re-measure of the bar the panel is aligned
+            // on — one call, and the same one Map quality makes (ADR 0011). The panel
+            // used to CLOSE on a viewport change, because it hung off an element that a
+            // pan or a zoom moved out from under it; anchored to the editor it merely
+            // re-measures, and panning to look at what the reading is talking about
+            // while the reading is on screen keeps working.
+            this.wireAnchoredPanel();
+            // The surface is a signal, not a fact: it can arrive after the widget and
+            // be replaced under it. Anything on the board can change what is read — a
+            // link redrawn, a supplier moved, the map itself resized — so while a panel
+            // is open every update is a reason to read again.
+            _disposables.add(effect(() => {
+                const surface = gfx.surface$.value;
+                this._elementSubscription?.unsubscribe();
+                this._elementSubscription = surface
+                    ? surface.elementUpdated.subscribe(() => {
+                        if (this._manager?.open$.value)
+                            this._revision++;
+                    })
+                    : null;
+            }));
+            _disposables.add(() => {
+                this._elementSubscription?.unsubscribe();
+                this._elementSubscription = null;
+            });
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (this.hasUpdated)
+                this._wire();
+        }
+        firstUpdated() {
+            this._wire();
+        }
+        /** The label a nature value id reads as, or the raw id when no def explains it. */
+        _natureLabel(tagId, valueId) {
+            const def = getUniverseRegistry(this.std).tag(tagId);
+            if (!def || def.values === 'open')
+                return valueId;
+            return def.values.find(value => value.id === valueId)?.label || valueId;
+        }
+        _field(testid, label, body) {
+            return html `<div class="reading-field" data-testid=${testid}>
+      <div class="reading-label">${label}</div>
+      ${body}
+    </div>`;
+        }
+        _renderNodeType(reading, profile) {
+            const { nodeType } = reading;
+            const label = translateKey(this.std, nodeType.labelKey ?? nodeType.roleId, nodeType.roleId);
+            // The hierarchy, resolved through the SAME vocabulary the reading used:
+            // `market` reads as "a kind of Component" because the framework said so in
+            // its role defs, not because this panel knows what a market is.
+            const chain = nodeType.specialises
+                .map(roleId => translateKey(this.std, profile.roles[roleId]?.labelKey ?? roleId, roleId))
+                .join(' › ');
+            return this._field('reading-node-type', translateKey(this.std, 'com.labre.reading.field.type', 'Type of node'), html `<div class="reading-value">${label}</div>
+        ${chain
+                ? html `<div class="reading-note" data-testid="reading-specialises">
+              ${translateKey(this.std, 'com.labre.reading.field.specialises', 'A kind of')}
+              ${chain}
+            </div>`
+                : nothing}`);
+        }
+        /**
+         * The nature the element CARRIES — and, when the record carries a different
+         * one, the record's, offered for confirmation. Never a derived one, and never
+         * a word the framework does not describe.
+         *
+         * `record.nature` has already been resolved against the tag def
+         * (`resolveRecordNature`), so what this button writes is always a value id the
+         * vocabulary knows. What could NOT be resolved is named in a sentence with no
+         * button beside it: the honest thing to say about `"Activity"` when the def
+         * describes `wardley:nature/activity` is that the record says something this
+         * framework does not recognise — not to offer a click that would put the
+         * host's word into the document.
+         */
+        _renderNature(reading, profile, record, writable) {
+            const tagId = profile.nature?.tagId;
+            if (!tagId)
+                return nothing;
+            const carried = reading.nature?.valueIds ?? [];
+            const proposed = record?.nature ?? [];
+            const differs = proposed.length > 0 &&
+                (carried.length !== proposed.length ||
+                    !carried.every(value => proposed.includes(value)));
+            const value = carried.length
+                ? html `<div class="reading-value">
+          ${carried.map(id => this._natureLabel(tagId, id)).join(', ')}
+        </div>`
+                : html `<div class="reading-empty" data-testid="reading-nature-empty">
+          ${translateKey(this.std, 'com.labre.reading.nature.none', 'Not qualified — the reading proposes nothing of its own.')}
+        </div>`;
+            const unknown = record?.unknownNature ?? [];
+            return this._field('reading-nature', translateKey(this.std, 'com.labre.reading.field.nature', 'Nature'), html `${value}
+      ${unknown.length
+                ? html `<div class="reading-note" data-testid="reading-nature-unknown">
+            ${translateKey(this.std, 'com.labre.reading.nature.unknown-record-value', 'The record says')}
+            “${unknown.join('”, “')}”,
+            ${translateKey(this.std, 'com.labre.reading.nature.unknown-record-value.suffix', 'a value this framework does not describe.')}
+          </div>`
+                : nothing}
+      ${differs && writable
+                ? html `<div class="reading-actions">
+            <button
+              class="reading-action"
+              type="button"
+              data-testid="reading-confirm-nature"
+              @pointerdown=${this.swallow}
+              @pointerup=${this.swallow}
+              @click=${this._confirmNature(reading.elementId, tagId, proposed)}
+            >
+              ${translateKey(this.std, 'com.labre.reading.action.confirm-nature', 'Confirm')}
+              ·
+              ${proposed.map(id => this._natureLabel(tagId, id)).join(', ')}
+            </button>
+          </div>`
+                : nothing}`);
+        }
+        _renderRelations(reading) {
+            const consumers = reading.relations.filter(r => r.side === 'consumer');
+            const suppliers = reading.relations.filter(r => r.side === 'supplier');
+            const line = (relations, key) => relations.length
+                ? html `<div class="reading-value" data-testid=${`reading-${key}`}>
+            ${translateKey(this.std, `com.labre.reading.relations.${key}`, RELATION_SIDE_FALLBACK[key])}:
+            ${relations
+                    .map(relation => relation.otherName || relation.otherId)
+                    .join(', ')}
+          </div>`
+                : nothing;
+            const contradictions = reading.relations.filter(r => r.contradictsGeometry);
+            return this._field('reading-relations', translateKey(this.std, 'com.labre.reading.field.relations', 'Parent-child relations'), html `${reading.relations.length === 0
+                ? html `<div class="reading-empty">
+            ${translateKey(this.std, 'com.labre.reading.relations.none', 'No typed link touches this component.')}
+          </div>`
+                : nothing}
+      ${line(consumers, 'consumers')}
+      ${line(suppliers, 'suppliers')}
+      ${contradictions.length
+                ? html `<div class="reading-note" data-testid="reading-contradiction">
+            ${translateKey(this.std, 'com.labre.reading.relations.contradiction', 'A link states the opposite of what the positions show')}:
+            ${contradictions
+                    .map(relation => relation.otherName || relation.otherId)
+                    .join(', ')}
+          </div>`
+                : nothing}`);
+        }
+        /**
+         * **Value flow** — the same typed edges as the relations above, said the way
+         * a value chain is read: from the bottom up.
+         *
+         * One sentence per typed edge, and no section at all when the element has
+         * none: an empty "Value flow" heading states nothing a user wants, and the
+         * relations field already says in its own words that no link touches this
+         * component.
+         *
+         * The sentence is assembled from two halves rather than interpolated, because
+         * `translateKey` returns a plain string and a host catalogue that returned
+         * markup would then be injected into the panel. The fallback reads
+         * "Value flows up from X to Y"; a host that translates
+         * `com.labre.reading.value-flow` gets the same two slots in its own order via
+         * the `.to` suffix key.
+         */
+        _renderValueFlow(reading) {
+            const flows = readValueFlows(reading);
+            if (flows.length === 0)
+                return nothing;
+            const from = translateKey(this.std, 'com.labre.reading.value-flow', 'Value flows up from');
+            const to = translateKey(this.std, 'com.labre.reading.value-flow.to', 'to');
+            return this._field('reading-value-flow', translateKey(this.std, 'com.labre.reading.field.value-flow', 'Value flow'), html `${flows.map(flow => html `<div
+          class="reading-value"
+          data-testid="reading-value-flow-line"
+          data-edge-id=${flow.edgeId}
+        >
+          ${from} ${flow.from} ${to} ${flow.to}
+        </div>`)}`);
+        }
+        _renderPhase(reading) {
+            const { phase } = reading;
+            return this._field('reading-phase', translateKey(this.std, 'com.labre.reading.field.phase', 'Evolution phase'), phase
+                ? html `<div class="reading-value" data-zone-id=${phase.zoneId}>
+              ${translateKey(this.std, phase.labelKey ?? phase.zoneId, phase.labelFallback ?? phase.zoneId)}
+            </div>
+            ${phase.inTransitionBand
+                    ? html `<div class="reading-note" data-testid="reading-phase-band">
+                  ${translateKey(this.std, 'com.labre.reading.phase.band', 'In the zone of punctuated equilibrium')}
+                  ${phase.bandId ? html `(${phase.bandId})` : nothing}
+                </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.')}
+          </div>`);
+        }
+        _renderNaming(reading) {
+            const { naming } = reading;
+            if (!naming)
+                return nothing;
+            return this._field('reading-naming', translateKey(this.std, 'com.labre.reading.field.naming', 'Naming convention'), html `<div class="reading-value" data-conforms=${String(naming.conforms)}>
+        ${naming.conforms
+                ? translateKey(this.std, 'com.labre.reading.naming.conforms', 'The name follows the convention of its nature.')
+                : translateKey(this.std, naming.hintKey, naming.hintFallback)}
+      </div>`);
+        }
+        /**
+         * The link to a pivot record, and the only place this panel can create one.
+         *
+         * The action exists only when the host registered a picker: the library
+         * 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.
+         */
+        _renderRecord(reading, writable) {
+            const surface = this.gfx.surface;
+            const element = surface?.getElementById(reading.elementId);
+            if (!element)
+                return nothing;
+            const bound = isPivotBound(element);
+            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
+                ? translateKey(this.std, 'com.labre.reading.record.linked', 'Linked')
+                : html `<span class="reading-empty"
+              >${translateKey(this.std, 'com.labre.reading.record.none', 'Not linked to a record.')}</span
+            >`}
+      </div>
+      ${!bound && picker && writable
+                ? html `<div class="reading-actions">
+            <button
+              class="reading-action"
+              type="button"
+              data-testid="reading-link-record"
+              @pointerdown=${this.swallow}
+              @pointerup=${this.swallow}
+              @click=${this._linkRecord(reading.elementId)}
+            >
+              ${translateKey(this.std, 'com.labre.reading.action.link', 'Link to a record')}
+            </button>
+          </div>`
+                : nothing}`);
+        }
+        /** The drift line: informative, never blocking, with one way to settle it. */
+        _renderDrift(reading) {
+            const drift = this._manager?.drift$.value;
+            if (!drift || drift.elementId !== reading.elementId)
+                return nothing;
+            return this._field('reading-drift', translateKey(this.std, 'com.labre.reading.field.drift', 'Drift'), html `<div class="reading-value">
+          ${translateKey(this.std, 'com.labre.reading.drift.message', 'The board and the record disagree')}:
+          ${drift.fields
+                .map(field => `${field.field} — ${field.read || '—'} / ${field.record}`)
+                .join('; ')}
+        </div>
+        <div class="reading-actions">
+          <button
+            class="reading-action"
+            type="button"
+            data-testid="reading-update-record"
+            @pointerdown=${this.swallow}
+            @pointerup=${this.swallow}
+            @click=${this._updateRecord(drift.elementId, drift.pivotDocId)}
+          >
+            ${translateKey(this.std, 'com.labre.reading.action.update-record', 'Update the record')}
+          </button>
+        </div>`);
+        }
+        /** Invoke a registered command; a build without it simply has no action. */
+        _run(id, params) {
+            const command = getRegisteredCommands(this.std).find(c => c.id === id);
+            if (!command)
+                return;
+            // The panel hangs off the selected element and is opened from its toolbar,
+            // so that is the surface a confirmation is reported against — never the
+            // palette it was not opened from.
+            runCommand(this.std, command, { surface: 'contextual-toolbar', source: 'toolbar:general' }, params);
+        }
+        render() {
+            // Read the revision so lit re-renders when a signal moved.
+            void this._revision;
+            const manager = this._manager;
+            const elementId = manager?.open$.value;
+            if (!manager || !elementId)
+                return nothing;
+            const reading = manager.reading(elementId);
+            const profile = manager.profileOf(elementId);
+            if (!reading || !profile)
+                return nothing;
+            const element = this.gfx.surface?.getElementById(elementId);
+            // The record's side of the reading, guarded and synchronous. `undefined`
+            // on every degraded path: no binding, no provider, no configured fields.
+            const record = element ? readRecord(this.std, element, profile) : undefined;
+            // Read-only: the readings are all there, the confirmations are not. A
+            // gesture that cannot be carried out must not be offered — the two commands
+            // would refuse it anyway, silently, which is worse.
+            const writable = !this.std.store.readonly;
+            return this.renderAnchoredPanel({
+                testid: 'reading-panel',
+                variant: 'reading-panel',
+                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}`);
+        }
+    };
+})();
+export { ReadingProposalWidget };
+export const readingProposalWidget = WidgetViewExtension('affine:page', READING_PROPOSAL_WIDGET, literal `${unsafeStatic(READING_PROPOSAL_WIDGET)}`);