ui · semantic components, pure CSS

live 0
wire connected · 8 channels · seq 1041 ok

ui.css

One stylesheet, two moods.

Semantic classes on custom properties. Light is white and green; dark is black and gold. No Tailwind required — and no Tailwind broken.

Read the contract ⌘K

tokens

Palette

--ui-bg
--ui-surface
--ui-sunken
--ui-border-strong
--ui-accent
--ui-ok
--ui-warn
--ui-warn-ink
--ui-danger
--ui-info
--ui-fg

controls

Buttons, pills, badges, chips

Buttons

7
latched state is .is-on

Pills & badges

neutral accent connected 3 gaps wire down fixture
12 new pass deg 4 v2
wpm 172 eot p50 412ms drift +38ms drops 2

Form

Toolbar row — .input-sm, .select-sm
The small input takes the same scale; each select stops at its longest option plus the caret gutter.
Markdown is not interpreted.
Expected an integer.

Notices

Replaying a fixture. Nothing you click reaches the live loop.
Contract satisfied — every sequence number accounted for.
3 gaps in the ears channel.
Wire closed after 1 attempt. The loop is not running.

instrument

Panels, readouts, transcripts

ears

transcription 418
owner · 00:12.4

set the kitchen light to forty fourteen

ra · 00:13.9

Kitchen light at forty percent.

mouth

playback speaking
172 words / minute
−38ms first-audio

wire

event mirror seq 1041 
00:12.401 ears.partial  "set the kitchen light to"
00:12.688 eot.head      p=0.41 head=prosody
00:13.002 ears.final    "set the kitchen light to forty"
00:13.117 policy.speak  allow reason=turn-yielded
00:13.904 play.start    voice=af_heart speed=1.15

Voice roster

voicelocalewpmwarmstate
af_hearten-US1720.4 sresident
am_michaelen-US1641.9 scold
bf_emmaen-GB1582.1 sevicted
bm_georgeen-GB151—missing
28 voices advertised · 4 shown

led

room ledger

nothing on the wire yet

Voices

click a row to audition 28

Strips

chrome, not content — these go full-bleed under the appbar
wirewaiting for the stream…
wireconnected · 8 channels
sourcereplaying fixture kitchen-evening.jsonl
modebridge · Claude has the floor
gaps3 missing sequence numbers on ears
wireclosed after 1 attempt — the loop is not running

The hidden attribute

A base-layer guard makes [hidden] outrank every component display rule, so a flex pill, a grid panel and a full-bleed strip all vanish without a utility class.

a pill and another
a panel
display: grid at rest.
stripdisplay: flex at rest.

Statically hidden, and never rendered:

shortcuts

Spacemute the mic
JKstep the cursor
⌘⇧Ljump to live

A hoverable card lifts on .card-hoverable. See the README for the theming contract.

icons

Phosphor subset

28 regular-weight glyphs, vendored. MIT © Phosphor Icons.