OH
OUTER HEAVEN
Component Deck

Framework Surface Index

Inspect the primitives as a working catalog, not as isolated snippets.

This page exists to validate sizes, tones, states, and compositional fit before future releases expand the contract.

New primitives
Textarea / Checkbox / Switch / Tabs / Tooltip
Stable base
Button / Input / Select / Panel / Dialog / Toast
Intent
Catalog + test bed + adoption reference

Controls

Inputs and toggles

The same semantic props now cover single-line fields, long-form inputs, boolean toggles, and guided selection.

Inspect0.1.0
Query

Single-line tactical inputs keep the inset label model.

Lane

Selection surfaces use the same chrome contract.

Review gate

Escalate this route before export.

Approval

A valid approval lane is required.

Operator note

Textarea extends the same field shell for long-form tactical copy.

Live relay monitoringControlled boolean API with explicit focus treatment.
Fallback uplinkDisabled switches preserve the same visual family.

RadioGroup

Tone Matrix

primarysuccesswarningdangermuted

Field Size Lab

Input, Select, and Textarea now share a full `xs` to `xl` ladder. This lab keeps content constant so the size changes stay visible in both native and wrapped modes.

FieldSize xs-sm-md-lg-xl

Bare fields

Native field chrome only. Same copy, same options, same placeholder, different scale.

Input

xs

sm

md

lg

xl

Select

xs

sm

md

lg

xl

Textarea

xs

sm

md

lg

xl

Wrapped fields

Same ladder, but through the actual product shell: inset label, prefix, helper copy, and textarea rhythm.

Input shell

xs

Query

Shared hint copy for shell comparison.

sm

Query

Shared hint copy for shell comparison.

md

Query

Shared hint copy for shell comparison.

lg

Query

Shared hint copy for shell comparison.

xl

Query

Shared hint copy for shell comparison.

Select shell

xs

Lane

Chevron, prefix, and text should keep one optical line.

sm

Lane

Chevron, prefix, and text should keep one optical line.

md

Lane

Chevron, prefix, and text should keep one optical line.

lg

Lane

Chevron, prefix, and text should keep one optical line.

xl

Lane

Chevron, prefix, and text should keep one optical line.

Textarea shell

xs

Operator note

Same copy, different shell rhythm.

sm

Operator note

Same copy, different shell rhythm.

md

Operator note

Same copy, different shell rhythm.

lg

Operator note

Same copy, different shell rhythm.

xl

Operator note

Same copy, different shell rhythm.

State and density

Density should adjust rhythm, not erase the scale. Warning, error, and disabled states should remain legible at larger sizes.

Density sweep

COMPACT

Compare spacing without changing scale.

DEFAULT

Compare spacing without changing scale.

ROOMY

Compare spacing without changing scale.

State sweep

Warning

Warning should stay visible at xl.

Approval

Error state should keep the same field shell geometry.

Disabled

Contract note

The field family now has one explicit public ladder: `xs`, `sm`, `md`, `lg`, `xl`. The demo keeps placeholder, label, prefix, and helper copy stable so visual differences can be judged at a glance.

Reference

All other field sizes should read as a clear step away from this baseline.

xssmmdlgxl

Trigger contract

Tabs now expose a lightweight segmented command surface with shared semantic metadata.

Panel contract

Panels render only the active content by default and can later grow toward a richer content switcher.

Roadmap fit

This is intentionally a narrow API so future releases can stay compatible while adding richer navigation patterns.

Panel Size Matrix

Panels accept a size prop that controls geometry, corner cut, and minimum height. When empty, they switch to a dashed placeholder treatment automatically.

Small

Compact footprint for secondary panels, sidebar cards, or metadata slots.

Medium

Default surface used across most dashboard contexts. Balanced padding and min-height.

Large

Hero-grade containers for primary data views, mission briefings, or highlight regions.

Empty State

Empty panels render a dashed border and transparent background, signaling an unfilled slot.

Variant Completion

v0.4 closes the remaining size gaps so micro-actions, compact forms, and hero-grade calls to action all stay inside the same semantic contract.

Button sizes

Badge sizes

xssmmdlg
XSSMMDLGXL

Control sizes

xs

XS monitor

sm

SM monitor

md

MD monitor

lg

LG monitor

xl

XL monitor

Tabs sizes

Trigger height, internal padding, and panel rhythm scale with xs.

Trigger height, internal padding, and panel rhythm scale with sm.

Trigger height, internal padding, and panel rhythm scale with md.

Trigger height, internal padding, and panel rhythm scale with lg.

Trigger height, internal padding, and panel rhythm scale with xl.

Overlay sizes

Signal Relay

XS relay notice

Toast sizing changes width, padding, and the content hierarchy without changing tone semantics.

Signal Relay

SM relay notice

Toast sizing changes width, padding, and the content hierarchy without changing tone semantics.

Signal Relay

MD relay notice

Toast sizing changes width, padding, and the content hierarchy without changing tone semantics.

Signal Relay

LG relay notice

Toast sizing changes width, padding, and the content hierarchy without changing tone semantics.

Signal Relay

XL relay notice

Toast sizing changes width, padding, and the content hierarchy without changing tone semantics.

Kbd and Dropzone sizes

XSSMMDLGXL

XS upload

XS payload lane

Dropzone padding, copy hierarchy, and sidecar action area all scale with size.

PNG, PDF, TAR

Ready

Operators can inspect the upload contract without guessing which sizes are actually supported.

MD upload

MD payload lane

Dropzone padding, copy hierarchy, and sidecar action area all scale with size.

PNG, PDF, TAR

Ready

Operators can inspect the upload contract without guessing which sizes are actually supported.

XL upload

XL payload lane

Dropzone padding, copy hierarchy, and sidecar action area all scale with size.

PNG, PDF, TAR

Ready

Operators can inspect the upload contract without guessing which sizes are actually supported.

Density Sweep

Compact, default, and roomy now behave as first-class presentation choices across primitives and compositions instead of existing only on select surfaces.

Primitive baseline

One compact control stack to compare base rhythm before heavier compositions.

compact

Tightest rhythm

LiveF
Query
Relay monitor

default

Balanced baseline

LiveF
Query
Relay monitor

roomy

Most open rhythm

LiveF
Query
Relay monitor

Header and controls

Compare title rhythm first, then the filter body and control spacing below it.

compact

Tightest rhythm

Header spacing

compact command rhythm

Spacing changes should stay structural, not decorative.

Density
compact

Header + controls

Lane filters

Header spacing and controls rhythm should visibly scale.

Header spacingControls rhythm
Query
Lane

default

Balanced baseline

Header spacing

default command rhythm

Spacing changes should stay structural, not decorative.

Density
default

Header + controls

Lane filters

Header spacing and controls rhythm should visibly scale.

Header spacingControls rhythm
Query
Lane

roomy

Most open rhythm

Header spacing

roomy command rhythm

Spacing changes should stay structural, not decorative.

Density
roomy

Header + controls

Lane filters

Header spacing and controls rhythm should visibly scale.

Header spacingControls rhythm
Query
Lane

Metric cards

The same three stats should show card padding and value hierarchy changes immediately.

compact

Tightest rhythm

Queued

18

Card padding should step visibly across densities.

Review

07

Item rhythm should open up without changing hierarchy.

Cleared

26

Roomy should feel broader, not just slightly taller.

default

Balanced baseline

Queued

18

Card padding should step visibly across densities.

Review

07

Item rhythm should open up without changing hierarchy.

Cleared

26

Roomy should feel broader, not just slightly taller.

roomy

Most open rhythm

Queued

18

Card padding should step visibly across densities.

Review

07

Item rhythm should open up without changing hierarchy.

Cleared

26

Roomy should feel broader, not just slightly taller.

List rhythm

Feed and queue stay paired so item spacing reads as one family across densities.

compact

Tightest rhythm

Item rhythm

Signals

Relay sweep complete

success

Item rhythm should separate updates into readable slices.

02m ago

Manual review required

warning

Header spacing and item spacing should both grow with density.

11m ago

Queue spacing

Queue

item rhythm

Archive-17.tar

Owner NEST-04 / card padding reference

Ready

relay-index.csv

Owner FIELD-12 / action gap reference

Review

default

Balanced baseline

Item rhythm

Signals

Relay sweep complete

success

Item rhythm should separate updates into readable slices.

02m ago

Manual review required

warning

Header spacing and item spacing should both grow with density.

11m ago

Queue spacing

Queue

item rhythm

Archive-17.tar

Owner NEST-04 / card padding reference

Ready

relay-index.csv

Owner FIELD-12 / action gap reference

Review

roomy

Most open rhythm

Item rhythm

Signals

Relay sweep complete

success

Item rhythm should separate updates into readable slices.

02m ago

Manual review required

warning

Header spacing and item spacing should both grow with density.

11m ago

Queue spacing

Queue

item rhythm

Archive-17.tar

Owner NEST-04 / card padding reference

Ready

relay-index.csv

Owner FIELD-12 / action gap reference

Review

Detail surface

The inspector closes the sweep with body and footer spacing only.

compact

Tightest rhythm

Footer spacing

Inspector

Body spacing

Footer spacing, body rhythm, and header separation should all respond to the same density selection.

default

Balanced baseline

Footer spacing

Inspector

Body spacing

Footer spacing, body rhythm, and header separation should all respond to the same density selection.

roomy

Most open rhythm

Footer spacing

Inspector

Body spacing

Footer spacing, body rhythm, and header separation should all respond to the same density selection.

State Audit

Disabled, loading, warning, and error paths should stay legible whether the state is applied directly or inherited through a disabled fieldset.

Button states

Field states

Compromised

This route needs manual review.

Escalation
Readonly handoff

Fieldset cascade

Inherited disable
Inherited switch

Wrapper chrome should dim when the browser disables descendants through fieldset inheritance, not only when each child gets a local prop.

Adoption note

The component deck is intentionally product-like. It doubles as a regression surface for future framework work and as a documentation page that downstream teams can scan without reverse-engineering the dashboard example.