← Gyrum Canon

Components

Atoms · molecules · organisms · templates · pages.

The catalog below lists the primitives canon's chrome imports today — Lit web components vendored from @gyrum-labs/components, in maintenance per ADR-182. New canon-tier primitives author as Svelte 5 source under @gyrum-labs/svelte. Click a row to see the live render + the prop space. Every page on canon.gyrum.ai is itself rendered with these primitives — what you see is what you ship. The Guides page covers the atomic-design tier definitions and composition rules; the Application library tracks canon-tier organisms still living in product code, pending promotion to gyrum-ui per warp#2278 Phase 4.

Atoms

Single-purpose primitives — buttons, badges, dots, type-set headings. No application data; compose only via slot/prop.

action-button gy-action-button · 4 variants
Irreversible-action primitive that wraps gy-button with a two-state click ramp so deploy/rollback/delete operations require explicit…
Delete cluster
badge gy-badge · 5 variants
Inline status pill used for labels, counts, and state tags; variant drives colour via status tokens and pill toggles rounded corners.
running
button gy-button · 4 variants
Base action primitive of the gyrum design system; variant and size drive the visual contract, disabled and loading drive behaviour.
Ship it
dot gy-dot
Small circular status indicator used inline next to list-row names to telegraph state like CI green/yellow/red or drift fresh/stale.
empty-state gy-empty-state
Consistent muted italic nothing-here treatment used across kanban columns, lists, and other no-data surfaces so consumers do not reinvent…
No items yet.
form gy-form · 2 variants
Form host primitive that wraps a native form and re-emits submit and reset as framework-agnostic gy-submit and gy-reset custom events.
Save
form-field gy-form-field
Labelled wrapper around a slotted form control that owns the label, description, error, and required indicator presentation.
page-hero gy-page-hero
Layout primitive wrapping the top band of a page with a reduced-motion-aware fade-up animation. Slot for heading + lede.

Welcome

Lede paragraph.

section-h gy-section-h
Section header atom rendering an uppercase tracked heading optionally paired with a smaller secondary caption to its right.

Velocity

PRs merged · last 14 days
select gy-select
Token-aware wrapper around the native select primitive that owns the visual contract while letting the browser keep the listbox and…
sparkline gy-sparkline
Small SVG line-chart for at-a-glance trends rendering a single-stroke path over a soft gradient fill with no axes, labels, or grid.

Molecules

A few atoms combined for one job — kpi-card, list-row, hero. Composes atoms only; still data-shape-agnostic.

anomaly gy-anomaly
Informational list-row primitive that renders a muted alert glyph followed by linked text for FYI unusual-signal rows.
distill PR throughput is 60% below 14-day median (2 vs ~5).
cost-bar gy-cost-bar
Horizontal cost-vs-value bar with two stacked rows that reads at a glance as spend on these things versus output from these things.
handoff gy-handoff
Now-waiting-on-you indicator row showing who handed work over, the verb, how long ago, and an urgency-tinted chip.
hero gy-hero
Actionable-first page hero band composed of an eyebrow label, heading slot, and optional lead paragraph slot.

3 things need you today.

Mainline is healthy. Two open items would unblock the distill release.

kpi-card gy-kpi-card
Count-plus-label tile used across KPI rows with mode-driven tokens and optional size, threshold, trend, and inline sparkline slot.
list-row gy-list-row
Anchor-row primitive with a bold name on the left and secondary metadata on the right, distinct from card and todo shapes.
gyrum-labs/warp 4 PRs · last deploy 4h ago
risk-pyramid gy-risk-pyramid
Layered severity-tier visualisation with P0 at the apex and each subsequent tier widening to the base for structural debt and SLO…
timeline gy-timeline
Vertical event-feed primitive for incident, deploy, and audit surfaces that need a tight scannable list of timestamped events.
todo gy-todo
Actionable list-row with a checkbox affordance, a tiny priority chip, and linked todo text; consumer holds the canonical done state.
Review gyrum-labs/warp PR #220 — 1d old, blocking the distill release.
trust-meter gy-trust-meter
Actor calibration display rendering an actor name, three stacked accept/override/revert bars, and an overall trust-score chip.

Organisms

Self-contained sections of UI — pulse-grid, runtime-band. May handle one named data shape; composes molecules + atoms.

Templates

Page-level layouts with locked geometry and named slots — overview, rail. Owns the chrome so consumers cannot drift from token-defined gutters or gaps.

Pages

Fully-realised compositions with sample data — the reference shape for each surface. Scaffold lands under warp#2512; concrete primitives follow under warp#2521.