LedGrab · Entity Card · v2 (dashboard convergence)

One card system,
the dashboard's vocabulary.

v2 drops the parallel "patchbay rail" I sketched in v1 and adopts the existing .mod-head / .mod-leds / .mod-metrics / .mod-patch / .mod-btn classes from dashboard.css verbatim. Same instrument-style numerics, same recessed LED clusters, same patch indicator. Entity cards inherit dashboard polish; nothing new gets invented.

AUTO · 07

Movie Night

Plex playing · 21:00 — 23:30

21:00 — 23:30 + Plex playing → Cinema scene

ARMED

SCN · 04

Sunset Warmth

4 targets · captured 21 Apr · used by 2 automations

Warm tungsten cast on every fixture for a 19:00 unwind. Recapture re-snapshots all targets in their current colors.

PRESET

CLK · MASTER

Master Tempo

Square · 1/16 sub · drift ±0.3ms

BPM

110.0

PHASE

0.42

SUB

1/16

TICKING

GAME · CSGO

Counter-Strike 2

GSI · port 3456 · 12 mapped events

flash defuse round-end +9 more

LISTENING · 12s ago

How v2 maps to the dashboard

Same shell, same classes. .module mirrors .dashboard-target:has(.mod-head) down to padding and the always-on left stripe at 0.6→1.0 opacity.

Inline .mod-badge replaces my v1 top rail. Channel-tinted mono caps pill at the top-left of .mod-id — exactly the dashboard pattern, no extra band needed.

.mod-leds recessed cluster next to the title — multiple dots in a hairline bezel, real-hardware feel. Single LED card-types use one dot in the same bezel.

Numerics use var(--font-display). Big Shoulders Display, 2rem, 800-weight, tabular-nums. Already bundled in fonts/big-shoulders-display-latin.woff2 and only used on dashboard + perf cards today.

.mod-patch footer label on every card: PATCHED · OUT-1, STREAMING, OFFLINE, STANDBY, ARMED, PRESET, READY. Channel-colored dot on the left, mono caps state label — the strongest "this is rack hardware" cue.

.mod-btn with text labels for primary/secondary actions in the footer (START / STOP / EDIT). Tertiary square .mod-btn-icon variant for settings.

Card-color is identity, not an action. A 10px .mod-badge__color dot leads every .mod-badge — channel-tinted by default, fills with the user's picked color when overridden. Click to open the picker. Lives with the type label it tints, not in a destructive cluster.

Single overflow menu (kebab) replaces the v2.0 corner huddle. Always visible at 0.34 opacity, brightens on card-hover. Click to open Duplicate / Hide card / ─── / Delete. One control, isolated, touch-and-keyboard accessible — and easily extended (Move to section, Export) without re-cramping the corner.

Why this works: destructive actions are no longer adjacent to cosmetic ones (no more "delete next to color picker"); the menu groups management actions semantically; the corner reads as quiet metadata instead of a row of buttons; every interaction is discoverable without hover.

Properties unify. .card-meta + .stream-card-prop → single .chip system with three modifiers: default, .chip--link for crosslinks, .chip--tag for tag pills, .chip--err for error states. Filter chains use chips + .chain-arrow separators.

Three body slots compose every card type: .mod-metrics (numeric readouts) · .mod-chips (qualitative metadata, crosslinks, filter chains) · .mod-preview (gradient strip / asset thumb / live LED preview). Plus optional .mod-fader (LED targets) and .mod-desc (descriptions).

v1 → v2 specifics

Dropped the 32px top rail band → moved to inline .mod-badge at top-left.

Mono LCD-style readouts → display-font instrument readouts at 2rem 800.

Single status dot → .mod-leds 1–3 LED bezel.

Square icon-only footer buttons → .mod-btn with text labels for state-changing actions; icon variant kept for settings/edit only.

Added .mod-patch footer indicator on every card.

Restored the corner bracket (idle) and the running signal-flow animation.

Corner cluster killed. The "swatch + hide + delete" huddle is gone. Color is now a 10px identity dot inside the badge; hide and delete moved into a single overflow menu.

Field cleanup: paper-grain overlay removed (dashboard cards don't use it; not part of the established language).

Implementation footprint

CSS: the .mod-* rules already exist in dashboard.css. The entity-card variant just needs .card:has(.mod-head) / .template-card:has(.mod-head) selectors that copy .dashboard-target:has(.mod-head)'s padding/layout — or alias all three to a shared .module class.

JS: wrapCard() in card-colors.ts already handles the wrapper, color stripe, and corner actions. Add an optional second signature: wrapCard({ mod: { badge, name, meta, leds, metrics, chips, preview, fader, patch, primaryAction } }) that emits the dashboard markup. Existing content/actions path stays for incremental migration.

Per feature: each create*Card() swaps its hand-rolled .card-header + .card-subtitle + .stream-card-props for the structured mod options. Localised, low-risk, can ship one card type per PR.

Cards.css cleanup: remove the [data-has-color="1"], .card-running gate on the ::before stripe so the channel signal becomes ambient. Single line change.