import { FlowWeightedEdge } from "@elabs-ai/components-flow";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-flowPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui FlowWeightedEdge component (from @elabs-ai/components-flow) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look FlowWeightedEdge up before writing code: `npx -y @elabs-ai/components-cli docs FlowWeightedEdge` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-flow is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-flow` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-flow`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Examples
Weighted With Labels
Weighted edges that also carry an `EdgeLabelPill` (frequency + duration). Tab to reach a pill. Also run through `withWeightedEdgeAria` (#285) — the pill stays a separate tab stop with its own name, but the edge's own accessible name now states its weight too (deliberately heard twice: they are two different objects on the accessibility tree).
Colour Ramp
`data.value` + `data.valueDomain` interpolate stroke colour from `--flow-edge-weak` to `--flow-edge-strong`. Every edge shares the same `weight: 4` — before #285, that uniform weight (and the colour ramp) never reached assistive technology; `withWeightedEdgeAria` now names both.
Ten Edges Mixed
Ten edges, weight 1..10 in one (default) scaleGroup — strokes must span exactly [1.5, 8]px, linear. Mixes in labels and a colour ramp on a few edges. Run through `withWeightedEdgeAria` (#285): all 10 announce their weight, the 2 that also carry `data.value` announce it too, and the 2 labelled edges (`min`/`max`) keep their pill's own accessible name unchanged alongside the edge's new one.
Edge names come from node titles, never ids
Contract lock for `edge-aria.ts`'s three naming clauses (#327) — NOT a visual demo (all three edges render identically; nothing here scales with weight). Each edge locks a distinct clause: - `e-composed` (clause 2) — weight only, name composed via `nameOf`. - `e-custom` (clause 1) — a caller-set `ariaLabel` always wins, even though the edge also carries `weight`/`value`. **Freebie, not a gap closed**: this path is already covered transitively (15 edges' worth, across `Weighted`/`WeightedWithLabels`/`TenEdgesMixed`) and by a stronger pure identity assertion (`edge-aria.test.ts`, "an explicit edge.ariaLabel always wins, untouched"). It rides along here only because the mount already has to happen for `e-bare`. - `e-bare` (clause 3 — THE LOCK) — carries none of `weight`/`value`/`label`/`secondaryLabel`, so `withWeightedEdgeAria` stamps nothing and the edge keeps whatever name React Flow's own `EdgeWrapper` gives it by default: `"Edge from <source> to <target>"`, interpolating the raw node ids. That string is produced entirely by `@xyflow/react`, not by this repo — see `edge-aria.ts:19-21`. **Why `nameOf` is load-bearing, not decoration.** Every node title below is lexically disjoint from its id (`n3` → "Third", `n4` → "Fourth"). That makes `"Edge from n3 to n4"` — the string this play function asserts for `e-bare` — UNPRODUCIBLE by this repo's own composer: `nameOf` can only ever emit display titles, never raw ids. So the only thing that could put that exact string in the DOM is React Flow itself. Without this, deleting the clause-3 early return in `edge-aria.ts` would make the seam compose `"Edge from n3 to n4"` from the raw ids too (no measures to append), and the assertion would stay green for the wrong reason — see #327's "Test to add" for the full trap. Do not "simplify" `nameOf` away.
Keyboard Focus
Keyboard focus (#286). Every edge is a real tab stop, so tabbing onto one has to change what is drawn. The indicator is compound — a neutral `--foreground` contour with the `--ring` band inside it — because `--ring` alone measures 1.30:1 against `--canvas` in the `light` theme and would be a non-indicator there. Selection is a separate state: this story needs none of it.