Refactor state function

Return computed color for state color instead of css variable
2026-06-15 12:52:07 +00:00 · 2025-09-15 09:21:52 +02:00 · 2025-09-12 18:53:05 +02:00
2311 changed files with 90189 additions and 209810 deletions
@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/devcontainers/python:3.14
+FROM mcr.microsoft.com/devcontainers/python:1-3.13

 ENV \
  DEBIAN_FRONTEND=noninteractive \
@@ -67,7 +67,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
  If your issue is about how an entity is shown in the UI, please add the state
  and attributes for all situations with a screenshot of the UI.
-  You can find this information at `/config/developer-tools/state`
+  You can find this information at `/developer-tools/state`
 -->

 ```yaml
@@ -3,9 +3,6 @@ contact_links:
  - name: Request a feature for the UI / Dashboards
    url: https://github.com/orgs/home-assistant/discussions
    about: Request a new feature for the Home Assistant frontend.
-  - name: Discuss UI or UX design
-    url: https://github.com/OpenHomeFoundation/ux-design/discussions
-    about: Share design feedback and discuss visual or UX changes with the design team.
  - name: Report a bug that is NOT related to the UI / Dashboards
    url: https://github.com/home-assistant/core/issues
    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.
@@ -21,14 +21,6 @@
 -->


-## Screenshots
-<!--
-  If your PR includes visual changes, please add screenshots or a short video
-  showing the before and after. This helps reviewers understand the impact of
-  your changes.
-  Note: Remove this section if this PR has no visual changes.
-->
-
 ## Type of change
 <!--
  What type of change does your PR introduce to the Home Assistant frontend?
@@ -43,6 +35,16 @@
 - [ ] Breaking change (fix/feature causing existing functionality to break)
 - [ ] Code quality improvements to existing code or addition of tests

+## Example configuration
+<!--
+  Supplying a configuration snippet, makes it easier for a maintainer to test
+  your PR.
+-->
+
+```yaml
+
+```
+
 ## Additional information
 <!--
  Details are important, and help maintainers processing your PR.
@@ -52,8 +54,6 @@
 - This PR fixes or closes issue: fixes #
 - This PR is related to issue or discussion:
 - Link to documentation pull request:
- Link to developer documentation pull request:
- Link to backend pull request:

 ## Checklist
 <!--
@@ -61,48 +61,18 @@
  creating the PR. If you're unsure about any of them, don't hesitate to ask.
  We're here to help! This is simply a reminder of what we are going to look
  for before merging your code.
-
-  AI tools are welcome, but contributors are responsible for *fully*
-  understanding the code before submitting a PR.
 -->

- [ ] I understand the code I am submitting and can explain how it works.
 - [ ] The code change is tested and works locally.
 - [ ] There is no commented out code in this PR.
- [ ] I have followed the [perfect PR recommendations][perfect-pr]
- [ ] Any generated code has been carefully reviewed for correctness and compliance with project standards.
+- [ ] Tests have been added to verify that the new code works.

 If user exposed functionality or configuration variables are added/changed:

 - [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]

-<!--
-  This project is very active and we have a high turnover of pull requests.
-
-  Unfortunately, the number of incoming pull requests is higher than what our
-  reviewers can review and merge so there is a long backlog of pull requests
-  waiting for review. You can help here!
-
-  By reviewing another pull request, you will help raise the code quality of
-  that pull request and the final review will be faster. This way the general
-  pace of pull request reviews will go up and your wait time will go down.
-
-  When picking a pull request to review, try to choose one that hasn't yet
-  been reviewed.
-
-  Thanks for helping out!
-->
-
-To help with the load of incoming pull requests:
-
- [ ] I have reviewed two other [open pull requests][prs] in this repository.
-
-[prs]: https://github.com/home-assistant/frontend/pulls?q=is%3Aopen+is%3Apr+-author%3A%40me+-draft%3Atrue+sort%3Acreated-desc+review%3Anone+-status%3Afailure
-
 <!--
  Thank you for contributing <3
-
-  Below, some useful links you could explore:
 -->
+
 [docs-repository]: https://github.com/home-assistant/home-assistant.io
-[perfect-pr]: https://developers.home-assistant.io/docs/review-process/#creating-the-perfect-pr
@@ -2,13 +2,10 @@

 You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.

-**Note**: This file contains high-level guidelines and references to implementation patterns. For gallery-specific documentation, demos, page structure, and usage examples, see [`gallery/AGENTS.md`](gallery/AGENTS.md).
-
 ## Table of Contents

 - [Quick Reference](#quick-reference)
 - [Core Architecture](#core-architecture)
- [State Access: Contexts Instead of `hass`](#state-access-contexts-instead-of-hass)
 - [Development Standards](#development-standards)
 - [Component Library](#component-library)
 - [Common Patterns](#common-patterns)
@@ -23,13 +20,11 @@ You are an assistant helping with development of the Home Assistant frontend. Th
 ```bash
 yarn lint          # ESLint + Prettier + TypeScript + Lit
 yarn format        # Auto-fix ESLint + Prettier
-yarn lint:types    # TypeScript compiler (run WITHOUT file arguments)
+yarn lint:types    # TypeScript compiler
 yarn test          # Vitest
 script/develop     # Development server
 ```

-> **WARNING:** Never run `tsc` or `yarn lint:types` with file arguments (e.g., `yarn lint:types src/file.ts`). When `tsc` receives file arguments, it ignores `tsconfig.json` and emits `.js` files into `src/`, polluting the codebase. Always run `yarn lint:types` without arguments. For individual file type checking, rely on IDE diagnostics. If `.js` files are accidentally generated, clean up with `git clean -fd src/`.
-
 ### Component Prefixes

 - `ha-` - Home Assistant components
@@ -41,7 +36,7 @@ script/develop     # Development server
 ```typescript
 import type { HomeAssistant } from "../types";
 import { fireEvent } from "../common/dom/fire_event";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
+import { showAlertDialog } from "../dialogs/generic/show-alert-dialog";
 ```

 ## Core Architecture
@@ -53,64 +48,13 @@ The Home Assistant frontend is a modern web application that:
 - Communicates with the backend via WebSocket API
 - Provides comprehensive theming and internationalization

-## State Access: Contexts Instead of `hass`
-
-Every component used to take the whole `hass: HomeAssistant` object — a god-object that re-renders on any unrelated `hass` change, forces tests to mock everything, and hides what a component actually reads. We're moving leaf components to **fine-grained [Lit context](https://lit.dev/docs/data/context/)**: consume only the slice you need and re-render only when it changes.
-
-For new code, consume the matching context instead of adding a `hass` property. `hass` stays for container components that own it and feed the providers; the canonical migration is [`hui-button-card.ts`](src/panels/lovelace/cards/hui-button-card.ts). Infrastructure: contexts in [`src/data/context/index.ts`](src/data/context/index.ts), the `consume…` helpers in [`src/common/decorators/consume-context-entry.ts`](src/common/decorators/consume-context-entry.ts), and `@transform` in [`src/common/decorators/transform.ts`](src/common/decorators/transform.ts). Providers are wired automatically by `contextMixin` on `HassBaseEl` — you only consume.
-
-### Contexts
-
-Consume the narrowest context that covers your reads:
-
-| Context                                                                 | Replaces                                                                                  |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `statesContext`                                                         | `hass.states`                                                                             |
-| `entitiesContext` / `devicesContext` / `areasContext` / `floorsContext` | `hass.entities` / `.devices` / `.areas` / `.floors` (or `registriesContext` for all four) |
-| `servicesContext`                                                       | `hass.services`                                                                           |
-| `internationalizationContext`                                           | `hass.localize`, `hass.locale`, `hass.language`                                           |
-| `formattersContext`                                                     | `hass.formatEntityName`, `hass.formatEntityState`, `hass.formatEntityAttributeName`, …    |
-| `configContext`                                                         | `hass.config`, `hass.user`, `hass.auth`, `hass.userData`                                  |
-| `connectionContext`                                                     | `hass.connection`, `hass.connected`, `hass.hassUrl`                                       |
-| `apiContext`                                                            | `hass.callService`, `hass.callApi`, `hass.callWS`, `hass.sendWS`, `hass.fetchWithAuth`    |
-| `uiContext`                                                             | `hass.themes`, `hass.selectedTheme`, `hass.panels`, `hass.dockedSidebar`, …               |
-| `narrowViewportContext`                                                 | narrow-layout boolean                                                                     |
-
-Lazy contexts (subscribe on first consumer, tear down after the last): `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, `manifestsContext`. The single-field contexts (`localizeContext`, `themesContext`, `userContext`, …) are **deprecated** — use the grouped ones above.
-
-### Consuming
-
-Use the `consume…` helpers for entity-scoped and `localize` reads. `entityIdPath` is resolved against `this`, so these watch `this._config.entity`:
-
-```ts
-@state() @consumeEntityState({ entityIdPath: ["_config", "entity"] })
-private _stateObj?: HassEntity; // consumeEntityStates(...) for a record of several
-
-@state() @consumeEntityRegistryEntry({ entityIdPath: ["_config", "entity"] })
-private _entity?: EntityRegistryDisplayEntry;
-
-@state() @consumeLocalize()
-private _localize!: LocalizeFunc;
-```
-
-For any other single field, pair `@consume` with `@transform`:
-
-```ts
-@state()
-@consume({ context: uiContext, subscribe: true })
-@transform<HomeAssistantUI, Themes>({ transformer: ({ themes }) => themes })
-private _themes!: Themes;
-```
-
-`@transform`'s `watch` option re-runs the transformer when a host prop changes — needed when an entity id is computed, since `consumeEntityState` only watches the first path segment. To consume a whole group untransformed, drop `@transform` and type it `ContextType<typeof statesContext>`.
-
 ## Development Standards

 ### Code Quality Requirements

 **Linting and Formatting (Enforced by Tools)**

- ESLint config (flat config) extends TypeScript strict, Lit, Web Components, Accessibility (lit-a11y), and import-x
+- ESLint config extends Airbnb, TypeScript strict, Lit, Web Components, Accessibility
 - Prettier with ES5 trailing commas enforced
 - No console statements (`no-console: "error"`) - use proper logging
 - Import organization: No unused imports, consistent type imports
@@ -188,7 +132,6 @@ export class HaMyComponent extends LitElement {
 ### Data Management

 - **Use WebSocket API**: All backend communication via home-assistant-js-websocket
- **Prefer contexts over `hass`**: For state reads, consume the relevant Lit context instead of taking the whole `hass` object — see [State Access: Contexts Instead of `hass`](#state-access-contexts-instead-of-hass)
 - **Cache appropriately**: Use collections and caching for frequently accessed data
 - **Handle errors gracefully**: All API calls should have error handling
 - **Update real-time**: Subscribe to state changes for live updates
@@ -208,73 +151,29 @@ try {
 ### Styling Guidelines

 - **Use CSS custom properties**: Leverage the theme system
- **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
-  - Defined in `src/resources/theme/core.globals.ts`
-  - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop
- **Prefer `ha-*` components**: Build on the Home Assistant component library (many now wrap Web Awesome components); avoid new use of legacy Material Web Components (`mwc-*`), which are being phased out
+- **Follow Material Design**: Use Material Web Components where appropriate
 - **Support RTL**: Ensure all layouts work in RTL languages

 ```typescript
 static get styles() {
  return css`
    :host {
-      padding: var(--ha-space-4);
+      --spacing: 16px;
+      padding: var(--spacing);
      color: var(--primary-text-color);
      background-color: var(--card-background-color);
    }

-    .content {
-      gap: var(--ha-space-2);
-    }
-
    @media (max-width: 600px) {
      :host {
-        padding: var(--ha-space-2);
+        --spacing: 8px;
      }
    }
  `;
 }
 ```

-### View Transitions
-
-The View Transitions API creates smooth animations between DOM state changes. When implementing view transitions:
-
-**Core Resources:**
-
- **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback
- **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection
- **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations
- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-duration-fast` (150ms), `--ha-animation-duration-normal` (250ms), `--ha-animation-duration-slow` (350ms) (all respect `prefers-reduced-motion`)
-
-**Implementation Guidelines:**
-
-1. Always use `withViewTransition()` wrapper for automatic fallback
-2. Keep transitions simple (subtle crossfades and fades work best)
-3. Use `--ha-animation-duration-*` CSS variables for consistent timing (`fast`, `normal`, `slow`)
-4. Assign unique `view-transition-name` to elements (must be unique at any given time)
-5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements
-
-**Default Root Transition:**
-
-By default, `:root` receives `view-transition-name: root`, creating a full-page crossfade. Target with [`::view-transition-group(root)`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group) to customize the default page transition.
-
-**Important Constraints:**
-
- Each `view-transition-name` must be unique at any given time
- Only one view transition can run at a time
- **Shadow DOM incompatibility**: View transitions operate at document level and do not work within Shadow DOM due to style isolation ([spec discussion](https://github.com/w3c/csswg-drafts/issues/10303)). For web components, set `view-transition-name` on the `:host` element or use document-level transitions
-
-**Specification & Documentation:**
-
-For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
-
- [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) - Comprehensive API reference
- [Chrome for Developers: View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions) - Implementation guide and examples
- [W3C Draft Specification](https://drafts.csswg.org/css-view-transitions/) - Official specification (evolving)
-
 ### Performance Best Practices

 - **Code split**: Split code at the panel/dialog level
@@ -289,11 +188,15 @@ For browser support, API details, and current specifications, refer to these aut
 - **Test with Vitest**: Use the established test framework
 - **Mock appropriately**: Mock WebSocket connections and API calls
 - **Test accessibility**: Ensure components are accessible
- **Optimizing chart data processing**: When optimizing chart data transforms (history, statistics, energy, downsampling), follow the playbook in [`test/benchmarks/README.md`](test/benchmarks/README.md) — it has seeded fixtures, characterization (snapshot) tests that pin current output, and `vitest bench` benchmarks (`yarn test:bench`) for before/after comparison. Optimizations must keep output bit-identical.

 ## Component Library

-### Dialog Component
+### Dialog Components
+
+**Available Dialog Types:**
+
+- `ha-md-dialog` - Preferred for new code (Material Design 3)
+- `ha-dialog` - Legacy component still widely used

 **Opening Dialogs (Fire Event Pattern - Recommended):**

@@ -307,43 +210,20 @@ fireEvent(this, "show-dialog", {

 **Dialog Implementation Requirements:**

- Use `ha-dialog` component
 - Implement `HassDialog<T>` interface
- Use `@state() private _open = false` to control dialog visibility
- Set `_open = true` in `showDialog()`, `_open = false` in `closeDialog()`
+- Use `createCloseHeading()` for standard headers
+- Import `haStyleDialog` for consistent styling
 - Return `nothing` when no params (loading state)
- Fire `dialog-closed` event in `_dialogClosed()` handler
- Use `header-title` attribute for simple titles
- Use `header-subtitle` attribute for simple subtitles
- Use slots for custom content where the standard attributes are not enough
- Use `ha-dialog-footer` with `primaryAction`/`secondaryAction` slots for footer content
- Add `autofocus` to first focusable element (e.g., `<ha-form autofocus>`). The component may need to forward this attribute internally.
+- Fire `dialog-closed` event when closing
+- Add `dialogInitialFocus` for accessibility

-**Dialog Sizing:**
-
- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (580px - default), `"large"` (1024px), or `"full"`
- Custom sizing is NOT recommended - use the standard width presets
-
-**Button Appearance Guidelines:**
-
-`ha-button` (wraps the Web Awesome button — see `src/components/ha-button.ts`) has two independent axes plus size:
-
- **`variant`** (color): `"brand"` (default), `"neutral"`, `"danger"`, `"warning"`, `"success"`
- **`appearance`** (fill style): `"accent"`, `"filled"`, `"outlined"`, `"plain"`
- **`size`**: `"xs"` (extra small, 40px), `"s"` (small, 32px), `"m"` (medium, 40px - default), `"l"` (large, 48px), `"xl"` (extra large, 40px)
-
-Common patterns:
-
- **Primary action**: `appearance="filled"` for emphasis (or the default appearance for a lighter look)
- **Secondary action**: `appearance="plain"` for cancel/dismiss actions
- **Destructive actions**: `variant="danger"` for delete/remove operations (the generic confirmation dialog uses `variant="danger"` for its confirm button — see `src/dialogs/generic/dialog-box.ts`)
- Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
+````

 ### Form Component (ha-form)
-
 - Schema-driven using `HaFormSchema[]`
 - Supports entity, device, area, target, number, boolean, time, action, text, object, select, icon, media, location selectors
 - Built-in validation with error display
+- Use `dialogInitialFocus` in dialogs
 - Use `computeLabel`, `computeError`, `computeHelper` for translations

 ```typescript
@@ -355,13 +235,12 @@ Common patterns:
  .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
  @value-changed=${this._valueChanged}
 ></ha-form>
-```
+````

 ### Alert Component (ha-alert)

 - Types: `error`, `warning`, `info`, `success`
- Properties: `title`, `alert-type`, `dismissable`, `narrow`
- Slots: `icon` (override the leading icon), `action` (custom action content)
+- Properties: `title`, `alert-type`, `dismissable`, `icon`, `action`, `rtl`
 - Content announced by screen readers when dynamically displayed

 ```html
@@ -370,30 +249,6 @@ Common patterns:
 <ha-alert alert-type="success" dismissable>Success message</ha-alert>
 ```

-### Keyboard Shortcuts (ShortcutManager)
-
-The `ShortcutManager` class provides a unified way to register keyboard shortcuts with automatic input field protection.
-
-**Key Features:**
-
- Automatically blocks shortcuts when input fields are focused
- Prevents shortcuts during text selection (configurable via `allowWhenTextSelected`)
- Supports both character-based and KeyCode-based shortcuts (for non-latin keyboards)
-
-**Implementation:**
-
- **Class definition**: `src/common/keyboard/shortcuts.ts`
- **Real-world example**: `src/state/quick-bar-mixin.ts` - Global shortcuts (e, c, d, m, a, Shift+?) with non-latin keyboard fallbacks
-
-### Tooltip Component (ha-tooltip)
-
-The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming. Use for providing contextual help text on hover.
-
-**Implementation:**
-
- **Component definition**: `src/components/ha-tooltip.ts`
- **Usage example**: `src/components/ha-label.ts`
-
 ## Common Patterns

 ### Creating a Panel
@@ -420,9 +275,72 @@ export class HaPanelMyFeature extends SubscribeMixin(LitElement) {
 }
 ```

+### Creating a Dialog
+
+```typescript
+@customElement("dialog-my-feature")
+export class DialogMyFeature
+  extends LitElement
+  implements HassDialog<MyDialogParams>
+{
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @state()
+  private _params?: MyDialogParams;
+
+  public async showDialog(params: MyDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(this.hass, this._params.title)}
+      >
+        <!-- Dialog content -->
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button @click=${this._submit} slot="primaryAction">
+          ${this.hass.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
+    `;
+  }
+
+  static styles = [haStyleDialog, css``];
+}
+```
+
+### Dialog Design Guidelines
+
+- Max width: 560px (Alert/confirmation: 320px fixed width)
+- Close X-icon on top left (all screen sizes)
+- Submit button grouped with cancel at bottom right
+- Keep button labels short: "Save", "Delete", "Enable"
+- Destructive actions use red warning button
+- Always use a title (best practice)
+- Strive for minimalism
+
 #### Creating a Lovelace Card

-**Purpose**: Cards allow users to tell different stories about their house.
+**Purpose**: Cards allow users to tell different stories about their house (based on gallery)

 ```typescript
@customElement("hui-my-card")
@@ -495,13 +413,9 @@ this.hass.localize("ui.panel.config.updates.update_available", {
 4. **Test**: `yarn test` - Add and run tests
 5. **Build**: `script/build_frontend` - Test production build

-### Gallery
-
-For Gallery-specific structure, page/demo naming, sidebar behavior, content standards, and commands, see [`gallery/AGENTS.md`](gallery/AGENTS.md).
-
 ### Common Pitfalls to Avoid

- Don't manually query the DOM with `querySelector` - use the `@query`/`@queryAll` decorators or component properties
+- Don't use `querySelector` - Use refs or component properties
 - Don't manipulate DOM directly - Let Lit handle rendering
 - Don't use global styles - Scope styles to components
 - Don't block the main thread - Use web workers for heavy computation
@@ -514,22 +428,11 @@ For Gallery-specific structure, page/demo naming, sidebar behavior, content stan
 - Use HTTPS - All external resources must use HTTPS
 - CSP compliance - Ensure code works with Content Security Policy

-### Pull Requests
-
-When creating a pull request, you **must** use the PR template located at `.github/PULL_REQUEST_TEMPLATE.md`. Read the template file and use its full content as the PR body, filling in each section appropriately.
-
- Do not omit, reorder, or rewrite the template sections
- Check the appropriate "Type of change" box based on the changes
- Do not check the checklist items on behalf of the user — those are the user's responsibility to review and check
- If the PR includes UI changes, remind the user to add screenshots or a short video to the PR after creating it
- Be simple and user friendly — explain what the change does, not implementation details
- Use markdown so the user can copy it
-
 ### Text and Copy Guidelines

 #### Terminology Standards

-**Delete vs Remove**
+**Delete vs Remove** (Based on gallery/src/pages/Text/remove-delete-add-create.markdown)

 - **Use "Remove"** for actions that can be restored or reapplied:
  - Removing a user's permission
@@ -587,29 +490,41 @@ When creating a pull request, you **must** use the PR template located at `.gith

 #### Key Terminology

+- **"add-on"** (hyphenated, not "addon")
 - **"integration"** (preferred over "component")
 - **Technical terms**: Use lowercase (automation, entity, device, service)

 #### Translation Considerations

-All user-facing text must be translatable — see the **Internationalization** section (under Common Patterns) for the `localize` API and placeholder usage. From a copy perspective:
-
+- **Add translation keys**: All user-facing text must be translatable
+- **Use placeholders**: Support dynamic content in translations
 - **Keep context**: Provide enough context for translators
- **Avoid concatenation**: Prefer full localized strings with placeholders over stitching translated fragments together
+
+```typescript
+// Good
+this.hass.localize("ui.panel.config.automation.delete_confirm", {
+  name: automation.alias,
+});
+
+// Bad - hardcoded text
+("Are you sure you want to delete this automation?");
+```

 ### Common Review Issues (From PR Analysis)

-Recurring, easy-to-miss problems surfaced in real PR reviews. These complement the standards above rather than repeating them — items already covered earlier (loading states, error handling, mobile layout, theming, import hygiene) are intentionally not duplicated here.
-
 #### User Experience and Accessibility

 - **Form validation**: Always provide proper field labels and validation feedback
 - **Form accessibility**: Prevent password managers from incorrectly identifying fields
+- **Loading states**: Show clear progress indicators during async operations
+- **Error handling**: Display meaningful error messages when operations fail
+- **Mobile responsiveness**: Ensure components work well on small screens
 - **Hit targets**: Make clickable areas large enough for touch interaction
- **Visual feedback**: Provide clear indication of interactive states (hover, active, focus)
+- **Visual feedback**: Provide clear indication of interactive states

 #### Dialog and Modal Patterns

+- **Dialog width constraints**: Respect minimum and maximum width requirements
 - **Interview progress**: Show clear progress for multi-step operations
 - **State persistence**: Handle dialog state properly during background operations
 - **Cancel behavior**: Ensure cancel/close buttons work consistently
@@ -621,12 +536,15 @@ Recurring, easy-to-miss problems surfaced in real PR reviews. These complement t
 - **Visual hierarchy**: Ensure proper font sizes and spacing ratios
 - **Grid alignment**: Components should align to the design grid system
 - **Badge placement**: Position badges and indicators consistently
+- **Color theming**: Respect theme variables and design system colors

 #### Code Quality Issues

 - **Null checking**: Always check if entities exist before accessing properties
 - **TypeScript safety**: Handle potentially undefined array/object access
- **Event handling and cleanup**: Subscribe/unsubscribe correctly and remove listeners to avoid memory leaks
+- **Import organization**: Remove unused imports and use proper type imports
+- **Event handling**: Properly subscribe and unsubscribe from events
+- **Memory leaks**: Clean up subscriptions and event listeners

 #### Configuration and Props

@@ -637,12 +555,42 @@ Recurring, easy-to-miss problems surfaced in real PR reviews. These complement t

 ## Review Guidelines

-Final pre-submission checklist. Linting and formatting are enforced by tooling, so this focuses on what tools can't catch rather than restating every rule above.
+### Core Requirements Checklist

- [ ] `yarn lint` passes (TypeScript, ESLint, Prettier, Lit analyzer) and `yarn test` is green
- [ ] Tests added for new data processing/utilities (where applicable)
- [ ] All user-facing text is localized and follows the Text and Copy guidelines (sentence case, "Home Assistant" in full, Delete/Remove + Create/Add)
+- [ ] TypeScript strict mode passes (`yarn lint:types`)
+- [ ] No ESLint errors or warnings (`yarn lint:eslint`)
+- [ ] Prettier formatting applied (`yarn lint:prettier`)
+- [ ] Lit analyzer passes (`yarn lint:lit`)
+- [ ] Component follows Lit best practices
+- [ ] Proper error handling implemented
+- [ ] Loading states handled
+- [ ] Mobile responsive
+- [ ] Theme variables used
+- [ ] Translations added
+- [ ] Accessible to screen readers
+- [ ] Tests added (where applicable)
+- [ ] No console statements (use proper logging)
+- [ ] Unused imports removed
+- [ ] Proper naming conventions
+
+### Text and Copy Checklist
+
+- [ ] Follows terminology guidelines (Delete vs Remove, Create vs Add)
+- [ ] Localization keys added for all user-facing text
+- [ ] Uses "Home Assistant" (never "HA" or "HASS")
+- [ ] Sentence case for ALL text (titles, headings, buttons, labels)
+- [ ] American English spelling
+- [ ] Friendly, informational tone
+- [ ] Avoids abbreviations and jargon
+- [ ] Correct terminology (add-on not addon, integration not component)
+
+### Component-Specific Checks
+
+- [ ] Dialogs implement HassDialog interface
+- [ ] Dialog styling uses haStyleDialog
+- [ ] Dialog accessibility includes dialogInitialFocus
+- [ ] ha-alert used correctly for messages
+- [ ] ha-form uses proper schema structure
 - [ ] Components handle all states (loading, error, unavailable)
 - [ ] Entity existence checked before property access
- [ ] Event/subscription listeners cleaned up (no memory leaks)
- [ ] Accessible to screen readers and keyboard
+- [ ] Event subscriptions properly cleaned up
@@ -5,8 +5,6 @@ updates:
    schedule:
      interval: weekly
      time: "06:00"
-    cooldown:
-      default-days: 7
    open-pull-requests-limit: 10
    labels:
      - Dependencies
@@ -44,3 +44,8 @@ GitHub Actions:
      - any-glob-to-any-file:
          - .github/workflows/**
          - .github/*.yml
+
+Supervisor:
+  - changed-files:
+      - any-glob-to-any-file:
+          - hassio/src/**
@@ -1,50 +0,0 @@
-name: Blocking labels
-
-on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - reopened
-      - labeled
-      - unlabeled
-    branches:
-      - dev
-      - master
-
-permissions:
-  contents: read
-
-jobs:
-  check:
-    name: Check for labels which block the Pull Request from being merged
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check for blocking labels
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            const blockingLabels = [
-              "wait for backend",
-              "Needs UX",
-              "Do Not Review",
-              "Blocked",
-              "has-parent",
-            ];
-            const prLabels = context.payload.pull_request.labels.map(
-              (l) => l.name
-            );
-            const found = blockingLabels.filter((bl) => prLabels.includes(bl));
-            if (found.length > 0) {
-              const message = `This Pull Request is blocked by label${found.length > 1 ? "s" : ""}: ${found.join(", ")}`;
-              await core.summary
-                .addHeading(":no_entry_sign: Pull Request is blocked", 2)
-                .addRaw(message)
-                .write();
-              core.setFailed(message);
-            } else {
-              await core.summary
-                .addHeading(":white_check_mark: Pull Request is clear to merge after review", 2)
-                .addRaw("This Pull Request is not blocked by any labels which prevent it from being merged.")
-                .write();
-            }
@@ -8,9 +8,6 @@ on:
    branches:
      - master

-permissions:
-  contents: read
-
 env:
  NODE_OPTIONS: --max_old_space_size=6144

@@ -24,13 +21,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev
-          persist-credentials: false

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -60,13 +56,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@v5.0.0
        with:
          ref: master
-          persist-credentials: false

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -18,20 +18,15 @@ concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

-permissions:
-  contents: read
-
 jobs:
  lint:
    name: Lint and check format
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -42,7 +37,7 @@ jobs:
      - name: Build resources
        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
      - name: Setup lint cache
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@v4.2.4
        with:
          path: |
            node_modules/.cache/prettier
@@ -58,18 +53,14 @@ jobs:
        run: yarn run lint:lit --quiet
      - name: Run prettier
        run: yarn run lint:prettier
-      - name: Check dependency licenses
-        run: yarn run lint:licenses
  test:
    name: Run tests
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -85,11 +76,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -100,15 +89,32 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
          if-no-files-found: error
-      - name: Upload frontend build
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+  supervisor:
+    name: Build supervisor
+    needs: [lint, test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@v5.0.0
+      - name: Setup Node
+        uses: actions/setup-node@v5.0.0
        with:
-          name: frontend-build
-          path: hass_frontend/
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Build Application
+        run: ./node_modules/.bin/gulp build-hassio
+        env:
+          IS_TEST: "true"
+      - name: Upload bundle stats
+        uses: actions/upload-artifact@v4.6.2
+        with:
+          name: supervisor-bundle-stats
+          path: build/stats/*.json
          if-no-files-found: error
-          retention-days: 7
@@ -7,10 +7,6 @@ on:
    # The branches below must be a subset of the branches above
    branches: [dev]

-permissions:
-  contents: read
-  security-events: write
-
 jobs:
  analyze:
    name: Analyze
@@ -27,12 +23,11 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@v5.0.0
        with:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
          fetch-depth: 2
-          persist-credentials: false

      # If this run was triggered by a pull request event, then checkout
      # the head of the pull request instead of the merge commit.
@@ -41,14 +36,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/init@v3
        with:
          languages: ${{ matrix.language }}

      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/autobuild@v3

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 https://git.io/JvXDl
@@ -62,4 +57,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/analyze@v3
@@ -9,9 +9,6 @@ on:
      - dev
      - master

-permissions:
-  contents: read
-
 env:
  NODE_OPTIONS: --max_old_space_size=6144

@@ -25,13 +22,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev
-          persist-credentials: false

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -61,13 +57,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@v5.0.0
        with:
          ref: master
-          persist-credentials: false

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -5,9 +5,6 @@ on:
  schedule:
    - cron: "0 0 * * *"

-permissions:
-  contents: read
-
 env:
  NODE_OPTIONS: --max_old_space_size=6144

@@ -19,12 +16,10 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -10,9 +10,6 @@ on:
    branches:
      - dev

-permissions:
-  contents: read
-
 env:
  NODE_OPTIONS: --max_old_space_size=6144

@@ -24,12 +21,10 @@ jobs:
    if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -1,6 +1,6 @@
 name: "Pull Request Labeler"

-on: pull_request_target # zizmor: ignore[dangerous-triggers] -- safe: only runs actions/labeler, no PR code checkout
+on: pull_request_target

 jobs:
  triage:
@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Apply labels
-        uses: actions/labeler@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
+        uses: actions/labeler@v6.0.1
        with:
          sync-labels: true
@@ -5,19 +5,17 @@ on:
  schedule:
    - cron: "0 * * * *"

-permissions:
-  issues: write
-  pull-requests: write
-
 jobs:
  lock:
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c # v6.0.2
+      - uses: dessant/lock-threads@v5.0.1
        with:
          github-token: ${{ github.token }}
          process-only: "issues, prs"
-          issue-inactive-days: "30"
+          issue-lock-inactive-days: "30"
+          issue-exclude-created-before: "2020-10-01T00:00:00Z"
          issue-lock-reason: ""
-          pr-inactive-days: "1"
+          pr-lock-inactive-days: "1"
+          pr-exclude-created-before: "2020-11-01T00:00:00Z"
          pr-lock-reason: ""
@@ -6,7 +6,7 @@ on:
    - cron: "0 1 * * *"

 env:
-  PYTHON_VERSION: "3.14"
+  PYTHON_VERSION: "3.13"
  NODE_OPTIONS: --max_old_space_size=6144

 permissions:
@@ -20,17 +20,15 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
+        uses: actions/setup-python@v6
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -59,14 +57,14 @@ jobs:
        run: tar -czvf translations.tar.gz translations

      - name: Upload build artifacts
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: translations
          path: translations.tar.gz
@@ -1,39 +1,25 @@
 name: RelativeCI

 on:
-  # zizmor: ignore[dangerous-triggers] -- safe: only downloads artifacts, no PR code checkout
  workflow_run:
    workflows: [CI]
    types:
      - completed

-permissions:
-  contents: read
-  actions: read
-
 jobs:
-  upload-frontend-modern:
-    name: Upload stats (frontend/modern)
+  upload:
+    name: Upload stats
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    strategy:
+      matrix:
+        bundle: [frontend, supervisor]
+        build: [modern, legacy]
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
+        uses: relative-ci/agent-action@v3.0.1
        with:
-          key: ${{ secrets.RELATIVE_CI_KEY_frontend_modern }}
+          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
          token: ${{ github.token }}
-          artifactName: frontend-bundle-stats
-          webpackStatsFile: frontend-modern.json
-
-  upload-frontend-legacy:
-    name: Upload stats (frontend/legacy)
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
-        with:
-          key: ${{ secrets.RELATIVE_CI_KEY_frontend_legacy }}
-          token: ${{ github.token }}
-          artifactName: frontend-bundle-stats
-          webpackStatsFile: frontend-legacy.json
+          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
+          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@693d20e7c1ce1a81d3a41962f85914253b518449 # v7.3.1
+      - uses: release-drafter/release-drafter@v6.1.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -6,7 +6,7 @@ on:
      - published

 env:
-  PYTHON_VERSION: "3.14"
+  PYTHON_VERSION: "3.13"
  NODE_OPTIONS: --max_old_space_size=6144

 # Set default workflow permissions
@@ -19,29 +19,25 @@ jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
-    environment: pypi
    permissions:
      contents: write # Required to upload release assets
-      id-token: write # For "Trusted Publisher" to PyPi
-    if: github.repository_owner == 'home-assistant'
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@v6
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@e91ad1948e57189485b9c1ad608af0c303946f89 # master
+        uses: home-assistant/actions/helpers/verify-version@master

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
+          cache: yarn

      - name: Install dependencies
        run: yarn install
@@ -50,23 +46,20 @@ jobs:
        run: ./script/translations_download
        env:
          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-
      - name: Build and release package
        run: |
-          python3 -m pip install build
+          python3 -m pip install twine build
+          export TWINE_USERNAME="__token__"
+          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
          export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
          script/release

-      - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@cef221092ed1bacb1cc03d23a2d87d1d172e277b # v1.14.0
-        with:
-          skip-existing: true
-
      - name: Upload release assets
-        env:
-          GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: gh release upload "$TAG_NAME" dist/*.whl dist/*.tar.gz --clobber
+        uses: softprops/action-gh-release@v2.3.3
+        with:
+          files: |
+            dist/*.whl
+            dist/*.tar.gz

  wheels-init:
    name: Init wheels build
@@ -74,32 +67,16 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Generate requirements.txt
-        env:
-          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..."
-          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!"
-              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)"
-            sleep 30
-          done
+          # Sleep to give pypi time to populate the new version across mirrors
+          sleep 240
+          version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
          echo "home-assistant-frontend==$version" > ./requirements.txt

-      # home-assistant/wheels doesn't support SHA pinning
      - name: Build wheels
-        uses: home-assistant/wheels@34957438948e0b3dcde73c77750643dadae594f5 # 2026.06.0
+        uses: home-assistant/wheels@2025.07.0
        with:
-          abi: cp314
+          abi: cp313
          tag: musllinux_1_2
          arch: amd64
          wheels-key: ${{ secrets.WHEELS_KEY }}
@@ -113,13 +90,12 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
+          cache: yarn
      - name: Install dependencies
        run: yarn install
      - name: Download Translations
@@ -129,11 +105,37 @@ jobs:
      - name: Build landing-page
        run: landing-page/script/build_landing_page
      - name: Tar folder
-        env:
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: tar -czf "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" -C landing-page/dist .
+        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
      - name: Upload release asset
+        uses: softprops/action-gh-release@v2.3.3
+        with:
+          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
+
+  release-supervisor:
+    name: Release supervisor frontend
+    if: github.event.release.prerelease == false
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # Required to upload release assets
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v5.0.0
+      - name: Setup Node
+        uses: actions/setup-node@v5.0.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Download Translations
+        run: ./script/translations_download
        env:
-          GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: gh release upload "$TAG_NAME" "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" --clobber
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+      - name: Build supervisor
+        run: hassio/script/build_hassio
+      - name: Tar folder
+        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
+      - name: Upload release asset
+        uses: softprops/action-gh-release@v2.3.3
+        with:
+          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
@@ -5,43 +5,14 @@ on:
  issues:
    types: [opened]

-permissions: {}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.issue.number }}
-
 jobs:
-  add-no-stale:
-    name: Add no-stale label
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write # To add labels to issues
-    if: >-
-      github.event.issue.type.name == 'Task'
-      || github.event.issue.type.name == 'Epic'
-      || github.event.issue.type.name == 'Opportunity'
-    steps:
-      - name: Add no-stale label
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            await github.rest.issues.addLabels({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-              labels: ['no-stale']
-            });
-
  check-authorization:
-    name: Check authorization
    runs-on: ubuntu-latest
-    permissions:
-      issues: write # To comment on, label, and close issues
    # Only run if this is a Task issue type (from the issue form)
    if: github.event.issue.type.name == 'Task'
    steps:
      - name: Check if user is authorized
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        uses: actions/github-script@v8
        with:
          script: |
            const issueAuthor = context.payload.issue.user.login;
@@ -5,17 +5,12 @@ on:
  schedule:
    - cron: "0 * * * *"

-permissions:
-  actions: write
-  issues: write
-  pull-requests: write
-
 jobs:
  stale:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
+        uses: actions/stale@v10.0.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -8,18 +8,13 @@ on:
    paths:
      - src/translations/en.json

-permissions:
-  contents: read
-
 jobs:
  upload:
    name: Upload
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v5.0.0

      - name: Upload Translations
        run: |
@@ -15,7 +15,7 @@ dist/
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
-node_modules/
+/node_modules/
 yarn-error.log
 npm-debug.log

@@ -56,6 +56,4 @@ test/coverage/

 # AI tooling
 .claude
-.cursor
-.opencode
-test/benchmarks/results/
+
@@ -1 +1 @@
-24.16.0
+lts/iron
@@ -73,6 +73,37 @@
        "instanceLimit": 1
      }
    },
+    {
+      "label": "Develop Supervisor panel",
+      "type": "gulp",
+      "task": "develop-hassio",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
    {
      "label": "Develop Gallery",
      "type": "gulp",
@@ -215,6 +246,20 @@
        "instanceLimit": 1
      }
    },
+    {
+      "label": "Run HA Core for Supervisor in devcontainer",
+      "type": "shell",
+      "command": "SUPERVISOR=${input:supervisorHost} SUPERVISOR_TOKEN=${input:supervisorToken} script/core",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
    {
      "label": "Setup and fetch nightly translations",
      "type": "gulp",
@@ -223,6 +268,16 @@
    }
  ],
  "inputs": [
+    {
+      "id": "supervisorHost",
+      "type": "promptString",
+      "description": "The IP of the Supervisor host running the Remote API proxy add-on"
+    },
+    {
+      "id": "supervisorToken",
+      "type": "promptString",
+      "description": "The token for the Remote API proxy add-on"
+    },
    {
      "id": "coreUrl",
      "type": "promptString",
@@ -1,86 +0,0 @@
-diff --git a/dist/tinykeys.cjs b/dist/tinykeys.cjs
-index 08c98b6eff3b8fb4b727fe8e6b096951d6ef6347..9c44f14862f582766ea1733b6dc0e97f962800d8 100644
--- a/dist/tinykeys.cjs
-+++ b/dist/tinykeys.cjs
-@@ -61,6 +61,18 @@ function defaultKeybindingsHandlerIgnore(event) {
- function getModifierState(event, mod) {
- 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
- }
-+function splitKeybindingPress(press) {
-+	let parts = [];
-+	let start = 0;
-+	for (let index = 0; index < press.length; index++) {
-+		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
-+			parts.push(press.slice(start, index));
-+			start = index + 1;
-+		}
-+	}
-+	parts.push(press.slice(start));
-+	return parts;
-+}
- /**
- * Parses a keybinding string into its parts.
- *
-@@ -76,10 +88,10 @@ function getModifierState(event, mod) {
- */
- function parseKeybinding(str) {
- 	return str.trim().split(" ").map((press) => {
-		let parts = press.split(/(?<=\w|\])\+/);
-+		let parts = splitKeybindingPress(press);
- 		let last = parts.pop();
- 		let regex = last.match(/^\((.+)\)$/);
-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
-+		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
- 		let requiredModifiers = [];
- 		let optionalModifiers = [];
- 		for (const part of parts) {
-@@ -201,5 +213,3 @@ exports.defaultKeybindingsHandlerIgnore = defaultKeybindingsHandlerIgnore;
- exports.matchKeybindingPress = matchKeybindingPress;
- exports.parseKeybinding = parseKeybinding;
- exports.tinykeys = tinykeys;
-
-//# sourceMappingURL=tinykeys.cjs.map
-\ No newline at end of file
-diff --git a/dist/tinykeys.mjs b/dist/tinykeys.mjs
-index c289972d2728e03d9b272268c38fd3392e8845bf..e22897b00aae6cdb0dbbb971445227c07be52918 100644
--- a/dist/tinykeys.mjs
-+++ b/dist/tinykeys.mjs
-@@ -60,6 +60,18 @@ function defaultKeybindingsHandlerIgnore(event) {
- function getModifierState(event, mod) {
- 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
- }
-+function splitKeybindingPress(press) {
-+	let parts = [];
-+	let start = 0;
-+	for (let index = 0; index < press.length; index++) {
-+		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
-+			parts.push(press.slice(start, index));
-+			start = index + 1;
-+		}
-+	}
-+	parts.push(press.slice(start));
-+	return parts;
-+}
- /**
- * Parses a keybinding string into its parts.
- *
-@@ -75,10 +87,10 @@ function getModifierState(event, mod) {
- */
- function parseKeybinding(str) {
- 	return str.trim().split(" ").map((press) => {
-		let parts = press.split(/(?<=\w|\])\+/);
-+		let parts = splitKeybindingPress(press);
- 		let last = parts.pop();
- 		let regex = last.match(/^\((.+)\)$/);
-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
-+		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
- 		let requiredModifiers = [];
- 		let optionalModifiers = [];
- 		for (const part of parts) {
-@@ -196,5 +208,3 @@ function tinykeys(target, keybindingMap, options = {}) {
- }
- //#endregion
- export { createKeybindingsHandler, defaultKeybindingsHandlerIgnore, matchKeybindingPress, parseKeybinding, tinykeys };
-
-//# sourceMappingURL=tinykeys.mjs.map
-\ No newline at end of file
@@ -31,7 +31,7 @@ index 8795ddcaa77aea7b0356417e4bc4b19e2b3f860c..fcdc68342d9ac53936c9ed40a9ccfc2f
@@ -129,7 +129,10 @@ export async function injectManifest(
       searchString: options.injectionPoint!,
     });
-
+ 
 -    filesToWrite[options.swDest] = source;
 +    filesToWrite[options.swDest] = source.replace(
 +      url!,
@@ -1,16 +1,9 @@
-approvedGitRepositories:
-  - "**"
-
 compressionLevel: mixed

 defaultSemverRangePrefix: ""

 enableGlobalCache: false

-enableScripts: true
-
 nodeLinker: node-modules

-npmMinimalAgeGate: 3d
-
-yarnPath: .yarn/releases/yarn-4.16.0.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs
@@ -1 +0,0 @@
-.github/copilot-instructions.md
@@ -14,6 +14,7 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 - Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
 - Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`
+- Supervisor: [Instructions](https://developers.home-assistant.io/docs/supervisor/developing)

 ## Frontend development

@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -19,14 +18,16 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];

 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isLandingPageBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild }) =>
  [
-    // Icons in landingpage conflict with icons in HA so we don't load.
-    isLandingPageBuild &&
+    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
+    // Icons in supervisor conflict with icons in HA so we don't load.
+    isHassioBuild &&
      require.resolve(
        path.resolve(paths.root_dir, "src/components/ha-icon.ts")
      ),
-    isLandingPageBuild &&
+    isHassioBuild &&
      require.resolve(
        path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
      ),
@@ -37,6 +38,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
  __BUILD__: JSON.stringify(latestBuild ? "modern" : "legacy"),
  __VERSION__: JSON.stringify(env.version()),
  __DEMO__: false,
+  __SUPERVISOR__: false,
  __BACKWARDS_COMPAT__: false,
  __STATIC_PATH__: "/static/",
  __HASS_URL__: `\`${
@@ -177,14 +179,12 @@ module.exports.babelOptions = ({
    {
      // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
      // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills
-      // (otherwise babel-plugin-polyfill-corejs3 injects bare require("core-js/modules/...") calls
-      // that rspack does not transform, causing ReferenceError in browsers like Safari 14).
      sourceType: "unambiguous",
      include: /\/node_modules\//,
      exclude: [
        "element-internals-polyfill",
+        "@shoelace-style",
        "@?lit(?:-labs|-element|-html)?",
-        "@formatjs/(?:ecma402-abstract|intl-\\w+)",
      ].map((p) => new RegExp(`/node_modules/${p}/`)),
    },
  ],
@@ -292,6 +292,26 @@ module.exports.config = {
    };
  },

+  hassio({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
+    return {
+      name: "supervisor" + nameSuffix(latestBuild),
+      entry: {
+        entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.hassio_output_root, latestBuild),
+      publicPath: publicPath(latestBuild, paths.hassio_publicPath),
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+      isTestBuild,
+      isHassioBuild: true,
+      defineOverlay: {
+        __SUPERVISOR__: true,
+        __STATIC_PATH__: `"${paths.hassio_publicPath}/static/"`,
+      },
+    };
+  },
+
  gallery({ isProdBuild, latestBuild }) {
    return {
      name: "gallery" + nameSuffix(latestBuild),
@@ -318,7 +338,6 @@ module.exports.config = {
      publicPath: publicPath(latestBuild),
      isProdBuild,
      latestBuild,
-      isLandingPageBuild: true,
    };
  },
 };
@@ -6,9 +6,9 @@ import rootConfig from "../eslint.config.mjs";
 export default tseslint.config(...rootConfig, {
  rules: {
    "no-console": "off",
-    "import-x/no-extraneous-dependencies": "off",
-    "import-x/extensions": "off",
-    "import-x/no-dynamic-require": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
    "global-require": "off",
    "@typescript-eslint/no-require-imports": "off",
    "prefer-arrow-callback": "off",
@@ -1,12 +0,0 @@
-/* global module */
-// Browser-only replacement for core-js/internals/get-built-in-node-module.
-// The original helper evaluates `Function('return require("...")')()`
-// when it detects a Node environment, which causes a runtime
-// ReferenceError on browsers (notably Safari 14) if environment
-// detection mis-classifies the page. Since browser bundles never need to
-// access Node built-in modules, return undefined unconditionally.
-//
-// Wired up via rspack `NormalModuleReplacementPlugin` in build-scripts/rspack.cjs.
-module.exports = function () {
-  return undefined;
-};
@@ -5,7 +5,6 @@ import "./compress.js";
 import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./licenses.js";
 import "./locale-data.js";
 import "./service-worker.js";
 import "./translations.js";
@@ -37,12 +36,7 @@ gulp.task(
      process.env.NODE_ENV = "production";
    },
    "clean",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "build-locale-data",
-      "gen-licenses"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
    "copy-static-app",
    "rspack-prod-app",
    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
@@ -24,6 +24,10 @@ gulp.task(
  )
 );

+gulp.task("clean-hassio", async () =>
+  deleteSync([paths.hassio_output_root, paths.build_dir])
+);
+
 gulp.task(
  "clean-gallery",
  gulp.parallel("clean-translations", async () =>
@@ -43,11 +43,29 @@ const compressAppModernBrotli = () =>
 const compressAppModernZopfli = () =>
  compressModern(paths.app_output_root, paths.app_output_latest, "zopfli");

+const compressHassioModernBrotli = () =>
+  compressModern(
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    "brotli"
+  );
+const compressHassioModernZopfli = () =>
+  compressModern(
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    "zopfli"
+  );
+
 const compressAppOtherBrotli = () =>
  compressOther(paths.app_output_root, paths.app_output_latest, "brotli");
 const compressAppOtherZopfli = () =>
  compressOther(paths.app_output_root, paths.app_output_latest, "zopfli");

+const compressHassioOtherBrotli = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "brotli");
+const compressHassioOtherZopfli = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "zopfli");
+
 gulp.task(
  "compress-app",
  gulp.parallel(
@@ -57,3 +75,12 @@ gulp.task(
    compressAppOtherZopfli
  )
 );
+gulp.task(
+  "compress-hassio",
+  gulp.parallel(
+    compressHassioModernBrotli,
+    compressHassioOtherBrotli,
+    compressHassioModernZopfli,
+    compressHassioOtherZopfli
+  )
+);
@@ -99,44 +99,6 @@ const lokaliseProjects = {
  frontend: "3420425759f6d6d241f598.13594006",
 };

-const POLL_INTERVAL_MS = 1000;
-
-/* eslint-disable no-await-in-loop */
-async function pollProcess(lokaliseApi, projectId, processId) {
-  while (true) {
-    const process = await lokaliseApi
-      .queuedProcesses()
-      .get(processId, { project_id: projectId });
-
-    const project =
-      projectId === lokaliseProjects.backend ? "backend" : "frontend";
-
-    if (process.status === "finished") {
-      console.log(`Lokalise export process for ${project} finished`);
-      return process;
-    }
-
-    if (process.status === "failed" || process.status === "cancelled") {
-      throw new Error(
-        `Lokalise export process for ${project} ${process.status}: ${process.message}`
-      );
-    }
-
-    console.log(
-      `Lokalise export process for ${project} in progress...`,
-      process.status,
-      process.details?.items_to_process
-        ? `${Math.round(((process.details.items_processed || 0) / process.details.items_to_process) * 100)}% (${process.details.items_processed}/${process.details.items_to_process})`
-        : ""
-    );
-
-    await new Promise((resolve) => {
-      setTimeout(resolve, POLL_INTERVAL_MS);
-    });
-  }
-}
-/* eslint-enable no-await-in-loop */
-
 gulp.task("fetch-lokalise", async function () {
  let apiKey;
  try {
@@ -156,60 +118,55 @@ gulp.task("fetch-lokalise", async function () {
  ]);

  await Promise.all(
-    Object.entries(lokaliseProjects).map(async ([project, projectId]) => {
-      try {
-        const exportProcess = await lokaliseApi
-          .files()
-          .async_download(projectId, {
-            format: "json",
-            original_filenames: false,
-            replace_breaks: false,
-            json_unescaped_slashes: true,
-            export_empty_as: "skip",
-            filter_data: ["verified"],
-          });
-
-        const finishedProcess = await pollProcess(
-          lokaliseApi,
-          projectId,
-          exportProcess.process_id
-        );
-
-        const bundleUrl = finishedProcess.details.download_url;
-
-        console.log(`Downloading translations from: ${bundleUrl}`);
-
-        const response = await fetch(bundleUrl);
-
-        if (response.status !== 200 && response.status !== 0) {
+    Object.entries(lokaliseProjects).map(([project, projectId]) =>
+      lokaliseApi
+        .files()
+        .download(projectId, {
+          format: "json",
+          original_filenames: false,
+          replace_breaks: false,
+          json_unescaped_slashes: true,
+          export_empty_as: "skip",
+          filter_data: ["verified"],
+        })
+        .then((download) => fetch(download.bundle_url))
+        .then((response) => {
+          if (response.status === 200 || response.status === 0) {
+            return response.arrayBuffer();
+          }
          throw new Error(response.statusText);
-        }
-
-        console.log(`Extracting translations...`);
-
-        const contents = await JSZip.loadAsync(await response.arrayBuffer());
-
-        await mkdirPromise;
-        await Promise.all(
-          Object.keys(contents.files).map(async (filename) => {
-            const file = contents.file(filename);
-            if (!file) {
-              // no file, probably a directory
-              return;
-            }
-            const content = await file.async("nodebuffer");
-            await fs.writeFile(
-              path.join(inDir, project, filename.split("/").splice(-1)[0]),
-              content,
-              { flag: "w", encoding }
-            );
-          })
-        );
-      } catch (err) {
-        console.error(err);
-        throw err;
-      }
-    })
+        })
+        .then(JSZip.loadAsync)
+        .then(async (contents) => {
+          await mkdirPromise;
+          return Promise.all(
+            Object.keys(contents.files).map(async (filename) => {
+              const file = contents.file(filename);
+              if (!file) {
+                // no file, probably a directory
+                return Promise.resolve();
+              }
+              return file
+                .async("nodebuffer")
+                .then((content) =>
+                  fs.writeFile(
+                    path.join(
+                      inDir,
+                      project,
+                      filename.split("/").splice(-1)[0]
+                    ),
+                    content,
+                    { flag: "w", encoding }
+                  )
+                );
+            })
+          );
+        })
+        .catch((err) => {
+          console.error(err);
+          throw err;
+        })
+    )
  );
 });

@@ -1,4 +1,3 @@
-/* global process */
 // Tasks to generate entry HTML

 import {
@@ -26,7 +25,6 @@ const SAFARI_TO_MACOS = {
  16: [11, 0, 0],
  17: [12, 0, 0],
  18: [13, 0, 0],
-  26: [26, 0, 0],
 };

 const getCommonTemplateVars = () => {
@@ -268,3 +266,28 @@ gulp.task(
    paths.landingPage_output_es5
  )
 );
+
+const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
+
+gulp.task(
+  "gen-pages-hassio-dev",
+  genPagesDevTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    "src",
+    paths.hassio_publicPath
+  )
+);
+
+gulp.task(
+  "gen-pages-hassio-prod",
+  genPagesProdTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    paths.hassio_output_es5,
+    "src"
+  )
+);
@@ -57,9 +57,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
      if (descriptionContent === "") {
        hasDescription = false;
      } else {
-        descriptionContent = marked(descriptionContent)
-          .replace(/\\/g, "\\\\")
-          .replace(/`/g, "\\`");
+        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
        fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
        fs.writeFileSync(
          path.resolve(galleryBuild, `${pageId}-description.ts`),
@@ -123,11 +123,22 @@ gulp.task("copy-translations-app", async () => {
  copyTranslations(staticDir);
 });

+gulp.task("copy-translations-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyTranslations(staticDir);
+});
+
 gulp.task("copy-translations-landing-page", async () => {
  const staticDir = paths.landingPage_output_static;
  copyTranslations(staticDir);
 });

+gulp.task("copy-static-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyLocaleData(staticDir);
+  copyFonts(staticDir);
+});
+
 gulp.task("copy-static-app", async () => {
  const staticDir = paths.app_output_static;
  // Basic static files
@@ -0,0 +1,45 @@
+import gulp from "gulp";
+import env from "../env.cjs";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-hassio",
+    "gen-dummy-icons-json",
+    "gen-pages-hassio-dev",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-static-supervisor",
+    "rspack-watch-hassio"
+  )
+);
+
+gulp.task(
+  "build-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-hassio",
+    "gen-dummy-icons-json",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-static-supervisor",
+    "rspack-prod-hassio",
+    "gen-pages-hassio-prod",
+    ...// Don't compress running tests
+    (env.isTestBuild() ? [] : ["compress-hassio"])
+  )
+);
@@ -9,6 +9,7 @@ import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
+import "./hassio.js";
 import "./landing-page.js";
 import "./locale-data.js";
 import "./rspack.js";
@@ -1,81 +0,0 @@
-// Gulp task to generate third-party license notices.
-
-import { readFile, access } from "fs/promises";
-import { generateLicenseFile } from "generate-license-file";
-import gulp from "gulp";
-import path from "path";
-import paths from "../paths.cjs";
-
-const OUTPUT_FILE = path.join(
-  paths.app_output_static,
-  "third-party-licenses.txt"
-);
-
-// The echarts package ships an Apache-2.0 NOTICE file that must be
-// redistributed alongside the compiled output per Apache License §4(d).
-const NOTICE_FILES = [
-  path.resolve(paths.root_dir, "node_modules/echarts/NOTICE"),
-];
-
-// type-fest ships two license files (MIT for code, CC0 for types).
-// We use the MIT license since that covers the bundled code.
-//
-// Each entry is pinned to a specific version. If a package is updated,
-// this list must be reviewed and the version updated after verifying
-// that the new version's license still matches. The build will fail
-// if the installed version does not match the pinned version.
-const LICENSE_OVERRIDES = [
-  {
-    // type-fest ships two license files (MIT for code, CC0 for types).
-    // We use the MIT license since that covers the bundled code.
-    packageName: "type-fest",
-    version: "5.7.0",
-    licensePath: path.resolve(
-      paths.root_dir,
-      "node_modules/type-fest/license-mit"
-    ),
-  },
-];
-
-gulp.task("gen-licenses", async () => {
-  const licenseOverrides = {};
-
-  for (const { packageName, version, licensePath } of LICENSE_OVERRIDES) {
-    const pkgJsonPath = path.resolve(
-      paths.root_dir,
-      `node_modules/${packageName}/package.json`
-    );
-
-    let packageJSON;
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      packageJSON = JSON.parse(await readFile(pkgJsonPath, "utf-8"));
-    } catch {
-      throw new Error(
-        `package.json for "${packageName}" not found or unreadable at ${pkgJsonPath}`
-      );
-    }
-
-    if (packageJSON.version !== version) {
-      throw new Error(
-        `License override for "${packageName}" is pinned to version ${version}, but found version ${packageJSON.version}. ` +
-          `Please verify the new version's license and update the override in build-scripts/gulp/licenses.js.`
-      );
-    }
-
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      await access(licensePath);
-    } catch {
-      throw new Error(`License file not found or unreadable: ${licensePath}`);
-    }
-
-    licenseOverrides[`${packageName}@${version}`] = licensePath;
-  }
-
-  await generateLicenseFile(
-    path.resolve(paths.root_dir, "package.json"),
-    OUTPUT_FILE,
-    { append: NOTICE_FILES, replace: licenseOverrides }
-  );
-});
@@ -40,24 +40,18 @@ const convertToJSON = async (
    throw e;
  }
  // Convert to JSON
-  const parts = localeData.split("} else {");
-  const firstBlock = parts[0];
  const obj = INTL_POLYFILLS[pkg];
  const dataRegex = new RegExp(
    `Intl\\.${obj}\\.${addFunc}\\((?<data>.*)\\)`,
    "s"
  );
-  localeData = firstBlock.match(dataRegex)?.groups?.data;
+  localeData = localeData.match(dataRegex)?.groups?.data;
  if (!localeData) {
    throw Error(`Failed to extract data for language ${lang} from ${pkg}`);
  }
  // Parse to validate JSON, then stringify to minify
-  try {
-    localeData = JSON.stringify(JSON.parse(localeData));
-    await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
-  } catch (e) {
-    throw Error(`Failed to parse JSON for language ${lang} from ${pkg}: ${e}`);
-  }
+  localeData = JSON.stringify(JSON.parse(localeData));
+  await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
 };

 gulp.task("clean-locale-data", async () => deleteSync([outDir]));
@@ -13,6 +13,7 @@ import {
  createCastConfig,
  createDemoConfig,
  createGalleryConfig,
+  createHassioConfig,
  createLandingPageConfig,
 } from "../rspack.cjs";

@@ -33,9 +34,7 @@ const isWsl =
 *   compiler: import("@rspack/core").Compiler,
 *   contentBase: string,
 *   port: number,
- *   listenHost?: string,
- *   open?: boolean,
- *   logUrlAfterFirstBuild?: boolean,
+ *   listenHost?: string
 * }}
 */
 const runDevServer = async ({
@@ -43,43 +42,22 @@ const runDevServer = async ({
  contentBase,
  port,
  listenHost = undefined,
-  open = true,
-  logUrlAfterFirstBuild = false,
  proxy = undefined,
 }) => {
  if (listenHost === undefined) {
    // For dev container, we need to listen on all hosts
    listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
  }
-  const url = `http://localhost:${port}`;
-  let loggedUrl = false;
-  if (logUrlAfterFirstBuild) {
-    compiler.hooks.done.tap("log-dev-server-url", () => {
-      if (loggedUrl) {
-        return;
-      }
-      loggedUrl = true;
-      setTimeout(() => {
-        log("[rspack-dev-server]", `Project is running at ${url}`);
-      }, 0);
-    });
-  }
  const server = new RspackDevServer(
    {
      hot: false,
-      open,
+      open: true,
      host: listenHost,
      port,
      static: {
        directory: contentBase,
        watch: true,
      },
-      client: {
-        overlay: {
-          runtimeErrors: (error) =>
-            !error?.message?.includes("ResizeObserver loop"),
-        },
-      },
      proxy,
    },
    compiler
@@ -87,9 +65,7 @@ const runDevServer = async ({

  await server.start();
  // Server listening
-  if (!logUrlAfterFirstBuild) {
-    log("[rspack-dev-server]", `Project is running at ${url}`);
-  }
+  log("[rspack-dev-server]", `Project is running at http://localhost:${port}`);
 };

 const doneHandler = (done) => (err, stats) => {
@@ -183,6 +159,31 @@ gulp.task("rspack-prod-cast", () =>
  )
 );

+gulp.task("rspack-watch-hassio", () => {
+  // This command will run forever because we don't close compiler
+  rspack(
+    createHassioConfig({
+      isProdBuild: false,
+      latestBuild: true,
+    })
+  ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
+  );
+});
+
+gulp.task("rspack-prod-hassio", () =>
+  prodBuild(
+    bothBuilds(createHassioConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);
+
 gulp.task("rspack-dev-server-gallery", () =>
  runDevServer({
    compiler: rspack(
@@ -191,8 +192,6 @@ gulp.task("rspack-dev-server-gallery", () =>
    contentBase: paths.gallery_output_root,
    port: 8100,
    listenHost: "0.0.0.0",
-    open: false,
-    logUrlAfterFirstBuild: true,
  })
 );

@@ -156,9 +156,7 @@ const createTestTranslation = () =>
 */
 const createMasterTranslation = () =>
  gulp
-    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])], {
-      allowEmpty: true,
-    })
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
    .pipe(new CustomJSON(lokaliseTransform))
    .pipe(new MergeJSON("en"))
    .pipe(gulp.dest(workDir));
@@ -170,7 +168,9 @@ const setFragment = (fragment) => async () => {
 };

 const panelFragment = (fragment) =>
-  fragment !== "base" && fragment !== "landing-page";
+  fragment !== "base" &&
+  fragment !== "supervisor" &&
+  fragment !== "landing-page";

 const HASHES = new Map();

@@ -205,15 +205,18 @@ const createTranslations = async () => {
        FRAGMENTS.map((fragment) => {
          switch (fragment) {
            case "base":
-              // Remove the panels and landing-page to create the base translations
+              // Remove the panels and supervisor to create the base translations
              return [
                flatten({
                  ...data,
                  ui: { ...data.ui, panel: undefined },
-                  "landing-page": undefined,
+                  supervisor: undefined,
                }),
                "",
              ];
+            case "supervisor":
+              // Supervisor key is at the top level
+              return [flatten(data.supervisor), ""];
            case "landing-page":
              // landing-page key is at the top level
              return [flatten(data["landing-page"]), ""];
@@ -313,6 +316,11 @@ gulp.task(
  )
 );

+gulp.task(
+  "build-supervisor-translations",
+  gulp.series(setFragment("supervisor"), "build-translations")
+);
+
 gulp.task(
  "build-landing-page-translations",
  gulp.series(setFragment("landing-page"), "build-translations")
@@ -6,6 +6,7 @@ import presetEnv from "@babel/preset-env";
 import compilationTargets from "@babel/helper-compilation-targets";
 import coreJSCompat from "core-js-compat";
 import { logPlugin } from "@babel/preset-env/lib/debug.js";
+// eslint-disable-next-line import/no-relative-packages
 import shippedPolyfills from "../node_modules/babel-plugin-polyfill-corejs3/lib/shipped-proposals.js";
 import { babelOptions } from "./bundle.cjs";

@@ -49,5 +49,15 @@ module.exports = {
    "../landing-page/dist/static"
  ),

+  hassio_dir: path.resolve(__dirname, "../hassio"),
+  hassio_output_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
+  hassio_output_latest: path.resolve(
+    __dirname,
+    "../hassio/build/frontend_latest"
+  ),
+  hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
+  hassio_publicPath: "/api/hassio/app",
+
  translations_src: path.resolve(__dirname, "../src/translations"),
 };
@@ -1,4 +1,3 @@
-/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -13,7 +12,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const SafeWebpackBar = require("./safe-webpackbar.cjs");
+const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");

@@ -41,7 +40,7 @@ const createRspackConfig = ({
  latestBuild,
  isStatsBuild,
  isTestBuild,
-  isLandingPageBuild,
+  isHassioBuild,
  dontHash,
 }) => {
  if (!dontHash) {
@@ -127,7 +126,7 @@ const createRspackConfig = ({
      },
    },
    plugins: [
-      !isStatsBuild && new SafeWebpackBar({ fancy: !isProdBuild }),
+      !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
      new WebpackManifestPlugin({
        // Only include the JS of entrypoints
        filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -168,21 +167,9 @@ const createRspackConfig = ({
          );
        },
      }),
-      bundle.emptyPackages({ isLandingPageBuild }).length
-        ? new rspack.NormalModuleReplacementPlugin(
-            new RegExp(bundle.emptyPackages({ isLandingPageBuild }).join("|")),
-            path.resolve(paths.root_dir, "src/util/empty.js")
-          )
-        : false,
-      // core-js ships a Node-only helper that evaluates
-      // `Function('return require("...")')()` when its runtime environment
-      // detection mis-classifies the page as Node. That produces a
-      // ReferenceError on browsers (observed on Safari 14). Since browser
-      // bundles never need to access Node built-in modules, replace it with
-      // a CommonJS no-op stub matching the helper's API (returns undefined).
      new rspack.NormalModuleReplacementPlugin(
-        /core-js[\\/]internals[\\/]get-built-in-node-module(?:\.js)?$/,
-        path.resolve(__dirname, "get-built-in-node-module-shim.cjs")
+        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
+        path.resolve(paths.root_dir, "src/util/empty.js")
      ),
      !isProdBuild && new LogStartCompilePlugin(),
      isProdBuild &&
@@ -211,7 +198,6 @@ const createRspackConfig = ({
        "lit/decorators$": "lit/decorators.js",
        "lit/directive$": "lit/directive.js",
        "lit/directives/until$": "lit/directives/until.js",
-        "lit/directives/ref$": "lit/directives/ref.js",
        "lit/directives/class-map$": "lit/directives/class-map.js",
        "lit/directives/style-map$": "lit/directives/style-map.js",
        "lit/directives/if-defined$": "lit/directives/if-defined.js",
@@ -220,9 +206,7 @@ const createRspackConfig = ({
        "lit/directives/join$": "lit/directives/join.js",
        "lit/directives/repeat$": "lit/directives/repeat.js",
        "lit/directives/live$": "lit/directives/live.js",
-        "lit/directives/keyed$": latestBuild
-          ? "lit/directives/keyed.js"
-          : path.resolve(__dirname, "../src/common/lit/keyed-es5.ts"),
+        "lit/directives/keyed$": "lit/directives/keyed.js",
        "lit/polyfill-support$": "lit/polyfill-support.js",
        "@lit-labs/virtualizer/layouts/grid":
          "@lit-labs/virtualizer/layouts/grid.js",
@@ -230,42 +214,6 @@ const createRspackConfig = ({
          "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
        "@lit-labs/observers/resize-controller":
          "@lit-labs/observers/resize-controller.js",
-        "@formatjs/intl-durationformat/should-polyfill$":
-          "@formatjs/intl-durationformat/should-polyfill.js",
-        "@formatjs/intl-durationformat/polyfill-force$":
-          "@formatjs/intl-durationformat/polyfill-force.js",
-        "@formatjs/intl-datetimeformat/should-polyfill":
-          "@formatjs/intl-datetimeformat/should-polyfill.js",
-        "@formatjs/intl-datetimeformat/polyfill-force":
-          "@formatjs/intl-datetimeformat/polyfill-force.js",
-        "@formatjs/intl-displaynames/should-polyfill":
-          "@formatjs/intl-displaynames/should-polyfill.js",
-        "@formatjs/intl-displaynames/polyfill-force":
-          "@formatjs/intl-displaynames/polyfill-force.js",
-        "@formatjs/intl-getcanonicallocales/should-polyfill":
-          "@formatjs/intl-getcanonicallocales/should-polyfill.js",
-        "@formatjs/intl-getcanonicallocales/polyfill-force":
-          "@formatjs/intl-getcanonicallocales/polyfill-force.js",
-        "@formatjs/intl-listformat/should-polyfill":
-          "@formatjs/intl-listformat/should-polyfill.js",
-        "@formatjs/intl-listformat/polyfill-force":
-          "@formatjs/intl-listformat/polyfill-force.js",
-        "@formatjs/intl-locale/should-polyfill":
-          "@formatjs/intl-locale/should-polyfill.js",
-        "@formatjs/intl-locale/polyfill-force":
-          "@formatjs/intl-locale/polyfill-force.js",
-        "@formatjs/intl-numberformat/should-polyfill":
-          "@formatjs/intl-numberformat/should-polyfill.js",
-        "@formatjs/intl-numberformat/polyfill-force":
-          "@formatjs/intl-numberformat/polyfill-force.js",
-        "@formatjs/intl-pluralrules/should-polyfill":
-          "@formatjs/intl-pluralrules/should-polyfill.js",
-        "@formatjs/intl-pluralrules/polyfill-force":
-          "@formatjs/intl-pluralrules/polyfill-force.js",
-        "@formatjs/intl-relativetimeformat/should-polyfill":
-          "@formatjs/intl-relativetimeformat/should-polyfill.js",
-        "@formatjs/intl-relativetimeformat/polyfill-force":
-          "@formatjs/intl-relativetimeformat/polyfill-force.js",
      },
    },
    output: {
@@ -309,6 +257,7 @@ const createRspackConfig = ({
      ),
    },
    experiments: {
+      layers: true,
      outputModule: true,
    },
  };
@@ -332,6 +281,21 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
  createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));

+const createHassioConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  isTestBuild,
+}) =>
+  createRspackConfig(
+    bundle.config.hassio({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+      isTestBuild,
+    })
+  );
+
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));

@@ -342,6 +306,7 @@ module.exports = {
  createAppConfig,
  createDemoConfig,
  createCastConfig,
+  createHassioConfig,
  createGalleryConfig,
  createRspackConfig,
  createLandingPageConfig,
@@ -1,25 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const WebpackBar = require("webpackbar/rspack");
-
-// Rspack 2's ProgressPlugin passes the third `info` arg as
-// `{ builtModules, moduleIdentifier? }` instead of the v1 string. webpackbar@7's
-// parseRequest still expects a string and crashes on `split`. Extract
-// moduleIdentifier (the v1 equivalent) so progress still shows the active module.
-class SafeWebpackBar extends WebpackBar {
-  constructor(options) {
-    super(options);
-    const inner = this.webpackbar;
-    const originalUpdate = inner.updateProgress.bind(inner);
-    inner.updateProgress = (percent, message, details = []) =>
-      originalUpdate(
-        percent,
-        message,
-        details.map((d) => {
-          if (typeof d === "string") return d;
-          return d?.moduleIdentifier ?? "";
-        })
-      );
-  }
-}
-
-module.exports = SafeWebpackBar;
@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -16,9 +16,9 @@ import {
 } from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
-import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
@@ -28,6 +28,7 @@ import {
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
 import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
 import "../../../../src/layouts/hass-loading-screen";
+import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";

@customElement("hc-cast")
@@ -95,9 +96,7 @@ class HcCast extends LitElement {
                <ha-list @action=${this._handlePickView} activatable>
                  ${(
                    this.lovelaceViews ?? [
-                      {
-                        title: "Home",
-                      },
+                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
                    ]
                  ).map(
                    (view, idx) => html`
@@ -150,7 +149,7 @@ class HcCast extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);

    const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
@@ -183,7 +182,7 @@ class HcCast extends LitElement {
    });
  }

-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
    super.updated(changedProps);
    toggleAttribute(
      this,
@@ -206,7 +205,7 @@ class HcCast extends LitElement {
  }

  private async _handlePickView(ev: CustomEvent<ActionDetail>) {
-    const path = this.lovelaceViews?.[ev.detail.index]?.path ?? ev.detail.index;
+    const path = this.lovelaceViews![ev.detail.index].path ?? ev.detail.index;
    await ensureConnectedCastSession(this.castManager!, this.auth!);
    castSendShowLovelaceView(this.castManager, this.auth.data.hassUrl, path);
  }
@@ -243,7 +242,7 @@ class HcCast extends LitElement {
    }

    .question:before {
-      border-radius: var(--ha-border-radius-sm);
+      border-radius: 4px;
      position: absolute;
      top: 0;
      right: 0;
@@ -12,7 +12,7 @@ import {
  ERR_INVALID_HTTPS_TO_HTTP,
  getAuth,
 } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -26,7 +26,7 @@ import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
-import "../../../../src/components/input/ha-input";
+import "../../../../src/components/ha-textfield";
 import "../../../../src/components/ha-button";

 const seeFAQ = (qid) => html`
@@ -123,11 +123,11 @@ export class HcConnect extends LitElement {
              To get started, enter your Home Assistant URL and click authorize.
              If you want a preview instead, click the show demo button.
            </p>
-            <ha-input
+            <ha-textfield
              label="Home Assistant URL"
              placeholder="https://abcdefghijklmnop.ui.nabu.casa"
              @keydown=${this._handleInputKeyDown}
-            ></ha-input>
+            ></ha-textfield>
            ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
          </div>
          <div class="card-actions">
@@ -158,7 +158,7 @@ export class HcConnect extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    import("./hc-cast");

@@ -204,7 +204,7 @@ export class HcConnect extends LitElement {
  }

  private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("ha-input")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
    const value = inputEl.value || "";
    this.error = undefined;

@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
      flex: 1;
    }

-    ha-input {
+    ha-textfield {
      width: 100%;
    }
  `;
@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -53,7 +53,7 @@ class HcLayout extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);

    if (this.connection) {
@@ -95,8 +95,7 @@ class HcLayout extends LitElement {
    }

    .hero {
-      border-radius: var(--ha-border-radius-sm) var(--ha-border-radius-sm)
-        var(--ha-border-radius-square) var(--ha-border-radius-square);
+      border-radius: 4px 4px 0 0;
    }
    .subtitle {
      font-size: var(--ha-font-size-m);
@@ -14,10 +14,8 @@ playerManager.setMessageInterceptor(
      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
-      // type definition is wrong, should be "FMP4" instead of "fmp4"
-      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
      media.hlsVideoSegmentFormat =
-        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
@@ -1,7 +1,8 @@
-import type { EntityInput } from "../../../../src/fake_data/entities/types";
+import type { Entity } from "../../../../src/fake_data/entity";
+import { convertEntities } from "../../../../src/fake_data/entity";

-export const castDemoEntities: () => EntityInput[] = () =>
-  Object.values({
+export const castDemoEntities: () => Entity[] = () =>
+  convertEntities({
    "light.reading_light": {
      entity_id: "light.reading_light",
      state: "on",
@@ -74,7 +75,7 @@ export const castDemoEntities: () => EntityInput[] = () =>
        longitude: 4.8903147,
        radius: 100,
        friendly_name: "Home",
-        icon: "mdi:home",
+        icon: "hass:home",
      },
    },
    "input_number.harmonyvolume": {
@@ -87,7 +88,7 @@ export const castDemoEntities: () => EntityInput[] = () =>
        step: 1,
        mode: "slider",
        friendly_name: "Volume",
-        icon: "mdi:volume-high",
+        icon: "hass:volume-high",
      },
    },
    "climate.upstairs": {
@@ -56,7 +56,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                type: "weblink",
                url: "/lovelace/climate",
                name: "Climate controls",
-                icon: "mdi:arrow-right",
+                icon: "hass:arrow-right",
              },
            ],
          },
@@ -76,7 +76,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                type: "weblink",
                url: "/lovelace/overview",
                name: "Back",
-                icon: "mdi:arrow-left",
+                icon: "hass:arrow-left",
              },
            ],
          },
@@ -1,9 +1,10 @@
+import { framework } from "./cast_framework";
 import { CAST_NS } from "../../../src/cast/const";
 import type { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
 import { castContext } from "./cast_context";
-import { framework } from "./cast_framework";
 import { HcMain } from "./layout/hc-main";
+import type { ReceivedMessage } from "./types";

 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
@@ -89,25 +90,24 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  // type definition is wrong, should be "JSON" instead of "json"
-  // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.system#.MessageType
-  [CAST_NS]: "JSON" as framework.system.MessageType.JSON,
+  [CAST_NS]: "json" as framework.system.MessageType.JSON,
 };

-castContext.addCustomMessageListener(CAST_NS, (ev) => {
-  // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-  if (
-    playerManager.getPlayerState() !==
-    ("IDLE" as framework.messages.PlayerState.IDLE)
-  ) {
-    playerManager.stop();
-  } else {
-    showLovelaceController();
+castContext.addCustomMessageListener(
+  CAST_NS,
+  // @ts-ignore
+  (ev: ReceivedMessage<HassMessage>) => {
+    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
+    if (playerManager.getPlayerState() !== "IDLE") {
+      playerManager.stop();
+    } else {
+      showLovelaceController();
+    }
+    const msg = ev.data;
+    msg.senderId = ev.senderId;
+    lovelaceController.processIncomingMessage(msg);
  }
-  const msg = ev.data as HassMessage;
-  msg.senderId = ev.senderId;
-  lovelaceController.processIncomingMessage(msg);
-});
+);

 const playerManager = castContext.getPlayerManager();

@@ -128,10 +128,9 @@ playerManager.setMessageInterceptor(
      media.contentId = media.entity;
      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
-      // type definition is wrong, should be "FMP4" instead of "fmp4"
-      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
+      // @ts-ignore
      media.hlsVideoSegmentFormat =
-        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
@@ -141,11 +140,9 @@ playerManager.addEventListener(
  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState ===
-        ("IDLE" as framework.messages.PlayerState.IDLE) &&
+      event.mediaStatus?.playerState === "IDLE" &&
      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        ("INTERRUPTED" as framework.messages.IdleReason.INTERRUPTED)
+      event.mediaStatus?.idleReason !== "INTERRUPTED"
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
@@ -30,7 +29,7 @@ class HcDemo extends HassElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this._initializeHass();
  }
@@ -42,7 +41,7 @@ class HcDemo extends HassElement {
        this._updateHass(hassUpdate),
    };

-    const hass = provideHass(this, initial, true);
+    const hass = (this.hass = provideHass(this, initial));

    mockHistory(hass);

@@ -1,5 +1,4 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@@ -65,7 +64,7 @@ class HcLovelace extends LitElement {
    `;
  }

-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
    super.updated(changedProps);

    if (changedProps.has("viewPath") || changedProps.has("lovelaceConfig")) {
@@ -1,6 +1,6 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { createConnection, getAuth } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
@@ -106,7 +106,7 @@ export class HcMain extends HassElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    import("./hc-lovelace");
    import("../../../../src/resources/append-ha-style");
@@ -305,8 +305,9 @@ export class HcMain extends HassElement {
        await llColl.refresh();
        this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
          if (isStrategyDashboard(rawConfig)) {
-            const { generateLovelaceDashboardStrategy } =
-              await import("../../../../src/panels/lovelace/strategies/get-strategy");
+            const { generateLovelaceDashboardStrategy } = await import(
+              "../../../../src/panels/lovelace/strategies/get-strategy"
+            );
            const config = await generateLovelaceDashboardStrategy(
              rawConfig,
              this.hass!
@@ -346,8 +347,9 @@ export class HcMain extends HassElement {
  }

  private async _generateDefaultLovelaceConfig() {
-    const { generateLovelaceDashboardStrategy } =
-      await import("../../../../src/panels/lovelace/strategies/get-strategy");
+    const { generateLovelaceDashboardStrategy } = await import(
+      "../../../../src/panels/lovelace/strategies/get-strategy"
+    );
    this._handleNewLovelaceConfig(
      await generateLovelaceDashboardStrategy(DEFAULT_CONFIG, this.hass!)
    );
@@ -0,0 +1,6 @@
+export interface ReceivedMessage<T> {
+  gj: boolean;
+  data: T;
+  senderId: string;
+  type: "message";
+}
@@ -1,7 +1,8 @@
+import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";

 export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
-  Object.values({
+  convertEntities({
    "todo.shopping_list": {
      entity_id: "todo.shopping_list",
      state: "2",
@@ -142,7 +143,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
      state: "on",
      attributes: {
        friendly_name: "Home Automation",
-        icon: "mdi:home-automation",
+        icon: "hass:home-automation",
      },
    },
    "input_boolean.tvtime": {
@@ -4,7 +4,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
  title: "Home Assistant",
  views: [
    {
-      icon: "mdi:home-assistant",
+      icon: "hass:home-assistant",
      id: "home",
      title: "Home",
      cards: [
@@ -11,9 +11,9 @@ export const demoConfigs: (() => Promise<DemoConfig>)[] = [
  () => import("./jimpower").then((mod) => mod.demoJimpower),
 ];

-// eslint-disable-next-line import-x/no-mutable-exports
+// eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfigIndex = 0;
-// eslint-disable-next-line import-x/no-mutable-exports
+// eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfig: Promise<DemoConfig> =
  demoConfigs[selectedDemoConfigIndex]();

@@ -1,7 +1,8 @@
+import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";

 export const demoEntitiesJimpower: DemoConfig["entities"] = () =>
-  Object.values({
+  convertEntities({
    "todo.shopping_list": {
      entity_id: "todo.shopping_list",
      state: "2",
@@ -1236,7 +1236,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
        },
      ],
      path: "security",
-      icon: "mdi:shield-home",
+      icon: "hass:shield-home",
      name: "Security",
      background:
        'center / cover no-repeat url("/assets/jimpower/background-15.jpg") fixed',
@@ -1,7 +1,8 @@
+import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";

 export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
-  Object.values({
+  convertEntities({
    "todo.shopping_list": {
      entity_id: "todo.shopping_list",
      state: "2",
@@ -1,7 +1,8 @@
+import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";

 export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
-  Object.values({
+  convertEntities({
    "cover.living_room_garden_shutter": {
      entity_id: "cover.living_room_garden_shutter",
      state: "open",
@@ -141,7 +142,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
      },
    },
    "device_tracker.car": {
-      entity_id: "device_tracker.car",
+      entity_id: "sensor.outdoor_humidity",
      state: "not_home",
      attributes: {
        friendly_name: "Car",
@@ -199,7 +200,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
      },
    },
    "binary_sensor.kitchen_motion": {
-      entity_id: "binary_sensor.kitchen_motion",
+      entity_id: "light.kitchen_motion",
      state: "on",
      attributes: {
        device_class: "motion",
@@ -335,7 +336,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
      },
    },
    "sensor.rain": {
-      entity_id: "sensor.rain",
+      entity_id: "sensor.moon_phase",
      state: "7.2",
      attributes: {
        state_class: "total_increasing",
@@ -565,7 +566,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
      },
    },
    "update.home_assistant_core_update": {
-      entity_id: "update.home_assistant_core_update",
+      entity_id: "update.home_assistant_supervisor_update",
      state: "off",
      attributes: {
        auto_update: false,
@@ -1,7 +1,8 @@
+import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";

 export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
-  Object.values({
+  convertEntities({
    "todo.shopping_list": {
      entity_id: "todo.shopping_list",
      state: "2",
@@ -1,7 +1,7 @@
 import type { TemplateResult } from "lit";
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import type { LovelaceConfig } from "../../../src/data/lovelace/config/types";
-import type { EntityInput } from "../../../src/fake_data/entities/types";
+import type { Entity } from "../../../src/fake_data/entity";

 export interface DemoConfig {
  index?: number;
@@ -12,6 +12,6 @@ export interface DemoConfig {
    | string
    | ((localize: LocalizeFunc) => string | TemplateResult<1>);
  lovelace: (localize: LocalizeFunc) => LovelaceConfig;
-  entities: (localize: LocalizeFunc) => EntityInput[];
+  entities: (localize: LocalizeFunc) => Entity[];
  theme: () => Record<string, string> | null;
 }
@@ -1,6 +1,4 @@
-/// <reference types="chromecast-caf-sender" />
 import { mdiTelevision } from "@mdi/js";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../src/cast/cast_manager";
@@ -38,7 +36,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
      getCastManager().then((mgr) => {
@@ -63,7 +61,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
    );
  }

-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
    super.updated(changedProps);
    this.style.display = this._castManager ? "" : "none";
  }
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
@@ -102,7 +102,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    if (this._hidden) {
      this.style.display = "none";
@@ -9,14 +9,11 @@ import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { mockConfigEntries } from "./stubs/config_entries";
-import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
-import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
-import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
@@ -39,7 +36,7 @@ export class HaDemo extends HomeAssistantAppEl {
        this._updateHass(hassUpdate),
    };

-    const hass = provideHass(this, initial, true);
+    const hass = (this.hass = provideHass(this, initial));
    const localizePromise =
      // @ts-ignore
      this._loadFragmentTranslations(hass.language, "page-demo").then(
@@ -63,9 +60,6 @@ export class HaDemo extends HomeAssistantAppEl {
    mockPersistentNotification(hass);
    mockConfigEntries(hass);
    mockAreaRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockFloorRegistry(hass);
-    mockLabelRegistry(hass);
    mockEntityRegistry(hass, [
      {
        config_entry_id: "co2signal",
@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../../src/data/area/area_registry";
+import type { AreaRegistryEntry } from "../../../src/data/area_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockAreaRegistry = (
@@ -1,4 +1,4 @@
-import type { DeviceRegistryEntry } from "../../../src/data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../../src/data/device_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockDeviceRegistry = (
@@ -14,42 +14,48 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
      energy_sources: [
        {
          type: "grid",
-          stat_energy_from: "sensor.energy_consumption_tarif_1",
-          stat_energy_to: "sensor.energy_production_tarif_1",
-          stat_cost: "sensor.energy_consumption_tarif_1_cost",
-          stat_compensation: "sensor.energy_production_tarif_1_compensation",
-          entity_energy_price: null,
-          number_energy_price: null,
-          entity_energy_price_export: null,
-          number_energy_price_export: null,
-          stat_rate: "sensor.power_grid",
-          cost_adjustment_day: 0,
-        },
-        {
-          type: "grid",
-          stat_energy_from: "sensor.energy_consumption_tarif_2",
-          stat_energy_to: "sensor.energy_production_tarif_2",
-          stat_cost: "sensor.energy_consumption_tarif_2_cost",
-          stat_compensation: "sensor.energy_production_tarif_2_compensation",
-          entity_energy_price: null,
-          number_energy_price: null,
-          entity_energy_price_export: null,
-          number_energy_price_export: null,
-          stat_rate: "sensor.power_grid_return",
+          flow_from: [
+            {
+              stat_energy_from: "sensor.energy_consumption_tarif_1",
+              stat_cost: "sensor.energy_consumption_tarif_1_cost",
+              entity_energy_price: null,
+              number_energy_price: null,
+            },
+            {
+              stat_energy_from: "sensor.energy_consumption_tarif_2",
+              stat_cost: "sensor.energy_consumption_tarif_2_cost",
+              entity_energy_price: null,
+              number_energy_price: null,
+            },
+          ],
+          flow_to: [
+            {
+              stat_energy_to: "sensor.energy_production_tarif_1",
+              stat_compensation:
+                "sensor.energy_production_tarif_1_compensation",
+              entity_energy_price: null,
+              number_energy_price: null,
+            },
+            {
+              stat_energy_to: "sensor.energy_production_tarif_2",
+              stat_compensation:
+                "sensor.energy_production_tarif_2_compensation",
+              entity_energy_price: null,
+              number_energy_price: null,
+            },
+          ],
          cost_adjustment_day: 0,
        },
        {
          type: "solar",
          stat_energy_from: "sensor.solar_production",
-          stat_rate: "sensor.power_solar",
          config_entry_solar_forecast: ["solar_forecast"],
        },
-        {
+        /*         {
          type: "battery",
          stat_energy_from: "sensor.battery_output",
          stat_energy_to: "sensor.battery_input",
-          stat_rate: "sensor.power_battery",
-        },
+        }, */
        {
          type: "gas",
          stat_energy_from: "sensor.energy_gas",
@@ -57,46 +63,25 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
          entity_energy_price: null,
          number_energy_price: null,
        },
-        {
-          type: "water",
-          stat_energy_from: "sensor.energy_water",
-          stat_cost: "sensor.energy_water_cost",
-          entity_energy_price: null,
-          number_energy_price: null,
-        },
      ],
      device_consumption: [
        {
          stat_consumption: "sensor.energy_car",
-          stat_rate: "sensor.power_car",
        },
        {
          stat_consumption: "sensor.energy_ac",
-          stat_rate: "sensor.power_ac",
        },
        {
          stat_consumption: "sensor.energy_washing_machine",
-          stat_rate: "sensor.power_washing_machine",
        },
        {
          stat_consumption: "sensor.energy_dryer",
-          stat_rate: "sensor.power_dryer",
        },
        {
          stat_consumption: "sensor.energy_heat_pump",
-          stat_rate: "sensor.power_heat_pump",
        },
        {
          stat_consumption: "sensor.energy_boiler",
-          stat_rate: "sensor.power_boiler",
-        },
-      ],
-      device_consumption_water: [
-        {
-          stat_consumption: "sensor.water_kitchen",
-        },
-        {
-          stat_consumption: "sensor.water_garden",
        },
      ],
    })
@@ -1,5 +1,7 @@
+import { convertEntities } from "../../../src/fake_data/entity";
+
 export const mapEntities = () =>
-  Object.values({
+  convertEntities({
    "zone.home": {
      entity_id: "zone.home",
      state: "zoning",
@@ -49,7 +51,7 @@ export const mapEntities = () =>
  });

 export const energyEntities = () =>
-  Object.values({
+  convertEntities({
    "sensor.grid_fossil_fuel_percentage": {
      entity_id: "sensor.grid_fossil_fuel_percentage",
      state: "88.6",
@@ -152,38 +154,6 @@ export const energyEntities = () =>
        unit_of_measurement: "EUR",
      },
    },
-    "sensor.power_grid": {
-      entity_id: "sensor.power_grid",
-      state: "500",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_grid_return": {
-      entity_id: "sensor.power_grid_return",
-      state: "-100",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_solar": {
-      entity_id: "sensor.power_solar",
-      state: "200",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_battery": {
-      entity_id: "sensor.power_battery",
-      state: "100",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
    "sensor.energy_gas_cost": {
      entity_id: "sensor.energy_gas_cost",
      state: "2",
@@ -201,15 +171,6 @@ export const energyEntities = () =>
        unit_of_measurement: "m³",
      },
    },
-    "sensor.energy_water": {
-      entity_id: "sensor.energy_water",
-      state: "4000",
-      attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
-        friendly_name: "Water",
-        unit_of_measurement: "L",
-      },
-    },
    "sensor.energy_car": {
      entity_id: "sensor.energy_car",
      state: "4",
@@ -264,58 +225,4 @@ export const energyEntities = () =>
        unit_of_measurement: "kWh",
      },
    },
-    "sensor.power_car": {
-      entity_id: "sensor.power_car",
-      state: "40",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Electric car",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_ac": {
-      entity_id: "sensor.power_ac",
-      state: "30",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Air conditioning",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_washing_machine": {
-      entity_id: "sensor.power_washing_machine",
-      state: "60",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Washing machine",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_dryer": {
-      entity_id: "sensor.power_dryer",
-      state: "55",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Dryer",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_heat_pump": {
-      entity_id: "sensor.power_heat_pump",
-      state: "60",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Heat pump",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_boiler": {
-      entity_id: "sensor.power_boiler",
-      state: "70",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Boiler",
-        unit_of_measurement: "W",
-      },
-    },
  });
@@ -1,4 +1,4 @@
-import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
+import type { EntityRegistryEntry } from "../../../src/data/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockEntityRegistry = (
@@ -1,12 +1,14 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

-let sidebarChangeCallback;
+let changeFunction;

 export const mockFrontend = (hass: MockHomeAssistant) => {
-  hass.mockWS("frontend/get_user_data", () => ({ value: null }));
+  hass.mockWS("frontend/get_user_data", () => ({
+    value: null,
+  }));
  hass.mockWS("frontend/set_user_data", ({ key, value }) => {
    if (key === "sidebar") {
-      sidebarChangeCallback?.({
+      changeFunction?.({
        value: {
          panelOrder: value.panelOrder || [],
          hiddenPanels: value.hiddenPanels || [],
@@ -14,34 +16,15 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
      });
    }
  });
-  hass.mockWS("frontend/subscribe_user_data", (msg, _hass, onChange) => {
-    if (msg.key === "sidebar") {
-      sidebarChangeCallback = onChange;
-    }
-    onChange?.({ value: null });
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  });
-  hass.mockWS(
-    "frontend/subscribe_system_data",
-    (_msg, currentHass, onChange) => {
-      onChange?.({
-        value: currentHass.systemData,
-      });
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return () => {};
-    }
-  );
-  hass.mockWS("labs/subscribe", (_msg, _currentHass, onChange) => {
+  hass.mockWS("frontend/subscribe_user_data", (_msg, _hass, onChange) => {
+    changeFunction = onChange;
    onChange?.({
-      preview_feature: _msg.preview_feature,
-      domain: _msg.domain,
-      enabled: false,
-      is_built_in: true,
+      value: {
+        panelOrder: [],
+        hiddenPanels: [],
+      },
    });
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    return () => {};
  });
-  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
-  hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };
@@ -1,4 +1,4 @@
-import type { LabelRegistryEntry } from "../../../src/data/label/label_registry";
+import type { LabelRegistryEntry } from "../../../src/data/label_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockLabelRegistry = (
@@ -1,5 +1,4 @@
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
-import type { LovelaceInfo } from "../../../src/data/lovelace/resource";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import {
  selectedDemoConfig,
@@ -28,12 +27,8 @@ export const mockLovelace = (
    );
  });

-  hass.mockWS("lovelace/info", () =>
-    Promise.resolve({ resource_mode: "storage" } as LovelaceInfo)
-  );
  hass.mockWS("lovelace/config/save", () => Promise.resolve());
  hass.mockWS("lovelace/resources", () => Promise.resolve([]));
-  hass.mockWS("lovelace/dashboards/list", () => Promise.resolve([]));
 };

 customElements.whenDefined("hui-root").then(() => {
@@ -1,7 +1,6 @@
 import {
  addDays,
  addHours,
-  addMinutes,
  addMonths,
  differenceInHours,
  endOfDay,
@@ -13,36 +12,25 @@ import type {
 } from "../../../src/data/recorder";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

-const getNextDate = (
-  currentDate: Date,
-  period: "5minute" | "hour" | "day" | "month"
-): Date => {
-  return period === "day"
-    ? addDays(currentDate, 1)
-    : period === "month"
-      ? addMonths(currentDate, 1)
-      : period === "hour"
-        ? addHours(currentDate, 1)
-        : addMinutes(currentDate, 5);
-};
-
 const generateMeanStatistics = (
  start: Date,
  end: Date,
+  // eslint-disable-next-line default-param-last
  period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
  maxDiff: number
 ): StatisticValue[] => {
  const statistics: StatisticValue[] = [];
  let currentDate = new Date(start);
  currentDate.setMinutes(0, 0, 0);
+  let lastVal = initValue;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
    const delta = Math.random() * maxDiff;
-    const mean = delta;
-    const nextDate = getNextDate(currentDate, period);
+    const mean = lastVal + delta;
    statistics.push({
      start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
      mean,
      min: mean - Math.random() * maxDiff,
      max: mean + Math.random() * maxDiff,
@@ -50,7 +38,13 @@ const generateMeanStatistics = (
      state: mean,
      sum: null,
    });
-    currentDate = nextDate;
+    lastVal = mean;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
  }
  return statistics;
 };
@@ -58,6 +52,7 @@ const generateMeanStatistics = (
 const generateSumStatistics = (
  start: Date,
  end: Date,
+  // eslint-disable-next-line default-param-last
  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
@@ -68,12 +63,11 @@ const generateSumStatistics = (
  let sum = initValue;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
-    const nextDate = getNextDate(currentDate, period);
    const add = Math.random() * maxDiff;
    sum += add;
    statistics.push({
      start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
      mean: null,
      min: null,
      max: null,
@@ -82,7 +76,12 @@ const generateSumStatistics = (
      state: initValue + sum,
      sum,
    });
-    currentDate = nextDate;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
  }
  return statistics;
 };
@@ -90,7 +89,8 @@ const generateSumStatistics = (
 const generateCurvedStatistics = (
  start: Date,
  end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
+  // eslint-disable-next-line default-param-last
+  _period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number,
  metered: boolean
@@ -104,12 +104,11 @@ const generateCurvedStatistics = (
  let half = false;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
-    const nextDate = getNextDate(currentDate, period);
    const add = i * (Math.random() * maxDiff);
    sum += add;
    statistics.push({
      start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
      mean: null,
      min: null,
      max: null,
@@ -118,7 +117,7 @@ const generateCurvedStatistics = (
      state: initValue + sum,
      sum: metered ? sum : null,
    });
-    currentDate = nextDate;
+    currentDate = addHours(currentDate, 1);
    if (!half && i > hours / 2) {
      half = true;
    }
@@ -296,7 +295,7 @@ const statisticsFunctions: Record<
      end,
      period,
      productionFinalVal,
-      0.2
+      2
    );
    return [...morning, ...production, ...evening, ...rest];
  },
@@ -337,6 +336,7 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
                  start,
                  end,
                  period,
+                  state,
                  state * (state > 80 ? 0.05 : 0.1)
                );
        }
@@ -1,56 +1,58 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockSensor = (hass: MockHomeAssistant) => {
-  hass.mockWS("sensor/numeric_device_classes", () => ({
-    numeric_device_classes: [
-      "volume_storage",
-      "gas",
-      "data_size",
-      "irradiance",
-      "wind_speed",
-      "volatile_organic_compounds",
-      "volatile_organic_compounds_parts",
-      "voltage",
-      "frequency",
-      "precipitation_intensity",
-      "volume",
-      "precipitation",
-      "battery",
-      "nitrogen_dioxide",
-      "speed",
-      "signal_strength",
-      "pm1",
-      "nitrous_oxide",
-      "atmospheric_pressure",
-      "data_rate",
-      "temperature",
-      "power_factor",
-      "aqi",
-      "current",
-      "volume_flow_rate",
-      "humidity",
-      "duration",
-      "ozone",
-      "distance",
-      "pressure",
-      "pm25",
-      "weight",
-      "energy",
-      "carbon_monoxide",
-      "apparent_power",
-      "illuminance",
-      "energy_storage",
-      "moisture",
-      "power",
-      "water",
-      "carbon_dioxide",
-      "ph",
-      "reactive_power",
-      "monetary",
-      "nitrogen_monoxide",
-      "pm10",
-      "sound_pressure",
-      "sulphur_dioxide",
-    ],
-  }));
+  hass.mockWS("sensor/numeric_device_classes", () => [
+    {
+      numeric_device_classes: [
+        "volume_storage",
+        "gas",
+        "data_size",
+        "irradiance",
+        "wind_speed",
+        "volatile_organic_compounds",
+        "volatile_organic_compounds_parts",
+        "voltage",
+        "frequency",
+        "precipitation_intensity",
+        "volume",
+        "precipitation",
+        "battery",
+        "nitrogen_dioxide",
+        "speed",
+        "signal_strength",
+        "pm1",
+        "nitrous_oxide",
+        "atmospheric_pressure",
+        "data_rate",
+        "temperature",
+        "power_factor",
+        "aqi",
+        "current",
+        "volume_flow_rate",
+        "humidity",
+        "duration",
+        "ozone",
+        "distance",
+        "pressure",
+        "pm25",
+        "weight",
+        "energy",
+        "carbon_monoxide",
+        "apparent_power",
+        "illuminance",
+        "energy_storage",
+        "moisture",
+        "power",
+        "water",
+        "carbon_dioxide",
+        "ph",
+        "reactive_power",
+        "monetary",
+        "nitrogen_monoxide",
+        "pm10",
+        "sound_pressure",
+        "sulphur_dioxide",
+      ],
+    },
+  ]);
 };
@@ -7,18 +7,8 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
    })
  );
  hass.mockWS("render_template", (msg, _hass, onChange) => {
-    let result = msg.template;
-    // Simple variable substitution for demo purposes
-    if (msg.variables) {
-      for (const [key, value] of Object.entries(msg.variables)) {
-        result = result.replace(
-          new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, "g"),
-          String(value)
-        );
-      }
-    }
    onChange!({
-      result,
+      result: msg.template,
      listeners: { all: false, domains: [], entities: [], time: false },
    });
    // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1,24 +1,28 @@
 // @ts-check

-import { fileURLToPath } from "node:url";
-
+/* eslint-disable import/no-extraneous-dependencies */
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
 import tseslint from "typescript-eslint";
 import eslintConfigPrettier from "eslint-config-prettier";
 import { configs as litConfigs } from "eslint-plugin-lit";
 import { configs as wcConfigs } from "eslint-plugin-wc";
 import { configs as a11yConfigs } from "eslint-plugin-lit-a11y";
-import html from "@html-eslint/eslint-plugin";
-import importX from "eslint-plugin-import-x";

-const rspackConfigPath = fileURLToPath(
-  new URL("./rspack.config.cjs", import.meta.url)
-);
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = path.dirname(_filename);
+const compat = new FlatCompat({
+  baseDirectory: _dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});

 export default tseslint.config(
-  js.configs.recommended,
+  ...compat.extends("airbnb-base"),
  eslintConfigPrettier,
  litConfigs["flat/all"],
  tseslint.configs.recommended,
@@ -26,7 +30,6 @@ export default tseslint.config(
  tseslint.configs.stylistic,
  wcConfigs["flat/recommended"],
  a11yConfigs.recommended,
-  importX.flatConfigs.recommended,
  {
    plugins: {
      "unused-imports": unusedImports,
@@ -40,6 +43,7 @@ export default tseslint.config(
        __BUILD__: false,
        __VERSION__: false,
        __STATIC_PATH__: false,
+        __SUPERVISOR__: false,
      },

      parser: tseslint.parser,
@@ -54,73 +58,41 @@ export default tseslint.config(
    },

    settings: {
-      "import-x/resolver": {
+      "import/resolver": {
        webpack: {
-          config: rspackConfigPath,
+          config: "./rspack.config.cjs",
        },
      },
    },

    rules: {
-      "array-callback-return": ["error", { allowImplicit: true }],
-      "block-scoped-var": "error",
-      "consistent-return": "error",
-      curly: ["error", "multi-line"],
-      "default-case-last": "error",
-      eqeqeq: ["error", "always", { null: "ignore" }],
-      "guard-for-in": "error",
-      "no-await-in-loop": "error",
-      "no-caller": "error",
-      "no-constructor-return": "error",
-      "no-eval": "error",
-      "no-extend-native": "error",
-      "no-implied-eval": "error",
-      "no-iterator": "error",
-      "no-new-func": "error",
-      "no-new-wrappers": "error",
-      "no-octal-escape": "error",
-      "no-promise-executor-return": "error",
-      "no-return-assign": ["error", "always"],
-      "no-script-url": "error",
-      "no-self-compare": "error",
-      "no-sequences": "error",
-      "no-template-curly-in-string": "error",
-      "no-unreachable-loop": "error",
-
-      "no-else-return": ["error", { allowElseIf: false }],
-      "no-lonely-if": "error",
-      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
-      "no-useless-computed-key": "error",
-      "no-useless-concat": "error",
-      "no-useless-rename": "error",
-      "no-useless-return": "error",
-      "one-var": ["error", "never"],
-      "operator-assignment": ["error", "always"],
-      "prefer-arrow-callback": "error",
-      "prefer-exponentiation-operator": "error",
-      "prefer-object-spread": "error",
-      "prefer-regex-literals": ["error", { disallowRedundantWrapping: true }],
-      "symbol-description": "error",
-      yoda: "error",
-
-      // TODO: Enable once violations are fixed (43 instances as of 2026-04)
-      // "no-useless-assignment": "error",
-      "no-useless-assignment": "error",
-
-      // Project rules
+      "class-methods-use-this": "off",
+      "new-cap": "off",
+      "prefer-template": "off",
+      "object-shorthand": "off",
+      "func-names": "off",
+      "no-underscore-dangle": "off",
+      strict: "off",
+      "no-plusplus": "off",
      "no-bitwise": "error",
+      "comma-dangle": "off",
+      "vars-on-top": "off",
+      "no-continue": "off",
+      "no-param-reassign": "off",
+      "no-multi-assign": "off",
      "no-console": "error",
+      radix: "off",
+      "no-alert": "off",
+      "no-nested-ternary": "off",
+      "prefer-destructuring": "off",
      "no-restricted-globals": [2, "event"],
-      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-      "wc/no-self-class": "off",
+      "prefer-promise-reject-errors": "off",
+      "import/prefer-default-export": "off",
+      "import/no-default-export": "off",
+      "import/no-unresolved": "off",
+      "import/no-cycle": "off",

-      // import-x rules
-      "import-x/named": "off",
-      "import-x/prefer-default-export": "off",
-      "import-x/no-default-export": "off",
-      "import-x/no-unresolved": "off",
-      "import-x/no-cycle": "off",
-      "import-x/extensions": [
+      "import/extensions": [
        "error",
        "ignorePackages",
        {
@@ -128,27 +100,19 @@ export default tseslint.config(
          js: "never",
        },
      ],
-      "import-x/no-mutable-exports": "error",
-      "import-x/no-amd": "error",
-      "import-x/first": "error",
-      "import-x/order": [
-        "error",
-        { groups: [["builtin", "external", "internal"]] },
-      ],
-      "import-x/newline-after-import": "error",
-      "import-x/no-absolute-path": "error",
-      "import-x/no-dynamic-require": "error",
-      "import-x/no-webpack-loader-syntax": "error",
-      "import-x/no-named-default": "error",
-      "import-x/no-self-import": "error",
-      "import-x/no-useless-path-segments": ["error", { commonjs: true }],
-      "import-x/no-import-module-exports": ["error", { exceptions: [] }],
-      "import-x/no-relative-packages": "error",

-      // TypeScript rules
+      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+      "object-curly-newline": "off",
+      "default-case": "off",
+      "wc/no-self-class": "off",
+      "no-shadow": "off",
+      "@typescript-eslint/camelcase": "off",
      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-use-before-define": "off",
      "@typescript-eslint/no-non-null-assertion": "off",
      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
      "@typescript-eslint/no-shadow": ["error"],

      "@typescript-eslint/naming-convention": [
@@ -212,6 +176,7 @@ export default tseslint.config(
      "lit-a11y/role-has-required-aria-attrs": "error",
      "@typescript-eslint/consistent-type-imports": "error",
      "@typescript-eslint/no-import-type-side-effects": "error",
+      camelcase: "off",
      "@typescript-eslint/no-dynamic-delete": "off",
      "@typescript-eslint/no-empty-object-type": [
        "error",
@@ -220,26 +185,7 @@ export default tseslint.config(
          allowObjectTypes: "always",
        },
      ],
-    },
-  },
-  {
-    files: ["src/util/recorder-worklet.js"],
-    languageOptions: {
-      globals: globals.audioWorklet,
-    },
-  },
-  {
-    files: ["src/entrypoints/service-worker.ts"],
-    languageOptions: {
-      globals: globals.serviceworker,
-    },
-  },
-  {
-    plugins: {
-      html,
-    },
-    rules: {
-      "html/no-invalid-attr-value": "error",
+      "no-use-before-define": "off",
    },
  }
 );
@@ -1,112 +0,0 @@
-# Gallery Agent Instructions
-
-This file applies to all files under `gallery/`. Follow the root `AGENTS.md` for repository-wide Home Assistant frontend, TypeScript, Lit, accessibility, and copy standards. This file adds gallery-specific structure, page, demo, and verification guidance.
-
-## Quick Reference
-
-Run commands from the repository root unless noted otherwise:
-
-```bash
-gallery/script/develop_gallery  # Start the gallery development server
-gallery/script/build_gallery    # Build the static gallery
-yarn lint                       # ESLint, Prettier, TypeScript, and Lit checks
-yarn lint:types                 # TypeScript compiler, without file arguments
-```
-
-Never run `yarn lint:types` or `tsc` with file arguments. See the root `AGENTS.md` for the generated `.js` file risk.
-
-## Purpose
-
-The gallery is a developer and designer reference for Home Assistant frontend UI patterns. It documents component APIs, shows realistic Lovelace and more-info states, captures brand and copy guidance, and provides reproducible demos that are safe to inspect outside a running Home Assistant instance.
-
- Prefer demonstrating real production components from `src/` instead of creating gallery-only replacements.
- Keep fake state, sample data, and demo-only helpers inside `gallery/`.
- Do not move gallery stubs or demo data into production code unless a production feature explicitly needs them.
- Do not hand-edit generated output under `gallery/build/` or `gallery/dist/`.
-
-## Structure
-
- `sidebar.js`: Defines gallery sections, headers, and explicit page ordering.
- `script/develop_gallery`: Wrapper for the `develop-gallery` gulp task.
- `script/build_gallery`: Wrapper for the `build-gallery` gulp task.
- `src/entrypoint.js`: Creates the `<ha-gallery>` shell.
- `src/ha-gallery.ts`: Renders the drawer, page routing, markdown descriptions, demos, edit links, and RTL toggle.
- `src/html/index.html.template`: HTML template used by the gallery build.
- `src/pages/<category>/<page>.markdown`: Optional page description and frontmatter.
- `src/pages/<category>/<page>.ts`: Optional live demo module for the same page id.
- `src/components/`: Gallery-only demo wrappers like `demo-card`, `demo-cards`, `demo-more-info`, and `page-description`.
- `src/data/`: Fake `hass`, demo states, mock traces, and reusable sample data.
- `public/`: Static assets copied into the gallery output.
-
-## Page Model
-
-Gallery pages are generated by `gather-gallery-pages` in `build-scripts/gulp/gallery.js`.
-
- A page id is the path under `src/pages/` without the extension, like `components/ha-button`.
- A `.markdown` file and a `.ts` file with the same page id become one gallery page.
- A page may have only markdown, only a TypeScript demo, or both.
- Markdown can contain YAML frontmatter with `title` and optional `subtitle`.
- Markdown that contains only frontmatter contributes metadata without rendering a description block.
- TypeScript demo modules are dynamically imported for side effects when the page is opened.
- A demo module must define a custom element named `demo-${category}-${page}` with slashes replaced by hyphens, like `demo-components-ha-button` for `components/ha-button`.
- `ha-gallery.ts` renders that element with `dynamicElement()` based on the current page id.
-
-## Sidebar
-
-Use `sidebar.js` when a page needs a visible section, section header, or deterministic ordering.
-
- `category` must match the first directory name under `src/pages/`.
- `header` is the section label shown in the drawer.
- `pages` is optional. When present, listed pages keep that exact order.
- Pages in a category that are not listed are appended alphabetically after the listed pages.
- New categories without a sidebar entry are appended by the generator with their category name as the header.
- If a listed page does not exist, the generator logs an error during `gather-gallery-pages`.
-
-## Markdown Pages
-
-Use markdown pages for explanations, design guidance, API notes, and copy standards.
-
- Start with frontmatter when the page needs a title or subtitle.
- Use sentence case for titles, headings, labels, and UI copy.
- Put the live example before the reference API when that makes the page easier to scan.
- Use fenced code blocks with a language tag for copyable examples.
- Keep examples short and focused on the behavior being documented.
- Prefer real component names and attributes over prose-only descriptions.
- Use Home Assistant terminology from the root `AGENTS.md`.
- For remove/delete and add/create wording, follow `src/pages/misc/remove-delete-add-create.markdown`.
-
-Gallery markdown is documentation content and is not localized with `localize`. If demo code creates production UI strings, keep those strings aligned with the root localization and copy guidance.
-
-## Demo Components
-
-Use TypeScript demo pages for interactive or stateful examples.
-
- Import production components from `../../../src/...` or the correct relative path from the demo file.
- Import reusable gallery helpers from `gallery/src/components/` when they already model the pattern.
- Use `demo-card` and `demo-cards` for Lovelace card examples that render YAML card configs.
- Use `demo-more-info` and `demo-more-infos` for more-info dialog examples.
- Use shared mock data from `src/data/` instead of repeating large fake state objects inline.
- Show meaningful states, such as loading, unavailable, empty, error, active, inactive, and disabled when relevant.
- Check responsive behavior and the gallery RTL toggle when layout or direction-sensitive UI changes.
- Keep unavoidable casts or loose demo parsing local to the demo helper or demo page.
-
-The gallery ESLint config allows `console` for gallery diagnostics. Do not copy that exception into production frontend code.
-
-## Content Standards
-
-The root copy standards still apply: use American English, sentence case, active voice, inclusive language, direct user-focused wording, and consistent Home Assistant terminology.
-
- Use `Home Assistant` in full, not `HA` or `HASS`.
- Use `integration` instead of `component` for product concepts.
- Use `Remove` for reversible disassociation and `Delete` for permanent deletion.
- Use `Add` for existing items and `Create` for something made from scratch.
- Avoid Latin abbreviations like `e.g.` and `i.e.` in prose.
- Avoid stitching sentence fragments together in production UI examples.
-
-## Verification
-
- For markdown, sidebar, and page-generation changes, run `gallery/script/build_gallery`.
- For TypeScript demo or gallery shell changes, run the smallest relevant check plus `yarn lint` when practical.
- For type checking, run `yarn lint:types` without file arguments.
- For visual changes, run `gallery/script/develop_gallery` and check the affected page on desktop, narrow viewport, and RTL when relevant.
- If verification is skipped, state which command was skipped and why.
@@ -1,50 +1,20 @@
-import {
-  mdiAccountGroup,
-  mdiCalendarClock,
-  mdiDotsHorizontal,
-  mdiHome,
-  mdiInformationOutline,
-  mdiPalette,
-  mdiPuzzle,
-  mdiRobot,
-  mdiViewDashboard,
-} from "@mdi/js";
-
 export default [
  {
    // This section has no header and so all page links are shown directly in the sidebar
    category: "concepts",
-    icon: mdiHome,
    pages: ["home"],
  },

-  {
-    category: "brand",
-    icon: mdiPalette,
-    header: "Brand",
-  },
-  {
-    category: "components",
-    icon: mdiPuzzle,
-    header: "Components",
-  },
  {
    category: "lovelace",
-    icon: mdiViewDashboard,
    // Label for in the sidebar
    header: "Dashboards",
    // Specify order of pages. Any pages in the category folder but not listed here will
    // automatically be added after the pages listed here.
    pages: ["introduction"],
  },
-  {
-    category: "more-info",
-    icon: mdiInformationOutline,
-    header: "More Info dialogs",
-  },
  {
    category: "automation",
-    icon: mdiRobot,
    header: "Automation",
    pages: [
      "editor-trigger",
@@ -54,29 +24,33 @@ export default [
      "trace-timeline",
    ],
  },
+  {
+    category: "components",
+    header: "Components",
+  },
+  {
+    category: "more-info",
+    header: "More Info dialogs",
+  },
+  {
+    category: "misc",
+    header: "Miscellaneous",
+  },
+  {
+    category: "brand",
+    header: "Brand",
+  },
  {
    category: "user-test",
-    icon: mdiAccountGroup,
    header: "Users",
    pages: ["user-types", "configuration-menu"],
  },
  {
    category: "date-time",
-    icon: mdiCalendarClock,
    header: "Date and Time",
  },
  {
-    category: "misc",
-    icon: mdiDotsHorizontal,
-    header: "Miscellaneous",
-    pages: [
-      "entity-state",
-      "ha-markdown",
-      "integration-card",
-      "box-shadow",
-      "util-long-press",
-      "remove-delete-add-create",
-      "editing",
-    ],
+    category: "design.home-assistant.io",
+    header: "About",
  },
 ];
@@ -1,121 +0,0 @@
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import { extractVars } from "../../../src/common/style/derived-css-vars";
-import { animationStyles } from "../../../src/resources/theme/animations.globals";
-import { coreStyles } from "../../../src/resources/theme/core.globals";
-import { colorStyles } from "../../../src/resources/theme/color/color.globals";
-import { coreColorStyles } from "../../../src/resources/theme/color/core.globals";
-import { semanticColorStyles } from "../../../src/resources/theme/color/semantic.globals";
-import { waColorStyles } from "../../../src/resources/theme/color/wa.globals";
-import { mainStyles } from "../../../src/resources/theme/main.globals";
-import { semanticStyles } from "../../../src/resources/theme/semantic.globals";
-import { typographyStyles } from "../../../src/resources/theme/typography.globals";
-import { waMainStyles } from "../../../src/resources/theme/wa.globals";
-import type { HomeAssistant, ThemeSettings } from "../../../src/types";
-
-export const GALLERY_THEME_STORAGE_KEY = "gallery-theme";
-
-export const loadGalleryThemeSettings = (): ThemeSettings => {
-  const stored = localStorage.getItem(GALLERY_THEME_STORAGE_KEY);
-  if (!stored) {
-    return { theme: "default" };
-  }
-
-  try {
-    const parsed = JSON.parse(stored) as unknown;
-    const value =
-      parsed && typeof parsed === "object"
-        ? (parsed as Partial<ThemeSettings>)
-        : {};
-    return {
-      theme: "default",
-      dark: typeof value.dark === "boolean" ? value.dark : undefined,
-      primaryColor:
-        typeof value.primaryColor === "string" ? value.primaryColor : undefined,
-      accentColor:
-        typeof value.accentColor === "string" ? value.accentColor : undefined,
-    };
-  } catch (_err) {
-    return { theme: "default" };
-  }
-};
-
-const LIGHT_THEME_STYLES = [
-  coreStyles,
-  mainStyles,
-  typographyStyles,
-  semanticStyles,
-  coreColorStyles,
-  semanticColorStyles,
-  colorStyles,
-  waColorStyles,
-  waMainStyles,
-  animationStyles,
-];
-
-const LIGHT_THEME_VARIABLES = LIGHT_THEME_STYLES.reduce<Record<string, string>>(
-  (variables, style) => {
-    for (const [key, value] of Object.entries(extractVars(style))) {
-      variables[`--${key}`] = value;
-    }
-    return variables;
-  },
-  {}
-);
-
-const LIGHT_THEME_VARIABLE_KEYS = Object.keys(LIGHT_THEME_VARIABLES);
-const LIGHT_THEME_DEFAULTS_APPLIED = new WeakSet<HTMLElement>();
-
-export const effectiveGalleryDarkMode = (
-  themeSettings: ThemeSettings,
-  systemDark: boolean
-): boolean => themeSettings.dark ?? systemDark;
-
-const galleryThemes = (darkMode: boolean): HomeAssistant["themes"] => ({
-  default_theme: "default",
-  default_dark_theme: null,
-  themes: {},
-  darkMode,
-  theme: "default",
-});
-
-const applyLightThemeDefaults = (element: HTMLElement, lightMode: boolean) => {
-  if (lightMode) {
-    for (const [key, value] of Object.entries(LIGHT_THEME_VARIABLES)) {
-      element.style.setProperty(key, value);
-    }
-    LIGHT_THEME_DEFAULTS_APPLIED.add(element);
-    return;
-  }
-
-  if (!LIGHT_THEME_DEFAULTS_APPLIED.has(element)) {
-    return;
-  }
-
-  for (const key of LIGHT_THEME_VARIABLE_KEYS) {
-    element.style.removeProperty(key);
-  }
-  LIGHT_THEME_DEFAULTS_APPLIED.delete(element);
-};
-
-export const applyFlippedGalleryTheme = (
-  element: HTMLElement,
-  themeSettings: ThemeSettings,
-  systemDark: boolean
-) => {
-  const darkMode = !effectiveGalleryDarkMode(themeSettings, systemDark);
-
-  if (!darkMode) {
-    applyThemesOnElement(element, galleryThemes(false), undefined, {
-      dark: false,
-    });
-    applyLightThemeDefaults(element, true);
-  } else {
-    applyLightThemeDefaults(element, false);
-  }
-
-  applyThemesOnElement(element, galleryThemes(darkMode), "default", {
-    ...themeSettings,
-    dark: darkMode,
-  });
-  element.style.colorScheme = darkMode ? "dark" : "light";
-};
@@ -1,83 +1,25 @@
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import type { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-button";
 import type { HaButton } from "../../../src/components/ha-button";
-import type { ThemeSettings } from "../../../src/types";
-import {
-  applyFlippedGalleryTheme,
-  effectiveGalleryDarkMode,
-  loadGalleryThemeSettings,
-} from "../common/theme";
-
-const mql = matchMedia("(prefers-color-scheme: dark)");

@customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
  // eslint-disable-next-line lit/no-native-attributes
  @property() title!: string;

-  @property({ attribute: false }) value?: unknown;
+  @property() value?: any;

  @property({ type: Boolean }) public disabled = false;

-  @state() private _themeSettings = loadGalleryThemeSettings();
-
-  @state() private _systemDark = mql.matches;
-
-  @query(".flipped") private _flipped?: HTMLElement;
-
-  connectedCallback() {
-    super.connectedCallback();
-    mql.addEventListener("change", this._systemDarkChanged);
-    window.addEventListener(
-      "theme-settings-changed",
-      this._themeSettingsChanged as EventListener
-    );
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    mql.removeEventListener("change", this._systemDarkChanged);
-    window.removeEventListener(
-      "theme-settings-changed",
-      this._themeSettingsChanged as EventListener
-    );
-  }
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    this._applyFlippedTheme();
-  }
-
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-
-    if (
-      changedProperties.has("_themeSettings") ||
-      changedProperties.has("_systemDark")
-    ) {
-      this._applyFlippedTheme();
-    }
-  }
-
  protected render(): TemplateResult {
-    const currentLabel = effectiveGalleryDarkMode(
-      this._themeSettings,
-      this._systemDark
-    )
-      ? "Dark mode"
-      : "Light mode";
-    const flippedLabel =
-      currentLabel === "Dark mode" ? "Light mode" : "Dark mode";
-
    return html`
      <div class="row">
-        <section class="content current" aria-label=${currentLabel}>
-          <h2>${currentLabel}</h2>
+        <div class="content light">
          <ha-card .header=${this.title}>
            <div class="card-content">
              <slot name="light"></slot>
@@ -88,9 +30,8 @@ class DemoBlackWhiteRow extends LitElement {
              </ha-button>
            </div>
          </ha-card>
-        </section>
-        <section class="content flipped" aria-label=${flippedLabel}>
-          <h2>${flippedLabel}</h2>
+        </div>
+        <div class="content dark">
          <ha-card .header=${this.title}>
            <div class="card-content">
              <slot name="dark"></slot>
@@ -104,84 +45,65 @@ class DemoBlackWhiteRow extends LitElement {
          ${this.value
            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
            : nothing}
-        </section>
+        </div>
      </div>
    `;
  }

-  handleSubmit(ev: Event) {
-    const content = (ev.target as HaButton).closest(".content");
-    if (!content) {
-      return;
-    }
-
-    fireEvent(this, "submitted" as any, {
-      slot: content.classList.contains("current") ? "light" : "dark",
-    });
-  }
-
-  private _themeSettingsChanged = (
-    ev: HASSDomEvent<Partial<ThemeSettings>>
-  ) => {
-    this._themeSettings = {
-      ...this._themeSettings,
-      ...ev.detail,
-      theme: "default",
-    };
-  };
-
-  private _systemDarkChanged = (ev: MediaQueryListEvent) => {
-    this._systemDark = ev.matches;
-  };
-
-  private _applyFlippedTheme() {
-    if (!this._flipped) {
-      return;
-    }
-
-    applyFlippedGalleryTheme(
-      this._flipped,
-      this._themeSettings,
-      this._systemDark
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
    );
  }

+  handleSubmit(ev) {
+    const content = (ev.target as HaButton).closest(".content")!;
+    fireEvent(this, "submitted" as any, {
+      slot: content.classList.contains("light") ? "light" : "dark",
+    });
+  }
+
  static styles = css`
-    :host {
-      display: block;
-      flex: 1;
-      min-block-size: 100%;
-    }
    .row {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      inline-size: 100%;
-      min-block-size: 100%;
+      display: flex;
    }
    .content {
-      box-sizing: border-box;
-      min-inline-size: 0;
-      padding: var(--ha-space-8);
+      padding: 50px 0;
      background-color: var(--primary-background-color);
-      color: var(--primary-text-color);
+    }
+    .light {
+      flex: 1;
+      padding-left: 50px;
+      padding-right: 50px;
+      box-sizing: border-box;
+    }
+    .light ha-card {
+      margin-left: auto;
+    }
+    .dark {
      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-4);
+      flex: 1;
+      padding-left: 50px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
    }
    ha-card {
-      width: 100%;
-    }
-    h2 {
-      margin: 0;
-      color: var(--primary-text-color);
-      font-size: var(--ha-font-size-xl);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: var(--ha-line-height-normal);
+      width: 400px;
    }
    pre {
-      box-sizing: border-box;
-      width: 100%;
-      margin: 0;
+      width: 300px;
+      margin: 0 16px 0;
      overflow: auto;
      color: var(--primary-text-color);
    }
@@ -190,18 +112,27 @@ class DemoBlackWhiteRow extends LitElement {
      flex-direction: row-reverse;
      border-top: none;
    }
-    @media only screen and (max-width: 1000px) {
-      .row {
-        grid-template-columns: 1fr;
+    @media only screen and (max-width: 1500px) {
+      .light {
+        flex: initial;
      }
-      .content {
+    }
+    @media only screen and (max-width: 1000px) {
+      .light,
+      .dark {
        padding: 16px;
      }
+      .row,
+      .dark {
+        flex-direction: column;
+      }
      ha-card {
+        margin: 0 auto;
        width: 100%;
+        max-width: 400px;
      }
      pre {
-        margin: 0;
+        margin: 16px auto;
      }
    }
  `;
@@ -1,5 +1,5 @@
 import { load } from "js-yaml";
-import type { PropertyValues } from "lit";
+import type { PropertyValueMap } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -60,7 +60,9 @@ class DemoCard extends LitElement {
    this._size = await this._card?.getCardSize();
  }

-  protected update(_changedProperties: PropertyValues<this>): void {
+  protected update(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
    super.update(_changedProperties);
    this._updateSize();
  }
@@ -1,5 +1,6 @@
 import { html, css, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../src/types";
@@ -15,12 +16,17 @@ class DemoCards extends LitElement {

  @state() private _showConfig = false;

+  @query("#container") private _container!: HTMLElement;
+
  render() {
    return html`
      <ha-demo-options>
        <ha-formfield label="Show config">
          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
        </ha-formfield>
+        <ha-formfield label="Dark theme">
+          <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
+        </ha-formfield>
      </ha-demo-options>
      <div id="container">
        <div class="cards">
@@ -42,6 +48,12 @@ class DemoCards extends LitElement {
    this._showConfig = ev.target.checked;
  }

+  private _darkThemeToggled(ev) {
+    applyThemesOnElement(this._container, { themes: {} } as any, "default", {
+      dark: ev.target.checked,
+    });
+  }
+
  static styles = css`
    .cards {
      display: flex;
@@ -1,5 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../src/types";
@@ -20,6 +21,9 @@ class DemoMoreInfos extends LitElement {
        <ha-formfield label="Show config">
          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
        </ha-formfield>
+        <ha-formfield label="Dark theme">
+          <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
+        </ha-formfield>
      </ha-demo-options>
      <div id="container">
        <div class="cards">
@@ -47,16 +51,33 @@ class DemoMoreInfos extends LitElement {
      justify-content: center;
    }
    demo-more-info {
-      margin: var(--ha-space-4) var(--ha-space-4) var(--ha-space-8);
+      margin: 16px 16px 32px;
    }
    ha-formfield {
-      margin-right: var(--ha-space-4);
+      margin-right: 16px;
    }
  `;

  private _showConfigToggled(ev) {
    this._showConfig = ev.target.checked;
  }
+
+  private _darkThemeToggled(ev) {
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector("#container"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: false,
+        theme: "default",
+      },
+      "default",
+      {
+        dark: ev.target.checked,
+      }
+    );
+  }
 }

 declare global {
@@ -1,153 +0,0 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, query, state } from "lit/decorators";
-import type { HASSDomEvent } from "../../../src/common/dom/fire_event";
-import type { ThemeSettings } from "../../../src/types";
-import {
-  applyFlippedGalleryTheme,
-  effectiveGalleryDarkMode,
-  loadGalleryThemeSettings,
-} from "../common/theme";
-
-const mql = matchMedia("(prefers-color-scheme: dark)");
-
-export const THEME_COMPARISON_PANELS = [
-  { slot: "current" },
-  { slot: "flipped" },
-] as const;
-
-@customElement("demo-theme-comparison")
-export class DemoThemeComparison extends LitElement {
-  @state() private _themeSettings = loadGalleryThemeSettings();
-
-  @state() private _systemDark = mql.matches;
-
-  @query(".flipped") private _flipped?: HTMLElement;
-
-  connectedCallback() {
-    super.connectedCallback();
-    mql.addEventListener("change", this._systemDarkChanged);
-    window.addEventListener(
-      "theme-settings-changed",
-      this._themeSettingsChanged as EventListener
-    );
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    mql.removeEventListener("change", this._systemDarkChanged);
-    window.removeEventListener(
-      "theme-settings-changed",
-      this._themeSettingsChanged as EventListener
-    );
-  }
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    this._applyFlippedTheme();
-  }
-
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-
-    if (
-      changedProperties.has("_themeSettings") ||
-      changedProperties.has("_systemDark")
-    ) {
-      this._applyFlippedTheme();
-    }
-  }
-
-  protected render(): TemplateResult {
-    const currentLabel = effectiveGalleryDarkMode(
-      this._themeSettings,
-      this._systemDark
-    )
-      ? "Dark mode"
-      : "Light mode";
-    const flippedLabel =
-      currentLabel === "Dark mode" ? "Light mode" : "Dark mode";
-
-    return html`
-      <section class="panel" aria-label=${currentLabel}>
-        <h2>${currentLabel}</h2>
-        <slot name="current"></slot>
-      </section>
-      <section class="panel flipped" aria-label=${flippedLabel}>
-        <h2>${flippedLabel}</h2>
-        <slot name="flipped"></slot>
-      </section>
-    `;
-  }
-
-  private _themeSettingsChanged = (
-    ev: HASSDomEvent<Partial<ThemeSettings>>
-  ) => {
-    this._themeSettings = {
-      ...this._themeSettings,
-      ...ev.detail,
-      theme: "default",
-    };
-  };
-
-  private _systemDarkChanged = (ev: MediaQueryListEvent) => {
-    this._systemDark = ev.matches;
-  };
-
-  private _applyFlippedTheme() {
-    if (!this._flipped) {
-      return;
-    }
-
-    applyFlippedGalleryTheme(
-      this._flipped,
-      this._themeSettings,
-      this._systemDark
-    );
-  }
-
-  static styles = css`
-    :host {
-      box-sizing: border-box;
-      display: grid;
-      flex: 1;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      inline-size: 100%;
-      min-block-size: 100%;
-    }
-
-    .panel {
-      box-sizing: border-box;
-      min-block-size: 100%;
-      min-inline-size: 0;
-      padding: var(--ha-space-6);
-      background-color: var(--primary-background-color);
-      color: var(--primary-text-color);
-    }
-
-    h2 {
-      margin: 0 0 var(--ha-space-4);
-      color: var(--primary-text-color);
-      font-size: var(--ha-font-size-xl);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: var(--ha-line-height-normal);
-    }
-
-    ::slotted(*) {
-      box-sizing: border-box;
-      inline-size: 100%;
-    }
-
-    @media only screen and (max-width: 1000px) {
-      :host {
-        grid-template-columns: 1fr;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-theme-comparison": DemoThemeComparison;
-  }
-}
@@ -1,87 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-settings-row";
-import "../../../src/components/ha-switch";
-import type { HaSwitch } from "../../../src/components/ha-switch";
-import "../../../src/components/ha-theme-settings";
-import type { HomeAssistant, ThemeSettings } from "../../../src/types";
-
-@customElement("gallery-settings")
-class GallerySettings extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public themeSettings!: ThemeSettings;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ type: Boolean }) public rtl = false;
-
-  protected render() {
-    return html`
-      <div class="content">
-        <ha-card .header=${"Appearance"}>
-          <div class="card-content">
-            Configure how the gallery renders component previews and examples.
-          </div>
-          <ha-theme-settings
-            .hass=${this.hass}
-            .selectedTheme=${this.themeSettings}
-            .narrow=${this.narrow}
-            .heading=${"Theme"}
-            .description=${"Choose the mode and colors used throughout the gallery."}
-            .labels=${{
-              mode: "Theme mode",
-              autoMode: "Auto",
-              lightMode: "Light",
-              darkMode: "Dark",
-              primaryColor: "Primary color",
-              accentColor: "Accent color",
-              reset: "Reset",
-            }}
-            .showThemePicker=${false}
-          ></ha-theme-settings>
-          <ha-settings-row .narrow=${this.narrow}>
-            <span slot="heading">Right-to-left layout</span>
-            <span slot="description">
-              Preview the gallery with right-to-left text direction.
-            </span>
-            <ha-switch
-              .checked=${this.rtl}
-              @change=${this._rtlChanged}
-            ></ha-switch>
-          </ha-settings-row>
-        </ha-card>
-      </div>
-    `;
-  }
-
-  private _rtlChanged(ev: Event) {
-    fireEvent(this, "gallery-rtl-changed", {
-      rtl: (ev.currentTarget as HaSwitch).checked,
-    });
-  }
-
-  static styles = css`
-    .content {
-      max-width: 800px;
-      margin: 0 auto;
-      padding: var(--ha-space-4);
-    }
-
-    ha-card {
-      overflow: hidden;
-    }
-  `;
-}
-
-declare global {
-  interface HASSDomEvents {
-    "gallery-rtl-changed": { rtl: boolean };
-  }
-
-  interface HTMLElementTagNameMap {
-    "gallery-settings": GallerySettings;
-  }
-}
@@ -13,10 +13,13 @@ class PageDescription extends HaMarkdown {
      return nothing;
    }

-    const subtitle = PAGES[this.page].metadata.subtitle;
-
    return html`
-      ${subtitle ? html`<div class="subtitle">${subtitle}</div>` : nothing}
+      <div class="heading">
+        <div class="title">
+          ${PAGES[this.page].metadata.title || this.page.split("/")[1]}
+        </div>
+        <div class="subtitle">${PAGES[this.page].metadata.subtitle}</div>
+      </div>
      ${until(
        PAGES[this.page]
          .description()
@@ -29,9 +32,16 @@ class PageDescription extends HaMarkdown {
  static styles = [
    HaMarkdown.styles,
    css`
-      .subtitle {
+      .heading {
        padding: 16px;
        border-bottom: 1px solid var(--secondary-background-color);
+      }
+      .title {
+        font-size: 42px;
+        line-height: var(--ha-line-height-condensed);
+        padding-bottom: 8px;
+      }
+      .subtitle {
        font-size: var(--ha-font-size-l);
        line-height: var(--ha-line-height-normal);
      }
@@ -1,253 +1,165 @@
+import { getEntity } from "../../../src/fake_data/entity";
+
 export const createMediaPlayerEntities = () => [
-  {
-    entity_id: "media_player.music_paused",
-    state: "paused",
-    attributes: {
-      friendly_name: "Pausing The Music",
-      media_content_type: "music",
-      media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-      media_artist: "Technohead",
-      // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-      // Select Source + Stop + Clear + Play + Shuffle Set
-      supported_features: 64063,
-      entity_picture: "/images/album_cover_2.jpg",
-      media_duration: 300,
-      media_position: 50,
-      media_position_updated_at: new Date(
-        // 23 seconds in
-        new Date().getTime() - 23000
-      ).toISOString(),
-      volume_level: 0.5,
-      source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-      source: "AirPlay",
-      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-      sound_mode: "Music",
-    },
-  },
-  {
-    entity_id: "media_player.music_playing",
-    state: "playing",
-    attributes: {
-      friendly_name: "Playing The Music",
-      media_content_type: "music",
-      media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-      media_artist: "Technohead",
-      // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-      // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media + Grouping
-      supported_features: 784959,
-      entity_picture: "/images/album_cover.jpg",
-      media_duration: 300,
-      media_position: 0,
-      media_position_updated_at: new Date(
-        // 23 seconds in
-        new Date().getTime() - 23000
-      ).toISOString(),
-      volume_level: 0.5,
-      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-      sound_mode: "Music",
-      group_members: ["media_player.playing", "media_player.stream_playing"],
-    },
-  },
-  {
-    entity_id: "media_player.stream_playing",
-    state: "playing",
-    attributes: {
-      friendly_name: "Playing the Stream",
-      media_content_type: "movie",
-      media_title: "Epic sax guy 10 hours",
-      app_name: "YouTube",
-      entity_picture: "/images/frenck.jpg",
-      // Pause + Next Track + Play + Browse Media
-      supported_features: 147489,
-    },
-  },
-  {
-    entity_id: "media_player.stream_paused",
-    state: "paused",
-    attributes: {
-      friendly_name: "Paused the Stream",
-      media_content_type: "movie",
-      media_title: "Epic sax guy 10 hours",
-      app_name: "YouTube",
-      entity_picture: "/images/frenck.jpg",
-      // Pause + Next Track + Play
-      supported_features: 16417,
-    },
-  },
-  {
-    entity_id: "media_player.stream_playing_previous",
-    state: "playing",
-    attributes: {
-      friendly_name: 'Playing the Stream (with "previous" support)',
-      media_content_type: "movie",
-      media_title: "Epic sax guy 10 hours",
-      app_name: "YouTube",
-      entity_picture: "/images/frenck.jpg",
-      // Pause + Previous Track + Play
-      supported_features: 16401,
-    },
-  },
-  {
-    entity_id: "media_player.tv_playing",
-    state: "playing",
-    attributes: {
-      friendly_name: "Playing non-skip TV Show",
-      media_content_type: "tvshow",
-      media_title: "Chapter 1",
-      media_series_title: "House of Cards",
-      app_name: "Netflix",
-      entity_picture: "/images/netflix.jpg",
-      // Pause
-      supported_features: 1,
-    },
-  },
-  {
-    entity_id: "media_player.sonos_idle",
-    state: "idle",
-    attributes: {
-      friendly_name: "Sonos Idle",
-      // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-      // Select Source + Stop + Clear + Play + Shuffle Set
-      supported_features: 64063,
-      volume_level: 0.33,
-      is_volume_muted: true,
-    },
-  },
-  {
-    entity_id: "media_player.idle_browse_media",
-    state: "idle",
-    attributes: {
-      friendly_name: "Idle waiting for Browse Media (e.g. Spotify)",
-      // Pause + Seek + Volume Set + Previous Track + Next Track + Play Media +
-      // Select Source + Play + Shuffle Set + Browse Media
-      supported_features: 182839,
-      volume_level: 0.79,
-    },
-  },
-  {
-    entity_id: "media_player.theater_off",
-    state: "off",
-    attributes: {
-      friendly_name: "TV Off",
-      // On + Off + Play + Next + Pause
-      supported_features: 16801,
-    },
-  },
-  {
-    entity_id: "media_player.theater_on",
-    state: "on",
-    attributes: {
-      friendly_name: "TV On",
-      // On + Off + Play + Next + Pause
-      supported_features: 16801,
-    },
-  },
-  {
-    entity_id: "media_player.theater_off_static",
-    state: "off",
-    attributes: {
-      friendly_name: "TV Off (cannot be switched on)",
-      // Off + Next + Pause
-      supported_features: 289,
-    },
-  },
-  {
-    entity_id: "media_player.theater_on_static",
-    state: "on",
-    attributes: {
-      friendly_name: "TV On (cannot be switched off)",
-      // On + Next + Pause
-      supported_features: 161,
-    },
-  },
-  {
-    entity_id: "media_player.android_cast",
-    state: "playing",
-    attributes: {
-      friendly_name: "Casting App (no supported features)",
-      media_title: "Android Screen Casting",
-      app_name: "Screen Mirroring",
-    },
-  },
-  {
-    entity_id: "media_player.image_display",
-    state: "playing",
-    attributes: {
-      friendly_name: "Digital Picture Frame",
-      media_content_type: "image",
-      media_title: "Famous Painting",
-      media_artist: "Famous Artist",
-      entity_picture: "/images/sunflowers.jpg",
-      // On + Off + Browse Media
-      supported_features: 131456,
-    },
-  },
-  {
-    entity_id: "media_player.unavailable",
-    state: "unavailable",
-    attributes: {
-      friendly_name: "Player Unavailable",
-      // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
-      // Play Media + Stop + Play
-      supported_features: 21437,
-    },
-  },
-  {
-    entity_id: "media_player.unknown",
-    state: "unknown",
-    attributes: {
-      friendly_name: "Player Unknown",
-      // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
-      // Play Media + Stop + Play
-      supported_features: 21437,
-    },
-  },
-  {
-    entity_id: "media_player.playing",
-    state: "playing",
-    attributes: {
-      friendly_name: "Player Playing (no Pause support)",
-      // Volume Set + Volume Mute + Previous Track + Next Track +
-      // Play Media + Stop + Play
-      supported_features: 21436,
-      volume_level: 1,
-    },
-  },
-  {
-    entity_id: "media_player.idle",
-    state: "idle",
-    attributes: {
-      friendly_name: "Player Idle",
-      // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
-      // Play Media + Stop + Play
-      supported_features: 21437,
-      volume_level: 0,
-    },
-  },
-  {
-    entity_id: "media_player.receiver_on",
-    state: "on",
-    attributes: {
-      source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-      volume_level: 0.63,
-      is_volume_muted: false,
-      source: "TV",
-      sound_mode: "Movie",
-      friendly_name: "Receiver (selectable sources)",
-      // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
-      supported_features: 84364,
-    },
-  },
-  {
-    entity_id: "media_player.receiver_off",
-    state: "off",
-    attributes: {
-      source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-      friendly_name: "Receiver (selectable sources)",
-      // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
-      supported_features: 84364,
-    },
-  },
+  getEntity("media_player", "music_paused", "paused", {
+    friendly_name: "Pausing The Music",
+    media_content_type: "music",
+    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+    media_artist: "Technohead",
+    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+    // Select Source + Stop + Clear + Play + Shuffle Set
+    supported_features: 64063,
+    entity_picture: "/images/album_cover_2.jpg",
+    media_duration: 300,
+    media_position: 50,
+    media_position_updated_at: new Date(
+      // 23 seconds in
+      new Date().getTime() - 23000
+    ).toISOString(),
+    volume_level: 0.5,
+  }),
+  getEntity("media_player", "music_playing", "playing", {
+    friendly_name: "Playing The Music",
+    media_content_type: "music",
+    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+    media_artist: "Technohead",
+    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
+    supported_features: 195135,
+    entity_picture: "/images/album_cover.jpg",
+    media_duration: 300,
+    media_position: 0,
+    media_position_updated_at: new Date(
+      // 23 seconds in
+      new Date().getTime() - 23000
+    ).toISOString(),
+    volume_level: 0.5,
+  }),
+  getEntity("media_player", "stream_playing", "playing", {
+    friendly_name: "Playing the Stream",
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    entity_picture: "/images/frenck.jpg",
+    // Pause + Next Track + Play + Browse Media
+    supported_features: 147489,
+  }),
+  getEntity("media_player", "stream_paused", "paused", {
+    friendly_name: "Paused the Stream",
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    entity_picture: "/images/frenck.jpg",
+    // Pause + Next Track + Play
+    supported_features: 16417,
+  }),
+  getEntity("media_player", "stream_playing_previous", "playing", {
+    friendly_name: 'Playing the Stream (with "previous" support)',
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    entity_picture: "/images/frenck.jpg",
+    // Pause + Previous Track + Play
+    supported_features: 16401,
+  }),
+  getEntity("media_player", "tv_playing", "playing", {
+    friendly_name: "Playing non-skip TV Show",
+    media_content_type: "tvshow",
+    media_title: "Chapter 1",
+    media_series_title: "House of Cards",
+    app_name: "Netflix",
+    entity_picture: "/images/netflix.jpg",
+    // Pause
+    supported_features: 1,
+  }),
+  getEntity("media_player", "sonos_idle", "idle", {
+    friendly_name: "Sonos Idle",
+    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+    // Select Source + Stop + Clear + Play + Shuffle Set
+    supported_features: 64063,
+    volume_level: 0.33,
+    is_volume_muted: true,
+  }),
+  getEntity("media_player", "idle_browse_media", "idle", {
+    friendly_name: "Idle waiting for Browse Media (e.g. Spotify)",
+    // Pause + Seek + Volume Set + Previous Track + Next Track + Play Media +
+    // Select Source + Play + Shuffle Set + Browse Media
+    supported_features: 182839,
+    volume_level: 0.79,
+  }),
+  getEntity("media_player", "theater_off", "off", {
+    friendly_name: "TV Off",
+    // On + Off + Play + Next + Pause
+    supported_features: 16801,
+  }),
+  getEntity("media_player", "theater_on", "on", {
+    friendly_name: "TV On",
+    // On + Off + Play + Next + Pause
+    supported_features: 16801,
+  }),
+  getEntity("media_player", "theater_off_static", "off", {
+    friendly_name: "TV Off (cannot be switched on)",
+    // Off + Next + Pause
+    supported_features: 289,
+  }),
+  getEntity("media_player", "theater_on_static", "on", {
+    friendly_name: "TV On (cannot be switched off)",
+    // On + Next + Pause
+    supported_features: 161,
+  }),
+  getEntity("media_player", "android_cast", "playing", {
+    friendly_name: "Casting App (no supported features)",
+    media_title: "Android Screen Casting",
+    app_name: "Screen Mirroring",
+  }),
+  getEntity("media_player", "image_display", "playing", {
+    friendly_name: "Digital Picture Frame",
+    media_content_type: "image",
+    media_title: "Famous Painting",
+    media_artist: "Famous Artist",
+    entity_picture: "/images/sunflowers.jpg",
+    // On + Off + Browse Media
+    supported_features: 131456,
+  }),
+  getEntity("media_player", "unavailable", "unavailable", {
+    friendly_name: "Player Unavailable",
+    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+    // Play Media + Stop + Play
+    supported_features: 21437,
+  }),
+  getEntity("media_player", "unknown", "unknown", {
+    friendly_name: "Player Unknown",
+    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+    // Play Media + Stop + Play
+    supported_features: 21437,
+  }),
+  getEntity("media_player", "playing", "playing", {
+    friendly_name: "Player Playing (no Pause support)",
+    // Volume Set + Volume Mute + Previous Track + Next Track +
+    // Play Media + Stop + Play
+    supported_features: 21436,
+    volume_level: 1,
+  }),
+  getEntity("media_player", "idle", "idle", {
+    friendly_name: "Player Idle",
+    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+    // Play Media + Stop + Play
+    supported_features: 21437,
+    volume_level: 0,
+  }),
+  getEntity("media_player", "receiver_on", "on", {
+    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
+    volume_level: 0.63,
+    is_volume_muted: false,
+    source: "TV",
+    friendly_name: "Receiver (selectable sources)",
+    // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
+    supported_features: 84364,
+  }),
+  getEntity("media_player", "receiver_off", "off", {
+    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
+    friendly_name: "Receiver (selectable sources)",
+    // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
+    supported_features: 84364,
+  }),
 ];
@@ -1,82 +1,72 @@
+import { getEntity } from "../../../src/fake_data/entity";
+
 export const createPlantEntities = () => [
-  {
-    entity_id: "plant.lemon_tree",
-    state: "ok",
-    attributes: {
-      problem: "none",
-      sensors: {
-        moisture: "sensor.lemon_tree_moisture",
-        battery: "sensor.lemon_tree_battery",
-        temperature: "sensor.lemon_tree_temperature",
-        conductivity: "sensor.lemon_tree_conductivity",
-        brightness: "sensor.lemon_tree_brightness",
-      },
-      unit_of_measurement_dict: {
-        temperature: "°C",
-        moisture: "%",
-        brightness: "lx",
-        battery: "%",
-        conductivity: "μS/cm",
-      },
-      moisture: 54,
-      battery: 95,
-      temperature: 15.6,
-      conductivity: 1,
-      brightness: 12,
-      max_brightness: 20,
-      friendly_name: "Lemon Tree",
+  getEntity("plant", "lemon_tree", "ok", {
+    problem: "none",
+    sensors: {
+      moisture: "sensor.lemon_tree_moisture",
+      battery: "sensor.lemon_tree_battery",
+      temperature: "sensor.lemon_tree_temperature",
+      conductivity: "sensor.lemon_tree_conductivity",
+      brightness: "sensor.lemon_tree_brightness",
    },
-  },
-  {
-    entity_id: "plant.apple_tree",
-    state: "ok",
-    attributes: {
-      problem: "brightness",
-      sensors: {
-        moisture: "sensor.apple_tree_moisture",
-        battery: "sensor.apple_tree_battery",
-        temperature: "sensor.apple_tree_temperature",
-        conductivity: "sensor.apple_tree_conductivity",
-        brightness: "sensor.apple_tree_brightness",
-      },
-      unit_of_measurement_dict: {
-        temperature: "°C",
-        moisture: "%",
-        brightness: "lx",
-        battery: "%",
-        conductivity: "μS/cm",
-      },
-      moisture: 54,
-      battery: 2,
-      temperature: 15.6,
-      conductivity: 1,
-      brightness: 25,
-      max_brightness: 20,
-      friendly_name: "Apple Tree",
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      battery: "%",
+      conductivity: "μS/cm",
    },
-  },
-  {
-    entity_id: "plant.sunflowers",
-    state: "ok",
-    attributes: {
-      problem: "moisture, temperature, conductivity",
-      sensors: {
-        moisture: "sensor.sunflowers_moisture",
-        temperature: "sensor.sunflowers_temperature",
-        conductivity: "sensor.sunflowers_conductivity",
-        brightness: "sensor.sunflowers_brightness",
-      },
-      unit_of_measurement_dict: {
-        temperature: "°C",
-        moisture: "%",
-        brightness: "lx",
-        conductivity: "μS/cm",
-      },
-      moisture: 54,
-      temperature: 15.6,
-      conductivity: 1,
-      brightness: 25,
-      entity_picture: "/images/sunflowers.jpg",
+    moisture: 54,
+    battery: 95,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 12,
+    max_brightness: 20,
+    friendly_name: "Lemon Tree",
+  }),
+  getEntity("plant", "apple_tree", "ok", {
+    problem: "brightness",
+    sensors: {
+      moisture: "sensor.apple_tree_moisture",
+      battery: "sensor.apple_tree_battery",
+      temperature: "sensor.apple_tree_temperature",
+      conductivity: "sensor.apple_tree_conductivity",
+      brightness: "sensor.apple_tree_brightness",
    },
-  },
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      battery: "%",
+      conductivity: "μS/cm",
+    },
+    moisture: 54,
+    battery: 2,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 25,
+    max_brightness: 20,
+    friendly_name: "Apple Tree",
+  }),
+  getEntity("plant", "sunflowers", "ok", {
+    problem: "moisture, temperature, conductivity",
+    sensors: {
+      moisture: "sensor.sunflowers_moisture",
+      temperature: "sensor.sunflowers_temperature",
+      conductivity: "sensor.sunflowers_conductivity",
+      brightness: "sensor.sunflowers_brightness",
+    },
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      conductivity: "μS/cm",
+    },
+    moisture: 54,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 25,
+    entity_picture: "/images/sunflowers.jpg",
+  }),
 ];
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Paul Bottein	bf78effe29	Refactor state function	2025-09-15 09:21:52 +02:00
Paul Bottein	6a51308ee3	Return computed color for state color instead of css variable	2025-09-12 18:53:05 +02:00