12-cell composable bento layout with 4 size variants and per-cell accent tinting on the top hairline. Hover lift in Vivid/Editorial; static in Quiet/Industrial.

Overflow-aware breadcrumb with ResizeObserver-driven truncation. First and last crumbs always shown; middle crumbs collapse into a popover when the trail doesn't fit. Industrial swaps the chevron for a slash and forces mono caps.

Multi-series timeseries chart with drag-to-select range and hover crosshair. Three default colours map to --mt-accent / --mt-accent-2 / --mt-accent-3.

Full-featured ⌘K palette with sections, recents, kbd hints, AI hint pill, footer. Distinct from mt-command — that's the cmdk primitive.

Destructive-action confirmation built on the native <dialog> element (free focus trap + Escape + inert background). Four severity levels. Optional 'type this phrase to confirm' field for critical actions. Honors prefers-reduced-motion.

Soft radial blur that lerps toward the cursor. Reads --mt-soft-accent for its color so it adapts to the active mood.

Canvas-based cursor particle trail with screen blend mode. Respects prefers-reduced-motion.

Rich dropdown menu — icons, kbd hints, separators, labels, sub-menus, checked items, destructive items. CSS Anchor Positioning where supported (Chromium 125+), JS-anchored fallback elsewhere. Keyboard-first.

Mood-aware empty state with a real SVG illustration per mood — orbital in Vivid, blueprint grid in Quiet, drop-cap in Editorial, technical stencil in Industrial. Honors prefers-reduced-motion.

Friendly error surface for React error boundaries and 500-style fallbacks. Severity strip + icon + try-again/report buttons. Diagnostic detail collapses behind a disclosure with a copy-stack button.

Animated rounded pill chip with a conic-gradient sweep around the border. Status (lime/amber/rose/cyan), brand, and mono variants. Sweep auto-disables in Industrial.

Image with a tasteful shimmer skeleton while loading and a graceful broken-image fallback. Crossfades on load; stable dimensions via aspect-ratio so layout doesn't jump. Honors prefers-reduced-motion.

Keyboard-navigable entitlement matrix. Click a cell to edit the seat count; Tab/Shift+Tab/Enter/Escape behaviors. Live total bar at the bottom.

Loading overlay with three variants (container / scrim / inline). 250ms appear-delay to avoid flash on fast operations. Mood-aware spinner: gradient arc in Vivid, clean arc in Quiet, serif italic 'loading…' in Editorial, stepped mono blocks in Industrial.

Button that pulls toward the cursor when within ~80px. Cyan accent + glow. Cubic-bezier spring easing.

Looping horizontal marquee with edge fade and pause-on-hover. Half-speed in Industrial. Honors prefers-reduced-motion.

Segmented control with a sliding active-pill indicator (FLIP-style transform). Keyboard nav (Arrow / Home / End). Optional badges per segment. Industrial replaces the pill with a 2px black underline.

3D parallax card on mousemove (max ±4°) with a cursor-following gradient highlight. Glass surface, hairline border.

Checkbox primitive built on a real <input type=checkbox>. Three states (unchecked / checked / indeterminate) for select-all-rows headers, label + description block, three sizes (xs / sm / md), disabled state, and a destructive tone for destructive bulk actions. Indeterminate is set via the DOM property because HTML doesn't have a `indeterminate` attribute. AA-safe: every checkbox carries a visible label OR an aria-label and a glyph cue for state.

Searchable select primitive — input + filterable dropdown + selected pill. Single-select (default) and multi-select. Filter is substring over a label fallback; consumer can plug a custom filter function. Built on the popover primitive for positioning + outside-click + focus management. Keyboard navigation: arrow keys, Home/End, Enter to select, Esc to close. AA-safe: role=combobox + listbox + option, aria-activedescendant on the active option, aria-selected for picks. Use for control-picker, evidence-picker, owner-picker, and the SCTM filter bar's faceted dropdowns.

Centered modal dialog primitive on top of @radix-ui/react-dialog — focus trap, esc-to-close, portal mount, scroll lock, animated overlay all handled. Composable subcomponents: Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose. Complements mt-sheet (side drawer) — this one is the centered modal. Replaces every hand-rolled modal in the CMMC repo (AdjudicationBinModal, AttestationModal, BundleUploadModal, SmartMapperModal, etc.).

Keyboard shortcut display primitive — the small key-cap chip used in tooltips, menu items, and command palettes. Renders a sequence of keys (Cmd+K, Ctrl+Shift+P, /, Esc) as joined chips, auto-substituting platform glyphs (⌘ ⌥ ⇧ ⌃ on macOS; Ctrl Alt Shift on Win/Linux when explicitly requested). Three sizes (xs / sm / md), inline + block layouts. AA-safe: every chip is a real <kbd> element with the printable key as its accessible name.

shadcn-flavored Button with cyan-gradient + glow primary variant. CVA-powered. asChild supported via Radix Slot.

shadcn-flavored Card with the Vivid glass recipe: 1px hairline + top gradient highlight + backdrop blur + tone tinting.

Command palette with section grouping, fuzzy filter, and keyboard nav. Vivid backdrop, hairline border, mono hints. ⌘K-friendly.

Right-side drawer built on @radix-ui/react-dialog with the Vivid backdrop, hairline-bordered surface, and slide easing.

Popover primitive on @radix-ui/react-popover — outside-click + esc dismiss, focus management, collision-aware positioning, portal mount. Composable: Popover / PopoverTrigger / PopoverContent / PopoverArrow / PopoverClose. Three visual densities (compact / default / rich) for different content sizes. Pairs with citation-chip for inline reference hover, with status-badge for tone explanations, and as the host shell for the upcoming combobox.

Radio-group primitive built on a real <fieldset> + native <input type=radio> per option. Single-select by name attribute, full keyboard nav (arrow keys cycle), label + description per option. Two layouts (stacked default, inline for tight surfaces) and a card variant that turns each option into a rich tile (used by the closure-approval-flow's reviewer-decision picker). AA-safe — fieldset/legend semantics + each radio gets a real <label>.

CMMC role pill — the canonical 'who is this person?' chip used in headers, audit logs, signature blocks, and access listings. Variants for the fixed CMMC role enum: Admin / Compliance Officer / Assessor / Auditor / Owner / Subcontractor / Read-Only / Service Account. Three sizes (xs / sm / md). AA-safe — every role ships icon + uppercase mono label + bordered chip. Optional avatar prefix when paired with a name display.

Single-value select primitive built on @radix-ui/react-select — full keyboard navigation, typeahead, portal-mounted listbox, collision-aware positioning, scroll-area for long lists. Composable surface: Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator. Per-item icon slot, optional 'code' prefix for control-style picks (e.g. AC.L2-3.1.1), disabled items. Distinct from combobox (which is searchable) — use Select when the option set is short and the user picks one of N.

Loading placeholder primitive. Five shapes (text / heading / circle / box / row), three animations (pulse default · shimmer · none for users on prefers-reduced-motion). Each shape renders the right element with aria-busy + aria-live so the loading state is announced. Composable: line up text shapes to mock paragraph load; combine row + circle for list items. Replaces the 'Loading controls…' plaintext that appears in CMMC modals.

Single-source-of-truth pill for CMMC vocabulary. Variants: adjudication (met / not-met / na / open / in-progress / planned / blocked / superseded), elevator (the 5 CMMC met_via paths — direct-evidence / poam / enduring-exception / dod-cio / esp-inheritance), and risk (critical / high / moderate / low / informational). AA-safe: every tone ships an icon + uppercase mono label + bordered chip — color is never the only cue. Replaces inlined tone maps (FINDING_TONES, VIA_TONES) that get redeclared across pages.

Toggle primitive — the on/off switch used in settings panels, feature flags, and per-row enable/disable rows in admin lists. Wraps a real <input type=checkbox role=switch> so keyboard handling (Space + Enter) and form submission work for free. Three sizes (xs / sm / md), an optional inline label + description block, and a disabled state. AA-safe: the switch surface always pairs the on/off graphic with the visible label; aria-checked is always set.

Content tabs primitive on @radix-ui/react-tabs — keyboard nav (arrow + home/end), aria-selected/aria-controls plumbing, focus management. Distinct from tabs-segmented (which is a segmented control selector that returns a value); this one is the tab-and-panel pattern. Composable: Tabs / TabsList / TabsTrigger / TabsContent. Per-tab badge slot for counts. Three visual styles: underline (default), pill, segmented-card.

Toast notification stack — transient feedback (saved / failed / rejected / pointer registered) that doesn't interrupt the user. Mount one <Toaster /> at the app root; everywhere else call useToast() and dispatch via toast.success / .warning / .danger / .info. Auto-dismiss with hover-pause, manual dismiss, action slot per toast, configurable position. AA-safe — every toast ships icon + title + (optional) description and is announced via aria-live.

Overlay callout pins, curved SVG connectors, and mono-caps labels onto any image or component. Children pattern: declarative Annotation elements at (x,y) coordinates. Connectors draw in on scroll-into-view.

Before/after slider with a draggable divider. Each side gets its own subtree with its own data-mt-mood / data-mt-palette, so the same component renders in two configurations without bleed. Double-click snaps to 50%.

SVG turbulence over an animated linear gradient. Three motion variants. Mood-aware: Industrial freezes the motion, Quiet drops to slow. Reads --mt-accent / --mt-accent-2 / --mt-accent-3, so swapping palette swaps the surface live.

Cards that fade in and parallax-drift as they enter the viewport. Each card's depth prop scales the speed — back slowest, front fastest. Industrial disables parallax; cards still reveal.

4-up stat grid. Numbers tween 0 → final on scroll-into-view; sparklines draw in lockstep. Industrial uses linear easing + stepped sparkline; other moods spring + smooth curve.

Vertical timeline with scroll-driven draw-on of the rail line. Circle milestones (square in Industrial). Active milestone scales 1.02 when in viewport.

Audit-feed / activity-stream list. Fixed-height rows with status dot, mono timestamp, actor avatar, action text, target, and right-aligned metadata. Optional sticky group headers.

Production-grade data table on TanStack Table v8. Sticky header, sticky first column, multi-column sort, density modes (comfortable / compact / dense), row selection, pagination, empty + loading states. Tabular-nums on every numeric column.

Tablesaw filter bar. Multi-select dropdowns per facet, in-list search, removable selection chips, optional global search input. Active-facet underline per mood.

Compact KPI strip. Inline (with · separators) or card-row (auto-fit grid). Three densities. Tabular-nums everywhere; mono labels in caps.

Horizontal density strip showing event volume over time. Per-bucket bars (single or stacked-series), hover crosshair + tooltip, drag-to-select range, optional annotation lines.

One chip component, five variants. Status (mood-aware pulse), Metric (number + label), Kbd (keyboard hint), Tag (removable filter chip), Trend (number + direction + sparkline). Plus ChipRow wrapper for clean horizontal stacking.

One input, three variants. Text (leading icon, trailing kbd, clearable). Search (live result preview, ⌘K hint). Number (+/- steppers + scrubbable label, drag horizontally to change value).

The canonical 'this control was adjudicated' summary card. Renders the verdict (MET / NOT_MET / N/A) + the elevator path (direct evidence / POA&M / enduring exception / DoD CIO / ESP inheritance) + adjudicator + timestamp + evidence count, with a quoted rationale block and an actions slot (re-adjudicate, export, undo). Designed for the exported assessment package, the SCTM overview tab, and confirmation modals — anywhere the adjudication outcome itself is the headline.