Add initial value setting to input_boolean helper dialog

Accept hostnames in HTTP config listen addresses and localize number validation

.agents/skills/ha-frontend-components/SKILL.md

@@ -7,6 +7,8 @@ description: Home Assistant frontend component patterns. Use when implementing o
 
 Use this skill when creating or reviewing Home Assistant UI components and common interaction patterns.
 
+Cross-load `ha-frontend-events` when component work includes event listener typing, custom event dispatch, or event-map declarations.
+
 ## Dialogs
 
 Open dialogs through the fire-event pattern:
@@ -23,11 +25,10 @@ Dialog implementation requirements:
 
 - Use `ha-dialog`.
 - Use `DialogMixin`, which implements `HassDialogNext<T>`, for new dialogs. See `src/dialogs/dialog-mixin.ts`.
+- Read dialog parameters from the mixin's `params` property and render the dialog open. Return `nothing` while required parameters are absent.
+- Call the mixin's `closeDialog()` to close a new dialog. The mixin handles the `closed` event, fires `dialog-closed`, and removes the host element.
 - Existing dialogs may implement the legacy `HassDialog<T>` interface from `src/dialogs/make-dialog-manager.ts`.
-- Use `@state() private _open = false` to control visibility.
-- Set `_open = true` in `showDialog()` and `_open = false` in `closeDialog()`.
-- Return `nothing` while required params are absent.
-- Fire `dialog-closed` in the close handler.
+- Preserve the existing `showDialog()`, open-state, and close-event lifecycle when maintaining a legacy dialog; do not copy that lifecycle into a `DialogMixin` dialog.
 - Use `header-title` and `header-subtitle` for simple header text.
 - Use slots when standard header attributes are not enough.
 - Use `ha-dialog-footer` with `primaryAction` and `secondaryAction` slots.
@@ -64,7 +65,7 @@ Use `computeLabel`, `computeError`, and `computeHelper` for translated labels, v
   .data=${this._data}
   .schema=${this._schema}
   .error=${this._errors}
-  .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
+  .computeLabel=${(schema) => this._localize(`ui.panel.${schema.name}`)}
   @value-changed=${this._valueChanged}
 ></ha-form>
 ```
@@ -78,10 +79,16 @@ Use `ha-alert` for user-visible status messaging.
 - Slots: `icon` for custom leading icon, `action` for custom action content.
 - Content is announced by screen readers when dynamically displayed.
 
-```html
-<ha-alert alert-type="error">Error message</ha-alert>
-<ha-alert alert-type="warning" title="Warning">Description</ha-alert>
-<ha-alert alert-type="success" dismissable>Success message</ha-alert>
+```ts
+html`
+  <ha-alert alert-type="error">${this._localize("ui.example.error")}</ha-alert>
+  <ha-alert alert-type="warning" .title=${this._localize("ui.example.warning")}>
+    ${this._localize("ui.example.description")}
+  </ha-alert>
+  <ha-alert alert-type="success" dismissable>
+    ${this._localize("ui.example.success")}
+  </ha-alert>
+`;
 ```
 
 ## Shortcuts And Tooltips

.agents/skills/ha-frontend-contexts/SKILL.md

@@ -23,27 +23,27 @@ Container components may keep `hass` when they own it and feed providers. Leaf c
 
 ## Context Selection
 
-| Context                                                              | Replaces                                                                               |
-| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| `statesContext`                                                      | `hass.states`                                                                          |
-| `entitiesContext`, `devicesContext`, `areasContext`, `floorsContext` | `hass.entities`, `hass.devices`, `hass.areas`, `hass.floors`                           |
-| `registriesContext`                                                  | all four registries together                                                           |
-| `servicesContext`                                                    | `hass.services`                                                                        |
-| `internationalizationContext`                                        | `hass.localize`, `hass.locale`, `hass.language`                                        |
-| `formattersContext`                                                  | entity and attribute formatters                                                        |
-| `configContext`                                                      | `hass.config`, `hass.user`, `hass.auth`, `hass.userData`                               |
-| `connectionContext`                                                  | `hass.connection`, `hass.connected`, `hass.hassUrl`                                    |
-| `apiContext`                                                         | `hass.callService`, `hass.callApi`, `hass.callWS`, `hass.sendWS`, `hass.fetchWithAuth` |
-| `uiContext`                                                          | themes, selected theme, panels, sidebar, and UI state                                  |
-| `narrowViewportContext`                                              | narrow-layout boolean                                                                  |
+| Context                                                              | Replaces                                                                                                  |
+| -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `statesContext`                                                      | `hass.states`                                                                                             |
+| `entitiesContext`, `devicesContext`, `areasContext`, `floorsContext` | `hass.entities`, `hass.devices`, `hass.areas`, `hass.floors`                                              |
+| `registriesContext`                                                  | all four registries together                                                                              |
+| `servicesContext`                                                    | `hass.services`                                                                                           |
+| `internationalizationContext`                                        | `hass.localize`, `hass.locale`, `hass.language`                                                           |
+| `formattersContext`                                                  | entity and attribute formatters                                                                           |
+| `configContext`                                                      | `hass.config`, `hass.user`, `hass.auth`, `hass.userData`                                                  |
+| `connectionContext`                                                  | `hass.connection`, `hass.connected`, `hass.debugConnection`, `hass.hassUrl`                               |
+| `apiContext`                                                         | `hass.callService`, `hass.callApi`, `hass.callApiRaw`, `hass.callWS`, `hass.sendWS`, `hass.fetchWithAuth` |
+| `uiContext`                                                          | themes, selected theme, panels, sidebar, and UI state                                                     |
+| `narrowViewportContext`                                              | narrow-layout boolean                                                                                     |
 
-Lazy contexts subscribe on first consumer and tear down after the last consumer: `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, and `manifestsContext`.
+Lazy contexts subscribe on first consumer and tear down after the last consumer: `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, `manifestsContext`, `triggerDescriptionsContext`, and `conditionDescriptionsContext`.
 
 The single-field contexts such as `localizeContext`, `themesContext`, and `userContext` are deprecated. Use grouped contexts instead.
 
 ## Consumption Patterns
 
-Use entity-scoped helpers when the component watches an entity id held on the host:
+Use entity-scoped helpers when the component watches an entity ID held on the host:
 
 ```ts
 @state() @consumeEntityState({ entityIdPath: ["_config", "entity"] })
@@ -56,6 +56,13 @@ private _entity?: EntityRegistryDisplayEntry;
 private _localize!: LocalizeFunc;
 ```
 
+Use `consumeEntityStates` when the host property contains one or more entity IDs. It filters missing entities and preserves the previous record when none of the selected entities changed.
+
+```ts
+@state() @consumeEntityStates({ entityIdPath: ["_config", "entities"] })
+private _stateObjs?: Record<string, HassEntity>;
+```
+
 For a single field from a grouped context, pair `@consume` with `@transform`:
 
 ```ts
@@ -65,7 +72,7 @@ For a single field from a grouped context, pair `@consume` with `@transform`:
 private _themes!: Themes;
 ```
 
-Use `@transform` with `watch` when the transformer depends on a host property, such as a computed entity id. `consumeEntityState` only watches the first path segment.
+Use `@transform` with `watch` when the transformer depends on a host property, such as a computed entity ID. `consumeEntityState` and `consumeEntityStates` only watch the first path segment.
 
 To consume a whole group untransformed, omit `@transform` and type the field as `ContextType<typeof statesContext>` or the matching context type.
 

.agents/skills/ha-frontend-demo/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: ha-frontend-demo
+description: Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification. Use when changing files under demo/, changing gallery consumers of demo/src/stubs/, or running and validating the demo.
+---
+
+# HA Frontend Demo
+
+Use this skill for standalone demo work and changes to shared demo stubs consumed by the gallery. Follow the persistent repository guidance in `AGENTS.md` and load matching specialist skills alongside this skill, especially `ha-frontend-testing` when running or validating the demo.
+
+## Purpose
+
+The demo is the full Home Assistant frontend running against a mocked backend and is published at <https://demo.home-assistant.io>. It needs no Home Assistant server, which makes it the easiest way to load the real UI in a browser, for example to take screenshots.
+
+## Running The Demo
+
+Run commands from the repository root:
+
+```bash
+yarn dev:demo               # Development server on http://localhost:8090
+yarn dev:demo --background  # Detached; also supports --status/--stop/--logs
+```
+
+Use the E2E workflows documented in `ha-frontend-testing` when validating the demo.
+
+## Opening A Specific Demo
+
+The demo contains multiple demo configurations. Select one directly with the `demo` query parameter, for example `http://localhost:8090/?demo=<slug>`. The valid slugs are defined in `demoConfigs` in `demo/src/configs/demo-configs.ts`, so "the second demo" means the slug of the second entry in that list. An unknown slug falls back to the default, which is the first entry.
+
+## Opening A Specific Page
+
+The demo build uses hash-based routing: the frontend path goes in the URL hash, and the `demo` query parameter goes before the `#`. The URL format is:
+
+```text
+http://localhost:8090/?demo=<slug>#/<path>
+```
+
+Useful paths:
+
+- `/lovelace/0`: The selected demo's dashboard, also the default when no hash is given.
+- `/energy`: The energy dashboard. Its tabs are views: `/energy/overview` (Summary), `/energy/electricity`, `/energy/gas`, `/energy/water`, and `/energy/now`.
+- `/map`, `/history`, `/todo`, `/config`: Other sidebar panels.
+
+For example, the water tab of the energy dashboard of the second demo is:
+
+```text
+http://localhost:8090/?demo=<second slug>#/energy/water
+```
+
+## Structure
+
+- `demo/src/ha-demo.ts`: Root element that sets up all backend mocks.
+- `demo/src/configs/<slug>/`: One directory per demo configuration, containing entities, dashboard, and theme data.
+- `demo/src/configs/demo-configs.ts`: Registry of demo configurations and URL slug handling.
+- `demo/src/stubs/`: Mocked WebSocket and REST APIs.
+- `demo/script/develop_demo`, `demo/script/build_demo`: Development server and static build wrappers.
+
+## Shared Gallery Stubs
+
+`demo/src/stubs/` is shared, not demo-private: gallery pages import from it directly. Before changing or removing anything a stub does, search for its callers across `demo/src/` and `gallery/src/`, then check the affected gallery pages as well as the demo.
+
+The two consumers use a stub differently, so demo behavior does not predict gallery behavior. A gallery page calls stubs against the `hass` from `provideHass`, where `hass.config` is the shared `demoConfig` object. A stub that mutates `hass.config` in place is therefore visible to the page. `demo/src/ha-demo.ts` copies `components` into a new array before the stubs run, so the same mutation never reaches the demo. A change can look correct in the demo while quietly breaking a gallery page.
+
+## Verification
+
+Load `ha-frontend-testing` and use its demo and gallery workflows. Validate both consumers when changing shared stubs. Documentation-only changes do not require code tests unless examples or commands change.

.agents/skills/ha-frontend-events/SKILL.md

@@ -0,0 +1,105 @@
+---
+name: ha-frontend-events
+description: Home Assistant frontend event patterns. Use when typing event handlers, using HASSDomEvent types, dispatching with fireEvent, or declaring HASSDomEvents and event maps.
+---
+
+# HA Frontend Events
+
+Use this skill when implementing or reviewing event listeners and custom event contracts. Cross-load `ha-frontend-components` when the work also involves dialogs, forms, alerts, shortcuts, tooltips, panels, Lovelace cards, or buttons.
+
+## Event Handling
+
+Use the event types from `src/common/dom/fire_event.ts` instead of plain `Event`, generic `CustomEvent`, or element casts when they express the handler contract:
+
+- Use `HASSDomCurrentTargetEvent<T>` to read the element on which the listener was registered through `ev.currentTarget`.
+- Use `HASSDomTargetEvent<T>` only to read the element that originated the event through `ev.target`.
+- Use `HASSDomEvent<T>` to read a custom event payload through `ev.detail`.
+- Use `ValueChangedEvent<T>` from `src/types.ts` for the standard `value-changed` event.
+- Prefer an event type exported by the component being listened to, such as `HaSelectSelectEvent<T, Clearable>` or `HaDropdownSelectEvent<TValue, TData>`, over reconstructing its detail type.
+- Use `ActionHandlerEvent` from `src/data/lovelace/action_handler.ts` for Lovelace tap, hold, and double-tap handlers.
+
+Import event and element types with `import type`:
+
+```ts
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+  HASSDomTargetEvent,
+} from "../common/dom/fire_event";
+import type { HaCheckbox } from "../components/ha-checkbox";
+import type { HaEntityPicker } from "../components/entity/ha-entity-picker";
+import type { HaRadioGroup } from "../components/radio/ha-radio-group";
+import type { ValueChangedEvent } from "../types";
+```
+
+Type the handler so the selected property can be read directly. Do not cast `ev.currentTarget` or assign it to a single-use variable:
+
+```ts
+private _scopeChanged(ev: HASSDomCurrentTargetEvent<HaRadioGroup>): void {
+  this._scope = ev.currentTarget.value;
+}
+
+private _checkedChanged(ev: HASSDomTargetEvent<HaCheckbox>): void {
+  this._checked = ev.target.checked;
+}
+
+private _valueChanged(ev: ValueChangedEvent<string>): void {
+  this._value = ev.detail.value;
+}
+
+private _itemSelected(ev: HASSDomEvent<{ id: string }>): void {
+  this._selectedId = ev.detail.id;
+}
+```
+
+Use intersections when a handler needs more than one facet of an event. Keep the native event type when the handler reads native fields such as `key`, modifier keys, `dataTransfer`, or focus relationships:
+
+```ts
+private _entityChanged(
+  ev: ValueChangedEvent<string> & HASSDomCurrentTargetEvent<HaEntityPicker>
+): void {
+  ev.currentTarget.value = ev.detail.value;
+}
+
+private _keyDown(
+  ev: KeyboardEvent & HASSDomCurrentTargetEvent<HTMLInputElement>
+): void {
+  if (ev.key === "Enter") {
+    this._submit(ev.currentTarget.value);
+  }
+}
+```
+
+Dispatch Home Assistant component events with `fireEvent()` instead of constructing `Event` or `CustomEvent` directly. Register the event name and detail type by augmenting `HASSDomEvents`; use `undefined` when an event has no detail. `fireEvent()` constrains event names and supplied detail, and events bubble and cross shadow boundaries by default:
+
+```ts
+fireEvent(this, "item-selected", { id: item.id });
+fireEvent(this, "refresh-requested");
+```
+
+When an event is already registered, derive handler and listener types from its registration rather than repeating the payload shape:
+
+```ts
+private _itemSelected(
+  ev: HASSDomEvent<HASSDomEvents["item-selected"]>
+): void {
+  this._selectedId = ev.detail.id;
+}
+```
+
+`HASSDomEvents` types `fireEvent()` calls. Augment `HTMLElementEventMap` for typed listeners on HTML elements, or `GlobalEventHandlersEventMap` when the event is handled on global event targets.
+
+In component files, prefer placing global event declarations after the class at the bottom of the file. Preserve the existing placement when editing established files; foundational type, helper, and mixin files commonly keep declarations near the top before their consumers.
+
+```ts
+declare global {
+  interface HASSDomEvents {
+    "item-selected": { id: string };
+    "refresh-requested": undefined;
+  }
+
+  interface HTMLElementEventMap {
+    "item-selected": HASSDomEvent<HASSDomEvents["item-selected"]>;
+  }
+}
+```

.agents/skills/ha-frontend-gallery/SKILL.md

@@ -1,6 +1,11 @@
-# Gallery Agent Instructions
+---
+name: ha-frontend-gallery
+description: Home Assistant frontend gallery structure, pages, demos, content, and verification. Use when changing files under gallery/, including gallery markdown, TypeScript demos, sidebar entries, mock data, page generation, or gallery builds.
+---
 
-This file applies to all files under `gallery/`. Follow the root `AGENTS.md` for repository-wide Home Assistant frontend, TypeScript, Lit, accessibility, and copy standards. This file adds gallery-specific structure, page, demo, and verification guidance.
+# HA Frontend Gallery
+
+Use this skill for all work under `gallery/`. Follow the persistent repository guidance in `AGENTS.md` and load the matching specialist skills alongside this gallery-specific guidance.
 
 ## Quick Reference
 
@@ -13,7 +18,7 @@ yarn lint                       # ESLint, Prettier, TypeScript, and Lit checks
 yarn lint:types                 # TypeScript compiler, without file arguments
 ```
 
-Never run `yarn lint:types` or `tsc` with file arguments. See the root `AGENTS.md` for the generated `.js` file risk.
+Never run `yarn lint:types` or `tsc` with file arguments. File arguments make `tsc` ignore `tsconfig.json` and can emit `.js` files into `src/`.
 
 ## Purpose
 
@@ -26,36 +31,36 @@ The gallery is a developer and designer reference for Home Assistant frontend UI
 
 ## Structure
 
-- `sidebar.js`: Defines gallery sections, headers, and explicit page ordering.
-- `script/develop_gallery`: Wrapper for the `develop-gallery` gulp task.
-- `script/build_gallery`: Wrapper for the `build-gallery` gulp task.
-- `src/entrypoint.js`: Creates the `<ha-gallery>` shell.
-- `src/ha-gallery.ts`: Renders the drawer, page routing, markdown descriptions, demos, edit links, and RTL toggle.
-- `src/html/index.html.template`: HTML template used by the gallery build.
-- `src/pages/<category>/<page>.markdown`: Optional page description and frontmatter.
-- `src/pages/<category>/<page>.ts`: Optional live demo module for the same page id.
-- `src/components/`: Gallery-only demo wrappers like `demo-card`, `demo-cards`, `demo-more-info`, and `page-description`.
-- `src/data/`: Fake `hass`, demo states, mock traces, and reusable sample data.
-- `public/`: Static assets copied into the gallery output.
+- `gallery/sidebar.js`: Defines gallery sections, headers, and explicit page ordering.
+- `gallery/script/develop_gallery`: Wrapper for the `develop-gallery` gulp task.
+- `gallery/script/build_gallery`: Wrapper for the `build-gallery` gulp task.
+- `gallery/src/entrypoint.js`: Creates the `<ha-gallery>` shell.
+- `gallery/src/ha-gallery.ts`: Renders the drawer, page routing, markdown descriptions, demos, edit links, and RTL toggle.
+- `gallery/src/html/index.html.template`: HTML template used by the gallery build.
+- `gallery/src/pages/<category>/<page>.markdown`: Optional page description and frontmatter.
+- `gallery/src/pages/<category>/<page>.ts`: Optional live demo module for the same page ID.
+- `gallery/src/components/`: Gallery-only demo wrappers like `demo-card`, `demo-cards`, `demo-more-info`, and `page-description`.
+- `gallery/src/data/`: Fake `hass`, demo states, mock traces, and reusable sample data.
+- `gallery/public/`: Static assets copied into the gallery output.
 
 ## Page Model
 
 Gallery pages are generated by `gather-gallery-pages` in `build-scripts/gulp/gallery.js`.
 
-- A page id is the path under `src/pages/` without the extension, like `components/ha-button`.
-- A `.markdown` file and a `.ts` file with the same page id become one gallery page.
+- A page ID is the path under `gallery/src/pages/` without the extension, like `components/ha-button`.
+- A `.markdown` file and a `.ts` file with the same page ID become one gallery page.
 - A page may have only markdown, only a TypeScript demo, or both.
 - Markdown can contain YAML frontmatter with `title` and optional `subtitle`.
 - Markdown that contains only frontmatter contributes metadata without rendering a description block.
 - TypeScript demo modules are dynamically imported for side effects when the page is opened.
 - A demo module must define a custom element named `demo-${category}-${page}` with slashes replaced by hyphens, like `demo-components-ha-button` for `components/ha-button`.
-- `ha-gallery.ts` renders that element with `dynamicElement()` based on the current page id.
+- `gallery/src/ha-gallery.ts` renders that element with `dynamicElement()` based on the current page ID.
 
 ## Sidebar
 
-Use `sidebar.js` when a page needs a visible section, section header, or deterministic ordering.
+Use `gallery/sidebar.js` when a page needs a visible section, section header, or deterministic ordering.
 
-- `category` must match the first directory name under `src/pages/`.
+- `category` must match the first directory name under `gallery/src/pages/`.
 - `header` is the section label shown in the drawer.
 - `pages` is optional. When present, listed pages keep that exact order.
 - Pages in a category that are not listed are appended alphabetically after the listed pages.
@@ -83,20 +88,20 @@ Use markdown pages for explanations, design guidance, API notes, and copy standa
 - Use fenced code blocks with a language tag for copyable examples.
 - Keep examples short and focused on the behavior being documented.
 - Prefer real component names and attributes over prose-only descriptions.
-- Use Home Assistant terminology from the root `AGENTS.md`.
-- For remove/delete and add/create wording, follow `src/pages/misc/remove-delete-add-create.markdown`.
+- Use Home Assistant terminology from `ha-frontend-user-facing-text`.
+- For remove/delete and add/create wording, follow `gallery/src/pages/misc/remove-delete-add-create.markdown`.
 
-Gallery markdown is documentation content and is not localized with `localize`. If demo code creates production UI strings, keep those strings aligned with the root localization and copy guidance.
+Gallery markdown is documentation content and is not localized with `localize`. If demo code creates production UI strings, follow the localization and copy guidance in `ha-frontend-user-facing-text`.
 
 ## Demo Components
 
 Use TypeScript demo pages for interactive or stateful examples.
 
-- Import production components from `../../../src/...` or the correct relative path from the demo file.
+- Import production components from `src/` using the correct relative path from the demo file.
 - Import reusable gallery helpers from `gallery/src/components/` when they already model the pattern.
 - Use `demo-card` and `demo-cards` for Lovelace card examples that render YAML card configs.
 - Use `demo-more-info` and `demo-more-infos` for more-info dialog examples.
-- Use shared mock data from `src/data/` instead of repeating large fake state objects inline.
+- Use shared mock data from `gallery/src/data/` instead of repeating large fake state objects inline.
 - Show meaningful states, such as loading, unavailable, empty, error, active, inactive, and disabled when relevant.
 - Check responsive behavior and the gallery RTL toggle when layout or direction-sensitive UI changes.
 - Keep unavoidable casts or loose demo parsing local to the demo helper or demo page.
@@ -105,7 +110,7 @@ The gallery ESLint config allows `console` for gallery diagnostics. Do not copy
 
 ## Content Standards
 
-The root copy standards still apply: use American English, sentence case, active voice, inclusive language, direct user-focused wording, and consistent Home Assistant terminology.
+Follow the detailed copy standards in `ha-frontend-user-facing-text`: use American English, sentence case, active voice, inclusive language, direct user-focused wording, and consistent Home Assistant terminology.
 
 - Use `Home Assistant` in full, not `HA` or `HASS`.
 - Use `integration` instead of `component` for product concepts.

.agents/skills/ha-frontend-lit/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: ha-frontend-lit
+description: Home Assistant frontend Lit conventions. Use when working with reactive properties, internal state, DOM queries, lifecycle methods, or render-derived state.
+---
+
+# HA Frontend Lit
+
+Use this skill when implementing or reviewing Lit component state, DOM access, lifecycle methods, or rendering behavior. Cross-load `ha-frontend-types` for Home Assistant data contracts, assertions, and lifecycle parameter types.
+
+## Reactive Fields
+
+This project currently uses Lit's TypeScript experimental decorators with `useDefineForClassFields: false`. Match existing declarations and do not introduce standard-decorator `accessor` syntax unless the project changes decorator mode.
+
+- Use `@property()` for public reactive API and `@state()` for private reactive state.
+- Prefer inferred types for initialized reactive fields when inference preserves the intended type; annotate when widening or an external contract requires it.
+
+## DOM Queries
+
+Prefer Lit's `@query()` or `@queryAll()` decorators for fixed selectors in the component's render root.
+
+- Type the decorated field with the narrowest useful DOM or component interface.
+- Keep the field optional when it may be absent at the point of access, including conditional rendering or pre-render lifecycle access.
+- Use a definite assignment assertion only when every call site runs after the node is guaranteed to exist.
+- The optional second argument to `@query()`, as in `@query("#target", true)`, caches the first query result. Use it only when later renders cannot replace the queried node.
+- Use a direct query when the selector is dynamic or the target is outside the component's render root. Before querying a child, consider whether the required value belongs in parent state or data flow.
+
+## Render-Derived State
+
+- Prefer render-local values for inexpensive structures used only by that render.
+- Assign a render-local value once when repeated evaluation is non-trivial or a local name improves clarity.
+- Keep purely presentational derivations in `render()`. Use stored state or `willUpdate()` when the value must participate in lifecycle work, reflection, CSS, or non-render consumers.
+- Use `memoizeOne` for pure, argument-derived transforms when stable input identity avoids meaningful repeated work. Keep inputs explicit and limited, and do not add caching without a credible benefit over computing the value directly.
+
+## References
+
+- [Reactive properties](https://lit.dev/docs/components/properties/)
+- [Decorators](https://lit.dev/docs/components/decorators/)
+- [Shadow DOM queries](https://lit.dev/docs/components/shadow-dom/#query)
+- [Reactive update cycle](https://lit.dev/docs/components/lifecycle/)

.agents/skills/ha-frontend-review/SKILL.md

@@ -31,6 +31,33 @@ When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the body
 
 ## Recurring Review Issues
 
+Scope and public surface:
+
+- Keep changes independently reviewable and limited to the requested area.
+- Prefer existing Home Assistant helpers, Lit primitives, and component seams over parallel implementations.
+- Challenge new public properties and optional feature surface when transient options or existing seams meet the requirement with less lifecycle and consistency cost.
+
+Stateful and asynchronous UI:
+
+- Review transitions in both directions, not only individual rendered states.
+- When controls reappear, restore valid defaults instead of retaining state that was only valid while they were hidden.
+- Establish immutable dirty-state baselines before asynchronous work, guard against stale responses, and preserve unsaved state in mounted editors.
+- Determine an action's current meaning before applying dirty-state checks, especially when an action can change between Save and Close.
+
+Readiness and invalidation:
+
+- Treat readiness as the first displayable terminal result, including stable empty and error states.
+- Register child readiness before resolving the parent, do not treat fallback work as terminal, and replay readiness correctly for cached or reused panels.
+- Ensure every value read by memoized output participates in its invalidation.
+
+Repository-owned contracts:
+
+- Consult the public [frontend developer documentation](https://developers.home-assistant.io/docs/frontend/) for documented architecture, data flow, design, and development workflows.
+- For new leaf components, load `ha-frontend-contexts` and verify they consume narrow contexts instead of introducing a broad `hass` property; containers and external APIs may still require `hass`.
+- Verify backend assumptions against the owning Core, Supervisor, or WebSocket implementation, and component assumptions against the exported component contract.
+- Prefer canonical repository helpers and test setup over duplicate local implementations.
+- Promote AI-review concerns into durable guidance only when supported by code evidence, reproduced behavior, an accepted corrective commit, or human-maintainer validation.
+
 User experience and accessibility:
 
 - Forms need proper labels, helper text, and validation feedback.
@@ -70,4 +97,4 @@ Configuration and props:
 - Identify behavioral regressions, bugs, accessibility issues, and missing tests first.
 - Keep style-only comments secondary unless they affect maintainability or user experience.
 - Prefer small, direct fixes over large refactors during review follow-up.
-- Cross-load `ha-frontend-contexts`, `ha-frontend-components`, `ha-frontend-styling`, `ha-frontend-testing`, or `ha-frontend-user-facing-text` when a finding falls in that area.
+- Load the matching `ha-frontend-*` skill when a finding falls within its area.

.agents/skills/ha-frontend-testing/SKILL.md

@@ -20,6 +20,7 @@ yarn lint          # ESLint + Prettier + TypeScript + Lit
 yarn format        # Auto-fix ESLint + Prettier
 yarn lint:types    # TypeScript compiler, run without file arguments
 yarn test          # Vitest
+yarn build         # Full production build
 yarn dev           # App dev server
 yarn dev:serve     # Local serving dev server
 ```
@@ -28,6 +29,26 @@ Never run `tsc` or `yarn lint:types` with file arguments. File arguments make `t
 
 For focused type feedback on one file, use editor diagnostics instead of a file-scoped `tsc` command.
 
+## Production Builds
+
+Production builds support foreground and managed background execution:
+
+```bash
+yarn build                         # Full foreground build
+yarn build --background            # Full managed background build
+yarn build --modern                # Modern frontend_latest bundle only
+yarn build --modern --background   # Modern managed background build
+yarn build --status
+yarn build --logs [--follow]
+yarn build --stop
+```
+
+Use `yarn build --modern --background` for production bundle-size or browser performance comparisons that only need modern browser output. It runs the normal metadata and static preparation, minifies and compresses the modern `frontend_latest` bundle and shared static assets, and generates modern-only entry pages and service workers. It deliberately skips the legacy bundle and its service worker.
+
+Do not pass `--help`, `--background`, or `--modern` to `script/build_frontend`; that raw script does not parse arguments and always starts the full foreground build. Use `yarn build` for managed builds. App builds and development servers keep exclusive ownership of `hass_frontend/` for their lifetime.
+
+Managed app, demo, gallery, and E2E app workflows share one lifetime lock, so only one build or development server can run at a time.
+
 ## Unit And Utility Tests
 
 - Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
@@ -41,7 +62,7 @@ For focused type feedback on one file, use editor diagnostics instead of a file-
 
 `yarn dev:serve` also serves locally and supports `-c` for the core URL and `-p` for the port. The default is 8124, or 8123 in a devcontainer.
 
-Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`. Prefer managed background mode while iterating so the watcher stays available across test runs without occupying the terminal.
+Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`. `yarn dev`, `yarn dev:serve`, `yarn dev:demo`, and `yarn dev:gallery` also support `--fetch-translations`; this runs translation fetching, including first-time GitHub device authentication, under the workflow lock before starting the watcher. It works in foreground and background modes. Prefer managed background mode while iterating so the watcher stays available across test runs without occupying the terminal. `yarn dev` and `yarn dev:serve` share one managed process slot because both write the app output.
 
 ## Playwright E2E
 
@@ -59,15 +80,15 @@ The custom development wrappers use `/__ha_dev_status` to identify and manage th
 
 Local runs against a watched development server do not always match CI's clean build artifacts, environment, sharding, or worker configuration. Use background servers for the fast iteration loop, but confirm the relevant CI jobs complete successfully before considering E2E changes verified.
 
-Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs all three suites in parallel when every managed server is available, otherwise it runs them sequentially to prevent cold builds racing over shared generated assets. Run suites directly; piping through output truncation hides progress and failures.
+Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs suites sequentially when managed servers are unavailable to prevent cold builds racing over shared generated assets. Run suites directly; piping through output truncation hides progress and failures.
 
 The app suite uses a stripped-down harness for e2e. Demo and gallery use their normal dev servers.
 
 ## Benchmarks
 
-For chart data transforms such as history, statistics, energy, and downsampling, follow `test/benchmarks/README.md`.
+For chart data transforms such as history, statistics, energy, and downsampling, read and follow the complete workflow in `test/benchmarks/README.md` before making benchmark or optimization changes.
 
-Use seeded fixtures, characterization snapshot tests, and `yarn test:bench` before and after optimization. Optimizations must keep output bit-identical.
+That workflow owns the baseline, noise analysis, guardrails, acceptance thresholds, and reporting requirements. In particular, optimizations must keep output bit-identical; never update snapshots or modify fixtures to make an optimization pass.
 
 ## Verification Selection
 

.agents/skills/ha-frontend-types/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: ha-frontend-types
+description: Home Assistant frontend TypeScript conventions. Use when defining or reviewing backend data contracts, optional schemas, shared types, assertions, or Lit lifecycle types.
+---
+
+# HA Frontend Types
+
+Use this skill for Home Assistant-specific TypeScript contracts and type choices.
+
+## Home Assistant Data Contracts
+
+Verify data contracts against the source that owns them, such as Home Assistant Core, Supervisor, a WebSocket handler, or an exported component type. Do not shape a type around assumptions made by its current frontend consumers.
+
+- Match required, optional, nullable, and defaulted fields to the producer and runtime contract. Preserve optional configuration fields when omission is supported and has defined behavior.
+- Use distinct request and response types when their wire shapes differ.
+- When changing a shared contract, check affected consumers, tests, fixtures, and mocks.
+
+## Reuse Home Assistant Contracts
+
+- Reuse the canonical Home Assistant type when one exists. Define shared contract types in the data or API module that owns them.
+- Reuse types exported by components and helpers rather than reconstructing their payloads. For event types, follow `ha-frontend-events`.
+- When one domain contract is used across modules, define and export it from the module that owns that contract.
+
+Prefer an existing owning contract. Introduce a frontend-specific type when the frontend shape or boundary genuinely differs.
+
+## Assertions
+
+Prefer accurate types and runtime narrowing. Use assertions or TypeScript suppressions at boundaries where the runtime invariant is understood but cannot be expressed cleanly; keep them narrow and explain non-obvious invariants.
+
+## Lit Lifecycle Types
+
+For Lit lifecycle methods that receive changed properties, use `PropertyValues<this>` when the method only needs public reactive properties:
+
+```ts
+protected willUpdate(changedProperties: PropertyValues<this>) {
+  // ...
+}
+```
+
+Use unparameterized `PropertyValues` when the method inspects private or protected reactive properties, which are not keys of `this`. Do not add assertions solely to retain `PropertyValues<this>`.
+
+## Enforced Baseline
+
+Use `import type` for type-only imports. This is enforced by the repository ESLint configuration.

.agents/skills/ha-frontend-user-facing-text/SKILL.md

@@ -16,7 +16,7 @@ Use this skill for all user-facing text, translations, labels, buttons, dialog c
 - Give translators enough context through key naming and placeholders.
 
 ```ts
-this.hass.localize("ui.panel.config.updates.updates_refreshed", {
+this._localize("ui.panel.config.updates.updates_refreshed", {
   count: 5,
 });
 ```

.github/workflows/actionlint.yaml

@@ -32,7 +32,7 @@ jobs:
       ACTIONLINT_VERSION: 1.7.12
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
       - name: Run actionlint

.github/workflows/blocking-labels.yaml

@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out workflow scripts
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
           sparse-checkout: .github/scripts

.github/workflows/cast_deployment.yaml

@@ -24,7 +24,7 @@ jobs:
       url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: dev
           persist-credentials: false
@@ -56,7 +56,7 @@ jobs:
       url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: master
           persist-credentials: false

.github/workflows/ci.yaml

@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
       - name: Prepare dependencies
@@ -39,7 +39,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
       - name: Setup Node with shared dependencies
@@ -82,7 +82,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
       - name: Setup Node with shared dependencies
@@ -104,7 +104,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
       - name: Setup Node with shared dependencies

.github/workflows/codeql-analysis.yaml

@@ -27,17 +27,17 @@ jobs:
 
     steps:
       - name: Check out code from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4.37.0
+        uses: github/codeql-action/init@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
         with:
           languages: javascript-typescript
           build-mode: none
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4.37.0
+        uses: github/codeql-action/analyze@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
         with:
           category: "/language:javascript-typescript"

.github/workflows/copilot-setup-steps.yml

@@ -0,0 +1,34 @@
+name: Copilot Setup Steps
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+  pull_request:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+jobs:
+  copilot-setup-steps:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
+
+      - name: Skip fetching nightly translations
+        run: echo "SKIP_FETCH_NIGHTLY_TRANSLATIONS=1" >> "$GITHUB_ENV"
+
+      - name: Build resources
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages

.github/workflows/demo_deployment.yaml

@@ -25,7 +25,7 @@ jobs:
       url: ${{ steps.deploy.outputs.unique_deploy_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: dev
           persist-credentials: false
@@ -56,7 +56,7 @@ jobs:
       url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: master
           persist-credentials: false

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
       url: ${{ steps.deploy.outputs.netlify_url }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 

.github/workflows/e2e.yaml

@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
@@ -38,14 +38,14 @@ jobs:
     name: Prepare container dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      image: mcr.microsoft.com/playwright:v1.62.1-noble
       options: --user 1001
     defaults:
       run:
         shell: bash
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
@@ -61,7 +61,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
@@ -92,7 +92,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
@@ -123,7 +123,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
@@ -154,7 +154,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      image: mcr.microsoft.com/playwright:v1.62.1-noble
       options: --user 1001 --ipc=host
     defaults:
       run:
@@ -170,7 +170,7 @@ jobs:
           - 2
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
@@ -206,7 +206,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      image: mcr.microsoft.com/playwright:v1.62.1-noble
       options: --user 1001 --ipc=host
     defaults:
       run:
@@ -224,7 +224,7 @@ jobs:
           - 4
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
@@ -260,7 +260,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      image: mcr.microsoft.com/playwright:v1.62.1-noble
       options: --user 1001 --ipc=host
     defaults:
       run:
@@ -278,7 +278,7 @@ jobs:
           - 4
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
@@ -320,7 +320,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 

.github/workflows/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@b8dd2d9be0f68b860e7dae5dae7d772984eacd6d # v6.2.0
+        uses: actions/labeler@bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13 # v7.0.0
         with:
           sync-labels: true

.github/workflows/nightly.yaml

@@ -20,12 +20,12 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6
+        uses: actions/setup-python@5fda3b95a4ea91299a34e894583c3862153e4b97 # v7.0.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 

.github/workflows/pull-request-standards.yaml

@@ -24,7 +24,7 @@ jobs:
       pull-requests: write # To label and comment on pull requests
     steps:
       - name: Check out workflow scripts
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
           sparse-checkout: .github/scripts

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@4d75298e00d9e34c483e5ff8c68d0ea1c1940c1e # v7.5.1
+      - uses: release-drafter/release-drafter@eada3c96a64734dd381cfbda23511034e328ddb0 # v7.6.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -26,17 +26,17 @@ jobs:
     if: github.repository_owner == 'home-assistant'
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
+        uses: actions/setup-python@5fda3b95a4ea91299a34e894583c3862153e4b97 # v7.0.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@f4ca6f671bd429efb108c0f2fa0ae8af0215986c # master
+        uses: home-assistant/actions/helpers/verify-version@ab22029681aa532bfe7de5774a9972d67bfbd2c0 # master
 
       - name: Setup Node and install
         uses: ./.github/actions/setup
@@ -56,7 +56,7 @@ jobs:
           script/release
 
       - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@cef221092ed1bacb1cc03d23a2d87d1d172e277b # v1.14.0
+        uses: pypa/gh-action-pypi-publish@ba38be9e461d3875417946c167d0b5f3d385a247 # v1.14.1
         with:
           skip-existing: true
 
@@ -111,7 +111,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
       - name: Setup Node and install

.github/workflows/restrict-task-creation.yaml

@@ -42,7 +42,7 @@ jobs:
     if: github.event.issue.type.name == 'Task'
     steps:
       - name: Check out workflow scripts
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
           sparse-checkout: .github/scripts

.github/workflows/sync-numeric-device-classes.yaml

@@ -21,7 +21,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 

.github/workflows/translations.yaml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
 

.nvmrc

@@ -1 +1 @@
-24.18.0
+24.19.0

.yarnrc.yml

@@ -13,4 +13,4 @@ nodeLinker: node-modules
 
 npmMinimalAgeGate: 3d
 
-yarnPath: .yarn/releases/yarn-4.17.1.cjs
+yarnPath: .yarn/releases/yarn-4.18.0.cjs

AGENTS.md

@@ -2,8 +2,6 @@
 
 You are helping develop the Home Assistant frontend. This repository is a TypeScript application built from Lit-based Web Components for the Home Assistant web UI.
 
-For gallery-specific documentation, demos, page structure, and examples, read `gallery/AGENTS.md` when working under `gallery/`.
-
 ## Essential Commands
 
 ```bash
@@ -42,10 +40,15 @@ Detailed guidance lives in project skills under `.agents/skills/`. Load the matc
 
 - `ha-frontend-contexts`: Lit contexts, `hass` migration, and rerender-sensitive state access.
 - `ha-frontend-components`: dialogs, forms, alerts, shortcuts, tooltips, panels, and Lovelace cards.
+- `ha-frontend-events`: event handler typing, custom event dispatch, and event-map declarations.
+- `ha-frontend-types`: backend data contracts, optional schemas, shared types, assertions, and lifecycle types.
+- `ha-frontend-lit`: reactive fields, DOM queries, lifecycle behavior, and render-derived state.
 - `ha-frontend-styling`: theme variables, spacing tokens, responsive layout, RTL, and view transitions.
 - `ha-frontend-testing`: lint, typecheck, Vitest, Playwright e2e dev servers, and benchmarks.
 - `ha-frontend-user-facing-text`: localization, terminology, sentence case, and Home Assistant text style.
 - `ha-frontend-review`: PR template use, review checklist, and recurring review issues.
+- `ha-frontend-gallery`: gallery pages, demos, sidebar structure, content, and verification.
+- `ha-frontend-demo`: standalone demo structure, configurations, navigation, shared stubs, and verification.
 
 ## Pull Requests
 

README.md

@@ -12,7 +12,7 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 
 - Initial setup: `script/setup`
 - Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
-- Production build: `script/build_frontend`
+- Production build: `yarn build`
 - Gallery: `cd gallery && script/develop_gallery`
 
 ## Frontend development

build-scripts/brotli.mjs

@@ -0,0 +1,46 @@
+// Gulp transform that brotli-compresses files, several at a time.
+//
+// Drop-in replacement for gulp-brotli. zlib already does the work off the main
+// thread, but that plugin wraps it in through2, which waits for each file
+// before starting the next, so only one compression is ever in flight. The
+// compressed bytes are unchanged; only how many run at once differs.
+//
+// The real ceiling is libuv's threadpool, which zlib runs on. It sizes itself
+// from UV_THREADPOOL_SIZE before any JavaScript runs, so it can only be raised
+// from the environment, never from inside the build.
+
+import { availableParallelism } from "node:os";
+import { buffer as readStream } from "node:stream/consumers";
+import { promisify } from "node:util";
+import { brotliCompress } from "node:zlib";
+import { ParallelTransform } from "./parallel-transform.mjs";
+
+const EXTENSION = ".br";
+
+const compress = promisify(brotliCompress);
+
+/**
+ * @param {object} [options]
+ * @param {boolean} [options.skipLarger] Drop files that compression grows.
+ * @param {object} [options.params] Brotli parameters, passed to zlib as-is.
+ */
+export default ({ skipLarger = false, params } = {}) =>
+  new ParallelTransform(availableParallelism(), async (file) => {
+    if (file.isNull()) {
+      return file;
+    }
+    if (file.isStream()) {
+      file.contents = await readStream(file.contents);
+    }
+
+    const compressed = await compress(file.contents, { params });
+    if (skipLarger && compressed.length >= file.contents.length) {
+      // Dropped rather than passed through, as gulp-brotli did: the
+      // uncompressed file is already in the output directory.
+      return undefined;
+    }
+
+    file.contents = compressed;
+    file.path += EXTENSION;
+    return file;
+  });

build-scripts/build-manager.mjs

@@ -0,0 +1,311 @@
+// Manage a Home Assistant frontend production build with an agent-friendly
+// interface, matching build-scripts/dev-server.mjs.
+//
+//   node build-scripts/build-manager.mjs [--modern] [mode]
+//
+//   (no mode)          Run in the foreground.
+//   --background       Start detached, print the pid, then exit and leave it
+//                      running.
+//   --status           Report whether a managed build is running.
+//   --stop             Stop a managed build.
+//   --logs [--follow]  Print (or follow) the background build log.
+//
+//   --modern           Build only the modern frontend_latest bundle.
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  LIFECYCLE_MODE_FLAGS,
+  acquireProcessRecord,
+  isProcessRecordAlive,
+  outputLog,
+  offerToStopProcessRecord,
+  processStartTime,
+  readProcessRecord,
+  releaseProcessRecord,
+  runCli,
+  spawnDetachedToLog,
+  spawnForeground,
+  terminateDetachedProcess,
+  terminateProcess,
+  waitFor,
+  writeProcessRecord,
+} from "./managed-process.mjs";
+import {
+  buildCacheDir,
+  describeOutputOwner,
+  workflowLockEnv,
+  workflowLockFile,
+} from "./output-lock.mjs";
+
+const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+const gulpBin = path.join(repoRoot, "node_modules", ".bin", "gulp");
+const stateDir = path.join(buildCacheDir, "ha-build");
+const logFile = path.join(stateDir, "build.log");
+const lockFile = workflowLockFile;
+
+const usage = () => {
+  process.stderr.write(
+    "Usage: node build-scripts/build-manager.mjs [--modern] " +
+      "[--background | --status | --stop | --logs [--follow]]\n"
+  );
+};
+
+const parseArgs = (argv) => {
+  const args = {
+    mode: "foreground",
+    modes: [],
+    follow: false,
+    modern: false,
+    unknown: [],
+  };
+  for (const arg of argv) {
+    if (LIFECYCLE_MODE_FLAGS.has(arg)) {
+      args.mode = LIFECYCLE_MODE_FLAGS.get(arg);
+      args.modes.push(arg);
+    } else if (arg === "--modern") {
+      args.modern = true;
+    } else if (arg === "--follow") {
+      args.follow = true;
+    } else {
+      args.unknown.push(arg);
+    }
+  }
+  return args;
+};
+
+const hints = () =>
+  "  Stop:   yarn build --stop\n" +
+  "  Status: yarn build --status\n" +
+  "  Logs:   yarn build --logs\n";
+
+const devCommand = (suite) => {
+  switch (suite) {
+    case "app-serve":
+      return "dev:serve";
+    case "demo":
+      return "dev:demo";
+    case "gallery":
+      return "dev:gallery";
+    case "e2e-app":
+      return "test:e2e:app:dev";
+    default:
+      return "dev";
+  }
+};
+
+const readBuild = () => readProcessRecord(lockFile);
+
+const releaseBuild = (token) => releaseProcessRecord(lockFile, token);
+
+const stopCommandFor = (owner) =>
+  owner?.kind === "build"
+    ? "yarn build --stop"
+    : owner?.kind === "dev"
+      ? `yarn ${devCommand(owner.suite)} --stop`
+      : undefined;
+
+const acquireBuild = async (modern, foreground) => {
+  const token = `${process.pid}-${Date.now()}-${Math.random()}`;
+  const record = {
+    pid: process.pid,
+    startTime: processStartTime(process.pid),
+    processGroup: false,
+    foreground,
+    kind: "build",
+    modern,
+    starting: true,
+    token,
+  };
+  const result = acquireProcessRecord(lockFile, record);
+  if (result.acquired) {
+    return { token };
+  }
+  reportExisting(result.existing);
+  return (await offerToStopProcessRecord({
+    file: lockFile,
+    owner: result.existing,
+    ownerDescription: describeOutputOwner(result.existing),
+    stopCommand: stopCommandFor(result.existing),
+  }))
+    ? acquireBuild(modern, foreground)
+    : { existing: result.existing };
+};
+
+const updateBuild = (token, child, processGroup) => {
+  const existing = readBuild();
+  if (existing?.token !== token) {
+    throw Error("Frontend build lock ownership was lost during startup.");
+  }
+  writeProcessRecord(lockFile, {
+    ...existing,
+    pid: child.pid,
+    startTime: processStartTime(child.pid),
+    processGroup,
+    starting: false,
+  });
+};
+
+const taskFor = (modern) => (modern ? "build-app-modern" : "build-app");
+
+const reportExisting = (existing) => {
+  if (existing?.kind === "output") {
+    process.stdout.write(
+      `${describeOutputOwner(existing)} already owns the build and development workflow` +
+        `${existing.pid ? ` (pid ${existing.pid})` : ""}.\n`
+    );
+    return;
+  }
+  if (existing?.kind === "dev") {
+    const command = devCommand(existing.suite);
+    process.stdout.write(
+      `Dev server (${existing.suite}) already running` +
+        `${existing.pid ? ` (pid ${existing.pid})` : ""}.\n` +
+        `  Stop:   yarn ${command} --stop\n` +
+        `  Status: yarn ${command} --status\n` +
+        `  Logs:   yarn ${command} --logs\n`
+    );
+    return;
+  }
+  process.stdout.write(
+    `Frontend ${existing?.modern ? "modern " : ""}build already running` +
+      `${existing?.pid ? ` (pid ${existing.pid})` : ""}.\n${hints()}`
+  );
+};
+
+const runForeground = async (modern) => {
+  const lock = await acquireBuild(modern, true);
+  if (!lock.token) {
+    return 1;
+  }
+  try {
+    return await spawnForeground({
+      cmd: gulpBin,
+      args: [taskFor(modern)],
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      processGroup: true,
+      onSpawn: (child) => updateBuild(lock.token, child, true),
+    });
+  } finally {
+    releaseBuild(lock.token);
+  }
+};
+
+const runBackground = async (modern) => {
+  const lock = await acquireBuild(modern, false);
+  if (!lock.token) {
+    return 1;
+  }
+  let child;
+  try {
+    child = await spawnDetachedToLog({
+      cmd: gulpBin,
+      args: [taskFor(modern)],
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      logFile,
+    });
+    updateBuild(lock.token, child, true);
+    process.stdout.write(
+      `Started ${modern ? "modern " : ""}frontend build (pid ${child.pid})\n` +
+        hints()
+    );
+    return 0;
+  } catch (err) {
+    if (child) {
+      await terminateDetachedProcess(child);
+    }
+    releaseBuild(lock.token);
+    throw err;
+  }
+};
+
+const runStatus = () => {
+  const existing = readBuild();
+  if (existing?.kind === "build" && isProcessRecordAlive(existing)) {
+    process.stdout.write(
+      `Frontend ${existing.modern ? "modern " : ""}build running (pid ${existing.pid}).\n`
+    );
+  } else {
+    if (existing?.kind === "build") {
+      releaseBuild(existing.token);
+    }
+    process.stdout.write("Frontend build not running.\n");
+  }
+  return 0;
+};
+
+const runStop = async () => {
+  let existing = readBuild();
+  if (existing?.kind !== "build") {
+    process.stdout.write("Frontend build not running.\n");
+    return 0;
+  }
+  if (existing?.starting) {
+    const token = existing.token;
+    await waitFor(
+      () => {
+        const current = readBuild();
+        return !current?.starting || current.token !== token;
+      },
+      100,
+      5000
+    );
+    existing = readBuild();
+  }
+  if (
+    !existing ||
+    existing.kind !== "build" ||
+    !isProcessRecordAlive(existing)
+  ) {
+    if (existing) releaseBuild(existing.token);
+    process.stdout.write("Frontend build not running.\n");
+    return 0;
+  }
+  if (
+    !(await terminateProcess({
+      pid: existing.pid,
+      processGroup: existing.processGroup,
+      isStopped: () => !isProcessRecordAlive(existing),
+    }))
+  ) {
+    process.stderr.write(
+      `Failed to stop frontend build (pid ${existing.pid}). Stop it manually.\n`
+    );
+    return 1;
+  }
+  releaseBuild(existing.token);
+  process.stdout.write(`Stopped frontend build (pid ${existing.pid}).\n`);
+  return 0;
+};
+
+const runLogs = (follow) =>
+  outputLog(logFile, follow, `No frontend build log yet (${logFile}).\n`);
+
+const main = async () => {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.unknown.length) {
+    process.stderr.write(`Unknown arguments: ${args.unknown.join(" ")}\n`);
+    usage();
+    return 1;
+  }
+  if (args.modes.length > 1 || (args.follow && args.mode !== "logs")) {
+    process.stderr.write("Invalid combination of build arguments.\n");
+    usage();
+    return 1;
+  }
+  const handlers = {
+    foreground: () => runForeground(args.modern),
+    background: () => runBackground(args.modern),
+    status: runStatus,
+    stop: runStop,
+    logs: () => runLogs(args.follow),
+  };
+  return handlers[args.mode]();
+};
+
+runCli(main);

build-scripts/bundle-budget.json

@@ -1,15 +1,15 @@
 {
   "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
   "frontend-modern": {
-    "app": 561513,
-    "core": 54473,
-    "authorize": 544272,
-    "onboarding": 647136
+    "app": 595204,
+    "core": 57741,
+    "authorize": 576928,
+    "onboarding": 685964
   },
   "frontend-legacy": {
-    "app": 790323,
-    "core": 237208,
-    "authorize": 765464,
-    "onboarding": 918679
+    "app": 861452,
+    "core": 258557,
+    "authorize": 834356,
+    "onboarding": 1001360
   }
 }

build-scripts/gulp/app.js

@@ -1,5 +1,6 @@
 import gulp from "gulp";
 import env from "../env.cjs";
+import { createWorkflowLockTask } from "../output-lock.mjs";
 import "./clean.js";
 import "./compress.js";
 import "./entry-html.js";
@@ -17,6 +18,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "development";
     },
+    createWorkflowLockTask("develop-app"),
     "clean",
     gulp.parallel(
       "gen-service-worker-app-dev",
@@ -36,6 +38,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
+    createWorkflowLockTask("build-app"),
     "clean",
     gulp.parallel(
       "gen-icons-json",
@@ -51,6 +54,30 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "build-app-modern",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    createWorkflowLockTask("build-app-modern"),
+    "clean",
+    gulp.parallel(
+      "gen-icons-json",
+      "build-translations",
+      "build-locale-data",
+      "gen-licenses"
+    ),
+    "copy-static-app",
+    "rspack-prod-app-modern",
+    gulp.parallel(
+      "gen-pages-app-prod-modern",
+      "gen-service-worker-app-prod-modern"
+    ),
+    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app"])
+  )
+);
+
 gulp.task(
   "analyze-app",
   gulp.series(

build-scripts/gulp/compress.js

@@ -2,9 +2,9 @@
 
 import { constants } from "node:zlib";
 import gulp from "gulp";
-import brotli from "gulp-brotli";
-import zopfli from "gulp-zopfli-green";
+import brotli from "../brotli.mjs";
 import paths from "../paths.cjs";
+import zopfli from "../zopfli.mjs";
 
 const filesGlob = "*.{js,json,css,svg,xml}";
 const brotliOptions = {

build-scripts/gulp/demo.js

@@ -1,4 +1,5 @@
 import gulp from "gulp";
+import { createWorkflowLockTask } from "../output-lock.mjs";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
@@ -13,6 +14,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "development";
     },
+    createWorkflowLockTask("develop-demo"),
     "clean-demo",
     "translations-enable-merge-backend",
     gulp.parallel(
@@ -32,6 +34,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
+    createWorkflowLockTask("build-demo"),
     "clean-demo",
     // Cast needs to be backwards compatible and older HA has no translations
     "translations-enable-merge-backend",

build-scripts/gulp/e2e-test-app.js

@@ -1,4 +1,5 @@
 import gulp from "gulp";
+import { createWorkflowLockTask } from "../output-lock.mjs";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
@@ -12,6 +13,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "development";
     },
+    createWorkflowLockTask("develop-e2e-test-app"),
     "clean-e2e-test-app",
     "translations-enable-merge-backend",
     gulp.parallel(
@@ -31,6 +33,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
+    createWorkflowLockTask("build-e2e-test-app"),
     "clean-e2e-test-app",
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),

build-scripts/gulp/entry-html.js

@@ -58,6 +58,12 @@ const getCommonTemplateVars = () => {
   return {
     modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
     hassUrl: process.env.HASS_URL || "",
+    // Single source for the stale-build recovery patterns, shared with the
+    // bundled src/util/recover-stale-build.ts and injected into the inline
+    // boot guard (_bootstrap_recovery.html.template).
+    staleBuildPatterns: fs.readJsonSync(
+      resolve(paths.root_dir, "src/util/stale-build-patterns.json")
+    ),
   };
 };
 
@@ -107,6 +113,9 @@ const genPagesDevTask =
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
+          // Dev entries are unhashed, so the stale-index recovery guard has
+          // nothing to key off and rebuild churn could cause spurious reloads.
+          useCacheRecovery: false,
           latestEntryJS: entries.map(
             (entry) => `${publicRoot}/frontend_latest/${entry}.js`
           ),
@@ -146,10 +155,15 @@ const genPagesProdTask =
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
+          // Recover from a stale index.html that pins deleted hashed entry
+          // bundles (see _bootstrap_recovery.html.template).
+          useCacheRecovery: true,
           latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
-          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
+          es5EntryJS: outputES5
+            ? entries.map((entry) => es5Manifest[`${entry}.js`])
+            : [],
           latestCustomPanelJS: latestManifest["custom-panel.js"],
-          es5CustomPanelJS: es5Manifest["custom-panel.js"],
+          es5CustomPanelJS: outputES5 ? es5Manifest["custom-panel.js"] : "",
         }
       );
       minifiedHTML.push(
@@ -184,6 +198,17 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "gen-pages-app-prod-modern",
+  genPagesProdTask(
+    APP_PAGE_ENTRIES,
+    paths.root_dir,
+    paths.app_output_root,
+    paths.app_output_latest,
+    undefined
+  )
+);
+
 const CAST_PAGE_ENTRIES = {
   "faq.html": ["launcher"],
   "index.html": ["launcher"],

build-scripts/gulp/fetch-nightly-translations.js

@@ -52,6 +52,23 @@ gulp.task("fetch-nightly-translations", async function () {
     currentArtifact = null;
   }
 
+  try {
+    await fetchTranslations(currentArtifact);
+  } catch (err) {
+    // Local builds should work offline or without valid GitHub credentials,
+    // so fall back to English only. CI must fail instead of silently
+    // building without translations.
+    if (process.env.CI) {
+      throw err;
+    }
+    console.warn(
+      "Failed to fetch nightly translations, continuing with English only:",
+      err?.message || err
+    );
+  }
+});
+
+async function fetchTranslations(currentArtifact) {
   // To store file writing promises
   const createExtractDir = mkdir(EXTRACT_DIR, { recursive: true });
   const writings = [];
@@ -130,11 +147,6 @@ gulp.task("fetch-nightly-translations", async function () {
   if (!latestArtifact) {
     throw Error("Latest nightly workflow run has no translations artifact");
   }
-  writings.push(
-    createExtractDir.then(
-      writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
-    )
-  );
 
   // Remove the current translations
   const deleteCurrent = Promise.all(writings).then(
@@ -160,7 +172,12 @@ gulp.task("fetch-nightly-translations", async function () {
   await new Promise((resolve, reject) => {
     extractStream.on("close", resolve).on("error", reject);
   });
-});
+
+  // Record the artifact only after successful extraction, so a failed fetch
+  // is retried by the next build instead of being considered current.
+  await createExtractDir;
+  await writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2));
+}
 
 gulp.task(
   "setup-and-fetch-nightly-translations",

build-scripts/gulp/gallery.js

@@ -4,6 +4,7 @@ import gulp from "gulp";
 import { load as loadYaml } from "js-yaml";
 import { marked } from "marked";
 import path from "path";
+import { createWorkflowLockTask } from "../output-lock.mjs";
 import paths from "../paths.cjs";
 import "./clean.js";
 import "./entry-html.js";
@@ -164,6 +165,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "development";
     },
+    createWorkflowLockTask("develop-gallery"),
     "clean-gallery",
     "translations-enable-merge-backend",
     gulp.parallel(
@@ -195,6 +197,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
+    createWorkflowLockTask("build-gallery"),
     "clean-gallery",
     "translations-enable-merge-backend",
     gulp.parallel(

build-scripts/gulp/rspack.js

@@ -108,7 +108,7 @@ const runDevServer = async ({
   }
 };
 
-const doneHandler = (done) => (err, stats) => {
+const doneHandler = () => (err, stats) => {
   if (err) {
     log.error(err.stack || err);
     if (err.details) {
@@ -122,18 +122,26 @@ const doneHandler = (done) => (err, stats) => {
   }
 
   log(`Build done @ ${new Date().toLocaleTimeString()}`);
-
-  if (done) {
-    done();
-  }
 };
 
 const prodBuild = (conf) =>
-  new Promise((resolve) => {
+  new Promise((resolve, reject) => {
     rspack(
       conf,
       // Resolve promise when done. Because we pass a callback, rspack closes itself
-      doneHandler(resolve)
+      (err, stats) => {
+        if (err) {
+          reject(err);
+        } else if (stats.hasErrors()) {
+          reject(Error(stats.toString("errors-only")));
+        } else {
+          if (stats.hasWarnings()) {
+            console.log(stats.toString("minimal"));
+          }
+          log(`Build done @ ${new Date().toLocaleTimeString()}`);
+          resolve();
+        }
+      }
     );
   });
 
@@ -160,6 +168,17 @@ gulp.task("rspack-prod-app", () =>
   )
 );
 
+gulp.task("rspack-prod-app-modern", () =>
+  prodBuild(
+    createAppConfig({
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+      latestBuild: true,
+    })
+  )
+);
+
 gulp.task("rspack-dev-server-demo", () =>
   runDevServer({
     compiler: rspack(

build-scripts/gulp/service-worker.js

@@ -34,9 +34,9 @@ gulp.task("gen-service-worker-app-dev", async () => {
   );
 });
 
-gulp.task("gen-service-worker-app-prod", () =>
+const genServiceWorker = (builds) =>
   Promise.all(
-    Object.entries(SW_MAP).map(async ([outPath, build]) => {
+    builds.map(async ([outPath, build]) => {
       const manifest = JSON.parse(
         await readFile(join(outPath, "manifest.json"), "utf-8")
       );
@@ -83,5 +83,12 @@ gulp.task("gen-service-worker-app-prod", () =>
         await symlink(basename(swDest), swOld);
       }
     })
-  )
+  );
+
+gulp.task("gen-service-worker-app-prod", () =>
+  genServiceWorker(Object.entries(SW_MAP))
+);
+
+gulp.task("gen-service-worker-app-prod-modern", () =>
+  genServiceWorker([[paths.app_output_latest, "modern"]])
 );

build-scripts/gulp/translations.js

@@ -1,5 +1,3 @@
-/* eslint-disable max-classes-per-file */
-
 import { deleteAsync } from "del";
 import { glob } from "glob";
 import gulp from "gulp";

build-scripts/managed-process.mjs

@@ -0,0 +1,552 @@
+import { spawn, execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { createInterface } from "node:readline/promises";
+
+export const LIFECYCLE_MODE_FLAGS = new Map([
+  ["--background", "background"],
+  ["--status", "status"],
+  ["--stop", "stop"],
+  ["--logs", "logs"],
+]);
+
+const AGENT_PROVIDERS = [
+  {
+    id: "opencode",
+    env: [
+      "OPENCODE",
+      "OPENCODE_BIN_PATH",
+      "OPENCODE_SERVER",
+      "OPENCODE_APP_INFO",
+      "OPENCODE_MODES",
+    ],
+    processes: ["opencode"],
+  },
+  {
+    id: "claude-code",
+    env: ["CLAUDECODE"],
+    processes: ["claude"],
+  },
+  {
+    id: "cursor",
+    env: ["CURSOR_TRACE_ID"],
+    processes: [],
+  },
+  {
+    id: "github-copilot",
+    matchesEnv: (env) =>
+      env.TERM_PROGRAM === "vscode" && env.GIT_PAGER === "cat",
+    processes: [],
+  },
+  {
+    id: "generic",
+    env: ["AGENT", "AI_AGENT"],
+    processes: [],
+  },
+];
+const MAX_ANCESTRY_HOPS = 24;
+
+const readProcessParent = (pid) => {
+  try {
+    const stat = fs.readFileSync(`/proc/${pid}/stat`, "utf8");
+    const commandEnd = stat.lastIndexOf(")");
+    const commandStart = stat.indexOf("(");
+    if (commandStart === -1 || commandEnd === -1) {
+      return undefined;
+    }
+    const parentPid = Number.parseInt(
+      stat.slice(commandEnd + 2).split(" ")[1] ?? "",
+      10
+    );
+    return Number.isFinite(parentPid)
+      ? {
+          command: stat.slice(commandStart + 1, commandEnd).toLowerCase(),
+          parentPid,
+        }
+      : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+export const detectCodingAgent = (env = process.env, pid = process.pid) => {
+  if (env.HA_CODING_AGENT === "0") {
+    return undefined;
+  }
+  const envMatch = AGENT_PROVIDERS.find(
+    (provider) =>
+      provider.matchesEnv?.(env) || provider.env?.some((name) => env[name])
+  );
+  if (envMatch) {
+    return envMatch.id;
+  }
+  if (env.HA_CODING_AGENT === "1") {
+    return "unknown";
+  }
+  let currentPid = pid;
+  for (let hop = 0; hop < MAX_ANCESTRY_HOPS; hop++) {
+    const processInfo = readProcessParent(currentPid);
+    if (!processInfo) {
+      return undefined;
+    }
+    const processMatch = AGENT_PROVIDERS.find((provider) =>
+      provider.processes.some((name) => processInfo.command.includes(name))
+    );
+    if (processMatch) {
+      return processMatch.id;
+    }
+    if (processInfo.parentPid <= 1) {
+      return undefined;
+    }
+    currentPid = processInfo.parentPid;
+  }
+  return undefined;
+};
+
+const canPromptForConflict = () =>
+  Boolean(process.stdin.isTTY && process.stderr.isTTY && !detectCodingAgent());
+
+const formatCommand = (command) =>
+  !("NO_COLOR" in process.env)
+    ? `\u001b[1;36m${command}\u001b[0m`
+    : `\`${command}\``;
+
+const confirmStopConflict = async (ownerDescription, stopCommand) => {
+  const readline = createInterface({
+    input: process.stdin,
+    output: process.stderr,
+  });
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 30_000);
+  try {
+    process.stderr.write(
+      `${ownerDescription} can be stopped with ${formatCommand(stopCommand)}.\n`
+    );
+    const answer = await readline.question("Stop it and continue? [y/N] ", {
+      signal: controller.signal,
+    });
+    return ["y", "yes"].includes(answer.trim().toLowerCase());
+  } catch (err) {
+    if (err?.name !== "AbortError") {
+      throw err;
+    }
+    process.stderr.write("\n");
+    return false;
+  } finally {
+    clearTimeout(timeout);
+    readline.close();
+  }
+};
+
+export const sleep = (ms) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+export const waitFor = async (predicate, intervalMs, timeoutMs) => {
+  const deadline = Date.now() + timeoutMs;
+  const poll = async () => {
+    if (await predicate()) {
+      return true;
+    }
+    if (Date.now() >= deadline) {
+      return false;
+    }
+    await sleep(intervalMs);
+    return poll();
+  };
+  return poll();
+};
+
+export const isProcessAlive = (pid) => {
+  if (!Number.isInteger(pid) || pid <= 0) {
+    return false;
+  }
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (err) {
+    // EPERM means the process exists but is owned by someone else.
+    return err.code === "EPERM";
+  }
+};
+
+export const processStartTime = (pid) => {
+  if (!isProcessAlive(pid)) {
+    return undefined;
+  }
+  try {
+    const stat = fs.readFileSync(`/proc/${pid}/stat`, "utf8");
+    return stat.slice(stat.lastIndexOf(")") + 2).split(" ")[19];
+  } catch {
+    try {
+      return execFileSync("ps", ["-o", "lstart=", "-p", String(pid)], {
+        encoding: "utf8",
+        stdio: ["ignore", "pipe", "ignore"],
+      }).trim();
+    } catch {
+      return undefined;
+    }
+  }
+};
+
+export const isProcessRecordAlive = ({ pid, startTime }) =>
+  Boolean(startTime) && processStartTime(pid) === startTime;
+
+export const readProcessRecord = (file) => {
+  try {
+    const data = JSON.parse(fs.readFileSync(file, "utf8"));
+    return data && Number.isInteger(data.pid) ? data : undefined;
+  } catch (err) {
+    if (err.code === "ENOENT" || err instanceof SyntaxError) {
+      return undefined;
+    }
+    throw err;
+  }
+};
+
+export const writeProcessRecord = (file, data) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  const temporary = `${file}.${process.pid}.${Date.now()}.tmp`;
+  try {
+    fs.writeFileSync(temporary, JSON.stringify(data));
+    fs.renameSync(temporary, file);
+  } finally {
+    removeFileIfExists(temporary);
+  }
+};
+
+export const removeProcessRecord = (file) => {
+  removeFileIfExists(file);
+};
+
+export const acquireProcessRecord = (file, data) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      const fd = fs.openSync(file, "wx");
+      try {
+        fs.writeFileSync(fd, JSON.stringify(data));
+      } finally {
+        fs.closeSync(fd);
+      }
+      return { acquired: true };
+    } catch (err) {
+      if (err.code !== "EEXIST") {
+        throw err;
+      }
+      const existing = readProcessRecord(file);
+      if (existing && isProcessRecordAlive(existing)) {
+        return { acquired: false, existing };
+      }
+      if (!existing && isRecentFile(file)) {
+        return { acquired: false };
+      }
+      const removed = withExclusiveFileLockSync(`${file}.cleanup`, () => {
+        const current = readProcessRecord(file);
+        if (
+          current &&
+          (current.token !== existing?.token || isProcessRecordAlive(current))
+        ) {
+          return false;
+        }
+        removeProcessRecord(file);
+        return true;
+      });
+      if (!removed.acquired || !removed.value) {
+        return { acquired: false, existing: readProcessRecord(file) };
+      }
+    }
+  }
+  return { acquired: false, existing: readProcessRecord(file) };
+};
+
+export const releaseProcessRecord = (file, token, onRelease) => {
+  if (!token) {
+    return;
+  }
+  withExclusiveFileLockSync(`${file}.cleanup`, () => {
+    const existing = readProcessRecord(file);
+    if (!existing || existing.token === token) {
+      onRelease?.();
+      if (existing) {
+        removeProcessRecord(file);
+      }
+    }
+  });
+};
+
+const removeFileIfExists = (file) => {
+  try {
+    fs.rmSync(file);
+  } catch (err) {
+    if (err.code !== "ENOENT") {
+      throw err;
+    }
+  }
+};
+
+const isRecentFile = (file) => {
+  try {
+    return Date.now() - fs.statSync(file).mtimeMs < 5000;
+  } catch (err) {
+    if (err.code === "ENOENT") {
+      return false;
+    }
+    throw err;
+  }
+};
+
+export const withExclusiveFileLockSync = (file, operation) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  for (let attempt = 0; attempt < 2; attempt++) {
+    let fd;
+    try {
+      fd = fs.openSync(file, "wx");
+    } catch (err) {
+      if (err.code !== "EEXIST") {
+        throw err;
+      }
+      const owner = readProcessRecord(file);
+      if (owner && isProcessRecordAlive(owner)) {
+        return { acquired: false };
+      }
+      if (!owner && isRecentFile(file)) {
+        return { acquired: false };
+      }
+      removeFileIfExists(file);
+      continue;
+    }
+    try {
+      fs.writeFileSync(
+        fd,
+        JSON.stringify({
+          pid: process.pid,
+          startTime: processStartTime(process.pid),
+        })
+      );
+      return { acquired: true, value: operation() };
+    } finally {
+      try {
+        fs.closeSync(fd);
+      } finally {
+        removeFileIfExists(file);
+      }
+    }
+  }
+  return { acquired: false };
+};
+
+export const spawnForeground = ({
+  cmd,
+  args,
+  cwd,
+  env,
+  processGroup = false,
+  onSpawn,
+}) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      cwd,
+      detached: processGroup,
+      env,
+      stdio: "inherit",
+    });
+    let settled = false;
+    const forwardSigint = () =>
+      signalProcess(child.pid, "SIGINT", processGroup);
+    const forwardSigterm = () =>
+      signalProcess(child.pid, "SIGTERM", processGroup);
+    const forwardSighup = () =>
+      signalProcess(child.pid, "SIGHUP", processGroup);
+    const removeSignalHandlers = () => {
+      process.off("SIGINT", forwardSigint);
+      process.off("SIGTERM", forwardSigterm);
+      process.off("SIGHUP", forwardSighup);
+    };
+    if (processGroup) {
+      process.on("SIGINT", forwardSigint);
+      process.on("SIGTERM", forwardSigterm);
+      process.on("SIGHUP", forwardSighup);
+    }
+    child.once("spawn", () => {
+      try {
+        onSpawn?.(child);
+      } catch (err) {
+        settled = true;
+        signalProcess(child.pid, "SIGTERM", processGroup);
+        removeSignalHandlers();
+        reject(err);
+      }
+    });
+    child.once("error", (err) => {
+      if (!settled) {
+        settled = true;
+        removeSignalHandlers();
+        process.stderr.write(`Failed to start ${cmd}: ${err.message}\n`);
+        resolve(1);
+      }
+    });
+    child.once("exit", (code) => {
+      if (!settled) {
+        settled = true;
+        removeSignalHandlers();
+        resolve(code ?? 1);
+      }
+    });
+  });
+
+export const spawnDetachedToLog = ({ cmd, args, cwd, env, logFile }) =>
+  new Promise((resolve, reject) => {
+    fs.mkdirSync(path.dirname(logFile), { recursive: true });
+    const fd = fs.openSync(logFile, "w");
+    let child;
+    try {
+      child = spawn(cmd, args, {
+        cwd,
+        detached: true,
+        env,
+        stdio: ["ignore", fd, fd],
+      });
+    } finally {
+      fs.closeSync(fd);
+    }
+    child.once("spawn", () => {
+      child.unref();
+      resolve(child);
+    });
+    child.once("error", reject);
+  });
+
+const signalProcess = (pid, signal, processGroup) => {
+  if (processGroup) {
+    try {
+      process.kill(-pid, signal);
+      return;
+    } catch {
+      // Fall back to the process itself.
+    }
+  }
+  try {
+    process.kill(pid, signal);
+  } catch {
+    // Already gone.
+  }
+};
+
+export const terminateProcess = async ({
+  pid,
+  isStopped,
+  processGroup = true,
+  graceMs = 10_000,
+}) => {
+  signalProcess(pid, "SIGTERM", processGroup);
+  if (await waitFor(isStopped, 300, graceMs)) {
+    return true;
+  }
+  signalProcess(pid, "SIGKILL", processGroup);
+  await sleep(300);
+  return await isStopped();
+};
+
+const sameProcessRecord = (current, expected) =>
+  Boolean(expected?.token) && current?.token === expected.token;
+
+const stopProcessRecord = async (file, owner) => {
+  let current = readProcessRecord(file);
+  if (!current) {
+    return true;
+  }
+  if (!sameProcessRecord(current, owner)) {
+    return false;
+  }
+  if (!isProcessRecordAlive(current)) {
+    releaseProcessRecord(file, current.token);
+    return true;
+  }
+  const stopped = await terminateProcess({
+    pid: current.pid,
+    processGroup: current.processGroup ?? false,
+    isStopped: () => {
+      const latest = readProcessRecord(file);
+      return (
+        !sameProcessRecord(latest, owner) ||
+        !latest ||
+        !isProcessRecordAlive(latest)
+      );
+    },
+  });
+  current = readProcessRecord(file);
+  if (current && !sameProcessRecord(current, owner)) {
+    return false;
+  }
+  if (!stopped && current) {
+    return false;
+  }
+  releaseProcessRecord(file, owner.token);
+  return true;
+};
+
+export const offerToStopProcessRecord = async ({
+  file,
+  owner,
+  ownerDescription,
+  stopCommand,
+}) => {
+  if (
+    !owner ||
+    !stopCommand ||
+    !canPromptForConflict() ||
+    !(await confirmStopConflict(ownerDescription, stopCommand))
+  ) {
+    return false;
+  }
+  return stopProcessRecord(file, owner);
+};
+
+export const terminateDetachedProcess = (child) =>
+  terminateProcess({
+    pid: child.pid,
+    processGroup: true,
+    isStopped: () => !isProcessAlive(child.pid),
+  });
+
+export const outputLog = (logFile, follow, missingMessage) => {
+  if (!fs.existsSync(logFile)) {
+    process.stdout.write(missingMessage);
+    return Promise.resolve(0);
+  }
+  if (!follow) {
+    process.stdout.write(fs.readFileSync(logFile, "utf8"));
+    return Promise.resolve(0);
+  }
+  return new Promise((resolve) => {
+    const tail = spawn("tail", ["-f", logFile], { stdio: "inherit" });
+    let settled = false;
+    tail.once("error", () => {
+      if (!settled) {
+        settled = true;
+        process.stdout.write(fs.readFileSync(logFile, "utf8"));
+        resolve(0);
+      }
+    });
+    tail.once("exit", (code) => {
+      if (!settled) {
+        settled = true;
+        resolve(code ?? 1);
+      }
+    });
+  });
+};
+
+export const runCli = (main) => {
+  main().then(
+    (code) => {
+      process.exitCode = code;
+    },
+    (err) => {
+      process.stderr.write(`${err?.stack || err}\n`);
+      process.exitCode = 1;
+    }
+  );
+};

build-scripts/minify-template-literals-loader.cjs

@@ -12,18 +12,42 @@
 const remapping = require("@ampproject/remapping");
 
 // minify-literals is ESM-only, so load it via dynamic import from this CJS loader.
-let minifyPromise;
-const getMinifier = () => {
-  if (!minifyPromise) {
-    minifyPromise = import("minify-literals").then((m) => m.minifyHTMLLiterals);
+// Also map to cache loader promises per environment (e.g., 'modern', 'legacy')
+const loaderInitPromises = new Map();
+const initLoader = (browserslistEnv) => {
+  if (!loaderInitPromises.has(browserslistEnv)) {
+    loaderInitPromises.set(
+      browserslistEnv,
+      Promise.all([
+        import("minify-literals"),
+        import("browserslist"),
+        import("lightningcss"),
+      ]).then(([minifyModule, browserslistModule, lightningcssModule]) => {
+        const browserslist = browserslistModule.default;
+        const { browserslistToTargets } = lightningcssModule;
+        const rawTargets = browserslist(null, { env: browserslistEnv });
+        if (!rawTargets.length) {
+          throw new Error(
+            `No browsers resolved for browserslist environment "${browserslistEnv}"`
+          );
+        }
+        const lightningcssTargets = browserslistToTargets(rawTargets);
+
+        return {
+          minifyHTMLLiterals: minifyModule.minifyHTMLLiterals,
+          lightningcssTargets,
+        };
+      })
+    );
   }
-  return minifyPromise;
+  return loaderInitPromises.get(browserslistEnv);
 };
 
 // HTML options mirror the previous babel-plugin-template-html-minifier config
 // (html-minifier-next is option-compatible with html-minifier-terser). CSS in
-// css`` templates and inline <style> is handled by minify-literals' lightningcss
-// default.
+// css`` templates and inline <style> is handled by minify-literals'
+// lightningcss. We pass in the targets from browserslist so lightningcss
+// can minify CSS appropriately for the build environment.
 //
 // `keepClosingSlash` is required for `svg`` templates: SVG elements such as
 // `<path />` and `<circle />` are not void elements in HTML, so dropping the
@@ -40,11 +64,16 @@ const htmlOptions = {
 
 module.exports = function minifyTemplateLiteralsLoader(source, map, meta) {
   const callback = this.async();
-  getMinifier()
-    .then((minifyHTMLLiterals) =>
+  const { browserslistEnv } = this.getOptions();
+
+  initLoader(browserslistEnv)
+    .then(({ minifyHTMLLiterals, lightningcssTargets }) =>
       minifyHTMLLiterals(source, {
         fileName: this.resourcePath,
         html: htmlOptions,
+        css: {
+          targets: lightningcssTargets,
+        },
       })
     )
     .then((result) => {

build-scripts/output-lock.mjs

@@ -0,0 +1,127 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  acquireProcessRecord,
+  processStartTime,
+  readProcessRecord,
+  releaseProcessRecord,
+} from "./managed-process.mjs";
+
+const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+export const buildCacheDir =
+  process.env.HA_BUILD_CACHE_DIR ??
+  path.join(repoRoot, "node_modules", ".cache");
+
+const WORKFLOW_LOCK_TOKEN_ENV = "HA_WORKFLOW_LOCK_TOKEN";
+const signalCleanups = new Set();
+const cleanupSignals = ["SIGINT", "SIGTERM", "SIGHUP"];
+
+const handleSignal = (signal) => {
+  for (const cleanup of signalCleanups) {
+    cleanup();
+  }
+  for (const cleanupSignal of cleanupSignals) {
+    process.off(cleanupSignal, handleSignal);
+  }
+  process.kill(process.pid, signal);
+};
+
+const registerSignalCleanup = (cleanup) => {
+  if (signalCleanups.size === 0) {
+    for (const signal of cleanupSignals) {
+      process.on(signal, handleSignal);
+    }
+  }
+  signalCleanups.add(cleanup);
+};
+
+const unregisterSignalCleanup = (cleanup) => {
+  signalCleanups.delete(cleanup);
+  if (signalCleanups.size === 0) {
+    for (const signal of cleanupSignals) {
+      process.off(signal, handleSignal);
+    }
+  }
+};
+
+export const workflowLockFile = path.join(buildCacheDir, "ha-workflow.lock");
+
+export const workflowLockEnv = (token) => ({
+  ...process.env,
+  [WORKFLOW_LOCK_TOKEN_ENV]: token,
+});
+
+export const describeOutputOwner = (owner) => {
+  if (owner?.kind === "build") {
+    return `frontend ${owner.modern ? "modern " : ""}build`;
+  }
+  if (owner?.kind === "dev") {
+    return `dev server (${owner.suite ?? "app"})`;
+  }
+  return owner?.target ? `Gulp task ${owner.target}` : "another process";
+};
+
+const createLockTask = ({ file, inheritedTokenEnv, kind, label, target }) => {
+  let exitToken;
+
+  const cleanup = () => {
+    if (!exitToken) {
+      return;
+    }
+    releaseProcessRecord(file, exitToken);
+    exitToken = undefined;
+    process.off("exit", cleanup);
+    unregisterSignalCleanup(cleanup);
+  };
+  const acquire = async () => {
+    const inheritedToken = process.env[inheritedTokenEnv];
+    if (inheritedToken) {
+      if (readProcessRecord(file)?.token !== inheritedToken) {
+        throw Error(
+          `${label} lock ownership was lost before ${target} started.`
+        );
+      }
+      exitToken = inheritedToken;
+      process.once("exit", cleanup);
+      registerSignalCleanup(cleanup);
+      return;
+    }
+
+    const token = `${process.pid}-${Date.now()}-${Math.random()}`;
+    const record = {
+      pid: process.pid,
+      startTime: processStartTime(process.pid),
+      processGroup: false,
+      kind,
+      target,
+      token,
+    };
+    const result = acquireProcessRecord(file, record);
+    if (!result.acquired) {
+      const pid = result.existing?.pid;
+      throw Error(
+        `Cannot run ${target}: ${describeOutputOwner(result.existing)} ` +
+          `already owns ${label}${pid ? ` (pid ${pid})` : ""}.`
+      );
+    }
+
+    exitToken = token;
+    process.once("exit", cleanup);
+    registerSignalCleanup(cleanup);
+  };
+
+  acquire.displayName = `lock-${label}:${target}`;
+  return acquire;
+};
+
+export const createWorkflowLockTask = (target) =>
+  createLockTask({
+    file: workflowLockFile,
+    inheritedTokenEnv: WORKFLOW_LOCK_TOKEN_ENV,
+    kind: "output",
+    label: "build and development workflow",
+    target,
+  });

build-scripts/parallel-transform.mjs

@@ -0,0 +1,64 @@
+// Object-mode transform that keeps several files in flight at once.
+//
+// through2 and node's Transform both wait for the previous callback before
+// handling the next file, which serialises asynchronous work down to one file
+// at a time. This keeps `limit` files in flight and applies backpressure beyond
+// that. Files are emitted in completion order rather than input order.
+
+import { Transform } from "node:stream";
+
+export class ParallelTransform extends Transform {
+  #limit;
+
+  #handle;
+
+  #inFlight = 0;
+
+  #resume;
+
+  #finish;
+
+  constructor(limit, handle) {
+    super({ objectMode: true, highWaterMark: limit });
+    this.#limit = limit;
+    this.#handle = handle;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention -- node's Transform API
+  _transform(file, _encoding, callback) {
+    this.#inFlight += 1;
+    this.#handle(file)
+      .then((result) => {
+        if (result) {
+          this.push(result);
+        }
+      })
+      .catch((error) => this.destroy(error))
+      .finally(() => {
+        this.#inFlight -= 1;
+        const resume = this.#resume;
+        this.#resume = undefined;
+        resume?.();
+        if (this.#inFlight === 0) {
+          const finish = this.#finish;
+          this.#finish = undefined;
+          finish?.();
+        }
+      });
+
+    if (this.#inFlight < this.#limit) {
+      callback();
+    } else {
+      this.#resume = callback;
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention -- node's Transform API
+  _flush(callback) {
+    if (this.#inFlight === 0) {
+      callback();
+    } else {
+      this.#finish = callback;
+    }
+  }
+}

build-scripts/rspack.cjs

@@ -96,6 +96,11 @@ const createRspackConfig = ({
                   __dirname,
                   "minify-template-literals-loader.cjs"
                 ),
+                options: {
+                  browserslistEnv: latestBuild
+                    ? "modern"
+                    : `legacy${info.issuerLayer === "sw" ? "-sw" : ""}`,
+                },
               },
               !latestBuild &&
                 info.resource.startsWith(

build-scripts/zopfli-worker.mjs

@@ -0,0 +1,18 @@
+// Worker side of the zopfli pool. @gfx/zopfli is a synchronous WASM build, so
+// compressing on the main thread blocks the event loop; one instance per worker
+// is what makes the work parallel.
+
+import { parentPort } from "node:worker_threads";
+import zopfli from "@gfx/zopfli";
+
+parentPort.on("message", ({ contents, options }) => {
+  zopfli.gzip(contents, options, (error, result) => {
+    if (error) {
+      parentPort.postMessage({ error: error.message ?? String(error) });
+      return;
+    }
+    // `result` is a fresh Uint8Array copied out of the WASM heap, so it owns
+    // its ArrayBuffer and can be transferred instead of cloned.
+    parentPort.postMessage({ result }, [result.buffer]);
+  });
+});

build-scripts/zopfli.mjs

@@ -0,0 +1,137 @@
+// Gulp transform that gzips files with zopfli across a pool of worker threads.
+//
+// Drop-in replacement for gulp-zopfli-green. That plugin compresses on the main
+// thread, and @gfx/zopfli is synchronous WASM, so it pins a single core and
+// blocks the event loop for the whole compression step. Running one WASM
+// instance per worker parallelises it; the output bytes are unchanged.
+
+import { availableParallelism } from "node:os";
+import { buffer as readStream } from "node:stream/consumers";
+import { Worker } from "node:worker_threads";
+import { ParallelTransform } from "./parallel-transform.mjs";
+
+const WORKER_URL = new URL("./zopfli-worker.mjs", import.meta.url);
+const EXTENSION = ".gz";
+
+// Left empty on purpose: @gfx/zopfli then applies its own defaults, which is
+// what gulp-zopfli-green did, so compressed output stays byte-identical.
+const ZOPFLI_OPTIONS = {};
+
+const poolSize = () => {
+  const configured = Number(process.env.ZOPFLI_WORKERS);
+  return Number.isInteger(configured) && configured > 0
+    ? configured
+    : availableParallelism();
+};
+
+// One job per worker at a time, so the worker itself is the job slot.
+const createPool = (size) => {
+  const live = new Set();
+  const idle = [];
+  const waiting = [];
+  const inFlight = new Map();
+
+  // A dead worker must leave the pool, or it gets handed a job that never
+  // completes and the build hangs instead of failing.
+  const retire = (worker, error) => {
+    if (!live.delete(worker)) {
+      return;
+    }
+    const index = idle.indexOf(worker);
+    if (index !== -1) {
+      idle.splice(index, 1);
+    }
+    const job = inFlight.get(worker);
+    inFlight.delete(worker);
+    job?.reject(error);
+    waiting.shift()?.();
+  };
+
+  const spawn = () => {
+    const worker = new Worker(WORKER_URL);
+    live.add(worker);
+    // Idle workers must not hold the process open. Each job refs its worker for
+    // as long as it runs, so a pending compression always keeps the event loop
+    // alive.
+    worker.unref();
+
+    worker.on("message", ({ error, result }) => {
+      const job = inFlight.get(worker);
+      if (!job) {
+        return;
+      }
+      inFlight.delete(worker);
+      worker.unref();
+      idle.push(worker);
+      if (error) {
+        job.reject(new Error(error));
+      } else {
+        job.resolve(
+          Buffer.from(result.buffer, result.byteOffset, result.byteLength)
+        );
+      }
+      waiting.shift()?.();
+    });
+
+    worker.on("error", (error) => retire(worker, error));
+    worker.on("exit", () =>
+      retire(worker, new Error("zopfli worker exited unexpectedly"))
+    );
+
+    return worker;
+  };
+
+  return (contents) =>
+    new Promise((resolve, reject) => {
+      const start = () => {
+        const worker = idle.pop() ?? (live.size < size ? spawn() : undefined);
+        if (!worker) {
+          waiting.push(start);
+          return;
+        }
+        inFlight.set(worker, { resolve, reject });
+        worker.ref();
+        // `contents` is cloned rather than transferred: buffers read by vinyl
+        // can share a pooled ArrayBuffer with unrelated buffers, and
+        // transferring would detach those too.
+        worker.postMessage({ contents, options: ZOPFLI_OPTIONS });
+      };
+      start();
+    });
+};
+
+// Shared by every transform this module hands out, so the worker count is a
+// property of the process rather than of how many streams happen to run.
+let pool;
+
+const sharedPool = () => {
+  if (!pool) {
+    const size = poolSize();
+    pool = { size, compress: createPool(size) };
+  }
+  return pool;
+};
+
+/**
+ * @param {object} [options]
+ * @param {number} [options.threshold] Skip files smaller than this many bytes.
+ */
+export default ({ threshold = 0 } = {}) => {
+  const { size, compress } = sharedPool();
+
+  return new ParallelTransform(size, async (file) => {
+    if (file.isNull()) {
+      return file;
+    }
+    if (file.isStream()) {
+      file.contents = await readStream(file.contents);
+    }
+    if (threshold && file.contents.length < threshold) {
+      // Passed through unrenamed and uncompressed, as gulp-zopfli-green did.
+      return file;
+    }
+    file.contents = await compress(file.contents);
+    file.path += EXTENSION;
+    return file;
+  });
+};

demo/src/configs/demo-configs.ts

@@ -1,6 +1,9 @@
+import { navigate } from "../../../src/common/navigate";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type { Lovelace } from "../../../src/panels/lovelace/types";
+import { setDemoAreas } from "../stubs/area_registry";
 import { energyEntities } from "../stubs/entities";
+import { setDemoFloors } from "../stubs/floor_registry";
 import { getDemoTheme } from "../stubs/frontend";
 import type { DemoConfig, DemoTheme } from "./types";
 
@@ -12,33 +15,53 @@ export const applyDemoTheme = (hass: MockHomeAssistant, theme: DemoTheme) => {
   hass.mockTheme(null, getDemoTheme(theme));
 };
 
-export const demoConfigs: (() => Promise<DemoConfig>)[] = [
-  () => import("./sections").then((mod) => mod.demoSections),
-  () => import("./arsaboo").then((mod) => mod.demoArsaboo),
-  () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),
-  () => import("./kernehed").then((mod) => mod.demoKernehed),
-  () => import("./jimpower").then((mod) => mod.demoJimpower),
-];
+export const demoConfigs: Record<string, () => Promise<DemoConfig>> = {
+  sections: () => import("./sections").then((mod) => mod.demoSections),
+  home: () => import("./home").then((mod) => mod.demoHome),
+  arsaboo: () => import("./arsaboo").then((mod) => mod.demoArsaboo),
+  teachingbirds: () =>
+    import("./teachingbirds").then((mod) => mod.demoTeachingbirds),
+  kernehed: () => import("./kernehed").then((mod) => mod.demoKernehed),
+  jimpower: () => import("./jimpower").then((mod) => mod.demoJimpower),
+};
+
+export const demos = Object.keys(demoConfigs);
+
+const initialDemo = () => {
+  const slug = new URLSearchParams(window.location.search).get("demo");
+  return slug && demos.includes(slug) ? slug : demos[0];
+};
 
 // eslint-disable-next-line import-x/no-mutable-exports
-export let selectedDemoConfigIndex = 0;
+export let selectedDemo = initialDemo();
 // eslint-disable-next-line import-x/no-mutable-exports
 export let selectedDemoConfig: Promise<DemoConfig> =
-  demoConfigs[selectedDemoConfigIndex]();
+  demoConfigs[selectedDemo]();
 
 export const setDemoConfig = async (
   hass: MockHomeAssistant,
   lovelace: Lovelace,
-  index: number
+  demo: string
 ) => {
-  const confProm = demoConfigs[index]();
+  const confProm = demoConfigs[demo]();
   const config = await confProm;
 
-  selectedDemoConfigIndex = index;
+  selectedDemo = demo;
   selectedDemoConfig = confProm;
 
+  setDemoFloors(hass, config.floors);
+  setDemoAreas(hass, config.areas);
   hass.addEntities(config.entities(hass.localize), true);
   hass.addEntities(energyEntities());
-  lovelace.saveConfig(config.lovelace(hass.localize));
+
+  // Let the new registries and entities reach the dashboard before saving the
+  // config, so dashboard strategies generate against them
+  await new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
+
+  await lovelace.saveConfig(config.lovelace(hass.localize));
+  // The view of the previous demo might not exist in the new one
+  navigate(`/${hass.panelUrl}?demo=${demo}`, { replace: true });
   applyDemoTheme(hass, config.theme);
 };

demo/src/configs/home/areas.ts

@@ -0,0 +1,63 @@
+import type { DemoArea } from "../../stubs/area_registry";
+import type { DemoFloor } from "../../stubs/floor_registry";
+
+export const demoFloorsHome: DemoFloor[] = [
+  {
+    floor_id: "ground",
+    name: "Ground floor",
+    level: 0,
+  },
+  {
+    floor_id: "upstairs",
+    name: "Upstairs",
+    level: 1,
+  },
+];
+
+export const demoAreasHome: DemoArea[] = [
+  {
+    area_id: "living_room",
+    name: "Living room",
+    floor_id: "ground",
+    icon: "mdi:sofa",
+    temperature_entity_id: "sensor.living_room_temperature",
+    humidity_entity_id: "sensor.living_room_humidity",
+  },
+  {
+    area_id: "kitchen",
+    name: "Kitchen",
+    floor_id: "ground",
+    icon: "mdi:fridge",
+    temperature_entity_id: "sensor.kitchen_temperature",
+    humidity_entity_id: "sensor.kitchen_humidity",
+  },
+  {
+    area_id: "entrance",
+    name: "Entrance",
+    floor_id: "ground",
+    icon: "mdi:door",
+  },
+  {
+    area_id: "bedroom",
+    name: "Bedroom",
+    floor_id: "upstairs",
+    icon: "mdi:bed",
+    temperature_entity_id: "sensor.bedroom_temperature",
+    humidity_entity_id: "sensor.bedroom_humidity",
+  },
+  {
+    area_id: "office",
+    name: "Office",
+    floor_id: "upstairs",
+    icon: "mdi:desk",
+    temperature_entity_id: "sensor.office_temperature",
+    humidity_entity_id: "sensor.office_humidity",
+  },
+  {
+    area_id: "garden",
+    name: "Garden",
+    icon: "mdi:tree",
+    temperature_entity_id: "sensor.garden_temperature",
+    humidity_entity_id: "sensor.garden_humidity",
+  },
+];

demo/src/configs/home/entities.ts

@@ -0,0 +1,465 @@
+import type { DemoConfig } from "../types";
+
+export const demoEntitiesHome: DemoConfig["entities"] = () => [
+  // The devices tile on the overview uses zone.home, which always exists in
+  // a real installation.
+  {
+    entity_id: "zone.home",
+    state: "1",
+    attributes: {
+      latitude: 52.3731339,
+      longitude: 4.8903147,
+      radius: 100,
+      friendly_name: "Home",
+      icon: "mdi:home",
+    },
+  },
+  {
+    entity_id: "light.living_room_floor_lamp",
+    state: "on",
+    area_id: "living_room",
+    attributes: {
+      min_color_temp_kelvin: 2000,
+      max_color_temp_kelvin: 6535,
+      supported_color_modes: ["color_temp", "xy"],
+      color_mode: "color_temp",
+      brightness: 178,
+      color_temp_kelvin: 2583,
+      icon: "mdi:floor-lamp",
+      friendly_name: "Floor lamp",
+      supported_features: 44,
+    },
+  },
+  {
+    entity_id: "light.living_room_spotlights",
+    state: "on",
+    area_id: "living_room",
+    attributes: {
+      supported_color_modes: ["brightness"],
+      color_mode: "brightness",
+      brightness: 126,
+      icon: "mdi:ceiling-light-multiple",
+      friendly_name: "Spotlights",
+      supported_features: 32,
+    },
+  },
+  {
+    entity_id: "climate.living_room",
+    state: "heat",
+    area_id: "living_room",
+    attributes: {
+      hvac_modes: ["auto", "heat", "off"],
+      min_temp: 7,
+      max_temp: 35,
+      current_temperature: 21.5,
+      temperature: 21,
+      friendly_name: "Thermostat",
+      supported_features: 385,
+    },
+  },
+  {
+    entity_id: "cover.living_room_blinds",
+    state: "open",
+    area_id: "living_room",
+    attributes: {
+      current_position: 100,
+      device_class: "blind",
+      friendly_name: "Blinds",
+      supported_features: 15,
+    },
+  },
+  {
+    entity_id: "binary_sensor.living_room_window",
+    state: "off",
+    area_id: "living_room",
+    attributes: {
+      device_class: "window",
+      friendly_name: "Window",
+    },
+  },
+  {
+    entity_id: "media_player.living_room_speaker",
+    state: "playing",
+    area_id: "living_room",
+    attributes: {
+      device_class: "speaker",
+      volume_level: 0.28,
+      is_volume_muted: false,
+      media_content_type: "music",
+      media_duration: 300,
+      media_position: 0,
+      media_position_updated_at: new Date(
+        new Date().getTime() - 23000
+      ).toISOString(),
+      media_title: "I Wasn't Born To Follow",
+      media_artist: "The Byrds",
+      media_album_name: "The Notorious Byrd Brothers",
+      shuffle: false,
+      friendly_name: "Living room speaker",
+      supported_features: 64063,
+    },
+  },
+  {
+    entity_id: "sensor.living_room_temperature",
+    state: "21.5",
+    area_id: "living_room",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "°C",
+      device_class: "temperature",
+      friendly_name: "Temperature",
+    },
+  },
+  {
+    entity_id: "sensor.living_room_humidity",
+    state: "45",
+    area_id: "living_room",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "%",
+      device_class: "humidity",
+      friendly_name: "Humidity",
+    },
+  },
+  {
+    entity_id: "light.kitchen_spotlights",
+    state: "on",
+    area_id: "kitchen",
+    attributes: {
+      supported_color_modes: ["brightness"],
+      color_mode: "brightness",
+      brightness: 255,
+      icon: "mdi:ceiling-light-multiple",
+      friendly_name: "Spotlights",
+      supported_features: 32,
+    },
+  },
+  {
+    entity_id: "light.kitchen_worktop",
+    state: "off",
+    area_id: "kitchen",
+    attributes: {
+      supported_color_modes: ["brightness"],
+      color_mode: null,
+      brightness: null,
+      icon: "mdi:light-flood-down",
+      friendly_name: "Worktop",
+      supported_features: 32,
+    },
+  },
+  {
+    entity_id: "switch.coffee_machine",
+    state: "on",
+    area_id: "kitchen",
+    attributes: {
+      icon: "mdi:coffee-maker",
+      friendly_name: "Coffee machine",
+    },
+  },
+  {
+    entity_id: "binary_sensor.kitchen_motion",
+    state: "off",
+    area_id: "kitchen",
+    attributes: {
+      device_class: "motion",
+      friendly_name: "Motion",
+    },
+  },
+  {
+    entity_id: "media_player.kitchen_speaker",
+    state: "idle",
+    area_id: "kitchen",
+    attributes: {
+      device_class: "speaker",
+      volume_level: 0.18,
+      is_volume_muted: false,
+      friendly_name: "Kitchen speaker",
+      supported_features: 64063,
+    },
+  },
+  {
+    entity_id: "sensor.kitchen_temperature",
+    state: "22.1",
+    area_id: "kitchen",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "°C",
+      device_class: "temperature",
+      friendly_name: "Temperature",
+    },
+  },
+  {
+    entity_id: "sensor.kitchen_humidity",
+    state: "48",
+    area_id: "kitchen",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "%",
+      device_class: "humidity",
+      friendly_name: "Humidity",
+    },
+  },
+  {
+    entity_id: "lock.front_door",
+    state: "locked",
+    area_id: "entrance",
+    attributes: {
+      friendly_name: "Front door",
+      supported_features: 1,
+    },
+  },
+  {
+    entity_id: "binary_sensor.front_door",
+    state: "off",
+    area_id: "entrance",
+    attributes: {
+      device_class: "door",
+      friendly_name: "Front door",
+    },
+  },
+  {
+    entity_id: "alarm_control_panel.home_alarm",
+    state: "disarmed",
+    area_id: "entrance",
+    attributes: {
+      changed_by: null,
+      code_arm_required: false,
+      friendly_name: "Home alarm",
+      supported_features: 3,
+    },
+  },
+  {
+    entity_id: "light.entrance_ceiling",
+    state: "off",
+    area_id: "entrance",
+    attributes: {
+      supported_color_modes: ["brightness"],
+      color_mode: null,
+      brightness: null,
+      friendly_name: "Ceiling light",
+      supported_features: 32,
+    },
+  },
+  {
+    entity_id: "sensor.front_door_lock_battery",
+    state: "88",
+    area_id: "entrance",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "%",
+      device_class: "battery",
+      friendly_name: "Front door lock battery",
+    },
+  },
+  {
+    entity_id: "light.bedroom_ceiling",
+    state: "off",
+    area_id: "bedroom",
+    attributes: {
+      supported_color_modes: ["color_temp"],
+      color_mode: null,
+      brightness: null,
+      friendly_name: "Ceiling light",
+      supported_features: 44,
+    },
+  },
+  {
+    entity_id: "light.bedside_lamp",
+    state: "off",
+    area_id: "bedroom",
+    attributes: {
+      supported_color_modes: ["brightness"],
+      color_mode: null,
+      brightness: null,
+      icon: "mdi:lamp",
+      friendly_name: "Bedside lamp",
+      supported_features: 32,
+    },
+  },
+  {
+    entity_id: "cover.bedroom_shutter",
+    state: "open",
+    area_id: "bedroom",
+    attributes: {
+      current_position: 100,
+      device_class: "shutter",
+      friendly_name: "Shutter",
+      supported_features: 15,
+    },
+  },
+  {
+    entity_id: "media_player.bedroom_speaker",
+    state: "off",
+    area_id: "bedroom",
+    attributes: {
+      device_class: "speaker",
+      friendly_name: "Bedroom speaker",
+      supported_features: 64063,
+    },
+  },
+  {
+    entity_id: "binary_sensor.bedroom_motion",
+    state: "off",
+    area_id: "bedroom",
+    attributes: {
+      device_class: "motion",
+      friendly_name: "Motion",
+    },
+  },
+  {
+    entity_id: "sensor.bedroom_motion_battery",
+    state: "15",
+    area_id: "bedroom",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "%",
+      device_class: "battery",
+      friendly_name: "Motion sensor battery",
+    },
+  },
+  {
+    entity_id: "sensor.bedroom_temperature",
+    state: "19.6",
+    area_id: "bedroom",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "°C",
+      device_class: "temperature",
+      friendly_name: "Temperature",
+    },
+  },
+  {
+    entity_id: "sensor.bedroom_humidity",
+    state: "52",
+    area_id: "bedroom",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "%",
+      device_class: "humidity",
+      friendly_name: "Humidity",
+    },
+  },
+  {
+    entity_id: "light.office_desk_lamp",
+    state: "on",
+    area_id: "office",
+    attributes: {
+      supported_color_modes: ["brightness"],
+      color_mode: "brightness",
+      brightness: 200,
+      icon: "mdi:desk-lamp",
+      friendly_name: "Desk lamp",
+      supported_features: 32,
+    },
+  },
+  {
+    entity_id: "fan.office_ceiling_fan",
+    state: "off",
+    area_id: "office",
+    attributes: {
+      percentage: 0,
+      percentage_step: 25,
+      friendly_name: "Ceiling fan",
+      supported_features: 1,
+    },
+  },
+  {
+    entity_id: "binary_sensor.office_window",
+    state: "off",
+    area_id: "office",
+    attributes: {
+      device_class: "window",
+      friendly_name: "Window",
+    },
+  },
+  {
+    entity_id: "sensor.office_temperature",
+    state: "21.8",
+    area_id: "office",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "°C",
+      device_class: "temperature",
+      friendly_name: "Temperature",
+    },
+  },
+  {
+    entity_id: "sensor.office_humidity",
+    state: "50",
+    area_id: "office",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "%",
+      device_class: "humidity",
+      friendly_name: "Humidity",
+    },
+  },
+  {
+    entity_id: "switch.garden_sprinkler",
+    state: "off",
+    area_id: "garden",
+    attributes: {
+      icon: "mdi:sprinkler-variant",
+      friendly_name: "Sprinkler",
+    },
+  },
+  {
+    entity_id: "light.garden_path",
+    state: "off",
+    area_id: "garden",
+    attributes: {
+      supported_color_modes: ["brightness"],
+      color_mode: null,
+      brightness: null,
+      icon: "mdi:outdoor-lamp",
+      friendly_name: "Path lights",
+      supported_features: 32,
+    },
+  },
+  {
+    entity_id: "binary_sensor.garden_gate",
+    state: "off",
+    area_id: "garden",
+    attributes: {
+      device_class: "opening",
+      friendly_name: "Gate",
+    },
+  },
+  {
+    entity_id: "sensor.garden_temperature",
+    state: "14.2",
+    area_id: "garden",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "°C",
+      device_class: "temperature",
+      friendly_name: "Temperature",
+    },
+  },
+  {
+    entity_id: "sensor.garden_humidity",
+    state: "68",
+    area_id: "garden",
+    attributes: {
+      state_class: "measurement",
+      unit_of_measurement: "%",
+      device_class: "humidity",
+      friendly_name: "Humidity",
+    },
+  },
+  {
+    entity_id: "weather.home",
+    state: "partlycloudy",
+    area_id: "garden",
+    attributes: {
+      temperature: 14.2,
+      temperature_unit: "°C",
+      humidity: 68,
+      pressure: 1012,
+      pressure_unit: "hPa",
+      wind_speed: 11.2,
+      wind_speed_unit: "km/h",
+      friendly_name: "Home",
+    },
+  },
+];

demo/src/configs/home/index.ts

@@ -0,0 +1,17 @@
+import type { DemoConfig } from "../types";
+import { demoAreasHome, demoFloorsHome } from "./areas";
+import { demoEntitiesHome } from "./entities";
+import { demoLovelaceHome } from "./lovelace";
+
+export const demoHome: DemoConfig = {
+  authorName: "Home Assistant",
+  authorUrl: "https://www.home-assistant.io",
+  name: "Home page",
+  description:
+    "The page you land on when you open Home Assistant, automatically built from the areas in your home and the devices in them.",
+  lovelace: demoLovelaceHome,
+  entities: demoEntitiesHome,
+  floors: demoFloorsHome,
+  areas: demoAreasHome,
+  theme: { theme: "default", dark: false },
+};

demo/src/configs/home/lovelace.ts

@@ -0,0 +1,9 @@
+import "./strategies";
+import type { DemoConfig } from "../types";
+
+export const demoLovelaceHome: DemoConfig["lovelace"] = () => ({
+  strategy: {
+    type: "custom:demo-home",
+    favorite_entities: ["lock.front_door", "switch.garden_sprinkler"],
+  },
+});

demo/src/configs/home/strategies.ts

@@ -0,0 +1,109 @@
+import { ReactiveElement } from "lit";
+import { isStrategySection } from "../../../../src/data/lovelace/config/section";
+import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
+import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
+import { isStrategyView } from "../../../../src/data/lovelace/config/view";
+import type { HomeDashboardStrategyConfig } from "../../../../src/panels/lovelace/strategies/home/home-dashboard-strategy";
+import { HomeDashboardStrategy } from "../../../../src/panels/lovelace/strategies/home/home-dashboard-strategy";
+import type { HomeOverviewViewStrategyConfig } from "../../../../src/panels/lovelace/strategies/home/home-overview-view-strategy";
+import { HomeOverviewViewStrategy } from "../../../../src/panels/lovelace/strategies/home/home-overview-view-strategy";
+import { generateLovelaceSectionStrategy } from "../../../../src/panels/lovelace/strategies/get-strategy";
+import type { HomeAssistant } from "../../../../src/types";
+
+export interface DemoHomeDashboardStrategyConfig extends Omit<
+  HomeDashboardStrategyConfig,
+  "type"
+> {
+  type: "custom:demo-home";
+}
+
+interface DemoHomeOverviewViewStrategyConfig extends Omit<
+  HomeOverviewViewStrategyConfig,
+  "type"
+> {
+  type: "custom:demo-home-overview";
+}
+
+class DemoHomeDashboardStrategy extends ReactiveElement {
+  static registryDependencies = HomeDashboardStrategy.registryDependencies;
+
+  static async generate(
+    config: DemoHomeDashboardStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceConfig> {
+    const generated = await HomeDashboardStrategy.generate(
+      { ...config, type: "home" },
+      hass
+    );
+    // Swap the overview view for the demo version, which adds the demo card.
+    return {
+      ...generated,
+      views: generated.views.map((view) =>
+        isStrategyView(view) && view.strategy.type === "home-overview"
+          ? {
+              ...view,
+              strategy: { ...view.strategy, type: "custom:demo-home-overview" },
+            }
+          : view
+      ),
+    };
+  }
+}
+
+class DemoHomeOverviewViewStrategy extends ReactiveElement {
+  static registryDependencies = HomeOverviewViewStrategy.registryDependencies;
+
+  static async generate(
+    config: DemoHomeOverviewViewStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceViewConfig> {
+    const view = await HomeOverviewViewStrategy.generate(
+      { ...config, type: "home-overview" },
+      hass
+    );
+    // Expand the favorites section so the demo card can be added to it
+    const sections = await Promise.all(
+      (view.sections || []).map(async (section) => {
+        if (
+          !isStrategySection(section) ||
+          section.strategy.type !== "common-controls"
+        ) {
+          return section;
+        }
+        // The demo card takes up the space of two tiles
+        const limit = (section.strategy.limit as number | undefined) ?? 8;
+        const favorites = await generateLovelaceSectionStrategy(
+          { ...section, strategy: { ...section.strategy, limit: limit - 2 } },
+          hass
+        );
+        const [heading, ...cards] = favorites.cards || [];
+        return {
+          ...favorites,
+          // Place the demo card first so the tiles fill the rows next to it
+          cards: [heading, { type: "custom:ha-demo-next-card" }, ...cards],
+        };
+      })
+    );
+
+    return {
+      ...view,
+      sections: sections,
+    };
+  }
+}
+
+customElements.define(
+  "ll-strategy-dashboard-demo-home",
+  DemoHomeDashboardStrategy
+);
+customElements.define(
+  "ll-strategy-view-demo-home-overview",
+  DemoHomeOverviewViewStrategy
+);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ll-strategy-dashboard-demo-home": DemoHomeDashboardStrategy;
+    "ll-strategy-view-demo-home-overview": DemoHomeOverviewViewStrategy;
+  }
+}

demo/src/configs/types.ts

@@ -1,8 +1,10 @@
 import type { TemplateResult } from "lit";
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
-import type { LovelaceConfig } from "../../../src/data/lovelace/config/types";
+import type { LovelaceRawConfig } from "../../../src/data/lovelace/config/types";
 import type { EntityInput } from "../../../src/fake_data/entities/types";
 import type { ThemeSettings } from "../../../src/types";
+import type { DemoArea } from "../stubs/area_registry";
+import type { DemoFloor } from "../stubs/floor_registry";
 
 export type DemoTheme = ThemeSettings | (() => Record<string, string> | null);
 
@@ -13,7 +15,9 @@ export interface DemoConfig {
   authorUrl: string;
   description?:
     string | ((localize: LocalizeFunc) => string | TemplateResult<1>);
-  lovelace: (localize: LocalizeFunc) => LovelaceConfig;
+  lovelace: (localize: LocalizeFunc) => LovelaceRawConfig;
   entities: (localize: LocalizeFunc) => EntityInput[];
+  floors?: DemoFloor[];
+  areas?: DemoArea[];
   theme: DemoTheme;
 }

demo/src/custom-cards/cast-demo-row.ts

@@ -41,25 +41,30 @@ class CastDemoRow extends LitElement implements LovelaceRow {
   protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
-      getCastManager().then((mgr) => {
-        this._castManager = mgr;
-        mgr.addEventListener("state-changed", () => {
-          this.requestUpdate();
-        });
-        mgr.castContext.addEventListener(
-          cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
-          (ev) => {
-            // On Android, opening a new session always results in SESSION_RESUMED.
-            // So treat both as the same.
-            if (
-              ev.sessionState === "SESSION_STARTED" ||
-              ev.sessionState === "SESSION_RESUMED"
-            ) {
-              castSendShowDemo(mgr);
+      getCastManager().then(
+        (mgr) => {
+          this._castManager = mgr;
+          mgr.addEventListener("state-changed", () => {
+            this.requestUpdate();
+          });
+          mgr.castContext.addEventListener(
+            cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
+            (ev) => {
+              // On Android, opening a new session always results in SESSION_RESUMED.
+              // So treat both as the same.
+              if (
+                ev.sessionState === "SESSION_STARTED" ||
+                ev.sessionState === "SESSION_RESUMED"
+              ) {
+                castSendShowDemo(mgr);
+              }
             }
-          }
-        );
-      })
+          );
+        },
+        () => {
+          this._castManager = null;
+        }
+      )
     );
   }
 

demo/src/custom-cards/ha-demo-card.ts

@@ -13,9 +13,9 @@ import type {
   LovelaceCard,
 } from "../../../src/panels/lovelace/types";
 import {
-  demoConfigs,
+  demos,
+  selectedDemo,
   selectedDemoConfig,
-  selectedDemoConfigIndex,
 } from "../configs/demo-configs";
 
 @customElement("ha-demo-card")
@@ -112,16 +112,12 @@ export class HADemoCard extends LitElement implements LovelaceCard {
   }
 
   private _nextConfig() {
-    this._updateConfig(
-      selectedDemoConfigIndex < demoConfigs.length - 1
-        ? selectedDemoConfigIndex + 1
-        : 0
-    );
+    this._updateConfig(demos[(demos.indexOf(selectedDemo) + 1) % demos.length]);
   }
 
-  private async _updateConfig(index: number) {
+  private async _updateConfig(demo: string) {
     this._switching = true;
-    fireEvent(this, "set-demo-config" as any, { index });
+    fireEvent(this, "set-demo-config" as any, { demo });
   }
 
   static get styles(): CSSResultGroup {

demo/src/custom-cards/ha-demo-next-card.ts

@@ -0,0 +1,103 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { until } from "lit/directives/until";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-control-button";
+import "../../../src/components/ha-control-button-group";
+import "../../../src/components/tile/ha-tile-container";
+import "../../../src/components/tile/ha-tile-icon";
+import "../../../src/components/tile/ha-tile-info";
+import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { tileCardStyle } from "../../../src/panels/lovelace/cards/tile/tile-card-style";
+import type {
+  LovelaceCard,
+  LovelaceGridOptions,
+} from "../../../src/panels/lovelace/types";
+import {
+  demos,
+  selectedDemo,
+  selectedDemoConfig,
+} from "../configs/demo-configs";
+
+@customElement("ha-demo-next-card")
+export class HADemoNextCard extends LitElement implements LovelaceCard {
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
+
+  @state() private _switching = false;
+
+  public getCardSize() {
+    return 2;
+  }
+
+  public getGridOptions(): LovelaceGridOptions {
+    return {
+      columns: 6,
+      rows: 2,
+      min_columns: 6,
+      min_rows: 2,
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  public setConfig(_config: LovelaceCardConfig) {}
+
+  protected render() {
+    return html`
+      <ha-card>
+        <ha-tile-container>
+          <ha-tile-icon slot="icon" icon="mdi:home-assistant"></ha-tile-icon>
+          <ha-tile-info slot="info">
+            <span slot="primary">
+              ${until(
+                selectedDemoConfig.then((conf) => conf.name),
+                nothing
+              )}
+            </span>
+            <span slot="secondary">
+              ${this.hass.localize(
+                "ui.panel.page-demo.cards.demo.interactive_demo"
+              )}
+            </span>
+          </ha-tile-info>
+          <ha-control-button-group slot="features">
+            <ha-control-button
+              .disabled=${this._switching}
+              @click=${this._nextConfig}
+            >
+              ${this.hass.localize("ui.panel.page-demo.cards.demo.next_demo")}
+            </ha-control-button>
+          </ha-control-button-group>
+        </ha-tile-container>
+      </ha-card>
+    `;
+  }
+
+  private _nextConfig() {
+    this._switching = true;
+    fireEvent(this, "set-demo-config" as any, {
+      demo: demos[(demos.indexOf(selectedDemo) + 1) % demos.length],
+    });
+  }
+
+  static styles = [
+    tileCardStyle,
+    css`
+      :host {
+        --tile-color: var(--primary-color);
+      }
+      ha-control-button-group {
+        --control-button-group-spacing: 0;
+        --control-button-group-thickness: var(--feature-height, 42px);
+        padding: 0 var(--ha-space-3) var(--ha-space-3);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-demo-next-card": HADemoNextCard;
+  }
+}

demo/src/ha-demo.ts

@@ -6,7 +6,7 @@ import { provideHass } from "../../src/fake_data/provide_hass";
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
 import type { HomeAssistant } from "../../src/types";
 import { applyDemoTheme, selectedDemoConfig } from "./configs/demo-configs";
-import { mockAreaRegistry } from "./stubs/area_registry";
+import { mockAreaRegistry, setDemoAreas } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { demoDevices } from "./stubs/devices";
 import { mockDeviceRegistry } from "./stubs/device_registry";
@@ -14,8 +14,10 @@ import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
-import { mockFloorRegistry } from "./stubs/floor_registry";
+import { mockFloorRegistry, setDemoFloors } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
+import { mockHardware } from "./stubs/hardware";
+import { mockHassioSupervisor } from "./stubs/hassio_supervisor";
 import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
@@ -29,6 +31,7 @@ import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";
+import { mockUsagePrediction } from "./stubs/usage_prediction";
 import "./cloud/cloud-demo-controls";
 
 // WS command / REST path prefixes whose mocks live in the lazily imported
@@ -72,13 +75,18 @@ export class HaDemo extends HomeAssistantAppEl {
     // `contextMixin`, so let provideHass skip them to avoid duplicate providers.
     const hass = provideHass(this, initial, true, false);
 
-    // The cloud account page only fetches backup config and the webhook count
-    // when those integrations are loaded. Enable them here (demo only) so the
-    // mocked backup/config/info and webhook/list are queried.
     hass.updateHass({
       config: {
         ...hass.config,
-        components: [...(hass.config?.components ?? []), "backup", "webhook"],
+        components: [
+          ...(hass.config?.components ?? []),
+          "backup",
+          "webhook",
+          "usage_prediction",
+          "assist_pipeline",
+          "hassio",
+          "hardware",
+        ],
       },
     });
 
@@ -105,6 +113,8 @@ export class HaDemo extends HomeAssistantAppEl {
     mockEvents(hass);
     mockMediaPlayer(hass);
     mockFrontend(hass);
+    mockHardware(hass);
+    mockHassioSupervisor(hass);
     mockIcons(hass);
     mockEnergy(hass);
     mockPersistentNotification(hass);
@@ -122,6 +132,7 @@ export class HaDemo extends HomeAssistantAppEl {
     mockDeviceRegistry(hass, demoDevices);
     mockFloorRegistry(hass);
     mockLabelRegistry(hass);
+    mockUsagePrediction(hass);
     mockEntityRegistry(hass, [
       {
         config_entry_id: "co2signal",
@@ -169,9 +180,11 @@ export class HaDemo extends HomeAssistantAppEl {
 
     hass.addEntities(energyEntities());
 
-    // Once config is loaded AND localize, set entities and apply theme.
+    // Once config is loaded AND localize, set registries, entities and theme.
     Promise.all([selectedDemoConfig, localizePromise]).then(
       ([conf, localize]) => {
+        setDemoFloors(hass, conf.floors);
+        setDemoAreas(hass, conf.areas);
         hass.addEntities(conf.entities(localize));
         applyDemoTheme(hass, conf.theme);
       }

demo/src/html/index.html.template

@@ -56,15 +56,40 @@
         padding: 0;
       }
       #ha-launch-screen {
+        font-family: ui-sans-serif, system-ui, sans-serif;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        user-select: none;
+        -webkit-user-select: none;
+        transition: opacity var(--ha-animation-duration-normal, 250ms) ease-out;
       }
-      #ha-launch-screen svg {
-        width: 112px;
+      #ha-launch-screen.removing {
+        opacity: 0;
+      }
+      @keyframes launch-lockup-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      #ha-launch-screen .ha-lockup {
+        display: flex;
+        align-items: center;
         flex-shrink: 0;
+        animation: launch-lockup-in var(--ha-animation-duration-normal, 250ms) ease-out both;
+      }
+      #ha-launch-screen-info-box > *,
+      #ha-launch-screen .ohf-logo {
+        animation: launch-lockup-in var(--ha-animation-duration-normal, 250ms) ease-out both;
+      }
+      #ha-launch-screen .ha-logo {
+        width: 96px;
+        height: 96px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
@@ -73,18 +98,39 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
         flex: 1;
-        padding-top: 48px;
+        padding-top: 16px;
       }
       .ohf-logo {
         margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;
         display: flex;
         flex-direction: column;
         align-items: center;
+        gap: 4px;
         opacity: .66;
       }
-      @media (prefers-color-scheme: dark) {
+      .ohf-logo span {
+        font-size: 12px;
+        line-height: 12px;
+        text-transform: uppercase;
+      }
+      .ohf-logo picture {
+        display: flex;
+      }
+      .ohf-logo img {
+        width: 237px;
+        aspect-ratio: 237 / 24;
+        height: auto;
+      }
+      @media (max-height: 560px) {
+        #ha-launch-screen .ha-launch-screen-spacer-top {
+          margin-top: 24px;
+          padding-top: 24px;
+        }
+        #ha-launch-screen .ha-launch-screen-spacer-bottom {
+          padding-top: 16px;
+        }
         .ohf-logo {
-          filter: invert(1);
+          margin-block: 24px;
         }
       }
     </style>
@@ -92,13 +138,16 @@
   <body>
     <div id="ha-launch-screen">
       <div class="ha-launch-screen-spacer-top"></div>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
-        <path fill="#18BCF2" d="M240 224.762a15 15 0 0 1-15 15H15a15 15 0 0 1-15-15v-90c0-8.25 4.77-19.769 10.61-25.609l98.78-98.7805c5.83-5.83 15.38-5.83 21.21 0l98.79 98.7895c5.83 5.83 10.61 17.36 10.61 25.61v90-.01Z"/>
-        <path fill="#F2F4F9" d="m107.27 239.762-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.3395-11.5-10.3195-11.5-18.3895 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.3895v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88z"/>
-      </svg>
+      <div class="ha-lockup">
+        <img class="ha-logo" src="/static/images/home-assistant-logo-loading.svg" alt="Home Assistant">
+      </div>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer-bottom"></div>
       <div class="ohf-logo">
-        <img src="/static/images/ohf-badge.svg" alt="Home Assistant is a project by the Open Home Foundation" height="46">
+        <span id="ha-launch-screen-attribution">A project from the</span>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="/static/images/open-home-foundation-on-dark.svg">
+          <img src="/static/images/open-home-foundation-on-light.svg" alt="Open Home Foundation" width="237" height="24">
+        </picture>
       </div>
     </div>
     <ha-demo></ha-demo>

demo/src/stubs/area_registry.ts

@@ -1,14 +1,46 @@
 import type { AreaRegistryEntry } from "../../../src/data/area/area_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+export interface DemoArea {
+  area_id: string;
+  name: string;
+  floor_id?: string;
+  icon?: string;
+  temperature_entity_id?: string;
+  humidity_entity_id?: string;
+}
+
+let areas: AreaRegistryEntry[] = [];
+
 export const mockAreaRegistry = (
   hass: MockHomeAssistant,
-  data: AreaRegistryEntry[] = []
+  data: DemoArea[] = []
 ) => {
-  hass.mockWS("config/area_registry/list", () => data);
-  const areas = {};
-  data.forEach((area) => {
-    areas[area.area_id] = area;
-  });
-  hass.updateHass({ areas });
+  hass.mockWS("config/area_registry/list", () => areas);
+  setDemoAreas(hass, data);
+};
+
+/** Set the areas of the currently loaded demo config. */
+export const setDemoAreas = (
+  hass: MockHomeAssistant,
+  demoAreas: DemoArea[] = []
+) => {
+  areas = demoAreas.map((area) => ({
+    area_id: area.area_id,
+    name: area.name,
+    floor_id: area.floor_id ?? null,
+    icon: area.icon ?? null,
+    temperature_entity_id: area.temperature_entity_id ?? null,
+    humidity_entity_id: area.humidity_entity_id ?? null,
+    aliases: [],
+    labels: [],
+    picture: null,
+    created_at: 0,
+    modified_at: 0,
+  }));
+  const areasById: Record<string, AreaRegistryEntry> = {};
+  areas.forEach((area) => {
+    areasById[area.area_id] = area;
+  });
+  hass.updateHass({ areas: areasById });
 };

demo/src/stubs/assist.ts

@@ -19,17 +19,31 @@ const pipelines: AssistPipeline[] = [
   {
     id: "01local",
     name: "Local",
-    language: "en",
+    language: "nl",
     conversation_engine: "conversation.home_assistant",
-    conversation_language: "en",
+    conversation_language: "nl",
     stt_engine: "stt.faster_whisper",
-    stt_language: "en",
+    stt_language: "nl",
     tts_engine: "tts.piper",
-    tts_language: "en",
+    tts_language: "nl",
     tts_voice: null,
     wake_word_entity: null,
     wake_word_id: null,
   },
+  {
+    id: "01chatgpt",
+    name: "ChatGPT",
+    language: "es",
+    conversation_engine: "conversation.chatgpt",
+    conversation_language: "es",
+    stt_engine: "cloud",
+    stt_language: "es-ES",
+    tts_engine: "cloud",
+    tts_language: "es-ES",
+    tts_voice: "ElviraNeural",
+    wake_word_entity: null,
+    wake_word_id: null,
+  },
 ];
 
 export const mockAssist = (hass: MockHomeAssistant) => {

demo/src/stubs/entities.ts

@@ -85,7 +85,7 @@ export const energyEntities = () =>
       },
     },
     "sensor.energy_consumption_tarif_1": {
-      entity_id: "sensor.energy_consumption_tarif_1	",
+      entity_id: "sensor.energy_consumption_tarif_1",
       state: "88.6",
       attributes: {
         last_reset: "1970-01-01T00:00:00:00+00",

demo/src/stubs/floor_registry.ts

@@ -1,7 +1,40 @@
 import type { FloorRegistryEntry } from "../../../src/data/floor_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+export interface DemoFloor {
+  floor_id: string;
+  name: string;
+  level?: number;
+  icon?: string;
+}
+
+let floors: FloorRegistryEntry[] = [];
+
 export const mockFloorRegistry = (
   hass: MockHomeAssistant,
-  data: FloorRegistryEntry[] = []
-) => hass.mockWS("config/floor_registry/list", () => data);
+  data: DemoFloor[] = []
+) => {
+  hass.mockWS("config/floor_registry/list", () => floors);
+  setDemoFloors(hass, data);
+};
+
+/** Set the floors of the currently loaded demo config. */
+export const setDemoFloors = (
+  hass: MockHomeAssistant,
+  demoFloors: DemoFloor[] = []
+) => {
+  floors = demoFloors.map((floor) => ({
+    floor_id: floor.floor_id,
+    name: floor.name,
+    level: floor.level ?? null,
+    icon: floor.icon ?? null,
+    aliases: [],
+    created_at: 0,
+    modified_at: 0,
+  }));
+  const floorsById: Record<string, FloorRegistryEntry> = {};
+  floors.forEach((floor) => {
+    floorsById[floor.floor_id] = floor;
+  });
+  hass.updateHass({ floors: floorsById });
+};

demo/src/stubs/hardware.ts

@@ -0,0 +1,48 @@
+import type {
+  HardwareInfo,
+  SystemStatusStreamMessage,
+} from "../../../src/data/hardware";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+// Mirrors what homeassistant_green reports, so the hardware page resolves the
+// board name and the brands image the same way it does on a real Green.
+const HARDWARE_INFO: HardwareInfo = {
+  hardware: [
+    {
+      board: {
+        hassio_board_id: "green",
+        manufacturer: "homeassistant",
+        model: "green",
+      },
+      dongle: null,
+      config_entries: [],
+      name: "Home Assistant Green",
+      url: "https://support.nabucasa.com/hc/en-us/categories/24638797677853-Home-Assistant-Green",
+    },
+  ],
+};
+
+export const mockHardware = (hass: MockHomeAssistant) => {
+  hass.mockWS("hardware/info", () => HARDWARE_INFO);
+
+  hass.mockWS(
+    "hardware/subscribe_system_status",
+    (_msg, _currentHass, onChange) => {
+      // Rounded like the hardware integration rounds psutil's values.
+      const send = () => {
+        const usedMb = 1560 + Math.round(Math.random() * 80);
+        const message: SystemStatusStreamMessage = {
+          cpu_percent: Math.round((8 + Math.random() * 6) * 10) / 10,
+          memory_free_mb: 4096 - usedMb,
+          memory_used_mb: usedMb,
+          memory_used_percent: Math.round((usedMb / 4096) * 1000) / 10,
+          timestamp: new Date().toISOString(),
+        };
+        onChange?.(message);
+      };
+      send();
+      const interval = window.setInterval(send, 1000);
+      return () => clearInterval(interval);
+    }
+  );
+};

demo/src/stubs/hassio_supervisor.ts

@@ -1,59 +1,385 @@
-import type { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+import type {
+  HassioAddonDetails,
+  HassioAddonInfo,
+  HassioAddonsInfo,
+} from "../../../src/data/hassio/addon";
+import type { HassioStats } from "../../../src/data/hassio/common";
+import type {
+  HassioHassOSInfo,
+  HassioHostInfo,
+  HostDisksUsage,
+} from "../../../src/data/hassio/host";
+import type { NetworkInfo } from "../../../src/data/hassio/network";
+import type {
+  HassioInfo,
+  HassioSupervisorInfo,
+} from "../../../src/data/hassio/supervisor";
+import type { SupervisorMounts } from "../../../src/data/supervisor/mounts";
+import type { SupervisorUpdateConfig } from "../../../src/data/supervisor/update";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+// `icon`/`logo` are false on purpose: the panel would otherwise request
+// /api/hassio/addons/<slug>/icon, which the demo has no backend for.
+const DEMO_ADDONS: HassioAddonInfo[] = [
+  {
+    name: "Music Assistant",
+    slug: "d5369777_music_assistant",
+    description:
+      "Music library manager for all your media sources and streaming services, with support for a wide range of players",
+    advanced: false,
+    available: true,
+    build: false,
+    detached: false,
+    homeassistant: "2025.7.0",
+    icon: false,
+    installed: true,
+    logo: false,
+    repository: "d5369777",
+    stage: "stable",
+    state: "started",
+    update_available: false,
+    url: "https://github.com/music-assistant/home-assistant-addon",
+    version: "2.6.3",
+    version_latest: "2.6.3",
+  },
+  {
+    name: "ESPHome Device Builder",
+    slug: "5c53de3b_esphome",
+    description:
+      "Manage and program your ESP8266/ESP32 based microcontrollers directly via WiFi and with a simple, yet powerful configuration file syntax",
+    advanced: false,
+    available: true,
+    build: false,
+    detached: false,
+    homeassistant: "2025.7.0",
+    icon: false,
+    installed: true,
+    logo: false,
+    repository: "5c53de3b",
+    stage: "stable",
+    state: "started",
+    update_available: false,
+    url: "https://esphome.io/",
+    version: "2025.7.3",
+    version_latest: "2025.7.3",
+  },
+];
+
+const LONG_DESCRIPTIONS: Record<string, string> = {
+  d5369777_music_assistant: `## Music Assistant
+
+Music Assistant brings all your music sources together in one library and streams
+them to the players you already own.
+
+- Combines local files with streaming services into a single searchable library
+- Plays to Sonos, Chromecast, AirPlay, Squeezebox, DLNA and Home Assistant media players
+- Group players together for synced multi-room audio
+- Exposes players and playlists to Home Assistant automations and voice assistants`,
+  "5c53de3b_esphome": `## ESPHome Device Builder
+
+ESPHome turns an ESP8266 or ESP32 into a Home Assistant device using a short YAML
+configuration instead of hand-written firmware.
+
+- Compile and flash firmware straight from the browser, over WiFi after the first flash
+- Hundreds of supported sensors, displays, lights and switches
+- Devices are discovered by Home Assistant automatically, with no cloud in between
+- Configuration lives next to your Home Assistant config, so it is covered by backups`,
+};
+
+// Supervisor schema format (converted to selectors by the config tab). Music
+// Assistant is configured in its own UI, so it has no add-on options.
+const CONFIG_SCHEMAS: Record<string, HassioAddonDetails["schema"]> = {
+  "5c53de3b_esphome": [
+    { name: "ssl", type: "boolean", required: true },
+    { name: "certfile", type: "string", required: true },
+    { name: "keyfile", type: "string", required: true },
+    { name: "leave_front_door_open", type: "boolean", required: false },
+    { name: "status_use_ping", type: "boolean", required: false },
+  ],
+};
+
+const CONFIG_OPTIONS: Record<string, Record<string, unknown>> = {
+  "5c53de3b_esphome": {
+    ssl: false,
+    certfile: "fullchain.pem",
+    keyfile: "privkey.pem",
+  },
+};
+
+const addonDetails = (addon: HassioAddonInfo): HassioAddonDetails => ({
+  ...addon,
+  apparmor: "default",
+  arch: ["aarch64", "amd64"],
+  audio_input: null,
+  audio_output: null,
+  audio: false,
+  auth_api: false,
+  auto_uart: false,
+  auto_update: false,
+  boot: "auto",
+  changelog: false,
+  devices: [],
+  devicetree: false,
+  discovery: [],
+  docker_api: false,
+  documentation: false,
+  full_access: false,
+  gpio: false,
+  hassio_api: false,
+  hassio_role: "default",
+  hostname: addon.slug.replace(/_/g, "-"),
+  homeassistant_api: false,
+  host_dbus: false,
+  host_ipc: false,
+  host_network: false,
+  host_pid: false,
+  ingress_entry: null,
+  ingress_panel: false,
+  ingress_url: null,
+  ingress: false,
+  ip_address: "172.30.33.2",
+  kernel_modules: false,
+  long_description: LONG_DESCRIPTIONS[addon.slug],
+  machine: [],
+  network_description: null,
+  network: null,
+  options: CONFIG_OPTIONS[addon.slug] ?? {},
+  privileged: [],
+  protected: true,
+  rating: 6,
+  schema: CONFIG_SCHEMAS[addon.slug] ?? null,
+  services_role: [],
+  signed: false,
+  startup: "application",
+  stdin: false,
+  system_managed: false,
+  system_managed_config_entry: null,
+  translations: {},
+  watchdog: true,
+  webui: null,
+});
+
+const LOGS: Record<string, string> = {
+  d5369777_music_assistant: `[server] Starting Music Assistant Server 2.6.3
+[server] Loaded provider: filesystem_local
+[server] Loaded provider: spotify
+[server] Loaded provider: sonos
+[players] Discovered player: Living Room (Sonos)
+[players] Discovered player: Kitchen (Chromecast)
+[server] Music Assistant is ready
+`,
+  "5c53de3b_esphome": `[esphome] Starting ESPHome Device Builder 2025.7.3
+[esphome] Dashboard running on port 6052
+[esphome] Found 3 configurations
+[esphome] bedroom-sensor is online (2025.7.3)
+[esphome] garage-door is online (2025.7.3)
+[esphome] office-display is online (2025.7.3)
+`,
+};
+
+const ADDON_STATS: HassioStats = {
+  blk_read: 12300000,
+  blk_write: 4500000,
+  cpu_percent: 1.4,
+  memory_limit: 3900000000,
+  memory_percent: 4.2,
+  memory_usage: 163000000,
+  network_rx: 8900000,
+  network_tx: 2300000,
+};
+
 export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
-  hass.config.components.push("hassio");
+  // Gallery pages rely on this to enable the hassio-gated pickers. The demo
+  // lists hassio in its own components, hence the guard against duplicates.
+  if (!hass.config.components.includes("hassio")) {
+    hass.config.components.push("hassio");
+  }
+
   hass.mockWS("supervisor/api", (msg) => {
     if (msg.endpoint === "/supervisor/info") {
       const data: HassioSupervisorInfo = {
-        version: "2021.10.dev0805",
-        version_latest: "2021.10.dev0806",
-        update_available: true,
-        channel: "dev",
+        version: "2026.07.1",
+        version_latest: "2026.07.1",
+        update_available: false,
+        channel: "stable",
         arch: "aarch64",
         supported: true,
         healthy: true,
         ip_address: "172.30.32.2",
         wait_boot: 5,
-        timezone: "America/Los_Angeles",
+        timezone: "Europe/Amsterdam",
         logging: "info",
         debug: false,
         debug_block: false,
         diagnostics: true,
-        addons: [
-          {
-            name: "Visual Studio Code",
-            slug: "a0d7b954_vscode",
-            description:
-              "Fully featured VSCode experience, to edit your HA config in the browser, including auto-completion!",
-            state: "started",
-            version: "3.6.2",
-            version_latest: "3.6.2",
-            update_available: false,
-            repository: "a0d7b954",
-            icon: false,
-            logo: true,
-          },
-          {
-            name: "Z-Wave JS",
-            slug: "core_zwave_js",
-            description:
-              "Control a ZWave network with Home Assistant Z-Wave JS",
-            state: "started",
-            version: "0.1.45",
-            version_latest: "0.1.45",
-            update_available: false,
-            repository: "core",
-            icon: true,
-            logo: true,
-          },
-        ] as any,
+        addons: DEMO_ADDONS as any,
         addons_repositories: [
-          "https://github.com/hassio-addons/repository",
+          "https://github.com/music-assistant/home-assistant-addon",
+          "https://github.com/esphome/home-assistant-addon",
         ] as any,
       };
       return data;
     }
+
+    if (msg.endpoint === "/addons") {
+      const data: HassioAddonsInfo = {
+        addons: DEMO_ADDONS,
+        repositories: [
+          {
+            slug: "d5369777",
+            name: "Music Assistant",
+            source: "https://github.com/music-assistant/home-assistant-addon",
+            url: "https://github.com/music-assistant/home-assistant-addon",
+            maintainer: "Music Assistant",
+          },
+          {
+            slug: "5c53de3b",
+            name: "ESPHome",
+            source: "https://github.com/esphome/home-assistant-addon",
+            url: "https://esphome.io/",
+            maintainer: "ESPHome",
+          },
+        ],
+      };
+      return data;
+    }
+
+    const addonMatch = msg.endpoint.match(/^\/addons\/([^/]+)\/(info|stats)$/);
+    if (addonMatch) {
+      const addon = DEMO_ADDONS.find((item) => item.slug === addonMatch[1]);
+      if (!addon) {
+        return Promise.reject(`Addon ${addonMatch[1]} not found`);
+      }
+      return addonMatch[2] === "stats" ? ADDON_STATS : addonDetails(addon);
+    }
+
+    if (msg.endpoint === "/info") {
+      const data: HassioInfo = {
+        arch: "aarch64",
+        channel: "stable",
+        docker: "27.5.1",
+        features: ["reboot", "shutdown", "network", "hostname", "os_agent"],
+        hassos: null,
+        homeassistant: "2026.7.2",
+        hostname: "homeassistant",
+        logging: "info",
+        machine: "green",
+        state: "running",
+        operating_system: "Home Assistant OS 18.2",
+        supervisor: "2026.07.1",
+        supported: true,
+        supported_arch: ["aarch64", "armv7", "armhf"],
+        timezone: "Europe/Amsterdam",
+      };
+      return data;
+    }
+
+    if (msg.endpoint === "/host/info") {
+      const data: HassioHostInfo = {
+        agent_version: "1.8.0",
+        chassis: "embedded",
+        cpe: "cpe:2.3:o:home-assistant:haos:18.2:*:production:*:*:*:aarch64:*",
+        deployment: "production",
+        disk_life_time: 6,
+        disk_free: 22.3,
+        disk_total: 31.2,
+        disk_used: 8.9,
+        features: ["reboot", "shutdown", "network", "hostname", "os_agent"],
+        hostname: "homeassistant",
+        kernel: "6.12.48-haos",
+        operating_system: "Home Assistant OS 18.2",
+        boot_timestamp: 1751932800000000,
+        startup_time: 12.4,
+      };
+      return data;
+    }
+
+    if (msg.endpoint === "/os/info") {
+      const data: HassioHassOSInfo = {
+        board: "green",
+        boot: "A",
+        update_available: false,
+        version: "18.2",
+        version_latest: "18.2",
+        data_disk: "Home Assistant Green (mmcblk0)",
+      };
+      return data;
+    }
+
+    if (msg.endpoint === "/host/disks/default/usage") {
+      const data: HostDisksUsage = {
+        id: "root",
+        label: "Total",
+        total_bytes: 31200000000,
+        used_bytes: 8900000000,
+        children: [
+          { id: "media", label: "Media", used_bytes: 4100000000 },
+          { id: "addons", label: "Apps", used_bytes: 2600000000 },
+          { id: "backup", label: "Backups", used_bytes: 1400000000 },
+          { id: "share", label: "Share", used_bytes: 800000000 },
+        ],
+      };
+      return data;
+    }
+
+    if (msg.endpoint === "/mounts") {
+      const data: SupervisorMounts = {
+        default_backup_mount: null,
+        mounts: [],
+      };
+      return data;
+    }
+
+    if (msg.endpoint === "/network/info") {
+      const data: NetworkInfo = {
+        interfaces: [
+          {
+            primary: true,
+            privacy: false,
+            interface: "eth0",
+            enabled: true,
+            type: "ethernet",
+            ipv4: {
+              address: ["192.168.1.10/24"],
+              gateway: "192.168.1.1",
+              method: "auto",
+              nameservers: ["192.168.1.1"],
+            },
+            wifi: null,
+          },
+        ],
+        docker: {
+          address: "172.30.32.0/23",
+          dns: "172.30.32.3",
+          gateway: "172.30.32.1",
+          interface: "hassio",
+        },
+      };
+      return data;
+    }
+
+    if (msg.endpoint === "/store/reload") {
+      return null;
+    }
+
     return Promise.reject(`${msg.method} ${msg.endpoint} is not implemented`);
   });
+
+  hass.mockWS("hassio/update/config/info", (): SupervisorUpdateConfig => ({
+    add_on_backup_before_update: true,
+    add_on_backup_retain_copies: 1,
+    core_backup_before_update: true,
+  }));
+
+  hass.mockAPI(/^hassio\/host\/logs\/boots$/, () => ({
+    data: { boots: { "0": "2026-07-26T09:00:00.000000+00:00" } },
+  }));
+
+  hass.mockAPI(/^hassio\/addons\/[^/]+\/logs/, (_hass, _method, path) => {
+    const slug = path.split("/")[2];
+    // X-First-Cursor tells error-log-card there is nothing older to page to.
+    return new Response(LOGS[slug], {
+      headers: { "X-First-Cursor": "demo" },
+    });
+  });
 };

demo/src/stubs/lovelace.ts

@@ -2,12 +2,13 @@ import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import type { LovelaceInfo } from "../../../src/data/lovelace/resource";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import {
+  selectedDemo,
   selectedDemoConfig,
-  selectedDemoConfigIndex,
   setDemoConfig,
 } from "../configs/demo-configs";
 import "../custom-cards/cast-demo-row";
 import "../custom-cards/ha-demo-card";
+import "../custom-cards/ha-demo-next-card";
 import { mapEntities } from "./entities";
 
 export const mockLovelace = (
@@ -45,11 +46,11 @@ customElements.whenDefined("hui-root").then(() => {
   HUIRoot.prototype.firstUpdated = function (changedProperties) {
     oldFirstUpdated.call(this, changedProperties);
     this.addEventListener("set-demo-config", async (ev) => {
-      const index = (ev as CustomEvent).detail.index;
+      const demo = (ev as CustomEvent).detail.demo;
       try {
-        await setDemoConfig(this.hass, this.lovelace!, index);
+        await setDemoConfig(this.hass, this.lovelace!, demo);
       } catch (_err: any) {
-        setDemoConfig(this.hass, this.lovelace!, selectedDemoConfigIndex);
+        setDemoConfig(this.hass, this.lovelace!, selectedDemo);
         alert("Failed to switch config :-(");
       }
     });

demo/src/stubs/usage_prediction.ts

@@ -0,0 +1,19 @@
+import type { CommonControlsResult } from "../../../src/data/usage_prediction";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockUsagePrediction = (hass: MockHomeAssistant) => {
+  // Entities that don't exist in the currently loaded demo config are
+  // filtered out by the common-controls section strategy.
+  hass.mockWS("usage_prediction/common_control", (): CommonControlsResult => ({
+    entities: [
+      "light.living_room_floor_lamp",
+      "climate.living_room",
+      "cover.living_room_blinds",
+      "media_player.living_room_speaker",
+      "light.kitchen_spotlights",
+      "switch.coffee_machine",
+      "light.bedside_lamp",
+      "alarm_control_panel.home_alarm",
+    ],
+  }));
+};

gallery/src/common/validate-card-config.ts

@@ -0,0 +1,7 @@
+import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
+import { getCardElementClass } from "../../../src/panels/lovelace/create-element/create-card-element";
+
+export const validateCardConfig = async (config: LovelaceCardConfig) => {
+  const cardClass = await getCardElementClass(config.type);
+  new cardClass().setConfig(config);
+};

gallery/src/components/demo-card.ts

@@ -1,15 +1,21 @@
-import { load } from "js-yaml";
+import { dump } from "js-yaml";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import "../../../src/components/ha-alert";
+import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
 import "../../../src/panels/lovelace/cards/hui-card";
 import type { HuiCard } from "../../../src/panels/lovelace/cards/hui-card";
 import type { HomeAssistant } from "../../../src/types";
+import { validateCardConfig } from "../common/validate-card-config";
 
-export interface DemoCardConfig {
+export interface DemoCardConfig<
+  T extends LovelaceCardConfig = LovelaceCardConfig,
+> {
   heading: string;
-  config: string;
+  config: T;
+  expectConfigError?: boolean;
 }
 
 @customElement("demo-card")
@@ -23,12 +29,29 @@ class DemoCard extends LitElement {
 
   @state() private _size?: number;
 
+  @state() private _configError?: string;
+
   @query("hui-card", false) private _card?: HuiCard;
 
-  private _config = memoizeOne((config: string) => {
-    const c = (load(config) as any)[0];
-    return c;
-  });
+  private _yamlConfig = memoizeOne((config: LovelaceCardConfig) =>
+    dump([config]).trim()
+  );
+
+  protected async firstUpdated() {
+    try {
+      await validateCardConfig(this.config.config);
+    } catch (err) {
+      if (this.config.expectConfigError) {
+        return;
+      }
+      this._configError = err instanceof Error ? err.message : String(err);
+      return;
+    }
+
+    if (this.config.expectConfigError) {
+      this._configError = `Expected config error for ${this.config.heading}`;
+    }
+  }
 
   render() {
     return html`
@@ -40,15 +63,20 @@ class DemoCard extends LitElement {
             : ""
         }
       </h2>
+      ${
+        this._configError
+          ? html`<ha-alert alert-type="error">${this._configError}</ha-alert>`
+          : nothing
+      }
       <div class="root">
         <hui-card
-          .config=${this._config(this.config.config)}
+          .config=${this.config.config}
           .hass=${this.hass}
           @card-updated=${this._cardUpdated}
         ></hui-card>
         ${
           this.showConfig
-            ? html`<pre>${this.config.config.trim()}</pre>`
+            ? html`<pre>${this._yamlConfig(this.config.config)}</pre>`
             : nothing
         }
       </div>
@@ -81,6 +109,9 @@ class DemoCard extends LitElement {
       font-size: 0.5em;
       color: var(--primary-text-color);
     }
+    ha-alert {
+      margin-bottom: 16px;
+    }
     hui-card {
       max-width: 400px;
       width: 100vw;

gallery/src/pages/components/ha-form.ts

@@ -2,7 +2,10 @@
 import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import {
+  mockAreaRegistry,
+  type DemoArea,
+} from "../../../../demo/src/stubs/area_registry";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
@@ -10,7 +13,6 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -136,45 +138,20 @@ const DEVICES: DeviceRegistryEntry[] = [
   },
 ];
 
-const AREAS: AreaRegistryEntry[] = [
+const AREAS: DemoArea[] = [
   {
     area_id: "backyard",
-    floor_id: null,
     name: "Backyard",
-    icon: null,
-    picture: null,
-    aliases: [],
-    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
-    created_at: 0,
-    modified_at: 0,
   },
   {
     area_id: "bedroom",
-    floor_id: null,
     name: "Bedroom",
     icon: "mdi:bed",
-    picture: null,
-    aliases: [],
-    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
-    created_at: 0,
-    modified_at: 0,
   },
   {
     area_id: "livingroom",
-    floor_id: null,
     name: "Livingroom",
     icon: "mdi:sofa",
-    picture: null,
-    aliases: [],
-    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
-    created_at: 0,
-    modified_at: 0,
   },
 ];
 

gallery/src/pages/components/ha-progress-button.ts

@@ -23,7 +23,7 @@ export class DemoHaProgressButton extends LitElement {
                 <ha-progress-button @click=${this._clickedFail}>
                   Fail
                 </ha-progress-button>
-                <ha-progress-button size="small" @click=${this._clickedSuccess}>
+                <ha-progress-button size="s" @click=${this._clickedSuccess}>
                   small
                 </ha-progress-button>
                 <ha-progress-button

gallery/src/pages/components/ha-selector-replaced-device.markdown

@@ -0,0 +1,23 @@
+---
+title: Replaced device selectors
+subtitle: How device and target selectors surface devices that were split into separate devices
+---
+
+A device that used to belong to multiple config entries is split into one
+device per config entry. The original composite device is removed from the
+registry, so existing references to it (targets in automations, device
+selectors) point at a device that no longer exists.
+
+When a selector holds such a reference, it shows a **replaced** state instead of
+a plain "not found", and offers to point the reference at the replacement
+device(s). The candidate replacements are filtered through the selector's own
+filters, so in practice usually a single device matches:
+
+- **Target selector** — the replaced device row offers **Replace**, which adds
+  every replacement device that matches the target filters and removes the old
+  reference.
+- **Device selector** — when exactly one replacement matches, **Replace** swaps
+  to it in one click; when several match, a dialog lets you pick one.
+
+All samples below reference the removed composite device `old_composite`, which
+was split into a light device and a switch device.

gallery/src/pages/components/ha-selector-replaced-device.ts

@@ -0,0 +1,318 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-selector/ha-selector";
+import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-target-picker";
+import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
+import type { EntityRegistryDisplayEntry } from "../../../../src/data/entity/entity_registry";
+import type { Selector } from "../../../../src/data/selector";
+import {
+  showDialog,
+  type ShowDialogParams,
+} from "../../../../src/dialogs/make-dialog-manager";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
+
+// The composite device "old_composite" is intentionally NOT in the registry:
+// it was split into "device_light" and "device_switch". References to the old
+// id (targets, device selectors) should surface a "replaced" state.
+const DEVICES: DeviceRegistryEntry[] = [
+  {
+    area_id: "bedroom",
+    configuration_url: null,
+    config_entries: ["config_entry_light"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_light",
+    identifiers: [["demo", "light"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    model_id: null,
+    name_by_user: null,
+    name: "Living room lamp",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+  },
+  {
+    area_id: "backyard",
+    configuration_url: null,
+    config_entries: ["config_entry_switch"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_switch",
+    identifiers: [["demo", "switch"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    model_id: null,
+    name_by_user: null,
+    name: "Garden socket",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+  },
+];
+
+const ENTITIES = [
+  {
+    entity_id: "light.living_room_lamp",
+    state: "on",
+    attributes: { friendly_name: "Living room lamp" },
+  },
+  {
+    entity_id: "switch.garden_socket",
+    state: "off",
+    attributes: { friendly_name: "Garden socket" },
+  },
+];
+
+// Registry display entries link the demo entities to the split devices so the
+// pickers can filter split candidates by domain.
+const ENTITY_REGISTRY: Record<string, EntityRegistryDisplayEntry> = {
+  "light.living_room_lamp": {
+    entity_id: "light.living_room_lamp",
+    name: "Living room lamp",
+    device_id: "device_light",
+    area_id: "bedroom",
+    platform: "demo",
+    labels: [],
+  },
+  "switch.garden_socket": {
+    entity_id: "switch.garden_socket",
+    name: "Garden socket",
+    device_id: "device_switch",
+    area_id: "backyard",
+    platform: "demo",
+    labels: [],
+  },
+};
+
+const AREAS: AreaRegistryEntry[] = [
+  {
+    area_id: "backyard",
+    floor_id: null,
+    name: "Backyard",
+    icon: null,
+    picture: null,
+    aliases: [],
+    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
+    created_at: 0,
+    modified_at: 0,
+  },
+  {
+    area_id: "bedroom",
+    floor_id: null,
+    name: "Bedroom",
+    icon: "mdi:bed",
+    picture: null,
+    aliases: [],
+    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
+    created_at: 0,
+    modified_at: 0,
+  },
+];
+
+// Maps the removed composite device to the devices that replaced it.
+const COMPOSITE_SPLITS = {
+  old_composite: {
+    split_ids: ["device_light", "device_switch"],
+    primary_id: "device_light",
+  },
+};
+
+interface Sample {
+  name: string;
+  description: string;
+  selector: Selector;
+  value: unknown;
+  // Render ha-target-picker directly in compact (chip) mode instead of the
+  // ha-selector, which does not expose the compact option.
+  compact?: boolean;
+}
+
+const SAMPLES: Sample[] = [
+  {
+    name: "Target",
+    description:
+      "Migrate adds every replacement device that matches the target filters (here both).",
+    selector: { target: {} },
+    value: { device_id: ["old_composite"] },
+  },
+  {
+    name: "Target (compact)",
+    description:
+      "In compact mode the replaced reference is shown as a warning chip.",
+    selector: { target: {} },
+    value: { device_id: ["old_composite"] },
+    compact: true,
+  },
+  {
+    name: "Device (unfiltered, multiple matches)",
+    description:
+      "Both replacement devices qualify, so Replace opens a dialog to pick one.",
+    selector: { device: {} },
+    value: "old_composite",
+  },
+  {
+    name: "Device (filtered to lights, single match)",
+    description:
+      "Only the light device passes the filter, so Replace swaps to it in one click.",
+    selector: { device: { entity: [{ domain: "light" }] } },
+    value: "old_composite",
+  },
+  {
+    name: "Device (multiple)",
+    description: "Each slot resolves independently to a matching replacement.",
+    selector: { device: { multiple: true } },
+    value: ["old_composite"],
+  },
+];
+
+@customElement("demo-components-ha-selector-replaced-device")
+class DemoHaSelectorReplacedDevice
+  extends LitElement
+  implements ProvideHassElement
+{
+  @state() public hass!: HomeAssistant;
+
+  private _values = SAMPLES.map((sample) => sample.value);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    hass.addEntities(ENTITIES);
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass, DEVICES);
+    mockConfigEntries(hass);
+    mockHassioSupervisor(hass);
+    // Provide the demo areas and link the demo entities to the split devices.
+    // Set them directly via updateHass (typed against the real registry types)
+    // instead of the area stub, whose demo-specific type differs.
+    const areas: Record<string, AreaRegistryEntry> = {};
+    AREAS.forEach((area) => {
+      areas[area.area_id] = area;
+    });
+    hass.updateHass({ areas, entities: ENTITY_REGISTRY });
+    hass.mockWS(
+      "config/device_registry/list_composite_splits",
+      () => COMPOSITE_SPLITS
+    );
+    hass.mockWS("extract_from_target", () => ({
+      referenced_entities: [],
+      referenced_devices: [],
+      referenced_areas: [],
+    }));
+    hass.mockWS("auth/sign_path", (params) => params);
+  }
+
+  public provideHass(el) {
+    el.hass = this.hass;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("show-dialog", this._dialogManager);
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("show-dialog", this._dialogManager);
+  }
+
+  private _dialogManager = (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
+    const { dialogTag, dialogImport, dialogParams, addHistory, parentElement } =
+      e.detail;
+    showDialog(
+      this,
+      dialogTag,
+      dialogParams,
+      dialogImport,
+      parentElement,
+      addHistory
+    );
+  };
+
+  protected render(): TemplateResult {
+    return html`
+      ${SAMPLES.map(
+        (sample, idx) => html`
+          <demo-black-white-row .title=${sample.name}>
+            ${["light", "dark"].map(
+              (slot) => html`
+                <ha-settings-row narrow slot=${slot}>
+                  <span slot="heading">${sample.name}</span>
+                  <span slot="description">${sample.description}</span>
+                  ${
+                    sample.compact
+                      ? html`<ha-target-picker
+                          compact
+                          .hass=${this.hass}
+                          .value=${this._values[idx] as HassServiceTarget}
+                          .sampleIdx=${idx}
+                          @value-changed=${this._handleValueChanged}
+                        ></ha-target-picker>`
+                      : html`<ha-selector
+                          .hass=${this.hass}
+                          .selector=${sample.selector}
+                          .value=${this._values[idx]}
+                          .sampleIdx=${idx}
+                          @value-changed=${this._handleValueChanged}
+                        ></ha-selector>`
+                  }
+                </ha-settings-row>
+              `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+
+  private _handleValueChanged(ev) {
+    const idx = ev.target.sampleIdx;
+    this._values[idx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
+  static styles = css`
+    ha-settings-row {
+      --settings-row-content-width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-selector-replaced-device": DemoHaSelectorReplacedDevice;
+  }
+}

gallery/src/pages/components/ha-selector.ts

@@ -1,21 +1,25 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import {
+  mockAreaRegistry,
+  type DemoArea,
+} from "../../../../demo/src/stubs/area_registry";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
+import {
+  mockFloorRegistry,
+  type DemoFloor,
+} from "../../../../demo/src/stubs/floor_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
 import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
-import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
-import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
 import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
 import {
   showDialog,
@@ -147,75 +151,43 @@ const DEVICES: DeviceRegistryEntry[] = [
   },
 ];
 
-const AREAS: AreaRegistryEntry[] = [
+const AREAS: DemoArea[] = [
   {
     area_id: "backyard",
     floor_id: "ground",
     name: "Backyard",
-    icon: null,
-    picture: null,
-    aliases: [],
-    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
-    created_at: 0,
-    modified_at: 0,
   },
   {
     area_id: "bedroom",
     floor_id: "first",
     name: "Bedroom",
     icon: "mdi:bed",
-    picture: null,
-    aliases: [],
-    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
-    created_at: 0,
-    modified_at: 0,
   },
   {
     area_id: "livingroom",
     floor_id: "ground",
     name: "Livingroom",
     icon: "mdi:sofa",
-    picture: null,
-    aliases: [],
-    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
-    created_at: 0,
-    modified_at: 0,
   },
 ];
 
-const FLOORS: FloorRegistryEntry[] = [
+const FLOORS: DemoFloor[] = [
   {
     floor_id: "ground",
     name: "Ground floor",
     level: 0,
-    icon: null,
-    aliases: [],
-    created_at: 0,
-    modified_at: 0,
   },
   {
     floor_id: "first",
     name: "First floor",
     level: 1,
     icon: "mdi:numeric-1",
-    aliases: [],
-    created_at: 0,
-    modified_at: 0,
   },
   {
     floor_id: "second",
     name: "Second floor",
     level: 2,
     icon: "mdi:numeric-2",
-    aliases: [],
-    created_at: 0,
-    modified_at: 0,
   },
 ];
 

gallery/src/pages/lovelace/alarm-panel-card.ts

@@ -1,6 +1,8 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { AlarmPanelCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
@@ -40,52 +42,50 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Basic Example",
-    config: `
-- type: alarm-panel
-  entity: alarm_control_panel.alarm
-    `,
+    config: {
+      type: "alarm-panel",
+      entity: "alarm_control_panel.alarm",
+    },
   },
   {
     heading: "With Title",
-    config: `
-- type: alarm-panel
-  entity: alarm_control_panel.alarm_armed
-  name: My Alarm
-    `,
+    config: {
+      type: "alarm-panel",
+      entity: "alarm_control_panel.alarm_armed",
+      name: "My Alarm",
+    },
   },
   {
     heading: "Code Example",
-    config: `
-- type: alarm-panel
-  entity: alarm_control_panel.alarm_code
-    `,
+    config: {
+      type: "alarm-panel",
+      entity: "alarm_control_panel.alarm_code",
+    },
   },
   {
     heading: "Using only Arm_Home State",
-    config: `
-- type: alarm-panel
-  entity: alarm_control_panel.alarm
-  states:
-    - arm_home
-    `,
+    config: {
+      type: "alarm-panel",
+      entity: "alarm_control_panel.alarm",
+      states: ["arm_home"],
+    },
   },
   {
     heading: "Unavailable",
-    config: `
-- type: alarm-panel
-  entity: alarm_control_panel.unavailable
-  states:
-    - arm_home
-    `,
+    config: {
+      type: "alarm-panel",
+      entity: "alarm_control_panel.unavailable",
+      states: ["arm_home"],
+    },
   },
   {
     heading: "Invalid Entity",
-    config: `
-- type: alarm-panel
-  entity: alarm_control_panel.alarm1
-    `,
+    config: {
+      type: "alarm-panel",
+      entity: "alarm_control_panel.alarm1",
+    },
   },
-];
+] satisfies DemoCardConfig<AlarmPanelCardConfig>[];
 
 @customElement("demo-lovelace-alarm-panel-card")
 class DemoAlarmPanelEntity extends LitElement {

gallery/src/pages/lovelace/area-card.ts

@@ -1,6 +1,8 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { AreaCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
@@ -80,33 +82,33 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Bedroom",
-    config: `
-- type: area
-  area: bedroom
-    `,
+    config: {
+      type: "area",
+      area: "bedroom",
+    },
   },
   {
     heading: "Living Room",
-    config: `
-- type: area
-  area: living_room
-    `,
+    config: {
+      type: "area",
+      area: "living_room",
+    },
   },
   {
     heading: "Office",
-    config: `
-- type: area
-  area: office
-    `,
+    config: {
+      type: "area",
+      area: "office",
+    },
   },
   {
     heading: "Kitchen",
-    config: `
-- type: area
-  area: kitchen
-    `,
+    config: {
+      type: "area",
+      area: "kitchen",
+    },
   },
-];
+] satisfies DemoCardConfig<AreaCardConfig>[];
 
 @customElement("demo-lovelace-area-card")
 class DemoArea extends LitElement {

gallery/src/pages/lovelace/conditional-card.ts

@@ -1,7 +1,12 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type {
+  ConditionalCardConfig,
+  EntitiesCardConfig,
+} from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -39,35 +44,37 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Controller",
-    config: `
-- type: entities
-  entities:
-    - light.controller_1
-    - light.controller_2
-    - type: divider
-    - light.floor
-    - light.kitchen
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        "light.controller_1",
+        "light.controller_2",
+        { type: "divider" },
+        "light.floor",
+        "light.kitchen",
+      ],
+    },
   },
   {
     heading: "Demo",
-    config: `
-- type: conditional
-  conditions:
-    - entity: light.controller_1
-      state: "on"
-    - entity: light.controller_2
-      state_not: "off"
-  card:
-    type: entities
-    entities:
-      - light.controller_1
-      - light.controller_2
-      - light.floor
-      - light.kitchen
-    `,
+    config: {
+      type: "conditional",
+      conditions: [
+        { entity: "light.controller_1", state: "on" },
+        { entity: "light.controller_2", state_not: "off" },
+      ],
+      card: {
+        type: "entities",
+        entities: [
+          "light.controller_1",
+          "light.controller_2",
+          "light.floor",
+          "light.kitchen",
+        ],
+      },
+    },
   },
-];
+] satisfies DemoCardConfig<EntitiesCardConfig | ConditionalCardConfig>[];
 
 @customElement("demo-lovelace-conditional-card")
 class DemoConditional extends LitElement {

gallery/src/pages/lovelace/entities-card.ts

@@ -1,7 +1,13 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type {
+  EntitiesCardConfig,
+  EntitiesCardEntityConfig,
+} from "../../../../src/panels/lovelace/cards/types";
+import type { CallServiceConfig } from "../../../../src/panels/lovelace/entity-rows/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -254,169 +260,194 @@ const ENTITIES = [
   },
 ];
 
+type GalleryEntitiesCardConfig = Omit<EntitiesCardConfig, "entities"> & {
+  type: EntitiesCardConfig["type"];
+  entities: (
+    | EntitiesCardConfig["entities"][number]
+    | Pick<EntitiesCardEntityConfig, "entity" | "secondary_info">
+    | Omit<CallServiceConfig, "entity">
+  )[];
+};
+
 const CONFIGS = [
   {
     heading: "Basic",
-    config: `
-- type: entities
-  entities:
-    - scene.romantic_lights
-    - device_tracker.demo_paulus
-    - cover.kitchen_window
-    - group.kitchen
-    - lock.kitchen_door
-    - light.bed_light
-    - light.non_existing
-    - climate.ecobee
-    - input_number.number
-    - sensor.humidity
-    - text.message
-    - event.doorbell
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        "scene.romantic_lights",
+        "device_tracker.demo_paulus",
+        "cover.kitchen_window",
+        "group.kitchen",
+        "lock.kitchen_door",
+        "light.bed_light",
+        "light.non_existing",
+        "climate.ecobee",
+        "input_number.number",
+        "sensor.humidity",
+        "text.message",
+        "event.doorbell",
+      ],
+    },
   },
   {
     heading: "With enabled state color",
-    config: `
-- type: entities
-  state_color: true
-  entities:
-    - scene.romantic_lights
-    - device_tracker.demo_paulus
-    - cover.kitchen_window
-    - group.kitchen
-    - lock.kitchen_door
-    - light.bed_light
-    - light.non_existing
-    - climate.ecobee
-    - input_number.number
-    - sensor.humidity
-    - text.message
-    `,
+    config: {
+      type: "entities",
+      state_color: true,
+      entities: [
+        "scene.romantic_lights",
+        "device_tracker.demo_paulus",
+        "cover.kitchen_window",
+        "group.kitchen",
+        "lock.kitchen_door",
+        "light.bed_light",
+        "light.non_existing",
+        "climate.ecobee",
+        "input_number.number",
+        "sensor.humidity",
+        "text.message",
+      ],
+    },
   },
   {
     heading: "Helpers",
-    config: `
-- type: entities
-  title: Helpers
-  entities:
-    - entity: input_boolean.toggle
-    - entity: input_datetime.date_and_time
-    - entity: input_number.number
-    - entity: input_select.dropdown
-    - entity: input_text.text
-    - entity: timer.timer
-    - entity: counter.counter
-    `,
+    config: {
+      type: "entities",
+      title: "Helpers",
+      entities: [
+        { entity: "input_boolean.toggle" },
+        { entity: "input_datetime.date_and_time" },
+        { entity: "input_number.number" },
+        { entity: "input_select.dropdown" },
+        { entity: "input_text.text" },
+        { entity: "timer.timer" },
+        { entity: "counter.counter" },
+      ],
+    },
   },
   {
     heading: "With title, toggle-able",
-    config: `
-- type: entities
-  entities:
-    - scene.romantic_lights
-    - device_tracker.demo_paulus
-    - cover.kitchen_window
-    - group.kitchen
-    - lock.kitchen_door
-    - light.bed_light
-    - climate.ecobee
-    - input_number.number
-  title: Random group
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        "scene.romantic_lights",
+        "device_tracker.demo_paulus",
+        "cover.kitchen_window",
+        "group.kitchen",
+        "lock.kitchen_door",
+        "light.bed_light",
+        "climate.ecobee",
+        "input_number.number",
+      ],
+      title: "Random group",
+    },
   },
   {
     heading: "With title, toggle = false",
-    config: `
-- type: entities
-  entities:
-    - scene.romantic_lights
-    - device_tracker.demo_paulus
-    - cover.kitchen_window
-    - group.kitchen
-    - lock.kitchen_door
-    - light.bed_light
-    - climate.ecobee
-    - input_number.number
-  title: Random group
-  show_header_toggle: false
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        "scene.romantic_lights",
+        "device_tracker.demo_paulus",
+        "cover.kitchen_window",
+        "group.kitchen",
+        "lock.kitchen_door",
+        "light.bed_light",
+        "climate.ecobee",
+        "input_number.number",
+      ],
+      title: "Random group",
+      show_header_toggle: false,
+    },
   },
   {
     heading: "With title, can't toggle",
-    config: `
-- type: entities
-  entities:
-    - device_tracker.demo_paulus
-  title: Random group
-    `,
+    config: {
+      type: "entities",
+      entities: ["device_tracker.demo_paulus"],
+      title: "Random group",
+    },
   },
   {
     heading: "Unavailable",
-    config: `
-- type: entities
-  entities:
-    - scene.unavailable
-    - device_tracker.unavailable
-    - cover.unavailable
-    - lock.unavailable
-    - light.unavailable
-    - climate.unavailable
-    - input_number.unavailable
-    - input_select.unavailable
-    - text.unavailable
-    - event.unavailable
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        "scene.unavailable",
+        "device_tracker.unavailable",
+        "cover.unavailable",
+        "lock.unavailable",
+        "light.unavailable",
+        "climate.unavailable",
+        "input_number.unavailable",
+        "input_select.unavailable",
+        "text.unavailable",
+        "event.unavailable",
+      ],
+    },
   },
   {
     heading: "Custom name, secondary info, custom icon",
-    config: `
-- type: entities
-  entities:
-    - entity: scene.romantic_lights
-      name: ¯\\_(ツ)_/¯
-    - entity: device_tracker.demo_paulus
-      secondary_info: entity-id
-    - entity: cover.kitchen_window
-      secondary_info: last-changed
-    - entity: group.kitchen
-      icon: mdi:home-assistant
-    - lock.kitchen_door
-    - entity: light.bed_light
-      icon: mdi:alarm-light
-      name: Bed Light Custom Icon
-    - climate.ecobee
-    - input_number.number
-  title: Random group
-  show_header_toggle: false
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        { entity: "scene.romantic_lights", name: "¯\\_(ツ)_/¯" },
+        {
+          entity: "device_tracker.demo_paulus",
+          secondary_info: "entity-id",
+        },
+        {
+          entity: "cover.kitchen_window",
+          secondary_info: "last-changed",
+        },
+        { entity: "group.kitchen", icon: "mdi:home-assistant" },
+        "lock.kitchen_door",
+        {
+          entity: "light.bed_light",
+          icon: "mdi:alarm-light",
+          name: "Bed Light Custom Icon",
+        },
+        "climate.ecobee",
+        "input_number.number",
+      ],
+      title: "Random group",
+      show_header_toggle: false,
+    },
   },
   {
     heading: "Special rows",
-    config: `
-- type: entities
-  entities:
-    - type: perform-action
-      icon: mdi:power
-      name: Bed light
-      action_name: Toggle light
-      action: light.toggle
-      data:
-        entity_id: light.bed_light
-    - type: section
-      label: Links
-    - type: weblink
-      url: http://google.com/
-      icon: mdi:google
-      name: Google
-    - type: divider
-    - type: divider
-      style:
-        height: 30px
-        margin: 4px 0
-        background: center / contain url("/images/divider.png") no-repeat
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        {
+          type: "perform-action",
+          icon: "mdi:power",
+          name: "Bed light",
+          action_name: "Toggle light",
+          action: "light.toggle",
+          data: { entity_id: "light.bed_light" },
+        },
+        { type: "section", label: "Links" },
+        {
+          type: "weblink",
+          url: "http://google.com/",
+          icon: "mdi:google",
+          name: "Google",
+        },
+        { type: "divider" },
+        {
+          type: "divider",
+          style: {
+            height: "30px",
+            margin: "4px 0",
+            background: 'center / contain url("/images/divider.png") no-repeat',
+          },
+        },
+      ],
+    },
   },
-];
+] satisfies DemoCardConfig<GalleryEntitiesCardConfig>[];
 
 @customElement("demo-lovelace-entities-card")
 class DemoEntities extends LitElement {

gallery/src/pages/lovelace/entity-button-card.ts

@@ -1,6 +1,8 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { ButtonCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
@@ -18,60 +20,64 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Basic example",
-    config: `
-- type: button
-  entity: light.bed_light
-    `,
+    config: {
+      type: "button",
+      entity: "light.bed_light",
+    },
   },
   {
     heading: "With Name (defined in card)",
-    config: `
-- type: button
-  name: Custom Name
-  entity: light.bed_light
-    `,
+    config: {
+      type: "button",
+      name: "Custom Name",
+      entity: "light.bed_light",
+    },
   },
   {
     heading: "With Icon",
-    config: `
-- type: button
-  entity: light.bed_light
-  icon: mdi:tools
-    `,
+    config: {
+      type: "button",
+      entity: "light.bed_light",
+      icon: "mdi:tools",
+    },
   },
   {
     heading: "With State",
-    config: `
-- type: button
-  entity: light.bed_light
-  show_state: true
-    `,
+    config: {
+      type: "button",
+      entity: "light.bed_light",
+      show_state: true,
+    },
   },
   {
     heading: "Custom Tap Action (toggle)",
-    config: `
-- type: button
-  entity: light.bed_light
-  tap_action:
-    action: toggle
-    `,
+    config: {
+      type: "button",
+      entity: "light.bed_light",
+      tap_action: {
+        action: "toggle",
+      },
+    },
   },
   {
     heading: "Running Service",
-    config: `
-- type: button
-  entity: light.bed_light
-  service: light.toggle
-    `,
+    config: {
+      type: "button",
+      entity: "light.bed_light",
+      tap_action: {
+        action: "perform-action",
+        perform_action: "light.toggle",
+      },
+    },
   },
   {
     heading: "Invalid Entity",
-    config: `
-- type: button
-  entity: sensor.invalid_entity
-    `,
+    config: {
+      type: "button",
+      entity: "sensor.invalid_entity",
+    },
   },
-];
+] satisfies DemoCardConfig<ButtonCardConfig>[];
 
 @customElement("demo-lovelace-entity-button-card")
 class DemoButtonEntity extends LitElement {

gallery/src/pages/lovelace/entity-filter-card.ts

@@ -1,7 +1,12 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type {
+  EntitiesCardConfig,
+  EntityFilterCardConfig,
+} from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -114,184 +119,198 @@ const ENTITIES = [
   },
 ];
 
-const CONFIGS = [
+type StateFilterEntityFilterCardConfig = Pick<
+  EntityFilterCardConfig,
+  "type" | "entities" | "card" | "show_empty"
+> & {
+  conditions?: never;
+  state_filter: NonNullable<EntityFilterCardConfig["state_filter"]>;
+};
+
+const VALID_CONFIGS = [
   {
     heading: "Unfiltered entities",
-    config: `
-- type: entities
-  entities:
-    - device_tracker.demo_anne_therese
-    - device_tracker.demo_home_boy
-    - device_tracker.demo_paulus
-    - light.bed_light
-    - light.ceiling_lights
-    - light.kitchen_lights
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        "device_tracker.demo_anne_therese",
+        "device_tracker.demo_home_boy",
+        "device_tracker.demo_paulus",
+        "light.bed_light",
+        "light.ceiling_lights",
+        "light.kitchen_lights",
+      ],
+    },
   },
   {
     heading: "On and home entities",
-    config: `
-- type: entity-filter
-  entities:
-    - device_tracker.demo_anne_therese
-    - device_tracker.demo_home_boy
-    - device_tracker.demo_paulus
-    - light.bed_light
-    - light.ceiling_lights
-    - light.kitchen_lights
-  conditions:
-    - condition: state
-      state:
-        - "on"
-        - home
-    `,
+    config: {
+      type: "entity-filter",
+      entities: [
+        "device_tracker.demo_anne_therese",
+        "device_tracker.demo_home_boy",
+        "device_tracker.demo_paulus",
+        "light.bed_light",
+        "light.ceiling_lights",
+        "light.kitchen_lights",
+      ],
+      conditions: [{ condition: "state", state: ["on", "home"] }],
+    },
   },
   {
     heading: "Same state as Bed Light",
-    config: `
-- type: entity-filter
-  entities:
-    - device_tracker.demo_anne_therese
-    - device_tracker.demo_home_boy
-    - device_tracker.demo_paulus
-    - light.bed_light
-    - light.ceiling_lights
-    - light.kitchen_lights
-  conditions:
-    - condition: state
-      state:
-        - light.bed_light
-    `,
+    config: {
+      type: "entity-filter",
+      entities: [
+        "device_tracker.demo_anne_therese",
+        "device_tracker.demo_home_boy",
+        "device_tracker.demo_paulus",
+        "light.bed_light",
+        "light.ceiling_lights",
+        "light.kitchen_lights",
+      ],
+      conditions: [{ condition: "state", state: ["light.bed_light"] }],
+    },
   },
   {
     heading: 'With "entities" card config',
-    config: `
-- type: entity-filter
-  entities:
-    - device_tracker.demo_anne_therese
-    - device_tracker.demo_home_boy
-    - device_tracker.demo_paulus
-    - light.bed_light
-    - light.ceiling_lights
-    - light.kitchen_lights
-  conditions:
-    - condition: state
-      state:
-        - "on"
-        - home
-  card:
-    type: entities
-    title: Custom Title
-    show_header_toggle: false
-    `,
+    config: {
+      type: "entity-filter",
+      entities: [
+        "device_tracker.demo_anne_therese",
+        "device_tracker.demo_home_boy",
+        "device_tracker.demo_paulus",
+        "light.bed_light",
+        "light.ceiling_lights",
+        "light.kitchen_lights",
+      ],
+      conditions: [{ condition: "state", state: ["on", "home"] }],
+      card: {
+        type: "entities",
+        title: "Custom Title",
+        show_header_toggle: false,
+      },
+    },
   },
   {
     heading: 'With "glance" card config',
-    config: `
-- type: entity-filter
-  entities:
-    - device_tracker.demo_anne_therese
-    - device_tracker.demo_home_boy
-    - device_tracker.demo_paulus
-    - light.bed_light
-    - light.ceiling_lights
-    - light.kitchen_lights
-  conditions:
-    - condition: state
-      state:
-        - "on"
-        - home
-  card:
-    type: glance
-    show_state: true
-    title: Custom Title
-    `,
+    config: {
+      type: "entity-filter",
+      entities: [
+        "device_tracker.demo_anne_therese",
+        "device_tracker.demo_home_boy",
+        "device_tracker.demo_paulus",
+        "light.bed_light",
+        "light.ceiling_lights",
+        "light.kitchen_lights",
+      ],
+      conditions: [{ condition: "state", state: ["on", "home"] }],
+      card: {
+        type: "glance",
+        show_state: true,
+        title: "Custom Title",
+      },
+    },
   },
   {
     heading:
       "Filtered entities by battery attribute (< '30') using state filter",
-    config: `
-- type: entity-filter
-  entities:
-    - device_tracker.demo_anne_therese
-    - device_tracker.demo_home_boy
-    - device_tracker.demo_paulus
-  state_filter:
-    - operator: <
-      attribute: battery
-      value: "30"
-    `,
+    config: {
+      type: "entity-filter",
+      entities: [
+        "device_tracker.demo_anne_therese",
+        "device_tracker.demo_home_boy",
+        "device_tracker.demo_paulus",
+      ],
+      state_filter: [{ operator: "<", attribute: "battery", value: "30" }],
+    },
   },
   {
     heading: "Unfiltered number entities",
-    config: `
-- type: entities
-  entities:
-    - input_number.min_battery_level
-    - sensor.battery_1
-    - sensor.battery_3
-    - sensor.battery_2
-    - sensor.battery_4
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        "input_number.min_battery_level",
+        "sensor.battery_1",
+        "sensor.battery_3",
+        "sensor.battery_2",
+        "sensor.battery_4",
+      ],
+    },
   },
   {
     heading: "Battery lower than 50%",
-    config: `
-- type: entity-filter
-  entities:
-    - sensor.battery_1
-    - sensor.battery_3
-    - sensor.battery_2
-    - sensor.battery_4
-  conditions:
-    - condition: numeric_state
-      below: 50
-    `,
+    config: {
+      type: "entity-filter",
+      entities: [
+        "sensor.battery_1",
+        "sensor.battery_3",
+        "sensor.battery_2",
+        "sensor.battery_4",
+      ],
+      conditions: [{ condition: "numeric_state", below: 50 }],
+    },
   },
   {
     heading: "Battery lower than min battery level",
-    config: `
-- type: entity-filter
-  entities:
-    - sensor.battery_1
-    - sensor.battery_3
-    - sensor.battery_2
-    - sensor.battery_4
-  conditions:
-    - condition: numeric_state
-      below: input_number.min_battery_level
-    `,
+    config: {
+      type: "entity-filter",
+      entities: [
+        "sensor.battery_1",
+        "sensor.battery_3",
+        "sensor.battery_2",
+        "sensor.battery_4",
+      ],
+      conditions: [
+        { condition: "numeric_state", below: "input_number.min_battery_level" },
+      ],
+    },
   },
   {
     heading: "Battery between min battery level and 70%",
-    config: `
-- type: entity-filter
-  entities:
-    - sensor.battery_1
-    - sensor.battery_3
-    - sensor.battery_2
-    - sensor.battery_4
-  conditions:
-    - condition: numeric_state
-      above: input_number.min_battery_level
-      below: 70
-    `,
+    config: {
+      type: "entity-filter",
+      entities: [
+        "sensor.battery_1",
+        "sensor.battery_3",
+        "sensor.battery_2",
+        "sensor.battery_4",
+      ],
+      conditions: [
+        {
+          condition: "numeric_state",
+          above: "input_number.min_battery_level",
+          below: 70,
+        },
+      ],
+    },
   },
+] satisfies DemoCardConfig<
+  | EntitiesCardConfig
+  | EntityFilterCardConfig
+  | StateFilterEntityFilterCardConfig
+>[];
+
+const INVALID_CONFIGS = [
   {
     heading: "Error: Entities must be specified",
-    config: `
-- type: entity-filter
-    `,
+    config: { type: "entity-filter" },
+    expectConfigError: true,
   },
   {
     heading: "Error: Incorrect filter config",
-    config: `
-- type: entity-filter
-  entities:
-    - sensor.gas_station_lowest_price
-    `,
+    config: {
+      type: "entity-filter",
+      entities: ["sensor.gas_station_lowest_price"],
+    },
+    expectConfigError: true,
   },
-];
+] satisfies DemoCardConfig<
+  | Pick<EntityFilterCardConfig, "type">
+  | Pick<EntityFilterCardConfig, "type" | "entities">
+>[];
+
+const CONFIGS = [...VALID_CONFIGS, ...INVALID_CONFIGS];
 
 @customElement("demo-lovelace-entity-filter-card")
 class DemoEntityFilter extends LitElement {

gallery/src/pages/lovelace/gauge-card.ts

@@ -1,7 +1,9 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { GaugeCardConfig } from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -30,158 +32,156 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Basic example",
-    config: `
-- type: gauge
-  entity: sensor.outside_humidity
-  name: Outside Humidity
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.outside_humidity",
+      name: "Outside Humidity",
+    },
   },
   {
     heading: "Custom unit of measurement",
-    config: `
-- type: gauge
-  entity: sensor.outside_temperature
-  unit_of_measurement: C
-  name: Outside Temperature
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.outside_temperature",
+      unit: "C",
+      name: "Outside Temperature",
+    },
   },
   {
     heading: "Rendering needle",
-    config: `
-- type: gauge
-  entity: sensor.outside_humidity
-  name: Outside Humidity
-  needle: true
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.outside_humidity",
+      name: "Outside Humidity",
+      needle: true,
+    },
   },
   {
     heading: "Rendering needle and severity levels",
-    config: `
-- type: gauge
-  entity: sensor.brightness_high
-  name: Brightness High
-  needle: true
-  severity:
-    red: 75
-    green: 0
-    yellow: 50
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.brightness_high",
+      name: "Brightness High",
+      needle: true,
+      severity: {
+        red: 75,
+        green: 0,
+        yellow: 50,
+      },
+    },
   },
   {
     heading: "Setting severity levels",
-    config: `
-- type: gauge
-  entity: sensor.brightness
-  name: Brightness Low
-  severity:
-    red: 75
-    green: 0
-    yellow: 50
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.brightness",
+      name: "Brightness Low",
+      severity: {
+        red: 75,
+        green: 0,
+        yellow: 50,
+      },
+    },
   },
   {
     heading: "Setting severity levels",
-    config: `
-- type: gauge
-  entity: sensor.brightness_medium
-  name: Brightness Medium
-  severity:
-    red: 75
-    green: 0
-    yellow: 50
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.brightness_medium",
+      name: "Brightness Medium",
+      severity: {
+        red: 75,
+        green: 0,
+        yellow: 50,
+      },
+    },
   },
   {
     heading: "Setting severity levels",
-    config: `
-- type: gauge
-  entity: sensor.brightness_high
-  name: Brightness High
-  severity:
-    red: 75
-    green: 0
-    yellow: 50
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.brightness_high",
+      name: "Brightness High",
+      severity: {
+        red: 75,
+        green: 0,
+        yellow: 50,
+      },
+    },
   },
   {
     heading: "Setting min (0) and mx (15) values",
-    config: `
-- type: gauge
-  entity: sensor.brightness
-  name: Brightness
-  min: 0
-  max: 15
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.brightness",
+      name: "Brightness",
+      min: 0,
+      max: 15,
+    },
   },
   {
     heading: "Invalid entity",
-    config: `
-- type: gauge
-  entity: sensor.invalid_entity
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.invalid_entity",
+    },
   },
   {
     heading: "Non-numeric value",
-    config: `
-- type: gauge
-  entity: plant.bonsai
-    `,
+    config: {
+      type: "gauge",
+      entity: "plant.bonsai",
+    },
   },
   {
     heading: "Unavailable entity",
-    config: `
-- type: gauge
-  entity: sensor.not_working
-    `,
+    config: {
+      type: "gauge",
+      entity: "sensor.not_working",
+    },
   },
   {
     heading: "Lower minimum",
-    config: `
-- type: gauge
-  entity: sensor.brightness_high
-  needle: true
-  severity:
-    green: 0
-    yellow: 0.45
-    red: 0.9
-  min: -0.05
-  name: " "
-  max: 1.9
-  unit: GBP/h`,
+    config: {
+      type: "gauge",
+      entity: "sensor.brightness_high",
+      needle: true,
+      severity: {
+        green: 0,
+        yellow: 0.45,
+        red: 0.9,
+      },
+      min: -0.05,
+      name: " ",
+      max: 1.9,
+      unit: "GBP/h",
+    },
   },
   {
     heading: "A lot of segments",
-    config: `
-- type: gauge
-  needle: true
-  name: Percent gauge
-  entity: sensor.brightness_high
-  unit: "%"
-  min: 0
-  max: 100
-  segments:
-    - from: 0
-      color: "#db4437"
-    - from: 10
-      color: "#cc4d39"
-    - from: 20
-      color: "#bd563a"
-    - from: 30
-      color: "#ad603c"
-    - from: 40
-      color: "#9e693d"
-    - from: 50
-      color: "#8f723f"
-    - from: 60
-      color: "#807b41"
-    - from: 70
-      color: "#718442"
-    - from: 80
-      color: "#618e44"
-    - from: 90
-      color: "#43a047"`,
+    config: {
+      type: "gauge",
+      needle: true,
+      name: "Percent gauge",
+      entity: "sensor.brightness_high",
+      unit: "%",
+      min: 0,
+      max: 100,
+      segments: [
+        { from: 0, color: "#db4437" },
+        { from: 10, color: "#cc4d39" },
+        { from: 20, color: "#bd563a" },
+        { from: 30, color: "#ad603c" },
+        { from: 40, color: "#9e693d" },
+        { from: 50, color: "#8f723f" },
+        { from: 60, color: "#807b41" },
+        { from: 70, color: "#718442" },
+        { from: 80, color: "#618e44" },
+        { from: 90, color: "#43a047" },
+      ],
+    },
   },
-];
+] satisfies DemoCardConfig<GaugeCardConfig>[];
 
 @customElement("demo-lovelace-gauge-card")
 class DemoGaugeEntity extends LitElement {

gallery/src/pages/lovelace/glance-card.ts

@@ -1,7 +1,12 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type {
+  GlanceCardConfig,
+  GlanceConfigEntity,
+} from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -86,172 +91,193 @@ const ENTITIES = [
   },
 ];
 
+type LegacyNullNameGlanceCardConfig = Omit<GlanceCardConfig, "entities"> & {
+  type: GlanceCardConfig["type"];
+  entities: (
+    | string
+    | GlanceConfigEntity
+    | (Omit<GlanceConfigEntity, "name"> & { name: null })
+  )[];
+};
+
 const CONFIGS = [
   {
     heading: "Basic example",
-    config: `
-- type: glance
-  entities:
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
-    - lock.kitchen_door
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "glance",
+      entities: [
+        "device_tracker.demo_paulus",
+        "media_player.living_room",
+        "sun.sun",
+        "cover.kitchen_window",
+        "light.kitchen_lights",
+        "lock.kitchen_door",
+        "light.ceiling_lights",
+      ],
+    },
   },
   {
     heading: "No state colors",
-    config: `
-- type: glance
-  state_color: false
-  entities:
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
-    - lock.kitchen_door
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "glance",
+      state_color: false,
+      entities: [
+        "device_tracker.demo_paulus",
+        "media_player.living_room",
+        "sun.sun",
+        "cover.kitchen_window",
+        "light.kitchen_lights",
+        "lock.kitchen_door",
+        "light.ceiling_lights",
+      ],
+    },
   },
   {
     heading: "With title",
-    config: `
-- type: glance
-  title: Custom title
-  columns: 4
-  entities:
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
-    - lock.kitchen_door
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "glance",
+      title: "Custom title",
+      columns: 4,
+      entities: [
+        "device_tracker.demo_paulus",
+        "media_player.living_room",
+        "sun.sun",
+        "cover.kitchen_window",
+        "light.kitchen_lights",
+        "lock.kitchen_door",
+        "light.ceiling_lights",
+      ],
+    },
   },
   {
     heading: "Custom number of columns",
-    config: `
-- type: glance
-  columns: 7
-  entities:
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
-    - lock.kitchen_door
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "glance",
+      columns: 7,
+      entities: [
+        "device_tracker.demo_paulus",
+        "media_player.living_room",
+        "sun.sun",
+        "cover.kitchen_window",
+        "light.kitchen_lights",
+        "lock.kitchen_door",
+        "light.ceiling_lights",
+      ],
+    },
   },
   {
     heading: "No entity names",
-    config: `
-- type: glance
-  columns: 4
-  show_name: false
-  entities:
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
-    - lock.kitchen_door
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "glance",
+      columns: 4,
+      show_name: false,
+      entities: [
+        "device_tracker.demo_paulus",
+        "media_player.living_room",
+        "sun.sun",
+        "cover.kitchen_window",
+        "light.kitchen_lights",
+        "lock.kitchen_door",
+        "light.ceiling_lights",
+      ],
+    },
   },
   {
     heading: "No state labels",
-    config: `
-- type: glance
-  columns: 4
-  show_state: false
-  entities:
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
-    - lock.kitchen_door
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "glance",
+      columns: 4,
+      show_state: false,
+      entities: [
+        "device_tracker.demo_paulus",
+        "media_player.living_room",
+        "sun.sun",
+        "cover.kitchen_window",
+        "light.kitchen_lights",
+        "lock.kitchen_door",
+        "light.ceiling_lights",
+      ],
+    },
   },
   {
     heading: "No names and no state labels",
-    config: `
-- type: glance
-  columns: 4
-  show_name: false
-  show_state: false
-  entities:
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
-    - lock.kitchen_door
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "glance",
+      columns: 4,
+      show_name: false,
+      show_state: false,
+      entities: [
+        "device_tracker.demo_paulus",
+        "media_player.living_room",
+        "sun.sun",
+        "cover.kitchen_window",
+        "light.kitchen_lights",
+        "lock.kitchen_door",
+        "light.ceiling_lights",
+      ],
+    },
   },
   {
     heading: "Custom name + custom icon",
-    config: `
-- type: glance
-  columns: 4
-  entities:
-    - entity: device_tracker.demo_paulus
-      name: ¯\\_(ツ)_/¯
-      icon: mdi:home-assistant
-    - entity: media_player.living_room
-      name: ¯\\_(ツ)_/¯
-      icon: mdi:home-assistant
-    `,
+    config: {
+      type: "glance",
+      columns: 4,
+      entities: [
+        {
+          entity: "device_tracker.demo_paulus",
+          name: "¯\\_(ツ)_/¯",
+          icon: "mdi:home-assistant",
+        },
+        {
+          entity: "media_player.living_room",
+          name: "¯\\_(ツ)_/¯",
+          icon: "mdi:home-assistant",
+        },
+      ],
+    },
   },
   {
     heading: "Selectively hidden name",
-    config: `
-- type: glance
-  columns: 4
-  entities:
-    - device_tracker.demo_paulus
-    - entity: media_player.living_room
-      name:
-    - sun.sun
-    - entity: cover.kitchen_window
-      name:
-    - light.kitchen_lights
-    - entity: lock.kitchen_door
-      name:
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "glance",
+      columns: 4,
+      entities: [
+        "device_tracker.demo_paulus",
+        { entity: "media_player.living_room", name: null },
+        "sun.sun",
+        { entity: "cover.kitchen_window", name: null },
+        "light.kitchen_lights",
+        { entity: "lock.kitchen_door", name: null },
+        "light.ceiling_lights",
+      ],
+    },
   },
   {
     heading: "Custom tap action",
-    config: `
-- type: glance
-  columns: 4
-  entities:
-    - entity: lock.kitchen_door
-      name: Custom
-      tap_action:
-        type: toggle
-    - entity: light.ceiling_lights
-      name: Custom
-      tap_action:
-        action: call-service
-        service: light.turn_on
-        data:
-          entity_id: light.ceiling_lights
-    - entity: sun.sun
-      name: Regular
-    - entity: light.kitchen_lights
-      name: Regular
-    `,
+    config: {
+      type: "glance",
+      columns: 4,
+      entities: [
+        {
+          entity: "lock.kitchen_door",
+          name: "Custom",
+          tap_action: { action: "toggle" },
+        },
+        {
+          entity: "light.ceiling_lights",
+          name: "Custom",
+          tap_action: {
+            action: "perform-action",
+            perform_action: "light.turn_on",
+            data: { entity_id: "light.ceiling_lights" },
+          },
+        },
+        { entity: "sun.sun", name: "Regular" },
+        { entity: "light.kitchen_lights", name: "Regular" },
+      ],
+    },
   },
-];
+] satisfies DemoCardConfig<GlanceCardConfig | LegacyNullNameGlanceCardConfig>[];
 
 @customElement("demo-lovelace-glance-card")
 class DemoGlanceEntity extends LitElement {

gallery/src/pages/lovelace/grid-and-stack-card.ts

@@ -1,8 +1,13 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { mockHistory } from "../../../../demo/src/stubs/history";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type {
+  GridCardConfig,
+  StackCardConfig,
+} from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -70,159 +75,159 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Default Grid",
-    config: `
-- type: grid
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    - type: entity
-      entity: device_tracker.demo_anne_therese
-    `,
+    config: {
+      type: "grid",
+      cards: [
+        { type: "entity", entity: "light.kitchen_lights" },
+        { type: "entity", entity: "light.bed_light" },
+        { type: "entity", entity: "device_tracker.demo_paulus" },
+        { type: "sensor", entity: "sensor.illumination", graph: "line" },
+        { type: "entity", entity: "device_tracker.demo_anne_therese" },
+      ],
+    },
   },
   {
     heading: "Non-square Grid with 2 columns",
-    config: `
-- type: grid
-  columns: 2
-  square: false
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    `,
+    config: {
+      type: "grid",
+      columns: 2,
+      square: false,
+      cards: [
+        { type: "entity", entity: "light.kitchen_lights" },
+        { type: "entity", entity: "light.bed_light" },
+        { type: "entity", entity: "device_tracker.demo_paulus" },
+        { type: "sensor", entity: "sensor.illumination", graph: "line" },
+      ],
+    },
   },
   {
     heading: "Default Grid with title",
-    config: `
-- type: grid
-  title: Kitchen
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    - type: entity
-      entity: device_tracker.demo_anne_therese
-    `,
+    config: {
+      type: "grid",
+      title: "Kitchen",
+      cards: [
+        { type: "entity", entity: "light.kitchen_lights" },
+        { type: "entity", entity: "light.bed_light" },
+        { type: "entity", entity: "device_tracker.demo_paulus" },
+        { type: "sensor", entity: "sensor.illumination", graph: "line" },
+        { type: "entity", entity: "device_tracker.demo_anne_therese" },
+      ],
+    },
   },
   {
     heading: "Columns 4",
-    config: `
-- type: grid
-  columns: 4
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    `,
+    config: {
+      type: "grid",
+      columns: 4,
+      cards: [
+        { type: "entity", entity: "light.kitchen_lights" },
+        { type: "entity", entity: "light.bed_light" },
+        { type: "entity", entity: "device_tracker.demo_paulus" },
+        { type: "sensor", entity: "sensor.illumination", graph: "line" },
+      ],
+    },
   },
   {
     heading: "Columns 2",
-    config: `
-- type: grid
-  columns: 2
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    `,
+    config: {
+      type: "grid",
+      columns: 2,
+      cards: [
+        { type: "entity", entity: "light.kitchen_lights" },
+        { type: "entity", entity: "light.bed_light" },
+      ],
+    },
   },
   {
     heading: "Columns 1",
-    config: `
-- type: grid
-  columns: 1
-  cards:
-  - type: entity
-    entity: light.kitchen_lights
-    `,
+    config: {
+      type: "grid",
+      columns: 1,
+      cards: [{ type: "entity", entity: "light.kitchen_lights" }],
+    },
   },
   {
     heading: "Size for single card",
-    config: `
-- type: grid
-  cards:
-  - type: entity
-    entity: light.kitchen_lights
-    `,
+    config: {
+      type: "grid",
+      cards: [{ type: "entity", entity: "light.kitchen_lights" }],
+    },
   },
 
   {
     heading: "Vertical Stack",
-    config: `
-- type: vertical-stack
-  cards:
-    - type: picture-entity
-      image: /images/kitchen.png
-      entity: light.kitchen_lights
-    - type: glance
-      entities:
-        - device_tracker.demo_anne_therese
-        - device_tracker.demo_home_boy
-        - device_tracker.demo_paulus
-    `,
+    config: {
+      type: "vertical-stack",
+      cards: [
+        {
+          type: "picture-entity",
+          image: "/images/kitchen.png",
+          entity: "light.kitchen_lights",
+        },
+        {
+          type: "glance",
+          entities: [
+            "device_tracker.demo_anne_therese",
+            "device_tracker.demo_home_boy",
+            "device_tracker.demo_paulus",
+          ],
+        },
+      ],
+    },
   },
   {
     heading: "Horizontal Stack",
-    config: `
-- type: horizontal-stack
-  cards:
-    - type: picture-entity
-      image: /images/kitchen.png
-      entity: light.kitchen_lights
-    - type: glance
-      entities:
-        - device_tracker.demo_anne_therese
-        - device_tracker.demo_home_boy
-        - device_tracker.demo_paulus
-    `,
+    config: {
+      type: "horizontal-stack",
+      cards: [
+        {
+          type: "picture-entity",
+          image: "/images/kitchen.png",
+          entity: "light.kitchen_lights",
+        },
+        {
+          type: "glance",
+          entities: [
+            "device_tracker.demo_anne_therese",
+            "device_tracker.demo_home_boy",
+            "device_tracker.demo_paulus",
+          ],
+        },
+      ],
+    },
   },
   {
     heading: "Combination of both",
-    config: `
-- type: vertical-stack
-  cards:
-    - type: horizontal-stack
-      cards:
-        - type: picture-entity
-          image: /images/kitchen.png
-          entity: light.kitchen_lights
-        - type: glance
-          entities:
-            - device_tracker.demo_anne_therese
-            - device_tracker.demo_home_boy
-            - device_tracker.demo_paulus
-    - type: picture-entity
-      image: /images/bed.png
-      entity: light.bed_light
-    `,
+    config: {
+      type: "vertical-stack",
+      cards: [
+        {
+          type: "horizontal-stack",
+          cards: [
+            {
+              type: "picture-entity",
+              image: "/images/kitchen.png",
+              entity: "light.kitchen_lights",
+            },
+            {
+              type: "glance",
+              entities: [
+                "device_tracker.demo_anne_therese",
+                "device_tracker.demo_home_boy",
+                "device_tracker.demo_paulus",
+              ],
+            },
+          ],
+        },
+        {
+          type: "picture-entity",
+          image: "/images/bed.png",
+          entity: "light.bed_light",
+        },
+      ],
+    },
   },
-];
+] satisfies DemoCardConfig<GridCardConfig | StackCardConfig>[];
 
 @customElement("demo-lovelace-grid-and-stack-card")
 class DemoStack extends LitElement {

gallery/src/pages/lovelace/iframe-card.ts

@@ -1,42 +1,44 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { IframeCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 
 const CONFIGS = [
   {
     heading: "Without title",
-    config: `
-- type: iframe
-  url: https://embed.windy.com/embed2.html
-    `,
+    config: {
+      type: "iframe",
+      url: "https://embed.windy.com/embed2.html",
+    },
   },
   {
     heading: "With title",
-    config: `
-- type: iframe
-  url: https://embed.windy.com/embed2.html
-  title: Weather radar
-    `,
+    config: {
+      type: "iframe",
+      url: "https://embed.windy.com/embed2.html",
+      title: "Weather radar",
+    },
   },
   {
     heading: "Height-Width 3:4",
-    config: `
-- type: iframe
-  url: https://embed.windy.com/embed2.html
-  aspect_ratio: 75%
-    `,
+    config: {
+      type: "iframe",
+      url: "https://embed.windy.com/embed2.html",
+      aspect_ratio: "75%",
+    },
   },
   {
     heading: "Height-Width 1:1",
-    config: `
-- type: iframe
-  url: https://embed.windy.com/embed2.html
-  aspect_ratio: 100%
-    `,
+    config: {
+      type: "iframe",
+      url: "https://embed.windy.com/embed2.html",
+      aspect_ratio: "100%",
+    },
   },
-];
+] satisfies DemoCardConfig<IframeCardConfig>[];
 
 @customElement("demo-lovelace-iframe-card")
 class DemoIframe extends LitElement {

gallery/src/pages/lovelace/light-card.ts

@@ -1,6 +1,8 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { LightCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
@@ -44,40 +46,40 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Switchable Light",
-    config: `
-- type: light
-  entity: light.bed_light
-    `,
+    config: {
+      type: "light",
+      entity: "light.bed_light",
+    },
   },
   {
     heading: "Dimmable Light On",
-    config: `
-- type: light
-  entity: light.dim_on
-    `,
+    config: {
+      type: "light",
+      entity: "light.dim_on",
+    },
   },
   {
     heading: "Dimmable Light Off",
-    config: `
-- type: light
-  entity: light.dim_off
-    `,
+    config: {
+      type: "light",
+      entity: "light.dim_off",
+    },
   },
   {
     heading: "Unavailable",
-    config: `
-- type: light
-  entity: light.unavailable
-    `,
+    config: {
+      type: "light",
+      entity: "light.unavailable",
+    },
   },
   {
     heading: "Non existing",
-    config: `
-- type: light
-  entity: light.nonexisting
-    `,
+    config: {
+      type: "light",
+      entity: "light.nonexisting",
+    },
   },
-];
+] satisfies DemoCardConfig<LightCardConfig>[];
 
 @customElement("demo-lovelace-light-card")
 class DemoLightEntity extends LitElement {

gallery/src/pages/lovelace/map-card.ts

@@ -1,7 +1,9 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { MapCardConfig } from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 
 const ENTITIES = [
@@ -86,107 +88,93 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Without title",
-    config: `
-- type: map
-  entities:
-    - entity: device_tracker.demo_paulus
-    - device_tracker.demo_home_boy
-    - zone.home
-    `,
+    config: {
+      type: "map",
+      entities: [
+        { entity: "device_tracker.demo_paulus" },
+        "device_tracker.demo_home_boy",
+        "zone.home",
+      ],
+    },
   },
   {
     heading: "With title",
-    config: `
-- type: map
-  entities:
-    - entity: device_tracker.demo_paulus
-    - zone.home
-  title: Where is Paulus?
-    `,
+    config: {
+      type: "map",
+      entities: [{ entity: "device_tracker.demo_paulus" }, "zone.home"],
+      title: "Where is Paulus?",
+    },
   },
   {
     heading: "Height-Width 1:2",
-    config: `
-- type: map
-  entities:
-    - entity: device_tracker.demo_paulus
-    - zone.home
-  aspect_ratio: 50%
-    `,
+    config: {
+      type: "map",
+      entities: [{ entity: "device_tracker.demo_paulus" }, "zone.home"],
+      aspect_ratio: "50%",
+    },
   },
   {
     heading: "Default Zoom",
-    config: `
-- type: map
-  default_zoom: 12
-  entities:
-    - entity: device_tracker.demo_paulus
-    - zone.home
-    `,
+    config: {
+      type: "map",
+      default_zoom: 12,
+      entities: [{ entity: "device_tracker.demo_paulus" }, "zone.home"],
+    },
   },
   {
     heading: "Default Zoom too High",
-    config: `
-- type: map
-  default_zoom: 20
-  entities:
-    - entity: device_tracker.demo_paulus
-    - zone.home
-    `,
+    config: {
+      type: "map",
+      default_zoom: 20,
+      entities: [{ entity: "device_tracker.demo_paulus" }, "zone.home"],
+    },
   },
   {
     heading: "Single Marker",
-    config: `
-- type: map
-  entities:
-    - device_tracker.demo_paulus
-    `,
+    config: {
+      type: "map",
+      entities: ["device_tracker.demo_paulus"],
+    },
   },
   {
     heading: "Single Marker Default Zoom",
-    config: `
-- type: map
-  default_zoom: 8
-  entities:
-    - device_tracker.demo_paulus
-    `,
+    config: {
+      type: "map",
+      default_zoom: 8,
+      entities: ["device_tracker.demo_paulus"],
+    },
   },
   {
     heading: "No Entities",
-    config: `
-- type: map
-  entities:
-    - light.bed_light
-    `,
+    config: {
+      type: "map",
+      entities: ["light.bed_light"],
+    },
   },
   {
     heading: "No Entities, Default Zoom",
-    config: `
-- type: map
-  default_zoom: 8
-  entities:
-    - light.bed_light
-    `,
+    config: {
+      type: "map",
+      default_zoom: 8,
+      entities: ["light.bed_light"],
+    },
   },
   {
     heading: "Geo Location Entities",
-    config: `
-- type: map
-  geo_location_sources:
-    - bushfire_demo
-    `,
+    config: {
+      type: "map",
+      geo_location_sources: ["bushfire_demo"],
+    },
   },
   {
     heading: "Geo Location Entities with Home Zone",
-    config: `
-- type: map
-  geo_location_sources:
-    - bushfire_demo
-  entities:
-    - zone.bushfire
-    `,
+    config: {
+      type: "map",
+      geo_location_sources: ["bushfire_demo"],
+      entities: ["zone.bushfire"],
+    },
   },
-];
+] satisfies DemoCardConfig<MapCardConfig>[];
 
 @customElement("demo-lovelace-map-card")
 class DemoMap extends LitElement {

gallery/src/pages/lovelace/markdown-card.ts

@@ -1,17 +1,18 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { mockTemplate } from "../../../../demo/src/stubs/template";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { MarkdownCardConfig } from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 
 const CONFIGS = [
   {
     heading: "markdown-it demo",
-    config: `
-- type: markdown
-  content: |
-    # h1 Heading 8-)
+    config: {
+      type: "markdown",
+      content: `# h1 Heading 8-)
 
     ## h2 Heading
 
@@ -278,9 +279,12 @@ const CONFIGS = [
     <ha-alert alert-type="success">This is a success alert — check it out!</ha-alert>
     <ha-alert title="Test alert">This is an alert with a title</ha-alert>
 
-    `,
+    `
+        .replace(/^ {4}/gm, "")
+        .replace(/\n+$/, "\n"),
+    },
   },
-];
+] satisfies DemoCardConfig<MarkdownCardConfig>[];
 
 @customElement("demo-lovelace-markdown-card")
 class DemoMarkdown extends LitElement {

gallery/src/pages/lovelace/media-control-card.ts

@@ -1,162 +1,165 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type {
+  GridCardConfig,
+  MediaControlCardConfig,
+} from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { createMediaPlayerEntities } from "../../data/media_players";
 
 const CONFIGS = [
   {
     heading: "Paused Music",
-    config: `
-  - type: media-control
-    entity: media_player.music_paused
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.music_paused",
+    },
   },
   {
     heading: "Playing Music",
-    config: `
-  - type: media-control
-    entity: media_player.music_playing
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.music_playing",
+    },
   },
   {
     heading: "Playing Stream",
-    config: `
-  - type: media-control
-    entity: media_player.stream_playing
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.stream_playing",
+    },
   },
   {
     heading: "Paused Stream",
-    config: `
-  - type: media-control
-    entity: media_player.stream_paused
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.stream_paused",
+    },
   },
   {
     heading: 'Playing Stream (with "previous" support)',
-    config: `
-  - type: media-control
-    entity: media_player.stream_playing_previous
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.stream_playing_previous",
+    },
   },
   {
     heading: "Playing non-skip TV Show",
-    config: `
-  - type: media-control
-    entity: media_player.tv_playing
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.tv_playing",
+    },
   },
   {
     heading: "Screen Casting",
-    config: `
-  - type: media-control
-    entity: media_player.android_cast
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.android_cast",
+    },
   },
   {
     heading: "Digital Picture Frame",
-    config: `
-  - type: media-control
-    entity: media_player.image_display
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.image_display",
+    },
   },
   {
     heading: "Sonos Idle",
-    config: `
-  - type: media-control
-    entity: media_player.sonos_idle
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.sonos_idle",
+    },
   },
   {
     heading: "Idle waiting for Browse Media",
-    config: `
-  - type: media-control
-    entity: media_player.idle_browse_media
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.idle_browse_media",
+    },
   },
   {
     heading: "Player Off",
-    config: `
-  - type: media-control
-    entity: media_player.theater_off
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.theater_off",
+    },
   },
   {
     heading: "Player On",
-    config: `
-  - type: media-control
-    entity: media_player.theater_on
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.theater_on",
+    },
   },
   {
     heading: "Player Off (cannot be switched on)",
-    config: `
-  - type: media-control
-    entity: media_player.theater_off_static
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.theater_off_static",
+    },
   },
   {
     heading: "Player On (cannot be switched off)",
-    config: `
-  - type: media-control
-    entity: media_player.theater_on_static
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.theater_on_static",
+    },
   },
   {
     heading: "Player Idle",
-    config: `
-  - type: media-control
-    entity: media_player.idle
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.idle",
+    },
   },
   {
     heading: "Player Playing",
-    config: `
-  - type: media-control
-    entity: media_player.playing
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.playing",
+    },
   },
   {
     heading: "Player Unavailable",
-    config: `
-  - type: media-control
-    entity: media_player.unavailable
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.unavailable",
+    },
   },
   {
     heading: "Player Unknown",
-    config: `
-  - type: media-control
-    entity: media_player.unknown
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.unknown",
+    },
   },
   {
     heading: "Receiver On (selectable sources)",
-    config: `
-  - type: media-control
-    entity: media_player.receiver_on
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.receiver_on",
+    },
   },
   {
     heading: "Receiver Off (selectable sources)",
-    config: `
-  - type: media-control
-    entity: media_player.receiver_off
-    `,
+    config: {
+      type: "media-control",
+      entity: "media_player.receiver_off",
+    },
   },
   {
     heading: "Grid Full Size",
-    config: `
-  - type: grid
-    columns: 1
-    cards:
-    - type: media-control
-      entity: media_player.music_paused
-    `,
+    config: {
+      type: "grid",
+      columns: 1,
+      cards: [{ type: "media-control", entity: "media_player.music_paused" }],
+    },
   },
-];
+] satisfies DemoCardConfig<MediaControlCardConfig | GridCardConfig>[];
 
 @customElement("demo-lovelace-media-control-card")
 class DemoHuiMediaControlCard extends LitElement {

gallery/src/pages/lovelace/media-player-row.ts

@@ -1,59 +1,60 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { EntitiesCardConfig } from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { createMediaPlayerEntities } from "../../data/media_players";
 
 const CONFIGS = [
   {
     heading: "Media Players",
-    config: `
-- type: entities
-  entities:
-    - entity: media_player.music_paused
-      name: Paused Music
-    - entity: media_player.music_playing
-      name: Playing Music
-    - entity: media_player.stream_playing
-      name: Playing Stream
-    - entity: media_player.stream_paused
-      name: Paused Stream
-    - entity: media_player.stream_playing_previous
-      name: Playing Stream (with "previous" support)
-    - entity: media_player.tv_playing
-      name: Playing non-skip TV Show
-    - entity: media_player.android_cast
-      name: Screen casting
-    - entity: media_player.image_display
-      name: Digital Picture Frame
-    - entity: media_player.sonos_idle
-      name: Sonos Idle
-    - entity: media_player.idle_browse_media
-      name: Idle waiting for Browse Media
-    - entity: media_player.theater_off
-      name: Player Off
-    - entity: media_player.theater_on
-      name: Player On
-    - entity: media_player.theater_off_static
-      name: Player Off (cannot be switched on)
-    - entity: media_player.theater_on_static
-      name: Player On (cannot be switched off)
-    - entity: media_player.idle
-      name: Player Idle
-    - entity: media_player.playing
-      name: Player Playing
-    - entity: media_player.unavailable
-      name: Player Unavailable
-    - entity: media_player.unknown
-      name: Player Unknown
-    - entity: media_player.receiver_on
-      name: Receiver On (selectable sources)
-    - entity: media_player.receiver_off
-      name: Receiver Off (selectable sources)
-    `,
+    config: {
+      type: "entities",
+      entities: [
+        { entity: "media_player.music_paused", name: "Paused Music" },
+        { entity: "media_player.music_playing", name: "Playing Music" },
+        { entity: "media_player.stream_playing", name: "Playing Stream" },
+        { entity: "media_player.stream_paused", name: "Paused Stream" },
+        {
+          entity: "media_player.stream_playing_previous",
+          name: 'Playing Stream (with "previous" support)',
+        },
+        { entity: "media_player.tv_playing", name: "Playing non-skip TV Show" },
+        { entity: "media_player.android_cast", name: "Screen casting" },
+        { entity: "media_player.image_display", name: "Digital Picture Frame" },
+        { entity: "media_player.sonos_idle", name: "Sonos Idle" },
+        {
+          entity: "media_player.idle_browse_media",
+          name: "Idle waiting for Browse Media",
+        },
+        { entity: "media_player.theater_off", name: "Player Off" },
+        { entity: "media_player.theater_on", name: "Player On" },
+        {
+          entity: "media_player.theater_off_static",
+          name: "Player Off (cannot be switched on)",
+        },
+        {
+          entity: "media_player.theater_on_static",
+          name: "Player On (cannot be switched off)",
+        },
+        { entity: "media_player.idle", name: "Player Idle" },
+        { entity: "media_player.playing", name: "Player Playing" },
+        { entity: "media_player.unavailable", name: "Player Unavailable" },
+        { entity: "media_player.unknown", name: "Player Unknown" },
+        {
+          entity: "media_player.receiver_on",
+          name: "Receiver On (selectable sources)",
+        },
+        {
+          entity: "media_player.receiver_off",
+          name: "Receiver Off (selectable sources)",
+        },
+      ],
+    },
   },
-];
+] satisfies DemoCardConfig<EntitiesCardConfig>[];
 
 @customElement("demo-lovelace-media-player-row")
 export class DemoLovelaceMediaPlayerRow extends LitElement {

gallery/src/pages/lovelace/picture-card.ts

@@ -1,6 +1,8 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { PictureCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
@@ -19,26 +21,26 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Image URL",
-    config: `
-- type: picture
-  image: /images/living_room.png
-    `,
+    config: {
+      type: "picture",
+      image: "/images/living_room.png",
+    },
   },
   {
     heading: "Person entity",
-    config: `
-- type: picture
-  image_entity: person.paulus
-    `,
+    config: {
+      type: "picture",
+      image_entity: "person.paulus",
+    },
   },
   {
     heading: "Error: Image required",
-    config: `
-- type: picture
-  entity: person.paulus
-    `,
+    config: {
+      type: "picture",
+    },
+    expectConfigError: true,
   },
-];
+] satisfies DemoCardConfig<PictureCardConfig>[];
 
 @customElement("demo-lovelace-picture-card")
 class DemoPicture extends LitElement {

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -1,7 +1,13 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { PictureElementsCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type {
+  ImageElementConfig,
+  LovelaceElementConfig,
+} from "../../../../src/panels/lovelace/elements/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -60,116 +66,141 @@ const ENTITIES = [
   },
 ];
 
+type LegacyImageElementConfig = Omit<
+  ImageElementConfig,
+  "state_filter" | "state_image"
+> & {
+  state_filter?: Record<string, string>;
+  state_image?: Record<string, string>;
+};
+
+type GalleryPictureElementsCardConfig = Omit<
+  PictureElementsCardConfig,
+  "elements"
+> & {
+  type: PictureElementsCardConfig["type"];
+  elements: (LovelaceElementConfig | LegacyImageElementConfig)[];
+};
+
 const CONFIGS = [
   {
     heading: "Card with few elements",
-    config: `
-- type: picture-elements
-  image: /images/floorplan.png
-  elements:
-    - type: service-button
-      title: Lights Off
-      style:
-        top: 97%
-        left: 90%
-        padding: 0px
-      service: light.turn_off
-      data:
-        entity_id: group.all_lights
-    - type: icon
-      icon: mdi:cctv
-      entity: camera.demo_camera
-      style:
-        top: 12%
-        left: 6%
-        transform: rotate(-60deg) scaleX(-1)
-        --mdc-icon-size: 30px
-        --mdc-icon-stroke-color: black
-        --mdc-icon-fill-color: rgba(50, 50, 50, .75)
-    - type: image
-      entity: light.bed_light
-      tap_action:
-        action: toggle
-      image: /images/light_bulb_off.png
-      state_image:
-        'on': /images/light_bulb_on.png
-      state_filter:
-        'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)
-        'off': brightness(80%) saturate(0.8)
-      style:
-        top: 35%
-        left: 65%
-        width: 7%
-        padding: 50px 50px 100px 50px
-    - type: state-icon
-      entity: binary_sensor.movement_backyard
-      style:
-        top: 8%
-        left: 35%
-    `,
+    config: {
+      type: "picture-elements",
+      image: "/images/floorplan.png",
+      elements: [
+        {
+          type: "service-button",
+          title: "Lights Off",
+          style: { top: "97%", left: "90%", padding: "0px" },
+          service: "light.turn_off",
+          data: { entity_id: "group.all_lights" },
+        },
+        {
+          type: "icon",
+          icon: "mdi:cctv",
+          entity: "camera.demo_camera",
+          style: {
+            top: "12%",
+            left: "6%",
+            transform: "rotate(-60deg) scaleX(-1)",
+            "--mdc-icon-size": "30px",
+            "--mdc-icon-stroke-color": "black",
+            "--mdc-icon-fill-color": "rgba(50, 50, 50, .75)",
+          },
+        },
+        {
+          type: "image",
+          entity: "light.bed_light",
+          tap_action: { action: "toggle" },
+          image: "/images/light_bulb_off.png",
+          state_image: { on: "/images/light_bulb_on.png" },
+          state_filter: {
+            on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+            off: "brightness(80%) saturate(0.8)",
+          },
+          style: {
+            top: "35%",
+            left: "65%",
+            width: "7%",
+            padding: "50px 50px 100px 50px",
+          },
+        },
+        {
+          type: "state-icon",
+          entity: "binary_sensor.movement_backyard",
+          style: { top: "8%", left: "35%" },
+        },
+      ],
+    },
   },
   {
     heading: "Card with header",
-    config: `
-- type: picture-elements
-  image: /images/floorplan.png
-  title: My House
-  elements:
-    - type: service-button
-      title: Lights Off
-      style:
-        top: 97%
-        left: 90%
-        padding: 0px
-      service: light.turn_off
-      data:
-        entity_id: group.all_lights
-    - type: icon
-      icon: mdi:cctv
-      entity: camera.demo_camera
-      style:
-        top: 12%
-        left: 6%
-        transform: rotate(-60deg) scaleX(-1)
-        --mdc-icon-size: 30px
-        --mdc-icon-stroke-color: black
-        --mdc-icon-fill-color: rgba(50, 50, 50, .75)
-    - type: image
-      entity: light.bed_light
-      tap_action:
-        action: toggle
-      image: /images/light_bulb_off.png
-      state_image:
-        'on': /images/light_bulb_on.png
-      state_filter:
-        'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)
-        'off': brightness(80%) saturate(0.8)
-      style:
-        top: 35%
-        left: 65%
-        width: 7%
-        padding: 50px 50px 100px 50px
-    - type: state-icon
-      entity: binary_sensor.movement_backyard
-      style:
-        top: 8%
-        left: 35%
-    `,
+    config: {
+      type: "picture-elements",
+      image: "/images/floorplan.png",
+      title: "My House",
+      elements: [
+        {
+          type: "service-button",
+          title: "Lights Off",
+          style: { top: "97%", left: "90%", padding: "0px" },
+          service: "light.turn_off",
+          data: { entity_id: "group.all_lights" },
+        },
+        {
+          type: "icon",
+          icon: "mdi:cctv",
+          entity: "camera.demo_camera",
+          style: {
+            top: "12%",
+            left: "6%",
+            transform: "rotate(-60deg) scaleX(-1)",
+            "--mdc-icon-size": "30px",
+            "--mdc-icon-stroke-color": "black",
+            "--mdc-icon-fill-color": "rgba(50, 50, 50, .75)",
+          },
+        },
+        {
+          type: "image",
+          entity: "light.bed_light",
+          tap_action: { action: "toggle" },
+          image: "/images/light_bulb_off.png",
+          state_image: { on: "/images/light_bulb_on.png" },
+          state_filter: {
+            on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+            off: "brightness(80%) saturate(0.8)",
+          },
+          style: {
+            top: "35%",
+            left: "65%",
+            width: "7%",
+            padding: "50px 50px 100px 50px",
+          },
+        },
+        {
+          type: "state-icon",
+          entity: "binary_sensor.movement_backyard",
+          style: { top: "8%", left: "35%" },
+        },
+      ],
+    },
   },
   {
     heading: "Person entity",
-    config: `
-- type: picture-elements
-  image_entity: person.paulus
-  elements:
-  - type: state-icon
-    entity: sensor.battery
-    style:
-      top: 8%
-      left: 8%
-    `,
+    config: {
+      type: "picture-elements",
+      image_entity: "person.paulus",
+      elements: [
+        {
+          type: "state-icon",
+          entity: "sensor.battery",
+          style: { top: "8%", left: "8%" },
+        },
+      ],
+    },
   },
-];
+] satisfies DemoCardConfig<GalleryPictureElementsCardConfig>[];
 
 @customElement("demo-lovelace-picture-elements-card")
 class DemoPictureElements extends LitElement {

gallery/src/pages/lovelace/picture-entity-card.ts

@@ -1,7 +1,9 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import type { DemoCardConfig } from "../../components/demo-card";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { PictureEntityCardConfig } from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -33,75 +35,73 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "State on",
-    config: `
-- type: picture-entity
-  image: /images/kitchen.png
-  entity: light.kitchen_lights
-  tap_action:
-    action: toggle
-    `,
+    config: {
+      type: "picture-entity",
+      image: "/images/kitchen.png",
+      entity: "light.kitchen_lights",
+      tap_action: { action: "toggle" },
+    },
   },
   {
     heading: "State off",
-    config: `
-- type: picture-entity
-  image: /images/bed.png
-  entity: light.bed_light
-  tap_action:
-    action: toggle
-    `,
+    config: {
+      type: "picture-entity",
+      image: "/images/bed.png",
+      entity: "light.bed_light",
+      tap_action: { action: "toggle" },
+    },
   },
   {
     heading: "Entity unavailable",
-    config: `
-- type: picture-entity
-  image: /images/living_room.png
-  entity: light.non_existing
-    `,
+    config: {
+      type: "picture-entity",
+      image: "/images/living_room.png",
+      entity: "light.non_existing",
+    },
   },
   {
     heading: "Camera entity",
-    config: `
-- type: picture-entity
-  entity: camera.demo_camera
-    `,
+    config: {
+      type: "picture-entity",
+      entity: "camera.demo_camera",
+    },
   },
   {
     heading: "Person entity",
-    config: `
-- type: picture-entity
-  entity: person.paulus
-    `,
+    config: {
+      type: "picture-entity",
+      entity: "person.paulus",
+    },
   },
   {
     heading: "Hidden name",
-    config: `
-- type: picture-entity
-  image: /images/kitchen.png
-  entity: light.kitchen_lights
-  show_name: false
-    `,
+    config: {
+      type: "picture-entity",
+      image: "/images/kitchen.png",
+      entity: "light.kitchen_lights",
+      show_name: false,
+    },
   },
   {
     heading: "Hidden state",
-    config: `
-- type: picture-entity
-  image: /images/kitchen.png
-  entity: light.kitchen_lights
-  show_state: false
-    `,
+    config: {
+      type: "picture-entity",
+      image: "/images/kitchen.png",
+      entity: "light.kitchen_lights",
+      show_state: false,
+    },
   },
   {
     heading: "Both hidden",
-    config: `
-- type: picture-entity
-  image: /images/kitchen.png
-  entity: light.kitchen_lights
-  show_name: false
-  show_state: false
-    `,
+    config: {
+      type: "picture-entity",
+      image: "/images/kitchen.png",
+      entity: "light.kitchen_lights",
+      show_name: false,
+      show_state: false,
+    },
   },
-];
+] satisfies DemoCardConfig<PictureEntityCardConfig>[];
 
 @customElement("demo-lovelace-picture-entity-card")
 class DemoPictureEntity extends LitElement {