@issuegraph/editor 0.4.0 → 0.22.1

package/dist/workspace/render.js

@@ -9,7 +9,7 @@
  * |-----------|-------------------------------------------------------|
  * | header    | `auditOverlay` + `renderAuditHeader`                   |
  * | rail      | `renderViewer(…, { projection: 'linear' })`, windowed  |
- * | canvas    | `renderScaleLadder`                                    |
+ * | canvas    | `canvasToolbar` + `renderScaleLadder`                  |
  * | inspector | `inspectorView`, rendered here                         |
  *
  * ## The audit left-bar is applied to the rail's SPEC, never to its markup
@@ -48,15 +48,25 @@
  * forked token set here and no second palette: the theme is the viewer's, and
  * `styles.ts` writes structure against its custom properties.
  */
-import { KEY_ATTRIBUTE, element, normalizeDocument, renderMarkup, renderViewer, resolveTheme, themeCss, viewerStylesheet, } from '@issuegraph/viewer';
+import { KEY_ATTRIBUTE, element, glyphAndLabel, hiddenGlyph, identity, labelFrom, normalizeDocument, renderMarkup, provenanceClause, renderViewer, resolveTheme, themeCss, treatmentFor, viewerStylesheet, } from '@issuegraph/viewer';
+import { edgeIdentity } from '@issuegraph/core';
+import { renderAuditPanel } from "../audit/panel.js";
+import { renderEncodingRefusedBlock } from "../audit/refused.js";
 import { auditStylesheet } from "../audit/styles.js";
+import { IDLE_CREATE_DRAFT } from "../create/draft.js";
+import { KIND_KEYS, RELATE_KEY } from "../create/keys.js";
+import { OVERLAY_TREATMENTS, treatmentForState } from "../overlay/grammar.js";
+import { DELTA_ATTRIBUTE, chipSpec, deltaKind, summarySpec, textOf } from "../reevaluate/parts.js";
+import { reevaluateStylesheet } from "../reevaluate/styles.js";
+import { reevaluateView } from "../reevaluate/view.js";
 import { edgeOverlayStylesheet } from "../overlay/styles.js";
 import { AUDIT_SEVERITY_ATTRIBUTE, auditFilterKeeps, auditOverlay, heaviestRow, renderAuditHeader, } from "../audit/surface.js";
 import { INITIAL_SCALE_STATE } from "../scale/commands.js";
 import { renderScaleLadder } from "../scale/render.js";
 import { scaleLadderStylesheet } from "../scale/styles.js";
-import { inspectorView } from "./inspector.js";
+import { inspectorView, } from "./inspector.js";
 import { railWindow } from "./rail.js";
+import { diffIsEmpty, diffWithin } from "./recovery.js";
 import { INITIAL_SELECTION, selectedEdgeId, selectedKey, } from "./selection.js";
 import { workspaceStylesheet } from "./styles.js";
 /** The four fixed positions. A closed union, which is what keeps `zone` safe. */
@@ -71,6 +81,175 @@ export const ZONES = Object.freeze(['header', 'rail', 'canvas', 'inspector']);
 function zone(name, inner) {
     return `<section class="ig-zone" data-zone="${name}">${inner}</section>`;
 }
+/**
+ * §17f's canvas caption — what this canvas is drawing, and out of how much.
+ *
+ * THE GAP IS THE `direct` TIER, AND ONLY IT. The zone is not silent in general:
+ * `renderScaleLadder` appends the ladder's own chrome after the graph, so a
+ * focused canvas already carries a "return to every component" button, a
+ * declining one already prints a counted refusal sentence, and the isolated
+ * chip and the search are already there. What none of them states is the RATIO
+ * on the one tier where the canvas succeeds — it narrows to a component, draws
+ * it, and says nothing about the rest — so a canvas showing 6 of 312 issues
+ * read exactly like a backlog that has 6.
+ *
+ * SO THE STATEMENT IS SCOPED TO THAT TIER, deliberately. Above the node budget
+ * `renderScaleLadder` draws NO graph at all — the canvas is `null` and the
+ * refusal takes its place — and a caption reading "1500 out of 2000 drawn here"
+ * over an empty canvas would state a thing the surface does not do. That is the
+ * defect {@link CanvasWords} refuses on the frame's own `1 hop`, and refusing it
+ * there while committing it here would be worse than not drawing the row.
+ *
+ * THE NUMBERS ARE THE LADDER'S AND THE DOCUMENT'S, ON ONE BASIS. `nodeCount` is
+ * "the nodes the canvas would draw", the same value the refusal is computed
+ * from, so the caption cannot disagree with the ladder beneath it. The total is
+ * the NORMALIZED document's — the one every zone in this function derives from —
+ * never the raw input, whose counts no zone drew, and never `ladder.canvas`,
+ * which would print `6 out of 6`.
+ *
+ * THE COUNT EXCLUDES ISSUES WITH NO RELATIONSHIP, and the surface says so
+ * elsewhere in its own words — at the FOOT OF THE RAIL where §17a puts it
+ * (`railFooter`), or, on a host that has not worded that row, in the ladder's
+ * own chip directly beneath this caption. This sentence read "the chip below"
+ * until the rail grew the footer, and the count is now in exactly one of those
+ * two places rather than reliably in the nearer one. Nothing else in this
+ * comment moves with it: the argument below is about the two NUMBERS, not about
+ * where the second one is drawn. UNFOCUSED the two are complementary and do sum to the total:
+ * `nodeCount` is every issue carrying a relationship and the chip is every issue
+ * carrying none. FOCUSED they do not, and an earlier draft of this comment said
+ * they did — `nodeCount` is then ONE component's members, so the shortfall is
+ * the chip's population PLUS every other component. What holds either way, and
+ * what the row actually relies on, is that the two count DISJOINT sets: they can
+ * never contradict, whatever they leave between them. So the row does not
+ * restate the chip, and no third number may be derived by subtracting one from
+ * the other.
+ */
+function canvasToolbar(ladder, document, words) {
+    if (words === undefined)
+        return null;
+    const focused = ladder.focus;
+    const statement = ladder.tier !== 'direct'
+        ? null
+        : element('p', { class: 'ig-canvas-caption' }, [
+            // NO CLAUSE AT ALL WHEN NOTHING IS FOCUSED, rather than the label with
+            // an empty value after it. An unfocused canvas is drawing every
+            // component, which is a true thing the counts already say.
+            focused === null
+                ? null
+                : element('span', { class: 'ig-canvas-focus' }, [
+                    element('span', {}, [words.focus]),
+                    // THE PUNCTUATION IS THE PACKAGE'S, AND IT HAS TO ACTUALLY BE
+                    // DRAWN. `CanvasWords.focus` tells a host to omit the colon
+                    // because this draws it; an earlier revision made that promise
+                    // and then emitted only a space, so a host that obeyed the
+                    // contract got `focus #512`. The interpunct after the key is
+                    // the frame's own typography for the same reason.
+                    ': ',
+                    // NOT `identity()`, AND NOT BECAUSE OF THE URL. That helper is
+                    // right about who owns a tracker's link shape — but it renders
+                    // an ANCHOR when the host supplied a url, and an anchor here is
+                    // focusable inside a region that is replaced wholesale on every
+                    // mounted redraw. `focusedKey()` and `commandFocusToken()` both
+                    // read null for it, so the restore falls through to the first
+                    // rail row and `WorkspaceHandle.update`'s promise to keep focus
+                    // is broken by a caption. The caption is a READ-OUT: the canvas
+                    // below it already draws this issue as a focusable node, and the
+                    // rail already links it. So the key is drawn as text, which
+                    // invents no URL and takes no focus.
+                    element('span', { class: 'ig-id' }, [focused]),
+                    ' · ',
+                ]),
+            element('span', { class: 'ig-canvas-shown' }, [
+                element('span', { class: 'ig-canvas-count' }, [String(ladder.nodeCount)]),
+                ' ',
+                element('span', {}, [words.of]),
+                ' ',
+                element('span', { class: 'ig-canvas-count' }, [String(document.issues.length)]),
+                ' ',
+                element('span', {}, [words.shown]),
+            ]),
+        ]);
+    // A STATE, NOT A CONTROL, AND NOT A ROLE. It carries text, so it is announced
+    // in reading order on its own; `role="img"` with an `aria-label` — the shape
+    // `station()` uses — is for an indicator with NO text, and giving one to this
+    // would replace the host's word with a copy of itself. A `button` would be
+    // the dead control `headerControls` refuses to draw.
+    const pill = words.editMode === undefined
+        ? null
+        : element('span', { class: 'ig-edit-mode' }, [words.editMode]);
+    // NOTHING TO SAY, NO ROW. Both halves are conditional and independently so,
+    // and an empty bordered band above the canvas is chrome that carries no fact.
+    if (statement === null && pill === null)
+        return null;
+    return element('div', { class: 'ig-canvas-toolbar' }, [statement, pill]);
+}
+/**
+ * §17a's rail footer — the isolated count and the control that opens it.
+ *
+ * THE FACT IS THE DOCUMENT'S, NOT THE CANVAS'S. `ladder.isolated` is
+ * `document.issues` minus everything in a component, so it is a property of the
+ * backlog rather than of how far the graph narrowed. Frame 17a draws it at the
+ * foot of the order rail and gives the canvas toolbar the projection toggle,
+ * the focus statement and the edit-mode pill instead — so this is where the
+ * count belongs, and `renderScaleLadder` is told not to draw its own.
+ *
+ * THE COUNT AND THE CONTROL ONLY — THE LIST IS DRAWN IN THE CANVAS. Two reasons
+ * it cannot live in this zone, and the second is the load-bearing one. The
+ * footer is sticky, and an element taller than its scrollport cannot stick: the
+ * browser clamps it, so a list inside the footer would lose the pin exactly as
+ * it grew. And the rail is VIRTUALIZED — `railRowAt` turns a scroll offset into
+ * a row index by `floor((scrollTop - chrome) / pitch)`, and `railSpacer` stands
+ * in for the rows outside the window on that same fixed pitch — so content of
+ * arbitrary height anywhere in this scroll track makes every offset beneath it
+ * name the wrong row, and the window is then re-cut against a geometry that no
+ * longer holds. `renderScaleLadder` keeps drawing the list in the canvas zone,
+ * which has no such arithmetic; only the control moves here.
+ *
+ * NOTHING TO SAY, NO ROW — the rule `canvasToolbar` follows and `isolatedSpec`
+ * follows before it. With no words there is no footer, and with no isolated
+ * issues the count is not a fact anyone asked for.
+ */
+function railFooter(isolated, words, listId) {
+    if (words === undefined)
+        return null;
+    if (isolated.count === 0)
+        return null;
+    return element('div', { class: 'ig-rail-footer' }, [
+        // NO CLASS ON THE WRAPPER. It needs no rule of its own — the footer sets the
+        // muted body colour and `.ig-rail-count` lifts the number out of it — and a
+        // class with no rule is exactly what `styles.test.ts`'s second direction
+        // refuses.
+        element('span', {}, [
+            element('span', { class: 'ig-rail-count' }, [String(isolated.count)]),
+            ' ',
+            element('span', {}, [words.isolated]),
+        ]),
+        // A REAL BUTTON, NOT THE FRAME'S `cursor:pointer` SPAN. It is a control, and
+        // a span that looks pressable is the dead control `headerControls` refuses
+        // to draw; the frame's span is a mock's shorthand for one.
+        element('button', {
+            type: 'button',
+            class: 'ig-rail-isolated-toggle',
+            'aria-expanded': isolated.open ? 'true' : 'false',
+            // NAMES WHAT IT OPENS, because what it opens is not beside it. This
+            // toggle is in the rail and its list is drawn by the ladder in the
+            // canvas, so `aria-expanded` alone tells a screen-reader user that
+            // something opened and nothing about where — the one thing the adjacent
+            // disclosure it replaced never had to say. `scrollIntoView` moves the
+            // visual viewport and not accessibility focus, so it does not answer
+            // this either.
+            //
+            // ONLY WHILE THE LIST EXISTS, AND ONLY WITH AN ID TO NAME. A shut
+            // disclosure renders no list, so naming one would be a dangling
+            // reference the a11y baseline refuses — and there would be nothing to
+            // reach. With no `surfaceId` there is no value that would be unique on
+            // the host's page, and a guessed one is the collision `searchSpec`
+            // avoids.
+            ...(isolated.open && listId !== undefined ? { 'aria-controls': listId } : {}),
+            'data-ig-command': isolated.open ? 'close-isolated' : 'open-isolated',
+        }, [isolated.open ? words.hide : words.show]),
+    ]);
+}
 /**
  * The height the rows outside the window would have taken.
  *
@@ -112,14 +291,7 @@ function severityForRow(overlay, members) {
     // the justification was the defect, not the loop.
     return overlay === null ? undefined : heaviestRow(overlay, members)?.severity;
 }
-/**
- * Add `data-ig-audit` to the rail's keyed rows.
- *
- * A total walk that rebuilds the tree rather than mutating it: `ElementSpec` is
- * `readonly` throughout, and a mutating walk would also be visible to the
- * caller's own copy of `scene.root`.
- */
-function markRail(root, severityOf) {
+function markRail(root, severityOf, deltaOf) {
     // TYPED AS `ElementSpec -> ElementSpec` AT THE BOUNDARY, with the child walk
     // kept inside. A single function over `SpecChild` would hand `renderMarkup` a
     // union it does not take, and the obvious repair — casting the result back —
@@ -133,10 +305,56 @@ function markRail(root, severityOf) {
         // resolves to nothing today and to something the day a host names an issue
         // that. Narrowed rather than coerced.
         const severity = typeof key === 'string' ? severityOf(key) : undefined;
-        const children = spec.children?.map(markChild);
-        const attrs = severity === undefined
-            ? spec.attrs
-            : { ...spec.attrs, [AUDIT_SEVERITY_ATTRIBUTE]: severity };
+        const delta = typeof key === 'string' ? deltaOf(key) : undefined;
+        const walked = spec.children?.map(markChild);
+        // THE CHIP IS APPENDED TO THE ROW, WHICH IS WHY IT IS DRAWN HERE AND NOT
+        // IN A MOUNT. §17c puts the effect in place — "only affected rows carry a
+        // delta chip · unaffected rows are left completely alone" — and
+        // `reevaluate/render.ts` deferred that to "the change that assembles the
+        // workspace" on the ground that placing a chip needs the row's geometry.
+        // It does not: the row is a SPEC here, keyed and reachable, and this walk
+        // was already composing one decoration onto it. So the chip is composed
+        // like the audit's mark rather than positioned like an overlay, and no
+        // geometry is consulted at all.
+        //
+        // AN UNAFFECTED ROW IS RETURNED WITH ITS OWN `children` ARRAY, not a
+        // rebuilt one carrying an appended `null` — `deltaOf` answering `undefined`
+        // has to leave the row byte-identical, which is the design's rule made
+        // structural rather than asserted.
+        const chip = delta === undefined ? null : chipSpec(delta.chip, delta.words, { placed: true });
+        const children = chip === null ? walked : [...(walked ?? []), chip];
+        const marked = { ...spec.attrs };
+        if (severity !== undefined)
+            marked[AUDIT_SEVERITY_ATTRIBUTE] = severity;
+        // THE CHIP IS IN THE ROW'S NAME, OR IT IS SILENT.
+        //
+        // Layer 1 gives the row an `aria-label`, and an accessible name computed
+        // from `aria-label` WINS over descendant text — so a chip appended here is
+        // seen and not heard. The rail is the surface a reader arrows through, and
+        // "which row moved, and by how much" is exactly what §17c puts on the row;
+        // the summary above carries aggregate counts and cannot recover it.
+        //
+        // APPENDED TO THE NAME rather than hung off `aria-describedby`, and the
+        // reason is that the alternative costs more than it looks. A description
+        // needs an id, this package emits none anywhere, and `a11y/baseline.ts`
+        // records what ids cost here — a host-derived token reaching an attribute
+        // that other code resolves, which is the injection class the mount's focus
+        // token was written to avoid. A name needs no id and is announced as the
+        // reader arrives rather than after it.
+        //
+        // The separator is layer 1's own: `slotLabel` joins its three parts with
+        // the same em dash, so this reads as one more part rather than a second
+        // sentence in a different hand.
+        const label = marked['aria-label'];
+        if (chip !== null && typeof label === 'string') {
+            marked['aria-label'] = `${label} — ${textOf(chip)}`;
+        }
+        // OMITTED WHEN THE CHIP HAS NO DRAWABLE KIND, rather than stamped empty.
+        // `DELTA_ATTRIBUTE` records why: an attribute on every row with one value
+        // meaning "nothing" is marking the row, not leaving it alone.
+        if (delta?.kind !== undefined)
+            marked[DELTA_ATTRIBUTE] = delta.kind;
+        const attrs = severity === undefined && delta?.kind === undefined ? spec.attrs : marked;
         return {
             ...spec,
             ...(attrs === undefined ? {} : { attrs }),
@@ -145,6 +363,224 @@ function markRail(root, severityOf) {
     }
     return markSpec(root);
 }
+/**
+ * A row's right-hand slot: exactly one of `selected`, a remove control, or the
+ * inbound marker.
+ *
+ * THE ORDER IS THE FRAME'S AND IT IS ALSO THE SAFE ONE. A selected row's SLOT
+ * says so and offers nothing else, which matters because `selected` is the
+ * state that FILTERS this panel: the reader is looking at one edge on purpose,
+ * and a destructive control is not what the slot is for at that moment.
+ *
+ * THE SLOT, NOT THE ROW — §17b's flip sits beside it on exactly that row. The
+ * reasoning above is specific to a DESTRUCTIVE control; a flip is the
+ * corrective act §17b asks for, so it is admitted where a `✕` is not.
+ * {@link relationshipSpec} draws it as the slot's peer and says why there.
+ *
+ * AN INBOUND ROW GETS NO REMOVE CONTROL, and that is a fact about the format
+ * rather than caution. An incoming edge's field is declared in the OTHER
+ * issue's body, so this panel's subject cannot declare it away; a `✕` there
+ * would publish an edit that either does nothing or edits a document the
+ * reader is not looking at. The reference implementation encodes the same rule
+ * as `removable: false`, and frame 17a puts the word `inbound` in the slot the
+ * other rows spend on `✕`.
+ *
+ * THE KEYBOARD'S `⌫` IS NOT A SECOND RULE. `create/keys.ts` acts on the
+ * SELECTED edge because a selection is the only edge a keyboard has named; that
+ * is this rule with the selection as the subject, not an exception to it.
+ *
+ * `selected` IS THE PACKAGE'S OWN WORD, taken from `treatmentForState` rather
+ * than from the words object. Write-state names are already authored here —
+ * `writing…`, `failed`, `invalid` — and a `selected` on `WorkspaceWords` would
+ * be a second spelling of one the overlay grammar publishes on the canvas.
+ */
+function rowSlot(relationship, selected, words) {
+    if (relationship.edgeId === selected) {
+        return element('span', { class: 'ig-relationship-state', 'data-ig-state': 'selected' }, [treatmentForState('selected').label]);
+    }
+    if (relationship.direction === 'incoming') {
+        return element('span', { class: 'ig-relationship-inbound' }, [words.inbound]);
+    }
+    // THE GLYPH IS HIDDEN AND THE NAME IS AN ATTRIBUTE. `glyphAndLabel` draws a
+    // VISIBLE word beside its glyph, which is right for the kind and wrong here:
+    // the frame's slot is a bare `✕`. So the mark is layer 1's `hiddenGlyph` —
+    // the published half of that same pairing, rather than its class and its
+    // `aria-hidden` written out again here, which is exactly the local copy
+    // `glyphAndLabel`'s own header calls the failure it exists to prevent. `✕`
+    // announces as whatever a screen reader's character table calls it, which
+    // describes the mark and not the act, so the host's word becomes the
+    // button's accessible name. On the BUTTON, never on a span around it:
+    // `parts.ts` records that a plain span takes the generic role, on which ARIA
+    // prohibits naming, so the name would be dropped without a warning.
+    return element('button', {
+        type: 'button',
+        class: 'ig-relationship-remove',
+        'data-ig-command': 'delete',
+        // ITS OWN ROW'S EDGE, WHICH IS THE WHOLE POINT OF THE ATTRIBUTE HERE.
+        // `reduceHost`'s delete arm read the selection and ignored the target
+        // while the only delete control lived inside `if (edgeId !== null)`; a
+        // control repeated per row makes that wrong in both directions — a no-op
+        // with an issue selected, and a delete of the WRONG edge with a
+        // different row's edge selected.
+        'data-ig-target': relationship.edgeId,
+        'aria-label': words.remove,
+    }, [hiddenGlyph('\u2715')]);
+}
+/**
+ * §17b's flip, on the selected row.
+ *
+ * ## It is drawn where the sentence is, and only where the reducer can act
+ *
+ * Frame 17b draws a directed relationship as a statement with `⇅ flip` at the
+ * end of the same line, and the row already IS that statement: with an edge
+ * selected the panel filters to one relationship and
+ * {@link relationshipDescription}'s no-subject arm words it forward with both
+ * references in stored order. So the control joins the row rather than opening
+ * a second card above it — a card would need a sentence of its own, and the
+ * panel would then state one relationship twice, one element apart, which is
+ * the encoding ambiguity §17b exists to remove.
+ *
+ * ONLY ON THE SELECTED ROW, and that is a fact about the REDUCER rather than
+ * restraint. `reduceHost`'s `flip` arm takes its edge from
+ * `selectedEdgeId(state.selection)` and ignores `data-ig-target` — deliberately,
+ * because a flip is one operation about the edge the reader is looking at. A
+ * control on an unselected row would publish a command the reducer would answer
+ * about a different edge, or, with an issue selected, about none; the panel's
+ * standing rule is that a control which cannot complete the act it advertises
+ * is not drawn.
+ *
+ * THAT GUARANTEE IS THE MOUNT'S, AND A STANDALONE HOST OWES THE SAME STEP. This
+ * surface is handed a `ViewerDocument` and the reducer a `GraphDocument`, so
+ * "the selected edge exists" is only true while the two agree. `mountWorkspace`
+ * makes them agree by running `reconcileHost` against the landed document
+ * before every render, which clears a selection naming an edge that is gone and
+ * moves one naming an edge hidden behind an unsettled write. A host wiring the
+ * published attributes itself must do the same, or it can draw a flip whose
+ * press the reducer answers with nothing.
+ *
+ * ## A symmetric kind gets no control, and the absence is the finding
+ *
+ * `serialize-with` and `together-with` state one fact whichever way round they
+ * are stored, so a control to reverse them claims something the format does not
+ * say — and the store would refuse the edit as `symmetric-edge` anyway.
+ * `picker/view.ts` already answers `null` there; this agrees with it rather
+ * than contradicting it from the next zone over.
+ *
+ * ONE ORACLE FOR THAT QUESTION. The directedness is read off the SAME
+ * {@link EdgeTreatment} `relationshipDescription` already reads to word the
+ * row, which is what `labelFrom` itself branches on. Importing
+ * `isSymmetricEdgeField` here instead would put two answers to one question at
+ * one call site, in a package whose objection everywhere else is "not a wrong
+ * answer, a second answer". `render.test.ts` pins the two to agree across the
+ * whole vocabulary, so the shorter reach is safe in both directions.
+ *
+ * ## It publishes and wires nothing
+ *
+ * `data-ig-command="flip"` and no target: the attribute the reducer does not
+ * read would advertise a per-row flip it does not implement. On a `button`,
+ * because a span has no tab stop and no native activation — the control §17b
+ * names most error-prone is the last one that should be pointer-only.
+ */
+function flipControl(relationship, selected, words) {
+    if (relationship.edgeId !== selected)
+        return null;
+    if (treatmentFor(relationship.field).symmetric)
+        return null;
+    return element('button', { type: 'button', class: 'ig-relationship-flip', 'data-ig-command': 'flip' }, [words.flip]);
+}
+/**
+ * The host's sentence for a refusal, wherever the panel states one.
+ *
+ * SHARED FOR THE REASON THE HEAD BELOW IS. A refusal reaches the reader in two
+ * shapes — a capsule standing in for a relationship that does not exist, and a
+ * reason attached to one that does — and a second element built at the second
+ * site would be free to take a different class and lose the rule that styles
+ * it, on the half that ships later.
+ */
+function refusalReason(code, words) {
+    return element('span', { class: 'ig-relationship-reason' }, [words.refusals[code]]);
+}
+/**
+ * What a relationship READS as: the kind's glyph and word, and the reference at
+ * the other end. No control, no wrapper — only the description.
+ *
+ * ONE DESCRIPTION FOR THE ROW AND FOR THE CAPSULE. They state the same thing
+ * about the same edge, and they briefly stated it twice — including deriving
+ * `outgoing` from the same two values in both places, which is the shape this
+ * package calls a second answer rather than a repetition.
+ *
+ * SPLIT FROM THE CONTROL THAT WRAPS IT, rather than parameterised with a
+ * "draw a button?" flag, because the two callers do not differ in a DETAIL of
+ * one element: one of them draws no control at all. A flag would leave the
+ * element that IS the control deciding whether to be one, and every attribute
+ * on it conditional on that. The description is the shared fact; who wraps it
+ * is the caller's, exactly as the slot beside it and the border around it
+ * already are.
+ *
+ * ## It draws the OTHER end, and words the kind from the subject's end
+ *
+ * The row used to draw three bare tokens — the field's machine name, then both
+ * endpoints — one of which is the issue whose panel this is. So the reader read
+ * their own subject back on every row and had to work out which of the two
+ * references was the other one, from a token that stated no direction at all
+ * while `data-direction` sat unread on the same element.
+ *
+ * WITH NO ISSUE SUBJECT THERE IS NO "OTHER END", and both are drawn. That is an
+ * edge selection: the panel is showing one relationship rather than one issue's
+ * relationships, so the head reads as the edge is stored, `from` before `to`,
+ * and the kind takes its plain forward wording. Picking one end there would
+ * mean picking arbitrarily and then wording the sentence around the choice.
+ */
+function relationshipDescription(relationship, subject) {
+    const treatment = treatmentFor(relationship.field);
+    const outgoing = subject === null || relationship.from === subject;
+    // THE ROLE TRAVELS WITH THE REFERENCE, and it is not decoration. §17b's rule
+    // is that direction is STATED, never inferred — and with no issue subject
+    // both ends are drawn, so without a role the only thing saying which is which
+    // is their ORDER. That is inference, by the reader and by any host restyling
+    // the row. `directionSpec` published exactly this pair of roles before §17b's
+    // statement became the row; dropping them would have moved the statement and
+    // quietly lost the half that made it a statement.
+    //
+    // OMITTED, NOT FALSIFIED, WHERE THERE IS NO PAIR. With an issue subject the
+    // row draws one reference — the other end — and it is worded relative to the
+    // subject by `labelFrom`, so a `from`/`to` on it would name an end of the
+    // stored pair while the words name an end of the reader's sentence, and those
+    // are not always the same one.
+    const reference = (ref, role) => element('span', { class: 'ig-relationship-ref', 'data-ig-role': role }, [ref]);
+    return [
+        element('span', { class: 'ig-relationship-kind' }, 
+        // LAYER 1's PAIRING, not a second one. The glyph is one of the four
+        // channels the colour-blind-safety claim rests on and is
+        // `aria-hidden` because it announces as a character description;
+        // the word beside it is what a reader hears. A local copy of that
+        // arrangement is free to drop the second half.
+        glyphAndLabel(treatment.glyph, labelFrom(treatment, outgoing))),
+        ...(subject === null
+            ? [reference(relationship.from, 'from'), reference(relationship.to, 'to')]
+            : [reference(outgoing ? relationship.to : relationship.from)]),
+    ];
+}
+/**
+ * A relationship's head on a row that HAS one: the description, inside the
+ * control that selects the edge.
+ *
+ * ONLY WHERE THE EDGE IS IN THE DOCUMENT. `select-edge` reduces to a selection,
+ * and the next render's `reconcileHost` drops a selection naming an edge the
+ * landed document does not carry — so on a phantom this control would close the
+ * inspector instead of inspecting anything. That is the rule the panel's own
+ * header already states about `+ add`: a control that cannot complete the act
+ * it advertises is not drawn. {@link refusalCapsule} draws the description
+ * bare for exactly that reason.
+ */
+function relationshipHead(relationship, subject) {
+    return element('button', {
+        type: 'button',
+        class: 'ig-relationship-select',
+        'data-ig-command': 'select-edge',
+        'data-ig-target': relationship.edgeId,
+    }, relationshipDescription(relationship, subject));
+}
 /**
  * One relationship, as a row the reader can actually operate.
  *
@@ -153,65 +589,895 @@ function markRail(root, severityOf) {
  * reachable by pointer and by nothing else — and a host wiring the published
  * attributes cannot fix that without rebuilding the semantics this package
  * should have supplied. Every other command in the package is already on a
- * button; `refusalSpec`'s capsule is the same `li` + `button` shape.
+ * button; {@link refusalCapsule}'s capsule is the same `li` + `button` shape.
  *
  * The `li` keeps the hue and the direction, because those describe the
  * relationship rather than the action.
+ *
+ * ## A REFUSAL CAN LAND ON A ROW THAT STAYS
+ *
+ * `refused` is the code when the store refused an edit ABOUT this relationship
+ * and the relationship is still there — a create of an edge that already
+ * exists, a retype to the kind it already has, a flip of a symmetric kind. The
+ * reason joins the row and the row keeps its remove control, because the edge
+ * it names is real and removable; only a refusal about an edge that does not
+ * exist replaces the row, and {@link WorkspaceRefusal.phantom} is which. It is
+ * published as `data-ig-code` here for the same reason the capsule publishes
+ * it: a host styles or counts refusals off the store's vocabulary rather than
+ * by matching a sentence.
  */
-function relationshipSpec(relationship) {
+function relationshipSpec(relationship, subject, selected, words, refused) {
     return element('li', {
         class: 'ig-relationship',
         'data-edge': relationship.field,
         // Omitted rather than falsified when the subject is not an issue: an edge
         // selection has no "my end", and `data-direction=""` would claim one.
         'data-direction': relationship.direction ?? undefined,
+        'data-ig-code': refused,
     }, [
-        element('button', {
-            type: 'button',
-            class: 'ig-relationship-select',
-            'data-ig-command': 'select-edge',
-            'data-ig-target': relationship.edgeId,
-        }, [
-            element('span', { class: 'ig-relationship-kind' }, [relationship.field]),
-            element('span', { class: 'ig-relationship-ref' }, [relationship.from]),
-            element('span', { class: 'ig-relationship-ref' }, [relationship.to]),
+        relationshipHead(relationship, subject),
+        refused === undefined ? null : refusalReason(refused, words),
+        rowSlot(relationship, selected, words),
+        // A PEER OF THE SLOT RATHER THAN A FOURTH OCCUPANT OF IT. The slot's
+        // three occupants are exclusive because two are statements and one is a
+        // destructive control, and a row is only ever one of those things; the
+        // flip is neither, and it coexists with the `selected` marker on the one
+        // row that draws both. Last, because frame 17b ends the statement's line
+        // with it.
+        flipControl(relationship, selected, words),
+    ]);
+}
+/**
+ * A refused relationship, drawn where the reader was building it.
+ *
+ * §17b's rule is that a refusal is shown IN PLACE and never snapped back, and
+ * until this the package had no surface that said so: the store marked the edge
+ * `invalid`, the canvas drew a ghost line, and the panel the reader had just
+ * used listed nothing about it. `would-cycle` is the case that matters — it is
+ * the one refusal this package family cannot detect for itself, so it arrives
+ * only after the reader has committed to the relationship.
+ *
+ * IT REPLACES THE ROW ONLY WHEN THERE IS NO RELATIONSHIP UNDER IT, and that
+ * qualification is the correction to an earlier "a refused edge is not a
+ * relationship: it is an edit that did not happen". Three of the store's codes
+ * refuse an edit ABOUT AN EDGE THAT EXISTS — `duplicate-edge`, `unchanged-kind`
+ * and `symmetric-edge` all mark a landed edge — so replacing the row for those
+ * deleted a real relationship from the panel, and with it the only control that
+ * could remove the edge the reader had just been told about.
+ * For an edge that genuinely does not exist the argument stands unchanged:
+ * listing it as an ordinary row would assert a relationship the document does
+ * not have, with a `select-edge` and a `✕` on it offering to remove something
+ * that was never added. {@link WorkspaceRefusal.phantom} is the question, and
+ * {@link relationshipEntries} is where it is asked. Either way the reader's
+ * POSITION is kept, because that is where they were working.
+ *
+ * THE SHAPE IS `scale/render.ts`'s CAPSULE — an `li` carrying a button and a
+ * stated reason — and the shape is all that is copied. That capsule's English
+ * is written inline in this package, which is a debt rather than a precedent;
+ * the reason here is the host's, keyed off the store's own code.
+ *
+ * IT NAMES THE EDGE AND OPERATES NOTHING. The capsule reused the row's head,
+ * which is a `select-edge` control — so a phantom that survived normalization
+ * (a `would-cycle` refusal reaches the panel as an edge, because the store
+ * draws a refused create precisely so a surface can mark it) published a live
+ * selector for an edge the LANDED document does not carry. Under
+ * `mountWorkspace` that click selected the phantom and the next render's
+ * `reconcileHost` dropped the selection again, so the one control on the
+ * capsule closed the inspector rather than inspecting anything. The
+ * description is drawn bare instead, on the rule
+ * {@link WorkspaceRefusal.phantom} already states in as many words: there is no
+ * relationship to operate. Its remove control was withheld for the same reason
+ * from the start; this is the half that was missed.
+ *
+ * `data-ig-code` IS THE STORE'S VOCABULARY VERBATIM, so a host that wants to
+ * style or count refusals reads the code rather than matching a sentence.
+ */
+function refusalCapsule(relationship, code, subject, words) {
+    return element('li', {
+        class: 'ig-relationship-refused',
+        'data-ig-code': code,
+        'data-edge': relationship?.field,
+    }, [
+        // THE RELATIONSHIP IS NAMED WHEN IT CAN BE, AND THE CAPSULE STANDS WHEN
+        // IT CANNOT. The refused edge normally reaches the document as the
+        // store's phantom — `edgeChangeFor` draws a refused create so the refusal
+        // has something to be about — but a host that projects only landed edges
+        // gives us a code and nothing to word, and a refusal the reader cannot
+        // see is worse than one drawn without its subject.
+        relationship === undefined
+            ? null
+            : element('span', { class: 'ig-relationship-name' }, relationshipDescription(relationship, subject)),
+        refusalReason(code, words),
+    ]);
+}
+/**
+ * The numbered kind list, its heading, and the control that withdraws from it.
+ *
+ * DRAWN IN BOTH FRAMES, AND THIS FUNCTION ANSWERS TO BOTH. §17b fixes the
+ * keyboard loop the digits belong to; §17a draws the same list in the inspector
+ * with a heading over it and the digit as a chip at each row's end. Those two
+ * placements are §17a's, taken here under autnmy/issuegraph#147; the flip, the
+ * target search and delete/retype remain §17b's and are not drawn here.
+ *
+ * THE DIGITS ARE `create/keys.ts`'s OWN, through `KIND_KEYS`. Drawing
+ * `index + 1` over the kind order here would be a second construction of the
+ * keyboard's table — which is exactly what the mount's chooser did, agreeing
+ * with the key map only because both walked `EDGE_FIELDS`, with nothing
+ * pinning them to each other.
+ *
+ * THE WORD IS THE EDGE VOCABULARY'S, so an entry in this list and the row it
+ * will become read the same. A `kinds` record on `WorkspaceWords` would be a
+ * third spelling of a wording layer 1 already publishes twice over.
+ *
+ * IT IS NOT DRAWN AT THE TARGET STEP. `renderWorkspace` is markup-only and the
+ * target search is a live input over the reader's query, so that step stays the
+ * shell's. A host using this renderer without `mountWorkspace` can read,
+ * remove and BEGIN a relationship, and must supply its own target picker.
+ *
+ * `source` NAMES THE DRAFT WHEN IT IS NOT THIS PANEL'S OWN, and is `null` when
+ * it is — see {@link createStep} for why the list is drawn either way. Written
+ * as the reference beside the host's phrase, which is `whyRankSpec`'s own shape
+ * for the same problem: the package names the issue and the host writes the
+ * English around it.
+ */
+function kindListSpec(words, source) {
+    return element('div', { class: 'ig-inspector-add' }, [
+        // §17a HEADS THE KINDS, in the caps treatment the stylesheet already
+        // declares for three headings and until now drew only two of. Without it
+        // the five numbered rows run straight on from the relationship rows above,
+        // and nothing on screen says the numbers choose a kind rather than name
+        // more relationships.
+        element('h3', { class: 'ig-inspector-heading' }, [words.addRelationshipHeading]),
+        source === null
+            ? null
+            : element('p', { class: 'ig-inspector-source' }, [
+                `${words.relatingFrom} `,
+                element('span', { class: 'ig-id' }, [source]),
+            ]),
+        element('ul', { class: 'ig-kind-list' }, KIND_KEYS.map((entry) => {
+            const treatment = treatmentFor(entry.edgeKind);
+            return element('li', {}, [
+                element('button', {
+                    type: 'button',
+                    class: 'ig-kind-option',
+                    'data-ig-command': 'kind',
+                    'data-ig-value': entry.edgeKind,
+                    'data-edge': entry.edgeKind,
+                }, [
+                    // §17a PUTS THE DIGIT LAST, IN A CHIP. The kind is what the reader
+                    // is choosing between, so it comes first in the reading order and
+                    // the key follows it — "blocked-by, 1" rather than "1,
+                    // blocked-by". The chip is what carries the "this is a key"
+                    // signal a left-hand column used to carry by alignment alone.
+                    ...glyphAndLabel(treatment.glyph, treatment.label),
+                    element('span', { class: 'ig-kind-digit' }, [entry.key]),
+                ]),
+            ]);
+        })),
+        element('button', { type: 'button', class: 'ig-inspector-cancel', 'data-ig-command': 'cancel' }, [words.cancel]),
+    ]);
+}
+/**
+ * §17a's "why rank" block: the heading, and one sentence explaining the
+ * position.
+ *
+ * THE SYMPTOM THIS PACKAGE WAS FILED FOR. `#122` names it exactly: the frame
+ * gives the inspector a `WHY RANK 2` heading and a sentence, "the shipped
+ * inspector shows raw tokens and no sentence, even though the package already
+ * carries the function that composes provenance". It did, and this composes it.
+ *
+ * THE PROVENANCE CLAUSE IS LAYER 1's, AND THAT IS THE POINT. `provenanceClause`
+ * is the same function the §16 rail row's provenance line is built from, so the
+ * row and the panel state one fact one way. Switching on `RankProvenance` here
+ * would be a second wording, free to drift from the row's the moment either is
+ * edited — which is what the issue means by "composed from the existing
+ * provenance model rather than a second implementation of it".
+ *
+ * A HOLD'S REASON IS RENDERED VERBATIM, exactly as layer 1's `holdLine` renders
+ * it: `ViewerHold.reason` is host-authored, and rewording it here would put
+ * this package in the business of explaining a hold whose vocabulary belongs to
+ * the reader that produced it.
+ *
+ * A RANK AND A HOLD ARE NO LONGER EXCLUSIVE, which is what frame 17a always
+ * asked for: `#512` at rank 2 *and* "Held until #488 closes". `RULINGS.md` §1
+ * (Claude Design, 2026-09-20) settled it and `@issuegraph/derive` now ranks a
+ * held slot whose blocker is inside the previewed order, so the state the
+ * frame draws is representable and PR #126's em dash applies only to the other
+ * arm — a slot whose blocker is outside the order, which still has no number.
+ *
+ * SO THE TWO CHANNELS ARE READ FROM DIFFERENT FIELDS, AND NEITHER IS `rank`.
+ * `data-held` is READINESS — `ready` is the slot's own verdict and the only
+ * field that answers "may this start", exactly as layer 1's `slotPosition`
+ * now reads it for the row's accessible name. The HEADING is the rank: a
+ * number when the order stated a position, and otherwise a word for what is
+ * missing.
+ *
+ * THREE HEADINGS, NOT TWO, because `rank === null` and "held" came apart. A
+ * placed slot names its number, held or not. An unplaced HELD slot says so —
+ * PR #126's em dash, in words. An unplaced READY slot is the case the old
+ * one-field expression got flatly wrong: it was told "why held" while having
+ * no hold to show. `@issuegraph/derive` cannot emit one, but `ViewerDocument`
+ * is a public port and a host composes one by hand, so it is reachable from
+ * outside this repo — and leaving the inference here would ship the defect
+ * this change exists to retire in the package next door. It reuses the rank
+ * word with the rail's own em dash rather than taking a new `WorkspaceWords`
+ * entry: the fact is "there is no number", which is what the rank cell says
+ * with the same character, and a required word would break every host.
+ */
+function whyRankSpec(why, words, holds) {
+    const held = !why.ready;
+    return element('div', { class: 'ig-why-rank', 'data-held': held ? 'true' : 'false' }, [
+        element('h3', { class: 'ig-why-rank-heading' }, [
+            why.rank !== null
+                ? `${words.whyRank} ${String(why.rank)}`
+                : held
+                    ? words.whyHeld
+                    : `${words.whyRank} —`,
+        ]),
+        element('p', { class: 'ig-why-rank-sentence' }, [
+            provenanceClause(why.provenance),
+            why.unitPartners.length === 0
+                ? null
+                : element('span', { class: 'ig-why-rank-unit' }, [
+                    `${words.workedAsOneUnit} `,
+                    element('span', { class: 'ig-id' }, [why.unitPartners.join(', ')]),
+                ]),
         ]),
+        // THE HOLDS BELONG TO THE EXPLANATION, so they live inside this block
+        // rather than beside it. They were briefly stated twice — once worded into
+        // this sentence and once in the list below it — which is the panel telling
+        // a reader the same cause in two voices.
+        //
+        // The LIST is what survived, because it is the half that carries the
+        // holder as a control: `holdRow` publishes `select-issue` on the blocker,
+        // under rules about when that control is withheld which a sentence could
+        // not express. A reason inline would have discarded them.
+        holds.length === 0 ? null : element('ul', { class: 'ig-inspector-holds' }, holds),
     ]);
 }
-function inspectorSpec(view, words, known, leadOf) {
+/**
+ * One header member, rendered, or the empty string.
+ *
+ * The zone is assembled by concatenating already-rendered markup — the audit
+ * header arrives that way and owns its own `aria-pressed` — so a member that is
+ * a spec has to be rendered before it joins them, and an absent member has to
+ * join as nothing rather than as a gap.
+ */
+function specMarkup(spec) {
+    return spec === null ? '' : renderMarkup(spec);
+}
+/**
+ * §17a's `312 open · 64 encoded` — how much of the backlog carries relationships.
+ *
+ * OMITTED WHEN THE HOST STATED NO NUMBERS, never defaulted, on this zone's
+ * standing rule: a zero the reader can trust and a zero nobody computed are
+ * different facts. `Adoption.counts` is optional precisely so a host that
+ * cannot count says nothing.
+ *
+ * THE TOTAL LEADS, WHICH IS THE FRAME'S ORDER AND NOT LAYER 1's. §16a words the
+ * same pair as `64 of 312 declare relationships`, subject first. §17a reads the
+ * backlog first and the encoded subset second, and the two surfaces are allowed
+ * to differ: this is the header of a grooming workspace, where "how much is
+ * left to encode" is the question, and that one is answered by the pair read in
+ * this direction.
+ */
+function adoptionCountsSpec(adoption, words) {
+    const counts = adoption?.counts;
+    if (counts === undefined)
+        return null;
+    return element('span', { class: 'ig-workspace-counts' }, [
+        element('span', { class: 'ig-id' }, [String(counts.total)]),
+        ` ${words.open} · `,
+        element('span', { class: 'ig-id' }, [String(counts.declaring)]),
+        ` ${words.encoded}`,
+    ]);
+}
+/**
+ * §17a's `as of 14:32 ↻` — how fresh the read is, and the way to take another.
+ *
+ * THE CONTROL IS PUBLISHED AND NOT WIRED, the shape layer 1 already gives it:
+ * refreshing a mirror is fetching, which no layer here does, so the button
+ * carries `refresh` on the command attribute and the host that can listens. A
+ * real `button`, so the mount's own click and Enter handling treat it as a
+ * control rather than as a row.
+ *
+ * DRAWN ONLY WHEN THE HOST SUPPLIED A WORD FOR IT, again as layer 1 does: a
+ * control nobody named is one nobody wired.
+ *
+ * STALENESS IS AN ATTRIBUTE, NOT A WORD. See {@link WorkspaceWords.asOf}.
+ */
+function freshnessSpec(freshness, words) {
+    if (freshness === undefined)
+        return null;
+    return element('span', {
+        class: 'ig-workspace-freshness',
+        'data-stale': freshness.stale === true ? 'true' : 'false',
+    }, [
+        `${words.asOf} `,
+        element('span', { class: 'ig-id' }, [freshness.asOf]),
+        freshness.age === undefined || freshness.age === '' ? null : ` · ${freshness.age}`,
+        freshness.refresh === undefined || freshness.refresh === ''
+            ? null
+            : element('button', { type: 'button', class: 'ig-workspace-refresh', 'data-ig-command': 'refresh' }, [freshness.refresh]),
+    ]);
+}
+/**
+ * The host facts the RAIL is given: everything except the two §17a's header now
+ * draws.
+ *
+ * THIS IS THE WHOLE MECHANISM OF #135's MOVE, and it is a subtraction rather
+ * than a switch. Layer 1 draws a fact when it is given one and omits it when it
+ * is not — `hostHeader` returns `null` outright once nothing is left for it —
+ * so the zone that receives a fact is the zone that states it, and no option
+ * has to be invented to say so. `SceneOptions.chrome` is the switch that could
+ * not do this: it would also take the condition notice, the adoption NOTE and
+ * `data-ig-condition`, none of which §17a's header replaces.
+ *
+ * `adoption.note` SURVIVES WHILE `adoption.counts` DOES NOT, which is why this
+ * cannot drop the field whole. They are two independent members of one optional
+ * object — §16h's own note says the design draws the count where adoption is
+ * partial and the line where it is absent — and the line is the rail's panel
+ * footer, a place §17a's header is not.
+ *
+ * `running` SURVIVES BY BEING LEFT ALONE. The NOW row is not part of layer 1's
+ * panel header and never was gated with it; see {@link headerMarkup} for the
+ * premise that said otherwise.
+ */
+function railHostFacts(host) {
+    const { freshness, adoption, ...rest } = host;
+    return adoption?.note === undefined ? rest : { ...rest, adoption: { note: adoption.note } };
+}
+/**
+ * §17a's workspace header: what backlog this is, how much of it is encoded,
+ * what is wrong with it, how fresh the read is, and the way into a first pass.
+ *
+ * IT IS UNCONDITIONAL NOW, AND THAT IS THE FIX. The zone used to be emitted
+ * only when an audit overlay existed — `overlay === null ? '' : zone('header',
+ * …)` — so the header WAS the audit header, and a workspace with no audit
+ * input had no header at all. §17a's header carries five facts and the audit
+ * count is one of them.
+ *
+ * WHAT IT DRAWS IS WHAT THE RAIL DOES NOT, and #135 settled the split. §17a
+ * hoists the identity, the adoption counts and the freshness stamp into a
+ * header spanning all three zones, so this carries five facts: what backlog
+ * this is, how much of it is encoded, what the audit found, how fresh the read
+ * is, and the way into a first pass.
+ *
+ * THE RULING, RECORDED HERE BECAUSE THIS IS THE SURFACE IT IS ABOUT:
+ *
+ *   - `Adoption.counts` and the freshness stamp (with its refresh control) are
+ *     drawn HERE and nowhere else. §17a draws both, and layer 1's panel header
+ *     drew both until this change.
+ *   - `OrderCounts` and `concurrencyCap` stay in the RAIL. They are a different
+ *     pair from the adoption one — how the order splits, not how much of the
+ *     backlog is encoded — and §17a's header does not draw them. The rail is
+ *     the order, so the order's own tally belongs to its panel header.
+ *   - The running-job NOW row stays in the rail, unchanged.
+ *
+ * ⚠️ #135's PREMISE WAS WRONG ABOUT THE NOW ROW, and correcting it is what made
+ * the ruling small. The issue records that `SceneOptions.chrome` takes the
+ * stamp, the refresh control, the count chips AND the NOW row together, so that
+ * flipping it would drop a row §17a's rail does not replace. It does not:
+ * `nowRows` is called unconditionally by all three projection roots, beside the
+ * `chrome`-gated header, so no setting of that switch has ever reached it.
+ *
+ * SO THE SWITCH IS NOT THE LEVER, and it is deliberately left alone. `chrome:
+ * false` also takes the condition notice, the adoption NOTE and the panel's
+ * `data-ig-condition` — three things §17a's header does not replace — so the
+ * all-or-nothing flip could only be made by dropping them. What moves a fact
+ * instead is WHICH ZONE IS GIVEN IT: {@link railHostFacts} hands the rail the
+ * host facts minus the two this header now draws, and layer 1 then omits them
+ * on its own existing "omitted when absent" rule rather than on a new option.
+ *
+ * EVERY FACT COMES FROM THE PORT THAT ALREADY CARRIES IT. `ViewerDocument.host`
+ * is commented "THE HOST-FACTS PORT", and #127 rejected deriving its numbers in
+ * terms: "Reporting is not deriving — the host's number is still what gets
+ * drawn." Counting the document here would give the header a second answer,
+ * free to disagree with the rail beside it.
+ *
+ * OMITTED WHEN ABSENT, NEVER DEFAULTED, for the reason the audit count already
+ * gives: a zero the reader can trust and a zero nobody computed are different
+ * facts, and a header that invents either is worse than one that says less.
+ */
+function headerMarkup(host, auditHeader, words) {
+    // A STRING, not a spec, because one member of this zone already is one: the
+    // audit header comes from its own leaf rendered, and it owns the filter
+    // toggle's `aria-pressed` and the count's own omitted-when-absent rule. The
+    // file's standing idiom applies — everything carrying a dynamic value goes
+    // through `renderMarkup`, and only already-rendered markup is concatenated.
+    const parts = [
+        host?.identity === undefined || host.identity === ''
+            ? ''
+            : renderMarkup(element('span', { class: 'ig-workspace-identity' }, [host.identity])),
+        specMarkup(adoptionCountsSpec(host?.adoption, words)),
+        auditHeader,
+        specMarkup(freshnessSpec(host?.freshness, words)),
+        host?.firstPass === undefined || host.firstPass === ''
+            ? ''
+            : renderMarkup(element('button', { type: 'button', class: 'ig-workspace-firstpass', 'data-ig-command': 'first-pass' }, [host.firstPass])),
+    ];
+    return `<div class="ig-workspace-header">${parts.join('')}</div>`;
+}
+function panelScope(view) {
+    const { subject } = view;
+    switch (subject.kind) {
+        case 'none':
+            return { kind: 'none' };
+        case 'issue':
+            return {
+                kind: 'issue',
+                keys: new Set([subject.issue.key, ...(subject.whyRank?.unitPartners ?? [])]),
+            };
+        case 'edge':
+            return { kind: 'edge', edgeId: subject.relationship.edgeId };
+    }
+}
+/** Whether this panel is the one that states this record. */
+function statedHere(scope, record) {
+    switch (scope.kind) {
+        case 'none':
+            return false;
+        case 'issue':
+            return record.carrier !== null && scope.keys.has(record.carrier);
+        case 'edge':
+            return record.edgeId === scope.edgeId;
+    }
+}
+/**
+ * The three affordances, mapped to the commands that carry them out.
+ *
+ * `satisfies Record<OverlayAffordance, string>` IS THE POINT. A fourth
+ * affordance is a compile error here rather than a button that renders and does
+ * nothing, and the vocabulary it is total over cannot spell `merge` — §17b's
+ * one prohibition, encoded in a type rather than left to a reviewer.
+ */
+const AFFORDANCE_COMMANDS = Object.freeze({
+    'view-diff': 'view-diff',
+    retry: 'retry',
+    'discard-mine': 'discard',
+});
+/**
+ * The region a card's `view-diff` control discloses.
+ *
+ * Derived from the write's own identity so `aria-controls` can name it, and
+ * scoped by a prefix because a page may mount more than one workspace.
+ */
+function diffRegionId(mutationId) {
+    return `ig-recovery-diff-${mutationId}`;
+}
+/** One edge in a difference, named the way the relationship rows name one. */
+function diffEdgeSpec(edge) {
+    return element('li', { class: 'ig-recovery-edge', 'data-edge': edge.kind }, [
+        // OUTGOING, because a diff row names the edge as the document stores it —
+        // `from` then `to` — rather than from the point of view of a subject. There
+        // is no subject here: the list is about the document, not about one issue.
+        element('span', { class: 'ig-relationship-kind' }, [labelFrom(treatmentFor(edge.kind), true)]),
+        element('span', { class: 'ig-id' }, [edge.from]),
+        element('span', { class: 'ig-id' }, [edge.to]),
+    ]);
+}
+/** One side of a difference, or nothing when that side is empty. */
+function diffSideSpec(heading, edges) {
+    return edges.length === 0
+        ? null
+        : element('div', { class: 'ig-recovery-side' }, [
+            element('h5', { class: 'ig-recovery-side-name' }, [heading]),
+            element('ul', { class: 'ig-recovery-edges' }, edges.map(diffEdgeSpec)),
+        ]);
+}
+/**
+ * The held difference, drawn.
+ *
+ * NOTHING HERE COMBINES THE TWO SIDES. They are separate lists under separate
+ * headings, with no control that takes both — which is what "never auto-merge"
+ * looks like in markup rather than in a comment.
+ */
+function diffSpec(diff, words, id) {
+    if (diffIsEmpty(diff)) {
+        return element('p', { class: 'ig-recovery-diff-empty', id }, [words.diffEmpty]);
+    }
+    return element('div', { class: 'ig-recovery-diff', id }, [
+        diffSideSpec(words.upstreamOnly, diff.upstreamOnly),
+        diffSideSpec(words.mineOnly, diff.mineOnly),
+        diffSideSpec(words.mineRemoved, diff.mineRemoved),
+        diff.carrierReversed.length === 0
+            ? null
+            : element('div', { class: 'ig-recovery-side' }, [
+                element('h5', { class: 'ig-recovery-side-name' }, [words.carrierReversed]),
+                element('ul', { class: 'ig-recovery-edges' }, 
+                // BOTH DIRECTIONS, SIDE BY SIDE. Which end declares a symmetric
+                // relationship is the fact `edgeId` discards, so stating one
+                // direction here would be this package picking a winner.
+                diff.carrierReversed.flatMap((change) => [
+                    diffEdgeSpec(change.mine),
+                    diffEdgeSpec(change.upstream),
+                ])),
+            ]),
+        diff.issuesChanged.length === 0
+            ? null
+            : element('div', { class: 'ig-recovery-side' }, [
+                element('h5', { class: 'ig-recovery-side-name' }, [words.issuesChanged]),
+                element('ul', { class: 'ig-recovery-issues' }, diff.issuesChanged.map((change) => element('li', { class: 'ig-recovery-issue' }, [
+                    element('span', { class: 'ig-id' }, [change.ref]),
+                    // BOTH TITLES, NEVER ONE RECONCILED ONE. A single line here
+                    // would be this package choosing a winner, which is the whole
+                    // of what §17b forbids.
+                    element('span', { class: 'ig-recovery-was' }, [change.mine?.title ?? '']),
+                    element('span', { class: 'ig-recovery-now' }, [change.upstream?.title ?? '']),
+                ]))),
+            ]),
+    ]);
+}
+/**
+ * The label for one affordance on one card.
+ *
+ * KEYED OFF THE CARD'S KIND, not off the affordance alone: `retry` is two
+ * different operations and §17b gives them two different names.
+ */
+function affordanceWord(affordance, kind, words) {
+    switch (affordance) {
+        case 'view-diff':
+            return words.viewDiff;
+        case 'retry':
+            return kind === 'conflict' ? words.retryOnLatest : words.retry;
+        case 'discard-mine':
+            return words.discardMine;
+    }
+}
+/**
+ * One unsettled write the reader can act on.
+ *
+ * THE BUTTONS ARE THE GRAMMAR TABLE'S, NOT A LIST WRITTEN HERE.
+ * `OVERLAY_TREATMENTS[kind].affordances` is what the line already draws its
+ * state from, so the card and the edge cannot come to offer different things —
+ * and because `OverlayAffordance` has no `merge` member, no entry in that table
+ * can produce a merge button. That is what this construction buys, and it is
+ * worth being exact about what it does NOT buy: the behavioural guarantee that
+ * nothing merges lives one layer down, in a store that exposes no merge call
+ * and a `HostEffect` with no merge arm.
+ *
+ * EVERY BUTTON CARRIES `data-ig-target`. The mount turns an attribute-borne
+ * command into `{ kind: 'control', name, target }`, and the reducer's `retry`
+ * and `discard` arms return NO EFFECT when `target` is undefined. Without the
+ * attribute all three controls render, read correctly, and do nothing — while
+ * every assertion about the command names stays green.
+ */
+function recoveryCard(recovery, words, diffOpen, keys) {
+    const treatment = OVERLAY_TREATMENTS[recovery.kind];
+    const open = recovery.kind === 'conflict' && diffOpen === recovery.mutationId;
+    return element('li', {
+        class: 'ig-recovery',
+        // THE STORE'S OWN VOCABULARY, so a host styles or counts these off the
+        // state rather than by matching a sentence — `data-ig-code`'s rule.
+        'data-ig-state': recovery.kind,
+    }, [
+        element('h4', { class: 'ig-recovery-name' }, [
+            recovery.kind === 'conflict' ? words.conflict : words.failed,
+        ]),
+        recovery.kind === 'failed'
+            ? element('p', { class: 'ig-recovery-reason' }, [recovery.reason])
+            : null,
+        // THE REFRESH ERROR SITS ABOVE THE CONTROLS, because it is the reason the
+        // control the reader last pressed did nothing.
+        recovery.kind === 'conflict' && recovery.refreshError !== null
+            ? element('p', { class: 'ig-recovery-refresh-error' }, [
+                `${words.retryFailed} `,
+                element('span', { class: 'ig-recovery-refresh-detail' }, [recovery.refreshError]),
+            ])
+            : null,
+        element('div', { class: 'ig-recovery-actions' }, treatment.affordances.map((affordance) => element('button', {
+            type: 'button',
+            class: 'ig-recovery-action',
+            'data-ig-command': AFFORDANCE_COMMANDS[affordance],
+            'data-ig-target': recovery.mutationId,
+            // A DISCLOSURE, NOT A TOGGLE BUTTON. `view-diff` shows and hides
+            // a region, so `aria-expanded` (with `aria-controls` naming it)
+            // is the pattern; `aria-pressed` announces a two-state button and
+            // tells a screen-reader user nothing about the region that
+            // appeared. The other two act once and carry neither.
+            'aria-expanded': affordance === 'view-diff' ? (open ? 'true' : 'false') : undefined,
+            // ONLY WHILE THE REGION EXISTS. The difference is rendered only
+            // when open, so naming it while shut pointed `aria-controls` at
+            // no element at all — which the test for this control already
+            // calls "worse than none at all", while checking only the open
+            // case where it does resolve. `aria-expanded="false"` is
+            // complete on its own; `aria-controls` is optional, and a
+            // dangling IDREF is invisible on screen and total for a
+            // screen-reader user. Found by the a11y baseline's
+            // reference rule on its first run.
+            'aria-controls': affordance === 'view-diff' && open ? diffRegionId(recovery.mutationId) : undefined,
+        }, [affordanceWord(affordance, recovery.kind, words)]))),
+        // NARROWED BY THE PANEL'S KEY SET, not by the carrier alone. A together
+        // unit's lead speaks for its partners, so a single key would drop a
+        // partner's conflicted edge from the one panel entitled to state it.
+        // `null` keys is the unplaced region, which is nobody's unit: nothing is
+        // narrowed away there.
+        open && recovery.kind === 'conflict'
+            ? diffSpec(keys === null ? recovery.diff : diffWithin(recovery.diff, keys), words, diffRegionId(recovery.mutationId))
+            : null,
+    ]);
+}
+/** The cards a panel states, or nothing when it states none. */
+function recoveryListSpec(recoveries, words, diffOpen, keys, heading) {
+    if (recoveries.length === 0)
+        return null;
+    return element('div', { class: 'ig-recovery-region' }, [
+        heading === null ? null : element('h3', { class: 'ig-inspector-heading' }, [heading]),
+        element('ul', { class: 'ig-recovery-list' }, recoveries.map((recovery) => recoveryCard(recovery, words, diffOpen, keys))),
+    ]);
+}
+/**
+ * The relationship list, with a refused edit drawn where the reader made it.
+ *
+ * ## A refusal about an edge that EXISTS keeps its row
+ *
+ * See {@link WorkspaceRefusal.phantom}. Four of the store's codes mark a landed
+ * edge, so the capsule replaces the row only when there is no relationship
+ * under it; otherwise the reason joins the row and the remove control stays.
+ *
+ * ## Whose refusal it is, is not a question asked here
+ *
+ * {@link statedHere} asks it, of the carrier the refusal arrived carrying —
+ * and that is the whole of the change this function used to be the wrong place
+ * for. `refusals` is one list for the whole surface, not one per panel, and
+ * this function used to filter it by asking whether the refused edge's
+ * IDENTITY named the panel's subject. That is a second derivation of the
+ * edit's subject, run against a subject derived by a different rule, and every
+ * way the two can come apart is a refusal drawn in the wrong place or in no
+ * place: on every panel when nothing matched, on none when the panel had been
+ * canonicalized onto a together unit's lead, on none again when the projection
+ * had hidden the edge and left the panel with no subject at all. The refusal
+ * names its own carrier now, so there is one derivation and nothing for a
+ * second one to disagree with.
+ *
+ * ## The list is the ledger's, and the LAST refusal on an edge is the one
+ *
+ * One row states one reason, and the reader can be refused twice on one
+ * relationship — `ProjectedEdge.writes` is a list because two edits touching
+ * one edge compose in the order the reader made them. The last is the one they
+ * just caused; the first is one they have read and moved past. That collapse
+ * is `Map`'s repeated-key rule over `refusals` IN ORDER, which is why the
+ * option is a list rather than a map a caller had already collapsed: a caller
+ * assembling one from two passes loses the chronology at the join, and reports
+ * a stale reason for an edge the reader has just been refused on again.
+ *
+ * ## A refusal with no row is still drawn
+ *
+ * The refused edge normally reaches the document — the store draws a refused
+ * create as a phantom precisely so a surface can mark it — but that depends on
+ * the host's projection, and a refusal that vanished because the host projects
+ * only landed edges is the "never silently dropped" half of §17b's rule failing
+ * quietly. So a refusal this panel states and no row carries is appended after
+ * the rest, as a capsule.
+ */
+function relationshipEntries(view, subject, selected, context) {
+    const scope = panelScope(view);
+    const stated = new Map();
+    for (const refusal of context.refusals) {
+        if (statedHere(scope, refusal))
+            stated.set(refusal.edgeId, refusal);
+    }
+    const listed = new Set();
+    const rows = view.relationships.map((relationship) => {
+        const refusal = stated.get(relationship.edgeId);
+        if (refusal === undefined) {
+            return relationshipSpec(relationship, subject, selected, context.words, undefined);
+        }
+        listed.add(relationship.edgeId);
+        return refusal.phantom
+            ? refusalCapsule(relationship, refusal.code, subject, context.words)
+            : relationshipSpec(relationship, subject, selected, context.words, refusal.code);
+    });
+    const orphaned = [...stated.values()]
+        .filter((refusal) => !listed.has(refusal.edgeId))
+        .map((refusal) => refusalCapsule(undefined, refusal.code, subject, context.words));
+    return [...rows, ...orphaned];
+}
+/**
+ * §17a's inspector panel.
+ *
+ * ## The heading and the clear control are the panel's, not the list's
+ *
+ * Both used to hang off the relationship list, and the clear control was drawn
+ * only while an EDGE selection was narrowing it — so a reader who had selected
+ * an issue had no way back to nothing selected, on a control whose own doc
+ * says it "returns to nothing selected" and whose command is `clear`. The
+ * condition it wanted was "is there a selection to clear", which is what it now
+ * asks. `INITIAL_SELECTION` resolves to `none`, so the control is absent
+ * exactly when pressing it would do nothing.
+ *
+ * ## The create step is drawn here, and the target step is not
+ *
+ * See {@link kindListSpec}. What the panel owns is `+ add` and the numbered
+ * kind list; the target search stays in the shell because it is a live input
+ * over the reader's query and this renderer returns markup.
+ *
+ * WITH AN EDGE SELECTED IT DRAWS NEITHER. That is not the create path being
+ * unavailable — it is the panel filtered to one relationship, where "add a
+ * relationship from the selected issue" has no subject: `reduceHost`'s `add`
+ * reads `selectedKey`, which answers `null` for an edge selection. A control
+ * that could not complete the act it advertises is the finding the audit
+ * header already records paying for once.
+ */
+function inspectorSpec(view, context) {
+    const { words } = context;
     const subject = view.subject;
+    // THE CANONICAL SUBJECT, NOT THE SELECTION'S KEY. `inspectorView` folds a
+    // together-unit member onto its slot's lead and lists the LEAD's
+    // relationships, so a row worded against the key the reader clicked would
+    // read every relationship from the wrong end on exactly the units where a
+    // partner was selected. Read off the view, which is what the list was built
+    // from.
+    const key = subject.kind === 'issue' ? subject.issue.key : null;
+    const selected = subject.kind === 'edge' ? subject.relationship.edgeId : null;
+    const entries = relationshipEntries(view, key, selected, context);
+    // THE SAME SCOPE THE RELATIONSHIP LIST USED, asked once here rather than
+    // recomputed per region: two calls could not disagree today, but a panel that
+    // decides its own reach twice is the shape `carrier` exists to have ended.
+    const scope = panelScope(view);
+    // ASKED ONCE, FOR THE SAME REASON `scope` IS. §17a draws the create path in
+    // two zones — `+ add` on the relationships header, the numbered kinds under
+    // their own heading — and a step derived separately per zone is two answers
+    // to one question, free to disagree the day either guard moves.
+    const step = createStep(context, key);
     return element('div', { class: 'ig-inspector', 'data-subject': subject.kind }, [
+        element('div', { class: 'ig-inspector-head' }, [
+            element('h2', { class: 'ig-inspector-name' }, [words.inspector]),
+            subject.kind === 'none'
+                ? null
+                : element('button', { type: 'button', class: 'ig-inspector-clear', 'data-ig-command': 'clear' }, [words.clearSelection]),
+        ]),
         subject.kind === 'none'
             ? element('p', { class: 'ig-inspector-empty' }, [words.nothingSelected])
             : null,
         subject.kind === 'issue'
             ? element('div', { class: 'ig-inspector-issue' }, [
-                element('h2', { class: 'ig-inspector-title' }, [subject.issue.title]),
-                element('span', { class: 'ig-inspector-key' }, [subject.issue.key]),
-                subject.position === null
+                element('h3', { class: 'ig-inspector-title' }, [subject.issue.title]),
+                // LAYER 1's CHIP, not a second spelling of it. `identity` links the
+                // qualified reference when the host gave a URL and prints it plain
+                // when it did not — the rule for which is exactly the knowledge this
+                // package must not carry a second copy of.
+                identity(subject.issue),
+                // THE RANK IS THE HEADING'S NOW, so there is no separate position
+                // line: it printed the number, or the em dash for a held slot, which
+                // is exactly what `WHY RANK n` and `WHY HELD` already say. Two
+                // elements for one fact is how they come to disagree.
+                subject.whyRank === null
                     ? null
-                    : element('p', {
-                        class: 'ig-inspector-position',
-                        'data-ready': subject.position.ready ? 'true' : 'false',
-                    }, 
-                    // A HELD SLOT PRINTS THE VIEWER'S EM DASH, not a number. It has
-                    // no position in the sequence, and printing one would claim work
-                    // is queued that nothing can start.
-                    [subject.position.rank === null ? '—' : String(subject.position.rank)]),
-                subject.position === null || subject.position.holds.length === 0
-                    ? null
-                    : element('ul', { class: 'ig-inspector-holds' }, subject.position.holds.map((hold) => holdRow(hold, known, (key) => leadOf.get(key) === leadOf.get(subject.issue.key)))),
+                    : whyRankSpec(subject.whyRank, words, subject.whyRank.holds.map((hold) => holdRow(hold, context.known, (subjectKey) => context.leadOf.get(subjectKey) === context.leadOf.get(subject.issue.key)))),
             ])
             : null,
+        // ONE DERIVATION, READ TWICE. The step is asked once here and both
+        // placements below read the answer, so the header and the body cannot
+        // disagree about WHICH step is live. What each draws for a given arm is
+        // still a discipline this file keeps rather than one the type checker
+        // keeps — the single-return shape this replaces made drawing both
+        // unrepresentable, and a value read at two sites does not. The pin that
+        // stands where the return ordering used to is the one asserting no `add`
+        // control exists anywhere in the panel at the kind step.
         element('div', { class: 'ig-inspector-relationships', 'data-filtered': view.filtered ? 'true' : 'false' }, [
-            element('h3', { class: 'ig-inspector-heading' }, [words.relationships]),
-            view.filtered
-                ? element('button', { type: 'button', class: 'ig-inspector-clear', 'data-ig-command': 'clear' }, [words.clearSelection])
+            // §17a PUTS `+ add` ON THE HEADING'S OWN ROW, and the reason is the
+            // list between them: it is unbounded, so a control after it drifts
+            // down the panel as a subject gains relationships and is below the
+            // fold on the busy issues a groomer most needs it for. On the header
+            // row its position does not depend on the content.
+            element('div', { class: 'ig-inspector-relationships-head' }, [
+                element('h3', { class: 'ig-inspector-heading' }, [words.relationships]),
+                step.kind === 'add' ? addControlSpec(words, step.subject) : null,
+            ]),
+            // A STATED EMPTY, AND ONLY WHERE THERE IS A SUBJECT TO STATE IT ABOUT.
+            // With nothing selected the panel already says so once, in
+            // `nothingSelected`; adding "no relationships" under it would be the
+            // same absence reported twice, in two registers, on the render where
+            // the reader has asked nothing yet.
+            entries.length === 0 && subject.kind !== 'none'
+                ? element('p', { class: 'ig-inspector-none' }, [words.noRelationships])
                 : null,
-            view.relationships.length === 0
-                ? null
-                : element('ul', { class: 'ig-relationship-list' }, view.relationships.map((relationship) => relationshipSpec(relationship))),
+            entries.length === 0 ? null : element('ul', { class: 'ig-relationship-list' }, entries),
+            // THE STEPS ARE EXCLUSIVE, AND THE CHAIN IS THE SHELL'S OWN. `+ add`
+            // begins a draft; the numbered list is what a live draft with no kind
+            // yet looks like. Drawing `+ add` beside a live list would offer a
+            // reader mid-draft a control that RESETS the draft they are in —
+            // `create/draft.ts` makes `begin` clear the kind and the target
+            // deliberately.
+            step.kind === 'kinds' ? kindListSpec(words, step.source) : null,
         ]),
+        // STATED WHERE THE READER MADE THE EDIT, by the same rule the refusals use
+        // — one `statedHere`, one carrier, no second derivation of whose panel this
+        // is. No heading: the cards carry their own state names, and a heading over
+        // a region that is usually absent is a heading a reader learns to skip.
+        recoveryListSpec(context.recoveries.filter((recovery) => statedHere(scope, recovery)), words.recovery, context.diffOpen, scope.kind === 'issue' ? scope.keys : null, null),
+        // THE WRITES WITH NOWHERE TO SIT, ON EVERY PANEL. A recovery whose carrier
+        // is `null` is about issues this backlog does not hold, so no panel is
+        // entitled to it — and the refusal path drops exactly these. Dropping a
+        // REFUSAL costs a sentence the reader can live without; dropping a RECOVERY
+        // takes away the only retry and discard they have, which is #137's
+        // Done-when 1 ("offers all three resolutions from the editor's own
+        // surface") failing on the state where it matters most. So they are drawn
+        // here, under a heading that says why they are not on a relationship.
+        // AND NEVER TWICE ON ONE PANEL. `statedHere`'s EDGE arm matches on
+        // `edgeId` and ignores the carrier, so an edge panel narrowed to a
+        // null-carrier recovery's own edge states it above AND here — two identical
+        // cards, two tab stops, and two buttons carrying one write's id.
+        recoveryListSpec(context.recoveries.filter((recovery) => recovery.carrier === null && !statedHere(scope, recovery)), words.recovery, context.diffOpen, null, words.recovery.unplaced),
+    ]);
+}
+function createStep(context, subject) {
+    const { draft, drop } = context;
+    if (draft.source !== null && draft.kind === null && drop === null) {
+        return { kind: 'kinds', source: draft.source === subject ? null : draft.source };
+    }
+    // `+ add` NEEDS A SUBJECT TO BEGIN FROM, and `reduceHost`'s `add` arm answers
+    // `null` for an edge selection and for none — so drawing it there would
+    // publish an act that cannot complete.
+    if (subject !== null && draft.source !== subject)
+        return { kind: 'add', subject };
+    return { kind: 'none' };
+}
+/**
+ * §17a's `+ add`, with the key that does the same thing beside it.
+ *
+ * THE HINT IS THE BINDING'S OWN LETTER, through {@link RELATE_KEY}. A literal
+ * here would be a second spelling of a key the map already owns, free to go
+ * stale the day the binding moves and with nothing failing to say so — the
+ * drift `create/keys.ts`'s header rejects in terms, and the reason `KIND_KEYS`
+ * exists for the digits one function below.
+ *
+ * IT IS `aria-hidden`, AND THE BUTTON KEEPS THE HOST'S WORD AS ITS NAME. An
+ * accessible name is computed from descendant text, so an exposed hint appends
+ * a bare letter to the act — "add relationship R" — which announces a shortcut
+ * as though it were part of the label. Hidden, the name is the host's word
+ * alone. This is the pairing rule `hiddenGlyph` already applies to every mark
+ * beside a word in this package: the mark is seen, the word is heard.
+ *
+ * UPPERCASE IS THE STYLESHEET'S. The map stores the lowercase key a press
+ * normalizes to; §17a draws `R`. `text-transform` renders it, as it already
+ * does for every heading in this panel, so there is no second string.
+ *
+ * NOTE THE HINT AND THE CONTROL CAN BEGIN FROM DIFFERENT ISSUES. `keyIntent`'s
+ * `relate` arm begins from `KeyboardContext.focused`, while this button
+ * publishes the canonical `data-ig-target`; on a together unit's non-lead
+ * member those are different issues, which {@link createStep} records. Both
+ * begin a draft the reader can see and cancel, so the pairing is kept.
+ *
+ * AND THE KEY NOW WORKS WHILE THIS BUTTON ITSELF HOLDS FOCUS — it did not when
+ * the hint was first drawn beside it, and `#173` is the repair. The hint had
+ * been naming a key the reader genuinely has at the one focus position where it
+ * was inert: `interaction()` answered `elsewhere` for a focused command control
+ * and `create/keys.ts`'s `reaches()` refuses every binding there, while
+ * `KeyboardContext.focused` was the rail's tab stop and so `null` then, leaving
+ * the `relate` arm with nothing to relate FROM even had the interaction
+ * reached. Both halves moved: `add-control` is a `CreateInteraction` admitting
+ * `RELATE_KEY` alone, and `focusedAddSubject` supplies the source from the
+ * attribute below.
+ *
+ * WHICH IS WHY THE ATTRIBUTE IS LOAD-BEARING FOR THE KEYBOARD TOO, and no
+ * longer only for the pointer: `focusedAddSubject` reads exactly this
+ * `data-ig-target`, narrowed to the `add` command, so the note above about the
+ * hint and the control beginning from different issues is now the ONE case
+ * where they still can — a together unit's non-lead member holding the rail's
+ * tab stop, where `focusedKey` answers first and this fallback is not reached.
+ */
+function addControlSpec(words, subject) {
+    return element('button', {
+        type: 'button',
+        class: 'ig-inspector-addbutton',
+        'data-ig-command': 'add',
+        // THE CANONICAL SUBJECT, PUBLISHED, for the reason the row's remove
+        // control publishes its own edge. `reduceHost`'s `add` arm read
+        // `selectedKey` — the RAW key — while everything around it is worded
+        // against the slot LEAD that `inspectorView` canonicalizes to, so
+        // selecting a together-unit PARTNER drew a panel titled with the lead
+        // and began a relationship from the partner. The act names its
+        // subject; the selection is the fallback for a control that names none.
+        'data-ig-target': subject,
+    }, [
+        // THE WORD IS A BARE CHILD, NOT A WRAPPED ONE. A span around it would need
+        // a class, and a class with no rule is what `styles.test.ts` refuses —
+        // correctly, since an element this sheet does not style is one a host
+        // cannot theme.
+        words.addRelationship,
+        element('span', { class: 'ig-inspector-addkey', 'aria-hidden': 'true' }, [RELATE_KEY]),
     ]);
 }
 /**
@@ -303,6 +1569,17 @@ export function renderWorkspace(input, options) {
     const document = sound.document;
     // The keys a hold's subject control may name — see `holdRow`.
     const known = new Set(document.issues.map((issue) => issue.key));
+    // THE EDGE IDS THIS SURFACE ACTUALLY DRAWS, for §17d's remedies to gate on.
+    //
+    // BUILT FROM THE DRAWN DOCUMENT, not from the audit's. The audit reads a
+    // document that is not always the one on screen, and the two disagreeing is
+    // the normal case rather than the exceptional one — a host audits everything
+    // it holds and renders a page of it.
+    //
+    // `edgeIdentity` RATHER THAN A HAND-SPELLED KEY, because that function is
+    // what mints the ids a finding carries and what the host looks one up by. A
+    // second spelling here would agree with itself and disagree with both.
+    const drawnEdges = new Set(document.edges.map((edge) => edgeIdentity(edge.field, edge.from, edge.to)));
     // Which slot a key sits in, by lead — so a hold's subject that resolves to the
     // inspected slot gets no control. The same canonicalization `inspectorView`
     // applies, read off the same normalized slots.
@@ -316,18 +1593,79 @@ export function renderWorkspace(input, options) {
     // members rather than the lead, for the reason the bar is: a finding can name
     // a member that does not lead its unit.
     const filtered = overlay !== null && options.auditFiltered === true;
+    // AN OVERLAY WITH NOTHING BEHIND IT IS NOT OPEN. `overlay === null` means the
+    // host wired no audit at all, and a host that leaves `auditOpen` true across
+    // that change would otherwise ask for a panel over an audit that does not
+    // exist.
+    const auditOpen = overlay !== null && options.auditOpen === true;
+    // THE HEADER'S TWO FACTS ARE WITHHELD FROM THE RAIL HERE, and this is the one
+    // place they are: see `railHostFacts` for why a subtraction rather than
+    // `SceneOptions.chrome`.
+    const railHost = railHostFacts(document.host);
+    const narrowedSlots = filtered
+        ? document.order.slots.filter((slot) => slot.members.some((member) => auditFilterKeeps(overlay, member)))
+        : document.order.slots;
+    const narrowedExcluded = filtered
+        ? document.order.excluded.filter((exclusion) => auditFilterKeeps(overlay, exclusion.key))
+        : document.order.excluded;
+    // A FILTER THAT MATCHES NOTHING IS NOT A ZERO, AND THE PROJECTION CANNOT KNOW
+    // THAT FROM WHAT IT IS HANDED. It receives a document with no slots and says
+    // the true thing about it — "Nothing is in the order right now" — which is a
+    // FALSE thing about the backlog, because every rank the filter hid is still
+    // there. `RULINGS.md` §2 names it: *"a false statement about the data, and it
+    // is the one thing this panel exists not to make."*
+    //
+    // It is the defect `statesItsOwnCause` already describes one input over —
+    // *"its own derived sentence is not a fallback explanation but a false one"* —
+    // arrived at by narrowing instead of by a condition, so it takes the same
+    // remedy: the host RECORDS what it did and the projection stops deriving.
+    // Recording it here rather than teaching the viewer about filters keeps the
+    // seam where it is: narrowing is the editor's act, and only the editor knows
+    // the denominator, because only it still holds the unnarrowed order.
+    const emptiedByFilter = filtered && narrowedSlots.length === 0 && narrowedExcluded.length === 0;
+    // STATED WHENEVER THE FILTER IS ON, not only when it empties the rail — and
+    // that is a consequence of §17d's entry point moving into the overlay.
+    //
+    // While the filter lived on the header count it was always on screen and
+    // always clearable. `RULINGS.md` §3 makes that count the overlay's anchor and
+    // puts the filter in the panel head, so the ONLY control for it now closes
+    // with the panel — and a reader who narrowed the rail, shut the panel and
+    // scrolled away would be left looking at a short list with nothing saying why
+    // and nothing to press. §2 forbids exactly that: *"A filter that is visibly
+    // on, states what it is hiding, and clears in one click is not a refusal."*
+    // All three halves have to stay true with the panel shut.
+    const railCondition = filtered
+        ? {
+            kind: 'filtered',
+            headline: emptiedByFilter ? options.words.filteredEmpty : options.words.filteredActive,
+            // THE HOST'S OWN RECORDED COUNT, NOT A SECOND DERIVATION OF IT. The
+            // rail header already prints `8 ranked` from `counts.ranked`, and the
+            // first version of this line counted `order.slots.length` instead —
+            // which is 11 on the demo, because it includes the footer slots the
+            // header does not call ranked. Two numbers for one fact, on one screen,
+            // eight pixels apart.
+            //
+            // That is the defect this repository has already ruled on twice: two
+            // capsules drawing one fact must not each hold their own sentence, or
+            // they describe one document differently in one view. A denominator
+            // that disagrees with the header is worse than the lie it replaced,
+            // because it is a lie the reader can SEE is a lie and cannot resolve.
+            //
+            // Falls back to the unnarrowed slot count only when the host recorded
+            // no counts at all — a number that may over-count is still better than
+            // an empty sentence here, and the field is optional in the port.
+            denominator: options.words.filteredDenominator(document.host.counts?.ranked ?? document.order.slots.length),
+            action: { label: options.words.filteredClear },
+        }
+        : undefined;
+    const railHostWithCause = railCondition === undefined ? railHost : { ...railHost, condition: railCondition };
     const railInput = filtered
         ? {
             ...document,
-            order: {
-                // EXCLUSIONS ARE ROWS TOO, and filtering only the slots left the clean
-                // ones on screen while the header said the filter was on — the toggle
-                // narrowing part of the rail and claiming to have narrowed it.
-                slots: document.order.slots.filter((slot) => slot.members.some((member) => auditFilterKeeps(overlay, member))),
-                excluded: document.order.excluded.filter((exclusion) => auditFilterKeeps(overlay, exclusion.key)),
-            },
+            host: railHostWithCause,
+            order: { slots: narrowedSlots, excluded: narrowedExcluded },
         }
-        : document;
+        : { ...document, host: railHostWithCause };
     const rail = railWindow(railInput, options.rail ?? {});
     const railRender = renderViewer(rail.document, {
         projection: 'linear',
@@ -335,6 +1673,15 @@ export function renderWorkspace(input, options) {
         // The rail is where a selected ISSUE reads as current. An edge selection
         // resolves to no key, which is `selectedKey`'s whole job.
         selected: selectedKey(selection),
+        // §16f. Passed WHOLE rather than windowed: the window moves, and a reader
+        // who opened a row, scrolled past it and came back should find it open.
+        // A key the window does not draw costs one `includes` miss and nothing else.
+        ...(options.expanded === undefined ? {} : { expanded: options.expanded }),
+        // §17j'S DENSITY ESCAPE HATCH, FORWARDED TO THE RAIL AND ONLY THE RAIL.
+        // The canvas draws a second viewer in this surface, and the density block
+        // is about the ORDER's rows — so handing both the same value would change a
+        // projection the option says nothing about. See `ViewerOptions.density`.
+        ...(options.railDensity === undefined ? {} : { density: options.railDensity }),
     });
     // Built once, over the window's rows, so a rail of 312 costs one pass rather
     // than one scan of `overlay.rows` per drawn row.
@@ -358,9 +1705,31 @@ export function renderWorkspace(input, options) {
     // scrolling position and says nothing about what surrounds the selected
     // issue; handing the ladder a windowed document would make its budgets — and
     // therefore its refusal — depend on where the reader had scrolled to.
+    // THE LIST'S ID, DERIVED ONCE AND USED BY BOTH ZONES. Undefined unless the
+    // caller supplied a surface value; see `WorkspaceOptions.surfaceId` for why
+    // this renderer must not invent one.
+    const isolatedListId = options.surfaceId === undefined ? undefined : `ig-isolated-list-${options.surfaceId}`;
     const canvas = renderScaleLadder(document, {
         state: options.scale ?? INITIAL_SCALE_STATE,
         theme,
+        isolatedListId,
+        // ONE CONTROL, ONE ZONE — and the condition is WHETHER THIS SURFACE DRAWS
+        // ONE, which is exactly what `words.rail` says. That is the contract
+        // `ScaleLadderOptions.isolatedChip` states: suppress the ladder's chip only
+        // if you draw the control yourself. §17a puts the count at the foot of the
+        // rail and `railFooter` below draws it there. The LIST is unaffected and
+        // stays in the canvas — see `railFooter` for why this zone cannot hold it.
+        //
+        // "THE WORDS EXIST" AND "THE FOOTER WAS DRAWN" ARE THE SAME CONDITION HERE,
+        // and it is worth saying why rather than leaving a reader to check. The only
+        // other reason `railFooter` returns null is an empty isolated set — and
+        // `isolatedSpec` refuses that case too, so at count 0 neither draws and the
+        // flag changes nothing. Gating on the words rather than on the returned spec
+        // keeps this to ONE derivation of the ladder: the footer is built from
+        // `canvas.ladder` below, which is the same value this call computes.
+        // `rail-footer.test.ts` pins both halves — no configuration yields two
+        // copies, and none yields none.
+        isolatedChip: options.words.rail === undefined,
         // THE SAME ONE VALUE THE RAIL READ. Without this the canvas drew the
         // selected issue as ordinary while the rail marked it current, so the
         // single selection this surface advertises disagreed with itself between
@@ -374,17 +1743,299 @@ export function renderWorkspace(input, options) {
         selectedEdge: selectedEdgeId(selection),
         projected: options.projected,
     });
+    const toolbar = canvasToolbar(canvas.ladder, document, options.words.canvas);
+    // §17k'S STRIP CONTROL — the way out of the collapsed canvas below `1120`.
+    //
+    // ALWAYS RENDERED, HIDDEN BY THE SHEET AT THE OTHER TWO WIDTHS, and that
+    // order matters: the alternative is rendering it only when narrow, which
+    // would mean this function knowing how wide it is. It does not and must not —
+    // §17k's implementation note — so the control is emitted once and the
+    // container query decides where it is drawn. `display: none` is also what
+    // keeps it out of the tab order where it has nothing to do, so a reader at
+    // the wide layout never meets a button for a strip that is not there.
+    //
+    // `aria-expanded` RATHER THAN `aria-pressed`, on §17d's own distinction: this
+    // discloses a region that is already in the markup rather than toggling a
+    // mode. The label flips with it — see `WorkspaceWords.hideCanvas`.
+    const canvasOpen = options.canvasOpen === true;
+    const strip = element('button', {
+        type: 'button',
+        class: 'ig-canvas-strip',
+        'data-ig-command': 'canvas-strip',
+        'aria-expanded': canvasOpen ? 'true' : 'false',
+    }, [canvasOpen ? options.words.hideCanvas : options.words.showCanvas]);
+    // §17k'S MIDDLE ROW IS TWO RULES AND ONLY ONE OF THEM IS A STATE. *"Opened by
+    // selection, Escape to dismiss"*: the first is a question about `selection`,
+    // which this function already has, so the panel is lifted when something is
+    // selected and the reader has not dismissed it since. Storing the openness
+    // instead would be a second copy of the selection, free to disagree with it.
+    const lifted = selection.kind !== 'none' && options.inspectorDismissed !== true;
+    const narrowState = ` data-canvas="${canvasOpen ? 'open' : 'strip'}"` +
+        ` data-inspector="${lifted ? 'lifted' : 'dismissed'}"`;
+    // §17a'S RAIL FOOTER, FROM THE LADDER THE CANVAS ALREADY DERIVED. `isolated`
+    // is a property of the whole document rather than of the tier the canvas
+    // settled on, so the rail and the canvas cannot disagree about it: there is
+    // one derivation and both zones read it.
+    //
+    // NAMED `railFooterSpec`, NOT `railFooter`, because `railFooter` is the
+    // function and — more to the point — the bare identifier `rail` a few lines
+    // below is the WINDOW (`options.rail`, a `RailWindowOptions`), which is a
+    // different value from `options.words.rail`. Two things called rail in one
+    // scope is a reading hazard worth one name, not one comment per use.
+    const railFooterSpec = railFooter(canvas.ladder.isolated, options.words.rail, isolatedListId);
     const inspector = inspectorView(document, selection);
+    // §17c'S LOOP, OVER THE RAIL THE READER IS ACTUALLY LOOKING AT.
+    // `reevaluateView` is handed the WINDOWED scene, so a chip whose row is
+    // scrolled out of the window resolves to no row and draws nowhere — which is
+    // right: a chip is a mark ON a row, and there is no row. The summary still
+    // counts it, because the summary is about the ORDER and not about the window.
+    //
+    // NO WORDS, NO LOOP. `words.change` is optional and its absence is the whole
+    // reason there is no default sentence here; see `ChangeWords`.
+    const changeWords = options.words.change;
+    const orderStatus = options.orderStatus ?? 'settled';
+    // EVERY REF THE ORDER HAS, WINDOWED OR NOT — and taken from the UNFILTERED
+    // document on purpose, so a row the audit filter is hiding counts as expected
+    // for the same reason an off-window row does. The rail this render hands the
+    // viewer is narrowed twice over; neither narrowing is a disagreement between
+    // the projection and the change, and only this function holds the order both
+    // narrowings started from.
+    const inTheOrder = new Set();
+    for (const slot of document.order.slots) {
+        inTheOrder.add(slot.lead);
+        for (const member of slot.members)
+            inTheOrder.add(member);
+    }
+    for (const exclusion of document.order.excluded)
+        inTheOrder.add(exclusion.key);
+    const change = reevaluateView(changeWords === undefined ? null : options.change, railRender.scene, orderStatus, inTheOrder);
+    const deltaByKey = new Map(changeWords === undefined
+        ? []
+        : change.chips.map((chip) => [
+            chip.key,
+            { chip, words: changeWords, kind: deltaKind(chip) },
+        ]));
+    // §17d'S PANEL IS AN OVERLAY OVER THE CANVAS, NOT A FOURTH ZONE.
+    //
+    // `RULINGS.md` §3: *"It is a transient overlay anchored to the header count,
+    // floating over the canvas, 520px wide, dismissed on Escape."* It used to be
+    // concatenated into the INSPECTOR zone, above the selection — §17a fixes
+    // three zones and none of them is the audit's, so it had nowhere to go and
+    // took a share of the one next to it. At six findings the inspector went
+    // below the fold.
+    //
+    // OVER THE CANVAS AND NEVER THE RAIL, and the ruling gives the reason rather
+    // than a preference: *"judging a finding is largely a question of what it
+    // would do to the order, so the order has to stay readable while you
+    // judge."* The canvas is also the zone §17f already designed to refuse.
+    //
+    // BUILT ONLY WHEN OPEN. "Transient" is the word, and a panel rendered hidden
+    // is still in the accessibility tree and still in the tab order — a reader
+    // on the keyboard would walk a list of findings they never opened.
+    const auditPanel = !auditOpen
+        ? ''
+        : (() => {
+            if (overlay === null)
+                return '';
+            const refused = renderEncodingRefusedBlock(options.audit?.encodingRefused ?? [], {
+                words: options.words.audit,
+                known,
+                issueUrl: options.issueUrl,
+            });
+            // `filtered` REACHES THE PANEL, and the first draft forgot it. The chip drew
+            // `aria-pressed="false"` while the rail beside it was visibly narrowed —
+            // a control lying about its own state, which is the exact shape §2 wrote
+            // its ruling against.
+            const panel = renderAuditPanel(overlay, {
+                words: options.words.audit,
+                known,
+                edges: drawnEdges,
+                filtered,
+            });
+            // THE REFUSAL LEADS. It is the finding that says the other three cannot
+            // be trusted for that issue — its edges were never read — so a reader
+            // meeting the list first would be reading conclusions drawn from a
+            // declaration nobody could parse.
+            const members = [refused, panel].filter((spec) => spec !== null);
+            // NO EMPTY REGION. A wrapper drawn around nothing is a heading-less box
+            // taking a declared share of a column whose space belongs to the
+            // selection — the same call `renderAuditPanel` makes about a list of
+            // nothing, one level up.
+            if (members.length === 0)
+                return '';
+            return renderMarkup(element('div', { class: 'ig-audit-overlay' }, members));
+        })();
     const markup = [
-        `<div class="ig-workspace">`,
-        overlay === null ? '' : zone('header', renderAuditHeader(overlay, { filtered })),
+        // THE ORDER'S STATUS, ON THE SURFACE ROOT. `mount.ts` already publishes the
+        // same value on the mounted element for a host to read; this puts it where
+        // the stylesheet can reach it in the UNMOUNTED rendering too, so §17c's
+        // "greyed one step, and labelled" is drawn by whoever renders rather than
+        // only by whoever mounts. Same vocabulary, verbatim, so the two agree.
+        // STAMPED ONLY WHERE THE LABEL CAN BE DRAWN, and the two really are one
+        // treatment. §17c's held state is a greyed rail AND the word saying why —
+        // "a stale-but-labelled order beats a half-computed one" — and half of that
+        // is worse than neither: a dimmed order with no explanation is exactly the
+        // defect the label exists to prevent. `mountWorkspace` passes the store's
+        // status unconditionally, so a host that has not supplied `words.change`
+        // would otherwise get the greying with the label suppressed one branch
+        // below, on the very path the optional vocabulary exists to keep working.
+        //
+        // THE FACT IS NOT LOST TO A HOST. `mount.ts` publishes the same status on
+        // the element the host holds, which is the reader this attribute was never
+        // for: this one is the stylesheet's hook, so it is absent exactly when the
+        // stylesheet must not act.
+        //
+        // §17k'S TWO READER DECISIONS RIDE THE SAME ROOT, and for the same reason
+        // `data-order` does: the stylesheet is the only party that knows which of
+        // the three layouts is drawn, so the surface publishes what the reader
+        // asked for and each container block reads the one it has a use for.
+        // Neither attribute means anything at the width where its zone is a zone.
+        //
+        // BOTH ARE ALWAYS STAMPED, unlike `data-order`. That one is withheld where
+        // its label cannot be drawn — a greyed rail with no word is worse than
+        // neither — and these two have no such pair: the value is the full state,
+        // and an absent attribute would read as the strip being open and the
+        // inspector being lifted, which is the opposite of both defaults.
+        changeWords === undefined
+            ? `<div class="ig-workspace"${narrowState}>`
+            : `<div class="ig-workspace" data-order="${orderStatus}"${narrowState}>`,
+        zone('header', [
+            headerMarkup(document.host, overlay === null ? '' : renderAuditHeader(overlay, { open: auditOpen }), options.words),
+            // §17c'S SUMMARY LIVES IN THE HEADER, NOT AT THE TOP OF THE RAIL, and
+            // the frame draws them adjacent so this is a real departure worth the
+            // sentence. The rail zone is the SCROLLER — `mount.ts` preserves
+            // `railBefore.scrollTop` across every redraw — so a summary placed
+            // inside it scrolls away from the reader, and §17c's rule is that the
+            // summary "persists until the next edit or an explicit dismiss". A
+            // summary that survives a dismiss but not a scroll is not persistent.
+            //
+            // The header is where #135 settled that a workspace-wide fact is
+            // stated, and it is stated in exactly one zone. The chips carry the
+            // adjacency instead: cause in the header, effect on the row.
+            // "A STALE-BUT-LABELLED ORDER BEATS A HALF-COMPUTED ONE." §17c greys the
+            // held rail and says WHY beside it, and the greying without the label
+            // is the half of that pair which communicates nothing.
+            //
+            // THE LABEL IS `summarySpec`'S, INSIDE ITS LIVE REGION, and it was a
+            // sibling of that region until a reader pointed out this made it
+            // silent. The store clears `lastChange` when a write goes PENDING, so
+            // the region is empty in exactly the state the label exists for — a
+            // sighted reader got the greying and the sentence, and a screen-reader
+            // user was told nothing about the ranks having gone stale.
+            changeWords === undefined
+                ? ''
+                : renderMarkup(summarySpec(change.summary, changeWords, { held: change.held })),
+        ].join('')),
         zone('rail', [
             railSpacer(rail.before, 'before'),
-            renderMarkup(markRail(railRender.scene.root, (key) => severityByKey.get(key))),
+            renderMarkup(markRail(railRender.scene.root, (key) => severityByKey.get(key), (key) => deltaByKey.get(key))),
             railSpacer(rail.after, 'after'),
+            railFooterSpec === null ? '' : renderMarkup(railFooterSpec),
         ].join('')),
-        zone('canvas', canvas.markup),
-        zone('inspector', renderMarkup(inspectorSpec(inspector, options.words, known, leadOf))),
+        zone('canvas', 
+        // THE CAPTION LEADS THE ZONE, above the graph, exactly as frame 17a
+        // draws it — and it is assembled HERE rather than inside the ladder.
+        // `renderScaleLadder` is also used standalone, where `chrome: false` is
+        // the deliberate answer, and the words this row needs are the
+        // workspace's. Both halves are already-rendered markup, which is the
+        // rule `zone` exists under: it writes the only hand-authored tag in this
+        // package and takes no caller value.
+        //
+        // THE STRIP CONTROL LEADS THE ZONE, above the caption, because below
+        // `1120` it is the ONLY thing in the zone the reader can reach: the
+        // sheet hides every sibling while the canvas is collapsed. Drawn last it
+        // would be the last stop in the zone's tab order at the wide layout,
+        // where it is `display: none` and therefore no stop at all — so the
+        // position is chosen for the width where it is drawn.
+        //
+        // AND §17d'S PANEL IS LAST so it paints over the graph rather than under
+        // it, and it is INSIDE this zone so `workspace/styles.ts` can position it
+        // against the zone's box — which is what keeps it off the rail without a
+        // magic number. The strip's hiding rule names it as an exception, or a
+        // collapsed canvas would take the audit panel down with it.
+        [strip, toolbar]
+            .map((spec) => (spec === null ? '' : renderMarkup(spec)))
+            .join('') +
+            canvas.markup +
+            auditPanel),
+        zone('inspector', 
+        // §17d'S AUDIT IS THE SELECTION'S SIBLING, AND THEY SHARE ONE SCROLL
+        // TRACK. Sibling rather than child so each surface keeps its own padding
+        // and reads as a peer of the selection rather than part of it — their
+        // headings are `h2`s beside the inspector's for the same reason.
+        //
+        // THE AUDIT REGION TAKES A SHARE; THE OTHER TWO SIBLINGS DO NOT. #177
+        // settled this. The zone is still ONE scroll track, and inside it
+        // `workspace/styles.ts` bounds the region alone at half the column,
+        // scrolling itself past that. So a long audit can no longer push the
+        // selection detail further than half the column down, whatever the
+        // finding count — the detail's head is always above the fold, which is
+        // the bound, not a promise that all of it fits. `.ig-inspector` and the
+        // `.ig-chrome` the mount appends keep the track's own scrolling and
+        // cannot be clipped at any height.
+        //
+        // THE SHARE IS `workspace/styles.ts`', NOT `audit/styles.ts`'. An earlier
+        // revision of this comment said otherwise; that file states in as many
+        // words that its leaves declare no size of their own, and the
+        // misattribution is what nearly let §17d's second surface arrive with no
+        // bound at all.
+        //
+        // WHY THIS ONE. Being drawn FIRST is half the reason — it is what puts
+        // its length in front of the detail — and being the zone's only GLOBAL
+        // member is the other. The two below it are about what the reader is
+        // doing; this is about the document.
+        //
+        // A two-pane version was built and reverted before that: it clipped
+        // `.ig-chrome`, a THIRD sibling. Bounding one member inside the single
+        // track is what avoids needing panes at all.
+        //
+        // BOTH SIDES ARE ALREADY-RENDERED MARKUP, which is the rule `zone` exists
+        // under: it writes the only hand-authored tag in this package and takes
+        // no caller value, and everything with a dynamic value in it went through
+        // `renderMarkup`.
+        //
+        // `known` IS THE DRAWN DOCUMENT'S KEYS, the same set `holdRow` withholds
+        // its subject control on, and NOT the audit's: a host audits what it
+        // holds and draws a page of it, so a ref can be audited and still have no
+        // row here. The panel cannot see that difference and is told.
+        // §17d IS ONE REGION HOLDING TWO SURFACES, AND THAT IS WHY THEY ARE
+        // WRAPPED RATHER THAN CONCATENATED. `audit/refused.ts` draws the fourth
+        // class outside the findings list — SPEC surfaces a refusal "on the issue
+        // itself" — so the zone would otherwise gain a FOURTH sibling, and #177's
+        // answer does not survive that arithmetic: two siblings each bounded at
+        // half the column can take all of it between them and push the selection
+        // detail entirely below the fold, which is worse than the state #177
+        // fixed rather than a smaller version of it.
+        //
+        // SO THE BOUND MOVES UP ONE LEVEL, and #177's rule is kept rather than
+        // restated: exactly one sibling of this zone is bounded, and it is now
+        // the REGION. The block and the panel are unbounded inside it and share
+        // its half between them, which is also what the artboard draws — §17d
+        // puts the findings list and the refusal side by side as one section.
+        // `workspace/styles.ts` carries the share; neither leaf declares a size.
+        renderMarkup(inspectorSpec(inspector, {
+            words: options.words,
+            audit: overlay,
+            known,
+            leadOf,
+            draft: options.draft ?? IDLE_CREATE_DRAFT,
+            drop: options.drop ?? null,
+            // FORWARDED IN THE ORDER IT ARRIVED, and turned into an answer per
+            // edge inside `relationshipEntries` — after the panel has decided
+            // which of them are its to state. Collapsing here instead put the
+            // "one reason per row" rule one layer away from the filter that
+            // decides which reasons there are, and made the ORDER of this array
+            // load-bearing at a distance: a caller building it from two passes
+            // lost the ledger's chronology at the join, and the panel reported a
+            // refusal the reader had already read instead of the one they had
+            // just caused.
+            refusals: options.refusals ?? [],
+            // FORWARDED IN THE LEDGER'S ORDER too, for the reason above: the
+            // cards are drawn in the order the writes were made, so the one the
+            // reader just caused is the one nearest what they were doing.
+            recoveries: options.recoveries ?? [],
+            diffOpen: options.diffOpen ?? null,
+        }))),
         `</div>`,
     ].join('');
     return {
@@ -409,6 +2060,11 @@ export function renderWorkspace(input, options) {
             // it.
             edgeOverlayStylesheet,
             ...(overlay === null ? [] : [auditStylesheet]),
+            // UNCONDITIONAL, for the reason `edgeOverlayStylesheet` above records:
+            // the summary and the chips arrive with the NEXT snapshot after an edit,
+            // so a sheet installed only once something has already changed is missing
+            // on exactly the render that first draws one.
+            reevaluateStylesheet,
             workspaceStylesheet,
         ].join('\n'),
         // CONCATENATED, NOT DEDUPED — and the dedupe that used to sit here is worth
@@ -426,7 +2082,17 @@ export function renderWorkspace(input, options) {
         // Nothing replaces it, because nothing needs to: the zones now receive an
         // already-sound document, so they contribute nothing to this list at all.
         // `reports every occurrence, and the zones add nothing` pins both halves.
-        diagnostics: [...sound.diagnostics, ...railRender.diagnostics, ...canvas.diagnostics],
+        // THE PLACEMENT DIAGNOSTICS ARE THE CHANGE'S, and they are only worth
+        // reporting because `expected` above makes them mean what they say. Dropped
+        // entirely, a host got no signal that its projection and its change
+        // disagree; forwarded unfiltered, every scroll past a changed row would
+        // have reported one.
+        diagnostics: [
+            ...sound.diagnostics,
+            ...railRender.diagnostics,
+            ...canvas.diagnostics,
+            ...change.diagnostics,
+        ],
     };
 }
 //# sourceMappingURL=render.js.map