@trembus/viz

Trembus Tier-2 node-link visualizations — Tree (strict hierarchy via d3-hierarchy), Lineage (directed graph / DAG via @dagrejs/dagre), SystemMap (nested drill-down C4 / architecture map), ClassDiagram (UML class diagram with typed relationship arrowheads), and Strata (concentric first-principles strata — bedrock axioms innermost, principles layer outward by dependency; dangling restsOn references auto-materialize dashed gap arcs, undiscovered supports surfaced as discovery opportunities), and TalentTree (a game skill-tree — a prerequisite DAG of multi-rank talents with tier gates and a full points-budget allocation engine; lead job afford-action), and Nebula (a 3D concept map — items placed by RELATEDNESS rather than joined by edges, laid out deterministically with classical MDS over the link weights, rotatable by drag or keyboard, with the selected item's nearest neighbours read out for screen readers). The same "3 UI jobs" contract spine as @trembus/ui's Tier-1 viz, with a layout engine. Depends on @trembus/tokens only — never on @trembus/ui.

🔭 Browse the Tier-2 gallery in the live Storybook →

pnpm add @trembus/viz react react-dom

react / react-dom are peer dependencies (React 19).

Use

import { Tree } from '@trembus/viz';
import '@trembus/viz/styles.css';

<div className="tcl-root" data-theme="dark">
  <Tree data={orgChart} />
</div>;

Each datum is a real focusable control with an accessible name, driven by controlled/uncontrolled selectedId (+ defaultSelectedId + onSelect), with an aria-live inspector — the decorative SVG edges stay aria-hidden.

License

MIT © Nicholas Osto · source & contributing