Use one dependency cache key

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

@@ -1,12 +1,18 @@
 ---
 name: ha-frontend-testing
-description: Home Assistant frontend validation workflow. Use when running lint, TypeScript checks, Vitest, Playwright e2e suites, dev servers, or chart-data benchmarks.
+description: Home Assistant frontend testing and validation workflow. Use when adding or updating tests, running lint, TypeScript checks, Vitest, Playwright e2e suites, dev servers, or chart-data benchmarks.
 ---
 
 # HA Frontend Testing
 
 Use this skill when choosing or running validation for frontend changes.
 
+## Test Helpers
+
+- Before adding or changing tests, inspect the relevant suite's existing helpers and fixtures. Reuse them instead of duplicating setup, test data, navigation, interactions, waits, or assertions.
+- When the same test flow appears more than once, move it into the closest suite-local helper with a focused interface.
+- Keep one-off test behaviour in the test unless a helper makes the intent materially clearer. Do not hide the behaviour under test behind broad, configurable abstractions.
+
 ## Core Commands
 
 ```bash
@@ -35,23 +41,25 @@ For focused type feedback on one file, use editor diagnostics instead of a file-
 
 `yarn dev:serve` also serves locally and supports `-c` for the core URL and `-p` for the port. Default local serving port is 8124.
 
-Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`.
+Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`. Prefer managed background mode while iterating so the watcher stays available across test runs without occupying the terminal.
 
 ## Playwright E2E
 
-Each suite has its own dev server port. Playwright reuses an existing server locally when the port is already running; otherwise it performs a slow full build. The rspack watcher recompiles on save, so reruns should not need a restart.
+Each suite has its own dev server port. Prefer running the relevant server in the background while iterating. Playwright reuses it when the port is already running; otherwise it performs a slow full build. The rspack watcher recompiles on save, so reruns should not need a restart.
 
 Start the relevant suite server, then run that suite:
 
-| Suite   | Server                          | Test command            |
-| ------- | ------------------------------- | ----------------------- |
-| App     | `yarn test:e2e:app:dev` on 8095 | `yarn test:e2e:app`     |
-| Demo    | `yarn dev:demo` on 8090         | `yarn test:e2e:demo`    |
-| Gallery | `yarn dev:gallery` on 8100      | `yarn test:e2e:gallery` |
+| Suite   | Background server                            | Test command            |
+| ------- | -------------------------------------------- | ----------------------- |
+| App     | `yarn test:e2e:app:dev --background` on 8095 | `yarn test:e2e:app`     |
+| Demo    | `yarn dev:demo --background` on 8090         | `yarn test:e2e:demo`    |
+| Gallery | `yarn dev:gallery --background` on 8100      | `yarn test:e2e:gallery` |
 
-Server reuse and `--stop` use the `/__ha_dev_status` health check, so starting or stopping twice is harmless.
+Use the same server command with `--status`, `--logs [--follow]`, or `--stop` to manage it. Server reuse and `--stop` use the `/__ha_dev_status` health check, so starting or stopping twice is harmless.
 
-Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs all three suites. Run suites directly; piping through output truncation hides progress and failures.
+Local runs against a watched development server do not always match CI's clean build artifacts, environment, sharding, or worker configuration. Use background servers for the fast iteration loop, but confirm the relevant CI jobs complete successfully before considering E2E changes verified.
+
+Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs all three suites in parallel when every managed server is available, otherwise it runs them sequentially to prevent cold builds racing over shared generated assets. Run suites directly; piping through output truncation hides progress and failures.
 
 The app suite uses a stripped-down harness for e2e. Demo and gallery use their normal dev servers.
 

.github/actions/netlify-deploy/action.yml

@@ -19,9 +19,6 @@ outputs:
   netlify_url:
     description: The deployed URL
     value: ${{ steps.deploy.outputs.netlify_url }}
-  unique_deploy_url:
-    description: The unique hash-based deployment URL for this specific build
-    value: ${{ steps.deploy.outputs.unique_deploy_url }}
 
 runs:
   using: composite
@@ -35,18 +32,9 @@ runs:
         NETLIFY_AUTH_TOKEN: ${{ inputs.auth-token }}
         NETLIFY_SITE_ID: ${{ inputs.site-id }}
       run: |
-        # Execute the deployment
         if [ -n "$ALIAS" ]; then
           npx -y netlify-cli deploy --dir="$DIR" --alias "$ALIAS" --json > deploy_output.json
         else
           npx -y netlify-cli deploy --dir="$DIR" --prod --json > deploy_output.json
         fi
-
-        # Collect the urls from the deployment output
-        NETLIFY_URL=$(jq -r '.url // .deploy_url' deploy_output.json)
-        SITE_NAME=$(jq -r '.site_name' deploy_output.json)
-        DEPLOY_ID=$(jq -r '.deploy_id' deploy_output.json)
-        UNIQUE_URL="https://${DEPLOY_ID}--${SITE_NAME}.netlify.app"
-
-        echo "netlify_url=$NETLIFY_URL" >> "$GITHUB_OUTPUT"
-        echo "unique_deploy_url=$UNIQUE_URL" >> "$GITHUB_OUTPUT"
+        echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"

.github/actions/setup/action.yml

@@ -8,6 +8,9 @@ inputs:
   cache:
     description: Enable the yarn cache in setup-node
     default: "true"
+  node-modules-cache:
+    description: Restore the exact shared node_modules cache instead of installing
+    default: "false"
 
 runs:
   using: composite
@@ -16,8 +19,25 @@ runs:
       uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
       with:
         node-version-file: ".nvmrc"
-        cache: ${{ inputs.cache == 'true' && 'yarn' || '' }}
+        cache: ${{ inputs.cache == 'true' && inputs.node-modules-cache != 'true' && 'yarn' || '' }}
+
+    - name: Enable Corepack
+      shell: bash
+      run: corepack enable
+
+    - name: Restore complete dependency tree
+      if: inputs.node-modules-cache == 'true'
+      uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+      with:
+        path: |
+          node_modules
+          .yarn/install-state.gz
+        fail-on-cache-miss: true
+        key: >-
+          node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+          hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
 
     - name: Install dependencies
+      if: inputs.node-modules-cache != 'true'
       shell: bash
       run: yarn install ${{ inputs.immutable == 'true' && '--immutable' || '' }}

.github/workflows/e2e.yaml

@@ -22,9 +22,8 @@ permissions:
   contents: read
 
 jobs:
-  # ── Build the demo once and share it across test jobs via artifact ──────────
-  build-demo:
-    name: Build demo
+  prepare-dependencies:
+    name: Prepare dependencies
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
@@ -32,14 +31,97 @@ jobs:
         with:
           persist-credentials: false
 
+      - name: Check for complete dependency tree
+        id: dependencies
+        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            node_modules
+            .yarn/install-state.gz
+          key: >-
+            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+            hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
+          lookup-only: true
+
       - name: Setup Node and install
+        if: steps.dependencies.outputs.cache-hit != 'true'
         uses: ./.github/actions/setup
+        with:
+          cache: false
+
+      - name: Save complete dependency tree
+        if: steps.dependencies.outputs.cache-hit != 'true'
+        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            node_modules
+            .yarn/install-state.gz
+          key: ${{ steps.dependencies.outputs.cache-primary-key }}
+
+  prepare-container-dependencies:
+    name: Prepare container dependencies
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001
+    defaults:
+      run:
+        shell: bash
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Check for complete dependency tree
+        id: dependencies
+        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            node_modules
+            .yarn/install-state.gz
+          key: >-
+            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+            hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
+          lookup-only: true
+
+      - name: Setup Node and install
+        if: steps.dependencies.outputs.cache-hit != 'true'
+        uses: ./.github/actions/setup
+        with:
+          cache: false
+
+      - name: Save complete dependency tree
+        if: steps.dependencies.outputs.cache-hit != 'true'
+        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            node_modules
+            .yarn/install-state.gz
+          key: ${{ steps.dependencies.outputs.cache-primary-key }}
+
+  # ── Build the demo once and share it across test jobs via artifact ──────────
+  build-demo:
+    name: Build demo
+    needs: prepare-dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node with shared dependencies
+        uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
 
       - name: Build demo
         uses: ./.github/actions/build
         with:
-          target: build-demo
+          target: build-demo-e2e
           github-token: ${{ secrets.GITHUB_TOKEN }}
+          is-test: true
 
       - name: Upload demo build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -52,6 +134,7 @@ jobs:
   # ── Build the e2e test app and share it via artifact ────────────────────────
   build-e2e-test-app:
     name: Build e2e test app
+    needs: prepare-dependencies
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
@@ -59,14 +142,17 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
+      - name: Setup Node with shared dependencies
         uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
 
       - name: Build e2e test app
         uses: ./.github/actions/build
         with:
-          target: build-e2e-test-app
+          target: build-e2e-test-app-e2e
           github-token: ${{ secrets.GITHUB_TOKEN }}
+          is-test: true
 
       - name: Upload e2e test app build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -79,6 +165,7 @@ jobs:
   # ── Build the gallery and share it via artifact ─────────────────────────────
   build-gallery:
     name: Build gallery
+    needs: prepare-dependencies
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
@@ -86,8 +173,10 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
+      - name: Setup Node with shared dependencies
         uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
 
       - name: Build gallery
         uses: ./.github/actions/build
@@ -103,41 +192,38 @@ jobs:
           if-no-files-found: error
           retention-days: 3
 
-  # ── Run Playwright tests locally against Chromium ──────────────────────────
-  e2e-local:
-    name: E2E (local Chromium)
-    needs: [build-demo, build-e2e-test-app, build-gallery]
+  # ── Run Playwright tests against Chromium ──────────────────────────────────
+  e2e-demo:
+    name: E2E demo (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-demo
+      - prepare-container-dependencies
     runs-on: ubuntu-latest
-    # Fail fast if anything hangs. The whole suite should take < 15 minutes on
-    # Chromium; anything longer is almost certainly an install or webServer
-    # hang.
-    timeout-minutes: 30
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+        shardTotal:
+          - 2
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
+      - name: Setup Node with shared dependencies
         uses: ./.github/actions/setup
-
-      # Resolve the installed Playwright version so the browser cache tracks
-      # Playwright itself, not every unrelated dependency bump.
-      - name: Resolve Playwright version
-        id: playwright-version
-        run: echo "version=$(node -p 'require("@playwright/test/package.json").version')" >> "$GITHUB_OUTPUT"
-
-      # Cache the downloaded browser build keyed on the installed Playwright
-      # version, so re-runs skip the ~170 MB download unless Playwright changes.
-      - name: Cache Playwright browsers
-        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
-
-      - name: Install Playwright browsers
-        run: yarn playwright install --with-deps chromium
-        timeout-minutes: 10
+          node-modules-cache: true
 
       - name: Download demo build
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
@@ -145,36 +231,133 @@ jobs:
           name: demo-dist
           path: demo/dist/
 
+      - name: Run Playwright demo tests
+        run: yarn test:e2e:demo --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        timeout-minutes: 15
+
+      - name: Upload demo blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-demo-${{ matrix.shardIndex }}
+          path: test/e2e/reports/demo/
+          if-no-files-found: warn
+          retention-days: 3
+
+  e2e-app:
+    name: E2E app (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-e2e-test-app
+      - prepare-container-dependencies
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+          - 3
+          - 4
+        shardTotal:
+          - 4
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node with shared dependencies
+        uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
+
       - name: Download e2e test app build
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         with:
           name: e2e-test-app-dist
           path: test/e2e/app/dist/
 
+      - name: Run Playwright app tests
+        run: yarn test:e2e:app --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        timeout-minutes: 15
+
+      - name: Upload app blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-app-${{ matrix.shardIndex }}
+          path: test/e2e/reports/app/
+          if-no-files-found: warn
+          retention-days: 3
+
+  e2e-gallery:
+    name: E2E gallery (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-gallery
+      - prepare-container-dependencies
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+          - 3
+          - 4
+        shardTotal:
+          - 4
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node with shared dependencies
+        uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
+
       - name: Download gallery build
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         with:
           name: gallery-dist
           path: gallery/dist/
 
-      - name: Run Playwright tests (local)
-        run: yarn test:e2e
+      - name: Run Playwright gallery tests
+        run: yarn test:e2e:gallery --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         timeout-minutes: 15
 
-      - name: Upload blob report
+      - name: Upload gallery blob report
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         if: always()
         with:
-          name: blob-report-local
-          path: test/e2e/reports/
+          name: blob-report-gallery-${{ matrix.shardIndex }}
+          path: test/e2e/reports/gallery/
+          if-no-files-found: warn
           retention-days: 3
 
-  # ── Merge local blob reports and post PR comment ───────────────────────────
   report:
     name: Report
-    needs: [e2e-local]
+    needs:
+      - e2e-demo
+      - e2e-app
+      - e2e-gallery
     runs-on: ubuntu-latest
-    if: ${{ !cancelled() }}
+    if: ${{ always() }}
     permissions:
       contents: read
       pull-requests: write
@@ -184,15 +367,31 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
+      - name: Setup Node with shared dependencies
         uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
 
-      - name: Download blob report (local)
+      - name: Download demo blob reports
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         continue-on-error: true
         with:
-          name: blob-report-local
-          path: test/e2e/reports/
+          pattern: blob-report-demo-*
+          path: test/e2e/reports/demo/
+
+      - name: Download app blob reports
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        continue-on-error: true
+        with:
+          pattern: blob-report-app-*
+          path: test/e2e/reports/app/
+
+      - name: Download gallery blob reports
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        continue-on-error: true
+        with:
+          pattern: blob-report-gallery-*
+          path: test/e2e/reports/gallery/
 
       - name: Stage blobs for merge
         run: node test/e2e/collect-blob-reports.mjs
@@ -209,7 +408,11 @@ jobs:
           retention-days: 14
 
       - name: Post report to PR
-        if: github.event_name == 'pull_request' && needs.e2e-local.result == 'failure'
+        if: >-
+          github.event_name == 'pull_request' &&
+          (needs.e2e-demo.result == 'failure' ||
+          needs.e2e-app.result == 'failure' ||
+          needs.e2e-gallery.result == 'failure')
         uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
@@ -217,3 +420,19 @@ jobs:
               `${process.env.GITHUB_WORKSPACE}/test/e2e/post-report-comment.mjs`
             );
             await postReportComment({ github, context, core });
+
+      - name: Check suite results
+        run: |
+          failed=0
+          for suite in \
+            "demo:${{ needs.e2e-demo.result }}" \
+            "app:${{ needs.e2e-app.result }}" \
+            "gallery:${{ needs.e2e-gallery.result }}"; do
+            name="${suite%%:*}"
+            result="${suite#*:}"
+            echo "E2E ${name}: ${result}"
+            if [ "$result" != "success" ]; then
+              failed=1
+            fi
+          done
+          exit "$failed"

build-scripts/bundle.cjs

@@ -232,7 +232,7 @@ module.exports.config = {
     };
   },
 
-  demo({ isProdBuild, latestBuild, isStatsBuild }) {
+  demo({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
     return {
       name: "demo" + nameSuffix(latestBuild),
       entry: {
@@ -247,6 +247,7 @@ module.exports.config = {
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isTestBuild,
     };
   },
 
@@ -306,7 +307,7 @@ module.exports.config = {
     };
   },
 
-  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
     return {
       name: "e2e-test-app" + nameSuffix(latestBuild),
       entry: {
@@ -321,6 +322,7 @@ module.exports.config = {
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isTestBuild,
     };
   },
 };

build-scripts/gulp/demo.js

@@ -42,6 +42,22 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "build-demo-e2e",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-demo",
+    // Cast needs to be backwards compatible and older HA has no translations
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-demo",
+    "rspack-prod-demo-e2e",
+    "gen-pages-demo-prod-e2e"
+  )
+);
+
 gulp.task(
   "analyze-demo",
   gulp.series(

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

@@ -39,3 +39,18 @@ gulp.task(
     "gen-pages-e2e-test-app-prod"
   )
 );
+
+gulp.task(
+  "build-e2e-test-app-e2e",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-e2e-test-app",
+    "rspack-prod-e2e-test-app-e2e",
+    "gen-pages-e2e-test-app-prod"
+  )
+);

build-scripts/gulp/entry-html.js

@@ -225,6 +225,16 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "gen-pages-demo-prod-e2e",
+  genPagesProdTask(
+    DEMO_PAGE_ENTRIES,
+    paths.demo_dir,
+    paths.demo_output_root,
+    paths.demo_output_latest
+  )
+);
+
 const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
 gulp.task(

build-scripts/gulp/rspack.js

@@ -177,6 +177,18 @@ gulp.task("rspack-prod-demo", () =>
     bothBuilds(createDemoConfig, {
       isProdBuild: true,
       isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);
+
+gulp.task("rspack-prod-demo-e2e", () =>
+  prodBuild(
+    createDemoConfig({
+      isProdBuild: true,
+      latestBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
     })
   )
 );
@@ -269,6 +281,18 @@ gulp.task("rspack-prod-e2e-test-app", () =>
     bothBuilds(createE2eTestAppConfig, {
       isProdBuild: true,
       isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);
+
+gulp.task("rspack-prod-e2e-test-app-e2e", () =>
+  prodBuild(
+    createE2eTestAppConfig({
+      isProdBuild: true,
+      latestBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
     })
   )
 );

build-scripts/rspack.cjs

@@ -387,9 +387,14 @@ const createAppConfig = ({
     bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+const createDemoConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  isTestBuild,
+}) =>
   createRspackConfig(
-    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
+    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
@@ -401,9 +406,19 @@ const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
-const createE2eTestAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+const createE2eTestAppConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  isTestBuild,
+}) =>
   createRspackConfig(
-    bundle.config.e2eTestApp({ isProdBuild, latestBuild, isStatsBuild })
+    bundle.config.e2eTestApp({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+      isTestBuild,
+    })
   );
 
 module.exports = {

package.json

@@ -52,15 +52,15 @@
     "@codemirror/view": "6.43.6",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.5.0",
-    "@formatjs/intl-displaynames": "7.3.12",
-    "@formatjs/intl-durationformat": "0.10.17",
-    "@formatjs/intl-getcanonicallocales": "3.2.11",
-    "@formatjs/intl-listformat": "8.3.12",
-    "@formatjs/intl-locale": "5.3.10",
-    "@formatjs/intl-numberformat": "9.3.13",
-    "@formatjs/intl-pluralrules": "6.3.12",
-    "@formatjs/intl-relativetimeformat": "12.3.12",
+    "@formatjs/intl-datetimeformat": "7.4.10",
+    "@formatjs/intl-displaynames": "7.3.11",
+    "@formatjs/intl-durationformat": "0.10.16",
+    "@formatjs/intl-getcanonicallocales": "3.2.10",
+    "@formatjs/intl-listformat": "8.3.11",
+    "@formatjs/intl-locale": "5.3.9",
+    "@formatjs/intl-numberformat": "9.3.12",
+    "@formatjs/intl-pluralrules": "6.3.11",
+    "@formatjs/intl-relativetimeformat": "12.3.11",
     "@fullcalendar/core": "6.1.21",
     "@fullcalendar/daygrid": "6.1.21",
     "@fullcalendar/interaction": "6.1.21",
@@ -83,8 +83,8 @@
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.3.2",
-    "@tsparticles/preset-links": "4.3.2",
+    "@tsparticles/engine": "4.3.1",
+    "@tsparticles/preset-links": "4.3.1",
     "@vibrant/color": "4.0.4",
     "@vvo/tzdb": "6.198.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -107,7 +107,7 @@
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.11",
+    "intl-messageformat": "11.2.10",
     "js-yaml": "5.2.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -145,7 +145,7 @@
     "@babel/preset-env": "8.0.2",
     "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.64.0",
+    "@html-eslint/eslint-plugin": "0.63.0",
     "@lokalise/node-api": "16.0.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
@@ -173,7 +173,7 @@
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.7.0",
+    "eslint": "10.6.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.17.1",

renovate.json

@@ -58,6 +58,17 @@
       "depNameTemplate": "rhysd/actionlint",
       "datasourceTemplate": "github-releases",
       "extractVersionTemplate": "^v(?<version>.+)$"
+    },
+    {
+      "description": "Keep Playwright CI container image up to date",
+      "customType": "regex",
+      "managerFilePatterns": ["/^\\.github/workflows/e2e\\.yaml$/"],
+      "matchStrings": [
+        "mcr\\.microsoft\\.com/playwright:(?<currentValue>v\\d+\\.\\d+\\.\\d+-noble)"
+      ],
+      "depNameTemplate": "mcr.microsoft.com/playwright",
+      "datasourceTemplate": "docker",
+      "versioningTemplate": "regex:^v(?<major>\\d+)\\.(?<minor>\\d+)\\.(?<patch>\\d+)-(?<compatibility>noble)$"
     }
   ],
   "packageRules": [
@@ -86,6 +97,11 @@
       "description": "Group date-fns with dependent timezone package",
       "groupName": "date-fns",
       "matchPackageNames": ["date-fns", "date-fns-tz"]
+    },
+    {
+      "description": "Group Playwright package and CI container updates",
+      "groupName": "Playwright",
+      "matchPackageNames": ["@playwright/test", "mcr.microsoft.com/playwright"]
     }
   ]
 }

src/components/ha-toast.ts

@@ -24,8 +24,6 @@ export interface ToastClosedEventDetail {
 export class HaToast extends LitElement {
   @property({ attribute: "label-text" }) public labelText = "";
 
-  @property({ attribute: "announce-text" }) public announceText?: string;
-
   @property({ type: Number, attribute: "timeout-ms" }) public timeoutMs = 4000;
 
   @property({ type: Number, attribute: "bottom-offset" }) public bottomOffset =
@@ -192,6 +190,8 @@ export class HaToast extends LitElement {
         style=${styleMap({
           "--ha-toast-bottom-offset": `${this.bottomOffset}px`,
         })}
+        role="status"
+        aria-live="polite"
         popover=${ifDefined(popoverSupported ? "manual" : undefined)}
       >
         <span class="message">${this.labelText}</span>
@@ -200,14 +200,6 @@ export class HaToast extends LitElement {
           <slot name="dismiss"></slot>
         </div>
       </div>
-      <span
-        class="assistive-message"
-        role="status"
-        aria-live=${this._active ? "polite" : "off"}
-        aria-atomic="true"
-      >
-        ${this.announceText ?? this.labelText}
-      </span>
     `;
   }
 
@@ -262,18 +254,6 @@ export class HaToast extends LitElement {
       min-width: 0;
     }
 
-    .assistive-message {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-
     .actions {
       display: flex;
       align-items: center;

src/data/context/dirty-state.ts

@@ -36,13 +36,3 @@ export interface DirtyStateContext<
  * boundary.
  */
 export const dirtyStateContext = createContext<DirtyStateContext>("dirtyState");
-
-declare global {
-  interface Window {
-    isDirtyState?: boolean;
-  }
-
-  interface HASSDomEvents {
-    "dirty-state-changed": { isDirty: boolean };
-  }
-}

src/dialogs/image-cropper-dialog/image-cropper-dialog.ts

@@ -54,7 +54,6 @@ export class HaImagecropperDialog
   }
 
   protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
     if (!changedProperties.has("_params") || !this._params) {
       return;
     }

src/managers/notification-manager.ts

@@ -13,13 +13,8 @@ export interface ShowToastParams {
   // Unique ID for the toast. If a new toast is shown with the same ID as the previous toast, it will be replaced to avoid flickering.
   id?: string;
   message:
-    | string
-    | { translationKey: LocalizeKeys; args?: Record<string, string | number> };
-  announceMessage?:
-    | string
-    | { translationKey: LocalizeKeys; args?: Record<string, string | number> };
+    string | { translationKey: LocalizeKeys; args?: Record<string, string> };
   action?: ToastActionParams;
-  secondaryAction?: ToastActionParams;
   duration?: number;
   dismissable?: boolean;
   bottomOffset?: number;
@@ -27,10 +22,8 @@ export interface ShowToastParams {
 
 export interface ToastActionParams {
   action: () => void;
-  primary?: boolean;
   text:
-    | string
-    | { translationKey: LocalizeKeys; args?: Record<string, string | number> };
+    string | { translationKey: LocalizeKeys; args?: Record<string, string> };
 }
 
 @customElement("notification-manager")
@@ -96,22 +89,31 @@ class NotificationManager extends LitElement {
               )
             : this._parameters.message
         }
-        .announceText=${
-          this._parameters.announceMessage
-            ? typeof this._parameters.announceMessage !== "string"
-              ? this.hass.localize(
-                  this._parameters.announceMessage.translationKey,
-                  this._parameters.announceMessage.args
-                )
-              : this._parameters.announceMessage
-            : undefined
-        }
         .timeoutMs=${this._parameters.duration!}
         .bottomOffset=${this._parameters.bottomOffset ?? 0}
         @toast-closed=${this._toastClosed}
       >
-        ${this._renderAction(this._parameters.secondaryAction, true)}
-        ${this._renderAction(this._parameters.action, false)}
+        ${
+          this._parameters?.action
+            ? html`
+                <ha-button
+                  appearance="plain"
+                  size="s"
+                  slot="action"
+                  @click=${this._buttonClicked}
+                >
+                  ${
+                    typeof this._parameters?.action.text !== "string"
+                      ? this.hass.localize(
+                          this._parameters?.action.text.translationKey,
+                          this._parameters?.action.text.args
+                        )
+                      : this._parameters?.action.text
+                  }
+                </ha-button>
+              `
+            : nothing
+        }
         ${
           this._parameters?.dismissable
             ? html`
@@ -128,37 +130,11 @@ class NotificationManager extends LitElement {
     `;
   }
 
-  private _renderAction(
-    action: ToastActionParams | undefined,
-    secondary: boolean
-  ) {
-    if (!action) {
-      return nothing;
-    }
-    return html`
-      <ha-button
-        appearance=${action.primary ? "filled" : "plain"}
-        size="s"
-        slot="action"
-        @click=${secondary ? this._secondaryButtonClicked : this._buttonClicked}
-      >
-        ${
-          typeof action.text !== "string"
-            ? this.hass.localize(action.text.translationKey, action.text.args)
-            : action.text
-        }
-      </ha-button>
-    `;
-  }
-
   private _buttonClicked() {
     this._toast?.hide("action");
-    this._parameters?.action?.action();
-  }
-
-  private _secondaryButtonClicked() {
-    this._toast?.hide("action");
-    this._parameters?.secondaryAction?.action();
+    if (this._parameters?.action) {
+      this._parameters?.action.action();
+    }
   }
 
   private _dismissClicked() {

src/mixins/dirty-state-provider-mixin.ts

@@ -1,8 +1,7 @@
 import { provide } from "@lit/context";
 import deepClone from "deep-clone-simple";
-import type { LitElement, PropertyValues } from "lit";
+import type { LitElement } from "lit";
 import { state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
 import { deepEqual } from "../common/util/deep-equal";
 import { shallowEqual } from "../common/util/shallow-equal";
 import {
@@ -18,18 +17,6 @@ export type CompareStrategy<State> =
   | { type: "shallow" }
   | { type: "custom"; compare: (a: State, b: State) => boolean };
 
-const connectedDirtyStateProviders = new Map<object, boolean>();
-
-const publishGlobalDirtyState = (): void => {
-  const isDirty = Array.from(connectedDirtyStateProviders.values()).some(
-    Boolean
-  );
-  if (isDirty !== window.isDirtyState) {
-    window.isDirtyState = isDirty;
-    fireEvent(window, "dirty-state-changed", { isDirty });
-  }
-};
-
 /**
  * Mixin that provides dirty-state tracking via Lit context.
  *
@@ -39,9 +26,6 @@ const publishGlobalDirtyState = (): void => {
  * so independent contributors (e.g. a helper form alongside the entity
  * registry editor) can coexist without overwriting each other.
  *
- * Connected providers contribute to the global dirty state. It remains dirty
- * while any provider has unsaved changes.
- *
  * `isEffectiveDirty` runs the same comparison, but first passes each slice's
  * initial and current value through the optional `effectiveNormalize` function
  * given to `_initDirtyTracking`. Provide a normalizer that collapses values you
@@ -134,24 +118,6 @@ export const DirtyStateProviderMixin =
         this._dirtyStateContext = this._buildContextValue();
       }
 
-      public connectedCallback(): void {
-        super.connectedCallback();
-        connectedDirtyStateProviders.set(this, this.isDirtyState);
-        publishGlobalDirtyState();
-      }
-
-      protected updated(changedProperties: PropertyValues<this>): void {
-        super.updated(changedProperties);
-        connectedDirtyStateProviders.set(this, this.isDirtyState);
-        publishGlobalDirtyState();
-      }
-
-      public disconnectedCallback(): void {
-        connectedDirtyStateProviders.delete(this);
-        publishGlobalDirtyState();
-        super.disconnectedCallback();
-      }
-
       private _writeSlice(key: Key | DefaultDirtyStateKey, value: State): void {
         const slice = this._dirtySlices.get(key);
         if (!slice) {

src/panels/config/backup/dialogs/dialog-backup-onboarding.ts

@@ -203,7 +203,6 @@ class DialogBackupOnboarding
   }
 
   protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
     if (changedProps.has("_step") && this._step === "key") {
       this._save();
     }

src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts

@@ -146,7 +146,6 @@ export class HuiDialogEditBadge
   }
 
   protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
     if (!changedProps.has("_badgeConfig")) {
       return;
     }

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -135,7 +135,6 @@ export class HuiDialogEditCard
   }
 
   protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
     if (!this._cardConfig || !changedProps.has("_cardConfig")) {
       return;
     }

src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts

@@ -76,7 +76,6 @@ export class HuiDialogEditSection
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
   protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
     if (this._yamlMode && changedProperties.has("_yamlMode")) {
       const sectionConfig = {
         ...this._config,

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -94,7 +94,6 @@ export class HuiDialogEditView extends DirtyStateProviderMixin<LovelaceViewConfi
   }
 
   protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
     if (this._yamlMode && changedProperties.has("_yamlMode")) {
       const viewConfig = {
         ...this._config,

src/panels/lovelace/editor/view-footer/hui-dialog-edit-view-footer.ts

@@ -43,7 +43,6 @@ export class HuiDialogEditViewFooter extends DirtyStateProviderMixin<LovelaceVie
   @state() private _open = false;
 
   protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
     if (this._yamlMode && changedProperties.has("_yamlMode")) {
       const config = {
         ...this._config,

src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts

@@ -44,7 +44,6 @@ export class HuiDialogEditViewHeader extends DirtyStateProviderMixin<LovelaceVie
   @state() private _open = false;
 
   protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
     if (this._yamlMode && changedProperties.has("_yamlMode")) {
       const config = {
         ...this._config,

src/panels/lovelace/hui-editor.ts

@@ -104,7 +104,6 @@ class LovelaceFullConfigEditor extends DirtyStateProviderMixin<string>()(
   }
 
   protected updated(changedProps: PropertyValues<this>) {
-    super.updated(changedProps);
     const oldLovelace = changedProps.get("lovelace") as Lovelace | undefined;
     if (
       !this._saving &&

src/translations/en.json

@@ -2504,8 +2504,8 @@
       "triggered": "Triggered {name}",
       "dismiss": "Dismiss",
       "no_matching_link_found": "No matching My link found for {path}",
-      "new_version_available": "A new version of the frontend is available. This page will update in {seconds, plural, one {# second} other {# seconds}}.",
-      "update_now": "Update now",
+      "new_version_available": "A new version of the frontend is available.",
+      "reload": "Reload",
       "theme_save_failed": "Unable to save theme settings to your user profile.",
       "theme_preferences_unavailable": "Unable to load user profile theme settings."
     },

src/util/register-service-worker.ts

@@ -1,8 +1,5 @@
 import { showToast } from "./toast";
 
-const UPDATE_DELAY = 60_000;
-const UPDATE_TOAST_ID = "frontend-update-available";
-
 export const supportsServiceWorker = () =>
   "serviceWorker" in navigator &&
   (location.protocol === "https:" || location.hostname === "localhost");
@@ -26,92 +23,6 @@ export const registerServiceWorker = async (
     return;
   }
 
-  let pendingWorker: ServiceWorker | undefined;
-  let updateDeadline = 0;
-  let updateInterval = 0;
-
-  const hideUpdateToast = () => {
-    showToast(rootEl, {
-      id: UPDATE_TOAST_ID,
-      message: "",
-      duration: 0,
-    });
-  };
-
-  const clearUpdateCountdown = () => {
-    clearInterval(updateInterval);
-  };
-
-  const activateUpdate = () => {
-    if (!pendingWorker) {
-      return;
-    }
-    clearUpdateCountdown();
-    hideUpdateToast();
-    pendingWorker.postMessage({ type: "skipWaiting" });
-    pendingWorker = undefined;
-  };
-
-  const showUpdateToast = () => {
-    const seconds = Math.ceil((updateDeadline - Date.now()) / 1000);
-    if (seconds <= 0) {
-      activateUpdate();
-      return;
-    }
-    const announceSeconds =
-      seconds > 40 ? 60 : seconds > 20 ? 40 : seconds > 5 ? 20 : 5;
-    showToast(rootEl, {
-      id: UPDATE_TOAST_ID,
-      message: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds },
-      },
-      announceMessage: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds: announceSeconds },
-      },
-      action: {
-        action: activateUpdate,
-        primary: true,
-        text: { translationKey: "ui.notification_toast.update_now" },
-      },
-      secondaryAction: {
-        action: () => {
-          pendingWorker = undefined;
-          clearUpdateCountdown();
-        },
-        text: { translationKey: "ui.common.cancel" },
-      },
-      duration: -1,
-    });
-  };
-
-  const startUpdateCountdown = () => {
-    updateDeadline = Date.now() + UPDATE_DELAY;
-    showUpdateToast();
-    updateInterval = window.setInterval(showUpdateToast, 1000);
-  };
-
-  window.addEventListener("dirty-state-changed", () => {
-    if (!pendingWorker) {
-      return;
-    }
-    if (window.isDirtyState) {
-      clearUpdateCountdown();
-      hideUpdateToast();
-      return;
-    }
-    startUpdateCountdown();
-  });
-
-  const updateReady = (worker: ServiceWorker) => {
-    clearUpdateCountdown();
-    pendingWorker = worker;
-    if (!window.isDirtyState) {
-      startUpdateCountdown();
-    }
-  };
-
   reg.addEventListener("updatefound", () => {
     const installingWorker = reg.installing;
 
@@ -126,11 +37,22 @@ export const registerServiceWorker = async (
       ) {
         return;
       }
-      updateReady(installingWorker);
+
+      // Notify users a new frontend is available.
+      showToast(rootEl, {
+        message: {
+          translationKey: "ui.notification_toast.new_version_available",
+        },
+        action: {
+          // We tell the service worker to call skipWaiting, which activates
+          // the new service worker. Above we listen for `controllerchange`
+          // so we reload the page once a new service worker activates.
+          action: () => installingWorker.postMessage({ type: "skipWaiting" }),
+          text: { translationKey: "ui.notification_toast.reload" },
+        },
+        duration: -1,
+        dismissable: false,
+      });
     });
   });
-
-  if (reg.waiting && navigator.serviceWorker.controller) {
-    updateReady(reg.waiting);
-  }
 };

test/components/ha-toast.test.ts

@@ -1,177 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import type { HaToast } from "../../src/components/ha-toast";
-import "../../src/components/ha-toast";
-
-let toast: HaToast | undefined;
-
-const mountToast = async (properties: Partial<HaToast> = {}) => {
-  toast = document.createElement("ha-toast");
-  Object.assign(toast, properties);
-  document.body.append(toast);
-  await toast.updateComplete;
-  return toast;
-};
-
-afterEach(() => {
-  toast?.remove();
-  toast = undefined;
-  vi.useRealTimers();
-});
-
-const showToast = async (element: HaToast) => {
-  vi.useFakeTimers();
-  const shown = element.show();
-  await element.updateComplete;
-  Object.defineProperty(
-    element.shadowRoot!.querySelector(".toast"),
-    "getAnimations",
-    {
-      configurable: true,
-      value: () => [],
-    }
-  );
-  await vi.advanceTimersByTimeAsync(20);
-  await shown;
-};
-
-describe("ha-toast", () => {
-  it("renders its message and bottom offset", async () => {
-    const element = await mountToast({
-      labelText: "Configuration saved",
-      bottomOffset: 24,
-    });
-
-    expect(element.shadowRoot?.querySelector(".message")?.textContent).toBe(
-      "Configuration saved"
-    );
-    expect(
-      (
-        element.shadowRoot?.querySelector(".toast") as HTMLElement
-      ).style.getPropertyValue("--ha-toast-bottom-offset")
-    ).toBe("24px");
-  });
-
-  it("renders assigned action and dismiss content", async () => {
-    toast = document.createElement("ha-toast");
-    const action = document.createElement("button");
-    action.slot = "action";
-    const dismiss = document.createElement("button");
-    dismiss.slot = "dismiss";
-    toast.append(action, dismiss);
-    document.body.append(toast);
-    await toast.updateComplete;
-    toast.requestUpdate();
-    await toast.updateComplete;
-
-    expect(
-      toast.shadowRoot
-        ?.querySelector<HTMLSlotElement>('slot[name="action"]')
-        ?.assignedElements()
-    ).toEqual([action]);
-    expect(
-      toast.shadowRoot
-        ?.querySelector<HTMLSlotElement>('slot[name="dismiss"]')
-        ?.assignedElements()
-    ).toEqual([dismiss]);
-    expect(
-      toast.shadowRoot
-        ?.querySelector(".actions")
-        ?.classList.contains("has-action")
-    ).toBe(true);
-  });
-
-  it("keeps changing visual text separate from live-region text", async () => {
-    const element = await mountToast({
-      labelText: "Updating in 59 seconds",
-      announceText: "Updating in 60 seconds",
-    });
-
-    const visibleMessage = element.shadowRoot!.querySelector(".message")!;
-    const liveRegion = element.shadowRoot!.querySelector(".assistive-message")!;
-    expect(visibleMessage.textContent).toBe("Updating in 59 seconds");
-    expect(visibleMessage.closest('[role="status"]')).toBeNull();
-    expect(liveRegion.textContent?.trim()).toBe("Updating in 60 seconds");
-    expect(liveRegion.getAttribute("role")).toBe("status");
-    expect(liveRegion.getAttribute("aria-atomic")).toBe("true");
-  });
-
-  it("falls back to announcing the visible message", async () => {
-    const element = await mountToast({ labelText: "Configuration saved" });
-
-    expect(
-      element
-        .shadowRoot!.querySelector(".assistive-message")!
-        .textContent?.trim()
-    ).toBe("Configuration saved");
-  });
-
-  it("activates its live region while shown", async () => {
-    const element = await mountToast();
-    const liveRegion = element.shadowRoot!.querySelector(".assistive-message")!;
-    expect(liveRegion.getAttribute("aria-live")).toBe("off");
-
-    await showToast(element);
-
-    expect(liveRegion.getAttribute("aria-live")).toBe("polite");
-    expect(
-      element.shadowRoot!.querySelector(".toast")!.classList.contains("visible")
-    ).toBe(true);
-  });
-
-  it.each(["action", "dismiss", "programmatic"] as const)(
-    "reports a %s close reason",
-    async (reason) => {
-      const element = await mountToast({ timeoutMs: -1 });
-      const listener = vi.fn();
-      element.addEventListener("toast-closed", listener);
-      await showToast(element);
-
-      await element.hide(reason);
-
-      expect(listener).toHaveBeenCalledOnce();
-      expect(listener.mock.calls[0][0].detail).toEqual({ reason });
-      expect(
-        element
-          .shadowRoot!.querySelector(".toast")!
-          .classList.contains("active")
-      ).toBe(false);
-      expect(
-        element
-          .shadowRoot!.querySelector(".assistive-message")!
-          .getAttribute("aria-live")
-      ).toBe("off");
-    }
-  );
-
-  it("closes with a timeout reason", async () => {
-    const element = await mountToast({ timeoutMs: 1000 });
-    const listener = vi.fn();
-    element.addEventListener("toast-closed", listener);
-    await showToast(element);
-
-    await vi.advanceTimersByTimeAsync(1000);
-
-    expect(listener.mock.calls[0][0].detail).toEqual({ reason: "timeout" });
-  });
-
-  it("does not close automatically when the timeout is disabled", async () => {
-    const element = await mountToast({ timeoutMs: -1 });
-    const listener = vi.fn();
-    element.addEventListener("toast-closed", listener);
-    await showToast(element);
-
-    await vi.advanceTimersByTimeAsync(10_000);
-
-    expect(listener).not.toHaveBeenCalled();
-  });
-
-  it("does not emit a close event when already hidden", async () => {
-    const element = await mountToast();
-    const listener = vi.fn();
-    element.addEventListener("toast-closed", listener);
-
-    await element.hide("dismiss");
-
-    expect(listener).not.toHaveBeenCalled();
-  });
-});

test/e2e/app.spec.ts

@@ -4,164 +4,29 @@
  * Run with:
  *   yarn test:e2e:app
  */
-import { test, expect, type Page } from "@playwright/test";
-import type { MoreInfoView } from "../../src/dialogs/more-info/const";
-import { PANEL_TIMEOUT, QUICK_TIMEOUT, SHELL_TIMEOUT } from "./helpers";
-import { e2ePanelRouteAssertions } from "./app/src/ha-test-panels";
-
-/**
- * Each More info view renders one root element inside the dialog, plus one or
- * more characteristic descendants that prove the view actually populated rather
- * than rendering an empty shell. `text`, when set, asserts the element's text
- * instead of just its presence.
- */
-const MORE_INFO_VIEW_ELEMENTS: {
-  view: MoreInfoView;
-  element: string;
-  content: { selector: string; text?: string }[];
-}[] = [
-  {
-    view: "info",
-    element: "ha-more-info-info",
-    content: [
-      { selector: "more-info-light" },
-      { selector: "span.title", text: "Test Light" },
-    ],
-  },
-  {
-    view: "history",
-    element: "ha-more-info-history-and-logbook",
-    // The demo loads the history component but not logbook.
-    content: [{ selector: "ha-more-info-history" }],
-  },
-  {
-    view: "settings",
-    element: "ha-more-info-settings",
-    // The scenario mocks config/entity_registry/get, so the real registry
-    // panel renders instead of the "no unique ID" warning.
-    content: [{ selector: "entity-registry-settings" }],
-  },
-  {
-    view: "related",
-    element: "ha-related-items",
-    // search/related is mocked to return no relations, so the empty list
-    // renders.
-    content: [{ selector: "ha-related-items >> ha-list" }],
-  },
-  {
-    view: "add_to",
-    element: "ha-more-info-add-to",
-    // Admin users get the default add-to action list.
-    content: [{ selector: "ha-add-to-action-list" }],
-  },
-  {
-    view: "details",
-    element: "ha-more-info-details",
-    // The details view renders the state and attributes cards.
-    content: [{ selector: "ha-card" }],
-  },
-];
-
-const URL_NORMALIZATION_ASSERTIONS: {
-  name: string;
-  path: string;
-  element: string;
-  url: RegExp;
-  action?: (page: Page) => Promise<void>;
-}[] = [
-  {
-    name: "keeps the todo panel when adding the selected entity query",
-    path: "/todo",
-    element: "ha-panel-todo",
-    url: /\/\?entity_id=todo\.shopping_list#\/todo$/,
-  },
-  {
-    name: "keeps the history panel when removing the back query",
-    path: "/?back=1#/history",
-    element: "ha-panel-history, history-panel",
-    url: /\/#\/history$/,
-  },
-  {
-    name: "keeps the logbook panel when removing the back query",
-    path: "/?back=1#/logbook",
-    element: "ha-panel-logbook",
-    url: /\/#\/logbook$/,
-  },
-  {
-    name: "keeps the lovelace panel when adding the edit query",
-    path: "/lovelace",
-    element: "ha-panel-lovelace, hui-root",
-    url: /\/\?edit=1#\/lovelace\/home$/,
-    action: (page) => setLovelaceEditMode(page, true),
-  },
-  {
-    name: "keeps the lovelace panel when removing the edit query",
-    path: "/lovelace",
-    element: "ha-panel-lovelace, hui-root",
-    url: /\/#\/lovelace\/home$/,
-    action: async (page) => {
-      await setLovelaceEditMode(page, true);
-      await expect(page).toHaveURL(/\/\?edit=1#\/lovelace\/home$/, {
-        timeout: SHELL_TIMEOUT,
-      });
-      await setLovelaceEditMode(page, false);
-    },
-  },
-];
-
-interface E2ELovelaceRoot extends HTMLElement {
-  lovelace?: {
-    setEditMode: (editMode: boolean) => void;
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-// The test app is built with __DEMO__=true which enables hash-based routing.
-// Panel paths must use hash URLs: /#/lovelace, /#/energy, etc.
-// Scenario selection uses query params: /?scenario=foo (always at root).
-
-/** Navigate to a panel (hash routing) and wait for app to initialize. */
-async function goToPanel(page: Page, path: string) {
-  // Paths starting with /? are root-level (scenario selection); panel paths
-  // need to use hash routing (/#/panelname).
-  const url = path.startsWith("/?") ? path : `/#${path}`;
-  await page.goto(url);
-  await page.waitForSelector("ha-test", { state: "attached" });
-  // Wait for the app to finish initialising (hassConnected sets panels)
-  await page.waitForFunction(() => Boolean((window as any).__mockHass));
-}
-
-async function setLovelaceEditMode(page: Page, editMode: boolean) {
-  await page
-    .locator("hui-root")
-    .first()
-    .waitFor({ state: "attached", timeout: QUICK_TIMEOUT });
-  await page
-    .locator("hui-root")
-    .first()
-    .evaluate(async (el: Element, value) => {
-      const root = el as E2ELovelaceRoot;
-      const start = performance.now();
-      await new Promise<void>((resolve, reject) => {
-        const check = () => {
-          if (root.lovelace?.setEditMode) {
-            resolve();
-            return;
-          }
-          if (performance.now() - start > 2000) {
-            reject(new Error("Lovelace edit mode action was not available"));
-            return;
-          }
-          requestAnimationFrame(check);
-        };
-        check();
-      });
-      root.lovelace!.setEditMode(value);
-    }, editMode);
-}
+import { test, expect } from "@playwright/test";
+import {
+  appSidebar,
+  appSidebarConfig,
+  appSidebarPanel,
+  assertElementContent,
+  defineLinkSmokeTests,
+  defineRouteSmokeTests,
+  ensureAppSidebarPanelVisible,
+  goToPanel,
+} from "./app/src/helpers";
+import {
+  expectNoPageErrors,
+  PANEL_TIMEOUT,
+  QUICK_TIMEOUT,
+  SHELL_TIMEOUT,
+  trackPageErrors,
+} from "./helpers";
+import {
+  appRouteSmokeGroups,
+  configLinks,
+  moreInfoViewElements,
+} from "./app/src/smoke";
 
 // ---------------------------------------------------------------------------
 // App shell
@@ -169,60 +34,40 @@ async function setLovelaceEditMode(page: Page, editMode: boolean) {
 
 test.describe("App shell", () => {
   test("page loads and ha-test element mounts", async ({ page }) => {
-    const errors: string[] = [];
-    page.on("pageerror", (e) => errors.push(e.message));
+    const errors = trackPageErrors(page);
 
     await goToPanel(page, "/");
 
-    await expect(page.locator("ha-test")).toBeAttached();
-    expect(errors).toHaveLength(0);
+    await expect(page.locator("ha-test")).toBeAttached({
+      timeout: QUICK_TIMEOUT,
+    });
+    expectNoPageErrors(errors, undefined, []);
   });
 
   test("sidebar renders with expected panels", async ({ page }) => {
     await goToPanel(page, "/lovelace");
 
-    // Regular panels use #sidebar-panel-{urlPath} inside ha-sidebar's shadow root
-    for (const urlPath of ["lovelace", "map", "energy", "history"]) {
-      // eslint-disable-next-line no-await-in-loop
-      await expect(
-        page.locator(
-          `ha-test >> home-assistant-main >> ha-sidebar >> #sidebar-panel-${urlPath}`
-        )
-      ).toBeAttached();
-    }
-    // Config has its own special element with id="sidebar-config"
-    await expect(
-      page.locator(
-        `ha-test >> home-assistant-main >> ha-sidebar >> #sidebar-config`
-      )
-    ).toBeAttached();
+    await Promise.all([
+      // Regular panels use #sidebar-panel-{urlPath} inside ha-sidebar's shadow root.
+      ...["lovelace", "map", "energy", "history"].map((urlPath) =>
+        expect(appSidebarPanel(page, urlPath)).toBeAttached({
+          timeout: QUICK_TIMEOUT,
+        })
+      ),
+      // Config has its own special element with id="sidebar-config".
+      expect(appSidebarConfig(page)).toBeAttached({
+        timeout: QUICK_TIMEOUT,
+      }),
+    ]);
   });
 
   test("sidebar navigation changes the active panel", async ({ page }) => {
     await goToPanel(page, "/lovelace");
 
-    const sidebar = page.locator(
-      "ha-test >> home-assistant-main >> ha-sidebar"
-    );
-    await expect(sidebar).toBeAttached({ timeout: SHELL_TIMEOUT });
-
-    const historyLink = sidebar.locator("#sidebar-panel-history");
-    if (!(await historyLink.isVisible().catch(() => false))) {
-      await page.locator("ha-test >> home-assistant-main").evaluate((el) => {
-        el.dispatchEvent(
-          new CustomEvent("hass-toggle-menu", {
-            detail: { open: true },
-            bubbles: true,
-            composed: true,
-          })
-        );
-      });
-    }
-
-    await expect(historyLink).toBeVisible({ timeout: SHELL_TIMEOUT });
+    const historyLink = await ensureAppSidebarPanelVisible(page, "history");
     await historyLink.click();
 
-    await expect(page).toHaveURL(/\/#\/history$/, { timeout: SHELL_TIMEOUT });
+    await expect(page).toHaveURL(/\/#\/history$/, { timeout: QUICK_TIMEOUT });
     await expect(
       page.locator("ha-panel-history, history-panel").first()
     ).toBeAttached({ timeout: PANEL_TIMEOUT });
@@ -231,34 +76,29 @@ test.describe("App shell", () => {
   test("sidebar renders notification badge", async ({ page }) => {
     await goToPanel(page, "/lovelace");
 
-    const sidebar = page.locator(
-      "ha-test >> home-assistant-main >> ha-sidebar"
-    );
-    await expect(sidebar).toBeAttached({ timeout: SHELL_TIMEOUT });
+    const sidebar = appSidebar(page);
+    await expect(sidebar).toBeAttached({ timeout: QUICK_TIMEOUT });
 
     const notificationsLink = sidebar.locator("#sidebar-notifications");
-    await expect(notificationsLink).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expect(notificationsLink).toBeAttached({ timeout: QUICK_TIMEOUT });
     await expect(notificationsLink.locator(".badge").first()).toHaveText("1", {
-      timeout: SHELL_TIMEOUT,
+      timeout: QUICK_TIMEOUT,
     });
   });
 
   test("sidebar marks the active panel as selected", async ({ page }) => {
-    const sidebar = page.locator(
-      "ha-test >> home-assistant-main >> ha-sidebar"
-    );
-    const lovelaceLink = sidebar.locator("#sidebar-panel-lovelace");
-    const historyLink = sidebar.locator("#sidebar-panel-history");
+    const lovelaceLink = appSidebarPanel(page, "lovelace");
+    const historyLink = appSidebarPanel(page, "history");
 
     await goToPanel(page, "/lovelace");
     await expect(lovelaceLink).toHaveClass(/selected/, {
-      timeout: SHELL_TIMEOUT,
+      timeout: QUICK_TIMEOUT,
     });
     await expect(historyLink).not.toHaveClass(/selected/);
 
     await goToPanel(page, "/history");
     await expect(historyLink).toHaveClass(/selected/, {
-      timeout: SHELL_TIMEOUT,
+      timeout: QUICK_TIMEOUT,
     });
     await expect(lovelaceLink).not.toHaveClass(/selected/);
   });
@@ -271,124 +111,16 @@ test.describe("App shell", () => {
     await goToPanel(page, "/?scenario=non-admin#/lovelace");
 
     // Wait for the sidebar to mount before asserting on its contents.
-    await expect(
-      page.locator("ha-test >> home-assistant-main >> ha-sidebar")
-    ).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expect(appSidebar(page)).toBeAttached({ timeout: QUICK_TIMEOUT });
 
     // Config panel is adminOnly — should not appear for non-admin.
-    const configLink = page.locator(
-      `ha-test >> home-assistant-main >> ha-sidebar >> #sidebar-config`
-    );
-    await expect(configLink).not.toBeAttached();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Panel navigation
-// ---------------------------------------------------------------------------
-
-test.describe("Panel navigation", () => {
-  for (const [path, element] of e2ePanelRouteAssertions) {
-    test(`renders registered panel ${path}`, async ({ page }) => {
-      await goToPanel(page, path);
-      await expect(page.locator(element).first()).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-});
-
-test.describe("Panel URL normalization", () => {
-  for (const {
-    name,
-    path,
-    element,
-    url,
-    action,
-  } of URL_NORMALIZATION_ASSERTIONS) {
-    test(name, async ({ page }) => {
-      await goToPanel(page, path);
-      await action?.(page);
-      await expect(page).toHaveURL(url, { timeout: SHELL_TIMEOUT });
-      await expect(page.locator(element).first()).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-});
-
-// ---------------------------------------------------------------------------
-// Tools panel (formerly Developer tools)
-// ---------------------------------------------------------------------------
-
-/**
- * Every tool sub-page reachable under /config/tools, mapped to the custom
- * element tools-router mounts for it (see tools-router.ts). Asserting on the
- * specific element proves the route actually rendered its tool, not just the
- * shared ha-panel-tools shell.
- */
-const TOOLS_SUBPAGES: { route: string; element: string }[] = [
-  { route: "yaml", element: "tools-yaml-config" },
-  { route: "state", element: "tools-state" },
-  { route: "action", element: "tools-action" },
-  { route: "template", element: "tools-template" },
-  { route: "event", element: "tools-event" },
-  { route: "statistics", element: "tools-statistics" },
-  { route: "assist", element: "tools-assist" },
-  { route: "debug", element: "tools-debug" },
-];
-
-test.describe("Tools panel", () => {
-  test("base path renders the tools panel", async ({ page }) => {
-    await goToPanel(page, "/config/tools");
-    await expect(page.locator("ha-panel-tools")).toBeAttached({
-      timeout: PANEL_TIMEOUT,
-    });
-  });
-
-  for (const { route, element } of TOOLS_SUBPAGES) {
-    test(`renders the ${route} sub-page`, async ({ page }) => {
-      await goToPanel(page, `/config/tools/${route}`);
-      await expect(page.locator(element)).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-
-  test("service is an alias for the action tool", async ({ page }) => {
-    await goToPanel(page, "/config/tools/service");
-    await expect(page.locator("tools-action")).toBeAttached({
-      timeout: PANEL_TIMEOUT,
+    await expect(appSidebarConfig(page)).not.toBeAttached({
+      timeout: QUICK_TIMEOUT,
     });
   });
 });
 
-// ---------------------------------------------------------------------------
-// Tools redirects (old developer-tools URLs)
-// ---------------------------------------------------------------------------
-
-test.describe("Tools redirects", () => {
-  // The panel moved from top-level /developer-tools (pre-2026.2) to
-  // /config/developer-tools (2026.2), then was renamed to /config/tools
-  // (2026.8). Both old locations must redirect to the new one, and deep links
-  // must keep their sub-page. See the updateRoute() redirect in
-  // src/layouts/home-assistant.ts.
-  for (const oldBase of ["/developer-tools", "/config/developer-tools"]) {
-    test(`redirects ${oldBase} to the tools panel`, async ({ page }) => {
-      await goToPanel(page, oldBase);
-      await expect(page.locator("ha-panel-tools")).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-
-    test(`redirects ${oldBase}/state to the state tool`, async ({ page }) => {
-      await goToPanel(page, `${oldBase}/state`);
-      await expect(page.locator("tools-state")).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-});
+defineRouteSmokeTests(appRouteSmokeGroups);
 
 // ---------------------------------------------------------------------------
 // Lovelace
@@ -417,7 +149,7 @@ test.describe("Lovelace dashboard", () => {
 // ---------------------------------------------------------------------------
 
 test.describe("Light more-info dialog", () => {
-  for (const { view, element, content } of MORE_INFO_VIEW_ELEMENTS) {
+  for (const { view, element, content } of moreInfoViewElements) {
     test(`opens more-info ${view} view for a light entity`, async ({
       page,
     }) => {
@@ -455,16 +187,7 @@ test.describe("Light more-info dialog", () => {
 
       // Each view should render its own characteristic content, not just an
       // empty shell.
-      for (const { selector, text } of content) {
-        const locator = dialog.locator(selector).first();
-        if (text) {
-          // eslint-disable-next-line no-await-in-loop
-          await expect(locator).toContainText(text, { timeout: QUICK_TIMEOUT });
-        } else {
-          // eslint-disable-next-line no-await-in-loop
-          await expect(locator).toBeAttached({ timeout: QUICK_TIMEOUT });
-        }
-      }
+      await assertElementContent(dialog, content);
     });
   }
 });
@@ -519,144 +242,27 @@ test.describe("Theming", () => {
 // ---------------------------------------------------------------------------
 
 test.describe("Config panel", () => {
-  const DASHBOARD_LINKS = [
-    { href: "/config/integrations", label: "Devices & services" },
-    { href: "/config/automation", label: "Automations & scenes" },
-    { href: "/config/areas", label: "Areas, labels & zones" },
-    { href: "/config/apps", label: "Apps" },
-    { href: "/config/lovelace/dashboards", label: "Dashboards" },
-    { href: "/config/voice-assistants", label: "Voice assistants" },
-    { href: "/config/matter", label: "Matter" },
-    { href: "/config/zha", label: "Zigbee" },
-    { href: "/config/zwave_js", label: "Z-Wave" },
-    { href: "/knx", label: "KNX" },
-    { href: "/config/thread", label: "Thread" },
-    { href: "/config/bluetooth", label: "Bluetooth" },
-    { href: "/config/infrared", label: "Infrared" },
-    { href: "/config/radio-frequency", label: "Radio frequency" },
-    { href: "/insteon", label: "Insteon" },
-    { href: "/config/tags", label: "Tags" },
-    { href: "/config/person", label: "People" },
-    { href: "/config/system", label: "System" },
-    { href: "/config/tools", label: "Tools" },
-    { href: "/config/info", label: "About" },
-  ];
-
-  const CONFIG_ROUTES: { path: string; element: string }[] = [
-    { path: "/config/integrations", element: "ha-config-integrations" },
-    { path: "/config/devices", element: "ha-config-devices" },
-    { path: "/config/entities", element: "ha-config-entities" },
-    { path: "/config/helpers", element: "ha-config-helpers" },
-    { path: "/config/areas", element: "ha-config-areas" },
-    { path: "/config/apps", element: "ha-config-apps" },
-    { path: "/config/app", element: "ha-config-app-dashboard" },
-    { path: "/config/automation", element: "ha-config-automation" },
-    { path: "/config/backup", element: "ha-config-backup" },
-    { path: "/config/scene", element: "ha-config-scene" },
-    { path: "/config/script", element: "ha-config-script" },
-    { path: "/config/blueprint", element: "ha-config-blueprint" },
-    { path: "/config/cloud", element: "ha-config-cloud" },
-    { path: "/config/energy", element: "ha-config-energy" },
-    { path: "/config/hardware", element: "ha-config-hardware" },
-    { path: "/config/labs", element: "ha-config-labs" },
-    { path: "/config/lovelace", element: "ha-config-lovelace" },
-    { path: "/config/person", element: "ha-config-person" },
-    { path: "/config/storage", element: "ha-config-section-storage" },
-    { path: "/config/tags", element: "ha-config-tags" },
-    { path: "/config/users", element: "ha-config-users" },
-    { path: "/config/voice-assistants", element: "ha-config-voice-assistants" },
-    { path: "/config/system", element: "ha-config-system-navigation" },
-    { path: "/config/info", element: "ha-config-info" },
-    { path: "/config/logs", element: "ha-config-logs" },
-    { path: "/config/general", element: "ha-config-section-general" },
-    { path: "/config/updates", element: "ha-config-section-updates" },
-    { path: "/config/repairs", element: "ha-config-repairs-dashboard" },
-    { path: "/config/analytics", element: "ha-config-section-analytics" },
-    { path: "/config/ai-tasks", element: "ha-config-section-ai-tasks" },
-    { path: "/config/labels", element: "ha-config-labels" },
-    { path: "/config/zone", element: "ha-config-zone" },
-    { path: "/config/network", element: "ha-config-section-network" },
-    {
-      path: "/config/application_credentials",
-      element: "ha-config-application-credentials",
-    },
-    { path: "/config/bluetooth", element: "bluetooth-config-dashboard-router" },
-    { path: "/config/dhcp", element: "dhcp-config-panel" },
-    { path: "/config/infrared", element: "infrared-config-dashboard-router" },
-    { path: "/config/matter", element: "matter-config-panel" },
-    { path: "/config/mqtt", element: "mqtt-config-panel" },
-    {
-      path: "/config/radio-frequency",
-      element: "radio-frequency-config-dashboard-router",
-    },
-    { path: "/config/ssdp", element: "ssdp-config-panel" },
-    { path: "/config/thread", element: "thread-config-panel" },
-    { path: "/config/zeroconf", element: "zeroconf-config-panel" },
-    { path: "/config/zha", element: "zha-config-dashboard-router" },
-    { path: "/config/zwave_js", element: "zwave_js-config-router" },
-  ];
-
-  const NESTED_CONFIG_ROUTES: { path: string; element: string }[] = [
-    {
-      path: "/config/integrations/dashboard",
-      element: "ha-config-integrations-dashboard",
-    },
-    {
-      path: "/config/devices/dashboard",
-      element: "ha-config-devices-dashboard",
-    },
-    { path: "/config/areas/dashboard", element: "ha-config-areas-dashboard" },
-    { path: "/config/backup/settings", element: "ha-config-backup-settings" },
-  ];
-
   test("config panel loads without JS errors", async ({ page }) => {
-    const errors: string[] = [];
-    page.on("pageerror", (e) => errors.push(e.message));
+    const errors = trackPageErrors(page);
 
     await goToPanel(page, "/config");
     await expect(
       page.locator("ha-panel-config, ha-config-dashboard").first()
     ).toBeAttached({ timeout: PANEL_TIMEOUT + 5_000 });
 
-    // Filter known pre-existing errors from vendor code
-    const realErrors = errors.filter(
-      (e) => !e.includes("ResizeObserver") && !e.includes("Non-Error")
-    );
-    expect(realErrors).toHaveLength(0);
+    expectNoPageErrors(errors);
   });
 
-  test("dashboard renders key settings links", async ({ page }) => {
+  const getDashboard = async (page) => {
     await goToPanel(page, "/config");
-
     const dashboard = page.locator("ha-config-dashboard");
-    await expect(dashboard).toBeAttached({ timeout: PANEL_TIMEOUT });
+    await expect(dashboard).toBeAttached({ timeout: QUICK_TIMEOUT });
+    return dashboard;
+  };
 
-    for (const { href, label } of DASHBOARD_LINKS) {
-      const link = dashboard.getByRole("link", {
-        name: new RegExp(`^${label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`),
-      });
-      // eslint-disable-next-line no-await-in-loop
-      await expect(link).toHaveAttribute("href", href, {
-        timeout: QUICK_TIMEOUT,
-      });
-    }
-  });
-
-  for (const { path, element } of CONFIG_ROUTES) {
-    test(`renders ${path}`, async ({ page }) => {
-      await goToPanel(page, path);
-      await expect(page.locator(element)).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
-
-  for (const { path, element } of NESTED_CONFIG_ROUTES) {
-    test(`renders ${path}`, async ({ page }) => {
-      await goToPanel(page, path);
-      await expect(page.locator(element)).toBeAttached({
-        timeout: PANEL_TIMEOUT,
-      });
-    });
-  }
+  defineLinkSmokeTests(
+    "config links point to expected pages",
+    configLinks,
+    getDashboard
+  );
 });

test/e2e/app/src/helpers.ts

@@ -0,0 +1,172 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+import {
+  defineParallelSmokeTests,
+  PANEL_TIMEOUT,
+  QUICK_TIMEOUT,
+  SHELL_TIMEOUT,
+} from "../../helpers";
+
+const APP_MAIN_SELECTOR = "ha-test >> home-assistant-main";
+const APP_SIDEBAR_SELECTOR = `${APP_MAIN_SELECTOR} >> ha-sidebar`;
+
+// The app e2e harness is built with __DEMO__=true, which enables hash routing.
+// Scenario selection uses query params at root: /?scenario=foo#/lovelace.
+export async function goToPanel(page: Page, path: string) {
+  const url = path.startsWith("/?") ? path : `/#${path}`;
+  await page.goto(url);
+  await Promise.all([
+    page.waitForSelector("ha-test", {
+      state: "attached",
+      timeout: SHELL_TIMEOUT,
+    }),
+    page.waitForFunction(
+      () => "__mockHass" in window && Boolean(window.__mockHass),
+      undefined,
+      { timeout: SHELL_TIMEOUT }
+    ),
+  ]);
+}
+
+export const appMain = (page: Page) => page.locator(APP_MAIN_SELECTOR);
+
+export const appSidebar = (page: Page) => page.locator(APP_SIDEBAR_SELECTOR);
+
+export const appSidebarPanel = (page: Page, panel: string) =>
+  appSidebar(page).locator(`#sidebar-panel-${panel}`);
+
+export const appSidebarConfig = (page: Page) =>
+  appSidebar(page).locator("#sidebar-config");
+
+export async function openAppSidebar(page: Page) {
+  await appMain(page).evaluate((el) => {
+    el.dispatchEvent(
+      new CustomEvent("hass-toggle-menu", {
+        detail: { open: true },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  });
+}
+
+export async function ensureAppSidebarPanelVisible(page: Page, panel: string) {
+  await expect(appSidebar(page)).toBeAttached({ timeout: QUICK_TIMEOUT });
+
+  const link = appSidebarPanel(page, panel);
+  if (!(await link.isVisible().catch(() => false))) {
+    await openAppSidebar(page);
+  }
+  await expect(link).toBeVisible({ timeout: QUICK_TIMEOUT });
+  return link;
+}
+
+const escapeRegExp = (value: string) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+export interface LinkSmokeCase {
+  href: string;
+  label: string;
+}
+
+export async function assertLink(
+  root: Locator,
+  { href, label }: LinkSmokeCase
+) {
+  const link = root.getByRole("link", {
+    name: new RegExp(`^${escapeRegExp(label)}\\b`),
+  });
+  await expect(link).toHaveAttribute("href", href, {
+    timeout: QUICK_TIMEOUT,
+  });
+}
+
+export function defineLinkSmokeTests(
+  name: string,
+  links: LinkSmokeCase[],
+  getRoot: (page: Page) => Promise<Locator>
+) {
+  test(name, async ({ page }) => {
+    const root = await getRoot(page);
+
+    await Promise.all(
+      links.map((link) =>
+        test.step(`${link.label} links to ${link.href}`, async () => {
+          await assertLink(root, link);
+        })
+      )
+    );
+  });
+}
+
+export interface ElementContentAssertion {
+  selector: string;
+  text?: string;
+}
+
+export interface ViewElementSmokeCase<TView extends string = string> {
+  view: TView;
+  element: string;
+  content: ElementContentAssertion[];
+}
+
+export async function assertElementContent(
+  root: Locator,
+  content: ElementContentAssertion[]
+) {
+  await Promise.all(
+    content.map(({ selector, text }) => {
+      const locator = root.locator(selector).first();
+      return text
+        ? expect(locator).toContainText(text, { timeout: QUICK_TIMEOUT })
+        : expect(locator).toBeAttached({ timeout: QUICK_TIMEOUT });
+    })
+  );
+}
+
+export interface RouteSmokeCase {
+  name?: string;
+  path: string;
+  element: string;
+  url?: RegExp;
+  action?: (page: Page) => Promise<void>;
+}
+
+export interface RouteSmokeGroup {
+  name: string;
+  routes: RouteSmokeCase[];
+  testName?: (route: RouteSmokeCase) => string;
+}
+
+export const routeCase = (path: string, element: string): RouteSmokeCase => ({
+  path,
+  element,
+});
+
+export const routeCases = (routes: [string, string][]): RouteSmokeCase[] =>
+  routes.map(([path, element]) => routeCase(path, element));
+
+export const rendersRoute = (route: RouteSmokeCase) => `renders ${route.path}`;
+
+async function assertRouteSmoke(page: Page, route: RouteSmokeCase) {
+  await goToPanel(page, route.path);
+  await route.action?.(page);
+  if (route.url) {
+    await expect(page).toHaveURL(route.url, { timeout: QUICK_TIMEOUT });
+  }
+  await expect(page.locator(route.element).first()).toBeAttached({
+    timeout: PANEL_TIMEOUT,
+  });
+}
+
+export function defineRouteSmokeTests(groups: RouteSmokeGroup[]) {
+  defineParallelSmokeTests({
+    groups,
+    groupName: (group) => group.name,
+    cases: (group) => group.routes,
+    testName: (route, group) =>
+      route.name ?? group.testName?.(route) ?? rendersRoute(route),
+    run: async ({ page, smokeCase }) => {
+      await assertRouteSmoke(page, smokeCase);
+    },
+  });
+}

test/e2e/app/src/smoke.ts

@@ -0,0 +1,273 @@
+import { expect, type Page } from "@playwright/test";
+import type { MoreInfoView } from "../../../../src/dialogs/more-info/const";
+import { QUICK_TIMEOUT, SHELL_TIMEOUT } from "../../helpers";
+import {
+  rendersRoute,
+  routeCase,
+  routeCases,
+  type LinkSmokeCase,
+  type RouteSmokeCase,
+  type RouteSmokeGroup,
+  type ViewElementSmokeCase,
+} from "./helpers";
+import { e2ePanelRouteAssertions } from "./ha-test-panels";
+
+// ── Config dashboard links ───────────────────────────────────────────────────
+
+export const configLinks: LinkSmokeCase[] = [
+  { href: "/config/integrations", label: "Devices & services" },
+  { href: "/config/automation", label: "Automations & scenes" },
+  { href: "/config/areas", label: "Areas, labels & zones" },
+  { href: "/config/apps", label: "Apps" },
+  { href: "/config/lovelace/dashboards", label: "Dashboards" },
+  { href: "/config/voice-assistants", label: "Voice assistants" },
+  { href: "/config/matter", label: "Matter" },
+  { href: "/config/zha", label: "Zigbee" },
+  { href: "/config/zwave_js", label: "Z-Wave" },
+  { href: "/knx", label: "KNX" },
+  { href: "/config/thread", label: "Thread" },
+  { href: "/config/bluetooth", label: "Bluetooth" },
+  { href: "/config/infrared", label: "Infrared" },
+  { href: "/config/radio-frequency", label: "Radio frequency" },
+  { href: "/insteon", label: "Insteon" },
+  { href: "/config/tags", label: "Tags" },
+  { href: "/config/person", label: "People" },
+  { href: "/config/system", label: "System" },
+  { href: "/config/tools", label: "Tools" },
+  { href: "/config/info", label: "About" },
+];
+
+// ── More-info dialog views ───────────────────────────────────────────────────
+
+export const moreInfoViewElements: ViewElementSmokeCase<MoreInfoView>[] = [
+  {
+    view: "info",
+    element: "ha-more-info-info",
+    content: [
+      { selector: "more-info-light" },
+      { selector: "span.title", text: "Test Light" },
+    ],
+  },
+  {
+    view: "history",
+    element: "ha-more-info-history-and-logbook",
+    // The demo loads the history component but not logbook.
+    content: [{ selector: "ha-more-info-history" }],
+  },
+  {
+    view: "settings",
+    element: "ha-more-info-settings",
+    // The scenario mocks config/entity_registry/get, so the real registry
+    // panel renders instead of the "no unique ID" warning.
+    content: [{ selector: "entity-registry-settings" }],
+  },
+  {
+    view: "related",
+    element: "ha-related-items",
+    // search/related is mocked to return no relations, so the empty list
+    // renders.
+    content: [{ selector: "ha-related-items >> ha-list" }],
+  },
+  {
+    view: "add_to",
+    element: "ha-more-info-add-to",
+    // Admin users get the default add-to action list.
+    content: [{ selector: "ha-add-to-action-list" }],
+  },
+  {
+    view: "details",
+    element: "ha-more-info-details",
+    // The details view renders the state and attributes cards.
+    content: [{ selector: "ha-card" }],
+  },
+];
+
+// ── Route smoke tests ────────────────────────────────────────────────────────
+
+interface E2ELovelaceRoot extends HTMLElement {
+  lovelace?: {
+    setEditMode: (editMode: boolean) => void;
+  };
+}
+
+async function setLovelaceEditMode(page: Page, editMode: boolean) {
+  await page
+    .locator("hui-root")
+    .first()
+    .waitFor({ state: "attached", timeout: QUICK_TIMEOUT });
+  await page
+    .locator("hui-root")
+    .first()
+    .evaluate(async (el: Element, value) => {
+      const root = el as E2ELovelaceRoot;
+      const start = performance.now();
+      await new Promise<void>((resolve, reject) => {
+        const check = () => {
+          if (root.lovelace?.setEditMode) {
+            resolve();
+            return;
+          }
+          if (performance.now() - start > 2000) {
+            reject(new Error("Lovelace edit mode action was not available"));
+            return;
+          }
+          requestAnimationFrame(check);
+        };
+        check();
+      });
+      root.lovelace!.setEditMode(value);
+    }, editMode);
+}
+
+const PANEL_ROUTE_ASSERTIONS = Array.from(
+  e2ePanelRouteAssertions,
+  ([path, element]) => routeCase(path, element)
+);
+
+const URL_NORMALIZATION_ASSERTIONS: RouteSmokeCase[] = [
+  {
+    name: "keeps the todo panel when adding the selected entity query",
+    path: "/todo",
+    element: "ha-panel-todo",
+    url: /\/\?entity_id=todo\.shopping_list#\/todo$/,
+  },
+  {
+    name: "keeps the history panel when removing the back query",
+    path: "/?back=1#/history",
+    element: "ha-panel-history, history-panel",
+    url: /\/#\/history$/,
+  },
+  {
+    name: "keeps the logbook panel when removing the back query",
+    path: "/?back=1#/logbook",
+    element: "ha-panel-logbook",
+    url: /\/#\/logbook$/,
+  },
+  {
+    name: "keeps the lovelace panel when removing the edit query",
+    path: "/lovelace",
+    element: "ha-panel-lovelace, hui-root",
+    url: /\/#\/lovelace\/home$/,
+    action: async (page) => {
+      await setLovelaceEditMode(page, true);
+      await expect(page).toHaveURL(/\/\?edit=1#\/lovelace\/home$/, {
+        timeout: SHELL_TIMEOUT,
+      });
+      await setLovelaceEditMode(page, false);
+    },
+  },
+];
+
+const TOOLS_SUBPAGES: { route: string; element: string }[] = [
+  { route: "yaml", element: "tools-yaml-config" },
+  { route: "state", element: "tools-state" },
+  { route: "action", element: "tools-action" },
+  { route: "template", element: "tools-template" },
+  { route: "event", element: "tools-event" },
+  { route: "statistics", element: "tools-statistics" },
+  { route: "assist", element: "tools-assist" },
+  { route: "debug", element: "tools-debug" },
+];
+
+const TOOLS_ROUTE_ASSERTIONS = [
+  routeCase("/config/tools", "ha-panel-tools"),
+  ...TOOLS_SUBPAGES.map(({ route, element }) =>
+    routeCase(`/config/tools/${route}`, element)
+  ),
+  routeCase("/config/tools/service", "tools-action"),
+];
+
+const TOOLS_REDIRECT_ASSERTIONS = [
+  ...["/developer-tools", "/config/developer-tools"].flatMap((oldBase) => [
+    routeCase(oldBase, "ha-panel-tools"),
+    routeCase(`${oldBase}/state`, "tools-state"),
+  ]),
+];
+
+const CONFIG_ROUTES = routeCases([
+  ["/config/integrations", "ha-config-integrations"],
+  ["/config/devices", "ha-config-devices"],
+  ["/config/entities", "ha-config-entities"],
+  ["/config/helpers", "ha-config-helpers"],
+  ["/config/areas", "ha-config-areas"],
+  ["/config/apps", "ha-config-apps"],
+  ["/config/app", "ha-config-app-dashboard"],
+  ["/config/automation", "ha-config-automation"],
+  ["/config/backup", "ha-config-backup"],
+  ["/config/scene", "ha-config-scene"],
+  ["/config/script", "ha-config-script"],
+  ["/config/blueprint", "ha-config-blueprint"],
+  ["/config/cloud", "ha-config-cloud"],
+  ["/config/energy", "ha-config-energy"],
+  ["/config/hardware", "ha-config-hardware"],
+  ["/config/labs", "ha-config-labs"],
+  ["/config/lovelace", "ha-config-lovelace"],
+  ["/config/person", "ha-config-person"],
+  ["/config/storage", "ha-config-section-storage"],
+  ["/config/tags", "ha-config-tags"],
+  ["/config/users", "ha-config-users"],
+  ["/config/voice-assistants", "ha-config-voice-assistants"],
+  ["/config/system", "ha-config-system-navigation"],
+  ["/config/info", "ha-config-info"],
+  ["/config/logs", "ha-config-logs"],
+  ["/config/general", "ha-config-section-general"],
+  ["/config/updates", "ha-config-section-updates"],
+  ["/config/repairs", "ha-config-repairs-dashboard"],
+  ["/config/analytics", "ha-config-section-analytics"],
+  ["/config/ai-tasks", "ha-config-section-ai-tasks"],
+  ["/config/labels", "ha-config-labels"],
+  ["/config/zone", "ha-config-zone"],
+  ["/config/network", "ha-config-section-network"],
+  ["/config/application_credentials", "ha-config-application-credentials"],
+  ["/config/bluetooth", "bluetooth-config-dashboard-router"],
+  ["/config/dhcp", "dhcp-config-panel"],
+  ["/config/infrared", "infrared-config-dashboard-router"],
+  ["/config/matter", "matter-config-panel"],
+  ["/config/mqtt", "mqtt-config-panel"],
+  ["/config/radio-frequency", "radio-frequency-config-dashboard-router"],
+  ["/config/ssdp", "ssdp-config-panel"],
+  ["/config/thread", "thread-config-panel"],
+  ["/config/zeroconf", "zeroconf-config-panel"],
+  ["/config/zha", "zha-config-dashboard-router"],
+  ["/config/zwave_js", "zwave_js-config-router"],
+]);
+
+const NESTED_CONFIG_ROUTES = routeCases([
+  ["/config/integrations/dashboard", "ha-config-integrations-dashboard"],
+  ["/config/devices/dashboard", "ha-config-devices-dashboard"],
+  ["/config/areas/dashboard", "ha-config-areas-dashboard"],
+  ["/config/backup/settings", "ha-config-backup-settings"],
+]);
+
+export const appRouteSmokeGroups: RouteSmokeGroup[] = [
+  {
+    name: "Panel navigation",
+    routes: PANEL_ROUTE_ASSERTIONS,
+    testName: (route) => `renders registered panel ${route.path}`,
+  },
+  {
+    name: "Panel URL normalization",
+    routes: URL_NORMALIZATION_ASSERTIONS,
+    testName: (route) => route.name!,
+  },
+  {
+    name: "Tools panel",
+    routes: TOOLS_ROUTE_ASSERTIONS,
+    testName: rendersRoute,
+  },
+  {
+    name: "Tools redirects",
+    routes: TOOLS_REDIRECT_ASSERTIONS,
+    testName: (route) => `redirects ${route.path}`,
+  },
+  {
+    name: "Config routes",
+    routes: CONFIG_ROUTES,
+    testName: rendersRoute,
+  },
+  {
+    name: "Nested config routes",
+    routes: NESTED_CONFIG_ROUTES,
+    testName: rendersRoute,
+  },
+];

test/e2e/collect-blob-reports.mjs

@@ -5,6 +5,29 @@
 // Usage: node test/e2e/collect-blob-reports.mjs
 
 import { cpSync, mkdirSync, readdirSync, rmSync } from "fs";
+import { join, relative } from "path";
+
+const findBlobReports = (dir) => {
+  const files = [];
+  const walk = (currentDir) => {
+    for (const entry of readdirSync(currentDir, { withFileTypes: true })) {
+      const entryPath = join(currentDir, entry.name);
+      if (entry.isDirectory()) {
+        walk(entryPath);
+      } else if (entry.name.endsWith(".zip")) {
+        files.push(entryPath);
+      }
+    }
+  };
+
+  try {
+    walk(dir);
+  } catch {
+    return undefined;
+  }
+
+  return files;
+};
 
 const dest = "test/e2e/reports/blob";
 rmSync(dest, { recursive: true, force: true });
@@ -12,10 +35,8 @@ mkdirSync(dest, { recursive: true });
 
 for (const suite of ["demo", "app", "gallery"]) {
   const src = `test/e2e/reports/${suite}`;
-  let files;
-  try {
-    files = readdirSync(src).filter((f) => f.endsWith(".zip"));
-  } catch {
+  const files = findBlobReports(src);
+  if (!files?.length) {
     // Suite report directory doesn't exist (e.g. job was skipped or failed
     // before uploading). Skip gracefully.
     process.stderr.write(
@@ -24,6 +45,7 @@ for (const suite of ["demo", "app", "gallery"]) {
     continue;
   }
   for (const file of files) {
-    cpSync(`${src}/${file}`, `${dest}/${suite}-${file}`);
+    const name = relative(src, file).replace(/[\\/]/g, "-");
+    cpSync(file, join(dest, `${suite}-${name}`));
   }
 }

test/e2e/demo.spec.ts

@@ -1,146 +1,68 @@
 import { expect, test } from "@playwright/test";
 import {
+  expectNoPageErrors,
   NAVIGATION_TIMEOUT,
   PANEL_TIMEOUT,
   QUICK_TIMEOUT,
   SHELL_TIMEOUT,
-  appErrors as filterAppErrors,
+  trackPageErrors,
 } from "./helpers";
+import {
+  activateDemoSidebarPanel,
+  demoCardSelector,
+  moreInfoCardSelector,
+  openDemoSidebar,
+  waitForDemoReady,
+} from "./demo/helpers";
 
 test.describe("Home Assistant Demo", () => {
-  // Collect JS errors during each test so we can assert no unexpected crashes.
-  let pageErrors: Error[] = [];
+  let pageErrors: ReturnType<typeof trackPageErrors>;
 
   test.beforeEach(async ({ page }) => {
-    pageErrors = [];
-    page.on("pageerror", (err) => pageErrors.push(err));
+    pageErrors = trackPageErrors(page);
     await page.goto("/");
   });
 
-  function appErrors() {
-    return filterAppErrors(pageErrors);
-  }
-
-  // ── 1. Page loads ──────────────────────────────────────────────────────────
-
   test("page loads and ha-demo mounts without JS errors", async ({ page }) => {
-    // The custom element is present in the document
-    await expect(page.locator("ha-demo")).toBeAttached({
-      timeout: NAVIGATION_TIMEOUT,
-    });
+    await waitForDemoReady(page);
 
-    // The launch screen should disappear once the app is ready
-    await expect(page.locator("#ha-launch-screen")).toBeHidden({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-
-    // No unhandled JS exceptions
-    expect(appErrors()).toHaveLength(0);
+    expectNoPageErrors(pageErrors);
   });
 
-  // ── 2. Dashboard renders ───────────────────────────────────────────────────
-
   test("dashboard renders Lovelace cards", async ({ page }) => {
-    await expect(page.locator("ha-demo")).toBeAttached({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-    await expect(page.locator("#ha-launch-screen")).toBeHidden({
-      timeout: NAVIGATION_TIMEOUT,
-    });
+    await waitForDemoReady(page);
 
-    const cardSelector = [
-      "hui-tile-card",
-      "hui-entity-card",
-      "hui-glance-card",
-      "hui-button-card",
-      "hui-markdown-card",
-    ].join(", ");
-
-    await expect(page.locator(cardSelector).first()).toBeVisible({
+    await expect(page.locator(demoCardSelector).first()).toBeVisible({
       timeout: PANEL_TIMEOUT,
     });
   });
 
-  // ── 3. Sidebar navigation ─────────────────────────────────────────────────
-
   test("sidebar navigation changes the active panel", async ({ page }) => {
-    await expect(page.locator("ha-demo")).toBeAttached({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-    await expect(page.locator("#ha-launch-screen")).toBeHidden({
-      timeout: NAVIGATION_TIMEOUT,
-    });
+    await waitForDemoReady(page);
+    await openDemoSidebar(page);
+    await activateDemoSidebarPanel(page, "map");
 
-    // On narrow viewports (< 870 px — mobile / tablet) the sidebar lives
-    // inside a modal drawer that is closed by default. Open it first via
-    // the ha-menu-button in the top app-bar.
-    const menuButton = page.locator("ha-menu-button");
-    if (await menuButton.isVisible()) {
-      await menuButton.click();
-      await expect(page.locator("ha-sidebar")).toBeVisible({
-        timeout: SHELL_TIMEOUT,
-      });
-    } else {
-      await expect(page.locator("ha-sidebar")).toBeAttached({
-        timeout: NAVIGATION_TIMEOUT,
-      });
-    }
-
-    const candidatePanels = ["map", "logbook", "history", "config"];
-
-    let clicked = false;
-    for (const panel of candidatePanels) {
-      const navItem = page.locator(`#sidebar-panel-${panel}`);
-      // eslint-disable-next-line no-await-in-loop
-      const visible = await navItem.isVisible().catch(() => false);
-      if (visible) {
-        // eslint-disable-next-line no-await-in-loop
-        await navItem.click();
-        // eslint-disable-next-line no-await-in-loop
-        await expect(page).toHaveURL(new RegExp(`/${panel}`), {
-          timeout: SHELL_TIMEOUT,
-        });
-        clicked = true;
-        break;
-      }
-    }
-
-    expect(clicked, "No known sidebar panel was found to click").toBe(true);
-    expect(appErrors()).toHaveLength(0);
+    expectNoPageErrors(pageErrors);
   });
 
-  // ── 4. More info dialog ───────────────────────────────────────────────────
-
   test("clicking an entity card opens the more-info dialog", async ({
     page,
   }) => {
-    await expect(page.locator("ha-demo")).toBeAttached({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-    await expect(page.locator("#ha-launch-screen")).toBeHidden({
+    await waitForDemoReady(page);
+
+    // Tile cards are the most common card type in the demo; fall back to other
+    // clickable card types in case this platform renders a different layout.
+    await expect(page.locator(moreInfoCardSelector).first()).toBeVisible({
       timeout: NAVIGATION_TIMEOUT,
     });
+    await page.locator(moreInfoCardSelector).first().click();
 
-    // Tile cards are the most common card type in the demo; they open the
-    // more-info dialog on click. Fall back to other clickable card types in
-    // case the demo layout on this platform doesn't include tile cards.
-    const cardSelector =
-      "hui-tile-card, hui-entity-card, hui-button-card, hui-glance-card";
-
-    await expect(page.locator(cardSelector).first()).toBeVisible({
-      timeout: NAVIGATION_TIMEOUT,
-    });
-    await page.locator(cardSelector).first().click();
-
-    // The more-info dialog is a top-level custom element appended to the body.
-    // We verify it is attached, then confirm it rendered by checking the title
-    // span which is slotted into the light DOM and has real layout dimensions.
     const dialog = page.locator("ha-more-info-dialog");
     await expect(dialog).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expect(dialog.locator("span.title")).toBeVisible({
+      timeout: QUICK_TIMEOUT,
+    });
 
-    const title = dialog.locator("span.title");
-    await expect(title).toBeVisible({ timeout: QUICK_TIMEOUT });
-
-    expect(appErrors()).toHaveLength(0);
+    expectNoPageErrors(pageErrors);
   });
 });

test/e2e/demo/helpers.ts

@@ -0,0 +1,54 @@
+import { expect, type Page } from "@playwright/test";
+import { NAVIGATION_TIMEOUT, SHELL_TIMEOUT } from "../helpers";
+
+export const demoCardSelector = [
+  "hui-tile-card",
+  "hui-entity-card",
+  "hui-glance-card",
+  "hui-button-card",
+  "hui-markdown-card",
+].join(", ");
+
+export const moreInfoCardSelector =
+  "hui-tile-card, hui-entity-card, hui-button-card, hui-glance-card";
+
+export async function waitForDemoReady(page: Page) {
+  await expect(page.locator("ha-demo")).toBeAttached({
+    timeout: NAVIGATION_TIMEOUT,
+  });
+  await expect(page.locator("#ha-launch-screen")).toBeHidden({
+    timeout: NAVIGATION_TIMEOUT,
+  });
+}
+
+export async function openDemoSidebar(page: Page) {
+  const menuButton = page.locator("ha-menu-button");
+  if (await menuButton.isVisible()) {
+    const modalDrawer = page.locator("ha-drawer").locator("wa-drawer");
+    await Promise.all([
+      modalDrawer.evaluate(
+        (element) =>
+          new Promise<void>((resolve) => {
+            element.addEventListener("wa-after-show", () => resolve(), {
+              once: true,
+            });
+          })
+      ),
+      menuButton.click(),
+    ]);
+    return;
+  }
+
+  await expect(page.locator("ha-sidebar")).toBeAttached({
+    timeout: NAVIGATION_TIMEOUT,
+  });
+}
+
+export async function activateDemoSidebarPanel(page: Page, panel: string) {
+  const navItem = page.locator(`#sidebar-panel-${panel}`);
+  await expect(navItem).toBeVisible({ timeout: SHELL_TIMEOUT });
+  await navItem.click();
+  await expect(page).toHaveURL(new RegExp(`/${panel}(?:/|$)`), {
+    timeout: SHELL_TIMEOUT,
+  });
+}

test/e2e/gallery.spec.ts

@@ -7,362 +7,117 @@
  * Run with:
  *   yarn test:e2e:gallery
  */
-import { test, expect, type Page } from "@playwright/test";
-import { QUICK_TIMEOUT, SHELL_TIMEOUT } from "./helpers";
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/** Navigate to a gallery page via hash and wait for it to render. */
-async function goToGalleryPage(page: Page, hash: string) {
-  // First visit to let ha-gallery boot up
-  await page.goto(`/#${hash}`);
-  await page.waitForSelector("ha-gallery", { state: "attached" });
-  // Wait for the demo element to appear in ha-gallery's shadow root.
-  // The element name is derived from the hash: "components/ha-bar" → "demo-components-ha-bar".
-  // page-description is only rendered for pages that have a description field,
-  // so we cannot use it as a universal readiness signal.
-  const demoTag = `demo-${hash.replace("/", "-")}`;
-  await page.waitForFunction((tag) => {
-    const gallery = document.querySelector("ha-gallery") as any;
-    return gallery?.shadowRoot?.querySelector(tag) != null;
-  }, demoTag);
-}
-
-/** Assert a gallery page loads without console errors.
- * Demo elements live inside ha-gallery's shadow root — use >> to pierce it.
- */
-async function assertPageLoads(page: Page, hash: string, selector: string) {
-  const errors: string[] = [];
-  page.on("pageerror", (e) => errors.push(e.message));
-
-  await goToGalleryPage(page, hash);
-
-  // Pierce ha-gallery's shadow root with >>
-  await expect(page.locator(`ha-gallery >> ${selector}`).first()).toBeAttached({
-    timeout: SHELL_TIMEOUT,
-  });
-
-  const realErrors = errors.filter(
-    (e) => !IGNORED_ERRORS.some((re) => re.test(e))
-  );
-  expect(
-    realErrors,
-    `JS errors on ${hash}: ${realErrors.join("; ")}`
-  ).toHaveLength(0);
-}
-
-// Errors that are gallery-harness artifacts rather than bugs in the component
-// under test. The Lit-context init-error family that used to live here is gone:
-// ha-gallery now provides fallback contexts for every demo (mirroring the real
-// app's root), so context-consuming components resolve `localize`, formatters,
-// config, etc. synchronously instead of throwing during init.
-const IGNORED_ERRORS: RegExp[] = [
-  /ResizeObserver/,
-  /Non-Error/,
-  /Extension context/,
-  // Plain objects thrown by mock WebSocket/data-fetch show up as "Object".
-  /^Object$/,
-  // hui-group-entity-row calls .some() on a possibly-undefined entity_id array
-  // from mock state data — pre-existing gallery data issue.
-  /Cannot read properties of undefined \(reading 'some'\)/,
-];
-
-// ---------------------------------------------------------------------------
-// Gallery shell
-// ---------------------------------------------------------------------------
+import { test, expect } from "@playwright/test";
+import {
+  expectNoPageErrors,
+  QUICK_TIMEOUT,
+  SHELL_TIMEOUT,
+  trackPageErrors,
+} from "./helpers";
+import {
+  defineGallerySmokeTests,
+  expectGalleryDemoElement,
+  galleryLocator,
+  getGalleryDemo,
+  goToGalleryHome,
+  GALLERY_SHELL_IGNORED_PAGE_ERRORS,
+} from "./gallery/helpers";
+import { componentPages, lovelacePages, moreInfoPages } from "./gallery/pages";
 
 test.describe("Gallery shell", () => {
   test("page loads and ha-gallery mounts", async ({ page }) => {
-    const errors: string[] = [];
-    page.on("pageerror", (e) => errors.push(e.message));
+    const errors = trackPageErrors(page);
 
-    await page.goto("/");
-    await expect(page.locator("ha-gallery")).toBeAttached({
-      timeout: SHELL_TIMEOUT,
-    });
+    await goToGalleryHome(page);
 
-    const realErrors = errors.filter(
-      (e) => !e.includes("ResizeObserver") && !e.includes("Non-Error")
-    );
-    expect(realErrors).toHaveLength(0);
+    expectNoPageErrors(errors, undefined, GALLERY_SHELL_IGNORED_PAGE_ERRORS);
   });
 
   test("sidebar renders navigation links", async ({ page }) => {
-    await page.goto("/");
-    await page.waitForSelector("ha-gallery", { state: "attached" });
-    // The gallery drawer sidebar is inside ha-gallery's shadow root
-    await expect(page.locator("ha-gallery >> ha-drawer")).toBeAttached({
+    await goToGalleryHome(page);
+    await expect(galleryLocator(page, "ha-drawer")).toBeAttached({
       timeout: QUICK_TIMEOUT,
     });
   });
 });
 
-// ---------------------------------------------------------------------------
-// Component pages
-// ---------------------------------------------------------------------------
-
-const componentPages: { name: string; selector: string }[] = [
-  { name: "ha-alert", selector: "demo-components-ha-alert" },
-  { name: "ha-badge", selector: "demo-components-ha-badge" },
-  { name: "ha-bar", selector: "demo-components-ha-bar" },
-  { name: "ha-button", selector: "demo-components-ha-button" },
-  { name: "ha-chips", selector: "demo-components-ha-chips" },
-  { name: "ha-control-button", selector: "demo-components-ha-control-button" },
-  {
-    name: "ha-control-circular-slider",
-    selector: "demo-components-ha-control-circular-slider",
-  },
-  {
-    name: "ha-control-number-buttons",
-    selector: "demo-components-ha-control-number-buttons",
-  },
-  {
-    name: "ha-control-select-menu",
-    selector: "demo-components-ha-control-select-menu",
-  },
-  { name: "ha-control-select", selector: "demo-components-ha-control-select" },
-  { name: "ha-control-slider", selector: "demo-components-ha-control-slider" },
-  { name: "ha-control-switch", selector: "demo-components-ha-control-switch" },
-  { name: "ha-dialog", selector: "demo-components-ha-dialog" },
-  { name: "ha-dropdown", selector: "demo-components-ha-dropdown" },
-  {
-    name: "ha-expansion-panel",
-    selector: "demo-components-ha-expansion-panel",
-  },
-  { name: "ha-faded", selector: "demo-components-ha-faded" },
-  { name: "ha-form", selector: "demo-components-ha-form" },
-  { name: "ha-gauge", selector: "demo-components-ha-gauge" },
-  {
-    name: "ha-hs-color-picker",
-    selector: "demo-components-ha-hs-color-picker",
-  },
-  { name: "ha-input", selector: "demo-components-ha-input" },
-  { name: "ha-label-badge", selector: "demo-components-ha-label-badge" },
-  { name: "ha-list", selector: "demo-components-ha-list" },
-  { name: "ha-marquee-text", selector: "demo-components-ha-marquee-text" },
-  {
-    name: "ha-progress-button",
-    selector: "demo-components-ha-progress-button",
-  },
-  { name: "ha-select-box", selector: "demo-components-ha-select-box" },
-  { name: "ha-selector", selector: "demo-components-ha-selector" },
-  { name: "ha-slider", selector: "demo-components-ha-slider" },
-  { name: "ha-spinner", selector: "demo-components-ha-spinner" },
-  { name: "ha-switch", selector: "demo-components-ha-switch" },
-  { name: "ha-textarea", selector: "demo-components-ha-textarea" },
-  { name: "ha-tip", selector: "demo-components-ha-tip" },
-  { name: "ha-tooltip", selector: "demo-components-ha-tooltip" },
-  {
-    name: "ha-adaptive-dialog",
-    selector: "demo-components-ha-adaptive-dialog",
-  },
-  {
-    name: "ha-adaptive-popover",
-    selector: "demo-components-ha-adaptive-popover",
-  },
-];
-
-test.describe("Components", () => {
-  for (const { name, selector } of componentPages) {
-    test(`${name} renders without errors`, async ({ page }) => {
-      await assertPageLoads(page, `components/${name}`, selector);
-    });
-  }
-});
-
-// ---------------------------------------------------------------------------
-// More-info pages
-// ---------------------------------------------------------------------------
-
-const moreInfoPages: { name: string; selector: string }[] = [
-  { name: "light", selector: "demo-more-info-light" },
-  { name: "climate", selector: "demo-more-info-climate" },
-  { name: "cover", selector: "demo-more-info-cover" },
-  { name: "fan", selector: "demo-more-info-fan" },
-  { name: "humidifier", selector: "demo-more-info-humidifier" },
-  { name: "input-number", selector: "demo-more-info-input-number" },
-  { name: "input-text", selector: "demo-more-info-input-text" },
-  { name: "lawn-mower", selector: "demo-more-info-lawn-mower" },
-  { name: "lock", selector: "demo-more-info-lock" },
-  { name: "media-player", selector: "demo-more-info-media-player" },
-  { name: "number", selector: "demo-more-info-number" },
-  { name: "scene", selector: "demo-more-info-scene" },
-  { name: "timer", selector: "demo-more-info-timer" },
-  { name: "update", selector: "demo-more-info-update" },
-  { name: "vacuum", selector: "demo-more-info-vacuum" },
-  { name: "water-heater", selector: "demo-more-info-water-heater" },
-];
-
-test.describe("More-info dialogs", () => {
-  for (const { name, selector } of moreInfoPages) {
-    test(`more-info ${name} renders without errors`, async ({ page }) => {
-      await assertPageLoads(page, `more-info/${name}`, selector);
-    });
-  }
-});
-
-// ---------------------------------------------------------------------------
-// Lovelace card pages
-// ---------------------------------------------------------------------------
-
-const lovelacePages: { name: string; selector: string }[] = [
-  { name: "area-card", selector: "demo-lovelace-area-card" },
-  { name: "conditional-card", selector: "demo-lovelace-conditional-card" },
-  { name: "entities-card", selector: "demo-lovelace-entities-card" },
-  { name: "entity-button-card", selector: "demo-lovelace-entity-button-card" },
-  { name: "entity-filter-card", selector: "demo-lovelace-entity-filter-card" },
-  { name: "gauge-card", selector: "demo-lovelace-gauge-card" },
-  { name: "glance-card", selector: "demo-lovelace-glance-card" },
-  {
-    name: "grid-and-stack-card",
-    selector: "demo-lovelace-grid-and-stack-card",
-  },
-  { name: "iframe-card", selector: "demo-lovelace-iframe-card" },
-  { name: "light-card", selector: "demo-lovelace-light-card" },
-  { name: "map-card", selector: "demo-lovelace-map-card" },
-  { name: "markdown-card", selector: "demo-lovelace-markdown-card" },
-  { name: "media-control-card", selector: "demo-lovelace-media-control-card" },
-  { name: "media-player-row", selector: "demo-lovelace-media-player-row" },
-  { name: "picture-card", selector: "demo-lovelace-picture-card" },
-  {
-    name: "picture-elements-card",
-    selector: "demo-lovelace-picture-elements-card",
-  },
-  {
-    name: "picture-entity-card",
-    selector: "demo-lovelace-picture-entity-card",
-  },
-  {
-    name: "picture-glance-card",
-    selector: "demo-lovelace-picture-glance-card",
-  },
-  { name: "thermostat-card", selector: "demo-lovelace-thermostat-card" },
-  { name: "tile-card", selector: "demo-lovelace-tile-card" },
-  { name: "todo-list-card", selector: "demo-lovelace-todo-list-card" },
-];
-
-test.describe("Lovelace cards", () => {
-  for (const { name, selector } of lovelacePages) {
-    test(`${name} renders without errors`, async ({ page }) => {
-      await assertPageLoads(page, `lovelace/${name}`, selector);
-    });
-  }
-});
-
-// ---------------------------------------------------------------------------
-// Specific interaction tests
-// ---------------------------------------------------------------------------
+defineGallerySmokeTests("Components", "components", componentPages);
+defineGallerySmokeTests("More-info dialogs", "more-info", moreInfoPages);
+defineGallerySmokeTests("Lovelace cards", "lovelace", lovelacePages);
 
 test.describe("Component interactions", () => {
   test("ha-alert renders all four types", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-alert");
-    const demo = page.locator("ha-gallery >> demo-components-ha-alert");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
+    const demo = await getGalleryDemo(page, "components/ha-alert");
 
-    // The demo uses property binding (.alertType) not attribute binding,
-    // so we verify that multiple ha-alert elements are present.
+    // The demo uses property binding (.alertType) not attribute binding, so we
+    // verify that multiple ha-alert elements are present.
     const alerts = demo.locator("ha-alert");
-    await expect(alerts.first()).toBeAttached({ timeout: QUICK_TIMEOUT });
-    // There should be at least 4 alerts (one per type)
-    await expect(alerts)
-      .toHaveCount(4, { timeout: QUICK_TIMEOUT })
-      .catch(async () => {
-        // If not exactly 4, just verify there are some (demo may include more)
-        const count = await alerts.count();
-        expect(count).toBeGreaterThanOrEqual(4);
-      });
+    await expect(alerts.nth(3)).toBeAttached({ timeout: QUICK_TIMEOUT });
   });
 
   test("ha-button renders primary action button", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-button");
-    const demo = page.locator("ha-gallery >> demo-components-ha-button");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    await expect(demo.locator("ha-button, mwc-button").first()).toBeAttached({
-      timeout: QUICK_TIMEOUT,
-    });
+    const demo = await getGalleryDemo(page, "components/ha-button");
+
+    await expectGalleryDemoElement(demo, "ha-button, mwc-button");
   });
 
   test("ha-control-slider can be found in DOM", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-control-slider");
-    const demo = page.locator(
-      "ha-gallery >> demo-components-ha-control-slider"
-    );
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    await expect(demo.locator("ha-control-slider").first()).toBeAttached({
-      timeout: QUICK_TIMEOUT,
-    });
+    const demo = await getGalleryDemo(page, "components/ha-control-slider");
+
+    await expectGalleryDemoElement(demo, "ha-control-slider");
   });
 
   test("ha-form renders schema-driven fields", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-form");
-    const demo = page.locator("ha-gallery >> demo-components-ha-form");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    await expect(demo.locator("ha-form").first()).toBeAttached({
-      timeout: QUICK_TIMEOUT,
-    });
-  });
+    const demo = await getGalleryDemo(page, "components/ha-form");
 
-  test("ha-dialog demo renders a dialog trigger", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-dialog");
-    const demo = page.locator("ha-gallery >> demo-components-ha-dialog");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expectGalleryDemoElement(demo, "ha-form");
   });
 
   test("tile-card renders entity state", async ({ page }) => {
-    await goToGalleryPage(page, "lovelace/tile-card");
-    const demo = page.locator("ha-gallery >> demo-lovelace-tile-card");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    await expect(demo.locator("hui-tile-card").first()).toBeAttached({
-      timeout: QUICK_TIMEOUT,
-    });
+    const demo = await getGalleryDemo(page, "lovelace/tile-card");
+
+    await expectGalleryDemoElement(demo, "hui-tile-card");
   });
 
   test("more-info light renders controls", async ({ page }) => {
-    await goToGalleryPage(page, "more-info/light");
-    const demo = page.locator("ha-gallery >> demo-more-info-light");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    // Light more-info should contain a brightness or color-temp control
-    await expect(
-      demo
-        .locator("ha-control-slider, ha-more-info-light, more-info-content")
-        .first()
-    ).toBeAttached({ timeout: SHELL_TIMEOUT });
-  });
+    const demo = await getGalleryDemo(page, "more-info/light");
 
-  test("more-info cover renders position controls", async ({ page }) => {
-    await goToGalleryPage(page, "more-info/cover");
-    const demo = page.locator("ha-gallery >> demo-more-info-cover");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
+    await expectGalleryDemoElement(
+      demo,
+      "ha-control-slider, ha-more-info-light, more-info-content",
+      SHELL_TIMEOUT
+    );
   });
 
   test("ha-gauge renders a gauge element", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-gauge");
-    const demo = page.locator("ha-gallery >> demo-components-ha-gauge");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
-    // ha-gauge page is markdown-based; gauge elements render in the description area
-    await expect(page.locator("ha-gallery >> ha-gauge").first()).toBeAttached({
+    await getGalleryDemo(page, "components/ha-gauge");
+
+    // ha-gauge page is markdown-based; gauge elements render in the description area.
+    await expect(galleryLocator(page, "ha-gauge").first()).toBeAttached({
       timeout: QUICK_TIMEOUT,
     });
   });
 
   test("ha-switch toggles state on click", async ({ page }) => {
-    await goToGalleryPage(page, "components/ha-switch");
-    const demo = page.locator("ha-gallery >> demo-components-ha-switch");
-    await expect(demo).toBeAttached({ timeout: SHELL_TIMEOUT });
+    const demo = await getGalleryDemo(page, "components/ha-switch");
 
     // Find the first interactive (non-disabled) switch. Pull its checked state
-    // from the property — ha-switch toggles via property, not the attribute.
+    // from the property because ha-switch toggles via property, not attribute.
     const switchEl = demo.locator("ha-switch:not([disabled])").first();
     await expect(switchEl).toBeAttached({ timeout: QUICK_TIMEOUT });
 
-    const before = await switchEl.evaluate((el: any) => el.checked === true);
+    const before = await switchEl.evaluate(
+      (el: HTMLElement & { checked?: boolean }) => el.checked === true
+    );
     await switchEl.click();
     await expect
-      .poll(() => switchEl.evaluate((el: any) => el.checked === true), {
-        timeout: QUICK_TIMEOUT,
-      })
+      .poll(
+        () =>
+          switchEl.evaluate(
+            (el: HTMLElement & { checked?: boolean }) => el.checked === true
+          ),
+        { timeout: QUICK_TIMEOUT }
+      )
       .toBe(!before);
   });
 });

test/e2e/gallery/helpers.ts

@@ -0,0 +1,98 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+import {
+  defineParallelSmokeTests,
+  expectNoPageErrors,
+  QUICK_TIMEOUT,
+  SHELL_TIMEOUT,
+  trackPageErrors,
+} from "../helpers";
+
+export const GALLERY_SHELL_IGNORED_PAGE_ERRORS: RegExp[] = [
+  /ResizeObserver/,
+  /Non-Error/,
+];
+
+export const GALLERY_IGNORED_PAGE_ERRORS: RegExp[] = [
+  ...GALLERY_SHELL_IGNORED_PAGE_ERRORS,
+  /Extension context/,
+  // Plain objects thrown by mock WebSocket/data-fetch show up as "Object".
+  /^Object$/,
+  // hui-group-entity-row calls .some() on a possibly-undefined entity_id array
+  // from mock state data - pre-existing gallery data issue.
+  /Cannot read properties of undefined \(reading 'some'\)/,
+];
+
+export interface GalleryPageSmokeCase {
+  name: string;
+  selector: string;
+}
+
+export const galleryLocator = (page: Page, selector: string) =>
+  page.locator(`ha-gallery >> ${selector}`);
+
+const galleryDemoTag = (hash: string) => `demo-${hash.replace(/\//g, "-")}`;
+
+async function waitForGalleryReady(page: Page) {
+  await expect(page.locator("ha-gallery")).toBeAttached({
+    timeout: SHELL_TIMEOUT,
+  });
+}
+
+export async function goToGalleryHome(page: Page) {
+  await page.goto("/");
+  await waitForGalleryReady(page);
+}
+
+export async function goToGalleryPage(page: Page, hash: string) {
+  await page.goto(`/#${hash}`);
+}
+
+async function expectGalleryPageSelector(page: Page, selector: string) {
+  const locator = galleryLocator(page, selector).first();
+  await expect(locator).toBeAttached({ timeout: SHELL_TIMEOUT });
+  return locator;
+}
+
+export async function getGalleryDemo(page: Page, hash: string) {
+  await goToGalleryPage(page, hash);
+  return expectGalleryPageSelector(page, galleryDemoTag(hash));
+}
+
+export async function assertGalleryPageLoads(
+  page: Page,
+  hash: string,
+  selector: string
+) {
+  const errors = trackPageErrors(page);
+  await goToGalleryPage(page, hash);
+  await expectGalleryPageSelector(page, selector);
+  expectNoPageErrors(errors, hash, GALLERY_IGNORED_PAGE_ERRORS);
+}
+
+export function defineGallerySmokeTests(
+  groupName: string,
+  routePrefix: string,
+  pages: GalleryPageSmokeCase[]
+) {
+  defineParallelSmokeTests({
+    groups: [{ name: groupName, routePrefix, pages }],
+    groupName: (group) => group.name,
+    cases: (group) => group.pages,
+    testName: (smokeCase) => `${smokeCase.name} renders without errors`,
+    run: async ({ page, group, smokeCase }) => {
+      await assertGalleryPageLoads(
+        page,
+        `${group.routePrefix}/${smokeCase.name}`,
+        smokeCase.selector
+      );
+    },
+  });
+}
+
+export async function expectGalleryDemoElement(
+  demo: Locator,
+  selector: string,
+  timeout = QUICK_TIMEOUT
+) {
+  await expect(demo.locator(selector).first()).toBeAttached({ timeout });
+}

test/e2e/gallery/pages.ts

@@ -0,0 +1,117 @@
+import type { GalleryPageSmokeCase } from "./helpers";
+
+export const componentPages: GalleryPageSmokeCase[] = [
+  { name: "ha-alert", selector: "demo-components-ha-alert" },
+  { name: "ha-badge", selector: "demo-components-ha-badge" },
+  { name: "ha-bar", selector: "demo-components-ha-bar" },
+  { name: "ha-button", selector: "demo-components-ha-button" },
+  { name: "ha-chips", selector: "demo-components-ha-chips" },
+  { name: "ha-control-button", selector: "demo-components-ha-control-button" },
+  {
+    name: "ha-control-circular-slider",
+    selector: "demo-components-ha-control-circular-slider",
+  },
+  {
+    name: "ha-control-number-buttons",
+    selector: "demo-components-ha-control-number-buttons",
+  },
+  {
+    name: "ha-control-select-menu",
+    selector: "demo-components-ha-control-select-menu",
+  },
+  { name: "ha-control-select", selector: "demo-components-ha-control-select" },
+  { name: "ha-control-slider", selector: "demo-components-ha-control-slider" },
+  { name: "ha-control-switch", selector: "demo-components-ha-control-switch" },
+  { name: "ha-dialog", selector: "demo-components-ha-dialog" },
+  { name: "ha-dropdown", selector: "demo-components-ha-dropdown" },
+  {
+    name: "ha-expansion-panel",
+    selector: "demo-components-ha-expansion-panel",
+  },
+  { name: "ha-faded", selector: "demo-components-ha-faded" },
+  { name: "ha-form", selector: "demo-components-ha-form" },
+  { name: "ha-gauge", selector: "demo-components-ha-gauge" },
+  {
+    name: "ha-hs-color-picker",
+    selector: "demo-components-ha-hs-color-picker",
+  },
+  { name: "ha-input", selector: "demo-components-ha-input" },
+  { name: "ha-label-badge", selector: "demo-components-ha-label-badge" },
+  { name: "ha-list", selector: "demo-components-ha-list" },
+  { name: "ha-marquee-text", selector: "demo-components-ha-marquee-text" },
+  {
+    name: "ha-progress-button",
+    selector: "demo-components-ha-progress-button",
+  },
+  { name: "ha-select-box", selector: "demo-components-ha-select-box" },
+  { name: "ha-selector", selector: "demo-components-ha-selector" },
+  { name: "ha-slider", selector: "demo-components-ha-slider" },
+  { name: "ha-spinner", selector: "demo-components-ha-spinner" },
+  { name: "ha-switch", selector: "demo-components-ha-switch" },
+  { name: "ha-textarea", selector: "demo-components-ha-textarea" },
+  { name: "ha-tip", selector: "demo-components-ha-tip" },
+  { name: "ha-tooltip", selector: "demo-components-ha-tooltip" },
+  {
+    name: "ha-adaptive-dialog",
+    selector: "demo-components-ha-adaptive-dialog",
+  },
+  {
+    name: "ha-adaptive-popover",
+    selector: "demo-components-ha-adaptive-popover",
+  },
+];
+
+export const moreInfoPages: GalleryPageSmokeCase[] = [
+  { name: "light", selector: "demo-more-info-light" },
+  { name: "climate", selector: "demo-more-info-climate" },
+  { name: "cover", selector: "demo-more-info-cover" },
+  { name: "fan", selector: "demo-more-info-fan" },
+  { name: "humidifier", selector: "demo-more-info-humidifier" },
+  { name: "input-number", selector: "demo-more-info-input-number" },
+  { name: "input-text", selector: "demo-more-info-input-text" },
+  { name: "lawn-mower", selector: "demo-more-info-lawn-mower" },
+  { name: "lock", selector: "demo-more-info-lock" },
+  { name: "media-player", selector: "demo-more-info-media-player" },
+  { name: "number", selector: "demo-more-info-number" },
+  { name: "scene", selector: "demo-more-info-scene" },
+  { name: "timer", selector: "demo-more-info-timer" },
+  { name: "update", selector: "demo-more-info-update" },
+  { name: "vacuum", selector: "demo-more-info-vacuum" },
+  { name: "water-heater", selector: "demo-more-info-water-heater" },
+];
+
+export const lovelacePages: GalleryPageSmokeCase[] = [
+  { name: "area-card", selector: "demo-lovelace-area-card" },
+  { name: "conditional-card", selector: "demo-lovelace-conditional-card" },
+  { name: "entities-card", selector: "demo-lovelace-entities-card" },
+  { name: "entity-button-card", selector: "demo-lovelace-entity-button-card" },
+  { name: "entity-filter-card", selector: "demo-lovelace-entity-filter-card" },
+  { name: "gauge-card", selector: "demo-lovelace-gauge-card" },
+  { name: "glance-card", selector: "demo-lovelace-glance-card" },
+  {
+    name: "grid-and-stack-card",
+    selector: "demo-lovelace-grid-and-stack-card",
+  },
+  { name: "iframe-card", selector: "demo-lovelace-iframe-card" },
+  { name: "light-card", selector: "demo-lovelace-light-card" },
+  { name: "map-card", selector: "demo-lovelace-map-card" },
+  { name: "markdown-card", selector: "demo-lovelace-markdown-card" },
+  { name: "media-control-card", selector: "demo-lovelace-media-control-card" },
+  { name: "media-player-row", selector: "demo-lovelace-media-player-row" },
+  { name: "picture-card", selector: "demo-lovelace-picture-card" },
+  {
+    name: "picture-elements-card",
+    selector: "demo-lovelace-picture-elements-card",
+  },
+  {
+    name: "picture-entity-card",
+    selector: "demo-lovelace-picture-entity-card",
+  },
+  {
+    name: "picture-glance-card",
+    selector: "demo-lovelace-picture-glance-card",
+  },
+  { name: "thermostat-card", selector: "demo-lovelace-thermostat-card" },
+  { name: "tile-card", selector: "demo-lovelace-tile-card" },
+  { name: "todo-list-card", selector: "demo-lovelace-todo-list-card" },
+];

test/e2e/helpers.ts

@@ -1,6 +1,7 @@
 /**
  * Shared helpers and constants for Playwright e2e suites.
  */
+import { expect, test, type Page } from "@playwright/test";
 
 // ── Timeouts ────────────────────────────────────────────────────────────────
 // Centralised so tweaks don't require search-and-replace across spec files.
@@ -17,21 +18,67 @@ export const NAVIGATION_TIMEOUT = 30_000;
 
 // ── Error filtering ─────────────────────────────────────────────────────────
 
-/**
- * Filter out errors known to be unrelated to the app under test:
- *   - ResizeObserver loop notifications (browser quirk, harmless)
- *   - Non-Error rejections (mock data throws plain objects)
- *   - Browser extension noise
- */
-export function appErrors(errors: { message: string }[] | string[]) {
-  const messages =
-    typeof errors[0] === "string"
-      ? (errors as string[])
-      : (errors as { message: string }[]).map((e) => e.message);
-  return messages.filter(
-    (msg) =>
-      !msg.includes("ResizeObserver") &&
-      !msg.includes("Non-Error") &&
-      !msg.includes("Extension context")
-  );
+type PageError = { message: string } | string;
+
+export const IGNORED_PAGE_ERRORS: RegExp[] = [
+  /ResizeObserver/,
+  /Non-Error/,
+  /Extension context/,
+];
+
+export function trackPageErrors(page: Page) {
+  const errors: PageError[] = [];
+  page.on("pageerror", (error) => errors.push(error));
+  return errors;
+}
+
+function pageErrors(errors: PageError[], ignoredErrors = IGNORED_PAGE_ERRORS) {
+  return errors
+    .map((error) => (typeof error === "string" ? error : error.message))
+    .filter((message) =>
+      ignoredErrors.every((pattern) => !pattern.test(message))
+    );
+}
+
+export function expectNoPageErrors(
+  errors: PageError[],
+  context?: string,
+  ignoredErrors = IGNORED_PAGE_ERRORS
+) {
+  const realErrors = pageErrors(errors, ignoredErrors);
+  const details = realErrors.length ? `: ${realErrors.join("; ")}` : "";
+  expect(
+    realErrors,
+    context ? `JS errors on ${context}${details}` : `JS errors${details}`
+  ).toHaveLength(0);
+}
+
+export interface DefineParallelSmokeTestsOptions<TGroup, TCase> {
+  groups: readonly TGroup[];
+  groupName: (group: TGroup) => string;
+  cases: (group: TGroup) => readonly TCase[];
+  testName: (smokeCase: TCase, group: TGroup) => string;
+  run: (context: {
+    page: Page;
+    group: TGroup;
+    smokeCase: TCase;
+  }) => Promise<void>;
+}
+
+export function defineParallelSmokeTests<TGroup, TCase>({
+  groups,
+  groupName,
+  cases,
+  testName,
+  run,
+}: DefineParallelSmokeTestsOptions<TGroup, TCase>) {
+  for (const group of groups) {
+    test.describe(groupName(group), () => {
+      for (const smokeCase of cases(group)) {
+        test(testName(smokeCase, group), async ({ page }) => {
+          await run({ page, group, smokeCase });
+        });
+      }
+    });
+  }
 }

test/e2e/playwright-workers.ts

@@ -0,0 +1,21 @@
+const DEFAULT_LOCAL_WORKERS = "60%";
+const VALID_WORKERS = /^[1-9]\d*%?$/;
+
+export const getE2EWorkers = (): number | string => {
+  if (process.env.CI) {
+    return 1;
+  }
+
+  const workers = process.env.E2E_WORKERS;
+  if (!workers) {
+    return DEFAULT_LOCAL_WORKERS;
+  }
+
+  if (!VALID_WORKERS.test(workers)) {
+    throw new Error(
+      `E2E_WORKERS must be a positive integer or percentage, received "${workers}".`
+    );
+  }
+
+  return workers.endsWith("%") ? workers : Number(workers);
+};

test/e2e/playwright.app.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
+import { getE2EWorkers } from "./playwright-workers";
 
 const APP_PORT = 8095;
 const APP_BASE_URL = `http://localhost:${APP_PORT}`;
@@ -11,8 +12,10 @@ export default defineConfig({
   expect: { timeout: 15_000 },
 
   retries: process.env.CI ? 1 : 0,
+  fullyParallel: true,
+  workers: getE2EWorkers(),
 
-  outputDir: "test-results",
+  outputDir: "test-results/app",
   reporter: [["list"], ["blob", { outputDir: "reports/app" }]],
 
   use: {

test/e2e/playwright.demo.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
+import { getE2EWorkers } from "./playwright-workers";
 
 // Port 8090 matches the `develop_demo` dev server (rspack-dev-server-demo).
 // This means running `demo/script/develop_demo` and then `yarn test:e2e:local`
@@ -16,8 +17,10 @@ export default defineConfig({
   expect: { timeout: 15_000 },
 
   retries: process.env.CI ? 1 : 0,
+  fullyParallel: true,
+  workers: getE2EWorkers(),
 
-  outputDir: "test-results",
+  outputDir: "test-results/demo",
   reporter: [["list"], ["blob", { outputDir: "reports/demo" }]],
 
   use: {

test/e2e/playwright.gallery.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
+import { getE2EWorkers } from "./playwright-workers";
 
 const GALLERY_PORT = 8100;
 const GALLERY_BASE_URL = `http://localhost:${GALLERY_PORT}`;
@@ -11,8 +12,10 @@ export default defineConfig({
   expect: { timeout: 15_000 },
 
   retries: process.env.CI ? 1 : 0,
+  fullyParallel: true,
+  workers: getE2EWorkers(),
 
-  outputDir: "test-results",
+  outputDir: "test-results/gallery",
   reporter: [["list"], ["blob", { outputDir: "reports/gallery" }]],
 
   use: {

test/e2e/run-suites.mjs

@@ -1,16 +1,106 @@
 #!/usr/bin/env node
 // Runs each e2e suite (demo, app, gallery) regardless of individual failures,
-// then collects and merges blob reports and exits with a non-zero code if any
-// suite failed.
+// then collects and merges blob reports locally and exits with a non-zero code
+// if any suite failed.
 //
 // Usage: node test/e2e/run-suites.mjs <suite> [<suite> ...]
 // Where <suite> matches a test:e2e:<suite> script in package.json,
 // e.g. "demo", "app", "gallery".
 //
-// Using ; or running suites independently avoids the && short-circuit problem
-// where a failing suite skips the remaining suites and their blob reports.
+// Running suites independently avoids the && short-circuit problem where a
+// failing suite skips the remaining suites and their blob reports.
+// Set E2E_WORKERS to a number or percentage to override local workers.
+// Cold local builds run sequentially because suites share generated assets.
 
-import { execFileSync } from "child_process";
+import { execFileSync, spawn } from "child_process";
+
+const TRUE_VALUES = new Set(["1", "true", "yes"]);
+
+const SUITE_SERVERS = {
+  demo: { port: 8090, suite: "demo" },
+  app: { port: 8095, suite: "e2e-app" },
+  gallery: { port: 8100, suite: "gallery" },
+};
+
+const isTruthy = (value) => TRUE_VALUES.has(value?.toLowerCase() ?? "");
+
+const hasManagedServer = async (suite) => {
+  const server = SUITE_SERVERS[suite];
+  if (!server) return false;
+
+  try {
+    const response = await fetch(
+      `http://localhost:${server.port}/__ha_dev_status`,
+      { signal: AbortSignal.timeout(1000) }
+    );
+    if (!response.ok) return false;
+    const status = await response.json();
+    return status.server === "ha-frontend-dev" && status.suite === server.suite;
+  } catch {
+    return false;
+  }
+};
+
+const formatDuration = (ms) => {
+  const totalSeconds = Math.round(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return minutes ? `${minutes}m ${seconds}s` : `${seconds}s`;
+};
+
+const writePrefixed = (suite, stream, chunk, pending) => {
+  const lines = `${pending.value}${chunk}`.split(/\r?\n/);
+  pending.value = lines.pop() ?? "";
+  for (const line of lines) {
+    stream.write(`[${suite}] ${line}\n`);
+  }
+};
+
+const flushPrefixed = (suite, stream, pending) => {
+  if (!pending.value) return;
+  stream.write(`[${suite}] ${pending.value}\n`);
+  pending.value = "";
+};
+
+const runSuite = (suite, env) =>
+  new Promise((resolve) => {
+    const started = Date.now();
+    const child = spawn("yarn", [`test:e2e:${suite}`], {
+      stdio: ["ignore", "pipe", "pipe"],
+      env,
+    });
+    const pendingStdout = { value: "" };
+    const pendingStderr = { value: "" };
+    const workerLabel = env.E2E_WORKERS ? ` (workers: ${env.E2E_WORKERS})` : "";
+
+    process.stdout.write(
+      `\n--- Running suite: test:e2e:${suite}${workerLabel} ---\n`
+    );
+
+    child.stdout.on("data", (chunk) =>
+      writePrefixed(suite, process.stdout, chunk, pendingStdout)
+    );
+    child.stderr.on("data", (chunk) =>
+      writePrefixed(suite, process.stderr, chunk, pendingStderr)
+    );
+
+    child.on("error", (err) => {
+      flushPrefixed(suite, process.stdout, pendingStdout);
+      flushPrefixed(suite, process.stderr, pendingStderr);
+      process.stderr.write(`[${suite}] Failed to start: ${err.message}\n`);
+      resolve({ suite, code: 1, duration: Date.now() - started });
+    });
+
+    child.on("close", (code) => {
+      flushPrefixed(suite, process.stdout, pendingStdout);
+      flushPrefixed(suite, process.stderr, pendingStderr);
+      const duration = Date.now() - started;
+      process.stdout.write(
+        `--- Finished suite: test:e2e:${suite} (${formatDuration(duration)}) ---\n`
+      );
+      resolve({ suite, code: code ?? 1, duration });
+    });
+  });
 
 const suites = process.argv.slice(2);
 if (!suites.length) {
@@ -18,32 +108,72 @@ if (!suites.length) {
   process.exit(1);
 }
 
-const failures = [];
+const hasAllManagedServers = (
+  await Promise.all(suites.map(hasManagedServer))
+).every(Boolean);
+const sequential =
+  isTruthy(process.env.E2E_SEQUENTIAL) ||
+  (suites.length > 1 && !hasAllManagedServers);
+const skipMerge = isTruthy(process.env.E2E_SKIP_MERGE);
+const suiteWorkers =
+  !sequential &&
+  !process.env.CI &&
+  !process.env.E2E_WORKERS &&
+  suites.length > 1
+    ? `${Math.max(1, Math.floor(60 / suites.length))}%`
+    : undefined;
+const suiteEnv = suiteWorkers
+  ? { ...process.env, E2E_WORKERS: suiteWorkers }
+  : process.env;
 
-for (const suite of suites) {
-  process.stdout.write(`\n--- Running suite: test:e2e:${suite} ---\n`);
-  try {
-    execFileSync("yarn", [`test:e2e:${suite}`], { stdio: "inherit" });
-  } catch {
-    failures.push(suite);
+const results = [];
+
+if (sequential) {
+  if (!isTruthy(process.env.E2E_SEQUENTIAL)) {
+    process.stdout.write(
+      "Running suites sequentially because not all managed dev servers are available.\n"
+    );
   }
+  for (const suite of suites) {
+    // eslint-disable-next-line no-await-in-loop
+    results.push(await runSuite(suite, suiteEnv));
+  }
+} else {
+  results.push(
+    ...(await Promise.all(suites.map((suite) => runSuite(suite, suiteEnv))))
+  );
+}
+
+const failures = results
+  .filter(({ code }) => code !== 0)
+  .map(({ suite }) => suite);
+
+process.stdout.write("\nE2E suite timings:\n");
+for (const { suite, duration } of results) {
+  process.stdout.write(`- test:e2e:${suite}: ${formatDuration(duration)}\n`);
 }
 
 // Collect and merge blob reports regardless of suite outcomes.
-execFileSync("node", ["test/e2e/collect-blob-reports.mjs"], {
-  stdio: "inherit",
-});
-execFileSync(
-  "npx",
-  [
-    "playwright",
-    "merge-reports",
-    "-c",
-    "test/e2e/playwright.merge.config.ts",
-    "test/e2e/reports/blob",
-  ],
-  { stdio: "inherit" }
-);
+if (skipMerge) {
+  process.stdout.write(
+    "\nSkipping merged e2e report because E2E_SKIP_MERGE is set.\n"
+  );
+} else {
+  execFileSync("node", ["test/e2e/collect-blob-reports.mjs"], {
+    stdio: "inherit",
+  });
+  execFileSync(
+    "npx",
+    [
+      "playwright",
+      "merge-reports",
+      "-c",
+      "test/e2e/playwright.merge.config.ts",
+      "test/e2e/reports/blob",
+    ],
+    { stdio: "inherit" }
+  );
+}
 
 if (failures.length) {
   process.stderr.write(

test/managers/notification-manager-lifecycle.test.ts

@@ -1,119 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import type { HomeAssistant } from "../../src/types";
-import "../../src/managers/notification-manager";
-
-vi.mock("../../src/components/ha-button", () => {
-  customElements.define("ha-button", class extends HTMLElement {});
-  return {};
-});
-
-const localize = (key: string, args?: Record<string, string | number>) =>
-  args ? `${key}:${JSON.stringify(args)}` : key;
-
-@customElement("test-notification-lifecycle-host")
-class TestNotificationLifecycleHost extends LitElement {
-  @property({ attribute: false }) public hass = {
-    localize,
-  } as unknown as HomeAssistant;
-
-  protected render() {
-    return html`<notification-manager
-      .hass=${this.hass}
-    ></notification-manager>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "test-notification-lifecycle-host": TestNotificationLifecycleHost;
-  }
-}
-
-let host: TestNotificationLifecycleHost | undefined;
-
-afterEach(() => {
-  host?.remove();
-  host = undefined;
-  vi.useRealTimers();
-});
-
-describe("notification toast lifecycle", () => {
-  it("updates a visible toast and closes it after its primary action", async () => {
-    vi.useFakeTimers();
-    host = document.createElement("test-notification-lifecycle-host");
-    document.body.append(host);
-    await host.updateComplete;
-    const manager = host.shadowRoot!.querySelector("notification-manager")!;
-    const action = vi.fn();
-
-    const firstShow = manager.showDialog({
-      id: "frontend-update-available",
-      message: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds: 60 },
-      },
-      announceMessage: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds: 60 },
-      },
-      action: { action, primary: true, text: "Update now" },
-      duration: -1,
-    });
-    await Promise.resolve();
-    await manager.updateComplete;
-    const toast = manager.shadowRoot!.querySelector("ha-toast")!;
-    Object.defineProperty(
-      toast.shadowRoot!.querySelector(".toast"),
-      "getAnimations",
-      {
-        configurable: true,
-        value: () => [],
-      }
-    );
-    await vi.advanceTimersByTimeAsync(20);
-    await firstShow;
-
-    expect(toast.shadowRoot!.querySelector(".toast")!.classList).toContain(
-      "visible"
-    );
-    expect(toast.shadowRoot!.querySelector(".message")!.textContent).toContain(
-      '"seconds":60'
-    );
-    expect(
-      toast.shadowRoot!.querySelector(".assistive-message")!.textContent
-    ).toContain('"seconds":60');
-
-    await manager.showDialog({
-      id: "frontend-update-available",
-      message: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds: 59 },
-      },
-      announceMessage: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds: 60 },
-      },
-      action: { action, primary: true, text: "Update now" },
-      duration: -1,
-    });
-
-    expect(toast.shadowRoot!.querySelector(".message")!.textContent).toContain(
-      '"seconds":59'
-    );
-    expect(
-      toast.shadowRoot!.querySelector(".assistive-message")!.textContent
-    ).toContain('"seconds":60');
-
-    const closed = new Promise<void>((resolve) => {
-      toast.addEventListener("toast-closed", () => resolve(), { once: true });
-    });
-    manager.shadowRoot!.querySelector<HTMLElement>("ha-button")!.click();
-    await closed;
-    await manager.updateComplete;
-
-    expect(action).toHaveBeenCalledOnce();
-    expect(manager.shadowRoot!.querySelector("ha-toast")).toBeNull();
-  });
-});

test/managers/notification-manager.test.ts

@@ -1,245 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import type { HomeAssistant } from "../../src/types";
-import "../../src/managers/notification-manager";
-
-const localize = vi.fn((key: string, args?: Record<string, string | number>) =>
-  args ? `${key}:${JSON.stringify(args)}` : key
-);
-
-vi.mock("../../src/components/ha-button", () => {
-  customElements.define("ha-button", class extends HTMLElement {});
-  return {};
-});
-
-vi.mock("../../src/components/ha-icon-button", () => {
-  customElements.define("ha-icon-button", class extends HTMLElement {});
-  return {};
-});
-
-vi.mock("../../src/components/ha-toast", () => {
-  customElements.define(
-    "ha-toast",
-    class extends HTMLElement {
-      public show = vi.fn();
-
-      public hide = vi.fn();
-    }
-  );
-  return {};
-});
-
-@customElement("test-notification-manager-host")
-class TestNotificationManagerHost extends LitElement {
-  @property({ attribute: false }) public hass = {
-    localize,
-  } as unknown as HomeAssistant;
-
-  protected render() {
-    return html`<notification-manager
-      .hass=${this.hass}
-    ></notification-manager>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "test-notification-manager-host": TestNotificationManagerHost;
-  }
-}
-
-let host: TestNotificationManagerHost | undefined;
-
-const mountManager = async () => {
-  host = document.createElement(
-    "test-notification-manager-host"
-  ) as TestNotificationManagerHost;
-  document.body.append(host);
-  await host.updateComplete;
-  return host.shadowRoot!.querySelector("notification-manager")!;
-};
-
-const deferred = () => {
-  let resolve: () => void;
-  const promise = new Promise<void>((res) => {
-    resolve = res;
-  });
-  return { promise, resolve: resolve! };
-};
-
-afterEach(() => {
-  host?.remove();
-  host = undefined;
-  vi.clearAllMocks();
-});
-
-describe("notification-manager", () => {
-  it("shows a message with the default duration", async () => {
-    const manager = await mountManager();
-
-    await manager.showDialog({ message: "Configuration saved" });
-
-    const toast = manager.shadowRoot!.querySelector("ha-toast")!;
-    expect(toast.labelText).toBe("Configuration saved");
-    expect(toast.timeoutMs).toBe(4000);
-    expect(toast.bottomOffset).toBe(0);
-    expect(toast.show).toHaveBeenCalledOnce();
-  });
-
-  it("renders a dismiss button and closes with the dismiss reason", async () => {
-    const manager = await mountManager();
-
-    await manager.showDialog({
-      message: "Connection lost",
-      dismissable: true,
-      duration: -1,
-      bottomOffset: 16,
-    });
-
-    const toast = manager.shadowRoot!.querySelector("ha-toast")!;
-    expect(toast.timeoutMs).toBe(-1);
-    expect(toast.bottomOffset).toBe(16);
-
-    manager.shadowRoot!.querySelector<HTMLElement>("ha-icon-button")!.click();
-    expect(toast.hide).toHaveBeenCalledWith("dismiss");
-  });
-
-  it("clears the current notification when duration is zero", async () => {
-    const manager = await mountManager();
-    await manager.showDialog({ message: "First message", duration: -1 });
-
-    await manager.showDialog({ message: "", duration: 0 });
-    await manager.updateComplete;
-
-    expect(manager.shadowRoot!.querySelector("ha-toast")).toBeNull();
-  });
-
-  it.each([
-    { duration: 1, expected: 4000 },
-    { duration: 4000, expected: 4000 },
-    { duration: 4001, expected: 4001 },
-    { duration: -1, expected: -1 },
-  ])(
-    "normalizes a $duration ms duration to $expected ms",
-    async ({ duration, expected }) => {
-      const manager = await mountManager();
-
-      await manager.showDialog({ message: "Message", duration });
-
-      expect(manager.shadowRoot!.querySelector("ha-toast")!.timeoutMs).toBe(
-        expected
-      );
-    }
-  );
-
-  it("localizes visible and assistive messages with numeric arguments", async () => {
-    const manager = await mountManager();
-
-    await manager.showDialog({
-      message: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds: 59 },
-      },
-      announceMessage: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds: 60 },
-      },
-    });
-
-    const toast = manager.shadowRoot!.querySelector("ha-toast")!;
-    expect(toast.labelText).toContain('"seconds":59');
-    expect(toast.announceText).toContain('"seconds":60');
-    expect(localize).toHaveBeenCalledWith(
-      "ui.notification_toast.new_version_available",
-      { seconds: 59 }
-    );
-    expect(localize).toHaveBeenCalledWith(
-      "ui.notification_toast.new_version_available",
-      { seconds: 60 }
-    );
-  });
-
-  it("renders and invokes primary and secondary actions", async () => {
-    const manager = await mountManager();
-    const primary = vi.fn();
-    const secondary = vi.fn();
-
-    await manager.showDialog({
-      message: "Update available",
-      action: { action: primary, primary: true, text: "Update now" },
-      secondaryAction: { action: secondary, text: "Cancel" },
-      duration: -1,
-    });
-
-    const toast = manager.shadowRoot!.querySelector("ha-toast")!;
-    const buttons = manager.shadowRoot!.querySelectorAll("ha-button");
-    expect(buttons).toHaveLength(2);
-    expect(buttons[0].textContent?.trim()).toBe("Cancel");
-    expect(buttons[0].getAttribute("appearance")).toBe("plain");
-    expect(buttons[1].textContent?.trim()).toBe("Update now");
-    expect(buttons[1].getAttribute("appearance")).toBe("filled");
-
-    buttons[0].click();
-    expect(toast.hide).toHaveBeenLastCalledWith("action");
-    expect(secondary).toHaveBeenCalledOnce();
-    expect(primary).not.toHaveBeenCalled();
-
-    buttons[1].click();
-    expect(toast.hide).toHaveBeenLastCalledWith("action");
-    expect(primary).toHaveBeenCalledOnce();
-  });
-
-  it("keeps a same-ID toast visible while replacing its content", async () => {
-    const manager = await mountManager();
-    await manager.showDialog({ id: "status", message: "First" });
-    const toast = manager.shadowRoot!.querySelector("ha-toast")!;
-    vi.mocked(toast.hide).mockClear();
-
-    await manager.showDialog({ id: "status", message: "Second" });
-
-    expect(toast.hide).not.toHaveBeenCalled();
-    expect(toast.labelText).toBe("Second");
-  });
-
-  it("hides a toast before replacing it with a different ID", async () => {
-    const manager = await mountManager();
-    await manager.showDialog({ id: "first", message: "First" });
-    const toast = manager.shadowRoot!.querySelector("ha-toast")!;
-    vi.mocked(toast.hide).mockClear();
-
-    await manager.showDialog({ id: "second", message: "Second" });
-
-    expect(toast.hide).toHaveBeenCalledOnce();
-    expect(toast.labelText).toBe("Second");
-  });
-
-  it("ignores a stale replacement after a newer notification starts", async () => {
-    const manager = await mountManager();
-    await manager.showDialog({ id: "first", message: "First" });
-    const toast = manager.shadowRoot!.querySelector("ha-toast")!;
-    const delayedHide = deferred();
-    vi.mocked(toast.hide).mockReturnValueOnce(delayedHide.promise);
-
-    const staleShow = manager.showDialog({ id: "second", message: "Second" });
-    await manager.showDialog({ id: "third", message: "Third" });
-    delayedHide.resolve();
-    await staleShow;
-
-    expect(toast.labelText).toBe("Third");
-  });
-
-  it("clears rendered state after the toast closes", async () => {
-    const manager = await mountManager();
-    await manager.showDialog({ message: "Message" });
-    manager.shadowRoot!.querySelector("ha-toast")!.dispatchEvent(
-      new CustomEvent("toast-closed", {
-        detail: { reason: "programmatic" },
-      })
-    );
-
-    await manager.updateComplete;
-
-    expect(manager.shadowRoot!.querySelector("ha-toast")).toBeNull();
-  });
-});

test/mixins/dirty-state-provider-mixin.test.ts

@@ -1,368 +0,0 @@
-import { consume } from "@lit/context";
-import { LitElement } from "lit";
-import { state } from "lit/decorators";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import {
-  dirtyStateContext,
-  type DirtyStateContext,
-} from "../../src/data/context/dirty-state";
-import type { CompareStrategy } from "../../src/mixins/dirty-state-provider-mixin";
-import { DirtyStateProviderMixin } from "../../src/mixins/dirty-state-provider-mixin";
-
-interface TestState {
-  name: string;
-  enabled: boolean;
-  options?: { mode: string };
-}
-
-class TestDirtyStateConsumer extends LitElement {
-  @consume({ context: dirtyStateContext, subscribe: true })
-  @state()
-  public dirtyState?: DirtyStateContext;
-}
-
-customElements.define("test-dirty-state-consumer", TestDirtyStateConsumer);
-
-class TestDirtyStateProvider extends DirtyStateProviderMixin<TestState>()(
-  LitElement
-) {
-  public initialize(
-    strategy: CompareStrategy<TestState>,
-    value?: TestState,
-    normalize?: (value: TestState) => TestState
-  ) {
-    this._initDirtyTracking(strategy, value, normalize);
-  }
-
-  public setValue(value: TestState) {
-    this._updateDirtyState(value);
-  }
-
-  public markClean() {
-    this._markDirtyStateClean();
-  }
-
-  public discardChanges() {
-    this._discardDirtyStateChanges();
-  }
-}
-
-customElements.define("test-dirty-state-provider", TestDirtyStateProvider);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "test-dirty-state-consumer": TestDirtyStateConsumer;
-    "test-dirty-state-provider": TestDirtyStateProvider;
-  }
-}
-
-let provider: TestDirtyStateProvider | undefined;
-
-const mountProvider = async () => {
-  provider = document.createElement(
-    "test-dirty-state-provider"
-  ) as TestDirtyStateProvider;
-  document.body.append(provider);
-  await provider.updateComplete;
-  return provider;
-};
-
-afterEach(() => {
-  document.querySelectorAll("test-dirty-state-provider").forEach((element) => {
-    element.remove();
-  });
-  provider = undefined;
-  window.isDirtyState = false;
-});
-
-describe("DirtyStateProviderMixin", () => {
-  it("tracks changes against an initial state", async () => {
-    const element = await mountProvider();
-    element.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false }
-    );
-    await element.updateComplete;
-
-    expect(element.isDirtyState).toBe(false);
-
-    element.setValue({ name: "Kitchen light", enabled: false });
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(true);
-
-    element.setValue({ name: "Kitchen", enabled: false });
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(false);
-  });
-
-  it("marks the current state as clean", async () => {
-    const element = await mountProvider();
-    element.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false }
-    );
-    element.setValue({ name: "Kitchen light", enabled: false });
-    await element.updateComplete;
-
-    element.markClean();
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(false);
-
-    element.setValue({ name: "Kitchen", enabled: false });
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(true);
-  });
-
-  it("discards changes back to the initial state", async () => {
-    const element = await mountProvider();
-    element.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false }
-    );
-    element.setValue({ name: "Kitchen light", enabled: true });
-    await element.updateComplete;
-
-    element.discardChanges();
-    await element.updateComplete;
-
-    expect(element.isDirtyState).toBe(false);
-    expect(element.isEffectiveDirtyState).toBe(false);
-  });
-
-  it("uses deep comparison for nested values", async () => {
-    const element = await mountProvider();
-    element.initialize(
-      { type: "deep" },
-      { name: "Kitchen", enabled: false, options: { mode: "auto" } }
-    );
-    element.setValue({
-      name: "Kitchen",
-      enabled: false,
-      options: { mode: "auto" },
-    });
-    await element.updateComplete;
-
-    expect(element.isDirtyState).toBe(false);
-
-    element.setValue({
-      name: "Kitchen",
-      enabled: false,
-      options: { mode: "manual" },
-    });
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(true);
-  });
-
-  it("uses reference comparison for nested values with a shallow strategy", async () => {
-    const element = await mountProvider();
-    element.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false, options: { mode: "auto" } }
-    );
-    element.setValue({
-      name: "Kitchen",
-      enabled: false,
-      options: { mode: "auto" },
-    });
-    await element.updateComplete;
-
-    expect(element.isDirtyState).toBe(true);
-  });
-
-  it("supports a custom comparison strategy", async () => {
-    const element = await mountProvider();
-    const compare = vi.fn(
-      (initial: TestState, current: TestState) =>
-        initial.name.toLowerCase() === current.name.toLowerCase()
-    );
-    element.initialize(
-      { type: "custom", compare },
-      { name: "Kitchen", enabled: false }
-    );
-    element.setValue({ name: "KITCHEN", enabled: true });
-    await element.updateComplete;
-
-    expect(element.isDirtyState).toBe(false);
-    expect(compare).toHaveBeenCalled();
-  });
-
-  it("keeps the deep baseline isolated from initial state mutations", async () => {
-    const element = await mountProvider();
-    const initial = {
-      name: "Kitchen",
-      enabled: false,
-      options: { mode: "auto" },
-    };
-    element.initialize({ type: "deep" }, initial);
-    initial.options.mode = "manual";
-    element.setValue({
-      name: "Kitchen",
-      enabled: false,
-      options: { mode: "auto" },
-    });
-    await element.updateComplete;
-
-    expect(element.isDirtyState).toBe(false);
-  });
-
-  it("uses the first deferred value as its baseline", async () => {
-    const element = await mountProvider();
-    element.initialize({ type: "shallow" });
-    element.setValue({ name: "Kitchen", enabled: false });
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(false);
-
-    element.setValue({ name: "Bedroom", enabled: false });
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(true);
-  });
-
-  it("tracks raw and effective dirty state separately", async () => {
-    const element = await mountProvider();
-    element.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false },
-      (value) => ({ ...value, enabled: false })
-    );
-    element.setValue({ name: "Kitchen", enabled: true });
-    await element.updateComplete;
-
-    expect(element.isDirtyState).toBe(true);
-    expect(element.isEffectiveDirtyState).toBe(false);
-  });
-
-  it("publishes dirty and clean transitions with event details", async () => {
-    const listener = vi.fn();
-    window.addEventListener("dirty-state-changed", listener);
-    const element = await mountProvider();
-    element.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false }
-    );
-    await element.updateComplete;
-    listener.mockClear();
-
-    element.setValue({ name: "Bedroom", enabled: false });
-    await element.updateComplete;
-    element.setValue({ name: "Kitchen", enabled: false });
-    await element.updateComplete;
-
-    expect(listener).toHaveBeenCalledTimes(2);
-    expect(listener.mock.calls[0][0].detail).toEqual({ isDirty: true });
-    expect(listener.mock.calls[1][0].detail).toEqual({ isDirty: false });
-    expect(window.isDirtyState).toBe(false);
-    window.removeEventListener("dirty-state-changed", listener);
-  });
-
-  it("clears published dirty state when disconnected", async () => {
-    const listener = vi.fn();
-    window.addEventListener("dirty-state-changed", listener);
-    const element = await mountProvider();
-    element.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false }
-    );
-    element.setValue({ name: "Bedroom", enabled: false });
-    await element.updateComplete;
-    listener.mockClear();
-
-    element.remove();
-
-    expect(window.isDirtyState).toBe(false);
-    expect(listener).toHaveBeenCalledOnce();
-    expect(listener.mock.calls[0][0].detail).toEqual({ isDirty: false });
-    window.removeEventListener("dirty-state-changed", listener);
-  });
-
-  it("hands global dirty state to the next provider after disconnecting", async () => {
-    const firstProvider = await mountProvider();
-    firstProvider.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false }
-    );
-    firstProvider.setValue({ name: "Bedroom", enabled: false });
-    await firstProvider.updateComplete;
-    expect(window.isDirtyState).toBe(true);
-
-    firstProvider.remove();
-    expect(window.isDirtyState).toBe(false);
-
-    const nextProvider = await mountProvider();
-    nextProvider.initialize(
-      { type: "shallow" },
-      { name: "Hallway", enabled: false }
-    );
-    nextProvider.setValue({ name: "Hallway", enabled: true });
-    await nextProvider.updateComplete;
-
-    expect(window.isDirtyState).toBe(true);
-  });
-
-  it("stays globally dirty while any connected provider is dirty", async () => {
-    const dirtyProvider = await mountProvider();
-    dirtyProvider.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false }
-    );
-    dirtyProvider.setValue({ name: "Bedroom", enabled: false });
-    await dirtyProvider.updateComplete;
-
-    const cleanProvider = document.createElement("test-dirty-state-provider");
-    document.body.append(cleanProvider);
-    cleanProvider.initialize(
-      { type: "shallow" },
-      { name: "Hallway", enabled: false }
-    );
-    await cleanProvider.updateComplete;
-
-    expect(window.isDirtyState).toBe(true);
-
-    cleanProvider.remove();
-
-    expect(window.isDirtyState).toBe(true);
-
-    dirtyProvider.setValue({ name: "Kitchen", enabled: false });
-    await dirtyProvider.updateComplete;
-
-    expect(window.isDirtyState).toBe(false);
-  });
-
-  it("restores a provider's dirty state after reconnecting", async () => {
-    const element = await mountProvider();
-    element.initialize(
-      { type: "shallow" },
-      { name: "Kitchen", enabled: false }
-    );
-    element.setValue({ name: "Bedroom", enabled: false });
-    await element.updateComplete;
-
-    element.remove();
-    expect(window.isDirtyState).toBe(false);
-
-    document.body.append(element);
-
-    expect(window.isDirtyState).toBe(true);
-  });
-
-  it("tracks independent context slices and marks all of them clean", async () => {
-    const element = await mountProvider();
-    element.initialize({ type: "shallow" });
-    const consumer = document.createElement("test-dirty-state-consumer");
-    element.append(consumer);
-    await consumer.updateComplete;
-    const setState = (value: TestState, key: "first" | "second") => {
-      Reflect.apply(consumer.dirtyState!.setState, undefined, [value, key]);
-    };
-
-    setState({ name: "Kitchen", enabled: false }, "first");
-    setState({ name: "Bedroom", enabled: false }, "second");
-    await element.updateComplete;
-    setState({ name: "Kitchen light", enabled: false }, "first");
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(true);
-
-    consumer.dirtyState!.markClean();
-    await element.updateComplete;
-    expect(element.isDirtyState).toBe(false);
-  });
-});

test/util/register-service-worker.test.ts

@@ -1,341 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { ShowToastParams } from "../../src/managers/notification-manager";
-import {
-  registerServiceWorker,
-  supportsServiceWorker,
-} from "../../src/util/register-service-worker";
-
-class FakeWorker extends EventTarget {
-  public state: ServiceWorkerState = "installing";
-
-  public postMessage = vi.fn();
-}
-
-class FakeRegistration extends EventTarget {
-  public installing: ServiceWorker | null = null;
-
-  public waiting: ServiceWorker | null = null;
-}
-
-class FakeServiceWorkerContainer extends EventTarget {
-  public controller: ServiceWorker | null = null;
-
-  public register = vi.fn();
-}
-
-const serviceWorkerDescriptor = Object.getOwnPropertyDescriptor(
-  navigator,
-  "serviceWorker"
-);
-
-const restoreServiceWorker = () => {
-  if (serviceWorkerDescriptor) {
-    Object.defineProperty(navigator, "serviceWorker", serviceWorkerDescriptor);
-  } else {
-    Reflect.deleteProperty(navigator, "serviceWorker");
-  }
-};
-
-describe("supportsServiceWorker", () => {
-  afterEach(restoreServiceWorker);
-
-  it("returns true when the service worker API is available", () => {
-    Object.defineProperty(navigator, "serviceWorker", {
-      configurable: true,
-      value: new FakeServiceWorkerContainer(),
-    });
-
-    expect(supportsServiceWorker()).toBe(true);
-  });
-
-  it("returns false when the service worker API is unavailable", () => {
-    Reflect.deleteProperty(navigator, "serviceWorker");
-
-    expect(supportsServiceWorker()).toBe(false);
-  });
-});
-
-describe("registerServiceWorker", () => {
-  let root: HTMLElement;
-  let worker: FakeWorker;
-  let registration: FakeRegistration;
-  let serviceWorker: FakeServiceWorkerContainer;
-  let notifications: ShowToastParams[];
-
-  const latestNotification = () => notifications[notifications.length - 1];
-
-  const setDirtyState = (isDirty: boolean) => {
-    window.isDirtyState = isDirty;
-    window.dispatchEvent(
-      new CustomEvent("dirty-state-changed", { detail: { isDirty } })
-    );
-  };
-
-  const installUpdate = () => {
-    registration.installing = worker as unknown as ServiceWorker;
-    registration.dispatchEvent(new Event("updatefound"));
-    worker.state = "installed";
-    worker.dispatchEvent(new Event("statechange"));
-  };
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    globalThis.__BUILD__ = "modern";
-    globalThis.__DEV__ = false;
-    globalThis.__DEMO__ = false;
-    window.isDirtyState = false;
-    notifications = [];
-    root = document.createElement("div");
-    root.addEventListener("hass-notification", (event) => {
-      notifications.push((event as CustomEvent<ShowToastParams>).detail);
-    });
-    worker = new FakeWorker();
-    registration = new FakeRegistration();
-    serviceWorker = new FakeServiceWorkerContainer();
-    serviceWorker.controller = worker as unknown as ServiceWorker;
-    serviceWorker.register.mockResolvedValue(registration);
-    Object.defineProperty(navigator, "serviceWorker", {
-      configurable: true,
-      value: serviceWorker,
-    });
-  });
-
-  afterEach(() => {
-    latestNotification()?.secondaryAction?.action();
-    vi.clearAllTimers();
-    vi.useRealTimers();
-    window.isDirtyState = false;
-    globalThis.__DEV__ = false;
-    globalThis.__DEMO__ = false;
-    restoreServiceWorker();
-  });
-
-  it("registers the worker for the current build", async () => {
-    await registerServiceWorker(root, false);
-
-    expect(serviceWorker.register).toHaveBeenCalledOnce();
-    expect(serviceWorker.register).toHaveBeenCalledWith("/sw-modern.js");
-  });
-
-  it("does not register when service workers are unsupported", async () => {
-    Reflect.deleteProperty(navigator, "serviceWorker");
-
-    await registerServiceWorker(root);
-
-    expect(serviceWorker.register).not.toHaveBeenCalled();
-  });
-
-  it("listens for controller changes before registering", async () => {
-    const addEventListener = vi.spyOn(serviceWorker, "addEventListener");
-
-    await registerServiceWorker(root, false);
-
-    expect(addEventListener).toHaveBeenCalledWith(
-      "controllerchange",
-      expect.any(Function)
-    );
-    expect(addEventListener.mock.invocationCallOrder[0]).toBeLessThan(
-      serviceWorker.register.mock.invocationCallOrder[0]
-    );
-  });
-
-  it.each([
-    { notifyUpdate: false, dev: false, demo: false },
-    { notifyUpdate: true, dev: true, demo: false },
-    { notifyUpdate: true, dev: false, demo: true },
-  ])(
-    "does not monitor updates with notifyUpdate=$notifyUpdate, dev=$dev, demo=$demo",
-    async ({ notifyUpdate, dev, demo }) => {
-      globalThis.__DEV__ = dev;
-      globalThis.__DEMO__ = demo;
-      const addEventListener = vi.spyOn(registration, "addEventListener");
-
-      await registerServiceWorker(root, notifyUpdate);
-
-      expect(addEventListener).not.toHaveBeenCalledWith(
-        "updatefound",
-        expect.any(Function)
-      );
-    }
-  );
-
-  it("ignores update discovery without an installing worker", async () => {
-    await registerServiceWorker(root);
-
-    registration.dispatchEvent(new Event("updatefound"));
-
-    expect(notifications).toHaveLength(0);
-  });
-
-  it("waits for an installing worker to reach the installed state", async () => {
-    await registerServiceWorker(root);
-    registration.installing = worker as unknown as ServiceWorker;
-    registration.dispatchEvent(new Event("updatefound"));
-
-    worker.state = "activating";
-    worker.dispatchEvent(new Event("statechange"));
-
-    expect(notifications).toHaveLength(0);
-  });
-
-  it("ignores an initial installation without an existing controller", async () => {
-    serviceWorker.controller = null;
-    await registerServiceWorker(root);
-
-    installUpdate();
-
-    expect(notifications).toHaveLength(0);
-  });
-
-  it("starts at 60 seconds when an update is installed", async () => {
-    await registerServiceWorker(root);
-
-    installUpdate();
-
-    expect(latestNotification()).toMatchObject({
-      id: "frontend-update-available",
-      message: {
-        translationKey: "ui.notification_toast.new_version_available",
-        args: { seconds: 60 },
-      },
-      announceMessage: {
-        args: { seconds: 60 },
-      },
-      action: {
-        primary: true,
-        text: { translationKey: "ui.notification_toast.update_now" },
-      },
-      secondaryAction: {
-        text: { translationKey: "ui.common.cancel" },
-      },
-      duration: -1,
-    });
-  });
-
-  it("uses an already waiting worker", async () => {
-    registration.waiting = worker as unknown as ServiceWorker;
-
-    await registerServiceWorker(root);
-
-    expect(latestNotification().message).toMatchObject({
-      args: { seconds: 60 },
-    });
-  });
-
-  it("ignores a waiting worker without an existing controller", async () => {
-    registration.waiting = worker as unknown as ServiceWorker;
-    serviceWorker.controller = null;
-
-    await registerServiceWorker(root);
-
-    expect(notifications).toHaveLength(0);
-  });
-
-  it.each([
-    { elapsed: 1_000, visual: 59, announced: 60 },
-    { elapsed: 20_000, visual: 40, announced: 40 },
-    { elapsed: 40_000, visual: 20, announced: 20 },
-    { elapsed: 55_000, visual: 5, announced: 5 },
-    { elapsed: 59_000, visual: 1, announced: 5 },
-  ])(
-    "shows $visual seconds and announces $announced after $elapsed ms",
-    async ({ elapsed, visual, announced }) => {
-      await registerServiceWorker(root);
-      installUpdate();
-
-      vi.advanceTimersByTime(elapsed);
-
-      expect(latestNotification().message).toMatchObject({
-        args: { seconds: visual },
-      });
-      expect(latestNotification().announceMessage).toMatchObject({
-        args: { seconds: announced },
-      });
-    }
-  );
-
-  it("activates and hides the update when the countdown finishes", async () => {
-    await registerServiceWorker(root);
-    installUpdate();
-
-    vi.advanceTimersByTime(60_000);
-
-    expect(worker.postMessage).toHaveBeenCalledOnce();
-    expect(worker.postMessage).toHaveBeenCalledWith({ type: "skipWaiting" });
-    expect(latestNotification()).toMatchObject({
-      id: "frontend-update-available",
-      message: "",
-      duration: 0,
-    });
-  });
-
-  it("activates and hides the update immediately on request", async () => {
-    await registerServiceWorker(root);
-    installUpdate();
-
-    latestNotification().action!.action();
-
-    expect(worker.postMessage).toHaveBeenCalledOnce();
-    expect(worker.postMessage).toHaveBeenCalledWith({ type: "skipWaiting" });
-    expect(latestNotification()).toMatchObject({ message: "", duration: 0 });
-  });
-
-  it("cancels automatic activation", async () => {
-    await registerServiceWorker(root);
-    installUpdate();
-
-    latestNotification().secondaryAction!.action();
-    vi.advanceTimersByTime(60_000);
-
-    expect(worker.postMessage).not.toHaveBeenCalled();
-  });
-
-  it("defers the message and activation while the page is dirty", async () => {
-    setDirtyState(true);
-    await registerServiceWorker(root);
-    installUpdate();
-
-    expect(notifications).toHaveLength(0);
-    vi.advanceTimersByTime(60_000);
-    expect(worker.postMessage).not.toHaveBeenCalled();
-
-    setDirtyState(false);
-    expect(latestNotification().message).toMatchObject({
-      args: { seconds: 60 },
-    });
-  });
-
-  it("hides and resets the countdown when the page becomes dirty", async () => {
-    await registerServiceWorker(root);
-    installUpdate();
-    vi.advanceTimersByTime(10_000);
-
-    setDirtyState(true);
-
-    expect(latestNotification()).toMatchObject({ message: "", duration: 0 });
-    vi.advanceTimersByTime(60_000);
-    expect(worker.postMessage).not.toHaveBeenCalled();
-
-    setDirtyState(false);
-    expect(latestNotification().message).toMatchObject({
-      args: { seconds: 60 },
-    });
-  });
-
-  it("uses the latest installed worker", async () => {
-    await registerServiceWorker(root);
-    installUpdate();
-    const replacement = new FakeWorker();
-    replacement.state = "installed";
-
-    registration.installing = replacement as unknown as ServiceWorker;
-    registration.dispatchEvent(new Event("updatefound"));
-    replacement.dispatchEvent(new Event("statechange"));
-    vi.advanceTimersByTime(60_000);
-
-    expect(worker.postMessage).not.toHaveBeenCalled();
-    expect(replacement.postMessage).toHaveBeenCalledWith({
-      type: "skipWaiting",
-    });
-  });
-});

yarn.lock

@@ -2745,135 +2745,135 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/bigdecimal@npm:0.2.7":
-  version: 0.2.7
-  resolution: "@formatjs/bigdecimal@npm:0.2.7"
-  checksum: 10/e78fe804ed6805708b849fbd49006e981cfa736677bac29556f84bd6ca5271f848076f2f35de087197a559d434435bbfaecca2776563a5b46ecd6246bde7406d
+"@formatjs/bigdecimal@npm:0.2.6":
+  version: 0.2.6
+  resolution: "@formatjs/bigdecimal@npm:0.2.6"
+  checksum: 10/5ef248f0feadeb1bceb9fa65ba36ccd1768a41ea6165bc58ae794564ebb09a67621d894fc94ab8b328cc7bba60e4c181847562c92b7cec5cd1208a4191fbbe67
   languageName: node
   linkType: hard
 
-"@formatjs/fast-memoize@npm:3.1.7":
-  version: 3.1.7
-  resolution: "@formatjs/fast-memoize@npm:3.1.7"
-  checksum: 10/2d7ead48684539764ecb8a52178719169186595e830d9d6941eff12bec1ae31e20642a9cfd197007c48a8cc7e965bf61445ffcccc0fd77281341271d00e7b8fb
+"@formatjs/fast-memoize@npm:3.1.6":
+  version: 3.1.6
+  resolution: "@formatjs/fast-memoize@npm:3.1.6"
+  checksum: 10/7dec3e82586d4c4889671c6081d7b0d87b2c229ba551d8328f96ae8ab58b2cd6056fc5d360c0b0c9688b7164f12ef517428016fbce15b950987a77005e481824
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:3.5.14":
-  version: 3.5.14
-  resolution: "@formatjs/icu-messageformat-parser@npm:3.5.14"
+"@formatjs/icu-messageformat-parser@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@formatjs/icu-messageformat-parser@npm:3.5.13"
   dependencies:
-    "@formatjs/icu-skeleton-parser": "npm:2.1.11"
-  checksum: 10/e842d8ec0c17c174da0eb562e161f5216b31cb83546bf94fd3dd6e4b6493f8c0c404b9fb47b6b8106a607a83d305386bc1fb44abbc70453cf467d261e39d09c1
+    "@formatjs/icu-skeleton-parser": "npm:2.1.10"
+  checksum: 10/b6451febdcfbe32571af5ae1c94cc560f6b3d815401321849c9dba229c460edf9ee4eca4c2d4da6dedefea416f2e3b10b4aa5507383e12b67042f941157e8045
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:2.1.11":
-  version: 2.1.11
-  resolution: "@formatjs/icu-skeleton-parser@npm:2.1.11"
-  checksum: 10/492f42bd4ad72b2cdb4fd75a07e3874aa78e88f346027058f74c58e3828378092784176c9f7c77f4b5baf58ffaa1a4e8f5efcb53143552def2990510d0ac3c16
+"@formatjs/icu-skeleton-parser@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@formatjs/icu-skeleton-parser@npm:2.1.10"
+  checksum: 10/ec30d106ce38de80f4128d0cdfac15699628652807695843254bf0d31650bd0dc4b57e48691d164556234494d59b2816e710fa12321234c85b803c5cda32bedf
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:7.5.0":
-  version: 7.5.0
-  resolution: "@formatjs/intl-datetimeformat@npm:7.5.0"
+"@formatjs/intl-datetimeformat@npm:7.4.10":
+  version: 7.4.10
+  resolution: "@formatjs/intl-datetimeformat@npm:7.4.10"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.7"
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/8f5bbcd2768609e466e5d03cd42880e62fa5c584ef57d716023a0f89ffff12036da41a248956cc1b3369b1af0155459464ac05d5f8fdfb42c0aa066d77ede815
+    "@formatjs/bigdecimal": "npm:0.2.6"
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/67fd55857555fe2651bc8ed5544fb036807d926542c92ccc07e475c14493d93a87d2cc805d04c812c6df68c9fdaeb4d64b399ac019f8c27940e2b872c9837618
   languageName: node
   linkType: hard
 
-"@formatjs/intl-displaynames@npm:7.3.12":
-  version: 7.3.12
-  resolution: "@formatjs/intl-displaynames@npm:7.3.12"
+"@formatjs/intl-displaynames@npm:7.3.11":
+  version: 7.3.11
+  resolution: "@formatjs/intl-displaynames@npm:7.3.11"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/d802f9d44831fcb567efd7399b2f20da7872bf6cdf3cc8c5b38b188111fc8c38af704a79f55902caadd50edb8ebf2f830c473aecc5a93573ddbe1bcfba275793
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/3278e430d7f2bbb0656f5cf0a76a1a539a572c58f0d2473e2a175bc927de7e3a4a01823c3c98a38dc2878fd05ca3a6ebe83afa94dbd254733fe9195377064347
   languageName: node
   linkType: hard
 
-"@formatjs/intl-durationformat@npm:0.10.17":
-  version: 0.10.17
-  resolution: "@formatjs/intl-durationformat@npm:0.10.17"
+"@formatjs/intl-durationformat@npm:0.10.16":
+  version: 0.10.16
+  resolution: "@formatjs/intl-durationformat@npm:0.10.16"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.7"
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/ee3210da7b946a80995b36609a360a55d63f4626e3f40223215d782082f1f8254c49af6145f397ea6324b370038095145c6ff51fda8712e7b611f8609e1ac2b3
+    "@formatjs/bigdecimal": "npm:0.2.6"
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/8d0f5bbf24528c6d8e65636502de64b13e12c71854935db8bf2ce6bcc5b6e0e19533d0e0178c1079b1dd52214b025369c98e297b0e8484fa8ce29c9f6408c953
   languageName: node
   linkType: hard
 
-"@formatjs/intl-getcanonicallocales@npm:3.2.11":
-  version: 3.2.11
-  resolution: "@formatjs/intl-getcanonicallocales@npm:3.2.11"
-  checksum: 10/3132dba96c7cfe63787e126a91e620211a32fa6a623cb763f96102ff153845fb12486f378aa1d761736a7641adb19f5cc307156c8b7a40eedd00223b87c8d2a9
+"@formatjs/intl-getcanonicallocales@npm:3.2.10":
+  version: 3.2.10
+  resolution: "@formatjs/intl-getcanonicallocales@npm:3.2.10"
+  checksum: 10/dbf704d141bd4efc4e2687bd745d1a847a7b94955c23d2f06fe26add8e5ab8ad6096168babad72f2b4568f1fbee32c1528082269273b750bed4bdd1dc5b5d396
   languageName: node
   linkType: hard
 
-"@formatjs/intl-listformat@npm:8.3.12":
-  version: 8.3.12
-  resolution: "@formatjs/intl-listformat@npm:8.3.12"
+"@formatjs/intl-listformat@npm:8.3.11":
+  version: 8.3.11
+  resolution: "@formatjs/intl-listformat@npm:8.3.11"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/3ae640ab968b3051fd1b2d150d892a087d5a4feecb8bdf4a6a61726888996ee0b054de43e35548374d0a61d8577b5a48f23abfb9506c1560f88d64c0809691f1
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/a08a74c22bb01871944cad91fcb87342e30f3f6792375af3028737794a56b2dec6b7506c8e2b9d0495f4eff50f4d63542fcf86116cd4fdf1d4d8b6838a54ac5c
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:5.3.10":
-  version: 5.3.10
-  resolution: "@formatjs/intl-locale@npm:5.3.10"
+"@formatjs/intl-locale@npm:5.3.9":
+  version: 5.3.9
+  resolution: "@formatjs/intl-locale@npm:5.3.9"
   dependencies:
-    "@formatjs/intl-getcanonicallocales": "npm:3.2.11"
-    "@formatjs/intl-supportedvaluesof": "npm:2.3.9"
-  checksum: 10/f7d8be5ea145089b9daa56e24158f835ed0f3d67d3230b42c3a8a32f3dbdd98534236e9262d86f628288d09968fec32d1c2f5906ec1d5f38e692d436a4052255
+    "@formatjs/intl-getcanonicallocales": "npm:3.2.10"
+    "@formatjs/intl-supportedvaluesof": "npm:2.3.8"
+  checksum: 10/e2af858ec3ff75611d5412a1e39abce882eab2cf13eb278e4cd1647481321823cc2303c74e86c38b95662e668f6900f9d666136debb2377231d5ddf0bdba3218
   languageName: node
   linkType: hard
 
-"@formatjs/intl-localematcher@npm:0.8.12":
-  version: 0.8.12
-  resolution: "@formatjs/intl-localematcher@npm:0.8.12"
+"@formatjs/intl-localematcher@npm:0.8.11":
+  version: 0.8.11
+  resolution: "@formatjs/intl-localematcher@npm:0.8.11"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.7"
-  checksum: 10/4f9ecb936ac76cb978460edacbb2704e9760f65203e2c17f96b8db605a3c344ecc7da2ac78c897316f519b033c623b39062ba720e23fe0c2162af7c761f765e6
+    "@formatjs/fast-memoize": "npm:3.1.6"
+  checksum: 10/482b819100997439b2c7295c8112b43c81f64083644cde7124ef1afecaa8fc663bc7b9820b6386d02b45872db7a943c3f1f43a4f78780fe52ed4873ef422e7dc
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:9.3.13":
-  version: 9.3.13
-  resolution: "@formatjs/intl-numberformat@npm:9.3.13"
+"@formatjs/intl-numberformat@npm:9.3.12":
+  version: 9.3.12
+  resolution: "@formatjs/intl-numberformat@npm:9.3.12"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.7"
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/59530d3aec0411a2dae8f2113829b969dceec3ec4a59032cc985ef1b9cebec6d406fbe4dd44ac69e905b4f3b3edb333d61f728a5610fc1e1e132e4bdcb2436aa
+    "@formatjs/bigdecimal": "npm:0.2.6"
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/6a9f3115136ce9f74fab520d5eeddb6a3f23d32492b004c9c6f108a19dd18e9ccaec04582569238f089b3028cc68783a2b75328b3ce38b13bf30d6267cb33b20
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:6.3.12":
-  version: 6.3.12
-  resolution: "@formatjs/intl-pluralrules@npm:6.3.12"
+"@formatjs/intl-pluralrules@npm:6.3.11":
+  version: 6.3.11
+  resolution: "@formatjs/intl-pluralrules@npm:6.3.11"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.7"
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/23833b17822a648fc4e87dfe581733f303a8d1c4721a47e875994bcb56c5985c83ea01f0ab176557886fc6b2ef158ce50f9cafa1e1441badefddec0ea79c5303
+    "@formatjs/bigdecimal": "npm:0.2.6"
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/c5506c1a20f1aa7fdca24b6800243aec5cbacd5aa0de96d01b497fa9485f6affa7abf6b0d2ea04ebff0ec8a2d22a41913f4353b9fd9c6054899a9f168ef2ebd0
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:12.3.12":
-  version: 12.3.12
-  resolution: "@formatjs/intl-relativetimeformat@npm:12.3.12"
+"@formatjs/intl-relativetimeformat@npm:12.3.11":
+  version: 12.3.11
+  resolution: "@formatjs/intl-relativetimeformat@npm:12.3.11"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/c667ed62a13cbc8cd5d07f5dbc57a4d1b7e23c31f2aac0ef9e5f509feec014c5a2dfd77ac41a2c34fe537d6f1f6d8ebc8391a479a4294867bb4e980c7211f822
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/ead23de113c9c28334ff2f8696e0f5ff0567f2b929def10d06e67dba2ca502967671abb1bb6ad06b200329e0215b469edd3c3ad9ed4259b313e97f2badfdab53
   languageName: node
   linkType: hard
 
-"@formatjs/intl-supportedvaluesof@npm:2.3.9":
-  version: 2.3.9
-  resolution: "@formatjs/intl-supportedvaluesof@npm:2.3.9"
+"@formatjs/intl-supportedvaluesof@npm:2.3.8":
+  version: 2.3.8
+  resolution: "@formatjs/intl-supportedvaluesof@npm:2.3.8"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.7"
-  checksum: 10/36254064dd8aab3cb2cbe31db88d751cb0c1d2b0739563ddd1736ed7bd8ec02881de385a69cc4ab7b691f670a3f11ec61a41ba678baa3d0967d87dc0b395cc7b
+    "@formatjs/fast-memoize": "npm:3.1.6"
+  checksum: 10/d9d4e4d5dda1c26c771d0f2746e1031f9695dee663fb2d2ef9f83794c1e8683de88caf6cdb9718022c592cc879c5c1afa7f72af4c77da9ce5e1d98b54267dfff
   languageName: node
   linkType: hard
 
@@ -2984,73 +2984,73 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@html-eslint/core@npm:^0.64.0":
-  version: 0.64.0
-  resolution: "@html-eslint/core@npm:0.64.0"
+"@html-eslint/core@npm:^0.63.0":
+  version: 0.63.0
+  resolution: "@html-eslint/core@npm:0.63.0"
   dependencies:
-    "@html-eslint/types": "npm:^0.64.0"
+    "@html-eslint/types": "npm:^0.63.0"
     html-standard: "npm:^0.0.13"
-  checksum: 10/682d735353acd711ee74e681b5949a35f650e425be670509e1ddca5beeb708347b9c3a740b88eb13d19f6cbf54a903e4dcc173988f6c1c6c9fd212b997df6f17
+  checksum: 10/3fb125fa0bd7c70d9255b465c57328d01f604d201e9079ddafc5a7793b618f59d0ffe77a2aa948e4a07ac9e6f1790aea94d87c2ea266f8b91f3992a1b617e024
   languageName: node
   linkType: hard
 
-"@html-eslint/eslint-plugin@npm:0.64.0":
-  version: 0.64.0
-  resolution: "@html-eslint/eslint-plugin@npm:0.64.0"
+"@html-eslint/eslint-plugin@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@html-eslint/eslint-plugin@npm:0.63.0"
   dependencies:
     "@eslint/plugin-kit": "npm:^0.4.1"
-    "@html-eslint/core": "npm:^0.64.0"
-    "@html-eslint/parser": "npm:^0.64.0"
-    "@html-eslint/template-parser": "npm:^0.64.0"
-    "@html-eslint/template-syntax-parser": "npm:^0.64.0"
-    "@html-eslint/types": "npm:^0.64.0"
+    "@html-eslint/core": "npm:^0.63.0"
+    "@html-eslint/parser": "npm:^0.63.0"
+    "@html-eslint/template-parser": "npm:^0.63.0"
+    "@html-eslint/template-syntax-parser": "npm:^0.63.0"
+    "@html-eslint/types": "npm:^0.63.0"
     "@rviscomi/capo.js": "npm:^2.1.0"
     html-standard: "npm:^0.0.13"
   peerDependencies:
     eslint: ">=8.0.0 || ^10.0.0-0"
-  checksum: 10/3badf5dab3fd62be5f28ca5703004271224a684273ba419cadd7712b47fd57724f6b5ec5e3081e47c3e700fe6ae4066cd71bbde0041d2cb70b3e784a11949eec
+  checksum: 10/ba729511122ce5d20c2dca4300b88ed7ad2afae9c7c7511a9de9e0abc75cea10a22ca7943604373b486d7ac584f6624de056005f9868799c43ce88949a5b33c2
   languageName: node
   linkType: hard
 
-"@html-eslint/parser@npm:^0.64.0":
-  version: 0.64.0
-  resolution: "@html-eslint/parser@npm:0.64.0"
+"@html-eslint/parser@npm:^0.63.0":
+  version: 0.63.0
+  resolution: "@html-eslint/parser@npm:0.63.0"
   dependencies:
-    "@html-eslint/template-syntax-parser": "npm:^0.64.0"
-    "@html-eslint/types": "npm:^0.64.0"
+    "@html-eslint/template-syntax-parser": "npm:^0.63.0"
+    "@html-eslint/types": "npm:^0.63.0"
     css-tree: "npm:^3.1.0"
     es-html-parser: "npm:0.3.1"
-  checksum: 10/7ce0205a07cbddf63959ad2bcf39cf8c4252c5a88abce20326c5b02fd13cd0d81ec6ebe569c4c57b4f9a27842ae62592ad5e47bca58d00cb91d413ad1dad98d0
+  checksum: 10/aae7029e9e5e44e04223a5df29878c229d073b336284c81ad74bbd4ce97a80b10b4bc7d4c1d8c32a3225e7ccf13cc77d73d4197e28bb006e2ff15eed28e266cf
   languageName: node
   linkType: hard
 
-"@html-eslint/template-parser@npm:^0.64.0":
-  version: 0.64.0
-  resolution: "@html-eslint/template-parser@npm:0.64.0"
+"@html-eslint/template-parser@npm:^0.63.0":
+  version: 0.63.0
+  resolution: "@html-eslint/template-parser@npm:0.63.0"
   dependencies:
-    "@html-eslint/types": "npm:^0.64.0"
+    "@html-eslint/types": "npm:^0.63.0"
     es-html-parser: "npm:0.3.1"
-  checksum: 10/2dcdc87c2355af6f45814217a812d54acbab7eca6edb6c0cf7ef0fbafca5a7c75c03b6f4acb2dd4f843abb2e34dae2720cd623f0ec0ccfd4570961b025f461a1
+  checksum: 10/64409e5b3efcb6ba1a2a001ee1cca3308bc0f99db1ed83fbc8c4f7854d4971f41219f664f3664fbc6e41b116f5ac9d27c8e5145a258250c1e1d5ecb0961f2f82
   languageName: node
   linkType: hard
 
-"@html-eslint/template-syntax-parser@npm:^0.64.0":
-  version: 0.64.0
-  resolution: "@html-eslint/template-syntax-parser@npm:0.64.0"
+"@html-eslint/template-syntax-parser@npm:^0.63.0":
+  version: 0.63.0
+  resolution: "@html-eslint/template-syntax-parser@npm:0.63.0"
   dependencies:
-    "@html-eslint/types": "npm:^0.64.0"
-  checksum: 10/774d319f8485cbd20b351767c693e1e281d8e3b7d8c6bf01a2db407684c0656d8789535df0f2357d9bc0df2299023d2d1045a425b72dea1144d265340cfa9031
+    "@html-eslint/types": "npm:^0.63.0"
+  checksum: 10/2e0f21172bfc3762df16443a81a181d59bdef65f00eb6e2a944703cf862b994193053803609cbf3c55fc98d01a3fb82bb800d6d8c7fdbf69a6dad7a55cabf7ab
   languageName: node
   linkType: hard
 
-"@html-eslint/types@npm:^0.64.0":
-  version: 0.64.0
-  resolution: "@html-eslint/types@npm:0.64.0"
+"@html-eslint/types@npm:^0.63.0":
+  version: 0.63.0
+  resolution: "@html-eslint/types@npm:0.63.0"
   dependencies:
     "@types/css-tree": "npm:^2.3.11"
     "@types/estree": "npm:^1.0.6"
     es-html-parser: "npm:0.3.1"
-  checksum: 10/9813e675f06fb950911a0b51e113ff05b3eabe73e6396a3ac2afeeab557c7608d883d092f40fd77f843f362f6cbfefa3cd45df3e0135ce71b5f9dd281eef0caa
+  checksum: 10/892d3cde8e43546e480d327c9d9273f2590a40103616f18a6458770150b49d87e3ba44f2ded68223569a0d04fab61c693277c1a9be3f15ab69c8dabe1e302455
   languageName: node
   linkType: hard
 
@@ -5214,174 +5214,174 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tsparticles/animation-utils@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/animation-utils@npm:4.3.2"
+"@tsparticles/animation-utils@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/animation-utils@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/417b8466a101a14c6c637bd35930fa3065b99b372aef4500d1982a058229492f8ab914336c9f460779907e3b8e24e323b01b4f938b5aa73551ec41943eb408ca
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/ca245b8ce44cd3dee96b99d8d88912c925c71b7d9286cc984087352c6cbc1c73cbd1b892eac4b22dbc343fd829bd11bd8f4c3438295b7e0036cb9c42484fb64f
   languageName: node
   linkType: hard
 
-"@tsparticles/basic@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/basic@npm:4.3.2"
+"@tsparticles/basic@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/basic@npm:4.3.1"
   dependencies:
-    "@tsparticles/engine": "npm:4.3.2"
-    "@tsparticles/plugin-blend": "npm:4.3.2"
-    "@tsparticles/plugin-hex-color": "npm:4.3.2"
-    "@tsparticles/plugin-hsl-color": "npm:4.3.2"
-    "@tsparticles/plugin-move": "npm:4.3.2"
-    "@tsparticles/plugin-rgb-color": "npm:4.3.2"
-    "@tsparticles/shape-circle": "npm:4.3.2"
-    "@tsparticles/updater-opacity": "npm:4.3.2"
-    "@tsparticles/updater-out-modes": "npm:4.3.2"
-    "@tsparticles/updater-paint": "npm:4.3.2"
-    "@tsparticles/updater-size": "npm:4.3.2"
-  checksum: 10/ae74f4d2603dd3edbc5d798ff8fe62c099b17507adc9cc5132cc83425f5cbfd85d3acbfe0957251519ff9e92a4b238fdc25fe4b2c96f410bf28595b59ce900ee
+    "@tsparticles/engine": "npm:4.3.1"
+    "@tsparticles/plugin-blend": "npm:4.3.1"
+    "@tsparticles/plugin-hex-color": "npm:4.3.1"
+    "@tsparticles/plugin-hsl-color": "npm:4.3.1"
+    "@tsparticles/plugin-move": "npm:4.3.1"
+    "@tsparticles/plugin-rgb-color": "npm:4.3.1"
+    "@tsparticles/shape-circle": "npm:4.3.1"
+    "@tsparticles/updater-opacity": "npm:4.3.1"
+    "@tsparticles/updater-out-modes": "npm:4.3.1"
+    "@tsparticles/updater-paint": "npm:4.3.1"
+    "@tsparticles/updater-size": "npm:4.3.1"
+  checksum: 10/d4e4011e3601c6f281283f76f7a8fbd0b1f449d604bfc10047a7809dc5f03351e726d2ec700ca804d249b689a950ca4a8aee93e724bdb25d7d28faf561898f82
   languageName: node
   linkType: hard
 
-"@tsparticles/canvas-utils@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/canvas-utils@npm:4.3.2"
+"@tsparticles/canvas-utils@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/canvas-utils@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/4c248ac87cb815cc18a0e0e5fec1beac03dc40f8de377783d4149ef1c8320962560af80110cfd9179676ed9b80175e84e711841d3860df01ea61a2cbce0413b5
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/9ebb0cb2ce61c64b8acf262e65f4bdd5e1a5eecba739a87e31c0772eaf0d2934934e0284cc94302a4b6bf3380cc2aa6a126f057035ffc421603db4be22b3ad07
   languageName: node
   linkType: hard
 
-"@tsparticles/engine@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/engine@npm:4.3.2"
-  checksum: 10/f49c3656b23d71ebb13d218c389ec4c784ae74624e14a1253eb6edbdd24cf0b08cc734ab96d647cee02f87721180456a2cda15c892a3879241713ba2f8696fde
+"@tsparticles/engine@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/engine@npm:4.3.1"
+  checksum: 10/175cb0b56146d521b740e4ab0189c45b93be180fd40ab97df250dcd1d52ca8701c31e94aac594dcfbd0115cf4d2de7ff7d46adc14cdf4a31be2fc3f3119b84f7
   languageName: node
   linkType: hard
 
-"@tsparticles/interaction-particles-links@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/interaction-particles-links@npm:4.3.2"
+"@tsparticles/interaction-particles-links@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/interaction-particles-links@npm:4.3.1"
   dependencies:
-    "@tsparticles/canvas-utils": "npm:4.3.2"
+    "@tsparticles/canvas-utils": "npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-    "@tsparticles/plugin-interactivity": 4.3.2
-  checksum: 10/89d046b2aa75efa07d1d242fdae7f39e260ad2dc6947b337089ae6708dcec250feb30273a2217c6da248ced2f6b99f05818bddf8b88c479bfd994e206b5122d4
+    "@tsparticles/engine": 4.3.1
+    "@tsparticles/plugin-interactivity": 4.3.1
+  checksum: 10/120f91cc56a5174a4b9ce0526ab99a8ef2eaeb82369939d34c6c45a45d3691e73bce65c0e7ac177b5e0549a8acb1908017ed0677a49dc0ed9b3810d02f6d0bdb
   languageName: node
   linkType: hard
 
-"@tsparticles/plugin-blend@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/plugin-blend@npm:4.3.2"
+"@tsparticles/plugin-blend@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/plugin-blend@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/27ed3682439d63830b169ee22c11b812517d1aa612d219b591c19ac8f2eb5497b5b48d59440c84845ce135bb6b13103fa896e6bed718132cfb2810f7b2feab7a
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/b100b5e2be00e3b5f1e8f189e928dad6a7fc95abab2feb22ca599522cc6bae95b10c9acc5173eb90dbf641fefe195f27f9020dda03c64d6db64a9c7ed51a03cf
   languageName: node
   linkType: hard
 
-"@tsparticles/plugin-hex-color@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/plugin-hex-color@npm:4.3.2"
+"@tsparticles/plugin-hex-color@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/plugin-hex-color@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/942e1478031c79b97ff8da17dfe0cd7575065c14e6f7d07cc2b0e56a4e32fc499ea47bddf9d58936d4fa329a56c65ceade1d84d9acdae89ab7a600a8086ebeb2
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/e9db18b29213522d383b34ed989ae735c1403f683a551c9cfe7c12ad40f4e4966546e376d473d550840a013687350e0206377a097ee4df9d0cd31610af555d62
   languageName: node
   linkType: hard
 
-"@tsparticles/plugin-hsl-color@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/plugin-hsl-color@npm:4.3.2"
+"@tsparticles/plugin-hsl-color@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/plugin-hsl-color@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/a507dc23ad0699b9ae9166eb27a2d7ecbec7d157fa1417f66612e4d18c0f513f6ded66c116c337ae2e32bbd5e76cdcb51df38a11ca30ac5f350751e9d0d40471
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/fa6c43ef1a17da30a682608f7e91221584707853d2f27ff4567682d423cf2f36873c7ea4d7c3e5e8c6e152646554758c2cb9875ee3d2d52d53fa08a1608cc3fa
   languageName: node
   linkType: hard
 
-"@tsparticles/plugin-interactivity@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/plugin-interactivity@npm:4.3.2"
+"@tsparticles/plugin-interactivity@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/plugin-interactivity@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/0f31454bcc6c6e7e90fec585aa8cf6cd7efd33d4109067b7176ce0e8e885dad6b7d0b4b2b5d7b7354ade4c0a9ba038f43861b36ede59ffb72dd319ead8c20988
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/ed4669a9dcd84a05f4c2e984483a0e75192a3ab556a63fd0130de081b2edd6baaa1aa4b1c7eb24f06b267fdcb0a1583416a7f1c4b0af023bf300ae01a27e45e1
   languageName: node
   linkType: hard
 
-"@tsparticles/plugin-move@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/plugin-move@npm:4.3.2"
+"@tsparticles/plugin-move@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/plugin-move@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/e86e4e0f143f25c3079ab66fc9339c45e572aa59d4e11b9d056a772eec430c04e78f8c0ec25e5b0c541860b3e79d369d62d826c431b98cb2fadf57668f87a541
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/38ad582a8315ae1da47edec4589213dd4e8b0fbaf9074e0c12f20744a4ea4ab4fac8da5a9c07c82f3356d79d24a6b204af585adfbdc01f14d00f67f0d975f7b7
   languageName: node
   linkType: hard
 
-"@tsparticles/plugin-rgb-color@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/plugin-rgb-color@npm:4.3.2"
+"@tsparticles/plugin-rgb-color@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/plugin-rgb-color@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/860f01c2e0d7491774c9fb7d00673bb2edec4e770dbb0926bc4397a04172e0be2c4caa541309a6e7a0f53e54260d8a15da891801a3899700b24b46da6eb04aca
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/a2ef532fbe00cddc8d118ddc00ffe1121121d5a8e30dd8875911f778aea25a2b48bea300dd93000f56e5b9d46ba509583ce0087138e4d378228857d0d0aea488
   languageName: node
   linkType: hard
 
-"@tsparticles/preset-links@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/preset-links@npm:4.3.2"
+"@tsparticles/preset-links@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/preset-links@npm:4.3.1"
   dependencies:
-    "@tsparticles/basic": "npm:4.3.2"
-    "@tsparticles/engine": "npm:4.3.2"
-    "@tsparticles/interaction-particles-links": "npm:4.3.2"
-    "@tsparticles/plugin-interactivity": "npm:4.3.2"
-  checksum: 10/be949f8e5355e8edaf3c47f3ad65b149c8bee59e2839bbb1874f4add0a7054bdcd94e60150d099447ff6a755dfbe0b28d91188ff05e33bd62e0624056ef191f1
+    "@tsparticles/basic": "npm:4.3.1"
+    "@tsparticles/engine": "npm:4.3.1"
+    "@tsparticles/interaction-particles-links": "npm:4.3.1"
+    "@tsparticles/plugin-interactivity": "npm:4.3.1"
+  checksum: 10/4084d84dbe0afec240e2ddadc46f3c5c3aa0c5fcd3d7b8cdf20377b27c9b68ec54b8a843c5212b2527e053c9c3a9f35826e1a95c4decf46cb681bbfccb87cd39
   languageName: node
   linkType: hard
 
-"@tsparticles/shape-circle@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/shape-circle@npm:4.3.2"
+"@tsparticles/shape-circle@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/shape-circle@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/428e0576a1e990afce58a1e363269937546dae7cfb5eb158bef11c73708dce717e5ea8b5060d0782d800732a693b280df1a3c4655bf3aedb98d234e42745fbbe
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/257e841b9130ed7935b8ad9590265c41a134d6739f6b779ae080709f23054922fadb5071239f06bc03fa8df2d715b8e031933a37f4c55362832cc2d3b3ab0228
   languageName: node
   linkType: hard
 
-"@tsparticles/updater-opacity@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/updater-opacity@npm:4.3.2"
+"@tsparticles/updater-opacity@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/updater-opacity@npm:4.3.1"
   dependencies:
-    "@tsparticles/animation-utils": "npm:4.3.2"
+    "@tsparticles/animation-utils": "npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/20f8dba30869efcfc0cbc11652d4aba29cb24156cb9a8818d561d8a946c7e7054a47df93c07313447f2a7c5f5238b5dd0c255eb46bf5de603f1affdf3188018a
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/cae7c72d06eebd412a7f47979abab3e675bc4efa864c2887c8cf540f524c212b0ec45672e7107ffb78a61ba58ef6359f616362fcb014864a2bf36e72b3c0db34
   languageName: node
   linkType: hard
 
-"@tsparticles/updater-out-modes@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/updater-out-modes@npm:4.3.2"
+"@tsparticles/updater-out-modes@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/updater-out-modes@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/4770c67b5cbc4b6219b0034fc51d9b414e0d284497b29f2d61ce94565bdfe7a69ca3f7e60b2e2b3ecea3927ea90fac29aa5c356cf47db5a6f51067653493e0e3
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/adab89c27c622bbfb63a36a885eee6c372643a6d5da8fd67e6a23d0eae3793cb20a678e7eb7084b0629638f6212bc396daaf56652ad8f5770087bb4e49c9924a
   languageName: node
   linkType: hard
 
-"@tsparticles/updater-paint@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/updater-paint@npm:4.3.2"
+"@tsparticles/updater-paint@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/updater-paint@npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/186f6ccc3a55ded85606ee99e44dd83239a3403b21ac485f70210ecd6e6b46c8f97a26645eef1b14a865dbb38957f0c8da3f46896b39e346de48922ca620cb71
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/df24e3fc4ffef48f6dd62792c940a3db9765f4f3b4aed376fa3d25356aebe33aacae7750c0a180ce711e2fbb2d5a869ae190325b8b6ffd013f92012ce96d0336
   languageName: node
   linkType: hard
 
-"@tsparticles/updater-size@npm:4.3.2":
-  version: 4.3.2
-  resolution: "@tsparticles/updater-size@npm:4.3.2"
+"@tsparticles/updater-size@npm:4.3.1":
+  version: 4.3.1
+  resolution: "@tsparticles/updater-size@npm:4.3.1"
   dependencies:
-    "@tsparticles/animation-utils": "npm:4.3.2"
+    "@tsparticles/animation-utils": "npm:4.3.1"
   peerDependencies:
-    "@tsparticles/engine": 4.3.2
-  checksum: 10/94d2998f85294b65bffd4792564d987d7c1a0f159c4724e33391bc65cdf8e5b57bef240604bb364e8a73de67e7f073f63a595abd1f8a0130c335209a8ea8d42f
+    "@tsparticles/engine": 4.3.1
+  checksum: 10/b2b0a213b746be567bc42ea94d0dc3411ca9da2204a14107da2eff726c3b553550456cdc13e91e4495140754cddfb2de5ed57ecf7f86ddfa396b93b3e5a6bda9
   languageName: node
   linkType: hard
 
@@ -8681,9 +8681,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:10.7.0":
-  version: 10.7.0
-  resolution: "eslint@npm:10.7.0"
+"eslint@npm:10.6.0":
+  version: 10.6.0
+  resolution: "eslint@npm:10.6.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.8.0"
     "@eslint-community/regexpp": "npm:^4.12.2"
@@ -8722,7 +8722,7 @@ __metadata:
       optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10/51cb70fbdd0de6586f0cb12625388faab18eb679cbdb523ecb631cae9f47fd9171d9ff02f570dc4d2e5700017908a81477511025ccb2a6603c5928fbfddcaebf
+  checksum: 10/36d02cdbe37668e601f255917c605d10a5d06d278648dc72cec21fe23b7b60a53453241b32c382ba8107533cacba70aeec97581cc4f4bb591544b1ada2516335
   languageName: node
   linkType: hard
 
@@ -9736,15 +9736,15 @@ __metadata:
     "@date-fns/tz": "npm:1.5.0"
     "@egjs/hammerjs": "npm:2.0.17"
     "@eslint/js": "npm:10.0.1"
-    "@formatjs/intl-datetimeformat": "npm:7.5.0"
-    "@formatjs/intl-displaynames": "npm:7.3.12"
-    "@formatjs/intl-durationformat": "npm:0.10.17"
-    "@formatjs/intl-getcanonicallocales": "npm:3.2.11"
-    "@formatjs/intl-listformat": "npm:8.3.12"
-    "@formatjs/intl-locale": "npm:5.3.10"
-    "@formatjs/intl-numberformat": "npm:9.3.13"
-    "@formatjs/intl-pluralrules": "npm:6.3.12"
-    "@formatjs/intl-relativetimeformat": "npm:12.3.12"
+    "@formatjs/intl-datetimeformat": "npm:7.4.10"
+    "@formatjs/intl-displaynames": "npm:7.3.11"
+    "@formatjs/intl-durationformat": "npm:0.10.16"
+    "@formatjs/intl-getcanonicallocales": "npm:3.2.10"
+    "@formatjs/intl-listformat": "npm:8.3.11"
+    "@formatjs/intl-locale": "npm:5.3.9"
+    "@formatjs/intl-numberformat": "npm:9.3.12"
+    "@formatjs/intl-pluralrules": "npm:6.3.11"
+    "@formatjs/intl-relativetimeformat": "npm:12.3.11"
     "@fullcalendar/core": "npm:6.1.21"
     "@fullcalendar/daygrid": "npm:6.1.21"
     "@fullcalendar/interaction": "npm:6.1.21"
@@ -9752,7 +9752,7 @@ __metadata:
     "@fullcalendar/luxon3": "npm:6.1.21"
     "@fullcalendar/timegrid": "npm:6.1.21"
     "@home-assistant/webawesome": "npm:3.7.0-ha.0"
-    "@html-eslint/eslint-plugin": "npm:0.64.0"
+    "@html-eslint/eslint-plugin": "npm:0.63.0"
     "@lezer/highlight": "npm:1.2.3"
     "@lit-labs/motion": "npm:1.1.0"
     "@lit-labs/observers": "npm:2.1.0"
@@ -9776,8 +9776,8 @@ __metadata:
     "@rspack/dev-server": "npm:2.1.0"
     "@swc/helpers": "npm:0.5.23"
     "@thomasloven/round-slider": "npm:0.6.0"
-    "@tsparticles/engine": "npm:4.3.2"
-    "@tsparticles/preset-links": "npm:4.3.2"
+    "@tsparticles/engine": "npm:4.3.1"
+    "@tsparticles/preset-links": "npm:4.3.1"
     "@types/babel__plugin-transform-runtime": "npm:7.9.5"
     "@types/chromecast-caf-receiver": "npm:6.0.26"
     "@types/chromecast-caf-sender": "npm:1.0.11"
@@ -9814,7 +9814,7 @@ __metadata:
     dialog-polyfill: "npm:0.5.6"
     echarts: "npm:6.1.0"
     element-internals-polyfill: "npm:3.0.2"
-    eslint: "npm:10.7.0"
+    eslint: "npm:10.6.0"
     eslint-config-prettier: "npm:10.1.8"
     eslint-import-resolver-webpack: "npm:0.13.11"
     eslint-plugin-import-x: "npm:4.17.1"
@@ -9838,7 +9838,7 @@ __metadata:
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.3.0"
-    intl-messageformat: "npm:11.2.11"
+    intl-messageformat: "npm:11.2.10"
     js-yaml: "npm:5.2.1"
     jsdom: "npm:29.1.1"
     jszip: "npm:3.10.1"
@@ -10186,13 +10186,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:11.2.11":
-  version: 11.2.11
-  resolution: "intl-messageformat@npm:11.2.11"
+"intl-messageformat@npm:11.2.10":
+  version: 11.2.10
+  resolution: "intl-messageformat@npm:11.2.10"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.7"
-    "@formatjs/icu-messageformat-parser": "npm:3.5.14"
-  checksum: 10/5074494588d6c16fb2730234b3c8eb80799189c9c21485323b5c119c22d3a7a8b385868b46479b81c09ca350d82ea0eeaf82b5e9799911b9a1b8bddbb2c3ad1c
+    "@formatjs/fast-memoize": "npm:3.1.6"
+    "@formatjs/icu-messageformat-parser": "npm:3.5.13"
+  checksum: 10/d3f751ebfe2015cf4a011afe5679398dfa7156c0bc2ccd76ba8c5aa4e82946bd663e750538c97a8b4c946a6d5f5d19fbb56b2e159d422c416e51bba9b10b2746
   languageName: node
   linkType: hard