Components

Renders a Bungie image, resolving an ImageRef to a URL via @engram/core's configurable image base.

A Destiny FUI button: flat, square, tracked-uppercase, with an offset outline ring that fades in on hover and a rhythmic fill pulse.

A small tracked-uppercase label/badge — the general badge/pill primitive. `tone` (or a `color` override) carries the meaning; `variant` picks the treatment: tinted (soft), bordered (outline), or filled (solid).

A live countdown to a timestamp (vendor/weekly/event resets).

A keybind hint — the bordered key chip Destiny shows in nav bars and footers (`[A] Clan`, `[Esc] Dismiss`).

A radial completion ring — the round counterpart to a progress bar, for node completion, character level, and compact stat readouts.

A segmented progress/stat bar in the Destiny FUI style.

A section band: a flat raised bar with a left accent edge, an uppercase tracked title, and an optional right-aligned count — Destiny's in-game content-section divider.

A paginated grid (the in-game Triumphs / Collections / vault pager): the page of cells flanked by full-height previous/next arrow bars, with page-indicator segments below and a fade+slide in the travel direction on change.

A Destiny FUI surface: a semi-transparent panel over the canvas, defined by its fill (no outline).

The FUI title bar: a leading flag glyph, an uppercase tracked title, and an optional right-aligned count, on a subtle left-lit gradient with a fading underline — Destiny's in-game panel header.

A currency/cost token: an amount + its currency icon. Used for vendor costs, build/material requirements, and rewards.

The fundamental inventory/collection container: a CSS grid that lays out item tiles (passed as `children`).

Reveals an inspect popup for the trigger (e.g. an ItemTile / gear slot) — the in-game "hover gear to inspect" flyout.

The layered Destiny item square: rarity-colored base, the item art, the season/tier watermark assembly (TierWatermark), the intrinsic glyph, then state chrome (masterwork frame + glow, crafted marker).

The item inspect flyout — a dark glass panel modeled on the in-game tooltip: a rarity header band, a damage-type + power/ammo readout, flavor, an optional kill tracker, the stat block, the intrinsic frame row, a perk band (`children`, e.g. a `SocketGrid`), and an action `footer` (e.g. Apply).

The rarity-gradient header band: name on top, type + rarity on the lower line, and a top-right tier strip (TierWatermark) with the season glyph flush in the corner — the same assembly the item tile composites.

The Destiny stat block: an aligned grid of right-labeled stat rows.

A full item tile: the layered ItemImage with a bottom element+power foot, and the signature Destiny white outline on hover.

The power/light readout: the angular power glyph + the value in gold, with an optional `cap`.

A small diamond gem in the rarity's token color.

The season/tier corner assembly shared by the item tile and the inspect popup header: a soft scrim, the season crest, and a colored diamond per gear tier — the diamonds and gradient are drawn in CSS (no baked-in Bungie asset margins), so the whole stack aligns precisely.

The weapon-perk inspect flyout — the in-game trait tooltip, the weapon counterpart to ModPopup.

A single socket plug — a perk circle or a mod square. A selected perk gets the in-game azure fill (blue→gold when enhanced, with the gold ▲ badge); a selected mod keeps the bright ring.

Default rendering of a PlugAnnotation as a small plug overlay: a tier chip, a custom icon, or a gold recommended marker.

A grid of selectable plugs — the picker body for swapping a mod, perk, aspect, or fragment.

One socket: a perk column (stacked circles) or a mod socket (squares).

The socket layout: perk sockets as side-by-side columns of circles, then mod sockets as a row of squares — the Destiny weapon perk/mod grid.

A single subclass/loadout socket — an ability, aspect, fragment, super, or class ability.

A seasonal-artifact perk tile — one square cell of the in-game artifact grid: teal-filled when the perk is active, teal-outlined when it's unlocked but unpicked, and dimmed while its tier is still locked.

The armor energy capacity readout: a row of pips where `used` are filled, the rest of `total` are empty sockets, and any headroom up to `max` shows as faint upgrade ghosts.

A compact build summary: the subclass diamond + name, the equipped item tiles, an optional mod row, the stat tiers, and an action footer.

The armor-mod inspect flyout — the in-game mod tooltip, the mod counterpart to PlugPopup.

One armor mod socket: a square plug with its energy-cost pip in the corner, or an empty "+" placeholder.

A row of ModSlots with an energy-budget meter — the armor mod loadout for one piece. `used` defaults to the summed energy costs; the meter turns over-budget red when the slots exceed `capacity`.

The subclass-plug inspect flyout — the in-game tooltip for abilities, aspects, fragments, supers, and subclasses, the counterpart to ItemPopup for non-gear plugs.

A fixed-count row of AbilitySlots — the aspect or fragment block of a subclass, where the subclass fixes how many slots exist and some may be empty.

The signature subclass node: a 45°-rotated diamond frame tinted by its damage type, with the subclass icon upright inside and an optional super overlay.

The character column header — a Nameplate whose headline defaults to the Guardian's class.

The wide emblem banner (DIM model): the emblem's secondary banner art fills the tile (which Nameplate caps to the banner's aspect ratio) under a left→ right dark gradient so overlaid text stays legible. `children` render over the banner.

A character/player nameplate (DIM model): the emblem banner sized to its own aspect ratio, with the name + subtitle over the dark band and a small gold power readout tucked into the top-right corner.

An identity card. The default is a compact tile (square emblem + name + class + rank + stats) for search results and fireteam lists.

The in-game character stat panel: one row per stat — just the stat glyph and a large value, no bars or labels (Destiny shows the six as icon + number).

A labeled stat row: name, segmented bar, and value (Destiny stat block).

A KPI tile: a small label, a big headline value, and an optional period delta (green up / red down).

A responsive grid of StatCards with an optional `tabs` slot above for a time-span switch (Daily / Weekly / All-time).

The character-stat inspect tooltip — the in-game flyout for the six stats (Weapons/Health/Class/Grenade/Super/Melee): a black header band (stat glyph, large name, "Character Stat" caption), the stat's description, labeled effect readouts ("Health Per Orb" / "+62.3"), the gold "Enhanced Benefit" section that unlocks above 100, and a value/max progress footer with a threshold tick at 100.

A drag-to-reorder priority list — the stat-priority picker for a build optimizer (drag Resilience above Recovery).

A dual-thumb min/max range slider with optional tier ticks — the stat filter for a build optimizer ("Resilience ≥ 60", "Mobility 30–70").

A single inventory bucket: a collapsible labeled header with a capacity counter, an optional equipped slot, and the stored items in an ItemGrid.

A row of account currencies/materials — the header strip showing Glimmer, Bright Dust, mats, etc. A thin wrapper that lays CostChips in a wrapping row; the consumer supplies the values from the profile's currency components.

One objective's progress — the polymorphic readout behind triumphs, quests, bounties, metrics, crafting levels, kill trackers, and deepsight bars.

A triumph / record card (the in-game Triumphs & Seals grid): a circular record icon + title, a divider, an objective description, a right-aligned reward or completion check, and a thin progress edge — continuous or `steps` segments.

A quest / bounty pursuit card (the in-game Quests list): a square pursuit icon, the title + step description, an optional reward, and a thin step-progress edge. `tracked` gives it the green pinned-quest highlight.

A stat cell for comparison tables: the value with a thin bar, colored by its `rank` (best = ok/green, worst = bad/red, mid = neutral).

The generic data table behind compare, organizer, scoreboards, and leaderboards.

A masterwork/memento kill-tracker readout: a label on the left and the count tucked to the right, with an optional tracker icon.

A curated-roll verdict badge, colored by the status palette.

A titled disclosure: a tracked-uppercase header (with an optional count) that toggles its content.

A generic drag source: makes its `children` draggable and exposes an opaque `data` payload to drop targets.

A wrapping row of FilterPills — the active-filters strip above an inventory/collection grid.

The search/filter query input shell — a leading magnifier, a clear button, and a `suggestions` dropdown slot revealed on focus.

A styled native select — a square FUI control with a chevron.

A drawer/modal that slides from an edge — the mobile inspect backbone (bottom sheet) and side drawer.

Horizontal tab strip with a bottom hairline (Destiny FUI director nav).

The generic hover/focus tooltip — a small bubble of content anchored to a trigger.