display keys
Source file: client/lib/theme/vueda-tailwind/display/index.js
Media
| Component | Kind | Slots | Description |
|---|---|---|---|
| AspectRatio | key | 1 | Empty pass-through wrapper for ratio-bound media; sizing comes from the primitive and caller. |
Date and time
| Component | Kind | Slots | Description |
|---|---|---|---|
| DateRangeDisplay | key | 4 | Inline date-range wrapper that prevents the paired dates and separator from wrapping apart. |
| DateTimeDisplay | key | 7 | Inline time wrapper with baseline spacing for absolute and relative text. |
| DurationDisplay | key | 3 | Wrapper around the units; unstyled so it inherits the row's text rhythm. |
Text utilities
| Component | Kind | Slots | Description |
|---|---|---|---|
| BooleanDisplay | key | 3 | Wrapper around the word; unstyled so it inherits the row's text rhythm. |
| ErrorDisplay | key | 5 | Full-width error block wrapper for message, code, and links. |
| FileDisplay | key | 4 | Wrapper around the link; unstyled so it inherits the row's text rhythm. |
| JsonDisplay | key | 3 | Mono, per the data-font rule: a payload is machine-generated and its nesting |
| ClickToCopyText | key | 1 | Baseline row for a compact read-only value and its copy affordance. |
Badges and keyboard hints
| Component | Kind | Slots | Description |
|---|---|---|---|
| Badge | key | 1 | Compact slab badge with variant and numeric recipes. |
| Kbd | key | 1 | Single keycap chip for shortcut hints; tooltip nesting adjusts contrast. |
| KbdGroup | key | 1 | Inline shortcut sequence wrapper that clusters adjacent Kbd.root chips into one chord. |
Avatars
| Component | Kind | Slots | Description |
|---|---|---|---|
| Avatar | key | 1 | Circular clipping frame shared by avatar image and fallback content. |
| AvatarImage | key | 1 | Square image fill that inherits clipping from Avatar.root. |
| AvatarFallback | key | 1 | Centered muted fallback surface for initials or placeholder content. |
| UserAvatar | key | 2 | Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe. |
System messages
| Component | Kind | Slots | Description |
|---|---|---|---|
| ConsequencesBullets | key | 8 | List wrapper for consequence rows with no browser list chrome. |
| SystemMessageCard | key | 9 | Centered card chassis with the named tone group used by crest descendants. |
| LoadingHeartbeatStrip | key | 5 | Mono status row that separates request identity from live loading state. |
| LoadingSkeletonGhost | key | 2 | Bordered placeholder card with the shimmer overlay owned by this loading preview. |
| DiagnosticStrip | key | 3 | Compact diagnostic definition-list grid for request, route, or session values. |
| SuggestionList | key | 13 | Outer suggestion stack; border treatment lives on SuggestionList.list. |
| TriedUrlCallout | key | 4 | Two-column callout wrapper for the attempted URL. |
Menus
| Component | Kind | Slots | Description |
|---|---|---|---|
| ResponsiveMenu | key | 3 | Full-screen mobile dialog surface with a fixed header row and a bounded body row. |
| FieldPickerMenuList | key | 4 | Eyebrow at the top of the field-picker list. The in-popover micro-eyebrow recipe (11 px / 600 / 0.04em). |
Constraints band
| Component | Kind | Slots | Description |
|---|---|---|---|
| ConstraintsBar | key | 4 | Collapse wrapper. A grid-template-rows animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion. |
Scopes
| Component | Kind | Slots | Description |
|---|---|---|---|
| ScopeChip | key | 4 | Pill container. Info tint with a matching hairline. |
| ScopeGroup | key | 4 | Active-scope chips strip. Muted tint a tier below the card; shares the page-chrome rhythm and carries a bottom hairline. |
Sorting
| Component | Kind | Slots | Description |
|---|---|---|---|
| SortChip | key | 9 | Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint. |
| SortGroup | key | 6 | Active-sort chips strip. A sunken tint a tier below the card so it reads as a distinct band from the primary-tinted filter strip above it. Shares the page-chrome rhythm and carries a bottom hairline. |