Cache resolved media source URLs for view backgrounds

* Animate the selected toggle circle in ha-icon-button-group

* Round the light color wheels to fit the selected ring

* Use lit motion

.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:

.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-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,7 +80,7 @@ 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.
 

.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.

.github/workflows/codeql-analysis.yaml

@@ -32,12 +32,12 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@7188fc363630916deb702c7fdcf4e481b751f97a # v4.37.1
+        uses: github/codeql-action/init@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
         with:
           languages: javascript-typescript
           build-mode: none
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@7188fc363630916deb702c7fdcf4e481b751f97a # v4.37.1
+        uses: github/codeql-action/analyze@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
         with:
           category: "/language:javascript-typescript"

.github/workflows/e2e.yaml

@@ -38,7 +38,7 @@ 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:
@@ -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:
@@ -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:
@@ -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:

.github/workflows/nightly.yaml

@@ -38,11 +38,29 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+          # The wheel only builds the app (build-app), which does not merge
+          # backend translations. Skipping the whole-project backend export (as
+          # the release does) keeps this off the build's critical path; the full
+          # translations artifact is produced in parallel by the job below.
+          SKIP_BACKEND_TRANSLATIONS: "1"
 
       - name: Bump version
         run: script/version_bump.js nightly
 
+      # Warm the shared compression cache so releases reuse it (see release.yaml).
+      - name: Restore compression cache
+        id: compress-cache
+        continue-on-error: true
+        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: .compress-cache
+          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+          restore-keys: |
+            compress-cache-${{ runner.os }}-
+
       - name: Build nightly Python wheels
+        env:
+          COMPRESS_CACHE_DIR: ${{ github.workspace }}/.compress-cache
         run: |
           pip install build
           yarn install
@@ -51,8 +69,15 @@ jobs:
           rm -rf dist home_assistant_frontend.egg-info
           python3 -m build
 
-      - name: Archive translations
-        run: tar -czvf translations.tar.gz translations
+      # Not gated on the restore step: a transient restore failure (it is
+      # continue-on-error) must not stop us persisting a freshly built cache.
+      - name: Save compression cache
+        if: success()
+        continue-on-error: true
+        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: .compress-cache
+          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
 
       - name: Upload build artifacts
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -61,6 +86,31 @@ jobs:
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
+  # The full translations (including the slow backend/core export) are only
+  # needed for the uploaded artifact, not the wheel, so they are downloaded in
+  # parallel here instead of blocking the build above.
+  translations:
+    name: Translations
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+        with:
+          immutable: false
+
+      - name: Download translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+
+      - name: Archive translations
+        run: tar -czvf translations.tar.gz translations
+
       - name: Upload translations
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

.github/workflows/release-drafter.yaml

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

.github/workflows/release.yaml

@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@e3fb68ebda13d88a0d695082f471ba2c83d025fb # master
+        uses: home-assistant/actions/helpers/verify-version@a7c616ce81ccda50150bf1595786c71b1883fabb # master
 
       - name: Setup Node and install
         uses: ./.github/actions/setup
@@ -48,15 +48,44 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+          # The app fetches core (backend) translations live from HA, so the
+          # release build does not need Lokalise's backend project.
+          SKIP_BACKEND_TRANSLATIONS: "1"
+
+      # Restore the content-addressed compression cache. Unchanged chunks and
+      # static assets are then reused instead of re-run through brotli/zopfli.
+      - name: Restore compression cache
+        id: compress-cache
+        continue-on-error: true
+        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: .compress-cache
+          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+          restore-keys: |
+            compress-cache-${{ runner.os }}-
 
       - name: Build and release package
+        env:
+          COMPRESS_CACHE_DIR: ${{ github.workspace }}/.compress-cache
         run: |
           python3 -m pip install build
           export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/release
 
+      # The build keeps the cache under its size budget, so saving stays bounded.
+      # A unique key always writes; restore-keys picks the newest on the next
+      # run. Not gated on the restore step: a transient restore failure (it is
+      # continue-on-error) must not stop us persisting a freshly built cache.
+      - name: Save compression cache
+        if: success()
+        continue-on-error: true
+        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: .compress-cache
+          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+
       - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@ba38be9e461d3875417946c167d0b5f3d385a247 # v1.14.1
+        uses: pypa/gh-action-pypi-publish@dc37677b2e1c63e2034f94d8a5b11f265b73ba33 # v1.14.2
         with:
           skip-existing: true
 
@@ -76,19 +105,21 @@ jobs:
           GITHUB_REF: ${{ github.ref }}
         run: |
           version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
-          # Wait for the package to become available on PyPI
-          echo "Waiting for home-assistant-frontend==$version to appear on PyPI..."
+          # Wait for the exact wheel to appear on the simple index (the surface
+          # the wheels build's pip uses). The JSON API can report a version as
+          # available before it propagates here, which fails the wheels build.
+          wheel="home_assistant_frontend-${version}-py3-none-any.whl"
+          echo "Waiting for $wheel to appear on the PyPI simple index..."
           for i in $(seq 1 30); do
-            status=$(curl -s -o /dev/null -w "%{http_code}" "https://pypi.org/pypi/home-assistant-frontend/$version/json")
-            if [ "$status" = "200" ]; then
-              echo "Package is available on PyPI!"
+            if curl -sf "https://pypi.org/simple/home-assistant-frontend/" | grep -qF "$wheel"; then
+              echo "Package is available on the PyPI simple index!"
               break
             fi
             if [ "$i" = "30" ]; then
               echo "Timed out waiting for package to appear on PyPI"
               exit 1
             fi
-            echo "Not available yet (HTTP $status), retrying in 30 seconds... ($i/30)"
+            echo "Not available yet, retrying in 30 seconds... ($i/30)"
             sleep 30
           done
           echo "home-assistant-frontend==$version" > ./requirements.txt
@@ -123,6 +154,8 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+          # The landing-page build does not merge backend translations.
+          SKIP_BACKEND_TRANSLATIONS: "1"
       - name: Build landing-page
         run: landing-page/script/build_landing_page
       - name: Tar folder

.github/workflows/stale.yaml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@1e223db275d687790206a7acac4d1a11bd6fe629 # v10.4.0
+        uses: actions/stale@4391f3da665fdf50b6810c1a66712fb9ba21aa93 # v11.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.gitignore

@@ -6,6 +6,7 @@ build/
 dist/
 /hass_frontend/
 /translations/
+/.compress-cache/
 # Composite action source, not build output
 !/.github/actions/build/
 

.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 the standalone demo — including how to open a specific demo configuration or page via URL — read `demo/AGENTS.md`.
-
 ## Essential Commands
 
 ```bash
@@ -42,11 +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,56 @@
+// 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, constants } from "node:zlib";
+import { withCache } from "./compress-cache.mjs";
+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 } = {}) => {
+  // Isolate cache entries by anything that changes the output bytes: the brotli
+  // quality, and the node major that produced them.
+  const quality = params?.[constants.BROTLI_PARAM_QUALITY] ?? "default";
+  const namespace = `brotli-q${quality}-node${process.versions.node.split(".")[0]}`;
+
+  return new ParallelTransform(availableParallelism(), async (file) => {
+    if (file.isNull()) {
+      return file;
+    }
+    if (file.isStream()) {
+      file.contents = await readStream(file.contents);
+    }
+
+    const compressed = await withCache(namespace, file.contents, async () => {
+      const out = await compress(file.contents, { params });
+      // Dropped rather than passed through, as gulp-brotli did: the
+      // uncompressed file is already in the output directory.
+      return skipLarger && out.length >= file.contents.length ? undefined : out;
+    });
+    if (compressed === undefined) {
+      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/bundle.cjs

@@ -311,7 +311,15 @@ module.exports.config = {
     return {
       name: "e2e-test-app" + nameSuffix(latestBuild),
       entry: {
+        dashboard: path.resolve(
+          paths.e2eTestApp_dir,
+          "src/dashboard-entrypoint.ts"
+        ),
         main: path.resolve(paths.e2eTestApp_dir, "src/entrypoint.ts"),
+        onboarding: path.resolve(
+          paths.e2eTestApp_dir,
+          "src/onboarding-entrypoint.ts"
+        ),
       },
       outputPath: outputPath(paths.e2eTestApp_output_root, latestBuild),
       publicPath: publicPath(latestBuild),

build-scripts/compress-cache.mjs

@@ -0,0 +1,212 @@
+// Content-addressed cache for compression output.
+//
+// brotli (quality 11) and zopfli are the slowest part of a production build,
+// and they redo every file from scratch on every run. But production chunks are
+// content-hashed in their filenames, so a chunk that didn't change produces
+// byte-identical input here. Keying the compressed output by a hash of the
+// input bytes lets an unchanged file skip compression entirely, and lets a
+// nightly build warm the cache a release reuses the next day.
+//
+// Disabled unless COMPRESS_CACHE_DIR points at a directory. Local builds set
+// nothing and behave exactly as before. The compressed bytes are unchanged
+// either way; only whether they were recomputed differs.
+
+import { createHash } from "node:crypto";
+import { existsSync } from "node:fs";
+import {
+  mkdir,
+  readFile,
+  readdir,
+  rename,
+  rm,
+  stat,
+  utimes,
+  writeFile,
+} from "node:fs/promises";
+import path from "node:path";
+
+const rootDir = process.env.COMPRESS_CACHE_DIR;
+export const cacheEnabled = Boolean(rootDir);
+
+// Total cache size to keep across builds, least-recently-used first when over.
+// The cache is shared between branches (a dev nightly warms it for a release,
+// which builds from rc/master), so pruning must NOT drop everything the current
+// build didn't touch — that would make each branch evict the other's
+// branch-specific files every run. Instead the current build is pinned and the
+// rest is kept up to this budget, so nothing is dropped unless the cache is
+// genuinely too large. Override with COMPRESS_CACHE_MAX_BYTES.
+const DEFAULT_MAX_BYTES = 1024 * 1024 * 1024; // 1 GiB
+const maxBytes = () => {
+  // A valid, explicit budget wins — including 0, which keeps only the current
+  // build (evict everything else). An unset or invalid value uses the default.
+  const configured = Number(process.env.COMPRESS_CACHE_MAX_BYTES);
+  return Number.isFinite(configured) && configured >= 0
+    ? configured
+    : DEFAULT_MAX_BYTES;
+};
+
+// Every cache key touched this build, hits and writes alike, so a prune can pin
+// the current dist and never evict a file this build depends on.
+const touched = new Set();
+
+// Per-namespace directory, created lazily and only once.
+const dirs = new Map();
+
+let tmpCounter = 0;
+
+const sha256 = (contents) =>
+  createHash("sha256").update(contents).digest("hex");
+
+const namespaceDir = (namespace) => {
+  let dir = dirs.get(namespace);
+  if (!dir) {
+    const dirPath = path.join(rootDir, namespace);
+    dir = { path: dirPath, ready: undefined };
+    dirs.set(namespace, dir);
+  }
+  return dir;
+};
+
+const ensureDir = (dir) => {
+  dir.ready ??= mkdir(dir.path, { recursive: true });
+  return dir.ready;
+};
+
+// Written via a unique temp file and renamed into place so a concurrent reader
+// in the same build never sees a half-written entry (rename is atomic on the
+// same filesystem).
+const writeAtomic = async (dir, name, contents) => {
+  await ensureDir(dir);
+  tmpCounter += 1;
+  const tmp = path.join(dir.path, `.${process.pid}-${tmpCounter}.tmp`);
+  const dest = path.join(dir.path, name);
+  await writeFile(tmp, contents);
+  try {
+    await rename(tmp, dest);
+  } catch (error) {
+    // Two files with identical contents can miss and write the same entry at
+    // once. On POSIX the rename just overwrites, but Windows rejects a rename
+    // onto an existing path. Either way the destination already holds the same
+    // bytes (content-addressed), so drop our temp and treat it as done.
+    if (existsSync(dest)) {
+      await rm(tmp, { force: true });
+    } else {
+      throw error;
+    }
+  }
+};
+
+/**
+ * Return the cached compression result for `contents`, or run `compute` and
+ * cache what it returns. `compute` resolves to a Buffer for compressed output,
+ * or `undefined` when the file should be dropped (brotli skipLarger); both
+ * outcomes are cached, so a dropped file is not recompressed on the next build.
+ *
+ * @param {string} namespace Isolates entries by algorithm, parameters and tool
+ *   version, so a change to any of them can never return a stale result.
+ * @param {Buffer} contents Uncompressed input bytes, used as the cache key.
+ * @param {() => Promise<Buffer | undefined>} compute Runs on a cache miss.
+ * @returns {Promise<Buffer | undefined>}
+ */
+export const withCache = async (namespace, contents, compute) => {
+  if (!cacheEnabled) {
+    return compute();
+  }
+
+  const dir = namespaceDir(namespace);
+  const hash = sha256(contents);
+  touched.add(`${namespace}/${hash}`);
+
+  const dataPath = path.join(dir.path, hash);
+  const dropName = `${hash}.drop`;
+
+  try {
+    return await readFile(dataPath);
+  } catch {
+    // Miss (or unreadable) — fall through and compute.
+  }
+  if (existsSync(path.join(dir.path, dropName))) {
+    return undefined;
+  }
+
+  const result = await compute();
+  if (result === undefined) {
+    await writeAtomic(dir, dropName, "");
+  } else {
+    await writeAtomic(dir, hash, result);
+  }
+  return result;
+};
+
+/**
+ * Keep the cache under `maxBytes`, evicting least-recently-used entries first.
+ * Files this build touched are always kept (and their timestamp refreshed, so
+ * shared files stay warm across branches); the remainder — including another
+ * branch's entries — is kept up to the budget. No-op when the cache is disabled
+ * or nothing was compressed, so it never wipes a warm cache on a build that
+ * skipped compression.
+ */
+export const pruneCache = async () => {
+  if (!cacheEnabled || touched.size === 0 || !existsSync(rootDir)) {
+    return;
+  }
+
+  const now = new Date();
+  const pinned = [];
+  const others = [];
+
+  // Scan every namespace on disk, not just the ones this build used, so entries
+  // from an old tool version (a different namespace) are eligible for eviction.
+  const namespaces = await readdir(rootDir, { withFileTypes: true });
+  await Promise.all(
+    namespaces.map(async (ns) => {
+      if (!ns.isDirectory()) {
+        return;
+      }
+      const nsDir = path.join(rootDir, ns.name);
+      const entries = await readdir(nsDir);
+      await Promise.all(
+        entries.map(async (entry) => {
+          const entryPath = path.join(nsDir, entry);
+          // Stray temp files from an interrupted write are never valid entries.
+          if (entry.endsWith(".tmp")) {
+            await rm(entryPath, { force: true });
+            return;
+          }
+          const hash = entry.endsWith(".drop") ? entry.slice(0, -5) : entry;
+          const info = await stat(entryPath);
+          if (touched.has(`${ns.name}/${hash}`)) {
+            pinned.push({ entryPath, size: info.size });
+          } else {
+            others.push({ entryPath, size: info.size, mtimeMs: info.mtimeMs });
+          }
+        })
+      );
+    })
+  );
+
+  // Pinned files stay and are refreshed so they rank as most-recently-used for
+  // future prunes; they always count against the budget first.
+  let kept = 0;
+  await Promise.all(
+    pinned.map(async ({ entryPath, size }) => {
+      kept += size;
+      // A failed timestamp refresh only affects future LRU ordering, not
+      // correctness, so it is safe to ignore.
+      await utimes(entryPath, now, now).catch(() => undefined);
+    })
+  );
+
+  // Keep the most-recently-used others until the budget is spent; drop the rest.
+  others.sort((a, b) => b.mtimeMs - a.mtimeMs);
+  const budget = maxBytes();
+  const toDelete = [];
+  for (const entry of others) {
+    if (kept + entry.size <= budget) {
+      kept += entry.size;
+    } else {
+      toDelete.push(entry.entryPath);
+    }
+  }
+  await Promise.all(toDelete.map((p) => rm(p, { force: true })));
+};

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",
@@ -47,6 +50,32 @@ gulp.task(
     "rspack-prod-app",
     gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
     // Don't compress running tests
+    ...(env.isTestBuild() || env.isStatsBuild()
+      ? []
+      : ["compress-app", "prune-compress-cache"])
+  )
+);
+
+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"])
   )
 );

build-scripts/gulp/compress.js

@@ -2,9 +2,10 @@
 
 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 { pruneCache } from "../compress-cache.mjs";
 import paths from "../paths.cjs";
+import zopfli from "../zopfli.mjs";
 
 const filesGlob = "*.{js,json,css,svg,xml}";
 const brotliOptions = {
@@ -57,3 +58,7 @@ gulp.task(
     compressAppOtherZopfli
   )
 );
+
+// Keep the compression cache under its size budget (LRU, this build pinned).
+// No-op unless COMPRESS_CACHE_DIR is set.
+gulp.task("prune-compress-cache", () => pruneCache());

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/download-translations.js

@@ -155,8 +155,22 @@ gulp.task("fetch-lokalise", async function () {
     fs.mkdir(inDirBackend, { recursive: true }),
   ]);
 
+  // The backend project only provides entity_component translations, which are
+  // merged into the demo, gallery, cast and e2e builds. The shipped app fetches
+  // them live from core, so builds that only produce the app (release, release
+  // landing-page) can skip this second, whole-project export to save time.
+  const projects = Object.entries(lokaliseProjects).filter(
+    ([project]) =>
+      !(project === "backend" && process.env.SKIP_BACKEND_TRANSLATIONS)
+  );
+  if (projects.length !== Object.keys(lokaliseProjects).length) {
+    console.log(
+      "Skipping backend translations download (SKIP_BACKEND_TRANSLATIONS)"
+    );
+  }
+
   await Promise.all(
-    Object.entries(lokaliseProjects).map(async ([project, projectId]) => {
+    projects.map(async ([project, projectId]) => {
       try {
         const exportProcess = await lokaliseApi
           .files()

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"],
@@ -278,7 +303,11 @@ gulp.task(
   )
 );
 
-const E2E_TEST_APP_PAGE_ENTRIES = { "index.html": ["main"] };
+const E2E_TEST_APP_PAGE_ENTRIES = {
+  "index.html": ["main"],
+  "dashboard.html": ["dashboard"],
+  "onboarding.html": ["onboarding"],
+};
 
 gulp.task(
   "gen-pages-e2e-test-app-dev",

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/merge-translations.js

@@ -0,0 +1,45 @@
+import merge from "lodash.merge";
+
+const isMergeableObject = (value) =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+// Keys that must never be written to, to avoid prototype pollution when the
+// overlay comes from an untrusted source (JSON.parse can produce an own
+// `__proto__` key from `{"__proto__": ...}`).
+const FORBIDDEN_KEYS = new Set(["__proto__", "constructor", "prototype"]);
+
+// Deep-merge `overlay` onto `base`, keeping only keys that already exist as own
+// properties of `base`. Overlay keys with no counterpart in the base - e.g.
+// translations for source strings that have since been removed from or renamed
+// in en.json but still linger in Lokalise - are dropped so we don't ship stale
+// keys. `base` is mutated and returned.
+export const restrictedMerge = (base, overlay) => {
+  for (const key of Object.keys(overlay)) {
+    // Own-property check (not `in`) so inherited keys like `__proto__` or
+    // `toString` from the overlay are ignored rather than merged.
+    if (FORBIDDEN_KEYS.has(key) || !Object.hasOwn(base, key)) {
+      continue;
+    }
+    const baseValue = base[key];
+    const overlayValue = overlay[key];
+    if (isMergeableObject(baseValue) && isMergeableObject(overlayValue)) {
+      restrictedMerge(baseValue, overlayValue);
+    } else if (
+      !isMergeableObject(baseValue) &&
+      !isMergeableObject(overlayValue)
+    ) {
+      base[key] = overlayValue;
+    }
+    // Mismatched shapes keep the base (English) value as a safe fallback.
+  }
+  return base;
+};
+
+// Merge translation `objects` onto `startObj`. When `prune` is set, the result
+// is restricted to the key shape of `startObj` (the English master), so keys
+// that no longer exist in en.json are not shipped. Otherwise keys are merged
+// additively (used when building the English master itself, which starts empty).
+export const mergeTranslations = (startObj, objects, prune = false) =>
+  prune
+    ? objects.reduce(restrictedMerge, startObj)
+    : merge(startObj, ...objects);

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,10 +1,7 @@
-/* eslint-disable max-classes-per-file */
-
 import { deleteAsync } from "del";
 import { glob } from "glob";
 import gulp from "gulp";
 import rename from "gulp-rename";
-import merge from "lodash.merge";
 import { createHash } from "node:crypto";
 import { mkdir, readFile } from "node:fs/promises";
 import { basename, join } from "node:path";
@@ -12,6 +9,7 @@ import { PassThrough, Transform } from "node:stream";
 import { finished } from "node:stream/promises";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
+import { mergeTranslations } from "./merge-translations.js";
 import "./fetch-nightly-translations.js";
 
 const inFrontendDir = "translations/frontend";
@@ -58,11 +56,12 @@ class CustomJSON extends Transform {
 class MergeJSON extends Transform {
   _objects = [];
 
-  constructor(stem, startObj = {}, reviver = null) {
+  constructor(stem, startObj = {}, reviver = null, prune = false) {
     super({ objectMode: true, allowHalfOpen: false });
     this._stem = stem;
     this._startObj = structuredClone(startObj);
     this._reviver = reviver;
+    this._prune = prune;
   }
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -74,7 +73,11 @@ class MergeJSON extends Transform {
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
   async _flush(callback) {
-    const mergedObj = merge(this._startObj, ...this._objects);
+    const mergedObj = mergeTranslations(
+      this._startObj,
+      this._objects,
+      this._prune
+    );
     this._outFile.contents = Buffer.from(JSON.stringify(mergedObj));
     this._outFile.stem = this._stem;
     callback(null, this._outFile);
@@ -259,7 +262,7 @@ const createTranslations = async () => {
     }
     const mergeStream = gulp
       .src(mergeFiles, { allowEmpty: true })
-      .pipe(new MergeJSON(locale, enMaster, emptyReviver));
+      .pipe(new MergeJSON(locale, enMaster, emptyReviver, true));
     mergesFinished.push(finished(mergeStream));
     mergeStream.pipe(hashStream, { end: false });
   }

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,148 @@
+// 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 { createRequire } from "node:module";
+import { availableParallelism } from "node:os";
+import { buffer as readStream } from "node:stream/consumers";
+import { Worker } from "node:worker_threads";
+import { withCache } from "./compress-cache.mjs";
+import { ParallelTransform } from "./parallel-transform.mjs";
+
+const WORKER_URL = new URL("./zopfli-worker.mjs", import.meta.url);
+const EXTENSION = ".gz";
+
+// Cache namespace tied to the zopfli version, since a different version can
+// produce different bytes for the same input.
+const ZOPFLI_VERSION = createRequire(import.meta.url)(
+  "@gfx/zopfli/package.json"
+).version;
+const NAMESPACE = `gzip-zopfli${ZOPFLI_VERSION}`;
+
+// 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 withCache(NAMESPACE, file.contents, () =>
+      compress(file.contents)
+    );
+    file.path += EXTENSION;
+    return file;
+  });
+};

demo/AGENTS.md

@@ -1,46 +0,0 @@
-# Demo Agent Instructions
-
-This file applies to all files under `demo/`. Follow the root `AGENTS.md` for repository-wide standards.
-
-The demo is the full Home Assistant frontend running against a mocked backend (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 from the repository root:
-
-```bash
-yarn dev:demo               # dev server on http://localhost:8090
-yarn dev:demo --background  # detached; also supports --status/--stop/--logs
-```
-
-## Opening a specific demo
-
-The demo contains multiple demo configurations. Select one directly with the `demo` query parameter, e.g. `http://localhost:8090/?demo=<slug>`. The valid slugs are defined in `demoConfigs` in `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 (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:
-
-```
-http://localhost:8090/?demo=<slug>#/<path>
-```
-
-Useful paths:
-
-- `/lovelace/0` — the selected demo's dashboard (also the default when no hash is given)
-- `/energy` — energy dashboard. Its tabs are views: `/energy/overview` (Summary), `/energy/electricity`, `/energy/gas`, `/energy/water`, `/energy/now`
-- `/map`, `/history`, `/todo`, `/config` — other sidebar panels
-
-Example — the water tab of the energy dashboard of the second demo:
-
-```
-http://localhost:8090/?demo=<second slug>#/energy/water
-```
-
-## Structure
-
-- `src/ha-demo.ts`: Root element; sets up all backend mocks.
-- `src/configs/<slug>/`: One directory per demo configuration (entities, dashboard, theme).
-- `src/configs/demo-configs.ts`: Registry of demo configurations and URL slug handling.
-- `src/stubs/`: Mocked WebSocket/REST APIs.
-- `script/develop_demo`, `script/build_demo`: Dev server and static build wrappers.

demo/CLAUDE.md

@@ -1 +0,0 @@
-AGENTS.md

demo/src/cloud/cloud-demo-controls.ts

@@ -1,304 +0,0 @@
-import { mdiClose, mdiFlaskOutline } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import { mainWindow } from "../../../src/common/dom/get_main_window";
-import { navigate } from "../../../src/common/navigate";
-import "../../../src/components/ha-button";
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-icon-button";
-import "../../../src/components/ha-svg-icon";
-import "../../../src/components/ha-switch";
-import type { HaSwitch } from "../../../src/components/ha-switch";
-import type { CloudDemoScenario } from "../stubs/cloud-demo-state";
-import {
-  getCloudDemoScenario,
-  setCloudDemoScenario,
-  subscribeCloudDemoScenario,
-} from "../stubs/cloud-demo-state";
-
-// Walk the DOM, descending into shadow roots, to find the first matching
-// element. Used to reach <ha-panel-config> (which owns the cloud status) so we
-// can ask it to re-fetch after a scenario change.
-const deepQuery = (
-  selector: string,
-  root: Document | ShadowRoot = document
-): Element | null => {
-  const direct = root.querySelector(selector);
-  if (direct) {
-    return direct;
-  }
-  const elements = root.querySelectorAll("*");
-  for (const element of elements) {
-    const shadow = element.shadowRoot;
-    if (shadow) {
-      const found = deepQuery(selector, shadow);
-      if (found) {
-        return found;
-      }
-    }
-  }
-  return null;
-};
-
-/**
- * Demo-only floating panel that flips the mocked Home Assistant Cloud state so
- * reviewers can preview every UI state of the cloud account page. It writes to
- * the shared {@link CloudDemoScenario} (which the cloud/backup mocks read) and
- * then nudges the page to re-read it. Lives entirely under demo/.
- */
-@customElement("cloud-demo-controls")
-export class CloudDemoControls extends LitElement {
-  @state() private _open = true;
-
-  @state() private _visible = false;
-
-  @state() private _scenario: CloudDemoScenario = getCloudDemoScenario();
-
-  private _unsub?: () => void;
-
-  // The demo uses hash-based routing (navigate() sets location.hash), so the
-  // active route lives in the hash, not the pathname.
-  private get _currentPath(): string {
-    const hash = mainWindow.location.hash;
-    return hash.startsWith("#/") ? hash.slice(1) : mainWindow.location.pathname;
-  }
-
-  private _locationChanged = () => {
-    this._visible = this._currentPath.startsWith("/config/cloud");
-  };
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._locationChanged();
-    mainWindow.addEventListener("location-changed", this._locationChanged);
-    mainWindow.addEventListener("popstate", this._locationChanged);
-    mainWindow.addEventListener("hashchange", this._locationChanged);
-    this._unsub = subscribeCloudDemoScenario((scenario) => {
-      this._scenario = { ...scenario };
-    });
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    mainWindow.removeEventListener("location-changed", this._locationChanged);
-    mainWindow.removeEventListener("popstate", this._locationChanged);
-    mainWindow.removeEventListener("hashchange", this._locationChanged);
-    this._unsub?.();
-  }
-
-  protected render() {
-    if (!this._visible) {
-      return nothing;
-    }
-    if (!this._open) {
-      return html`
-        <ha-icon-button
-          class="fab"
-          label="Cloud demo controls"
-          .path=${mdiFlaskOutline}
-          @click=${this._toggleOpen}
-        ></ha-icon-button>
-      `;
-    }
-    return html`
-      <ha-card>
-        <div class="header">
-          <ha-svg-icon .path=${mdiFlaskOutline}></ha-svg-icon>
-          <span class="title">Cloud demo controls</span>
-          <ha-icon-button
-            label="Close"
-            .path=${mdiClose}
-            @click=${this._toggleOpen}
-          ></ha-icon-button>
-        </div>
-        <p class="note">
-          Demo only. Flips the mocked cloud state shown on this page.
-        </p>
-        <div class="controls">
-          ${this._segment("Subscription", "account", [
-            ["active", "Active"],
-            ["trialing", "Trialing"],
-            ["canceled", "Canceled"],
-            ["expired", "Expired"],
-            ["unknown", "Unknown"],
-          ])}
-          ${this._toggle("Onboarded", "onboarded")}
-          ${this._toggle("Onboarding postponed", "postponed")}
-          ${this._toggle("Remote access", "remote")}
-          ${this._segment("Remote status", "remoteStatus", [
-            ["ready", "Ready"],
-            ["generating", "Preparing"],
-            ["loading", "Loading"],
-            ["loaded", "Loaded"],
-            ["error", "Error"],
-          ])}
-          ${this._segment("Backups", "backup", [
-            ["fresh", "Recent"],
-            ["stale", "Old"],
-            ["failed", "Failed"],
-            ["local", "Local only"],
-            ["none", "None"],
-          ])}
-          ${this._toggle("Alexa linked", "alexa")}
-          ${this._toggle("Google linked", "google")}
-          ${this._toggle("Cameras (WebRTC)", "webrtc")}
-          ${this._toggle("Has webhooks", "webhooks")}
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _segment(
-    label: string,
-    field: keyof CloudDemoScenario,
-    options: [string, string][]
-  ) {
-    return html`
-      <div class="row">
-        <span>${label}</span>
-        <div class="segment">
-          ${options.map(
-            ([value, text]) => html`
-              <ha-button
-                size="s"
-                appearance=${
-                  this._scenario[field] === value ? "filled" : "plain"
-                }
-                data-field=${field}
-                data-value=${value}
-                @click=${this._segmentClick}
-              >
-                ${text}
-              </ha-button>
-            `
-          )}
-        </div>
-      </div>
-    `;
-  }
-
-  private _toggle(label: string, field: keyof CloudDemoScenario) {
-    return html`
-      <div class="row">
-        <span>${label}</span>
-        <ha-switch
-          .checked=${this._scenario[field] as boolean}
-          data-field=${field}
-          @change=${this._toggleChange}
-        ></ha-switch>
-      </div>
-    `;
-  }
-
-  private _toggleOpen() {
-    this._open = !this._open;
-  }
-
-  private _segmentClick(ev: Event) {
-    const target = ev.currentTarget as HTMLElement;
-    this._set(
-      target.dataset.field as keyof CloudDemoScenario,
-      target.dataset.value!
-    );
-  }
-
-  private _toggleChange(ev: Event) {
-    const target = ev.target as HaSwitch;
-    this._set(target.dataset.field as keyof CloudDemoScenario, target.checked);
-  }
-
-  private _set(field: keyof CloudDemoScenario, value: string | boolean) {
-    setCloudDemoScenario({ [field]: value } as Partial<CloudDemoScenario>);
-    this._refresh();
-  }
-
-  private _refresh() {
-    // Refresh the shared cloud status so login-state changes (signed out) and
-    // status-derived fields update.
-    const panel = deepQuery("ha-panel-config");
-    if (panel) {
-      fireEvent(panel as HTMLElement, "ha-refresh-cloud-status");
-    }
-    // cloud-account fetches its subscription/backup/webhook data once on mount
-    // and is not cached by the router, so bounce through a sibling cloud route
-    // to force a clean remount that re-reads the updated mocks.
-    const path = this._currentPath;
-    if (path.startsWith("/config/cloud") && path !== "/config/cloud/login") {
-      const sibling =
-        path === "/config/cloud/remote"
-          ? "/config/cloud/account"
-          : "/config/cloud/remote";
-      navigate(sibling, { replace: true });
-      window.setTimeout(() => navigate(path, { replace: true }), 0);
-    }
-  }
-
-  static styles = css`
-    :host {
-      position: fixed;
-      right: 16px;
-      bottom: 16px;
-      z-index: 9999;
-    }
-    .fab {
-      --mdc-icon-button-size: 48px;
-      --mdc-icon-size: 24px;
-      background-color: var(--primary-color);
-      color: var(--text-primary-color, #fff);
-      border-radius: 50%;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    }
-    ha-card {
-      display: block;
-      width: 320px;
-      max-height: 80vh;
-      overflow: auto;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-    }
-    .header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 8px 8px 16px;
-      border-bottom: 1px solid var(--divider-color);
-    }
-    .header .title {
-      flex: 1;
-      font-weight: var(--ha-font-weight-medium, 500);
-    }
-    .header ha-svg-icon {
-      color: var(--secondary-text-color);
-    }
-    .note {
-      margin: 8px 16px;
-      color: var(--secondary-text-color);
-      font-size: var(--ha-font-size-s, 0.875rem);
-    }
-    .controls {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 0 16px 16px;
-    }
-    .row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      min-height: 36px;
-    }
-    .segment {
-      display: flex;
-      gap: 4px;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "cloud-demo-controls": CloudDemoControls;
-  }
-}

demo/src/ha-demo.ts

@@ -16,6 +16,8 @@ import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 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";
@@ -30,7 +32,6 @@ 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
 // config-panel chunk (see ./stubs/config-panel). Must stay in sync with it.
@@ -57,6 +58,8 @@ const CONFIG_PANEL_COMMANDS = [
   "search/related",
   "tag/list",
   "assist_pipeline/",
+  "config/entity_registry/settings/",
+  "slugify",
 ];
 
 @customElement("ha-demo")
@@ -73,10 +76,6 @@ 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. usage_prediction
-    // is needed for common-controls sections in strategy dashboards.
     hass.updateHass({
       config: {
         ...hass.config,
@@ -86,15 +85,12 @@ export class HaDemo extends HomeAssistantAppEl {
           "webhook",
           "usage_prediction",
           "assist_pipeline",
+          "hassio",
+          "hardware",
         ],
       },
     });
 
-    // Demo-only floating panel to flip the mocked cloud state. Mounted once at
-    // the document level; it shows itself only on the cloud panel.
-    if (!document.querySelector("cloud-demo-controls")) {
-      document.body.appendChild(document.createElement("cloud-demo-controls"));
-    }
     const localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(
@@ -113,6 +109,8 @@ export class HaDemo extends HomeAssistantAppEl {
     mockEvents(hass);
     mockMediaPlayer(hass);
     mockFrontend(hass);
+    mockHardware(hass);
+    mockHassioSupervisor(hass);
     mockIcons(hass);
     mockEnergy(hass);
     mockPersistentNotification(hass);

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/backup.ts

@@ -7,31 +7,43 @@ import type {
 import { BackupScheduleRecurrence } from "../../../src/data/backup";
 import type { ManagerStateEvent } from "../../../src/data/backup_manager";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import type { DemoCloudBackup } from "./cloud-demo-state";
-import {
-  getCloudDemoScenario,
-  setCloudDemoScenario,
-  subscribeCloudDemoScenario,
-} from "./cloud-demo-state";
 
 const CLOUD_AGENT = "cloud.cloud";
 
+// Fixed "recent" backup state: an automatic backup completed 12h ago to both the
+// local and cloud agents, with the next run scheduled for tomorrow. This is the
+// healthy state the cloud overview status line and backup sub-page render.
+const now = Date.now();
+const recent = new Date(now - 12 * 3600 * 1000).toISOString();
+const future = new Date(now + 86400000).toISOString();
+
 const backupInfo: BackupInfo = {
-  backups: [],
+  backups: [
+    {
+      backup_id: "demo-backup-1",
+      name: "Automatic backup DEMO",
+      date: recent,
+      with_automatic_settings: true,
+      agents: {
+        "backup.local": { size: 1024 * 1024 * 512, protected: true },
+        "cloud.cloud": { size: 1024 * 1024 * 512, protected: true },
+      },
+    } as BackupContent,
+  ],
   agent_errors: {},
-  last_attempted_automatic_backup: null,
-  last_completed_automatic_backup: null,
+  last_attempted_automatic_backup: recent,
+  last_completed_automatic_backup: recent,
   last_action_event: { manager_state: "idle" },
-  next_automatic_backup: null,
+  next_automatic_backup: future,
   next_automatic_backup_additional: false,
   state: "idle",
 };
 
 const backupConfig: BackupConfig = {
   automatic_backups_configured: true,
-  last_attempted_automatic_backup: null,
-  last_completed_automatic_backup: null,
-  next_automatic_backup: null,
+  last_attempted_automatic_backup: recent,
+  last_completed_automatic_backup: recent,
+  next_automatic_backup: future,
   next_automatic_backup_additional: false,
   create_backup: {
     agent_ids: ["backup.local", CLOUD_AGENT],
@@ -61,88 +73,6 @@ const agentsInfo: BackupAgentsInfo = {
   ],
 };
 
-// Map the demo "Backups" scenario onto the mutable backup config/info, so the
-// cloud overview status line and the backup sub-page reflect the chosen state.
-const applyScenario = () => {
-  const kind = getCloudDemoScenario().backup;
-  const now = Date.now();
-  const recent = new Date(now - 12 * 3600 * 1000).toISOString();
-  const old = new Date(now - 5 * 86400000).toISOString();
-  const future = new Date(now + 86400000).toISOString();
-  // Comfortably past BACKUP_OVERDUE_MARGIN_HOURS (3h) so the "stale" scenario
-  // actually reads as overdue rather than slipping under the margin.
-  const overdue = new Date(now - 6 * 3600 * 1000).toISOString();
-
-  // The cloud agent is a backup target for the cloud-backed states only. For
-  // "local" a backup exists but is stored locally (no cloud copy), and for
-  // "none" there are no automatic backups at all.
-  const cloudEnabled =
-    kind === "fresh" || kind === "stale" || kind === "failed";
-  backupConfig.create_backup.agent_ids = cloudEnabled
-    ? ["backup.local", CLOUD_AGENT]
-    : ["backup.local"];
-
-  switch (kind) {
-    case "fresh":
-      backupConfig.automatic_backups_configured = true;
-      backupConfig.last_completed_automatic_backup = recent;
-      backupConfig.last_attempted_automatic_backup = recent;
-      backupConfig.next_automatic_backup = future;
-      break;
-    case "local":
-      // Automatic backups run, but only to the local agent.
-      backupConfig.automatic_backups_configured = true;
-      backupConfig.last_completed_automatic_backup = recent;
-      backupConfig.last_attempted_automatic_backup = recent;
-      backupConfig.next_automatic_backup = future;
-      break;
-    case "stale":
-      backupConfig.automatic_backups_configured = true;
-      backupConfig.last_completed_automatic_backup = old;
-      backupConfig.last_attempted_automatic_backup = old;
-      // Next scheduled backup is in the past, so it reads as overdue.
-      backupConfig.next_automatic_backup = overdue;
-      break;
-    case "failed":
-      backupConfig.automatic_backups_configured = true;
-      backupConfig.last_completed_automatic_backup = old;
-      // Most recent attempt is newer than the last success, so it failed.
-      backupConfig.last_attempted_automatic_backup = recent;
-      backupConfig.next_automatic_backup = future;
-      break;
-    case "none":
-      backupConfig.automatic_backups_configured = false;
-      backupConfig.last_completed_automatic_backup = null;
-      backupConfig.last_attempted_automatic_backup = null;
-      backupConfig.next_automatic_backup = null;
-      break;
-  }
-
-  backupInfo.last_completed_automatic_backup =
-    backupConfig.last_completed_automatic_backup;
-  backupInfo.last_attempted_automatic_backup =
-    backupConfig.last_attempted_automatic_backup;
-  backupInfo.next_automatic_backup = backupConfig.next_automatic_backup;
-  backupInfo.backups =
-    cloudEnabled && backupConfig.last_completed_automatic_backup
-      ? [
-          {
-            backup_id: "demo-backup-1",
-            name: "Automatic backup DEMO",
-            date: backupConfig.last_completed_automatic_backup,
-            with_automatic_settings: true,
-            agents: {
-              "backup.local": { size: 1024 * 1024 * 512, protected: true },
-              "cloud.cloud": { size: 1024 * 1024 * 512, protected: true },
-            },
-          } as BackupContent,
-        ]
-      : [];
-};
-
-applyScenario();
-subscribeCloudDemoScenario(applyScenario);
-
 export const mockBackup = (hass: MockHomeAssistant) => {
   // Fresh objects each fetch so re-reading after a mutation actually re-renders
   // (Lit change detection is identity-based; the real WS API returns new
@@ -171,20 +101,6 @@ export const mockBackup = (hass: MockHomeAssistant) => {
     if (update.agents) {
       backupConfig.agents = { ...backupConfig.agents, ...update.agents };
     }
-    // Reflect the UI-driven backup change into the demo scenario so the demo
-    // controls panel stays in sync with the mocked state.
-    const cloudNow = backupConfig.create_backup.agent_ids.includes(CLOUD_AGENT);
-    const current = getCloudDemoScenario().backup;
-    const next: DemoCloudBackup = !backupConfig.automatic_backups_configured
-      ? "none"
-      : cloudNow
-        ? current === "fresh" || current === "stale" || current === "failed"
-          ? current
-          : "fresh"
-        : "local";
-    if (next !== current) {
-      setCloudDemoScenario({ backup: next });
-    }
     return null;
   });
   hass.mockWS(

demo/src/stubs/cloud-demo-state.ts

@@ -1,89 +0,0 @@
-// Demo-only switchable Home Assistant Cloud scenario.
-//
-// The redesigned cloud account page (src/panels/config/cloud/account) renders
-// purely from real WS data. To let reviewers preview every UI state without a
-// real cloud account, this module holds a mutable "scenario" that the cloud and
-// backup mocks read from, plus the floating <cloud-demo-controls> panel writes
-// to. It is persisted to localStorage so the choice survives the data the page
-// fetches once per visit (subscription, backup config, webhooks).
-//
-// This lives entirely under demo/ — no production code imports it.
-
-import type { RemoteCertificateStatus } from "../../../src/data/cloud";
-
-// The five PaymentSubscriptionState values.
-export type DemoCloudAccount =
-  "active" | "trialing" | "canceled" | "expired" | "unknown";
-
-// "local": automatic backups are configured, but not to the cloud agent
-// (a backup exists, just no cloud copy). "none": no automatic backups at all.
-export type DemoCloudBackup = "fresh" | "stale" | "failed" | "local" | "none";
-
-export interface CloudDemoScenario {
-  account: DemoCloudAccount;
-  onboarded: boolean;
-  // Onboarding postponed server-side (maps to onboarding_postponed); hides
-  // the onboarding UI without marking it completed.
-  postponed: boolean;
-  remote: boolean;
-  remoteStatus: RemoteCertificateStatus;
-  backup: DemoCloudBackup;
-  alexa: boolean;
-  google: boolean;
-  webrtc: boolean;
-  webhooks: boolean;
-}
-
-export const DEFAULT_CLOUD_DEMO_SCENARIO: CloudDemoScenario = {
-  account: "active",
-  onboarded: true,
-  postponed: false,
-  remote: true,
-  remoteStatus: "ready",
-  backup: "fresh",
-  alexa: true,
-  google: true,
-  webrtc: true,
-  webhooks: true,
-};
-
-const STORAGE_KEY = "cloudDemoScenario";
-
-const readScenario = (): CloudDemoScenario => {
-  try {
-    const raw = window.localStorage.getItem(STORAGE_KEY);
-    if (raw) {
-      return { ...DEFAULT_CLOUD_DEMO_SCENARIO, ...JSON.parse(raw) };
-    }
-  } catch (_err) {
-    // Ignore malformed or unavailable storage and fall back to the default.
-  }
-  return { ...DEFAULT_CLOUD_DEMO_SCENARIO };
-};
-
-let scenario: CloudDemoScenario = readScenario();
-
-const listeners = new Set<(scenario: CloudDemoScenario) => void>();
-
-export const getCloudDemoScenario = (): CloudDemoScenario => scenario;
-
-export const subscribeCloudDemoScenario = (
-  listener: (scenario: CloudDemoScenario) => void
-): (() => void) => {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-};
-
-export const setCloudDemoScenario = (
-  partial: Partial<CloudDemoScenario>
-): void => {
-  scenario = { ...scenario, ...partial };
-  try {
-    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(scenario));
-  } catch (_err) {
-    // Ignore storage failures (e.g. private mode); state still applies in-memory.
-  }
-  listeners.forEach((listener) => listener(scenario));
-};

demo/src/stubs/cloud.ts

@@ -6,11 +6,6 @@ import { ONBOARDING_ITEMS } from "../../../src/data/cloud";
 import type { CloudTTSInfo } from "../../../src/data/cloud/tts";
 import type { Webhook } from "../../../src/data/webhook";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import {
-  getCloudDemoScenario,
-  setCloudDemoScenario,
-  subscribeCloudDemoScenario,
-} from "./cloud-demo-state";
 
 const emptyFilter = () => ({
   include_domains: [],
@@ -34,14 +29,30 @@ const demoWebhooks: Webhook[] = [
   },
 ];
 
-// A single mutable status object so that preference changes made in the demo
-// (both via the real UI and the demo scenario controls) are reflected back.
+const demoCloudhooks = Object.fromEntries(
+  demoWebhooks.map((webhook) => [
+    webhook.webhook_id,
+    {
+      webhook_id: webhook.webhook_id,
+      cloudhook_id: `demo-${webhook.webhook_id}`,
+      cloudhook_url: `https://hooks.nabu.casa/demo-${webhook.webhook_id}`,
+      managed: false,
+    },
+  ])
+);
+
+// A single mutable status object seeded to one fixed demo state: an active cloud
+// subscription with remote ready, cloud backups recent, webhooks set up and voice
+// set up (Alexa linked), but cameras (WebRTC) off, so onboarding is still in
+// progress (streaming is the remaining step) and not postponed. Page-driven
+// changes (connect remote, postpone onboarding, add/delete webhooks) mutate this
+// object directly and reset on reload.
 const cloudStatus: CloudStatusLoggedIn = {
   logged_in: true,
   cloud: "connected",
   cloud_last_disconnect_reason: null,
   email: "[email protected]",
-  google_registered: true,
+  google_registered: false,
   google_entities: emptyFilter(),
   google_domains: ["light", "switch", "climate", "cover"],
   alexa_registered: true,
@@ -58,20 +69,20 @@ const cloudStatus: CloudStatusLoggedIn = {
   http_use_ssl: false,
   active_subscription: true,
   onboarding_postponed: false,
-  onboarding_completed: true,
+  onboarding_completed: false,
   prefs: {
-    google_enabled: true,
+    google_enabled: false,
     alexa_enabled: true,
     remote_enabled: true,
     remote_allow_remote_enable: true,
     strict_connection: "disabled",
     google_secure_devices_pin: undefined,
-    cloudhooks: {},
+    cloudhooks: demoCloudhooks,
     alexa_report_state: true,
     google_report_state: true,
     tts_default_voice: ["en-US", "JennyNeural"],
-    cloud_ice_servers_enabled: true,
-    onboarded_items: [...ONBOARDING_ITEMS],
+    cloud_ice_servers_enabled: false,
+    onboarded_items: [],
     onboarding_postponed_until: null,
   },
 };
@@ -93,94 +104,6 @@ const ttsInfo: CloudTTSInfo = {
   ],
 };
 
-// Map the high-level demo scenario onto the mutable cloud status / subscription.
-const applyScenario = () => {
-  const scenario = getCloudDemoScenario();
-
-  switch (scenario.account) {
-    case "trialing":
-      cloudStatus.active_subscription = true;
-      subscription.subscription = { status: "trialing" };
-      break;
-    case "canceled":
-      cloudStatus.active_subscription = false;
-      subscription.subscription = { status: "canceled" };
-      break;
-    case "expired":
-      cloudStatus.active_subscription = false;
-      subscription.subscription = { status: "expired" };
-      break;
-    case "unknown":
-      cloudStatus.active_subscription = true;
-      subscription.subscription = { status: "unknown" };
-      break;
-    default:
-      // "active"
-      cloudStatus.active_subscription = true;
-      subscription.subscription = { status: "active" };
-  }
-
-  cloudStatus.prefs.onboarded_items = scenario.onboarded
-    ? [...ONBOARDING_ITEMS]
-    : [];
-  cloudStatus.onboarding_completed = scenario.onboarded;
-  cloudStatus.onboarding_postponed = scenario.postponed;
-  cloudStatus.prefs.onboarding_postponed_until = scenario.postponed
-    ? new Date(Date.now() + 24 * 3600 * 1000).toISOString()
-    : null;
-  cloudStatus.prefs.remote_enabled = scenario.remote;
-  cloudStatus.remote_connected = scenario.remote;
-  cloudStatus.remote_certificate_status = scenario.remoteStatus;
-  cloudStatus.alexa_registered = scenario.alexa;
-  cloudStatus.google_registered = scenario.google;
-  cloudStatus.prefs.cloud_ice_servers_enabled = scenario.webrtc;
-
-  const hasCloudhooks = Object.keys(cloudStatus.prefs.cloudhooks).length > 0;
-  if (scenario.webhooks && !hasCloudhooks) {
-    cloudStatus.prefs.cloudhooks = Object.fromEntries(
-      demoWebhooks.map((webhook) => [
-        webhook.webhook_id,
-        {
-          webhook_id: webhook.webhook_id,
-          cloudhook_id: `demo-${webhook.webhook_id}`,
-          cloudhook_url: `https://hooks.nabu.casa/demo-${webhook.webhook_id}`,
-          managed: false,
-        },
-      ])
-    );
-  } else if (!scenario.webhooks && hasCloudhooks) {
-    cloudStatus.prefs.cloudhooks = {};
-  }
-};
-
-applyScenario();
-subscribeCloudDemoScenario(applyScenario);
-
-// Reflect UI-driven changes (onboarding toggles, remote connect/disconnect)
-// back into the demo scenario so the demo controls panel stays in sync with the
-// mocked state. Only writes when a value actually changed, to avoid needless
-// re-projection. `applyScenario` re-applies the (now matching) scenario, so
-// this stays idempotent and does not fight the direct mutation above.
-const syncScenarioFromStatus = () => {
-  const scenario = getCloudDemoScenario();
-  const next = {
-    onboarded: cloudStatus.onboarding_completed,
-    postponed: cloudStatus.onboarding_postponed,
-    remote: cloudStatus.prefs.remote_enabled,
-    webrtc: cloudStatus.prefs.cloud_ice_servers_enabled,
-    webhooks: Object.keys(cloudStatus.prefs.cloudhooks).length > 0,
-  };
-  if (
-    scenario.onboarded !== next.onboarded ||
-    scenario.postponed !== next.postponed ||
-    scenario.remote !== next.remote ||
-    scenario.webrtc !== next.webrtc ||
-    scenario.webhooks !== next.webhooks
-  ) {
-    setCloudDemoScenario(next);
-  }
-};
-
 export const mockCloud = (hass: MockHomeAssistant) => {
   hass.mockWS("cloud/status", () => ({
     ...cloudStatus,
@@ -193,7 +116,6 @@ export const mockCloud = (hass: MockHomeAssistant) => {
   hass.mockWS("cloud/update_prefs", (msg) => {
     const { type, ...prefs } = msg;
     cloudStatus.prefs = { ...cloudStatus.prefs, ...prefs };
-    syncScenarioFromStatus();
     return { success: true };
   });
 
@@ -202,7 +124,6 @@ export const mockCloud = (hass: MockHomeAssistant) => {
       Date.now() + 24 * 3600 * 1000
     ).toISOString();
     cloudStatus.onboarding_postponed = true;
-    syncScenarioFromStatus();
     // Backend returns the full logged-in status object.
     return { ...cloudStatus, prefs: { ...cloudStatus.prefs } };
   });
@@ -222,7 +143,6 @@ export const mockCloud = (hass: MockHomeAssistant) => {
       (onboardingItem) =>
         cloudStatus.prefs.onboarded_items.includes(onboardingItem)
     );
-    syncScenarioFromStatus();
     // Backend returns the full logged-in status object.
     return { ...cloudStatus, prefs: { ...cloudStatus.prefs } };
   });
@@ -245,20 +165,17 @@ export const mockCloud = (hass: MockHomeAssistant) => {
     const cloudhooks = { ...cloudStatus.prefs.cloudhooks };
     delete cloudhooks[msg.webhook_id];
     cloudStatus.prefs.cloudhooks = cloudhooks;
-    syncScenarioFromStatus();
     return null;
   });
 
   hass.mockWS("cloud/remote/connect", () => {
     cloudStatus.remote_connected = true;
     cloudStatus.prefs.remote_enabled = true;
-    syncScenarioFromStatus();
     return null;
   });
   hass.mockWS("cloud/remote/disconnect", () => {
     cloudStatus.remote_connected = false;
     cloudStatus.prefs.remote_enabled = false;
-    syncScenarioFromStatus();
     return null;
   });
 

demo/src/stubs/config-panel.ts

@@ -8,12 +8,14 @@ import { mockCloud } from "./cloud";
 import { mockConfig } from "./config";
 import { mockConfigEntries } from "./config_entries";
 import { mockDeviceAutomation } from "./device_automation";
+import { mockEntityRegistrySettings } from "./entity_registry_settings";
 import { mockEntitySources } from "./entity_sources";
 import { mockExpose } from "./expose";
 import { mockNetwork } from "./network";
 import { mockPerson } from "./person";
 import { mockScene } from "./scene";
 import { mockSearch } from "./search";
+import { mockSlugify } from "./slugify";
 import { mockSystemHealth } from "./system_health";
 import { mockTags } from "./tags";
 import { mockZone } from "./zone";
@@ -39,4 +41,6 @@ export const mockConfigPanel = (hass: MockHomeAssistant) => {
   mockSearch(hass);
   mockTags(hass);
   mockAssist(hass);
+  mockEntityRegistrySettings(hass);
+  mockSlugify(hass);
 };

demo/src/stubs/entity_registry_settings.ts

@@ -0,0 +1,22 @@
+import type {
+  EntityRegistrySettings,
+  fetchEntityRegistrySettings,
+  updateEntityRegistrySettings,
+} from "../../../src/data/entity/entity_registry_settings";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockEntityRegistrySettings = (hass: MockHomeAssistant) => {
+  let settings: EntityRegistrySettings = { entity_id_parts: null };
+
+  hass.mockWS<typeof fetchEntityRegistrySettings>(
+    "config/entity_registry/settings/get",
+    () => settings
+  );
+  hass.mockWS<typeof updateEntityRegistrySettings>(
+    "config/entity_registry/settings/update",
+    (msg: Partial<EntityRegistrySettings>) => {
+      settings = { ...settings, ...msg };
+      return settings;
+    }
+  );
+};

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/slugify.ts

@@ -0,0 +1,9 @@
+import { slugify } from "../../../src/common/string/slugify";
+import type { fetchSlug } from "../../../src/data/ws-slugify";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSlugify = (hass: MockHomeAssistant) => {
+  hass.mockWS<typeof fetchSlug>("slugify", (msg: { text: string }) => ({
+    slug: slugify(msg.text),
+  }));
+};

eslint.config.mjs

@@ -17,6 +17,9 @@ const rspackConfigPath = fileURLToPath(
   new URL("./rspack.config.cjs", import.meta.url)
 );
 
+// Applies everywhere, including the files exempted from the history rule below.
+const restrictedSyntax = ["LabeledStatement", "WithStatement"];
+
 export default tseslint.config(
   js.configs.recommended,
   eslintConfigPrettier,
@@ -111,7 +114,16 @@ export default tseslint.config(
       "no-bitwise": "error",
       "no-console": "error",
       "no-restricted-globals": [2, "event"],
-      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+      "no-restricted-syntax": [
+        "error",
+        ...restrictedSyntax,
+        {
+          selector:
+            "CallExpression[callee.property.name=/^(push|replace)State$/]",
+          message:
+            "Use navigate(), updateHistoryState() or replaceCurrentUrl() from common/navigate. History entries carry the app's own bookkeeping, which a raw pushState/replaceState drops.",
+        },
+      ],
       "wc/no-self-class": "off",
 
       // import-x rules
@@ -222,6 +234,24 @@ export default tseslint.config(
       ],
     },
   },
+  {
+    // These own history entries themselves: the navigation helpers, the dialog
+    // stack, the boot paths that run before the app has any state to keep, and
+    // the tests that fabricate entries to simulate a document load.
+    files: [
+      "src/common/navigate.ts",
+      "src/dialogs/make-dialog-manager.ts",
+      "src/state/url-sync-mixin.ts",
+      "src/panels/config/automation/add-automation-element-dialog.ts",
+      "src/entrypoints/core.ts",
+      "src/onboarding/**/*.ts",
+      "cast/**/*.ts",
+      "test/**/*.ts",
+    ],
+    rules: {
+      "no-restricted-syntax": ["error", ...restrictedSyntax],
+    },
+  },
   {
     files: ["src/util/recorder-worklet.js"],
     languageOptions: {

gallery/sidebar.js

@@ -228,6 +228,7 @@ export default [
       "entity-state",
       "ha-markdown",
       "integration-card",
+      "cloud-account",
       "box-shadow",
       "util-long-press",
       "remove-delete-add-create",

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-button.markdown

@@ -37,6 +37,16 @@ title: Button
 <ha-button size="s"> small </ha-button>
 ```
 
+### Icons in the `xs` size
+
+Avoid icons in `xs` buttons. At 24px the label carries the meaning on its own, and a
+16px glyph next to it adds visual noise without adding information.
+
+Use an icon only when the button needs to be recognized at a glance in a dense layout,
+and only when the glyph is a common one users can identify from its silhouette alone,
+such as close, add, or settings. A detailed or unfamiliar glyph is unreadable at this
+size and should be replaced by the label alone.
+
 ### API
 
 This component is based on the webawesome button component.

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

@@ -56,6 +56,19 @@ export class DemoHaButton extends LitElement {
                         `
                       )}
                     </div>
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .appearance=${appearance}
+                            .variant=${variant}
+                            size="xs"
+                          >
+                            ${titleCase(`${variant} ${appearance}`)}
+                          </ha-button>
+                        `
+                      )}
+                    </div>
                     <div>
                       ${appearances.map(
                         (appearance) => html`

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-select-box.ts

@@ -106,6 +106,17 @@ export class DemoHaSelectBox extends LitElement {
           </ha-card>
         `;
       })}
+      <ha-card>
+        <div class="card-content">
+          <label>Disabled with a selected option</label>
+          <ha-select-box
+            .value=${"card"}
+            .options=${fullOptions}
+            .disabled=${true}
+          >
+          </ha-select-box>
+        </div>
+      </ha-card>
       <ha-card>
         <div class="card-content">
           <p class="title"><b>Column layout</b></p>

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/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,101 @@ 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"],
+    },
   },
-];
+  {
+    heading: "Scale ruler",
+    config: {
+      type: "map",
+      scale_ruler: true,
+      entities: ["zone.home"],
+    },
+  },
+] 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 {

gallery/src/pages/lovelace/picture-glance-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 { PictureGlanceCardConfig } from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -58,110 +60,110 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Title, dialog, toggle",
-    config: `
-- type: picture-glance
-  image: /images/living_room.png
-  title: Living room
-  entities:
-    - switch.decorative_lights
-    - light.ceiling_lights
-    - binary_sensor.movement_backyard
-    - binary_sensor.basement_floor_wet
-    `,
+    config: {
+      type: "picture-glance",
+      image: "/images/living_room.png",
+      title: "Living room",
+      entities: [
+        "switch.decorative_lights",
+        "light.ceiling_lights",
+        "binary_sensor.movement_backyard",
+        "binary_sensor.basement_floor_wet",
+      ],
+    },
   },
   {
     heading: "Title, dialog, no toggle",
-    config: `
-- type: picture-glance
-  image: /images/living_room.png
-  title: Living room
-  entities:
-    - binary_sensor.movement_backyard
-    - binary_sensor.basement_floor_wet
-    `,
+    config: {
+      type: "picture-glance",
+      image: "/images/living_room.png",
+      title: "Living room",
+      entities: [
+        "binary_sensor.movement_backyard",
+        "binary_sensor.basement_floor_wet",
+      ],
+    },
   },
   {
     heading: "Title, no dialog, toggle",
-    config: `
-- type: picture-glance
-  image: /images/living_room.png
-  title: Living room
-  entities:
-    - switch.decorative_lights
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "picture-glance",
+      image: "/images/living_room.png",
+      title: "Living room",
+      entities: ["switch.decorative_lights", "light.ceiling_lights"],
+    },
   },
   {
     heading: "No title, dialog, toggle",
-    config: `
-- type: picture-glance
-  image: /images/living_room.png
-  entities:
-    - switch.decorative_lights
-    - light.ceiling_lights
-    - binary_sensor.movement_backyard
-    - binary_sensor.basement_floor_wet
-    `,
+    config: {
+      type: "picture-glance",
+      image: "/images/living_room.png",
+      entities: [
+        "switch.decorative_lights",
+        "light.ceiling_lights",
+        "binary_sensor.movement_backyard",
+        "binary_sensor.basement_floor_wet",
+      ],
+    },
   },
   {
     heading: "No title, dialog, no toggle",
-    config: `
-- type: picture-glance
-  image: /images/living_room.png
-  entities:
-    - binary_sensor.movement_backyard
-    - binary_sensor.basement_floor_wet
-    `,
+    config: {
+      type: "picture-glance",
+      image: "/images/living_room.png",
+      entities: [
+        "binary_sensor.movement_backyard",
+        "binary_sensor.basement_floor_wet",
+      ],
+    },
   },
   {
     heading: "No title, no dialog, toggle",
-    config: `
-- type: picture-glance
-  image: /images/living_room.png
-  entities:
-    - switch.decorative_lights
-    - light.ceiling_lights
-    `,
+    config: {
+      type: "picture-glance",
+      image: "/images/living_room.png",
+      entities: ["switch.decorative_lights", "light.ceiling_lights"],
+    },
   },
   {
     heading: "Person entity",
-    config: `
-- type: picture-glance
-  image_entity: person.paulus
-  entities:
-    - sensor.battery
-    `,
+    config: {
+      type: "picture-glance",
+      image_entity: "person.paulus",
+      entities: ["sensor.battery"],
+    },
   },
   {
     heading: "Custom icon",
-    config: `
-- type: picture-glance
-  image: /images/living_room.png
-  title: Living room
-  entities:
-    - entity: switch.decorative_lights
-      icon: mdi:power
-    - binary_sensor.basement_floor_wet
-    `,
+    config: {
+      type: "picture-glance",
+      image: "/images/living_room.png",
+      title: "Living room",
+      entities: [
+        { entity: "switch.decorative_lights", icon: "mdi:power" },
+        "binary_sensor.basement_floor_wet",
+      ],
+    },
   },
   {
     heading: "Custom tap action",
-    config: `
-- type: picture-glance
-  image: /images/living_room.png
-  title: Living room
-  entity: light.ceiling_lights
-  tap_action:
-    action: toggle
-  entities:
-    - entity: switch.decorative_lights
-      icon: mdi:power
-      tap_action:
-        action: toggle
-    - binary_sensor.basement_floor_wet
-    `,
+    config: {
+      type: "picture-glance",
+      image: "/images/living_room.png",
+      title: "Living room",
+      entity: "light.ceiling_lights",
+      tap_action: { action: "toggle" },
+      entities: [
+        {
+          entity: "switch.decorative_lights",
+          icon: "mdi:power",
+          tap_action: { action: "toggle" },
+        },
+        "binary_sensor.basement_floor_wet",
+      ],
+    },
   },
-];
+] satisfies DemoCardConfig<PictureGlanceCardConfig>[];
 
 @customElement("demo-lovelace-picture-glance-card")
 class DemoPictureGlance extends LitElement {

gallery/src/pages/lovelace/plant-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 { PlantStatusCardConfig } 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 { createPlantEntities } from "../../data/plants";
@@ -9,27 +11,27 @@ import { mockIcons } from "../../../../demo/src/stubs/icons";
 const CONFIGS = [
   {
     heading: "Basic example",
-    config: `
-- type: plant-status
-  entity: plant.lemon_tree
-    `,
+    config: {
+      type: "plant-status",
+      entity: "plant.lemon_tree",
+    },
   },
   {
     heading: "Problem (too bright) + low battery",
-    config: `
-- type: plant-status
-  entity: plant.apple_tree
-    `,
+    config: {
+      type: "plant-status",
+      entity: "plant.apple_tree",
+    },
   },
   {
     heading: "With picture + multiple problems",
-    config: `
-- type: plant-status
-  entity: plant.sunflowers
-  name: Sunflowers Name Overwrite
-    `,
+    config: {
+      type: "plant-status",
+      entity: "plant.sunflowers",
+      name: "Sunflowers Name Overwrite",
+    },
   },
-];
+] satisfies DemoCardConfig<PlantStatusCardConfig>[];
 
 @customElement("demo-lovelace-plant-card")
 export class DemoPlantEntity extends LitElement {

gallery/src/pages/lovelace/thermostat-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 { ThermostatCardConfig } from "../../../../src/panels/lovelace/cards/types";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
@@ -123,120 +125,131 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Range example",
-    config: `
-- type: thermostat
-  entity: climate.ecobee
-    `,
+    config: {
+      type: "thermostat",
+      entity: "climate.ecobee",
+    },
   },
   {
     heading: "Single temp example",
-    config: `
-- type: thermostat
-  entity: climate.nest
-    `,
+    config: {
+      type: "thermostat",
+      entity: "climate.nest",
+    },
   },
   {
     heading: "Feature example",
-    config: `
-- type: thermostat
-  entity: climate.overkiz_radiator
-  features:
-    - type: climate-hvac-modes
-      hvac_modes:
-        - heat
-        - 'off'
-        - auto
-    - type: climate-preset-modes
-      style: icons
-      preset_modes:
-        - none
-        - frost_protection
-        - eco
-        - comfort
-        - comfort-1
-        - comfort-2
-        - auto
-        - boost
-        - external
-        - prog
-    - type: climate-preset-modes
-      style: dropdown
-      preset_modes:
-        - none
-        - frost_protection
-        - eco
-        - comfort
-        - comfort-1
-        - comfort-2
-        - auto
-        - boost
-        - external
-        - prog
-    `,
+    config: {
+      type: "thermostat",
+      entity: "climate.overkiz_radiator",
+      features: [
+        {
+          type: "climate-hvac-modes",
+          hvac_modes: ["heat", "off", "auto"],
+        },
+        {
+          type: "climate-preset-modes",
+          style: "icons",
+          preset_modes: [
+            "none",
+            "frost_protection",
+            "eco",
+            "comfort",
+            "comfort-1",
+            "comfort-2",
+            "auto",
+            "boost",
+            "external",
+            "prog",
+          ],
+        },
+        {
+          type: "climate-preset-modes",
+          style: "dropdown",
+          preset_modes: [
+            "none",
+            "frost_protection",
+            "eco",
+            "comfort",
+            "comfort-1",
+            "comfort-2",
+            "auto",
+            "boost",
+            "external",
+            "prog",
+          ],
+        },
+      ],
+    },
   },
   {
     heading: "Preset only example",
-    config: `
-- type: thermostat
-  entity: climate.overkiz_towel_dryer
-  features:
-    - type: climate-hvac-modes
-      hvac_modes:
-        - heat
-        - 'off'
-    - type: climate-preset-modes
-      style: icons
-      preset_modes:
-        - none
-        - frost_protection
-        - eco
-        - comfort
-        - comfort-1
-        - comfort-2
-    `,
+    config: {
+      type: "thermostat",
+      entity: "climate.overkiz_towel_dryer",
+      features: [
+        {
+          type: "climate-hvac-modes",
+          hvac_modes: ["heat", "off"],
+        },
+        {
+          type: "climate-preset-modes",
+          style: "icons",
+          preset_modes: [
+            "none",
+            "frost_protection",
+            "eco",
+            "comfort",
+            "comfort-1",
+            "comfort-2",
+          ],
+        },
+      ],
+    },
   },
   {
     heading: "Fan only example",
-    config: `
-- type: thermostat
-  entity: climate.sensibo
-  features:
-    - type: climate-hvac-modes
-      hvac_modes:
-        - fan_only
-        - 'off'
-    - type: climate-fan-modes
-      style: icons
-      fan_modes:
-        - low
-        - high
-    - type: climate-swing-modes
-      style: icons
-      swing_modes:
-        - 'both'
-        - 'rangefull'
-        - 'off'
-      swing_horizontal_modes:
-        - 'both'
-        - 'rangefull'
-        - 'off'
-    `,
+    config: {
+      type: "thermostat",
+      entity: "climate.sensibo",
+      features: [
+        {
+          type: "climate-hvac-modes",
+          hvac_modes: ["fan_only", "off"],
+        },
+        {
+          type: "climate-fan-modes",
+          style: "icons",
+          fan_modes: ["low", "high"],
+        },
+        {
+          type: "climate-swing-modes",
+          style: "icons",
+          swing_modes: ["both", "rangefull", "off"],
+        },
+        {
+          type: "climate-swing-horizontal-modes",
+          style: "icons",
+          swing_horizontal_modes: ["both", "rangefull", "off"],
+        },
+      ],
+    },
   },
   {
     heading: "Unavailable",
-    config: `
-- type: thermostat
-  entity: climate.unavailable
-    `,
+    config: {
+      type: "thermostat",
+      entity: "climate.unavailable",
+    },
   },
   {
     heading: "Non existing",
-    config: `
-- type: thermostat
-  entity: climate.nonexisting
-    `,
+    config: {
+      type: "thermostat",
+      entity: "climate.nonexisting",
+    },
   },
-];
+] satisfies DemoCardConfig<ThermostatCardConfig>[];
 
 @customElement("demo-lovelace-thermostat-card")
 class DemoThermostatEntity extends LitElement {

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

@@ -1,6 +1,7 @@
 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 { CoverEntityFeature } from "../../../../src/data/cover";
 import { LightColorMode } from "../../../../src/data/light";
 import { LockEntityFeature } from "../../../../src/data/lock";
@@ -11,6 +12,7 @@ import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { ClimateEntityFeature } from "../../../../src/data/climate";
 import { FanEntityFeature } from "../../../../src/data/fan";
+import type { TileCardConfig } from "../../../../src/panels/lovelace/cards/types";
 
 const ENTITIES = [
   {
@@ -166,190 +168,179 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "Basic example",
-    config: `
-- type: tile
-  entity: switch.tv_outlet
-    `,
+    config: {
+      type: "tile",
+      entity: "switch.tv_outlet",
+    },
   },
   {
     heading: "Vertical example",
-    config: `
-- type: tile
-  entity: switch.tv_outlet
-  vertical: true
-    `,
+    config: {
+      type: "tile",
+      entity: "switch.tv_outlet",
+      vertical: true,
+    },
   },
   {
     heading: "Custom color",
-    config: `
-- type: tile
-  entity: switch.tv_outlet
-  color: pink
-    `,
+    config: {
+      type: "tile",
+      entity: "switch.tv_outlet",
+      color: "pink",
+    },
   },
   {
     heading: "Whole tile tap action",
-    config: `
-- type: tile
-  entity: switch.tv_outlet
-  color: pink
-  tap_action:
-    action: toggle
-  icon_tap_action:
-    action: none
-    `,
+    config: {
+      type: "tile",
+      entity: "switch.tv_outlet",
+      color: "pink",
+      tap_action: {
+        action: "toggle",
+      },
+      icon_tap_action: {
+        action: "none",
+      },
+    },
   },
   {
     heading: "Unknown entity",
-    config: `
-- type: tile
-  entity: light.unknown
-    `,
+    config: {
+      type: "tile",
+      entity: "light.unknown",
+    },
   },
   {
     heading: "Unavailable entity",
-    config: `
-- type: tile
-  entity: light.unavailable
-    `,
+    config: {
+      type: "tile",
+      entity: "light.unavailable",
+    },
   },
   {
     heading: "Climate",
-    config: `
-- type: tile
-  entity: climate.thermostat
-    `,
+    config: {
+      type: "tile",
+      entity: "climate.thermostat",
+    },
   },
   {
     heading: "Person",
-    config: `
-- type: tile
-  entity: person.paulus
-    `,
+    config: {
+      type: "tile",
+      entity: "person.paulus",
+    },
   },
   {
     heading: "Light brightness feature",
-    config: `
-- type: tile
-  entity: light.bed_light
-  features:
-    - type: "light-brightness"
-    `,
+    config: {
+      type: "tile",
+      entity: "light.bed_light",
+      features: [{ type: "light-brightness" }],
+    },
   },
   {
     heading: "Light color temperature feature",
-    config: `
-- type: tile
-  entity: light.bed_light
-  features:
-    - type: "color-temp"
-    `,
+    config: {
+      type: "tile",
+      entity: "light.bed_light",
+      features: [{ type: "light-color-temp" }],
+    },
   },
   {
     heading: "Lock commands feature",
-    config: `
-- type: tile
-  entity: lock.front_door
-  features:
-    - type: "lock-commands"
-    `,
+    config: {
+      type: "tile",
+      entity: "lock.front_door",
+      features: [{ type: "lock-commands" }],
+    },
   },
   {
     heading: "Lock open door feature",
-    config: `
-- type: tile
-  entity: lock.front_door
-  features:
-    - type: "lock-open-door"
-    `,
+    config: {
+      type: "tile",
+      entity: "lock.front_door",
+      features: [{ type: "lock-open-door" }],
+    },
   },
   {
     heading: "Media player volume slider feature",
-    config: `
-- type: tile
-  entity: media_player.living_room
-  features:
-    - type: "media-player-volume-slider"
-    `,
+    config: {
+      type: "tile",
+      entity: "media_player.living_room",
+      features: [{ type: "media-player-volume-slider" }],
+    },
   },
   {
     heading: "Vacuum commands feature",
-    config: `
-- type: tile
-  entity: vacuum.first_floor_vacuum
-  features:
-    - type: "vacuum-commands"
-      commands:
-        - start_pause
-        - stop
-        - return_home
-    `,
+    config: {
+      type: "tile",
+      entity: "vacuum.first_floor_vacuum",
+      features: [
+        {
+          type: "vacuum-commands",
+          commands: ["start_pause", "stop", "return_home"],
+        },
+      ],
+    },
   },
   {
     heading: "Cover open close feature",
-    config: `
-- type: tile
-  entity: cover.kitchen_shutter
-  features:
-    - type: "cover-open-close"
-    `,
+    config: {
+      type: "tile",
+      entity: "cover.kitchen_shutter",
+      features: [{ type: "cover-open-close" }],
+    },
   },
   {
     heading: "Cover tilt feature",
-    config: `
-- type: tile
-  entity: cover.pergola_roof
-  features:
-  - type: "cover-tilt"
-    `,
+    config: {
+      type: "tile",
+      entity: "cover.pergola_roof",
+      features: [{ type: "cover-tilt" }],
+    },
   },
   {
     heading: "Number buttons feature",
-    config: `
-- type: tile
-  entity: input_number.counter
-  features:
-  - type: numeric-input
-    style: buttons
-    `,
+    config: {
+      type: "tile",
+      entity: "input_number.counter",
+      features: [{ type: "numeric-input", style: "buttons" }],
+    },
   },
   {
     heading: "Dual thermostat feature",
-    config: `
-- type: tile
-  entity: climate.dual_thermostat
-  features:
-  - type: target-temperature
-    `,
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features: [{ type: "target-temperature" }],
+    },
   },
   {
     heading: "Fan direction feature",
-    config: `
-- type: tile
-  entity: fan.fan_demo
-  features:
-  - type: fan-direction
-    `,
+    config: {
+      type: "tile",
+      entity: "fan.fan_demo",
+      features: [{ type: "fan-direction" }],
+    },
   },
   {
     heading: "Fan speed feature",
-    config: `
-- type: tile
-  entity: fan.fan_demo
-  features:
-  - type: fan-speed
-    `,
+    config: {
+      type: "tile",
+      entity: "fan.fan_demo",
+      features: [{ type: "fan-speed" }],
+    },
   },
   {
     heading: "Fan oscillate feature",
-    config: `
-- type: tile
-  entity: fan.fan_demo
-  features:
-  - type: fan-oscillate
-    `,
+    config: {
+      type: "tile",
+      entity: "fan.fan_demo",
+      features: [{ type: "fan-oscillate" }],
+    },
   },
-];
+] satisfies DemoCardConfig<TileCardConfig>[];
 
 @customElement("demo-lovelace-tile-card")
 class DemoTile extends LitElement {

gallery/src/pages/lovelace/todo-list-card.ts

@@ -4,6 +4,8 @@ import { customElement, query } from "lit/decorators";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { mockTodo } from "../../../../demo/src/stubs/todo";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { TodoListCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type { DemoCardConfig } from "../../components/demo-card";
 import "../../components/demo-cards";
 
 const ENTITIES = [
@@ -27,20 +29,20 @@ const ENTITIES = [
 const CONFIGS = [
   {
     heading: "List example",
-    config: `
-- type: todo-list
-  entity: todo.shopping_list
-    `,
+    config: {
+      type: "todo-list",
+      entity: "todo.shopping_list",
+    },
   },
   {
     heading: "List with title example",
-    config: `
-- type: todo-list
-  title: Shopping List
-  entity: todo.read_only
-    `,
+    config: {
+      type: "todo-list",
+      title: "Shopping List",
+      entity: "todo.read_only",
+    },
   },
-];
+] satisfies DemoCardConfig<TodoListCardConfig>[];
 
 @customElement("demo-lovelace-todo-list-card")
 class DemoTodoListEntity extends LitElement {

gallery/src/pages/misc/cloud-account.markdown

@@ -0,0 +1,8 @@
+---
+title: Cloud account
+---
+
+The [Home Assistant Cloud](https://www.nabucasa.com/) account page, rendered from
+mocked cloud data. The controls at the top flip the mocked subscription, remote,
+backup, onboarding, and feature state so every UI state can be previewed here
+without a real cloud account.

gallery/src/pages/misc/cloud-account.ts

@@ -0,0 +1,568 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators";
+import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-select";
+import type { HaSelectSelectEvent } from "../../../../src/components/ha-select";
+import "../../../../src/components/ha-switch";
+import type { HaSwitch } from "../../../../src/components/ha-switch";
+import type { BackupConfig } from "../../../../src/data/backup";
+import { BackupScheduleRecurrence } from "../../../../src/data/backup";
+import type {
+  CloudStatusLoggedIn,
+  RemoteCertificateStatus,
+  SubscriptionInfo,
+} from "../../../../src/data/cloud";
+import { ONBOARDING_ITEMS } from "../../../../src/data/cloud";
+import type { Webhook } from "../../../../src/data/webhook";
+import type { ShowDialogParams } from "../../../../src/dialogs/make-dialog-manager";
+import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
+import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
+import "../../../../src/panels/config/cloud/account/cloud-account-onboarding";
+import "../../../../src/panels/config/cloud/account/cloud-account-overview";
+import { onboardingComplete } from "../../../../src/panels/config/cloud/account/cloud-account-status";
+import { showCloudOnboardingDialog } from "../../../../src/panels/config/cloud/account/show-dialog-cloud-onboarding";
+import type { HomeAssistant } from "../../../../src/types";
+
+// This demo renders the self-contained cloud account cards (overview +
+// onboarding) directly, driven by mocked data, with controls to flip the
+// subscription, remote, backup, onboarding, and feature state so every UI state
+// can be previewed. It intentionally does NOT render the <cloud-account> panel
+// wrapper, which adds a hass-subpage toolbar/back button and route links that
+// have no home in the gallery. See src/panels/config/cloud/account.
+
+// The five PaymentSubscriptionState values.
+type DemoCloudAccount =
+  "active" | "trialing" | "canceled" | "expired" | "unknown";
+
+// "local": automatic backups run, but only to the local agent (no cloud copy).
+// "none": no automatic backups at all.
+type DemoCloudBackup = "fresh" | "stale" | "failed" | "local" | "none";
+
+interface CloudDemoScenario {
+  account: DemoCloudAccount;
+  onboarded: boolean;
+  postponed: boolean;
+  remote: boolean;
+  remoteStatus: RemoteCertificateStatus;
+  backup: DemoCloudBackup;
+  alexa: boolean;
+  google: boolean;
+  webrtc: boolean;
+  webhooks: boolean;
+}
+
+const DEFAULT_SCENARIO: CloudDemoScenario = {
+  account: "active",
+  // Onboarding not completed and streaming (WebRTC) left off, so the onboarding
+  // card shows by default with streaming as the remaining step.
+  onboarded: false,
+  postponed: false,
+  remote: true,
+  remoteStatus: "ready",
+  backup: "fresh",
+  alexa: true,
+  google: true,
+  webrtc: false,
+  webhooks: true,
+};
+
+const SUBSCRIPTION_OPTIONS: { value: DemoCloudAccount; label: string }[] = [
+  { value: "active", label: "Active" },
+  { value: "trialing", label: "Trialing" },
+  { value: "canceled", label: "Canceled" },
+  { value: "expired", label: "Expired" },
+  { value: "unknown", label: "Unknown" },
+];
+
+const REMOTE_STATUS_OPTIONS: {
+  value: RemoteCertificateStatus;
+  label: string;
+}[] = [
+  { value: "ready", label: "Ready" },
+  { value: "generating", label: "Preparing" },
+  { value: "loading", label: "Loading" },
+  { value: "loaded", label: "Loaded" },
+  { value: "error", label: "Error" },
+];
+
+const BACKUP_OPTIONS: { value: DemoCloudBackup; label: string }[] = [
+  { value: "fresh", label: "Recent" },
+  { value: "stale", label: "Old" },
+  { value: "failed", label: "Failed" },
+  { value: "local", label: "Local only" },
+  { value: "none", label: "None" },
+];
+
+const TOGGLES: [keyof CloudDemoScenario, string][] = [
+  ["onboarded", "Onboarded"],
+  ["postponed", "Onboarding postponed"],
+  ["remote", "Remote access"],
+  ["alexa", "Alexa linked"],
+  ["google", "Google linked"],
+  ["webrtc", "Cameras (WebRTC)"],
+  ["webhooks", "Has webhooks"],
+];
+
+const CLOUD_AGENT = "cloud.cloud";
+
+const emptyFilter = () => ({
+  include_domains: [],
+  include_entities: [],
+  exclude_domains: [],
+  exclude_entities: [],
+});
+
+const demoWebhooks: Webhook[] = [
+  {
+    webhook_id: "demo_front_door",
+    domain: "automation",
+    name: "Front door motion",
+    local_only: false,
+  },
+  {
+    webhook_id: "demo_companion_app",
+    domain: "mobile_app",
+    name: "Companion app",
+    local_only: false,
+  },
+];
+
+const buildSubscription = (scenario: CloudDemoScenario): SubscriptionInfo => ({
+  human_description: "Demo subscription, renews automatically",
+  provider: "Nabu Casa, Inc.",
+  plan_renewal_date: 4102444800,
+  subscription: { status: scenario.account },
+});
+
+const buildCloudStatus = (scenario: CloudDemoScenario): CloudStatusLoggedIn => {
+  const active =
+    scenario.account !== "canceled" && scenario.account !== "expired";
+  const cloudhooks = scenario.webhooks
+    ? Object.fromEntries(
+        demoWebhooks.map((webhook) => [
+          webhook.webhook_id,
+          {
+            webhook_id: webhook.webhook_id,
+            cloudhook_id: `demo-${webhook.webhook_id}`,
+            cloudhook_url: `https://hooks.nabu.casa/demo-${webhook.webhook_id}`,
+            managed: false,
+          },
+        ])
+      )
+    : {};
+  return {
+    logged_in: true,
+    cloud: "connected",
+    cloud_last_disconnect_reason: null,
+    email: "[email protected]",
+    google_registered: scenario.google,
+    google_entities: emptyFilter(),
+    google_domains: ["light", "switch", "climate", "cover"],
+    alexa_registered: scenario.alexa,
+    alexa_entities: emptyFilter(),
+    remote_domain: "demo-instance.ui.nabu.casa",
+    remote_connected: scenario.remote,
+    remote_certificate: {
+      common_name: "demo-instance.ui.nabu.casa",
+      expire_date: "2099-01-01T00:00:00+00:00",
+      fingerprint: "demodemodemodemodemodemodemodemodemodemodemodemodemo",
+      alternative_names: ["demo-instance.ui.nabu.casa"],
+    },
+    remote_certificate_status: scenario.remoteStatus,
+    http_use_ssl: false,
+    active_subscription: active,
+    onboarding_postponed: scenario.postponed,
+    onboarding_completed: scenario.onboarded,
+    prefs: {
+      google_enabled: scenario.google,
+      alexa_enabled: scenario.alexa,
+      remote_enabled: scenario.remote,
+      remote_allow_remote_enable: true,
+      strict_connection: "disabled",
+      google_secure_devices_pin: undefined,
+      cloudhooks,
+      alexa_report_state: true,
+      google_report_state: true,
+      tts_default_voice: ["en-US", "JennyNeural"],
+      cloud_ice_servers_enabled: scenario.webrtc,
+      onboarded_items: scenario.onboarded ? [...ONBOARDING_ITEMS] : [],
+      onboarding_postponed_until: scenario.postponed
+        ? new Date(Date.now() + 24 * 3600 * 1000).toISOString()
+        : null,
+    },
+  };
+};
+
+const buildBackupConfig = (scenario: CloudDemoScenario): BackupConfig => {
+  const now = Date.now();
+  const recent = new Date(now - 12 * 3600 * 1000).toISOString();
+  const old = new Date(now - 5 * 86400000).toISOString();
+  const future = new Date(now + 86400000).toISOString();
+  const overdue = new Date(now - 6 * 3600 * 1000).toISOString();
+
+  const cloudEnabled =
+    scenario.backup === "fresh" ||
+    scenario.backup === "stale" ||
+    scenario.backup === "failed";
+
+  let configured = true;
+  let lastCompleted: string | null = null;
+  let lastAttempted: string | null = null;
+  let next: string | null = null;
+  switch (scenario.backup) {
+    case "fresh":
+    case "local":
+      lastCompleted = recent;
+      lastAttempted = recent;
+      next = future;
+      break;
+    case "stale":
+      lastCompleted = old;
+      lastAttempted = old;
+      next = overdue;
+      break;
+    case "failed":
+      lastCompleted = old;
+      lastAttempted = recent;
+      next = future;
+      break;
+    case "none":
+      configured = false;
+      break;
+  }
+
+  return {
+    automatic_backups_configured: configured,
+    last_attempted_automatic_backup: lastAttempted,
+    last_completed_automatic_backup: lastCompleted,
+    next_automatic_backup: next,
+    next_automatic_backup_additional: false,
+    create_backup: {
+      agent_ids: cloudEnabled
+        ? ["backup.local", CLOUD_AGENT]
+        : ["backup.local"],
+      include_addons: [],
+      include_all_addons: true,
+      include_database: true,
+      include_folders: [],
+      name: null,
+      password: null,
+    },
+    retention: { copies: 3, days: null },
+    schedule: {
+      recurrence: BackupScheduleRecurrence.DAILY,
+      time: null,
+      days: [],
+    },
+    agents: {
+      "backup.local": { protected: true, retention: null },
+      "cloud.cloud": { protected: true, retention: null },
+    },
+  };
+};
+
+@customElement("demo-misc-cloud-account")
+export class DemoMiscCloudAccount
+  extends LitElement
+  implements ProvideHassElement
+{
+  @state() private hass!: HomeAssistant;
+
+  @state() private _scenario: CloudDemoScenario = { ...DEFAULT_SCENARIO };
+
+  @state() private _cloudStatus!: CloudStatusLoggedIn;
+
+  @state() private _subscription!: SubscriptionInfo;
+
+  @state() private _backupConfig!: BackupConfig;
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+
+    hass.updateHass({
+      config: {
+        ...hass.config,
+        components: [
+          ...(hass.config?.components ?? []),
+          "cloud",
+          "backup",
+          "webhook",
+        ],
+      },
+    });
+    this._registerMocks(hass);
+    this._applyScenario();
+  }
+
+  public provideHass(el) {
+    el.hass = this.hass;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("show-dialog", this._showDialog);
+    this.addEventListener("cloud-open-onboarding", this._openOnboarding);
+    this.addEventListener("ha-refresh-cloud-status", this._refreshFromMocks);
+    // The overview and onboarding dialog contain real <a href="/config/..">
+    // links to panel routes that do not exist in the gallery. Keep them inert.
+    this.addEventListener("click", this._neutralizeNavigation);
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("show-dialog", this._showDialog);
+    this.removeEventListener("cloud-open-onboarding", this._openOnboarding);
+    this.removeEventListener("ha-refresh-cloud-status", this._refreshFromMocks);
+    this.removeEventListener("click", this._neutralizeNavigation);
+  }
+
+  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+    const showOnboarding =
+      this._cloudStatus.active_subscription &&
+      !this._cloudStatus.onboarding_completed &&
+      !this._cloudStatus.onboarding_postponed &&
+      !onboardingComplete(this._cloudStatus, this._backupConfig);
+
+    return html`
+      <div class="options">
+        <div class="selects">
+          ${this._select("Subscription", "account", SUBSCRIPTION_OPTIONS)}
+          ${this._select("Remote status", "remoteStatus", REMOTE_STATUS_OPTIONS)}
+          ${this._select("Backups", "backup", BACKUP_OPTIONS)}
+        </div>
+        <div class="switches">
+          ${TOGGLES.map(([field, label]) => this._toggle(label, field))}
+        </div>
+      </div>
+      <div class="preview">
+        ${
+          showOnboarding
+            ? html`
+                <cloud-account-onboarding
+                  .hass=${this.hass}
+                  .cloudStatus=${this._cloudStatus}
+                  .backupConfig=${this._backupConfig}
+                ></cloud-account-onboarding>
+              `
+            : nothing
+        }
+        <cloud-account-overview
+          .hass=${this.hass}
+          .cloudStatus=${this._cloudStatus}
+          .subscription=${this._subscription}
+          .backupConfig=${this._backupConfig}
+          .webhooks=${demoWebhooks}
+        ></cloud-account-overview>
+      </div>
+    `;
+  }
+
+  private _select(
+    label: string,
+    field: keyof CloudDemoScenario,
+    options: { value: string; label: string }[]
+  ) {
+    return html`
+      <ha-select
+        .label=${label}
+        .value=${String(this._scenario[field])}
+        .options=${options}
+        data-field=${field}
+        @selected=${this._selectChanged}
+      ></ha-select>
+    `;
+  }
+
+  private _toggle(label: string, field: keyof CloudDemoScenario) {
+    return html`
+      <ha-formfield .label=${label}>
+        <ha-switch
+          .checked=${this._scenario[field] as boolean}
+          data-field=${field}
+          @change=${this._switchChanged}
+        ></ha-switch>
+      </ha-formfield>
+    `;
+  }
+
+  private _selectChanged(ev: HaSelectSelectEvent) {
+    const field = (ev.currentTarget as HTMLElement).dataset
+      .field as keyof CloudDemoScenario;
+    this._setField(field, ev.detail.value as string);
+  }
+
+  private _switchChanged(ev: Event) {
+    const target = ev.target as HaSwitch;
+    this._setField(
+      target.dataset.field as keyof CloudDemoScenario,
+      target.checked
+    );
+  }
+
+  private _setField(field: keyof CloudDemoScenario, value: string | boolean) {
+    if (this._scenario[field] === value) {
+      return;
+    }
+    this._scenario = { ...this._scenario, [field]: value };
+    this._applyScenario();
+  }
+
+  private _applyScenario() {
+    this._cloudStatus = buildCloudStatus(this._scenario);
+    this._subscription = buildSubscription(this._scenario);
+    this._backupConfig = buildBackupConfig(this._scenario);
+  }
+
+  private _openOnboarding = () => {
+    showCloudOnboardingDialog(this, {
+      cloudStatus: this._cloudStatus,
+      backupConfig: this._backupConfig,
+      onChanged: () => this._refreshFromMocks(),
+    });
+  };
+
+  private _showDialog = (ev: HASSDomEvent<ShowDialogParams<unknown>>) => {
+    const { dialogTag, dialogImport, dialogParams, addHistory, parentElement } =
+      ev.detail;
+    showDialog(
+      this,
+      dialogTag,
+      dialogParams,
+      dialogImport,
+      parentElement,
+      addHistory
+    );
+  };
+
+  private _refreshFromMocks = () => {
+    this._cloudStatus = {
+      ...this._cloudStatus,
+      prefs: { ...this._cloudStatus.prefs },
+    };
+    this._backupConfig = { ...this._backupConfig };
+    const cloudBackup =
+      this._backupConfig.create_backup.agent_ids.includes(CLOUD_AGENT);
+    this._scenario = {
+      ...this._scenario,
+      onboarded: this._cloudStatus.onboarding_completed,
+      postponed: this._cloudStatus.onboarding_postponed,
+      remote: this._cloudStatus.prefs.remote_enabled,
+      webrtc: this._cloudStatus.prefs.cloud_ice_servers_enabled,
+      backup: !this._backupConfig.automatic_backups_configured
+        ? "none"
+        : cloudBackup
+          ? this._scenario.backup === "fresh" ||
+            this._scenario.backup === "stale" ||
+            this._scenario.backup === "failed"
+            ? this._scenario.backup
+            : "fresh"
+          : "local",
+    };
+  };
+
+  private _neutralizeNavigation = (ev: MouseEvent) => {
+    const anchor = ev
+      .composedPath()
+      .find((el): el is HTMLAnchorElement => el instanceof HTMLAnchorElement);
+    if (anchor?.getAttribute("href")?.startsWith("/")) {
+      ev.preventDefault();
+    }
+  };
+
+  private _registerMocks(hass: MockHomeAssistant) {
+    hass.mockWS("cloud/status", () => ({
+      ...this._cloudStatus,
+      prefs: { ...this._cloudStatus.prefs },
+    }));
+
+    hass.mockWS("cloud/update_prefs", (msg) => {
+      const { type, ...prefs } = msg;
+      this._cloudStatus.prefs = { ...this._cloudStatus.prefs, ...prefs };
+      return { success: true };
+    });
+
+    hass.mockWS("cloud/onboarding/postpone", () => {
+      this._cloudStatus.onboarding_postponed = true;
+      this._cloudStatus.prefs.onboarding_postponed_until = new Date(
+        Date.now() + 24 * 3600 * 1000
+      ).toISOString();
+      return { ...this._cloudStatus, prefs: { ...this._cloudStatus.prefs } };
+    });
+
+    hass.mockWS("cloud/remote/connect", () => {
+      this._cloudStatus.remote_connected = true;
+      this._cloudStatus.prefs.remote_enabled = true;
+      return null;
+    });
+    hass.mockWS("cloud/remote/disconnect", () => {
+      this._cloudStatus.remote_connected = false;
+      this._cloudStatus.prefs.remote_enabled = false;
+      return null;
+    });
+
+    hass.mockWS("backup/config/info", () => ({
+      config: { ...this._backupConfig },
+    }));
+    hass.mockWS("backup/config/update", (msg) => {
+      const { type, ...update } = msg;
+      if (update.create_backup) {
+        this._backupConfig.create_backup = {
+          ...this._backupConfig.create_backup,
+          ...update.create_backup,
+        };
+      }
+      if (update.automatic_backups_configured !== undefined) {
+        this._backupConfig.automatic_backups_configured =
+          update.automatic_backups_configured;
+      }
+      return null;
+    });
+  }
+
+  static styles = css`
+    .options {
+      max-width: 600px;
+      margin: 16px auto 0;
+      padding: 0 16px 16px;
+      border-bottom: 1px solid var(--divider-color);
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .selects {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+    .selects ha-select {
+      min-width: 160px;
+      flex: 1;
+    }
+    .switches {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px 16px;
+    }
+    .preview {
+      padding: 24px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-6, 24px);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-cloud-account": DemoMiscCloudAccount;
+  }
+}

gulpfile.js

@@ -1,4 +1 @@
-import { availableParallelism } from "node:os";
 import "./build-scripts/gulp/index.mjs";
-
-process.env.UV_THREADPOOL_SIZE = availableParallelism();

landing-page/src/ha-landing-page.ts

@@ -182,12 +182,10 @@ class HaLandingPage extends LandingPageBaseElement {
       this._networkInfoError = false;
       this._coreStatusChecked = false;
     } catch (err: any) {
-      if (!this._coreStatusChecked) {
-        // wait before show errors, because we assume that core is starting
-        this._coreCheckActive = true;
-        this._scheduleTurnOffCoreCheck();
+      if (await this._checkCoreAvailability()) {
+        // core is available, page reload in progress -> don't show an error
+        return;
       }
-      await this._checkCoreAvailability();
 
       // assume supervisor update if ping fails -> don't show an error
       if (!this._coreCheckActive && err.message !== "ping-failed") {
@@ -217,7 +215,10 @@ class HaLandingPage extends LandingPageBaseElement {
         this._progress = -1;
       }
     } catch (err: any) {
-      await this._checkCoreAvailability();
+      if (await this._checkCoreAvailability()) {
+        // core is available, page reload in progress -> stop polling
+        return;
+      }
 
       if (!this._coreCheckActive) {
         this._progress = -1;
@@ -229,16 +230,22 @@ class HaLandingPage extends LandingPageBaseElement {
     this._scheduleFetchSupervisorJobsInfo();
   }
 
-  private async _checkCoreAvailability() {
+  private async _checkCoreAvailability(): Promise<boolean> {
     try {
       const response = await fetch("/manifest.json");
-      if (response.ok) {
-        location.reload();
-      } else {
+      if (!response.ok) {
         throw new Error("Failed to fetch manifest");
       }
+      location.reload();
+      return true;
     } catch (_err) {
-      this._coreStatusChecked = true;
+      if (!this._coreStatusChecked) {
+        // wait before showing errors, because we assume that core is starting
+        this._coreStatusChecked = true;
+        this._coreCheckActive = true;
+        this._scheduleTurnOffCoreCheck();
+      }
+      return false;
     }
   }
 

package.json

@@ -7,7 +7,7 @@
   "name": "home-assistant-frontend",
   "version": "1.0.0",
   "scripts": {
-    "build": "script/build_frontend",
+    "build": "node build-scripts/build-manager.mjs",
     "lint:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
     "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
@@ -49,16 +49,16 @@
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.1",
     "@codemirror/state": "6.7.1",
-    "@codemirror/view": "6.43.6",
+    "@codemirror/view": "6.43.8",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.5.2",
+    "@formatjs/intl-datetimeformat": "7.6.0",
     "@formatjs/intl-displaynames": "7.3.13",
     "@formatjs/intl-durationformat": "0.10.18",
     "@formatjs/intl-getcanonicallocales": "3.2.11",
     "@formatjs/intl-listformat": "8.3.13",
     "@formatjs/intl-locale": "5.3.10",
-    "@formatjs/intl-numberformat": "9.3.14",
+    "@formatjs/intl-numberformat": "9.4.0",
     "@formatjs/intl-pluralrules": "6.3.13",
     "@formatjs/intl-relativetimeformat": "12.3.13",
     "@fullcalendar/core": "6.1.21",
@@ -93,7 +93,7 @@
     "cally": "0.9.2",
     "color-name": "2.1.1",
     "comlink": "4.4.2",
-    "core-js": "3.49.0",
+    "core-js": "3.50.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.4.0",
@@ -103,19 +103,18 @@
     "echarts": "6.1.0",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.5.0",
-    "gulp-zopfli-green": "7.0.0",
-    "hls.js": "1.6.16",
+    "hls.js": "1.6.17",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.12",
-    "js-yaml": "5.2.2",
+    "intl-messageformat": "11.2.13",
+    "js-yaml": "5.2.3",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.3",
     "lit-html": "3.3.3",
     "luxon": "3.7.2",
-    "marked": "18.0.7",
+    "marked": "18.0.9",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -145,26 +144,27 @@
     "@babel/preset-env": "8.0.2",
     "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
+    "@gfx/zopfli": "1.0.15",
     "@html-eslint/eslint-plugin": "0.64.0",
     "@lokalise/node-api": "16.3.0",
-    "@octokit/auth-oauth-device": "8.0.3",
-    "@octokit/plugin-retry": "8.1.0",
+    "@octokit/auth-oauth-device": "8.0.4",
+    "@octokit/plugin-retry": "8.1.1",
     "@octokit/rest": "22.0.1",
-    "@playwright/test": "1.61.1",
+    "@playwright/test": "1.62.1",
     "@rsdoctor/rspack-plugin": "1.6.1",
-    "@rspack/core": "2.1.5",
-    "@rspack/dev-server": "2.1.0",
+    "@rspack/core": "2.1.8",
+    "@rspack/dev-server": "2.2.0",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
     "@types/html-minifier-terser": "7.0.2",
-    "@types/leaflet": "1.9.21",
+    "@types/leaflet": "1.9.22",
     "@types/leaflet-draw": "1.0.13",
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.7.2",
+    "@types/luxon": "3.7.4",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
@@ -174,7 +174,7 @@
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.7.0",
+    "eslint": "10.8.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.17.1",
@@ -186,17 +186,16 @@
     "fs-extra": "11.4.0",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.7.0",
+    "globals": "17.9.0",
     "gulp": "5.0.1",
-    "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "29.1.1",
+    "jsdom": "30.0.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.2.0",
+    "lint-staged": "17.3.0",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
@@ -207,11 +206,11 @@
     "rspack-manifest-plugin": "5.2.2",
     "serve": "14.2.6",
     "sinon": "22.1.0",
-    "tar": "7.5.21",
+    "tar": "7.5.22",
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.65.0",
+    "typescript-eslint": "8.66.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.10",
     "webpack-stats-plugin": "1.1.3",
@@ -224,12 +223,12 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.7.0",
+    "globals": "17.9.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "[email protected]7.1",
+  "packageManager": "[email protected]8.0",
   "volta": {
-    "node": "24.18.0"
+    "node": "24.19.0"
   }
 }

public/static/images/home-assistant-logo-loading.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" role="presentation">
+  <style>
+    .dot-left { animation: pulse-left 1300ms 350ms linear infinite; }
+    .dot-right { animation: pulse-right 1300ms 350ms linear infinite; }
+    .dot-top { animation: pulse-top 1300ms 350ms linear infinite; }
+    @keyframes pulse-left {
+      0% { transform: translate(50px, 69.634804px) scale(1); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
+      15.384615% { transform: translate(50px, 69.634804px) scale(1.3); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
+      38.461538%, 100% { transform: translate(50px, 69.634804px) scale(1); }
+    }
+    @keyframes pulse-right {
+      0%, 15.384615% { transform: translate(90px, 58.634798px) scale(1); }
+      15.384615% { animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
+      30.769231% { transform: translate(90px, 58.634798px) scale(1.3); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
+      53.846154%, 100% { transform: translate(90px, 58.634798px) scale(1); }
+    }
+    @keyframes pulse-top {
+      0%, 30.769231% { transform: translate(70px, 37.6348px) scale(1); }
+      30.769231% { animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
+      46.153846% { transform: translate(70px, 37.6348px) scale(1.3); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
+      69.230769%, 100% { transform: translate(70px, 37.6348px) scale(1); }
+    }
+  </style>
+  <g transform="matrix(.938408 0 0 .93841 -5.688557 -13.572944)">
+    <path fill="#18bcf2" d="M73.5367 13.0937 106.463 46.0524v.0033C108.41 48.0043 110 51.848 110 54.6007v30.0292c0 2.7527-2.25 5.0049-5 5.0049l-70-.0034c-2.75 0-5-2.2522-5-5.0048V54.5974c0-2.7527 1.5933-6.5998 3.5367-8.545l32.93-32.9587c1.9433-1.9452 5.1266-1.9452 7.07 0Z" transform="matrix(1.598452 0 0 1.598452 -41.89164 -.937304)"/>
+    <g mask="url(#logo-mask)" transform="matrix(1.598452 0 0 1.598452 -41.89164 -.937311)">
+      <path d="m70 89.6348-20-20M70 89.6348v-52M90 58.1348l-20 20" fill="none" stroke="#f2f4f9" stroke-linecap="round" stroke-width="6"/>
+      <circle class="dot-left" r="7" fill="#f2f4f9" transform="translate(50 69.634804)"/>
+      <circle class="dot-right" r="7" fill="#f2f4f9" transform="translate(90 58.634798)"/>
+      <circle class="dot-top" r="7" fill="#f2f4f9" transform="translate(70 37.6348)"/>
+    </g>
+    <mask id="logo-mask" x="-150%" y="-150%" width="400%" height="400%" mask-type="luminance">
+      <path fill="#f2f4f9" d="M73.5367 13.0937 106.463 46.0524v.0033C108.41 48.0043 110 51.848 110 54.6007v30.0292c0 2.7527-2.25 5.0049-5 5.0049l-70-.0034c-2.75 0-5-2.2522-5-5.0048V54.5974c0-2.7527 1.5933-6.5998 3.5367-8.545l32.93-32.9587c1.9433-1.9452 5.1266-1.9452 7.07 0Z"/>
+    </mask>
+  </g>
+</svg>

public/static/images/open-home-foundation-on-dark.svg

@@ -0,0 +1,22 @@
+<svg width="237" height="24" viewBox="0 0 237 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.54181 0.297615C8.14709 -0.0992051 7.5012 -0.0992051 7.1082 0.297615L0.717655 6.72232C0.322945 7.11914 0 7.90248 0 8.46249V14.2894C0 14.8494 0.456224 15.3098 1.01497 15.3098H14.635C15.1921 15.3098 15.65 14.8511 15.65 14.2894V8.46249C15.65 7.90248 15.3271 7.11914 14.9324 6.72232L8.54181 0.297615Z" fill="#F7F6F2"/>
+<path d="M14.8672 17.918C15.2993 17.918 15.6502 18.2682 15.6504 18.7002V22.417C15.6504 22.8492 15.2994 23.2002 14.8672 23.2002H13.8896C13.4575 23.2002 13.1064 22.8492 13.1064 22.417V20.4609H2.54297V22.417C2.54297 22.8491 2.19285 23.2001 1.76074 23.2002H0.782227C0.350189 23.2 0 22.8491 0 22.417V18.7002C0.000147852 18.2682 0.350281 17.9181 0.782227 17.918H14.8672Z" fill="#F7F6F2"/>
+<path d="M28.0439 5.24023C28.9236 5.24023 29.7386 5.39857 30.4891 5.71734C31.2396 6.03402 31.8754 6.47362 32.3965 7.03406C32.9177 7.5945 33.3242 8.26536 33.616 9.05081C33.9058 9.83625 34.0517 10.6842 34.0517 11.5967C34.0621 12.4989 33.9204 13.3447 33.6285 14.1385C33.3346 14.9323 32.9239 15.6094 32.3965 16.1719C31.8691 16.7344 31.227 17.1761 30.4724 17.4949C29.7178 17.8157 28.9027 17.9699 28.0272 17.9595C26.8702 17.9762 25.83 17.7095 24.9086 17.1616C23.9872 16.6136 23.2764 15.8532 22.7761 14.8802C22.2757 13.9073 22.0339 12.8176 22.0506 11.6134C22.0402 10.7113 22.1819 9.86542 22.4738 9.07164C22.7677 8.27786 23.1763 7.60075 23.7016 7.03406C24.2269 6.46945 24.8648 6.02568 25.6174 5.70692C26.3699 5.38816 27.1787 5.2319 28.0439 5.24232V5.24023ZM28.0584 15.524C29.0966 15.524 29.9179 15.1719 30.5245 14.4698C31.1312 13.7656 31.4334 12.8093 31.4334 11.5967C31.4334 10.3842 31.1312 9.41332 30.5287 8.71121C29.9262 8.01118 29.1028 7.66117 28.0584 7.66117C27.0141 7.66117 26.1906 8.01118 25.5882 8.71121C24.9857 9.41124 24.6835 10.3738 24.6835 11.5967C24.6835 12.8197 24.9857 13.7802 25.5882 14.4781C26.1906 15.1761 27.0141 15.5261 28.0584 15.5261V15.524Z" fill="#F7F6F2"/>
+<path d="M44.9854 9.52582C44.9854 10.7592 44.6123 11.7509 43.8681 12.503C43.1239 13.2551 42.1108 13.6322 40.8267 13.6322H38.3898V17.7553H35.9028V5.45899H40.86C42.1483 5.45899 43.1572 5.82151 43.8889 6.54654C44.6206 7.27157 44.9854 8.26536 44.9854 9.52374V9.52582ZM42.3588 9.47791C42.3588 8.95705 42.19 8.52578 41.8502 8.18619C41.5104 7.84659 41.0205 7.67783 40.3785 7.67783H38.3898V11.4676H40.3785C41.0247 11.4676 41.5167 11.2842 41.8544 10.9175C42.1921 10.5509 42.3588 10.0717 42.3588 9.47999V9.47791Z" fill="#F7F6F2"/>
+<path d="M54.4829 17.7553H46.7386V5.45899H54.4829V7.82159H49.2234V10.4446H53.895V12.6447H49.2234V15.4156H54.4829V17.7553Z" fill="#F7F6F2"/>
+<path d="M67.397 5.46108V17.7574H64.9268L59.5381 9.42999V17.7574H57.0678V5.46108H59.5381L64.9268 13.8052V5.46108H67.397Z" fill="#F7F6F2"/>
+<path d="M74.4409 5.46108H76.9279V10.4321L81.8037 10.4488V5.46108H84.3074V17.7574H81.8037V12.6655L76.9279 12.6322V17.7574H74.4409V5.46108Z" fill="#F7F6F2"/>
+<path d="M92.133 5.24023C93.0127 5.24023 93.8278 5.39857 94.5782 5.71734C95.3287 6.03402 95.9645 6.47362 96.4856 7.03406C97.0068 7.5945 97.4133 8.26536 97.7051 9.05081C97.9949 9.83625 98.1408 10.6842 98.1408 11.5967C98.1512 12.4989 98.0095 13.3447 97.7176 14.1385C97.4237 14.9323 97.013 15.6094 96.4856 16.1719C95.9582 16.7344 95.3162 17.1761 94.5615 17.4949C93.8069 17.8157 92.9918 17.9699 92.1163 17.9595C90.9593 17.9762 89.9191 17.7095 88.9977 17.1616C88.0763 16.6136 87.3655 15.8532 86.8652 14.8802C86.3649 13.9073 86.1231 12.8176 86.1397 11.6134C86.1293 10.7113 86.2711 9.86542 86.5629 9.07164C86.8568 8.27786 87.2654 7.60075 87.7907 7.03406C88.3161 6.46945 88.954 6.02568 89.7065 5.70692C90.459 5.38816 91.2679 5.2319 92.133 5.24232V5.24023ZM92.1476 15.524C93.1857 15.524 94.007 15.1719 94.6137 14.4698C95.2203 13.7656 95.5225 12.8093 95.5225 11.5967C95.5225 10.3842 95.2203 9.41332 94.6178 8.71121C94.0154 8.01118 93.192 7.66117 92.1476 7.66117C91.1032 7.66117 90.2798 8.01118 89.6773 8.71121C89.0749 9.41124 88.7726 10.3738 88.7726 11.5967C88.7726 12.8197 89.0749 13.7802 89.6773 14.4781C90.2798 15.1761 91.1032 15.5261 92.1476 15.5261V15.524Z" fill="#F7F6F2"/>
+<path d="M112.408 5.46108V17.7574H109.954V11.0342L107.321 17.7574H104.966L102.364 11.0842V17.7574H99.9919V5.46108H102.364L106.148 14.8552L109.954 5.46108H112.408Z" fill="#F7F6F2"/>
+<path d="M122.762 17.7553H115.018V5.45899H122.762V7.82159H117.503V10.4446H122.174V12.6447H117.503V15.4156H122.762V17.7553Z" fill="#F7F6F2"/>
+<path d="M131.526 7.21579V10.9075H136.254V12.5936H131.526V17.7408H129.65V5.44079H137.146V7.21579H131.526Z" fill="#F7F6F2"/>
+<path d="M144.303 5.24079C145.156 5.22968 145.956 5.38523 146.699 5.70468C147.441 6.02412 148.074 6.46579 148.597 7.02968C149.117 7.59357 149.525 8.27135 149.82 9.05746C150.114 9.84635 150.256 10.688 150.245 11.5852C150.256 12.488 150.114 13.338 149.82 14.1297C149.525 14.9241 149.117 15.5991 148.597 16.163C148.077 16.7241 147.443 17.1658 146.699 17.4852C145.954 17.8047 145.156 17.9602 144.303 17.9491C143.449 17.9602 142.652 17.8047 141.91 17.4852C141.168 17.1658 140.537 16.7241 140.017 16.1602C139.497 15.5963 139.089 14.9186 138.797 14.1325C138.505 13.3463 138.363 12.5019 138.374 11.6047C138.363 10.7075 138.505 9.86301 138.797 9.07412C139.089 8.28523 139.494 7.60746 140.017 7.04079C140.537 6.4769 141.168 6.03246 141.91 5.71023C142.652 5.38801 143.449 5.23246 144.303 5.24357V5.24079ZM141.44 14.8602C142.165 15.6825 143.124 16.0963 144.319 16.0963C145.515 16.0963 146.473 15.6852 147.196 14.8602C147.919 14.038 148.28 12.9463 148.28 11.5852C148.28 10.2241 147.919 9.12412 147.196 8.3019C146.473 7.47968 145.515 7.06579 144.319 7.06579C143.124 7.06579 142.163 7.47968 141.44 8.30468C140.715 9.12968 140.353 10.2241 140.353 11.5852C140.353 12.9463 140.715 14.038 141.44 14.8602Z" fill="#F7F6F2"/>
+<path d="M154.097 5.43801V13.3019C154.103 14.238 154.378 14.9463 154.923 15.4241C155.467 15.9047 156.184 16.1436 157.071 16.1436C157.958 16.1436 158.636 15.8908 159.203 15.388C159.77 14.8852 160.053 14.188 160.053 13.3019V5.43801H161.929V13.3769C161.929 14.0991 161.799 14.7519 161.54 15.338C161.282 15.9241 160.929 16.4075 160.487 16.7825C160.042 17.1602 159.531 17.4491 158.944 17.6547C158.358 17.8602 157.735 17.9602 157.068 17.9602C156.401 17.9602 155.804 17.8602 155.226 17.663C154.647 17.4658 154.131 17.1797 153.68 16.8075C153.227 16.4352 152.871 15.9547 152.61 15.363C152.349 14.7713 152.218 14.1075 152.218 13.3769V5.43801H154.097Z" fill="#F7F6F2"/>
+<path d="M174.473 5.43801V17.738H172.597L166.529 8.46857V17.738H164.653V5.43801H166.529L172.597 14.7241V5.43801H174.473Z" fill="#F7F6F2"/>
+<path d="M187.583 11.6019C187.588 12.4825 187.436 13.3102 187.124 14.0797C186.813 14.8519 186.382 15.5075 185.835 16.0463C185.287 16.5852 184.628 17.0075 183.859 17.3102C183.089 17.613 182.269 17.7575 181.391 17.7408H177.291V5.44079H181.391C182.547 5.42412 183.603 5.67968 184.553 6.21023C185.504 6.73801 186.249 7.4769 186.788 8.42412C187.327 9.37135 187.591 10.4325 187.583 11.6047V11.6019ZM185.59 11.6019C185.59 10.3019 185.204 9.24635 184.428 8.43523C183.653 7.62412 182.636 7.21579 181.374 7.21579H179.184V15.9963H181.374C182.647 15.9963 183.667 15.5936 184.437 14.7852C185.207 13.9797 185.59 12.9158 185.59 11.6019Z" fill="#F7F6F2"/>
+<path d="M195.821 14.7825H190.91L189.843 17.7408H187.916L192.363 5.44079H194.381L198.853 17.7408H196.869L195.818 14.7825H195.821ZM195.276 13.188L193.383 7.8269L191.474 13.188H195.276Z" fill="#F7F6F2"/>
+<path d="M207.278 7.21579H203.706V17.7408H201.813V7.21579H198.242V5.44079H207.275V7.21579H207.278Z" fill="#F7F6F2"/>
+<path d="M208.973 17.738V5.43801H210.866V17.738H208.973Z" fill="#F7F6F2"/>
+<path d="M218.873 5.24079C219.726 5.22968 220.527 5.38523 221.269 5.70468C222.014 6.02412 222.645 6.46579 223.167 7.02968C223.687 7.59357 224.095 8.27135 224.39 9.05746C224.685 9.84635 224.826 10.688 224.815 11.5852C224.826 12.488 224.685 13.338 224.39 14.1297C224.095 14.9241 223.687 15.5991 223.167 16.163C222.647 16.7241 222.014 17.1658 221.269 17.4852C220.524 17.8047 219.726 17.9602 218.873 17.9491C218.02 17.9602 217.222 17.8047 216.48 17.4852C215.738 17.1658 215.107 16.7241 214.587 16.1602C214.067 15.5963 213.659 14.9186 213.367 14.1325C213.075 13.3463 212.933 12.5019 212.945 11.6047C212.933 10.7075 213.075 9.86301 213.367 9.07412C213.659 8.28523 214.065 7.60746 214.587 7.04079C215.107 6.4769 215.738 6.03246 216.48 5.71023C217.222 5.38801 218.02 5.23246 218.873 5.24357V5.24079ZM216.01 14.8602C216.736 15.6825 217.695 16.0963 218.89 16.0963C220.085 16.0963 221.044 15.6852 221.766 14.8602C222.489 14.038 222.85 12.9463 222.85 11.5852C222.85 10.2241 222.489 9.12412 221.766 8.3019C221.044 7.47968 220.085 7.06579 218.89 7.06579C217.695 7.06579 216.733 7.47968 216.01 8.30468C215.285 9.12968 214.924 10.2241 214.924 11.5852C214.924 12.9463 215.285 14.038 216.01 14.8602Z" fill="#F7F6F2"/>
+<path d="M236.728 5.43801V17.738H234.852L228.784 8.46857V17.738H226.908V5.43801H228.784L234.852 14.7241V5.43801H236.728Z" fill="#F7F6F2"/>
+</svg>

public/static/images/open-home-foundation-on-light.svg

@@ -0,0 +1,22 @@
+<svg width="237" height="24" viewBox="0 0 237 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.54181 0.297615C8.14709 -0.0992051 7.5012 -0.0992051 7.1082 0.297615L0.717655 6.72232C0.322945 7.11914 0 7.90248 0 8.46249V14.2894C0 14.8494 0.456224 15.3098 1.01497 15.3098H14.635C15.1921 15.3098 15.65 14.8511 15.65 14.2894V8.46249C15.65 7.90248 15.3271 7.11914 14.9324 6.72232L8.54181 0.297615Z" fill="#09202E"/>
+<path d="M14.8672 17.9182C15.2993 17.9182 15.6502 18.2684 15.6504 18.7004V22.4172C15.6504 22.8494 15.2994 23.2004 14.8672 23.2004H13.8896C13.4575 23.2004 13.1064 22.8494 13.1064 22.4172V20.4612H2.54297V22.4172C2.54297 22.8494 2.19285 23.2004 1.76074 23.2004H0.782227C0.350189 23.2003 0 22.8493 0 22.4172V18.7004C0.000147852 18.2685 0.350281 17.9184 0.782227 17.9182H14.8672Z" fill="#09202E"/>
+<path d="M28.0439 5.23999C28.9236 5.23999 29.7386 5.39833 30.4891 5.71709C31.2396 6.03377 31.8754 6.47337 32.3965 7.03381C32.9177 7.59425 33.3242 8.26511 33.616 9.05056C33.9058 9.83601 34.0517 10.684 34.0517 11.5965C34.0621 12.4986 33.9204 13.3445 33.6285 14.1383C33.3346 14.932 32.9239 15.6092 32.3965 16.1717C31.8691 16.7342 31.227 17.1759 30.4724 17.4947C29.7178 17.8155 28.9027 17.9697 28.0272 17.9593C26.8702 17.9759 25.83 17.7092 24.9086 17.1613C23.9872 16.6134 23.2764 15.8529 22.7761 14.88C22.2757 13.907 22.0339 12.8174 22.0506 11.6132C22.0402 10.711 22.1819 9.86518 22.4738 9.0714C22.7677 8.27761 23.1763 7.6005 23.7016 7.03381C24.2269 6.46921 24.8648 6.02544 25.6174 5.70668C26.3699 5.38791 27.1787 5.23166 28.0439 5.24207V5.23999ZM28.0584 15.5237C29.0966 15.5237 29.9179 15.1716 30.5245 14.4695C31.1312 13.7653 31.4334 12.809 31.4334 11.5965C31.4334 10.3839 31.1312 9.41308 30.5287 8.71096C29.9263 8.01094 29.1028 7.66092 28.0584 7.66092C27.0141 7.66092 26.1906 8.01094 25.5882 8.71096C24.9857 9.41099 24.6835 10.3735 24.6835 11.5965C24.6835 12.8195 24.9857 13.7799 25.5882 14.4779C26.1906 15.1758 27.0141 15.5258 28.0584 15.5258V15.5237Z" fill="#09202E"/>
+<path d="M44.9854 9.52558C44.9854 10.759 44.6123 11.7507 43.8681 12.5028C43.1239 13.2549 42.1108 13.632 40.8267 13.632H38.3898V17.7551H35.9028V5.45875H40.86C42.1483 5.45875 43.1572 5.82126 43.8889 6.54629C44.6206 7.27132 44.9854 8.26511 44.9854 9.5235V9.52558ZM42.3588 9.47766C42.3588 8.95681 42.19 8.52554 41.8502 8.18594C41.5104 7.84635 41.0205 7.67759 40.3785 7.67759H38.3898V11.4673H40.3785C41.0247 11.4673 41.5167 11.284 41.8544 10.9173C42.1921 10.5506 42.3588 10.0714 42.3588 9.47975V9.47766Z" fill="#09202E"/>
+<path d="M54.4829 17.7551H46.7386V5.45875H54.4829V7.82134H49.2234V10.4444H53.895V12.6445H49.2234V15.4154H54.4829V17.7551Z" fill="#09202E"/>
+<path d="M67.397 5.46083V17.7572H64.9268L59.5381 9.42974V17.7572H57.0678V5.46083H59.5381L64.9268 13.8049V5.46083H67.397Z" fill="#09202E"/>
+<path d="M74.4409 5.46083H76.9279V10.4319L81.8037 10.4485V5.46083H84.3074V17.7572H81.8037V12.6653L76.9279 12.632V17.7572H74.4409V5.46083Z" fill="#09202E"/>
+<path d="M92.133 5.23999C93.0127 5.23999 93.8278 5.39833 94.5782 5.71709C95.3287 6.03377 95.9645 6.47337 96.4856 7.03381C97.0068 7.59425 97.4133 8.26511 97.7051 9.05056C97.9949 9.83601 98.1408 10.684 98.1408 11.5965C98.1512 12.4986 98.0095 13.3445 97.7176 14.1383C97.4237 14.932 97.013 15.6092 96.4856 16.1717C95.9582 16.7342 95.3162 17.1759 94.5615 17.4947C93.8069 17.8155 92.9918 17.9697 92.1163 17.9593C90.9593 17.9759 89.9191 17.7092 88.9977 17.1613C88.0763 16.6134 87.3655 15.8529 86.8652 14.88C86.3649 13.907 86.1231 12.8174 86.1397 11.6132C86.1293 10.711 86.2711 9.86518 86.5629 9.0714C86.8568 8.27761 87.2654 7.6005 87.7907 7.03381C88.3161 6.46921 88.954 6.02544 89.7065 5.70668C90.459 5.38791 91.2679 5.23166 92.133 5.24207V5.23999ZM92.1476 15.5237C93.1857 15.5237 94.007 15.1716 94.6137 14.4695C95.2203 13.7653 95.5225 12.809 95.5225 11.5965C95.5225 10.3839 95.2203 9.41308 94.6178 8.71096C94.0154 8.01094 93.192 7.66092 92.1476 7.66092C91.1032 7.66092 90.2798 8.01094 89.6773 8.71096C89.0749 9.41099 88.7726 10.3735 88.7726 11.5965C88.7726 12.8195 89.0749 13.7799 89.6773 14.4779C90.2798 15.1758 91.1032 15.5258 92.1476 15.5258V15.5237Z" fill="#09202E"/>
+<path d="M112.408 5.46083V17.7572H109.954V11.034L107.321 17.7572H104.966L102.364 11.084V17.7572H99.9919V5.46083H102.364L106.148 14.855L109.954 5.46083H112.408Z" fill="#09202E"/>
+<path d="M122.762 17.7551H115.018V5.45875H122.762V7.82134H117.503V10.4444H122.174V12.6445H117.503V15.4154H122.762V17.7551Z" fill="#09202E"/>
+<path d="M131.526 7.21555V10.9072H136.254V12.5933H131.526V17.7405H129.65V5.44054H137.146V7.21555H131.526Z" fill="#09202E"/>
+<path d="M144.303 5.24055C145.156 5.22943 145.956 5.38499 146.699 5.70443C147.441 6.02388 148.074 6.46555 148.597 7.02943C149.117 7.59332 149.525 8.2711 149.82 9.05721C150.114 9.8461 150.256 10.6878 150.245 11.585C150.256 12.4878 150.114 13.3378 149.82 14.1294C149.525 14.9239 149.117 15.5989 148.597 16.1628C148.077 16.7239 147.443 17.1655 146.699 17.485C145.954 17.8044 145.156 17.96 144.303 17.9489C143.449 17.96 142.652 17.8044 141.91 17.485C141.168 17.1655 140.537 16.7239 140.017 16.16C139.497 15.5961 139.089 14.9183 138.797 14.1322C138.505 13.3461 138.363 12.5017 138.374 11.6044C138.363 10.7072 138.505 9.86277 138.797 9.07388C139.089 8.28499 139.494 7.60721 140.017 7.04055C140.537 6.47666 141.168 6.03221 141.91 5.70999C142.652 5.38777 143.449 5.23221 144.303 5.24332V5.24055ZM141.44 14.86C142.165 15.6822 143.124 16.0961 144.319 16.0961C145.515 16.0961 146.473 15.685 147.196 14.86C147.919 14.0378 148.28 12.9461 148.28 11.585C148.28 10.2239 147.919 9.12388 147.196 8.30166C146.473 7.47943 145.515 7.06555 144.319 7.06555C143.124 7.06555 142.163 7.47943 141.44 8.30443C140.715 9.12943 140.353 10.2239 140.353 11.585C140.353 12.9461 140.715 14.0378 141.44 14.86Z" fill="#09202E"/>
+<path d="M154.097 5.43777V13.3017C154.103 14.2378 154.378 14.9461 154.923 15.4239C155.467 15.9044 156.184 16.1433 157.071 16.1433C157.958 16.1433 158.636 15.8905 159.203 15.3878C159.77 14.885 160.053 14.1878 160.053 13.3017V5.43777H161.929V13.3767C161.929 14.0989 161.799 14.7517 161.54 15.3378C161.282 15.9239 160.929 16.4072 160.487 16.7822C160.042 17.16 159.531 17.4489 158.944 17.6544C158.358 17.86 157.735 17.96 157.068 17.96C156.401 17.96 155.804 17.86 155.226 17.6628C154.647 17.4655 154.131 17.1794 153.68 16.8072C153.227 16.435 152.871 15.9544 152.61 15.3628C152.349 14.7711 152.218 14.1072 152.218 13.3767V5.43777H154.097Z" fill="#09202E"/>
+<path d="M174.473 5.43777V17.7378H172.597L166.529 8.46832V17.7378H164.653V5.43777H166.529L172.597 14.7239V5.43777H174.473Z" fill="#09202E"/>
+<path d="M187.583 11.6017C187.588 12.4822 187.436 13.31 187.124 14.0794C186.813 14.8517 186.382 15.5072 185.835 16.0461C185.287 16.585 184.628 17.0072 183.859 17.31C183.089 17.6128 182.269 17.7572 181.391 17.7405H177.291V5.44054H181.391C182.547 5.42388 183.603 5.67943 184.553 6.20999C185.504 6.73777 186.249 7.47666 186.788 8.42388C187.327 9.3711 187.591 10.4322 187.583 11.6044V11.6017ZM185.59 11.6017C185.59 10.3017 185.204 9.2461 184.428 8.43499C183.653 7.62388 182.636 7.21555 181.374 7.21555H179.184V15.9961H181.374C182.647 15.9961 183.667 15.5933 184.437 14.785C185.207 13.9794 185.59 12.9155 185.59 11.6017Z" fill="#09202E"/>
+<path d="M195.821 14.7822H190.91L189.843 17.7405H187.916L192.363 5.44054H194.381L198.853 17.7405H196.869L195.818 14.7822H195.821ZM195.276 13.1878L193.383 7.82666L191.474 13.1878H195.276Z" fill="#09202E"/>
+<path d="M207.278 7.21555H203.706V17.7405H201.813V7.21555H198.242V5.44054H207.275V7.21555H207.278Z" fill="#09202E"/>
+<path d="M208.973 17.7378V5.43777H210.866V17.7378H208.973Z" fill="#09202E"/>
+<path d="M218.873 5.24055C219.726 5.22943 220.527 5.38499 221.269 5.70443C222.014 6.02388 222.645 6.46555 223.167 7.02943C223.687 7.59332 224.095 8.2711 224.39 9.05721C224.685 9.8461 224.826 10.6878 224.815 11.585C224.826 12.4878 224.685 13.3378 224.39 14.1294C224.095 14.9239 223.687 15.5989 223.167 16.1628C222.647 16.7239 222.014 17.1655 221.269 17.485C220.524 17.8044 219.726 17.96 218.873 17.9489C218.02 17.96 217.222 17.8044 216.48 17.485C215.738 17.1655 215.107 16.7239 214.587 16.16C214.067 15.5961 213.659 14.9183 213.367 14.1322C213.075 13.3461 212.933 12.5017 212.945 11.6044C212.933 10.7072 213.075 9.86277 213.367 9.07388C213.659 8.28499 214.065 7.60721 214.587 7.04055C215.107 6.47666 215.738 6.03221 216.48 5.70999C217.222 5.38777 218.02 5.23221 218.873 5.24332V5.24055ZM216.01 14.86C216.736 15.6822 217.695 16.0961 218.89 16.0961C220.085 16.0961 221.044 15.685 221.766 14.86C222.489 14.0378 222.85 12.9461 222.85 11.585C222.85 10.2239 222.489 9.12388 221.766 8.30166C221.044 7.47943 220.085 7.06555 218.89 7.06555C217.695 7.06555 216.733 7.47943 216.01 8.30443C215.285 9.12943 214.924 10.2239 214.924 11.585C214.924 12.9461 215.285 14.0378 216.01 14.86Z" fill="#09202E"/>
+<path d="M236.728 5.43777V17.7378H234.852L228.784 8.46832V17.7378H226.908V5.43777H228.784L234.852 14.7239V5.43777H236.728Z" fill="#09202E"/>
+</svg>

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20260624.0"
+version      = "20260729.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"