Architecture Overview

Sections Mod is a runtime presentation layer. It changes how a Sections view is rendered without changing the dashboard definition, duplicating cards, or breaking the native editor.

How Home Assistant renders a Sections view

ha-panel-lovelace → hui-root → hui-view → hui-sections-view

• hui-view builds the live HuiSection DOM nodes and hands them to a layout element (hui-sections-view) as a property.
• hui-sections-view arranges those already-built section nodes in a pure CSS grid.

The key insight: the section nodes are pre-built and arranged by CSS. Changing the arrangement does not require rebuilding any card — only restyling the container that already holds them.

Approach

Home Assistant offers no official registry for custom view layouts. The available mechanisms each trade off a different principle:

Mechanism	Dashboard unchanged	Editor intact	No monkey-patch
CSS-only over native hui-sections-view	✅	✅	isolated DOM read only
Custom custom: view layout element	type swapped	must reimplement section editing	needs an interception point
Dashboard strategy	dashboard becomes strategy-driven	editing disabled	official

Sections Mod v1 builds on the CSS-first approach: it injects a scoped stylesheet onto the native Sections view. Swipe is expressed with CSS scroll-snap, so the dashboard config and the native editor stay fully intact. The custom-element path is reserved as a per-layout escape hatch for future layouts CSS cannot express.

The one unavoidable compromise is a small, isolated and defensive DOM read to locate the rendered Sections view — quarantined entirely inside a single HaDomAdapter module that degrades to a no-op if Home Assistant's internal structure changes.