@issuegraph/editor 0.10.0 → 0.23.0

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
@@ -49,10 +49,16 @@
  * `styles.ts` writes structure against its custom properties.
  */
 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 } from "../create/keys.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";
@@ -75,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.
  *
@@ -116,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 —
@@ -137,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 }),
@@ -477,7 +691,13 @@ function refusalCapsule(relationship, code, subject, words) {
     ]);
 }
 /**
- * Frame 17b's numbered kind list, and the control that withdraws from it.
+ * 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
@@ -495,13 +715,19 @@ function refusalCapsule(relationship, code, subject, words) {
  * 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 addStepSpec} for why the list is drawn either way. Written
+ * 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' }, [
@@ -518,8 +744,13 @@ function kindListSpec(words, source) {
                     'data-ig-value': entry.edgeKind,
                     'data-edge': entry.edgeKind,
                 }, [
-                    element('span', { class: 'ig-kind-digit' }, [entry.key]),
+                    // §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]),
                 ]),
             ]);
         })),
@@ -547,17 +778,41 @@ function kindListSpec(words, source) {
  * this package in the business of explaining a hold whose vocabulary belongs to
  * the reader that produced it.
  *
- * WHAT DOES NOT APPEAR: a rank on a held slot. `@issuegraph/derive` assigns
- * `ready ? (rank += 1) : null`, so the two are exclusive and the heading says
- * which one it is. Frame 17a draws `#512` at rank 2 *and* "Held until #488
- * closes"; that state is unrepresentable, and PR #126 already ruled for §16
- * that the model wins and the em dash stands.
+ * 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.rank === null;
+    const held = !why.ready;
     return element('div', { class: 'ig-why-rank', 'data-held': held ? 'true' : 'false' }, [
         element('h3', { class: 'ig-why-rank-heading' }, [
-            held ? words.whyHeld : `${words.whyRank} ${String(why.rank)}`,
+            why.rank !== null
+                ? `${words.whyRank} ${String(why.rank)}`
+                : held
+                    ? words.whyHeld
+                    : `${words.whyRank} —`,
         ]),
         element('p', { class: 'ig-why-rank-sentence' }, [
             provenanceClause(why.provenance),
@@ -580,6 +835,98 @@ function whyRankSpec(why, words, holds) {
         holds.length === 0 ? null : element('ul', { class: 'ig-inspector-holds' }, holds),
     ]);
 }
+/**
+ * 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.
@@ -590,18 +937,37 @@ function whyRankSpec(why, words, holds) {
  * 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. §17a hoists the identity, the
- * counts and the freshness stamp into a header spanning all three zones, and
- * the rail below still draws the last two as layer 1's panel header — so this
- * carries the three facts that appear NOWHERE else today: what backlog this
- * is, what the audit found, and the way into a first pass.
- *
- * MOVING THE OTHER TWO IS ITS OWN CHANGE, not an omission here. Layer 1's panel
- * header is one element carrying the stamp, the refresh control, the count
- * chips AND the running-job NOW row; `SceneOptions.chrome` takes all of them or
- * none. §17a's header replaces some and its rail does not obviously replace the
- * NOW row, so which of them survives is a design ruling, and a half-made one
- * would either state a fact twice or drop a control on the way past.
+ * 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
@@ -613,7 +979,7 @@ function whyRankSpec(why, words, holds) {
  * 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) {
+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
@@ -623,7 +989,9 @@ function headerMarkup(host, auditHeader) {
         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])),
@@ -947,6 +1315,11 @@ function inspectorSpec(view, context) {
     // 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]),
@@ -974,8 +1347,24 @@ function inspectorSpec(view, context) {
                     : 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]),
+            // §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
@@ -991,13 +1380,7 @@ function inspectorSpec(view, context) {
             // reader mid-draft a control that RESETS the draft they are in —
             // `create/draft.ts` makes `begin` clear the kind and the target
             // deliberately.
-            // ASKED UNCONDITIONALLY, because the step belongs to the DRAFT and only
-            // `+ add` belongs to the subject. `subject.kind !== 'issue' ? null : …`
-            // was one guard doing both jobs, and it dropped a live draft's controls
-            // on a panel with no issue subject — which `reconcileHost` reaches by
-            // clearing a selection whose issue a write removed while leaving a
-            // draft begun from another issue standing.
-            addStepSpec(context, subject.kind === 'issue' ? subject.issue.key : null),
+            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
@@ -1019,85 +1402,83 @@ function inspectorSpec(view, context) {
         recoveryListSpec(context.recoveries.filter((recovery) => recovery.carrier === null && !statedHere(scope, recovery)), words.recovery, context.diffOpen, null, words.recovery.unplaced),
     ]);
 }
-/**
- * Which step of the create path the panel is showing.
- *
- * THE STEP FOLLOWS THE DRAFT, NOT THE SELECTION, and the draft's source is
- * NAMED when it is not this panel's subject. The two can diverge: `pointed`
- * diverts a click to the draft only once a kind has been chosen, so at the kind
- * step a click anywhere else moves the selection and leaves the draft's source
- * behind — and `R` on a together unit's non-lead member begins a draft from
- * that member while `inspectorView` canonicalizes the panel onto the slot's
- * LEAD, so the two disagree from the first keystroke. Unnamed, the panel showed
- * "choose a kind" beneath the heading of one issue while the write would go out
- * from another. Named, it says whose draft it is.
- *
- * WITHHOLDING THE LIST WAS THE FIRST ANSWER AND IT WAS WORSE. It left the
- * reader a LIVE draft with no pointer route to it at all: the numbered choices
- * were gone, the cancel that sits with them was gone, and the shell draws no
- * chooser of its own at this step — `mount.ts`'s floating one is drawn only
- * under a canvas drop, and its target search only once a kind is chosen. So the
- * one control still on screen was `+ add`, which does not cancel a draft, it
- * RESETS one, silently moving the source to whatever the reader happened to be
- * looking at. "The shell's cancel still reaches it" was the reasoning, and the
- * shell has no cancel to reach it with. A draft the reader cannot abandon with
- * a pointer is the failure `create/keys.ts` names for the keyboard, and the
- * cost of the alternative — one phrase naming an issue that is not the panel's
- * subject — is the cost the shell's own chooser always paid, in the sentence it
- * printed above its kinds.
- *
- * `+ add` IS NOT DRAWN BESIDE IT, on either panel. Two entries into one draft is
- * the rule {@link WorkspaceOptions.drop} already states for the floating
- * chooser, and here the second entry is the destructive one: `create/draft.ts`
- * makes `begin` clear the kind and the target deliberately, so a reader
- * mid-draft offered `+ add` is offered a reset wearing the label of a start.
- * They restart by cancelling first, which is now a control they can see.
- *
- * IT IS ASKED FOR EVERY SUBJECT, INCLUDING NONE. `+ add` is the half that needs
- * one — `reduceHost`'s `add` arm answers `null` for an edge selection and for
- * none, so a control there could not complete — and the step is not. One guard
- * over both dropped a live draft's controls on a panel with no issue subject,
- * which `reconcileHost` reaches: it clears a selection whose issue a landed
- * write removed while leaving a draft begun from a DIFFERENT issue standing,
- * because that draft's own references are all still in the document.
- *
- * `null` AT THE TARGET STEP AND UNDER A LIVE DROP, which are two more different
- * silences and both deliberate. The target step belongs to the shell, which
- * owns the live input — and draws its own cancel beside it, naming the source
- * in the same sentence. A drop means a chooser is already open at the pointer,
- * with a cancel of its own, and a second copy of the same step in the column
- * beside it would be two controls writing to one draft.
- */
-function addStepSpec(context, subject) {
-    const { draft, drop, words } = context;
-    // THE ONE LIVE KIND STEP, WHEREVER IT WAS BEGUN. Asked of the draft alone, so
-    // there is exactly one panel state for it rather than one per subject — and
-    // so a panel with no issue subject at all still carries the cancel.
+function createStep(context, subject) {
+    const { draft, drop } = context;
     if (draft.source !== null && draft.kind === null && drop === null) {
-        return kindListSpec(words, draft.source === subject ? null : draft.source);
+        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 element('div', { class: 'ig-inspector-add' }, [
-            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,
-            }, [words.addRelationship]),
-        ]);
-    }
-    return null;
+    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]),
+    ]);
 }
 /**
  * One hold in the inspector, with its cause and its subject on the markup.
@@ -1188,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.
@@ -1201,25 +1593,103 @@ 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',
         theme,
+        // THE WORKSPACE RULES ITS OWN ZONES OFF. The rail track already carries
+        // `border-right`, so a frame here doubles that seam and the host's outer
+        // border on the other edge. See `SceneOptions.frame`.
+        frame: false,
+        // §16b's KEY, KEPT IN VIEW while the order scrolls under it. See
+        // `SceneOptions.dockLegend`; `dockRailLegend` in mount.ts moves it clear of
+        // this zone's own footer.
+        dockLegend: true,
         // 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.
@@ -1243,9 +1713,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
@@ -1259,18 +1751,302 @@ 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;
+    // WHETHER THE CANVAS DREW A KEY, SO THE SURFACE DRAWS ONE AND NOT TWO. The
+    // rail and the canvas are both viewers, so both draw the grammar legend, and
+    // the workspace showed the same five line styles twice, side by side, at the
+    // same moment. It is the same defect `chrome: false` already answers one line
+    // higher — §16's panel has ONE header — and the answer is the same shape.
+    //
+    // THE CANVAS KEEPS IT AND THE RAIL YIELDS, which is the way round the content
+    // decides: four of the five entries are LINE styles, and the rail draws no
+    // lines at all — it draws badges. The key belongs beside the strokes it is
+    // about. It is also the cheaper zone to spend it in, at one or two wrapped
+    // rows of a wide column rather than four rows of a 390 rail the order needs.
+    //
+    // AN ATTRIBUTE RATHER THAN AN OPTION, because the rail must get the key BACK
+    // in the two states where the canvas has none, and only one of those is
+    // knowable here. The refusal is: above its node budget the canvas draws
+    // capsules and no viewer, so there is no legend in that zone to defer to.
+    // The other is §17k's collapsed canvas, which is a question about the box
+    // this surface was given — the container query is the only party that can
+    // answer it, so the restore is a rule in the sheet rather than a branch here.
+    // Suppressing the markup with an option would put the key out of reach of
+    // both.
+    const canvasLegend = canvas.ladder.tier === 'direct' ? 'drawn' : 'absent';
+    const narrowState = ` data-canvas="${canvasOpen ? 'open' : 'strip'}"` +
+        ` data-canvas-legend="${canvasLegend}"` +
+        ` 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">`,
-        zone('header', headerMarkup(document.host, overlay === null ? '' : 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, {
+        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,
@@ -1315,6 +2091,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
@@ -1332,7 +2113,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