@issuegraph/editor 0.24.0 → 0.26.0

package/dist/workspace/render.d.ts

@@ -32,14 +32,15 @@
  * clean — which is the audit failing silently on exactly the rows where an
  * encoding error is hardest to see.
  *
- * ## The zone frames, and the one place a tag is written here
+ * ## The zone frames, and the one place markup is joined here
  *
  * Two of the four zones hand back a STRING rather than a spec — the ladder's
  * chrome and the audit header — so the frames are assembled by concatenation,
  * as `renderScaleLadder` already assembles its own canvas and chrome. What
- * makes that safe is not care: {@link ZONES} is a closed union of literals, so
- * no caller value can reach an attribute here at all, and `zones.test.ts` pins
- * it. Everything with a dynamic value in it goes through `renderMarkup`.
+ * makes that safe is not care: a frame's own opening tag carries the caller's
+ * `surfaceId` in its id, so {@link zone} has `renderMarkup` write it, and only
+ * already-rendered markup is joined inside. Everything with a dynamic value in
+ * it goes through `renderMarkup`.
  *
  * ## Dark only
  *
@@ -51,6 +52,7 @@
 import { type Theme, type ViewerDocument } from '@issuegraph/viewer';
 import type { EdgeId, InvalidCode, MutationId, OrderChange, OrderStatus, ProjectedEdge } from '@issuegraph/store';
 import type { AuditInput } from '../audit/findings.ts';
+import { type EdgeField } from '@issuegraph/core';
 import { type AuditWords } from '../audit/panel.ts';
 import { type EncodingRefusedBlockOptions } from '../audit/refused.ts';
 import { type CreateDraft } from '../create/draft.ts';
@@ -59,10 +61,11 @@ import type { ChangeWords } from '../reevaluate/words.ts';
 import { type AuditOverlay } from '../audit/surface.ts';
 import { type ScaleState } from '../scale/commands.ts';
 import { type InspectorView } from './inspector.ts';
+import { type CanvasMode, type NarrowView } from './narrow.ts';
 import { type RailWindow, type RailWindowOptions } from './rail.ts';
 import { type ConflictDiff } from './recovery.ts';
 import { type WorkspaceSelection } from './selection.ts';
-/** The four fixed positions. A closed union, which is what keeps `zone` safe. */
+/** The four fixed positions. */
 export declare const ZONES: readonly ["header", "rail", "canvas", "inspector"];
 export type Zone = (typeof ZONES)[number];
 export interface WorkspaceWords {
@@ -139,6 +142,13 @@ export interface WorkspaceWords {
     readonly inspector: string;
     /** Shown in the inspector when nothing is selected. */
     readonly nothingSelected: string;
+    /**
+     * The inspector's heading with two or more issues selected: *"3 issues
+     * selected"*. A function for the reason `filteredDenominator` is one: the
+     * count sits inside the sentence and its grammar moves with it, so the host
+     * writes the sentence.
+     */
+    readonly issuesSelected: (count: number) => string;
     /**
      * The control that returns to nothing selected.
      *
@@ -406,6 +416,16 @@ export interface WorkspaceWords {
      * are safely the same.
      */
     readonly rail?: RailWords | undefined;
+    /**
+     * The layout under `640`: its three tabs, and the Related groups list's
+     * sentence for nothing selected.
+     *
+     * REQUIRED, unlike `canvas` and `rail`. The tabs are the only way between the
+     * three views at that width, and every render draws them, so there is no
+     * absent state that would still work: a tab with no name is a control a
+     * screen reader announces as nothing.
+     */
+    readonly narrow: NarrowWords;
 }
 /**
  * Frame 17a's canvas toolbar reads `focus: #512 · 1 hop · 6 of 312 shown`, and
@@ -498,6 +518,35 @@ export interface RailWords {
      */
     readonly hide: string;
 }
+/**
+ * The words of the layout under `640`, where one of Order, Related groups and
+ * Sub-issues shows at a time.
+ */
+export interface NarrowWords {
+    /** The tab that shows the order. */
+    readonly order: string;
+    /** The tab that lists the selection's relationships. */
+    readonly related: string;
+    /** The tab that shows the sub-issue tree. */
+    readonly subIssues: string;
+    /**
+     * Names the control that closes the Inspector's sheet under `640`. Nothing
+     * in this version draws that sheet, so nothing reads this yet.
+     */
+    readonly closeSheet: string;
+    /** What the Related groups list says while nothing is selected. */
+    readonly noSelection: string;
+    /** Labels the Related groups search field. */
+    readonly searchRelated: string;
+    /**
+     * Says how many matches the Related groups list left out past its 60-row
+     * cut: *"12 more — narrow the search"*. A function for the reason
+     * `filteredDenominator` is one: the count sits inside the sentence.
+     */
+    readonly omitted: (count: number) => string;
+    /** What the Related groups list says when a search matched nothing. */
+    readonly noMatch: string;
+}
 export interface RecoveryWords {
     /** Names the state on a failed card. */
     readonly failed: string;
@@ -889,22 +938,45 @@ export interface WorkspaceOptions {
      */
     readonly diffOpen?: MutationId | null | undefined;
     /**
-     * A value unique to this surface, used to bind §17a's rail footer to the
-     * isolated list the canvas draws.
-     *
-     * SUPPLIED BY WHOEVER KNOWS THE PAGE. The footer's toggle and the list are in
-     * different zones, so the toggle names the list with `aria-controls` — and an
-     * id invented in here would be emitted twice by a host rendering two
-     * workspaces, leaving the second toggle pointing at the first surface's list.
-     * `scale/render.ts`'s `searchSpec` records the same hazard for its own label.
-     *
-     * ABSENT, NO ASSOCIATION IS DRAWN, and that is the honest default rather than
-     * a degraded one: `mountWorkspace` mints a value per mount, and markup served
-     * WITHOUT a mount is not operable anyway — the same argument
-     * `CanvasWords.editMode` is optional under. A toggle nobody can press needs no
-     * `aria-controls`.
+     * A value unique to this surface, used to bind controls in one zone to what
+     * they open in another: §17a's rail footer to the isolated list the canvas
+     * draws, and each narrow tab to the zone it shows.
+     *
+     * SUPPLIED BY WHOEVER KNOWS THE PAGE. A control names its target with
+     * `aria-controls`, and an id invented in here would be emitted twice by a
+     * host rendering two workspaces, leaving the second surface's controls
+     * pointing at the first surface's elements. `scale/render.ts`'s `searchSpec`
+     * records the same hazard for its own label. `mountWorkspace` mints a value
+     * per mount, so a PAGE THAT DRAWS MORE THAN ONE WORKSPACE WITHOUT A MOUNT
+     * PASSES ONE PER WORKSPACE.
+     *
+     * ABSENT, THE RAIL FOOTER DRAWS NO ASSOCIATION, and that is the honest
+     * default rather than a degraded one: markup served without a mount is not
+     * operable anyway — the same argument `CanvasWords.editMode` is optional
+     * under. A toggle nobody can press needs no `aria-controls`.
+     *
+     * THE ZONE FRAMES ARE THE ONE EXCEPTION, and they take the fixed ids
+     * `ig-zone-<zone>` when this is absent. The tabs are drawn on every render
+     * and a tab must name the panel it shows, so a tab with no `aria-controls`
+     * would be a broken tab rather than an absent one. The cost is the hazard
+     * above, for a page that draws two unmounted workspaces with no value here.
      */
     readonly surfaceId?: string | undefined;
+    /**
+     * Which zone the layout under `640` shows. See `HostState.narrowView`.
+     * Absent is `'order'`.
+     */
+    readonly narrowView?: NarrowView | undefined;
+    /**
+     * What the canvas zone draws. The tree itself is drawn by `mountWorkspace`;
+     * this only tells the tabs which one is selected. Absent is
+     * `'neighbourhood'`.
+     */
+    readonly canvas?: CanvasMode | undefined;
+    /** The Related groups list's open group. See `HostState.relatedGroup`. */
+    readonly relatedGroup?: EdgeField | null | undefined;
+    /** The Related groups list's search text. See `HostState.relatedQuery`. */
+    readonly relatedQuery?: string | undefined;
 }
 export interface WorkspaceView {
     readonly selection: WorkspaceSelection;
@@ -929,6 +1001,17 @@ export interface WorkspaceResult {
     readonly styles: string;
     readonly diagnostics: readonly string[];
 }
+/**
+ * The search's status line, right under the field: that a search matched
+ * nothing, or how many matches the 60-row cut left out, and empty otherwise.
+ *
+ * DRAWN WHENEVER THE SEARCH IS, EMPTY OR NOT. A live region that is created
+ * already holding its text is not reliably announced; it has to exist first
+ * and then change. So it is always in the markup beside the field, and
+ * `mountWorkspace` carries the element across redraws (`RELATED_STATUS`), as
+ * it carries §17c's change line, so typing changes its text and nothing else.
+ */
+export declare const RELATED_STATUS_CLASS = "ig-related-status";
 /** Render one document at one reader position, as the whole workspace. */
 export declare function renderWorkspace(input: ViewerDocument, options: WorkspaceOptions): WorkspaceResult;
 //# sourceMappingURL=render.d.ts.map

package/dist/workspace/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/workspace/render.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/workspace/render.ts"],"names":[],"mappings":"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"}

package/dist/workspace/render.js

@@ -32,14 +32,15 @@
  * clean — which is the audit failing silently on exactly the rows where an
  * encoding error is hardest to see.
  *
- * ## The zone frames, and the one place a tag is written here
+ * ## The zone frames, and the one place markup is joined here
  *
  * Two of the four zones hand back a STRING rather than a spec — the ladder's
  * chrome and the audit header — so the frames are assembled by concatenation,
  * as `renderScaleLadder` already assembles its own canvas and chrome. What
- * makes that safe is not care: {@link ZONES} is a closed union of literals, so
- * no caller value can reach an attribute here at all, and `zones.test.ts` pins
- * it. Everything with a dynamic value in it goes through `renderMarkup`.
+ * makes that safe is not care: a frame's own opening tag carries the caller's
+ * `surfaceId` in its id, so {@link zone} has `renderMarkup` write it, and only
+ * already-rendered markup is joined inside. Everything with a dynamic value in
+ * it goes through `renderMarkup`.
  *
  * ## Dark only
  *
@@ -48,7 +49,7 @@
  * 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, glyphAndLabel, hiddenGlyph, identity, labelFrom, normalizeDocument, renderMarkup, provenanceClause, renderViewer, resolveTheme, themeCss, treatmentFor, viewerStylesheet, } from '@issuegraph/viewer';
+import { KEY_ATTRIBUTE, element, glyphAndLabel, hiddenGlyph, identity, labelFrom, normalizeDocument, renderMarkup, provenanceClause, recedingOf, 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";
@@ -65,21 +66,61 @@ 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 { NARROW_TABS, narrowTabOf } from "./narrow.js";
 import { railWindow } from "./rail.js";
+import { relatedListView } from "./related.js";
 import { diffIsEmpty, diffWithin } from "./recovery.js";
-import { INITIAL_SELECTION, selectedEdgeId, selectedKey, } from "./selection.js";
+import { INITIAL_SELECTION, selectedEdgeId, selectedKeys, } from "./selection.js";
 import { workspaceStylesheet } from "./styles.js";
-/** The four fixed positions. A closed union, which is what keeps `zone` safe. */
+/** The four fixed positions. */
 export const ZONES = Object.freeze(['header', 'rail', 'canvas', 'inspector']);
+const ZONE_CLOSE = '</section>';
 /**
- * A zone frame.
+ * A zone frame, around already-rendered markup from `renderMarkup` or from a
+ * sibling leaf's renderer.
  *
- * The only tag written by hand in this package, and it takes no caller value:
- * `zone` is one of {@link ZONES} and `inner` is already-rendered markup from
- * `renderMarkup` or from a sibling leaf's renderer.
+ * THE OPENING TAG IS `renderMarkup`'S, because the id carries the caller's
+ * `surfaceId` and only that function escapes an attribute in this package. It
+ * renders the frame empty and the inner markup goes where its closing tag was.
  */
-function zone(name, inner) {
-    return `<section class="ig-zone" data-zone="${name}">${inner}</section>`;
+function zone(name, id, inner) {
+    const frame = renderMarkup(element('section', { class: 'ig-zone', 'data-zone': name, id }, []));
+    return `${frame.slice(0, -ZONE_CLOSE.length)}${inner}${ZONE_CLOSE}`;
+}
+/** Each zone frame's id, unique on the page when the caller supplied a `surfaceId`. */
+function zoneIds(surfaceId) {
+    const suffix = surfaceId === undefined ? '' : `-${surfaceId}`;
+    return {
+        header: `ig-zone-header${suffix}`,
+        rail: `ig-zone-rail${suffix}`,
+        canvas: `ig-zone-canvas${suffix}`,
+        inspector: `ig-zone-inspector${suffix}`,
+    };
+}
+/** The zone each narrow tab shows, and the word that names it. */
+const NARROW_TAB_PARTS = Object.freeze({
+    order: { zone: 'rail', word: 'order' },
+    related: { zone: 'canvas', word: 'related' },
+    'sub-issues': { zone: 'canvas', word: 'subIssues' },
+});
+/**
+ * The tabs of the layout under `640`.
+ *
+ * ALWAYS DRAWN, AND HIDDEN BY THE SHEET AT THE WIDER LAYOUTS, for the reason the
+ * canvas strip is: this function does not know how wide it is. Every tab is a
+ * tab stop rather than one roving stop, so each is reachable the way every other
+ * control on this surface is.
+ */
+function narrowTabsSpec(selected, words, ids) {
+    return element('div', { class: 'ig-narrow-tabs', role: 'tablist' }, NARROW_TABS.map((tab) => element('button', {
+        type: 'button',
+        class: 'ig-narrow-tab',
+        role: 'tab',
+        'data-ig-command': 'narrow-tab',
+        'data-ig-value': tab,
+        'aria-selected': tab === selected ? 'true' : 'false',
+        'aria-controls': ids[NARROW_TAB_PARTS[tab].zone],
+    }, [words[NARROW_TAB_PARTS[tab].word]])));
 }
 /**
  * §17f's canvas caption — what this canvas is drawing, and out of how much.
@@ -627,6 +668,97 @@ function relationshipSpec(relationship, subject, selected, words, refused) {
         flipControl(relationship, selected, words),
     ]);
 }
+/**
+ * The Related groups list's rows: the Inspector's own head in the Inspector's
+ * own row box, so a relationship reads the same words, direction and hue here.
+ * Only the head: removing, retyping and flipping stay the Inspector's.
+ */
+function relatedRowsSpec(rows, subject) {
+    return element('ul', { class: 'ig-related-rows' }, rows.map((row) => element('li', { class: 'ig-relationship', 'data-edge': row.field }, [relationshipHead(row, subject)])));
+}
+/**
+ * The Related groups search. The input sits inside its label, so the two are
+ * associated without an `id`, for the reason `scale/render.ts`'s `searchSpec`
+ * gives. Named by the host's own search label.
+ */
+function relatedSearchSpec(query, words) {
+    return element('label', { class: 'ig-related-search' }, [
+        words.searchRelated,
+        element('input', {
+            type: 'search',
+            'data-ig-command': 'related-query',
+            value: query,
+            autocomplete: 'off',
+        }),
+    ]);
+}
+/** One kind's group control, worded as the Inspector words that kind, then its count. */
+function relatedGroupSpec(field, count, open) {
+    const treatment = treatmentFor(field);
+    return element('button', {
+        type: 'button',
+        class: 'ig-related-group',
+        'data-ig-command': 'related-group',
+        'data-ig-value': field,
+        'aria-expanded': open ? 'true' : 'false',
+    }, [...glyphAndLabel(treatment.glyph, labelFrom(treatment, true)), ' ', element('span', {}, [String(count)])]);
+}
+/**
+ * The search's status line, right under the field: that a search matched
+ * nothing, or how many matches the 60-row cut left out, and empty otherwise.
+ *
+ * DRAWN WHENEVER THE SEARCH IS, EMPTY OR NOT. A live region that is created
+ * already holding its text is not reliably announced; it has to exist first
+ * and then change. So it is always in the markup beside the field, and
+ * `mountWorkspace` carries the element across redraws (`RELATED_STATUS`), as
+ * it carries §17c's change line, so typing changes its text and nothing else.
+ */
+export const RELATED_STATUS_CLASS = 'ig-related-status';
+function relatedStatusSpec(view, words) {
+    const said = view.noMatch ? words.noMatch : view.omitted > 0 ? words.omitted(view.omitted) : null;
+    return element('p', { class: RELATED_STATUS_CLASS, role: 'status' }, said === null ? [] : [said]);
+}
+/**
+ * The Related groups list, drawn in the canvas zone under `640`.
+ *
+ * EVERY DECISION IS `relatedListView`'S — which rows, which groups, whether a
+ * search is drawn and how many rows were cut. This only gives each part its
+ * element, so the 60-row cap is enforced in one place.
+ *
+ * An open group draws its search and its rows inside its own item, under its
+ * control. A search over every relationship sits above the groups, and while it
+ * holds a query its matches stand where the groups were.
+ */
+function relatedListSpec(view, subject, query, words) {
+    return element('div', {
+        class: 'ig-related',
+        'data-ig-omitted': view.kind === 'grouped' && view.omitted > 0 ? view.omitted : undefined,
+    }, relatedListParts(view, subject, query, words));
+}
+function relatedListParts(view, subject, query, words) {
+    switch (view.kind) {
+        case 'no-selection':
+            return [element('p', { class: 'ig-related-empty' }, [words.narrow.noSelection])];
+        case 'no-relationships':
+            return [element('p', { class: 'ig-related-empty' }, [words.noRelationships])];
+        case 'flat':
+            return [relatedRowsSpec(view.rows, subject)];
+        case 'grouped': {
+            const search = view.search === 'none' ? null : relatedSearchSpec(query, words.narrow);
+            const status = view.search === 'none' ? null : relatedStatusSpec(view, words.narrow);
+            const open = view.groups.some((group) => group.open);
+            const groups = element('ul', { class: 'ig-related-groups' }, view.groups.map((group) => element('li', {}, [
+                relatedGroupSpec(group.field, group.count, group.open),
+                group.open ? search : null,
+                group.open ? status : null,
+                group.open ? relatedRowsSpec(view.rows, subject) : null,
+            ])));
+            if (open)
+                return [groups];
+            return [search, status, view.groups.length > 0 ? groups : relatedRowsSpec(view.rows, subject)];
+        }
+    }
+}
 /**
  * A refused relationship, drawn where the reader was building it.
  *
@@ -998,6 +1130,14 @@ function headerMarkup(host, auditHeader, words) {
     ];
     return `<div class="ig-workspace-header">${parts.join('')}</div>`;
 }
+/**
+ * The selection as the viewer's `selected` takes it: one key as a string, a
+ * set as its keys in addition order, and nothing for an edge or none.
+ */
+function viewerSelected(selection) {
+    const keys = selectedKeys(selection);
+    return keys.length > 1 ? keys : (keys[0] ?? null);
+}
 function panelScope(view) {
     const { subject } = view;
     switch (subject.kind) {
@@ -1008,6 +1148,10 @@ function panelScope(view) {
                 kind: 'issue',
                 keys: new Set([subject.issue.key, ...(subject.whyRank?.unitPartners ?? [])]),
             };
+        // A SET STATES NOTHING. It offers no edit, so no refusal or recovery is
+        // about an edit made from it; each one stays on its own issue's panel.
+        case 'issues':
+            return { kind: 'none' };
         case 'edge':
             return { kind: 'edge', edgeId: subject.relationship.edgeId };
     }
@@ -1347,6 +1491,20 @@ 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,
+        // A SET SAYS HOW MANY AND LISTS THEM, in the order they were added, as
+        // text: no link, no command and no key attribute, so the list is
+        // agreement with the rail and the canvas, not a second place to act. The
+        // batch offers are a later change.
+        subject.kind === 'issues'
+            ? element('div', { class: 'ig-inspector-issues' }, [
+                element('h3', { class: 'ig-inspector-title' }, [words.issuesSelected(subject.issues.length)]),
+                element('ul', { class: 'ig-inspector-set' }, subject.issues.map((issue) => element('li', { class: 'ig-inspector-set-item' }, [
+                    element('span', { class: 'ig-title' }, [issue.title]),
+                    ' ',
+                    element('span', { class: 'ig-id' }, [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
@@ -1355,7 +1513,10 @@ function inspectorSpec(view, context) {
         // 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' }, [
+        // NO RELATIONSHIP REGION FOR A SET: it lists none and offers no `+ add`,
+        // and "no relationships" under a list of issues would read as a fact
+        // about them.
+        subject.kind === 'issues' ? null : element('div', { class: 'ig-inspector-relationships', 'data-filtered': view.filtered ? 'true' : 'false' }, [
             // §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
@@ -1685,9 +1846,14 @@ export function renderWorkspace(input, options) {
         // back on `scene.footer`, it is composed after the trailing spacer below.
         // See `SceneOptions.detachFooter`.
         detachFooter: 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),
+        // The rail is where a selected ISSUE reads as current, and every member of
+        // a set does. An edge selection resolves to no key.
+        selected: viewerSelected(selection),
+        // WORKED OUT OVER THE WHOLE DOCUMENT, NOT THE WINDOW. `rail.document` holds
+        // only the window's issues and edges, so a selection outside it would
+        // recede nothing here while the canvas recedes around it. An edge
+        // selection recedes the rail too, and so does a set, member by member.
+        receding: recedingOf(document, { key: viewerSelected(selection), edge: selectedEdgeId(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.
@@ -1752,7 +1918,7 @@ export function renderWorkspace(input, options) {
         // selected issue as ordinary while the rail marked it current, so the
         // single selection this surface advertises disagreed with itself between
         // two zones on every render.
-        selected: selectedKey(selection),
+        selected: viewerSelected(selection),
         // AND ITS OTHER HALF. The union has two payloads, and reading only the
         // issue one left the canvas the single zone that could not see an edge
         // selection: the inspector filtered to the edge while the canvas drew it
@@ -1810,9 +1976,14 @@ export function renderWorkspace(input, options) {
     // Suppressing the markup with an option would put the key out of reach of
     // both.
     const canvasLegend = canvas.ladder.tier === 'direct' ? 'drawn' : 'absent';
+    // THE TAB IS READ OFF THE VIEW AND THE MODE, never handed in, so the selected
+    // tab cannot disagree with what the canvas zone draws. See `narrowTabOf`.
+    const tab = narrowTabOf(options.narrowView ?? 'order', options.canvas ?? 'neighbourhood');
     const narrowState = ` data-canvas="${canvasOpen ? 'open' : 'strip'}"` +
         ` data-canvas-legend="${canvasLegend}"` +
-        ` data-inspector="${lifted ? 'lifted' : 'dismissed'}"`;
+        ` data-inspector="${lifted ? 'lifted' : 'dismissed'}"` +
+        ` data-tab="${tab}"`;
+    const ids = zoneIds(options.surfaceId);
     // §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
@@ -1825,6 +1996,14 @@ export function renderWorkspace(input, options) {
     // 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);
+    // The Related groups list, drawn only while its tab is the one selected: the
+    // other two tabs show nothing of it, and the wider layouts hide it.
+    const relatedList = tab !== 'related'
+        ? ''
+        : renderMarkup(relatedListSpec(relatedListView(document, selection, {
+            group: options.relatedGroup ?? null,
+            query: options.relatedQuery ?? '',
+        }), inspector.subject.kind === 'issue' ? inspector.subject.issue.key : null, options.relatedQuery ?? '', options.words));
     // §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
@@ -1931,7 +2110,7 @@ export function renderWorkspace(input, options) {
         //
         // §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
+        // the four 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.
         //
@@ -1943,7 +2122,7 @@ export function renderWorkspace(input, options) {
         changeWords === undefined
             ? `<div class="ig-workspace"${narrowState}>`
             : `<div class="ig-workspace" data-order="${orderStatus}"${narrowState}>`,
-        zone('header', [
+        zone('header', ids.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
@@ -1969,8 +2148,12 @@ export function renderWorkspace(input, options) {
             changeWords === undefined
                 ? ''
                 : renderMarkup(summarySpec(change.summary, changeWords, { held: change.held })),
+            // THE TABS ARE THE HEADER'S LAST CHILD, because the header is the one
+            // zone nothing replaces after this render: the mount swaps the canvas
+            // zone's children for the tree, and a tab inside it would vanish there.
+            renderMarkup(narrowTabsSpec(tab, options.words.narrow, ids)),
         ].join('')),
-        zone('rail', [
+        zone('rail', ids.rail, [
             railSpacer(rail.before, 'before'),
             renderMarkup(markRailRows(railRender.scene.root)),
             railSpacer(rail.after, 'after'),
@@ -1982,14 +2165,13 @@ export function renderWorkspace(input, options) {
             railRender.scene.footer === null ? '' : renderMarkup(markRailRows(railRender.scene.footer)),
             railFooterSpec === null ? '' : renderMarkup(railFooterSpec),
         ].join('')),
-        zone('canvas', 
+        zone('canvas', ids.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.
+        // rule `zone` exists under: it frames markup that was already escaped.
         //
         // 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
@@ -2006,9 +2188,10 @@ export function renderWorkspace(input, options) {
         [strip, toolbar]
             .map((spec) => (spec === null ? '' : renderMarkup(spec)))
             .join('') +
+            relatedList +
             canvas.markup +
             auditPanel),
-        zone('inspector', 
+        zone('inspector', ids.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
@@ -2040,9 +2223,8 @@ export function renderWorkspace(input, options) {
         // 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`.
+        // under: everything with a dynamic value in it went through
+        // `renderMarkup`, the frame's own id included.
         //
         // `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