@contraagent/elements 0.0.0-stage → 0.1.0

package/src/graph/views/dag.ts

@@ -0,0 +1,294 @@
+// The graph in the frame that pans and zooms: clusters, nodes with their marks,
+// stubs and edges; and the keys that move between marks and along edges.
+import { html, nothing, svg } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { toneAttr, type Tone } from '../../core/tone.js';
+import { stateCount } from '../../primitives/states.js';
+import { isPoint } from '../arrange.js';
+import { BAR_LIST, firstMark, gridOf, hlKeyOf, slotsOf, type GraphHost, type MarkGroup, type Slot } from '../host.js';
+import { cycleIcon, innerIcon, toggleIcon } from '../icons.js';
+import type { Rect } from '../layout.js';
+import { asBar, barParts } from '../marks.js';
+import { alongEdge } from '../nav.js';
+import { edgePath, returnPath } from '../paths.js';
+import type { GraphClusterInput, GraphNode } from '../types.js';
+
+/** A note's class by its tone: failed, attention, running, muted. */
+export const NOTE_CLASS: Partial<Record<Tone, string>> = { failed: 'err', attention: 'warn', running: 'live', muted: 'mut' };
+
+/** The graph in its frame: dragging pans, a click on the frame clears the selection. */
+export function dag(h: GraphHost) {
+  const pz = h.pz;
+  return html`<div class="frame gframe ${h.down ? 'down' : ''}" part="frame" style="height:${Math.round(pz.frameH)}px"
+      @pointerdown=${pz.onPointerDown} @pointermove=${pz.onPointerMove} @pointerup=${pz.onPointerUp} @pointercancel=${pz.onPointerUp}
+      @click=${(e: MouseEvent) => !(e.target as Element).closest('.node, .cluster, .stub, .tools') && h.select(null)}>
+      <div class="stage view" part="stage" style="transform:${pz.transform}">${graphView(h)}</div>
+    </div>`;
+}
+
+/** Where an item is drawn, from its parent's corner (a cluster's, inside its border), or hidden until laid out. */
+function at(h: GraphHost, id: string, parent: Rect | null): string {
+  const r = h.lay?.at[id];
+  if (!r) return 'left:0;top:0';
+  const dx = parent ? parent.x + 1 : 0;
+  const dy = parent ? parent.y + 1 : 0;
+  return `left:${r.x - dx}px;top:${r.y - dy}px`;
+}
+
+function graphView(h: GraphHost) {
+  const { on } = h.lit();
+  const g = h.drawn;
+  const lay = h.lay;
+  const stubs = new Map(g.stubs.map((s) => [s.id, s]));
+  const items = (container: string): string[] => (h.arr.slots[container] ?? []).flat().filter((id) => !isPoint(id));
+  const item = (id: string, parent: Rect | null): unknown => {
+    const b = h.clusters.get(id);
+    if (b) return cluster(h, b, parent, (x, r) => item(x, r));
+    const s = stubs.get(id);
+    if (s) return html`<span class="stub" part="stub" data-id=${s.id} style=${at(h, s.id, parent)} title=${h.words.stubTip}>${s.label}</span>`;
+    const n = h.nodes.get(id);
+    return n ? node(h, n, parent) : nothing;
+  };
+  // Unplaced until a layout of this structure exists: the first render only measures.
+  const placed = !!lay && g.nodes.every((n) => lay.at[n.id]);
+  const w = lay?.w ?? 0;
+  const ht = lay?.h ?? 0;
+  return html`<div class="dag ${h.down ? 'down' : ''} ${on ? 'hl' : ''} ${placed ? '' : 'unplaced'}" style="width:${w}px;height:${ht}px"
+    @mouseleave=${() => (h.hover = null)}>
+    <svg class="edges" aria-hidden="true" width=${w} height=${ht}>
+      <defs>
+        <marker id="arr" viewBox="0 0 8 8" refX="8" refY="4" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto">
+          <path d="M0,0.5 L8,4 L0,7.5 z" fill="var(--line2)" stroke="none"></path>
+        </marker>
+        <marker id="arr-ret" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto">
+          <path class="ret-tip" d="M0,0.5 L8,4 L0,7.5 z"></path>
+        </marker>
+      </defs>
+      ${(lay?.edges ?? []).map((e) => svg`<path class=${e.style} part="edge" d=${edgePath(e.runs, lay?.down)} marker-end="url(#arr)"></path>`)}
+      ${(lay?.returns ?? []).map((r) => svg`<path class="ret" data-cluster=${r.box} d=${returnPath(r, lay?.down)} marker-end="url(#arr-ret)"></path>`)}
+    </svg>
+    ${repeat(items(''), (id) => id, (id) => item(id, null))}
+  </div>`;
+}
+
+/** A click on a node or a cluster, not on one of its marks or on a node inside it: selects it. */
+function onItemClick(h: GraphHost, e: MouseEvent, id: string): void {
+  const own = (e.target as HTMLElement).closest('.mark, .taskchip, .node, .cluster');
+  if (own !== e.currentTarget) return;
+  e.stopPropagation();
+  if (e.detail >= 2) return; // the second click of a double click
+  h.select(id);
+}
+
+function onItemDblClick(h: GraphHost, e: MouseEvent, id: string): void {
+  const own = (e.target as HTMLElement).closest('.mark, .taskchip, .node, .cluster');
+  if (own !== e.currentTarget) return;
+  e.stopPropagation();
+  h.act(id);
+}
+
+/** Enter on a node's or a cluster's name: its action (Space selects it, as a click does). */
+function onNameKey(h: GraphHost, e: KeyboardEvent, id: string): void {
+  if (e.key !== 'Enter') return;
+  e.preventDefault();
+  h.act(id);
+}
+
+/** The control that opens or closes an item drawn closed or open (`toggle`), named with the item. */
+function toggleControl(h: GraphHost, id: string, label: string, open: boolean) {
+  const word = open ? h.words.close : h.words.open;
+  return html`<button type="button" class="tog" part="toggle" aria-expanded=${open} aria-label=${`${word}: ${label}`} title=${word}
+    @click=${(e: MouseEvent) => {
+      e.stopPropagation();
+      h.toggle(id, !open);
+    }}
+    @dblclick=${(e: MouseEvent) => e.stopPropagation()}>${toggleIcon(open)}</button>`;
+}
+
+/** A cluster's name: its label, or the parts of its path, each after the first a link to its own inner view. */
+function clusterName(h: GraphHost, b: GraphClusterInput, sel: boolean) {
+  const first = b.path?.[0];
+  const name = html`<button type="button" class="name" title=${(first?.tip ?? b.tip) || nothing} aria-pressed=${sel}
+    @focus=${() => h.focusSelect(b.id)} @keydown=${(e: KeyboardEvent) => onNameKey(h, e, b.id)}>${b.cycle ? cycleIcon() : nothing}${first?.label ?? b.label}</button>`;
+  if (!b.path || b.path.length < 2) return name;
+  return html`${name}${b.path.slice(1).map(
+    (p) => html`<span class="psep" aria-hidden="true">›</span><button type="button" class="part" title=${p.tip || nothing}
+      @click=${(e: MouseEvent) => {
+        e.stopPropagation();
+        h.drill(p.id);
+      }}
+      @dblclick=${(e: MouseEvent) => e.stopPropagation()}>${p.label}</button>`,
+  )}`;
+}
+
+function cluster(h: GraphHost, b: GraphClusterInput, parent: Rect | null, item: (id: string, r: Rect | null) => unknown) {
+  const r = h.lay?.at[b.id] ?? null;
+  const kids = (h.arr.slots[b.id] ?? []).flat().filter((id) => !isPoint(id));
+  const size = r ? `;width:${r.w}px;height:${r.h}px` : '';
+  const sel = h.selected === b.id;
+  return html`<section class="cluster ${sel ? 'sel' : ''}" part="cluster" role="group" data-cluster=${b.id} style=${at(h, b.id, parent) + size}
+      aria-label=${b.summary ?? b.label}
+      @click=${(e: MouseEvent) => onItemClick(h, e, b.id)} @dblclick=${(e: MouseEvent) => onItemDblClick(h, e, b.id)}>
+    <div class="hd" part="cluster-label" data-id=${`lbl:${b.id}`}>
+      <span class="line">
+        ${clusterName(h, b, sel)}
+        ${b.note ? html`<span class="count">${b.note}</span>` : nothing}
+      </span>
+      ${b.detail ? html`<span class="spread" title=${b.detailTip ?? nothing}>${b.detail}</span>` : nothing}
+    </div>
+    ${b.toggle
+      ? html`<span class="cue">${toggleControl(h, b.id, b.path?.map((p) => p.label).join(' › ') ?? b.label, true)}</span>`
+      : b.drill
+        ? html`<span class="cue" aria-hidden="true">${innerIcon()}</span>`
+        : nothing}
+    <div class="in">${repeat(kids, (id) => id, (id) => item(id, r))}</div>
+  </section>`;
+}
+
+/** A node's notes ("1 failed | 1 not started"), each in its tone's class. */
+export const notes = (n: GraphNode, tag: 'span' | 'div' = 'span') =>
+  (n.notes ?? []).map((f) => (tag === 'span' ? html`<span class=${NOTE_CLASS[f.tone ?? 'neutral'] ?? ''}>${f.text}</span>` : html`<div class=${NOTE_CLASS[f.tone ?? 'neutral'] ?? ''}>${f.text}</div>`));
+
+function node(h: GraphHost, n: GraphNode, parent: Rect | null) {
+  const series = h.drawn.series;
+  const bar = asBar(n, h.barAt);
+  const all = slotsOf(n, series);
+  const failed = (s: Slot | null): s is Slot => !!s && h.states[s.m.state]?.tone === 'failed';
+  const group: MarkGroup = bar
+    ? { id: n.id, slots: all.filter(failed), grid: { cols: BAR_LIST, size: 12, gap: 4 } }
+    : { id: n.id, slots: all, grid: gridOf(n, series.length) };
+  const sel = h.selected === n.id;
+  const icons = (n.icons ?? []).map((x) => h.renderIcon(x));
+  return html`<section class="node ${n.drill ? 'drill' : ''} ${n.accent ? 'accent' : ''} ${sel ? 'sel' : ''}" part="node" role="group" data-id=${n.id}
+    data-look=${n.look && n.look !== 'neutral' ? n.look : nothing} aria-label=${n.summary ?? n.label}
+    style="${at(h, n.id, parent)};--cols:${group.grid.cols};--m:${group.grid.size}px;--g:${group.grid.gap}px"
+    @click=${(e: MouseEvent) => onItemClick(h, e, n.id)} @dblclick=${(e: MouseEvent) => onItemDblClick(h, e, n.id)}>
+    <div class="hd" part="node-header">
+      <span class="nm">${icons}<button type="button" class="name" part="node-name" title=${n.tip ?? nothing} aria-pressed=${sel}
+        @focus=${() => h.focusSelect(n.id)} @keydown=${(e: KeyboardEvent) => onNameKey(h, e, n.id)}>${n.label}</button></span>
+      <span class="right"><span class="count" aria-hidden="true" title=${n.progress.label}>${n.progress.done}/${n.progress.total}</span>${n.toggle
+        ? toggleControl(h, n.id, n.label, false)
+        : n.drill
+          ? html`<span class="cue" aria-hidden="true">${innerIcon()}</span>`
+          : nothing}</span>
+    </div>
+    ${bar ? statusBar(h, n, group) : marks(h, group)}
+    ${n.notes?.length ? html`<div class="ex" aria-hidden="true">${notes(n)}</div>` : nothing}
+  </section>`;
+}
+
+/** A node with too many marks to draw: a bar of its counts, and its failed marks by name. */
+function statusBar(h: GraphHost, n: GraphNode, g: MarkGroup) {
+  const order = Object.keys(h.states);
+  const parts = barParts(n.counts, order);
+  const shown = g.slots.slice(0, BAR_LIST);
+  const more = g.slots.length - shown.length;
+  const active = Math.min(h.active.get(g.id) ?? 0, Math.max(0, shown.length - 1));
+  const words = order.filter((s) => n.counts[s]).map((s) => stateCount(h.states, s, n.counts[s] ?? 0));
+  return html`<div class="sbar" role="img" aria-label=${words.join(' | ')}>
+      ${parts.map((p) => {
+        const look = h.states[p.state];
+        return html`<i data-tone=${toneAttr(look?.tone)} data-shape=${look?.shape ?? nothing} style="width:${p.pct}%" title=${stateCount(h.states, p.state, p.n)}></i>`;
+      })}
+    </div>
+    ${shown.length
+      ? html`<div class="fails" @keydown=${(e: KeyboardEvent) => onKey(h, e, { ...g, slots: shown, grid: { ...g.grid, cols: shown.length } })}>
+          ${shown.map((s, i) => (s ? mark(h, g, s, i, i === active, true) : nothing))}
+          ${more > 0 ? html`<span>${h.words.more(more)}</span>` : nothing}
+        </div>`
+      : nothing}`;
+}
+
+/** A group's marks, with one tab stop. */
+function marks(h: GraphHost, g: MarkGroup) {
+  const active = Math.min(h.active.get(g.id) ?? firstMark(g.slots), g.slots.length - 1);
+  return html`<div class="marks ${g.grid.size >= 10 ? 'big' : ''}" @keydown=${(e: KeyboardEvent) => onKey(h, e, g)}>
+    ${g.slots.map((s, i) => (s ? mark(h, g, s, i, i === active) : html`<span class="slot"></span>`))}
+  </div>`;
+}
+
+function mark(h: GraphHost, g: MarkGroup, s: Slot, i: number, tabStop: boolean, chip = false) {
+  const { m } = s;
+  const { key, on } = h.lit();
+  const hlKey = hlKeyOf(s);
+  const lit = on !== null && ((s.series !== '' && s.series === key) || on.has(m.id));
+  const sel = h.selected === m.id ? 'sel' : '';
+  const focus = (e: FocusEvent) => {
+    h.hover = hlKey;
+    h.active.set(g.id, i);
+    h.pz.reveal(e.currentTarget as HTMLElement);
+    h.focusSelect(m.id);
+  };
+  if (chip) {
+    return html`<button type="button" class="taskchip ${lit ? 'on' : ''} ${sel}" part="mark" data-i=${i} tabindex=${tabStop ? 0 : -1}
+      title=${m.tip ?? nothing} aria-label=${m.label} aria-pressed=${!!sel}
+      @mouseenter=${() => (h.hover = hlKey)} @focus=${focus} @blur=${() => (h.hover = null)}
+      @click=${() => h.select(m.id)} @dblclick=${() => h.act(m.id)}>${m.name ?? (s.series || m.id)}</button>`;
+  }
+  const look = h.states[m.state];
+  return html`<button type="button" class="mark ${lit ? 'on' : ''} ${sel}" part="mark" data-tone=${toneAttr(look?.tone)} data-shape=${look?.shape ?? nothing}
+    data-i=${i} data-n=${m.badge ?? nothing} tabindex=${tabStop ? 0 : -1}
+    title=${m.tip ?? nothing}
+    aria-label=${m.label} aria-pressed=${!!sel}
+    @mouseenter=${() => (h.hover = hlKey)}
+    @focus=${focus}
+    @blur=${() => (h.hover = null)}
+    @click=${() => h.select(m.id)}
+    @dblclick=${() => h.act(m.id)}></button>`;
+}
+
+/** Arrow keys, Home and End within a group's marks, skipping empty slots; Shift and an arrow key along an edge to another node. */
+function onKey(h: GraphHost, e: KeyboardEvent, g: MarkGroup): void {
+  const target = e.target as HTMLElement;
+  if (!target.classList.contains('mark') && !target.classList.contains('taskchip')) return;
+  if (e.shiftKey && e.key.startsWith('Arrow')) return toEdge(h, e, g);
+  const { slots } = g;
+  if (e.key === 'Enter') {
+    const s = slots[Number(target.dataset['i'])];
+    e.preventDefault();
+    if (s) h.act(s.m.id);
+    return;
+  }
+  const cur = h.active.get(g.id) ?? firstMark(slots);
+  const step: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: g.grid.cols, ArrowUp: -g.grid.cols };
+  let next: number;
+  if (e.key === 'Home') next = firstMark(slots);
+  else if (e.key === 'End') next = slots.length - 1 - [...slots].reverse().findIndex((m) => m !== null);
+  else if (step[e.key] !== undefined) {
+    const d = step[e.key] as number;
+    next = cur + d;
+    while (next >= 0 && next < slots.length && !slots[next]) next += Math.sign(d);
+    if (next < 0 || next >= slots.length) return;
+  } else return;
+  e.preventDefault();
+  h.active.set(g.id, next);
+  h.requestUpdate();
+  const group = e.currentTarget as HTMLElement;
+  void h.updateComplete.then(() => group.querySelector<HTMLElement>(`[data-i="${next}"]`)?.focus());
+}
+
+/** To the node an edge joins: a later one (Shift and → or ↓) or an earlier one (Shift and ← or ↑), on the same series when it has a mark there. */
+function toEdge(h: GraphHost, e: KeyboardEvent, g: MarkGroup): void {
+  const dir = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 'later' : 'earlier';
+  const lay = h.lay;
+  const across = (id: string) => {
+    const r = lay?.at[id];
+    return !r ? 0 : lay?.down ? r.x + r.w / 2 : r.y + r.h / 2;
+  };
+  const to = alongEdge({ drawn: h.arr.drawn, edges: h.drawn.edges, back: h.arr.back }, g.id, dir, across);
+  e.preventDefault();
+  if (!to) return;
+  const n = h.nodes.get(to);
+  if (!n) return;
+  const series = g.slots[h.active.get(g.id) ?? firstMark(g.slots)]?.series ?? '';
+  const all = slotsOf(n, h.drawn.series);
+  const slots = asBar(n, h.barAt) ? all.filter((s) => !!s && h.states[s.m.state]?.tone === 'failed') : all;
+  const same = series ? slots.findIndex((s) => s?.series === series) : -1;
+  const i = same >= 0 ? same : (h.active.get(n.id) ?? firstMark(slots));
+  h.active.set(n.id, i);
+  h.requestUpdate();
+  void h.updateComplete.then(() => {
+    const el = h.renderRoot.querySelector<HTMLElement>(`.node[data-id="${CSS.escape(to)}"]`);
+    (el?.querySelector<HTMLElement>(`[data-i="${i}"]`) ?? el?.querySelector<HTMLElement>('.name'))?.focus();
+  });
+}

package/src/graph/views/foot.ts

@@ -0,0 +1,109 @@
+// The row under the frame: the legend, the zoom buttons and the view switch, and the keys of the view shown.
+import { html, nothing, svg } from 'lit';
+import { toneAttr } from '../../core/tone.js';
+import { legend as legendRow, type LegendItem } from '../../primitives/legend.js';
+import type { MarkMatrixInput } from '../../matrix/types.js';
+import { asBar } from '../marks.js';
+import { slotsOf, type GraphHost } from '../host.js';
+import { innerIcon } from '../icons.js';
+
+/**
+ * The legend on the left, the tools at the right end of the first line, and the keys
+ * under them: their line keeps its room, and shows its words while the graph has the focus.
+ */
+export function foot(h: GraphHost, matrix: MarkMatrixInput | null) {
+  const table = !!matrix || h.asTable;
+  return html`<div class="foot">
+    ${legend(h, matrix)}
+    <div class="tools">${table ? nothing : zoomTools(h)}${viewSwitch(h, table)}</div>
+    <div class="keys" part="keys">${keyHints(h, matrix).map((k, i) => html`${i ? ' | ' : ''}<span>${k}</span>`)}</div>
+  </div>`;
+}
+
+/** Zoom out, zoom in, and back to the whole drawing (which does nothing while the whole drawing shows at its own size). */
+function zoomTools(h: GraphHost) {
+  const pz = h.pz;
+  const w = h.words;
+  const whole = !pz.moved && pz.fitK >= 1;
+  return html`<button type="button" aria-label=${w.zoomOut} title=${w.zoomOutTip} @click=${() => pz.zoomBy(1 / 1.25)}>−</button>
+    <button type="button" aria-label=${w.zoomIn} title=${w.zoomInTip} @click=${() => pz.zoomBy(1.25)}>+</button>
+    <button type="button" ?disabled=${whole} @click=${() => pz.showAll()}>${w.showAll}</button>`;
+}
+
+/** The two views, at the same place in each: the drawing, and the table (a mark matrix, or a row per node). */
+function viewSwitch(h: GraphHost, table: boolean) {
+  const options = [
+    { value: 'graph', label: h.words.graph },
+    { value: 'table', label: h.words.table },
+  ];
+  return html`<cae-segmented class="views" .options=${options} .value=${table ? 'table' : 'graph'} label=${h.words.view}
+    @cae-change=${(e: CustomEvent<{ value: string }>) => {
+      e.stopPropagation();
+      h.showView(e.detail.value === 'table' ? 'table' : 'graph');
+    }}></cae-segmented>`;
+}
+
+/** The keys of the view shown. */
+function keyHints(h: GraphHost, matrix: MarkMatrixInput | null): string[] {
+  const w = h.words;
+  const esc = h.selected ? w.clearKey : w.upKey;
+  const keys = matrix ? w.matrixKeys : h.asTable ? w.tableKeys : w.graphKeys;
+  return [...keys, esc].filter(Boolean);
+}
+
+/** A status mark in a state's look, as the legend shows it. */
+const legendMark = (h: GraphHost, state: string, badge?: string) => {
+  const look = h.states[state];
+  return html`<i class="mark" data-tone=${toneAttr(look?.tone)} data-shape=${look?.shape ?? nothing} data-n=${badge ?? nothing}></i>`;
+};
+
+/**
+ * What the view shows that needs a word: the states of the marks shown, a badge when a
+ * mark shows one, the icons the host names, the edge styles when both are drawn, a
+ * cluster's return, and the mark of an item with an inner view.
+ */
+function legend(h: GraphHost, mx: MarkMatrixInput | null) {
+  const g = h.drawn;
+  const flat = h.asTable && !mx;
+  // The marks drawn: a node with a bar draws its failed marks only (its badges none); the table draws none.
+  const marks = flat
+    ? []
+    : mx
+      ? mx.rows.flatMap((r) => r.cells).map((m) => m && { state: m.state, badge: undefined })
+      : g.nodes.flatMap((n) => slotsOf(n, g.series).map((s) => s && { state: s.m.state, badge: asBar(n, h.barAt) ? undefined : s.m.badge }));
+  const shown = marks.filter((m): m is { state: string; badge: string | undefined } => m !== null);
+  const present = new Set(shown.map((m) => m.state));
+  const badge = shown.some((m) => m.badge);
+  const dashed = !mx && !flat && [...g.edges, ...g.stubs].some((e) => e.style === 'dashed');
+  const icons = new Set(mx ? mx.head.flat().flatMap((c) => c.icons ?? []) : g.nodes.flatMap((n) => n.icons ?? []));
+  const cycles = !mx && !flat && g.clusters.some((c) => c.cycle);
+  const inner = !mx && ((!flat && g.clusters.some((c) => c.drill)) || g.nodes.some((n) => n.drill));
+  const first = Object.keys(h.states)[0] ?? '';
+  const line = (dash: boolean) => svg`<svg width="22" height="8" aria-hidden="true"><path d="M1,4 H21" stroke-dasharray=${dash ? '5 4' : 'none'}></path></svg>`;
+  const items: LegendItem[] = [
+    ...Object.entries(h.states)
+      .filter(([s]) => present.has(s))
+      .map(([s, look]) => ({ label: look.label, icon: legendMark(h, s), decorative: true })),
+    ...(badge ? [{ label: h.words.badge, icon: legendMark(h, first, '2'), decorative: true }] : []),
+    ...Object.entries(h.words.iconNames)
+      .filter(([name]) => icons.has(name))
+      .map(([name, label]) => ({ label, icon: h.renderIcon(name) })),
+    ...(dashed
+      ? [
+          { label: h.words.solidEdge, icon: line(false) },
+          { label: h.words.dashedEdge, icon: line(true) },
+        ]
+      : []),
+    ...(cycles
+      ? [
+          {
+            label: h.words.cycle,
+            icon: html`<svg width="24" height="12" aria-hidden="true"><path class="ret" d="M20,1.5 V5.5 Q20,9.5 16,9.5 H8 Q4,9.5 4,5.5 V5"></path>
+            <path class="ret-head" d="M4,0.8 L1.4,5 L6.6,5 z"></path></svg>`,
+          },
+        ]
+      : []),
+    ...(inner ? [{ label: h.words.drill, icon: innerIcon() }] : []),
+  ];
+  return legendRow(items, { cls: 'big' });
+}

package/src/graph/views/node-table.ts

@@ -0,0 +1,90 @@
+// The graph as a table, in its frame: a row per node.
+import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { FRAME_MIN, FRAME_SHARE } from '../../core/frame.js';
+import type { GraphHost } from '../host.js';
+import { cycleIcon, innerIcon } from '../icons.js';
+import type { EdgeStyle, GraphInput, GraphNode } from '../types.js';
+import { notes } from './dag.js';
+
+/** The names of the nodes `n` is joined to: by a solid edge, by a dashed one, and the later ones. */
+export function neighbours(
+  n: GraphNode,
+  g: Pick<GraphInput, 'edges' | 'stubs'>,
+  nodes: ReadonlyMap<string, GraphNode>,
+  inCluster: (label: string) => string,
+): { solid: string[]; dashed: string[]; later: string[] } {
+  const label = (id: string) => {
+    const x = nodes.get(id);
+    return !x ? id : x.cluster ? inCluster(x.label) : x.label;
+  };
+  const into = (style: EdgeStyle) => [
+    ...g.stubs.filter((s) => s.to === n.id && s.style === style).map((s) => s.label),
+    ...g.edges.filter((e) => e.to === n.id && e.style === style).map((e) => label(e.from)),
+  ];
+  return { solid: into('solid'), dashed: into('dashed'), later: [...new Set(g.edges.filter((e) => e.from === n.id).map((e) => label(e.to)))] };
+}
+
+/**
+ * The graph as a table, in its frame: a row per node with its status (the node's
+ * count and notes) and the nodes it is joined to. A row is selected as a node is,
+ * with the same card.
+ */
+export function nodeTable(h: GraphHost) {
+  const g = h.drawn;
+  const w = h.words;
+  const dashed = [...g.edges, ...g.stubs].some((e) => e.style === 'dashed');
+  const list = (xs: string[]) => w.list(xs) || w.none;
+  // The frame keeps the drawing's height when the drawing of this graph was laid out (left to right); else the table's own, up to the frame's limit.
+  const height = !h.down && h.laidOut && h.pz.frameH > 0 ? `height:${Math.round(h.pz.frameH)}px` : `max-height:max(${FRAME_MIN}px, ${FRAME_SHARE * 100}vh)`;
+  const rows = h.arr.drawn.map((id) => h.nodes.get(id)).filter((n): n is GraphNode => !!n);
+  return html`<div class="frame tframe" part="frame" data-scroll="x" style=${height} @scroll=${() => h.card.place()}
+      @click=${(e: MouseEvent) => !(e.target as Element).closest('tbody tr') && h.select(null)}>
+    <table class="list view" part="table">
+      <thead>
+        <tr>
+          <th scope="col" class="fit">${w.nameHeader}</th>
+          <th scope="col" class="fit">${w.statusHeader}</th>
+          <th scope="col">${w.solidHeader}</th>
+          ${dashed ? html`<th scope="col">${w.dashedHeader}</th>` : nothing}
+          <th scope="col">${w.laterHeader}</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${repeat(rows, (n) => n.id, (n) => {
+          const nb = neighbours(n, g, h.nodes, w.inCluster);
+          const box = n.cluster ? h.clusters.get(n.cluster) : undefined;
+          const on = h.selected === n.id;
+          const icons = html`${(n.icons ?? []).map((x) => h.renderIcon(x))}${n.drill ? innerIcon() : nothing}`;
+          return html`<tr class=${on ? 'sel' : ''} part="row" data-id=${n.id}
+              @click=${(e: MouseEvent) => !(e.target as Element).closest('.loopchip') && e.detail < 2 && h.select(n.id)}
+              @dblclick=${(e: MouseEvent) => !(e.target as Element).closest('.loopchip') && h.act(n.id)}>
+            <th scope="row" class="fit">
+              <span class="nm">${icons}<button type="button" class="name" title=${n.tip ?? nothing} aria-pressed=${on}
+                @focus=${() => h.focusSelect(n.id)} @keydown=${(e: KeyboardEvent) => {
+                  if (e.key !== 'Enter') return;
+                  e.preventDefault();
+                  h.act(n.id);
+                }}>${n.label}</button>${box?.drill
+                ? html`<button type="button" class="taskchip loopchip" title=${box.chipTip ?? nothing} aria-label=${box.chipLabel ?? nothing}
+                    @click=${() => h.drill(box.id)}>${box.cycle ? cycleIcon(12) : nothing}${box.note ?? box.label}</button>`
+                : nothing}</span>
+            </th>
+            <td class="fit st">${statusLine(n)}</td>
+            <td class="rel"><span>${list(nb.solid)}</span></td>
+            ${dashed ? html`<td class="rel"><span>${list(nb.dashed)}</span></td>` : nothing}
+            <td class="rel"><span>${list(nb.later)}</span></td>
+          </tr>`;
+        })}
+      </tbody>
+    </table>
+  </div>`;
+}
+
+/** A node's status in one row, as its node in the graph says it: "28/30 | 1 failed | 1 not started". */
+export function statusLine(n: GraphNode) {
+  const sep = html`<span class="sep" aria-hidden="true"> | </span>`;
+  return html`<span class="n" aria-hidden="true" title=${n.progress.label}>${n.progress.done}/${n.progress.total}</span><span class="sr">${n.progress.label}</span>${notes(n).map(
+    (x) => html`${sep}${x}`,
+  )}`;
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+// @contraagent/elements: generic web components and the parts they are built
+// from. Importing this module registers nothing: each class is registered by its
+// `define` entry (`@contraagent/elements/define` registers every `cae-*`), or by
+// the host under a tag name of its own.
+export * from './core/tone.js';
+export * from './core/events.js';
+export * from './core/strings.js';
+export * from './core/define.js';
+export * from './core/format.js';
+export * from './core/clock.js';
+export * from './styles/index.js';
+export * from './themes/index.js';
+export * from './primitives/index.js';
+export * from './json/index.js';
+export * from './markdown/index.js';
+export * from './count/index.js';
+export * from './table/index.js';
+export * from './tiles/index.js';
+export * from './lanes/index.js';
+export * from './charts/index.js';
+export * from './checks/index.js';
+export * from './matrix/index.js';
+export * from './graph/index.js';
+export * from './core/frame.js';
+export * from './transcript/index.js';

package/src/json/index.ts

@@ -0,0 +1,2 @@
+// `@contraagent/elements/json-tree`: the class; `…/json-tree/define` registers it.
+export * from './json-tree.js';

package/src/json/json-tree.ts

@@ -0,0 +1,49 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { base, prose } from '../styles/index.js';
+
+const isLeaf = (x: unknown): boolean =>
+  x === null || typeof x !== 'object' || (Array.isArray(x) ? !x.length : !Object.keys(x).length);
+
+/**
+ * Any JSON value as a foldable tree: the first level open, deeper levels folded.
+ *
+ * @tagname cae-json-tree
+ * @csspart tree - the tree
+ */
+export class CaeJsonTree extends LitElement {
+  static override styles = [base, prose];
+
+  @property({ attribute: false }) value: unknown;
+  /** Levels opened from the start. */
+  @property({ type: Number }) open = 1;
+
+  override render() {
+    return html`<div class="jtree" part="tree" data-scroll="x">${this.node(this.value, 0)}</div>`;
+  }
+
+  private node(v: unknown, depth: number): TemplateResult | string {
+    if (v === null || typeof v !== 'object') {
+      return html`<span class=${typeof v === 'string' ? 'js' : 'jn'}>${JSON.stringify(v) ?? 'undefined'}</span>`;
+    }
+    const entries: [string | number, unknown][] = Array.isArray(v) ? v.map((x, i) => [i, x]) : Object.entries(v);
+    if (!entries.length) return Array.isArray(v) ? '[]' : '{}';
+    return html`${entries.map(([k, x]) =>
+      isLeaf(x)
+        ? html`<div class="jt"><span class="jk">${k}</span>: ${this.node(x, depth + 1)}</div>`
+        : html`<details class="jt" ?open=${depth < this.open}>
+            <summary>
+              <span class="jk">${k}</span>
+              <span class="meta">${Array.isArray(x) ? `[${x.length}]` : `{${Object.keys(x as object).length}}`}</span>
+            </summary>
+            ${this.node(x, depth + 1)}
+          </details>`,
+    )}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cae-json-tree': CaeJsonTree;
+  }
+}

package/src/lanes/index.ts

@@ -0,0 +1,6 @@
+// Bars on a time axis: `@contraagent/elements/lanes`. `CaeLanes` is registered
+// by `@contraagent/elements/lanes/define`.
+export * from './types.js';
+export * from './stack.js';
+export * from './styles.js';
+export * from './lanes.js';