@signapps/dashboard
The dashboard configuration model: the card type system, the grid layout model, and the logic that composes preset + customer dashboard fragments into a runtime config. Pure types and logic — no React.
- Workspace:
packages/dashboard· leaf package (no deps) - Build:
tsc -b --force→dist/
The visual mechanics of the grid (12-column model, x/y coordinates, drag/resize)
are how the @signapps/ui editor renders these configs.
Card type system
ReactDashboardCard is a discriminated union by type:
type | Card |
|---|---|
light | Light entity (brightness/RGB/color-temp) |
temperature / weather / motion / curtain | Entity cards |
| (temp+humidity) | TempHumidityDashboardCard |
| (sensor) | SensorDashboardCard (numeric) |
markdown | Static markdown content |
section | Container (columns, cards[]) |
grid | Named-area grid (columns, layout[][], cards[]) |
DashboardCardCommon carries shared props (entity, name, icon, area, layout
density, MQTT device binding, control entity). GridCard adds explicit
x1/x2/y1/y2 placement (1-based, CSS-grid convention).
Composition
composeReactDashboard(preset, customer) merges two fragments — the preset is
the base; the customer fragment can disable, rename, hide,
override, or append views:
A ReactDashboardFragment supports enabled, title, views, hide_views,
view_overrides, and views_append.
Grid utilities
Helpers convert between the declarative model (named areas) and the
explicit placement model: configToGridLayout, namedAreasToGrid,
gridToNamedAreas, gridCardToStyle, inferLightLayoutFromGrid,
getGridSpans, cardOverlapsAny, and more. Cards have layout densities
(tiny, compact, default, full) that affect their grid span.
Consumed by
@signapps/ui (rendering + editor), the web admin, and the API
(dashboard serialization).