# Luma Home — components

Layout and look of every building block. All sizes are logical px on the 1920 × 1080 canvas;
named values are in `tokens.json`. Behaviour lives in `ux-mechanics.md` — this file only says
what things look like. Each section names the screen render to compare against.

## Screen shell
Render: `screens/Main.png`, `screens/Home.png`

| Part | Spec |
|---|---|
| Background | Wallpaper photo + scrim `color.background.scrim` (8,11,18 @ 80%). |
| Clock | x 84, centred in the 72 px top bar at y 36; 20 px / 500. |
| Top nav | Centred pill, fill `nav.pill`, 6 px padding, items 10 × 28 px padding, 20 px. Active item: fill `nav.activeTab`, ink `text.tabActiveInk`, 600. |
| Settings button | 56 px circle, right edge at x 1836. |
| Room tabs | Row at y 124, height 60, gap 8. Tab padding 10 × 22, 17 px. Active: fill `nav.activeRoom`, 600. Inactive ink `nav.inactive`. |
| Grid | x 84, y 206, 1752 × 756; 3 rows of 240, gap 18; 4 columns of 424 or 3 of 572 (`grid` tokens). |
| Hint bar | x 84, 30 px from the bottom; items 40 px apart. Key cap: 2 px border white 60%, radius 6, 11 px / 700, padding 2 × 8. Label 14 px / 500, white 80%. |

## DeviceCard (1×1)
Render: `screens/Main.png`, `screens/*States.png`

- Box: fills the cell; radius 22; padding 18; border 2 px; fill/border/shadow from `color.card` (focus variants when focused).
- Glow (on): radial gradient at (42, 42) of the accent at 38% → transparent at 72%.
- **Top row** (gap 14): 48 px icon circle (24 px icon) · name 19 px / 600, single line, ellipsis · value 20 px / 700, right-aligned.
- **Middle band** (flex, margin 12 top / 10 bottom), one of:
  - `spark` — 64 px tall polyline, 3 px stroke in the accent (grey `lineOff` when off), labels "24 h" / "now" 12 px below.
  - `bar` — 12 px track `barTrack`, radius 6, fill = accent at the level %.
  - `swatch` — 34 px strip, radius 10: solid colour or the effect gradient.
  - `curtain` — 5 px rail, three window panes (2 px outline white 22%), two fabric panels each `(100 − position) / 2` % wide with a 4 px edge in the accent.
  - `image` — appliance photo on the **right** (max 120 px, square, contain), facts on the left: label 12 px white 60%, value 14 px / 700 (highlight = accent, `warn` = `accent.warning`).
  - none — empty band (on/off lights, switches).
- **Warning subtitle** (`subWarn`): amber `#F2B84B`, 600 — battery low, window open, dock needs attention.
- **Offline**: whole card at 50 % opacity, value "Offline".
- **Subtitle**: 14 px / 500, white 72%, single line, at the bottom.
- 3-column grid: same layout in the 572 px cell.

## WeatherCard
Render: `screens/WeatherStates.png`

- 1×1: weather icon, current temperature (large), condition, humidity, wind, high/low.
- 1×2 (498 tall): the 1×1 content on top, the **5-day forecast** below (day, icon, low–high).

## MediaCard
Render: `screens/MediaStates.png`, `screens/MediaSpec.png`

- Background: card fill + purple radial glow (128, 96, 192 @ 42%) from the top-left.
- **1×1**: 84 px artwork (radius 10) · status "Playing · Spotify" 13 px / 600 `accent.mediaLabel` with the volume readout right-aligned on the same line (15 px volume icon + "24%" 14 px / 700) · title 19 px / 700 · artist 15 px.
- **1×2**: 220 px artwork centred (radius 14) · status + volume line (20 px tall) · title 24 px · artist 17 px · elapsed / remaining 13 px under the progress bar.
- Progress: 4 px track white 22%, fill white.
- Buttons (gap 26, centred): Previous 52 px · Play/Pause 62 px filled `accent.media` with dark icon · Next 52 px; idle buttons white 10%.
- Focus: ring on the focused button (4 px, offset 4, dark gap), never on the card.
- Seeking: the held button turns white with dark icon; 16 px playhead dot with a 4 px purple halo; white bubble 14 px / 700 above it.
- Volume change: readout becomes a white pill (dark ink, padding 0 8, radius 9–10).

## VacuumCard
Render: `screens/VacuumStates.png`

DeviceCard with the `image` band: photo `assets/roborock-s7.png` (transparent cut-out, in this folder).
Cleaning facts: Mode (highlighted), Now in. Docked facts: Battery, Water · clean / dirty.

## RoomCard
Render: `screens/RoomStates.png`, `screens/Home.png`

- Box: as DeviceCard. Background: the Home Assistant area photo (fetched from HA, never bundled — `ux-mechanics.md` §B11), cover-cropped, under a gradient
  `rgba(8,11,18,.78) 0% → 0 at 32% → 0 at 40% → .84 at 66% → .94 at 100%`. Lights off: photo `brightness(0.45) saturate(0.2)`.
  No photo: glass fill + gold glow while any light is on.
- Top row as DeviceCard; text gets a soft shadow `0 1px 6px rgba(0,0,0,.75)` over a photo.
- Bottom line (8 px above the subtitle): three stats, gap 22, each a 20 px icon + value 18 px / 700. Colours: lights `accent.light`, curtains `accent.curtain` (white 75 % when closed), air `aqGood` / `aqFair` / `aqPoor`.
- Subtitle 14 px, white 78 %; warnings `warning` 600.

## Panel (shared)
Renders: every `*States.png` (right side)

- 620 × 1080 at the right edge, radius 28, fill `panel.fill`, shadow `shadow.panel`, padding 56 / 56 / 48.
- Header: eyebrow (room) 16 px white 72% · 56 px icon circle (accent fill, 30 px icon) · title 34 px / 700 · state line 18 px / 600 in the accent.
- Sections: label 19 px / 600, 44 px below the header, 40 px between sections, control 14 px below its label.
- Slider: 72 px tall, radius 18, track white 12%, fill accent, value 28 px / 700 inside on the left. Help line 15 px white 74% below.
- Buttons / presets: 64 px tall, radius 16, gap 12, 20 px / 600, fill white 10%. Selected: accent at 26% fill + 3 px inset accent edge (or solid accent with dark ink for the primary choice).
- Focus inside panels: 4 px white ring, offset 5, with a 5 px dark gap.
- Hint bar pinned to the bottom of the panel (same style as the screen hint bar).

### Panel contents
| Panel | Sections (top → bottom) | Render |
|---|---|---|
| Dimmable light | Brightness · Presets (Off, 25, 50, 100 %) | `LightStates.png` |
| Colour light | Brightness · Light type (White / Colour) · White temperature or Hue · Swatches | `LightColorStates.png` |
| LED / TV lights | Brightness · Light · Temperature or Hue · White or Colour presets · Effects (6 pinned + All effects) | `LedStates.png` (colour, white, all effects) |
| All effects | Pinned group (numbered, "Not on panel" tag after 6) · All effects A–Z; gold star = pinned | `LedStates.png` (right) |
| AC | Target · Mode (5 icons) · Fan speed · auto (Auto, Quiet, Turbo) · Fan speed · manual (5 steps) · Up–down airflow · Left–right airflow (Swing + 5, icon-only) | `ClimateStates.png` |
| Heating | Target dial (with room temp) · Mode (Off / Heat) · Preset · Temperature sensor (thermostat) · Settings toggles · battery / info line | `HeatingStates.png` |
| Curtain | Window drawing + position · Open / Stop / Close · Presets (Open, 60, 45, 30, Closed) | `CurtainStates.png` |
| Weather | Now · Humidity · Wind · Next hours · Next days | `WeatherStates.png` |
| Media | Now playing · Play on · Up next · Search | `MediaStates.png` |
| Room quick panel | Header (temperature · humidity · air) · Lights with All off + one switch row each · Curtains rows with Open / Stop / Close · Climate rows with switches | `RoomStates.png` |
| Vacuum | Rooms (3-column grid, check + green edge when picked) · Mode · Routines + Dock · primary "Clean N rooms" (solid green, 64 px) | `VacuumStates.png` |

## Icons
`icons/` — 58 single-colour SVGs (Uicons Regular Rounded + two custom), tinted at render time:
dark ink `#15181E` on an accent circle when on, white 80% on a grey circle when off.
See `icons/README.md` for the name map and the required attribution.