← app v3.5 componentsshell screensfull gc design ref
gc-* kit · relay-app#468 · RCTX-396 extraction target for @relay/ui

Graph Primitives

The gc-* kit is the object vocabulary the Graph draws with — and the kit the Manifest home already borrows. Everything below renders with the shipped graph/graph.css (verbatim copy) and mirrors the graph/components.ts emitters. Interact with it: toggle types, select rows, copy Codes.

Shape alphabet — type is shape, never colour

Settled canvas alphabet (RCTX-499 decision): stream=circle · session=diamond · relay=rect · series=rounded-rect · resource=hexagon, each carrying its glyph so objects read as their kind at a glance. Wire vocabulary note: the stored type is still pulse for streams — display always says Stream.

Type-filter chips + the honest counter — live

Chips are independent and combinable (aria-pressed, count struck through when off). The counter describes what's drawn, never the corpus — toggle chips and watch it recount. When a cap drops nodes it must say N of M, never a bare total that reads as complete.

Segmented control · Code chip · status badge
Received open expiring

Code chips copy on click (brief "Copied" flip) and scramble-reveal on hover — the same egg as the canvas, behind prefers-reduced-motion. Selection grammar everywhere in the kit is tint + accent-text, never solid fill — solid teal fill is CTA grammar only.

List rows — the .gc-li ranked-twin anatomy (live)

The list twin of the canvas: glyph tile · title (relays lead with their Code) · owner · honest degree · compact time · status badge. Click a row to move aria-current (ring outline, tinted tile). Rows respect the type chips above — the filter loop is the exploration model. Manifest rows hide degree rather than fabricate a zero.

Edge grammar — dash arrays are law

The legend, the panel relation rows, and the canvas render the same dash arrays (relationStyle(), RCTX-665/667). Edges are never darker than the quietest node they touch. Direction flips the label, not the line: contains / in, continues / continued by, supersedes / superseded by.

Playground — compose a row

Live twin of components.listRow() — change the controls and read the exact markup the shipped emitter produces. Note claimed always displays as Received.

canon source: relay-app concepts/src/graph/components.ts + graph.css (verbatim copy in ui/graph.css) · synced 2026-07-18
deeper design reference: graph-components.html (the RCTX-396 class contract) · full page prototype: graph.html