components/system-map/system-map.ts

Functions

Imports

It imports components/system-map/system-map-data.ts, components/system-map/system-map-html.ts, components/system-map/system-map-inside.ts. No module of this repo imports it.

Source

1// The system map: a family of systems drawn as a capsid, the systems as its capsomers
2// (capsid/rulings/system-explorer-2026-10-10.md; the design is
3// capsid/research/design-system-explorer.md, section 3). The core system sits in the
4// middle, shared parts in the ring around it, and what people use on the outside. At rest
5// there are no lines; choosing a capsomer draws its connections, and choosing the core
6// again goes inside it, where its containers sit within the shell's boundary.
7//
8// `systemMapHtml` renders the whole contract as a string, so a server or a static build
9// delivers it (the list of the same data is readable with no script). `enhance` adds the
10// roles, one tab stop with the arrow keys moving between neighbours, choosing, going in
11// and out, and the plain view. No framework, no storage.
12
13import { type Direction, type MapSystem, connectionText, spatialNext } from "./system-map-data.ts";
14import { escapeHtml } from "./system-map-html.ts";
15
16export { R, ringCells, layoutMap, spatialNext, linksOf, connectionText, modelMapData } from "./system-map-data.ts";
17export type { ModelSystem, SystemModel, MapRing, MapSystem, MapLink, MapContainer, MapFlowStep, MapFlow, SystemMapData, SystemMapOptions, Cell, Layout, Direction } from "./system-map-data.ts";
18export { ROUTE_CLEAR, LINE_SEP, JUNCTION_END, SHORT_LINK, BEND_CLEAR, rectInset, rectOutset, segmentHitsRect, segmentHitsBox, pointSegDist, segmentCross, segDist, segAngle, sideBySide, segmentFaults, portsOf, insideScene, playableFlows } from "./system-map-inside.ts";
19export type { Rect, InsideWire, Circle, InsideScene } from "./system-map-inside.ts";
20export { escapeHtml, hexPoints, seamRoute, systemMapHtml } from "./system-map-html.ts";
21export type { Box } from "./system-map-html.ts";
22
23// ---------------------------------------------------------------------------------------
24// Behaviour.
25
26const READY = "data-cap-ready";
27
28function detailHtml(s: MapSystem, links: number, enterable: boolean, openLabel: string): string {
29  const bits = [`<strong class="cap-system-map-detail-name">${escapeHtml(s.name)}</strong>`];
30  const facts: string[] = [];
31  if (s.private) facts.push("Private: name and address only");
32  if (s.description) facts.push(escapeHtml(s.description.replace(/\.$/, "")));
33  if (s.domain) facts.push(escapeHtml(s.domain));
34  facts.push(connectionText(links));
35  bits.push(`<span class="cap-system-map-detail-text">${facts.join(" · ")}</span>`);
36  const actions: string[] = [];
37  if (enterable) actions.push(`<button type="button" class="cap-btn" data-cap-part="enter">Go inside</button>`);
38  if (s.href) actions.push(`<a class="cap-btn" href="${escapeHtml(s.href)}">${escapeHtml(openLabel)}</a>`);
39  if (actions.length) bits.push(`<span class="cap-system-map-detail-actions">${actions.join("")}</span>`);
40  return bits.join("");
41}
42
43/** Reads the systems back out of the delivered list, so the script needs no second copy. */
44function systemsFrom(root: HTMLElement): Map<string, MapSystem> {
45  const out = new Map<string, MapSystem>();
46  for (const li of root.querySelectorAll<HTMLElement>(".cap-system-map-list li[data-id]")) {
47    const id = li.dataset.id!;
48    const tile = root.querySelector<SVGGElement>(`.cap-system-map-tile[data-id="${CSS.escape(id)}"]`);
49    out.set(id, {
50      id,
51      name: li.querySelector(".cap-system-map-item-name")?.textContent ?? id,
52      ring: tile?.hasAttribute("data-core") ? "core" : "used",
53      private: tile?.hasAttribute("data-private") ?? false,
54      description: li.querySelector(".cap-system-map-item-text")?.textContent ?? undefined,
55      domain: li.querySelector(".cap-system-map-item-domain")?.textContent ?? undefined,
56      href: li.querySelector<HTMLAnchorElement>(".cap-system-map-item-link")?.getAttribute("href") ?? undefined,
57    });
58  }
59  return out;
60}
61
62interface PlayFlow {
63  name: string;
64  steps: Array<{ from: string; to: string; toward: string; text: string; lights: string[] }>;
65}
66
67/** Reads the flows back out of the delivered step lists, as the systems are read from the list. */
68function flowsFrom(root: HTMLElement): Map<string, PlayFlow> {
69  const out = new Map<string, PlayFlow>();
70  for (const sec of root.querySelectorAll<HTMLElement>(".cap-system-map-flow[data-flow]")) {
71    out.set(sec.dataset.flow!, {
72      name: sec.querySelector(".cap-system-map-flow-name")?.textContent ?? sec.dataset.flow!,
73      steps: [...sec.querySelectorAll<HTMLElement>("ol > li")].map((li) => ({
74        from: li.dataset.from!,
75        to: li.dataset.to!,
76        toward: li.dataset.toward!,
77        text: li.textContent ?? "",
78        lights: (li.dataset.lights ?? "").split(" ").filter(Boolean),
79      })),
80    });
81  }
82  return out;
83}
84
85/** The token's way along a drawn line: its corners from `start` toward `end`. A line starts and
86 *  ends on its boxes' edges, so its two ends move `gap` along it, off the boxes. `forward` says
87 *  the line was drawn from start to end. */
88export function tokenRoute(route: string, forward: boolean, gap = 8): Array<[number, number]> {
89  const pts = route
90    .split(" ")
91    .filter(Boolean)
92    .map((p) => p.split(",").map(Number) as [number, number]);
93  if (pts.length < 2) return pts;
94  const way = forward ? pts : pts.reverse();
95  const nudge = (p: [number, number], q: [number, number]): [number, number] => {
96    const l = Math.hypot(q[0] - p[0], q[1] - p[1]);
97    const t = l ? Math.min(gap, l / 2) / l : 0;
98    return [Math.round((p[0] + (q[0] - p[0]) * t) * 10) / 10, Math.round((p[1] + (q[1] - p[1]) * t) * 10) / 10];
99  };
100  const first = nudge(way[0]!, way[1]!);
101  way[way.length - 1] = nudge(way[way.length - 1]!, way[way.length - 2]!);
102  way[0] = first;
103  return way;
104}
105
106/** Keyframes that move at one speed along a route. */
107export function routeFrames(route: ReadonlyArray<[number, number]>): Array<{ transform: string; offset: number }> {
108  const lengths = route.slice(1).map((p, i) => Math.hypot(p[0] - route[i]![0], p[1] - route[i]![1]));
109  const total = lengths.reduce((a, b) => a + b, 0) || 1;
110  let run = 0;
111  return route.map((p, i) => {
112    if (i > 0) run += lengths[i - 1]!;
113    return { transform: `translate(${p[0]}px, ${p[1]}px)`, offset: Math.round((run / total) * 1000) / 1000 };
114  });
115}
116
117/** The words a flow's step shows: where it is in the flow, then what happens. */
118export function stepText(n: number, total: number, text: string): string {
119  return `Step ${n} of ${total}. ${text}`;
120}
121
122export interface SystemMapController {
123  select(id: string | null): void;
124  // Goes inside: the core's, or with circles, any system's that has one (the chosen one's by default).
125  enter(id?: string): void;
126  leave(): void;
127  setView(view: "shell" | "plain"): void;
128  // Inside the core: play a flow from a step (1 by default), move to a step, stop.
129  playFlow(id: string, step?: number): void;
130  step(n: number): void;
131  stopFlow(): void;
132  destroy(): void;
133}
134
135export function controller(root: HTMLElement, openLabel = "Open"): SystemMapController {
136  const stage = root.querySelector<HTMLElement>("[data-cap-part='stage']")!;
137  const detail = root.querySelector<HTMLElement>("[data-cap-part='detail']")!;
138  const list = root.querySelector<HTMLDetailsElement>("[data-cap-part='list']")!;
139  const views = root.querySelector<HTMLElement>("[data-cap-part='views']");
140  const keys = root.querySelector<HTMLElement>(`#${CSS.escape(root.id)}-keys`);
141  const tiles = [...root.querySelectorAll<SVGGElement>(".cap-system-map-tile[data-id]")];
142  const systems = systemsFrom(root);
143  const points = tiles.map((t) => ({ id: t.dataset.id!, x: Number(t.dataset.x), y: Number(t.dataset.y) }));
144  const coreTile = tiles.find((t) => t.hasAttribute("data-core"));
145  const tileOf = (id: string) => tiles.find((t) => t.dataset.id === id);
146  const flows = flowsFrom(root);
147  const flowList = root.querySelector<HTMLDetailsElement>("[data-cap-part='flows']");
148  // With circles every system has an inside layer of its own, by id, and flows play on the
149  // core's; without, the one inside layer is the core's.
150  const circles = root.hasAttribute("data-circles");
151  const out = root.querySelector<HTMLButtonElement>("[data-cap-part='out']");
152  const layers = new Map<string, SVGSVGElement>();
153  let inside: SVGSVGElement | null = null;
154  let token: SVGCircleElement | null = null;
155  const findLayers = () => {
156    for (const l of stage.querySelectorAll<SVGSVGElement>("[data-layer='inside'][data-system]")) layers.set(l.dataset.system!, l);
157    inside = circles ? (layers.get(coreTile?.dataset.id ?? "") ?? null) : stage.querySelector<SVGSVGElement>("[data-layer='inside']");
158    token = inside?.querySelector<SVGCircleElement>(".cap-system-map-token") ?? null;
159  };
160  findLayers();
161  let selected: string | null = null;
162  let playing: { id: string; n: number } | null = null;
163  // With circles: the system zoomed into, and the one last asked for while its circle was on its way.
164  let zoomed: string | null = null;
165  let waiting: string | null = null;
166
167  // The drawing becomes the control: the stage is a group of buttons, one tab stop.
168  stage.setAttribute("role", "group");
169  stage.removeAttribute("aria-label");
170  stage.setAttribute("aria-labelledby", `${root.id}-title`);
171  if (keys) stage.setAttribute("aria-describedby", keys.id);
172  for (const svg of stage.querySelectorAll<SVGSVGElement>("[data-layer='core'], [data-layer='inner'], [data-layer='rim']")) svg.removeAttribute("aria-hidden");
173  for (const t of tiles) {
174    const s = systems.get(t.dataset.id!);
175    const tag = t.querySelector(".cap-system-map-tag")?.textContent?.trim();
176    t.setAttribute("role", "button");
177    t.setAttribute("tabindex", "-1");
178    t.setAttribute("aria-pressed", "false");
179    // The name starts with the words the tile shows (WCAG 2.5.3); a short label adds the full name after.
180    const shown = t.querySelector(".cap-system-map-name")?.textContent ?? s?.name ?? t.dataset.id;
181    const full = s?.name && s.name !== shown ? ` (${s.name})` : "";
182    t.setAttribute("aria-label", `${[shown, tag].filter(Boolean).join(", ")}${full}`);
183  }
184  const first = coreTile ?? tiles[0];
185  first?.setAttribute("tabindex", "0");
186  if (views) views.hidden = false;
187  list.open = false;
188  if (flowList) flowList.open = false;
189  detail.hidden = false;
190  detail.innerHTML = `<span class="cap-system-map-detail-text">Choose a system to see what it connects to.</span>`;
191
192  const focusTile = (id: string) => {
193    for (const t of tiles) t.setAttribute("tabindex", t.dataset.id === id ? "0" : "-1");
194    tileOf(id)?.focus();
195  };
196
197  const enterable = (id: string) => (circles ? layers.has(id) : !!inside && tileOf(id)?.hasAttribute("data-core") === true);
198
199  const select = (id: string | null) => {
200    stopFlow(true);
201    selected = id;
202    root.toggleAttribute("data-selected", id !== null);
203    for (const t of tiles) t.setAttribute("aria-pressed", String(t.dataset.id === id));
204    let n = 0;
205    const linked = new Set<string>();
206    for (const p of root.querySelectorAll<SVGPathElement>(".cap-system-map-edge")) {
207      const on = id !== null && (p.dataset.from === id || p.dataset.to === id);
208      p.toggleAttribute("data-on", on);
209      if (on) {
210        n++;
211        linked.add(p.dataset.from === id ? p.dataset.to! : p.dataset.from!);
212      }
213    }
214    // A seam touches three capsomers at every corner, so the far ends are marked too.
215    for (const t of tiles) t.toggleAttribute("data-linked", linked.has(t.dataset.id!));
216    const s = id ? systems.get(id) : undefined;
217    detail.innerHTML = s ? detailHtml(s, n, enterable(s.id), openLabel) : `<span class="cap-system-map-detail-text">Choose a system to see what it connects to.</span>`;
218    if (id) root.dispatchEvent(new CustomEvent("cap:system-map-select", { bubbles: true, detail: { id } }));
219  };
220
221  const insideDetail = () => {
222    const id = circles ? zoomed : coreTile?.dataset.id;
223    const layer = id ? (circles ? layers.get(id) : inside) : null;
224    if (!id || !layer) return;
225    const name = systems.get(id)?.name ?? id;
226    const own = layer.querySelectorAll(".cap-system-map-box:not([data-external])").length;
227    const outside = layer.querySelectorAll(".cap-system-map-box[data-external]").length;
228    const rims = layer.querySelectorAll(".cap-system-map-rim").length;
229    const plays = layer === inside ? [...flows].map(([f, flow]) => `<button type="button" class="cap-btn" data-cap-part="play" data-flow="${escapeHtml(f)}">Play: ${escapeHtml(flow.name)}</button>`).join("") : "";
230    // With circles the way back is beside the views, so the detail line keeps the system's name.
231    const href = systems.get(id)?.href;
232    // No link to the page already open, such as the system's own page zoomed into it.
233    const open = circles && href && new URL(href, location.href).pathname !== location.pathname ? `<a class="cap-btn" href="${escapeHtml(href)}">${escapeHtml(openLabel)}</a>` : "";
234    const actions = `${plays}${circles ? open : `<button type="button" class="cap-btn" data-cap-part="leave">Step out</button>`}`;
235    detail.innerHTML = `<strong class="cap-system-map-detail-name">${circles ? "" : "Inside "}${escapeHtml(name)}</strong><span class="cap-system-map-detail-text">${own} parts inside${outside ? `, ${outside} outside it` : ""}${rims ? `, connected to ${rims === 1 ? "1 other system" : `${rims} other systems`}` : ""}.</span>${actions ? `<span class="cap-system-map-detail-actions">${actions}</span>` : ""}`;
236  };
237
238  // `focus` is for a reader's own press; a host's call (playFlow, step) leaves focus alone.
239  const showStep = (n: number, focus = true) => {
240    const f = playing ? flows.get(playing.id) : undefined;
241    if (!f || !inside) return;
242    const k = Math.min(Math.max(1, Math.round(n)), f.steps.length);
243    const st = f.steps[k - 1]!;
244    playing = { id: playing!.id, n: k };
245    root.dataset.step = String(k);
246    for (const w of inside.querySelectorAll<SVGPathElement>(".cap-system-map-wire")) {
247      w.toggleAttribute("data-on", (w.dataset.from === st.from && w.dataset.to === st.to) || (w.dataset.from === st.to && w.dataset.to === st.from));
248    }
249    for (const b of inside.querySelectorAll<SVGGElement>(".cap-system-map-box")) {
250      const id = b.dataset.id!;
251      b.toggleAttribute("data-lit", st.lights.includes(id));
252      b.toggleAttribute("data-at", id === st.toward);
253    }
254    if (token) {
255      // The token follows the step's line as drawn, bends and all, from just off one box to just
256      // off the other, so it never sits on a part's name.
257      const start = st.toward === st.to ? st.from : st.to;
258      const wire = [...inside.querySelectorAll<SVGPathElement>(".cap-system-map-wire")].find((w) => (w.dataset.from === start && w.dataset.to === st.toward) || (w.dataset.from === st.toward && w.dataset.to === start));
259      const route = tokenRoute(wire?.dataset.route ?? "", wire?.dataset.from === start);
260      const frames = routeFrames(route);
261      for (const a of token.getAnimations()) a.cancel();
262      token.style.transform = frames.at(-1)!.transform;
263      if (frames.length > 1 && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
264        token.animate(frames, { duration: 700, easing: "ease-in-out" });
265      }
266    }
267    const was = (document.activeElement as HTMLElement | null)?.dataset?.capPart;
268    detail.innerHTML = `<strong class="cap-system-map-detail-name">${escapeHtml(f.name)}</strong><span class="cap-system-map-detail-text">${escapeHtml(stepText(k, f.steps.length, st.text))}</span><span class="cap-system-map-detail-actions"><button type="button" class="cap-btn" data-cap-part="back"${k === 1 ? " disabled" : ""}>Back</button><button type="button" class="cap-btn" data-cap-part="next"${k === f.steps.length ? " disabled" : ""}>Next</button><button type="button" class="cap-btn" data-cap-part="stop">Stop</button></span>`;
269    // Focus stays on the control that was pressed, unless it is now disabled.
270    const again = was && detail.querySelector<HTMLButtonElement>(`[data-cap-part="${was}"]:not([disabled])`);
271    if (focus) (again || detail.querySelector<HTMLButtonElement>("[data-cap-part='next']:not([disabled])") || detail.querySelector<HTMLButtonElement>("[data-cap-part='back']"))?.focus();
272    root.dispatchEvent(new CustomEvent("cap:system-map-flow", { bubbles: true, detail: { id: playing!.id, step: k } }));
273  };
274
275  const playFlow = (id: string, n = 1, focus = true) => {
276    if (!flows.has(id)) return;
277    if (circles ? zoomed !== coreTile?.dataset.id : !root.hasAttribute("data-entered")) enter(coreTile?.dataset.id, focus);
278    playing = { id, n };
279    root.dataset.flow = id;
280    showStep(n, focus);
281  };
282
283  const stopFlow = (quiet = false) => {
284    if (!playing) return;
285    const id = playing.id;
286    playing = null;
287    delete root.dataset.flow;
288    delete root.dataset.step;
289    for (const el of inside?.querySelectorAll("[data-on], [data-lit], [data-at]") ?? []) {
290      el.removeAttribute("data-on");
291      el.removeAttribute("data-lit");
292      el.removeAttribute("data-at");
293    }
294    if (token) for (const a of token.getAnimations()) a.cancel();
295    root.dispatchEvent(new CustomEvent("cap:system-map-flow", { bubbles: true, detail: { id: null, step: 0 } }));
296    // Quiet when something else is taking over the detail line: leaving, choosing, tearing down.
297    if (quiet) return;
298    insideDetail();
299    detail.querySelector<HTMLButtonElement>(`[data-cap-part="play"][data-flow="${CSS.escape(id)}"]`)?.focus();
300  };
301
302  const enter = (id?: string, focus = true) => {
303    if (circles) {
304      const to = id ?? selected ?? coreTile?.dataset.id;
305      if (to) zoom(to, focus);
306      return;
307    }
308    const layer = inside;
309    if (!layer || !coreTile) return;
310    root.setAttribute("data-entered", "");
311    layer.removeAttribute("aria-hidden");
312    layer.setAttribute("role", "img");
313    const named = (sel: string) => [...layer.querySelectorAll(sel)].map((b) => b.querySelector(".cap-system-map-box-name")?.textContent).filter(Boolean).join(", ");
314    const name = systems.get(coreTile.dataset.id!)?.name ?? "the core";
315    const outside = named(".cap-system-map-box[data-external]");
316    layer.setAttribute("aria-label", `Inside ${name}: ${named(".cap-system-map-box:not([data-external])")}.${outside ? ` Outside it: ${outside}.` : ""}`);
317    insideDetail();
318    if (focus) detail.querySelector<HTMLButtonElement>("[data-cap-part='leave']")?.focus();
319    root.dispatchEvent(new CustomEvent("cap:system-map-enter", { bubbles: true, detail: { id: coreTile.dataset.id } }));
320  };
321
322  // With circles: the rest of the circles, fetched once the page has loaded and gone quiet, off
323  // its first paint's path; a tap before then waits for them. A failed fetch adds nothing, and
324  // those systems are then chosen with their lines, as without circles.
325  let loading: Promise<void> | null = null;
326  const load = () =>
327    (loading ??= (async () => {
328      const url = root.dataset.insides;
329      if (!url) return;
330      let all: Record<string, string> = {};
331      try {
332        const res = await fetch(url);
333        if (res.ok) all = (await res.json()) as Record<string, string>;
334      } catch {
335        return;
336      }
337      for (const [id, svg] of Object.entries(all)) {
338        if (layers.has(id)) continue;
339        const t = document.createElement("template");
340        t.innerHTML = svg;
341        const layer = t.content.firstElementChild;
342        if (layer) stage.appendChild(layer);
343      }
344      findLayers();
345      root.setAttribute("data-insides-ready", "");
346    })());
347
348  /** What a circle holds, in words: its parts, what is outside it and the systems round its rim. */
349  const describe = (id: string, layer: SVGSVGElement) => {
350    const names = (sel: string) =>
351      [...layer.querySelectorAll(sel)]
352        .map((b) => [...b.querySelectorAll(".cap-system-map-box-name, .cap-system-map-rim-name")].map((t) => t.textContent).join(" ").replace(/- /g, "-"))
353        .filter(Boolean);
354    const series = (items: string[]) => (items.length < 2 ? items.join("") : items.length === 2 ? `${items[0]} and ${items[1]}` : `${items.slice(0, -1).join(", ")}, and ${items.at(-1)}`);
355    const parts = names(".cap-system-map-box:not([data-external])");
356    const outside = names(".cap-system-map-box[data-external]");
357    const rims = names(".cap-system-map-rim");
358    return `${systems.get(id)?.name ?? id}: ${parts.length ? `${series(parts)} inside.` : "no parts."}${outside.length ? ` Outside: ${series(outside)}.` : ""}${rims.length ? ` Connects to ${series(rims)}.` : ""}`;
359  };
360
361  /** With circles, one tap on a system zooms into its circle, which grows out of its capsomer. */
362  const zoom = (id: string, focus: boolean) => {
363    waiting = id;
364    const layer = layers.get(id);
365    if (!layer) {
366      // Zoomed once its circle is in, unless the reader has chosen something else, or gone back, by then.
367      if (root.dataset.insides && !root.hasAttribute("data-insides-ready")) {
368        void load().then(() => {
369          if (waiting === id && layers.has(id)) zoom(id, focus);
370        });
371      }
372      return;
373    }
374    if (zoomed === id) return;
375    stopFlow(true);
376    zoomed = id;
377    const tile = tileOf(id);
378    const shell = root.querySelector<SVGSVGElement>("[data-layer='core']")?.viewBox.baseVal;
379    if (tile && shell?.width) layer.style.setProperty("transform-origin", `${(((Number(tile.dataset.x) - shell.x) / shell.width) * 100).toFixed(1)}% ${(((Number(tile.dataset.y) - shell.y) / shell.height) * 100).toFixed(1)}%`);
380    for (const [key, l] of layers) {
381      l.toggleAttribute("data-shown", key === id);
382      l.setAttribute("aria-hidden", "true");
383      l.removeAttribute("role");
384      l.removeAttribute("aria-label");
385    }
386    root.dataset.zoom = id;
387    root.setAttribute("data-entered", "");
388    if (out) out.hidden = false;
389    layer.removeAttribute("aria-hidden");
390    layer.setAttribute("role", "img");
391    layer.setAttribute("aria-label", describe(id, layer));
392    insideDetail();
393    if (focus) {
394      // In the next frame, as is the scroll: focus lays the page out, and the tap's own handler stays short.
395      requestAnimationFrame(() => {
396        if (zoomed !== id) return;
397        out?.focus({ preventScroll: true });
398        // The circle in view, with the detail line above it where they fit together.
399        const top = Math.min(detail.getBoundingClientRect().top, stage.getBoundingClientRect().top);
400        const bottom = Math.max(detail.getBoundingClientRect().bottom, stage.getBoundingClientRect().bottom);
401        const by = bottom > innerHeight - 8 ? Math.min(top - 8, bottom - innerHeight + 8) : top < 0 ? top - 8 : 0;
402        if (by) scrollBy({ top: by, behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
403      });
404    }
405    root.dispatchEvent(new CustomEvent("cap:system-map-enter", { bubbles: true, detail: { id } }));
406  };
407
408  const leave = () => {
409    if (!root.hasAttribute("data-entered")) return;
410    stopFlow(true);
411    root.removeAttribute("data-entered");
412    if (circles) {
413      const was = zoomed;
414      zoomed = null;
415      waiting = null;
416      delete root.dataset.zoom;
417      if (out) out.hidden = true;
418      for (const l of layers.values()) {
419        l.removeAttribute("data-shown");
420        l.setAttribute("aria-hidden", "true");
421        l.removeAttribute("role");
422        l.removeAttribute("aria-label");
423      }
424      select(null);
425      if (was) focusTile(was);
426      root.dispatchEvent(new CustomEvent("cap:system-map-leave", { bubbles: true, detail: { id: was } }));
427      return;
428    }
429    inside?.setAttribute("aria-hidden", "true");
430    inside?.removeAttribute("role");
431    if (coreTile) {
432      select(coreTile.dataset.id!);
433      focusTile(coreTile.dataset.id!);
434    }
435    root.dispatchEvent(new CustomEvent("cap:system-map-leave", { bubbles: true, detail: { id: coreTile?.dataset.id } }));
436  };
437
438  const setView = (view: "shell" | "plain") => {
439    if (view === "plain") leave();
440    root.dataset.view = view;
441    list.open = view === "plain";
442    if (flowList) flowList.open = view === "plain";
443    for (const b of views?.querySelectorAll<HTMLButtonElement>("button[data-view]") ?? []) b.setAttribute("aria-pressed", String(b.dataset.view === view));
444  };
445
446  const activate = (id: string) => {
447    if (circles) {
448      if (zoomed === id) return;
449      select(id);
450      zoom(id, true);
451      return;
452    }
453    if (root.hasAttribute("data-entered")) leave();
454    if (selected === id && enterable(id)) enter();
455    else select(id);
456  };
457
458  const onClick = (e: Event) => {
459    const target = e.target as Element;
460    if (circles && zoomed) {
461      if (target.closest("[data-cap-part='out']")) return leave();
462      // Another system on the rim zooms there; a tap outside the circle goes back.
463      const goto = target.closest<SVGGElement>(".cap-system-map-rim[data-goto]")?.dataset.goto;
464      if (goto && tileOf(goto)) {
465        for (const t of tiles) t.setAttribute("tabindex", t.dataset.id === goto ? "0" : "-1");
466        return activate(goto);
467      }
468      const circle = layers.get(zoomed)?.querySelector<SVGCircleElement>(".cap-system-map-boundary");
469      const m = circle?.getScreenCTM();
470      if (circle && m && e instanceof MouseEvent && stage.contains(target) && !target.closest(".cap-system-map-box")) {
471        const p = new DOMPoint(e.clientX, e.clientY).matrixTransform(m.inverse());
472        if (Math.hypot(p.x - circle.cx.baseVal.value, p.y - circle.cy.baseVal.value) > circle.r.baseVal.value) return leave();
473      }
474    }
475    const tile = target.closest<SVGGElement>(".cap-system-map-tile[data-id]");
476    if (tile && stage.contains(tile)) {
477      focusTile(tile.dataset.id!);
478      activate(tile.dataset.id!);
479      return;
480    }
481    const part = target.closest<HTMLElement>("[data-cap-part]")?.dataset.capPart;
482    if (part === "enter") enter();
483    else if (part === "leave") leave();
484    else if (part === "play") playFlow(target.closest<HTMLElement>("[data-flow]")?.dataset.flow ?? "");
485    else if (part === "next" && playing) showStep(playing.n + 1);
486    else if (part === "back" && playing) showStep(playing.n - 1);
487    else if (part === "stop") stopFlow();
488    const view = target.closest<HTMLButtonElement>(".cap-system-map-views button[data-view]")?.dataset.view;
489    if (view === "shell" || view === "plain") setView(view);
490  };
491
492  const ARROWS: Record<string, Direction> = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right" };
493  const onKey = (e: KeyboardEvent) => {
494    if (playing && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
495      const steps = flows.get(playing.id)!.steps.length;
496      const digit = /^[1-9]$/.test(e.key) ? Number(e.key) : 0;
497      const to = e.key === "ArrowRight" ? playing.n + 1 : e.key === "ArrowLeft" ? playing.n - 1 : digit && digit <= steps ? digit : 0;
498      if (to >= 1 && to <= steps) {
499        e.preventDefault();
500        showStep(to);
501        return;
502      }
503      if (e.key === "Escape") {
504        e.preventDefault();
505        stopFlow();
506        return;
507      }
508    }
509    if (e.key === "Escape" && root.hasAttribute("data-entered")) {
510      e.preventDefault();
511      leave();
512      return;
513    }
514    const tile = (e.target as Element).closest?.<SVGGElement>(".cap-system-map-tile[data-id]");
515    if (!tile) return;
516    const id = tile.dataset.id!;
517    const dir = ARROWS[e.key];
518    let next: string | null = null;
519    if (dir) next = spatialNext(points, id, dir);
520    else if (e.key === "Home") next = points[0]?.id ?? null;
521    else if (e.key === "End") next = points.at(-1)?.id ?? null;
522    else if (e.key === "Enter" || e.key === " ") {
523      e.preventDefault();
524      activate(id);
525      return;
526    } else if (e.key === "Escape" && selected) {
527      e.preventDefault();
528      select(null);
529      return;
530    } else return;
531    e.preventDefault();
532    if (next) focusTile(next);
533  };
534
535  // With circles, Escape goes back to the map from anywhere on the page; while a flow plays it stops the flow first.
536  const onPageKey = (e: KeyboardEvent) => {
537    if (e.key !== "Escape" || e.defaultPrevented || !zoomed || playing) return;
538    e.preventDefault();
539    leave();
540  };
541  const later = () => ("requestIdleCallback" in window ? requestIdleCallback(() => void load(), { timeout: 2000 }) : setTimeout(() => void load(), 200));
542  if (circles) {
543    document.addEventListener("keydown", onPageKey);
544    if (root.dataset.insides) {
545      if (document.readyState === "complete") later();
546      else addEventListener("load", later, { once: true });
547    }
548    // Drawn zoomed into by the server (systemMapHtml's circles.chosen): the same state, with no movement.
549    const asked = root.dataset.zoom;
550    if (asked && tileOf(asked)) {
551      for (const t of tiles) t.setAttribute("tabindex", t.dataset.id === asked ? "0" : "-1");
552      select(asked);
553      zoom(asked, false);
554    }
555  }
556
557  root.addEventListener("click", onClick);
558  root.addEventListener("keydown", onKey);
559  return {
560    select,
561    enter: (id?: string) => enter(id),
562    leave,
563    setView,
564    playFlow: (id: string, n = 1) => playFlow(id, n, false),
565    step: (n: number) => showStep(n, false),
566    stopFlow: () => stopFlow(),
567    destroy() {
568      stopFlow(true);
569      root.removeEventListener("click", onClick);
570      root.removeEventListener("keydown", onKey);
571      document.removeEventListener("keydown", onPageKey);
572      removeEventListener("load", later);
573    },
574  };
575}
576
577export function enhance(root: ParentNode = document): () => void {
578  const made: SystemMapController[] = [];
579  for (const el of root.querySelectorAll<HTMLElement>("[data-cap='system-map']")) {
580    if (el.hasAttribute(READY)) continue;
581    el.setAttribute(READY, "");
582    made.push(controller(el, el.dataset.openLabel ?? "Open"));
583  }
584  return () => {
585    for (const c of made) c.destroy();
586  };
587}