@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/flow/nodes/registry.tsx

@@ -0,0 +1,262 @@
+// Registry of built-in node kinds and the rules canvases need about nodes:
+// which component draws a kind, its size before measurement, where its ports
+// sit, whether two nodes may be connected, and its spoken name.
+//
+// Node data keys read by the built-in kinds:
+//   every kind   label?, description?
+//   generic      dynamicOutputs?: { id, label, tone? }[]
+//   agent        agentRef? (id in reference.agents)
+//   rule         ruleId? (id in reference.rules) | engine?: RuleEngineConfig
+//   note         text?, tone?            (size: node.size)
+//   group        name?, description?, tone?, expanded?, autoFit?  (size: node.size)
+//   datasource   sourceId, dialect?, table, selectedColumns?, filters?, limit?, readOnly?
+//   decision     DecisionConfig fields (input, options, provider, model, modelVersion …)
+
+import { humaniseKey, type RenderCatalog } from '../catalog/RenderCatalog'
+import { DecisionNode } from '../decision/DecisionNode'
+import type { DecisionConfig } from '../decision/types'
+import type { FlowNode, LayoutDirection, Size } from '../model/types'
+import { useOptionalFlowEditorStore } from '../state/editorState'
+import type { PortAnchor } from '../surface/types'
+import { AgentNode } from './AgentNode'
+import { DataSourceNode, type DataSourceConfig } from './DataSourceNode'
+import { GenericNode } from './GenericNode'
+import { CARD_WIDTHS, estimatedCardHeight, type CardDensity } from './GraphNodeCard'
+import { fitGroupToMembers, membersOf, minimumGroupSize, setGroupExpanded } from './groupLayout'
+import { GroupNode } from './GroupNode'
+import { NOTE_SIZE, NoteNode } from './NoteNode'
+import { portAnchorFor as anchorOf } from './ports'
+import { RuleNode } from './RuleNode'
+import type { FlowNodeComponent, FlowNodeProps, RuleEngineConfig } from './types'
+
+const str = (v: unknown): string | undefined => (typeof v === 'string' ? v : undefined)
+
+function AgentAdapter({ node, reference, density, locked, preview, selected, direction, onConfigure, onRemove }: FlowNodeProps) {
+  const ref = str(node.data.agentRef) ?? str(node.data.agentId)
+  const agent = reference?.agents?.find((a) => a.id === ref) ?? null
+  return (
+    <AgentNode
+      id={node.id}
+      agent={agent}
+      label={str(node.data.label) ?? 'Agent'}
+      density={density}
+      locked={locked}
+      preview={!!preview}
+      selected={!!selected}
+      direction={direction}
+      {...(onConfigure ? { onOpen: () => onConfigure(node.id) } : {})}
+      {...(onRemove ? { onRemove } : {})}
+    />
+  )
+}
+
+function RuleAdapter({ node, reference, density, locked, preview, selected, direction, onConfigure, onRemove, onToggleRule }: FlowNodeProps) {
+  const rule = reference?.rules?.find((r) => r.id === str(node.data.ruleId)) ?? null
+  const engine = (node.data.engine as RuleEngineConfig | undefined) ?? null
+  const label = str(node.data.label)
+  return (
+    <RuleNode
+      id={node.id}
+      rule={rule}
+      config={engine}
+      {...(label ? { label } : {})}
+      density={density}
+      locked={locked}
+      preview={!!preview}
+      selected={!!selected}
+      direction={direction}
+      {...(onConfigure ? { onOpen: () => onConfigure(node.id) } : {})}
+      {...(onToggleRule ? { onToggleEnabled: onToggleRule } : {})}
+      {...(onRemove ? { onRemove } : {})}
+    />
+  )
+}
+
+function NoteAdapter({ node, locked, preview, selected, onTextChange }: FlowNodeProps) {
+  const store = useOptionalFlowEditorStore()
+  const size = node.size ?? NOTE_SIZE
+  return (
+    <NoteNode
+      id={node.id}
+      text={str(node.data.text) ?? ''}
+      {...(str(node.data.tone) ? { tone: str(node.data.tone)! } : {})}
+      width={size.width}
+      height={size.height}
+      selected={!!selected}
+      locked={locked || !!preview}
+      onTextChange={(text) => {
+        if (onTextChange) return onTextChange(node.id, text)
+        if (!store) return
+        // One undo step per editing session.
+        store.actions.snapshot()
+        store.actions.setNodes((nodes) => nodes.map((n) => (n.id === node.id ? { ...n, data: { ...n.data, text } } : n)))
+      }}
+    />
+  )
+}
+
+function GroupAdapter({ node, locked, preview, selected, density, direction, onConfigure, onRemove, onToggleExpanded, onEnterFocus }: FlowNodeProps) {
+  const store = useOptionalFlowEditorStore()
+  const nodes = store?.getState().nodes ?? []
+  const toggle = (id: string) => {
+    if (onToggleExpanded) return onToggleExpanded(id)
+    if (!store || locked) return
+    const s = store.getState()
+    store.actions.snapshot()
+    const next = setGroupExpanded({ nodes: s.nodes, connectors: s.connectors }, id, node.data.expanded === false)
+    store.actions.setNodes(next.nodes)
+    store.actions.setConnectors(next.connectors)
+  }
+  const resize = (id: string, size: Size) => {
+    if (!store || locked) return
+    store.actions.snapshot()
+    store.actions.setNodes((all) => all.map((n) => (n.id === id ? { ...n, size, data: { ...n.data, autoFit: false } } : n)))
+  }
+  return (
+    <GroupNode
+      id={node.id}
+      {...(str(node.data.name) ?? str(node.data.label) ? { name: (str(node.data.name) ?? str(node.data.label))! } : {})}
+      {...(str(node.data.description) ? { description: str(node.data.description)! } : {})}
+      {...(str(node.data.tone) ? { tone: str(node.data.tone)! } : {})}
+      expanded={node.data.expanded !== false}
+      autoFit={node.data.autoFit !== false}
+      size={node.size ?? { width: 400, height: 280 }}
+      memberCount={membersOf(nodes, node.id).length}
+      minSize={minimumGroupSize(nodes, node.id)}
+      onToggleExpanded={toggle}
+      onResize={resize}
+      selected={!!selected}
+      locked={locked}
+      preview={!!preview}
+      density={density}
+      direction={direction}
+      {...(onConfigure ? { onConfigure } : {})}
+      {...(onRemove ? { onRemove } : {})}
+      {...(onEnterFocus ? { onEnterFocus } : {})}
+    />
+  )
+}
+
+function DataSourceAdapter({ node, reference, density, locked, preview, selected, direction, onConfigure, onRemove }: FlowNodeProps) {
+  const d = node.data
+  const config: DataSourceConfig | null = str(d.sourceId) && str(d.table) ? (d as unknown as DataSourceConfig) : null
+  const src = reference?.dataSources?.find((s) => s.id === str(d.sourceId))
+  const label = str(d.label)
+  return (
+    <DataSourceNode
+      id={node.id}
+      config={config}
+      {...(src ? { source: { name: src.name, ...(src.connected !== undefined ? { connected: src.connected } : {}) } } : {})}
+      dialects={reference?.dialects ?? []}
+      {...(label ? { label } : {})}
+      readOnly={d.readOnly === true || !!src?.sample}
+      density={density}
+      locked={locked}
+      preview={!!preview}
+      selected={!!selected}
+      direction={direction}
+      {...(onConfigure ? { onConfigure } : {})}
+      {...(onRemove ? { onRemove } : {})}
+    />
+  )
+}
+
+function DecisionAdapter({ node, reference, density, locked, preview, selected, direction, onConfigure, onRemove }: FlowNodeProps) {
+  const d = node.data as Partial<DecisionConfig>
+  const config: DecisionConfig | null = d.input && Array.isArray(d.options) ? ({ kind: 'decision', ...d } as DecisionConfig) : null
+  const result = reference?.decisionResults?.[node.id]
+  const label = str(node.data.label)
+  return (
+    <DecisionNode
+      id={node.id}
+      config={config}
+      {...(result ? { result } : {})}
+      {...(label ? { label } : {})}
+      density={density}
+      locked={locked}
+      preview={!!preview}
+      selected={!!selected}
+      direction={direction}
+      {...(onConfigure ? { onConfigure } : {})}
+      {...(onRemove ? { onRemove } : {})}
+    />
+  )
+}
+
+function GenericAdapter({ node, density, locked, preview, selected, direction, runStatus, onConfigure, onRemove, onDuplicate, onRename }: FlowNodeProps) {
+  return (
+    <GenericNode
+      id={node.id}
+      kind={node.kind}
+      {...(str(node.data.label) ? { label: str(node.data.label)! } : {})}
+      data={node.data}
+      density={density}
+      locked={locked}
+      preview={!!preview}
+      selected={!!selected}
+      direction={direction}
+      {...(runStatus ? { runStatus } : {})}
+      {...(onConfigure ? { onConfigure } : {})}
+      {...(onRemove ? { onRemove } : {})}
+      {...(onDuplicate ? { onDuplicate } : {})}
+      {...(onRename ? { onRename } : {})}
+    />
+  )
+}
+
+export const builtInNodeComponents: Record<string, FlowNodeComponent> = {
+  agent: AgentAdapter,
+  rule: RuleAdapter,
+  note: NoteAdapter,
+  group: GroupAdapter,
+  datasource: DataSourceAdapter,
+  decision: DecisionAdapter,
+}
+
+/** Component for a kind: host extras, then built-ins, then the catalog-driven generic node. */
+export function nodeComponentFor(kind: string, extra?: Record<string, FlowNodeComponent>): FlowNodeComponent {
+  return extra?.[kind] ?? builtInNodeComponents[kind] ?? GenericAdapter
+}
+
+/** Size to lay a node out with before it is measured. */
+export function declaredNodeSize(node: FlowNode, density: CardDensity): Size {
+  if (node.kind === 'note') return node.size ?? { ...NOTE_SIZE }
+  if (node.kind === 'group') {
+    if (node.data.expanded === false) return { width: CARD_WIDTHS.standard, height: estimatedCardHeight(density, false) }
+    return node.size ?? { width: 400, height: 280 }
+  }
+  const wide = node.kind === 'agent' || node.kind === 'decision'
+  return node.size ?? { width: wide ? CARD_WIDTHS.wide : CARD_WIDTHS.standard, height: estimatedCardHeight(density, density === 'detailed') }
+}
+
+/** Where a connector touches a node (logical side, 0..1 along it). */
+export function portAnchorFor(node: FlowNode, portId: string | undefined, role: 'source' | 'target', direction: LayoutDirection, catalog: Pick<RenderCatalog, 'ports'>): PortAnchor {
+  return anchorOf(node, portId, role, direction, catalog)
+}
+
+const NEVER_SOURCE = new Set(['end', 'answer', 'rule', 'note'])
+const NEVER_TARGET = new Set(['start', 'trigger', 'note'])
+
+/**
+ * Connection rules: no self-connection; notes never connect; a start node is
+ * never a target; end and answer nodes are never sources; a rule node is never
+ * a source; an iteration-start node accepts input only from its iteration.
+ */
+export function canConnect(source: FlowNode, target: FlowNode, _sourcePort?: string, _targetPort?: string): boolean {
+  if (source.id === target.id) return false
+  if (NEVER_SOURCE.has(source.kind) || NEVER_TARGET.has(target.kind)) return false
+  if (target.kind === 'iteration-start') {
+    const owner = str(target.data.iterationId) ?? target.parentId
+    return source.kind === 'iteration' && (!owner || owner === source.id)
+  }
+  return true
+}
+
+/** "Kind: label" for lists, announcements and search. */
+export function nodeAccessibleName(node: FlowNode, catalog: Pick<RenderCatalog, 'entry'>): string {
+  const kind = catalog.entry(node.kind)?.label ?? humaniseKey(node.kind)
+  const title = str(node.data.label) ?? str(node.data.name) ?? (node.kind === 'note' ? str(node.data.text)?.split(/\s+/).slice(0, 6).join(' ') : undefined)
+  return title ? `${kind}: ${title}` : kind
+}
+
+export { fitGroupToMembers }

package/src/flow/nodes/sourceMarks.tsx

@@ -0,0 +1,52 @@
+// Source marks: optional product marks a host registers per dialect (from an
+// openly licensed set or assets it holds a licence for). The library ships
+// none; without a mark the neutral database glyph is shown. Marks are always
+// decorative: the dialect name is written as text next to them.
+// Stand-in for the wave-4 ThirdPartyMarkSlot until the design system has it.
+
+import { useState, useSyncExternalStore } from 'react'
+import { Database } from 'lucide-react'
+
+export interface SourceMark {
+  /** Image address (SVG or raster). */
+  src: string
+  /** Licence note for the host's notices (not shown). */
+  licence?: string
+}
+
+let marks = new Map<string, SourceMark>()
+const listeners = new Set<() => void>()
+let version = 0
+
+/** Registers marks by dialect key (lower case). Later calls replace earlier ones. */
+export function registerSourceMarks(map: Record<string, SourceMark>): void {
+  marks = new Map([...marks, ...Object.entries(map).map(([k, v]) => [k.toLowerCase(), v] as const)])
+  version++
+  for (const l of listeners) l()
+}
+
+export function clearSourceMarks(): void {
+  marks = new Map()
+  version++
+  for (const l of listeners) l()
+}
+
+export function sourceMarkFor(dialect: string | undefined): SourceMark | undefined {
+  return dialect ? marks.get(dialect.toLowerCase()) : undefined
+}
+
+const subscribe = (l: () => void) => {
+  listeners.add(l)
+  return () => listeners.delete(l)
+}
+
+/** The mark for a dialect, or the neutral glyph; aria-hidden in both cases. */
+export function SourceMarkSlot({ dialect }: { dialect?: string }) {
+  useSyncExternalStore(subscribe, () => version, () => version)
+  const mark = sourceMarkFor(dialect)
+  const [failed, setFailed] = useState<string | null>(null)
+  if (mark && failed !== mark.src) {
+    return <img className="ty-source-mark" src={mark.src} alt="" aria-hidden="true" data-mark="registered" onError={() => setFailed(mark.src)} />
+  }
+  return <Database className="ty-source-mark" aria-hidden="true" focusable="false" data-mark="fallback" />
+}

package/src/flow/nodes/types.ts

@@ -0,0 +1,85 @@
+// Contract between node components and the canvases that draw them (the flow
+// editor and the read-only preview). Node data lives in `FlowNode.data`; the
+// keys each built-in kind reads are listed in registry.tsx.
+
+import type { ComponentType } from 'react'
+import type { DecisionResult } from '../decision/types'
+import type { FlowNode, LayoutDirection, RunStatus } from '../model/types'
+import type { CardDensity } from './GraphNodeCard'
+
+/** A saved agent as the canvas shows it. */
+export interface AgentSummary {
+  id: string
+  name: string
+  role?: string
+  /** Image address; when it fails the generated mark is shown. */
+  avatar?: string
+  /** Full model identifier (for example "provider/family-2025-06"). */
+  modelId?: string
+  provider?: string
+}
+
+/** Adjustment a stored rule applies. */
+export interface RuleAdjustment {
+  type: 'percent' | 'fixed' | 'formula'
+  value?: number
+}
+
+/** A saved rule attached to a rule step. */
+export interface StoredRule {
+  id: string
+  name: string
+  adjustment?: RuleAdjustment
+  priority?: number
+  categories?: string[]
+  enabled: boolean
+}
+
+/** An inline rule-engine step (no saved rule). */
+export interface RuleEngineConfig {
+  label?: string
+  contextVariables?: string[]
+  outputVariable?: string
+}
+
+/** A connection that data-source nodes read from. */
+export interface DataSourceSummary {
+  id: string
+  name: string
+  dialect?: string
+  connected?: boolean
+  /** Read-only sample source. */
+  sample?: boolean
+}
+
+export interface FlowReferenceData {
+  agents?: AgentSummary[]
+  rules?: StoredRule[]
+  dataSources?: DataSourceSummary[]
+  dialects?: { key: string; displayName: string }[]
+  /** Decision outcomes by node id (from the live or inspected run). */
+  decisionResults?: Record<string, DecisionResult>
+}
+
+export interface FlowNodeProps {
+  node: FlowNode
+  density: CardDensity
+  direction: LayoutDirection
+  locked: boolean
+  /** Read-only picture: no toolbars, no remove, decorative ports. */
+  preview?: boolean
+  selected?: boolean
+  /** Status mark of a read-only preview; 'unknown' reads as "not run". */
+  runStatus?: RunStatus
+  onConfigure?(id: string): void
+  onRemove?(id: string): void
+  onDuplicate?(id: string): void
+  onRename?(id: string, label: string): void
+  onTextChange?(id: string, text: string): void
+  onToggleExpanded?(id: string): void
+  onEnterFocus?(id: string): void
+  onToggleRule?(rule: StoredRule): void
+  reference?: FlowReferenceData
+}
+
+export type FlowNodeComponent = ComponentType<FlowNodeProps>

package/src/flow/provenance/EditionCompare.tsx

@@ -0,0 +1,292 @@
+// EditionCompare ("Comparar edições"): what changed between two frozen
+// editions, item by item. Each change carries an icon, a word and a line
+// style, so the kind of change never rests on colour.
+
+import { useMemo, useState } from 'react'
+import { Share2 } from 'lucide-react'
+import { Button } from '../../index'
+import { ActorMark } from './ProvenanceNode'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import { useControllable } from '../internal/useControllable'
+import type { EditionChange, EditionComparison } from './proofTypes'
+
+export type EditionFilter = 'all' | EditionChange
+
+export interface EditionCompareLabels {
+  title: string
+  summary: string
+  filter: string
+  all: string
+  item: string
+  valueIn: string
+  change: string
+  who: string
+  notPresent: string
+  unknownActor: string
+  noRows: string
+  selected: string
+  before: string
+  after: string
+  pickRow: string
+  changes: Record<EditionChange, string>
+  counts: Record<EditionChange, string>
+  /** Words under the big numbers ("values altered"). */
+  stats: Record<EditionChange | 'hashes', string>
+  valueHead: string
+  openInGraph: string
+  requestReview: string
+}
+
+export const editionCompareLabels = defineLabels<EditionCompareLabels>('EditionCompare', {
+  en: {
+    title: 'Compare editions',
+    summary: '{a} compared with {b}',
+    filter: 'Show',
+    all: 'All',
+    item: 'Item',
+    valueIn: 'Value in {edition}',
+    change: 'Change',
+    who: 'Who',
+    notPresent: 'not present',
+    unknownActor: 'not recorded',
+    noRows: 'No change of this kind between the two editions.',
+    selected: 'Selected change',
+    before: 'Before · {edition}',
+    after: 'After · {edition}',
+    pickRow: 'Choose a row to compare its values side by side.',
+    stats: { altered: 'values altered', new: 'new records', removed: 'removed', hashes: 'divergent hashes' },
+    valueHead: '{edition}',
+    openInGraph: 'See in the graph',
+    requestReview: 'Ask for a review',
+    changes: { altered: 'altered', new: 'new', removed: 'removed' },
+    counts: {
+      altered: '{n, plural, =0 {nothing altered} one {# altered} other {# altered}}',
+      new: '{n, plural, =0 {nothing new} one {# new} other {# new}}',
+      removed: '{n, plural, =0 {nothing removed} one {# removed} other {# removed}}',
+    },
+  },
+  'pt-BR': {
+    title: 'Comparar edições',
+    summary: '{a} comparada com {b}',
+    filter: 'Mostrar',
+    all: 'Todas',
+    item: 'Item',
+    valueIn: 'Valor em {edition}',
+    change: 'Mudança',
+    who: 'Quem',
+    notPresent: 'não consta',
+    unknownActor: 'não registrado',
+    noRows: 'Nenhuma mudança deste tipo entre as duas edições.',
+    selected: 'Mudança selecionada',
+    before: 'Antes · {edition}',
+    after: 'Depois · {edition}',
+    pickRow: 'Escolha uma linha para comparar os valores lado a lado.',
+    stats: { altered: 'valores alterados', new: 'registros novos', removed: 'removidos', hashes: 'hashes divergentes' },
+    valueHead: '{edition}',
+    openInGraph: 'Ver no grafo',
+    requestReview: 'Pedir revisão',
+    changes: { altered: 'alterado', new: 'novo', removed: 'removido' },
+    counts: {
+      altered: '{n, plural, =0 {nenhum alterado} one {# alterado} other {# alterados}}',
+      new: '{n, plural, =0 {nenhum novo} one {# novo} other {# novos}}',
+      removed: '{n, plural, =0 {nenhum removido} one {# removido} other {# removidos}}',
+    },
+  },
+  es: {
+    title: 'Comparar ediciones',
+    summary: '{a} comparada con {b}',
+    filter: 'Mostrar',
+    all: 'Todos',
+    item: 'Elemento',
+    valueIn: 'Valor en {edition}',
+    change: 'Cambio',
+    who: 'Quién',
+    notPresent: 'no consta',
+    unknownActor: 'no registrado',
+    noRows: 'No hay cambios de este tipo entre las dos ediciones.',
+    selected: 'Cambio seleccionado',
+    before: 'Antes · {edition}',
+    after: 'Después · {edition}',
+    pickRow: 'Elija una fila para comparar sus valores lado a lado.',
+    stats: { altered: 'valores modificados', new: 'registros nuevos', removed: 'eliminados', hashes: 'hashes divergentes' },
+    valueHead: '{edition}',
+    openInGraph: 'Ver en el grafo',
+    requestReview: 'Pedir revisión',
+    changes: { altered: 'modificado', new: 'nuevo', removed: 'eliminado' },
+    counts: {
+      altered: '{n, plural, =0 {ninguno modificado} one {# modificado} other {# modificados}}',
+      new: '{n, plural, =0 {ninguno nuevo} one {# nuevo} other {# nuevos}}',
+      removed: '{n, plural, =0 {ninguno eliminado} one {# eliminado} other {# eliminados}}',
+    },
+  },
+})
+
+export const defaultEditionCompareLabels = editionCompareLabels.bundles.en
+
+export interface EditionCompareProps {
+  comparison: EditionComparison
+  /** Controlled change filter. */
+  filter?: EditionFilter
+  defaultFilter?: EditionFilter
+  onFilterChange?: (f: EditionFilter) => void
+  selectedItemId?: string | null
+  /** Row selected at first when the selection is not controlled. */
+  defaultSelectedItemId?: string | null
+  onSelectItem?: (itemId: string) => void
+  /** "See in the graph" on the selected change. */
+  onOpenInGraph?: (itemId: string) => void
+  /** "Ask for a review" on the selected change. */
+  onRequestReview?: (itemId: string) => void
+  labels?: Partial<EditionCompareLabels>
+  className?: string
+}
+
+const KINDS: EditionChange[] = ['altered', 'new', 'removed']
+
+export function EditionCompare({ comparison, filter, defaultFilter = 'all', onFilterChange, selectedItemId, defaultSelectedItemId = null, onSelectItem, onOpenInGraph, onRequestReview, labels, className }: EditionCompareProps) {
+  const [ownSelected, setOwnSelected] = useState<string | null>(defaultSelectedItemId)
+  const selectedId = selectedItemId !== undefined ? selectedItemId : ownSelected
+  const select = (id: string) => {
+    setOwnSelected(id)
+    onSelectItem?.(id)
+  }
+  const l = useLabels(editionCompareLabels, labels)
+  const { locale } = useFlowLocale()
+  const [shown, setShown] = useControllable<EditionFilter>(filter, defaultFilter, onFilterChange)
+  const counts = useMemo(() => {
+    const c: Record<EditionChange, number> = { altered: 0, new: 0, removed: 0 }
+    for (const r of comparison.rows) c[r.change]++
+    return c
+  }, [comparison.rows])
+  const rows = shown === 'all' ? comparison.rows : comparison.rows.filter((r) => r.change === shown)
+  const { a, b } = comparison
+  const current = selectedId ? (comparison.rows.find((r) => r.itemId === selectedId) ?? null) : null
+
+  const value = (v: string | undefined) =>
+    v === undefined ? (
+      <span className="ty-diff__absent">{l.notPresent}</span>
+    ) : (
+      <code className="ty-diff__value" dir="ltr">
+        {v}
+      </code>
+    )
+
+  const swatch = (k: EditionChange) => (
+    <span className="ty-diff__change" data-change={k}>
+      <span className="ty-diff__swatch" aria-hidden="true" />
+      <span>{l.changes[k]}</span>
+    </span>
+  )
+  const num = (n: number) => new Intl.NumberFormat(locale).format(n)
+
+  return (
+    <section className={['ty-diff', className].filter(Boolean).join(' ')} aria-label={l.title}>
+      <p className="ty-visually-hidden">{fill(l.summary, { a: a.label, b: b.label }, locale)}</p>
+      <div className="ty-diff__stats" role="group" aria-label={l.filter}>
+        {KINDS.map((k) => (
+          <button
+            key={k}
+            type="button"
+            className="ty-diff__stat"
+            data-change={k}
+            aria-pressed={shown === k}
+            aria-label={fill(l.counts[k], { n: counts[k] }, locale)}
+            onClick={() => setShown(shown === k ? 'all' : k)}
+          >
+            <span className="ty-diff__stat-number" aria-hidden="true">
+              {num(counts[k])}
+            </span>
+            <span className="ty-diff__stat-word" aria-hidden="true">
+              {l.stats[k]}
+            </span>
+          </button>
+        ))}
+        {comparison.divergentHashes !== undefined ? (
+          <div className="ty-diff__stat" data-static="true">
+            <span className="ty-diff__stat-number">{typeof comparison.divergentHashes === 'number' ? num(comparison.divergentHashes) : comparison.divergentHashes}</span>
+            <span className="ty-diff__stat-word">{l.stats.hashes}</span>
+          </div>
+        ) : null}
+      </div>
+      {rows.length ? (
+        <div className="ty-diff__scroll" role="region" aria-label={fill(l.summary, { a: a.label, b: b.label }, locale)} tabIndex={0}>
+          <table className="ty-diff__table">
+            <thead>
+              <tr>
+                <th scope="col">{l.item}</th>
+                <th scope="col">
+                  <span className="ty-visually-hidden">{fill(l.valueIn, { edition: a.label }, locale)}</span>
+                  <span aria-hidden="true">{a.label}</span>
+                </th>
+                <th scope="col">
+                  <span className="ty-visually-hidden">{fill(l.valueIn, { edition: b.label }, locale)}</span>
+                  <span aria-hidden="true">{b.label}</span>
+                </th>
+                <th scope="col">{l.change}</th>
+                <th scope="col">{l.who}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((r) => (
+                <tr key={r.itemId} data-change={r.change} data-selected={selectedId === r.itemId || undefined} onClick={() => select(r.itemId)}>
+                  <th scope="row" className="ty-diff__item">
+                    <button
+                      type="button"
+                      className="ty-diff__pick"
+                      aria-pressed={selectedId === r.itemId}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        select(r.itemId)
+                      }}
+                    >
+                      {r.label}
+                    </button>
+                  </th>
+                  <td>{value(r.a)}</td>
+                  <td>{value(r.b)}</td>
+                  <td>{swatch(r.change)}</td>
+                  <td>{r.who ? <ActorMark actor={r.who} /> : <span className="ty-diff__absent">{l.unknownActor}</span>}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <p className="ty-diff__empty">{l.noRows}</p>
+      )}
+      <h3 className="ty-diff__eyebrow">{l.selected}</h3>
+      <div className="ty-diff__cards" aria-label={l.selected} role="group" aria-live="polite">
+        {current ? (
+          (['a', 'b'] as const).map((side) => {
+            const note = side === 'a' ? current.aNote : current.bNote
+            return (
+              <article key={side} className="ty-diff__card" data-side={side} data-change={current.change}>
+                <p className="ty-diff__card-edition">{fill(side === 'a' ? l.before : l.after, { edition: side === 'a' ? a.label : b.label }, locale)}</p>
+                <p className="ty-diff__card-value">
+                  <span className="ty-diff__card-label">{current.label}</span> = {value(current[side])}
+                </p>
+                {note ? <p className="ty-diff__card-note">{note}</p> : null}
+                {side === 'b' && (onOpenInGraph || onRequestReview) ? (
+                  <div className="ty-diff__card-actions">
+                    {onOpenInGraph ? (
+                      <Button variant="secondary" leadingIcon={<Share2 />} onPress={() => onOpenInGraph(current.itemId)}>
+                        {l.openInGraph}
+                      </Button>
+                    ) : null}
+                    {onRequestReview ? (
+                      <Button variant="quiet" onPress={() => onRequestReview(current.itemId)}>
+                        {l.requestReview}
+                      </Button>
+                    ) : null}
+                  </div>
+                ) : null}
+              </article>
+            )
+          })
+        ) : (
+          <p className="ty-diff__empty">{l.pickRow}</p>
+        )}
+      </div>
+    </section>
+  )
+}