Migrate 6th set to dirty state provider

2026-06-17 22:01:56 +00:00 · 2026-06-09 15:03:35 +01:00
433 changed files with 6752 additions and 64801 deletions
@@ -289,7 +289,6 @@ 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

@@ -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();
-            }
@@ -24,7 +24,7 @@ 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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: dev
          persist-credentials: false
@@ -60,7 +60,7 @@ 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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: master
          persist-credentials: false
@@ -27,7 +27,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
@@ -65,7 +65,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
@@ -85,7 +85,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
@@ -27,7 +27,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
@@ -41,14 +41,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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
        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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0

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

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/analyze@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
@@ -25,7 +25,7 @@ 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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: dev
          persist-credentials: false
@@ -61,7 +61,7 @@ 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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: master
          persist-credentials: false
@@ -19,7 +19,7 @@ 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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

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

@@ -20,7 +20,7 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

@@ -1,190 +0,0 @@
-name: Pull request standards
-
-on:
-  pull_request_target: # zizmor: ignore[dangerous-triggers] -- safe: reads PR metadata from event payload only, no PR code checkout
-    types:
-      - opened
-      - edited
-      - reopened
-      - ready_for_review
-    branches:
-      - dev
-
-permissions: {}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
-  cancel-in-progress: true
-
-jobs:
-  check:
-    name: Check pull request follows contribution standards
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write # To label and comment on pull requests
-    steps:
-      - name: Check pull request standards
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            const pr = context.payload.pull_request;
-
-            // Exempt bots (Copilot agent, dependabot), drafts, and maintainers.
-            if (pr.user.type === "Bot") {
-              core.info(`Skipping bot author: ${pr.user.login}`);
-              return;
-            }
-            if (pr.draft) {
-              core.info("Skipping draft pull request");
-              return;
-            }
-            try {
-              await github.rest.orgs.checkMembershipForUser({
-                org: "home-assistant",
-                username: pr.user.login,
-              });
-              core.info(`Skipping organization member: ${pr.user.login}`);
-              return;
-            } catch (error) {
-              core.info(`${pr.user.login} is not an organization member, checking standards`);
-            }
-
-            const label = "Needs Template";
-            const marker = "<!-- pr-standards-check -->";
-            const { owner, repo } = context.repo;
-            const issue_number = pr.number;
-
-            const body = (pr.body || "").replace(/<!--[\s\S]*?-->/g, "");
-            const normalized = body.toLowerCase();
-
-            // Ignore 404s from mutations that race manual edits or cancelled runs.
-            const ignoreMissing = async (fn) => {
-              try {
-                await fn();
-              } catch (error) {
-                if (error.status === 404) {
-                  core.info("Target already removed, nothing to do");
-                  return;
-                }
-                throw error;
-              }
-            };
-
-            // Hide/restore our comment via GraphQL (REST cannot minimize).
-            const setMinimized = async (subjectId, minimized) => {
-              const mutation = minimized
-                ? `mutation($id: ID!) {
-                     minimizeComment(input: { subjectId: $id, classifier: RESOLVED }) {
-                       clientMutationId
-                     }
-                   }`
-                : `mutation($id: ID!) {
-                     unminimizeComment(input: { subjectId: $id }) {
-                       clientMutationId
-                     }
-                   }`;
-              try {
-                await github.graphql(mutation, { id: subjectId });
-              } catch (error) {
-                core.info(
-                  `Could not ${minimized ? "minimize" : "restore"} comment: ${error.message}`
-                );
-              }
-            };
-
-            // Content of a "## <name>" section, or null when the heading is absent.
-            const section = (name) => {
-              const match = body.match(
-                new RegExp(`##\\s${name}([\\s\\S]*?)(?=\\n##\\s|$)`, "i")
-              );
-              return match ? match[1] : null;
-            };
-
-            const problems = [];
-
-            const requiredHeadings = [
-              "## proposed change",
-              "## type of change",
-              "## checklist",
-            ];
-            if (requiredHeadings.some((h) => !normalized.includes(h))) {
-              problems.push(
-                "Use the pull request template without removing its sections."
-              );
-            }
-
-            const typeOfChange = section("type of change");
-            if (typeOfChange !== null) {
-              const ticked = (typeOfChange.match(/-\s*\[[xX]\]/g) || []).length;
-              if (ticked !== 1) {
-                problems.push(
-                  'Select exactly one option under "Type of change".'
-                );
-              }
-            }
-
-            const proposedChange = section("proposed change");
-            if (proposedChange !== null && proposedChange.trim().length === 0) {
-              problems.push('Describe your changes under "Proposed change".');
-            }
-
-            const isValid = problems.length === 0;
-
-            const comments = await github.paginate(
-              github.rest.issues.listComments,
-              { owner, repo, issue_number, per_page: 100 }
-            );
-            const existing = comments.find((c) => c.body.includes(marker));
-            const hasLabel = pr.labels.some((l) => l.name === label);
-
-            if (isValid) {
-              core.info("Pull request standards met");
-
-              if (hasLabel) {
-                await ignoreMissing(() =>
-                  github.rest.issues.removeLabel({
-                    owner, repo, issue_number, name: label,
-                  })
-                );
-              }
-              if (existing) {
-                await setMinimized(existing.node_id, true);
-              }
-              return;
-            }
-
-            core.info(`Pull request standards not met:\n- ${problems.join("\n- ")}`);
-
-            if (!hasLabel) {
-              await github.rest.issues.addLabels({
-                owner, repo, issue_number, labels: [label],
-              });
-            }
-
-            const message =
-              `${marker}\n` +
-              `Hey @${pr.user.login}!\n\n` +
-              `Thank you for your contribution! To help reviewers, please update ` +
-              `this pull request to follow our pull request standards:\n\n` +
-              problems.map((p) => `- ${p}`).join("\n") +
-              `\n\n` +
-              `Please complete the ` +
-              `[PR template](https://github.com/home-assistant/frontend/blob/dev/.github/PULL_REQUEST_TEMPLATE.md?plain=1) ` +
-              `and see the [developer docs](https://developers.home-assistant.io/docs/review-process) ` +
-              `for more on creating a great pull request (see point 6).`;
-
-            if (existing) {
-              await github.rest.issues.updateComment({
-                owner, repo, comment_id: existing.id, body: message,
-              });
-              await setMinimized(existing.node_id, false);
-            } else {
-              await github.rest.issues.createComment({
-                owner, repo, issue_number, body: message,
-              });
-            }
-
-            // Fail this check so it can block the PR from being merged
-            core.setFailed(
-              `Pull request standards not met:\n- ${problems.join("\n- ")}`
-            );
@@ -26,7 +26,7 @@ jobs:
    if: github.repository_owner == 'home-assistant'
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

@@ -36,7 +36,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

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

      - name: Setup Node
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -97,7 +97,7 @@ jobs:

      # home-assistant/wheels doesn't support SHA pinning
      - name: Build wheels
-        uses: home-assistant/wheels@34957438948e0b3dcde73c77750643dadae594f5 # 2026.06.0
+        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
        with:
          abi: cp314
          tag: musllinux_1_2
@@ -113,7 +113,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
@@ -1,51 +0,0 @@
-name: Sync numeric device classes
-
-# Mirrors Home Assistant Core's numeric `SensorDeviceClass` list into the
-# build-time default in src/data/sensor_numeric_device_classes.ts and opens a PR
-# when it drifts. Reads homeassistant/generated/sensor.json from core.
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "0 4 * * *" # Daily, 04:00 UTC
-
-permissions:
-  contents: read
-
-jobs:
-  sync:
-    name: Sync
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-
-      - name: Set up Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
-
-      - name: Regenerate numeric device classes
-        run: ./script/gen_numeric_device_classes
-
-      - name: Format
-        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
-
-      - name: Create pull request
-        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
-        with:
-          branch: chore/sync-numeric-device-classes
-          commit-message: Update numeric sensor device classes
-          title: Update numeric sensor device classes
-          body: |
-            Regenerated `SENSOR_NUMERIC_DEVICE_CLASSES` from Home Assistant Core's
-            `SensorDeviceClass`.
-
-            Automated by `.github/workflows/sync-numeric-device-classes.yaml`.
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

@@ -58,4 +58,3 @@ test/coverage/
 .claude
 .cursor
 .opencode
-test/benchmarks/results/
@@ -103,29 +103,12 @@ gulp.task("gather-gallery-pages", async function gatherPages() {

    if (!toProcess) {
      console.error("Unknown category", group.category);
-      if (!group.subsections && !group.pages) {
+      if (!group.pages) {
        group.pages = [];
      }
      continue;
    }

-    if (group.subsections) {
-      // Listed pages keep their per-subsection order.
-      for (const subsection of group.subsections) {
-        for (const page of subsection.pages) {
-          if (!toProcess.delete(page)) {
-            console.error("Found unreferenced demo", page);
-          }
-        }
-      }
-      // Any remaining pages land in a trailing "Other" subsection.
-      const leftover = Array.from(toProcess).sort();
-      if (leftover.length) {
-        group.subsections.push({ header: "Other", pages: leftover });
-      }
-      continue;
-    }
-
    // Any pre-defined groups will not be sorted.
    if (group.pages) {
      for (const page of group.pages) {
@@ -1,40 +0,0 @@
-import { writeFile } from "node:fs/promises";
-import { join } from "node:path";
-import process from "node:process";
-import gulp from "gulp";
-import paths from "../paths.cjs";
-
-const SOURCE_URL =
-  process.env.SENSOR_METADATA_URL ||
-  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
-
-const TARGET = join(
-  paths.root_dir,
-  "src",
-  "data",
-  "sensor_numeric_device_classes.ts"
-);
-
-gulp.task("gen-numeric-device-classes", async () => {
-  const response = await fetch(SOURCE_URL);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
-  }
-
-  const data = await response.json();
-  const classes = [...(data.numeric_device_classes ?? [])].sort();
-  if (!classes.length) {
-    throw new Error(`No numeric_device_classes found in ${SOURCE_URL}`);
-  }
-
-  const content = `// This file is auto-generated from Home Assistant Core's \`SensorDeviceClass\`
-// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
-// Regenerate with \`script/gen_numeric_device_classes\`.
-
-export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
-${classes.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
-];
-`;
-
-  await writeFile(TARGET, content);
-});
@@ -9,7 +9,6 @@ import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./gen-numeric-device-classes.js";
 import "./landing-page.js";
 import "./locale-data.js";
 import "./rspack.js";
@@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
-import { demoDevices } from "./stubs/devices";
+import { mockConfigEntries } from "./stubs/config_entries";
 import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
@@ -16,7 +16,6 @@ import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
-import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
@@ -30,31 +29,6 @@ import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";

-// WS command / REST path prefixes whose mocks live in the lazily imported
-// config-panel chunk (see ./stubs/config-panel). Must stay in sync with it.
-const CONFIG_PANEL_COMMANDS = [
-  "cloud/",
-  "validate_config",
-  "config_entries/",
-  "device_automation/",
-  "entity/source",
-  "blueprint/",
-  "homeassistant/expose",
-  "zone/list",
-  "person/list",
-  "network/url",
-  "application_credentials/",
-  "system_health/",
-  "backup/",
-  "automation/config",
-  "script/config",
-  "config/automation/config",
-  "config/script/config",
-  "config/scene/config",
-  "search/related",
-  "tag/list",
-];
-
@customElement("ha-demo")
 export class HaDemo extends HomeAssistantAppEl {
  protected async _initializeHass() {
@@ -87,18 +61,9 @@ export class HaDemo extends HomeAssistantAppEl {
    mockIcons(hass);
    mockEnergy(hass);
    mockPersistentNotification(hass);
-    // Consumed app-wide via the lazy manifests context, so register eagerly.
-    mockIntegration(hass);
-    // Config panel mocks are code-split: the loader runs (and the chunk is
-    // dynamically imported) the first time one of these config-only WS/REST
-    // commands is requested, i.e. when the config panel is opened.
-    hass.mockLazyLoad(
-      (command) => CONFIG_PANEL_COMMANDS.some((p) => command.startsWith(p)),
-      () =>
-        import("./stubs/config-panel").then((mod) => mod.mockConfigPanel(hass))
-    );
+    mockConfigEntries(hass);
    mockAreaRegistry(hass);
-    mockDeviceRegistry(hass, demoDevices);
+    mockDeviceRegistry(hass);
    mockFloorRegistry(hass);
    mockLabelRegistry(hass);
    mockEntityRegistry(hass, [
@@ -1,19 +0,0 @@
-import type { ApplicationCredential } from "../../../src/data/application_credential";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const credentials: ApplicationCredential[] = [
-  {
-    id: "mock-credential",
-    domain: "spotify",
-    client_id: "demo-client-id",
-    client_secret: "demo-client-secret",
-    name: "Spotify",
-  },
-];
-
-export const mockApplicationCredentials = (hass: MockHomeAssistant) => {
-  hass.mockWS("application_credentials/list", () => credentials);
-  hass.mockWS("application_credentials/config", () => ({
-    integrations: { spotify: { description_placeholders: {} } },
-  }));
-};
@@ -3,7 +3,4 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockAuth = (hass: MockHomeAssistant) => {
  hass.mockWS("config/auth/list", () => []);
  hass.mockWS("auth/refresh_tokens", () => []);
-  hass.mockWS("auth/sign_path", (msg: { path: string }) => ({
-    path: msg.path,
-  }));
 };
@@ -1,69 +0,0 @@
-import type { AutomationConfig } from "../../../src/data/automation";
-import type { ScriptConfig } from "../../../src/data/script";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const demoAutomationConfig = (entityId: string): AutomationConfig => ({
-  id: entityId.split(".")[1],
-  alias: "Demo automation",
-  description: "An example automation shown in the demo.",
-  triggers: [
-    { trigger: "state", entity_id: "binary_sensor.basement_floor_wet" },
-  ],
-  conditions: [],
-  actions: [
-    {
-      action: "light.turn_on",
-      target: { entity_id: "light.bed_light" },
-    },
-  ],
-  mode: "single",
-});
-
-const demoScriptConfig = (): ScriptConfig => ({
-  alias: "Demo script",
-  description: "An example script shown in the demo.",
-  sequence: [
-    {
-      action: "light.turn_on",
-      target: { entity_id: "light.bed_light" },
-    },
-  ],
-  mode: "single",
-});
-
-export const mockAutomation = (hass: MockHomeAssistant) => {
-  hass.mockWS("automation/config", (msg: { entity_id: string }) => ({
-    config: demoAutomationConfig(msg.entity_id),
-  }));
-  hass.mockWS("script/config", () => ({ config: demoScriptConfig() }));
-
-  hass.mockAPI(/config\/automation\/config\/.+/, () =>
-    demoAutomationConfig("automation.demo")
-  );
-  hass.mockAPI(/config\/script\/config\/.+/, () => demoScriptConfig());
-
-  // Trigger/condition type pickers subscribe for integration-provided
-  // platforms. The demo only uses the built-in ones, so emit empty records.
-  hass.mockWS(
-    "trigger_platforms/subscribe",
-    (
-      _msg,
-      _hass,
-      onChange?: (descriptions: Record<string, unknown>) => void
-    ) => {
-      onChange?.({});
-      return () => undefined;
-    }
-  );
-  hass.mockWS(
-    "condition_platforms/subscribe",
-    (
-      _msg,
-      _hass,
-      onChange?: (descriptions: Record<string, unknown>) => void
-    ) => {
-      onChange?.({});
-      return () => undefined;
-    }
-  );
-};
@@ -1,83 +0,0 @@
-import type {
-  BackupAgentsInfo,
-  BackupConfig,
-  BackupContent,
-  BackupInfo,
-} from "../../../src/data/backup";
-import { BackupScheduleRecurrence } from "../../../src/data/backup";
-import type { ManagerStateEvent } from "../../../src/data/backup_manager";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const lastBackupDate = new Date(Date.now() - 86400000).toISOString();
-const nextBackupDate = new Date(Date.now() + 86400000).toISOString();
-
-const backups: BackupContent[] = [
-  {
-    backup_id: "demo-backup-1",
-    name: "Automatic backup DEMO",
-    date: lastBackupDate,
-    with_automatic_settings: true,
-    agents: {
-      "backup.local": { size: 1024 * 1024 * 512, protected: true },
-      "cloud.cloud": { size: 1024 * 1024 * 512, protected: true },
-    },
-  },
-];
-
-const backupInfo: BackupInfo = {
-  backups,
-  agent_errors: {},
-  last_attempted_automatic_backup: lastBackupDate,
-  last_completed_automatic_backup: lastBackupDate,
-  last_action_event: { manager_state: "idle" },
-  next_automatic_backup: nextBackupDate,
-  next_automatic_backup_additional: false,
-  state: "idle",
-};
-
-const backupConfig: BackupConfig = {
-  automatic_backups_configured: true,
-  last_attempted_automatic_backup: lastBackupDate,
-  last_completed_automatic_backup: lastBackupDate,
-  next_automatic_backup: nextBackupDate,
-  next_automatic_backup_additional: false,
-  create_backup: {
-    agent_ids: ["backup.local", "cloud.cloud"],
-    include_addons: [],
-    include_all_addons: true,
-    include_database: true,
-    include_folders: [],
-    name: null,
-    password: null,
-  },
-  retention: { copies: 3, days: null },
-  schedule: {
-    recurrence: BackupScheduleRecurrence.DAILY,
-    time: null,
-    days: [],
-  },
-  agents: {
-    "backup.local": { protected: true, retention: null },
-    "cloud.cloud": { protected: true, retention: null },
-  },
-};
-
-const agentsInfo: BackupAgentsInfo = {
-  agents: [
-    { agent_id: "backup.local", name: "This device" },
-    { agent_id: "cloud.cloud", name: "Home Assistant Cloud" },
-  ],
-};
-
-export const mockBackup = (hass: MockHomeAssistant) => {
-  hass.mockWS("backup/info", () => backupInfo);
-  hass.mockWS("backup/config/info", () => ({ config: backupConfig }));
-  hass.mockWS("backup/agents/info", () => agentsInfo);
-  hass.mockWS(
-    "backup/subscribe_events",
-    (_msg, _hass, onChange?: (event: ManagerStateEvent) => void) => {
-      onChange?.({ manager_state: "idle" });
-      return () => undefined;
-    }
-  );
-};
@@ -1,45 +0,0 @@
-import type { BlueprintDomain, Blueprints } from "../../../src/data/blueprint";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const automationBlueprints: Blueprints = {
-  "homeassistant/motion_light.yaml": {
-    metadata: {
-      domain: "automation",
-      name: "Motion-activated Light",
-      description: "Turn on a light when motion is detected.",
-      author: "Home Assistant",
-      source_url:
-        "https://github.com/home-assistant/core/blob/dev/homeassistant/components/automation/blueprints/motion_light.yaml",
-      input: {
-        motion_entity: { name: "Motion Sensor" },
-        light_target: { name: "Light" },
-      },
-    },
-  },
-  "homeassistant/notify_leaving_zone.yaml": {
-    metadata: {
-      domain: "automation",
-      name: "Send notification when leaving a zone",
-      description: "Get a notification when a person leaves a zone.",
-      author: "Home Assistant",
-    },
-  },
-};
-
-const scriptBlueprints: Blueprints = {
-  "homeassistant/confirmable_notification.yaml": {
-    metadata: {
-      domain: "script",
-      name: "Confirmable Notification",
-      description:
-        "A script that sends an actionable notification with a confirmation.",
-      author: "Home Assistant",
-    },
-  },
-};
-
-export const mockBlueprint = (hass: MockHomeAssistant) => {
-  hass.mockWS("blueprint/list", (msg: { domain: BlueprintDomain }) =>
-    msg.domain === "script" ? scriptBlueprints : automationBlueprints
-  );
-};
@@ -1,118 +0,0 @@
-import type {
-  CloudStatusLoggedIn,
-  SubscriptionInfo,
-} from "../../../src/data/cloud";
-import type { CloudTTSInfo } from "../../../src/data/cloud/tts";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const emptyFilter = () => ({
-  include_domains: [],
-  include_entities: [],
-  exclude_domains: [],
-  exclude_entities: [],
-});
-
-// A single mutable status object so that preference changes made in the demo
-// are reflected back in the UI.
-const cloudStatus: CloudStatusLoggedIn = {
-  logged_in: true,
-  cloud: "connected",
-  cloud_last_disconnect_reason: null,
-  email: "demo@home-assistant.io",
-  google_registered: true,
-  google_entities: emptyFilter(),
-  google_domains: ["light", "switch", "climate", "cover"],
-  alexa_registered: true,
-  alexa_entities: emptyFilter(),
-  remote_domain: "demo-instance.ui.nabu.casa",
-  remote_connected: true,
-  remote_certificate: {
-    common_name: "demo-instance.ui.nabu.casa",
-    expire_date: "2099-01-01T00:00:00+00:00",
-    fingerprint: "demodemodemodemodemodemodemodemodemodemodemodemodemo",
-    alternative_names: ["demo-instance.ui.nabu.casa"],
-  },
-  remote_certificate_status: "ready",
-  http_use_ssl: false,
-  active_subscription: true,
-  prefs: {
-    google_enabled: true,
-    alexa_enabled: true,
-    remote_enabled: true,
-    remote_allow_remote_enable: true,
-    strict_connection: "disabled",
-    google_secure_devices_pin: undefined,
-    cloudhooks: {},
-    alexa_report_state: true,
-    google_report_state: true,
-    tts_default_voice: ["en-US", "JennyNeural"],
-    cloud_ice_servers_enabled: true,
-  },
-};
-
-const subscription: SubscriptionInfo = {
-  human_description: "Demo subscription, renews automatically",
-  provider: "Nabu Casa, Inc.",
-  plan_renewal_date: 4102444800,
-};
-
-const ttsInfo: CloudTTSInfo = {
-  languages: [
-    ["en-US", "JennyNeural", "Jenny"],
-    ["en-US", "GuyNeural", "Guy"],
-    ["en-GB", "LibbyNeural", "Libby"],
-    ["nl-NL", "ColetteNeural", "Colette"],
-    ["de-DE", "KatjaNeural", "Katja"],
-  ],
-};
-
-export const mockCloud = (hass: MockHomeAssistant) => {
-  hass.mockWS("cloud/status", () => cloudStatus);
-  hass.mockWS("cloud/subscription", () => subscription);
-  hass.mockWS("cloud/tts/info", () => ttsInfo);
-
-  hass.mockWS("cloud/update_prefs", (msg) => {
-    const { type, ...prefs } = msg;
-    cloudStatus.prefs = { ...cloudStatus.prefs, ...prefs };
-    return { success: true };
-  });
-
-  hass.mockWS("cloud/cloudhook/create", (msg) => {
-    const webhook = {
-      webhook_id: msg.webhook_id,
-      cloudhook_id: "demo-cloudhook-id",
-      cloudhook_url: `https://hooks.nabu.casa/demo-${msg.webhook_id}`,
-      managed: false,
-    };
-    cloudStatus.prefs.cloudhooks = {
-      ...cloudStatus.prefs.cloudhooks,
-      [msg.webhook_id]: webhook,
-    };
-    return webhook;
-  });
-
-  hass.mockWS("cloud/cloudhook/delete", (msg) => {
-    const cloudhooks = { ...cloudStatus.prefs.cloudhooks };
-    delete cloudhooks[msg.webhook_id];
-    cloudStatus.prefs.cloudhooks = cloudhooks;
-    return null;
-  });
-
-  hass.mockWS("cloud/remote/connect", () => {
-    cloudStatus.remote_connected = true;
-    return null;
-  });
-  hass.mockWS("cloud/remote/disconnect", () => {
-    cloudStatus.remote_connected = false;
-    return null;
-  });
-
-  hass.mockWS("cloud/remove_data", () => null);
-  hass.mockWS("cloud/google_assistant/entities/update", () => null);
-  hass.mockWS("cloud/alexa/entities", () => []);
-  hass.mockWS("cloud/google_assistant/entities", () => []);
-
-  hass.mockAPI("cloud/logout", () => ({}));
-  hass.mockAPI("cloud/google_actions/sync", () => ({}));
-  hass.mockAPI("cloud/support_package", () => "Demo support package");
-};
@@ -1,40 +0,0 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import { mockApplicationCredentials } from "./application_credentials";
-import { mockAutomation } from "./automation";
-import { mockBackup } from "./backup";
-import { mockBlueprint } from "./blueprint";
-import { mockCloud } from "./cloud";
-import { mockConfig } from "./config";
-import { mockConfigEntries } from "./config_entries";
-import { mockDeviceAutomation } from "./device_automation";
-import { mockEntitySources } from "./entity_sources";
-import { mockExpose } from "./expose";
-import { mockNetwork } from "./network";
-import { mockPerson } from "./person";
-import { mockScene } from "./scene";
-import { mockSearch } from "./search";
-import { mockSystemHealth } from "./system_health";
-import { mockTags } from "./tags";
-import { mockZone } from "./zone";
-
-// Registers every mock that is only needed once the config panel is opened.
-// This module is dynamically imported so its data stays out of the main bundle.
-export const mockConfigPanel = (hass: MockHomeAssistant) => {
-  mockCloud(hass);
-  mockConfig(hass);
-  mockConfigEntries(hass);
-  mockDeviceAutomation(hass);
-  mockEntitySources(hass);
-  mockBlueprint(hass);
-  mockExpose(hass);
-  mockZone(hass);
-  mockPerson(hass);
-  mockNetwork(hass);
-  mockApplicationCredentials(hass);
-  mockSystemHealth(hass);
-  mockBackup(hass);
-  mockAutomation(hass);
-  mockScene(hass);
-  mockSearch(hass);
-  mockTags(hass);
-};
@@ -1,126 +1,26 @@
-import type {
-  ConfigEntry,
-  ConfigEntryUpdate,
-} from "../../../src/data/config_entries";
-import type { ConfigFlowInProgressMessage } from "../../../src/data/config_flow";
-import type { IntegrationType } from "../../../src/data/integration";
+import type { getConfigEntries } from "../../../src/data/config_entries";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

-const baseEntry = {
-  source: "user",
-  state: "loaded" as const,
-  supports_options: false,
-  supports_remove_device: false,
-  supports_unload: true,
-  supports_reconfigure: true,
-  supported_subentry_types: {},
-  num_subentries: 0,
-  pref_disable_new_entities: false,
-  pref_disable_polling: false,
-  disabled_by: null,
-  reason: null,
-  error_reason_translation_key: null,
-  error_reason_translation_placeholders: null,
-};
-
-// Each entry is tagged with its integration type so we can honor the
-// `type_filter` that the integrations and helpers panels subscribe with.
-export const demoConfigEntries: {
-  entry: ConfigEntry;
-  type: IntegrationType;
-}[] = [
-  {
-    type: "service",
-    entry: {
-      ...baseEntry,
-      entry_id: "co2signal",
+export const mockConfigEntries = (hass: MockHomeAssistant) => {
+  hass.mockWS<typeof getConfigEntries>("config_entries/get", () => [
+    {
+      entry_id: "mock-entry-co2signal",
      domain: "co2signal",
      title: "Electricity Maps",
+      source: "user",
+      state: "loaded",
+      supports_options: false,
+      supports_remove_device: false,
+      supports_unload: true,
+      supports_reconfigure: true,
+      supported_subentry_types: {},
+      pref_disable_new_entities: false,
+      pref_disable_polling: false,
+      disabled_by: null,
+      reason: null,
+      num_subentries: 0,
+      error_reason_translation_key: null,
+      error_reason_translation_placeholders: null,
    },
-  },
-  {
-    type: "hub",
-    entry: {
-      ...baseEntry,
-      entry_id: "mock-hue",
-      domain: "hue",
-      title: "Philips Hue",
-      source: "zeroconf",
-      supports_options: true,
-      supports_remove_device: true,
-    },
-  },
-  {
-    type: "hub",
-    entry: {
-      ...baseEntry,
-      entry_id: "mock-sonos",
-      domain: "sonos",
-      title: "Sonos",
-      source: "zeroconf",
-      supports_options: true,
-    },
-  },
-  {
-    type: "service",
-    entry: {
-      ...baseEntry,
-      entry_id: "mock-met",
-      domain: "met",
-      title: "Forecast.Home",
-    },
-  },
-  {
-    type: "helper",
-    entry: {
-      ...baseEntry,
-      entry_id: "mock-template-helper",
-      domain: "template",
-      title: "Comfort level",
-    },
-  },
-];
-
-const filterEntries = (filters?: {
-  type_filter?: IntegrationType[];
-  domain?: string;
-}): ConfigEntry[] =>
-  demoConfigEntries
-    .filter(
-      (e) =>
-        (!filters?.type_filter || filters.type_filter.includes(e.type)) &&
-        (!filters?.domain || filters.domain === e.entry.domain)
-    )
-    .map((e) => e.entry);
-
-export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "config_entries/get",
-    (msg: { type_filter?: IntegrationType[]; domain?: string }) =>
-      filterEntries(msg)
-  );
-
-  hass.mockWS(
-    "config_entries/subscribe",
-    (
-      msg: { type_filter?: IntegrationType[]; domain?: string },
-      _hass,
-      onChange?: (updates: ConfigEntryUpdate[]) => void
-    ) => {
-      onChange?.(filterEntries(msg).map((entry) => ({ type: null, entry })));
-      return () => undefined;
-    }
-  );
-
-  hass.mockWS(
-    "config_entries/flow/subscribe",
-    (
-      _msg,
-      _hass,
-      onChange?: (updates: ConfigFlowInProgressMessage[]) => void
-    ) => {
-      onChange?.([]);
-      return () => undefined;
-    }
-  );
+  ]);
 };
@@ -1,18 +0,0 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-// The demo's devices don't expose device-specific automations, so report empty
-// lists and no extra capability fields for the device automation pickers.
-export const mockDeviceAutomation = (hass: MockHomeAssistant) => {
-  hass.mockWS("device_automation/trigger/list", () => []);
-  hass.mockWS("device_automation/condition/list", () => []);
-  hass.mockWS("device_automation/action/list", () => []);
-  hass.mockWS("device_automation/trigger/capabilities", () => ({
-    extra_fields: [],
-  }));
-  hass.mockWS("device_automation/condition/capabilities", () => ({
-    extra_fields: [],
-  }));
-  hass.mockWS("device_automation/action/capabilities", () => ({
-    extra_fields: [],
-  }));
-};
@@ -1,53 +0,0 @@
-import type { DeviceRegistryEntry } from "../../../src/data/device/device_registry";
-
-const baseDevice = {
-  config_entries_subentries: {},
-  connections: [] as [string, string][],
-  identifiers: [] as [string, string][],
-  model_id: null,
-  labels: [] as string[],
-  sw_version: null,
-  hw_version: null,
-  serial_number: null,
-  via_device_id: null,
-  area_id: null,
-  name_by_user: null,
-  disabled_by: null,
-  configuration_url: null,
-  created_at: 0,
-  modified_at: 0,
-};
-
-export const demoDevices: DeviceRegistryEntry[] = [
-  {
-    ...baseDevice,
-    id: "co2signal",
-    name: "Electricity Maps",
-    manufacturer: "Electricity Maps",
-    model: "CO2 Signal",
-    config_entries: ["co2signal"],
-    primary_config_entry: "co2signal",
-    entry_type: "service",
-  },
-  {
-    ...baseDevice,
-    id: "hue-bridge",
-    name: "Philips Hue Bridge",
-    manufacturer: "Signify",
-    model: "Hue Bridge (BSB002)",
-    sw_version: "1.50.0",
-    config_entries: ["mock-hue"],
-    primary_config_entry: "mock-hue",
-    entry_type: null,
-  },
-  {
-    ...baseDevice,
-    id: "sonos-living",
-    name: "Living Room",
-    manufacturer: "Sonos",
-    model: "One",
-    config_entries: ["mock-sonos"],
-    primary_config_entry: "mock-sonos",
-    entry_type: null,
-  },
-];
@@ -1,7 +1,4 @@
-import type {
-  EntityRegistryEntry,
-  ExtEntityRegistryEntry,
-} from "../../../src/data/entity/entity_registry";
+import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockEntityRegistry = (
@@ -9,17 +6,4 @@ export const mockEntityRegistry = (
  data: EntityRegistryEntry[] = []
 ) => {
  hass.mockWS("config/entity_registry/list", () => data);
-  hass.mockWS(
-    "config/entity_registry/get_entries",
-    (msg: { entity_ids: string[] }) => {
-      const result: Record<string, ExtEntityRegistryEntry> = {};
-      for (const entityId of msg.entity_ids) {
-        const entry = data.find((e) => e.entity_id === entityId);
-        if (entry) {
-          result[entityId] = { ...entry, capabilities: {}, aliases: [] };
-        }
-      }
-      return result;
-    }
-  );
 };
@@ -1,12 +0,0 @@
-import type { EntitySources } from "../../../src/data/entity/entity_sources";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockEntitySources = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "entity/source",
-    (): EntitySources => ({
-      "sensor.co2_intensity": { domain: "co2signal" },
-      "sensor.grid_fossil_fuel_percentage": { domain: "co2signal" },
-    })
-  );
-};
@@ -1,39 +0,0 @@
-import type { ExposeEntitySettings } from "../../../src/data/expose";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const exposedEntities: Record<string, ExposeEntitySettings> = {
-  "light.bed_light": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": true,
-  },
-  "light.ceiling_lights": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": false,
-  },
-  "switch.decorative_lights": {
-    conversation: true,
-    "cloud.alexa": false,
-    "cloud.google_assistant": true,
-  },
-  "climate.ecobee": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": true,
-  },
-};
-
-export const mockExpose = (hass: MockHomeAssistant) => {
-  hass.mockWS("homeassistant/expose_entity/list", () => ({
-    exposed_entities: exposedEntities,
-  }));
-  hass.mockWS(
-    "homeassistant/expose_new_entities/get",
-    (msg: { assistant: string }) => ({
-      expose_new: msg.assistant !== "cloud.google_assistant",
-    })
-  );
-  hass.mockWS("homeassistant/expose_entity", () => null);
-  hass.mockWS("homeassistant/expose_new_entities/set", () => null);
-};
@@ -42,7 +42,6 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    return () => {};
  });
-  hass.mockWS("frontend/get_system_data", () => ({ value: null }));
  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
  hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };
@@ -1,72 +0,0 @@
-import type { IntegrationManifest } from "../../../src/data/integration";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const manifest = (
-  domain: string,
-  name: string,
-  overrides: Partial<IntegrationManifest> = {}
-): IntegrationManifest => ({
-  is_built_in: true,
-  domain,
-  name,
-  config_flow: true,
-  documentation: `https://www.home-assistant.io/integrations/${domain}/`,
-  iot_class: "local_push",
-  ...overrides,
-});
-
-const manifests: IntegrationManifest[] = [
-  manifest("co2signal", "Electricity Maps", { iot_class: "cloud_polling" }),
-  manifest("hue", "Philips Hue"),
-  manifest("sonos", "Sonos"),
-  manifest("met", "Met.no", { iot_class: "cloud_polling" }),
-  // Helpers
-  manifest("template", "Template", { integration_type: "helper" }),
-  manifest("input_boolean", "Toggle", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_number", "Number", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_select", "Dropdown", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_text", "Text", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_datetime", "Date and/or time", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("counter", "Counter", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("timer", "Timer", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("schedule", "Schedule", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-];
-
-export const mockIntegration = (hass: MockHomeAssistant) => {
-  hass.mockWS("manifest/list", () => manifests);
-  hass.mockWS("manifest/get", (msg: { integration: string }) =>
-    manifests.find((m) => m.domain === msg.integration)
-  );
-};
@@ -1,13 +0,0 @@
-import type { NetworkUrls } from "../../../src/data/network";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockNetwork = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "network/url",
-    (): NetworkUrls => ({
-      internal: "http://homeassistant.local:8123",
-      external: "https://demo-instance.ui.nabu.casa",
-      cloud: "https://demo-instance.ui.nabu.casa",
-    })
-  );
-};
@@ -1,20 +0,0 @@
-import type { Person } from "../../../src/data/person";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const storage: Person[] = [
-  {
-    id: "demo_user",
-    name: "Demo User",
-    user_id: "abcd",
-    device_trackers: [],
-  },
-  {
-    id: "anne_therese",
-    name: "Anne Therese",
-    device_trackers: [],
-  },
-];
-
-export const mockPerson = (hass: MockHomeAssistant) => {
-  hass.mockWS("person/list", () => ({ storage, config: [] as Person[] }));
-};
@@ -1,18 +0,0 @@
-import type { SceneConfig } from "../../../src/data/scene";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const demoSceneConfig = (id: string): SceneConfig => ({
-  id,
-  name: "Demo scene",
-  entities: {
-    "light.bed_light": { state: "on" },
-  },
-});
-
-export const mockScene = (hass: MockHomeAssistant) => {
-  hass.mockAPI(/config\/scene\/config\/.+/, (_hass, method, path) => {
-    const id = path.split("/").pop()!;
-    // GET returns the config; POST/DELETE just acknowledge.
-    return method === "GET" ? demoSceneConfig(id) : {};
-  });
-};
@@ -1,7 +0,0 @@
-import type { RelatedResult } from "../../../src/data/search";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockSearch = (hass: MockHomeAssistant) => {
-  // The demo has no relationship graph, so report no related items.
-  hass.mockWS("search/related", (): RelatedResult => ({}));
-};
@@ -1,37 +0,0 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockSystemHealth = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "system_health/info",
-    (_msg, _hass, onChange?: (event: any) => void) => {
-      // Defer so the consumer's unsubscribe handle is initialized first
-      // (real WS events arrive asynchronously).
-      setTimeout(() => {
-        onChange?.({
-          type: "initial",
-          data: {
-            homeassistant: {
-              info: {
-                version: "DEMO",
-                installation_type: "Home Assistant OS",
-                dev: false,
-                hassio: true,
-                docker: true,
-                container_arch: "aarch64",
-                user: "root",
-                virtualenv: false,
-                python_version: "3.13.0",
-                os_name: "Linux",
-                os_version: "6.6.0",
-                arch: "aarch64",
-                timezone: "America/Los_Angeles",
-                config_dir: "/config",
-              },
-            },
-          },
-        });
-      });
-      return () => undefined;
-    }
-  );
-};
@@ -1,33 +1,5 @@
-import type { LoggedError } from "../../../src/data/system_log";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

-const now = Date.now() / 1000;
-
-const logs: LoggedError[] = [
-  {
-    name: "homeassistant.components.demo",
-    message: ["Demo integration failed to update sensor data"],
-    level: "warning",
-    source: ["components/demo/sensor.py", 142],
-    exception: "",
-    count: 2,
-    timestamp: now - 120,
-    first_occurred: now - 3600,
-  },
-  {
-    name: "homeassistant.config_entries",
-    message: ["Config entry for met.no could not be set up"],
-    level: "error",
-    source: ["config_entries.py", 512],
-    exception:
-      'Traceback (most recent call last):\n  File "config_entries.py", line 512',
-    count: 1,
-    timestamp: now - 600,
-    first_occurred: now - 600,
-  },
-];
-
 export const mockSystemLog = (hass: MockHomeAssistant) => {
  hass.mockAPI("error/all", () => []);
-  hass.mockWS("system_log/list", () => logs);
 };
@@ -1,27 +0,0 @@
-import type { Zone } from "../../../src/data/zone";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const zones: Zone[] = [
-  {
-    id: "home",
-    name: "Home",
-    icon: "mdi:home",
-    latitude: 52.3731339,
-    longitude: 4.8903147,
-    radius: 100,
-    passive: false,
-  },
-  {
-    id: "work",
-    name: "Work",
-    icon: "mdi:briefcase",
-    latitude: 52.3909184,
-    longitude: 4.8530821,
-    radius: 200,
-    passive: false,
-  },
-];
-
-export const mockZone = (hass: MockHomeAssistant) => {
-  hass.mockWS("zone/list", () => zones);
-};
@@ -62,17 +62,6 @@ Use `sidebar.js` when a page needs a visible section, section header, or determi
 - 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`.

-### Subsections
-
-A section can group its pages under named subsections instead of one flat list. Use this for large categories where related pages should sit together.
-
- `subsections` is an array of `{ header, pages }`. It is mutually exclusive with a flat `pages` array on the same group.
- Each subsection `header` is a non-collapsible label rendered inside the section's expansion panel; the section stays the only collapsible level.
- Listed pages keep their per-subsection order.
- Any pages found in the category but not listed in a subsection are collected into a generated `Other` subsection, appended alphabetically. The `Other` subsection is omitted when there are no leftovers.
- A listed page that does not exist still logs an error during `gather-gallery-pages`.
- Use sentence case for subsection headers and follow the content standards below.
-
 ## Markdown Pages

 Use markdown pages for explanations, design guidance, API notes, and copy standards.
@@ -10,10 +10,6 @@ import {
  mdiViewDashboard,
 } from "@mdi/js";

-// A group may list its pages flat in `pages`, or group them under named
-// `subsections`. The two are mutually exclusive. Listed pages keep their order;
-// any pages found in the category but not listed are appended alphabetically
-// (to a generated "Other" subsection when the group uses subsections).
 export default [
  {
    // This section has no header and so all page links are shown directly in the sidebar
@@ -31,162 +27,31 @@ export default [
    category: "components",
    icon: mdiPuzzle,
    header: "Components",
-    subsections: [
-      {
-        header: "Form and selectors",
-        pages: [
-          "ha-form",
-          "ha-selector",
-          "ha-select-box",
-          "ha-input",
-          "ha-textarea",
-        ],
-      },
-      {
-        header: "Controls and sliders",
-        pages: [
-          "ha-button",
-          "ha-control-button",
-          "ha-progress-button",
-          "ha-switch",
-          "ha-control-switch",
-          "ha-slider",
-          "ha-control-slider",
-          "ha-control-circular-slider",
-          "ha-control-number-buttons",
-          "ha-control-select",
-          "ha-control-select-menu",
-          "ha-hs-color-picker",
-        ],
-      },
-      {
-        header: "Overlays",
-        pages: [
-          "ha-dialog",
-          "ha-dialogs",
-          "ha-adaptive-dialog",
-          "ha-adaptive-popover",
-          "ha-dropdown",
-          "ha-tooltip",
-        ],
-      },
-      {
-        header: "Lists and disclosure",
-        pages: ["ha-list", "ha-expansion-panel", "ha-faded"],
-      },
-      {
-        header: "Feedback and status",
-        pages: ["ha-alert", "ha-spinner", "ha-tip", "ha-bar", "ha-gauge"],
-      },
-      {
-        header: "Labels and text",
-        pages: ["ha-badge", "ha-label-badge", "ha-chips", "ha-marquee-text"],
-      },
-    ],
  },
  {
    category: "lovelace",
    icon: mdiViewDashboard,
    // Label for in the sidebar
    header: "Dashboards",
-    subsections: [
-      {
-        header: "Introduction",
-        pages: ["introduction"],
-      },
-      {
-        header: "Entity cards",
-        pages: [
-          "entities-card",
-          "entity-button-card",
-          "entity-filter-card",
-          "glance-card",
-          "tile-card",
-          "area-card",
-        ],
-      },
-      {
-        header: "Picture cards",
-        pages: [
-          "picture-card",
-          "picture-elements-card",
-          "picture-entity-card",
-          "picture-glance-card",
-        ],
-      },
-      {
-        header: "Domain cards",
-        pages: [
-          "light-card",
-          "thermostat-card",
-          "alarm-panel-card",
-          "gauge-card",
-          "plant-card",
-          "map-card",
-          "media-control-card",
-          "media-player-row",
-        ],
-      },
-      {
-        header: "Layout and utility",
-        pages: [
-          "grid-and-stack-card",
-          "conditional-card",
-          "iframe-card",
-          "markdown-card",
-          "todo-list-card",
-        ],
-      },
-    ],
+    // 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",
-    subsections: [
-      {
-        header: "Climate and water",
-        pages: ["climate", "humidifier", "water-heater", "fan"],
-      },
-      {
-        header: "Covers and access",
-        pages: ["cover", "lock", "lawn-mower", "vacuum"],
-      },
-      {
-        header: "Lighting",
-        pages: ["light", "scene"],
-      },
-      {
-        header: "Media",
-        pages: ["media-player"],
-      },
-      {
-        header: "Inputs and values",
-        pages: ["input-number", "input-text", "number", "timer"],
-      },
-      {
-        header: "System",
-        pages: ["update"],
-      },
-    ],
  },
  {
    category: "automation",
    icon: mdiRobot,
    header: "Automation",
-    subsections: [
-      {
-        header: "Editors",
-        pages: ["editor-trigger", "editor-condition", "editor-action"],
-      },
-      {
-        header: "Descriptions",
-        pages: ["describe-trigger", "describe-condition", "describe-action"],
-      },
-      {
-        header: "Traces",
-        pages: ["trace", "trace-timeline"],
-      },
+    pages: [
+      "editor-trigger",
+      "editor-condition",
+      "editor-action",
+      "trace",
+      "trace-timeline",
    ],
  },
  {
@@ -199,26 +64,6 @@ export default [
    category: "date-time",
    icon: mdiCalendarClock,
    header: "Date and Time",
-    subsections: [
-      {
-        header: "Date",
-        pages: ["date"],
-      },
-      {
-        header: "Time",
-        pages: ["time", "time-seconds", "time-weekday"],
-      },
-      {
-        header: "Combined",
-        pages: [
-          "date-time",
-          "date-time-numeric",
-          "date-time-seconds",
-          "date-time-short",
-          "date-time-short-year",
-        ],
-      },
-    ],
  },
  {
    category: "misc",
@@ -40,26 +40,15 @@ interface GalleryPage {
  demo?: unknown;
 }

-interface GallerySidebarSubsection {
-  header: string;
-  pages: string[];
-}
-
 interface GallerySidebarGroup {
  category: string;
  header?: string;
  icon?: string;
-  pages?: string[];
-  subsections?: GallerySidebarSubsection[];
+  pages: string[];
 }

-const groupPages = (group: GallerySidebarGroup): string[] =>
-  group.subsections
-    ? group.subsections.flatMap((subsection) => subsection.pages)
-    : (group.pages ?? []);
-
 const GALLERY_SIDEBAR = SIDEBAR as GallerySidebarGroup[];
-const DEFAULT_PAGE = `${GALLERY_SIDEBAR[0].category}/${groupPages(GALLERY_SIDEBAR[0])[0]}`;
+const DEFAULT_PAGE = `${GALLERY_SIDEBAR[0].category}/${GALLERY_SIDEBAR[0].pages[0]}`;

 const mql = matchMedia("(prefers-color-scheme: dark)");

@@ -295,15 +284,26 @@ class HaGallery extends LitElement {
    const sidebar: unknown[] = [];

    for (const group of GALLERY_SIDEBAR) {
-      const expanded = groupPages(group).some(
+      const links: unknown[] = [];
+      const expanded = group.pages.some(
        (page) => this._page === `${group.category}/${page}`
      );

-      const content = group.subsections
-        ? group.subsections.map((subsection) =>
-            this._renderSidebarSubsection(group, subsection)
+      for (const page of group.pages) {
+        const key = `${group.category}/${page}`;
+        if (!(key in PAGES)) {
+          console.error("Undefined page referenced in sidebar.js:", key);
+          continue;
+        }
+        links.push(
+          this._renderPageLink(
+            key,
+            PAGES[key].metadata.title || page,
+            group.header ? undefined : "main-navigation",
+            group.header ? undefined : group.icon
          )
-        : this._renderPageLinks(group, group.pages ?? []);
+        );
+      }

      sidebar.push(
        group.header
@@ -321,46 +321,16 @@ class HaGallery extends LitElement {
                      .path=${group.icon}
                    ></ha-svg-icon>`
                  : nothing}
-                ${content}
+                ${links}
              </ha-expansion-panel>
            `
-          : content
+          : links
      );
    }

    return sidebar;
  }

-  private _renderSidebarSubsection(
-    group: GallerySidebarGroup,
-    subsection: GallerySidebarSubsection
-  ) {
-    return html`
-      <div class="gallery-sidebar-subheader">${subsection.header}</div>
-      ${this._renderPageLinks(group, subsection.pages)}
-    `;
-  }
-
-  private _renderPageLinks(group: GallerySidebarGroup, pages: string[]) {
-    const links: unknown[] = [];
-    for (const page of pages) {
-      const key = `${group.category}/${page}`;
-      if (!(key in PAGES)) {
-        console.error("Undefined page referenced in sidebar.js:", key);
-        continue;
-      }
-      links.push(
-        this._renderPageLink(
-          key,
-          PAGES[key].metadata.title || page,
-          group.header ? undefined : "main-navigation",
-          group.header ? undefined : group.icon
-        )
-      );
-    }
-    return links;
-  }
-
  private _renderPageLink(
    page: string,
    title: string,
@@ -615,16 +585,6 @@ class HaGallery extends LitElement {
        width: var(--ha-sidebar-expanded-section-item-width, 248px);
      }

-      .gallery-sidebar-subheader {
-        margin: var(--ha-space-2) var(--ha-space-4) var(--ha-space-1);
-        color: var(--secondary-text-color);
-        font-size: var(--ha-font-size-s);
-        font-weight: var(--ha-font-weight-medium);
-        line-height: var(--ha-line-height-condensed);
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-      }
-
      .gallery-sidebar-icon,
      .gallery-nav-item ha-svg-icon[slot="start"] {
        color: var(--sidebar-icon-color);
@@ -4,30 +4,21 @@ title: Home

 # Welcome to Home Assistant Design

-This is the design gallery for the Home Assistant frontend: a living reference of working components, dashboard cards, and brand and copy guidance. Every page runs outside a Home Assistant instance, so you can explore the interface, try components in isolation, and review changes against a consistent baseline.
+This portal aims to aid designers and developers on improving the Home Assistant interface. It consists of working code, resources and guidelines.

-## Browse the gallery
+## Home Assistant interface

- [Brand](#brand/logo): the logo, personality, and the story behind the Open Home.
- [Components](#components/ha-button): the `ha-*` component library with live demos and API notes.
- [Dashboards](#lovelace/introduction): Lovelace cards rendered from real card configuration.
- [More Info dialogs](#more-info/light): the more-info experience for each entity type.
- [Automation](#automation/editor-trigger): trigger, condition, and action editors, plus trace views.
- [Users](#user-test/user-types): the audiences we design for.
- [Date and time](#date-time/date): date and time formatting examples.
- [Miscellaneous](#misc/entity-state): smaller utilities and patterns, plus how to edit this gallery.
+The Home Assistant frontend allows users to browse and control the state of their home, manage their automations and configure integrations. The frontend is designed as a mobile-first experience. It is a progressive web application and offers an app-like experience to our users. The Home Assistant frontend needs to be fast. But it also needs to work on a wide range of old devices.

-## Testing and playground
+### Material Design

-Every page runs against fake state, so you can interact with components safely and reproducibly. Treat the demo pages as a playground: change a value, resize the window, or switch the layout to right-to-left to check spacing and direction. Use the gallery to reproduce a UI state in isolation before debugging it in a full Home Assistant setup.
-
-Open **Settings** from the gear icon in the sidebar to switch between light and dark themes or preview the interface in right-to-left.
+The Home Assistant interface is based on Material Design. It's a design system created by Google to quickly build high-quality digital experiences. Components and guidelines that are custom made for Home Assistant are documented on this portal. For all other components check <a href="https://material.io" rel="noopener noreferrer" target="_blank">material.io</a>.

 ## Designers

-We want to make it as easy for designers to contribute as it is for developers. There's a lot a designer can contribute to:
+We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:

- Meet us in the <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
+- Meet us at <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
 - Start designing with our <a href="https://www.figma.com/design/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!

@@ -372,6 +372,7 @@ export class DemoEntityState extends LitElement {
              hass.localize,
              entry.stateObj,
              hass.locale,
+              [], // numericDeviceClasses
              hass.config,
              hass.entities
            )}`,
@@ -21,7 +21,6 @@
    "prepack": "pinst --disable",
    "postpack": "pinst --enable",
    "test": "vitest run --config test/vitest.config.ts",
-    "test:bench": "vitest bench --run --config test/vitest.bench.config.ts",
    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
  },
  "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
@@ -35,13 +34,13 @@
    "@codemirror/lang-jinja": "6.0.1",
    "@codemirror/lang-yaml": "6.1.3",
    "@codemirror/language": "6.12.3",
-    "@codemirror/lint": "6.9.7",
+    "@codemirror/lint": "6.9.6",
    "@codemirror/search": "6.7.0",
    "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.43.1",
+    "@codemirror/view": "6.43.0",
    "@date-fns/tz": "1.5.0",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.9",
+    "@formatjs/intl-datetimeformat": "7.4.8",
    "@formatjs/intl-displaynames": "7.3.10",
    "@formatjs/intl-durationformat": "0.10.14",
    "@formatjs/intl-getcanonicallocales": "3.2.10",
@@ -132,13 +131,13 @@
    "@babel/preset-env": "7.29.7",
    "@bundle-stats/plugin-webpack-filter": "4.22.2",
    "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.62.0",
+    "@html-eslint/eslint-plugin": "0.61.0",
    "@lokalise/node-api": "16.0.0",
    "@octokit/auth-oauth-device": "8.0.3",
    "@octokit/plugin-retry": "8.1.0",
    "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.13",
-    "@rspack/core": "2.0.8",
+    "@rsdoctor/rspack-plugin": "1.5.12",
+    "@rspack/core": "2.0.6",
    "@rspack/dev-server": "2.0.3",
    "@types/chromecast-caf-receiver": "6.0.26",
    "@types/chromecast-caf-sender": "1.0.11",
@@ -159,7 +158,7 @@
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.4",
    "del": "8.0.1",
-    "eslint": "10.5.0",
+    "eslint": "10.4.1",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.16.2",
@@ -187,7 +186,7 @@
    "lodash.template": "4.18.1",
    "map-stream": "0.0.7",
    "pinst": "3.0.0",
-    "prettier": "3.8.4",
+    "prettier": "3.8.3",
    "rspack-manifest-plugin": "5.2.2",
    "serve": "14.2.6",
    "sinon": "22.0.0",
@@ -195,7 +194,7 @@
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.61.0",
+    "typescript-eslint": "8.60.1",
    "vite-tsconfig-paths": "6.1.1",
    "vitest": "4.1.8",
    "webpack-stats-plugin": "1.1.3",
@@ -1,11 +0,0 @@
-#!/usr/bin/env bash
-
-# Safe bash settings
-# -e            Exit on command fail
-# -u            Exit on unset variable
-# -o pipefail   Exit if piped command has error code
-set -eu -o pipefail
-
-cd "$(dirname "$0")/.."
-
-./node_modules/.bin/gulp gen-numeric-device-classes
@@ -110,15 +110,6 @@ export const DOMAINS_WITH_DYNAMIC_PICTURE = new Set([
  "media_player",
 ]);

-/** Domains that use a timestamp for state. */
-export const TIMESTAMP_STATE_DOMAINS = [
-  "button",
-  "infrared",
-  "input_button",
-  "radio_frequency",
-  "scene",
-];
-
 /** Temperature units. */
 export const UNIT_C = "°C";
 export const UNIT_F = "°F";
@@ -3,20 +3,19 @@ import type { FrontendLocaleData } from "../../data/translation";
 import { selectUnit } from "../util/select-unit";

 const formatRelTimeMem = memoizeOne(
-  (locale: FrontendLocaleData, style: Intl.RelativeTimeFormatStyle) =>
-    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto", style })
+  (locale: FrontendLocaleData) =>
+    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto" })
 );

 export const relativeTime = (
  from: Date,
  locale: FrontendLocaleData,
  to?: Date,
-  includeTense = true,
-  style: Intl.RelativeTimeFormatStyle = "long"
+  includeTense = true
 ): string => {
  const diff = selectUnit(from, to, locale);
  if (includeTense) {
-    return formatRelTimeMem(locale, style).format(diff.value, diff.unit);
+    return formatRelTimeMem(locale).format(diff.value, diff.unit);
  }
  return Intl.NumberFormat(locale.language, {
    style: "unit",
@@ -1,7 +1,7 @@
 // Load a resource and get a promise when loading done.
 // From: https://davidwalsh.name/javascript-loader

-const _load = (tag: "link" | "script", url: string, type?: "module") =>
+const _load = (tag: "link" | "script" | "img", url: string, type?: "module") =>
  // This promise will be used by Promise.all to determine success or failure
  new Promise((resolve, reject) => {
    const element = document.createElement(tag);
@@ -33,4 +33,5 @@ const _load = (tag: "link" | "script", url: string, type?: "module") =>
  });
 export const loadCSS = (url: string) => _load("link", url);
 export const loadJS = (url: string) => _load("script", url);
+export const loadImg = (url: string) => _load("img", url);
 export const loadModule = (url: string) => _load("script", url, "module");
@@ -0,0 +1,41 @@
+/**
+ * Scroll to a specific y coordinate.
+ *
+ * Copied from paper-scroll-header-panel.
+ *
+ * @method scroll
+ * @param {number} top The coordinate to scroll to, along the y-axis.
+ * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
+ */
+export default function scrollToTarget(element, target) {
+  // the scroll event will trigger _updateScrollState directly,
+  // However, _updateScrollState relies on the previous `scrollTop` to update the states.
+  // Calling _updateScrollState will ensure that the states are synced correctly.
+  const top = 0;
+  const scroller = target;
+  const easingFn = function easeOutQuad(t, b, c, d) {
+    t /= d;
+    return -c * t * (t - 2) + b;
+  };
+  const animationId = Math.random();
+  const duration = 200;
+  const startTime = Date.now();
+  const currentScrollTop = scroller.scrollTop;
+  const deltaScrollTop = top - currentScrollTop;
+  element._currentAnimationId = animationId;
+  (function updateFrame() {
+    const now = Date.now();
+    const elapsedTime = now - startTime;
+    if (elapsedTime > duration) {
+      scroller.scrollTop = top;
+    } else if (element._currentAnimationId === animationId) {
+      scroller.scrollTop = easingFn(
+        elapsedTime,
+        currentScrollTop,
+        deltaScrollTop,
+        duration
+      );
+      requestAnimationFrame(updateFrame.bind(element));
+    }
+  }).call(element);
+}
@@ -3,6 +3,8 @@ import type { Map, TileLayer } from "leaflet";
 // Sets up a Leaflet map on the provided DOM element
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 export type LeafletModuleType = typeof import("leaflet");
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+export type LeafletDrawModuleType = typeof import("leaflet-draw");

 export const setupLeafletMap = async (
  mapElement: HTMLElement,
@@ -43,6 +45,17 @@ export const setupLeafletMap = async (
  return [map, Leaflet, tileLayer];
 };

+export const replaceTileLayer = (
+  leaflet: LeafletModuleType,
+  map: Map,
+  tileLayer: TileLayer
+): TileLayer => {
+  map.removeLayer(tileLayer);
+  tileLayer = createTileLayer(leaflet);
+  tileLayer.addTo(map);
+  return tileLayer;
+};
+
 const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
  leaflet.tileLayer(
    `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${
@@ -0,0 +1,3 @@
+/** An empty image which can be set as src of an img element. */
+export const emptyImageBase64 =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
@@ -17,51 +17,13 @@ import {
 import { blankBeforeUnit } from "../translations/blank_before_unit";
 import type { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
-import {
-  isNumericSensorDeviceClass,
-  SENSOR_TIMESTAMP_DEVICE_CLASSES,
-} from "../../data/sensor";
-
-// Domains whose state is a timezone-agnostic date and/or time string.
-const DATE_TIME_DOMAINS = new Set(["date", "input_datetime", "time"]);
-
-// Domains whose state is a timestamp.
-const TIMESTAMP_DOMAINS = new Set([
-  "ai_task",
-  "button",
-  "conversation",
-  "event",
-  "image",
-  "infrared",
-  "input_button",
-  "notify",
-  "radio_frequency",
-  "scene",
-  "stt",
-  "tag",
-  "tts",
-  "wake_word",
-  "datetime",
-]);
-
-// Maps Intl.NumberFormat part types to ValuePart types for monetary states.
-const MONETARY_TYPE_MAP: Record<string, ValuePart["type"]> = {
-  integer: "value",
-  group: "value",
-  decimal: "value",
-  fraction: "value",
-  minusSign: "value",
-  plusSign: "value",
-  literal: "literal",
-  currency: "unit",
-};
-
-const NUMERICAL_DOMAINS = ["counter", "input_number", "number"];
+import { SENSOR_TIMESTAMP_DEVICE_CLASSES } from "../../data/sensor";

 export const computeStateDisplay = (
  localize: LocalizeFunc,
  stateObj: HassEntity,
  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
  config: HassConfig,
  entities: HomeAssistant["entities"],
  state?: string
@@ -72,6 +34,7 @@ export const computeStateDisplay = (
  return computeStateDisplayFromEntityAttributes(
    localize,
    locale,
+    sensorNumericDeviceClasses,
    config,
    entity,
    stateObj.entity_id,
@@ -83,6 +46,7 @@ export const computeStateDisplay = (
 export const computeStateDisplayFromEntityAttributes = (
  localize: LocalizeFunc,
  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
  config: HassConfig,
  entity: EntityRegistryDisplayEntry | undefined,
  entityId: string,
@@ -92,6 +56,7 @@ export const computeStateDisplayFromEntityAttributes = (
  const parts = computeStateToPartsFromEntityAttributes(
    localize,
    locale,
+    sensorNumericDeviceClasses,
    config,
    entity,
    entityId,
@@ -104,6 +69,7 @@ export const computeStateDisplayFromEntityAttributes = (
 const computeStateToPartsFromEntityAttributes = (
  localize: LocalizeFunc,
  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
  config: HassConfig,
  entity: EntityRegistryDisplayEntry | undefined,
  entityId: string,
@@ -120,15 +86,15 @@ const computeStateToPartsFromEntityAttributes = (
  }

  const domain = computeDomain(entityId);
-  const isNumberDomain = NUMERICAL_DOMAINS.includes(domain);
-  const isSensorDomain = domain === "sensor";
-
-  // Numeric values (by attributes, number domain,
-  // or numeric sensor device class) use formatNumber.
+  const is_number_domain =
+    domain === "counter" || domain === "number" || domain === "input_number";
+  // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
  if (
-    isNumericFromAttributes(attributes) ||
-    isNumberDomain ||
-    (isSensorDomain && isNumericSensorDeviceClass(attributes.device_class))
+    isNumericFromAttributes(
+      attributes,
+      domain === "sensor" ? sensorNumericDeviceClasses : []
+    ) ||
+    is_number_domain
  ) {
    // state is duration
    if (
@@ -172,10 +138,21 @@ const computeStateToPartsFromEntityAttributes = (
      }

      if (parts.length) {
+        const TYPE_MAP: Record<string, ValuePart["type"]> = {
+          integer: "value",
+          group: "value",
+          decimal: "value",
+          fraction: "value",
+          minusSign: "value",
+          plusSign: "value",
+          literal: "literal",
+          currency: "unit",
+        };
+
        const valueParts: ValuePart[] = [];

        for (const part of parts) {
-          const type = MONETARY_TYPE_MAP[part.type];
+          const type = TYPE_MAP[part.type];
          if (!type) continue;
          const last = valueParts[valueParts.length - 1];
          // Merge consecutive value parts (e.g. "-" + "12" + "." + "00" → "-12.00")
@@ -214,7 +191,7 @@ const computeStateToPartsFromEntityAttributes = (
    return [{ type: "value", value: value }];
  }

-  if (DATE_TIME_DOMAINS.has(domain)) {
+  if (["date", "input_datetime", "time"].includes(domain)) {
    // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
    // Attributes aren't available, we have to use `state`.

@@ -273,7 +250,23 @@ const computeStateToPartsFromEntityAttributes = (

  // state is a timestamp
  if (
-    TIMESTAMP_DOMAINS.has(domain) ||
+    [
+      "ai_task",
+      "button",
+      "conversation",
+      "event",
+      "image",
+      "infrared",
+      "input_button",
+      "notify",
+      "radio_frequency",
+      "scene",
+      "stt",
+      "tag",
+      "tts",
+      "wake_word",
+      "datetime",
+    ].includes(domain) ||
    (domain === "sensor" &&
      SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(attributes.device_class))
  ) {
@@ -314,6 +307,7 @@ export const computeStateToParts = (
  localize: LocalizeFunc,
  stateObj: HassEntity,
  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
  config: HassConfig,
  entities: HomeAssistant["entities"],
  state?: string
@@ -324,6 +318,7 @@ export const computeStateToParts = (
  return computeStateToPartsFromEntityAttributes(
    localize,
    locale,
+    sensorNumericDeviceClasses,
    config,
    entity,
    stateObj.entity_id,
@@ -0,0 +1,23 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { supportsFeature } from "./supports-feature";
+
+export type FeatureClassNames<T extends number = number> = Partial<
+  Record<T, string>
+>;
+
+// Expects classNames to be an object mapping feature-bit -> className
+export const featureClassNames = (
+  stateObj: HassEntity,
+  classNames: FeatureClassNames
+) => {
+  if (!stateObj || !stateObj.attributes.supported_features) {
+    return "";
+  }
+
+  return Object.keys(classNames)
+    .map((feature) =>
+      supportsFeature(stateObj, Number(feature)) ? classNames[feature] : ""
+    )
+    .filter((attr) => attr !== "")
+    .join(" ");
+};
@@ -1,48 +0,0 @@
-import { AITaskEntityFeature } from "../../data/ai_task";
-import { AlarmControlPanelEntityFeature } from "../../data/alarm_control_panel";
-import { AssistSatelliteEntityFeature } from "../../data/assist_satellite";
-import { CalendarEntityFeature } from "../../data/calendar";
-import { ClimateEntityFeature } from "../../data/climate";
-import { ConversationEntityFeature } from "../../data/conversation";
-import { CoverEntityFeature } from "../../data/cover";
-import { FanEntityFeature } from "../../data/fan";
-import { HumidifierEntityFeature } from "../../data/humidifier";
-import { LawnMowerEntityFeature } from "../../data/lawn_mower";
-import { LightEntityFeature } from "../../data/light";
-import { LockEntityFeature } from "../../data/lock";
-import { MediaPlayerEntityFeature } from "../../data/media-player";
-import { TodoListEntityFeature } from "../../data/todo";
-import { UpdateEntityFeature } from "../../data/update";
-import { VacuumEntityFeature } from "../../data/vacuum";
-import { ValveEntityFeature } from "../../data/valve";
-import { WaterHeaterEntityFeature } from "../../data/water_heater";
-import { WeatherEntityFeature } from "../../data/weather";
-
-export type FeatureEnum = Record<string | number, string | number>;
-
-const DOMAIN_ENUMS = {
-  ai_task: AITaskEntityFeature,
-  alarm_control_panel: AlarmControlPanelEntityFeature,
-  assist_satellite: AssistSatelliteEntityFeature,
-  calendar: CalendarEntityFeature,
-  climate: ClimateEntityFeature,
-  conversation: ConversationEntityFeature,
-  cover: CoverEntityFeature,
-  fan: FanEntityFeature,
-  humidifier: HumidifierEntityFeature,
-  lawn_mower: LawnMowerEntityFeature,
-  light: LightEntityFeature,
-  lock: LockEntityFeature,
-  media_player: MediaPlayerEntityFeature,
-  todo: TodoListEntityFeature,
-  update: UpdateEntityFeature,
-  vacuum: VacuumEntityFeature,
-  valve: ValveEntityFeature,
-  water_heater: WaterHeaterEntityFeature,
-  weather: WeatherEntityFeature,
-};
-
-export function getFeatures(domain: string): FeatureEnum | undefined {
-  const enumObj = DOMAIN_ENUMS[domain] as FeatureEnum;
-  return enumObj;
-}
@@ -4,10 +4,9 @@ import { updateIsInstalling } from "../../data/update";

 export const updateIcon = (stateObj: HassEntity, state?: string) => {
  const compareState = state ?? stateObj.state;
-  // An install can be in progress even when the state is "off", e.g. when
-  // downgrading firmware. Show the installing icon regardless of state.
-  if (updateIsInstalling(stateObj as UpdateEntity)) {
-    return "mdi:package-down";
-  }
-  return compareState === "on" ? "mdi:package-up" : "mdi:package";
+  return compareState === "on"
+    ? updateIsInstalling(stateObj as UpdateEntity)
+      ? "mdi:package-down"
+      : "mdi:package-up"
+    : "mdi:package";
 };
@@ -14,8 +14,12 @@ export const isNumericState = (stateObj: HassEntity): boolean =>
  isNumericFromAttributes(stateObj.attributes);

 export const isNumericFromAttributes = (
-  attributes: HassEntityAttributeBase
-): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
+  attributes: HassEntityAttributeBase,
+  numericDeviceClasses?: string[]
+): boolean =>
+  !!attributes.unit_of_measurement ||
+  !!attributes.state_class ||
+  (numericDeviceClasses || []).includes(attributes.device_class || "");

 export const numberFormatToLocale = (
  localeOptions: FrontendLocaleData
@@ -36,25 +40,6 @@ export const numberFormatToLocale = (
  }
 };

-// Constructing an Intl.NumberFormat is comparatively expensive, and these
-// formatters are created on every numeric state render. The number of distinct
-// (locale, options) combinations is small and bounded in practice, so cache the
-// instances instead of rebuilding them on every call.
-const numberFormatCache = new Map<string, Intl.NumberFormat>();
-
-const getNumberFormatter = (
-  locale: string | string[] | undefined,
-  options: Intl.NumberFormatOptions
-): Intl.NumberFormat => {
-  const key = JSON.stringify([locale, options]);
-  let formatter = numberFormatCache.get(key);
-  if (!formatter) {
-    formatter = new Intl.NumberFormat(locale, options);
-    numberFormatCache.set(key, formatter);
-  }
-  return formatter;
-};
-
 /**
 * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
 *
@@ -90,7 +75,7 @@ export const formatNumberToParts = (
    localeOptions?.number_format !== NumberFormat.none &&
    !Number.isNaN(Number(num))
  ) {
-    return getNumberFormatter(
+    return new Intl.NumberFormat(
      locale,
      getDefaultFormatOptions(num, options)
    ).formatToParts(Number(num));
@@ -102,7 +87,7 @@ export const formatNumberToParts = (
    localeOptions?.number_format === NumberFormat.none
  ) {
    // If NumberFormat is none, use en-US format without grouping.
-    return getNumberFormatter(
+    return new Intl.NumberFormat(
      "en-US",
      getDefaultFormatOptions(num, {
        ...options,
@@ -46,7 +46,8 @@ export const computeFormatFunctions = async (
  entities: HomeAssistant["entities"],
  devices: HomeAssistant["devices"],
  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"]
+  floors: HomeAssistant["floors"],
+  sensorNumericDeviceClasses: string[]
 ): Promise<{
  formatEntityState: FormatEntityStateFunc;
  formatEntityStateToParts: FormatEntityStateToPartsFunc;
@@ -65,9 +66,25 @@ export const computeFormatFunctions = async (

  return {
    formatEntityState: (stateObj, state) =>
-      computeStateDisplay(localize, stateObj, locale, config, entities, state),
+      computeStateDisplay(
+        localize,
+        stateObj,
+        locale,
+        sensorNumericDeviceClasses,
+        config,
+        entities,
+        state
+      ),
    formatEntityStateToParts: (stateObj, state) =>
-      computeStateToParts(localize, stateObj, locale, config, entities, state),
+      computeStateToParts(
+        localize,
+        stateObj,
+        locale,
+        sensorNumericDeviceClasses,
+        config,
+        entities,
+        state
+      ),
    formatEntityAttributeValue: (stateObj, attribute, value) =>
      computeAttributeValueDisplay(
        localize,
@@ -17,6 +17,8 @@ export type LocalizeKeys =
  | `ui.common.${string}`
  | `ui.components.calendar.event.rrule.${string}`
  | `ui.components.selectors.file.${string}`
+  | `ui.components.logbook.messages.detected_device_classes.${string}`
+  | `ui.components.logbook.messages.cleared_device_classes.${string}`
  | `ui.dialogs.entity_registry.editor.${string}`
  | `ui.dialogs.more_info_control.lawn_mower.${string}`
  | `ui.dialogs.more_info_control.vacuum.${string}`
@@ -16,17 +16,32 @@ export type HistoryLogbookTargetParamKey =
  | "area_id"
  | "device_id";

-export const historyLogbookTargetParamKeys: readonly HistoryLogbookTargetParamKey[] =
-  ["entity_id", "label_id", "floor_id", "area_id", "device_id"];
+export type HistoryLogbookDateParamKey = "start_date" | "end_date";
+
+export type HistoryLogbookBooleanParamKey = "back";
+
+export type HistoryLogbookQueryParams = QueryParamValues<
+  HistoryLogbookTargetParamKey,
+  HistoryLogbookDateParamKey,
+  HistoryLogbookBooleanParamKey
+>;
+
+export const historyLogbookTargetParamKeys: HistoryLogbookTargetParamKey[] = [
+  "entity_id",
+  "label_id",
+  "floor_id",
+  "area_id",
+  "device_id",
+];

 export const historyLogbookQueryParamConfig = {
  list: historyLogbookTargetParamKeys,
  date: ["start_date", "end_date"],
  boolean: [{ key: "back", trueValue: "1" }],
-} as const satisfies QueryParamConfig;
-
-export type HistoryLogbookQueryParams = QueryParamValues<
-  typeof historyLogbookQueryParamConfig
+} satisfies QueryParamConfig<
+  HistoryLogbookTargetParamKey,
+  HistoryLogbookDateParamKey,
+  HistoryLogbookBooleanParamKey
 >;

 export const decodeHistoryLogbookQueryParams = (
@@ -6,49 +6,29 @@ export type SearchParamsSource =
  | Record<string, string>
  | string;

-export interface QueryParamConfig {
-  list?: readonly string[];
-  date?: readonly string[];
+export interface QueryParamConfig<
+  ListKey extends string,
+  DateKey extends string,
+  BooleanKey extends string,
+> {
+  list?: readonly ListKey[];
+  date?: readonly DateKey[];
  boolean?: readonly {
-    key: string;
+    key: BooleanKey;
    trueValue: string;
  }[];
-  string?: readonly string[];
 }

-type ListKeyOf<C extends QueryParamConfig> = C extends {
-  list: readonly (infer K extends string)[];
-}
-  ? K
-  : never;
-
-type DateKeyOf<C extends QueryParamConfig> = C extends {
-  date: readonly (infer K extends string)[];
-}
-  ? K
-  : never;
-
-type BooleanKeyOf<C extends QueryParamConfig> = C extends {
-  boolean: readonly { key: infer K extends string }[];
-}
-  ? K
-  : never;
-
-type StringKeyOf<C extends QueryParamConfig> = C extends {
-  string: readonly (infer K extends string)[];
-}
-  ? K
-  : never;
-
-export type QueryParamValues<C extends QueryParamConfig> = Partial<
-  Record<ListKeyOf<C>, string[]> &
-    Record<DateKeyOf<C>, Date> &
-    Record<BooleanKeyOf<C>, boolean> &
-    Record<StringKeyOf<C>, string>
+export type QueryParamValues<
+  ListKey extends string,
+  DateKey extends string,
+  BooleanKey extends string,
+> = Partial<
+  Record<ListKey, string[]> &
+    Record<DateKey, Date> &
+    Record<BooleanKey, boolean>
 >;

-type QueryParamValue = string[] | Date | boolean | string;
-
 export type ServiceTargetQueryParams<
  Key extends keyof HassServiceTarget & string,
 > = Partial<Record<Key, string[]>>;
@@ -66,59 +46,53 @@ const getSearchParam = (
  return searchParams[key] ?? null;
 };

-export function decodeQueryParams<C extends QueryParamConfig>(
+export const decodeQueryParams = <
+  ListKey extends string,
+  DateKey extends string,
+  BooleanKey extends string,
+>(
  searchParams: SearchParamsSource,
-  config: C
-): QueryParamValues<C>;
-export function decodeQueryParams(
-  searchParams: SearchParamsSource,
-  config: QueryParamConfig
-): Record<string, QueryParamValue | undefined> {
-  const params: Record<string, QueryParamValue> = {};
+  config: QueryParamConfig<ListKey, DateKey, BooleanKey>
+): QueryParamValues<ListKey, DateKey, BooleanKey> => {
+  const params: QueryParamValues<ListKey, DateKey, BooleanKey> = {};
  for (const key of config.list ?? []) {
    const value = getSearchParam(searchParams, key);
    if (value) {
-      params[key] = value.split(",");
+      params[key] = value.split(",") as (typeof params)[typeof key];
    }
  }
  for (const key of config.date ?? []) {
    const value = getSearchParam(searchParams, key);
    if (value) {
-      params[key] = new Date(value);
+      params[key] = new Date(value) as (typeof params)[typeof key];
    }
  }
  for (const { key, trueValue } of config.boolean ?? []) {
    if (getSearchParam(searchParams, key) === trueValue) {
-      params[key] = true;
-    }
-  }
-  for (const key of config.string ?? []) {
-    const value = getSearchParam(searchParams, key);
-    if (value) {
-      params[key] = value;
+      params[key] = true as (typeof params)[typeof key];
    }
  }
  return params;
-}
+};

-export function createQueryString<C extends QueryParamConfig>(
-  values: QueryParamValues<NoInfer<C>>,
-  config: C
-): string;
-export function createQueryString(
-  values: Record<string, QueryParamValue | undefined>,
-  config: QueryParamConfig
-): string {
+export const createQueryString = <
+  ListKey extends string,
+  DateKey extends string,
+  BooleanKey extends string,
+>(
+  values: QueryParamValues<ListKey, DateKey, BooleanKey>,
+  config: QueryParamConfig<ListKey, DateKey, BooleanKey>
+): string => {
  const searchParams = new URLSearchParams();
  for (const key of config.list ?? []) {
-    const value = values[key];
-    if (Array.isArray(value) && value.length) {
+    const value = values[key] as string[] | undefined;
+    if (value?.length) {
      searchParams.append(key, value.join(","));
    }
  }
  for (const key of config.date ?? []) {
-    const value = values[key];
-    if (value instanceof Date) {
+    const value = values[key] as Date | undefined;
+    if (value) {
      searchParams.append(key, value.toISOString());
    }
  }
@@ -127,14 +101,8 @@ export function createQueryString(
      searchParams.append(key, trueValue);
    }
  }
-  for (const key of config.string ?? []) {
-    const value = values[key];
-    if (typeof value === "string" && value) {
-      searchParams.append(key, value);
-    }
-  }
  return searchParams.toString();
-}
+};

 export const serviceTargetFromQueryParams = <
  Key extends keyof HassServiceTarget & string,
@@ -1,21 +0,0 @@
-import {
-  createQueryString,
-  decodeQueryParams,
-  type QueryParamConfig,
-  type QueryParamValues,
-  type SearchParamsSource,
-} from "./query-params";
-
-export const todoQueryParamConfig = {
-  string: ["entity_id"],
-  boolean: [{ key: "add_item", trueValue: "true" }],
-} as const satisfies QueryParamConfig;
-
-export type TodoQueryParams = QueryParamValues<typeof todoQueryParamConfig>;
-
-export const decodeTodoQueryParams = (
-  searchParams: SearchParamsSource
-): TodoQueryParams => decodeQueryParams(searchParams, todoQueryParamConfig);
-
-export const createTodoQueryString = (values: TodoQueryParams): string =>
-  createQueryString(values, todoQueryParamConfig);
@@ -11,12 +11,6 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
  }

  const root = rootEl || deepActiveElement()?.getRootNode() || document.body;
-  // A document node cannot have a textarea appended directly (only the single
-  // documentElement is allowed), so fall back to its body. Shadow roots and
-  // elements can hold the textarea directly, which keeps execCommand working
-  // inside dialogs that trap focus.
-  const container: Node =
-    root.nodeType === Node.DOCUMENT_NODE ? document.body : root;

  const el = document.createElement("textarea");
  el.value = str;
@@ -25,8 +19,8 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
  el.style.top = "0";
  el.style.left = "0";
  el.style.opacity = "0";
-  container.appendChild(el);
+  root.appendChild(el);
  el.select();
  document.execCommand("copy");
-  container.removeChild(el);
+  root.removeChild(el);
 };
@@ -1,29 +0,0 @@
-/**
- * Records like the entity, device, area and floor registries are re-fetched and
- * rebuilt in full on every registry-updated event, producing brand-new objects
- * for every item even when nothing relevant changed. That gives every item a new
- * reference, so all consumers needlessly re-render.
- *
- * Returns `next` with each item replaced by the equal `previous` item, so
- * unchanged items keep their object identity, and returns the `previous` record
- * untouched when nothing changed at all (so the update can be skipped entirely).
- */
-export const preserveUnchangedRecord = <T>(
-  previous: Record<string, T> | undefined,
-  next: Record<string, T>,
-  equal: (a: T, b: T) => boolean
-): Record<string, T> => {
-  if (!previous) {
-    return next;
-  }
-  let changed = Object.keys(previous).length !== Object.keys(next).length;
-  for (const key of Object.keys(next)) {
-    const previousItem = previous[key];
-    if (previousItem !== undefined && equal(previousItem, next[key])) {
-      next[key] = previousItem;
-    } else {
-      changed = true;
-    }
-  }
-  return changed ? next : previous;
-};
@@ -1,30 +0,0 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
-import type { ReactiveControllerHost } from "lit";
-import { clamp } from "../number/clamp";
-
-// Count columns from the container's real width (not the viewport) so a
-// docked sidebar is accounted for, like the dashboard sections view.
-const MIN_COLUMN_WIDTH = 320;
-const DEFAULT_COLUMN_GAP = 16;
-
-const parsePx = (value: string) => parseInt(value, 10) || 0;
-
-export const createColumnsController = (
-  host: ReactiveControllerHost & Element,
-  maxColumns: number
-) =>
-  new ResizeController<number>(host, {
-    target: null,
-    skipInitial: true,
-    callback: (entries) => {
-      const entry = entries[0];
-      if (!entry) {
-        return maxColumns;
-      }
-      const width = entry.contentRect.width;
-      const gap =
-        parsePx(getComputedStyle(entry.target).columnGap) || DEFAULT_COLUMN_GAP;
-      const columns = Math.floor((width + gap) / (MIN_COLUMN_WIDTH + gap));
-      return clamp(columns, 1, maxColumns);
-    },
-  });
@@ -16,12 +16,14 @@ interface CacheResult<T> {
 * @param args extra arguments to pass to the function to fetch the data
 * @returns
 */
-export const timeCachePromiseFunc = async <T, H = HomeAssistant>(
+export const timeCachePromiseFunc = async <T>(
  cacheKey: string,
  cacheTime: number,
-  func: (hass: H, ...args: any[]) => Promise<T>,
-  generateCacheKey: ((hass: H, lastResult: T) => unknown) | undefined,
-  hass: H,
+  func: (hass: HomeAssistant, ...args: any[]) => Promise<T>,
+  generateCacheKey:
+    | ((hass: HomeAssistant, lastResult: T) => unknown)
+    | undefined,
+  hass: HomeAssistant,
  ...args: any[]
 ): Promise<T> => {
  const anyHass = hass as any;
@@ -1,144 +0,0 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { debounce } from "../../common/util/debounce";
-import type { Condition } from "../../data/automation";
-import { subscribeCondition } from "../../data/automation";
-import type { HomeAssistant } from "../../types";
-import "../ha-tooltip";
-import "./ha-automation-row-live-test";
-import type { LiveTestState } from "./ha-automation-row-live-test";
-
-@customElement("ha-automation-condition-live-test")
-export class HaAutomationConditionLiveTest extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public condition!: Condition;
-
-  @state() private _liveTestResult: {
-    state: LiveTestState;
-    message?: string;
-  } = { state: "unknown" };
-
-  private _conditionUnsub?: Promise<UnsubscribeFunc>;
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._subscribeCondition();
-  }
-
-  protected override updated(changedProps: PropertyValues<this>): void {
-    super.updated(changedProps);
-    if (
-      changedProps.has("condition") &&
-      changedProps.get("condition") !== undefined
-    ) {
-      this._resetSubscription();
-      this._debounceSubscribeCondition();
-    }
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._debounceSubscribeCondition.cancel();
-    this._resetSubscription();
-  }
-
-  protected render() {
-    return html`
-      <div id="indicator">
-        <slot></slot>
-        <ha-automation-row-live-test
-          .state=${this._liveTestResult.state}
-          .label=${this.hass.localize(
-            `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
-          )}
-        ></ha-automation-row-live-test>
-      </div>
-      ${this._liveTestResult.message
-        ? html`<ha-tooltip for="indicator"
-            >${this._liveTestResult.message}</ha-tooltip
-          >`
-        : nothing}
-    `;
-  }
-
-  private _resetSubscription() {
-    this._liveTestResult = {
-      state: "unknown",
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.live_test_state.unknown"
-      ),
-    };
-    if (this._conditionUnsub) {
-      this._conditionUnsub.then((unsub) => unsub());
-      this._conditionUnsub = undefined;
-    }
-  }
-
-  private _debounceSubscribeCondition = debounce(
-    () => this._subscribeCondition(),
-    500
-  );
-
-  private async _subscribeCondition() {
-    this._resetSubscription();
-
-    if (!this.condition) {
-      return;
-    }
-
-    const conditionUnsub = subscribeCondition(
-      this.hass.connection,
-      (result) => {
-        if (result.error) {
-          this._handleLiveTestError(result.error);
-        } else {
-          this._liveTestResult = {
-            state: result.result ? "pass" : "fail",
-            message: this.hass.localize(
-              `ui.panel.config.automation.editor.conditions.testing_${result.result ? "pass" : "error"}`
-            ),
-          };
-        }
-      },
-      this.condition
-    );
-    conditionUnsub.catch((err: any) => {
-      this._handleLiveTestError(err);
-      if (this._conditionUnsub === conditionUnsub) {
-        this._conditionUnsub = undefined;
-      }
-    });
-    this._conditionUnsub = conditionUnsub;
-  }
-
-  private _handleLiveTestError(error: any) {
-    const invalid =
-      typeof error !== "string" && error.code === "invalid_format";
-    this._liveTestResult = {
-      state: invalid ? "invalid" : "unknown",
-      message: this.hass.localize(
-        `ui.panel.config.automation.editor.conditions.${invalid ? "invalid_condition" : "live_test_state.unknown"}`
-      ),
-    };
-  }
-
-  static styles = css`
-    :host {
-      display: inline-flex;
-      position: relative;
-    }
-    #indicator {
-      display: inline-flex;
-      position: relative;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-automation-condition-live-test": HaAutomationConditionLiveTest;
-  }
-}
@@ -1,12 +1,5 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../ha-svg-icon";
-import {
-  mdiAlertCircle,
-  mdiCheckCircle,
-  mdiCloseCircle,
-  mdiHelpCircle,
-} from "@mdi/js";

 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";

@@ -26,59 +19,46 @@ export class HaAutomationRowLiveTest extends LitElement {

  @property() public label = "";

-  private get _iconPath() {
-    switch (this.state) {
-      case "pass":
-        return mdiCheckCircle;
-      case "fail":
-        return mdiCloseCircle;
-      case "invalid":
-        return mdiAlertCircle;
-      default:
-        return mdiHelpCircle;
-    }
-  }
-
  protected render() {
    return html`
-      <div id="indicator" role="status" tabindex="0" aria-label=${this.label}>
-        <ha-svg-icon .path=${this._iconPath}></ha-svg-icon>
-      </div>
+      <div
+        id="indicator"
+        role="status"
+        tabindex="0"
+        aria-label=${this.label}
+      ></div>
    `;
  }

  static styles = css`
    :host {
      position: absolute;
-      top: -8px;
-      inset-inline-end: -8px;
+      top: -5px;
+      inset-inline-end: -6px;
      display: inline-block;
    }
    #indicator {
-      width: 16px;
-      height: 16px;
-      display: grid;
-      place-items: center;
+      width: 10px;
+      height: 10px;
      border-radius: var(--ha-border-radius-circle);
+      border: var(--ha-border-width-md) solid;
+      box-sizing: border-box;
      background-color: var(--card-background-color);
+      box-shadow: 0 0 0 2px var(--card-background-color);
      transition: all var(--ha-animation-duration-normal) ease-in-out;
    }
-    #indicator ha-svg-icon {
-      width: 16px;
-      height: 16px;
-      --mdc-icon-size: 16px;
-    }
    :host([state="pass"]) #indicator {
-      color: var(--ha-color-green-60);
+      background-color: var(--ha-color-green-60);
+      border-color: var(--ha-color-green-60);
    }
    :host([state="fail"]) #indicator {
-      color: var(--ha-color-orange-60);
+      border-color: var(--ha-color-orange-60);
    }
    :host([state="invalid"]) #indicator {
-      color: var(--ha-color-red-60);
+      border-color: var(--ha-color-red-60);
    }
    :host([state="unknown"]) #indicator {
-      color: var(--ha-color-neutral-60);
+      border-color: var(--ha-color-neutral-60);
    }
  `;
 }
@@ -161,8 +161,6 @@ export class HaAutomationRow extends LitElement {
    }
    .leading-icon-wrapper {
      padding-top: var(--ha-space-3);
-      position: relative;
-      z-index: 1;
    }
    ::slotted([slot="leading-icon"]) {
      color: var(--ha-color-on-neutral-quiet);
@@ -1,23 +1,5 @@
 import type { LineSeriesOption } from "echarts";

-type Point = NonNullable<LineSeriesOption["data"]>[number];
-
-interface MeanFrame {
-  sumX: number;
-  sumY: number;
-  count: number;
-  isArray: boolean;
-}
-
-interface MinMaxFrame {
-  minPoint: Point;
-  minX: number;
-  minY: number;
-  maxPoint: Point;
-  maxX: number;
-  maxY: number;
-}
-
 export function downSampleLineData<
  T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
 >(
@@ -37,47 +19,11 @@ export function downSampleLineData<
  const max = maxX ?? getPointData(data[data.length - 1]!)[0];
  const step = Math.ceil((max - min) / Math.floor(maxDetails));

-  if (useMean) {
-    // Group points into frames, accumulating sums in insertion order.
-    const frames = new Map<number, MeanFrame>();
-
-    for (const point of data) {
-      const pointData = getPointData(point);
-      if (!Array.isArray(pointData)) continue;
-      const x = Number(pointData[0]);
-      const y = Number(pointData[1]);
-      if (isNaN(x) || isNaN(y)) continue;
-
-      const frameIndex = Math.floor((x - min) / step);
-      const frame = frames.get(frameIndex);
-      if (!frame) {
-        frames.set(frameIndex, {
-          sumX: x,
-          sumY: y,
-          count: 1,
-          isArray: Array.isArray(pointData),
-        });
-      } else {
-        frame.sumX += x;
-        frame.sumY += y;
-        frame.count += 1;
-      }
-    }
-
-    const result: T[] = [];
-    for (const frame of frames.values()) {
-      const meanX = frame.sumX / frame.count;
-      const meanY = frame.sumY / frame.count;
-      const meanPoint = (
-        frame.isArray ? [meanX, meanY] : { value: [meanX, meanY] }
-      ) as T;
-      result.push(meanPoint);
-    }
-    return result;
-  }
-
-  // Min/max mode: track the min and max point per frame in insertion order.
-  const frames = new Map<number, MinMaxFrame>();
+  // Group points into frames
+  const frames = new Map<
+    number,
+    { point: (typeof data)[number]; x: number; y: number }[]
+  >();

  for (const point of data) {
    const pointData = getPointData(point);
@@ -89,39 +35,53 @@ export function downSampleLineData<
    const frameIndex = Math.floor((x - min) / step);
    const frame = frames.get(frameIndex);
    if (!frame) {
-      frames.set(frameIndex, {
-        minPoint: point,
-        minX: x,
-        minY: y,
-        maxPoint: point,
-        maxX: x,
-        maxY: y,
-      });
+      frames.set(frameIndex, [{ point, x, y }]);
    } else {
-      // Match the original strict-less / strict-greater comparisons so the
-      // first occurrence wins on ties.
-      if (y < frame.minY) {
-        frame.minPoint = point;
-        frame.minX = x;
-        frame.minY = y;
-      }
-      if (y > frame.maxY) {
-        frame.maxPoint = point;
-        frame.maxX = x;
-        frame.maxY = y;
-      }
+      frame.push({ point, x, y });
    }
  }

+  // Convert frames back to points
  const result: T[] = [];
-  for (const frame of frames.values()) {
-    // The order of the data must be preserved so max may be before min
-    if (frame.minX > frame.maxX) {
-      result.push(frame.maxPoint as T);
+
+  if (useMean) {
+    // Use mean values for each frame
+    for (const [_i, framePoints] of frames) {
+      const sumY = framePoints.reduce((acc, p) => acc + p.y, 0);
+      const meanY = sumY / framePoints.length;
+      const sumX = framePoints.reduce((acc, p) => acc + p.x, 0);
+      const meanX = sumX / framePoints.length;
+
+      const firstPoint = framePoints[0].point;
+      const pointData = getPointData(firstPoint);
+      const meanPoint = (
+        Array.isArray(pointData) ? [meanX, meanY] : { value: [meanX, meanY] }
+      ) as T;
+      result.push(meanPoint);
    }
-    result.push(frame.minPoint as T);
-    if (frame.minX < frame.maxX) {
-      result.push(frame.maxPoint as T);
+  } else {
+    // Use min/max values for each frame
+    for (const [_i, framePoints] of frames) {
+      let minPoint = framePoints[0];
+      let maxPoint = framePoints[0];
+
+      for (const p of framePoints) {
+        if (p.y < minPoint.y) {
+          minPoint = p;
+        }
+        if (p.y > maxPoint.y) {
+          maxPoint = p;
+        }
+      }
+
+      // The order of the data must be preserved so max may be before min
+      if (minPoint.x > maxPoint.x) {
+        result.push(maxPoint.point);
+      }
+      result.push(minPoint.point);
+      if (minPoint.x < maxPoint.x) {
+        result.push(maxPoint.point);
+      }
    }
  }

@@ -394,18 +394,6 @@ export class HaChartBase extends LitElement {
      return nothing;
    }
    const datasets = ensureArray(this.data!);
-    // Index datasets by id and name so each legend item is an O(1) lookup
-    // instead of scanning every dataset twice. Charts can have many series.
-    const datasetById = new Map<unknown, (typeof datasets)[number]>();
-    const datasetByName = new Map<unknown, (typeof datasets)[number]>();
-    for (const dataset of datasets) {
-      if (dataset.id !== undefined && !datasetById.has(dataset.id)) {
-        datasetById.set(dataset.id, dataset);
-      }
-      if (dataset.name !== undefined && !datasetByName.has(dataset.name)) {
-        datasetByName.set(dataset.name, dataset);
-      }
-    }

    const isMobile = window.matchMedia(
      "all and (max-width: 450px), all and (max-height: 500px)"
@@ -425,10 +413,10 @@ export class HaChartBase extends LitElement {
            return nothing;
          }
          let itemStyle: Record<string, any> = {};
+          let id = "";
          let value = "";
          let noLabelClick = false;
          const name = typeof item === "string" ? item : (item.name ?? "");
-          let id: string;
          if (typeof item === "string") {
            id = item;
          } else {
@@ -438,7 +426,9 @@ export class HaChartBase extends LitElement {
            noLabelClick = item.noLabelClick ?? false;
          }
          const labelClickable = this.clickLabelForMoreInfo && !noLabelClick;
-          const dataset = datasetById.get(id) ?? datasetByName.get(id);
+          const dataset =
+            datasets.find((d) => d.id === id) ??
+            datasets.find((d) => d.name === id);
          itemStyle = {
            color: dataset?.color as string,
            ...(dataset?.itemStyle as { borderColor?: string }),
@@ -1530,9 +1520,7 @@ export class HaChartBase extends LitElement {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
-      /* overflow: hidden clips descenders (e.g. "g", parentheses) with a tight
-         line-height, so give the line box room to contain them */
-      line-height: var(--ha-line-height-condensed);
+      line-height: 1;
    }
    @media (hover: hover) {
      .chart-legend .label.clickable:hover {
@@ -1570,25 +1558,6 @@ export class HaChartBase extends LitElement {
    .chart-legend .legend-toggle ha-svg-icon {
      --mdc-icon-size: 18px;
    }
-    /* On touch devices, enlarge the toggle tap target via taller rows and
-       leading padding (which also separates it from the previous item), while
-       keeping the icon tight to its own label so the pairing stays clear.
-       Drop the now-pointless row gap and li padding. */
-    @media (pointer: coarse) {
-      .chart-legend ul {
-        row-gap: 0;
-      }
-      /* Only grow the toggle rows, not the expand/collapse chip's row. */
-      .chart-legend li:has(.legend-toggle) {
-        height: 40px;
-        padding: 0;
-      }
-      .chart-legend .legend-toggle {
-        padding: 11px;
-        padding-inline-end: 4px;
-        margin: 0;
-      }
-    }
    ha-assist-chip {
      height: 100%;
      --_label-text-weight: 500;
@@ -1,481 +0,0 @@
-import type { LineSeriesOption } from "echarts/charts";
-import type { VisualMapComponentOption } from "echarts/components";
-import { getGraphColorByIndex } from "../../common/color/colors";
-import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
-import type { LineChartEntity, LineChartState } from "../../data/history";
-import type { HomeAssistant } from "../../types";
-import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
-
-const safeParseFloat = (value) => {
-  const parsed = parseFloat(value);
-  return isFinite(parsed) ? parsed : null;
-};
-
-export const CLIMATE_MODE_CONFIGS = [
-  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
-  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
-  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
-  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
-] as const;
-
-export interface StateHistoryChartLineDataParams {
-  hass: HomeAssistant;
-  data: LineChartEntity[];
-  endTime: Date;
-  names?: Record<string, string>;
-  colors?: Record<string, string | undefined>;
-  showNames: boolean;
-  computedStyles: CSSStyleDeclaration;
-  now: Date;
-}
-
-export interface StateHistoryChartLineData {
-  datasets: LineSeriesOption[];
-  entityIds: string[];
-  datasetToDataIndex: number[];
-  visualMap?: VisualMapComponentOption[];
-  yAxisFractionDigits: number;
-}
-
-/**
- * Transforms processed history (`LineChartEntity[]`) into ECharts series for
- * `state-history-chart-line`. Pure data processing: all environment inputs
- * (current time, theme style, hass) are injected so the transform is
- * deterministic and benchmarkable.
- */
-export function generateStateHistoryChartLineData(
-  params: StateHistoryChartLineDataParams
-): StateHistoryChartLineData | undefined {
-  const { hass, computedStyles, endTime } = params;
-  // Work with numeric epoch timestamps (ms) instead of Date objects below.
-  // Charts can hold a huge number of points, and allocating a Date per point
-  // is needless GC pressure; the "time" axis consumes numbers natively.
-  const endTimeMs = endTime.getTime();
-
-  let colorIndex = 0;
-  const entityStates = params.data;
-  const datasets: LineSeriesOption[] = [];
-  const entityIds: string[] = [];
-  const datasetToDataIndex: number[] = [];
-  let yMin = Infinity;
-  let yMax = -Infinity;
-  const trackY = (v: number | null | undefined) => {
-    if (typeof v === "number" && Number.isFinite(v)) {
-      if (v < yMin) yMin = v;
-      if (v > yMax) yMax = v;
-    }
-  };
-  if (entityStates.length === 0) {
-    return undefined;
-  }
-
-  const names = params.names || {};
-  const colors = params.colors || {};
-  entityStates.forEach((states, dataIdx) => {
-    const domain = states.domain;
-    const name = names[states.entity_id] || states.name;
-    const color = colors[states.entity_id];
-    // array containing [value1, value2, etc]
-    let prevValues: any[] | null = null;
-
-    const data: LineSeriesOption[] = [];
-
-    const pushData = (timestamp: number, datavalues: any[] | null) => {
-      if (!datavalues) return;
-      if (timestamp > endTimeMs) {
-        // Drop data points that are after the requested endTime. This could happen if
-        // endTime is "now" and client time is not in sync with server time.
-        return;
-      }
-      data.forEach((d, i) => {
-        if (datavalues[i] === null && prevValues && prevValues[i] !== null) {
-          // null data values show up as gaps in the chart.
-          // If the current value for the dataset is null and the previous
-          // value of the data set is not null, then add an 'end' point
-          // to the chart for the previous value. Otherwise the gap will
-          // be too big. It will go from the start of the previous data
-          // value until the start of the next data value.
-          d.data!.push([timestamp, prevValues[i]]);
-        }
-        d.data!.push([timestamp, datavalues[i]]);
-        trackY(datavalues[i]);
-      });
-      prevValues = datavalues;
-    };
-
-    const addDataSet = (
-      id: string,
-      nameY: string,
-      clr?: string,
-      fill = false
-    ) => {
-      if (!clr) {
-        clr = getGraphColorByIndex(colorIndex, computedStyles);
-        colorIndex++;
-      }
-      data.push({
-        id,
-        data: [],
-        type: "line",
-        cursor: "default",
-        name: nameY,
-        color: clr,
-        symbol: "circle",
-        symbolSize: 1,
-        step: "end",
-        sampling: "minmax",
-        animationDurationUpdate: 0,
-        lineStyle: {
-          width: fill ? 0 : 1.5,
-        },
-        areaStyle: fill
-          ? {
-              color: clr + "7F",
-            }
-          : undefined,
-        tooltip: {
-          show: !fill,
-        },
-      });
-      entityIds.push(states.entity_id);
-      datasetToDataIndex.push(dataIdx);
-    };
-
-    if (
-      domain === "thermostat" ||
-      domain === "climate" ||
-      domain === "water_heater"
-    ) {
-      const hasHvacAction = states.states.some(
-        (entityState) => entityState.attributes?.hvac_action
-      );
-
-      const activeModes = CLIMATE_MODE_CONFIGS.map(
-        ({ mode, action, cssVar }) => {
-          const isActive =
-            domain === "climate" && hasHvacAction
-              ? (entityState: LineChartState) =>
-                  CLIMATE_HVAC_ACTION_TO_MODE[
-                    entityState.attributes?.hvac_action
-                  ] === mode
-              : (entityState: LineChartState) => entityState.state === mode;
-          return { action, cssVar, isActive };
-        }
-      ).filter(({ isActive }) => states.states.some(isActive));
-      // We differentiate between thermostats that have a target temperature
-      // range versus ones that have just a target temperature
-
-      // Using step chart by step-before so manually interpolation not needed.
-      const hasTargetRange = states.states.some(
-        (entityState) =>
-          entityState.attributes &&
-          entityState.attributes.target_temp_high !==
-            entityState.attributes.target_temp_low
-      );
-      addDataSet(
-        states.entity_id + "-current_temperature",
-        params.showNames
-          ? hass.localize("ui.card.climate.current_temperature", {
-              name: name,
-            })
-          : hass.localize(
-              "component.climate.entity_component._.state_attributes.current_temperature.name"
-            )
-      );
-      for (const { action, cssVar } of activeModes) {
-        addDataSet(
-          `${states.entity_id}-${action}`,
-          params.showNames
-            ? hass.localize(`ui.card.climate.${action}`, {
-                name: name,
-              })
-            : hass.localize(
-                `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
-              ),
-          computedStyles.getPropertyValue(cssVar),
-          true
-        );
-      }
-
-      if (hasTargetRange) {
-        addDataSet(
-          states.entity_id + "-target_temperature_mode",
-          params.showNames
-            ? hass.localize("ui.card.climate.target_temperature_mode", {
-                name: name,
-                mode: hass.localize("ui.card.climate.high"),
-              })
-            : hass.localize(
-                "component.climate.entity_component._.state_attributes.target_temp_high.name"
-              )
-        );
-        addDataSet(
-          states.entity_id + "-target_temperature_mode_low",
-          params.showNames
-            ? hass.localize("ui.card.climate.target_temperature_mode", {
-                name: name,
-                mode: hass.localize("ui.card.climate.low"),
-              })
-            : hass.localize(
-                "component.climate.entity_component._.state_attributes.target_temp_low.name"
-              )
-        );
-      } else {
-        addDataSet(
-          states.entity_id + "-target_temperature",
-          params.showNames
-            ? hass.localize("ui.card.climate.target_temperature_entity", {
-                name: name,
-              })
-            : hass.localize(
-                "component.climate.entity_component._.state_attributes.temperature.name"
-              )
-        );
-      }
-
-      states.states.forEach((entityState) => {
-        if (!entityState.attributes) return;
-        const curTemp = safeParseFloat(
-          entityState.attributes.current_temperature
-        );
-        const series = [curTemp];
-        for (const { isActive } of activeModes) {
-          series.push(isActive(entityState) ? curTemp : null);
-        }
-        if (hasTargetRange) {
-          const targetHigh = safeParseFloat(
-            entityState.attributes.target_temp_high
-          );
-          const targetLow = safeParseFloat(
-            entityState.attributes.target_temp_low
-          );
-          series.push(targetHigh, targetLow);
-          pushData(entityState.last_changed, series);
-        } else {
-          const target = safeParseFloat(entityState.attributes.temperature);
-          series.push(target);
-          pushData(entityState.last_changed, series);
-        }
-      });
-    } else if (domain === "humidifier") {
-      const hasAction = states.states.some(
-        (entityState) => entityState.attributes?.action
-      );
-      const hasCurrent = states.states.some(
-        (entityState) => entityState.attributes?.current_humidity
-      );
-
-      const hasHumidifying =
-        hasAction &&
-        states.states.some(
-          (entityState: LineChartState) =>
-            entityState.attributes?.action === "humidifying"
-        );
-      const hasDrying =
-        hasAction &&
-        states.states.some(
-          (entityState: LineChartState) =>
-            entityState.attributes?.action === "drying"
-        );
-
-      addDataSet(
-        states.entity_id + "-target_humidity",
-        params.showNames
-          ? hass.localize("ui.card.humidifier.target_humidity_entity", {
-              name: name,
-            })
-          : hass.localize(
-              "component.humidifier.entity_component._.state_attributes.humidity.name"
-            )
-      );
-
-      if (hasCurrent) {
-        addDataSet(
-          states.entity_id + "-current_humidity",
-          params.showNames
-            ? hass.localize("ui.card.humidifier.current_humidity_entity", {
-                name: name,
-              })
-            : hass.localize(
-                "component.humidifier.entity_component._.state_attributes.current_humidity.name"
-              )
-        );
-      }
-
-      // If action attribute is available, we used it to shade the area below the humidity.
-      // If action attribute is not available, we shade the area when the device is on
-      if (hasHumidifying) {
-        addDataSet(
-          states.entity_id + "-humidifying",
-          params.showNames
-            ? hass.localize("ui.card.humidifier.humidifying", {
-                name: name,
-              })
-            : hass.localize(
-                "component.humidifier.entity_component._.state_attributes.action.state.humidifying"
-              ),
-          computedStyles.getPropertyValue("--state-humidifier-on-color"),
-          true
-        );
-      } else if (hasDrying) {
-        addDataSet(
-          states.entity_id + "-drying",
-          params.showNames
-            ? hass.localize("ui.card.humidifier.drying", {
-                name: name,
-              })
-            : hass.localize(
-                "component.humidifier.entity_component._.state_attributes.action.state.drying"
-              ),
-          computedStyles.getPropertyValue("--state-humidifier-on-color"),
-          true
-        );
-      } else {
-        addDataSet(
-          states.entity_id + "-on",
-          params.showNames
-            ? hass.localize("ui.card.humidifier.on_entity", {
-                name: name,
-              })
-            : hass.localize("component.humidifier.entity_component._.state.on"),
-          undefined,
-          true
-        );
-      }
-
-      states.states.forEach((entityState) => {
-        if (!entityState.attributes) return;
-        const target = safeParseFloat(entityState.attributes.humidity);
-        // If the current humidity is not available, then we fill up to the target humidity
-        const current = hasCurrent
-          ? safeParseFloat(entityState.attributes?.current_humidity)
-          : target;
-        const series = [target];
-
-        if (hasCurrent) {
-          series.push(current);
-        }
-
-        if (hasHumidifying) {
-          series.push(
-            entityState.attributes?.action === "humidifying" ? current : null
-          );
-        } else if (hasDrying) {
-          series.push(
-            entityState.attributes?.action === "drying" ? current : null
-          );
-        } else {
-          series.push(entityState.state === "on" ? current : null);
-        }
-        pushData(entityState.last_changed, series);
-      });
-    } else {
-      addDataSet(states.entity_id, name, color);
-
-      let lastValue: number;
-      let lastDate: number;
-      let lastNullDate: number | null = null;
-
-      // Process chart data.
-      // When state is `unknown`, calculate the value and break the line.
-      const processData = (entityState: LineChartState) => {
-        const value = safeParseFloat(entityState.state);
-        const date = entityState.last_changed;
-        if (value !== null && lastNullDate) {
-          const tmpValue =
-            (value - lastValue) *
-              ((lastNullDate - lastDate) / (date - lastDate)) +
-            lastValue;
-          pushData(lastNullDate, [tmpValue]);
-          pushData(lastNullDate + 1, [null]);
-          pushData(date, [value]);
-          lastDate = date;
-          lastValue = value;
-          lastNullDate = null;
-        } else if (value !== null && lastNullDate === null) {
-          pushData(date, [value]);
-          lastDate = date;
-          lastValue = value;
-        } else if (
-          value === null &&
-          lastNullDate === null &&
-          lastValue !== undefined
-        ) {
-          lastNullDate = date;
-        }
-      };
-
-      if (states.statistics) {
-        const stopTime =
-          !states.states || states.states.length === 0
-            ? 0
-            : states.states[0].last_changed;
-        for (const statistic of states.statistics) {
-          if (stopTime && statistic.last_changed >= stopTime) {
-            break;
-          }
-          processData(statistic);
-        }
-      }
-      states.states.forEach((entityState) => {
-        processData(entityState);
-      });
-      if (lastNullDate !== null) {
-        pushData(lastNullDate, [null]);
-      }
-    }
-
-    // Add an entry for final values
-    pushData(endTimeMs, prevValues);
-
-    // For sensors, append current state if viewing recent data
-    const nowMs = params.now.getTime();
-    // allow 1s of leeway for "now"
-    const isUpToNow = nowMs - endTimeMs <= 1000;
-    if (domain === "sensor" && isUpToNow && data.length === 1) {
-      const stateObj = hass.states[states.entity_id];
-      const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
-      if (currentValue !== null) {
-        data[0].data!.push([nowMs, currentValue]);
-        trackY(currentValue);
-      }
-    }
-
-    // Concat two arrays
-    Array.prototype.push.apply(datasets, data);
-  });
-
-  const visualMap: VisualMapComponentOption[] = [];
-  datasets.forEach((_, seriesIndex) => {
-    const dataIndex = datasetToDataIndex[seriesIndex];
-    const data = entityStates[dataIndex];
-    if (!data.statistics || data.statistics.length === 0) {
-      return;
-    }
-    // render stat data with a slightly transparent line
-    const firstStateTS = data.states[0]?.last_changed ?? endTime.getTime();
-    visualMap.push({
-      show: false,
-      seriesIndex,
-      dimension: 0,
-      pieces: [
-        {
-          max: firstStateTS - 0.01,
-          colorAlpha: 0.5,
-        },
-        {
-          min: firstStateTS,
-          colorAlpha: 1,
-        },
-      ],
-    });
-  });
-
-  return {
-    datasets,
-    entityIds,
-    datasetToDataIndex,
-    visualMap: visualMap.length > 0 ? visualMap : undefined,
-    yAxisFractionDigits: computeYAxisFractionDigits(yMin, yMax),
-  };
-}
@@ -5,17 +5,15 @@ import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
 import type { YAXisOption } from "echarts/types/dist/shared";
 import { styleMap } from "lit/directives/style-map";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import { computeRTL } from "../../common/util/compute_rtl";

-import type { LineChartEntity } from "../../data/history";
+import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
-import {
-  CLIMATE_MODE_CONFIGS,
-  generateStateHistoryChartLineData,
-} from "./state-history-chart-line-data";
+import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
 import type { HaECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
@@ -25,9 +23,22 @@ import {
 import { measureTextWidth } from "../../util/text";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
+import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";

+const safeParseFloat = (value) => {
+  const parsed = parseFloat(value);
+  return isFinite(parsed) ? parsed : null;
+};
+
+const CLIMATE_MODE_CONFIGS = [
+  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
+  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
+  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
+  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
+] as const;
+
 // Used to recover the underlying entity_id from a legend dataset id.
 // Kept in sync with the suffixes appended at dataset construction below
 // for climate / water_heater / humidifier multi-attribute charts.
@@ -136,14 +147,6 @@ export class StateHistoryChartLine extends LitElement {
      this.hass.config
    );
    const datapoints: Record<string, any>[] = [];
-    // Index the hovered points by series so the per-dataset lookup below is
-    // O(1) instead of scanning `params` for every dataset on each mouse move.
-    const paramsBySeriesIndex = new Map<number, Record<string, any>>();
-    for (const p of params) {
-      if (!paramsBySeriesIndex.has(p.seriesIndex)) {
-        paramsBySeriesIndex.set(p.seriesIndex, p);
-      }
-    }
    this._chartData.forEach((dataset, index) => {
      if (
        dataset.tooltip?.show === false ||
@@ -151,7 +154,9 @@ export class StateHistoryChartLine extends LitElement {
      ) {
        return;
      }
-      const param = paramsBySeriesIndex.get(index);
+      const param = params.find(
+        (p: Record<string, any>) => p.seriesIndex === index
+      );
      if (param) {
        datapoints.push(param);
        return;
@@ -415,32 +420,445 @@ export class StateHistoryChartLine extends LitElement {
  }

  private _generateData() {
-    if (this.data.length === 0) {
+    let colorIndex = 0;
+    const computedStyles = getComputedStyle(this);
+    const entityStates = this.data;
+    const datasets: LineSeriesOption[] = [];
+    const entityIds: string[] = [];
+    const datasetToDataIndex: number[] = [];
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    const trackY = (v: number | null | undefined) => {
+      if (typeof v === "number" && Number.isFinite(v)) {
+        if (v < yMin) yMin = v;
+        if (v > yMax) yMax = v;
+      }
+    };
+    if (entityStates.length === 0) {
      return;
    }

    this._chartTime = new Date();
+    const endTime = this.endTime;
+    const names = this.names || {};
+    const colors = this.colors || {};
+    entityStates.forEach((states, dataIdx) => {
+      const domain = states.domain;
+      const name = names[states.entity_id] || states.name;
+      const color = colors[states.entity_id];
+      // array containing [value1, value2, etc]
+      let prevValues: any[] | null = null;

-    const data = generateStateHistoryChartLineData({
-      hass: this.hass,
-      data: this.data,
-      endTime: this.endTime,
-      names: this.names,
-      colors: this.colors,
-      showNames: this.showNames,
-      computedStyles: getComputedStyle(this),
-      now: new Date(),
+      const data: LineSeriesOption[] = [];
+
+      const pushData = (timestamp: Date, datavalues: any[] | null) => {
+        if (!datavalues) return;
+        if (timestamp > endTime) {
+          // Drop data points that are after the requested endTime. This could happen if
+          // endTime is "now" and client time is not in sync with server time.
+          return;
+        }
+        data.forEach((d, i) => {
+          if (datavalues[i] === null && prevValues && prevValues[i] !== null) {
+            // null data values show up as gaps in the chart.
+            // If the current value for the dataset is null and the previous
+            // value of the data set is not null, then add an 'end' point
+            // to the chart for the previous value. Otherwise the gap will
+            // be too big. It will go from the start of the previous data
+            // value until the start of the next data value.
+            d.data!.push([timestamp, prevValues[i]]);
+          }
+          d.data!.push([timestamp, datavalues[i]]);
+          trackY(datavalues[i]);
+        });
+        prevValues = datavalues;
+      };
+
+      const addDataSet = (
+        id: string,
+        nameY: string,
+        clr?: string,
+        fill = false
+      ) => {
+        if (!clr) {
+          clr = getGraphColorByIndex(colorIndex, computedStyles);
+          colorIndex++;
+        }
+        data.push({
+          id,
+          data: [],
+          type: "line",
+          cursor: "default",
+          name: nameY,
+          color: clr,
+          symbol: "circle",
+          symbolSize: 1,
+          step: "end",
+          sampling: "minmax",
+          animationDurationUpdate: 0,
+          lineStyle: {
+            width: fill ? 0 : 1.5,
+          },
+          areaStyle: fill
+            ? {
+                color: clr + "7F",
+              }
+            : undefined,
+          tooltip: {
+            show: !fill,
+          },
+        });
+        entityIds.push(states.entity_id);
+        datasetToDataIndex.push(dataIdx);
+      };
+
+      if (
+        domain === "thermostat" ||
+        domain === "climate" ||
+        domain === "water_heater"
+      ) {
+        const hasHvacAction = states.states.some(
+          (entityState) => entityState.attributes?.hvac_action
+        );
+
+        const activeModes = CLIMATE_MODE_CONFIGS.map(
+          ({ mode, action, cssVar }) => {
+            const isActive =
+              domain === "climate" && hasHvacAction
+                ? (entityState: LineChartState) =>
+                    CLIMATE_HVAC_ACTION_TO_MODE[
+                      entityState.attributes?.hvac_action
+                    ] === mode
+                : (entityState: LineChartState) => entityState.state === mode;
+            return { action, cssVar, isActive };
+          }
+        ).filter(({ isActive }) => states.states.some(isActive));
+        // We differentiate between thermostats that have a target temperature
+        // range versus ones that have just a target temperature
+
+        // Using step chart by step-before so manually interpolation not needed.
+        const hasTargetRange = states.states.some(
+          (entityState) =>
+            entityState.attributes &&
+            entityState.attributes.target_temp_high !==
+              entityState.attributes.target_temp_low
+        );
+        addDataSet(
+          states.entity_id + "-current_temperature",
+          this.showNames
+            ? this.hass.localize("ui.card.climate.current_temperature", {
+                name: name,
+              })
+            : this.hass.localize(
+                "component.climate.entity_component._.state_attributes.current_temperature.name"
+              )
+        );
+        for (const { action, cssVar } of activeModes) {
+          addDataSet(
+            `${states.entity_id}-${action}`,
+            this.showNames
+              ? this.hass.localize(`ui.card.climate.${action}`, {
+                  name: name,
+                })
+              : this.hass.localize(
+                  `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
+                ),
+            computedStyles.getPropertyValue(cssVar),
+            true
+          );
+        }
+
+        if (hasTargetRange) {
+          addDataSet(
+            states.entity_id + "-target_temperature_mode",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
+                  name: name,
+                  mode: this.hass.localize("ui.card.climate.high"),
+                })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.target_temp_high.name"
+                )
+          );
+          addDataSet(
+            states.entity_id + "-target_temperature_mode_low",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
+                  name: name,
+                  mode: this.hass.localize("ui.card.climate.low"),
+                })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.target_temp_low.name"
+                )
+          );
+        } else {
+          addDataSet(
+            states.entity_id + "-target_temperature",
+            this.showNames
+              ? this.hass.localize(
+                  "ui.card.climate.target_temperature_entity",
+                  {
+                    name: name,
+                  }
+                )
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.temperature.name"
+                )
+          );
+        }
+
+        states.states.forEach((entityState) => {
+          if (!entityState.attributes) return;
+          const curTemp = safeParseFloat(
+            entityState.attributes.current_temperature
+          );
+          const series = [curTemp];
+          for (const { isActive } of activeModes) {
+            series.push(isActive(entityState) ? curTemp : null);
+          }
+          if (hasTargetRange) {
+            const targetHigh = safeParseFloat(
+              entityState.attributes.target_temp_high
+            );
+            const targetLow = safeParseFloat(
+              entityState.attributes.target_temp_low
+            );
+            series.push(targetHigh, targetLow);
+            pushData(new Date(entityState.last_changed), series);
+          } else {
+            const target = safeParseFloat(entityState.attributes.temperature);
+            series.push(target);
+            pushData(new Date(entityState.last_changed), series);
+          }
+        });
+      } else if (domain === "humidifier") {
+        const hasAction = states.states.some(
+          (entityState) => entityState.attributes?.action
+        );
+        const hasCurrent = states.states.some(
+          (entityState) => entityState.attributes?.current_humidity
+        );
+
+        const hasHumidifying =
+          hasAction &&
+          states.states.some(
+            (entityState: LineChartState) =>
+              entityState.attributes?.action === "humidifying"
+          );
+        const hasDrying =
+          hasAction &&
+          states.states.some(
+            (entityState: LineChartState) =>
+              entityState.attributes?.action === "drying"
+          );
+
+        addDataSet(
+          states.entity_id + "-target_humidity",
+          this.showNames
+            ? this.hass.localize("ui.card.humidifier.target_humidity_entity", {
+                name: name,
+              })
+            : this.hass.localize(
+                "component.humidifier.entity_component._.state_attributes.humidity.name"
+              )
+        );
+
+        if (hasCurrent) {
+          addDataSet(
+            states.entity_id + "-current_humidity",
+            this.showNames
+              ? this.hass.localize(
+                  "ui.card.humidifier.current_humidity_entity",
+                  {
+                    name: name,
+                  }
+                )
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.current_humidity.name"
+                )
+          );
+        }
+
+        // If action attribute is available, we used it to shade the area below the humidity.
+        // If action attribute is not available, we shade the area when the device is on
+        if (hasHumidifying) {
+          addDataSet(
+            states.entity_id + "-humidifying",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.humidifying", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.action.state.humidifying"
+                ),
+            computedStyles.getPropertyValue("--state-humidifier-on-color"),
+            true
+          );
+        } else if (hasDrying) {
+          addDataSet(
+            states.entity_id + "-drying",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.drying", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.action.state.drying"
+                ),
+            computedStyles.getPropertyValue("--state-humidifier-on-color"),
+            true
+          );
+        } else {
+          addDataSet(
+            states.entity_id + "-on",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.on_entity", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state.on"
+                ),
+            undefined,
+            true
+          );
+        }
+
+        states.states.forEach((entityState) => {
+          if (!entityState.attributes) return;
+          const target = safeParseFloat(entityState.attributes.humidity);
+          // If the current humidity is not available, then we fill up to the target humidity
+          const current = hasCurrent
+            ? safeParseFloat(entityState.attributes?.current_humidity)
+            : target;
+          const series = [target];
+
+          if (hasCurrent) {
+            series.push(current);
+          }
+
+          if (hasHumidifying) {
+            series.push(
+              entityState.attributes?.action === "humidifying" ? current : null
+            );
+          } else if (hasDrying) {
+            series.push(
+              entityState.attributes?.action === "drying" ? current : null
+            );
+          } else {
+            series.push(entityState.state === "on" ? current : null);
+          }
+          pushData(new Date(entityState.last_changed), series);
+        });
+      } else {
+        addDataSet(states.entity_id, name, color);
+
+        let lastValue: number;
+        let lastDate: Date;
+        let lastNullDate: Date | null = null;
+
+        // Process chart data.
+        // When state is `unknown`, calculate the value and break the line.
+        const processData = (entityState: LineChartState) => {
+          const value = safeParseFloat(entityState.state);
+          const date = new Date(entityState.last_changed);
+          if (value !== null && lastNullDate) {
+            const dateTime = date.getTime();
+            const lastNullDateTime = lastNullDate.getTime();
+            const lastDateTime = lastDate?.getTime();
+            const tmpValue =
+              (value - lastValue) *
+                ((lastNullDateTime - lastDateTime) /
+                  (dateTime - lastDateTime)) +
+              lastValue;
+            pushData(lastNullDate, [tmpValue]);
+            pushData(new Date(lastNullDateTime + 1), [null]);
+            pushData(date, [value]);
+            lastDate = date;
+            lastValue = value;
+            lastNullDate = null;
+          } else if (value !== null && lastNullDate === null) {
+            pushData(date, [value]);
+            lastDate = date;
+            lastValue = value;
+          } else if (
+            value === null &&
+            lastNullDate === null &&
+            lastValue !== undefined
+          ) {
+            lastNullDate = date;
+          }
+        };
+
+        if (states.statistics) {
+          const stopTime =
+            !states.states || states.states.length === 0
+              ? 0
+              : states.states[0].last_changed;
+          for (const statistic of states.statistics) {
+            if (stopTime && statistic.last_changed >= stopTime) {
+              break;
+            }
+            processData(statistic);
+          }
+        }
+        states.states.forEach((entityState) => {
+          processData(entityState);
+        });
+        if (lastNullDate !== null) {
+          pushData(lastNullDate, [null]);
+        }
+      }
+
+      // Add an entry for final values
+      pushData(endTime, prevValues);
+
+      // For sensors, append current state if viewing recent data
+      const now = new Date();
+      // allow 1s of leeway for "now"
+      const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
+      if (domain === "sensor" && isUpToNow && data.length === 1) {
+        const stateObj = this.hass.states[states.entity_id];
+        const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
+        if (currentValue !== null) {
+          data[0].data!.push([now, currentValue]);
+          trackY(currentValue);
+        }
+      }
+
+      // Concat two arrays
+      Array.prototype.push.apply(datasets, data);
    });

-    if (!data) {
-      return;
-    }
-
-    this._yAxisFractionDigits = data.yAxisFractionDigits;
-    this._chartData = data.datasets;
-    this._entityIds = data.entityIds;
-    this._datasetToDataIndex = data.datasetToDataIndex;
-    this._visualMap = data.visualMap;
+    this._yAxisFractionDigits = computeYAxisFractionDigits(yMin, yMax);
+    this._chartData = datasets;
+    this._entityIds = entityIds;
+    this._datasetToDataIndex = datasetToDataIndex;
+    const visualMap: VisualMapComponentOption[] = [];
+    this._chartData.forEach((_, seriesIndex) => {
+      const dataIndex = this._datasetToDataIndex[seriesIndex];
+      const data = this.data[dataIndex];
+      if (!data.statistics || data.statistics.length === 0) {
+        return;
+      }
+      // render stat data with a slightly transparent line
+      const firstStateTS =
+        data.states[0]?.last_changed ?? this.endTime.getTime();
+      visualMap.push({
+        show: false,
+        seriesIndex,
+        dimension: 0,
+        pieces: [
+          {
+            max: firstStateTS - 0.01,
+            colorAlpha: 0.5,
+          },
+          {
+            min: firstStateTS,
+            colorAlpha: 1,
+          },
+        ],
+      });
+    });
+    this._visualMap = visualMap.length > 0 ? visualMap : undefined;
  }

  private _formatYAxisLabel = (value: number) => {
@@ -1,465 +0,0 @@
-import type {
-  BarSeriesOption,
-  LineSeriesOption,
-  ZRColor,
-} from "echarts/types/dist/shared";
-import { getGraphColorByIndex } from "../../common/color/colors";
-import type {
-  Statistics,
-  StatisticsMetaData,
-  StatisticType,
-} from "../../data/recorder";
-import {
-  getDisplayUnit,
-  getStatisticLabel,
-  isExternalStatistic,
-  statisticsHaveType,
-} from "../../data/recorder";
-import type { HomeAssistant } from "../../types";
-import { fillDataGapsAndRoundCaps } from "./round-caps";
-import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
-
-export interface StatisticsChartLegendItem {
-  id: string;
-  name: string;
-  color?: ZRColor;
-  borderColor?: ZRColor;
-  noLabelClick?: boolean;
-}
-
-export interface StatisticsChartDataParams {
-  hass: HomeAssistant;
-  statisticsData: Statistics;
-  statisticsMetaData: Record<string, StatisticsMetaData>;
-  names?: Record<string, string>;
-  colors?: Record<string, string | undefined>;
-  unit?: string;
-  endTime?: Date;
-  statTypes: StatisticType[];
-  chartType: "line" | "line-stack" | "bar" | "bar-stack";
-  period?: string;
-  hideLegend: boolean;
-  hiddenStats: ReadonlySet<string>;
-  computedStyle: CSSStyleDeclaration;
-  now: Date;
-}
-
-export interface StatisticsChartData {
-  datasets: (LineSeriesOption | BarSeriesOption)[];
-  legendData: StatisticsChartLegendItem[];
-  statisticIds: string[];
-  /** Chart unit, inferred from statistics metadata when not set explicitly */
-  unit?: string;
-  yAxisFractionDigits: number;
-}
-
-/**
- * Transforms raw statistics into ECharts series for `statistics-chart`.
- * Pure data processing: all environment inputs (current time, theme style,
- * hass) are injected so the transform is deterministic and benchmarkable.
- */
-export function generateStatisticsChartData(
-  params: StatisticsChartDataParams
-): StatisticsChartData | undefined {
-  const { hass, statisticsMetaData, computedStyle, now, hiddenStats } = params;
-
-  let colorIndex = 0;
-  const chartType = params.chartType.startsWith("line") ? "line" : "bar";
-  const chartStacked = params.chartType.endsWith("stack");
-  const statisticsData = Object.entries(params.statisticsData);
-  const totalDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
-  let yMin = Infinity;
-  let yMax = -Infinity;
-  const trackY = (v: number | null | undefined) => {
-    if (typeof v === "number" && Number.isFinite(v)) {
-      if (v < yMin) yMin = v;
-      if (v > yMax) yMax = v;
-    }
-  };
-  const legendData: StatisticsChartLegendItem[] = [];
-  const statisticIds: string[] = [];
-  let endTime: Date;
-
-  if (statisticsData.length === 0) {
-    return undefined;
-  }
-
-  endTime =
-    params.endTime ||
-    // Get the highest date from the last date of each statistic
-    new Date(
-      Math.max(
-        ...statisticsData.map(([_, stats]) =>
-          new Date(stats[stats.length - 1].start).getTime()
-        )
-      )
-    );
-
-  if (endTime > now) {
-    endTime = now;
-  }
-
-  // Check if we need to display most recent data. Allow 10m of leeway for "now",
-  // because stats are 5 minute aggregated.
-  // Use same now point for all statistics even if processing time means the
-  // state value is actually from a slightly later time. Otherwise the points
-  // end up separated slightly and disappear from the tooltips.
-  const displayCurrentState = now.getTime() - endTime.getTime() <= 600000;
-
-  // Try to determine chart unit if it has not already been set explicitly
-  let unit = params.unit;
-  if (!unit) {
-    let inferredUnit: string | undefined | null;
-    statisticsData.forEach(([statistic_id, _stats]) => {
-      const meta = statisticsMetaData?.[statistic_id];
-      const statisticUnit = getDisplayUnit(hass, statistic_id, meta);
-      if (inferredUnit === undefined) {
-        inferredUnit = statisticUnit;
-      } else if (inferredUnit !== null && inferredUnit !== statisticUnit) {
-        // Clear unit if not all statistics have same unit
-        inferredUnit = null;
-      }
-    });
-    if (inferredUnit) {
-      unit = inferredUnit;
-    }
-  }
-
-  const names = params.names || {};
-  const colors = params.colors || {};
-  statisticsData.forEach(([statistic_id, stats]) => {
-    const meta = statisticsMetaData?.[statistic_id];
-    let name = names[statistic_id];
-    if (name === undefined) {
-      name = getStatisticLabel(hass, statistic_id, meta);
-    }
-
-    // array containing [value1, value2, etc]
-    let prevValues: (number | null)[][] | null = null;
-    let prevEndTime: Date | undefined;
-
-    // The datasets for the current statistic
-    const statDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
-    const statLegendData: StatisticsChartLegendItem[] = [];
-
-    // Place bars at centre of their specified time range if this is a bar chart
-    // and the period is 5minute or hour.
-    const centerBars =
-      chartType === "bar" &&
-      (params.period === "5minute" || params.period === "hour");
-
-    const pushData = (
-      start: Date, // Data point start time
-      end: Date, // Data point end time
-      limit: Date, // Limit for end time (e.g. now)
-      dataValues: (number | null)[][]
-    ) => {
-      if (!dataValues.length) return;
-      // Limit for time range is lesser of overall limit and data point end
-      limit = end.getTime() < limit.getTime() ? end : limit;
-      if (start.getTime() > limit.getTime()) {
-        // Drop data points that are after the requested endTime. This could happen if
-        // endTime is "now" and client time is not in sync with server time.
-        return;
-      }
-      const isLineChart = chartType === "line";
-      // For bar charts, optionally center the bar within its time range. The
-      // centered time is shared by every series of this data point.
-      const barTime =
-        !isLineChart && centerBars
-          ? new Date((start.getTime() + end.getTime()) / 2)
-          : start;
-      // Whether a gap needs to be drawn before this data point (line charts).
-      const drawGap =
-        isLineChart &&
-        !!prevEndTime &&
-        !!prevValues &&
-        prevEndTime.getTime() !== start.getTime();
-      for (let i = 0; i < statDataSets.length; i++) {
-        const d = statDataSets[i];
-        const dataValue = dataValues[i];
-        if (isLineChart) {
-          if (drawGap) {
-            // if the end of the previous data doesn't match the start of the current data,
-            // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push([prevEndTime!, ...prevValues![i]!]);
-            d.data!.push([prevEndTime!, null]);
-          }
-          d.data!.push([start, ...dataValue!]);
-          // For band-top rows dataValues[i] is [diff, top]; the actual Y is
-          // the last element. For regular rows it's [value]. Same call works.
-          trackY(dataValue[dataValue.length - 1]);
-        } else {
-          // Data value should always be a scalar for bar charts. Pass in
-          // real start time as extra value to allow formatting tooltip.
-          d.data!.push([barTime, dataValue[0]!, start, end]);
-          trackY(dataValue[0]);
-        }
-      }
-      prevValues = dataValues;
-      prevEndTime = limit;
-    };
-
-    let color = colors[statistic_id];
-    if (color === undefined) {
-      color = getGraphColorByIndex(colorIndex, computedStyle);
-      colorIndex++;
-    }
-
-    const statTypes: StatisticType[] = [];
-
-    const hasMean =
-      params.statTypes.includes("mean") && statisticsHaveType(stats, "mean");
-    const hasMax =
-      params.statTypes.includes("max") && statisticsHaveType(stats, "max");
-    const hasMin =
-      params.statTypes.includes("min") && statisticsHaveType(stats, "min");
-    const drawBands =
-      !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
-
-    const hasState = params.statTypes.includes("state");
-
-    const bandTop = hasMax ? "max" : "mean";
-    const bandBottom = hasMin ? "min" : "mean";
-
-    const sortedTypes = drawBands
-      ? [...params.statTypes].sort((a, b) => {
-          if (a === "min" || b === "max") {
-            return -1;
-          }
-          if (a === "max" || b === "min") {
-            return +1;
-          }
-          return 0;
-        })
-      : params.statTypes;
-
-    let displayedLegend = false;
-    sortedTypes.forEach((type) => {
-      if (statisticsHaveType(stats, type)) {
-        const band = drawBands && (type === bandTop || type === bandBottom);
-        statTypes.push(type);
-        const borderColor =
-          (band && hasMin && hasMax && hasMean) ||
-          (hasState && ["change", "sum"].includes(type))
-            ? color + (params.hideLegend ? "00" : "7F")
-            : color;
-        const backgroundColor = band ? color + "3F" : color + "7F";
-        const series: LineSeriesOption | BarSeriesOption = {
-          id: `${statistic_id}-${type}`,
-          type: chartType,
-          smooth: chartType === "line" ? 0.4 : false,
-          cursor: "default",
-          data: [],
-          name: name
-            ? `${name} (${hass.localize(
-                `ui.components.statistics_charts.statistic_types.${type}`
-              )})`
-            : hass.localize(
-                `ui.components.statistics_charts.statistic_types.${type}`
-              ),
-          symbol: "none",
-          // minmax sampling operates independently per series, breaking stacking alignment
-          // https://github.com/apache/echarts/issues/11879
-          sampling: band && drawBands ? "lttb" : "minmax",
-          animationDurationUpdate: 0,
-          lineStyle: {
-            width: 1.5,
-          },
-          itemStyle:
-            chartType === "bar"
-              ? {
-                  borderColor,
-                  borderWidth: 1.5,
-                }
-              : undefined,
-          color: chartType === "bar" ? backgroundColor : borderColor,
-        };
-        if (chartStacked) {
-          series.stack = `band-stacked`;
-          series.stackStrategy = "samesign";
-          if (chartType === "line") {
-            (series as LineSeriesOption).areaStyle = {
-              color: color + "3F",
-            };
-          }
-        } else if (band && chartType === "line") {
-          series.stack = `band-${statistic_id}`;
-          series.stackStrategy = "all";
-          if (hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
-            // changing the stackOrder forces echarts to render the stacked series that are not hidden #28472
-            series.stackOrder = "seriesDesc";
-            (series as LineSeriesOption).areaStyle = undefined;
-          } else {
-            series.stackOrder = "seriesAsc";
-            if (type === bandTop) {
-              (series as LineSeriesOption).areaStyle = {
-                color: color + "3F",
-              };
-            }
-          }
-        }
-        if (!params.hideLegend) {
-          const showLegend = hasMean
-            ? type === "mean"
-            : displayedLegend === false;
-          if (showLegend) {
-            statLegendData.push({
-              id: statistic_id,
-              name,
-              color: series.color as ZRColor,
-              borderColor: series.itemStyle?.borderColor,
-              noLabelClick: isExternalStatistic(statistic_id),
-            });
-          }
-          displayedLegend = displayedLegend || showLegend;
-        }
-        statDataSets.push(series);
-        statisticIds.push(statistic_id);
-      }
-    });
-
-    let prevStart: number | null = null;
-    // Process chart data.
-    let firstSum: number | null | undefined = null;
-
-    // The per-type branch decisions in the inner loop are invariant across all
-    // stats of this statistic, so classify each type once up front.
-    // kind: 0 = sum (cumulative diff), 1 = band-top ([diff, top]), 2 = plain.
-    const SUM_KIND = 0;
-    const BAND_KIND = 1;
-    const PLAIN_KIND = 2;
-    const bandBottomHidden = hiddenStats.has(`${statistic_id}-${bandBottom}`);
-    const isLine = chartType === "line";
-    const typeKinds = statTypes.map((type) => {
-      if (type === "sum") {
-        return SUM_KIND;
-      }
-      if (type === bandTop && isLine && drawBands && !bandBottomHidden) {
-        return BAND_KIND;
-      }
-      return PLAIN_KIND;
-    });
-    const numTypes = statTypes.length;
-    const statHidden = hiddenStats.has(statistic_id);
-
-    for (const stat of stats) {
-      // Skip consecutive stats that share the same start time. Compare the raw
-      // numeric start so the dedup actually fires (a `Date` reference compare
-      // never would) and so we skip allocating a `Date` on the dropped path.
-      if (prevStart === stat.start) {
-        continue;
-      }
-      prevStart = stat.start;
-      const startDate = new Date(stat.start);
-      const endDate = new Date(stat.end);
-      const dataValues: (number | null)[][] = [];
-      for (let t = 0; t < numTypes; t++) {
-        const type = statTypes[t];
-        const val: (number | null)[] = [];
-        switch (typeKinds[t]) {
-          case SUM_KIND:
-            if (firstSum === null || firstSum === undefined) {
-              val.push(0);
-              firstSum = stat.sum;
-            } else {
-              val.push((stat.sum || 0) - firstSum);
-            }
-            break;
-          case BAND_KIND: {
-            const top = stat[bandTop] || 0;
-            val.push(Math.abs(top - (stat[bandBottom] || 0)));
-            val.push(top);
-            break;
-          }
-          default:
-            val.push(stat[type] ?? null);
-        }
-        dataValues.push(val);
-      }
-      if (!statHidden) {
-        pushData(startDate, endDate, endTime, dataValues);
-      }
-    }
-
-    // For line charts, close out the last stat segment at prevEndTime
-    const lastEndTime = prevEndTime;
-    const lastValues = prevValues;
-    if (chartType === "line" && lastEndTime && lastValues) {
-      statDataSets.forEach((d, i) => {
-        d.data!.push([lastEndTime, ...lastValues[i]!]);
-      });
-    }
-
-    // Show current state if required, and units match (or are unknown)
-    const statisticUnit = getDisplayUnit(hass, statistic_id, meta);
-    if (
-      displayCurrentState &&
-      !chartStacked &&
-      (!unit || !statisticUnit || unit === statisticUnit)
-    ) {
-      // Skip external statistics
-      if (!isExternalStatistic(statistic_id)) {
-        const stateObj = hass.states[statistic_id];
-        if (stateObj) {
-          const currentValue = parseFloat(stateObj.state);
-          if (isFinite(currentValue) && !hiddenStats.has(statistic_id)) {
-            // Then push the current state at now
-            statTypes.forEach((type, i) => {
-              if (type === "sum" || type === "change") {
-                // Skip cumulative types - need special calculation.
-                return;
-              }
-              const val: (number | null)[] = [];
-              if (
-                type === bandTop &&
-                chartType === "line" &&
-                drawBands &&
-                !hiddenStats.has(`${statistic_id}-${bandBottom}`)
-              ) {
-                // For band chart, current value is both min and max, so diff is 0
-                val.push(0);
-                val.push(currentValue);
-              } else {
-                val.push(currentValue);
-              }
-              statDataSets[i].data!.push([now, ...val]);
-              trackY(val[val.length - 1]);
-            });
-          }
-        }
-      }
-    }
-
-    // Concat two arrays
-    Array.prototype.push.apply(totalDataSets, statDataSets);
-    Array.prototype.push.apply(legendData, statLegendData);
-  });
-
-  if (chartType === "bar") {
-    fillDataGapsAndRoundCaps(totalDataSets as BarSeriesOption[], chartStacked);
-  }
-
-  legendData.forEach(({ id, name, color, borderColor }) => {
-    // Add an empty series for the legend
-    totalDataSets.push({
-      id: id,
-      name: name,
-      color,
-      itemStyle: {
-        borderColor,
-      },
-      type: chartType,
-      data: [],
-      xAxisIndex: 1,
-    });
-  });
-
-  return {
-    datasets: totalDataSets,
-    legendData,
-    statisticIds,
-    unit,
-    yAxisFractionDigits: computeYAxisFractionDigits(yMin, yMax),
-  };
-}
@@ -1,12 +1,14 @@
 import type {
  BarSeriesOption,
  LineSeriesOption,
+  ZRColor,
 } from "echarts/types/dist/shared";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -25,7 +27,13 @@ import type {
  StatisticsMetaData,
  StatisticType,
 } from "../../data/recorder";
-import { getStatisticMetadata, isExternalStatistic } from "../../data/recorder";
+import {
+  getDisplayUnit,
+  getStatisticLabel,
+  getStatisticMetadata,
+  isExternalStatistic,
+  statisticsHaveType,
+} from "../../data/recorder";
 import type { HaECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
@@ -33,7 +41,8 @@ import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
-import { generateStatisticsChartData } from "./statistics-chart-data";
+import { fillDataGapsAndRoundCaps } from "./round-caps";
+import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";

 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
  mean: "mean",
@@ -494,35 +503,391 @@ export class StatisticsChart extends LitElement {
      this.metadata ||
      (await this._getStatisticsMetaData(Object.keys(this.statisticsData)));

-    const data = generateStatisticsChartData({
-      hass: this.hass,
-      statisticsData: this.statisticsData,
-      statisticsMetaData,
-      names: this.names,
-      colors: this.colors,
-      unit: this.unit,
-      endTime: this.endTime,
-      statTypes: this.statTypes,
-      chartType: this.chartType,
-      period: this.period,
-      hideLegend: this.hideLegend,
-      hiddenStats: this._hiddenStats,
-      computedStyle: this._computedStyle || getComputedStyle(this),
-      now: new Date(),
-    });
+    let colorIndex = 0;
+    const chartType = this.chartType.startsWith("line") ? "line" : "bar";
+    const chartStacked = this.chartType.endsWith("stack");
+    const statisticsData = Object.entries(this.statisticsData);
+    const totalDataSets: typeof this._chartData = [];
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    const trackY = (v: number | null | undefined) => {
+      if (typeof v === "number" && Number.isFinite(v)) {
+        if (v < yMin) yMin = v;
+        if (v > yMax) yMax = v;
+      }
+    };
+    const legendData: {
+      id: string;
+      name: string;
+      color?: ZRColor;
+      borderColor?: ZRColor;
+      noLabelClick?: boolean;
+    }[] = [];
+    const statisticIds: string[] = [];
+    let endTime: Date;

-    if (!data) {
+    if (statisticsData.length === 0) {
      return;
    }

-    this.unit = data.unit;
-    this._yAxisFractionDigits = data.yAxisFractionDigits;
-    this._chartData = data.datasets;
-    if (data.legendData.length !== this._legendData?.length) {
+    endTime =
+      this.endTime ||
+      // Get the highest date from the last date of each statistic
+      new Date(
+        Math.max(
+          ...statisticsData.map(([_, stats]) =>
+            new Date(stats[stats.length - 1].start).getTime()
+          )
+        )
+      );
+
+    if (endTime > new Date()) {
+      endTime = new Date();
+    }
+
+    // Check if we need to display most recent data. Allow 10m of leeway for "now",
+    // because stats are 5 minute aggregated.
+    // Use same now point for all statistics even if processing time means the
+    // state value is actually from a slightly later time. Otherwise the points
+    // end up separated slightly and disappear from the tooltips.
+    const now = new Date();
+    const displayCurrentState = now.getTime() - endTime.getTime() <= 600000;
+
+    // Try to determine chart unit if it has not already been set explicitly
+    if (!this.unit) {
+      let unit: string | undefined | null;
+      statisticsData.forEach(([statistic_id, _stats]) => {
+        const meta = statisticsMetaData?.[statistic_id];
+        const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
+        if (unit === undefined) {
+          unit = statisticUnit;
+        } else if (unit !== null && unit !== statisticUnit) {
+          // Clear unit if not all statistics have same unit
+          unit = null;
+        }
+      });
+      if (unit) {
+        this.unit = unit;
+      }
+    }
+
+    const names = this.names || {};
+    const colors = this.colors || {};
+    statisticsData.forEach(([statistic_id, stats]) => {
+      const meta = statisticsMetaData?.[statistic_id];
+      let name = names[statistic_id];
+      if (name === undefined) {
+        name = getStatisticLabel(this.hass, statistic_id, meta);
+      }
+
+      // array containing [value1, value2, etc]
+      let prevValues: (number | null)[][] | null = null;
+      let prevEndTime: Date | undefined;
+
+      // The datasets for the current statistic
+      const statDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
+      const statLegendData: typeof legendData = [];
+
+      // Place bars at centre of their specified time range if this is a bar chart
+      // and the period is 5minute or hour.
+      const centerBars =
+        chartType === "bar" &&
+        (this.period === "5minute" || this.period === "hour");
+
+      const pushData = (
+        start: Date, // Data point start time
+        end: Date, // Data point end time
+        limit: Date, // Limit for end time (e.g. now)
+        dataValues: (number | null)[][]
+      ) => {
+        if (!dataValues.length) return;
+        // Limit for time range is lesser of overall limit and data point end
+        limit = end.getTime() < limit.getTime() ? end : limit;
+        if (start.getTime() > limit.getTime()) {
+          // Drop data points that are after the requested endTime. This could happen if
+          // endTime is "now" and client time is not in sync with server time.
+          return;
+        }
+        statDataSets.forEach((d, i) => {
+          if (chartType === "line") {
+            if (
+              prevEndTime &&
+              prevValues &&
+              prevEndTime.getTime() !== start.getTime()
+            ) {
+              // if the end of the previous data doesn't match the start of the current data,
+              // we have to draw a gap so add a value at the end time, and then an empty value.
+              d.data!.push([prevEndTime, ...prevValues[i]!]);
+              d.data!.push([prevEndTime, null]);
+            }
+            d.data!.push([start, ...dataValues[i]!]);
+            // For band-top rows dataValues[i] is [diff, top]; the actual Y is
+            // the last element. For regular rows it's [value]. Same call works.
+            trackY(dataValues[i][dataValues[i].length - 1]);
+          } else {
+            let time = start;
+            if (centerBars) {
+              // If centering bars, set the time to the midpoint between start and end instead
+              // of the start time.
+              time = new Date((start.getTime() + end.getTime()) / 2);
+            }
+            // Data value should always be a scalar for bar charts. Pass in
+            // real start time as extra value to allow formatting tooltip.
+            d.data!.push([time, dataValues[i][0]!, start, end]);
+            trackY(dataValues[i][0]);
+          }
+        });
+        prevValues = dataValues;
+        prevEndTime = limit;
+      };
+
+      let color = colors[statistic_id];
+      if (color === undefined) {
+        color = getGraphColorByIndex(
+          colorIndex,
+          this._computedStyle || getComputedStyle(this)
+        );
+        colorIndex++;
+      }
+
+      const statTypes: this["statTypes"] = [];
+
+      const hasMean =
+        this.statTypes.includes("mean") && statisticsHaveType(stats, "mean");
+      const hasMax =
+        this.statTypes.includes("max") && statisticsHaveType(stats, "max");
+      const hasMin =
+        this.statTypes.includes("min") && statisticsHaveType(stats, "min");
+      const drawBands =
+        !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
+
+      const hasState = this.statTypes.includes("state");
+
+      const bandTop = hasMax ? "max" : "mean";
+      const bandBottom = hasMin ? "min" : "mean";
+
+      const sortedTypes = drawBands
+        ? [...this.statTypes].sort((a, b) => {
+            if (a === "min" || b === "max") {
+              return -1;
+            }
+            if (a === "max" || b === "min") {
+              return +1;
+            }
+            return 0;
+          })
+        : this.statTypes;
+
+      let displayedLegend = false;
+      sortedTypes.forEach((type) => {
+        if (statisticsHaveType(stats, type)) {
+          const band = drawBands && (type === bandTop || type === bandBottom);
+          statTypes.push(type);
+          const borderColor =
+            (band && hasMin && hasMax && hasMean) ||
+            (hasState && ["change", "sum"].includes(type))
+              ? color + (this.hideLegend ? "00" : "7F")
+              : color;
+          const backgroundColor = band ? color + "3F" : color + "7F";
+          const series: LineSeriesOption | BarSeriesOption = {
+            id: `${statistic_id}-${type}`,
+            type: chartType,
+            smooth: chartType === "line" ? 0.4 : false,
+            cursor: "default",
+            data: [],
+            name: name
+              ? `${name} (${this.hass.localize(
+                  `ui.components.statistics_charts.statistic_types.${type}`
+                )})`
+              : this.hass.localize(
+                  `ui.components.statistics_charts.statistic_types.${type}`
+                ),
+            symbol: "none",
+            // minmax sampling operates independently per series, breaking stacking alignment
+            // https://github.com/apache/echarts/issues/11879
+            sampling: band && drawBands ? "lttb" : "minmax",
+            animationDurationUpdate: 0,
+            lineStyle: {
+              width: 1.5,
+            },
+            itemStyle:
+              chartType === "bar"
+                ? {
+                    borderColor,
+                    borderWidth: 1.5,
+                  }
+                : undefined,
+            color: chartType === "bar" ? backgroundColor : borderColor,
+          };
+          if (chartStacked) {
+            series.stack = `band-stacked`;
+            series.stackStrategy = "samesign";
+            if (chartType === "line") {
+              (series as LineSeriesOption).areaStyle = {
+                color: color + "3F",
+              };
+            }
+          } else if (band && chartType === "line") {
+            series.stack = `band-${statistic_id}`;
+            series.stackStrategy = "all";
+            if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
+              // changing the stackOrder forces echarts to render the stacked series that are not hidden #28472
+              series.stackOrder = "seriesDesc";
+              (series as LineSeriesOption).areaStyle = undefined;
+            } else {
+              series.stackOrder = "seriesAsc";
+              if (type === bandTop) {
+                (series as LineSeriesOption).areaStyle = {
+                  color: color + "3F",
+                };
+              }
+            }
+          }
+          if (!this.hideLegend) {
+            const showLegend = hasMean
+              ? type === "mean"
+              : displayedLegend === false;
+            if (showLegend) {
+              statLegendData.push({
+                id: statistic_id,
+                name,
+                color: series.color as ZRColor,
+                borderColor: series.itemStyle?.borderColor,
+                noLabelClick: isExternalStatistic(statistic_id),
+              });
+            }
+            displayedLegend = displayedLegend || showLegend;
+          }
+          statDataSets.push(series);
+          statisticIds.push(statistic_id);
+        }
+      });
+
+      let prevDate: Date | null = null;
+      // Process chart data.
+      let firstSum: number | null | undefined = null;
+      stats.forEach((stat) => {
+        const startDate = new Date(stat.start);
+        const endDate = new Date(stat.end);
+        if (prevDate === startDate) {
+          return;
+        }
+        prevDate = startDate;
+        const dataValues: (number | null)[][] = [];
+        statTypes.forEach((type) => {
+          const val: (number | null)[] = [];
+          if (type === "sum") {
+            if (firstSum === null || firstSum === undefined) {
+              val.push(0);
+              firstSum = stat.sum;
+            } else {
+              val.push((stat.sum || 0) - firstSum);
+            }
+          } else if (
+            type === bandTop &&
+            chartType === "line" &&
+            drawBands &&
+            !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
+          ) {
+            const top = stat[bandTop] || 0;
+            val.push(Math.abs(top - (stat[bandBottom] || 0)));
+            val.push(top);
+          } else {
+            val.push(stat[type] ?? null);
+          }
+          dataValues.push(val);
+        });
+        if (!this._hiddenStats.has(statistic_id)) {
+          pushData(startDate, endDate, endTime, dataValues);
+        }
+      });
+
+      // For line charts, close out the last stat segment at prevEndTime
+      const lastEndTime = prevEndTime;
+      const lastValues = prevValues;
+      if (chartType === "line" && lastEndTime && lastValues) {
+        statDataSets.forEach((d, i) => {
+          d.data!.push([lastEndTime, ...lastValues[i]!]);
+        });
+      }
+
+      // Show current state if required, and units match (or are unknown)
+      const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
+      if (
+        displayCurrentState &&
+        !chartStacked &&
+        (!this.unit || !statisticUnit || this.unit === statisticUnit)
+      ) {
+        // Skip external statistics
+        if (!isExternalStatistic(statistic_id)) {
+          const stateObj = this.hass.states[statistic_id];
+          if (stateObj) {
+            const currentValue = parseFloat(stateObj.state);
+            if (
+              isFinite(currentValue) &&
+              !this._hiddenStats.has(statistic_id)
+            ) {
+              // Then push the current state at now
+              statTypes.forEach((type, i) => {
+                if (type === "sum" || type === "change") {
+                  // Skip cumulative types - need special calculation.
+                  return;
+                }
+                const val: (number | null)[] = [];
+                if (
+                  type === bandTop &&
+                  chartType === "line" &&
+                  drawBands &&
+                  !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
+                ) {
+                  // For band chart, current value is both min and max, so diff is 0
+                  val.push(0);
+                  val.push(currentValue);
+                } else {
+                  val.push(currentValue);
+                }
+                statDataSets[i].data!.push([now, ...val]);
+                trackY(val[val.length - 1]);
+              });
+            }
+          }
+        }
+      }
+
+      // Concat two arrays
+      Array.prototype.push.apply(totalDataSets, statDataSets);
+      Array.prototype.push.apply(legendData, statLegendData);
+    });
+
+    if (chartType === "bar") {
+      fillDataGapsAndRoundCaps(
+        totalDataSets as BarSeriesOption[],
+        chartStacked
+      );
+    }
+
+    legendData.forEach(({ id, name, color, borderColor }) => {
+      // Add an empty series for the legend
+      totalDataSets.push({
+        id: id,
+        name: name,
+        color,
+        itemStyle: {
+          borderColor,
+        },
+        type: chartType,
+        data: [],
+        xAxisIndex: 1,
+      });
+    });
+
+    this._yAxisFractionDigits = computeYAxisFractionDigits(yMin, yMax);
+    this._chartData = totalDataSets;
+    if (legendData.length !== this._legendData?.length) {
      // only update the legend if it has changed or it will trigger options update
      this._legendData =
-        data.legendData.length > 1
-          ? data.legendData.map(({ id, name, noLabelClick }) => ({
+        legendData.length > 1
+          ? legendData.map(({ id, name, noLabelClick }) => ({
              id,
              name,
              noLabelClick,
@@ -530,7 +895,7 @@ export class StatisticsChart extends LitElement {
          : // if there is only one entity, let the base chart handle the legend
            undefined;
    }
-    this._statisticIds = data.statisticIds;
+    this._statisticIds = statisticIds;
  }

  private _clampYAxis(value?: number | ((values: any) => number)) {
@@ -79,11 +79,9 @@ function computeTimelineEnumColor(
  const domain = computeStateDomain(stateObj);
  const states =
    FIXED_DOMAIN_STATES[domain] ||
-    ((domain === "sensor" && stateObj.attributes.device_class === "enum") ||
-    domain === "select" ||
-    domain === "input_select"
-      ? stateObj.attributes.options
-      : undefined) ||
+    (domain === "sensor" &&
+      stateObj.attributes.device_class === "enum" &&
+      stateObj.attributes.options) ||
    [];
  const idx = states.indexOf(state);
  if (idx === -1) {
@@ -215,16 +215,10 @@ export class HaDataTable extends LitElement {
    if (clear) {
      this._checkedRows = [];
    }
-    // Map + Set keep a large selection O(rows + ids) instead of O(rows × ids).
-    const rowLookup = new Map(
-      (this._filteredData || []).map((data) => [data[this.id], data])
-    );
-    const checkedRows = new Set(this._checkedRows);
    ids.forEach((id) => {
-      const row = rowLookup.get(id);
-      if (row?.selectable !== false && !checkedRows.has(id)) {
+      const row = this._filteredData?.find((data) => data[this.id] === id);
+      if (row?.selectable !== false && !this._checkedRows.includes(id)) {
        this._checkedRows.push(id);
-        checkedRows.add(id);
      }
    });
    this._lastSelectedRowId = null;
@@ -1,4 +1,3 @@
-import { consume } from "@lit/context";
 import {
  mdiAlertCircle,
  mdiChevronDown,
@@ -11,9 +10,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { supportsFeature } from "../common/entity/supports-feature";
-import type { LocalizeFunc } from "../common/translations/localize";
 import {
  runAssistPipeline,
  type AssistPipeline,
@@ -21,19 +18,10 @@ import {
  type ConversationChatLogToolResultDelta,
  type PipelineRunEvent,
 } from "../data/assist_pipeline";
-import {
-  configContext,
-  connectionContext,
-  statesContext,
-} from "../data/context";
 import { ConversationEntityFeature } from "../data/conversation";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { haStyleScrollbar } from "../resources/styles";
-import type {
-  HomeAssistant,
-  HomeAssistantConfig,
-  HomeAssistantConnection,
-} from "../types";
+import type { HomeAssistant } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
@@ -59,6 +47,8 @@ interface AssistMessage {

@customElement("ha-assist-chat")
 export class HaAssistChat extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
  @property({ attribute: false }) public pipeline?: AssistPipeline;

  @property({ type: Boolean, attribute: "disable-speech" })
@@ -81,22 +71,6 @@ export class HaAssistChat extends LitElement {

  @state() private _processing = false;

-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  private _states!: HomeAssistant["states"];
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: HomeAssistantConfig;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection!: HomeAssistantConnection;
-
  private _conversationId: string | null = null;

  private _audioRecorder?: AudioRecorder;
@@ -112,7 +86,7 @@ export class HaAssistChat extends LitElement {
      this._conversation = [
        {
          who: "hass",
-          text: this._localize("ui.dialogs.voice_command.how_can_i_help"),
+          text: this.hass.localize("ui.dialogs.voice_command.how_can_i_help"),
          thinking: "",
          tool_calls: {},
        },
@@ -150,9 +124,9 @@ export class HaAssistChat extends LitElement {
    const controlHA = !this.pipeline
      ? false
      : this.pipeline.prefer_local_intents ||
-        (this._states[this.pipeline.conversation_engine]
+        (this.hass.states[this.pipeline.conversation_engine]
          ? supportsFeature(
-              this._states[this.pipeline.conversation_engine],
+              this.hass.states[this.pipeline.conversation_engine],
              ConversationEntityFeature.CONTROL
            )
          : true);
@@ -165,7 +139,7 @@ export class HaAssistChat extends LitElement {
          ? nothing
          : html`
              <ha-alert>
-                ${this._localize(
+                ${this.hass.localize(
                  "ui.dialogs.voice_command.conversation_no_control"
                )}
              </ha-alert>
@@ -206,7 +180,7 @@ export class HaAssistChat extends LitElement {
                                  .path=${mdiCommentProcessingOutline}
                                ></ha-svg-icon>
                                <span class="thinking-label">
-                                  ${this._localize(
+                                  ${this.hass.localize(
                                    "ui.dialogs.voice_command.show_details"
                                  )}
                                </span>
@@ -277,7 +251,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
          id="message-input"
          @keyup=${this._handleKeyUp}
          @input=${this._handleInput}
-          .label=${this._localize(`ui.dialogs.voice_command.input_label`)}
+          .label=${this.hass.localize(`ui.dialogs.voice_command.input_label`)}
        >
          <div slot="end">
            ${this._showSendButton || !supportsSTT
@@ -287,7 +261,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
                    .path=${mdiSend}
                    @click=${this._handleSendMessage}
                    .disabled=${this._processing}
-                    .label=${this._localize(
+                    .label=${this.hass.localize(
                      "ui.dialogs.voice_command.send_text"
                    )}
                  >
@@ -308,7 +282,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
                      .path=${mdiMicrophone}
                      @click=${this._handleListeningButton}
                      .disabled=${this._processing}
-                      .label=${this._localize(
+                      .label=${this.hass.localize(
                        "ui.dialogs.voice_command.start_listening"
                      )}
                    >
@@ -417,21 +391,21 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
      text:
        // New lines matter for messages
        // prettier-ignore
-        html`${this._localize(
+        html`${this.hass.localize(
          "ui.dialogs.voice_command.not_supported_microphone_browser"
        )}

-        ${this._localize(
+        ${this.hass.localize(
          "ui.dialogs.voice_command.not_supported_microphone_documentation",
          {
            documentation_link: html`<a
                target="_blank"
                rel="noopener noreferrer"
                href=${documentationUrl(
-                  this._config,
+                  this.hass,
                  "/docs/configuration/securing/#remote-access"
                )}
-              >${this._localize(
+              >${this.hass.localize(
                  "ui.dialogs.voice_command.not_supported_microphone_documentation_link"
                )}</a>`,
          }
@@ -469,7 +443,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre

    try {
      const unsub = await runAssistPipeline(
-        this._connection,
+        this.hass,
        (event: PipelineRunEvent) => {
          if (event.type === "run-start") {
            this._stt_binary_handler_id =
@@ -565,7 +539,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
  }

  private _sendAudioChunk(chunk: Int16Array) {
-    this._connection.connection.socket!.binaryType = "arraybuffer";
+    this.hass.connection.socket!.binaryType = "arraybuffer";

    // eslint-disable-next-line eqeqeq
    if (this._stt_binary_handler_id == undefined) {
@@ -576,7 +550,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
    data[0] = this._stt_binary_handler_id;
    data.set(new Uint8Array(chunk.buffer), 1);

-    this._connection.connection.socket!.send(data);
+    this.hass.connection.socket!.send(data);
  }

  private _unloadAudio = () => {
@@ -596,7 +570,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
    hassMessageProcesser.addMessage();
    try {
      const unsub = await runAssistPipeline(
-        this._connection,
+        this.hass,
        (event) => {
          if (event.type.startsWith("intent-")) {
            hassMessageProcesser.processEvent(event);
@@ -619,7 +593,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
      );
    } catch {
      hassMessageProcesser.setError(
-        this._localize("ui.dialogs.voice_command.error")
+        this.hass.localize("ui.dialogs.voice_command.error")
      );
    } finally {
      this._processing = false;
@@ -1,20 +1,16 @@
-import { consume } from "@lit/context";
-import type { ContextType } from "@lit/context";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import {
-  configContext,
-  connectionContext,
-  entitiesContext,
-} from "../data/context";
 import { attributeIcon } from "../data/icons";
+import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";

@customElement("ha-attribute-icon")
 export class HaAttributeIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
  @property({ attribute: false }) public stateObj?: HassEntity;

  @property() public attribute?: string;
@@ -23,18 +19,6 @@ export class HaAttributeIcon extends LitElement {

  @property() public icon?: string;

-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config?: ContextType<typeof configContext>;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection?: ContextType<typeof connectionContext>;
-
-  @state()
-  @consume({ context: entitiesContext, subscribe: true })
-  private _entities?: ContextType<typeof entitiesContext>;
-
  protected render() {
    if (this.icon) {
      return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -44,14 +28,12 @@ export class HaAttributeIcon extends LitElement {
      return nothing;
    }

-    if (!this._config || !this._connection || !this._entities) {
+    if (!this.hass) {
      return nothing;
    }

    const icon = attributeIcon(
-      this._config.config,
-      this._connection.connection,
-      this._entities,
+      this.hass,
      this.stateObj,
      this.attribute,
      this.attributeValue
@@ -1,12 +1,10 @@
-import { consume } from "@lit/context";
-import type { ContextType } from "@lit/context";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { formatNumber } from "../common/number/format_number";
 import { blankBeforeUnit } from "../common/translations/blank_before_unit";
-import { internationalizationContext } from "../data/context";
+import type { HomeAssistant } from "../types";

@customElement("ha-big-number")
 export class HaBigNumber extends LitElement {
@@ -17,16 +15,17 @@ export class HaBigNumber extends LitElement {
  @property({ attribute: "unit-position" })
  public unitPosition: "top" | "bottom" = "top";

+  @property({ attribute: false }) public hass?: HomeAssistant;
+
  @property({ attribute: false })
  public formatOptions: Intl.NumberFormatOptions = {};

-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n?: ContextType<typeof internationalizationContext>;
-
  protected render() {
-    const locale = this._i18n!.locale;
-    const formatted = formatNumber(this.value, locale, this.formatOptions);
+    const formatted = formatNumber(
+      this.value,
+      this.hass?.locale,
+      this.formatOptions
+    );
    const [integer] = formatted.includes(".")
      ? formatted.split(".")
      : formatted.split(",");
@@ -34,7 +33,9 @@ export class HaBigNumber extends LitElement {
    const temperatureDecimal = formatted.replace(integer, "");

    const formattedValue = `${this.value}${
-      this.unit ? `${blankBeforeUnit(this.unit, locale)}${this.unit}` : ""
+      this.unit
+        ? `${blankBeforeUnit(this.unit, this.hass?.locale)}${this.unit}`
+        : ""
    }`;

    const unitBottom = this.unitPosition === "bottom";
@@ -112,16 +112,12 @@ export class HaCameraStream extends LitElement {
      return nothing;
    }
    if (stream.type === MJPEG_STREAM) {
-      const streamUrl = __DEMO__
-        ? this.stateObj.attributes.entity_picture
-        : this._connected
-          ? computeMJPEGStreamUrl(this.stateObj)
-          : this._posterUrl;
-      if (!streamUrl) {
-        return nothing;
-      }
      return html`<img
-        .src=${streamUrl}
+        .src=${__DEMO__
+          ? this.stateObj.attributes.entity_picture!
+          : this._connected
+            ? computeMJPEGStreamUrl(this.stateObj)
+            : this._posterUrl || ""}
        style=${styleMap({
          aspectRatio: this.aspectRatio,
          objectFit: this.fitMode,
@@ -183,7 +183,6 @@ export class HaControlSelectMenu extends LitElement {
        gap: 10px;
        width: 100%;
        user-select: none;
-        font-family: var(--ha-font-family-body, inherit);
        font-style: normal;
        font-weight: var(--ha-font-weight-normal);
        letter-spacing: 0.25px;
@@ -12,20 +12,6 @@ import type {
  HaFormSelectSchema,
 } from "./types";

-/**
- * The underlying select returns option values as strings. Map a selected value
- * back to its original option value so the source type is retained (for example
- * a number coming from a backend `vol.In` schema), falling back to the value
- * itself when no option matches.
- */
-export const matchSelectOptionValue = (
-  options: HaFormSelectSchema["options"],
-  value: string
-): HaFormSelectData => {
-  const option = options.find((opt) => String(opt[0]) === String(value));
-  return option ? option[0] : value;
-};
-
@customElement("ha-form-select")
 export class HaFormSelect extends LitElement implements HaFormElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -80,18 +66,16 @@ export class HaFormSelect extends LitElement implements HaFormElement {

  private _valueChanged(ev: CustomEvent) {
    ev.stopPropagation();
-    let value: HaFormSelectData | undefined = ev.detail.value;
-
-    if (value === "") {
-      value = undefined;
-    } else if (value != null) {
-      value = matchSelectOptionValue(this.schema.options, value);
-    }
+    let value: string | undefined = ev.detail.value;

    if (value === this.data) {
      return;
    }

+    if (value === "") {
+      value = undefined;
+    }
+
    fireEvent(this, "value-changed", {
      value,
    });
@@ -41,8 +41,6 @@ const CUSTOM_ICONS: Record<string, () => Promise<string>> = {
    ),
  esphome: () =>
    import("../resources/esphome-logo-svg").then((mod) => mod.mdiEsphomeLogo),
-  matter: () =>
-    import("../resources/matter-logo-svg").then((mod) => mod.mdiMatterLogo),
 };

@customElement("ha-icon")
@@ -101,9 +101,15 @@ export class HaLabelsPicker extends LitElement {
      language: string
    ) =>
      value
-        ?.map((id) => labels?.find((label) => label.label_id === id))
-        .filter((label): label is LabelRegistryEntry => label !== undefined)
-        .sort((a, b) => stringCompare(a.name, b.name, language))
+        ?.map(
+          (id) =>
+            labels?.find((label) => label.label_id === id) || {
+              label_id: id,
+              name: id,
+              color: "rgba(var(--rgb-primary-text-color), 0.15)",
+            }
+        )
+        .sort((a, b) => stringCompare(a?.name || "", b?.name || "", language))
        .map((label) => ({
          ...label,
          style: getLabelColorStyle(label.color),
@@ -12,8 +12,6 @@ import type { HomeAssistantInternationalization } from "../types";
 class HaRelativeTime extends ReactiveElement {
  @property({ attribute: false }) public datetime?: string | Date;

-  @property() public format: Intl.RelativeTimeFormatStyle = "long";
-
  @property({ type: Boolean }) public capitalize = false;

  @state()
@@ -38,15 +36,13 @@ class HaRelativeTime extends ReactiveElement {
    return this;
  }

+  protected firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    this._updateRelative();
+  }
+
  protected update(changedProps: PropertyValues<this>) {
    super.update(changedProps);
-    if (changedProps.has("datetime")) {
-      if (this.datetime) {
-        this._startInterval();
-      } else {
-        this._clearInterval();
-      }
-    }
    this._updateRelative();
  }

@@ -70,23 +66,15 @@ class HaRelativeTime extends ReactiveElement {
    }

    if (!this.datetime) {
-      this.textContent = this._i18n.localize(
-        "ui.components.relative_time.never"
-      );
+      this.innerHTML = this._i18n.localize("ui.components.relative_time.never");
    } else {
      const date =
        typeof this.datetime === "string"
          ? parseISO(this.datetime)
          : this.datetime;

-      const relTime = relativeTime(
-        date,
-        this._i18n.locale,
-        undefined,
-        true,
-        this.format
-      );
-      this.textContent = this.capitalize
+      const relTime = relativeTime(date, this._i18n.locale);
+      this.innerHTML = this.capitalize
        ? capitalizeFirstLetter(relTime)
        : relTime;
    }
@@ -354,9 +354,7 @@ export class HaSerialPortSelector extends LitElement {
  }

  private get _selectorDomain(): string | undefined {
-    // `domain` is the integration domain even in options flows, where the flow
-    // handler is the config entry id instead.
-    return this.context?.domain;
+    return this.context?.handler;
  }

  private _memoRecommendedDomains = memoizeOne(
@@ -1,32 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../ha-time-format-picker";
-
-@customElement("ha-selector-ui_time_format")
-export class HaSelectorUiTimeFormat extends LitElement {
-  @property() public value?: string;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  protected render() {
-    return html`
-      <ha-time-format-picker
-        .label=${this.label}
-        .value=${this.value}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-      >
-      </ha-time-format-picker>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-ui_time_format": HaSelectorUiTimeFormat;
-  }
-}
@@ -67,7 +67,6 @@ const LOAD_ELEMENTS = {
  ui_action: () => import("./ha-selector-ui-action"),
  ui_color: () => import("./ha-selector-ui-color"),
  ui_state_content: () => import("./ha-selector-ui-state-content"),
-  ui_time_format: () => import("./ha-selector-ui-time-format"),
 };

 const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);
@@ -1,67 +0,0 @@
-import memoizeOne from "memoize-one";
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";
-import "./ha-select";
-import { TIMESTAMP_RENDERING_FORMATS } from "../panels/lovelace/components/types";
-
-@customElement("ha-time-format-picker")
-export class HaTimeFormatPicker extends LitElement {
-  @property() public value?: string;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  private _options = memoizeOne((localize: LocalizeFunc) =>
-    [{ label: localize("ui.common.auto"), value: "auto" }].concat(
-      TIMESTAMP_RENDERING_FORMATS.map((format) => ({
-        label:
-          localize(`ui.components.time-format-picker.formats.${format}`) ||
-          format,
-        value: format,
-      }))
-    )
-  );
-
-  protected render() {
-    return html`
-      <ha-select
-        .label=${this.label ?? ""}
-        .value=${this.value || "auto"}
-        .helper=${this.helper ?? ""}
-        .disabled=${this.disabled}
-        @selected=${this._selectChanged}
-        .options=${this._options(this._localize)}
-      >
-      </ha-select>
-    `;
-  }
-
-  private _selectChanged(ev) {
-    ev.stopPropagation();
-    if (ev.detail?.value === "auto" && this.value !== undefined) {
-      fireEvent(this, "value-changed", {
-        value: undefined,
-      });
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: ev.detail.value,
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-time-format-picker": HaTimeFormatPicker;
-  }
-}
@@ -2,19 +2,12 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { goBack } from "../common/navigate";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-icon-button-arrow-prev";
-import "./ha-menu-button";

 const PASSIVE_EVENT_OPTIONS = { passive: true } as const;

 export const haTopAppBarFixedStyles = css`
  :host {
    display: block;
-    position: relative;
-    height: 100vh;
-    overflow: hidden;
    --total-top-app-bar-height: calc(
      var(--header-height, 0px) + var(--sub-row-height, 0px)
    );
@@ -25,11 +18,10 @@ export const haTopAppBarFixedStyles = css`
    box-sizing: border-box;
    color: var(--app-header-text-color, #fff);
    background-color: var(--app-header-background-color, var(--primary-color));
-    position: absolute;
+    position: fixed;
    top: 0;
-    inset-inline-start: 0;
    inset-inline-end: 0;
-    width: 100%;
+    width: var(--ha-top-app-bar-width, 100%);
    z-index: 4;
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
@@ -121,17 +113,17 @@ export const haTopAppBarFixedStyles = css`
  }

  .top-app-bar-fixed-adjust {
-    box-sizing: border-box;
-    position: absolute;
-    top: calc(
+    height: calc(
+      100vh - var(--total-top-app-bar-height, 0px) - var(
+          --safe-area-inset-top,
+          0px
+        ) - var(--safe-area-inset-bottom, 0px)
+    );
+    padding-top: calc(
      var(--total-top-app-bar-height, 0px) + var(--safe-area-inset-top, 0px)
    );
-    bottom: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
    padding-bottom: var(--safe-area-inset-bottom);
    padding-right: var(--safe-area-inset-right);
-    overflow: auto;
  }

  :host([narrow]) .top-app-bar-fixed-adjust {
@@ -143,16 +135,12 @@ export const haTopAppBarFixedStyles = css`
 export class HaTopAppBarFixed extends LitElement {
  @property({ type: Boolean, reflect: true }) public narrow = false;

-  @property({ attribute: "back-button", type: Boolean }) backButton = false;
-
  @property({ attribute: "center-title", type: Boolean }) centerTitle = false;

  @query(".top-app-bar") protected _barElement!: HTMLElement;

  @query(".sub-row") protected _subRowElement?: HTMLElement;

-  @query(".top-app-bar-fixed-adjust") protected _scrollElement?: HTMLElement;
-
  @state() private _hasSubRow = false;

  private _scrollTarget?: HTMLElement | Window;
@@ -161,13 +149,14 @@ export class HaTopAppBarFixed extends LitElement {

  @property({ attribute: false })
  public get scrollTarget(): HTMLElement | Window {
-    return this._scrollTarget || this._scrollElement || window;
+    return this._scrollTarget || window;
  }

  public set scrollTarget(value: HTMLElement | Window) {
    const old = this.scrollTarget;
    this._unregisterListeners();
    this._scrollTarget = value;
+    this._updateBarPosition();
    this.requestUpdate("scrollTarget", old);
    if (this.isConnected) {
      this._registerListeners();
@@ -189,6 +178,7 @@ export class HaTopAppBarFixed extends LitElement {
    if (this.hasUpdated) {
      this._observeSubRowHeight();
      this._updateSubRowHeight();
+      this._updateBarPosition();
      this._registerListeners();
      this._syncScrollState();
    }
@@ -210,14 +200,16 @@ export class HaTopAppBarFixed extends LitElement {
        <div class="row">
          ${paneHeader
            ? html`<section class="section" id="title">
-                ${this._renderNavigationIcon()} ${title}
+                <slot name="navigationIcon"></slot>
+                ${title}
              </section>`
            : nothing}
          <section class="section" id="navigation">
            ${paneHeader
              ? nothing
-              : html`${this._renderNavigationIcon()}
-                ${this.centerTitle ? nothing : title}`}
+              : html`<slot name="navigationIcon"></slot> ${this.centerTitle
+                    ? nothing
+                    : title}`}
          </section>
          ${!paneHeader && this.centerTitle
            ? html`<section class="section center">${title}</section>`
@@ -233,22 +225,8 @@ export class HaTopAppBarFixed extends LitElement {
    `;
  }

-  private _renderNavigationIcon() {
-    return html`
-      <slot name="navigationIcon">
-        ${this.backButton
-          ? html`
-              <ha-icon-button-arrow-prev
-                @click=${this._handleBackClick}
-              ></ha-icon-button-arrow-prev>
-            `
-          : html`<ha-menu-button></ha-menu-button>`}
-      </slot>
-    `;
-  }
-
  protected _renderContent() {
-    return html`<div class="top-app-bar-fixed-adjust ha-scrollbar">
+    return html`<div class="top-app-bar-fixed-adjust">
      <slot></slot>
    </div>`;
  }
@@ -257,6 +235,7 @@ export class HaTopAppBarFixed extends LitElement {
    super.firstUpdated(changedProperties);
    this._observeSubRowHeight();
    this._updateSubRowHeight();
+    this._updateBarPosition();
    this._registerListeners();
    this._syncScrollState();
  }
@@ -274,6 +253,13 @@ export class HaTopAppBarFixed extends LitElement {
    this._unregisterListeners();
  }

+  protected _updateBarPosition() {
+    if (this._barElement) {
+      this._barElement.style.position =
+        this.scrollTarget === window ? "" : "absolute";
+    }
+  }
+
  protected _syncScrollState = () => {
    const scrollTop =
      this.scrollTarget instanceof Window
@@ -282,11 +268,6 @@ export class HaTopAppBarFixed extends LitElement {
    this._barElement?.classList.toggle("scrolled", scrollTop > 0);
  };

-  private _handleBackClick(ev: Event) {
-    ev.stopPropagation();
-    goBack();
-  }
-
  protected _registerListeners() {
    this.scrollTarget.addEventListener(
      "scroll",
@@ -333,10 +314,7 @@ export class HaTopAppBarFixed extends LitElement {
    this.style.setProperty("--sub-row-height", `${subRowHeight}px`);
  };

-  static override styles: CSSResultGroup = [
-    haStyleScrollbar,
-    haTopAppBarFixedStyles,
-  ];
+  static override styles: CSSResultGroup = haTopAppBarFixedStyles;
 }

 declare global {
@@ -85,25 +85,15 @@ export class HaTTSVoicePicker extends LitElement {
      await listTTSVoices(this.hass, this.engineId, this.language)
    ).voices;

-    const valueIsValid =
-      this.value &&
-      this._voices?.some((voice) => voice.voice_id === this.value);
-
-    if (valueIsValid) {
+    if (!this.value) {
      return;
    }

-    // The current value is missing or no longer valid for the loaded voices.
-    // When a voice is required, auto-select the first one (the <ha-select>
-    // already displays it) so the value is propagated to the parent;
-    // otherwise clear it.
-    const newValue =
-      this.required && this._voices?.length
-        ? this._voices[0].voice_id
-        : undefined;
-
-    if (newValue !== this.value) {
-      this.value = newValue;
+    if (
+      !this._voices ||
+      !this._voices.find((voice) => voice.voice_id === this.value)
+    ) {
+      this.value = undefined;
      fireEvent(this, "value-changed", { value: this.value });
    }
  }
@@ -29,7 +29,6 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
      <div
        class=${classMap({
          "top-app-bar-fixed-adjust": true,
-          "ha-scrollbar": true,
          "top-app-bar-fixed-adjust--pane": this.pane,
        })}
      >
@@ -131,7 +130,12 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {

      .top-app-bar-fixed-adjust--pane {
        display: flex;
-        overflow: hidden;
+        height: calc(
+          100vh - var(--total-top-app-bar-height, 0px) - var(
+              --safe-area-inset-top,
+              0px
+            ) - var(--safe-area-inset-bottom, 0px)
+        );
      }

      .pane {
@@ -163,7 +167,6 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
        position: relative;
        flex: 1;
        height: 100%;
-        min-width: 0;
      }

      .top-app-bar-fixed-adjust--pane .content {
@@ -0,0 +1,13 @@
+import timezones from "google-timezones-json";
+
+export const createTimezoneListEl = () => {
+  const list = document.createElement("datalist");
+  list.id = "timezones";
+  Object.keys(timezones).forEach((key) => {
+    const option = document.createElement("option");
+    option.value = key;
+    option.innerText = timezones[key];
+    list.appendChild(option);
+  });
+  return list;
+};
@@ -26,6 +26,7 @@ export class HaTraceLogbook extends LitElement {
    return this.logbookEntries.length
      ? html`
          <ha-logbook-renderer
+            relative-time
            .hass=${this.hass}
            .entries=${this.logbookEntries}
            .narrow=${this.narrow}
@@ -388,6 +388,7 @@ export class HaTracePathDetails extends LitElement {
    return entries.length
      ? html`
          <ha-logbook-renderer
+            relative-time
            .hass=${this.hass}
            .entries=${entries}
            .narrow=${this.narrow}
@@ -18,7 +18,7 @@ import { toggleAttribute } from "../../common/dom/toggle_attribute";
 import { fullEntitiesContext } from "../../data/context";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { LogbookEntry } from "../../data/logbook";
-import { localizeTriggerSource } from "../../data/logbook";
+import { localizeTriggerDescription } from "../../data/logbook";
 import type {
  ChooseAction,
  IfAction,
@@ -333,7 +333,7 @@ class ActionRenderer {
            : "other",
          alias: triggerStep.changed_variables.trigger?.alias,
          triggeredPath: triggerStep.path === "trigger" ? "manual" : "trigger",
-          trigger: localizeTriggerSource(
+          trigger: localizeTriggerDescription(
            this.hass.localize,
            this.trace.trigger
          ),
@@ -1,7 +1,7 @@
 import type { HomeAssistant } from "../types";
 import type { Selector } from "./selector";

-export enum AITaskEntityFeature {
+export const enum AITaskEntityFeature {
  GENERATE_DATA = 1,
  SUPPORT_ATTACHMENTS = 2,
  GENERATE_IMAGE = 4,
@@ -18,7 +18,7 @@ import { getExtendedEntityRegistryEntry } from "./entity/entity_registry";
 export const FORMAT_TEXT = "text";
 export const FORMAT_NUMBER = "number";

-export enum AlarmControlPanelEntityFeature {
+export const enum AlarmControlPanelEntityFeature {
  ARM_HOME = 1,
  ARM_AWAY = 2,
  ARM_NIGHT = 4,
--- a/Show More
+++ b/Show More