a11y · brand theme: accent text <32px must use BRAND_ACCENT.text #00D0DE, never #00F0FF (OLED bloom rule); same split principle applies to lab volt when text-heavy

rule · class strings must be complete literals (Tailwind v4 JIT scanning)

rule · canvas/gradient call sites use accentHex(theme, accent), never a local hex map

rule · domain narrowing helpers (chromeAccent, vip bone) stay in their domains and consume this map

rule · MIGRATION refit item 7 (app accent sweep) LANDED 2026-06-13 (Wave 2b): the 4 app-local hex maps are gone — vip-accents deleted, landing/identity-theme trimmed to HERO_CTA, identity-accents trimmed to the chromeAccent/archetypeGlyph helpers; every accent consumer now reads accentHex(lab,·)/ACCENT_CLASSES from here (pinned to lab for byte-parity). No NEW app code may add another local accent map

rule · brand-skin cyan slot is deep azure #0EA5E9 (shifted from lab #29E6FF, which collides with the brand volt-slot #00F0FF ladder — Tim-ratified 2026-06-13)

used by · ds-internal: 23+ files across primitives/motion/patterns/igaming (SectionTag, MagneticButton, ContourField, GlowWash, NudgeShell, LedgerRow, OddsButton, MicroMarketCard, TierRung, …) · app-direct (Wave 2b accent sweep — local hex/class maps deleted, consumers now import accentHex(lab,·) + ACCENT_CLASSES straight from this api): identity (IdentityShiftScene), you (SkillCard, IdentityHeader, WarArts, VipBand, QuickStats, QuickNavCards), vip (VipHero, TierUpMoment), chrome (PlayerMenu, MobileMenu, MobileMenuFooter), join (SceneYours, SceneArrival), community (CrewCard, RaceBoard), ds/igaming (EngagementDock, OrbitalBar)

rule · class strings are complete literals (Tailwind v4 JIT scanning); compose page-specific spacing via cn(PAGE_CONTAINER, '...')

rule · PAGE_CONTAINER carries mx-auto w-full max-w-[1500px] px-5 md:px-8 — do not re-add mx-auto/w-full at the call site

rule · rails whose gutter lives on inner bleed-scroll children (LaneRail) use PAGE_MAX_W + md:px-8 on the container and keep px-5 md:px-0 on the children

rule · the VerticalHeroScene containerClassName default IS PAGE_CONTAINER; only pass an override for a deliberately non-standard gutter

used by · ds: VerticalHeroScene (default containerClassName) · app: app/sportsbook/page.tsx, components/sportsbook/{SportsbookHeader,LaneRail,LeagueChips,LiveRail,detail/MatchHero,detail/MatchDetail}, components/predictions/PredictionsHeader

rule · components import EASE/SPRING from here — no local ease arrays or spring literals after refit

rule · animate transform + opacity only (verified motion discipline)

rule · z-[NN] literals must match the Z ladder; MobileSlip scrim moves 64 → Z.sheet (74) in refit

used by · all motion call sites after refit

rule · drift-tested against globals.css via density-css.test.ts — every default + both override blocks + both @custom-variant lines must match densityToCssVars()

rule · comfortable is the SSR-safe default (mirrors today's player geometry); admin never reskins the player

rule · Exposure-Red is the ONLY sanctioned [data-domain][data-density] compound selector — in ultra-compact admin --color-hero swaps volt→blood so KPI/exposure surfaces consuming var(--color-hero) inherit it for free; no other compound data-attr selector may be added

rule · --color-hero is a NEW semantic alias added to BOTH lab+brand themes (defaults to the primary accent so it exists outside admin)

used by · ds/admin/DensityBoundary.tsx · app/globals.css ([data-density] blocks)

a11y · decorative by default (aria-hidden); meaning must come from adjacent text

rule · no other icon source is permitted — extend GlyphId instead

rule · bell/search/check added by MAKER-NOTIFS (Wave 3) — single-owner edit; MAKER-SEARCH/CHROME consume id strings without re-editing this file

used by · 60+ files

motion · capped magnetic pull (6/4px) · SPRING.snap return · glow shadow on hover

a11y · focus-visible: 2px accent outline, offset 3px; forced-colors: 3px Highlight outline

rule · honest affordance: no lean/hover answer when disabled

rule · pull is capped in px, never proportional (failed-attempts 2026-06-11)

rule · label renders CSS-uppercased — tests match case-insensitively

used by · 30 files — every CTA

used by · 57 files

a11y · tabular-nums + ligatures off on ALL financial data (old-DS §1.2/§4.5)

used by · 26 files

a11y · each box labeled "Code digit N"; auto-focus on mount

used by · SceneKey

motion · armed state goes blood; DWELL_MS.twoTapDisarm (4s) silence auto-disarms

rule · refit landed: arm/disarm state extracted to use-two-tap; the PlayerMenu sign-out row consumes the hook (no more re-implementation)

used by · settings · PlayerMenu SignOutRow (via use-two-tap)

rule · TwoTapButton is the canonical presentation; menu rows consume the hook so the timing contract never drifts

rule · draft until design-qa on the refit build — behavior is the shipped settings/PlayerMenu logic verbatim

used by · TwoTapButton · PlayerMenuRows (SignOutRow)

motion · DURATION.ring fill tween with EASE

a11y · role=progressbar with aria-valuenow unless purely decorative (countdown rings are aria-hidden, result announced via text)

rule · geometry lives in progress-geometry.ts (tested); track is var(--color-line), fill is theme-reactive accentVar

motion · SPRING.slowFill fill; always set explicit initial width (never animate from auto — failed-attempts)

a11y · role=progressbar with aria-valuenow unless decorative

rule · shimmer skin consumes the SHIMMER_SWEEP token recipe; fill always animates from explicit initial width 0

a11y · radiogroup semantics; selection carried by solid accent fill + aria-checked, never color alone; arrow keys step with wrap and move focus (roving tabindex); FOCUS_RING token

rule · step/wrap logic lives in chip-selection.ts (tested)

rule · chip rows keep individual chips <= 256px (cursor WRAP_MAX_W) so the wrap-ring treatment is deterministic at every viewport

a11y · FOCUS_RING token on interactive pills; interactive pills are buttons, badges are spans (never focusable); type from MICRO_LABEL.label

rule · CTAs stay magnetic-button; TradeButtons stays its own igaming pair

motion · SPRING.burst scatter + DURATION.burst opacity fade; cleans up on parent unmount

a11y · aria-hidden; purely decorative

rule · LOSS states never burst — celebration is for wins above wager only (anti-LDW)

rule · scatter math lives in burst-geometry.ts (tested, injectable rand)

rule · refit landed: founder/GoldBurst deleted and LevelUpOverlay's local Particles removed — both consume this

used by · ClaimSuccess · LevelUpOverlay

motion · layoutId pill slides SPRING.snap; entrance is opacity/travel-free — the pill must NOT fly from a scaling ancestor (verified-facts no-scaling-ancestor rule)

a11y · tablist|radiogroup + roving tabindex; selection carried by solid fill + aria-selected/checked + label, never color alone; arrows step+wrap via chip-selection

rule · id is the layoutId scope — must be unique per mounted strip so pills never share an origin

rule · no scaling ancestor may sit above the strip (layoutId measurement — verified-facts)

rule · player-facing immersive register (motion-forward sliding pill) — do NOT fold the denser/quieter admin Tabs kit into this; separate register

rule · pure logic (role mapping + roving tabindex) lives in tab-selection.ts; keyboard step reuses chip-selection.ts

rule · draft→stable 2026-06-13 (Wave 2b consolidation): shipped across /history, predictions, casino + community segmented rows and design-qa'd for byte-parity; the gated sportsbook ScopeSegment + LaneRail stay hand-rolled (filmed no-scroll-jump filter gate + layoutId measurement) and are deferred, NOT migrated

used by · components/history/HistoryFilters.tsx · components/predictions/CategoryFilter.tsx · components/community/Boards.tsx · components/casino/filter/LobbyFilterBar.tsx · components/casino/filter/parts/FilterPanel.tsx · components/casino/filter/parts/ThemeStrip.tsx

a11y · decorative => aria-hidden; meaningful (LIVE) => role=status + sr-only label so status is never color/animation-only (triple-channel rule)

rule · purely presentational — no admin variant needed; consumed by both player + admin registers

rule · meaning must come from the label (or an adjacent label) — the dot alone never carries status

motion · AnimatePresence opacity + 4px travel via DURATION.crossfade (0.2) + EASE; reduced-motion → opacity only

a11y · trigger gets aria-describedby when open; bubble is role=tooltip + non-focusable, AnimatePresence mount/unmount (no aria-hidden toggle); Escape dismisses; supplementary text only (never the sole channel)

rule · supplementary text only — never the sole channel (triple-channel)

rule · shows on hover AND focus-visible (keyboard parity, never hover-only)

rule · a disabled trigger must use aria-disabled + stay focusable (not native `disabled`, which leaves the tab order and makes the bubble hover-only) — the over-limit deposit presets follow this

rule · bubble rides Z.tooltip (82, above modal/menu/playerMenu) via style={{ zIndex }} — never a bare z-50 literal off the ladder

used by · components/join/SceneFuel.tsx · components/wallet/DepositTab.tsx

motion · image opacity crossfade on load via DURATION.crossfade

a11y · image path alt={name}; initials path role=img + aria-label (initials span aria-hidden); corner status reuses StatusDot label so online/live is never color-only (triple-channel)

rule · greenfield foundational primitive — chat ChatMessageRow author + community rows adopt it in a later consumer pass (no dedupe owed this wave)

rule · corner status is composition over ds/primitives/StatusDot, never a re-rolled dot

rule · first app consumer landed Wave 4: components/community/cosweat seat rail (archetype-accented, sm)

used by · components/community/cosweat/CoSweatSeat.tsx (Wave 4 — first real app consumer; seat faces)

a11y · decorative by default (aria-hidden, no role); pass title to make it an accessible role=img landmark (the admin top bar passes title="SWOOBZ")

rule · no path may carry its own fill/class — every path renders on the single currentColor fill so no warm hue can smuggle back in from the source asset

rule · aspect ratio is fixed by the source viewBox — scale via height only (h-* + w-auto), never stretch

used by · ds: AdminTopBar (default brand slot, replacing the plain-text SWOOBZ span)

motion · knob + track transition-all duration-300 (the player pace); reduced-motion collapses harmlessly via the OS

a11y · role=switch + aria-checked; Space/Enter toggle natively; FOCUS_RING; ariaLabel required when no visible label; triple-channel (knob POSITION + accent fill + label)

rule · PLAYER REGISTER — carries the cursor ring + 300ms pace + accent glow; the calm ds/admin Switch (100ms peer-checkbox, no ring) stays separate, mirroring the StatusDot player/admin split

rule · accent glow is gated off when disabled

used by · components/settings/PreferencesSection.tsx

a11y · aria-hidden (loading announcement belongs to Spinner/table role)

rule · reuses the house animate-shimmer utility + SHIMMER_SWEEP recipe (WHITE_ALPHA.sweep midpoint) — NO new gradient literal

rule · register-neutral — a separate player Skeleton would be a byte-identical fork (forbidden duplication); player + admin loading surfaces share this primitive

used by · data-table (loading rows)

a11y · aria-hidden — direction MUST also be carried by an adjacent signed-delta string, never the tint alone

rule · static (no motion) — the admin calm budget

rule · no gradient id / no hooks — renders inside a server component

rule · < 2 points => honest dashed resting baseline, never a fake flat line

rule · tints via accentVar (var(--color-*)) — theme-reactive, no raw hex

used by · scaffold-preview · dashboard-card trend slot

motion · DURATION.reveal with EASE

used by · 44 files

a11y · aria-label keeps the real text during scramble

used by · 7 headers

used by · GamesFilmstrip · LiveTicker

motion · drag momentum · reduced-motion fallback

a11y · ariaLabel required; arrow pills keyboard reachable

used by · ForYouRail · GamesFilmstrip · KeepPlaying

used by · 7 card surfaces

rule · background comes from the art generators — the continuity contract

used by · 14 card sites

motion · DURATION.expand → DWELL_MS.transitionSettle hold → DURATION.dissolve; DWELL_MS.transitionMax failsafe

rule · scrim color from theme (ink), not literal #07080C

used by · app/layout

motion · SPRING.cursor ring chase; Z.cursorRing/Z.cursorDot

rule · data-cursor / data-cursor-color is the opt-in contract

rule · the dot IS the pointer — it never disappears (failed-attempts 2026-06-12)

rule · volt + ink stroke come from theme tokens, not literals

rule · WRAP_MAX_W=256 / WRAP_MAX_H=64 gate the wrap-ring; wider targets get the free ring + visible dot — size demo containers so interactive targets stay under the gate

used by · app/layout

used by · app/layout

rule · semantic accents only — strokes resolve via accentHex(lab) + hexAlpha (all 8 hex call sites migrated 2026-06-12)

used by · 8 heroes · app/not-found

motion · SPRING.sheet travel; entrance is opacity + travel ONLY — a scaling ancestor breaks layoutId children (verified-facts)

a11y · role=dialog aria-modal; initial focus into panel + Tab trap + focus restore via use-overlay; ESC closes; scroll locked

rule · drawer = side:"right" variant — no separate Drawer component

motion · opacity + travel only — never scale on the ancestor (verified-facts)

a11y · role=dialog aria-modal; initial focus into panel + Tab trap + focus restore via use-overlay; ESC closes; scroll locked

rule · every ds overlay (sheet, modal, celebration) registers through this so FounderNudge's overlay-hold gate keeps working

rule · pure decisions (drag-dismiss thresholds, focus wrap) live in ds/motion/overlay-logic.ts with node tests

used by · VerticalHeroScene · BossHero

used by · MicroMarketDock · GamesFilmstrip · TriggerLab · WalletSurface

motion · AnimatePresence opacity scrim (DURATION.crossfade) + panel opacity/travel (DURATION.expand, EASE) — never scale on the ancestor (verified-facts layoutId rule)

a11y · input role=combobox aria-expanded aria-controls aria-activedescendant; results role=listbox > role=option aria-selected; ↑/↓ move active, Enter activates, Esc closes; focus trapped + restored via use-overlay

rule · no useSearchParams (SSG preserved)

rule · fuzzy matcher is pure + unit-tested, no new deps (subsequence scorer in fuzzy.ts)

rule · Glyph-only icons (id=search leading mark)

rule · opacity/travel entrance — no scale

rule · presentation-only — navigation + openWallet action; NEVER bus.emit / useEngagement

used by · components/chrome/TopNav.tsx (CHROME-MAKER mounts SearchTrigger) · app/layout.tsx (CHROME-MAKER mounts CommandPalette + CommandKListener)

rule · padding stays with the consumer; dashed empty-state wells add border-dashed via className

rule · PANEL_SURFACE class map is exported so sibling patterns (StatTile) wear a surface without nesting

used by · StatTile

rule · the coach is NOT its own gate: the consumer MUST gate open on useNudgeBeatReady so a beat never paints over a live/unsettled round (round-guard law)

rule · target anchors are data-guide-anchor selectors on the real UI; a missing anchor degrades to a centered card (never a dead-end)

rule · content lives as DATA in a per-surface registry (app: lib/onboarding/surface-guides.ts), never scattered JSX

rule · one voice at a time: while a coach is active the AmbientNudgeSlot + GuideToast stand down (activeSurface signal)

used by · app: SurfaceGuideCoach (components/onboarding)

a11y · nav[aria-label]; active page aria-current=page; prev/next real buttons with sr-only labels + disabled at bounds; ellipsis aria-hidden

rule · player register — the OPERATOR/admin pager is a separate ds/admin entry (long-tail, task #32); do not fold them

rule · no money math — page math only; window math lives in pagination-range.ts (tested)

rule · no layoutId (discrete buttons, not a sliding segment — TabStrip owns that register)

rule · caret is a decorative CSS chevron (ds/admin/Select pattern), not a Glyph; if a chevron Glyph is later added it can adopt it

motion · AnimatePresence height-expand (DURATION.expand/EASE) + chevron rotates 180°; reduced-motion → instant (opacity-only exit, no height tween)

a11y · header button[aria-expanded][aria-controls]; panel role=region[aria-labelledby]; roving Arrow Up/Down + Home/End move focus between triggers; FOCUS_RING on triggers

rule · greenfield for completeness — this is the click-to-disclose content pattern for future FAQ/detail-meta surfaces

rule · the FILED disclosures (FilmstripCard hover-expand + nav toggles) are NOT accordions and stay out of scope

rule · chevron is a decorative CSS caret (ds/admin/Select pattern), not a Glyph

rule · roving-focus + open/close math live in accordion-nav.ts (tested)

used by · app/faq/FaqAccordion.tsx · app/help/HelpAccordion.tsx

motion · none beyond link transition-colors

a11y · nav[aria-label=Breadcrumb] > ol > li; last item aria-current=page rendered as text (not a link); separators aria-hidden; links wear accent text + FOCUS_RING

rule · landed a live consumer (page-crumb) in the wayfinding wave — graduated draft→stable; the one-level ← BACK TO X links stay single-segment back-links and out of scope

rule · optional Link prop defaults to a plain <a> so Breadcrumb keeps no hard dep; the page-crumb wrapper passes next/link for client-side + prefetch

rule · API needs zero changes to serve page-crumb — the trail/aria-current/separator contract is already complete

used by · page-crumb

a11y · inherits Breadcrumb: nav[aria-label=Breadcrumb] > ol > li; last item aria-current=page rendered as text (not a link); separators aria-hidden; links wear accent text + FOCUS_RING. Crumb links come first in DOM (under nav, before the page title) = correct tab/reading order

rule · thin wrapper — placement only; never re-implement the trail markup (that is Breadcrumb's contract). PageCrumb owns the gutter/top-pad/Link-binding, nothing else

rule · next/link is the only Link binding — client-side + prefetch on hub trails

rule · hero pages mount PageCrumb as the FIRST child before the hero (hero keeps its own top padding); no-hero pages REMOVE their root pt-24 (PageCrumb supplies it)

rule · presentation only — no money math, no money invariant surface touched

used by · app/bonuses/page.tsx · app/history/page.tsx · app/vip/page.tsx · app/settings/page.tsx · app/you/page.tsx · app/community/page.tsx · app/season/page.tsx

a11y · PageCrumb landmark first in DOM (correct reading order); TOC is nav[aria-label='On this page'] of pure #anchor links; each ContentSection is <section aria-labelledby> with scroll-mt-24 nav clearance; FOCUS_RING on TOC links

rule · server component — no "use client", no store reads, no bus.emit, no money math (SSG + money invariant by construction)

rule · all prose styling flows from content-prose.ts (single source of complete Tailwind v4 literals) — never inline ad-hoc prose classes

rule · honest-claims law: pages composing this shell state demo + play-money + no-real-money where relevant; fairness never claims a real RNG cert / licence / real money

rule · DefinitionList + Accordion are the reusable bodies — a <dl> or disclosure block is a ds element, never inline app markup (no-inline-UI rule)

used by · app/legal/terms/page.tsx · app/legal/privacy/page.tsx · app/legal/cookies/page.tsx · app/responsible-play/page.tsx · app/how-it-works/page.tsx · app/fairness/page.tsx · app/about/page.tsx · app/faq/page.tsx · app/glossary/page.tsx

rule · server component — pure presentation, no store reads, no money

rule · the <dl> is a ds element, never inline app markup (no-inline-UI rule)

rule · accent rule literals are complete per-accent strings (Tailwind v4 JIT), no interpolation

used by · app/glossary/page.tsx

a11y · nav landmark (aria-label='Account sections'); aria-current=page on the active destination; native next/link keyboard nav + FOCUS_RING.

rule · single source of truth for the YOU-group link set lives in ds/patterns/account-rail-links.ts (ACCOUNT_RAIL_LINKS + the pure tested accountRailActiveHref)

rule · do NOT wrap a page that already has its own in-page nav rail (e.g. /you's command-center zone-jumper) — stacking both is a double-menu regression (failed-attempts 2026-06-13)

rule · mobile chip row sits at z-40, under the chrome ladder (60+); client island, host pages stay server components / SSG

used by · app/bonuses · app/vip · app/settings · app/history

a11y · values use tabular-nums; label/value association via dl semantics (renders a dt/dd group — must live inside StatGrid's dl)

rule · non-interactive by design — wrap the grid cell, not the tile, for click targets

rule · delta accent derives from direction via DELTA_ACCENT (up→volt, down→blood, flat→fog) — never caller-set

rule · isLive is the ONLY cyan entry in the admin KPI register (the cyan budget gate); the live dot is INLINED so patterns takes no upward import from ds/admin/StatusDot

rule · delta.value carries its own sign — no money math in the DS

a11y · renders the <dl> that StatTile's dt/dd groups require

rule · hairline tiles need an opaque surface — the 1px line grid shows through gap-px seams only

a11y · amounts tabular-nums; gains/losses carried by sign + text, never color alone (triple-channel)

rule · amounts arrive pre-formatted with an explicit sign — this row never does money math

rule · renders an <li>; the consumer owns the <ul> (divide-y divide-line for the classic ledger)

rule · draft→stable 2026-06-13 (Wave 2b registry hygiene): graduated — shipped across history/wallet/you/notifications/admin (6 real surfaces) + styleguide preview; the empty usedBy was stale, now populated with the actual import edges

used by · components/history/HistoryList.tsx · components/history/history-rows.ts · components/wallet/WalletHistory.tsx · components/you/TransactionList.tsx · components/notifications/NotificationRow.tsx · ds/admin/DataTable.tsx · components/styleguide/previews-patterns.tsx

motion · DURATION.toast entrance with EASE; travel -28 top / +56 bottom / +10 inline

a11y · role=status (polite); CTA is a real button; auto-dismiss pauses on hover/focus

rule · gates (session cap, snooze, overlayCount hold) are part of the shell, not the consumer

rule · pure cap/snooze/cooldown gate lives in ds/patterns/nudge-gate (canShowNudge, nextNudgeDelayMs) — tested

rule · overlay hold reads lib/ui overlayCount directly; a held open re-attempts DWELL_MS.overlayRetry after the last overlay closes

motion · frame fade DURATION.dissolve; content opacity+travel DURATION.toast staggered on STAGGER.base — never scale (scaling ancestors break layoutId)

a11y · non-blocking — page stays interactive; announced via role=status; reduced-motion: static frame, no particles

rule · LOSS = zero animation, zero sound, zero celebration; payout < wager is a LOSS (anti-LDW, old-DS §7.2/§8.4)

rule · celebration tiers gate on multiplier — sportsbook explosion threshold is 25x, not 10x (§7.3)

rule · particles/backdrop are SLOTS (pass ds ParticleBurst) — both suppressed under reduced motion

rule · frozen spec D0 — layout changes need a new ruling

rule · explicit grid placement on BOTH overlapping items; geometry asserted by scripts/hero-geometry-check.mjs, not eyeballs

used by · CasinoHeader · PredictionsHeader · SportsbookHeader

a11y · aria-hidden — purely decorative

rule · static forever: never animates, never tracks the pointer (one glow layer per hero)

used by · VerticalHeroScene

rule · CTA and ambient are SLOTS — the shell imports no stores, canvas or buttons (error boundaries stay dependency-light)

rule · compact density drops the giant headline + ambient — disc glyph + kicker + foot only, so it fits a popover or right Sheet without blowing the frame

rule · consumers own vertical centering via className/wrapper — cn() is plain clsx, so never pass a conflicting display utility onto the register root

used by · app/not-found · app/error · notification feed (compact)

a11y · triple-channel (WCAG 1.4.1): direction carried by signed delta text + flash, NEVER color alone; tabular-nums

used by · QuickBetControls · OddsButton · SlipBody

motion · SPRING.snap select

a11y · selected carried by fill + aria-pressed + label, never color alone; focus-visible ring

rule · slip mutations via slip-store only; money via bus events only

rule · selected glow comes from SELECTED_GLOW (semantic.ts) — no inline rgba

rule · refit landed: OddsSelectionButton absorbed DetailOddsButton (file deleted) — shared OddsShell presentation, aria-pressed everywhere

used by · LiveMatchCard · MatchBoard · detail/MarketsBoard

a11y · side carried by YES/NO text + price, never color alone (triple-channel)

used by · MarketCard · TradeDesk · PredictionsHeroModule

used by · MarketCard · TapeStats

a11y · decorative model suggestion; the percent + side label carry meaning, never the fill tint alone

rule · DISPLAY-ONLY - never a settlement or OP input; the market settles on the final score

rule · fail-closed: a null context or a context with no surviving reading renders nothing (no empty strip)

rule · the cyan fill is bg-cyan; small accent percents use text-cyan/90 (OLED halation rule)

used by · RichMarketCardShell

motion · DURATION.draw path draw

a11y · direction also carried by signed change text near the chart, never tint alone

rule · refit landed: detail variant absorbed PriceChart (file deleted); hex tints resolve via accentHex

used by · MarketCard · PredictionsHeroModule · MarketDetail

motion · spawn sweep · countdown ring · popLayout exit

a11y · timer ring aria-hidden; result announced via text; resolved-lost is NEUTRAL — zero color, no icon, no celebration (triple-channel + anti-LDW)

rule · never mutates balance — bus events only

rule · M4 landed: local ACCENT map → accent-api (ACCENT_CLASSES.text + accentHex/hexAlpha wash)

rule · refit still owes: hand-rolled ring → progress-ring, stake row → chip-selector

rule · STATUS HONESTY: resolved-lost still renders the shipped blood treatment — flipping to the NEUTRAL loss contract (a11y note) is a refit design-qa change, not a silent M4 edit

rule · compact stake chips intentionally NOT refit to chip-selector (compact geometry differs) — revisit only with a design-qa pass

used by · MicroMarketDock · MicroMarketSheet

used by · app/layout

rule · M4 split: MicroMarketSheet (auto-expand gates + overlay lifecycle) + MicroMarketPill + MicroMarketSheetPanel — all <150 lines

rule · panel re-base onto the Sheet primitive stays refit (ds/motion/Sheet was draft-unbuilt when M4 landed); springs snapped to SPRING.sheet/standard/pop

used by · MicroMarketDock

motion · count + combined-odds BUMP key={count} scale [1,1.08,1] (0.3s) + SPRING.pop pulse-dot ping on every leg add; tab enter/exit y24 SPRING.standard via AnimatePresence; right→ step-aside transition-[right] 500ms on chatDockOpen

a11y · tab is a button aria-label="Open bet slip"; pulse-dot + REVIEW → arrow are aria-hidden; Sheet carries role=dialog aria-modal + focus trap + ESC via use-overlay (ariaLabel="Bet slip"); status/leg copy announced as text, never color-only

rule · PURE PRESENTATION — reads useSlip selectors (selections/status/legResults) + opens a Sheet; NO bus.emit, NO useEngagement, NO second bet:placed emitter; placement still flows through slip-engine.placeSlip via SlipBody

rule · money invariant untouched: slip-store/slip-engine/SlipBody/MobileSlip are CONSUMED ONLY, never modified (the module-level navigation-surviving settleTimer + SWEAT-THE-SLIP bus spawn stay intact)

rule · z-[70] is the spec value mapped to Z.microMarkets — sits spatially BELOW the mm desktop stack (bottom-44 up) so they never overlap; adopts the mm chatDockOpen lg:right-[376px] step-aside

rule · self-suppresses entirely (returns null) when count===0 && status===idle via dockHasContent — no chrome while the slip is EMPTY; a LIVE slip (any leg, or a pending/won/lost flight) follows across surfaces by design (spec dd 2 "follow the live slip across board↔detail↔beyond" + the HERO opt-in surfaces a draft in the dock from the landing page), so the dock is intentionally NOT route-gated; the "tap any odds" empty copy stays in SlipBody's empty state (single home, no second empty surface)

rule · no fly-to / layoutId across containers — the bump is an in-place key={count} pulse (avoids the cross-container layoutId trap, docs/MEMORY-TRAPS.md)

rule · pure derivation lives in slip-dock-logic.ts (node-testable: dockHasContent / dockTabVisible / dockTabLabel / dockOddsChip / dockTint); the shell stays thin

rule · useSlipDockUi declared create-if-missing, EXACTLY {columnInView, setColumnInView} — defaults columnInView:true so the tab stays quiet until a SlipColumn mounts; carries one boolean, zero money/ledger field

rule · draft until the refit lands it in the live flow (M-B wires app/layout + swaps both sticky SlipBody columns to SlipColumn + removes the double page-local MobileSlip) + a design-qa pass

used by · app/layout

motion · SPRING.slowFill bar; shimmer sweep from token recipe

rule · refit: bar → progress-bar(shimmer) still owed; sweep gradient → WHITE_ALPHA.sweep LANDED (registry-lint 2026-06-12)

used by · app/layout

rule · refit: re-base on Sheet(side: right); bars → progress-bar

used by · app/layout

rule · refit: particle-burst re-base LANDED; celebration-shell re-base still owed

rule · wins only — never fires on a loss (anti-LDW)

used by · app/layout

a11y · arc buttons carry aria-label from their ORBITAL_ACTIONS entry (failed-attempts 2026-06-12 gap CLOSED in M4 — keep labels when extending actions); FAB carries aria-expanded

rule · XP line animates from explicit initial width, never auto

rule · FAB fill is opaque — translucent FAB over the progress line reads broken

used by · app/layout

used by · landing

rule · M4 landed: vip-accents consumption → accent-api (accentHex + ACCENT_CLASSES)

rule · refit: progress line → progress-bar

used by · vip · you

rule · M4 landed: rungs consume accent-api (borderSoft = the vip /50 border); TierRung lives at ds/igaming/TierRung.tsx

rule · refit: rings consolidate onto progress-ring

used by · vip

rule · raw gradients/hex are SANCTIONED here and only here (plus match-art/market-art)

used by · 12 files

used by · 7 files

used by · 5 files

used by · PredictionsHeader

rule · M4 landed: local accent class map → ACCENT_CLASSES[accent].text (accent-api)

used by · 5 pages

a11y · confirmation count announced as text; ring decorative

rule · display strings come from the record — never compute money client-side

rule · already the GOOD var(--color-*) consumption pattern; ring → progress-ring during refit

used by · SceneFuel · DepositTab · WithdrawTab

motion · DURATION.crossfade opacity swap inside a fixed h-4 row (zero CLS)

rule · a LINK, never a modal, never gates play (frozen engagement spec §0)

rule · refit landed: all three hero modules re-pointed here (ModuleRibbon ×2 + sportsbook AccountRibbon deleted); casino passes idle=null, predictions passes its season-intel link

rule · flip to stable after design-qa on the refit build (status honesty)

used by · CasinoMomentModule · PredictionsHeroModule · SportsbookMoment

rule · reads personalization profile only — never writes; reasonLabel chip always visible

used by · 6 detail/end pages

a11y · loss carried by the SLIP DIED text — no icon, no celebration; the full NEUTRAL loss contract (zero color, no shake) is the refit target (triple-channel loss rule)

rule · STATUS HONESTY: lost still renders the shipped blood treatment + shake — flipping to the NEUTRAL loss contract (a11y note) is a refit design-qa change, not a silent edit (same rule as micro-market-card)

used by · SlipBody

motion · layoutId sportsbook-lane-pill slides SPRING.snap; league strip fades DURATION.crossfade; no scaling ancestor may sit above the bar (layoutId measurement — verified-facts)

a11y · radiogroup + roving tabindex, arrows step via ds chip-selection; active carried by solid volt fill + aria-checked, never color alone; floated chips add sr-only 'ranked by your bets'

rule · sticky top-16 z-50 — deliberately below Z.nav (60), NOT a new ladder rung

rule · no filter drawers/sheets — inline pills only (a drawer hides state)

rule · URL sync reads window.location.search ONCE on mount via history.replaceState — never useSearchParams (keeps /sportsbook SSG)

rule · filter state lives in lane-store (§3.1) — MatchBoard and LiveRail consume the same store, so the rail filters with the board

rule · app-side recipe (store-coupled) — registered for registry-first discovery; a ds/ fold is a later-wave call

rule · league chips render INSIDE the sticky bar — picking a lane mid-scroll reveals the league axis pinned under the rail, never off-screen at the board top

rule · /ds preview = context-route fallback (RUNNING AT /sportsbook) — mounting the rail on /ds would run use-lane-url-sync and rewrite the /ds URL; ratified convention for full-bleed store-coupled chrome (verified-facts)

used by · app/sportsbook/page.tsx

motion · layoutId sportsbook-scope-pill slides SPRING.snap

a11y · radiogroup + roving tabindex, arrows step via ds chip-selection; active carried by solid volt fill + aria-checked, never color alone

rule · scope definitions live in lane-store (§3.1): live = !!match.live; today = live OR startsInMin <= 1440; all = everything

used by · LaneRail

rule · rendered as a popLayout SIBLING of its rows, never their parent — fixture row keys stay stable across grouping changes (the stable-container/no-remount gate)

used by · MatchBoard

motion · hero + legs enter SPRING.standard, legs cascade STAGGER.base y 14→0

a11y · odds movement carried by the ODDS MOVED chip text + struck price, never color alone; DEMO label on the hero

rule · loading NEVER places — LOAD only writes useSlip when status === 'idle' (else FINISH YOUR SWEAT FIRST); placement always flows through placeSlip() with the balance check; no deposit prompt

rule · always repriced to current data-derived odds — the struck shared price is the sportsbook's ONLY sanctioned strike-through (anti-dark-pattern by construction)

rule · fail-closed: any codec rejection renders the empty-state error, never a crash; unresolvable legs drop with a count notice

used by · app/slip/[code]/page.tsx

rule · renders null with an empty slip — never a dead share affordance

rule · the 1200×630 canvas card + share chain live in lib/slip-share/share-card.ts; the code comes from lib/slip-share/codec.ts (labels never encoded — rebuilt from static data)

rule · share is presentation only — zero bus events, zero store writes

rule · click flips to disabled PREPARING… synchronously BEFORE the canvas render (fonts.ready + 1200×630 draw + toBlob take seconds) — the CTA must never read dead or accept double-clicks

rule · inline confirm on the button (AccountSection precedent) is the ratified deviation from §5.3's guide-toast wording — verified-facts

used by · SlipBody

motion · popover opacity+y travel (EASE) · mobile Sheet side=right (SPRING.sheet) · no scale on entrance

a11y · bell aria-label is dynamic ('Notifications — N unread'); rows are buttons with mono text + relative time; popover follows the WAI-ARIA menu pattern via use-menu-popover (ESC, outside-click, arrow roving)

rule · store READS the bus only — no bus.emit, no useEngagement; money invariant by construction (store.test.ts asserts emit never called + rows carry no numeric money field)

rule · ring buffer cap 30 (NOTIFICATIONS_CAP) — newest first

rule · maps ONLY events the typed bus actually emits (noise events drop to null in map.ts)

rule · mark-read on CLOSE, not open — the unread highlight persists while the feed is up

rule · Bell owns the Feed state internally; chrome mounts only <NotificationBell/> + <NotificationsProvider/>

used by · components/chrome/TopNav.tsx (CHROME-MAKER mounts NotificationBell) · app/layout.tsx (CHROME-MAKER mounts NotificationsProvider)

motion · Reveal cascade (per-card delay) · TiltCard maxTilt 6 · TransitionLink card-becomes-page overlay · 45s shared clock (no per-card timers)

a11y · filled seats: Avatar role=img/alt={handle} + sr-only '{handle}, {archetype}, simulated' so the simulated nature reaches assistive tech; open chairs: role=img aria-label='Open seat'; SIMULATED badge is text (never color-only); CHALLENGE is a real button; seat-count label is mono text, never a bare dot

rule · HONEST simulated co-presence — every face is a real sim member (memberFor + SIM_NAMES), seats deterministic on a 45s window (no Math.random); never invents handles

rule · always >= 1 open chair and >= 2 seated — the rail never reads as a closed crowd, never inflates occupancy (cosweat-data.test asserts the bounds)

rule · labelled SIMULATED / DEMO CREDITS — zero fake social proof, no real-multiplayer claim (keeps the TableCard honesty contract)

rule · presentation-only — reads memberFor + seeded sim; NEVER bus.emit, NEVER useEngagement; CHALLENGE reuses the chat composer-prefill seam through the parent, never moves a credit

rule · Glyph-only icons (bolt CTA, nodes open-chair), no emoji, no raw hex/EASE/z literals (ds/tokens)

rule · M-WIRE mounts <CoSweatTables onChallenge=…/> in app/community/page.tsx via the CoSweatSection client wrapper (the server page can't hold the useChatUi handler) and passes the composer-prefill handler; onChallenge is optional (honest no-op default) so the section stands alone

used by · components/community/cosweat/CoSweatSection.tsx (M-WIRE client mount wrapper — owns the requestPrefill(challengeLine(member)) seam) · app/community/page.tsx (M-WIRE mounts <CoSweatSection /> at slot 03, between LiveTables and FloorTalks)

a11y · three facts read as mono micro-labels; live posture mirrors the lane-rail live dot convention

rule · store-coupled (reads useLaneStore lane via LeagueChips parent) — not standalone-renderable in a pure preview

rule · backed by the new pure selector sportMeta(matches, sport) in board-groups.ts (covered by board-groups.test.ts)

rule · presentation-only — emits nothing (MONEY INVARIANT safe)

rule · /ds preview = context-route fallback (RUNNING AT /sportsbook) — mirrors the lane-rail store-coupled convention (verified-facts 2026-06-13)

used by · components/sportsbook/LeagueChips.tsx

a11y · presentation wrapper only — no role; geometry change is visual + var-driven

rule · SSR-safe default frozen {domain:null,density:'comfortable'}

rule · nested boundaries shadow wholesale (inner density+domain win)

rule · portals escape the DOM cascade — they read useDensity() and re-stamp data-density on their own portal root at open

rule · data-domain='admin' arms the Exposure-Red selector

used by · styleguide admin previews · admin shells (later wave)

motion · border/bg color transition only (≤100ms admin motion budget) — no magnetic lean, no glow-on-hover

a11y · FOCUS_RING outline (no neon glow); disabled dims to opacity-40 + not-allowed

rule · NEVER composes MagneticButton — no magnetic lean, no cursor-ring lock

rule · no glow-on-hover (border/bg color transition only)

rule · solid→volt/ink, ghost→line/bone, danger→blood

used by · data-table · page-header · admin previews

a11y · status conveyed by LABEL text + accent, never color alone; non-focusable span; density-compact/density-ultra size steps

rule · triple-channel — label+accent, never color alone

rule · NO left-stripe status indicator

rule · StatusDot (re-exported from Badge) is a small accent dot + optional pulse for live/pending, aria-hidden, label supplied by sibling text

used by · data-table (via caller render-prop) · admin row/cell kit

a11y · aria-invalid mirrors invalid; FOCUS_RING outline

rule · density-driven height

rule · blood border on invalid

rule · no new glyph

used by · admin-form-field · admin-search-input

a11y · label htmlFor + aria-describedby to the hint/error; error message mono+blood, control border blood via its invalid prop

rule · error replaces the hint and turns it blood

rule · composes any density-driven control by slot

used by · admin forms

a11y · aria-invalid mirrors invalid; FOCUS_RING outline

rule · appearance-none + CSS chevron (not a Glyph — Glyph.tsx locked)

rule · blood-on-invalid

used by · admin forms

a11y · native input drives state; FOCUS_RING via peer-focus-visible

rule · native input drives state (peer)

rule · pure-CSS tick (no Glyph)

rule · ≤100ms transition

used by · admin forms

a11y · role=switch; FOCUS_RING via peer-focus-visible

rule · track fills volt on checked, knob slides via translate

rule · no glow

used by · admin forms

a11y · clear is a real focusable button with aria-label; FOCUS_RING

rule · leading magnifier is a pure-CSS mark (NOT a Glyph — Glyph.tsx locked, no search glyph)

rule · clear is a real focusable button

rule · no glow

used by · admin tables/toolbars

motion · inherits ds/motion/Modal (opacity + travel entrance, scrim tiers)

a11y · role=dialog aria-modal via ds/motion/Modal; ESC + scroll-lock + focus preserved

rule · composes the EXISTING ds/motion/Modal — does NOT re-implement the overlay

rule · close control is a CSS '×' (Glyph locked)

used by · reveal-with-reason · admin dialogs

a11y · reason input is a native <textarea> (Input has no multiline variant); confirm gated on reason length

rule · owns ONLY modal-open + reason-input state

rule · revealed value comes from the parent after onReveal resolves — NEVER derived client-side

rule · confirm gated on reason.trim().length >= reasonMinLen

rule · rejection keeps modal open, surfaced via onError

rule · MONEY INVARIANT — onReveal is caller-owned, this component NEVER emits a bus event

used by · masked-pii-cell

a11y · inherits RevealWithReason reason ceremony

rule · kind ONLY drives field-label + audit-event default — NO masking arithmetic

rule · both masked AND revealed forms are server-supplied props

rule · pii-contract defaults: ip→'IP address'/admin.pii.ip_revealed.v1, phone→'Phone number'/admin.pii.phone_revealed.v1, id-number→'ID number'/admin.pii.id_number_revealed.v1, kyc-doc→'KYC document'/admin.pii.kyc_doc_revealed.v1

used by · admin player tables

a11y · semantic <table> + <th scope=col>; aria-sort scaffold on sortable headers

rule · precedence FROZEN loading>error>empty>rows (resolveDataTableState, own test)

rule · numeric cols use align:end + mono (tabular-nums)

rule · cells return PRE-FORMATTED ReactNode (parent formats amounts w/ explicit sign, no money math)

rule · row height rides var(--density-row-h)

rule · Badge is passed by caller via the cell render-prop, not imported by DataTable

rule · search/filter narrow ONLY the rows already loaded — never a server call (data-table-filter.ts)

rule · truncate uses the native `title` attribute (not the DS Tooltip primitive) — a non-interactive span carrying tabIndex fails lint/a11y/noNoninteractiveTabindex, and CSS truncation never removes the full text from the a11y tree anyway

rule · truncate is a no-op for non-string cell content — never puts arbitrary JSX in a title attribute

used by · admin lists/triage

a11y · title is the page heading; eyebrow is mono context; related links render inside nav[aria-label="Related pages"]

rule · composes AdminButton by SLOT (imports no button — stays presentational)

rule · actions pin right on desktop, stack mobile

rule · stats slot hosts a KpiStrip / DashboardCard row

rule · breadcrumb is a pre-rendered slot — PageHeader never derives a trail itself (use breadcrumbTrailFor)

rule · AdminPageScaffold consumers keep using its own top-level breadcrumbs prop (rendered above PageHeader) — the breadcrumb slot here is for the ~13 direct PageHeader consumers

used by · admin pages

a11y · inherits Breadcrumb (nav[aria-label=Breadcrumb] > ol > li, last item aria-current=page) and PageHeader (title is the page heading) unchanged

rule · composes the EXISTING canonical Breadcrumb + PageHeader only — never re-implements either's markup

rule · breadcrumbs omitted or empty → no Breadcrumb rendered (top-level group-landing pages per §5.2)

rule · the flex flex-col gap-6 p-6 wrapper is the ONE source of the page-content gutter convention — pages adopting this composite drop their own hand-copied wrapper div

a11y · inherits InlineState unchanged

rule · kind is always empty, never error — a gate-off surface is not a failure state

rule · render this INSTEAD OF the page's normal data/error UI when the API response is 503 gate-disabled, not alongside it

rule · never used for genuine 404/500 responses — those keep their own accurate InlineState kicker

a11y · numeric is mono/tabular; isLive dot is aria-hidden, meaning carried by the eyebrow

rule · numeric is mono/tabular (admin doubles down on mono, §5)

rule · tone=exposure routes the value through text-hero so the ONE sanctioned Exposure-Red compound selector swaps it volt→blood in ultra-compact admin for free (never a raw accent)

rule · isLive adds the cyan StatusDot pulse (cyan budget gate)

rule · density-padded via var(--density-pad-card); no money math (pre-formatted strings)

rule · scope is required — do not default to server-aggregate without verifying the source query is a true COUNT(*)/aggregate, not a capped/paginated client count

used by · kpi-strip · page-header stats slot

rule · pure layout — rides var(--density-gap) so spacing tightens with density

rule · the cyan / Exposure-Red rules live on the cards, the strip only arranges them

used by · page-header stats slot · admin dashboards

a11y · kicker carries the state label as text; action is a slotted control

rule · COMPACT register distinct from the page-register ds/patterns/EmptyState (giant 404 headline)

rule · error tints kicker blood + hosts retry, empty keeps it fog

rule · action by slot (imports no button — stays dependency-light inside tables)

rule · vertical padding from the consumer

used by · data-table (error/empty rows)

a11y · role=status + sr-only label; aria-hidden geometry; '' silences the announcement

rule · animate-spin at admin pace (≤ house durations)

rule · currentColor drives stroke — tint via text-*

rule · no accent shout, no neon glow

used by · admin loading states

a11y · mobile-first hard gate — sidebar folds to a drawer + bottom nav under md, every nav target >=44px, no horizontal overflow at 390px; skip-link first in DOM; active route carries aria-current; palette is a labelled aria-modal dialog; drawer closes on Escape/scrim

rule · presentational — no claims/session logic; the app claim-filters sections BEFORE passing them

rule · cyan economy: active-nav rail + Cmd-K key hint + highlighted palette row only

rule · navigation is plain <a href> (dependency-light, matches the console pattern) — no next/navigation coupling

rule · detail-rail + audit-bar are slots the app fills (keeps the legacy rail contract working during migration)

used by · app/admin (AdminConsoleShell — the whole console chrome)

a11y · <section> landmark; isLive dot is aria-hidden, meaning carried by the title

rule · header composes AdminButton / Badge by SLOT — imports none of them

rule · isLive adds the cyan StatusDot pulse (cyan budget gate)

rule · flush drops body padding so a table / feed seats against the border

used by · seam scaffolds · cockpit landings

a11y · leading dot aria-hidden; the event + meta text carry the meaning

rule · meaning rides the text, never colour alone (forced-colors safe)

rule · trailing cell is mono/tabular

rule · stack in a SectionCard flush body with divide-y divide-line/60

used by · cockpit recent-activity feeds

a11y · real <a> anchor — keyboard-reachable, FOCUS_RING outline; glyphs aria-hidden

rule · hover leans the chevron transform-only (admin motion budget) + border/bg colour transition

rule · primary is the ONE volt-emphasised affordance; default is calm line

rule · external adds rel=noreferrer

used by · scaffold-state suggested actions · cockpit quick-action grids

a11y · entirely aria-hidden — announces nothing; the ScaffoldState copy carries state

rule · static + deterministic ghost (no Math.random — Domain C fixture contract)

rule · skeleton bars via the Skeleton primitive; card/chart ghosts host a fog MiniTrend

used by · scaffold-state

a11y · the copy (headline/status/body/kicker) is the announced content; the ghost preview is aria-hidden

rule · NEVER a bare void — always a glyph, headline, explanation, next action AND a skeleton preview of the coming UI

rule · server-safe (no hooks / no motion) — honest-seam pages render it directly

rule · scrims tokenised via var(--color-coal); status pill is the ONLY cyan (cyan budget gate)

rule · forwards data-testid so the pages' placeholder-* selectors survive

used by · app/admin honest-seam pages (churn, decision-engine, experiments, observability, cms, lotteries, operators, seo, settings, stats, tournaments)

a11y · kicker + message are the announced content; the detail expander is a native <details>/<summary> (keyboard + screen-reader native disclosure)

rule · ALWAYS surfaces the backend message body verbatim — never collapses to a bare HTTP status

rule · kind="disabled" never renders the alarming blood accent — a gated surface is not a failure

rule · kind="error" is the only alarming (blood) register and the one that expects onRetry

rule · server-safe (no hooks) — the detail expander is a native <details>, collapsed by default

rule · this is the general contract every page-level data-fetch failure should render through instead of hand-rolling InlineState branching

used by · app/admin bridge hub + stuck + reorg-alerts (gated/error banners) · app/admin /audit-log (error + CORE_DATABASE_URL-not-configured states)

a11y · inherits InlineState / ScaffoldState / ApiErrorState per branch, unchanged

rule · a discriminated union on kind — each branch only accepts that branch's props

rule · disabled-by-flag MUST stay visually + copy distinct from verified-empty (the Wave-0 bridge-reorg identical-empty bug)

rule · does not replace app/admin/SeamScaffold.tsx — that stays working unchanged for existing honest-seam pages

rule · data-seam-kind is a mechanical, real DOM attribute — tests assert on it, not on styled text

used by · app/admin bridge stuck + reorg-alerts (mobile fallback state) · app/admin /kyc queue (verified-empty copy fix)

a11y · the ring SVG is aria-hidden; the legend's visible text (label + share % + value) carries the meaning, never the arc color alone

rule · each arc is ONE flat ACCENT_CLASSES color — never two accents blended on the same arc/segment

rule · valueBps is basis points already resolved server-side (floor division); this component performs no financial math, only arc-length geometry via donut-geometry.ts

rule · empty/zero segments never draw — buildDonutGeometry drops <=0 bps and returns [] when the whole set is zero, which renders the honest InlineState register instead of a full ring

used by · app/admin GlassBoxDashboard (revenue-router bucket breakdown)

a11y · each row's visible label + valueDisplay text carries the meaning; bar width is decorative reinforcement, never the only signal

rule · value is a plain count/magnitude used ONLY to size the bar — financial figures still arrive as pre-formatted valueDisplay strings (no money math in this component)

rule · an empty bars array or an all-zero value set renders the InlineState empty register, never a fabricated full-width bar

rule · transition is transform/width only, capped at 300ms (admin motion budget)

used by · app/admin GlassBoxDashboard (markets-by-status posture)

a11y · the sign-out control carries aria-label + title "Sign out"; the Avatar's initials fallback is role=img + aria-label per the Avatar contract

rule · composes the Avatar primitive — never a bespoke identity disc

rule · display-only: no session/auth logic lives here, the shell supplies the resolved identity + sign-out handler

used by · ds/admin/AdminShell/AdminSidebar (desktop foot block)

a11y · sr-only label span + native title; FOCUS_RING outline

rule · NEVER a fabricated unread/notification badge — this is a plain navigation affordance

rule · the composing app claim-gates which actions render (mirrors the nav item's own gate) so an icon never outlives its authorization

used by · app/admin AdminChrome (settings, audit-log top-bar shortcuts)

a11y · the SVG carries role="img" + aria-label=series.label; x-axis tick labels are aria-hidden decoration since the same values are already legible text, not the sole channel

rule · accent is 'volt' by default; pass 'cyan' ONLY for the one designated hero metric on a page (the admin cyan budget) — never two cyan hero charts on one screen

rule · y-axis ticks are ALWAYS exactly 3 (min/mid/max), x-axis ticks capped at 6 regardless of series length via trend-chart-path.ts (pure, node-tested geometry)

rule · fewer than two points renders the InlineState empty register, never a fabricated flat/interpolated line

rule · formatTick is the caller's formatter — no money math or locale logic lives in this component itself

used by · app/admin GlassBoxDashboard (signups-over-time main chart)

a11y · the leading StatusDot is aria-hidden; the primary text is the real signal, meta/trailing are supplementary — never color-only meaning

rule · the rail is a thin list, not a table — no column alignment, no headers; each row stays scannable at a glance

rule · an empty items array renders the InlineState empty register, never a fabricated placeholder row

rule · trailing/meta are pre-formatted strings from the caller — no money math or date formatting in this component

used by · app/admin GlassBoxDashboard (activity rail: newest signups, pending approvals, latest XP)

a11y · the underlying Modal owns ESC/scroll-lock/focus-trap via useOverlay; the error line is role="alert"

rule · onConfirm is wired ONLY to the confirm button — no other interaction (cancel, backdrop, ESC) may call it

rule · tier='typed' throws a dev-time error if typedPhrase is missing or empty — fail-closed on misconfiguration, not a silent no-gate

rule · this component never re-derives or previews the action's own money math — the caller supplies pre-computed `rows` (render amounts via MoneyDisplay)

rule · built on the existing ds/admin/ModalParts (Modal.Header/Body/Footer) — does not fork the overlay

used by · app/admin cashier/adjustments AdjustmentsClient (tier='typed', phrase 'ADJUST') · app/admin token-ops BuybackConsole (pause/unpause tier='confirm', create TWAP tier='typed') · app/admin token-ops RevenueRouterMonitor (report fixed costs tier='confirm')

a11y · tabular-nums text; carries no color-only meaning

rule · never render a raw micro-unit/BPS integer directly — always through this component or its money-conversion.ts formatters

rule · unparseable input falls back to the raw string rather than throwing (house convention, matches eye-format.ts)

used by · app/admin bonus-codes BonusCodesClient + CampaignCard (replaces local formatUsdDisplay/formatBpsDisplay) · app/admin cashier/adjustments AdjustmentsClient (applied amount + new-balance restatement) · app/admin token-ops RevenueRouterMonitor + BuybackConsole (ConfirmDangerModal restatement rows)

a11y · invalid state sets aria-invalid via the underlying ds/admin/Input; the $/% affordance glyphs are aria-hidden

rule · never computes/emits a value via Number()/parseFloat/BigInt — string slicing/padding only (ds/admin/money-conversion.ts)

rule · rejects (wire: null, invalid styling) more than the mode's max decimals, a disallowed negative sign, or non-numeric junk — fail-closed, never a best-effort guess

rule · the `value` prop is the wire format (micro-units for usdc, integer bps for bps) — a call site whose own API expects decimal dollars (e.g. cashier manual-adjust) converts locally with the exported decimalToMicroUnits/microUnitsToDecimalInput helpers rather than storing wire-format state

used by · app/admin bonus-codes BonusCodesClient create-campaign form (usdMasterAmountLamports, depositRequirementLamports, wageringMultiplierBps, rewardValueBps) · app/admin cashier/adjustments AdjustmentsClient (amount field, allowNegative) · app/admin token-ops BuybackConsole (TWAP total USDC) + RevenueRouterMonitor (fixed costs)