Increase JS budgets

Add failsafe for empty browserlist. Add comment to describe prefix issue in literals. Use default browserlistEnv naming convention. SW uses more efficient browserlist only targeting browsers that support sw.

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

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

AGENTS.md

@@ -2,6 +2,8 @@
 
 You are helping develop the Home Assistant frontend. This repository is a TypeScript application built from Lit-based Web Components for the Home Assistant web UI.
 
+For the standalone demo — including how to open a specific demo configuration or page via URL — read `demo/AGENTS.md`.
+
 ## Essential Commands
 
 ```bash
@@ -45,7 +47,6 @@ Detailed guidance lives in project skills under `.agents/skills/`. Load the matc
 - `ha-frontend-user-facing-text`: localization, terminology, sentence case, and Home Assistant text style.
 - `ha-frontend-review`: PR template use, review checklist, and recurring review issues.
 - `ha-frontend-gallery`: gallery pages, demos, sidebar structure, content, and verification.
-- `ha-frontend-demo`: standalone demo structure, configurations, navigation, shared stubs, and verification.
 
 ## Pull Requests
 

build-scripts/bundle-budget.json

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

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

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

build-scripts/rspack.cjs

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

demo/AGENTS.md

@@ -0,0 +1,56 @@
+# Demo Agent Instructions
+
+This file applies to all files under `demo/`. Follow the root `AGENTS.md` for repository-wide standards.
+
+The demo is the full Home Assistant frontend running against a mocked backend (published at https://demo.home-assistant.io). It needs no Home Assistant server, which makes it the easiest way to load the real UI in a browser, for example to take screenshots.
+
+## Running the demo
+
+Run from the repository root:
+
+```bash
+yarn dev:demo               # dev server on http://localhost:8090
+yarn dev:demo --background  # detached; also supports --status/--stop/--logs
+```
+
+## Opening a specific demo
+
+The demo contains multiple demo configurations. Select one directly with the `demo` query parameter, e.g. `http://localhost:8090/?demo=<slug>`. The valid slugs are defined in `demoConfigs` in `src/configs/demo-configs.ts`, so "the second demo" means the slug of the second entry in that list. An unknown slug falls back to the default (the first entry).
+
+## Opening a specific page
+
+The demo build uses hash-based routing: the frontend path goes in the URL hash, and the `demo` query parameter goes before the `#`. The URL format is:
+
+```
+http://localhost:8090/?demo=<slug>#/<path>
+```
+
+Useful paths:
+
+- `/lovelace/0` — the selected demo's dashboard (also the default when no hash is given)
+- `/energy` — energy dashboard. Its tabs are views: `/energy/overview` (Summary), `/energy/electricity`, `/energy/gas`, `/energy/water`, `/energy/now`
+- `/map`, `/history`, `/todo`, `/config` — other sidebar panels
+
+Example — the water tab of the energy dashboard of the second demo:
+
+```
+http://localhost:8090/?demo=<second slug>#/energy/water
+```
+
+## Structure
+
+- `src/ha-demo.ts`: Root element; sets up all backend mocks.
+- `src/configs/<slug>/`: One directory per demo configuration (entities, dashboard, theme).
+- `src/configs/demo-configs.ts`: Registry of demo configurations and URL slug handling.
+- `src/stubs/`: Mocked WebSocket/REST APIs.
+- `script/develop_demo`, `script/build_demo`: Dev server and static build wrappers.
+
+## The gallery imports these stubs too
+
+`demo/src/stubs/` is shared, not demo-private: gallery pages import from it directly. Before changing or removing anything a stub does, grep for its callers across `gallery/` as well as `demo/`, and check the affected gallery pages, not just the demo.
+
+```bash
+grep -rn "stubs/<name>" demo/src gallery/src
+```
+
+The two consume a stub differently, so demo behavior does not predict gallery behavior. A gallery page calls stubs against the `hass` from `provideHass`, where `hass.config` is the shared `demoConfig` object, so a stub that mutates `hass.config` in place is visible to the page. `ha-demo.ts` copies `components` into a new array before the stubs run, so the same mutation never reaches the demo. A change can therefore look fine in the demo while quietly breaking a gallery page.

demo/CLAUDE.md

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

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

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

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

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

src/common/entity/compute_entity_id_format_example.ts

@@ -1,15 +0,0 @@
-import type { EntityIdPart } from "../../data/entity_id_format";
-import { slugify } from "../string/slugify";
-
-export const computeEntityIdFormatExample = (
-  format: EntityIdPart[],
-  examples: Record<EntityIdPart, string>
-): string => {
-  const parts = format
-    .map((item) => examples[item])
-    .filter(Boolean)
-    .map((part) => slugify(part, "_"))
-    .filter(Boolean);
-
-  return parts.join("_") || "unknown";
-};

src/components/buttons/ha-progress-button.ts

@@ -126,7 +126,7 @@ export class HaProgressButton extends LitElement {
       visibility: hidden;
     }
 
-    .progress ha-svg-icon {
+    :host([appearance="brand"]) ha-svg-icon {
       color: var(--white-color);
     }
   `;

src/components/chips/ha-input-chip.ts

@@ -27,7 +27,6 @@ export class HaInputChip extends InputChip {
         );
         --ha-input-chip-selected-container-opacity: 1;
         --md-input-chip-label-text-font: Roboto, sans-serif;
-        --md-input-chip-label-text-weight: 400;
       }
       /** Set the size of mdc icons **/
       ::slotted([slot="icon"]) {

src/components/device/dialog-device-replaced.ts

@@ -1,142 +0,0 @@
-import { mdiDevices } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import { computeAreaName } from "../../common/entity/compute_area_name";
-import { computeDeviceName } from "../../common/entity/compute_device_name";
-import { getDeviceArea } from "../../common/entity/context/get_device_context";
-import type { HomeAssistant } from "../../types";
-import type { HassDialog } from "../../dialogs/make-dialog-manager";
-import "../ha-dialog";
-import "../ha-svg-icon";
-import "../item/ha-list-item-button";
-import "../list/ha-list-base";
-import type { DeviceReplacedDialogParams } from "./show-dialog-device-replaced";
-
-@customElement("dialog-device-replaced")
-export class DialogDeviceReplaced
-  extends LitElement
-  implements HassDialog<DeviceReplacedDialogParams>
-{
-  @state() private _params?: DeviceReplacedDialogParams;
-
-  @state() private _open = false;
-
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  public async showDialog(params: DeviceReplacedDialogParams): Promise<void> {
-    this._params = params;
-    this._open = true;
-  }
-
-  public closeDialog(): boolean {
-    this._open = false;
-    return true;
-  }
-
-  private _dialogClosed(): void {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  private _pick(ev: Event): void {
-    const item = (ev.target as HTMLElement).closest("ha-list-item-button") as
-      (HTMLElement & { deviceId?: string }) | null;
-    if (!item?.deviceId) {
-      return;
-    }
-    this._params?.onResolved(item.deviceId);
-    this.closeDialog();
-  }
-
-  private _items = memoizeOne(
-    (
-      candidates: string[],
-      primaryId: string | null,
-      devices: HomeAssistant["devices"],
-      areas: HomeAssistant["areas"]
-    ) =>
-      candidates.map((deviceId) => {
-        const device = devices[deviceId];
-        const area = device ? getDeviceArea(device, areas) : undefined;
-        return {
-          deviceId,
-          name: device ? computeDeviceName(device) : deviceId,
-          secondary: area ? computeAreaName(area) : undefined,
-          isPrimary: deviceId === primaryId,
-        };
-      })
-  );
-
-  protected render() {
-    if (!this._params || !this.hass) {
-      return nothing;
-    }
-
-    return html`
-      <ha-dialog
-        .open=${this._open}
-        .headerTitle=${this.hass.localize(
-          "ui.components.device-picker.replaced_dialog.title"
-        )}
-        @closed=${this._dialogClosed}
-      >
-        <p class="description">
-          ${this.hass.localize(
-            "ui.components.device-picker.replaced_dialog.description"
-          )}
-        </p>
-        <ha-list-base @click=${this._pick}>
-          ${this._items(
-            this._params.candidates,
-            this._params.primaryId,
-            this.hass.devices,
-            this.hass.areas
-          ).map(
-            (item) => html`
-              <ha-list-item-button .deviceId=${item.deviceId}>
-                <ha-svg-icon slot="start" .path=${mdiDevices}></ha-svg-icon>
-                <span slot="headline">${item.name}</span>
-                ${
-                  item.secondary || item.isPrimary
-                    ? html`<span slot="supporting-text">
-                        ${[
-                          item.secondary,
-                          item.isPrimary
-                            ? this.hass.localize(
-                                "ui.components.device-picker.replaced_dialog.recommended"
-                              )
-                            : undefined,
-                        ]
-                          .filter(Boolean)
-                          .join(" • ")}
-                      </span>`
-                    : nothing
-                }
-              </ha-list-item-button>
-            `
-          )}
-        </ha-list-base>
-      </ha-dialog>
-    `;
-  }
-
-  static styles = css`
-    ha-dialog {
-      --dialog-content-padding: 0;
-      --ha-row-item-padding-inline: var(--ha-space-6);
-    }
-    .description {
-      margin: 0;
-      padding: 0 var(--ha-space-6) var(--ha-space-4);
-      color: var(--secondary-text-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-device-replaced": DialogDeviceReplaced;
-  }
-}

src/components/device/ha-device-automation-picker.ts

@@ -12,7 +12,6 @@ import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
   deviceAutomationsEqual,
-  deviceAutomationsSimilar,
   sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
@@ -202,22 +201,12 @@ export abstract class HaDeviceAutomationPicker<
       : // No device, clear the list of automations
         [];
 
-    // If there is no value, or if we have changed the device ID, reset the
-    // value. When the device changed (for example after replacing a removed
-    // device), try to keep the same automation type/subtype on the new device
-    // before falling back to the first available automation.
+    // If there is no value, or if we have changed the device ID, reset the value.
     if (!this.value || this.value.device_id !== this.deviceId) {
-      const equivalent =
-        this.value && this.deviceId
-          ? this._automations.find((automation) =>
-              deviceAutomationsSimilar(automation, this.value!)
-            )
-          : undefined;
       this._setValue(
-        equivalent ||
-          (this._automations.length
-            ? this._automations[0]
-            : this._createNoAutomation(this.deviceId))
+        this._automations.length
+          ? this._automations[0]
+          : this._createNoAutomation(this.deviceId)
       );
     }
     this._renderEmpty = true;

src/components/device/ha-device-picker.ts

@@ -1,7 +1,6 @@
-import { mdiAlertOutline } from "@mdi/js";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, type PropertyValues } from "lit";
+import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -14,20 +13,12 @@ import {
   getDevices,
   type DevicePickerItem,
 } from "../../data/device/device_picker";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-  type DeviceRegistryEntry,
-} from "../../data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
-import "../ha-alert";
-import "../ha-button";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import "../ha-svg-icon";
-import { showDeviceReplacedDialog } from "./show-dialog-device-replaced";
 
 export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
@@ -104,10 +95,6 @@ export class HaDevicePicker extends LitElement {
 
   @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
 
-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
   private _getDevicesMemoized = memoizeOne(
     (
       _devices: HomeAssistant["devices"],
@@ -136,29 +123,6 @@ export class HaDevicePicker extends LitElement {
     this._loadConfigEntries();
   }
 
-  protected willUpdate(changedProperties: PropertyValues<this>): void {
-    if (
-      !this.hass ||
-      !this.value ||
-      this._compositeSplits !== undefined ||
-      this._loadingCompositeSplits
-    ) {
-      return;
-    }
-    const oldHass = changedProperties.get("hass") as HomeAssistant | undefined;
-    const devicesChanged =
-      changedProperties.has("hass") && this.hass.devices !== oldHass?.devices;
-    if (
-      (changedProperties.has("value") || devicesChanged) &&
-      !this.hass.devices[this.value]
-    ) {
-      // The selected device is not in the registry; it might be a legacy
-      // composite device that was split into separate devices. Fetch the
-      // split map so we can offer to replace the reference.
-      this._loadCompositeSplits();
-    }
-  }
-
   private async _loadConfigEntries() {
     const configEntries = await getConfigEntries(this.hass);
     this._configEntryLookup = Object.fromEntries(
@@ -166,43 +130,6 @@ export class HaDevicePicker extends LitElement {
     );
   }
 
-  private async _loadCompositeSplits() {
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
-  private _getReplacement = memoizeOne(
-    (
-      value: string | undefined,
-      _devices: HomeAssistant["devices"],
-      compositeSplits: DeviceCompositeSplits | undefined,
-      items: (DevicePickerItem | string)[]
-    ) => {
-      if (!value || !compositeSplits || this.hass.devices[value]) {
-        return undefined;
-      }
-      const split = compositeSplits[value];
-      if (!split) {
-        return undefined;
-      }
-      // Keep only the split devices that pass this picker's filters. In
-      // practice usually exactly one of the split devices matches.
-      const selectableIds = new Set(
-        items
-          .filter((item): item is DevicePickerItem => typeof item !== "string")
-          .map((item) => item.id)
-      );
-      const candidates = split.split_ids.filter((id) => selectableIds.has(id));
-      return { candidates, primaryId: split.primary_id };
-    }
-  );
-
   private _getItems = () =>
     this._getDevicesMemoized(
       this.hass.devices,
@@ -217,66 +144,49 @@ export class HaDevicePicker extends LitElement {
     );
 
   private _valueRenderer = memoizeOne(
-    (
-      configEntriesLookup: Record<string, ConfigEntry>,
-      replacementName: string | undefined
-    ) =>
-      (value: string) => {
-        const deviceId = value;
-        const device = this.hass.devices[deviceId];
+    (configEntriesLookup: Record<string, ConfigEntry>) => (value: string) => {
+      const deviceId = value;
+      const device = this.hass.devices[deviceId];
 
-        if (!device) {
-          // When the device was replaced and a replacement is available, show
-          // the replacement device's name. Otherwise fall back to the normal
-          // "not found" display of the raw id.
-          if (replacementName) {
-            return html`
-              <ha-svg-icon
-                slot="start"
-                style="color: var(--warning-color)"
-                .path=${mdiAlertOutline}
-              ></ha-svg-icon>
-              <span slot="headline">${replacementName}</span>
-            `;
-          }
-          return html`<span slot="headline">${deviceId}</span>`;
-        }
-
-        const area = getDeviceArea(device, this.hass.areas);
-
-        const deviceName = device ? computeDeviceName(device) : undefined;
-        const areaName = area ? computeAreaName(area) : undefined;
-
-        const primary = deviceName;
-        const secondary = areaName;
-
-        const configEntry = device.primary_config_entry
-          ? configEntriesLookup[device.primary_config_entry]
-          : undefined;
-
-        return html`
-          ${
-            configEntry
-              ? html`<img
-                  slot="start"
-                  alt=""
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  src=${brandsUrl(
-                    {
-                      domain: configEntry.domain,
-                      type: "icon",
-                      darkOptimized: this.hass.themes?.darkMode,
-                    },
-                    this.hass.auth.data.hassUrl
-                  )}
-                />`
-              : nothing
-          }
-          <span slot="headline">${primary}</span>
-          <span slot="supporting-text">${secondary}</span>
-        `;
+      if (!device) {
+        return html`<span slot="headline">${deviceId}</span>`;
       }
+
+      const area = getDeviceArea(device, this.hass.areas);
+
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      const areaName = area ? computeAreaName(area) : undefined;
+
+      const primary = deviceName;
+      const secondary = areaName;
+
+      const configEntry = device.primary_config_entry
+        ? configEntriesLookup[device.primary_config_entry]
+        : undefined;
+
+      return html`
+        ${
+          configEntry
+            ? html`<img
+                slot="start"
+                alt=""
+                crossorigin="anonymous"
+                referrerpolicy="no-referrer"
+                src=${brandsUrl(
+                  {
+                    domain: configEntry.domain,
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  },
+                  this.hass.auth.data.hassUrl
+                )}
+              />`
+            : nothing
+        }
+        <span slot="headline">${primary}</span>
+        <span slot="supporting-text">${secondary}</span>
+      `;
+    }
   );
 
   private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
@@ -325,39 +235,7 @@ export class HaDevicePicker extends LitElement {
       this.placeholder ??
       this.hass.localize("ui.components.device-picker.placeholder");
 
-    // Only resolve a replacement (which needs the full item list) when the
-    // value is a missing device that we know was replaced, to avoid computing
-    // the item list on every render for the common case.
-    const replacement =
-      this.value &&
-      !this.hass.devices[this.value] &&
-      this._compositeSplits?.[this.value]
-        ? this._getReplacement(
-            this.value,
-            this.hass.devices,
-            this._compositeSplits,
-            this._getItems()
-          )
-        : undefined;
-
-    // Only treat the value as "replaced" when there is an available
-    // replacement device; otherwise fall back to normal "not found" behavior.
-    const canReplace = !!replacement?.candidates.length;
-    const replacementName = canReplace
-      ? computeDeviceName(
-          this.hass.devices[
-            replacement!.primaryId &&
-            replacement!.candidates.includes(replacement!.primaryId)
-              ? replacement!.primaryId
-              : replacement!.candidates[0]
-          ]
-        )
-      : undefined;
-
-    const valueRenderer = this._valueRenderer(
-      this._configEntryLookup,
-      replacementName
-    );
+    const valueRenderer = this._valueRenderer(this._configEntryLookup);
 
     return html`
       <ha-generic-picker
@@ -378,84 +256,15 @@ export class HaDevicePicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .valueRenderer=${valueRenderer}
         .searchKeys=${deviceComboBoxKeys}
-        .unknownItemText=${
-          replacement?.candidates.length
-            ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_count",
-                { count: replacement.candidates.length }
-              )
-            : this.hass.localize("ui.components.device-picker.unknown")
-        }
+        .unknownItemText=${this.hass.localize(
+          "ui.components.device-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
-      ${canReplace ? this._renderReplacedAlert(replacement!) : nothing}
     `;
   }
 
-  private _renderReplacedAlert(replacement: {
-    candidates: string[];
-    primaryId: string | null;
-  }) {
-    const { candidates } = replacement;
-
-    const replacementName =
-      candidates.length === 1
-        ? computeDeviceName(this.hass.devices[candidates[0]])
-        : undefined;
-
-    return html`
-      <ha-alert alert-type="warning">
-        ${
-          replacementName
-            ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_one",
-                { device: replacementName }
-              )
-            : this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_multiple",
-                { count: candidates.length }
-              )
-        }
-        <ha-button
-          slot="action"
-          appearance="plain"
-          @click=${this._handleReplace}
-        >
-          ${this.hass.localize("ui.components.device-picker.replace_device")}
-        </ha-button>
-      </ha-alert>
-    `;
-  }
-
-  private _handleReplace = () => {
-    const replacement = this._getReplacement(
-      this.value,
-      this.hass.devices,
-      this._compositeSplits,
-      this._getItems()
-    );
-    if (!replacement?.candidates.length) {
-      return;
-    }
-    const { candidates, primaryId } = replacement;
-    if (candidates.length === 1) {
-      this._setValue(candidates[0]);
-      return;
-    }
-    showDeviceReplacedDialog(this, {
-      originalDeviceId: this.value!,
-      candidates,
-      primaryId,
-      onResolved: (deviceId) => this._setValue(deviceId),
-    });
-  };
-
-  private _setValue(value: string) {
-    this.value = value;
-    fireEvent(this, "value-changed", { value });
-  }
-
   public async open() {
     await this.updateComplete;
     await this._picker?.open();
@@ -472,13 +281,6 @@ export class HaDevicePicker extends LitElement {
     this.hass.localize("ui.components.device-picker.no_match", {
       term: html`<b>‘${search}’</b>`,
     });
-
-  static styles = css`
-    ha-alert {
-      display: block;
-      margin-top: 8px;
-    }
-  `;
 }
 
 declare global {

src/components/device/show-dialog-device-replaced.ts

@@ -1,22 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-export interface DeviceReplacedDialogParams {
-  /** The removed composite device that is being referenced. */
-  originalDeviceId: string;
-  /** The split devices the reference can be pointed at. */
-  candidates: string[];
-  /** The split device that took over the composite's primary config entry. */
-  primaryId: string | null;
-  /** Called with the device the user picked as replacement. */
-  onResolved: (deviceId: string) => void;
-}
-
-export const showDeviceReplacedDialog = (
-  element: HTMLElement,
-  params: DeviceReplacedDialogParams
-) =>
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-device-replaced",
-    dialogImport: () => import("./dialog-device-replaced"),
-    dialogParams: params,
-  });

src/components/ha-gauge.ts

@@ -1,7 +1,6 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { PropertyValues } from "lit";
 import { css, LitElement, svg } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
 import { blankBeforePercent } from "../common/translations/blank_before_percent";
@@ -47,32 +46,15 @@ export class HaGauge extends LitElement {
 
   @state() private _segment_label?: string = "";
 
-  @query(".text") private _textSvg?: SVGSVGElement;
-
-  @query(".value-text") private _valueText?: SVGTextElement;
-
   private _sortedLevels?: LevelDefinition[];
 
-  // Set when the value text could not be measured because we have no layout box
-  // yet, either disconnected or inside a hidden container.
-  private _rescalePending = false;
-
-  // Measure again once we get a layout box, e.g. when a section hidden by a
-  // visibility condition is revealed. Nothing else re-renders the gauge then.
-  // @ts-ignore side-effect-only controller, its value is never read
-  private _resizeController = new ResizeController(this, {
-    skipInitial: true,
-    callback: (entries) => {
-      if (this._rescalePending && entries[0]?.contentRect.width) {
-        this._rescaleSvg();
-      }
-    },
-  });
+  private _rescaleOnConnect = false;
 
   public connectedCallback(): void {
     super.connectedCallback();
-    if (this._rescalePending && this.hasUpdated) {
+    if (this._rescaleOnConnect) {
       this._rescaleSvg();
+      this._rescaleOnConnect = false;
     }
   }
 
@@ -239,22 +221,15 @@ export class HaGauge extends LitElement {
     // fit the text
     // That way it will auto-scale correctly
 
-    if (!this._textSvg || !this._valueText || !this.isConnected) {
-      this._rescalePending = true;
+    if (!this.isConnected) {
+      // Retry this later if we're disconnected, otherwise we get a 0 bbox and missing label
+      this._rescaleOnConnect = true;
       return;
     }
 
-    const box = this._valueText.getBBox();
-
-    // An empty box means we have no layout, so keep the last known good viewBox
-    // and retry later. A viewBox with a 0 width or height would hide the label.
-    if (!box.width || !box.height) {
-      this._rescalePending = true;
-      return;
-    }
-
-    this._rescalePending = false;
-    this._textSvg.setAttribute(
+    const svgRoot = this.shadowRoot!.querySelector(".text")!;
+    const box = svgRoot.querySelector("text")!.getBBox()!;
+    svgRoot.setAttribute(
       "viewBox",
       `${box.x} ${box.y} ${box.width} ${box.height}`
     );
@@ -273,8 +248,6 @@ export class HaGauge extends LitElement {
 
   static styles = css`
     :host {
-      /* a non replaced inline element never reports a size to a resize observer */
-      display: block;
       position: relative;
     }
 

src/components/ha-snowflakes.ts

@@ -1,6 +1,7 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import type { HomeAssistant } from "../types";
 import { subscribeLabFeature } from "../data/labs";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
@@ -81,14 +82,14 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
               class="snowflake ${
                 this.narrow && flake.id >= 30 ? "hide-narrow" : ""
               }"
-              style="
-                left: ${flake.left}%;
-                width: ${flake.size}px;
-                height: ${flake.size}px;
-                animation-duration: ${flake.duration}s;
-                animation-delay: ${flake.delay}s;
-                --rotation: ${flake.rotation}deg;
-              "
+              style=${styleMap({
+                left: `${flake.left}%`,
+                width: `${flake.size}px`,
+                height: `${flake.size}px`,
+                "animation-duration": `${flake.duration}s`,
+                "animation-delay": `${flake.delay}s`,
+                "--rotation": `${flake.rotation}deg`,
+              })}
               viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"

src/components/ha-target-picker.ts

@@ -27,10 +27,6 @@ import {
   getDevices,
   type DevicePickerItem,
 } from "../data/device/device_picker";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
 import {
   entityComboBoxKeys,
@@ -126,10 +122,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
 
-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
   @state()
   @consume({ context: labelsContext, subscribe: true })
   private _labelRegistry!: LabelRegistryEntry[];
@@ -219,24 +211,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       this._loadConfigEntries();
     }
 
-    const devicesChanged =
-      changedProps.has("hass") &&
-      this.hass.devices !== changedProps.get("hass")?.devices;
-    if (
-      (changedProps.has("value") || devicesChanged) &&
-      this.hass &&
-      this._compositeSplits === undefined &&
-      !this._loadingCompositeSplits &&
-      this.value?.device_id &&
-      ensureArray(this.value.device_id).some(
-        (deviceId) => !this.hass.devices[deviceId]
-      )
-    ) {
-      // A referenced device is missing from the registry; it might be a legacy
-      // composite device that was split. Fetch the split map to offer a fix.
-      this._loadCompositeSplits();
-    }
-
     if (
       this._pendingEntityId &&
       changedProps.has("hass") &&
@@ -323,7 +297,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                     .hass=${this.hass}
                     type="device"
                     .itemId=${device_id}
-                    .compositeSplits=${this._compositeSplits}
                     @remove-target-item=${this._handleRemove}
                     @expand-target-item=${this._handleExpand}
                   ></ha-target-picker-value-chip>
@@ -417,7 +390,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 <ha-target-picker-item-group
                   @remove-target-item=${this._handleRemove}
                   @replace-target-item=${this._handleReplace}
-                  @migrate-target-item=${this._handleMigrate}
                   type="device"
                   .hass=${this.hass}
                   .items=${{ device: deviceIds }}
@@ -426,7 +398,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   .includeDomains=${this.includeDomains}
                   .includeDeviceClasses=${this.includeDeviceClasses}
                   .primaryEntitiesOnly=${this.primaryEntitiesOnly}
-                  .compositeSplits=${this._compositeSplits}
                 >
                 </ha-target-picker-item-group>
               `
@@ -1204,31 +1175,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     );
   }
 
-  private async _loadCompositeSplits() {
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
-  private _handleMigrate(
-    ev: HASSDomEvent<HASSDomEvents["migrate-target-item"]>
-  ) {
-    const { id, replacements } = ev.detail;
-    let value = this._removeItem(this.value, "device", id);
-    for (const replacement of replacements) {
-      value = this._addTargetToValue(value, {
-        type: "device",
-        id: replacement,
-      });
-    }
-    fireEvent(this, "value-changed", { value });
-  }
-
   private _renderRow = (
     item:
       | PickerComboBoxItem
@@ -1411,7 +1357,6 @@ declare global {
     "remove-target-item": TargetItem;
     "expand-target-item": TargetItem;
     "replace-target-item": TargetItem;
-    "migrate-target-item": { id: string; replacements: string[] };
     "remove-target-group": string;
   }
 }

src/components/target-picker/ha-target-picker-item-group.ts

@@ -1,6 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { DeviceCompositeSplits } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { TargetType, TargetTypeFloorless } from "../../data/target";
 import type { HomeAssistant } from "../../types";
@@ -53,9 +52,6 @@ export class HaTargetPickerItemGroup extends LitElement {
   @property({ type: Boolean, attribute: "primary-entities-only" })
   public primaryEntitiesOnly?: boolean;
 
-  @property({ attribute: false })
-  public compositeSplits?: DeviceCompositeSplits;
-
   protected render() {
     let count = 0;
     Object.values(this.items).forEach((items) => {
@@ -91,7 +87,6 @@ export class HaTargetPickerItemGroup extends LitElement {
                     .includeDomains=${this.includeDomains}
                     .includeDeviceClasses=${this.includeDeviceClasses}
                     .primaryEntitiesOnly=${this.primaryEntitiesOnly}
-                    .compositeSplits=${this.compositeSplits}
                   ></ha-target-picker-item-row>`
               )
             : nothing

src/components/target-picker/ha-target-picker-item-row.ts

@@ -34,10 +34,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { AreaRegistryEntry } from "../../data/area/area_registry";
 import { getConfigEntry } from "../../data/config_entries";
 import { labelsContext } from "../../data/context";
-import type {
-  DeviceCompositeSplits,
-  DeviceRegistryEntry,
-} from "../../data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { FloorRegistryEntry } from "../../data/floor_registry";
 import { domainToName } from "../../data/integration";
@@ -57,7 +54,6 @@ import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
 import { floorDefaultIconPath } from "../ha-floor-icon";
-import "../ha-button";
 import "../ha-icon-button";
 import "../ha-state-icon";
 import "../ha-svg-icon";
@@ -112,9 +108,6 @@ export class HaTargetPickerItemRow extends LitElement {
   @property({ type: Boolean, attribute: "primary-entities-only" })
   public primaryEntitiesOnly?: boolean;
 
-  @property({ attribute: false })
-  public compositeSplits?: DeviceCompositeSplits;
-
   @state() private _iconImg?: string;
 
   @state() private _domainName?: string;
@@ -135,15 +128,6 @@ export class HaTargetPickerItemRow extends LitElement {
     const { name, context, iconPath, fallbackIconPath, stateObject, notFound } =
       this._itemData(this.type, this.itemId);
 
-    const replacement =
-      this.type === "device" && notFound
-        ? this._getReplacement(this.itemId)
-        : undefined;
-    // Only surface the "replaced" state when there is at least one available
-    // replacement device to migrate to. If every replacement device was
-    // deleted (or filtered out), fall back to the plain "not found" state.
-    const canMigrate = !!replacement?.candidates.length;
-
     const showEntities = this.type !== "entity" && !notFound;
 
     const entries = this.parentEntries || this._entries;
@@ -190,20 +174,15 @@ export class HaTargetPickerItemRow extends LitElement {
         }
       </div>
 
-      <div slot="headline">${(canMigrate && replacement?.name) || name}</div>
+      <div slot="headline">${name}</div>
       ${
         notFound || (context && !this.hideContext)
           ? html`<span slot="supporting-text"
               >${
                 notFound
-                  ? canMigrate
-                    ? this.hass.localize(
-                        "ui.components.target-picker.device_replaced",
-                        { count: replacement!.candidates.length }
-                      )
-                    : this.hass.localize(
-                        `ui.components.target-picker.${this.type}_not_found`
-                      )
+                  ? this.hass.localize(
+                      `ui.components.target-picker.${this.type}_not_found`
+                    )
                   : context
               }</span
             >`
@@ -250,24 +229,6 @@ export class HaTargetPickerItemRow extends LitElement {
             `
           : nothing
       }
-      ${
-        canMigrate
-          ? html`
-              <ha-button
-                class="migrate"
-                slot="end"
-                appearance="plain"
-                variant="warning"
-                size="s"
-                @click=${this._migrate}
-              >
-                ${this.hass.localize(
-                  "ui.components.target-picker.replace_device"
-                )}
-              </ha-button>
-            `
-          : nothing
-      }
       ${
         !this.expand && !this.subEntry
           ? html`
@@ -746,51 +707,6 @@ export class HaTargetPickerItemRow extends LitElement {
     });
   }
 
-  // Returns the split devices that replaced a removed composite device and
-  // pass this row's filters, or undefined if the item is not a replaced device.
-  private _getReplacement(item: string) {
-    const split = this.compositeSplits?.[item];
-    if (!split || this.hass.devices[item]) {
-      return undefined;
-    }
-    const candidates = split.split_ids.filter((id) => {
-      const device = this.hass.devices[id];
-      return (
-        device &&
-        deviceMeetsFilter(
-          device,
-          this.hass.entities,
-          this.deviceFilter,
-          this.includeDomains,
-          this.includeDeviceClasses,
-          this.hass.states,
-          this.entityFilter,
-          !this.primaryEntitiesOnly
-        )
-      );
-    });
-    // Display the replaced reference using the primary replacement device's
-    // name instead of the removed composite device id. Fall back to the first
-    // available candidate if the primary device itself was deleted.
-    const nameDevice =
-      (split.primary_id && this.hass.devices[split.primary_id]) ||
-      (candidates.length ? this.hass.devices[candidates[0]] : undefined);
-    const name = nameDevice ? computeDeviceName(nameDevice) : undefined;
-    return { candidates, name };
-  }
-
-  private _migrate = (ev: MouseEvent) => {
-    ev.stopPropagation();
-    const replacement = this._getReplacement(this.itemId);
-    if (!replacement?.candidates.length) {
-      return;
-    }
-    fireEvent(this, "migrate-target-item", {
-      id: this.itemId,
-      replacements: replacement.candidates,
-    });
-  };
-
   private _openDetails(ev: MouseEvent) {
     ev.stopPropagation();
     showTargetDetailsDialog(this, {
@@ -830,11 +746,6 @@ export class HaTargetPickerItemRow extends LitElement {
         color: var(--ha-color-on-warning-normal);
       }
 
-      .migrate {
-        align-self: center;
-        white-space: nowrap;
-      }
-
       .replaceable {
         cursor: pointer;
       }

src/components/target-picker/ha-target-picker-value-chip.ts

@@ -1,7 +1,6 @@
 import "@home-assistant/webawesome/dist/components/tag/tag";
 import { consume } from "@lit/context";
 import {
-  mdiAlertOutline,
   mdiDevices,
   mdiHome,
   mdiLabel,
@@ -10,7 +9,6 @@ import {
 } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../common/color/compute-color";
 import { hex2rgb } from "../../common/color/convert-color";
@@ -21,7 +19,6 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { slugify } from "../../common/string/slugify";
 import { getConfigEntry } from "../../data/config_entries";
 import { labelsContext } from "../../data/context";
-import type { DeviceCompositeSplits } from "../../data/device/device_registry";
 import { domainToName } from "../../data/integration";
 import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { TargetType } from "../../data/target";
@@ -42,9 +39,6 @@ export class HaTargetPickerValueChip extends LitElement {
 
   @property({ attribute: "item-id" }) public itemId!: string;
 
-  @property({ attribute: false })
-  public compositeSplits?: DeviceCompositeSplits;
-
   @state() private _domainName?: string;
 
   @state() private _iconImg?: string;
@@ -57,74 +51,38 @@ export class HaTargetPickerValueChip extends LitElement {
     const { name, iconPath, fallbackIconPath, stateObject, color } =
       this._itemData(this.type, this.itemId);
 
-    const split =
-      this.type === "device" && !this.hass.devices?.[this.itemId]
-        ? this.compositeSplits?.[this.itemId]
-        : undefined;
-    // Show the replaced reference using the primary replacement device's name,
-    // falling back to the first still-existing split device if the primary
-    // device itself was deleted. If no replacement device exists at all, fall
-    // back to the normal "not found" display.
-    const replacementDevice = split
-      ? (split.primary_id && this.hass.devices?.[split.primary_id]) ||
-        split.split_ids
-          .map((id) => this.hass.devices?.[id])
-          .find((device) => device)
-      : undefined;
-    const replaced = !!replacementDevice;
-    const replacedName = replacementDevice
-      ? computeDeviceNameDisplay(
-          replacementDevice,
-          this.hass.localize,
-          this.hass.states
-        )
-      : undefined;
-
     return html`
       <wa-tag
         pill
         with-remove
-        class=${classMap({ [this.type]: true, replaced })}
+        class=${this.type}
         style=${color ? `--color: rgb(${color});` : ""}
         @wa-remove=${this._removeItem}
       >
         <div class="icon">
           ${
-            replaced
-              ? html`<ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>`
-              : iconPath
-                ? html`<ha-icon .icon=${iconPath}></ha-icon>`
-                : this._iconImg
-                  ? html`<img
-                      alt=${this._domainName || ""}
-                      width="24"
-                      crossorigin="anonymous"
-                      referrerpolicy="no-referrer"
-                      src=${this._iconImg}
-                    />`
-                  : fallbackIconPath
-                    ? html`<ha-svg-icon
-                        .path=${fallbackIconPath}
-                      ></ha-svg-icon>`
-                    : stateObject
-                      ? html`<ha-state-icon
-                          .stateObj=${stateObject}
-                        ></ha-state-icon>`
-                      : nothing
+            iconPath
+              ? html`<ha-icon .icon=${iconPath}></ha-icon>`
+              : this._iconImg
+                ? html`<img
+                    alt=${this._domainName || ""}
+                    width="24"
+                    crossorigin="anonymous"
+                    referrerpolicy="no-referrer"
+                    src=${this._iconImg}
+                  />`
+                : fallbackIconPath
+                  ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
+                  : stateObject
+                    ? html`<ha-state-icon
+                        .stateObj=${stateObject}
+                      ></ha-state-icon>`
+                    : nothing
           }
         </div>
-        <span class="name">
-          ${
-            replaced
-              ? replacedName ||
-                this.hass.localize(
-                  "ui.components.target-picker.replaced_device"
-                )
-              : name
-          }
-        </span>
+        <span class="name"> ${name} </span>
         ${
-          this.type === "entity" || replaced
+          this.type === "entity"
             ? nothing
             : html`<ha-tooltip .for="expand-${slugify(this.itemId)}"
                   >${this.hass.localize(
@@ -167,7 +125,7 @@ export class HaTargetPickerValueChip extends LitElement {
     if (type === "device") {
       const device = this.hass.devices?.[itemId];
 
-      if (device?.primary_config_entry) {
+      if (device.primary_config_entry) {
         this._getDeviceDomain(device.primary_config_entry);
       }
 
@@ -282,11 +240,6 @@ export class HaTargetPickerValueChip extends LitElement {
       --background-color: var(--color);
       --icon-primary-color: var(--primary-text-color);
     }
-    wa-tag.replaced {
-      border-color: var(--ha-color-border-warning-normal, var(--warning-color));
-      --background-color: var(--warning-color);
-      color: var(--ha-color-on-warning-normal, var(--warning-color));
-    }
 
     .name {
       overflow: hidden;

src/components/tile/ha-tile-container.ts

@@ -112,7 +112,7 @@ export class HaTileContainer extends LitElement {
       flex-direction: column;
       text-align: center;
       justify-content: center;
-      padding: 10px;
+      padding: 10px 0;
     }
     .vertical ::slotted([slot="info"]) {
       width: 100%;

src/data/action.ts

@@ -49,25 +49,23 @@ export const YAML_ONLY_ACTION_TYPES = new Set<keyof typeof ACTION_ICONS>([
 export const ACTION_COLLECTIONS: AutomationElementGroupCollection[] = [
   {
     groups: {
+      device_id: {},
       dynamicGroups: {},
-      event: {},
-      service: {},
-      set_conversation_response: {},
+    },
+  },
+  {
+    titleKey: "ui.panel.config.automation.editor.actions.groups.helpers.label",
+    groups: {
       helpers: {},
     },
   },
   {
-    titleKey: "ui.panel.config.automation.editor.actions.groups.generic.label",
-    generic: true,
+    titleKey: "ui.panel.config.automation.editor.actions.groups.other.label",
     groups: {
-      device_id: {},
-    },
-  },
-  {
-    titleKey:
-      "ui.panel.config.automation.editor.actions.groups.integrations.label",
-    groups: {
-      integrationGroups: {},
+      event: {},
+      service: {},
+      set_conversation_response: {},
+      other: {},
     },
   },
 ] as const;

src/data/condition.ts

@@ -21,6 +21,7 @@ export const CONDITION_COLLECTIONS: AutomationElementGroupCollection[] = [
       helpers: {},
       template: {},
       trigger: {},
+      other: {},
     },
   },
   {
@@ -34,9 +35,9 @@ export const CONDITION_COLLECTIONS: AutomationElementGroupCollection[] = [
   },
   {
     titleKey:
-      "ui.panel.config.automation.editor.conditions.groups.integrations.label",
+      "ui.panel.config.automation.editor.conditions.groups.custom_integrations.label",
     groups: {
-      integrationGroups: {},
+      customDynamicGroups: {},
     },
   },
 ] as const;

src/data/device/device_automation.ts

@@ -2,10 +2,9 @@ import type { HassEntities } from "home-assistant-js-websocket";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import type { LocalizeFunc } from "../../common/translations/localize";
 import type { HaFormSchema } from "../../components/ha-form/types";
-import type { CallWS, HomeAssistant } from "../../types";
+import type { CallWS } from "../../types";
 import type { BaseTrigger } from "../automation";
 import { migrateAutomationTrigger } from "../automation";
-import type { DeviceCompositeSplits } from "./device_registry";
 import type { EntityRegistryEntry } from "../entity/entity_registry";
 import {
   entityRegistryByEntityId,
@@ -159,51 +158,6 @@ export const deviceAutomationsEqual = (
   return true;
 };
 
-// Decides how a device automation editor should handle its referenced device.
-// A missing device that was replaced by a split device stays editable so the
-// device picker can offer to fix the reference; a genuinely unknown device
-// cannot be edited visually. Returns "loading" while the split map is unknown.
-export const deviceAutomationEditorMode = (
-  hass: HomeAssistant,
-  deviceId: string | undefined,
-  compositeSplits: DeviceCompositeSplits | undefined
-): "editable" | "loading" | "unknown-device" => {
-  if (!deviceId || deviceId in hass.devices) {
-    return "editable";
-  }
-  if (compositeSplits === undefined) {
-    return "loading";
-  }
-  // Only editable if at least one of the split (replacement) devices still
-  // exists; otherwise the reference is stale and cannot be fixed here.
-  const split = compositeSplits[deviceId];
-  return split?.split_ids.some((id) => id in hass.devices)
-    ? "editable"
-    : "unknown-device";
-};
-
-// Like deviceAutomationsEqual, but ignores device_id and entity_id so an
-// automation can be matched to the equivalent one on a different device (for
-// example when a referenced device was replaced by a split device).
-export const deviceAutomationsSimilar = (
-  a: DeviceAutomation,
-  b: DeviceAutomation
-) => {
-  if (typeof a !== typeof b) {
-    return false;
-  }
-  return deviceAutomationIdentifiers
-    .filter((property) => property !== "device_id" && property !== "entity_id")
-    .every((property) => {
-      const inA = property in a;
-      const inB = property in b;
-      if (!inA && !inB) {
-        return true;
-      }
-      return Object.is(a[property], b[property]);
-    });
-};
-
 const compareEntityIdWithEntityRegId = (
   entityRegistry: EntityRegistryEntry[],
   entityIdA?: string,

src/data/device/device_registry.ts

@@ -1,4 +1,3 @@
-import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { HomeAssistant } from "../../types";
@@ -55,69 +54,6 @@ export interface DeviceRegistryEntryMutableParams {
   labels?: string[];
 }
 
-/**
- * Describes how a legacy composite device (that lived on multiple config
- * entries) was split into separate devices. The composite device no longer
- * exists in the registry; references to it (in automations, targets, ...) now
- * need to point at one or more of the split devices instead.
- */
-export interface DeviceCompositeSplit {
-  /** Ids of the devices that replaced the composite device. */
-  split_ids: string[];
-  /** The split device that took over the composite's primary config entry. */
-  primary_id: string | null;
-}
-
-/** Map of removed composite device id -> its split information. */
-export type DeviceCompositeSplits = Record<string, DeviceCompositeSplit>;
-
-// The composite split migration in core is a one-time operation, so the split
-// map is static for the lifetime of the connection. Cache the request per
-// connection so it is fetched once and shared across all pickers, instead of
-// being requested again by every device/target picker.
-const compositeSplitsCache = new WeakMap<
-  Connection,
-  Promise<DeviceCompositeSplits>
->();
-
-export const fetchDeviceCompositeSplits = (
-  hass: Pick<HomeAssistant, "connection" | "callWS">
-): Promise<DeviceCompositeSplits> => {
-  const conn = hass.connection;
-
-  let request = compositeSplitsCache.get(conn);
-  if (!request) {
-    request = hass
-      .callWS<DeviceCompositeSplits>({
-        type: "config/device_registry/list_composite_splits",
-      })
-      .catch((err) => {
-        // Don't cache failures so the next caller retries.
-        compositeSplitsCache.delete(conn);
-        throw err;
-      });
-    compositeSplitsCache.set(conn, request);
-  }
-  return request;
-};
-
-/**
- * Fetch the devices that are linked to the given device because they share at
- * least one connection or identifier. These are separate devices (one per
- * config entry) that represent the same physical hardware, managed by
- * different integrations.
- */
-export const fetchLinkedDevices = (
-  hass: Pick<HomeAssistant, "callWS">,
-  deviceId: string
-): Promise<string[]> =>
-  hass
-    .callWS<{ linked_devices: string[] }>({
-      type: "config/device_registry/list_linked_devices",
-      device_id: deviceId,
-    })
-    .then((result) => result.linked_devices);
-
 export const fallbackDeviceName = (
   hass: HomeAssistant,
   entities: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]

src/data/entity/entity_registry_settings.ts

@@ -1,22 +0,0 @@
-import type { HomeAssistantApi } from "../../types";
-import type { EntityIdFormat } from "../entity_id_format";
-
-export interface EntityRegistrySettings {
-  entity_id_parts: EntityIdFormat | null;
-}
-
-export const fetchEntityRegistrySettings = (
-  api: HomeAssistantApi
-): Promise<EntityRegistrySettings> =>
-  api.callWS<EntityRegistrySettings>({
-    type: "config/entity_registry/settings/get",
-  });
-
-export const updateEntityRegistrySettings = (
-  api: HomeAssistantApi,
-  updates: Partial<EntityRegistrySettings>
-): Promise<EntityRegistrySettings> =>
-  api.callWS<EntityRegistrySettings>({
-    type: "config/entity_registry/settings/update",
-    ...updates,
-  });

src/data/entity_id_format.ts

@@ -1,12 +0,0 @@
-export type EntityIdPart = "area" | "device" | "entity" | "floor";
-
-export type EntityIdFormat = EntityIdPart[];
-
-export const DEFAULT_ENTITY_ID_FORMAT: EntityIdFormat = [
-  "area",
-  "device",
-  "entity",
-];
-
-export const isDefaultEntityIdFormat = (format: EntityIdFormat): boolean =>
-  JSON.stringify(format) === JSON.stringify(DEFAULT_ENTITY_ID_FORMAT);

src/data/lovelace.ts

@@ -23,7 +23,6 @@ export interface LovelaceViewElement extends HTMLElement {
   badges?: HuiBadge[];
   sections?: HuiSection[];
   isStrategy: boolean;
-  initialRenderComplete?: Promise<void>;
   setConfig(config: LovelaceViewConfig): void;
 }
 

src/data/trigger.ts

@@ -35,6 +35,7 @@ export const TRIGGER_COLLECTIONS: AutomationElementGroupCollection[] = [
       webhook: {},
       persistent_notification: {},
       helpers: {},
+      other: {},
     },
   },
   {
@@ -47,9 +48,9 @@ export const TRIGGER_COLLECTIONS: AutomationElementGroupCollection[] = [
   },
   {
     titleKey:
-      "ui.panel.config.automation.editor.triggers.groups.integrations.label",
+      "ui.panel.config.automation.editor.triggers.groups.custom_integrations.label",
     groups: {
-      integrationGroups: {},
+      customDynamicGroups: {},
     },
   },
 ] as const;

src/layouts/hass-loading-screen.ts

@@ -1,7 +1,6 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../components/animation/ha-fade-in";
 import "../components/ha-top-app-bar-fixed";
 import "../components/ha-spinner";
 import type { HomeAssistant } from "../types";
@@ -37,9 +36,7 @@ class HassLoadingScreen extends LitElement {
   private _renderContent(): TemplateResult {
     return html`
       <div class="content">
-        <ha-fade-in .delay=${500}>
-          <ha-spinner></ha-spinner>
-        </ha-fade-in>
+        <ha-spinner></ha-spinner>
         ${
           this.message
             ? html`<div id="loading-text">${this.message}</div>`

src/layouts/hass-router-page.ts

@@ -5,7 +5,6 @@ import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { computeRouteTail } from "../common/url/route";
 import type { Route } from "../types";
-import { PanelReady } from "./panel-ready";
 
 const extractPage = (path: string, defaultPage: string) => {
   if (path === "") {
@@ -23,7 +22,6 @@ export interface RouteOptions {
   // Function to load the page.
   load?: () => Promise<unknown>;
   cache?: boolean;
-  waitForReady?: boolean;
 }
 
 export interface RouterOptions {
@@ -55,8 +53,6 @@ export class HassRouterPage extends ReactiveElement {
 
   private _currentLoadProm?: Promise<void>;
 
-  private _panelReady = new PanelReady();
-
   private _cache = {};
 
   private _initialLoadDone = false;
@@ -184,10 +180,6 @@ export class HassRouterPage extends ReactiveElement {
     // If we don't show loading screen, just show the panel.
     // It will be automatically upgraded when loading done.
     if (!routerOptions.showLoading) {
-      const loadComplete = () => {
-        this._currentLoadProm = undefined;
-      };
-      this._currentLoadProm = loadProm.then(loadComplete, loadComplete);
       this._createPanel(routerOptions, newPage, routeOptions);
       return;
     }
@@ -295,15 +287,7 @@ export class HassRouterPage extends ReactiveElement {
    * Promise that resolves when the page has rendered.
    */
   protected get pageRendered(): Promise<void> {
-    return this.updateComplete
-      .then(() => this._currentLoadProm)
-      .then(() => {
-        const page = this.lastElementChild;
-        return Promise.all([
-          this._panelReady.ready,
-          page instanceof HassRouterPage ? page.pageRendered : undefined,
-        ]).then(() => undefined);
-      });
+    return this.updateComplete.then(() => this._currentLoadProm);
   }
 
   protected createElement(tag: string) {
@@ -328,7 +312,6 @@ export class HassRouterPage extends ReactiveElement {
     }
 
     const panelEl = this._cache[page] || this.createElement(routeOptions.tag);
-    this._panelReady.track(panelEl, routeOptions.waitForReady);
     this.updatePageEl(panelEl);
     this.appendChild(panelEl);
 

src/layouts/home-assistant.ts

@@ -17,7 +17,10 @@ import { HassElement } from "../state/hass-element";
 import QuickBarMixin from "../state/quick-bar-mixin";
 import type { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
-import { renderLaunchScreenContent } from "../util/launch-screen";
+import {
+  removeLaunchScreen,
+  renderLaunchScreenContent,
+} from "../util/launch-screen";
 import { checkOnboardingSurveyToast } from "../util/onboarding-survey";
 import {
   registerServiceWorker,
@@ -133,9 +136,16 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     ) {
       this.render = this.renderHass;
       this.update = super.update;
-      // partial-panel-resolver removes the launch screen after the first panel
-      // is ready. Native apps request instant removal because their own splash
-      // screen covers the frontend until frontend/loaded is sent.
+      // Apps with a native splash screen keep covering the frontend until
+      // frontend/loaded, so the launch screen stays up (invisibly) until the
+      // first panel has rendered and partial-panel-resolver removes it and
+      // fires frontend/loaded.
+      if (
+        !this.hass.auth.external?.config.hasSplashscreen &&
+        removeLaunchScreen()
+      ) {
+        this.hass.auth.external?.fireMessage({ type: "frontend/loaded" });
+      }
     }
     super.update(changedProps);
   }

src/layouts/panel-ready.ts

@@ -1,69 +0,0 @@
-import { ContextProvider, createContext } from "@lit/context";
-import type { ReactiveController, ReactiveControllerHost } from "lit";
-import { ReactiveElement } from "lit";
-import { fireEvent } from "../common/dom/fire_event";
-
-declare global {
-  interface HASSDomEvents {
-    "hass-panel-ready": undefined;
-  }
-}
-
-export const panelIsReady = async (element: HTMLElement) => {
-  if (element instanceof ReactiveElement) {
-    // Ensure pending Lit changes are rendered before revealing the panel.
-    await element.updateComplete;
-  }
-  fireEvent(element, "hass-panel-ready");
-};
-
-export type RegisterChildPanelReady = (ready: Promise<void>) => void;
-
-export const childPanelReadyContext =
-  createContext<RegisterChildPanelReady>("child-panel-ready");
-
-export class ChildPanelReady implements ReactiveController {
-  private _promises: Promise<void>[] = [];
-
-  private _host: ReactiveControllerHost & HTMLElement;
-
-  private _resolveReady?: () => void;
-
-  public ready = new Promise<void>((resolve) => {
-    this._resolveReady = resolve;
-  });
-
-  public constructor(host: ReactiveControllerHost & HTMLElement) {
-    this._host = host;
-    host.addController(this);
-    new ContextProvider(host, {
-      context: childPanelReadyContext,
-      initialValue: (ready) => this._promises.push(ready),
-    });
-  }
-
-  public hostUpdated() {
-    Promise.all(this._promises).then(
-      () => {
-        this._resolveReady?.();
-        return panelIsReady(this._host);
-      },
-      () => undefined
-    );
-    this._host.removeController(this);
-  }
-}
-
-export class PanelReady {
-  public ready?: Promise<void>;
-
-  public track(element: HTMLElement, waitForReady = false) {
-    this.ready = waitForReady
-      ? new Promise((resolve) => {
-          element.addEventListener("hass-panel-ready", () => resolve(), {
-            once: true,
-          });
-        })
-      : undefined;
-  }
-}

src/layouts/partial-panel-resolver.ts

@@ -8,7 +8,6 @@ import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { deepActiveElement } from "../common/dom/deep-active-element";
 import { deepEqual } from "../common/util/deep-equal";
-import { promiseTimeout } from "../common/util/promise-timeout";
 import { narrowViewportContext } from "../data/context";
 import { getDefaultPanel } from "../data/panel";
 import type { CustomPanelInfo } from "../data/panel_custom";
@@ -18,63 +17,29 @@ import type { RouteOptions, RouterOptions } from "./hass-router-page";
 import { HassRouterPage } from "./hass-router-page";
 
 const CACHE_URL_PATHS = ["lovelace", "home", "config"];
-const PANEL_READY_TIMEOUT = 2000;
-const DASHBOARD_READY_TIMEOUT = 5000;
 const COMPONENTS = {
-  app: { load: () => import("../panels/app/ha-panel-app") },
-  energy: {
-    load: () => import("../panels/energy/ha-panel-energy"),
-    waitForReady: true,
-    readyTimeout: DASHBOARD_READY_TIMEOUT,
-  },
-  calendar: { load: () => import("../panels/calendar/ha-panel-calendar") },
-  config: { load: () => import("../panels/config/ha-panel-config") },
-  custom: { load: () => import("../panels/custom/ha-panel-custom") },
-  lovelace: {
-    load: () => import("../panels/lovelace/ha-panel-lovelace"),
-    waitForReady: true,
-    readyTimeout: DASHBOARD_READY_TIMEOUT,
-  },
-  history: { load: () => import("../panels/history/ha-panel-history") },
-  iframe: { load: () => import("../panels/iframe/ha-panel-iframe") },
-  logbook: { load: () => import("../panels/logbook/ha-panel-logbook") },
-  map: { load: () => import("../panels/map/ha-panel-map") },
-  my: { load: () => import("../panels/my/ha-panel-my") },
-  profile: { load: () => import("../panels/profile/ha-panel-profile") },
-  todo: { load: () => import("../panels/todo/ha-panel-todo") },
-  "media-browser": {
-    load: () => import("../panels/media-browser/ha-panel-media-browser"),
-  },
-  light: {
-    load: () => import("../panels/light/ha-panel-light"),
-    waitForReady: true,
-    readyTimeout: DASHBOARD_READY_TIMEOUT,
-  },
-  security: {
-    load: () => import("../panels/security/ha-panel-security"),
-    waitForReady: true,
-    readyTimeout: DASHBOARD_READY_TIMEOUT,
-  },
-  climate: {
-    load: () => import("../panels/climate/ha-panel-climate"),
-    waitForReady: true,
-    readyTimeout: DASHBOARD_READY_TIMEOUT,
-  },
-  maintenance: {
-    load: () => import("../panels/maintenance/ha-panel-maintenance"),
-    waitForReady: true,
-    readyTimeout: DASHBOARD_READY_TIMEOUT,
-  },
-  home: {
-    load: () => import("../panels/home/ha-panel-home"),
-    waitForReady: true,
-    readyTimeout: DASHBOARD_READY_TIMEOUT,
-  },
-  notfound: { load: () => import("../panels/notfound/ha-panel-notfound") },
-} satisfies Record<
-  string,
-  Pick<RouteOptions, "load" | "waitForReady"> & { readyTimeout?: number }
->;
+  app: () => import("../panels/app/ha-panel-app"),
+  energy: () => import("../panels/energy/ha-panel-energy"),
+  calendar: () => import("../panels/calendar/ha-panel-calendar"),
+  config: () => import("../panels/config/ha-panel-config"),
+  custom: () => import("../panels/custom/ha-panel-custom"),
+  lovelace: () => import("../panels/lovelace/ha-panel-lovelace"),
+  history: () => import("../panels/history/ha-panel-history"),
+  iframe: () => import("../panels/iframe/ha-panel-iframe"),
+  logbook: () => import("../panels/logbook/ha-panel-logbook"),
+  map: () => import("../panels/map/ha-panel-map"),
+  my: () => import("../panels/my/ha-panel-my"),
+  profile: () => import("../panels/profile/ha-panel-profile"),
+  todo: () => import("../panels/todo/ha-panel-todo"),
+  "media-browser": () =>
+    import("../panels/media-browser/ha-panel-media-browser"),
+  light: () => import("../panels/light/ha-panel-light"),
+  security: () => import("../panels/security/ha-panel-security"),
+  climate: () => import("../panels/climate/ha-panel-climate"),
+  maintenance: () => import("../panels/maintenance/ha-panel-maintenance"),
+  home: () => import("../panels/home/ha-panel-home"),
+  notfound: () => import("../panels/notfound/ha-panel-notfound"),
+};
 
 @customElement("partial-panel-resolver")
 class PartialPanelResolver extends HassRouterPage {
@@ -159,12 +124,13 @@ class PartialPanelResolver extends HassRouterPage {
   private _getRoutes(panels: Panels): RouterOptions {
     const routes: RouterOptions["routes"] = {};
     Object.values(panels).forEach((panel) => {
-      const component = COMPONENTS[panel.component_name];
       const data: RouteOptions = {
         tag: `ha-panel-${panel.component_name}`,
         cache: CACHE_URL_PATHS.includes(panel.url_path),
-        ...component,
       };
+      if (panel.component_name in COMPONENTS) {
+        data.load = COMPONENTS[panel.component_name];
+      }
       routes[panel.url_path] = data;
     });
 
@@ -253,15 +219,9 @@ class PartialPanelResolver extends HassRouterPage {
       )
     ) {
       await this.rebuild();
-      const component =
-        COMPONENTS[this.hass.panels[this._currentPage].component_name];
-      await promiseTimeout(
-        component?.readyTimeout ?? PANEL_READY_TIMEOUT,
-        this.pageRendered
-      ).catch(() => undefined);
+      await this.pageRendered;
       // Only fire frontend/loaded when this call actually removed the launch
-      // screen, so later panel updates do not fire it again. Native apps remove
-      // it instantly because their own splash screen is still visible.
+      // screen, so later panel updates do not fire it again.
       if (
         removeLaunchScreen(!!this.hass.auth.external?.config.hasSplashscreen)
       ) {

src/panels/climate/ha-panel-climate.ts

@@ -4,7 +4,6 @@ import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
-import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -32,8 +31,6 @@ class PanelClimate extends LitElement {
 
   @state() private _searchParams = new URLSearchParams(window.location.search);
 
-  private _childPanelReady?: ChildPanelReady;
-
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -130,7 +127,6 @@ class PanelClimate extends LitElement {
       return;
     }
 
-    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

src/panels/config/automation/action/types/ha-automation-action-device_id.ts

@@ -13,16 +13,11 @@ import type {
   DeviceCapabilities,
 } from "../../../../../data/device/device_automation";
 import {
-  deviceAutomationEditorMode,
   deviceAutomationsEqual,
   fetchDeviceActionCapabilities,
   localizeExtraFieldsComputeHelperCallback,
   localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";
 
@@ -38,10 +33,6 @@ export class HaDeviceAction extends LitElement {
 
   @state() private _capabilities?: DeviceCapabilities;
 
-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg: EntityRegistryEntry[] = [];
@@ -68,19 +59,14 @@ export class HaDeviceAction extends LitElement {
     }
   );
 
-  public shouldUpdate(_changedProperties: PropertyValues<this>) {
-    const mode = deviceAutomationEditorMode(
-      this.hass,
-      this.action.device_id,
-      this._compositeSplits
-    );
-    if (mode === "loading") {
-      // The device is missing; wait for the composite split map before deciding
-      // whether it is a replaced device (editable) or genuinely unknown (YAML).
-      this._loadCompositeSplits();
-      return false;
+  public shouldUpdate(changedProperties: PropertyValues<this>) {
+    if (!changedProperties.has("action")) {
+      return true;
     }
-    if (mode === "unknown-device") {
+    if (
+      this.action.device_id &&
+      !(this.action.device_id in this.hass.devices)
+    ) {
       fireEvent(
         this,
         "ui-mode-not-available",
@@ -95,20 +81,6 @@ export class HaDeviceAction extends LitElement {
     return true;
   }
 
-  private async _loadCompositeSplits() {
-    if (this._loadingCompositeSplits) {
-      return;
-    }
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
   protected render() {
     const deviceId = this._deviceId || this.action.device_id;
 

src/panels/config/automation/add-automation-element-dialog.ts

@@ -183,7 +183,12 @@ const ENTITY_DOMAINS_OTHER = new Set([
 
 const ENTITY_DOMAINS_MAIN = new Set(["notify"]);
 
-const DYNAMIC_KEYWORDS = ["dynamicGroups", "helpers", "integrationGroups"];
+const DYNAMIC_KEYWORDS = [
+  "dynamicGroups",
+  "helpers",
+  "other",
+  "customDynamicGroups",
+];
 
 const DYNAMIC_TO_GENERIC = new Set([`${DYNAMIC_PREFIX}event`]);
 
@@ -192,13 +197,7 @@ const DYNAMIC_TO_GENERIC = new Set([`${DYNAMIC_PREFIX}event`]);
 // drills into its items, like selecting the matching group in the "by type" tab.
 const TIME_LOCATION_GROUPS = ["time", "sun"];
 
-type CollectionGroupType = "helper" | "dynamic" | "integration";
-
-interface DomainClassificationOptions {
-  type: AddAutomationElementDialogParams["type"];
-  usedDomains?: Set<string>;
-  activeSystemDomains?: Set<string>;
-}
+type CollectionGroupType = "helper" | "other" | "dynamic" | "customDynamic";
 
 @customElement("add-automation-element-dialog")
 class DialogAddAutomationElement
@@ -502,9 +501,7 @@ class DialogAddAutomationElement
   );
 
   private get _systemDomains() {
-    // System domains are derived from trigger/condition descriptions, so
-    // they don't apply to actions.
-    if (!this._manifests || this._params?.type === "action") {
+    if (!this._manifests) {
       return undefined;
     }
     const descriptions =
@@ -1032,6 +1029,7 @@ class DialogAddAutomationElement
                 this._params!.type,
                 this._selectedGroup,
                 this._selectedCollectionIndex ?? 0,
+                this._domains,
                 this.hass.localize,
                 this.hass.services,
                 this._manifests,
@@ -1125,13 +1123,6 @@ class DialogAddAutomationElement
 
       const exclusiveDomains = this._getExclusiveDomains(type);
 
-      const domainList =
-        type === "trigger"
-          ? Object.keys(triggerDescriptions ?? {}).map(getTriggerDomain)
-          : type === "condition"
-            ? Object.keys(conditionDescriptions ?? {}).map(getConditionDomain)
-            : Object.keys(services ?? {});
-
       collections.forEach((collection, index) => {
         let collectionGroups = Object.entries(collection.groups);
         const groups: AddAutomationElementListItem[] = [];
@@ -1143,23 +1134,70 @@ class DialogAddAutomationElement
         if (collection.groups.helpers) {
           types.push("helper");
         }
-        if (collection.groups.integrationGroups) {
-          types.push("integration");
+        if (collection.groups.other) {
+          types.push("other");
+        }
+        if (collection.groups.customDynamicGroups) {
+          types.push("customDynamic");
         }
 
-        if (types.length) {
+        if (
+          type === "trigger" &&
+          Object.keys(collection.groups).some((item) =>
+            DYNAMIC_KEYWORDS.includes(item)
+          )
+        ) {
           groups.push(
-            ...this._dynamicDomainGroups(
+            ...this._triggerGroups(
               localize,
-              domainList,
+              triggerDescriptions,
               manifests,
+              domains,
               types,
-              {
-                type,
-                usedDomains: domains,
-                activeSystemDomains: this._systemDomains?.active,
-                exclusiveDomains,
-              }
+              exclusiveDomains
+            )
+          );
+
+          collectionGroups = collectionGroups.filter(
+            ([key]) => !DYNAMIC_KEYWORDS.includes(key)
+          );
+        } else if (
+          type === "condition" &&
+          Object.keys(collection.groups).some((item) =>
+            DYNAMIC_KEYWORDS.includes(item)
+          )
+        ) {
+          groups.push(
+            ...this._conditionGroups(
+              localize,
+              conditionDescriptions,
+              manifests,
+              domains,
+              types,
+              exclusiveDomains
+            )
+          );
+
+          collectionGroups = collectionGroups.filter(
+            ([key]) => !DYNAMIC_KEYWORDS.includes(key)
+          );
+        } else if (
+          type === "action" &&
+          Object.keys(collection.groups).some((item) =>
+            DYNAMIC_KEYWORDS.includes(item)
+          )
+        ) {
+          groups.push(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              collection.groups.dynamicGroups
+                ? undefined
+                : collection.groups.helpers
+                  ? "helper"
+                  : "other"
             )
           );
 
@@ -1251,6 +1289,7 @@ class DialogAddAutomationElement
       type: AddAutomationElementDialogParams["type"],
       group: string,
       collectionIndex: number,
+      domains: Set<string> | undefined,
       localize: LocalizeFunc,
       services: HomeAssistant["services"],
       manifests?: DomainManifestLookup,
@@ -1300,69 +1339,144 @@ class DialogAddAutomationElement
         }
       }
 
+      if (type === "action") {
+        if (!this._selectedGroup) {
+          result.unshift(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              undefined
+            )
+          );
+        } else if (this._selectedGroup === "helpers") {
+          result.unshift(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              "helper"
+            )
+          );
+        } else if (this._selectedGroup === "other") {
+          result.unshift(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              "other"
+            )
+          );
+        }
+      }
+
       return result.sort((a, b) =>
         stringCompare(a.name, b.name, this.hass.locale.language)
       );
     }
   );
 
-  private _classifyDomain(
+  private _serviceGroups = (
+    localize: LocalizeFunc,
+    services: HomeAssistant["services"],
+    manifests: DomainManifestLookup | undefined,
+    domains: Set<string> | undefined,
+    type: "helper" | "other" | undefined
+  ): AddAutomationElementListItem[] => {
+    if (!services || !manifests) {
+      return [];
+    }
+    const result: AddAutomationElementListItem[] = [];
+    Object.keys(services).forEach((domain) => {
+      const manifest = manifests[domain];
+      const domainUsed = !domains ? true : domains.has(domain);
+      if (
+        (type === undefined &&
+          (ENTITY_DOMAINS_MAIN.has(domain) ||
+            (manifest?.integration_type === "entity" &&
+              domainUsed &&
+              !ENTITY_DOMAINS_OTHER.has(domain)))) ||
+        (type === "helper" && manifest?.integration_type === "helper") ||
+        (type === "other" &&
+          !ENTITY_DOMAINS_MAIN.has(domain) &&
+          (ENTITY_DOMAINS_OTHER.has(domain) ||
+            (!domainUsed && manifest?.integration_type === "entity") ||
+            !["helper", "entity"].includes(manifest?.integration_type || "")))
+      ) {
+        result.push({
+          icon: html`
+            <ha-domain-icon .domain=${domain} brand-fallback></ha-domain-icon>
+          `,
+          key: `${DYNAMIC_PREFIX}${domain}`,
+          name: domainToName(localize, domain, manifest),
+          description: "",
+        });
+      }
+    });
+    return result.sort((a, b) =>
+      stringCompare(a.name, b.name, this.hass.locale.language)
+    );
+  };
+
+  private _domainMatchesGroupType(
     domain: string,
     manifest: DomainManifestLookup[string] | undefined,
-    options: DomainClassificationOptions
-  ): CollectionGroupType | undefined {
-    const integrationType = manifest?.integration_type;
+    domainUsed: boolean,
+    types: CollectionGroupType[]
+  ): boolean {
+    const matchDynamic =
+      ((types.includes("dynamic") && (!manifest || manifest.is_built_in)) ||
+        (types.includes("customDynamic") &&
+          !(manifest?.is_built_in ?? true))) &&
+      (ENTITY_DOMAINS_MAIN.has(domain) ||
+        (manifest?.integration_type === "entity" &&
+          !ENTITY_DOMAINS_OTHER.has(domain) &&
+          (domainUsed || (this._systemDomains?.active.has(domain) ?? false))) ||
+        (manifest?.integration_type === "system" &&
+          (this._systemDomains?.active.has(domain) ?? false)));
 
-    if (integrationType === "helper") {
-      return "helper";
-    }
+    const matchHelper =
+      types.includes("helper") && manifest?.integration_type === "helper";
 
-    if (ENTITY_DOMAINS_MAIN.has(domain) || integrationType === "entity") {
-      // Core entity domains. Actions always list them; triggers/conditions
-      // only when matching entities exist or a system domain covers them.
-      if (
-        options.type === "action" ||
-        !options.usedDomains ||
-        options.usedDomains.has(domain) ||
-        ENTITY_DOMAINS_OTHER.has(domain) ||
-        (options.activeSystemDomains?.has(domain) ?? false)
-      ) {
-        return "dynamic";
-      }
-      return undefined;
-    }
+    const matchOther =
+      types.includes("other") &&
+      !ENTITY_DOMAINS_MAIN.has(domain) &&
+      (ENTITY_DOMAINS_OTHER.has(domain) ||
+        !["helper", "entity", "system"].includes(
+          manifest?.integration_type || ""
+        ));
 
-    if (integrationType === "system" && options.type !== "action") {
-      return options.activeSystemDomains?.has(domain) ? "dynamic" : undefined;
-    }
-
-    // Integrations that bring their own elements, built-in (like Apple TV,
-    // FFmpeg) and custom (like HACS) alike.
-    return "integration";
+    return matchDynamic || matchHelper || matchOther;
   }
 
-  private _dynamicDomainGroups = (
+  private _triggerGroups = (
     localize: LocalizeFunc,
-    domains: string[],
+    triggers: TriggerDescriptions,
     manifests: DomainManifestLookup | undefined,
+    domains: Set<string> | undefined,
     types: CollectionGroupType[],
-    options: DomainClassificationOptions & { exclusiveDomains?: Set<string> }
+    exclusiveDomains: Set<string>
   ): AddAutomationElementListItem[] => {
-    if (!manifests) {
+    if (!triggers || !manifests) {
       return [];
     }
     const result: AddAutomationElementListItem[] = [];
     const addedDomains = new Set<string>();
-    domains.forEach((domain) => {
-      if (addedDomains.has(domain) || options.exclusiveDomains?.has(domain)) {
+    Object.keys(triggers).forEach((trigger) => {
+      const domain = getTriggerDomain(trigger);
+
+      if (addedDomains.has(domain) || exclusiveDomains.has(domain)) {
         return;
       }
       addedDomains.add(domain);
 
       const manifest = manifests[domain];
-      const groupType = this._classifyDomain(domain, manifest, options);
+      const domainUsed = !domains ? true : domains.has(domain);
 
-      if (groupType && types.includes(groupType)) {
+      if (this._domainMatchesGroupType(domain, manifest, domainUsed, types)) {
         result.push({
           icon: html`
             <ha-domain-icon .domain=${domain} brand-fallback></ha-domain-icon>
@@ -1411,6 +1525,46 @@ class DialogAddAutomationElement
     }
   );
 
+  private _conditionGroups = (
+    localize: LocalizeFunc,
+    conditions: ConditionDescriptions,
+    manifests: DomainManifestLookup | undefined,
+    domains: Set<string> | undefined,
+    types: CollectionGroupType[],
+    exclusiveDomains: Set<string>
+  ): AddAutomationElementListItem[] => {
+    if (!conditions || !manifests) {
+      return [];
+    }
+    const result: AddAutomationElementListItem[] = [];
+    const addedDomains = new Set<string>();
+    Object.keys(conditions).forEach((condition) => {
+      const domain = getConditionDomain(condition);
+
+      if (addedDomains.has(domain) || exclusiveDomains.has(domain)) {
+        return;
+      }
+      addedDomains.add(domain);
+
+      const manifest = manifests[domain];
+      const domainUsed = !domains ? true : domains.has(domain);
+
+      if (this._domainMatchesGroupType(domain, manifest, domainUsed, types)) {
+        result.push({
+          icon: html`
+            <ha-domain-icon .domain=${domain} brand-fallback></ha-domain-icon>
+          `,
+          key: `${DYNAMIC_PREFIX}${domain}`,
+          name: domainToName(localize, domain, manifest),
+          description: "",
+        });
+      }
+    });
+    return result.sort((a, b) =>
+      stringCompare(a.name, b.name, this.hass.locale.language)
+    );
+  };
+
   private _conditions = memoizeOne(
     (
       localize: LocalizeFunc,
@@ -1511,13 +1665,26 @@ class DialogAddAutomationElement
         );
       }
 
-      if (group) {
+      if (group && !["helpers", "other"].includes(group)) {
         return [];
       }
 
       Object.keys(services)
         .sort()
-        .forEach((dmn) => addDomain(dmn));
+        .forEach((dmn) => {
+          const manifest = manifests?.[dmn];
+          if (group === "helpers" && manifest?.integration_type !== "helper") {
+            return;
+          }
+          if (
+            group === "other" &&
+            (ENTITY_DOMAINS_OTHER.has(dmn) ||
+              ["helper", "entity"].includes(manifest?.integration_type || ""))
+          ) {
+            return;
+          }
+          addDomain(dmn);
+        });
 
       return result;
     }
@@ -1528,20 +1695,25 @@ class DialogAddAutomationElement
   );
 
   private _getDomainType(domain: string) {
-    const groupType = this._classifyDomain(domain, this._manifests?.[domain], {
-      type: this._params!.type,
-      usedDomains: this._domains,
-      activeSystemDomains: this._systemDomains?.active,
-    });
-    if (groupType === "helper") {
+    if (
+      ENTITY_DOMAINS_MAIN.has(domain) ||
+      (this._manifests?.[domain]?.integration_type === "entity" &&
+        !ENTITY_DOMAINS_OTHER.has(domain) &&
+        (this._domains?.has(domain) ||
+          (this._systemDomains?.active.has(domain) ?? false)))
+    ) {
+      return "dynamicGroups";
+    }
+    if (this._manifests?.[domain]?.integration_type === "helper") {
       return "helpers";
     }
-    if (groupType === "integration") {
-      return "integrationGroups";
+    if (
+      this._manifests?.[domain]?.integration_type === "system" &&
+      this._systemDomains?.active.has(domain)
+    ) {
+      return "dynamicGroups";
     }
-    // "dynamic", plus domains hidden in the by-type list (like unused entity
-    // domains) that can still surface when browsing by target.
-    return "dynamicGroups";
+    return "other";
   }
 
   private _sortDomainsByCollection(

src/panels/config/automation/condition/types/ha-automation-condition-device.ts

@@ -13,16 +13,11 @@ import type {
   DeviceCondition,
 } from "../../../../../data/device/device_automation";
 import {
-  deviceAutomationEditorMode,
   deviceAutomationsEqual,
   fetchDeviceConditionCapabilities,
   localizeExtraFieldsComputeHelperCallback,
   localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";
 
@@ -38,10 +33,6 @@ export class HaDeviceCondition extends LitElement {
 
   @state() private _capabilities?: DeviceCapabilities;
 
-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg: EntityRegistryEntry[] = [];
@@ -69,19 +60,14 @@ export class HaDeviceCondition extends LitElement {
     }
   );
 
-  public shouldUpdate(_changedProperties: PropertyValues<this>) {
-    const mode = deviceAutomationEditorMode(
-      this.hass,
-      this.condition.device_id,
-      this._compositeSplits
-    );
-    if (mode === "loading") {
-      // The device is missing; wait for the composite split map before deciding
-      // whether it is a replaced device (editable) or genuinely unknown (YAML).
-      this._loadCompositeSplits();
-      return false;
+  public shouldUpdate(changedProperties: PropertyValues<this>) {
+    if (!changedProperties.has("condition")) {
+      return true;
     }
-    if (mode === "unknown-device") {
+    if (
+      this.condition.device_id &&
+      !(this.condition.device_id in this.hass.devices)
+    ) {
       fireEvent(
         this,
         "ui-mode-not-available",
@@ -96,20 +82,6 @@ export class HaDeviceCondition extends LitElement {
     return true;
   }
 
-  private async _loadCompositeSplits() {
-    if (this._loadingCompositeSplits) {
-      return;
-    }
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
   protected render() {
     const deviceId = this._deviceId || this.condition.device_id;
 

src/panels/config/automation/target/ha-automation-row-targets.ts

@@ -33,16 +33,11 @@ import type { ConfigEntry } from "../../../../data/config_entries";
 import {
   apiContext,
   configEntriesContext,
-  connectionContext,
   internationalizationContext,
   labelsContext,
   registriesContext,
   statesContext,
 } from "../../../../data/context";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../../../../data/device/device_registry";
 import type { LabelRegistryEntry } from "../../../../data/label/label_registry";
 import {
   deviceMeetsTargetSelector,
@@ -94,16 +89,9 @@ export class HaAutomationRowTargets extends LitElement {
   @consume({ context: apiContext, subscribe: true })
   private _api!: ContextType<typeof apiContext>;
 
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection!: ContextType<typeof connectionContext>;
-
   @consume({ context: statesContext, subscribe: true })
   private _states!: ContextType<typeof statesContext>;
 
-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
   private _countCache = new Map<
     string,
     Promise<number | undefined> | number | undefined
@@ -120,43 +108,6 @@ export class HaAutomationRowTargets extends LitElement {
     ) {
       this._rerenderCount = true;
     }
-
-    if (
-      (changedProps.has("target") || changedProps.has("_registries")) &&
-      this._compositeSplits === undefined &&
-      !this._loadingCompositeSplits &&
-      this._hasMissingDevice()
-    ) {
-      // A referenced device is missing from the registry; it might be a legacy
-      // composite device that was split. Fetch the split map so we can flag it.
-      this._loadCompositeSplits();
-    }
-  }
-
-  private _hasMissingDevice(): boolean {
-    const deviceIds = this.target?.device_id
-      ? ensureArray(this.target.device_id)
-      : [];
-    return deviceIds.some(
-      (id) => !isTemplate(id) && !this._registries?.devices?.[id]
-    );
-  }
-
-  private async _loadCompositeSplits() {
-    if (!this._api || !this._connection) {
-      return;
-    }
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits({
-        connection: this._connection.connection,
-        callWS: this._api.callWS,
-      });
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -391,8 +342,7 @@ export class HaAutomationRowTargets extends LitElement {
     error = false,
     targetId?: string,
     targetType?: string,
-    countTemplate: unknown = nothing,
-    title?: string
+    countTemplate: unknown = nothing
   ) {
     if (!this.interactive || !targetId || !targetType) {
       return html`<div
@@ -401,7 +351,6 @@ export class HaAutomationRowTargets extends LitElement {
           warning,
           error,
         })}
-        title=${title ?? nothing}
         .targetId=${targetId}
         .targetType=${targetType}
         .label=${label}
@@ -417,7 +366,6 @@ export class HaAutomationRowTargets extends LitElement {
         warning,
         error,
       })}
-      title=${title ?? nothing}
       .targetId=${targetId}
       .targetType=${targetType}
       .label=${label}
@@ -437,7 +385,6 @@ export class HaAutomationRowTargets extends LitElement {
     let icon: string | undefined;
     let label: string;
     let warning = false;
-    let title: string | undefined;
     let badgeTargetId: string | undefined = targetId;
     let badgeTargetType: string | undefined = targetType;
     let countTemplate: unknown = nothing;
@@ -461,28 +408,17 @@ export class HaAutomationRowTargets extends LitElement {
       const exists = this._checkTargetExists(targetType, targetId);
       if (!exists) {
         icon = mdiAlert;
+        label = getTargetText(
+          this._registries,
+          this._states,
+          this._i18n.localize,
+          targetType,
+          targetId,
+          this._getLabel
+        );
         warning = true;
         badgeTargetId = undefined;
         badgeTargetType = undefined;
-        if (targetType === "device" && this._compositeSplits?.[targetId]) {
-          // The device was replaced by one or more split devices; make clear
-          // this reference needs to be updated, distinct from "unknown device".
-          label = this._i18n.localize(
-            "ui.panel.config.automation.editor.target_summary.device_replaced"
-          );
-          title = this._i18n.localize(
-            "ui.panel.config.automation.editor.target_summary.device_replaced_description"
-          );
-        } else {
-          label = getTargetText(
-            this._registries,
-            this._states,
-            this._i18n.localize,
-            targetType,
-            targetId,
-            this._getLabel
-          );
-        }
       } else {
         label = getTargetText(
           this._registries,
@@ -520,7 +456,6 @@ export class HaAutomationRowTargets extends LitElement {
           targetType: badgeTargetType,
           label,
         }}
-        title=${title ?? nothing}
         class=${classMap({
           warning,
         })}
@@ -535,8 +470,7 @@ export class HaAutomationRowTargets extends LitElement {
       false,
       badgeTargetId,
       badgeTargetType,
-      countTemplate,
-      title
+      countTemplate
     );
   }
 

src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts

@@ -15,16 +15,11 @@ import type {
   DeviceTrigger,
 } from "../../../../../data/device/device_automation";
 import {
-  deviceAutomationEditorMode,
   deviceAutomationsEqual,
   fetchDeviceTriggerCapabilities,
   localizeExtraFieldsComputeHelperCallback,
   localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
-import {
-  fetchDeviceCompositeSplits,
-  type DeviceCompositeSplits,
-} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";
 
@@ -40,10 +35,6 @@ export class HaDeviceTrigger extends LitElement {
 
   @state() private _capabilities?: DeviceCapabilities;
 
-  @state() private _compositeSplits?: DeviceCompositeSplits;
-
-  private _loadingCompositeSplits = false;
-
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg: EntityRegistryEntry[] = [];
@@ -73,19 +64,14 @@ export class HaDeviceTrigger extends LitElement {
     }
   );
 
-  public shouldUpdate(_changedProperties: PropertyValues<this>) {
-    const mode = deviceAutomationEditorMode(
-      this.hass,
-      this.trigger.device_id,
-      this._compositeSplits
-    );
-    if (mode === "loading") {
-      // The device is missing; wait for the composite split map before deciding
-      // whether it is a replaced device (editable) or genuinely unknown (YAML).
-      this._loadCompositeSplits();
-      return false;
+  public shouldUpdate(changedProperties: PropertyValues<this>) {
+    if (!changedProperties.has("trigger")) {
+      return true;
     }
-    if (mode === "unknown-device") {
+    if (
+      this.trigger.device_id &&
+      !(this.trigger.device_id in this.hass.devices)
+    ) {
       fireEvent(
         this,
         "ui-mode-not-available",
@@ -100,20 +86,6 @@ export class HaDeviceTrigger extends LitElement {
     return true;
   }
 
-  private async _loadCompositeSplits() {
-    if (this._loadingCompositeSplits) {
-      return;
-    }
-    this._loadingCompositeSplits = true;
-    try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-    } catch (_err) {
-      this._compositeSplits = {};
-    } finally {
-      this._loadingCompositeSplits = false;
-    }
-  }
-
   protected render() {
     const deviceId = this._deviceId || this.trigger.device_id;
 

src/panels/config/config-sections.ts

@@ -22,7 +22,6 @@ import {
   mdiPuzzle,
   mdiRadioTower,
   mdiRemote,
-  mdiRenameOutline,
   mdiRobot,
   mdiScrewdriver,
   mdiScriptText,
@@ -495,14 +494,6 @@ export const configSections: Record<string, PageNavigation[]> = {
       component: "backup",
       adminOnly: true,
     },
-    {
-      path: "/config/entity-id-format",
-      translationKey: "entity_id_format",
-      iconPath: mdiRenameOutline,
-      iconColor: "#24a5cb",
-      core: true,
-      adminOnly: true,
-    },
     {
       path: "/config/analytics",
       translationKey: "analytics",

src/panels/config/core/ha-config-entity-id-format.ts

@@ -1,215 +0,0 @@
-import { consume, type ContextType } from "@lit/context";
-import { mdiRestore } from "@mdi/js";
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
-import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
-import { computeEntityIdFormatExample } from "../../../common/entity/compute_entity_id_format_example";
-import type { LocalizeFunc } from "../../../common/translations/localize";
-import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
-import "../../../components/buttons/ha-progress-button";
-import "../../../components/ha-alert";
-import "../../../components/ha-button";
-import "../../../components/ha-card";
-import "../../../components/ha-svg-icon";
-import { apiContext, configContext } from "../../../data/context";
-import {
-  fetchEntityRegistrySettings,
-  updateEntityRegistrySettings,
-} from "../../../data/entity/entity_registry_settings";
-import {
-  DEFAULT_ENTITY_ID_FORMAT,
-  isDefaultEntityIdFormat,
-  type EntityIdFormat,
-  type EntityIdPart,
-} from "../../../data/entity_id_format";
-import { haStyle } from "../../../resources/styles";
-import { documentationUrl } from "../../../util/documentation-url";
-import "./ha-entity-id-format-editor";
-
-const EXAMPLE_DOMAIN = "sensor";
-
-@customElement("ha-config-entity-id-format")
-export class HaConfigEntityIdFormat extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @state()
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: ContextType<typeof configContext>;
-
-  @state() private _format?: EntityIdFormat;
-
-  @state() private _error?: string;
-
-  protected async firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    try {
-      const settings = await fetchEntityRegistrySettings(this._api);
-      this._format = settings.entity_id_parts ?? DEFAULT_ENTITY_ID_FORMAT;
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  private _examples: Record<EntityIdPart, string> = {
-    area: "Living room",
-    device: "Thermostat",
-    entity: "Temperature",
-    floor: "Ground floor",
-  };
-
-  protected render() {
-    return html`
-      <ha-card
-        outlined
-        .header=${this._localize(
-          "ui.panel.config.entity_id_format.card.header"
-        )}
-      >
-        <div class="card-content">
-          ${
-            this._error
-              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-              : nothing
-          }
-          <p class="description">
-            ${this._localize(
-              "ui.panel.config.entity_id_format.card.description"
-            )}
-            <a
-              href=${documentationUrl(
-                this._config,
-                "/docs/configuration/customizing-devices/"
-              )}
-              target="_blank"
-              rel="noreferrer"
-              >${this._localize(
-                "ui.panel.config.entity_id_format.card.learn_more"
-              )}</a
-            >
-          </p>
-          ${
-            this._format
-              ? html`
-                  <ha-entity-id-format-editor
-                    .value=${this._format}
-                    .label=${this._localize(
-                      "ui.panel.config.entity_id_format.card.editor.label"
-                    )}
-                    @value-changed=${this._formatChanged}
-                  ></ha-entity-id-format-editor>
-                  ${this._renderPreview()}
-                `
-              : nothing
-          }
-        </div>
-        <div class="card-actions">
-          <ha-button
-            appearance="plain"
-            @click=${this._reset}
-            .disabled=${!this._format || isDefaultEntityIdFormat(this._format)}
-          >
-            <ha-svg-icon slot="start" .path=${mdiRestore}></ha-svg-icon>
-            ${this._localize("ui.panel.config.entity_id_format.card.reset")}
-          </ha-button>
-          <ha-progress-button
-            appearance="filled"
-            @click=${this._save}
-            .disabled=${!this._format}
-          >
-            ${this._localize("ui.common.save")}
-          </ha-progress-button>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _renderPreview() {
-    const example = computeEntityIdFormatExample(this._format!, this._examples);
-    return html`
-      <div class="preview">
-        <span class="preview-label">
-          ${this._localize("ui.panel.config.entity_id_format.card.preview")}
-        </span>
-        <code>${EXAMPLE_DOMAIN}.${example}</code>
-      </div>
-    `;
-  }
-
-  private _formatChanged(ev: CustomEvent) {
-    this._format = ev.detail.value;
-  }
-
-  private _reset() {
-    this._format = [...DEFAULT_ENTITY_ID_FORMAT];
-  }
-
-  private async _save(ev: Event) {
-    const button = ev.currentTarget as HaProgressButton;
-    if (button.progress) {
-      return;
-    }
-    button.progress = true;
-    this._error = undefined;
-    try {
-      const format = this._format!;
-      const settings = await updateEntityRegistrySettings(this._api, {
-        entity_id_parts: isDefaultEntityIdFormat(format) ? null : format,
-      });
-      this._format = settings.entity_id_parts ?? DEFAULT_ENTITY_ID_FORMAT;
-      button.actionSuccess();
-    } catch (err: any) {
-      button.actionError();
-      this._error = err.message;
-    } finally {
-      button.progress = false;
-    }
-  }
-
-  static styles = [
-    haStyle,
-    css`
-      :host {
-        display: block;
-      }
-      .description {
-        margin-top: 0;
-        color: var(--secondary-text-color);
-      }
-      .preview {
-        display: flex;
-        flex-direction: column;
-        gap: var(--ha-space-1);
-        margin-top: var(--ha-space-5);
-      }
-      .preview-label {
-        font-weight: 500;
-      }
-      .preview code {
-        display: block;
-        padding: var(--ha-space-3);
-        border-radius: var(--ha-border-radius-md);
-        background-color: var(--secondary-background-color);
-        font-family: var(--ha-font-family-code);
-        overflow-wrap: anywhere;
-      }
-      .card-actions {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-entity-id-format": HaConfigEntityIdFormat;
-  }
-}

src/panels/config/core/ha-config-section-entity-id-format.ts

@@ -1,51 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../layouts/hass-subpage";
-import type { HomeAssistant } from "../../../types";
-import "./ha-config-entity-id-format";
-
-@customElement("ha-config-section-entity-id-format")
-export class HaConfigSectionEntityIdFormat extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  protected render() {
-    return html`
-      <hass-subpage
-        back-path="/config/system"
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .header=${this.hass.localize(
-          "ui.panel.config.entity_id_format.caption"
-        )}
-      >
-        <div class="content">
-          <ha-config-entity-id-format></ha-config-entity-id-format>
-        </div>
-      </hass-subpage>
-    `;
-  }
-
-  static styles = css`
-    .content {
-      padding: var(--ha-space-7) var(--ha-space-5) 0;
-      max-width: 1040px;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-5);
-    }
-    ha-config-entity-id-format {
-      max-width: 600px;
-      margin: 0 auto;
-      width: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-section-entity-id-format": HaConfigSectionEntityIdFormat;
-  }
-}

src/panels/config/core/ha-entity-id-format-editor.ts

@@ -1,348 +0,0 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../../common/translations/localize";
-import "../../../components/chips/ha-assist-chip";
-import "../../../components/chips/ha-chip-set";
-import "../../../components/chips/ha-input-chip";
-import "../../../components/ha-combo-box-item";
-import "../../../components/ha-generic-picker";
-import type { HaGenericPicker } from "../../../components/ha-generic-picker";
-import type { PickerComboBoxItem } from "../../../components/ha-picker-combo-box";
-import "../../../components/ha-sortable";
-import "../../../components/ha-svg-icon";
-import type {
-  EntityIdFormat,
-  EntityIdPart,
-} from "../../../data/entity_id_format";
-import type { ValueChangedEvent } from "../../../types";
-
-const STRUCTURAL_TYPES = ["area", "device", "entity", "floor"] as const;
-
-const REQUIRED_TYPES: readonly EntityIdPart[] = ["device", "entity"];
-
-const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
-  <ha-combo-box-item type="button" compact>
-    <span slot="headline">${item.primary}</span>
-  </ha-combo-box-item>
-`;
-
-const encodeType = (type: EntityIdPart) => `___${type}___`;
-
-const decodeType = (value: string): EntityIdPart | undefined => {
-  const type =
-    value.startsWith("___") && value.endsWith("___")
-      ? value.slice(3, -3)
-      : value;
-  return (STRUCTURAL_TYPES as readonly string[]).includes(type)
-    ? (type as EntityIdPart)
-    : undefined;
-};
-
-@customElement("ha-entity-id-format-editor")
-export class HaEntityIdFormatEditor extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @property({ attribute: false }) public value: EntityIdFormat = [];
-
-  @property() public label?: string;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @query("ha-generic-picker") private _picker?: HaGenericPicker;
-
-  @state() private _editIndex?: number;
-
-  protected render() {
-    return html`
-      <div class="container">
-        ${this.label ? html`<label>${this.label}</label>` : nothing}
-        <ha-generic-picker
-          .disabled=${this.disabled}
-          .getItems=${this._getFilteredItems}
-          .rowRenderer=${rowRenderer}
-          .value=${this._getPickerValue()}
-          @value-changed=${this._pickerValueChanged}
-          .searchLabel=${this._localize(
-            "ui.panel.config.entity_id_format.card.editor.search"
-          )}
-        >
-          <div slot="field" class="field">
-            <ha-sortable
-              no-style
-              @item-moved=${this._moveItem}
-              .disabled=${this.disabled}
-              handle-selector="button.primary.action"
-              filter=".add"
-            >
-              <ha-chip-set>
-                ${repeat(
-                  this.value,
-                  (item) => item,
-                  (item: EntityIdPart, idx) => {
-                    const label = this._formatType(item);
-                    if (REQUIRED_TYPES.includes(item)) {
-                      return html`
-                        <ha-assist-chip
-                          filled
-                          class="required"
-                          .label=${label}
-                          .disabled=${this.disabled}
-                        >
-                          <ha-svg-icon
-                            slot="icon"
-                            .path=${mdiDragHorizontalVariant}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                      `;
-                    }
-                    return html`
-                      <ha-input-chip
-                        data-idx=${idx}
-                        @remove=${this._removeItem}
-                        @click=${this._editItem}
-                        .label=${label}
-                        .selected=${!this.disabled}
-                        .disabled=${this.disabled}
-                      >
-                        <ha-svg-icon
-                          slot="icon"
-                          .path=${mdiDragHorizontalVariant}
-                        ></ha-svg-icon>
-                      </ha-input-chip>
-                    `;
-                  }
-                )}
-                ${
-                  this.disabled
-                    ? nothing
-                    : html`
-                        <ha-assist-chip
-                          @click=${this._addItem}
-                          .disabled=${this.disabled}
-                          label=${this._localize(
-                            "ui.panel.config.entity_id_format.card.editor.add"
-                          )}
-                          class="add"
-                        >
-                          <ha-svg-icon
-                            slot="icon"
-                            .path=${mdiPlus}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                      `
-                }
-              </ha-chip-set>
-            </ha-sortable>
-          </div>
-        </ha-generic-picker>
-      </div>
-    `;
-  }
-
-  private async _addItem(ev: Event) {
-    ev.stopPropagation();
-    this._editIndex = undefined;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private async _editItem(ev: Event) {
-    ev.stopPropagation();
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx || "",
-      10
-    );
-    this._editIndex = idx;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private _moveItem(ev: CustomEvent) {
-    ev.stopPropagation();
-    const { oldIndex, newIndex } = ev.detail;
-    const newValue = this.value.concat();
-    const element = newValue.splice(oldIndex, 1)[0];
-    newValue.splice(newIndex, 0, element);
-    this._setValue(newValue);
-  }
-
-  private _removeItem(ev: Event) {
-    ev.stopPropagation();
-    const value = [...this.value];
-    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
-    value.splice(idx, 1);
-    this._setValue(value);
-  }
-
-  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-
-    if (this.disabled || !value) {
-      return;
-    }
-
-    const type = decodeType(value);
-    if (!type) {
-      return;
-    }
-
-    const newValue = [...this.value];
-
-    if (this._editIndex != null) {
-      newValue[this._editIndex] = type;
-      this._editIndex = undefined;
-    } else {
-      newValue.push(type);
-    }
-
-    this._setValue(newValue);
-
-    if (this._picker) {
-      this._picker.value = undefined;
-    }
-  }
-
-  private _setValue(value: EntityIdFormat) {
-    this.value = value;
-    fireEvent(this, "value-changed", { value });
-  }
-
-  private _formatType = (type: EntityIdPart) =>
-    this._localize(`ui.components.entity.entity-name-picker.types.${type}`);
-
-  private _getItems = memoizeOne(
-    (localize: LocalizeFunc): PickerComboBoxItem[] =>
-      STRUCTURAL_TYPES.map((type) => {
-        const primary = localize(
-          `ui.components.entity.entity-name-picker.types.${type}`
-        );
-        const id = encodeType(type);
-        return {
-          id,
-          primary,
-          search_labels: { primary, id },
-          sorting_label: primary,
-        };
-      })
-  );
-
-  private _getPickerValue(): string | undefined {
-    if (this._editIndex != null) {
-      const item = this.value[this._editIndex];
-      return item ? encodeType(item) : undefined;
-    }
-    return undefined;
-  }
-
-  private _getFilteredItems = (): PickerComboBoxItem[] => {
-    const items = this._getItems(this._localize);
-    const currentValue =
-      this._editIndex != null
-        ? encodeType(this.value[this._editIndex])
-        : undefined;
-
-    const usedValues = new Set(this.value.map((item) => encodeType(item)));
-
-    return items.filter(
-      (item) => !usedValues.has(item.id) || item.id === currentValue
-    );
-  };
-
-  static styles = css`
-    :host {
-      position: relative;
-      width: 100%;
-    }
-
-    .container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-2);
-    }
-
-    label {
-      display: block;
-      font-weight: 500;
-    }
-
-    ha-generic-picker {
-      width: 100%;
-    }
-
-    .field {
-      position: relative;
-      background-color: var(--mdc-text-field-fill-color, whitesmoke);
-      border-radius: var(--ha-border-radius-sm);
-      border-end-end-radius: var(--ha-border-radius-square);
-      border-end-start-radius: var(--ha-border-radius-square);
-    }
-    .field:after {
-      display: block;
-      content: "";
-      position: absolute;
-      pointer-events: none;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      width: 100%;
-      background-color: var(
-        --mdc-text-field-idle-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-    :host([disabled]) .field:after {
-      background-color: var(
-        --mdc-text-field-disabled-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-    .field:focus-within:after {
-      height: 2px;
-      background-color: var(--mdc-theme-primary);
-    }
-
-    ha-chip-set {
-      padding: var(--ha-space-3);
-    }
-
-    ha-assist-chip.required {
-      --ha-assist-chip-filled-container-color: rgba(
-        var(--rgb-primary-text-color),
-        0.15
-      );
-    }
-
-    .add {
-      order: 1;
-    }
-
-    .sortable-fallback {
-      display: none;
-      opacity: 0;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
-
-    .sortable-drag {
-      cursor: grabbing;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-entity-id-format-editor": HaEntityIdFormatEditor;
-  }
-}

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -36,7 +36,6 @@ import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
-import { ChildPanelReady } from "../../../layouts/panel-ready";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -158,11 +157,6 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
     total: 0,
   };
 
-  public constructor() {
-    super();
-    new ChildPanelReady(this);
-  }
-
   private _pages = memoizeOne(
     (
       cloudStatus,

src/panels/config/dashboard/ha-config-navigation.ts

@@ -1,5 +1,4 @@
-import { consume } from "@lit/context";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { filterNavigationPages } from "../../../common/config/filter_navigation_pages";
@@ -8,10 +7,6 @@ import "../../../components/ha-icon-next";
 import type { CloudStatus } from "../../../data/cloud";
 import { getConfigEntries } from "../../../data/config_entries";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
-import {
-  childPanelReadyContext,
-  type RegisterChildPanelReady,
-} from "../../../layouts/panel-ready";
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-config-navigation-list";
 
@@ -23,20 +18,21 @@ class HaConfigNavigation extends LitElement {
 
   @property({ attribute: false }) public pages!: PageNavigation[];
 
-  @state() private _visiblePages?: PageNavigation[];
+  @state() private _hasBluetoothConfigEntries = false;
 
-  private _hasBluetoothConfigEntries = false;
-
-  @consume({ context: childPanelReadyContext })
-  private _registerChildPanelReady?: RegisterChildPanelReady;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._registerChildPanelReady?.(this._resolveVisiblePages());
+  protected firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    getConfigEntries(this.hass, {
+      domain: "bluetooth",
+    }).then((bluetoothEntries) => {
+      this._hasBluetoothConfigEntries = bluetoothEntries.length > 0;
+    });
   }
 
   protected render(): TemplateResult {
-    const pages = (this._visiblePages ?? []).map((page) => ({
+    const pages = filterNavigationPages(this.hass, this.pages, {
+      hasBluetoothConfigEntries: this._hasBluetoothConfigEntries,
+    }).map((page) => ({
       ...page,
       name:
         page.name ||
@@ -79,20 +75,6 @@ class HaConfigNavigation extends LitElement {
     `;
   }
 
-  private async _resolveVisiblePages(): Promise<void> {
-    if (this.pages.some((page) => page.component === "bluetooth")) {
-      const entries = await getConfigEntries(this.hass, {
-        domain: "bluetooth",
-      });
-      this._hasBluetoothConfigEntries = entries.length > 0;
-    }
-
-    this._visiblePages = filterNavigationPages(this.hass, this.pages, {
-      hasBluetoothConfigEntries: this._hasBluetoothConfigEntries,
-    });
-    await this.updateComplete;
-  }
-
   static styles: CSSResultGroup = css`
     /* Accessibility */
     .visually-hidden {

src/panels/config/devices/device-detail/ha-device-linked-devices-card.ts

@@ -1,196 +0,0 @@
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
-import { caseInsensitiveStringCompare } from "../../../../common/string/compare";
-import "../../../../components/ha-card";
-import "../../../../components/ha-icon-next";
-import "../../../../components/ha-list-item";
-import type { ConfigEntry } from "../../../../data/config_entries";
-import type { DeviceRegistryEntry } from "../../../../data/device/device_registry";
-import { fetchLinkedDevices } from "../../../../data/device/device_registry";
-import { domainToName } from "../../../../data/integration";
-import type { HomeAssistant } from "../../../../types";
-import { brandsUrl } from "../../../../util/brands-url";
-
-@customElement("ha-device-linked-devices-card")
-export class HaDeviceLinkedDevicesCard extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public deviceId!: string;
-
-  @property({ attribute: false }) public entries!: ConfigEntry[];
-
-  @state() private _linkedDeviceIds: string[] = [];
-
-  private _entryLookup = memoizeOne(
-    (entries: ConfigEntry[]): Record<string, ConfigEntry> => {
-      const lookup: Record<string, ConfigEntry> = {};
-      for (const entry of entries) {
-        lookup[entry.entry_id] = entry;
-      }
-      return lookup;
-    }
-  );
-
-  private _linkedDevices = memoizeOne(
-    (
-      linkedDeviceIds: string[],
-      devices: Record<string, DeviceRegistryEntry>
-    ): DeviceRegistryEntry[] =>
-      linkedDeviceIds
-        .map((id) => devices[id])
-        .filter((device): device is DeviceRegistryEntry => Boolean(device))
-        .sort((d1, d2) =>
-          caseInsensitiveStringCompare(
-            computeDeviceNameDisplay(d1, this.hass.localize, this.hass.states),
-            computeDeviceNameDisplay(d2, this.hass.localize, this.hass.states),
-            this.hass.locale.language
-          )
-        )
-  );
-
-  protected willUpdate(changedProps: PropertyValues<this>) {
-    super.willUpdate(changedProps);
-    if (changedProps.has("deviceId")) {
-      this._fetchLinkedDevices();
-    }
-  }
-
-  protected render() {
-    const linkedDevices = this._linkedDevices(
-      this._linkedDeviceIds,
-      this.hass.devices
-    );
-
-    if (linkedDevices.length === 0) {
-      return nothing;
-    }
-
-    const entryLookup = this._entryLookup(this.entries ?? []);
-
-    return html`
-      <ha-card>
-        <h1 class="card-header">
-          ${this.hass.localize("ui.panel.config.devices.linked_devices.heading")}
-        </h1>
-        <div class="card-content">
-          ${this.hass.localize(
-            "ui.panel.config.devices.linked_devices.description"
-          )}
-        </div>
-        ${linkedDevices.map((linkedDevice) => {
-          const domain = this._deviceDomain(linkedDevice, entryLookup);
-          const integrationName = domain
-            ? domainToName(this.hass.localize, domain)
-            : undefined;
-          return html`
-            <a href=${`/config/devices/device/${linkedDevice.id}`}>
-              <ha-list-item
-                graphic=${domain ? "icon" : nothing}
-                hasMeta
-                .twoline=${!!integrationName}
-              >
-                ${
-                  domain
-                    ? html`<img
-                        slot="graphic"
-                        loading="lazy"
-                        alt=""
-                        src=${brandsUrl(
-                          {
-                            domain,
-                            type: "icon",
-                            darkOptimized: this.hass.themes?.darkMode,
-                          },
-                          this.hass.auth.data.hassUrl
-                        )}
-                        crossorigin="anonymous"
-                        referrerpolicy="no-referrer"
-                      />`
-                    : nothing
-                }
-                ${computeDeviceNameDisplay(
-                  linkedDevice,
-                  this.hass.localize,
-                  this.hass.states
-                )}
-                ${
-                  integrationName
-                    ? html`<span slot="secondary">${integrationName}</span>`
-                    : nothing
-                }
-                <ha-icon-next slot="meta"></ha-icon-next>
-              </ha-list-item>
-            </a>
-          `;
-        })}
-      </ha-card>
-    `;
-  }
-
-  private _deviceDomain(
-    device: DeviceRegistryEntry,
-    entryLookup: Record<string, ConfigEntry>
-  ): string | undefined {
-    const entryId =
-      device.primary_config_entry ?? device.config_entries[0] ?? undefined;
-    const entry = entryId ? entryLookup[entryId] : undefined;
-    return entry?.domain;
-  }
-
-  private async _fetchLinkedDevices() {
-    const deviceId = this.deviceId;
-    if (!deviceId) {
-      this._linkedDeviceIds = [];
-      return;
-    }
-    let linkedDeviceIds: string[];
-    try {
-      linkedDeviceIds = await fetchLinkedDevices(this.hass, deviceId);
-    } catch (_err) {
-      linkedDeviceIds = [];
-    }
-    if (this.deviceId !== deviceId) {
-      // Device changed while fetching, ignore stale result.
-      return;
-    }
-    this._linkedDeviceIds = linkedDeviceIds;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    ha-card {
-      overflow: hidden;
-    }
-
-    .card-header {
-      padding-bottom: 0;
-    }
-
-    .card-content {
-      color: var(--secondary-text-color);
-      padding-bottom: var(--ha-space-2);
-    }
-
-    a {
-      text-decoration: none;
-      color: var(--primary-text-color);
-    }
-
-    ha-list-item img {
-      width: 24px;
-      height: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-device-linked-devices-card": HaDeviceLinkedDevicesCard;
-  }
-}

src/panels/config/devices/ha-config-device-page.ts

@@ -102,7 +102,6 @@ import { fileDownload } from "../../../util/file_download";
 import "../../logbook/ha-logbook";
 import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
-import "./device-detail/ha-device-linked-devices-card";
 import "./device-detail/ha-device-via-devices-card";
 import { showDeviceAddToDialog } from "./device-detail/show-dialog-device-add-to";
 import {
@@ -893,11 +892,6 @@ export class HaConfigDevicePage extends LitElement {
             : ""
         }
       </ha-device-info-card>
-      <ha-device-linked-devices-card
-        .hass=${this.hass}
-        .deviceId=${this.deviceId}
-        .entries=${this.entries}
-      ></ha-device-linked-devices-card>
     `;
 
     const entitiesColumn = html`

src/panels/config/ha-panel-config.ts

@@ -82,14 +82,12 @@ class HaPanelConfig extends HassRouterPage {
       info: {
         tag: "ha-config-info",
         load: () => import("./info/ha-config-info"),
-        waitForReady: true,
       },
       // customize was removed in 2021.12, fallback to dashboard
       customize: "dashboard",
       dashboard: {
         tag: "ha-config-dashboard",
         load: () => import("./dashboard/ha-config-dashboard"),
-        waitForReady: true,
       },
       entities: {
         tag: "ha-config-entities",
@@ -172,10 +170,6 @@ class HaPanelConfig extends HassRouterPage {
         tag: "ha-config-section-ai-tasks",
         load: () => import("./core/ha-config-section-ai-tasks"),
       },
-      "entity-id-format": {
-        tag: "ha-config-section-entity-id-format",
-        load: () => import("./core/ha-config-section-entity-id-format"),
-      },
       zha: {
         tag: "zha-config-dashboard-router",
         load: () =>

src/panels/config/info/ha-config-info.ts

@@ -24,7 +24,6 @@ import { fetchHassioInfo } from "../../../data/hassio/supervisor";
 import { subscribeSystemHealthInfo } from "../../../data/system_health";
 import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";
 import "../../../layouts/hass-subpage";
-import { panelIsReady } from "../../../layouts/panel-ready";
 import { mdiHomeAssistant } from "../../../resources/home-assistant-logo-svg";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
@@ -290,7 +289,6 @@ class HaConfigInfo extends LitElement {
       if (info?.homeassistant) {
         this._installationMethod = info.homeassistant.info.installation_type;
         unsubSystemHealth.then((unsub) => unsub());
-        panelIsReady(this);
       }
     });
   }

src/panels/light/ha-panel-light.ts

@@ -4,7 +4,6 @@ import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
-import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -32,8 +31,6 @@ class PanelLight extends LitElement {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  private _childPanelReady?: ChildPanelReady;
-
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -130,7 +127,6 @@ class PanelLight extends LitElement {
       return;
     }
 
-    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

src/panels/lovelace/card-features/hui-button-card-feature.ts

@@ -11,7 +11,6 @@ import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import { apiContext, servicesContext } from "../../../data/context";
-import { forwardHaptic } from "../../../data/haptics";
 import {
   hasRequiredScriptFieldsForServices,
   requiredScriptFieldsFilledForServices,
@@ -97,8 +96,6 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature {
         : {}),
     };
 
-    forwardHaptic(this, "light");
-
     this._api.callService(domain, service, serviceData);
   }
 

src/panels/lovelace/cards/hui-starting-card.ts

@@ -3,7 +3,6 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/animation/ha-fade-in";
 import "../../../components/ha-card";
 import "../../../components/ha-spinner";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@@ -39,9 +38,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
 
     return html`
       <div class="content">
-        <ha-fade-in .delay=${500}>
-          <ha-spinner></ha-spinner>
-        </ha-fade-in>
+        <ha-spinner></ha-spinner>
         ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
       </div>
     `;

src/panels/lovelace/hui-root.ts

@@ -75,7 +75,6 @@ import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-di
 import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { haStyle } from "../../resources/styles";
-import { ChildPanelReady } from "../../layouts/panel-ready";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { isMac } from "../../util/is_mac";
@@ -164,8 +163,6 @@ class HUIRoot extends LitElement {
 
   private _restoreScroll = false;
 
-  private _childPanelReady?: ChildPanelReady;
-
   private _undoRedoController = new UndoRedoController<UndoStackItem>(this, {
     apply: (config) => this._applyUndoRedo(config),
     currentConfig: () => ({
@@ -779,7 +776,7 @@ class HUIRoot extends LitElement {
       huiView.narrow = this.narrow;
     }
 
-    let newSelectView: HUIRoot["_curView"];
+    let newSelectView;
 
     let viewPath: string | undefined = this.route!.path.split("/")[1];
     viewPath = viewPath ? decodeURI(viewPath) : undefined;
@@ -1257,7 +1254,7 @@ class HUIRoot extends LitElement {
       return;
     }
 
-    let view: HUIView;
+    let view;
     const viewConfig = this.config.views[viewIndex];
 
     if (!viewConfig) {
@@ -1268,16 +1265,12 @@ class HUIRoot extends LitElement {
     if (this._viewCache[viewIndex]) {
       view = this._viewCache[viewIndex];
     } else {
-      if (!this._childPanelReady) {
-        this._childPanelReady = new ChildPanelReady(this);
-        this.requestUpdate();
-      }
       view = document.createElement("hui-view");
       view.index = viewIndex;
       this._viewCache[viewIndex] = view;
     }
 
-    view.lovelace = this.lovelace!;
+    view.lovelace = this.lovelace;
     view.hass = this.hass;
     view.narrow = this.narrow;
 

src/panels/lovelace/views/hui-masonry-view.ts

@@ -58,12 +58,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
 
   private _mqlListenerRef?: () => void;
 
-  private _resolveInitialRender?: () => void;
-
-  public initialRenderComplete = new Promise<void>((resolve) => {
-    this._resolveInitialRender = resolve;
-  });
-
   public connectedCallback() {
     super.connectedCallback();
     this._initMqls();
@@ -172,13 +166,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       root.removeChild(root.lastChild);
     }
 
-    columns.forEach((column) => {
-      root.appendChild(column);
-    });
-    if (this.cards.length === 0 || columns.some((column) => column.lastChild)) {
-      this._resolveInitialRender?.();
-      this._resolveInitialRender = undefined;
-    }
+    columns.forEach((column) => root.appendChild(column));
   }
 
   private async _createColumns() {
@@ -246,10 +234,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
         index,
         this.lovelace!.editMode
       );
-      if (columnElements.some((column) => column.isConnected)) {
-        this._resolveInitialRender?.();
-        this._resolveInitialRender = undefined;
-      }
     }
 
     // Remove empty columns

src/panels/lovelace/views/hui-view.ts

@@ -1,5 +1,4 @@
 import deepClone from "deep-clone-simple";
-import { consume } from "@lit/context";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -20,10 +19,6 @@ import type {
 } from "../../../data/lovelace/config/view";
 import { isStrategyView } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
-import {
-  childPanelReadyContext,
-  type RegisterChildPanelReady,
-} from "../../../layouts/panel-ready";
 import "../badges/hui-badge";
 import type { HuiBadge } from "../badges/hui-badge";
 import "../cards/hui-card";
@@ -100,15 +95,6 @@ export class HUIView extends ReactiveElement {
 
   private _config?: LovelaceViewConfig;
 
-  private _resolveInitialRender?: () => void;
-
-  private _initialRenderComplete = new Promise<void>((resolve) => {
-    this._resolveInitialRender = resolve;
-  });
-
-  @consume({ context: childPanelReadyContext })
-  private _registerChildPanelReady?: RegisterChildPanelReady;
-
   @storage({
     key: "dashboardCardClipboard",
     state: false,
@@ -166,11 +152,6 @@ export class HUIView extends ReactiveElement {
     return this;
   }
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._registerChildPanelReady?.(this._initialRenderComplete);
-  }
-
   public willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
 
@@ -343,13 +324,6 @@ export class HUIView extends ReactiveElement {
     const viewConfig = await this._generateConfig(rawConfig);
 
     this._setConfig(viewConfig, isStrategy);
-    await customElements.whenDefined(this._layoutElement!.localName);
-    if (this._layoutElement instanceof ReactiveElement) {
-      await this._layoutElement.updateComplete;
-    }
-    await this._layoutElement!.initialRenderComplete;
-    this._resolveInitialRender?.();
-    this._resolveInitialRender = undefined;
   }
 
   private _createLayoutElement(config: LovelaceViewConfig): void {

src/panels/maintenance/ha-panel-maintenance.ts

@@ -5,7 +5,6 @@ import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/ha-top-app-bar-fixed";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
-import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -32,8 +31,6 @@ class PanelMaintenance extends LitElement {
 
   @state() private _searchParams = new URLSearchParams(window.location.search);
 
-  private _childPanelReady?: ChildPanelReady;
-
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -130,7 +127,6 @@ class PanelMaintenance extends LitElement {
       return;
     }
 
-    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

src/panels/security/ha-panel-security.ts

@@ -5,7 +5,6 @@ import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/ha-top-app-bar-fixed";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
-import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -32,8 +31,6 @@ class PanelSecurity extends LitElement {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  private _childPanelReady?: ChildPanelReady;
-
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -130,7 +127,6 @@ class PanelSecurity extends LitElement {
       return;
     }
 
-    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

src/translations/en.json

@@ -804,9 +804,6 @@
         "device_not_found": "Device not found",
         "entity_not_found": "Entity not found",
         "label_not_found": "Label not found",
-        "replaced_device": "Replaced device",
-        "device_replaced": "Replaced by {count} {count, plural,\n one {device}\n other {devices}\n}",
-        "replace_device": "Replace",
         "devices_count": "{count} {count, plural,\n one {device}\n other {devices}\n}",
         "entities_count": "{count} {count, plural,\n one {entity}\n other {entities}\n}",
         "target_details": "Target details",
@@ -919,16 +916,7 @@
         "unnamed_device": "Unnamed device",
         "no_area": "No area",
         "placeholder": "Select a device",
-        "unknown": "Unknown device selected",
-        "device_replaced_count": "Replaced by {count} {count, plural,\n one {device}\n other {devices}\n}",
-        "device_replaced_by_one": "This device was replaced by {device}.",
-        "device_replaced_by_multiple": "This device was replaced by {count} devices.",
-        "replace_device": "Replace",
-        "replaced_dialog": {
-          "title": "Replace device",
-          "description": "This device was replaced by multiple devices. Choose which one to use.",
-          "recommended": "Recommended"
-        }
+        "unknown": "Unknown device selected"
       },
       "category-picker": {
         "clear": "Clear",
@@ -5220,8 +5208,6 @@
               "all_entities": "All entities",
               "none_entities": "No entities",
               "template": "Template",
-              "device_replaced": "Replaced device",
-              "device_replaced_description": "This device was replaced by one or more new devices. Update this automation to use them.",
               "types": {
                 "entity": "[%key:ui::components::target-picker::type::entities%]",
                 "device": "[%key:ui::components::target-picker::type::devices%]",
@@ -5279,8 +5265,8 @@
                 "generic": {
                   "label": "Generic"
                 },
-                "integrations": {
-                  "label": "Integrations"
+                "custom_integrations": {
+                  "label": "Custom integrations"
                 }
               },
               "type": {
@@ -5591,8 +5577,8 @@
                 "building_blocks": {
                   "label": "Building blocks"
                 },
-                "integrations": {
-                  "label": "Integrations"
+                "custom_integrations": {
+                  "label": "Custom integrations"
                 }
               },
               "type": {
@@ -5761,11 +5747,11 @@
                 "device_id": {
                   "label": "Device"
                 },
-                "generic": {
-                  "label": "Generic"
+                "helpers": {
+                  "label": "Helpers"
                 },
-                "integrations": {
-                  "label": "Integrations"
+                "other": {
+                  "label": "Other actions"
                 },
                 "building_blocks": {
                   "label": "Building blocks"
@@ -6424,7 +6410,7 @@
           "account": {
             "thank_you_title": "Thank you!",
             "getting_renewal_date": "Getting renewal date…",
-            "funding_note": "Every Cloud subscription funds the Open Home Foundation, paying full-time developers to work on and keep the Home Assistant project independent. No private equity, no ads, no data harvesting.",
+            "funding_note": "Every subscription funds Home Assistant and the Open Home Foundation, paying full-time developers and keeping the project independent. No private equity, no ads, and no data harvesting.",
             "email": "Email",
             "show_email": "Show email",
             "hide_email": "Hide email",
@@ -6556,7 +6542,7 @@
             "reset_data_confirm_text": "This will reset all your cloud settings. This includes your remote connection, Google Assistant, and Amazon Alexa integrations. This action cannot be undone.",
             "reset": "Reset",
             "reset_data_failed": "Failed to reset cloud data",
-            "thank_you_note": "It's because of people like you that we are able to make a great home automation experience for everyone.",
+            "thank_you_note": "Thank you for being part of Home Assistant Cloud. It's because of people like you that we are able to make a great home automation experience for everyone. Thank you!",
             "nabu_casa_account": "Nabu Casa account",
             "connection_status": "Cloud connection status",
             "manage_account": "Manage account",
@@ -6779,10 +6765,6 @@
             "heading": "Connected devices",
             "show_more": "+{count} devices not shown"
           },
-          "linked_devices": {
-            "heading": "Linked devices",
-            "description": "These devices share hardware with this device and are managed by other integrations."
-          },
           "type": {
             "device_heading": "Device",
             "device": "device",
@@ -8636,22 +8618,6 @@
           "caption": "AI tasks",
           "description": "Configure AI suggestions and task preferences"
         },
-        "entity_id_format": {
-          "caption": "Entity ID format",
-          "description": "Manage the format of newly created entity IDs",
-          "card": {
-            "header": "Entity ID format for new entities",
-            "description": "Entity IDs are used to reference entities in automations, scripts, and dashboards. This format only applies when a new entity is created. Using it is optional, and you can still rename each entity ID afterwards in its settings",
-            "learn_more": "Learn more",
-            "preview": "Preview",
-            "reset": "Reset to default",
-            "editor": {
-              "label": "Format",
-              "add": "Add",
-              "search": "Search part"
-            }
-          }
-        },
         "labs": {
           "caption": "Labs",
           "custom_integration": "Custom integration",

test/e2e/app.spec.ts

@@ -166,40 +166,6 @@ defineRouteSmokeTests(appRouteSmokeGroups);
 // ---------------------------------------------------------------------------
 
 test.describe("Lovelace dashboard", () => {
-  test("keeps the launch screen until generated content renders", async ({
-    page,
-  }) => {
-    await goToPanel(page, "/?scenario=delayed-generated-dashboard#/climate");
-
-    const launchScreen = page.locator("#ha-launch-screen");
-    await expect(launchScreen).toBeAttached({ timeout: QUICK_TIMEOUT });
-    await expect(page.locator("hui-view")).not.toBeAttached();
-
-    await page.evaluate(() => window.resolveGeneratedDashboard?.());
-
-    await expect(page.locator("hui-view")).toBeAttached({
-      timeout: PANEL_TIMEOUT,
-    });
-    await expect(launchScreen).not.toBeAttached({ timeout: QUICK_TIMEOUT });
-  });
-
-  test("keeps the launch screen until initial content renders", async ({
-    page,
-  }) => {
-    await goToPanel(page, "/?scenario=delayed-lovelace#/lovelace");
-
-    const launchScreen = page.locator("#ha-launch-screen");
-    await expect(launchScreen).toBeAttached({ timeout: QUICK_TIMEOUT });
-    await expect(page.locator("hui-card")).not.toBeAttached();
-
-    await page.evaluate(() => window.resolveLovelaceConfig?.());
-
-    await expect(page.locator("hui-card").first()).toBeAttached({
-      timeout: PANEL_TIMEOUT,
-    });
-    await expect(launchScreen).not.toBeAttached({ timeout: QUICK_TIMEOUT });
-  });
-
   test("renders cards", async ({ page }) => {
     await goToPanel(page, "/lovelace");
     // At least one card should appear

test/e2e/app/src/ha-test.ts

@@ -92,8 +92,6 @@ declare global {
   interface Window {
     __assistRun?: unknown;
     __mockHass: MockHomeAssistant;
-    resolveGeneratedDashboard?: () => void;
-    resolveLovelaceConfig?: () => void;
   }
 }
 

test/e2e/app/src/scenarios/index.ts

@@ -1,6 +1,5 @@
 import type { ExtEntityRegistryEntry } from "../../../../../src/data/entity/entity_registry";
 import type { AssistPipeline } from "../../../../../src/data/assist_pipeline";
-import type { LovelaceRawConfig } from "../../../../../src/data/lovelace/config/types";
 import type { MockHomeAssistant } from "../../../../../src/fake_data/provide_hass";
 
 export type Scenario = (hass: MockHomeAssistant) => Promise<void> | void;
@@ -125,50 +124,6 @@ const quickSearchAssistScenario: Scenario = async (hass) => {
   });
 };
 
-const addLaunchScreen = () => {
-  const launchScreen = document.createElement("div");
-  launchScreen.id = "ha-launch-screen";
-  document.body.prepend(launchScreen);
-};
-
-const delayedLovelaceScenario: Scenario = (hass) => {
-  addLaunchScreen();
-
-  const config: LovelaceRawConfig = {
-    views: [
-      {
-        title: "Home",
-        cards: [{ type: "markdown", content: "Dashboard ready" }],
-      },
-    ],
-  };
-  let resolveConfig: ((config: LovelaceRawConfig) => void) | undefined;
-  const configPromise = new Promise<LovelaceRawConfig>((resolve) => {
-    resolveConfig = resolve;
-  });
-
-  window.resolveLovelaceConfig = () => resolveConfig?.(config);
-  hass.mockWS("lovelace/config", () => configPromise);
-};
-
-const delayedGeneratedDashboardScenario: Scenario = (hass) => {
-  addLaunchScreen();
-
-  const loadFragmentTranslation = hass.loadFragmentTranslation;
-  let resolveTranslation: (() => void) | undefined;
-  const translationReady = new Promise<void>((resolve) => {
-    resolveTranslation = resolve;
-  });
-
-  hass.loadFragmentTranslation = async (fragment) => {
-    if (fragment === "lovelace") {
-      await translationReady;
-    }
-    return loadFragmentTranslation(fragment);
-  };
-  window.resolveGeneratedDashboard = resolveTranslation;
-};
-
 // ── Registry ──────────────────────────────────────────────────────────────
 
 export const scenarios: Record<string, Scenario> = {
@@ -176,8 +131,6 @@ export const scenarios: Record<string, Scenario> = {
   "non-admin": nonAdminScenario,
   "dark-theme": darkThemeScenario,
   "custom-theme": customThemeScenario,
-  "delayed-generated-dashboard": delayedGeneratedDashboardScenario,
   "light-more-info": lightMoreInfoScenario,
   "quick-search-assist": quickSearchAssistScenario,
-  "delayed-lovelace": delayedLovelaceScenario,
 };

test/layouts/hass-router-page.test.ts

@@ -1,111 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { ReactiveElement } from "lit";
-import { state } from "lit/decorators";
-import type { RouterOptions } from "../../src/layouts/hass-router-page";
-import { HassRouterPage } from "../../src/layouts/hass-router-page";
-import { panelIsReady } from "../../src/layouts/panel-ready";
-
-class TestRouter extends HassRouterPage {
-  protected routerOptions: RouterOptions = {
-    routes: {
-      immediate: { tag: "test-immediate-panel" },
-      deferred: { tag: "test-deferred-panel", waitForReady: true },
-      loaded: {
-        tag: "test-loaded-panel",
-        load: () => loadedPanelImport,
-        waitForReady: true,
-      },
-    },
-  };
-
-  public get rendered() {
-    return this.pageRendered;
-  }
-}
-
-class ImmediatePanel extends HTMLElement {}
-
-class DeferredPanel extends ReactiveElement {
-  @state() public loaded = false;
-}
-
-let resolveLoadedPanelImport: () => void;
-const loadedPanelImport = new Promise<void>((resolve) => {
-  resolveLoadedPanelImport = resolve;
-});
-
-class LoadedPanel extends HTMLElement {}
-
-customElements.define("test-router", TestRouter);
-customElements.define("test-immediate-panel", ImmediatePanel);
-customElements.define("test-deferred-panel", DeferredPanel);
-
-let router: TestRouter | undefined;
-
-const mountRouter = async (path: string) => {
-  router = document.createElement("test-router") as TestRouter;
-  router.route = { prefix: "", path };
-  document.body.append(router);
-  await router.updateComplete;
-  return router;
-};
-
-afterEach(() => {
-  router?.remove();
-  router = undefined;
-});
-
-describe("HassRouterPage panel readiness", () => {
-  it("resolves when a routed panel has no readiness promise", async () => {
-    const element = await mountRouter("/immediate");
-
-    await expect(element.rendered).resolves.toBeUndefined();
-  });
-
-  it("waits for the routed panel readiness promise", async () => {
-    const element = await mountRouter("/deferred");
-    let ready = false;
-    element.rendered.then(() => {
-      ready = true;
-    });
-
-    await Promise.resolve();
-    expect(ready).toBe(false);
-
-    const panel = element.lastElementChild as DeferredPanel;
-    panel.loaded = true;
-    panelIsReady(panel);
-    await Promise.resolve();
-    expect(ready).toBe(false);
-
-    await expect(element.rendered).resolves.toBeUndefined();
-    expect(panel.loaded).toBe(true);
-  });
-
-  it("waits for a dynamically loaded panel before reading its readiness", async () => {
-    const element = await mountRouter("/loaded");
-    let ready = false;
-    element.rendered.then(() => {
-      ready = true;
-    });
-
-    resolveLoadedPanelImport();
-    customElements.define("test-loaded-panel", LoadedPanel);
-    await vi.waitFor(() => {
-      expect(element.lastElementChild).toBeInstanceOf(LoadedPanel);
-    });
-    expect(ready).toBe(false);
-
-    panelIsReady(element.lastElementChild as HTMLElement);
-    await expect(element.rendered).resolves.toBeUndefined();
-  });
-});
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "test-router": TestRouter;
-    "test-immediate-panel": ImmediatePanel;
-    "test-deferred-panel": DeferredPanel;
-    "test-loaded-panel": LoadedPanel;
-  }
-}